diff --git a/package-lock.json b/package-lock.json
index 89d4d722..92d91375 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.10.0",
+  "version": "4.9.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.10.0",
+      "version": "4.9.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -16,6 +16,7 @@
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
+        "@tippyjs/react": "4.2.6",
         "@vanilla-extract/css": "1.9.3",
         "@vanilla-extract/recipes": "0.3.0",
         "@vanilla-extract/vite-plugin": "3.7.1",
@@ -31,8 +32,10 @@
         "emojibase": "15.3.1",
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
+        "flux": "4.0.3",
         "focus-trap-react": "10.0.2",
         "folds": "2.2.0",
+        "formik": "2.4.6",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -47,14 +50,17 @@
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
+        "prop-types": "15.8.1",
         "react": "18.2.0",
         "react-aria": "3.29.1",
+        "react-autosize-textarea": "7.1.0",
         "react-blurhash": "0.2.0",
         "react-colorful": "5.6.1",
         "react-dom": "18.2.0",
         "react-error-boundary": "4.0.13",
         "react-google-recaptcha": "2.1.0",
         "react-i18next": "15.0.0",
+        "react-modal": "3.16.1",
         "react-range": "1.8.14",
         "react-router-dom": "6.20.0",
         "sanitize-html": "2.12.1",
@@ -62,6 +68,7 @@
         "slate-dom": "0.112.2",
         "slate-history": "0.110.3",
         "slate-react": "0.112.1",
+        "tippy.js": "6.3.7",
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
@@ -90,6 +97,7 @@
         "eslint-plugin-react": "7.31.11",
         "eslint-plugin-react-hooks": "4.6.0",
         "prettier": "2.8.1",
+        "sass": "1.56.2",
         "typescript": "4.9.4",
         "vite": "5.4.19",
         "vite-plugin-pwa": "0.20.5",
@@ -2305,6 +2313,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.20",
       "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.20.tgz",
@@ -4507,6 +4524,18 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tippyjs/react": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+      "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+      "dependencies": {
+        "tippy.js": "^6.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4572,6 +4601,15 @@
       "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
       "dev": true
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/is-hotkey": {
       "version": "0.1.10",
       "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz",
@@ -4605,14 +4643,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="
     },
     "node_modules/@types/react": {
       "version": "18.2.39",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
       "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -4661,8 +4697,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==",
-      "dev": true
+      "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
@@ -5285,6 +5320,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -5306,6 +5346,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/autosize": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.4.tgz",
+      "integrity": "sha512-5yxLQ22O0fCRGoxGfeLSNt3J8LB1v+umtpMnPW6XjkTWXKoN0AmXAIhelJcDtFT/Y/wYWmfE+oqU10Q0b8FhaQ=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5785,6 +5830,11 @@
       "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
       "license": "MIT"
     },
+    "node_modules/computed-style": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz",
+      "integrity": "sha512-WpAmaKbMNmS3OProfHIdJiNleNJdgUrJfbKArXua28QF7+0CoZjlLn0lp6vlc+dl5r2/X9GQiQRQQU4BzSa69w=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5846,6 +5896,14 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.2.0.tgz",
+      "integrity": "sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==",
+      "dependencies": {
+        "node-fetch": "^2.7.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -6961,6 +7019,11 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7032,6 +7095,33 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fbemitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz",
+      "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==",
+      "dependencies": {
+        "fbjs": "^3.0.0"
+      }
+    },
+    "node_modules/fbjs": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.5.tgz",
+      "integrity": "sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^1.0.35"
+      }
+    },
+    "node_modules/fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
+    },
     "node_modules/fdir": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
@@ -7140,6 +7230,18 @@
       "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
       "dev": true
     },
+    "node_modules/flux": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.3.tgz",
+      "integrity": "sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw==",
+      "dependencies": {
+        "fbemitter": "^3.0.0",
+        "fbjs": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": "^15.0.2 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/focus-trap": {
       "version": "7.6.4",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz",
@@ -7184,6 +7286,38 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.3.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
@@ -7762,6 +7896,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8496,6 +8636,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/line-height": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/line-height/-/line-height-0.3.1.tgz",
+      "integrity": "sha512-YExecgqPwnp5gplD2+Y8e8A5+jKpr25+DzMbFdI1/1UAr0FJrTFv4VkHLf8/6B590i1wUPJWMKKldkd/bdQ//w==",
+      "dependencies": {
+        "computed-style": "~0.1.3"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/linkify-react": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.3.tgz",
@@ -8529,6 +8680,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -9398,6 +9554,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -9521,6 +9685,20 @@
         "react": ">=16.4.1"
       }
     },
+    "node_modules/react-autosize-textarea": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz",
+      "integrity": "sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==",
+      "dependencies": {
+        "autosize": "^4.0.2",
+        "line-height": "^0.3.1",
+        "prop-types": "^15.5.6"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
+      }
+    },
     "node_modules/react-blurhash": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/react-blurhash/-/react-blurhash-0.2.0.tgz",
@@ -9563,6 +9741,11 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/react-google-recaptcha": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",
@@ -9601,6 +9784,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-property": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
@@ -10059,6 +10265,23 @@
         "postcss": "^8.3.11"
       }
     },
+    "node_modules/sass": {
+      "version": "1.56.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz",
+      "integrity": "sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -10158,6 +10381,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10754,6 +10982,14 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -11670,6 +11906,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index f0fa46c7..3987dbfb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.10.0",
+  "version": "4.9.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -27,6 +27,7 @@
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
+    "@tippyjs/react": "4.2.6",
     "@vanilla-extract/css": "1.9.3",
     "@vanilla-extract/recipes": "0.3.0",
     "@vanilla-extract/vite-plugin": "3.7.1",
@@ -42,8 +43,10 @@
     "emojibase": "15.3.1",
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
+    "flux": "4.0.3",
     "focus-trap-react": "10.0.2",
     "folds": "2.2.0",
+    "formik": "2.4.6",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",
@@ -58,14 +61,17 @@
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
+    "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-aria": "3.29.1",
+    "react-autosize-textarea": "7.1.0",
     "react-blurhash": "0.2.0",
     "react-colorful": "5.6.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.13",
     "react-google-recaptcha": "2.1.0",
     "react-i18next": "15.0.0",
+    "react-modal": "3.16.1",
     "react-range": "1.8.14",
     "react-router-dom": "6.20.0",
     "sanitize-html": "2.12.1",
@@ -73,6 +79,7 @@
     "slate-dom": "0.112.2",
     "slate-history": "0.110.3",
     "slate-react": "0.112.1",
+    "tippy.js": "6.3.7",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
@@ -101,6 +108,7 @@
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
     "prettier": "2.8.1",
+    "sass": "1.56.2",
     "typescript": "4.9.4",
     "vite": "5.4.19",
     "vite-plugin-pwa": "0.20.5",
diff --git a/public/res/ic/filled/category.svg b/public/res/ic/filled/category.svg
new file mode 100644
index 00000000..87b2588d
--- /dev/null
+++ b/public/res/ic/filled/category.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path fill="#231F20" d="M9,11H5c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,10.1,10.1,11,9,11z"/>
+</g>
+<g>
+	<path fill="#231F20" d="M19,11h-4c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,10.1,20.1,11,19,11z"/>
+</g>
+<g>
+	<path fill="#231F20" d="M9,21H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,20.1,10.1,21,9,21z"/>
+</g>
+<g>
+	<path fill="#231F20" d="M19,21h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,20.1,20.1,21,19,21z"/>
+</g>
+</svg>
diff --git a/public/res/ic/filled/pin.svg b/public/res/ic/filled/pin.svg
new file mode 100644
index 00000000..6a701474
--- /dev/null
+++ b/public/res/ic/filled/pin.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
+</svg>
diff --git a/public/res/ic/filled/star.svg b/public/res/ic/filled/star.svg
new file mode 100644
index 00000000..378c891e
--- /dev/null
+++ b/public/res/ic/filled/star.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="12,2 15.1,8.6 22,9.6 17,14.8 18.2,22 12,18.6 5.8,22 7,14.8 2,9.6 8.9,8.6 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/add-pin.svg b/public/res/ic/outlined/add-pin.svg
new file mode 100644
index 00000000..9634bede
--- /dev/null
+++ b/public/res/ic/outlined/add-pin.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M13.8,4.7l0.7,0.7l-3.4,3.4L7.7,10l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7L4.6,21l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+		l0.7,0.7L20.9,9l-5.7-5.7L13.8,4.7z M13.7,12l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,12z"/>
+	<polygon points="10,3.3 7.8,3.3 7.8,1 6.3,1 6.3,3.3 4,3.3 4,4.8 6.3,4.8 6.3,7 7.8,7 7.8,4.8 10,4.8 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/add-user.svg b/public/res/ic/outlined/add-user.svg
new file mode 100644
index 00000000..c3803d80
--- /dev/null
+++ b/public/res/ic/outlined/add-user.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M14,11c2.2,0,4-1.8,4-4c0-2.2-1.8-4-4-4s-4,1.8-4,4C10,9.2,11.8,11,14,11z M14,5c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2
+		s-2-0.9-2-2C12,5.9,12.9,5,14,5z"/>
+	<path d="M16,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C22,15.7,19.3,13,16,13z M8,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H8z"/>
+	<polygon points="8,9 5,9 5,6 3,6 3,9 0,9 0,11 3,11 3,14 5,14 5,11 8,11 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/ball.svg b/public/res/ic/outlined/ball.svg
new file mode 100644
index 00000000..d4b89ff5
--- /dev/null
+++ b/public/res/ic/outlined/ball.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.5,5.4c-0.5-0.5-1-1-1.5-1.4c-1.7-1.3-3.8-2-6-2S7.7,2.8,6,4C5.5,4.4,5,4.9,4.5,5.4C2.9,7.2,2,9.5,2,12
+	c0,2.5,0.9,4.8,2.5,6.6c0.5,0.5,1,1,1.5,1.4c1.7,1.3,3.8,2,6,2s4.3-0.8,6-2c0.5-0.4,1-0.9,1.5-1.4c1.6-1.8,2.5-4.1,2.5-6.6
+	C22,9.5,21.1,7.2,19.5,5.4z M4,12c0-2,0.8-3.9,2-5.3C7.2,8.1,8,10,8,12c0,2-0.8,3.9-2,5.3C4.8,15.9,4,14,4,12z M12,20
+	c-1.7,0-3.2-0.5-4.5-1.4C9.1,16.8,10,14.5,10,12c0-2.5-0.9-4.8-2.5-6.6C8.8,4.5,10.3,4,12,4s3.2,0.5,4.5,1.4C14.9,7.2,14,9.5,14,12
+	c0,2.5,0.9,4.8,2.5,6.6C15.2,19.5,13.7,20,12,20z M18,17.3c-1.2-1.4-2-3.3-2-5.3c0-2,0.8-3.9,2-5.3c1.2,1.4,2,3.3,2,5.3
+	C20,14,19.2,15.9,18,17.3z"/>
+</svg>
diff --git a/public/res/ic/outlined/bell-off.svg b/public/res/ic/outlined/bell-off.svg
new file mode 100644
index 00000000..79ce8a33
--- /dev/null
+++ b/public/res/ic/outlined/bell-off.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M20.1,18.1L20.1,18.1L16,14L9.2,7.2L7.8,5.8L5.9,3.9L4.5,5.3l2.1,2.1C6.2,8.2,6,9.1,6,10v6H4v2h13.2l1.5,1.5L20.1,18.1z
+		 M8,16v-6c0-0.4,0.1-0.7,0.1-1l7,7H8z"/>
+	<path d="M12,6c2.2,0,4,1.8,4,4v1.2l2,2V10c0-3-2.2-5.4-5-5.9V3h-2v1.1c-0.6,0.1-1.1,0.3-1.6,0.5L11,6.1C11.3,6.1,11.6,6,12,6z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/bell-ping.svg b/public/res/ic/outlined/bell-ping.svg
new file mode 100644
index 00000000..3431bea1
--- /dev/null
+++ b/public/res/ic/outlined/bell-ping.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="17" cy="8" r="3"/>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,12.9C17.7,13,17.3,13,17,13s-0.7,0-1-0.1V16H8v-6c0-2.2,1.8-4,4-4c0.1,0,0.3,0,0.4,0c0.3-0.7,0.7-1.3,1.3-1.8
+		c-0.2-0.1-0.5-0.1-0.7-0.2V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V12.9z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/bell-ring.svg b/public/res/ic/outlined/bell-ring.svg
new file mode 100644
index 00000000..57fc2679
--- /dev/null
+++ b/public/res/ic/outlined/bell-ring.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,10c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V10z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+	<path d="M19.1,2.9l-1.4,1.4C19.1,5.8,20,7.8,20,10h2C22,7.2,20.9,4.7,19.1,2.9z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/bell.svg b/public/res/ic/outlined/bell.svg
new file mode 100644
index 00000000..43d470b5
--- /dev/null
+++ b/public/res/ic/outlined/bell.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,16v-6c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2H18z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/bin.svg b/public/res/ic/outlined/bin.svg
new file mode 100644
index 00000000..984be625
--- /dev/null
+++ b/public/res/ic/outlined/bin.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<rect x="9" y="8" width="2" height="8"/>
+		</g>
+		<g>
+			<rect x="13" y="8" width="2" height="8"/>
+		</g>
+	</g>
+	<path d="M21,3h-5l-1.4-1.4C14.2,1.2,13.7,1,13.2,1h-2.3c-0.5,0-1,0.2-1.4,0.6L8,3H3v2h2v14c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V5h2
+		V3z M17,19H7V5h10V19z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/bulb.svg b/public/res/ic/outlined/bulb.svg
new file mode 100644
index 00000000..00e80886
--- /dev/null
+++ b/public/res/ic/outlined/bulb.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2c-0.3,0-0.6,0-0.9,0.1c-3.5,0.4-6.4,3.2-7,6.7c-0.5,3.1,0.8,6,3.1,7.7C7.7,16.8,8,17.4,8,18v4h8v-4
+	c0-0.6,0.3-1.2,0.8-1.6c1.9-1.5,3.2-3.8,3.2-6.4C20,5.6,16.4,2,12,2z M15.6,14.8c-1,0.7-1.6,1.9-1.6,3.2v2h-1.3v-8.1
+	c0.7-0.3,1.3-1,1.3-1.9c0-1.1-0.9-2-2-2s-2,0.9-2,2c0,0.8,0.5,1.6,1.3,1.9V20H10v-2c0-1.2-0.6-2.4-1.6-3.2C6.6,13.4,5.7,11.3,6.1,9
+	c0.4-2.6,2.6-4.7,5.2-5c0.2,0,0.5,0,0.7,0c3.3,0,6,2.7,6,6C18,11.9,17.1,13.7,15.6,14.8z"/>
+</svg>
diff --git a/public/res/ic/outlined/category.svg b/public/res/ic/outlined/category.svg
new file mode 100644
index 00000000..c7c33b38
--- /dev/null
+++ b/public/res/ic/outlined/category.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path fill="#221F1F" d="M9,5v4H5V5H9 M9,3H5C3.9,3,3,3.9,3,5v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C11,3.9,10.1,3,9,3L9,3z"/>
+	<path fill="#221F1F" d="M19,5v4h-4V5H19 M19,3h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3
+		z"/>
+	<path fill="#221F1F" d="M9,15v4H5v-4H9 M9,13H5c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4C11,13.9,10.1,13,9,13
+		L9,13z"/>
+	<path fill="#221F1F" d="M19,15v4h-4v-4H19 M19,13h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4
+		C21,13.9,20.1,13,19,13L19,13z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/check.svg b/public/res/ic/outlined/check.svg
new file mode 100644
index 00000000..72a18327
--- /dev/null
+++ b/public/res/ic/outlined/check.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="9.5,14.1 6,10.6 4.6,12 8.1,15.5 9.5,16.9 19.4,7 18,5.6 "/>
+</svg>
diff --git a/public/res/ic/outlined/chevron-bottom.svg b/public/res/ic/outlined/chevron-bottom.svg
new file mode 100644
index 00000000..5562b7aa
--- /dev/null
+++ b/public/res/ic/outlined/chevron-bottom.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="4.2,9.2 5.6,7.8 12,14.2 18.4,7.8 19.8,9.2 12,17 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/chevron-left.svg b/public/res/ic/outlined/chevron-left.svg
new file mode 100644
index 00000000..ba9e12cc
--- /dev/null
+++ b/public/res/ic/outlined/chevron-left.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="14.8,4.2 16.2,5.6 9.8,12 16.2,18.4 14.8,19.8 7,12 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/chevron-right.svg b/public/res/ic/outlined/chevron-right.svg
new file mode 100644
index 00000000..7f6a806e
--- /dev/null
+++ b/public/res/ic/outlined/chevron-right.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="9.2,4.2 7.8,5.6 14.2,12 7.8,18.4 9.2,19.8 17,12 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/chevron-top.svg b/public/res/ic/outlined/chevron-top.svg
new file mode 100644
index 00000000..f5948fe9
--- /dev/null
+++ b/public/res/ic/outlined/chevron-top.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="4.2,14.8 5.6,16.2 12,9.8 18.4,16.2 19.8,14.8 12,7 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/circle-plus.svg b/public/res/ic/outlined/circle-plus.svg
new file mode 100644
index 00000000..41690a08
--- /dev/null
+++ b/public/res/ic/outlined/circle-plus.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/cmd.svg b/public/res/ic/outlined/cmd.svg
new file mode 100644
index 00000000..75ae0d98
--- /dev/null
+++ b/public/res/ic/outlined/cmd.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4V6h16V18z"/>
+	<polygon points="7.5,16.5 12.1,12 7.5,7.5 6.5,8.5 9.9,12 6.5,15.5 	"/>
+	<rect x="13" y="14.5" width="5" height="1.5"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/coin.svg b/public/res/ic/outlined/coin.svg
new file mode 100644
index 00000000..025424e8
--- /dev/null
+++ b/public/res/ic/outlined/coin.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<path d="M13,11.3h-2c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h4V7.3h-2.3V6h-1.5v1.3H11c-1.5,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8h2
+		c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3H9v1.5h2.3V18h1.5v-1.3H13c1.5,0,2.8-1.2,2.8-2.8S14.5,11.3,13,11.3z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/cross.svg b/public/res/ic/outlined/cross.svg
new file mode 100644
index 00000000..0acda884
--- /dev/null
+++ b/public/res/ic/outlined/cross.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="17.7,16.2 13.4,12 17.7,7.8 16.2,6.3 12,10.6 7.8,6.3 6.3,7.8 10.6,12 6.3,16.2 7.8,17.7 12,13.4 16.2,17.7 "/>
+</svg>
diff --git a/public/res/ic/outlined/cup.svg b/public/res/ic/outlined/cup.svg
new file mode 100644
index 00000000..8921e2c9
--- /dev/null
+++ b/public/res/ic/outlined/cup.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M23,12c0-2.4-1.7-4.4-4-4.9V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v10c0,3.3,2.7,6,6,6h4c2.6,0,4.9-1.7,5.7-4.1
+	C21.1,16.6,23,14.5,23,12z M17,5v2H5V5H17z M13,19H9c-2.2,0-4-1.8-4-4V9h12v6C17,17.2,15.2,19,13,19z M19,14.8V9.2
+	c1.2,0.4,2,1.5,2,2.8S20.2,14.4,19,14.8z"/>
+</svg>
diff --git a/public/res/ic/outlined/dog.svg b/public/res/ic/outlined/dog.svg
new file mode 100644
index 00000000..3b252956
--- /dev/null
+++ b/public/res/ic/outlined/dog.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="10" cy="11" r="1"/>
+	<circle cx="14" cy="11" r="1"/>
+	<path d="M20.3,16.2C20,14.7,19.6,13,19,11.3c0.6-2.1,1.6-6.7,0.4-8.4c-0.3-0.5-0.8-0.7-1.4-0.7c-1.2,0-2.8,1.3-3.7,2.3
+		C13.6,4.2,12.8,4,12,4s-1.6,0.2-2.3,0.6c-1-1-2.5-2.3-3.7-2.3c-0.6,0-1.1,0.2-1.4,0.7C3.4,4.6,4.4,9.2,5,11.3
+		c-0.6,1.7-1,3.4-1.3,4.9C3.2,18.7,5.1,21,7.6,21h8.7C18.9,21,20.8,18.7,20.3,16.2z M5.8,3.8C5.9,3.8,5.9,3.8,6,3.8
+		c0.5,0,1.5,0.8,2.5,1.7C7.5,6.3,6.7,7.6,6,9C5.6,6.8,5.3,4.5,5.8,3.8z M17.9,18.3c-0.4,0.5-1,0.7-1.6,0.7H7.6
+		c-0.6,0-1.2-0.3-1.6-0.7c-0.2-0.3-0.6-0.8-0.4-1.6C7,10,9.4,6,12,6s5,4,6.3,10.6C18.5,17.4,18.1,18,17.9,18.3z M18,9
+		c-0.7-1.4-1.5-2.6-2.5-3.5c0.9-0.9,2-1.7,2.5-1.7c0.1,0,0.1,0,0.2,0.1C18.7,4.5,18.5,6.6,18,9z"/>
+	<path d="M12.6,14h-1.2c-0.8,0-1.4,0.6-1.4,1.4v0c0,0.4,0.1,0.7,0.4,1l0.9,0.9c0.4,0.4,1,0.4,1.4,0l0.9-0.9c0.3-0.3,0.4-0.6,0.4-1v0
+		C14,14.6,13.4,14,12.6,14z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/download.svg b/public/res/ic/outlined/download.svg
new file mode 100644
index 00000000..677014f3
--- /dev/null
+++ b/public/res/ic/outlined/download.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M19,21H5c-1.1,0-2-0.9-2-2v-3h2v3h14v-3h2v3C21,20.1,20.1,21,19,21z"/>
+	</g>
+	<polygon points="15.3,11.3 13,13.6 13,3 11,3 11,13.6 8.7,11.3 7.3,12.7 12,17.4 16.7,12.7 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/emoji-add.svg b/public/res/ic/outlined/emoji-add.svg
new file mode 100644
index 00000000..c4cacef2
--- /dev/null
+++ b/public/res/ic/outlined/emoji-add.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8V2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10h-2C20,16.4,16.4,20,12,20z"/>
+	<circle cx="9.5" cy="8.5" r="1.5"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+	<path d="M6,12c0,3.3,2.7,6,6,6s6-2.7,6-6h-2c0,2.2-1.8,4-4,4s-4-1.8-4-4H6z"/>
+	<polygon points="20.8,3.3 20.8,0 19.3,0 19.3,3.3 16,3.3 16,4.8 19.3,4.8 19.3,8 20.8,8 20.8,4.8 24,4.8 24,3.3 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/emoji.svg b/public/res/ic/outlined/emoji.svg
new file mode 100644
index 00000000..0daac879
--- /dev/null
+++ b/public/res/ic/outlined/emoji.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<circle cx="9.5" cy="8.5" r="1.5"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+	<path d="M16,12c0,2.2-1.8,4-4,4s-4-1.8-4-4H6c0,3.3,2.7,6,6,6s6-2.7,6-6H16z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/explore.svg b/public/res/ic/outlined/explore.svg
new file mode 100644
index 00000000..7cc2a479
--- /dev/null
+++ b/public/res/ic/outlined/explore.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<path d="M9,12l3,6l3-6l-3-6L9,12z M13,12c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C12.6,11,13,11.4,13,12z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/external.svg b/public/res/ic/outlined/external.svg
new file mode 100644
index 00000000..adade1bd
--- /dev/null
+++ b/public/res/ic/outlined/external.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
+</svg>
diff --git a/public/res/ic/outlined/eye-blind.svg b/public/res/ic/outlined/eye-blind.svg
new file mode 100644
index 00000000..fbc8e2ae
--- /dev/null
+++ b/public/res/ic/outlined/eye-blind.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92896 3.51471L3.51474 4.92892L5.97515 7.38933C4.46742 8.5776 3.32116 9.93994 2.7 10.8C2.1 11.5 2.1 12.5 2.7 13.2C4 15 7.6 19 12 19C13.5709 19 15.0398 18.4902 16.3384 17.7526L19.0711 20.4853L20.4853 19.0711L4.92896 3.51471ZM4.2 12C4.68291 11.3561 5.85678 9.9637 7.39721 8.81139L9.29238 10.7066C9.10496 11.0982 9 11.5368 9 12C9 13.6569 10.3431 15 12 15C12.4632 15 12.9018 14.895 13.2934 14.7076L14.8573 16.2715C13.9566 16.7128 12.9896 17 12 17C8.4 17 5.1 13.2 4.2 12Z" fill="black"/>
+<path d="M9.6226 5.37995L11.2906 7.04797C11.5254 7.01661 11.762 7 12 7C15.6 7 18.9 10.8 19.8 12C19.493 12.4094 18.9066 13.1213 18.1244 13.8817L19.5194 15.2768C20.2973 14.4974 20.9049 13.7471 21.3 13.2C21.9 12.5 21.9 11.5 21.3 10.8C20 9 16.4 5 12 5C11.1762 5 10.3805 5.14021 9.6226 5.37995Z" fill="black"/>
+</svg>
diff --git a/public/res/ic/outlined/eye.svg b/public/res/ic/outlined/eye.svg
new file mode 100644
index 00000000..1ce868bf
--- /dev/null
+++ b/public/res/ic/outlined/eye.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19C7.6 19 4 15 2.7 13.2C2.1 12.5 2.1 11.5 2.7 10.8C4 9 7.6 5 12 5C16.4 5 20 9 21.3 10.8C21.9 11.5 21.9 12.5 21.3 13.2C20 15 16.4 19 12 19ZM12 7C8.4 7 5.1 10.8 4.2 12C5.1 13.2 8.4 17 12 17C15.6 17 18.9 13.2 19.8 12C18.9 10.8 15.6 7 12 7Z" fill="black"/>
+<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="black"/>
+</svg>
diff --git a/public/res/ic/outlined/file.svg b/public/res/ic/outlined/file.svg
new file mode 100644
index 00000000..d6a2a27a
--- /dev/null
+++ b/public/res/ic/outlined/file.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8.2L13.8,2z M18,20H6V4h7v3c0,1.1,0.9,2,2,2h3V20z"/>
+</svg>
diff --git a/public/res/ic/outlined/flag.svg b/public/res/ic/outlined/flag.svg
new file mode 100644
index 00000000..8fce98d6
--- /dev/null
+++ b/public/res/ic/outlined/flag.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M18.5,5l-2.1,2.8L15.5,9l0.9,1.2l2.1,2.8H9H7v2v4H5V5H18.5 M21,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2
+	v-4h12v-2l-3-4l3-4V3L21,3z"/>
+</svg>
diff --git a/public/res/ic/outlined/hash-globe.svg b/public/res/ic/outlined/hash-globe.svg
new file mode 100644
index 00000000..ce3df083
--- /dev/null
+++ b/public/res/ic/outlined/hash-globe.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
+		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
+		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/hash-lock.svg b/public/res/ic/outlined/hash-lock.svg
new file mode 100644
index 00000000..ae263ced
--- /dev/null
+++ b/public/res/ic/outlined/hash-lock.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.6,4,21,4z
+		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/hash-plus.svg b/public/res/ic/outlined/hash-plus.svg
new file mode 100644
index 00000000..69737fd5
--- /dev/null
+++ b/public/res/ic/outlined/hash-plus.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<g>
+		<path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/hash-search.svg b/public/res/ic/outlined/hash-search.svg
new file mode 100644
index 00000000..f135e898
--- /dev/null
+++ b/public/res/ic/outlined/hash-search.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16.1,12 14.1,12 14.1,14 10.1,14 10.1,10 12.1,10 12.1,8 10.1,8 10.1,3 8.1,3 8.1,8 3.1,8 3.1,10 8.1,10 8.1,14 
+		3.1,14 3.1,16 8.1,16 8.1,21 10.1,21 10.1,16 14.1,16 14.1,21 16.1,21 16.1,16 21.1,16 21.1,14 16.1,14 	"/>
+	<path d="M24,9l-2.7-2.7c0.5-0.7,0.8-1.5,0.8-2.3c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4c0.8,0,1.5-0.2,2.2-0.6l2.7,2.7L24,9z
+		 M18.1,6.5c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S19.5,6.5,18.1,6.5z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/hash-shield.svg b/public/res/ic/outlined/hash-shield.svg
new file mode 100644
index 00000000..dfd344b1
--- /dev/null
+++ b/public/res/ic/outlined/hash-shield.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M18,0l-4,2v2c0,1.9,0.9,3.7,2.4,4.8L18,10l1.6-1.2C21.1,7.7,22,5.9,22,4V2L18,0z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/hash.svg b/public/res/ic/outlined/hash.svg
new file mode 100644
index 00000000..dcb8b964
--- /dev/null
+++ b/public/res/ic/outlined/hash.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21,10V8h-5V3h-2v5h-4V3H8v5H3v2h5v4H3v2h5v5h2v-5h4v5h2v-5h5v-2h-5v-4H21z M14,14h-4v-4h4V14z"/>
+</svg>
diff --git a/public/res/ic/outlined/heart.svg b/public/res/ic/outlined/heart.svg
new file mode 100644
index 00000000..c5b940b6
--- /dev/null
+++ b/public/res/ic/outlined/heart.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M16.6,5.1c0.9,0,1.8,0.4,2.5,1c0.7,0.7,1,1.5,1,2.5c0,0.9-0.4,1.8-1,2.5l-0.7,0.7L12,18.2l-7.1-7.1c-0.7-0.7-1-1.5-1-2.5
+	c0-0.9,0.4-1.8,1-2.5c0.7-0.7,1.5-1,2.5-1s1.8,0.4,2.5,1l0.7,0.7L12,8.2l1.4-1.4l0.7-0.7C14.8,5.5,15.7,5.1,16.6,5.1 M16.6,3.1
+	c-1.4,0-2.8,0.5-3.9,1.6L12,5.4l-0.7-0.7c-1.1-1.1-2.5-1.6-3.9-1.6C6,3.1,4.6,3.6,3.5,4.7c-2.2,2.1-2.2,5.6,0,7.8L12,21l7.8-7.8
+	l0.7-0.7c1.1-1.1,1.6-2.5,1.6-3.9c0-1.4-0.5-2.8-1.6-3.9C19.4,3.6,18,3.1,16.6,3.1L16.6,3.1z"/>
+</svg>
diff --git a/public/res/ic/outlined/home.svg b/public/res/ic/outlined/home.svg
new file mode 100644
index 00000000..3c7a02df
--- /dev/null
+++ b/public/res/ic/outlined/home.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,3L2,12h3v7c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2v-7h3L12,3z M17,12v7H7v-7v-1.8l5-4.5l5,4.5V12z"/>
+	<circle cx="12" cy="14" r="2"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/horizontal-menu.svg b/public/res/ic/outlined/horizontal-menu.svg
new file mode 100644
index 00000000..a19b3c35
--- /dev/null
+++ b/public/res/ic/outlined/horizontal-menu.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="5" cy="12" r="2"/>
+	<circle cx="12" cy="12" r="2"/>
+	<circle cx="19" cy="12" r="2"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/inbox.svg b/public/res/ic/outlined/inbox.svg
new file mode 100644
index 00000000..65435876
--- /dev/null
+++ b/public/res/ic/outlined/inbox.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19,12V5c0-1.1-0.9-2-2-2H7C5.9,3,5,3.9,5,5v7c-1.1,0-2,0.9-2,2v5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-5
+	C21,12.9,20.1,12,19,12z M7,5h10v7h-3v1c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2v-1H7V5z M19,19H5v-5h3.1c0.4,1.7,2,3,3.9,3
+	c1.9,0,3.4-1.3,3.9-3H19V19z"/>
+</svg>
diff --git a/public/res/ic/outlined/info.svg b/public/res/ic/outlined/info.svg
new file mode 100644
index 00000000..30a57887
--- /dev/null
+++ b/public/res/ic/outlined/info.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<g>
+		<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 		"/>
+		<circle cx="12" cy="8" r="1"/>
+	</g>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/invite-arrow.svg b/public/res/ic/outlined/invite-arrow.svg
new file mode 100644
index 00000000..370bf8e8
--- /dev/null
+++ b/public/res/ic/outlined/invite-arrow.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
+		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
+	<polygon points="9,17.3 6.8,17.3 6.8,15 5.3,15 5.3,17.3 3,17.3 3,18.8 5.3,18.8 5.3,21 6.8,21 6.8,18.8 9,18.8 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/invite-cancel-arrow.svg b/public/res/ic/outlined/invite-cancel-arrow.svg
new file mode 100644
index 00000000..795a773a
--- /dev/null
+++ b/public/res/ic/outlined/invite-cancel-arrow.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
+		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
+	<polygon points="8.7,19.6 7.1,18 8.7,16.4 7.6,15.4 6,17 4.4,15.4 3.3,16.4 4.9,18 3.3,19.6 4.4,20.7 6,19.1 7.6,20.7 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/invite.svg b/public/res/ic/outlined/invite.svg
new file mode 100644
index 00000000..3896e15e
--- /dev/null
+++ b/public/res/ic/outlined/invite.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="19.8,16 18.3,16 18.3,18.3 16,18.3 16,19.8 18.3,19.8 18.3,22 19.8,22 19.8,19.8 22,19.8 22,18.3 19.8,18.3 	"/>
+	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h10v-2H4V9.9l8,5.3l8-5.3V14h2V6C22,4.9,21.1,4,20,4z M20,7.5l-8,5.3L4,7.5V6
+		h16V7.5z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/join-arrow.svg b/public/res/ic/outlined/join-arrow.svg
new file mode 100644
index 00000000..90cfa651
--- /dev/null
+++ b/public/res/ic/outlined/join-arrow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M4.6,4.5l1.2-1.2l1.4,1.4L6,5.9C4.8,7,4.8,9,6,10.1C6.6,10.7,7.3,11,8.1,11H17l-2.3-2.3l1.4-1.4l4.7,4.7l-4.7,4.7l-1.4-1.4
+	L17,13H8.1c-1.3,0-2.6-0.5-3.5-1.5C2.6,9.6,2.6,6.4,4.6,4.5z"/>
+</svg>
diff --git a/public/res/ic/outlined/leave-arrow.svg b/public/res/ic/outlined/leave-arrow.svg
new file mode 100644
index 00000000..a51ac1d1
--- /dev/null
+++ b/public/res/ic/outlined/leave-arrow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.4,4.5l-1.2-1.2l-1.4,1.4L18,5.9c1.2,1.2,1.2,3.1,0,4.2c-0.6,0.6-1.3,0.9-2.1,0.9H7l2.3-2.3L7.8,7.3L3.1,12l4.7,4.7
+	l1.4-1.4L7,13h8.9c1.3,0,2.6-0.5,3.5-1.5C21.4,9.6,21.4,6.4,19.4,4.5z"/>
+</svg>
diff --git a/public/res/ic/outlined/lock.svg b/public/res/ic/outlined/lock.svg
new file mode 100644
index 00000000..77021f0f
--- /dev/null
+++ b/public/res/ic/outlined/lock.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M18,10h-1V7.2c0-2.6-1.9-4.9-4.5-5.2C9.5,1.7,7,4.1,7,7v3H6c-1.1,0-2,0.9-2,2v8c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-8
+		C20,10.9,19.1,10,18,10z M9,7c0-1.7,1.3-3,3-3c1.7,0,3,1.3,3,3v3H9V7z M18,20H6v-8h12V20z"/>
+	<circle cx="12" cy="16" r="2"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/markdown.svg b/public/res/ic/outlined/markdown.svg
new file mode 100644
index 00000000..775afbfb
--- /dev/null
+++ b/public/res/ic/outlined/markdown.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="12,7 12,7 8,11 4,7 4,7 4,7 2,7 2,17 4,17 4,9.8 8,13.8 12,9.8 12,17 14,17 14,7 12,7 	"/>
+	<path d="M20,14V7h-2v7h-2l3,3c0.1,0,0.5-0.4,1-0.9c0.9-0.9,2-2.1,2-2.1H20z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/message-unread.svg b/public/res/ic/outlined/message-unread.svg
new file mode 100644
index 00000000..fc5e9ff0
--- /dev/null
+++ b/public/res/ic/outlined/message-unread.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
+	<g>
+		<circle fill="#010101" cx="19" cy="6" r="4"/>
+	</g>
+	<path fill="#010101" d="M13.3,8H7v2h7.5C14,9.4,13.6,8.7,13.3,8z"/>
+	<path fill="#010101" d="M19,12v5.6l-2.4-1.3L16.1,16h-0.5H5V6h8c0-0.7,0.1-1.4,0.3-2H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2
+		h10.8l5.4,3v-9.3C20.4,11.9,19.7,12,19,12z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/message.svg b/public/res/ic/outlined/message.svg
new file mode 100644
index 00000000..d36e9a30
--- /dev/null
+++ b/public/res/ic/outlined/message.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path fill="#010101" d="M19,6v11.6l-2.4-1.3L16.1,16h-0.5H5V6H19 M19.2,4H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2h10.8l5.4,3V6
+		C21,4.9,20.2,4,19.2,4L19.2,4z"/>
+	<rect x="7" y="8" fill="#010101" width="10" height="2"/>
+	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/pause.svg b/public/res/ic/outlined/pause.svg
new file mode 100644
index 00000000..c312613b
--- /dev/null
+++ b/public/res/ic/outlined/pause.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<rect x="9" y="8" width="2" height="8"/>
+	</g>
+	<g>
+		<rect x="13" y="8" width="2" height="8"/>
+	</g>
+	<path d="M12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4 M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2
+		L12,2z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/peace.svg b/public/res/ic/outlined/peace.svg
new file mode 100644
index 00000000..8a7c81a3
--- /dev/null
+++ b/public/res/ic/outlined/peace.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M20,12c0,1.6-0.5,3.1-1.3,4.3L13,10.6V4.1
+	C16.9,4.6,20,7.9,20,12z M11,19.9c-1.7-0.2-3.2-1-4.4-2.1l4.4-4.4V19.9z M13,13.4l4.4,4.4c-1.2,1.1-2.7,1.9-4.4,2.1V13.4z M11,4.1
+	v6.5l-5.7,5.7C4.5,15.1,4,13.6,4,12C4,7.9,7.1,4.6,11,4.1z"/>
+</svg>
diff --git a/public/res/ic/outlined/pencil.svg b/public/res/ic/outlined/pencil.svg
new file mode 100644
index 00000000..1b8ac24a
--- /dev/null
+++ b/public/res/ic/outlined/pencil.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M20.6,5.6l-2.2-2.2C18,3,17.5,2.8,17,2.8S16,3,15.6,3.4L3,16v5h5L20.6,8.4C21.4,7.6,21.4,6.4,20.6,5.6z M7.2,19H5v-2.2
+	l9.2-9.2l2.2,2.2L7.2,19z M15.6,6.2L17,4.8c0,0,0,0,0,0L19.2,7l-1.4,1.4L15.6,6.2z"/>
+</svg>
diff --git a/public/res/ic/outlined/photo.svg b/public/res/ic/outlined/photo.svg
new file mode 100644
index 00000000..af01a330
--- /dev/null
+++ b/public/res/ic/outlined/photo.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v12.7l-5-5.8l-2,2L8.9,9.6
+		l-3.9,7V5H19z M18.2,19H5.4l3.7-6.6l2.8,3.8l2-2L18.2,19z"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/pin.svg b/public/res/ic/outlined/pin.svg
new file mode 100644
index 00000000..211242cd
--- /dev/null
+++ b/public/res/ic/outlined/pin.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
+</svg>
diff --git a/public/res/ic/outlined/play.svg b/public/res/ic/outlined/play.svg
new file mode 100644
index 00000000..87b3a8f6
--- /dev/null
+++ b/public/res/ic/outlined/play.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4 M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2
+		L12,2z"/>
+	<polygon points="10,8 10,16 16,12 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/plus.svg b/public/res/ic/outlined/plus.svg
new file mode 100644
index 00000000..ce37594e
--- /dev/null
+++ b/public/res/ic/outlined/plus.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="19,11 13,11 13,5 11,5 11,11 5,11 5,13 11,13 11,19 13,19 13,13 19,13 "/>
+</svg>
diff --git a/public/res/ic/outlined/power.svg b/public/res/ic/outlined/power.svg
new file mode 100644
index 00000000..8aeb6db8
--- /dev/null
+++ b/public/res/ic/outlined/power.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M17.6,5l-1.3,1.6C18,7.8,19,9.8,19,12c0,3.9-3.1,7-7,7s-7-3.1-7-7c0-2.2,1-4.2,2.6-5.5L6.4,5C4.3,6.6,3,9.2,3,12
+		c0,5,4,9,9,9c5,0,9-4,9-9C21,9.2,19.7,6.6,17.6,5z"/>
+	<rect x="11" y="2" width="2" height="10"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/recent-clock.svg b/public/res/ic/outlined/recent-clock.svg
new file mode 100644
index 00000000..30b10d59
--- /dev/null
+++ b/public/res/ic/outlined/recent-clock.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="11,7 11,13 14.5,16.5 15.9,15.1 13,12.2 13,7 	"/>
+	<path d="M12,2C8.7,2,5.8,3.6,4,6V4H2.5v5h5V7.5H5.4C6.9,5.4,9.3,4,12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8H2
+		c0,5.5,4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z"/>
+</g>
+<g>
+	<polygon points="49,44 49,50 53.2,54.2 54.7,52.8 51,49.2 51,44 	"/>
+	<polygon points="45.5,47 40.5,47 40.5,42 42,42 42,45.5 45.5,45.5 	"/>
+	<path d="M50,40c-4.1,0-7.6,2.5-9.2,6h2.2c1.4-2.4,4-4,6.9-4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8h-2c0,5.5,4.5,10,10,10
+		s10-4.5,10-10S55.5,40,50,40z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/reply-arrow.svg b/public/res/ic/outlined/reply-arrow.svg
new file mode 100644
index 00000000..3cda01cd
--- /dev/null
+++ b/public/res/ic/outlined/reply-arrow.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21,13v-2H9c-1.1,0-2,0.9-2,2v4.6l-2.3-2.3l-1.4,1.4L8,21.4l4.7-4.7l-1.4-1.4L9,17.6V13H21z"/>
+</svg>
diff --git a/public/res/ic/outlined/search.svg b/public/res/ic/outlined/search.svg
new file mode 100644
index 00000000..75dd6320
--- /dev/null
+++ b/public/res/ic/outlined/search.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M21.7,20.3l-5.4-5.4c1.1-1.4,1.7-3.1,1.7-4.9c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.8,0,3.5-0.6,4.9-1.7l5.4,5.4
+	L21.7,20.3z M10,16c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S13.3,16,10,16z"/>
+</svg>
diff --git a/public/res/ic/outlined/send.svg b/public/res/ic/outlined/send.svg
new file mode 100644
index 00000000..aa487132
--- /dev/null
+++ b/public/res/ic/outlined/send.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M4,5.2L17.5,12L4,18.8v-4.3l1.6-0.5l5.7-1.9l-5.7-1.9L4,9.6V5.2 M2,2v11v-2l3,1l-3,1v9l20-10L2,2L2,2z"/>
+</svg>
diff --git a/public/res/ic/outlined/settings.svg b/public/res/ic/outlined/settings.svg
new file mode 100644
index 00000000..ee640b39
--- /dev/null
+++ b/public/res/ic/outlined/settings.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M13,4v0.6v1.3l1.2,0.5c0.5,0.2,1,0.5,1.4,0.8l1.1,0.8l1.2-0.7l0.5-0.3l1,1.7l-0.5,0.3l-1.2,0.7l0.2,1.3
+		c0,0.3,0.1,0.6,0.1,0.8s0,0.5-0.1,0.8l-0.2,1.3l1.2,0.7l0.5,0.3l-1,1.7l-0.5-0.3l-1.2-0.7l-1.1,0.8c-0.4,0.3-0.9,0.6-1.4,0.8
+		L13,18.1v1.3V20h-2v-0.6v-1.3l-1.2-0.5c-0.5-0.2-1-0.5-1.4-0.8l-1.1-0.8l-1.2,0.7l-0.5,0.3l-1-1.7l0.5-0.3l1.2-0.7l-0.2-1.3
+		C6,12.5,6,12.2,6,12s0-0.5,0.1-0.8l0.2-1.3L5.1,9.2L4.6,8.9l1-1.7l0.5,0.3l1.2,0.7l1.1-0.8c0.4-0.3,0.9-0.6,1.4-0.8L11,5.9V4.6V4
+		H13 M13,2h-2C9.9,2,9,2.9,9,4v0.6C8.3,4.9,7.7,5.2,7.1,5.7L6.6,5.4c-0.3-0.2-0.7-0.3-1-0.3c-0.7,0-1.4,0.4-1.7,1l-1,1.7
+		c-0.6,1-0.2,2.2,0.7,2.7l0.5,0.3C4,11.3,4,11.6,4,12s0,0.7,0.1,1.1l-0.5,0.3c-1,0.6-1.3,1.8-0.7,2.7l1,1.7c0.4,0.6,1,1,1.7,1
+		c0.3,0,0.7-0.1,1-0.3l0.5-0.3c0.6,0.5,1.2,0.8,1.9,1.1V20c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-0.6c0.7-0.3,1.3-0.7,1.9-1.1l0.5,0.3
+		c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1l1-1.7c0.6-1,0.2-2.2-0.7-2.7l-0.5-0.3C20,12.7,20,12.4,20,12s0-0.7-0.1-1.1l0.5-0.3
+		c1-0.6,1.3-1.8,0.7-2.7l-1-1.7c-0.4-0.6-1-1-1.7-1c-0.3,0-0.7,0.1-1,0.3l-0.5,0.3c-0.6-0.5-1.2-0.8-1.9-1.1V4C15,2.9,14.1,2,13,2
+		L13,2z"/>
+	<g>
+		<path d="M12,16c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S14.2,16,12,16z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
+			"/>
+	</g>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/shield-empty.svg b/public/res/ic/outlined/shield-empty.svg
new file mode 100644
index 00000000..6bc9d304
--- /dev/null
+++ b/public/res/ic/outlined/shield-empty.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+</svg>
diff --git a/public/res/ic/outlined/shield-user.svg b/public/res/ic/outlined/shield-user.svg
new file mode 100644
index 00000000..bd5f07c5
--- /dev/null
+++ b/public/res/ic/outlined/shield-user.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<circle cx="12" cy="9" r="2"/>
+	<path d="M15,16H9v-1c0-1.7,1.3-3,3-3h0c1.7,0,3,1.3,3,3V16z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/shield.svg b/public/res/ic/outlined/shield.svg
new file mode 100644
index 00000000..9bb46fa1
--- /dev/null
+++ b/public/res/ic/outlined/shield.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<path d="M10,11c0,0.7,0.4,1.4,1,1.7V16h2v-3.3c0.6-0.3,1-1,1-1.7c0-1.1-0.9-2-2-2S10,9.9,10,11z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/space-globe.svg b/public/res/ic/outlined/space-globe.svg
new file mode 100644
index 00000000..63d71f1d
--- /dev/null
+++ b/public/res/ic/outlined/space-globe.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
+		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
+		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/space-lock.svg b/public/res/ic/outlined/space-lock.svg
new file mode 100644
index 00000000..b15705ca
--- /dev/null
+++ b/public/res/ic/outlined/space-lock.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.5,4,21,4z
+		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2C5.8,13.3,4.4,12.4,4,12
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/space-plus.svg b/public/res/ic/outlined/space-plus.svg
new file mode 100644
index 00000000..4d69a1ef
--- /dev/null
+++ b/public/res/ic/outlined/space-plus.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+  <path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/space.svg b/public/res/ic/outlined/space.svg
new file mode 100644
index 00000000..a4b54b3e
--- /dev/null
+++ b/public/res/ic/outlined/space.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,4.1c0.4,0.3,1.3,1.8,1.7,4.6L14,10l1.4,0.2c2.8,0.4,4.2,1.3,4.6,1.7c-0.3,0.4-1.8,1.3-4.6,1.7L14,14l-0.2,1.4
+	c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7c0.3-0.4,1.8-1.3,4.6-1.7L10,10
+	l0.2-1.4C10.7,5.8,11.6,4.4,12,4.1 M12,2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7c0.6,3.7,2,6.3,3.7,6.3
+	s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7s-2.6-3.1-6.3-3.7C15.1,4.6,13.7,2,12,2L12,2z"/>
+</svg>
diff --git a/public/res/ic/outlined/star.svg b/public/res/ic/outlined/star.svg
new file mode 100644
index 00000000..290f159a
--- /dev/null
+++ b/public/res/ic/outlined/star.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,6.7l1.7,3.7l4.1,0.6l-3,3.1l0.7,4.2l-3.5-2l-3.5,2l0.7-4.2l-3-3.1l4.1-0.6L12,6.7 M12,2L8.9,8.6L2,9.6l5,5.1L5.8,22
+	l6.2-3.4l6.2,3.4L17,14.8l5-5.1l-6.9-1.1L12,2L12,2z"/>
+</svg>
diff --git a/public/res/ic/outlined/sticker.svg b/public/res/ic/outlined/sticker.svg
new file mode 100644
index 00000000..bc486e5e
--- /dev/null
+++ b/public/res/ic/outlined/sticker.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3L21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16ZM19 9H17C15.8954 9 15 8.10457 15 7V5H5V19H19V9Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12H9Z" fill="black"/>
+</svg>
diff --git a/public/res/ic/outlined/sun.svg b/public/res/ic/outlined/sun.svg
new file mode 100644
index 00000000..d8ed06fd
--- /dev/null
+++ b/public/res/ic/outlined/sun.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,9c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,9,12,9 M12,7c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S14.8,7,12,7L12,7z"
+		/>
+	<g>
+		<rect x="11" y="2" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="19" y="11" width="3" height="2"/>
+	</g>
+	<g>
+		<rect x="11" y="19" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="2" y="11" width="3" height="2"/>
+	</g>
+	<g>
+		<rect x="17" y="4.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 9.5104 -10.9811)" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="16.5" y="17" transform="matrix(0.7071 0.7071 -0.7071 0.7071 18.0105 -7.4602)" width="3" height="2"/>
+	</g>
+	<g>
+		<rect x="5" y="16.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 14.4896 1.0399)" width="2" height="3"/>
+	</g>
+	<g>
+		<rect x="4.5" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 5.9895 -2.4809)" width="3" height="2"/>
+	</g>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/tick-mark.svg b/public/res/ic/outlined/tick-mark.svg
new file mode 100644
index 00000000..8e76ed55
--- /dev/null
+++ b/public/res/ic/outlined/tick-mark.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<rect x="13.6" y="6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 10.9064 -7.6107)" width="2" height="6.7"/>
+	<rect x="1.8" y="12.9" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 0.1967 27.7885)" width="8.1" height="2"/>
+	<polygon points="21.3,6.3 13,14.6 8.7,10.3 7.3,11.7 13,17.4 22.7,7.7 	"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/user.svg b/public/res/ic/outlined/user.svg
new file mode 100644
index 00000000..6756a1b2
--- /dev/null
+++ b/public/res/ic/outlined/user.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,11c2.2,0,4-1.8,4-4s-1.8-4-4-4S8,4.8,8,7S9.8,11,12,11z M12,5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,5,12,5z"/>
+	<path d="M14,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C20,15.7,17.3,13,14,13z M6,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H6z"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/vertical-menu.svg b/public/res/ic/outlined/vertical-menu.svg
new file mode 100644
index 00000000..ec5c544c
--- /dev/null
+++ b/public/res/ic/outlined/vertical-menu.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="12" cy="5" r="2"/>
+	<circle cx="12" cy="12" r="2"/>
+	<circle cx="12" cy="19" r="2"/>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/vlc.svg b/public/res/ic/outlined/vlc.svg
new file mode 100644
index 00000000..8a2b844f
--- /dev/null
+++ b/public/res/ic/outlined/vlc.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M19.4,20L14,2h-4L4.6,20H2v2h2h16h2v-2H19.4z M15.8,15H8.2l0.9-3h5.8L15.8,15z M11.5,4h1l1.8,6H9.7L11.5,4z M6.7,20l0.9-3
+	h8.8l0.9,3H6.7z"/>
+</svg>
diff --git a/public/res/ic/outlined/volume-full.svg b/public/res/ic/outlined/volume-full.svg
new file mode 100644
index 00000000..20419e72
--- /dev/null
+++ b/public/res/ic/outlined/volume-full.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M9,7.8v8.3L6.8,14H4v-4h2.8L9,7.8 M11,3L6,8H4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h2l5,5V3L11,3z"/>
+	<path d="M13,3v2c3.9,0,7,3.1,7,7s-3.1,7-7,7v2c5,0,9-4,9-9S18,3,13,3z"/>
+	<g>
+		<path d="M13,17v-2c1.7,0,3-1.3,3-3s-1.3-3-3-3V7c2.8,0,5,2.2,5,5S15.8,17,13,17z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/res/ic/outlined/volume-mute.svg b/public/res/ic/outlined/volume-mute.svg
new file mode 100644
index 00000000..beb06771
--- /dev/null
+++ b/public/res/ic/outlined/volume-mute.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M2,10v4c0,1.1,0.9,2,2,2h2l5,5V3L6,8H4C2.9,8,2,8.9,2,10z M9,7.8v8.3L6.8,14H4v-4h2.8L9,7.8z"/>
+	<polygon points="20.7,9.7 19.3,8.3 17,10.6 14.7,8.3 13.3,9.7 15.6,12 13.3,14.3 14.7,15.7 17,13.4 19.3,15.7 20.7,14.3 18.4,12 	
+		"/>
+</g>
+</svg>
diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
new file mode 100644
index 00000000..27bf7c90
--- /dev/null
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Avatar.scss';
+
+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';
+
+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>
+                {avatarInitials(text)}
+              </Text>
+            )
+          )}
+        </span>
+      )}
+    </div>
+  );
+});
+
+Avatar.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  iconSrc: null,
+  iconColor: null,
+  imageSrc: null,
+  size: 'normal',
+};
+
+Avatar.propTypes = {
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  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
new file mode 100644
index 00000000..ea69c9e8
--- /dev/null
+++ b/src/app/atoms/avatar/Avatar.scss
@@ -0,0 +1,56 @@
+@use '../../partials/flex';
+
+.avatar-container {
+  display: inline-flex;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--bo-radius);
+  position: relative;
+
+  &__large {
+    width: var(--av-large);
+    height: var(--av-large);
+  }
+  &__normal {
+    width: var(--av-normal);
+    height: var(--av-normal);
+  }
+
+  &__small {
+    width: var(--av-small);
+    height: var(--av-small);
+  }
+
+  &__extra-small {
+    width: var(--av-extra-small);
+    height: var(--av-extra-small);
+  }
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+    background-color: var(--bg-surface-hover);
+  }
+
+  .avatar__border {
+    @extend .cp-fx__row--c-c;
+    
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
+    .text {
+      color: white;
+    }
+    &--active {
+      @extend .avatar__border;
+      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
new file mode 100644
index 00000000..e8cf1a66
--- /dev/null
+++ b/src/app/atoms/avatar/render.js
@@ -0,0 +1,57 @@
+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,
+}) {
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = size * scale;
+    canvas.height = size * scale;
+
+    const ctx = canvas.getContext('2d');
+
+    ctx.scale(scale, scale);
+
+    // rounded corners
+    ctx.beginPath();
+    ctx.moveTo(size, size);
+    ctx.arcTo(0, size, 0, 0, borderRadius);
+    ctx.arcTo(0, 0, size, 0, borderRadius);
+    ctx.arcTo(size, 0, size, size, borderRadius);
+    ctx.arcTo(size, size, 0, size, borderRadius);
+
+    if (imageSrc) {
+      // clip corners of image
+      ctx.closePath();
+      ctx.clip();
+
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      const promise = new Promise((resolve, reject) => {
+        img.onerror = reject;
+        img.onload = resolve;
+      });
+      img.src = imageSrc;
+      await promise;
+
+      ctx.drawImage(img, 0, 0, size, size);
+    } else {
+      // colored background
+      ctx.fillStyle = cssVar(bgColor);
+      ctx.fill();
+
+      // centered letter
+      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);
+    }
+
+    return canvas.toDataURL();
+  } catch (e) {
+    console.error(e);
+    return imageSrc;
+  }
+}
diff --git a/src/app/atoms/badge/NotificationBadge.jsx b/src/app/atoms/badge/NotificationBadge.jsx
new file mode 100644
index 00000000..12c1bd44
--- /dev/null
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './NotificationBadge.scss';
+
+import Text from '../text/Text';
+
+function NotificationBadge({ alert, content }) {
+  const notificationClass = alert ? ' notification-badge--alert' : '';
+  return (
+    <div className={`notification-badge${notificationClass}`}>
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
+    </div>
+  );
+}
+
+NotificationBadge.defaultProps = {
+  alert: false,
+  content: null,
+};
+
+NotificationBadge.propTypes = {
+  alert: PropTypes.bool,
+  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
new file mode 100644
index 00000000..f5cfa73f
--- /dev/null
+++ b/src/app/atoms/badge/NotificationBadge.scss
@@ -0,0 +1,21 @@
+.notification-badge {
+  min-width: 16px;
+  min-height: 8px;
+  padding: 0 var(--sp-ultra-tight);
+  background-color: var(--bg-badge);
+  border-radius: var(--bo-radius);
+
+  .text {
+    color: var(--tc-badge);
+    text-align: center;
+  }
+
+  &--alert {
+    background-color: var(--bg-positive);
+  }
+
+  &:empty {
+    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
new file mode 100644
index 00000000..1c1c950c
--- /dev/null
+++ b/src/app/atoms/button/Button.jsx
@@ -0,0 +1,53 @@
+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';
+
+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: '',
+  className: null,
+  variant: 'surface',
+  iconSrc: null,
+  type: 'button',
+  onClick: null,
+  disabled: false,
+};
+
+Button.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  onClick: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export default Button;
diff --git a/src/app/atoms/button/Button.scss b/src/app/atoms/button/Button.scss
new file mode 100644
index 00000000..e1a01bb0
--- /dev/null
+++ b/src/app/atoms/button/Button.scss
@@ -0,0 +1,81 @@
+@use 'state';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.btn-surface,
+.btn-primary,
+.btn-positive,
+.btn-caution,
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 80px;
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  @include state.disabled;
+
+  & .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));
+    flex-shrink: 0;
+  }
+}
+
+@mixin color($textColor, $iconColor) {
+  .text {
+    color: $textColor;
+  }
+  .ic-raw {
+    background-color: $iconColor;
+  }
+}
+
+
+.btn-surface {
+  box-shadow: var(--bs-surface-border);
+  @include color(var(--tc-surface-high), var(--ic-surface-normal));
+  @include state.hover(var(--bg-surface-hover));
+  @include state.focus(var(--bs-surface-outline));
+  @include state.active(var(--bg-surface-active));
+}
+
+.btn-primary {
+  background-color: var(--bg-primary);
+  @include color(var(--tc-primary-high), var(--ic-primary-normal));
+  @include state.hover(var(--bg-primary-hover));
+  @include state.focus(var(--bs-primary-outline));
+  @include state.active(var(--bg-primary-active));
+}
+.btn-positive {
+  box-shadow: var(--bs-positive-border);
+  @include color(var(--tc-positive-high), var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include state.focus(var(--bs-positive-outline));
+  @include state.active(var(--bg-positive-active));
+}
+.btn-caution {
+  box-shadow: var(--bs-caution-border);
+  @include color(var(--tc-caution-high), var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include state.focus(var(--bs-caution-outline));
+  @include state.active(var(--bg-caution-active));
+}
+.btn-danger {
+  box-shadow: var(--bs-danger-border);
+  @include color(var(--tc-danger-high), var(--ic-danger-normal));
+  @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
new file mode 100644
index 00000000..7fcea3b5
--- /dev/null
+++ b/src/app/atoms/button/Checkbox.jsx
@@ -0,0 +1,39 @@
+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' : ''}`;
+  if (onToggle === null) return <span className={className} />;
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      onClick={() => onToggle(!isActive)}
+      className={className}
+      type="button"
+      disabled={disabled}
+      tabIndex={tabIndex}
+    />
+  );
+}
+
+Checkbox.defaultProps = {
+  variant: 'primary',
+  isActive: false,
+  onToggle: null,
+  disabled: false,
+  tabIndex: 0,
+};
+
+Checkbox.propTypes = {
+  variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
+  isActive: PropTypes.bool,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number,
+};
+
+export default Checkbox;
diff --git a/src/app/atoms/button/Checkbox.scss b/src/app/atoms/button/Checkbox.scss
new file mode 100644
index 00000000..a54daa63
--- /dev/null
+++ b/src/app/atoms/button/Checkbox.scss
@@ -0,0 +1,39 @@
+@use '../../partials/flex';
+@use './state';
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+
+  border-radius: calc(var(--bo-radius) / 2);
+  background-color: var(--bg-surface-border);
+  box-shadow: var(--bs-surface-border);
+  cursor: pointer;
+  @include state.disabled;
+  @extend .cp-fx__row--c-c;
+
+  &--active {
+    background-color: black;
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 6px;
+      border: 6px solid white;
+      border-width: 0 0 3px 3px;
+      transform: rotateZ(-45deg) translate(1px, -1px);
+    }
+  }
+}
+.checkbox-primary.checkbox--active {
+  background-color: var(--bg-primary);
+}
+.checkbox-positive.checkbox--active {
+  background-color: var(--bg-positive);
+}
+.checkbox-caution.checkbox--active {
+  background-color: var(--bg-caution);
+}
+.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
new file mode 100644
index 00000000..f6a8730e
--- /dev/null
+++ b/src/app/atoms/button/IconButton.jsx
@@ -0,0 +1,68 @@
+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';
+
+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',
+  tooltip: null,
+  tooltipPlacement: 'top',
+  onClick: null,
+  tabIndex: 0,
+  disabled: false,
+  isImage: false,
+  className: '',
+};
+
+IconButton.propTypes = {
+  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']),
+  src: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  tabIndex: PropTypes.number,
+  disabled: PropTypes.bool,
+  isImage: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default IconButton;
diff --git a/src/app/atoms/button/IconButton.scss b/src/app/atoms/button/IconButton.scss
new file mode 100644
index 00000000..aa6480c0
--- /dev/null
+++ b/src/app/atoms/button/IconButton.scss
@@ -0,0 +1,56 @@
+@use 'state';
+
+.ic-btn {
+  padding: var(--sp-extra-tight);
+  border: none;
+  border-radius: var(--bo-radius);
+  background-color: transparent;
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  @include state.disabled;
+}
+
+@mixin color($color) {
+  .ic-raw {
+    background-color: $color;
+  }
+}
+@mixin focus($color) {
+  &:focus {
+    outline: none;
+    background-color: $color;
+  }
+}
+
+.ic-btn-surface {
+  @include color(var(--ic-surface-normal));
+  @include state.hover(var(--bg-surface-hover));
+  @include focus(var(--bg-surface-hover));
+  @include state.active(var(--bg-surface-active));
+}
+.ic-btn-primary {
+  @include color(var(--ic-primary-normal));
+  @include state.hover(var(--bg-primary-hover));
+  @include focus(var(--bg-primary-hover));
+  @include state.active(var(--bg-primary-active));
+  background-color: var(--bg-primary);
+}
+.ic-btn-positive {
+  @include color(var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include focus(var(--bg-positive-hover));
+  @include state.active(var(--bg-positive-active));
+}
+.ic-btn-caution {
+  @include color(var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include focus(var(--bg-caution-hover));
+  @include state.active(var(--bg-caution-active));
+}
+.ic-btn-danger {
+  @include color(var(--ic-danger-normal));
+  @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
new file mode 100644
index 00000000..35b68baf
--- /dev/null
+++ b/src/app/atoms/button/RadioButton.jsx
@@ -0,0 +1,30 @@
+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' : ''}`} />;
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      onClick={() => onToggle(!isActive)}
+      className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
+      type="button"
+      disabled={disabled}
+    />
+  );
+}
+
+RadioButton.defaultProps = {
+  isActive: false,
+  onToggle: null,
+  disabled: false,
+};
+
+RadioButton.propTypes = {
+  isActive: PropTypes.bool,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default RadioButton;
diff --git a/src/app/atoms/button/RadioButton.scss b/src/app/atoms/button/RadioButton.scss
new file mode 100644
index 00000000..19284910
--- /dev/null
+++ b/src/app/atoms/button/RadioButton.scss
@@ -0,0 +1,28 @@
+@use '../../partials/flex';
+@use './state';
+
+.radio-btn {
+  @extend .cp-fx__row--c-c;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: var(--bg-surface-border);
+  border: 2px solid var(--bg-surface-border);
+  cursor: pointer;
+  @include state.disabled;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-color: var(--bg-surface-border);
+    border-radius: 50%;
+  }
+  &--active {
+    border: 2px solid var(--bg-positive);
+    &::before {
+      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
new file mode 100644
index 00000000..b599791f
--- /dev/null
+++ b/src/app/atoms/button/Toggle.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Toggle.scss';
+
+function Toggle({ isActive, onToggle, disabled }) {
+  const className = `toggle${isActive ? ' toggle--active' : ''}`;
+  if (onToggle === null) return <span className={className} />;
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      onClick={() => onToggle(!isActive)}
+      className={className}
+      type="button"
+      disabled={disabled}
+    />
+  );
+}
+
+Toggle.defaultProps = {
+  isActive: false,
+  disabled: false,
+  onToggle: null,
+};
+
+Toggle.propTypes = {
+  isActive: PropTypes.bool,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default Toggle;
diff --git a/src/app/atoms/button/Toggle.scss b/src/app/atoms/button/Toggle.scss
new file mode 100644
index 00000000..ef21f6cd
--- /dev/null
+++ b/src/app/atoms/button/Toggle.scss
@@ -0,0 +1,42 @@
+@use '../../partials/dir';
+@use './state';
+
+.toggle {
+  width: 44px;
+  height: 24px;
+  padding: 0 var(--sp-ultra-tight);
+  display: flex;
+  align-items: center;
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-surface-border);
+  cursor: pointer;
+  background-color: var(--bg-surface-low);
+  @include state.disabled;
+
+  transition: background 200ms ease-in-out;
+
+  &::before {
+    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;
+    opacity: 0.6;
+  }
+
+  &--active {
+    background-color: var(--bg-positive);
+
+    &::before {
+      --ltr: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
+      @include dir.prop(transform, var(--ltr), var(--rtl));
+
+      transform: translateX(calc(125%));
+      background-color: var(--bg-surface);
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/app/atoms/button/_state.scss b/src/app/atoms/button/_state.scss
new file mode 100644
index 00000000..f74d7095
--- /dev/null
+++ b/src/app/atoms/button/_state.scss
@@ -0,0 +1,25 @@
+
+@mixin hover($color) {
+  @media (hover: hover) {
+    &:hover {
+      background-color: $color;
+    }
+  }
+}
+@mixin focus($outline) {
+  &:focus {
+    outline: none;
+    box-shadow: $outline;
+  }
+}
+@mixin active($color) {
+  &:active {
+    background-color: $color !important;
+  }
+}
+@mixin disabled {
+  &:disabled {
+    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
new file mode 100644
index 00000000..e607a0ca
--- /dev/null
+++ b/src/app/atoms/button/script.js
@@ -0,0 +1,23 @@
+/**
+ * blur [selector] element in bubbling path.
+ * @param {Event} e Event
+ * @param {string} selector element selector for Element.matches([selector])
+ * @return {boolean} if blured return true, else return false with warning in console
+ */
+
+function blurOnBubbling(e, selector) {
+  const bubblingPath = e.nativeEvent.composedPath();
+
+  for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
+    if (bubblingPath[elIndex] === document) {
+      console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
+      break;
+    }
+    if (bubblingPath[elIndex].matches(selector)) {
+      setTimeout(() => bubblingPath[elIndex].blur(), 50);
+      return true;
+    }
+  }
+  return false;
+}
+export { blurOnBubbling };
diff --git a/src/app/atoms/card/InfoCard.jsx b/src/app/atoms/card/InfoCard.jsx
new file mode 100644
index 00000000..e530d5c0
--- /dev/null
+++ b/src/app/atoms/card/InfoCard.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './InfoCard.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+import IconButton from '../button/IconButton';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function InfoCard({
+  className, style,
+  variant, iconSrc,
+  title, content,
+  rounded, requestClose,
+}) {
+  const classes = [`info-card info-card--${variant}`];
+  if (rounded) classes.push('info-card--rounded');
+  if (className) classes.push(className);
+  return (
+    <div className={classes.join(' ')} style={style}>
+      {iconSrc && (
+        <div className="info-card__icon">
+          <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
+        </div>
+      )}
+      <div className="info-card__content">
+        <Text>{title}</Text>
+        {content}
+      </div>
+      {requestClose && (
+        <IconButton src={CrossIC} variant={variant} onClick={requestClose} />
+      )}
+    </div>
+  );
+}
+
+InfoCard.defaultProps = {
+  className: null,
+  style: null,
+  variant: 'surface',
+  iconSrc: null,
+  content: null,
+  rounded: false,
+  requestClose: null,
+};
+
+InfoCard.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.node,
+  rounded: PropTypes.bool,
+  requestClose: PropTypes.func,
+};
+
+export default InfoCard;
diff --git a/src/app/atoms/card/InfoCard.scss b/src/app/atoms/card/InfoCard.scss
new file mode 100644
index 00000000..79d72ebb
--- /dev/null
+++ b/src/app/atoms/card/InfoCard.scss
@@ -0,0 +1,79 @@
+@use '.././../partials/flex';
+@use '.././../partials/dir';
+
+.info-card {
+  display: flex;
+  align-items: flex-start;
+  line-height: 0;
+  padding: var(--sp-tight);
+  @include dir.prop(border-left, 4px solid transparent, none);
+  @include dir.prop(border-right, none, 4px solid transparent);
+
+  & > .ic-btn {
+    padding: 0;
+    border-radius: 4;
+  }
+
+  &__content {
+    margin: 0 var(--sp-tight);
+    @extend .cp-fx__item-one;
+
+    & > *:nth-child(2) {
+      margin-top: var(--sp-ultra-tight);
+    }
+  }
+
+  &--rounded {
+    @include dir.prop(
+      border-radius,
+      0 var(--bo-radius) var(--bo-radius) 0,
+      var(--bo-radius) 0 0 var(--bo-radius)
+    );
+  }
+
+  &--surface {
+    border-color: var(--bg-surface-border);
+    background-color: var(--bg-surface-hover);
+
+  }
+  &--primary {
+    border-color: var(--bg-primary);
+    background-color: var(--bg-primary-hover);
+    & .text {
+      color: var(--tc-primary-high);
+      &-b3 {
+        color: var(--tc-primary-normal);
+      }
+    }
+  }
+  &--positive {
+    border-color: var(--bg-positive-border);
+    background-color: var(--bg-positive-hover);
+    & .text {
+      color: var(--tc-positive-high);
+      &-b3 {
+        color: var(--tc-positive-normal);
+      }
+    }
+  }
+  &--caution {
+    border-color: var(--bg-caution-border);
+    background-color: var(--bg-caution-hover);
+    & .text {
+      color: var(--tc-caution-high);
+      &-b3 {
+        color: var(--tc-caution-normal);
+      }
+    }
+  }
+  &--danger {
+    border-color: var(--bg-danger-border);
+    background-color: var(--bg-danger-hover);
+    & .text {
+      color: var(--tc-danger-high);
+      &-b3 {
+        color: var(--tc-danger-normal);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/atoms/chip/Chip.jsx b/src/app/atoms/chip/Chip.jsx
new file mode 100644
index 00000000..b21cf9ed
--- /dev/null
+++ b/src/app/atoms/chip/Chip.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Chip.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+
+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>}
+      {children}
+    </button>
+  );
+}
+
+Chip.propTypes = {
+  iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
+  text: PropTypes.string,
+  children: PropTypes.element,
+  onClick: PropTypes.func,
+};
+
+Chip.defaultProps = {
+  iconSrc: null,
+  iconColor: null,
+  text: null,
+  children: null,
+  onClick: null,
+};
+
+export default Chip;
diff --git a/src/app/atoms/chip/Chip.scss b/src/app/atoms/chip/Chip.scss
new file mode 100644
index 00000000..7396b0dc
--- /dev/null
+++ b/src/app/atoms/chip/Chip.scss
@@ -0,0 +1,31 @@
+@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);
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+    }
+  }
+
+  & > .text {
+    flex: 1;
+    color: var(--tc-surface-high);
+  }
+
+  & > .ic-raw {
+    width: 16px;
+    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
new file mode 100644
index 00000000..7d1acd44
--- /dev/null
+++ b/src/app/atoms/context-menu/ContextMenu.jsx
@@ -0,0 +1,115 @@
+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 Text from '../text/Text';
+import Button from '../button/Button';
+import ScrollView from '../scroll/ScrollView';
+
+function ContextMenu({
+  content, placement, maxWidth, render, afterToggle,
+}) {
+  const [isVisible, setVisibility] = useState(false);
+  const showMenu = () => setVisibility(true);
+  const hideMenu = () => setVisibility(false);
+
+  useEffect(() => {
+    if (afterToggle !== null) afterToggle(isVisible);
+  }, [isVisible]);
+
+  return (
+    <Tippy
+      animation="scale-extreme"
+      className="context-menu"
+      visible={isVisible}
+      onClickOutside={hideMenu}
+      content={<ScrollView invisible>{typeof content === 'function' ? content(hideMenu) : content}</ScrollView>}
+      placement={placement}
+      interactive
+      arrow={false}
+      maxWidth={maxWidth}
+      duration={200}
+    >
+      {render(isVisible ? hideMenu : showMenu)}
+    </Tippy>
+  );
+}
+
+ContextMenu.defaultProps = {
+  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,
+  ]),
+  render: PropTypes.func.isRequired,
+  afterToggle: PropTypes.func,
+};
+
+function MenuHeader({ children }) {
+  return (
+    <div className="context-menu__header">
+      <Text variant="b3">{ children }</Text>
+    </div>
+  );
+}
+
+MenuHeader.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+function MenuItem({
+  variant, iconSrc, type,
+  onClick, children, disabled,
+}) {
+  return (
+    <div className="context-menu__item">
+      <Button
+        variant={variant}
+        iconSrc={iconSrc}
+        type={type}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        { children }
+      </Button>
+    </div>
+  );
+}
+
+MenuItem.defaultProps = {
+  variant: 'surface',
+  iconSrc: null,
+  type: 'button',
+  disabled: false,
+  onClick: null,
+};
+
+MenuItem.propTypes = {
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  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>;
+}
+
+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
new file mode 100644
index 00000000..2df9f0a4
--- /dev/null
+++ b/src/app/atoms/context-menu/ContextMenu.scss
@@ -0,0 +1,81 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
+.context-menu {
+  background-color: var(--bg-surface);
+  box-shadow: var(--bs-popup);
+  border-radius: var(--bo-radius);
+  overflow: hidden;
+
+  &:focus {
+    outline: none;
+  }
+  & .tippy-content > div > .scrollbar {
+    max-height: 90vh;
+  }
+}
+
+.context-menu__click-wrapper {
+  display: inline-flex;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.context-menu__header {
+  height: 34px;
+  padding: 0 var(--sp-normal);
+  margin-bottom: var(--sp-ultra-tight);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--bg-surface-border);
+
+  .text {
+    @extend .cp-txt__ellipsis;
+    color: var(--tc-surface-low);
+  }
+
+  &:not(:first-child) {
+    margin-top: var(--sp-extra-tight);
+    border-top: 1px solid var(--bg-surface-border);
+  }
+}
+
+.context-menu__item {
+  display: flex;
+  button[class^="btn"] {
+    @extend .cp-fx__item-one;
+    justify-content: flex-start;
+    border-radius: 0;
+    box-shadow: none;
+    white-space: nowrap;
+    padding: var(--sp-extra-tight) var(--sp-normal);
+
+    & > .ic-raw {
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+
+    // if item doesn't have icon
+    .text:first-child {
+      @include dir.side(
+        margin,
+        calc(var(--ic-small) + var(--sp-tight)),
+        0
+      );
+    }
+  }
+  .btn-surface:focus {
+    background-color: var(--bg-surface-hover);
+  }
+  .btn-positive:focus {
+    background-color: var(--bg-positive-hover);
+  }
+  .btn-caution:focus {
+    background-color: var(--bg-caution-hover);
+  }
+  .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
new file mode 100644
index 00000000..59bdb142
--- /dev/null
+++ b/src/app/atoms/context-menu/ReusableContextMenu.jsx
@@ -0,0 +1,87 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import ContextMenu from './ContextMenu';
+
+let key = null;
+function ReusableContextMenu() {
+  const [data, setData] = useState(null);
+  const openerRef = useRef(null);
+
+  const closeMenu = () => {
+    key = null;
+    if (data) openerRef.current.click();
+  };
+
+  useEffect(() => {
+    if (data) {
+      const { cords } = data;
+      openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
+      openerRef.current.style.width = `${cords.width}px`;
+      openerRef.current.style.height = `${cords.height}px`;
+      openerRef.current.click();
+    }
+    const handleContextMenuOpen = (placement, cords, render, afterClose) => {
+      if (key) {
+        closeMenu();
+        return;
+      }
+      setData({
+        placement, cords, render, afterClose,
+      });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
+    return () => {
+      navigation.removeListener(
+        cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
+        handleContextMenuOpen,
+      );
+    };
+  }, [data]);
+
+  const handleAfterToggle = (isVisible) => {
+    if (isVisible) {
+      key = Math.random();
+      return;
+    }
+    data?.afterClose?.();
+    if (setData) setData(null);
+
+    if (key === null) return;
+    const copyKey = key;
+    setTimeout(() => {
+      if (key === copyKey) key = null;
+    }, 200);
+  };
+
+  return (
+    <ContextMenu
+      afterToggle={handleAfterToggle}
+      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',
+            top: 0,
+            left: 0,
+            padding: 0,
+            border: 'none',
+            visibility: 'hidden',
+            appearance: 'none',
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default ReusableContextMenu;
diff --git a/src/app/atoms/divider/Divider.jsx b/src/app/atoms/divider/Divider.jsx
new file mode 100644
index 00000000..76721241
--- /dev/null
+++ b/src/app/atoms/divider/Divider.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Divider.scss';
+
+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>}
+    </div>
+  );
+}
+
+Divider.defaultProps = {
+  text: null,
+  variant: 'surface',
+  align: 'center',
+};
+
+Divider.propTypes = {
+  text: PropTypes.string,
+  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
new file mode 100644
index 00000000..0f013ff0
--- /dev/null
+++ b/src/app/atoms/divider/Divider.scss
@@ -0,0 +1,68 @@
+.divider-line {
+  content: '';
+  display: inline-block;
+  flex: 1;
+  border-bottom: 1px solid var(--local-divider-color);
+  opacity: var(--local-divider-opacity);
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+
+  &--center::before,
+  &--right::before {
+    @extend .divider-line;
+  }
+  &--center::after,
+  &--left::after {
+    @extend .divider-line;
+  }
+
+  &__text {
+    padding: 2px var(--sp-extra-tight);
+    border-radius: calc(var(--bo-radius) / 2);
+  }
+}
+
+.divider--surface {
+  --local-divider-color: var(--bg-divider);
+  --local-divider-opacity: 1;
+
+  .divider__text {
+    color: var(--tc-surface-low);
+    border: 1px solid var(--bg-divider);
+  }
+}
+.divider--primary {
+  --local-divider-color: var(--bg-primary);
+  --local-divider-opacity: .8;
+  .divider__text {
+    color: var(--tc-primary-high);
+    background-color: var(--bg-primary);
+  }
+}
+.divider--positive {
+  --local-divider-color: var(--bg-positive);
+  --local-divider-opacity: .8;
+  .divider__text {
+    color: var(--bg-surface);
+    background-color: var(--bg-positive);
+  }
+}
+.divider--danger {
+  --local-divider-color: var(--bg-danger);
+  --local-divider-opacity: .8;
+  .divider__text {
+    color: var(--bg-surface);
+    background-color: var(--bg-danger);
+  }
+}
+.divider--caution {
+  --local-divider-color: var(--bg-caution);
+  --local-divider-opacity: .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
new file mode 100644
index 00000000..3c81e423
--- /dev/null
+++ b/src/app/atoms/header/Header.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Header.scss';
+
+function Header({ children }) {
+  return (
+    <div className="header">
+      {children}
+    </div>
+  );
+}
+
+Header.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+function TitleWrapper({ children }) {
+  return (
+    <div className="header__title-wrapper">
+      {children}
+    </div>
+  );
+}
+
+TitleWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export { Header as default, TitleWrapper };
diff --git a/src/app/atoms/header/Header.scss b/src/app/atoms/header/Header.scss
new file mode 100644
index 00000000..9e45f824
--- /dev/null
+++ b/src/app/atoms/header/Header.scss
@@ -0,0 +1,43 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
+.header {
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+  width: 100%;
+  height: var(--header-height);
+  border-bottom: 1px solid var(--bg-surface-border);
+  display: flex;
+  align-items: center;
+
+  &__title-wrapper {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    margin: 0 var(--sp-tight);
+    
+    &:first-child {
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+
+    & > .text:first-child {
+      @extend .cp-txt__ellipsis;
+      min-width: 0;
+    }
+    & > .text-b3{
+      flex: 1;
+      min-width: 0;
+
+      margin-top: var(--sp-ultra-tight);
+      @include dir.side(margin, var(--sp-tight), 0);
+      @include dir.side(padding, var(--sp-tight), 0);
+      @include dir.side(border, 1px solid var(--bg-surface-border), none);
+
+      max-height: calc(2 * var(--lh-b3));
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      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
new file mode 100644
index 00000000..96c94967
--- /dev/null
+++ b/src/app/atoms/input/Input.jsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Input.scss';
+
+import TextareaAutosize from 'react-autosize-textarea';
+
+function Input({
+  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}
+          />
+        )}
+    </div>
+  );
+}
+
+Input.defaultProps = {
+  id: null,
+  name: '',
+  label: '',
+  value: '',
+  placeholder: '',
+  type: 'text',
+  required: false,
+  onChange: null,
+  forwardRef: null,
+  resizable: false,
+  minHeight: 46,
+  onResize: null,
+  state: 'normal',
+  onKeyDown: null,
+  disabled: false,
+  autoFocus: false,
+};
+
+Input.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  type: PropTypes.string,
+  onChange: PropTypes.func,
+  forwardRef: PropTypes.shape({}),
+  resizable: PropTypes.bool,
+  minHeight: PropTypes.number,
+  onResize: PropTypes.func,
+  state: PropTypes.oneOf(['normal', 'success', 'error']),
+  onKeyDown: PropTypes.func,
+  disabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+};
+
+export default Input;
diff --git a/src/app/atoms/input/Input.scss b/src/app/atoms/input/Input.scss
new file mode 100644
index 00000000..40fe43ec
--- /dev/null
+++ b/src/app/atoms/input/Input.scss
@@ -0,0 +1,52 @@
+@use '../../atoms/scroll/scrollbar';
+
+.input {
+  display: block;
+  width: 100%;
+  min-width: 0px;
+  margin: 0;
+  padding: var(--sp-tight) var(--sp-normal);
+  background-color: var(--bg-surface-low);
+  color: var(--tc-surface-normal);
+  box-shadow: none;
+  border-radius: var(--bo-radius);
+  border: 1px solid var(--bg-surface-border);
+  font-size: var(--fs-b2);
+  letter-spacing: var(--ls-b2);
+  line-height: var(--lh-b2);
+
+  :disabled {
+    opacity: 0.4;
+    cursor: no-drop;
+  }
+
+  &__label {
+    display: inline-block;
+    margin-bottom: var(--sp-ultra-tight);
+    color: var(--tc-surface-low);
+  }
+
+  &--resizable {
+    resize: vertical !important;
+    overflow-y: auto !important;
+    @include scrollbar.scroll;
+    @include scrollbar.scroll__v;
+    @include scrollbar.scroll--auto-hide;
+  }
+  &--success {
+    border: 1px solid var(--bg-positive);
+    box-shadow: none !important;
+  }
+  &--error {
+    border: 1px solid var(--bg-danger);
+    box-shadow: none !important;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--bs-primary-border);
+  }
+  &::placeholder {
+    color: var(--tc-surface-low)
+  }
+}
\ No newline at end of file
diff --git a/src/app/atoms/modal/RawModal.jsx b/src/app/atoms/modal/RawModal.jsx
new file mode 100644
index 00000000..450be0e0
--- /dev/null
+++ b/src/app/atoms/modal/RawModal.jsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RawModal.scss';
+
+import Modal from 'react-modal';
+
+import navigation from '../../../client/state/navigation';
+
+Modal.setAppElement('#root');
+
+function RawModal({
+  className, overlayClassName,
+  isOpen, size, onAfterOpen, onAfterClose,
+  onRequestClose, closeFromOutside, children,
+}) {
+  let modalClass = (className !== null) ? `${className} ` : '';
+  switch (size) {
+    case 'large':
+      modalClass += 'raw-modal__large ';
+      break;
+    case 'medium':
+      modalClass += 'raw-modal__medium ';
+      break;
+    case 'small':
+    default:
+      modalClass += 'raw-modal__small ';
+  }
+
+  useEffect(() => {
+    navigation.setIsRawModalVisible(isOpen);
+  }, [isOpen]);
+
+  const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
+  return (
+    <Modal
+      className={`${modalClass}raw-modal`}
+      overlayClassName={`${modalOverlayClass}raw-modal__overlay`}
+      isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onAfterClose={onAfterClose}
+      onRequestClose={onRequestClose}
+      shouldCloseOnEsc={closeFromOutside}
+      shouldCloseOnOverlayClick={closeFromOutside}
+      shouldReturnFocusAfterClose={false}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+RawModal.defaultProps = {
+  className: null,
+  overlayClassName: null,
+  size: 'small',
+  onAfterOpen: null,
+  onAfterClose: null,
+  onRequestClose: null,
+  closeFromOutside: true,
+};
+
+RawModal.propTypes = {
+  className: PropTypes.string,
+  overlayClassName: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  onAfterOpen: PropTypes.func,
+  onAfterClose: PropTypes.func,
+  onRequestClose: PropTypes.func,
+  closeFromOutside: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+export default RawModal;
diff --git a/src/app/atoms/modal/RawModal.scss b/src/app/atoms/modal/RawModal.scss
new file mode 100644
index 00000000..d612a4bc
--- /dev/null
+++ b/src/app/atoms/modal/RawModal.scss
@@ -0,0 +1,66 @@
+.raw-modal {
+  --small-modal-width: 525px;
+  --medium-modal-width: 712px;
+  --large-modal-width: 1024px;
+
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+  outline: none;
+  overflow: hidden;
+
+  &__small {
+    max-width: var(--small-modal-width);
+  }
+  &__medium {
+    max-width: var(--medium-modal-width);
+  }
+  &__large {
+    max-width: var(--large-modal-width);
+  }
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: var(--sp-normal);
+    width: 100%;
+    height: 100%;
+    background-color: var(--bg-overlay);
+  }
+}
+
+.ReactModal__Overlay {
+  animation: raw-modal--overlay 150ms;
+}
+
+.ReactModal__Content {
+  animation: raw-modal--content 150ms;
+}
+
+@keyframes raw-modal--content {
+  0% {
+    transform: translateY(100px);
+    opacity: .5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes raw-modal--overlay {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/app/atoms/scroll/ScrollView.jsx b/src/app/atoms/scroll/ScrollView.jsx
new file mode 100644
index 00000000..26c0c83a
--- /dev/null
+++ b/src/app/atoms/scroll/ScrollView.jsx
@@ -0,0 +1,37 @@
+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>
+  );
+});
+
+ScrollView.defaultProps = {
+  horizontal: false,
+  vertical: true,
+  autoHide: false,
+  invisible: false,
+  onScroll: null,
+};
+
+ScrollView.propTypes = {
+  horizontal: PropTypes.bool,
+  vertical: PropTypes.bool,
+  autoHide: PropTypes.bool,
+  invisible: PropTypes.bool,
+  onScroll: PropTypes.func,
+  children: PropTypes.node.isRequired,
+};
+
+export default ScrollView;
diff --git a/src/app/atoms/scroll/ScrollView.scss b/src/app/atoms/scroll/ScrollView.scss
new file mode 100644
index 00000000..251037e1
--- /dev/null
+++ b/src/app/atoms/scroll/ScrollView.scss
@@ -0,0 +1,31 @@
+@use '../../partials/dir';
+@use '_scrollbar';
+
+@mixin paddingForSafari($padding) {
+	@media not all and (min-resolution:.001dpcm) {
+    @include dir.side(padding, 0, $padding);
+  }
+}
+
+.scrollbar {
+  width: 100%;
+  height: 100%;
+  @include scrollbar.scroll;
+  @include paddingForSafari(var(--sp-extra-tight));
+
+  &__h {
+    @include scrollbar.scroll__h;
+  }
+
+  &__v {
+    @include scrollbar.scroll__v;
+  }
+
+  &--auto-hide {
+    @include scrollbar.scroll--auto-hide;
+  }
+  &--invisible {
+    @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
new file mode 100644
index 00000000..78ec75ad
--- /dev/null
+++ b/src/app/atoms/scroll/_scrollbar.scss
@@ -0,0 +1,65 @@
+.firefox-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-surface-hover) transparent;
+  &--transparent {
+    scrollbar-color: transparent transparent;
+  }
+}
+.webkit-scrollbar {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+}
+.webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+.webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--bg-surface-hover);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--bg-surface-active);
+  }
+  &--transparent {
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin scroll {
+  overflow: hidden;
+  // Below code stop scroll when x-scrollable content come in timeline
+  // overscroll-behavior: none;
+  @extend .firefox-scrollbar;
+  @extend .webkit-scrollbar;
+  @extend .webkit-scrollbar-track;
+  @extend .webkit-scrollbar-thumb;
+}
+
+@mixin scroll__h {
+  overflow-x: scroll;
+}
+@mixin scroll__v {
+  overflow-y: scroll;
+}
+@mixin scroll--auto-hide {
+  @extend .firefox-scrollbar--transparent;
+  @extend .webkit-scrollbar-thumb--transparent;
+
+  &:hover {
+    @extend .firefox-scrollbar;
+    @extend .webkit-scrollbar-thumb;
+  }
+}
+@mixin scroll--invisible {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-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
new file mode 100644
index 00000000..1d54dd06
--- /dev/null
+++ b/src/app/atoms/segmented-controls/SegmentedControls.jsx
@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './SegmentedControls.scss';
+
+import { blurOnBubbling } from '../button/script';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+
+function SegmentedControls({
+  selected, segments, onSelect,
+}) {
+  const [select, setSelect] = useState(selected);
+
+  function selectSegment(segmentIndex) {
+    setSelect(segmentIndex);
+    onSelect(segmentIndex);
+  }
+
+  useEffect(() => {
+    setSelect(selected);
+  }, [selected]);
+
+  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>
+        ))
+      }
+    </div>
+  );
+}
+
+SegmentedControls.propTypes = {
+  selected: PropTypes.number.isRequired,
+  segments: PropTypes.arrayOf(PropTypes.shape({
+    iconSrc: PropTypes.string,
+    text: PropTypes.string,
+  })).isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default SegmentedControls;
diff --git a/src/app/atoms/segmented-controls/SegmentedControls.scss b/src/app/atoms/segmented-controls/SegmentedControls.scss
new file mode 100644
index 00000000..fb1fd987
--- /dev/null
+++ b/src/app/atoms/segmented-controls/SegmentedControls.scss
@@ -0,0 +1,57 @@
+@use '../button/state';
+@use '../../partials/dir';
+
+.segmented-controls {
+  background-color: var(--bg-surface-low);
+  border-radius: var(--bo-radius);
+  border: 1px solid var(--bg-surface-border);
+
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.segment-btn {
+  padding: var(--sp-extra-tight) 0;
+  cursor: pointer;
+  @include state.hover(var(--bg-surface-hover));
+  @include state.active(var(--bg-surface-active));
+
+  &__base {
+    padding: 0 var(--sp-normal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
+
+    & .text:nth-child(2) {
+      margin: 0 var(--sp-extra-tight);
+    }
+  }
+  &:first-child &__base {
+    border: none;
+  }
+
+  &--active {
+    background-color: var(--bg-surface);
+    border: 1px solid var(--bg-surface-border);
+    border-width: 0 1px 0 1px;
+
+    & .segment-btn__base,
+    & + .segment-btn .segment-btn__base {
+      border: none;
+    }
+    &:first-child{
+      border-left: none;
+    }
+    &:last-child {
+      border-right: none;
+    }
+    [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;}
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/atoms/spinner/Spinner.jsx b/src/app/atoms/spinner/Spinner.jsx
new file mode 100644
index 00000000..61c9747e
--- /dev/null
+++ b/src/app/atoms/spinner/Spinner.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Spinner.scss';
+
+function Spinner({ size }) {
+  return (
+    <div className={`donut-spinner donut-spinner--${size}`}> </div>
+  );
+}
+
+Spinner.defaultProps = {
+  size: 'normal',
+};
+
+Spinner.propTypes = {
+  size: PropTypes.oneOf(['normal', 'small']),
+};
+
+export default Spinner;
diff --git a/src/app/atoms/spinner/Spinner.scss b/src/app/atoms/spinner/Spinner.scss
new file mode 100644
index 00000000..73fbf676
--- /dev/null
+++ b/src/app/atoms/spinner/Spinner.scss
@@ -0,0 +1,22 @@
+.donut-spinner {
+  display: inline-block;
+  border: 4px solid var(--bg-surface-border);
+  border-left-color: var(--tc-surface-normal);
+  border-radius: 50%;
+  animation: donut-spin 1.2s cubic-bezier(0.73, 0.32, 0.67, 0.86) infinite;
+
+  &--normal {
+    width: 40px;
+    height: 40px;
+  }
+  &--small {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+@keyframes donut-spin {
+  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
new file mode 100644
index 00000000..a6697f4f
--- /dev/null
+++ b/src/app/atoms/system-icons/RawIcon.jsx
@@ -0,0 +1,32 @@
+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.backgroundImage = `url("${src}")`;
+  } else {
+    style.WebkitMaskImage = `url("${src}")`;
+    style.maskImage = `url("${src}")`;
+  }
+
+  return <span className={`ic-raw ic-raw-${size}`} style={style} />;
+}
+
+RawIcon.defaultProps = {
+  color: null,
+  size: 'normal',
+  isImage: false,
+};
+
+RawIcon.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  src: PropTypes.string.isRequired,
+  isImage: PropTypes.bool,
+};
+
+export default RawIcon;
diff --git a/src/app/atoms/system-icons/RawIcon.scss b/src/app/atoms/system-icons/RawIcon.scss
new file mode 100644
index 00000000..56fc9b3c
--- /dev/null
+++ b/src/app/atoms/system-icons/RawIcon.scss
@@ -0,0 +1,28 @@
+@mixin icSize($size) {
+  width: $size;
+  height: $size;
+}
+
+.ic-raw {
+  display: inline-block;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  background-color: var(--ic-surface-normal);
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.ic-raw-large {
+  @include icSize(var(--ic-large));
+}
+.ic-raw-normal {
+  @include icSize(var(--ic-normal));
+}
+.ic-raw-small {
+  @include icSize(var(--ic-small));
+}
+.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
new file mode 100644
index 00000000..bcdc8ef7
--- /dev/null
+++ b/src/app/atoms/tabs/Tabs.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Tabs.scss';
+
+import Button from '../button/Button';
+import ScrollView from '../scroll/ScrollView';
+
+function TabItem({
+  selected, iconSrc,
+  onClick, children, disabled,
+}) {
+  const isSelected = selected ? 'tab-item--selected' : '';
+
+  return (
+    <Button
+      className={`tab-item ${isSelected}`}
+      iconSrc={iconSrc}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </Button>
+  );
+}
+
+TabItem.defaultProps = {
+  selected: false,
+  iconSrc: null,
+  onClick: null,
+  disabled: false,
+};
+
+TabItem.propTypes = {
+  selected: PropTypes.bool,
+  iconSrc: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+};
+
+function Tabs({ items, defaultSelected, onSelect }) {
+  const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
+
+  const handleTabSelection = (item, index, target) => {
+    if (selectedItem === item) return;
+    target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    setSelectedItem(item);
+    onSelect(item, index);
+  };
+
+  return (
+    <div className="tabs">
+      <ScrollView horizontal vertical={false} invisible>
+        <div className="tabs__content">
+          {items.map((item, index) => (
+            <TabItem
+              key={item.text}
+              selected={selectedItem.text === item.text}
+              iconSrc={item.iconSrc}
+              disabled={item.disabled}
+              onClick={(e) => handleTabSelection(item, index, e.currentTarget)}
+            >
+              {item.text}
+            </TabItem>
+          ))}
+        </div>
+      </ScrollView>
+    </div>
+  );
+}
+
+Tabs.defaultProps = {
+  defaultSelected: 0,
+};
+
+Tabs.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      iconSrc: PropTypes.string,
+      text: PropTypes.string,
+      disabled: PropTypes.bool,
+    }),
+  ).isRequired,
+  defaultSelected: PropTypes.number,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default Tabs;
diff --git a/src/app/atoms/tabs/Tabs.scss b/src/app/atoms/tabs/Tabs.scss
new file mode 100644
index 00000000..39ddddec
--- /dev/null
+++ b/src/app/atoms/tabs/Tabs.scss
@@ -0,0 +1,45 @@
+@use '../../partials/dir';
+
+.tabs {
+  height: var(--header-height);
+  box-shadow: inset 0 -1px 0 var(--bg-surface-border);
+
+  &__content {
+    min-width: 100%;
+    height: 100%;
+    display: flex;
+  }
+}
+
+.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;
+
+  &:focus,
+  &:active {
+    background-color: var(--bg-surface-active);
+    box-shadow: none;
+  }
+
+  &--selected {
+    --bs-tab-selected: inset 0 -2px 0 var(--tc-surface-high);
+    box-shadow: var(--bs-tab-selected);
+
+    & .ic-raw {
+      background-color: var(--ic-surface-high);
+    }
+    & .text {
+      font-weight: var(--fw-medium);
+    }
+    &:focus,
+    &:active {
+      background-color: var(--bg-surface-active);
+      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
new file mode 100644
index 00000000..3f507ee3
--- /dev/null
+++ b/src/app/atoms/text/Text.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Text.scss';
+
+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');
+
+  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',
+  primary: false,
+  span: false,
+};
+
+Text.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  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,
+};
+
+export default Text;
diff --git a/src/app/atoms/text/Text.scss b/src/app/atoms/text/Text.scss
new file mode 100644
index 00000000..256bf6ea
--- /dev/null
+++ b/src/app/atoms/text/Text.scss
@@ -0,0 +1,61 @@
+@mixin font($type) {
+  font-size: var(--fs-#{$type});
+  letter-spacing: var(--ls-#{$type});
+  line-height: var(--lh-#{$type});
+
+  & img.emoji,
+  & img[data-mx-emoticon] {
+    height: calc(var(--lh-#{$type}) - .25rem);
+  }
+}
+
+.text {
+  margin: 0;
+  padding: 0;
+  color: var(--tc-surface-high);
+
+  & img.emoji,
+  & img[data-mx-emoticon] {
+    margin: 0 !important;
+    margin-right: 2px !important;
+    padding: 0 !important;
+    position: relative;
+    top: -.1rem;
+    vertical-align: middle;
+  }
+}
+
+.text-light {
+  font-weight: var(--fw-light);
+}
+.text-normal {
+  font-weight: var(--fw-normal);
+}
+.text-medium {
+  font-weight: var(--fw-medium);
+}
+.text-bold {
+  font-weight: var(--fw-bold);
+}
+
+.text-h1 {
+  @include font(h1);
+}
+.text-h2 {
+  @include font(h2);
+}
+.text-s1 {
+  @include font(s1);
+}
+.text-b1 {
+  @include font(b1);
+  color: var(--tc-surface-normal);
+}
+.text-b2 {
+  @include font(b2);
+  color: var(--tc-surface-normal);
+}
+.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
new file mode 100644
index 00000000..d7bbe439
--- /dev/null
+++ b/src/app/atoms/time/Time.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import dateFormat from 'dateformat';
+import { isInSameDay } from '../../../util/common';
+
+/**
+ * Renders a formatted timestamp.
+ *
+ * Displays the time in hour:minute format if the message is from today or yesterday, unless `fullTime` is true.
+ * For older messages, it shows the date and time.
+ *
+ * @param {number} timestamp - The timestamp to display.
+ * @param {boolean} [fullTime=false] - If true, always show the full date and time.
+ * @param {boolean} hour24Clock - Whether to use 24-hour time format.
+ * @param {string} dateFormatString - Format string for the date part.
+ * @returns {JSX.Element} A <time> element with the formatted date/time.
+ */
+function Time({ timestamp, fullTime, hour24Clock, dateFormatString }) {
+  const date = new Date(timestamp);
+
+  const formattedFullTime = dateFormat(
+    date,
+    hour24Clock ? 'dd mmmm yyyy, HH:MM' : 'dd mmmm yyyy, hh:MM TT'
+  );
+  let formattedDate = formattedFullTime;
+
+  if (!fullTime) {
+    const compareDate = new Date();
+    const isToday = isInSameDay(date, compareDate);
+    compareDate.setDate(compareDate.getDate() - 1);
+    const isYesterday = isInSameDay(date, compareDate);
+
+    const timeFormat = hour24Clock ? 'HH:MM' : 'hh:MM TT';
+
+    formattedDate = dateFormat(
+      date,
+      isToday || isYesterday ? timeFormat : dateFormatString.toLowerCase()
+    );
+    if (isYesterday) {
+      formattedDate = `Yesterday, ${formattedDate}`;
+    }
+  }
+
+  return (
+    <time dateTime={date.toISOString()} title={formattedFullTime}>
+      {formattedDate}
+    </time>
+  );
+}
+
+Time.defaultProps = {
+  fullTime: false,
+};
+
+Time.propTypes = {
+  timestamp: PropTypes.number.isRequired,
+  fullTime: PropTypes.bool,
+  hour24Clock: PropTypes.bool.isRequired,
+  dateFormatString: PropTypes.string.isRequired,
+};
+
+export default Time;
diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx
new file mode 100644
index 00000000..0f9067f5
--- /dev/null
+++ b/src/app/atoms/tooltip/Tooltip.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Tooltip.scss';
+import Tippy from '@tippyjs/react';
+
+function Tooltip({
+  className, placement, content, delay, children,
+}) {
+  return (
+    <Tippy
+      content={content}
+      className={`tooltip ${className}`}
+      touch="hold"
+      arrow={false}
+      maxWidth={250}
+      placement={placement}
+      delay={delay}
+      duration={[100, 0]}
+    >
+      {children}
+    </Tippy>
+  );
+}
+
+Tooltip.defaultProps = {
+  placement: 'top',
+  className: '',
+  delay: [200, 0],
+};
+
+Tooltip.propTypes = {
+  className: PropTypes.string,
+  placement: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  delay: PropTypes.arrayOf(PropTypes.number),
+  children: PropTypes.node.isRequired,
+};
+
+export default Tooltip;
diff --git a/src/app/atoms/tooltip/Tooltip.scss b/src/app/atoms/tooltip/Tooltip.scss
new file mode 100644
index 00000000..f609aa58
--- /dev/null
+++ b/src/app/atoms/tooltip/Tooltip.scss
@@ -0,0 +1,10 @@
+.tooltip {
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: var(--bg-tooltip);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+
+  .text {
+    color: var(--tc-tooltip);
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/DeviceVerificationSetup.tsx b/src/app/components/DeviceVerificationSetup.tsx
index 433fa6a1..fb09c150 100644
--- a/src/app/components/DeviceVerificationSetup.tsx
+++ b/src/app/components/DeviceVerificationSetup.tsx
@@ -20,7 +20,7 @@ import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { copyToClipboard } from '../utils/dom';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { clearSecretStorageKeys } from '../../client/secretStorageKeys';
+import { clearSecretStorageKeys } from '../../client/state/secretStorageKeys';
 import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useAlive } from '../hooks/useAlive';
diff --git a/src/app/components/ManualVerification.tsx b/src/app/components/ManualVerification.tsx
index f7cde92b..03f3e710 100644
--- a/src/app/components/ManualVerification.tsx
+++ b/src/app/components/ManualVerification.tsx
@@ -19,7 +19,7 @@ import { SecretStorageKeyContent } from '../../types/matrix/accountData';
 import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { storePrivateKey } from '../../client/secretStorageKeys';
+import { storePrivateKey } from '../../client/state/secretStorageKeys';
 
 export enum ManualVerificationMethod {
   RecoveryPassphrase = 'passphrase',
diff --git a/src/app/components/create-room/AdditionalCreatorInput.tsx b/src/app/components/create-room/AdditionalCreatorInput.tsx
index 84b92231..936b9b94 100644
--- a/src/app/components/create-room/AdditionalCreatorInput.tsx
+++ b/src/app/components/create-room/AdditionalCreatorInput.tsx
@@ -201,7 +201,7 @@ export function AdditionalCreatorInput({
                           variant="Background"
                           radii="300"
                           outlined
-                          placeholder="@username:server"
+                          placeholder="@john:server"
                           onChange={handleCreatorChange}
                           onKeyDown={handleCreatorKeyDown}
                         />
diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
deleted file mode 100644
index ddac0576..00000000
--- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, {
-  ChangeEventHandler,
-  FormEventHandler,
-  KeyboardEventHandler,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Box,
-  Header,
-  config,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Input,
-  Button,
-  Spinner,
-  color,
-  TextArea,
-  Dialog,
-  Menu,
-  toRem,
-  Scroll,
-  MenuItem,
-} from 'folds';
-import { Room } from 'matrix-js-sdk';
-import { isKeyHotkey } from 'is-hotkey';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../../utils/keyboard';
-import { useDirectUsers } from '../../hooks/useDirectUsers';
-import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
-import { Membership } from '../../../types/matrix/room';
-import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
-import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { BreakWord } from '../../styles/Text.css';
-import { useAlive } from '../../hooks/useAlive';
-
-const SEARCH_OPTIONS: UseAsyncSearchOptions = {
-  limit: 1000,
-  matchOptions: {
-    contain: true,
-  },
-};
-const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
-
-type InviteUserProps = {
-  room: Room;
-  requestClose: () => void;
-};
-export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
-  const mx = useMatrixClient();
-  const alive = useAlive();
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const directUsers = useDirectUsers();
-  const [validUserId, setValidUserId] = useState<string>();
-
-  const filteredUsers = useMemo(
-    () =>
-      directUsers.filter((userId) => {
-        const membership = room.getMember(userId)?.membership;
-        return membership !== Membership.Join;
-      }),
-    [directUsers, room]
-  );
-  const [result, search, resetSearch] = useAsyncSearch(
-    filteredUsers,
-    getUserIdString,
-    SEARCH_OPTIONS
-  );
-  const queryHighlighRegex = result?.query
-    ? makeHighlightRegex(result.query.split(' '))
-    : undefined;
-
-  const [inviteState, invite] = useAsyncCallback<void, Error, [string, string | undefined]>(
-    useCallback(
-      async (userId, reason) => {
-        await mx.invite(room.roomId, userId, reason);
-      },
-      [mx, room]
-    )
-  );
-
-  const inviting = inviteState.status === AsyncStatus.Loading;
-
-  const handleReset = () => {
-    if (inputRef.current) inputRef.current.value = '';
-    setValidUserId(undefined);
-    resetSearch();
-  };
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    const target = evt.target as HTMLFormElement | undefined;
-
-    if (inviting || !validUserId) return;
-
-    const reasonInput = target?.reasonInput as HTMLTextAreaElement | undefined;
-    const reason = reasonInput?.value.trim();
-
-    invite(validUserId, reason || undefined).then(() => {
-      if (alive()) {
-        handleReset();
-        if (reasonInput) reasonInput.value = '';
-      }
-    });
-  };
-
-  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
-    const value = evt.currentTarget.value.trim();
-    if (isUserId(value)) {
-      setValidUserId(value);
-    } else {
-      setValidUserId(undefined);
-      const term = getMxIdLocalPart(value) ?? (value.startsWith('@') ? value.slice(1) : value);
-      if (term) {
-        search(term);
-      } else {
-        resetSearch();
-      }
-    }
-  };
-
-  const handleUserId = (userId: string) => {
-    if (inputRef.current) {
-      inputRef.current.value = userId;
-      setValidUserId(userId);
-      resetSearch();
-      inputRef.current.focus();
-    }
-  };
-
-  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
-    if (isKeyHotkey('escape', evt)) {
-      resetSearch();
-      return;
-    }
-    if (isKeyHotkey('tab', evt) && result && result.items.length > 0) {
-      evt.preventDefault();
-      const userId = result.items[0];
-      handleUserId(userId);
-    }
-  };
-
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: () => inputRef.current,
-            clickOutsideDeactivates: true,
-            onDeactivate: requestClose,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Dialog>
-            <Box grow="Yes" direction="Column">
-              <Header
-                size="500"
-                style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
-              >
-                <Box grow="Yes">
-                  <Text size="H4" truncate>
-                    Invite
-                  </Text>
-                </Box>
-                <Box shrink="No">
-                  <IconButton size="300" radii="300" onClick={requestClose}>
-                    <Icon src={Icons.Cross} />
-                  </IconButton>
-                </Box>
-              </Header>
-              <Box
-                as="form"
-                onSubmit={handleSubmit}
-                shrink="No"
-                style={{ padding: config.space.S400 }}
-                direction="Column"
-                gap="400"
-              >
-                <Box direction="Column" gap="100">
-                  <Text size="L400">User ID</Text>
-                  <div>
-                    <Input
-                      size="500"
-                      ref={inputRef}
-                      onChange={handleSearchChange}
-                      onKeyDown={handleKeyDown}
-                      placeholder="@username:server"
-                      name="userIdInput"
-                      variant="Background"
-                      disabled={inviting}
-                      autoComplete="off"
-                      required
-                    />
-                    {result && result.items.length > 0 && (
-                      <FocusTrap
-                        focusTrapOptions={{
-                          initialFocus: false,
-                          onDeactivate: resetSearch,
-                          returnFocusOnDeactivate: false,
-                          clickOutsideDeactivates: true,
-                          allowOutsideClick: true,
-                          isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
-                          isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
-                          escapeDeactivates: stopPropagation,
-                        }}
-                      >
-                        <Box style={{ position: 'relative' }}>
-                          <Menu style={{ position: 'absolute', top: 0, zIndex: 1, width: '100%' }}>
-                            <Scroll size="300" style={{ maxHeight: toRem(100) }}>
-                              <div style={{ padding: config.space.S100 }}>
-                                {result.items.map((userId) => {
-                                  const username = `${getMxIdLocalPart(userId)}`;
-                                  const userServer = getMxIdServer(userId);
-
-                                  return (
-                                    <MenuItem
-                                      key={userId}
-                                      type="button"
-                                      size="300"
-                                      variant="Surface"
-                                      radii="300"
-                                      onClick={() => handleUserId(userId)}
-                                      after={
-                                        <Text size="T200" truncate>
-                                          {userServer}
-                                        </Text>
-                                      }
-                                      disabled={inviting}
-                                    >
-                                      <Box grow="Yes">
-                                        <Text size="T300" truncate>
-                                          <b>
-                                            {queryHighlighRegex
-                                              ? highlightText(queryHighlighRegex, [
-                                                  username ?? userId,
-                                                ])
-                                              : username}
-                                          </b>
-                                        </Text>
-                                      </Box>
-                                    </MenuItem>
-                                  );
-                                })}
-                              </div>
-                            </Scroll>
-                          </Menu>
-                        </Box>
-                      </FocusTrap>
-                    )}
-                  </div>
-                </Box>
-                <Box direction="Column" gap="100">
-                  <Text size="L400">Reason (Optional)</Text>
-                  <TextArea
-                    size="500"
-                    name="reasonInput"
-                    variant="Background"
-                    rows={4}
-                    resize="None"
-                  />
-                </Box>
-                {inviteState.status === AsyncStatus.Error && (
-                  <Text size="T200" style={{ color: color.Critical.Main }} className={BreakWord}>
-                    <b>{inviteState.error.message}</b>
-                  </Text>
-                )}
-                <Button
-                  type="submit"
-                  disabled={!validUserId || inviting}
-                  before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
-                >
-                  <Text size="B400">Invite</Text>
-                </Button>
-              </Box>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
diff --git a/src/app/components/invite-user-prompt/index.ts b/src/app/components/invite-user-prompt/index.ts
deleted file mode 100644
index 156810b8..00000000
--- a/src/app/components/invite-user-prompt/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InviteUserPrompt';
diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index 3b613803..0505f204 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -22,7 +22,8 @@ import {
 import * as css from './style.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { bytesToSize, millisecondsToMinutesAndSeconds } from '../../../utils/common';
+import { bytesToSize } from '../../../../util/common';
+import { millisecondsToMinutesAndSeconds } from '../../../utils/common';
 import {
   decryptFile,
   downloadEncryptedMedia,
diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts
index bb5d8484..93f3649c 100644
--- a/src/app/components/message/content/style.css.ts
+++ b/src/app/components/message/content/style.css.ts
@@ -16,6 +16,7 @@ export const AbsoluteContainer = style([
     position: 'absolute',
     top: 0,
     left: 0,
+    zIndex: 1,
     width: '100%',
     height: '100%',
   },
@@ -25,7 +26,6 @@ export const AbsoluteFooter = style([
   DefaultReset,
   {
     position: 'absolute',
-    pointerEvents: 'none',
     bottom: config.space.S100,
     left: config.space.S100,
     right: config.space.S100,
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index ce550992..c388efd4 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
+import { openInviteUser } from '../../../client/action/navigation';
 import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
 import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -16,7 +17,6 @@ import { mDirectAtom } from '../../state/mDirectList';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { InviteUserPrompt } from '../invite-user-prompt';
 
 export type RoomIntroProps = {
   room: Room;
@@ -27,7 +27,6 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
   const useAuthentication = useMediaAuthentication();
   const { navigateRoom } = useRoomNavigate();
   const mDirects = useAtomValue(mDirectAtom);
-  const [invitePrompt, setInvitePrompt] = useState(false);
 
   const createEvent = getStateEvent(room, StateEvent.RoomCreate);
   const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
@@ -77,13 +76,14 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
           )}
         </Box>
         <Box gap="200" wrap="Wrap">
-          <Button onClick={() => setInvitePrompt(true)} variant="Secondary" size="300" radii="300">
+          <Button
+            onClick={() => openInviteUser(room.roomId)}
+            variant="Secondary"
+            size="300"
+            radii="300"
+          >
             <Text size="B300">Invite Member</Text>
           </Button>
-
-          {invitePrompt && (
-            <InviteUserPrompt room={room} requestClose={() => setInvitePrompt(false)} />
-          )}
           {typeof prevRoomId === 'string' &&
             (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
               <Button
diff --git a/src/app/components/user-avatar/UserAvatar.tsx b/src/app/components/user-avatar/UserAvatar.tsx
index d9de9b79..98067ad4 100644
--- a/src/app/components/user-avatar/UserAvatar.tsx
+++ b/src/app/components/user-avatar/UserAvatar.tsx
@@ -1,17 +1,15 @@
 import { AvatarFallback, AvatarImage, color } from 'folds';
 import React, { ReactEventHandler, ReactNode, useState } from 'react';
-import classNames from 'classnames';
 import * as css from './UserAvatar.css';
 import colorMXID from '../../../util/colorMXID';
 
 type UserAvatarProps = {
-  className?: string;
   userId: string;
   src?: string;
   alt?: string;
   renderFallback: () => ReactNode;
 };
-export function UserAvatar({ className, userId, src, alt, renderFallback }: UserAvatarProps) {
+export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps) {
   const [error, setError] = useState(false);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
@@ -22,7 +20,7 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
-        className={classNames(css.UserAvatar, className)}
+        className={css.UserAvatar}
       >
         {renderFallback()}
       </AvatarFallback>
@@ -31,7 +29,7 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
 
   return (
     <AvatarImage
-      className={classNames(css.UserAvatar, className)}
+      className={css.UserAvatar}
       src={src}
       alt={alt}
       onError={() => setError(true)}
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 0e7fb748..cf4c815f 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -1,17 +1,6 @@
-import React, { useState } from 'react';
-import {
-  Avatar,
-  Box,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-} from 'folds';
+import React from 'react';
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import classNames from 'classnames';
-import FocusTrap from 'focus-trap-react';
 import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
@@ -19,8 +8,6 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
-import { ImageViewer } from '../image-viewer';
-import { stopPropagation } from '../../utils/keyboard';
 
 type UserHeroProps = {
   userId: string;
@@ -28,8 +15,6 @@ type UserHeroProps = {
   presence?: UserPresence;
 };
 export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
-  const [viewAvatar, setViewAvatar] = useState<string>();
-
   return (
     <Box direction="Column" className={css.UserHero}>
       <div
@@ -39,9 +24,7 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
           filter: avatarUrl ? undefined : 'brightness(50%)',
         }}
       >
-        {avatarUrl && (
-          <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
-        )}
+        {avatarUrl && <img className={css.UserHeroCover} src={avatarUrl} alt={userId} />}
       </div>
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
@@ -50,14 +33,8 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
         >
-          <Avatar
-            as={avatarUrl ? 'button' : 'div'}
-            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-            className={css.UserHeroAvatar}
-            size="500"
-          >
+          <Avatar className={css.UserHeroAvatar} size="500">
             <UserAvatar
-              className={css.UserHeroAvatarImg}
               userId={userId}
               src={avatarUrl}
               alt={userId}
@@ -65,28 +42,6 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             />
           </Avatar>
         </AvatarPresence>
-        {viewAvatar && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setViewAvatar(undefined),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
-                  <ImageViewer
-                    src={viewAvatar}
-                    alt={userId}
-                    requestClose={() => setViewAvatar(undefined)}
-                  />
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
-        )}
       </div>
     </Box>
   );
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 78d201ec..e92d9098 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -1,8 +1,7 @@
-import { Box, Button, config, Icon, Icons, Text } from 'folds';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Box, Button, color, config, Icon, Icons, Spinner, Text } from 'folds';
+import React, { useCallback } from 'react';
 import { UserHero, UserHeroName } from './UserHero';
-import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
+import { getDMRoomFor, getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
 import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -10,6 +9,11 @@ import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
 import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { createDM } from '../../../client/action/room';
+import { hasDevices } from '../../../util/matrixUtil';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useAlive } from '../../hooks/useAlive';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
 import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
@@ -20,8 +24,6 @@ import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
 import { CreatorChip } from './CreatorChip';
-import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
-import { DirectCreateSearchParams } from '../../pages/paths';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -29,7 +31,8 @@ type UserRoomProfileProps = {
 export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const navigate = useNavigate();
+  const { navigateRoom } = useRoomNavigate();
+  const alive = useAlive();
   const closeUserRoomProfile = useCloseUserRoomProfile();
   const ignoredUsers = useIgnoredUsers();
   const ignored = ignoredUsers.includes(userId);
@@ -59,12 +62,26 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
 
   const presence = useUserPresence(userId);
 
+  const [directMessageState, directMessage] = useAsyncCallback<string, Error, []>(
+    useCallback(async () => {
+      const result = await createDM(mx, userId, await hasDevices(mx, userId));
+      return result.room_id as string;
+    }, [userId, mx])
+  );
+
   const handleMessage = () => {
-    closeUserRoomProfile();
-    const directSearchParam: DirectCreateSearchParams = {
-      userId,
-    };
-    navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
+    const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
+    if (dmRoomId) {
+      navigateRoom(dmRoomId);
+      closeUserRoomProfile();
+      return;
+    }
+    directMessage().then((rId) => {
+      if (alive()) {
+        navigateRoom(rId);
+        closeUserRoomProfile();
+      }
+    });
   };
 
   return (
@@ -78,21 +95,31 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         <Box direction="Column" gap="400">
           <Box gap="400" alignItems="Start">
             <UserHeroName displayName={displayName} userId={userId} />
-            {userId !== myUserId && (
-              <Box shrink="No">
-                <Button
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  before={<Icon size="50" src={Icons.Message} filled />}
-                  onClick={handleMessage}
-                >
-                  <Text size="B300">Message</Text>
-                </Button>
-              </Box>
-            )}
+            <Box shrink="No">
+              <Button
+                size="300"
+                variant="Primary"
+                fill="Solid"
+                radii="300"
+                disabled={directMessageState.status === AsyncStatus.Loading}
+                before={
+                  directMessageState.status === AsyncStatus.Loading ? (
+                    <Spinner size="50" variant="Primary" fill="Solid" />
+                  ) : (
+                    <Icon size="50" src={Icons.Message} filled />
+                  )
+                }
+                onClick={handleMessage}
+              >
+                <Text size="B300">Message</Text>
+              </Button>
+            </Box>
           </Box>
+          {directMessageState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }}>
+              <b>{directMessageState.error.message}</b>
+            </Text>
+          )}
           <Box alignItems="Center" gap="200" wrap="Wrap">
             {server && <ServerChip server={server} />}
             <ShareChip userId={userId} />
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 62272a2e..ad6d5a95 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -39,16 +39,4 @@ export const UserAvatarContainer = style({
 });
 export const UserHeroAvatar = style({
   outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
-  selectors: {
-    'button&': {
-      cursor: 'pointer',
-    },
-  },
-});
-export const UserHeroAvatarImg = style({
-  selectors: {
-    [`button${UserHeroAvatar}:hover &`]: {
-      filter: 'brightness(0.5)',
-    },
-  },
 });
diff --git a/src/app/features/common-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx
index 6b684be7..400e73ae 100644
--- a/src/app/features/common-settings/general/RoomAddress.tsx
+++ b/src/app/features/common-settings/general/RoomAddress.tsx
@@ -28,11 +28,11 @@ import {
 } from '../../../hooks/useRoomAliases';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { CutoutCard } from '../../../components/cutout-card';
+import { getIdServer } from '../../../../util/matrixUtil';
 import { replaceSpaceWithDash } from '../../../utils/common';
 import { useAlive } from '../../../hooks/useAlive';
 import { StateEvent } from '../../../../types/matrix/room';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-import { getMxIdServer } from '../../../utils/matrix';
 
 type RoomPublishedAddressesProps = {
   permissions: RoomPermissionsAPI;
@@ -133,7 +133,7 @@ export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesPr
 function LocalAddressInput({ addLocalAlias }: { addLocalAlias: (alias: string) => Promise<void> }) {
   const mx = useMatrixClient();
   const userId = mx.getSafeUserId();
-  const server = getMxIdServer(userId);
+  const server = getIdServer(userId);
   const alive = useAlive();
 
   const [addState, addAlias] = useAsyncCallback(addLocalAlias);
diff --git a/src/app/features/create-chat/CreateChat.tsx b/src/app/features/create-chat/CreateChat.tsx
deleted file mode 100644
index faa4511b..00000000
--- a/src/app/features/create-chat/CreateChat.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds';
-import React, { FormEventHandler, useCallback, useState } from 'react';
-import { ICreateRoomStateEvent, MatrixError, Preset, Visibility } from 'matrix-js-sdk';
-import { useNavigate } from 'react-router-dom';
-import { SettingTile } from '../../components/setting-tile';
-import { SequenceCard } from '../../components/sequence-card';
-import { addRoomIdToMDirect, isUserId } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { ErrorCode } from '../../cs-errorcode';
-import { millisecondsToMinutes } from '../../utils/common';
-import { createRoomEncryptionState } from '../../components/create-room';
-import { useAlive } from '../../hooks/useAlive';
-import { getDirectRoomPath } from '../../pages/pathUtils';
-
-type CreateChatProps = {
-  defaultUserId?: string;
-};
-export function CreateChat({ defaultUserId }: CreateChatProps) {
-  const mx = useMatrixClient();
-  const alive = useAlive();
-  const navigate = useNavigate();
-
-  const [encryption, setEncryption] = useState(true);
-  const [invalidUserId, setInvalidUserId] = useState(false);
-
-  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [string, boolean]>(
-    useCallback(
-      async (userId, encrypted) => {
-        const initialState: ICreateRoomStateEvent[] = [];
-
-        if (encrypted) initialState.push(createRoomEncryptionState());
-
-        const result = await mx.createRoom({
-          is_direct: true,
-          invite: [userId],
-          visibility: Visibility.Private,
-          preset: Preset.TrustedPrivateChat,
-          initial_state: initialState,
-        });
-
-        addRoomIdToMDirect(mx, result.room_id, userId);
-
-        return result.room_id;
-      },
-      [mx]
-    )
-  );
-  const loading = createState.status === AsyncStatus.Loading;
-  const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
-  const disabled = createState.status === AsyncStatus.Loading;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    setInvalidUserId(false);
-
-    const target = evt.target as HTMLFormElement | undefined;
-    const userIdInput = target?.userIdInput as HTMLInputElement | undefined;
-    const userId = userIdInput?.value.trim();
-
-    if (!userIdInput || !userId) return;
-    if (!isUserId(userId)) {
-      setInvalidUserId(true);
-      return;
-    }
-
-    create(userId, encryption).then((roomId) => {
-      if (alive()) {
-        userIdInput.value = '';
-        navigate(getDirectRoomPath(roomId));
-      }
-    });
-  };
-
-  return (
-    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
-      <Box direction="Column" gap="100">
-        <Text size="L400">User ID</Text>
-        <Input
-          defaultValue={defaultUserId}
-          placeholder="@username:server"
-          name="userIdInput"
-          variant="SurfaceVariant"
-          size="500"
-          radii="400"
-          required
-          autoFocus
-          autoComplete="off"
-          disabled={disabled}
-        />
-        {invalidUserId && (
-          <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
-            <Icon src={Icons.Warning} filled size="50" />
-            <Text size="T200" style={{ color: color.Critical.Main }}>
-              <b>Please enter a valid User ID.</b>
-            </Text>
-          </Box>
-        )}
-      </Box>
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Options</Text>
-        <SequenceCard
-          style={{ padding: config.space.S300 }}
-          variant="SurfaceVariant"
-          direction="Column"
-          gap="500"
-        >
-          <SettingTile
-            title="End-to-End Encryption"
-            description="Once this feature is enabled, it can't be disabled after the room is created."
-            after={
-              <Switch
-                variant="Primary"
-                value={encryption}
-                onChange={setEncryption}
-                disabled={disabled}
-              />
-            }
-          />
-        </SequenceCard>
-      </Box>
-      {error && (
-        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
-          <Icon src={Icons.Warning} filled size="100" />
-          <Text size="T300" style={{ color: color.Critical.Main }}>
-            <b>
-              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
-                ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
-                  )} minutes!`
-                : error.message}
-            </b>
-          </Text>
-        </Box>
-      )}
-      <Box shrink="No" direction="Column" gap="200">
-        <Button
-          type="submit"
-          size="500"
-          variant="Primary"
-          radii="400"
-          disabled={disabled}
-          before={loading && <Spinner variant="Primary" fill="Solid" size="200" />}
-        >
-          <Text size="B500">Create</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}
diff --git a/src/app/features/create-chat/index.ts b/src/app/features/create-chat/index.ts
deleted file mode 100644
index ed988dfb..00000000
--- a/src/app/features/create-chat/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './CreateChat';
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index c6aff741..ccbbe179 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -18,6 +18,7 @@ import {
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
+import { openInviteUser } from '../../../client/action/navigation';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -29,7 +30,6 @@ import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
-import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -126,39 +126,24 @@ function InviteMenuItem({
   requestClose: () => void;
   disabled?: boolean;
 }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(item.roomId);
-  const [invitePrompt, setInvitePrompt] = useState(false);
-
   const handleInvite = () => {
-    setInvitePrompt(true);
+    openInviteUser(item.roomId);
+    requestClose();
   };
 
   return (
-    <>
-      <MenuItem
-        onClick={handleInvite}
-        size="300"
-        radii="300"
-        variant="Primary"
-        fill="None"
-        aria-pressed={invitePrompt}
-        disabled={disabled || !room}
-      >
-        <Text as="span" size="T300" truncate>
-          Invite
-        </Text>
-      </MenuItem>
-      {invitePrompt && room && (
-        <InviteUserPrompt
-          room={room}
-          requestClose={() => {
-            setInvitePrompt(false);
-            requestClose();
-          }}
-        />
-      )}
-    </>
+    <MenuItem
+      onClick={handleInvite}
+      size="300"
+      radii="300"
+      variant="Primary"
+      fill="None"
+      disabled={disabled}
+    >
+      <Text as="span" size="T300" truncate>
+        Invite
+      </Text>
+    </MenuItem>
   );
 }
 
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index a0c4d3ab..77287123 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -26,6 +26,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import * as css from './LobbyHeader.css';
+import { openInviteUser } from '../../../client/action/navigation';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -37,7 +38,6 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type LobbyMenuProps = {
   powerLevels: IPowerLevels;
@@ -53,10 +53,9 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openSpaceSettings = useOpenSpaceSettings();
 
-    const [invitePrompt, setInvitePrompt] = useState(false);
-
     const handleInvite = () => {
-      setInvitePrompt(true);
+      openInviteUser(space.roomId);
+      requestClose();
     };
 
     const handleRoomSettings = () => {
@@ -66,15 +65,6 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        {invitePrompt && (
-          <InviteUserPrompt
-            room={space}
-            requestClose={() => {
-              setInvitePrompt(false);
-              requestClose();
-            }}
-          />
-        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleInvite}
@@ -83,7 +73,6 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.UserPlus} />}
             radii="300"
-            aria-pressed={invitePrompt}
             disabled={!canInvite}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 33b21bff..ee8b6787 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -29,7 +29,8 @@ import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
-import { markAsRead } from '../../utils/notifications';
+import { markAsRead } from '../../../client/action/notifications';
+import { openInviteUser } from '../../../client/action/navigation';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
@@ -50,7 +51,6 @@ import {
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -70,15 +70,14 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const openRoomSettings = useOpenRoomSettings();
     const space = useSpaceOptionally();
 
-    const [invitePrompt, setInvitePrompt] = useState(false);
-
     const handleMarkAsRead = () => {
       markAsRead(mx, room.roomId, hideActivity);
       requestClose();
     };
 
     const handleInvite = () => {
-      setInvitePrompt(true);
+      openInviteUser(room.roomId);
+      requestClose();
     };
 
     const handleCopyLink = () => {
@@ -95,15 +94,6 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        {invitePrompt && room && (
-          <InviteUserPrompt
-            room={room}
-            requestClose={() => {
-              setInvitePrompt(false);
-              requestClose();
-            }}
-          />
-        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
@@ -147,7 +137,6 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.UserPlus} />}
             radii="300"
-            aria-pressed={invitePrompt}
             disabled={!canInvite}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 24878d5e..ffc21857 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -10,7 +10,7 @@ import { settingsAtom } from '../../state/settings';
 import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
-import { markAsRead } from '../../utils/notifications';
+import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 2281b59d..7a012e42 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -94,7 +94,7 @@ import {
   getIntersectionObserverEntry,
   useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
-import { markAsRead } from '../../utils/notifications';
+import { markAsRead } from '../../../client/action/notifications';
 import { useDebounce } from '../../hooks/useDebounce';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import * as css from './RoomTimeline.css';
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 2a4c710e..c4a09100 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -18,6 +18,7 @@ import { Page } from '../../components/page';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
+import navigation from '../../../client/state/navigation';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
@@ -79,9 +80,10 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     useCallback(
       (evt) => {
         if (editableActiveElement()) return;
-        // means some menu or modal window is open
-        const lastNode = document.body.lastElementChild;
-        if (lastNode && !lastNode.hasAttribute('data-last-node')) {
+        if (
+          document.body.lastElementChild?.className !== 'ReactModalPortal' ||
+          navigation.isRawModalVisible
+        ) {
           return;
         }
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 9b4bfd23..291c21c0 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -43,8 +43,9 @@ import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
-import { markAsRead } from '../../utils/notifications';
+import { markAsRead } from '../../../client/action/notifications';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import { openInviteUser } from '../../../client/action/navigation';
 import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
@@ -68,7 +69,6 @@ import { JumpToTime } from './jump-to-time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type RoomMenuProps = {
   room: Room;
@@ -87,15 +87,14 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
   const { navigateRoom } = useRoomNavigate();
 
-  const [invitePrompt, setInvitePrompt] = useState(false);
-
   const handleMarkAsRead = () => {
     markAsRead(mx, room.roomId, hideActivity);
     requestClose();
   };
 
   const handleInvite = () => {
-    setInvitePrompt(true);
+    openInviteUser(room.roomId);
+    requestClose();
   };
 
   const handleCopyLink = () => {
@@ -114,15 +113,6 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
 
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-      {invitePrompt && (
-        <InviteUserPrompt
-          room={room}
-          requestClose={() => {
-            setInvitePrompt(false);
-            requestClose();
-          }}
-        />
-      )}
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
@@ -166,7 +156,6 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
           size="300"
           after={<Icon size="100" src={Icons.UserPlus} />}
           radii="300"
-          aria-pressed={invitePrompt}
           disabled={!canInvite}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
deleted file mode 100644
index aaf51a17..00000000
--- a/src/app/features/search/Search.tsx
+++ /dev/null
@@ -1,450 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import {
-  Avatar,
-  Box,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Line,
-  MenuItem,
-  Modal,
-  Overlay,
-  OverlayCenter,
-  Scroll,
-  Text,
-  toRem,
-} from 'folds';
-import React, {
-  ChangeEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { isKeyHotkey } from 'is-hotkey';
-import { useAtom, useAtomValue } from 'jotai';
-import { Room } from 'matrix-js-sdk';
-import { useDirects, useOrphanSpaces, useRooms, useSpaces } from '../../state/hooks/roomList';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { mDirectAtom } from '../../state/mDirectList';
-import { allRoomsAtom } from '../../state/room-list/roomList';
-import {
-  SearchItemStrGetter,
-  useAsyncSearch,
-  UseAsyncSearchOptions,
-} from '../../hooks/useAsyncSearch';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
-import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import {
-  getAllParents,
-  getDirectRoomAvatarUrl,
-  getRoomAvatarUrl,
-  guessPerfectParent,
-} from '../../utils/room';
-import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
-import { factoryRoomIdByActivity } from '../../utils/sort';
-import { nameInitials } from '../../utils/common';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useListFocusIndex } from '../../hooks/useListFocusIndex';
-import { getMxIdLocalPart, getMxIdServer, guessDmRoomUserId } from '../../utils/matrix';
-import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
-import { searchModalAtom } from '../../state/searchModal';
-import { useKeyDown } from '../../hooks/useKeyDown';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { KeySymbol } from '../../utils/key-symbol';
-import { isMacOS } from '../../utils/user-agent';
-
-enum SearchRoomType {
-  Rooms = '#',
-  Spaces = '*',
-  Directs = '@',
-}
-
-const getSearchPrefixToRoomType = (prefix: string): SearchRoomType | undefined => {
-  if (prefix === '#') return SearchRoomType.Rooms;
-  if (prefix === '*') return SearchRoomType.Spaces;
-  if (prefix === '@') return SearchRoomType.Directs;
-  return undefined;
-};
-
-const useTopActiveRooms = (
-  searchRoomType: SearchRoomType | undefined,
-  rooms: string[],
-  directs: string[],
-  spaces: string[]
-) => {
-  const mx = useMatrixClient();
-
-  return useMemo(() => {
-    if (searchRoomType === SearchRoomType.Spaces) {
-      return spaces;
-    }
-    if (searchRoomType === SearchRoomType.Directs) {
-      return [...directs].sort(factoryRoomIdByActivity(mx)).slice(0, 20);
-    }
-    if (searchRoomType === SearchRoomType.Rooms) {
-      return [...rooms].sort(factoryRoomIdByActivity(mx)).slice(0, 20);
-    }
-    return [...rooms, ...directs].sort(factoryRoomIdByActivity(mx)).slice(0, 20);
-  }, [mx, rooms, directs, spaces, searchRoomType]);
-};
-
-const getDmUserId = (
-  roomId: string,
-  getRoom: (roomId: string) => Room | undefined,
-  myUserId: string
-): string | undefined => {
-  const room = getRoom(roomId);
-  const targetUserId = room && guessDmRoomUserId(room, myUserId);
-  return targetUserId;
-};
-
-const useSearchTargetRooms = (
-  searchRoomType: SearchRoomType | undefined,
-  rooms: string[],
-  directs: string[],
-  spaces: string[]
-) =>
-  useMemo(() => {
-    if (searchRoomType === undefined) {
-      return [...rooms, ...directs, ...spaces];
-    }
-    if (searchRoomType === SearchRoomType.Rooms) return rooms;
-    if (searchRoomType === SearchRoomType.Spaces) return spaces;
-    if (searchRoomType === SearchRoomType.Directs) return directs;
-
-    return [];
-  }, [rooms, spaces, directs, searchRoomType]);
-
-const SEARCH_OPTIONS: UseAsyncSearchOptions = {
-  matchOptions: {
-    contain: true,
-  },
-  normalizeOptions: {
-    ignoreWhitespace: false,
-  },
-};
-
-type SearchProps = {
-  requestClose: () => void;
-};
-export function Search({ requestClose }: SearchProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { navigateRoom, navigateSpace } = useRoomNavigate();
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
-
-  const [searchRoomType, setSearchRoomType] = useState<SearchRoomType>();
-
-  const allRoomsSet = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allRoomsSet);
-
-  const roomToParents = useAtomValue(roomToParentsAtom);
-  const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
-  const mDirects = useAtomValue(mDirectAtom);
-  const rooms = useRooms(mx, allRoomsAtom, mDirects);
-  const spaces = useSpaces(mx, allRoomsAtom);
-  const directs = useDirects(mx, allRoomsAtom, mDirects);
-
-  const topActiveRooms = useTopActiveRooms(searchRoomType, rooms, directs, spaces);
-  const targetRooms = useSearchTargetRooms(searchRoomType, rooms, directs, spaces);
-
-  const getTargetStr: SearchItemStrGetter<string> = useCallback(
-    (roomId: string) => {
-      const roomName = getRoom(roomId)?.name ?? roomId;
-      if (mDirects.has(roomId)) {
-        const targetUserId = getDmUserId(roomId, getRoom, mx.getSafeUserId());
-        const targetUsername = targetUserId && getMxIdLocalPart(targetUserId);
-        if (targetUsername) return [roomName, targetUsername];
-      }
-      return roomName;
-    },
-    [getRoom, mDirects, mx]
-  );
-
-  const [result, search, resetSearch] = useAsyncSearch(targetRooms, getTargetStr, SEARCH_OPTIONS);
-  const roomsToRender = result ? result.items : topActiveRooms;
-  const listFocus = useListFocusIndex(roomsToRender.length, 0);
-
-  const queryHighlighRegex = result?.query
-    ? makeHighlightRegex(result.query.split(' '))
-    : undefined;
-
-  const openRoomId = (roomId: string, isSpace: boolean) => {
-    if (isSpace) navigateSpace(roomId);
-    else navigateRoom(roomId);
-    requestClose();
-  };
-
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
-    listFocus.reset();
-
-    const target = evt.currentTarget;
-    let value = target.value.trim();
-    const prefix = value.match(/^[#@*]/)?.[0];
-    const searchType = typeof prefix === 'string' && getSearchPrefixToRoomType(prefix);
-    if (searchType) {
-      value = value.slice(1);
-      setSearchRoomType(searchType);
-    } else {
-      setSearchRoomType(undefined);
-    }
-
-    if (value === '') {
-      resetSearch();
-      return;
-    }
-    search(value);
-  };
-
-  const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
-    const roomId = roomsToRender[listFocus.index];
-    if (isKeyHotkey('enter', evt) && roomId) {
-      openRoomId(roomId, spaces.includes(roomId));
-      return;
-    }
-    if (isKeyHotkey('arrowdown', evt)) {
-      evt.preventDefault();
-      listFocus.next();
-      return;
-    }
-    if (isKeyHotkey('arrowup', evt)) {
-      evt.preventDefault();
-      listFocus.previous();
-    }
-  };
-
-  const handleRoomClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    const target = evt.currentTarget;
-    const roomId = target.getAttribute('data-room-id');
-    const isSpace = target.getAttribute('data-space') === 'true';
-    if (!roomId) return;
-    openRoomId(roomId, isSpace);
-  };
-
-  useEffect(() => {
-    const scrollView = scrollRef.current;
-    const focusedItem = scrollView?.querySelector(`[data-focus-index="${listFocus.index}"]`);
-
-    if (focusedItem && scrollView) {
-      focusedItem.scrollIntoView({
-        block: 'center',
-      });
-    }
-  }, [listFocus.index]);
-
-  return (
-    <Overlay open>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: () => inputRef.current,
-            returnFocusOnDeactivate: false,
-            allowOutsideClick: true,
-            clickOutsideDeactivates: true,
-            onDeactivate: requestClose,
-            escapeDeactivates: (evt) => {
-              evt.stopPropagation();
-              return true;
-            },
-          }}
-        >
-          <Modal size="400" style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}>
-            <Box
-              shrink="No"
-              style={{ padding: config.space.S400, paddingBottom: 0 }}
-              direction="Column"
-            >
-              <Input
-                ref={inputRef}
-                size="500"
-                variant="Background"
-                radii="400"
-                outlined
-                placeholder="Search"
-                before={<Icon size="200" src={Icons.Search} />}
-                onChange={handleInputChange}
-                onKeyDown={handleInputKeyDown}
-              />
-            </Box>
-            <Box grow="Yes">
-              {roomsToRender.length === 0 && (
-                <Box
-                  style={{ paddingTop: config.space.S700 }}
-                  grow="Yes"
-                  alignItems="Center"
-                  justifyContent="Center"
-                  direction="Column"
-                  gap="100"
-                >
-                  <Text size="H6" align="Center">
-                    {result ? 'No Match Found' : `No Rooms'}`}
-                  </Text>
-                  <Text size="T200" align="Center">
-                    {result
-                      ? `No match found for "${result.query}".`
-                      : `You do not have any Rooms to display yet.`}
-                  </Text>
-                </Box>
-              )}
-              {roomsToRender.length > 0 && (
-                <Scroll ref={scrollRef} size="300" hideTrack>
-                  <div style={{ padding: config.space.S400, paddingRight: config.space.S200 }}>
-                    {roomsToRender.map((roomId, index) => {
-                      const room = getRoom(roomId);
-                      if (!room) return null;
-
-                      const dm = mDirects.has(roomId);
-                      const dmUserId = dm && getDmUserId(roomId, getRoom, mx.getSafeUserId());
-                      const dmUsername = dmUserId && getMxIdLocalPart(dmUserId);
-                      const dmUserServer = dmUserId && getMxIdServer(dmUserId);
-
-                      const allParents = getAllParents(roomToParents, roomId);
-                      const orphanParents =
-                        allParents && orphanSpaces.filter((o) => allParents.has(o));
-                      const perfectOrphanParent =
-                        orphanParents && guessPerfectParent(mx, roomId, orphanParents);
-
-                      const exactParents = roomToParents.get(roomId);
-                      const perfectParent =
-                        exactParents && guessPerfectParent(mx, roomId, Array.from(exactParents));
-
-                      const unread = roomToUnread.get(roomId);
-
-                      return (
-                        <MenuItem
-                          key={roomId}
-                          as="button"
-                          data-focus-index={index}
-                          data-room-id={roomId}
-                          data-space={room.isSpaceRoom()}
-                          onClick={handleRoomClick}
-                          variant={listFocus.index === index ? 'Primary' : 'Surface'}
-                          aria-pressed={listFocus.index === index}
-                          radii="400"
-                          after={
-                            <Box gap="100">
-                              {dmUserServer && (
-                                <Text size="T200" priority="300" truncate>
-                                  <b>{dmUserServer}</b>
-                                </Text>
-                              )}
-                              {!dm && perfectOrphanParent && (
-                                <Text size="T200" priority="300" truncate>
-                                  <b>{getRoom(perfectOrphanParent)?.name ?? perfectOrphanParent}</b>
-                                </Text>
-                              )}
-                              {unread && (
-                                <UnreadBadgeCenter>
-                                  <UnreadBadge
-                                    highlight={unread.highlight > 0}
-                                    count={unread.total}
-                                  />
-                                </UnreadBadgeCenter>
-                              )}
-                            </Box>
-                          }
-                          before={
-                            <Avatar size="200" radii={dm ? '400' : '300'}>
-                              {dm || room.isSpaceRoom() ? (
-                                <RoomAvatar
-                                  roomId={room.roomId}
-                                  src={
-                                    dm
-                                      ? getDirectRoomAvatarUrl(mx, room, 32, useAuthentication)
-                                      : getRoomAvatarUrl(mx, room, 32, useAuthentication)
-                                  }
-                                  alt={room.name}
-                                  renderFallback={() => (
-                                    <Text as="span" size="H6">
-                                      {nameInitials(room.name)}
-                                    </Text>
-                                  )}
-                                />
-                              ) : (
-                                <RoomIcon
-                                  size="100"
-                                  joinRule={room.getJoinRule()}
-                                  space={room.isSpaceRoom()}
-                                />
-                              )}
-                            </Avatar>
-                          }
-                        >
-                          <Box grow="Yes" alignItems="Center" gap="100">
-                            <Text size="T400" truncate>
-                              {queryHighlighRegex
-                                ? highlightText(queryHighlighRegex, [room.name])
-                                : room.name}
-                            </Text>
-                            {dmUsername && (
-                              <Text as="span" size="T200" priority="300" truncate>
-                                @
-                                {queryHighlighRegex
-                                  ? highlightText(queryHighlighRegex, [dmUsername])
-                                  : dmUsername}
-                              </Text>
-                            )}
-                            {!dm && perfectParent && perfectParent !== perfectOrphanParent && (
-                              <Text size="T200" priority="300" truncate>
-                                — {getRoom(perfectParent)?.name ?? perfectParent}
-                              </Text>
-                            )}
-                          </Box>
-                        </MenuItem>
-                      );
-                    })}
-                  </div>
-                </Scroll>
-              )}
-            </Box>
-            <Line size="300" />
-            <Box shrink="No" justifyContent="Center" style={{ padding: config.space.S200 }}>
-              <Text size="T200" priority="300">
-                Type <b>#</b> for rooms, <b>@</b> for DMs and <b>*</b> for spaces. Hotkey:{' '}
-                <b>{isMacOS() ? KeySymbol.Command : 'Ctrl'} + k</b>
-              </Text>
-            </Box>
-          </Modal>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
-
-export function SearchModalRenderer() {
-  const [opened, setOpen] = useAtom(searchModalAtom);
-
-  useKeyDown(
-    window,
-    useCallback(
-      (event) => {
-        if (isKeyHotkey('mod+k', event)) {
-          event.preventDefault();
-          if (opened) {
-            setOpen(false);
-            return;
-          }
-
-          // means some menu or modal window is open
-          const lastNode = document.body.lastElementChild;
-          if (lastNode && !lastNode.hasAttribute('data-last-node')) {
-            return;
-          }
-          setOpen(true);
-        }
-      },
-      [opened, setOpen]
-    )
-  );
-
-  return opened && <Search requestClose={() => setOpen(false)} />;
-}
diff --git a/src/app/features/search/index.ts b/src/app/features/search/index.ts
deleted file mode 100644
index addd5330..00000000
--- a/src/app/features/search/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Search';
diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx
index 4fba564e..5a80e060 100644
--- a/src/app/features/settings/about/About.tsx
+++ b/src/app/features/settings/about/About.tsx
@@ -5,6 +5,7 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import CinnySVG from '../../../../../public/res/svg/cinny.svg';
+import cons from '../../../../client/state/cons';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 
@@ -46,7 +47,7 @@ export function About({ requestClose }: AboutProps) {
                   <Box direction="Column" gap="100">
                     <Box gap="100" alignItems="End">
                       <Text size="H3">Cinny</Text>
-                      <Text size="T200">v4.10.0</Text>
+                      <Text size="T200">v{cons.version}</Text>
                     </Box>
                     <Text>Yet another matrix client.</Text>
                   </Box>
diff --git a/src/app/features/settings/account/MatrixId.tsx b/src/app/features/settings/account/MatrixId.tsx
index 0c06a75d..ac9b1fb5 100644
--- a/src/app/features/settings/account/MatrixId.tsx
+++ b/src/app/features/settings/account/MatrixId.tsx
@@ -4,7 +4,7 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { copyToClipboard } from '../../../utils/dom';
+import { copyToClipboard } from '../../../../util/common';
 
 export function MatrixId() {
   const mx = useMatrixClient();
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index b861a060..ed11ec4d 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -305,7 +305,6 @@ function PageZoomInput() {
 
 function Appearance() {
   const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
-  const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
 
   return (
@@ -333,13 +332,6 @@ function Appearance() {
         />
       </SequenceCard>
 
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Monochrome Mode"
-          after={<Switch variant="Primary" value={monochromeMode} onChange={setMonochromeMode} />}
-        />
-      </SequenceCard>
-
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Twitter Emoji"
diff --git a/src/app/hooks/useCommands.ts b/src/app/hooks/useCommands.ts
index c02b0e94..c95142e8 100644
--- a/src/app/hooks/useCommands.ts
+++ b/src/app/hooks/useCommands.ts
@@ -1,32 +1,20 @@
-import {
-  Direction,
-  EventTimeline,
-  IContextResponse,
-  MatrixClient,
-  Method,
-  Preset,
-  Room,
-  RoomMember,
-  Visibility,
-} from 'matrix-js-sdk';
+import { Direction, IContextResponse, MatrixClient, Method, Room, RoomMember } from 'matrix-js-sdk';
 import { RoomServerAclEventContent } from 'matrix-js-sdk/lib/types';
 import { useMemo } from 'react';
 import {
-  addRoomIdToMDirect,
   getDMRoomFor,
-  guessDmRoomUserId,
   isRoomAlias,
   isRoomId,
   isServerName,
   isUserId,
   rateLimitedActions,
-  removeRoomIdFromMDirect,
 } from '../utils/matrix';
+import { hasDevices } from '../../util/matrixUtil';
+import * as roomActions from '../../client/action/room';
 import { useRoomNavigate } from './useRoomNavigate';
 import { Membership, StateEvent } from '../../types/matrix/room';
 import { getStateEvent } from '../utils/room';
 import { splitWithSpace } from '../utils/common';
-import { createRoomEncryptionState } from '../components/create-room';
 
 export const SHRUG = '¯\\_(ツ)_/¯';
 export const TABLEFLIP = '(╯°□°)╯︵ ┻━┻';
@@ -204,7 +192,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Start direct message with user. Example: /startdm userId1',
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
-          const userIds = rawIds.filter((id) => isUserId(id) && id !== mx.getSafeUserId());
+          const userIds = rawIds.filter((id) => isUserId(id) && id !== mx.getUserId());
           if (userIds.length === 0) return;
           if (userIds.length === 1) {
             const dmRoomId = getDMRoomFor(mx, userIds[0])?.roomId;
@@ -213,14 +201,9 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               return;
             }
           }
-          const result = await mx.createRoom({
-            is_direct: true,
-            invite: userIds,
-            visibility: Visibility.Private,
-            preset: Preset.TrustedPrivateChat,
-            initial_state: [createRoomEncryptionState()],
-          });
-          addRoomIdToMDirect(mx, result.room_id, userIds[0]);
+          const devices = await Promise.all(userIds.map((uid) => hasDevices(mx, uid)));
+          const isEncrypt = devices.every((hasDevice) => hasDevice);
+          const result = await roomActions.createDM(mx, userIds, isEncrypt);
           navigateRoom(result.room_id);
         },
       },
@@ -229,12 +212,10 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Join room with address. Example: /join address1 address2',
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
-          const roomIdOrAliases = rawIds.filter(
+          const roomIds = rawIds.filter(
             (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias)
           );
-          roomIdOrAliases.forEach(async (idOrAlias) => {
-            await mx.joinRoom(idOrAlias);
-          });
+          roomIds.map((id) => roomActions.join(mx, id));
         },
       },
       [Command.Leave]: {
@@ -333,11 +314,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id));
-          if (userIds.length > 0) {
-            let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
-            ignoredUsers = [...new Set(ignoredUsers)];
-            await mx.setIgnoredUsers(ignoredUsers);
-          }
+          if (userIds.length > 0) roomActions.ignore(mx, userIds);
         },
       },
       [Command.UnIgnore]: {
@@ -346,10 +323,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id));
-          if (userIds.length > 0) {
-            const ignoredUsers = mx.getIgnoredUsers();
-            await mx.setIgnoredUsers(ignoredUsers.filter((id) => !userIds.includes(id)));
-          }
+          if (userIds.length > 0) roomActions.unignore(mx, userIds);
         },
       },
       [Command.MyRoomNick]: {
@@ -358,21 +332,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const nick = payload.trim();
           if (nick === '') return;
-          const mEvent = room
-            .getLiveTimeline()
-            .getState(EventTimeline.FORWARDS)
-            ?.getStateEvents(StateEvent.RoomMember, mx.getSafeUserId());
-          const content = mEvent?.getContent();
-          if (!content) return;
-          await mx.sendStateEvent(
-            room.roomId,
-            StateEvent.RoomMember as any,
-            {
-              ...content,
-              displayname: nick,
-            },
-            mx.getSafeUserId()
-          );
+          roomActions.setMyRoomNick(mx, room.roomId, nick);
         },
       },
       [Command.MyRoomAvatar]: {
@@ -380,21 +340,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Change profile picture in current room. Example /myroomavatar mxc://xyzabc',
         exe: async (payload) => {
           if (payload.match(/^mxc:\/\/\S+$/)) {
-            const mEvent = room
-              .getLiveTimeline()
-              .getState(EventTimeline.FORWARDS)
-              ?.getStateEvents(StateEvent.RoomMember, mx.getSafeUserId());
-            const content = mEvent?.getContent();
-            if (!content) return;
-            await mx.sendStateEvent(
-              room.roomId,
-              StateEvent.RoomMember as any,
-              {
-                ...content,
-                avatar_url: payload,
-              },
-              mx.getSafeUserId()
-            );
+            roomActions.setMyRoomAvatar(mx, room.roomId, payload);
           }
         },
       },
@@ -402,15 +348,14 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.ConvertToDm,
         description: 'Convert room to direct message',
         exe: async () => {
-          const dmUserId = guessDmRoomUserId(room, mx.getSafeUserId());
-          await addRoomIdToMDirect(mx, room.roomId, dmUserId);
+          roomActions.convertToDm(mx, room.roomId);
         },
       },
       [Command.ConvertToRoom]: {
         name: Command.ConvertToRoom,
         description: 'Convert direct message to room',
         exe: async () => {
-          await removeRoomIdFromMDirect(mx, room.roomId);
+          roomActions.convertToRoom(mx, room.roomId);
         },
       },
       [Command.Delete]: {
diff --git a/src/app/hooks/useListFocusIndex.ts b/src/app/hooks/useListFocusIndex.ts
deleted file mode 100644
index e4f3bf2c..00000000
--- a/src/app/hooks/useListFocusIndex.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useListFocusIndex = (size: number, initialIndex: number) => {
-  const [index, setIndex] = useState(initialIndex);
-
-  const next = useCallback(() => {
-    setIndex((i) => {
-      const nextIndex = i + 1;
-      if (nextIndex >= size) {
-        return 0;
-      }
-      return nextIndex;
-    });
-  }, [size]);
-
-  const previous = useCallback(() => {
-    setIndex((i) => {
-      const previousIndex = i - 1;
-      if (previousIndex < 0) {
-        return size - 1;
-      }
-      return previousIndex;
-    });
-  }, [size]);
-
-  const reset = useCallback(() => {
-    setIndex(initialIndex);
-  }, [initialIndex]);
-
-  return {
-    index,
-    next,
-    previous,
-    reset,
-  };
-};
diff --git a/src/app/hooks/useStore.js b/src/app/hooks/useStore.js
new file mode 100644
index 00000000..f216406b
--- /dev/null
+++ b/src/app/hooks/useStore.js
@@ -0,0 +1,22 @@
+/* eslint-disable import/prefer-default-export */
+import { useEffect, useRef } from 'react';
+
+export function useStore(...args) {
+  const itemRef = useRef(null);
+
+  const getItem = () => itemRef.current;
+
+  const setItem = (event) => {
+    itemRef.current = event;
+    return itemRef.current;
+  };
+
+  useEffect(() => {
+    itemRef.current = null;
+    return () => {
+      itemRef.current = null;
+    };
+  }, args);
+
+  return { getItem, setItem };
+}
diff --git a/src/app/molecules/confirm-dialog/ConfirmDialog.jsx b/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
new file mode 100644
index 00000000..5771f2c1
--- /dev/null
+++ b/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ConfirmDialog.scss';
+
+import { openReusableDialog } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+
+function ConfirmDialog({
+  desc, actionTitle, actionType, onComplete,
+}) {
+  return (
+    <div className="confirm-dialog">
+      <Text>{desc}</Text>
+      <div className="confirm-dialog__btn">
+        <Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
+        <Button onClick={() => onComplete(false)}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+ConfirmDialog.propTypes = {
+  desc: PropTypes.string.isRequired,
+  actionTitle: PropTypes.string.isRequired,
+  actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
+  onComplete: PropTypes.func.isRequired,
+};
+
+/**
+ * @param {string} title title of confirm dialog
+ * @param {string} desc description of confirm dialog
+ * @param {string} actionTitle title of main action to take
+ * @param {'primary' | 'positive' | 'danger' | 'caution'} actionType type of action. default=primary
+ * @return {Promise<boolean>} does it get's confirmed or not
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const confirmDialog = (title, desc, actionTitle, actionType = 'primary') => new Promise((resolve) => {
+  let isCompleted = false;
+  openReusableDialog(
+    <Text variant="s1" weight="medium">{title}</Text>,
+    (requestClose) => (
+      <ConfirmDialog
+        desc={desc}
+        actionTitle={actionTitle}
+        actionType={actionType}
+        onComplete={(isConfirmed) => {
+          isCompleted = true;
+          resolve(isConfirmed);
+          requestClose();
+        }}
+      />
+    ),
+    () => {
+      if (!isCompleted) resolve(false);
+    },
+  );
+});
diff --git a/src/app/molecules/confirm-dialog/ConfirmDialog.scss b/src/app/molecules/confirm-dialog/ConfirmDialog.scss
new file mode 100644
index 00000000..05f88be1
--- /dev/null
+++ b/src/app/molecules/confirm-dialog/ConfirmDialog.scss
@@ -0,0 +1,11 @@
+.confirm-dialog {
+  padding: var(--sp-normal);
+
+  & > .text {
+    padding-bottom: var(--sp-normal);
+  }
+  &__btn {
+    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
new file mode 100644
index 00000000..478a0855
--- /dev/null
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Dialog.scss';
+
+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,
+  invisibleScroll,
+}) {
+  return (
+    <RawModal
+      className={`${className === null ? '' : `${className} `}dialog-modal`}
+      isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onAfterClose={onAfterClose}
+      onRequestClose={onRequestClose}
+      closeFromOutside={closeFromOutside}
+      size="small"
+    >
+      <div className="dialog">
+        <div className="dialog__content">
+          <Header>
+            <TitleWrapper>
+              {typeof title === 'string' ? (
+                <Text variant="h2" weight="medium" primary>
+                  {title}
+                </Text>
+              ) : (
+                title
+              )}
+            </TitleWrapper>
+            {contentOptions}
+          </Header>
+          <div className="dialog__content__wrapper">
+            <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
+              <div className="dialog__content-container">{children}</div>
+            </ScrollView>
+          </div>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+Dialog.defaultProps = {
+  className: null,
+  contentOptions: null,
+  onAfterOpen: null,
+  onAfterClose: null,
+  onRequestClose: null,
+  closeFromOutside: true,
+  invisibleScroll: false,
+};
+
+Dialog.propTypes = {
+  className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.node.isRequired,
+  contentOptions: PropTypes.node,
+  onAfterOpen: PropTypes.func,
+  onAfterClose: PropTypes.func,
+  onRequestClose: PropTypes.func,
+  closeFromOutside: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  invisibleScroll: PropTypes.bool,
+};
+
+export default Dialog;
diff --git a/src/app/molecules/dialog/Dialog.scss b/src/app/molecules/dialog/Dialog.scss
new file mode 100644
index 00000000..269d909e
--- /dev/null
+++ b/src/app/molecules/dialog/Dialog.scss
@@ -0,0 +1,23 @@
+.dialog-modal {
+  --modal-height: 656px;
+  max-height: min(100%, var(--modal-height));
+  display: flex;
+}
+
+.dialog,
+.dialog__content,
+.dialog__content__wrapper {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+
+  display: flex;
+}
+
+.dialog {
+  background-color: var(--bg-surface);
+
+  &__content {
+    flex-direction: column;
+  }
+}
diff --git a/src/app/molecules/dialog/ReusableDialog.jsx b/src/app/molecules/dialog/ReusableDialog.jsx
new file mode 100644
index 00000000..7340e119
--- /dev/null
+++ b/src/app/molecules/dialog/ReusableDialog.jsx
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import cons from '../../../client/state/cons';
+
+import navigation from '../../../client/state/navigation';
+import IconButton from '../../atoms/button/IconButton';
+import Dialog from './Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReusableDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (title, render, afterClose) => {
+      setIsOpen(true);
+      setData({ title, render, afterClose });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    };
+  }, []);
+
+  const handleAfterClose = () => {
+    data.afterClose?.();
+    setData(null);
+  };
+
+  const handleRequestClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title={data?.title || ''}
+      onAfterClose={handleAfterClose}
+      onRequestClose={handleRequestClose}
+      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      invisibleScroll
+    >
+      {data?.render(handleRequestClose) || <div />}
+    </Dialog>
+  );
+}
+
+export default ReusableDialog;
diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
new file mode 100644
index 00000000..5213381f
--- /dev/null
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -0,0 +1,99 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ImageUpload.scss';
+
+
+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 { useMatrixClient } from '../../hooks/useMatrixClient';
+
+function ImageUpload({
+  text, bgColor, imageSrc, onUpload, onRequestRemove,
+  size,
+}) {
+  const [uploadPromise, setUploadPromise] = useState(null);
+  const uploadImageRef = useRef(null);
+  const mx = useMatrixClient();
+
+  async function uploadImage(e) {
+    const file = e.target.files.item(0);
+    if (file === null) return;
+    try {
+      const uPromise = mx.uploadContent(file);
+      setUploadPromise(uPromise);
+
+      const res = await uPromise;
+      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      setUploadPromise(null);
+    } catch {
+      setUploadPromise(null);
+    }
+    uploadImageRef.current.value = null;
+  }
+
+  function cancelUpload() {
+    mx.cancelUpload(uploadPromise);
+    setUploadPromise(null);
+    uploadImageRef.current.value = null;
+  }
+
+  return (
+    <div className="img-upload__wrapper">
+      <button
+        type="button"
+        className="img-upload"
+        onClick={() => {
+          if (uploadPromise !== null) return;
+          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" />
+          )}
+          {uploadPromise !== null && <Spinner size="small" />}
+        </div>
+      </button>
+      { (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>
+        </button>
+      )}
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
+    </div>
+  );
+}
+
+ImageUpload.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  imageSrc: null,
+  size: 'large',
+};
+
+ImageUpload.propTypes = {
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  onUpload: PropTypes.func.isRequired,
+  onRequestRemove: PropTypes.func.isRequired,
+  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
new file mode 100644
index 00000000..3ae38bc0
--- /dev/null
+++ b/src/app/molecules/image-upload/ImageUpload.scss
@@ -0,0 +1,49 @@
+.img-upload__wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.img-upload {
+	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;
+	}
+
+
+	&__btn-cancel {
+		margin-top: var(--sp-extra-tight);
+		cursor: pointer;
+		& .text {
+			color: var(--tc-danger-normal)
+		}
+	}
+}
diff --git a/src/app/molecules/people-selector/PeopleSelector.jsx b/src/app/molecules/people-selector/PeopleSelector.jsx
new file mode 100644
index 00000000..7025aa7c
--- /dev/null
+++ b/src/app/molecules/people-selector/PeopleSelector.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PeopleSelector.scss';
+
+import { blurOnBubbling } from '../../atoms/button/script';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function PeopleSelector({ avatarSrc, name, color, peopleRole, onClick }) {
+  return (
+    <div className="people-selector__container">
+      <button
+        className="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">
+          {name}
+        </Text>
+        {peopleRole !== null && (
+          <Text className="people-selector__role" variant="b3">
+            {peopleRole}
+          </Text>
+        )}
+      </button>
+    </div>
+  );
+}
+
+PeopleSelector.defaultProps = {
+  avatarSrc: null,
+  peopleRole: null,
+};
+
+PeopleSelector.propTypes = {
+  avatarSrc: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+  peopleRole: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default PeopleSelector;
diff --git a/src/app/molecules/people-selector/PeopleSelector.scss b/src/app/molecules/people-selector/PeopleSelector.scss
new file mode 100644
index 00000000..65907e6c
--- /dev/null
+++ b/src/app/molecules/people-selector/PeopleSelector.scss
@@ -0,0 +1,37 @@
+@use '../../partials/text';
+
+.people-selector {
+  width: 100%;
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &__container {
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+    }
+  }
+  &:focus {
+    outline: none;
+    background-color: var(--bg-surface-hover);
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+
+  &__name {
+    @extend .cp-txt__ellipsis;
+    flex: 1;
+    min-width: 0;
+    margin: 0 var(--sp-tight);
+    color: var(--tc-surface-normal);
+  }
+  &__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
new file mode 100644
index 00000000..55872d6a
--- /dev/null
+++ b/src/app/molecules/popup-window/PopupWindow.jsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PopupWindow.scss';
+
+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';
+
+function PWContentSelector({ selected, variant, iconSrc, type, onClick, children }) {
+  const pwcsClass = selected ? ' pw-content-selector--selected' : '';
+  return (
+    <div className={`pw-content-selector${pwcsClass}`}>
+      <MenuItem variant={variant} iconSrc={iconSrc} type={type} onClick={onClick}>
+        {children}
+      </MenuItem>
+    </div>
+  );
+}
+
+PWContentSelector.defaultProps = {
+  selected: false,
+  variant: 'surface',
+  iconSrc: 'none',
+  type: 'button',
+};
+
+PWContentSelector.propTypes = {
+  selected: PropTypes.bool,
+  variant: PropTypes.oneOf(['surface', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  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,
+}) {
+  const haveDrawer = drawer !== null;
+  const cTitle = contentTitle !== null ? contentTitle : title;
+
+  return (
+    <RawModal
+      className={`${className === null ? '' : `${className} `}pw-modal`}
+      overlayClassName="pw-modal__overlay"
+      isOpen={isOpen}
+      onAfterClose={onAfterClose}
+      onRequestClose={onRequestClose}
+      size={haveDrawer ? 'large' : 'medium'}
+    >
+      <div className="pw">
+        {haveDrawer && (
+          <div className="pw__drawer">
+            <Header>
+              <IconButton
+                size="small"
+                src={ChevronLeftIC}
+                onClick={onRequestClose}
+                tooltip="Back"
+              />
+              <TitleWrapper>
+                {typeof title === 'string' ? (
+                  <Text variant="s1" weight="medium" primary>
+                    {title}
+                  </Text>
+                ) : (
+                  title
+                )}
+              </TitleWrapper>
+              {drawerOptions}
+            </Header>
+            <div className="pw__drawer__content__wrapper">
+              <ScrollView invisible>
+                <div className="pw__drawer__content">{drawer}</div>
+              </ScrollView>
+            </div>
+          </div>
+        )}
+        <div className="pw__content">
+          <Header>
+            <TitleWrapper>
+              {typeof cTitle === 'string' ? (
+                <Text variant="h2" weight="medium" primary>
+                  {cTitle}
+                </Text>
+              ) : (
+                cTitle
+              )}
+            </TitleWrapper>
+            {contentOptions}
+          </Header>
+          <div className="pw__content__wrapper">
+            <ScrollView autoHide>
+              <div className="pw__content-container">{children}</div>
+            </ScrollView>
+          </div>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+PopupWindow.defaultProps = {
+  className: null,
+  drawer: null,
+  contentTitle: null,
+  drawerOptions: null,
+  contentOptions: null,
+  onAfterClose: null,
+  onRequestClose: null,
+};
+
+PopupWindow.propTypes = {
+  className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.node.isRequired,
+  contentTitle: PropTypes.node,
+  drawer: PropTypes.node,
+  drawerOptions: PropTypes.node,
+  contentOptions: PropTypes.node,
+  onAfterClose: PropTypes.func,
+  onRequestClose: PropTypes.func,
+  children: PropTypes.node.isRequired,
+};
+
+export { PopupWindow as default, PWContentSelector };
diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss
new file mode 100644
index 00000000..3251b02d
--- /dev/null
+++ b/src/app/molecules/popup-window/PopupWindow.scss
@@ -0,0 +1,84 @@
+@use '../../partials/dir';
+@use '../../partials/screen';
+
+.pw-modal {
+  --modal-height: 774px;
+  max-height: var(--modal-height) !important;
+  height: 100%;
+
+  @include screen.smallerThan(mobileBreakpoint) {
+    --modal-height: 100%;
+    border-radius: 0 !important;
+    &__overlay {
+      padding: 0 !important;
+    }
+  }
+}
+
+.pw {
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-surface);
+
+  display: flex;
+
+  &__drawer {
+    width: var(--popup-window-drawer-width);
+    background-color: var(--bg-surface-low);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
+  }
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__drawer,
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+
+.pw__drawer__content,
+.pw__content-container {
+  padding-top: var(--sp-extra-tight);
+  padding-bottom: var(--sp-extra-loose);
+}
+.pw__drawer__content__wrapper,
+.pw__content__wrapper {
+  flex: 1;
+  min-height: 0;
+}
+
+.pw__drawer {
+  & .header {
+    padding-left: var(--sp-tight);
+    @include dir.side(padding, var(--sp-tight), var(--sp-tight));
+    & .header__title-wrapper {
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
+    }
+  }
+}
+
+.pw-content-selector {
+  margin: 0 var(--sp-extra-tight);
+  border-radius: var(--bo-radius);
+  &--selected {
+    box-shadow: var(--bs-surface-border);
+    background-color: var(--bg-surface);
+
+    & .context-menu__item > button {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  & .context-menu__item > button {
+    border-radius: var(--bo-radius);
+    & .ic-raw {
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+  }
+}
diff --git a/src/app/molecules/power-level-selector/PowerLevelSelector.jsx b/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
new file mode 100644
index 00000000..ca3e8417
--- /dev/null
+++ b/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
@@ -0,0 +1,49 @@
+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 CheckIC from '../../../../public/res/ic/outlined/check.svg';
+
+function PowerLevelSelector({
+  value, max, onSelect,
+}) {
+  const handleSubmit = (e) => {
+    const powerLevel = e.target.elements['power-level']?.value;
+    if (!powerLevel) return;
+    onSelect(Number(powerLevel));
+  };
+
+  return (
+    <div className="power-level-selector">
+      <MenuHeader>Power level selector</MenuHeader>
+      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
+        <input
+          className="input"
+          defaultValue={value}
+          type="number"
+          name="power-level"
+          placeholder="Power level"
+          max={max}
+          autoComplete="off"
+          required
+        />
+        <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>}
+    </div>
+  );
+}
+
+PowerLevelSelector.propTypes = {
+  value: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default PowerLevelSelector;
diff --git a/src/app/molecules/power-level-selector/PowerLevelSelector.scss b/src/app/molecules/power-level-selector/PowerLevelSelector.scss
new file mode 100644
index 00000000..14a151dd
--- /dev/null
+++ b/src/app/molecules/power-level-selector/PowerLevelSelector.scss
@@ -0,0 +1,20 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.power-level-selector {
+  & .context-menu__item .text {
+    margin: 0 !important;
+  }
+
+  & form {
+    margin: var(--sp-normal);
+    display: flex;
+      
+    & input {
+      @extend .cp-fx__item-one;
+      @include dir.side(margin, 0, var(--sp-tight));
+      width: 148px;
+      padding: 9px var(--sp-tight);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
new file mode 100644
index 00000000..f865c95d
--- /dev/null
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomSelector.scss';
+
+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';
+
+function RoomSelectorWrapper({
+  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');
+
+  return (
+    <div className={classes.join(' ')}>
+      <button
+        className="room-selector__content"
+        type="button"
+        onClick={onClick}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector__content')}
+        onContextMenu={onContextMenu}
+      >
+        {content}
+      </button>
+      <div className="room-selector__options">{options}</div>
+    </div>
+  );
+}
+RoomSelectorWrapper.defaultProps = {
+  isMuted: false,
+  options: null,
+  onContextMenu: null,
+};
+RoomSelectorWrapper.propTypes = {
+  isSelected: PropTypes.bool.isRequired,
+  isMuted: PropTypes.bool,
+  isUnread: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  options: PropTypes.node,
+  onContextMenu: PropTypes.func,
+};
+
+function RoomSelector({
+  name,
+  parentName,
+  roomId,
+  imageSrc,
+  iconSrc,
+  isSelected,
+  isMuted,
+  isUnread,
+  notificationCount,
+  isAlert,
+  options,
+  onClick,
+  onContextMenu,
+}) {
+  return (
+    <RoomSelectorWrapper
+      isSelected={isSelected}
+      isMuted={isMuted}
+      isUnread={isUnread}
+      content={
+        <>
+          <Avatar
+            text={name}
+            bgColor={colorMXID(roomId)}
+            imageSrc={imageSrc}
+            iconColor="var(--ic-surface-low)"
+            iconSrc={iconSrc}
+            size="extra-small"
+          />
+          <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
+            {name}
+            {parentName && (
+              <Text variant="b3" span>
+                {' — '}
+                {parentName}
+              </Text>
+            )}
+          </Text>
+          {isUnread && (
+            <NotificationBadge
+              alert={isAlert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
+        </>
+      }
+      options={options}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+    />
+  );
+}
+RoomSelector.defaultProps = {
+  parentName: null,
+  isSelected: false,
+  imageSrc: null,
+  iconSrc: null,
+  isMuted: false,
+  options: null,
+  onContextMenu: null,
+};
+RoomSelector.propTypes = {
+  name: PropTypes.string.isRequired,
+  parentName: PropTypes.string,
+  roomId: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  isSelected: PropTypes.bool,
+  isMuted: PropTypes.bool,
+  isUnread: PropTypes.bool.isRequired,
+  notificationCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  isAlert: PropTypes.bool.isRequired,
+  options: PropTypes.node,
+  onClick: PropTypes.func.isRequired,
+  onContextMenu: PropTypes.func,
+};
+
+export default RoomSelector;
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
new file mode 100644
index 00000000..59e47473
--- /dev/null
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -0,0 +1,87 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
+.room-selector {
+  @extend .cp-fx__row--s-c;
+
+  border: 1px solid transparent;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+
+  &--muted {
+    opacity: 0.6;
+  }
+
+  &--unread {
+    .room-selector__content > .text {
+      color: var(--tc-surface-high);
+    }
+  }
+  
+  &--selected {
+    background-color: var(--bg-surface);
+    border-color: var(--bg-surface-border);
+
+    & .room-selector__options {
+      display: flex;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      & .room-selector__options {
+        display: flex;
+      }
+    }
+  }
+  &:focus-within {
+    background-color: var(--bg-surface-hover);
+    & button {
+      outline: none;
+    }
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
+  }
+}
+
+.room-selector__content {
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__row--s-c;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__border--active {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
+    margin: 0 var(--sp-extra-tight);
+
+    color: var(--tc-surface-normal-low);
+  }
+}
+.room-selector__options {
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, var(--sp-ultra-tight));
+  display: none;
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn {
+    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
new file mode 100644
index 00000000..2e0a63f6
--- /dev/null
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomTile.scss';
+
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function RoomTile({ 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} />
+      </div>
+      <div className="room-tile__content">
+        <Text variant="s1">{name}</Text>
+        <Text variant="b3">
+          {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">
+            {desc}
+          </Text>
+        ) : (
+          desc
+        )}
+      </div>
+      {options !== null && <div className="room-tile__options">{options}</div>}
+    </div>
+  );
+}
+
+RoomTile.defaultProps = {
+  avatarSrc: null,
+  inviterName: null,
+  options: null,
+  desc: null,
+  memberCount: null,
+};
+RoomTile.propTypes = {
+  avatarSrc: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  inviterName: PropTypes.string,
+  memberCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  desc: PropTypes.node,
+  options: PropTypes.node,
+};
+
+export default RoomTile;
diff --git a/src/app/molecules/room-tile/RoomTile.scss b/src/app/molecules/room-tile/RoomTile.scss
new file mode 100644
index 00000000..bbed7107
--- /dev/null
+++ b/src/app/molecules/room-tile/RoomTile.scss
@@ -0,0 +1,21 @@
+.room-tile {
+  display: flex;
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+
+    margin: 0 var(--sp-normal);
+
+    &__desc {
+      white-space: pre-wrap;
+      & a {
+        white-space: wrap;
+      }
+    }
+
+    & .text:not(:first-child) {
+      margin-top: var(--sp-ultra-tight);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/molecules/setting-tile/SettingTile.jsx b/src/app/molecules/setting-tile/SettingTile.jsx
new file mode 100644
index 00000000..6b221965
--- /dev/null
+++ b/src/app/molecules/setting-tile/SettingTile.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SettingTile.scss';
+
+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
+          }
+        </div>
+        {content}
+      </div>
+      {options !== null && <div className="setting-tile__options">{options}</div>}
+    </div>
+  );
+}
+
+SettingTile.defaultProps = {
+  options: null,
+  content: null,
+};
+
+SettingTile.propTypes = {
+  title: PropTypes.node.isRequired,
+  options: PropTypes.node,
+  content: PropTypes.node,
+};
+
+export default SettingTile;
diff --git a/src/app/molecules/setting-tile/SettingTile.scss b/src/app/molecules/setting-tile/SettingTile.scss
new file mode 100644
index 00000000..322f0019
--- /dev/null
+++ b/src/app/molecules/setting-tile/SettingTile.scss
@@ -0,0 +1,15 @@
+@use '../../partials/dir';
+
+.setting-tile {
+  display: flex;
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+  &__title {
+    margin-bottom: var(--sp-ultra-tight);
+  }
+  &__options {
+    @include dir.side(margin, var(--sp-tight), 0);
+  }
+}
\ 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
new file mode 100644
index 00000000..05b8d85f
--- /dev/null
+++ b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useAtomValue } from 'jotai';
+import './SpaceAddExisting.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { joinRuleToIconSrc } 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 CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+import { mDirectAtom } from '../../state/mDirectList';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getViaServers } from '../../plugins/via-servers';
+import { rateLimitedActions } from '../../utils/matrix';
+import { useAlive } from '../../hooks/useAlive';
+
+function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
+  const alive = useAlive();
+  const [debounce] = useState(new Debounce());
+  const [process, setProcess] = useState(null);
+  const [allRoomIds, setAllRoomIds] = useState([]);
+  const [selected, setSelected] = useState([]);
+  const [searchIds, setSearchIds] = useState(null);
+  const mx = useMatrixClient();
+  const roomIdToParents = useAtomValue(roomToParentsAtom);
+  const mDirects = useAtomValue(mDirectAtom);
+  const spaces = useSpaces(mx, allRoomsAtom);
+  const rooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(mx, allRoomsAtom, mDirects);
+
+  useEffect(() => {
+    const roomIds = onlySpaces ? [...spaces] : [...rooms, ...directs];
+    const allIds = roomIds.filter(
+      (rId) => rId !== roomId && !roomIdToParents.get(rId)?.has(roomId)
+    );
+    setAllRoomIds(allIds);
+  }, [spaces, rooms, directs, roomIdToParents, roomId, onlySpaces]);
+
+  const toggleSelection = (rId) => {
+    if (process !== null) return;
+    const newSelected = [...selected];
+    const selectedIndex = newSelected.indexOf(rId);
+
+    if (selectedIndex > -1) {
+      newSelected.splice(selectedIndex, 1);
+      setSelected(newSelected);
+      return;
+    }
+    newSelected.push(rId);
+    setSelected(newSelected);
+  };
+
+  const handleAdd = async () => {
+    setProcess(`Adding ${selected.length} items...`);
+
+    await rateLimitedActions(selected, async (rId) => {
+      const room = mx.getRoom(rId);
+      const via = getViaServers(room);
+
+      await mx.sendStateEvent(
+        roomId,
+        'm.space.child',
+        {
+          auto_join: false,
+          suggested: false,
+          via,
+        },
+        rId
+      );
+    });
+
+    if (!alive()) return;
+
+    const roomIds = onlySpaces ? [...spaces] : [...rooms, ...directs];
+    const allIds = roomIds.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 === '') {
+      setSearchIds(null);
+      return;
+    }
+
+    debounce._(() => {
+      const searchedIds = allRoomIds.filter((rId) => {
+        let name = mx.getRoom(rId)?.name;
+        if (!name) return false;
+        name = name.normalize('NFKC').toLocaleLowerCase().replace(/\s/g, '');
+        return name.includes(term);
+      });
+      setSearchIds(searchedIds);
+    }, 200)();
+  };
+  const handleSearchClear = (ev) => {
+    const btn = ev.currentTarget;
+    btn.parentElement.searchInput.value = '';
+    setSearchIds(null);
+  };
+
+  return (
+    <>
+      <form
+        onSubmit={(ev) => {
+          ev.preventDefault();
+        }}
+      >
+        <RawIcon size="small" src={SearchIC} />
+        <Input name="searchInput" onChange={handleSearch} placeholder="Search room" autoFocus />
+        <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;
+
+        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);
+
+        return (
+          <RoomSelector
+            key={rId}
+            name={room.name}
+            parentName={parents}
+            roomId={rId}
+            imageSrc={mDirects.has(rId) ? imageSrc : null}
+            iconSrc={
+              mDirects.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>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+SpaceAddExistingContent.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  spaces: PropTypes.bool.isRequired,
+};
+
+function useVisibilityToggle() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (roomId, spaces) =>
+      setData({
+        roomId,
+        spaces,
+      });
+    navigation.on(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
+    };
+  }, []);
+
+  const requestClose = () => setData(null);
+
+  return [data, requestClose];
+}
+
+function SpaceAddExisting() {
+  const [data, requestClose] = useVisibilityToggle();
+  const mx = useMatrixClient();
+  const room = mx.getRoom(data?.roomId);
+
+  return (
+    <Dialog
+      isOpen={!!room}
+      className="space-add-existing"
+      title={
+        <Text variant="s1" weight="medium" primary>
+          {room && room.name}
+          <span style={{ color: 'var(--tc-surface-low)' }}>
+            {' '}
+            — add existing {data?.spaces ? 'spaces' : 'rooms'}
+          </span>
+        </Text>
+      }
+      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
+    >
+      {room ? <SpaceAddExistingContent roomId={room.roomId} spaces={data.spaces} /> : <div />}
+    </Dialog>
+  );
+}
+
+export default SpaceAddExisting;
diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.scss b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
new file mode 100644
index 00000000..3eb3d96a
--- /dev/null
+++ b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
@@ -0,0 +1,77 @@
+@use '../../partials/dir';
+@use '../../partials/flex';
+
+.space-add-existing {
+  height: 100%;
+  
+  .dialog__content-container {
+    padding: 0;
+    padding-bottom: 80px;
+    @include dir.side(padding, var(--sp-extra-tight), 0);
+
+    & > .text {
+      margin: var(--sp-loose) var(--sp-normal);
+      text-align: center;
+    }
+  }
+
+  & form {
+    @extend .cp-fx__row--s-c;
+    padding: var(--sp-extra-tight);
+    padding-top: var(--sp-normal);
+
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background-color: var(--bg-surface);
+
+    & > .ic-raw,
+    & > .ic-btn {
+      position: absolute;
+    }
+    & > .ic-raw {
+      margin: 0 var(--sp-tight);
+    }
+    & > .ic-btn {
+      border-radius: calc(var(--bo-radius) / 2);
+      @include dir.prop(right, var(--sp-tight), unset);
+      @include dir.prop(left, unset, var(--sp-tight));
+    }
+    & input {
+      padding: var(--sp-tight) 40px;
+    }
+  }
+
+  .input-container {
+    @extend .cp-fx__item-one;
+  }
+
+  .room-selector {
+    margin: 0 var(--sp-extra-tight);
+  }
+  .room-selector__options {
+    display: flex;
+    margin: 0 10px;
+  }
+}
+
+.space-add-existing__footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: var(--sp-normal);
+  background-color: var(--bg-surface);
+  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);
+  }
+}
\ No newline at end of file
diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
new file mode 100644
index 00000000..04b2faeb
--- /dev/null
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -0,0 +1,307 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './CreateRoom.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { 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 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 { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+
+function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
+  const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
+  const [isEncrypted, setIsEncrypted] = useState(true);
+  const [isCreatingRoom, setIsCreatingRoom] = useState(false);
+  const [creatingError, setCreatingError] = useState(null);
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+
+  const [isValidAddress, setIsValidAddress] = useState(null);
+  const [addressValue, setAddressValue] = useState(undefined);
+  const [roleIndex, setRoleIndex] = useState(0);
+
+  const addressRef = useRef(null);
+
+  const mx = useMatrixClient();
+  const userHs = getIdServer(mx.getUserId());
+
+  const handleSubmit = async (evt) => {
+    evt.preventDefault();
+    const { target } = evt;
+
+    if (isCreatingRoom) return;
+    setIsCreatingRoom(true);
+    setCreatingError(null);
+
+    const name = target.name.value;
+    let topic = target.topic.value;
+    if (topic.trim() === '') topic = undefined;
+    let roomAlias;
+    if (joinRule === 'public') {
+      roomAlias = addressRef?.current?.value;
+      if (roomAlias.trim() === '') roomAlias = undefined;
+    }
+
+    const powerLevel = roleIndex === 1 ? 101 : undefined;
+
+    try {
+      const data = await roomActions.createRoom(mx, {
+        name,
+        topic,
+        joinRule,
+        alias: roomAlias,
+        isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
+        powerLevel,
+        isSpace,
+        parentId,
+      });
+      setIsCreatingRoom(false);
+      setCreatingError(null);
+      setIsValidAddress(null);
+      setAddressValue(undefined);
+      onRequestClose();
+      if (isSpace) {
+        navigateSpace(data.room_id);
+      } else {
+        navigateRoom(data.room_id);
+      }
+    } catch (e) {
+      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');
+        setIsValidAddress(false);
+      } else setCreatingError(e.message);
+      setIsCreatingRoom(false);
+    }
+  };
+
+  const validateAddress = (e) => {
+    const myAddress = e.target.value;
+    setIsValidAddress(null);
+    setAddressValue(e.target.value);
+    setCreatingError(null);
+
+    setTimeout(async () => {
+      if (myAddress !== addressRef.current.value) return;
+      const roomAlias = addressRef.current.value;
+      if (roomAlias === '') return;
+      const roomAddress = `#${roomAlias}:${userHs}`;
+
+      if (await isRoomAliasAvailable(mx, roomAddress)) {
+        setIsValidAddress(true);
+      } else {
+        setIsValidAddress(false);
+      }
+    }, 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 jrRoomIC = [HashLockIC, HashIC, HashGlobeIC];
+  const jrSpaceIC = [SpaceLockIC, SpaceIC, SpaceGlobeIC];
+  const handleJoinRule = (evt) => {
+    openReusableContextMenu('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>
+        ))}
+      </>
+    ));
+  };
+
+  return (
+    <div className="create-room">
+      <form className="create-room__form" onSubmit={handleSubmit}>
+        <SettingTile
+          title="Visibility"
+          options={
+            <Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
+              {joinRuleShortText[joinRules.indexOf(joinRule)]}
+            </Button>
+          }
+          content={
+            <Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>
+          }
+        />
+        {joinRule === 'public' && (
+          <div>
+            <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'}
+                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>
+            )}
+          </div>
+        )}
+        {!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>
+            }
+          />
+        )}
+        <SettingTile
+          title="Select your role"
+          options={
+            <SegmentControl
+              selected={roleIndex}
+              segments={[{ text: 'Admin' }, { text: 'Founder' }]}
+              onSelect={setRoleIndex}
+            />
+          }
+          content={
+            <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
+          }
+        />
+        <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
+        <div className="create-room__name-wrapper">
+          <Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
+          <Button
+            disabled={isValidAddress === false || isCreatingRoom}
+            iconSrc={isSpace ? SpacePlusIC : HashPlusIC}
+            type="submit"
+            variant="primary"
+          >
+            Create
+          </Button>
+        </div>
+        {isCreatingRoom && (
+          <div className="create-room__loading">
+            <Spinner size="small" />
+            <Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
+          </div>
+        )}
+        {typeof creatingError === 'string' && (
+          <Text className="create-room__error" variant="b3">
+            {creatingError}
+          </Text>
+        )}
+      </form>
+    </div>
+  );
+}
+CreateRoomContent.defaultProps = {
+  parentId: null,
+};
+CreateRoomContent.propTypes = {
+  isSpace: PropTypes.bool.isRequired,
+  parentId: PropTypes.string,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+function useWindowToggle() {
+  const [create, setCreate] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (isSpace, parentId) => {
+      setCreate({
+        isSpace,
+        parentId,
+      });
+    };
+    navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
+    };
+  }, []);
+
+  const onRequestClose = () => setCreate(null);
+
+  return [create, onRequestClose];
+}
+
+function CreateRoom() {
+  const [create, onRequestClose] = useWindowToggle();
+  const { isSpace, parentId } = create ?? {};
+  const mx = useMatrixClient();
+  const room = mx.getRoom(parentId);
+
+  return (
+    <Dialog
+      isOpen={create !== null}
+      title={
+        <Text variant="s1" weight="medium" primary>
+          {parentId ? room.name : 'Home'}
+          <span style={{ color: 'var(--tc-surface-low)' }}>
+            {` — create ${isSpace ? 'space' : 'room'}`}
+          </span>
+        </Text>
+      }
+      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      onRequestClose={onRequestClose}
+    >
+      {create ? (
+        <CreateRoomContent isSpace={isSpace} parentId={parentId} onRequestClose={onRequestClose} />
+      ) : (
+        <div />
+      )}
+    </Dialog>
+  );
+}
+
+export default CreateRoom;
diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
new file mode 100644
index 00000000..ccd3ea3b
--- /dev/null
+++ b/src/app/organisms/create-room/CreateRoom.scss
@@ -0,0 +1,90 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.create-room {
+  margin: var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
+
+  &__form > * {
+    margin-top: var(--sp-normal);
+    &:first-child {
+      margin-top: var(--sp-extra-tight);
+    }
+  }
+
+  & .segment-btn {
+    padding: var(--sp-ultra-tight) 0;
+    &__base {
+      padding: 0 var(--sp-tight);
+    }
+  }
+
+  &__address {
+    display: flex;
+    &__label {
+      color: var(--tc-surface-low);
+      margin-bottom: var(--sp-ultra-tight);
+    }
+    &__tip {
+      margin-top: var(--sp-ultra-tight);
+      @include dir.side(margin, 46px, 0);
+    }
+    & .text {
+      display: flex;
+      align-items: center;
+      padding: 0 var(--sp-normal);
+      border: 1px solid var(--bg-surface-border);
+      border-radius: var(--bo-radius);
+      color: var(--tc-surface-low);
+    }
+    & *:nth-child(2) {
+      flex: 1;
+      min-width: 0;
+      & .input {
+        border-radius: 0;
+      }
+    }
+    & .text:first-child {
+      @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
+      @include dir.prop(
+        border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
+    }
+    & .text:last-child {
+      @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
+      @include dir.prop(
+        border-radius,
+        0 var(--bo-radius) var(--bo-radius) 0,
+        var(--bo-radius) 0 0 var(--bo-radius),
+      );
+    }
+  }
+
+  &__name-wrapper {
+    display: flex;
+    align-items: flex-end;
+
+    & .input-container {
+      flex: 1;
+      min-width: 0;
+      @include dir.side(margin, 0, var(--sp-normal));
+    }
+    & .btn-primary {
+      padding-top: 11px;
+      padding-bottom: 11px;
+    }
+  }
+
+  &__loading {
+    @extend .cp-fx__row--c-c;
+    & .text {
+      @include dir.side(margin, var(--sp-normal), 0);
+    }
+  }
+  &__error {
+    text-align: center;
+    color: var(--bg-danger) !important;
+  }
+}
\ No newline at end of file
diff --git a/src/app/organisms/emoji-board/custom-emoji.js b/src/app/organisms/emoji-board/custom-emoji.js
new file mode 100644
index 00000000..4ca2088f
--- /dev/null
+++ b/src/app/organisms/emoji-board/custom-emoji.js
@@ -0,0 +1,142 @@
+// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
+
+export class ImagePack {
+  static parsePack(eventId, packContent) {
+    if (!eventId || typeof packContent?.images !== 'object') {
+      return null;
+    }
+
+    return new ImagePack(eventId, packContent);
+  }
+
+  constructor(eventId, content) {
+    this.id = eventId;
+    this.content = JSON.parse(JSON.stringify(content));
+
+    this.applyPack(content);
+    this.applyImages(content);
+  }
+
+  applyPack(content) {
+    const pack = content.pack ?? {};
+
+    this.displayName = pack.display_name;
+    this.avatarUrl = pack.avatar_url;
+    this.usage = pack.usage ?? ['emoticon', 'sticker'];
+    this.attribution = pack.attribution;
+  }
+
+  applyImages(content) {
+    this.images = new Map();
+    this.emoticons = [];
+    this.stickers = [];
+
+    Object.entries(content.images).forEach(([shortcode, data]) => {
+      const mxc = data.url;
+      const body = data.body ?? shortcode;
+      const usage = data.usage ?? this.usage;
+      const { info } = data;
+
+      if (!mxc) return;
+      const image = {
+        shortcode, mxc, body, usage, info,
+      };
+
+      this.images.set(shortcode, image);
+      if (usage.includes('emoticon')) {
+        this.emoticons.push(image);
+      }
+      if (usage.includes('sticker')) {
+        this.stickers.push(image);
+      }
+    });
+  }
+
+  getImages() {
+    return this.images;
+  }
+
+  getEmojis() {
+    return this.emoticons;
+  }
+
+  getStickers() {
+    return this.stickers;
+  }
+
+  getContent() {
+    return this.content;
+  }
+
+  _updatePackProperty(property, value) {
+    if (this.content.pack === undefined) {
+      this.content.pack = {};
+    }
+    this.content.pack[property] = value;
+    this.applyPack(this.content);
+  }
+
+  setAvatarUrl(avatarUrl) {
+    this._updatePackProperty('avatar_url', avatarUrl);
+  }
+
+  setDisplayName(displayName) {
+    this._updatePackProperty('display_name', displayName);
+  }
+
+  setAttribution(attribution) {
+    this._updatePackProperty('attribution', attribution);
+  }
+
+  setUsage(usage) {
+    this._updatePackProperty('usage', usage);
+  }
+
+  addImage(key, imgContent) {
+    this.content.images = {
+      [key]: imgContent,
+      ...this.content.images,
+    };
+    this.applyImages(this.content);
+  }
+
+  removeImage(key) {
+    if (this.content.images[key] === undefined) return;
+    delete this.content.images[key];
+    this.applyImages(this.content);
+  }
+
+  updateImageKey(key, newKey) {
+    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];
+    });
+    this.content.images = copyImages;
+    this.applyImages(this.content);
+  }
+
+  _updateImageProperty(key, property, value) {
+    if (this.content.images[key] === undefined) return;
+    this.content.images[key][property] = value;
+    this.applyImages(this.content);
+  }
+
+  setImageUrl(key, url) {
+    this._updateImageProperty(key, 'url', url);
+  }
+
+  setImageBody(key, body) {
+    this._updateImageProperty(key, 'body', body);
+  }
+
+  setImageInfo(key, info) {
+    this._updateImageProperty(key, 'info', info);
+  }
+
+  setImageUsage(key, usage) {
+    this._updateImageProperty(key, 'usage', usage);
+  }
+}
+
+
diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx
new file mode 100644
index 00000000..271c22a9
--- /dev/null
+++ b/src/app/organisms/invite-user/InviteUser.jsx
@@ -0,0 +1,315 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './InviteUser.scss';
+
+import * as roomActions from '../../../client/action/room';
+import { 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 CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { getDMRoomFor } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+
+function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
+  const [isSearching, updateIsSearching] = useState(false);
+  const [searchQuery, updateSearchQuery] = useState({});
+  const [users, updateUsers] = useState([]);
+  const useAuthentication = useMediaAuthentication();
+
+  const [procUsers, updateProcUsers] = useState(new Set()); // proc stands for processing.
+  const [procUserError, updateUserProcError] = useState(new Map());
+
+  const [createdDM, updateCreatedDM] = useState(new Map());
+  const [roomIdToUserId, updateRoomIdToUserId] = useState(new Map());
+
+  const [invitedUserIds, updateInvitedUserIds] = useState(new Set());
+
+  const usernameRef = useRef(null);
+
+  const mx = useMatrixClient();
+  const { navigateRoom } = useRoomNavigate();
+
+  function getMapCopy(myMap) {
+    const newMap = new Map();
+    myMap.forEach((data, key) => {
+      newMap.set(key, data);
+    });
+    return newMap;
+  }
+  function addUserToProc(userId) {
+    procUsers.add(userId);
+    updateProcUsers(new Set(Array.from(procUsers)));
+  }
+  function deleteUserFromProc(userId) {
+    procUsers.delete(userId);
+    updateProcUsers(new Set(Array.from(procUsers)));
+  }
+
+  function onDMCreated(newRoomId) {
+    const myDMPartnerId = roomIdToUserId.get(newRoomId);
+    if (typeof myDMPartnerId === 'undefined') return;
+
+    createdDM.set(myDMPartnerId, newRoomId);
+    roomIdToUserId.delete(newRoomId);
+
+    deleteUserFromProc(myDMPartnerId);
+    updateCreatedDM(getMapCopy(createdDM));
+    updateRoomIdToUserId(getMapCopy(roomIdToUserId));
+  }
+
+  async function searchUser(username) {
+    const inputUsername = username.trim();
+    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,
+          },
+        ]);
+      } catch (e) {
+        updateSearchQuery({ error: `${inputUsername} not found!` });
+      }
+    } else {
+      try {
+        const result = await mx.searchUserDirectory({
+          term: inputUsername,
+          limit: 20,
+        });
+        if (result.results.length === 0) {
+          updateSearchQuery({ error: `No matches found for "${inputUsername}"!` });
+          updateIsSearching(false);
+          return;
+        }
+        updateUsers(result.results);
+      } catch (e) {
+        updateSearchQuery({ error: 'Something went wrong!' });
+      }
+    }
+    updateIsSearching(false);
+  }
+
+  async function createDM(userId) {
+    if (mx.getUserId() === userId) return;
+    const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
+    if (dmRoomId) {
+      navigateRoom(dmRoomId);
+      onRequestClose();
+      return;
+    }
+
+    try {
+      addUserToProc(userId);
+      procUserError.delete(userId);
+      updateUserProcError(getMapCopy(procUserError));
+
+      const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
+      roomIdToUserId.set(result.room_id, userId);
+      updateRoomIdToUserId(getMapCopy(roomIdToUserId));
+      onDMCreated(result.room_id);
+    } catch (e) {
+      deleteUserFromProc(userId);
+      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;
+    try {
+      addUserToProc(userId);
+      procUserError.delete(userId);
+      updateUserProcError(getMapCopy(procUserError));
+
+      await mx.invite(roomId, userId);
+
+      invitedUserIds.add(userId);
+      updateInvitedUserIds(new Set(Array.from(invitedUserIds)));
+      deleteUserFromProc(userId);
+    } catch (e) {
+      deleteUserFromProc(userId);
+      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>
+      );
+
+      if (mx.getUserId() === userId) return null;
+      if (procUsers.has(userId)) {
+        return <Spinner size="small" />;
+      }
+      if (createdDM.has(userId)) {
+        // eslint-disable-next-line max-len
+        return (
+          <Button
+            onClick={() => {
+              navigateRoom(createdDM.get(userId));
+              onRequestClose();
+            }}
+          >
+            Open
+          </Button>
+        );
+      }
+      if (invitedUserIds.has(userId)) {
+        return messageJSX('Invited', true);
+      }
+      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);
+            default:
+          }
+        }
+      }
+      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 users.map((user) => {
+      const userId = user.user_id;
+      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',
+                  undefined,
+                  undefined,
+                  useAuthentication
+                )
+              : null
+          }
+          name={name}
+          id={userId}
+          options={renderOptions(userId)}
+          desc={renderError(userId)}
+        />
+      );
+    });
+  }
+
+  useEffect(() => {
+    if (isOpen && typeof searchTerm === 'string') searchUser(searchTerm);
+    return () => {
+      updateIsSearching(false);
+      updateSearchQuery({});
+      updateUsers([]);
+      updateProcUsers(new Set());
+      updateUserProcError(new Map());
+      updateCreatedDM(new Map());
+      updateRoomIdToUserId(new Map());
+      updateInvitedUserIds(new Set());
+    };
+  }, [isOpen, searchTerm]);
+
+  return (
+    <PopupWindow
+      isOpen={isOpen}
+      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" autoFocus />
+          <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>
+          )}
+        </div>
+        {users.length !== 0 && <div className="invite-user__content">{renderUserList()}</div>}
+      </div>
+    </PopupWindow>
+  );
+}
+
+InviteUser.defaultProps = {
+  roomId: undefined,
+  searchTerm: undefined,
+};
+
+InviteUser.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  roomId: PropTypes.string,
+  searchTerm: PropTypes.string,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default InviteUser;
diff --git a/src/app/organisms/invite-user/InviteUser.scss b/src/app/organisms/invite-user/InviteUser.scss
new file mode 100644
index 00000000..30c9b921
--- /dev/null
+++ b/src/app/organisms/invite-user/InviteUser.scss
@@ -0,0 +1,45 @@
+@use '../../partials/dir';
+
+.invite-user {
+  margin-top: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
+
+  &__form {
+    display: flex;
+    align-items: flex-end;
+
+    & .input-container {
+      flex: 1;
+      min-width: 0;
+      @include dir.side(margin, 0, var(--sp-normal));
+    }
+
+    & .btn-primary {
+      padding: {
+        top: 11px;
+        bottom: 11px;
+      }
+    }
+  }
+  
+  &__search-status {
+    margin-top: var(--sp-extra-loose);
+    margin-bottom: var(--sp-tight);
+    & .donut-spinner {
+      margin: 0 var(--sp-tight);
+    }
+  }
+  &__search-error {
+    color: var(--bg-danger);
+  }
+  &__content {
+    border-top: 1px solid var(--bg-surface-border);
+  }
+
+  & .room-tile {
+    margin-top: var(--sp-normal);
+    &__options {
+      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
new file mode 100644
index 00000000..d4e313af
--- /dev/null
+++ b/src/app/organisms/join-alias/JoinAlias.jsx
@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './JoinAlias.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { join } from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useStore } from '../../hooks/useStore';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+
+const ALIAS_OR_ID_REG = /^[#|!].+:.+\..+$/;
+
+function JoinAliasContent({ term, requestClose }) {
+  const [process, setProcess] = useState(false);
+  const [error, setError] = useState(undefined);
+
+  const mx = useMatrixClient();
+  const mountStore = useStore();
+
+  const { navigateRoom } = useRoomNavigate();
+
+  const openRoom = (roomId) => {
+    navigateRoom(roomId);
+    requestClose();
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    mountStore.setItem(true);
+    const alias = e.target.alias.value;
+    if (alias?.trim() === '') return;
+    if (alias.match(ALIAS_OR_ID_REG) === null) {
+      setError('Invalid address.');
+      return;
+    }
+    setProcess('Looking for address...');
+    setError(undefined);
+    let via;
+    if (alias.startsWith('#')) {
+      try {
+        const aliasData = await mx.getRoomIdForAlias(alias);
+        via = aliasData?.servers.slice(0, 3) || [];
+        if (mountStore.getItem()) {
+          setProcess(`Joining ${alias}...`);
+        }
+      } catch (err) {
+        if (!mountStore.getItem()) return;
+        setProcess(false);
+        setError(
+          `Unable to find room/space with ${alias}. Either room/space is private or doesn't exist.`
+        );
+      }
+    }
+    try {
+      const roomId = await join(mx, alias, false, via);
+      if (!mountStore.getItem()) return;
+      openRoom(roomId);
+    } catch {
+      if (!mountStore.getItem()) return;
+      setProcess(false);
+      setError(`Unable to join ${alias}. Either room/space is private or doesn't exist.`);
+    }
+  };
+
+  return (
+    <form className="join-alias" onSubmit={handleSubmit}>
+      <Input label="Address" value={term} name="alias" required autoFocus />
+      {error && (
+        <Text className="join-alias__error" variant="b3">
+          {error}
+        </Text>
+      )}
+      <div className="join-alias__btn">
+        {process ? (
+          <>
+            <Spinner size="small" />
+            <Text>{process}</Text>
+          </>
+        ) : (
+          <Button variant="primary" type="submit">
+            Join
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
+JoinAliasContent.defaultProps = {
+  term: undefined,
+};
+JoinAliasContent.propTypes = {
+  term: PropTypes.string,
+  requestClose: PropTypes.func.isRequired,
+};
+
+function useWindowToggle() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (term) => {
+      setData({ term });
+    };
+    navigation.on(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+    };
+  }, []);
+
+  const onRequestClose = () => setData(null);
+
+  return [data, onRequestClose];
+}
+
+function JoinAlias() {
+  const [data, requestClose] = useWindowToggle();
+
+  return (
+    <Dialog
+      isOpen={data !== null}
+      title={
+        <Text variant="s1" weight="medium" primary>
+          Join with address
+        </Text>
+      }
+      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
+    >
+      {data ? <JoinAliasContent term={data.term} requestClose={requestClose} /> : <div />}
+    </Dialog>
+  );
+}
+
+export default JoinAlias;
diff --git a/src/app/organisms/join-alias/JoinAlias.scss b/src/app/organisms/join-alias/JoinAlias.scss
new file mode 100644
index 00000000..b3684b0b
--- /dev/null
+++ b/src/app/organisms/join-alias/JoinAlias.scss
@@ -0,0 +1,20 @@
+@use '../../partials/dir';
+
+.join-alias {
+  padding: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
+  & > *:not(:first-child) {
+    margin-top: var(--sp-normal);
+  }
+
+  &__error {
+    color: var(--tc-danger-high);
+    margin-top: var(--sp-extra-tight) !important;
+  }
+
+  &__btn {
+    display: flex;
+    gap: var(--sp-normal);
+  }
+}
\ No newline at end of file
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
new file mode 100644
index 00000000..1ed89692
--- /dev/null
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -0,0 +1,439 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ProfileViewer.scss';
+import { EventTimeline } from 'matrix-js-sdk';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+
+import {
+  getUsername,
+  getUsernameOfRoomMember,
+  getPowerLabel,
+  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 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 { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { getDMRoomFor } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+
+function ModerationTools({ roomId, userId }) {
+  const mx = useMatrixClient();
+  const room = mx.getRoom(roomId);
+  const roomMember = room.getMember(userId);
+
+  const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const powerLevel = roomMember?.powerLevel || 0;
+  const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
+  const canIKick =
+    roomMember?.membership === 'join' &&
+    roomState?.hasSufficientPowerLevelFor('kick', myPowerLevel) &&
+    powerLevel < myPowerLevel;
+  const canIBan =
+    ['join', 'leave'].includes(roomMember?.membership) &&
+    roomState?.hasSufficientPowerLevelFor('ban', myPowerLevel) &&
+    powerLevel < myPowerLevel;
+
+  const handleKick = (e) => {
+    e.preventDefault();
+    const kickReason = e.target.elements['kick-reason']?.value.trim();
+    mx.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
+  };
+
+  const handleBan = (e) => {
+    e.preventDefault();
+    const banReason = e.target.elements['ban-reason']?.value.trim();
+    mx.ban(roomId, userId, banReason !== '' ? banReason : undefined);
+  };
+
+  return (
+    <div className="moderation-tools">
+      {canIKick && (
+        <form onSubmit={handleKick}>
+          <Input label="Kick reason" name="kick-reason" />
+          <Button type="submit">Kick</Button>
+        </form>
+      )}
+      {canIBan && (
+        <form onSubmit={handleBan}>
+          <Input label="Ban reason" name="ban-reason" />
+          <Button type="submit">Ban</Button>
+        </form>
+      )}
+    </div>
+  );
+}
+ModerationTools.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+};
+
+function SessionInfo({ userId }) {
+  const [devices, setDevices] = useState(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const mx = useMatrixClient();
+
+  useEffect(() => {
+    let isUnmounted = false;
+
+    async function loadDevices() {
+      try {
+        const crypto = mx.getCrypto();
+        const userToDevices = await crypto.getUserDeviceInfo([userId], true);
+        const myDevices = Array.from(userToDevices.get(userId).values());
+
+        if (isUnmounted) return;
+        setDevices(myDevices);
+      } catch {
+        setDevices([]);
+      }
+    }
+    loadDevices();
+
+    return () => {
+      isUnmounted = true;
+    };
+  }, [mx, userId]);
+
+  function renderSessionChips() {
+    if (!isVisible) return null;
+    return (
+      <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.displayName || device.deviceId}
+            />
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="session-info">
+      <MenuItem
+        onClick={() => setIsVisible(!isVisible)}
+        iconSrc={isVisible ? ChevronBottomIC : ChevronRightIC}
+      >
+        <Text variant="b2">{`View ${
+          devices?.length > 0
+            ? `${devices.length} ${devices.length === 1 ? 'session' : 'sessions'}`
+            : 'sessions'
+        }`}</Text>
+      </MenuItem>
+      {renderSessionChips()}
+    </div>
+  );
+}
+
+SessionInfo.propTypes = {
+  userId: PropTypes.string.isRequired,
+};
+
+function ProfileFooter({ roomId, userId, onRequestClose }) {
+  const [isCreatingDM, setIsCreatingDM] = useState(false);
+  const [isIgnoring, setIsIgnoring] = useState(false);
+  const mx = useMatrixClient();
+  const [isUserIgnored, setIsUserIgnored] = useState(mx.isUserIgnored(userId));
+
+  const isMountedRef = useRef(true);
+  const { navigateRoom } = useRoomNavigate();
+  const room = mx.getRoom(roomId);
+  const member = room.getMember(userId);
+  const isInvitable = member?.membership !== 'join' && member?.membership !== 'ban';
+
+  const [isInviting, setIsInviting] = useState(false);
+  const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
+
+  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const userPL = room.getMember(userId)?.powerLevel || 0;
+  const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
+
+  const canIKick =
+    roomState?.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
+
+  const isBanned = member?.membership === 'ban';
+
+  const onCreated = (dmRoomId) => {
+    if (isMountedRef.current === false) return;
+    setIsCreatingDM(false);
+    navigateRoom(dmRoomId);
+    onRequestClose();
+  };
+
+  useEffect(() => {
+    setIsUserIgnored(mx.isUserIgnored(userId));
+    setIsIgnoring(false);
+    setIsInviting(false);
+  }, [mx, userId]);
+
+  const openDM = async () => {
+    // Check and open if user already have a DM with userId.
+    const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
+    if (dmRoomId) {
+      navigateRoom(dmRoomId);
+      onRequestClose();
+      return;
+    }
+
+    // Create new DM
+    try {
+      setIsCreatingDM(true);
+      const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
+      onCreated(result.room_id);
+    } catch {
+      if (isMountedRef.current === false) return;
+      setIsCreatingDM(false);
+    }
+  };
+
+  const toggleIgnore = async () => {
+    const isIgnored = mx.getIgnoredUsers().includes(userId);
+
+    try {
+      setIsIgnoring(true);
+      if (isIgnored) {
+        await roomActions.unignore(mx, [userId]);
+      } else {
+        await roomActions.ignore(mx, [userId]);
+      }
+
+      if (isMountedRef.current === false) return;
+      setIsUserIgnored(!isIgnored);
+      setIsIgnoring(false);
+    } catch {
+      setIsIgnoring(false);
+    }
+  };
+
+  const toggleInvite = async () => {
+    try {
+      setIsInviting(true);
+      let isInviteSent = false;
+      if (isInvited) await mx.kick(roomId, userId);
+      else {
+        await mx.invite(roomId, userId);
+        isInviteSent = true;
+      }
+      if (isMountedRef.current === false) return;
+      setIsInvited(isInviteSent);
+      setIsInviting(false);
+    } catch {
+      setIsInviting(false);
+    }
+  };
+
+  return (
+    <div className="profile-viewer__buttons">
+      <Button variant="primary" onClick={openDM} disabled={isCreatingDM}>
+        {isCreatingDM ? 'Creating room...' : 'Message'}
+      </Button>
+      {isBanned && canIKick && (
+        <Button variant="positive" onClick={() => mx.unban(roomId, userId)}>
+          Unban
+        </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'}
+        onClick={toggleIgnore}
+        disabled={isIgnoring}
+      >
+        {isUserIgnored
+          ? `${isIgnoring ? 'Unignoring...' : 'Unignore'}`
+          : `${isIgnoring ? 'Ignoring...' : 'Ignore'}`}
+      </Button>
+    </div>
+  );
+}
+ProfileFooter.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+function useToggleDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [roomId, setRoomId] = useState(null);
+  const [userId, setUserId] = useState(null);
+
+  useEffect(() => {
+    const loadProfile = (uId, rId) => {
+      setIsOpen(true);
+      setUserId(uId);
+      setRoomId(rId);
+    };
+    navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+    return () => {
+      navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+    };
+  }, []);
+
+  const closeDialog = () => setIsOpen(false);
+
+  const afterClose = () => {
+    setUserId(null);
+    setRoomId(null);
+  };
+
+  return [isOpen, roomId, userId, closeDialog, afterClose];
+}
+
+function useRerenderOnProfileChange(roomId, userId) {
+  const mx = useMatrixClient();
+  const [, forceUpdate] = useForceUpdate();
+  useEffect(() => {
+    const handleProfileChange = (mEvent, member) => {
+      if (
+        mEvent.getRoomId() === roomId &&
+        (member.userId === userId || member.userId === mx.getUserId())
+      ) {
+        forceUpdate();
+      }
+    };
+    mx.on('RoomMember.powerLevel', handleProfileChange);
+    mx.on('RoomMember.membership', handleProfileChange);
+    return () => {
+      mx.removeListener('RoomMember.powerLevel', handleProfileChange);
+      mx.removeListener('RoomMember.membership', handleProfileChange);
+    };
+  }, [mx, roomId, userId]);
+}
+
+function ProfileViewer() {
+  const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
+  useRerenderOnProfileChange(roomId, userId);
+  const useAuthentication = useMediaAuthentication();
+
+  const mx = useMatrixClient();
+  const room = mx.getRoom(roomId);
+
+  const renderProfile = () => {
+    const roomMember = room.getMember(userId);
+    const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(mx, userId);
+    const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
+    const avatarUrl =
+      avatarMxc && avatarMxc !== 'null'
+        ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop', undefined, undefined, useAuthentication)
+        : null;
+
+    const powerLevel = roomMember?.powerLevel || 0;
+    const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+
+    const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
+    const canChangeRole =
+      roomState?.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 isSharedPower = newPowerLevel === myPowerLevel;
+      const isDemotingMyself = userId === mx.getUserId();
+      if (isSharedPower || isDemotingMyself) {
+        const isConfirmed = await confirmDialog(
+          'Change power level',
+          isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG,
+          'Change',
+          'caution'
+        );
+        if (!isConfirmed) return;
+        roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
+      } else {
+        roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
+      }
+    };
+
+    const handlePowerSelector = (e) => {
+      openReusableContextMenu('bottom', getEventCords(e, '.btn-surface'), (closeMenu) => (
+        <PowerLevelSelector
+          value={powerLevel}
+          max={myPowerLevel}
+          onSelect={(pl) => {
+            closeMenu();
+            handleChangePowerLevel(pl);
+          }}
+        />
+      ));
+    };
+
+    return (
+      <div className="profile-viewer">
+        <div className="profile-viewer__user">
+          <Avatar imageSrc={avatarUrl} text={username} bgColor={colorMXID(userId)} size="large" />
+          <div className="profile-viewer__user__info">
+            <Text variant="s1" weight="medium">
+              {username}
+            </Text>
+            <Text variant="b2">{userId}</Text>
+          </div>
+          <div className="profile-viewer__user__role">
+            <Text variant="b3">Role</Text>
+            <Button
+              onClick={canChangeRole ? handlePowerSelector : null}
+              iconSrc={canChangeRole ? ChevronBottomIC : null}
+            >
+              {`${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} />
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog
+      className="profile-viewer__dialog"
+      isOpen={isOpen}
+      title={room?.name ?? ''}
+      onAfterClose={handleAfterClose}
+      onRequestClose={closeDialog}
+      contentOptions={<IconButton src={CrossIC} onClick={closeDialog} tooltip="Close" />}
+    >
+      {roomId ? renderProfile() : <div />}
+    </Dialog>
+  );
+}
+
+export default ProfileViewer;
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.scss b/src/app/organisms/profile-viewer/ProfileViewer.scss
new file mode 100644
index 00000000..1401b777
--- /dev/null
+++ b/src/app/organisms/profile-viewer/ProfileViewer.scss
@@ -0,0 +1,110 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.profile-viewer__dialog {
+  & .dialog__content__wrapper {
+    position: relative;
+  }
+  & .dialog__content-container {
+    padding-top: var(--sp-normal);
+    padding-bottom: 89px;
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+  }
+}
+
+.profile-viewer {
+  &__user {
+    display: flex;
+    padding-bottom: var(--sp-normal);
+
+    &__info {
+      align-self: flex-end;
+      flex: 1;
+      min-width: 0;
+
+      margin: 0 var(--sp-normal);
+
+      & .text {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+    }
+    &__role {
+      align-self: flex-end;
+      & > .text {
+        margin-bottom: var(--sp-ultra-tight);
+      }
+    }
+  }
+  
+  & .session-info {
+    margin-top: var(--sp-normal);
+  }
+
+  &__buttons {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    
+    width: 100%;
+    padding: var(--sp-normal);
+    background-color: var(--bg-surface);
+    border-top: 1px solid var(--bg-surface-border);
+    display: flex;
+
+    & > *:nth-child(2n) {
+      margin: 0 var(--sp-normal)
+    }
+    & > *:last-child {
+      @include dir.side(margin, auto, 0);
+    }
+  }
+}
+
+.profile-viewer__admin-tool {
+  .setting-tile {
+    margin-top: var(--sp-loose);
+  }
+}
+
+.moderation-tools {
+  & > form {
+    margin: var(--sp-normal) 0;
+    display: flex;
+    align-items: flex-end;
+    & .input-container {
+      @extend .cp-fx__item-one;
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+    & button {
+      height: 46px;
+    }
+  }
+}
+
+.session-info {
+  box-shadow: var(--bs-surface-border);
+  border-radius: var(--bo-radius);
+  overflow: hidden;
+
+  & .context-menu__item button {
+    padding: var(--sp-extra-tight);
+    & .ic-raw {
+      @include dir.side(margin, 0, var(--sp-extra-tight));
+    }
+  }
+  
+  &__chips {
+    border-top: 1px solid var(--bg-surface-border);
+    padding: var(--sp-tight);
+    padding-top: var(--sp-ultra-tight);
+
+    & > .text {
+      margin-top: var(--sp-extra-tight);
+    }
+    & .chip {
+      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/pw/Dialogs.jsx b/src/app/organisms/pw/Dialogs.jsx
new file mode 100644
index 00000000..7fb18daa
--- /dev/null
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import ProfileViewer from '../profile-viewer/ProfileViewer';
+import SpaceAddExisting from '../../molecules/space-add-existing/SpaceAddExisting';
+import Search from '../search/Search';
+import CreateRoom from '../create-room/CreateRoom';
+import JoinAlias from '../join-alias/JoinAlias';
+
+import ReusableDialog from '../../molecules/dialog/ReusableDialog';
+
+function Dialogs() {
+  return (
+    <>
+      <ProfileViewer />
+      <CreateRoom />
+      <JoinAlias />
+      <SpaceAddExisting />
+      <Search />
+
+      <ReusableDialog />
+    </>
+  );
+}
+
+export default Dialogs;
diff --git a/src/app/organisms/pw/Windows.jsx b/src/app/organisms/pw/Windows.jsx
new file mode 100644
index 00000000..77452d15
--- /dev/null
+++ b/src/app/organisms/pw/Windows.jsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import InviteUser from '../invite-user/InviteUser';
+
+function Windows() {
+  const [inviteUser, changeInviteUser] = useState({
+    isOpen: false,
+    roomId: undefined,
+    term: undefined,
+  });
+
+  function openInviteUser(roomId, searchTerm) {
+    changeInviteUser({
+      isOpen: true,
+      roomId,
+      searchTerm,
+    });
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
+    return () => {
+      navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
+    };
+  }, []);
+
+  return (
+    <InviteUser
+      isOpen={inviteUser.isOpen}
+      roomId={inviteUser.roomId}
+      searchTerm={inviteUser.searchTerm}
+      onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
+    />
+  );
+}
+
+export default Windows;
diff --git a/src/app/organisms/search/Search.jsx b/src/app/organisms/search/Search.jsx
new file mode 100644
index 00000000..ebdac396
--- /dev/null
+++ b/src/app/organisms/search/Search.jsx
@@ -0,0 +1,265 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useAtomValue } from 'jotai';
+import './Search.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import AsyncSearch from '../../../util/AsyncSearch';
+import { joinRuleToIconSrc } from '../../../util/matrixUtil';
+
+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 { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
+import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+import { mDirectAtom } from '../../state/mDirectList';
+import { useKeyDown } from '../../hooks/useKeyDown';
+import { openSearch } from '../../../client/action/navigation';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { factoryRoomIdByActivity } from '../../utils/sort';
+
+function useVisiblityToggle(setResult) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleSearchOpen = (term) => {
+      setResult({
+        term,
+        chunk: [],
+      });
+      setIsOpen(true);
+    };
+    navigation.on(cons.events.navigation.SEARCH_OPENED, handleSearchOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.SEARCH_OPENED, handleSearchOpen);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen === false) {
+      setResult(undefined);
+    }
+  }, [isOpen]);
+
+  useKeyDown(
+    window,
+    useCallback((event) => {
+      // Ctrl/Cmd +
+      if (event.ctrlKey || event.metaKey) {
+        // open search modal
+        if (event.key === 'k') {
+          event.preventDefault();
+          // means some menu or modal window is open
+          if (
+            document.body.lastChild.className !== 'ReactModalPortal' ||
+            navigation.isRawModalVisible
+          ) {
+            return;
+          }
+          openSearch();
+        }
+      }
+    }, [])
+  );
+
+  const requestClose = () => setIsOpen(false);
+
+  return [isOpen, requestClose];
+}
+
+function mapRoomIds(mx, roomIds, directs, roomIdToParents) {
+  return roomIds.map((roomId) => {
+    const room = mx.getRoom(roomId);
+    const parentSet = roomIdToParents.get(roomId);
+    const parentNames = parentSet ? [] : undefined;
+    parentSet?.forEach((parentId) => parentNames.push(mx.getRoom(parentId).name));
+
+    const parents = parentNames ? parentNames.join(', ') : null;
+
+    let type = 'room';
+    if (room.isSpaceRoom()) type = 'space';
+    else if (directs.includes(roomId)) type = 'direct';
+
+    return {
+      type,
+      name: room.name,
+      parents,
+      roomId,
+      room,
+    };
+  });
+}
+
+function Search() {
+  const [result, setResult] = useState(null);
+  const [asyncSearch] = useState(new AsyncSearch());
+  const [isOpen, requestClose] = useVisiblityToggle(setResult);
+  const searchRef = useRef(null);
+  const mx = useMatrixClient();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const mDirects = useAtomValue(mDirectAtom);
+  const spaces = useSpaces(mx, allRoomsAtom);
+  const rooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(mx, allRoomsAtom, mDirects);
+  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const roomToParents = useAtomValue(roomToParentsAtom);
+
+  const handleSearchResults = (chunk, term) => {
+    setResult({
+      term,
+      chunk,
+    });
+  };
+
+  const generateResults = (term) => {
+    const prefix = term.match(/^[#@*]/)?.[0];
+
+    if (term.length > 1) {
+      asyncSearch.search(prefix ? term.slice(1) : term);
+      return;
+    }
+
+    let ids = null;
+
+    if (prefix) {
+      if (prefix === '#') ids = [...rooms];
+      else if (prefix === '@') ids = [...directs];
+      else ids = [...spaces];
+    } else {
+      ids = [...rooms].concat([...directs], [...spaces]);
+    }
+
+    ids.sort(factoryRoomIdByActivity(mx));
+    const mappedIds = mapRoomIds(mx, ids, directs, roomToParents);
+    asyncSearch.setup(mappedIds, { keys: 'name', isContain: true, limit: 20 });
+    if (prefix) handleSearchResults(mappedIds, prefix);
+    else asyncSearch.search(term);
+  };
+
+  const loadRecentRooms = () => {
+    const recentRooms = [];
+    handleSearchResults(mapRoomIds(mx, recentRooms, directs, roomToParents).reverse());
+  };
+
+  const handleAfterOpen = () => {
+    searchRef.current.focus();
+    loadRecentRooms();
+    asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchResults);
+
+    if (typeof result.term === 'string') {
+      generateResults(result.term);
+      searchRef.current.value = result.term;
+    }
+  };
+
+  const handleAfterClose = () => {
+    asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchResults);
+  };
+
+  const handleOnChange = () => {
+    const { value } = searchRef.current;
+    if (value.length === 0) {
+      loadRecentRooms();
+      return;
+    }
+    generateResults(value);
+  };
+
+  const handleCross = (e) => {
+    e.preventDefault();
+    const { value } = searchRef.current;
+    if (value.length === 0) requestClose();
+    else {
+      searchRef.current.value = '';
+      searchRef.current.focus();
+      loadRecentRooms();
+    }
+  };
+
+  const openItem = (roomId, type) => {
+    if (type === 'space') navigateSpace(roomId);
+    else navigateRoom(roomId);
+    requestClose();
+  };
+
+  const openFirstResult = () => {
+    const { chunk } = result;
+    if (chunk?.length > 0) {
+      const item = chunk[0];
+      openItem(item.roomId, item.type);
+    }
+  };
+
+  const renderRoomSelector = (item) => {
+    let imageSrc = null;
+    let iconSrc = 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');
+    }
+
+    return (
+      <RoomSelector
+        key={item.roomId}
+        name={item.name}
+        parentName={item.parents}
+        roomId={item.roomId}
+        imageSrc={imageSrc}
+        iconSrc={iconSrc}
+        isUnread={roomToUnread.has(item.roomId)}
+        notificationCount={roomToUnread.get(item.roomId)?.total ?? 0}
+        isAlert={roomToUnread.get(item.roomId)?.highlight > 0}
+        onClick={() => openItem(item.roomId, item.type)}
+      />
+    );
+  };
+
+  return (
+    <RawModal
+      className="search-dialog__modal dialog-modal"
+      isOpen={isOpen}
+      onAfterOpen={handleAfterOpen}
+      onAfterClose={handleAfterClose}
+      onRequestClose={requestClose}
+      size="small"
+    >
+      <div className="search-dialog">
+        <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} />
+        </form>
+        <div className="search-dialog__content-wrapper">
+          <ScrollView autoHide>
+            <div className="search-dialog__content">
+              {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>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+export default Search;
diff --git a/src/app/organisms/search/Search.scss b/src/app/organisms/search/Search.scss
new file mode 100644
index 00000000..3612d742
--- /dev/null
+++ b/src/app/organisms/search/Search.scss
@@ -0,0 +1,80 @@
+@use '../../partials/dir';
+
+.search-dialog__modal {
+  --modal-height: 380px;
+  height: 100%;
+  background-color: var(--bg-surface);
+}
+
+.search-dialog {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  &__input {
+    padding: var(--sp-normal);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    & > .ic-raw {
+      position: absolute;
+      --away: calc(var(--sp-normal) + var(--sp-tight));
+      @include dir.prop(left, var(--away), unset);
+      @include dir.prop(right, unset, var(--away));
+    }
+    & > .ic-btn {
+      border-radius: calc(var(--bo-radius) / 2);
+      position: absolute;
+      --away: calc(var(--sp-normal) + var(--sp-extra-tight));
+      @include dir.prop(right, var(--away), unset);
+      @include dir.prop(left, unset, var(--away));
+    }
+    & .input-container {
+      min-width: 0;
+      flex: 1;
+    }
+
+    & input {
+      padding-left: 40px;
+      padding-right: 40px;
+      font-size: var(--fs-s1);
+      letter-spacing: var(--ls-s1);
+      line-height: var(--lh-s1);
+      color: var(--tc-surface-high);
+    }
+  }
+  &__content-wrapper {
+    min-height: 0;
+    flex: 1;
+    position: relative;
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      z-index: 99;
+      content: "";
+      display: inline-block;
+      width: 100%;
+      height: 8px;
+      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));
+    }
+  }
+
+  &__content {
+    padding: 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/pages/App.tsx b/src/app/pages/App.tsx
index 935790ac..b16462df 100644
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Provider as JotaiProvider } from 'jotai';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -13,19 +13,9 @@ import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
 
 const queryClient = new QueryClient();
 
-const useLastNodeToDetectReactPortalEntry = () => {
-  useEffect(() => {
-    const lastDiv = document.createElement('div');
-    lastDiv.setAttribute('data-last-node', 'true');
-    document.body.appendChild(lastDiv);
-  }, []);
-};
-
 function App() {
   const screenSize = useScreenSize();
 
-  useLastNodeToDetectReactPortalEntry();
-
   return (
     <ScreenSizeProvider value={screenSize}>
       <FeatureCheck>
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 18591f29..247885c0 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -30,6 +30,7 @@ import {
   _SERVER_PATH,
   CREATE_PATH,
 } from './paths';
+import { isAuthenticated } from '../../client/state/auth';
 import {
   getAppPathFromHref,
   getExploreFeaturedPath,
@@ -66,8 +67,6 @@ import { CreateRoomModalRenderer } from '../features/create-room';
 import { HomeCreateRoom } from './client/home/CreateRoom';
 import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
-import { SearchModalRenderer } from '../features/search';
-import { getFallbackSession } from '../state/sessions';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -78,7 +77,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
       <Route
         index
         loader={() => {
-          if (getFallbackSession()) return redirect(getHomePath());
+          if (isAuthenticated()) return redirect(getHomePath());
           const afterLoginPath = getAppPathFromHref(getOriginBaseUrl(), window.location.href);
           if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
           return redirect(getLoginPath());
@@ -86,7 +85,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
       />
       <Route
         loader={() => {
-          if (getFallbackSession()) {
+          if (isAuthenticated()) {
             return redirect(getHomePath());
           }
 
@@ -106,7 +105,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
 
       <Route
         loader={() => {
-          if (!getFallbackSession()) {
+          if (!isAuthenticated()) {
             const afterLoginPath = getAppPathFromHref(
               getOriginBaseUrl(hashRouter),
               window.location.href
@@ -132,7 +131,6 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                       >
                         <Outlet />
                       </ClientLayout>
-                      <SearchModalRenderer />
                       <UserRoomProfileRenderer />
                       <CreateRoomModalRenderer />
                       <CreateSpaceModalRenderer />
diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
index 69d50cdb..7e6039a8 100644
--- a/src/app/pages/ThemeManager.tsx
+++ b/src/app/pages/ThemeManager.tsx
@@ -8,8 +8,6 @@ import {
   useActiveTheme,
   useSystemThemeKind,
 } from '../hooks/useTheme';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
 
 export function UnAuthRouteThemeManager() {
   const systemThemeKind = useSystemThemeKind();
@@ -30,20 +28,13 @@ export function UnAuthRouteThemeManager() {
 
 export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
   const activeTheme = useActiveTheme();
-  const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
 
   useEffect(() => {
     document.body.className = '';
     document.body.classList.add(configClass, varsClass);
 
     document.body.classList.add(...activeTheme.classNames);
-
-    if (monochromeMode) {
-      document.body.style.filter = 'grayscale(1)';
-    } else {
-      document.body.style.filter = '';
-    }
-  }, [activeTheme, monochromeMode]);
+  }, [activeTheme]);
 
   return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
 }
diff --git a/src/app/pages/auth/AuthFooter.tsx b/src/app/pages/auth/AuthFooter.tsx
index 25c70e6e..53191f33 100644
--- a/src/app/pages/auth/AuthFooter.tsx
+++ b/src/app/pages/auth/AuthFooter.tsx
@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.10.0
+        v4.9.1
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
index 62f46dd2..90c305d0 100644
--- a/src/app/pages/auth/login/PasswordLoginForm.tsx
+++ b/src/app/pages/auth/login/PasswordLoginForm.tsx
@@ -72,19 +72,19 @@ function UsernameHint({ server }: { server: string }) {
                 <Text as="span" size="Inherit" priority="300">
                   Username:
                 </Text>{' '}
-                user123
+                johndoe
               </Text>
               <Text size="T300">
                 <Text as="span" size="Inherit" priority="300">
                   Matrix ID:
                 </Text>
-                {` @user123:${server}`}
+                {` @johndoe:${server}`}
               </Text>
               <Text size="T300">
                 <Text as="span" size="Inherit" priority="300">
                   Email:
                 </Text>
-                {` user123@${server}`}
+                {` johndoe@${server}`}
               </Text>
             </Box>
           </Menu>
diff --git a/src/app/pages/auth/login/loginUtil.ts b/src/app/pages/auth/login/loginUtil.ts
index ba5b0bc9..7e1c7153 100644
--- a/src/app/pages/auth/login/loginUtil.ts
+++ b/src/app/pages/auth/login/loginUtil.ts
@@ -4,13 +4,13 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ClientConfig, clientAllowedServer } from '../../../hooks/useClientConfig';
 import { autoDiscovery, specVersions } from '../../../cs-api';
+import { updateLocalStore } from '../../../../client/action/auth';
 import { ErrorCode } from '../../../cs-errorcode';
 import {
   deleteAfterLoginRedirectPath,
   getAfterLoginRedirectPath,
 } from '../../afterLoginRedirectPath';
 import { getHomePath } from '../../pathUtils';
-import { setFallbackSession } from '../../../state/sessions';
 
 export enum GetBaseUrlError {
   NotAllow = 'NotAllow',
@@ -114,7 +114,7 @@ export const useLoginComplete = (data?: CustomLoginResponse) => {
   useEffect(() => {
     if (data) {
       const { response: loginRes, baseUrl: loginBaseUrl } = data;
-      setFallbackSession(loginRes.access_token, loginRes.device_id, loginRes.user_id, loginBaseUrl);
+      updateLocalStore(loginRes.access_token, loginRes.device_id, loginRes.user_id, loginBaseUrl);
       const afterLoginRedirectUrl = getAfterLoginRedirectPath();
       deleteAfterLoginRedirectPath();
       navigate(afterLoginRedirectUrl ?? getHomePath(), { replace: true });
diff --git a/src/app/pages/auth/register/registerUtil.ts b/src/app/pages/auth/register/registerUtil.ts
index 86a38cb5..e8145780 100644
--- a/src/app/pages/auth/register/registerUtil.ts
+++ b/src/app/pages/auth/register/registerUtil.ts
@@ -8,6 +8,7 @@ import {
 } from 'matrix-js-sdk';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { updateLocalStore } from '../../../../client/action/auth';
 import { LoginPathSearchParams } from '../../paths';
 import { ErrorCode } from '../../../cs-errorcode';
 import {
@@ -16,7 +17,6 @@ import {
 } from '../../afterLoginRedirectPath';
 import { getHomePath, getLoginPath, withSearchParam } from '../../pathUtils';
 import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
-import { setFallbackSession } from '../../../state/sessions';
 
 export enum RegisterError {
   UserTaken = 'UserTaken',
@@ -119,7 +119,7 @@ export const useRegisterComplete = (data?: CustomRegisterResponse) => {
       const deviceId = response.device_id;
 
       if (accessToken && deviceId) {
-        setFallbackSession(accessToken, deviceId, userId, baseUrl);
+        updateLocalStore(accessToken, deviceId, userId, baseUrl);
         const afterLoginRedirectPath = getAfterLoginRedirectPath();
         deleteAfterLoginRedirectPath();
         navigate(afterLoginRedirectPath ?? getHomePath(), { replace: true });
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index e1a5dc0c..c48dbf53 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -23,18 +23,21 @@ import {
   logoutClient,
   startClient,
 } from '../../../client/initMatrix';
+import { getSecret } from '../../../client/state/auth';
 import { SplashScreen } from '../../components/splash-screen';
 import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
 import { MediaConfigProvider } from '../../hooks/useMediaConfig';
 import { MatrixClientProvider } from '../../hooks/useMatrixClient';
 import { SpecVersions } from './SpecVersions';
+import Windows from '../../organisms/pw/Windows';
+import Dialogs from '../../organisms/pw/Dialogs';
+import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
-import { getFallbackSession } from '../../state/sessions';
 
 function ClientRootLoading() {
   return (
@@ -143,16 +146,10 @@ type ClientRootProps = {
 };
 export function ClientRoot({ children }: ClientRootProps) {
   const [loading, setLoading] = useState(true);
-  const { baseUrl } = getFallbackSession() ?? {};
+  const { baseUrl } = getSecret();
 
   const [loadState, loadMatrix] = useAsyncCallback<MatrixClient, Error, []>(
-    useCallback(() => {
-      const session = getFallbackSession();
-      if (!session) {
-        throw new Error('No session Found!');
-      }
-      return initClient(session);
-    }, [])
+    useCallback(() => initClient(getSecret() as any), [])
   );
   const mx = loadState.status === AsyncStatus.Success ? loadState.data : undefined;
   const [startState, startMatrix] = useAsyncCallback<void, Error, [MatrixClient]>(
@@ -217,6 +214,9 @@ export function ClientRoot({ children }: ClientRootProps) {
                 <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
                   <AuthMetadataProvider value={serverConfigs.authMetadata}>
                     {children}
+                    <Windows />
+                    <Dialogs />
+                    <ReusableContextMenu />
                   </AuthMetadataProvider>
                 </MediaConfigProvider>
               </CapabilitiesProvider>
diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index a2e1b682..6139f1fe 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -1,11 +1,14 @@
 import React, { useRef } from 'react';
-import { Scroll } from 'folds';
+import { Icon, Icons, Scroll } from 'folds';
 
 import {
   Sidebar,
   SidebarContent,
   SidebarStackSeparator,
   SidebarStack,
+  SidebarAvatar,
+  SidebarItemTooltip,
+  SidebarItem,
 } from '../../components/sidebar';
 import {
   DirectTab,
@@ -15,8 +18,8 @@ import {
   ExploreTab,
   SettingsTab,
   UnverifiedTab,
-  SearchTab,
 } from './sidebar';
+import { openSearch } from '../../../client/action/navigation';
 import { CreateTab } from './sidebar/CreateTab';
 
 export function SidebarNav() {
@@ -43,8 +46,23 @@ export function SidebarNav() {
           <>
             <SidebarStackSeparator />
             <SidebarStack>
-              <SearchTab />
+              <SidebarItem>
+                <SidebarItemTooltip tooltip="Search">
+                  {(triggerRef) => (
+                    <SidebarAvatar
+                      as="button"
+                      ref={triggerRef}
+                      outlined
+                      onClick={() => openSearch()}
+                    >
+                      <Icon src={Icons.Search} />
+                    </SidebarAvatar>
+                  )}
+                </SidebarItemTooltip>
+              </SidebarItem>
+
               <UnverifiedTab />
+
               <InboxTab />
               <SettingsTab />
             </SidebarStack>
diff --git a/src/app/pages/client/WelcomePage.tsx b/src/app/pages/client/WelcomePage.tsx
index 37ca10fa..55456855 100644
--- a/src/app/pages/client/WelcomePage.tsx
+++ b/src/app/pages/client/WelcomePage.tsx
@@ -24,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.10.0
+                  v4.9.1
                 </a>
               </span>
             }
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 04edf109..b6a8de1a 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -17,7 +17,6 @@ import {
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
-import { useNavigate } from 'react-router-dom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { factoryRoomIdByActivity } from '../../../utils/sort';
 import {
@@ -29,7 +28,7 @@ import {
   NavItem,
   NavItemContent,
 } from '../../../components/nav';
-import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
+import { getDirectRoomPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -39,10 +38,11 @@ import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { useDirectRooms } from './useDirectRooms';
+import { openInviteUser } from '../../../../client/action/navigation';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { useRoomsUnread } from '../../../state/hooks/unread';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
@@ -50,7 +50,6 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
-import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -139,8 +138,6 @@ function DirectHeader() {
 }
 
 function DirectEmpty() {
-  const navigate = useNavigate();
-
   return (
     <NavEmptyCenter>
       <NavEmptyLayout
@@ -156,7 +153,7 @@ function DirectEmpty() {
           </Text>
         }
         options={
-          <Button variant="Secondary" size="300" onClick={() => navigate(getDirectCreatePath())}>
+          <Button variant="Secondary" size="300" onClick={() => openInviteUser()}>
             <Text size="B300" truncate>
               Direct Message
             </Text>
@@ -175,9 +172,6 @@ export function Direct() {
   const directs = useDirectRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
-  const navigate = useNavigate();
-
-  const createDirectSelected = useDirectCreateSelected();
 
   const selectedRoomId = useSelectedRoom();
   const noRoomToDisplay = directs.length === 0;
@@ -211,8 +205,8 @@ export function Direct() {
         <PageNavContent scrollRef={scrollRef}>
           <Box direction="Column" gap="300">
             <NavCategory>
-              <NavItem variant="Background" radii="400" aria-selected={createDirectSelected}>
-                <NavButton onClick={() => navigate(getDirectCreatePath())}>
+              <NavItem variant="Background" radii="400">
+                <NavButton onClick={() => openInviteUser()}>
                   <NavItemContent>
                     <Box as="span" grow="Yes" alignItems="Center" gap="200">
                       <Avatar size="200" radii="400">
diff --git a/src/app/pages/client/direct/DirectCreate.tsx b/src/app/pages/client/direct/DirectCreate.tsx
index 3deb0b6d..3affb9c1 100644
--- a/src/app/pages/client/direct/DirectCreate.tsx
+++ b/src/app/pages/client/direct/DirectCreate.tsx
@@ -1,75 +1,33 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
+import { WelcomePage } from '../WelcomePage';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getDirectCreateSearchParams } from '../../pathSearchParam';
-import { getDirectRoomPath } from '../../pathUtils';
+import { getDirectPath, getDirectRoomPath } from '../../pathUtils';
 import { getDMRoomFor } from '../../../utils/matrix';
+import { openInviteUser } from '../../../../client/action/navigation';
 import { useDirectRooms } from './useDirectRooms';
-import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
-import {
-  Page,
-  PageContent,
-  PageContentCenter,
-  PageHeader,
-  PageHero,
-  PageHeroSection,
-} from '../../../components/page';
-import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { CreateChat } from '../../../features/create-chat';
 
 export function DirectCreate() {
   const mx = useMatrixClient();
-  const screenSize = useScreenSizeContext();
-
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { userId } = getDirectCreateSearchParams(searchParams);
-
   const directs = useDirectRooms();
 
   useEffect(() => {
     if (userId) {
-      const roomId = getDMRoomFor(mx, userId)?.roomId;
+      const room = getDMRoomFor(mx, userId);
+      const { roomId } = room ?? {};
       if (roomId && directs.includes(roomId)) {
         navigate(getDirectRoomPath(roomId), { replace: true });
+      } else {
+        openInviteUser(undefined, userId);
       }
+    } else {
+      navigate(getDirectPath(), { replace: true });
     }
   }, [mx, navigate, directs, userId]);
 
-  return (
-    <Page>
-      {screenSize === ScreenSize.Mobile && (
-        <PageHeader balance outlined={false}>
-          <Box grow="Yes" alignItems="Center" gap="200">
-            <BackRouteHandler>
-              {(onBack) => (
-                <IconButton onClick={onBack}>
-                  <Icon src={Icons.ArrowLeft} />
-                </IconButton>
-              )}
-            </BackRouteHandler>
-          </Box>
-        </PageHeader>
-      )}
-      <Box grow="Yes">
-        <Scroll hideTrack visibility="Hover">
-          <PageContent>
-            <PageContentCenter>
-              <PageHeroSection>
-                <Box direction="Column" gap="700">
-                  <PageHero
-                    icon={<Icon size="600" src={Icons.Mention} />}
-                    title="Create Chat"
-                    subTitle="Start a private, encrypted chat by entering a user ID."
-                  />
-                  <CreateChat defaultUserId={userId} />
-                </Box>
-              </PageHeroSection>
-            </PageContentCenter>
-          </PageContent>
-        </Scroll>
-      </Box>
-    </Page>
-  );
+  return <WelcomePage />;
 }
diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx
index fddd75aa..20c01bae 100644
--- a/src/app/pages/client/home/CreateRoom.tsx
+++ b/src/app/pages/client/home/CreateRoom.tsx
@@ -42,7 +42,7 @@ export function HomeCreateRoom() {
                   <PageHero
                     icon={<Icon size="600" src={Icons.Hash} />}
                     title="Create Room"
-                    subTitle="Build a Room for Real-Time Conversations."
+                    subTitle="Build a Room for Real-Time Conversations"
                   />
                   <CreateRoomForm onCreate={navigateRoom} />
                 </Box>
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index d87db963..2597bb73 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -53,7 +53,7 @@ import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
 import { useRoomsUnread } from '../../../state/hooks/unread';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index 20518e56..bd9b694d 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -81,7 +81,6 @@ type InviteData = {
   senderId: string;
   senderName: string;
   inviteTs?: number;
-  reason?: string;
 
   isSpace: boolean;
   isDirect: boolean;
@@ -103,17 +102,11 @@ const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean
   const member = room.getMember(userId);
   const memberEvent = member?.events.member;
 
-  const content = memberEvent?.getContent();
   const senderId = memberEvent?.getSender();
-
   const senderName = senderId
     ? getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId
     : undefined;
-  const inviteTs = memberEvent?.getTs();
-  const reason =
-    content && 'reason' in content && typeof content.reason === 'string'
-      ? content.reason
-      : undefined;
+  const inviteTs = memberEvent?.getTs() ?? 0;
 
   return {
     room,
@@ -126,7 +119,6 @@ const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean
     senderId: senderId ?? 'Unknown',
     senderName: senderName ?? 'Unknown',
     inviteTs,
-    reason,
 
     isSpace: isSpace(room),
     isDirect: direct,
@@ -138,8 +130,7 @@ const hasBadWords = (invite: InviteData): boolean =>
   testBadWords(invite.roomName) ||
   testBadWords(invite.roomTopic ?? '') ||
   testBadWords(invite.senderName) ||
-  testBadWords(invite.senderId) ||
-  testBadWords(invite.reason || '');
+  testBadWords(invite.senderId);
 
 type NavigateHandler = (roomId: string, space: boolean) => void;
 
@@ -193,7 +184,7 @@ function InviteCard({
       variant="SurfaceVariant"
       direction="Column"
       gap="300"
-      style={{ padding: config.space.S400 }}
+      style={{ padding: `${config.space.S400} ${config.space.S400} ${config.space.S200}` }}
     >
       {(invite.isEncrypted || invite.isDirect || invite.isSpace) && (
         <Box gap="200" alignItems="Center">
@@ -307,29 +298,22 @@ function InviteCard({
           </Box>
         </Box>
       </Box>
-      <Box direction="Column">
-        <Box gap="200" alignItems="Baseline">
-          <Box grow="Yes">
-            <Text size="T200" priority="300">
-              From: <b>{invite.senderId}</b>
-            </Text>
-          </Box>
-          {typeof invite.inviteTs === 'number' && invite.inviteTs !== 0 && (
-            <Box shrink="No">
-              <Time
-                size="T200"
-                ts={invite.inviteTs}
-                hour24Clock={hour24Clock}
-                dateFormatString={dateFormatString}
-                priority="300"
-              />
-            </Box>
-          )}
-        </Box>
-        {invite.reason && (
+      <Box gap="200" alignItems="Baseline">
+        <Box grow="Yes">
           <Text size="T200" priority="300">
-            Reason: {invite.reason}
+            From: <b>{invite.senderId}</b>
           </Text>
+        </Box>
+        {invite.inviteTs && (
+          <Box shrink="No">
+            <Time
+              size="T200"
+              ts={invite.inviteTs}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+              priority="300"
+            />
+          </Box>
         )}
       </Box>
     </SequenceCard>
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 4cc94d91..afdfec6d 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -73,7 +73,7 @@ import * as customHtmlCss from '../../../styles/CustomHtml.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useRoomUnread } from '../../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { VirtualTile } from '../../../components/virtualizer';
 import { UserAvatar } from '../../../components/user-avatar';
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index dcd44e2f..bd8090d3 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -21,7 +21,7 @@ import { UnreadBadge } from '../../../components/unread-badge';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useDirectRooms } from '../direct/useDirectRooms';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index 778b729e..c8a80280 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -22,7 +22,7 @@ import { UnreadBadge } from '../../../components/unread-badge';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useHomeRooms } from '../home/useHomeRooms';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
diff --git a/src/app/pages/client/sidebar/SearchTab.tsx b/src/app/pages/client/sidebar/SearchTab.tsx
deleted file mode 100644
index 7ceb5c49..00000000
--- a/src/app/pages/client/sidebar/SearchTab.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Icon, Icons } from 'folds';
-import { useAtom } from 'jotai';
-import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
-import { searchModalAtom } from '../../../state/searchModal';
-
-export function SearchTab() {
-  const [opened, setOpen] = useAtom(searchModalAtom);
-
-  const open = () => setOpen(true);
-
-  return (
-    <SidebarItem active={opened}>
-      <SidebarItemTooltip tooltip="Search">
-        {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={open}>
-            <Icon src={Icons.Search} filled={opened} />
-          </SidebarAvatar>
-        )}
-      </SidebarItemTooltip>
-    </SidebarItem>
-  );
-}
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 6fc528a1..3ee6c725 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -80,8 +80,9 @@ import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFo
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { copyToClipboard } from '../../../utils/dom';
+import { openInviteUser } from '../../../../client/action/navigation';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -92,7 +93,6 @@ import { settingsAtom } from '../../../state/settings';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { InviteUserPrompt } from '../../../components/invite-user-prompt';
 
 type SpaceMenuProps = {
   room: Room;
@@ -111,8 +111,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openSpaceSettings = useOpenSpaceSettings();
 
-    const [invitePrompt, setInvitePrompt] = useState(false);
-
     const allChild = useSpaceChildren(
       allRoomsAtom,
       room.roomId,
@@ -138,7 +136,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     };
 
     const handleInvite = () => {
-      setInvitePrompt(true);
+      openInviteUser(room.roomId);
+      requestClose();
     };
 
     const handleRoomSettings = () => {
@@ -148,15 +147,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        {invitePrompt && room && (
-          <InviteUserPrompt
-            room={room}
-            requestClose={() => {
-              setInvitePrompt(false);
-              requestClose();
-            }}
-          />
-        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
@@ -191,7 +181,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.UserPlus} />}
             radii="300"
-            aria-pressed={invitePrompt}
             disabled={!canInvite}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/pages/client/sidebar/index.ts b/src/app/pages/client/sidebar/index.ts
index d44cfaa2..6460d1f2 100644
--- a/src/app/pages/client/sidebar/index.ts
+++ b/src/app/pages/client/sidebar/index.ts
@@ -5,4 +5,3 @@ export * from './InboxTab';
 export * from './ExploreTab';
 export * from './SettingsTab';
 export * from './UnverifiedTab';
-export * from './SearchTab';
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 3f60d2a9..a335a0ad 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -57,9 +57,10 @@ import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { openInviteUser } from '../../../../client/action/navigation';
 import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
-import { markAsRead } from '../../../utils/notifications';
+import { markAsRead } from '../../../../client/action/notifications';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
@@ -83,7 +84,6 @@ import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { BreakWord } from '../../../styles/Text.css';
-import { InviteUserPrompt } from '../../../components/invite-user-prompt';
 
 type SpaceMenuProps = {
   room: Room;
@@ -102,8 +102,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const openSpaceSettings = useOpenSpaceSettings();
   const { navigateRoom } = useRoomNavigate();
 
-  const [invitePrompt, setInvitePrompt] = useState(false);
-
   const allChild = useSpaceChildren(
     allRoomsAtom,
     room.roomId,
@@ -124,7 +122,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   };
 
   const handleInvite = () => {
-    setInvitePrompt(true);
+    openInviteUser(room.roomId);
+    requestClose();
   };
 
   const handleRoomSettings = () => {
@@ -140,15 +139,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-        {invitePrompt && room && (
-          <InviteUserPrompt
-            room={room}
-            requestClose={() => {
-              setInvitePrompt(false);
-              requestClose();
-            }}
-          />
-        )}
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
@@ -170,7 +160,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
           size="300"
           after={<Icon size="100" src={Icons.UserPlus} />}
           radii="300"
-          aria-pressed={invitePrompt}
           disabled={!canInvite}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
@@ -271,7 +260,7 @@ function SpaceHeader() {
             </Text>
             {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
           </Box>
-          <Box shrink="No">
+          <Box>
             <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
diff --git a/src/app/partials/_dir.scss b/src/app/partials/_dir.scss
new file mode 100644
index 00000000..b5d4a696
--- /dev/null
+++ b/src/app/partials/_dir.scss
@@ -0,0 +1,26 @@
+/*
+* NOTICE: only use this
+* when sides are un-even
+* if they are even just use $property: 0 $spacing; 
+*/
+
+@mixin side($property, $left, $right) {
+  #{$property}: {
+    left: $left;
+    right: $right;
+  };
+  
+  [dir=rtl] & {
+    #{$property}: {
+      left: $right;
+      right: $left;
+    };
+  }
+}
+
+@mixin prop($property, $ltr, $rtl) {
+  #{$property}: $ltr;
+  [dir=rtl] & {
+    #{$property}: $rtl;
+  }
+}
\ No newline at end of file
diff --git a/src/app/partials/_flex.scss b/src/app/partials/_flex.scss
new file mode 100644
index 00000000..950cd1ed
--- /dev/null
+++ b/src/app/partials/_flex.scss
@@ -0,0 +1,58 @@
+._s-c {
+  justify-content: flex-start;
+  align-items: center;
+}
+._c-c {
+  justify-content: center;
+  align-items: center;
+}
+._e-c {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.cp-fx__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.cp-fx__column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-fx__row--s-c {
+  @extend .cp-fx__row;
+  @extend ._s-c;
+}
+
+.cp-fx__row--c-c {
+  @extend .cp-fx__row;
+  @extend ._c-c;
+}
+
+.cp-fx__row--e-c {
+  @extend .cp-fx__row;
+  @extend ._e-c;
+}
+
+.cp-fx__column--s-c {
+  @extend .cp-fx__column;
+  @extend ._s-c;
+}
+
+.cp-fx__column--c-c {
+  @extend .cp-fx__column;
+  @extend ._c-c;
+}
+
+.cp-fx__column--e-c {
+  @extend .cp-fx__column;
+  @extend ._e-c;
+}
+
+.cp-fx__item-one {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
diff --git a/src/app/partials/_screen.scss b/src/app/partials/_screen.scss
new file mode 100644
index 00000000..99a0907b
--- /dev/null
+++ b/src/app/partials/_screen.scss
@@ -0,0 +1,28 @@
+
+$breakpoint-tablet: 1124px;
+$breakpoint-mobile: 750px;
+
+@mixin smallerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (max-width: $breakpoint-mobile) {
+      @content;
+    }
+  }
+  @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (max-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}
+
+@mixin biggerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (min-width: $breakpoint-mobile) {
+      @content;
+    }
+  } @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (min-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}
diff --git a/src/app/partials/_text.scss b/src/app/partials/_text.scss
new file mode 100644
index 00000000..ab5e2805
--- /dev/null
+++ b/src/app/partials/_text.scss
@@ -0,0 +1,5 @@
+.cp-txt__ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/src/app/state/searchModal.ts b/src/app/state/searchModal.ts
deleted file mode 100644
index 3893e5e3..00000000
--- a/src/app/state/searchModal.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { atom } from 'jotai';
-
-export const searchModalAtom = atom<boolean>(false);
diff --git a/src/app/state/sessions.ts b/src/app/state/sessions.ts
index a9c34ce9..85bcd10e 100644
--- a/src/app/state/sessions.ts
+++ b/src/app/state/sessions.ts
@@ -1,9 +1,9 @@
-// import { atom } from 'jotai';
-// import {
-//   atomWithLocalStorage,
-//   getLocalStorageItem,
-//   setLocalStorageItem,
-// } from './utils/atomWithLocalStorage';
+import { atom } from 'jotai';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
 
 export type Session = {
   baseUrl: string;
@@ -24,29 +24,18 @@ export type SessionStoreName = {
 /**
  * Migration code for old session
  */
-// const FALLBACK_STORE_NAME: SessionStoreName = {
-//   sync: 'web-sync-store',
-//   crypto: 'crypto-store',
-// } as const;
+const FALLBACK_STORE_NAME: SessionStoreName = {
+  sync: 'web-sync-store',
+  crypto: 'crypto-store',
+} as const;
 
-export function setFallbackSession(
-  accessToken: string,
-  deviceId: string,
-  userId: string,
-  baseUrl: string
-) {
-  localStorage.setItem('cinny_access_token', accessToken);
-  localStorage.setItem('cinny_device_id', deviceId);
-  localStorage.setItem('cinny_user_id', userId);
-  localStorage.setItem('cinny_hs_base_url', baseUrl);
-}
-export const removeFallbackSession = () => {
+const removeFallbackSession = () => {
   localStorage.removeItem('cinny_hs_base_url');
   localStorage.removeItem('cinny_user_id');
   localStorage.removeItem('cinny_device_id');
   localStorage.removeItem('cinny_access_token');
 };
-export const getFallbackSession = (): Session | undefined => {
+const getFallbackSession = (): Session | undefined => {
   const baseUrl = localStorage.getItem('cinny_hs_base_url');
   const userId = localStorage.getItem('cinny_user_id');
   const deviceId = localStorage.getItem('cinny_device_id');
@@ -70,71 +59,71 @@ export const getFallbackSession = (): Session | undefined => {
  * End of migration code for old session
  */
 
-// export const getSessionStoreName = (session: Session): SessionStoreName => {
-//   if (session.fallbackSdkStores) {
-//     return FALLBACK_STORE_NAME;
-//   }
+export const getSessionStoreName = (session: Session): SessionStoreName => {
+  if (session.fallbackSdkStores) {
+    return FALLBACK_STORE_NAME;
+  }
 
-//   return {
-//     sync: `sync${session.userId}`,
-//     crypto: `crypto${session.userId}`,
-//   };
-// };
+  return {
+    sync: `sync${session.userId}`,
+    crypto: `crypto${session.userId}`,
+  };
+};
 
-// export const MATRIX_SESSIONS_KEY = 'matrixSessions';
-// const baseSessionsAtom = atomWithLocalStorage<Sessions>(
-//   MATRIX_SESSIONS_KEY,
-//   (key) => {
-//     const defaultSessions: Sessions = [];
-//     const sessions = getLocalStorageItem(key, defaultSessions);
+export const MATRIX_SESSIONS_KEY = 'matrixSessions';
+const baseSessionsAtom = atomWithLocalStorage<Sessions>(
+  MATRIX_SESSIONS_KEY,
+  (key) => {
+    const defaultSessions: Sessions = [];
+    const sessions = getLocalStorageItem(key, defaultSessions);
 
-//     // Before multi account support session was stored
-//     // as multiple item in local storage.
-//     // So we need these migration code.
-//     const fallbackSession = getFallbackSession();
-//     if (fallbackSession) {
-//       removeFallbackSession();
-//       sessions.push(fallbackSession);
-//       setLocalStorageItem(key, sessions);
-//     }
-//     return sessions;
-//   },
-//   (key, value) => {
-//     setLocalStorageItem(key, value);
-//   }
-// );
+    // Before multi account support session was stored
+    // as multiple item in local storage.
+    // So we need these migration code.
+    const fallbackSession = getFallbackSession();
+    if (fallbackSession) {
+      removeFallbackSession();
+      sessions.push(fallbackSession);
+      setLocalStorageItem(key, sessions);
+    }
+    return sessions;
+  },
+  (key, value) => {
+    setLocalStorageItem(key, value);
+  }
+);
 
-// export type SessionsAction =
-//   | {
-//       type: 'PUT';
-//       session: Session;
-//     }
-//   | {
-//       type: 'DELETE';
-//       session: Session;
-//     };
+export type SessionsAction =
+  | {
+      type: 'PUT';
+      session: Session;
+    }
+  | {
+      type: 'DELETE';
+      session: Session;
+    };
 
-// export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
-//   (get) => get(baseSessionsAtom),
-//   (get, set, action) => {
-//     if (action.type === 'PUT') {
-//       const sessions = [...get(baseSessionsAtom)];
-//       const sessionIndex = sessions.findIndex(
-//         (session) => session.userId === action.session.userId
-//       );
-//       if (sessionIndex === -1) {
-//         sessions.push(action.session);
-//       } else {
-//         sessions.splice(sessionIndex, 1, action.session);
-//       }
-//       set(baseSessionsAtom, sessions);
-//       return;
-//     }
-//     if (action.type === 'DELETE') {
-//       const sessions = get(baseSessionsAtom).filter(
-//         (session) => session.userId !== action.session.userId
-//       );
-//       set(baseSessionsAtom, sessions);
-//     }
-//   }
-// );
+export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
+  (get) => get(baseSessionsAtom),
+  (get, set, action) => {
+    if (action.type === 'PUT') {
+      const sessions = [...get(baseSessionsAtom)];
+      const sessionIndex = sessions.findIndex(
+        (session) => session.userId === action.session.userId
+      );
+      if (sessionIndex === -1) {
+        sessions.push(action.session);
+      } else {
+        sessions.splice(sessionIndex, 1, action.session);
+      }
+      set(baseSessionsAtom, sessions);
+      return;
+    }
+    if (action.type === 'DELETE') {
+      const sessions = get(baseSessionsAtom).filter(
+        (session) => session.userId !== action.session.userId
+      );
+      set(baseSessionsAtom, sessions);
+    }
+  }
+);
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 31ee6ccb..15bf9a14 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -14,7 +14,6 @@ export interface Settings {
   useSystemTheme: boolean;
   lightThemeId?: string;
   darkThemeId?: string;
-  monochromeMode?: boolean;
   isMarkdown: boolean;
   editorToolbar: boolean;
   twitterEmoji: boolean;
@@ -48,7 +47,6 @@ const defaultSettings: Settings = {
   useSystemTheme: true,
   lightThemeId: undefined,
   darkThemeId: undefined,
-  monochromeMode: false,
   isMarkdown: true,
   editorToolbar: false,
   twitterEmoji: false,
diff --git a/src/app/utils/matrix.ts b/src/app/utils/matrix.ts
index 4c86c4e2..a8031202 100644
--- a/src/app/utils/matrix.ts
+++ b/src/app/utils/matrix.ts
@@ -230,11 +230,8 @@ export const addRoomIdToMDirect = async (
   roomId: string,
   userId: string
 ): Promise<void> => {
-  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct as any);
-  let userIdToRoomIds: Record<string, string[]> = {};
-
-  if (typeof mDirectsEvent !== 'undefined')
-    userIdToRoomIds = structuredClone(mDirectsEvent.getContent());
+  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
+  const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
 
   // remove it from the lists of any others users
   // (it can only be a DM room for one person)
@@ -255,15 +252,12 @@ export const addRoomIdToMDirect = async (
   }
   userIdToRoomIds[userId] = roomIds;
 
-  await mx.setAccountData(AccountDataEvent.Direct as any, userIdToRoomIds as any);
+  await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
 };
 
 export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string): Promise<void> => {
-  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct as any);
-  let userIdToRoomIds: Record<string, string[]> = {};
-
-  if (typeof mDirectsEvent !== 'undefined')
-    userIdToRoomIds = structuredClone(mDirectsEvent.getContent());
+  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
+  const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
 
   Object.keys(userIdToRoomIds).forEach((targetUserId) => {
     const roomIds = userIdToRoomIds[targetUserId];
@@ -273,7 +267,7 @@ export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string):
     }
   });
 
-  await mx.setAccountData(AccountDataEvent.Direct as any, userIdToRoomIds as any);
+  await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
 };
 
 export const mxcUrlToHttp = (
diff --git a/src/client/action/auth.ts b/src/client/action/auth.ts
new file mode 100644
index 00000000..dbe9baac
--- /dev/null
+++ b/src/client/action/auth.ts
@@ -0,0 +1,13 @@
+import cons from '../state/cons';
+
+export function updateLocalStore(
+  accessToken: string,
+  deviceId: string,
+  userId: string,
+  baseUrl: string
+) {
+  localStorage.setItem(cons.secretKey.ACCESS_TOKEN, accessToken);
+  localStorage.setItem(cons.secretKey.DEVICE_ID, deviceId);
+  localStorage.setItem(cons.secretKey.USER_ID, userId);
+  localStorage.setItem(cons.secretKey.BASE_URL, baseUrl);
+}
diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
new file mode 100644
index 00000000..b7c5ae38
--- /dev/null
+++ b/src/client/action/navigation.js
@@ -0,0 +1,70 @@
+import appDispatcher from '../dispatcher';
+import cons from '../state/cons';
+
+
+export function openSpaceAddExisting(roomId, spaces = false) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_SPACE_ADDEXISTING,
+    roomId,
+    spaces,
+  });
+}
+
+
+export function openCreateRoom(isSpace = false, parentId = null) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_CREATE_ROOM,
+    isSpace,
+    parentId,
+  });
+}
+
+export function openJoinAlias(term) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_JOIN_ALIAS,
+    term,
+  });
+}
+
+export function openInviteUser(roomId, searchTerm) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_INVITE_USER,
+    roomId,
+    searchTerm,
+  });
+}
+
+export function openProfileViewer(userId, roomId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_PROFILE_VIEWER,
+    userId,
+    roomId,
+  });
+}
+
+export function openSearch(term) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_SEARCH,
+    term,
+  });
+}
+
+export function openReusableContextMenu(placement, cords, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU,
+    placement,
+    cords,
+    render,
+    afterClose,
+  });
+}
+
+export function openReusableDialog(title, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_DIALOG,
+    title,
+    render,
+    afterClose,
+  });
+}
+
diff --git a/src/app/utils/notifications.ts b/src/client/action/notifications.ts
similarity index 100%
rename from src/app/utils/notifications.ts
rename to src/client/action/notifications.ts
diff --git a/src/client/action/room.js b/src/client/action/room.js
new file mode 100644
index 00000000..e39aeed8
--- /dev/null
+++ b/src/client/action/room.js
@@ -0,0 +1,279 @@
+import { EventTimeline } from 'matrix-js-sdk';
+import { getIdServer } from '../../util/matrixUtil';
+
+/**
+ * https://github.com/matrix-org/matrix-react-sdk/blob/1e6c6e9d800890c732d60429449bc280de01a647/src/Rooms.js#L73
+ * @param {MatrixClient} mx Matrix client
+ * @param {string} roomId Id of room to add
+ * @param {string} userId User id to which dm || undefined to remove
+ * @returns {Promise} A promise
+ */
+function addRoomToMDirect(mx, roomId, userId) {
+  const mDirectsEvent = mx.getAccountData('m.direct');
+  let userIdToRoomIds = {};
+
+  if (typeof mDirectsEvent !== 'undefined') userIdToRoomIds = structuredClone(mDirectsEvent.getContent());
+
+  // remove it from the lists of any others users
+  // (it can only be a DM room for one person)
+  Object.keys(userIdToRoomIds).forEach((thisUserId) => {
+    const roomIds = userIdToRoomIds[thisUserId];
+
+    if (thisUserId !== userId) {
+      const indexOfRoomId = roomIds.indexOf(roomId);
+      if (indexOfRoomId > -1) {
+        roomIds.splice(indexOfRoomId, 1);
+      }
+    }
+  });
+
+  // now add it, if it's not already there
+  if (userId) {
+    const roomIds = userIdToRoomIds[userId] || [];
+    if (roomIds.indexOf(roomId) === -1) {
+      roomIds.push(roomId);
+    }
+    userIdToRoomIds[userId] = roomIds;
+  }
+
+  return mx.setAccountData('m.direct', userIdToRoomIds);
+}
+
+/**
+ * Given a room, estimate which of its members is likely to
+ * be the target if the room were a DM room and return that user.
+ * https://github.com/matrix-org/matrix-react-sdk/blob/1e6c6e9d800890c732d60429449bc280de01a647/src/Rooms.js#L117
+ *
+ * @param {Object} room Target room
+ * @param {string} myUserId User ID of the current user
+ * @returns {string} User ID of the user that the room is probably a DM with
+ */
+function guessDMRoomTargetId(room, myUserId) {
+  let oldestMemberTs;
+  let oldestMember;
+
+  // Pick the joined user who's been here longest (and isn't us),
+  room.getJoinedMembers().forEach((member) => {
+    if (member.userId === myUserId) return;
+
+    if (typeof oldestMemberTs === 'undefined' || (member.events.member && member.events.member.getTs() < oldestMemberTs)) {
+      oldestMember = member;
+      oldestMemberTs = member.events.member.getTs();
+    }
+  });
+  if (oldestMember) return oldestMember.userId;
+
+  // if there are no joined members other than us, use the oldest member
+  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getMembers().forEach((member) => {
+    if (member.userId === myUserId) return;
+
+    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;
+  return oldestMember.userId;
+}
+
+function convertToDm(mx, roomId) {
+  const room = mx.getRoom(roomId);
+  return addRoomToMDirect(mx, roomId, guessDMRoomTargetId(room, mx.getUserId()));
+}
+
+function convertToRoom(mx, roomId) {
+  return addRoomToMDirect(mx, roomId, undefined);
+}
+
+/**
+ * @param {MatrixClient} mx
+ * @param {string} roomId
+ * @param {boolean} isDM
+ * @param {string[]} via
+ */
+async function join(mx, roomIdOrAlias, isDM = false, via = undefined) {
+  try {
+    const resultRoom = await mx.joinRoom(roomIdOrAlias, { viaServers: via });
+
+    if (isDM) {
+      const targetUserId = guessDMRoomTargetId(mx.getRoom(resultRoom.roomId), mx.getUserId());
+      await addRoomToMDirect(mx, resultRoom.roomId, targetUserId);
+    }
+    return resultRoom.roomId;
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+async function create(mx, options, isDM = false) {
+  try {
+    const result = await mx.createRoom(options);
+    if (isDM && typeof options.invite?.[0] === 'string') {
+      await addRoomToMDirect(mx, result.room_id, options.invite[0]);
+    }
+    return result;
+  } catch (e) {
+    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!');
+  }
+}
+
+async function createDM(mx, userIdOrIds, isEncrypted = true) {
+  const options = {
+    is_direct: true,
+    invite: Array.isArray(userIdOrIds) ? userIdOrIds : [userIdOrIds],
+    visibility: 'private',
+    preset: 'trusted_private_chat',
+    initial_state: [],
+  };
+  if (isEncrypted) {
+    options.initial_state.push({
+      type: 'm.room.encryption',
+      state_key: '',
+      content: {
+        algorithm: 'm.megolm.v1.aes-sha2',
+      },
+    });
+  }
+
+  const result = await create(mx, options, true);
+  return result;
+}
+
+async function createRoom(mx, opts) {
+  // joinRule: 'public' | 'invite' | 'restricted'
+  const { name, topic, joinRule } = opts;
+  const alias = opts.alias ?? undefined;
+  const parentId = opts.parentId ?? undefined;
+  const isSpace = opts.isSpace ?? false;
+  const isEncrypted = opts.isEncrypted ?? false;
+  const powerLevel = opts.powerLevel ?? undefined;
+  const blockFederation = opts.blockFederation ?? false;
+
+  const visibility = joinRule === 'public' ? 'public' : 'private';
+  const options = {
+    creation_content: undefined,
+    name,
+    topic,
+    visibility,
+    room_alias_name: alias,
+    initial_state: [],
+    power_level_content_override: undefined,
+  };
+  if (isSpace) {
+    options.creation_content = { type: 'm.space' };
+  }
+  if (blockFederation) {
+    options.creation_content = { 'm.federate': false };
+  }
+  if (isEncrypted) {
+    options.initial_state.push({
+      type: 'm.room.encryption',
+      state_key: '',
+      content: {
+        algorithm: 'm.megolm.v1.aes-sha2',
+      },
+    });
+  }
+  if (powerLevel) {
+    options.power_level_content_override = {
+      users: {
+        [mx.getUserId()]: powerLevel,
+      },
+    };
+  }
+  if (parentId) {
+    options.initial_state.push({
+      type: 'm.space.parent',
+      state_key: parentId,
+      content: {
+        canonical: true,
+        via: [getIdServer(mx.getUserId())],
+      },
+    });
+  }
+  if (parentId && joinRule === 'restricted') {
+    const caps = await mx.getCapabilities();
+    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';
+    }
+    options.initial_state.push({
+      type: 'm.room.join_rules',
+      content: {
+        join_rule: 'restricted',
+        allow: [{
+          type: 'm.room_membership',
+          room_id: parentId,
+        }],
+      },
+    });
+  }
+
+  const result = await create(mx, options);
+
+  if (parentId) {
+    await mx.sendStateEvent(parentId, 'm.space.child', {
+      auto_join: false,
+      suggested: false,
+      via: [getIdServer(mx.getUserId())],
+    }, result.room_id);
+  }
+
+  return result;
+}
+
+async function ignore(mx, userIds) {
+
+  let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
+  ignoredUsers = [...new Set(ignoredUsers)];
+  await mx.setIgnoredUsers(ignoredUsers);
+}
+
+async function unignore(mx, userIds) {
+  const ignoredUsers = mx.getIgnoredUsers();
+  await mx.setIgnoredUsers(ignoredUsers.filter((id) => !userIds.includes(id)));
+}
+
+async function setPowerLevel(mx, roomId, userId, powerLevel) {
+  const result = await mx.setPowerLevel(roomId, userId, powerLevel);
+  return result;
+}
+
+async function setMyRoomNick(mx, roomId, nick) {
+  const room = mx.getRoom(roomId);
+  const mEvent = room.getLiveTimeline().getState(EventTimeline.FORWARDS).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());
+}
+
+async function setMyRoomAvatar(mx, roomId, mxc) {
+  const room = mx.getRoom(roomId);
+  const mEvent = room.getLiveTimeline().getState(EventTimeline.FORWARDS).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());
+}
+
+export {
+  convertToDm,
+  convertToRoom,
+  join,
+  createDM, createRoom,
+  ignore, unignore,
+  setPowerLevel,
+  setMyRoomNick, setMyRoomAvatar,
+};
diff --git a/src/client/dispatcher.js b/src/client/dispatcher.js
new file mode 100644
index 00000000..12a48721
--- /dev/null
+++ b/src/client/dispatcher.js
@@ -0,0 +1,4 @@
+import { Dispatcher } from 'flux';
+
+const appDispatcher = new Dispatcher();
+export default appDispatcher;
diff --git a/src/client/initMatrix.ts b/src/client/initMatrix.ts
index 487c3f13..b80a080f 100644
--- a/src/client/initMatrix.ts
+++ b/src/client/initMatrix.ts
@@ -1,6 +1,6 @@
 import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from 'matrix-js-sdk';
 
-import { cryptoCallbacks } from './secretStorageKeys';
+import { cryptoCallbacks } from './state/secretStorageKeys';
 import { clearNavToActivePathStore } from '../app/state/navToActivePath';
 
 type Session = {
diff --git a/src/client/state/auth.ts b/src/client/state/auth.ts
new file mode 100644
index 00000000..9536a927
--- /dev/null
+++ b/src/client/state/auth.ts
@@ -0,0 +1,12 @@
+import cons from './cons';
+
+const isAuthenticated = () => localStorage.getItem(cons.secretKey.ACCESS_TOKEN) !== null;
+
+const getSecret = () => ({
+  accessToken: localStorage.getItem(cons.secretKey.ACCESS_TOKEN),
+  deviceId: localStorage.getItem(cons.secretKey.DEVICE_ID),
+  userId: localStorage.getItem(cons.secretKey.USER_ID),
+  baseUrl: localStorage.getItem(cons.secretKey.BASE_URL),
+});
+
+export { isAuthenticated, getSecret };
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
new file mode 100644
index 00000000..6f4fabe4
--- /dev/null
+++ b/src/client/state/cons.js
@@ -0,0 +1,42 @@
+const cons = {
+  version: '4.9.1',
+  secretKey: {
+    ACCESS_TOKEN: 'cinny_access_token',
+    DEVICE_ID: 'cinny_device_id',
+    USER_ID: 'cinny_user_id',
+    BASE_URL: 'cinny_hs_base_url',
+  },
+  status: {
+    PRE_FLIGHT: 'pre-flight',
+    IN_FLIGHT: 'in-flight',
+    SUCCESS: 'success',
+    ERROR: 'error',
+  },
+  actions: {
+    navigation: {
+      OPEN_SPACE_ADDEXISTING: 'OPEN_SPACE_ADDEXISTING',
+      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_SEARCH: 'OPEN_SEARCH',
+      OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
+    },
+  },
+  events: {
+    navigation: {
+      SPACE_ADDEXISTING_OPENED: 'SPACE_ADDEXISTING_OPENED',
+      CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
+      JOIN_ALIAS_OPENED: 'JOIN_ALIAS_OPENED',
+      INVITE_USER_OPENED: 'INVITE_USER_OPENED',
+      SEARCH_OPENED: 'SEARCH_OPENED',
+      REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
+    },
+  },
+};
+
+Object.freeze(cons);
+
+export default cons;
diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
new file mode 100644
index 00000000..743d0199
--- /dev/null
+++ b/src/client/state/navigation.js
@@ -0,0 +1,75 @@
+import EventEmitter from 'events';
+import appDispatcher from '../dispatcher';
+import cons from './cons';
+
+class Navigation extends EventEmitter {
+  constructor() {
+    super();
+    this.rawModelStack = [];
+  }
+
+  get isRawModalVisible() {
+    return this.rawModelStack.length > 0;
+  }
+
+  setIsRawModalVisible(visible) {
+    if (visible) this.rawModelStack.push(true);
+    else this.rawModelStack.pop();
+  }
+
+  navigate(action) {
+    const actions = {
+      [cons.actions.navigation.OPEN_SPACE_ADDEXISTING]: () => {
+        this.emit(cons.events.navigation.SPACE_ADDEXISTING_OPENED, action.roomId, action.spaces);
+      },
+      [cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
+        this.emit(
+          cons.events.navigation.CREATE_ROOM_OPENED,
+          action.isSpace,
+          action.parentId,
+        );
+      },
+      [cons.actions.navigation.OPEN_JOIN_ALIAS]: () => {
+        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);
+      },
+      [cons.actions.navigation.OPEN_PROFILE_VIEWER]: () => {
+        this.emit(cons.events.navigation.PROFILE_VIEWER_OPENED, action.userId, action.roomId);
+      },
+      [cons.actions.navigation.OPEN_SEARCH]: () => {
+        this.emit(
+          cons.events.navigation.SEARCH_OPENED,
+          action.term,
+        );
+      },
+      [cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU]: () => {
+        this.emit(
+          cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
+          action.placement,
+          action.cords,
+          action.render,
+          action.afterClose,
+        );
+      },
+      [cons.actions.navigation.OPEN_REUSABLE_DIALOG]: () => {
+        this.emit(
+          cons.events.navigation.REUSABLE_DIALOG_OPENED,
+          action.title,
+          action.render,
+          action.afterClose,
+        );
+      },
+    };
+    actions[action.type]?.();
+  }
+}
+
+const navigation = new Navigation();
+appDispatcher.register(navigation.navigate.bind(navigation));
+
+export default navigation;
diff --git a/src/client/secretStorageKeys.js b/src/client/state/secretStorageKeys.js
similarity index 83%
rename from src/client/secretStorageKeys.js
rename to src/client/state/secretStorageKeys.js
index 78c0cb4c..7439e7a5 100644
--- a/src/client/secretStorageKeys.js
+++ b/src/client/state/secretStorageKeys.js
@@ -7,14 +7,18 @@ export function storePrivateKey(keyId, privateKey) {
   secretStorageKeys.set(keyId, privateKey);
 }
 
-function hasPrivateKey(keyId) {
+export function hasPrivateKey(keyId) {
   return secretStorageKeys.get(keyId) instanceof Uint8Array;
 }
 
-function getPrivateKey(keyId) {
+export function getPrivateKey(keyId) {
   return secretStorageKeys.get(keyId);
 }
 
+export function deletePrivateKey(keyId) {
+  delete secretStorageKeys.delete(keyId);
+}
+
 export function clearSecretStorageKeys() {
   secretStorageKeys.clear();
 }
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ca28536d..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,131 +0,0 @@
-@font-face {
-  font-family: Twemoji;
-  src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
-    url('../public/font/Twemoji.Mozilla.v15.1.0.ttf');
-  font-display: swap;
-}
-
-:root {
-  --tc-link: hsl(213deg 100% 45%);
-
-  /* user mxid colors */
-  --mx-uc-1: hsl(208, 100%, 45%);
-  --mx-uc-2: hsl(302, 100%, 30%);
-  --mx-uc-3: hsl(163, 100%, 30%);
-  --mx-uc-4: hsl(343, 100%, 45%);
-  --mx-uc-5: hsl(24, 100%, 45%);
-  --mx-uc-6: hsl(181, 100%, 30%);
-  --mx-uc-7: hsl(242, 100%, 45%);
-  --mx-uc-8: hsl(94, 100%, 35%);
-
-  --font-emoji: 'Twemoji_DISABLED';
-  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
-}
-
-.dark-theme,
-.butter-theme {
-  --tc-link: hsl(213deg 100% 80%);
-
-  --mx-uc-1: hsl(208, 100%, 75%);
-  --mx-uc-2: hsl(301, 100%, 80%);
-  --mx-uc-3: hsl(163, 100%, 70%);
-  --mx-uc-4: hsl(343, 100%, 75%);
-  --mx-uc-5: hsl(24, 100%, 70%);
-  --mx-uc-6: hsl(181, 100%, 60%);
-  --mx-uc-7: hsl(243, 100%, 80%);
-  --mx-uc-8: hsl(94, 100%, 80%);
-
-  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
-}
-
-html {
-  height: 100%;
-  overflow: hidden;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  font-family: var(--font-secondary);
-  font-size: 16px;
-  font-weight: 400;
-
-  /*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
-  font-variant-ligatures: no-contextual;
-}
-#root {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-}
-a {
-  color: var(--tc-link);
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-
-[data-mx-spoiler][aria-pressed='true'] a {
-  color: transparent;
-  pointer-events: none;
-}
-
-b {
-  font-weight: 500;
-}
-label {
-  margin: 0;
-  padding: 0;
-}
-button,
-textarea {
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  border: none;
-}
-button {
-  max-width: 100%;
-  text-transform: none;
-  text-align: inherit;
-  overflow: visible;
-  -webkit-appearance: button;
-}
-textarea,
-input,
-input[type],
-input[type='text'],
-input[type='username'],
-input[type='password'],
-input[type='email'],
-input[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-textarea {
-  color: inherit;
-  word-spacing: inherit;
-}
-
-audio:not([controls]) {
-  display: none !important;
-}
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 00000000..14bf4749
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,522 @@
+@use './app/partials/screen';
+
+@font-face {
+  font-family: Twemoji;
+  src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
+    url('../public/font/Twemoji.Mozilla.v15.1.0.ttf');
+  font-display: swap;
+}
+
+: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-hover: rgba(0, 0, 0, 3%);
+  --bg-surface-active: rgba(0, 0, 0, 5%);
+  --bg-surface-border: rgba(0, 0, 0, 6%);
+
+  --bg-primary: rgb(18, 69, 168);
+  --bg-primary-hover: rgba(18, 69, 168, 80%);
+  --bg-primary-active: rgba(18, 69, 168, 70%);
+  --bg-primary-border: rgba(18, 69, 168, 38%);
+
+  --bg-positive: rgb(1, 115, 67);
+  --bg-positive-hover: rgba(1, 115, 67, 8%);
+  --bg-positive-active: rgba(1, 115, 67, 15%);
+  --bg-positive-border: rgba(1, 115, 67, 40%);
+
+  --bg-caution: rgb(134, 67, 0);
+  --bg-caution-hover: rgba(134, 67, 0, 8%);
+  --bg-caution-active: rgba(134, 67, 0, 15%);
+  --bg-caution-border: rgba(134, 67, 0, 40%);
+
+  --bg-danger: rgb(157, 15, 15);
+  --bg-danger-hover: rgba(157, 15, 15, 5%);
+  --bg-danger-active: rgba(157, 15, 15, 10%);
+  --bg-danger-border: rgba(157, 15, 15, 20%);
+
+  --bg-tooltip: #353535;
+  --bg-badge: #989898;
+  --bg-ping: hsla(137deg, 100%, 68%, 40%);
+  --bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
+  --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(1, 115, 67, 80%);
+  --tc-positive-low: rgb(1, 115, 67, 60%);
+
+  --tc-caution-high: var(--bg-caution);
+  --tc-caution-normal: rgb(134, 67, 0, 80%);
+  --tc-caution-low: rgb(134, 67, 0, 60%);
+
+  --tc-danger-high: var(--bg-danger);
+  --tc-danger-normal: rgba(157, 15, 15, 88%);
+  --tc-danger-low: rgba(157, 15, 15, 60%);
+
+  --tc-code: #e62498;
+  --tc-link: hsl(213deg 100% 45%);
+  --tc-tooltip: white;
+  --tc-badge: white;
+
+  /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-high: #272727;
+  --ic-surface-normal: #626262;
+  --ic-surface-low: #7c7c7c;
+  --ic-primary-high: #ffffff;
+  --ic-primary-normal: #ffffff;
+  --ic-positive-high: rgba(1, 115, 67);
+  --ic-positive-normal: rgba(1, 115, 67, 80%);
+  --ic-caution-high: rgba(134, 67, 0);
+  --ic-caution-normal: rgba(134, 67, 0, 80%);
+  --ic-danger-high: rgba(157, 15, 15);
+  --ic-danger-normal: rgba(157, 15, 15, 0.7);
+
+  /* user mxid colors */
+  --mx-uc-1: hsl(208, 100%, 45%);
+  --mx-uc-2: hsl(302, 100%, 30%);
+  --mx-uc-3: hsl(163, 100%, 30%);
+  --mx-uc-4: hsl(343, 100%, 45%);
+  --mx-uc-5: hsl(24, 100%, 45%);
+  --mx-uc-6: hsl(181, 100%, 30%);
+  --mx-uc-7: hsl(242, 100%, 45%);
+  --mx-uc-8: hsl(94, 100%, 35%);
+
+  /* system icon size | -ic-[size]: value */
+  --ic-large: 38px;
+  --ic-normal: 24px;
+  --ic-small: 20px;
+  --ic-extra-small: 18px;
+
+  /* avatar size */
+  --av-large: 80px;
+  --av-normal: 42px;
+  --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%);
+
+  --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
+
+  --bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
+  --bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
+
+  --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
+  --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+
+  --bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
+  --bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
+
+  --bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
+  --bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
+
+  --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;
+  --lh-h1: 38px;
+
+  --fs-h2: 24px;
+  --ls-h2: -0.5px;
+  --lh-h2: 30px;
+
+  --fs-s1: 18px;
+  --ls-s1: -0.2px;
+  --lh-s1: 24px;
+
+  --fs-b1: 16px;
+  --ls-b1: 0.1px;
+  --lh-b1: 24px;
+
+  --fs-b2: 14px;
+  --ls-b2: 0.2px;
+  --lh-b2: 20px;
+
+  --fs-b3: 12px;
+  --ls-b3: 0px;
+  --lh-b3: 16px;
+
+  /* font-weight */
+  --fw-light: 300;
+  --fw-normal: 420;
+  --fw-medium: 500;
+  --fw-bold: 700;
+
+  /* spacing | --sp-[space]: value */
+  --sp-none: 0px;
+  --sp-ultra-tight: 4px;
+  --sp-extra-tight: 8px;
+  --sp-tight: 12px;
+  --sp-normal: 16px;
+  --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));
+  --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));
+    --popup-window-drawer-width: 240px;
+  }
+
+  /* transition curves */
+  --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-emoji: 'Twemoji_DISABLED';
+  --font-primary: 'InterVariable', var(--font-emoji), sans-serif;
+  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+}
+
+.silver-theme {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: hsl(0, 0%, 95%);
+  --bg-surface-transparent: hsla(0, 0%, 95%, 0);
+  --bg-surface-low: hsl(0, 0%, 91%);
+  --bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
+  --bg-surface-extra-low: hsl(0, 0%, 91%);
+  --bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
+}
+
+.dark-theme,
+.butter-theme {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: #262626;
+  --bg-surface-transparent: #26262600;
+  --bg-surface-low: #1a1a1a;
+  --bg-surface-low-transparent: #1a1a1a00;
+  --bg-surface-extra-low: #1a1a1a;
+  --bg-surface-extra-low-transparent: #1a1a1a00;
+  --bg-surface-hover: #333333;
+  --bg-surface-active: #404040;
+  --bg-surface-border: #404040;
+
+  --bg-primary: rgb(189, 182, 236);
+  --bg-primary-hover: rgba(189, 182, 236, 0.8);
+  --bg-primary-active: rgba(189, 182, 236, 70%);
+  --bg-primary-border: rgba(189, 182, 236, 38%);
+
+  --bg-positive: rgb(133, 224, 186);
+  --bg-positive-hover: rgba(133, 224, 186, 8%);
+  --bg-positive-active: rgba(133, 224, 186, 15%);
+  --bg-positive-border: rgba(133, 224, 186, 40%);
+
+  --bg-caution: rgb(227, 186, 145);
+  --bg-caution-hover: rgba(227, 186, 145, 8%);
+  --bg-caution-active: rgba(227, 186, 145, 15%);
+  --bg-caution-border: rgba(227, 186, 145, 40%);
+
+  --bg-danger: rgb(230, 157, 157);
+  --bg-danger-hover: rgba(230, 157, 157, 5%);
+  --bg-danger-active: rgba(230, 157, 157, 10%);
+  --bg-danger-border: rgba(230, 157, 157, 20%);
+
+  --bg-tooltip: #000;
+  --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%, 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: rgb(44, 40, 67);
+  --tc-primary-normal: rgba(44, 40, 67, 0.68);
+  --tc-primary-low: rgba(44, 40, 67, 0.4);
+
+  --tc-positive-high: var(--bg-positive);
+  --tc-positive-normal: rgb(133, 224, 186, 80%);
+  --tc-positive-low: rgb(133, 224, 186, 60%);
+
+  --tc-caution-high: var(--bg-caution);
+  --tc-caution-normal: rgb(227, 186, 145, 80%);
+  --tc-caution-low: rgb(227, 186, 145, 60%);
+
+  --tc-danger-high: var(--bg-danger);
+  --tc-danger-normal: rgba(230, 157, 157, 88%);
+  --tc-danger-low: rgba(230, 157, 157, 60%);
+
+  --tc-code: #e565b1;
+  --tc-link: hsl(213deg 100% 80%);
+  --tc-badge: black;
+
+  /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-high: rgb(255, 255, 255);
+  --ic-surface-normal: rgba(255, 255, 255, 84%);
+  --ic-surface-low: rgba(255, 255, 255, 64%);
+  --ic-primary-high: var(--tc-primary-high);
+  --ic-primary-normal: var(--tc-primary-high);
+  --ic-primary-low: var(--tc-primary-high);
+  --ic-positive-high: rgba(133, 224, 186);
+  --ic-positive-normal: rgba(133, 224, 186, 80%);
+  --ic-caution-high: rgba(227, 186, 145);
+  --ic-caution-normal: rgba(227, 186, 145, 80%);
+  --ic-danger-high: rgba(230, 157, 157);
+  --ic-danger-normal: rgba(230, 157, 157, 0.7);
+
+  --mx-uc-1: hsl(208, 100%, 75%);
+  --mx-uc-2: hsl(301, 100%, 80%);
+  --mx-uc-3: hsl(163, 100%, 70%);
+  --mx-uc-4: hsl(343, 100%, 75%);
+  --mx-uc-5: hsl(24, 100%, 70%);
+  --mx-uc-6: hsl(181, 100%, 60%);
+  --mx-uc-7: hsl(243, 100%, 80%);
+  --mx-uc-8: hsl(94, 100%, 80%);
+
+  /* shadow and overlay */
+  --bg-overlay: rgba(0, 0, 0, 60%);
+  --bg-overlay-low: rgba(0, 0, 0, 80%);
+
+  --bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
+
+  --bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
+  --bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
+
+  --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;
+
+  --fs-h2: 23.6px;
+
+  --fs-s1: 17.6px;
+
+  --fs-b1: 14.6px;
+  --ls-b1: 0.14px;
+
+  --fs-b2: 13.2px;
+
+  --fs-b3: 11.2px;
+
+  /* override normal font weight for dark mode */
+  --fw-normal: 350;
+  --fw-medium: 450;
+  --fw-bold: 550;
+
+  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+}
+
+.butter-theme {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: #262621;
+  --bg-surface-transparent: #26262100;
+  --bg-surface-low: #1a1916;
+  --bg-surface-low-transparent: #1a191600;
+  --bg-surface-extra-low: #1a1916;
+  --bg-surface-extra-low-transparent: #1a1916;
+  --bg-surface-hover: #33322c;
+  --bg-surface-active: #403f38;
+  --bg-surface-border: #403f38;
+
+  --bg-badge: #c4c1ab;
+
+  /* text color | --tc-[background type]-[priority]: value */
+  --tc-surface-high: rgb(255, 251, 222);
+  --tc-surface-normal: rgba(255, 251, 222, 94%);
+  --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%);
+  --ic-surface-low: rgba(255, 251, 222, 64%);
+}
+
+.font-primary {
+  font-family: var(--font-primary);
+
+  /* override font styles for primary font */
+  --fs-h1: 36px;
+  --ls-h1: -1.5px;
+  --lh-h1: 38px;
+
+  --fs-h2: 24px;
+  --ls-h2: -0.5px;
+  --lh-h2: 30px;
+
+  --fs-s1: 18px;
+  --ls-s1: -0.2px;
+  --lh-s1: 24px;
+
+  --fs-b1: 16px;
+  --ls-b1: 0.1px;
+  --lh-b1: 24px;
+
+  --fs-b2: 14px;
+  --ls-b2: 0.2px;
+  --lh-b2: 20px;
+
+  --fs-b3: 12px;
+  --ls-b3: 0px;
+  --lh-b3: 16px;
+
+  --fw-light: 300;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+}
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: var(--font-secondary);
+  font-size: 16px;
+  font-weight: var(--fw-normal);
+  background-color: var(--bg-surface-low);
+
+  /*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
+  font-variant-ligatures: no-contextual;
+}
+#root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+a {
+  color: var(--tc-link);
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+[data-mx-spoiler][aria-pressed='true'] a {
+  color: transparent;
+  pointer-events: none;
+}
+
+b {
+  font-weight: var(--fw-medium);
+}
+label {
+  margin: 0;
+  padding: 0;
+}
+button,
+textarea {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  border: none;
+}
+button {
+  max-width: 100%;
+  text-transform: none;
+  text-align: inherit;
+  overflow: visible;
+  -webkit-appearance: button;
+}
+textarea,
+input,
+input[type],
+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'] {
+  margin: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: calc(var(--bo-radius) / 2);
+  box-shadow: var(--bs-primary-border);
+  background-color: var(--bg-surface);
+  cursor: pointer;
+  @extend .flex--center;
+
+  &:checked {
+    background-color: var(--bg-primary);
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 12px;
+      height: 6px;
+      border: 6px solid white;
+      border-width: 0 0 3px 3px;
+      transform: rotateZ(-45deg) translate(1px, -1px);
+    }
+  }
+}
+
+textarea {
+  color: inherit;
+  word-spacing: inherit;
+}
+.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
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+audio:not([controls]) {
+  display: none !important;
+}
+
+.flex--center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/index.tsx b/src/index.tsx
index ddfd30b4..402a4c1b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,7 +8,7 @@ import { configClass, varsClass } from 'folds';
 
 enableMapSet();
 
-import './index.css';
+import './index.scss';
 
 import { trimTrailingSlash } from './app/utils/common';
 import App from './app/pages/App';
diff --git a/src/util/AsyncSearch.js b/src/util/AsyncSearch.js
new file mode 100644
index 00000000..d0a2130e
--- /dev/null
+++ b/src/util/AsyncSearch.js
@@ -0,0 +1,135 @@
+import EventEmitter from 'events';
+
+class AsyncSearch extends EventEmitter {
+  constructor() {
+    super();
+
+    this._reset();
+
+    this.RESULT_SENT = 'RESULT_SENT';
+  }
+
+  _reset() {
+    this.dataList = null;
+    this.term = null;
+    this.searchKeys = null;
+    this.isContain = false;
+    this.isCaseSensitive = false;
+    this.normalizeUnicode = true;
+    this.ignoreWhitespace = true;
+    this.limit = null;
+    this.findingList = [];
+
+    this.searchUptoIndex = 0;
+    this.sessionStartTimestamp = 0;
+  }
+
+  _softReset() {
+    this.term = null;
+    this.findingList = [];
+    this.searchUptoIndex = 0;
+    this.sessionStartTimestamp = 0;
+  }
+
+  /**
+   * Setup the search.
+   * opts.keys are required when dataList items are object.
+   *
+   * @param {[string | object]} dataList - A list to search in
+   * @param {object} opts - Options
+   * @param {string | [string]} [opts.keys=null]
+   * @param {boolean} [opts.isContain=false] - Add finding to result if it contain search term
+   * @param {boolean} [opts.isCaseSensitive=false]
+   * @param {boolean} [opts.normalizeUnicode=true]
+   * @param {boolean} [opts.ignoreWhitespace=true]
+   * @param {number} [opts.limit=null] - Stop search after limit
+   */
+  setup(dataList, opts) {
+    this._reset();
+    this.dataList = dataList;
+    this.searchKeys = opts?.keys || null;
+    this.isContain = opts?.isContain || false;
+    this.isCaseSensitive = opts?.isCaseSensitive || false;
+    this.normalizeUnicode = opts?.normalizeUnicode || true;
+    this.ignoreWhitespace = opts?.ignoreWhitespace || true;
+    this.limit = opts?.limit || null;
+  }
+
+  search(term) {
+    this._softReset();
+
+    this.term = this._normalize(term);
+    if (this.term === '') {
+      this._sendFindings();
+      return;
+    }
+
+    this._find(this.sessionStartTimestamp, 0);
+  }
+
+  _find(sessionTimestamp, lastFindingCount) {
+    if (sessionTimestamp !== this.sessionStartTimestamp) return;
+    this.sessionStartTimestamp = window.performance.now();
+
+    for (
+      let searchIndex = this.searchUptoIndex;
+      searchIndex < this.dataList.length;
+      searchIndex += 1
+    ) {
+      if (this._match(this.dataList[searchIndex])) {
+        this.findingList.push(this.dataList[searchIndex]);
+        if (typeof this.limit === 'number' && this.findingList.length >= this.limit) break;
+      }
+
+      const calcFinishTime = window.performance.now();
+      if (calcFinishTime - this.sessionStartTimestamp > 8) {
+        const thisFindingCount = this.findingList.length;
+        const thisSessionTimestamp = this.sessionStartTimestamp;
+        if (lastFindingCount !== thisFindingCount) this._sendFindings();
+
+        this.searchUptoIndex = searchIndex + 1;
+        setTimeout(() => this._find(thisSessionTimestamp, thisFindingCount));
+        return;
+      }
+    }
+
+    if (lastFindingCount !== this.findingList.length
+      || lastFindingCount === 0) this._sendFindings();
+    this._softReset();
+  }
+
+  _match(item) {
+    if (typeof item === 'string') {
+      return this._compare(item);
+    }
+    if (typeof item === 'object') {
+      if (Array.isArray(this.searchKeys)) {
+        return !!this.searchKeys.find((key) => this._compare(item[key]));
+      }
+      if (typeof this.searchKeys === 'string') {
+        return this._compare(item[this.searchKeys]);
+      }
+    }
+    return false;
+  }
+
+  _compare(item) {
+    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');
+    if (!this.isCaseSensitive) myItem = myItem.toLocaleLowerCase();
+    if (this.ignoreWhitespace) myItem = myItem.replace(/\s/g, '');
+    return myItem;
+  }
+
+  _sendFindings() {
+    this.emit(this.RESULT_SENT, this.findingList, this.term);
+  }
+}
+
+export default AsyncSearch;
diff --git a/src/util/common.js b/src/util/common.js
new file mode 100644
index 00000000..2affe27d
--- /dev/null
+++ b/src/util/common.js
@@ -0,0 +1,230 @@
+/* eslint-disable max-classes-per-file */
+export function bytesToSize(bytes) {
+  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]}`;
+}
+
+export function diffMinutes(dt2, dt1) {
+  let diff = (dt2.getTime() - dt1.getTime()) / 1000;
+  diff /= 60;
+  return Math.abs(Math.round(diff));
+}
+
+export function isInSameDay(dt2, dt1) {
+  return (
+    dt2.getFullYear() === dt1.getFullYear()
+    && dt2.getMonth() === dt1.getMonth()
+    && dt2.getDate() === dt1.getDate()
+  );
+}
+
+/**
+ * @param {Event} ev
+ * @param {string} [targetSelector] element selector for Element.matches([selector])
+ */
+export function getEventCords(ev, targetSelector) {
+  let boxInfo;
+
+  const path = ev.nativeEvent.composedPath();
+  const target = targetSelector
+    ? path.find((element) => element.matches?.(targetSelector))
+    : null;
+  if (target) {
+    boxInfo = target.getBoundingClientRect();
+  } else {
+    boxInfo = ev.target.getBoundingClientRect();
+  }
+
+  return {
+    x: boxInfo.x,
+    y: boxInfo.y,
+    width: boxInfo.width,
+    height: boxInfo.height,
+    detail: ev.detail,
+  };
+}
+
+export function abbreviateNumber(number) {
+  if (number > 99) return '99+';
+  return number;
+}
+
+export class Debounce {
+  constructor() {
+    this.timeoutId = null;
+  }
+
+  /**
+   * @param {function} func - callback function
+   * @param {number} wait - wait in milliseconds to call func
+   * @returns {func} debounceCallback - to pass arguments to func callback
+   */
+  _(func, wait) {
+    const that = this;
+    return function debounceCallback(...args) {
+      clearTimeout(that.timeoutId);
+      that.timeoutId = setTimeout(() => {
+        func.apply(this, args);
+        that.timeoutId = null;
+      }, wait);
+    };
+  }
+}
+
+export class Throttle {
+  constructor() {
+    this.timeoutId = null;
+  }
+
+  /**
+   * @param {function} func - callback function
+   * @param {number} wait - wait in milliseconds to call func
+   * @returns {function} throttleCallback - to pass arguments to func callback
+   */
+  _(func, wait) {
+    const that = this;
+    return function throttleCallback(...args) {
+      if (that.timeoutId !== null) return;
+      that.timeoutId = setTimeout(() => {
+        func.apply(this, args);
+        that.timeoutId = null;
+      }, wait);
+    };
+  }
+}
+
+export function getUrlPrams(paramName) {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  return urlParams.get(paramName);
+}
+
+export function getScrollInfo(target) {
+  const scroll = {};
+  scroll.top = Math.round(target.scrollTop);
+  scroll.height = Math.round(target.scrollHeight);
+  scroll.viewHeight = Math.round(target.offsetHeight);
+  scroll.isScrollable = scroll.height > scroll.viewHeight;
+  return scroll;
+}
+
+export function avatarInitials(text) {
+  return [...text][0];
+}
+
+export function cssVar(name) {
+  return getComputedStyle(document.body).getPropertyValue(name);
+}
+
+export function setFavicon(url) {
+  const favicon = document.querySelector('#favicon');
+  if (!favicon) return;
+  favicon.setAttribute('href', url);
+}
+
+export function copyToClipboard(text) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text);
+  } else {
+    const host = document.body;
+    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');
+    copyInput.remove();
+  }
+}
+
+export function suffixRename(name, validator) {
+  let suffix = 2;
+  let newName = name;
+  do {
+    newName = name + suffix;
+    suffix += 1;
+  } while (validator(newName));
+
+  return newName;
+}
+
+export function getImageDimension(file) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = async () => {
+      resolve({
+        w: img.width,
+        h: img.height,
+      });
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+export function scaleDownImage(imageFile, width, height) {
+  return new Promise((resolve) => {
+    const imgURL = URL.createObjectURL(imageFile);
+    const img = new Image();
+
+    img.onload = () => {
+      let newWidth = img.width;
+      let newHeight = img.height;
+      if (newHeight <= height && newWidth <= width) {
+        resolve(imageFile);
+      }
+
+      if (newHeight > height) {
+        newWidth = Math.floor(newWidth * (height / newHeight));
+        newHeight = height;
+      }
+      if (newWidth > width) {
+        newHeight = Math.floor(newHeight * (width / newWidth));
+        newWidth = width;
+      }
+
+      const canvas = document.createElement('canvas');
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+      canvas.toBlob((thumbnail) => {
+        URL.revokeObjectURL(imgURL);
+        resolve(thumbnail);
+      }, imageFile.type);
+    };
+
+    img.src = imgURL;
+  });
+}
+
+/**
+ * @param {sigil} string sigil to search for (for example '@', '#' or '$')
+ * @param {flags} string regex flags
+ * @param {prefix} string prefix appended at the beginning of the regex
+ * @returns {RegExp}
+ */
+export function idRegex(sigil, flags, prefix) {
+  const servername = '(?:[a-zA-Z0-9-.]*[a-zA-Z0-9]+|\\[\\S+?\\])(?::\\d+)?';
+  return new RegExp(`${prefix}(${sigil}\\S+:${servername})`, flags);
+}
+
+const matrixToRegex = /^https?:\/\/matrix.to\/#\/(\S+:\S+)/;
+/**
+ * Parses a matrix.to URL into an matrix id.
+ * This function can later be extended to support matrix: URIs
+ * @param {string} uri The URI to parse
+ * @returns {string|null} The id or null if the URI does not match
+ */
+export function parseIdUri(uri) {
+  const res = decodeURIComponent(uri).match(matrixToRegex);
+  if (!res) return null;
+  return res[1];
+}
diff --git a/src/util/matrixUtil.js b/src/util/matrixUtil.js
new file mode 100644
index 00000000..19688a2b
--- /dev/null
+++ b/src/util/matrixUtil.js
@@ -0,0 +1,113 @@
+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';
+
+export async function getBaseUrl(servername) {
+  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 baseUrl = result?.['m.homeserver']?.base_url;
+    if (baseUrl === undefined) throw new Error();
+    return baseUrl;
+  } catch (e) {
+    return `${protocol}${servername}`;
+  }
+}
+
+export function getUsername(mx, userId) {
+  const user = mx.getUser(userId);
+  if (user === null) return userId;
+  let username = user.displayName;
+  if (typeof username === 'undefined') {
+    username = userId;
+  }
+  return username;
+}
+
+export function getUsernameOfRoomMember(roomMember) {
+  return roomMember.name || roomMember.userId;
+}
+
+export async function isRoomAliasAvailable(mx, alias) {
+  try {
+    const result = await mx.getRoomIdForAlias(alias);
+    if (result.room_id) return false;
+    return false;
+  } catch (e) {
+    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';
+  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('>'));
+
+  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;
+
+  const isUserId = user.match(/^@.+:.+/);
+
+  return {
+    userId: isUserId ? user : null,
+    displayName: isUserId ? null : user,
+    replyBody,
+    body,
+  };
+}
+
+export function trimHTMLReply(html) {
+  if (!html) return html;
+  const suffix = '</mx-reply>';
+  const i = html.indexOf(suffix);
+  if (i < 0) {
+    return html;
+  }
+  return html.slice(i + suffix.length);
+}
+
+export function joinRuleToIconSrc(joinRule, isSpace) {
+  return ({
+    restricted: () => (isSpace ? SpaceIC : HashIC),
+    knock: () => (isSpace ? SpaceLockIC : HashLockIC),
+    invite: () => (isSpace ? SpaceLockIC : HashLockIC),
+    public: () => (isSpace ? SpaceGlobeIC : HashGlobeIC),
+  }[joinRule]?.() || null);
+}
+
+export function getIdServer(userId) {
+  const idParts = userId.split(':');
+  return idParts[1];
+}
+
+export async function hasDevices(mx, userId) {
+  try {
+    const usersDeviceMap = await mx.getCrypto()?.getUserDeviceInfo([userId, mx.getUserId()], true);
+
+    return Array.from(usersDeviceMap.values())
+      .every((deviceIdToDevices) => deviceIdToDevices.size > 0);
+  } catch (e) {
+    console.error("Error determining if it's possible to encrypt to all users: ", e);
+    return false;
+  }
+}
diff --git a/src/util/sort.js b/src/util/sort.js
new file mode 100644
index 00000000..cc73cf57
--- /dev/null
+++ b/src/util/sort.js
@@ -0,0 +1,20 @@
+export function memberByAtoZ(m1, m2) {
+  const aName = m1.name;
+  const bName = m2.name;
+
+  if (aName.toLowerCase() < bName.toLowerCase()) {
+    return -1;
+  }
+  if (aName.toLowerCase() > bName.toLowerCase()) {
+    return 1;
+  }
+  return 0;
+}
+export function memberByPowerLevel(m1, m2) {
+  const pl1 = m1.powerLevel;
+  const pl2 = m2.powerLevel;
+
+  if (pl1 > pl2) return -1;
+  if (pl1 < pl2) return 1;
+  return 0;
+}