From 12b5d754fd780e414a6fb7f54ab0388be568f751 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Fri, 31 Mar 2023 17:25:44 -0500
Subject: [PATCH] Run through an auto-formatter

---
 .eslintrc.js                                  |  22 +-
 .github/ISSUE_TEMPLATE/bug_report.yml         |   8 +-
 .github/PULL_REQUEST_TEMPLATE.md              |   2 +-
 .github/SECURITY.md                           |   2 +-
 .github/renovate.json                         |  11 +-
 .github/workflows/build-pull-request.yml      |   2 +-
 .github/workflows/cla.yml                     |  10 +-
 .github/workflows/deploy-pull-request.yml     |   8 +-
 .github/workflows/docker-pr.yml               |   6 +-
 .github/workflows/lockfile.yml                |   4 +-
 .github/workflows/netlify-dev.yml             |   4 +-
 .github/workflows/prod-deploy.yml             |   2 +-
 .prettierrc.json                              |   8 +-
 CONTRIBUTING.md                               |   9 +-
 index.html                                    |  10 +-
 src/app/atoms/avatar/Avatar.jsx               | 107 +--
 src/app/atoms/avatar/Avatar.scss              |   6 +-
 src/app/atoms/avatar/render.js                |  23 +-
 src/app/atoms/badge/NotificationBadge.jsx     |  21 +-
 src/app/atoms/badge/NotificationBadge.scss    |   2 +-
 src/app/atoms/button/Button.jsx               |  76 +-
 src/app/atoms/button/Button.scss              |  12 +-
 src/app/atoms/button/Checkbox.jsx             |  19 +-
 src/app/atoms/button/Checkbox.scss            |   6 +-
 src/app/atoms/button/IconButton.jsx           | 110 +--
 src/app/atoms/button/IconButton.scss          |   4 +-
 src/app/atoms/button/RadioButton.jsx          |  13 +-
 src/app/atoms/button/RadioButton.scss         |   8 +-
 src/app/atoms/button/Toggle.jsx               |   8 +-
 src/app/atoms/button/Toggle.scss              |  11 +-
 src/app/atoms/button/_state.scss              |   3 +-
 src/app/atoms/button/script.js                |   5 +-
 src/app/atoms/card/InfoCard.jsx               |  40 +-
 src/app/atoms/card/InfoCard.scss              |   7 +-
 src/app/atoms/chip/Chip.jsx                   |  21 +-
 src/app/atoms/chip/Chip.scss                  |   8 +-
 src/app/atoms/context-menu/ContextMenu.jsx    |  67 +-
 src/app/atoms/context-menu/ContextMenu.scss   |  14 +-
 .../context-menu/ReusableContextMenu.jsx      |  38 +-
 src/app/atoms/divider/Divider.jsx             |  28 +-
 src/app/atoms/divider/Divider.scss            |  10 +-
 src/app/atoms/header/Header.jsx               |  18 +-
 src/app/atoms/header/Header.scss              |  10 +-
 src/app/atoms/input/Input.jsx                 | 127 ++--
 src/app/atoms/input/Input.scss                |   6 +-
 src/app/atoms/math/Math.jsx                   |  34 +-
 src/app/atoms/modal/RawModal.jsx              |  45 +-
 src/app/atoms/modal/RawModal.scss             |   2 +-
 src/app/atoms/scroll/ScrollView.jsx           |  38 +-
 src/app/atoms/scroll/ScrollView.scss          |   8 +-
 src/app/atoms/scroll/_scrollbar.scss          |   2 +-
 .../segmented-controls/SegmentedControls.jsx  |  58 +-
 .../segmented-controls/SegmentedControls.scss |  18 +-
 src/app/atoms/spinner/Spinner.jsx             |  14 +-
 src/app/atoms/spinner/Spinner.scss            |   2 +-
 src/app/atoms/system-icons/RawIcon.jsx        |  12 +-
 src/app/atoms/system-icons/RawIcon.scss       |   2 +-
 src/app/atoms/tabs/Tabs.jsx                   |  19 +-
 src/app/atoms/tabs/Tabs.scss                  |   8 +-
 src/app/atoms/text/Text.jsx                   |  57 +-
 src/app/atoms/text/Text.scss                  |   6 +-
 src/app/atoms/time/Time.jsx                   |  20 +-
 src/app/atoms/tooltip/Tooltip.jsx             |  16 +-
 src/app/atoms/tooltip/Tooltip.scss            |   2 +-
 src/app/hooks/useAccountData.js               |   8 +-
 src/app/hooks/useCategorizedSpaces.js         |  17 +-
 src/app/hooks/useCrossSigningStatus.js        |  12 +-
 src/app/hooks/useDeviceList.js                |  17 +-
 src/app/hooks/useForceUpdate.js               |  11 +-
 src/app/hooks/usePermission.js                |   6 +-
 src/app/hooks/useSelectedSpace.js             |  11 +-
 src/app/hooks/useSelectedTab.js               |  11 +-
 src/app/hooks/useSpaceShortcut.js             |  17 +-
 src/app/hooks/useStore.js                     |   2 +-
 .../confirm-dialog/ConfirmDialog.jsx          |  73 +-
 .../confirm-dialog/ConfirmDialog.scss         |   2 +-
 src/app/molecules/dialog/Dialog.jsx           |  45 +-
 src/app/molecules/dialog/ReusableDialog.jsx   |  27 +-
 .../following-members/FollowingMembers.jsx    |  60 +-
 .../following-members/FollowingMembers.scss   |   6 +-
 .../GlobalNotification.jsx                    | 144 ++--
 .../global-notification/IgnoreUserList.jsx    |  43 +-
 .../global-notification/IgnoreUserList.scss   |   2 +-
 .../KeywordNotification.jsx                   | 165 ++--
 .../KeywordNotification.scss                  |   2 +-
 .../NotificationSelector.jsx                  |  38 +-
 .../image-lightbox/ImageLightbox.jsx          |  32 +-
 .../image-lightbox/ImageLightbox.scss         |   7 +-
 src/app/molecules/image-pack/ImagePack.jsx    | 324 ++++----
 src/app/molecules/image-pack/ImagePack.scss   |   2 +-
 .../molecules/image-pack/ImagePackItem.jsx    |  78 +-
 .../molecules/image-pack/ImagePackItem.scss   |   6 +-
 .../molecules/image-pack/ImagePackProfile.jsx | 135 ++--
 .../image-pack/ImagePackProfile.scss          |   4 +-
 .../molecules/image-pack/ImagePackUpload.jsx  |  70 +-
 .../molecules/image-pack/ImagePackUpload.scss |  12 +-
 .../image-pack/ImagePackUsageSelector.jsx     |  28 +-
 .../molecules/image-upload/ImageUpload.jsx    |  70 +-
 .../molecules/image-upload/ImageUpload.scss   |  81 +-
 .../ExportE2ERoomKeys.jsx                     |  81 +-
 .../ExportE2ERoomKeys.scss                    |   3 +-
 .../ImportE2ERoomKeys.jsx                     |  88 ++-
 .../ImportE2ERoomKeys.scss                    |  11 +-
 src/app/molecules/media/Media.jsx             | 180 +++--
 src/app/molecules/media/Media.scss            |   2 +-
 src/app/molecules/message/Message.jsx         | 583 +++++++++------
 src/app/molecules/message/Message.scss        |  12 +-
 src/app/molecules/message/TimelineChange.jsx  |  62 +-
 src/app/molecules/message/TimelineChange.scss |   4 +-
 .../people-selector/PeopleSelector.jsx        |  37 +-
 .../people-selector/PeopleSelector.scss       |   4 +-
 .../molecules/popup-window/PopupWindow.jsx    |  98 ++-
 .../molecules/popup-window/PopupWindow.scss   |   5 +-
 .../PowerLevelSelector.jsx                    |  52 +-
 .../PowerLevelSelector.scss                   |   8 +-
 .../molecules/room-aliases/RoomAliases.jsx    | 180 +++--
 .../molecules/room-aliases/RoomAliases.scss   |  16 +-
 src/app/molecules/room-emojis/RoomEmojis.jsx  |  85 ++-
 src/app/molecules/room-emojis/RoomEmojis.scss |   4 +-
 .../room-encryption/RoomEncryption.jsx        |  58 +-
 .../room-encryption/RoomEncryption.scss       |   2 +-
 .../RoomHistoryVisibility.jsx                 | 123 +--
 .../RoomHistoryVisibility.scss                |  12 +-
 src/app/molecules/room-intro/RoomIntro.jsx    |  42 +-
 src/app/molecules/room-intro/RoomIntro.scss   |   4 +-
 .../molecules/room-members/RoomMembers.jsx    | 121 +--
 .../molecules/room-members/RoomMembers.scss   |  11 +-
 .../room-notification/RoomNotification.jsx    | 174 +++--
 .../room-notification/RoomNotification.scss   |  12 +-
 .../molecules/room-options/RoomOptions.jsx    |  52 +-
 .../room-permissions/RoomPermissions.jsx      | 319 ++++----
 .../room-permissions/RoomPermissions.scss     |   2 +-
 .../molecules/room-profile/RoomProfile.jsx    | 161 ++--
 .../molecules/room-profile/RoomProfile.scss   |  13 +-
 src/app/molecules/room-search/RoomSearch.jsx  |  84 ++-
 src/app/molecules/room-search/RoomSearch.scss |  12 +-
 .../molecules/room-selector/RoomSelector.jsx  |  71 +-
 .../molecules/room-selector/RoomSelector.scss |  10 +-
 src/app/molecules/room-tile/RoomTile.jsx      |  62 +-
 src/app/molecules/room-tile/RoomTile.scss     |   2 +-
 .../room-visibility/RoomVisibility.jsx        | 148 ++--
 .../room-visibility/RoomVisibility.scss       |  12 +-
 .../molecules/setting-tile/SettingTile.jsx    |  22 +-
 .../molecules/setting-tile/SettingTile.scss   |   4 +-
 .../sidebar-avatar/SidebarAvatar.jsx          |  74 +-
 .../sidebar-avatar/SidebarAvatar.scss         |   6 +-
 .../space-add-existing/SpaceAddExisting.jsx   | 219 +++---
 .../space-add-existing/SpaceAddExisting.scss  |   8 +-
 .../molecules/space-options/SpaceOptions.jsx  |  76 +-
 src/app/molecules/sso-buttons/SSOButtons.jsx  |  51 +-
 src/app/molecules/sso-buttons/SSOButtons.scss |   4 +-
 src/app/organisms/create-room/CreateRoom.jsx  | 248 +++---
 src/app/organisms/create-room/CreateRoom.scss |  10 +-
 src/app/organisms/drag-drop/DragDrop.jsx      |  14 +-
 src/app/organisms/emoji-board/EmojiBoard.jsx  | 165 ++--
 src/app/organisms/emoji-board/EmojiBoard.scss |  16 +-
 .../emoji-board/EmojiBoardOpener.jsx          |  33 +-
 src/app/organisms/emoji-board/custom-emoji.js |  95 ++-
 src/app/organisms/emoji-board/emoji.js        |  88 ++-
 src/app/organisms/emoji-board/recent.js       |  11 +-
 .../emoji-verification/EmojiVerification.jsx  | 116 +--
 .../emoji-verification/EmojiVerification.scss |   4 +-
 src/app/organisms/invite-list/InviteList.jsx  | 152 ++--
 src/app/organisms/invite-list/InviteList.scss |   4 +-
 src/app/organisms/invite-user/InviteUser.jsx  | 227 ++++--
 src/app/organisms/invite-user/InviteUser.scss |   6 +-
 src/app/organisms/join-alias/JoinAlias.jsx    | 109 +--
 src/app/organisms/join-alias/JoinAlias.scss   |   4 +-
 src/app/organisms/navigation/Directs.jsx      |  63 +-
 src/app/organisms/navigation/Drawer.jsx       |  64 +-
 src/app/organisms/navigation/Drawer.scss      |  14 +-
 .../organisms/navigation/DrawerBreadcrumb.jsx | 112 +--
 .../navigation/DrawerBreadcrumb.scss          |   8 +-
 src/app/organisms/navigation/DrawerHeader.jsx | 140 ++--
 .../organisms/navigation/DrawerHeader.scss    |  10 +-
 src/app/organisms/navigation/Home.jsx         | 114 +--
 src/app/organisms/navigation/Navigation.jsx   |   8 +-
 src/app/organisms/navigation/Navigation.scss  |   2 +-
 .../organisms/navigation/RoomsCategory.jsx    |  89 ++-
 .../organisms/navigation/RoomsCategory.scss   |  12 +-
 src/app/organisms/navigation/Selector.jsx     |  67 +-
 src/app/organisms/navigation/SideBar.jsx      | 238 +++---
 src/app/organisms/navigation/SideBar.scss     |  16 +-
 .../profile-editor/ProfileEditor.jsx          |  77 +-
 .../profile-editor/ProfileEditor.scss         |   9 +-
 .../profile-viewer/ProfileViewer.jsx          | 255 ++++---
 .../profile-viewer/ProfileViewer.scss         |  16 +-
 .../organisms/public-rooms/PublicRooms.jsx    | 270 ++++---
 .../organisms/public-rooms/PublicRooms.scss   |  20 +-
 src/app/organisms/pw/Dialogs.jsx              |  22 +-
 src/app/organisms/pw/Windows.jsx              |  48 +-
 .../organisms/read-receipts/ReadReceipts.jsx  |  56 +-
 src/app/organisms/room/EventLimit.js          |   5 +-
 src/app/organisms/room/PeopleDrawer.jsx       | 190 ++---
 src/app/organisms/room/PeopleDrawer.scss      |  12 +-
 src/app/organisms/room/Room.jsx               |  39 +-
 src/app/organisms/room/Room.scss              |   4 +-
 src/app/organisms/room/RoomSettings.jsx       | 194 +++--
 src/app/organisms/room/RoomSettings.scss      |  16 +-
 src/app/organisms/room/RoomView.jsx           |  43 +-
 src/app/organisms/room/RoomView.scss          |  10 +-
 src/app/organisms/room/RoomViewCmdBar.jsx     | 157 ++--
 src/app/organisms/room/RoomViewCmdBar.scss    |  10 +-
 src/app/organisms/room/RoomViewContent.jsx    | 380 ++++++----
 src/app/organisms/room/RoomViewContent.scss   |  13 +-
 src/app/organisms/room/RoomViewFloating.jsx   | 105 ++-
 src/app/organisms/room/RoomViewFloating.scss  |  19 +-
 src/app/organisms/room/RoomViewHeader.jsx     | 117 ++-
 src/app/organisms/room/RoomViewHeader.scss    |  10 +-
 src/app/organisms/room/RoomViewInput.jsx      | 261 ++++---
 src/app/organisms/room/RoomViewInput.scss     |   8 +-
 src/app/organisms/room/TimelineScroll.js      |  30 +-
 src/app/organisms/room/commands.jsx           | 142 ++--
 src/app/organisms/room/commands.scss          |   2 +-
 src/app/organisms/room/common.jsx             | 164 ++--
 src/app/organisms/search/Search.jsx           | 104 ++-
 src/app/organisms/search/Search.scss          |  19 +-
 src/app/organisms/settings/AuthRequest.jsx    |  48 +-
 src/app/organisms/settings/AuthRequest.scss   |   2 +-
 src/app/organisms/settings/CrossSigning.jsx   | 182 +++--
 src/app/organisms/settings/CrossSigning.scss  |   6 +-
 src/app/organisms/settings/DeviceManage.jsx   | 271 ++++---
 src/app/organisms/settings/DeviceManage.scss  |   6 +-
 src/app/organisms/settings/KeyBackup.jsx      | 165 ++--
 src/app/organisms/settings/KeyBackup.scss     |   4 +-
 .../settings/SecretStorageAccess.jsx          | 105 +--
 .../settings/SecretStorageAccess.scss         |   2 +-
 src/app/organisms/settings/Settings.jsx       | 430 +++++++----
 src/app/organisms/settings/Settings.scss      |  17 +-
 .../shortcut-spaces/ShortcutSpaces.jsx        | 120 +--
 .../shortcut-spaces/ShortcutSpaces.scss       |  10 +-
 .../organisms/space-manage/SpaceManage.jsx    | 231 +++---
 .../organisms/space-manage/SpaceManage.scss   |  16 +-
 .../space-settings/SpaceSettings.jsx          | 164 ++--
 .../space-settings/SpaceSettings.scss         |   6 +-
 .../organisms/sticker-board/StickerBoard.jsx  |  62 +-
 .../organisms/sticker-board/StickerBoard.scss |  10 +-
 src/app/organisms/view-source/ViewSource.jsx  |  44 +-
 src/app/organisms/view-source/ViewSource.scss |   2 +-
 src/app/organisms/welcome/Welcome.jsx         |  27 +-
 src/app/organisms/welcome/Welcome.scss        |   4 +-
 src/app/pages/App.jsx                         |   8 +-
 src/app/partials/_dir.scss                    |  12 +-
 src/app/partials/_screen.scss                 |   4 +-
 src/app/partials/_text.scss                   |   2 +-
 src/app/templates/auth/Auth.jsx               | 703 ++++++++++++------
 src/app/templates/auth/Auth.scss              |  38 +-
 src/app/templates/client/Client.jsx           |  89 ++-
 src/app/templates/client/Client.scss          |   4 +-
 src/client/action/accountData.js              |   4 +-
 src/client/action/auth.js                     |  87 ++-
 src/client/action/navigation.js               |   4 +-
 src/client/action/notifications.js            |   2 +-
 src/client/action/room.js                     | 173 +++--
 src/client/action/roomTimeline.js             |  22 +-
 src/client/action/settings.js                 |   4 +-
 src/client/dispatcher.js                      |   2 +-
 src/client/event/hotkeys.js                   |  58 +-
 src/client/event/roomList.js                  |   6 +-
 src/client/initMatrix.js                      |  53 +-
 src/client/state/AccountData.js               |  32 +-
 src/client/state/Notifications.js             | 132 ++--
 src/client/state/RoomList.js                  | 220 +++---
 src/client/state/RoomTimeline.js              | 121 ++-
 src/client/state/RoomsHierarchy.js            |   4 +-
 src/client/state/RoomsInput.js                | 182 +++--
 src/client/state/auth.js                      |   7 +-
 src/client/state/cons.js                      | 234 +++---
 src/client/state/navigation.js                | 109 +--
 src/client/state/secretStorageKeys.js         |   2 +-
 src/client/state/settings.js                  | 104 ++-
 src/font.js                                   |  10 +-
 src/index.jsx                                 |  14 +-
 src/index.scss                                |  89 +--
 src/util/AsyncSearch.js                       |  28 +-
 src/util/Postie.js                            |  31 +-
 src/util/colorMXID.js                         |   2 +-
 src/util/common.js                            |  32 +-
 src/util/cryptE2ERoomKeys.js                  | 142 ++--
 src/util/markdown.js                          | 475 +++++++-----
 src/util/matrixUtil.js                        |  97 ++-
 src/util/mimetypes.js                         |  52 +-
 src/util/sanitize.js                          | 132 +++-
 src/util/sort.js                              |   6 +-
 src/util/twemojify.jsx                        |  33 +-
 vite.config.js                                |  73 +-
 viteSvgLoader.ts                              |  12 +-
 287 files changed, 10107 insertions(+), 6916 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e8f9224e..20b84beb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,24 +9,21 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    'airbnb',
-    'prettier',
+    "airbnb",
+    "prettier",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  plugins: [
-    'react',
-    '@typescript-eslint'
-  ],
+  plugins: ["react", "@typescript-eslint"],
   rules: {
-    'linebreak-style': 0,
-    'no-underscore-dangle': 0,
+    "linebreak-style": 0,
+    "no-underscore-dangle": 0,
 
     "import/prefer-default-export": "off",
     "import/extensions": "off",
@@ -38,10 +35,7 @@ module.exports = {
       },
     ],
 
-    'react/no-unstable-nested-components': [
-      'error',
-      { allowAsProps: true },
-    ],
+    "react/no-unstable-nested-components": ["error", { allowAsProps: true }],
     "react/jsx-filename-extension": [
       "error",
       {
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 76fc578a..20ce0e4e 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -42,10 +42,10 @@ body:
       label: Platform and versions
       description: "Provide OS, browser and Cinny version with your Homeserver."
       placeholder: |
-       1. OS: [e.g. Windows 10, MacOS]
-       2. Browser: [e.g. chrome 99.5, firefox 97.2]
-       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
-       4. Matrix homeserver: [e.g. matrix.org]
+        1. OS: [e.g. Windows 10, MacOS]
+        2. Browser: [e.g. chrome 99.5, firefox 97.2]
+        3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
+        4. Matrix homeserver: [e.g. matrix.org]
       render: shell
     validations:
       required: true
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 1292f1d2..d481c26b 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,8 +1,8 @@
 <!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
 
 ### Description
-<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
+<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
 Fixes #
 
diff --git a/.github/SECURITY.md b/.github/SECURITY.md
index 2dd642df..2a84c324 100644
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -1,3 +1,3 @@
 # Reporting a Vulnerability
 
-**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**
\ No newline at end of file
+**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**
diff --git a/.github/renovate.json b/.github/renovate.json
index 46ce4fdf..f50fc8b0 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -1,15 +1,12 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    ":dependencyDashboardApproval"
-  ],
-  "labels": [ "Dependencies" ],
+  "extends": ["config:base", ":dependencyDashboardApproval"],
+  "labels": ["Dependencies"],
   "packageRules": [
     {
-    "matchUpdateTypes": [ "lockFileMaintenance" ]
+      "matchUpdateTypes": ["lockFileMaintenance"]
     }
   ],
   "lockFileMaintenance": { "enabled": true },
   "dependencyDashboard": true
-}
\ No newline at end of file
+}
diff --git a/.github/workflows/build-pull-request.yml b/.github/workflows/build-pull-request.yml
index 5be04293..1e8bd552 100644
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@@ -2,7 +2,7 @@ name: Build pull request
 
 on:
   pull_request:
-    types: ['opened', 'synchronize']
+    types: ["opened", "synchronize"]
 
 jobs:
   build-pull-request:
diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml
index b433b8d9..b7d40dcf 100644
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@@ -1,4 +1,4 @@
-name: 'CLA Assistant'
+name: "CLA Assistant"
 on:
   issue_comment:
     types: [created]
@@ -9,7 +9,7 @@ jobs:
   CLAssistant:
     runs-on: ubuntu-latest
     steps:
-      - name: 'CLA Assistant'
+      - name: "CLA Assistant"
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
         uses: cla-assistant/github-action@v2.2.1
@@ -18,10 +18,10 @@ jobs:
           # the below token should have repo scope and must be manually added by you in the repository's secret
           PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
         with:
-          path-to-signatures: 'signatures.json'
-          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
+          path-to-signatures: "signatures.json"
+          path-to-document: "https://github.com/cinnyapp/cla/blob/main/cla.md" # e.g. a CLA or a DCO document
           # branch should not be protected
-          branch: 'main'
+          branch: "main"
           allowlist: ajbura,bot*
 
           #below are the optional inputs - If the optional inputs are not given, then default values will be taken
diff --git a/.github/workflows/deploy-pull-request.yml b/.github/workflows/deploy-pull-request.yml
index ab54f8df..28a00904 100644
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@@ -2,8 +2,8 @@ name: Deploy PR to Netlify
 
 on:
   workflow_run:
-      workflows: ["Build pull request"]
-      types: [completed]
+    workflows: ["Build pull request"]
+    types: [completed]
 
 jobs:
   deploy-pull-request:
@@ -52,5 +52,5 @@ jobs:
           pr_number: ${{ steps.pr.outputs.id }}
           comment_tag: ${{ steps.pr.outputs.id }}
           message: |
-              Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
\ No newline at end of file
+            Preview: ${{ steps.netlify.outputs.deploy-url }}
+            ⚠️ Exercise caution. Use test accounts. ⚠️
diff --git a/.github/workflows/docker-pr.yml b/.github/workflows/docker-pr.yml
index 47dbfe32..9b10ccf0 100644
--- a/.github/workflows/docker-pr.yml
+++ b/.github/workflows/docker-pr.yml
@@ -1,10 +1,10 @@
-name: 'Docker check'
+name: "Docker check"
 
 on:
   pull_request:
     paths:
-      - 'Dockerfile'
-      - '.github/workflows/docker-pr.yml'
+      - "Dockerfile"
+      - ".github/workflows/docker-pr.yml"
 
 jobs:
   docker-build:
diff --git a/.github/workflows/lockfile.yml b/.github/workflows/lockfile.yml
index b417df10..70ca354f 100644
--- a/.github/workflows/lockfile.yml
+++ b/.github/workflows/lockfile.yml
@@ -3,7 +3,7 @@ name: NPM Lockfile Changes
 on:
   pull_request:
     paths:
-      - 'package-lock.json'
+      - "package-lock.json"
 
 jobs:
   lockfile_changes:
@@ -23,4 +23,4 @@ jobs:
           collapsibleThreshold: 25
           failOnDowngrade: false
           path: package-lock.json
-          updateComment: true
\ No newline at end of file
+          updateComment: true
diff --git a/.github/workflows/netlify-dev.yml b/.github/workflows/netlify-dev.yml
index 12785f46..9a297147 100644
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@@ -3,7 +3,7 @@ name: Deploy to Netlify (dev)
 on:
   push:
     branches:
-       - dev
+      - dev
 
 jobs:
   deploy-to-netlify:
@@ -32,7 +32,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
           github-deployment-environment: nightly
-          github-deployment-description: 'Nightly deployment on each commit to dev branch'
+          github-deployment-description: "Nightly deployment on each commit to dev branch"
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
diff --git a/.github/workflows/prod-deploy.yml b/.github/workflows/prod-deploy.yml
index 8d72a86e..6c7c958d 100644
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@@ -31,7 +31,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
           github-deployment-environment: stable
-          github-deployment-description: 'Stable deployment on each release'
+          github-deployment-description: "Stable deployment on each release"
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
diff --git a/.prettierrc.json b/.prettierrc.json
index 5ac85e27..c72a02ba 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,4 +1,8 @@
 {
-  "printWidth": 100,
-  "singleQuote": true
+  "tabWidth": 2,
+  "semi": true,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index fea421b2..42fccadc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,6 +5,7 @@ First off, thanks for taking the time to contribute! ❤️
 All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
 
 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+>
 > - Star the project
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
@@ -18,6 +19,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests
 
 > ### Legal Notice
+>
 > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
 
 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
@@ -26,9 +28,9 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 
 Example:
 
-|Not ideal|Better|
-|---|----|
-|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
+| Not ideal                           | Better                                        |
+| ----------------------------------- | --------------------------------------------- |
+| Fixed markAllAsRead in RoomTimeline | Fix read marker when paginating room timeline |
 
 It is not always possible to phrase every change in such a manner, but it is desired.
 
@@ -39,6 +41,7 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 **For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
 
 ## Helpful links
+
 - [BEM methodology](http://getbem.com/introduction/)
 - [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
 - [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
diff --git a/index.html b/index.html
index af1a6268..93219dd4 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,10 @@
 
     <meta property="og:title" content="Cinny" />
     <meta property="og:url" content="https://cinny.in" />
-    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
+    <meta
+      property="og:image"
+      content="https://cinny.in/assets/favicon-48x48.png"
+    />
     <meta
       property="og:description"
       content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
@@ -32,7 +35,10 @@
     <meta name="application-name" content="Cinny" />
     <meta name="apple-mobile-web-app-title" content="Cinny" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
 
     <link
       rel="apple-touch-icon"
diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index fc46c250..fbb0f9c3 100644
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -1,64 +1,69 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Avatar.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Avatar.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
 
-import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
-import { avatarInitials } from '../../../util/common';
+import ImageBrokenSVG from "../../../../public/res/svg/image-broken.svg";
+import { avatarInitials } from "../../../util/common";
 
-const Avatar = React.forwardRef(({
-  text, bgColor, iconSrc, iconColor, imageSrc, size,
-}, ref) => {
-  let textSize = 's1';
-  if (size === 'large') textSize = 'h1';
-  if (size === 'small') textSize = 'b1';
-  if (size === 'extra-small') textSize = 'b3';
+const Avatar = React.forwardRef(
+  ({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
+    let textSize = "s1";
+    if (size === "large") textSize = "h1";
+    if (size === "small") textSize = "b1";
+    if (size === "extra-small") textSize = "b3";
 
-  return (
-    <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
-      {
-        imageSrc !== null
-          ? (
-            <img
-              draggable="false"
-              src={imageSrc}
-              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
-              onError={(e) => { e.target.src = ImageBrokenSVG; }}
-              alt=""
-            />
-          )
-          : (
-            <span
-              style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
-            >
-              {
-                iconSrc !== null
-                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
-                  : text !== null && (
-                    <Text variant={textSize} primary>
-                      {twemojify(avatarInitials(text))}
-                    </Text>
-                  )
-              }
-            </span>
-          )
-      }
-    </div>
-  );
-});
+    return (
+      <div
+        ref={ref}
+        className={`avatar-container avatar-container__${size} noselect`}
+      >
+        {imageSrc !== null ? (
+          <img
+            draggable="false"
+            src={imageSrc}
+            onLoad={(e) => {
+              e.target.style.backgroundColor = "transparent";
+            }}
+            onError={(e) => {
+              e.target.src = ImageBrokenSVG;
+            }}
+            alt=""
+          />
+        ) : (
+          <span
+            style={{
+              backgroundColor: iconSrc === null ? bgColor : "transparent",
+            }}
+            className={`avatar__border${iconSrc !== null ? "--active" : ""}`}
+          >
+            {iconSrc !== null ? (
+              <RawIcon size={size} src={iconSrc} color={iconColor} />
+            ) : (
+              text !== null && (
+                <Text variant={textSize} primary>
+                  {twemojify(avatarInitials(text))}
+                </Text>
+              )
+            )}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
 
 Avatar.defaultProps = {
   text: null,
-  bgColor: 'transparent',
+  bgColor: "transparent",
   iconSrc: null,
   iconColor: null,
   imageSrc: null,
-  size: 'normal',
+  size: "normal",
 };
 
 Avatar.propTypes = {
@@ -67,7 +72,7 @@ Avatar.propTypes = {
   iconSrc: PropTypes.string,
   iconColor: PropTypes.string,
   imageSrc: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
 };
 
 export default Avatar;
diff --git a/src/app/atoms/avatar/Avatar.scss b/src/app/atoms/avatar/Avatar.scss
index ea69c9e8..4d16d8c7 100644
--- a/src/app/atoms/avatar/Avatar.scss
+++ b/src/app/atoms/avatar/Avatar.scss
@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .avatar-container {
   display: inline-flex;
@@ -36,7 +36,7 @@
 
   .avatar__border {
     @extend .cp-fx__row--c-c;
-    
+
     position: absolute;
     top: 0;
     left: 0;
@@ -53,4 +53,4 @@
       box-shadow: var(--bs-surface-border);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/avatar/render.js b/src/app/atoms/avatar/render.js
index e8cf1a66..309f9467 100644
--- a/src/app/atoms/avatar/render.js
+++ b/src/app/atoms/avatar/render.js
@@ -1,15 +1,20 @@
-import { avatarInitials, cssVar } from '../../../util/common';
+import { avatarInitials, cssVar } from "../../../util/common";
 
 // renders the avatar and returns it as an URL
 export default async function renderAvatar({
-  text, bgColor, imageSrc, size, borderRadius, scale,
+  text,
+  bgColor,
+  imageSrc,
+  size,
+  borderRadius,
+  scale,
 }) {
   try {
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = size * scale;
     canvas.height = size * scale;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
 
     ctx.scale(scale, scale);
 
@@ -27,7 +32,7 @@ export default async function renderAvatar({
       ctx.clip();
 
       const img = new Image();
-      img.crossOrigin = 'anonymous';
+      img.crossOrigin = "anonymous";
       const promise = new Promise((resolve, reject) => {
         img.onerror = reject;
         img.onload = resolve;
@@ -42,10 +47,10 @@ export default async function renderAvatar({
       ctx.fill();
 
       // centered letter
-      ctx.fillStyle = '#fff';
-      ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
-      ctx.textBaseline = 'middle';
-      ctx.textAlign = 'center';
+      ctx.fillStyle = "#fff";
+      ctx.font = `${cssVar("--fs-s1")} ${cssVar("--font-primary")}`;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "center";
       ctx.fillText(avatarInitials(text), size / 2, size / 2);
     }
 
diff --git a/src/app/atoms/badge/NotificationBadge.jsx b/src/app/atoms/badge/NotificationBadge.jsx
index 12c1bd44..ff12873f 100644
--- a/src/app/atoms/badge/NotificationBadge.jsx
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@@ -1,14 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './NotificationBadge.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./NotificationBadge.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
 
 function NotificationBadge({ alert, content }) {
-  const notificationClass = alert ? ' notification-badge--alert' : '';
+  const notificationClass = alert ? " notification-badge--alert" : "";
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
+      {content !== null && (
+        <Text variant="b3" weight="bold">
+          {content}
+        </Text>
+      )}
     </div>
   );
 }
@@ -20,10 +24,7 @@ NotificationBadge.defaultProps = {
 
 NotificationBadge.propTypes = {
   alert: PropTypes.bool,
-  content: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 export default NotificationBadge;
diff --git a/src/app/atoms/badge/NotificationBadge.scss b/src/app/atoms/badge/NotificationBadge.scss
index f5cfa73f..564d0032 100644
--- a/src/app/atoms/badge/NotificationBadge.scss
+++ b/src/app/atoms/badge/NotificationBadge.scss
@@ -18,4 +18,4 @@
     min-width: 8px;
     margin: 0 var(--sp-ultra-tight);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/Button.jsx b/src/app/atoms/button/Button.jsx
index 1c1c950c..4cdf152b 100644
--- a/src/app/atoms/button/Button.jsx
+++ b/src/app/atoms/button/Button.jsx
@@ -1,40 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Button.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Button.scss";
 
-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
-import { blurOnBubbling } from './script';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
+import { blurOnBubbling } from "./script";
 
-const Button = React.forwardRef(({
-  id, className, variant, iconSrc,
-  type, onClick, children, disabled,
-}, ref) => {
-  const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
-  return (
-    <button
-      ref={ref}
-      id={id === '' ? undefined : id}
-      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
-      onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
-      onClick={onClick}
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      disabled={disabled}
-    >
-      {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
-      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
-      {typeof children !== 'string' && children }
-    </button>
-  );
-});
+const Button = React.forwardRef(
+  (
+    { id, className, variant, iconSrc, type, onClick, children, disabled },
+    ref
+  ) => {
+    const iconClass = iconSrc === null ? "" : `btn-${variant}--icon`;
+    return (
+      <button
+        ref={ref}
+        id={id === "" ? undefined : id}
+        className={`${
+          className ? `${className} ` : ""
+        }btn-${variant} ${iconClass} noselect`}
+        onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
+        onClick={onClick}
+        // eslint-disable-next-line react/button-has-type
+        type={type}
+        disabled={disabled}
+      >
+        {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
+        {typeof children === "string" && <Text variant="b1">{children}</Text>}
+        {typeof children !== "string" && children}
+      </button>
+    );
+  }
+);
 
 Button.defaultProps = {
-  id: '',
+  id: "",
   className: null,
-  variant: 'surface',
+  variant: "surface",
   iconSrc: null,
-  type: 'button',
+  type: "button",
   onClick: null,
   disabled: false,
 };
@@ -42,9 +46,15 @@ Button.defaultProps = {
 Button.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
   iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
   onClick: PropTypes.func,
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
diff --git a/src/app/atoms/button/Button.scss b/src/app/atoms/button/Button.scss
index e1a01bb0..dd08dce0 100644
--- a/src/app/atoms/button/Button.scss
+++ b/src/app/atoms/button/Button.scss
@@ -1,6 +1,6 @@
-@use 'state';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "state";
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .btn-surface,
 .btn-primary,
@@ -22,10 +22,9 @@
   & .text {
     @extend .cp-txt__ellipsis;
   }
-  
+
   &--icon {
     @include dir.side(padding, var(--sp-tight), var(--sp-loose));
-
   }
   .ic-raw {
     @include dir.side(margin, 0, var(--sp-extra-tight));
@@ -42,7 +41,6 @@
   }
 }
 
-
 .btn-surface {
   box-shadow: var(--bs-surface-border);
   @include color(var(--tc-surface-high), var(--ic-surface-normal));
@@ -78,4 +76,4 @@
   @include state.hover(var(--bg-danger-hover));
   @include state.focus(var(--bs-danger-outline));
   @include state.active(var(--bg-danger-active));
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/Checkbox.jsx b/src/app/atoms/button/Checkbox.jsx
index 7fcea3b5..0fd05770 100644
--- a/src/app/atoms/button/Checkbox.jsx
+++ b/src/app/atoms/button/Checkbox.jsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Checkbox.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Checkbox.scss";
 
-function Checkbox({
-  variant, isActive, onToggle,
-  disabled, tabIndex,
-}) {
-  const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
+function Checkbox({ variant, isActive, onToggle, disabled, tabIndex }) {
+  const className = `checkbox checkbox-${variant}${
+    isActive ? " checkbox--active" : ""
+  }`;
   if (onToggle === null) return <span className={className} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
@@ -21,7 +20,7 @@ function Checkbox({
 }
 
 Checkbox.defaultProps = {
-  variant: 'primary',
+  variant: "primary",
   isActive: false,
   onToggle: null,
   disabled: false,
@@ -29,7 +28,7 @@ Checkbox.defaultProps = {
 };
 
 Checkbox.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["primary", "positive", "caution", "danger"]),
   isActive: PropTypes.bool,
   onToggle: PropTypes.func,
   disabled: PropTypes.bool,
diff --git a/src/app/atoms/button/Checkbox.scss b/src/app/atoms/button/Checkbox.scss
index a54daa63..85c440fd 100644
--- a/src/app/atoms/button/Checkbox.scss
+++ b/src/app/atoms/button/Checkbox.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use './state';
+@use "../../partials/flex";
+@use "./state";
 
 .checkbox {
   width: 20px;
@@ -36,4 +36,4 @@
 }
 .checkbox-danger.checkbox--active {
   background-color: var(--bg-danger);
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx
index f6a8730e..a6e3ea03 100644
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@@ -1,62 +1,80 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './IconButton.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./IconButton.scss";
 
-import RawIcon from '../system-icons/RawIcon';
-import Tooltip from '../tooltip/Tooltip';
-import { blurOnBubbling } from './script';
-import Text from '../text/Text';
+import RawIcon from "../system-icons/RawIcon";
+import Tooltip from "../tooltip/Tooltip";
+import { blurOnBubbling } from "./script";
+import Text from "../text/Text";
 
-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}`}
-      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
-      onClick={onClick}
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      tabIndex={tabIndex}
-      disabled={disabled}
-    >
-      <RawIcon size={size} src={src} isImage={isImage} />
-    </button>
-  );
-  if (tooltip === null) return btn;
-  return (
-    <Tooltip
-      placement={tooltipPlacement}
-      content={<Text variant="b2">{tooltip}</Text>}
-    >
-      {btn}
-    </Tooltip>
-  );
-});
+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}`}
+        onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
+        onClick={onClick}
+        // eslint-disable-next-line react/button-has-type
+        type={type}
+        tabIndex={tabIndex}
+        disabled={disabled}
+      >
+        <RawIcon size={size} src={src} isImage={isImage} />
+      </button>
+    );
+    if (tooltip === null) return btn;
+    return (
+      <Tooltip
+        placement={tooltipPlacement}
+        content={<Text variant="b2">{tooltip}</Text>}
+      >
+        {btn}
+      </Tooltip>
+    );
+  }
+);
 
 IconButton.defaultProps = {
-  variant: 'surface',
-  size: 'normal',
-  type: 'button',
+  variant: "surface",
+  size: "normal",
+  type: "button",
   tooltip: null,
-  tooltipPlacement: 'top',
+  tooltipPlacement: "top",
   onClick: null,
   tabIndex: 0,
   disabled: false,
   isImage: false,
-  className: '',
+  className: "",
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
+  size: PropTypes.oneOf(["normal", "small", "extra-small"]),
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
   tooltip: PropTypes.string,
-  tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  tooltipPlacement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
   src: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   tabIndex: PropTypes.number,
diff --git a/src/app/atoms/button/IconButton.scss b/src/app/atoms/button/IconButton.scss
index aa6480c0..2b38bd83 100644
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@@ -1,4 +1,4 @@
-@use 'state';
+@use "state";
 
 .ic-btn {
   padding: var(--sp-extra-tight);
@@ -53,4 +53,4 @@
   @include state.hover(var(--bg-danger-hover));
   @include focus(var(--bg-danger-hover));
   @include state.active(var(--bg-danger-active));
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/RadioButton.jsx b/src/app/atoms/button/RadioButton.jsx
index 35b68baf..9044bd70 100644
--- a/src/app/atoms/button/RadioButton.jsx
+++ b/src/app/atoms/button/RadioButton.jsx
@@ -1,14 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RadioButton.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RadioButton.scss";
 
 function RadioButton({ isActive, onToggle, disabled }) {
-  if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
+  if (onToggle === null)
+    return (
+      <span className={`radio-btn${isActive ? " radio-btn--active" : ""}`} />
+    );
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
     <button
       onClick={() => onToggle(!isActive)}
-      className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
+      className={`radio-btn${isActive ? " radio-btn--active" : ""}`}
       type="button"
       disabled={disabled}
     />
diff --git a/src/app/atoms/button/RadioButton.scss b/src/app/atoms/button/RadioButton.scss
index 19284910..18d89236 100644
--- a/src/app/atoms/button/RadioButton.scss
+++ b/src/app/atoms/button/RadioButton.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use './state';
+@use "../../partials/flex";
+@use "./state";
 
 .radio-btn {
   @extend .cp-fx__row--c-c;
@@ -12,7 +12,7 @@
   @include state.disabled;
 
   &::before {
-    content: '';
+    content: "";
     display: inline-block;
     width: 12px;
     height: 12px;
@@ -25,4 +25,4 @@
       background-color: var(--bg-positive);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/Toggle.jsx b/src/app/atoms/button/Toggle.jsx
index b599791f..87f3b535 100644
--- a/src/app/atoms/button/Toggle.jsx
+++ b/src/app/atoms/button/Toggle.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Toggle.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Toggle.scss";
 
 function Toggle({ isActive, onToggle, disabled }) {
-  const className = `toggle${isActive ? ' toggle--active' : ''}`;
+  const className = `toggle${isActive ? " toggle--active" : ""}`;
   if (onToggle === null) return <span className={className} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
diff --git a/src/app/atoms/button/Toggle.scss b/src/app/atoms/button/Toggle.scss
index bc6d8a90..1d8a7f9c 100644
--- a/src/app/atoms/button/Toggle.scss
+++ b/src/app/atoms/button/Toggle.scss
@@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use './state';
+@use "../../partials/dir";
+@use "./state";
 
 .toggle {
   width: 44px;
@@ -16,14 +16,13 @@
   transition: background 200ms ease-in-out;
 
   &::before {
-    content: '';
+    content: "";
     display: inline-block;
     width: 16px;
     height: 16px;
     background-color: var(--tc-surface-low);
     border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out,
-      opacity 200ms ease-in-out;
+    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
     opacity: 0.6;
   }
 
@@ -40,4 +39,4 @@
       opacity: 1;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/_state.scss b/src/app/atoms/button/_state.scss
index f74d7095..789de2aa 100644
--- a/src/app/atoms/button/_state.scss
+++ b/src/app/atoms/button/_state.scss
@@ -1,4 +1,3 @@
-
 @mixin hover($color) {
   @media (hover: hover) {
     &:hover {
@@ -22,4 +21,4 @@
     opacity: 0.4;
     cursor: no-drop;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/button/script.js b/src/app/atoms/button/script.js
index e607a0ca..90fd420d 100644
--- a/src/app/atoms/button/script.js
+++ b/src/app/atoms/button/script.js
@@ -10,7 +10,10 @@ function blurOnBubbling(e, selector) {
 
   for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
     if (bubblingPath[elIndex] === document) {
-      console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
+      console.warn(
+        blurOnBubbling,
+        "blurOnBubbling: not found selector in bubbling path"
+      );
       break;
     }
     if (bubblingPath[elIndex].matches(selector)) {
diff --git a/src/app/atoms/card/InfoCard.jsx b/src/app/atoms/card/InfoCard.jsx
index e530d5c0..88991945 100644
--- a/src/app/atoms/card/InfoCard.jsx
+++ b/src/app/atoms/card/InfoCard.jsx
@@ -1,24 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './InfoCard.scss';
+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 Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
+import IconButton from "../button/IconButton";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function InfoCard({
-  className, style,
-  variant, iconSrc,
-  title, content,
-  rounded, requestClose,
+  className,
+  style,
+  variant,
+  iconSrc,
+  title,
+  content,
+  rounded,
+  requestClose,
 }) {
   const classes = [`info-card info-card--${variant}`];
-  if (rounded) classes.push('info-card--rounded');
+  if (rounded) classes.push("info-card--rounded");
   if (className) classes.push(className);
   return (
-    <div className={classes.join(' ')} style={style}>
+    <div className={classes.join(" ")} style={style}>
       {iconSrc && (
         <div className="info-card__icon">
           <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
@@ -38,7 +42,7 @@ function InfoCard({
 InfoCard.defaultProps = {
   className: null,
   style: null,
-  variant: 'surface',
+  variant: "surface",
   iconSrc: null,
   content: null,
   rounded: false,
@@ -48,7 +52,13 @@ InfoCard.defaultProps = {
 InfoCard.propTypes = {
   className: PropTypes.string,
   style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
   iconSrc: PropTypes.string,
   title: PropTypes.string.isRequired,
   content: PropTypes.node,
diff --git a/src/app/atoms/card/InfoCard.scss b/src/app/atoms/card/InfoCard.scss
index 79d72ebb..12492ae6 100644
--- a/src/app/atoms/card/InfoCard.scss
+++ b/src/app/atoms/card/InfoCard.scss
@@ -1,5 +1,5 @@
-@use '.././../partials/flex';
-@use '.././../partials/dir';
+@use ".././../partials/flex";
+@use ".././../partials/dir";
 
 .info-card {
   display: flex;
@@ -34,7 +34,6 @@
   &--surface {
     border-color: var(--bg-surface-border);
     background-color: var(--bg-surface-hover);
-
   }
   &--primary {
     border-color: var(--bg-primary);
@@ -76,4 +75,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/chip/Chip.jsx b/src/app/atoms/chip/Chip.jsx
index b21cf9ed..fd5b0de4 100644
--- a/src/app/atoms/chip/Chip.jsx
+++ b/src/app/atoms/chip/Chip.jsx
@@ -1,18 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Chip.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Chip.scss";
 
-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
 
-function Chip({
-  iconSrc, iconColor, text, children,
-  onClick,
-}) {
+function Chip({ iconSrc, iconColor, text, children, onClick }) {
   return (
     <button className="chip" type="button" onClick={onClick}>
-      {iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
-      {(text != null && text !== '') && <Text variant="b3">{text}</Text>}
+      {iconSrc != null && (
+        <RawIcon src={iconSrc} color={iconColor} size="extra-small" />
+      )}
+      {text != null && text !== "" && <Text variant="b3">{text}</Text>}
       {children}
     </button>
   );
diff --git a/src/app/atoms/chip/Chip.scss b/src/app/atoms/chip/Chip.scss
index 7396b0dc..e69d6e4f 100644
--- a/src/app/atoms/chip/Chip.scss
+++ b/src/app/atoms/chip/Chip.scss
@@ -1,12 +1,12 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .chip {
   padding: var(--sp-ultra-tight) var(--sp-extra-tight);
-  
+
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  
+
   background: var(--bg-surface-low);
   border-radius: var(--bo-radius);
   box-shadow: var(--bs-surface-border);
@@ -28,4 +28,4 @@
     height: 16px;
     @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/context-menu/ContextMenu.jsx b/src/app/atoms/context-menu/ContextMenu.jsx
index 7d1acd44..e870c9c9 100644
--- a/src/app/atoms/context-menu/ContextMenu.jsx
+++ b/src/app/atoms/context-menu/ContextMenu.jsx
@@ -1,17 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './ContextMenu.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./ContextMenu.scss";
 
-import Tippy from '@tippyjs/react';
-import 'tippy.js/animations/scale-extreme.css';
+import Tippy from "@tippyjs/react";
+import "tippy.js/animations/scale-extreme.css";
 
-import Text from '../text/Text';
-import Button from '../button/Button';
-import ScrollView from '../scroll/ScrollView';
+import Text from "../text/Text";
+import Button from "../button/Button";
+import ScrollView from "../scroll/ScrollView";
 
-function ContextMenu({
-  content, placement, maxWidth, render, afterToggle,
-}) {
+function ContextMenu({ content, placement, maxWidth, render, afterToggle }) {
   const [isVisible, setVisibility] = useState(false);
   const showMenu = () => setVisibility(true);
   const hideMenu = () => setVisibility(false);
@@ -26,7 +24,11 @@ function ContextMenu({
       className="context-menu"
       visible={isVisible}
       onClickOutside={hideMenu}
-      content={<ScrollView invisible>{typeof content === 'function' ? content(hideMenu) : content}</ScrollView>}
+      content={
+        <ScrollView invisible>
+          {typeof content === "function" ? content(hideMenu) : content}
+        </ScrollView>
+      }
       placement={placement}
       interactive
       arrow={false}
@@ -39,21 +41,15 @@ function ContextMenu({
 }
 
 ContextMenu.defaultProps = {
-  maxWidth: 'unset',
-  placement: 'right',
+  maxWidth: "unset",
+  placement: "right",
   afterToggle: null,
 };
 
 ContextMenu.propTypes = {
-  content: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-  ]).isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  maxWidth: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  placement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   render: PropTypes.func.isRequired,
   afterToggle: PropTypes.func,
 };
@@ -61,7 +57,7 @@ ContextMenu.propTypes = {
 function MenuHeader({ children }) {
   return (
     <div className="context-menu__header">
-      <Text variant="b3">{ children }</Text>
+      <Text variant="b3">{children}</Text>
     </div>
   );
 }
@@ -70,10 +66,7 @@ MenuHeader.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-function MenuItem({
-  variant, iconSrc, type,
-  onClick, children, disabled,
-}) {
+function MenuItem({ variant, iconSrc, type, onClick, children, disabled }) {
   return (
     <div className="context-menu__item">
       <Button
@@ -83,33 +76,33 @@ function MenuItem({
         onClick={onClick}
         disabled={disabled}
       >
-        { children }
+        {children}
       </Button>
     </div>
   );
 }
 
 MenuItem.defaultProps = {
-  variant: 'surface',
+  variant: "surface",
   iconSrc: null,
-  type: 'button',
+  type: "button",
   disabled: false,
   onClick: null,
 };
 
 MenuItem.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["surface", "positive", "caution", "danger"]),
   iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(["button", "submit"]),
   onClick: PropTypes.func,
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
 };
 
 function MenuBorder() {
-  return <div style={{ borderBottom: '1px solid var(--bg-surface-border)' }}> </div>;
+  return (
+    <div style={{ borderBottom: "1px solid var(--bg-surface-border)" }}> </div>
+  );
 }
 
-export {
-  ContextMenu as default, MenuHeader, MenuItem, MenuBorder,
-};
+export { ContextMenu as default, MenuHeader, MenuItem, MenuBorder };
diff --git a/src/app/atoms/context-menu/ContextMenu.scss b/src/app/atoms/context-menu/ContextMenu.scss
index 2df9f0a4..c6771c2a 100644
--- a/src/app/atoms/context-menu/ContextMenu.scss
+++ b/src/app/atoms/context-menu/ContextMenu.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .context-menu {
   background-color: var(--bg-surface);
@@ -59,11 +59,7 @@
 
     // if item doesn't have icon
     .text:first-child {
-      @include dir.side(
-        margin,
-        calc(var(--ic-small) + var(--sp-tight)),
-        0
-      );
+      @include dir.side(margin, calc(var(--ic-small) + var(--sp-tight)), 0);
     }
   }
   .btn-surface:focus {
@@ -78,4 +74,4 @@
   .btn-danger:focus {
     background-color: var(--bg-danger-hover);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/context-menu/ReusableContextMenu.jsx b/src/app/atoms/context-menu/ReusableContextMenu.jsx
index 59bdb142..e28aaef3 100644
--- a/src/app/atoms/context-menu/ReusableContextMenu.jsx
+++ b/src/app/atoms/context-menu/ReusableContextMenu.jsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
 
-import ContextMenu from './ContextMenu';
+import ContextMenu from "./ContextMenu";
 
 let key = null;
 function ReusableContextMenu() {
@@ -29,14 +29,20 @@ function ReusableContextMenu() {
         return;
       }
       setData({
-        placement, cords, render, afterClose,
+        placement,
+        cords,
+        render,
+        afterClose,
       });
     };
-    navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
+    navigation.on(
+      cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
+      handleContextMenuOpen
+    );
     return () => {
       navigation.removeListener(
         cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
-        handleContextMenuOpen,
+        handleContextMenuOpen
       );
     };
   }, [data]);
@@ -59,24 +65,24 @@ function ReusableContextMenu() {
   return (
     <ContextMenu
       afterToggle={handleAfterToggle}
-      placement={data?.placement || 'right'}
-      content={data?.render(closeMenu) ?? ''}
+      placement={data?.placement || "right"}
+      content={data?.render(closeMenu) ?? ""}
       render={(toggleMenu) => (
         <input
           ref={openerRef}
           onClick={toggleMenu}
           type="button"
           style={{
-            width: '32px',
-            height: '32px',
-            backgroundColor: 'transparent',
-            position: 'fixed',
+            width: "32px",
+            height: "32px",
+            backgroundColor: "transparent",
+            position: "fixed",
             top: 0,
             left: 0,
             padding: 0,
-            border: 'none',
-            visibility: 'hidden',
-            appearance: 'none',
+            border: "none",
+            visibility: "hidden",
+            appearance: "none",
           }}
         />
       )}
diff --git a/src/app/atoms/divider/Divider.jsx b/src/app/atoms/divider/Divider.jsx
index 76721241..5b4a3868 100644
--- a/src/app/atoms/divider/Divider.jsx
+++ b/src/app/atoms/divider/Divider.jsx
@@ -1,28 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Divider.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Divider.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
 
 function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
+      {text !== null && (
+        <Text className="divider__text" variant="b3" weight="bold">
+          {text}
+        </Text>
+      )}
     </div>
   );
 }
 
 Divider.defaultProps = {
   text: null,
-  variant: 'surface',
-  align: 'center',
+  variant: "surface",
+  align: "center",
 };
 
 Divider.propTypes = {
   text: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  align: PropTypes.oneOf(['left', 'center', 'right']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
+  align: PropTypes.oneOf(["left", "center", "right"]),
 };
 
 export default Divider;
diff --git a/src/app/atoms/divider/Divider.scss b/src/app/atoms/divider/Divider.scss
index 0f013ff0..f85c4c0d 100644
--- a/src/app/atoms/divider/Divider.scss
+++ b/src/app/atoms/divider/Divider.scss
@@ -1,5 +1,5 @@
 .divider-line {
-  content: '';
+  content: "";
   display: inline-block;
   flex: 1;
   border-bottom: 1px solid var(--local-divider-color);
@@ -36,7 +36,7 @@
 }
 .divider--primary {
   --local-divider-color: var(--bg-primary);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--tc-primary-high);
     background-color: var(--bg-primary);
@@ -44,7 +44,7 @@
 }
 .divider--positive {
   --local-divider-color: var(--bg-positive);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--bg-surface);
     background-color: var(--bg-positive);
@@ -52,7 +52,7 @@
 }
 .divider--danger {
   --local-divider-color: var(--bg-danger);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--bg-surface);
     background-color: var(--bg-danger);
@@ -60,7 +60,7 @@
 }
 .divider--caution {
   --local-divider-color: var(--bg-caution);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--bg-surface);
     background-color: var(--bg-caution);
diff --git a/src/app/atoms/header/Header.jsx b/src/app/atoms/header/Header.jsx
index 3c81e423..c21ab0d3 100644
--- a/src/app/atoms/header/Header.jsx
+++ b/src/app/atoms/header/Header.jsx
@@ -1,13 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Header.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Header.scss";
 
 function Header({ children }) {
-  return (
-    <div className="header">
-      {children}
-    </div>
-  );
+  return <div className="header">{children}</div>;
 }
 
 Header.propTypes = {
@@ -15,11 +11,7 @@ Header.propTypes = {
 };
 
 function TitleWrapper({ children }) {
-  return (
-    <div className="header__title-wrapper">
-      {children}
-    </div>
-  );
+  return <div className="header__title-wrapper">{children}</div>;
 }
 
 TitleWrapper.propTypes = {
diff --git a/src/app/atoms/header/Header.scss b/src/app/atoms/header/Header.scss
index 9e45f824..99162e80 100644
--- a/src/app/atoms/header/Header.scss
+++ b/src/app/atoms/header/Header.scss
@@ -1,5 +1,5 @@
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .header {
   @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@@ -15,7 +15,7 @@
     display: flex;
     align-items: center;
     margin: 0 var(--sp-tight);
-    
+
     &:first-child {
       @include dir.side(margin, 0, var(--sp-tight));
     }
@@ -24,7 +24,7 @@
       @extend .cp-txt__ellipsis;
       min-width: 0;
     }
-    & > .text-b3{
+    & > .text-b3 {
       flex: 1;
       min-width: 0;
 
@@ -40,4 +40,4 @@
       display: -webkit-box;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/input/Input.jsx b/src/app/atoms/input/Input.jsx
index 96c94967..98ba7e51 100644
--- a/src/app/atoms/input/Input.jsx
+++ b/src/app/atoms/input/Input.jsx
@@ -1,75 +1,92 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Input.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Input.scss";
 
-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from "react-autosize-textarea";
 
 function Input({
-  id, label, name, value, placeholder,
-  required, type, onChange, forwardRef,
-  resizable, minHeight, onResize, state,
-  onKeyDown, disabled, autoFocus,
+  id,
+  label,
+  name,
+  value,
+  placeholder,
+  required,
+  type,
+  onChange,
+  forwardRef,
+  resizable,
+  minHeight,
+  onResize,
+  state,
+  onKeyDown,
+  disabled,
+  autoFocus,
 }) {
   return (
     <div className="input-container">
-      { label !== '' && <label className="input__label text-b2" htmlFor={id}>{label}</label> }
-      { resizable
-        ? (
-          <TextareaAutosize
-            dir="auto"
-            style={{ minHeight: `${minHeight}px` }}
-            name={name}
-            id={id}
-            className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
-            ref={forwardRef}
-            type={type}
-            placeholder={placeholder}
-            required={required}
-            defaultValue={value}
-            autoComplete="off"
-            onChange={onChange}
-            onResize={onResize}
-            onKeyDown={onKeyDown}
-            disabled={disabled}
-            autoFocus={autoFocus}
-          />
-        ) : (
-          <input
-            dir="auto"
-            ref={forwardRef}
-            id={id}
-            name={name}
-            className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
-            type={type}
-            placeholder={placeholder}
-            required={required}
-            defaultValue={value}
-            autoComplete="off"
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            disabled={disabled}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus={autoFocus}
-          />
-        )}
+      {label !== "" && (
+        <label className="input__label text-b2" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      {resizable ? (
+        <TextareaAutosize
+          dir="auto"
+          style={{ minHeight: `${minHeight}px` }}
+          name={name}
+          id={id}
+          className={`input input--resizable${
+            state !== "normal" ? ` input--${state}` : ""
+          }`}
+          ref={forwardRef}
+          type={type}
+          placeholder={placeholder}
+          required={required}
+          defaultValue={value}
+          autoComplete="off"
+          onChange={onChange}
+          onResize={onResize}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          autoFocus={autoFocus}
+        />
+      ) : (
+        <input
+          dir="auto"
+          ref={forwardRef}
+          id={id}
+          name={name}
+          className={`input ${state !== "normal" ? ` input--${state}` : ""}`}
+          type={type}
+          placeholder={placeholder}
+          required={required}
+          defaultValue={value}
+          autoComplete="off"
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={autoFocus}
+        />
+      )}
     </div>
   );
 }
 
 Input.defaultProps = {
   id: null,
-  name: '',
-  label: '',
-  value: '',
-  placeholder: '',
-  type: 'text',
+  name: "",
+  label: "",
+  value: "",
+  placeholder: "",
+  type: "text",
   required: false,
   onChange: null,
   forwardRef: null,
   resizable: false,
   minHeight: 46,
   onResize: null,
-  state: 'normal',
+  state: "normal",
   onKeyDown: null,
   disabled: false,
   autoFocus: false,
@@ -88,7 +105,7 @@ Input.propTypes = {
   resizable: PropTypes.bool,
   minHeight: PropTypes.number,
   onResize: PropTypes.func,
-  state: PropTypes.oneOf(['normal', 'success', 'error']),
+  state: PropTypes.oneOf(["normal", "success", "error"]),
   onKeyDown: PropTypes.func,
   disabled: PropTypes.bool,
   autoFocus: PropTypes.bool,
diff --git a/src/app/atoms/input/Input.scss b/src/app/atoms/input/Input.scss
index 40fe43ec..3a6b63b5 100644
--- a/src/app/atoms/input/Input.scss
+++ b/src/app/atoms/input/Input.scss
@@ -1,4 +1,4 @@
-@use '../../atoms/scroll/scrollbar';
+@use "../../atoms/scroll/scrollbar";
 
 .input {
   display: block;
@@ -47,6 +47,6 @@
     box-shadow: var(--bs-primary-border);
   }
   &::placeholder {
-    color: var(--tc-surface-low)
+    color: var(--tc-surface-low);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/math/Math.jsx b/src/app/atoms/math/Math.jsx
index ab52a478..d53ead86 100644
--- a/src/app/atoms/math/Math.jsx
+++ b/src/app/atoms/math/Math.jsx
@@ -1,23 +1,27 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './Math.scss';
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./Math.scss";
 
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
+import katex from "katex";
+import "katex/dist/katex.min.css";
 
-import 'katex/dist/contrib/copy-tex';
+import "katex/dist/contrib/copy-tex";
 
-const Math = React.memo(({
-  content, throwOnError, errorColor, displayMode,
-}) => {
-  const ref = useRef(null);
+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]);
+    useEffect(() => {
+      katex.render(content, ref.current, {
+        throwOnError,
+        errorColor,
+        displayMode,
+      });
+    }, [content, throwOnError, errorColor, displayMode]);
 
-  return <span ref={ref} />;
-});
+    return <span ref={ref} />;
+  }
+);
 Math.defaultProps = {
   throwOnError: null,
   errorColor: null,
diff --git a/src/app/atoms/modal/RawModal.jsx b/src/app/atoms/modal/RawModal.jsx
index 450be0e0..66a25b33 100644
--- a/src/app/atoms/modal/RawModal.jsx
+++ b/src/app/atoms/modal/RawModal.jsx
@@ -1,36 +1,43 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RawModal.scss';
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RawModal.scss";
 
-import Modal from 'react-modal';
+import Modal from "react-modal";
 
-import navigation from '../../../client/state/navigation';
+import navigation from "../../../client/state/navigation";
 
-Modal.setAppElement('#root');
+Modal.setAppElement("#root");
 
 function RawModal({
-  className, overlayClassName,
-  isOpen, size, onAfterOpen, onAfterClose,
-  onRequestClose, closeFromOutside, children,
+  className,
+  overlayClassName,
+  isOpen,
+  size,
+  onAfterOpen,
+  onAfterClose,
+  onRequestClose,
+  closeFromOutside,
+  children,
 }) {
-  let modalClass = (className !== null) ? `${className} ` : '';
+  let modalClass = className !== null ? `${className} ` : "";
   switch (size) {
-    case 'large':
-      modalClass += 'raw-modal__large ';
+    case "large":
+      modalClass += "raw-modal__large ";
       break;
-    case 'medium':
-      modalClass += 'raw-modal__medium ';
+    case "medium":
+      modalClass += "raw-modal__medium ";
       break;
-    case 'small':
+    case "small":
     default:
-      modalClass += 'raw-modal__small ';
+      modalClass += "raw-modal__small ";
   }
 
   useEffect(() => {
     navigation.setIsRawModalVisible(isOpen);
   }, [isOpen]);
 
-  const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
+  const modalOverlayClass =
+    overlayClassName !== null ? `${overlayClassName} ` : "";
   return (
     <Modal
       className={`${modalClass}raw-modal`}
@@ -51,7 +58,7 @@ function RawModal({
 RawModal.defaultProps = {
   className: null,
   overlayClassName: null,
-  size: 'small',
+  size: "small",
   onAfterOpen: null,
   onAfterClose: null,
   onRequestClose: null,
@@ -62,7 +69,7 @@ RawModal.propTypes = {
   className: PropTypes.string,
   overlayClassName: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes.oneOf(["large", "medium", "small"]),
   onAfterOpen: PropTypes.func,
   onAfterClose: PropTypes.func,
   onRequestClose: PropTypes.func,
diff --git a/src/app/atoms/modal/RawModal.scss b/src/app/atoms/modal/RawModal.scss
index d612a4bc..d5a27f36 100644
--- a/src/app/atoms/modal/RawModal.scss
+++ b/src/app/atoms/modal/RawModal.scss
@@ -49,7 +49,7 @@
 @keyframes raw-modal--content {
   0% {
     transform: translateY(100px);
-    opacity: .5;
+    opacity: 0.5;
   }
   100% {
     transform: translateY(0);
diff --git a/src/app/atoms/scroll/ScrollView.jsx b/src/app/atoms/scroll/ScrollView.jsx
index 26c0c83a..83713699 100644
--- a/src/app/atoms/scroll/ScrollView.jsx
+++ b/src/app/atoms/scroll/ScrollView.jsx
@@ -1,21 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ScrollView.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ScrollView.scss";
 
-const ScrollView = React.forwardRef(({
-  horizontal, vertical, autoHide, invisible, onScroll, children,
-}, ref) => {
-  let scrollbarClasses = '';
-  if (horizontal) scrollbarClasses += ' scrollbar__h';
-  if (vertical) scrollbarClasses += ' scrollbar__v';
-  if (autoHide) scrollbarClasses += ' scrollbar--auto-hide';
-  if (invisible) scrollbarClasses += ' scrollbar--invisible';
-  return (
-    <div onScroll={onScroll} ref={ref} className={`scrollbar${scrollbarClasses}`}>
-      {children}
-    </div>
-  );
-});
+const ScrollView = React.forwardRef(
+  ({ horizontal, vertical, autoHide, invisible, onScroll, children }, ref) => {
+    let scrollbarClasses = "";
+    if (horizontal) scrollbarClasses += " scrollbar__h";
+    if (vertical) scrollbarClasses += " scrollbar__v";
+    if (autoHide) scrollbarClasses += " scrollbar--auto-hide";
+    if (invisible) scrollbarClasses += " scrollbar--invisible";
+    return (
+      <div
+        onScroll={onScroll}
+        ref={ref}
+        className={`scrollbar${scrollbarClasses}`}
+      >
+        {children}
+      </div>
+    );
+  }
+);
 
 ScrollView.defaultProps = {
   horizontal: false,
diff --git a/src/app/atoms/scroll/ScrollView.scss b/src/app/atoms/scroll/ScrollView.scss
index 251037e1..44a766c1 100644
--- a/src/app/atoms/scroll/ScrollView.scss
+++ b/src/app/atoms/scroll/ScrollView.scss
@@ -1,8 +1,8 @@
-@use '../../partials/dir';
-@use '_scrollbar';
+@use "../../partials/dir";
+@use "_scrollbar";
 
 @mixin paddingForSafari($padding) {
-	@media not all and (min-resolution:.001dpcm) {
+  @media not all and (min-resolution: 0.001dpcm) {
     @include dir.side(padding, 0, $padding);
   }
 }
@@ -28,4 +28,4 @@
     @include scrollbar.scroll--invisible;
     @include paddingForSafari(0);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/scroll/_scrollbar.scss b/src/app/atoms/scroll/_scrollbar.scss
index 78ec75ad..cd688991 100644
--- a/src/app/atoms/scroll/_scrollbar.scss
+++ b/src/app/atoms/scroll/_scrollbar.scss
@@ -62,4 +62,4 @@
   &::-webkit-scrollbar {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/segmented-controls/SegmentedControls.jsx b/src/app/atoms/segmented-controls/SegmentedControls.jsx
index 1d54dd06..27709edb 100644
--- a/src/app/atoms/segmented-controls/SegmentedControls.jsx
+++ b/src/app/atoms/segmented-controls/SegmentedControls.jsx
@@ -1,15 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './SegmentedControls.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./SegmentedControls.scss";
 
-import { blurOnBubbling } from '../button/script';
+import { blurOnBubbling } from "../button/script";
 
-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
 
-function SegmentedControls({
-  selected, segments, onSelect,
-}) {
+function SegmentedControls({ selected, segments, onSelect }) {
   const [select, setSelect] = useState(selected);
 
   function selectSegment(segmentIndex) {
@@ -23,32 +21,34 @@ function SegmentedControls({
 
   return (
     <div className="segmented-controls">
-      {
-        segments.map((segment, index) => (
-          <button
-            key={Math.random().toString(20).substr(2, 6)}
-            className={`segment-btn${select === index ? ' segment-btn--active' : ''}`}
-            type="button"
-            onClick={() => selectSegment(index)}
-            onMouseUp={(e) => blurOnBubbling(e, '.segment-btn')}
-          >
-            <div className="segment-btn__base">
-              {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
-              {segment.text && <Text variant="b2">{segment.text}</Text>}
-            </div>
-          </button>
-        ))
-      }
+      {segments.map((segment, index) => (
+        <button
+          key={Math.random().toString(20).substr(2, 6)}
+          className={`segment-btn${
+            select === index ? " segment-btn--active" : ""
+          }`}
+          type="button"
+          onClick={() => selectSegment(index)}
+          onMouseUp={(e) => blurOnBubbling(e, ".segment-btn")}
+        >
+          <div className="segment-btn__base">
+            {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
+            {segment.text && <Text variant="b2">{segment.text}</Text>}
+          </div>
+        </button>
+      ))}
     </div>
   );
 }
 
 SegmentedControls.propTypes = {
   selected: PropTypes.number.isRequired,
-  segments: PropTypes.arrayOf(PropTypes.shape({
-    iconSrc: PropTypes.string,
-    text: PropTypes.string,
-  })).isRequired,
+  segments: PropTypes.arrayOf(
+    PropTypes.shape({
+      iconSrc: PropTypes.string,
+      text: PropTypes.string,
+    })
+  ).isRequired,
   onSelect: PropTypes.func.isRequired,
 };
 
diff --git a/src/app/atoms/segmented-controls/SegmentedControls.scss b/src/app/atoms/segmented-controls/SegmentedControls.scss
index fb1fd987..d907c79f 100644
--- a/src/app/atoms/segmented-controls/SegmentedControls.scss
+++ b/src/app/atoms/segmented-controls/SegmentedControls.scss
@@ -1,5 +1,5 @@
-@use '../button/state';
-@use '../../partials/dir';
+@use "../button/state";
+@use "../../partials/dir";
 
 .segmented-controls {
   background-color: var(--bg-surface-low);
@@ -40,18 +40,22 @@
     & + .segment-btn .segment-btn__base {
       border: none;
     }
-    &:first-child{
+    &:first-child {
       border-left: none;
     }
     &:last-child {
       border-right: none;
     }
-    [dir=rtl] & {
+    [dir="rtl"] & {
       border-left: 1px solid var(--bg-surface-border);
       border-right: 1px solid var(--bg-surface-border);
 
-      &:first-child { border-right: none;}
-      &:last-child { border-left: none;}
+      &:first-child {
+        border-right: none;
+      }
+      &:last-child {
+        border-left: none;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/spinner/Spinner.jsx b/src/app/atoms/spinner/Spinner.jsx
index 61c9747e..8a474d68 100644
--- a/src/app/atoms/spinner/Spinner.jsx
+++ b/src/app/atoms/spinner/Spinner.jsx
@@ -1,19 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Spinner.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Spinner.scss";
 
 function Spinner({ size }) {
-  return (
-    <div className={`donut-spinner donut-spinner--${size}`}> </div>
-  );
+  return <div className={`donut-spinner donut-spinner--${size}`}> </div>;
 }
 
 Spinner.defaultProps = {
-  size: 'normal',
+  size: "normal",
 };
 
 Spinner.propTypes = {
-  size: PropTypes.oneOf(['normal', 'small']),
+  size: PropTypes.oneOf(["normal", "small"]),
 };
 
 export default Spinner;
diff --git a/src/app/atoms/spinner/Spinner.scss b/src/app/atoms/spinner/Spinner.scss
index 73fbf676..82b0e820 100644
--- a/src/app/atoms/spinner/Spinner.scss
+++ b/src/app/atoms/spinner/Spinner.scss
@@ -19,4 +19,4 @@
   to {
     transform: rotate(1turn);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/system-icons/RawIcon.jsx b/src/app/atoms/system-icons/RawIcon.jsx
index a6697f4f..446fca3f 100644
--- a/src/app/atoms/system-icons/RawIcon.jsx
+++ b/src/app/atoms/system-icons/RawIcon.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RawIcon.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RawIcon.scss";
 
 function RawIcon({ color, size, src, isImage }) {
   const style = {};
   if (color !== null) style.backgroundColor = color;
   if (isImage) {
-    style.backgroundColor = 'transparent';
+    style.backgroundColor = "transparent";
     style.backgroundImage = `url("${src}")`;
   } else {
     style.WebkitMaskImage = `url("${src}")`;
@@ -18,13 +18,13 @@ function RawIcon({ color, size, src, isImage }) {
 
 RawIcon.defaultProps = {
   color: null,
-  size: 'normal',
+  size: "normal",
   isImage: false,
 };
 
 RawIcon.propTypes = {
   color: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
   src: PropTypes.string.isRequired,
   isImage: PropTypes.bool,
 };
diff --git a/src/app/atoms/system-icons/RawIcon.scss b/src/app/atoms/system-icons/RawIcon.scss
index 56fc9b3c..87c85b8f 100644
--- a/src/app/atoms/system-icons/RawIcon.scss
+++ b/src/app/atoms/system-icons/RawIcon.scss
@@ -25,4 +25,4 @@
 }
 .ic-raw-extra-small {
   @include icSize(var(--ic-extra-small));
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/tabs/Tabs.jsx b/src/app/atoms/tabs/Tabs.jsx
index 39800ce3..180c1bc7 100644
--- a/src/app/atoms/tabs/Tabs.jsx
+++ b/src/app/atoms/tabs/Tabs.jsx
@@ -1,15 +1,12 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './Tabs.scss';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./Tabs.scss";
 
-import Button from '../button/Button';
-import ScrollView from '../scroll/ScrollView';
+import Button from "../button/Button";
+import ScrollView from "../scroll/ScrollView";
 
-function TabItem({
-  selected, iconSrc,
-  onClick, children, disabled,
-}) {
-  const isSelected = selected ? 'tab-item--selected' : '';
+function TabItem({ selected, iconSrc, onClick, children, disabled }) {
+  const isSelected = selected ? "tab-item--selected" : "";
 
   return (
     <Button
@@ -78,7 +75,7 @@ Tabs.propTypes = {
       iconSrc: PropTypes.string,
       text: PropTypes.string,
       disabled: PropTypes.bool,
-    }),
+    })
   ).isRequired,
   defaultSelected: PropTypes.number,
   onSelect: PropTypes.func.isRequired,
diff --git a/src/app/atoms/tabs/Tabs.scss b/src/app/atoms/tabs/Tabs.scss
index 39ddddec..11f2a3a1 100644
--- a/src/app/atoms/tabs/Tabs.scss
+++ b/src/app/atoms/tabs/Tabs.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .tabs {
   height: var(--header-height);
@@ -13,12 +13,12 @@
 
 .tab-item {
   flex-shrink: 0;
-  
+
   @include dir.side(padding, var(--sp-normal), 24px);
   border-radius: 0;
   height: 100%;
   box-shadow: none;
-  border-radius: var(--bo-radius) var(--bo-radius)   0 0;
+  border-radius: var(--bo-radius) var(--bo-radius) 0 0;
 
   &:focus,
   &:active {
@@ -42,4 +42,4 @@
       box-shadow: var(--bs-tab-selected);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/text/Text.jsx b/src/app/atoms/text/Text.jsx
index 3f507ee3..92a7696d 100644
--- a/src/app/atoms/text/Text.jsx
+++ b/src/app/atoms/text/Text.jsx
@@ -1,30 +1,51 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Text.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Text.scss";
 
-function Text({
-  className, style, variant, weight,
-  primary, span, children,
-}) {
+function Text({ className, style, variant, weight, primary, span, children }) {
   const classes = [];
   if (className) classes.push(className);
 
   classes.push(`text text-${variant} text-${weight}`);
-  if (primary) classes.push('font-primary');
+  if (primary) classes.push("font-primary");
 
-  const textClass = classes.join(' ');
-  if (span) return <span className={textClass} style={style}>{ children }</span>;
-  if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
-  if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
-  if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
-  return <p className={textClass} style={style}>{ children }</p>;
+  const textClass = classes.join(" ");
+  if (span)
+    return (
+      <span className={textClass} style={style}>
+        {children}
+      </span>
+    );
+  if (variant === "h1")
+    return (
+      <h1 className={textClass} style={style}>
+        {children}
+      </h1>
+    );
+  if (variant === "h2")
+    return (
+      <h2 className={textClass} style={style}>
+        {children}
+      </h2>
+    );
+  if (variant === "s1")
+    return (
+      <h4 className={textClass} style={style}>
+        {children}
+      </h4>
+    );
+  return (
+    <p className={textClass} style={style}>
+      {children}
+    </p>
+  );
 }
 
 Text.defaultProps = {
   className: null,
   style: null,
-  variant: 'b1',
-  weight: 'normal',
+  variant: "b1",
+  weight: "normal",
   primary: false,
   span: false,
 };
@@ -32,8 +53,8 @@ Text.defaultProps = {
 Text.propTypes = {
   className: PropTypes.string,
   style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
-  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  variant: PropTypes.oneOf(["h1", "h2", "s1", "b1", "b2", "b3"]),
+  weight: PropTypes.oneOf(["light", "normal", "medium", "bold"]),
   primary: PropTypes.bool,
   span: PropTypes.bool,
   children: PropTypes.node.isRequired,
diff --git a/src/app/atoms/text/Text.scss b/src/app/atoms/text/Text.scss
index 256bf6ea..f4967854 100644
--- a/src/app/atoms/text/Text.scss
+++ b/src/app/atoms/text/Text.scss
@@ -5,7 +5,7 @@
 
   & img.emoji,
   & img[data-mx-emoticon] {
-    height: calc(var(--lh-#{$type}) - .25rem);
+    height: calc(var(--lh-#{$type}) - 0.25rem);
   }
 }
 
@@ -20,7 +20,7 @@
     margin-right: 2px !important;
     padding: 0 !important;
     position: relative;
-    top: -.1rem;
+    top: -0.1rem;
     vertical-align: middle;
   }
 }
@@ -58,4 +58,4 @@
 .text-b3 {
   @include font(b3);
   color: var(--tc-surface-low);
-}
\ No newline at end of file
+}
diff --git a/src/app/atoms/time/Time.jsx b/src/app/atoms/time/Time.jsx
index 750b958f..3053d58e 100644
--- a/src/app/atoms/time/Time.jsx
+++ b/src/app/atoms/time/Time.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import dateFormat from 'dateformat';
-import { isInSameDay } from '../../../util/common';
+import dateFormat from "dateformat";
+import { isInSameDay } from "../../../util/common";
 
 function Time({ timestamp, fullTime }) {
   const date = new Date(timestamp);
 
-  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
+  const formattedFullTime = dateFormat(date, "dd mmmm yyyy, hh:MM TT");
   let formattedDate = formattedFullTime;
 
   if (!fullTime) {
@@ -16,17 +16,17 @@ function Time({ timestamp, fullTime }) {
     compareDate.setDate(compareDate.getDate() - 1);
     const isYesterday = isInSameDay(date, compareDate);
 
-    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
+    formattedDate = dateFormat(
+      date,
+      isToday || isYesterday ? "hh:MM TT" : "dd/mm/yyyy"
+    );
     if (isYesterday) {
       formattedDate = `Yesterday, ${formattedDate}`;
     }
   }
 
   return (
-    <time
-      dateTime={date.toISOString()}
-      title={formattedFullTime}
-    >
+    <time dateTime={date.toISOString()} title={formattedFullTime}>
       {formattedDate}
     </time>
   );
diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx
index 0f9067f5..588048b7 100644
--- a/src/app/atoms/tooltip/Tooltip.jsx
+++ b/src/app/atoms/tooltip/Tooltip.jsx
@@ -1,11 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Tooltip.scss';
-import Tippy from '@tippyjs/react';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Tooltip.scss";
+import Tippy from "@tippyjs/react";
 
-function Tooltip({
-  className, placement, content, delay, children,
-}) {
+function Tooltip({ className, placement, content, delay, children }) {
   return (
     <Tippy
       content={content}
@@ -23,8 +21,8 @@ function Tooltip({
 }
 
 Tooltip.defaultProps = {
-  placement: 'top',
-  className: '',
+  placement: "top",
+  className: "",
   delay: [200, 0],
 };
 
diff --git a/src/app/atoms/tooltip/Tooltip.scss b/src/app/atoms/tooltip/Tooltip.scss
index f609aa58..d926cdf3 100644
--- a/src/app/atoms/tooltip/Tooltip.scss
+++ b/src/app/atoms/tooltip/Tooltip.scss
@@ -7,4 +7,4 @@
   .text {
     color: var(--tc-tooltip);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/hooks/useAccountData.js b/src/app/hooks/useAccountData.js
index ed654d97..448bf280 100644
--- a/src/app/hooks/useAccountData.js
+++ b/src/app/hooks/useAccountData.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
+import initMatrix from "../../client/initMatrix";
 
 export function useAccountData(eventType) {
   const mx = initMatrix.matrixClient;
@@ -12,9 +12,9 @@ export function useAccountData(eventType) {
       if (mEvent.getType() !== eventType) return;
       setEvent(mEvent);
     };
-    mx.on('accountData', handleChange);
+    mx.on("accountData", handleChange);
     return () => {
-      mx.removeListener('accountData', handleChange);
+      mx.removeListener("accountData", handleChange);
     };
   }, [eventType]);
 
diff --git a/src/app/hooks/useCategorizedSpaces.js b/src/app/hooks/useCategorizedSpaces.js
index 6d3c02af..5ec57ceb 100644
--- a/src/app/hooks/useCategorizedSpaces.js
+++ b/src/app/hooks/useCategorizedSpaces.js
@@ -1,22 +1,27 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
-import cons from '../../client/state/cons';
+import initMatrix from "../../client/initMatrix";
+import cons from "../../client/state/cons";
 
 export function useCategorizedSpaces() {
   const { accountData } = initMatrix;
-  const [categorizedSpaces, setCategorizedSpaces] = useState([...accountData.categorizedSpaces]);
+  const [categorizedSpaces, setCategorizedSpaces] = useState([
+    ...accountData.categorizedSpaces,
+  ]);
 
   useEffect(() => {
     const handleCategorizedSpaces = () => {
       setCategorizedSpaces([...accountData.categorizedSpaces]);
     };
-    accountData.on(cons.events.accountData.CATEGORIZE_SPACE_UPDATED, handleCategorizedSpaces);
+    accountData.on(
+      cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
+      handleCategorizedSpaces
+    );
     return () => {
       accountData.removeListener(
         cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
-        handleCategorizedSpaces,
+        handleCategorizedSpaces
       );
     };
   }, []);
diff --git a/src/app/hooks/useCrossSigningStatus.js b/src/app/hooks/useCrossSigningStatus.js
index 61b69d1d..643a2a1e 100644
--- a/src/app/hooks/useCrossSigningStatus.js
+++ b/src/app/hooks/useCrossSigningStatus.js
@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
-import { hasCrossSigningAccountData } from '../../util/matrixUtil';
+import initMatrix from "../../client/initMatrix";
+import { hasCrossSigningAccountData } from "../../util/matrixUtil";
 
 export function useCrossSigningStatus() {
   const mx = initMatrix.matrixClient;
@@ -11,14 +11,14 @@ export function useCrossSigningStatus() {
   useEffect(() => {
     if (isCSEnabled) return null;
     const handleAccountData = (event) => {
-      if (event.getType() === 'm.cross_signing.master') {
+      if (event.getType() === "m.cross_signing.master") {
         setIsCSEnabled(true);
       }
     };
 
-    mx.on('accountData', handleAccountData);
+    mx.on("accountData", handleAccountData);
     return () => {
-      mx.removeListener('accountData', handleAccountData);
+      mx.removeListener("accountData", handleAccountData);
     };
   }, [isCSEnabled === false]);
   return isCSEnabled;
diff --git a/src/app/hooks/useDeviceList.js b/src/app/hooks/useDeviceList.js
index 2cce0fe5..c00f8fbc 100644
--- a/src/app/hooks/useDeviceList.js
+++ b/src/app/hooks/useDeviceList.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
+import initMatrix from "../../client/initMatrix";
 
 export function useDeviceList() {
   const mx = initMatrix.matrixClient;
@@ -10,10 +10,11 @@ export function useDeviceList() {
   useEffect(() => {
     let isMounted = true;
 
-    const updateDevices = () => mx.getDevices().then((data) => {
-      if (!isMounted) return;
-      setDeviceList(data.devices || []);
-    });
+    const updateDevices = () =>
+      mx.getDevices().then((data) => {
+        if (!isMounted) return;
+        setDeviceList(data.devices || []);
+      });
     updateDevices();
 
     const handleDevicesUpdate = (users) => {
@@ -22,9 +23,9 @@ export function useDeviceList() {
       }
     };
 
-    mx.on('crypto.devicesUpdated', handleDevicesUpdate);
+    mx.on("crypto.devicesUpdated", handleDevicesUpdate);
     return () => {
-      mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
+      mx.removeListener("crypto.devicesUpdated", handleDevicesUpdate);
       isMounted = false;
     };
   }, []);
diff --git a/src/app/hooks/useForceUpdate.js b/src/app/hooks/useForceUpdate.js
index bea9b3c7..a051ecf7 100644
--- a/src/app/hooks/useForceUpdate.js
+++ b/src/app/hooks/useForceUpdate.js
@@ -1,10 +1,13 @@
 /* eslint-disable import/prefer-default-export */
-import { useState } from 'react';
+import { useState } from "react";
 
 export function useForceUpdate() {
   const [data, setData] = useState(null);
 
-  return [data, function forceUpdateHook() {
-    setData({});
-  }];
+  return [
+    data,
+    function forceUpdateHook() {
+      setData({});
+    },
+  ];
 }
diff --git a/src/app/hooks/usePermission.js b/src/app/hooks/usePermission.js
index 5dc76078..4113699c 100644
--- a/src/app/hooks/usePermission.js
+++ b/src/app/hooks/usePermission.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 export function usePermission(name, initial) {
   const [state, setState] = useState(initial);
@@ -15,12 +15,12 @@ export function usePermission(name, initial) {
         descriptor = _descriptor;
 
         update();
-        descriptor.addEventListener('change', update);
+        descriptor.addEventListener("change", update);
       });
     }
 
     return () => {
-      if (descriptor) descriptor.removeEventListener('change', update);
+      if (descriptor) descriptor.removeEventListener("change", update);
     };
   }, []);
 
diff --git a/src/app/hooks/useSelectedSpace.js b/src/app/hooks/useSelectedSpace.js
index 535c5dcd..a43959fd 100644
--- a/src/app/hooks/useSelectedSpace.js
+++ b/src/app/hooks/useSelectedSpace.js
@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import cons from '../../client/state/cons';
-import navigation from '../../client/state/navigation';
+import cons from "../../client/state/cons";
+import navigation from "../../client/state/navigation";
 
 export function useSelectedSpace() {
   const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
@@ -13,7 +13,10 @@ export function useSelectedSpace() {
     };
     navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
     return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+      navigation.removeListener(
+        cons.events.navigation.SPACE_SELECTED,
+        onSpaceSelected
+      );
     };
   }, []);
 
diff --git a/src/app/hooks/useSelectedTab.js b/src/app/hooks/useSelectedTab.js
index 33b76a81..8dc4588d 100644
--- a/src/app/hooks/useSelectedTab.js
+++ b/src/app/hooks/useSelectedTab.js
@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import cons from '../../client/state/cons';
-import navigation from '../../client/state/navigation';
+import cons from "../../client/state/cons";
+import navigation from "../../client/state/navigation";
 
 export function useSelectedTab() {
   const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
@@ -13,7 +13,10 @@ export function useSelectedTab() {
     };
     navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
     return () => {
-      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
+      navigation.removeListener(
+        cons.events.navigation.TAB_SELECTED,
+        onTabSelected
+      );
     };
   }, []);
 
diff --git a/src/app/hooks/useSpaceShortcut.js b/src/app/hooks/useSpaceShortcut.js
index a1710c60..9fcc715e 100644
--- a/src/app/hooks/useSpaceShortcut.js
+++ b/src/app/hooks/useSpaceShortcut.js
@@ -1,22 +1,27 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
-import cons from '../../client/state/cons';
+import initMatrix from "../../client/initMatrix";
+import cons from "../../client/state/cons";
 
 export function useSpaceShortcut() {
   const { accountData } = initMatrix;
-  const [spaceShortcut, setSpaceShortcut] = useState([...accountData.spaceShortcut]);
+  const [spaceShortcut, setSpaceShortcut] = useState([
+    ...accountData.spaceShortcut,
+  ]);
 
   useEffect(() => {
     const onSpaceShortcutUpdated = () => {
       setSpaceShortcut([...accountData.spaceShortcut]);
     };
-    accountData.on(cons.events.accountData.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
+    accountData.on(
+      cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+      onSpaceShortcutUpdated
+    );
     return () => {
       accountData.removeListener(
         cons.events.accountData.SPACE_SHORTCUT_UPDATED,
-        onSpaceShortcutUpdated,
+        onSpaceShortcutUpdated
       );
     };
   }, []);
diff --git a/src/app/hooks/useStore.js b/src/app/hooks/useStore.js
index f216406b..396a30bc 100644
--- a/src/app/hooks/useStore.js
+++ b/src/app/hooks/useStore.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 export function useStore(...args) {
   const itemRef = useRef(null);
diff --git a/src/app/molecules/confirm-dialog/ConfirmDialog.jsx b/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
index 5771f2c1..47a5411e 100644
--- a/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
+++ b/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
@@ -1,20 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ConfirmDialog.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ConfirmDialog.scss";
 
-import { openReusableDialog } from '../../../client/action/navigation';
+import { openReusableDialog } from "../../../client/action/navigation";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
 
-function ConfirmDialog({
-  desc, actionTitle, actionType, onComplete,
-}) {
+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 variant={actionType} onClick={() => onComplete(true)}>
+          {actionTitle}
+        </Button>
         <Button onClick={() => onComplete(false)}>Cancel</Button>
       </div>
     </div>
@@ -23,7 +23,8 @@ function ConfirmDialog({
 ConfirmDialog.propTypes = {
   desc: PropTypes.string.isRequired,
   actionTitle: PropTypes.string.isRequired,
-  actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
+  actionType: PropTypes.oneOf(["primary", "positive", "danger", "caution"])
+    .isRequired,
   onComplete: PropTypes.func.isRequired,
 };
 
@@ -35,24 +36,32 @@ ConfirmDialog.propTypes = {
  * @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);
-    },
-  );
-});
+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);
+      }
+    );
+  });
diff --git a/src/app/molecules/confirm-dialog/ConfirmDialog.scss b/src/app/molecules/confirm-dialog/ConfirmDialog.scss
index 05f88be1..e86680fa 100644
--- a/src/app/molecules/confirm-dialog/ConfirmDialog.scss
+++ b/src/app/molecules/confirm-dialog/ConfirmDialog.scss
@@ -8,4 +8,4 @@
     display: flex;
     gap: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/dialog/Dialog.jsx b/src/app/molecules/dialog/Dialog.jsx
index 2f29971d..bef9181b 100644
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -1,22 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Dialog.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Dialog.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import Text from '../../atoms/text/Text';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import RawModal from '../../atoms/modal/RawModal';
+import Text from "../../atoms/text/Text";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import RawModal from "../../atoms/modal/RawModal";
 
 function Dialog({
-  className, isOpen, title, onAfterOpen, onAfterClose,
-  contentOptions, onRequestClose, closeFromOutside, children,
+  className,
+  isOpen,
+  title,
+  onAfterOpen,
+  onAfterClose,
+  contentOptions,
+  onRequestClose,
+  closeFromOutside,
+  children,
   invisibleScroll,
 }) {
   return (
     <RawModal
-      className={`${className === null ? '' : `${className} `}dialog-modal`}
+      className={`${className === null ? "" : `${className} `}dialog-modal`}
       isOpen={isOpen}
       onAfterOpen={onAfterOpen}
       onAfterClose={onAfterClose}
@@ -28,19 +35,19 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              {
-                typeof title === 'string'
-                  ? <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
-                  : title
-              }
+              {typeof title === "string" ? (
+                <Text variant="h2" weight="medium" primary>
+                  {twemojify(title)}
+                </Text>
+              ) : (
+                title
+              )}
             </TitleWrapper>
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
             <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
-              <div className="dialog__content-container">
-                {children}
-              </div>
+              <div className="dialog__content-container">{children}</div>
             </ScrollView>
           </div>
         </div>
diff --git a/src/app/molecules/dialog/ReusableDialog.jsx b/src/app/molecules/dialog/ReusableDialog.jsx
index 7340e119..d0a2b271 100644
--- a/src/app/molecules/dialog/ReusableDialog.jsx
+++ b/src/app/molecules/dialog/ReusableDialog.jsx
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
-import cons from '../../../client/state/cons';
+import cons from "../../../client/state/cons";
 
-import navigation from '../../../client/state/navigation';
-import IconButton from '../../atoms/button/IconButton';
-import Dialog from './Dialog';
+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';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function ReusableDialog() {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,7 +19,10 @@ function ReusableDialog() {
     };
     navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.REUSABLE_DIALOG_OPENED,
+        handleOpen
+      );
     };
   }, []);
 
@@ -35,10 +38,16 @@ function ReusableDialog() {
   return (
     <Dialog
       isOpen={isOpen}
-      title={data?.title || ''}
+      title={data?.title || ""}
       onAfterClose={handleAfterClose}
       onRequestClose={handleRequestClose}
-      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      contentOptions={
+        <IconButton
+          src={CrossIC}
+          onClick={handleRequestClose}
+          tooltip="Close"
+        />
+      }
       invisibleScroll
     >
       {data?.render(handleRequestClose) || <div />}
diff --git a/src/app/molecules/following-members/FollowingMembers.jsx b/src/app/molecules/following-members/FollowingMembers.jsx
index 65296535..8041c9a5 100644
--- a/src/app/molecules/following-members/FollowingMembers.jsx
+++ b/src/app/molecules/following-members/FollowingMembers.jsx
@@ -1,17 +1,17 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './FollowingMembers.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./FollowingMembers.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { openReadReceipts } from '../../../client/action/navigation';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { openReadReceipts } from "../../../client/action/navigation";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import TickMarkIC from "../../../../public/res/ic/outlined/tick-mark.svg";
 
-import { getUsersActionJsx } from '../../organisms/room/common';
+import { getUsersActionJsx } from "../../organisms/room/common";
 
 function FollowingMembers({ roomTimeline }) {
   const [followingMembers, setFollowingMembers] = useState([]);
@@ -27,28 +27,38 @@ function FollowingMembers({ roomTimeline }) {
       setFollowingMembers(roomTimeline.getLiveReaders());
     };
     updateFollowingMembers();
-    roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
+    roomTimeline.on(
+      cons.events.roomTimeline.LIVE_RECEIPT,
+      updateFollowingMembers
+    );
     roomsInput.on(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
     return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
-      roomsInput.removeListener(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
+      roomTimeline.removeListener(
+        cons.events.roomTimeline.LIVE_RECEIPT,
+        updateFollowingMembers
+      );
+      roomsInput.removeListener(
+        cons.events.roomsInput.MESSAGE_SENT,
+        handleOnMessageSent
+      );
     };
   }, [roomTimeline]);
 
   const filteredM = followingMembers.filter((userId) => userId !== myUserId);
 
-  return filteredM.length !== 0 && (
-    <button
-      className="following-members"
-      onClick={() => openReadReceipts(roomId, followingMembers)}
-      type="button"
-    >
-      <RawIcon
-        size="extra-small"
-        src={TickMarkIC}
-      />
-      <Text variant="b2">{getUsersActionJsx(roomId, filteredM, 'following the conversation.')}</Text>
-    </button>
+  return (
+    filteredM.length !== 0 && (
+      <button
+        className="following-members"
+        onClick={() => openReadReceipts(roomId, followingMembers)}
+        type="button"
+      >
+        <RawIcon size="extra-small" src={TickMarkIC} />
+        <Text variant="b2">
+          {getUsersActionJsx(roomId, filteredM, "following the conversation.")}
+        </Text>
+      </button>
+    )
   );
 }
 
diff --git a/src/app/molecules/following-members/FollowingMembers.scss b/src/app/molecules/following-members/FollowingMembers.scss
index a0daf5ad..4c62df4e 100644
--- a/src/app/molecules/following-members/FollowingMembers.scss
+++ b/src/app/molecules/following-members/FollowingMembers.scss
@@ -1,4 +1,4 @@
-@use '../../partials/text';
+@use "../../partials/text";
 
 .following-members {
   width: 100%;
@@ -7,7 +7,7 @@
   justify-content: flex-end;
   align-items: center;
   cursor: pointer;
-  
+
   & .ic-raw {
     min-width: var(--ic-extra-small);
     opacity: 0.4;
@@ -28,4 +28,4 @@
   &:active {
     background-color: var(--bg-surface-active);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/global-notification/GlobalNotification.jsx b/src/app/molecules/global-notification/GlobalNotification.jsx
index 865582ce..bb51af92 100644
--- a/src/app/molecules/global-notification/GlobalNotification.jsx
+++ b/src/app/molecules/global-notification/GlobalNotification.jsx
@@ -1,59 +1,61 @@
-import React from 'react';
+import React from "react";
 
-import initMatrix from '../../../client/initMatrix';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";
 
-import NotificationSelector from './NotificationSelector';
+import NotificationSelector from "./NotificationSelector";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
 
-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";
 
 export const notifType = {
-  ON: 'on',
-  OFF: 'off',
-  NOISY: 'noisy',
+  ON: "on",
+  OFF: "off",
+  NOISY: "noisy",
 };
 export const typeToLabel = {
-  [notifType.ON]: 'On',
-  [notifType.OFF]: 'Off',
-  [notifType.NOISY]: 'Noisy',
+  [notifType.ON]: "On",
+  [notifType.OFF]: "Off",
+  [notifType.NOISY]: "Noisy",
 };
 Object.freeze(notifType);
 
-const DM = '.m.rule.room_one_to_one';
-const ENC_DM = '.m.rule.encrypted_room_one_to_one';
-const ROOM = '.m.rule.message';
-const ENC_ROOM = '.m.rule.encrypted';
+const DM = ".m.rule.room_one_to_one";
+const ENC_DM = ".m.rule.encrypted_room_one_to_one";
+const ROOM = ".m.rule.message";
+const ENC_ROOM = ".m.rule.encrypted";
 
 export function getActionType(rule) {
   const { actions } = rule;
-  if (actions.find((action) => action?.set_tweak === 'sound')) return notifType.NOISY;
-  if (actions.find((action) => action?.set_tweak === 'highlight')) return notifType.ON;
-  if (actions.find((action) => action === 'dont_notify')) return notifType.OFF;
+  if (actions.find((action) => action?.set_tweak === "sound"))
+    return notifType.NOISY;
+  if (actions.find((action) => action?.set_tweak === "highlight"))
+    return notifType.ON;
+  if (actions.find((action) => action === "dont_notify")) return notifType.OFF;
   return notifType.OFF;
 }
 
 export function getTypeActions(type, highlightValue = false) {
-  if (type === notifType.OFF) return ['dont_notify'];
+  if (type === notifType.OFF) return ["dont_notify"];
 
-  const highlight = { set_tweak: 'highlight' };
-  if (typeof highlightValue === 'boolean') highlight.value = highlightValue;
-  if (type === notifType.ON) return ['notify', highlight];
+  const highlight = { set_tweak: "highlight" };
+  if (typeof highlightValue === "boolean") highlight.value = highlightValue;
+  if (type === notifType.ON) return ["notify", highlight];
 
-  const sound = { set_tweak: 'sound', value: 'default' };
-  return ['notify', sound, highlight];
+  const sound = { set_tweak: "sound", value: "default" };
+  return ["notify", sound, highlight];
 }
 
 function useGlobalNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData("m.push_rules")?.getContent();
   const underride = pushRules?.global?.underride ?? [];
   const rulesToType = {
     [DM]: notifType.ON,
@@ -65,12 +67,14 @@ function useGlobalNotif() {
   const getRuleCondition = (rule) => {
     const condition = [];
     if (rule === DM || rule === ENC_DM) {
-      condition.push({ kind: 'room_member_count', is: '2' });
+      condition.push({ kind: "room_member_count", is: "2" });
     }
     condition.push({
-      kind: 'event_match',
-      key: 'type',
-      pattern: [ENC_DM, ENC_ROOM].includes(rule) ? 'm.room.encrypted' : 'm.room.message',
+      kind: "event_match",
+      key: "type",
+      pattern: [ENC_DM, ENC_ROOM].includes(rule)
+        ? "m.room.encrypted"
+        : "m.room.message",
     });
     return condition;
   };
@@ -93,7 +97,7 @@ function useGlobalNotif() {
     }
     ruleContent.actions = getTypeActions(type);
 
-    mx.setAccountData('m.push_rules', content);
+    mx.setAccountData("m.push_rules", content);
   };
 
   const dmRule = underride.find((rule) => rule.rule_id === DM);
@@ -114,8 +118,8 @@ function GlobalNotification() {
 
   const onSelect = (evt, rule) => {
     openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
+      "bottom",
+      getEventCords(evt, ".btn-surface"),
       (requestClose) => (
         <NotificationSelector
           value={rulesToType[rule]}
@@ -124,7 +128,7 @@ function GlobalNotification() {
             requestClose();
           }}
         />
-      ),
+      )
     );
   };
 
@@ -133,39 +137,67 @@ function GlobalNotification() {
       <MenuHeader>Global Notifications</MenuHeader>
       <SettingTile
         title="Direct messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, DM)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[DM]] }
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, DM)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[DM]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all direct message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all direct message.
+          </Text>
+        }
       />
       <SettingTile
         title="Encrypted direct messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ENC_DM)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ENC_DM)}
+            iconSrc={ChevronBottomIC}
+          >
             {typeToLabel[rulesToType[ENC_DM]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all encrypted direct message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all encrypted direct message.
+          </Text>
+        }
       />
       <SettingTile
         title="Rooms messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ROOM)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ROOM)}
+            iconSrc={ChevronBottomIC}
+          >
             {typeToLabel[rulesToType[ROOM]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all room message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all room message.
+          </Text>
+        }
       />
       <SettingTile
         title="Encrypted rooms messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ENC_ROOM)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ENC_ROOM)}
+            iconSrc={ChevronBottomIC}
+          >
             {typeToLabel[rulesToType[ENC_ROOM]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all encrypted room message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all encrypted room message.
+          </Text>
+        }
       />
     </div>
   );
diff --git a/src/app/molecules/global-notification/IgnoreUserList.jsx b/src/app/molecules/global-notification/IgnoreUserList.jsx
index 87ee6272..0ea6f3b9 100644
--- a/src/app/molecules/global-notification/IgnoreUserList.jsx
+++ b/src/app/molecules/global-notification/IgnoreUserList.jsx
@@ -1,31 +1,31 @@
-import React from 'react';
-import './IgnoreUserList.scss';
+import React from "react";
+import "./IgnoreUserList.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import * as roomActions from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import * as roomActions from "../../../client/action/room";
 
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Chip from "../../atoms/chip/Chip";
+import Input from "../../atoms/input/Input";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";
 
 function IgnoreUserList() {
-  useAccountData('m.ignored_user_list');
+  useAccountData("m.ignored_user_list");
   const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();
 
   const handleSubmit = (evt) => {
     evt.preventDefault();
     const { ignoreInput } = evt.target.elements;
     const value = ignoreInput.value.trim();
-    const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
+    const userIds = value.split(" ").filter((v) => v.match(/^@\S+:\S+$/));
     if (userIds.length === 0) return;
-    ignoreInput.value = '';
+    ignoreInput.value = "";
     roomActions.ignore(userIds);
   };
 
@@ -34,12 +34,17 @@ function IgnoreUserList() {
       <MenuHeader>Ignored users</MenuHeader>
       <SettingTile
         title="Ignore user"
-        content={(
+        content={
           <div className="ignore-user-list__users">
-            <Text variant="b3">Ignore userId if you do not want to receive their messages or invites.</Text>
+            <Text variant="b3">
+              Ignore userId if you do not want to receive their messages or
+              invites.
+            </Text>
             <form onSubmit={handleSubmit}>
               <Input name="ignoreInput" required />
-              <Button variant="primary" type="submit">Ignore</Button>
+              <Button variant="primary" type="submit">
+                Ignore
+              </Button>
             </form>
             {ignoredUsers.length > 0 && (
               <div>
@@ -55,7 +60,7 @@ function IgnoreUserList() {
               </div>
             )}
           </div>
-        )}
+        }
       />
     </div>
   );
diff --git a/src/app/molecules/global-notification/IgnoreUserList.scss b/src/app/molecules/global-notification/IgnoreUserList.scss
index 92831558..05a746dc 100644
--- a/src/app/molecules/global-notification/IgnoreUserList.scss
+++ b/src/app/molecules/global-notification/IgnoreUserList.scss
@@ -14,4 +14,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/global-notification/KeywordNotification.jsx b/src/app/molecules/global-notification/KeywordNotification.jsx
index 8484d41d..25bf44e4 100644
--- a/src/app/molecules/global-notification/KeywordNotification.jsx
+++ b/src/app/molecules/global-notification/KeywordNotification.jsx
@@ -1,35 +1,38 @@
-import React from 'react';
-import './KeywordNotification.scss';
+import React from "react";
+import "./KeywordNotification.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Chip from "../../atoms/chip/Chip";
+import Input from "../../atoms/input/Input";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";
 
-import NotificationSelector from './NotificationSelector';
+import NotificationSelector from "./NotificationSelector";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";
 import {
-  notifType, typeToLabel, getActionType, getTypeActions,
-} from './GlobalNotification';
+  notifType,
+  typeToLabel,
+  getActionType,
+  getTypeActions,
+} from "./GlobalNotification";
 
-const DISPLAY_NAME = '.m.rule.contains_display_name';
-const ROOM_PING = '.m.rule.roomnotif';
-const USERNAME = '.m.rule.contains_user_name';
-const KEYWORD = 'keyword';
+const DISPLAY_NAME = ".m.rule.contains_display_name";
+const ROOM_PING = ".m.rule.roomnotif";
+const USERNAME = ".m.rule.contains_user_name";
+const KEYWORD = "keyword";
 
 function useKeywordNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData("m.push_rules")?.getContent();
   const override = pushRules?.global?.override ?? [];
   const content = pushRules?.global?.content ?? [];
 
@@ -60,12 +63,12 @@ function useKeywordNotif() {
         or.push(orRule);
       }
       if (rule === DISPLAY_NAME) {
-        orRule.conditions = [{ kind: 'contains_display_name' }];
+        orRule.conditions = [{ kind: "contains_display_name" }];
         orRule.actions = getTypeActions(type, true);
       } else {
         orRule.conditions = [
-          { kind: 'event_match', key: 'content.body', pattern: '@room' },
-          { kind: 'sender_notification_permission', key: 'room' },
+          { kind: "event_match", key: "content.body", pattern: "@room" },
+          { kind: "sender_notification_permission", key: "room" },
         ];
         orRule.actions = getTypeActions(type, true);
       }
@@ -92,7 +95,7 @@ function useKeywordNotif() {
       });
     }
 
-    mx.setAccountData('m.push_rules', evtContent);
+    mx.setAccountData("m.push_rules", evtContent);
   };
 
   const addKeyword = (keyword) => {
@@ -104,11 +107,13 @@ function useKeywordNotif() {
       default: false,
       actions: getTypeActions(rulesToType[KEYWORD] ?? notifType.NOISY, true),
     });
-    mx.setAccountData('m.push_rules', pushRules);
+    mx.setAccountData("m.push_rules", pushRules);
   };
   const removeKeyword = (rule) => {
-    pushRules.global.content = content.filter((r) => r.rule_id !== rule.rule_id);
-    mx.setAccountData('m.push_rules', pushRules);
+    pushRules.global.content = content.filter(
+      (r) => r.rule_id !== rule.rule_id
+    );
+    mx.setAccountData("m.push_rules", pushRules);
   };
 
   const dsRule = override.find((rule) => rule.rule_id === DISPLAY_NAME);
@@ -131,20 +136,16 @@ function useKeywordNotif() {
 }
 
 function GlobalNotification() {
-  const {
-    rulesToType,
-    pushRules,
-    setRule,
-    addKeyword,
-    removeKeyword,
-  } = useKeywordNotif();
+  const { rulesToType, pushRules, setRule, addKeyword, removeKeyword } =
+    useKeywordNotif();
 
-  const keywordRules = pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
+  const keywordRules =
+    pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
 
   const onSelect = (evt, rule) => {
     openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
+      "bottom",
+      getEventCords(evt, ".btn-surface"),
       (requestClose) => (
         <NotificationSelector
           value={rulesToType[rule]}
@@ -153,7 +154,7 @@ function GlobalNotification() {
             requestClose();
           }}
         />
-      ),
+      )
     );
   };
 
@@ -161,9 +162,9 @@ function GlobalNotification() {
     evt.preventDefault();
     const { keywordInput } = evt.target.elements;
     const value = keywordInput.value.trim();
-    if (value === '') return;
+    if (value === "") return;
     addKeyword(value);
-    keywordInput.value = '';
+    keywordInput.value = "";
   };
 
   return (
@@ -171,50 +172,84 @@ function GlobalNotification() {
       <MenuHeader>Mentions & keywords</MenuHeader>
       <SettingTile
         title="Message containing my display name"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, DISPLAY_NAME)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[DISPLAY_NAME]] }
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, DISPLAY_NAME)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[DISPLAY_NAME]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all message containing your display name.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all message containing your
+            display name.
+          </Text>
+        }
       />
       <SettingTile
         title="Message containing my username"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, USERNAME)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[USERNAME]] }
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, USERNAME)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[USERNAME]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all message containing your username.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all message containing your
+            username.
+          </Text>
+        }
       />
       <SettingTile
         title="Message containing @room"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ROOM_PING)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ROOM_PING)}
+            iconSrc={ChevronBottomIC}
+          >
             {typeToLabel[rulesToType[ROOM_PING]]}
           </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all messages containing @room.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all messages containing @room.
+          </Text>
+        }
       />
-      { rulesToType[KEYWORD] && (
+      {rulesToType[KEYWORD] && (
         <SettingTile
           title="Message containing keywords"
-          options={(
-            <Button onClick={(evt) => onSelect(evt, KEYWORD)} iconSrc={ChevronBottomIC}>
+          options={
+            <Button
+              onClick={(evt) => onSelect(evt, KEYWORD)}
+              iconSrc={ChevronBottomIC}
+            >
               {typeToLabel[rulesToType[KEYWORD]]}
             </Button>
-          )}
-          content={<Text variant="b3">Default notification settings for all message containing keywords.</Text>}
+          }
+          content={
+            <Text variant="b3">
+              Default notification settings for all message containing keywords.
+            </Text>
+          }
         />
       )}
       <SettingTile
         title="Keywords"
-        content={(
+        content={
           <div className="keyword-notification__keyword">
-            <Text variant="b3">Get notification when a message contains keyword.</Text>
+            <Text variant="b3">
+              Get notification when a message contains keyword.
+            </Text>
             <form onSubmit={handleSubmit}>
               <Input name="keywordInput" required />
-              <Button variant="primary" type="submit">Add</Button>
+              <Button variant="primary" type="submit">
+                Add
+              </Button>
             </form>
             {keywordRules.length > 0 && (
               <div>
@@ -230,7 +265,7 @@ function GlobalNotification() {
               </div>
             )}
           </div>
-        )}
+        }
       />
     </div>
   );
diff --git a/src/app/molecules/global-notification/KeywordNotification.scss b/src/app/molecules/global-notification/KeywordNotification.scss
index 4d1bfd48..1d3ff997 100644
--- a/src/app/molecules/global-notification/KeywordNotification.scss
+++ b/src/app/molecules/global-notification/KeywordNotification.scss
@@ -14,4 +14,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/global-notification/NotificationSelector.jsx b/src/app/molecules/global-notification/NotificationSelector.jsx
index b2a8f4ec..e99daad3 100644
--- a/src/app/molecules/global-notification/NotificationSelector.jsx
+++ b/src/app/molecules/global-notification/NotificationSelector.jsx
@@ -1,25 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
 
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+import CheckIC from "../../../../public/res/ic/outlined/check.svg";
 
-function NotificationSelector({
-  value, onSelect,
-}) {
+function NotificationSelector({ value, onSelect }) {
   return (
     <div>
       <MenuHeader>Notification</MenuHeader>
-      <MenuItem iconSrc={value === 'off' ? CheckIC : null} variant={value === 'off' ? 'positive' : 'surface'} onClick={() => onSelect('off')}>Off</MenuItem>
-      <MenuItem iconSrc={value === 'on' ? CheckIC : null} variant={value === 'on' ? 'positive' : 'surface'} onClick={() => onSelect('on')}>On</MenuItem>
-      <MenuItem iconSrc={value === 'noisy' ? CheckIC : null} variant={value === 'noisy' ? 'positive' : 'surface'} onClick={() => onSelect('noisy')}>Noisy</MenuItem>
+      <MenuItem
+        iconSrc={value === "off" ? CheckIC : null}
+        variant={value === "off" ? "positive" : "surface"}
+        onClick={() => onSelect("off")}
+      >
+        Off
+      </MenuItem>
+      <MenuItem
+        iconSrc={value === "on" ? CheckIC : null}
+        variant={value === "on" ? "positive" : "surface"}
+        onClick={() => onSelect("on")}
+      >
+        On
+      </MenuItem>
+      <MenuItem
+        iconSrc={value === "noisy" ? CheckIC : null}
+        variant={value === "noisy" ? "positive" : "surface"}
+        onClick={() => onSelect("noisy")}
+      >
+        Noisy
+      </MenuItem>
     </div>
   );
 }
 
 NotificationSelector.propTypes = {
-  value: PropTypes.oneOf(['off', 'on', 'noisy']).isRequired,
+  value: PropTypes.oneOf(["off", "on", "noisy"]).isRequired,
   onSelect: PropTypes.func.isRequired,
 };
 
diff --git a/src/app/molecules/image-lightbox/ImageLightbox.jsx b/src/app/molecules/image-lightbox/ImageLightbox.jsx
index c1c45db8..83d151b2 100644
--- a/src/app/molecules/image-lightbox/ImageLightbox.jsx
+++ b/src/app/molecules/image-lightbox/ImageLightbox.jsx
@@ -1,18 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImageLightbox.scss';
-import FileSaver from 'file-saver';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ImageLightbox.scss";
+import FileSaver from "file-saver";
 
-import Text from '../../atoms/text/Text';
-import RawModal from '../../atoms/modal/RawModal';
-import IconButton from '../../atoms/button/IconButton';
+import Text from "../../atoms/text/Text";
+import RawModal from "../../atoms/modal/RawModal";
+import IconButton from "../../atoms/button/IconButton";
 
-import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
-import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+import DownloadSVG from "../../../../public/res/ic/outlined/download.svg";
+import ExternalSVG from "../../../../public/res/ic/outlined/external.svg";
 
-function ImageLightbox({
-  url, alt, isOpen, onRequestClose,
-}) {
+function ImageLightbox({ url, alt, isOpen, onRequestClose }) {
   const handleDownload = () => {
     FileSaver.saveAs(url, alt);
   };
@@ -26,8 +24,14 @@ function ImageLightbox({
       size="large"
     >
       <div className="image-lightbox__header">
-        <Text variant="b2" weight="medium">{alt}</Text>
-        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+        <Text variant="b2" weight="medium">
+          {alt}
+        </Text>
+        <IconButton
+          onClick={() => window.open(url)}
+          size="small"
+          src={ExternalSVG}
+        />
         <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
       </div>
       <div className="image-lightbox__content">
diff --git a/src/app/molecules/image-lightbox/ImageLightbox.scss b/src/app/molecules/image-lightbox/ImageLightbox.scss
index 201fc91c..ca5a7d8f 100644
--- a/src/app/molecules/image-lightbox/ImageLightbox.scss
+++ b/src/app/molecules/image-lightbox/ImageLightbox.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/text";
 
 .image-lightbox__modal {
   box-shadow: none;
@@ -21,7 +21,6 @@
   background-color: var(--bg-overlay-low);
 }
 
-
 .image-lightbox__header > *,
 .image-lightbox__content > * {
   pointer-events: all;
@@ -47,4 +46,4 @@
     max-height: 100%;
     border-radius: var(--bo-radius);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/image-pack/ImagePack.jsx b/src/app/molecules/image-pack/ImagePack.jsx
index f88886c1..7680f7a1 100644
--- a/src/app/molecules/image-pack/ImagePack.jsx
+++ b/src/app/molecules/image-pack/ImagePack.jsx
@@ -1,75 +1,80 @@
-import React, {
-  useState, useMemo, useReducer, useEffect,
-} from 'react';
-import PropTypes from 'prop-types';
-import './ImagePack.scss';
+import React, { useState, useMemo, useReducer, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./ImagePack.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { openReusableDialog } from '../../../client/action/navigation';
-import { suffixRename } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { openReusableDialog } from "../../../client/action/navigation";
+import { suffixRename } from "../../../util/common";
 
-import Button from '../../atoms/button/Button';
-import Text from '../../atoms/text/Text';
-import Input from '../../atoms/input/Input';
-import Checkbox from '../../atoms/button/Checkbox';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import Button from "../../atoms/button/Button";
+import Text from "../../atoms/text/Text";
+import Input from "../../atoms/input/Input";
+import Checkbox from "../../atoms/button/Checkbox";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
 
-import { ImagePack as ImagePackBuilder } from '../../organisms/emoji-board/custom-emoji';
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
-import ImagePackProfile from './ImagePackProfile';
-import ImagePackItem from './ImagePackItem';
-import ImagePackUpload from './ImagePackUpload';
+import { ImagePack as ImagePackBuilder } from "../../organisms/emoji-board/custom-emoji";
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
+import ImagePackProfile from "./ImagePackProfile";
+import ImagePackItem from "./ImagePackItem";
+import ImagePackUpload from "./ImagePackUpload";
 
-const renameImagePackItem = (shortcode) => new Promise((resolve) => {
-  let isCompleted = false;
+const renameImagePackItem = (shortcode) =>
+  new Promise((resolve) => {
+    let isCompleted = false;
 
-  openReusableDialog(
-    <Text variant="s1" weight="medium">Rename</Text>,
-    (requestClose) => (
-      <div style={{ padding: 'var(--sp-normal)' }}>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            const sc = e.target.shortcode.value;
-            if (sc.trim() === '') return;
-            isCompleted = true;
-            resolve(sc.trim());
-            requestClose();
-          }}
-        >
-          <Input
-            value={shortcode}
-            name="shortcode"
-            label="Shortcode"
-            autoFocus
-            required
-          />
-          <div style={{ height: 'var(--sp-normal)' }} />
-          <Button variant="primary" type="submit">Rename</Button>
-        </form>
-      </div>
-    ),
-    () => {
-      if (!isCompleted) resolve(null);
-    },
-  );
-});
+    openReusableDialog(
+      <Text variant="s1" weight="medium">
+        Rename
+      </Text>,
+      (requestClose) => (
+        <div style={{ padding: "var(--sp-normal)" }}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const sc = e.target.shortcode.value;
+              if (sc.trim() === "") return;
+              isCompleted = true;
+              resolve(sc.trim());
+              requestClose();
+            }}
+          >
+            <Input
+              value={shortcode}
+              name="shortcode"
+              label="Shortcode"
+              autoFocus
+              required
+            />
+            <div style={{ height: "var(--sp-normal)" }} />
+            <Button variant="primary" type="submit">
+              Rename
+            </Button>
+          </form>
+        </div>
+      ),
+      () => {
+        if (!isCompleted) resolve(null);
+      }
+    );
+  });
 
 function getUsage(usage) {
-  if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
-  if (usage.includes('emoticon')) return 'emoticon';
-  if (usage.includes('sticker')) return 'sticker';
+  if (usage.includes("emoticon") && usage.includes("sticker")) return "both";
+  if (usage.includes("emoticon")) return "emoticon";
+  if (usage.includes("sticker")) return "sticker";
 
-  return 'both';
+  return "both";
 }
 
 function isGlobalPack(roomId, stateKey) {
   const mx = initMatrix.matrixClient;
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
-  if (typeof globalContent !== 'object') return false;
+  const globalContent = mx
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent();
+  if (typeof globalContent !== "object") return false;
 
   const { rooms } = globalContent;
-  if (typeof rooms !== 'object') return false;
+  if (typeof rooms !== "object") return false;
 
   return rooms[roomId]?.[stateKey] !== undefined;
 }
@@ -78,13 +83,17 @@ function useRoomImagePack(roomId, stateKey) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
 
-  const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-  const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
-  ), [room, stateKey]);
+  const packEvent = room.currentState.getStateEvents(
+    "im.ponies.room_emotes",
+    stateKey
+  );
+  const pack = useMemo(
+    () => ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent()),
+    [room, stateKey]
+  );
 
   const sendPackContent = (content) => {
-    mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
+    mx.sendStateEvent(roomId, "im.ponies.room_emotes", content, stateKey);
   };
 
   return {
@@ -95,16 +104,21 @@ function useRoomImagePack(roomId, stateKey) {
 
 function useUserImagePack() {
   const mx = initMatrix.matrixClient;
-  const packEvent = mx.getAccountData('im.ponies.user_emotes');
-  const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
-      pack: { display_name: 'Personal' },
-      images: {},
-    })
-  ), []);
+  const packEvent = mx.getAccountData("im.ponies.user_emotes");
+  const pack = useMemo(
+    () =>
+      ImagePackBuilder.parsePack(
+        mx.getUserId(),
+        packEvent?.getContent() ?? {
+          pack: { display_name: "Personal" },
+          images: {},
+        }
+      ),
+    []
+  );
 
   const sendPackContent = (content) => {
-    mx.setAccountData('im.ponies.user_emotes', content);
+    mx.setAccountData("im.ponies.user_emotes", content);
   };
 
   return {
@@ -117,12 +131,11 @@ function useImagePackHandles(pack, sendPackContent) {
   const [, forceUpdate] = useReducer((count) => count + 1, 0);
 
   const getNewKey = (key) => {
-    if (typeof key !== 'string') return undefined;
-    let newKey = key?.replace(/\s/g, '_');
+    if (typeof key !== "string") return undefined;
+    let newKey = key?.replace(/\s/g, "_");
     if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(
-        newKey,
-        (suffixedKey) => pack.getImages().get(suffixedKey),
+      newKey = suffixRename(newKey, (suffixedKey) =>
+        pack.getImages().get(suffixedKey)
       );
     }
     return newKey;
@@ -141,10 +154,12 @@ function useImagePackHandles(pack, sendPackContent) {
   };
   const handleUsageChange = (newUsage) => {
     const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    if (newUsage === "emoticon" || newUsage === "both") usage.push("emoticon");
+    if (newUsage === "sticker" || newUsage === "both") usage.push("sticker");
     pack.setUsage(usage);
-    pack.getImages().forEach((img) => pack.setImageUsage(img.shortcode, undefined));
+    pack
+      .getImages()
+      .forEach((img) => pack.setImageUsage(img.shortcode, undefined));
 
     sendPackContent(pack.getContent());
     forceUpdate();
@@ -161,10 +176,10 @@ function useImagePackHandles(pack, sendPackContent) {
   };
   const handleDeleteItem = async (key) => {
     const isConfirmed = await confirmDialog(
-      'Delete',
+      "Delete",
       `Are you sure that you want to delete "${key}"?`,
-      'Delete',
-      'danger',
+      "Delete",
+      "danger"
     );
     if (!isConfirmed) return;
     pack.removeImage(key);
@@ -174,8 +189,8 @@ function useImagePackHandles(pack, sendPackContent) {
   };
   const handleUsageItem = (key, newUsage) => {
     const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    if (newUsage === "emoticon" || newUsage === "both") usage.push("emoticon");
+    if (newUsage === "sticker" || newUsage === "both") usage.push("sticker");
     pack.setImageUsage(key, usage);
 
     sendPackContent(pack.getContent());
@@ -205,21 +220,23 @@ function useImagePackHandles(pack, sendPackContent) {
 }
 
 function addGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  const content =
+    mx.getAccountData("im.ponies.emote_rooms")?.getContent() ?? {};
   if (!content.rooms) content.rooms = {};
   if (!content.rooms[roomId]) content.rooms[roomId] = {};
   content.rooms[roomId][stateKey] = {};
-  return mx.setAccountData('im.ponies.emote_rooms', content);
+  return mx.setAccountData("im.ponies.emote_rooms", content);
 }
 function removeGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  const content =
+    mx.getAccountData("im.ponies.emote_rooms")?.getContent() ?? {};
   if (!content.rooms) return Promise.resolve();
   if (!content.rooms[roomId]) return Promise.resolve();
   delete content.rooms[roomId][stateKey];
   if (Object.keys(content.rooms[roomId]).length === 0) {
     delete content.rooms[roomId];
   }
-  return mx.setAccountData('im.ponies.emote_rooms', content);
+  return mx.setAccountData("im.ponies.emote_rooms", content);
 }
 
 function ImagePack({ roomId, stateKey, handlePackDelete }) {
@@ -247,14 +264,17 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   };
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room.currentState.hasSufficientPowerLevelFor(
+    "state_default",
+    myPowerlevel
+  );
 
   const handleDeletePack = async () => {
     const isConfirmed = await confirmDialog(
-      'Delete Pack',
+      "Delete Pack",
       `Are you sure that you want to delete "${pack.displayName}"?`,
-      'Delete',
-      'danger',
+      "Delete",
+      "danger"
     );
     if (!isConfirmed) return;
     handlePackDelete(stateKey);
@@ -265,18 +285,20 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
-        displayName={pack.displayName ?? 'Unknown'}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, "crop")
+            : null
+        }
+        displayName={pack.displayName ?? "Unknown"}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
         onUsageChange={canChange ? handleUsageChange : null}
         onAvatarChange={canChange ? handleAvatarChange : null}
         onEditProfile={canChange ? handleEditProfile : null}
       />
-      { canChange && (
-        <ImagePackUpload onUpload={handleAddItem} />
-      )}
-      { images.length === 0 ? null : (
+      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
+      {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -300,21 +322,27 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         <div className="image-pack__footer">
           {pack.images.size > 2 && (
             <Button onClick={() => setViewMore(!viewMore)}>
-              {
-                viewMore
-                  ? 'View less'
-                  : `View ${pack.images.size - 2} more`
-              }
+              {viewMore ? "View less" : `View ${pack.images.size - 2} more`}
+            </Button>
+          )}
+          {handlePackDelete && (
+            <Button variant="danger" onClick={handleDeletePack}>
+              Delete Pack
             </Button>
           )}
-          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
         </div>
       )}
       <div className="image-pack__global">
-        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
+        <Checkbox
+          variant="positive"
+          onToggle={handleGlobalChange}
+          isActive={isGlobal}
+        />
         <div>
           <Text variant="b2">Use globally</Text>
-          <Text variant="b3">Add this pack to your account to use in all rooms.</Text>
+          <Text variant="b3">
+            Add this pack to your account to use in all rooms.
+          </Text>
         </div>
       </div>
     </div>
@@ -351,8 +379,12 @@ function ImagePackUser() {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
-        displayName={pack.displayName ?? 'Personal'}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, "crop")
+            : null
+        }
+        displayName={pack.displayName ?? "Personal"}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
         onUsageChange={handleUsageChange}
@@ -360,7 +392,7 @@ function ImagePackUser() {
         onEditProfile={handleEditProfile}
       />
       <ImagePackUpload onUpload={handleAddItem} />
-      { images.length === 0 ? null : (
+      {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -380,14 +412,10 @@ function ImagePackUser() {
           ))}
         </div>
       )}
-      {(pack.images.size > 2) && (
+      {pack.images.size > 2 && (
         <div className="image-pack__footer">
           <Button onClick={() => setViewMore(!viewMore)}>
-            {
-              viewMore
-                ? 'View less'
-                : `View ${pack.images.size - 2} more`
-            }
+            {viewMore ? "View less" : `View ${pack.images.size - 2} more`}
           </Button>
         </div>
       )}
@@ -400,11 +428,13 @@ function useGlobalImagePack() {
   const mx = initMatrix.matrixClient;
 
   const roomIdToStateKeys = new Map();
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
+  const globalContent = mx
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent() ?? { rooms: {} };
   const { rooms } = globalContent;
 
   Object.keys(rooms).forEach((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return;
+    if (typeof rooms[roomId] !== "object") return;
     const room = mx.getRoom(roomId);
     const stateKeys = Object.keys(rooms[roomId]);
     if (!room || stateKeys.length === 0) return;
@@ -413,11 +443,11 @@ function useGlobalImagePack() {
 
   useEffect(() => {
     const handleEvent = (event) => {
-      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
+      if (event.getType() === "im.ponies.emote_rooms") forceUpdate();
     };
-    mx.addListener('accountData', handleEvent);
+    mx.addListener("accountData", handleEvent);
     return () => {
-      mx.removeListener('accountData', handleEvent);
+      mx.removeListener("accountData", handleEvent);
     };
   }, []);
 
@@ -436,29 +466,39 @@ function ImagePackGlobal() {
     <div className="image-pack-global">
       <MenuHeader>Global packs</MenuHeader>
       <div>
-        {
-          roomIdToStateKeys.size > 0
-            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
-              const room = mx.getRoom(roomId);
-              return (
-                stateKeys.map((stateKey) => {
-                  const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-                  const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
-                  if (!pack) return null;
-                  return (
-                    <div className="image-pack__global" key={pack.id}>
-                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
-                      <div>
-                        <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
-                        <Text variant="b3">{room.name}</Text>
-                      </div>
-                    </div>
-                  );
-                })
+        {roomIdToStateKeys.size > 0 ? (
+          [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
+            const room = mx.getRoom(roomId);
+            return stateKeys.map((stateKey) => {
+              const data = room.currentState.getStateEvents(
+                "im.ponies.room_emotes",
+                stateKey
               );
-            })
-            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
-        }
+              const pack = ImagePackBuilder.parsePack(
+                data?.getId(),
+                data?.getContent()
+              );
+              if (!pack) return null;
+              return (
+                <div className="image-pack__global" key={pack.id}>
+                  <Checkbox
+                    variant="positive"
+                    onToggle={() => handleChange(roomId, stateKey)}
+                    isActive
+                  />
+                  <div>
+                    <Text variant="b2">{pack.displayName ?? "Unknown"}</Text>
+                    <Text variant="b3">{room.name}</Text>
+                  </div>
+                </div>
+              );
+            });
+          })
+        ) : (
+          <div className="image-pack-global__empty">
+            <Text>No global packs</Text>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/app/molecules/image-pack/ImagePack.scss b/src/app/molecules/image-pack/ImagePack.scss
index 91d6a185..f867ce75 100644
--- a/src/app/molecules/image-pack/ImagePack.scss
+++ b/src/app/molecules/image-pack/ImagePack.scss
@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .image-pack {
   &-item {
diff --git a/src/app/molecules/image-pack/ImagePackItem.jsx b/src/app/molecules/image-pack/ImagePackItem.jsx
index 27436793..270608b6 100644
--- a/src/app/molecules/image-pack/ImagePackItem.jsx
+++ b/src/app/molecules/image-pack/ImagePackItem.jsx
@@ -1,28 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackItem.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ImagePackItem.scss";
 
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import Avatar from '../../atoms/avatar/Avatar';
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import ImagePackUsageSelector from './ImagePackUsageSelector';
+import Avatar from "../../atoms/avatar/Avatar";
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import ImagePackUsageSelector from "./ImagePackUsageSelector";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-import BinIC from '../../../../public/res/ic/outlined/bin.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import PencilIC from "../../../../public/res/ic/outlined/pencil.svg";
+import BinIC from "../../../../public/res/ic/outlined/bin.svg";
 
 function ImagePackItem({
-  url, shortcode, usage, onUsageChange, onDelete, onRename,
+  url,
+  shortcode,
+  usage,
+  onUsageChange,
+  onDelete,
+  onRename,
 }) {
   const handleUsageSelect = (event) => {
     openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
+      "bottom",
+      getEventCords(event, ".btn-surface"),
       (closeMenu) => (
         <ImagePackUsageSelector
           usage={usage}
@@ -31,27 +36,48 @@ function ImagePackItem({
             closeMenu();
           }}
         />
-      ),
+      )
     );
   };
 
   return (
     <div className="image-pack-item">
-      <Avatar imageSrc={url} size="extra-small" text={shortcode} bgColor="black" />
+      <Avatar
+        imageSrc={url}
+        size="extra-small"
+        text={shortcode}
+        bgColor="black"
+      />
       <div className="image-pack-item__content">
         <Text>{shortcode}</Text>
       </div>
       <div className="image-pack-item__usage">
         <div className="image-pack-item__btn">
-          {onRename && <IconButton tooltip="Rename" size="extra-small" src={PencilIC} onClick={() => onRename(shortcode)} />}
-          {onDelete && <IconButton tooltip="Delete" size="extra-small" src={BinIC} onClick={() => onDelete(shortcode)} />}
+          {onRename && (
+            <IconButton
+              tooltip="Rename"
+              size="extra-small"
+              src={PencilIC}
+              onClick={() => onRename(shortcode)}
+            />
+          )}
+          {onDelete && (
+            <IconButton
+              tooltip="Delete"
+              size="extra-small"
+              src={BinIC}
+              onClick={() => onDelete(shortcode)}
+            />
+          )}
         </div>
         <Button onClick={onUsageChange ? handleUsageSelect : undefined}>
-          {onUsageChange && <RawIcon src={ChevronBottomIC} size="extra-small" />}
+          {onUsageChange && (
+            <RawIcon src={ChevronBottomIC} size="extra-small" />
+          )}
           <Text variant="b2">
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
+            {usage === "emoticon" && "Emoji"}
+            {usage === "sticker" && "Sticker"}
+            {usage === "both" && "Both"}
           </Text>
         </Button>
       </div>
@@ -67,7 +93,7 @@ ImagePackItem.defaultProps = {
 ImagePackItem.propTypes = {
   url: PropTypes.string.isRequired,
   shortcode: PropTypes.string.isRequired,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
   onUsageChange: PropTypes.func,
   onDelete: PropTypes.func,
   onRename: PropTypes.func,
diff --git a/src/app/molecules/image-pack/ImagePackItem.scss b/src/app/molecules/image-pack/ImagePackItem.scss
index ab1be3a7..fdf8cfc7 100644
--- a/src/app/molecules/image-pack/ImagePackItem.scss
+++ b/src/app/molecules/image-pack/ImagePackItem.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .image-pack-item {
   margin: 0 var(--sp-normal);
@@ -40,4 +40,4 @@
       gap: var(--sp-ultra-tight);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/image-pack/ImagePackProfile.jsx b/src/app/molecules/image-pack/ImagePackProfile.jsx
index b639936d..663292ab 100644
--- a/src/app/molecules/image-pack/ImagePackProfile.jsx
+++ b/src/app/molecules/image-pack/ImagePackProfile.jsx
@@ -1,24 +1,29 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackProfile.scss';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./ImagePackProfile.scss";
 
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Input from '../../atoms/input/Input';
-import ImageUpload from '../image-upload/ImageUpload';
-import ImagePackUsageSelector from './ImagePackUsageSelector';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
+import Button from "../../atoms/button/Button";
+import IconButton from "../../atoms/button/IconButton";
+import Input from "../../atoms/input/Input";
+import ImageUpload from "../image-upload/ImageUpload";
+import ImagePackUsageSelector from "./ImagePackUsageSelector";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import PencilIC from "../../../../public/res/ic/outlined/pencil.svg";
 
 function ImagePackProfile({
-  avatarUrl, displayName, attribution, usage,
-  onUsageChange, onAvatarChange, onEditProfile,
+  avatarUrl,
+  displayName,
+  attribution,
+  usage,
+  onUsageChange,
+  onAvatarChange,
+  onEditProfile,
 }) {
   const [isEdit, setIsEdit] = useState(false);
 
@@ -35,8 +40,8 @@ function ImagePackProfile({
 
   const handleUsageSelect = (event) => {
     openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
+      "bottom",
+      getEventCords(event, ".btn-surface"),
       (closeMenu) => (
         <ImagePackUsageSelector
           usage={usage}
@@ -45,48 +50,62 @@ function ImagePackProfile({
             closeMenu();
           }}
         />
-      ),
+      )
     );
   };
 
   return (
     <div className="image-pack-profile">
-      {
-        onAvatarChange
-          ? (
-            <ImageUpload
-              bgColor="#555"
-              text={displayName}
-              imageSrc={avatarUrl}
-              size="normal"
-              onUpload={onAvatarChange}
-              onRequestRemove={() => onAvatarChange(undefined)}
-            />
-          )
-          : <Avatar bgColor="#555" text={displayName} imageSrc={avatarUrl} size="normal" />
-      }
+      {onAvatarChange ? (
+        <ImageUpload
+          bgColor="#555"
+          text={displayName}
+          imageSrc={avatarUrl}
+          size="normal"
+          onUpload={onAvatarChange}
+          onRequestRemove={() => onAvatarChange(undefined)}
+        />
+      ) : (
+        <Avatar
+          bgColor="#555"
+          text={displayName}
+          imageSrc={avatarUrl}
+          size="normal"
+        />
+      )}
       <div className="image-pack-profile__content">
-        {
-          isEdit
-            ? (
-              <form onSubmit={handleSubmit}>
-                <Input name="nameInput" label="Name" value={displayName} required />
-                <Input name="attributionInput" label="Attribution" value={attribution} resizable />
-                <div>
-                  <Button variant="primary" type="submit">Save</Button>
-                  <Button onClick={() => setIsEdit(false)}>Cancel</Button>
-                </div>
-              </form>
-            ) : (
-              <>
-                <div>
-                  <Text>{displayName}</Text>
-                  {onEditProfile && <IconButton size="extra-small" onClick={() => setIsEdit(true)} src={PencilIC} tooltip="Edit" />}
-                </div>
-                {attribution && <Text variant="b3">{attribution}</Text>}
-              </>
-            )
-        }
+        {isEdit ? (
+          <form onSubmit={handleSubmit}>
+            <Input name="nameInput" label="Name" value={displayName} required />
+            <Input
+              name="attributionInput"
+              label="Attribution"
+              value={attribution}
+              resizable
+            />
+            <div>
+              <Button variant="primary" type="submit">
+                Save
+              </Button>
+              <Button onClick={() => setIsEdit(false)}>Cancel</Button>
+            </div>
+          </form>
+        ) : (
+          <>
+            <div>
+              <Text>{displayName}</Text>
+              {onEditProfile && (
+                <IconButton
+                  size="extra-small"
+                  onClick={() => setIsEdit(true)}
+                  src={PencilIC}
+                  tooltip="Edit"
+                />
+              )}
+            </div>
+            {attribution && <Text variant="b3">{attribution}</Text>}
+          </>
+        )}
       </div>
       <div className="image-pack-profile__usage">
         <Text variant="b3">Pack usage</Text>
@@ -95,9 +114,9 @@ function ImagePackProfile({
           iconSrc={onUsageChange ? ChevronBottomIC : null}
         >
           <Text>
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
+            {usage === "emoticon" && "Emoji"}
+            {usage === "sticker" && "Sticker"}
+            {usage === "both" && "Both"}
           </Text>
         </Button>
       </div>
@@ -116,7 +135,7 @@ ImagePackProfile.propTypes = {
   avatarUrl: PropTypes.string,
   displayName: PropTypes.string.isRequired,
   attribution: PropTypes.string,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
   onUsageChange: PropTypes.func,
   onAvatarChange: PropTypes.func,
   onEditProfile: PropTypes.func,
diff --git a/src/app/molecules/image-pack/ImagePackProfile.scss b/src/app/molecules/image-pack/ImagePackProfile.scss
index d21212fb..9da2b8c4 100644
--- a/src/app/molecules/image-pack/ImagePackProfile.scss
+++ b/src/app/molecules/image-pack/ImagePackProfile.scss
@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .image-pack-profile {
   padding: var(--sp-normal);
@@ -34,4 +34,4 @@
       margin-bottom: var(--sp-ultra-tight);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/image-pack/ImagePackUpload.jsx b/src/app/molecules/image-pack/ImagePackUpload.jsx
index 6295de1c..0a31916c 100644
--- a/src/app/molecules/image-pack/ImagePackUpload.jsx
+++ b/src/app/molecules/image-pack/ImagePackUpload.jsx
@@ -1,15 +1,15 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackUpload.scss';
+import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
+import "./ImagePackUpload.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { scaleDownImage } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { scaleDownImage } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import IconButton from '../../atoms/button/IconButton';
-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import IconButton from "../../atoms/button/IconButton";
+import CirclePlusIC from "../../../../public/res/ic/outlined/circle-plus.svg";
 
 function ImagePackUpload({ onUpload }) {
   const mx = initMatrix.matrixClient;
@@ -23,7 +23,7 @@ function ImagePackUpload({ onUpload }) {
     if (!imgFile) return;
     const { shortcodeInput } = evt.target;
     const shortcode = shortcodeInput.value.trim();
-    if (shortcode === '') return;
+    if (shortcode === "") return;
 
     setProgress(true);
     const image = await scaleDownImage(imgFile, 512, 512);
@@ -32,37 +32,53 @@ function ImagePackUpload({ onUpload }) {
     onUpload(shortcode, url);
     setProgress(false);
     setImgFile(null);
-    shortcodeRef.current.value = '';
+    shortcodeRef.current.value = "";
   };
 
   const handleFileChange = (evt) => {
     const img = evt.target.files[0];
     if (!img) return;
     setImgFile(img);
-    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf('.'));
+    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf("."));
     shortcodeRef.current.focus();
   };
   const handleRemove = () => {
     setImgFile(null);
     inputRef.current.value = null;
-    shortcodeRef.current.value = '';
+    shortcodeRef.current.value = "";
   };
 
   return (
     <form onSubmit={handleSubmit} className="image-pack-upload">
-      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" accept=".png, .gif, .webp" required />
-      {
-        imgFile
-          ? (
-            <div className="image-pack-upload__file">
-              <IconButton onClick={handleRemove} src={CirclePlusIC} tooltip="Remove file" />
-              <Text>{imgFile.name}</Text>
-            </div>
-          )
-          : <Button onClick={() => inputRef.current.click()}>Import image</Button>
-      }
-      <Input forwardRef={shortcodeRef} name="shortcodeInput" placeholder="shortcode" required />
-      <Button disabled={progress} variant="primary" type="submit">{progress ? 'Uploading...' : 'Upload'}</Button>
+      <input
+        ref={inputRef}
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+        type="file"
+        accept=".png, .gif, .webp"
+        required
+      />
+      {imgFile ? (
+        <div className="image-pack-upload__file">
+          <IconButton
+            onClick={handleRemove}
+            src={CirclePlusIC}
+            tooltip="Remove file"
+          />
+          <Text>{imgFile.name}</Text>
+        </div>
+      ) : (
+        <Button onClick={() => inputRef.current.click()}>Import image</Button>
+      )}
+      <Input
+        forwardRef={shortcodeRef}
+        name="shortcodeInput"
+        placeholder="shortcode"
+        required
+      />
+      <Button disabled={progress} variant="primary" type="submit">
+        {progress ? "Uploading..." : "Upload"}
+      </Button>
     </form>
   );
 }
diff --git a/src/app/molecules/image-pack/ImagePackUpload.scss b/src/app/molecules/image-pack/ImagePackUpload.scss
index 75b57ed2..c9c44233 100644
--- a/src/app/molecules/image-pack/ImagePackUpload.scss
+++ b/src/app/molecules/image-pack/ImagePackUpload.scss
@@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .image-pack-upload {
   padding: var(--sp-normal);
@@ -19,7 +19,7 @@
     background: var(--bg-surface-low);
     border-radius: var(--bo-radius);
     box-shadow: var(--bs-surface-border);
-  
+
     & button {
       --parent-height: 40px;
       width: var(--parent-height);
@@ -28,16 +28,16 @@
       justify-content: center;
       align-items: center;
     }
-  
+
     & .ic-raw {
       background-color: var(--bg-caution);
       transform: rotate(45deg);
     }
-    
+
     & .text {
       @extend .cp-txt__ellipsis;
       @include dir.side(margin, var(--sp-ultra-tight), var(--sp-normal));
       max-width: 86px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx b/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
index 279b3816..720c4d25 100644
--- a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
+++ b/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
@@ -1,31 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
+import CheckIC from "../../../../public/res/ic/outlined/check.svg";
 
 function ImagePackUsageSelector({ usage, onSelect }) {
   return (
     <div>
       <MenuHeader>Usage</MenuHeader>
       <MenuItem
-        iconSrc={usage === 'emoticon' ? CheckIC : undefined}
-        variant={usage === 'emoticon' ? 'positive' : 'surface'}
-        onClick={() => onSelect('emoticon')}
+        iconSrc={usage === "emoticon" ? CheckIC : undefined}
+        variant={usage === "emoticon" ? "positive" : "surface"}
+        onClick={() => onSelect("emoticon")}
       >
         Emoji
       </MenuItem>
       <MenuItem
-        iconSrc={usage === 'sticker' ? CheckIC : undefined}
-        variant={usage === 'sticker' ? 'positive' : 'surface'}
-        onClick={() => onSelect('sticker')}
+        iconSrc={usage === "sticker" ? CheckIC : undefined}
+        variant={usage === "sticker" ? "positive" : "surface"}
+        onClick={() => onSelect("sticker")}
       >
         Sticker
       </MenuItem>
       <MenuItem
-        iconSrc={usage === 'both' ? CheckIC : undefined}
-        variant={usage === 'both' ? 'positive' : 'surface'}
-        onClick={() => onSelect('both')}
+        iconSrc={usage === "both" ? CheckIC : undefined}
+        variant={usage === "both" ? "positive" : "surface"}
+        onClick={() => onSelect("both")}
       >
         Both
       </MenuItem>
@@ -34,7 +34,7 @@ function ImagePackUsageSelector({ usage, onSelect }) {
 }
 
 ImagePackUsageSelector.propTypes = {
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
   onSelect: PropTypes.func.isRequired,
 };
 
diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
index 53fc7e16..ed6f2257 100644
--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -1,18 +1,22 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ImageUpload.scss';
+import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
+import "./ImageUpload.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import Spinner from '../../atoms/spinner/Spinner';
-import RawIcon from '../../atoms/system-icons/RawIcon';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
+import Spinner from "../../atoms/spinner/Spinner";
+import RawIcon from "../../atoms/system-icons/RawIcon";
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import PlusIC from "../../../../public/res/ic/outlined/plus.svg";
 
 function ImageUpload({
-  text, bgColor, imageSrc, onUpload, onRequestRemove,
+  text,
+  bgColor,
+  imageSrc,
+  onUpload,
+  onRequestRemove,
   size,
 }) {
   const [uploadPromise, setUploadPromise] = useState(null);
@@ -26,7 +30,7 @@ function ImageUpload({
       setUploadPromise(uPromise);
 
       const res = await uPromise;
-      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      if (typeof res?.content_uri === "string") onUpload(res.content_uri);
       setUploadPromise(null);
     } catch {
       setUploadPromise(null);
@@ -50,40 +54,48 @@ function ImageUpload({
           uploadImageRef.current.click();
         }}
       >
-        <Avatar
-          imageSrc={imageSrc}
-          text={text}
-          bgColor={bgColor}
-          size={size}
-        />
-        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && (
-            size === 'large'
-              ? <Text variant="b3" weight="bold">Upload</Text>
-              : <RawIcon src={PlusIC} color="white" />
-          )}
+        <Avatar imageSrc={imageSrc} text={text} bgColor={bgColor} size={size} />
+        <div
+          className={`img-upload__process ${
+            uploadPromise === null ? " img-upload__process--stopped" : ""
+          }`}
+        >
+          {uploadPromise === null &&
+            (size === "large" ? (
+              <Text variant="b3" weight="bold">
+                Upload
+              </Text>
+            ) : (
+              <RawIcon src={PlusIC} color="white" />
+            ))}
           {uploadPromise !== null && <Spinner size="small" />}
         </div>
       </button>
-      { (typeof imageSrc === 'string' || uploadPromise !== null) && (
+      {(typeof imageSrc === "string" || uploadPromise !== null) && (
         <button
           className="img-upload__btn-cancel"
           type="button"
           onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
         >
-          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
+          <Text variant="b3">{uploadPromise ? "Cancel" : "Remove"}</Text>
         </button>
       )}
-      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
+      <input
+        onChange={uploadImage}
+        style={{ display: "none" }}
+        ref={uploadImageRef}
+        type="file"
+        accept="image/*"
+      />
     </div>
   );
 }
 
 ImageUpload.defaultProps = {
   text: null,
-  bgColor: 'transparent',
+  bgColor: "transparent",
   imageSrc: null,
-  size: 'large',
+  size: "large",
 };
 
 ImageUpload.propTypes = {
@@ -92,7 +104,7 @@ ImageUpload.propTypes = {
   imageSrc: PropTypes.string,
   onUpload: PropTypes.func.isRequired,
   onRequestRemove: PropTypes.func.isRequired,
-  size: PropTypes.oneOf(['large', 'normal']),
+  size: PropTypes.oneOf(["large", "normal"]),
 };
 
 export default ImageUpload;
diff --git a/src/app/molecules/image-upload/ImageUpload.scss b/src/app/molecules/image-upload/ImageUpload.scss
index 3ae38bc0..835fa81a 100644
--- a/src/app/molecules/image-upload/ImageUpload.scss
+++ b/src/app/molecules/image-upload/ImageUpload.scss
@@ -1,49 +1,48 @@
 .img-upload__wrapper {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .img-upload {
-	display: flex;
-	cursor: pointer;
-	position: relative;
+  display: flex;
+  cursor: pointer;
+  position: relative;
 
-	&__process {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--bo-radius);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: rgba(0, 0, 0, .6);
-		
-		position: absolute;
-		left: 0;
-		right: 0;
-		z-index: 1;
-		& .text {
-			text-transform: uppercase;
-			color: white;
-		}
-		&--stopped {
-			display: none;
-		}
-		& .donut-spinner {
-			border-color: rgb(255, 255, 255, .3);
-    	border-left-color: white;
-		}
-	}
-	&:hover .img-upload__process--stopped {
-		display: flex;
-	}
+  &__process {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--bo-radius);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
 
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    & .text {
+      text-transform: uppercase;
+      color: white;
+    }
+    &--stopped {
+      display: none;
+    }
+    & .donut-spinner {
+      border-color: rgb(255, 255, 255, 0.3);
+      border-left-color: white;
+    }
+  }
+  &:hover .img-upload__process--stopped {
+    display: flex;
+  }
 
-	&__btn-cancel {
-		margin-top: var(--sp-extra-tight);
-		cursor: pointer;
-		& .text {
-			color: var(--tc-danger-normal)
-		}
-	}
+  &__btn-cancel {
+    margin-top: var(--sp-extra-tight);
+    cursor: pointer;
+    & .text {
+      color: var(--tc-danger-normal);
+    }
+  }
 }
diff --git a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
index b7738a6a..93775f47 100644
--- a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
+++ b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
@@ -1,18 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ExportE2ERoomKeys.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./ExportE2ERoomKeys.scss";
 
-import FileSaver from 'file-saver';
+import FileSaver from "file-saver";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { encryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { encryptMegolmKeyFile } from "../../../util/cryptE2ERoomKeys";
 
-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 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';
+import { useStore } from "../../hooks/useStore";
 
 function ExportE2ERoomKeys() {
   const isMountStore = useStore();
@@ -29,14 +29,14 @@ function ExportE2ERoomKeys() {
     if (password !== confirmPasswordRef.current.value) {
       setStatus({
         isOngoing: false,
-        msg: 'Password does not match.',
+        msg: "Password does not match.",
         type: cons.status.ERROR,
       });
       return;
     }
     setStatus({
       isOngoing: true,
-      msg: 'Getting keys...',
+      msg: "Getting keys...",
       type: cons.status.IN_FLIGHT,
     });
     try {
@@ -44,19 +44,22 @@ function ExportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,
-          msg: 'Encrypting keys...',
+          msg: "Encrypting keys...",
           type: cons.status.IN_FLIGHT,
         });
       }
-      const encKeys = await encryptMegolmKeyFile(JSON.stringify(keys), password);
+      const encKeys = await encryptMegolmKeyFile(
+        JSON.stringify(keys),
+        password
+      );
       const blob = new Blob([encKeys], {
-        type: 'text/plain;charset=us-ascii',
+        type: "text/plain;charset=us-ascii",
       });
-      FileSaver.saveAs(blob, 'cinny-keys.txt');
+      FileSaver.saveAs(blob, "cinny-keys.txt");
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: 'Successfully exported all keys.',
+          msg: "Successfully exported all keys.",
           type: cons.status.SUCCESS,
         });
       }
@@ -64,7 +67,7 @@ function ExportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: e.friendlyText || 'Failed to export keys. Please try again.',
+          msg: e.friendlyText || "Failed to export keys. Please try again.",
           type: cons.status.ERROR,
         });
       }
@@ -80,19 +83,45 @@ function ExportE2ERoomKeys() {
 
   return (
     <div className="export-e2e-room-keys">
-      <form className="export-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); exportE2ERoomKeys(); }}>
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
-        <Input forwardRef={confirmPasswordRef} type="password" placeholder="Confirm password" required />
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Export</Button>
+      <form
+        className="export-e2e-room-keys__form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          exportE2ERoomKeys();
+        }}
+      >
+        <Input
+          forwardRef={passwordRef}
+          type="password"
+          placeholder="Password"
+          required
+        />
+        <Input
+          forwardRef={confirmPasswordRef}
+          type="password"
+          placeholder="Confirm password"
+          required
+        />
+        <Button disabled={status.isOngoing} variant="primary" type="submit">
+          Export
+        </Button>
       </form>
-      { status.type === cons.status.IN_FLIGHT && (
+      {status.type === cons.status.IN_FLIGHT && (
         <div className="import-e2e-room-keys__process">
           <Spinner size="small" />
           <Text variant="b2">{status.msg}</Text>
         </div>
       )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
+        <Text className="import-e2e-room-keys__success" variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text className="import-e2e-room-keys__error" variant="b2">
+          {status.msg}
+        </Text>
+      )}
     </div>
   );
 }
diff --git a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
index a8bd029d..d03d3695 100644
--- a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
+++ b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
@@ -24,5 +24,4 @@
     margin-top: var(--sp-tight);
     color: var(--tc-danger-high);
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
index b5a44b0e..4d94cec9 100644
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
+++ b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
@@ -1,19 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ImportE2ERoomKeys.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./ImportE2ERoomKeys.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { decryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { decryptMegolmKeyFile } from "../../../util/cryptE2ERoomKeys";
 
-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 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 CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import CirclePlusIC from "../../../../public/res/ic/outlined/circle-plus.svg";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 function ImportE2ERoomKeys() {
   const isMountStore = useStore();
@@ -32,7 +32,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,
-          msg: 'Decrypting file...',
+          msg: "Decrypting file...",
           type: cons.status.IN_FLIGHT,
         });
       }
@@ -41,7 +41,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,
-          msg: 'Decrypting messages...',
+          msg: "Decrypting messages...",
           type: cons.status.IN_FLIGHT,
         });
       }
@@ -49,7 +49,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: 'Successfully imported all keys.',
+          msg: "Successfully imported all keys.",
           type: cons.status.SUCCESS,
         });
         inputRef.current.value = null;
@@ -59,7 +59,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: e.friendlyText || 'Failed to decrypt keys. Please try again.',
+          msg: e.friendlyText || "Failed to decrypt keys. Please try again.",
           type: cons.status.ERROR,
         });
       }
@@ -68,7 +68,7 @@ function ImportE2ERoomKeys() {
 
   const importE2ERoomKeys = () => {
     const password = passwordRef.current.value;
-    if (password === '' || keyFile === null) return;
+    if (password === "" || keyFile === null) return;
     if (status.isOngoing) return;
 
     tryDecrypt(keyFile, password);
@@ -76,7 +76,7 @@ function ImportE2ERoomKeys() {
 
   const handleFileChange = (e) => {
     const file = e.target.files.item(0);
-    passwordRef.current.value = '';
+    passwordRef.current.value = "";
     setKeyFile(file);
     setStatus({
       isOngoing: false,
@@ -105,27 +105,59 @@ function ImportE2ERoomKeys() {
 
   return (
     <div className="import-e2e-room-keys">
-      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" />
+      <input
+        ref={inputRef}
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+        type="file"
+      />
 
-      <form className="import-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); importE2ERoomKeys(); }}>
-        { keyFile !== null && (
+      <form
+        className="import-e2e-room-keys__form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          importE2ERoomKeys();
+        }}
+      >
+        {keyFile !== null && (
           <div className="import-e2e-room-keys__file">
-            <IconButton onClick={removeImportKeysFile} src={CirclePlusIC} tooltip="Remove file" />
+            <IconButton
+              onClick={removeImportKeysFile}
+              src={CirclePlusIC}
+              tooltip="Remove file"
+            />
             <Text>{keyFile.name}</Text>
           </div>
         )}
-        {keyFile === null && <Button onClick={() => inputRef.current.click()}>Import keys</Button>}
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Decrypt</Button>
+        {keyFile === null && (
+          <Button onClick={() => inputRef.current.click()}>Import keys</Button>
+        )}
+        <Input
+          forwardRef={passwordRef}
+          type="password"
+          placeholder="Password"
+          required
+        />
+        <Button disabled={status.isOngoing} variant="primary" type="submit">
+          Decrypt
+        </Button>
       </form>
-      { status.type === cons.status.IN_FLIGHT && (
+      {status.type === cons.status.IN_FLIGHT && (
         <div className="import-e2e-room-keys__process">
           <Spinner size="small" />
           <Text variant="b2">{status.msg}</Text>
         </div>
       )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
+        <Text className="import-e2e-room-keys__success" variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text className="import-e2e-room-keys__error" variant="b2">
+          {status.msg}
+        </Text>
+      )}
     </div>
   );
 }
diff --git a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
index 4f27fdfa..bbb3f190 100644
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
+++ b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
@@ -1,5 +1,5 @@
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .import-e2e-room-keys {
   &__file {
@@ -22,7 +22,7 @@
       background-color: var(--bg-caution);
       transform: rotate(45deg);
     }
-    
+
     & .text {
       @extend .cp-txt__ellipsis;
       @include dir.side(margin, var(--sp-tight), var(--sp-loose));
@@ -33,8 +33,7 @@
   &__form {
     display: flex;
     margin-top: var(--sp-extra-tight);
-    
-    
+
     & .input-container {
       flex: 1;
       margin: 0 var(--sp-tight);
@@ -58,4 +57,4 @@
     margin-top: var(--sp-tight);
     color: var(--tc-positive-high);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index e2b61775..f38a21e4 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './Media.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./Media.scss";
 
-import encrypt from 'browser-encrypt-attachment';
+import encrypt from "browser-encrypt-attachment";
 
-import { BlurhashCanvas } from 'react-blurhash';
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Spinner from '../../atoms/spinner/Spinner';
-import ImageLightbox from '../image-lightbox/ImageLightbox';
+import { BlurhashCanvas } from "react-blurhash";
+import Text from "../../atoms/text/Text";
+import IconButton from "../../atoms/button/IconButton";
+import Spinner from "../../atoms/spinner/Spinner";
+import ImageLightbox from "../image-lightbox/ImageLightbox";
 
-import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
-import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
-import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
+import DownloadSVG from "../../../../public/res/ic/outlined/download.svg";
+import ExternalSVG from "../../../../public/res/ic/outlined/external.svg";
+import PlaySVG from "../../../../public/res/ic/outlined/play.svg";
 
-import { getBlobSafeMimeType } from '../../../util/mimetypes';
+import { getBlobSafeMimeType } from "../../../util/mimetypes";
 
 async function getDecryptedBlob(response, type, decryptData) {
   const arrayBuffer = await response.arrayBuffer();
@@ -25,9 +25,11 @@ async function getDecryptedBlob(response, type, decryptData) {
 
 async function getUrl(link, type, decryptData) {
   try {
-    const response = await fetch(link, { method: 'GET' });
+    const response = await fetch(link, { method: "GET" });
     if (decryptData !== null) {
-      return URL.createObjectURL(await getDecryptedBlob(response, type, decryptData));
+      return URL.createObjectURL(
+        await getDecryptedBlob(response, type, decryptData)
+      );
     }
     const blob = await response.blob();
     return URL.createObjectURL(blob);
@@ -41,10 +43,7 @@ function getNativeHeight(width, height, maxWidth = 296) {
   return scale * height;
 }
 
-function FileHeader({
-  name, link, external,
-  file, type,
-}) {
+function FileHeader({ name, link, external, file, type }) {
   const [url, setUrl] = useState(null);
 
   async function getFile() {
@@ -61,20 +60,25 @@ function FileHeader({
   }
   return (
     <div className="file-header">
-      <Text className="file-name" variant="b3">{name}</Text>
-      { link !== null && (
+      <Text className="file-name" variant="b3">
+        {name}
+      </Text>
+      {link !== null && (
         <>
-          {
-            external && (
-              <IconButton
-                size="extra-small"
-                tooltip="Open in new tab"
-                src={ExternalSVG}
-                onClick={() => window.open(url || link)}
-              />
-            )
-          }
-          <a href={url || link} download={name} target="_blank" rel="noreferrer">
+          {external && (
+            <IconButton
+              size="extra-small"
+              tooltip="Open in new tab"
+              src={ExternalSVG}
+              onClick={() => window.open(url || link)}
+            />
+          )}
+          <a
+            href={url || link}
+            download={name}
+            target="_blank"
+            rel="noreferrer"
+          >
             <IconButton
               size="extra-small"
               tooltip="Download"
@@ -100,9 +104,7 @@ FileHeader.propTypes = {
   type: PropTypes.string.isRequired,
 };
 
-function File({
-  name, link, file, type,
-}) {
+function File({ name, link, file, type }) {
   return (
     <div className="file-container">
       <FileHeader name={name} link={link} file={file} type={type} />
@@ -111,7 +113,7 @@ function File({
 }
 File.defaultProps = {
   file: null,
-  type: '',
+  type: "",
 };
 File.propTypes = {
   name: PropTypes.string.isRequired,
@@ -120,9 +122,7 @@ File.propTypes = {
   file: PropTypes.shape({}),
 };
 
-function Image({
-  name, width, height, link, file, type, blurhash,
-}) {
+function Image({ name, width, height, link, file, type, blurhash }) {
   const [url, setUrl] = useState(null);
   const [blur, setBlur] = useState(true);
   const [lightbox, setLightbox] = useState(false);
@@ -149,17 +149,19 @@ function Image({
     <>
       <div className="file-container">
         <div
-          style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
+          style={{
+            height: width !== null ? getNativeHeight(width, height) : "unset",
+          }}
           className="image-container"
           role="button"
           tabIndex="0"
           onClick={toggleLightbox}
           onKeyDown={toggleLightbox}
         >
-          { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-          { url !== null && (
+          {blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+          {url !== null && (
             <img
-              style={{ display: blur ? 'none' : 'unset' }}
+              style={{ display: blur ? "none" : "unset" }}
               onLoad={() => setBlur(false)}
               src={url || link}
               alt={name}
@@ -182,8 +184,8 @@ Image.defaultProps = {
   file: null,
   width: null,
   height: null,
-  type: '',
-  blurhash: '',
+  type: "",
+  blurhash: "",
 };
 Image.propTypes = {
   name: PropTypes.string.isRequired,
@@ -195,9 +197,7 @@ Image.propTypes = {
   blurhash: PropTypes.string,
 };
 
-function Sticker({
-  name, height, width, link, file, type,
-}) {
+function Sticker({ name, height, width, link, file, type }) {
   const [url, setUrl] = useState(null);
 
   useEffect(() => {
@@ -214,14 +214,19 @@ function Sticker({
   }, []);
 
   return (
-    <div className="sticker-container" style={{ height: width !== null ? getNativeHeight(width, height, 128) : 'unset' }}>
-      { url !== null && <img src={url || link} title={name} alt={name} />}
+    <div
+      className="sticker-container"
+      style={{
+        height: width !== null ? getNativeHeight(width, height, 128) : "unset",
+      }}
+    >
+      {url !== null && <img src={url || link} title={name} alt={name} />}
     </div>
   );
 }
 Sticker.defaultProps = {
   file: null,
-  type: '',
+  type: "",
   width: null,
   height: null,
 };
@@ -234,9 +239,7 @@ Sticker.propTypes = {
   type: PropTypes.string,
 };
 
-function Audio({
-  name, link, type, file,
-}) {
+function Audio({ name, link, type, file }) {
   const [isLoading, setIsLoading] = useState(false);
   const [url, setUrl] = useState(null);
 
@@ -252,11 +255,22 @@ function Audio({
 
   return (
     <div className="file-container">
-      <FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
+      <FileHeader
+        name={name}
+        link={file !== null ? url : url || link}
+        type={type}
+        external
+      />
       <div className="audio-container">
-        { url === null && isLoading && <Spinner size="small" /> }
-        { url === null && !isLoading && <IconButton onClick={handlePlayAudio} tooltip="Play audio" src={PlaySVG} />}
-        { url !== null && (
+        {url === null && isLoading && <Spinner size="small" />}
+        {url === null && !isLoading && (
+          <IconButton
+            onClick={handlePlayAudio}
+            tooltip="Play audio"
+            src={PlaySVG}
+          />
+        )}
+        {url !== null && (
           /* eslint-disable-next-line jsx-a11y/media-has-caption */
           <audio autoPlay controls>
             <source src={url} type={getBlobSafeMimeType(type)} />
@@ -268,7 +282,7 @@ function Audio({
 }
 Audio.defaultProps = {
   file: null,
-  type: '',
+  type: "",
 };
 Audio.propTypes = {
   name: PropTypes.string.isRequired,
@@ -278,8 +292,16 @@ Audio.propTypes = {
 };
 
 function Video({
-  name, link, thumbnail, thumbnailFile, thumbnailType,
-  width, height, file, type, blurhash,
+  name,
+  link,
+  thumbnail,
+  thumbnailFile,
+  thumbnailType,
+  width,
+  height,
+  file,
+  type,
+  blurhash,
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [url, setUrl] = useState(null);
@@ -312,21 +334,37 @@ function Video({
 
   return (
     <div className="file-container">
-      <FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
+      <FileHeader
+        name={name}
+        link={file !== null ? url : url || link}
+        type={type}
+        external
+      />
       <div
         style={{
-          height: width !== null ? getNativeHeight(width, height) : 'unset',
+          height: width !== null ? getNativeHeight(width, height) : "unset",
         }}
         className="video-container"
       >
-        { url === null ? (
+        {url === null ? (
           <>
-            { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-            { thumbUrl !== null && (
-              <img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
+            {blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+            {thumbUrl !== null && (
+              <img
+                style={{ display: blur ? "none" : "unset" }}
+                src={thumbUrl}
+                onLoad={() => setBlur(false)}
+                alt={name}
+              />
             )}
             {isLoading && <Spinner size="small" />}
-            {!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
+            {!isLoading && (
+              <IconButton
+                onClick={handlePlayVideo}
+                tooltip="Play video"
+                src={PlaySVG}
+              />
+            )}
           </>
         ) : (
           /* eslint-disable-next-line jsx-a11y/media-has-caption */
@@ -345,7 +383,7 @@ Video.defaultProps = {
   thumbnail: null,
   thumbnailType: null,
   thumbnailFile: null,
-  type: '',
+  type: "",
   blurhash: null,
 };
 Video.propTypes = {
@@ -361,6 +399,4 @@ Video.propTypes = {
   blurhash: PropTypes.string,
 };
 
-export {
-  File, Image, Sticker, Audio, Video,
-};
+export { File, Image, Sticker, Audio, Video };
diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss
index 8d98c428..e53847ce 100644
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -1,4 +1,4 @@
-@use '../../partials/text';
+@use "../../partials/text";
 
 .file-header {
   display: flex;
diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 26a5b29d..a6f57de9 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -1,46 +1,55 @@
 /* eslint-disable react/prop-types */
-import React, {
-  useState, useEffect, useCallback, useRef,
-} from 'react';
-import PropTypes from 'prop-types';
-import './Message.scss';
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import PropTypes from "prop-types";
+import "./Message.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
 import {
-  getUsername, getUsernameOfRoomMember, parseReply, trimHTMLReply,
-} from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
-import { getEventCords } from '../../../util/common';
-import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
+  getUsername,
+  getUsernameOfRoomMember,
+  parseReply,
+  trimHTMLReply,
+} from "../../../util/matrixUtil";
+import colorMXID from "../../../util/colorMXID";
+import { getEventCords } from "../../../util/common";
+import { redactEvent, sendReaction } from "../../../client/action/roomTimeline";
 import {
-  openEmojiBoard, openProfileViewer, openReadReceipts, openViewSource, replyTo,
-} from '../../../client/action/navigation';
-import { sanitizeCustomHtml } from '../../../util/sanitize';
+  openEmojiBoard,
+  openProfileViewer,
+  openReadReceipts,
+  openViewSource,
+  replyTo,
+} from "../../../client/action/navigation";
+import { sanitizeCustomHtml } from "../../../util/sanitize";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Button from '../../atoms/button/Button';
-import Tooltip from '../../atoms/tooltip/Tooltip';
-import Input from '../../atoms/input/Input';
-import Avatar from '../../atoms/avatar/Avatar';
-import IconButton from '../../atoms/button/IconButton';
-import Time from '../../atoms/time/Time';
-import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
-import * as Media from '../media/Media';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Button from "../../atoms/button/Button";
+import Tooltip from "../../atoms/tooltip/Tooltip";
+import Input from "../../atoms/input/Input";
+import Avatar from "../../atoms/avatar/Avatar";
+import IconButton from "../../atoms/button/IconButton";
+import Time from "../../atoms/time/Time";
+import ContextMenu, {
+  MenuHeader,
+  MenuItem,
+  MenuBorder,
+} from "../../atoms/context-menu/ContextMenu";
+import * as Media from "../media/Media";
 
-import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
-import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
-import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-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 ReplyArrowIC from "../../../../public/res/ic/outlined/reply-arrow.svg";
+import EmojiAddIC from "../../../../public/res/ic/outlined/emoji-add.svg";
+import VerticalMenuIC from "../../../../public/res/ic/outlined/vertical-menu.svg";
+import PencilIC from "../../../../public/res/ic/outlined/pencil.svg";
+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';
-import { getBlobSafeMimeType } from '../../../util/mimetypes';
-import { html, plain } from '../../../util/markdown';
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
+import { getBlobSafeMimeType } from "../../../util/mimetypes";
+import { html, plain } from "../../../util/markdown";
 
 function PlaceholderMessage() {
   return (
@@ -61,37 +70,40 @@ function PlaceholderMessage() {
   );
 }
 
-const MessageAvatar = React.memo(({
-  roomId, avatarSrc, userId, username,
-}) => (
+const MessageAvatar = React.memo(({ roomId, avatarSrc, userId, username }) => (
   <div className="message__avatar-container">
     <button type="button" onClick={() => openProfileViewer(userId, roomId)}>
-      <Avatar imageSrc={avatarSrc} text={username} bgColor={colorMXID(userId)} size="small" />
+      <Avatar
+        imageSrc={avatarSrc}
+        text={username}
+        bgColor={colorMXID(userId)}
+        size="small"
+      />
     </button>
   </div>
 ));
 
-const MessageHeader = React.memo(({
-  userId, username, timestamp, fullTime,
-}) => (
-  <div className="message__header">
-    <Text
-      style={{ color: colorMXID(userId) }}
-      className="message__profile"
-      variant="b1"
-      weight="medium"
-      span
-    >
-      <span>{twemojify(username)}</span>
-      <span>{twemojify(userId)}</span>
-    </Text>
-    <div className="message__time">
-      <Text variant="b3">
-        <Time timestamp={timestamp} fullTime={fullTime} />
+const MessageHeader = React.memo(
+  ({ userId, username, timestamp, fullTime }) => (
+    <div className="message__header">
+      <Text
+        style={{ color: colorMXID(userId) }}
+        className="message__profile"
+        variant="b1"
+        weight="medium"
+        span
+      >
+        <span>{twemojify(username)}</span>
+        <span>{twemojify(userId)}</span>
       </Text>
+      <div className="message__time">
+        <Text variant="b3">
+          <Time timestamp={timestamp} fullTime={fullTime} />
+        </Text>
+      </div>
     </div>
-  </div>
-));
+  )
+);
 MessageHeader.defaultProps = {
   fullTime: false,
 };
@@ -107,9 +119,7 @@ function MessageReply({ name, color, body }) {
     <div className="message__reply">
       <Text variant="b2">
         <RawIcon color={color} size="extra-small" src={ReplyArrowIC} />
-        <span style={{ color }}>{twemojify(name)}</span>
-        {' '}
-        {twemojify(body)}
+        <span style={{ color }}>{twemojify(name)}</span> {twemojify(body)}
       </Text>
     </div>
   );
@@ -143,9 +153,11 @@ const MessageReplyWrapper = React.memo(({ roomTimeline, eventId }) => {
         const username = getUsernameOfRoomMember(mEvent.sender);
 
         if (isMountedRef.current === false) return;
-        const fallbackBody = mEvent.isRedacted() ? '*** This message has been deleted ***' : '*** Unable to load reply ***';
+        const fallbackBody = mEvent.isRedacted()
+          ? "*** This message has been deleted ***"
+          : "*** Unable to load reply ***";
         let parsedBody = parseReply(rawBody)?.body ?? rawBody ?? fallbackBody;
-        if (editedList && parsedBody.startsWith(' * ')) {
+        if (editedList && parsedBody.startsWith(" * ")) {
           parsedBody = parsedBody.slice(3);
         }
 
@@ -157,9 +169,9 @@ const MessageReplyWrapper = React.memo(({ roomTimeline, eventId }) => {
         });
       } catch {
         setReply({
-          to: '** Unknown user **',
-          color: 'var(--tc-danger-normal)',
-          body: '*** Unable to load reply ***',
+          to: "** Unknown user **",
+          color: "var(--tc-danger-normal)",
+          body: "*** Unable to load reply ***",
           event: null,
         });
       }
@@ -172,7 +184,7 @@ const MessageReplyWrapper = React.memo(({ roomTimeline, eventId }) => {
   }, []);
 
   const focusReply = (ev) => {
-    if (!ev.key || ev.key === ' ' || ev.key === 'Enter') {
+    if (!ev.key || ev.key === " " || ev.key === "Enter") {
       if (ev.key) ev.preventDefault();
       if (reply?.event === null) return;
       if (reply?.event.isRedacted()) return;
@@ -188,7 +200,9 @@ const MessageReplyWrapper = React.memo(({ roomTimeline, eventId }) => {
       role="button"
       tabIndex="0"
     >
-      {reply !== null && <MessageReply name={reply.to} color={reply.color} body={reply.body} />}
+      {reply !== null && (
+        <MessageReply name={reply.to} color={reply.color} body={reply.body} />
+      )}
     </div>
   );
 });
@@ -197,79 +211,83 @@ MessageReplyWrapper.propTypes = {
   eventId: PropTypes.string.isRequired,
 };
 
-const MessageBody = React.memo(({
-  senderName,
-  body,
-  isCustomHTML,
-  isEdited,
-  msgType,
-}) => {
-  // if body is not string it is a React element.
-  if (typeof body !== 'string') return <div className="message__body">{body}</div>;
+const MessageBody = React.memo(
+  ({ senderName, body, isCustomHTML, isEdited, msgType }) => {
+    // if body is not string it is a React element.
+    if (typeof body !== "string")
+      return <div className="message__body">{body}</div>;
 
-  let content = null;
-  if (isCustomHTML) {
-    try {
-      content = twemojify(
-        sanitizeCustomHtml(initMatrix.matrixClient, body),
-        undefined,
-        true,
-        false,
-        true,
-      );
-    } catch {
-      console.error('Malformed custom html: ', body);
-      content = twemojify(body, undefined);
+    let content = null;
+    if (isCustomHTML) {
+      try {
+        content = twemojify(
+          sanitizeCustomHtml(initMatrix.matrixClient, body),
+          undefined,
+          true,
+          false,
+          true
+        );
+      } catch {
+        console.error("Malformed custom html: ", body);
+        content = twemojify(body, undefined);
+      }
+    } else {
+      content = twemojify(body, undefined, true);
     }
-  } else {
-    content = twemojify(body, undefined, true);
-  }
 
-  // Determine if this message should render with large emojis
-  // Criteria:
-  // - Contains only emoji
-  // - Contains no more than 10 emoji
-  let emojiOnly = false;
-  if (content.type === 'img') {
-    // If this messages contains only a single (inline) image
-    emojiOnly = true;
-  } else if (content.constructor.name === 'Array') {
-    // Otherwise, it might be an array of images / texb
-
-    // Count the number of emojis
-    const nEmojis = content.filter((e) => e.type === 'img').length;
-
-    // Make sure there's no text besides whitespace and variation selector U+FE0F
-    if (nEmojis <= 10 && content.every((element) => (
-      (typeof element === 'object' && element.type === 'img')
-      || (typeof element === 'string' && /^[\s\ufe0f]*$/g.test(element))
-    ))) {
+    // Determine if this message should render with large emojis
+    // Criteria:
+    // - Contains only emoji
+    // - Contains no more than 10 emoji
+    let emojiOnly = false;
+    if (content.type === "img") {
+      // If this messages contains only a single (inline) image
       emojiOnly = true;
+    } else if (content.constructor.name === "Array") {
+      // Otherwise, it might be an array of images / texb
+
+      // Count the number of emojis
+      const nEmojis = content.filter((e) => e.type === "img").length;
+
+      // Make sure there's no text besides whitespace and variation selector U+FE0F
+      if (
+        nEmojis <= 10 &&
+        content.every(
+          (element) =>
+            (typeof element === "object" && element.type === "img") ||
+            (typeof element === "string" && /^[\s\ufe0f]*$/g.test(element))
+        )
+      ) {
+        emojiOnly = true;
+      }
     }
-  }
 
-  if (!isCustomHTML) {
-    // If this is a plaintext message, wrap it in a <p> element (automatically applying
-    // white-space: pre-wrap) in order to preserve newlines
-    content = (<p className="message__body-plain">{content}</p>);
-  }
+    if (!isCustomHTML) {
+      // If this is a plaintext message, wrap it in a <p> element (automatically applying
+      // white-space: pre-wrap) in order to preserve newlines
+      content = <p className="message__body-plain">{content}</p>;
+    }
 
-  return (
-    <div className="message__body">
-      <div dir="auto" className={`text ${emojiOnly ? 'text-h1' : 'text-b1'}`}>
-        { msgType === 'm.emote' && (
-          <>
-            {'* '}
-            {twemojify(senderName)}
-            {' '}
-          </>
+    return (
+      <div className="message__body">
+        <div dir="auto" className={`text ${emojiOnly ? "text-h1" : "text-b1"}`}>
+          {msgType === "m.emote" && (
+            <>
+              {"* "}
+              {twemojify(senderName)}{" "}
+            </>
+          )}
+          {content}
+        </div>
+        {isEdited && (
+          <Text className="message__body-edited" variant="b3">
+            (edited)
+          </Text>
         )}
-        { content }
       </div>
-      { isEdited && <Text className="message__body-edited" variant="b3">(edited)</Text>}
-    </div>
-  );
-});
+    );
+  }
+);
 MessageBody.defaultProps = {
   isCustomHTML: false,
   isEdited: false,
@@ -288,24 +306,30 @@ function MessageEdit({ body, onSave, onCancel }) {
 
   useEffect(() => {
     // makes the cursor end up at the end of the line instead of the beginning
-    editInputRef.current.value = '';
+    editInputRef.current.value = "";
     editInputRef.current.value = body;
   }, []);
 
   const handleKeyDown = (e) => {
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       e.preventDefault();
       onCancel();
     }
 
-    if (e.key === 'Enter' && e.shiftKey === false) {
+    if (e.key === "Enter" && e.shiftKey === false) {
       e.preventDefault();
       onSave(editInputRef.current.value, body);
     }
   };
 
   return (
-    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value, body); }}>
+    <form
+      className="message__edit"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave(editInputRef.current.value, body);
+      }}
+    >
       <Input
         forwardRef={editInputRef}
         onKeyDown={handleKeyDown}
@@ -316,7 +340,9 @@ function MessageEdit({ body, onSave, onCancel }) {
         autoFocus
       />
       <div className="message__edit-btns">
-        <Button type="submit" variant="primary">Save</Button>
+        <Button type="submit" variant="primary">
+          Save
+        </Button>
         <Button onClick={onCancel}>Cancel</Button>
       </div>
     </form>
@@ -334,7 +360,10 @@ function getMyEmojiEvent(emojiKey, eventId, roomTimeline) {
   let rEvent = null;
   rEvents?.find((rE) => {
     if (rE.getRelation() === null) return false;
-    if (rE.getRelation().key === emojiKey && rE.getSender() === mx.getUserId()) {
+    if (
+      rE.getRelation().key === emojiKey &&
+      rE.getSender() === mx.getUserId()
+    ) {
       rEvent = rE;
       return true;
     }
@@ -347,7 +376,7 @@ function toggleEmoji(roomId, eventId, emojiKey, shortcode, roomTimeline) {
   const myAlreadyReactEvent = getMyEmojiEvent(emojiKey, eventId, roomTimeline);
   if (myAlreadyReactEvent) {
     const rId = myAlreadyReactEvent.getId();
-    if (rId.startsWith('~')) return;
+    if (rId.startsWith("~")) return;
     redactEvent(roomId, rId);
     return;
   }
@@ -356,7 +385,13 @@ function toggleEmoji(roomId, eventId, emojiKey, shortcode, roomTimeline) {
 
 function pickEmoji(e, roomId, eventId, roomTimeline) {
   openEmojiBoard(getEventCords(e), (emoji) => {
-    toggleEmoji(roomId, eventId, emoji.mxc ?? emoji.unicode, emoji.shortcodes[0], roomTimeline);
+    toggleEmoji(
+      roomId,
+      eventId,
+      emoji.mxc ?? emoji.unicode,
+      emoji.shortcodes[0],
+      roomTimeline
+    );
     e.target.click();
   });
 }
@@ -368,20 +403,27 @@ function genReactionMsg(userIds, reaction, shortcode) {
         <React.Fragment key={userId}>
           {twemojify(getUsername(userId))}
           {index < userIds.length - 1 && (
-            <span style={{ opacity: '.6' }}>
-              {index === userIds.length - 2 ? ' and ' : ', '}
+            <span style={{ opacity: ".6" }}>
+              {index === userIds.length - 2 ? " and " : ", "}
             </span>
           )}
         </React.Fragment>
       ))}
-      <span style={{ opacity: '.6' }}>{' reacted with '}</span>
-      {twemojify(shortcode ? `:${shortcode}:` : reaction, { className: 'react-emoji' })}
+      <span style={{ opacity: ".6" }}>{" reacted with "}</span>
+      {twemojify(shortcode ? `:${shortcode}:` : reaction, {
+        className: "react-emoji",
+      })}
     </>
   );
 }
 
 function MessageReaction({
-  reaction, shortcode, count, users, isActive, onClick,
+  reaction,
+  shortcode,
+  count,
+  users,
+  isActive,
+  onClick,
 }) {
   let customEmojiUrl = null;
   if (reaction.match(/^mxc:\/\/\S+$/)) {
@@ -390,19 +432,32 @@ function MessageReaction({
   return (
     <Tooltip
       className="msg__reaction-tooltip"
-      content={<Text variant="b2">{users.length > 0 ? genReactionMsg(users, reaction, shortcode) : 'Unable to load who has reacted'}</Text>}
+      content={
+        <Text variant="b2">
+          {users.length > 0
+            ? genReactionMsg(users, reaction, shortcode)
+            : "Unable to load who has reacted"}
+        </Text>
+      }
     >
       <button
         onClick={onClick}
         type="button"
-        className={`msg__reaction${isActive ? ' msg__reaction--active' : ''}`}
+        className={`msg__reaction${isActive ? " msg__reaction--active" : ""}`}
       >
-        {
-          customEmojiUrl
-            ? <img className="react-emoji" draggable="false" alt={shortcode ?? reaction} src={customEmojiUrl} />
-            : twemojify(reaction, { className: 'react-emoji' })
-        }
-        <Text variant="b3" className="msg__reaction-count">{count}</Text>
+        {customEmojiUrl ? (
+          <img
+            className="react-emoji"
+            draggable="false"
+            alt={shortcode ?? reaction}
+            src={customEmojiUrl}
+          />
+        ) : (
+          twemojify(reaction, { className: "react-emoji" })
+        )}
+        <Text variant="b3" className="msg__reaction-count">
+          {count}
+        </Text>
       </button>
     </Tooltip>
   );
@@ -423,7 +478,10 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
   const { roomId, room, reactionTimeline } = roomTimeline;
   const mx = initMatrix.matrixClient;
   const reactions = {};
-  const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());
+  const canSendReaction = room.currentState.maySendEvent(
+    "m.reaction",
+    mx.getUserId()
+  );
 
   const eventReactions = reactionTimeline.get(mEvent.getId());
   const addReaction = (key, shortcode, count, senderId, isActive) => {
@@ -458,31 +516,36 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
     });
   } else {
     // Use aggregated reactions
-    const aggregatedReaction = mEvent.getServerAggregatedRelation('m.annotation')?.chunk;
+    const aggregatedReaction =
+      mEvent.getServerAggregatedRelation("m.annotation")?.chunk;
     if (!aggregatedReaction) return null;
     aggregatedReaction.forEach((reaction) => {
-      if (reaction.type !== 'm.reaction') return;
+      if (reaction.type !== "m.reaction") return;
       addReaction(reaction.key, undefined, reaction.count, undefined, false);
     });
   }
 
   return (
     <div className="message__reactions text text-b3 noselect">
-      {
-        Object.keys(reactions).map((key) => (
-          <MessageReaction
-            key={key}
-            reaction={key}
-            shortcode={reactions[key].shortcode}
-            count={reactions[key].count}
-            users={reactions[key].users}
-            isActive={reactions[key].isActive}
-            onClick={() => {
-              toggleEmoji(roomId, mEvent.getId(), key, reactions[key].shortcode, roomTimeline);
-            }}
-          />
-        ))
-      }
+      {Object.keys(reactions).map((key) => (
+        <MessageReaction
+          key={key}
+          reaction={key}
+          shortcode={reactions[key].shortcode}
+          count={reactions[key].count}
+          users={reactions[key].users}
+          isActive={reactions[key].isActive}
+          onClick={() => {
+            toggleEmoji(
+              roomId,
+              mEvent.getId(),
+              key,
+              reactions[key].shortcode,
+              roomTimeline
+            );
+          }}
+        />
+      ))}
       {canSendReaction && (
         <IconButton
           onClick={(e) => {
@@ -503,11 +566,11 @@ MessageReactionGroup.propTypes = {
 
 function isMedia(mE) {
   return (
-    mE.getContent()?.msgtype === 'm.file'
-    || mE.getContent()?.msgtype === 'm.image'
-    || mE.getContent()?.msgtype === 'm.audio'
-    || mE.getContent()?.msgtype === 'm.video'
-    || mE.getType() === 'm.sticker'
+    mE.getContent()?.msgtype === "m.file" ||
+    mE.getContent()?.msgtype === "m.image" ||
+    mE.getContent()?.msgtype === "m.audio" ||
+    mE.getContent()?.msgtype === "m.video" ||
+    mE.getType() === "m.sticker"
   );
 }
 
@@ -523,16 +586,20 @@ function handleOpenViewSource(mEvent, roomTimeline) {
   openViewSource(editedMEvent !== undefined ? editedMEvent : mEvent);
 }
 
-const MessageOptions = React.memo(({
-  roomTimeline, mEvent, edit, reply,
-}) => {
+const MessageOptions = React.memo(({ roomTimeline, mEvent, edit, reply }) => {
   const { roomId, room } = roomTimeline;
   const mx = initMatrix.matrixClient;
   const senderId = mEvent.getSender();
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel;
-  const canIRedact = room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
-  const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());
+  const canIRedact = room.currentState.hasSufficientPowerLevelFor(
+    "redact",
+    myPowerlevel
+  );
+  const canSendReaction = room.currentState.maySendEvent(
+    "m.reaction",
+    mx.getUserId()
+  );
 
   return (
     <div className="message__options">
@@ -550,7 +617,7 @@ const MessageOptions = React.memo(({
         size="extra-small"
         tooltip="Reply"
       />
-      {(senderId === mx.getUserId() && !isMedia(mEvent)) && (
+      {senderId === mx.getUserId() && !isMedia(mEvent) && (
         <IconButton
           onClick={() => edit(true)}
           src={PencilIC}
@@ -564,7 +631,9 @@ const MessageOptions = React.memo(({
             <MenuHeader>Options</MenuHeader>
             <MenuItem
               iconSrc={TickMarkIC}
-              onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(mEvent))}
+              onClick={() =>
+                openReadReceipts(roomId, roomTimeline.getEventReaders(mEvent))
+              }
             >
               Read receipts
             </MenuItem>
@@ -582,10 +651,10 @@ const MessageOptions = React.memo(({
                   iconSrc={BinIC}
                   onClick={async () => {
                     const isConfirmed = await confirmDialog(
-                      'Delete message',
-                      'Are you sure that you want to delete this message?',
-                      'Delete',
-                      'danger',
+                      "Delete message",
+                      "Are you sure that you want to delete this message?",
+                      "Delete",
+                      "danger"
                     );
                     if (!isConfirmed) return;
                     redactEvent(roomId, mEvent.getId());
@@ -619,28 +688,30 @@ MessageOptions.propTypes = {
 function genMediaContent(mE) {
   const mx = initMatrix.matrixClient;
   const mContent = mE.getContent();
-  if (!mContent || !mContent.body) return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+  if (!mContent || !mContent.body)
+    return <span style={{ color: "var(--bg-danger)" }}>Malformed event</span>;
 
   let mediaMXC = mContent?.url;
-  const isEncryptedFile = typeof mediaMXC === 'undefined';
+  const isEncryptedFile = typeof mediaMXC === "undefined";
   if (isEncryptedFile) mediaMXC = mContent?.file?.url;
 
   let thumbnailMXC = mContent?.info?.thumbnail_url;
 
-  if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+  if (typeof mediaMXC === "undefined" || mediaMXC === "")
+    return <span style={{ color: "var(--bg-danger)" }}>Malformed event</span>;
 
   let msgType = mE.getContent()?.msgtype;
   const safeMimetype = getBlobSafeMimeType(mContent.info?.mimetype);
-  if (mE.getType() === 'm.sticker') {
-    msgType = 'm.sticker';
-  } else if (safeMimetype === 'application/octet-stream') {
-    msgType = 'm.file';
+  if (mE.getType() === "m.sticker") {
+    msgType = "m.sticker";
+  } else if (safeMimetype === "application/octet-stream") {
+    msgType = "m.file";
   }
 
-  const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];
+  const blurhash = mContent?.info?.["xyz.amorgan.blurhash"];
 
   switch (msgType) {
-    case 'm.file':
+    case "m.file":
       return (
         <Media.File
           name={mContent.body}
@@ -649,30 +720,34 @@ function genMediaContent(mE) {
           file={mContent.file || null}
         />
       );
-    case 'm.image':
+    case "m.image":
       return (
         <Media.Image
           name={mContent.body}
-          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
-          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          width={typeof mContent.info?.w === "number" ? mContent.info?.w : null}
+          height={
+            typeof mContent.info?.h === "number" ? mContent.info?.h : null
+          }
           link={mx.mxcUrlToHttp(mediaMXC)}
           file={isEncryptedFile ? mContent.file : null}
           type={mContent.info?.mimetype}
           blurhash={blurhash}
         />
       );
-    case 'm.sticker':
+    case "m.sticker":
       return (
         <Media.Sticker
           name={mContent.body}
-          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
-          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          width={typeof mContent.info?.w === "number" ? mContent.info?.w : null}
+          height={
+            typeof mContent.info?.h === "number" ? mContent.info?.h : null
+          }
           link={mx.mxcUrlToHttp(mediaMXC)}
           file={isEncryptedFile ? mContent.file : null}
           type={mContent.info?.mimetype}
         />
       );
-    case 'm.audio':
+    case "m.audio":
       return (
         <Media.Audio
           name={mContent.body}
@@ -681,34 +756,38 @@ function genMediaContent(mE) {
           file={mContent.file || null}
         />
       );
-    case 'm.video':
-      if (typeof thumbnailMXC === 'undefined') {
+    case "m.video":
+      if (typeof thumbnailMXC === "undefined") {
         thumbnailMXC = mContent.info?.thumbnail_file?.url || null;
       }
       return (
         <Media.Video
           name={mContent.body}
           link={mx.mxcUrlToHttp(mediaMXC)}
-          thumbnail={thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)}
+          thumbnail={
+            thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)
+          }
           thumbnailFile={isEncryptedFile ? mContent.info?.thumbnail_file : null}
           thumbnailType={mContent.info?.thumbnail_info?.mimetype || null}
-          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
-          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          width={typeof mContent.info?.w === "number" ? mContent.info?.w : null}
+          height={
+            typeof mContent.info?.h === "number" ? mContent.info?.h : null
+          }
           file={isEncryptedFile ? mContent.file : null}
           type={mContent.info?.mimetype}
           blurhash={blurhash}
         />
       );
     default:
-      return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+      return <span style={{ color: "var(--bg-danger)" }}>Malformed event</span>;
   }
 }
 
 function getEditedBody(editedMEvent) {
-  const newContent = editedMEvent.getContent()['m.new_content'];
-  if (typeof newContent === 'undefined') return [null, false, null];
+  const newContent = editedMEvent.getContent()["m.new_content"];
+  if (typeof newContent === "undefined") return [null, false, null];
 
-  const isCustomHTML = newContent.format === 'org.matrix.custom.html';
+  const isCustomHTML = newContent.format === "org.matrix.custom.html";
   const parsedContent = parseReply(newContent.body);
   if (parsedContent === null) {
     return [newContent.body, isCustomHTML, newContent.formatted_body ?? null];
@@ -717,22 +796,39 @@ function getEditedBody(editedMEvent) {
 }
 
 function Message({
-  mEvent, isBodyOnly, roomTimeline,
-  focus, fullTime, isEdit, setEdit, cancelEdit,
+  mEvent,
+  isBodyOnly,
+  roomTimeline,
+  focus,
+  fullTime,
+  isEdit,
+  setEdit,
+  cancelEdit,
 }) {
   const roomId = mEvent.getRoomId();
   const { editedTimeline, reactionTimeline } = roomTimeline ?? {};
 
-  const className = ['message', (isBodyOnly ? 'message--body-only' : 'message--full')];
-  if (focus) className.push('message--focus');
+  const className = [
+    "message",
+    isBodyOnly ? "message--body-only" : "message--full",
+  ];
+  if (focus) className.push("message--focus");
   const content = mEvent.getContent();
   const eventId = mEvent.getId();
   const msgType = content?.msgtype;
   const senderId = mEvent.getSender();
   let { body } = content;
-  const username = mEvent.sender ? getUsernameOfRoomMember(mEvent.sender) : getUsername(senderId);
-  const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;
-  let isCustomHTML = content.format === 'org.matrix.custom.html';
+  const username = mEvent.sender
+    ? getUsernameOfRoomMember(mEvent.sender)
+    : getUsername(senderId);
+  const avatarSrc =
+    mEvent.sender?.getAvatarUrl(
+      initMatrix.matrixClient.baseUrl,
+      36,
+      36,
+      "crop"
+    ) ?? null;
+  let isCustomHTML = content.format === "org.matrix.custom.html";
   let customHTML = isCustomHTML ? content.formatted_body : null;
 
   const edit = useCallback(() => {
@@ -742,11 +838,12 @@ function Message({
     replyTo(senderId, mEvent.getId(), body, customHTML);
   }, [body, customHTML]);
 
-  if (msgType === 'm.emote') className.push('message--type-emote');
+  if (msgType === "m.emote") className.push("message--type-emote");
 
   const isEdited = roomTimeline ? editedTimeline.has(eventId) : false;
   const haveReactions = roomTimeline
-    ? reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation')
+    ? reactionTimeline.has(eventId) ||
+      !!mEvent.getServerAggregatedRelation("m.annotation")
     : false;
   const isReply = !!mEvent.replyEventId;
 
@@ -761,22 +858,20 @@ function Message({
     customHTML = trimHTMLReply(customHTML);
   }
 
-  if (typeof body !== 'string') body = '';
+  if (typeof body !== "string") body = "";
 
   return (
-    <div className={className.join(' ')}>
-      {
-        isBodyOnly
-          ? <div className="message__avatar-container" />
-          : (
-            <MessageAvatar
-              roomId={roomId}
-              avatarSrc={avatarSrc}
-              userId={senderId}
-              username={username}
-            />
-          )
-      }
+    <div className={className.join(" ")}>
+      {isBodyOnly ? (
+        <div className="message__avatar-container" />
+      ) : (
+        <MessageAvatar
+          roomId={roomId}
+          avatarSrc={avatarSrc}
+          userId={senderId}
+          username={username}
+        />
+      )}
       <div className="message__main-container">
         {!isBodyOnly && (
           <MessageHeader
@@ -796,19 +891,27 @@ function Message({
           <MessageBody
             senderName={username}
             isCustomHTML={isCustomHTML}
-            body={isMedia(mEvent) ? genMediaContent(mEvent) : customHTML ?? body}
+            body={
+              isMedia(mEvent) ? genMediaContent(mEvent) : customHTML ?? body
+            }
             msgType={msgType}
             isEdited={isEdited}
           />
         )}
         {isEdit && (
           <MessageEdit
-            body={(customHTML
-              ? html(customHTML, { kind: 'edit', onlyPlain: true }).plain
-              : plain(body, { kind: 'edit', onlyPlain: true }).plain)}
+            body={
+              customHTML
+                ? html(customHTML, { kind: "edit", onlyPlain: true }).plain
+                : plain(body, { kind: "edit", onlyPlain: true }).plain
+            }
             onSave={(newBody, oldBody) => {
               if (newBody !== oldBody) {
-                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
+                initMatrix.roomsInput.sendEditedMessage(
+                  roomId,
+                  mEvent,
+                  newBody
+                );
               }
               cancelEdit();
             }}
diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 5dda9c98..32f7a104 100644
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -1,7 +1,7 @@
-@use '../../atoms/scroll/scrollbar';
-@use '../../partials/text';
-@use '../../partials/dir';
-@use '../../partials/screen';
+@use "../../atoms/scroll/scrollbar";
+@use "../../partials/text";
+@use "../../partials/dir";
+@use "../../partials/screen";
 
 .message,
 .ph-msg {
@@ -449,11 +449,11 @@
       &:last-child {
         border-width: 0;
         border-bottom-width: 1px;
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           border-width: 0 1px 1px 0;
         }
       }
-      [dir='rtl'] &:first-child {
+      [dir="rtl"] &:first-child {
         border-width: 0;
         border-bottom-width: 1px;
       }
diff --git a/src/app/molecules/message/TimelineChange.jsx b/src/app/molecules/message/TimelineChange.jsx
index bc6e913f..409e660e 100644
--- a/src/app/molecules/message/TimelineChange.jsx
+++ b/src/app/molecules/message/TimelineChange.jsx
@@ -1,36 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './TimelineChange.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./TimelineChange.scss";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Time from '../../atoms/time/Time';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Time from "../../atoms/time/Time";
 
-import JoinArraowIC from '../../../../public/res/ic/outlined/join-arrow.svg';
-import LeaveArraowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import InviteArraowIC from '../../../../public/res/ic/outlined/invite-arrow.svg';
-import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-cancel-arrow.svg';
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import JoinArraowIC from "../../../../public/res/ic/outlined/join-arrow.svg";
+import LeaveArraowIC from "../../../../public/res/ic/outlined/leave-arrow.svg";
+import InviteArraowIC from "../../../../public/res/ic/outlined/invite-arrow.svg";
+import InviteCancelArraowIC from "../../../../public/res/ic/outlined/invite-cancel-arrow.svg";
+import UserIC from "../../../../public/res/ic/outlined/user.svg";
 
-function TimelineChange({
-  variant, content, timestamp, onClick,
-}) {
+function TimelineChange({ variant, content, timestamp, onClick }) {
   let iconSrc;
 
   switch (variant) {
-    case 'join':
+    case "join":
       iconSrc = JoinArraowIC;
       break;
-    case 'leave':
+    case "leave":
       iconSrc = LeaveArraowIC;
       break;
-    case 'invite':
+    case "invite":
       iconSrc = InviteArraowIC;
       break;
-    case 'invite-cancel':
+    case "invite-cancel":
       iconSrc = InviteCancelArraowIC;
       break;
-    case 'avatar':
+    case "avatar":
       iconSrc = UserIC;
       break;
     default:
@@ -39,14 +37,17 @@ function TimelineChange({
   }
 
   return (
-    <button style={{ cursor: onClick === null ? 'default' : 'pointer' }} onClick={onClick} type="button" className="timeline-change">
+    <button
+      style={{ cursor: onClick === null ? "default" : "pointer" }}
+      onClick={onClick}
+      type="button"
+      className="timeline-change"
+    >
       <div className="timeline-change__avatar-container">
         <RawIcon src={iconSrc} size="extra-small" />
       </div>
       <div className="timeline-change__content">
-        <Text variant="b2">
-          {content}
-        </Text>
+        <Text variant="b2">{content}</Text>
       </div>
       <div className="timeline-change__time">
         <Text variant="b3">
@@ -58,19 +59,20 @@ function TimelineChange({
 }
 
 TimelineChange.defaultProps = {
-  variant: 'other',
+  variant: "other",
   onClick: null,
 };
 
 TimelineChange.propTypes = {
   variant: PropTypes.oneOf([
-    'join', 'leave', 'invite',
-    'invite-cancel', 'avatar', 'other',
+    "join",
+    "leave",
+    "invite",
+    "invite-cancel",
+    "avatar",
+    "other",
   ]),
-  content: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node,
-  ]).isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   timestamp: PropTypes.number.isRequired,
   onClick: PropTypes.func,
 };
diff --git a/src/app/molecules/message/TimelineChange.scss b/src/app/molecules/message/TimelineChange.scss
index c066a9ae..33402e58 100644
--- a/src/app/molecules/message/TimelineChange.scss
+++ b/src/app/molecules/message/TimelineChange.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .timeline-change {
   padding: var(--sp-ultra-tight);
@@ -34,4 +34,4 @@
     margin: 0 var(--sp-tight);
     word-break: break-word;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/people-selector/PeopleSelector.jsx b/src/app/molecules/people-selector/PeopleSelector.jsx
index 8ea0587f..da276796 100644
--- a/src/app/molecules/people-selector/PeopleSelector.jsx
+++ b/src/app/molecules/people-selector/PeopleSelector.jsx
@@ -1,28 +1,37 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './PeopleSelector.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./PeopleSelector.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import { blurOnBubbling } from '../../atoms/button/script';
+import { blurOnBubbling } from "../../atoms/button/script";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
 
-function PeopleSelector({
-  avatarSrc, name, color, peopleRole, onClick,
-}) {
+function PeopleSelector({ avatarSrc, name, color, peopleRole, onClick }) {
   return (
     <div className="people-selector__container">
       <button
         className="people-selector"
-        onMouseUp={(e) => blurOnBubbling(e, '.people-selector')}
+        onMouseUp={(e) => blurOnBubbling(e, ".people-selector")}
         onClick={onClick}
         type="button"
       >
-        <Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
-        <Text className="people-selector__name" variant="b1">{twemojify(name)}</Text>
-        {peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
+        <Avatar
+          imageSrc={avatarSrc}
+          text={name}
+          bgColor={color}
+          size="extra-small"
+        />
+        <Text className="people-selector__name" variant="b1">
+          {twemojify(name)}
+        </Text>
+        {peopleRole !== null && (
+          <Text className="people-selector__role" variant="b3">
+            {peopleRole}
+          </Text>
+        )}
       </button>
     </div>
   );
diff --git a/src/app/molecules/people-selector/PeopleSelector.scss b/src/app/molecules/people-selector/PeopleSelector.scss
index 65907e6c..0712e917 100644
--- a/src/app/molecules/people-selector/PeopleSelector.scss
+++ b/src/app/molecules/people-selector/PeopleSelector.scss
@@ -1,4 +1,4 @@
-@use '../../partials/text';
+@use "../../partials/text";
 
 .people-selector {
   width: 100%;
@@ -34,4 +34,4 @@
   &__role {
     color: var(--tc-surface-low);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/popup-window/PopupWindow.jsx b/src/app/molecules/popup-window/PopupWindow.jsx
index 4179f49a..c3628dfc 100644
--- a/src/app/molecules/popup-window/PopupWindow.jsx
+++ b/src/app/molecules/popup-window/PopupWindow.jsx
@@ -1,23 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './PopupWindow.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./PopupWindow.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import RawModal from '../../atoms/modal/RawModal';
+import Text from "../../atoms/text/Text";
+import IconButton from "../../atoms/button/IconButton";
+import { MenuItem } from "../../atoms/context-menu/ContextMenu";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import RawModal from "../../atoms/modal/RawModal";
 
-import ChevronLeftIC from '../../../../public/res/ic/outlined/chevron-left.svg';
+import ChevronLeftIC from "../../../../public/res/ic/outlined/chevron-left.svg";
 
 function PWContentSelector({
-  selected, variant, iconSrc,
-  type, onClick, children,
+  selected,
+  variant,
+  iconSrc,
+  type,
+  onClick,
+  children,
 }) {
-  const pwcsClass = selected ? ' pw-content-selector--selected' : '';
+  const pwcsClass = selected ? " pw-content-selector--selected" : "";
   return (
     <div className={`pw-content-selector${pwcsClass}`}>
       <MenuItem
@@ -34,56 +38,68 @@ function PWContentSelector({
 
 PWContentSelector.defaultProps = {
   selected: false,
-  variant: 'surface',
-  iconSrc: 'none',
-  type: 'button',
+  variant: "surface",
+  iconSrc: "none",
+  type: "button",
 };
 
 PWContentSelector.propTypes = {
   selected: PropTypes.bool,
-  variant: PropTypes.oneOf(['surface', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["surface", "caution", "danger"]),
   iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(["button", "submit"]),
   onClick: PropTypes.func.isRequired,
   children: PropTypes.string.isRequired,
 };
 
 function PopupWindow({
-  className, isOpen, title, contentTitle,
-  drawer, drawerOptions, contentOptions,
-  onAfterClose, onRequestClose, children,
+  className,
+  isOpen,
+  title,
+  contentTitle,
+  drawer,
+  drawerOptions,
+  contentOptions,
+  onAfterClose,
+  onRequestClose,
+  children,
 }) {
   const haveDrawer = drawer !== null;
   const cTitle = contentTitle !== null ? contentTitle : title;
 
   return (
     <RawModal
-      className={`${className === null ? '' : `${className} `}pw-modal`}
+      className={`${className === null ? "" : `${className} `}pw-modal`}
       overlayClassName="pw-modal__overlay"
       isOpen={isOpen}
       onAfterClose={onAfterClose}
       onRequestClose={onRequestClose}
-      size={haveDrawer ? 'large' : 'medium'}
+      size={haveDrawer ? "large" : "medium"}
     >
       <div className="pw">
         {haveDrawer && (
           <div className="pw__drawer">
             <Header>
-              <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
+              <IconButton
+                size="small"
+                src={ChevronLeftIC}
+                onClick={onRequestClose}
+                tooltip="Back"
+              />
               <TitleWrapper>
-                {
-                  typeof title === 'string'
-                    ? <Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
-                    : title
-                }
+                {typeof title === "string" ? (
+                  <Text variant="s1" weight="medium" primary>
+                    {twemojify(title)}
+                  </Text>
+                ) : (
+                  title
+                )}
               </TitleWrapper>
               {drawerOptions}
             </Header>
             <div className="pw__drawer__content__wrapper">
               <ScrollView invisible>
-                <div className="pw__drawer__content">
-                  {drawer}
-                </div>
+                <div className="pw__drawer__content">{drawer}</div>
               </ScrollView>
             </div>
           </div>
@@ -91,19 +107,19 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              {
-                typeof cTitle === 'string'
-                  ? <Text variant="h2" weight="medium" primary>{twemojify(cTitle)}</Text>
-                  : cTitle
-              }
+              {typeof cTitle === "string" ? (
+                <Text variant="h2" weight="medium" primary>
+                  {twemojify(cTitle)}
+                </Text>
+              ) : (
+                cTitle
+              )}
             </TitleWrapper>
             {contentOptions}
           </Header>
           <div className="pw__content__wrapper">
             <ScrollView autoHide>
-              <div className="pw__content-container">
-                {children}
-              </div>
+              <div className="pw__content-container">{children}</div>
             </ScrollView>
           </div>
         </div>
diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss
index 3251b02d..86e2cf87 100644
--- a/src/app/molecules/popup-window/PopupWindow.scss
+++ b/src/app/molecules/popup-window/PopupWindow.scss
@@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use '../../partials/screen';
+@use "../../partials/dir";
+@use "../../partials/screen";
 
 .pw-modal {
   --modal-height: 774px;
@@ -39,7 +39,6 @@
   }
 }
 
-
 .pw__drawer__content,
 .pw__content-container {
   padding-top: var(--sp-extra-tight);
diff --git a/src/app/molecules/power-level-selector/PowerLevelSelector.jsx b/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
index ca3e8417..cfd4f00c 100644
--- a/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
+++ b/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
@@ -1,17 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './PowerLevelSelector.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./PowerLevelSelector.scss";
 
-import IconButton from '../../atoms/button/IconButton';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import IconButton from "../../atoms/button/IconButton";
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
 
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+import CheckIC from "../../../../public/res/ic/outlined/check.svg";
 
-function PowerLevelSelector({
-  value, max, onSelect,
-}) {
+function PowerLevelSelector({ value, max, onSelect }) {
   const handleSubmit = (e) => {
-    const powerLevel = e.target.elements['power-level']?.value;
+    const powerLevel = e.target.elements["power-level"]?.value;
     if (!powerLevel) return;
     onSelect(Number(powerLevel));
   };
@@ -19,7 +17,12 @@ function PowerLevelSelector({
   return (
     <div className="power-level-selector">
       <MenuHeader>Power level selector</MenuHeader>
-      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit(e);
+        }}
+      >
         <input
           className="input"
           defaultValue={value}
@@ -33,9 +36,30 @@ function PowerLevelSelector({
         <IconButton variant="primary" src={CheckIC} type="submit" />
       </form>
       {max >= 0 && <MenuHeader>Presets</MenuHeader>}
-      {max >= 100 && <MenuItem variant={value === 100 ? 'positive' : 'surface'} onClick={() => onSelect(100)}>Admin - 100</MenuItem>}
-      {max >= 50 && <MenuItem variant={value === 50 ? 'positive' : 'surface'} onClick={() => onSelect(50)}>Mod - 50</MenuItem>}
-      {max >= 0 && <MenuItem variant={value === 0 ? 'positive' : 'surface'} onClick={() => onSelect(0)}>Member - 0</MenuItem>}
+      {max >= 100 && (
+        <MenuItem
+          variant={value === 100 ? "positive" : "surface"}
+          onClick={() => onSelect(100)}
+        >
+          Admin - 100
+        </MenuItem>
+      )}
+      {max >= 50 && (
+        <MenuItem
+          variant={value === 50 ? "positive" : "surface"}
+          onClick={() => onSelect(50)}
+        >
+          Mod - 50
+        </MenuItem>
+      )}
+      {max >= 0 && (
+        <MenuItem
+          variant={value === 0 ? "positive" : "surface"}
+          onClick={() => onSelect(0)}
+        >
+          Member - 0
+        </MenuItem>
+      )}
     </div>
   );
 }
diff --git a/src/app/molecules/power-level-selector/PowerLevelSelector.scss b/src/app/molecules/power-level-selector/PowerLevelSelector.scss
index 14a151dd..8980eb8b 100644
--- a/src/app/molecules/power-level-selector/PowerLevelSelector.scss
+++ b/src/app/molecules/power-level-selector/PowerLevelSelector.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .power-level-selector {
   & .context-menu__item .text {
@@ -9,7 +9,7 @@
   & form {
     margin: var(--sp-normal);
     display: flex;
-      
+
     & input {
       @extend .cp-fx__item-one;
       @include dir.side(margin, 0, var(--sp-tight));
@@ -17,4 +17,4 @@
       padding: 9px var(--sp-tight);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-aliases/RoomAliases.jsx b/src/app/molecules/room-aliases/RoomAliases.jsx
index 201c523a..287499dd 100644
--- a/src/app/molecules/room-aliases/RoomAliases.jsx
+++ b/src/app/molecules/room-aliases/RoomAliases.jsx
@@ -1,25 +1,28 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomAliases.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomAliases.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { Debounce } from '../../../util/common';
-import { isRoomAliasAvailable } from '../../../util/matrixUtil';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { Debounce } from "../../../util/common";
+import { isRoomAliasAvailable } from "../../../util/matrixUtil";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Checkbox from '../../atoms/button/Checkbox';
-import Toggle from '../../atoms/button/Toggle';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import Checkbox from "../../atoms/button/Checkbox";
+import Toggle from "../../atoms/button/Toggle";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 function useValidate(hsString) {
   const [debounce] = useState(new Debounce());
-  const [validate, setValidate] = useState({ alias: null, status: cons.status.PRE_FLIGHT });
+  const [validate, setValidate] = useState({
+    alias: null,
+    status: cons.status.PRE_FLIGHT,
+  });
 
   const setValidateToDefault = () => {
     setValidate({
@@ -29,7 +32,7 @@ function useValidate(hsString) {
   };
 
   const checkValueOK = (value) => {
-    if (value.trim() === '') {
+    if (value.trim() === "") {
       setValidateToDefault();
       return false;
     }
@@ -37,7 +40,7 @@ function useValidate(hsString) {
       setValidate({
         alias: null,
         status: cons.status.ERROR,
-        msg: 'Invalid character: only letter, numbers and _- are allowed.',
+        msg: "Invalid character: only letter, numbers and _- are allowed.",
       });
       return false;
     }
@@ -70,7 +73,9 @@ function useValidate(hsString) {
         return {
           alias,
           status: isValid ? cons.status.SUCCESS : cons.status.ERROR,
-          msg: isValid ? `${alias} is available.` : `${alias} is already in use.`,
+          msg: isValid
+            ? `${alias} is available.`
+            : `${alias} is already in use.`,
         };
       });
     }, 600)();
@@ -98,7 +103,7 @@ function RoomAliases({ roomId }) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
   const userId = mx.getUserId();
-  const hsString = userId.slice(userId.indexOf(':') + 1);
+  const hsString = userId.slice(userId.indexOf(":") + 1);
 
   const isMountedStore = useStore();
   const [isPublic, setIsPublic] = useState(false);
@@ -106,9 +111,13 @@ function RoomAliases({ roomId }) {
   const [aliases, setAliases] = useState(getAliases(roomId));
   const [selectedAlias, setSelectedAlias] = useState(null);
   const [deleteAlias, setDeleteAlias] = useState(null);
-  const [validate, setValidateToDefault, handleAliasChange] = useValidate(hsString);
+  const [validate, setValidateToDefault, handleAliasChange] =
+    useValidate(hsString);
 
-  const canPublishAlias = room.currentState.maySendStateEvent('m.room.canonical_alias', userId);
+  const canPublishAlias = room.currentState.maySendStateEvent(
+    "m.room.canonical_alias",
+    userId
+  );
 
   useEffect(() => isMountedStore.setItem(true), []);
 
@@ -119,7 +128,9 @@ function RoomAliases({ roomId }) {
       let local = [];
       try {
         const result = await mx.getLocalAliases(roomId);
-        local = result.aliases.filter((alias) => !aliases.published.includes(alias));
+        local = result.aliases.filter(
+          (alias) => !aliases.published.includes(alias)
+        );
       } catch {
         local = [];
       }
@@ -131,7 +142,7 @@ function RoomAliases({ roomId }) {
     const loadVisibility = async () => {
       const result = await mx.getRoomDirectoryVisibility(roomId);
       if (isUnmounted) return;
-      setIsPublic(result.visibility === 'public');
+      setIsPublic(result.visibility === "public");
     };
     loadLocalAliases();
     loadVisibility();
@@ -141,7 +152,7 @@ function RoomAliases({ roomId }) {
   }, [roomId]);
 
   const toggleDirectoryVisibility = () => {
-    mx.setRoomDirectoryVisibility(roomId, isPublic ? 'private' : 'public');
+    mx.setRoomDirectoryVisibility(roomId, isPublic ? "private" : "public");
     setIsPublic(!isPublic);
   };
 
@@ -151,8 +162,8 @@ function RoomAliases({ roomId }) {
     if (!validate.alias) return;
 
     const { alias } = validate;
-    const aliasInput = e.target.elements['alias-input'];
-    aliasInput.value = '';
+    const aliasInput = e.target.elements["alias-input"];
+    aliasInput.value = "";
     setValidateToDefault();
 
     try {
@@ -180,7 +191,7 @@ function RoomAliases({ roomId }) {
     if (!published.includes(aliases)) {
       published.push(alias);
       local = local.filter((al) => al !== alias);
-      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
+      mx.sendStateEvent(roomId, "m.room.canonical_alias", {
         alias: main,
         alt_aliases: published.filter((al) => al !== main),
       });
@@ -197,7 +208,7 @@ function RoomAliases({ roomId }) {
       if (main === alias) main = null;
       published = published.filter((al) => al !== alias);
       local.push(alias);
-      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
+      mx.sendStateEvent(roomId, "m.room.canonical_alias", {
         alias: main,
         alt_aliases: published.filter((al) => al !== main),
       });
@@ -214,7 +225,7 @@ function RoomAliases({ roomId }) {
       main = alias;
       if (!published.includes(alias)) published.splice(0, 0, alias);
       local = local.filter((al) => al !== alias);
-      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
+      mx.sendStateEvent(roomId, "m.room.canonical_alias", {
         alias: main,
         alt_aliases: published.filter((al) => al !== main),
       });
@@ -225,7 +236,11 @@ function RoomAliases({ roomId }) {
 
   const handleDeleteAlias = async (alias) => {
     try {
-      setDeleteAlias({ alias, status: cons.status.IN_FLIGHT, msg: 'deleting...' });
+      setDeleteAlias({
+        alias,
+        status: cons.status.IN_FLIGHT,
+        msg: "deleting...",
+      });
       await mx.deleteAlias(alias);
       let { main, published, local } = aliases;
       if (published.includes(alias)) {
@@ -251,7 +266,11 @@ function RoomAliases({ roomId }) {
       return (
         <div className="room-aliases__item-btns">
           <Text variant="b2">
-            <span style={{ color: isError ? 'var(--tc-danger-high' : 'inherit' }}>{deleteAlias.msg}</span>
+            <span
+              style={{ color: isError ? "var(--tc-danger-high" : "inherit" }}
+            >
+              {deleteAlias.msg}
+            </span>
           </Text>
         </div>
       );
@@ -259,10 +278,24 @@ function RoomAliases({ roomId }) {
 
     return (
       <div className="room-aliases__item-btns">
-        {canPublishAlias && !isMain && <Button onClick={() => handleSetMainAlias(alias)} variant="primary">Set as Main</Button>}
-        {!isPublished && canPublishAlias && <Button onClick={() => handlePublishAlias(alias)} variant="positive">Publish</Button>}
-        {isPublished && canPublishAlias && <Button onClick={() => handleUnPublishAlias(alias)} variant="caution">Un-Publish</Button>}
-        <Button onClick={() => handleDeleteAlias(alias)} variant="danger">Delete</Button>
+        {canPublishAlias && !isMain && (
+          <Button onClick={() => handleSetMainAlias(alias)} variant="primary">
+            Set as Main
+          </Button>
+        )}
+        {!isPublished && canPublishAlias && (
+          <Button onClick={() => handlePublishAlias(alias)} variant="positive">
+            Publish
+          </Button>
+        )}
+        {isPublished && canPublishAlias && (
+          <Button onClick={() => handleUnPublishAlias(alias)} variant="caution">
+            Un-Publish
+          </Button>
+        )}
+        <Button onClick={() => handleDeleteAlias(alias)} variant="danger">
+          Delete
+        </Button>
       </div>
     );
   };
@@ -275,7 +308,12 @@ function RoomAliases({ roomId }) {
     return (
       <React.Fragment key={`${alias}-wrapper`}>
         <div className="room-aliases__alias-item" key={alias}>
-          <Checkbox variant="positive" disabled={disabled} isActive={isActive} onToggle={() => handleAliasSelect(alias)} />
+          <Checkbox
+            variant="positive"
+            disabled={disabled}
+            isActive={isActive}
+            onToggle={() => handleAliasSelect(alias)}
+          />
           <Text>
             {alias}
             {isMain && <span>Main</span>}
@@ -286,63 +324,95 @@ function RoomAliases({ roomId }) {
     );
   };
 
-  let inputState = 'normal';
-  if (validate.status === cons.status.ERROR) inputState = 'error';
-  if (validate.status === cons.status.SUCCESS) inputState = 'success';
+  let inputState = "normal";
+  if (validate.status === cons.status.ERROR) inputState = "error";
+  if (validate.status === cons.status.SUCCESS) inputState = "success";
   return (
     <div className="room-aliases">
       <SettingTile
         title="Publish to room directory"
-        content={<Text variant="b3">{`Publish this ${room.isSpaceRoom() ? 'space' : 'room'} to the ${hsString}'s public room directory?`}</Text>}
-        options={(
+        content={
+          <Text variant="b3">{`Publish this ${
+            room.isSpaceRoom() ? "space" : "room"
+          } to the ${hsString}'s public room directory?`}</Text>
+        }
+        options={
           <Toggle
             isActive={isPublic}
             onToggle={toggleDirectoryVisibility}
             disabled={!canPublishAlias}
           />
-        )}
+        }
       />
 
       <div className="room-aliases__content">
         <MenuHeader>Published addresses</MenuHeader>
-        {(aliases.published.length === 0) && <Text className="room-aliases__message">No published addresses</Text>}
-        {(aliases.published.length > 0 && !aliases.main) && <Text className="room-aliases__message">No Main address (select one from below)</Text>}
+        {aliases.published.length === 0 && (
+          <Text className="room-aliases__message">No published addresses</Text>
+        )}
+        {aliases.published.length > 0 && !aliases.main && (
+          <Text className="room-aliases__message">
+            No Main address (select one from below)
+          </Text>
+        )}
         {aliases.published.map(renderAlias)}
         <Text className="room-aliases__message" variant="b3">
-          {`Published addresses can be used by anyone on any server to join your ${room.isSpaceRoom() ? 'space' : 'room'}. To publish an address, it needs to be set as a local address first.`}
+          {`Published addresses can be used by anyone on any server to join your ${
+            room.isSpaceRoom() ? "space" : "room"
+          }. To publish an address, it needs to be set as a local address first.`}
         </Text>
       </div>
-      { isLocalVisible && (
+      {isLocalVisible && (
         <div className="room-aliases__content">
           <MenuHeader>Local addresses</MenuHeader>
-          {(aliases.local.length === 0) && <Text className="room-aliases__message">No local addresses</Text>}
+          {aliases.local.length === 0 && (
+            <Text className="room-aliases__message">No local addresses</Text>
+          )}
           {aliases.local.map(renderAlias)}
           <Text className="room-aliases__message" variant="b3">
-            {`Set local addresses for this ${room.isSpaceRoom() ? 'space' : 'room'} so users can find this ${room.isSpaceRoom() ? 'space' : 'room'} through your homeserver.`}
+            {`Set local addresses for this ${
+              room.isSpaceRoom() ? "space" : "room"
+            } so users can find this ${
+              room.isSpaceRoom() ? "space" : "room"
+            } through your homeserver.`}
           </Text>
 
-          <Text className="room-aliases__form-label" variant="b2">Add local address</Text>
+          <Text className="room-aliases__form-label" variant="b2">
+            Add local address
+          </Text>
           <form className="room-aliases__form" onSubmit={handleAliasSubmit}>
             <div className="room-aliases__input-wrapper">
               <Input
                 name="alias-input"
                 state={inputState}
                 onChange={handleAliasChange}
-                placeholder={`my_${room.isSpaceRoom() ? 'space' : 'room'}_address`}
+                placeholder={`my_${
+                  room.isSpaceRoom() ? "space" : "room"
+                }_address`}
                 required
               />
             </div>
-            <Button variant="primary" type="submit">Add</Button>
+            <Button variant="primary" type="submit">
+              Add
+            </Button>
           </form>
           <div className="room-aliases__input-status">
-            {validate.status === cons.status.SUCCESS && <Text className="room-aliases__valid" variant="b2">{validate.msg}</Text>}
-            {validate.status === cons.status.ERROR && <Text className="room-aliases__invalid" variant="b2">{validate.msg}</Text>}
+            {validate.status === cons.status.SUCCESS && (
+              <Text className="room-aliases__valid" variant="b2">
+                {validate.msg}
+              </Text>
+            )}
+            {validate.status === cons.status.ERROR && (
+              <Text className="room-aliases__invalid" variant="b2">
+                {validate.msg}
+              </Text>
+            )}
           </div>
         </div>
       )}
       <div className="room-aliases__content">
         <Button onClick={() => setIsLocalVisible(!isLocalVisible)}>
-          {`${isLocalVisible ? 'Hide' : 'Add / View'} local address`}
+          {`${isLocalVisible ? "Hide" : "Add / View"} local address`}
         </Button>
       </div>
     </div>
diff --git a/src/app/molecules/room-aliases/RoomAliases.scss b/src/app/molecules/room-aliases/RoomAliases.scss
index b0df6147..2b8c0ab0 100644
--- a/src/app/molecules/room-aliases/RoomAliases.scss
+++ b/src/app/molecules/room-aliases/RoomAliases.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .room-aliases {
   &__message,
@@ -15,7 +15,7 @@
     padding: var(--sp-extra-tight) var(--sp-normal);
     @extend .cp-fx__row--s-c;
     &.checkbox {
-      @include dir.side(margin, 0 , var(--sp-tight));
+      @include dir.side(margin, 0, var(--sp-tight));
     }
     & .text {
       @extend .cp-fx__item-one;
@@ -50,7 +50,7 @@
       margin: 0 var(--sp-normal);
     }
   }
-  
+
   &__form {
     padding: var(--sp-normal);
     padding-top: 0;
@@ -59,12 +59,12 @@
       padding: var(--sp-normal) var(--sp-normal) var(--sp-ultra-tight);
     }
   }
-  
+
   &__input-wrapper {
     display: flex;
     @extend .cp-fx__item-one;
     @include dir.side(margin, 0, var(--sp-tight));
-    
+
     & .input-container {
       @extend .cp-fx__item-one;
     }
@@ -81,4 +81,4 @@
     color: var(--tc-danger-high);
     padding-bottom: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-emojis/RoomEmojis.jsx b/src/app/molecules/room-emojis/RoomEmojis.jsx
index 81cee0a8..555c70c7 100644
--- a/src/app/molecules/room-emojis/RoomEmojis.jsx
+++ b/src/app/molecules/room-emojis/RoomEmojis.jsx
@@ -1,24 +1,24 @@
-import React, { useReducer, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomEmojis.scss';
+import React, { useReducer, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomEmojis.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { suffixRename } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { suffixRename } from "../../../util/common";
 
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import Text from '../../atoms/text/Text';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import ImagePack from '../image-pack/ImagePack';
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import Text from "../../atoms/text/Text";
+import Input from "../../atoms/input/Input";
+import Button from "../../atoms/button/Button";
+import ImagePack from "../image-pack/ImagePack";
 
 function useRoomPacks(room) {
   const mx = initMatrix.matrixClient;
   const [, forceUpdate] = useReducer((count) => count + 1, 0);
 
-  const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
+  const packEvents = room.currentState.getStateEvents("im.ponies.room_emotes");
   const unUsablePacks = [];
   const usablePacks = packEvents.filter((mEvent) => {
-    if (typeof mEvent.getContent()?.images !== 'object') {
+    if (typeof mEvent.getContent()?.images !== "object") {
       unUsablePacks.push(mEvent);
       return false;
     }
@@ -28,43 +28,46 @@ function useRoomPacks(room) {
   useEffect(() => {
     const handleEvent = (event, state, prevEvent) => {
       if (event.getRoomId() !== room.roomId) return;
-      if (event.getType() !== 'im.ponies.room_emotes') return;
+      if (event.getType() !== "im.ponies.room_emotes") return;
       if (!prevEvent?.getContent()?.images || !event.getContent().images) {
         forceUpdate();
       }
     };
 
-    mx.on('RoomState.events', handleEvent);
+    mx.on("RoomState.events", handleEvent);
     return () => {
-      mx.removeListener('RoomState.events', handleEvent);
+      mx.removeListener("RoomState.events", handleEvent);
     };
   }, [room, mx]);
 
-  const isStateKeyAvailable = (key) => !room.currentState.getStateEvents('im.ponies.room_emotes', key);
+  const isStateKeyAvailable = (key) =>
+    !room.currentState.getStateEvents("im.ponies.room_emotes", key);
 
   const createPack = async (name) => {
     const packContent = {
       pack: { display_name: name },
       images: {},
     };
-    let stateKey = '';
+    let stateKey = "";
     if (unUsablePacks.length > 0) {
       const mEvent = unUsablePacks[0];
       stateKey = mEvent.getStateKey();
     } else {
-      stateKey = packContent.pack.display_name.replace(/\s/g, '-');
+      stateKey = packContent.pack.display_name.replace(/\s/g, "-");
       if (!isStateKeyAvailable(stateKey)) {
-        stateKey = suffixRename(
-          stateKey,
-          isStateKeyAvailable,
-        );
+        stateKey = suffixRename(stateKey, isStateKeyAvailable);
       }
     }
-    await mx.sendStateEvent(room.roomId, 'im.ponies.room_emotes', packContent, stateKey);
+    await mx.sendStateEvent(
+      room.roomId,
+      "im.ponies.room_emotes",
+      packContent,
+      stateKey
+    );
   };
 
   const deletePack = async (stateKey) => {
-    await mx.sendStateEvent(room.roomId, 'im.ponies.room_emotes', {}, stateKey);
+    await mx.sendStateEvent(room.roomId, "im.ponies.room_emotes", {}, stateKey);
   };
 
   return {
@@ -81,44 +84,50 @@ function RoomEmojis({ roomId }) {
   const { usablePacks, createPack, deletePack } = useRoomPacks(room);
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room.currentState.hasSufficientPowerLevelFor(
+    "state_default",
+    myPowerlevel
+  );
 
   const handlePackCreate = (e) => {
     e.preventDefault();
     const { nameInput } = e.target;
     const name = nameInput.value.trim();
-    if (name === '') return;
-    nameInput.value = '';
+    if (name === "") return;
+    nameInput.value = "";
 
     createPack(name);
   };
 
   return (
     <div className="room-emojis">
-      { canChange && (
+      {canChange && (
         <div className="room-emojis__add-pack">
           <MenuHeader>Create Pack</MenuHeader>
           <form onSubmit={handlePackCreate}>
             <Input name="nameInput" placeholder="Pack Name" required />
-            <Button variant="primary" type="submit">Create pack</Button>
+            <Button variant="primary" type="submit">
+              Create pack
+            </Button>
           </form>
         </div>
       )}
-      {
-        usablePacks.length > 0
-          ? usablePacks.reverse().map((mEvent) => (
+      {usablePacks.length > 0 ? (
+        usablePacks
+          .reverse()
+          .map((mEvent) => (
             <ImagePack
               key={mEvent.getId()}
               roomId={roomId}
               stateKey={mEvent.getStateKey()}
               handlePackDelete={canChange ? deletePack : undefined}
             />
-          )) : (
-            <div className="room-emojis__empty">
-              <Text>No emoji or sticker pack.</Text>
-            </div>
-          )
-      }
+          ))
+      ) : (
+        <div className="room-emojis__empty">
+          <Text>No emoji or sticker pack.</Text>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/molecules/room-emojis/RoomEmojis.scss b/src/app/molecules/room-emojis/RoomEmojis.scss
index 7ba2b494..06c172f8 100644
--- a/src/app/molecules/room-emojis/RoomEmojis.scss
+++ b/src/app/molecules/room-emojis/RoomEmojis.scss
@@ -7,7 +7,7 @@
     border-radius: var(--bo-radius);
     box-shadow: var(--bs-surface-border);
     overflow: hidden;
-  
+
     & > .context-menu__header:first-child {
       margin-top: 2px;
     }
@@ -26,4 +26,4 @@
     padding: var(--sp-extra-loose) var(--sp-normal);
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-encryption/RoomEncryption.jsx b/src/app/molecules/room-encryption/RoomEncryption.jsx
index 1657f363..914f60de 100644
--- a/src/app/molecules/room-encryption/RoomEncryption.jsx
+++ b/src/app/molecules/room-encryption/RoomEncryption.jsx
@@ -1,35 +1,49 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './RoomEncryption.scss';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./RoomEncryption.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
 
-import Text from '../../atoms/text/Text';
-import Toggle from '../../atoms/button/Toggle';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Toggle from "../../atoms/button/Toggle";
+import SettingTile from "../setting-tile/SettingTile";
 
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
 
 function RoomEncryption({ roomId }) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
-  const encryptionEvents = room.currentState.getStateEvents('m.room.encryption');
+  const encryptionEvents =
+    room.currentState.getStateEvents("m.room.encryption");
   const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
-  const canEnableEncryption = room.currentState.maySendStateEvent('m.room.encryption', mx.getUserId());
+  const canEnableEncryption = room.currentState.maySendStateEvent(
+    "m.room.encryption",
+    mx.getUserId()
+  );
 
   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';
+    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";
 
-    const isConfirmed1 = (joinRule === 'public')
-      ? await confirmDialog('Enable encryption', confirmMsg1, 'Continue', 'caution')
-      : true;
+    const isConfirmed1 =
+      joinRule === "public"
+        ? await confirmDialog(
+            "Enable encryption",
+            confirmMsg1,
+            "Continue",
+            "caution"
+          )
+        : true;
     if (!isConfirmed1) return;
-    if (await confirmDialog('Enable encryption', confirmMsg2, 'Enable', 'caution')) {
+    if (
+      await confirmDialog("Enable encryption", confirmMsg2, "Enable", "caution")
+    ) {
       setIsEncrypted(true);
-      mx.sendStateEvent(roomId, 'm.room.encryption', {
-        algorithm: 'm.megolm.v1.aes-sha2',
+      mx.sendStateEvent(roomId, "m.room.encryption", {
+        algorithm: "m.megolm.v1.aes-sha2",
       });
     }
   };
@@ -38,16 +52,16 @@ function RoomEncryption({ roomId }) {
     <div className="room-encryption">
       <SettingTile
         title="Enable room encryption"
-        content={(
+        content={
           <Text variant="b3">Once enabled, encryption cannot be disabled.</Text>
-        )}
-        options={(
+        }
+        options={
           <Toggle
             isActive={isEncrypted}
             onToggle={handleEncryptionEnable}
             disabled={isEncrypted || !canEnableEncryption}
           />
-        )}
+        }
       />
     </div>
   );
diff --git a/src/app/molecules/room-encryption/RoomEncryption.scss b/src/app/molecules/room-encryption/RoomEncryption.scss
index 1c521f49..f02e28ee 100644
--- a/src/app/molecules/room-encryption/RoomEncryption.scss
+++ b/src/app/molecules/room-encryption/RoomEncryption.scss
@@ -2,4 +2,4 @@
   & .setting-tile {
     margin: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx b/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx
index 6a72a99b..fed85a4f 100644
--- a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx
+++ b/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx
@@ -1,47 +1,49 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import './RoomHistoryVisibility.scss';
+import React, { useState, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import "./RoomHistoryVisibility.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
 
-import Text from '../../atoms/text/Text';
-import RadioButton from '../../atoms/button/RadioButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import Text from "../../atoms/text/Text";
+import RadioButton from "../../atoms/button/RadioButton";
+import { MenuItem } from "../../atoms/context-menu/ContextMenu";
 
 const visibility = {
-  WORLD_READABLE: 'world_readable',
-  SHARED: 'shared',
-  INVITED: 'invited',
-  JOINED: 'joined',
+  WORLD_READABLE: "world_readable",
+  SHARED: "shared",
+  INVITED: "invited",
+  JOINED: "joined",
 };
 
-const items = [{
-  iconSrc: null,
-  text: 'Anyone (including guests)',
-  type: visibility.WORLD_READABLE,
-}, {
-  iconSrc: null,
-  text: 'Members (all messages)',
-  type: visibility.SHARED,
-}, {
-  iconSrc: null,
-  text: 'Members (messages after invite)',
-  type: visibility.INVITED,
-}, {
-  iconSrc: null,
-  text: 'Members (messages after join)',
-  type: visibility.JOINED,
-}];
+const items = [
+  {
+    iconSrc: null,
+    text: "Anyone (including guests)",
+    type: visibility.WORLD_READABLE,
+  },
+  {
+    iconSrc: null,
+    text: "Members (all messages)",
+    type: visibility.SHARED,
+  },
+  {
+    iconSrc: null,
+    text: "Members (messages after invite)",
+    type: visibility.INVITED,
+  },
+  {
+    iconSrc: null,
+    text: "Members (messages after join)",
+    type: visibility.JOINED,
+  },
+];
 
 function setHistoryVisibility(roomId, type) {
   const mx = initMatrix.matrixClient;
 
-  return mx.sendStateEvent(
-    roomId, 'm.room.history_visibility',
-    {
-      history_visibility: type,
-    },
-  );
+  return mx.sendStateEvent(roomId, "m.room.history_visibility", {
+    history_visibility: type,
+  });
 }
 
 function useVisibility(roomId) {
@@ -51,11 +53,14 @@ function useVisibility(roomId) {
   const [activeType, setActiveType] = useState(room.getHistoryVisibility());
   useEffect(() => setActiveType(room.getHistoryVisibility()), [roomId]);
 
-  const setVisibility = useCallback((item) => {
-    if (item.type === activeType.type) return;
-    setActiveType(item.type);
-    setHistoryVisibility(roomId, item.type);
-  }, [activeType, roomId]);
+  const setVisibility = useCallback(
+    (item) => {
+      if (item.type === activeType.type) return;
+      setActiveType(item.type);
+      setHistoryVisibility(roomId, item.type);
+    },
+    [activeType, roomId]
+  );
 
   return [activeType, setVisibility];
 }
@@ -67,27 +72,31 @@ function RoomHistoryVisibility({ roomId }) {
   const room = mx.getRoom(roomId);
   const { currentState } = room;
 
-  const canChange = currentState.maySendStateEvent('m.room.history_visibility', userId);
+  const canChange = currentState.maySendStateEvent(
+    "m.room.history_visibility",
+    userId
+  );
 
   return (
     <div className="room-history-visibility">
-      {
-        items.map((item) => (
-          <MenuItem
-            variant={activeType === item.type ? 'positive' : 'surface'}
-            key={item.type}
-            iconSrc={item.iconSrc}
-            onClick={() => setVisibility(item)}
-            disabled={(!canChange)}
-          >
-            <Text varient="b1">
-              <span>{item.text}</span>
-              <RadioButton isActive={activeType === item.type} />
-            </Text>
-          </MenuItem>
-        ))
-      }
-      <Text variant="b3">Changes to history visibility will only apply to future messages. The visibility of existing history will have no effect.</Text>
+      {items.map((item) => (
+        <MenuItem
+          variant={activeType === item.type ? "positive" : "surface"}
+          key={item.type}
+          iconSrc={item.iconSrc}
+          onClick={() => setVisibility(item)}
+          disabled={!canChange}
+        >
+          <Text varient="b1">
+            <span>{item.text}</span>
+            <RadioButton isActive={activeType === item.type} />
+          </Text>
+        </MenuItem>
+      ))}
+      <Text variant="b3">
+        Changes to history visibility will only apply to future messages. The
+        visibility of existing history will have no effect.
+      </Text>
     </div>
   );
 }
diff --git a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss b/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss
index b9e0a2c6..73e7096d 100644
--- a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss
+++ b/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss
@@ -1,18 +1,18 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .room-history-visibility {
   & .context-menu__item .text {
     margin: 0 !important;
     @extend .cp-fx__item-one;
     @extend .cp-fx__row--s-c;
-    
+
     & span:first-child {
       @extend .cp-fx__item-one;
       @extend .cp-txt__ellipsis;
     }
-    
+
     & .radio-btn {
       @include dir.side(margin, var(--sp-tight), 0);
     }
@@ -22,4 +22,4 @@
     margin: var(--sp-normal);
     margin-top: var(--sp-ultra-tight);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-intro/RoomIntro.jsx b/src/app/molecules/room-intro/RoomIntro.jsx
index 2ec46cb1..aeab731a 100644
--- a/src/app/molecules/room-intro/RoomIntro.jsx
+++ b/src/app/molecules/room-intro/RoomIntro.jsx
@@ -1,22 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RoomIntro.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RoomIntro.scss";
 
-import colorMXID from '../../../util/colorMXID';
+import colorMXID from "../../../util/colorMXID";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
 
-function RoomIntro({
-  roomId, avatarSrc, name, heading, desc, time,
-}) {
+function RoomIntro({ roomId, avatarSrc, name, heading, desc, time }) {
   return (
     <div className="room-intro">
-      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
+      <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>{heading}</Text>
-        <Text className="room-intro__desc" variant="b1">{desc}</Text>
-        { time !== null && <Text className="room-intro__time" variant="b3">{time}</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>
   );
@@ -29,10 +40,7 @@ RoomIntro.defaultProps = {
 
 RoomIntro.propTypes = {
   roomId: PropTypes.string.isRequired,
-  avatarSrc: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
+  avatarSrc: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   name: PropTypes.string.isRequired,
   heading: PropTypes.node.isRequired,
   desc: PropTypes.node.isRequired,
diff --git a/src/app/molecules/room-intro/RoomIntro.scss b/src/app/molecules/room-intro/RoomIntro.scss
index 7e80249a..635ae087 100644
--- a/src/app/molecules/room-intro/RoomIntro.scss
+++ b/src/app/molecules/room-intro/RoomIntro.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
@@ -23,4 +23,4 @@
   &__time {
     color: var(--tc-surface-low);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-members/RoomMembers.jsx b/src/app/molecules/room-members/RoomMembers.jsx
index f931f9dd..80fdcbba 100644
--- a/src/app/molecules/room-members/RoomMembers.jsx
+++ b/src/app/molecules/room-members/RoomMembers.jsx
@@ -1,22 +1,23 @@
-import React, {
-  useState, useEffect, useCallback,
-} from 'react';
-import PropTypes from 'prop-types';
-import './RoomMembers.scss';
+import React, { useState, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import "./RoomMembers.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import colorMXID from '../../../util/colorMXID';
-import { openProfileViewer } from '../../../client/action/navigation';
-import { getUsernameOfRoomMember, getPowerLabel } from '../../../util/matrixUtil';
-import AsyncSearch from '../../../util/AsyncSearch';
-import { memberByAtoZ, memberByPowerLevel } from '../../../util/sort';
+import initMatrix from "../../../client/initMatrix";
+import colorMXID from "../../../util/colorMXID";
+import { openProfileViewer } from "../../../client/action/navigation";
+import {
+  getUsernameOfRoomMember,
+  getPowerLabel,
+} from "../../../util/matrixUtil";
+import AsyncSearch from "../../../util/AsyncSearch";
+import { memberByAtoZ, memberByPowerLevel } from "../../../util/sort";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
-import PeopleSelector from '../people-selector/PeopleSelector';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SegmentedControls from "../../atoms/segmented-controls/SegmentedControls";
+import PeopleSelector from "../people-selector/PeopleSelector";
 
 const PER_PAGE_MEMBER = 50;
 
@@ -25,8 +26,8 @@ function normalizeMembers(members) {
   return members.map((member) => ({
     userId: member.userId,
     name: getUsernameOfRoomMember(member),
-    username: member.userId.slice(1, member.userId.indexOf(':')),
-    avatarSrc: member.getAvatarUrl(mx.baseUrl, 24, 24, 'crop'),
+    username: member.userId.slice(1, member.userId.indexOf(":")),
+    avatarSrc: member.getAvatarUrl(mx.baseUrl, 24, 24, "crop"),
     peopleRole: getPowerLabel(member.powerLevel),
     powerLevel: members.powerLevel,
   }));
@@ -45,8 +46,10 @@ function useMemberOfMembership(roomId, membership) {
       if (isLoadingMembers) return;
       if (event && event?.getRoomId() !== roomId) return;
       const memberOfMembership = normalizeMembers(
-        room.getMembersWithMembership(membership)
-          .sort(memberByAtoZ).sort(memberByPowerLevel),
+        room
+          .getMembersWithMembership(membership)
+          .sort(memberByAtoZ)
+          .sort(memberByPowerLevel)
       );
       setMembers(memberOfMembership);
     };
@@ -59,12 +62,12 @@ function useMemberOfMembership(roomId, membership) {
       updateMemberList();
     });
 
-    mx.on('RoomMember.membership', updateMemberList);
-    mx.on('RoomMember.powerLevel', updateMemberList);
+    mx.on("RoomMember.membership", updateMemberList);
+    mx.on("RoomMember.powerLevel", updateMemberList);
     return () => {
       isMounted = false;
-      mx.removeListener('RoomMember.membership', updateMemberList);
-      mx.removeListener('RoomMember.powerLevel', updateMemberList);
+      mx.removeListener("RoomMember.membership", updateMemberList);
+      mx.removeListener("RoomMember.powerLevel", updateMemberList);
     };
   }, [membership]);
 
@@ -83,7 +86,7 @@ function useSearchMembers(members) {
 
   useEffect(() => {
     asyncSearch.setup(members, {
-      keys: ['name', 'username', 'userId'],
+      keys: ["name", "username", "userId"],
       limit: PER_PAGE_MEMBER,
     });
     reSearch();
@@ -99,7 +102,7 @@ function useSearchMembers(members) {
 
   const handleSearch = (e) => {
     const term = e.target.value;
-    if (term === '' || term === undefined) {
+    if (term === "" || term === undefined) {
       setSearchMembers(null);
     } else asyncSearch.search(term);
   };
@@ -109,7 +112,7 @@ function useSearchMembers(members) {
 
 function RoomMembers({ roomId }) {
   const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
-  const [membership, setMembership] = useState('join');
+  const [membership, setMembership] = useState("join");
   const [members] = useMemberOfMembership(roomId, membership);
   const [searchMembers, handleSearch] = useSearchMembers(members);
 
@@ -121,27 +124,29 @@ function RoomMembers({ roomId }) {
     setItemCount(itemCount + PER_PAGE_MEMBER);
   };
 
-  const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount);
+  const mList = searchMembers
+    ? searchMembers.data
+    : members.slice(0, itemCount);
   return (
     <div className="room-members">
       <MenuHeader>Search member</MenuHeader>
-      <Input
-        onChange={handleSearch}
-        placeholder="Search for name"
-        autoFocus
-      />
+      <Input onChange={handleSearch} placeholder="Search for name" autoFocus />
       <div className="room-members__header">
-        <MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader>
+        <MenuHeader>{`${
+          searchMembers ? `Found — ${mList.length}` : members.length
+        } members`}</MenuHeader>
         <SegmentedControls
-          selected={
-            (() => {
-              const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
-              return getSegmentIndex[membership];
-            })()
-          }
-          segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
+          selected={(() => {
+            const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
+            return getSegmentIndex[membership];
+          })()}
+          segments={[
+            { text: "Joined" },
+            { text: "Invited" },
+            { text: "Banned" },
+          ]}
           onSelect={(index) => {
-            const memberships = ['join', 'invite', 'ban'];
+            const memberships = ["join", "invite", "ban"];
             setMembership(memberships[index]);
           }}
         />
@@ -157,22 +162,20 @@ function RoomMembers({ roomId }) {
             peopleRole={member.peopleRole}
           />
         ))}
-        {
-          (searchMembers?.data.length === 0 || members.length === 0)
-          && (
-            <div className="room-members__status">
-              <Text variant="b2">
-                {searchMembers ? `No results found for "${searchMembers.term}"` : 'No members to display'}
-              </Text>
-            </div>
-          )
-        }
-        {
-          mList.length !== 0
-          && members.length > itemCount
-          && searchMembers === null
-          && <Button onClick={loadMorePeople}>View more</Button>
-        }
+        {(searchMembers?.data.length === 0 || members.length === 0) && (
+          <div className="room-members__status">
+            <Text variant="b2">
+              {searchMembers
+                ? `No results found for "${searchMembers.term}"`
+                : "No members to display"}
+            </Text>
+          </div>
+        )}
+        {mList.length !== 0 &&
+          members.length > itemCount &&
+          searchMembers === null && (
+            <Button onClick={loadMorePeople}>View more</Button>
+          )}
       </div>
     </div>
   );
diff --git a/src/app/molecules/room-members/RoomMembers.scss b/src/app/molecules/room-members/RoomMembers.scss
index 4715508e..778ad4b0 100644
--- a/src/app/molecules/room-members/RoomMembers.scss
+++ b/src/app/molecules/room-members/RoomMembers.scss
@@ -1,10 +1,10 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .room-members {
   & .input-container {
     margin: var(--sp-normal);
-  } 
+  }
 
   &__header {
     display: flex;
@@ -23,7 +23,6 @@
     }
   }
   &__list {
-    
     & .people-selector__container:last-child {
       margin-bottom: var(--sp-extra-tight);
     }
@@ -32,8 +31,8 @@
       margin: var(--sp-normal);
     }
   }
-  
+
   &__status {
     margin: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-notification/RoomNotification.jsx b/src/app/molecules/room-notification/RoomNotification.jsx
index 1c088e5f..2acc646c 100644
--- a/src/app/molecules/room-notification/RoomNotification.jsx
+++ b/src/app/molecules/room-notification/RoomNotification.jsx
@@ -1,43 +1,48 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import './RoomNotification.scss';
+import React, { useState, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import "./RoomNotification.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
 
-import Text from '../../atoms/text/Text';
-import RadioButton from '../../atoms/button/RadioButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import Text from "../../atoms/text/Text";
+import RadioButton from "../../atoms/button/RadioButton";
+import { MenuItem } from "../../atoms/context-menu/ContextMenu";
 
-import BellIC from '../../../../public/res/ic/outlined/bell.svg';
-import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
-import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
-import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
+import BellIC from "../../../../public/res/ic/outlined/bell.svg";
+import BellRingIC from "../../../../public/res/ic/outlined/bell-ring.svg";
+import BellPingIC from "../../../../public/res/ic/outlined/bell-ping.svg";
+import BellOffIC from "../../../../public/res/ic/outlined/bell-off.svg";
 
-const items = [{
-  iconSrc: BellIC,
-  text: 'Global',
-  type: cons.notifs.DEFAULT,
-}, {
-  iconSrc: BellRingIC,
-  text: 'All messages',
-  type: cons.notifs.ALL_MESSAGES,
-}, {
-  iconSrc: BellPingIC,
-  text: 'Mentions & Keywords',
-  type: cons.notifs.MENTIONS_AND_KEYWORDS,
-}, {
-  iconSrc: BellOffIC,
-  text: 'Mute',
-  type: cons.notifs.MUTE,
-}];
+const items = [
+  {
+    iconSrc: BellIC,
+    text: "Global",
+    type: cons.notifs.DEFAULT,
+  },
+  {
+    iconSrc: BellRingIC,
+    text: "All messages",
+    type: cons.notifs.ALL_MESSAGES,
+  },
+  {
+    iconSrc: BellPingIC,
+    text: "Mentions & Keywords",
+    type: cons.notifs.MENTIONS_AND_KEYWORDS,
+  },
+  {
+    iconSrc: BellOffIC,
+    text: "Mute",
+    type: cons.notifs.MUTE,
+  },
+];
 
 function setRoomNotifType(roomId, newType) {
   const mx = initMatrix.matrixClient;
   const { notifications } = initMatrix;
   let roomPushRule;
   try {
-    roomPushRule = mx.getRoomPushRule('global', roomId);
+    roomPushRule = mx.getRoomPushRule("global", roomId);
   } catch {
     roomPushRule = undefined;
   }
@@ -45,71 +50,78 @@ function setRoomNotifType(roomId, newType) {
 
   if (newType === cons.notifs.MUTE) {
     if (roomPushRule) {
-      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
+      promises.push(mx.deletePushRule("global", "room", roomPushRule.rule_id));
     }
-    promises.push(mx.addPushRule('global', 'override', roomId, {
-      conditions: [
-        {
-          kind: 'event_match',
-          key: 'room_id',
-          pattern: roomId,
-        },
-      ],
-      actions: [
-        'dont_notify',
-      ],
-    }));
+    promises.push(
+      mx.addPushRule("global", "override", roomId, {
+        conditions: [
+          {
+            kind: "event_match",
+            key: "room_id",
+            pattern: roomId,
+          },
+        ],
+        actions: ["dont_notify"],
+      })
+    );
     return promises;
   }
 
   const oldState = notifications.getNotiType(roomId);
   if (oldState === cons.notifs.MUTE) {
-    promises.push(mx.deletePushRule('global', 'override', roomId));
+    promises.push(mx.deletePushRule("global", "override", roomId));
   }
 
   if (newType === cons.notifs.DEFAULT) {
     if (roomPushRule) {
-      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
+      promises.push(mx.deletePushRule("global", "room", roomPushRule.rule_id));
     }
     return Promise.all(promises);
   }
 
   if (newType === cons.notifs.MENTIONS_AND_KEYWORDS) {
-    promises.push(mx.addPushRule('global', 'room', roomId, {
-      actions: [
-        'dont_notify',
-      ],
-    }));
-    promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
+    promises.push(
+      mx.addPushRule("global", "room", roomId, {
+        actions: ["dont_notify"],
+      })
+    );
+    promises.push(mx.setPushRuleEnabled("global", "room", roomId, true));
     return Promise.all(promises);
   }
 
   // cons.notifs.ALL_MESSAGES
-  promises.push(mx.addPushRule('global', 'room', roomId, {
-    actions: [
-      'notify',
-      {
-        set_tweak: 'sound',
-        value: 'default',
-      },
-    ],
-  }));
+  promises.push(
+    mx.addPushRule("global", "room", roomId, {
+      actions: [
+        "notify",
+        {
+          set_tweak: "sound",
+          value: "default",
+        },
+      ],
+    })
+  );
 
-  promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
+  promises.push(mx.setPushRuleEnabled("global", "room", roomId, true));
 
   return Promise.all(promises);
 }
 
 function useNotifications(roomId) {
   const { notifications } = initMatrix;
-  const [activeType, setActiveType] = useState(notifications.getNotiType(roomId));
+  const [activeType, setActiveType] = useState(
+    notifications.getNotiType(roomId)
+  );
   useEffect(() => setActiveType(notifications.getNotiType(roomId)), [roomId]);
 
-  const setNotification = useCallback((item) => {
-    if (item.type === activeType.type) return;
-    setActiveType(item.type);
-    setRoomNotifType(roomId, item.type);
-  }, [activeType, roomId]);
+  const setNotification = useCallback(
+    (item) => {
+      if (item.type === activeType.type) return;
+      setActiveType(item.type);
+      setRoomNotifType(roomId, item.type);
+    },
+    [activeType, roomId]
+  );
   return [activeType, setNotification];
 }
 
@@ -118,21 +130,19 @@ function RoomNotification({ roomId }) {
 
   return (
     <div className="room-notification">
-      {
-        items.map((item) => (
-          <MenuItem
-            variant={activeType === item.type ? 'positive' : 'surface'}
-            key={item.type}
-            iconSrc={item.iconSrc}
-            onClick={() => setNotification(item)}
-          >
-            <Text varient="b1">
-              <span>{item.text}</span>
-              <RadioButton isActive={activeType === item.type} />
-            </Text>
-          </MenuItem>
-        ))
-      }
+      {items.map((item) => (
+        <MenuItem
+          variant={activeType === item.type ? "positive" : "surface"}
+          key={item.type}
+          iconSrc={item.iconSrc}
+          onClick={() => setNotification(item)}
+        >
+          <Text varient="b1">
+            <span>{item.text}</span>
+            <RadioButton isActive={activeType === item.type} />
+          </Text>
+        </MenuItem>
+      ))}
     </div>
   );
 }
diff --git a/src/app/molecules/room-notification/RoomNotification.scss b/src/app/molecules/room-notification/RoomNotification.scss
index a831b34d..5bb4d205 100644
--- a/src/app/molecules/room-notification/RoomNotification.scss
+++ b/src/app/molecules/room-notification/RoomNotification.scss
@@ -1,19 +1,19 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .room-notification {
   & .context-menu__item .text {
     @extend .cp-fx__item-one;
     @extend .cp-fx__row--s-c;
-    
+
     & span:first-child {
       @extend .cp-fx__item-one;
       @extend .cp-txt__ellipsis;
     }
-    
+
     & .radio-btn {
       @include dir.side(margin, var(--sp-tight), 0);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-options/RoomOptions.jsx b/src/app/molecules/room-options/RoomOptions.jsx
index af18d712..67eae020 100644
--- a/src/app/molecules/room-options/RoomOptions.jsx
+++ b/src/app/molecules/room-options/RoomOptions.jsx
@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import { openInviteUser } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
-import { markAsRead } from '../../../client/action/notifications';
+import initMatrix from "../../../client/initMatrix";
+import { openInviteUser } from "../../../client/action/navigation";
+import * as roomActions from "../../../client/action/room";
+import { markAsRead } from "../../../client/action/notifications";
 
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import RoomNotification from '../room-notification/RoomNotification';
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
+import RoomNotification from "../room-notification/RoomNotification";
 
-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 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';
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
 
 function RoomOptions({ roomId, afterOptionSelect }) {
   const mx = initMatrix.matrixClient;
@@ -34,19 +34,25 @@ function RoomOptions({ roomId, afterOptionSelect }) {
   const handleLeaveClick = async () => {
     afterOptionSelect();
     const isConfirmed = await confirmDialog(
-      'Leave room',
+      "Leave room",
       `Are you sure that you want to leave "${room.name}" room?`,
-      'Leave',
-      'danger',
+      "Leave",
+      "danger"
     );
     if (!isConfirmed) return;
     roomActions.leave(roomId);
   };
 
   return (
-    <div style={{ maxWidth: '256px' }}>
-      <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
-      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
+    <div style={{ maxWidth: "256px" }}>
+      <MenuHeader>
+        {twemojify(
+          `Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`
+        )}
+      </MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>
+        Mark as read
+      </MenuItem>
       <MenuItem
         iconSrc={AddUserIC}
         onClick={handleInviteClick}
@@ -54,7 +60,13 @@ function RoomOptions({ roomId, afterOptionSelect }) {
       >
         Invite
       </MenuItem>
-      <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
+      <MenuItem
+        iconSrc={LeaveArrowIC}
+        variant="danger"
+        onClick={handleLeaveClick}
+      >
+        Leave
+      </MenuItem>
       <MenuHeader>Notification</MenuHeader>
       <RoomNotification roomId={roomId} />
     </div>
diff --git a/src/app/molecules/room-permissions/RoomPermissions.jsx b/src/app/molecules/room-permissions/RoomPermissions.jsx
index da8720cd..187ed3e9 100644
--- a/src/app/molecules/room-permissions/RoomPermissions.jsx
+++ b/src/app/molecules/room-permissions/RoomPermissions.jsx
@@ -1,158 +1,180 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomPermissions.scss';
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomPermissions.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { getPowerLabel } from '../../../util/matrixUtil';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { getPowerLabel } from "../../../util/matrixUtil";
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import PowerLevelSelector from '../power-level-selector/PowerLevelSelector';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import PowerLevelSelector from "../power-level-selector/PowerLevelSelector";
+import SettingTile from "../setting-tile/SettingTile";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
 
-import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
 
 const permissionsInfo = {
   users_default: {
-    name: 'Default role',
-    description: 'Set default role for all members.',
+    name: "Default role",
+    description: "Set default role for all members.",
     default: 0,
   },
   events_default: {
-    name: 'Send messages',
-    description: 'Set minimum power level to send messages in room.',
+    name: "Send messages",
+    description: "Set minimum power level to send messages in room.",
     default: 0,
   },
-  'm.reaction': {
-    parent: 'events',
-    name: 'Send reactions',
-    description: 'Set minimum power level to send reactions in room.',
+  "m.reaction": {
+    parent: "events",
+    name: "Send reactions",
+    description: "Set minimum power level to send reactions in room.",
     default: 0,
   },
   redact: {
-    name: 'Delete messages sent by others',
-    description: 'Set minimum power level to delete messages in room.',
+    name: "Delete messages sent by others",
+    description: "Set minimum power level to delete messages in room.",
     default: 50,
   },
   notifications: {
-    name: 'Ping room',
-    description: 'Set minimum power level to ping room.',
+    name: "Ping room",
+    description: "Set minimum power level to ping room.",
     default: {
       room: 50,
     },
   },
-  'm.space.child': {
-    parent: 'events',
-    name: 'Manage rooms in space',
-    description: 'Set minimum power level to manage rooms in space.',
+  "m.space.child": {
+    parent: "events",
+    name: "Manage rooms in space",
+    description: "Set minimum power level to manage rooms in space.",
     default: 50,
   },
   invite: {
-    name: 'Invite',
-    description: 'Set minimum power level to invite members.',
+    name: "Invite",
+    description: "Set minimum power level to invite members.",
     default: 50,
   },
   kick: {
-    name: 'Kick',
-    description: 'Set minimum power level to kick members.',
+    name: "Kick",
+    description: "Set minimum power level to kick members.",
     default: 50,
   },
   ban: {
-    name: 'Ban',
-    description: 'Set minimum power level to ban members.',
+    name: "Ban",
+    description: "Set minimum power level to ban members.",
     default: 50,
   },
-  'm.room.avatar': {
-    parent: 'events',
-    name: 'Change avatar',
-    description: 'Set minimum power level to change room/space avatar.',
+  "m.room.avatar": {
+    parent: "events",
+    name: "Change avatar",
+    description: "Set minimum power level to change room/space avatar.",
     default: 50,
   },
-  'm.room.name': {
-    parent: 'events',
-    name: 'Change name',
-    description: 'Set minimum power level to change room/space name.',
+  "m.room.name": {
+    parent: "events",
+    name: "Change name",
+    description: "Set minimum power level to change room/space name.",
     default: 50,
   },
-  'm.room.topic': {
-    parent: 'events',
-    name: 'Change topic',
-    description: 'Set minimum power level to change room/space topic.',
+  "m.room.topic": {
+    parent: "events",
+    name: "Change topic",
+    description: "Set minimum power level to change room/space topic.",
     default: 50,
   },
   state_default: {
-    name: 'Change settings',
-    description: 'Set minimum power level to change settings.',
+    name: "Change settings",
+    description: "Set minimum power level to change settings.",
     default: 50,
   },
-  'm.room.canonical_alias': {
-    parent: 'events',
-    name: 'Change published address',
-    description: 'Set minimum power level to publish and set main address.',
+  "m.room.canonical_alias": {
+    parent: "events",
+    name: "Change published address",
+    description: "Set minimum power level to publish and set main address.",
     default: 50,
   },
-  'm.room.power_levels': {
-    parent: 'events',
-    name: 'Change permissions',
-    description: 'Set minimum power level to change permissions.',
+  "m.room.power_levels": {
+    parent: "events",
+    name: "Change permissions",
+    description: "Set minimum power level to change permissions.",
     default: 50,
   },
-  'm.room.encryption': {
-    parent: 'events',
-    name: 'Enable room encryption',
-    description: 'Set minimum power level to enable room encryption.',
+  "m.room.encryption": {
+    parent: "events",
+    name: "Enable room encryption",
+    description: "Set minimum power level to enable room encryption.",
     default: 50,
   },
-  'm.room.history_visibility': {
-    parent: 'events',
-    name: 'Change history visibility',
-    description: 'Set minimum power level to change room messages history visibility.',
+  "m.room.history_visibility": {
+    parent: "events",
+    name: "Change history visibility",
+    description:
+      "Set minimum power level to change room messages history visibility.",
     default: 50,
   },
-  'm.room.tombstone': {
-    parent: 'events',
-    name: 'Upgrade room',
-    description: 'Set minimum power level to upgrade room.',
+  "m.room.tombstone": {
+    parent: "events",
+    name: "Upgrade room",
+    description: "Set minimum power level to upgrade room.",
     default: 50,
   },
-  'm.room.pinned_events': {
-    parent: 'events',
-    name: 'Pin messages',
-    description: 'Set minimum power level to pin messages in room.',
+  "m.room.pinned_events": {
+    parent: "events",
+    name: "Pin messages",
+    description: "Set minimum power level to pin messages in room.",
     default: 50,
   },
-  'm.room.server_acl': {
-    parent: 'events',
-    name: 'Change server ACLs',
-    description: 'Set minimum power level to change server ACLs.',
+  "m.room.server_acl": {
+    parent: "events",
+    name: "Change server ACLs",
+    description: "Set minimum power level to change server ACLs.",
     default: 50,
   },
-  'im.vector.modular.widgets': {
-    parent: 'events',
-    name: 'Modify widgets',
-    description: 'Set minimum power level to modify room widgets.',
+  "im.vector.modular.widgets": {
+    parent: "events",
+    name: "Modify widgets",
+    description: "Set minimum power level to modify room widgets.",
     default: 50,
   },
 };
 
 const roomPermsGroups = {
-  'General Permissions': ['users_default', 'events_default', 'm.reaction', 'redact', 'notifications'],
-  'Manage members permissions': ['invite', 'kick', 'ban'],
-  'Room profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
-  'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels', 'm.room.encryption', 'm.room.history_visibility'],
-  'Other permissions': ['m.room.tombstone', 'm.room.pinned_events', 'm.room.server_acl', 'im.vector.modular.widgets'],
+  "General Permissions": [
+    "users_default",
+    "events_default",
+    "m.reaction",
+    "redact",
+    "notifications",
+  ],
+  "Manage members permissions": ["invite", "kick", "ban"],
+  "Room profile permissions": ["m.room.avatar", "m.room.name", "m.room.topic"],
+  "Settings permissions": [
+    "state_default",
+    "m.room.canonical_alias",
+    "m.room.power_levels",
+    "m.room.encryption",
+    "m.room.history_visibility",
+  ],
+  "Other permissions": [
+    "m.room.tombstone",
+    "m.room.pinned_events",
+    "m.room.server_acl",
+    "im.vector.modular.widgets",
+  ],
 };
 
 const spacePermsGroups = {
-  'General Permissions': ['users_default', 'm.space.child'],
-  'Manage members permissions': ['invite', 'kick', 'ban'],
-  'Space profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
-  'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'],
+  "General Permissions": ["users_default", "m.space.child"],
+  "Manage members permissions": ["invite", "kick", "ban"],
+  "Space profile permissions": ["m.room.avatar", "m.room.name", "m.room.topic"],
+  "Settings permissions": [
+    "state_default",
+    "m.room.canonical_alias",
+    "m.room.power_levels",
+  ],
 };
 
 function useRoomStateUpdate(roomId) {
@@ -165,9 +187,9 @@ function useRoomStateUpdate(roomId) {
       forceUpdate();
     };
 
-    mx.on('RoomState.events', handleStateEvent);
+    mx.on("RoomState.events", handleStateEvent);
     return () => {
-      mx.removeListener('RoomState.events', handleStateEvent);
+      mx.removeListener("RoomState.events", handleStateEvent);
     };
   }, [roomId]);
 }
@@ -176,9 +198,12 @@ function RoomPermissions({ roomId }) {
   useRoomStateUpdate(roomId);
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
-  const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
+  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 canChangePermission = room.currentState.maySendStateEvent(
+    "m.room.power_levels",
+    mx.getUserId()
+  );
   const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel ?? 100;
 
   const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
@@ -191,7 +216,7 @@ function RoomPermissions({ roomId }) {
           ...permissions[parentKey],
           [permKey]: newPowerLevel,
         };
-      } else if (permKey === 'notifications') {
+      } else if (permKey === "notifications") {
         newPermissions[permKey] = {
           ...permissions[permKey],
           room: newPowerLevel,
@@ -200,12 +225,12 @@ function RoomPermissions({ roomId }) {
         newPermissions[permKey] = newPowerLevel;
       }
 
-      mx.sendStateEvent(roomId, 'm.room.power_levels', newPermissions);
+      mx.sendStateEvent(roomId, "m.room.power_levels", newPermissions);
     };
 
     openReusableContextMenu(
-      'bottom',
-      getEventCords(e, '.btn-surface'),
+      "bottom",
+      getEventCords(e, ".btn-surface"),
       (closeMenu) => (
         <PowerLevelSelector
           value={powerLevel}
@@ -215,62 +240,66 @@ function RoomPermissions({ roomId }) {
             handlePowerLevelChange(pl);
           }}
         />
-      ),
+      )
     );
   };
 
   const permsGroups = room.isSpaceRoom() ? spacePermsGroups : roomPermsGroups;
   return (
     <div className="room-permissions">
-      {
-        Object.keys(permsGroups).map((groupKey) => {
-          const groupedPermKeys = permsGroups[groupKey];
-          return (
-            <div className="room-permissions__card" key={groupKey}>
-              <MenuHeader>{groupKey}</MenuHeader>
-              {
-                groupedPermKeys.map((permKey) => {
-                  const permInfo = permissionsInfo[permKey];
+      {Object.keys(permsGroups).map((groupKey) => {
+        const groupedPermKeys = permsGroups[groupKey];
+        return (
+          <div className="room-permissions__card" key={groupKey}>
+            <MenuHeader>{groupKey}</MenuHeader>
+            {groupedPermKeys.map((permKey) => {
+              const permInfo = permissionsInfo[permKey];
 
-                  let powerLevel = 0;
-                  let permValue = permInfo.parent
-                    ? permissions[permInfo.parent]?.[permKey]
-                    : permissions[permKey];
+              let powerLevel = 0;
+              let permValue = permInfo.parent
+                ? permissions[permInfo.parent]?.[permKey]
+                : permissions[permKey];
 
-                  if (permValue === undefined) permValue = permInfo.default;
+              if (permValue === undefined) permValue = permInfo.default;
 
-                  if (typeof permValue === 'number') {
-                    powerLevel = permValue;
-                  } else if (permKey === 'notifications') {
-                    powerLevel = permValue.room ?? 50;
-                  }
-                  return (
-                    <SettingTile
-                      key={permKey}
-                      title={permInfo.name}
-                      content={<Text variant="b3">{permInfo.description}</Text>}
-                      options={(
-                        <Button
-                          onClick={
-                            canChangePermission
-                              ? (e) => handlePowerSelector(e, permKey, permInfo.parent, powerLevel)
-                              : null
-                          }
-                          iconSrc={canChangePermission ? ChevronBottomIC : null}
-                        >
-                          <Text variant="b2">
-                            {`${getPowerLabel(powerLevel) || 'Member'} - ${powerLevel}`}
-                          </Text>
-                        </Button>
-                      )}
-                    />
-                  );
-                })
+              if (typeof permValue === "number") {
+                powerLevel = permValue;
+              } else if (permKey === "notifications") {
+                powerLevel = permValue.room ?? 50;
               }
-            </div>
-          );
-        })
-      }
+              return (
+                <SettingTile
+                  key={permKey}
+                  title={permInfo.name}
+                  content={<Text variant="b3">{permInfo.description}</Text>}
+                  options={
+                    <Button
+                      onClick={
+                        canChangePermission
+                          ? (e) =>
+                              handlePowerSelector(
+                                e,
+                                permKey,
+                                permInfo.parent,
+                                powerLevel
+                              )
+                          : null
+                      }
+                      iconSrc={canChangePermission ? ChevronBottomIC : null}
+                    >
+                      <Text variant="b2">
+                        {`${
+                          getPowerLabel(powerLevel) || "Member"
+                        } - ${powerLevel}`}
+                      </Text>
+                    </Button>
+                  }
+                />
+              );
+            })}
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/app/molecules/room-permissions/RoomPermissions.scss b/src/app/molecules/room-permissions/RoomPermissions.scss
index 81b22ca8..bdda40f6 100644
--- a/src/app/molecules/room-permissions/RoomPermissions.scss
+++ b/src/app/molecules/room-permissions/RoomPermissions.scss
@@ -8,4 +8,4 @@
       border-bottom: none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-profile/RoomProfile.jsx b/src/app/molecules/room-profile/RoomProfile.jsx
index 21811984..e403d079 100644
--- a/src/app/molecules/room-profile/RoomProfile.jsx
+++ b/src/app/molecules/room-profile/RoomProfile.jsx
@@ -1,25 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomProfile.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomProfile.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import colorMXID from '../../../util/colorMXID';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import colorMXID from "../../../util/colorMXID";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import IconButton from '../../atoms/button/IconButton';
-import ImageUpload from '../image-upload/ImageUpload';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import IconButton from "../../atoms/button/IconButton";
+import ImageUpload from "../image-upload/ImageUpload";
 
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+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';
+import { useStore } from "../../hooks/useStore";
+import { useForceUpdate } from "../../hooks/useForceUpdate";
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
 
 function RoomProfile({ roomId }) {
   const isMountStore = useStore();
@@ -32,18 +32,28 @@ function RoomProfile({ roomId }) {
 
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
-  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, "crop");
+  avatarSrc = isDM
+    ? mx
+        .getRoom(roomId)
+        .getAvatarFallbackMember()
+        ?.getAvatarUrl(mx.baseUrl, 36, 36, "crop")
+    : avatarSrc;
   const room = mx.getRoom(roomId);
   const { currentState } = room;
   const roomName = room.name;
-  const roomTopic = currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+  const roomTopic = currentState
+    .getStateEvents("m.room.topic")[0]
+    ?.getContent().topic;
 
   const userId = mx.getUserId();
 
-  const canChangeAvatar = currentState.maySendStateEvent('m.room.avatar', userId);
-  const canChangeName = currentState.maySendStateEvent('m.room.name', userId);
-  const canChangeTopic = currentState.maySendStateEvent('m.room.topic', userId);
+  const canChangeAvatar = currentState.maySendStateEvent(
+    "m.room.avatar",
+    userId
+  );
+  const canChangeName = currentState.maySendStateEvent("m.room.name", userId);
+  const canChangeTopic = currentState.maySendStateEvent("m.room.topic", userId);
 
   useEffect(() => {
     isMountStore.setItem(true);
@@ -55,7 +65,10 @@ function RoomProfile({ roomId }) {
 
     roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+      roomList.removeListener(
+        cons.events.roomList.ROOM_PROFILE_UPDATED,
+        handleProfileUpdate
+      );
       isMountStore.setItem(false);
       setStatus({
         msg: null,
@@ -68,15 +81,15 @@ function RoomProfile({ roomId }) {
   const handleOnSubmit = async (e) => {
     e.preventDefault();
     const { target } = e;
-    const roomNameInput = target.elements['room-name'];
-    const roomTopicInput = target.elements['room-topic'];
+    const roomNameInput = target.elements["room-name"];
+    const roomTopicInput = target.elements["room-topic"];
 
     try {
       if (canChangeName) {
         const newName = roomNameInput.value;
-        if (newName !== roomName && roomName.trim() !== '') {
+        if (newName !== roomName && roomName.trim() !== "") {
           setStatus({
-            msg: 'Saving room name...',
+            msg: "Saving room name...",
             type: cons.status.IN_FLIGHT,
           });
           await mx.setRoomName(roomId, newName);
@@ -87,7 +100,7 @@ function RoomProfile({ roomId }) {
         if (newTopic !== roomTopic) {
           if (isMountStore.getItem()) {
             setStatus({
-              msg: 'Saving room topic...',
+              msg: "Saving room topic...",
               type: cons.status.IN_FLIGHT,
             });
           }
@@ -96,13 +109,13 @@ function RoomProfile({ roomId }) {
       }
       if (!isMountStore.getItem()) return;
       setStatus({
-        msg: 'Saved successfully',
+        msg: "Saved successfully",
         type: cons.status.SUCCESS,
       });
     } catch (err) {
       if (!isMountStore.getItem()) return;
       setStatus({
-        msg: err.message || 'Unable to save.',
+        msg: err.message || "Unable to save.",
         type: cons.status.ERROR,
       });
     }
@@ -119,28 +132,60 @@ function RoomProfile({ roomId }) {
   const handleAvatarUpload = async (url) => {
     if (url === null) {
       const isConfirmed = await confirmDialog(
-        'Remove avatar',
-        'Are you sure that you want to remove room avatar?',
-        'Remove',
-        'caution',
+        "Remove avatar",
+        "Are you sure that you want to remove room avatar?",
+        "Remove",
+        "caution"
       );
       if (isConfirmed) {
-        await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
+        await mx.sendStateEvent(roomId, "m.room.avatar", { url }, "");
       }
-    } else await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
+    } else await mx.sendStateEvent(roomId, "m.room.avatar", { url }, "");
   };
 
   const renderEditNameAndTopic = () => (
     <form className="room-profile__edit-form" onSubmit={handleOnSubmit}>
-      {canChangeName && <Input value={roomName} name="room-name" disabled={status.type === cons.status.IN_FLIGHT} label="Name" />}
-      {canChangeTopic && <Input value={roomTopic} name="room-topic" disabled={status.type === cons.status.IN_FLIGHT} minHeight={100} resizable label="Topic" />}
-      {(!canChangeName || !canChangeTopic) && <Text variant="b3">{`You have permission to change ${room.isSpaceRoom() ? 'space' : 'room'} ${canChangeName ? 'name' : 'topic'} only.`}</Text>}
-      { status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
-      { status.type === cons.status.SUCCESS && <Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">{status.msg}</Text>}
-      { status.type === cons.status.ERROR && <Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">{status.msg}</Text>}
-      { status.type !== cons.status.IN_FLIGHT && (
+      {canChangeName && (
+        <Input
+          value={roomName}
+          name="room-name"
+          disabled={status.type === cons.status.IN_FLIGHT}
+          label="Name"
+        />
+      )}
+      {canChangeTopic && (
+        <Input
+          value={roomTopic}
+          name="room-topic"
+          disabled={status.type === cons.status.IN_FLIGHT}
+          minHeight={100}
+          resizable
+          label="Topic"
+        />
+      )}
+      {(!canChangeName || !canChangeTopic) && (
+        <Text variant="b3">{`You have permission to change ${
+          room.isSpaceRoom() ? "space" : "room"
+        } ${canChangeName ? "name" : "topic"} only.`}</Text>
+      )}
+      {status.type === cons.status.IN_FLIGHT && (
+        <Text variant="b2">{status.msg}</Text>
+      )}
+      {status.type === cons.status.SUCCESS && (
+        <Text style={{ color: "var(--tc-positive-high)" }} variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text style={{ color: "var(--tc-danger-high)" }} variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type !== cons.status.IN_FLIGHT && (
         <div>
-          <Button type="submit" variant="primary">Save</Button>
+          <Button type="submit" variant="primary">
+            Save
+          </Button>
           <Button onClick={handleCancelEditing}>Cancel</Button>
         </div>
       )}
@@ -148,10 +193,15 @@ function RoomProfile({ roomId }) {
   );
 
   const renderNameAndTopic = () => (
-    <div className="room-profile__display" style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}>
+    <div
+      className="room-profile__display"
+      style={{ marginBottom: avatarSrc && canChangeAvatar ? "24px" : "0" }}
+    >
       <div>
-        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
-        { (canChangeName || canChangeTopic) && (
+        <Text variant="h2" weight="medium" primary>
+          {twemojify(roomName)}
+        </Text>
+        {(canChangeName || canChangeTopic) && (
           <IconButton
             src={PencilIC}
             size="extra-small"
@@ -161,15 +211,24 @@ function RoomProfile({ roomId }) {
         )}
       </div>
       <Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
-      {roomTopic && <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>}
+      {roomTopic && (
+        <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>
+      )}
     </div>
   );
 
   return (
     <div className="room-profile">
       <div className="room-profile__content">
-        { !canChangeAvatar && <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />}
-        { canChangeAvatar && (
+        {!canChangeAvatar && (
+          <Avatar
+            imageSrc={avatarSrc}
+            text={roomName}
+            bgColor={colorMXID(roomId)}
+            size="large"
+          />
+        )}
+        {canChangeAvatar && (
           <ImageUpload
             text={roomName}
             bgColor={colorMXID(roomId)}
diff --git a/src/app/molecules/room-profile/RoomProfile.scss b/src/app/molecules/room-profile/RoomProfile.scss
index 43d70144..e74a6506 100644
--- a/src/app/molecules/room-profile/RoomProfile.scss
+++ b/src/app/molecules/room-profile/RoomProfile.scss
@@ -1,8 +1,7 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .room-profile {
-  
   &__content {
     @extend .cp-fx__row;
     & .avatar-container {
@@ -27,7 +26,7 @@
       word-break: break-word;
     }
   }
-  
+
   &__edit-form {
     @extend .cp-fx__item-one;
     @include dir.side(margin, var(--sp-loose), 0);
@@ -39,15 +38,15 @@
     & > .text {
       margin-bottom: var(--sp-tight);
     }
-    
+
     & > *:last-child {
       @extend .cp-fx__item-one;
       @extend .cp-fx__row;
       margin-top: var(--sp-tight);
-      
+
       .btn-primary {
         @include dir.side(margin, 0, var(--sp-tight));
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-search/RoomSearch.jsx b/src/app/molecules/room-search/RoomSearch.jsx
index 2612aed1..996046b0 100644
--- a/src/app/molecules/room-search/RoomSearch.jsx
+++ b/src/app/molecules/room-search/RoomSearch.jsx
@@ -1,27 +1,29 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomSearch.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomSearch.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { selectRoom } from '../../../client/action/navigation';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { selectRoom } from "../../../client/action/navigation";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import { Message } from '../message/Message';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import Spinner from "../../atoms/spinner/Spinner";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import { Message } from "../message/Message";
 
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import SearchIC from "../../../../public/res/ic/outlined/search.svg";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 const roomIdToBackup = new Map();
 
 function useRoomSearch(roomId) {
-  const [searchData, setSearchData] = useState(roomIdToBackup.get(roomId) ?? null);
+  const [searchData, setSearchData] = useState(
+    roomIdToBackup.get(roomId) ?? null
+  );
   const [status, setStatus] = useState({
     type: cons.status.PRE_FLIGHT,
     term: null,
@@ -41,7 +43,7 @@ function useRoomSearch(roomId) {
 
   const search = async (term) => {
     setSearchData(null);
-    if (term === '') {
+    if (term === "") {
       setStatus({ type: cons.status.PRE_FLIGHT, term: null });
       return;
     }
@@ -54,7 +56,7 @@ function useRoomSearch(roomId) {
             limit: 10,
             rooms: [roomId],
           },
-          order_by: 'recent',
+          order_by: "recent",
           event_context: {
             before_limit: 0,
             after_limit: 0,
@@ -65,11 +67,14 @@ function useRoomSearch(roomId) {
     };
     try {
       const res = await mx.search({ body });
-      const data = mx.processRoomEventsSearch({
-        _query: body,
-        results: [],
-        highlights: [],
-      }, res);
+      const data = mx.processRoomEventsSearch(
+        {
+          _query: body,
+          results: [],
+          highlights: [],
+        },
+        res
+      );
       if (!mountStore.getItem()) return;
       setStatus({ type: cons.status.SUCCESS, term });
       setSearchData(data);
@@ -104,12 +109,13 @@ function RoomSearch({ roomId }) {
   const [searchData, search, paginate, status] = useRoomSearch(roomId);
   const mx = initMatrix.matrixClient;
   const isRoomEncrypted = mx.isRoomEncrypted(roomId);
-  const searchTerm = searchData?._query.search_categories.room_events.search_term ?? '';
+  const searchTerm =
+    searchData?._query.search_categories.room_events.search_term ?? "";
 
   const handleSearch = (e) => {
     e.preventDefault();
     if (isRoomEncrypted) return;
-    const searchTermInput = e.target.elements['room-search-input'];
+    const searchTermInput = e.target.elements["room-search-input"];
     const term = searchTermInput.value.trim();
 
     search(term);
@@ -117,15 +123,11 @@ function RoomSearch({ roomId }) {
 
   const renderTimeline = (timeline) => (
     <div className="room-search__result-item" key={timeline[0].getId()}>
-      { timeline.map((mEvent) => {
+      {timeline.map((mEvent) => {
         const id = mEvent.getId();
         return (
           <React.Fragment key={id}>
-            <Message
-              mEvent={mEvent}
-              isBodyOnly={false}
-              fullTime
-            />
+            <Message mEvent={mEvent} isBodyOnly={false} fullTime />
             <Button onClick={() => selectRoom(roomId, id)}>View</Button>
           </React.Fragment>
         );
@@ -144,7 +146,9 @@ function RoomSearch({ roomId }) {
             disabled={isRoomEncrypted}
             autoFocus
           />
-          <Button iconSrc={SearchIC} variant="primary" type="submit">Search</Button>
+          <Button iconSrc={SearchIC} variant="primary" type="submit">
+            Search
+          </Button>
         </div>
         {searchData?.results.length > 0 && (
           <Text>{`${searchData.count} results for "${searchTerm}"`}</Text>
@@ -152,10 +156,18 @@ function RoomSearch({ roomId }) {
         {!isRoomEncrypted && searchData === null && (
           <div className="room-search__help">
             {status.type === cons.status.IN_FLIGHT && <Spinner />}
-            {status.type === cons.status.IN_FLIGHT && <Text>Searching room messages...</Text>}
-            {status.type === cons.status.PRE_FLIGHT && <RawIcon src={SearchIC} size="large" />}
-            {status.type === cons.status.PRE_FLIGHT && <Text>Search room messages</Text>}
-            {status.type === cons.status.ERROR && <Text>Failed to search messages</Text>}
+            {status.type === cons.status.IN_FLIGHT && (
+              <Text>Searching room messages...</Text>
+            )}
+            {status.type === cons.status.PRE_FLIGHT && (
+              <RawIcon src={SearchIC} size="large" />
+            )}
+            {status.type === cons.status.PRE_FLIGHT && (
+              <Text>Search room messages</Text>
+            )}
+            {status.type === cons.status.ERROR && (
+              <Text>Failed to search messages</Text>
+            )}
           </div>
         )}
 
diff --git a/src/app/molecules/room-search/RoomSearch.scss b/src/app/molecules/room-search/RoomSearch.scss
index a40945ef..3b7c3d41 100644
--- a/src/app/molecules/room-search/RoomSearch.scss
+++ b/src/app/molecules/room-search/RoomSearch.scss
@@ -1,13 +1,13 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .room-search {
   &__form {
     & div:nth-child(2) {
       display: flex;
       align-items: flex-end;
-      padding: var(--sp-normal);;
-      
+      padding: var(--sp-normal);
+
       & .input-container {
         @extend .cp-fx__item-one;
         @include dir.side(margin, 0, var(--sp-normal));
@@ -29,7 +29,7 @@
     @extend .cp-fx__column--c-c;
 
     & .ic-raw {
-      opacity: .5;
+      opacity: 0.5;
     }
     .text {
       margin-top: var(--sp-normal);
@@ -59,4 +59,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index fa6daa9e..46bd5928 100644
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -1,31 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RoomSelector.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RoomSelector.scss";
 
-import { twemojify } from '../../../util/twemojify';
-import colorMXID from '../../../util/colorMXID';
+import { twemojify } from "../../../util/twemojify";
+import colorMXID from "../../../util/colorMXID";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import NotificationBadge from '../../atoms/badge/NotificationBadge';
-import { blurOnBubbling } from '../../atoms/button/script';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
+import NotificationBadge from "../../atoms/badge/NotificationBadge";
+import { blurOnBubbling } from "../../atoms/button/script";
 
 function RoomSelectorWrapper({
-  isSelected, isMuted, isUnread, onClick,
-  content, options, onContextMenu,
+  isSelected,
+  isMuted,
+  isUnread,
+  onClick,
+  content,
+  options,
+  onContextMenu,
 }) {
-  const classes = ['room-selector'];
-  if (isMuted) classes.push('room-selector--muted');
-  if (isUnread) classes.push('room-selector--unread');
-  if (isSelected) classes.push('room-selector--selected');
+  const classes = ["room-selector"];
+  if (isMuted) classes.push("room-selector--muted");
+  if (isUnread) classes.push("room-selector--unread");
+  if (isSelected) classes.push("room-selector--selected");
 
   return (
-    <div className={classes.join(' ')}>
+    <div className={classes.join(" ")}>
       <button
         className="room-selector__content"
         type="button"
         onClick={onClick}
-        onMouseUp={(e) => blurOnBubbling(e, '.room-selector__content')}
+        onMouseUp={(e) => blurOnBubbling(e, ".room-selector__content")}
         onContextMenu={onContextMenu}
       >
         {content}
@@ -50,16 +55,26 @@ RoomSelectorWrapper.propTypes = {
 };
 
 function RoomSelector({
-  name, parentName, roomId, imageSrc, iconSrc,
-  isSelected, isMuted, isUnread, notificationCount, isAlert,
-  options, onClick, onContextMenu,
+  name,
+  parentName,
+  roomId,
+  imageSrc,
+  iconSrc,
+  isSelected,
+  isMuted,
+  isUnread,
+  notificationCount,
+  isAlert,
+  options,
+  onClick,
+  onContextMenu,
 }) {
   return (
     <RoomSelectorWrapper
       isSelected={isSelected}
       isMuted={isMuted}
       isUnread={isUnread}
-      content={(
+      content={
         <>
           <Avatar
             text={name}
@@ -69,23 +84,23 @@ function RoomSelector({
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
+          <Text variant="b1" weight={isUnread ? "medium" : "normal"}>
             {twemojify(name)}
             {parentName && (
               <Text variant="b3" span>
-                {' — '}
+                {" — "}
                 {twemojify(parentName)}
               </Text>
             )}
           </Text>
-          { isUnread && (
+          {isUnread && (
             <NotificationBadge
               alert={isAlert}
               content={notificationCount !== 0 ? notificationCount : null}
             />
           )}
         </>
-      )}
+      }
       options={options}
       onClick={onClick}
       onContextMenu={onContextMenu}
@@ -110,10 +125,8 @@ RoomSelector.propTypes = {
   isSelected: PropTypes.bool,
   isMuted: PropTypes.bool,
   isUnread: PropTypes.bool.isRequired,
-  notificationCount: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]).isRequired,
+  notificationCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
   isAlert: PropTypes.bool.isRequired,
   options: PropTypes.node,
   onClick: PropTypes.func.isRequired,
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
index 59e47473..a43bab3c 100644
--- a/src/app/molecules/room-selector/RoomSelector.scss
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .room-selector {
   @extend .cp-fx__row--s-c;
@@ -18,7 +18,7 @@
       color: var(--tc-surface-high);
     }
   }
-  
+
   &--selected {
     background-color: var(--bg-surface);
     border-color: var(--bg-surface-border);
@@ -84,4 +84,4 @@
     padding: 6px;
     border-radius: calc(var(--bo-radius) / 2);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
index 95481ece..032f102b 100644
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -1,47 +1,46 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RoomTile.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RoomTile.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import colorMXID from '../../../util/colorMXID';
+import colorMXID from "../../../util/colorMXID";
 
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
+import Text from "../../atoms/text/Text";
+import Avatar from "../../atoms/avatar/Avatar";
 
 function RoomTile({
-  avatarSrc, name, id,
-  inviterName, memberCount, desc, options,
+  avatarSrc,
+  name,
+  id,
+  inviterName,
+  memberCount,
+  desc,
+  options,
 }) {
   return (
     <div className="room-tile">
       <div className="room-tile__avatar">
-        <Avatar
-          imageSrc={avatarSrc}
-          bgColor={colorMXID(id)}
-          text={name}
-        />
+        <Avatar imageSrc={avatarSrc} bgColor={colorMXID(id)} text={name} />
       </div>
       <div className="room-tile__content">
         <Text variant="s1">{twemojify(name)}</Text>
         <Text variant="b3">
-          {
-            inviterName !== null
-              ? `Invited by ${inviterName} to ${id}${memberCount === null ? '' : ` • ${memberCount} members`}`
-              : id + (memberCount === null ? '' : ` • ${memberCount} members`)
-          }
+          {inviterName !== null
+            ? `Invited by ${inviterName} to ${id}${
+                memberCount === null ? "" : ` • ${memberCount} members`
+              }`
+            : id + (memberCount === null ? "" : ` • ${memberCount} members`)}
         </Text>
-        {
-          desc !== null && (typeof desc === 'string')
-            ? <Text className="room-tile__content__desc" variant="b2">{twemojify(desc, undefined, true)}</Text>
-            : desc
-        }
+        {desc !== null && typeof desc === "string" ? (
+          <Text className="room-tile__content__desc" variant="b2">
+            {twemojify(desc, undefined, true)}
+          </Text>
+        ) : (
+          desc
+        )}
       </div>
-      { options !== null && (
-        <div className="room-tile__options">
-          {options}
-        </div>
-      )}
+      {options !== null && <div className="room-tile__options">{options}</div>}
     </div>
   );
 }
@@ -58,10 +57,7 @@ RoomTile.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   inviterName: PropTypes.string,
-  memberCount: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  memberCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   desc: PropTypes.node,
   options: PropTypes.node,
 };
diff --git a/src/app/molecules/room-tile/RoomTile.scss b/src/app/molecules/room-tile/RoomTile.scss
index bbed7107..b2a1630e 100644
--- a/src/app/molecules/room-tile/RoomTile.scss
+++ b/src/app/molecules/room-tile/RoomTile.scss
@@ -18,4 +18,4 @@
       margin-top: var(--sp-ultra-tight);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/room-visibility/RoomVisibility.jsx b/src/app/molecules/room-visibility/RoomVisibility.jsx
index 7a852876..cf7af012 100644
--- a/src/app/molecules/room-visibility/RoomVisibility.jsx
+++ b/src/app/molecules/room-visibility/RoomVisibility.jsx
@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import './RoomVisibility.scss';
+import React, { useState, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import "./RoomVisibility.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
 
-import Text from '../../atoms/text/Text';
-import RadioButton from '../../atoms/button/RadioButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import Text from "../../atoms/text/Text";
+import RadioButton from "../../atoms/button/RadioButton";
+import { MenuItem } from "../../atoms/context-menu/ContextMenu";
 
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
-import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
+import HashIC from "../../../../public/res/ic/outlined/hash.svg";
+import HashLockIC from "../../../../public/res/ic/outlined/hash-lock.svg";
+import HashGlobeIC from "../../../../public/res/ic/outlined/hash-globe.svg";
+import SpaceIC from "../../../../public/res/ic/outlined/space.svg";
+import SpaceLockIC from "../../../../public/res/ic/outlined/space-lock.svg";
+import SpaceGlobeIC from "../../../../public/res/ic/outlined/space-globe.svg";
 
 const visibility = {
-  INVITE: 'invite',
-  RESTRICTED: 'restricted',
-  PUBLIC: 'public',
+  INVITE: "invite",
+  RESTRICTED: "restricted",
+  PUBLIC: "public",
 };
 
 function setJoinRule(roomId, type) {
@@ -26,23 +26,21 @@ function setJoinRule(roomId, type) {
   let allow;
   if (type === visibility.RESTRICTED) {
     const { currentState } = mx.getRoom(roomId);
-    const mEvent = currentState.getStateEvents('m.space.parent')[0];
+    const mEvent = currentState.getStateEvents("m.space.parent")[0];
     if (!mEvent) return Promise.resolve(undefined);
 
-    allow = [{
-      room_id: mEvent.getStateKey(),
-      type: 'm.room_membership',
-    }];
+    allow = [
+      {
+        room_id: mEvent.getStateKey(),
+        type: "m.room_membership",
+      },
+    ];
   }
 
-  return mx.sendStateEvent(
-    roomId,
-    'm.room.join_rules',
-    {
-      join_rule: type,
-      allow,
-    },
-  );
+  return mx.sendStateEvent(roomId, "m.room.join_rules", {
+    join_rule: type,
+    allow,
+  });
 }
 
 function useVisibility(roomId) {
@@ -52,11 +50,14 @@ function useVisibility(roomId) {
   const [activeType, setActiveType] = useState(room.getJoinRule());
   useEffect(() => setActiveType(room.getJoinRule()), [roomId]);
 
-  const setNotification = useCallback((item) => {
-    if (item.type === activeType.type) return;
-    setActiveType(item.type);
-    setJoinRule(roomId, item.type);
-  }, [activeType, roomId]);
+  const setNotification = useCallback(
+    (item) => {
+      if (item.type === activeType.type) return;
+      setActiveType(item.type);
+      setJoinRule(roomId, item.type);
+    },
+    [activeType, roomId]
+  );
 
   return [activeType, setNotification];
 }
@@ -68,48 +69,57 @@ function RoomVisibility({ roomId }) {
   const isSpace = room.isSpaceRoom();
   const { currentState } = room;
 
-  const noSpaceParent = currentState.getStateEvents('m.space.parent').length === 0;
-  const mCreate = currentState.getStateEvents('m.room.create')[0]?.getContent();
+  const noSpaceParent =
+    currentState.getStateEvents("m.space.parent").length === 0;
+  const mCreate = currentState.getStateEvents("m.room.create")[0]?.getContent();
   const roomVersion = Number(mCreate?.room_version ?? 0);
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room.currentState.hasSufficientPowerLevelFor(
+    "state_default",
+    myPowerlevel
+  );
 
-  const items = [{
-    iconSrc: isSpace ? SpaceLockIC : HashLockIC,
-    text: 'Private (invite only)',
-    type: visibility.INVITE,
-    unsupported: false,
-  }, {
-    iconSrc: isSpace ? SpaceIC : HashIC,
-    text: roomVersion < 8 ? 'Restricted (unsupported: required room upgrade)' : 'Restricted (space member can join)',
-    type: visibility.RESTRICTED,
-    unsupported: roomVersion < 8 || noSpaceParent,
-  }, {
-    iconSrc: isSpace ? SpaceGlobeIC : HashGlobeIC,
-    text: 'Public (anyone can join)',
-    type: visibility.PUBLIC,
-    unsupported: false,
-  }];
+  const items = [
+    {
+      iconSrc: isSpace ? SpaceLockIC : HashLockIC,
+      text: "Private (invite only)",
+      type: visibility.INVITE,
+      unsupported: false,
+    },
+    {
+      iconSrc: isSpace ? SpaceIC : HashIC,
+      text:
+        roomVersion < 8
+          ? "Restricted (unsupported: required room upgrade)"
+          : "Restricted (space member can join)",
+      type: visibility.RESTRICTED,
+      unsupported: roomVersion < 8 || noSpaceParent,
+    },
+    {
+      iconSrc: isSpace ? SpaceGlobeIC : HashGlobeIC,
+      text: "Public (anyone can join)",
+      type: visibility.PUBLIC,
+      unsupported: false,
+    },
+  ];
 
   return (
     <div className="room-visibility">
-      {
-        items.map((item) => (
-          <MenuItem
-            variant={activeType === item.type ? 'positive' : 'surface'}
-            key={item.type}
-            iconSrc={item.iconSrc}
-            onClick={() => setVisibility(item)}
-            disabled={(!canChange || item.unsupported)}
-          >
-            <Text varient="b1">
-              <span>{item.text}</span>
-              <RadioButton isActive={activeType === item.type} />
-            </Text>
-          </MenuItem>
-        ))
-      }
+      {items.map((item) => (
+        <MenuItem
+          variant={activeType === item.type ? "positive" : "surface"}
+          key={item.type}
+          iconSrc={item.iconSrc}
+          onClick={() => setVisibility(item)}
+          disabled={!canChange || item.unsupported}
+        >
+          <Text varient="b1">
+            <span>{item.text}</span>
+            <RadioButton isActive={activeType === item.type} />
+          </Text>
+        </MenuItem>
+      ))}
     </div>
   );
 }
diff --git a/src/app/molecules/room-visibility/RoomVisibility.scss b/src/app/molecules/room-visibility/RoomVisibility.scss
index b3ad9664..48756df0 100644
--- a/src/app/molecules/room-visibility/RoomVisibility.scss
+++ b/src/app/molecules/room-visibility/RoomVisibility.scss
@@ -1,19 +1,19 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .room-visibility {
   & .context-menu__item .text {
     @extend .cp-fx__item-one;
     @extend .cp-fx__row--s-c;
-    
+
     & span:first-child {
       @extend .cp-fx__item-one;
       @extend .cp-txt__ellipsis;
     }
-    
+
     & .radio-btn {
       @include dir.side(margin, var(--sp-tight), 0);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/setting-tile/SettingTile.jsx b/src/app/molecules/setting-tile/SettingTile.jsx
index 6b221965..7bd3cd1d 100644
--- a/src/app/molecules/setting-tile/SettingTile.jsx
+++ b/src/app/molecules/setting-tile/SettingTile.jsx
@@ -1,23 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './SettingTile.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./SettingTile.scss";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
 
 function SettingTile({ title, options, content }) {
   return (
     <div className="setting-tile">
       <div className="setting-tile__content">
         <div className="setting-tile__title">
-          {
-            typeof title === 'string'
-              ? <Text variant="b1">{title}</Text>
-              : title
-          }
+          {typeof title === "string" ? (
+            <Text variant="b1">{title}</Text>
+          ) : (
+            title
+          )}
         </div>
         {content}
       </div>
-      {options !== null && <div className="setting-tile__options">{options}</div>}
+      {options !== null && (
+        <div className="setting-tile__options">{options}</div>
+      )}
     </div>
   );
 }
diff --git a/src/app/molecules/setting-tile/SettingTile.scss b/src/app/molecules/setting-tile/SettingTile.scss
index 322f0019..b9f93a55 100644
--- a/src/app/molecules/setting-tile/SettingTile.scss
+++ b/src/app/molecules/setting-tile/SettingTile.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .setting-tile {
   display: flex;
@@ -12,4 +12,4 @@
   &__options {
     @include dir.side(margin, var(--sp-tight), 0);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
index bc8b7c8f..1dfad011 100644
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
@@ -1,39 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './SidebarAvatar.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./SidebarAvatar.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import Text from '../../atoms/text/Text';
-import Tooltip from '../../atoms/tooltip/Tooltip';
-import { blurOnBubbling } from '../../atoms/button/script';
+import Text from "../../atoms/text/Text";
+import Tooltip from "../../atoms/tooltip/Tooltip";
+import { blurOnBubbling } from "../../atoms/button/script";
 
-const SidebarAvatar = React.forwardRef(({
-  className, tooltip, active, onClick,
-  onContextMenu, avatar, notificationBadge,
-}, ref) => {
-  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>}
-      placement="right"
-    >
-      <button
-        ref={ref}
-        className={classes.join(' ')}
-        type="button"
-        onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
-        onClick={onClick}
-        onContextMenu={onContextMenu}
+const SidebarAvatar = React.forwardRef(
+  (
+    {
+      className,
+      tooltip,
+      active,
+      onClick,
+      onContextMenu,
+      avatar,
+      notificationBadge,
+    },
+    ref
+  ) => {
+    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>}
+        placement="right"
       >
-        {avatar}
-        {notificationBadge}
-      </button>
-    </Tooltip>
-  );
-});
+        <button
+          ref={ref}
+          className={classes.join(" ")}
+          type="button"
+          onMouseUp={(e) => blurOnBubbling(e, ".sidebar-avatar")}
+          onClick={onClick}
+          onContextMenu={onContextMenu}
+        >
+          {avatar}
+          {notificationBadge}
+        </button>
+      </Tooltip>
+    );
+  }
+);
 SidebarAvatar.defaultProps = {
   className: null,
   active: false,
diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
index d76dbc86..fd62b188 100644
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .sidebar-avatar {
   position: relative;
@@ -6,7 +6,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  
+
   & .notification-badge {
     position: absolute;
     @include dir.prop(left, unset, 0);
@@ -61,4 +61,4 @@
   &--active .avatar-container {
     background-color: var(--bg-surface);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.jsx b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
index a9de7bdb..cbb85676 100644
--- a/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
+++ b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
@@ -1,29 +1,33 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './SpaceAddExisting.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./SpaceAddExisting.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { joinRuleToIconSrc, getIdServer, genRoomVia } from '../../../util/matrixUtil';
-import { Debounce } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import {
+  joinRuleToIconSrc,
+  getIdServer,
+  genRoomVia,
+} from "../../../util/matrixUtil";
+import { Debounce } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Checkbox from '../../atoms/button/Checkbox';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-import RoomSelector from '../room-selector/RoomSelector';
-import Dialog from '../dialog/Dialog';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Button from "../../atoms/button/Button";
+import IconButton from "../../atoms/button/IconButton";
+import Checkbox from "../../atoms/button/Checkbox";
+import Input from "../../atoms/input/Input";
+import Spinner from "../../atoms/spinner/Spinner";
+import RoomSelector from "../room-selector/RoomSelector";
+import Dialog from "../dialog/Dialog";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
+import SearchIC from "../../../../public/res/ic/outlined/search.svg";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 function SpaceAddExistingContent({ roomId }) {
   const mountStore = useStore(roomId);
@@ -33,14 +37,12 @@ function SpaceAddExistingContent({ roomId }) {
   const [selected, setSelected] = useState([]);
   const [searchIds, setSearchIds] = useState(null);
   const mx = initMatrix.matrixClient;
-  const {
-    spaces, rooms, directs, roomIdToParents,
-  } = initMatrix.roomList;
+  const { spaces, rooms, directs, roomIdToParents } = initMatrix.roomList;
 
   useEffect(() => {
-    const allIds = [...spaces, ...rooms, ...directs].filter((rId) => (
-      rId !== roomId && !roomIdToParents.get(rId)?.has(roomId)
-    ));
+    const allIds = [...spaces, ...rooms, ...directs].filter(
+      (rId) => rId !== roomId && !roomIdToParents.get(rId)?.has(roomId)
+    );
     setAllRoomIds(allIds);
   }, [roomId]);
 
@@ -68,28 +70,36 @@ function SpaceAddExistingContent({ roomId }) {
         via.push(getIdServer(rId));
       }
 
-      return mx.sendStateEvent(roomId, 'm.space.child', {
-        auto_join: false,
-        suggested: false,
-        via,
-      }, rId);
+      return mx.sendStateEvent(
+        roomId,
+        "m.space.child",
+        {
+          auto_join: false,
+          suggested: false,
+          via,
+        },
+        rId
+      );
     });
 
     mountStore.setItem(true);
     await Promise.allSettled(promises);
     if (mountStore.getItem() !== true) return;
 
-    const allIds = [...spaces, ...rooms, ...directs].filter((rId) => (
-      rId !== roomId && !roomIdToParents.get(rId)?.has(roomId) && !selected.includes(rId)
-    ));
+    const allIds = [...spaces, ...rooms, ...directs].filter(
+      (rId) =>
+        rId !== roomId &&
+        !roomIdToParents.get(rId)?.has(roomId) &&
+        !selected.includes(rId)
+    );
     setAllRoomIds(allIds);
     setProcess(null);
     setSelected([]);
   };
 
   const handleSearch = (ev) => {
-    const term = ev.target.value.toLocaleLowerCase().replace(/\s/g, '');
-    if (term === '') {
+    const term = ev.target.value.toLocaleLowerCase().replace(/\s/g, "");
+    if (term === "") {
       setSearchIds(null);
       return;
     }
@@ -98,9 +108,7 @@ function SpaceAddExistingContent({ roomId }) {
       const searchedIds = allRoomIds.filter((rId) => {
         let name = mx.getRoom(rId)?.name;
         if (!name) return false;
-        name = name.normalize('NFKC')
-          .toLocaleLowerCase()
-          .replace(/\s/g, '');
+        name = name.normalize("NFKC").toLocaleLowerCase().replace(/\s/g, "");
         return name.includes(term);
       });
       setSearchIds(searchedIds);
@@ -108,13 +116,17 @@ function SpaceAddExistingContent({ roomId }) {
   };
   const handleSearchClear = (ev) => {
     const btn = ev.currentTarget;
-    btn.parentElement.searchInput.value = '';
+    btn.parentElement.searchInput.value = "";
     setSearchIds(null);
   };
 
   return (
     <>
-      <form onSubmit={(ev) => { ev.preventDefault(); }}>
+      <form
+        onSubmit={(ev) => {
+          ev.preventDefault();
+        }}
+      >
         <RawIcon size="small" src={SearchIC} />
         <Input
           name="searchInput"
@@ -122,58 +134,69 @@ function SpaceAddExistingContent({ roomId }) {
           placeholder="Search room"
           autoFocus
         />
-        <IconButton size="small" type="button" onClick={handleSearchClear} src={CrossIC} />
+        <IconButton
+          size="small"
+          type="button"
+          onClick={handleSearchClear}
+          src={CrossIC}
+        />
       </form>
       {searchIds?.length === 0 && <Text>No results found</Text>}
-      {
-        (searchIds || allRoomIds).map((rId) => {
-          const room = mx.getRoom(rId);
-          let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
-          if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+      {(searchIds || allRoomIds).map((rId) => {
+        const room = mx.getRoom(rId);
+        let imageSrc =
+          room
+            .getAvatarFallbackMember()
+            ?.getAvatarUrl(mx.baseUrl, 24, 24, "crop") || null;
+        if (imageSrc === null)
+          imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, "crop") || null;
 
-          const parentSet = roomIdToParents.get(rId);
-          const parentNames = parentSet
-            ? [...parentSet].map((parentId) => mx.getRoom(parentId).name)
-            : undefined;
-          const parents = parentNames ? parentNames.join(', ') : null;
+        const parentSet = roomIdToParents.get(rId);
+        const parentNames = parentSet
+          ? [...parentSet].map((parentId) => mx.getRoom(parentId).name)
+          : undefined;
+        const parents = parentNames ? parentNames.join(", ") : null;
 
-          const handleSelect = () => toggleSelection(rId);
+        const handleSelect = () => toggleSelection(rId);
 
-          return (
-            <RoomSelector
-              key={rId}
-              name={room.name}
-              parentName={parents}
-              roomId={rId}
-              imageSrc={directs.has(rId) ? imageSrc : null}
-              iconSrc={
-                directs.has(rId)
-                  ? null
-                  : joinRuleToIconSrc(room.getJoinRule(), room.isSpaceRoom())
-              }
-              isUnread={false}
-              notificationCount={0}
-              isAlert={false}
-              onClick={handleSelect}
-              options={(
-                <Checkbox
-                  isActive={selected.includes(rId)}
-                  variant="positive"
-                  onToggle={handleSelect}
-                  tabIndex={-1}
-                  disabled={process !== null}
-                />
-              )}
-            />
-          );
-        })
-      }
+        return (
+          <RoomSelector
+            key={rId}
+            name={room.name}
+            parentName={parents}
+            roomId={rId}
+            imageSrc={directs.has(rId) ? imageSrc : null}
+            iconSrc={
+              directs.has(rId)
+                ? null
+                : joinRuleToIconSrc(room.getJoinRule(), room.isSpaceRoom())
+            }
+            isUnread={false}
+            notificationCount={0}
+            isAlert={false}
+            onClick={handleSelect}
+            options={
+              <Checkbox
+                isActive={selected.includes(rId)}
+                variant="positive"
+                onToggle={handleSelect}
+                tabIndex={-1}
+                disabled={process !== null}
+              />
+            }
+          />
+        );
+      })}
       {selected.length !== 0 && (
         <div className="space-add-existing__footer">
           {process && <Spinner size="small" />}
-          <Text weight="medium">{process || `${selected.length} item selected`}</Text>
-          { !process && (
-            <Button onClick={handleAdd} variant="primary">Add</Button>
+          <Text weight="medium">
+            {process || `${selected.length} item selected`}
+          </Text>
+          {!process && (
+            <Button onClick={handleAdd} variant="primary">
+              Add
+            </Button>
           )}
         </div>
       )}
@@ -191,7 +214,10 @@ function useVisibilityToggle() {
     const handleOpen = (rId) => setRoomId(rId);
     navigation.on(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.SPACE_ADDEXISTING_OPENED,
+        handleOpen
+      );
     };
   }, []);
 
@@ -209,20 +235,21 @@ function SpaceAddExisting() {
     <Dialog
       isOpen={roomId !== null}
       className="space-add-existing"
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
           {roomId && twemojify(room.name)}
-          <span style={{ color: 'var(--tc-surface-low)' }}> — add existing rooms</span>
+          <span style={{ color: "var(--tc-surface-low)" }}>
+            {" "}
+            — add existing rooms
+          </span>
         </Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
+      }
       onRequestClose={requestClose}
     >
-      {
-        roomId
-          ? <SpaceAddExistingContent roomId={roomId} />
-          : <div />
-      }
+      {roomId ? <SpaceAddExistingContent roomId={roomId} /> : <div />}
     </Dialog>
   );
 }
diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.scss b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
index 3eb3d96a..a353c126 100644
--- a/src/app/molecules/space-add-existing/SpaceAddExisting.scss
+++ b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
@@ -1,9 +1,9 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
+@use "../../partials/dir";
+@use "../../partials/flex";
 
 .space-add-existing {
   height: 100%;
-  
+
   .dialog__content-container {
     padding: 0;
     padding-bottom: 80px;
@@ -74,4 +74,4 @@
   & > button {
     @include dir.side(margin, var(--sp-normal), 0);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/space-options/SpaceOptions.jsx b/src/app/molecules/space-options/SpaceOptions.jsx
index 0c166c6a..7f11d3eb 100644
--- a/src/app/molecules/space-options/SpaceOptions.jsx
+++ b/src/app/molecules/space-options/SpaceOptions.jsx
@@ -1,32 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import { openSpaceSettings, openSpaceManage, openInviteUser } from '../../../client/action/navigation';
-import { markAsRead } from '../../../client/action/notifications';
-import { leave } from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import {
+  openSpaceSettings,
+  openSpaceManage,
+  openInviteUser,
+} from "../../../client/action/navigation";
+import { markAsRead } from "../../../client/action/notifications";
+import { leave } from "../../../client/action/room";
 import {
   createSpaceShortcut,
   deleteSpaceShortcut,
   categorizeSpace,
   unCategorizeSpace,
-} from '../../../client/action/accountData';
+} from "../../../client/action/accountData";
 
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
 
-import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
-import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-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 CategoryIC from "../../../../public/res/ic/outlined/category.svg";
+import CategoryFilledIC from "../../../../public/res/ic/filled/category.svg";
+import TickMarkIC from "../../../../public/res/ic/outlined/tick-mark.svg";
+import AddUserIC from "../../../../public/res/ic/outlined/add-user.svg";
+import SettingsIC from "../../../../public/res/ic/outlined/settings.svg";
+import HashSearchIC from "../../../../public/res/ic/outlined/hash-search.svg";
+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';
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
 
 function SpaceOptions({ roomId, afterOptionSelect }) {
   const mx = initMatrix.matrixClient;
@@ -71,30 +75,40 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   const handleLeaveClick = async () => {
     afterOptionSelect();
     const isConfirmed = await confirmDialog(
-      'Leave space',
+      "Leave space",
       `Are you sure that you want to leave "${room.name}" space?`,
-      'Leave',
-      'danger',
+      "Leave",
+      "danger"
     );
     if (!isConfirmed) return;
     leave(roomId);
   };
 
   return (
-    <div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
-      <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
-      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
+    <div
+      style={{
+        maxWidth: "calc(var(--navigation-drawer-width) - var(--sp-normal))",
+      }}
+    >
+      <MenuHeader>
+        {twemojify(
+          `Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`
+        )}
+      </MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>
+        Mark as read
+      </MenuItem>
       <MenuItem
         onClick={handleCategorizeClick}
         iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}
       >
-        {isCategorized ? 'Uncategorize subspaces' : 'Categorize subspaces'}
+        {isCategorized ? "Uncategorize subspaces" : "Categorize subspaces"}
       </MenuItem>
       <MenuItem
         onClick={handlePinClick}
         iconSrc={isPinned ? PinFilledIC : PinIC}
       >
-        {isPinned ? 'Unpin from sidebar' : 'Pin to sidebar'}
+        {isPinned ? "Unpin from sidebar" : "Pin to sidebar"}
       </MenuItem>
       <MenuItem
         iconSrc={AddUserIC}
@@ -103,8 +117,12 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
       >
         Invite
       </MenuItem>
-      <MenuItem onClick={handleManageRoom} iconSrc={HashSearchIC}>Manage rooms</MenuItem>
-      <MenuItem onClick={handleSettingsClick} iconSrc={SettingsIC}>Settings</MenuItem>
+      <MenuItem onClick={handleManageRoom} iconSrc={HashSearchIC}>
+        Manage rooms
+      </MenuItem>
+      <MenuItem onClick={handleSettingsClick} iconSrc={SettingsIC}>
+        Settings
+      </MenuItem>
       <MenuItem
         variant="danger"
         onClick={handleLeaveClick}
diff --git a/src/app/molecules/sso-buttons/SSOButtons.jsx b/src/app/molecules/sso-buttons/SSOButtons.jsx
index 0a653be9..7b497a39 100644
--- a/src/app/molecules/sso-buttons/SSOButtons.jsx
+++ b/src/app/molecules/sso-buttons/SSOButtons.jsx
@@ -1,10 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './SSOButtons.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./SSOButtons.scss";
 
-import { createTemporaryClient, startSsoLogin } from '../../../client/action/auth';
+import {
+  createTemporaryClient,
+  startSsoLogin,
+} from "../../../client/action/auth";
 
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
 
 function SSOButtons({ type, identityProviders, baseUrl }) {
   const tempClient = createTemporaryClient(baseUrl);
@@ -15,27 +18,39 @@ function SSOButtons({ type, identityProviders, baseUrl }) {
     <div className="sso-buttons">
       {identityProviders
         .sort((idp, idp2) => {
-          if (typeof idp.icon !== 'string') return -1;
+          if (typeof idp.icon !== "string") return -1;
           return idp.name.toLowerCase() > idp2.name.toLowerCase() ? 1 : -1;
         })
-        .map((idp) => (
-          idp.icon
-            ? (
-              <button key={idp.id} type="button" className="sso-btn" onClick={() => handleClick(idp.id)}>
-                <img className="sso-btn__img" src={tempClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
-              </button>
-            ) : <Button key={idp.id} className="sso-btn__text-only" onClick={() => handleClick(idp.id)}>{`Login with ${idp.name}`}</Button>
-        ))}
+        .map((idp) =>
+          idp.icon ? (
+            <button
+              key={idp.id}
+              type="button"
+              className="sso-btn"
+              onClick={() => handleClick(idp.id)}
+            >
+              <img
+                className="sso-btn__img"
+                src={tempClient.mxcUrlToHttp(idp.icon)}
+                alt={idp.name}
+              />
+            </button>
+          ) : (
+            <Button
+              key={idp.id}
+              className="sso-btn__text-only"
+              onClick={() => handleClick(idp.id)}
+            >{`Login with ${idp.name}`}</Button>
+          )
+        )}
     </div>
   );
 }
 
 SSOButtons.propTypes = {
-  identityProviders: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
+  identityProviders: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   baseUrl: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['sso', 'cas']).isRequired,
+  type: PropTypes.oneOf(["sso", "cas"]).isRequired,
 };
 
 export default SSOButtons;
diff --git a/src/app/molecules/sso-buttons/SSOButtons.scss b/src/app/molecules/sso-buttons/SSOButtons.scss
index 06506704..9523a0a4 100644
--- a/src/app/molecules/sso-buttons/SSOButtons.scss
+++ b/src/app/molecules/sso-buttons/SSOButtons.scss
@@ -1,7 +1,7 @@
 .sso-buttons {
   display: flex;
   justify-content: center;
-  flex-wrap: wrap;  
+  flex-wrap: wrap;
 }
 
 .sso-btn {
@@ -22,4 +22,4 @@
       color: var(--tc-link);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
index 15be02d2..b42db8e2 100644
--- a/src/app/organisms/create-room/CreateRoom.jsx
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -1,40 +1,43 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './CreateRoom.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./CreateRoom.scss";
 
-import { twemojify } from '../../../util/twemojify';
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { selectRoom, openReusableContextMenu } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
-import { isRoomAliasAvailable, getIdServer } from '../../../util/matrixUtil';
-import { getEventCords } from '../../../util/common';
+import { twemojify } from "../../../util/twemojify";
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import {
+  selectRoom,
+  openReusableContextMenu,
+} from "../../../client/action/navigation";
+import * as roomActions from "../../../client/action/room";
+import { isRoomAliasAvailable, getIdServer } from "../../../util/matrixUtil";
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Toggle from '../../atoms/button/Toggle';
-import IconButton from '../../atoms/button/IconButton';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-import SegmentControl from '../../atoms/segmented-controls/SegmentedControls';
-import Dialog from '../../molecules/dialog/Dialog';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import Toggle from "../../atoms/button/Toggle";
+import IconButton from "../../atoms/button/IconButton";
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
+import Input from "../../atoms/input/Input";
+import Spinner from "../../atoms/spinner/Spinner";
+import SegmentControl from "../../atoms/segmented-controls/SegmentedControls";
+import Dialog from "../../molecules/dialog/Dialog";
+import SettingTile from "../../molecules/setting-tile/SettingTile";
 
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
-import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import HashPlusIC from "../../../../public/res/ic/outlined/hash-plus.svg";
+import SpacePlusIC from "../../../../public/res/ic/outlined/space-plus.svg";
+import HashIC from "../../../../public/res/ic/outlined/hash.svg";
+import HashLockIC from "../../../../public/res/ic/outlined/hash-lock.svg";
+import HashGlobeIC from "../../../../public/res/ic/outlined/hash-globe.svg";
+import SpaceIC from "../../../../public/res/ic/outlined/space.svg";
+import SpaceLockIC from "../../../../public/res/ic/outlined/space-lock.svg";
+import SpaceGlobeIC from "../../../../public/res/ic/outlined/space-globe.svg";
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
-  const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
+  const [joinRule, setJoinRule] = useState(parentId ? "restricted" : "invite");
   const [isEncrypted, setIsEncrypted] = useState(true);
   const [isCreatingRoom, setIsCreatingRoom] = useState(false);
   const [creatingError, setCreatingError] = useState(null);
@@ -77,11 +80,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
 
     const name = target.name.value;
     let topic = target.topic.value;
-    if (topic.trim() === '') topic = undefined;
+    if (topic.trim() === "") topic = undefined;
     let roomAlias;
-    if (joinRule === 'public') {
+    if (joinRule === "public") {
       roomAlias = addressRef?.current?.value;
-      if (roomAlias.trim() === '') roomAlias = undefined;
+      if (roomAlias.trim() === "") roomAlias = undefined;
     }
 
     const powerLevel = roleIndex === 1 ? 101 : undefined;
@@ -92,17 +95,17 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
         topic,
         joinRule,
         alias: roomAlias,
-        isEncrypted: (isSpace || joinRule === 'public') ? false : isEncrypted,
+        isEncrypted: isSpace || joinRule === "public" ? false : isEncrypted,
         powerLevel,
         isSpace,
         parentId,
       });
     } catch (e) {
-      if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
-        setCreatingError('ERROR: Invalid characters in address');
+      if (e.message === "M_UNKNOWN: Invalid characters in room alias") {
+        setCreatingError("ERROR: Invalid characters in address");
         setIsValidAddress(false);
-      } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
-        setCreatingError('ERROR: This address is already in use');
+      } else if (e.message === "M_ROOM_IN_USE: Room alias already taken") {
+        setCreatingError("ERROR: This address is already in use");
         setIsValidAddress(false);
       } else setCreatingError(e.message);
       setIsCreatingRoom(false);
@@ -118,7 +121,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
     setTimeout(async () => {
       if (myAddress !== addressRef.current.value) return;
       const roomAlias = addressRef.current.value;
-      if (roomAlias === '') return;
+      if (roomAlias === "") return;
       const roomAddress = `#${roomAlias}:${userHs}`;
 
       if (await isRoomAliasAvailable(roomAddress)) {
@@ -129,37 +132,42 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
     }, 1000);
   };
 
-  const joinRules = ['invite', 'restricted', 'public'];
-  const joinRuleShortText = ['Private', 'Restricted', 'Public'];
-  const joinRuleText = ['Private (invite only)', 'Restricted (space member can join)', 'Public (anyone can join)'];
+  const joinRules = ["invite", "restricted", "public"];
+  const joinRuleShortText = ["Private", "Restricted", "Public"];
+  const joinRuleText = [
+    "Private (invite only)",
+    "Restricted (space member can join)",
+    "Public (anyone can join)",
+  ];
   const jrRoomIC = [HashLockIC, HashIC, HashGlobeIC];
   const jrSpaceIC = [SpaceLockIC, SpaceIC, SpaceGlobeIC];
   const handleJoinRule = (evt) => {
     openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
+      "bottom",
+      getEventCords(evt, ".btn-surface"),
       (closeMenu) => (
         <>
           <MenuHeader>Visibility (who can join)</MenuHeader>
-          {
-            joinRules.map((rule) => (
-              <MenuItem
-                key={rule}
-                variant={rule === joinRule ? 'positive' : 'surface'}
-                iconSrc={
-                  isSpace
-                    ? jrSpaceIC[joinRules.indexOf(rule)]
-                    : jrRoomIC[joinRules.indexOf(rule)]
-                }
-                onClick={() => { closeMenu(); setJoinRule(rule); }}
-                disabled={!parentId && rule === 'restricted'}
-              >
-                { joinRuleText[joinRules.indexOf(rule)] }
-              </MenuItem>
-            ))
-          }
+          {joinRules.map((rule) => (
+            <MenuItem
+              key={rule}
+              variant={rule === joinRule ? "positive" : "surface"}
+              iconSrc={
+                isSpace
+                  ? jrSpaceIC[joinRules.indexOf(rule)]
+                  : jrRoomIC[joinRules.indexOf(rule)]
+              }
+              onClick={() => {
+                closeMenu();
+                setJoinRule(rule);
+              }}
+              disabled={!parentId && rule === "restricted"}
+            >
+              {joinRuleText[joinRules.indexOf(rule)]}
+            </MenuItem>
+          ))}
         </>
-      ),
+      )
     );
   };
 
@@ -168,54 +176,84 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
       <form className="create-room__form" onSubmit={handleSubmit}>
         <SettingTile
           title="Visibility"
-          options={(
+          options={
             <Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
               {joinRuleShortText[joinRules.indexOf(joinRule)]}
             </Button>
-          )}
-          content={<Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>}
+          }
+          content={
+            <Text variant="b3">{`Select who can join this ${
+              isSpace ? "space" : "room"
+            }.`}</Text>
+          }
         />
-        {joinRule === 'public' && (
+        {joinRule === "public" && (
           <div>
-            <Text className="create-room__address__label" variant="b2">{isSpace ? 'Space address' : 'Room address'}</Text>
+            <Text className="create-room__address__label" variant="b2">
+              {isSpace ? "Space address" : "Room address"}
+            </Text>
             <div className="create-room__address">
               <Text variant="b1">#</Text>
               <Input
                 value={addressValue}
                 onChange={validateAddress}
-                state={(isValidAddress === false) ? 'error' : 'normal'}
+                state={isValidAddress === false ? "error" : "normal"}
                 forwardRef={addressRef}
                 placeholder="my_address"
                 required
               />
               <Text variant="b1">{`:${userHs}`}</Text>
             </div>
-            {isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}:${userHs} is already in use`}</span></Text>}
+            {isValidAddress === false && (
+              <Text className="create-room__address__tip" variant="b3">
+                <span
+                  style={{ color: "var(--bg-danger)" }}
+                >{`#${addressValue}:${userHs} is already in use`}</span>
+              </Text>
+            )}
           </div>
         )}
-        {!isSpace && joinRule !== 'public' && (
+        {!isSpace && joinRule !== "public" && (
           <SettingTile
             title="Enable end-to-end encryption"
-            options={<Toggle isActive={isEncrypted} onToggle={setIsEncrypted} />}
-            content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
+            options={
+              <Toggle isActive={isEncrypted} onToggle={setIsEncrypted} />
+            }
+            content={
+              <Text variant="b3">
+                You can’t disable this later. Bridges & most bots won’t work
+                yet.
+              </Text>
+            }
           />
         )}
         <SettingTile
           title="Select your role"
-          options={(
+          options={
             <SegmentControl
               selected={roleIndex}
-              segments={[{ text: 'Admin' }, { text: 'Founder' }]}
+              segments={[{ text: "Admin" }, { text: "Founder" }]}
               onSelect={setRoleIndex}
             />
-          )}
-          content={(
-            <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
-          )}
+          }
+          content={
+            <Text variant="b3">
+              Selecting Admin sets 100 power level whereas Founder sets 101.
+            </Text>
+          }
+        />
+        <Input
+          name="topic"
+          minHeight={174}
+          resizable
+          label="Topic (optional)"
         />
-        <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
         <div className="create-room__name-wrapper">
-          <Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
+          <Input
+            name="name"
+            label={`${isSpace ? "Space" : "Room"} name`}
+            required
+          />
           <Button
             disabled={isValidAddress === false || isCreatingRoom}
             iconSrc={isSpace ? SpacePlusIC : HashPlusIC}
@@ -228,10 +266,14 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
         {isCreatingRoom && (
           <div className="create-room__loading">
             <Spinner size="small" />
-            <Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
+            <Text>{`Creating ${isSpace ? "space" : "room"}...`}</Text>
           </div>
         )}
-        {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
+        {typeof creatingError === "string" && (
+          <Text className="create-room__error" variant="b3">
+            {creatingError}
+          </Text>
+        )}
       </form>
     </div>
   );
@@ -257,7 +299,10 @@ function useWindowToggle() {
     };
     navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.CREATE_ROOM_OPENED,
+        handleOpen
+      );
     };
   }, []);
 
@@ -275,27 +320,28 @@ function CreateRoom() {
   return (
     <Dialog
       isOpen={create !== null}
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
-          {parentId ? twemojify(room.name) : 'Home'}
-          <span style={{ color: 'var(--tc-surface-low)' }}>
-            {` — create ${isSpace ? 'space' : 'room'}`}
+          {parentId ? twemojify(room.name) : "Home"}
+          <span style={{ color: "var(--tc-surface-low)" }}>
+            {` — create ${isSpace ? "space" : "room"}`}
           </span>
         </Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />
+      }
       onRequestClose={onRequestClose}
     >
-      {
-        create
-          ? (
-            <CreateRoomContent
-              isSpace={isSpace}
-              parentId={parentId}
-              onRequestClose={onRequestClose}
-            />
-          ) : <div />
-      }
+      {create ? (
+        <CreateRoomContent
+          isSpace={isSpace}
+          parentId={parentId}
+          onRequestClose={onRequestClose}
+        />
+      ) : (
+        <div />
+      )}
     </Dialog>
   );
 }
diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
index ccd3ea3b..d17b5770 100644
--- a/src/app/organisms/create-room/CreateRoom.scss
+++ b/src/app/organisms/create-room/CreateRoom.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .create-room {
   margin: var(--sp-normal);
@@ -49,7 +49,7 @@
       @include dir.prop(
         border-radius,
         var(--bo-radius) 0 0 var(--bo-radius),
-        0 var(--bo-radius) var(--bo-radius) 0,
+        0 var(--bo-radius) var(--bo-radius) 0
       );
     }
     & .text:last-child {
@@ -57,7 +57,7 @@
       @include dir.prop(
         border-radius,
         0 var(--bo-radius) var(--bo-radius) 0,
-        var(--bo-radius) 0 0 var(--bo-radius),
+        var(--bo-radius) 0 0 var(--bo-radius)
       );
     }
   }
@@ -87,4 +87,4 @@
     text-align: center;
     color: var(--bg-danger) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/drag-drop/DragDrop.jsx b/src/app/organisms/drag-drop/DragDrop.jsx
index e92f8a70..d7468535 100644
--- a/src/app/organisms/drag-drop/DragDrop.jsx
+++ b/src/app/organisms/drag-drop/DragDrop.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './DragDrop.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./DragDrop.scss";
 
-import RawModal from '../../atoms/modal/RawModal';
-import Text from '../../atoms/text/Text';
+import RawModal from "../../atoms/modal/RawModal";
+import Text from "../../atoms/text/Text";
 
 function DragDrop({ isOpen }) {
   return (
@@ -12,7 +12,9 @@ function DragDrop({ isOpen }) {
       overlayClassName="drag-drop__overlay"
       isOpen={isOpen}
     >
-      <Text variant="h2" weight="medium">Drop file to upload</Text>
+      <Text variant="h2" weight="medium">
+        Drop file to upload
+      </Text>
     </RawModal>
   );
 }
diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx
index 84c41306..b8937c6d 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoard.jsx
@@ -1,36 +1,36 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './EmojiBoard.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./EmojiBoard.scss";
 
-import parse from 'html-react-parser';
-import twemoji from 'twemoji';
-import { emojiGroups, emojis } from './emoji';
-import { getRelevantPacks } from './custom-emoji';
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import AsyncSearch from '../../../util/AsyncSearch';
-import { addRecentEmoji, getRecentEmojis } from './recent';
-import { TWEMOJI_BASE_URL } from '../../../util/twemojify';
+import parse from "html-react-parser";
+import twemoji from "twemoji";
+import { emojiGroups, emojis } from "./emoji";
+import { getRelevantPacks } from "./custom-emoji";
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import AsyncSearch from "../../../util/AsyncSearch";
+import { addRecentEmoji, getRecentEmojis } from "./recent";
+import { TWEMOJI_BASE_URL } from "../../../util/twemojify";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import Input from '../../atoms/input/Input';
-import ScrollView from '../../atoms/scroll/ScrollView';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import Input from "../../atoms/input/Input";
+import ScrollView from "../../atoms/scroll/ScrollView";
 
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
-import RecentClockIC from '../../../../public/res/ic/outlined/recent-clock.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
-import DogIC from '../../../../public/res/ic/outlined/dog.svg';
-import CupIC from '../../../../public/res/ic/outlined/cup.svg';
-import BallIC from '../../../../public/res/ic/outlined/ball.svg';
-import PhotoIC from '../../../../public/res/ic/outlined/photo.svg';
-import BulbIC from '../../../../public/res/ic/outlined/bulb.svg';
-import PeaceIC from '../../../../public/res/ic/outlined/peace.svg';
-import FlagIC from '../../../../public/res/ic/outlined/flag.svg';
+import SearchIC from "../../../../public/res/ic/outlined/search.svg";
+import RecentClockIC from "../../../../public/res/ic/outlined/recent-clock.svg";
+import EmojiIC from "../../../../public/res/ic/outlined/emoji.svg";
+import DogIC from "../../../../public/res/ic/outlined/dog.svg";
+import CupIC from "../../../../public/res/ic/outlined/cup.svg";
+import BallIC from "../../../../public/res/ic/outlined/ball.svg";
+import PhotoIC from "../../../../public/res/ic/outlined/photo.svg";
+import BulbIC from "../../../../public/res/ic/outlined/bulb.svg";
+import PeaceIC from "../../../../public/res/ic/outlined/peace.svg";
+import FlagIC from "../../../../public/res/ic/outlined/flag.svg";
 
 const ROW_EMOJIS_COUNT = 7;
 
@@ -55,7 +55,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
                     unicode: emoji.unicode,
                     shortcodes: emoji.shortcodes?.toString(),
                     hexcode: emoji.hexcode,
-                    loading: 'lazy',
+                    loading: "lazy",
                   }),
                   base: TWEMOJI_BASE_URL,
                 })
@@ -90,7 +90,9 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
       <Text className="emoji-group__header" variant="b2" weight="bold">
         {name}
       </Text>
-      {groupEmojis.length !== 0 && <div className="emoji-set noselect">{getEmojiBoard()}</div>}
+      {groupEmojis.length !== 0 && (
+        <div className="emoji-set noselect">{getEmojiBoard()}</div>
+      )}
     </div>
   );
 });
@@ -104,19 +106,22 @@ EmojiGroup.propTypes = {
       hexcode: PropTypes.string,
       mxc: PropTypes.string,
       shortcode: PropTypes.string,
-      shortcodes: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+      shortcodes: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
     })
   ).isRequired,
 };
 
 const asyncSearch = new AsyncSearch();
-asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 40 });
+asyncSearch.setup(emojis, { keys: ["shortcode"], isContain: true, limit: 40 });
 function SearchedEmoji() {
   const [searchedEmojis, setSearchedEmojis] = useState(null);
 
   function handleSearchEmoji(resultEmojis, term) {
-    if (term === '' || resultEmojis.length === 0) {
-      if (term === '') setSearchedEmojis(null);
+    if (term === "" || resultEmojis.length === 0) {
+      if (term === "") setSearchedEmojis(null);
       else setSearchedEmojis({ emojis: [] });
       return;
     }
@@ -135,7 +140,11 @@ function SearchedEmoji() {
   return (
     <EmojiGroup
       key="-1"
-      name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'}
+      name={
+        searchedEmojis.emojis.length === 0
+          ? "No search result found"
+          : "Search results"
+      }
       groupEmojis={searchedEmojis.emojis}
     />
   );
@@ -146,15 +155,15 @@ function EmojiBoard({ onSelect, searchRef }) {
   const emojiInfo = useRef(null);
 
   function isTargetNotEmoji(target) {
-    return target.classList.contains('emoji') === false;
+    return target.classList.contains("emoji") === false;
   }
   function getEmojiDataFromTarget(target) {
-    const unicode = target.getAttribute('unicode');
-    const hexcode = target.getAttribute('hexcode');
-    const mxc = target.getAttribute('data-mx-emoticon');
-    let shortcodes = target.getAttribute('shortcodes');
-    if (typeof shortcodes === 'undefined') shortcodes = undefined;
-    else shortcodes = shortcodes.split(',');
+    const unicode = target.getAttribute("unicode");
+    const hexcode = target.getAttribute("hexcode");
+    const mxc = target.getAttribute("data-mx-emoticon");
+    let shortcodes = target.getAttribute("shortcodes");
+    if (typeof shortcodes === "undefined") shortcodes = undefined;
+    else shortcodes = shortcodes.split(",");
     return {
       unicode,
       hexcode,
@@ -187,17 +196,17 @@ function EmojiBoard({ onSelect, searchRef }) {
     const { shortcodes, unicode } = getEmojiDataFromTarget(emoji);
     const { src } = e.target;
 
-    if (typeof shortcodes === 'undefined') {
-      searchRef.current.placeholder = 'Search';
+    if (typeof shortcodes === "undefined") {
+      searchRef.current.placeholder = "Search";
       setEmojiInfo({
-        unicode: '🙂',
-        shortcode: 'slight_smile',
-        src: 'https://twemoji.maxcdn.com/v/13.1.0/72x72/1f642.png',
+        unicode: "🙂",
+        shortcode: "slight_smile",
+        src: "https://twemoji.maxcdn.com/v/13.1.0/72x72/1f642.png",
       });
       return;
     }
     if (searchRef.current.placeholder === shortcodes[0]) return;
-    searchRef.current.setAttribute('placeholder', shortcodes[0]);
+    searchRef.current.setAttribute("placeholder", shortcodes[0]);
     setEmojiInfo({ shortcode: shortcodes[0], src, unicode });
   }
 
@@ -224,9 +233,10 @@ function EmojiBoard({ onSelect, searchRef }) {
       const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
       const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
       if (room) {
-        const packs = getRelevantPacks(room.client, [room, ...parentRooms]).filter(
-          (pack) => pack.getEmojis().length !== 0
-        );
+        const packs = getRelevantPacks(room.client, [
+          room,
+          ...parentRooms,
+        ]).filter((pack) => pack.getEmojis().length !== 0);
 
         // Set an index for each pack so that we know where to jump when the user uses the nav
         for (let i = 0; i < packs.length; i += 1) {
@@ -237,7 +247,7 @@ function EmojiBoard({ onSelect, searchRef }) {
     };
 
     const onOpen = () => {
-      searchRef.current.value = '';
+      searchRef.current.value = "";
       handleSearchChange();
 
       // only update when board is getting opened to prevent shifting UI
@@ -247,8 +257,14 @@ function EmojiBoard({ onSelect, searchRef }) {
     navigation.on(cons.events.navigation.ROOM_SELECTED, updateAvailableEmoji);
     navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, onOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, updateAvailableEmoji);
-      navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, onOpen);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SELECTED,
+        updateAvailableEmoji
+      );
+      navigation.removeListener(
+        cons.events.navigation.EMOJIBOARD_OPENED,
+        onOpen
+      );
     };
   }, []);
 
@@ -257,7 +273,8 @@ function EmojiBoard({ onSelect, searchRef }) {
     const $emojiContent = scrollEmojisRef.current.firstElementChild;
     const groupCount = $emojiContent.childElementCount;
     if (groupCount > emojiGroups.length) {
-      tabIndex += groupCount - emojiGroups.length - availableEmojis.length - recentOffset;
+      tabIndex +=
+        groupCount - emojiGroups.length - availableEmojis.length - recentOffset;
     }
     $emojiContent.children[tabIndex].scrollIntoView();
   }
@@ -284,7 +301,7 @@ function EmojiBoard({ onSelect, searchRef }) {
                   onClick={() => openGroup(recentOffset + pack.packIndex)}
                   src={src}
                   key={pack.packIndex}
-                  tooltip={pack.displayName ?? 'Unknown'}
+                  tooltip={pack.displayName ?? "Unknown"}
                   tooltipPlacement="left"
                   isImage
                 />
@@ -293,17 +310,19 @@ function EmojiBoard({ onSelect, searchRef }) {
           </div>
           <div className="emoji-board__nav-twemoji">
             {[
-              [0, EmojiIC, 'Smilies'],
-              [1, DogIC, 'Animals'],
-              [2, CupIC, 'Food'],
-              [3, BallIC, 'Activities'],
-              [4, PhotoIC, 'Travel'],
-              [5, BulbIC, 'Objects'],
-              [6, PeaceIC, 'Symbols'],
-              [7, FlagIC, 'Flags'],
+              [0, EmojiIC, "Smilies"],
+              [1, DogIC, "Animals"],
+              [2, CupIC, "Food"],
+              [3, BallIC, "Activities"],
+              [4, PhotoIC, "Travel"],
+              [5, BulbIC, "Objects"],
+              [6, PeaceIC, "Symbols"],
+              [7, FlagIC, "Flags"],
             ].map(([indx, ico, name]) => (
               <IconButton
-                onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
+                onClick={() =>
+                  openGroup(recentOffset + availableEmojis.length + indx)
+                }
                 key={indx}
                 src={ico}
                 tooltip={name}
@@ -316,7 +335,11 @@ function EmojiBoard({ onSelect, searchRef }) {
       <div className="emoji-board__content">
         <div className="emoji-board__content__search">
           <RawIcon size="small" src={SearchIC} />
-          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
+          <Input
+            onChange={handleSearchChange}
+            forwardRef={searchRef}
+            placeholder="Search"
+          />
         </div>
         <div className="emoji-board__content__emojis">
           <ScrollView ref={scrollEmojisRef} autoHide>
@@ -327,20 +350,24 @@ function EmojiBoard({ onSelect, searchRef }) {
               )}
               {availableEmojis.map((pack) => (
                 <EmojiGroup
-                  name={pack.displayName ?? 'Unknown'}
+                  name={pack.displayName ?? "Unknown"}
                   key={pack.packIndex}
                   groupEmojis={pack.getEmojis()}
                   className="custom-emoji-group"
                 />
               ))}
               {emojiGroups.map((group) => (
-                <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
+                <EmojiGroup
+                  key={group.name}
+                  name={group.name}
+                  groupEmojis={group.emojis}
+                />
               ))}
             </div>
           </ScrollView>
         </div>
         <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
+          <div>{parse(twemoji.parse("🙂", { base: TWEMOJI_BASE_URL }))}</div>
           <Text>:slight_smile:</Text>
         </div>
       </div>
diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss
index 683026f0..5d271d83 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.scss
+++ b/src/app/organisms/emoji-board/EmojiBoard.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .emoji-board {
   --emoji-board-height: 390px;
@@ -8,7 +8,7 @@
   display: flex;
   max-width: 90vw;
   max-height: 90vh;
-  
+
   &__content {
     @extend .cp-fx__item-one;
     @extend .cp-fx__column;
@@ -28,7 +28,7 @@
     @include dir.side(border, none, 1px solid var(--bg-surface-border));
 
     position: relative;
-    
+
     & .ic-btn-surface {
       opacity: 0.8;
     }
@@ -48,7 +48,7 @@
 .emoji-board__content__search {
   padding: var(--sp-extra-tight);
   position: relative;
-  
+
   & .ic-raw {
     position: absolute;
     @include dir.prop(left, var(--sp-normal), unset);
@@ -101,7 +101,7 @@
   --emoji-padding: 6px;
   position: relative;
   margin-bottom: var(--sp-normal);
-  
+
   &__header {
     position: sticky;
     top: 0;
@@ -134,4 +134,4 @@
       border-radius: var(--bo-radius);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
index 32b7a837..8e406743 100644
--- a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from "react";
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import settings from '../../../client/state/settings';
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import settings from "../../../client/state/settings";
 
-import ContextMenu from '../../atoms/context-menu/ContextMenu';
-import EmojiBoard from './EmojiBoard';
+import ContextMenu from "../../atoms/context-menu/ContextMenu";
+import EmojiBoard from "./EmojiBoard";
 
 let requestCallback = null;
 let isEmojiBoardVisible = false;
@@ -43,15 +43,16 @@ function EmojiBoardOpener() {
   useEffect(() => {
     navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
     return () => {
-      navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+      navigation.removeListener(
+        cons.events.navigation.EMOJIBOARD_OPENED,
+        openEmojiBoard
+      );
     };
   }, []);
 
   return (
     <ContextMenu
-      content={(
-        <EmojiBoard onSelect={addEmoji} searchRef={searchRef} />
-      )}
+      content={<EmojiBoard onSelect={addEmoji} searchRef={searchRef} />}
       afterToggle={afterEmojiBoardToggle}
       render={(toggleMenu) => (
         <input
@@ -59,15 +60,15 @@ function EmojiBoardOpener() {
           onClick={toggleMenu}
           type="button"
           style={{
-            width: '32px',
-            height: '32px',
-            backgroundColor: 'transparent',
-            position: 'absolute',
+            width: "32px",
+            height: "32px",
+            backgroundColor: "transparent",
+            position: "absolute",
             top: 0,
             left: 0,
             padding: 0,
-            border: 'none',
-            visibility: 'hidden',
+            border: "none",
+            visibility: "hidden",
           }}
         />
       )}
diff --git a/src/app/organisms/emoji-board/custom-emoji.js b/src/app/organisms/emoji-board/custom-emoji.js
index 09b60522..01f242be 100644
--- a/src/app/organisms/emoji-board/custom-emoji.js
+++ b/src/app/organisms/emoji-board/custom-emoji.js
@@ -1,10 +1,10 @@
-import { emojis } from './emoji';
+import { emojis } from "./emoji";
 
 // https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
 
 class ImagePack {
   static parsePack(eventId, packContent) {
-    if (!eventId || typeof packContent?.images !== 'object') {
+    if (!eventId || typeof packContent?.images !== "object") {
       return null;
     }
 
@@ -24,7 +24,7 @@ class ImagePack {
 
     this.displayName = pack.display_name;
     this.avatarUrl = pack.avatar_url;
-    this.usage = pack.usage ?? ['emoticon', 'sticker'];
+    this.usage = pack.usage ?? ["emoticon", "sticker"];
     this.attribution = pack.attribution;
   }
 
@@ -41,14 +41,18 @@ class ImagePack {
 
       if (!mxc) return;
       const image = {
-        shortcode, mxc, body, usage, info,
+        shortcode,
+        mxc,
+        body,
+        usage,
+        info,
       };
 
       this.images.set(shortcode, image);
-      if (usage.includes('emoticon')) {
+      if (usage.includes("emoticon")) {
         this.emoticons.push(image);
       }
-      if (usage.includes('sticker')) {
+      if (usage.includes("sticker")) {
         this.stickers.push(image);
       }
     });
@@ -79,19 +83,19 @@ class ImagePack {
   }
 
   setAvatarUrl(avatarUrl) {
-    this._updatePackProperty('avatar_url', avatarUrl);
+    this._updatePackProperty("avatar_url", avatarUrl);
   }
 
   setDisplayName(displayName) {
-    this._updatePackProperty('display_name', displayName);
+    this._updatePackProperty("display_name", displayName);
   }
 
   setAttribution(attribution) {
-    this._updatePackProperty('attribution', attribution);
+    this._updatePackProperty("attribution", attribution);
   }
 
   setUsage(usage) {
-    this._updatePackProperty('usage', usage);
+    this._updatePackProperty("usage", usage);
   }
 
   addImage(key, imgContent) {
@@ -112,7 +116,8 @@ class ImagePack {
     if (this.content.images[key] === undefined) return;
     const copyImages = {};
     Object.keys(this.content.images).forEach((imgKey) => {
-      copyImages[imgKey === key ? newKey : imgKey] = this.content.images[imgKey];
+      copyImages[imgKey === key ? newKey : imgKey] =
+        this.content.images[imgKey];
     });
     this.content.images = copyImages;
     this.applyImages(this.content);
@@ -125,64 +130,74 @@ class ImagePack {
   }
 
   setImageUrl(key, url) {
-    this._updateImageProperty(key, 'url', url);
+    this._updateImageProperty(key, "url", url);
   }
 
   setImageBody(key, body) {
-    this._updateImageProperty(key, 'body', body);
+    this._updateImageProperty(key, "body", body);
   }
 
   setImageInfo(key, info) {
-    this._updateImageProperty(key, 'info', info);
+    this._updateImageProperty(key, "info", info);
   }
 
   setImageUsage(key, usage) {
-    this._updateImageProperty(key, 'usage', usage);
+    this._updateImageProperty(key, "usage", usage);
   }
 }
 
 function getGlobalImagePacks(mx) {
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
-  if (typeof globalContent !== 'object') return [];
+  const globalContent = mx
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent();
+  if (typeof globalContent !== "object") return [];
 
   const { rooms } = globalContent;
-  if (typeof rooms !== 'object') return [];
+  if (typeof rooms !== "object") return [];
 
   const roomIds = Object.keys(rooms);
 
   const packs = roomIds.flatMap((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return [];
+    if (typeof rooms[roomId] !== "object") return [];
     const room = mx.getRoom(roomId);
     if (!room) return [];
     const stateKeys = Object.keys(rooms[roomId]);
 
-    return stateKeys.map((stateKey) => {
-      const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-      const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
-      if (pack) {
-        pack.displayName ??= room.name;
-        pack.avatarUrl ??= room.getMxcAvatarUrl();
-      }
-      return pack;
-    }).filter((pack) => pack !== null);
+    return stateKeys
+      .map((stateKey) => {
+        const data = room.currentState.getStateEvents(
+          "im.ponies.room_emotes",
+          stateKey
+        );
+        const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
+        if (pack) {
+          pack.displayName ??= room.name;
+          pack.avatarUrl ??= room.getMxcAvatarUrl();
+        }
+        return pack;
+      })
+      .filter((pack) => pack !== null);
   });
 
   return packs;
 }
 
 function getUserImagePack(mx) {
-  const accountDataEmoji = mx.getAccountData('im.ponies.user_emotes');
+  const accountDataEmoji = mx.getAccountData("im.ponies.user_emotes");
   if (!accountDataEmoji) {
     return null;
   }
 
-  const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
-  if (userImagePack) userImagePack.displayName ??= 'Personal Emoji';
+  const userImagePack = ImagePack.parsePack(
+    mx.getUserId(),
+    accountDataEmoji.event.content
+  );
+  if (userImagePack) userImagePack.displayName ??= "Personal Emoji";
   return userImagePack;
 }
 
 function getRoomImagePacks(room) {
-  const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
+  const dataEvents = room.currentState.getStateEvents("im.ponies.room_emotes");
 
   return dataEvents
     .map((data) => {
@@ -210,7 +225,7 @@ function getRelevantPacks(mx, rooms) {
   return [].concat(
     userPack ?? [],
     globalPacks,
-    roomsPack.filter((pack) => !globalPackIds.has(pack.id)),
+    roomsPack.filter((pack) => !globalPackIds.has(pack.id))
   );
 }
 
@@ -256,12 +271,18 @@ function getEmojiForCompletion(mx, rooms) {
       allEmoji.set(emoji.shortcode, emoji);
     });
 
-  return Array.from(allEmoji.values()).concat(emojis.filter((e) => !allEmoji.has(e.shortcode)));
+  return Array.from(allEmoji.values()).concat(
+    emojis.filter((e) => !allEmoji.has(e.shortcode))
+  );
 }
 
 export {
   ImagePack,
-  getUserImagePack, getGlobalImagePacks, getRoomImagePacks,
-  getShortcodeToEmoji, getShortcodeToCustomEmoji,
-  getRelevantPacks, getEmojiForCompletion,
+  getUserImagePack,
+  getGlobalImagePacks,
+  getRoomImagePacks,
+  getShortcodeToEmoji,
+  getShortcodeToCustomEmoji,
+  getRelevantPacks,
+  getEmojiForCompletion,
 };
diff --git a/src/app/organisms/emoji-board/emoji.js b/src/app/organisms/emoji-board/emoji.js
index 3cbd0b88..d352bade 100644
--- a/src/app/organisms/emoji-board/emoji.js
+++ b/src/app/organisms/emoji-board/emoji.js
@@ -1,40 +1,49 @@
-import emojisData from 'emojibase-data/en/compact.json';
-import joypixels from 'emojibase-data/en/shortcodes/joypixels.json';
-import emojibase from 'emojibase-data/en/shortcodes/emojibase.json';
+import emojisData from "emojibase-data/en/compact.json";
+import joypixels from "emojibase-data/en/shortcodes/joypixels.json";
+import emojibase from "emojibase-data/en/shortcodes/emojibase.json";
 
-const emojiGroups = [{
-  name: 'Smileys & people',
-  order: 0,
-  emojis: [],
-}, {
-  name: 'Animals & nature',
-  order: 1,
-  emojis: [],
-}, {
-  name: 'Food & drinks',
-  order: 2,
-  emojis: [],
-}, {
-  name: 'Activity',
-  order: 3,
-  emojis: [],
-}, {
-  name: 'Travel & places',
-  order: 4,
-  emojis: [],
-}, {
-  name: 'Objects',
-  order: 5,
-  emojis: [],
-}, {
-  name: 'Symbols',
-  order: 6,
-  emojis: [],
-}, {
-  name: 'Flags',
-  order: 7,
-  emojis: [],
-}];
+const emojiGroups = [
+  {
+    name: "Smileys & people",
+    order: 0,
+    emojis: [],
+  },
+  {
+    name: "Animals & nature",
+    order: 1,
+    emojis: [],
+  },
+  {
+    name: "Food & drinks",
+    order: 2,
+    emojis: [],
+  },
+  {
+    name: "Activity",
+    order: 3,
+    emojis: [],
+  },
+  {
+    name: "Travel & places",
+    order: 4,
+    emojis: [],
+  },
+  {
+    name: "Objects",
+    order: 5,
+    emojis: [],
+  },
+  {
+    name: "Symbols",
+    order: 6,
+    emojis: [],
+  },
+  {
+    name: "Flags",
+    order: 7,
+    emojis: [],
+  },
+];
 Object.freeze(emojiGroups);
 
 function addEmoji(emoji, order) {
@@ -47,7 +56,8 @@ function addToGroup(emoji) {
   else if (emoji.group === 6) addEmoji(emoji, 3);
   else if (emoji.group === 5) addEmoji(emoji, 4);
   else if (emoji.group === 7) addEmoji(emoji, 5);
-  else if (emoji.group === 8 || typeof emoji.group === 'undefined') addEmoji(emoji, 6);
+  else if (emoji.group === 8 || typeof emoji.group === "undefined")
+    addEmoji(emoji, 6);
   else if (emoji.group === 9) addEmoji(emoji, 7);
 }
 
@@ -64,6 +74,4 @@ emojisData.forEach((emoji) => {
   emojis.push(em);
 });
 
-export {
-  emojis, emojiGroups,
-};
+export { emojis, emojiGroups };
diff --git a/src/app/organisms/emoji-board/recent.js b/src/app/organisms/emoji-board/recent.js
index dff67fb0..e3446ee5 100644
--- a/src/app/organisms/emoji-board/recent.js
+++ b/src/app/organisms/emoji-board/recent.js
@@ -1,10 +1,13 @@
-import initMatrix from '../../../client/initMatrix';
-import { emojis } from './emoji';
+import initMatrix from "../../../client/initMatrix";
+import { emojis } from "./emoji";
 
-const eventType = 'io.element.recent_emoji';
+const eventType = "io.element.recent_emoji";
 
 function getRecentEmojisRaw() {
-  return initMatrix.matrixClient.getAccountData(eventType)?.getContent().recent_emoji ?? [];
+  return (
+    initMatrix.matrixClient.getAccountData(eventType)?.getContent()
+      .recent_emoji ?? []
+  );
 }
 
 export function getRecentEmojis(limit) {
diff --git a/src/app/organisms/emoji-verification/EmojiVerification.jsx b/src/app/organisms/emoji-verification/EmojiVerification.jsx
index 6fe81cdd..bea09722 100644
--- a/src/app/organisms/emoji-verification/EmojiVerification.jsx
+++ b/src/app/organisms/emoji-verification/EmojiVerification.jsx
@@ -1,24 +1,24 @@
 /* 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 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 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 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';
+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);
@@ -30,11 +30,14 @@ function EmojiVerificationContent({ data, requestClose }) {
 
   const beginVerification = async () => {
     if (
-      isCrossVerified(mx.deviceId)
-      && (mx.getCrossSigningId() === null || await mx.crypto.crossSigningInfo.isStoredInKeyCache('self_signing') === false)
+      isCrossVerified(mx.deviceId) &&
+      (mx.getCrossSigningId() === null ||
+        (await mx.crypto.crossSigningInfo.isStoredInKeyCache(
+          "self_signing"
+        )) === false)
     ) {
       if (!hasPrivateKey(getDefaultSSKey())) {
-        const keyData = await accessSecretStorage('Emoji verification');
+        const keyData = await accessSecretStorage("Emoji verification");
         if (!keyData) {
           request.cancel();
           return;
@@ -45,15 +48,15 @@ function EmojiVerificationContent({ data, requestClose }) {
     setProcess(true);
     await request.accept();
 
-    const verifier = request.beginKeyVerification('m.sas.v1', targetDevice);
+    const verifier = request.beginKeyVerification("m.sas.v1", targetDevice);
 
     const handleVerifier = (sasData) => {
-      verifier.off('show_sas', handleVerifier);
+      verifier.off("show_sas", handleVerifier);
       if (!mountStore.getItem()) return;
       setSas(sasData);
       setProcess(false);
     };
-    verifier.on('show_sas', handleVerifier);
+    verifier.on("show_sas", handleVerifier);
     await verifier.verify();
   };
 
@@ -82,9 +85,9 @@ function EmojiVerificationContent({ data, requestClose }) {
 
     if (request === null) return null;
     const req = request;
-    req.on('change', handleChange);
+    req.on("change", handleChange);
     return () => {
-      req.off('change', handleChange);
+      req.off("change", handleChange);
       if (req.cancelled === false && req.done === false) {
         req.cancel();
       }
@@ -101,21 +104,31 @@ function EmojiVerificationContent({ data, requestClose }) {
   if (sas !== null) {
     return (
       <div className="emoji-verification__content">
-        <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+        <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}`}>
+            <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() : (
+          {process ? (
+            renderWait()
+          ) : (
             <>
-              <Button variant="primary" onClick={sasConfirm}>They match</Button>
-              <Button onClick={sasMismatch}>{'They don\'t match'}</Button>
+              <Button variant="primary" onClick={sasConfirm}>
+                They match
+              </Button>
+              <Button onClick={sasMismatch}>{"They don't match"}</Button>
             </>
           )}
         </div>
@@ -127,9 +140,7 @@ function EmojiVerificationContent({ data, requestClose }) {
     return (
       <div className="emoji-verification__content">
         <Text>Please accept the request from other device.</Text>
-        <div className="emoji-verification__buttons">
-          {renderWait()}
-        </div>
+        <div className="emoji-verification__buttons">{renderWait()}</div>
       </div>
     );
   }
@@ -138,11 +149,13 @@ function EmojiVerificationContent({ data, requestClose }) {
     <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>
-        }
+        {process ? (
+          renderWait()
+        ) : (
+          <Button variant="primary" onClick={beginVerification}>
+            Accept
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -161,10 +174,13 @@ function useVisibilityToggle() {
       setData({ request, targetDevice });
     };
     navigation.on(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
-    mx.on('crypto.verification.request', handleOpen);
+    mx.on("crypto.verification.request", handleOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
-      mx.removeListener('crypto.verification.request', handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.EMOJI_VERIFICATION_OPENED,
+        handleOpen
+      );
+      mx.removeListener("crypto.verification.request", handleOpen);
     };
   }, []);
 
@@ -180,19 +196,21 @@ function EmojiVerification() {
     <Dialog
       isOpen={data !== null}
       className="emoji-verification"
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
           Emoji verification
         </Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
+      }
       onRequestClose={requestClose}
     >
-      {
-        data !== null
-          ? <EmojiVerificationContent data={data} requestClose={requestClose} />
-          : <div />
-      }
+      {data !== null ? (
+        <EmojiVerificationContent data={data} requestClose={requestClose} />
+      ) : (
+        <div />
+      )}
     </Dialog>
   );
 }
diff --git a/src/app/organisms/emoji-verification/EmojiVerification.scss b/src/app/organisms/emoji-verification/EmojiVerification.scss
index 4e6dc112..7d8b3f53 100644
--- a/src/app/organisms/emoji-verification/EmojiVerification.scss
+++ b/src/app/organisms/emoji-verification/EmojiVerification.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .emoji-verification {
   &__content {
diff --git a/src/app/organisms/invite-list/InviteList.jsx b/src/app/organisms/invite-list/InviteList.jsx
index 231928fe..891bf8d8 100644
--- a/src/app/organisms/invite-list/InviteList.jsx
+++ b/src/app/organisms/invite-list/InviteList.jsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './InviteList.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./InviteList.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import * as roomActions from "../../../client/action/room";
+import { selectRoom, selectTab } from "../../../client/action/navigation";
 
-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 PopupWindow from '../../molecules/popup-window/PopupWindow';
-import RoomTile from '../../molecules/room-tile/RoomTile';
+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 PopupWindow from "../../molecules/popup-window/PopupWindow";
+import RoomTile from "../../molecules/room-tile/RoomTile";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function InviteList({ isOpen, onRequestClose }) {
   const [procInvite, changeProcInvite] = useState(new Set());
@@ -34,9 +34,10 @@ function InviteList({ isOpen, onRequestClose }) {
     changeProcInvite(new Set(Array.from(procInvite)));
 
     const rl = initMatrix.roomList;
-    const totalInvites = rl.inviteDirects.size + rl.inviteRooms.size + rl.inviteSpaces.size;
+    const totalInvites =
+      rl.inviteDirects.size + rl.inviteRooms.size + rl.inviteSpaces.size;
     const room = initMatrix.matrixClient.getRoom(roomId);
-    const isRejected = room === null || room?.getMyMembership() !== 'join';
+    const isRejected = room === null || room?.getMyMembership() !== "join";
     if (!isRejected) {
       if (room.isSpaceRoom()) selectTab(roomId);
       else selectRoom(roomId);
@@ -46,10 +47,16 @@ function InviteList({ isOpen, onRequestClose }) {
   }
 
   useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.INVITELIST_UPDATED, updateInviteList);
+    initMatrix.roomList.on(
+      cons.events.roomList.INVITELIST_UPDATED,
+      updateInviteList
+    );
 
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, updateInviteList);
+      initMatrix.roomList.removeListener(
+        cons.events.roomList.INVITELIST_UPDATED,
+        updateInviteList
+      );
     };
   }, [procInvite]);
 
@@ -60,23 +67,33 @@ function InviteList({ isOpen, onRequestClose }) {
     const roomName = myRoom.name;
     let roomAlias = myRoom.getCanonicalAlias();
     if (!roomAlias) roomAlias = myRoom.roomId;
-    const inviterName = myRoom.getMember(mx.getUserId())?.events?.member?.getSender?.() ?? '';
+    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')}
+        avatarSrc={initMatrix.matrixClient
+          .getRoom(roomId)
+          .getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, "crop")}
         id={roomAlias}
         inviterName={inviterName}
         options={
-          procInvite.has(myRoom.roomId)
-            ? (<Spinner size="small" />)
-            : (
-              <div className="invite-btn__container">
-                <Button onClick={() => rejectInvite(myRoom.roomId)}>Reject</Button>
-                <Button onClick={() => acceptInvite(myRoom.roomId)} variant="primary">Accept</Button>
-              </div>
-            )
+          procInvite.has(myRoom.roomId) ? (
+            <Spinner size="small" />
+          ) : (
+            <div className="invite-btn__container">
+              <Button onClick={() => rejectInvite(myRoom.roomId)}>
+                Reject
+              </Button>
+              <Button
+                onClick={() => acceptInvite(myRoom.roomId)}
+                variant="primary"
+              >
+                Accept
+              </Button>
+            </div>
+          )
         }
       />
     );
@@ -86,52 +103,65 @@ function InviteList({ isOpen, onRequestClose }) {
     <PopupWindow
       isOpen={isOpen}
       title="Invites"
-      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      contentOptions={
+        <IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />
+      }
       onRequestClose={onRequestClose}
     >
       <div className="invites-content">
-        { initMatrix.roomList.inviteDirects.size !== 0 && (
+        {initMatrix.roomList.inviteDirects.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3" weight="bold">Direct Messages</Text>
+            <Text variant="b3" weight="bold">
+              Direct Messages
+            </Text>
           </div>
         )}
-        {
-          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() || roomId}
-                options={
-                  procInvite.has(myRoom.roomId)
-                    ? (<Spinner size="small" />)
-                    : (
-                      <div className="invite-btn__container">
-                        <Button onClick={() => rejectInvite(myRoom.roomId, true)}>Reject</Button>
-                        <Button onClick={() => acceptInvite(myRoom.roomId, true)} variant="primary">Accept</Button>
-                      </div>
-                    )
-                }
-              />
-            );
-          })
-        }
-        { initMatrix.roomList.inviteSpaces.size !== 0 && (
+        {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() || roomId}
+              options={
+                procInvite.has(myRoom.roomId) ? (
+                  <Spinner size="small" />
+                ) : (
+                  <div className="invite-btn__container">
+                    <Button onClick={() => rejectInvite(myRoom.roomId, true)}>
+                      Reject
+                    </Button>
+                    <Button
+                      onClick={() => acceptInvite(myRoom.roomId, true)}
+                      variant="primary"
+                    >
+                      Accept
+                    </Button>
+                  </div>
+                )
+              }
+            />
+          );
+        })}
+        {initMatrix.roomList.inviteSpaces.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3" weight="bold">Spaces</Text>
+            <Text variant="b3" weight="bold">
+              Spaces
+            </Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
+        {Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile)}
 
-        { initMatrix.roomList.inviteRooms.size !== 0 && (
+        {initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3" weight="bold">Rooms</Text>
+            <Text variant="b3" weight="bold">
+              Rooms
+            </Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
+        {Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile)}
       </div>
     </PopupWindow>
   );
diff --git a/src/app/organisms/invite-list/InviteList.scss b/src/app/organisms/invite-list/InviteList.scss
index da1968c3..24e99148 100644
--- a/src/app/organisms/invite-list/InviteList.scss
+++ b/src/app/organisms/invite-list/InviteList.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .invites-content {
   @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
@@ -23,4 +23,4 @@
   & .invite-btn__container .btn-surface {
     @include dir.side(margin, 0, var(--sp-normal));
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx
index 75195102..ed51a147 100644
--- a/src/app/organisms/invite-user/InviteUser.jsx
+++ b/src/app/organisms/invite-user/InviteUser.jsx
@@ -1,27 +1,25 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './InviteUser.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./InviteUser.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import * as roomActions from '../../../client/action/room';
-import { selectRoom } from '../../../client/action/navigation';
-import { hasDMWith, hasDevices } from '../../../util/matrixUtil';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import * as roomActions from "../../../client/action/room";
+import { selectRoom } from "../../../client/action/navigation";
+import { hasDMWith, hasDevices } from "../../../util/matrixUtil";
 
-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 Input from '../../atoms/input/Input';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import RoomTile from '../../molecules/room-tile/RoomTile';
+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 Input from "../../atoms/input/Input";
+import PopupWindow from "../../molecules/popup-window/PopupWindow";
+import RoomTile from "../../molecules/room-tile/RoomTile";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
+import UserIC from "../../../../public/res/ic/outlined/user.svg";
 
-function InviteUser({
-  isOpen, roomId, searchTerm, onRequestClose,
-}) {
+function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
   const [isSearching, updateIsSearching] = useState(false);
   const [searchQuery, updateSearchQuery] = useState({});
   const [users, updateUsers] = useState([]);
@@ -56,7 +54,7 @@ function InviteUser({
 
   function onDMCreated(newRoomId) {
     const myDMPartnerId = roomIdToUserId.get(newRoomId);
-    if (typeof myDMPartnerId === 'undefined') return;
+    if (typeof myDMPartnerId === "undefined") return;
 
     createdDM.set(myDMPartnerId, newRoomId);
     roomIdToUserId.delete(newRoomId);
@@ -68,19 +66,27 @@ function InviteUser({
 
   async function searchUser(username) {
     const inputUsername = username.trim();
-    if (isSearching || inputUsername === '' || inputUsername === searchQuery.username) return;
-    const isInputUserId = inputUsername[0] === '@' && inputUsername.indexOf(':') > 1;
+    if (
+      isSearching ||
+      inputUsername === "" ||
+      inputUsername === searchQuery.username
+    )
+      return;
+    const isInputUserId =
+      inputUsername[0] === "@" && inputUsername.indexOf(":") > 1;
     updateIsSearching(true);
     updateSearchQuery({ username: inputUsername });
 
     if (isInputUserId) {
       try {
         const result = await mx.getProfileInfo(inputUsername);
-        updateUsers([{
-          user_id: inputUsername,
-          display_name: result.displayname,
-          avatar_url: result.avatar_url,
-        }]);
+        updateUsers([
+          {
+            user_id: inputUsername,
+            display_name: result.displayname,
+            avatar_url: result.avatar_url,
+          },
+        ]);
       } catch (e) {
         updateSearchQuery({ error: `${inputUsername} not found!` });
       }
@@ -91,13 +97,15 @@ function InviteUser({
           limit: 20,
         });
         if (result.results.length === 0) {
-          updateSearchQuery({ error: `No matches found for "${inputUsername}"!` });
+          updateSearchQuery({
+            error: `No matches found for "${inputUsername}"!`,
+          });
           updateIsSearching(false);
           return;
         }
         updateUsers(result.results);
       } catch (e) {
-        updateSearchQuery({ error: 'Something went wrong!' });
+        updateSearchQuery({ error: "Something went wrong!" });
       }
     }
     updateIsSearching(false);
@@ -117,19 +125,22 @@ function InviteUser({
       procUserError.delete(userId);
       updateUserProcError(getMapCopy(procUserError));
 
-      const result = await roomActions.createDM(userId, await hasDevices(userId));
+      const result = await roomActions.createDM(
+        userId,
+        await hasDevices(userId)
+      );
       roomIdToUserId.set(result.room_id, userId);
       updateRoomIdToUserId(getMapCopy(roomIdToUserId));
     } catch (e) {
       deleteUserFromProc(userId);
-      if (typeof e.message === 'string') procUserError.set(userId, e.message);
-      else procUserError.set(userId, 'Something went wrong!');
+      if (typeof e.message === "string") procUserError.set(userId, e.message);
+      else procUserError.set(userId, "Something went wrong!");
       updateUserProcError(getMapCopy(procUserError));
     }
   }
 
   async function inviteToRoom(userId) {
-    if (typeof roomId === 'undefined') return;
+    if (typeof roomId === "undefined") return;
     try {
       addUserToProc(userId);
       procUserError.delete(userId);
@@ -142,15 +153,25 @@ function InviteUser({
       deleteUserFromProc(userId);
     } catch (e) {
       deleteUserFromProc(userId);
-      if (typeof e.message === 'string') procUserError.set(userId, e.message);
-      else procUserError.set(userId, 'Something went wrong!');
+      if (typeof e.message === "string") procUserError.set(userId, e.message);
+      else procUserError.set(userId, "Something went wrong!");
       updateUserProcError(getMapCopy(procUserError));
     }
   }
 
   function renderUserList() {
     const renderOptions = (userId) => {
-      const messageJSX = (message, isPositive) => <Text variant="b2"><span style={{ color: isPositive ? 'var(--bg-positive)' : 'var(--bg-negative)' }}>{message}</span></Text>;
+      const messageJSX = (message, isPositive) => (
+        <Text variant="b2">
+          <span
+            style={{
+              color: isPositive ? "var(--bg-positive)" : "var(--bg-negative)",
+            }}
+          >
+            {message}
+          </span>
+        </Text>
+      );
 
       if (mx.getUserId() === userId) return null;
       if (procUsers.has(userId)) {
@@ -158,42 +179,68 @@ function InviteUser({
       }
       if (createdDM.has(userId)) {
         // eslint-disable-next-line max-len
-        return <Button onClick={() => { selectRoom(createdDM.get(userId)); onRequestClose(); }}>Open</Button>;
+        return (
+          <Button
+            onClick={() => {
+              selectRoom(createdDM.get(userId));
+              onRequestClose();
+            }}
+          >
+            Open
+          </Button>
+        );
       }
       if (invitedUserIds.has(userId)) {
-        return messageJSX('Invited', true);
+        return messageJSX("Invited", true);
       }
-      if (typeof roomId === 'string') {
+      if (typeof roomId === "string") {
         const member = mx.getRoom(roomId).getMember(userId);
         if (member !== null) {
           const userMembership = member.membership;
           switch (userMembership) {
-            case 'join':
-              return messageJSX('Already joined', true);
-            case 'invite':
-              return messageJSX('Already Invited', true);
-            case 'ban':
-              return messageJSX('Banned', false);
+            case "join":
+              return messageJSX("Already joined", true);
+            case "invite":
+              return messageJSX("Already Invited", true);
+            case "ban":
+              return messageJSX("Banned", false);
             default:
           }
         }
       }
-      return (typeof roomId === 'string')
-        ? <Button onClick={() => inviteToRoom(userId)} variant="primary">Invite</Button>
-        : <Button onClick={() => createDM(userId)} variant="primary">Message</Button>;
+      return typeof roomId === "string" ? (
+        <Button onClick={() => inviteToRoom(userId)} variant="primary">
+          Invite
+        </Button>
+      ) : (
+        <Button onClick={() => createDM(userId)} variant="primary">
+          Message
+        </Button>
+      );
     };
     const renderError = (userId) => {
       if (!procUserError.has(userId)) return null;
-      return <Text variant="b2"><span style={{ color: 'var(--bg-danger)' }}>{procUserError.get(userId)}</span></Text>;
+      return (
+        <Text variant="b2">
+          <span style={{ color: "var(--bg-danger)" }}>
+            {procUserError.get(userId)}
+          </span>
+        </Text>
+      );
     };
 
     return users.map((user) => {
       const userId = user.user_id;
-      const name = typeof user.display_name === 'string' ? user.display_name : userId;
+      const name =
+        typeof user.display_name === "string" ? user.display_name : userId;
       return (
         <RoomTile
           key={userId}
-          avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
+          avatarSrc={
+            typeof user.avatar_url === "string"
+              ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, "crop")
+              : null
+          }
           name={name}
           id={userId}
           options={renderOptions(userId)}
@@ -204,7 +251,7 @@ function InviteUser({
   }
 
   useEffect(() => {
-    if (isOpen && typeof searchTerm === 'string') searchUser(searchTerm);
+    if (isOpen && typeof searchTerm === "string") searchUser(searchTerm);
     return () => {
       updateIsSearching(false);
       updateSearchQuery({});
@@ -220,44 +267,66 @@ function InviteUser({
   useEffect(() => {
     initMatrix.roomList.on(cons.events.roomList.ROOM_CREATED, onDMCreated);
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_CREATED, onDMCreated);
+      initMatrix.roomList.removeListener(
+        cons.events.roomList.ROOM_CREATED,
+        onDMCreated
+      );
     };
   }, [isOpen, procUsers, createdDM, roomIdToUserId]);
 
   return (
     <PopupWindow
       isOpen={isOpen}
-      title={(typeof roomId === 'string' ? `Invite to ${mx.getRoom(roomId).name}` : 'Direct message')}
-      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      title={
+        typeof roomId === "string"
+          ? `Invite to ${mx.getRoom(roomId).name}`
+          : "Direct message"
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />
+      }
       onRequestClose={onRequestClose}
     >
       <div className="invite-user">
-        <form className="invite-user__form" onSubmit={(e) => { e.preventDefault(); searchUser(usernameRef.current.value); }}>
-          <Input value={searchTerm} forwardRef={usernameRef} label="Name or userId" />
-          <Button disabled={isSearching} iconSrc={UserIC} variant="primary" type="submit">Search</Button>
+        <form
+          className="invite-user__form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            searchUser(usernameRef.current.value);
+          }}
+        >
+          <Input
+            value={searchTerm}
+            forwardRef={usernameRef}
+            label="Name or userId"
+          />
+          <Button
+            disabled={isSearching}
+            iconSrc={UserIC}
+            variant="primary"
+            type="submit"
+          >
+            Search
+          </Button>
         </form>
         <div className="invite-user__search-status">
-          {
-            typeof searchQuery.username !== 'undefined' && isSearching && (
-              <div className="flex--center">
-                <Spinner size="small" />
-                <Text variant="b2">{`Searching for user "${searchQuery.username}"...`}</Text>
-              </div>
-            )
-          }
-          {
-            typeof searchQuery.username !== 'undefined' && !isSearching && (
-              <Text variant="b2">{`Search result for user "${searchQuery.username}"`}</Text>
-            )
-          }
-          {
-            searchQuery.error && <Text className="invite-user__search-error" variant="b2">{searchQuery.error}</Text>
-          }
+          {typeof searchQuery.username !== "undefined" && isSearching && (
+            <div className="flex--center">
+              <Spinner size="small" />
+              <Text variant="b2">{`Searching for user "${searchQuery.username}"...`}</Text>
+            </div>
+          )}
+          {typeof searchQuery.username !== "undefined" && !isSearching && (
+            <Text variant="b2">{`Search result for user "${searchQuery.username}"`}</Text>
+          )}
+          {searchQuery.error && (
+            <Text className="invite-user__search-error" variant="b2">
+              {searchQuery.error}
+            </Text>
+          )}
         </div>
-        { users.length !== 0 && (
-          <div className="invite-user__content">
-            {renderUserList()}
-          </div>
+        {users.length !== 0 && (
+          <div className="invite-user__content">{renderUserList()}</div>
         )}
       </div>
     </PopupWindow>
diff --git a/src/app/organisms/invite-user/InviteUser.scss b/src/app/organisms/invite-user/InviteUser.scss
index 30c9b921..f0df20de 100644
--- a/src/app/organisms/invite-user/InviteUser.scss
+++ b/src/app/organisms/invite-user/InviteUser.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .invite-user {
   margin-top: var(--sp-extra-tight);
@@ -21,7 +21,7 @@
       }
     }
   }
-  
+
   &__search-status {
     margin-top: var(--sp-extra-loose);
     margin-bottom: var(--sp-tight);
@@ -42,4 +42,4 @@
       align-self: flex-end;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/join-alias/JoinAlias.jsx b/src/app/organisms/join-alias/JoinAlias.jsx
index bb90bf35..c6b8c252 100644
--- a/src/app/organisms/join-alias/JoinAlias.jsx
+++ b/src/app/organisms/join-alias/JoinAlias.jsx
@@ -1,23 +1,23 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './JoinAlias.scss';
+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, selectTab } from '../../../client/action/navigation';
+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, selectTab } 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 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 CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 const ALIAS_OR_ID_REG = /^[#|!].+:.+\..+$/;
 
@@ -44,7 +44,10 @@ function JoinAliasContent({ term, requestClose }) {
     };
     initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleJoin);
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleJoin);
+      initMatrix.roomList.removeListener(
+        cons.events.roomList.ROOM_JOINED,
+        handleJoin
+      );
     };
   }, [lastJoinId]);
 
@@ -52,15 +55,15 @@ function JoinAliasContent({ term, requestClose }) {
     e.preventDefault();
     mountStore.setItem(true);
     const alias = e.target.alias.value;
-    if (alias?.trim() === '') return;
+    if (alias?.trim() === "") return;
     if (alias.match(ALIAS_OR_ID_REG) === null) {
-      setError('Invalid address.');
+      setError("Invalid address.");
       return;
     }
-    setProcess('Looking for address...');
+    setProcess("Looking for address...");
     setError(undefined);
     let via;
-    if (alias.startsWith('#')) {
+    if (alias.startsWith("#")) {
       try {
         const aliasData = await mx.resolveRoomAlias(alias);
         via = aliasData?.servers.slice(0, 3) || [];
@@ -70,7 +73,9 @@ function JoinAliasContent({ term, requestClose }) {
       } 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.`);
+        setError(
+          `Unable to find room/space with ${alias}. Either room/space is private or doesn't exist.`
+        );
       }
     }
     try {
@@ -81,30 +86,31 @@ function JoinAliasContent({ term, requestClose }) {
     } catch {
       if (!mountStore.getItem()) return;
       setProcess(false);
-      setError(`Unable to join ${alias}. Either room/space is private or doesn't exist.`);
+      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>}
+      <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>
-        }
+        {process ? (
+          <>
+            <Spinner size="small" />
+            <Text>{process}</Text>
+          </>
+        ) : (
+          <Button variant="primary" type="submit">
+            Join
+          </Button>
+        )}
       </div>
     </form>
   );
@@ -126,7 +132,10 @@ function useWindowToggle() {
     };
     navigation.on(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.JOIN_ALIAS_OPENED,
+        handleOpen
+      );
     };
   }, []);
 
@@ -141,13 +150,21 @@ function JoinAlias() {
   return (
     <Dialog
       isOpen={data !== null}
-      title={(
-        <Text variant="s1" weight="medium" primary>Join with address</Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      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 /> }
+      {data ? (
+        <JoinAliasContent term={data.term} requestClose={requestClose} />
+      ) : (
+        <div />
+      )}
     </Dialog>
   );
 }
diff --git a/src/app/organisms/join-alias/JoinAlias.scss b/src/app/organisms/join-alias/JoinAlias.scss
index b3684b0b..4a37a6e2 100644
--- a/src/app/organisms/join-alias/JoinAlias.scss
+++ b/src/app/organisms/join-alias/JoinAlias.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .join-alias {
   padding: var(--sp-normal);
@@ -17,4 +17,4 @@
     display: flex;
     gap: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/navigation/Directs.jsx b/src/app/organisms/navigation/Directs.jsx
index e65c8afc..84f2c9bf 100644
--- a/src/app/organisms/navigation/Directs.jsx
+++ b/src/app/organisms/navigation/Directs.jsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import Postie from '../../../util/Postie';
-import { roomIdByActivity } from '../../../util/sort';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import Postie from "../../../util/Postie";
+import { roomIdByActivity } from "../../../util/sort";
 
-import RoomsCategory from './RoomsCategory';
+import RoomsCategory from "./RoomsCategory";
 
 const drawerPostie = new Postie();
 function Directs({ size }) {
@@ -15,7 +15,10 @@ function Directs({ size }) {
   const { roomList, notifications } = initMatrix;
   const [directIds, setDirectIds] = useState([]);
 
-  useEffect(() => setDirectIds([...roomList.directs].sort(roomIdByActivity)), [size]);
+  useEffect(
+    () => setDirectIds([...roomList.directs].sort(roomIdByActivity)),
+    [size]
+  );
 
   useEffect(() => {
     const handleTimeline = (event, room, toStartOfTimeline, removed, data) => {
@@ -29,26 +32,28 @@ function Directs({ size }) {
       });
       setDirectIds(newDirectIds);
     };
-    mx.on('Room.timeline', handleTimeline);
+    mx.on("Room.timeline", handleTimeline);
     return () => {
-      mx.removeListener('Room.timeline', handleTimeline);
+      mx.removeListener("Room.timeline", handleTimeline);
     };
   }, [directIds]);
 
   useEffect(() => {
     const selectorChanged = (selectedRoomId, prevSelectedRoomId) => {
-      if (!drawerPostie.hasTopic('selector-change')) return;
+      if (!drawerPostie.hasTopic("selector-change")) return;
       const addresses = [];
-      if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
-      if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
+      if (drawerPostie.hasSubscriber("selector-change", selectedRoomId))
+        addresses.push(selectedRoomId);
+      if (drawerPostie.hasSubscriber("selector-change", prevSelectedRoomId))
+        addresses.push(prevSelectedRoomId);
       if (addresses.length === 0) return;
-      drawerPostie.post('selector-change', addresses, selectedRoomId);
+      drawerPostie.post("selector-change", addresses, selectedRoomId);
     };
 
     const notiChanged = (roomId, total, prevTotal) => {
       if (total === prevTotal) return;
-      if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
-        drawerPostie.post('unread-change', roomId);
+      if (drawerPostie.hasTopicAndSubscriber("unread-change", roomId)) {
+        drawerPostie.post("unread-change", roomId);
       }
     };
 
@@ -56,13 +61,29 @@ function Directs({ size }) {
     notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
     notifications.on(cons.events.notifications.MUTE_TOGGLED, notiChanged);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
-      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
-      notifications.removeListener(cons.events.notifications.MUTE_TOGGLED, notiChanged);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SELECTED,
+        selectorChanged
+      );
+      notifications.removeListener(
+        cons.events.notifications.NOTI_CHANGED,
+        notiChanged
+      );
+      notifications.removeListener(
+        cons.events.notifications.MUTE_TOGGLED,
+        notiChanged
+      );
     };
   }, []);
 
-  return <RoomsCategory name="People" hideHeader roomIds={directIds} drawerPostie={drawerPostie} />;
+  return (
+    <RoomsCategory
+      name="People"
+      hideHeader
+      roomIds={directIds}
+      drawerPostie={drawerPostie}
+    />
+  );
 }
 Directs.propTypes = {
   size: PropTypes.number.isRequired,
diff --git a/src/app/organisms/navigation/Drawer.jsx b/src/app/organisms/navigation/Drawer.jsx
index fb75ee5b..3911fb91 100644
--- a/src/app/organisms/navigation/Drawer.jsx
+++ b/src/app/organisms/navigation/Drawer.jsx
@@ -1,35 +1,39 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './Drawer.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./Drawer.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
 
-import Text from '../../atoms/text/Text';
-import ScrollView from '../../atoms/scroll/ScrollView';
+import Text from "../../atoms/text/Text";
+import ScrollView from "../../atoms/scroll/ScrollView";
 
-import DrawerHeader from './DrawerHeader';
-import DrawerBreadcrumb from './DrawerBreadcrumb';
-import Home from './Home';
-import Directs from './Directs';
+import DrawerHeader from "./DrawerHeader";
+import DrawerBreadcrumb from "./DrawerBreadcrumb";
+import Home from "./Home";
+import Directs from "./Directs";
 
-import { useForceUpdate } from '../../hooks/useForceUpdate';
-import { useSelectedTab } from '../../hooks/useSelectedTab';
-import { useSelectedSpace } from '../../hooks/useSelectedSpace';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
+import { useSelectedTab } from "../../hooks/useSelectedTab";
+import { useSelectedSpace } from "../../hooks/useSelectedSpace";
 
 function useSystemState() {
   const [systemState, setSystemState] = useState(null);
 
   useEffect(() => {
     const handleSystemState = (state) => {
-      if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
-        setSystemState({ status: 'Connection lost!' });
+      if (
+        state === "ERROR" ||
+        state === "RECONNECTING" ||
+        state === "STOPPED"
+      ) {
+        setSystemState({ status: "Connection lost!" });
       }
       if (systemState !== null) setSystemState(null);
     };
-    initMatrix.matrixClient.on('sync', handleSystemState);
+    initMatrix.matrixClient.on("sync", handleSystemState);
     return () => {
-      initMatrix.matrixClient.removeListener('sync', handleSystemState);
+      initMatrix.matrixClient.removeListener("sync", handleSystemState);
     };
   }, [systemState]);
 
@@ -50,7 +54,10 @@ function Drawer() {
     };
     roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleUpdate);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleUpdate);
+      roomList.removeListener(
+        cons.events.roomList.ROOMLIST_UPDATED,
+        handleUpdate
+      );
     };
   }, []);
 
@@ -66,22 +73,23 @@ function Drawer() {
     <div className="drawer">
       <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
       <div className="drawer__content-wrapper">
-        {navigation.selectedSpacePath.length > 1 && selectedTab !== cons.tabs.DIRECTS && (
-          <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 size={roomList.directs.size} />
-              }
+              {selectedTab !== cons.tabs.DIRECTS ? (
+                <Home spaceId={spaceId} />
+              ) : (
+                <Directs size={roomList.directs.size} />
+              )}
             </div>
           </ScrollView>
         </div>
       </div>
-      { systemState !== null && (
+      {systemState !== null && (
         <div className="drawer__state">
           <Text>{systemState.status}</Text>
         </div>
diff --git a/src/app/organisms/navigation/Drawer.scss b/src/app/organisms/navigation/Drawer.scss
index 4e54c5fa..65d20dca 100644
--- a/src/app/organisms/navigation/Drawer.scss
+++ b/src/app/organisms/navigation/Drawer.scss
@@ -1,14 +1,11 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .drawer {
   @extend .cp-fx__column;
   @extend .cp-fx__item-one;
   min-width: 0;
-  @include dir.side(border,
-    none,
-    1px solid var(--bg-surface-border),
-  );
+  @include dir.side(border, none, 1px solid var(--bg-surface-border));
 
   & .header {
     padding: var(--sp-extra-tight);
@@ -44,13 +41,14 @@
     position: absolute;
     top: 0;
     z-index: 99;
-    content: '';
+    content: "";
     display: inline-block;
     width: 100%;
     height: 8px;
     background-image: linear-gradient(
       to bottom,
       var(--bg-surface-low),
-      var(--bg-surface-low-transparent));
+      var(--bg-surface-low-transparent)
+    );
   }
 }
diff --git a/src/app/organisms/navigation/DrawerBreadcrumb.jsx b/src/app/organisms/navigation/DrawerBreadcrumb.jsx
index face349d..a38a26e7 100644
--- a/src/app/organisms/navigation/DrawerBreadcrumb.jsx
+++ b/src/app/organisms/navigation/DrawerBreadcrumb.jsx
@@ -1,22 +1,22 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './DrawerBreadcrumb.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./DrawerBreadcrumb.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { selectTab, selectSpace } from '../../../client/action/navigation';
-import navigation from '../../../client/state/navigation';
-import { abbreviateNumber } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { selectTab, selectSpace } from "../../../client/action/navigation";
+import navigation from "../../../client/state/navigation";
+import { abbreviateNumber } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Button from '../../atoms/button/Button';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import NotificationBadge from '../../atoms/badge/NotificationBadge';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Button from "../../atoms/button/Button";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import NotificationBadge from "../../atoms/badge/NotificationBadge";
 
-import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
+import ChevronRightIC from "../../../../public/res/ic/outlined/chevron-right.svg";
 
 function DrawerBreadcrumb({ spaceId }) {
   const [, forceUpdate] = useState({});
@@ -44,13 +44,17 @@ function DrawerBreadcrumb({ spaceId }) {
     });
     notifications.on(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
     return () => {
-      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+      notifications.removeListener(
+        cons.events.notifications.NOTI_CHANGED,
+        onNotiChanged
+      );
     };
   }, [spaceId]);
 
   function getHomeNotiExcept(childId) {
-    const orphans = roomList.getOrphans()
-      .filter((id) => (id !== childId))
+    const orphans = roomList
+      .getOrphans()
+      .filter((id) => id !== childId)
       .filter((id) => !accountData.spaceShortcut.has(id));
 
     let noti = null;
@@ -94,37 +98,51 @@ function DrawerBreadcrumb({ spaceId }) {
     <div className="drawer-breadcrumb__wrapper">
       <ScrollView ref={scrollRef} horizontal vertical={false} invisible>
         <div className="drawer-breadcrumb">
-          {
-            spacePath.map((id, index) => {
-              const noti = (id !== cons.tabs.HOME && index < spacePath.length)
-                ? getNotiExcept(id, (index === spacePath.length - 1) ? null : spacePath[index + 1])
-                : getHomeNotiExcept((index === spacePath.length - 1) ? null : spacePath[index + 1]);
+          {spacePath.map((id, index) => {
+            const noti =
+              id !== cons.tabs.HOME && index < spacePath.length
+                ? getNotiExcept(
+                    id,
+                    index === spacePath.length - 1 ? null : spacePath[index + 1]
+                  )
+                : getHomeNotiExcept(
+                    index === spacePath.length - 1 ? null : spacePath[index + 1]
+                  );
 
-              return (
-                <React.Fragment
-                  key={id}
+            return (
+              <React.Fragment key={id}>
+                {index !== 0 && (
+                  <RawIcon size="extra-small" src={ChevronRightIC} />
+                )}
+                <Button
+                  className={
+                    index === spacePath.length - 1
+                      ? "drawer-breadcrumb__btn--selected"
+                      : ""
+                  }
+                  onClick={() => {
+                    if (id === cons.tabs.HOME) selectTab(id);
+                    else selectSpace(id);
+                  }}
                 >
-                  { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
-                  <Button
-                    className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''}
-                    onClick={() => {
-                      if (id === cons.tabs.HOME) selectTab(id);
-                      else selectSpace(id);
-                    }}
-                  >
-                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
-                    { noti !== null && (
-                      <NotificationBadge
-                        alert={noti.highlight !== 0}
-                        content={noti.total > 0 ? abbreviateNumber(noti.total) : null}
-                      />
-                    )}
-                  </Button>
-                </React.Fragment>
-              );
-            })
-          }
-          <div style={{ width: 'var(--sp-extra-tight)', height: '100%' }} />
+                  <Text variant="b2">
+                    {id === cons.tabs.HOME
+                      ? "Home"
+                      : twemojify(mx.getRoom(id).name)}
+                  </Text>
+                  {noti !== null && (
+                    <NotificationBadge
+                      alert={noti.highlight !== 0}
+                      content={
+                        noti.total > 0 ? abbreviateNumber(noti.total) : null
+                      }
+                    />
+                  )}
+                </Button>
+              </React.Fragment>
+            );
+          })}
+          <div style={{ width: "var(--sp-extra-tight)", height: "100%" }} />
         </div>
       </ScrollView>
     </div>
diff --git a/src/app/organisms/navigation/DrawerBreadcrumb.scss b/src/app/organisms/navigation/DrawerBreadcrumb.scss
index 0b7bacce..06ed98f8 100644
--- a/src/app/organisms/navigation/DrawerBreadcrumb.scss
+++ b/src/app/organisms/navigation/DrawerBreadcrumb.scss
@@ -1,5 +1,5 @@
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .drawer-breadcrumb__wrapper {
   height: var(--header-height);
@@ -19,7 +19,7 @@
     right: 0;
     z-index: 99;
 
-    content: '';
+    content: "";
     display: inline-block;
     min-width: 8px;
     width: 8px;
@@ -63,4 +63,4 @@
     box-shadow: var(--bs-surface-border) !important;
     background-color: var(--bg-surface);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/navigation/DrawerHeader.jsx b/src/app/organisms/navigation/DrawerHeader.jsx
index e8782e38..10d74461 100644
--- a/src/app/organisms/navigation/DrawerHeader.jsx
+++ b/src/app/organisms/navigation/DrawerHeader.jsx
@@ -1,38 +1,43 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './DrawerHeader.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./DrawerHeader.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
 import {
-  openPublicRooms, openCreateRoom, openSpaceManage, openJoinAlias,
-  openSpaceAddExisting, openInviteUser, openReusableContextMenu,
-} from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+  openPublicRooms,
+  openCreateRoom,
+  openSpaceManage,
+  openJoinAlias,
+  openSpaceAddExisting,
+  openInviteUser,
+  openReusableContextMenu,
+} from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import { blurOnBubbling } from '../../atoms/button/script';
+import { blurOnBubbling } from "../../atoms/button/script";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import IconButton from '../../atoms/button/IconButton';
-import { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SpaceOptions from '../../molecules/space-options/SpaceOptions';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import IconButton from "../../atoms/button/IconButton";
+import { MenuItem, MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SpaceOptions from "../../molecules/space-options/SpaceOptions";
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-import SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg';
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import PlusIC from "../../../../public/res/ic/outlined/plus.svg";
+import HashPlusIC from "../../../../public/res/ic/outlined/hash-plus.svg";
+import HashGlobeIC from "../../../../public/res/ic/outlined/hash-globe.svg";
+import HashSearchIC from "../../../../public/res/ic/outlined/hash-search.svg";
+import SpacePlusIC from "../../../../public/res/ic/outlined/space-plus.svg";
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
 
 export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(spaceId);
   const canManage = room
-    ? room.currentState.maySendStateEvent('m.space.child', mx.getUserId())
+    ? room.currentState.maySendStateEvent("m.space.child", mx.getUserId())
     : true;
 
   return (
@@ -40,46 +45,64 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
       <MenuHeader>Add rooms or spaces</MenuHeader>
       <MenuItem
         iconSrc={SpacePlusIC}
-        onClick={() => { afterOptionSelect(); openCreateRoom(true, spaceId); }}
+        onClick={() => {
+          afterOptionSelect();
+          openCreateRoom(true, spaceId);
+        }}
         disabled={!canManage}
       >
         Create new space
       </MenuItem>
       <MenuItem
         iconSrc={HashPlusIC}
-        onClick={() => { afterOptionSelect(); openCreateRoom(false, spaceId); }}
+        onClick={() => {
+          afterOptionSelect();
+          openCreateRoom(false, spaceId);
+        }}
         disabled={!canManage}
       >
         Create new room
       </MenuItem>
-      { !spaceId && (
+      {!spaceId && (
         <MenuItem
           iconSrc={HashGlobeIC}
-          onClick={() => { afterOptionSelect(); openPublicRooms(); }}
+          onClick={() => {
+            afterOptionSelect();
+            openPublicRooms();
+          }}
         >
           Explore public rooms
         </MenuItem>
       )}
-      { !spaceId && (
+      {!spaceId && (
         <MenuItem
           iconSrc={PlusIC}
-          onClick={() => { afterOptionSelect(); openJoinAlias(); }}
+          onClick={() => {
+            afterOptionSelect();
+            openJoinAlias();
+          }}
         >
           Join with address
         </MenuItem>
       )}
-      { spaceId && (
+      {spaceId && (
         <MenuItem
           iconSrc={PlusIC}
-          onClick={() => { afterOptionSelect(); openSpaceAddExisting(spaceId); }}
+          onClick={() => {
+            afterOptionSelect();
+            openSpaceAddExisting(spaceId);
+          }}
           disabled={!canManage}
         >
           Add existing
         </MenuItem>
       )}
-      { spaceId && (
+      {spaceId && (
         <MenuItem
-          onClick={() => { afterOptionSelect(); openSpaceManage(spaceId); }}
+          onClick={() => {
+            afterOptionSelect();
+            openSpaceManage(spaceId);
+          }}
           iconSrc={HashSearchIC}
         >
           Manage rooms
@@ -98,27 +121,32 @@ HomeSpaceOptions.propTypes = {
 
 function DrawerHeader({ selectedTab, spaceId }) {
   const mx = initMatrix.matrixClient;
-  const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
+  const tabName =
+    selectedTab !== cons.tabs.DIRECTS ? "Home" : "Direct messages";
 
   const isDMTab = selectedTab === cons.tabs.DIRECTS;
   const room = mx.getRoom(spaceId);
-  const spaceName = isDMTab ? null : (room?.name || null);
+  const spaceName = isDMTab ? null : room?.name || null;
 
   const openSpaceOptions = (e) => {
     e.preventDefault();
     openReusableContextMenu(
-      'bottom',
-      getEventCords(e, '.header'),
-      (closeMenu) => <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />,
+      "bottom",
+      getEventCords(e, ".header"),
+      (closeMenu) => (
+        <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />
+      )
     );
   };
 
   const openHomeSpaceOptions = (e) => {
     e.preventDefault();
     openReusableContextMenu(
-      'right',
-      getEventCords(e, '.ic-btn'),
-      (closeMenu) => <HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />,
+      "right",
+      getEventCords(e, ".ic-btn"),
+      (closeMenu) => (
+        <HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />
+      )
     );
   };
 
@@ -129,21 +157,39 @@ function DrawerHeader({ selectedTab, spaceId }) {
           className="drawer-header__btn"
           onClick={openSpaceOptions}
           type="button"
-          onMouseUp={(e) => blurOnBubbling(e, '.drawer-header__btn')}
+          onMouseUp={(e) => blurOnBubbling(e, ".drawer-header__btn")}
         >
           <TitleWrapper>
-            <Text variant="s1" weight="medium" primary>{twemojify(spaceName)}</Text>
+            <Text variant="s1" weight="medium" primary>
+              {twemojify(spaceName)}
+            </Text>
           </TitleWrapper>
           <RawIcon size="small" src={ChevronBottomIC} />
         </button>
       ) : (
         <TitleWrapper>
-          <Text variant="s1" weight="medium" primary>{tabName}</Text>
+          <Text variant="s1" weight="medium" primary>
+            {tabName}
+          </Text>
         </TitleWrapper>
       )}
 
-      { isDMTab && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="small" /> }
-      { !isDMTab && <IconButton onClick={openHomeSpaceOptions} tooltip="Add rooms/spaces" src={PlusIC} size="small" /> }
+      {isDMTab && (
+        <IconButton
+          onClick={() => openInviteUser()}
+          tooltip="Start DM"
+          src={PlusIC}
+          size="small"
+        />
+      )}
+      {!isDMTab && (
+        <IconButton
+          onClick={openHomeSpaceOptions}
+          tooltip="Add rooms/spaces"
+          src={PlusIC}
+          size="small"
+        />
+      )}
     </Header>
   );
 }
diff --git a/src/app/organisms/navigation/DrawerHeader.scss b/src/app/organisms/navigation/DrawerHeader.scss
index 9ed17e4b..15aaa60f 100644
--- a/src/app/organisms/navigation/DrawerHeader.scss
+++ b/src/app/organisms/navigation/DrawerHeader.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .drawer-header__btn {
   min-width: 0;
@@ -8,12 +8,12 @@
   padding: var(--sp-ultra-tight);
   border-radius: calc(var(--bo-radius) / 2);
   cursor: pointer;
-  
+
   & .header__title-wrapper {
     @include dir.side(margin, 0, var(--sp-extra-tight));
   }
 
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
       box-shadow: var(--bs-surface-outline);
@@ -25,4 +25,4 @@
     box-shadow: var(--bs-surface-outline);
     outline: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/navigation/Home.jsx b/src/app/organisms/navigation/Home.jsx
index 6bfa6c0d..e5831af8 100644
--- a/src/app/organisms/navigation/Home.jsx
+++ b/src/app/organisms/navigation/Home.jsx
@@ -1,15 +1,15 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import Postie from '../../../util/Postie';
-import { roomIdByActivity, roomIdByAtoZ } from '../../../util/sort';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import Postie from "../../../util/Postie";
+import { roomIdByActivity, roomIdByAtoZ } from "../../../util/sort";
 
-import RoomsCategory from './RoomsCategory';
+import RoomsCategory from "./RoomsCategory";
 
-import { useCategorizedSpaces } from '../../hooks/useCategorizedSpaces';
+import { useCategorizedSpaces } from "../../hooks/useCategorizedSpaces";
 
 const drawerPostie = new Postie();
 function Home({ spaceId }) {
@@ -30,7 +30,9 @@ function Home({ spaceId }) {
     roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
     directIds = spaceChildIds.filter((roomId) => directs.has(roomId));
   } else {
-    spaceIds = roomList.getOrphanSpaces().filter((id) => !accountData.spaceShortcut.has(id));
+    spaceIds = roomList
+      .getOrphanSpaces()
+      .filter((id) => !accountData.spaceShortcut.has(id));
     roomIds = roomList.getOrphanRooms();
   }
 
@@ -41,18 +43,20 @@ function Home({ spaceId }) {
 
   useEffect(() => {
     const selectorChanged = (selectedRoomId, prevSelectedRoomId) => {
-      if (!drawerPostie.hasTopic('selector-change')) return;
+      if (!drawerPostie.hasTopic("selector-change")) return;
       const addresses = [];
-      if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
-      if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
+      if (drawerPostie.hasSubscriber("selector-change", selectedRoomId))
+        addresses.push(selectedRoomId);
+      if (drawerPostie.hasSubscriber("selector-change", prevSelectedRoomId))
+        addresses.push(prevSelectedRoomId);
       if (addresses.length === 0) return;
-      drawerPostie.post('selector-change', addresses, selectedRoomId);
+      drawerPostie.post("selector-change", addresses, selectedRoomId);
     };
 
     const notiChanged = (roomId, total, prevTotal) => {
       if (total === prevTotal) return;
-      if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
-        drawerPostie.post('unread-change', roomId);
+      if (drawerPostie.hasTopicAndSubscriber("unread-change", roomId)) {
+        drawerPostie.post("unread-change", roomId);
       }
     };
 
@@ -60,45 +64,67 @@ function Home({ spaceId }) {
     notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
     notifications.on(cons.events.notifications.MUTE_TOGGLED, notiChanged);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
-      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
-      notifications.removeListener(cons.events.notifications.MUTE_TOGGLED, notiChanged);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SELECTED,
+        selectorChanged
+      );
+      notifications.removeListener(
+        cons.events.notifications.NOTI_CHANGED,
+        notiChanged
+      );
+      notifications.removeListener(
+        cons.events.notifications.MUTE_TOGGLED,
+        notiChanged
+      );
     };
   }, []);
 
   return (
     <>
-      { !isCategorized && spaceIds.length !== 0 && (
-        <RoomsCategory name="Spaces" roomIds={spaceIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} />
+      {!isCategorized && spaceIds.length !== 0 && (
+        <RoomsCategory
+          name="Spaces"
+          roomIds={spaceIds.sort(roomIdByAtoZ)}
+          drawerPostie={drawerPostie}
+        />
       )}
 
-      { roomIds.length !== 0 && (
-        <RoomsCategory name="Rooms" roomIds={roomIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} />
+      {roomIds.length !== 0 && (
+        <RoomsCategory
+          name="Rooms"
+          roomIds={roomIds.sort(roomIdByAtoZ)}
+          drawerPostie={drawerPostie}
+        />
       )}
 
-      { directIds.length !== 0 && (
-        <RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} />
+      {directIds.length !== 0 && (
+        <RoomsCategory
+          name="People"
+          roomIds={directIds.sort(roomIdByActivity)}
+          drawerPostie={drawerPostie}
+        />
       )}
 
-      { isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
-        const rms = [];
-        const dms = [];
-        categories.get(catId).forEach((id) => {
-          if (directs.has(id)) dms.push(id);
-          else rms.push(id);
-        });
-        rms.sort(roomIdByAtoZ);
-        dms.sort(roomIdByActivity);
-        return (
-          <RoomsCategory
-            key={catId}
-            spaceId={catId}
-            name={mx.getRoom(catId).name}
-            roomIds={rms.concat(dms)}
-            drawerPostie={drawerPostie}
-          />
-        );
-      })}
+      {isCategorized &&
+        [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
+          const rms = [];
+          const dms = [];
+          categories.get(catId).forEach((id) => {
+            if (directs.has(id)) dms.push(id);
+            else rms.push(id);
+          });
+          rms.sort(roomIdByAtoZ);
+          dms.sort(roomIdByActivity);
+          return (
+            <RoomsCategory
+              key={catId}
+              spaceId={catId}
+              name={mx.getRoom(catId).name}
+              roomIds={rms.concat(dms)}
+              drawerPostie={drawerPostie}
+            />
+          );
+        })}
     </>
   );
 }
diff --git a/src/app/organisms/navigation/Navigation.jsx b/src/app/organisms/navigation/Navigation.jsx
index 24bd1bd2..5207d6e9 100644
--- a/src/app/organisms/navigation/Navigation.jsx
+++ b/src/app/organisms/navigation/Navigation.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import './Navigation.scss';
+import React from "react";
+import "./Navigation.scss";
 
-import SideBar from './SideBar';
-import Drawer from './Drawer';
+import SideBar from "./SideBar";
+import Drawer from "./Drawer";
 
 function Navigation() {
   return (
diff --git a/src/app/organisms/navigation/Navigation.scss b/src/app/organisms/navigation/Navigation.scss
index 4a932c79..a15bfe27 100644
--- a/src/app/organisms/navigation/Navigation.scss
+++ b/src/app/organisms/navigation/Navigation.scss
@@ -4,4 +4,4 @@
   background-color: var(--bg-surface-low);
 
   display: flex;
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/navigation/RoomsCategory.jsx b/src/app/organisms/navigation/RoomsCategory.jsx
index b5666512..49cf5e1e 100644
--- a/src/app/organisms/navigation/RoomsCategory.jsx
+++ b/src/app/organisms/navigation/RoomsCategory.jsx
@@ -1,44 +1,50 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './RoomsCategory.scss';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./RoomsCategory.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { selectSpace, selectRoom, openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import {
+  selectSpace,
+  selectRoom,
+  openReusableContextMenu,
+} from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import Selector from './Selector';
-import SpaceOptions from '../../molecules/space-options/SpaceOptions';
-import { HomeSpaceOptions } from './DrawerHeader';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import Selector from "./Selector";
+import SpaceOptions from "../../molecules/space-options/SpaceOptions";
+import { HomeSpaceOptions } from "./DrawerHeader";
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
-import HorizontalMenuIC from '../../../../public/res/ic/outlined/horizontal-menu.svg';
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
+import PlusIC from "../../../../public/res/ic/outlined/plus.svg";
+import HorizontalMenuIC from "../../../../public/res/ic/outlined/horizontal-menu.svg";
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import ChevronRightIC from "../../../../public/res/ic/outlined/chevron-right.svg";
 
-function RoomsCategory({
-  spaceId, name, hideHeader, roomIds, drawerPostie,
-}) {
+function RoomsCategory({ spaceId, name, hideHeader, roomIds, drawerPostie }) {
   const { spaces, directs } = initMatrix.roomList;
   const [isOpen, setIsOpen] = useState(true);
 
   const openSpaceOptions = (e) => {
     e.preventDefault();
     openReusableContextMenu(
-      'bottom',
-      getEventCords(e, '.header'),
-      (closeMenu) => <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />,
+      "bottom",
+      getEventCords(e, ".header"),
+      (closeMenu) => (
+        <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />
+      )
     );
   };
 
   const openHomeSpaceOptions = (e) => {
     e.preventDefault();
     openReusableContextMenu(
-      'right',
-      getEventCords(e, '.ic-btn'),
-      (closeMenu) => <HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />,
+      "right",
+      getEventCords(e, ".ic-btn"),
+      (closeMenu) => (
+        <HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />
+      )
     );
   };
 
@@ -61,12 +67,35 @@ function RoomsCategory({
     <div className="room-category">
       {!hideHeader && (
         <div className="room-category__header">
-          <button className="room-category__toggle" onClick={() => setIsOpen(!isOpen)} type="button">
-            <RawIcon src={isOpen ? ChevronBottomIC : ChevronRightIC} size="extra-small" />
-            <Text className="cat-header" variant="b3" weight="medium">{name}</Text>
+          <button
+            className="room-category__toggle"
+            onClick={() => setIsOpen(!isOpen)}
+            type="button"
+          >
+            <RawIcon
+              src={isOpen ? ChevronBottomIC : ChevronRightIC}
+              size="extra-small"
+            />
+            <Text className="cat-header" variant="b3" weight="medium">
+              {name}
+            </Text>
           </button>
-          {spaceId && <IconButton onClick={openSpaceOptions} tooltip="Space options" src={HorizontalMenuIC} size="extra-small" />}
-          {spaceId && <IconButton onClick={openHomeSpaceOptions} tooltip="Add rooms/spaces" src={PlusIC} size="extra-small" />}
+          {spaceId && (
+            <IconButton
+              onClick={openSpaceOptions}
+              tooltip="Space options"
+              src={HorizontalMenuIC}
+              size="extra-small"
+            />
+          )}
+          {spaceId && (
+            <IconButton
+              onClick={openHomeSpaceOptions}
+              tooltip="Add rooms/spaces"
+              src={PlusIC}
+              size="extra-small"
+            />
+          )}
         </div>
       )}
       {(isOpen || hideHeader) && (
diff --git a/src/app/organisms/navigation/RoomsCategory.scss b/src/app/organisms/navigation/RoomsCategory.scss
index 841290c5..9a401e7b 100644
--- a/src/app/organisms/navigation/RoomsCategory.scss
+++ b/src/app/organisms/navigation/RoomsCategory.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/text";
 
 .room-category {
   &__header,
@@ -26,7 +26,7 @@
     @extend .cp-fx__item-one;
     padding: var(--sp-extra-tight) var(--sp-tight);
     cursor: pointer;
-    
+
     & .ic-raw {
       flex-shrink: 0;
       width: 12px;
@@ -46,9 +46,9 @@
   &__content:first-child {
     margin-top: var(--sp-extra-tight);
   }
-  
+
   & .room-selector {
     width: calc(100% - var(--sp-extra-tight));
     @include dir.side(margin, auto, 0);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/navigation/Selector.jsx b/src/app/organisms/navigation/Selector.jsx
index cb1086ea..7fb65504 100644
--- a/src/app/organisms/navigation/Selector.jsx
+++ b/src/app/organisms/navigation/Selector.jsx
@@ -1,40 +1,45 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords, abbreviateNumber } from '../../../util/common';
-import { joinRuleToIconSrc } from '../../../util/matrixUtil';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords, abbreviateNumber } from "../../../util/common";
+import { joinRuleToIconSrc } from "../../../util/matrixUtil";
 
-import IconButton from '../../atoms/button/IconButton';
-import RoomSelector from '../../molecules/room-selector/RoomSelector';
-import RoomOptions from '../../molecules/room-options/RoomOptions';
-import SpaceOptions from '../../molecules/space-options/SpaceOptions';
+import IconButton from "../../atoms/button/IconButton";
+import RoomSelector from "../../molecules/room-selector/RoomSelector";
+import RoomOptions from "../../molecules/room-options/RoomOptions";
+import SpaceOptions from "../../molecules/space-options/SpaceOptions";
 
-import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import VerticalMenuIC from "../../../../public/res/ic/outlined/vertical-menu.svg";
 
-import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
 
-function Selector({
-  roomId, isDM, drawerPostie, onClick,
-}) {
+function Selector({ roomId, isDM, drawerPostie, onClick }) {
   const mx = initMatrix.matrixClient;
   const noti = initMatrix.notifications;
   const room = mx.getRoom(roomId);
 
-  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
-  if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+  let imageSrc =
+    room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, "crop") ||
+    null;
+  if (imageSrc === null)
+    imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, "crop") || null;
 
   const isMuted = noti.getNotiType(roomId) === cons.notifs.MUTE;
 
   const [, forceUpdate] = useForceUpdate();
 
   useEffect(() => {
-    const unSub1 = drawerPostie.subscribe('selector-change', roomId, forceUpdate);
-    const unSub2 = drawerPostie.subscribe('unread-change', roomId, forceUpdate);
+    const unSub1 = drawerPostie.subscribe(
+      "selector-change",
+      roomId,
+      forceUpdate
+    );
+    const unSub2 = drawerPostie.subscribe("unread-change", roomId, forceUpdate);
     return () => {
       unSub1();
       unSub2();
@@ -44,11 +49,15 @@ function Selector({
   const openOptions = (e) => {
     e.preventDefault();
     openReusableContextMenu(
-      'right',
-      getEventCords(e, '.room-selector'),
+      "right",
+      getEventCords(e, ".room-selector"),
       room.isSpaceRoom()
-        ? (closeMenu) => <SpaceOptions roomId={roomId} afterOptionSelect={closeMenu} />
-        : (closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
+        ? (closeMenu) => (
+            <SpaceOptions roomId={roomId} afterOptionSelect={closeMenu} />
+          )
+        : (closeMenu) => (
+            <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />
+          )
     );
   };
 
@@ -58,7 +67,9 @@ function Selector({
       name={room.name}
       roomId={roomId}
       imageSrc={isDM ? imageSrc : null}
-      iconSrc={isDM ? null : joinRuleToIconSrc(room.getJoinRule(), room.isSpaceRoom())}
+      iconSrc={
+        isDM ? null : joinRuleToIconSrc(room.getJoinRule(), room.isSpaceRoom())
+      }
       isSelected={navigation.selectedRoomId === roomId}
       isMuted={isMuted}
       isUnread={!isMuted && noti.hasNoti(roomId)}
@@ -66,7 +77,7 @@ function Selector({
       isAlert={noti.getHighlightNoti(roomId) !== 0}
       onClick={onClick}
       onContextMenu={openOptions}
-      options={(
+      options={
         <IconButton
           size="extra-small"
           tooltip="Options"
@@ -74,7 +85,7 @@ function Selector({
           src={VerticalMenuIC}
           onClick={openOptions}
         />
-      )}
+      }
     />
   );
 }
diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx
index 53186965..3fec0315 100644
--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/src/app/organisms/navigation/SideBar.jsx
@@ -1,38 +1,42 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './SideBar.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./SideBar.scss";
 
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import colorMXID from '../../../util/colorMXID';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import colorMXID from "../../../util/colorMXID";
 import {
-  selectTab, openShortcutSpaces, openInviteList,
-  openSearch, openSettings, openReusableContextMenu,
-} from '../../../client/action/navigation';
-import { moveSpaceShortcut } from '../../../client/action/accountData';
-import { abbreviateNumber, getEventCords } from '../../../util/common';
-import { isCrossVerified } from '../../../util/matrixUtil';
+  selectTab,
+  openShortcutSpaces,
+  openInviteList,
+  openSearch,
+  openSettings,
+  openReusableContextMenu,
+} 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';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
-import SpaceOptions from '../../molecules/space-options/SpaceOptions';
+import Avatar from "../../atoms/avatar/Avatar";
+import NotificationBadge from "../../atoms/badge/NotificationBadge";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import SidebarAvatar from "../../molecules/sidebar-avatar/SidebarAvatar";
+import SpaceOptions from "../../molecules/space-options/SpaceOptions";
 
-import HomeIC from '../../../../public/res/ic/outlined/home.svg';
-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 HomeIC from "../../../../public/res/ic/outlined/home.svg";
+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 { useSelectedTab } from "../../hooks/useSelectedTab";
+import { useDeviceList } from "../../hooks/useDeviceList";
 
-import { tabText as settingTabText } from '../settings/Settings';
+import { tabText as settingTabText } from "../settings/Settings";
 
 function useNotificationUpdate() {
   const { notifications } = initMatrix;
@@ -42,9 +46,15 @@ function useNotificationUpdate() {
       if (total === prevTotal) return;
       forceUpdate({});
     }
-    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
+    notifications.on(
+      cons.events.notifications.NOTI_CHANGED,
+      onNotificationChanged
+    );
     return () => {
-      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
+      notifications.removeListener(
+        cons.events.notifications.NOTI_CHANGED,
+        onNotificationChanged
+      );
     };
   }, []);
 }
@@ -58,19 +68,20 @@ function ProfileAvatarMenu() {
 
   useEffect(() => {
     const user = mx.getUser(mx.getUserId());
-    const setNewProfile = (avatarUrl, displayName) => setProfile({
-      avatarUrl: avatarUrl || null,
-      displayName: displayName || profile.displayName,
-    });
+    const setNewProfile = (avatarUrl, displayName) =>
+      setProfile({
+        avatarUrl: avatarUrl || null,
+        displayName: displayName || profile.displayName,
+      });
     const onAvatarChange = (event, myUser) => {
       setNewProfile(myUser.avatarUrl, myUser.displayName);
     };
     mx.getProfileInfo(mx.getUserId()).then((info) => {
       setNewProfile(info.avatar_url, info.displayname);
     });
-    user.on('User.avatarUrl', onAvatarChange);
+    user.on("User.avatarUrl", onAvatarChange);
     return () => {
-      user.removeListener('User.avatarUrl', onAvatarChange);
+      user.removeListener("User.avatarUrl", onAvatarChange);
     };
   }, []);
 
@@ -78,21 +89,27 @@ function ProfileAvatarMenu() {
     <SidebarAvatar
       onClick={openSettings}
       tooltip="Settings"
-      avatar={(
+      avatar={
         <Avatar
           text={profile.displayName}
           bgColor={colorMXID(mx.getUserId())}
           size="normal"
-          imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
+          imageSrc={
+            profile.avatarUrl !== null
+              ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, "crop")
+              : null
+          }
         />
-      )}
+      }
     />
   );
 }
 
 function CrossSigninAlert() {
   const deviceList = useDeviceList();
-  const unverified = deviceList?.filter((device) => isCrossVerified(device.device_id) === false);
+  const unverified = deviceList?.filter(
+    (device) => isCrossVerified(device.device_id) === false
+  );
 
   if (!unverified?.length) return null;
 
@@ -101,7 +118,13 @@ function CrossSigninAlert() {
       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" />}
+      avatar={
+        <Avatar
+          iconSrc={ShieldUserIC}
+          iconColor="var(--ic-danger-normal)"
+          size="normal"
+        />
+      }
     />
   );
 }
@@ -151,31 +174,39 @@ function FeaturedTab() {
         active={selectedTab === cons.tabs.HOME}
         onClick={() => selectTab(cons.tabs.HOME)}
         avatar={<Avatar iconSrc={HomeIC} size="normal" />}
-        notificationBadge={homeNoti ? (
-          <NotificationBadge
-            alert={homeNoti?.highlight > 0}
-            content={abbreviateNumber(homeNoti.total) || null}
-          />
-        ) : null}
+        notificationBadge={
+          homeNoti ? (
+            <NotificationBadge
+              alert={homeNoti?.highlight > 0}
+              content={abbreviateNumber(homeNoti.total) || null}
+            />
+          ) : null
+        }
       />
       <SidebarAvatar
         tooltip="People"
         active={selectedTab === cons.tabs.DIRECTS}
         onClick={() => selectTab(cons.tabs.DIRECTS)}
         avatar={<Avatar iconSrc={UserIC} size="normal" />}
-        notificationBadge={dmsNoti ? (
-          <NotificationBadge
-            alert={dmsNoti?.highlight > 0}
-            content={abbreviateNumber(dmsNoti.total) || null}
-          />
-        ) : null}
+        notificationBadge={
+          dmsNoti ? (
+            <NotificationBadge
+              alert={dmsNoti?.highlight > 0}
+              content={abbreviateNumber(dmsNoti.total) || null}
+            />
+          ) : null
+        }
       />
     </>
   );
 }
 
 function DraggableSpaceShortcut({
-  isActive, spaceId, index, moveShortcut, onDrop,
+  isActive,
+  spaceId,
+  index,
+  moveShortcut,
+  onDrop,
 }) {
   const mx = initMatrix.matrixClient;
   const { notifications } = initMatrix;
@@ -186,14 +217,14 @@ function DraggableSpaceShortcut({
   const openSpaceOptions = (e, sId) => {
     e.preventDefault();
     openReusableContextMenu(
-      'right',
-      getEventCords(e, '.sidebar-avatar'),
-      (closeMenu) => <SpaceOptions roomId={sId} afterOptionSelect={closeMenu} />,
+      "right",
+      getEventCords(e, ".sidebar-avatar"),
+      (closeMenu) => <SpaceOptions roomId={sId} afterOptionSelect={closeMenu} />
     );
   };
 
   const [, drop] = useDrop({
-    accept: 'SPACE_SHORTCUT',
+    accept: "SPACE_SHORTCUT",
     collect(monitor) {
       return {
         handlerId: monitor.getHandlerId(),
@@ -210,7 +241,8 @@ function DraggableSpaceShortcut({
       if (dragIndex === hoverIndex) return;
 
       const hoverBoundingRect = shortcutRef.current?.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
       const clientOffset = monitor.getClientOffset();
       const hoverClientY = clientOffset.y - hoverBoundingRect.top;
 
@@ -226,7 +258,7 @@ function DraggableSpaceShortcut({
     },
   });
   const [{ isDragging }, drag] = useDrag({
-    type: 'SPACE_SHORTCUT',
+    type: "SPACE_SHORTCUT",
     item: () => ({ spaceId, index }),
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
@@ -248,21 +280,32 @@ function DraggableSpaceShortcut({
       tooltip={room.name}
       onClick={() => selectTab(spaceId)}
       onContextMenu={(e) => openSpaceOptions(e, spaceId)}
-      avatar={(
+      avatar={
         <Avatar
           ref={avatarRef}
           text={room.name}
           bgColor={colorMXID(room.roomId)}
           size="normal"
-          imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
+          imageSrc={
+            room.getAvatarUrl(
+              initMatrix.matrixClient.baseUrl,
+              42,
+              42,
+              "crop"
+            ) || null
+          }
         />
-      )}
-      notificationBadge={notifications.hasNoti(spaceId) ? (
-        <NotificationBadge
-          alert={notifications.getHighlightNoti(spaceId) > 0}
-          content={abbreviateNumber(notifications.getTotalNoti(spaceId)) || null}
-        />
-      ) : null}
+      }
+      notificationBadge={
+        notifications.hasNoti(spaceId) ? (
+          <NotificationBadge
+            alert={notifications.getHighlightNoti(spaceId) > 0}
+            content={
+              abbreviateNumber(notifications.getTotalNoti(spaceId)) || null
+            }
+          />
+        ) : null
+      }
     />
   );
 }
@@ -279,13 +322,22 @@ function SpaceShortcut() {
   const { accountData } = initMatrix;
   const [selectedTab] = useSelectedTab();
   useNotificationUpdate();
-  const [spaceShortcut, setSpaceShortcut] = useState([...accountData.spaceShortcut]);
+  const [spaceShortcut, setSpaceShortcut] = useState([
+    ...accountData.spaceShortcut,
+  ]);
 
   useEffect(() => {
-    const handleShortcut = () => setSpaceShortcut([...accountData.spaceShortcut]);
-    accountData.on(cons.events.accountData.SPACE_SHORTCUT_UPDATED, handleShortcut);
+    const handleShortcut = () =>
+      setSpaceShortcut([...accountData.spaceShortcut]);
+    accountData.on(
+      cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+      handleShortcut
+    );
     return () => {
-      accountData.removeListener(cons.events.accountData.SPACE_SHORTCUT_UPDATED, handleShortcut);
+      accountData.removeListener(
+        cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+        handleShortcut
+      );
     };
   }, []);
 
@@ -304,27 +356,26 @@ function SpaceShortcut() {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      {
-        spaceShortcut.map((shortcut, index) => (
-          <DraggableSpaceShortcut
-            key={shortcut}
-            index={index}
-            spaceId={shortcut}
-            isActive={selectedTab === shortcut}
-            moveShortcut={moveShortcut}
-            onDrop={handleDrop}
-          />
-        ))
-      }
+      {spaceShortcut.map((shortcut, index) => (
+        <DraggableSpaceShortcut
+          key={shortcut}
+          index={index}
+          spaceId={shortcut}
+          isActive={selectedTab === shortcut}
+          moveShortcut={moveShortcut}
+          onDrop={handleDrop}
+        />
+      ))}
     </DndProvider>
   );
 }
 
 function useTotalInvites() {
   const { roomList } = initMatrix;
-  const totalInviteCount = () => roomList.inviteRooms.size
-    + roomList.inviteSpaces.size
-    + roomList.inviteDirects.size;
+  const totalInviteCount = () =>
+    roomList.inviteRooms.size +
+    roomList.inviteSpaces.size +
+    roomList.inviteDirects.size;
   const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
 
   useEffect(() => {
@@ -333,7 +384,10 @@ function useTotalInvites() {
     };
     roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
     return () => {
-      roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
+      roomList.removeListener(
+        cons.events.roomList.INVITELIST_UPDATED,
+        onInviteListChange
+      );
     };
   }, []);
 
@@ -371,12 +425,14 @@ function SideBar() {
             onClick={() => openSearch()}
             avatar={<Avatar iconSrc={SearchIC} size="normal" />}
           />
-          { totalInvites !== 0 && (
+          {totalInvites !== 0 && (
             <SidebarAvatar
               tooltip="Invites"
               onClick={() => openInviteList()}
               avatar={<Avatar iconSrc={InviteIC} size="normal" />}
-              notificationBadge={<NotificationBadge alert content={totalInvites} />}
+              notificationBadge={
+                <NotificationBadge alert content={totalInvites} />
+              }
             />
           )}
           <CrossSigninAlert />
diff --git a/src/app/organisms/navigation/SideBar.scss b/src/app/organisms/navigation/SideBar.scss
index 6ff66288..8158c784 100644
--- a/src/app/organisms/navigation/SideBar.scss
+++ b/src/app/organisms/navigation/SideBar.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .sidebar {
   @extend .cp-fx__column;
@@ -7,10 +7,7 @@
   width: var(--navigation-sidebar-width);
   height: 100%;
   background-color: var(--bg-surface-extra-low);
-  @include dir.side(border,
-    none,
-    1px solid var(--bg-surface-border),
-  );
+  @include dir.side(border, none, 1px solid var(--bg-surface-border));
 
   &__scrollable,
   &__sticky {
@@ -33,7 +30,8 @@
     background-image: linear-gradient(
       to top,
       var(--bg-surface-extra-low),
-      var(--bg-surface-extra-low-transparent));
+      var(--bg-surface-extra-low-transparent)
+    );
     position: sticky;
     bottom: -1px;
     left: 0;
@@ -44,7 +42,7 @@
 .space-container,
 .sticky-container {
   @extend .cp-fx__column--c-c;
-  
+
   padding: var(--sp-ultra-tight) 0;
 
   & > .sidebar-avatar,
@@ -74,4 +72,4 @@
   to {
     transform: translateX(0) scale(1);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
index bb7359da..8db13181 100644
--- a/src/app/organisms/profile-editor/ProfileEditor.jsx
+++ b/src/app/organisms/profile-editor/ProfileEditor.jsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { twemojify } from '../../../util/twemojify';
+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 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 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 PencilIC from "../../../../public/res/ic/outlined/pencil.svg";
+import { confirmDialog } from "../../molecules/confirm-dialog/ConfirmDialog";
 
-import './ProfileEditor.scss';
+import "./ProfileEditor.scss";
 
 function ProfileEditor({ userId }) {
   const [isEditing, setIsEditing] = useState(false);
@@ -22,7 +22,9 @@ function ProfileEditor({ userId }) {
   const user = mx.getUser(mx.getUserId());
 
   const displayNameRef = useRef(null);
-  const [avatarSrc, setAvatarSrc] = useState(user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : 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);
 
@@ -30,7 +32,11 @@ function ProfileEditor({ userId }) {
     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);
+      setAvatarSrc(
+        info.avatar_url
+          ? mx.mxcUrlToHttp(info.avatar_url, 80, 80, "crop")
+          : null
+      );
       setUsername(info.displayname);
     });
     return () => {
@@ -41,19 +47,19 @@ function ProfileEditor({ userId }) {
   const handleAvatarUpload = async (url) => {
     if (url === null) {
       const isConfirmed = await confirmDialog(
-        'Remove avatar',
-        'Are you sure that you want to remove avatar?',
-        'Remove',
-        'caution',
+        "Remove avatar",
+        "Are you sure that you want to remove avatar?",
+        "Remove",
+        "caution"
       );
       if (isConfirmed) {
-        mx.setAvatarUrl('');
+        mx.setAvatarUrl("");
         setAvatarSrc(null);
       }
       return;
     }
     mx.setAvatarUrl(url);
-    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
+    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, "crop"));
   };
 
   const saveDisplayName = () => {
@@ -67,7 +73,10 @@ function ProfileEditor({ userId }) {
   };
 
   const onDisplayNameInputChange = () => {
-    setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
+    setDisabled(
+      username === displayNameRef.current.value ||
+        displayNameRef.current.value == null
+    );
   };
   const cancelDisplayNameChanges = () => {
     displayNameRef.current.value = username;
@@ -78,8 +87,11 @@ function ProfileEditor({ userId }) {
   const renderForm = () => (
     <form
       className="profile-editor__form"
-      style={{ marginBottom: avatarSrc ? '24px' : '0' }}
-      onSubmit={(e) => { e.preventDefault(); saveDisplayName(); }}
+      style={{ marginBottom: avatarSrc ? "24px" : "0" }}
+      onSubmit={(e) => {
+        e.preventDefault();
+        saveDisplayName();
+      }}
     >
       <Input
         label={`Display name of ${mx.getUserId()}`}
@@ -87,15 +99,22 @@ function ProfileEditor({ userId }) {
         value={mx.getUser(mx.getUserId()).displayName}
         forwardRef={displayNameRef}
       />
-      <Button variant="primary" type="submit" disabled={disabled}>Save</Button>
+      <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
+      className="profile-editor__info"
+      style={{ marginBottom: avatarSrc ? "24px" : "0" }}
+    >
       <div>
-        <Text variant="h2" primary weight="medium">{twemojify(username) ?? userId}</Text>
+        <Text variant="h2" primary weight="medium">
+          {twemojify(username) ?? userId}
+        </Text>
         <IconButton
           src={PencilIC}
           size="extra-small"
@@ -116,9 +135,7 @@ function ProfileEditor({ userId }) {
         onUpload={handleAvatarUpload}
         onRequestRemove={() => handleAvatarUpload(null)}
       />
-      {
-        isEditing ? renderForm() : renderInfo()
-      }
+      {isEditing ? renderForm() : renderInfo()}
     </div>
   );
 }
diff --git a/src/app/organisms/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
index 2e2ef917..9b2727c2 100644
--- a/src/app/organisms/profile-editor/ProfileEditor.scss
+++ b/src/app/organisms/profile-editor/ProfileEditor.scss
@@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
+@use "../../partials/dir";
+@use "../../partials/flex";
 
 .profile-editor {
   display: flex;
@@ -29,7 +29,7 @@
   flex-wrap: wrap;
   align-items: flex-end;
 
-  & > .input-container  {
+  & > .input-container {
     @extend .cp-fx__item-one;
   }
   & > button {
@@ -37,5 +37,4 @@
     margin-top: var(--sp-normal);
     @include dir.side(margin, var(--sp-normal), 0);
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index fec9189a..712f1fee 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -1,69 +1,76 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ProfileViewer.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./ProfileViewer.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { selectRoom, openReusableContextMenu } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import {
+  selectRoom,
+  openReusableContextMenu,
+} from "../../../client/action/navigation";
+import * as roomActions from "../../../client/action/room";
 
 import {
-  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices,
-} from '../../../util/matrixUtil';
-import { getEventCords } from '../../../util/common';
-import colorMXID from '../../../util/colorMXID';
+  getUsername,
+  getUsernameOfRoomMember,
+  getPowerLabel,
+  hasDMWith,
+  hasDevices,
+} from "../../../util/matrixUtil";
+import { getEventCords } from "../../../util/common";
+import colorMXID from "../../../util/colorMXID";
 
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import IconButton from '../../atoms/button/IconButton';
-import Input from '../../atoms/input/Input';
-import Avatar from '../../atoms/avatar/Avatar';
-import Button from '../../atoms/button/Button';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
-import PowerLevelSelector from '../../molecules/power-level-selector/PowerLevelSelector';
-import Dialog from '../../molecules/dialog/Dialog';
+import Text from "../../atoms/text/Text";
+import Chip from "../../atoms/chip/Chip";
+import IconButton from "../../atoms/button/IconButton";
+import Input from "../../atoms/input/Input";
+import Avatar from "../../atoms/avatar/Avatar";
+import Button from "../../atoms/button/Button";
+import { MenuItem } from "../../atoms/context-menu/ContextMenu";
+import PowerLevelSelector from "../../molecules/power-level-selector/PowerLevelSelector";
+import Dialog from "../../molecules/dialog/Dialog";
 
-import ShieldEmptyIC from '../../../../public/res/ic/outlined/shield-empty.svg';
-import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import ShieldEmptyIC from "../../../../public/res/ic/outlined/shield-empty.svg";
+import ChevronRightIC from "../../../../public/res/ic/outlined/chevron-right.svg";
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import { useForceUpdate } from '../../hooks/useForceUpdate';
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
+import { confirmDialog } from "../../molecules/confirm-dialog/ConfirmDialog";
 
-function ModerationTools({
-  roomId, userId,
-}) {
+function ModerationTools({ roomId, userId }) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
   const roomMember = room.getMember(userId);
 
   const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
   const powerLevel = roomMember?.powerLevel || 0;
-  const canIKick = (
-    roomMember?.membership === 'join'
-    && room.currentState.hasSufficientPowerLevelFor('kick', myPowerLevel)
-    && powerLevel < myPowerLevel
-  );
-  const canIBan = (
-    ['join', 'leave'].includes(roomMember?.membership)
-    && room.currentState.hasSufficientPowerLevelFor('ban', myPowerLevel)
-    && powerLevel < myPowerLevel
-  );
+  const canIKick =
+    roomMember?.membership === "join" &&
+    room.currentState.hasSufficientPowerLevelFor("kick", myPowerLevel) &&
+    powerLevel < myPowerLevel;
+  const canIBan =
+    ["join", "leave"].includes(roomMember?.membership) &&
+    room.currentState.hasSufficientPowerLevelFor("ban", myPowerLevel) &&
+    powerLevel < myPowerLevel;
 
   const handleKick = (e) => {
     e.preventDefault();
-    const kickReason = e.target.elements['kick-reason']?.value.trim();
-    roomActions.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
+    const kickReason = e.target.elements["kick-reason"]?.value.trim();
+    roomActions.kick(
+      roomId,
+      userId,
+      kickReason !== "" ? kickReason : undefined
+    );
   };
 
   const handleBan = (e) => {
     e.preventDefault();
-    const banReason = e.target.elements['ban-reason']?.value.trim();
-    roomActions.ban(roomId, userId, banReason !== '' ? banReason : undefined);
+    const banReason = e.target.elements["ban-reason"]?.value.trim();
+    roomActions.ban(roomId, userId, banReason !== "" ? banReason : undefined);
   };
 
   return (
@@ -120,13 +127,14 @@ function SessionInfo({ userId }) {
       <div className="session-info__chips">
         {devices === null && <Text variant="b2">Loading sessions...</Text>}
         {devices?.length === 0 && <Text variant="b2">No session found.</Text>}
-        {devices !== null && (devices.map((device) => (
-          <Chip
-            key={device.deviceId}
-            iconSrc={ShieldEmptyIC}
-            text={device.getDisplayName() || device.deviceId}
-          />
-        )))}
+        {devices !== null &&
+          devices.map((device) => (
+            <Chip
+              key={device.deviceId}
+              iconSrc={ShieldEmptyIC}
+              text={device.getDisplayName() || device.deviceId}
+            />
+          ))}
       </div>
     );
   }
@@ -137,7 +145,9 @@ function SessionInfo({ userId }) {
         onClick={() => setIsVisible(!isVisible)}
         iconSrc={isVisible ? ChevronBottomIC : ChevronRightIC}
       >
-        <Text variant="b2">{`View ${devices?.length > 0 ? `${devices.length} ` : ''}sessions`}</Text>
+        <Text variant="b2">{`View ${
+          devices?.length > 0 ? `${devices.length} ` : ""
+        }sessions`}</Text>
       </MenuItem>
       {renderSessionChips()}
     </div>
@@ -151,22 +161,27 @@ SessionInfo.propTypes = {
 function ProfileFooter({ roomId, userId, onRequestClose }) {
   const [isCreatingDM, setIsCreatingDM] = useState(false);
   const [isIgnoring, setIsIgnoring] = useState(false);
-  const [isUserIgnored, setIsUserIgnored] = useState(initMatrix.matrixClient.isUserIgnored(userId));
+  const [isUserIgnored, setIsUserIgnored] = useState(
+    initMatrix.matrixClient.isUserIgnored(userId)
+  );
 
   const isMountedRef = useRef(true);
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
   const member = room.getMember(userId);
-  const isInvitable = member?.membership !== 'join' && member?.membership !== 'ban';
+  const isInvitable =
+    member?.membership !== "join" && member?.membership !== "ban";
 
   const [isInviting, setIsInviting] = useState(false);
-  const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
+  const [isInvited, setIsInvited] = useState(member?.membership === "invite");
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
   const userPL = room.getMember(userId)?.powerLevel || 0;
-  const canIKick = room.currentState.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
+  const canIKick =
+    room.currentState.hasSufficientPowerLevelFor("kick", myPowerlevel) &&
+    userPL < myPowerlevel;
 
-  const isBanned = member?.membership === 'ban';
+  const isBanned = member?.membership === "ban";
 
   const onCreated = (dmRoomId) => {
     if (isMountedRef.current === false) return;
@@ -246,14 +261,10 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
 
   return (
     <div className="profile-viewer__buttons">
-      <Button
-        variant="primary"
-        onClick={openDM}
-        disabled={isCreatingDM}
-      >
-        {isCreatingDM ? 'Creating room...' : 'Message'}
+      <Button variant="primary" onClick={openDM} disabled={isCreatingDM}>
+        {isCreatingDM ? "Creating room..." : "Message"}
       </Button>
-      { isBanned && canIKick && (
+      {isBanned && canIKick && (
         <Button
           variant="positive"
           onClick={() => roomActions.unban(roomId, userId)}
@@ -261,28 +272,22 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
           Unban
         </Button>
       )}
-      { (isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
-        <Button
-          onClick={toggleInvite}
-          disabled={isInviting}
-        >
-          {
-            isInvited
-              ? `${isInviting ? 'Disinviting...' : 'Disinvite'}`
-              : `${isInviting ? 'Inviting...' : 'Invite'}`
-          }
-        </Button>
-      )}
+      {(isInvited ? canIKick : room.canInvite(mx.getUserId())) &&
+        isInvitable && (
+          <Button onClick={toggleInvite} disabled={isInviting}>
+            {isInvited
+              ? `${isInviting ? "Disinviting..." : "Disinvite"}`
+              : `${isInviting ? "Inviting..." : "Invite"}`}
+          </Button>
+        )}
       <Button
-        variant={isUserIgnored ? 'positive' : 'danger'}
+        variant={isUserIgnored ? "positive" : "danger"}
         onClick={toggleIgnore}
         disabled={isIgnoring}
       >
-        {
-          isUserIgnored
-            ? `${isIgnoring ? 'Unignoring...' : 'Unignore'}`
-            : `${isIgnoring ? 'Ignoring...' : 'Ignore'}`
-        }
+        {isUserIgnored
+          ? `${isIgnoring ? "Unignoring..." : "Unignore"}`
+          : `${isIgnoring ? "Ignoring..." : "Ignore"}`}
       </Button>
     </div>
   );
@@ -306,7 +311,10 @@ function useToggleDialog() {
     };
     navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
     return () => {
-      navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+      navigation.removeListener(
+        cons.events.navigation.PROFILE_VIEWER_OPENED,
+        loadProfile
+      );
     };
   }, []);
 
@@ -326,23 +334,24 @@ function useRerenderOnProfileChange(roomId, userId) {
   useEffect(() => {
     const handleProfileChange = (mEvent, member) => {
       if (
-        mEvent.getRoomId() === roomId
-        && (member.userId === userId || member.userId === mx.getUserId())
+        mEvent.getRoomId() === roomId &&
+        (member.userId === userId || member.userId === mx.getUserId())
       ) {
         forceUpdate();
       }
     };
-    mx.on('RoomMember.powerLevel', handleProfileChange);
-    mx.on('RoomMember.membership', handleProfileChange);
+    mx.on("RoomMember.powerLevel", handleProfileChange);
+    mx.on("RoomMember.membership", handleProfileChange);
     return () => {
-      mx.removeListener('RoomMember.powerLevel', handleProfileChange);
-      mx.removeListener('RoomMember.membership', handleProfileChange);
+      mx.removeListener("RoomMember.powerLevel", handleProfileChange);
+      mx.removeListener("RoomMember.membership", handleProfileChange);
     };
   }, [roomId, userId]);
 }
 
 function ProfileViewer() {
-  const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
+  const [isOpen, roomId, userId, closeDialog, handleAfterClose] =
+    useToggleDialog();
   useRerenderOnProfileChange(roomId, userId);
 
   const mx = initMatrix.matrixClient;
@@ -350,31 +359,38 @@ function ProfileViewer() {
 
   const renderProfile = () => {
     const roomMember = room.getMember(userId);
-    const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId);
-    const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
-    const avatarUrl = (avatarMxc && avatarMxc !== 'null') ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
+    const username = roomMember
+      ? getUsernameOfRoomMember(roomMember)
+      : getUsername(userId);
+    const avatarMxc =
+      roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
+    const avatarUrl =
+      avatarMxc && avatarMxc !== "null"
+        ? mx.mxcUrlToHttp(avatarMxc, 80, 80, "crop")
+        : null;
 
     const powerLevel = roomMember?.powerLevel || 0;
     const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
 
-    const canChangeRole = (
-      room.currentState.maySendEvent('m.room.power_levels', mx.getUserId())
-      && (powerLevel < myPowerLevel || userId === mx.getUserId())
-    );
+    const canChangeRole =
+      room.currentState.maySendEvent("m.room.power_levels", mx.getUserId()) &&
+      (powerLevel < myPowerLevel || userId === mx.getUserId());
 
     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?';
+      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?";
 
       const isSharedPower = newPowerLevel === myPowerLevel;
       const isDemotingMyself = userId === mx.getUserId();
       if (isSharedPower || isDemotingMyself) {
         const isConfirmed = await confirmDialog(
-          'Change power level',
+          "Change power level",
           isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG,
-          'Change',
-          'caution',
+          "Change",
+          "caution"
         );
         if (!isConfirmed) return;
         roomActions.setPowerLevel(roomId, userId, newPowerLevel);
@@ -385,8 +401,8 @@ function ProfileViewer() {
 
     const handlePowerSelector = (e) => {
       openReusableContextMenu(
-        'bottom',
-        getEventCords(e, '.btn-surface'),
+        "bottom",
+        getEventCords(e, ".btn-surface"),
         (closeMenu) => (
           <PowerLevelSelector
             value={powerLevel}
@@ -396,16 +412,23 @@ function ProfileViewer() {
               handleChangePowerLevel(pl);
             }}
           />
-        ),
+        )
       );
     };
 
     return (
       <div className="profile-viewer">
         <div className="profile-viewer__user">
-          <Avatar imageSrc={avatarUrl} text={username} bgColor={colorMXID(userId)} size="large" />
+          <Avatar
+            imageSrc={avatarUrl}
+            text={username}
+            bgColor={colorMXID(userId)}
+            size="large"
+          />
           <div className="profile-viewer__user__info">
-            <Text variant="s1" weight="medium">{twemojify(username)}</Text>
+            <Text variant="s1" weight="medium">
+              {twemojify(username)}
+            </Text>
             <Text variant="b2">{twemojify(userId)}</Text>
           </div>
           <div className="profile-viewer__user__role">
@@ -414,14 +437,18 @@ function ProfileViewer() {
               onClick={canChangeRole ? handlePowerSelector : null}
               iconSrc={canChangeRole ? ChevronBottomIC : null}
             >
-              {`${getPowerLabel(powerLevel) || 'Member'} - ${powerLevel}`}
+              {`${getPowerLabel(powerLevel) || "Member"} - ${powerLevel}`}
             </Button>
           </div>
         </div>
         <ModerationTools roomId={roomId} userId={userId} />
         <SessionInfo userId={userId} />
-        { userId !== mx.getUserId() && (
-          <ProfileFooter roomId={roomId} userId={userId} onRequestClose={closeDialog} />
+        {userId !== mx.getUserId() && (
+          <ProfileFooter
+            roomId={roomId}
+            userId={userId}
+            onRequestClose={closeDialog}
+          />
         )}
       </div>
     );
@@ -431,10 +458,12 @@ function ProfileViewer() {
     <Dialog
       className="profile-viewer__dialog"
       isOpen={isOpen}
-      title={room?.name ?? ''}
+      title={room?.name ?? ""}
       onAfterClose={handleAfterClose}
       onRequestClose={closeDialog}
-      contentOptions={<IconButton src={CrossIC} onClick={closeDialog} tooltip="Close" />}
+      contentOptions={
+        <IconButton src={CrossIC} onClick={closeDialog} tooltip="Close" />
+      }
     >
       {roomId ? renderProfile() : <div />}
     </Dialog>
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.scss b/src/app/organisms/profile-viewer/ProfileViewer.scss
index 1401b777..b83977a7 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.scss
+++ b/src/app/organisms/profile-viewer/ProfileViewer.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .profile-viewer__dialog {
   & .dialog__content__wrapper {
@@ -36,7 +36,7 @@
       }
     }
   }
-  
+
   & .session-info {
     margin-top: var(--sp-normal);
   }
@@ -45,7 +45,7 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    
+
     width: 100%;
     padding: var(--sp-normal);
     background-color: var(--bg-surface);
@@ -53,7 +53,7 @@
     display: flex;
 
     & > *:nth-child(2n) {
-      margin: 0 var(--sp-normal)
+      margin: 0 var(--sp-normal);
     }
     & > *:last-child {
       @include dir.side(margin, auto, 0);
@@ -93,7 +93,7 @@
       @include dir.side(margin, 0, var(--sp-extra-tight));
     }
   }
-  
+
   &__chips {
     border-top: 1px solid var(--bg-surface-border);
     padding: var(--sp-tight);
@@ -106,5 +106,5 @@
       margin-top: var(--sp-extra-tight);
       @include dir.side(margin, 0, var(--sp-extra-tight));
     }
-  } 
-}
\ No newline at end of file
+  }
+}
diff --git a/src/app/organisms/public-rooms/PublicRooms.jsx b/src/app/organisms/public-rooms/PublicRooms.jsx
index d1674c32..9bbe3078 100644
--- a/src/app/organisms/public-rooms/PublicRooms.jsx
+++ b/src/app/organisms/public-rooms/PublicRooms.jsx
@@ -1,22 +1,22 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './PublicRooms.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./PublicRooms.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { selectRoom, selectTab } from "../../../client/action/navigation";
+import * as roomActions from "../../../client/action/room";
 
-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 Input from '../../atoms/input/Input';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import RoomTile from '../../molecules/room-tile/RoomTile';
+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 Input from "../../atoms/input/Input";
+import PopupWindow from "../../molecules/popup-window/PopupWindow";
+import RoomTile from "../../molecules/room-tile/RoomTile";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
+import HashSearchIC from "../../../../public/res/ic/outlined/hash-search.svg";
 
 const SEARCH_LIMIT = 20;
 
@@ -30,25 +30,37 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
   function handleOnRoomAdded(roomId) {
     if (status.tempRoomId !== null && status.tempRoomId !== roomId) return;
     setStatus({
-      isJoining: false, error: null, roomId, tempRoomId: null,
+      isJoining: false,
+      error: null,
+      roomId,
+      tempRoomId: null,
     });
   }
 
   useEffect(() => {
     initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+      initMatrix.roomList.removeListener(
+        cons.events.roomList.ROOM_JOINED,
+        handleOnRoomAdded
+      );
     };
   }, [status]);
 
   async function joinWithAlias() {
     setStatus({
-      isJoining: true, error: null, roomId: null, tempRoomId: null,
+      isJoining: true,
+      error: null,
+      roomId: null,
+      tempRoomId: null,
     });
     try {
       const roomId = await roomActions.join(alias, false);
       setStatus({
-        isJoining: true, error: null, roomId: null, tempRoomId: roomId,
+        isJoining: true,
+        error: null,
+        roomId: null,
+        tempRoomId: roomId,
       });
     } catch (e) {
       setStatus({
@@ -63,7 +75,9 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
   return (
     <div className="try-join-with-alias">
       {status.roomId === null && !status.isJoining && status.error === null && (
-        <Button onClick={() => joinWithAlias()}>{`Try joining ${alias}`}</Button>
+        <Button
+          onClick={() => joinWithAlias()}
+        >{`Try joining ${alias}`}</Button>
       )}
       {status.isJoining && (
         <>
@@ -72,9 +86,20 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
         </>
       )}
       {status.roomId !== null && (
-        <Button onClick={() => { onRequestClose(); selectRoom(status.roomId); }}>Open</Button>
+        <Button
+          onClick={() => {
+            onRequestClose();
+            selectRoom(status.roomId);
+          }}
+        >
+          Open
+        </Button>
+      )}
+      {status.error !== null && (
+        <Text variant="b2">
+          <span style={{ color: "var(--bg-danger)" }}>{status.error}</span>
+        </Text>
       )}
-      {status.error !== null && <Text variant="b2"><span style={{ color: 'var(--bg-danger)' }}>{status.error}</span></Text>}
     </div>
   );
 }
@@ -99,20 +124,25 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
   async function searchRooms(viewMore) {
     let inputRoomName = roomNameRef?.current?.value || searchTerm;
     let isInputAlias = false;
-    if (typeof inputRoomName === 'string') {
-      isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
+    if (typeof inputRoomName === "string") {
+      isInputAlias = inputRoomName[0] === "#" && inputRoomName.indexOf(":") > 1;
     }
-    const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null;
+    const hsFromAlias = isInputAlias
+      ? inputRoomName.slice(inputRoomName.indexOf(":") + 1)
+      : null;
     let inputHs = hsFromAlias || hsRef?.current?.value;
 
-    if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
-    if (typeof inputRoomName !== 'string') inputRoomName = '';
+    if (typeof inputHs !== "string")
+      inputHs = userId.slice(userId.indexOf(":") + 1);
+    if (typeof inputRoomName !== "string") inputRoomName = "";
 
     if (isSearching) return;
-    if (viewMore !== true
-      && inputRoomName === searchQuery.name
-      && inputHs === searchQuery.homeserver
-    ) return;
+    if (
+      viewMore !== true &&
+      inputRoomName === searchQuery.name &&
+      inputHs === searchQuery.homeserver
+    )
+      return;
 
     updateSearchQuery({
       name: inputRoomName,
@@ -132,22 +162,25 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
         },
       });
 
-      const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
+      const totalRooms = viewMore
+        ? publicRooms.concat(result.chunk)
+        : result.chunk;
       updatePublicRooms(totalRooms);
       updateNextBatch(result.next_batch);
       updateIsSearching(false);
       updateIsViewMore(false);
       if (totalRooms.length === 0) {
         updateSearchQuery({
-          error: inputRoomName === ''
-            ? `No public rooms on ${inputHs}`
-            : `No result found for "${inputRoomName}" on ${inputHs}`,
+          error:
+            inputRoomName === ""
+              ? `No public rooms on ${inputHs}`
+              : `No result found for "${inputRoomName}" on ${inputHs}`,
           alias: isInputAlias ? inputRoomName : null,
         });
       }
     } catch (e) {
       updatePublicRooms([]);
-      let err = 'Something went wrong!';
+      let err = "Something went wrong!";
       if (e?.httpStatus >= 400 && e?.httpStatus < 500) {
         err = e.message;
       }
@@ -174,7 +207,10 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
   useEffect(() => {
     initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+      initMatrix.roomList.removeListener(
+        cons.events.roomList.ROOM_JOINED,
+        handleOnRoomAdded
+      );
     };
   }, [joiningRooms]);
 
@@ -193,23 +229,51 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
 
   function renderRoomList(rooms) {
     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.matrixClient.getRoom(room.room_id)?.getMyMembership() === 'join';
+      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.matrixClient.getRoom(room.room_id)?.getMyMembership() ===
+        "join";
       return (
         <RoomTile
           key={room.room_id}
-          avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
+          avatarSrc={
+            typeof room.avatar_url === "string"
+              ? initMatrix.matrixClient.mxcUrlToHttp(
+                  room.avatar_url,
+                  42,
+                  42,
+                  "crop"
+                )
+              : null
+          }
           name={name}
           id={alias}
           memberCount={room.num_joined_members}
-          desc={typeof room.topic === 'string' ? room.topic : null}
-          options={(
+          desc={typeof room.topic === "string" ? room.topic : null}
+          options={
             <>
-              {isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
-              {!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
+              {isJoined && (
+                <Button onClick={() => handleViewRoom(room.room_id)}>
+                  Open
+                </Button>
+              )}
+              {!isJoined &&
+                (joiningRooms.has(room.room_id) ? (
+                  <Spinner size="small" />
+                ) : (
+                  <Button
+                    onClick={() => joinRoom(room.aliases?.[0] || room.room_id)}
+                    variant="primary"
+                  >
+                    Join
+                  </Button>
+                ))}
             </>
-          )}
+          }
         />
       );
     });
@@ -219,64 +283,90 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
     <PopupWindow
       isOpen={isOpen}
       title="Public rooms"
-      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      contentOptions={
+        <IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />
+      }
       onRequestClose={onRequestClose}
     >
       <div className="public-rooms">
-        <form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
+        <form
+          className="public-rooms__form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            searchRooms();
+          }}
+        >
           <div className="public-rooms__input-wrapper">
-            <Input value={searchTerm} forwardRef={roomNameRef} label="Room name or alias" />
-            <Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
+            <Input
+              value={searchTerm}
+              forwardRef={roomNameRef}
+              label="Room name or alias"
+            />
+            <Input
+              forwardRef={hsRef}
+              value={userId.slice(userId.indexOf(":") + 1)}
+              label="Homeserver"
+              required
+            />
           </div>
-          <Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
+          <Button
+            disabled={isSearching}
+            iconSrc={HashSearchIC}
+            variant="primary"
+            type="submit"
+          >
+            Search
+          </Button>
         </form>
         <div className="public-rooms__search-status">
-          {
-            typeof searchQuery.name !== 'undefined' && isSearching && (
-              searchQuery.name === ''
-                ? (
-                  <div className="flex--center">
-                    <Spinner size="small" />
-                    <Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
-                  </div>
-                )
-                : (
-                  <div className="flex--center">
-                    <Spinner size="small" />
-                    <Text variant="b2">{`Searching for "${searchQuery.name}" on ${searchQuery.homeserver}...`}</Text>
-                  </div>
-                )
-            )
-          }
-          {
-            typeof searchQuery.name !== 'undefined' && !isSearching && (
-              searchQuery.name === ''
-                ? <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
-                : <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
-            )
-          }
-          { searchQuery.error && (
+          {typeof searchQuery.name !== "undefined" &&
+            isSearching &&
+            (searchQuery.name === "" ? (
+              <div className="flex--center">
+                <Spinner size="small" />
+                <Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
+              </div>
+            ) : (
+              <div className="flex--center">
+                <Spinner size="small" />
+                <Text variant="b2">{`Searching for "${searchQuery.name}" on ${searchQuery.homeserver}...`}</Text>
+              </div>
+            ))}
+          {typeof searchQuery.name !== "undefined" &&
+            !isSearching &&
+            (searchQuery.name === "" ? (
+              <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
+            ) : (
+              <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
+            ))}
+          {searchQuery.error && (
             <>
-              <Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
-              {typeof searchQuery.alias === 'string' && (
-                <TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
+              <Text className="public-rooms__search-error" variant="b2">
+                {searchQuery.error}
+              </Text>
+              {typeof searchQuery.alias === "string" && (
+                <TryJoinWithAlias
+                  onRequestClose={onRequestClose}
+                  alias={searchQuery.alias}
+                />
               )}
             </>
           )}
         </div>
-        { publicRooms.length !== 0 && (
+        {publicRooms.length !== 0 && (
           <div className="public-rooms__content">
-            { renderRoomList(publicRooms) }
-          </div>
-        )}
-        { publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
-          <div className="public-rooms__view-more">
-            { isViewMore !== true && (
-              <Button onClick={() => searchRooms(true)}>View more</Button>
-            )}
-            { isViewMore && <Spinner /> }
+            {renderRoomList(publicRooms)}
           </div>
         )}
+        {publicRooms.length !== 0 &&
+          publicRooms.length % SEARCH_LIMIT === 0 && (
+            <div className="public-rooms__view-more">
+              {isViewMore !== true && (
+                <Button onClick={() => searchRooms(true)}>View more</Button>
+              )}
+              {isViewMore && <Spinner />}
+            </div>
+          )}
       </div>
     </PopupWindow>
   );
diff --git a/src/app/organisms/public-rooms/PublicRooms.scss b/src/app/organisms/public-rooms/PublicRooms.scss
index dc55c947..693ab25d 100644
--- a/src/app/organisms/public-rooms/PublicRooms.scss
+++ b/src/app/organisms/public-rooms/PublicRooms.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .public-rooms {
   @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
@@ -27,9 +27,10 @@
       min-width: 0;
 
       & .input {
-        @include dir.prop(border-radius,
+        @include dir.prop(
+          border-radius,
           var(--bo-radius) 0 0 var(--bo-radius),
-          0 var(--bo-radius) var(--bo-radius) 0,
+          0 var(--bo-radius) var(--bo-radius) 0
         );
       }
     }
@@ -38,9 +39,10 @@
       width: 120px;
       @include dir.prop(border-left-width, 0, 1px);
       @include dir.prop(border-right-width, 1px, 0);
-      @include dir.prop(border-radius,
+      @include dir.prop(
+        border-radius,
         0 var(--bo-radius) var(--bo-radius) 0,
-        var(--bo-radius) 0 0 var(--bo-radius),
+        var(--bo-radius) 0 0 var(--bo-radius)
       );
     }
   }
@@ -66,7 +68,7 @@
     margin-top: var(--sp-loose);
     @include dir.side(margin, calc(var(--av-normal) + var(--sp-normal)), 0);
   }
-  
+
   & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
@@ -78,8 +80,8 @@
 .try-join-with-alias {
   display: flex;
   align-items: center;
-  
-  & >.text:nth-child(2) {
+
+  & > .text:nth-child(2) {
     margin: 0 var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/pw/Dialogs.jsx b/src/app/organisms/pw/Dialogs.jsx
index a51d07e1..2a238bea 100644
--- a/src/app/organisms/pw/Dialogs.jsx
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
 
-import ReadReceipts from '../read-receipts/ReadReceipts';
-import ProfileViewer from '../profile-viewer/ProfileViewer';
-import ShortcutSpaces from '../shortcut-spaces/ShortcutSpaces';
-import SpaceAddExisting from '../../molecules/space-add-existing/SpaceAddExisting';
-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 ReadReceipts from "../read-receipts/ReadReceipts";
+import ProfileViewer from "../profile-viewer/ProfileViewer";
+import ShortcutSpaces from "../shortcut-spaces/ShortcutSpaces";
+import SpaceAddExisting from "../../molecules/space-add-existing/SpaceAddExisting";
+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';
+import ReusableDialog from "../../molecules/dialog/ReusableDialog";
 
 function Dialogs() {
   return (
diff --git a/src/app/organisms/pw/Windows.jsx b/src/app/organisms/pw/Windows.jsx
index ba80f132..4916a739 100644
--- a/src/app/organisms/pw/Windows.jsx
+++ b/src/app/organisms/pw/Windows.jsx
@@ -1,22 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
 
-import InviteList from '../invite-list/InviteList';
-import PublicRooms from '../public-rooms/PublicRooms';
-import InviteUser from '../invite-user/InviteUser';
-import Settings from '../settings/Settings';
-import SpaceSettings from '../space-settings/SpaceSettings';
-import SpaceManage from '../space-manage/SpaceManage';
+import InviteList from "../invite-list/InviteList";
+import PublicRooms from "../public-rooms/PublicRooms";
+import InviteUser from "../invite-user/InviteUser";
+import Settings from "../settings/Settings";
+import SpaceSettings from "../space-settings/SpaceSettings";
+import SpaceManage from "../space-manage/SpaceManage";
 
 function Windows() {
   const [isInviteList, changeInviteList] = useState(false);
   const [publicRooms, changePublicRooms] = useState({
-    isOpen: false, searchTerm: undefined,
+    isOpen: false,
+    searchTerm: undefined,
   });
   const [inviteUser, changeInviteUser] = useState({
-    isOpen: false, roomId: undefined, term: undefined,
+    isOpen: false,
+    roomId: undefined,
+    term: undefined,
   });
 
   function openInviteList() {
@@ -41,9 +44,18 @@ function Windows() {
     navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
     navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
     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.INVITE_LIST_OPENED,
+        openInviteList
+      );
+      navigation.removeListener(
+        cons.events.navigation.PUBLIC_ROOMS_OPENED,
+        openPublicRooms
+      );
+      navigation.removeListener(
+        cons.events.navigation.INVITE_USER_OPENED,
+        openInviteUser
+      );
     };
   }, []);
 
@@ -56,13 +68,17 @@ function Windows() {
       <PublicRooms
         isOpen={publicRooms.isOpen}
         searchTerm={publicRooms.searchTerm}
-        onRequestClose={() => changePublicRooms({ isOpen: false, searchTerm: undefined })}
+        onRequestClose={() =>
+          changePublicRooms({ isOpen: false, searchTerm: undefined })
+        }
       />
       <InviteUser
         isOpen={inviteUser.isOpen}
         roomId={inviteUser.roomId}
         searchTerm={inviteUser.searchTerm}
-        onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
+        onRequestClose={() =>
+          changeInviteUser({ isOpen: false, roomId: undefined })
+        }
       />
       <Settings />
       <SpaceSettings />
diff --git a/src/app/organisms/read-receipts/ReadReceipts.jsx b/src/app/organisms/read-receipts/ReadReceipts.jsx
index 1e648e0b..63ee7b33 100644
--- a/src/app/organisms/read-receipts/ReadReceipts.jsx
+++ b/src/app/organisms/read-receipts/ReadReceipts.jsx
@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import { getUsername, getUsernameOfRoomMember } from "../../../util/matrixUtil";
+import colorMXID from "../../../util/colorMXID";
 
-import IconButton from '../../atoms/button/IconButton';
-import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
-import Dialog from '../../molecules/dialog/Dialog';
+import IconButton from "../../atoms/button/IconButton";
+import PeopleSelector from "../../molecules/people-selector/PeopleSelector";
+import Dialog from "../../molecules/dialog/Dialog";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import { openProfileViewer } from '../../../client/action/navigation';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
+import { openProfileViewer } from "../../../client/action/navigation";
 
 function ReadReceipts() {
   const [isOpen, setIsOpen] = useState(false);
@@ -26,7 +26,10 @@ function ReadReceipts() {
     };
     navigation.on(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
     return () => {
-      navigation.removeListener(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+      navigation.removeListener(
+        cons.events.navigation.READRECEIPTS_OPENED,
+        loadReadReceipts
+      );
     };
   }, []);
 
@@ -39,7 +42,8 @@ function ReadReceipts() {
     const room = initMatrix.matrixClient.getRoom(roomId);
     const member = room.getMember(userId);
     const getUserDisplayName = () => {
-      if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+      if (room?.getMember(userId))
+        return getUsernameOfRoomMember(room.getMember(userId));
       return getUsername(userId);
     };
     return (
@@ -49,7 +53,12 @@ function ReadReceipts() {
           setIsOpen(false);
           openProfileViewer(userId, roomId);
         }}
-        avatarSrc={member?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
+        avatarSrc={member?.getAvatarUrl(
+          initMatrix.matrixClient.baseUrl,
+          24,
+          24,
+          "crop"
+        )}
         name={getUserDisplayName(userId)}
         color={colorMXID(userId)}
       />
@@ -62,12 +71,21 @@ function ReadReceipts() {
       title="Seen by"
       onAfterClose={handleAfterClose}
       onRequestClose={() => setIsOpen(false)}
-      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+      contentOptions={
+        <IconButton
+          src={CrossIC}
+          onClick={() => setIsOpen(false)}
+          tooltip="Close"
+        />
+      }
     >
-      <div style={{ marginTop: 'var(--sp-tight)', marginBottom: 'var(--sp-extra-loose)' }}>
-        {
-          readers.map(renderPeople)
-        }
+      <div
+        style={{
+          marginTop: "var(--sp-tight)",
+          marginBottom: "var(--sp-extra-loose)",
+        }}
+      >
+        {readers.map(renderPeople)}
       </div>
     </Dialog>
   );
diff --git a/src/app/organisms/room/EventLimit.js b/src/app/organisms/room/EventLimit.js
index de87da37..b749b143 100644
--- a/src/app/organisms/room/EventLimit.js
+++ b/src/app/organisms/room/EventLimit.js
@@ -7,7 +7,10 @@ class EventLimit {
   }
 
   get maxEvents() {
-    return Math.round(document.body.clientHeight / this.SMALLEST_EVT_HEIGHT) * this.PAGES_COUNT;
+    return (
+      Math.round(document.body.clientHeight / this.SMALLEST_EVT_HEIGHT) *
+      this.PAGES_COUNT
+    );
   }
 
   get from() {
diff --git a/src/app/organisms/room/PeopleDrawer.jsx b/src/app/organisms/room/PeopleDrawer.jsx
index 8f983247..1b8a052d 100644
--- a/src/app/organisms/room/PeopleDrawer.jsx
+++ b/src/app/organisms/room/PeopleDrawer.jsx
@@ -1,37 +1,41 @@
-import React, {
-  useState, useEffect, useCallback, useRef,
-} from 'react';
-import PropTypes from 'prop-types';
-import './PeopleDrawer.scss';
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import PropTypes from "prop-types";
+import "./PeopleDrawer.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { getPowerLabel, getUsernameOfRoomMember } from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
-import { openInviteUser, openProfileViewer } from '../../../client/action/navigation';
-import AsyncSearch from '../../../util/AsyncSearch';
-import { memberByAtoZ, memberByPowerLevel } from '../../../util/sort';
+import initMatrix from "../../../client/initMatrix";
+import {
+  getPowerLabel,
+  getUsernameOfRoomMember,
+} from "../../../util/matrixUtil";
+import colorMXID from "../../../util/colorMXID";
+import {
+  openInviteUser,
+  openProfileViewer,
+} from "../../../client/action/navigation";
+import AsyncSearch from "../../../util/AsyncSearch";
+import { memberByAtoZ, memberByPowerLevel } from "../../../util/sort";
 
-import Text from '../../atoms/text/Text';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import Button from '../../atoms/button/Button';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import Input from '../../atoms/input/Input';
-import SegmentedControl from '../../atoms/segmented-controls/SegmentedControls';
-import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
+import Text from "../../atoms/text/Text";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import Button from "../../atoms/button/Button";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import Input from "../../atoms/input/Input";
+import SegmentedControl from "../../atoms/segmented-controls/SegmentedControls";
+import PeopleSelector from "../../molecules/people-selector/PeopleSelector";
 
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import AddUserIC from "../../../../public/res/ic/outlined/add-user.svg";
+import SearchIC from "../../../../public/res/ic/outlined/search.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function simplyfiMembers(members) {
   const mx = initMatrix.matrixClient;
   return members.map((member) => ({
     userId: member.userId,
     name: getUsernameOfRoomMember(member),
-    username: member.userId.slice(1, member.userId.indexOf(':')),
-    avatarSrc: member.getAvatarUrl(mx.baseUrl, 24, 24, 'crop'),
+    username: member.userId.slice(1, member.userId.indexOf(":")),
+    avatarSrc: member.getAvatarUrl(mx.baseUrl, 24, 24, "crop"),
     peopleRole: getPowerLabel(member.powerLevel),
     powerLevel: members.powerLevel,
   }));
@@ -45,14 +49,14 @@ function PeopleDrawer({ roomId }) {
   const canInvite = room?.canInvite(mx.getUserId());
 
   const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
-  const [membership, setMembership] = useState('join');
+  const [membership, setMembership] = useState("join");
   const [memberList, setMemberList] = useState([]);
   const [searchedMembers, setSearchedMembers] = useState(null);
   const searchRef = useRef(null);
 
   const getMembersWithMembership = useCallback(
     (mship) => room.getMembersWithMembership(mship),
-    [roomId, membership],
+    [roomId, membership]
   );
 
   function loadMorePeople() {
@@ -68,8 +72,8 @@ function PeopleDrawer({ roomId }) {
 
   function handleSearch(e) {
     const term = e.target.value;
-    if (term === '' || term === undefined) {
-      searchRef.current.value = '';
+    if (term === "" || term === undefined) {
+      searchRef.current.value = "";
       searchRef.current.focus();
       setSearchedMembers(null);
       setItemCount(PER_PAGE_MEMBER);
@@ -78,7 +82,7 @@ function PeopleDrawer({ roomId }) {
 
   useEffect(() => {
     asyncSearch.setup(memberList, {
-      keys: ['name', 'username', 'userId'],
+      keys: ["name", "username", "userId"],
       limit: PER_PAGE_MEMBER,
     });
   }, [memberList]);
@@ -92,11 +96,12 @@ function PeopleDrawer({ roomId }) {
       setMemberList(
         simplyfiMembers(
           getMembersWithMembership(membership)
-            .sort(memberByAtoZ).sort(memberByPowerLevel),
-        ),
+            .sort(memberByAtoZ)
+            .sort(memberByPowerLevel)
+        )
       );
     };
-    searchRef.current.value = '';
+    searchRef.current.value = "";
     updateMemberList();
     isLoadingMembers = true;
     room.loadMembersIfNeeded().then(() => {
@@ -106,89 +111,95 @@ function PeopleDrawer({ roomId }) {
     });
 
     asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
-    mx.on('RoomMember.membership', updateMemberList);
-    mx.on('RoomMember.powerLevel', updateMemberList);
+    mx.on("RoomMember.membership", updateMemberList);
+    mx.on("RoomMember.powerLevel", updateMemberList);
     return () => {
       isRoomChanged = true;
       setMemberList([]);
       setSearchedMembers(null);
       setItemCount(PER_PAGE_MEMBER);
       asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
-      mx.removeListener('RoomMember.membership', updateMemberList);
-      mx.removeListener('RoomMember.powerLevel', updateMemberList);
+      mx.removeListener("RoomMember.membership", updateMemberList);
+      mx.removeListener("RoomMember.powerLevel", updateMemberList);
     };
   }, [roomId, membership]);
 
   useEffect(() => {
-    setMembership('join');
+    setMembership("join");
   }, [roomId]);
 
-  const mList = searchedMembers !== null ? searchedMembers.data : memberList.slice(0, itemCount);
+  const mList =
+    searchedMembers !== null
+      ? searchedMembers.data
+      : memberList.slice(0, itemCount);
   return (
     <div className="people-drawer">
       <Header>
         <TitleWrapper>
           <Text variant="s1" primary>
             People
-            <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
+            <Text
+              className="people-drawer__member-count"
+              variant="b3"
+            >{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>
         </TitleWrapper>
-        <IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} disabled={!canInvite} />
+        <IconButton
+          onClick={() => openInviteUser(roomId)}
+          tooltip="Invite"
+          src={AddUserIC}
+          disabled={!canInvite}
+        />
       </Header>
       <div className="people-drawer__content-wrapper">
         <div className="people-drawer__scrollable">
           <ScrollView autoHide>
             <div className="people-drawer__content">
               <SegmentedControl
-                selected={
-                  (() => {
-                    const getSegmentIndex = {
-                      join: 0,
-                      invite: 1,
-                      ban: 2,
-                    };
-                    return getSegmentIndex[membership];
-                  })()
-                }
-                segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
+                selected={(() => {
+                  const getSegmentIndex = {
+                    join: 0,
+                    invite: 1,
+                    ban: 2,
+                  };
+                  return getSegmentIndex[membership];
+                })()}
+                segments={[
+                  { text: "Joined" },
+                  { text: "Invited" },
+                  { text: "Banned" },
+                ]}
                 onSelect={(index) => {
                   const selectSegment = [
-                    () => setMembership('join'),
-                    () => setMembership('invite'),
-                    () => setMembership('ban'),
+                    () => setMembership("join"),
+                    () => setMembership("invite"),
+                    () => setMembership("ban"),
                   ];
                   selectSegment[index]?.();
                 }}
               />
-              {
-                mList.map((member) => (
-                  <PeopleSelector
-                    key={member.userId}
-                    onClick={() => openProfileViewer(member.userId, roomId)}
-                    avatarSrc={member.avatarSrc}
-                    name={member.name}
-                    color={colorMXID(member.userId)}
-                    peopleRole={member.peopleRole}
-                  />
-                ))
-              }
-              {
-                (searchedMembers?.data.length === 0 || memberList.length === 0)
-                && (
-                  <div className="people-drawer__noresult">
-                    <Text variant="b2">No results found!</Text>
-                  </div>
-                )
-              }
+              {mList.map((member) => (
+                <PeopleSelector
+                  key={member.userId}
+                  onClick={() => openProfileViewer(member.userId, roomId)}
+                  avatarSrc={member.avatarSrc}
+                  name={member.name}
+                  color={colorMXID(member.userId)}
+                  peopleRole={member.peopleRole}
+                />
+              ))}
+              {(searchedMembers?.data.length === 0 ||
+                memberList.length === 0) && (
+                <div className="people-drawer__noresult">
+                  <Text variant="b2">No results found!</Text>
+                </div>
+              )}
               <div className="people-drawer__load-more">
-                {
-                  mList.length !== 0
-                  && memberList.length > itemCount
-                  && searchedMembers === null
-                  && (
+                {mList.length !== 0 &&
+                  memberList.length > itemCount &&
+                  searchedMembers === null && (
                     <Button onClick={loadMorePeople}>View more</Button>
-                  )
-                }
+                  )}
               </div>
             </div>
           </ScrollView>
@@ -196,11 +207,16 @@ function PeopleDrawer({ roomId }) {
         <div className="people-drawer__sticky">
           <form onSubmit={(e) => e.preventDefault()} className="people-search">
             <RawIcon size="small" src={SearchIC} />
-            <Input forwardRef={searchRef} type="text" onChange={handleSearch} placeholder="Search" required />
-            {
-              searchedMembers !== null
-              && <IconButton onClick={handleSearch} size="small" src={CrossIC} />
-            }
+            <Input
+              forwardRef={searchRef}
+              type="text"
+              onChange={handleSearch}
+              placeholder="Search"
+              required
+            />
+            {searchedMembers !== null && (
+              <IconButton onClick={handleSearch} size="small" src={CrossIC} />
+            )}
           </form>
         </div>
       </div>
diff --git a/src/app/organisms/room/PeopleDrawer.scss b/src/app/organisms/room/PeopleDrawer.scss
index cfc5f6c9..5959da4d 100644
--- a/src/app/organisms/room/PeopleDrawer.scss
+++ b/src/app/organisms/room/PeopleDrawer.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .people-drawer {
   @extend .cp-fx__column;
@@ -29,7 +29,7 @@
     & .people-search {
       --search-input-height: 40px;
       min-height: var(--search-input-height);
-  
+
       margin: 0 var(--sp-extra-tight);
 
       position: relative;
@@ -64,7 +64,7 @@
 .people-drawer__content {
   padding-top: var(--sp-extra-tight);
   padding-bottom: calc(2 * var(--sp-normal));
-  
+
   & .people-selector {
     padding: var(--sp-extra-tight);
     border-radius: var(--bo-radius);
@@ -72,7 +72,7 @@
       @include dir.side(margin, var(--sp-extra-tight), 0);
     }
   }
-  
+
   & .segmented-controls {
     display: flex;
     margin-bottom: var(--sp-extra-tight);
@@ -90,4 +90,4 @@
   & .btn-surface {
     width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/Room.jsx b/src/app/organisms/room/Room.jsx
index 447686af..49486c09 100644
--- a/src/app/organisms/room/Room.jsx
+++ b/src/app/organisms/room/Room.jsx
@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import './Room.scss';
+import React, { useState, useEffect } from "react";
+import "./Room.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-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 initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+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';
-import RoomSettings from './RoomSettings';
-import PeopleDrawer from './PeopleDrawer';
+import Welcome from "../welcome/Welcome";
+import RoomView from "./RoomView";
+import RoomSettings from "./RoomSettings";
+import PeopleDrawer from "./PeopleDrawer";
 
 function Room() {
   const [roomInfo, setRoomInfo] = useState({
@@ -41,15 +41,24 @@ function Room() {
 
     navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SELECTED,
+        handleRoomSelected
+      );
     };
   }, [roomInfo]);
 
   useEffect(() => {
     const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
-    settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
+    settings.on(
+      cons.events.settings.PEOPLE_DRAWER_TOGGLED,
+      handleDrawerToggling
+    );
     return () => {
-      settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
+      settings.removeListener(
+        cons.events.settings.PEOPLE_DRAWER_TOGGLED,
+        handleDrawerToggling
+      );
     };
   }, []);
 
diff --git a/src/app/organisms/room/Room.scss b/src/app/organisms/room/Room.scss
index 11a00074..181a958f 100644
--- a/src/app/organisms/room/Room.scss
+++ b/src/app/organisms/room/Room.scss
@@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/screen';
+@use "../../partials/flex";
+@use "../../partials/screen";
 
 .room {
   @extend .cp-fx__row;
diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx
index 63277347..c3727653 100644
--- a/src/app/organisms/room/RoomSettings.jsx
+++ b/src/app/organisms/room/RoomSettings.jsx
@@ -1,79 +1,89 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomSettings.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomSettings.scss";
 
-import { blurOnBubbling } from '../../atoms/button/script';
+import { blurOnBubbling } from "../../atoms/button/script";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import {
+  openInviteUser,
+  toggleRoomSettings,
+} from "../../../client/action/navigation";
+import * as roomActions from "../../../client/action/room";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import Tabs from '../../atoms/tabs/Tabs';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import RoomProfile from '../../molecules/room-profile/RoomProfile';
-import RoomSearch from '../../molecules/room-search/RoomSearch';
-import RoomNotification from '../../molecules/room-notification/RoomNotification';
-import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
-import RoomAliases from '../../molecules/room-aliases/RoomAliases';
-import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
-import RoomEncryption from '../../molecules/room-encryption/RoomEncryption';
-import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
-import RoomMembers from '../../molecules/room-members/RoomMembers';
-import RoomEmojis from '../../molecules/room-emojis/RoomEmojis';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import Tabs from "../../atoms/tabs/Tabs";
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
+import RoomProfile from "../../molecules/room-profile/RoomProfile";
+import RoomSearch from "../../molecules/room-search/RoomSearch";
+import RoomNotification from "../../molecules/room-notification/RoomNotification";
+import RoomVisibility from "../../molecules/room-visibility/RoomVisibility";
+import RoomAliases from "../../molecules/room-aliases/RoomAliases";
+import RoomHistoryVisibility from "../../molecules/room-history-visibility/RoomHistoryVisibility";
+import RoomEncryption from "../../molecules/room-encryption/RoomEncryption";
+import RoomPermissions from "../../molecules/room-permissions/RoomPermissions";
+import RoomMembers from "../../molecules/room-members/RoomMembers";
+import RoomEmojis from "../../molecules/room-emojis/RoomEmojis";
 
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
-import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
-import LockIC from '../../../../public/res/ic/outlined/lock.svg';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import ChevronTopIC from '../../../../public/res/ic/outlined/chevron-top.svg';
+import UserIC from "../../../../public/res/ic/outlined/user.svg";
+import SettingsIC from "../../../../public/res/ic/outlined/settings.svg";
+import EmojiIC from "../../../../public/res/ic/outlined/emoji.svg";
+import SearchIC from "../../../../public/res/ic/outlined/search.svg";
+import ShieldUserIC from "../../../../public/res/ic/outlined/shield-user.svg";
+import LockIC from "../../../../public/res/ic/outlined/lock.svg";
+import AddUserIC from "../../../../public/res/ic/outlined/add-user.svg";
+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';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
+import { confirmDialog } from "../../molecules/confirm-dialog/ConfirmDialog";
 
 const tabText = {
-  GENERAL: 'General',
-  SEARCH: 'Search',
-  MEMBERS: 'Members',
-  EMOJIS: 'Emojis',
-  PERMISSIONS: 'Permissions',
-  SECURITY: 'Security',
+  GENERAL: "General",
+  SEARCH: "Search",
+  MEMBERS: "Members",
+  EMOJIS: "Emojis",
+  PERMISSIONS: "Permissions",
+  SECURITY: "Security",
 };
 
-const tabItems = [{
-  iconSrc: SettingsIC,
-  text: tabText.GENERAL,
-  disabled: false,
-}, {
-  iconSrc: SearchIC,
-  text: tabText.SEARCH,
-  disabled: false,
-}, {
-  iconSrc: UserIC,
-  text: tabText.MEMBERS,
-  disabled: false,
-}, {
-  iconSrc: EmojiIC,
-  text: tabText.EMOJIS,
-  disabled: false,
-}, {
-  iconSrc: ShieldUserIC,
-  text: tabText.PERMISSIONS,
-  disabled: false,
-}, {
-  iconSrc: LockIC,
-  text: tabText.SECURITY,
-  disabled: false,
-}];
+const tabItems = [
+  {
+    iconSrc: SettingsIC,
+    text: tabText.GENERAL,
+    disabled: false,
+  },
+  {
+    iconSrc: SearchIC,
+    text: tabText.SEARCH,
+    disabled: false,
+  },
+  {
+    iconSrc: UserIC,
+    text: tabText.MEMBERS,
+    disabled: false,
+  },
+  {
+    iconSrc: EmojiIC,
+    text: tabText.EMOJIS,
+    disabled: false,
+  },
+  {
+    iconSrc: ShieldUserIC,
+    text: tabText.PERMISSIONS,
+    disabled: false,
+  },
+  {
+    iconSrc: LockIC,
+    text: tabText.SECURITY,
+    disabled: false,
+  },
+];
 
 function GeneralSettings({ roomId }) {
   const mx = initMatrix.matrixClient;
@@ -95,10 +105,10 @@ function GeneralSettings({ roomId }) {
           variant="danger"
           onClick={async () => {
             const isConfirmed = await confirmDialog(
-              'Leave room',
+              "Leave room",
               `Are you sure that you want to leave "${room.name}" room?`,
-              'Leave',
-              'danger',
+              "Leave",
+              "danger"
             );
             if (!isConfirmed) return;
             roomActions.leave(roomId);
@@ -109,7 +119,9 @@ function GeneralSettings({ roomId }) {
         </MenuItem>
       </div>
       <div className="room-settings__card">
-        <MenuHeader>Notification (Changing this will only affect you)</MenuHeader>
+        <MenuHeader>
+          Notification (Changing this will only affect you)
+        </MenuHeader>
         <RoomNotification roomId={roomId} />
       </div>
       <div className="room-settings__card">
@@ -168,7 +180,10 @@ function RoomSettings({ roomId }) {
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
       mounted = false;
-      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SETTINGS_TOGGLED,
+        settingsToggle
+      );
     };
   }, []);
 
@@ -183,12 +198,15 @@ function RoomSettings({ roomId }) {
               className="room-settings__header-btn"
               onClick={() => toggleRoomSettings()}
               type="button"
-              onMouseUp={(e) => blurOnBubbling(e, '.room-settings__header-btn')}
+              onMouseUp={(e) => blurOnBubbling(e, ".room-settings__header-btn")}
             >
               <TitleWrapper>
                 <Text variant="s1" weight="medium" primary>
                   {`${room.name}`}
-                  <span style={{ color: 'var(--tc-surface-low)' }}> — room settings</span>
+                  <span style={{ color: "var(--tc-surface-low)" }}>
+                    {" "}
+                    — room settings
+                  </span>
                 </Text>
               </TitleWrapper>
               <RawIcon size="small" src={ChevronTopIC} />
@@ -197,16 +215,30 @@ function RoomSettings({ roomId }) {
           <RoomProfile roomId={roomId} />
           <Tabs
             items={tabItems}
-            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
+            defaultSelected={tabItems.findIndex(
+              (tab) => tab.text === selectedTab.text
+            )}
             onSelect={handleTabChange}
           />
           <div className="room-settings__cards-wrapper">
-            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
-            {selectedTab.text === tabText.SEARCH && <RoomSearch roomId={roomId} />}
-            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
-            {selectedTab.text === tabText.EMOJIS && <RoomEmojis roomId={roomId} />}
-            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
-            {selectedTab.text === tabText.SECURITY && <SecuritySettings roomId={roomId} />}
+            {selectedTab.text === tabText.GENERAL && (
+              <GeneralSettings roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.SEARCH && (
+              <RoomSearch roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.MEMBERS && (
+              <RoomMembers roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.EMOJIS && (
+              <RoomEmojis roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.PERMISSIONS && (
+              <RoomPermissions roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.SECURITY && (
+              <SecuritySettings roomId={roomId} />
+            )}
           </div>
         </div>
       </ScrollView>
diff --git a/src/app/organisms/room/RoomSettings.scss b/src/app/organisms/room/RoomSettings.scss
index ab7fca5c..7b418aa3 100644
--- a/src/app/organisms/room/RoomSettings.scss
+++ b/src/app/organisms/room/RoomSettings.scss
@@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
+@use "../../partials/dir";
+@use "../../partials/flex";
 
 .room-settings {
   height: 100%;
@@ -18,8 +18,8 @@
     padding: var(--sp-ultra-tight) var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
     cursor: pointer;
-    
-    @media (hover:hover) {
+
+    @media (hover: hover) {
       &:hover {
         background-color: var(--bg-surface-hover);
         box-shadow: var(--bs-surface-outline);
@@ -40,7 +40,7 @@
       margin: var(--sp-extra-loose);
     }
   }
-  
+
   & .tabs {
     position: sticky;
     top: 0;
@@ -54,7 +54,7 @@
       padding: 0 var(--sp-normal);
     }
   }
-  
+
   &__cards-wrapper {
     padding: 0 var(--sp-normal);
     @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@@ -75,7 +75,7 @@
 
 .room-settings .room-permissions__card,
 .room-settings .room-search__form,
-.room-settings .room-search__result-item ,
+.room-settings .room-search__result-item,
 .room-settings .room-members {
   @extend .room-settings__card;
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/RoomView.jsx b/src/app/organisms/room/RoomView.jsx
index b94c35c4..a5e40c9c 100644
--- a/src/app/organisms/room/RoomView.jsx
+++ b/src/app/organisms/room/RoomView.jsx
@@ -1,17 +1,17 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './RoomView.scss';
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./RoomView.scss";
 
-import EventEmitter from 'events';
+import EventEmitter from "events";
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
 
-import RoomViewHeader from './RoomViewHeader';
-import RoomViewContent from './RoomViewContent';
-import RoomViewFloating from './RoomViewFloating';
-import RoomViewInput from './RoomViewInput';
-import RoomViewCmdBar from './RoomViewCmdBar';
+import RoomViewHeader from "./RoomViewHeader";
+import RoomViewContent from "./RoomViewContent";
+import RoomViewFloating from "./RoomViewFloating";
+import RoomViewInput from "./RoomViewInput";
+import RoomViewCmdBar from "./RoomViewCmdBar";
 
 const viewEvent = new EventEmitter();
 
@@ -23,19 +23,22 @@ function RoomView({ roomTimeline, eventId }) {
   useEffect(() => {
     const settingsToggle = (isVisible) => {
       const roomView = roomViewRef.current;
-      roomView.classList.toggle('room-view--dropped');
+      roomView.classList.toggle("room-view--dropped");
 
       const roomViewContent = roomView.children[1];
       if (isVisible) {
         setTimeout(() => {
           if (!navigation.isRoomSettings) return;
-          roomViewContent.style.visibility = 'hidden';
+          roomViewContent.style.visibility = "hidden";
         }, 200);
-      } else roomViewContent.style.visibility = 'visible';
+      } else roomViewContent.style.visibility = "visible";
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SETTINGS_TOGGLED,
+        settingsToggle
+      );
     };
   }, []);
 
@@ -44,14 +47,8 @@ function RoomView({ roomTimeline, eventId }) {
       <RoomViewHeader roomId={roomId} />
       <div className="room-view__content-wrapper">
         <div className="room-view__scrollable">
-          <RoomViewContent
-            eventId={eventId}
-            roomTimeline={roomTimeline}
-          />
-          <RoomViewFloating
-            roomId={roomId}
-            roomTimeline={roomTimeline}
-          />
+          <RoomViewContent eventId={eventId} roomTimeline={roomTimeline} />
+          <RoomViewFloating roomId={roomId} roomTimeline={roomTimeline} />
         </div>
         <div className="room-view__sticky">
           <RoomViewInput
diff --git a/src/app/organisms/room/RoomView.scss b/src/app/organisms/room/RoomView.scss
index 4f06bf26..d14ba1c1 100644
--- a/src/app/organisms/room/RoomView.scss
+++ b/src/app/organisms/room/RoomView.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/screen';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/screen";
+@use "../../partials/dir";
 
 .room-view {
   @extend .cp-fx__column;
@@ -35,11 +35,11 @@
     @extend .cp-fx__item-one;
     position: relative;
   }
-  
+
   &__sticky {
     min-height: 85px;
     position: relative;
     background: var(--bg-surface);
     border-top: 1px solid var(--bg-surface-border);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx
index 0d21123b..f47b995f 100644
--- a/src/app/organisms/room/RoomViewCmdBar.jsx
+++ b/src/app/organisms/room/RoomViewCmdBar.jsx
@@ -1,21 +1,21 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomViewCmdBar.scss';
-import parse from 'html-react-parser';
-import twemoji from 'twemoji';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomViewCmdBar.scss";
+import parse from "html-react-parser";
+import twemoji from "twemoji";
 
-import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
+import { twemojify, TWEMOJI_BASE_URL } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
-import AsyncSearch from '../../../util/AsyncSearch';
+import initMatrix from "../../../client/initMatrix";
+import { getEmojiForCompletion } from "../emoji-board/custom-emoji";
+import AsyncSearch from "../../../util/AsyncSearch";
 
-import Text from '../../atoms/text/Text';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import FollowingMembers from '../../molecules/following-members/FollowingMembers';
-import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';
-import commands from './commands';
+import Text from "../../atoms/text/Text";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import FollowingMembers from "../../molecules/following-members/FollowingMembers";
+import { addRecentEmoji, getRecentEmojis } from "../emoji-board/recent";
+import commands from "./commands";
 
 function CmdItem({ onClick, children }) {
   return (
@@ -31,7 +31,7 @@ CmdItem.propTypes = {
 
 function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
   function renderCmdSuggestions(cmdPrefix, cmds) {
-    const cmdOptString = typeof option === 'string' ? `/${option}` : '/?';
+    const cmdOptString = typeof option === "string" ? `/${option}` : "/?";
     return cmds.map((cmd) => (
       <CmdItem
         key={cmd}
@@ -43,7 +43,7 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
           });
         }}
       >
-        <Text variant="b2">{`${cmd}${cmd.isOptions ? cmdOptString : ''}`}</Text>
+        <Text variant="b2">{`${cmd}${cmd.isOptions ? cmdOptString : ""}`}</Text>
       </CmdItem>
     ));
   }
@@ -117,9 +117,9 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
   }
 
   const cmd = {
-    '/': (cmds) => renderCmdSuggestions(prefix, cmds),
-    ':': (emos) => renderEmojiSuggestion(prefix, emos),
-    '@': (members) => renderNameSuggestion(prefix, members),
+    "/": (cmds) => renderCmdSuggestions(prefix, cmds),
+    ":": (emos) => renderEmojiSuggestion(prefix, emos),
+    "@": (members) => renderNameSuggestion(prefix, members),
   };
   return cmd[prefix]?.(suggestions);
 }
@@ -132,36 +132,44 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
 
   function displaySuggestions(suggestions) {
     if (suggestions.length === 0) {
-      setCmd({ prefix: cmd?.prefix || cmdPrefix, error: 'No suggestion found.' });
-      viewEvent.emit('cmd_error');
+      setCmd({
+        prefix: cmd?.prefix || cmdPrefix,
+        error: "No suggestion found.",
+      });
+      viewEvent.emit("cmd_error");
       return;
     }
-    setCmd({ prefix: cmd?.prefix || cmdPrefix, suggestions, option: cmdOption });
+    setCmd({
+      prefix: cmd?.prefix || cmdPrefix,
+      suggestions,
+      option: cmdOption,
+    });
   }
 
   function processCmd(prefix, slug) {
     let searchTerm = slug;
     cmdOption = undefined;
     cmdPrefix = prefix;
-    if (prefix === '/') {
-      const cmdSlugParts = slug.split('/');
+    if (prefix === "/") {
+      const cmdSlugParts = slug.split("/");
       [searchTerm, cmdOption] = cmdSlugParts;
     }
-    if (prefix === ':') {
+    if (prefix === ":") {
       if (searchTerm.length <= 3) {
-        if (searchTerm.match(/^[-]?(\))$/)) searchTerm = 'smile';
-        else if (searchTerm.match(/^[-]?(s|S)$/)) searchTerm = 'confused';
-        else if (searchTerm.match(/^[-]?(o|O|0)$/)) searchTerm = 'astonished';
-        else if (searchTerm.match(/^[-]?(\|)$/)) searchTerm = 'neutral_face';
-        else if (searchTerm.match(/^[-]?(d|D)$/)) searchTerm = 'grin';
-        else if (searchTerm.match(/^[-]?(\/)$/)) searchTerm = 'frown';
-        else if (searchTerm.match(/^[-]?(p|P)$/)) searchTerm = 'stuck_out_tongue';
-        else if (searchTerm.match(/^'[-]?(\()$/)) searchTerm = 'cry';
-        else if (searchTerm.match(/^[-]?(x|X)$/)) searchTerm = 'dizzy_face';
-        else if (searchTerm.match(/^[-]?(\()$/)) searchTerm = 'pleading_face';
-        else if (searchTerm.match(/^[-]?(\$)$/)) searchTerm = 'money';
-        else if (searchTerm.match(/^(<3)$/)) searchTerm = 'heart';
-        else if (searchTerm.match(/^(c|ca|cat)$/)) searchTerm = '_cat';
+        if (searchTerm.match(/^[-]?(\))$/)) searchTerm = "smile";
+        else if (searchTerm.match(/^[-]?(s|S)$/)) searchTerm = "confused";
+        else if (searchTerm.match(/^[-]?(o|O|0)$/)) searchTerm = "astonished";
+        else if (searchTerm.match(/^[-]?(\|)$/)) searchTerm = "neutral_face";
+        else if (searchTerm.match(/^[-]?(d|D)$/)) searchTerm = "grin";
+        else if (searchTerm.match(/^[-]?(\/)$/)) searchTerm = "frown";
+        else if (searchTerm.match(/^[-]?(p|P)$/))
+          searchTerm = "stuck_out_tongue";
+        else if (searchTerm.match(/^'[-]?(\()$/)) searchTerm = "cry";
+        else if (searchTerm.match(/^[-]?(x|X)$/)) searchTerm = "dizzy_face";
+        else if (searchTerm.match(/^[-]?(\()$/)) searchTerm = "pleading_face";
+        else if (searchTerm.match(/^[-]?(\$)$/)) searchTerm = "money";
+        else if (searchTerm.match(/^(<3)$/)) searchTerm = "heart";
+        else if (searchTerm.match(/^(c|ca|cat)$/)) searchTerm = "_cat";
       }
     }
 
@@ -173,22 +181,30 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
 
     const mx = initMatrix.matrixClient;
     const setupSearch = {
-      '/': () => {
+      "/": () => {
         asyncSearch.setup(Object.keys(commands), { isContain: true });
         setCmd({ prefix, suggestions: Object.keys(commands) });
       },
-      ':': () => {
+      ":": () => {
         const parentIds = initMatrix.roomList.getAllParentSpaces(roomId);
         const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
-        const emojis = getEmojiForCompletion(mx, [mx.getRoom(roomId), ...parentRooms]);
+        const emojis = getEmojiForCompletion(mx, [
+          mx.getRoom(roomId),
+          ...parentRooms,
+        ]);
         const recentEmoji = getRecentEmojis(20);
-        asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 20 });
+        asyncSearch.setup(emojis, {
+          keys: ["shortcode"],
+          isContain: true,
+          limit: 20,
+        });
         setCmd({
           prefix,
-          suggestions: recentEmoji.length > 0 ? recentEmoji : emojis.slice(26, 46),
+          suggestions:
+            recentEmoji.length > 0 ? recentEmoji : emojis.slice(26, 46),
         });
       },
-      '@': () => {
+      "@": () => {
         const members = mx
           .getRoom(roomId)
           .getJoinedMembers()
@@ -196,7 +212,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
             name: member.name,
             userId: member.userId.slice(1),
           }));
-        asyncSearch.setup(members, { keys: ['name', 'userId'], limit: 20 });
+        asyncSearch.setup(members, { keys: ["name", "userId"], limit: 20 });
         const endIndex = members.length > 20 ? 20 : members.length;
         setCmd({ prefix, suggestions: members.slice(0, endIndex) });
       },
@@ -209,19 +225,21 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     cmdPrefix = undefined;
   }
   function fireCmd(myCmd) {
-    if (myCmd.prefix === '/') {
-      viewEvent.emit('cmd_fired', {
+    if (myCmd.prefix === "/") {
+      viewEvent.emit("cmd_fired", {
         replace: `/${myCmd.result.name}`,
       });
     }
-    if (myCmd.prefix === ':') {
+    if (myCmd.prefix === ":") {
       if (!myCmd.result.mxc) addRecentEmoji(myCmd.result.unicode);
-      viewEvent.emit('cmd_fired', {
-        replace: myCmd.result.mxc ? `:${myCmd.result.shortcode}: ` : myCmd.result.unicode,
+      viewEvent.emit("cmd_fired", {
+        replace: myCmd.result.mxc
+          ? `:${myCmd.result.shortcode}: `
+          : myCmd.result.unicode,
       });
     }
-    if (myCmd.prefix === '@') {
-      viewEvent.emit('cmd_fired', {
+    if (myCmd.prefix === "@") {
+      viewEvent.emit("cmd_fired", {
         replace: `@${myCmd.result.userId}`,
       });
     }
@@ -231,42 +249,43 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   function listenKeyboard(event) {
     const { activeElement } = document;
     const lastCmdItem = document.activeElement.parentNode.lastElementChild;
-    if (event.key === 'Escape') {
-      if (activeElement.className !== 'cmd-item') return;
-      viewEvent.emit('focus_msg_input');
+    if (event.key === "Escape") {
+      if (activeElement.className !== "cmd-item") return;
+      viewEvent.emit("focus_msg_input");
     }
-    if (event.key === 'Tab') {
-      if (lastCmdItem.className !== 'cmd-item') return;
+    if (event.key === "Tab") {
+      if (lastCmdItem.className !== "cmd-item") return;
       if (lastCmdItem !== activeElement) return;
       if (event.shiftKey) return;
-      viewEvent.emit('focus_msg_input');
+      viewEvent.emit("focus_msg_input");
       event.preventDefault();
     }
   }
 
   useEffect(() => {
-    viewEvent.on('cmd_activate', activateCmd);
-    viewEvent.on('cmd_deactivate', deactivateCmd);
+    viewEvent.on("cmd_activate", activateCmd);
+    viewEvent.on("cmd_deactivate", deactivateCmd);
     return () => {
       deactivateCmd();
-      viewEvent.removeListener('cmd_activate', activateCmd);
-      viewEvent.removeListener('cmd_deactivate', deactivateCmd);
+      viewEvent.removeListener("cmd_activate", activateCmd);
+      viewEvent.removeListener("cmd_deactivate", deactivateCmd);
     };
   }, [roomId]);
 
   useEffect(() => {
-    if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard);
-    viewEvent.on('cmd_process', processCmd);
+    if (cmd !== null) document.body.addEventListener("keydown", listenKeyboard);
+    viewEvent.on("cmd_process", processCmd);
     asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions);
     return () => {
-      if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard);
+      if (cmd !== null)
+        document.body.removeEventListener("keydown", listenKeyboard);
 
-      viewEvent.removeListener('cmd_process', processCmd);
+      viewEvent.removeListener("cmd_process", processCmd);
       asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions);
     };
   }, [cmd]);
 
-  const isError = typeof cmd?.error === 'string';
+  const isError = typeof cmd?.error === "string";
   if (cmd === null || isError) {
     return (
       <div className="cmd-bar">
@@ -282,7 +301,9 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
       </div>
       <div className="cmd-bar__content">
         <ScrollView horizontal vertical={false} invisible>
-          <div className="cmd-bar__content-suggestions">{renderSuggestions(cmd, fireCmd)}</div>
+          <div className="cmd-bar__content-suggestions">
+            {renderSuggestions(cmd, fireCmd)}
+          </div>
         </ScrollView>
       </div>
     </div>
diff --git a/src/app/organisms/room/RoomViewCmdBar.scss b/src/app/organisms/room/RoomViewCmdBar.scss
index 3f03fb06..995fd389 100644
--- a/src/app/organisms/room/RoomViewCmdBar.scss
+++ b/src/app/organisms/room/RoomViewCmdBar.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .cmd-bar {
   --cmd-bar-height: 28px;
@@ -41,7 +41,7 @@
   padding: 0 var(--sp-extra-tight);
   border-radius: var(--bo-radius) var(--bo-radius) 0 0;
   cursor: pointer;
-  
+
   display: inline-flex;
   align-items: center;
 
@@ -54,4 +54,4 @@
     border-bottom: 2px solid transparent;
     outline: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx
index 745ece82..2b439304 100644
--- a/src/app/organisms/room/RoomViewContent.jsx
+++ b/src/app/organisms/room/RoomViewContent.jsx
@@ -2,32 +2,36 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/prop-types */
 import React, {
-  useState, useEffect, useLayoutEffect, useCallback, useRef,
-} from 'react';
-import PropTypes from 'prop-types';
-import './RoomViewContent.scss';
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useRef,
+} from "react";
+import PropTypes from "prop-types";
+import "./RoomViewContent.scss";
 
-import dateFormat from 'dateformat';
-import { twemojify } from '../../../util/twemojify';
+import dateFormat from "dateformat";
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { openProfileViewer } from '../../../client/action/navigation';
-import { diffMinutes, isInSameDay, Throttle } from '../../../util/common';
-import { markAsRead } from '../../../client/action/notifications';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import { openProfileViewer } from "../../../client/action/navigation";
+import { diffMinutes, isInSameDay, Throttle } from "../../../util/common";
+import { markAsRead } from "../../../client/action/notifications";
 
-import Divider from '../../atoms/divider/Divider';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import { Message, PlaceholderMessage } from '../../molecules/message/Message';
-import RoomIntro from '../../molecules/room-intro/RoomIntro';
-import TimelineChange from '../../molecules/message/TimelineChange';
+import Divider from "../../atoms/divider/Divider";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import { Message, PlaceholderMessage } from "../../molecules/message/Message";
+import RoomIntro from "../../molecules/room-intro/RoomIntro";
+import TimelineChange from "../../molecules/message/TimelineChange";
 
-import { useStore } from '../../hooks/useStore';
-import { useForceUpdate } from '../../hooks/useForceUpdate';
-import { parseTimelineChange } from './common';
-import TimelineScroll from './TimelineScroll';
-import EventLimit from './EventLimit';
+import { useStore } from "../../hooks/useStore";
+import { useForceUpdate } from "../../hooks/useForceUpdate";
+import { parseTimelineChange } from "./common";
+import TimelineScroll from "./TimelineScroll";
+import EventLimit from "./EventLimit";
 
 const PAG_LIMIT = 30;
 const MAX_MSG_DIFF_MINUTES = 5;
@@ -56,38 +60,43 @@ function RoomIntroContainer({ event, timeline }) {
   const mx = initMatrix.matrixClient;
   const { roomList } = initMatrix;
   const { room } = timeline;
-  const roomTopic = room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+  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;
+  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 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}
-      </>
-    );
+  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);
+      roomList.removeListener(
+        cons.events.roomList.ROOM_PROFILE_UPDATED,
+        handleUpdate
+      );
     };
   }, []);
 
@@ -98,7 +107,14 @@ function RoomIntroContainer({ event, timeline }) {
       name={room.name}
       heading={twemojify(heading)}
       desc={desc}
-      time={event ? `Created at ${dateFormat(event.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
+      time={
+        event
+          ? `Created at ${dateFormat(
+              event.getDate(),
+              "dd mmmm yyyy, hh:MM TT"
+            )}`
+          : null
+      }
     />
   );
 }
@@ -106,15 +122,17 @@ function RoomIntroContainer({ event, timeline }) {
 function handleOnClickCapture(e) {
   const { target, nativeEvent } = e;
 
-  const userId = target.getAttribute('data-mx-pill');
+  const userId = target.getAttribute("data-mx-pill");
   if (userId) {
     const roomId = navigation.selectedRoomId;
     openProfileViewer(userId, roomId);
   }
 
-  const spoiler = nativeEvent.composedPath().find((el) => el?.hasAttribute?.('data-mx-spoiler'));
+  const spoiler = nativeEvent
+    .composedPath()
+    .find((el) => el?.hasAttribute?.("data-mx-spoiler"));
   if (spoiler) {
-    spoiler.classList.toggle('data-mx-spoiler--visible');
+    spoiler.classList.toggle("data-mx-spoiler--visible");
   }
 }
 
@@ -125,17 +143,17 @@ function renderEvent(
   isFocus,
   isEdit,
   setEdit,
-  cancelEdit,
+  cancelEdit
 ) {
-  const isBodyOnly = (prevMEvent !== null
-    && prevMEvent.getSender() === mEvent.getSender()
-    && prevMEvent.getType() !== 'm.room.member'
-    && prevMEvent.getType() !== 'm.room.create'
-    && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
-  );
+  const isBodyOnly =
+    prevMEvent !== null &&
+    prevMEvent.getSender() === mEvent.getSender() &&
+    prevMEvent.getType() !== "m.room.member" &&
+    prevMEvent.getType() !== "m.room.create" &&
+    diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES;
   const timestamp = mEvent.getTs();
 
-  if (mEvent.getType() === 'm.room.member') {
+  if (mEvent.getType() === "m.room.member") {
     const timelineChange = parseTimelineChange(mEvent);
     if (timelineChange === null) return <div key={mEvent.getId()} />;
     return (
@@ -166,7 +184,7 @@ function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
   const [timelineInfo, setTimelineInfo] = useState(null);
 
   const setEventTimeline = async (eId) => {
-    if (typeof eId === 'string') {
+    if (typeof eId === "string") {
       const isLoaded = await roomTimeline.loadEventTimeline(eId);
       if (isLoaded) return;
       // if eventTimeline failed to load,
@@ -189,12 +207,19 @@ function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
       if (isSpecificEvent) {
         focusEventIndex = roomTimeline.getEventIndex(eId);
       }
-      if (!readUptoEvtStore.getItem() && roomTimeline.hasEventInTimeline(readUpToId)) {
+      if (
+        !readUptoEvtStore.getItem() &&
+        roomTimeline.hasEventInTimeline(readUpToId)
+      ) {
         // either opening live timeline or jump to unread.
-        readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+        readUptoEvtStore.setItem(
+          roomTimeline.findEventByIdInTimelineSet(readUpToId)
+        );
       }
       if (readUptoEvtStore.getItem() && !isSpecificEvent) {
-        focusEventIndex = roomTimeline.getUnreadEventIndex(readUptoEvtStore.getItem().getId());
+        focusEventIndex = roomTimeline.getUnreadEventIndex(
+          readUptoEvtStore.getItem().getId()
+        );
       }
 
       if (focusEventIndex > -1) {
@@ -221,7 +246,7 @@ function usePaginate(
   readUptoEvtStore,
   forceUpdateLimit,
   timelineScrollRef,
-  eventLimitRef,
+  eventLimitRef
 ) {
   const [info, setInfo] = useState(null);
 
@@ -231,17 +256,27 @@ function usePaginate(
       if (loaded === 0) return;
       if (!readUptoEvtStore.getItem()) {
         const readUpToId = roomTimeline.getReadUpToEventId();
-        readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+        readUptoEvtStore.setItem(
+          roomTimeline.findEventByIdInTimelineSet(readUpToId)
+        );
       }
       limit.paginate(backwards, PAG_LIMIT, roomTimeline.timeline.length);
-      setTimeout(() => setInfo({
-        backwards,
-        loaded,
-      }));
+      setTimeout(() =>
+        setInfo({
+          backwards,
+          loaded,
+        })
+      );
     };
-    roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
+    roomTimeline.on(
+      cons.events.roomTimeline.PAGINATED,
+      handlePaginatedFromServer
+    );
     return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
+      roomTimeline.removeListener(
+        cons.events.roomTimeline.PAGINATED,
+        handlePaginatedFromServer
+      );
     };
   }, [roomTimeline]);
 
@@ -283,17 +318,17 @@ function useHandleScroll(
   readUptoEvtStore,
   forceUpdateLimit,
   timelineScrollRef,
-  eventLimitRef,
+  eventLimitRef
 ) {
   const handleScroll = useCallback(() => {
     const timelineScroll = timelineScrollRef.current;
     const limit = eventLimitRef.current;
     requestAnimationFrame(() => {
       // emit event to toggle scrollToBottom button visibility
-      const isAtBottom = (
-        timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()
-        && limit.length >= roomTimeline.timeline.length
-      );
+      const isAtBottom =
+        timelineScroll.bottom < 16 &&
+        !roomTimeline.canPaginateForward() &&
+        limit.length >= roomTimeline.timeline.length;
       roomTimeline.emit(cons.events.roomTimeline.AT_BOTTOM, isAtBottom);
       if (isAtBottom && readUptoEvtStore.getItem()) {
         requestAnimationFrame(() => markAsRead(roomTimeline.roomId));
@@ -320,7 +355,12 @@ function useHandleScroll(
   return [handleScroll, handleScrollToLive];
 }
 
-function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef) {
+function useEventArrive(
+  roomTimeline,
+  readUptoEvtStore,
+  timelineScrollRef,
+  eventLimitRef
+) {
   const myUserId = initMatrix.matrixClient.getUserId();
   const [newEvent, setEvent] = useState(null);
 
@@ -334,19 +374,27 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
       }
       const readUpToEvent = readUptoEvtStore.getItem();
       const readUpToId = roomTimeline.getReadUpToEventId();
-      const isUnread = readUpToEvent ? readUpToEvent?.getId() === readUpToId : true;
+      const isUnread = readUpToEvent
+        ? readUpToEvent?.getId() === readUpToId
+        : true;
 
       if (isUnread === false) {
-        if (document.visibilityState === 'visible' && timelineScroll.bottom < 16) {
+        if (
+          document.visibilityState === "visible" &&
+          timelineScroll.bottom < 16
+        ) {
           requestAnimationFrame(() => markAsRead(roomTimeline.roomId));
         } else {
-          readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+          readUptoEvtStore.setItem(
+            roomTimeline.findEventByIdInTimelineSet(readUpToId)
+          );
         }
         return;
       }
 
       const { timeline } = roomTimeline;
-      const unreadMsgIsLast = timeline[timeline.length - 2].getId() === readUpToId;
+      const unreadMsgIsLast =
+        timeline[timeline.length - 2].getId() === readUpToId;
       if (unreadMsgIsLast) {
         requestAnimationFrame(() => markAsRead(roomTimeline.roomId));
       }
@@ -354,7 +402,8 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
 
     const handleEvent = (event) => {
       const tLength = roomTimeline.timeline.length;
-      const isViewingLive = roomTimeline.isServingLiveTimeline() && limit.length >= tLength - 1;
+      const isViewingLive =
+        roomTimeline.isServingLiveTimeline() && limit.length >= tLength - 1;
       const isAttached = timelineScroll.bottom < SCROLL_TRIGGER_POS;
 
       if (isViewingLive && isAttached) {
@@ -363,7 +412,9 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
         setEvent(event);
         return;
       }
-      const isRelates = (event.getType() === 'm.reaction' || event.getRelation()?.rel_type === 'm.replace');
+      const isRelates =
+        event.getType() === "m.reaction" ||
+        event.getRelation()?.rel_type === "m.replace";
       if (isRelates) {
         setEvent(event);
         return;
@@ -382,7 +433,10 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
     roomTimeline.on(cons.events.roomTimeline.EVENT_REDACTED, handleEventRedact);
     return () => {
       roomTimeline.removeListener(cons.events.roomTimeline.EVENT, handleEvent);
-      roomTimeline.removeListener(cons.events.roomTimeline.EVENT_REDACTED, handleEventRedact);
+      roomTimeline.removeListener(
+        cons.events.roomTimeline.EVENT_REDACTED,
+        handleEventRedact
+      );
     };
   }, [roomTimeline]);
 
@@ -403,13 +457,18 @@ function RoomViewContent({ eventId, roomTimeline }) {
   const readUptoEvtStore = useStore(roomTimeline);
   const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
 
-  const timelineInfo = useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef);
+  const timelineInfo = useTimeline(
+    roomTimeline,
+    eventId,
+    readUptoEvtStore,
+    eventLimitRef
+  );
   const [paginateInfo, autoPaginate] = usePaginate(
     roomTimeline,
     readUptoEvtStore,
     forceUpdateLimit,
     timelineScrollRef,
-    eventLimitRef,
+    eventLimitRef
   );
   const [handleScroll, handleScrollToLive] = useHandleScroll(
     roomTimeline,
@@ -417,9 +476,14 @@ function RoomViewContent({ eventId, roomTimeline }) {
     readUptoEvtStore,
     forceUpdateLimit,
     timelineScrollRef,
-    eventLimitRef,
+    eventLimitRef
+  );
+  const newEvent = useEventArrive(
+    roomTimeline,
+    readUptoEvtStore,
+    timelineScrollRef,
+    eventLimitRef
   );
-  const newEvent = useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef);
 
   const { timeline } = roomTimeline;
 
@@ -443,7 +507,10 @@ function RoomViewContent({ eventId, roomTimeline }) {
       }
       if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) {
         const readUpToId = roomTimeline.getReadUpToEventId();
-        if (readUptoEvtStore.getItem()?.getId() === readUpToId || readUpToId === null) {
+        if (
+          readUptoEvtStore.getItem()?.getId() === readUpToId ||
+          readUpToId === null
+        ) {
           requestAnimationFrame(() => markAsRead(roomTimeline.roomId));
         }
       }
@@ -451,10 +518,16 @@ function RoomViewContent({ eventId, roomTimeline }) {
     }
     autoPaginate();
 
-    roomTimeline.on(cons.events.roomTimeline.SCROLL_TO_LIVE, handleScrollToLive);
+    roomTimeline.on(
+      cons.events.roomTimeline.SCROLL_TO_LIVE,
+      handleScrollToLive
+    );
     return () => {
       if (timelineSVRef.current === null) return;
-      roomTimeline.removeListener(cons.events.roomTimeline.SCROLL_TO_LIVE, handleScrollToLive);
+      roomTimeline.removeListener(
+        cons.events.roomTimeline.SCROLL_TO_LIVE,
+        handleScrollToLive
+      );
     };
   }, [timelineInfo]);
 
@@ -476,46 +549,56 @@ function RoomViewContent({ eventId, roomTimeline }) {
   useEffect(() => {
     const timelineScroll = timelineScrollRef.current;
     if (!roomTimeline.initialized) return;
-    if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward() && document.visibilityState === 'visible') {
+    if (
+      timelineScroll.bottom < 16 &&
+      !roomTimeline.canPaginateForward() &&
+      document.visibilityState === "visible"
+    ) {
       timelineScroll.scrollToBottom();
     } else {
       timelineScroll.tryRestoringScroll();
     }
   }, [newEvent]);
 
-  const listenKeyboard = useCallback((event) => {
-    if (event.ctrlKey || event.altKey || event.metaKey) return;
-    if (event.key !== 'ArrowUp') return;
-    if (navigation.isRawModalVisible) return;
+  const listenKeyboard = useCallback(
+    (event) => {
+      if (event.ctrlKey || event.altKey || event.metaKey) return;
+      if (event.key !== "ArrowUp") return;
+      if (navigation.isRawModalVisible) return;
 
-    if (document.activeElement.id !== 'message-textarea') return;
-    if (document.activeElement.value !== '') return;
+      if (document.activeElement.id !== "message-textarea") return;
+      if (document.activeElement.value !== "") return;
 
-    const {
-      timeline: tl, activeTimeline, liveTimeline, matrixClient: mx,
-    } = roomTimeline;
-    const limit = eventLimitRef.current;
-    if (activeTimeline !== liveTimeline) return;
-    if (tl.length > limit.length) return;
+      const {
+        timeline: tl,
+        activeTimeline,
+        liveTimeline,
+        matrixClient: mx,
+      } = roomTimeline;
+      const limit = eventLimitRef.current;
+      if (activeTimeline !== liveTimeline) return;
+      if (tl.length > limit.length) return;
 
-    const mTypes = ['m.text'];
-    for (let i = tl.length - 1; i >= 0; i -= 1) {
-      const mE = tl[i];
-      if (
-        mE.getSender() === mx.getUserId()
-        && mE.getType() === 'm.room.message'
-        && mTypes.includes(mE.getContent()?.msgtype)
-      ) {
-        setEditEventId(mE.getId());
-        return;
+      const mTypes = ["m.text"];
+      for (let i = tl.length - 1; i >= 0; i -= 1) {
+        const mE = tl[i];
+        if (
+          mE.getSender() === mx.getUserId() &&
+          mE.getType() === "m.room.message" &&
+          mTypes.includes(mE.getContent()?.msgtype)
+        ) {
+          setEditEventId(mE.getId());
+          return;
+        }
       }
-    }
-  }, [roomTimeline]);
+    },
+    [roomTimeline]
+  );
 
   useEffect(() => {
-    document.body.addEventListener('keydown', listenKeyboard);
+    document.body.addEventListener("keydown", listenKeyboard);
     return () => {
-      document.body.removeEventListener('keydown', listenKeyboard);
+      document.body.removeEventListener("keydown", listenKeyboard);
     };
   }, [listenKeyboard]);
 
@@ -525,7 +608,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
 
     throttle._(() => {
       const backwards = timelineScroll?.calcScroll();
-      if (typeof backwards !== 'boolean') return;
+      if (typeof backwards !== "boolean") return;
       handleScroll(backwards);
     }, 200)();
   };
@@ -549,34 +632,57 @@ function RoomViewContent({ eventId, roomTimeline }) {
       const prevMEvent = timeline[i - 1] ?? null;
 
       if (i === 0 && !roomTimeline.canPaginateBackward()) {
-        if (mEvent.getType() === 'm.room.create') {
+        if (mEvent.getType() === "m.room.create") {
           tl.push(
-            <RoomIntroContainer key={mEvent.getId()} event={mEvent} timeline={roomTimeline} />,
+            <RoomIntroContainer
+              key={mEvent.getId()}
+              event={mEvent}
+              timeline={roomTimeline}
+            />
           );
           itemCountIndex += 1;
           // eslint-disable-next-line no-continue
           continue;
         } else {
-          tl.push(<RoomIntroContainer key="room-intro" event={null} timeline={roomTimeline} />);
+          tl.push(
+            <RoomIntroContainer
+              key="room-intro"
+              event={null}
+              timeline={roomTimeline}
+            />
+          );
           itemCountIndex += 1;
         }
       }
 
       let isNewEvent = false;
       if (!unreadDivider) {
-        unreadDivider = (readUptoEvent
-          && prevMEvent?.getTs() <= readUptoEvent.getTs()
-          && readUptoEvent.getTs() < mEvent.getTs());
+        unreadDivider =
+          readUptoEvent &&
+          prevMEvent?.getTs() <= readUptoEvent.getTs() &&
+          readUptoEvent.getTs() < mEvent.getTs();
         if (unreadDivider) {
           isNewEvent = true;
-          tl.push(<Divider key={`new-${mEvent.getId()}`} variant="positive" text="New messages" />);
+          tl.push(
+            <Divider
+              key={`new-${mEvent.getId()}`}
+              variant="positive"
+              text="New messages"
+            />
+          );
           itemCountIndex += 1;
           if (jumpToItemIndex === -1) jumpToItemIndex = itemCountIndex;
         }
       }
-      const dayDivider = prevMEvent && !isInSameDay(mEvent.getDate(), prevMEvent.getDate());
+      const dayDivider =
+        prevMEvent && !isInSameDay(mEvent.getDate(), prevMEvent.getDate());
       if (dayDivider) {
-        tl.push(<Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />);
+        tl.push(
+          <Divider
+            key={`divider-${mEvent.getId()}`}
+            text={`${dateFormat(mEvent.getDate(), "mmmm dd, yyyy")}`}
+          />
+        );
         itemCountIndex += 1;
       }
 
@@ -584,15 +690,17 @@ function RoomViewContent({ eventId, roomTimeline }) {
       const isFocus = focusId === mEvent.getId();
       if (isFocus) jumpToItemIndex = itemCountIndex;
 
-      tl.push(renderEvent(
-        roomTimeline,
-        mEvent,
-        isNewEvent ? null : prevMEvent,
-        isFocus,
-        editEventId === mEvent.getId(),
-        setEditEventId,
-        cancelEdit,
-      ));
+      tl.push(
+        renderEvent(
+          roomTimeline,
+          mEvent,
+          isNewEvent ? null : prevMEvent,
+          isFocus,
+          editEventId === mEvent.getId(),
+          setEditEventId,
+          cancelEdit
+        )
+      );
       itemCountIndex += 1;
     }
     if (roomTimeline.canPaginateForward() || limit.length < timeline.length) {
@@ -606,7 +714,9 @@ function RoomViewContent({ eventId, roomTimeline }) {
     <ScrollView onScroll={handleTimelineScroll} ref={timelineSVRef} autoHide>
       <div className="room-view__content" onClick={handleOnClickCapture}>
         <div className="timeline__wrapper">
-          { roomTimeline.initialized ? renderTimeline() : loadingMsgPlaceholders('loading', 3) }
+          {roomTimeline.initialized
+            ? renderTimeline()
+            : loadingMsgPlaceholders("loading", 3)}
         </div>
       </div>
     </ScrollView>
diff --git a/src/app/organisms/room/RoomViewContent.scss b/src/app/organisms/room/RoomViewContent.scss
index 1afd187e..47b8909d 100644
--- a/src/app/organisms/room/RoomViewContent.scss
+++ b/src/app/organisms/room/RoomViewContent.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .room-view__content {
   min-height: 100%;
@@ -15,16 +15,17 @@
     & .message,
     & .ph-msg,
     & .timeline-change {
-      @include dir.prop(border-radius,
-      0 var(--bo-radius) var(--bo-radius) 0,
-      var(--bo-radius) 0 0 var(--bo-radius),
+      @include dir.prop(
+        border-radius,
+        0 var(--bo-radius) var(--bo-radius) 0,
+        var(--bo-radius) 0 0 var(--bo-radius)
       );
     }
-    
+
     & > .divider {
       margin: var(--sp-extra-tight);
       @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
       @include dir.side(padding, calc(var(--av-small) + var(--sp-tight)), 0);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/RoomViewFloating.jsx b/src/app/organisms/room/RoomViewFloating.jsx
index d027aff2..5196e375 100644
--- a/src/app/organisms/room/RoomViewFloating.jsx
+++ b/src/app/organisms/room/RoomViewFloating.jsx
@@ -1,20 +1,20 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomViewFloating.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RoomViewFloating.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { markAsRead } from '../../../client/action/notifications';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { markAsRead } from "../../../client/action/notifications";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
 
-import MessageIC from '../../../../public/res/ic/outlined/message.svg';
-import MessageUnreadIC from '../../../../public/res/ic/outlined/message-unread.svg';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
+import MessageIC from "../../../../public/res/ic/outlined/message.svg";
+import MessageUnreadIC from "../../../../public/res/ic/outlined/message-unread.svg";
+import TickMarkIC from "../../../../public/res/ic/outlined/tick-mark.svg";
 
-import { getUsersActionJsx } from './common';
+import { getUsersActionJsx } from "./common";
 
 function useJumpToEvent(roomTimeline) {
   const [eventId, setEventId] = useState(null);
@@ -33,7 +33,10 @@ function useJumpToEvent(roomTimeline) {
     // we only show "Jump to unread" btn only if the event is not in timeline.
     // if event is in timeline
     // we will automatically open the timeline from that event position
-    if (!readEventId?.startsWith('~') && !roomTimeline.hasEventInTimeline(readEventId)) {
+    if (
+      !readEventId?.startsWith("~") &&
+      !roomTimeline.hasEventInTimeline(readEventId)
+    ) {
       setEventId(readEventId);
     }
 
@@ -42,7 +45,10 @@ function useJumpToEvent(roomTimeline) {
     notifications.on(cons.events.notifications.FULL_READ, handleMarkAsRead);
 
     return () => {
-      notifications.removeListener(cons.events.notifications.FULL_READ, handleMarkAsRead);
+      notifications.removeListener(
+        cons.events.notifications.FULL_READ,
+        handleMarkAsRead
+      );
       setEventId(null);
     };
   }, [roomTimeline]);
@@ -61,9 +67,15 @@ function useTypingMembers(roomTimeline) {
 
   useEffect(() => {
     setTypingMembers(new Set());
-    roomTimeline.on(cons.events.roomTimeline.TYPING_MEMBERS_UPDATED, updateTyping);
+    roomTimeline.on(
+      cons.events.roomTimeline.TYPING_MEMBERS_UPDATED,
+      updateTyping
+    );
     return () => {
-      roomTimeline?.removeListener(cons.events.roomTimeline.TYPING_MEMBERS_UPDATED, updateTyping);
+      roomTimeline?.removeListener(
+        cons.events.roomTimeline.TYPING_MEMBERS_UPDATED,
+        updateTyping
+      );
     };
   }, [roomTimeline]);
 
@@ -77,16 +89,19 @@ function useScrollToBottom(roomTimeline) {
   useEffect(() => {
     setIsAtBottom(true);
     roomTimeline.on(cons.events.roomTimeline.AT_BOTTOM, handleAtBottom);
-    return () => roomTimeline.removeListener(cons.events.roomTimeline.AT_BOTTOM, handleAtBottom);
+    return () =>
+      roomTimeline.removeListener(
+        cons.events.roomTimeline.AT_BOTTOM,
+        handleAtBottom
+      );
   }, [roomTimeline]);
 
   return [isAtBottom, setIsAtBottom];
 }
 
-function RoomViewFloating({
-  roomId, roomTimeline,
-}) {
-  const [isJumpToEvent, jumpToEvent, cancelJumpToEvent] = useJumpToEvent(roomTimeline);
+function RoomViewFloating({ roomId, roomTimeline }) {
+  const [isJumpToEvent, jumpToEvent, cancelJumpToEvent] =
+    useJumpToEvent(roomTimeline);
   const [typingMembers] = useTypingMembers(roomTimeline);
   const [isAtBottom, setIsAtBottom] = useScrollToBottom(roomTimeline);
 
@@ -97,21 +112,49 @@ function RoomViewFloating({
 
   return (
     <>
-      <div className={`room-view__unread ${isJumpToEvent ? 'room-view__unread--open' : ''}`}>
-        <Button iconSrc={MessageUnreadIC} onClick={jumpToEvent} variant="primary">
-          <Text variant="b3" weight="medium">Jump to unread messages</Text>
+      <div
+        className={`room-view__unread ${
+          isJumpToEvent ? "room-view__unread--open" : ""
+        }`}
+      >
+        <Button
+          iconSrc={MessageUnreadIC}
+          onClick={jumpToEvent}
+          variant="primary"
+        >
+          <Text variant="b3" weight="medium">
+            Jump to unread messages
+          </Text>
         </Button>
-        <Button iconSrc={TickMarkIC} onClick={cancelJumpToEvent} variant="primary">
-          <Text variant="b3" weight="bold">Mark as read</Text>
+        <Button
+          iconSrc={TickMarkIC}
+          onClick={cancelJumpToEvent}
+          variant="primary"
+        >
+          <Text variant="b3" weight="bold">
+            Mark as read
+          </Text>
         </Button>
       </div>
-      <div className={`room-view__typing${typingMembers.size > 0 ? ' room-view__typing--open' : ''}`}>
-        <div className="bouncing-loader"><div /></div>
-        <Text variant="b2">{getUsersActionJsx(roomId, [...typingMembers], 'typing...')}</Text>
+      <div
+        className={`room-view__typing${
+          typingMembers.size > 0 ? " room-view__typing--open" : ""
+        }`}
+      >
+        <div className="bouncing-loader">
+          <div />
+        </div>
+        <Text variant="b2">
+          {getUsersActionJsx(roomId, [...typingMembers], "typing...")}
+        </Text>
       </div>
-      <div className={`room-view__STB${isAtBottom ? '' : ' room-view__STB--open'}`}>
+      <div
+        className={`room-view__STB${isAtBottom ? "" : " room-view__STB--open"}`}
+      >
         <Button iconSrc={MessageIC} onClick={handleScrollToBottom}>
-          <Text variant="b3" weight="medium">Jump to latest</Text>
+          <Text variant="b3" weight="medium">
+            Jump to latest
+          </Text>
         </Button>
       </div>
     </>
diff --git a/src/app/organisms/room/RoomViewFloating.scss b/src/app/organisms/room/RoomViewFloating.scss
index 75802175..52324cd3 100644
--- a/src/app/organisms/room/RoomViewFloating.scss
+++ b/src/app/organisms/room/RoomViewFloating.scss
@@ -1,6 +1,6 @@
- @use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/text";
+@use "../../partials/dir";
 
 .room-view {
   &__typing {
@@ -46,25 +46,24 @@
     background: var(--tc-surface-high);
     border-radius: 50%;
   }
-  
-  
+
   .bouncing-loader::before,
   .bouncing-loader::after {
     content: "";
   }
-  
+
   .bouncing-loader > div {
     margin: 0 4px;
   }
-  
+
   .bouncing-loader > div {
     animation-delay: 0.2s;
   }
-  
+
   .bouncing-loader::after {
     animation-delay: 0.4s;
   }
-  
+
   @keyframes bouncing-loader {
     to {
       opacity: 0.1;
@@ -122,4 +121,4 @@
       @extend .cp-fx__item-one;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index 46a6ba0e..fea7eed5 100644
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -1,41 +1,47 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './RoomViewHeader.scss';
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./RoomViewHeader.scss";
 
-import { twemojify } from '../../../util/twemojify';
-import { blurOnBubbling } from '../../atoms/button/script';
+import { twemojify } from "../../../util/twemojify";
+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, openNavigation } from '../../../client/action/navigation';
-import { togglePeopleDrawer } from '../../../client/action/settings';
-import colorMXID from '../../../util/colorMXID';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/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";
 
-import { tabText } from './RoomSettings';
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import Avatar from '../../atoms/avatar/Avatar';
-import RoomOptions from '../../molecules/room-options/RoomOptions';
+import { tabText } from "./RoomSettings";
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import Avatar from "../../atoms/avatar/Avatar";
+import RoomOptions from "../../molecules/room-options/RoomOptions";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-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 ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+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';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
 
 function RoomViewHeader({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
   const room = mx.getRoom(roomId);
-  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, "crop");
+  avatarSrc = isDM
+    ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, "crop")
+    : avatarSrc;
   const roomName = room.name;
 
   const roomHeaderBtnRef = useRef(null);
@@ -43,12 +49,15 @@ function RoomViewHeader({ roomId }) {
     const settingsToggle = (isVisibile) => {
       const rawIcon = roomHeaderBtnRef.current.lastElementChild;
       rawIcon.style.transform = isVisibile
-        ? 'rotateX(180deg)'
-        : 'rotateX(0deg)';
+        ? "rotateX(180deg)"
+        : "rotateX(0deg)";
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SETTINGS_TOGGLED,
+        settingsToggle
+      );
     };
   }, []);
 
@@ -61,15 +70,20 @@ function RoomViewHeader({ roomId }) {
 
     roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+      roomList.removeListener(
+        cons.events.roomList.ROOM_PROFILE_UPDATED,
+        handleProfileUpdate
+      );
     };
   }, [roomId]);
 
   const openRoomOptions = (e) => {
     openReusableContextMenu(
-      'bottom',
-      getEventCords(e, '.ic-btn'),
-      (closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
+      "bottom",
+      getEventCords(e, ".ic-btn"),
+      (closeMenu) => (
+        <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />
+      )
     );
   };
 
@@ -86,17 +100,40 @@ function RoomViewHeader({ roomId }) {
         className="room-header__btn"
         onClick={() => toggleRoomSettings()}
         type="button"
-        onMouseUp={(e) => blurOnBubbling(e, '.room-header__btn')}
+        onMouseUp={(e) => blurOnBubbling(e, ".room-header__btn")}
       >
-        <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
+        <Avatar
+          imageSrc={avatarSrc}
+          text={roomName}
+          bgColor={colorMXID(roomId)}
+          size="small"
+        />
         <TitleWrapper>
-          <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
+          <Text variant="h2" weight="medium" primary>
+            {twemojify(roomName)}
+          </Text>
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
-      <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} />
+      {mx.isRoomEncrypted(roomId) === false && (
+        <IconButton
+          onClick={() => toggleRoomSettings(tabText.SEARCH)}
+          tooltip="Search"
+          src={SearchIC}
+        />
+      )}
+      <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"
diff --git a/src/app/organisms/room/RoomViewHeader.scss b/src/app/organisms/room/RoomViewHeader.scss
index fc19c064..84d8b8ca 100644
--- a/src/app/organisms/room/RoomViewHeader.scss
+++ b/src/app/organisms/room/RoomViewHeader.scss
@@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/screen';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/screen";
 
 .room-header__btn {
   min-width: 0;
@@ -8,12 +8,12 @@
   @include dir.side(margin, 0, auto);
   border-radius: var(--bo-radius);
   cursor: pointer;
-  
+
   & .ic-raw {
     @include dir.side(margin, 0, var(--sp-extra-tight));
     transition: transform 200ms ease-in-out;
   }
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
       box-shadow: var(--bs-surface-outline);
diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index c43eb601..f2ae5825 100644
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -1,47 +1,48 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './RoomViewInput.scss';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./RoomViewInput.scss";
 
-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from "react-autosize-textarea";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import settings from '../../../client/state/settings';
-import { openEmojiBoard, openReusableContextMenu } from '../../../client/action/navigation';
-import navigation from '../../../client/state/navigation';
-import { bytesToSize, getEventCords } from '../../../util/common';
-import { getUsername } from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import settings from "../../../client/state/settings";
+import {
+  openEmojiBoard,
+  openReusableContextMenu,
+} from "../../../client/action/navigation";
+import navigation from "../../../client/state/navigation";
+import { bytesToSize, getEventCords } from "../../../util/common";
+import { getUsername } from "../../../util/matrixUtil";
+import colorMXID from "../../../util/colorMXID";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import { MessageReply } from '../../molecules/message/Message';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import { MessageReply } from "../../molecules/message/Message";
 
-import StickerBoard from '../sticker-board/StickerBoard';
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
+import StickerBoard from "../sticker-board/StickerBoard";
+import { confirmDialog } from "../../molecules/confirm-dialog/ConfirmDialog";
 
-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
-import SendIC from '../../../../public/res/ic/outlined/send.svg';
-import StickerIC from '../../../../public/res/ic/outlined/sticker.svg';
-import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
-import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
-import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
-import FileIC from '../../../../public/res/ic/outlined/file.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CirclePlusIC from "../../../../public/res/ic/outlined/circle-plus.svg";
+import EmojiIC from "../../../../public/res/ic/outlined/emoji.svg";
+import SendIC from "../../../../public/res/ic/outlined/send.svg";
+import StickerIC from "../../../../public/res/ic/outlined/sticker.svg";
+import ShieldIC from "../../../../public/res/ic/outlined/shield.svg";
+import VLCIC from "../../../../public/res/ic/outlined/vlc.svg";
+import VolumeFullIC from "../../../../public/res/ic/outlined/volume-full.svg";
+import FileIC from "../../../../public/res/ic/outlined/file.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import commands from './commands';
+import commands from "./commands";
 
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
 let cmdCursorPos = null;
-function RoomViewInput({
-  roomId, roomTimeline, viewEvent,
-}) {
+function RoomViewInput({ roomId, roomTimeline, viewEvent }) {
   const [attachment, setAttachment] = useState(null);
   const [replyTo, setReplyTo] = useState(null);
 
@@ -62,10 +63,13 @@ function RoomViewInput({
 
   useEffect(() => {
     roomsInput.on(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
-    viewEvent.on('focus_msg_input', requestFocusInput);
+    viewEvent.on("focus_msg_input", requestFocusInput);
     return () => {
-      roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
-      viewEvent.removeListener('focus_msg_input', requestFocusInput);
+      roomsInput.removeListener(
+        cons.events.roomsInput.ATTACHMENT_SET,
+        setAttachment
+      );
+      viewEvent.removeListener("focus_msg_input", requestFocusInput);
     };
   }, []);
 
@@ -83,13 +87,15 @@ function RoomViewInput({
   function uploadingProgress(myRoomId, { loaded, total }) {
     if (myRoomId !== roomId) return;
     const progressPer = Math.round((loaded * 100) / total);
-    uploadProgressRef.current.textContent = `Uploading: ${bytesToSize(loaded)}/${bytesToSize(total)} (${progressPer}%)`;
+    uploadProgressRef.current.textContent = `Uploading: ${bytesToSize(
+      loaded
+    )}/${bytesToSize(total)} (${progressPer}%)`;
     inputBaseRef.current.style.backgroundImage = `linear-gradient(90deg, var(--bg-surface-hover) ${progressPer}%, var(--bg-surface-low) ${progressPer}%)`;
   }
   function clearAttachment(myRoomId) {
     if (roomId !== myRoomId) return;
     setAttachment(null);
-    inputBaseRef.current.style.backgroundImage = 'unset';
+    inputBaseRef.current.style.backgroundImage = "unset";
     uploadInputRef.current.value = null;
   }
 
@@ -103,7 +109,7 @@ function RoomViewInput({
   function activateCmd(prefix) {
     isCmdActivated = true;
     rightOptionsA11Y(false);
-    viewEvent.emit('cmd_activate', prefix);
+    viewEvent.emit("cmd_activate", prefix);
   }
   function deactivateCmd() {
     isCmdActivated = false;
@@ -112,7 +118,7 @@ function RoomViewInput({
   }
   function deactivateCmdAndEmit() {
     deactivateCmd();
-    viewEvent.emit('cmd_deactivate');
+    viewEvent.emit("cmd_deactivate");
   }
   function setCursorPosition(pos) {
     setTimeout(() => {
@@ -125,7 +131,8 @@ function RoomViewInput({
     const targetInput = msg.slice(0, cursor);
     const cmdParts = targetInput.match(CMD_REGEX);
     const leadingInput = msg.slice(0, cmdParts.index);
-    if (replacement.length > 0) setCursorPosition(leadingInput.length + replacement.length);
+    if (replacement.length > 0)
+      setCursorPosition(leadingInput.length + replacement.length);
     return leadingInput + replacement + msg.slice(cursor);
   }
   function firedCmd(cmdData) {
@@ -133,7 +140,7 @@ function RoomViewInput({
     textAreaRef.current.value = replaceCmdWith(
       msg,
       cmdCursorPos,
-      typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '',
+      typeof cmdData?.replace !== "undefined" ? cmdData.replace : ""
     );
     deactivateCmd();
   }
@@ -146,16 +153,22 @@ function RoomViewInput({
   function setUpReply(userId, eventId, body, formattedBody) {
     setReplyTo({ userId, eventId, body });
     roomsInput.setReplyTo(roomId, {
-      userId, eventId, body, formattedBody,
+      userId,
+      eventId,
+      body,
+      formattedBody,
     });
     focusInput();
   }
 
   useEffect(() => {
-    roomsInput.on(cons.events.roomsInput.UPLOAD_PROGRESS_CHANGES, uploadingProgress);
+    roomsInput.on(
+      cons.events.roomsInput.UPLOAD_PROGRESS_CHANGES,
+      uploadingProgress
+    );
     roomsInput.on(cons.events.roomsInput.ATTACHMENT_CANCELED, clearAttachment);
     roomsInput.on(cons.events.roomsInput.FILE_UPLOADED, clearAttachment);
-    viewEvent.on('cmd_fired', firedCmd);
+    viewEvent.on("cmd_fired", firedCmd);
     navigation.on(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
     if (textAreaRef?.current !== null) {
       isTyping = false;
@@ -164,19 +177,31 @@ function RoomViewInput({
       setReplyTo(roomsInput.getReplyTo(roomId));
     }
     return () => {
-      roomsInput.removeListener(cons.events.roomsInput.UPLOAD_PROGRESS_CHANGES, uploadingProgress);
-      roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_CANCELED, clearAttachment);
-      roomsInput.removeListener(cons.events.roomsInput.FILE_UPLOADED, clearAttachment);
-      viewEvent.removeListener('cmd_fired', firedCmd);
-      navigation.removeListener(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
+      roomsInput.removeListener(
+        cons.events.roomsInput.UPLOAD_PROGRESS_CHANGES,
+        uploadingProgress
+      );
+      roomsInput.removeListener(
+        cons.events.roomsInput.ATTACHMENT_CANCELED,
+        clearAttachment
+      );
+      roomsInput.removeListener(
+        cons.events.roomsInput.FILE_UPLOADED,
+        clearAttachment
+      );
+      viewEvent.removeListener("cmd_fired", firedCmd);
+      navigation.removeListener(
+        cons.events.navigation.REPLY_TO_CLICKED,
+        setUpReply
+      );
       if (isCmdActivated) deactivateCmd();
       if (textAreaRef?.current === null) return;
 
       const msg = textAreaRef.current.value;
-      textAreaRef.current.style.height = 'unset';
-      inputBaseRef.current.style.backgroundImage = 'unset';
-      if (msg.trim() === '') {
-        roomsInput.setMessage(roomId, '');
+      textAreaRef.current.style.height = "unset";
+      inputBaseRef.current.style.backgroundImage = "unset";
+      if (msg.trim() === "") {
+        roomsInput.setMessage(roomId, "");
         return;
       }
       roomsInput.setMessage(roomId, msg);
@@ -185,8 +210,8 @@ function RoomViewInput({
 
   const sendBody = async (body, options) => {
     const opt = options ?? {};
-    if (!opt.msgType) opt.msgType = 'm.text';
-    if (typeof opt.autoMarkdown !== 'boolean') opt.autoMarkdown = true;
+    if (!opt.msgType) opt.msgType = "m.text";
+    if (typeof opt.autoMarkdown !== "boolean") opt.autoMarkdown = true;
     if (roomsInput.isSending(roomId)) return;
     sendIsTyping(false);
 
@@ -195,26 +220,30 @@ function RoomViewInput({
       roomsInput.setAttachment(roomId, attachment);
     }
     textAreaRef.current.disabled = true;
-    textAreaRef.current.style.cursor = 'not-allowed';
+    textAreaRef.current.style.cursor = "not-allowed";
     await roomsInput.sendInput(roomId, opt);
     textAreaRef.current.disabled = false;
-    textAreaRef.current.style.cursor = 'unset';
+    textAreaRef.current.style.cursor = "unset";
     focusInput();
 
     textAreaRef.current.value = roomsInput.getMessage(roomId);
-    textAreaRef.current.style.height = 'unset';
+    textAreaRef.current.style.height = "unset";
     if (replyTo !== null) setReplyTo(null);
   };
 
   const processCommand = (cmdBody) => {
-    const spaceIndex = cmdBody.indexOf(' ');
+    const spaceIndex = cmdBody.indexOf(" ");
     const cmdName = cmdBody.slice(1, spaceIndex > -1 ? spaceIndex : undefined);
-    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : '';
+    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : "";
     if (!commands[cmdName]) {
-      confirmDialog('Invalid Command', `"${cmdName}" is not a valid command.`, 'Alright');
+      confirmDialog(
+        "Invalid Command",
+        `"${cmdName}" is not a valid command.`,
+        "Alright"
+      );
       return;
     }
-    if (['me', 'shrug', 'plain'].includes(cmdName)) {
+    if (["me", "shrug", "plain"].includes(cmdName)) {
       commands[cmdName].exe(roomId, cmdData, sendBody);
       return;
     }
@@ -224,13 +253,13 @@ function RoomViewInput({
   const sendMessage = async () => {
     requestAnimationFrame(() => deactivateCmdAndEmit());
     const msgBody = textAreaRef.current.value.trim();
-    if (msgBody.startsWith('/')) {
+    if (msgBody.startsWith("/")) {
       processCommand(msgBody.trim());
-      textAreaRef.current.value = '';
-      textAreaRef.current.style.height = 'unset';
+      textAreaRef.current.value = "";
+      textAreaRef.current.style.height = "unset";
       return;
     }
-    if (msgBody === '' && attachment === null) return;
+    if (msgBody === "" && attachment === null) return;
     sendBody(msgBody);
   };
 
@@ -239,7 +268,7 @@ function RoomViewInput({
   };
 
   function processTyping(msg) {
-    const isEmptyMsg = msg === '';
+    const isEmptyMsg = msg === "";
 
     if (isEmptyMsg && isTyping) {
       sendIsTyping(false);
@@ -266,7 +295,7 @@ function RoomViewInput({
     const cmdPrefix = cmdParts[1];
     const cmdSlug = cmdParts[2];
 
-    if (cmdPrefix === ':') {
+    if (cmdPrefix === ":") {
       // skip emoji autofill command if link is suspected.
       const checkForLink = targetInput.slice(0, cmdParts.index);
       if (checkForLink.match(/(http|https|mailto|matrix|ircs|irc)$/)) {
@@ -276,12 +305,12 @@ function RoomViewInput({
     }
 
     cmdCursorPos = cursor;
-    if (cmdSlug === '') {
+    if (cmdSlug === "") {
       activateCmd(cmdPrefix);
       return;
     }
     if (!isCmdActivated) activateCmd(cmdPrefix);
-    viewEvent.emit('cmd_process', cmdPrefix, cmdSlug);
+    viewEvent.emit("cmd_process", cmdPrefix, cmdSlug);
   }
 
   const handleMsgTyping = (e) => {
@@ -291,12 +320,12 @@ function RoomViewInput({
   };
 
   const handleKeyDown = (e) => {
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       e.preventDefault();
       roomsInput.cancelReplyTo(roomId);
       setReplyTo(null);
     }
-    if (e.key === 'Enter' && e.shiftKey === false) {
+    if (e.key === "Enter" && e.shiftKey === false) {
       e.preventDefault();
       sendMessage();
     }
@@ -313,7 +342,7 @@ function RoomViewInput({
 
     for (let i = 0; i < e.clipboardData.items.length; i += 1) {
       const item = e.clipboardData.items[i];
-      if (item.type.indexOf('image') !== -1) {
+      if (item.type.indexOf("image") !== -1) {
         const image = item.getAsFile();
         if (attachment === null) {
           setAttachment(image);
@@ -346,27 +375,44 @@ function RoomViewInput({
   }
 
   function renderInputs() {
-    const canISend = roomTimeline.room.currentState.maySendMessage(mx.getUserId());
-    const tombstoneEvent = roomTimeline.room.currentState.getStateEvents('m.room.tombstone')[0];
+    const canISend = roomTimeline.room.currentState.maySendMessage(
+      mx.getUserId()
+    );
+    const tombstoneEvent =
+      roomTimeline.room.currentState.getStateEvents("m.room.tombstone")[0];
     if (!canISend || tombstoneEvent) {
       return (
         <Text className="room-input__alert">
-          {
-            tombstoneEvent
-              ? tombstoneEvent.getContent()?.body ?? 'This room has been replaced and is no longer active.'
-              : 'You do not have permission to post to this room'
-          }
+          {tombstoneEvent
+            ? tombstoneEvent.getContent()?.body ??
+              "This room has been replaced and is no longer active."
+            : "You do not have permission to post to this room"}
         </Text>
       );
     }
     return (
       <>
-        <div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
-          <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
-          <IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
+        <div
+          className={`room-input__option-container${
+            attachment === null ? "" : " room-attachment__option"
+          }`}
+        >
+          <input
+            onChange={uploadFileChange}
+            style={{ display: "none" }}
+            ref={uploadInputRef}
+            type="file"
+          />
+          <IconButton
+            onClick={handleUploadClick}
+            tooltip={attachment === null ? "Upload" : "Cancel"}
+            src={CirclePlusIC}
+          />
         </div>
         <div ref={inputBaseRef} className="room-input__input-container">
-          {roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
+          {roomTimeline.isEncrypted() && (
+            <RawIcon size="extra-small" src={ShieldIC} />
+          )}
           <ScrollView autoHide>
             <Text className="room-input__textarea-wrapper">
               <TextareaAutosize
@@ -385,7 +431,7 @@ function RoomViewInput({
           <IconButton
             onClick={(e) => {
               openReusableContextMenu(
-                'top',
+                "top",
                 (() => {
                   const cords = getEventCords(e);
                   cords.y -= 20;
@@ -399,7 +445,7 @@ function RoomViewInput({
                       closeMenu();
                     }}
                   />
-                ),
+                )
               );
             }}
             tooltip="Sticker"
@@ -408,7 +454,7 @@ function RoomViewInput({
           <IconButton
             onClick={(e) => {
               const cords = getEventCords(e);
-              cords.x += (document.dir === 'rtl' ? -80 : 80);
+              cords.x += document.dir === "rtl" ? -80 : 80;
               cords.y -= 250;
               openEmojiBoard(cords, addEmoji);
             }}
@@ -422,18 +468,30 @@ function RoomViewInput({
   }
 
   function attachFile() {
-    const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
+    const fileType = attachment.type.slice(0, attachment.type.indexOf("/"));
     return (
       <div className="room-attachment">
-        <div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
-          {fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
-          {fileType === 'video' && <RawIcon src={VLCIC} />}
-          {fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
-          {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
+        <div
+          className={`room-attachment__preview${
+            fileType !== "image" ? " room-attachment__icon" : ""
+          }`}
+        >
+          {fileType === "image" && (
+            <img alt={attachment.name} src={URL.createObjectURL(attachment)} />
+          )}
+          {fileType === "video" && <RawIcon src={VLCIC} />}
+          {fileType === "audio" && <RawIcon src={VolumeFullIC} />}
+          {fileType !== "image" &&
+            fileType !== "video" &&
+            fileType !== "audio" && <RawIcon src={FileIC} />}
         </div>
         <div className="room-attachment__info">
           <Text variant="b1">{attachment.name}</Text>
-          <Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
+          <Text variant="b3">
+            <span ref={uploadProgressRef}>{`size: ${bytesToSize(
+              attachment.size
+            )}`}</span>
+          </Text>
         </div>
       </div>
     );
@@ -464,12 +522,15 @@ function RoomViewInput({
 
   return (
     <>
-      { replyTo !== null && attachReply()}
-      { attachment !== null && attachFile() }
-      <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
-        {
-          renderInputs()
-        }
+      {replyTo !== null && attachReply()}
+      {attachment !== null && attachFile()}
+      <form
+        className="room-input"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        {renderInputs()}
       </form>
     </>
   );
diff --git a/src/app/organisms/room/RoomViewInput.scss b/src/app/organisms/room/RoomViewInput.scss
index 9fb7c4de..e485be57 100644
--- a/src/app/organisms/room/RoomViewInput.scss
+++ b/src/app/organisms/room/RoomViewInput.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
@@ -17,7 +17,7 @@
     display: flex;
     align-items: center;
 
-    margin: 0 calc(var(--sp-tight)  - 2px);
+    margin: 0 calc(var(--sp-tight) - 2px);
     background-color: var(--bg-surface-low);
     box-shadow: var(--bs-surface-border);
     border-radius: var(--bo-radius);
@@ -26,7 +26,7 @@
       transform: scale(0.8);
       margin: 0 var(--sp-extra-tight);
     }
- 
+
     & .scrollbar {
       max-height: 50vh;
       flex: 1;
@@ -105,4 +105,4 @@
     @include dir.side(margin, 17px, 13px);
     border-radius: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/TimelineScroll.js b/src/app/organisms/room/TimelineScroll.js
index ccdc9a97..6b05e2d4 100644
--- a/src/app/organisms/room/TimelineScroll.js
+++ b/src/app/organisms/room/TimelineScroll.js
@@ -1,9 +1,11 @@
-import { getScrollInfo } from '../../../util/common';
+import { getScrollInfo } from "../../../util/common";
 
 class TimelineScroll {
   constructor(target) {
     if (target === null) {
-      throw new Error('Can not initialize TimelineScroll, target HTMLElement in null');
+      throw new Error(
+        "Can not initialize TimelineScroll, target HTMLElement in null"
+      );
     }
     this.scroll = target;
 
@@ -33,7 +35,9 @@ class TimelineScroll {
     const scrollInfo = getScrollInfo(this.scroll);
 
     let scrollTop = 0;
-    const ot = this.inTopHalf ? this.topMsg?.offsetTop : this.bottomMsg?.offsetTop;
+    const ot = this.inTopHalf
+      ? this.topMsg?.offsetTop
+      : this.bottomMsg?.offsetTop;
     if (!ot) scrollTop = Math.round(this.height - this.viewHeight);
     else scrollTop = ot - this.diff;
 
@@ -47,7 +51,11 @@ class TimelineScroll {
 
     if (offsetTop === undefined) return;
     // if msg is already in visible are we don't need to scroll to that
-    if (offsetTop > scrollInfo.top && offsetTop < (scrollInfo.top + scrollInfo.viewHeight)) return;
+    if (
+      offsetTop > scrollInfo.top &&
+      offsetTop < scrollInfo.top + scrollInfo.viewHeight
+    )
+      return;
     const to = offsetTop - offset;
 
     this._scrollTo(scrollInfo, to);
@@ -68,7 +76,7 @@ class TimelineScroll {
 
     const maxScrollTop = scrollInfo.height - scrollInfo.viewHeight;
 
-    sInfo.top = (scrollTop > maxScrollTop) ? maxScrollTop : scrollTop;
+    sInfo.top = scrollTop > maxScrollTop ? maxScrollTop : scrollTop;
     this._updateCalc(sInfo);
   }
 
@@ -81,12 +89,12 @@ class TimelineScroll {
 
     // TODO: classname 'ph-msg' prevent this class from being used
     const PLACEHOLDER_COUNT = 2;
-    this.topMsg = msgs[0]?.className === 'ph-msg'
-      ? msgs[PLACEHOLDER_COUNT]
-      : msgs[0];
-    this.bottomMsg = msgs[lMsgIndex]?.className === 'ph-msg'
-      ? msgs[lMsgIndex - PLACEHOLDER_COUNT]
-      : msgs[lMsgIndex];
+    this.topMsg =
+      msgs[0]?.className === "ph-msg" ? msgs[PLACEHOLDER_COUNT] : msgs[0];
+    this.bottomMsg =
+      msgs[lMsgIndex]?.className === "ph-msg"
+        ? msgs[lMsgIndex - PLACEHOLDER_COUNT]
+        : msgs[lMsgIndex];
   }
 
   // we calculate the difference between first/last message and current scrollTop.
diff --git a/src/app/organisms/room/commands.jsx b/src/app/organisms/room/commands.jsx
index 463f9d94..48f53b10 100644
--- a/src/app/organisms/room/commands.jsx
+++ b/src/app/organisms/room/commands.jsx
@@ -1,13 +1,16 @@
-import React from 'react';
-import './commands.scss';
+import React from "react";
+import "./commands.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import * as roomActions from '../../../client/action/room';
-import { hasDMWith, hasDevices } from '../../../util/matrixUtil';
-import { selectRoom, openReusableDialog } from '../../../client/action/navigation';
+import initMatrix from "../../../client/initMatrix";
+import * as roomActions from "../../../client/action/room";
+import { hasDMWith, hasDevices } from "../../../util/matrixUtil";
+import {
+  selectRoom,
+  openReusableDialog,
+} from "../../../client/action/navigation";
 
-import Text from '../../atoms/text/Text';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import SettingTile from "../../molecules/setting-tile/SettingTile";
 
 const MXID_REG = /^@\S+:\S+$/;
 const ROOM_ID_ALIAS_REG = /^(#|!)\S+:\S+$/;
@@ -21,9 +24,9 @@ export function processMxidAndReason(data) {
   if (reasonMatch) {
     idData = data.slice(0, reasonMatch.index);
     reason = data.slice(reasonMatch.index + reasonMatch[0].length);
-    if (reason.trim() === '') reason = undefined;
+    if (reason.trim() === "") reason = undefined;
   }
-  const rawIds = idData.split(' ');
+  const rawIds = idData.split(" ");
   const userIds = rawIds.filter((id) => id.match(MXID_REG));
   return {
     userIds,
@@ -33,44 +36,46 @@ export function processMxidAndReason(data) {
 
 const commands = {
   me: {
-    name: 'me',
-    description: 'Display action',
+    name: "me",
+    description: "Display action",
     exe: (roomId, data, onSuccess) => {
       const body = data.trim();
-      if (body === '') return;
-      onSuccess(body, { msgType: 'm.emote' });
+      if (body === "") return;
+      onSuccess(body, { msgType: "m.emote" });
     },
   },
   shrug: {
-    name: 'shrug',
-    description: 'Send ¯\\_(ツ)_/¯ as message',
-    exe: (roomId, data, onSuccess) => onSuccess(
-      `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`,
-      { msgType: 'm.text' },
-    ),
+    name: "shrug",
+    description: "Send ¯\\_(ツ)_/¯ as message",
+    exe: (roomId, data, onSuccess) =>
+      onSuccess(`¯\\_(ツ)_/¯${data.trim() !== "" ? ` ${data}` : ""}`, {
+        msgType: "m.text",
+      }),
   },
   plain: {
-    name: 'plain',
-    description: 'Send plain text message',
+    name: "plain",
+    description: "Send plain text message",
     exe: (roomId, data, onSuccess) => {
       const body = data.trim();
-      if (body === '') return;
-      onSuccess(body, { msgType: 'm.text', autoMarkdown: false });
+      if (body === "") return;
+      onSuccess(body, { msgType: "m.text", autoMarkdown: false });
     },
   },
   help: {
-    name: 'help',
-    description: 'View all commands',
+    name: "help",
+    description: "View all commands",
     // eslint-disable-next-line no-use-before-define
     exe: () => openHelpDialog(),
   },
   startdm: {
-    name: 'startdm',
-    description: 'Start direct message with user. Example: /startdm userId1',
+    name: "startdm",
+    description: "Start direct message with user. Example: /startdm userId1",
     exe: async (roomId, data) => {
       const mx = initMatrix.matrixClient;
-      const rawIds = data.split(' ');
-      const userIds = rawIds.filter((id) => id.match(MXID_REG) && id !== mx.getUserId());
+      const rawIds = data.split(" ");
+      const userIds = rawIds.filter(
+        (id) => id.match(MXID_REG) && id !== mx.getUserId()
+      );
       if (userIds.length === 0) return;
       if (userIds.length === 1) {
         const dmRoomId = hasDMWith(userIds[0]);
@@ -86,98 +91,103 @@ const commands = {
     },
   },
   join: {
-    name: 'join',
-    description: 'Join room with address. Example: /join address1 address2',
+    name: "join",
+    description: "Join room with address. Example: /join address1 address2",
     exe: (roomId, data) => {
-      const rawIds = data.split(' ');
+      const rawIds = data.split(" ");
       const roomIds = rawIds.filter((id) => id.match(ROOM_ID_ALIAS_REG));
       roomIds.map((id) => roomActions.join(id));
     },
   },
   leave: {
-    name: 'leave',
-    description: 'Leave current room.',
+    name: "leave",
+    description: "Leave current room.",
     exe: (roomId, data) => {
-      if (data.trim() === '') {
+      if (data.trim() === "") {
         roomActions.leave(roomId);
         return;
       }
-      const rawIds = data.split(' ');
+      const rawIds = data.split(" ");
       const roomIds = rawIds.filter((id) => id.match(ROOM_ID_REG));
       roomIds.map((id) => roomActions.leave(id));
     },
   },
   invite: {
-    name: 'invite',
-    description: 'Invite user to room. Example: /invite userId1 userId2 [-r reason]',
+    name: "invite",
+    description:
+      "Invite user to room. Example: /invite userId1 userId2 [-r reason]",
     exe: (roomId, data) => {
       const { userIds, reason } = processMxidAndReason(data);
       userIds.map((id) => roomActions.invite(roomId, id, reason));
     },
   },
   disinvite: {
-    name: 'disinvite',
-    description: 'Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]',
+    name: "disinvite",
+    description:
+      "Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]",
     exe: (roomId, data) => {
       const { userIds, reason } = processMxidAndReason(data);
       userIds.map((id) => roomActions.kick(roomId, id, reason));
     },
   },
   kick: {
-    name: 'kick',
-    description: 'Kick user from room. Example: /kick userId1 userId2 [-r reason]',
+    name: "kick",
+    description:
+      "Kick user from room. Example: /kick userId1 userId2 [-r reason]",
     exe: (roomId, data) => {
       const { userIds, reason } = processMxidAndReason(data);
       userIds.map((id) => roomActions.kick(roomId, id, reason));
     },
   },
   ban: {
-    name: 'ban',
-    description: 'Ban user from room. Example: /ban userId1 userId2 [-r reason]',
+    name: "ban",
+    description:
+      "Ban user from room. Example: /ban userId1 userId2 [-r reason]",
     exe: (roomId, data) => {
       const { userIds, reason } = processMxidAndReason(data);
       userIds.map((id) => roomActions.ban(roomId, id, reason));
     },
   },
   unban: {
-    name: 'unban',
-    description: 'Unban user from room. Example: /unban userId1 userId2',
+    name: "unban",
+    description: "Unban user from room. Example: /unban userId1 userId2",
     exe: (roomId, data) => {
-      const rawIds = data.split(' ');
+      const rawIds = data.split(" ");
       const userIds = rawIds.filter((id) => id.match(MXID_REG));
       userIds.map((id) => roomActions.unban(roomId, id));
     },
   },
   ignore: {
-    name: 'ignore',
-    description: 'Ignore user. Example: /ignore userId1 userId2',
+    name: "ignore",
+    description: "Ignore user. Example: /ignore userId1 userId2",
     exe: (roomId, data) => {
-      const rawIds = data.split(' ');
+      const rawIds = data.split(" ");
       const userIds = rawIds.filter((id) => id.match(MXID_REG));
       if (userIds.length > 0) roomActions.ignore(userIds);
     },
   },
   unignore: {
-    name: 'unignore',
-    description: 'Unignore user. Example: /unignore userId1 userId2',
+    name: "unignore",
+    description: "Unignore user. Example: /unignore userId1 userId2",
     exe: (roomId, data) => {
-      const rawIds = data.split(' ');
+      const rawIds = data.split(" ");
       const userIds = rawIds.filter((id) => id.match(MXID_REG));
       if (userIds.length > 0) roomActions.unignore(userIds);
     },
   },
   myroomnick: {
-    name: 'myroomnick',
-    description: 'Change nick in current room.',
+    name: "myroomnick",
+    description: "Change nick in current room.",
     exe: (roomId, data) => {
       const nick = data.trim();
-      if (nick === '') return;
+      if (nick === "") return;
       roomActions.setMyRoomNick(roomId, nick);
     },
   },
   myroomavatar: {
-    name: 'myroomavatar',
-    description: 'Change profile picture in current room. Example /myroomavatar mxc://xyzabc',
+    name: "myroomavatar",
+    description:
+      "Change profile picture in current room. Example /myroomavatar mxc://xyzabc",
     exe: (roomId, data) => {
       if (data.match(MXC_REG)) {
         roomActions.setMyRoomAvatar(roomId, data);
@@ -185,15 +195,15 @@ const commands = {
     },
   },
   converttodm: {
-    name: 'converttodm',
-    description: 'Convert room to direct message',
+    name: "converttodm",
+    description: "Convert room to direct message",
     exe: (roomId) => {
       roomActions.convertToDm(roomId);
     },
   },
   converttoroom: {
-    name: 'converttoroom',
-    description: 'Convert direct message to room',
+    name: "converttoroom",
+    description: "Convert direct message to room",
     exe: (roomId) => {
       roomActions.convertToRoom(roomId);
     },
@@ -202,7 +212,9 @@ const commands = {
 
 function openHelpDialog() {
   openReusableDialog(
-    <Text variant="s1" weight="medium">Commands</Text>,
+    <Text variant="s1" weight="medium">
+      Commands
+    </Text>,
     () => (
       <div className="commands-dialog">
         {Object.keys(commands).map((cmdName) => (
@@ -213,7 +225,7 @@ function openHelpDialog() {
           />
         ))}
       </div>
-    ),
+    )
   );
 }
 
diff --git a/src/app/organisms/room/commands.scss b/src/app/organisms/room/commands.scss
index 62839378..de79a684 100644
--- a/src/app/organisms/room/commands.scss
+++ b/src/app/organisms/room/commands.scss
@@ -7,4 +7,4 @@
       margin-bottom: var(--sp-extra-loose);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/room/common.jsx b/src/app/organisms/room/common.jsx
index 28974a85..f92eecbf 100644
--- a/src/app/organisms/room/common.jsx
+++ b/src/app/organisms/room/common.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
+import initMatrix from "../../../client/initMatrix";
+import { getUsername, getUsernameOfRoomMember } from "../../../util/matrixUtil";
 
 function getTimelineJSXMessages() {
   return {
@@ -11,16 +11,16 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' joined the room'}
+          {" joined the room"}
         </>
       );
     },
     leave(user, reason) {
-      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
+      const reasonMsg = typeof reason === "string" ? `: ${reason}` : "";
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' left the room'}
+          {" left the room"}
           {twemojify(reasonMsg)}
         </>
       );
@@ -29,7 +29,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(inviter)}</b>
-          {' invited '}
+          {" invited "}
           <b>{twemojify(user)}</b>
         </>
       );
@@ -38,9 +38,9 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(inviter)}</b>
-          {' canceled '}
+          {" canceled "}
           <b>{twemojify(user)}</b>
-          {'\'s invite'}
+          {"'s invite"}
         </>
       );
     },
@@ -48,27 +48,27 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' rejected the invitation'}
+          {" rejected the invitation"}
         </>
       );
     },
     kick(actor, user, reason) {
-      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
+      const reasonMsg = typeof reason === "string" ? `: ${reason}` : "";
       return (
         <>
           <b>{twemojify(actor)}</b>
-          {' kicked '}
+          {" kicked "}
           <b>{twemojify(user)}</b>
           {twemojify(reasonMsg)}
         </>
       );
     },
     ban(actor, user, reason) {
-      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
+      const reasonMsg = typeof reason === "string" ? `: ${reason}` : "";
       return (
         <>
           <b>{twemojify(actor)}</b>
-          {' banned '}
+          {" banned "}
           <b>{twemojify(user)}</b>
           {twemojify(reasonMsg)}
         </>
@@ -78,7 +78,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(actor)}</b>
-          {' unbanned '}
+          {" unbanned "}
           <b>{twemojify(user)}</b>
         </>
       );
@@ -87,7 +87,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' set a avatar'}
+          {" set a avatar"}
         </>
       );
     },
@@ -95,7 +95,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' changed their avatar'}
+          {" changed their avatar"}
         </>
       );
     },
@@ -103,7 +103,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' removed their avatar'}
+          {" removed their avatar"}
         </>
       );
     },
@@ -111,7 +111,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' set display name to '}
+          {" set display name to "}
           <b>{twemojify(newName)}</b>
         </>
       );
@@ -120,7 +120,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' changed their display name to '}
+          {" changed their display name to "}
           <b>{twemojify(newName)}</b>
         </>
       );
@@ -129,7 +129,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{twemojify(user)}</b>
-          {' removed their display name '}
+          {" removed their display name "}
           <b>{twemojify(lastName)}</b>
         </>
       );
@@ -140,31 +140,50 @@ function getTimelineJSXMessages() {
 function getUsersActionJsx(roomId, userIds, actionStr) {
   const room = initMatrix.matrixClient.getRoom(roomId);
   const getUserDisplayName = (userId) => {
-    if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+    if (room?.getMember(userId))
+      return getUsernameOfRoomMember(room.getMember(userId));
     return getUsername(userId);
   };
   const getUserJSX = (userId) => <b>{twemojify(getUserDisplayName(userId))}</b>;
-  if (!Array.isArray(userIds)) return 'Idle';
-  if (userIds.length === 0) return 'Idle';
+  if (!Array.isArray(userIds)) return "Idle";
+  if (userIds.length === 0) return "Idle";
   const MAX_VISIBLE_COUNT = 3;
 
   const u1Jsx = getUserJSX(userIds[0]);
   // eslint-disable-next-line react/jsx-one-expression-per-line
-  if (userIds.length === 1) return <>{u1Jsx} is {actionStr}</>;
+  if (userIds.length === 1)
+    return (
+      <>
+        {u1Jsx} is {actionStr}
+      </>
+    );
 
   const u2Jsx = getUserJSX(userIds[1]);
   // eslint-disable-next-line react/jsx-one-expression-per-line
-  if (userIds.length === 2) return <>{u1Jsx} and {u2Jsx} are {actionStr}</>;
+  if (userIds.length === 2)
+    return (
+      <>
+        {u1Jsx} and {u2Jsx} are {actionStr}
+      </>
+    );
 
   const u3Jsx = getUserJSX(userIds[2]);
   if (userIds.length === 3) {
     // eslint-disable-next-line react/jsx-one-expression-per-line
-    return <>{u1Jsx}, {u2Jsx} and {u3Jsx} are {actionStr}</>;
+    return (
+      <>
+        {u1Jsx}, {u2Jsx} and {u3Jsx} are {actionStr}
+      </>
+    );
   }
 
   const othersCount = userIds.length - MAX_VISIBLE_COUNT;
   // eslint-disable-next-line react/jsx-one-expression-per-line
-  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} others are {actionStr}</>;
+  return (
+    <>
+      {u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} others are {actionStr}
+    </>
+  );
 }
 
 function parseTimelineChange(mEvent) {
@@ -180,43 +199,84 @@ function parseTimelineChange(mEvent) {
   const userName = getUsername(mEvent.getStateKey());
 
   switch (content.membership) {
-    case 'invite': return makeReturnObj('invite', tJSXMsgs.invite(senderName, userName));
-    case 'ban': return makeReturnObj('leave', tJSXMsgs.ban(senderName, userName, content.reason));
-    case 'join':
-      if (prevContent.membership === 'join') {
+    case "invite":
+      return makeReturnObj("invite", tJSXMsgs.invite(senderName, userName));
+    case "ban":
+      return makeReturnObj(
+        "leave",
+        tJSXMsgs.ban(senderName, userName, content.reason)
+      );
+    case "join":
+      if (prevContent.membership === "join") {
         if (content.displayname !== prevContent.displayname) {
-          if (typeof content.displayname === 'undefined') return makeReturnObj('avatar', tJSXMsgs.nameRemoved(sender, prevContent.displayname));
-          if (typeof prevContent.displayname === 'undefined') return makeReturnObj('avatar', tJSXMsgs.nameSets(sender, content.displayname));
-          return makeReturnObj('avatar', tJSXMsgs.nameChanged(prevContent.displayname, content.displayname));
+          if (typeof content.displayname === "undefined")
+            return makeReturnObj(
+              "avatar",
+              tJSXMsgs.nameRemoved(sender, prevContent.displayname)
+            );
+          if (typeof prevContent.displayname === "undefined")
+            return makeReturnObj(
+              "avatar",
+              tJSXMsgs.nameSets(sender, content.displayname)
+            );
+          return makeReturnObj(
+            "avatar",
+            tJSXMsgs.nameChanged(prevContent.displayname, content.displayname)
+          );
         }
         if (content.avatar_url !== prevContent.avatar_url) {
-          if (typeof content.avatar_url === 'undefined') return makeReturnObj('avatar', tJSXMsgs.avatarRemoved(content.displayname));
-          if (typeof prevContent.avatar_url === 'undefined') return makeReturnObj('avatar', tJSXMsgs.avatarSets(content.displayname));
-          return makeReturnObj('avatar', tJSXMsgs.avatarChanged(content.displayname));
+          if (typeof content.avatar_url === "undefined")
+            return makeReturnObj(
+              "avatar",
+              tJSXMsgs.avatarRemoved(content.displayname)
+            );
+          if (typeof prevContent.avatar_url === "undefined")
+            return makeReturnObj(
+              "avatar",
+              tJSXMsgs.avatarSets(content.displayname)
+            );
+          return makeReturnObj(
+            "avatar",
+            tJSXMsgs.avatarChanged(content.displayname)
+          );
         }
         return null;
       }
-      return makeReturnObj('join', tJSXMsgs.join(senderName));
-    case 'leave':
+      return makeReturnObj("join", tJSXMsgs.join(senderName));
+    case "leave":
       if (sender === mEvent.getStateKey()) {
         switch (prevContent.membership) {
-          case 'invite': return makeReturnObj('invite-cancel', tJSXMsgs.rejectInvite(senderName));
-          default: return makeReturnObj('leave', tJSXMsgs.leave(senderName, content.reason));
+          case "invite":
+            return makeReturnObj(
+              "invite-cancel",
+              tJSXMsgs.rejectInvite(senderName)
+            );
+          default:
+            return makeReturnObj(
+              "leave",
+              tJSXMsgs.leave(senderName, content.reason)
+            );
         }
       }
       switch (prevContent.membership) {
-        case 'invite': return makeReturnObj('invite-cancel', tJSXMsgs.cancelInvite(senderName, userName));
-        case 'ban': return makeReturnObj('other', tJSXMsgs.unban(senderName, userName));
+        case "invite":
+          return makeReturnObj(
+            "invite-cancel",
+            tJSXMsgs.cancelInvite(senderName, userName)
+          );
+        case "ban":
+          return makeReturnObj("other", tJSXMsgs.unban(senderName, userName));
         // sender is not target and made the target leave,
         // if not from invite/ban then this is a kick
-        default: return makeReturnObj('leave', tJSXMsgs.kick(senderName, userName, content.reason));
+        default:
+          return makeReturnObj(
+            "leave",
+            tJSXMsgs.kick(senderName, userName, content.reason)
+          );
       }
-    default: return null;
+    default:
+      return null;
   }
 }
 
-export {
-  getTimelineJSXMessages,
-  getUsersActionJsx,
-  parseTimelineChange,
-};
+export { getTimelineJSXMessages, getUsersActionJsx, parseTimelineChange };
diff --git a/src/app/organisms/search/Search.jsx b/src/app/organisms/search/Search.jsx
index 64c898bf..d0b28c24 100644
--- a/src/app/organisms/search/Search.jsx
+++ b/src/app/organisms/search/Search.jsx
@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './Search.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./Search.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import AsyncSearch from '../../../util/AsyncSearch';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
-import { joinRuleToIconSrc } from '../../../util/matrixUtil';
-import { roomIdByActivity } from '../../../util/sort';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import AsyncSearch from "../../../util/AsyncSearch";
+import { selectRoom, selectTab } from "../../../client/action/navigation";
+import { joinRuleToIconSrc } from "../../../util/matrixUtil";
+import { roomIdByActivity } from "../../../util/sort";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import Input from '../../atoms/input/Input';
-import RawModal from '../../atoms/modal/RawModal';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import RoomSelector from '../../molecules/room-selector/RoomSelector';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import IconButton from "../../atoms/button/IconButton";
+import Input from "../../atoms/input/Input";
+import RawModal from "../../atoms/modal/RawModal";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import RoomSelector from "../../molecules/room-selector/RoomSelector";
 
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import SearchIC from "../../../../public/res/ic/outlined/search.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function useVisiblityToggle(setResult) {
   const [isOpen, setIsOpen] = useState(false);
@@ -33,7 +33,10 @@ function useVisiblityToggle(setResult) {
     };
     navigation.on(cons.events.navigation.SEARCH_OPENED, handleSearchOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.SEARCH_OPENED, handleSearchOpen);
+      navigation.removeListener(
+        cons.events.navigation.SEARCH_OPENED,
+        handleSearchOpen
+      );
     };
   }, []);
 
@@ -56,21 +59,23 @@ function mapRoomIds(roomIds) {
     const room = mx.getRoom(roomId);
     const parentSet = roomIdToParents.get(roomId);
     const parentNames = parentSet ? [] : undefined;
-    parentSet?.forEach((parentId) => parentNames.push(mx.getRoom(parentId).name));
+    parentSet?.forEach((parentId) =>
+      parentNames.push(mx.getRoom(parentId).name)
+    );
 
-    const parents = parentNames ? parentNames.join(', ') : null;
+    const parents = parentNames ? parentNames.join(", ") : null;
 
-    let type = 'room';
-    if (room.isSpaceRoom()) type = 'space';
-    else if (directs.has(roomId)) type = 'direct';
+    let type = "room";
+    if (room.isSpaceRoom()) type = "space";
+    else if (directs.has(roomId)) type = "direct";
 
-    return ({
+    return {
       type,
       name: room.name,
       parents,
       roomId,
       room,
-    });
+    };
   });
 }
 
@@ -100,8 +105,8 @@ function Search() {
     let ids = null;
 
     if (prefix) {
-      if (prefix === '#') ids = [...rooms];
-      else if (prefix === '@') ids = [...directs];
+      if (prefix === "#") ids = [...rooms];
+      else if (prefix === "@") ids = [...directs];
       else ids = [...spaces];
     } else {
       ids = [...rooms].concat([...directs], [...spaces]);
@@ -109,7 +114,7 @@ function Search() {
 
     ids.sort(roomIdByActivity);
     const mappedIds = mapRoomIds(ids);
-    asyncSearch.setup(mappedIds, { keys: 'name', isContain: true, limit: 20 });
+    asyncSearch.setup(mappedIds, { keys: "name", isContain: true, limit: 20 });
     if (prefix) handleSearchResults(mappedIds, prefix);
     else asyncSearch.search(term);
   };
@@ -124,7 +129,7 @@ function Search() {
     loadRecentRooms();
     asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchResults);
 
-    if (typeof result.term === 'string') {
+    if (typeof result.term === "string") {
       generateResults(result.term);
       searchRef.current.value = result.term;
     }
@@ -148,14 +153,14 @@ function Search() {
     const { value } = searchRef.current;
     if (value.length === 0) requestClose();
     else {
-      searchRef.current.value = '';
+      searchRef.current.value = "";
       searchRef.current.focus();
       loadRecentRooms();
     }
   };
 
   const openItem = (roomId, type) => {
-    if (type === 'space') selectTab(roomId);
+    if (type === "space") selectTab(roomId);
     else selectRoom(roomId);
     requestClose();
   };
@@ -172,10 +177,16 @@ function Search() {
   const renderRoomSelector = (item) => {
     let imageSrc = null;
     let iconSrc = null;
-    if (item.type === 'direct') {
-      imageSrc = item.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+    if (item.type === "direct") {
+      imageSrc =
+        item.room
+          .getAvatarFallbackMember()
+          ?.getAvatarUrl(mx.baseUrl, 24, 24, "crop") || null;
     } else {
-      iconSrc = joinRuleToIconSrc(item.room.getJoinRule(), item.type === 'space');
+      iconSrc = joinRuleToIconSrc(
+        item.room.getJoinRule(),
+        item.type === "space"
+      );
     }
 
     return (
@@ -204,24 +215,39 @@ function Search() {
       size="small"
     >
       <div className="search-dialog">
-        <form className="search-dialog__input" onSubmit={(e) => { e.preventDefault(); openFirstResult(); }}>
+        <form
+          className="search-dialog__input"
+          onSubmit={(e) => {
+            e.preventDefault();
+            openFirstResult();
+          }}
+        >
           <RawIcon src={SearchIC} size="small" />
           <Input
             onChange={handleOnChange}
             forwardRef={searchRef}
             placeholder="Search"
           />
-          <IconButton size="small" src={CrossIC} type="reset" onClick={handleCross} tabIndex={-1} />
+          <IconButton
+            size="small"
+            src={CrossIC}
+            type="reset"
+            onClick={handleCross}
+            tabIndex={-1}
+          />
         </form>
         <div className="search-dialog__content-wrapper">
           <ScrollView autoHide>
             <div className="search-dialog__content">
-              { Array.isArray(result?.chunk) && result.chunk.map(renderRoomSelector) }
+              {Array.isArray(result?.chunk) &&
+                result.chunk.map(renderRoomSelector)}
             </div>
           </ScrollView>
         </div>
         <div className="search-dialog__footer">
-          <Text variant="b3">Type # for rooms, @ for DMs and * for spaces. Hotkey: Ctrl + k</Text>
+          <Text variant="b3">
+            Type # for rooms, @ for DMs and * for spaces. Hotkey: Ctrl + k
+          </Text>
         </div>
       </div>
     </RawModal>
diff --git a/src/app/organisms/search/Search.scss b/src/app/organisms/search/Search.scss
index 3612d742..486b1963 100644
--- a/src/app/organisms/search/Search.scss
+++ b/src/app/organisms/search/Search.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .search-dialog__modal {
   --modal-height: 380px;
@@ -58,23 +58,30 @@
       display: inline-block;
       width: 100%;
       height: 8px;
-      background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-transparent));
+      background-image: linear-gradient(
+        to bottom,
+        var(--bg-surface),
+        var(--bg-surface-transparent)
+      );
     }
     &::after {
       top: unset;
       bottom: 0;
-      background-image: linear-gradient(to bottom, var(--bg-surface-transparent), var(--bg-surface));
+      background-image: linear-gradient(
+        to bottom,
+        var(--bg-surface-transparent),
+        var(--bg-surface)
+      );
     }
   }
 
   &__content {
     padding: var(--sp-extra-tight);
-    @include dir.side(padding,  var(--sp-normal), var(--sp-extra-tight));
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   }
 
   &__footer {
     padding: var(--sp-tight) var(--sp-normal);
     text-align: center;
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/settings/AuthRequest.jsx b/src/app/organisms/settings/AuthRequest.jsx
index ca07c2a2..a533d1a1 100644
--- a/src/app/organisms/settings/AuthRequest.jsx
+++ b/src/app/organisms/settings/AuthRequest.jsx
@@ -1,23 +1,23 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './AuthRequest.scss';
+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 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 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';
+import { useStore } from "../../hooks/useStore";
 
 let lastUsedPassword;
 const getAuthId = (password) => ({
-  type: 'm.login.password',
+  type: "m.login.password",
   password,
   identifier: {
-    type: 'm.id.user',
+    type: "m.id.user",
     user: initMatrix.matrixClient.getUserId(),
   },
 });
@@ -30,7 +30,7 @@ function AuthRequest({ onComplete, makeRequest }) {
     mountStore.setItem(true);
     e.preventDefault();
     const password = e.target.password.value;
-    if (password.trim() === '') return;
+    if (password.trim() === "") return;
     try {
       setStatus({ ongoing: true });
       await makeRequest(getAuthId(password));
@@ -40,11 +40,11 @@ function AuthRequest({ onComplete, makeRequest }) {
     } catch (err) {
       lastUsedPassword = undefined;
       if (!mountStore.getItem()) return;
-      if (err.errcode === 'M_FORBIDDEN') {
-        setStatus({ error: 'Wrong password. Please enter correct password.' });
+      if (err.errcode === "M_FORBIDDEN") {
+        setStatus({ error: "Wrong password. Please enter correct password." });
         return;
       }
-      setStatus({ error: 'Request failed!' });
+      setStatus({ error: "Request failed!" });
     }
   };
 
@@ -64,7 +64,11 @@ function AuthRequest({ onComplete, makeRequest }) {
         />
         {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>}
+        {(status === false || status.error) && (
+          <Button variant="primary" type="submit" disabled={!!status.error}>
+            Continue
+          </Button>
+        )}
       </form>
     </div>
   );
@@ -89,13 +93,17 @@ export const authRequest = async (title, makeRequest) => {
     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'));
+    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>,
+        <Text variant="s1" weight="medium">
+          {title}
+        </Text>,
         (requestClose) => (
           <AuthRequest
             onComplete={(done) => {
@@ -108,7 +116,7 @@ export const authRequest = async (title, makeRequest) => {
         ),
         () => {
           if (!isCompleted) resolve(false);
-        },
+        }
       );
     });
   }
diff --git a/src/app/organisms/settings/AuthRequest.scss b/src/app/organisms/settings/AuthRequest.scss
index 35e95bf2..cbc8f5d5 100644
--- a/src/app/organisms/settings/AuthRequest.scss
+++ b/src/app/organisms/settings/AuthRequest.scss
@@ -9,4 +9,4 @@
     color: var(--tc-danger-high);
     margin-top: var(--sp-ultra-tight) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/settings/CrossSigning.jsx b/src/app/organisms/settings/CrossSigning.jsx
index 563e3152..4080ccbb 100644
--- a/src/app/organisms/settings/CrossSigning.jsx
+++ b/src/app/organisms/settings/CrossSigning.jsx
@@ -1,45 +1,49 @@
 /* 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 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 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 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';
+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>
+      <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,
+    <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',
+      type: "text/plain;charset=us-ascii",
     });
-    FileSaver.saveAs(blob, 'security-key.txt');
+    FileSaver.saveAs(blob, "security-key.txt");
   };
   const copyKey = () => {
     copyToClipboard(key.encodedPrivateKey);
@@ -48,11 +52,11 @@ const securityKeyDialog = (key) => {
   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>
+      <Text className="cross-signing__key-text">{key.encodedPrivateKey}</Text>
       <div className="cross-signing__key-btn">
-        <Button variant="primary" onClick={() => copyKey(key)}>Copy</Button>
+        <Button variant="primary" onClick={() => copyKey(key)}>
+          Copy
+        </Button>
         <Button onClick={() => downloadKey(key)}>Download</Button>
       </div>
     </div>
@@ -62,19 +66,23 @@ const securityKeyDialog = (key) => {
   downloadKey();
 
   openReusableDialog(
-    <Text variant="s1" weight="medium">Security Key</Text>,
-    () => renderSecurityKey(),
+    <Text variant="s1" weight="medium">
+      Security Key
+    </Text>,
+    () => renderSecurityKey()
   );
 };
 
 function CrossSigningSetup() {
-  const initialValues = { phrase: '', confirmPhrase: '' };
+  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);
+    setGenWithPhrase(typeof securityPhrase === "string");
+    const recoveryKey = await mx.createRecoveryKeyFromPassphrase(
+      securityPhrase
+    );
     clearSecretStorageKeys();
 
     await mx.bootstrapSecretStorage({
@@ -84,7 +92,7 @@ function CrossSigningSetup() {
     });
 
     const authUploadDeviceSigningKeys = async (makeRequest) => {
-      const isDone = await authRequest('Setup cross signing', async (auth) => {
+      const isDone = await authRequest("Setup cross signing", async (auth) => {
         await makeRequest(auth);
       });
       setTimeout(() => {
@@ -101,18 +109,21 @@ function CrossSigningSetup() {
 
   const validator = (values) => {
     const errors = {};
-    if (values.phrase === '12345678') {
-      errors.phrase = 'How about 87654321 ?';
+    if (values.phrase === "12345678") {
+      errors.phrase = "How about 87654321 ?";
     }
-    if (values.phrase === '87654321') {
-      errors.phrase = 'Your are playing with 🔥';
+    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.';
+      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.';
+    if (
+      values.confirmPhrase.length > 0 &&
+      values.confirmPhrase !== values.phrase
+    ) {
+      errors.confirmPhrase = "Phrase don't match.";
     }
     return errors;
   };
@@ -121,10 +132,18 @@ function CrossSigningSetup() {
     <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.
+          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 && (
+          <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>
@@ -133,9 +152,7 @@ function CrossSigningSetup() {
         onSubmit={(values) => setup(values.phrase)}
         validate={validator}
       >
-        {({
-          values, errors, handleChange, handleSubmit,
-        }) => (
+        {({ values, errors, handleChange, handleSubmit }) => (
           <form
             className="cross-signing__setup-entry"
             onSubmit={handleSubmit}
@@ -143,8 +160,8 @@ function CrossSigningSetup() {
           >
             <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.
+              so you don't have to remember long Security Key, and optionally
+              save the Key as backup.
             </Text>
             <Input
               name="phrase"
@@ -155,7 +172,11 @@ function CrossSigningSetup() {
               required
               disabled={genWithPhrase !== undefined}
             />
-            {errors.phrase && <Text variant="b3" className="cross-signing__error">{errors.phrase}</Text>}
+            {errors.phrase && (
+              <Text variant="b3" className="cross-signing__error">
+                {errors.phrase}
+              </Text>
+            )}
             <Input
               name="confirmPhrase"
               value={values.confirmPhrase}
@@ -165,8 +186,20 @@ function CrossSigningSetup() {
               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>}
+            {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>
         )}
@@ -177,31 +210,37 @@ function CrossSigningSetup() {
 
 const setupDialog = () => {
   openReusableDialog(
-    <Text variant="s1" weight="medium">Setup cross signing</Text>,
-    () => <CrossSigningSetup />,
+    <Text variant="s1" weight="medium">
+      Setup cross signing
+    </Text>,
+    () => <CrossSigningSetup />
   );
 };
 
 function CrossSigningReset() {
   return (
     <div className="cross-signing__reset">
-      <Text variant="h1">{twemojify('✋🧑‍🚒🤚')}</Text>
+      <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 be 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.
+        Anyone you have verified with will see security alerts and your message
+        backup will be 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>
+      <Button variant="danger" onClick={setupDialog}>
+        Reset
+      </Button>
     </div>
   );
 }
 
 const resetDialog = () => {
   openReusableDialog(
-    <Text variant="s1" weight="medium">Reset cross signing</Text>,
-    () => <CrossSigningReset />,
+    <Text variant="s1" weight="medium">
+      Reset cross signing
+    </Text>,
+    () => <CrossSigningReset />
   );
 };
 
@@ -210,12 +249,23 @@ function CrossSignin() {
   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>
-      )}
+      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>
+        )
+      }
     />
   );
 }
diff --git a/src/app/organisms/settings/CrossSigning.scss b/src/app/organisms/settings/CrossSigning.scss
index b4b606d0..6a1a26c3 100644
--- a/src/app/organisms/settings/CrossSigning.scss
+++ b/src/app/organisms/settings/CrossSigning.scss
@@ -17,11 +17,11 @@
     margin: var(--sp-tight) 0;
     display: flex;
     align-items: center;
-  
+
     &::before,
     &::after {
       flex: 1;
-      content: '';
+      content: "";
       margin: var(--sp-tight) 0;
       border-bottom: 1px solid var(--bg-surface-border);
     }
@@ -52,4 +52,4 @@
   & > .text {
     padding-bottom: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/settings/DeviceManage.jsx b/src/app/organisms/settings/DeviceManage.jsx
index 4825e238..0c687852 100644
--- a/src/app/organisms/settings/DeviceManage.jsx
+++ b/src/app/organisms/settings/DeviceManage.jsx
@@ -1,65 +1,74 @@
-import React, { useState, useEffect } from 'react';
-import './DeviceManage.scss';
-import dateFormat from 'dateformat';
+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 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 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 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 { 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';
+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 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);
+    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>
+      );
     };
-    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);
-    },
-  );
-});
+    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;
@@ -99,7 +108,7 @@ function DeviceManage() {
 
   const handleRename = async (device) => {
     const newName = await promptDeviceName(device.display_name);
-    if (newName === null || newName.trim() === '') return;
+    if (newName === null || newName.trim() === "") return;
     if (newName.trim() === device.display_name) return;
     addToProcessing(device);
     try {
@@ -116,8 +125,8 @@ function DeviceManage() {
     const isConfirmed = await confirmDialog(
       `Logout ${device.display_name}`,
       `You are about to logout "${device.display_name}" session.`,
-      'Logout',
-      'danger',
+      "Logout",
+      "danger"
     );
     if (!isConfirmed) return;
     addToProcessing(device);
@@ -130,7 +139,7 @@ function DeviceManage() {
   };
 
   const verifyWithKey = async (device) => {
-    const keyData = await accessSecretStorage('Session verification');
+    const keyData = await accessSecretStorage("Session verification");
     if (!keyData) return;
     addToProcessing(device);
     await mx.checkOwnCrossSigningTrust();
@@ -160,42 +169,72 @@ function DeviceManage() {
     return (
       <SettingTile
         key={deviceId}
-        title={(
-          <Text style={{ color: isVerified !== false ? '' : 'var(--tc-danger-high)' }}>
+        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 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" />
-            : (
-              <>
-                {(isCSEnabled && canVerify) && <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={(
+        options={
+          processing.includes(deviceId) ? (
+            <Spinner size="small" />
+          ) : (
+            <>
+              {isCSEnabled && canVerify && (
+                <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={
           <>
             {lastTS && (
               <Text variant="b3">
                 Last activity
-                <span style={{ color: 'var(--tc-surface-normal)' }}>
-                  {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+                <span style={{ color: "var(--tc-surface-normal)" }}>
+                  {dateFormat(new Date(lastTS), " hh:MM TT, dd/mm/yyyy")}
                 </span>
-                {lastIP ? ` at ${lastIP}` : ''}
+                {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 style={{ marginTop: "var(--sp-ultra-tight)" }} variant="b3">
+                {`Session Key: ${initMatrix.matrixClient
+                  .getDeviceEd25519Key()
+                  .match(/.{1,4}/g)
+                  .join(" ")}`}
               </Text>
             )}
           </>
-        )}
+        }
       />
     );
   };
@@ -203,22 +242,24 @@ function DeviceManage() {
   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);
-    }
-  });
+  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)' }}>
+          <div style={{ padding: "var(--sp-extra-tight) var(--sp-normal)" }}>
             <InfoCard
               rounded
               variant="caution"
@@ -227,35 +268,41 @@ function DeviceManage() {
             />
           </div>
         )}
-        {
-          unverified.length > 0
-            ? unverified.map((device) => renderDevice(device, false))
-            : <Text className="device-manage__info">No unverified sessions</Text>
-        }
+        {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>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'}
+        {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>
+        {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>
diff --git a/src/app/organisms/settings/DeviceManage.scss b/src/app/organisms/settings/DeviceManage.scss
index 5116cda8..cc48873f 100644
--- a/src/app/organisms/settings/DeviceManage.scss
+++ b/src/app/organisms/settings/DeviceManage.scss
@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .device-manage {
   &__loading {
@@ -13,7 +13,7 @@
     margin: var(--sp-normal);
   }
   & .setting-tile:last-of-type {
-     border-bottom: none;
+    border-bottom: none;
   }
   & .setting-tile__options {
     display: flex;
@@ -43,4 +43,4 @@
       gap: var(--sp-normal);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/settings/KeyBackup.jsx b/src/app/organisms/settings/KeyBackup.jsx
index 75f032bc..fb942bc4 100644
--- a/src/app/organisms/settings/KeyBackup.jsx
+++ b/src/app/organisms/settings/KeyBackup.jsx
@@ -1,28 +1,28 @@
 /* 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 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 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 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 { 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 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';
+import { useStore } from "../../hooks/useStore";
+import { useCrossSigningStatus } from "../../hooks/useCrossSigningStatus";
 
 function CreateKeyBackupDialog({ keyData }) {
   const [done, setDone] = useState(false);
@@ -34,10 +34,9 @@ function CreateKeyBackupDialog({ keyData }) {
     let info;
 
     try {
-      info = await mx.prepareKeyBackupVersion(
-        null,
-        { secureSecretStorage: true },
-      );
+      info = await mx.prepareKeyBackupVersion(null, {
+        secureSecretStorage: true,
+      });
       info = await mx.createKeyBackupVersion(info);
       await mx.scheduleAllGroupSessionsForBackup();
       if (!mountStore.getItem()) return;
@@ -65,7 +64,7 @@ function CreateKeyBackupDialog({ keyData }) {
       )}
       {done === true && (
         <>
-          <Text variant="h1">{twemojify('✅')}</Text>
+          <Text variant="h1">{twemojify("✅")}</Text>
           <Text>Successfully created backup</Text>
         </>
       )}
@@ -99,7 +98,9 @@ function RestoreKeyBackupDialog({ keyData }) {
         meBreath = true;
       }, 200);
 
-      setStatus({ message: `Restoring backup keys... (${progress.successes}/${progress.total})` });
+      setStatus({
+        message: `Restoring backup keys... (${progress.successes}/${progress.total})`,
+      });
     };
 
     try {
@@ -108,17 +109,24 @@ function RestoreKeyBackupDialog({ keyData }) {
         backupInfo,
         undefined,
         undefined,
-        { progressCallback },
+        {
+          progressCallback,
+        }
       );
       if (!mountStore.getItem()) return;
-      setStatus({ done: `Successfully restored backup keys (${info.imported}/${info.total}).` });
+      setStatus({
+        done: `Successfully restored backup keys (${info.imported}/${info.total}).`,
+      });
     } catch (e) {
       if (!mountStore.getItem()) return;
-      if (e.errcode === 'RESTORE_BACKUP_ERROR_BAD_KEY') {
+      if (e.errcode === "RESTORE_BACKUP_ERROR_BAD_KEY") {
         deletePrivateKey(keyData.keyId);
-        setStatus({ error: 'Failed to restore backup. Key is invalid!', errorCode: 'BAD_KEY' });
+        setStatus({
+          error: "Failed to restore backup. Key is invalid!",
+          errorCode: "BAD_KEY",
+        });
       } else {
-        setStatus({ error: 'Failed to restore backup.', errCode: 'UNKNOWN' });
+        setStatus({ error: "Failed to restore backup.", errCode: "UNKNOWN" });
       }
     }
   };
@@ -133,12 +141,12 @@ function RestoreKeyBackupDialog({ keyData }) {
       {(status === false || status.message) && (
         <div>
           <Spinner size="small" />
-          <Text>{status.message ?? 'Restoring backup keys...'}</Text>
+          <Text>{status.message ?? "Restoring backup keys..."}</Text>
         </div>
       )}
       {status.done && (
         <>
-          <Text variant="h1">{twemojify('✅')}</Text>
+          <Text variant="h1">{twemojify("✅")}</Text>
           <Text>{status.done}</Text>
         </>
       )}
@@ -176,14 +184,16 @@ function DeleteKeyBackupDialog({ requestClose }) {
 
   return (
     <div className="key-backup__delete">
-      <Text variant="h1">{twemojify('🗑')}</Text>
+      <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>
-      }
+      {isDeleting ? (
+        <Spinner size="small" />
+      ) : (
+        <Button variant="danger" onClick={deleteBackup}>
+          Delete
+        </Button>
+      )}
     </div>
   );
 }
@@ -208,57 +218,78 @@ function KeyBackup() {
     fetchKeyBackupVersion();
 
     const handleAccountData = (event) => {
-      if (event.getType() === 'm.megolm_backup.v1') {
+      if (event.getType() === "m.megolm_backup.v1") {
         fetchKeyBackupVersion();
       }
     };
 
-    mx.on('accountData', handleAccountData);
+    mx.on("accountData", handleAccountData);
     return () => {
-      mx.removeListener('accountData', handleAccountData);
+      mx.removeListener("accountData", handleAccountData);
     };
   }, [isCSEnabled]);
 
   const openCreateKeyBackup = async () => {
-    const keyData = await accessSecretStorage('Create Key Backup');
+    const keyData = await accessSecretStorage("Create Key Backup");
     if (keyData === null) return;
 
     openReusableDialog(
-      <Text variant="s1" weight="medium">Create Key Backup</Text>,
+      <Text variant="s1" weight="medium">
+        Create Key Backup
+      </Text>,
       () => <CreateKeyBackupDialog keyData={keyData} />,
-      () => fetchKeyBackupVersion(),
+      () => fetchKeyBackupVersion()
     );
   };
 
   const openRestoreKeyBackup = async () => {
-    const keyData = await accessSecretStorage('Restore Key Backup');
+    const keyData = await accessSecretStorage("Restore Key Backup");
     if (keyData === null) return;
 
     openReusableDialog(
-      <Text variant="s1" weight="medium">Restore Key Backup</Text>,
-      () => <RestoreKeyBackupDialog keyData={keyData} />,
+      <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 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>;
+    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" />
+        <IconButton
+          src={DownloadIC}
+          variant="positive"
+          onClick={openRestoreKeyBackup}
+          tooltip="Restore backup"
+        />
+        <IconButton
+          src={BinIC}
+          onClick={openDeleteKeyBackup}
+          tooltip="Delete backup"
+        />
       </>
     );
   };
@@ -266,12 +297,16 @@ function KeyBackup() {
   return (
     <SettingTile
       title="Encrypted messages backup"
-      content={(
+      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>
+          <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)' }}
+              style={{ marginTop: "var(--sp-ultra-tight)" }}
               rounded
               variant="caution"
               iconSrc={InfoIC}
@@ -279,7 +314,7 @@ function KeyBackup() {
             />
           )}
         </>
-      )}
+      }
       options={isCSEnabled ? renderOptions() : null}
     />
   );
diff --git a/src/app/organisms/settings/KeyBackup.scss b/src/app/organisms/settings/KeyBackup.scss
index 1f2b9b66..05927133 100644
--- a/src/app/organisms/settings/KeyBackup.scss
+++ b/src/app/organisms/settings/KeyBackup.scss
@@ -6,7 +6,7 @@
     padding: var(--sp-normal) 0;
     display: flex;
     align-items: center;
-  
+
     & > .text {
       margin: 0 var(--sp-normal);
     }
@@ -24,4 +24,4 @@
   & > .text {
     padding-bottom: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/settings/SecretStorageAccess.jsx b/src/app/organisms/settings/SecretStorageAccess.jsx
index e4fceb07..868c95f6 100644
--- a/src/app/organisms/settings/SecretStorageAccess.jsx
+++ b/src/app/organisms/settings/SecretStorageAccess.jsx
@@ -1,19 +1,23 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './SecretStorageAccess.scss';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+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 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 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';
+import { useStore } from "../../hooks/useStore";
 
 function SecretStorageAccess({ onComplete }) {
   const mx = initMatrix.matrixClient;
@@ -39,7 +43,7 @@ function SecretStorageAccess({ onComplete }) {
 
       if (!mountStore.getItem()) return;
       if (!isCorrect) {
-        setError(`Incorrect Security ${key ? 'Key' : 'Phrase'}`);
+        setError(`Incorrect Security ${key ? "Key" : "Phrase"}`);
         setProcess(false);
         return;
       }
@@ -51,7 +55,7 @@ function SecretStorageAccess({ onComplete }) {
       });
     } catch (e) {
       if (!mountStore.getItem()) return;
-      setError(`Incorrect Security ${key ? 'Key' : 'Phrase'}`);
+      setError(`Incorrect Security ${key ? "Key" : "Phrase"}`);
       setProcess(false);
     }
   };
@@ -59,7 +63,7 @@ function SecretStorageAccess({ onComplete }) {
   const handleForm = async (e) => {
     e.preventDefault();
     const password = e.target.password.value;
-    if (password.trim() === '') return;
+    if (password.trim() === "") return;
     const data = {};
     if (withPhrase) data.phrase = password;
     else data.key = password;
@@ -76,7 +80,7 @@ function SecretStorageAccess({ onComplete }) {
       <form onSubmit={handleForm}>
         <Input
           name="password"
-          label={`Security ${withPhrase ? 'Phrase' : 'Key'}`}
+          label={`Security ${withPhrase ? "Phrase" : "Key"}`}
           type="password"
           onChange={handleChange}
           required
@@ -84,8 +88,14 @@ function SecretStorageAccess({ onComplete }) {
         {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>}
+            <Button variant="primary" type="submit">
+              Continue
+            </Button>
+            {isPassphrase && (
+              <Button onClick={toggleWithPhrase}>{`Use Security ${
+                withPhrase ? "Key" : "Phrase"
+              }`}</Button>
+            )}
           </div>
         )}
       </form>
@@ -101,33 +111,36 @@ SecretStorageAccess.propTypes = {
  * @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);
-  };
+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);
-    },
-  );
-});
+    openReusableDialog(
+      <Text variant="s1" weight="medium">
+        {title}
+      </Text>,
+      (requestClose) => (
+        <SecretStorageAccess
+          onComplete={(keyData) => {
+            handleComplete(keyData);
+            requestClose(requestClose);
+          }}
+        />
+      ),
+      () => {
+        if (!isCompleted) resolve(null);
+      }
+    );
+  });
 
 export default SecretStorageAccess;
diff --git a/src/app/organisms/settings/SecretStorageAccess.scss b/src/app/organisms/settings/SecretStorageAccess.scss
index a7c0a9f6..0ee6a7f0 100644
--- a/src/app/organisms/settings/SecretStorageAccess.scss
+++ b/src/app/organisms/settings/SecretStorageAccess.scss
@@ -17,4 +17,4 @@
   & .donut-spinner {
     margin-top: var(--sp-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index a0869b61..8f65f6d0 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -1,48 +1,55 @@
-import React, { useState, useEffect } from 'react';
-import './Settings.scss';
+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 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,
-} from '../../../client/action/settings';
-import { usePermission } from '../../hooks/usePermission';
+  toggleSystemTheme,
+  toggleMarkdown,
+  toggleMembershipEvents,
+  toggleNickAvatarEvents,
+  toggleNotifications,
+  toggleNotificationSounds,
+} from "../../../client/action/settings";
+import { usePermission } from "../../hooks/usePermission";
 
-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 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 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 { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';
-import GlobalNotification from '../../molecules/global-notification/GlobalNotification';
-import KeywordNotification from '../../molecules/global-notification/KeywordNotification';
-import IgnoreUserList from '../../molecules/global-notification/IgnoreUserList';
+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 {
+  ImagePackUser,
+  ImagePackGlobal,
+} from "../../molecules/image-pack/ImagePack";
+import GlobalNotification from "../../molecules/global-notification/GlobalNotification";
+import KeywordNotification from "../../molecules/global-notification/KeywordNotification";
+import IgnoreUserList from "../../molecules/global-notification/IgnoreUserList";
 
-import ProfileEditor from '../profile-editor/ProfileEditor';
-import CrossSigning from './CrossSigning';
-import KeyBackup from './KeyBackup';
-import DeviceManage from './DeviceManage';
+import ProfileEditor from "../profile-editor/ProfileEditor";
+import CrossSigning from "./CrossSigning";
+import KeyBackup from "./KeyBackup";
+import DeviceManage from "./DeviceManage";
 
-import SunIC from '../../../../public/res/ic/outlined/sun.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
-import LockIC from '../../../../public/res/ic/outlined/lock.svg';
-import BellIC from '../../../../public/res/ic/outlined/bell.svg';
-import InfoIC from '../../../../public/res/ic/outlined/info.svg';
-import PowerIC from '../../../../public/res/ic/outlined/power.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import SunIC from "../../../../public/res/ic/outlined/sun.svg";
+import EmojiIC from "../../../../public/res/ic/outlined/emoji.svg";
+import LockIC from "../../../../public/res/ic/outlined/lock.svg";
+import BellIC from "../../../../public/res/ic/outlined/bell.svg";
+import InfoIC from "../../../../public/res/ic/outlined/info.svg";
+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';
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
+import CinnySVG from "../../../../public/res/svg/cinny.svg";
+import { confirmDialog } from "../../molecules/confirm-dialog/ConfirmDialog";
 
 function AppearanceSection() {
   const [, updateState] = useState({});
@@ -53,24 +60,31 @@ function AppearanceSection() {
         <MenuHeader>Theme</MenuHeader>
         <SettingTile
           title="Follow system theme"
-          options={(
+          options={
             <Toggle
               isActive={settings.useSystemTheme}
-              onToggle={() => { toggleSystemTheme(); updateState({}); }}
+              onToggle={() => {
+                toggleSystemTheme();
+                updateState({});
+              }}
             />
-          )}
-          content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>}
+          }
+          content={
+            <Text variant="b3">
+              Use light or dark mode based on the system settings.
+            </Text>
+          }
         />
         <SettingTile
           title="Theme"
-          content={(
+          content={
             <SegmentedControls
               selected={settings.useSystemTheme ? -1 : settings.getThemeIndex()}
               segments={[
-                { text: 'Light' },
-                { text: 'Silver' },
-                { text: 'Dark' },
-                { text: 'Butter' },
+                { text: "Light" },
+                { text: "Silver" },
+                { text: "Dark" },
+                { text: "Butter" },
               ]}
               onSelect={(index) => {
                 if (settings.useSystemTheme) toggleSystemTheme();
@@ -78,40 +92,62 @@ function AppearanceSection() {
                 updateState({});
               }}
             />
-        )}
+          }
         />
       </div>
       <div className="settings-appearance__card">
         <MenuHeader>Room messages</MenuHeader>
         <SettingTile
           title="Markdown formatting"
-          options={(
+          options={
             <Toggle
               isActive={settings.isMarkdown}
-              onToggle={() => { toggleMarkdown(); updateState({}); }}
+              onToggle={() => {
+                toggleMarkdown();
+                updateState({});
+              }}
             />
-          )}
-          content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
+          }
+          content={
+            <Text variant="b3">
+              Format messages with markdown syntax before sending.
+            </Text>
+          }
         />
         <SettingTile
           title="Hide membership events"
-          options={(
+          options={
             <Toggle
               isActive={settings.hideMembershipEvents}
-              onToggle={() => { toggleMembershipEvents(); updateState({}); }}
+              onToggle={() => {
+                toggleMembershipEvents();
+                updateState({});
+              }}
             />
-          )}
-          content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
+          }
+          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={(
+          options={
             <Toggle
               isActive={settings.hideNickAvatarEvents}
-              onToggle={() => { toggleNickAvatarEvents(); updateState({}); }}
+              onToggle={() => {
+                toggleNickAvatarEvents();
+                updateState({});
+              }}
             />
-          )}
-          content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
+          }
+          content={
+            <Text variant="b3">
+              Hide nick and avatar change messages from room timeline.
+            </Text>
+          }
         />
       </div>
     </div>
@@ -119,16 +155,23 @@ function AppearanceSection() {
 }
 
 function NotificationsSection() {
-  const [permission, setPermission] = usePermission('notifications', window.Notification?.permission);
+  const [permission, setPermission] = usePermission(
+    "notifications",
+    window.Notification?.permission
+  );
 
   const [, updateState] = useState({});
 
   const renderOptions = () => {
     if (window.Notification === undefined) {
-      return <Text className="settings-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') {
+    if (permission === "granted") {
       return (
         <Toggle
           isActive={settings._showNotifications}
@@ -144,7 +187,9 @@ function NotificationsSection() {
     return (
       <Button
         variant="primary"
-        onClick={() => window.Notification.requestPermission().then(setPermission)}
+        onClick={() =>
+          window.Notification.requestPermission().then(setPermission)
+        }
       >
         Request permission
       </Button>
@@ -158,17 +203,26 @@ function NotificationsSection() {
         <SettingTile
           title="Desktop notification"
           options={renderOptions()}
-          content={<Text variant="b3">Show desktop notification when new messages arrive.</Text>}
+          content={
+            <Text variant="b3">
+              Show desktop notification when new messages arrive.
+            </Text>
+          }
         />
         <SettingTile
           title="Notification Sound"
-          options={(
+          options={
             <Toggle
               isActive={settings.isNotificationSounds}
-              onToggle={() => { toggleNotificationSounds(); updateState({}); }}
+              onToggle={() => {
+                toggleNotificationSounds();
+                updateState({});
+              }}
             />
-            )}
-          content={<Text variant="b3">Play sound when new messages arrive.</Text>}
+          }
+          content={
+            <Text variant="b3">Play sound when new messages arrive.</Text>
+          }
         />
       </div>
       <GlobalNotification />
@@ -181,8 +235,12 @@ function NotificationsSection() {
 function EmojiSection() {
   return (
     <>
-      <div className="settings-emoji__card"><ImagePackUser /></div>
-      <div className="settings-emoji__card"><ImagePackGlobal /></div>
+      <div className="settings-emoji__card">
+        <ImagePackUser />
+      </div>
+      <div className="settings-emoji__card">
+        <ImagePackGlobal />
+      </div>
     </>
   );
 }
@@ -200,21 +258,29 @@ function SecuritySection() {
         <MenuHeader>Export/Import encryption keys</MenuHeader>
         <SettingTile
           title="Export E2E room keys"
-          content={(
+          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>
+              <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={(
+          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>
+              <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>
@@ -231,14 +297,28 @@ function AboutSection() {
           <div>
             <Text variant="h2" weight="medium">
               Cinny
-              <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
+              <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__btns">
-              <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
-              <Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button>
-              <Button onClick={() => initMatrix.clearCacheAndReload()} variant="danger">Clear cache & reload</Button>
+              <Button
+                onClick={() => window.open("https://github.com/ajbura/cinny")}
+              >
+                Source code
+              </Button>
+              <Button onClick={() => window.open("https://cinny.in/#sponsor")}>
+                Support
+              </Button>
+              <Button
+                onClick={() => initMatrix.clearCacheAndReload()}
+                variant="danger"
+              >
+                Clear cache & reload
+              </Button>
             </div>
           </div>
         </div>
@@ -248,16 +328,94 @@ function AboutSection() {
         <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>
+              {/* 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>
+              {/* 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>
+              {/* 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>
@@ -267,38 +425,44 @@ function AboutSection() {
 }
 
 export const tabText = {
-  APPEARANCE: 'Appearance',
-  NOTIFICATIONS: 'Notifications',
-  EMOJI: 'Emoji',
-  SECURITY: 'Security',
-  ABOUT: 'About',
+  APPEARANCE: "Appearance",
+  NOTIFICATIONS: "Notifications",
+  EMOJI: "Emoji",
+  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.EMOJI,
-  iconSrc: EmojiIC,
-  disabled: false,
-  render: () => <EmojiSection />,
-}, {
-  text: tabText.SECURITY,
-  iconSrc: LockIC,
-  disabled: false,
-  render: () => <SecuritySection />,
-}, {
-  text: tabText.ABOUT,
-  iconSrc: InfoIC,
-  disabled: false,
-  render: () => <AboutSection />,
-}];
+const tabItems = [
+  {
+    text: tabText.APPEARANCE,
+    iconSrc: SunIC,
+    disabled: false,
+    render: () => <AppearanceSection />,
+  },
+  {
+    text: tabText.NOTIFICATIONS,
+    iconSrc: BellIC,
+    disabled: false,
+    render: () => <NotificationsSection />,
+  },
+  {
+    text: tabText.EMOJI,
+    iconSrc: EmojiIC,
+    disabled: false,
+    render: () => <EmojiSection />,
+  },
+  {
+    text: tabText.SECURITY,
+    iconSrc: LockIC,
+    disabled: false,
+    render: () => <SecuritySection />,
+  },
+  {
+    text: tabText.ABOUT,
+    iconSrc: InfoIC,
+    disabled: false,
+    render: () => <AboutSection />,
+  },
+];
 
 function useWindowToggle(setSelectedTab) {
   const [isOpen, setIsOpen] = useState(false);
@@ -311,7 +475,10 @@ function useWindowToggle(setSelectedTab) {
     };
     navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
     return () => {
-      navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
+      navigation.removeListener(
+        cons.events.navigation.SETTINGS_OPENED,
+        openSettings
+      );
     };
   }, []);
 
@@ -326,7 +493,14 @@ function Settings() {
 
   const handleTabChange = (tabItem) => setSelectedTab(tabItem);
   const handleLogout = async () => {
-    if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) {
+    if (
+      await confirmDialog(
+        "Logout",
+        "Are you sure that you want to logout your session?",
+        "Logout",
+        "danger"
+      )
+    ) {
       initMatrix.logout();
     }
   };
@@ -335,15 +509,19 @@ function Settings() {
     <PopupWindow
       isOpen={isOpen}
       className="settings-window"
-      title={<Text variant="s1" weight="medium" primary>Settings</Text>}
-      contentOptions={(
+      title={
+        <Text variant="s1" weight="medium" primary>
+          Settings
+        </Text>
+      }
+      contentOptions={
         <>
           <Button variant="danger" iconSrc={PowerIC} onClick={handleLogout}>
             Logout
           </Button>
           <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
         </>
-      )}
+      }
       onRequestClose={requestClose}
     >
       {isOpen && (
@@ -351,11 +529,13 @@ function Settings() {
           <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
           <Tabs
             items={tabItems}
-            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
+            defaultSelected={tabItems.findIndex(
+              (tab) => tab.text === selectedTab.text
+            )}
             onSelect={handleTabChange}
           />
           <div className="settings-window__cards-wrapper">
-            { selectedTab.render() }
+            {selectedTab.render()}
           </div>
         </div>
       )}
diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss
index 1d686cd7..3c407b29 100644
--- a/src/app/organisms/settings/Settings.scss
+++ b/src/app/organisms/settings/Settings.scss
@@ -1,12 +1,12 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/screen';
+@use "../../partials/flex";
+@use "../../partials/dir";
+@use "../../partials/screen";
 
 .settings-window {
   & .pw {
     background-color: var(--bg-surface-low);
   }
-  
+
   .header .btn-danger {
     margin: 0 var(--sp-tight);
     box-shadow: none;
@@ -14,7 +14,7 @@
 
   & .profile-editor {
     padding: var(--sp-loose) var(--sp-extra-loose);
-  } 
+  }
 
   & .tabs {
     position: sticky;
@@ -57,7 +57,7 @@
   @extend .settings-window__card;
 }
 
-.settings-window__cards-wrapper{
+.settings-window__cards-wrapper {
   & .setting-tile {
     margin: 0 var(--sp-normal);
     margin-top: var(--sp-normal);
@@ -79,11 +79,10 @@
   &__branding {
     padding: var(--sp-normal);
     display: flex;
-    
+
     & > div {
       margin: 0 var(--sp-loose);
     }
-    
   }
   &__btns {
     & button {
@@ -91,7 +90,7 @@
       @include dir.side(margin, 0, var(--sp-tight));
     }
   }
-  
+
   &__credits {
     padding: 0 var(--sp-normal);
     & ul {
diff --git a/src/app/organisms/shortcut-spaces/ShortcutSpaces.jsx b/src/app/organisms/shortcut-spaces/ShortcutSpaces.jsx
index 62ec76a3..4ffe47b7 100644
--- a/src/app/organisms/shortcut-spaces/ShortcutSpaces.jsx
+++ b/src/app/organisms/shortcut-spaces/ShortcutSpaces.jsx
@@ -1,35 +1,38 @@
-import React, { useState, useEffect } from 'react';
-import './ShortcutSpaces.scss';
+import React, { useState, useEffect } from "react";
+import "./ShortcutSpaces.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/accountData';
-import { joinRuleToIconSrc } from '../../../util/matrixUtil';
-import { roomIdByAtoZ } from '../../../util/sort';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import {
+  createSpaceShortcut,
+  deleteSpaceShortcut,
+} from "../../../client/action/accountData";
+import { joinRuleToIconSrc } from "../../../util/matrixUtil";
+import { roomIdByAtoZ } from "../../../util/sort";
 
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Checkbox from '../../atoms/button/Checkbox';
-import Spinner from '../../atoms/spinner/Spinner';
-import RoomSelector from '../../molecules/room-selector/RoomSelector';
-import Dialog from '../../molecules/dialog/Dialog';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import IconButton from "../../atoms/button/IconButton";
+import Checkbox from "../../atoms/button/Checkbox";
+import Spinner from "../../atoms/spinner/Spinner";
+import RoomSelector from "../../molecules/room-selector/RoomSelector";
+import Dialog from "../../molecules/dialog/Dialog";
 
-import PinIC from '../../../../public/res/ic/outlined/pin.svg';
-import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import PinIC from "../../../../public/res/ic/outlined/pin.svg";
+import PinFilledIC from "../../../../public/res/ic/filled/pin.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import { useSpaceShortcut } from '../../hooks/useSpaceShortcut';
+import { useSpaceShortcut } from "../../hooks/useSpaceShortcut";
 
 function ShortcutSpacesContent() {
   const mx = initMatrix.matrixClient;
   const { spaces, roomIdToParents } = initMatrix.roomList;
 
   const [spaceShortcut] = useSpaceShortcut();
-  const spaceWithoutShortcut = [...spaces].filter(
-    (spaceId) => !spaceShortcut.includes(spaceId),
-  ).sort(roomIdByAtoZ);
+  const spaceWithoutShortcut = [...spaces]
+    .filter((spaceId) => !spaceShortcut.includes(spaceId))
+    .sort(roomIdByAtoZ);
 
   const [process, setProcess] = useState(null);
   const [selected, setSelected] = useState([]);
@@ -68,7 +71,7 @@ function ShortcutSpacesContent() {
     const parentNames = parentSet
       ? [...parentSet].map((parentId) => mx.getRoom(parentId).name)
       : undefined;
-    const parents = parentNames ? parentNames.join(', ') : null;
+    const parents = parentNames ? parentNames.join(", ") : null;
 
     const toggleSelected = () => toggleSelection(spaceId);
     const deleteShortcut = () => deleteSpaceShortcut(spaceId);
@@ -85,40 +88,50 @@ function ShortcutSpacesContent() {
         notificationCount={0}
         isAlert={false}
         onClick={isShortcut ? deleteShortcut : toggleSelected}
-        options={isShortcut ? (
-          <IconButton
-            src={isShortcut ? PinFilledIC : PinIC}
-            size="small"
-            onClick={deleteShortcut}
-            disabled={process !== null}
-          />
-        ) : (
-          <Checkbox
-            isActive={selected.includes(spaceId)}
-            variant="positive"
-            onToggle={toggleSelected}
-            tabIndex={-1}
-            disabled={process !== null}
-          />
-        )}
+        options={
+          isShortcut ? (
+            <IconButton
+              src={isShortcut ? PinFilledIC : PinIC}
+              size="small"
+              onClick={deleteShortcut}
+              disabled={process !== null}
+            />
+          ) : (
+            <Checkbox
+              isActive={selected.includes(spaceId)}
+              variant="positive"
+              onToggle={toggleSelected}
+              tabIndex={-1}
+              disabled={process !== null}
+            />
+          )
+        }
       />
     );
   };
 
   return (
     <>
-      <Text className="shortcut-spaces__header" variant="b3" weight="bold">Pinned spaces</Text>
+      <Text className="shortcut-spaces__header" variant="b3" weight="bold">
+        Pinned spaces
+      </Text>
       {spaceShortcut.length === 0 && <Text>No pinned spaces</Text>}
       {spaceShortcut.map((spaceId) => renderSpace(spaceId, true))}
-      <Text className="shortcut-spaces__header" variant="b3" weight="bold">Unpinned spaces</Text>
+      <Text className="shortcut-spaces__header" variant="b3" weight="bold">
+        Unpinned spaces
+      </Text>
       {spaceWithoutShortcut.length === 0 && <Text>No unpinned spaces</Text>}
       {spaceWithoutShortcut.map((spaceId) => renderSpace(spaceId, false))}
       {selected.length !== 0 && (
         <div className="shortcut-spaces__footer">
           {process && <Spinner size="small" />}
-          <Text weight="medium">{process || `${selected.length} spaces selected`}</Text>
-          { !process && (
-            <Button onClick={handleAdd} variant="primary">Pin</Button>
+          <Text weight="medium">
+            {process || `${selected.length} spaces selected`}
+          </Text>
+          {!process && (
+            <Button onClick={handleAdd} variant="primary">
+              Pin
+            </Button>
           )}
         </div>
       )}
@@ -133,7 +146,10 @@ function useVisibilityToggle() {
     const handleOpen = () => setIsOpen(true);
     navigation.on(cons.events.navigation.SHORTCUT_SPACES_OPENED, handleOpen);
     return () => {
-      navigation.removeListener(cons.events.navigation.SHORTCUT_SPACES_OPENED, handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.SHORTCUT_SPACES_OPENED,
+        handleOpen
+      );
     };
   }, []);
 
@@ -149,19 +165,17 @@ function ShortcutSpaces() {
     <Dialog
       isOpen={isOpen}
       className="shortcut-spaces"
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
           Pin spaces
         </Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
+      }
       onRequestClose={requestClose}
     >
-      {
-        isOpen
-          ? <ShortcutSpacesContent />
-          : <div />
-      }
+      {isOpen ? <ShortcutSpacesContent /> : <div />}
     </Dialog>
   );
 }
diff --git a/src/app/organisms/shortcut-spaces/ShortcutSpaces.scss b/src/app/organisms/shortcut-spaces/ShortcutSpaces.scss
index 686c8cc0..f09f8817 100644
--- a/src/app/organisms/shortcut-spaces/ShortcutSpaces.scss
+++ b/src/app/organisms/shortcut-spaces/ShortcutSpaces.scss
@@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
+@use "../../partials/dir";
+@use "../../partials/flex";
 
 .shortcut-spaces {
   height: 100%;
@@ -12,7 +12,7 @@
       padding: 0 var(--sp-extra-tight);
     }
   }
-  
+
   &__header {
     margin-top: var(--sp-extra-tight);
     padding: var(--sp-extra-tight);
@@ -39,12 +39,12 @@
     border-top: 1px solid var(--bg-surface-border);
     display: flex;
     align-items: center;
-  
+
     & > .text {
       @extend .cp-fx__item-one;
       padding: 0 var(--sp-tight);
     }
-  
+
     & > button {
       @include dir.side(margin, var(--sp-normal), 0);
     }
diff --git a/src/app/organisms/space-manage/SpaceManage.jsx b/src/app/organisms/space-manage/SpaceManage.jsx
index cf042da4..3be427ab 100644
--- a/src/app/organisms/space-manage/SpaceManage.jsx
+++ b/src/app/organisms/space-manage/SpaceManage.jsx
@@ -1,68 +1,73 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './SpaceManage.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./SpaceManage.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import colorMXID from '../../../util/colorMXID';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
-import RoomsHierarchy from '../../../client/state/RoomsHierarchy';
-import { joinRuleToIconSrc } from '../../../util/matrixUtil';
-import { join } from '../../../client/action/room';
-import { Debounce } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import colorMXID from "../../../util/colorMXID";
+import { selectRoom, selectTab } from "../../../client/action/navigation";
+import RoomsHierarchy from "../../../client/state/RoomsHierarchy";
+import { joinRuleToIconSrc } from "../../../util/matrixUtil";
+import { join } from "../../../client/action/room";
+import { Debounce } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Checkbox from '../../atoms/button/Checkbox';
-import Avatar from '../../atoms/avatar/Avatar';
-import Spinner from '../../atoms/spinner/Spinner';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import Button from "../../atoms/button/Button";
+import IconButton from "../../atoms/button/IconButton";
+import Checkbox from "../../atoms/button/Checkbox";
+import Avatar from "../../atoms/avatar/Avatar";
+import Spinner from "../../atoms/spinner/Spinner";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import PopupWindow from "../../molecules/popup-window/PopupWindow";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
-import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
+import ChevronRightIC from "../../../../public/res/ic/outlined/chevron-right.svg";
+import InfoIC from "../../../../public/res/ic/outlined/info.svg";
 
-import { useForceUpdate } from '../../hooks/useForceUpdate';
-import { useStore } from '../../hooks/useStore';
+import { useForceUpdate } from "../../hooks/useForceUpdate";
+import { useStore } from "../../hooks/useStore";
 
 function SpaceManageBreadcrumb({ path, onSelect }) {
   return (
     <div className="space-manage-breadcrumb__wrapper">
       <ScrollView horizontal vertical={false} invisible>
         <div className="space-manage-breadcrumb">
-          {
-            path.map((item, index) => (
-              <React.Fragment key={item.roomId}>
-                {index > 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
-                <Button onClick={() => onSelect(item.roomId, item.name)}>
-                  <Text variant="b2">{twemojify(item.name)}</Text>
-                </Button>
-              </React.Fragment>
-            ))
-          }
+          {path.map((item, index) => (
+            <React.Fragment key={item.roomId}>
+              {index > 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
+              <Button onClick={() => onSelect(item.roomId, item.name)}>
+                <Text variant="b2">{twemojify(item.name)}</Text>
+              </Button>
+            </React.Fragment>
+          ))}
         </div>
       </ScrollView>
     </div>
   );
 }
 SpaceManageBreadcrumb.propTypes = {
-  path: PropTypes.arrayOf(PropTypes.exact({
-    roomId: PropTypes.string,
-    name: PropTypes.string,
-  })).isRequired,
+  path: PropTypes.arrayOf(
+    PropTypes.exact({
+      roomId: PropTypes.string,
+      name: PropTypes.string,
+    })
+  ).isRequired,
   onSelect: PropTypes.func.isRequired,
 };
 
 function SpaceManageItem({
-  parentId, roomInfo, onSpaceClick, requestClose,
-  isSelected, onSelect, roomHierarchy,
+  parentId,
+  roomInfo,
+  onSpaceClick,
+  requestClose,
+  isSelected,
+  onSelect,
+  roomHierarchy,
 }) {
   const [isExpand, setIsExpand] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
@@ -70,18 +75,30 @@ function SpaceManageItem({
   const { directs } = initMatrix.roomList;
   const mx = initMatrix.matrixClient;
   const parentRoom = mx.getRoom(parentId);
-  const isSpace = roomInfo.room_type === 'm.space';
+  const isSpace = roomInfo.room_type === "m.space";
   const roomId = roomInfo.room_id;
-  const canManage = parentRoom?.currentState.maySendStateEvent('m.space.child', mx.getUserId()) || false;
-  const isSuggested = parentRoom?.currentState.getStateEvents('m.space.child', roomId)?.getContent().suggested === true;
+  const canManage =
+    parentRoom?.currentState.maySendStateEvent(
+      "m.space.child",
+      mx.getUserId()
+    ) || false;
+  const isSuggested =
+    parentRoom?.currentState
+      .getStateEvents("m.space.child", roomId)
+      ?.getContent().suggested === true;
 
   const room = mx.getRoom(roomId);
-  const isJoined = !!(room?.getMyMembership() === 'join' || null);
-  const name = room?.name || roomInfo.name || roomInfo.canonical_alias || roomId;
-  let imageSrc = mx.mxcUrlToHttp(roomInfo.avatar_url, 24, 24, 'crop') || null;
+  const isJoined = !!(room?.getMyMembership() === "join" || null);
+  const name =
+    room?.name || roomInfo.name || roomInfo.canonical_alias || roomId;
+  let imageSrc = mx.mxcUrlToHttp(roomInfo.avatar_url, 24, 24, "crop") || null;
   if (!imageSrc && room) {
-    imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
-    if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+    imageSrc =
+      room
+        .getAvatarFallbackMember()
+        ?.getAvatarUrl(mx.baseUrl, 24, 24, "crop") || null;
+    if (imageSrc === null)
+      imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, "crop") || null;
   }
   const isDM = directs.has(roomId);
 
@@ -106,7 +123,10 @@ function SpaceManageItem({
       iconSrc={
         isDM
           ? null
-          : joinRuleToIconSrc((roomInfo.join_rules || roomInfo.join_rule), isSpace)
+          : joinRuleToIconSrc(
+              roomInfo.join_rules || roomInfo.join_rule,
+              isSpace
+            )
       }
       size="extra-small"
     />
@@ -114,13 +134,16 @@ function SpaceManageItem({
   const roomNameJSX = (
     <Text>
       {twemojify(name)}
-      <Text variant="b3" span>{` • ${roomInfo.num_joined_members} members`}</Text>
+      <Text
+        variant="b3"
+        span
+      >{` • ${roomInfo.num_joined_members} members`}</Text>
     </Text>
   );
 
   const expandBtnJsx = (
     <IconButton
-      variant={isExpand ? 'primary' : 'surface'}
+      variant={isExpand ? "primary" : "surface"}
       size="extra-small"
       src={InfoIC}
       tooltip="Topic"
@@ -130,11 +153,15 @@ function SpaceManageItem({
   );
 
   return (
-    <div
-      className={`space-manage-item${isSpace ? '--space' : ''}`}
-    >
+    <div className={`space-manage-item${isSpace ? "--space" : ""}`}>
       <div>
-        {canManage && <Checkbox isActive={isSelected} onToggle={() => onSelect(roomId)} variant="positive" />}
+        {canManage && (
+          <Checkbox
+            isActive={isSelected}
+            onToggle={() => onSelect(roomId)}
+            variant="positive"
+          />
+        )}
         <button
           className="space-manage-item__btn"
           onClick={isSpace ? () => onSpaceClick(roomId, name) : null}
@@ -145,13 +172,17 @@ function SpaceManageItem({
           {isSuggested && <Text variant="b2">Suggested</Text>}
         </button>
         {roomInfo.topic && expandBtnJsx}
-        {
-          isJoined
-            ? <Button onClick={handleOpen}>Open</Button>
-            : <Button variant="primary" onClick={handleJoin} disabled={isJoining}>{isJoining ? 'Joining...' : 'Join'}</Button>
-        }
+        {isJoined ? (
+          <Button onClick={handleOpen}>Open</Button>
+        ) : (
+          <Button variant="primary" onClick={handleJoin} disabled={isJoining}>
+            {isJoining ? "Joining..." : "Join"}
+          </Button>
+        )}
       </div>
-      {isExpand && roomInfo.topic && <Text variant="b2">{twemojify(roomInfo.topic, undefined, true)}</Text>}
+      {isExpand && roomInfo.topic && (
+        <Text variant="b2">{twemojify(roomInfo.topic, undefined, true)}</Text>
+      )}
     </div>
   );
 }
@@ -172,14 +203,14 @@ function SpaceManageFooter({ parentId, selected }) {
   const { currentState } = room;
 
   const allSuggested = selected.every((roomId) => {
-    const sEvent = currentState.getStateEvents('m.space.child', roomId);
+    const sEvent = currentState.getStateEvents("m.space.child", roomId);
     return !!sEvent?.getContent()?.suggested;
   });
 
   const handleRemove = () => {
     setProcess(`Removing ${selected.length} items`);
     selected.forEach((roomId) => {
-      mx.sendStateEvent(parentId, 'm.space.child', {}, roomId);
+      mx.sendStateEvent(parentId, "m.space.child", {}, roomId);
     });
   };
 
@@ -187,28 +218,32 @@ function SpaceManageFooter({ parentId, selected }) {
     if (isMark) setProcess(`Marking as suggested ${selected.length} items`);
     else setProcess(`Marking as not suggested ${selected.length} items`);
     selected.forEach((roomId) => {
-      const sEvent = room.currentState.getStateEvents('m.space.child', roomId);
+      const sEvent = room.currentState.getStateEvents("m.space.child", roomId);
       if (!sEvent) return;
       const content = { ...sEvent.getContent() };
       if (isMark && content.suggested) return;
       if (!isMark && !content.suggested) return;
       content.suggested = isMark;
-      mx.sendStateEvent(parentId, 'm.space.child', content, roomId);
+      mx.sendStateEvent(parentId, "m.space.child", content, roomId);
     });
   };
 
   return (
     <div className="space-manage__footer">
       {process && <Spinner size="small" />}
-      <Text weight="medium">{process || `${selected.length} item selected`}</Text>
-      { !process && (
+      <Text weight="medium">
+        {process || `${selected.length} item selected`}
+      </Text>
+      {!process && (
         <>
-          <Button onClick={handleRemove} variant="danger">Remove</Button>
+          <Button onClick={handleRemove} variant="danger">
+            Remove
+          </Button>
           <Button
             onClick={() => handleToggleSuggested(!allSuggested)}
-            variant={allSuggested ? 'surface' : 'primary'}
+            variant={allSuggested ? "surface" : "primary"}
           >
-            {allSuggested ? 'Mark as not suggested' : 'Mark as suggested'}
+            {allSuggested ? "Mark as not suggested" : "Mark as suggested"}
           </Button>
         </>
       )}
@@ -265,7 +300,7 @@ function useChildUpdate(roomId, roomsHierarchy) {
     let isMounted = true;
     const handleStateEvent = (event) => {
       if (event.getRoomId() !== roomId) return;
-      if (event.getType() !== 'm.space.child') return;
+      if (event.getType() !== "m.space.child") return;
 
       debounce._(() => {
         if (!isMounted) return;
@@ -273,10 +308,10 @@ function useChildUpdate(roomId, roomsHierarchy) {
         forceUpdate();
       }, 500)();
     };
-    mx.on('RoomState.events', handleStateEvent);
+    mx.on("RoomState.events", handleStateEvent);
     return () => {
       isMounted = false;
-      mx.removeListener('RoomState.events', handleStateEvent);
+      mx.removeListener("RoomState.events", handleStateEvent);
     };
   }, [roomId, roomsHierarchy]);
 }
@@ -339,17 +374,19 @@ function SpaceManageContent({ roomId, requestClose }) {
       {spacePath.length > 1 && (
         <SpaceManageBreadcrumb path={spacePath} onSelect={addPathItem} />
       )}
-      <Text variant="b3" weight="bold">Rooms and spaces</Text>
+      <Text variant="b3" weight="bold">
+        Rooms and spaces
+      </Text>
       <div className="space-manage__content-items">
         {!isLoading && currentHierarchy?.rooms?.length === 1 && (
           <Text>
-            Either the space contains private rooms or you need to join space to view it's rooms.
+            Either the space contains private rooms or you need to join space to
+            view it's rooms.
           </Text>
         )}
-        {currentHierarchy && (currentHierarchy.rooms?.map((roomInfo) => (
-          roomInfo.room_id === currentPath.roomId
-            ? null
-            : (
+        {currentHierarchy &&
+          currentHierarchy.rooms?.map((roomInfo) =>
+            roomInfo.room_id === currentPath.roomId ? null : (
               <SpaceManageItem
                 key={roomInfo.room_id}
                 isSelected={selected.includes(roomInfo.room_id)}
@@ -361,7 +398,7 @@ function SpaceManageContent({ roomId, requestClose }) {
                 onSelect={handleSelected}
               />
             )
-        )))}
+          )}
         {!currentHierarchy && <Text>loading...</Text>}
       </div>
       {currentHierarchy?.canLoadMore && !isLoading && (
@@ -393,7 +430,10 @@ function useWindowToggle() {
     };
     navigation.on(cons.events.navigation.SPACE_MANAGE_OPENED, openSpaceManage);
     return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_MANAGE_OPENED, openSpaceManage);
+      navigation.removeListener(
+        cons.events.navigation.SPACE_MANAGE_OPENED,
+        openSpaceManage
+      );
     };
   }, []);
 
@@ -410,20 +450,25 @@ function SpaceManage() {
     <PopupWindow
       isOpen={roomId !== null}
       className="space-manage"
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
           {roomId && twemojify(room.name)}
-          <span style={{ color: 'var(--tc-surface-low)' }}> — manage rooms</span>
+          <span style={{ color: "var(--tc-surface-low)" }}>
+            {" "}
+            — manage rooms
+          </span>
         </Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
+      }
       onRequestClose={requestClose}
     >
-      {
-        roomId
-          ? <SpaceManageContent roomId={roomId} requestClose={requestClose} />
-          : <div />
-      }
+      {roomId ? (
+        <SpaceManageContent roomId={roomId} requestClose={requestClose} />
+      ) : (
+        <div />
+      )}
     </PopupWindow>
   );
 }
diff --git a/src/app/organisms/space-manage/SpaceManage.scss b/src/app/organisms/space-manage/SpaceManage.scss
index b72c92d8..328621a6 100644
--- a/src/app/organisms/space-manage/SpaceManage.scss
+++ b/src/app/organisms/space-manage/SpaceManage.scss
@@ -1,6 +1,6 @@
-@use '../../partials/text';
-@use '../../partials/dir';
-@use '../../partials/flex';
+@use "../../partials/text";
+@use "../../partials/dir";
+@use "../../partials/flex";
 
 .space-manage {
   & .pw__content-wrapper {
@@ -14,7 +14,7 @@
 
 .space-manage__content {
   margin-bottom: var(--sp-extra-loose);
-  
+
   & > .text {
     margin-top: var(--sp-extra-tight);
     padding: var(--sp-extra-tight) var(--sp-normal);
@@ -27,7 +27,7 @@
       padding: var(--sp-extra-tight);
     }
   }
-  
+
   & > button {
     margin: var(--sp-normal);
   }
@@ -73,7 +73,6 @@
       background-color: var(--bg-surface);
     }
   }
-
 }
 
 .space-manage-item {
@@ -101,8 +100,7 @@
   & .checkbox {
     @include dir.side(margin, 0, var(--sp-tight));
   }
-  
-  
+
   &__btn {
     @extend .cp-fx__item-one;
     display: flex;
@@ -165,4 +163,4 @@
   & > button {
     @include dir.side(margin, var(--sp-normal), 0);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/space-settings/SpaceSettings.jsx b/src/app/organisms/space-settings/SpaceSettings.jsx
index 2c9d6d46..13a1b706 100644
--- a/src/app/organisms/space-settings/SpaceSettings.jsx
+++ b/src/app/organisms/space-settings/SpaceSettings.jsx
@@ -1,70 +1,75 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './SpaceSettings.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./SpaceSettings.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { leave } from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
+import { leave } from "../../../client/action/room";
 import {
   createSpaceShortcut,
   deleteSpaceShortcut,
   categorizeSpace,
   unCategorizeSpace,
-} from '../../../client/action/accountData';
+} from "../../../client/action/accountData";
 
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Tabs from '../../atoms/tabs/Tabs';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import RoomProfile from '../../molecules/room-profile/RoomProfile';
-import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
-import RoomAliases from '../../molecules/room-aliases/RoomAliases';
-import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
-import RoomMembers from '../../molecules/room-members/RoomMembers';
-import RoomEmojis from '../../molecules/room-emojis/RoomEmojis';
+import Text from "../../atoms/text/Text";
+import IconButton from "../../atoms/button/IconButton";
+import Tabs from "../../atoms/tabs/Tabs";
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
+import PopupWindow from "../../molecules/popup-window/PopupWindow";
+import RoomProfile from "../../molecules/room-profile/RoomProfile";
+import RoomVisibility from "../../molecules/room-visibility/RoomVisibility";
+import RoomAliases from "../../molecules/room-aliases/RoomAliases";
+import RoomPermissions from "../../molecules/room-permissions/RoomPermissions";
+import RoomMembers from "../../molecules/room-members/RoomMembers";
+import RoomEmojis from "../../molecules/room-emojis/RoomEmojis";
 
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
-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 CategoryIC from '../../../../public/res/ic/outlined/category.svg';
-import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
+import UserIC from "../../../../public/res/ic/outlined/user.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
+import SettingsIC from "../../../../public/res/ic/outlined/settings.svg";
+import ShieldUserIC from "../../../../public/res/ic/outlined/shield-user.svg";
+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 CategoryIC from "../../../../public/res/ic/outlined/category.svg";
+import CategoryFilledIC from "../../../../public/res/ic/filled/category.svg";
+import EmojiIC from "../../../../public/res/ic/outlined/emoji.svg";
 
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
-import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { confirmDialog } from "../../molecules/confirm-dialog/ConfirmDialog";
+import { useForceUpdate } from "../../hooks/useForceUpdate";
 
 const tabText = {
-  GENERAL: 'General',
-  MEMBERS: 'Members',
-  EMOJIS: 'Emojis',
-  PERMISSIONS: 'Permissions',
+  GENERAL: "General",
+  MEMBERS: "Members",
+  EMOJIS: "Emojis",
+  PERMISSIONS: "Permissions",
 };
 
-const tabItems = [{
-  iconSrc: SettingsIC,
-  text: tabText.GENERAL,
-  disabled: false,
-}, {
-  iconSrc: UserIC,
-  text: tabText.MEMBERS,
-  disabled: false,
-}, {
-  iconSrc: EmojiIC,
-  text: tabText.EMOJIS,
-  disabled: false,
-}, {
-  iconSrc: ShieldUserIC,
-  text: tabText.PERMISSIONS,
-  disabled: false,
-}];
+const tabItems = [
+  {
+    iconSrc: SettingsIC,
+    text: tabText.GENERAL,
+    disabled: false,
+  },
+  {
+    iconSrc: UserIC,
+    text: tabText.MEMBERS,
+    disabled: false,
+  },
+  {
+    iconSrc: EmojiIC,
+    text: tabText.EMOJIS,
+    disabled: false,
+  },
+  {
+    iconSrc: ShieldUserIC,
+    text: tabText.PERMISSIONS,
+    disabled: false,
+  },
+];
 
 function GeneralSettings({ roomId }) {
   const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
@@ -84,7 +89,7 @@ function GeneralSettings({ roomId }) {
           }}
           iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}
         >
-          {isCategorized ? 'Uncategorize subspaces' : 'Categorize subspaces'}
+          {isCategorized ? "Uncategorize subspaces" : "Categorize subspaces"}
         </MenuItem>
         <MenuItem
           onClick={() => {
@@ -94,16 +99,16 @@ function GeneralSettings({ roomId }) {
           }}
           iconSrc={isPinned ? PinFilledIC : PinIC}
         >
-          {isPinned ? 'Unpin from sidebar' : 'Pin to sidebar'}
+          {isPinned ? "Unpin from sidebar" : "Pin to sidebar"}
         </MenuItem>
         <MenuItem
           variant="danger"
           onClick={async () => {
             const isConfirmed = await confirmDialog(
-              'Leave space',
+              "Leave space",
               `Are you sure that you want to leave "${roomName}" space?`,
-              'Leave',
-              'danger',
+              "Leave",
+              "danger"
             );
             if (isConfirmed) leave(roomId);
           }}
@@ -137,9 +142,15 @@ function useWindowToggle(setSelectedTab) {
       const tabItem = tabItems.find((item) => item.text === tab);
       if (tabItem) setSelectedTab(tabItem);
     };
-    navigation.on(cons.events.navigation.SPACE_SETTINGS_OPENED, openSpaceSettings);
+    navigation.on(
+      cons.events.navigation.SPACE_SETTINGS_OPENED,
+      openSpaceSettings
+    );
     return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SETTINGS_OPENED, openSpaceSettings);
+      navigation.removeListener(
+        cons.events.navigation.SPACE_SETTINGS_OPENED,
+        openSpaceSettings
+      );
     };
   }, []);
 
@@ -165,13 +176,18 @@ function SpaceSettings() {
     <PopupWindow
       isOpen={isOpen}
       className="space-settings"
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
           {isOpen && twemojify(room.name)}
-          <span style={{ color: 'var(--tc-surface-low)' }}> — space settings</span>
+          <span style={{ color: "var(--tc-surface-low)" }}>
+            {" "}
+            — space settings
+          </span>
         </Text>
-      )}
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      }
+      contentOptions={
+        <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
+      }
       onRequestClose={requestClose}
     >
       {isOpen && (
@@ -179,14 +195,24 @@ function SpaceSettings() {
           <RoomProfile roomId={roomId} />
           <Tabs
             items={tabItems}
-            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
+            defaultSelected={tabItems.findIndex(
+              (tab) => tab.text === selectedTab.text
+            )}
             onSelect={handleTabChange}
           />
           <div className="space-settings__cards-wrapper">
-            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
-            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
-            {selectedTab.text === tabText.EMOJIS && <RoomEmojis roomId={roomId} />}
-            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
+            {selectedTab.text === tabText.GENERAL && (
+              <GeneralSettings roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.MEMBERS && (
+              <RoomMembers roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.EMOJIS && (
+              <RoomEmojis roomId={roomId} />
+            )}
+            {selectedTab.text === tabText.PERMISSIONS && (
+              <RoomPermissions roomId={roomId} />
+            )}
           </div>
         </div>
       )}
diff --git a/src/app/organisms/space-settings/SpaceSettings.scss b/src/app/organisms/space-settings/SpaceSettings.scss
index d1cf9807..a192e00e 100644
--- a/src/app/organisms/space-settings/SpaceSettings.scss
+++ b/src/app/organisms/space-settings/SpaceSettings.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir.scss';
+@use "../../partials/dir.scss";
 
 .space-settings {
   & .pw {
@@ -7,7 +7,7 @@
 
   & .room-profile {
     padding: var(--sp-loose) var(--sp-extra-loose);
-  } 
+  }
 
   & .tabs {
     position: sticky;
@@ -27,7 +27,7 @@
     @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   }
 }
-  
+
 .space-settings__card {
   margin: var(--sp-normal) 0;
   background-color: var(--bg-surface);
diff --git a/src/app/organisms/sticker-board/StickerBoard.jsx b/src/app/organisms/sticker-board/StickerBoard.jsx
index 91e25918..7528f3b7 100644
--- a/src/app/organisms/sticker-board/StickerBoard.jsx
+++ b/src/app/organisms/sticker-board/StickerBoard.jsx
@@ -1,15 +1,15 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import './StickerBoard.scss';
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import "./StickerBoard.scss";
 
-import initMatrix from '../../../client/initMatrix';
-import { getRelevantPacks } from '../emoji-board/custom-emoji';
+import initMatrix from "../../../client/initMatrix";
+import { getRelevantPacks } from "../emoji-board/custom-emoji";
 
-import Text from '../../atoms/text/Text';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import IconButton from '../../atoms/button/IconButton';
+import Text from "../../atoms/text/Text";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import IconButton from "../../atoms/button/IconButton";
 
 function StickerBoard({ roomId, onSelect }) {
   const mx = initMatrix.matrixClient;
@@ -19,18 +19,17 @@ function StickerBoard({ roomId, onSelect }) {
   const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
   const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
 
-  const packs = getRelevantPacks(
-    mx,
-    [room, ...parentRooms],
-  ).filter((pack) => pack.getStickers().length !== 0);
+  const packs = getRelevantPacks(mx, [room, ...parentRooms]).filter(
+    (pack) => pack.getStickers().length !== 0
+  );
 
   function isTargetNotSticker(target) {
-    return target.classList.contains('sticker-board__sticker') === false;
+    return target.classList.contains("sticker-board__sticker") === false;
   }
   function getStickerData(target) {
-    const mxc = target.getAttribute('data-mx-sticker');
-    const body = target.getAttribute('title');
-    const httpUrl = target.getAttribute('src');
+    const mxc = target.getAttribute("data-mx-sticker");
+    const body = target.getAttribute("title");
+    const httpUrl = target.getAttribute("src");
     return { mxc, body, httpUrl };
   }
   const handleOnSelect = (e) => {
@@ -47,7 +46,9 @@ function StickerBoard({ roomId, onSelect }) {
 
   const renderPack = (pack) => (
     <div className="sticker-board__pack" key={pack.id}>
-      <Text className="sticker-board__pack-header" variant="b2" weight="bold">{pack.displayName ?? 'Unknown'}</Text>
+      <Text className="sticker-board__pack-header" variant="b2" weight="bold">
+        {pack.displayName ?? "Unknown"}
+      </Text>
       <div className="sticker-board__pack-items">
         {pack.getStickers().map((sticker) => (
           <img
@@ -70,13 +71,15 @@ function StickerBoard({ roomId, onSelect }) {
         <ScrollView invisible>
           <div className="sticker-board__sidebar">
             {packs.map((pack, index) => {
-              const src = mx.mxcUrlToHttp(pack.avatarUrl ?? pack.getStickers()[0].mxc);
+              const src = mx.mxcUrlToHttp(
+                pack.avatarUrl ?? pack.getStickers()[0].mxc
+              );
               return (
                 <IconButton
                   key={pack.id}
                   onClick={() => openGroup(index)}
                   src={src}
-                  tooltip={pack.displayName || 'Unknown'}
+                  tooltip={pack.displayName || "Unknown"}
                   tooltipPlacement="left"
                   isImage
                 />
@@ -87,19 +90,14 @@ function StickerBoard({ roomId, onSelect }) {
       )}
       <div className="sticker-board__container">
         <ScrollView autoHide ref={scrollRef}>
-          <div
-            onClick={handleOnSelect}
-            className="sticker-board__content"
-          >
-            {
-              packs.length > 0
-                ? packs.map(renderPack)
-                : (
-                  <div className="sticker-board__empty">
-                    <Text>There is no sticker pack.</Text>
-                  </div>
-                )
-            }
+          <div onClick={handleOnSelect} className="sticker-board__content">
+            {packs.length > 0 ? (
+              packs.map(renderPack)
+            ) : (
+              <div className="sticker-board__empty">
+                <Text>There is no sticker pack.</Text>
+              </div>
+            )}
           </div>
         </ScrollView>
       </div>
diff --git a/src/app/organisms/sticker-board/StickerBoard.scss b/src/app/organisms/sticker-board/StickerBoard.scss
index b4e55130..c18cc7a1 100644
--- a/src/app/organisms/sticker-board/StickerBoard.scss
+++ b/src/app/organisms/sticker-board/StickerBoard.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .sticker-board {
   --sticker-board-height: 390px;
@@ -8,7 +8,7 @@
   display: flex;
 
   & > .scrollbar {
-    width: initial;    
+    width: initial;
     height: var(--sticker-board-height);
   }
 
@@ -40,7 +40,7 @@
       top: 0;
       z-index: 99;
       background-color: var(--bg-surface);
-  
+
       @include dir.side(margin, var(--sp-extra-tight), 0);
       padding: var(--sp-extra-tight) var(--sp-ultra-tight);
       text-transform: uppercase;
@@ -55,7 +55,7 @@
       gap: var(--sp-normal) var(--sp-tight);
 
       img {
-        width: 76px;  
+        width: 76px;
         height: 76px;
         object-fit: contain;
         cursor: pointer;
@@ -71,4 +71,4 @@
     align-items: center;
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/organisms/view-source/ViewSource.jsx b/src/app/organisms/view-source/ViewSource.jsx
index 9bd3334f..7512d90e 100644
--- a/src/app/organisms/view-source/ViewSource.jsx
+++ b/src/app/organisms/view-source/ViewSource.jsx
@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import './ViewSource.scss';
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./ViewSource.scss";
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";
 
-import IconButton from '../../atoms/button/IconButton';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import IconButton from "../../atoms/button/IconButton";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import PopupWindow from "../../molecules/popup-window/PopupWindow";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function ViewSourceBlock({ title, json }) {
   return (
@@ -18,9 +18,7 @@ function ViewSourceBlock({ title, json }) {
       <MenuHeader>{title}</MenuHeader>
       <ScrollView horizontal vertical={false} autoHide>
         <pre className="text text-b1">
-          <code className="language-json">
-            {JSON.stringify(json, null, 2)}
-          </code>
+          <code className="language-json">{JSON.stringify(json, null, 2)}</code>
         </pre>
       </ScrollView>
     </div>
@@ -42,7 +40,10 @@ function ViewSource() {
     };
     navigation.on(cons.events.navigation.VIEWSOURCE_OPENED, loadViewSource);
     return () => {
-      navigation.removeListener(cons.events.navigation.VIEWSOURCE_OPENED, loadViewSource);
+      navigation.removeListener(
+        cons.events.navigation.VIEWSOURCE_OPENED,
+        loadViewSource
+      );
     };
   }, []);
 
@@ -52,7 +53,12 @@ function ViewSource() {
 
   const renderViewSource = () => (
     <div className="view-source">
-      {event.isEncrypted() && <ViewSourceBlock title="Decrypted source" json={event.getEffectiveEvent()} />}
+      {event.isEncrypted() && (
+        <ViewSourceBlock
+          title="Decrypted source"
+          json={event.getEffectiveEvent()}
+        />
+      )}
       <ViewSourceBlock title="Original source" json={event.event} />
     </div>
   );
@@ -63,7 +69,13 @@ function ViewSource() {
       title="View source"
       onAfterClose={handleAfterClose}
       onRequestClose={() => setIsOpen(false)}
-      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+      contentOptions={
+        <IconButton
+          src={CrossIC}
+          onClick={() => setIsOpen(false)}
+          tooltip="Close"
+        />
+      }
     >
       {event ? renderViewSource() : <div />}
     </PopupWindow>
diff --git a/src/app/organisms/view-source/ViewSource.scss b/src/app/organisms/view-source/ViewSource.scss
index 9ceab8b0..c82ab25e 100644
--- a/src/app/organisms/view-source/ViewSource.scss
+++ b/src/app/organisms/view-source/ViewSource.scss
@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .view-source {
   @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
diff --git a/src/app/organisms/welcome/Welcome.jsx b/src/app/organisms/welcome/Welcome.jsx
index 6d135bee..49f9748b 100644
--- a/src/app/organisms/welcome/Welcome.jsx
+++ b/src/app/organisms/welcome/Welcome.jsx
@@ -1,17 +1,30 @@
-import React from 'react';
-import './Welcome.scss';
+import React from "react";
+import "./Welcome.scss";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
 
-import CinnySvg from '../../../../public/res/svg/cinny.svg';
+import CinnySvg from "../../../../public/res/svg/cinny.svg";
 
 function Welcome() {
   return (
     <div className="app-welcome flex--center">
       <div>
-        <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
-        <Text className="app-welcome__heading" variant="h1" weight="medium" primary>Welcome to Cinny</Text>
-        <Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>
+        <img
+          className="app-welcome__logo noselect"
+          src={CinnySvg}
+          alt="Cinny logo"
+        />
+        <Text
+          className="app-welcome__heading"
+          variant="h1"
+          weight="medium"
+          primary
+        >
+          Welcome to Cinny
+        </Text>
+        <Text className="app-welcome__subheading" variant="s1">
+          Yet another matrix client
+        </Text>
       </div>
     </div>
   );
diff --git a/src/app/organisms/welcome/Welcome.scss b/src/app/organisms/welcome/Welcome.scss
index e55bb8ed..1d958380 100644
--- a/src/app/organisms/welcome/Welcome.scss
+++ b/src/app/organisms/welcome/Welcome.scss
@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .app-welcome {
   width: 100%;
@@ -20,4 +20,4 @@
   &__subheading {
     color: var(--tc-surface-normal);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/App.jsx b/src/app/pages/App.jsx
index af7cc29b..2d8adf8f 100644
--- a/src/app/pages/App.jsx
+++ b/src/app/pages/App.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 
-import { isAuthenticated } from '../../client/state/auth';
+import { isAuthenticated } from "../../client/state/auth";
 
-import Auth from '../templates/auth/Auth';
-import Client from '../templates/client/Client';
+import Auth from "../templates/auth/Auth";
+import Client from "../templates/client/Client";
 
 function App() {
   return isAuthenticated() ? <Client /> : <Auth />;
diff --git a/src/app/partials/_dir.scss b/src/app/partials/_dir.scss
index b5d4a696..4eef987d 100644
--- a/src/app/partials/_dir.scss
+++ b/src/app/partials/_dir.scss
@@ -8,19 +8,19 @@
   #{$property}: {
     left: $left;
     right: $right;
-  };
-  
-  [dir=rtl] & {
+  }
+
+  [dir="rtl"] & {
     #{$property}: {
       left: $right;
       right: $left;
-    };
+    }
   }
 }
 
 @mixin prop($property, $ltr, $rtl) {
   #{$property}: $ltr;
-  [dir=rtl] & {
+  [dir="rtl"] & {
     #{$property}: $rtl;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/partials/_screen.scss b/src/app/partials/_screen.scss
index 99a0907b..9487fac0 100644
--- a/src/app/partials/_screen.scss
+++ b/src/app/partials/_screen.scss
@@ -1,4 +1,3 @@
-
 $breakpoint-tablet: 1124px;
 $breakpoint-mobile: 750px;
 
@@ -7,8 +6,7 @@ $breakpoint-mobile: 750px;
     @media screen and (max-width: $breakpoint-mobile) {
       @content;
     }
-  }
-  @else if $deviceBreakpoint==tabletBreakpoint {
+  } @else if $deviceBreakpoint==tabletBreakpoint {
     @media screen and (max-width: $breakpoint-tablet) {
       @content;
     }
diff --git a/src/app/partials/_text.scss b/src/app/partials/_text.scss
index ab5e2805..d6d9f97b 100644
--- a/src/app/partials/_text.scss
+++ b/src/app/partials/_text.scss
@@ -2,4 +2,4 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
\ No newline at end of file
+}
diff --git a/src/app/templates/auth/Auth.jsx b/src/app/templates/auth/Auth.jsx
index 7c211736..202f31b2 100644
--- a/src/app/templates/auth/Auth.jsx
+++ b/src/app/templates/auth/Auth.jsx
@@ -1,48 +1,56 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './Auth.scss';
-import ReCAPTCHA from 'react-google-recaptcha';
-import { Formik } from 'formik';
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./Auth.scss";
+import ReCAPTCHA from "react-google-recaptcha";
+import { Formik } from "formik";
 
-import * as auth from '../../../client/action/auth';
-import cons from '../../../client/state/cons';
-import { Debounce, getUrlPrams } from '../../../util/common';
-import { getBaseUrl } from '../../../util/matrixUtil';
+import * as auth from "../../../client/action/auth";
+import cons from "../../../client/state/cons";
+import { Debounce, getUrlPrams } from "../../../util/common";
+import { getBaseUrl } from "../../../util/matrixUtil";
 
-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 Spinner from '../../atoms/spinner/Spinner';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import Avatar from '../../atoms/avatar/Avatar';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
+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 Spinner from "../../atoms/spinner/Spinner";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import Avatar from "../../atoms/avatar/Avatar";
+import ContextMenu, {
+  MenuItem,
+  MenuHeader,
+} from "../../atoms/context-menu/ContextMenu";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
-import EyeBlindIC from '../../../../public/res/ic/outlined/eye-blind.svg';
-import CinnySvg from '../../../../public/res/svg/cinny.svg';
-import SSOButtons from '../../molecules/sso-buttons/SSOButtons';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import EyeIC from "../../../../public/res/ic/outlined/eye.svg";
+import EyeBlindIC from "../../../../public/res/ic/outlined/eye-blind.svg";
+import CinnySvg from "../../../../public/res/svg/cinny.svg";
+import SSOButtons from "../../molecules/sso-buttons/SSOButtons";
 
 const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
-const BAD_LOCALPART_ERROR = 'Username can only contain characters a-z, 0-9, or \'=_-./\'';
-const USER_ID_TOO_LONG_ERROR = 'Your user ID, including the hostname, can\'t be more than 255 characters long.';
+const BAD_LOCALPART_ERROR =
+  "Username can only contain characters a-z, 0-9, or '=_-./'";
+const USER_ID_TOO_LONG_ERROR =
+  "Your user ID, including the hostname, can't be more than 255 characters long.";
 
-const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/;
-const BAD_PASSWORD_ERROR = 'Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 characters with no space.';
-const CONFIRM_PASSWORD_ERROR = 'Passwords don\'t match.';
+const PASSWORD_STRENGHT_REGEX =
+  /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/;
+const BAD_PASSWORD_ERROR =
+  "Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 characters with no space.";
+const CONFIRM_PASSWORD_ERROR = "Passwords don't match.";
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-const BAD_EMAIL_ERROR = 'Invalid email address';
+const BAD_EMAIL_ERROR = "Invalid email address";
 
 function isValidInput(value, regex) {
-  if (typeof regex === 'string') return regex === value;
+  if (typeof regex === "string") return regex === value;
   return regex.test(value);
 }
 function normalizeUsername(rawUsername) {
-  const noLeadingAt = rawUsername.indexOf('@') === 0 ? rawUsername.substr(1) : rawUsername;
+  const noLeadingAt =
+    rawUsername.indexOf("@") === 0 ? rawUsername.substr(1) : rawUsername;
   return noLeadingAt.trim();
 }
 
@@ -50,11 +58,14 @@ let searchingHs = null;
 function Homeserver({ onChange }) {
   const [hs, setHs] = useState(null);
   const [debounce] = useState(new Debounce());
-  const [process, setProcess] = useState({ isLoading: true, message: 'Loading homeserver list...' });
+  const [process, setProcess] = useState({
+    isLoading: true,
+    message: "Loading homeserver list...",
+  });
   const hsRef = useRef();
 
   const setupHsConfig = async (servername) => {
-    setProcess({ isLoading: true, message: 'Looking for homeserver...' });
+    setProcess({ isLoading: true, message: "Looking for homeserver..." });
     let baseUrl = null;
     baseUrl = await getBaseUrl(servername);
 
@@ -64,41 +75,60 @@ function Homeserver({ onChange }) {
 
     Promise.allSettled([tempClient.loginFlows(), tempClient.register()])
       .then((values) => {
-        const loginFlow = values[0].status === 'fulfilled' ? values[0]?.value : undefined;
-        const registerFlow = values[1].status === 'rejected' ? values[1]?.reason?.data : undefined;
-        if (loginFlow === undefined || registerFlow === undefined) throw new Error();
+        const loginFlow =
+          values[0].status === "fulfilled" ? values[0]?.value : undefined;
+        const registerFlow =
+          values[1].status === "rejected" ? values[1]?.reason?.data : undefined;
+        if (loginFlow === undefined || registerFlow === undefined)
+          throw new Error();
 
         if (searchingHs !== servername) return;
         onChange({ baseUrl, login: loginFlow, register: registerFlow });
         setProcess({ isLoading: false });
-      }).catch(() => {
+      })
+      .catch(() => {
         if (searchingHs !== servername) return;
         onChange(null);
-        setProcess({ isLoading: false, error: 'Unable to connect. Please check your input.' });
+        setProcess({
+          isLoading: false,
+          error: "Unable to connect. Please check your input.",
+        });
       });
   };
 
   useEffect(() => {
     onChange(null);
-    if (hs === null || hs?.selected.trim() === '') return;
+    if (hs === null || hs?.selected.trim() === "") return;
     searchingHs = hs.selected;
     setupHsConfig(hs.selected);
   }, [hs]);
 
   useEffect(async () => {
     const link = window.location.href;
-    const configFileUrl = `${link}${link[link.length - 1] === '/' ? '' : '/'}config.json`;
+    const configFileUrl = `${link}${
+      link[link.length - 1] === "/" ? "" : "/"
+    }config.json`;
     try {
-      const result = await (await fetch(configFileUrl, { method: 'GET' })).json();
+      const result = await (
+        await fetch(configFileUrl, { method: "GET" })
+      ).json();
       const selectedHs = result?.defaultHomeserver;
       const hsList = result?.homeserverList;
       const allowCustom = result?.allowCustomHomeservers ?? true;
-      if (!hsList?.length > 0 || selectedHs < 0 || selectedHs >= hsList?.length) {
+      if (
+        !hsList?.length > 0 ||
+        selectedHs < 0 ||
+        selectedHs >= hsList?.length
+      ) {
         throw new Error();
       }
       setHs({ selected: hsList[selectedHs], list: hsList, allowCustom });
     } catch {
-      setHs({ selected: 'matrix.org', list: ['matrix.org'], allowCustom: true });
+      setHs({
+        selected: "matrix.org",
+        list: ["matrix.org"],
+        allowCustom: true,
+      });
     }
   }, []);
 
@@ -126,26 +156,30 @@ function Homeserver({ onChange }) {
           content={(hideMenu) => (
             <>
               <MenuHeader>Homeserver list</MenuHeader>
-              {
-                hs?.list.map((hsName) => (
-                  <MenuItem
-                    key={hsName}
-                    onClick={() => {
-                      hideMenu();
-                      hsRef.current.value = hsName;
-                      setHs({ ...hs, selected: hsName });
-                    }}
-                  >
-                    {hsName}
-                  </MenuItem>
-                ))
-              }
+              {hs?.list.map((hsName) => (
+                <MenuItem
+                  key={hsName}
+                  onClick={() => {
+                    hideMenu();
+                    hsRef.current.value = hsName;
+                    setHs({ ...hs, selected: hsName });
+                  }}
+                >
+                  {hsName}
+                </MenuItem>
+              ))}
             </>
           )}
-          render={(toggleMenu) => <IconButton onClick={toggleMenu} src={ChevronBottomIC} />}
+          render={(toggleMenu) => (
+            <IconButton onClick={toggleMenu} src={ChevronBottomIC} />
+          )}
         />
       </div>
-      {process.error !== undefined && <Text className="homeserver-form__error" variant="b3">{process.error}</Text>}
+      {process.error !== undefined && (
+        <Text className="homeserver-form__error" variant="b3">
+          {process.error}
+        </Text>
+      )}
       {process.isLoading && (
         <div className="homeserver-form__status flex--center">
           <Spinner size="small" />
@@ -162,17 +196,28 @@ Homeserver.propTypes = {
 function Login({ loginFlow, baseUrl }) {
   const [typeIndex, setTypeIndex] = useState(0);
   const [passVisible, setPassVisible] = useState(false);
-  const loginTypes = ['Username', 'Email'];
-  const isPassword = loginFlow?.filter((flow) => flow.type === 'm.login.password')[0];
-  const ssoProviders = loginFlow?.filter((flow) => flow.type === 'm.login.sso')[0];
+  const loginTypes = ["Username", "Email"];
+  const isPassword = loginFlow?.filter(
+    (flow) => flow.type === "m.login.password"
+  )[0];
+  const ssoProviders = loginFlow?.filter(
+    (flow) => flow.type === "m.login.sso"
+  )[0];
 
   const initialValues = {
-    username: '', password: '', email: '', other: '',
+    username: "",
+    password: "",
+    email: "",
+    other: "",
   };
 
   const validator = (values) => {
     const errors = {};
-    if (typeIndex === 1 && values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
+    if (
+      typeIndex === 1 &&
+      values.email.length > 0 &&
+      !isValidInput(values.email, EMAIL_REGEX)
+    ) {
       errors.email = BAD_EMAIL_ERROR;
     }
     return errors;
@@ -186,33 +231,38 @@ function Login({ loginFlow, baseUrl }) {
       userBaseUrl = await getBaseUrl(userBaseUrl);
     }
 
-    return auth.login(
-      userBaseUrl,
-      typeIndex === 0 ? normalizeUsername(username) : undefined,
-      typeIndex === 1 ? values.email : undefined,
-      values.password,
-    ).then(() => {
-      actions.setSubmitting(true);
-      window.location.reload();
-    }).catch((error) => {
-      let msg = error.message;
-      if (msg === 'Unknown message') msg = 'Please check your credentials';
-      actions.setErrors({
-        password: msg === 'Invalid password' ? msg : undefined,
-        other: msg !== 'Invalid password' ? msg : undefined,
+    return auth
+      .login(
+        userBaseUrl,
+        typeIndex === 0 ? normalizeUsername(username) : undefined,
+        typeIndex === 1 ? values.email : undefined,
+        values.password
+      )
+      .then(() => {
+        actions.setSubmitting(true);
+        window.location.reload();
+      })
+      .catch((error) => {
+        let msg = error.message;
+        if (msg === "Unknown message") msg = "Please check your credentials";
+        actions.setErrors({
+          password: msg === "Invalid password" ? msg : undefined,
+          other: msg !== "Invalid password" ? msg : undefined,
+        });
+        actions.setSubmitting(false);
       });
-      actions.setSubmitting(false);
-    });
   };
 
   return (
     <>
       <div className="auth-form__heading">
-        <Text variant="h2" weight="medium">Login</Text>
+        <Text variant="h2" weight="medium">
+          Login
+        </Text>
         {isPassword && (
           <ContextMenu
             placement="right"
-            content={(hideMenu) => (
+            content={(hideMenu) =>
               loginTypes.map((type, index) => (
                 <MenuItem
                   key={type}
@@ -224,7 +274,7 @@ function Login({ loginFlow, baseUrl }) {
                   {type}
                 </MenuItem>
               ))
-            )}
+            }
             render={(toggleMenu) => (
               <Button onClick={toggleMenu} iconSrc={ChevronBottomIC}>
                 {loginTypes[typeIndex]}
@@ -239,24 +289,73 @@ function Login({ loginFlow, baseUrl }) {
           onSubmit={submitter}
           validate={validator}
         >
-          {({
-            values, errors, handleChange, handleSubmit, isSubmitting,
-          }) => (
+          {({ values, errors, handleChange, handleSubmit, isSubmitting }) => (
             <>
               {isSubmitting && <LoadingScreen message="Login in progress..." />}
               <form className="auth-form" onSubmit={handleSubmit}>
-                {typeIndex === 0 && <Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />}
-                {errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
-                {typeIndex === 1 && <Input values={values.email} name="email" onChange={handleChange} label="Email" type="email" required />}
-                {errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
+                {typeIndex === 0 && (
+                  <Input
+                    values={values.username}
+                    name="username"
+                    onChange={handleChange}
+                    label="Username"
+                    type="username"
+                    required
+                  />
+                )}
+                {errors.username && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.username}
+                  </Text>
+                )}
+                {typeIndex === 1 && (
+                  <Input
+                    values={values.email}
+                    name="email"
+                    onChange={handleChange}
+                    label="Email"
+                    type="email"
+                    required
+                  />
+                )}
+                {errors.email && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.email}
+                  </Text>
+                )}
                 <div className="auth-form__pass-eye-wrapper">
-                  <Input values={values.password} name="password" onChange={handleChange} label="Password" type={passVisible ? 'text' : 'password'} required />
-                  <IconButton onClick={() => setPassVisible(!passVisible)} src={passVisible ? EyeIC : EyeBlindIC} size="extra-small" />
+                  <Input
+                    values={values.password}
+                    name="password"
+                    onChange={handleChange}
+                    label="Password"
+                    type={passVisible ? "text" : "password"}
+                    required
+                  />
+                  <IconButton
+                    onClick={() => setPassVisible(!passVisible)}
+                    src={passVisible ? EyeIC : EyeBlindIC}
+                    size="extra-small"
+                  />
                 </div>
-                {errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
-                {errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
+                {errors.password && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.password}
+                  </Text>
+                )}
+                {errors.other && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.other}
+                  </Text>
+                )}
                 <div className="auth-form__btns">
-                  <Button variant="primary" type="submit" disabled={isSubmitting}>Login</Button>
+                  <Button
+                    variant="primary"
+                    type="submit"
+                    disabled={isSubmitting}
+                  >
+                    Login
+                  </Button>
                 </div>
               </form>
             </>
@@ -275,9 +374,7 @@ function Login({ loginFlow, baseUrl }) {
   );
 }
 Login.propTypes = {
-  loginFlow: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
+  loginFlow: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   baseUrl: PropTypes.string.isRequired,
 };
 
@@ -289,7 +386,9 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
   const [cPassVisible, setCPassVisible] = useState(false);
   const formRef = useRef();
 
-  const ssoProviders = loginFlow?.filter((flow) => flow.type === 'm.login.sso')[0];
+  const ssoProviders = loginFlow?.filter(
+    (flow) => flow.type === "m.login.sso"
+  )[0];
   const isDisabled = registerInfo.errcode !== undefined;
   const { flows, params, session } = registerInfo;
 
@@ -300,28 +399,42 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
   let isDummy = false;
 
   flows?.forEach((flow) => {
-    if (isEmailRequired && flow.stages.indexOf('m.login.email.identity') === -1) isEmailRequired = false;
-    if (!isEmail) isEmail = flow.stages.indexOf('m.login.email.identity') > -1;
-    if (!isRecaptcha) isRecaptcha = flow.stages.indexOf('m.login.recaptcha') > -1;
-    if (!isTerms) isTerms = flow.stages.indexOf('m.login.terms') > -1;
-    if (!isDummy) isDummy = flow.stages.indexOf('m.login.dummy') > -1;
+    if (isEmailRequired && flow.stages.indexOf("m.login.email.identity") === -1)
+      isEmailRequired = false;
+    if (!isEmail) isEmail = flow.stages.indexOf("m.login.email.identity") > -1;
+    if (!isRecaptcha)
+      isRecaptcha = flow.stages.indexOf("m.login.recaptcha") > -1;
+    if (!isTerms) isTerms = flow.stages.indexOf("m.login.terms") > -1;
+    if (!isDummy) isDummy = flow.stages.indexOf("m.login.dummy") > -1;
   });
 
   const initialValues = {
-    username: '', password: '', confirmPassword: '', email: '', other: '',
+    username: "",
+    password: "",
+    confirmPassword: "",
+    email: "",
+    other: "",
   };
 
   const validator = (values) => {
     const errors = {};
     if (values.username.list > 255) errors.username = USER_ID_TOO_LONG_ERROR;
-    if (values.username.length > 0 && !isValidInput(values.username, LOCALPART_SIGNUP_REGEX)) {
+    if (
+      values.username.length > 0 &&
+      !isValidInput(values.username, LOCALPART_SIGNUP_REGEX)
+    ) {
       errors.username = BAD_LOCALPART_ERROR;
     }
-    if (values.password.length > 0 && !isValidInput(values.password, PASSWORD_STRENGHT_REGEX)) {
+    if (
+      values.password.length > 0 &&
+      !isValidInput(values.password, PASSWORD_STRENGHT_REGEX)
+    ) {
       errors.password = BAD_PASSWORD_ERROR;
     }
-    if (values.confirmPassword.length > 0
-      && !isValidInput(values.confirmPassword, values.password)) {
+    if (
+      values.confirmPassword.length > 0 &&
+      !isValidInput(values.confirmPassword, values.password)
+    ) {
       errors.confirmPassword = CONFIRM_PASSWORD_ERROR;
     }
     if (values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
@@ -332,29 +445,49 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
   const submitter = (values, actions) => {
     const tempClient = auth.createTemporaryClient(baseUrl);
     clientSecret = tempClient.generateClientSecret();
-    return tempClient.isUsernameAvailable(values.username)
+    return tempClient
+      .isUsernameAvailable(values.username)
       .then(async (isAvail) => {
         if (!isAvail) {
-          actions.setErrors({ username: 'Username is already taken' });
+          actions.setErrors({ username: "Username is already taken" });
           actions.setSubmitting(false);
           return;
         }
         if (isEmail && values.email.length > 0) {
-          const result = await auth.verifyEmail(baseUrl, values.email, clientSecret, 1);
+          const result = await auth.verifyEmail(
+            baseUrl,
+            values.email,
+            clientSecret,
+            1
+          );
           if (result.errcode) {
-            if (result.errcode === 'M_THREEPID_IN_USE') actions.setErrors({ email: result.error });
+            if (result.errcode === "M_THREEPID_IN_USE")
+              actions.setErrors({ email: result.error });
             else actions.setErrors({ others: result.error || result.message });
             actions.setSubmitting(false);
             return;
           }
           sid = result.sid;
         }
-        setProcess({ type: 'processing', message: 'Registration in progress....' });
+        setProcess({
+          type: "processing",
+          message: "Registration in progress....",
+        });
         actions.setSubmitting(false);
-      }).catch((err) => {
+      })
+      .catch((err) => {
         const msg = err.message || err.error;
-        if (['M_USER_IN_USE', 'M_INVALID_USERNAME', 'M_EXCLUSIVE'].indexOf(err.errcode) > -1) {
-          actions.setErrors({ username: err.errcode === 'M_USER_IN_USE' ? 'Username is already taken' : msg });
+        if (
+          ["M_USER_IN_USE", "M_INVALID_USERNAME", "M_EXCLUSIVE"].indexOf(
+            err.errcode
+          ) > -1
+        ) {
+          actions.setErrors({
+            username:
+              err.errcode === "M_USER_IN_USE"
+                ? "Username is already taken"
+                : msg,
+          });
         } else if (msg) actions.setErrors({ other: msg });
 
         actions.setSubmitting(false);
@@ -369,31 +502,38 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
   };
 
   useEffect(() => {
-    if (process.type !== 'processing') return;
+    if (process.type !== "processing") return;
     const asyncProcess = async () => {
       const [username, password, email] = getInputs();
-      const d = await auth.completeRegisterStage(baseUrl, username, password, { session });
+      const d = await auth.completeRegisterStage(baseUrl, username, password, {
+        session,
+      });
 
-      if (isRecaptcha && !d.completed.includes('m.login.recaptcha')) {
-        const sitekey = params['m.login.recaptcha'].public_key;
-        setProcess({ type: 'm.login.recaptcha', sitekey });
+      if (isRecaptcha && !d.completed.includes("m.login.recaptcha")) {
+        const sitekey = params["m.login.recaptcha"].public_key;
+        setProcess({ type: "m.login.recaptcha", sitekey });
         return;
       }
-      if (isTerms && !d.completed.includes('m.login.terms')) {
-        const pp = params['m.login.terms'].policies.privacy_policy;
+      if (isTerms && !d.completed.includes("m.login.terms")) {
+        const pp = params["m.login.terms"].policies.privacy_policy;
         const url = pp?.en.url || pp[Object.keys(pp)[0]].url;
-        setProcess({ type: 'm.login.terms', url });
+        setProcess({ type: "m.login.terms", url });
         return;
       }
       if (isEmail && email.length > 0) {
-        setProcess({ type: 'm.login.email.identity', email });
+        setProcess({ type: "m.login.email.identity", email });
         return;
       }
       if (isDummy) {
-        const data = await auth.completeRegisterStage(baseUrl, username, password, {
-          type: 'm.login.dummy',
-          session,
-        });
+        const data = await auth.completeRegisterStage(
+          baseUrl,
+          username,
+          password,
+          {
+            type: "m.login.dummy",
+            session,
+          }
+        );
         if (data.done) refreshWindow();
       }
     };
@@ -401,46 +541,76 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
   }, [process]);
 
   const handleRecaptcha = async (value) => {
-    if (typeof value !== 'string') return;
+    if (typeof value !== "string") return;
     const [username, password] = getInputs();
     const d = await auth.completeRegisterStage(baseUrl, username, password, {
-      type: 'm.login.recaptcha',
+      type: "m.login.recaptcha",
       response: value,
       session,
     });
     if (d.done) refreshWindow();
-    else setProcess({ type: 'processing', message: 'Registration in progress...' });
+    else
+      setProcess({
+        type: "processing",
+        message: "Registration in progress...",
+      });
   };
   const handleTerms = async () => {
     const [username, password] = getInputs();
     const d = await auth.completeRegisterStage(baseUrl, username, password, {
-      type: 'm.login.terms',
+      type: "m.login.terms",
       session,
     });
     if (d.done) refreshWindow();
-    else setProcess({ type: 'processing', message: 'Registration in progress...' });
+    else
+      setProcess({
+        type: "processing",
+        message: "Registration in progress...",
+      });
   };
   const handleEmailVerify = async () => {
     const [username, password] = getInputs();
     const d = await auth.completeRegisterStage(baseUrl, username, password, {
-      type: 'm.login.email.identity',
+      type: "m.login.email.identity",
       threepidCreds: { sid, client_secret: clientSecret },
       threepid_creds: { sid, client_secret: clientSecret },
       session,
     });
     if (d.done) refreshWindow();
-    else setProcess({ type: 'processing', message: 'Registration in progress...' });
+    else
+      setProcess({
+        type: "processing",
+        message: "Registration in progress...",
+      });
   };
 
   return (
     <>
-      {process.type === 'processing' && <LoadingScreen message={process.message} />}
-      {process.type === 'm.login.recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={handleRecaptcha} />}
-      {process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
-      {process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
+      {process.type === "processing" && (
+        <LoadingScreen message={process.message} />
+      )}
+      {process.type === "m.login.recaptcha" && (
+        <Recaptcha
+          message="Please check the box below to proceed."
+          sitekey={process.sitekey}
+          onChange={handleRecaptcha}
+        />
+      )}
+      {process.type === "m.login.terms" && (
+        <Terms url={process.url} onSubmit={handleTerms} />
+      )}
+      {process.type === "m.login.email.identity" && (
+        <EmailVerify email={process.email} onContinue={handleEmailVerify} />
+      )}
       <div className="auth-form__heading">
-        {!isDisabled && <Text variant="h2" weight="medium">Register</Text>}
-        {isDisabled && <Text className="auth-form__error">{registerInfo.error}</Text>}
+        {!isDisabled && (
+          <Text variant="h2" weight="medium">
+            Register
+          </Text>
+        )}
+        {isDisabled && (
+          <Text className="auth-form__error">{registerInfo.error}</Text>
+        )}
       </div>
       {!isDisabled && (
         <Formik
@@ -448,29 +618,93 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
           onSubmit={submitter}
           validate={validator}
         >
-          {({
-            values, errors, handleChange, handleSubmit, isSubmitting,
-          }) => (
+          {({ values, errors, handleChange, handleSubmit, isSubmitting }) => (
             <>
-              {process.type === undefined && isSubmitting && <LoadingScreen message="Registration in progress..." />}
+              {process.type === undefined && isSubmitting && (
+                <LoadingScreen message="Registration in progress..." />
+              )}
               <form className="auth-form" ref={formRef} onSubmit={handleSubmit}>
-                <Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />
-                {errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
+                <Input
+                  values={values.username}
+                  name="username"
+                  onChange={handleChange}
+                  label="Username"
+                  type="username"
+                  required
+                />
+                {errors.username && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.username}
+                  </Text>
+                )}
                 <div className="auth-form__pass-eye-wrapper">
-                  <Input values={values.password} name="password" onChange={handleChange} label="Password" type={passVisible ? 'text' : 'password'} required />
-                  <IconButton onClick={() => setPassVisible(!passVisible)} src={passVisible ? EyeIC : EyeBlindIC} size="extra-small" />
+                  <Input
+                    values={values.password}
+                    name="password"
+                    onChange={handleChange}
+                    label="Password"
+                    type={passVisible ? "text" : "password"}
+                    required
+                  />
+                  <IconButton
+                    onClick={() => setPassVisible(!passVisible)}
+                    src={passVisible ? EyeIC : EyeBlindIC}
+                    size="extra-small"
+                  />
                 </div>
-                {errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
+                {errors.password && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.password}
+                  </Text>
+                )}
                 <div className="auth-form__pass-eye-wrapper">
-                  <Input values={values.confirmPassword} name="confirmPassword" onChange={handleChange} label="Confirm password" type={cPassVisible ? 'text' : 'password'} required />
-                  <IconButton onClick={() => setCPassVisible(!cPassVisible)} src={cPassVisible ? EyeIC : EyeBlindIC} size="extra-small" />
+                  <Input
+                    values={values.confirmPassword}
+                    name="confirmPassword"
+                    onChange={handleChange}
+                    label="Confirm password"
+                    type={cPassVisible ? "text" : "password"}
+                    required
+                  />
+                  <IconButton
+                    onClick={() => setCPassVisible(!cPassVisible)}
+                    src={cPassVisible ? EyeIC : EyeBlindIC}
+                    size="extra-small"
+                  />
                 </div>
-                {errors.confirmPassword && <Text className="auth-form__error" variant="b3">{errors.confirmPassword}</Text>}
-                {isEmail && <Input values={values.email} name="email" onChange={handleChange} label={`Email${isEmailRequired ? '' : ' (optional)'}`} type="email" required={isEmailRequired} />}
-                {errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
-                {errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
+                {errors.confirmPassword && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.confirmPassword}
+                  </Text>
+                )}
+                {isEmail && (
+                  <Input
+                    values={values.email}
+                    name="email"
+                    onChange={handleChange}
+                    label={`Email${isEmailRequired ? "" : " (optional)"}`}
+                    type="email"
+                    required={isEmailRequired}
+                  />
+                )}
+                {errors.email && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.email}
+                  </Text>
+                )}
+                {errors.other && (
+                  <Text className="auth-form__error" variant="b3">
+                    {errors.other}
+                  </Text>
+                )}
                 <div className="auth-form__btns">
-                  <Button variant="primary" type="submit" disabled={isSubmitting}>Register</Button>
+                  <Button
+                    variant="primary"
+                    type="submit"
+                    disabled={isSubmitting}
+                  >
+                    Register
+                  </Button>
                 </div>
               </form>
             </>
@@ -489,15 +723,13 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
 }
 Register.propTypes = {
   registerInfo: PropTypes.shape({}).isRequired,
-  loginFlow: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
+  loginFlow: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   baseUrl: PropTypes.string.isRequired,
 };
 
 function AuthCard() {
   const [hsConfig, setHsConfig] = useState(null);
-  const [type, setType] = useState('login');
+  const [type, setType] = useState("login");
 
   const handleHsChange = (info) => {
     console.log(info);
@@ -507,26 +739,29 @@ function AuthCard() {
   return (
     <>
       <Homeserver onChange={handleHsChange} />
-      { hsConfig !== null && (
-        type === 'login'
-          ? <Login loginFlow={hsConfig.login.flows} baseUrl={hsConfig.baseUrl} />
-          : (
-            <Register
-              registerInfo={hsConfig.register}
-              loginFlow={hsConfig.login.flows}
-              baseUrl={hsConfig.baseUrl}
-            />
-          )
-      )}
-      { hsConfig !== null && (
+      {hsConfig !== null &&
+        (type === "login" ? (
+          <Login loginFlow={hsConfig.login.flows} baseUrl={hsConfig.baseUrl} />
+        ) : (
+          <Register
+            registerInfo={hsConfig.register}
+            loginFlow={hsConfig.login.flows}
+            baseUrl={hsConfig.baseUrl}
+          />
+        ))}
+      {hsConfig !== null && (
         <Text variant="b2" className="auth-card__switch flex--center">
-          {`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`}
+          {`${type === "login" ? "Don't have" : "Already have"} an account?`}
           <button
             type="button"
-            style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
-            onClick={() => setType((type === 'login') ? 'register' : 'login')}
+            style={{
+              color: "var(--tc-link)",
+              cursor: "pointer",
+              margin: "0 var(--sp-ultra-tight)",
+            }}
+            onClick={() => setType(type === "login" ? "register" : "login")}
           >
-            { type === 'login' ? ' Register' : ' Login' }
+            {type === "login" ? " Register" : " Login"}
           </button>
         </Text>
       )}
@@ -535,7 +770,7 @@ function AuthCard() {
 }
 
 function Auth() {
-  const [loginToken, setLoginToken] = useState(getUrlPrams('loginToken'));
+  const [loginToken, setLoginToken] = useState(getUrlPrams("loginToken"));
 
   useEffect(async () => {
     if (!loginToken) return;
@@ -548,7 +783,7 @@ function Auth() {
       await auth.loginWithToken(baseUrl, loginToken);
 
       const { href } = window.location;
-      window.location.replace(href.slice(0, href.indexOf('?')));
+      window.location.replace(href.slice(0, href.indexOf("?")));
     } catch {
       setLoginToken(null);
     }
@@ -564,7 +799,9 @@ function Auth() {
               <Header>
                 <Avatar size="extra-small" imageSrc={CinnySvg} />
                 <TitleWrapper>
-                  <Text variant="h2" weight="medium">Cinny</Text>
+                  <Text variant="h2" weight="medium">
+                    Cinny
+                  </Text>
                 </TitleWrapper>
               </Header>
               <div className="auth-card__content">
@@ -576,16 +813,30 @@ function Auth() {
 
         <div className="auth-footer">
           <Text variant="b2">
-            <a href="https://cinny.in" target="_blank" rel="noreferrer">About</a>
+            <a href="https://cinny.in" target="_blank" rel="noreferrer">
+              About
+            </a>
           </Text>
           <Text variant="b2">
-            <a href="https://github.com/ajbura/cinny/releases" target="_blank" rel="noreferrer">{`v${cons.version}`}</a>
+            <a
+              href="https://github.com/ajbura/cinny/releases"
+              target="_blank"
+              rel="noreferrer"
+            >{`v${cons.version}`}</a>
           </Text>
           <Text variant="b2">
-            <a href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">Twitter</a>
+            <a
+              href="https://twitter.com/cinnyapp"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Twitter
+            </a>
           </Text>
           <Text variant="b2">
-            <a href="https://matrix.org" target="_blank" rel="noreferrer">Powered by Matrix</a>
+            <a href="https://matrix.org" target="_blank" rel="noreferrer">
+              Powered by Matrix
+            </a>
           </Text>
         </div>
       </div>
@@ -597,7 +848,7 @@ function LoadingScreen({ message }) {
   return (
     <ProcessWrapper>
       <Spinner />
-      <div style={{ marginTop: 'var(--sp-normal)' }}>
+      <div style={{ marginTop: "var(--sp-normal)" }}>
         <Text variant="b1">{message}</Text>
       </div>
     </ProcessWrapper>
@@ -610,8 +861,10 @@ LoadingScreen.propTypes = {
 function Recaptcha({ message, sitekey, onChange }) {
   return (
     <ProcessWrapper>
-      <div style={{ marginBottom: 'var(--sp-normal)' }}>
-        <Text variant="s1" weight="medium">{message}</Text>
+      <div style={{ marginBottom: "var(--sp-normal)" }}>
+        <Text variant="s1" weight="medium">
+          {message}
+        </Text>
       </div>
       <ReCAPTCHA sitekey={sitekey} onChange={onChange} />
     </ProcessWrapper>
@@ -626,19 +879,49 @@ Recaptcha.propTypes = {
 function Terms({ url, onSubmit }) {
   return (
     <ProcessWrapper>
-      <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
-        <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
-          <Text variant="h2" weight="medium">Agree with terms</Text>
-          <div style={{ marginBottom: 'var(--sp-normal)' }} />
-          <Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text>
-          <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
-            <input style={{ marginRight: '8px' }} id="termsCheckbox" type="checkbox" required />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit();
+        }}
+      >
+        <div style={{ margin: "var(--sp-normal)", maxWidth: "450px" }}>
+          <Text variant="h2" weight="medium">
+            Agree with terms
+          </Text>
+          <div style={{ marginBottom: "var(--sp-normal)" }} />
+          <Text variant="b1">
+            In order to complete registration, you need to agree to the terms
+            and conditions.
+          </Text>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              margin: "var(--sp-normal) 0",
+            }}
+          >
+            <input
+              style={{ marginRight: "8px" }}
+              id="termsCheckbox"
+              type="checkbox"
+              required
+            />
             <Text variant="b1">
-              {'I accept '}
-              <a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank">Terms and Conditions</a>
+              {"I accept "}
+              <a
+                style={{ cursor: "pointer" }}
+                href={url}
+                rel="noreferrer"
+                target="_blank"
+              >
+                Terms and Conditions
+              </a>
             </Text>
           </div>
-          <Button id="termsBtn" type="submit" variant="primary">Submit</Button>
+          <Button id="termsBtn" type="submit" variant="primary">
+            Submit
+          </Button>
         </div>
       </form>
     </ProcessWrapper>
@@ -652,16 +935,20 @@ Terms.propTypes = {
 function EmailVerify({ email, onContinue }) {
   return (
     <ProcessWrapper>
-      <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
-        <Text variant="h2" weight="medium">Verify email</Text>
-        <div style={{ margin: 'var(--sp-normal) 0' }}>
+      <div style={{ margin: "var(--sp-normal)", maxWidth: "450px" }}>
+        <Text variant="h2" weight="medium">
+          Verify email
+        </Text>
+        <div style={{ margin: "var(--sp-normal) 0" }}>
           <Text variant="b1">
-            {'Please check your email '}
+            {"Please check your email "}
             <b>{`(${email})`}</b>
-            {' and validate before continuing further.'}
+            {" and validate before continuing further."}
           </Text>
         </div>
-        <Button variant="primary" onClick={onContinue}>Continue</Button>
+        <Button variant="primary" onClick={onContinue}>
+          Continue
+        </Button>
       </div>
     </ProcessWrapper>
   );
@@ -671,11 +958,7 @@ EmailVerify.propTypes = {
 };
 
 function ProcessWrapper({ children }) {
-  return (
-    <div className="process-wrapper">
-      {children}
-    </div>
-  );
+  return <div className="process-wrapper">{children}</div>;
 }
 ProcessWrapper.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/app/templates/auth/Auth.scss b/src/app/templates/auth/Auth.scss
index 956a2700..ae785d5a 100644
--- a/src/app/templates/auth/Auth.scss
+++ b/src/app/templates/auth/Auth.scss
@@ -1,12 +1,15 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";
 
 .auth__base {
   --pattern-size: 48px;
   min-height: 100%;
   background-color: var(--bg-surface-low);
 
-  background-image: radial-gradient(rgba(0, 0, 0, 6%) 2px, rgba(0, 0, 0, 0%) 2px);
+  background-image: radial-gradient(
+    rgba(0, 0, 0, 6%) 2px,
+    rgba(0, 0, 0, 0%) 2px
+  );
   background-size: var(--pattern-size) var(--pattern-size);
 
   display: flex;
@@ -31,7 +34,9 @@
   }
   & a {
     color: var(--tc-surface-normal);
-    &:hover { text-decoration: underline; }
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 .auth-card {
@@ -42,7 +47,8 @@
   overflow: hidden;
 
   &__content {
-    padding: var(--sp-extra-loose) calc(var(--sp-normal) + var(--sp-extra-loose));
+    padding: var(--sp-extra-loose)
+      calc(var(--sp-normal) + var(--sp-extra-loose));
   }
   &__switch {
     margin-top: var(--sp-loose) !important;
@@ -65,19 +71,21 @@
     & .input {
       background-color: var(--bg-surface);
       @include dir.prop(border-right-width, 0, 1px);
-      @include dir.prop(border-left-width, 1px, 0 );
-      @include dir.prop(border-radius,
+      @include dir.prop(border-left-width, 1px, 0);
+      @include dir.prop(
+        border-radius,
         var(--bo-radius) 0 0 var(--bo-radius),
-        0 var(--bo-radius) var(--bo-radius) 0,
+        0 var(--bo-radius) var(--bo-radius) 0
       );
     }
   }
   & .ic-btn {
     height: 46px;
     border: 1px solid var(--bg-surface-border);
-    @include dir.prop(border-radius,
+    @include dir.prop(
+      border-radius,
       0 var(--bo-radius) var(--bo-radius) 0,
-      var(--bo-radius) 0 0 var(--bo-radius),
+      var(--bo-radius) 0 0 var(--bo-radius)
     );
   }
 
@@ -101,7 +109,7 @@
   &__pass-eye-wrapper {
     margin: var(--sp-tight) 0 var(--sp-ultra-tight);
   }
-  
+
   &__heading {
     display: flex;
     justify-content: space-between;
@@ -113,7 +121,7 @@
     & .ic-btn {
       position: absolute;
       @include dir.prop(right, 6px, unset);
-      @include dir.prop(left, unset, 6px );
+      @include dir.prop(left, unset, 6px);
       bottom: 6px;
       border-radius: 4px;
     }
@@ -141,7 +149,7 @@
   &::before,
   &::after {
     flex: 1;
-    content: '';
+    content: "";
     margin: var(--sp-tight);
     border-bottom: 1px solid var(--bg-surface-border);
   }
@@ -164,10 +172,10 @@
   min-height: 100%;
   width: 100%;
   background-color: var(--bg-surface-low);
-  opacity: .96;
+  opacity: 0.96;
 
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
-}
\ No newline at end of file
+}
diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index d83845b8..b6241b0a 100644
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -1,32 +1,32 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './Client.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./Client.scss";
 
-import { initHotkeys } from '../../../client/event/hotkeys';
-import { initRoomListListener } from '../../../client/event/roomList';
+import { initHotkeys } from "../../../client/event/hotkeys";
+import { initRoomListListener } from "../../../client/event/roomList";
 
-import Text from '../../atoms/text/Text';
-import Spinner from '../../atoms/spinner/Spinner';
-import Navigation from '../../organisms/navigation/Navigation';
-import ContextMenu, { MenuItem } from '../../atoms/context-menu/ContextMenu';
-import IconButton from '../../atoms/button/IconButton';
-import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
-import Room from '../../organisms/room/Room';
-import Windows from '../../organisms/pw/Windows';
-import Dialogs from '../../organisms/pw/Dialogs';
-import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
+import Text from "../../atoms/text/Text";
+import Spinner from "../../atoms/spinner/Spinner";
+import Navigation from "../../organisms/navigation/Navigation";
+import ContextMenu, { MenuItem } from "../../atoms/context-menu/ContextMenu";
+import IconButton from "../../atoms/button/IconButton";
+import ReusableContextMenu from "../../atoms/context-menu/ReusableContextMenu";
+import Room from "../../organisms/room/Room";
+import Windows from "../../organisms/pw/Windows";
+import Dialogs from "../../organisms/pw/Dialogs";
+import EmojiBoardOpener from "../../organisms/emoji-board/EmojiBoardOpener";
 
-import initMatrix from '../../../client/initMatrix';
-import navigation from '../../../client/state/navigation';
-import cons from '../../../client/state/cons';
-import DragDrop from '../../organisms/drag-drop/DragDrop';
+import initMatrix from "../../../client/initMatrix";
+import navigation from "../../../client/state/navigation";
+import cons from "../../../client/state/cons";
+import DragDrop from "../../organisms/drag-drop/DragDrop";
 
-import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import VerticalMenuIC from "../../../../public/res/ic/outlined/vertical-menu.svg";
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
-  const [loadingMsg, setLoadingMsg] = useState('Heating up');
+  const [loadingMsg, setLoadingMsg] = useState("Heating up");
   const [dragCounter, setDragCounter] = useState(0);
-  const classNameHidden = 'client__item-hidden';
+  const classNameHidden = "client__item-hidden";
 
   const navWrapperRef = useRef(null);
   const roomWrapperRef = useRef(null);
@@ -42,20 +42,29 @@ function Client() {
 
   useEffect(() => {
     navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
-    navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    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);
-    });
+    return () => {
+      navigation.removeListener(
+        cons.events.navigation.ROOM_SELECTED,
+        onRoomSelected
+      );
+      navigation.removeListener(
+        cons.events.navigation.NAVIGATION_OPENED,
+        onNavigationSelected
+      );
+    };
   }, []);
 
   useEffect(() => {
     let counter = 0;
     const iId = setInterval(() => {
       const msgList = [
-        'Almost there...',
-        'Looks like you have a lot of stuff to heat up!',
+        "Almost there...",
+        "Looks like you have a lot of stuff to heat up!",
       ];
       if (counter === msgList.length - 1) {
         setLoadingMsg(msgList[msgList.length - 1]);
@@ -65,7 +74,7 @@ function Client() {
       setLoadingMsg(msgList[counter]);
       counter += 1;
     }, 15000);
-    initMatrix.once('init_loading_finished', () => {
+    initMatrix.once("init_loading_finished", () => {
       clearInterval(iId);
       initHotkeys();
       initRoomListListener(initMatrix.roomList);
@@ -80,22 +89,32 @@ function Client() {
         <div className="loading__menu">
           <ContextMenu
             placement="bottom"
-            content={(
+            content={
               <>
                 <MenuItem onClick={() => initMatrix.clearCacheAndReload()}>
                   Clear cache & reload
                 </MenuItem>
                 <MenuItem onClick={() => initMatrix.logout()}>Logout</MenuItem>
               </>
+            }
+            render={(toggle) => (
+              <IconButton
+                size="extra-small"
+                onClick={toggle}
+                src={VerticalMenuIC}
+              />
             )}
-            render={(toggle) => <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />}
           />
         </div>
         <Spinner />
-        <Text className="loading__message" variant="b2">{loadingMsg}</Text>
+        <Text className="loading__message" variant="b2">
+          {loadingMsg}
+        </Text>
 
         <div className="loading__appname">
-          <Text variant="h2" weight="medium">Cinny</Text>
+          <Text variant="h2" weight="medium">
+            Cinny
+          </Text>
         </div>
       </div>
     );
@@ -105,7 +124,7 @@ function Client() {
     if (!e.dataTransfer.types) return false;
 
     for (let i = 0; i < e.dataTransfer.types.length; i += 1) {
-      if (e.dataTransfer.types[i] === 'Files') return true;
+      if (e.dataTransfer.types[i] === "Files") return true;
     }
     return false;
   }
@@ -120,7 +139,7 @@ function Client() {
     e.preventDefault();
 
     if (!navigation.selectedRoomId || modalOpen()) {
-      e.dataTransfer.dropEffect = 'none';
+      e.dataTransfer.dropEffect = "none";
     }
   }
 
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss
index cdb8fcc9..1f249e75 100644
--- a/src/app/templates/client/Client.scss
+++ b/src/app/templates/client/Client.scss
@@ -1,4 +1,4 @@
-@use '../../partials/screen';
+@use "../../partials/screen";
 
 .client-container {
   display: flex;
@@ -7,7 +7,7 @@
 
 .navigation__wrapper {
   width: var(--navigation-width);
-  
+
   @include screen.smallerThan(mobileBreakpoint) {
     width: 100%;
   }
diff --git a/src/client/action/accountData.js b/src/client/action/accountData.js
index 1fb49fbf..135727b3 100644
--- a/src/client/action/accountData.js
+++ b/src/client/action/accountData.js
@@ -1,5 +1,5 @@
-import appDispatcher from '../dispatcher';
-import cons from '../state/cons';
+import appDispatcher from "../dispatcher";
+import cons from "../state/cons";
 
 /**
  * @param {string | string[]} roomId - room id or array of them to add into shortcuts
diff --git a/src/client/action/auth.js b/src/client/action/auth.js
index f9be13bc..c8bd25a9 100644
--- a/src/client/action/auth.js
+++ b/src/client/action/auth.js
@@ -1,5 +1,5 @@
-import * as sdk from 'matrix-js-sdk';
-import cons from '../state/cons';
+import * as sdk from "matrix-js-sdk";
+import cons from "../state/cons";
 
 function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
   localStorage.setItem(cons.secretKey.ACCESS_TOKEN, accessToken);
@@ -15,62 +15,78 @@ function createTemporaryClient(baseUrl) {
 async function startSsoLogin(baseUrl, type, idpId) {
   const client = createTemporaryClient(baseUrl);
   localStorage.setItem(cons.secretKey.BASE_URL, client.baseUrl);
-  window.location.href = client.getSsoLoginUrl(window.location.href, type, idpId);
+  window.location.href = client.getSsoLoginUrl(
+    window.location.href,
+    type,
+    idpId
+  );
 }
 
 async function login(baseUrl, username, email, password) {
   const identifier = {};
   if (username) {
-    identifier.type = 'm.id.user';
+    identifier.type = "m.id.user";
     identifier.user = username;
   } else if (email) {
-    identifier.type = 'm.id.thirdparty';
-    identifier.medium = 'email';
+    identifier.type = "m.id.thirdparty";
+    identifier.medium = "email";
     identifier.address = email;
-  } else throw new Error('Bad Input');
+  } else throw new Error("Bad Input");
 
   const client = createTemporaryClient(baseUrl);
-  const res = await client.login('m.login.password', {
+  const res = await client.login("m.login.password", {
     identifier,
     password,
     initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
   });
 
-  const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
+  const myBaseUrl =
+    res?.well_known?.["m.homeserver"]?.base_url || client.baseUrl;
   updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
 }
 
 async function loginWithToken(baseUrl, token) {
   const client = createTemporaryClient(baseUrl);
 
-  const res = await client.login('m.login.token', {
+  const res = await client.login("m.login.token", {
     token,
     initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
   });
 
-  const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
+  const myBaseUrl =
+    res?.well_known?.["m.homeserver"]?.base_url || client.baseUrl;
   updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
 }
 
 // eslint-disable-next-line camelcase
-async function verifyEmail(baseUrl, email, client_secret, send_attempt, next_link) {
-  const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
-    method: 'POST',
-    body: JSON.stringify({
-      email, client_secret, send_attempt, next_link,
-    }),
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8',
-    },
-    credentials: 'same-origin',
-  });
+async function verifyEmail(
+  baseUrl,
+  email,
+  client_secret,
+  send_attempt,
+  next_link
+) {
+  const res = await fetch(
+    `${baseUrl}/_matrix/client/r0/register/email/requestToken`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        email,
+        client_secret,
+        send_attempt,
+        next_link,
+      }),
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      credentials: "same-origin",
+    }
+  );
   const data = await res.json();
   return data;
 }
 
-async function completeRegisterStage(
-  baseUrl, username, password, auth,
-) {
+async function completeRegisterStage(baseUrl, username, password, auth) {
   const tempClient = createTemporaryClient(baseUrl);
 
   try {
@@ -83,7 +99,12 @@ async function completeRegisterStage(
     const data = { completed: result.completed || [] };
     if (result.access_token) {
       data.done = true;
-      updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
+      updateLocalStore(
+        result.access_token,
+        result.device_id,
+        result.user_id,
+        baseUrl
+      );
     }
     return data;
   } catch (e) {
@@ -91,14 +112,22 @@ async function completeRegisterStage(
     const data = { completed: result.completed || [] };
     if (result.access_token) {
       data.done = true;
-      updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
+      updateLocalStore(
+        result.access_token,
+        result.device_id,
+        result.user_id,
+        baseUrl
+      );
     }
     return data;
   }
 }
 
 export {
-  createTemporaryClient, login, verifyEmail,
-  loginWithToken, startSsoLogin,
+  createTemporaryClient,
+  login,
+  verifyEmail,
+  loginWithToken,
+  startSsoLogin,
   completeRegisterStage,
 };
diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index 4ee78a63..a6d0d6ad 100644
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -1,5 +1,5 @@
-import appDispatcher from '../dispatcher';
-import cons from '../state/cons';
+import appDispatcher from "../dispatcher";
+import cons from "../state/cons";
 
 export function selectTab(tabId) {
   appDispatcher.dispatch({
diff --git a/src/client/action/notifications.js b/src/client/action/notifications.js
index a869632a..4561be01 100644
--- a/src/client/action/notifications.js
+++ b/src/client/action/notifications.js
@@ -1,4 +1,4 @@
-import initMatrix from '../initMatrix';
+import initMatrix from "../initMatrix";
 
 // eslint-disable-next-line import/prefer-default-export
 export async function markAsRead(roomId) {
diff --git a/src/client/action/room.js b/src/client/action/room.js
index 996c2680..7cb449e7 100644
--- a/src/client/action/room.js
+++ b/src/client/action/room.js
@@ -1,7 +1,7 @@
-import initMatrix from '../initMatrix';
-import appDispatcher from '../dispatcher';
-import cons from '../state/cons';
-import { getIdServer } from '../../util/matrixUtil';
+import initMatrix from "../initMatrix";
+import appDispatcher from "../dispatcher";
+import cons from "../state/cons";
+import { getIdServer } from "../../util/matrixUtil";
 
 /**
  * https://github.com/matrix-org/matrix-react-sdk/blob/1e6c6e9d800890c732d60429449bc280de01a647/src/Rooms.js#L73
@@ -11,10 +11,11 @@ import { getIdServer } from '../../util/matrixUtil';
  */
 function addRoomToMDirect(roomId, userId) {
   const mx = initMatrix.matrixClient;
-  const mDirectsEvent = mx.getAccountData('m.direct');
+  const mDirectsEvent = mx.getAccountData("m.direct");
   let userIdToRoomIds = {};
 
-  if (typeof mDirectsEvent !== 'undefined') userIdToRoomIds = mDirectsEvent.getContent();
+  if (typeof mDirectsEvent !== "undefined")
+    userIdToRoomIds = mDirectsEvent.getContent();
 
   // remove it from the lists of any others users
   // (it can only be a DM room for one person)
@@ -38,7 +39,7 @@ function addRoomToMDirect(roomId, userId) {
     userIdToRoomIds[userId] = roomIds;
   }
 
-  return mx.setAccountData('m.direct', userIdToRoomIds);
+  return mx.setAccountData("m.direct", userIdToRoomIds);
 }
 
 /**
@@ -58,7 +59,10 @@ function guessDMRoomTargetId(room, myUserId) {
   room.getJoinedMembers().forEach((member) => {
     if (member.userId === myUserId) return;
 
-    if (typeof oldestMemberTs === 'undefined' || (member.events.member && member.events.member.getTs() < oldestMemberTs)) {
+    if (
+      typeof oldestMemberTs === "undefined" ||
+      (member.events.member && member.events.member.getTs() < oldestMemberTs)
+    ) {
       oldestMember = member;
       oldestMemberTs = member.events.member.getTs();
     }
@@ -69,13 +73,16 @@ function guessDMRoomTargetId(room, myUserId) {
   room.currentState.getMembers().forEach((member) => {
     if (member.userId === myUserId) return;
 
-    if (typeof oldestMemberTs === 'undefined' || (member.events.member && member.events.member.getTs() < oldestMemberTs)) {
+    if (
+      typeof oldestMemberTs === "undefined" ||
+      (member.events.member && member.events.member.getTs() < oldestMemberTs)
+    ) {
       oldestMember = member;
       oldestMemberTs = member.events.member.getTs();
     }
   });
 
-  if (typeof oldestMember === 'undefined') return myUserId;
+  if (typeof oldestMember === "undefined") return myUserId;
   return oldestMember.userId;
 }
 
@@ -97,14 +104,17 @@ function convertToRoom(roomId) {
  */
 async function join(roomIdOrAlias, isDM = false, via = undefined) {
   const mx = initMatrix.matrixClient;
-  const roomIdParts = roomIdOrAlias.split(':');
+  const roomIdParts = roomIdOrAlias.split(":");
   const viaServers = via || [roomIdParts[1]];
 
   try {
     const resultRoom = await mx.joinRoom(roomIdOrAlias, { viaServers });
 
     if (isDM) {
-      const targetUserId = guessDMRoomTargetId(mx.getRoom(resultRoom.roomId), mx.getUserId());
+      const targetUserId = guessDMRoomTargetId(
+        mx.getRoom(resultRoom.roomId),
+        mx.getUserId()
+      );
       await addRoomToMDirect(resultRoom.roomId, targetUserId);
     }
     appDispatcher.dispatch({
@@ -134,7 +144,7 @@ async function leave(roomId) {
       isDM,
     });
   } catch {
-    console.error('Unable to leave room.');
+    console.error("Unable to leave room.");
   }
 }
 
@@ -142,7 +152,7 @@ async function create(options, isDM = false) {
   const mx = initMatrix.matrixClient;
   try {
     const result = await mx.createRoom(options);
-    if (isDM && typeof options.invite?.[0] === 'string') {
+    if (isDM && typeof options.invite?.[0] === "string") {
       await addRoomToMDirect(result.room_id, options.invite[0]);
     }
     appDispatcher.dispatch({
@@ -152,11 +162,17 @@ async function create(options, isDM = false) {
     });
     return result;
   } catch (e) {
-    const errcodes = ['M_UNKNOWN', 'M_BAD_JSON', 'M_ROOM_IN_USE', 'M_INVALID_ROOM_STATE', 'M_UNSUPPORTED_ROOM_VERSION'];
+    const errcodes = [
+      "M_UNKNOWN",
+      "M_BAD_JSON",
+      "M_ROOM_IN_USE",
+      "M_INVALID_ROOM_STATE",
+      "M_UNSUPPORTED_ROOM_VERSION",
+    ];
     if (errcodes.includes(e.errcode)) {
       throw new Error(e);
     }
-    throw new Error('Something went wrong!');
+    throw new Error("Something went wrong!");
   }
 }
 
@@ -164,16 +180,16 @@ async function createDM(userIdOrIds, isEncrypted = true) {
   const options = {
     is_direct: true,
     invite: Array.isArray(userIdOrIds) ? userIdOrIds : [userIdOrIds],
-    visibility: 'private',
-    preset: 'trusted_private_chat',
+    visibility: "private",
+    preset: "trusted_private_chat",
     initial_state: [],
   };
   if (isEncrypted) {
     options.initial_state.push({
-      type: 'm.room.encryption',
-      state_key: '',
+      type: "m.room.encryption",
+      state_key: "",
       content: {
-        algorithm: 'm.megolm.v1.aes-sha2',
+        algorithm: "m.megolm.v1.aes-sha2",
       },
     });
   }
@@ -193,7 +209,7 @@ async function createRoom(opts) {
   const blockFederation = opts.blockFederation ?? false;
 
   const mx = initMatrix.matrixClient;
-  const visibility = joinRule === 'public' ? 'public' : 'private';
+  const visibility = joinRule === "public" ? "public" : "private";
   const options = {
     creation_content: undefined,
     name,
@@ -204,17 +220,17 @@ async function createRoom(opts) {
     power_level_content_override: undefined,
   };
   if (isSpace) {
-    options.creation_content = { type: 'm.space' };
+    options.creation_content = { type: "m.space" };
   }
   if (blockFederation) {
-    options.creation_content = { 'm.federate': false };
+    options.creation_content = { "m.federate": false };
   }
   if (isEncrypted) {
     options.initial_state.push({
-      type: 'm.room.encryption',
-      state_key: '',
+      type: "m.room.encryption",
+      state_key: "",
       content: {
-        algorithm: 'm.megolm.v1.aes-sha2',
+        algorithm: "m.megolm.v1.aes-sha2",
       },
     });
   }
@@ -227,7 +243,7 @@ async function createRoom(opts) {
   }
   if (parentId) {
     options.initial_state.push({
-      type: 'm.space.parent',
+      type: "m.space.parent",
       state_key: parentId,
       content: {
         canonical: true,
@@ -235,22 +251,24 @@ async function createRoom(opts) {
       },
     });
   }
-  if (parentId && joinRule === 'restricted') {
+  if (parentId && joinRule === "restricted") {
     const caps = await mx.getCapabilities();
-    if (caps['m.room_versions'].available?.['9'] !== 'stable') {
+    if (caps["m.room_versions"].available?.["9"] !== "stable") {
       throw new Error("ERROR: The server doesn't support restricted rooms");
     }
-    if (Number(caps['m.room_versions'].default) < 9) {
-      options.room_version = '9';
+    if (Number(caps["m.room_versions"].default) < 9) {
+      options.room_version = "9";
     }
     options.initial_state.push({
-      type: 'm.room.join_rules',
+      type: "m.room.join_rules",
       content: {
-        join_rule: 'restricted',
-        allow: [{
-          type: 'm.room_membership',
-          room_id: parentId,
-        }],
+        join_rule: "restricted",
+        allow: [
+          {
+            type: "m.room_membership",
+            room_id: parentId,
+          },
+        ],
       },
     });
   }
@@ -258,11 +276,16 @@ async function createRoom(opts) {
   const result = await create(options);
 
   if (parentId) {
-    await mx.sendStateEvent(parentId, 'm.space.child', {
-      auto_join: false,
-      suggested: false,
-      via: [getIdServer(mx.getUserId())],
-    }, result.room_id);
+    await mx.sendStateEvent(
+      parentId,
+      "m.space.child",
+      {
+        auto_join: false,
+        suggested: false,
+        via: [getIdServer(mx.getUserId())],
+      },
+      result.room_id
+    );
   }
 
   return result;
@@ -315,43 +338,73 @@ async function setPowerLevel(roomId, userId, powerLevel) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
 
-  const powerlevelEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
+  const powerlevelEvent = room.currentState.getStateEvents(
+    "m.room.power_levels"
+  )[0];
 
-  const result = await mx.setPowerLevel(roomId, userId, powerLevel, powerlevelEvent);
+  const result = await mx.setPowerLevel(
+    roomId,
+    userId,
+    powerLevel,
+    powerlevelEvent
+  );
   return result;
 }
 
 async function setMyRoomNick(roomId, nick) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
-  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
+  const mEvent = room.currentState.getStateEvents(
+    "m.room.member",
+    mx.getUserId()
+  );
   const content = mEvent?.getContent();
   if (!content) return;
-  await mx.sendStateEvent(roomId, 'm.room.member', {
-    ...content,
-    displayname: nick,
-  }, mx.getUserId());
+  await mx.sendStateEvent(
+    roomId,
+    "m.room.member",
+    {
+      ...content,
+      displayname: nick,
+    },
+    mx.getUserId()
+  );
 }
 
 async function setMyRoomAvatar(roomId, mxc) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
-  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
+  const mEvent = room.currentState.getStateEvents(
+    "m.room.member",
+    mx.getUserId()
+  );
   const content = mEvent?.getContent();
   if (!content) return;
-  await mx.sendStateEvent(roomId, 'm.room.member', {
-    ...content,
-    avatar_url: mxc,
-  }, mx.getUserId());
+  await mx.sendStateEvent(
+    roomId,
+    "m.room.member",
+    {
+      ...content,
+      avatar_url: mxc,
+    },
+    mx.getUserId()
+  );
 }
 
 export {
   convertToDm,
   convertToRoom,
-  join, leave,
-  createDM, createRoom,
-  invite, kick, ban, unban,
-  ignore, unignore,
+  join,
+  leave,
+  createDM,
+  createRoom,
+  invite,
+  kick,
+  ban,
+  unban,
+  ignore,
+  unignore,
   setPowerLevel,
-  setMyRoomNick, setMyRoomAvatar,
+  setMyRoomNick,
+  setMyRoomAvatar,
 };
diff --git a/src/client/action/roomTimeline.js b/src/client/action/roomTimeline.js
index 41c62d4f..a8ad450d 100644
--- a/src/client/action/roomTimeline.js
+++ b/src/client/action/roomTimeline.js
@@ -1,10 +1,15 @@
-import initMatrix from '../initMatrix';
+import initMatrix from "../initMatrix";
 
 async function redactEvent(roomId, eventId, reason) {
   const mx = initMatrix.matrixClient;
 
   try {
-    await mx.redactEvent(roomId, eventId, undefined, typeof reason === 'undefined' ? undefined : { reason });
+    await mx.redactEvent(
+      roomId,
+      eventId,
+      undefined,
+      typeof reason === "undefined" ? undefined : { reason }
+    );
     return true;
   } catch (e) {
     throw new Error(e);
@@ -14,21 +19,18 @@ async function redactEvent(roomId, eventId, reason) {
 async function sendReaction(roomId, toEventId, reaction, shortcode) {
   const mx = initMatrix.matrixClient;
   const content = {
-    'm.relates_to': {
+    "m.relates_to": {
       event_id: toEventId,
       key: reaction,
-      rel_type: 'm.annotation',
+      rel_type: "m.annotation",
     },
   };
-  if (typeof shortcode === 'string') content.shortcode = shortcode;
+  if (typeof shortcode === "string") content.shortcode = shortcode;
   try {
-    await mx.sendEvent(roomId, 'm.reaction', content);
+    await mx.sendEvent(roomId, "m.reaction", content);
   } catch (e) {
     throw new Error(e);
   }
 }
 
-export {
-  redactEvent,
-  sendReaction,
-};
+export { redactEvent, sendReaction };
diff --git a/src/client/action/settings.js b/src/client/action/settings.js
index 7b539c8d..0b2a1ce9 100644
--- a/src/client/action/settings.js
+++ b/src/client/action/settings.js
@@ -1,5 +1,5 @@
-import appDispatcher from '../dispatcher';
-import cons from '../state/cons';
+import appDispatcher from "../dispatcher";
+import cons from "../state/cons";
 
 export function toggleSystemTheme() {
   appDispatcher.dispatch({
diff --git a/src/client/dispatcher.js b/src/client/dispatcher.js
index 12a48721..9f6c70c3 100644
--- a/src/client/dispatcher.js
+++ b/src/client/dispatcher.js
@@ -1,4 +1,4 @@
-import { Dispatcher } from 'flux';
+import { Dispatcher } from "flux";
 
 const appDispatcher = new Dispatcher();
 export default appDispatcher;
diff --git a/src/client/event/hotkeys.js b/src/client/event/hotkeys.js
index e59ce3d7..e3ae8cb6 100644
--- a/src/client/event/hotkeys.js
+++ b/src/client/event/hotkeys.js
@@ -1,6 +1,6 @@
-import { openSearch, toggleRoomSettings } from '../action/navigation';
-import navigation from '../state/navigation';
-import { markAsRead } from '../action/notifications';
+import { openSearch, toggleRoomSettings } from "../action/navigation";
+import navigation from "../state/navigation";
+import { markAsRead } from "../action/notifications";
 
 function shouldFocusMessageField(code) {
   // do not focus on F keys
@@ -8,18 +8,18 @@ function shouldFocusMessageField(code) {
 
   // do not focus on numlock/scroll lock
   if (
-    code.metaKey
-    || code.startsWith('OS')
-    || code.startsWith('Meta')
-    || code.startsWith('Shift')
-    || code.startsWith('Alt')
-    || code.startsWith('Control')
-    || code.startsWith('Arrow')
-    || code === 'Tab'
-    || code === 'Space'
-    || code === 'Enter'
-    || code === 'NumLock'
-    || code === 'ScrollLock'
+    code.metaKey ||
+    code.startsWith("OS") ||
+    code.startsWith("Meta") ||
+    code.startsWith("Shift") ||
+    code.startsWith("Alt") ||
+    code.startsWith("Control") ||
+    code.startsWith("Arrow") ||
+    code === "Tab" ||
+    code === "Space" ||
+    code === "Enter" ||
+    code === "NumLock" ||
+    code === "ScrollLock"
   ) {
     return false;
   }
@@ -31,20 +31,22 @@ function listenKeyboard(event) {
   // Ctrl/Cmd +
   if (event.ctrlKey || event.metaKey) {
     // open search modal
-    if (event.key === 'k') {
+    if (event.key === "k") {
       event.preventDefault();
       if (navigation.isRawModalVisible) return;
       openSearch();
     }
 
     // focus message field on paste
-    if (event.key === 'v') {
+    if (event.key === "v") {
       if (navigation.isRawModalVisible) return;
-      const msgTextarea = document.getElementById('message-textarea');
+      const msgTextarea = document.getElementById("message-textarea");
       const { activeElement } = document;
-      if (activeElement !== msgTextarea
-        && ['input', 'textarea'].includes(activeElement.tagName.toLowerCase())
-      ) return;
+      if (
+        activeElement !== msgTextarea &&
+        ["input", "textarea"].includes(activeElement.tagName.toLowerCase())
+      )
+        return;
       msgTextarea?.focus();
     }
   }
@@ -52,7 +54,7 @@ function listenKeyboard(event) {
   if (!event.ctrlKey && !event.altKey && !event.metaKey) {
     if (navigation.isRawModalVisible) return;
 
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
       if (navigation.isRoomSettings) {
         toggleRoomSettings();
         return;
@@ -63,25 +65,29 @@ function listenKeyboard(event) {
       }
     }
 
-    if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase())) {
+    if (
+      ["input", "textarea"].includes(
+        document.activeElement.tagName.toLowerCase()
+      )
+    ) {
       return;
     }
 
     // focus the text field on most keypresses
     if (shouldFocusMessageField(event.code)) {
       // press any key to focus and type in message field
-      const msgTextarea = document.getElementById('message-textarea');
+      const msgTextarea = document.getElementById("message-textarea");
       msgTextarea?.focus();
     }
   }
 }
 
 function initHotkeys() {
-  document.body.addEventListener('keydown', listenKeyboard);
+  document.body.addEventListener("keydown", listenKeyboard);
 }
 
 function removeHotkeys() {
-  document.body.removeEventListener('keydown', listenKeyboard);
+  document.body.removeEventListener("keydown", listenKeyboard);
 }
 
 export { initHotkeys, removeHotkeys };
diff --git a/src/client/event/roomList.js b/src/client/event/roomList.js
index 6592d67f..5cbfa2d8 100644
--- a/src/client/event/roomList.js
+++ b/src/client/event/roomList.js
@@ -1,6 +1,6 @@
-import cons from '../state/cons';
-import navigation from '../state/navigation';
-import { selectTab, selectSpace, selectRoom } from '../action/navigation';
+import cons from "../state/cons";
+import navigation from "../state/navigation";
+import { selectTab, selectSpace, selectRoom } from "../action/navigation";
 
 function initRoomListListener(roomList) {
   const listenRoomLeave = (roomId) => {
diff --git a/src/client/initMatrix.js b/src/client/initMatrix.js
index 420f3154..6efcb620 100644
--- a/src/client/initMatrix.js
+++ b/src/client/initMatrix.js
@@ -1,15 +1,15 @@
-import EventEmitter from 'events';
-import * as sdk from 'matrix-js-sdk';
-import Olm from '@matrix-org/olm';
+import EventEmitter from "events";
+import * as sdk from "matrix-js-sdk";
+import Olm from "@matrix-org/olm";
 // import { logger } from 'matrix-js-sdk/lib/logger';
 
-import { secret } from './state/auth';
-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';
-import navigation from './state/navigation';
+import { secret } from "./state/auth";
+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";
+import navigation from "./state/navigation";
 
 global.Olm = Olm;
 
@@ -32,7 +32,7 @@ class InitMatrix extends EventEmitter {
     const indexedDBStore = new sdk.IndexedDBStore({
       indexedDB: global.indexedDB,
       localStorage: global.localStorage,
-      dbName: 'web-sync-store',
+      dbName: "web-sync-store",
     });
     await indexedDBStore.startup();
 
@@ -41,13 +41,14 @@ class InitMatrix extends EventEmitter {
       accessToken: secret.accessToken,
       userId: secret.userId,
       store: indexedDBStore,
-      cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
+      cryptoStore: new sdk.IndexedDBCryptoStore(
+        global.indexedDB,
+        "crypto-store"
+      ),
       deviceId: secret.deviceId,
       timelineSupport: true,
       cryptoCallbacks,
-      verificationMethods: [
-        'm.sas.v1',
-      ],
+      verificationMethods: ["m.sas.v1"],
     });
 
     await this.matrixClient.initCrypto();
@@ -61,14 +62,14 @@ class InitMatrix extends EventEmitter {
   setupSync() {
     const sync = {
       NULL: () => {
-        console.log('NULL state');
+        console.log("NULL state");
       },
       SYNCING: () => {
-        console.log('SYNCING state');
+        console.log("SYNCING state");
       },
       PREPARED: (prevState) => {
-        console.log('PREPARED state');
-        console.log('Previous state: ', prevState);
+        console.log("PREPARED state");
+        console.log("Previous state: ", prevState);
         // TODO: remove global.initMatrix at end
         global.initMatrix = this;
         if (prevState === null) {
@@ -76,30 +77,30 @@ class InitMatrix extends EventEmitter {
           this.accountData = new AccountData(this.roomList);
           this.roomsInput = new RoomsInput(this.matrixClient, this.roomList);
           this.notifications = new Notifications(this.roomList);
-          this.emit('init_loading_finished');
+          this.emit("init_loading_finished");
           this.notifications._initNoti();
         } else {
           this.notifications?._initNoti();
         }
       },
       RECONNECTING: () => {
-        console.log('RECONNECTING state');
+        console.log("RECONNECTING state");
       },
       CATCHUP: () => {
-        console.log('CATCHUP state');
+        console.log("CATCHUP state");
       },
       ERROR: () => {
-        console.log('ERROR state');
+        console.log("ERROR state");
       },
       STOPPED: () => {
-        console.log('STOPPED state');
+        console.log("STOPPED state");
       },
     };
-    this.matrixClient.on('sync', (state, prevState) => sync[state](prevState));
+    this.matrixClient.on("sync", (state, prevState) => sync[state](prevState));
   }
 
   listenEvents() {
-    this.matrixClient.on('Session.logged_out', async () => {
+    this.matrixClient.on("Session.logged_out", async () => {
       this.matrixClient.stopClient();
       await this.matrixClient.clearStores();
       window.localStorage.clear();
diff --git a/src/client/state/AccountData.js b/src/client/state/AccountData.js
index 6fc811a3..b5b1a652 100644
--- a/src/client/state/AccountData.js
+++ b/src/client/state/AccountData.js
@@ -1,6 +1,6 @@
-import EventEmitter from 'events';
-import appDispatcher from '../dispatcher';
-import cons from './cons';
+import EventEmitter from "events";
+import appDispatcher from "../dispatcher";
+import cons from "./cons";
 
 class AccountData extends EventEmitter {
   constructor(roomList) {
@@ -22,7 +22,9 @@ class AccountData extends EventEmitter {
   }
 
   _getAccountData() {
-    return this.matrixClient.getAccountData(cons.IN_CINNY_SPACES)?.getContent() || {};
+    return (
+      this.matrixClient.getAccountData(cons.IN_CINNY_SPACES)?.getContent() || {}
+    );
   }
 
   _populateSpaceShortcut() {
@@ -81,13 +83,19 @@ class AccountData extends EventEmitter {
           addRoomId(action.roomId);
         }
         this._updateSpaceShortcutData([...this.spaceShortcut]);
-        this.emit(cons.events.accountData.SPACE_SHORTCUT_UPDATED, action.roomId);
+        this.emit(
+          cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+          action.roomId
+        );
       },
       [cons.actions.accountData.DELETE_SPACE_SHORTCUT]: () => {
         if (!this.spaceShortcut.has(action.roomId)) return;
         this.spaceShortcut.delete(action.roomId);
         this._updateSpaceShortcutData([...this.spaceShortcut]);
-        this.emit(cons.events.accountData.SPACE_SHORTCUT_UPDATED, action.roomId);
+        this.emit(
+          cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+          action.roomId
+        );
       },
       [cons.actions.accountData.MOVE_SPACE_SHORTCUTS]: () => {
         const { roomId, toIndex } = action;
@@ -104,20 +112,26 @@ class AccountData extends EventEmitter {
         if (this.categorizedSpaces.has(action.roomId)) return;
         this.categorizedSpaces.add(action.roomId);
         this._updateCategorizedSpacesData([...this.categorizedSpaces]);
-        this.emit(cons.events.accountData.CATEGORIZE_SPACE_UPDATED, action.roomId);
+        this.emit(
+          cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
+          action.roomId
+        );
       },
       [cons.actions.accountData.UNCATEGORIZE_SPACE]: () => {
         if (!this.categorizedSpaces.has(action.roomId)) return;
         this.categorizedSpaces.delete(action.roomId);
         this._updateCategorizedSpacesData([...this.categorizedSpaces]);
-        this.emit(cons.events.accountData.CATEGORIZE_SPACE_UPDATED, action.roomId);
+        this.emit(
+          cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
+          action.roomId
+        );
       },
     };
     actions[action.type]?.();
   }
 
   _listenEvents() {
-    this.matrixClient.on('accountData', (event) => {
+    this.matrixClient.on("accountData", (event) => {
       if (event.getType() !== cons.IN_CINNY_SPACES) return;
       this._populateSpaceShortcut();
       this.emit(cons.events.accountData.SPACE_SHORTCUT_UPDATED);
diff --git a/src/client/state/Notifications.js b/src/client/state/Notifications.js
index db4610a3..e30b95c4 100644
--- a/src/client/state/Notifications.js
+++ b/src/client/state/Notifications.js
@@ -1,37 +1,39 @@
-import EventEmitter from 'events';
-import renderAvatar from '../../app/atoms/avatar/render';
-import { cssColorMXID } from '../../util/colorMXID';
-import { selectRoom } from '../action/navigation';
-import cons from './cons';
-import navigation from './navigation';
-import settings from './settings';
-import { setFavicon } from '../../util/common';
+import EventEmitter from "events";
+import renderAvatar from "../../app/atoms/avatar/render";
+import { cssColorMXID } from "../../util/colorMXID";
+import { selectRoom } from "../action/navigation";
+import cons from "./cons";
+import navigation from "./navigation";
+import settings from "./settings";
+import { setFavicon } from "../../util/common";
 
-import LogoSVG from '../../../public/res/svg/cinny.svg';
-import LogoUnreadSVG from '../../../public/res/svg/cinny-unread.svg';
-import LogoHighlightSVG from '../../../public/res/svg/cinny-highlight.svg';
-import { html, plain } from '../../util/markdown';
+import LogoSVG from "../../../public/res/svg/cinny.svg";
+import LogoUnreadSVG from "../../../public/res/svg/cinny-unread.svg";
+import LogoHighlightSVG from "../../../public/res/svg/cinny-highlight.svg";
+import { html, plain } from "../../util/markdown";
 
 function isNotifEvent(mEvent) {
   const eType = mEvent.getType();
   if (!cons.supportEventTypes.includes(eType)) return false;
-  if (eType === 'm.room.member') return false;
+  if (eType === "m.room.member") return false;
 
   if (mEvent.isRedacted()) return false;
-  if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
+  if (mEvent.getRelation()?.rel_type === "m.replace") return false;
 
   return true;
 }
 
 function isMutedRule(rule) {
-  return rule.actions[0] === 'dont_notify' && rule.conditions[0].kind === 'event_match';
+  return (
+    rule.actions[0] === "dont_notify" &&
+    rule.conditions[0].kind === "event_match"
+  );
 }
 
 function findMutedRule(overrideRules, roomId) {
-  return overrideRules.find((rule) => (
-    rule.rule_id === roomId
-    && isMutedRule(rule)
-  ));
+  return overrideRules.find(
+    (rule) => rule.rule_id === roomId && isMutedRule(rule)
+  );
 }
 
 class Notifications extends EventEmitter {
@@ -63,8 +65,8 @@ class Notifications extends EventEmitter {
       if (this.getNotiType(room.roomId) === cons.notifs.MUTE) return;
       if (this.doesRoomHaveUnread(room) === false) return;
 
-      const total = room.getUnreadNotificationCount('total');
-      const highlight = room.getUnreadNotificationCount('highlight');
+      const total = room.getUnreadNotificationCount("total");
+      const highlight = room.getUnreadNotificationCount("highlight");
       this._setNoti(room.roomId, total ?? 0, highlight ?? 0);
     };
     [...this.roomList.rooms].forEach(addNoti);
@@ -95,25 +97,28 @@ class Notifications extends EventEmitter {
     const mx = this.matrixClient;
     let pushRule;
     try {
-      pushRule = mx.getRoomPushRule('global', roomId);
+      pushRule = mx.getRoomPushRule("global", roomId);
     } catch {
       pushRule = undefined;
     }
 
     if (pushRule === undefined) {
-      const overrideRules = mx.getAccountData('m.push_rules')?.getContent()?.global?.override;
+      const overrideRules = mx.getAccountData("m.push_rules")?.getContent()
+        ?.global?.override;
       if (overrideRules === undefined) return cons.notifs.DEFAULT;
 
       const isMuted = findMutedRule(overrideRules, roomId);
 
       return isMuted ? cons.notifs.MUTE : cons.notifs.DEFAULT;
     }
-    if (pushRule.actions[0] === 'notify') return cons.notifs.ALL_MESSAGES;
+    if (pushRule.actions[0] === "notify") return cons.notifs.ALL_MESSAGES;
     return cons.notifs.MENTIONS_AND_KEYWORDS;
   }
 
   getNoti(roomId) {
-    return this.roomIdToNoti.get(roomId) || { total: 0, highlight: 0, from: null };
+    return (
+      this.roomIdToNoti.get(roomId) || { total: 0, highlight: 0, from: null }
+    );
   }
 
   getTotalNoti(roomId) {
@@ -179,7 +184,12 @@ class Notifications extends EventEmitter {
         noti.from.add(fromId);
       }
       this.roomIdToNoti.set(id, noti);
-      this.emit(cons.events.notifications.NOTI_CHANGED, id, noti.total, prevTotal);
+      this.emit(
+        cons.events.notifications.NOTI_CHANGED,
+        id,
+        noti.total,
+        prevTotal
+      );
     };
 
     const noti = this.getNoti(roomId);
@@ -216,7 +226,12 @@ class Notifications extends EventEmitter {
         this.emit(cons.events.notifications.NOTI_CHANGED, id, null, prevTotal);
       } else {
         this.roomIdToNoti.set(id, noti);
-        this.emit(cons.events.notifications.NOTI_CHANGED, id, noti.total, prevTotal);
+        this.emit(
+          cons.events.notifications.NOTI_CHANGED,
+          id,
+          noti.total,
+          prevTotal
+        );
       }
     };
 
@@ -234,7 +249,11 @@ class Notifications extends EventEmitter {
     const actions = this.matrixClient.getPushActionsForEvent(mEvent);
     if (!actions?.notify) return;
 
-    if (navigation.selectedRoomId === room.roomId && document.visibilityState === 'visible') return;
+    if (
+      navigation.selectedRoomId === room.roomId &&
+      document.visibilityState === "visible"
+    )
+      return;
 
     if (mEvent.isEncrypted()) {
       await mEvent.attemptDecryption(this.matrixClient.crypto);
@@ -252,7 +271,12 @@ class Notifications extends EventEmitter {
       const icon = await renderAvatar({
         text: mEvent.sender.name,
         bgColor: cssColorMXID(mEvent.getSender()),
-        imageSrc: mEvent.sender?.getAvatarUrl(this.matrixClient.baseUrl, iconSize, iconSize, 'crop'),
+        imageSrc: mEvent.sender?.getAvatarUrl(
+          this.matrixClient.baseUrl,
+          iconSize,
+          iconSize,
+          "crop"
+        ),
         size: iconSize,
         borderRadius: 8,
         scale: 8,
@@ -260,9 +284,9 @@ class Notifications extends EventEmitter {
 
       const content = mEvent.getContent();
 
-      const state = { kind: 'notification', onlyPlain: true };
+      const state = { kind: "notification", onlyPlain: true };
       let body;
-      if (content.format === 'org.matrix.custom.html') {
+      if (content.format === "org.matrix.custom.html") {
         body = html(content.formatted_body, state);
       } else {
         body = plain(content.body, state);
@@ -305,20 +329,20 @@ class Notifications extends EventEmitter {
 
   _playNotiSound() {
     if (!this._notiAudio) {
-      this._notiAudio = document.getElementById('notificationSound');
+      this._notiAudio = document.getElementById("notificationSound");
     }
     this._notiAudio.play();
   }
 
   _playInviteSound() {
     if (!this._inviteAudio) {
-      this._inviteAudio = document.getElementById('inviteSound');
+      this._inviteAudio = document.getElementById("inviteSound");
     }
     this._inviteAudio.play();
   }
 
   _listenEvents() {
-    this.matrixClient.on('Room.timeline', (mEvent, room) => {
+    this.matrixClient.on("Room.timeline", (mEvent, room) => {
       if (mEvent.isRedaction()) this._deletePopupNoti(mEvent.event.redacts);
 
       if (room.isSpaceRoom()) return;
@@ -330,8 +354,8 @@ class Notifications extends EventEmitter {
       if (lastTimelineEvent.getId() !== mEvent.getId()) return;
       if (mEvent.getSender() === this.matrixClient.getUserId()) return;
 
-      const total = room.getUnreadNotificationCount('total');
-      const highlight = room.getUnreadNotificationCount('highlight');
+      const total = room.getUnreadNotificationCount("total");
+      const highlight = room.getUnreadNotificationCount("highlight");
 
       if (this.getNotiType(room.roomId) === cons.notifs.MUTE) {
         this.deleteNoti(room.roomId, total ?? 0, highlight ?? 0);
@@ -340,13 +364,13 @@ class Notifications extends EventEmitter {
 
       this._setNoti(room.roomId, total ?? 0, highlight ?? 0);
 
-      if (this.matrixClient.getSyncState() === 'SYNCING') {
+      if (this.matrixClient.getSyncState() === "SYNCING") {
         this._displayPopupNoti(mEvent, room);
       }
     });
 
-    this.matrixClient.on('accountData', (mEvent, oldMEvent) => {
-      if (mEvent.getType() === 'm.push_rules') {
+    this.matrixClient.on("accountData", (mEvent, oldMEvent) => {
+      if (mEvent.getType() === "m.push_rules") {
         const override = mEvent?.getContent()?.global?.override;
         const oldOverride = oldMEvent?.getContent()?.global?.override;
         if (!override || !oldOverride) return;
@@ -364,30 +388,38 @@ class Notifications extends EventEmitter {
           return true;
         };
 
-        const mutedRules = override.filter((rule) => isMuteToggled(rule, oldOverride));
-        const unMutedRules = oldOverride.filter((rule) => isMuteToggled(rule, override));
+        const mutedRules = override.filter((rule) =>
+          isMuteToggled(rule, oldOverride)
+        );
+        const unMutedRules = oldOverride.filter((rule) =>
+          isMuteToggled(rule, override)
+        );
 
         mutedRules.forEach((rule) => {
           this.emit(cons.events.notifications.MUTE_TOGGLED, rule.rule_id, true);
           this.deleteNoti(rule.rule_id);
         });
         unMutedRules.forEach((rule) => {
-          this.emit(cons.events.notifications.MUTE_TOGGLED, rule.rule_id, false);
+          this.emit(
+            cons.events.notifications.MUTE_TOGGLED,
+            rule.rule_id,
+            false
+          );
           const room = this.matrixClient.getRoom(rule.rule_id);
           if (!this.doesRoomHaveUnread(room)) return;
-          const total = room.getUnreadNotificationCount('total');
-          const highlight = room.getUnreadNotificationCount('highlight');
+          const total = room.getUnreadNotificationCount("total");
+          const highlight = room.getUnreadNotificationCount("highlight");
           this._setNoti(room.roomId, total ?? 0, highlight ?? 0);
         });
       }
     });
 
-    this.matrixClient.on('Room.receipt', (mEvent, room) => {
-      if (mEvent.getType() === 'm.receipt') {
+    this.matrixClient.on("Room.receipt", (mEvent, room) => {
+      if (mEvent.getType() === "m.receipt") {
         if (room.isSpaceRoom()) return;
         const content = mEvent.getContent();
         const readedEventId = Object.keys(content)[0];
-        const readerUserId = Object.keys(content[readedEventId]['m.read'])[0];
+        const readerUserId = Object.keys(content[readedEventId]["m.read"])[0];
         if (readerUserId !== this.matrixClient.getUserId()) return;
 
         this.deleteNoti(room.roomId);
@@ -396,11 +428,11 @@ class Notifications extends EventEmitter {
       }
     });
 
-    this.matrixClient.on('Room.myMembership', (room, membership) => {
-      if (membership === 'leave' && this.hasNoti(room.roomId)) {
+    this.matrixClient.on("Room.myMembership", (room, membership) => {
+      if (membership === "leave" && this.hasNoti(room.roomId)) {
         this.deleteNoti(room.roomId);
       }
-      if (membership === 'invite') {
+      if (membership === "invite") {
         this._playInviteSound();
       }
     });
diff --git a/src/client/state/RoomList.js b/src/client/state/RoomList.js
index a1570480..cb068cc9 100644
--- a/src/client/state/RoomList.js
+++ b/src/client/state/RoomList.js
@@ -1,9 +1,12 @@
-import EventEmitter from 'events';
-import appDispatcher from '../dispatcher';
-import cons from './cons';
+import EventEmitter from "events";
+import appDispatcher from "../dispatcher";
+import cons from "./cons";
 
 function isMEventSpaceChild(mEvent) {
-  return mEvent.getType() === 'm.space.child' && Object.keys(mEvent.getContent()).length > 0;
+  return (
+    mEvent.getType() === "m.space.child" &&
+    Object.keys(mEvent.getContent()).length > 0
+  );
 }
 
 /**
@@ -13,9 +16,10 @@ function isMEventSpaceChild(mEvent) {
  */
 async function waitFor(callback, timeout = 400, maxTry = -1) {
   if (maxTry === 0) return false;
-  const isOver = async () => new Promise((resolve) => {
-    setTimeout(() => resolve(callback()), timeout);
-  });
+  const isOver = async () =>
+    new Promise((resolve) => {
+      setTimeout(() => resolve(callback()), timeout);
+    });
 
   if (await isOver()) return true;
   return waitFor(callback, timeout, maxTry - 1);
@@ -52,11 +56,15 @@ class RoomList extends EventEmitter {
   }
 
   getOrphanSpaces() {
-    return [...this.spaces].filter((roomId) => !this.roomIdToParents.has(roomId));
+    return [...this.spaces].filter(
+      (roomId) => !this.roomIdToParents.has(roomId)
+    );
   }
 
   getOrphanRooms() {
-    return [...this.rooms].filter((roomId) => !this.roomIdToParents.has(roomId));
+    return [...this.rooms].filter(
+      (roomId) => !this.roomIdToParents.has(roomId)
+    );
   }
 
   getOrphans() {
@@ -67,7 +75,7 @@ class RoomList extends EventEmitter {
   getSpaceChildren(roomId) {
     const space = this.matrixClient.getRoom(roomId);
     if (space === null) return null;
-    const mSpaceChild = space?.currentState.getStateEvents('m.space.child');
+    const mSpaceChild = space?.currentState.getStateEvents("m.space.child");
 
     const children = [];
     mSpaceChild.forEach((mEvent) => {
@@ -89,7 +97,7 @@ class RoomList extends EventEmitter {
 
       child.forEach((childId) => {
         const room = this.matrixClient.getRoom(childId);
-        if (room === null || room.getMyMembership() !== 'join') return;
+        if (room === null || room.getMyMembership() !== "join") return;
         if (room.isSpaceRoom()) categorizeSpace(childId);
         else mappedChild.add(childId);
       });
@@ -172,7 +180,7 @@ class RoomList extends EventEmitter {
           this.processingRooms.set(action.roomId, {
             roomId: action.roomId,
             isDM: action.isDM,
-            task: 'JOIN',
+            task: "JOIN",
           });
         }
       },
@@ -187,7 +195,7 @@ class RoomList extends EventEmitter {
           this.processingRooms.set(action.roomId, {
             roomId: action.roomId,
             isDM: action.isDM,
-            task: 'CREATE',
+            task: "CREATE",
           });
         }
       },
@@ -197,11 +205,9 @@ class RoomList extends EventEmitter {
 
   getMDirects() {
     const mDirectsId = new Set();
-    const mDirect = this.matrixClient
-      .getAccountData('m.direct')
-      ?.getContent();
+    const mDirect = this.matrixClient.getAccountData("m.direct")?.getContent();
 
-    if (typeof mDirect === 'undefined') return mDirectsId;
+    if (typeof mDirect === "undefined") return mDirectsId;
 
     Object.keys(mDirect).forEach((direct) => {
       mDirect[direct].forEach((directId) => mDirectsId.add(directId));
@@ -220,21 +226,23 @@ class RoomList extends EventEmitter {
     this.inviteRooms.clear();
     this.matrixClient.getRooms().forEach((room) => {
       const { roomId } = room;
-      const tombstone = room.currentState.events.get('m.room.tombstone');
-      if (tombstone?.get('') !== undefined) {
-        const repRoomId = tombstone.get('').getContent().replacement_room;
-        const repRoomMembership = this.matrixClient.getRoom(repRoomId)?.getMyMembership();
-        if (repRoomMembership === 'join') return;
+      const tombstone = room.currentState.events.get("m.room.tombstone");
+      if (tombstone?.get("") !== undefined) {
+        const repRoomId = tombstone.get("").getContent().replacement_room;
+        const repRoomMembership = this.matrixClient
+          .getRoom(repRoomId)
+          ?.getMyMembership();
+        if (repRoomMembership === "join") return;
       }
 
-      if (room.getMyMembership() === 'invite') {
+      if (room.getMyMembership() === "invite") {
         if (this._isDMInvite(room)) this.inviteDirects.add(roomId);
         else if (room.isSpaceRoom()) this.inviteSpaces.add(roomId);
         else this.inviteRooms.add(roomId);
         return;
       }
 
-      if (room.getMyMembership() !== 'join') return;
+      if (room.getMyMembership() !== "join") return;
 
       if (this.mDirects.has(roomId)) this.directs.add(roomId);
       else if (room.isSpaceRoom()) this.addToSpaces(roomId);
@@ -246,13 +254,13 @@ class RoomList extends EventEmitter {
     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;
+    return myEventContent.membership === "invite" && myEventContent.is_direct;
   }
 
   _listenEvents() {
     // Update roomList when m.direct changes
-    this.matrixClient.on('accountData', (event) => {
-      if (event.getType() !== 'm.direct') return;
+    this.matrixClient.on("accountData", (event) => {
+      if (event.getType() !== "m.direct") return;
 
       const latestMDirects = this.getMDirects();
 
@@ -262,7 +270,7 @@ class RoomList extends EventEmitter {
 
         const myRoom = this.matrixClient.getRoom(directId);
         if (myRoom === null) return;
-        if (myRoom.getMyMembership() === 'join') {
+        if (myRoom.getMyMembership() === "join") {
           this.directs.add(directId);
           this.rooms.delete(directId);
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
@@ -275,7 +283,7 @@ class RoomList extends EventEmitter {
 
         const myRoom = this.matrixClient.getRoom(directId);
         if (myRoom === null) return;
-        if (myRoom.getMyMembership() === 'join') {
+        if (myRoom.getMyMembership() === "join") {
           this.directs.delete(directId);
           this.rooms.add(directId);
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
@@ -283,13 +291,13 @@ class RoomList extends EventEmitter {
       });
     });
 
-    this.matrixClient.on('Room.name', (room) => {
+    this.matrixClient.on("Room.name", (room) => {
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
       this.emit(cons.events.roomList.ROOM_PROFILE_UPDATED, room.roomId);
     });
 
-    this.matrixClient.on('RoomState.events', (mEvent, state) => {
-      if (mEvent.getType() === 'm.space.child') {
+    this.matrixClient.on("RoomState.events", (mEvent, state) => {
+      if (mEvent.getType() === "m.space.child") {
         const roomId = mEvent.event.room_id;
         const childId = mEvent.event.state_key;
         if (isMEventSpaceChild(mEvent)) {
@@ -304,86 +312,94 @@ class RoomList extends EventEmitter {
         this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         return;
       }
-      if (mEvent.getType() === 'm.room.join_rules') {
+      if (mEvent.getType() === "m.room.join_rules") {
         this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         return;
       }
-      if (['m.room.avatar', 'm.room.topic'].includes(mEvent.getType())) {
-        if (mEvent.getType() === 'm.room.avatar') {
+      if (["m.room.avatar", "m.room.topic"].includes(mEvent.getType())) {
+        if (mEvent.getType() === "m.room.avatar") {
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         }
         this.emit(cons.events.roomList.ROOM_PROFILE_UPDATED, state.roomId);
       }
     });
 
-    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;
+    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;
+
+        if (membership === "invite") {
+          if (this._isDMInvite(room)) this.inviteDirects.add(roomId);
+          else if (room.isSpaceRoom()) this.inviteSpaces.add(roomId);
+          else this.inviteRooms.add(roomId);
+
+          this.emit(cons.events.roomList.INVITELIST_UPDATED, 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);
+
+          this.emit(cons.events.roomList.INVITELIST_UPDATED, 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 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);
+        }
       }
-
-      if (membership === 'unban') return;
-
-      if (membership === 'invite') {
-        if (this._isDMInvite(room)) this.inviteDirects.add(roomId);
-        else if (room.isSpaceRoom()) this.inviteSpaces.add(roomId);
-        else this.inviteRooms.add(roomId);
-
-        this.emit(cons.events.roomList.INVITELIST_UPDATED, 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);
-
-        this.emit(cons.events.roomList.INVITELIST_UPDATED, 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 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);
-      }
-    });
+    );
   }
 }
 export default RoomList;
diff --git a/src/client/state/RoomTimeline.js b/src/client/state/RoomTimeline.js
index 57d91c14..726f3199 100644
--- a/src/client/state/RoomTimeline.js
+++ b/src/client/state/RoomTimeline.js
@@ -1,15 +1,15 @@
-import EventEmitter from 'events';
-import initMatrix from '../initMatrix';
-import cons from './cons';
+import EventEmitter from "events";
+import initMatrix from "../initMatrix";
+import cons from "./cons";
 
-import settings from './settings';
+import settings from "./settings";
 
 function isEdited(mEvent) {
-  return mEvent.getRelation()?.rel_type === 'm.replace';
+  return mEvent.getRelation()?.rel_type === "m.replace";
 }
 
 function isReaction(mEvent) {
-  return mEvent.getType() === 'm.reaction';
+  return mEvent.getType() === "m.reaction";
 }
 
 function hideMemberEvents(mEvent) {
@@ -17,11 +17,16 @@ function hideMemberEvents(mEvent) {
   const prevContent = mEvent.getPrevContent();
   const { membership } = content;
   if (settings.hideMembershipEvents) {
-    if (membership === 'invite' || membership === 'ban' || membership === 'leave') return true;
-    if (prevContent.membership !== 'join') return true;
+    if (
+      membership === "invite" ||
+      membership === "ban" ||
+      membership === "leave"
+    )
+      return true;
+    if (prevContent.membership !== "join") return true;
   }
   if (settings.hideNickAvatarEvents) {
-    if (membership === 'join' && prevContent.membership === 'join') return true;
+    if (membership === "join" && prevContent.membership === "join") return true;
   }
   return false;
 }
@@ -36,7 +41,7 @@ function addToMap(myMap, mEvent) {
   if (relateToId === null) return null;
   const mEventId = mEvent.getId();
 
-  if (typeof myMap.get(relateToId) === 'undefined') myMap.set(relateToId, []);
+  if (typeof myMap.get(relateToId) === "undefined") myMap.set(relateToId, []);
   const mEvents = myMap.get(relateToId);
   if (mEvents.find((ev) => ev.getId() === mEventId)) return mEvent;
   mEvents.push(mEvent);
@@ -107,9 +112,9 @@ class RoomTimeline extends EventEmitter {
   }
 
   canPaginateBackward() {
-    if (this.timeline[0]?.getType() === 'm.room.create') return false;
+    if (this.timeline[0]?.getType() === "m.room.create") return false;
     const tm = getFirstLinkedTimeline(this.activeTimeline);
-    return tm.getPaginationToken('b') !== null;
+    return tm.getPaginationToken("b") !== null;
   }
 
   canPaginateForward() {
@@ -125,7 +130,7 @@ class RoomTimeline extends EventEmitter {
   }
 
   addToTimeline(mEvent) {
-    if (mEvent.getType() === 'm.room.member' && hideMemberEvents(mEvent)) {
+    if (mEvent.getType() === "m.room.member" && hideMemberEvents(mEvent)) {
       return;
     }
     if (mEvent.isRedacted()) return;
@@ -154,7 +159,8 @@ class RoomTimeline extends EventEmitter {
   }
 
   async _reset() {
-    if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline);
+    if (this.isEncrypted())
+      await this.decryptAllEventsOfTimeline(this.activeTimeline);
     this._populateTimelines();
     if (!this.initialized) {
       this.initialized = true;
@@ -173,7 +179,10 @@ class RoomTimeline extends EventEmitter {
     // we use first unfiltered EventTimelineSet for room pagination.
     const timelineSet = this.getUnfilteredTimelineSet();
     try {
-      const eventTimeline = await this.matrixClient.getEventTimeline(timelineSet, eventId);
+      const eventTimeline = await this.matrixClient.getEventTimeline(
+        timelineSet,
+        eventId
+      );
       this.activeTimeline = eventTimeline;
       await this._reset();
       this.emit(cons.events.roomTimeline.READY, eventId);
@@ -193,7 +202,7 @@ class RoomTimeline extends EventEmitter {
       ? getFirstLinkedTimeline(this.activeTimeline)
       : getLastLinkedTimeline(this.activeTimeline);
 
-    if (timelineToPaginate.getPaginationToken(backwards ? 'b' : 'f') === null) {
+    if (timelineToPaginate.getPaginationToken(backwards ? "b" : "f") === null) {
       this.emit(cons.events.roomTimeline.PAGINATED, backwards, 0);
       this.isOngoingPagination = false;
       return false;
@@ -201,9 +210,13 @@ class RoomTimeline extends EventEmitter {
 
     const oldSize = this.timeline.length;
     try {
-      await this.matrixClient.paginateEventTimeline(timelineToPaginate, { backwards, limit });
+      await this.matrixClient.paginateEventTimeline(timelineToPaginate, {
+        backwards,
+        limit,
+      });
 
-      if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline);
+      if (this.isEncrypted())
+        await this.decryptAllEventsOfTimeline(this.activeTimeline);
       this._populateTimelines();
 
       const loaded = this.timeline.length - oldSize;
@@ -222,7 +235,9 @@ class RoomTimeline extends EventEmitter {
       .getEvents()
       .filter((event) => event.isEncrypted() && !event.clearEvent)
       .reverse()
-      .map((event) => event.attemptDecryption(this.matrixClient.crypto, { isRetry: true }));
+      .map((event) =>
+        event.attemptDecryption(this.matrixClient.crypto, { isRetry: true })
+      );
 
     return Promise.allSettled(decryptionPromises);
   }
@@ -244,7 +259,11 @@ class RoomTimeline extends EventEmitter {
     if (!mEvent) return [];
 
     for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(liveEvents[i]));
+      readers.splice(
+        readers.length,
+        0,
+        ...this.room.getUsersReadUpTo(liveEvents[i])
+      );
       if (mEvent === liveEvents[i]) break;
     }
 
@@ -256,15 +275,17 @@ class RoomTimeline extends EventEmitter {
     const getLatestVisibleEvent = () => {
       for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
         const mEvent = liveEvents[i];
-        if (mEvent.getType() === 'm.room.member' && hideMemberEvents(mEvent)) {
+        if (mEvent.getType() === "m.room.member" && hideMemberEvents(mEvent)) {
           // eslint-disable-next-line no-continue
           continue;
         }
-        if (!mEvent.isRedacted()
-          && !isReaction(mEvent)
-          && !isEdited(mEvent)
-          && cons.supportEventTypes.includes(mEvent.getType())
-        ) return mEvent;
+        if (
+          !mEvent.isRedacted() &&
+          !isReaction(mEvent) &&
+          !isEdited(mEvent) &&
+          cons.supportEventTypes.includes(mEvent.getType())
+        )
+          return mEvent;
       }
       return liveEvents[liveEvents.length - 1];
     };
@@ -296,7 +317,10 @@ class RoomTimeline extends EventEmitter {
     return this.timeline.findIndex((mEvent) => mEvent.getId() === eventId);
   }
 
-  findEventByIdInTimelineSet(eventId, eventTimelineSet = this.getUnfilteredTimelineSet()) {
+  findEventByIdInTimelineSet(
+    eventId,
+    eventTimelineSet = this.getUnfilteredTimelineSet()
+  ) {
     return eventTimelineSet.findEventById(eventId);
   }
 
@@ -311,7 +335,13 @@ class RoomTimeline extends EventEmitter {
   }
 
   _listenEvents() {
-    this._listenRoomTimeline = (event, room, toStartOfTimeline, removed, data) => {
+    this._listenRoomTimeline = (
+      event,
+      room,
+      toStartOfTimeline,
+      removed,
+      data
+    ) => {
       if (room.roomId !== this.roomId) return;
       if (this.isOngoingPagination) return;
 
@@ -369,7 +399,10 @@ class RoomTimeline extends EventEmitter {
       const isTyping = member.typing;
       if (isTyping) this.typingMembers.add(member.userId);
       else this.typingMembers.delete(member.userId);
-      this.emit(cons.events.roomTimeline.TYPING_MEMBERS_UPDATED, new Set([...this.typingMembers]));
+      this.emit(
+        cons.events.roomTimeline.TYPING_MEMBERS_UPDATED,
+        new Set([...this.typingMembers])
+      );
     };
     this._listenReciptEvent = (event, room) => {
       // we only process receipt for latest message here.
@@ -381,26 +414,32 @@ class RoomTimeline extends EventEmitter {
       const lastEventId = lastMEvent.getId();
       const lastEventRecipt = receiptContent[lastEventId];
 
-      if (typeof lastEventRecipt === 'undefined') return;
-      if (lastEventRecipt['m.read']) {
+      if (typeof lastEventRecipt === "undefined") return;
+      if (lastEventRecipt["m.read"]) {
         this.emit(cons.events.roomTimeline.LIVE_RECEIPT);
       }
     };
 
-    this.matrixClient.on('Room.timeline', this._listenRoomTimeline);
-    this.matrixClient.on('Room.redaction', this._listenRedaction);
-    this.matrixClient.on('Event.decrypted', this._listenDecryptEvent);
-    this.matrixClient.on('RoomMember.typing', this._listenTypingEvent);
-    this.matrixClient.on('Room.receipt', this._listenReciptEvent);
+    this.matrixClient.on("Room.timeline", this._listenRoomTimeline);
+    this.matrixClient.on("Room.redaction", this._listenRedaction);
+    this.matrixClient.on("Event.decrypted", this._listenDecryptEvent);
+    this.matrixClient.on("RoomMember.typing", this._listenTypingEvent);
+    this.matrixClient.on("Room.receipt", this._listenReciptEvent);
   }
 
   removeInternalListeners() {
     if (!this.initialized) return;
-    this.matrixClient.removeListener('Room.timeline', this._listenRoomTimeline);
-    this.matrixClient.removeListener('Room.redaction', this._listenRedaction);
-    this.matrixClient.removeListener('Event.decrypted', this._listenDecryptEvent);
-    this.matrixClient.removeListener('RoomMember.typing', this._listenTypingEvent);
-    this.matrixClient.removeListener('Room.receipt', this._listenReciptEvent);
+    this.matrixClient.removeListener("Room.timeline", this._listenRoomTimeline);
+    this.matrixClient.removeListener("Room.redaction", this._listenRedaction);
+    this.matrixClient.removeListener(
+      "Event.decrypted",
+      this._listenDecryptEvent
+    );
+    this.matrixClient.removeListener(
+      "RoomMember.typing",
+      this._listenTypingEvent
+    );
+    this.matrixClient.removeListener("Room.receipt", this._listenReciptEvent);
   }
 }
 
diff --git a/src/client/state/RoomsHierarchy.js b/src/client/state/RoomsHierarchy.js
index f3ffb1fc..538d5bb0 100644
--- a/src/client/state/RoomsHierarchy.js
+++ b/src/client/state/RoomsHierarchy.js
@@ -1,4 +1,4 @@
-import { RoomHierarchy } from 'matrix-js-sdk/lib/room-hierarchy';
+import { RoomHierarchy } from "matrix-js-sdk/lib/room-hierarchy";
 
 class RoomsHierarchy {
   constructor(matrixClient, limit = 20, maxDepth = 1, suggestedOnly = false) {
@@ -32,7 +32,7 @@ class RoomsHierarchy {
         { roomId, client: this.matrixClient },
         limit,
         this._maxDepth,
-        this._suggestedOnly,
+        this._suggestedOnly
       );
       this.roomIdToHierarchy.set(roomId, roomHierarchy);
     }
diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js
index d1e0aedb..864c00f8 100644
--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -1,20 +1,20 @@
-import EventEmitter from 'events';
-import encrypt from 'browser-encrypt-attachment';
-import { encode } from 'blurhash';
-import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
-import { getBlobSafeMimeType } from '../../util/mimetypes';
-import { sanitizeText } from '../../util/sanitize';
-import cons from './cons';
-import settings from './settings';
-import { markdown, plain } from '../../util/markdown';
+import EventEmitter from "events";
+import encrypt from "browser-encrypt-attachment";
+import { encode } from "blurhash";
+import { getShortcodeToEmoji } from "../../app/organisms/emoji-board/custom-emoji";
+import { getBlobSafeMimeType } from "../../util/mimetypes";
+import { sanitizeText } from "../../util/sanitize";
+import cons from "./cons";
+import settings from "./settings";
+import { markdown, plain } from "../../util/markdown";
 
-const blurhashField = 'xyz.amorgan.blurhash';
+const blurhashField = "xyz.amorgan.blurhash";
 
 function encodeBlurhash(img) {
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = 100;
   canvas.height = 100;
-  const context = canvas.getContext('2d');
+  const context = canvas.getContext("2d");
   context.drawImage(img, 0, 0, canvas.width, canvas.height);
   const data = context.getImageData(0, 0, canvas.width, canvas.height);
   return encode(data.data, data.width, data.height, 4, 4);
@@ -31,8 +31,8 @@ function loadImage(url) {
 
 function loadVideo(videoFile) {
   return new Promise((resolve, reject) => {
-    const video = document.createElement('video');
-    video.preload = 'metadata';
+    const video = document.createElement("video");
+    video.preload = "metadata";
     video.playsInline = true;
     video.muted = true;
 
@@ -55,8 +55,10 @@ function loadVideo(videoFile) {
     reader.onerror = (e) => {
       reject(e);
     };
-    if (videoFile.type === 'video/quicktime') {
-      const quicktimeVideoFile = new File([videoFile], videoFile.name, { type: 'video/mp4' });
+    if (videoFile.type === "video/quicktime") {
+      const quicktimeVideoFile = new File([videoFile], videoFile.name, {
+        type: "video/mp4",
+      });
       reader.readAsDataURL(quicktimeVideoFile);
     } else {
       reader.readAsDataURL(videoFile);
@@ -78,10 +80,10 @@ function getVideoThumbnail(video, width, height, mimeType) {
       targetWidth = MAX_WIDTH;
     }
 
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = targetWidth;
     canvas.height = targetHeight;
-    const context = canvas.getContext('2d');
+    const context = canvas.getContext("2d");
     context.drawImage(video, 0, 0, targetWidth, targetHeight);
 
     canvas.toBlob((thumbnail) => {
@@ -109,9 +111,10 @@ class RoomsInput extends EventEmitter {
 
   cleanEmptyEntry(roomId) {
     const input = this.getInput(roomId);
-    const isEmpty = typeof input.attachment === 'undefined'
-      && typeof input.replyTo === 'undefined'
-      && (typeof input.message === 'undefined' || input.message === '');
+    const isEmpty =
+      typeof input.attachment === "undefined" &&
+      typeof input.replyTo === "undefined" &&
+      (typeof input.message === "undefined" || input.message === "");
     if (isEmpty) {
       this.roomIdToInput.delete(roomId);
     }
@@ -125,12 +128,12 @@ class RoomsInput extends EventEmitter {
     const input = this.getInput(roomId);
     input.message = message;
     this.roomIdToInput.set(roomId, input);
-    if (message === '') this.cleanEmptyEntry(roomId);
+    if (message === "") this.cleanEmptyEntry(roomId);
   }
 
   getMessage(roomId) {
     const input = this.getInput(roomId);
-    if (typeof input.message === 'undefined') return '';
+    if (typeof input.message === "undefined") return "";
     return input.message;
   }
 
@@ -142,13 +145,13 @@ class RoomsInput extends EventEmitter {
 
   getReplyTo(roomId) {
     const input = this.getInput(roomId);
-    if (typeof input.replyTo === 'undefined') return null;
+    if (typeof input.replyTo === "undefined") return null;
     return input.replyTo;
   }
 
   cancelReplyTo(roomId) {
     const input = this.getInput(roomId);
-    if (typeof input.replyTo === 'undefined') return;
+    if (typeof input.replyTo === "undefined") return;
     delete input.replyTo;
     this.roomIdToInput.set(roomId, input);
   }
@@ -163,13 +166,13 @@ class RoomsInput extends EventEmitter {
 
   getAttachment(roomId) {
     const input = this.getInput(roomId);
-    if (typeof input.attachment === 'undefined') return null;
+    if (typeof input.attachment === "undefined") return null;
     return input.attachment.file;
   }
 
   cancelAttachment(roomId) {
     const input = this.getInput(roomId);
-    if (typeof input.attachment === 'undefined') return;
+    if (typeof input.attachment === "undefined") return;
 
     const { uploadingPromise } = input.attachment;
 
@@ -188,15 +191,20 @@ class RoomsInput extends EventEmitter {
   }
 
   getContent(roomId, options, message, reply, edit) {
-    const msgType = options?.msgType || 'm.text';
+    const msgType = options?.msgType || "m.text";
     const autoMarkdown = options?.autoMarkdown ?? true;
 
     const room = this.matrixClient.getRoom(roomId);
 
     const userNames = room.currentState.userIdsToDisplayNames;
     const parentIds = this.roomList.getAllParentSpaces(room.roomId);
-    const parentRooms = [...parentIds].map((id) => this.matrixClient.getRoom(id));
-    const emojis = getShortcodeToEmoji(this.matrixClient, [room, ...parentRooms]);
+    const parentRooms = [...parentIds].map((id) =>
+      this.matrixClient.getRoom(id)
+    );
+    const emojis = getShortcodeToEmoji(this.matrixClient, [
+      room,
+      ...parentRooms,
+    ]);
 
     const output = settings.isMarkdown && autoMarkdown ? markdown : plain;
     const body = output(message, { userNames, emojis });
@@ -207,49 +215,60 @@ class RoomsInput extends EventEmitter {
     };
 
     if (!body.onlyPlain || reply) {
-      content.format = 'org.matrix.custom.html';
+      content.format = "org.matrix.custom.html";
       content.formatted_body = body.html;
     }
 
     if (edit) {
-      content['m.new_content'] = { ...content };
-      content['m.relates_to'] = {
+      content["m.new_content"] = { ...content };
+      content["m.relates_to"] = {
         event_id: edit.getId(),
-        rel_type: 'm.replace',
+        rel_type: "m.replace",
       };
 
-      const isReply = edit.getWireContent()['m.relates_to']?.['m.in_reply_to'];
+      const isReply = edit.getWireContent()["m.relates_to"]?.["m.in_reply_to"];
       if (isReply) {
-        content.format = 'org.matrix.custom.html';
+        content.format = "org.matrix.custom.html";
         content.formatted_body = body.html;
       }
 
       content.body = ` * ${content.body}`;
-      if (content.formatted_body) content.formatted_body = ` * ${content.formatted_body}`;
+      if (content.formatted_body)
+        content.formatted_body = ` * ${content.formatted_body}`;
 
       if (isReply) {
         const eBody = edit.getContent().body;
-        const replyHead = eBody.substring(0, eBody.indexOf('\n\n'));
+        const replyHead = eBody.substring(0, eBody.indexOf("\n\n"));
         if (replyHead) content.body = `${replyHead}\n\n${content.body}`;
 
         const eFBody = edit.getContent().formatted_body;
-        const fReplyHead = eFBody.substring(0, eFBody.indexOf('</mx-reply>'));
-        if (fReplyHead) content.formatted_body = `${fReplyHead}</mx-reply>${content.formatted_body}`;
+        const fReplyHead = eFBody.substring(0, eFBody.indexOf("</mx-reply>"));
+        if (fReplyHead)
+          content.formatted_body = `${fReplyHead}</mx-reply>${content.formatted_body}`;
       }
     }
 
     if (reply) {
-      content['m.relates_to'] = {
-        'm.in_reply_to': {
+      content["m.relates_to"] = {
+        "m.in_reply_to": {
           event_id: reply.eventId,
         },
       };
 
-      content.body = `> <${reply.userId}> ${reply.body.replace(/\n/g, '\n> ')}\n\n${content.body}`;
+      content.body = `> <${reply.userId}> ${reply.body.replace(
+        /\n/g,
+        "\n> "
+      )}\n\n${content.body}`;
 
-      const replyToLink = `<a href="https://matrix.to/#/${encodeURIComponent(roomId)}/${encodeURIComponent(reply.eventId)}">In reply to</a>`;
-      const userLink = `<a href="https://matrix.to/#/${encodeURIComponent(reply.userId)}">${sanitizeText(reply.userId)}</a>`;
-      const fallback = `<mx-reply><blockquote>${replyToLink}${userLink}<br />${reply.formattedBody || sanitizeText(reply.body)}</blockquote></mx-reply>`;
+      const replyToLink = `<a href="https://matrix.to/#/${encodeURIComponent(
+        roomId
+      )}/${encodeURIComponent(reply.eventId)}">In reply to</a>`;
+      const userLink = `<a href="https://matrix.to/#/${encodeURIComponent(
+        reply.userId
+      )}">${sanitizeText(reply.userId)}</a>`;
+      const fallback = `<mx-reply><blockquote>${replyToLink}${userLink}<br />${
+        reply.formattedBody || sanitizeText(reply.body)
+      }</blockquote></mx-reply>`;
       content.formatted_body = fallback + content.formatted_body;
     }
 
@@ -265,8 +284,13 @@ class RoomsInput extends EventEmitter {
       if (!this.isSending(roomId)) return;
     }
 
-    if (this.getMessage(roomId).trim() !== '') {
-      const content = this.getContent(roomId, options, input.message, input.replyTo);
+    if (this.getMessage(roomId).trim() !== "") {
+      const content = this.getContent(
+        roomId,
+        options,
+        input.message,
+        input.replyTo
+      );
       this.matrixClient.sendMessage(roomId, content);
     }
 
@@ -294,7 +318,7 @@ class RoomsInput extends EventEmitter {
       // send sticker without info
     }
 
-    this.matrixClient.sendEvent(roomId, 'm.sticker', {
+    this.matrixClient.sendEvent(roomId, "m.sticker", {
       body,
       url,
       info,
@@ -303,7 +327,10 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendFile(roomId, file) {
-    const fileType = getBlobSafeMimeType(file.type).slice(0, file.type.indexOf('/'));
+    const fileType = getBlobSafeMimeType(file.type).slice(
+      0,
+      file.type.indexOf("/")
+    );
     const info = {
       mimetype: file.type,
       size: file.size,
@@ -311,18 +338,18 @@ class RoomsInput extends EventEmitter {
     const content = { info };
     let uploadData = null;
 
-    if (fileType === 'image') {
+    if (fileType === "image") {
       const img = await loadImage(URL.createObjectURL(file));
 
       info.w = img.width;
       info.h = img.height;
       info[blurhashField] = encodeBlurhash(img);
 
-      content.msgtype = 'm.image';
-      content.body = file.name || 'Image';
-    } else if (fileType === 'video') {
-      content.msgtype = 'm.video';
-      content.body = file.name || 'Video';
+      content.msgtype = "m.image";
+      content.body = file.name || "Image";
+    } else if (fileType === "video") {
+      content.msgtype = "m.video";
+      content.body = file.name || "Video";
 
       try {
         const video = await loadVideo(file);
@@ -331,8 +358,16 @@ class RoomsInput extends EventEmitter {
         info.h = video.videoHeight;
         info[blurhashField] = encodeBlurhash(video);
 
-        const thumbnailData = await getVideoThumbnail(video, video.videoWidth, video.videoHeight, 'image/jpeg');
-        const thumbnailUploadData = await this.uploadFile(roomId, thumbnailData.thumbnail);
+        const thumbnailData = await getVideoThumbnail(
+          video,
+          video.videoWidth,
+          video.videoHeight,
+          "image/jpeg"
+        );
+        const thumbnailUploadData = await this.uploadFile(
+          roomId,
+          thumbnailData.thumbnail
+        );
         info.thumbnail_info = thumbnailData.info;
         if (this.matrixClient.isRoomEncrypted(roomId)) {
           info.thumbnail_file = thumbnailUploadData.file;
@@ -343,12 +378,12 @@ class RoomsInput extends EventEmitter {
         this.emit(cons.events.roomsInput.FILE_UPLOAD_CANCELED, roomId);
         return;
       }
-    } else if (fileType === 'audio') {
-      content.msgtype = 'm.audio';
-      content.body = file.name || 'Audio';
+    } else if (fileType === "audio") {
+      content.msgtype = "m.audio";
+      content.body = file.name || "Audio";
     } else {
-      content.msgtype = 'm.file';
-      content.body = file.name || 'File';
+      content.msgtype = "m.file";
+      content.body = file.name || "File";
     }
 
     try {
@@ -378,18 +413,23 @@ class RoomsInput extends EventEmitter {
 
     if (isEncryptedRoom) {
       const dataBuffer = await file.arrayBuffer();
-      if (typeof this.getInput(roomId).attachment === 'undefined') throw new Error('Attachment canceled');
+      if (typeof this.getInput(roomId).attachment === "undefined")
+        throw new Error("Attachment canceled");
       const encryptedResult = await encrypt.encryptAttachment(dataBuffer);
-      if (typeof this.getInput(roomId).attachment === 'undefined') throw new Error('Attachment canceled');
+      if (typeof this.getInput(roomId).attachment === "undefined")
+        throw new Error("Attachment canceled");
       encryptInfo = encryptedResult.info;
       encryptBlob = new Blob([encryptedResult.data]);
     }
 
-    const uploadingPromise = this.matrixClient.uploadContent(isEncryptedRoom ? encryptBlob : file, {
-      // don't send filename if room is encrypted.
-      includeFilename: !isEncryptedRoom,
-      progressHandler,
-    });
+    const uploadingPromise = this.matrixClient.uploadContent(
+      isEncryptedRoom ? encryptBlob : file,
+      {
+        // don't send filename if room is encrypted.
+        includeFilename: !isEncryptedRoom,
+        progressHandler,
+      }
+    );
 
     const input = this.getInput(roomId);
     input.attachment.uploadingPromise = uploadingPromise;
@@ -414,7 +454,7 @@ class RoomsInput extends EventEmitter {
       { msgType: mEvent.getWireContent().msgtype },
       editedBody,
       null,
-      mEvent,
+      mEvent
     );
     this.matrixClient.sendMessage(roomId, content);
   }
diff --git a/src/client/state/auth.js b/src/client/state/auth.js
index fbc23f6f..19c3fe8e 100644
--- a/src/client/state/auth.js
+++ b/src/client/state/auth.js
@@ -1,4 +1,4 @@
-import cons from './cons';
+import cons from "./cons";
 
 function getSecret(key) {
   return localStorage.getItem(key);
@@ -13,7 +13,4 @@ const secret = {
   baseUrl: getSecret(cons.secretKey.BASE_URL),
 };
 
-export {
-  isAuthenticated,
-  secret,
-};
+export { isAuthenticated, secret };
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 8d9fda54..d759b653 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -1,155 +1,155 @@
 const cons = {
-  version: '2.2.6',
+  version: "2.2.6",
   secretKey: {
-    ACCESS_TOKEN: 'cinny_access_token',
-    DEVICE_ID: 'cinny_device_id',
-    USER_ID: 'cinny_user_id',
-    BASE_URL: 'cinny_hs_base_url',
+    ACCESS_TOKEN: "cinny_access_token",
+    DEVICE_ID: "cinny_device_id",
+    USER_ID: "cinny_user_id",
+    BASE_URL: "cinny_hs_base_url",
   },
-  DEVICE_DISPLAY_NAME: 'Cinny Web',
-  IN_CINNY_SPACES: 'in.cinny.spaces',
+  DEVICE_DISPLAY_NAME: "Cinny Web",
+  IN_CINNY_SPACES: "in.cinny.spaces",
   tabs: {
-    HOME: 'home',
-    DIRECTS: 'dm',
+    HOME: "home",
+    DIRECTS: "dm",
   },
   supportEventTypes: [
-    'm.room.create',
-    'm.room.message',
-    'm.room.encrypted',
-    'm.room.member',
-    'm.sticker',
+    "m.room.create",
+    "m.room.message",
+    "m.room.encrypted",
+    "m.room.member",
+    "m.sticker",
   ],
   notifs: {
-    DEFAULT: 'default',
-    ALL_MESSAGES: 'all_messages',
-    MENTIONS_AND_KEYWORDS: 'mentions_and_keywords',
-    MUTE: 'mute',
+    DEFAULT: "default",
+    ALL_MESSAGES: "all_messages",
+    MENTIONS_AND_KEYWORDS: "mentions_and_keywords",
+    MUTE: "mute",
   },
   status: {
-    PRE_FLIGHT: 'pre-flight',
-    IN_FLIGHT: 'in-flight',
-    SUCCESS: 'success',
-    ERROR: 'error',
+    PRE_FLIGHT: "pre-flight",
+    IN_FLIGHT: "in-flight",
+    SUCCESS: "success",
+    ERROR: "error",
   },
   actions: {
     navigation: {
-      SELECT_TAB: 'SELECT_TAB',
-      SELECT_SPACE: 'SELECT_SPACE',
-      SELECT_ROOM: 'SELECT_ROOM',
-      OPEN_SPACE_SETTINGS: 'OPEN_SPACE_SETTINGS',
-      OPEN_SPACE_MANAGE: 'OPEN_SPACE_MANAGE',
-      OPEN_SPACE_ADDEXISTING: 'OPEN_SPACE_ADDEXISTING',
-      TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS',
-      OPEN_SHORTCUT_SPACES: 'OPEN_SHORTCUT_SPACES',
-      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',
-      OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
-      OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
-      OPEN_VIEWSOURCE: 'OPEN_VIEWSOURCE',
-      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',
+      SELECT_TAB: "SELECT_TAB",
+      SELECT_SPACE: "SELECT_SPACE",
+      SELECT_ROOM: "SELECT_ROOM",
+      OPEN_SPACE_SETTINGS: "OPEN_SPACE_SETTINGS",
+      OPEN_SPACE_MANAGE: "OPEN_SPACE_MANAGE",
+      OPEN_SPACE_ADDEXISTING: "OPEN_SPACE_ADDEXISTING",
+      TOGGLE_ROOM_SETTINGS: "TOGGLE_ROOM_SETTINGS",
+      OPEN_SHORTCUT_SPACES: "OPEN_SHORTCUT_SPACES",
+      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",
+      OPEN_EMOJIBOARD: "OPEN_EMOJIBOARD",
+      OPEN_READRECEIPTS: "OPEN_READRECEIPTS",
+      OPEN_VIEWSOURCE: "OPEN_VIEWSOURCE",
+      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',
-      LEAVE: 'LEAVE',
-      CREATE: 'CREATE',
+      JOIN: "JOIN",
+      LEAVE: "LEAVE",
+      CREATE: "CREATE",
     },
     accountData: {
-      CREATE_SPACE_SHORTCUT: 'CREATE_SPACE_SHORTCUT',
-      DELETE_SPACE_SHORTCUT: 'DELETE_SPACE_SHORTCUT',
-      MOVE_SPACE_SHORTCUTS: 'MOVE_SPACE_SHORTCUTS',
-      CATEGORIZE_SPACE: 'CATEGORIZE_SPACE',
-      UNCATEGORIZE_SPACE: 'UNCATEGORIZE_SPACE',
+      CREATE_SPACE_SHORTCUT: "CREATE_SPACE_SHORTCUT",
+      DELETE_SPACE_SHORTCUT: "DELETE_SPACE_SHORTCUT",
+      MOVE_SPACE_SHORTCUTS: "MOVE_SPACE_SHORTCUTS",
+      CATEGORIZE_SPACE: "CATEGORIZE_SPACE",
+      UNCATEGORIZE_SPACE: "UNCATEGORIZE_SPACE",
     },
     settings: {
-      TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
-      TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
-      TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
-      TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
-      TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
-      TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
-      TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS',
+      TOGGLE_SYSTEM_THEME: "TOGGLE_SYSTEM_THEME",
+      TOGGLE_MARKDOWN: "TOGGLE_MARKDOWN",
+      TOGGLE_PEOPLE_DRAWER: "TOGGLE_PEOPLE_DRAWER",
+      TOGGLE_MEMBERSHIP_EVENT: "TOGGLE_MEMBERSHIP_EVENT",
+      TOGGLE_NICKAVATAR_EVENT: "TOGGLE_NICKAVATAR_EVENT",
+      TOGGLE_NOTIFICATIONS: "TOGGLE_NOTIFICATIONS",
+      TOGGLE_NOTIFICATION_SOUNDS: "TOGGLE_NOTIFICATION_SOUNDS",
     },
   },
   events: {
     navigation: {
-      TAB_SELECTED: 'TAB_SELECTED',
-      SPACE_SELECTED: 'SPACE_SELECTED',
-      ROOM_SELECTED: 'ROOM_SELECTED',
-      SPACE_SETTINGS_OPENED: 'SPACE_SETTINGS_OPENED',
-      SPACE_MANAGE_OPENED: 'SPACE_MANAGE_OPENED',
-      SPACE_ADDEXISTING_OPENED: 'SPACE_ADDEXISTING_OPENED',
-      ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
-      SHORTCUT_SPACES_OPENED: 'SHORTCUT_SPACES_OPENED',
-      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',
-      EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
-      READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
-      VIEWSOURCE_OPENED: 'VIEWSOURCE_OPENED',
-      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',
+      TAB_SELECTED: "TAB_SELECTED",
+      SPACE_SELECTED: "SPACE_SELECTED",
+      ROOM_SELECTED: "ROOM_SELECTED",
+      SPACE_SETTINGS_OPENED: "SPACE_SETTINGS_OPENED",
+      SPACE_MANAGE_OPENED: "SPACE_MANAGE_OPENED",
+      SPACE_ADDEXISTING_OPENED: "SPACE_ADDEXISTING_OPENED",
+      ROOM_SETTINGS_TOGGLED: "ROOM_SETTINGS_TOGGLED",
+      SHORTCUT_SPACES_OPENED: "SHORTCUT_SPACES_OPENED",
+      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",
+      EMOJIBOARD_OPENED: "EMOJIBOARD_OPENED",
+      READRECEIPTS_OPENED: "READRECEIPTS_OPENED",
+      VIEWSOURCE_OPENED: "VIEWSOURCE_OPENED",
+      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',
-      INVITELIST_UPDATED: 'INVITELIST_UPDATED',
-      ROOM_JOINED: 'ROOM_JOINED',
-      ROOM_LEAVED: 'ROOM_LEAVED',
-      ROOM_CREATED: 'ROOM_CREATED',
-      ROOM_PROFILE_UPDATED: 'ROOM_PROFILE_UPDATED',
+      ROOMLIST_UPDATED: "ROOMLIST_UPDATED",
+      INVITELIST_UPDATED: "INVITELIST_UPDATED",
+      ROOM_JOINED: "ROOM_JOINED",
+      ROOM_LEAVED: "ROOM_LEAVED",
+      ROOM_CREATED: "ROOM_CREATED",
+      ROOM_PROFILE_UPDATED: "ROOM_PROFILE_UPDATED",
     },
     accountData: {
-      SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
-      CATEGORIZE_SPACE_UPDATED: 'CATEGORIZE_SPACE_UPDATED',
+      SPACE_SHORTCUT_UPDATED: "SPACE_SHORTCUT_UPDATED",
+      CATEGORIZE_SPACE_UPDATED: "CATEGORIZE_SPACE_UPDATED",
     },
     notifications: {
-      NOTI_CHANGED: 'NOTI_CHANGED',
-      FULL_READ: 'FULL_READ',
-      MUTE_TOGGLED: 'MUTE_TOGGLED',
+      NOTI_CHANGED: "NOTI_CHANGED",
+      FULL_READ: "FULL_READ",
+      MUTE_TOGGLED: "MUTE_TOGGLED",
     },
     roomTimeline: {
-      READY: 'READY',
-      EVENT: 'EVENT',
-      PAGINATED: 'PAGINATED',
-      TYPING_MEMBERS_UPDATED: 'TYPING_MEMBERS_UPDATED',
-      LIVE_RECEIPT: 'LIVE_RECEIPT',
-      EVENT_REDACTED: 'EVENT_REDACTED',
-      AT_BOTTOM: 'AT_BOTTOM',
-      SCROLL_TO_LIVE: 'SCROLL_TO_LIVE',
+      READY: "READY",
+      EVENT: "EVENT",
+      PAGINATED: "PAGINATED",
+      TYPING_MEMBERS_UPDATED: "TYPING_MEMBERS_UPDATED",
+      LIVE_RECEIPT: "LIVE_RECEIPT",
+      EVENT_REDACTED: "EVENT_REDACTED",
+      AT_BOTTOM: "AT_BOTTOM",
+      SCROLL_TO_LIVE: "SCROLL_TO_LIVE",
     },
     roomsInput: {
-      MESSAGE_SENT: 'MESSAGE_SENT',
-      ATTACHMENT_SET: 'ATTACHMENT_SET',
-      FILE_UPLOADED: 'FILE_UPLOADED',
-      UPLOAD_PROGRESS_CHANGES: 'UPLOAD_PROGRESS_CHANGES',
-      FILE_UPLOAD_CANCELED: 'FILE_UPLOAD_CANCELED',
-      ATTACHMENT_CANCELED: 'ATTACHMENT_CANCELED',
+      MESSAGE_SENT: "MESSAGE_SENT",
+      ATTACHMENT_SET: "ATTACHMENT_SET",
+      FILE_UPLOADED: "FILE_UPLOADED",
+      UPLOAD_PROGRESS_CHANGES: "UPLOAD_PROGRESS_CHANGES",
+      FILE_UPLOAD_CANCELED: "FILE_UPLOAD_CANCELED",
+      ATTACHMENT_CANCELED: "ATTACHMENT_CANCELED",
     },
     settings: {
-      SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
-      MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
-      PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
-      MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
-      NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
-      NOTIFICATIONS_TOGGLED: 'NOTIFICATIONS_TOGGLED',
-      NOTIFICATION_SOUNDS_TOGGLED: 'NOTIFICATION_SOUNDS_TOGGLED',
+      SYSTEM_THEME_TOGGLED: "SYSTEM_THEME_TOGGLED",
+      MARKDOWN_TOGGLED: "MARKDOWN_TOGGLED",
+      PEOPLE_DRAWER_TOGGLED: "PEOPLE_DRAWER_TOGGLED",
+      MEMBERSHIP_EVENTS_TOGGLED: "MEMBERSHIP_EVENTS_TOGGLED",
+      NICKAVATAR_EVENTS_TOGGLED: "NICKAVATAR_EVENTS_TOGGLED",
+      NOTIFICATIONS_TOGGLED: "NOTIFICATIONS_TOGGLED",
+      NOTIFICATION_SOUNDS_TOGGLED: "NOTIFICATION_SOUNDS_TOGGLED",
     },
   },
 };
diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
index 07231cd4..52642188 100644
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -1,6 +1,6 @@
-import EventEmitter from 'events';
-import appDispatcher from '../dispatcher';
-import cons from './cons';
+import EventEmitter from "events";
+import appDispatcher from "../dispatcher";
+import cons from "./cons";
 
 class Navigation extends EventEmitter {
   constructor() {
@@ -22,7 +22,7 @@ class Navigation extends EventEmitter {
   }
 
   _addToSpacePath(roomId, asRoot) {
-    if (typeof roomId !== 'string') {
+    if (typeof roomId !== "string") {
       this.selectedSpacePath = [cons.tabs.HOME];
       return;
     }
@@ -41,9 +41,9 @@ class Navigation extends EventEmitter {
   _mapRoomToSpace(roomId) {
     const { roomList, accountData } = this.initMatrix;
     if (
-      this.selectedTab === cons.tabs.HOME
-      && roomList.rooms.has(roomId)
-      && !roomList.roomIdToParents.has(roomId)
+      this.selectedTab === cons.tabs.HOME &&
+      roomList.rooms.has(roomId) &&
+      !roomList.roomIdToParents.has(roomId)
     ) {
       this.spaceToRoom.set(cons.tabs.HOME, {
         roomId,
@@ -51,7 +51,10 @@ class Navigation extends EventEmitter {
       });
       return;
     }
-    if (this.selectedTab === cons.tabs.DIRECTS && roomList.directs.has(roomId)) {
+    if (
+      this.selectedTab === cons.tabs.DIRECTS &&
+      roomList.directs.has(roomId)
+    ) {
       this.spaceToRoom.set(cons.tabs.DIRECTS, {
         roomId,
         timestamp: Date.now(),
@@ -85,15 +88,18 @@ class Navigation extends EventEmitter {
     this.removeRecentRoom(prevSelectedRoomId);
     this.addRecentRoom(prevSelectedRoomId);
     this.removeRecentRoom(this.selectedRoomId);
-    if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
+    if (this.isRoomSettings && typeof this.selectedRoomId === "string") {
       this.isRoomSettings = !this.isRoomSettings;
-      this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+      this.emit(
+        cons.events.navigation.ROOM_SETTINGS_TOGGLED,
+        this.isRoomSettings
+      );
     }
     this.emit(
       cons.events.navigation.ROOM_SELECTED,
       this.selectedRoomId,
       prevSelectedRoomId,
-      eventId,
+      eventId
     );
   }
 
@@ -127,7 +133,9 @@ class Navigation extends EventEmitter {
       }
     }
 
-    const spaceInPath = [...this.selectedSpacePath].reverse().find((sId) => parents.has(sId));
+    const spaceInPath = [...this.selectedSpacePath]
+      .reverse()
+      .find((sId) => parents.has(sId));
     if (spaceInPath) {
       this._selectSpace(spaceInPath, false, false);
       return;
@@ -212,7 +220,9 @@ class Navigation extends EventEmitter {
     if (categorizedSpaces.has(spaceId)) {
       const categories = roomList.getCategorizedSpaces([spaceId]);
 
-      const latestSelectedRoom = this._getLatestSelectedRoomId([...categories.keys()]);
+      const latestSelectedRoom = this._getLatestSelectedRoomId([
+        ...categories.keys(),
+      ]);
 
       if (latestSelectedRoom) {
         this._selectRoom(latestSelectedRoom);
@@ -248,7 +258,10 @@ class Navigation extends EventEmitter {
         this._selectRoom(data.roomId);
         return;
       }
-      const children = tabId === cons.tabs.HOME ? roomList.getOrphanRooms() : [...roomList.directs];
+      const children =
+        tabId === cons.tabs.HOME
+          ? roomList.getOrphanRooms()
+          : [...roomList.directs];
       this._selectRoom(this._getLatestActiveRoomId(children));
       return;
     }
@@ -256,7 +269,7 @@ class Navigation extends EventEmitter {
   }
 
   removeRecentRoom(roomId) {
-    if (typeof roomId !== 'string') return;
+    if (typeof roomId !== "string") return;
     const roomIdIndex = this.recentRooms.indexOf(roomId);
     if (roomIdIndex >= 0) {
       this.recentRooms.splice(roomIdIndex, 1);
@@ -264,7 +277,7 @@ class Navigation extends EventEmitter {
   }
 
   addRecentRoom(roomId) {
-    if (typeof roomId !== 'string') return;
+    if (typeof roomId !== "string") return;
 
     this.recentRooms.push(roomId);
     if (this.recentRooms.length > 10) {
@@ -284,9 +297,10 @@ class Navigation extends EventEmitter {
   navigate(action) {
     const actions = {
       [cons.actions.navigation.SELECT_TAB]: () => {
-        const roomId = (
+        const roomId =
           action.tabId !== cons.tabs.HOME && action.tabId !== cons.tabs.DIRECTS
-        ) ? action.tabId : null;
+            ? action.tabId
+            : null;
 
         this._selectSpace(roomId, true);
         this._selectTab(action.tabId);
@@ -299,20 +313,27 @@ class Navigation extends EventEmitter {
         this._selectRoom(action.roomId, action.eventId);
       },
       [cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
-        this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText);
+        this.emit(
+          cons.events.navigation.SPACE_SETTINGS_OPENED,
+          action.roomId,
+          action.tabText
+        );
       },
       [cons.actions.navigation.OPEN_SPACE_MANAGE]: () => {
         this.emit(cons.events.navigation.SPACE_MANAGE_OPENED, action.roomId);
       },
       [cons.actions.navigation.OPEN_SPACE_ADDEXISTING]: () => {
-        this.emit(cons.events.navigation.SPACE_ADDEXISTING_OPENED, action.roomId);
+        this.emit(
+          cons.events.navigation.SPACE_ADDEXISTING_OPENED,
+          action.roomId
+        );
       },
       [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
         this.isRoomSettings = !this.isRoomSettings;
         this.emit(
           cons.events.navigation.ROOM_SETTINGS_TOGGLED,
           this.isRoomSettings,
-          action.tabText,
+          action.tabText
         );
       },
       [cons.actions.navigation.OPEN_SHORTCUT_SPACES]: () => {
@@ -322,26 +343,34 @@ class Navigation extends EventEmitter {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);
       },
       [cons.actions.navigation.OPEN_PUBLIC_ROOMS]: () => {
-        this.emit(cons.events.navigation.PUBLIC_ROOMS_OPENED, action.searchTerm);
+        this.emit(
+          cons.events.navigation.PUBLIC_ROOMS_OPENED,
+          action.searchTerm
+        );
       },
       [cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
         this.emit(
           cons.events.navigation.CREATE_ROOM_OPENED,
           action.isSpace,
-          action.parentId,
+          action.parentId
         );
       },
       [cons.actions.navigation.OPEN_JOIN_ALIAS]: () => {
-        this.emit(
-          cons.events.navigation.JOIN_ALIAS_OPENED,
-          action.term,
-        );
+        this.emit(cons.events.navigation.JOIN_ALIAS_OPENED, action.term);
       },
       [cons.actions.navigation.OPEN_INVITE_USER]: () => {
-        this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);
+        this.emit(
+          cons.events.navigation.INVITE_USER_OPENED,
+          action.roomId,
+          action.searchTerm
+        );
       },
       [cons.actions.navigation.OPEN_PROFILE_VIEWER]: () => {
-        this.emit(cons.events.navigation.PROFILE_VIEWER_OPENED, action.userId, action.roomId);
+        this.emit(
+          cons.events.navigation.PROFILE_VIEWER_OPENED,
+          action.userId,
+          action.roomId
+        );
       },
       [cons.actions.navigation.OPEN_SETTINGS]: () => {
         this.emit(cons.events.navigation.SETTINGS_OPENED, action.tabText);
@@ -353,21 +382,18 @@ class Navigation extends EventEmitter {
         this.emit(
           cons.events.navigation.EMOJIBOARD_OPENED,
           action.cords,
-          action.requestEmojiCallback,
+          action.requestEmojiCallback
         );
       },
       [cons.actions.navigation.OPEN_READRECEIPTS]: () => {
         this.emit(
           cons.events.navigation.READRECEIPTS_OPENED,
           action.roomId,
-          action.userIds,
+          action.userIds
         );
       },
       [cons.actions.navigation.OPEN_VIEWSOURCE]: () => {
-        this.emit(
-          cons.events.navigation.VIEWSOURCE_OPENED,
-          action.event,
-        );
+        this.emit(cons.events.navigation.VIEWSOURCE_OPENED, action.event);
       },
       [cons.actions.navigation.CLICK_REPLY_TO]: () => {
         this.emit(
@@ -375,14 +401,11 @@ class Navigation extends EventEmitter {
           action.userId,
           action.eventId,
           action.body,
-          action.formattedBody,
+          action.formattedBody
         );
       },
       [cons.actions.navigation.OPEN_SEARCH]: () => {
-        this.emit(
-          cons.events.navigation.SEARCH_OPENED,
-          action.term,
-        );
+        this.emit(cons.events.navigation.SEARCH_OPENED, action.term);
       },
       [cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU]: () => {
         this.emit(
@@ -390,7 +413,7 @@ class Navigation extends EventEmitter {
           action.placement,
           action.cords,
           action.render,
-          action.afterClose,
+          action.afterClose
         );
       },
       [cons.actions.navigation.OPEN_REUSABLE_DIALOG]: () => {
@@ -398,14 +421,14 @@ class Navigation extends EventEmitter {
           cons.events.navigation.REUSABLE_DIALOG_OPENED,
           action.title,
           action.render,
-          action.afterClose,
+          action.afterClose
         );
       },
       [cons.actions.navigation.OPEN_EMOJI_VERIFICATION]: () => {
         this.emit(
           cons.events.navigation.EMOJI_VERIFICATION_OPENED,
           action.request,
-          action.targetDevice,
+          action.targetDevice
         );
       },
     };
diff --git a/src/client/state/secretStorageKeys.js b/src/client/state/secretStorageKeys.js
index 7439e7a5..512322df 100644
--- a/src/client/state/secretStorageKeys.js
+++ b/src/client/state/secretStorageKeys.js
@@ -2,7 +2,7 @@ const secretStorageKeys = new Map();
 
 export function storePrivateKey(keyId, privateKey) {
   if (privateKey instanceof Uint8Array === false) {
-    throw new Error('Unable to store, privateKey is invalid.');
+    throw new Error("Unable to store, privateKey is invalid.");
   }
   secretStorageKeys.set(keyId, privateKey);
 }
diff --git a/src/client/state/settings.js b/src/client/state/settings.js
index 32f55fcc..b88a7634 100644
--- a/src/client/state/settings.js
+++ b/src/client/state/settings.js
@@ -1,10 +1,10 @@
-import EventEmitter from 'events';
-import appDispatcher from '../dispatcher';
+import EventEmitter from "events";
+import appDispatcher from "../dispatcher";
 
-import cons from './cons';
+import cons from "./cons";
 
 function getSettings() {
-  const settings = localStorage.getItem('settings');
+  const settings = localStorage.getItem("settings");
   if (settings === null) return null;
   return JSON.parse(settings);
 }
@@ -13,14 +13,14 @@ function setSettings(key, value) {
   let settings = getSettings();
   if (settings === null) settings = {};
   settings[key] = value;
-  localStorage.setItem('settings', JSON.stringify(settings));
+  localStorage.setItem("settings", JSON.stringify(settings));
 }
 
 class Settings extends EventEmitter {
   constructor() {
     super();
 
-    this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
+    this.themes = ["", "silver-theme", "dark-theme", "butter-theme"];
     this.themeIndex = this.getThemeIndex();
 
     this.useSystemTheme = this.getUseSystemTheme();
@@ -31,15 +31,18 @@ class Settings extends EventEmitter {
     this._showNotifications = this.getShowNotifications();
     this.isNotificationSounds = this.getIsNotificationSounds();
 
-    this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
+    this.isTouchScreenDevice =
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0;
   }
 
   getThemeIndex() {
-    if (typeof this.themeIndex === 'number') return this.themeIndex;
+    if (typeof this.themeIndex === "number") return this.themeIndex;
 
     const settings = getSettings();
     if (settings === null) return 0;
-    if (typeof settings.themeIndex === 'undefined') return 0;
+    if (typeof settings.themeIndex === "undefined") return 0;
     // eslint-disable-next-line radix
     return parseInt(settings.themeIndex);
   }
@@ -49,9 +52,9 @@ class Settings extends EventEmitter {
   }
 
   _clearTheme() {
-    document.body.classList.remove('system-theme');
+    document.body.classList.remove("system-theme");
     this.themes.forEach((themeName) => {
-      if (themeName === '') return;
+      if (themeName === "") return;
       document.body.classList.remove(themeName);
     });
   }
@@ -59,7 +62,7 @@ class Settings extends EventEmitter {
   applyTheme() {
     this._clearTheme();
     if (this.useSystemTheme) {
-      document.body.classList.add('system-theme');
+      document.body.classList.add("system-theme");
     } else if (this.themes[this.themeIndex]) {
       document.body.classList.add(this.themes[this.themeIndex]);
     }
@@ -67,83 +70,87 @@ class Settings extends EventEmitter {
 
   setTheme(themeIndex) {
     this.themeIndex = themeIndex;
-    setSettings('themeIndex', this.themeIndex);
+    setSettings("themeIndex", this.themeIndex);
     this.applyTheme();
   }
 
   toggleUseSystemTheme() {
     this.useSystemTheme = !this.useSystemTheme;
-    setSettings('useSystemTheme', this.useSystemTheme);
+    setSettings("useSystemTheme", this.useSystemTheme);
     this.applyTheme();
 
     this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
   }
 
   getUseSystemTheme() {
-    if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
+    if (typeof this.useSystemTheme === "boolean") return this.useSystemTheme;
 
     const settings = getSettings();
     if (settings === null) return true;
-    if (typeof settings.useSystemTheme === 'undefined') return true;
+    if (typeof settings.useSystemTheme === "undefined") return true;
     return settings.useSystemTheme;
   }
 
   getIsMarkdown() {
-    if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
+    if (typeof this.isMarkdown === "boolean") return this.isMarkdown;
 
     const settings = getSettings();
     if (settings === null) return true;
-    if (typeof settings.isMarkdown === 'undefined') return true;
+    if (typeof settings.isMarkdown === "undefined") return true;
     return settings.isMarkdown;
   }
 
   getHideMembershipEvents() {
-    if (typeof this.hideMembershipEvents === 'boolean') return this.hideMembershipEvents;
+    if (typeof this.hideMembershipEvents === "boolean")
+      return this.hideMembershipEvents;
 
     const settings = getSettings();
     if (settings === null) return false;
-    if (typeof settings.hideMembershipEvents === 'undefined') return false;
+    if (typeof settings.hideMembershipEvents === "undefined") return false;
     return settings.hideMembershipEvents;
   }
 
   getHideNickAvatarEvents() {
-    if (typeof this.hideNickAvatarEvents === 'boolean') return this.hideNickAvatarEvents;
+    if (typeof this.hideNickAvatarEvents === "boolean")
+      return this.hideNickAvatarEvents;
 
     const settings = getSettings();
     if (settings === null) return true;
-    if (typeof settings.hideNickAvatarEvents === 'undefined') return true;
+    if (typeof settings.hideNickAvatarEvents === "undefined") return true;
     return settings.hideNickAvatarEvents;
   }
 
   getIsPeopleDrawer() {
-    if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
+    if (typeof this.isPeopleDrawer === "boolean") return this.isPeopleDrawer;
 
     const settings = getSettings();
     if (settings === null) return true;
-    if (typeof settings.isPeopleDrawer === 'undefined') return true;
+    if (typeof settings.isPeopleDrawer === "undefined") return true;
     return settings.isPeopleDrawer;
   }
 
   get showNotifications() {
-    if (window.Notification?.permission !== 'granted') return false;
+    if (window.Notification?.permission !== "granted") return false;
     return this._showNotifications;
   }
 
   getShowNotifications() {
-    if (typeof this._showNotifications === 'boolean') return this._showNotifications;
+    if (typeof this._showNotifications === "boolean")
+      return this._showNotifications;
 
     const settings = getSettings();
     if (settings === null) return true;
-    if (typeof settings.showNotifications === 'undefined') return true;
+    if (typeof settings.showNotifications === "undefined") return true;
     return settings.showNotifications;
   }
 
   getIsNotificationSounds() {
-    if (typeof this.isNotificationSounds === 'boolean') return this.isNotificationSounds;
+    if (typeof this.isNotificationSounds === "boolean")
+      return this.isNotificationSounds;
 
     const settings = getSettings();
     if (settings === null) return true;
-    if (typeof settings.isNotificationSounds === 'undefined') return true;
+    if (typeof settings.isNotificationSounds === "undefined") return true;
     return settings.isNotificationSounds;
   }
 
@@ -154,37 +161,52 @@ class Settings extends EventEmitter {
       },
       [cons.actions.settings.TOGGLE_MARKDOWN]: () => {
         this.isMarkdown = !this.isMarkdown;
-        setSettings('isMarkdown', this.isMarkdown);
+        setSettings("isMarkdown", this.isMarkdown);
         this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
       },
       [cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
         this.isPeopleDrawer = !this.isPeopleDrawer;
-        setSettings('isPeopleDrawer', this.isPeopleDrawer);
-        this.emit(cons.events.settings.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawer);
+        setSettings("isPeopleDrawer", this.isPeopleDrawer);
+        this.emit(
+          cons.events.settings.PEOPLE_DRAWER_TOGGLED,
+          this.isPeopleDrawer
+        );
       },
       [cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT]: () => {
         this.hideMembershipEvents = !this.hideMembershipEvents;
-        setSettings('hideMembershipEvents', this.hideMembershipEvents);
-        this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
+        setSettings("hideMembershipEvents", this.hideMembershipEvents);
+        this.emit(
+          cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED,
+          this.hideMembershipEvents
+        );
       },
       [cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
         this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
-        setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
-        this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
+        setSettings("hideNickAvatarEvents", this.hideNickAvatarEvents);
+        this.emit(
+          cons.events.settings.NICKAVATAR_EVENTS_TOGGLED,
+          this.hideNickAvatarEvents
+        );
       },
       [cons.actions.settings.TOGGLE_NOTIFICATIONS]: async () => {
-        if (window.Notification?.permission !== 'granted') {
+        if (window.Notification?.permission !== "granted") {
           this._showNotifications = false;
         } else {
           this._showNotifications = !this._showNotifications;
         }
-        setSettings('showNotifications', this._showNotifications);
-        this.emit(cons.events.settings.NOTIFICATIONS_TOGGLED, this._showNotifications);
+        setSettings("showNotifications", this._showNotifications);
+        this.emit(
+          cons.events.settings.NOTIFICATIONS_TOGGLED,
+          this._showNotifications
+        );
       },
       [cons.actions.settings.TOGGLE_NOTIFICATION_SOUNDS]: () => {
         this.isNotificationSounds = !this.isNotificationSounds;
-        setSettings('isNotificationSounds', this.isNotificationSounds);
-        this.emit(cons.events.settings.NOTIFICATION_SOUNDS_TOGGLED, this.isNotificationSounds);
+        setSettings("isNotificationSounds", this.isNotificationSounds);
+        this.emit(
+          cons.events.settings.NOTIFICATION_SOUNDS_TOGGLED,
+          this.isNotificationSounds
+        );
       },
     };
 
diff --git a/src/font.js b/src/font.js
index 94b1f478..153a26e5 100644
--- a/src/font.js
+++ b/src/font.js
@@ -1,5 +1,5 @@
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import '@fontsource/inter/variable.css';
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+import "@fontsource/inter/variable.css";
diff --git a/src/index.jsx b/src/index.jsx
index a252f6f0..b399968a 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import ReactDom from 'react-dom';
-import './font';
-import './index.scss';
+import React from "react";
+import ReactDom from "react-dom";
+import "./font";
+import "./index.scss";
 
-import settings from './client/state/settings';
+import settings from "./client/state/settings";
 
-import App from './app/pages/App';
+import App from "./app/pages/App";
 
 settings.applyTheme();
 
-ReactDom.render(<App />, document.getElementById('root'));
+ReactDom.render(<App />, document.getElementById("root"));
diff --git a/src/index.scss b/src/index.scss
index 39d0612b..9c5f705b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,14 +1,13 @@
-@use './app/partials/screen';
+@use "./app/partials/screen";
 
 :root {
-
   /* background color | --bg-[background type]: value */
-  --bg-surface: #FFFFFF;
-  --bg-surface-transparent: #FFFFFF00;
-  --bg-surface-low: #F6F6F6;
-  --bg-surface-low-transparent: #F6F6F600;
-  --bg-surface-extra-low: #F6F6F6;
-  --bg-surface-extra-low-transparent: #F6F6F600;
+  --bg-surface: #ffffff;
+  --bg-surface-transparent: #ffffff00;
+  --bg-surface-low: #f6f6f6;
+  --bg-surface-low-transparent: #f6f6f600;
+  --bg-surface-extra-low: #f6f6f6;
+  --bg-surface-extra-low-transparent: #f6f6f600;
   --bg-surface-hover: rgba(0, 0, 0, 3%);
   --bg-surface-active: rgba(0, 0, 0, 5%);
   --bg-surface-border: rgba(0, 0, 0, 6%);
@@ -22,7 +21,7 @@
   --bg-positive-hover: rgba(69, 184, 59, 8%);
   --bg-positive-active: rgba(69, 184, 59, 15%);
   --bg-positive-border: rgba(69, 184, 59, 40%);
-  
+
   --bg-caution: rgb(255, 179, 0);
   --bg-caution-hover: rgba(255, 179, 0, 8%);
   --bg-caution-active: rgba(255, 179, 0, 15%);
@@ -37,18 +36,18 @@
   --bg-badge: #989898;
   --bg-ping: hsla(137deg, 100%, 68%, 40%);
   --bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
-  --bg-divider: hsla(0, 0%, 0%, .1);
+  --bg-divider: hsla(0, 0%, 0%, 0.1);
 
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: #000000;
   --tc-surface-normal: rgba(0, 0, 0, 78%);
   --tc-surface-normal-low: rgba(0, 0, 0, 60%);
   --tc-surface-low: rgba(0, 0, 0, 48%);
-  
+
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 68%);
   --tc-primary-low: rgba(255, 255, 255, 40%);
-  
+
   --tc-positive-high: var(--bg-positive);
   --tc-positive-normal: rgb(69, 184, 59, 80%);
   --tc-positive-low: rgb(69, 184, 59, 60%);
@@ -56,7 +55,7 @@
   --tc-caution-high: var(--bg-caution);
   --tc-caution-normal: rgb(255, 179, 0, 80%);
   --tc-caution-low: rgb(255, 179, 0, 60%);
-  
+
   --tc-danger-high: var(--bg-danger);
   --tc-danger-normal: rgba(240, 71, 71, 88%);
   --tc-danger-low: rgba(240, 71, 71, 60%);
@@ -66,7 +65,6 @@
   --tc-tooltip: white;
   --tc-badge: white;
 
-
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-high: #272727;
   --ic-surface-normal: #626262;
@@ -102,7 +100,6 @@
   --av-small: 36px;
   --av-extra-small: 24px;
 
-
   /* shadow and overlay */
   --bg-overlay: rgba(0, 0, 0, 20%);
   --bg-overlay-low: rgba(0, 0, 0, 50%);
@@ -124,11 +121,9 @@
   --bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
   --bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
 
-
   /* border */
   --bo-radius: 8px;
 
-
   /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 36px;
   --ls-h1: -1.5px;
@@ -160,7 +155,6 @@
   --fw-medium: 500;
   --fw-bold: 700;
 
-
   /* spacing | --sp-[space]: value */
   --sp-none: 0px;
   --sp-ultra-tight: 4px;
@@ -170,17 +164,18 @@
   --sp-loose: 20px;
   --sp-extra-loose: 32px;
 
-
   /* other */
   --border-width: 1px;
   --header-height: 54px;
   --navigation-sidebar-width: calc(64px + var(--border-width));
   --navigation-drawer-width: calc(280px + var(--border-width));
-  --navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
+  --navigation-width: calc(
+    var(--navigation-sidebar-width) + var(--navigation-drawer-width)
+  );
   --people-drawer-width: calc(268px - var(--border-width));
 
   --popup-window-drawer-width: 280px;
-  
+
   @include screen.smallerThan(tabletBreakpoint) {
     --navigation-drawer-width: calc(240px + var(--border-width));
     --people-drawer-width: calc(256px - var(--border-width));
@@ -191,11 +186,10 @@
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
   --fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
   --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
-  
-  --font-primary: 'Roboto', sans-serif;
-  --font-secondary: 'Roboto', sans-serif;
-}
 
+  --font-primary: "Roboto", sans-serif;
+  --font-secondary: "Roboto", sans-serif;
+}
 
 .silver-theme {
   /* background color | --bg-[background type]: value */
@@ -228,15 +222,14 @@
   --bg-badge: hsl(0, 0%, 75%);
   --bg-ping: hsla(137deg, 100%, 38%, 40%);
   --bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
-  --bg-divider: hsla(0, 0%, 100%, .1);
-
+  --bg-divider: hsla(0, 0%, 100%, 0.1);
 
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgba(255, 255, 255, 98%);
   --tc-surface-normal: rgba(255, 255, 255, 94%);
   --tc-surface-normal-low: rgba(255, 255, 255, 60%);
   --tc-surface-low: rgba(255, 255, 255, 58%);
-  
+
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 0.68);
   --tc-primary-low: rgba(255, 255, 255, 0.4);
@@ -262,7 +255,7 @@
     --mx-uc-7: hsl(243, 100%, 74%);
     --mx-uc-8: hsl(94, 66%, 50%);
   }
-  
+
   /* shadow and overlay */
   --bg-overlay: rgba(0, 0, 0, 60%);
   --bg-overlay-low: rgba(0, 0, 0, 80%);
@@ -274,7 +267,7 @@
 
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
-  
+
   /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 35.6px;
 
@@ -292,7 +285,7 @@
   /* override normal font weight for dark mode */
   --fw-normal: 350;
 
-  --font-secondary: 'InterVariable', 'Roboto', sans-serif;
+  --font-secondary: "InterVariable", "Roboto", sans-serif;
 }
 
 .dark-theme,
@@ -317,14 +310,12 @@
 
   --bg-badge: #c4c1ab;
 
-  
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgb(255, 251, 222, 94%);
   --tc-surface-normal: rgba(255, 251, 222, 94%);
-  --tc-surface-normal-low: rgba(255, 251, 222, 60%); 
+  --tc-surface-normal-low: rgba(255, 251, 222, 60%);
   --tc-surface-low: rgba(255, 251, 222, 58%);
 
-
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-high: rgb(255, 251, 222);
   --ic-surface-normal: rgba(255, 251, 222, 84%);
@@ -387,9 +378,11 @@ body {
   height: 100%;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 }
 a {
@@ -428,16 +421,16 @@ button {
 textarea,
 input,
 input[type],
-input[type=text],
-input[type=username],
-input[type=password],
-input[type=email],
-input[type=checkbox] {
+input[type="text"],
+input[type="username"],
+input[type="password"],
+input[type="email"],
+input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
-input[type=checkbox] {
+input[type="checkbox"] {
   margin: 0;
   padding: 0;
   width: 20px;
@@ -468,11 +461,11 @@ textarea {
 }
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
@@ -484,4 +477,4 @@ audio:not([controls]) {
   display: flex;
   justify-content: center;
   align-items: center;
-}
\ No newline at end of file
+}
diff --git a/src/util/AsyncSearch.js b/src/util/AsyncSearch.js
index d0a2130e..af961a4d 100644
--- a/src/util/AsyncSearch.js
+++ b/src/util/AsyncSearch.js
@@ -1,4 +1,4 @@
-import EventEmitter from 'events';
+import EventEmitter from "events";
 
 class AsyncSearch extends EventEmitter {
   constructor() {
@@ -6,7 +6,7 @@ class AsyncSearch extends EventEmitter {
 
     this._reset();
 
-    this.RESULT_SENT = 'RESULT_SENT';
+    this.RESULT_SENT = "RESULT_SENT";
   }
 
   _reset() {
@@ -59,7 +59,7 @@ class AsyncSearch extends EventEmitter {
     this._softReset();
 
     this.term = this._normalize(term);
-    if (this.term === '') {
+    if (this.term === "") {
       this._sendFindings();
       return;
     }
@@ -78,7 +78,11 @@ class AsyncSearch extends EventEmitter {
     ) {
       if (this._match(this.dataList[searchIndex])) {
         this.findingList.push(this.dataList[searchIndex]);
-        if (typeof this.limit === 'number' && this.findingList.length >= this.limit) break;
+        if (
+          typeof this.limit === "number" &&
+          this.findingList.length >= this.limit
+        )
+          break;
       }
 
       const calcFinishTime = window.performance.now();
@@ -93,20 +97,20 @@ class AsyncSearch extends EventEmitter {
       }
     }
 
-    if (lastFindingCount !== this.findingList.length
-      || lastFindingCount === 0) this._sendFindings();
+    if (lastFindingCount !== this.findingList.length || lastFindingCount === 0)
+      this._sendFindings();
     this._softReset();
   }
 
   _match(item) {
-    if (typeof item === 'string') {
+    if (typeof item === "string") {
       return this._compare(item);
     }
-    if (typeof item === 'object') {
+    if (typeof item === "object") {
       if (Array.isArray(this.searchKeys)) {
         return !!this.searchKeys.find((key) => this._compare(item[key]));
       }
-      if (typeof this.searchKeys === 'string') {
+      if (typeof this.searchKeys === "string") {
         return this._compare(item[this.searchKeys]);
       }
     }
@@ -114,16 +118,16 @@ class AsyncSearch extends EventEmitter {
   }
 
   _compare(item) {
-    if (typeof item !== 'string') return false;
+    if (typeof item !== "string") return false;
     const myItem = this._normalize(item);
     if (this.isContain) return myItem.indexOf(this.term) !== -1;
     return myItem.startsWith(this.term);
   }
 
   _normalize(item) {
-    let myItem = item.normalize(this.normalizeUnicode ? 'NFKC' : 'NFC');
+    let myItem = item.normalize(this.normalizeUnicode ? "NFKC" : "NFC");
     if (!this.isCaseSensitive) myItem = myItem.toLocaleLowerCase();
-    if (this.ignoreWhitespace) myItem = myItem.replace(/\s/g, '');
+    if (this.ignoreWhitespace) myItem = myItem.replace(/\s/g, "");
     return myItem;
   }
 
diff --git a/src/util/Postie.js b/src/util/Postie.js
index 73c8f9e8..5d796931 100644
--- a/src/util/Postie.js
+++ b/src/util/Postie.js
@@ -15,7 +15,9 @@ class Postie {
     const subscribers = this._getSubscribers(topic);
     const inboxes = subscribers.get(address);
     if (inboxes === undefined) {
-      throw new Error(`Inbox on topic:"${topic}" at address:"${address}" doesn't exist.`);
+      throw new Error(
+        `Inbox on topic:"${topic}" at address:"${address}" doesn't exist.`
+      );
     }
     return inboxes;
   }
@@ -30,9 +32,7 @@ class Postie {
   }
 
   hasTopicAndSubscriber(topic, address) {
-    return (this.hasTopic(topic))
-      ? this.hasSubscriber(topic, address)
-      : false;
+    return this.hasTopic(topic) ? this.hasSubscriber(topic, address) : false;
   }
 
   /**
@@ -41,8 +41,8 @@ class Postie {
    * @param {function} inbox - The inbox function to receive post data
    */
   subscribe(topic, address, inbox) {
-    if (typeof inbox !== 'function') {
-      throw new TypeError('Inbox  must be a function.');
+    if (typeof inbox !== "function") {
+      throw new TypeError("Inbox  must be a function.");
     }
 
     if (this._topics.has(topic) === false) {
@@ -59,12 +59,19 @@ class Postie {
 
   unsubscribe(topic, address, inbox) {
     const subscribers = this._getSubscribers(topic);
-    if (!subscribers) throw new Error(`Unable to unsubscribe. Topic: "${topic}" doesn't exist.`);
+    if (!subscribers)
+      throw new Error(
+        `Unable to unsubscribe. Topic: "${topic}" doesn't exist.`
+      );
 
     const inboxes = subscribers.get(address);
-    if (!inboxes) throw new Error(`Unable to unsubscribe. Subscriber on topic:"${topic}" at address:"${address}" doesn't exist`);
+    if (!inboxes)
+      throw new Error(
+        `Unable to unsubscribe. Subscriber on topic:"${topic}" at address:"${address}" doesn't exist`
+      );
 
-    if (!inboxes.delete(inbox)) throw new Error('Unable to unsubscribe. Inbox doesn\'t exist');
+    if (!inboxes.delete(inbox))
+      throw new Error("Unable to unsubscribe. Inbox doesn't exist");
 
     if (inboxes.size === 0) subscribers.delete(address);
     if (subscribers.size === 0) this._topics.delete(topic);
@@ -78,12 +85,14 @@ class Postie {
   post(topic, address, data) {
     const sendPost = (inboxes, addr) => {
       if (inboxes === undefined) {
-        throw new Error(`Unable to post on topic:"${topic}" at address:"${addr}". Subscriber doesn't exist.`);
+        throw new Error(
+          `Unable to post on topic:"${topic}" at address:"${addr}". Subscriber doesn't exist.`
+        );
       }
       inboxes.forEach((inbox) => inbox(data));
     };
 
-    if (typeof address === 'string') {
+    if (typeof address === "string") {
       sendPost(this._getInboxes(topic, address), address);
       return;
     }
diff --git a/src/util/colorMXID.js b/src/util/colorMXID.js
index 4d303aae..75c70a0d 100644
--- a/src/util/colorMXID.js
+++ b/src/util/colorMXID.js
@@ -10,7 +10,7 @@ export function hashCode(str) {
   for (i = 0; i < str.length; i += 1) {
     chr = str.charCodeAt(i);
     // eslint-disable-next-line no-bitwise
-    hash = ((hash << 5) - hash) + chr;
+    hash = (hash << 5) - hash + chr;
     // eslint-disable-next-line no-bitwise
     hash |= 0;
   }
diff --git a/src/util/common.js b/src/util/common.js
index 2affe27d..f2e261c6 100644
--- a/src/util/common.js
+++ b/src/util/common.js
@@ -1,10 +1,10 @@
 /* eslint-disable max-classes-per-file */
 export function bytesToSize(bytes) {
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-  if (bytes === 0) return 'n/a';
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (bytes === 0) return "n/a";
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   if (i === 0) return `${bytes} ${sizes[i]}`;
-  return `${(bytes / (1024 ** i)).toFixed(1)} ${sizes[i]}`;
+  return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
 }
 
 export function diffMinutes(dt2, dt1) {
@@ -15,9 +15,9 @@ export function diffMinutes(dt2, dt1) {
 
 export function isInSameDay(dt2, dt1) {
   return (
-    dt2.getFullYear() === dt1.getFullYear()
-    && dt2.getMonth() === dt1.getMonth()
-    && dt2.getDate() === dt1.getDate()
+    dt2.getFullYear() === dt1.getFullYear() &&
+    dt2.getMonth() === dt1.getMonth() &&
+    dt2.getDate() === dt1.getDate()
   );
 }
 
@@ -48,7 +48,7 @@ export function getEventCords(ev, targetSelector) {
 }
 
 export function abbreviateNumber(number) {
-  if (number > 99) return '99+';
+  if (number > 99) return "99+";
   return number;
 }
 
@@ -120,9 +120,9 @@ export function cssVar(name) {
 }
 
 export function setFavicon(url) {
-  const favicon = document.querySelector('#favicon');
+  const favicon = document.querySelector("#favicon");
   if (!favicon) return;
-  favicon.setAttribute('href', url);
+  favicon.setAttribute("href", url);
 }
 
 export function copyToClipboard(text) {
@@ -130,15 +130,15 @@ export function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
   } else {
     const host = document.body;
-    const copyInput = document.createElement('input');
-    copyInput.style.position = 'fixed';
-    copyInput.style.opacity = '0';
+    const copyInput = document.createElement("input");
+    copyInput.style.position = "fixed";
+    copyInput.style.opacity = "0";
     copyInput.value = text;
     host.append(copyInput);
 
     copyInput.select();
     copyInput.setSelectionRange(0, 99999);
-    document.execCommand('Copy');
+    document.execCommand("Copy");
     copyInput.remove();
   }
 }
@@ -189,10 +189,10 @@ export function scaleDownImage(imageFile, width, height) {
         newWidth = width;
       }
 
-      const canvas = document.createElement('canvas');
+      const canvas = document.createElement("canvas");
       canvas.width = newWidth;
       canvas.height = newHeight;
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext("2d");
       ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
       canvas.toBlob((thumbnail) => {
@@ -212,7 +212,7 @@ export function scaleDownImage(imageFile, width, height) {
  * @returns {RegExp}
  */
 export function idRegex(sigil, flags, prefix) {
-  const servername = '(?:[a-zA-Z0-9-.]*[a-zA-Z0-9]+|\\[\\S+?\\])(?::\\d+)?';
+  const servername = "(?:[a-zA-Z0-9-.]*[a-zA-Z0-9]+|\\[\\S+?\\])(?::\\d+)?";
   return new RegExp(`${prefix}(${sigil}\\S+:${servername})`, flags);
 }
 
diff --git a/src/util/cryptE2ERoomKeys.js b/src/util/cryptE2ERoomKeys.js
index 50254a3c..219c65be 100644
--- a/src/util/cryptE2ERoomKeys.js
+++ b/src/util/cryptE2ERoomKeys.js
@@ -17,7 +17,7 @@ function friendlyError(msg, friendlyText) {
 }
 
 function cryptoFailMsg() {
-  return 'Your browser does not support the required cryptography extensions';
+  return "Your browser does not support the required cryptography extensions";
 }
 /**
  * Derive the AES and HMAC-SHA-256 keys for the file
@@ -33,11 +33,11 @@ async function deriveKeys(salt, iterations, password) {
   let key;
   try {
     key = await subtleCrypto.importKey(
-      'raw',
+      "raw",
       new TextEncoder().encode(password),
-      { name: 'PBKDF2' },
+      { name: "PBKDF2" },
       false,
-      ['deriveBits'],
+      ["deriveBits"]
     );
   } catch (e) {
     throw friendlyError(`subtleCrypto.importKey failed: ${e}`, cryptoFailMsg());
@@ -47,46 +47,56 @@ async function deriveKeys(salt, iterations, password) {
   try {
     keybits = await subtleCrypto.deriveBits(
       {
-        name: 'PBKDF2',
+        name: "PBKDF2",
         salt,
         iterations,
-        hash: 'SHA-512',
+        hash: "SHA-512",
       },
       key,
-      512,
+      512
     );
   } catch (e) {
-    throw friendlyError(`subtleCrypto.deriveBits failed: ${e}`, cryptoFailMsg());
+    throw friendlyError(
+      `subtleCrypto.deriveBits failed: ${e}`,
+      cryptoFailMsg()
+    );
   }
 
   const now = new Date();
-  console.log(`E2e import/export: deriveKeys took ${(now - start)}ms`);
+  console.log(`E2e import/export: deriveKeys took ${now - start}ms`);
 
   const aesKey = keybits.slice(0, 32);
   const hmacKey = keybits.slice(32);
 
-  const aesProm = subtleCrypto.importKey(
-    'raw',
-    aesKey,
-    { name: 'AES-CTR' },
-    false,
-    ['encrypt', 'decrypt'],
-  ).catch((e) => {
-    throw friendlyError(`subtleCrypto.importKey failed for AES key: ${e}`, cryptoFailMsg());
-  });
+  const aesProm = subtleCrypto
+    .importKey("raw", aesKey, { name: "AES-CTR" }, false, [
+      "encrypt",
+      "decrypt",
+    ])
+    .catch((e) => {
+      throw friendlyError(
+        `subtleCrypto.importKey failed for AES key: ${e}`,
+        cryptoFailMsg()
+      );
+    });
 
-  const hmacProm = subtleCrypto.importKey(
-    'raw',
-    hmacKey,
-    {
-      name: 'HMAC',
-      hash: { name: 'SHA-256' },
-    },
-    false,
-    ['sign', 'verify'],
-  ).catch((e) => {
-    throw friendlyError(`subtleCrypto.importKey failed for HMAC key: ${e}`, cryptoFailMsg());
-  });
+  const hmacProm = subtleCrypto
+    .importKey(
+      "raw",
+      hmacKey,
+      {
+        name: "HMAC",
+        hash: { name: "SHA-256" },
+      },
+      false,
+      ["sign", "verify"]
+    )
+    .catch((e) => {
+      throw friendlyError(
+        `subtleCrypto.importKey failed for HMAC key: ${e}`,
+        cryptoFailMsg()
+      );
+    });
 
   // eslint-disable-next-line no-return-await
   return await Promise.all([aesProm, hmacProm]);
@@ -121,8 +131,8 @@ function encodeBase64(uint8Array) {
   return window.btoa(latin1String);
 }
 
-const HEADER_LINE = '-----BEGIN MEGOLM SESSION DATA-----';
-const TRAILER_LINE = '-----END MEGOLM SESSION DATA-----';
+const HEADER_LINE = "-----BEGIN MEGOLM SESSION DATA-----";
+const TRAILER_LINE = "-----END MEGOLM SESSION DATA-----";
 
 /**
  * Unbase64 an ascii-armoured megolm key file
@@ -141,9 +151,9 @@ function unpackMegolmKeyFile(data) {
   // look for the start line
   let lineStart = 0;
   while (1) {
-    const lineEnd = fileStr.indexOf('\n', lineStart);
+    const lineEnd = fileStr.indexOf("\n", lineStart);
     if (lineEnd < 0) {
-      throw new Error('Header line not found');
+      throw new Error("Header line not found");
     }
     const line = fileStr.slice(lineStart, lineEnd).trim();
 
@@ -159,14 +169,16 @@ function unpackMegolmKeyFile(data) {
 
   // look for the end line
   while (1) {
-    const lineEnd = fileStr.indexOf('\n', lineStart);
-    const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim();
+    const lineEnd = fileStr.indexOf("\n", lineStart);
+    const line = fileStr
+      .slice(lineStart, lineEnd < 0 ? undefined : lineEnd)
+      .trim();
     if (line === TRAILER_LINE) {
       break;
     }
 
     if (lineEnd < 0) {
-      throw new Error('Trailer line not found');
+      throw new Error("Trailer line not found");
     }
 
     // start the next line after the newline
@@ -177,7 +189,6 @@ function unpackMegolmKeyFile(data) {
   return decodeBase64(fileStr.slice(dataStart, dataEnd));
 }
 
-
 /**
  * ascii-armour a  megolm key file
  *
@@ -189,20 +200,20 @@ function unpackMegolmKeyFile(data) {
 function packMegolmKeyFile(data) {
   // we split into lines before base64ing, because encodeBase64 doesn't deal
   // terribly well with large arrays.
-  const LINE_LENGTH = ((72 * 4) / 3);
+  const LINE_LENGTH = (72 * 4) / 3;
   const nLines = Math.ceil(data.length / LINE_LENGTH);
   const lines = new Array(nLines + 3);
   lines[0] = HEADER_LINE;
   let o = 0;
   let i;
   for (i = 1; i <= nLines; i += 1) {
-    lines[i] = encodeBase64(data.subarray(o, o+LINE_LENGTH));
+    lines[i] = encodeBase64(data.subarray(o, o + LINE_LENGTH));
     o += LINE_LENGTH;
   }
   lines[i] = TRAILER_LINE;
   i += 1;
-  lines[i] = '';
-  return (new TextEncoder().encode(lines.join('\n'))).buffer;
+  lines[i] = "";
+  return new TextEncoder().encode(lines.join("\n")).buffer;
 }
 
 export async function decryptMegolmKeyFile(data, password) {
@@ -210,22 +221,23 @@ export async function decryptMegolmKeyFile(data, password) {
 
   // check we have a version byte
   if (body.length < 1) {
-    throw friendlyError('Invalid file: too short', 'Not a valid keyfile');
+    throw friendlyError("Invalid file: too short", "Not a valid keyfile");
   }
 
   const version = body[0];
   if (version !== 1) {
-    throw friendlyError('Unsupported version', 'Not a valid keyfile');
+    throw friendlyError("Unsupported version", "Not a valid keyfile");
   }
 
   const ciphertextLength = body.length - (1 + 16 + 16 + 4 + 32);
   if (ciphertextLength < 0) {
-    throw friendlyError('Invalid file: too short', 'Not a valid keyfile');
+    throw friendlyError("Invalid file: too short", "Not a valid keyfile");
   }
 
   const salt = body.subarray(1, 1 + 16);
   const iv = body.subarray(17, 17 + 16);
-  const iterations = body[33] << 24 | body[34] << 16 | body[35] << 8 | body[36];
+  const iterations =
+    (body[33] << 24) | (body[34] << 16) | (body[35] << 8) | body[36];
   const ciphertext = body.subarray(37, 37 + ciphertextLength);
   const hmac = body.subarray(-32);
 
@@ -235,28 +247,31 @@ export async function decryptMegolmKeyFile(data, password) {
   let isValid;
   try {
     isValid = await subtleCrypto.verify(
-      { name: 'HMAC' },
+      { name: "HMAC" },
       hmacKey,
       hmac,
-      toVerify,
+      toVerify
     );
   } catch (e) {
     throw friendlyError(`subtleCrypto.verify failed: ${e}`, cryptoFailMsg());
   }
   if (!isValid) {
-    throw friendlyError('hmac mismatch', 'Authentication check failed: Incorrect password?');
+    throw friendlyError(
+      "hmac mismatch",
+      "Authentication check failed: Incorrect password?"
+    );
   }
 
   let plaintext;
   try {
     plaintext = await subtleCrypto.decrypt(
       {
-        name: 'AES-CTR',
+        name: "AES-CTR",
         counter: iv,
         length: 64,
       },
       aesKey,
-      ciphertext,
+      ciphertext
     );
   } catch (e) {
     throw friendlyError(`subtleCrypto.decrypt failed: ${e}`, cryptoFailMsg());
@@ -297,41 +312,40 @@ export async function encryptMegolmKeyFile(data, password, options) {
   try {
     ciphertext = await subtleCrypto.encrypt(
       {
-        name: 'AES-CTR',
+        name: "AES-CTR",
         counter: iv,
         length: 64,
       },
       aesKey,
-      encodedData,
+      encodedData
     );
   } catch (e) {
-    throw friendlyError('subtleCrypto.encrypt failed: ' + e, cryptoFailMsg());
+    throw friendlyError("subtleCrypto.encrypt failed: " + e, cryptoFailMsg());
   }
 
   const cipherArray = new Uint8Array(ciphertext);
-  const bodyLength = (1+salt.length+iv.length+4+cipherArray.length+32);
+  const bodyLength = 1 + salt.length + iv.length + 4 + cipherArray.length + 32;
   const resultBuffer = new Uint8Array(bodyLength);
   let idx = 0;
   resultBuffer[idx++] = 1; // version
-  resultBuffer.set(salt, idx); idx += salt.length;
-  resultBuffer.set(iv, idx); idx += iv.length;
+  resultBuffer.set(salt, idx);
+  idx += salt.length;
+  resultBuffer.set(iv, idx);
+  idx += iv.length;
   resultBuffer[idx++] = kdfRounds >> 24;
   resultBuffer[idx++] = (kdfRounds >> 16) & 0xff;
   resultBuffer[idx++] = (kdfRounds >> 8) & 0xff;
   resultBuffer[idx++] = kdfRounds & 0xff;
-  resultBuffer.set(cipherArray, idx); idx += cipherArray.length;
+  resultBuffer.set(cipherArray, idx);
+  idx += cipherArray.length;
 
   const toSign = resultBuffer.subarray(0, idx);
 
   let hmac;
   try {
-    hmac = await subtleCrypto.sign(
-      { name: 'HMAC' },
-      hmacKey,
-      toSign,
-    );
+    hmac = await subtleCrypto.sign({ name: "HMAC" }, hmacKey, toSign);
   } catch (e) {
-    throw friendlyError('subtleCrypto.sign failed: ' + e, cryptoFailMsg());
+    throw friendlyError("subtleCrypto.sign failed: " + e, cryptoFailMsg());
   }
 
   const hmacArray = new Uint8Array(hmac);
diff --git a/src/util/markdown.js b/src/util/markdown.js
index c6c1a490..f0001d1f 100644
--- a/src/util/markdown.js
+++ b/src/util/markdown.js
@@ -1,15 +1,21 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-use-before-define */
-import SimpleMarkdown from '@khanacademy/simple-markdown';
-import { idRegex, parseIdUri } from './common';
+import SimpleMarkdown from "@khanacademy/simple-markdown";
+import { idRegex, parseIdUri } from "./common";
 
 const {
-  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex,
-  sanitizeText, sanitizeUrl,
+  defaultRules,
+  parserFor,
+  outputFor,
+  anyScopeRegex,
+  blockRegex,
+  inlineRegex,
+  sanitizeText,
+  sanitizeUrl,
 } = SimpleMarkdown;
 
 function htmlTag(tagName, content, attributes, isClosed) {
-  let s = '';
+  let s = "";
   Object.entries(attributes || {}).forEach(([k, v]) => {
     if (v !== undefined) {
       s += ` ${sanitizeText(k)}`;
@@ -26,7 +32,9 @@ function htmlTag(tagName, content, attributes, isClosed) {
 }
 
 function mathHtml(wrap, node) {
-  return htmlTag(wrap, htmlTag('code', sanitizeText(node.content)), { 'data-mx-maths': node.content });
+  return htmlTag(wrap, htmlTag("code", sanitizeText(node.content)), {
+    "data-mx-maths": node.content,
+  });
 }
 
 const emojiRegex = /^:([\w-]+):/;
@@ -38,23 +46,30 @@ const plainRules = {
   },
   userMention: {
     order: defaultRules.em.order - 0.9,
-    match: inlineRegex(idRegex('@', undefined, '^')),
+    match: inlineRegex(idRegex("@", undefined, "^")),
     parse: (capture, _, state) => ({
-      type: 'mention',
-      content: state.userNames[capture[1]] ? `@${state.userNames[capture[1]]}` : capture[1],
+      type: "mention",
+      content: state.userNames[capture[1]]
+        ? `@${state.userNames[capture[1]]}`
+        : capture[1],
       id: capture[1],
     }),
   },
   roomMention: {
     order: defaultRules.em.order - 0.8,
-    match: inlineRegex(idRegex('#', undefined, '^')),
-    parse: (capture) => ({ type: 'mention', content: capture[1], id: capture[1] }),
+    match: inlineRegex(idRegex("#", undefined, "^")),
+    parse: (capture) => ({
+      type: "mention",
+      content: capture[1],
+      id: capture[1],
+    }),
   },
   mention: {
-    plain: (node, _, state) => (state.kind === 'edit' ? node.id : node.content),
-    html: (node) => htmlTag('a', sanitizeText(node.content), {
-      href: `https://matrix.to/#/${encodeURIComponent(node.id)}`,
-    }),
+    plain: (node, _, state) => (state.kind === "edit" ? node.id : node.content),
+    html: (node) =>
+      htmlTag("a", sanitizeText(node.content), {
+        href: `https://matrix.to/#/${encodeURIComponent(node.id)}`,
+      }),
   },
   emoji: {
     order: defaultRules.em.order - 0.1,
@@ -66,28 +81,35 @@ const plainRules = {
       if (emoji) return capture;
       return null;
     },
-    parse: (capture, _, state) => ({ content: capture[1], emoji: state.emojis.get(capture[1]) }),
-    plain: ({ emoji }) => (emoji.mxc
-      ? `:${emoji.shortcode}:`
-      : emoji.unicode),
-    html: ({ emoji }) => (emoji.mxc
-      ? htmlTag('img', null, {
-        'data-mx-emoticon': null,
-        src: emoji.mxc,
-        alt: `:${emoji.shortcode}:`,
-        title: `:${emoji.shortcode}:`,
-        height: 32,
-      }, false)
-      : emoji.unicode),
+    parse: (capture, _, state) => ({
+      content: capture[1],
+      emoji: state.emojis.get(capture[1]),
+    }),
+    plain: ({ emoji }) => (emoji.mxc ? `:${emoji.shortcode}:` : emoji.unicode),
+    html: ({ emoji }) =>
+      emoji.mxc
+        ? htmlTag(
+            "img",
+            null,
+            {
+              "data-mx-emoticon": null,
+              src: emoji.mxc,
+              alt: `:${emoji.shortcode}:`,
+              title: `:${emoji.shortcode}:`,
+              height: 32,
+            },
+            false
+          )
+        : emoji.unicode,
   },
   newline: {
     ...defaultRules.newline,
-    plain: () => '\n',
+    plain: () => "\n",
   },
   paragraph: {
     ...defaultRules.paragraph,
     plain: (node, output, state) => `${output(node.content, state)}\n\n`,
-    html: (node, output, state) => htmlTag('p', output(node.content, state)),
+    html: (node, output, state) => htmlTag("p", output(node.content, state)),
   },
   escape: {
     ...defaultRules.escape,
@@ -96,14 +118,17 @@ const plainRules = {
   br: {
     ...defaultRules.br,
     match: anyScopeRegex(/^ *\n/),
-    plain: () => '\n',
+    plain: () => "\n",
   },
   text: {
     ...defaultRules.text,
-    match: anyScopeRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]| *\n|\w+:\S|$)/),
-    plain: (node, _, state) => (state.kind === 'edit'
-      ? node.content.replace(/(\*|_|!\[|\[|\|\||\$\$?)/g, '\\$1')
-      : node.content),
+    match: anyScopeRegex(
+      /^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]| *\n|\w+:\S|$)/
+    ),
+    plain: (node, _, state) =>
+      state.kind === "edit"
+        ? node.content.replace(/(\*|_|!\[|\[|\|\||\$\$?)/g, "\\$1")
+        : node.content,
   },
 };
 
@@ -115,30 +140,41 @@ const markdownRules = {
     match: blockRegex(/^ *(#{1,6})([^\n:]*?(?: [^\n]*?)?)#* *(?:\n *)*\n/),
     plain: (node, output, state) => {
       const out = output(node.content, state);
-      if (state.kind === 'edit' || state.kind === 'notification' || node.level > 2) {
-        return `${'#'.repeat(node.level)} ${out}\n\n`;
+      if (
+        state.kind === "edit" ||
+        state.kind === "notification" ||
+        node.level > 2
+      ) {
+        return `${"#".repeat(node.level)} ${out}\n\n`;
       }
-      return `${out}\n${(node.level === 1 ? '=' : '-').repeat(out.length)}\n\n`;
+      return `${out}\n${(node.level === 1 ? "=" : "-").repeat(out.length)}\n\n`;
     },
   },
   hr: {
     ...defaultRules.hr,
-    plain: () => '---\n\n',
+    plain: () => "---\n\n",
   },
   codeBlock: {
     ...defaultRules.codeBlock,
-    plain: (node) => `\`\`\`${node.lang || ''}\n${node.content}\n\`\`\`\n`,
-    html: (node) => htmlTag('pre', htmlTag('code', sanitizeText(node.content), {
-      class: node.lang ? `language-${node.lang}` : undefined,
-    })),
+    plain: (node) => `\`\`\`${node.lang || ""}\n${node.content}\n\`\`\`\n`,
+    html: (node) =>
+      htmlTag(
+        "pre",
+        htmlTag("code", sanitizeText(node.content), {
+          class: node.lang ? `language-${node.lang}` : undefined,
+        })
+      ),
   },
   fence: {
     ...defaultRules.fence,
-    match: blockRegex(/^ *(`{3,}|~{3,}) *(?:(\S+) *)?\n([\s\S]+?)\n?\1 *(?:\n *)*\n/),
+    match: blockRegex(
+      /^ *(`{3,}|~{3,}) *(?:(\S+) *)?\n([\s\S]+?)\n?\1 *(?:\n *)*\n/
+    ),
   },
   blockQuote: {
     ...defaultRules.blockQuote,
-    plain: (node, output, state) => `> ${output(node.content, state).trim().replace(/\n/g, '\n> ')}\n\n`,
+    plain: (node, output, state) =>
+      `> ${output(node.content, state).trim().replace(/\n/g, "\n> ")}\n\n`,
   },
   list: {
     ...defaultRules.list,
@@ -146,15 +182,20 @@ const markdownRules = {
       const oldList = state._list;
       state._list = true;
 
-      let items = node.items.map((item, i) => {
-        const prefix = node.ordered ? `${node.start + i}. ` : '* ';
-        return prefix + output(item, state).replace(/\n/g, `\n${' '.repeat(prefix.length)}`);
-      }).join('\n');
+      let items = node.items
+        .map((item, i) => {
+          const prefix = node.ordered ? `${node.start + i}. ` : "* ";
+          return (
+            prefix +
+            output(item, state).replace(/\n/g, `\n${" ".repeat(prefix.length)}`)
+          );
+        })
+        .join("\n");
 
       state._list = oldList;
 
       if (!state._list) {
-        items += '\n\n';
+        items += "\n\n";
       }
       return items;
     },
@@ -167,32 +208,34 @@ const markdownRules = {
 
       const colWidth = node.align.map((align) => {
         switch (align) {
-          case 'left':
-          case 'right':
+          case "left":
+          case "right":
             return 2;
-          case 'center':
+          case "center":
             return 3;
           default:
             return 1;
         }
       });
       header.forEach((s, i) => {
-        if (s.length > colWidth[i])colWidth[i] = s.length;
+        if (s.length > colWidth[i]) colWidth[i] = s.length;
       });
 
-      const cells = node.cells.map((row) => row.map((content, i) => {
-        const s = output(content, state);
-        if (colWidth[i] === undefined || s.length > colWidth[i]) {
-          colWidth[i] = s.length;
-        }
-        return s;
-      }));
+      const cells = node.cells.map((row) =>
+        row.map((content, i) => {
+          const s = output(content, state);
+          if (colWidth[i] === undefined || s.length > colWidth[i]) {
+            colWidth[i] = s.length;
+          }
+          return s;
+        })
+      );
 
       function pad(s, i) {
         switch (node.align[i]) {
-          case 'right':
+          case "right":
             return s.padStart(colWidth[i]);
-          case 'center':
+          case "center":
             return s
               .padStart(s.length + Math.floor((colWidth[i] - s.length) / 2))
               .padEnd(colWidth[i]);
@@ -203,58 +246,60 @@ const markdownRules = {
 
       const line = colWidth.map((len, i) => {
         switch (node.align[i]) {
-          case 'left':
-            return `:${'-'.repeat(len - 1)}`;
-          case 'center':
-            return `:${'-'.repeat(len - 2)}:`;
-          case 'right':
-            return `${'-'.repeat(len - 1)}:`;
+          case "left":
+            return `:${"-".repeat(len - 1)}`;
+          case "center":
+            return `:${"-".repeat(len - 2)}:`;
+          case "right":
+            return `${"-".repeat(len - 1)}:`;
           default:
-            return '-'.repeat(len);
+            return "-".repeat(len);
         }
       });
 
       const table = [
         header.map(pad),
         line,
-        ...cells.map((row) => row.map(pad))];
+        ...cells.map((row) => row.map(pad)),
+      ];
 
-      return table.map((row) => `| ${row.join(' | ')} |\n`).join('');
+      return table.map((row) => `| ${row.join(" | ")} |\n`).join("");
     },
   },
   displayMath: {
     order: defaultRules.table.order + 0.1,
     match: blockRegex(/^ *\$\$ *\n?([\s\S]+?)\n?\$\$ *(?:\n *)*\n/),
     parse: (capture) => ({ content: capture[1] }),
-    plain: (node) => (node.content.includes('\n')
-      ? `$$\n${node.content}\n$$\n`
-      : `$$${node.content}$$\n`),
-    html: (node) => mathHtml('div', node),
+    plain: (node) =>
+      node.content.includes("\n")
+        ? `$$\n${node.content}\n$$\n`
+        : `$$${node.content}$$\n`,
+    html: (node) => mathHtml("div", node),
   },
   shrug: {
     order: defaultRules.escape.order - 0.1,
     match: inlineRegex(/^¯\\_\(ツ\)_\/¯/),
-    parse: (capture) => ({ type: 'text', content: capture[0] }),
+    parse: (capture) => ({ type: "text", content: capture[0] }),
   },
   tableSeparator: {
     ...defaultRules.tableSeparator,
-    plain: () => ' | ',
+    plain: () => " | ",
   },
   link: {
     ...defaultRules.link,
     plain: (node, output, state) => {
       const out = output(node.content, state);
-      const target = sanitizeUrl(node.target) || '';
+      const target = sanitizeUrl(node.target) || "";
       if (out !== target || node.title) {
-        return `[${out}](${target}${node.title ? ` "${node.title}"` : ''})`;
+        return `[${out}](${target}${node.title ? ` "${node.title}"` : ""})`;
       }
       return out;
     },
     html: (node, output, state) => {
       const out = output(node.content, state);
-      const target = sanitizeUrl(node.target) || '';
+      const target = sanitizeUrl(node.target) || "";
       if (out !== target || node.title) {
-        return htmlTag('a', out, {
+        return htmlTag("a", out, {
           href: target,
           title: node.title,
         });
@@ -264,12 +309,21 @@ const markdownRules = {
   },
   image: {
     ...defaultRules.image,
-    plain: (node) => `![${node.alt}](${sanitizeUrl(node.target) || ''}${node.title ? ` "${node.title}"` : ''})`,
-    html: (node) => htmlTag('img', '', {
-      src: sanitizeUrl(node.target) || '',
-      alt: node.alt,
-      title: node.title,
-    }, false),
+    plain: (node) =>
+      `![${node.alt}](${sanitizeUrl(node.target) || ""}${
+        node.title ? ` "${node.title}"` : ""
+      })`,
+    html: (node) =>
+      htmlTag(
+        "img",
+        "",
+        {
+          src: sanitizeUrl(node.target) || "",
+          alt: node.alt,
+          title: node.title,
+        },
+        false
+      ),
   },
   reflink: undefined,
   refimage: undefined,
@@ -302,55 +356,62 @@ const markdownRules = {
       reason: capture[2],
     }),
     plain: (node, output, state) => {
-      const warning = `spoiler${node.reason ? `: ${node.reason}` : ''}`;
+      const warning = `spoiler${node.reason ? `: ${node.reason}` : ""}`;
       switch (state.kind) {
-        case 'edit':
-          return `||${output(node.content, state)}||${node.reason ? `(${node.reason})` : ''}`;
-        case 'notification':
+        case "edit":
+          return `||${output(node.content, state)}||${
+            node.reason ? `(${node.reason})` : ""
+          }`;
+        case "notification":
           return `<${warning}>`;
         default:
           return `[${warning}](${output(node.content, state)})`;
       }
     },
-    html: (node, output, state) => htmlTag(
-      'span',
-      output(node.content, state),
-      { 'data-mx-spoiler': node.reason || null },
-    ),
+    html: (node, output, state) =>
+      htmlTag("span", output(node.content, state), {
+        "data-mx-spoiler": node.reason || null,
+      }),
   },
   inlineMath: {
     order: defaultRules.del.order + 0.2,
     match: inlineRegex(/^\$(\S[\s\S]+?\S|\S)\$(?!\d)/),
     parse: (capture) => ({ content: capture[1] }),
     plain: (node) => `$${node.content}$`,
-    html: (node) => mathHtml('span', node),
+    html: (node) => mathHtml("span", node),
   },
 };
 
 function mapElement(el) {
   switch (el.tagName) {
-    case 'MX-REPLY':
+    case "MX-REPLY":
       return [];
 
-    case 'P':
-      return [{ type: 'paragraph', content: mapChildren(el) }];
-    case 'BR':
-      return [{ type: 'br' }];
+    case "P":
+      return [{ type: "paragraph", content: mapChildren(el) }];
+    case "BR":
+      return [{ type: "br" }];
 
-    case 'H1':
-    case 'H2':
-    case 'H3':
-    case 'H4':
-    case 'H5':
-    case 'H6':
-      return [{ type: 'heading', level: Number(el.tagName[1]), content: mapChildren(el) }];
-    case 'HR':
-      return [{ type: 'hr' }];
-    case 'PRE': {
+    case "H1":
+    case "H2":
+    case "H3":
+    case "H4":
+    case "H5":
+    case "H6":
+      return [
+        {
+          type: "heading",
+          level: Number(el.tagName[1]),
+          content: mapChildren(el),
+        },
+      ];
+    case "HR":
+      return [{ type: "hr" }];
+    case "PRE": {
       let lang;
       if (el.firstChild) {
         Array.from(el.firstChild.classList).some((c) => {
-          const langPrefix = 'language-';
+          const langPrefix = "language-";
           if (c.startsWith(langPrefix)) {
             lang = c.slice(langPrefix.length);
             return true;
@@ -358,94 +419,117 @@ function mapElement(el) {
           return false;
         });
       }
-      return [{ type: 'codeBlock', lang, content: el.innerText }];
+      return [{ type: "codeBlock", lang, content: el.innerText }];
     }
-    case 'BLOCKQUOTE':
-      return [{ type: 'blockQuote', content: mapChildren(el) }];
-    case 'UL':
-      return [{ type: 'list', items: Array.from(el.childNodes).map(mapNode) }];
-    case 'OL':
-      return [{
-        type: 'list',
-        ordered: true,
-        start: Number(el.getAttribute('start')),
-        items: Array.from(el.childNodes).map(mapNode),
-      }];
-    case 'TABLE': {
-      const headerEl = Array.from(el.querySelector('thead > tr').childNodes);
-      const align = headerEl.map((childE) => childE.style['text-align']);
-      return [{
-        type: 'table',
-        header: headerEl.map(mapChildren),
-        align,
-        cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => {
-          if (align[i] === undefined) align[i] = childEl.style['text-align'];
-          return mapChildren(childEl);
-        })),
-      }];
+    case "BLOCKQUOTE":
+      return [{ type: "blockQuote", content: mapChildren(el) }];
+    case "UL":
+      return [{ type: "list", items: Array.from(el.childNodes).map(mapNode) }];
+    case "OL":
+      return [
+        {
+          type: "list",
+          ordered: true,
+          start: Number(el.getAttribute("start")),
+          items: Array.from(el.childNodes).map(mapNode),
+        },
+      ];
+    case "TABLE": {
+      const headerEl = Array.from(el.querySelector("thead > tr").childNodes);
+      const align = headerEl.map((childE) => childE.style["text-align"]);
+      return [
+        {
+          type: "table",
+          header: headerEl.map(mapChildren),
+          align,
+          cells: Array.from(el.querySelectorAll("tbody > tr")).map((rowEl) =>
+            Array.from(rowEl.childNodes).map((childEl, i) => {
+              if (align[i] === undefined)
+                align[i] = childEl.style["text-align"];
+              return mapChildren(childEl);
+            })
+          ),
+        },
+      ];
     }
-    case 'A': {
-      const href = el.getAttribute('href');
+    case "A": {
+      const href = el.getAttribute("href");
 
       const id = parseIdUri(href);
-      if (id) return [{ type: 'mention', content: el.innerText, id }];
+      if (id) return [{ type: "mention", content: el.innerText, id }];
 
-      return [{
-        type: 'link',
-        target: el.getAttribute('href'),
-        title: el.getAttribute('title'),
-        content: mapChildren(el),
-      }];
+      return [
+        {
+          type: "link",
+          target: el.getAttribute("href"),
+          title: el.getAttribute("title"),
+          content: mapChildren(el),
+        },
+      ];
     }
-    case 'IMG': {
-      const src = el.getAttribute('src');
-      let title = el.getAttribute('title');
-      if (el.hasAttribute('data-mx-emoticon')) {
-        if (title.length > 2 && title.startsWith(':') && title.endsWith(':')) {
+    case "IMG": {
+      const src = el.getAttribute("src");
+      let title = el.getAttribute("title");
+      if (el.hasAttribute("data-mx-emoticon")) {
+        if (title.length > 2 && title.startsWith(":") && title.endsWith(":")) {
           title = title.slice(1, -1);
         }
-        return [{
-          type: 'emoji',
-          content: title,
-          emoji: {
-            mxc: src,
-            shortcode: title,
+        return [
+          {
+            type: "emoji",
+            content: title,
+            emoji: {
+              mxc: src,
+              shortcode: title,
+            },
           },
-        }];
+        ];
       }
 
-      return [{
-        type: 'image',
-        alt: el.getAttribute('alt'),
-        target: src,
-        title,
-      }];
+      return [
+        {
+          type: "image",
+          alt: el.getAttribute("alt"),
+          target: src,
+          title,
+        },
+      ];
     }
-    case 'EM':
-    case 'I':
-      return [{ type: 'em', content: mapChildren(el) }];
-    case 'STRONG':
-    case 'B':
-      return [{ type: 'strong', content: mapChildren(el) }];
-    case 'U':
-      return [{ type: 'u', content: mapChildren(el) }];
-    case 'DEL':
-    case 'STRIKE':
-      return [{ type: 'del', content: mapChildren(el) }];
-    case 'CODE':
-      return [{ type: 'inlineCode', content: el.innerText }];
+    case "EM":
+    case "I":
+      return [{ type: "em", content: mapChildren(el) }];
+    case "STRONG":
+    case "B":
+      return [{ type: "strong", content: mapChildren(el) }];
+    case "U":
+      return [{ type: "u", content: mapChildren(el) }];
+    case "DEL":
+    case "STRIKE":
+      return [{ type: "del", content: mapChildren(el) }];
+    case "CODE":
+      return [{ type: "inlineCode", content: el.innerText }];
 
-    case 'DIV':
-      if (el.hasAttribute('data-mx-maths')) {
-        return [{ type: 'displayMath', content: el.getAttribute('data-mx-maths') }];
+    case "DIV":
+      if (el.hasAttribute("data-mx-maths")) {
+        return [
+          { type: "displayMath", content: el.getAttribute("data-mx-maths") },
+        ];
       }
       return mapChildren(el);
-    case 'SPAN':
-      if (el.hasAttribute('data-mx-spoiler')) {
-        return [{ type: 'spoiler', reason: el.getAttribute('data-mx-spoiler'), content: mapChildren(el) }];
+    case "SPAN":
+      if (el.hasAttribute("data-mx-spoiler")) {
+        return [
+          {
+            type: "spoiler",
+            reason: el.getAttribute("data-mx-spoiler"),
+            content: mapChildren(el),
+          },
+        ];
       }
-      if (el.hasAttribute('data-mx-maths')) {
-        return [{ type: 'inlineMath', content: el.getAttribute('data-mx-maths') }];
+      if (el.hasAttribute("data-mx-maths")) {
+        return [
+          { type: "inlineMath", content: el.getAttribute("data-mx-maths") },
+        ];
       }
       return mapChildren(el);
     default:
@@ -456,7 +540,7 @@ function mapElement(el) {
 function mapNode(n) {
   switch (n.nodeType) {
     case Node.TEXT_NODE:
-      return [{ type: 'text', content: n.textContent }];
+      return [{ type: "text", content: n.textContent }];
     case Node.ELEMENT_NODE:
       return mapElement(n);
     default:
@@ -473,7 +557,7 @@ function mapChildren(n) {
 
 function render(content, state, plainOut, htmlOut) {
   let c = content;
-  if (content.length === 1 && content[0].type === 'paragraph') {
+  if (content.length === 1 && content[0].type === "paragraph") {
     c = c[0].content;
   }
 
@@ -482,7 +566,10 @@ function render(content, state, plainOut, htmlOut) {
 
   const htmlStr = htmlOut(c, state);
 
-  const plainHtml = htmlStr.replace(/<br>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<\/?p>/g, '');
+  const plainHtml = htmlStr
+    .replace(/<br>/g, "\n")
+    .replace(/<\/p><p>/g, "\n\n")
+    .replace(/<\/?p>/g, "");
   const onlyPlain = sanitizeText(plainStr) === plainHtml;
 
   return {
@@ -493,12 +580,12 @@ function render(content, state, plainOut, htmlOut) {
 }
 
 const plainParser = parserFor(plainRules);
-const plainPlainOut = outputFor(plainRules, 'plain');
-const plainHtmlOut = outputFor(plainRules, 'html');
+const plainPlainOut = outputFor(plainRules, "plain");
+const plainHtmlOut = outputFor(plainRules, "html");
 
 const mdParser = parserFor(markdownRules);
-const mdPlainOut = outputFor(markdownRules, 'plain');
-const mdHtmlOut = outputFor(markdownRules, 'html');
+const mdPlainOut = outputFor(markdownRules, "plain");
+const mdHtmlOut = outputFor(markdownRules, "html");
 
 export function plain(source, state) {
   return render(plainParser(source, state), state, plainPlainOut, plainHtmlOut);
@@ -509,7 +596,7 @@ export function markdown(source, state) {
 }
 
 export function html(source, state) {
-  const el = document.createElement('template');
+  const el = document.createElement("template");
   el.innerHTML = source;
   return render(mapChildren(el.content), state, mdPlainOut, mdHtmlOut);
 }
diff --git a/src/util/matrixUtil.js b/src/util/matrixUtil.js
index 54ee31bb..6c5b4c6f 100644
--- a/src/util/matrixUtil.js
+++ b/src/util/matrixUtil.js
@@ -1,22 +1,24 @@
-import initMatrix from '../client/initMatrix';
+import initMatrix from "../client/initMatrix";
 
-import HashIC from '../../public/res/ic/outlined/hash.svg';
-import HashGlobeIC from '../../public/res/ic/outlined/hash-globe.svg';
-import HashLockIC from '../../public/res/ic/outlined/hash-lock.svg';
-import SpaceIC from '../../public/res/ic/outlined/space.svg';
-import SpaceGlobeIC from '../../public/res/ic/outlined/space-globe.svg';
-import SpaceLockIC from '../../public/res/ic/outlined/space-lock.svg';
+import HashIC from "../../public/res/ic/outlined/hash.svg";
+import HashGlobeIC from "../../public/res/ic/outlined/hash-globe.svg";
+import HashLockIC from "../../public/res/ic/outlined/hash-lock.svg";
+import SpaceIC from "../../public/res/ic/outlined/space.svg";
+import SpaceGlobeIC from "../../public/res/ic/outlined/space-globe.svg";
+import SpaceLockIC from "../../public/res/ic/outlined/space-lock.svg";
 
-const WELL_KNOWN_URI = '/.well-known/matrix/client';
+const WELL_KNOWN_URI = "/.well-known/matrix/client";
 
 export async function getBaseUrl(servername) {
-  let protocol = 'https://';
-  if (servername.match(/^https?:\/\//) !== null) protocol = '';
+  let protocol = "https://";
+  if (servername.match(/^https?:\/\//) !== null) protocol = "";
   const serverDiscoveryUrl = `${protocol}${servername}${WELL_KNOWN_URI}`;
   try {
-    const result = await (await fetch(serverDiscoveryUrl, { method: 'GET' })).json();
+    const result = await (
+      await fetch(serverDiscoveryUrl, { method: "GET" })
+    ).json();
 
-    const baseUrl = result?.['m.homeserver']?.base_url;
+    const baseUrl = result?.["m.homeserver"]?.base_url;
     if (baseUrl === undefined) throw new Error();
     return baseUrl;
   } catch (e) {
@@ -29,7 +31,7 @@ export function getUsername(userId) {
   const user = mx.getUser(userId);
   if (user === null) return userId;
   let username = user.displayName;
-  if (typeof username === 'undefined') {
+  if (typeof username === "undefined") {
     username = userId;
   }
   return username;
@@ -45,29 +47,29 @@ export async function isRoomAliasAvailable(alias) {
     if (result.room_id) return false;
     return false;
   } catch (e) {
-    if (e.errcode === 'M_NOT_FOUND') return true;
+    if (e.errcode === "M_NOT_FOUND") return true;
     return false;
   }
 }
 
 export function getPowerLabel(powerLevel) {
-  if (powerLevel > 9000) return 'Goku';
-  if (powerLevel > 100) return 'Founder';
-  if (powerLevel === 100) return 'Admin';
-  if (powerLevel >= 50) return 'Mod';
+  if (powerLevel > 9000) return "Goku";
+  if (powerLevel > 100) return "Founder";
+  if (powerLevel === 100) return "Admin";
+  if (powerLevel >= 50) return "Mod";
   return null;
 }
 
 export function parseReply(rawBody) {
-  if (rawBody?.indexOf('>') !== 0) return null;
-  let body = rawBody.slice(rawBody.indexOf('<') + 1);
-  const user = body.slice(0, body.indexOf('>'));
+  if (rawBody?.indexOf(">") !== 0) return null;
+  let body = rawBody.slice(rawBody.indexOf("<") + 1);
+  const user = body.slice(0, body.indexOf(">"));
 
-  body = body.slice(body.indexOf('>') + 2);
-  const replyBody = body.slice(0, body.indexOf('\n\n'));
-  body = body.slice(body.indexOf('\n\n') + 2);
+  body = body.slice(body.indexOf(">") + 2);
+  const replyBody = body.slice(0, body.indexOf("\n\n"));
+  body = body.slice(body.indexOf("\n\n") + 2);
 
-  if (user === '') return null;
+  if (user === "") return null;
 
   const isUserId = user.match(/^@.+:.+/);
 
@@ -81,7 +83,7 @@ export function parseReply(rawBody) {
 
 export function trimHTMLReply(html) {
   if (!html) return html;
-  const suffix = '</mx-reply>';
+  const suffix = "</mx-reply>";
   const i = html.indexOf(suffix);
   if (i < 0) {
     return html;
@@ -104,17 +106,21 @@ export function hasDMWith(userId) {
 }
 
 export function joinRuleToIconSrc(joinRule, isSpace) {
-  return ({
-    restricted: () => (isSpace ? SpaceIC : HashIC),
-    knock: () => (isSpace ? SpaceLockIC : HashLockIC),
-    invite: () => (isSpace ? SpaceLockIC : HashLockIC),
-    public: () => (isSpace ? SpaceGlobeIC : HashGlobeIC),
-  }[joinRule]?.() || null);
+  return (
+    {
+      restricted: () => (isSpace ? SpaceIC : HashIC),
+      knock: () => (isSpace ? SpaceLockIC : HashLockIC),
+      invite: () => (isSpace ? SpaceLockIC : HashLockIC),
+      public: () => (isSpace ? SpaceGlobeIC : HashGlobeIC),
+    }[joinRule]?.() || null
+  );
 }
 
 // NOTE: it gives userId with minimum power level 50;
 function getHighestPowerUserId(room) {
-  const userIdToPower = room.currentState.getStateEvents('m.room.power_levels', '')?.getContent().users;
+  const userIdToPower = room.currentState
+    .getStateEvents("m.room.power_levels", "")
+    ?.getContent().users;
   let powerUserId = null;
   if (!userIdToPower) return powerUserId;
 
@@ -132,7 +138,7 @@ function getHighestPowerUserId(room) {
 }
 
 export function getIdServer(userId) {
-  const idParts = userId.split(':');
+  const idParts = userId.split(":");
   return idParts[1];
 }
 
@@ -163,7 +169,7 @@ export function genRoomVia(room) {
   }
   const serverToPop = getServerToPopulation(room);
   const sortedServers = Object.keys(serverToPop).sort(
-    (svrA, svrB) => serverToPop[svrB] - serverToPop[svrA],
+    (svrA, svrB) => serverToPop[svrB] - serverToPop[svrA]
   );
   const mostPop3 = sortedServers.slice(0, 3);
   if (via.length === 0) return mostPop3;
@@ -178,7 +184,12 @@ export function isCrossVerified(deviceId) {
     const mx = initMatrix.matrixClient;
     const crossSignInfo = mx.getStoredCrossSigningForUser(mx.getUserId());
     const deviceInfo = mx.getStoredDevice(mx.getUserId(), deviceId);
-    const deviceTrust = crossSignInfo.checkDeviceTrust(crossSignInfo, deviceInfo, false, true);
+    const deviceTrust = crossSignInfo.checkDeviceTrust(
+      crossSignInfo,
+      deviceInfo,
+      false,
+      true
+    );
     return deviceTrust.isCrossSigningVerified();
   } catch {
     // device does not support encryption
@@ -188,14 +199,14 @@ export function isCrossVerified(deviceId) {
 
 export function hasCrossSigningAccountData() {
   const mx = initMatrix.matrixClient;
-  const masterKeyData = mx.getAccountData('m.cross_signing.master');
+  const masterKeyData = mx.getAccountData("m.cross_signing.master");
   return !!masterKeyData;
 }
 
 export function getDefaultSSKey() {
   const mx = initMatrix.matrixClient;
   try {
-    return mx.getAccountData('m.secret_storage.default_key').getContent().key;
+    return mx.getAccountData("m.secret_storage.default_key").getContent().key;
   } catch {
     return undefined;
   }
@@ -214,10 +225,14 @@ export async function hasDevices(userId) {
   const mx = initMatrix.matrixClient;
   try {
     const usersDeviceMap = await mx.downloadKeys([userId, mx.getUserId()]);
-    return Object.values(usersDeviceMap)
-      .every((userDevices) => (Object.keys(userDevices).length > 0));
+    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);
+    console.error(
+      "Error determining if it's possible to encrypt to all users: ",
+      e
+    );
     return false;
   }
 }
diff --git a/src/util/mimetypes.js b/src/util/mimetypes.js
index bf7efbce..2fa7be22 100644
--- a/src/util/mimetypes.js
+++ b/src/util/mimetypes.js
@@ -1,39 +1,39 @@
 // https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
 export const ALLOWED_BLOB_MIMETYPES = [
-  'image/jpeg',
-  'image/gif',
-  'image/png',
-  'image/apng',
-  'image/webp',
-  'image/avif',
+  "image/jpeg",
+  "image/gif",
+  "image/png",
+  "image/apng",
+  "image/webp",
+  "image/avif",
 
-  'video/mp4',
-  'video/webm',
-  'video/ogg',
-  'video/quicktime',
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime",
 
-  'audio/mp4',
-  'audio/webm',
-  'audio/aac',
-  'audio/mpeg',
-  'audio/ogg',
-  'audio/wave',
-  'audio/wav',
-  'audio/x-wav',
-  'audio/x-pn-wav',
-  'audio/flac',
-  'audio/x-flac',
+  "audio/mp4",
+  "audio/webm",
+  "audio/aac",
+  "audio/mpeg",
+  "audio/ogg",
+  "audio/wave",
+  "audio/wav",
+  "audio/x-wav",
+  "audio/x-pn-wav",
+  "audio/flac",
+  "audio/x-flac",
 ];
 
 export function getBlobSafeMimeType(mimetype) {
-  if (typeof mimetype !== 'string') return 'application/octet-stream';
-  const [type] = mimetype.split(';');
+  if (typeof mimetype !== "string") return "application/octet-stream";
+  const [type] = mimetype.split(";");
   if (!ALLOWED_BLOB_MIMETYPES.includes(type)) {
-    return 'application/octet-stream';
+    return "application/octet-stream";
   }
   // Required for Chromium browsers
-  if (type === 'video/quicktime') {
-    return 'video/mp4';
+  if (type === "video/quicktime") {
+    return "video/mp4";
   }
   return type;
 }
diff --git a/src/util/sanitize.js b/src/util/sanitize.js
index 79cc0418..4d9c2fde 100644
--- a/src/util/sanitize.js
+++ b/src/util/sanitize.js
@@ -1,26 +1,67 @@
-import sanitizeHtml from 'sanitize-html';
+import sanitizeHtml from "sanitize-html";
 
 const MAX_TAG_NESTING = 100;
 let mx = null;
 
 const permittedHtmlTags = [
-  'font', 'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-  'blockquote', 'p', 'a', 'ul', 'ol', 'sup', 'sub',
-  'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code',
-  'hr', 'br', 'div', 'table', 'thead', 'tbody', 'tr', 'th',
-  'td', 'caption', 'pre', 'span', 'img', 'details', 'summary',
+  "font",
+  "del",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "p",
+  "a",
+  "ul",
+  "ol",
+  "sup",
+  "sub",
+  "li",
+  "b",
+  "i",
+  "u",
+  "strong",
+  "em",
+  "strike",
+  "code",
+  "hr",
+  "br",
+  "div",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "caption",
+  "pre",
+  "span",
+  "img",
+  "details",
+  "summary",
 ];
 
-const urlSchemes = ['https', 'http', 'ftp', 'mailto', 'magnet'];
+const urlSchemes = ["https", "http", "ftp", "mailto", "magnet"];
 
 const permittedTagToAttributes = {
-  font: ['style', 'data-mx-bg-color', 'data-mx-color', 'color'],
-  span: ['style', 'data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'data-mx-maths', 'data-mx-pill', 'data-mx-ping'],
-  div: ['data-mx-maths'],
-  a: ['name', 'target', 'href', 'rel'],
-  img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
-  ol: ['start'],
-  code: ['class'],
+  font: ["style", "data-mx-bg-color", "data-mx-color", "color"],
+  span: [
+    "style",
+    "data-mx-bg-color",
+    "data-mx-color",
+    "data-mx-spoiler",
+    "data-mx-maths",
+    "data-mx-pill",
+    "data-mx-ping",
+  ],
+  div: ["data-mx-maths"],
+  a: ["name", "target", "href", "rel"],
+  img: ["width", "height", "alt", "title", "src", "data-mx-emoticon"],
+  ol: ["start"],
+  code: ["class"],
 };
 
 function transformFontTag(tagName, attribs) {
@@ -28,7 +69,7 @@ function transformFontTag(tagName, attribs) {
     tagName,
     attribs: {
       ...attribs,
-      style: `background-color: ${attribs['data-mx-bg-color']}; color: ${attribs['data-mx-color']}`,
+      style: `background-color: ${attribs["data-mx-bg-color"]}; color: ${attribs["data-mx-color"]}`,
     },
   };
 }
@@ -38,51 +79,57 @@ function transformSpanTag(tagName, attribs) {
     tagName,
     attribs: {
       ...attribs,
-      style: `background-color: ${attribs['data-mx-bg-color']}; color: ${attribs['data-mx-color']}`,
+      style: `background-color: ${attribs["data-mx-bg-color"]}; color: ${attribs["data-mx-color"]}`,
     },
   };
 }
 
 function transformATag(tagName, attribs) {
-  const userLink = decodeURIComponent(attribs.href).match(/^https?:\/\/matrix.to\/#\/(@.+:.+)/);
+  const userLink = decodeURIComponent(attribs.href).match(
+    /^https?:\/\/matrix.to\/#\/(@.+:.+)/
+  );
   if (userLink !== null) {
     // convert user link to pill
     const userId = userLink[1];
     const pill = {
-      tagName: 'span',
+      tagName: "span",
       attribs: {
-        'data-mx-pill': userId,
+        "data-mx-pill": userId,
       },
     };
     if (userId === mx?.getUserId()) {
-      pill.attribs['data-mx-ping'] = undefined;
+      pill.attribs["data-mx-ping"] = undefined;
     }
     return pill;
   }
 
-  const rex = /[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/ug;
-  const newHref = attribs.href.replace(rex, (match) => `[e-${match.codePointAt(0).toString(16)}]`);
+  const rex =
+    /[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/gu;
+  const newHref = attribs.href.replace(
+    rex,
+    (match) => `[e-${match.codePointAt(0).toString(16)}]`
+  );
 
   return {
     tagName,
     attribs: {
       ...attribs,
       href: newHref,
-      rel: 'noopener',
-      target: '_blank',
+      rel: "noopener",
+      target: "_blank",
     },
   };
 }
 
 function transformImgTag(tagName, attribs) {
   const { src } = attribs;
-  if (src.startsWith('mxc://') === false) {
+  if (src.startsWith("mxc://") === false) {
     return {
-      tagName: 'a',
+      tagName: "a",
       attribs: {
         href: src,
-        rel: 'noopener',
-        target: '_blank',
+        rel: "noopener",
+        target: "_blank",
       },
       text: attribs.alt || src,
     };
@@ -101,20 +148,20 @@ export function sanitizeCustomHtml(matrixClient, body) {
   return sanitizeHtml(body, {
     allowedTags: permittedHtmlTags,
     allowedAttributes: permittedTagToAttributes,
-    disallowedTagsMode: 'discard',
+    disallowedTagsMode: "discard",
     allowedSchemes: urlSchemes,
     allowedSchemesByTag: {
       a: urlSchemes,
     },
-    allowedSchemesAppliedToAttributes: ['href'],
+    allowedSchemesAppliedToAttributes: ["href"],
     allowProtocolRelative: false,
     allowedClasses: {
-      code: ['language-*'],
+      code: ["language-*"],
     },
     allowedStyles: {
-      '*': {
+      "*": {
         color: [/^#(?:[0-9a-fA-F]{3}){1,2}$/],
-        'background-color': [/^#(?:[0-9a-fA-F]{3}){1,2}$/],
+        "background-color": [/^#(?:[0-9a-fA-F]{3}){1,2}$/],
       },
     },
     transformTags: {
@@ -123,18 +170,25 @@ export function sanitizeCustomHtml(matrixClient, body) {
       a: transformATag,
       img: transformImgTag,
     },
-    nonTextTags: ['style', 'script', 'textarea', 'option', 'noscript', 'mx-reply'],
+    nonTextTags: [
+      "style",
+      "script",
+      "textarea",
+      "option",
+      "noscript",
+      "mx-reply",
+    ],
     nestingLimit: MAX_TAG_NESTING,
   });
 }
 
 export function sanitizeText(body) {
   const tagsToReplace = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#39;',
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
   };
   return body.replace(/[&<>'"]/g, (tag) => tagsToReplace[tag] || tag);
 }
diff --git a/src/util/sort.js b/src/util/sort.js
index f9a0b790..832b40ee 100644
--- a/src/util/sort.js
+++ b/src/util/sort.js
@@ -1,4 +1,4 @@
-import initMatrix from '../client/initMatrix';
+import initMatrix from "../client/initMatrix";
 
 export function roomIdByActivity(id1, id2) {
   const room1 = initMatrix.matrixClient.getRoom(id1);
@@ -13,8 +13,8 @@ export function roomIdByAtoZ(aId, bId) {
 
   // remove "#" from the room name
   // To ignore it in sorting
-  aName = aName.replace(/#/g, '');
-  bName = bName.replace(/#/g, '');
+  aName = aName.replace(/#/g, "");
+  bName = bName.replace(/#/g, "");
 
   if (aName.toLowerCase() < bName.toLowerCase()) {
     return -1;
diff --git a/src/util/twemojify.jsx b/src/util/twemojify.jsx
index abe82a66..b795db60 100644
--- a/src/util/twemojify.jsx
+++ b/src/util/twemojify.jsx
@@ -1,18 +1,19 @@
 /* eslint-disable import/prefer-default-export */
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense } from "react";
 
-import linkifyHtml from 'linkify-html';
-import parse from 'html-react-parser';
-import twemoji from 'twemoji';
-import { sanitizeText } from './sanitize';
+import linkifyHtml from "linkify-html";
+import parse from "html-react-parser";
+import twemoji from "twemoji";
+import { sanitizeText } from "./sanitize";
 
-export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
+export const TWEMOJI_BASE_URL =
+  "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/";
 
-const Math = lazy(() => import('../app/atoms/math/Math'));
+const Math = lazy(() => import("../app/atoms/math/Math"));
 
 const mathOptions = {
   replace: (node) => {
-    const maths = node.attribs?.['data-mx-maths'];
+    const maths = node.attribs?.["data-mx-maths"];
     if (maths) {
       return (
         <Suspense fallback={<code>{maths}</code>}>
@@ -20,7 +21,7 @@ const mathOptions = {
             content={maths}
             throwOnError={false}
             errorColor="var(--tc-danger-normal)"
-            displayMode={node.name === 'div'}
+            displayMode={node.name === "div"}
           />
         </Suspense>
       );
@@ -37,8 +38,14 @@ const mathOptions = {
  * @param {boolean} [maths=false] - render maths (default: false)
  * @returns React component
  */
-export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
-  if (typeof text !== 'string') return text;
+export function twemojify(
+  text,
+  opts,
+  linkify = false,
+  sanitize = true,
+  maths = false
+) {
+  if (typeof text !== "string") return text;
   let content = text;
   const options = opts ?? { base: TWEMOJI_BASE_URL };
   if (!options.base) {
@@ -52,8 +59,8 @@ export function twemojify(text, opts, linkify = false, sanitize = true, maths =
   content = twemoji.parse(content, options);
   if (linkify) {
     content = linkifyHtml(content, {
-      target: '_blank',
-      rel: 'noreferrer noopener',
+      target: "_blank",
+      rel: "noreferrer noopener",
     });
   }
   return parse(content, maths ? mathOptions : null);
diff --git a/vite.config.js b/vite.config.js
index 979e9aa0..88e851c5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,68 +1,61 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { wasm } from '@rollup/plugin-wasm';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
-import inject from '@rollup/plugin-inject';
-import { svgLoader } from './viteSvgLoader';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { wasm } from "@rollup/plugin-wasm";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
+import inject from "@rollup/plugin-inject";
+import { svgLoader } from "./viteSvgLoader";
 
 const copyFiles = {
   targets: [
     {
-      src: 'node_modules/@matrix-org/olm/olm.wasm',
-      dest: '',
+      src: "node_modules/@matrix-org/olm/olm.wasm",
+      dest: "",
     },
     {
-      src: '_redirects',
-      dest: '',
+      src: "_redirects",
+      dest: "",
     },
     {
-      src: 'config.json',
-      dest: '',
+      src: "config.json",
+      dest: "",
     },
     {
-      src: 'public/res/android',
-      dest: 'public/',
-    }
+      src: "public/res/android",
+      dest: "public/",
+    },
   ],
-}
+};
 
 export default defineConfig({
-  appType: 'spa',
+  appType: "spa",
   publicDir: false,
   base: "",
   server: {
     port: 8080,
     host: true,
   },
-  plugins: [
-    viteStaticCopy(copyFiles),
-    svgLoader(),
-    wasm(),
-    react(),
-  ],
+  plugins: [viteStaticCopy(copyFiles), svgLoader(), wasm(), react()],
   optimizeDeps: {
     esbuildOptions: {
-        define: {
-          global: 'globalThis'
-        },
-        plugins: [
-          // Enable esbuild polyfill plugins
-          NodeGlobalsPolyfillPlugin({
-            process: false,
-            buffer: true,
-          }),
-        ]
-    }
+      define: {
+        global: "globalThis",
+      },
+      plugins: [
+        // Enable esbuild polyfill plugins
+        NodeGlobalsPolyfillPlugin({
+          process: false,
+          buffer: true,
+        }),
+      ],
+    },
   },
   build: {
-    outDir: 'dist',
+    outDir: "dist",
     sourcemap: true,
     copyPublicDir: false,
     rollupOptions: {
-      plugins: [
-        inject({ Buffer: ['buffer', 'Buffer'] })
-      ]
-    }
+      plugins: [inject({ Buffer: ["buffer", "Buffer"] })],
+    },
   },
 });
diff --git a/viteSvgLoader.ts b/viteSvgLoader.ts
index a119e3ed..c81161d1 100644
--- a/viteSvgLoader.ts
+++ b/viteSvgLoader.ts
@@ -1,13 +1,13 @@
-import svgToMiniDataURI from 'mini-svg-data-uri';
-import type { Plugin } from 'rollup';
-import fs from 'fs';
+import svgToMiniDataURI from "mini-svg-data-uri";
+import type { Plugin } from "rollup";
+import fs from "fs";
 
 // TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
 export const svgLoader = (): Plugin => ({
-  name: 'vite-svg-patch-plugin',
+  name: "vite-svg-patch-plugin",
   transform: (code, id) => {
-    if (id.endsWith('.svg')) {
-      const extractedSvg = fs.readFileSync(id, 'utf8');
+    if (id.endsWith(".svg")) {
+      const extractedSvg = fs.readFileSync(id, "utf8");
       const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
       return `export default "${datauri}"`;
     }