diff --git a/.github/workflows/build-pull-request.yml b/.github/workflows/build-pull-request.yml
index 441da0de..450e4e29 100644
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@@ -14,7 +14,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version: 20.12.2
           cache: 'npm'
diff --git a/.github/workflows/deploy-pull-request.yml b/.github/workflows/deploy-pull-request.yml
index 9c0bea78..b330c3c1 100644
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@@ -15,7 +15,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@07ab29fd4a977ae4d2b275087cf67563dfdf0295
+        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -24,7 +24,7 @@ jobs:
         id: pr
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@07ab29fd4a977ae4d2b275087cf67563dfdf0295
+        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
diff --git a/.github/workflows/docker-pr.yml b/.github/workflows/docker-pr.yml
index 4e88c78d..398785ab 100644
--- a/.github/workflows/docker-pr.yml
+++ b/.github/workflows/docker-pr.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v6.15.0
+        uses: docker/build-push-action@v6.18.0
         with:
           context: .
           push: false
diff --git a/.github/workflows/netlify-dev.yml b/.github/workflows/netlify-dev.yml
index 34308c21..66cd5ad5 100644
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version: 20.12.2
           cache: 'npm'
diff --git a/.github/workflows/prod-deploy.yml b/.github/workflows/prod-deploy.yml
index 44205ff2..24edda96 100644
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@@ -12,7 +12,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -52,7 +52,7 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@c95fe1489396fe8a9eb87c0abf8aa5b2ef267fda
+        uses: softprops/action-gh-release@72f2c25fcb47643c292f7107632f7a47c1df5cd8
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
@@ -72,25 +72,25 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.10.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.4.0
+        uses: docker/login-action@v3.5.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Container registry
-        uses: docker/login-action@v3.4.0
+        uses: docker/login-action@v3.5.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v5.7.0
+        uses: docker/metadata-action@v5.8.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.15.0
+        uses: docker/build-push-action@v6.18.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64
diff --git a/Dockerfile b/Dockerfile
index abb65ee5..718fed72 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.27.4-alpine
+FROM nginx:1.29.0-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
diff --git a/package-lock.json b/package-lock.json
index f85dd74d..70826ae7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.6.0",
+  "version": "4.9.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.6.0",
+      "version": "4.9.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -21,6 +21,7 @@
         "@vanilla-extract/recipes": "0.3.0",
         "@vanilla-extract/vite-plugin": "3.7.1",
         "await-to-js": "3.0.0",
+        "badwords-list": "2.0.1-4",
         "blurhash": "2.0.4",
         "browser-encrypt-attachment": "0.3.0",
         "chroma-js": "3.1.2",
@@ -33,7 +34,7 @@
         "file-saver": "2.0.5",
         "flux": "4.0.3",
         "focus-trap-react": "10.0.2",
-        "folds": "2.1.0",
+        "folds": "2.2.0",
         "formik": "2.4.6",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
@@ -45,7 +46,7 @@
         "jotai": "2.6.0",
         "linkify-react": "4.1.3",
         "linkifyjs": "4.1.3",
-        "matrix-js-sdk": "35.0.0",
+        "matrix-js-sdk": "37.5.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
@@ -98,7 +99,7 @@
         "prettier": "2.8.1",
         "sass": "1.56.2",
         "typescript": "4.9.4",
-        "vite": "5.4.15",
+        "vite": "5.4.19",
         "vite-plugin-pwa": "0.20.5",
         "vite-plugin-static-copy": "1.0.4",
         "vite-plugin-top-level-await": "1.4.4"
@@ -2263,17 +2264,19 @@
       }
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-11.1.0.tgz",
-      "integrity": "sha512-JPuO9RCVDklDjbFzMvZfQb7PuiFkLY72bniRSu81lRzkkrcbZtmKqBFMm9H4f2FSz+tHVkDnmsvn12I4sdJJ5A==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-14.1.0.tgz",
+      "integrity": "sha512-vcSxHJIr6lP0Fgo8jl0sTHg+OZxZn+skGjiyB62erfgw/R2QqJl0ZVSY8SRcbk9LtHo/ZGld1tnaOyjL2e3cLQ==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">= 10"
+        "node": ">= 18"
       }
     },
     "node_modules/@matrix-org/olm": {
       "version": "3.2.15",
       "resolved": "https://registry.npmjs.org/@matrix-org/olm/-/olm-3.2.15.tgz",
-      "integrity": "sha512-S7lOrndAK9/8qOtaTq/WhttJC/o4GAzdfK0MUPpo8ApzsJEC0QjtwrkC3KBXdFP1cD1MXi/mlKR7aaoVMKgs6Q=="
+      "integrity": "sha512-S7lOrndAK9/8qOtaTq/WhttJC/o4GAzdfK0MUPpo8ApzsJEC0QjtwrkC3KBXdFP1cD1MXi/mlKR7aaoVMKgs6Q==",
+      "license": "Apache-2.0"
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -4589,7 +4592,8 @@
     "node_modules/@types/events": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.3.tgz",
-      "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g=="
+      "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==",
+      "license": "MIT"
     },
     "node_modules/@types/file-saver": {
       "version": "2.0.5",
@@ -4678,7 +4682,8 @@
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "license": "MIT"
     },
     "node_modules/@types/sanitize-html": {
       "version": "2.9.0",
@@ -5088,7 +5093,8 @@
     "node_modules/another-json": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/another-json/-/another-json-0.2.0.tgz",
-      "integrity": "sha512-/Ndrl68UQLhnCdsAzEXLMFuOR546o2qbYRqCglaNHbjXrwG1ayTcdwr3zkSGOGtGXDyR5X9nCFfnyG2AFJIsqg=="
+      "integrity": "sha512-/Ndrl68UQLhnCdsAzEXLMFuOR546o2qbYRqCglaNHbjXrwG1ayTcdwr3zkSGOGtGXDyR5X9nCFfnyG2AFJIsqg==",
+      "license": "Apache-2.0"
     },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
@@ -5431,6 +5437,12 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/badwords-list": {
+      "version": "2.0.1-4",
+      "resolved": "https://registry.npmjs.org/badwords-list/-/badwords-list-2.0.1-4.tgz",
+      "integrity": "sha512-FxfZUp7B9yCnesNtFQS9v6PvZdxTYa14Q60JR6vhjdQdWI4naTjJIyx22JzoER8ooeT8SAAKoHLjKfCV7XgYUQ==",
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5438,9 +5450,10 @@
       "devOptional": true
     },
     "node_modules/base-x": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.0.tgz",
-      "integrity": "sha512-sMW3VGSX1QWVFA6l8U62MLKz29rRfpTlYdCqLdpLo1/Yd4zZwSbnUaDfciIAowAqvq7YFnWq9hrhdg1KYgc1lQ=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
+      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
+      "license": "MIT"
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -5546,6 +5559,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
       "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
+      "license": "MIT",
       "dependencies": {
         "base-x": "^5.0.0"
       }
@@ -5848,6 +5862,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6999,6 +7014,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
       }
@@ -7249,15 +7265,16 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.1.0.tgz",
-      "integrity": "sha512-KwAG8bH3jsyZ9FKPMg+6ABV2YOcpp4nL0cCelsalnaPeRThkc5fgG1Xj5mhmdffYKjEXpEbERi5qmGbepgJryg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.2.0.tgz",
+      "integrity": "sha512-uOfck5eWEIK11rhOAEdSoPIvMXwv+D1Go03pxSAKezWVb+uRoBdmE6LEqiLOF+ac4DGmZRMPvpdDsXCg7EVNIg==",
+      "license": "Apache-2.0",
       "peerDependencies": {
-        "@vanilla-extract/css": "^1.9.2",
-        "@vanilla-extract/recipes": "^0.3.0",
-        "classnames": "^2.3.2",
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0"
+        "@vanilla-extract/css": "1.9.2",
+        "@vanilla-extract/recipes": "0.3.0",
+        "classnames": "2.3.2",
+        "react": "17.0.0",
+        "react-dom": "17.0.0"
       }
     },
     "node_modules/for-each": {
@@ -8557,6 +8574,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
       "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       }
@@ -8689,6 +8707,7 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
       "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
       },
@@ -8764,21 +8783,23 @@
     "node_modules/matrix-events-sdk": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz",
-      "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA=="
+      "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==",
+      "license": "Apache-2.0"
     },
     "node_modules/matrix-js-sdk": {
-      "version": "35.0.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-35.0.0.tgz",
-      "integrity": "sha512-X8hIsd/8x1SC9vRr8DiNKQxmdrfRujtvEWPz8mY4FxVDJG8HEGDHvqUmaSy2jrtnOUn4oHzGQVLFO3DnhsSf8w==",
+      "version": "37.5.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.5.0.tgz",
+      "integrity": "sha512-5tyuAi5hnKud1UkVq8Z2/3c22hWGELBZzErJPZkE6Hju2uGUfGtrIx6uj6puv0ZjvsUU3X6Qgm8vdReKO1PGig==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^11.0.0",
+        "@matrix-org/matrix-sdk-crypto-wasm": "^14.0.1",
         "@matrix-org/olm": "3.2.15",
         "another-json": "^0.2.0",
         "bs58": "^6.0.0",
         "content-type": "^1.0.4",
         "jwt-decode": "^4.0.0",
-        "loglevel": "^1.7.1",
+        "loglevel": "^1.9.2",
         "matrix-events-sdk": "0.0.1",
         "matrix-widget-api": "^1.10.0",
         "oidc-client-ts": "^3.0.1",
@@ -8792,21 +8813,23 @@
       }
     },
     "node_modules/matrix-js-sdk/node_modules/uuid": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
-      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
       ],
+      "license": "MIT",
       "bin": {
         "uuid": "dist/esm/bin/uuid"
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.12.0.tgz",
-      "integrity": "sha512-6JRd9fJGGvuBRhcTg9wX+Skn/Q1wox3jdp5yYQKJ6pPw4urW9bkTR90APBKVDB1vorJKT44jml+lCzkDMRBjww==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.1.tgz",
+      "integrity": "sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",
         "events": "^3.2.0"
@@ -9198,9 +9221,10 @@
       }
     },
     "node_modules/oidc-client-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.1.0.tgz",
-      "integrity": "sha512-IDopEXjiwjkmJLYZo6BTlvwOtnlSniWZkKZoXforC/oLZHC9wkIxd25Kwtmo5yKFMMVcsp3JY6bhcNJqdYk8+g==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.2.1.tgz",
+      "integrity": "sha512-hS5AJ5s/x4bXhHvNJT1v+GGvzHUwdRWqNQQbSrp10L1IRmzfRGKQ3VWN3dstJb+oF3WtAyKezwD2+dTEIyBiAA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "jwt-decode": "^4.0.0"
       },
@@ -9288,6 +9312,7 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
       "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/retry": "0.12.0",
         "retry": "^0.13.1"
@@ -10051,6 +10076,7 @@
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
       "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -10264,6 +10290,7 @@
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.15.0.tgz",
       "integrity": "sha512-KrOH82c/W+GYQ0LHqtr3caRpM3ITglq3ljGUIb8LTki7ByacJZ9z+piSGiwZDsRyhQbYBOBJgr2k6X4BZXi3Kw==",
+      "license": "MIT",
       "bin": {
         "sdp-verify": "checker.js"
       }
@@ -11172,7 +11199,8 @@
     "node_modules/unhomoglyph": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/unhomoglyph/-/unhomoglyph-1.0.6.tgz",
-      "integrity": "sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg=="
+      "integrity": "sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg==",
+      "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
@@ -11303,9 +11331,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.15.tgz",
-      "integrity": "sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==",
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
diff --git a/package.json b/package.json
index b489dc2c..f1816cdd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.6.0",
+  "version": "4.9.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -32,6 +32,7 @@
     "@vanilla-extract/recipes": "0.3.0",
     "@vanilla-extract/vite-plugin": "3.7.1",
     "await-to-js": "3.0.0",
+    "badwords-list": "2.0.1-4",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
     "chroma-js": "3.1.2",
@@ -44,7 +45,7 @@
     "file-saver": "2.0.5",
     "flux": "4.0.3",
     "focus-trap-react": "10.0.2",
-    "folds": "2.1.0",
+    "folds": "2.2.0",
     "formik": "2.4.6",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
@@ -56,7 +57,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "35.0.0",
+    "matrix-js-sdk": "37.5.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -109,7 +110,7 @@
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "5.4.15",
+    "vite": "5.4.19",
     "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.4"
diff --git a/src/app/atoms/time/Time.jsx b/src/app/atoms/time/Time.jsx
index 750b958f..d7bbe439 100644
--- a/src/app/atoms/time/Time.jsx
+++ b/src/app/atoms/time/Time.jsx
@@ -4,10 +4,25 @@ import PropTypes from 'prop-types';
 import dateFormat from 'dateformat';
 import { isInSameDay } from '../../../util/common';
 
-function Time({ timestamp, fullTime }) {
+/**
+ * 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, 'dd mmmm yyyy, hh:MM TT');
+  const formattedFullTime = dateFormat(
+    date,
+    hour24Clock ? 'dd mmmm yyyy, HH:MM' : 'dd mmmm yyyy, hh:MM TT'
+  );
   let formattedDate = formattedFullTime;
 
   if (!fullTime) {
@@ -16,17 +31,19 @@ function Time({ timestamp, fullTime }) {
     compareDate.setDate(compareDate.getDate() - 1);
     const isYesterday = isInSameDay(date, compareDate);
 
-    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
+    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}
-    >
+    <time dateTime={date.toISOString()} title={formattedFullTime}>
       {formattedDate}
     </time>
   );
@@ -39,6 +56,8 @@ Time.defaultProps = {
 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/components/CapabilitiesAndMediaConfigLoader.tsx b/src/app/components/CapabilitiesAndMediaConfigLoader.tsx
deleted file mode 100644
index 574d0ca7..00000000
--- a/src/app/components/CapabilitiesAndMediaConfigLoader.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { Capabilities } from 'matrix-js-sdk';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { MediaConfig } from '../hooks/useMediaConfig';
-import { promiseFulfilledResult } from '../utils/common';
-
-type CapabilitiesAndMediaConfigLoaderProps = {
-  children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode;
-};
-export function CapabilitiesAndMediaConfigLoader({
-  children,
-}: CapabilitiesAndMediaConfigLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback<
-    [Capabilities | undefined, MediaConfig | undefined],
-    unknown,
-    []
-  >(
-    useCallback(async () => {
-      const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
-      const capabilities = promiseFulfilledResult(result[0]);
-      const mediaConfig = promiseFulfilledResult(result[1]);
-      return [capabilities, mediaConfig];
-    }, [mx])
-  );
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const [capabilities, mediaConfig] =
-    state.status === AsyncStatus.Success ? state.data : [undefined, undefined];
-  return children(capabilities, mediaConfig);
-}
diff --git a/src/app/components/JoinRulesSwitcher.tsx b/src/app/components/JoinRulesSwitcher.tsx
index e78c19ce..9507317a 100644
--- a/src/app/components/JoinRulesSwitcher.tsx
+++ b/src/app/components/JoinRulesSwitcher.tsx
@@ -17,12 +17,16 @@ import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
 
-type JoinRuleIcons = Record<JoinRule, IconSrc>;
+export type ExtraJoinRules = 'knock_restricted';
+export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
+
+type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
 export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
   useMemo(
     () => ({
       [JoinRule.Invite]: Icons.HashLock,
       [JoinRule.Knock]: Icons.HashLock,
+      knock_restricted: Icons.Hash,
       [JoinRule.Restricted]: Icons.Hash,
       [JoinRule.Public]: Icons.HashGlobe,
       [JoinRule.Private]: Icons.HashLock,
@@ -34,6 +38,7 @@ export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
     () => ({
       [JoinRule.Invite]: Icons.SpaceLock,
       [JoinRule.Knock]: Icons.SpaceLock,
+      knock_restricted: Icons.Space,
       [JoinRule.Restricted]: Icons.Space,
       [JoinRule.Public]: Icons.SpaceGlobe,
       [JoinRule.Private]: Icons.SpaceLock,
@@ -41,12 +46,13 @@ export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
     []
   );
 
-type JoinRuleLabels = Record<JoinRule, string>;
+type JoinRuleLabels = Record<ExtendedJoinRules, string>;
 export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
   useMemo(
     () => ({
       [JoinRule.Invite]: 'Invite Only',
       [JoinRule.Knock]: 'Knock & Invite',
+      knock_restricted: 'Space Members or Knock',
       [JoinRule.Restricted]: 'Space Members',
       [JoinRule.Public]: 'Public',
       [JoinRule.Private]: 'Invite Only',
@@ -54,7 +60,7 @@ export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
     []
   );
 
-type JoinRulesSwitcherProps<T extends JoinRule[]> = {
+type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
   icons: JoinRuleIcons;
   labels: JoinRuleLabels;
   rules: T;
@@ -63,7 +69,7 @@ type JoinRulesSwitcherProps<T extends JoinRule[]> = {
   disabled?: boolean;
   changing?: boolean;
 };
-export function JoinRulesSwitcher<T extends JoinRule[]>({
+export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
   icons,
   labels,
   rules,
@@ -79,7 +85,7 @@ export function JoinRulesSwitcher<T extends JoinRule[]>({
   };
 
   const handleChange = useCallback(
-    (selectedRule: JoinRule) => {
+    (selectedRule: ExtendedJoinRules) => {
       setCords(undefined);
       onChange(selectedRule);
     },
@@ -131,7 +137,7 @@ export function JoinRulesSwitcher<T extends JoinRule[]>({
         fill="Soft"
         radii="300"
         outlined
-        before={<Icon size="100" src={icons[value]} />}
+        before={<Icon size="100" src={icons[value] ?? icons[JoinRule.Restricted]} />}
         after={
           changing ? (
             <Spinner size="100" variant="Secondary" fill="Soft" />
@@ -142,7 +148,7 @@ export function JoinRulesSwitcher<T extends JoinRule[]>({
         onClick={handleOpenMenu}
         disabled={disabled}
       >
-        <Text size="B300">{labels[value]}</Text>
+        <Text size="B300">{labels[value] ?? 'Unsupported'}</Text>
       </Button>
     </PopOut>
   );
diff --git a/src/app/components/SecretStorage.tsx b/src/app/components/SecretStorage.tsx
index 55d466d7..9d8628e5 100644
--- a/src/app/components/SecretStorage.tsx
+++ b/src/app/components/SecretStorage.tsx
@@ -1,7 +1,6 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
 import { PasswordInput } from './password-input';
 import {
   SecretStorageKeyContent,
@@ -29,11 +28,16 @@ export function SecretStorageRecoveryPassphrase({
   const [driveKeyState, submitPassphrase] = useAsyncCallback<
     Uint8Array,
     Error,
-    Parameters<typeof deriveKey>
+    Parameters<typeof deriveRecoveryKeyFromPassphrase>
   >(
     useCallback(
       async (passphrase, salt, iterations, bits) => {
-        const decodedRecoveryKey = await deriveKey(passphrase, salt, iterations, bits);
+        const decodedRecoveryKey = await deriveRecoveryKeyFromPassphrase(
+          passphrase,
+          salt,
+          iterations,
+          bits
+        );
 
         const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
 
diff --git a/src/app/components/ServerConfigsLoader.tsx b/src/app/components/ServerConfigsLoader.tsx
new file mode 100644
index 00000000..3c8ce8eb
--- /dev/null
+++ b/src/app/components/ServerConfigsLoader.tsx
@@ -0,0 +1,52 @@
+import { ReactNode, useCallback, useMemo } from 'react';
+import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { MediaConfig } from '../hooks/useMediaConfig';
+import { promiseFulfilledResult } from '../utils/common';
+
+export type ServerConfigs = {
+  capabilities?: Capabilities;
+  mediaConfig?: MediaConfig;
+  authMetadata?: ValidatedAuthMetadata;
+};
+
+type ServerConfigsLoaderProps = {
+  children: (configs: ServerConfigs) => ReactNode;
+};
+export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
+  const mx = useMatrixClient();
+  const fallbackConfigs = useMemo(() => ({}), []);
+
+  const [configsState] = useAsyncCallbackValue<ServerConfigs, unknown>(
+    useCallback(async () => {
+      const result = await Promise.allSettled([
+        mx.getCapabilities(),
+        mx.getMediaConfig(),
+        mx.getAuthMetadata(),
+      ]);
+
+      const capabilities = promiseFulfilledResult(result[0]);
+      const mediaConfig = promiseFulfilledResult(result[1]);
+      const authMetadata = promiseFulfilledResult(result[2]);
+      let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
+
+      try {
+        validatedAuthMetadata = validateAuthMetadata(authMetadata);
+      } catch (e) {
+        console.error(e);
+      }
+
+      return {
+        capabilities,
+        mediaConfig,
+        authMetadata: validatedAuthMetadata,
+      };
+    }, [mx])
+  );
+
+  const configs: ServerConfigs =
+    configsState.status === AsyncStatus.Success ? configsState.data : fallbackConfigs;
+
+  return children(configs);
+}
diff --git a/src/app/components/UserRoomProfileRenderer.tsx b/src/app/components/UserRoomProfileRenderer.tsx
new file mode 100644
index 00000000..ca7aa837
--- /dev/null
+++ b/src/app/components/UserRoomProfileRenderer.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Menu, PopOut, toRem } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
+import { UserRoomProfile } from './user-profile';
+import { UserRoomProfileState } from '../state/userRoomProfile';
+import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
+import { stopPropagation } from '../utils/keyboard';
+import { SpaceProvider } from '../hooks/useSpace';
+import { RoomProvider } from '../hooks/useRoom';
+
+function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
+  const { roomId, spaceId, userId, cords, position } = state;
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const room = getRoom(roomId);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  const close = useCloseUserRoomProfile();
+
+  if (!room) return null;
+
+  return (
+    <PopOut
+      anchor={cords}
+      position={position ?? 'Top'}
+      align="Start"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ width: toRem(340) }}>
+            <SpaceProvider value={space ?? null}>
+              <RoomProvider value={room}>
+                <UserRoomProfile userId={userId} />
+              </RoomProvider>
+            </SpaceProvider>
+          </Menu>
+        </FocusTrap>
+      }
+    />
+  );
+}
+
+export function UserRoomProfileRenderer() {
+  const state = useUserRoomProfileState();
+
+  if (!state) return null;
+  return <UserRoomProfileContextMenu state={state} />;
+}
diff --git a/src/app/components/create-room/AdditionalCreatorInput.tsx b/src/app/components/create-room/AdditionalCreatorInput.tsx
new file mode 100644
index 00000000..84b92231
--- /dev/null
+++ b/src/app/components/create-room/AdditionalCreatorInput.tsx
@@ -0,0 +1,294 @@
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Line,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  toRem,
+} from 'folds';
+import { isKeyHotkey } from 'is-hotkey';
+import FocusTrap from 'focus-trap-react';
+import React, {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useMemo,
+  useState,
+} from 'react';
+import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
+import { useDirectUsers } from '../../hooks/useDirectUsers';
+import { SettingTile } from '../setting-tile';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { stopPropagation } from '../../utils/keyboard';
+import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
+import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
+
+export const useAdditionalCreators = (defaultCreators?: string[]) => {
+  const mx = useMatrixClient();
+  const [additionalCreators, setAdditionalCreators] = useState<string[]>(
+    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
+  );
+
+  const addAdditionalCreator = (userId: string) => {
+    if (userId === mx.getSafeUserId()) return;
+
+    setAdditionalCreators((creators) => {
+      const creatorsSet = new Set(creators);
+      creatorsSet.add(userId);
+      return Array.from(creatorsSet);
+    });
+  };
+
+  const removeAdditionalCreator = (userId: string) => {
+    setAdditionalCreators((creators) => {
+      const creatorsSet = new Set(creators);
+      creatorsSet.delete(userId);
+      return Array.from(creatorsSet);
+    });
+  };
+
+  return {
+    additionalCreators,
+    addAdditionalCreator,
+    removeAdditionalCreator,
+  };
+};
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 1000,
+  matchOptions: {
+    contain: true,
+  },
+};
+const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
+
+type AdditionalCreatorInputProps = {
+  additionalCreators: string[];
+  onSelect: (userId: string) => void;
+  onRemove: (userId: string) => void;
+  disabled?: boolean;
+};
+export function AdditionalCreatorInput({
+  additionalCreators,
+  onSelect,
+  onRemove,
+  disabled,
+}: AdditionalCreatorInputProps) {
+  const mx = useMatrixClient();
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const directUsers = useDirectUsers();
+
+  const [validUserId, setValidUserId] = useState<string>();
+  const filteredUsers = useMemo(
+    () => directUsers.filter((userId) => !additionalCreators.includes(userId)),
+    [directUsers, additionalCreators]
+  );
+  const [result, search, resetSearch] = useAsyncSearch(
+    filteredUsers,
+    getUserIdString,
+    SEARCH_OPTIONS
+  );
+  const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
+
+  const suggestionUsers = result
+    ? result.items
+    : filteredUsers.sort((a, b) => (a.toLocaleLowerCase() >= b.toLocaleLowerCase() ? 1 : -1));
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+  const handleCloseMenu = () => {
+    setMenuCords(undefined);
+    setValidUserId(undefined);
+    resetSearch();
+  };
+
+  const handleCreatorChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const creatorInput = evt.currentTarget;
+    const creator = creatorInput.value.trim();
+    if (isUserId(creator)) {
+      setValidUserId(creator);
+    } else {
+      setValidUserId(undefined);
+      const term =
+        getMxIdLocalPart(creator) ?? (creator.startsWith('@') ? creator.slice(1) : creator);
+      if (term) {
+        search(term);
+      } else {
+        resetSearch();
+      }
+    }
+  };
+
+  const handleSelectUserId = (userId?: string) => {
+    if (userId && isUserId(userId)) {
+      onSelect(userId);
+      handleCloseMenu();
+    }
+  };
+
+  const handleCreatorKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('enter', evt)) {
+      evt.preventDefault();
+      const creator = evt.currentTarget.value.trim();
+      handleSelectUserId(isUserId(creator) ? creator : suggestionUsers[0]);
+    }
+  };
+
+  const handleEnterClick = () => {
+    handleSelectUserId(validUserId);
+  };
+
+  return (
+    <SettingTile
+      title="Founders"
+      description="Special privileged users can be assigned during creation. These users have elevated control and can only be modified during a upgrade."
+    >
+      <Box shrink="No" direction="Column" gap="100">
+        <Box gap="200" wrap="Wrap">
+          <Chip type="button" variant="Primary" radii="Pill" outlined>
+            <Text size="B300">{mx.getSafeUserId()}</Text>
+          </Chip>
+          {additionalCreators.map((creator) => (
+            <Chip
+              type="button"
+              key={creator}
+              variant="Secondary"
+              radii="Pill"
+              after={<Icon size="50" src={Icons.Cross} />}
+              onClick={() => onRemove(creator)}
+              disabled={disabled}
+            >
+              <Text size="B300">{creator}</Text>
+            </Chip>
+          ))}
+          <PopOut
+            anchor={menuCords}
+            position="Bottom"
+            align="Center"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  onDeactivate: handleCloseMenu,
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu
+                  style={{
+                    width: '100vw',
+                    maxWidth: toRem(300),
+                    height: toRem(250),
+                    display: 'flex',
+                  }}
+                >
+                  <Box grow="Yes" direction="Column">
+                    <Box shrink="No" gap="100" style={{ padding: config.space.S100 }}>
+                      <Box grow="Yes" direction="Column" gap="100">
+                        <Input
+                          size="400"
+                          variant="Background"
+                          radii="300"
+                          outlined
+                          placeholder="@username:server"
+                          onChange={handleCreatorChange}
+                          onKeyDown={handleCreatorKeyDown}
+                        />
+                      </Box>
+                      <Button
+                        type="button"
+                        variant="Success"
+                        radii="300"
+                        onClick={handleEnterClick}
+                        disabled={!validUserId}
+                      >
+                        <Text size="B400">Enter</Text>
+                      </Button>
+                    </Box>
+                    <Line size="300" />
+                    <Box grow="Yes" direction="Column">
+                      {!validUserId && suggestionUsers.length > 0 ? (
+                        <Scroll size="300" hideTrack>
+                          <Box
+                            grow="Yes"
+                            direction="Column"
+                            gap="100"
+                            style={{ padding: config.space.S200, paddingRight: 0 }}
+                          >
+                            {suggestionUsers.map((userId) => (
+                              <MenuItem
+                                key={userId}
+                                size="300"
+                                variant="Surface"
+                                radii="300"
+                                onClick={() => handleSelectUserId(userId)}
+                                after={
+                                  <Text size="T200" truncate>
+                                    {getMxIdServer(userId)}
+                                  </Text>
+                                }
+                              >
+                                <Box grow="Yes">
+                                  <Text size="T200" truncate>
+                                    <b>
+                                      {queryHighlighRegex
+                                        ? highlightText(queryHighlighRegex, [
+                                            getMxIdLocalPart(userId) ?? userId,
+                                          ])
+                                        : getMxIdLocalPart(userId)}
+                                    </b>
+                                  </Text>
+                                </Box>
+                              </MenuItem>
+                            ))}
+                          </Box>
+                        </Scroll>
+                      ) : (
+                        <Box
+                          grow="Yes"
+                          alignItems="Center"
+                          justifyContent="Center"
+                          direction="Column"
+                          gap="100"
+                        >
+                          <Text size="H6" align="Center">
+                            No Suggestions
+                          </Text>
+                          <Text size="T200" align="Center">
+                            Please provide the user ID and hit Enter.
+                          </Text>
+                        </Box>
+                      )}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <Chip
+              type="button"
+              variant="Secondary"
+              radii="Pill"
+              onClick={handleOpenMenu}
+              aria-pressed={!!menuCords}
+              disabled={disabled}
+            >
+              <Icon size="50" src={Icons.Plus} />
+            </Chip>
+          </PopOut>
+        </Box>
+      </Box>
+    </SettingTile>
+  );
+}
diff --git a/src/app/components/create-room/CreateRoomAliasInput.tsx b/src/app/components/create-room/CreateRoomAliasInput.tsx
new file mode 100644
index 00000000..e84658c0
--- /dev/null
+++ b/src/app/components/create-room/CreateRoomAliasInput.tsx
@@ -0,0 +1,118 @@
+import React, {
+  FormEventHandler,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { MatrixError } from 'matrix-js-sdk';
+import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
+import { isKeyHotkey } from 'is-hotkey';
+import { getMxIdServer } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { replaceSpaceWithDash } from '../../utils/common';
+import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
+import { useDebounce } from '../../hooks/useDebounce';
+
+export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
+  const mx = useMatrixClient();
+  const aliasInputRef = useRef<HTMLInputElement>(null);
+  const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
+    status: AsyncStatus.Idle,
+  });
+
+  useEffect(() => {
+    if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
+      setAliasAvail({ status: AsyncStatus.Idle });
+    }
+  }, [aliasAvail]);
+
+  const checkAliasAvail = useAsync(
+    useCallback(
+      async (aliasLocalPart: string) => {
+        const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
+        try {
+          const result = await mx.getRoomIdForAlias(roomAlias);
+          return typeof result.room_id !== 'string';
+        } catch (e) {
+          if (e instanceof MatrixError && e.httpStatus === 404) {
+            return true;
+          }
+          throw e;
+        }
+      },
+      [mx]
+    ),
+    setAliasAvail
+  );
+  const aliasAvailable: boolean | undefined =
+    aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
+
+  const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
+
+  const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
+    const aliasInput = evt.currentTarget;
+    const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
+    if (aliasLocalPart) {
+      aliasInput.value = aliasLocalPart;
+      debounceCheckAliasAvail(aliasLocalPart);
+    } else {
+      setAliasAvail({ status: AsyncStatus.Idle });
+    }
+  };
+
+  const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('enter', evt)) {
+      evt.preventDefault();
+
+      const aliasInput = evt.currentTarget;
+      const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
+      if (aliasLocalPart) {
+        checkAliasAvail(aliasLocalPart);
+      } else {
+        setAliasAvail({ status: AsyncStatus.Idle });
+      }
+    }
+  };
+
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <Text size="L400">Address (Optional)</Text>
+      <Text size="T200" priority="300">
+        Pick an unique address to make it discoverable.
+      </Text>
+      <Input
+        ref={aliasInputRef}
+        onChange={handleAliasChange}
+        before={
+          aliasAvail.status === AsyncStatus.Loading ? (
+            <Spinner size="100" variant="Secondary" />
+          ) : (
+            <Icon size="100" src={Icons.Hash} />
+          )
+        }
+        after={
+          <Text style={{ maxWidth: toRem(150) }} truncate>
+            :{getMxIdServer(mx.getSafeUserId())}
+          </Text>
+        }
+        onKeyDown={handleAliasKeyDown}
+        name="aliasInput"
+        size="500"
+        variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
+        radii="400"
+        autoComplete="off"
+        disabled={disabled}
+      />
+      {aliasAvailable === false && (
+        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
+          <Icon src={Icons.Warning} filled size="50" />
+          <Text size="T200">
+            <b>This address is already taken. Please select a different one.</b>
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/components/create-room/CreateRoomKindSelector.tsx b/src/app/components/create-room/CreateRoomKindSelector.tsx
new file mode 100644
index 00000000..096954fb
--- /dev/null
+++ b/src/app/components/create-room/CreateRoomKindSelector.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { SequenceCard } from '../sequence-card';
+import { SettingTile } from '../setting-tile';
+
+export enum CreateRoomKind {
+  Private = 'private',
+  Restricted = 'restricted',
+  Public = 'public',
+}
+type CreateRoomKindSelectorProps = {
+  value?: CreateRoomKind;
+  onSelect: (value: CreateRoomKind) => void;
+  canRestrict?: boolean;
+  disabled?: boolean;
+  getIcon: (kind: CreateRoomKind) => IconSrc;
+};
+export function CreateRoomKindSelector({
+  value,
+  onSelect,
+  canRestrict,
+  disabled,
+  getIcon,
+}: CreateRoomKindSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      {canRestrict && (
+        <SequenceCard
+          style={{ padding: config.space.S300 }}
+          variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
+          direction="Column"
+          gap="100"
+          as="button"
+          type="button"
+          aria-pressed={value === CreateRoomKind.Restricted}
+          onClick={() => onSelect(CreateRoomKind.Restricted)}
+          disabled={disabled}
+        >
+          <SettingTile
+            before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
+            after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
+          >
+            <Text size="H6">Restricted</Text>
+            <Text size="T300" priority="300">
+              Only member of parent space can join.
+            </Text>
+          </SettingTile>
+        </SequenceCard>
+      )}
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomKind.Private}
+        onClick={() => onSelect(CreateRoomKind.Private)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
+          after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Private</Text>
+          <Text size="T300" priority="300">
+            Only people with invite can join.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomKind.Public}
+        onClick={() => onSelect(CreateRoomKind.Public)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
+          after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Public</Text>
+          <Text size="T300" priority="300">
+            Anyone with the address can join.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/components/create-room/RoomVersionSelector.tsx b/src/app/components/create-room/RoomVersionSelector.tsx
new file mode 100644
index 00000000..219ded0c
--- /dev/null
+++ b/src/app/components/create-room/RoomVersionSelector.tsx
@@ -0,0 +1,117 @@
+import React, { MouseEventHandler, useState } from 'react';
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Menu,
+  PopOut,
+  RectCords,
+  Text,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { SettingTile } from '../setting-tile';
+import { SequenceCard } from '../sequence-card';
+import { stopPropagation } from '../../utils/keyboard';
+
+export function RoomVersionSelector({
+  versions,
+  value,
+  onChange,
+  disabled,
+}: {
+  versions: string[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (version: string) => {
+    setMenuCords(undefined);
+    onChange(version);
+  };
+
+  return (
+    <SequenceCard
+      style={{ padding: config.space.S300 }}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="500"
+    >
+      <SettingTile
+        title="Version"
+        after={
+          <PopOut
+            anchor={menuCords}
+            offset={5}
+            position="Bottom"
+            align="End"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setMenuCords(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                  isKeyBackward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu>
+                  <Box
+                    direction="Column"
+                    gap="200"
+                    style={{ padding: config.space.S200, maxWidth: toRem(300) }}
+                  >
+                    <Text size="L400">Versions</Text>
+                    <Box wrap="Wrap" gap="100">
+                      {versions.map((version) => (
+                        <Chip
+                          key={version}
+                          variant={value === version ? 'Primary' : 'SurfaceVariant'}
+                          aria-pressed={value === version}
+                          outlined={value === version}
+                          radii="300"
+                          onClick={() => handleSelect(version)}
+                          type="button"
+                        >
+                          <Text truncate size="T300">
+                            {version}
+                          </Text>
+                        </Chip>
+                      ))}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <Button
+              type="button"
+              onClick={handleMenu}
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              aria-pressed={!!menuCords}
+              before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
+              disabled={disabled}
+            >
+              <Text size="B300">{value}</Text>
+            </Button>
+          </PopOut>
+        }
+      />
+    </SequenceCard>
+  );
+}
diff --git a/src/app/components/create-room/index.ts b/src/app/components/create-room/index.ts
new file mode 100644
index 00000000..ffd9cb3d
--- /dev/null
+++ b/src/app/components/create-room/index.ts
@@ -0,0 +1,5 @@
+export * from './CreateRoomKindSelector';
+export * from './CreateRoomAliasInput';
+export * from './RoomVersionSelector';
+export * from './utils';
+export * from './AdditionalCreatorInput';
diff --git a/src/app/components/create-room/utils.ts b/src/app/components/create-room/utils.ts
new file mode 100644
index 00000000..a0ca7488
--- /dev/null
+++ b/src/app/components/create-room/utils.ts
@@ -0,0 +1,140 @@
+import {
+  ICreateRoomOpts,
+  ICreateRoomStateEvent,
+  JoinRule,
+  MatrixClient,
+  RestrictedAllowType,
+  Room,
+} from 'matrix-js-sdk';
+import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
+import { CreateRoomKind } from './CreateRoomKindSelector';
+import { RoomType, StateEvent } from '../../../types/matrix/room';
+import { getViaServers } from '../../plugins/via-servers';
+import { getMxIdServer } from '../../utils/matrix';
+
+export const createRoomCreationContent = (
+  type: RoomType | undefined,
+  allowFederation: boolean,
+  additionalCreators: string[] | undefined
+): object => {
+  const content: Record<string, any> = {};
+  if (typeof type === 'string') {
+    content.type = type;
+  }
+  if (allowFederation === false) {
+    content['m.federate'] = false;
+  }
+  if (Array.isArray(additionalCreators)) {
+    content.additional_creators = additionalCreators;
+  }
+
+  return content;
+};
+
+export const createRoomJoinRulesState = (
+  kind: CreateRoomKind,
+  parent: Room | undefined,
+  knock: boolean
+) => {
+  let content: RoomJoinRulesEventContent = {
+    join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
+  };
+
+  if (kind === CreateRoomKind.Public) {
+    content = {
+      join_rule: JoinRule.Public,
+    };
+  }
+
+  if (kind === CreateRoomKind.Restricted && parent) {
+    content = {
+      join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
+      allow: [
+        {
+          type: RestrictedAllowType.RoomMembership,
+          room_id: parent.roomId,
+        },
+      ],
+    };
+  }
+
+  return {
+    type: StateEvent.RoomJoinRules,
+    state_key: '',
+    content,
+  };
+};
+
+export const createRoomParentState = (parent: Room) => ({
+  type: StateEvent.SpaceParent,
+  state_key: parent.roomId,
+  content: {
+    canonical: true,
+    via: getViaServers(parent),
+  },
+});
+
+export const createRoomEncryptionState = () => ({
+  type: 'm.room.encryption',
+  state_key: '',
+  content: {
+    algorithm: 'm.megolm.v1.aes-sha2',
+  },
+});
+
+export type CreateRoomData = {
+  version: string;
+  type?: RoomType;
+  parent?: Room;
+  kind: CreateRoomKind;
+  name: string;
+  topic?: string;
+  aliasLocalPart?: string;
+  encryption?: boolean;
+  knock: boolean;
+  allowFederation: boolean;
+  additionalCreators?: string[];
+};
+export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
+  const initialState: ICreateRoomStateEvent[] = [];
+
+  if (data.encryption) {
+    initialState.push(createRoomEncryptionState());
+  }
+
+  if (data.parent) {
+    initialState.push(createRoomParentState(data.parent));
+  }
+
+  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
+
+  const options: ICreateRoomOpts = {
+    room_version: data.version,
+    name: data.name,
+    topic: data.topic,
+    room_alias_name: data.aliasLocalPart,
+    creation_content: createRoomCreationContent(
+      data.type,
+      data.allowFederation,
+      data.additionalCreators
+    ),
+    initial_state: initialState,
+  };
+
+  const result = await mx.createRoom(options);
+
+  if (data.parent) {
+    await mx.sendStateEvent(
+      data.parent.roomId,
+      StateEvent.SpaceChild as any,
+      {
+        auto_join: false,
+        suggested: false,
+        via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
+      },
+      result.room_id
+    );
+  }
+
+  return result.room_id;
+};
diff --git a/src/app/components/editor/Editor.css.ts b/src/app/components/editor/Editor.css.ts
index 09a444ec..d128ed07 100644
--- a/src/app/components/editor/Editor.css.ts
+++ b/src/app/components/editor/Editor.css.ts
@@ -41,21 +41,21 @@ export const EditorTextarea = style([
   },
 ]);
 
-export const EditorPlaceholder = style([
+export const EditorPlaceholderContainer = style([
   DefaultReset,
   {
-    position: 'absolute',
-    zIndex: 1,
-    width: '100%',
     opacity: config.opacity.Placeholder,
     pointerEvents: 'none',
     userSelect: 'none',
+  },
+]);
 
-    selectors: {
-      '&:not(:first-child)': {
-        display: 'none',
-      },
-    },
+export const EditorPlaceholderTextVisual = style([
+  DefaultReset,
+  {
+    display: 'block',
+    paddingTop: toRem(13),
+    paddingLeft: toRem(1),
   },
 ]);
 
diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx
index 044d0837..bd848dd5 100644
--- a/src/app/components/editor/Editor.tsx
+++ b/src/app/components/editor/Editor.tsx
@@ -106,22 +106,17 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
-    const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
-      // drop style attribute as we use our custom placeholder css.
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { style, ...props } = attributes;
-      return (
-        <Text
-          as="span"
-          {...props}
-          className={css.EditorPlaceholder}
-          contentEditable={false}
-          truncate
-        >
-          {children}
-        </Text>
-      );
-    }, []);
+    const renderPlaceholder = useCallback(
+      ({ attributes, children }: RenderPlaceholderProps) => (
+        <span {...attributes} className={css.EditorPlaceholderContainer}>
+          {/* Inner component to style the actual text position and appearance */}
+          <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
+            {children}
+          </Text>
+        </span>
+      ),
+      []
+    );
 
     return (
       <div className={css.Editor} ref={ref}>
diff --git a/src/app/components/editor/Elements.tsx b/src/app/components/editor/Elements.tsx
index a7438ecd..675c4542 100644
--- a/src/app/components/editor/Elements.tsx
+++ b/src/app/components/editor/Elements.tsx
@@ -157,7 +157,7 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
         <Text as="pre" className={css.CodeBlock} {...attributes}>
           <Scroll
             direction="Horizontal"
-            variant="Secondary"
+            variant="SurfaceVariant"
             size="300"
             visibility="Hover"
             hideTrack
diff --git a/src/app/components/editor/Toolbar.tsx b/src/app/components/editor/Toolbar.tsx
index 17ba6bc2..7d701c42 100644
--- a/src/app/components/editor/Toolbar.tsx
+++ b/src/app/components/editor/Toolbar.tsx
@@ -339,7 +339,7 @@ export function Toolbar() {
           <Box className={css.MarkdownBtnBox} shrink="No" grow="Yes" justifyContent="End">
             <TooltipProvider
               align="End"
-              tooltip={<BtnTooltip text="Toggle Markdown" />}
+              tooltip={<BtnTooltip text={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'} />}
               delay={500}
             >
               {(triggerRef) => (
diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index cc431f58..b0c64f60 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -9,7 +9,7 @@ import { getDirectRoomAvatarUrl } from '../../../utils/room';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AutocompleteQuery } from './autocompleteQuery';
 import { AutocompleteMenu } from './AutocompleteMenu';
-import { getMxIdServer, validMxId } from '../../../utils/matrix';
+import { getMxIdServer, isRoomAlias } from '../../../utils/matrix';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
 import { useKeyDown } from '../../../hooks/useKeyDown';
@@ -22,7 +22,7 @@ import { getViaServers } from '../../../plugins/via-servers';
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
 const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
-  validMxId(`#${text}`)
+  isRoomAlias(`#${text}`)
     ? `#${text}`
     : `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
 
diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
index d6c0f302..7a8012eb 100644
--- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
@@ -15,7 +15,7 @@ import {
 import { onTabPress } from '../../../utils/keyboard';
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
 import { useKeyDown } from '../../../hooks/useKeyDown';
-import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
+import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
 import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -24,7 +24,7 @@ import { Membership } from '../../../../types/matrix/room';
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
 const userIdFromQueryText = (mx: MatrixClient, text: string) =>
-  validMxId(`@${text}`)
+  isUserId(`@${text}`)
     ? `@${text}`
     : `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
 
diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index de1416b6..c7900237 100644
--- a/src/app/components/event-readers/EventReaders.tsx
+++ b/src/app/components/event-readers/EventReaders.tsx
@@ -19,9 +19,11 @@ import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { openProfileViewer } from '../../../client/action/navigation';
 import { UserAvatar } from '../user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { getMouseEventCords } from '../../utils/dom';
 
 export type EventReadersProps = {
   room: Room;
@@ -33,6 +35,8 @@ export const EventReaders = as<'div', EventReadersProps>(
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const latestEventReaders = useRoomEventReaders(room, eventId);
+    const openProfile = useOpenUserRoomProfile();
+    const space = useSpaceOptionally();
 
     const getName = (userId: string) =>
       getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -57,19 +61,32 @@ export const EventReaders = as<'div', EventReadersProps>(
             <Box className={css.Content} direction="Column">
               {latestEventReaders.map((readerId) => {
                 const name = getName(readerId);
-                const avatarMxcUrl = room
-                  .getMember(readerId)
-                  ?.getMxcAvatarUrl();
-                const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
+                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
+                const avatarUrl = avatarMxcUrl
+                  ? mx.mxcUrlToHttp(
+                      avatarMxcUrl,
+                      100,
+                      100,
+                      'crop',
+                      undefined,
+                      false,
+                      useAuthentication
+                    )
+                  : undefined;
 
                 return (
                   <MenuItem
                     key={readerId}
                     style={{ padding: `0 ${config.space.S200}` }}
                     radii="400"
-                    onClick={() => {
-                      requestClose();
-                      openProfileViewer(readerId, room.roomId);
+                    onClick={(event) => {
+                      openProfile(
+                        room.roomId,
+                        space?.roomId,
+                        readerId,
+                        getMouseEventCords(event.nativeEvent),
+                        'Bottom'
+                      );
                     }}
                     before={
                       <Avatar size="200">
diff --git a/src/app/components/image-pack-view/RoomImagePack.tsx b/src/app/components/image-pack-view/RoomImagePack.tsx
index 9dd45c1f..92b4ff21 100644
--- a/src/app/components/image-pack-view/RoomImagePack.tsx
+++ b/src/app/components/image-pack-view/RoomImagePack.tsx
@@ -1,12 +1,14 @@
 import React, { useCallback, useMemo } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
 import { StateEvent } from '../../../types/matrix/room';
 import { useRoomImagePack } from '../../hooks/useImagePacks';
 import { randomStr } from '../../utils/common';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
 
 type RoomImagePackProps = {
   room: Room;
@@ -17,9 +19,10 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
   const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
 
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
 
   const fallbackPack = useMemo(() => {
     const fakePackId = randomStr(4);
diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
new file mode 100644
index 00000000..ddac0576
--- /dev/null
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -0,0 +1,291 @@
+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
new file mode 100644
index 00000000..156810b8
--- /dev/null
+++ b/src/app/components/invite-user-prompt/index.ts
@@ -0,0 +1 @@
+export * from './InviteUserPrompt';
diff --git a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
new file mode 100644
index 00000000..50a89418
--- /dev/null
+++ b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
@@ -0,0 +1,131 @@
+import React, { FormEventHandler, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Button,
+  Input,
+  color,
+} from 'folds';
+import { stopPropagation } from '../../utils/keyboard';
+import { isRoomAlias, isRoomId } from '../../utils/matrix';
+import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
+import { tryDecodeURIComponent } from '../../utils/dom';
+
+type JoinAddressProps = {
+  onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
+  onCancel: () => void;
+};
+export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
+  const [invalid, setInvalid] = useState(false);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    setInvalid(false);
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const addressInput = target?.addressInput as HTMLInputElement | undefined;
+    const address = addressInput?.value.trim();
+    if (!address) return;
+
+    if (isRoomId(address) || isRoomAlias(address)) {
+      onOpen(address);
+      return;
+    }
+
+    if (testMatrixTo(address)) {
+      const decodedAddress = tryDecodeURIComponent(address);
+      const toRoom = parseMatrixToRoom(decodedAddress);
+      if (toRoom) {
+        onOpen(toRoom.roomIdOrAlias, toRoom.viaServers);
+        return;
+      }
+
+      const toEvent = parseMatrixToRoomEvent(decodedAddress);
+      if (toEvent) {
+        onOpen(toEvent.roomIdOrAlias, toEvent.viaServers, toEvent.eventId);
+        return;
+      }
+    }
+
+    setInvalid(true);
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Join with Address</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box
+              as="form"
+              onSubmit={handleSubmit}
+              style={{ padding: config.space.S400, paddingTop: 0 }}
+              direction="Column"
+              gap="400"
+            >
+              <Box direction="Column" gap="200">
+                <Text priority="400" size="T300">
+                  Enter public address to join the community. Addresses looks like:
+                </Text>
+                <Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
+                  <li>#community:server</li>
+                  <li>https://matrix.to/#/#community:server</li>
+                  <li>https://matrix.to/#/!xYzAj?via=server</li>
+                </Text>
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Address</Text>
+                <Input
+                  size="500"
+                  autoFocus
+                  name="addressInput"
+                  variant="Background"
+                  placeholder="#community:server"
+                  required
+                />
+                {invalid && (
+                  <Text size="T200" style={{ color: color.Critical.Main }}>
+                    <b>Invalid Address</b>
+                  </Text>
+                )}
+              </Box>
+              <Button type="submit" variant="Primary">
+                <Text size="B400">Open</Text>
+              </Button>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
diff --git a/src/app/components/join-address-prompt/index.ts b/src/app/components/join-address-prompt/index.ts
new file mode 100644
index 00000000..b14b8a61
--- /dev/null
+++ b/src/app/components/join-address-prompt/index.ts
@@ -0,0 +1 @@
+export * from './JoinAddressPrompt';
diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 06799391..7e5540fd 100644
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -7,7 +7,6 @@ export const ReplyBend = style({
 
 export const ThreadIndicator = style({
   opacity: config.opacity.P300,
-  gap: toRem(2),
 
   selectors: {
     'button&': {
@@ -19,11 +18,6 @@ export const ThreadIndicator = style({
   },
 });
 
-export const ThreadIndicatorIcon = style({
-  width: toRem(14),
-  height: toRem(14),
-});
-
 export const Reply = style({
   marginBottom: toRem(1),
   minWidth: 0,
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 563d1bf8..57bf2af9 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -10,8 +10,8 @@ import * as css from './Reply.css';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
 import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
-import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
 import colorMXID from '../../../util/colorMXID';
+import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
-    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
-    <Text size="T200">Threaded reply</Text>
+  <Box
+    shrink="No"
+    className={css.ThreadIndicator}
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    <Icon size="50" src={Icons.Thread} />
+    <Text size="L400">Thread</Text>
   </Box>
 ));
 
@@ -50,8 +57,7 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
-  getPowerLevel?: (userId: string) => number;
-  getPowerLevelTag?: GetPowerLevelTag;
+  getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
 };
@@ -64,8 +70,7 @@ export const Reply = as<'div', ReplyProps>(
       replyEventId,
       threadRootId,
       onClick,
-      getPowerLevel,
-      getPowerLevelTag,
+      getMemberPowerTag,
       accessibleTagColors,
       legacyUsernameColor,
       ...props
@@ -81,8 +86,7 @@ export const Reply = as<'div', ReplyProps>(
 
     const { body } = replyEvent?.getContent() ?? {};
     const sender = replyEvent?.getSender();
-    const senderPL = sender && getPowerLevel?.(sender);
-    const powerTag = typeof senderPL === 'number' ? getPowerLevelTag?.(senderPL) : undefined;
+    const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
     const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
 
     const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
@@ -97,7 +101,7 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
+      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
index a5126015..3eab5cc2 100644
--- a/src/app/components/message/Time.tsx
+++ b/src/app/components/message/Time.tsx
@@ -5,19 +5,35 @@ import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/ti
 export type TimeProps = {
   compact?: boolean;
   ts: number;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 
+/**
+ * Renders a formatted timestamp, supporting compact and full display modes.
+ *
+ * Displays the time in hour:minute format if the message is from today, yesterday, or if `compact` is true.
+ * For older messages, it shows the date and time.
+ *
+ * @param {number} ts - The timestamp to display.
+ * @param {boolean} [compact=false] - If true, always show only the time.
+ * @param {boolean} hour24Clock - Whether to use 24-hour time format.
+ * @param {string} dateFormatString - Format string for the date part.
+ * @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
+ */
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, ts, ...props }, ref) => {
+  ({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
+    const formattedTime = timeHourMinute(ts, hour24Clock);
+
     let time = '';
     if (compact) {
-      time = timeHourMinute(ts);
+      time = formattedTime;
     } else if (today(ts)) {
-      time = timeHourMinute(ts);
+      time = formattedTime;
     } else if (yesterday(ts)) {
-      time = `Yesterday ${timeHourMinute(ts)}`;
+      time = `Yesterday ${formattedTime}`;
     } else {
-      time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
+      time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
     }
 
     return (
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index 69c7ade8..cc0c0c91 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -30,6 +30,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
+import { validBlurHash } from '../../../utils/blurHash';
 
 type RenderViewerProps = {
   src: string;
@@ -77,7 +78,7 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
+    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index f6ddbb5a..0505f204 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -31,6 +31,7 @@ import {
   mxcUrlToHttp,
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { validBlurHash } from '../../../utils/blurHash';
 
 type RenderVideoProps = {
   title: string;
@@ -68,7 +69,7 @@ export const VideoContent = as<'div', VideoContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
+    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts
index f6cadd3c..bb5d8484 100644
--- a/src/app/components/message/content/style.css.ts
+++ b/src/app/components/message/content/style.css.ts
@@ -25,6 +25,7 @@ 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/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index a9b3f35f..43949cef 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -124,7 +124,7 @@ export const AvatarBase = style({
 
   selectors: {
     '&:hover': {
-      transform: `translateY(${toRem(-4)})`,
+      transform: `translateY(${toRem(-2)})`,
     },
   },
 });
diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index 55ccecee..a5456385 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -105,6 +105,20 @@ export const PageContent = as<'div'>(({ className, ...props }, ref) => (
   <div className={classNames(css.PageContent, className)} {...props} ref={ref} />
 ));
 
+export function PageHeroEmpty({ children }: { children: ReactNode }) {
+  return (
+    <Box
+      className={classNames(ContainerColor({ variant: 'SurfaceVariant' }), css.PageHeroEmpty)}
+      direction="Column"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="200"
+    >
+      {children}
+    </Box>
+  );
+}
+
 export const PageHeroSection = as<'div', ComponentProps<typeof Box>>(
   ({ className, ...props }, ref) => (
     <Box
diff --git a/src/app/components/page/style.css.ts b/src/app/components/page/style.css.ts
index 0abd4dfa..bd14cd58 100644
--- a/src/app/components/page/style.css.ts
+++ b/src/app/components/page/style.css.ts
@@ -92,6 +92,15 @@ export const PageContent = style([
   },
 ]);
 
+export const PageHeroEmpty = style([
+  DefaultReset,
+  {
+    padding: config.space.S400,
+    borderRadius: config.radii.R400,
+    minHeight: toRem(450),
+  },
+]);
+
 export const PageHeroSection = style([
   DefaultReset,
   {
diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx
new file mode 100644
index 00000000..108852f2
--- /dev/null
+++ b/src/app/components/presence/Presence.tsx
@@ -0,0 +1,80 @@
+import {
+  as,
+  Badge,
+  Box,
+  color,
+  ContainerColor,
+  MainColor,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  toRem,
+} from 'folds';
+import React, { ReactNode, useId } from 'react';
+import * as css from './styles.css';
+import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
+
+const PresenceToColor: Record<Presence, MainColor> = {
+  [Presence.Online]: 'Success',
+  [Presence.Unavailable]: 'Warning',
+  [Presence.Offline]: 'Secondary',
+};
+
+type PresenceBadgeProps = {
+  presence: Presence;
+  status?: string;
+  size?: '200' | '300' | '400' | '500';
+};
+export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
+  const label = usePresenceLabel();
+  const badgeLabelId = useId();
+
+  return (
+    <TooltipProvider
+      position="Right"
+      align="Center"
+      offset={4}
+      delay={200}
+      tooltip={
+        <Tooltip id={badgeLabelId}>
+          <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
+            <Text size="L400">{label[presence]}</Text>
+            {status && <Text size="T200">•</Text>}
+            {status && <Text size="T200">{status}</Text>}
+          </Box>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <Badge
+          aria-labelledby={badgeLabelId}
+          ref={triggerRef}
+          size={size}
+          variant={PresenceToColor[presence]}
+          fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
+          radii="Pill"
+        />
+      )}
+    </TooltipProvider>
+  );
+}
+
+type AvatarPresenceProps = {
+  badge: ReactNode;
+  variant?: ContainerColor;
+};
+export const AvatarPresence = as<'div', AvatarPresenceProps>(
+  ({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
+    <Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
+      {badge && (
+        <div
+          className={css.AvatarPresenceBadge}
+          style={{ backgroundColor: color[variant].Container }}
+        >
+          {badge}
+        </div>
+      )}
+      {children}
+    </Box>
+  )
+);
diff --git a/src/app/components/presence/index.ts b/src/app/components/presence/index.ts
new file mode 100644
index 00000000..88fcdf78
--- /dev/null
+++ b/src/app/components/presence/index.ts
@@ -0,0 +1 @@
+export * from './Presence';
diff --git a/src/app/components/presence/styles.css.ts b/src/app/components/presence/styles.css.ts
new file mode 100644
index 00000000..12ea7f18
--- /dev/null
+++ b/src/app/components/presence/styles.css.ts
@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const AvatarPresence = style({
+  display: 'flex',
+  position: 'relative',
+  flexShrink: 0,
+});
+
+export const AvatarPresenceBadge = style({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  transform: 'translate(25%, 25%)',
+  zIndex: 1,
+
+  display: 'flex',
+  padding: config.borderWidth.B600,
+  backgroundColor: 'inherit',
+  borderRadius: config.radii.Pill,
+  overflow: 'hidden',
+});
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index 9e1a4f12..ce550992 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -1,8 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } 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';
@@ -15,6 +14,9 @@ import { nameInitials } from '../../utils/common';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 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;
@@ -25,6 +27,7 @@ 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));
@@ -43,6 +46,8 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
     useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
   );
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
   return (
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
       <Box>
@@ -67,23 +72,22 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             <Text size="T200" priority="300">
               {'Created by '}
               <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
+              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`}
             </Text>
           )}
         </Box>
         <Box gap="200" wrap="Wrap">
-          <Button
-            onClick={() => openInviteUser(room.roomId)}
-            variant="Secondary"
-            size="300"
-            radii="300"
-          >
+          <Button onClick={() => setInvitePrompt(true)} 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
-                onClick={() => navigateRoom(prevRoomId)}
+                onClick={() => navigateRoom(prevRoomId, createContent?.predecessor?.event_id)}
                 variant="Success"
                 size="300"
                 fill="Soft"
diff --git a/src/app/components/sequence-card/SequenceCard.tsx b/src/app/components/sequence-card/SequenceCard.tsx
index 4036b963..d0e77ae6 100644
--- a/src/app/components/sequence-card/SequenceCard.tsx
+++ b/src/app/components/sequence-card/SequenceCard.tsx
@@ -7,12 +7,31 @@ import * as css from './style.css';
 export const SequenceCard = as<
   'div',
   ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
->(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
-  <Box
-    className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
-    data-first-child={firstChild}
-    data-last-child={lastChild}
-    {...props}
-    ref={ref}
-  />
-));
+>(
+  (
+    {
+      as: AsSequenceCard = 'div',
+      className,
+      variant,
+      radii,
+      firstChild,
+      lastChild,
+      outlined,
+      ...props
+    },
+    ref
+  ) => (
+    <Box
+      as={AsSequenceCard}
+      className={classNames(
+        css.SequenceCard({ radii, outlined }),
+        ContainerColor({ variant }),
+        className
+      )}
+      data-first-child={firstChild}
+      data-last-child={lastChild}
+      {...props}
+      ref={ref}
+    />
+  )
+);
diff --git a/src/app/components/sequence-card/style.css.ts b/src/app/components/sequence-card/style.css.ts
index c8ed48b8..9d503264 100644
--- a/src/app/components/sequence-card/style.css.ts
+++ b/src/app/components/sequence-card/style.css.ts
@@ -3,6 +3,7 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { config } from 'folds';
 
 const outlinedWidth = createVar('0');
+const radii = createVar(config.radii.R400);
 export const SequenceCard = recipe({
   base: {
     vars: {
@@ -13,33 +14,59 @@ export const SequenceCard = recipe({
     borderBottomWidth: 0,
     selectors: {
       '&:first-child, :not(&) + &': {
-        borderTopLeftRadius: config.radii.R400,
-        borderTopRightRadius: config.radii.R400,
+        borderTopLeftRadius: [radii],
+        borderTopRightRadius: [radii],
       },
       '&:last-child, &:not(:has(+&))': {
-        borderBottomLeftRadius: config.radii.R400,
-        borderBottomRightRadius: config.radii.R400,
+        borderBottomLeftRadius: [radii],
+        borderBottomRightRadius: [radii],
         borderBottomWidth: outlinedWidth,
       },
       [`&[data-first-child="true"]`]: {
-        borderTopLeftRadius: config.radii.R400,
-        borderTopRightRadius: config.radii.R400,
+        borderTopLeftRadius: [radii],
+        borderTopRightRadius: [radii],
       },
       [`&[data-first-child="false"]`]: {
         borderTopLeftRadius: 0,
         borderTopRightRadius: 0,
       },
       [`&[data-last-child="true"]`]: {
-        borderBottomLeftRadius: config.radii.R400,
-        borderBottomRightRadius: config.radii.R400,
+        borderBottomLeftRadius: [radii],
+        borderBottomRightRadius: [radii],
       },
       [`&[data-last-child="false"]`]: {
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
       },
+
+      'button&': {
+        cursor: 'pointer',
+      },
     },
   },
   variants: {
+    radii: {
+      '0': {
+        vars: {
+          [radii]: config.radii.R0,
+        },
+      },
+      '300': {
+        vars: {
+          [radii]: config.radii.R300,
+        },
+      },
+      '400': {
+        vars: {
+          [radii]: config.radii.R400,
+        },
+      },
+      '500': {
+        vars: {
+          [radii]: config.radii.R500,
+        },
+      },
+    },
     outlined: {
       true: {
         vars: {
@@ -48,5 +75,8 @@ export const SequenceCard = recipe({
       },
     },
   },
+  defaultVariants: {
+    radii: '400',
+  },
 });
 export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;
diff --git a/src/app/components/text-viewer/TextViewer.tsx b/src/app/components/text-viewer/TextViewer.tsx
index f39ef953..ec4ed0a5 100644
--- a/src/app/components/text-viewer/TextViewer.tsx
+++ b/src/app/components/text-viewer/TextViewer.tsx
@@ -24,7 +24,7 @@ export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentPro
     >
       <ErrorBoundary fallback={<code>{text}</code>}>
         <Suspense fallback={<code>{text}</code>}>
-          <ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
+          <ReactPrism key={text}>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
         </Suspense>
       </ErrorBoundary>
     </Text>
diff --git a/src/app/components/time-date/DatePicker.tsx b/src/app/components/time-date/DatePicker.tsx
new file mode 100644
index 00000000..faa43a3f
--- /dev/null
+++ b/src/app/components/time-date/DatePicker.tsx
@@ -0,0 +1,129 @@
+import React, { forwardRef } from 'react';
+import { Menu, Box, Text, Chip } from 'folds';
+import dayjs from 'dayjs';
+import * as css from './styles.css';
+import { PickerColumn } from './PickerColumn';
+import { dateFor, daysInMonth, daysToMs } from '../../utils/time';
+
+type DatePickerProps = {
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+};
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  ({ min, max, value, onChange }, ref) => {
+    const selectedYear = dayjs(value).year();
+    const selectedMonth = dayjs(value).month() + 1;
+    const selectedDay = dayjs(value).date();
+
+    const handleSubmit = (newValue: number) => {
+      onChange(Math.min(Math.max(min, newValue), max));
+    };
+
+    const handleDay = (day: number) => {
+      const seconds = daysToMs(day);
+      const lastSeconds = daysToMs(selectedDay);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const handleMonthAndYear = (month: number, year: number) => {
+      const mDays = daysInMonth(month, year);
+      const currentDate = dateFor(selectedYear, selectedMonth, selectedDay);
+      const time = value - currentDate;
+
+      const newDate = dateFor(year, month, mDays < selectedDay ? mDays : selectedDay);
+
+      const newValue = newDate + time;
+      handleSubmit(newValue);
+    };
+
+    const handleMonth = (month: number) => {
+      handleMonthAndYear(month, selectedYear);
+    };
+
+    const handleYear = (year: number) => {
+      handleMonthAndYear(selectedMonth, year);
+    };
+
+    const minYear = dayjs(min).year();
+    const maxYear = dayjs(max).year();
+    const yearsRange = maxYear - minYear + 1;
+
+    const minMonth = dayjs(min).month() + 1;
+    const maxMonth = dayjs(max).month() + 1;
+
+    const minDay = dayjs(min).date();
+    const maxDay = dayjs(max).date();
+    return (
+      <Menu className={css.PickerMenu} ref={ref}>
+        <Box direction="Row" gap="200" className={css.PickerContainer}>
+          <PickerColumn title="Day">
+            {Array.from(Array(daysInMonth(selectedMonth, selectedYear)).keys())
+              .map((i) => i + 1)
+              .map((day) => (
+                <Chip
+                  key={day}
+                  size="500"
+                  variant={selectedDay === day ? 'Primary' : 'SurfaceVariant'}
+                  fill="None"
+                  radii="300"
+                  aria-selected={selectedDay === day}
+                  onClick={() => handleDay(day)}
+                  disabled={
+                    (selectedYear === minYear && selectedMonth === minMonth && day < minDay) ||
+                    (selectedYear === maxYear && selectedMonth === maxMonth && day > maxDay)
+                  }
+                >
+                  <Text size="T300">{day}</Text>
+                </Chip>
+              ))}
+          </PickerColumn>
+          <PickerColumn title="Month">
+            {Array.from(Array(12).keys())
+              .map((i) => i + 1)
+              .map((month) => (
+                <Chip
+                  key={month}
+                  size="500"
+                  variant={selectedMonth === month ? 'Primary' : 'SurfaceVariant'}
+                  fill="None"
+                  radii="300"
+                  aria-selected={selectedMonth === month}
+                  onClick={() => handleMonth(month)}
+                  disabled={
+                    (selectedYear === minYear && month < minMonth) ||
+                    (selectedYear === maxYear && month > maxMonth)
+                  }
+                >
+                  <Text size="T300">
+                    {dayjs()
+                      .month(month - 1)
+                      .format('MMM')}
+                  </Text>
+                </Chip>
+              ))}
+          </PickerColumn>
+          <PickerColumn title="Year">
+            {Array.from(Array(yearsRange).keys())
+              .map((i) => minYear + i)
+              .map((year) => (
+                <Chip
+                  key={year}
+                  size="500"
+                  variant={selectedYear === year ? 'Primary' : 'SurfaceVariant'}
+                  fill="None"
+                  radii="300"
+                  aria-selected={selectedYear === year}
+                  onClick={() => handleYear(year)}
+                >
+                  <Text size="T300">{year}</Text>
+                </Chip>
+              ))}
+          </PickerColumn>
+        </Box>
+      </Menu>
+    );
+  }
+);
diff --git a/src/app/components/time-date/PickerColumn.tsx b/src/app/components/time-date/PickerColumn.tsx
new file mode 100644
index 00000000..c31daf43
--- /dev/null
+++ b/src/app/components/time-date/PickerColumn.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { Box, Text, Scroll } from 'folds';
+import { CutoutCard } from '../cutout-card';
+import * as css from './styles.css';
+
+export function PickerColumn({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Box direction="Column" gap="100">
+      <Text className={css.PickerColumnLabel} size="L400">
+        {title}
+      </Text>
+      <Box grow="Yes">
+        <CutoutCard variant="Background">
+          <Scroll variant="Background" size="300" hideTrack>
+            <Box className={css.PickerColumnContent} direction="Column" gap="100">
+              {children}
+            </Box>
+          </Scroll>
+        </CutoutCard>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/components/time-date/TimePicker.tsx b/src/app/components/time-date/TimePicker.tsx
new file mode 100644
index 00000000..c835ed09
--- /dev/null
+++ b/src/app/components/time-date/TimePicker.tsx
@@ -0,0 +1,153 @@
+import React, { forwardRef } from 'react';
+import { Menu, Box, Text, Chip } from 'folds';
+import dayjs from 'dayjs';
+import * as css from './styles.css';
+import { PickerColumn } from './PickerColumn';
+import { hour12to24, hour24to12, hoursToMs, inSameDay, minutesToMs } from '../../utils/time';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+
+type TimePickerProps = {
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+};
+export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
+  ({ min, max, value, onChange }, ref) => {
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+    const hour24 = dayjs(value).hour();
+
+    const selectedHour = hour24Clock ? hour24 : hour24to12(hour24);
+    const selectedMinute = dayjs(value).minute();
+    const selectedPM = hour24 >= 12;
+
+    const handleSubmit = (newValue: number) => {
+      onChange(Math.min(Math.max(min, newValue), max));
+    };
+
+    const handleHour = (hour: number) => {
+      const seconds = hoursToMs(hour24Clock ? hour : hour12to24(hour, selectedPM));
+      const lastSeconds = hoursToMs(hour24);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const handleMinute = (minute: number) => {
+      const seconds = minutesToMs(minute);
+      const lastSeconds = minutesToMs(selectedMinute);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const handlePeriod = (pm: boolean) => {
+      const seconds = hoursToMs(hour12to24(selectedHour, pm));
+      const lastSeconds = hoursToMs(hour24);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const minHour24 = dayjs(min).hour();
+    const maxHour24 = dayjs(max).hour();
+
+    const minMinute = dayjs(min).minute();
+    const maxMinute = dayjs(max).minute();
+    const minPM = minHour24 >= 12;
+    const maxPM = maxHour24 >= 12;
+
+    const minDay = inSameDay(min, value);
+    const maxDay = inSameDay(max, value);
+
+    return (
+      <Menu className={css.PickerMenu} ref={ref}>
+        <Box direction="Row" gap="200" className={css.PickerContainer}>
+          <PickerColumn title="Hour">
+            {hour24Clock
+              ? Array.from(Array(24).keys()).map((hour) => (
+                  <Chip
+                    key={hour}
+                    size="500"
+                    variant={hour === selectedHour ? 'Primary' : 'Background'}
+                    fill="None"
+                    radii="300"
+                    aria-selected={hour === selectedHour}
+                    onClick={() => handleHour(hour)}
+                    disabled={(minDay && hour < minHour24) || (maxDay && hour > maxHour24)}
+                  >
+                    <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
+                  </Chip>
+                ))
+              : Array.from(Array(12).keys())
+                  .map((i) => {
+                    if (i === 0) return 12;
+                    return i;
+                  })
+                  .map((hour) => (
+                    <Chip
+                      key={hour}
+                      size="500"
+                      variant={hour === selectedHour ? 'Primary' : 'Background'}
+                      fill="None"
+                      radii="300"
+                      aria-selected={hour === selectedHour}
+                      onClick={() => handleHour(hour)}
+                      disabled={
+                        (minDay && hour12to24(hour, selectedPM) < minHour24) ||
+                        (maxDay && hour12to24(hour, selectedPM) > maxHour24)
+                      }
+                    >
+                      <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
+                    </Chip>
+                  ))}
+          </PickerColumn>
+          <PickerColumn title="Minutes">
+            {Array.from(Array(60).keys()).map((minute) => (
+              <Chip
+                key={minute}
+                size="500"
+                variant={minute === selectedMinute ? 'Primary' : 'Background'}
+                fill="None"
+                radii="300"
+                aria-selected={minute === selectedMinute}
+                onClick={() => handleMinute(minute)}
+                disabled={
+                  (minDay && hour24 === minHour24 && minute < minMinute) ||
+                  (maxDay && hour24 === maxHour24 && minute > maxMinute)
+                }
+              >
+                <Text size="T300">{minute < 10 ? `0${minute}` : minute}</Text>
+              </Chip>
+            ))}
+          </PickerColumn>
+          {!hour24Clock && (
+            <PickerColumn title="Period">
+              <Chip
+                size="500"
+                variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
+                fill="None"
+                radii="300"
+                aria-selected={!selectedPM}
+                onClick={() => handlePeriod(false)}
+                disabled={minDay && minPM}
+              >
+                <Text size="T300">AM</Text>
+              </Chip>
+              <Chip
+                size="500"
+                variant={selectedPM ? 'Primary' : 'SurfaceVariant'}
+                fill="None"
+                radii="300"
+                aria-selected={selectedPM}
+                onClick={() => handlePeriod(true)}
+                disabled={maxDay && !maxPM}
+              >
+                <Text size="T300">PM</Text>
+              </Chip>
+            </PickerColumn>
+          )}
+        </Box>
+      </Menu>
+    );
+  }
+);
diff --git a/src/app/components/time-date/index.ts b/src/app/components/time-date/index.ts
new file mode 100644
index 00000000..592c5af7
--- /dev/null
+++ b/src/app/components/time-date/index.ts
@@ -0,0 +1,2 @@
+export * from './TimePicker';
+export * from './DatePicker';
diff --git a/src/app/components/time-date/styles.css.ts b/src/app/components/time-date/styles.css.ts
new file mode 100644
index 00000000..97926d3f
--- /dev/null
+++ b/src/app/components/time-date/styles.css.ts
@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const PickerMenu = style({
+  padding: config.space.S200,
+});
+export const PickerContainer = style({
+  maxHeight: toRem(250),
+});
+export const PickerColumnLabel = style({
+  padding: config.space.S200,
+});
+export const PickerColumnContent = style({
+  padding: config.space.S200,
+  paddingRight: 0,
+});
diff --git a/src/app/components/upload-card/CompactUploadCardRenderer.tsx b/src/app/components/upload-card/CompactUploadCardRenderer.tsx
index 998b517a..b9bada71 100644
--- a/src/app/components/upload-card/CompactUploadCardRenderer.tsx
+++ b/src/app/components/upload-card/CompactUploadCardRenderer.tsx
@@ -4,7 +4,8 @@ import { UploadCard, UploadCardError, CompactUploadCardProgress } from './Upload
 import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
-import { getFileTypeIcon } from '../../utils/common';
+import { bytesToSize, getFileTypeIcon } from '../../utils/common';
+import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type CompactUploadCardRendererProps = {
   isEncrypted?: boolean;
@@ -19,10 +20,16 @@ export function CompactUploadCardRenderer({
   onComplete,
 }: CompactUploadCardRendererProps) {
   const mx = useMatrixClient();
+  const mediaConfig = useMediaConfig();
+  const allowSize = mediaConfig['m.upload.size'] || Infinity;
+
   const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
   const { file } = upload;
+  const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle) startUpload();
+  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
+    startUpload();
+  }
 
   const removeUpload = () => {
     cancelUpload();
@@ -76,7 +83,7 @@ export function CompactUploadCardRenderer({
         </>
       ) : (
         <>
-          {upload.status === UploadStatus.Idle && (
+          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
             <CompactUploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}
           {upload.status === UploadStatus.Loading && (
@@ -87,6 +94,15 @@ export function CompactUploadCardRenderer({
               <Text size="T200">{upload.error.message}</Text>
             </UploadCardError>
           )}
+          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
+            <UploadCardError>
+              <Text size="T200">
+                The file size exceeds the limit. Maximum allowed size is{' '}
+                <b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
+                <b>{bytesToSize(file.size)}</b>.
+              </Text>
+            </UploadCardError>
+          )}
         </>
       )}
     </UploadCard>
diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index 4383e204..0a127a08 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -4,13 +4,14 @@ import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
-import { getFileTypeIcon } from '../../utils/common';
+import { bytesToSize, getFileTypeIcon } from '../../utils/common';
 import {
   roomUploadAtomFamily,
   TUploadItem,
   TUploadMetadata,
 } from '../../state/room/roomInputDrafts';
 import { useObjectURL } from '../../hooks/useObjectURL';
+import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
 function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
@@ -75,12 +76,18 @@ export function UploadCardRenderer({
   onComplete,
 }: UploadCardRendererProps) {
   const mx = useMatrixClient();
+  const mediaConfig = useMediaConfig();
+  const allowSize = mediaConfig['m.upload.size'] || Infinity;
+
   const uploadAtom = roomUploadAtomFamily(fileItem.file);
   const { metadata } = fileItem;
   const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
   const { file } = upload;
+  const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle) startUpload();
+  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
+    startUpload();
+  }
 
   const handleSpoiler = (marked: boolean) => {
     setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
@@ -131,7 +138,7 @@ export function UploadCardRenderer({
           {fileItem.originalFile.type.startsWith('image') && (
             <ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
           )}
-          {upload.status === UploadStatus.Idle && (
+          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
             <UploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}
           {upload.status === UploadStatus.Loading && (
@@ -142,6 +149,15 @@ export function UploadCardRenderer({
               <Text size="T200">{upload.error.message}</Text>
             </UploadCardError>
           )}
+          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
+            <UploadCardError>
+              <Text size="T200">
+                The file size exceeds the limit. Maximum allowed size is{' '}
+                <b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
+                <b>{bytesToSize(file.size)}</b>.
+              </Text>
+            </UploadCardError>
+          )}
         </>
       }
     >
diff --git a/src/app/components/user-avatar/UserAvatar.tsx b/src/app/components/user-avatar/UserAvatar.tsx
index 98067ad4..d9de9b79 100644
--- a/src/app/components/user-avatar/UserAvatar.tsx
+++ b/src/app/components/user-avatar/UserAvatar.tsx
@@ -1,15 +1,17 @@
 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({ userId, src, alt, renderFallback }: UserAvatarProps) {
+export function UserAvatar({ className, userId, src, alt, renderFallback }: UserAvatarProps) {
   const [error, setError] = useState(false);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
@@ -20,7 +22,7 @@ export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
-        className={css.UserAvatar}
+        className={classNames(css.UserAvatar, className)}
       >
         {renderFallback()}
       </AvatarFallback>
@@ -29,7 +31,7 @@ export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps
 
   return (
     <AvatarImage
-      className={css.UserAvatar}
+      className={classNames(css.UserAvatar, className)}
       src={src}
       alt={alt}
       onError={() => setError(true)}
diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx
new file mode 100644
index 00000000..f59d2ae5
--- /dev/null
+++ b/src/app/components/user-profile/CreatorChip.tsx
@@ -0,0 +1,101 @@
+import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import React, { MouseEventHandler, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
+import { PowerColorBadge, PowerIcon } from '../power';
+import { getPowerTagIconSrc } from '../../hooks/useMemberPowerTag';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { stopPropagation } from '../../utils/keyboard';
+import { useRoom } from '../../hooks/useRoom';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
+import { RoomSettingsPage } from '../../state/roomSettings';
+
+export function CreatorChip() {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const space = useSpaceOptionally();
+  const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
+
+  const [cords, setCords] = useState<RectCords>();
+  const tag = useRoomCreatorsTag();
+  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  if (room.isSpaceRoom()) {
+                    openSpaceSettings(
+                      room.roomId,
+                      space?.roomId,
+                      SpaceSettingsPage.PermissionsPage
+                    );
+                  } else {
+                    openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
+                  }
+                  close();
+                }}
+              >
+                <Text size="B300">Manage Powers</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="Success"
+        outlined
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <PowerColorBadge color={tag.color} />
+          )
+        }
+        after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          {tag.name}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx
new file mode 100644
index 00000000..a6758300
--- /dev/null
+++ b/src/app/components/user-profile/PowerChip.tsx
@@ -0,0 +1,357 @@
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Menu,
+  MenuItem,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import React, { MouseEventHandler, useCallback, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { PowerColorBadge, PowerIcon } from '../power';
+import { useGetMemberPowerLevel, usePowerLevels } from '../../hooks/usePowerLevels';
+import { getPowers, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { stopPropagation } from '../../utils/keyboard';
+import { StateEvent } from '../../../types/matrix/room';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { RoomSettingsPage } from '../../state/roomSettings';
+import { useRoom } from '../../hooks/useRoom';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { CutoutCard } from '../cutout-card';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { BreakWord } from '../../styles/Text.css';
+import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+
+type SelfDemoteAlertProps = {
+  power: number;
+  onCancel: () => void;
+  onChange: (power: number) => void;
+};
+function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Self Demotion</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
+              <Box direction="Column" gap="200">
+                <Text priority="400">
+                  You are about to demote yourself! You will not be able to regain this power
+                  yourself. Are you sure?
+                </Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                <Button type="submit" variant="Warning" onClick={() => onChange(power)}>
+                  <Text size="B400">Demote</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
+type SharedPowerAlertProps = {
+  power: number;
+  onCancel: () => void;
+  onChange: (power: number) => void;
+};
+function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps) {
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Shared Power</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
+              <Box direction="Column" gap="200">
+                <Text priority="400">
+                  You are promoting the user to have the same power as yourself! You will not be
+                  able to change their power afterward. Are you sure?
+                </Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                <Button type="submit" variant="Warning" onClick={() => onChange(power)}>
+                  <Text size="B400">Promote</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
+export function PowerChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const space = useSpaceOptionally();
+  const useAuthentication = useMediaAuthentication();
+  const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
+
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const getMemberPowerLevel = useGetMemberPowerLevel(powerLevels);
+  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
+
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
+  const myUserId = mx.getSafeUserId();
+  const canChangePowers =
+    permissions.stateEvent(StateEvent.RoomPowerLevels, myUserId) &&
+    (myUserId === userId ? true : hasMorePower(myUserId, userId));
+
+  const tag = getMemberPowerTag(userId);
+  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const [powerState, changePower] = useAsyncCallback<undefined, Error, [number]>(
+    useCallback(
+      async (power: number) => {
+        await mx.setPowerLevel(room.roomId, userId, power);
+      },
+      [mx, userId, room]
+    )
+  );
+  const changing = powerState.status === AsyncStatus.Loading;
+  const error = powerState.status === AsyncStatus.Error;
+  const [selfDemote, setSelfDemote] = useState<number>();
+  const [sharedPower, setSharedPower] = useState<number>();
+
+  const handlePowerSelect = (power: number): void => {
+    close();
+    if (!canChangePowers) return;
+    if (power === getMemberPowerLevel(userId)) return;
+
+    if (userId === mx.getSafeUserId()) {
+      setSelfDemote(power);
+      return;
+    }
+    if (!creators.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
+      setSharedPower(power);
+      return;
+    }
+
+    changePower(power);
+  };
+
+  const handleSelfDemote = (power: number) => {
+    setSelfDemote(undefined);
+    changePower(power);
+  };
+  const handleSharedPower = (power: number) => {
+    setSharedPower(undefined);
+    changePower(power);
+  };
+
+  return (
+    <>
+      <PopOut
+        anchor={cords}
+        position="Bottom"
+        align="Start"
+        offset={4}
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: close,
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+              isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+              isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+            }}
+          >
+            <Menu>
+              <Box
+                direction="Column"
+                gap="100"
+                style={{ padding: config.space.S100, maxWidth: toRem(200) }}
+              >
+                {error && (
+                  <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+                    <Text size="L400">Error: {powerState.error.name}</Text>
+                    <Text className={BreakWord} size="T200">
+                      {powerState.error.message}
+                    </Text>
+                  </CutoutCard>
+                )}
+                {getPowers(powerLevelTags).map((power) => {
+                  const powerTag = powerLevelTags[power];
+                  const powerTagIconSrc =
+                    powerTag.icon && getPowerTagIconSrc(mx, useAuthentication, powerTag.icon);
+
+                  const selected = getMemberPowerLevel(userId) === power;
+                  const canAssignPower = creators.has(myUserId)
+                    ? true
+                    : power <= getMemberPowerLevel(myUserId);
+
+                  return (
+                    <MenuItem
+                      key={power}
+                      variant={selected ? 'Primary' : 'Surface'}
+                      fill="None"
+                      size="300"
+                      radii="300"
+                      aria-disabled={changing || !canChangePowers || !canAssignPower}
+                      aria-pressed={selected}
+                      before={<PowerColorBadge color={powerTag.color} />}
+                      after={
+                        powerTagIconSrc ? (
+                          <PowerIcon size="50" iconSrc={powerTagIconSrc} />
+                        ) : undefined
+                      }
+                      onClick={
+                        canChangePowers && canAssignPower
+                          ? () => handlePowerSelect(power)
+                          : undefined
+                      }
+                    >
+                      <Text size="B300">{powerTag.name}</Text>
+                    </MenuItem>
+                  );
+                })}
+              </Box>
+              <Line size="300" />
+              <div style={{ padding: config.space.S100 }}>
+                <MenuItem
+                  variant="Surface"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  onClick={() => {
+                    if (room.isSpaceRoom()) {
+                      openSpaceSettings(
+                        room.roomId,
+                        space?.roomId,
+                        SpaceSettingsPage.PermissionsPage
+                      );
+                    } else {
+                      openRoomSettings(
+                        room.roomId,
+                        space?.roomId,
+                        RoomSettingsPage.PermissionsPage
+                      );
+                    }
+                    close();
+                  }}
+                >
+                  <Text size="B300">Manage Powers</Text>
+                </MenuItem>
+              </div>
+            </Menu>
+          </FocusTrap>
+        }
+      >
+        <Chip
+          variant={error ? 'Critical' : 'SurfaceVariant'}
+          radii="Pill"
+          before={
+            cords ? (
+              <Icon size="50" src={Icons.ChevronBottom} />
+            ) : (
+              <>
+                {!changing && <PowerColorBadge color={tag.color} />}
+                {changing && <Spinner size="50" variant="Secondary" fill="Soft" />}
+              </>
+            )
+          }
+          after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
+          onClick={open}
+          aria-pressed={!!cords}
+        >
+          <Text size="B300" truncate>
+            {tag.name}
+          </Text>
+        </Chip>
+      </PopOut>
+      {typeof selfDemote === 'number' ? (
+        <SelfDemoteAlert
+          power={selfDemote}
+          onCancel={() => setSelfDemote(undefined)}
+          onChange={handleSelfDemote}
+        />
+      ) : null}
+      {typeof sharedPower === 'number' ? (
+        <SharedPowerAlert
+          power={sharedPower}
+          onCancel={() => setSharedPower(undefined)}
+          onChange={handleSharedPower}
+        />
+      ) : null}
+    </>
+  );
+}
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
new file mode 100644
index 00000000..53e6618b
--- /dev/null
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -0,0 +1,514 @@
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { Room } from 'matrix-js-sdk';
+import {
+  PopOut,
+  Menu,
+  MenuItem,
+  config,
+  Text,
+  Line,
+  Chip,
+  Icon,
+  Icons,
+  RectCords,
+  Spinner,
+  toRem,
+  Box,
+  Scroll,
+  Avatar,
+} from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getMxIdServer } from '../../utils/matrix';
+import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { stopPropagation } from '../../utils/keyboard';
+import { copyToClipboard } from '../../utils/dom';
+import { getExploreServerPath } from '../../pages/pathUtils';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { factoryRoomIdByAtoZ } from '../../utils/sort';
+import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { RoomAvatar, RoomIcon } from '../room-avatar';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { nameInitials } from '../../utils/common';
+import { getMatrixToUser } from '../../plugins/matrix-to';
+import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
+import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { CutoutCard } from '../cutout-card';
+import { SettingTile } from '../setting-tile';
+
+export function ServerChip({ server }: { server: string }) {
+  const mx = useMatrixClient();
+  const myServer = getMxIdServer(mx.getSafeUserId());
+  const navigate = useNavigate();
+  const closeProfile = useCloseUserRoomProfile();
+  const [copied, setCopied] = useTimeoutToggle();
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  copyToClipboard(server);
+                  setCopied();
+                  close();
+                }}
+              >
+                <Text size="B300">Copy Server</Text>
+              </MenuItem>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  navigate(getExploreServerPath(server));
+                  closeProfile();
+                }}
+              >
+                <Text size="B300">Explore Community</Text>
+              </MenuItem>
+            </div>
+            <Line size="300" />
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant={myServer === server ? 'Surface' : 'Critical'}
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  window.open(`https://${server}`, '_blank');
+                  close();
+                }}
+              >
+                <Text size="B300">Open in Browser</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <Icon size="50" src={copied ? Icons.Check : Icons.Server} />
+          )
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          {server}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+export function ShareChip({ userId }: { userId: string }) {
+  const [cords, setCords] = useState<RectCords>();
+
+  const [copied, setCopied] = useTimeoutToggle();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  copyToClipboard(userId);
+                  setCopied();
+                  close();
+                }}
+              >
+                <Text size="B300">Copy User ID</Text>
+              </MenuItem>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  copyToClipboard(getMatrixToUser(userId));
+                  setCopied();
+                  close();
+                }}
+              >
+                <Text size="B300">Copy User Link</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant={copied ? 'Success' : 'SurfaceVariant'}
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <Icon size="50" src={copied ? Icons.Check : Icons.Link} />
+          )
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          Share
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+type MutualRoomsData = {
+  rooms: Room[];
+  spaces: Room[];
+  directs: Room[];
+};
+
+export function MutualRoomsChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const mutualRoomSupported = useMutualRoomsSupport();
+  const mutualRoomsState = useMutualRooms(userId);
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const closeUserRoomProfile = useCloseUserRoomProfile();
+  const directs = useDirectRooms();
+  const useAuthentication = useMediaAuthentication();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const mutual: MutualRoomsData = useMemo(() => {
+    const data: MutualRoomsData = {
+      rooms: [],
+      spaces: [],
+      directs: [],
+    };
+
+    if (mutualRoomsState.status === AsyncStatus.Success) {
+      const mutualRooms = mutualRoomsState.data
+        .sort(factoryRoomIdByAtoZ(mx))
+        .map(getRoom)
+        .filter((room) => !!room);
+      mutualRooms.forEach((room) => {
+        if (room.isSpaceRoom()) {
+          data.spaces.push(room);
+          return;
+        }
+        if (directs.includes(room.roomId)) {
+          data.directs.push(room);
+          return;
+        }
+        data.rooms.push(room);
+      });
+    }
+    return data;
+  }, [mutualRoomsState, getRoom, directs, mx]);
+
+  if (
+    userId === mx.getSafeUserId() ||
+    !mutualRoomSupported ||
+    mutualRoomsState.status === AsyncStatus.Error
+  ) {
+    return null;
+  }
+
+  const renderItem = (room: Room) => {
+    const { roomId } = room;
+    const dm = directs.includes(roomId);
+
+    return (
+      <MenuItem
+        key={roomId}
+        variant="Surface"
+        fill="None"
+        size="300"
+        radii="300"
+        style={{ paddingLeft: config.space.S100 }}
+        onClick={() => {
+          if (room.isSpaceRoom()) {
+            navigateSpace(roomId);
+          } else {
+            navigateRoom(roomId);
+          }
+          closeUserRoomProfile();
+        }}
+        before={
+          <Avatar size="200" radii={dm ? '400' : '300'}>
+            {dm || room.isSpaceRoom() ? (
+              <RoomAvatar
+                roomId={room.roomId}
+                src={
+                  dm
+                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                }
+                alt={room.name}
+                renderFallback={() => (
+                  <Text as="span" size="H6">
+                    {nameInitials(room.name)}
+                  </Text>
+                )}
+              />
+            ) : (
+              <RoomIcon size="100" joinRule={room.getJoinRule()} />
+            )}
+          </Avatar>
+        }
+      >
+        <Text size="B300" truncate>
+          {room.name}
+        </Text>
+      </MenuItem>
+    );
+  };
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        mutualRoomsState.status === AsyncStatus.Success ? (
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: close,
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+              isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+              isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+            }}
+          >
+            <Menu
+              style={{
+                display: 'flex',
+                maxWidth: toRem(200),
+                maxHeight: '80vh',
+              }}
+            >
+              <Box grow="Yes">
+                <Scroll size="300" hideTrack>
+                  <Box
+                    direction="Column"
+                    gap="400"
+                    style={{ padding: config.space.S200, paddingRight: 0 }}
+                  >
+                    {mutual.spaces.length > 0 && (
+                      <Box direction="Column" gap="100">
+                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
+                          Spaces
+                        </Text>
+                        {mutual.spaces.map(renderItem)}
+                      </Box>
+                    )}
+                    {mutual.rooms.length > 0 && (
+                      <Box direction="Column" gap="100">
+                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
+                          Rooms
+                        </Text>
+                        {mutual.rooms.map(renderItem)}
+                      </Box>
+                    )}
+                    {mutual.directs.length > 0 && (
+                      <Box direction="Column" gap="100">
+                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
+                          Direct Messages
+                        </Text>
+                        {mutual.directs.map(renderItem)}
+                      </Box>
+                    )}
+                  </Box>
+                </Scroll>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        ) : null
+      }
+    >
+      <Chip
+        variant="SurfaceVariant"
+        radii="Pill"
+        before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
+        disabled={
+          mutualRoomsState.status !== AsyncStatus.Success || mutualRoomsState.data.length === 0
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300">
+          {mutualRoomsState.status === AsyncStatus.Success &&
+            `${mutualRoomsState.data.length} Mutual Rooms`}
+          {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+export function IgnoredUserAlert() {
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Blocked User</Text>
+          </Box>
+          <Box direction="Column">
+            <Text size="T200">You do not receive any messages or invites from this user.</Text>
+          </Box>
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+export function OptionsChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const ignoredUsers = useIgnoredUsers();
+  const ignored = ignoredUsers.includes(userId);
+
+  const [ignoreState, toggleIgnore] = useAsyncCallback(
+    useCallback(async () => {
+      const users = ignoredUsers.filter((u) => u !== userId);
+      if (!ignored) users.push(userId);
+      await mx.setIgnoredUsers(users);
+    }, [mx, ignoredUsers, userId, ignored])
+  );
+  const ignoring = ignoreState.status === AsyncStatus.Loading;
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Critical"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  toggleIgnore();
+                  close();
+                }}
+                before={
+                  ignoring ? (
+                    <Spinner variant="Critical" size="50" />
+                  ) : (
+                    <Icon size="50" src={Icons.Prohibited} />
+                  )
+                }
+                disabled={ignoring}
+              >
+                <Text size="B300">{ignored ? 'Unblock User' : 'Block User'}</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
+        {ignoring ? (
+          <Spinner variant="Secondary" size="50" />
+        ) : (
+          <Icon size="50" src={Icons.HorizontalDots} />
+        )}
+      </Chip>
+    </PopOut>
+  );
+}
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
new file mode 100644
index 00000000..0e7fb748
--- /dev/null
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import {
+  Avatar,
+  Box,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  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';
+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;
+  avatarUrl?: string;
+  presence?: UserPresence;
+};
+export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
+  const [viewAvatar, setViewAvatar] = useState<string>();
+
+  return (
+    <Box direction="Column" className={css.UserHero}>
+      <div
+        className={css.UserHeroCoverContainer}
+        style={{
+          backgroundColor: colorMXID(userId),
+          filter: avatarUrl ? undefined : 'brightness(50%)',
+        }}
+      >
+        {avatarUrl && (
+          <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
+        )}
+      </div>
+      <div className={css.UserHeroAvatarContainer}>
+        <AvatarPresence
+          className={css.UserAvatarContainer}
+          badge={
+            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
+          }
+        >
+          <Avatar
+            as={avatarUrl ? 'button' : 'div'}
+            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+            className={css.UserHeroAvatar}
+            size="500"
+          >
+            <UserAvatar
+              className={css.UserHeroAvatarImg}
+              userId={userId}
+              src={avatarUrl}
+              alt={userId}
+              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+            />
+          </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>
+  );
+}
+
+type UserHeroNameProps = {
+  displayName?: string;
+  userId: string;
+};
+export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
+  const username = getMxIdLocalPart(userId);
+
+  return (
+    <Box grow="Yes" direction="Column" gap="0">
+      <Box alignItems="Baseline" gap="200" wrap="Wrap">
+        <Text
+          size="H4"
+          className={classNames(BreakWord, LineClamp3)}
+          title={displayName ?? username}
+        >
+          {displayName ?? username ?? userId}
+        </Text>
+      </Box>
+      <Box alignItems="Center" gap="100" wrap="Wrap">
+        <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
+          @{username}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx
new file mode 100644
index 00000000..814bb5ba
--- /dev/null
+++ b/src/app/components/user-profile/UserModeration.tsx
@@ -0,0 +1,349 @@
+import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
+import React, { useCallback, useRef } from 'react';
+import { useRoom } from '../../hooks/useRoom';
+import { CutoutCard } from '../cutout-card';
+import { SettingTile } from '../setting-tile';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { BreakWord } from '../../styles/Text.css';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { timeDayMonYear, timeHourMinute } from '../../utils/time';
+
+type UserKickAlertProps = {
+  reason?: string;
+  kickedBy?: string;
+  ts?: number;
+};
+export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
+  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Kicked User</Text>
+            {time && date && (
+              <Text size="T200">
+                {date} {time}
+              </Text>
+            )}
+          </Box>
+          <Box direction="Column">
+            {kickedBy && (
+              <Text size="T200">
+                Kicked by: <b>{kickedBy}</b>
+              </Text>
+            )}
+            <Text size="T200">
+              {reason ? (
+                <>
+                  Reason: <b>{reason}</b>
+                </>
+              ) : (
+                <i>No Reason Provided.</i>
+              )}
+            </Text>
+          </Box>
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+type UserBanAlertProps = {
+  userId: string;
+  reason?: string;
+  canUnban?: boolean;
+  bannedBy?: string;
+  ts?: number;
+};
+export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
+  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+
+  const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.unban(room.roomId, userId);
+    }, [mx, room, userId])
+  );
+  const banning = unbanState.status === AsyncStatus.Loading;
+  const error = unbanState.status === AsyncStatus.Error;
+
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Banned User</Text>
+            {time && date && (
+              <Text size="T200">
+                {date} {time}
+              </Text>
+            )}
+          </Box>
+          <Box direction="Column">
+            {bannedBy && (
+              <Text size="T200">
+                Banned by: <b>{bannedBy}</b>
+              </Text>
+            )}
+            <Text size="T200">
+              {reason ? (
+                <>
+                  Reason: <b>{reason}</b>
+                </>
+              ) : (
+                <i>No Reason Provided.</i>
+              )}
+            </Text>
+          </Box>
+          {error && (
+            <Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
+              <b>{unbanState.error.message}</b>
+            </Text>
+          )}
+          {canUnban && (
+            <Button
+              size="300"
+              variant="Critical"
+              radii="300"
+              onClick={unban}
+              before={banning && <Spinner size="100" variant="Critical" fill="Solid" />}
+              disabled={banning}
+            >
+              <Text size="B300">Unban</Text>
+            </Button>
+          )}
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+type UserInviteAlertProps = {
+  userId: string;
+  reason?: string;
+  canKick?: boolean;
+  invitedBy?: string;
+  ts?: number;
+};
+export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
+  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+
+  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.kick(room.roomId, userId);
+    }, [mx, room, userId])
+  );
+  const kicking = kickState.status === AsyncStatus.Loading;
+  const error = kickState.status === AsyncStatus.Error;
+
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Success">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Invited User</Text>
+            {time && date && (
+              <Text size="T200">
+                {date} {time}
+              </Text>
+            )}
+          </Box>
+          <Box direction="Column">
+            {invitedBy && (
+              <Text size="T200">
+                Invited by: <b>{invitedBy}</b>
+              </Text>
+            )}
+            <Text size="T200">
+              {reason ? (
+                <>
+                  Reason: <b>{reason}</b>
+                </>
+              ) : (
+                <i>No Reason Provided.</i>
+              )}
+            </Text>
+          </Box>
+          {error && (
+            <Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
+              <b>{kickState.error.message}</b>
+            </Text>
+          )}
+          {canKick && (
+            <Button
+              size="300"
+              variant="Success"
+              fill="Soft"
+              outlined
+              radii="300"
+              onClick={kick}
+              before={kicking && <Spinner size="100" variant="Success" fill="Soft" />}
+              disabled={kicking}
+            >
+              <Text size="B300">Cancel Invite</Text>
+            </Button>
+          )}
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+type UserModerationProps = {
+  userId: string;
+  canKick: boolean;
+  canBan: boolean;
+  canInvite: boolean;
+};
+export function UserModeration({ userId, canKick, canBan, canInvite }: UserModerationProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const reasonInputRef = useRef<HTMLInputElement>(null);
+
+  const getReason = useCallback((): string | undefined => {
+    const reason = reasonInputRef.current?.value.trim() || undefined;
+    if (reasonInputRef.current) {
+      reasonInputRef.current.value = '';
+    }
+    return reason;
+  }, []);
+
+  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.kick(room.roomId, userId, getReason());
+    }, [mx, room, userId, getReason])
+  );
+
+  const [banState, ban] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.ban(room.roomId, userId, getReason());
+    }, [mx, room, userId, getReason])
+  );
+
+  const [inviteState, invite] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.invite(room.roomId, userId, getReason());
+    }, [mx, room, userId, getReason])
+  );
+
+  const disabled =
+    kickState.status === AsyncStatus.Loading ||
+    banState.status === AsyncStatus.Loading ||
+    inviteState.status === AsyncStatus.Loading;
+
+  if (!canBan && !canKick && !canInvite) return null;
+
+  return (
+    <Box direction="Column" gap="400">
+      <Box direction="Column" gap="200">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Moderation</Text>
+          <Input
+            ref={reasonInputRef}
+            placeholder="Reason"
+            size="300"
+            variant="Background"
+            radii="300"
+            disabled={disabled}
+          />
+          {kickState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+              <b>{kickState.error.message}</b>
+            </Text>
+          )}
+          {banState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+              <b>{banState.error.message}</b>
+            </Text>
+          )}
+          {inviteState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+              <b>{inviteState.error.message}</b>
+            </Text>
+          )}
+        </Box>
+        <Box shrink="No" gap="200">
+          {canInvite && (
+            <Button
+              style={{ flexGrow: 1 }}
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              before={
+                inviteState.status === AsyncStatus.Loading ? (
+                  <Spinner size="50" variant="Secondary" fill="Soft" />
+                ) : (
+                  <Icon size="50" src={Icons.ArrowRight} />
+                )
+              }
+              onClick={invite}
+              disabled={disabled}
+            >
+              <Text size="B300">Invite</Text>
+            </Button>
+          )}
+          {canKick && (
+            <Button
+              style={{ flexGrow: 1 }}
+              size="300"
+              variant="Critical"
+              fill="Soft"
+              radii="300"
+              before={
+                kickState.status === AsyncStatus.Loading ? (
+                  <Spinner size="50" variant="Critical" fill="Soft" />
+                ) : (
+                  <Icon size="50" src={Icons.ArrowLeft} />
+                )
+              }
+              onClick={kick}
+              disabled={disabled}
+            >
+              <Text size="B300">Kick</Text>
+            </Button>
+          )}
+          {canBan && (
+            <Button
+              style={{ flexGrow: 1 }}
+              size="300"
+              variant="Critical"
+              fill="Solid"
+              radii="300"
+              before={
+                banState.status === AsyncStatus.Loading ? (
+                  <Spinner size="50" variant="Critical" fill="Solid" />
+                ) : (
+                  <Icon size="50" src={Icons.Prohibited} />
+                )
+              }
+              onClick={ban}
+              disabled={disabled}
+            >
+              <Text size="B300">Ban</Text>
+            </Button>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
new file mode 100644
index 00000000..78d201ec
--- /dev/null
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -0,0 +1,142 @@
+import { Box, Button, config, Icon, Icons, Text } from 'folds';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { UserHero, UserHeroName } from './UserHero';
+import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { useRoom } from '../../hooks/useRoom';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
+import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { PowerChip } from './PowerChip';
+import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
+import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { useMembership } from '../../hooks/useMembership';
+import { Membership } from '../../../types/matrix/room';
+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;
+};
+export function UserRoomProfile({ userId }: UserRoomProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const navigate = useNavigate();
+  const closeUserRoomProfile = useCloseUserRoomProfile();
+  const ignoredUsers = useIgnoredUsers();
+  const ignored = ignoredUsers.includes(userId);
+
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
+
+  const myUserId = mx.getSafeUserId();
+  const creator = creators.has(userId);
+
+  const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
+  const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
+  const canUnban = permissions.action('ban', myUserId);
+  const canInvite = permissions.action('invite', myUserId);
+
+  const member = room.getMember(userId);
+  const membership = useMembership(room, userId);
+
+  const server = getMxIdServer(userId);
+  const displayName = getMemberDisplayName(room, userId);
+  const avatarMxc = getMemberAvatarMxc(room, userId);
+  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
+
+  const presence = useUserPresence(userId);
+
+  const handleMessage = () => {
+    closeUserRoomProfile();
+    const directSearchParam: DirectCreateSearchParams = {
+      userId,
+    };
+    navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
+  };
+
+  return (
+    <Box direction="Column">
+      <UserHero
+        userId={userId}
+        avatarUrl={avatarUrl}
+        presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
+      />
+      <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
+        <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>
+          <Box alignItems="Center" gap="200" wrap="Wrap">
+            {server && <ServerChip server={server} />}
+            <ShareChip userId={userId} />
+            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
+            {userId !== myUserId && <MutualRoomsChip userId={userId} />}
+            {userId !== myUserId && <OptionsChip userId={userId} />}
+          </Box>
+        </Box>
+        {ignored && <IgnoredUserAlert />}
+        {member && membership === Membership.Ban && (
+          <UserBanAlert
+            userId={userId}
+            reason={member.events.member?.getContent().reason}
+            canUnban={canUnban}
+            bannedBy={member.events.member?.getSender()}
+            ts={member.events.member?.getTs()}
+          />
+        )}
+        {member &&
+          membership === Membership.Leave &&
+          member.events.member &&
+          member.events.member.getSender() !== userId && (
+            <UserKickAlert
+              reason={member.events.member?.getContent().reason}
+              kickedBy={member.events.member?.getSender()}
+              ts={member.events.member?.getTs()}
+            />
+          )}
+        {member && membership === Membership.Invite && (
+          <UserInviteAlert
+            userId={userId}
+            reason={member.events.member?.getContent().reason}
+            canKick={canKickUser}
+            invitedBy={member.events.member?.getSender()}
+            ts={member.events.member?.getTs()}
+          />
+        )}
+        <UserModeration
+          userId={userId}
+          canInvite={canInvite && membership === Membership.Leave}
+          canKick={canKickUser && membership === Membership.Join}
+          canBan={canBanUser && membership !== Membership.Ban}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/components/user-profile/index.ts b/src/app/components/user-profile/index.ts
new file mode 100644
index 00000000..54542c76
--- /dev/null
+++ b/src/app/components/user-profile/index.ts
@@ -0,0 +1 @@
+export * from './UserRoomProfile';
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
new file mode 100644
index 00000000..62272a2e
--- /dev/null
+++ b/src/app/components/user-profile/styles.css.ts
@@ -0,0 +1,54 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const UserHeader = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  padding: config.space.S200,
+});
+
+export const UserHero = style({
+  position: 'relative',
+});
+
+export const UserHeroCoverContainer = style({
+  height: toRem(96),
+  overflow: 'hidden',
+});
+export const UserHeroCover = style({
+  height: '100%',
+  width: '100%',
+  objectFit: 'cover',
+  filter: 'blur(16px)',
+  transform: 'scale(2)',
+});
+
+export const UserHeroAvatarContainer = style({
+  position: 'relative',
+  height: toRem(29),
+});
+export const UserAvatarContainer = style({
+  position: 'absolute',
+  left: config.space.S400,
+  top: 0,
+  transform: 'translateY(-50%)',
+  backgroundColor: color.Surface.Container,
+});
+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/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx
new file mode 100644
index 00000000..cbae018f
--- /dev/null
+++ b/src/app/features/add-existing/AddExisting.tsx
@@ -0,0 +1,375 @@
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Spinner,
+  Text,
+} from 'folds';
+import React, {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useAtomValue } from 'jotai';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Room } from 'matrix-js-sdk';
+import { stopPropagation } from '../../utils/keyboard';
+import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+import { mDirectAtom } from '../../state/mDirectList';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { VirtualTile } from '../../components/virtualizer';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
+import { nameInitials } from '../../utils/common';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { factoryRoomIdByAtoZ } from '../../utils/sort';
+import {
+  SearchItemStrGetter,
+  useAsyncSearch,
+  UseAsyncSearchOptions,
+} from '../../hooks/useAsyncSearch';
+import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { StateEvent } from '../../../types/matrix/room';
+import { getViaServers } from '../../plugins/via-servers';
+import { rateLimitedActions } from '../../utils/matrix';
+import { useAlive } from '../../hooks/useAlive';
+
+const SEARCH_OPTS: UseAsyncSearchOptions = {
+  limit: 500,
+  matchOptions: {
+    contain: true,
+  },
+  normalizeOptions: {
+    ignoreWhitespace: false,
+  },
+};
+
+type AddExistingModalProps = {
+  parentId: string;
+  space?: boolean;
+  requestClose: () => void;
+};
+export function AddExistingModal({ parentId, space, requestClose }: AddExistingModalProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const alive = useAlive();
+
+  const mDirects = useAtomValue(mDirectAtom);
+  const spaces = useSpaces(mx, allRoomsAtom);
+  const rooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(mx, allRoomsAtom, mDirects);
+  const roomIdToParents = useAtomValue(roomToParentsAtom);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const allRoomsSet = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allRoomsSet);
+
+  const allItems: string[] = useMemo(() => {
+    const rIds = space ? [...spaces] : [...rooms, ...directs];
+
+    return rIds
+      .filter((rId) => rId !== parentId && !roomIdToParents.get(rId)?.has(parentId))
+      .sort(factoryRoomIdByAtoZ(mx));
+  }, [spaces, rooms, directs, space, parentId, roomIdToParents, mx]);
+
+  const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
+    (rId) => getRoom(rId)?.name ?? rId,
+    [getRoom]
+  );
+
+  const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
+    allItems,
+    getRoomNameStr,
+    SEARCH_OPTS
+  );
+  const queryHighlighRegex = searchResult?.query
+    ? makeHighlightRegex(searchResult.query.split(' '))
+    : undefined;
+
+  const items = searchResult ? searchResult.items : allItems;
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 32,
+    overscan: 5,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const value = evt.currentTarget.value.trim();
+    if (!value) {
+      resetSearch();
+      return;
+    }
+    searchRoom(value);
+  };
+
+  const [applyState, applyChanges] = useAsyncCallback<undefined, Error, [Room[]]>(
+    useCallback(
+      async (selectedRooms) => {
+        await rateLimitedActions(selectedRooms, async (room) => {
+          const via = getViaServers(room);
+
+          await mx.sendStateEvent(
+            parentId,
+            StateEvent.SpaceChild as any,
+            {
+              auto_join: false,
+              suggested: false,
+              via,
+            },
+            room.roomId
+          );
+        });
+      },
+      [mx, parentId]
+    )
+  );
+  const applyingChanges = applyState.status === AsyncStatus.Loading;
+
+  const handleRoomClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const roomId = evt.currentTarget.getAttribute('data-room-id');
+    if (!roomId) return;
+    if (selected?.includes(roomId)) {
+      setSelected(selected?.filter((rId) => rId !== roomId));
+      return;
+    }
+    const addedRooms = [...(selected ?? [])];
+    addedRooms.push(roomId);
+    setSelected(addedRooms);
+  };
+
+  const handleApplyChanges = () => {
+    const selectedRooms = selected.map((rId) => getRoom(rId)).filter((room) => room !== undefined);
+    applyChanges(selectedRooms).then(() => {
+      if (alive()) {
+        setSelected([]);
+        requestClose();
+      }
+    });
+  };
+
+  const resetChanges = () => {
+    setSelected([]);
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            clickOutsideDeactivates: true,
+            onDeactivate: requestClose,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Modal size="300">
+            <Box grow="Yes" direction="Column">
+              <Header
+                size="500"
+                style={{
+                  padding: config.space.S200,
+                  paddingLeft: config.space.S400,
+                }}
+              >
+                <Box grow="Yes">
+                  <Text size="H4">Add Existing</Text>
+                </Box>
+                <Box shrink="No">
+                  <IconButton size="300" radii="300" onClick={requestClose}>
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                </Box>
+              </Header>
+              <Box grow="Yes">
+                <Scroll ref={scrollRef} size="300" hideTrack>
+                  <Box
+                    style={{ padding: config.space.S300, paddingRight: 0 }}
+                    direction="Column"
+                    gap="500"
+                  >
+                    <Box
+                      direction="Column"
+                      style={{ position: 'sticky', top: config.space.S300, zIndex: 1 }}
+                    >
+                      <Input
+                        onChange={handleSearchChange}
+                        before={<Icon size="200" src={Icons.Search} />}
+                        placeholder="Search"
+                        size="400"
+                        variant="Background"
+                        outlined
+                      />
+                    </Box>
+                    {vItems.length === 0 && (
+                      <Box
+                        style={{ paddingTop: config.space.S700 }}
+                        grow="Yes"
+                        alignItems="Center"
+                        justifyContent="Center"
+                        direction="Column"
+                        gap="100"
+                      >
+                        <Text size="H6" align="Center">
+                          {searchResult ? 'No Match Found' : `No ${space ? 'Spaces' : 'Rooms'}`}
+                        </Text>
+                        <Text size="T200" align="Center">
+                          {searchResult
+                            ? `No match found for "${searchResult.query}".`
+                            : `You do not have any ${space ? 'Spaces' : 'Rooms'} to display yet.`}
+                        </Text>
+                      </Box>
+                    )}
+                    <Box
+                      style={{
+                        position: 'relative',
+                        height: virtualizer.getTotalSize(),
+                      }}
+                    >
+                      {vItems.map((vItem) => {
+                        const roomId = items[vItem.index];
+                        const room = getRoom(roomId);
+                        if (!room) return null;
+                        const selectedItem = selected?.includes(roomId);
+                        const dm = mDirects.has(room.roomId);
+
+                        return (
+                          <VirtualTile
+                            virtualItem={vItem}
+                            style={{ paddingBottom: config.space.S100 }}
+                            ref={virtualizer.measureElement}
+                            key={vItem.index}
+                          >
+                            <MenuItem
+                              data-room-id={roomId}
+                              onClick={handleRoomClick}
+                              variant={selectedItem ? 'Success' : 'Surface'}
+                              size="400"
+                              radii="400"
+                              disabled={applyingChanges}
+                              aria-pressed={selectedItem}
+                              before={
+                                <Avatar size="200" radii={dm ? '400' : '300'}>
+                                  {dm || room.isSpaceRoom() ? (
+                                    <RoomAvatar
+                                      roomId={room.roomId}
+                                      src={
+                                        dm
+                                          ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                                          : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                                      }
+                                      alt={room.name}
+                                      renderFallback={() => (
+                                        <Text as="span" size="H6">
+                                          {nameInitials(room.name)}
+                                        </Text>
+                                      )}
+                                    />
+                                  ) : (
+                                    <RoomIcon size="200" joinRule={room.getJoinRule()} />
+                                  )}
+                                </Avatar>
+                              }
+                              after={selectedItem && <Icon size="200" src={Icons.Check} />}
+                            >
+                              <Box grow="Yes">
+                                <Text truncate size="T400">
+                                  {queryHighlighRegex
+                                    ? highlightText(queryHighlighRegex, [room.name])
+                                    : room.name}
+                                </Text>
+                              </Box>
+                            </MenuItem>
+                          </VirtualTile>
+                        );
+                      })}
+                    </Box>
+                    {selected.length > 0 && (
+                      <Menu
+                        style={{
+                          position: 'sticky',
+                          padding: config.space.S200,
+                          paddingLeft: config.space.S400,
+                          bottom: config.space.S400,
+                          left: config.space.S400,
+                          right: 0,
+                          zIndex: 1,
+                        }}
+                        variant="Success"
+                      >
+                        <Box alignItems="Center" gap="400">
+                          <Box grow="Yes" direction="Column">
+                            {applyState.status === AsyncStatus.Error ? (
+                              <Text size="T200">
+                                <b>Failed to apply changes! Please try again.</b>
+                              </Text>
+                            ) : (
+                              <Text size="T200">
+                                <b>Apply when ready. ({selected.length} Selected)</b>
+                              </Text>
+                            )}
+                          </Box>
+                          <Box shrink="No" gap="200">
+                            <Button
+                              size="300"
+                              variant="Success"
+                              fill="None"
+                              radii="300"
+                              disabled={applyingChanges}
+                              onClick={resetChanges}
+                            >
+                              <Text size="B300">Reset</Text>
+                            </Button>
+                            <Button
+                              size="300"
+                              variant="Success"
+                              radii="300"
+                              disabled={applyingChanges}
+                              before={
+                                applyingChanges && (
+                                  <Spinner variant="Success" fill="Solid" size="100" />
+                                )
+                              }
+                              onClick={handleApplyChanges}
+                            >
+                              <Text size="B300">Apply Changes</Text>
+                            </Button>
+                          </Box>
+                        </Box>
+                      </Menu>
+                    )}
+                  </Box>
+                </Scroll>
+              </Box>
+            </Box>
+          </Modal>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
diff --git a/src/app/features/add-existing/index.ts b/src/app/features/add-existing/index.ts
new file mode 100644
index 00000000..3607c062
--- /dev/null
+++ b/src/app/features/add-existing/index.ts
@@ -0,0 +1 @@
+export * from './AddExisting';
diff --git a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
index 6ee19be9..0ea96901 100644
--- a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
+++ b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
@@ -27,8 +27,10 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCardStyle } from '../styles.css';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -244,8 +246,10 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
   const stateEvent = useStateEvent(room, type as unknown as StateEvent, stateKey);
   const [editContent, setEditContent] = useState<object>();
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canEdit = canSendStateEvent(type, getPowerLevel(mx.getSafeUserId()));
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEdit = permissions.stateEvent(type, mx.getSafeUserId());
 
   const eventJSONStr = useMemo(() => {
     if (!stateEvent) return '';
diff --git a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
index 56dda548..fdbe546e 100644
--- a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
+++ b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
@@ -33,11 +33,13 @@ import { SequenceCardStyle } from '../styles.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { suffixRename } from '../../../utils/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type CreatePackTileProps = {
   packs: ImagePack[];
@@ -146,8 +148,10 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
   const alive = useAlive();
 
   const powerLevels = usePowerLevels(room);
-  const { canSendStateEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
-  const canEdit = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(mx.getSafeUserId()));
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEdit = permissions.stateEvent(StateEvent.PoniesRoomEmotes, mx.getSafeUserId());
 
   const unfilteredPacks = useRoomImagePacks(room);
   const packs = useMemo(() => unfilteredPacks.filter((pack) => !pack.deleted), [unfilteredPacks]);
diff --git a/src/app/features/common-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx
index 9e1f1a97..400e73ae 100644
--- a/src/app/features/common-settings/general/RoomAddress.tsx
+++ b/src/app/features/common-settings/general/RoomAddress.tsx
@@ -15,7 +15,6 @@ import {
   toRem,
 } from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
-import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
@@ -33,19 +32,19 @@ 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';
 
 type RoomPublishedAddressesProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
 };
 
-export function RoomPublishedAddresses({ powerLevels }: RoomPublishedAddressesProps) {
+export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canEditCanonical = powerLevelAPI.canSendStateEvent(
-    powerLevels,
+
+  const canEditCanonical = permissions.stateEvent(
     StateEvent.RoomCanonicalAlias,
-    userPowerLevel
+    mx.getSafeUserId()
   );
 
   const [canonicalAlias, publishedAliases] = usePublishedAliases(room);
@@ -360,14 +359,13 @@ function LocalAddressesList({
   );
 }
 
-export function RoomLocalAddresses({ powerLevels }: { powerLevels: IPowerLevels }) {
+export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissionsAPI }) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canEditCanonical = powerLevelAPI.canSendStateEvent(
-    powerLevels,
+
+  const canEditCanonical = permissions.stateEvent(
     StateEvent.RoomCanonicalAlias,
-    userPowerLevel
+    mx.getSafeUserId()
   );
 
   const [expand, setExpand] = useState(false);
diff --git a/src/app/features/common-settings/general/RoomEncryption.tsx b/src/app/features/common-settings/general/RoomEncryption.tsx
index 1bb73399..15b1f156 100644
--- a/src/app/features/common-settings/general/RoomEncryption.tsx
+++ b/src/app/features/common-settings/general/RoomEncryption.tsx
@@ -21,28 +21,24 @@ import FocusTrap from 'focus-trap-react';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoom } from '../../../hooks/useRoom';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
 
 type RoomEncryptionProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
 };
-export function RoomEncryption({ powerLevels }: RoomEncryptionProps) {
+export function RoomEncryption({ permissions }: RoomEncryptionProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canEnable = powerLevelAPI.canSendStateEvent(
-    powerLevels,
-    StateEvent.RoomEncryption,
-    userPowerLevel
-  );
+
+  const canEnable = permissions.stateEvent(StateEvent.RoomEncryption, mx.getSafeUserId());
   const content = useStateEvent(room, StateEvent.RoomEncryption)?.getContent<{
     algorithm: string;
   }>();
diff --git a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
index 7b329b13..2e42785f 100644
--- a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
+++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
@@ -18,13 +18,13 @@ import FocusTrap from 'focus-trap-react';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 const useVisibilityStr = () =>
   useMemo(
@@ -49,17 +49,13 @@ const useVisibilityMenu = () =>
   );
 
 type RoomHistoryVisibilityProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
 };
-export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProps) {
+export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canEdit = powerLevelAPI.canSendStateEvent(
-    powerLevels,
-    StateEvent.RoomHistoryVisibility,
-    userPowerLevel
-  );
+
+  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
 
   const visibilityEvent = useStateEvent(room, StateEvent.RoomHistoryVisibility);
   const historyVisibility: HistoryVisibility =
diff --git a/src/app/features/common-settings/general/RoomJoinRules.tsx b/src/app/features/common-settings/general/RoomJoinRules.tsx
index 158ca25b..b9e75499 100644
--- a/src/app/features/common-settings/general/RoomJoinRules.tsx
+++ b/src/app/features/common-settings/general/RoomJoinRules.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useMemo } from 'react';
 import { color, Text } from 'folds';
 import { JoinRule, MatrixError, RestrictedAllowType } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+import { useAtomValue } from 'jotai';
 import {
+  ExtendedJoinRules,
   JoinRulesSwitcher,
   useRoomJoinRuleIcon,
   useRoomJoinRuleLabel,
@@ -19,6 +20,18 @@ import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { getStateEvents } from '../../../utils/room';
+import {
+  useRecursiveChildSpaceScopeFactory,
+  useSpaceChildren,
+} from '../../../state/hooks/roomList';
+import { allRoomsAtom } from '../../../state/room-list/roomList';
+import { roomToParentsAtom } from '../../../state/room/roomToParents';
+import {
+  knockRestrictedSupported,
+  knockSupported,
+  restrictedSupported,
+} from '../../../utils/matrix';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RestrictedRoomAllowContent = {
   room_id: string;
@@ -26,39 +39,41 @@ type RestrictedRoomAllowContent = {
 };
 
 type RoomJoinRulesProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
 };
-export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
+export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const roomVersion = parseInt(room.getVersion(), 10);
-  const allowRestricted = roomVersion >= 8;
-  const allowKnock = roomVersion >= 7;
-  const space = useSpaceOptionally();
+  const allowKnockRestricted = knockRestrictedSupported(room.getVersion());
+  const allowRestricted = restrictedSupported(room.getVersion());
+  const allowKnock = knockSupported(room.getVersion());
 
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canEdit = powerLevelAPI.canSendStateEvent(
-    powerLevels,
-    StateEvent.RoomHistoryVisibility,
-    userPowerLevel
-  );
+  const roomIdToParents = useAtomValue(roomToParentsAtom);
+  const space = useSpaceOptionally();
+  const subspacesScope = useRecursiveChildSpaceScopeFactory(mx, roomIdToParents);
+  const subspaces = useSpaceChildren(allRoomsAtom, space?.roomId ?? '', subspacesScope);
+
+  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
 
   const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
   const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();
   const rule: JoinRule = content?.join_rule ?? JoinRule.Invite;
 
-  const joinRules: Array<JoinRule> = useMemo(() => {
-    const r: JoinRule[] = [JoinRule.Invite];
+  const joinRules: Array<ExtendedJoinRules> = useMemo(() => {
+    const r: ExtendedJoinRules[] = [JoinRule.Invite];
     if (allowKnock) {
       r.push(JoinRule.Knock);
     }
     if (allowRestricted && space) {
       r.push(JoinRule.Restricted);
     }
+    if (allowKnockRestricted && space) {
+      r.push('knock_restricted');
+    }
     r.push(JoinRule.Public);
 
     return r;
-  }, [allowRestricted, allowKnock, space]);
+  }, [allowKnockRestricted, allowRestricted, allowKnock, space]);
 
   const icons = useRoomJoinRuleIcon();
   const spaceIcons = useSpaceJoinRuleIcon();
@@ -66,12 +81,25 @@ export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
 
   const [submitState, submit] = useAsyncCallback(
     useCallback(
-      async (joinRule: JoinRule) => {
+      async (joinRule: ExtendedJoinRules) => {
         const allow: RestrictedRoomAllowContent[] = [];
-        if (joinRule === JoinRule.Restricted) {
-          const parents = getStateEvents(room, StateEvent.SpaceParent).map((event) =>
-            event.getStateKey()
-          );
+        if (joinRule === JoinRule.Restricted || joinRule === 'knock_restricted') {
+          const roomParents = roomIdToParents.get(room.roomId);
+
+          const parents = getStateEvents(room, StateEvent.SpaceParent)
+            .map((event) => event.getStateKey())
+            .filter((parentId) => typeof parentId === 'string')
+            .filter((parentId) => roomParents?.has(parentId));
+
+          if (parents.length === 0 && space && roomParents) {
+            // if no m.space.parent found
+            // find parent in current space
+            const selectedParents = subspaces.filter((rId) => roomParents.has(rId));
+            if (roomParents.has(space.roomId)) {
+              selectedParents.push(space.roomId);
+            }
+            selectedParents.forEach((pId) => parents.push(pId));
+          }
           parents.forEach((parentRoomId) => {
             if (!parentRoomId) return;
             allow.push({
@@ -82,12 +110,12 @@ export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
         }
 
         const c: RoomJoinRulesEventContent = {
-          join_rule: joinRule,
+          join_rule: joinRule as JoinRule,
         };
         if (allow.length > 0) c.allow = allow;
         await mx.sendStateEvent(room.roomId, StateEvent.RoomJoinRules as any, c);
       },
-      [mx, room]
+      [mx, room, space, subspaces, roomIdToParents]
     )
   );
 
diff --git a/src/app/features/common-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx
index a3a62e1c..0f515c39 100644
--- a/src/app/features/common-settings/general/RoomProfile.tsx
+++ b/src/app/features/common-settings/general/RoomProfile.tsx
@@ -32,7 +32,6 @@ import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { IPowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useObjectURL } from '../../../hooks/useObjectURL';
@@ -40,6 +39,7 @@ import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { useFilePicker } from '../../../hooks/useFilePicker';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
@@ -261,24 +261,22 @@ export function RoomProfileEdit({
 }
 
 type RoomProfileProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
 };
-export function RoomProfile({ powerLevels }: RoomProfileProps) {
+export function RoomProfile({ permissions }: RoomProfileProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
   const directs = useAtomValue(mDirectAtom);
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const userPowerLevel = getPowerLevel(mx.getSafeUserId());
 
   const avatar = useRoomAvatar(room, directs.has(room.roomId));
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const joinRule = useRoomJoinRule(room);
 
-  const canEditAvatar = canSendStateEvent(StateEvent.RoomAvatar, userPowerLevel);
-  const canEditName = canSendStateEvent(StateEvent.RoomName, userPowerLevel);
-  const canEditTopic = canSendStateEvent(StateEvent.RoomTopic, userPowerLevel);
+  const canEditAvatar = permissions.stateEvent(StateEvent.RoomAvatar, mx.getSafeUserId());
+  const canEditName = permissions.stateEvent(StateEvent.RoomName, mx.getSafeUserId());
+  const canEditTopic = permissions.stateEvent(StateEvent.RoomTopic, mx.getSafeUserId());
   const canEdit = canEditAvatar || canEditName || canEditTopic;
 
   const avatarUrl = avatar
diff --git a/src/app/features/common-settings/general/RoomPublish.tsx b/src/app/features/common-settings/general/RoomPublish.tsx
index e27c6872..ce014210 100644
--- a/src/app/features/common-settings/general/RoomPublish.tsx
+++ b/src/app/features/common-settings/general/RoomPublish.tsx
@@ -1,28 +1,33 @@
 import React from 'react';
 import { Box, color, Spinner, Switch, Text } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
+import { JoinRule, MatrixError } from 'matrix-js-sdk';
+import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { ExtendedJoinRules } from '../../../components/JoinRulesSwitcher';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RoomPublishProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
 };
-export function RoomPublish({ powerLevels }: RoomPublishProps) {
+export function RoomPublish({ permissions }: RoomPublishProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canEditCanonical = powerLevelAPI.canSendStateEvent(
-    powerLevels,
+
+  const canEditCanonical = permissions.stateEvent(
     StateEvent.RoomCanonicalAlias,
-    userPowerLevel
+    mx.getSafeUserId()
   );
+  const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
+  const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();
+  const rule: ExtendedJoinRules = (content?.join_rule as ExtendedJoinRules) ?? JoinRule.Invite;
 
   const { visibilityState, setVisibility } = useRoomDirectoryVisibility(room.roomId);
 
@@ -30,6 +35,8 @@ export function RoomPublish({ powerLevels }: RoomPublishProps) {
 
   const loading =
     visibilityState.status === AsyncStatus.Loading || toggleState.status === AsyncStatus.Loading;
+  const validRule =
+    rule === JoinRule.Public || rule === JoinRule.Knock || rule === 'knock_restricted';
 
   return (
     <SequenceCard
@@ -39,7 +46,12 @@ export function RoomPublish({ powerLevels }: RoomPublishProps) {
       gap="400"
     >
       <SettingTile
-        title="Publish To Directory"
+        title="Publish to Directory"
+        description={
+          room.isSpaceRoom()
+            ? 'List the space in the public directory to make it discoverable by others.'
+            : 'List the room in the public directory to make it discoverable by others.'
+        }
         after={
           <Box gap="200" alignItems="Center">
             {loading && <Spinner variant="Secondary" />}
@@ -47,7 +59,7 @@ export function RoomPublish({ powerLevels }: RoomPublishProps) {
               <Switch
                 value={visibilityState.data}
                 onChange={toggleVisibility}
-                disabled={!canEditCanonical}
+                disabled={!canEditCanonical || !validRule}
               />
             )}
           </Box>
diff --git a/src/app/features/common-settings/general/RoomUpgrade.tsx b/src/app/features/common-settings/general/RoomUpgrade.tsx
index 5d6bc5e2..45a480aa 100644
--- a/src/app/features/common-settings/general/RoomUpgrade.tsx
+++ b/src/app/features/common-settings/general/RoomUpgrade.tsx
@@ -1,4 +1,4 @@
-import React, { FormEventHandler, useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Button,
   color,
@@ -14,54 +14,172 @@ import {
   IconButton,
   Icon,
   Icons,
-  Input,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { MatrixError } from 'matrix-js-sdk';
-import { RoomCreateEventContent, RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
+import { MatrixError, Method } from 'matrix-js-sdk';
+import { RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
-import { StateEvent } from '../../../../types/matrix/room';
+import { IRoomCreateContent, StateEvent } from '../../../../types/matrix/room';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useCapabilities } from '../../../hooks/useCapabilities';
 import { stopPropagation } from '../../../utils/keyboard';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import {
+  AdditionalCreatorInput,
+  RoomVersionSelector,
+  useAdditionalCreators,
+} from '../../../components/create-room';
+import { useAlive } from '../../../hooks/useAlive';
+import { creatorsSupported } from '../../../utils/matrix';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { BreakWord } from '../../../styles/Text.css';
+
+function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const alive = useAlive();
+  const creators = useRoomCreators(room);
+
+  const capabilities = useCapabilities();
+  const roomVersions = capabilities['m.room_versions'];
+  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
+  useEffect(() => {
+    // capabilities load async
+    selectRoomVersion(roomVersions?.default ?? '1');
+  }, [roomVersions?.default]);
+
+  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
+  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
+    useAdditionalCreators(Array.from(creators));
+
+  const [upgradeState, upgrade] = useAsyncCallback(
+    useCallback(
+      async (version: string, newAdditionalCreators?: string[]) => {
+        await mx.http.authedRequest(Method.Post, `/rooms/${room.roomId}/upgrade`, undefined, {
+          new_version: version,
+          additional_creators: newAdditionalCreators,
+        });
+      },
+      [mx, room]
+    )
+  );
+
+  const upgrading = upgradeState.status === AsyncStatus.Loading;
+
+  const handleUpgradeRoom = () => {
+    const version = selectedRoomVersion;
+
+    upgrade(version, allowAdditionalCreators ? additionalCreators : undefined).then(() => {
+      if (alive()) {
+        requestClose();
+      }
+    });
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: requestClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
+              </Box>
+              <IconButton size="300" onClick={requestClose} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Text priority="400" style={{ color: color.Critical.Main }}>
+                <b>This action is irreversible!</b>
+              </Text>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <RoomVersionSelector
+                  versions={roomVersions?.available ? Object.keys(roomVersions.available) : ['1']}
+                  value={selectedRoomVersion}
+                  onChange={selectRoomVersion}
+                  disabled={upgrading}
+                />
+                {allowAdditionalCreators && (
+                  <SequenceCard
+                    style={{ padding: config.space.S300 }}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="500"
+                  >
+                    <AdditionalCreatorInput
+                      additionalCreators={additionalCreators}
+                      onSelect={addAdditionalCreator}
+                      onRemove={removeAdditionalCreator}
+                      disabled={upgrading}
+                    />
+                  </SequenceCard>
+                )}
+              </Box>
+              {upgradeState.status === AsyncStatus.Error && (
+                <Text className={BreakWord} style={{ color: color.Critical.Main }} size="T200">
+                  {(upgradeState.error as MatrixError).message}
+                </Text>
+              )}
+              <Button
+                onClick={handleUpgradeRoom}
+                variant="Secondary"
+                disabled={upgrading}
+                before={upgrading && <Spinner size="200" variant="Secondary" fill="Solid" />}
+              >
+                <Text size="B400">{room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}</Text>
+              </Button>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
 
 type RoomUpgradeProps = {
-  powerLevels: IPowerLevels;
+  permissions: RoomPermissionsAPI;
   requestClose: () => void;
 };
-export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
+export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const createContent = useStateEvent(
     room,
     StateEvent.RoomCreate
-  )?.getContent<RoomCreateEventContent>();
-  const roomVersion = createContent?.room_version ?? 1;
+  )?.getContent<IRoomCreateContent>();
+  const roomVersion = createContent?.room_version ?? '1';
   const predecessorRoomId = createContent?.predecessor?.room_id;
 
-  const capabilities = useCapabilities();
-  const defaultRoomVersion = capabilities['m.room_versions']?.default;
-
   const tombstoneContent = useStateEvent(
     room,
     StateEvent.RoomTombstone
   )?.getContent<RoomTombstoneEventContent>();
   const replacementRoom = tombstoneContent?.replacement_room;
 
-  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
-  const canUpgrade = powerLevelAPI.canSendStateEvent(
-    powerLevels,
-    StateEvent.RoomTombstone,
-    userPowerLevel
-  );
+  const canUpgrade = permissions.stateEvent(StateEvent.RoomTombstone, mx.getSafeUserId());
 
   const handleOpenRoom = () => {
     if (replacementRoom) {
@@ -85,31 +203,8 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
     }
   };
 
-  const [upgradeState, upgrade] = useAsyncCallback(
-    useCallback(
-      async (version: string) => {
-        await mx.upgradeRoom(room.roomId, version);
-      },
-      [mx, room]
-    )
-  );
-
-  const upgrading = upgradeState.status === AsyncStatus.Loading;
-
   const [prompt, setPrompt] = useState(false);
 
-  const handleSubmitUpgrade: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-
-    const target = evt.target as HTMLFormElement | undefined;
-    const versionInput = target?.versionInput as HTMLInputElement | undefined;
-    const version = versionInput?.value.trim();
-    if (!version) return;
-
-    upgrade(version);
-    setPrompt(false);
-  };
-
   return (
     <SequenceCard
       className={SequenceCardStyle}
@@ -123,7 +218,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
           replacementRoom
             ? tombstoneContent.body ||
               `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
-            : `Current room version: ${roomVersion}.`
+            : `Current version: ${roomVersion}.`
         }
         after={
           <Box alignItems="Center" gap="200">
@@ -155,8 +250,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
                 variant="Secondary"
                 fill="Solid"
                 radii="300"
-                disabled={upgrading || !canUpgrade}
-                before={upgrading && <Spinner size="100" variant="Secondary" fill="Solid" />}
+                disabled={!canUpgrade}
                 onClick={() => setPrompt(true)}
               >
                 <Text size="B300">Upgrade</Text>
@@ -165,63 +259,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
           </Box>
         }
       >
-        {upgradeState.status === AsyncStatus.Error && (
-          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(upgradeState.error as MatrixError).message}
-          </Text>
-        )}
-
-        {prompt && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setPrompt(false),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Dialog variant="Surface" as="form" onSubmit={handleSubmitUpgrade}>
-                  <Header
-                    style={{
-                      padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                      borderBottomWidth: config.borderWidth.B300,
-                    }}
-                    variant="Surface"
-                    size="500"
-                  >
-                    <Box grow="Yes">
-                      <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
-                    </Box>
-                    <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
-                      <Icon src={Icons.Cross} />
-                    </IconButton>
-                  </Header>
-                  <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-                    <Text priority="400" style={{ color: color.Critical.Main }}>
-                      <b>This action is irreversible!</b>
-                    </Text>
-                    <Box direction="Column" gap="100">
-                      <Text size="L400">Version</Text>
-                      <Input
-                        defaultValue={defaultRoomVersion}
-                        name="versionInput"
-                        variant="Background"
-                        required
-                      />
-                    </Box>
-                    <Button type="submit" variant="Secondary">
-                      <Text size="B400">
-                        {room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
-                      </Text>
-                    </Button>
-                  </Box>
-                </Dialog>
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
-        )}
+        {prompt && <RoomUpgradeDialog requestClose={() => setPrompt(false)} />}
       </SettingTile>
     </SequenceCard>
   );
diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 8d7f89fd..9940a751 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -27,17 +27,12 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomMembers } from '../../../hooks/useRoomMembers';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
-import {
-  useFlattenPowerLevelTagMembers,
-  usePowerLevelTags,
-} from '../../../hooks/usePowerLevelTags';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { VirtualTile } from '../../../components/virtualizer';
 import { MemberTile } from '../../../components/member-tile';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
 import { ServerBadge } from '../../../components/server-badge';
-import { openProfileViewer } from '../../../../client/action/navigation';
 import { useDebounce } from '../../../hooks/useDebounce';
 import {
   SearchItemStrGetter,
@@ -46,13 +41,21 @@ import {
 } from '../../../hooks/useAsyncSearch';
 import { getMemberSearchStr } from '../../../utils/room';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter';
-import { useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
+import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
 import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { MembershipFilterMenu } from '../../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../../components/MemberSortMenu';
 import { ScrollTopContainer } from '../../../components/scroll-top-container';
+import {
+  useOpenUserRoomProfile,
+  useUserRoomProfileState,
+} from '../../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../../hooks/useSpace';
+import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { getMouseEventCords } from '../../../utils/dom';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -77,15 +80,19 @@ export function Members({ requestClose }: MembersProps) {
   const room = useRoom();
   const members = useRoomMembers(mx, room.roomId);
   const fetchingMembers = members.length < room.getJoinedMemberCount();
+  const openProfile = useOpenUserRoomProfile();
+  const profileUser = useUserRoomProfileState();
+  const space = useSpaceOptionally();
 
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
-  const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const creators = useRoomCreators(room);
+  const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
 
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu());
   const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
+  const memberPowerSort = useMemberPowerSort(creators);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -96,8 +103,8 @@ export function Members({ requestClose }: MembersProps) {
       Array.from(members)
         .filter(membershipFilter.filterFn)
         .sort(memberSort.sortFn)
-        .sort((a, b) => b.powerLevel - a.powerLevel),
-    [members, membershipFilter, memberSort]
+        .sort(memberPowerSort),
+    [members, membershipFilter, memberSort, memberPowerSort]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
@@ -107,11 +114,7 @@ export function Members({ requestClose }: MembersProps) {
   );
   if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
 
-  const flattenTagMembers = useFlattenPowerLevelTagMembers(
-    result?.items ?? sortedMembers,
-    getPowerLevel,
-    getPowerLevelTag
-  );
+  const flattenTagMembers = useFlattenPowerTagMembers(result?.items ?? sortedMembers, getPowerTag);
 
   const virtualizer = useVirtualizer({
     count: flattenTagMembers.length,
@@ -142,8 +145,9 @@ export function Members({ requestClose }: MembersProps) {
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
-    openProfileViewer(userId, room.roomId);
-    requestClose();
+    if (userId) {
+      openProfile(room.roomId, space?.roomId, userId, getMouseEventCords(evt.nativeEvent));
+    }
   };
 
   return (
@@ -317,6 +321,7 @@ export function Members({ requestClose }: MembersProps) {
                           <MemberTile
                             data-user-id={tagOrMember.userId}
                             onClick={handleMemberClick}
+                            aria-pressed={profileUser?.userId === tagOrMember.userId}
                             mx={mx}
                             room={room}
                             member={tagOrMember}
diff --git a/src/app/features/common-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx
index 54c9c5d2..12150773 100644
--- a/src/app/features/common-settings/permissions/PermissionGroups.tsx
+++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx
@@ -10,10 +10,9 @@ import {
   getPermissionPower,
   IPowerLevels,
   PermissionLocation,
-  usePowerLevelsAPI,
 } from '../../../hooks/usePowerLevels';
 import { PermissionGroup } from './types';
-import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { getPowerLevelTag, getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { useRoom } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
@@ -26,19 +25,20 @@ const USER_DEFAULT_LOCATION: PermissionLocation = {
 };
 
 type PermissionGroupsProps = {
+  canEdit: boolean;
   powerLevels: IPowerLevels;
   permissionGroups: PermissionGroup[];
 };
-export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGroupsProps) {
+export function PermissionGroups({
+  powerLevels,
+  permissionGroups,
+  canEdit,
+}: PermissionGroupsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const alive = useAlive();
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canChangePermission = canSendStateEvent(
-    StateEvent.RoomPowerLevels,
-    getPowerLevel(mx.getSafeUserId())
-  );
-  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
   const maxPower = useMemo(() => Math.max(...getPowers(powerLevelTags)), [powerLevelTags]);
 
   const [permissionUpdate, setPermissionUpdate] = useState<Map<PermissionLocation, number>>(
@@ -82,6 +82,7 @@ export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGr
         permissionUpdate.forEach((power, location) =>
           applyPermissionPower(draftPowerLevels, location, power)
         );
+
         return draftPowerLevels;
       });
       await mx.sendStateEvent(room.roomId, StateEvent.RoomPowerLevels as any, editedPowerLevels);
@@ -108,7 +109,7 @@ export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGr
     const powerUpdate = permissionUpdate.get(USER_DEFAULT_LOCATION);
     const value = powerUpdate ?? power;
 
-    const tag = getPowerLevelTag(value);
+    const tag = getPowerLevelTag(powerLevelTags, value);
     const powerChanges = value !== power;
 
     return (
@@ -136,14 +137,14 @@ export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGr
                     fill="Soft"
                     radii="Pill"
                     aria-selected={opened}
-                    disabled={!canChangePermission || applyingChanges}
+                    disabled={!canEdit || applyingChanges}
                     after={
                       powerChanges && (
                         <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
                       )
                     }
                     before={
-                      canChangePermission && (
+                      canEdit && (
                         <Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
                       )
                     }
@@ -173,7 +174,7 @@ export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGr
             const powerUpdate = permissionUpdate.get(item.location);
             const value = powerUpdate ?? power;
 
-            const tag = getPowerLevelTag(value);
+            const tag = getPowerLevelTag(powerLevelTags, value);
             const powerChanges = value !== power;
 
             return (
@@ -200,14 +201,14 @@ export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGr
                           fill="Soft"
                           radii="Pill"
                           aria-selected={opened}
-                          disabled={!canChangePermission || applyingChanges}
+                          disabled={!canEdit || applyingChanges}
                           after={
                             powerChanges && (
                               <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
                             )
                           }
                           before={
-                            canChangePermission && (
+                            canEdit && (
                               <Icon
                                 size="50"
                                 src={opened ? Icons.ChevronTop : Icons.ChevronBottom}
diff --git a/src/app/features/common-settings/permissions/Powers.tsx b/src/app/features/common-settings/permissions/Powers.tsx
index b7dadf5a..fe4f5689 100644
--- a/src/app/features/common-settings/permissions/Powers.tsx
+++ b/src/app/features/common-settings/permissions/Powers.tsx
@@ -16,7 +16,7 @@ import {
 } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
-import { getPowers, getTagIconSrc, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { SettingTile } from '../../../components/setting-tile';
 import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
@@ -25,6 +25,9 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { stopPropagation } from '../../../utils/keyboard';
 import { PermissionGroup } from './types';
+import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
 
 type PeekPermissionsProps = {
   powerLevels: IPowerLevels;
@@ -108,10 +111,43 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
-  const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const creators = useRoomCreators(room);
+  const creatorsTag = useRoomCreatorsTag();
+  const creatorTagIconSrc =
+    creatorsTag.icon && getPowerTagIconSrc(mx, useAuthentication, creatorsTag.icon);
 
   return (
     <Box direction="Column" gap="100">
+      {creators.size > 0 && (
+        <SequenceCard
+          variant="SurfaceVariant"
+          className={SequenceCardStyle}
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title="Founders"
+            description="Founding members has all permissions and can only be changed during upgrade."
+          />
+
+          <SettingTile>
+            <Box gap="200" wrap="Wrap">
+              <Chip
+                disabled
+                variant="Secondary"
+                radii="300"
+                before={<PowerColorBadge color={creatorsTag.color} />}
+                after={creatorTagIconSrc && <PowerIcon size="50" iconSrc={creatorTagIconSrc} />}
+              >
+                <Text size="T300" truncate>
+                  <b>{creatorsTag.name}</b>
+                </Text>
+              </Chip>
+            </Box>
+          </SettingTile>
+        </SequenceCard>
+      )}
       <SequenceCard
         variant="SurfaceVariant"
         className={SequenceCardStyle}
@@ -142,7 +178,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
           <Box gap="200" wrap="Wrap">
             {getPowers(powerLevelTags).map((power) => {
               const tag = powerLevelTags[power];
-              const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
+              const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
 
               return (
                 <PeekPermissions
diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
index 25d2ba95..97305946 100644
--- a/src/app/features/common-settings/permissions/PowersEditor.tsx
+++ b/src/app/features/common-settings/permissions/PowersEditor.tsx
@@ -27,10 +27,7 @@ import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import {
   getPowers,
-  getTagIconSrc,
   getUsedPowers,
-  PowerLevelTag,
-  PowerLevelTagIcon,
   PowerLevelTags,
   usePowerLevelTags,
 } from '../../../hooks/usePowerLevelTags';
@@ -47,15 +44,17 @@ import { useFilePicker } from '../../../hooks/useFilePicker';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { StateEvent } from '../../../../types/matrix/room';
+import { MemberPowerTag, MemberPowerTagIcon, StateEvent } from '../../../../types/matrix/room';
 import { useAlive } from '../../../hooks/useAlive';
 import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
+import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
+import { creatorsSupported } from '../../../utils/matrix';
 
 type EditPowerProps = {
   maxPower: number;
   power?: number;
-  tag?: PowerLevelTag;
-  onSave: (power: number, tag: PowerLevelTag) => void;
+  tag?: MemberPowerTag;
+  onSave: (power: number, tag: MemberPowerTag) => void;
   onClose: () => void;
 };
 function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
@@ -63,6 +62,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
   const room = useRoom();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const useAuthentication = useMediaAuthentication();
+  const supportCreators = creatorsSupported(room.getVersion());
 
   const imagePackRooms = useImagePackRooms(room.roomId, roomToParents);
 
@@ -70,9 +70,9 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
   const pickFile = useFilePicker(setIconFile, false);
 
   const [tagColor, setTagColor] = useState<string | undefined>(tag?.color);
-  const [tagIcon, setTagIcon] = useState<PowerLevelTagIcon | undefined>(tag?.icon);
+  const [tagIcon, setTagIcon] = useState<MemberPowerTagIcon | undefined>(tag?.icon);
   const uploadingIcon = iconFile && !tagIcon;
-  const tagIconSrc = tagIcon && getTagIconSrc(mx, useAuthentication, tagIcon);
+  const tagIconSrc = tagIcon && getPowerTagIconSrc(mx, useAuthentication, tagIcon);
 
   const iconUploadAtom = useMemo(() => {
     if (iconFile) return createUploadAtom(iconFile);
@@ -101,11 +101,11 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
 
     const tagPower = parseInt(powerInput.value, 10);
     if (Number.isNaN(tagPower)) return;
-    if (tagPower > maxPower) return;
+
     const tagName = nameInput.value.trim();
     if (!tagName) return;
 
-    const editedTag: PowerLevelTag = {
+    const editedTag: MemberPowerTag = {
       name: tagName,
       color: tagColor,
       icon: tagIcon,
@@ -165,7 +165,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
               radii="300"
               type="number"
               placeholder="75"
-              max={maxPower}
+              max={supportCreators ? undefined : maxPower}
               outlined={typeof power === 'number'}
               readOnly={typeof power === 'number'}
               required
@@ -298,7 +298,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
     return [up, Math.max(...Array.from(up))];
   }, [powerLevels]);
 
-  const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
   const [editedPowerTags, setEditedPowerTags] = useState<PowerLevelTags>();
   const [deleted, setDeleted] = useState<Set<number>>(new Set());
 
@@ -317,7 +317,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
   }, []);
 
   const handleSaveTag = useCallback(
-    (power: number, tag: PowerLevelTag) => {
+    (power: number, tag: MemberPowerTag) => {
       setEditedPowerTags((tags) => {
         const editedTags = { ...(tags ?? powerLevelTags) };
         editedTags[power] = tag;
@@ -419,7 +419,8 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
                 </SequenceCard>
                 {getPowers(powerTags).map((power) => {
                   const tag = powerTags[power];
-                  const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
+                  const tagIconSrc =
+                    tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
 
                   return (
                     <SequenceCard
diff --git a/src/app/features/create-chat/CreateChat.tsx b/src/app/features/create-chat/CreateChat.tsx
new file mode 100644
index 00000000..faa4511b
--- /dev/null
+++ b/src/app/features/create-chat/CreateChat.tsx
@@ -0,0 +1,150 @@
+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
new file mode 100644
index 00000000..ed988dfb
--- /dev/null
+++ b/src/app/features/create-chat/index.ts
@@ -0,0 +1 @@
+export * from './CreateChat';
diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx
new file mode 100644
index 00000000..6ad469c9
--- /dev/null
+++ b/src/app/features/create-room/CreateRoom.tsx
@@ -0,0 +1,306 @@
+import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
+import { MatrixError, Room } from 'matrix-js-sdk';
+import {
+  Box,
+  Button,
+  Chip,
+  color,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Spinner,
+  Switch,
+  Text,
+  TextArea,
+} from 'folds';
+import { SettingTile } from '../../components/setting-tile';
+import { SequenceCard } from '../../components/sequence-card';
+import {
+  creatorsSupported,
+  knockRestrictedSupported,
+  knockSupported,
+  restrictedSupported,
+} from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useCapabilities } from '../../hooks/useCapabilities';
+import { useAlive } from '../../hooks/useAlive';
+import { ErrorCode } from '../../cs-errorcode';
+import {
+  AdditionalCreatorInput,
+  createRoom,
+  CreateRoomAliasInput,
+  CreateRoomData,
+  CreateRoomKind,
+  CreateRoomKindSelector,
+  RoomVersionSelector,
+  useAdditionalCreators,
+} from '../../components/create-room';
+
+const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
+  if (kind === CreateRoomKind.Private) return Icons.HashLock;
+  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
+  return Icons.HashGlobe;
+};
+
+type CreateRoomFormProps = {
+  defaultKind?: CreateRoomKind;
+  space?: Room;
+  onCreate?: (roomId: string) => void;
+};
+export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const capabilities = useCapabilities();
+  const roomVersions = capabilities['m.room_versions'];
+  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
+  useEffect(() => {
+    // capabilities load async
+    selectRoomVersion(roomVersions?.default ?? '1');
+  }, [roomVersions?.default]);
+
+  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
+
+  const [kind, setKind] = useState(
+    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
+  );
+  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
+  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
+    useAdditionalCreators();
+  const [federation, setFederation] = useState(true);
+  const [encryption, setEncryption] = useState(false);
+  const [knock, setKnock] = useState(false);
+  const [advance, setAdvance] = useState(false);
+
+  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnockRestricted =
+    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+
+  const handleRoomVersionChange = (version: string) => {
+    if (!restrictedSupported(version)) {
+      setKind(CreateRoomKind.Private);
+    }
+    selectRoomVersion(version);
+  };
+
+  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
+    useCallback((data) => createRoom(mx, data), [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();
+    if (disabled) return;
+    const form = evt.currentTarget;
+
+    const nameInput = form.nameInput as HTMLInputElement | undefined;
+    const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined;
+    const aliasInput = form.aliasInput as HTMLInputElement | undefined;
+    const roomName = nameInput?.value.trim();
+    const roomTopic = topicTextArea?.value.trim();
+    const aliasLocalPart =
+      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
+
+    if (!roomName) return;
+    const publicRoom = kind === CreateRoomKind.Public;
+    let roomKnock = false;
+    if (allowKnock && kind === CreateRoomKind.Private) {
+      roomKnock = knock;
+    }
+    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+      roomKnock = knock;
+    }
+
+    create({
+      version: selectedRoomVersion,
+      parent: space,
+      kind,
+      name: roomName,
+      topic: roomTopic || undefined,
+      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
+      encryption: publicRoom ? false : encryption,
+      knock: roomKnock,
+      allowFederation: federation,
+      additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
+    }).then((roomId) => {
+      if (alive()) {
+        onCreate?.(roomId);
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      <Box direction="Column" gap="100">
+        <Text size="L400">Access</Text>
+        <CreateRoomKindSelector
+          value={kind}
+          onSelect={setKind}
+          canRestrict={allowRestricted}
+          disabled={disabled}
+          getIcon={getCreateRoomKindToIcon}
+        />
+      </Box>
+      <Box shrink="No" direction="Column" gap="100">
+        <Text size="L400">Name</Text>
+        <Input
+          required
+          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
+          name="nameInput"
+          autoFocus
+          size="500"
+          variant="SurfaceVariant"
+          radii="400"
+          autoComplete="off"
+          disabled={disabled}
+        />
+      </Box>
+      <Box shrink="No" direction="Column" gap="100">
+        <Text size="L400">Topic (Optional)</Text>
+        <TextArea
+          name="topicTextAria"
+          size="500"
+          variant="SurfaceVariant"
+          radii="400"
+          disabled={disabled}
+        />
+      </Box>
+
+      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
+
+      <Box shrink="No" direction="Column" gap="100">
+        <Box gap="200" alignItems="End">
+          <Text size="L400">Options</Text>
+          <Box grow="Yes" justifyContent="End">
+            <Chip
+              radii="Pill"
+              before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
+              onClick={() => setAdvance(!advance)}
+              type="button"
+            >
+              <Text size="T200">Advance Options</Text>
+            </Chip>
+          </Box>
+        </Box>
+        {allowAdditionalCreators && (
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="500"
+          >
+            <AdditionalCreatorInput
+              additionalCreators={additionalCreators}
+              onSelect={addAdditionalCreator}
+              onRemove={removeAdditionalCreator}
+            />
+          </SequenceCard>
+        )}
+        {kind !== CreateRoomKind.Public && (
+          <>
+            <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>
+            {advance && (allowKnock || allowKnockRestricted) && (
+              <SequenceCard
+                style={{ padding: config.space.S300 }}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="500"
+              >
+                <SettingTile
+                  title="Knock to Join"
+                  description="Anyone can send request to join this room."
+                  after={
+                    <Switch
+                      variant="Primary"
+                      value={knock}
+                      onChange={setKnock}
+                      disabled={disabled}
+                    />
+                  }
+                />
+              </SequenceCard>
+            )}
+          </>
+        )}
+
+        <SequenceCard
+          style={{ padding: config.space.S300 }}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="500"
+        >
+          <SettingTile
+            title="Allow Federation"
+            description="Users from other servers can join."
+            after={
+              <Switch
+                variant="Primary"
+                value={federation}
+                onChange={setFederation}
+                disabled={disabled}
+              />
+            }
+          />
+        </SequenceCard>
+        {advance && (
+          <RoomVersionSelector
+            versions={roomVersions?.available ? Object.keys(roomVersions.available) : ['1']}
+            value={selectedRoomVersion}
+            onChange={handleRoomVersionChange}
+            disabled={disabled}
+          />
+        )}
+      </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-room/CreateRoomModal.tsx b/src/app/features/create-room/CreateRoomModal.tsx
new file mode 100644
index 00000000..c9919ba9
--- /dev/null
+++ b/src/app/features/create-room/CreateRoomModal.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Box,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+import { CreateRoomForm } from './CreateRoom';
+import {
+  useCloseCreateRoomModal,
+  useCreateRoomModalState,
+} from '../../state/hooks/createRoomModal';
+import { CreateRoomModalState } from '../../state/createRoomModal';
+import { stopPropagation } from '../../utils/keyboard';
+
+type CreateRoomModalProps = {
+  state: CreateRoomModalState;
+};
+function CreateRoomModal({ state }: CreateRoomModalProps) {
+  const { spaceId } = state;
+  const closeDialog = useCloseCreateRoomModal();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  return (
+    <SpaceProvider value={space ?? null}>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              clickOutsideDeactivates: true,
+              onDeactivate: closeDialog,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal size="300" flexHeight>
+              <Box direction="Column">
+                <Header
+                  size="500"
+                  style={{
+                    padding: config.space.S200,
+                    paddingLeft: config.space.S400,
+                  }}
+                >
+                  <Box grow="Yes">
+                    <Text size="H4">New Room</Text>
+                  </Box>
+                  <Box shrink="No">
+                    <IconButton size="300" radii="300" onClick={closeDialog}>
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  </Box>
+                </Header>
+                <Scroll size="300" hideTrack>
+                  <Box
+                    style={{
+                      padding: config.space.S400,
+                      paddingRight: config.space.S200,
+                    }}
+                    direction="Column"
+                    gap="500"
+                  >
+                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                  </Box>
+                </Scroll>
+              </Box>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SpaceProvider>
+  );
+}
+
+export function CreateRoomModalRenderer() {
+  const state = useCreateRoomModalState();
+
+  if (!state) return null;
+  return <CreateRoomModal state={state} />;
+}
diff --git a/src/app/features/create-room/index.ts b/src/app/features/create-room/index.ts
new file mode 100644
index 00000000..f60c94b3
--- /dev/null
+++ b/src/app/features/create-room/index.ts
@@ -0,0 +1,2 @@
+export * from './CreateRoom';
+export * from './CreateRoomModal';
diff --git a/src/app/features/create-space/CreateSpace.tsx b/src/app/features/create-space/CreateSpace.tsx
new file mode 100644
index 00000000..b1f9f649
--- /dev/null
+++ b/src/app/features/create-space/CreateSpace.tsx
@@ -0,0 +1,279 @@
+import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
+import { MatrixError, Room } from 'matrix-js-sdk';
+import {
+  Box,
+  Button,
+  Chip,
+  color,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Spinner,
+  Switch,
+  Text,
+  TextArea,
+} from 'folds';
+import { SettingTile } from '../../components/setting-tile';
+import { SequenceCard } from '../../components/sequence-card';
+import {
+  creatorsSupported,
+  knockRestrictedSupported,
+  knockSupported,
+  restrictedSupported,
+} from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useCapabilities } from '../../hooks/useCapabilities';
+import { useAlive } from '../../hooks/useAlive';
+import { ErrorCode } from '../../cs-errorcode';
+import {
+  AdditionalCreatorInput,
+  createRoom,
+  CreateRoomAliasInput,
+  CreateRoomData,
+  CreateRoomKind,
+  CreateRoomKindSelector,
+  RoomVersionSelector,
+  useAdditionalCreators,
+} from '../../components/create-room';
+import { RoomType } from '../../../types/matrix/room';
+
+const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
+  if (kind === CreateRoomKind.Private) return Icons.SpaceLock;
+  if (kind === CreateRoomKind.Restricted) return Icons.Space;
+  return Icons.SpaceGlobe;
+};
+
+type CreateSpaceFormProps = {
+  defaultKind?: CreateRoomKind;
+  space?: Room;
+  onCreate?: (roomId: string) => void;
+};
+export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFormProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const capabilities = useCapabilities();
+  const roomVersions = capabilities['m.room_versions'];
+  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
+  useEffect(() => {
+    // capabilities load async
+    selectRoomVersion(roomVersions?.default ?? '1');
+  }, [roomVersions?.default]);
+
+  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
+
+  const [kind, setKind] = useState(
+    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
+  );
+
+  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
+  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
+    useAdditionalCreators();
+  const [federation, setFederation] = useState(true);
+  const [knock, setKnock] = useState(false);
+  const [advance, setAdvance] = useState(false);
+
+  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnockRestricted =
+    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+
+  const handleRoomVersionChange = (version: string) => {
+    if (!restrictedSupported(version)) {
+      setKind(CreateRoomKind.Private);
+    }
+    selectRoomVersion(version);
+  };
+
+  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
+    useCallback((data) => createRoom(mx, data), [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();
+    if (disabled) return;
+    const form = evt.currentTarget;
+
+    const nameInput = form.nameInput as HTMLInputElement | undefined;
+    const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined;
+    const aliasInput = form.aliasInput as HTMLInputElement | undefined;
+    const roomName = nameInput?.value.trim();
+    const roomTopic = topicTextArea?.value.trim();
+    const aliasLocalPart =
+      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
+
+    if (!roomName) return;
+    const publicRoom = kind === CreateRoomKind.Public;
+    let roomKnock = false;
+    if (allowKnock && kind === CreateRoomKind.Private) {
+      roomKnock = knock;
+    }
+    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+      roomKnock = knock;
+    }
+
+    create({
+      version: selectedRoomVersion,
+      type: RoomType.Space,
+      parent: space,
+      kind,
+      name: roomName,
+      topic: roomTopic || undefined,
+      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
+      knock: roomKnock,
+      allowFederation: federation,
+      additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
+    }).then((roomId) => {
+      if (alive()) {
+        onCreate?.(roomId);
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      <Box direction="Column" gap="100">
+        <Text size="L400">Access</Text>
+        <CreateRoomKindSelector
+          value={kind}
+          onSelect={setKind}
+          canRestrict={allowRestricted}
+          disabled={disabled}
+          getIcon={getCreateSpaceKindToIcon}
+        />
+      </Box>
+      <Box shrink="No" direction="Column" gap="100">
+        <Text size="L400">Name</Text>
+        <Input
+          required
+          before={<Icon size="100" src={getCreateSpaceKindToIcon(kind)} />}
+          name="nameInput"
+          autoFocus
+          size="500"
+          variant="SurfaceVariant"
+          radii="400"
+          autoComplete="off"
+          disabled={disabled}
+        />
+      </Box>
+      <Box shrink="No" direction="Column" gap="100">
+        <Text size="L400">Topic (Optional)</Text>
+        <TextArea
+          name="topicTextAria"
+          size="500"
+          variant="SurfaceVariant"
+          radii="400"
+          disabled={disabled}
+        />
+      </Box>
+
+      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
+
+      <Box shrink="No" direction="Column" gap="100">
+        <Box gap="200" alignItems="End">
+          <Text size="L400">Options</Text>
+          <Box grow="Yes" justifyContent="End">
+            <Chip
+              radii="Pill"
+              before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
+              onClick={() => setAdvance(!advance)}
+              type="button"
+            >
+              <Text size="T200">Advance Options</Text>
+            </Chip>
+          </Box>
+        </Box>
+        {allowAdditionalCreators && (
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="500"
+          >
+            <AdditionalCreatorInput
+              additionalCreators={additionalCreators}
+              onSelect={addAdditionalCreator}
+              onRemove={removeAdditionalCreator}
+            />
+          </SequenceCard>
+        )}
+        {kind !== CreateRoomKind.Public && advance && (allowKnock || allowKnockRestricted) && (
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="500"
+          >
+            <SettingTile
+              title="Knock to Join"
+              description="Anyone can send request to join this space."
+              after={
+                <Switch variant="Primary" value={knock} onChange={setKnock} disabled={disabled} />
+              }
+            />
+          </SequenceCard>
+        )}
+
+        <SequenceCard
+          style={{ padding: config.space.S300 }}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="500"
+        >
+          <SettingTile
+            title="Allow Federation"
+            description="Users from other servers can join."
+            after={
+              <Switch
+                variant="Primary"
+                value={federation}
+                onChange={setFederation}
+                disabled={disabled}
+              />
+            }
+          />
+        </SequenceCard>
+        {advance && (
+          <RoomVersionSelector
+            versions={roomVersions?.available ? Object.keys(roomVersions.available) : ['1']}
+            value={selectedRoomVersion}
+            onChange={handleRoomVersionChange}
+            disabled={disabled}
+          />
+        )}
+      </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-space/CreateSpaceModal.tsx b/src/app/features/create-space/CreateSpaceModal.tsx
new file mode 100644
index 00000000..c1bc6898
--- /dev/null
+++ b/src/app/features/create-space/CreateSpaceModal.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+  Box,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+import { CreateSpaceForm } from './CreateSpace';
+import {
+  useCloseCreateSpaceModal,
+  useCreateSpaceModalState,
+} from '../../state/hooks/createSpaceModal';
+import { CreateSpaceModalState } from '../../state/createSpaceModal';
+import { stopPropagation } from '../../utils/keyboard';
+
+type CreateSpaceModalProps = {
+  state: CreateSpaceModalState;
+};
+function CreateSpaceModal({ state }: CreateSpaceModalProps) {
+  const { spaceId } = state;
+  const closeDialog = useCloseCreateSpaceModal();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  return (
+    <SpaceProvider value={space ?? null}>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              clickOutsideDeactivates: true,
+              onDeactivate: closeDialog,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal size="300" flexHeight>
+              <Box direction="Column">
+                <Header
+                  size="500"
+                  style={{
+                    padding: config.space.S200,
+                    paddingLeft: config.space.S400,
+                    borderBottomWidth: config.borderWidth.B300,
+                  }}
+                >
+                  <Box grow="Yes">
+                    <Text size="H4">New Space</Text>
+                  </Box>
+                  <Box shrink="No">
+                    <IconButton size="300" radii="300" onClick={closeDialog}>
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  </Box>
+                </Header>
+                <Scroll size="300" hideTrack>
+                  <Box
+                    style={{
+                      padding: config.space.S400,
+                      paddingRight: config.space.S200,
+                    }}
+                    direction="Column"
+                    gap="500"
+                  >
+                    <CreateSpaceForm space={space} onCreate={closeDialog} />
+                  </Box>
+                </Scroll>
+              </Box>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SpaceProvider>
+  );
+}
+
+export function CreateSpaceModalRenderer() {
+  const state = useCreateSpaceModalState();
+
+  if (!state) return null;
+  return <CreateSpaceModal state={state} />;
+}
diff --git a/src/app/features/create-space/index.ts b/src/app/features/create-space/index.ts
new file mode 100644
index 00000000..d203993b
--- /dev/null
+++ b/src/app/features/create-space/index.ts
@@ -0,0 +1,2 @@
+export * from './CreateSpace';
+export * from './CreateSpaceModal';
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index f126e7cb..c6aff741 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -18,7 +18,6 @@ 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';
@@ -27,6 +26,10 @@ import { stopPropagation } from '../../utils/keyboard';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 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;
@@ -45,7 +48,7 @@ function SuggestMenuItem({
   const [toggleState, handleToggleSuggested] = useAsyncCallback(
     useCallback(() => {
       const newContent: MSpaceChildContent = { ...content, suggested: !content.suggested };
-      return mx.sendStateEvent(parentId, StateEvent.SpaceChild, newContent, roomId);
+      return mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, newContent, roomId);
     }, [mx, parentId, roomId, content])
   );
 
@@ -82,7 +85,7 @@ function RemoveMenuItem({
 
   const [removeState, handleRemove] = useAsyncCallback(
     useCallback(
-      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild, {}, roomId),
+      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, {}, roomId),
       [mx, parentId, roomId]
     )
   );
@@ -123,24 +126,39 @@ function InviteMenuItem({
   requestClose: () => void;
   disabled?: boolean;
 }) {
+  const mx = useMatrixClient();
+  const room = mx.getRoom(item.roomId);
+  const [invitePrompt, setInvitePrompt] = useState(false);
+
   const handleInvite = () => {
-    openInviteUser(item.roomId);
-    requestClose();
+    setInvitePrompt(true);
   };
 
   return (
-    <MenuItem
-      onClick={handleInvite}
-      size="300"
-      radii="300"
-      variant="Primary"
-      fill="None"
-      disabled={disabled}
-    >
-      <Text as="span" size="T300" truncate>
-        Invite
-      </Text>
-    </MenuItem>
+    <>
+      <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();
+          }}
+        />
+      )}
+    </>
   );
 }
 
@@ -180,7 +198,7 @@ type HierarchyItemMenuProps = {
     parentId: string;
   };
   joined: boolean;
-  canInvite: boolean;
+  powerLevels?: IPowerLevels;
   canEditChild: boolean;
   pinned?: boolean;
   onTogglePin?: (roomId: string) => void;
@@ -188,13 +206,22 @@ type HierarchyItemMenuProps = {
 export function HierarchyItemMenu({
   item,
   joined,
-  canInvite,
+  powerLevels,
   canEditChild,
   pinned,
   onTogglePin,
 }: HierarchyItemMenuProps) {
+  const mx = useMatrixClient();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
+  const canInvite = (): boolean => {
+    if (!powerLevels) return false;
+    const creators = getRoomCreatorsForRoomId(mx, item.roomId);
+    const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+    return permissions.action('invite', mx.getSafeUserId());
+  };
+
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
@@ -254,7 +281,7 @@ export function HierarchyItemMenu({
                     <InviteMenuItem
                       item={item}
                       requestClose={handleRequestClose}
-                      disabled={!canInvite}
+                      disabled={!canInvite()}
                     />
                     <SettingsMenuItem item={item} requestClose={handleRequestClose} />
                     <UseStateProvider initial={false}>
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index 757db239..4b19e516 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Line, Scroll, config } from 'folds';
+import { Box, Chip, Icon, IconButton, Icons, Line, Scroll, Spinner, Text, config } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
 import { useNavigate } from 'react-router-dom';
@@ -27,7 +27,6 @@ import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import {
   IPowerLevels,
   PowerLevelsContextProvider,
-  powerLevelAPI,
   usePowerLevels,
   useRoomsPowerLevels,
 } from '../../hooks/usePowerLevels';
@@ -36,7 +35,7 @@ import { makeLobbyCategoryId } from '../../state/closedLobbyCategories';
 import { useCategoryHandler } from '../../hooks/useCategoryHandler';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
-import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, rateLimitedActions } from '../../utils/matrix';
 import { getSpaceRoomPath } from '../../pages/pathUtils';
 import { StateEvent } from '../../../types/matrix/room';
 import { CanDropCallback, useDnDMonitor } from './DnD';
@@ -53,6 +52,101 @@ import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { SpaceHierarchy } from './SpaceHierarchy';
+import { useGetRoom } from '../../hooks/useGetRoom';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
+import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
+
+const useCanDropLobbyItem = (
+  space: Room,
+  roomsPowerLevels: Map<string, IPowerLevels>,
+  getRoom: (roomId: string) => Room | undefined
+): CanDropCallback => {
+  const mx = useMatrixClient();
+
+  const canDropSpace: CanDropCallback = useCallback(
+    (item, container) => {
+      if (!('space' in container.item)) {
+        // can not drop around rooms.
+        // space can only be drop around other spaces
+        return false;
+      }
+
+      const containerSpaceId = space.roomId;
+
+      const powerLevels = roomsPowerLevels.get(containerSpaceId) ?? {};
+      const creators = getRoomCreatorsForRoomId(mx, containerSpaceId);
+      const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+      if (
+        getRoom(containerSpaceId) === undefined ||
+        !permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+      ) {
+        return false;
+      }
+
+      return true;
+    },
+    [space, roomsPowerLevels, getRoom, mx]
+  );
+
+  const canDropRoom: CanDropCallback = useCallback(
+    (item, container) => {
+      const containerSpaceId =
+        'space' in container.item ? container.item.roomId : container.item.parentId;
+
+      const draggingOutsideSpace = item.parentId !== containerSpaceId;
+      const restrictedItem = mx.getRoom(item.roomId)?.getJoinRule() === JoinRule.Restricted;
+
+      // check and do not allow restricted room to be dragged outside
+      // current space if can't change `m.room.join_rules` `content.allow`
+      if (draggingOutsideSpace && restrictedItem) {
+        const itemPowerLevels = roomsPowerLevels.get(item.roomId) ?? {};
+        const itemCreators = getRoomCreatorsForRoomId(mx, item.roomId);
+        const itemPermissions = getRoomPermissionsAPI(itemCreators, itemPowerLevels);
+
+        const canChangeJoinRuleAllow = itemPermissions.stateEvent(
+          StateEvent.RoomJoinRules,
+          mx.getSafeUserId()
+        );
+        if (!canChangeJoinRuleAllow) {
+          return false;
+        }
+      }
+
+      const powerLevels = roomsPowerLevels.get(containerSpaceId) ?? {};
+      const creators = getRoomCreatorsForRoomId(mx, containerSpaceId);
+      const permissions = getRoomPermissionsAPI(creators, powerLevels);
+      if (
+        getRoom(containerSpaceId) === undefined ||
+        !permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+      ) {
+        return false;
+      }
+      return true;
+    },
+    [mx, getRoom, roomsPowerLevels]
+  );
+
+  const canDrop: CanDropCallback = useCallback(
+    (item, container): boolean => {
+      if (item.roomId === container.item.roomId || item.roomId === container.nextRoomId) {
+        // can not drop before or after itself
+        return false;
+      }
+
+      // if we are dragging a space
+      if ('space' in item) {
+        return canDropSpace(item, container);
+      }
+
+      return canDropRoom(item, container);
+    },
+    [canDropSpace, canDropRoom]
+  );
+
+  return canDrop;
+};
 
 export function Lobby() {
   const navigate = useNavigate();
@@ -92,25 +186,7 @@ export function Lobby() {
     useCallback((w, height) => setHeroSectionHeight(height), [])
   );
 
-  const getRoom = useCallback(
-    (rId: string) => {
-      if (allJoinedRooms.has(rId)) {
-        return mx.getRoom(rId) ?? undefined;
-      }
-      return undefined;
-    },
-    [mx, allJoinedRooms]
-  );
-
-  const canEditSpaceChild = useCallback(
-    (powerLevels: IPowerLevels) =>
-      powerLevelAPI.canSendStateEvent(
-        powerLevels,
-        StateEvent.SpaceChild,
-        powerLevelAPI.getPowerLevel(powerLevels, mx.getUserId() ?? undefined)
-      ),
-    [mx]
-  );
+  const getRoom = useGetRoom(allJoinedRooms);
 
   const [draggingItem, setDraggingItem] = useState<HierarchyItem>();
   const hierarchy = useSpaceHierarchy(
@@ -139,191 +215,163 @@ export function Lobby() {
       () =>
         hierarchy
           .flatMap((i) => {
-            const childRooms = Array.isArray(i.rooms)
-              ? i.rooms.map((r) => mx.getRoom(r.roomId))
-              : [];
+            const childRooms = Array.isArray(i.rooms) ? i.rooms.map((r) => getRoom(r.roomId)) : [];
 
-            return [mx.getRoom(i.space.roomId), ...childRooms];
+            return [getRoom(i.space.roomId), ...childRooms];
           })
           .filter((r) => !!r) as Room[],
-      [mx, hierarchy]
+      [hierarchy, getRoom]
     )
   );
 
-  const canDrop: CanDropCallback = useCallback(
-    (item, container): boolean => {
-      const restrictedItem = mx.getRoom(item.roomId)?.getJoinRule() === JoinRule.Restricted;
-      if (item.roomId === container.item.roomId || item.roomId === container.nextRoomId) {
-        // can not drop before or after itself
-        return false;
-      }
+  const canDrop: CanDropCallback = useCanDropLobbyItem(space, roomsPowerLevels, getRoom);
 
-      if ('space' in item) {
-        if (!('space' in container.item)) return false;
-        const containerSpaceId = space.roomId;
+  const [reorderSpaceState, reorderSpace] = useAsyncCallback(
+    useCallback(
+      async (item: HierarchyItemSpace, containerItem: HierarchyItem) => {
+        if (!item.parentId) return;
 
-        if (
-          getRoom(containerSpaceId) === undefined ||
-          !canEditSpaceChild(roomsPowerLevels.get(containerSpaceId) ?? {})
-        ) {
-          return false;
-        }
+        const itemSpaces: HierarchyItemSpace[] = hierarchy
+          .map((i) => i.space)
+          .filter((i) => i.roomId !== item.roomId);
 
-        return true;
-      }
+        const beforeIndex = itemSpaces.findIndex((i) => i.roomId === containerItem.roomId);
+        const insertIndex = beforeIndex + 1;
 
-      const containerSpaceId =
-        'space' in container.item ? container.item.roomId : container.item.parentId;
+        itemSpaces.splice(insertIndex, 0, {
+          ...item,
+          content: { ...item.content, order: undefined },
+        });
 
-      const dropOutsideSpace = item.parentId !== containerSpaceId;
+        const currentOrders = itemSpaces.map((i) => {
+          if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
+            return i.content.order;
+          }
+          return undefined;
+        });
 
-      if (dropOutsideSpace && restrictedItem) {
-        // do not allow restricted room to drop outside
-        // current space if can't change join rule allow
-        const itemPowerLevel = roomsPowerLevels.get(item.roomId) ?? {};
-        const userPLInItem = powerLevelAPI.getPowerLevel(
-          itemPowerLevel,
-          mx.getUserId() ?? undefined
-        );
-        const canChangeJoinRuleAllow = powerLevelAPI.canSendStateEvent(
-          itemPowerLevel,
-          StateEvent.RoomJoinRules,
-          userPLInItem
-        );
-        if (!canChangeJoinRuleAllow) {
-          return false;
-        }
-      }
+        const newOrders = orderKeys(lex, currentOrders);
 
-      if (
-        getRoom(containerSpaceId) === undefined ||
-        !canEditSpaceChild(roomsPowerLevels.get(containerSpaceId) ?? {})
-      ) {
-        return false;
-      }
-      return true;
-    },
-    [getRoom, space.roomId, roomsPowerLevels, canEditSpaceChild, mx]
-  );
+        const reorders = newOrders
+          ?.map((orderKey, index) => ({
+            item: itemSpaces[index],
+            orderKey,
+          }))
+          .filter((reorder, index) => {
+            if (!reorder.item.parentId) return false;
+            const parentPL = roomsPowerLevels.get(reorder.item.parentId);
+            if (!parentPL) return false;
 
-  const reorderSpace = useCallback(
-    (item: HierarchyItemSpace, containerItem: HierarchyItem) => {
-      if (!item.parentId) return;
+            const creators = getRoomCreatorsForRoomId(mx, reorder.item.parentId);
+            const permissions = getRoomPermissionsAPI(creators, parentPL);
+            const canEdit = permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId());
+            return canEdit && reorder.orderKey !== currentOrders[index];
+          });
 
-      const itemSpaces: HierarchyItemSpace[] = hierarchy
-        .map((i) => i.space)
-        .filter((i) => i.roomId !== item.roomId);
-
-      const beforeIndex = itemSpaces.findIndex((i) => i.roomId === containerItem.roomId);
-      const insertIndex = beforeIndex + 1;
-
-      itemSpaces.splice(insertIndex, 0, {
-        ...item,
-        content: { ...item.content, order: undefined },
-      });
-
-      const currentOrders = itemSpaces.map((i) => {
-        if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
-          return i.content.order;
-        }
-        return undefined;
-      });
-
-      const newOrders = orderKeys(lex, currentOrders);
-
-      newOrders?.forEach((orderKey, index) => {
-        const itm = itemSpaces[index];
-        if (!itm || !itm.parentId) return;
-        const parentPL = roomsPowerLevels.get(itm.parentId);
-        const canEdit = parentPL && canEditSpaceChild(parentPL);
-        if (canEdit && orderKey !== currentOrders[index]) {
-          mx.sendStateEvent(
-            itm.parentId,
-            StateEvent.SpaceChild as any,
-            { ...itm.content, order: orderKey },
-            itm.roomId
-          );
-        }
-      });
-    },
-    [mx, hierarchy, lex, roomsPowerLevels, canEditSpaceChild]
-  );
-
-  const reorderRoom = useCallback(
-    (item: HierarchyItem, containerItem: HierarchyItem): void => {
-      const itemRoom = mx.getRoom(item.roomId);
-      if (!item.parentId) {
-        return;
-      }
-      const containerParentId: string =
-        'space' in containerItem ? containerItem.roomId : containerItem.parentId;
-      const itemContent = item.content;
-
-      if (item.parentId !== containerParentId) {
-        mx.sendStateEvent(item.parentId, StateEvent.SpaceChild as any, {}, item.roomId);
-      }
-
-      if (
-        itemRoom &&
-        itemRoom.getJoinRule() === JoinRule.Restricted &&
-        item.parentId !== containerParentId
-      ) {
-        // change join rule allow parameter when dragging
-        // restricted room from one space to another
-        const joinRuleContent = getStateEvent(
-          itemRoom,
-          StateEvent.RoomJoinRules
-        )?.getContent<RoomJoinRulesEventContent>();
-
-        if (joinRuleContent) {
-          const allow =
-            joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ?? [];
-          allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId });
-          mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules as any, {
-            ...joinRuleContent,
-            allow,
+        if (reorders) {
+          await rateLimitedActions(reorders, async (reorder) => {
+            if (!reorder.item.parentId) return;
+            await mx.sendStateEvent(
+              reorder.item.parentId,
+              StateEvent.SpaceChild as any,
+              { ...reorder.item.content, order: reorder.orderKey },
+              reorder.item.roomId
+            );
           });
         }
-      }
-
-      const itemSpaces = Array.from(
-        hierarchy?.find((i) => i.space.roomId === containerParentId)?.rooms ?? []
-      );
-
-      const beforeItem: HierarchyItem | undefined =
-        'space' in containerItem ? undefined : containerItem;
-      const beforeIndex = itemSpaces.findIndex((i) => i.roomId === beforeItem?.roomId);
-      const insertIndex = beforeIndex + 1;
-
-      itemSpaces.splice(insertIndex, 0, {
-        ...item,
-        parentId: containerParentId,
-        content: { ...itemContent, order: undefined },
-      });
-
-      const currentOrders = itemSpaces.map((i) => {
-        if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
-          return i.content.order;
-        }
-        return undefined;
-      });
-
-      const newOrders = orderKeys(lex, currentOrders);
-
-      newOrders?.forEach((orderKey, index) => {
-        const itm = itemSpaces[index];
-        if (itm && orderKey !== currentOrders[index]) {
-          mx.sendStateEvent(
-            containerParentId,
-            StateEvent.SpaceChild as any,
-            { ...itm.content, order: orderKey },
-            itm.roomId
-          );
-        }
-      });
-    },
-    [mx, hierarchy, lex]
+      },
+      [mx, hierarchy, lex, roomsPowerLevels]
+    )
   );
+  const reorderingSpace = reorderSpaceState.status === AsyncStatus.Loading;
+
+  const [reorderRoomState, reorderRoom] = useAsyncCallback(
+    useCallback(
+      async (item: HierarchyItem, containerItem: HierarchyItem) => {
+        const itemRoom = mx.getRoom(item.roomId);
+        if (!item.parentId) {
+          return;
+        }
+        const containerParentId: string =
+          'space' in containerItem ? containerItem.roomId : containerItem.parentId;
+        const itemContent = item.content;
+
+        // remove from current space
+        if (item.parentId !== containerParentId) {
+          mx.sendStateEvent(item.parentId, StateEvent.SpaceChild as any, {}, item.roomId);
+        }
+
+        if (
+          itemRoom &&
+          itemRoom.getJoinRule() === JoinRule.Restricted &&
+          item.parentId !== containerParentId
+        ) {
+          // change join rule allow parameter when dragging
+          // restricted room from one space to another
+          const joinRuleContent = getStateEvent(
+            itemRoom,
+            StateEvent.RoomJoinRules
+          )?.getContent<RoomJoinRulesEventContent>();
+
+          if (joinRuleContent) {
+            const allow =
+              joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ??
+              [];
+            allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId });
+            mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules as any, {
+              ...joinRuleContent,
+              allow,
+            });
+          }
+        }
+
+        const itemSpaces = Array.from(
+          hierarchy?.find((i) => i.space.roomId === containerParentId)?.rooms ?? []
+        );
+
+        const beforeItem: HierarchyItem | undefined =
+          'space' in containerItem ? undefined : containerItem;
+        const beforeIndex = itemSpaces.findIndex((i) => i.roomId === beforeItem?.roomId);
+        const insertIndex = beforeIndex + 1;
+
+        itemSpaces.splice(insertIndex, 0, {
+          ...item,
+          parentId: containerParentId,
+          content: { ...itemContent, order: undefined },
+        });
+
+        const currentOrders = itemSpaces.map((i) => {
+          if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
+            return i.content.order;
+          }
+          return undefined;
+        });
+
+        const newOrders = orderKeys(lex, currentOrders);
+
+        const reorders = newOrders
+          ?.map((orderKey, index) => ({
+            item: itemSpaces[index],
+            orderKey,
+          }))
+          .filter((reorder, index) => reorder.item && reorder.orderKey !== currentOrders[index]);
+
+        if (reorders) {
+          await rateLimitedActions(reorders, async (reorder) => {
+            await mx.sendStateEvent(
+              containerParentId,
+              StateEvent.SpaceChild as any,
+              { ...reorder.item.content, order: reorder.orderKey },
+              reorder.item.roomId
+            );
+          });
+        }
+      },
+      [mx, hierarchy, lex]
+    )
+  );
+  const reorderingRoom = reorderRoomState.status === AsyncStatus.Loading;
+  const reordering = reorderingRoom || reorderingSpace;
 
   useDnDMonitor(
     scrollRef,
@@ -374,7 +422,7 @@ export function Lobby() {
         newItems.push(rId);
       }
       const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-      mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
+      mx.setAccountData(AccountDataEvent.CinnySpaces as any, newSpacesContent as any);
     },
     [mx, sidebarItems, sidebarSpaces]
   );
@@ -439,7 +487,6 @@ export function Lobby() {
                             allJoinedRooms={allJoinedRooms}
                             mDirects={mDirects}
                             roomsPowerLevels={roomsPowerLevels}
-                            canEditSpaceChild={canEditSpaceChild}
                             categoryId={categoryId}
                             closed={
                               closedCategories.has(categoryId) ||
@@ -449,6 +496,7 @@ export function Lobby() {
                             draggingItem={draggingItem}
                             onDragging={setDraggingItem}
                             canDrop={canDrop}
+                            disabledReorder={reordering}
                             nextSpaceId={nextSpaceId}
                             getRoom={getRoom}
                             pinned={sidebarSpaces.has(item.space.roomId)}
@@ -460,6 +508,28 @@ export function Lobby() {
                       );
                     })}
                   </div>
+                  {reordering && (
+                    <Box
+                      style={{
+                        position: 'absolute',
+                        bottom: config.space.S400,
+                        left: 0,
+                        right: 0,
+                        zIndex: 2,
+                        pointerEvents: 'none',
+                      }}
+                      justifyContent="Center"
+                    >
+                      <Chip
+                        variant="Secondary"
+                        outlined
+                        radii="Pill"
+                        before={<Spinner variant="Secondary" fill="Soft" size="100" />}
+                      >
+                        <Text size="L400">Reordering</Text>
+                      </Chip>
+                    </Box>
+                  )}
                 </PageContentCenter>
               </PageContent>
             </Scroll>
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index bc4c46fe..a0c4d3ab 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -26,8 +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, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
+import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
 import { stopPropagation } from '../../utils/keyboard';
@@ -36,31 +35,46 @@ import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { mxcUrlToHttp } from '../../utils/matrix';
 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 = {
-  roomId: string;
   powerLevels: IPowerLevels;
   requestClose: () => void;
 };
 const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
-  ({ roomId, powerLevels, requestClose }, ref) => {
+  ({ powerLevels, requestClose }, ref) => {
     const mx = useMatrixClient();
-    const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-    const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const space = useSpace();
+    const creators = useRoomCreators(space);
+
+    const permissions = useRoomPermissions(creators, powerLevels);
+    const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openSpaceSettings = useOpenSpaceSettings();
 
+    const [invitePrompt, setInvitePrompt] = useState(false);
+
     const handleInvite = () => {
-      openInviteUser(roomId);
-      requestClose();
+      setInvitePrompt(true);
     };
 
     const handleRoomSettings = () => {
-      openSpaceSettings(roomId);
+      openSpaceSettings(space.roomId);
       requestClose();
     };
 
     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}
@@ -69,6 +83,7 @@ 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>
@@ -106,7 +121,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
                 </MenuItem>
                 {promptLeave && (
                   <LeaveSpacePrompt
-                    roomId={roomId}
+                    roomId={space.roomId}
                     onDone={requestClose}
                     onCancel={() => setPromptLeave(false)}
                   />
@@ -242,7 +257,6 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 }}
               >
                 <LobbyMenu
-                  roomId={space.roomId}
                   powerLevels={powerLevels}
                   requestClose={() => setMenuAnchor(undefined)}
                 />
diff --git a/src/app/features/lobby/SpaceHierarchy.tsx b/src/app/features/lobby/SpaceHierarchy.tsx
index 2c43282f..280b8a5a 100644
--- a/src/app/features/lobby/SpaceHierarchy.tsx
+++ b/src/app/features/lobby/SpaceHierarchy.tsx
@@ -8,14 +8,16 @@ import {
   HierarchyItemSpace,
   useFetchSpaceHierarchyLevel,
 } from '../../hooks/useSpaceHierarchy';
-import { IPowerLevels, powerLevelAPI } from '../../hooks/usePowerLevels';
+import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SpaceItemCard } from './SpaceItem';
 import { AfterItemDropTarget, CanDropCallback } from './DnD';
 import { HierarchyItemMenu } from './HierarchyItemMenu';
 import { RoomItemCard } from './RoomItem';
-import { RoomType } from '../../../types/matrix/room';
+import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { SequenceCard } from '../../components/sequence-card';
+import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
+import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 
 type SpaceHierarchyProps = {
   summary: IHierarchyRoom | undefined;
@@ -24,13 +26,13 @@ type SpaceHierarchyProps = {
   allJoinedRooms: Set<string>;
   mDirects: Set<string>;
   roomsPowerLevels: Map<string, IPowerLevels>;
-  canEditSpaceChild: (powerLevels: IPowerLevels) => boolean;
   categoryId: string;
   closed: boolean;
   handleClose: MouseEventHandler<HTMLButtonElement>;
   draggingItem?: HierarchyItem;
   onDragging: (item?: HierarchyItem) => void;
   canDrop: CanDropCallback;
+  disabledReorder?: boolean;
   nextSpaceId?: string;
   getRoom: (roomId: string) => Room | undefined;
   pinned: boolean;
@@ -47,13 +49,13 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       allJoinedRooms,
       mDirects,
       roomsPowerLevels,
-      canEditSpaceChild,
       categoryId,
       closed,
       handleClose,
       draggingItem,
       onDragging,
       canDrop,
+      disabledReorder,
       nextSpaceId,
       getRoom,
       pinned,
@@ -77,25 +79,28 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       return s;
     }, [rooms]);
 
-    const spacePowerLevels = roomsPowerLevels.get(spaceItem.roomId) ?? {};
-    const userPLInSpace = powerLevelAPI.getPowerLevel(
-      spacePowerLevels,
-      mx.getUserId() ?? undefined
-    );
-    const canInviteInSpace = powerLevelAPI.canDoAction(spacePowerLevels, 'invite', userPLInSpace);
+    const spacePowerLevels = roomsPowerLevels.get(spaceItem.roomId);
+    const spaceCreators = getRoomCreatorsForRoomId(mx, spaceItem.roomId);
+    const spacePermissions =
+      spacePowerLevels && getRoomPermissionsAPI(spaceCreators, spacePowerLevels);
 
     const draggingSpace =
       draggingItem?.roomId === spaceItem.roomId && draggingItem.parentId === spaceItem.parentId;
 
     const { parentId } = spaceItem;
-    const parentPowerLevels = parentId ? roomsPowerLevels.get(parentId) ?? {} : undefined;
+    const parentPowerLevels = parentId ? roomsPowerLevels.get(parentId) : undefined;
+    const parentCreators = parentId ? getRoomCreatorsForRoomId(mx, parentId) : undefined;
+    const parentPermissions =
+      parentCreators &&
+      parentPowerLevels &&
+      getRoomPermissionsAPI(parentCreators, parentPowerLevels);
 
     useEffect(() => {
       onSpacesFound(Array.from(subspaces.values()));
     }, [subspaces, onSpacesFound]);
 
     let childItems = roomItems?.filter((i) => !subspaces.has(i.roomId));
-    if (!canEditSpaceChild(spacePowerLevels)) {
+    if (!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())) {
       // hide unknown rooms for normal user
       childItems = childItems?.filter((i) => {
         const forbidden = error instanceof MatrixError ? error.errcode === 'M_FORBIDDEN' : false;
@@ -115,16 +120,22 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
           closed={closed}
           handleClose={handleClose}
           getRoom={getRoom}
-          canEditChild={canEditSpaceChild(spacePowerLevels)}
-          canReorder={parentPowerLevels ? canEditSpaceChild(parentPowerLevels) : false}
+          canEditChild={!!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())}
+          canReorder={
+            parentPowerLevels && !disabledReorder && parentPermissions
+              ? parentPermissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+              : false
+          }
           options={
             parentId &&
             parentPowerLevels && (
               <HierarchyItemMenu
                 item={{ ...spaceItem, parentId }}
-                canInvite={canInviteInSpace}
+                powerLevels={spacePowerLevels}
                 joined={allJoinedRooms.has(spaceItem.roomId)}
-                canEditChild={canEditSpaceChild(parentPowerLevels)}
+                canEditChild={
+                  !!parentPermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+                }
                 pinned={pinned}
                 onTogglePin={togglePinToSidebar}
               />
@@ -147,15 +158,6 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
               const roomSummary = rooms.get(roomItem.roomId);
 
               const roomPowerLevels = roomsPowerLevels.get(roomItem.roomId) ?? {};
-              const userPLInRoom = powerLevelAPI.getPowerLevel(
-                roomPowerLevels,
-                mx.getUserId() ?? undefined
-              );
-              const canInviteInRoom = powerLevelAPI.canDoAction(
-                roomPowerLevels,
-                'invite',
-                userPLInRoom
-              );
 
               const lastItem = index === childItems.length;
               const nextRoomId = lastItem ? nextSpaceId : childItems[index + 1]?.roomId;
@@ -174,13 +176,18 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
                   dm={mDirects.has(roomItem.roomId)}
                   onOpen={onOpenRoom}
                   getRoom={getRoom}
-                  canReorder={canEditSpaceChild(spacePowerLevels)}
+                  canReorder={
+                    !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId()) &&
+                    !disabledReorder
+                  }
                   options={
                     <HierarchyItemMenu
                       item={roomItem}
-                      canInvite={canInviteInRoom}
+                      powerLevels={roomPowerLevels}
                       joined={allJoinedRooms.has(roomItem.roomId)}
-                      canEditChild={canEditSpaceChild(spacePowerLevels)}
+                      canEditChild={
+                        !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+                      }
                     />
                   }
                   after={
diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx
index 0a4d9de5..64a97900 100644
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -30,10 +30,12 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import * as css from './SpaceItem.css';
 import * as styleCss from './style.css';
 import { useDraggableItem } from './DnD';
-import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/navigation';
 import { stopPropagation } from '../../utils/keyboard';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
+import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
+import { AddExistingModal } from '../add-existing';
 
 function SpaceProfileLoading() {
   return (
@@ -240,18 +242,20 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
 
 function AddRoomButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
+  const openCreateRoomModal = useOpenCreateRoomModal();
+  const [addExisting, setAddExisting] = useState(false);
 
   const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleCreateRoom = () => {
-    openCreateRoom(false, item.roomId as any);
+    openCreateRoomModal(item.roomId);
     setCords(undefined);
   };
 
   const handleAddExisting = () => {
-    openSpaceAddExisting(item.roomId);
+    setAddExisting(true);
     setCords(undefined);
   };
 
@@ -297,24 +301,29 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
       >
         <Text size="B300">Add Room</Text>
       </Chip>
+      {addExisting && (
+        <AddExistingModal parentId={item.roomId} requestClose={() => setAddExisting(false)} />
+      )}
     </PopOut>
   );
 }
 
 function AddSpaceButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
+  const openCreateSpaceModal = useOpenCreateSpaceModal();
+  const [addExisting, setAddExisting] = useState(false);
 
   const handleAddSpace: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleCreateSpace = () => {
-    openCreateRoom(true, item.roomId as any);
+    openCreateSpaceModal(item.roomId as any);
     setCords(undefined);
   };
 
   const handleAddExisting = () => {
-    openSpaceAddExisting(item.roomId, true);
+    setAddExisting(true);
     setCords(undefined);
   };
   return (
@@ -359,6 +368,9 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
       >
         <Text size="B300">Add Space</Text>
       </Chip>
+      {addExisting && (
+        <AddExistingModal space parentId={item.roomId} requestClose={() => setAddExisting(false)} />
+      )}
     </PopOut>
   );
 }
@@ -470,7 +482,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
               </>
             )}
           </Box>
-          {canEditChild && (
+          {space && canEditChild && (
             <Box shrink="No" alignItems="Inherit" gap="200">
               <AddRoomButton item={item} />
               {item.parentId === undefined && <AddSpaceButton item={item} />}
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 8eae4aea..26085b5f 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -5,7 +5,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 import { SearchOrderBy } from 'matrix-js-sdk';
-import { PageHero, PageHeroSection } from '../../components/page';
+import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { _SearchPathSearchParams } from '../../pages/paths';
 import { useSetting } from '../../state/hooks/settings';
@@ -57,6 +57,9 @@ export function MessageSearch({
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -222,18 +225,7 @@ export function MessageSearch({
       </Box>
 
       {!msgSearchParams.term && status === 'pending' && (
-        <Box
-          className={ContainerColor({ variant: 'SurfaceVariant' })}
-          style={{
-            padding: config.space.S400,
-            borderRadius: config.radii.R400,
-            minHeight: toRem(450),
-          }}
-          direction="Column"
-          alignItems="Center"
-          justifyContent="Center"
-          gap="200"
-        >
+        <PageHeroEmpty>
           <PageHeroSection>
             <PageHero
               icon={<Icon size="600" src={Icons.Message} />}
@@ -241,7 +233,7 @@ export function MessageSearch({
               subTitle="Find helpful messages in your community by searching with related keywords."
             />
           </PageHeroSection>
-        </Box>
+        </PageHeroEmpty>
       )}
 
       {msgSearchParams.term && groups.length === 0 && status === 'success' && (
@@ -300,6 +292,8 @@ export function MessageSearch({
                     urlPreview={urlPreview}
                     onOpen={navigateRoom}
                     legacyUsernameColor={legacyUsernameColor || mDirects.has(groupRoom.roomId)}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
                   />
                 </VirtualTile>
               );
diff --git a/src/app/features/message-search/SearchInput.tsx b/src/app/features/message-search/SearchInput.tsx
index db646c26..533eb5fd 100644
--- a/src/app/features/message-search/SearchInput.tsx
+++ b/src/app/features/message-search/SearchInput.tsx
@@ -29,6 +29,7 @@ export function SearchInput({ active, loading, searchInputRef, onSearch, onReset
         ref={searchInputRef}
         style={{ paddingRight: config.space.S300 }}
         name="searchInput"
+        autoFocus
         size="500"
         variant="Background"
         placeholder="Search for keyword"
diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index c2e6c0a1..62ef9c4b 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -39,15 +39,18 @@ import { UserAvatar } from '../../components/user-avatar';
 import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
-import {
-  getTagIconSrc,
-  useAccessibleTagColors,
-  usePowerLevelTags,
-} from '../../hooks/usePowerLevelTags';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
 import { PowerIcon } from '../../components/power';
 import colorMXID from '../../../util/colorMXID';
+import {
+  getPowerTagIconSrc,
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../hooks/useMemberPowerTag';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -57,6 +60,8 @@ type SearchResultGroupProps = {
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
   legacyUsernameColor?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 export function SearchResultGroup({
   room,
@@ -66,16 +71,22 @@ export function SearchResultGroup({
   urlPreview,
   onOpen,
   legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
 }: SearchResultGroupProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
 
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
-  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const creators = useRoomCreators(room);
+
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
   const theme = useTheme();
-  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
 
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
@@ -222,13 +233,12 @@ export function SearchResultGroup({
           const threadRootId =
             relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
-          const senderPowerLevel = getPowerLevel(event.sender);
-          const powerLevelTag = getPowerLevelTag(senderPowerLevel);
-          const tagColor = powerLevelTag?.color
-            ? accessibleTagColors?.get(powerLevelTag.color)
+          const memberPowerTag = getMemberPowerTag(event.sender);
+          const tagColor = memberPowerTag?.color
+            ? accessibleTagColors?.get(memberPowerTag.color)
             : undefined;
-          const tagIconSrc = powerLevelTag?.icon
-            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+          const tagIconSrc = memberPowerTag?.icon
+            ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
             : undefined;
 
           const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
@@ -275,7 +285,11 @@ export function SearchResultGroup({
                       </Username>
                       {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
                     </Box>
-                    <Time ts={event.origin_server_ts} />
+                    <Time
+                      ts={event.origin_server_ts}
+                      hour24Clock={hour24Clock}
+                      dateFormatString={dateFormatString}
+                    />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
                     <Chip
@@ -294,8 +308,7 @@ export function SearchResultGroup({
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
-                    getPowerLevel={getPowerLevel}
-                    getPowerLevelTag={getPowerLevelTag}
+                    getMemberPowerTag={getMemberPowerTag}
                     accessibleTagColors={accessibleTagColors}
                     legacyUsernameColor={legacyUsernameColor}
                   />
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index bdb81418..7eac21da 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -27,10 +27,9 @@ import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 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';
@@ -49,6 +48,9 @@ import {
   RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 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;
@@ -61,19 +63,22 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
     const powerLevels = usePowerLevels(room);
-    const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-    const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const creators = useRoomCreators(room);
+
+    const permissions = useRoomPermissions(creators, powerLevels);
+    const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openRoomSettings = useOpenRoomSettings();
     const space = useSpaceOptionally();
 
+    const [invitePrompt, setInvitePrompt] = useState(false);
+
     const handleMarkAsRead = () => {
       markAsRead(mx, room.roomId, hideActivity);
       requestClose();
     };
 
     const handleInvite = () => {
-      openInviteUser(room.roomId);
-      requestClose();
+      setInvitePrompt(true);
     };
 
     const handleCopyLink = () => {
@@ -90,6 +95,15 @@ 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}
@@ -133,6 +147,7 @@ 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-settings/general/General.tsx b/src/app/features/room-settings/general/General.tsx
index 0c3152c0..d9c16c90 100644
--- a/src/app/features/room-settings/general/General.tsx
+++ b/src/app/features/room-settings/general/General.tsx
@@ -13,6 +13,8 @@ import {
   RoomPublish,
   RoomUpgrade,
 } from '../../common-settings/general';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type GeneralProps = {
   requestClose: () => void;
@@ -20,6 +22,8 @@ type GeneralProps = {
 export function General({ requestClose }: GeneralProps) {
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+  const permissions = useRoomPermissions(creators, powerLevels);
 
   return (
     <Page>
@@ -41,22 +45,22 @@ export function General({ requestClose }: GeneralProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
-              <RoomProfile powerLevels={powerLevels} />
+              <RoomProfile permissions={permissions} />
               <Box direction="Column" gap="100">
                 <Text size="L400">Options</Text>
-                <RoomJoinRules powerLevels={powerLevels} />
-                <RoomHistoryVisibility powerLevels={powerLevels} />
-                <RoomEncryption powerLevels={powerLevels} />
-                <RoomPublish powerLevels={powerLevels} />
+                <RoomJoinRules permissions={permissions} />
+                <RoomHistoryVisibility permissions={permissions} />
+                <RoomEncryption permissions={permissions} />
+                <RoomPublish permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Addresses</Text>
-                <RoomPublishedAddresses powerLevels={powerLevels} />
-                <RoomLocalAddresses powerLevels={powerLevels} />
+                <RoomPublishedAddresses permissions={permissions} />
+                <RoomLocalAddresses permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Advance Options</Text>
-                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
+                <RoomUpgrade permissions={permissions} requestClose={requestClose} />
               </Box>
             </Box>
           </PageContent>
diff --git a/src/app/features/room-settings/permissions/Permissions.tsx b/src/app/features/room-settings/permissions/Permissions.tsx
index ae3769bf..7572a71b 100644
--- a/src/app/features/room-settings/permissions/Permissions.tsx
+++ b/src/app/features/room-settings/permissions/Permissions.tsx
@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
 import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type PermissionsProps = {
   requestClose: () => void;
@@ -15,11 +17,12 @@ export function Permissions({ requestClose }: PermissionsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canEditPowers = canSendStateEvent(
-    StateEvent.PowerLevelTags,
-    getPowerLevel(mx.getSafeUserId())
-  );
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+
+  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
+  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
   const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
@@ -57,7 +60,11 @@ export function Permissions({ requestClose }: PermissionsProps) {
                 onEdit={canEditPowers ? handleEditPowers : undefined}
                 permissionGroups={permissionGroups}
               />
-              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
+              <PermissionGroups
+                canEdit={canEditPermissions}
+                powerLevels={powerLevels}
+                permissionGroups={permissionGroups}
+              />
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/features/room/CommandAutocomplete.tsx b/src/app/features/room/CommandAutocomplete.tsx
index 31903ac6..6b7ba56e 100644
--- a/src/app/features/room/CommandAutocomplete.tsx
+++ b/src/app/features/room/CommandAutocomplete.tsx
@@ -1,6 +1,6 @@
 import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
-import { Box, MenuItem, Text } from 'folds';
+import { Box, config, MenuItem, Text } from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { Command, useCommands } from '../../hooks/useCommands';
 import {
@@ -75,9 +75,6 @@ export function CommandAutocomplete({
       headerContent={
         <Box grow="Yes" direction="Row" gap="200" justifyContent="SpaceBetween">
           <Text size="L400">Commands</Text>
-          <Text size="T200" priority="300" truncate>
-            Begin your message with command
-          </Text>
         </Box>
       }
       requestClose={requestClose}
@@ -87,17 +84,22 @@ export function CommandAutocomplete({
           key={commandName}
           as="button"
           radii="300"
+          style={{ height: 'unset' }}
           onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
             onTabPress(evt, () => handleAutocomplete(commandName))
           }
           onClick={() => handleAutocomplete(commandName)}
         >
-          <Box grow="Yes" direction="Row" gap="200" justifyContent="SpaceBetween">
-            <Box shrink="No">
-              <Text style={{ flexGrow: 1 }} size="B400" truncate>
-                {`/${commandName}`}
-              </Text>
-            </Box>
+          <Box
+            style={{ padding: `${config.space.S300} 0` }}
+            grow="Yes"
+            direction="Column"
+            gap="100"
+            justifyContent="SpaceBetween"
+          >
+            <Text style={{ flexGrow: 1 }} size="B400" truncate>
+              {`/${commandName}`}
+            </Text>
             <Text truncate priority="300" size="T200">
               {commands[commandName].description}
             </Text>
diff --git a/src/app/features/room/MembersDrawer.css.ts b/src/app/features/room/MembersDrawer.css.ts
index a1f4153e..860ceda0 100644
--- a/src/app/features/room/MembersDrawer.css.ts
+++ b/src/app/features/room/MembersDrawer.css.ts
@@ -1,10 +1,8 @@
 import { keyframes, style } from '@vanilla-extract/css';
-import { color, config, toRem } from 'folds';
+import { config, toRem } from 'folds';
 
 export const MembersDrawer = style({
   width: toRem(266),
-  backgroundColor: color.Background.Container,
-  color: color.Background.OnContainer,
 });
 
 export const MembersDrawerHeader = style({
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 5edb4f2b..46d2238a 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -26,11 +26,10 @@ import {
   TooltipProvider,
   config,
 } from 'folds';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
 
-import { openProfileViewer } from '../../../client/action/navigation';
 import * as css from './MembersDrawer.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -40,7 +39,6 @@ import {
   useAsyncSearch,
 } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
-import { usePowerLevelTags, useFlattenPowerLevelTagMembers } from '../../hooks/usePowerLevelTags';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
@@ -52,10 +50,116 @@ import { UserAvatar } from '../../components/user-avatar';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
-import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
+import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+
+type MemberDrawerHeaderProps = {
+  room: Room;
+};
+function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
+  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+
+  return (
+    <Header className={css.MembersDrawerHeader} variant="Background" size="600">
+      <Box grow="Yes" alignItems="Center" gap="200">
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Text title={`${room.getJoinedMemberCount()} Members`} size="H5" truncate>
+            {`${millify(room.getJoinedMemberCount())} Members`}
+          </Text>
+        </Box>
+        <Box shrink="No" alignItems="Center">
+          <TooltipProvider
+            position="Bottom"
+            align="End"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Close</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                variant="Background"
+                onClick={() => setPeopleDrawer(false)}
+              >
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+        </Box>
+      </Box>
+    </Header>
+  );
+}
+
+type MemberItemProps = {
+  mx: MatrixClient;
+  useAuthentication: boolean;
+  room: Room;
+  member: RoomMember;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  pressed?: boolean;
+  typing?: boolean;
+};
+function MemberItem({
+  mx,
+  useAuthentication,
+  room,
+  member,
+  onClick,
+  pressed,
+  typing,
+}: MemberItemProps) {
+  const name =
+    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+  const avatarMxcUrl = member.getMxcAvatarUrl();
+  const avatarUrl = avatarMxcUrl
+    ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
+    : undefined;
+
+  return (
+    <MenuItem
+      style={{ padding: `0 ${config.space.S200}` }}
+      aria-pressed={pressed}
+      data-user-id={member.userId}
+      variant="Background"
+      radii="400"
+      onClick={onClick}
+      before={
+        <Avatar size="200">
+          <UserAvatar
+            userId={member.userId}
+            src={avatarUrl ?? undefined}
+            alt={name}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
+      }
+      after={
+        typing && (
+          <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+            <TypingIndicator size="300" />
+          </Badge>
+        )
+      }
+    >
+      <Box grow="Yes">
+        <Text size="T400" truncate>
+          {name}
+        </Text>
+      </Box>
+    </MenuItem>
+  );
+}
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -79,28 +183,28 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const powerLevels = usePowerLevelsContext();
-  const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const creators = useRoomCreators(room);
+  const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
   const fetchingMembers = members.length < room.getJoinedMemberCount();
-  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+  const openUserRoomProfile = useOpenUserRoomProfile();
+  const space = useSpaceOptionally();
+  const openProfileUserId = useUserRoomProfileState()?.userId;
 
   const membershipFilterMenu = useMembershipFilterMenu();
   const sortFilterMenu = useMemberSortMenu();
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
-  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
 
   const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
   const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
+  const memberPowerSort = useMemberPowerSort(creators);
 
   const typingMembers = useRoomTypingMember(room.roomId);
 
   const filteredMembers = useMemo(
-    () =>
-      members
-        .filter(membershipFilter.filterFn)
-        .sort(memberSort.sortFn)
-        .sort((a, b) => b.powerLevel - a.powerLevel),
-    [members, membershipFilter, memberSort]
+    () => members.filter(membershipFilter.filterFn).sort(memberSort.sortFn).sort(memberPowerSort),
+    [members, membershipFilter, memberSort, memberPowerSort]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
@@ -112,11 +216,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
   const processMembers = result ? result.items : filteredMembers;
 
-  const PLTagOrRoomMember = useFlattenPowerLevelTagMembers(
-    processMembers,
-    getPowerLevel,
-    getPowerLevelTag
-  );
+  const PLTagOrRoomMember = useFlattenPowerTagMembers(processMembers, getPowerTag);
 
   const virtualizer = useVirtualizer({
     count: PLTagOrRoomMember.length,
@@ -136,48 +236,20 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     { wait: 200 }
   );
 
-  const getName = (member: RoomMember) =>
-    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
-
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
-    openProfileViewer(userId, room.roomId);
+    if (!userId) return;
+    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect(), 'Left');
   };
 
   return (
-    <Box className={css.MembersDrawer} shrink="No" direction="Column">
-      <Header className={css.MembersDrawerHeader} variant="Background" size="600">
-        <Box grow="Yes" alignItems="Center" gap="200">
-          <Box grow="Yes" alignItems="Center" gap="200">
-            <Text title={`${room.getJoinedMemberCount()} Members`} size="H5" truncate>
-              {`${millify(room.getJoinedMemberCount())} Members`}
-            </Text>
-          </Box>
-          <Box shrink="No" alignItems="Center">
-            <TooltipProvider
-              position="Bottom"
-              align="End"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Close</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton
-                  ref={triggerRef}
-                  variant="Background"
-                  onClick={() => setPeopleDrawer(false)}
-                >
-                  <Icon src={Icons.Cross} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          </Box>
-        </Box>
-      </Header>
+    <Box
+      className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
+      shrink="No"
+      direction="Column"
+    >
+      <MemberDrawerHeader room={room} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
           <Box className={css.MemberDrawerContent} direction="Column" gap="200">
@@ -329,59 +401,28 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                     );
                   }
 
-                  const member = tagOrMember;
-                  const name = getName(member);
-                  const avatarMxcUrl = member.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl
-                    ? mx.mxcUrlToHttp(
-                        avatarMxcUrl,
-                        100,
-                        100,
-                        'crop',
-                        undefined,
-                        false,
-                        useAuthentication
-                      )
-                    : undefined;
-
                   return (
-                    <MenuItem
+                    <div
                       style={{
-                        padding: `0 ${config.space.S200}`,
                         transform: `translateY(${vItem.start}px)`,
                       }}
-                      data-index={vItem.index}
-                      data-user-id={member.userId}
-                      ref={virtualizer.measureElement}
-                      key={`${room.roomId}-${member.userId}`}
                       className={css.DrawerVirtualItem}
-                      variant="Background"
-                      radii="400"
-                      onClick={handleMemberClick}
-                      before={
-                        <Avatar size="200">
-                          <UserAvatar
-                            userId={member.userId}
-                            src={avatarUrl ?? undefined}
-                            alt={name}
-                            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                          />
-                        </Avatar>
-                      }
-                      after={
-                        typingMembers.find((receipt) => receipt.userId === member.userId) && (
-                          <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
-                            <TypingIndicator size="300" />
-                          </Badge>
-                        )
-                      }
+                      data-index={vItem.index}
+                      key={`${room.roomId}-${tagOrMember.userId}`}
+                      ref={virtualizer.measureElement}
                     >
-                      <Box grow="Yes">
-                        <Text size="T400" truncate>
-                          {name}
-                        </Text>
-                      </Box>
-                    </MenuItem>
+                      <MemberItem
+                        mx={mx}
+                        useAuthentication={useAuthentication}
+                        room={room}
+                        member={tagOrMember}
+                        onClick={handleMemberClick}
+                        pressed={openProfileUserId === tagOrMember.userId}
+                        typing={typingMembers.some(
+                          (receipt) => receipt.userId === tagOrMember.userId
+                        )}
+                      />
+                    </div>
                   );
                 })}
               </div>
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 501ee0dc..76bafc9e 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -108,21 +108,23 @@ import { ReplyLayout, ThreadIndicator } from '../../components/message';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
-import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
-import { powerLevelAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import colorMXID from '../../../util/colorMXID';
 import { useIsDirectRoom } from '../../hooks/useRoom';
+import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useTheme } from '../../hooks/useTheme';
+import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
+import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
 interface RoomInputProps {
   editor: Editor;
   fileDropContainerRef: RefObject<HTMLElement>;
   roomId: string;
   room: Room;
-  getPowerLevelTag: GetPowerLevelTag;
-  accessibleTagColors: Map<string, string>;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
-  ({ editor, fileDropContainerRef, roomId, room, getPowerLevelTag, accessibleTagColors }, ref) => {
+  ({ editor, fileDropContainerRef, roomId, room }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
@@ -134,13 +136,24 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevelsContext();
+    const creators = useRoomCreators(room);
 
     const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
     const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
     const replyUserID = replyDraft?.userId;
 
-    const replyPowerTag = getPowerLevelTag(powerLevelAPI.getPowerLevel(powerLevels, replyUserID));
-    const replyPowerColor = replyPowerTag.color
+    const powerLevelTags = usePowerLevelTags(room, powerLevels);
+    const creatorsTag = useRoomCreatorsTag();
+    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+    const theme = useTheme();
+    const accessibleTagColors = useAccessiblePowerTagColors(
+      theme.kind,
+      creatorsTag,
+      powerLevelTags
+    );
+
+    const replyPowerTag = replyUserID ? getMemberPowerTag(replyUserID) : undefined;
+    const replyPowerColor = replyPowerTag?.color
       ? accessibleTagColors.get(replyPowerTag.color)
       : undefined;
     const replyUsernameColor =
@@ -277,7 +290,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       });
       handleCancelUpload(uploads);
       const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
-      contents.forEach((content) => mx.sendMessage(roomId, content));
+      contents.forEach((content) => mx.sendMessage(roomId, content as any));
     };
 
     const submit = useCallback(() => {
@@ -356,7 +369,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           content['m.relates_to'].is_falling_back = false;
         }
       }
-      mx.sendMessage(roomId, content);
+      mx.sendMessage(roomId, content as any);
       resetEditor(editor);
       resetEditorHistory(editor);
       setReplyDraft(undefined);
@@ -543,7 +556,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
-                  <Box direction="Column">
+                  <Box direction="Row" gap="200" alignItems="Center">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
                       userColor={replyUsernameColor}
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 05caf4b0..7a012e42 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -85,7 +85,6 @@ import {
 } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../state/settings';
-import { openProfileViewer } from '../../../client/action/navigation';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
 import { Reactions, Message, Event, EncryptedContent } from './message';
 import { useMemberEventParser } from '../../hooks/useMemberEventParser';
@@ -102,7 +101,7 @@ import * as css from './RoomTimeline.css';
 import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
 import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
 import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
@@ -118,8 +117,15 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
-import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
 import { useIsDirectRoom } from '../../hooks/useRoom';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { useTheme } from '../../hooks/useTheme';
+import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
+import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -222,8 +228,6 @@ type RoomTimelineProps = {
   eventId?: string;
   roomInputRef: RefObject<HTMLElement>;
   editor: Editor;
-  getPowerLevelTag: GetPowerLevelTag;
-  accessibleTagColors: Map<string, string>;
 };
 
 const PAGINATION_LIMIT = 80;
@@ -426,14 +430,7 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
   };
 };
 
-export function RoomTimeline({
-  room,
-  eventId,
-  roomInputRef,
-  editor,
-  getPowerLevelTag,
-  accessibleTagColors,
-}: RoomTimelineProps) {
+export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -448,19 +445,34 @@ export function RoomTimeline({
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
   const ignoredUsersList = useIgnoredUsers();
   const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
 
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const powerLevels = usePowerLevelsContext();
-  const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
-    usePowerLevelsAPI(powerLevels);
+  const creators = useRoomCreators(room);
 
-  const myPowerLevel = getPowerLevel(mx.getUserId() ?? '');
-  const canRedact = canDoAction('redact', myPowerLevel);
-  const canSendReaction = canSendEvent(MessageEvent.Reaction, myPowerLevel);
-  const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, myPowerLevel);
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
+  const theme = useTheme();
+  const accessiblePowerTagColors = useAccessiblePowerTagColors(
+    theme.kind,
+    creatorsTag,
+    powerLevelTags
+  );
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+
+  const canRedact = permissions.action('redact', mx.getSafeUserId());
+  const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
+  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
   const [editId, setEditId] = useState<string>();
 
   const roomToParents = useAtomValue(roomToParentsAtom);
@@ -468,6 +480,8 @@ export function RoomTimeline({
   const { navigateRoom } = useRoomNavigate();
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
+  const openUserRoomProfile = useOpenUserRoomProfile();
+  const space = useSpaceOptionally();
 
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
@@ -905,9 +919,14 @@ export function RoomTimeline({
         console.warn('Button should have "data-user-id" attribute!');
         return;
       }
-      openProfileViewer(userId, room.roomId);
+      openUserRoomProfile(
+        room.roomId,
+        space?.roomId,
+        userId,
+        evt.currentTarget.getBoundingClientRect()
+      );
     },
-    [room]
+    [room, space, openUserRoomProfile]
   );
   const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (evt) => {
@@ -932,7 +951,7 @@ export function RoomTimeline({
   );
 
   const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    (evt) => {
+    (evt, startThread = false) => {
       const replyId = evt.currentTarget.getAttribute('data-event-id');
       if (!replyId) {
         console.warn('Button should have "data-event-id" attribute!');
@@ -943,7 +962,9 @@ export function RoomTimeline({
       const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
       const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
       const { body, formatted_body: formattedBody } = content;
-      const { 'm.relates_to': relation } = replyEvt.getWireContent();
+      const { 'm.relates_to': relation } = startThread
+        ? { 'm.relates_to': { rel_type: 'm.thread', event_id: replyId } }
+        : replyEvt.getWireContent();
       const senderId = replyEvt.getSender();
       if (senderId && typeof body === 'string') {
         setReplyDraft({
@@ -976,7 +997,7 @@ export function RoomTimeline({
         (reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
       mx.sendEvent(
         room.roomId,
-        MessageEvent.Reaction,
+        MessageEvent.Reaction as any,
         getReactionContent(targetEventId, key, rShortcode)
       );
     },
@@ -1011,7 +1032,6 @@ export function RoomTimeline({
           editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;
 
         const senderId = mEvent.getSender() ?? '';
-        const senderPowerLevel = getPowerLevel(mEvent.getSender());
         const senderDisplayName =
           getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
 
@@ -1045,9 +1065,8 @@ export function RoomTimeline({
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
-                  getPowerLevel={getPowerLevel}
-                  getPowerLevelTag={getPowerLevelTag}
-                  accessibleTagColors={accessibleTagColors}
+                  getMemberPowerTag={getMemberPowerTag}
+                  accessibleTagColors={accessiblePowerTagColors}
                   legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
@@ -1065,9 +1084,12 @@ export function RoomTimeline({
               )
             }
             hideReadReceipts={hideActivity}
-            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
-            accessibleTagColors={accessibleTagColors}
+            showDeveloperTools={showDeveloperTools}
+            memberPowerTag={getMemberPowerTag(senderId)}
+            accessibleTagColors={accessiblePowerTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@@ -1094,7 +1116,6 @@ export function RoomTimeline({
         const hasReactions = reactions && reactions.length > 0;
         const { replyEventId, threadRootId } = mEvent;
         const highlighted = focusItem?.index === item && focusItem.highlight;
-        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1126,9 +1147,8 @@ export function RoomTimeline({
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
-                  getPowerLevel={getPowerLevel}
-                  getPowerLevelTag={getPowerLevelTag}
-                  accessibleTagColors={accessibleTagColors}
+                  getMemberPowerTag={getMemberPowerTag}
+                  accessibleTagColors={accessiblePowerTagColors}
                   legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
@@ -1146,9 +1166,12 @@ export function RoomTimeline({
               )
             }
             hideReadReceipts={hideActivity}
-            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
-            accessibleTagColors={accessibleTagColors}
+            showDeveloperTools={showDeveloperTools}
+            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
+            accessibleTagColors={accessiblePowerTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
           >
             <EncryptedContent mEvent={mEvent}>
               {() => {
@@ -1212,7 +1235,6 @@ export function RoomTimeline({
         const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
-        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1247,9 +1269,12 @@ export function RoomTimeline({
               )
             }
             hideReadReceipts={hideActivity}
-            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
-            accessibleTagColors={accessibleTagColors}
+            showDeveloperTools={showDeveloperTools}
+            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
+            accessibleTagColors={accessiblePowerTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@@ -1278,7 +1303,12 @@ export function RoomTimeline({
         const parsed = parseMemberEvent(mEvent);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1292,6 +1322,7 @@ export function RoomTimeline({
             messageSpacing={messageSpacing}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
           >
             <EventContent
               messageLayout={messageLayout}
@@ -1314,7 +1345,12 @@ export function RoomTimeline({
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1328,6 +1364,7 @@ export function RoomTimeline({
             messageSpacing={messageSpacing}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
           >
             <EventContent
               messageLayout={messageLayout}
@@ -1351,7 +1388,12 @@ export function RoomTimeline({
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1365,6 +1407,7 @@ export function RoomTimeline({
             messageSpacing={messageSpacing}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
           >
             <EventContent
               messageLayout={messageLayout}
@@ -1388,7 +1431,12 @@ export function RoomTimeline({
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1402,6 +1450,7 @@ export function RoomTimeline({
             messageSpacing={messageSpacing}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
           >
             <EventContent
               messageLayout={messageLayout}
@@ -1427,7 +1476,12 @@ export function RoomTimeline({
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
       const timeJSX = (
-        <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+        <Time
+          ts={mEvent.getTs()}
+          compact={messageLayout === MessageLayout.Compact}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+        />
       );
 
       return (
@@ -1441,6 +1495,7 @@ export function RoomTimeline({
           messageSpacing={messageSpacing}
           canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
           hideReadReceipts={hideActivity}
+          showDeveloperTools={showDeveloperTools}
         >
           <EventContent
             messageLayout={messageLayout}
@@ -1471,7 +1526,12 @@ export function RoomTimeline({
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
       const timeJSX = (
-        <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+        <Time
+          ts={mEvent.getTs()}
+          compact={messageLayout === MessageLayout.Compact}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+        />
       );
 
       return (
@@ -1485,6 +1545,7 @@ export function RoomTimeline({
           messageSpacing={messageSpacing}
           canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
           hideReadReceipts={hideActivity}
+          showDeveloperTools={showDeveloperTools}
         >
           <EventContent
             messageLayout={messageLayout}
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index b6eebdf2..c4a09100 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -5,7 +5,7 @@ import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { StateEvent } from '../../../types/matrix/room';
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useEditor } from '../../components/editor';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
@@ -21,8 +21,8 @@ import { editableActiveElement } from '../../utils/dom';
 import navigation from '../../../client/state/navigation';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
-import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
-import { useTheme } from '../../hooks/useTheme';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -70,15 +70,10 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
   const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
   const powerLevels = usePowerLevelsContext();
-  const { getPowerLevel, canSendEvent } = usePowerLevelsAPI(powerLevels);
-  const myUserId = mx.getUserId();
-  const canMessage = myUserId
-    ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
-    : false;
+  const creators = useRoomCreators(room);
 
-  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
-  const theme = useTheme();
-  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());
 
   useKeyDown(
     window,
@@ -109,8 +104,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
           eventId={eventId}
           roomInputRef={roomInputRef}
           editor={editor}
-          getPowerLevelTag={getPowerLevelTag}
-          accessibleTagColors={accessibleTagColors}
         />
         <RoomViewTyping room={room} />
       </Box>
@@ -131,8 +124,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                   roomId={roomId}
                   fileDropContainerRef={roomViewRef}
                   ref={roomInputRef}
-                  getPowerLevelTag={getPowerLevelTag}
-                  accessibleTagColors={accessibleTagColors}
                 />
               )}
               {!canMessage && (
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 352ae4b5..d2f65fcb 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -34,7 +34,7 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoom } from '../../hooks/useRoom';
-import { useSetSetting, useSetting } from '../../state/hooks/settings';
+import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
@@ -42,10 +42,9 @@ import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../util
 import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
 import { useRoomUnread } from '../../state/hooks/unread';
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 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';
@@ -65,6 +64,11 @@ import {
   getRoomNotificationModeIcon,
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
+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;
@@ -75,10 +79,15 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const powerLevels = usePowerLevelsContext();
-  const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canInvite = permissions.action('invite', mx.getSafeUserId());
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
+  const { navigateRoom } = useRoomNavigate();
+
+  const [invitePrompt, setInvitePrompt] = useState(false);
 
   const handleMarkAsRead = () => {
     markAsRead(mx, room.roomId, hideActivity);
@@ -86,8 +95,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   };
 
   const handleInvite = () => {
-    openInviteUser(room.roomId);
-    requestClose();
+    setInvitePrompt(true);
   };
 
   const handleCopyLink = () => {
@@ -106,6 +114,15 @@ 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}
@@ -149,6 +166,7 @@ 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>
@@ -175,6 +193,33 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
             Room Settings
           </Text>
         </MenuItem>
+        <UseStateProvider initial={false}>
+          {(promptJump, setPromptJump) => (
+            <>
+              <MenuItem
+                onClick={() => setPromptJump(true)}
+                size="300"
+                after={<Icon size="100" src={Icons.RecentClock} />}
+                radii="300"
+                aria-pressed={promptJump}
+              >
+                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                  Jump to Time
+                </Text>
+              </MenuItem>
+              {promptJump && (
+                <JumpToTime
+                  onSubmit={(eventId) => {
+                    setPromptJump(false);
+                    navigateRoom(room.roomId, eventId);
+                    requestClose();
+                  }}
+                  onCancel={() => setPromptJump(false)}
+                />
+              )}
+            </>
+          )}
+        </UseStateProvider>
       </Box>
       <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -230,7 +275,7 @@ export function RoomViewHeader() {
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
 
-  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+  const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
 
   const handleSearchClick = () => {
     const searchParams: _SearchPathSearchParams = {
@@ -404,7 +449,7 @@ export function RoomViewHeader() {
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>Members</Text>
+                  <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
                 </Tooltip>
               }
             >
diff --git a/src/app/features/room/jump-to-time/JumpToTime.tsx b/src/app/features/room/jump-to-time/JumpToTime.tsx
new file mode 100644
index 00000000..223c6cf6
--- /dev/null
+++ b/src/app/features/room/jump-to-time/JumpToTime.tsx
@@ -0,0 +1,260 @@
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  color,
+  Button,
+  Spinner,
+  Chip,
+  PopOut,
+  RectCords,
+} from 'folds';
+import { Direction, MatrixError } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { stopPropagation } from '../../../utils/keyboard';
+import { useAlive } from '../../../hooks/useAlive';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../../utils/time';
+import { DatePicker, TimePicker } from '../../../components/time-date';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+
+type JumpToTimeProps = {
+  onCancel: () => void;
+  onSubmit: (eventId: string) => void;
+};
+export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const alive = useAlive();
+  const createStateEvent = useStateEvent(room, StateEvent.RoomCreate);
+
+  const todayTs = getToday();
+  const yesterdayTs = getYesterday();
+  const createTs = useMemo(() => createStateEvent?.getTs() ?? 0, [createStateEvent]);
+  const [ts, setTs] = useState(() => Date.now());
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+  const [timePickerCords, setTimePickerCords] = useState<RectCords>();
+  const [datePickerCords, setDatePickerCords] = useState<RectCords>();
+
+  const handleTimePicker: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setTimePickerCords(evt.currentTarget.getBoundingClientRect());
+  };
+  const handleDatePicker: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setDatePickerCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleToday = () => {
+    setTs(todayTs < createTs ? createTs : todayTs);
+  };
+  const handleYesterday = () => {
+    setTs(yesterdayTs < createTs ? createTs : yesterdayTs);
+  };
+  const handleBeginning = () => setTs(createTs);
+
+  const [timestampState, timestampToEvent] = useAsyncCallback<string, MatrixError, [number]>(
+    useCallback(
+      async (newTs) => {
+        const result = await mx.timestampToEvent(room.roomId, newTs, Direction.Forward);
+        return result.event_id;
+      },
+      [mx, room]
+    )
+  );
+
+  const handleSubmit = () => {
+    timestampToEvent(ts).then((eventId) => {
+      if (alive()) {
+        onSubmit(eventId);
+      }
+    });
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Jump to Time</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="500">
+              <Box direction="Row" gap="300">
+                <Box direction="Column" gap="100">
+                  <Text size="L400" priority="400">
+                    Time
+                  </Text>
+                  <Box gap="100" alignItems="Center">
+                    <Chip
+                      size="500"
+                      variant="Surface"
+                      fill="None"
+                      outlined
+                      radii="300"
+                      aria-pressed={!!timePickerCords}
+                      after={<Icon size="50" src={Icons.ChevronBottom} />}
+                      onClick={handleTimePicker}
+                    >
+                      <Text size="B300">{timeHourMinute(ts, hour24Clock)}</Text>
+                    </Chip>
+                    <PopOut
+                      anchor={timePickerCords}
+                      offset={5}
+                      position="Bottom"
+                      align="Center"
+                      content={
+                        <FocusTrap
+                          focusTrapOptions={{
+                            initialFocus: false,
+                            onDeactivate: () => setTimePickerCords(undefined),
+                            clickOutsideDeactivates: true,
+                            isKeyForward: (evt: KeyboardEvent) =>
+                              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                            isKeyBackward: (evt: KeyboardEvent) =>
+                              evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                            escapeDeactivates: stopPropagation,
+                          }}
+                        >
+                          <TimePicker min={createTs} max={Date.now()} value={ts} onChange={setTs} />
+                        </FocusTrap>
+                      }
+                    />
+                  </Box>
+                </Box>
+                <Box direction="Column" gap="100">
+                  <Text size="L400" priority="400">
+                    Date
+                  </Text>
+                  <Box gap="100" alignItems="Center">
+                    <Chip
+                      size="500"
+                      variant="Surface"
+                      fill="None"
+                      outlined
+                      radii="300"
+                      aria-pressed={!!datePickerCords}
+                      after={<Icon size="50" src={Icons.ChevronBottom} />}
+                      onClick={handleDatePicker}
+                    >
+                      <Text size="B300">{timeDayMonthYear(ts)}</Text>
+                    </Chip>
+                    <PopOut
+                      anchor={datePickerCords}
+                      offset={5}
+                      position="Bottom"
+                      align="Center"
+                      content={
+                        <FocusTrap
+                          focusTrapOptions={{
+                            initialFocus: false,
+                            onDeactivate: () => setDatePickerCords(undefined),
+                            clickOutsideDeactivates: true,
+                            isKeyForward: (evt: KeyboardEvent) =>
+                              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                            isKeyBackward: (evt: KeyboardEvent) =>
+                              evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                            escapeDeactivates: stopPropagation,
+                          }}
+                        >
+                          <DatePicker min={createTs} max={Date.now()} value={ts} onChange={setTs} />
+                        </FocusTrap>
+                      }
+                    />
+                  </Box>
+                </Box>
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Preset</Text>
+                <Box gap="200">
+                  {createTs < todayTs && (
+                    <Chip
+                      variant={ts === todayTs ? 'Success' : 'SurfaceVariant'}
+                      radii="Pill"
+                      aria-pressed={ts === todayTs}
+                      onClick={handleToday}
+                    >
+                      <Text size="B300">Today</Text>
+                    </Chip>
+                  )}
+                  {createTs < yesterdayTs && (
+                    <Chip
+                      variant={ts === yesterdayTs ? 'Success' : 'SurfaceVariant'}
+                      radii="Pill"
+                      aria-pressed={ts === yesterdayTs}
+                      onClick={handleYesterday}
+                    >
+                      <Text size="B300">Yesterday</Text>
+                    </Chip>
+                  )}
+                  <Chip
+                    variant={ts === createTs ? 'Success' : 'SurfaceVariant'}
+                    radii="Pill"
+                    aria-pressed={ts === createTs}
+                    onClick={handleBeginning}
+                  >
+                    <Text size="B300">Beginning</Text>
+                  </Chip>
+                </Box>
+              </Box>
+              {timestampState.status === AsyncStatus.Error && (
+                <Text style={{ color: color.Critical.Main }} size="T300">
+                  {timestampState.error.message}
+                </Text>
+              )}
+              <Button
+                type="submit"
+                variant="Primary"
+                before={
+                  timestampState.status === AsyncStatus.Loading ? (
+                    <Spinner fill="Solid" variant="Primary" size="200" />
+                  ) : undefined
+                }
+                aria-disabled={
+                  timestampState.status === AsyncStatus.Loading ||
+                  timestampState.status === AsyncStatus.Success
+                }
+                onClick={handleSubmit}
+              >
+                <Text size="B400">Open Timeline</Text>
+              </Button>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
diff --git a/src/app/features/room/jump-to-time/index.ts b/src/app/features/room/jump-to-time/index.ts
new file mode 100644
index 00000000..9bdc2c74
--- /dev/null
+++ b/src/app/features/room/jump-to-time/index.ts
@@ -0,0 +1 @@
+export * from './JumpToTime';
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index ae971ab8..fbe35770 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -75,10 +75,10 @@ import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
-import { StateEvent } from '../../../../types/matrix/room';
-import { getTagIconSrc, PowerLevelTag } from '../../../hooks/usePowerLevelTags';
+import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
+import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -371,7 +371,7 @@ export const MessagePinItem = as<
     if (!isPinned && eventId) {
       pinContent.pinned.push(eventId);
     }
-    mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents, pinContent);
+    mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, pinContent);
     onClose?.();
   };
 
@@ -669,15 +669,21 @@ export type MessageProps = {
   messageSpacing: MessageSpacing;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
-  onReplyClick: MouseEventHandler<HTMLButtonElement>;
+  onReplyClick: (
+    ev: Parameters<MouseEventHandler<HTMLButtonElement>>[0],
+    startThread?: boolean
+  ) => void;
   onEditId?: (eventId?: string) => void;
   onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
   reply?: ReactNode;
   reactions?: ReactNode;
   hideReadReceipts?: boolean;
-  powerLevelTag?: PowerLevelTag;
+  showDeveloperTools?: boolean;
+  memberPowerTag?: MemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 export const Message = as<'div', MessageProps>(
   (
@@ -703,9 +709,12 @@ export const Message = as<'div', MessageProps>(
       reply,
       reactions,
       hideReadReceipts,
-      powerLevelTag,
+      showDeveloperTools,
+      memberPowerTag,
       accessibleTagColors,
       legacyUsernameColor,
+      hour24Clock,
+      dateFormatString,
       children,
       ...props
     },
@@ -724,11 +733,11 @@ export const Message = as<'div', MessageProps>(
       getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
     const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
 
-    const tagColor = powerLevelTag?.color
-      ? accessibleTagColors?.get(powerLevelTag.color)
+    const tagColor = memberPowerTag?.color
+      ? accessibleTagColors?.get(memberPowerTag.color)
       : undefined;
-    const tagIconSrc = powerLevelTag?.icon
-      ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+    const tagIconSrc = memberPowerTag?.icon
+      ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
       : undefined;
 
     const usernameColor = legacyUsernameColor ? colorMXID(senderId) : tagColor;
@@ -770,7 +779,12 @@ export const Message = as<'div', MessageProps>(
               </Text>
             </>
           )}
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         </Box>
       </Box>
     );
@@ -857,6 +871,8 @@ export const Message = as<'div', MessageProps>(
       }, 100);
     };
 
+    const isThreadedMessage = mEvent.threadRootId !== undefined;
+
     return (
       <MessageBase
         className={classNames(css.MessageBase, className)}
@@ -919,6 +935,17 @@ export const Message = as<'div', MessageProps>(
                 >
                   <Icon src={Icons.ReplyArrow} size="100" />
                 </IconButton>
+                {!isThreadedMessage && (
+                  <IconButton
+                    onClick={(ev) => onReplyClick(ev, true)}
+                    data-event-id={mEvent.getId()}
+                    variant="SurfaceVariant"
+                    size="300"
+                    radii="300"
+                  >
+                    <Icon src={Icons.ThreadPlus} size="100" />
+                  </IconButton>
+                )}
                 {canEditEvent(mx, mEvent) && onEditId && (
                   <IconButton
                     onClick={() => onEditId(mEvent.getId())}
@@ -998,6 +1025,27 @@ export const Message = as<'div', MessageProps>(
                               Reply
                             </Text>
                           </MenuItem>
+                          {!isThreadedMessage && (
+                            <MenuItem
+                              size="300"
+                              after={<Icon src={Icons.ThreadPlus} size="100" />}
+                              radii="300"
+                              data-event-id={mEvent.getId()}
+                              onClick={(evt: any) => {
+                                onReplyClick(evt, true);
+                                closeMenu();
+                              }}
+                            >
+                              <Text
+                                className={css.MessageMenuItemText}
+                                as="span"
+                                size="T300"
+                                truncate
+                              >
+                                Reply in Thread
+                              </Text>
+                            </MenuItem>
+                          )}
                           {canEditEvent(mx, mEvent) && onEditId && (
                             <MenuItem
                               size="300"
@@ -1026,7 +1074,13 @@ export const Message = as<'div', MessageProps>(
                               onClose={closeMenu}
                             />
                           )}
-                          <MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          {showDeveloperTools && (
+                            <MessageSourceCodeItem
+                              room={room}
+                              mEvent={mEvent}
+                              onClose={closeMenu}
+                            />
+                          )}
                           <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                           {canPinEvent && (
                             <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />
@@ -1101,6 +1155,7 @@ export type EventProps = {
   canDelete?: boolean;
   messageSpacing: MessageSpacing;
   hideReadReceipts?: boolean;
+  showDeveloperTools?: boolean;
 };
 export const Event = as<'div', EventProps>(
   (
@@ -1112,6 +1167,7 @@ export const Event = as<'div', EventProps>(
       canDelete,
       messageSpacing,
       hideReadReceipts,
+      showDeveloperTools,
       children,
       ...props
     },
@@ -1188,7 +1244,13 @@ export const Event = as<'div', EventProps>(
                               onClose={closeMenu}
                             />
                           )}
-                          <MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          {showDeveloperTools && (
+                            <MessageSourceCodeItem
+                              room={room}
+                              mEvent={mEvent}
+                              onClose={closeMenu}
+                            />
+                          )}
                           <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                         </Box>
                         {((!mEvent.isRedacted() && canDelete && !stateEvent) ||
diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
index d4b39845..6c686bc5 100644
--- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx
+++ b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
@@ -20,12 +20,14 @@ import { getMemberDisplayName } from '../../../utils/room';
 import { eventWithShortcode, getMxIdLocalPart } from '../../../utils/matrix';
 import * as css from './ReactionViewer.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { openProfileViewer } from '../../../../client/action/navigation';
 import { useRelations } from '../../../hooks/useRelations';
 import { Reaction } from '../../../components/message';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../../hooks/useSpace';
+import { getMouseEventCords } from '../../../utils/dom';
 
 export type ReactionViewerProps = {
   room: Room;
@@ -41,6 +43,8 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
       relations,
       useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
     );
+    const space = useSpaceOptionally();
+    const openProfile = useOpenUserRoomProfile();
 
     const [selectedKey, setSelectedKey] = useState<string>(() => {
       if (initialKey) return initialKey;
@@ -111,24 +115,31 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                   const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
 
                   const avatarMxcUrl = member?.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
-                    avatarMxcUrl,
-                    100,
-                    100,
-                    'crop',
-                    undefined,
-                    false,
-                    useAuthentication
-                  ) : undefined;
+                  const avatarUrl = avatarMxcUrl
+                    ? mx.mxcUrlToHttp(
+                        avatarMxcUrl,
+                        100,
+                        100,
+                        'crop',
+                        undefined,
+                        false,
+                        useAuthentication
+                      )
+                    : undefined;
 
                   return (
                     <MenuItem
                       key={senderId}
                       style={{ padding: `0 ${config.space.S200}` }}
                       radii="400"
-                      onClick={() => {
-                        requestClose();
-                        openProfileViewer(senderId, room.roomId);
+                      onClick={(event) => {
+                        openProfile(
+                          room.roomId,
+                          space?.roomId,
+                          senderId,
+                          getMouseEventCords(event.nativeEvent),
+                          'Bottom'
+                        );
                       }}
                       before={
                         <Avatar size="200">
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index fdc19784..9986849f 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -69,18 +69,23 @@ import { Image } from '../../../components/media';
 import { ImageViewer } from '../../../components/image-viewer';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { VirtualTile } from '../../../components/virtualizer';
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
-import {
-  getTagIconSrc,
-  useAccessibleTagColors,
-  usePowerLevelTags,
-} from '../../../hooks/usePowerLevelTags';
+import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { useIsDirectRoom } from '../../../hooks/useRoom';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import {
+  GetMemberPowerTag,
+  getPowerTagIconSrc,
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../../hooks/useMemberPowerTag';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 
 type PinnedMessageProps = {
   room: Room;
@@ -88,19 +93,27 @@ type PinnedMessageProps = {
   renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
   onOpen: (roomId: string, eventId: string) => void;
   canPinEvent: boolean;
+  getMemberPowerTag: GetMemberPowerTag;
+  accessibleTagColors: Map<string, string>;
+  legacyUsernameColor: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
-function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: PinnedMessageProps) {
+function PinnedMessage({
+  room,
+  eventId,
+  renderContent,
+  onOpen,
+  canPinEvent,
+  getMemberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
+}: PinnedMessageProps) {
   const pinnedEvent = useRoomEvent(room, eventId);
   const useAuthentication = useMediaAuthentication();
   const mx = useMatrixClient();
-  const direct = useIsDirectRoom();
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-
-  const powerLevels = usePowerLevelsContext();
-  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
-  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
-  const theme = useTheme();
-  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
   const [unpinState, unpin] = useAsyncCallback(
     useCallback(() => {
@@ -166,14 +179,15 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
   const senderAvatarMxc = getMemberAvatarMxc(room, sender);
   const getContent = (() => pinnedEvent.getContent()) as GetContentCallback;
 
-  const senderPowerLevel = getPowerLevel(sender);
-  const powerLevelTag = getPowerLevelTag(senderPowerLevel);
-  const tagColor = powerLevelTag?.color ? accessibleTagColors?.get(powerLevelTag.color) : undefined;
-  const tagIconSrc = powerLevelTag?.icon
-    ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+  const memberPowerTag = getMemberPowerTag(sender);
+  const tagColor = memberPowerTag?.color
+    ? accessibleTagColors?.get(memberPowerTag.color)
+    : undefined;
+  const tagIconSrc = memberPowerTag?.icon
+    ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
     : undefined;
 
-  const usernameColor = legacyUsernameColor || direct ? colorMXID(sender) : tagColor;
+  const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
 
   return (
     <ModernLayout
@@ -205,7 +219,11 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
             </Username>
             {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
           </Box>
-          <Time ts={pinnedEvent.getTs()} />
+          <Time
+            ts={pinnedEvent.getTs()}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         </Box>
         {renderOptions()}
       </Box>
@@ -215,8 +233,7 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
           replyEventId={pinnedEvent.replyEventId}
           threadRootId={pinnedEvent.threadRootId}
           onClick={handleOpenClick}
-          getPowerLevel={getPowerLevel}
-          getPowerLevelTag={getPowerLevelTag}
+          getMemberPowerTag={getMemberPowerTag}
           accessibleTagColors={accessibleTagColors}
           legacyUsernameColor={legacyUsernameColor}
         />
@@ -235,14 +252,34 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
     const mx = useMatrixClient();
     const userId = mx.getUserId()!;
     const powerLevels = usePowerLevelsContext();
-    const { canSendStateEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
-    const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, getPowerLevel(userId));
+    const creators = useRoomCreators(room);
+
+    const permissions = useRoomPermissions(creators, powerLevels);
+    const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, userId);
+
+    const creatorsTag = useRoomCreatorsTag();
+    const powerLevelTags = usePowerLevelTags(room, powerLevels);
+    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
+    const theme = useTheme();
+    const accessibleTagColors = useAccessiblePowerTagColors(
+      theme.kind,
+      creatorsTag,
+      powerLevelTags
+    );
 
     const pinnedEvents = useRoomPinnedEvents(room);
     const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
     const useAuthentication = useMediaAuthentication();
     const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
     const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+
+    const direct = useIsDirectRoom();
+    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
     const { navigateRoom } = useRoomNavigate();
     const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -457,6 +494,11 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
                               renderContent={renderMatrixEvent}
                               onOpen={handleOpen}
                               canPinEvent={canPinEvent}
+                              getMemberPowerTag={getMemberPowerTag}
+                              accessibleTagColors={accessibleTagColors}
+                              legacyUsernameColor={legacyUsernameColor || direct}
+                              hour24Clock={hour24Clock}
+                              dateFormatString={dateFormatString}
                             />
                           </SequenceCard>
                         </VirtualTile>
diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
new file mode 100644
index 00000000..dd96aef8
--- /dev/null
+++ b/src/app/features/search/Search.tsx
@@ -0,0 +1,454 @@
+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 navigation from '../../../client/state/navigation';
+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 { lastChild } = document.body;
+          if (
+            (lastChild && 'className' in lastChild && lastChild.className !== 'ReactModalPortal') ||
+            navigation.isRawModalVisible
+          ) {
+            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
new file mode 100644
index 00000000..addd5330
--- /dev/null
+++ b/src/app/features/search/index.ts
@@ -0,0 +1 @@
+export * from './Search';
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index 0ff1f13e..5e1a20f4 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -71,7 +71,7 @@ const useSettingsMenuItems = (): SettingsMenuItem[] =>
       {
         page: SettingsPages.DevicesPage,
         name: 'Devices',
-        icon: Icons.Category,
+        icon: Icons.Monitor,
       },
       {
         page: SettingsPages.EmojisStickersPage,
diff --git a/src/app/features/settings/account/Account.tsx b/src/app/features/settings/account/Account.tsx
index bfdb0ef5..c4b56e47 100644
--- a/src/app/features/settings/account/Account.tsx
+++ b/src/app/features/settings/account/Account.tsx
@@ -1,396 +1,10 @@
-import React, {
-  ChangeEventHandler,
-  FormEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Scroll,
-  Input,
-  Avatar,
-  Button,
-  Chip,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Modal,
-  Dialog,
-  Header,
-  config,
-  Spinner,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
+import React from 'react';
+import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
-import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { UserProfile, useUserProfile } from '../../../hooks/useUserProfile';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
-import { UserAvatar } from '../../../components/user-avatar';
-import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { nameInitials } from '../../../utils/common';
-import { copyToClipboard } from '../../../utils/dom';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useFilePicker } from '../../../hooks/useFilePicker';
-import { useObjectURL } from '../../../hooks/useObjectURL';
-import { stopPropagation } from '../../../utils/keyboard';
-import { ImageEditor } from '../../../components/image-editor';
-import { ModalWide } from '../../../styles/Modal.css';
-import { createUploadAtom, UploadSuccess } from '../../../state/upload';
-import { CompactUploadCardRenderer } from '../../../components/upload-card';
-import { useCapabilities } from '../../../hooks/useCapabilities';
-
-function MatrixId() {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
-
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Matrix ID</Text>
-      <SequenceCard
-        className={SequenceCardStyle}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="400"
-      >
-        <SettingTile
-          title={userId}
-          after={
-            <Chip variant="Secondary" radii="Pill" onClick={() => copyToClipboard(userId)}>
-              <Text size="T200">Copy</Text>
-            </Chip>
-          }
-        />
-      </SequenceCard>
-    </Box>
-  );
-}
-
-type ProfileProps = {
-  profile: UserProfile;
-  userId: string;
-};
-function ProfileAvatar({ profile, userId }: ProfileProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const capabilities = useCapabilities();
-  const [alertRemove, setAlertRemove] = useState(false);
-  const disableSetAvatar = capabilities['m.set_avatar_url']?.enabled === false;
-
-  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const avatarUrl = profile.avatarUrl
-    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
-    : undefined;
-
-  const [imageFile, setImageFile] = useState<File>();
-  const imageFileURL = useObjectURL(imageFile);
-  const uploadAtom = useMemo(() => {
-    if (imageFile) return createUploadAtom(imageFile);
-    return undefined;
-  }, [imageFile]);
-
-  const pickFile = useFilePicker(setImageFile, false);
-
-  const handleRemoveUpload = useCallback(() => {
-    setImageFile(undefined);
-  }, []);
-
-  const handleUploaded = useCallback(
-    (upload: UploadSuccess) => {
-      const { mxc } = upload;
-      mx.setAvatarUrl(mxc);
-      handleRemoveUpload();
-    },
-    [mx, handleRemoveUpload]
-  );
-
-  const handleRemoveAvatar = () => {
-    mx.setAvatarUrl('');
-    setAlertRemove(false);
-  };
-
-  return (
-    <SettingTile
-      title={
-        <Text as="span" size="L400">
-          Avatar
-        </Text>
-      }
-      after={
-        <Avatar size="500" radii="300">
-          <UserAvatar
-            userId={userId}
-            src={avatarUrl}
-            renderFallback={() => <Text size="H4">{nameInitials(defaultDisplayName)}</Text>}
-          />
-        </Avatar>
-      }
-    >
-      {uploadAtom ? (
-        <Box gap="200" direction="Column">
-          <CompactUploadCardRenderer
-            uploadAtom={uploadAtom}
-            onRemove={handleRemoveUpload}
-            onComplete={handleUploaded}
-          />
-        </Box>
-      ) : (
-        <Box gap="200">
-          <Button
-            onClick={() => pickFile('image/*')}
-            size="300"
-            variant="Secondary"
-            fill="Soft"
-            outlined
-            radii="300"
-            disabled={disableSetAvatar}
-          >
-            <Text size="B300">Upload</Text>
-          </Button>
-          {avatarUrl && (
-            <Button
-              size="300"
-              variant="Critical"
-              fill="None"
-              radii="300"
-              disabled={disableSetAvatar}
-              onClick={() => setAlertRemove(true)}
-            >
-              <Text size="B300">Remove</Text>
-            </Button>
-          )}
-        </Box>
-      )}
-
-      {imageFileURL && (
-        <Overlay open={false} backdrop={<OverlayBackdrop />}>
-          <OverlayCenter>
-            <FocusTrap
-              focusTrapOptions={{
-                initialFocus: false,
-                onDeactivate: handleRemoveUpload,
-                clickOutsideDeactivates: true,
-                escapeDeactivates: stopPropagation,
-              }}
-            >
-              <Modal className={ModalWide} variant="Surface" size="500">
-                <ImageEditor
-                  name={imageFile?.name ?? 'Unnamed'}
-                  url={imageFileURL}
-                  requestClose={handleRemoveUpload}
-                />
-              </Modal>
-            </FocusTrap>
-          </OverlayCenter>
-        </Overlay>
-      )}
-
-      <Overlay open={alertRemove} backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => setAlertRemove(false),
-              clickOutsideDeactivates: true,
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Dialog variant="Surface">
-              <Header
-                style={{
-                  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                  borderBottomWidth: config.borderWidth.B300,
-                }}
-                variant="Surface"
-                size="500"
-              >
-                <Box grow="Yes">
-                  <Text size="H4">Remove Avatar</Text>
-                </Box>
-                <IconButton size="300" onClick={() => setAlertRemove(false)} radii="300">
-                  <Icon src={Icons.Cross} />
-                </IconButton>
-              </Header>
-              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-                <Box direction="Column" gap="200">
-                  <Text priority="400">Are you sure you want to remove profile avatar?</Text>
-                </Box>
-                <Button variant="Critical" onClick={handleRemoveAvatar}>
-                  <Text size="B400">Remove</Text>
-                </Button>
-              </Box>
-            </Dialog>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-    </SettingTile>
-  );
-}
-
-function ProfileDisplayName({ profile, userId }: ProfileProps) {
-  const mx = useMatrixClient();
-  const capabilities = useCapabilities();
-  const disableSetDisplayname = capabilities['m.set_displayname']?.enabled === false;
-
-  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
-
-  const [changeState, changeDisplayName] = useAsyncCallback(
-    useCallback((name: string) => mx.setDisplayName(name), [mx])
-  );
-  const changingDisplayName = changeState.status === AsyncStatus.Loading;
-
-  useEffect(() => {
-    setDisplayName(defaultDisplayName);
-  }, [defaultDisplayName]);
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
-    const name = evt.currentTarget.value;
-    setDisplayName(name);
-  };
-
-  const handleReset = () => {
-    setDisplayName(defaultDisplayName);
-  };
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    if (changingDisplayName) return;
-
-    const target = evt.target as HTMLFormElement | undefined;
-    const displayNameInput = target?.displayNameInput as HTMLInputElement | undefined;
-    const name = displayNameInput?.value;
-    if (!name) return;
-
-    changeDisplayName(name);
-  };
-
-  const hasChanges = displayName !== defaultDisplayName;
-  return (
-    <SettingTile
-      title={
-        <Text as="span" size="L400">
-          Display Name
-        </Text>
-      }
-    >
-      <Box direction="Column" grow="Yes" gap="100">
-        <Box
-          as="form"
-          onSubmit={handleSubmit}
-          gap="200"
-          aria-disabled={changingDisplayName || disableSetDisplayname}
-        >
-          <Box grow="Yes" direction="Column">
-            <Input
-              required
-              name="displayNameInput"
-              value={displayName}
-              onChange={handleChange}
-              variant="Secondary"
-              radii="300"
-              style={{ paddingRight: config.space.S200 }}
-              readOnly={changingDisplayName || disableSetDisplayname}
-              after={
-                hasChanges &&
-                !changingDisplayName && (
-                  <IconButton
-                    type="reset"
-                    onClick={handleReset}
-                    size="300"
-                    radii="300"
-                    variant="Secondary"
-                  >
-                    <Icon src={Icons.Cross} size="100" />
-                  </IconButton>
-                )
-              }
-            />
-          </Box>
-          <Button
-            size="400"
-            variant={hasChanges ? 'Success' : 'Secondary'}
-            fill={hasChanges ? 'Solid' : 'Soft'}
-            outlined
-            radii="300"
-            disabled={!hasChanges || changingDisplayName}
-            type="submit"
-          >
-            {changingDisplayName && <Spinner variant="Success" fill="Solid" size="300" />}
-            <Text size="B400">Save</Text>
-          </Button>
-        </Box>
-      </Box>
-    </SettingTile>
-  );
-}
-
-function Profile() {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
-  const profile = useUserProfile(userId);
-
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Profile</Text>
-      <SequenceCard
-        className={SequenceCardStyle}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="400"
-      >
-        <ProfileAvatar userId={userId} profile={profile} />
-        <ProfileDisplayName userId={userId} profile={profile} />
-      </SequenceCard>
-    </Box>
-  );
-}
-
-function ContactInformation() {
-  const mx = useMatrixClient();
-  const [threePIdsState, loadThreePIds] = useAsyncCallback(
-    useCallback(() => mx.getThreePids(), [mx])
-  );
-  const threePIds =
-    threePIdsState.status === AsyncStatus.Success ? threePIdsState.data.threepids : undefined;
-
-  const emailIds = threePIds?.filter((id) => id.medium === 'email');
-
-  useEffect(() => {
-    loadThreePIds();
-  }, [loadThreePIds]);
-
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Contact Information</Text>
-      <SequenceCard
-        className={SequenceCardStyle}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="400"
-      >
-        <SettingTile title="Email Address" description="Email address attached to your account.">
-          <Box>
-            {emailIds?.map((email) => (
-              <Chip key={email.address} as="span" variant="Secondary" radii="Pill">
-                <Text size="T200">{email.address}</Text>
-              </Chip>
-            ))}
-          </Box>
-          {/* <Input defaultValue="" variant="Secondary" radii="300" /> */}
-        </SettingTile>
-      </SequenceCard>
-    </Box>
-  );
-}
+import { MatrixId } from './MatrixId';
+import { Profile } from './Profile';
+import { ContactInformation } from './ContactInfo';
+import { IgnoredUserList } from './IgnoredUserList';
 
 type AccountProps = {
   requestClose: () => void;
@@ -419,6 +33,7 @@ export function Account({ requestClose }: AccountProps) {
               <Profile />
               <MatrixId />
               <ContactInformation />
+              <IgnoredUserList />
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/features/settings/account/ContactInfo.tsx b/src/app/features/settings/account/ContactInfo.tsx
new file mode 100644
index 00000000..cfde7e29
--- /dev/null
+++ b/src/app/features/settings/account/ContactInfo.tsx
@@ -0,0 +1,45 @@
+import React, { useCallback, useEffect } from 'react';
+import { Box, Text, Chip } from 'folds';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+
+export function ContactInformation() {
+  const mx = useMatrixClient();
+  const [threePIdsState, loadThreePIds] = useAsyncCallback(
+    useCallback(() => mx.getThreePids(), [mx])
+  );
+  const threePIds =
+    threePIdsState.status === AsyncStatus.Success ? threePIdsState.data.threepids : undefined;
+
+  const emailIds = threePIds?.filter((id) => id.medium === 'email');
+
+  useEffect(() => {
+    loadThreePIds();
+  }, [loadThreePIds]);
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Contact Information</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile title="Email Address" description="Email address attached to your account.">
+          <Box>
+            {emailIds?.map((email) => (
+              <Chip key={email.address} as="span" variant="Secondary" radii="Pill">
+                <Text size="T200">{email.address}</Text>
+              </Chip>
+            ))}
+          </Box>
+          {/* <Input defaultValue="" variant="Secondary" radii="300" /> */}
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/features/settings/notifications/IgnoredUserList.tsx b/src/app/features/settings/account/IgnoredUserList.tsx
similarity index 91%
rename from src/app/features/settings/notifications/IgnoredUserList.tsx
rename to src/app/features/settings/account/IgnoredUserList.tsx
index 0ff3015f..98db9459 100644
--- a/src/app/features/settings/notifications/IgnoredUserList.tsx
+++ b/src/app/features/settings/account/IgnoredUserList.tsx
@@ -7,16 +7,17 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { isUserId } from '../../../utils/matrix';
 import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
+import { useAlive } from '../../../hooks/useAlive';
 
 function IgnoreUserInput({ userList }: { userList: string[] }) {
   const mx = useMatrixClient();
   const [userId, setUserId] = useState<string>('');
+  const alive = useAlive();
 
   const [ignoreState, ignore] = useAsyncCallback(
     useCallback(
       async (uId: string) => {
-        mx.setIgnoredUsers([...userList, uId]);
-        setUserId('');
+        await mx.setIgnoredUsers([...userList, uId]);
       },
       [mx, userList]
     )
@@ -43,7 +44,11 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
 
     if (!isUserId(uId)) return;
 
-    ignore(uId);
+    ignore(uId).then(() => {
+      if (alive()) {
+        setUserId('');
+      }
+    });
   };
 
   return (
@@ -129,7 +134,7 @@ export function IgnoredUserList() {
   return (
     <Box direction="Column" gap="100">
       <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
-        <Text size="L400">Block Messages</Text>
+        <Text size="L400">Blocked Users</Text>
       </Box>
       <SequenceCard
         className={SequenceCardStyle}
@@ -139,13 +144,13 @@ export function IgnoredUserList() {
       >
         <SettingTile
           title="Select User"
-          description="Prevent receiving message by adding userId into blocklist."
+          description="Prevent receiving messages or invites from user by adding their userId."
         >
           <Box direction="Column" gap="300">
             <IgnoreUserInput userList={ignoredUsers} />
             {ignoredUsers.length > 0 && (
               <Box direction="Inherit" gap="100">
-                <Text size="L400">Blocklist</Text>
+                <Text size="L400">Users</Text>
                 <Box wrap="Wrap" gap="200">
                   {ignoredUsers.map((userId) => (
                     <IgnoredUserChip key={userId} userId={userId} userList={ignoredUsers} />
diff --git a/src/app/features/settings/account/MatrixId.tsx b/src/app/features/settings/account/MatrixId.tsx
new file mode 100644
index 00000000..ac9b1fb5
--- /dev/null
+++ b/src/app/features/settings/account/MatrixId.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Text, Chip } from 'folds';
+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 '../../../../util/common';
+
+export function MatrixId() {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Matrix ID</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title={userId}
+          after={
+            <Chip variant="Secondary" radii="Pill" onClick={() => copyToClipboard(userId)}>
+              <Text size="T200">Copy</Text>
+            </Chip>
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
new file mode 100644
index 00000000..e982a799
--- /dev/null
+++ b/src/app/features/settings/account/Profile.tsx
@@ -0,0 +1,325 @@
+import React, {
+  ChangeEventHandler,
+  FormEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Input,
+  Avatar,
+  Button,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Modal,
+  Dialog,
+  Header,
+  config,
+  Spinner,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { UserProfile, useUserProfile } from '../../../hooks/useUserProfile';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { UserAvatar } from '../../../components/user-avatar';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { nameInitials } from '../../../utils/common';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useFilePicker } from '../../../hooks/useFilePicker';
+import { useObjectURL } from '../../../hooks/useObjectURL';
+import { stopPropagation } from '../../../utils/keyboard';
+import { ImageEditor } from '../../../components/image-editor';
+import { ModalWide } from '../../../styles/Modal.css';
+import { createUploadAtom, UploadSuccess } from '../../../state/upload';
+import { CompactUploadCardRenderer } from '../../../components/upload-card';
+import { useCapabilities } from '../../../hooks/useCapabilities';
+
+type ProfileProps = {
+  profile: UserProfile;
+  userId: string;
+};
+function ProfileAvatar({ profile, userId }: ProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const capabilities = useCapabilities();
+  const [alertRemove, setAlertRemove] = useState(false);
+  const disableSetAvatar = capabilities['m.set_avatar_url']?.enabled === false;
+
+  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarUrl = profile.avatarUrl
+    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const [imageFile, setImageFile] = useState<File>();
+  const imageFileURL = useObjectURL(imageFile);
+  const uploadAtom = useMemo(() => {
+    if (imageFile) return createUploadAtom(imageFile);
+    return undefined;
+  }, [imageFile]);
+
+  const pickFile = useFilePicker(setImageFile, false);
+
+  const handleRemoveUpload = useCallback(() => {
+    setImageFile(undefined);
+  }, []);
+
+  const handleUploaded = useCallback(
+    (upload: UploadSuccess) => {
+      const { mxc } = upload;
+      mx.setAvatarUrl(mxc);
+      handleRemoveUpload();
+    },
+    [mx, handleRemoveUpload]
+  );
+
+  const handleRemoveAvatar = () => {
+    mx.setAvatarUrl('');
+    setAlertRemove(false);
+  };
+
+  return (
+    <SettingTile
+      title={
+        <Text as="span" size="L400">
+          Avatar
+        </Text>
+      }
+      after={
+        <Avatar size="500" radii="300">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            renderFallback={() => <Text size="H4">{nameInitials(defaultDisplayName)}</Text>}
+          />
+        </Avatar>
+      }
+    >
+      {uploadAtom ? (
+        <Box gap="200" direction="Column">
+          <CompactUploadCardRenderer
+            uploadAtom={uploadAtom}
+            onRemove={handleRemoveUpload}
+            onComplete={handleUploaded}
+          />
+        </Box>
+      ) : (
+        <Box gap="200">
+          <Button
+            onClick={() => pickFile('image/*')}
+            size="300"
+            variant="Secondary"
+            fill="Soft"
+            outlined
+            radii="300"
+            disabled={disableSetAvatar}
+          >
+            <Text size="B300">Upload</Text>
+          </Button>
+          {avatarUrl && (
+            <Button
+              size="300"
+              variant="Critical"
+              fill="None"
+              radii="300"
+              disabled={disableSetAvatar}
+              onClick={() => setAlertRemove(true)}
+            >
+              <Text size="B300">Remove</Text>
+            </Button>
+          )}
+        </Box>
+      )}
+
+      {imageFileURL && (
+        <Overlay open={false} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: handleRemoveUpload,
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal className={ModalWide} variant="Surface" size="500">
+                <ImageEditor
+                  name={imageFile?.name ?? 'Unnamed'}
+                  url={imageFileURL}
+                  requestClose={handleRemoveUpload}
+                />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+
+      <Overlay open={alertRemove} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setAlertRemove(false),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Dialog variant="Surface">
+              <Header
+                style={{
+                  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                  borderBottomWidth: config.borderWidth.B300,
+                }}
+                variant="Surface"
+                size="500"
+              >
+                <Box grow="Yes">
+                  <Text size="H4">Remove Avatar</Text>
+                </Box>
+                <IconButton size="300" onClick={() => setAlertRemove(false)} radii="300">
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              </Header>
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                <Box direction="Column" gap="200">
+                  <Text priority="400">Are you sure you want to remove profile avatar?</Text>
+                </Box>
+                <Button variant="Critical" onClick={handleRemoveAvatar}>
+                  <Text size="B400">Remove</Text>
+                </Button>
+              </Box>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SettingTile>
+  );
+}
+
+function ProfileDisplayName({ profile, userId }: ProfileProps) {
+  const mx = useMatrixClient();
+  const capabilities = useCapabilities();
+  const disableSetDisplayname = capabilities['m.set_displayname']?.enabled === false;
+
+  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
+
+  const [changeState, changeDisplayName] = useAsyncCallback(
+    useCallback((name: string) => mx.setDisplayName(name), [mx])
+  );
+  const changingDisplayName = changeState.status === AsyncStatus.Loading;
+
+  useEffect(() => {
+    setDisplayName(defaultDisplayName);
+  }, [defaultDisplayName]);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const name = evt.currentTarget.value;
+    setDisplayName(name);
+  };
+
+  const handleReset = () => {
+    setDisplayName(defaultDisplayName);
+  };
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (changingDisplayName) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const displayNameInput = target?.displayNameInput as HTMLInputElement | undefined;
+    const name = displayNameInput?.value;
+    if (!name) return;
+
+    changeDisplayName(name);
+  };
+
+  const hasChanges = displayName !== defaultDisplayName;
+  return (
+    <SettingTile
+      title={
+        <Text as="span" size="L400">
+          Display Name
+        </Text>
+      }
+    >
+      <Box direction="Column" grow="Yes" gap="100">
+        <Box
+          as="form"
+          onSubmit={handleSubmit}
+          gap="200"
+          aria-disabled={changingDisplayName || disableSetDisplayname}
+        >
+          <Box grow="Yes" direction="Column">
+            <Input
+              required
+              name="displayNameInput"
+              value={displayName}
+              onChange={handleChange}
+              variant="Secondary"
+              radii="300"
+              style={{ paddingRight: config.space.S200 }}
+              readOnly={changingDisplayName || disableSetDisplayname}
+              after={
+                hasChanges &&
+                !changingDisplayName && (
+                  <IconButton
+                    type="reset"
+                    onClick={handleReset}
+                    size="300"
+                    radii="300"
+                    variant="Secondary"
+                  >
+                    <Icon src={Icons.Cross} size="100" />
+                  </IconButton>
+                )
+              }
+            />
+          </Box>
+          <Button
+            size="400"
+            variant={hasChanges ? 'Success' : 'Secondary'}
+            fill={hasChanges ? 'Solid' : 'Soft'}
+            outlined
+            radii="300"
+            disabled={!hasChanges || changingDisplayName}
+            type="submit"
+          >
+            {changingDisplayName && <Spinner variant="Success" fill="Solid" size="300" />}
+            <Text size="B400">Save</Text>
+          </Button>
+        </Box>
+      </Box>
+    </SettingTile>
+  );
+}
+
+export function Profile() {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+  const profile = useUserProfile(userId);
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Profile</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <ProfileAvatar userId={userId} profile={profile} />
+        <ProfileDisplayName userId={userId} profile={profile} />
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx
index b4bc9fcb..71b684f5 100644
--- a/src/app/features/settings/devices/DeviceTile.tsx
+++ b/src/app/features/settings/devices/DeviceTile.tsx
@@ -27,6 +27,8 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { LogoutDialog } from '../../../components/LogoutDialog';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 
 export function DeviceTilePlaceholder() {
   return (
@@ -41,6 +43,9 @@ export function DeviceTilePlaceholder() {
 }
 
 function DeviceActiveTime({ ts }: { ts: number }) {
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
   return (
     <Text className={BreakWord} size="T200">
       <Text size="Inherit" as="span" priority="300">
@@ -49,7 +54,8 @@ function DeviceActiveTime({ ts }: { ts: number }) {
       <>
         {today(ts) && 'Today'}
         {yesterday(ts) && 'Yesterday'}
-        {!today(ts) && !yesterday(ts) && timeDayMonYear(ts)} {timeHourMinute(ts)}
+        {!today(ts) && !yesterday(ts) && timeDayMonYear(ts, dateFormatString)}{' '}
+        {timeHourMinute(ts, hour24Clock)}
       </>
     </Text>
   );
diff --git a/src/app/features/settings/devices/OtherDevices.tsx b/src/app/features/settings/devices/OtherDevices.tsx
index 0d879e59..4bd83dd6 100644
--- a/src/app/features/settings/devices/OtherDevices.tsx
+++ b/src/app/features/settings/devices/OtherDevices.tsx
@@ -11,6 +11,10 @@ import { useUIAMatrixError } from '../../../hooks/useUIAFlows';
 import { DeviceVerificationStatus } from '../../../components/DeviceVerificationStatus';
 import { VerifyOtherDeviceTile } from './Verification';
 import { VerificationStatus } from '../../../hooks/useDeviceVerificationStatus';
+import { useAuthMetadata } from '../../../hooks/useAuthMetadata';
+import { withSearchParam } from '../../../pages/pathUtils';
+import { useAccountManagementActions } from '../../../hooks/useAccountManagement';
+import { SettingTile } from '../../../components/setting-tile';
 
 type OtherDevicesProps = {
   devices: IMyDevice[];
@@ -20,8 +24,39 @@ type OtherDevicesProps = {
 export function OtherDevices({ devices, refreshDeviceList, showVerification }: OtherDevicesProps) {
   const mx = useMatrixClient();
   const crypto = mx.getCrypto();
+  const authMetadata = useAuthMetadata();
+  const accountManagementActions = useAccountManagementActions();
+
   const [deleted, setDeleted] = useState<Set<string>>(new Set());
 
+  const handleDashboardOIDC = useCallback(() => {
+    const authUrl = authMetadata?.account_management_uri ?? authMetadata?.issuer;
+    if (!authUrl) return;
+
+    window.open(
+      withSearchParam(authUrl, {
+        action: accountManagementActions.sessionsList,
+      }),
+      '_blank'
+    );
+  }, [authMetadata, accountManagementActions]);
+
+  const handleDeleteOIDC = useCallback(
+    (deviceId: string) => {
+      const authUrl = authMetadata?.account_management_uri ?? authMetadata?.issuer;
+      if (!authUrl) return;
+
+      window.open(
+        withSearchParam(authUrl, {
+          action: accountManagementActions.sessionEnd,
+          device_id: deviceId,
+        }),
+        '_blank'
+      );
+    },
+    [authMetadata, accountManagementActions]
+  );
+
   const handleToggleDelete = useCallback((deviceId: string) => {
     setDeleted((deviceIds) => {
       const newIds = new Set(deviceIds);
@@ -70,6 +105,31 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
     <>
       <Box direction="Column" gap="100">
         <Text size="L400">Others</Text>
+        {authMetadata && (
+          <SequenceCard
+            className={SequenceCardStyle}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            <SettingTile
+              title="Device Dashboard"
+              description="Manage your devices on OIDC dashboard."
+              after={
+                <Button
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="300"
+                  outlined
+                  onClick={handleDashboardOIDC}
+                >
+                  <Text size="B300">Open</Text>
+                </Button>
+              }
+            />
+          </SequenceCard>
+        )}
         {devices
           .sort((d1, d2) => {
             if (!d1.last_seen_ts || !d2.last_seen_ts) return 0;
@@ -89,12 +149,20 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
                 refreshDeviceList={refreshDeviceList}
                 disabled={deleting}
                 options={
-                  <DeviceDeleteBtn
-                    deviceId={device.device_id}
-                    deleted={deleted.has(device.device_id)}
-                    onDeleteToggle={handleToggleDelete}
-                    disabled={deleting}
-                  />
+                  authMetadata ? (
+                    <DeviceDeleteBtn
+                      deviceId={device.device_id}
+                      deleted={false}
+                      onDeleteToggle={handleDeleteOIDC}
+                    />
+                  ) : (
+                    <DeviceDeleteBtn
+                      deviceId={device.device_id}
+                      deleted={deleted.has(device.device_id)}
+                      onDeleteToggle={handleToggleDelete}
+                      disabled={deleting}
+                    />
+                  )
                 }
               />
               {showVerification && crypto && (
diff --git a/src/app/features/settings/devices/Verification.tsx b/src/app/features/settings/devices/Verification.tsx
index 59fa6b67..6c7eab17 100644
--- a/src/app/features/settings/devices/Verification.tsx
+++ b/src/app/features/settings/devices/Verification.tsx
@@ -32,6 +32,9 @@ import {
   DeviceVerificationSetup,
 } from '../../../components/DeviceVerificationSetup';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useAuthMetadata } from '../../../hooks/useAuthMetadata';
+import { withSearchParam } from '../../../pages/pathUtils';
+import { useAccountManagementActions } from '../../../hooks/useAccountManagement';
 
 type VerificationStatusBadgeProps = {
   verificationStatus: VerificationStatus;
@@ -252,6 +255,8 @@ export function EnableVerification({ visible }: EnableVerificationProps) {
 
 export function DeviceVerificationOptions() {
   const [menuCords, setMenuCords] = useState<RectCords>();
+  const authMetadata = useAuthMetadata();
+  const accountManagementActions = useAccountManagementActions();
 
   const [reset, setReset] = useState(false);
 
@@ -265,6 +270,18 @@ export function DeviceVerificationOptions() {
 
   const handleReset = () => {
     setMenuCords(undefined);
+
+    if (authMetadata) {
+      const authUrl = authMetadata.account_management_uri ?? authMetadata.issuer;
+      window.open(
+        withSearchParam(authUrl, {
+          action: accountManagementActions.crossSigningReset,
+        }),
+        '_blank'
+      );
+      return;
+    }
+
     setReset(true);
   };
 
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 04e2728b..b861a060 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -1,15 +1,19 @@
 import React, {
   ChangeEventHandler,
+  FormEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
+  useEffect,
   useState,
 } from 'react';
+import dayjs from 'dayjs';
 import {
   as,
   Box,
   Button,
   Chip,
   config,
+  Header,
   Icon,
   IconButton,
   Icons,
@@ -28,7 +32,7 @@ import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { useSetting } from '../../../state/hooks/settings';
-import { MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
 import { SettingTile } from '../../../components/setting-tile';
 import { KeySymbol } from '../../../utils/key-symbol';
 import { isMacOS } from '../../../utils/user-agent';
@@ -44,6 +48,7 @@ import {
 import { stopPropagation } from '../../../utils/keyboard';
 import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
 import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
+import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { SequenceCardStyle } from '../styles.css';
 
 type ThemeSelectorProps = {
@@ -300,6 +305,7 @@ function PageZoomInput() {
 
 function Appearance() {
   const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
+  const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
 
   return (
@@ -327,6 +333,13 @@ 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"
@@ -341,6 +354,359 @@ function Appearance() {
   );
 }
 
+type DateHintProps = {
+  hasChanges: boolean;
+  handleReset: () => void;
+};
+function DateHint({ hasChanges, handleReset }: DateHintProps) {
+  const [anchor, setAnchor] = useState<RectCords>();
+  const categoryPadding = { padding: config.space.S200, paddingTop: 0 };
+
+  const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
+    setAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+  return (
+    <PopOut
+      anchor={anchor}
+      position="Top"
+      align="End"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setAnchor(undefined),
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ maxHeight: '85vh', overflowY: 'auto' }}>
+            <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
+              <Text size="L400">Formatting</Text>
+            </Header>
+
+            <Box direction="Column">
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Year</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    YY
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}
+                      Two-digit year
+                    </Text>{' '}
+                  </Text>
+                  <Text size="T300">
+                    YYYY
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Four-digit year
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Month</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    M
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}The month
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    MM
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Two-digit month
+                    </Text>{' '}
+                  </Text>
+                  <Text size="T300">
+                    MMM
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Short month name
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    MMMM
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Full month name
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Day of the Month</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    D
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Day of the month
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    DD
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Two-digit day of the month
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Day of the Week</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    d
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Day of the week (Sunday = 0)
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    dd
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Two-letter day name
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    ddd
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Short day name
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    dddd
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Full day name
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      {hasChanges ? (
+        <IconButton
+          tabIndex={-1}
+          onClick={handleReset}
+          type="reset"
+          variant="Secondary"
+          size="300"
+          radii="300"
+        >
+          <Icon src={Icons.Cross} size="100" />
+        </IconButton>
+      ) : (
+        <IconButton
+          tabIndex={-1}
+          onClick={handleOpenMenu}
+          type="button"
+          variant="Secondary"
+          size="300"
+          radii="300"
+          aria-pressed={!!anchor}
+        >
+          <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
+        </IconButton>
+      )}
+    </PopOut>
+  );
+}
+
+type CustomDateFormatProps = {
+  value: string;
+  onChange: (format: string) => void;
+};
+function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
+  const [dateFormatCustom, setDateFormatCustom] = useState(value);
+
+  useEffect(() => {
+    setDateFormatCustom(value);
+  }, [value]);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const format = evt.currentTarget.value;
+    setDateFormatCustom(format);
+  };
+
+  const handleReset = () => {
+    setDateFormatCustom(value);
+  };
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const customDateFormatInput = target?.customDateFormatInput as HTMLInputElement | undefined;
+    const format = customDateFormatInput?.value;
+    if (!format) return;
+
+    onChange(format);
+  };
+
+  const hasChanges = dateFormatCustom !== value;
+  return (
+    <SettingTile>
+      <Box as="form" onSubmit={handleSubmit} gap="200">
+        <Box grow="Yes" direction="Column">
+          <Input
+            required
+            name="customDateFormatInput"
+            value={dateFormatCustom}
+            onChange={handleChange}
+            maxLength={16}
+            autoComplete="off"
+            variant="Secondary"
+            radii="300"
+            style={{ paddingRight: config.space.S200 }}
+            after={<DateHint hasChanges={hasChanges} handleReset={handleReset} />}
+          />
+        </Box>
+        <Button
+          size="400"
+          variant={hasChanges ? 'Success' : 'Secondary'}
+          fill={hasChanges ? 'Solid' : 'Soft'}
+          outlined
+          radii="300"
+          disabled={!hasChanges}
+          type="submit"
+        >
+          <Text size="B400">Save</Text>
+        </Button>
+      </Box>
+    </SettingTile>
+  );
+}
+
+type PresetDateFormatProps = {
+  value: string;
+  onChange: (format: string) => void;
+};
+function PresetDateFormat({ value, onChange }: PresetDateFormatProps) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const dateFormatItems = useDateFormatItems();
+
+  const getDisplayDate = (format: string): string =>
+    format !== '' ? dayjs().format(format) : 'Custom';
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (format: DateFormat) => {
+    onChange(format);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text size="T300">
+          {getDisplayDate(dateFormatItems.find((i) => i.format === value)?.format ?? value)}
+        </Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {dateFormatItems.map((item) => (
+                  <MenuItem
+                    key={item.format}
+                    size="300"
+                    variant={value === item.format ? 'Primary' : 'Surface'}
+                    radii="300"
+                    onClick={() => handleSelect(item.format)}
+                  >
+                    <Text size="T300">{getDisplayDate(item.format)}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
+function SelectDateFormat() {
+  const [dateFormatString, setDateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [selectedDateFormat, setSelectedDateFormat] = useState(dateFormatString);
+  const customDateFormat = selectedDateFormat === '';
+
+  const handlePresetChange = (format: string) => {
+    setSelectedDateFormat(format);
+    if (format !== '') {
+      setDateFormatString(format);
+    }
+  };
+
+  return (
+    <>
+      <SettingTile
+        title="Date Format"
+        description={customDateFormat ? dayjs().format(dateFormatString) : ''}
+        after={<PresetDateFormat value={selectedDateFormat} onChange={handlePresetChange} />}
+      />
+      {customDateFormat && (
+        <CustomDateFormat value={dateFormatString} onChange={setDateFormatString} />
+      )}
+    </>
+  );
+}
+
+function DateAndTime() {
+  const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Date & Time</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="24-Hour Time Format"
+          after={<Switch variant="Primary" value={hour24Clock} onChange={setHour24Clock} />}
+        />
+      </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SelectDateFormat />
+      </SequenceCard>
+    </Box>
+  );
+}
+
 function Editor() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
@@ -637,6 +1003,7 @@ export function General({ requestClose }: GeneralProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Appearance />
+              <DateAndTime />
               <Editor />
               <Messages />
             </Box>
diff --git a/src/app/features/settings/notifications/Notifications.tsx b/src/app/features/settings/notifications/Notifications.tsx
index aa339a03..095a9bba 100644
--- a/src/app/features/settings/notifications/Notifications.tsx
+++ b/src/app/features/settings/notifications/Notifications.tsx
@@ -5,7 +5,9 @@ import { SystemNotification } from './SystemNotification';
 import { AllMessagesNotifications } from './AllMessages';
 import { SpecialMessagesNotifications } from './SpecialMessages';
 import { KeywordMessagesNotifications } from './KeywordMessages';
-import { IgnoredUserList } from './IgnoredUserList';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
 
 type NotificationsProps = {
   requestClose: () => void;
@@ -35,7 +37,19 @@ export function Notifications({ requestClose }: NotificationsProps) {
               <AllMessagesNotifications />
               <SpecialMessagesNotifications />
               <KeywordMessagesNotifications />
-              <IgnoredUserList />
+              <Box direction="Column" gap="100">
+                <Text size="L400">Block Messages</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    description={'This option has been moved to "Account > Block Users" section.'}
+                  />
+                </SequenceCard>
+              </Box>
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/features/space-settings/SpaceSettingsRenderer.tsx b/src/app/features/space-settings/SpaceSettingsRenderer.tsx
index 085c5e2b..79947e0c 100644
--- a/src/app/features/space-settings/SpaceSettingsRenderer.tsx
+++ b/src/app/features/space-settings/SpaceSettingsRenderer.tsx
@@ -16,7 +16,7 @@ function RenderSettings({ state }: RenderSettingsProps) {
   const allJoinedRooms = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allJoinedRooms);
   const room = getRoom(roomId);
-  const space = spaceId ? getRoom(spaceId) : undefined;
+  const space = spaceId && spaceId !== roomId ? getRoom(spaceId) : undefined;
 
   if (!room) return null;
 
diff --git a/src/app/features/space-settings/general/General.tsx b/src/app/features/space-settings/general/General.tsx
index 6f4d8d38..641bfa7a 100644
--- a/src/app/features/space-settings/general/General.tsx
+++ b/src/app/features/space-settings/general/General.tsx
@@ -11,6 +11,8 @@ import {
   RoomPublish,
   RoomUpgrade,
 } from '../../common-settings/general';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type GeneralProps = {
   requestClose: () => void;
@@ -18,6 +20,8 @@ type GeneralProps = {
 export function General({ requestClose }: GeneralProps) {
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+  const permissions = useRoomPermissions(creators, powerLevels);
 
   return (
     <Page>
@@ -39,20 +43,20 @@ export function General({ requestClose }: GeneralProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
-              <RoomProfile powerLevels={powerLevels} />
+              <RoomProfile permissions={permissions} />
               <Box direction="Column" gap="100">
                 <Text size="L400">Options</Text>
-                <RoomJoinRules powerLevels={powerLevels} />
-                <RoomPublish powerLevels={powerLevels} />
+                <RoomJoinRules permissions={permissions} />
+                <RoomPublish permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Addresses</Text>
-                <RoomPublishedAddresses powerLevels={powerLevels} />
-                <RoomLocalAddresses powerLevels={powerLevels} />
+                <RoomPublishedAddresses permissions={permissions} />
+                <RoomLocalAddresses permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Advance Options</Text>
-                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
+                <RoomUpgrade permissions={permissions} requestClose={requestClose} />
               </Box>
             </Box>
           </PageContent>
diff --git a/src/app/features/space-settings/permissions/Permissions.tsx b/src/app/features/space-settings/permissions/Permissions.tsx
index ae3769bf..7572a71b 100644
--- a/src/app/features/space-settings/permissions/Permissions.tsx
+++ b/src/app/features/space-settings/permissions/Permissions.tsx
@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
 import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type PermissionsProps = {
   requestClose: () => void;
@@ -15,11 +17,12 @@ export function Permissions({ requestClose }: PermissionsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canEditPowers = canSendStateEvent(
-    StateEvent.PowerLevelTags,
-    getPowerLevel(mx.getSafeUserId())
-  );
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+
+  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
+  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
   const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
@@ -57,7 +60,11 @@ export function Permissions({ requestClose }: PermissionsProps) {
                 onEdit={canEditPowers ? handleEditPowers : undefined}
                 permissionGroups={permissionGroups}
               />
-              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
+              <PermissionGroups
+                canEdit={canEditPermissions}
+                powerLevels={powerLevels}
+                permissionGroups={permissionGroups}
+              />
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/hooks/router/useCreateSelected.ts b/src/app/hooks/router/useCreateSelected.ts
new file mode 100644
index 00000000..2034a449
--- /dev/null
+++ b/src/app/hooks/router/useCreateSelected.ts
@@ -0,0 +1,12 @@
+import { useMatch } from 'react-router-dom';
+import { getCreatePath } from '../../pages/pathUtils';
+
+export const useCreateSelected = (): boolean => {
+  const match = useMatch({
+    path: getCreatePath(),
+    caseSensitive: true,
+    end: false,
+  });
+
+  return !!match;
+};
diff --git a/src/app/hooks/useAccountManagement.ts b/src/app/hooks/useAccountManagement.ts
new file mode 100644
index 00000000..5eafedc4
--- /dev/null
+++ b/src/app/hooks/useAccountManagement.ts
@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+
+export const useAccountManagementActions = () => {
+  const actions = useMemo(
+    () => ({
+      profile: 'org.matrix.profile',
+      sessionsList: 'org.matrix.sessions_list',
+      sessionView: 'org.matrix.session_view',
+      sessionEnd: 'org.matrix.session_end',
+      accountDeactivate: 'org.matrix.account_deactivate',
+      crossSigningReset: 'org.matrix.cross_signing_reset',
+    }),
+    []
+  );
+
+  return actions;
+};
diff --git a/src/app/hooks/useAuthMetadata.ts b/src/app/hooks/useAuthMetadata.ts
new file mode 100644
index 00000000..db967463
--- /dev/null
+++ b/src/app/hooks/useAuthMetadata.ts
@@ -0,0 +1,12 @@
+import { ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { createContext, useContext } from 'react';
+
+const AuthMetadataContext = createContext<ValidatedAuthMetadata | undefined>(undefined);
+
+export const AuthMetadataProvider = AuthMetadataContext.Provider;
+
+export const useAuthMetadata = (): ValidatedAuthMetadata | undefined => {
+  const metadata = useContext(AuthMetadataContext);
+
+  return metadata;
+};
diff --git a/src/app/hooks/useCommands.ts b/src/app/hooks/useCommands.ts
index bc7d2892..4d70465d 100644
--- a/src/app/hooks/useCommands.ts
+++ b/src/app/hooks/useCommands.ts
@@ -1,34 +1,130 @@
-import { MatrixClient, Room } 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 { getDMRoomFor, isRoomAlias, isRoomId, isUserId } from '../utils/matrix';
+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';
 
 export const SHRUG = '¯\\_(ツ)_/¯';
 export const TABLEFLIP = '(╯°□°)╯︵ ┻━┻';
 export const UNFLIP = '┬─┬ノ( º_ºノ)';
 
-export function parseUsersAndReason(payload: string): {
-  users: string[];
-  reason?: string;
-} {
-  let reason: string | undefined;
-  let ids: string = payload;
+const FLAG_PAT = '(?:^|\\s)-(\\w+)\\b';
+const FLAG_REG = new RegExp(FLAG_PAT);
+const FLAG_REG_G = new RegExp(FLAG_PAT, 'g');
 
-  const reasonMatch = payload.match(/\s-r\s/);
-  if (reasonMatch) {
-    ids = payload.slice(0, reasonMatch.index);
-    reason = payload.slice((reasonMatch.index ?? 0) + reasonMatch[0].length);
-    if (reason.trim() === '') reason = undefined;
+export const splitPayloadContentAndFlags = (payload: string): [string, string | undefined] => {
+  const flagMatch = payload.match(FLAG_REG);
+
+  if (!flagMatch) {
+    return [payload, undefined];
   }
-  const rawIds = ids.split(' ');
-  const users = rawIds.filter((id) => isUserId(id));
-  return {
-    users,
-    reason,
-  };
-}
+  const content = payload.slice(0, flagMatch.index);
+  const flags = payload.slice(flagMatch.index);
+
+  return [content, flags];
+};
+
+export const parseFlags = (flags: string | undefined): Record<string, string | undefined> => {
+  const result: Record<string, string> = {};
+  if (!flags) return result;
+
+  const matches: { key: string; index: number; match: string }[] = [];
+
+  for (let match = FLAG_REG_G.exec(flags); match !== null; match = FLAG_REG_G.exec(flags)) {
+    matches.push({ key: match[1], index: match.index, match: match[0] });
+  }
+
+  for (let i = 0; i < matches.length; i += 1) {
+    const { key, match } = matches[i];
+    const start = matches[i].index + match.length;
+    const end = i + 1 < matches.length ? matches[i + 1].index : flags.length;
+    const value = flags.slice(start, end).trim();
+    result[key] = value;
+  }
+
+  return result;
+};
+
+export const parseUsers = (payload: string): string[] => {
+  const users: string[] = [];
+
+  splitWithSpace(payload).forEach((item) => {
+    if (isUserId(item)) {
+      users.push(item);
+    }
+  });
+
+  return users;
+};
+
+export const parseServers = (payload: string): string[] => {
+  const servers: string[] = [];
+
+  splitWithSpace(payload).forEach((item) => {
+    if (isServerName(item)) {
+      servers.push(item);
+    }
+  });
+
+  return servers;
+};
+
+const getServerMembers = (room: Room, server: string): RoomMember[] => {
+  const members: RoomMember[] = room
+    .getMembers()
+    .filter((member) => member.userId.endsWith(`:${server}`));
+
+  return members;
+};
+
+export const parseTimestampFlag = (input: string): number | undefined => {
+  const match = input.match(/^(\d+(?:\.\d+)?)([dhms])$/); // supports floats like 1.5d
+
+  if (!match) {
+    return undefined;
+  }
+
+  const value = parseFloat(match[1]); // supports decimal values
+  const unit = match[2];
+
+  const now = Date.now(); // in milliseconds
+  let delta = 0;
+
+  switch (unit) {
+    case 'd':
+      delta = value * 24 * 60 * 60 * 1000;
+      break;
+    case 'h':
+      delta = value * 60 * 60 * 1000;
+      break;
+    case 'm':
+      delta = value * 60 * 1000;
+      break;
+    case 's':
+      delta = value * 1000;
+      break;
+    default:
+      return undefined;
+  }
+
+  const timestamp = now - delta;
+  return timestamp;
+};
 
 export type CommandExe = (payload: string) => Promise<void>;
 
@@ -52,6 +148,8 @@ export enum Command {
   ConvertToRoom = 'converttoroom',
   TableFlip = 'tableflip',
   UnFlip = 'unflip',
+  Delete = 'delete',
+  Acl = 'acl',
 }
 
 export type CommandContent = {
@@ -96,7 +194,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.StartDm,
         description: 'Start direct message with user. Example: /startdm userId1',
         exe: async (payload) => {
-          const rawIds = payload.split(' ');
+          const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id) && id !== mx.getUserId());
           if (userIds.length === 0) return;
           if (userIds.length === 1) {
@@ -106,7 +204,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               return;
             }
           }
-          const devices = await Promise.all(userIds.map(uid => hasDevices(mx, uid)));
+          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);
@@ -116,7 +214,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.Join,
         description: 'Join room with address. Example: /join address1 address2',
         exe: async (payload) => {
-          const rawIds = payload.split(' ');
+          const rawIds = splitWithSpace(payload);
           const roomIds = rawIds.filter(
             (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias)
           );
@@ -131,7 +229,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
             mx.leave(room.roomId);
             return;
           }
-          const rawIds = payload.split(' ');
+          const rawIds = splitWithSpace(payload);
           const roomIds = rawIds.filter((id) => isRoomId(id));
           roomIds.map((id) => mx.leave(id));
         },
@@ -140,7 +238,10 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.Invite,
         description: 'Invite user to room. Example: /invite userId1 userId2 [-r reason]',
         exe: async (payload) => {
-          const { users, reason } = parseUsersAndReason(payload);
+          const [content, flags] = splitPayloadContentAndFlags(payload);
+          const users = parseUsers(content);
+          const flagToContent = parseFlags(flags);
+          const reason = flagToContent.r;
           users.map((id) => mx.invite(room.roomId, id, reason));
         },
       },
@@ -148,31 +249,64 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.DisInvite,
         description: 'Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]',
         exe: async (payload) => {
-          const { users, reason } = parseUsersAndReason(payload);
+          const [content, flags] = splitPayloadContentAndFlags(payload);
+          const users = parseUsers(content);
+          const flagToContent = parseFlags(flags);
+          const reason = flagToContent.r;
           users.map((id) => mx.kick(room.roomId, id, reason));
         },
       },
       [Command.Kick]: {
         name: Command.Kick,
-        description: 'Kick user from room. Example: /kick userId1 userId2 [-r reason]',
+        description: 'Kick user from room. Example: /kick userId1 userId2 servername [-r reason]',
         exe: async (payload) => {
-          const { users, reason } = parseUsersAndReason(payload);
-          users.map((id) => mx.kick(room.roomId, id, reason));
+          const [content, flags] = splitPayloadContentAndFlags(payload);
+          const users = parseUsers(content);
+          const servers = parseServers(content);
+          const flagToContent = parseFlags(flags);
+          const reason = flagToContent.r;
+
+          const serverMembers = servers?.flatMap((server) => getServerMembers(room, server));
+          const serverUsers = serverMembers
+            ?.filter((m) => m.membership !== Membership.Ban)
+            .map((m) => m.userId);
+
+          if (Array.isArray(serverUsers)) {
+            serverUsers.forEach((user) => {
+              if (!users.includes(user)) users.push(user);
+            });
+          }
+
+          rateLimitedActions(users, (id) => mx.kick(room.roomId, id, reason));
         },
       },
       [Command.Ban]: {
         name: Command.Ban,
-        description: 'Ban user from room. Example: /ban userId1 userId2 [-r reason]',
+        description: 'Ban user from room. Example: /ban userId1 userId2 servername [-r reason]',
         exe: async (payload) => {
-          const { users, reason } = parseUsersAndReason(payload);
-          users.map((id) => mx.ban(room.roomId, id, reason));
+          const [content, flags] = splitPayloadContentAndFlags(payload);
+          const users = parseUsers(content);
+          const servers = parseServers(content);
+          const flagToContent = parseFlags(flags);
+          const reason = flagToContent.r;
+
+          const serverMembers = servers?.flatMap((server) => getServerMembers(room, server));
+          const serverUsers = serverMembers?.map((m) => m.userId);
+
+          if (Array.isArray(serverUsers)) {
+            serverUsers.forEach((user) => {
+              if (!users.includes(user)) users.push(user);
+            });
+          }
+
+          rateLimitedActions(users, (id) => mx.ban(room.roomId, id, reason));
         },
       },
       [Command.UnBan]: {
         name: Command.UnBan,
         description: 'Unban user from room. Example: /unban userId1 userId2',
         exe: async (payload) => {
-          const rawIds = payload.split(' ');
+          const rawIds = splitWithSpace(payload);
           const users = rawIds.filter((id) => isUserId(id));
           users.map((id) => mx.unban(room.roomId, id));
         },
@@ -181,7 +315,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.Ignore,
         description: 'Ignore user. Example: /ignore userId1 userId2',
         exe: async (payload) => {
-          const rawIds = payload.split(' ');
+          const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id));
           if (userIds.length > 0) roomActions.ignore(mx, userIds);
         },
@@ -190,7 +324,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.UnIgnore,
         description: 'Unignore user. Example: /unignore userId1 userId2',
         exe: async (payload) => {
-          const rawIds = payload.split(' ');
+          const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id));
           if (userIds.length > 0) roomActions.unignore(mx, userIds);
         },
@@ -217,14 +351,133 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.ConvertToDm,
         description: 'Convert room to direct message',
         exe: async () => {
-          roomActions.convertToDm(mx, room.roomId);
+          const dmUserId = guessDmRoomUserId(room, mx.getSafeUserId());
+          await addRoomIdToMDirect(mx, room.roomId, dmUserId);
         },
       },
       [Command.ConvertToRoom]: {
         name: Command.ConvertToRoom,
         description: 'Convert direct message to room',
         exe: async () => {
-          roomActions.convertToRoom(mx, room.roomId);
+          await removeRoomIdFromMDirect(mx, room.roomId);
+        },
+      },
+      [Command.Delete]: {
+        name: Command.Delete,
+        description:
+          'Delete messages from users. Example: /delete userId1 servername -past 1d|2h|5m|30s [-t m.room.message] [-r spam]',
+        exe: async (payload) => {
+          const [content, flags] = splitPayloadContentAndFlags(payload);
+          const users = parseUsers(content);
+          const servers = parseServers(content);
+
+          const flagToContent = parseFlags(flags);
+          const reason = flagToContent.r;
+          const pastContent = flagToContent.past ?? '';
+          const msgTypeContent = flagToContent.t;
+          const messageTypes: string[] = msgTypeContent ? splitWithSpace(msgTypeContent) : [];
+
+          const ts = parseTimestampFlag(pastContent);
+          if (!ts) return;
+
+          const serverMembers = servers?.flatMap((server) => getServerMembers(room, server));
+          const serverUsers = serverMembers?.map((m) => m.userId);
+
+          if (Array.isArray(serverUsers)) {
+            serverUsers.forEach((user) => {
+              if (!users.includes(user)) users.push(user);
+            });
+          }
+
+          const result = await mx.timestampToEvent(room.roomId, ts, Direction.Forward);
+          const startEventId = result.event_id;
+
+          const path = `/rooms/${encodeURIComponent(room.roomId)}/context/${encodeURIComponent(
+            startEventId
+          )}`;
+          const eventContext = await mx.http.authedRequest<IContextResponse>(Method.Get, path, {
+            limit: 0,
+          });
+
+          let token: string | undefined = eventContext.start;
+          while (token) {
+            // eslint-disable-next-line no-await-in-loop
+            const response = await mx.createMessagesRequest(
+              room.roomId,
+              token,
+              20,
+              Direction.Forward,
+              undefined
+            );
+            const { end, chunk } = response;
+            // remove until the latest event;
+            token = end;
+
+            const eventsToDelete = chunk.filter(
+              (roomEvent) =>
+                (messageTypes.length > 0 ? messageTypes.includes(roomEvent.type) : true) &&
+                users.includes(roomEvent.sender) &&
+                roomEvent.unsigned?.redacted_because === undefined
+            );
+
+            const eventIds = eventsToDelete.map((roomEvent) => roomEvent.event_id);
+
+            // eslint-disable-next-line no-await-in-loop
+            await rateLimitedActions(eventIds, (eventId) =>
+              mx.redactEvent(room.roomId, eventId, undefined, { reason })
+            );
+          }
+        },
+      },
+      [Command.Acl]: {
+        name: Command.Acl,
+        description:
+          'Manage server access control list. Example /acl [-a servername1] [-d servername2] [-ra servername1] [-rd servername2]',
+        exe: async (payload) => {
+          const [, flags] = splitPayloadContentAndFlags(payload);
+
+          const flagToContent = parseFlags(flags);
+          const allowFlag = flagToContent.a;
+          const denyFlag = flagToContent.d;
+          const removeAllowFlag = flagToContent.ra;
+          const removeDenyFlag = flagToContent.rd;
+
+          const allowList = allowFlag ? splitWithSpace(allowFlag) : [];
+          const denyList = denyFlag ? splitWithSpace(denyFlag) : [];
+          const removeAllowList = removeAllowFlag ? splitWithSpace(removeAllowFlag) : [];
+          const removeDenyList = removeDenyFlag ? splitWithSpace(removeDenyFlag) : [];
+
+          const serverAcl = getStateEvent(
+            room,
+            StateEvent.RoomServerAcl
+          )?.getContent<RoomServerAclEventContent>();
+
+          const aclContent: RoomServerAclEventContent = {
+            allow: serverAcl?.allow ? [...serverAcl.allow] : [],
+            allow_ip_literals: serverAcl?.allow_ip_literals,
+            deny: serverAcl?.deny ? [...serverAcl.deny] : [],
+          };
+
+          allowList.forEach((servername) => {
+            if (!Array.isArray(aclContent.allow) || aclContent.allow.includes(servername)) return;
+            aclContent.allow.push(servername);
+          });
+          denyList.forEach((servername) => {
+            if (!Array.isArray(aclContent.deny) || aclContent.deny.includes(servername)) return;
+            aclContent.deny.push(servername);
+          });
+
+          aclContent.allow = aclContent.allow?.filter(
+            (servername) => !removeAllowList.includes(servername)
+          );
+          aclContent.deny = aclContent.deny?.filter(
+            (servername) => !removeDenyList.includes(servername)
+          );
+
+          aclContent.allow?.sort();
+          aclContent.deny?.sort();
+
+          await mx.sendStateEvent(room.roomId, StateEvent.RoomServerAcl as any, aclContent);
         },
       },
     }),
diff --git a/src/app/hooks/useDateFormat.ts b/src/app/hooks/useDateFormat.ts
new file mode 100644
index 00000000..520d4b0d
--- /dev/null
+++ b/src/app/hooks/useDateFormat.ts
@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { DateFormat } from '../state/settings';
+
+export type DateFormatItem = {
+  name: string;
+  format: DateFormat;
+};
+
+export const useDateFormatItems = (): DateFormatItem[] =>
+  useMemo(
+    () => [
+      {
+        format: 'D MMM YYYY',
+        name: 'D MMM YYYY',
+      },
+      {
+        format: 'DD/MM/YYYY',
+        name: 'DD/MM/YYYY',
+      },
+      {
+        format: 'MM/DD/YYYY',
+        name: 'MM/DD/YYYY',
+      },
+      {
+        format: 'YYYY/MM/DD',
+        name: 'YYYY/MM/DD',
+      },
+      {
+        format: '',
+        name: 'Custom',
+      },
+    ],
+    []
+  );
diff --git a/src/app/hooks/useDeviceList.ts b/src/app/hooks/useDeviceList.ts
index 5586ae8d..f89cb3d9 100644
--- a/src/app/hooks/useDeviceList.ts
+++ b/src/app/hooks/useDeviceList.ts
@@ -1,7 +1,7 @@
 import { useEffect, useCallback, useMemo } from 'react';
 import { IMyDevice } from 'matrix-js-sdk';
 import { useQuery } from '@tanstack/react-query';
-import { CryptoEvent, CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto';
+import { CryptoEvent, CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto-api';
 import { useMatrixClient } from './useMatrixClient';
 
 export const useDeviceListChange = (
diff --git a/src/app/hooks/useDirectUsers.ts b/src/app/hooks/useDirectUsers.ts
new file mode 100644
index 00000000..3aa18928
--- /dev/null
+++ b/src/app/hooks/useDirectUsers.ts
@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { AccountDataEvent, MDirectContent } from '../../types/matrix/accountData';
+import { useAccountData } from './useAccountData';
+import { useAllJoinedRoomsSet, useGetRoom } from './useGetRoom';
+
+export const useDirectUsers = (): string[] => {
+  const directEvent = useAccountData(AccountDataEvent.Direct);
+  const content = directEvent?.getContent<MDirectContent>();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+
+  const users = useMemo(() => {
+    if (typeof content !== 'object') return [];
+
+    const u = Object.keys(content).filter((userId) => {
+      const rooms = content[userId];
+      if (!Array.isArray(rooms)) return false;
+      const hasDM = rooms.some((roomId) => typeof roomId === 'string' && !!getRoom(roomId));
+      return hasDM;
+    });
+
+    return u;
+  }, [content, getRoom]);
+
+  return users;
+};
diff --git a/src/app/hooks/useListFocusIndex.ts b/src/app/hooks/useListFocusIndex.ts
new file mode 100644
index 00000000..e4f3bf2c
--- /dev/null
+++ b/src/app/hooks/useListFocusIndex.ts
@@ -0,0 +1,36 @@
+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/useMemberPowerCompare.ts b/src/app/hooks/useMemberPowerCompare.ts
new file mode 100644
index 00000000..72163edf
--- /dev/null
+++ b/src/app/hooks/useMemberPowerCompare.ts
@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { IPowerLevels, readPowerLevel } from './usePowerLevels';
+
+export const useMemberPowerCompare = (creators: Set<string>, powerLevels: IPowerLevels) => {
+  /**
+   * returns `true` if `userIdA` has more power than `userIdB`
+   * returns `false` otherwise
+   */
+  const hasMorePower = useCallback(
+    (userIdA: string, userIdB: string): boolean => {
+      const aIsCreator = creators.has(userIdA);
+      const bIsCreator = creators.has(userIdB);
+      if (aIsCreator && bIsCreator) return false;
+      if (aIsCreator) return true;
+      if (bIsCreator) return false;
+
+      const aPower = readPowerLevel.user(powerLevels, userIdA);
+      const bPower = readPowerLevel.user(powerLevels, userIdB);
+
+      return aPower > bPower;
+    },
+    [creators, powerLevels]
+  );
+
+  return {
+    hasMorePower,
+  };
+};
diff --git a/src/app/hooks/useMemberPowerTag.ts b/src/app/hooks/useMemberPowerTag.ts
new file mode 100644
index 00000000..31e52aa0
--- /dev/null
+++ b/src/app/hooks/useMemberPowerTag.ts
@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from 'react';
+import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
+import { getPowerLevelTag, PowerLevelTags, usePowerLevelTags } from './usePowerLevelTags';
+import { IPowerLevels, readPowerLevel } from './usePowerLevels';
+import { MemberPowerTag, MemberPowerTagIcon } from '../../types/matrix/room';
+import { useRoomCreatorsTag } from './useRoomCreatorsTag';
+import { ThemeKind } from './useTheme';
+import { accessibleColor } from '../plugins/color';
+
+export type GetMemberPowerTag = (userId: string) => MemberPowerTag;
+
+export const useGetMemberPowerTag = (
+  room: Room,
+  creators: Set<string>,
+  powerLevels: IPowerLevels
+) => {
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+
+  const getMemberPowerTag: GetMemberPowerTag = useCallback(
+    (userId) => {
+      if (creators.has(userId)) {
+        return creatorsTag;
+      }
+
+      const power = readPowerLevel.user(powerLevels, userId);
+      return getPowerLevelTag(powerLevelTags, power);
+    },
+    [creators, creatorsTag, powerLevels, powerLevelTags]
+  );
+
+  return getMemberPowerTag;
+};
+
+export const getPowerTagIconSrc = (
+  mx: MatrixClient,
+  useAuthentication: boolean,
+  icon: MemberPowerTagIcon
+): string | undefined =>
+  icon?.key?.startsWith('mxc://')
+    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
+    : icon?.key;
+
+export const useAccessiblePowerTagColors = (
+  themeKind: ThemeKind,
+  creatorsTag: MemberPowerTag,
+  powerLevelTags: PowerLevelTags
+): Map<string, string> => {
+  const accessibleColors: Map<string, string> = useMemo(() => {
+    const colors: Map<string, string> = new Map();
+    if (creatorsTag.color) {
+      colors.set(creatorsTag.color, accessibleColor(themeKind, creatorsTag.color));
+    }
+
+    Object.values(powerLevelTags).forEach((tag) => {
+      const { color } = tag;
+      if (!color) return;
+
+      colors.set(color, accessibleColor(themeKind, color));
+    });
+
+    return colors;
+  }, [powerLevelTags, creatorsTag, themeKind]);
+
+  return accessibleColors;
+};
+
+export const useFlattenPowerTagMembers = (
+  members: RoomMember[],
+  getTag: GetMemberPowerTag
+): Array<MemberPowerTag | RoomMember> => {
+  const PLTagOrRoomMember = useMemo(() => {
+    let prevTag: MemberPowerTag | undefined;
+    const tagOrMember: Array<MemberPowerTag | RoomMember> = [];
+    members.forEach((member) => {
+      const tag = getTag(member.userId);
+      if (tag !== prevTag) {
+        prevTag = tag;
+        tagOrMember.push(tag);
+      }
+      tagOrMember.push(member);
+    });
+    return tagOrMember;
+  }, [members, getTag]);
+
+  return PLTagOrRoomMember;
+};
diff --git a/src/app/hooks/useMemberSort.ts b/src/app/hooks/useMemberSort.ts
index da955701..d8e403c5 100644
--- a/src/app/hooks/useMemberSort.ts
+++ b/src/app/hooks/useMemberSort.ts
@@ -1,5 +1,5 @@
 import { RoomMember } from 'matrix-js-sdk';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 export const MemberSort = {
   Ascending: (a: RoomMember, b: RoomMember) =>
@@ -46,3 +46,20 @@ export const useMemberSort = (index: number, memberSort: MemberSortItem[]): Memb
   const item = memberSort[index] ?? memberSort[0];
   return item;
 };
+
+export const useMemberPowerSort = (creators: Set<string>): MemberSortFn => {
+  const sort: MemberSortFn = useCallback(
+    (a, b) => {
+      if (creators.has(a.userId) && creators.has(b.userId)) {
+        return 0;
+      }
+      if (creators.has(a.userId)) return -1;
+      if (creators.has(b.userId)) return 1;
+
+      return b.powerLevel - a.powerLevel;
+    },
+    [creators]
+  );
+
+  return sort;
+};
diff --git a/src/app/hooks/useMembership.ts b/src/app/hooks/useMembership.ts
new file mode 100644
index 00000000..dbdd527e
--- /dev/null
+++ b/src/app/hooks/useMembership.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { Room, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
+import { Membership } from '../../types/matrix/room';
+
+export const useMembership = (room: Room, userId: string): Membership => {
+  const member = room.getMember(userId);
+
+  const [membership, setMembership] = useState<Membership>(
+    () => (member?.membership as Membership | undefined) ?? Membership.Leave
+  );
+
+  useEffect(() => {
+    const handleMembershipChange: RoomMemberEventHandlerMap[RoomMemberEvent.Membership] = (
+      event,
+      m
+    ) => {
+      if (event.getRoomId() === room.roomId && m.userId === userId) {
+        setMembership((m.membership as Membership | undefined) ?? Membership.Leave);
+      }
+    };
+    member?.on(RoomMemberEvent.Membership, handleMembershipChange);
+    return () => {
+      member?.removeListener(RoomMemberEvent.Membership, handleMembershipChange);
+    };
+  }, [room, member, userId]);
+
+  return membership;
+};
diff --git a/src/app/hooks/useMentionClickHandler.ts b/src/app/hooks/useMentionClickHandler.ts
index 49c291c7..9dc81d4e 100644
--- a/src/app/hooks/useMentionClickHandler.ts
+++ b/src/app/hooks/useMentionClickHandler.ts
@@ -3,14 +3,17 @@ import { useNavigate } from 'react-router-dom';
 import { useRoomNavigate } from './useRoomNavigate';
 import { useMatrixClient } from './useMatrixClient';
 import { isRoomId, isUserId } from '../utils/matrix';
-import { openProfileViewer } from '../../client/action/navigation';
 import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
 import { _RoomSearchParams } from '../pages/paths';
+import { useOpenUserRoomProfile } from '../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from './useSpace';
 
 export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
   const mx = useMatrixClient();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const navigate = useNavigate();
+  const openProfile = useOpenUserRoomProfile();
+  const space = useSpaceOptionally();
 
   const handleClick: ReactEventHandler<HTMLElement> = useCallback(
     (evt) => {
@@ -21,7 +24,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
       if (typeof mentionId !== 'string') return;
 
       if (isUserId(mentionId)) {
-        openProfileViewer(mentionId, roomId);
+        openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
         return;
       }
 
@@ -37,7 +40,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
       navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
     },
-    [mx, navigate, navigateRoom, navigateSpace, roomId]
+    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
   );
 
   return handleClick;
diff --git a/src/app/hooks/useMutualRooms.ts b/src/app/hooks/useMutualRooms.ts
new file mode 100644
index 00000000..a7b38938
--- /dev/null
+++ b/src/app/hooks/useMutualRooms.ts
@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+import { AsyncState, useAsyncCallbackValue } from './useAsyncCallback';
+import { useSpecVersions } from './useSpecVersions';
+
+export const useMutualRoomsSupport = (): boolean => {
+  const { unstable_features: unstableFeatures } = useSpecVersions();
+
+  const supported =
+    unstableFeatures?.['uk.half-shot.msc2666'] ||
+    unstableFeatures?.['uk.half-shot.msc2666.mutual_rooms'] ||
+    unstableFeatures?.['uk.half-shot.msc2666.query_mutual_rooms'];
+
+  return !!supported;
+};
+
+export const useMutualRooms = (userId: string): AsyncState<string[], unknown> => {
+  const mx = useMatrixClient();
+
+  const supported = useMutualRoomsSupport();
+
+  const [mutualRoomsState] = useAsyncCallbackValue(
+    useCallback(
+      () => (supported ? mx._unstable_getSharedRooms(userId) : Promise.resolve([])),
+      [mx, userId, supported]
+    )
+  );
+
+  return mutualRoomsState;
+};
diff --git a/src/app/hooks/usePowerLevelTags.ts b/src/app/hooks/usePowerLevelTags.ts
index bdcb9bcc..0a6cca50 100644
--- a/src/app/hooks/usePowerLevelTags.ts
+++ b/src/app/hooks/usePowerLevelTags.ts
@@ -1,29 +1,24 @@
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import { useCallback, useMemo } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { useMemo } from 'react';
 import { IPowerLevels } from './usePowerLevels';
 import { useStateEvent } from './useStateEvent';
-import { StateEvent } from '../../types/matrix/room';
-import { IImageInfo } from '../../types/matrix/common';
-import { ThemeKind } from './useTheme';
-import { accessibleColor } from '../plugins/color';
+import { MemberPowerTag, StateEvent } from '../../types/matrix/room';
 
-export type PowerLevelTagIcon = {
-  key?: string;
-  info?: IImageInfo;
-};
-export type PowerLevelTag = {
-  name: string;
-  color?: string;
-  icon?: PowerLevelTagIcon;
-};
+export type PowerLevelTags = Record<number, MemberPowerTag>;
 
-export type PowerLevelTags = Record<number, PowerLevelTag>;
-
-export const powerSortFn = (a: number, b: number) => b - a;
-export const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
+const powerSortFn = (a: number, b: number) => b - a;
+const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
 
 export const getPowers = (tags: PowerLevelTags): number[] => {
-  const powers: number[] = Object.keys(tags).map((p) => parseInt(p, 10));
+  const powers: number[] = Object.keys(tags)
+    .map((p) => {
+      const power = parseInt(p, 10);
+      if (Number.isNaN(power)) {
+        return undefined;
+      }
+      return power;
+    })
+    .filter((power) => typeof power === 'number');
 
   return sortPowers(powers);
 };
@@ -55,8 +50,8 @@ const DEFAULT_TAGS: PowerLevelTags = {
     name: 'Goku',
     color: '#ff6a00',
   },
-  102: {
-    name: 'Goku Reborn',
+  150: {
+    name: 'Manager',
     color: '#ff6a7f',
   },
   101: {
@@ -81,7 +76,7 @@ const DEFAULT_TAGS: PowerLevelTags = {
   },
 };
 
-const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): PowerLevelTag => {
+const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): MemberPowerTag => {
   const highToLow = sortPowers(getPowers(powerLevelTags));
 
   const tagPower = highToLow.find((p) => p < power);
@@ -92,12 +87,7 @@ const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): Pow
   };
 };
 
-export type GetPowerLevelTag = (powerLevel: number) => PowerLevelTag;
-
-export const usePowerLevelTags = (
-  room: Room,
-  powerLevels: IPowerLevels
-): [PowerLevelTags, GetPowerLevelTag] => {
+export const usePowerLevelTags = (room: Room, powerLevels: IPowerLevels): PowerLevelTags => {
   const tagsEvent = useStateEvent(room, StateEvent.PowerLevelTags);
 
   const powerLevelTags: PowerLevelTags = useMemo(() => {
@@ -114,66 +104,13 @@ export const usePowerLevelTags = (
     return powerToTags;
   }, [powerLevels, tagsEvent]);
 
-  const getTag: GetPowerLevelTag = useCallback(
-    (power) => {
-      const tag: PowerLevelTag | undefined = powerLevelTags[power];
-      return tag ?? generateFallbackTag(DEFAULT_TAGS, power);
-    },
-    [powerLevelTags]
-  );
-
-  return [powerLevelTags, getTag];
+  return powerLevelTags;
 };
 
-export const useFlattenPowerLevelTagMembers = (
-  members: RoomMember[],
-  getPowerLevel: (userId: string) => number,
-  getTag: GetPowerLevelTag
-): Array<PowerLevelTag | RoomMember> => {
-  const PLTagOrRoomMember = useMemo(() => {
-    let prevTag: PowerLevelTag | undefined;
-    const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
-    members.forEach((member) => {
-      const memberPL = getPowerLevel(member.userId);
-      const tag = getTag(memberPL);
-      if (tag !== prevTag) {
-        prevTag = tag;
-        tagOrMember.push(tag);
-      }
-      tagOrMember.push(member);
-    });
-    return tagOrMember;
-  }, [members, getTag, getPowerLevel]);
-
-  return PLTagOrRoomMember;
-};
-
-export const getTagIconSrc = (
-  mx: MatrixClient,
-  useAuthentication: boolean,
-  icon: PowerLevelTagIcon
-): string | undefined =>
-  icon?.key?.startsWith('mxc://')
-    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
-    : icon?.key;
-
-export const useAccessibleTagColors = (
-  themeKind: ThemeKind,
-  powerLevelTags: PowerLevelTags
-): Map<string, string> => {
-  const accessibleColors: Map<string, string> = useMemo(() => {
-    const colors: Map<string, string> = new Map();
-
-    getPowers(powerLevelTags).forEach((power) => {
-      const tag = powerLevelTags[power];
-      const { color } = tag;
-      if (!color) return;
-
-      colors.set(color, accessibleColor(themeKind, color));
-    });
-
-    return colors;
-  }, [powerLevelTags, themeKind]);
-
-  return accessibleColors;
+export const getPowerLevelTag = (
+  powerLevelTags: PowerLevelTags,
+  powerLevel: number
+): MemberPowerTag => {
+  const tag: MemberPowerTag | undefined = powerLevelTags[powerLevel];
+  return tag ?? generateFallbackTag(powerLevelTags, powerLevel);
 };
diff --git a/src/app/hooks/usePowerLevels.ts b/src/app/hooks/usePowerLevels.ts
index 8bf8b747..0281b23c 100644
--- a/src/app/hooks/usePowerLevels.ts
+++ b/src/app/hooks/usePowerLevels.ts
@@ -58,10 +58,11 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
   });
 
 const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
-  const pl = mEvent?.getContent<IPowerLevels>();
-  if (!pl) return DEFAULT_POWER_LEVELS;
+  const plContent = mEvent?.getContent<IPowerLevels>();
 
-  return fillMissingPowers(pl);
+  const powerLevels = !plContent ? DEFAULT_POWER_LEVELS : fillMissingPowers(plContent);
+
+  return powerLevels;
 };
 
 export function usePowerLevels(room: Room): IPowerLevels {
@@ -120,33 +121,8 @@ export const useRoomsPowerLevels = (rooms: Room[]): Map<string, IPowerLevels> =>
   return roomToPowerLevels;
 };
 
-export type GetPowerLevel = (powerLevels: IPowerLevels, userId: string | undefined) => number;
-export type CanSend = (
-  powerLevels: IPowerLevels,
-  eventType: string | undefined,
-  powerLevel: number
-) => boolean;
-export type CanDoAction = (
-  powerLevels: IPowerLevels,
-  action: PowerLevelActions,
-  powerLevel: number
-) => boolean;
-export type CanDoNotificationAction = (
-  powerLevels: IPowerLevels,
-  action: PowerLevelNotificationsAction,
-  powerLevel: number
-) => boolean;
-
-export type PowerLevelsAPI = {
-  getPowerLevel: GetPowerLevel;
-  canSendEvent: CanSend;
-  canSendStateEvent: CanSend;
-  canDoAction: CanDoAction;
-  canDoNotificationAction: CanDoNotificationAction;
-};
-
 export type ReadPowerLevelAPI = {
-  user: GetPowerLevel;
+  user: (powerLevels: IPowerLevels, userId: string | undefined) => number;
   event: (powerLevels: IPowerLevels, eventType: string | undefined) => number;
   state: (powerLevels: IPowerLevels, eventType: string | undefined) => number;
   action: (powerLevels: IPowerLevels, action: PowerLevelActions) => number;
@@ -156,6 +132,7 @@ export type ReadPowerLevelAPI = {
 export const readPowerLevel: ReadPowerLevelAPI = {
   user: (powerLevels, userId) => {
     const { users_default: usersDefault, users } = powerLevels;
+
     if (userId && users && typeof users[userId] === 'number') {
       return users[userId];
     }
@@ -191,63 +168,13 @@ export const readPowerLevel: ReadPowerLevelAPI = {
   },
 };
 
-export const powerLevelAPI: PowerLevelsAPI = {
-  getPowerLevel: (powerLevels, userId) => readPowerLevel.user(powerLevels, userId),
-  canSendEvent: (powerLevels, eventType, powerLevel) => {
-    const requiredPL = readPowerLevel.event(powerLevels, eventType);
-    return powerLevel >= requiredPL;
-  },
-  canSendStateEvent: (powerLevels, eventType, powerLevel) => {
-    const requiredPL = readPowerLevel.state(powerLevels, eventType);
-    return powerLevel >= requiredPL;
-  },
-  canDoAction: (powerLevels, action, powerLevel) => {
-    const requiredPL = readPowerLevel.action(powerLevels, action);
-    return powerLevel >= requiredPL;
-  },
-  canDoNotificationAction: (powerLevels, action, powerLevel) => {
-    const requiredPL = readPowerLevel.notification(powerLevels, action);
-    return powerLevel >= requiredPL;
-  },
-};
-
-export const usePowerLevelsAPI = (powerLevels: IPowerLevels) => {
-  const getPowerLevel = useCallback(
-    (userId: string | undefined) => powerLevelAPI.getPowerLevel(powerLevels, userId),
+export const useGetMemberPowerLevel = (powerLevels: IPowerLevels) => {
+  const callback = useCallback(
+    (userId?: string): number => readPowerLevel.user(powerLevels, userId),
     [powerLevels]
   );
 
-  const canSendEvent = useCallback(
-    (eventType: string | undefined, powerLevel: number) =>
-      powerLevelAPI.canSendEvent(powerLevels, eventType, powerLevel),
-    [powerLevels]
-  );
-
-  const canSendStateEvent = useCallback(
-    (eventType: string | undefined, powerLevel: number) =>
-      powerLevelAPI.canSendStateEvent(powerLevels, eventType, powerLevel),
-    [powerLevels]
-  );
-
-  const canDoAction = useCallback(
-    (action: PowerLevelActions, powerLevel: number) =>
-      powerLevelAPI.canDoAction(powerLevels, action, powerLevel),
-    [powerLevels]
-  );
-
-  const canDoNotificationAction = useCallback(
-    (action: PowerLevelNotificationsAction, powerLevel: number) =>
-      powerLevelAPI.canDoNotificationAction(powerLevels, action, powerLevel),
-    [powerLevels]
-  );
-
-  return {
-    getPowerLevel,
-    canSendEvent,
-    canSendStateEvent,
-    canDoAction,
-    canDoNotificationAction,
-  };
+  return callback;
 };
 
 /**
diff --git a/src/app/hooks/useReportRoomSupported.ts b/src/app/hooks/useReportRoomSupported.ts
new file mode 100644
index 00000000..198172cd
--- /dev/null
+++ b/src/app/hooks/useReportRoomSupported.ts
@@ -0,0 +1,10 @@
+import { useSpecVersions } from './useSpecVersions';
+
+export const useReportRoomSupported = (): boolean => {
+  const { versions, unstable_features: unstableFeatures } = useSpecVersions();
+
+  // report room is introduced in spec version 1.13
+  const supported = unstableFeatures?.['org.matrix.msc4151'] || versions.includes('v1.13');
+
+  return supported;
+};
diff --git a/src/app/hooks/useRoomCreators.ts b/src/app/hooks/useRoomCreators.ts
new file mode 100644
index 00000000..269d11af
--- /dev/null
+++ b/src/app/hooks/useRoomCreators.ts
@@ -0,0 +1,49 @@
+import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
+import { useMemo } from 'react';
+import { useStateEvent } from './useStateEvent';
+import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
+import { creatorsSupported } from '../utils/matrix';
+import { getStateEvent } from '../utils/room';
+
+export const getRoomCreators = (createEvent: MatrixEvent): Set<string> => {
+  const createContent = createEvent.getContent<IRoomCreateContent>();
+
+  const creators: Set<string> = new Set();
+
+  if (!creatorsSupported(createContent.room_version)) return creators;
+
+  if (createEvent.event.sender) {
+    creators.add(createEvent.event.sender);
+  }
+
+  if ('additional_creators' in createContent && Array.isArray(createContent.additional_creators)) {
+    createContent.additional_creators.forEach((creator) => {
+      if (typeof creator === 'string') {
+        creators.add(creator);
+      }
+    });
+  }
+
+  return creators;
+};
+
+export const useRoomCreators = (room: Room): Set<string> => {
+  const createEvent = useStateEvent(room, StateEvent.RoomCreate);
+
+  const creators = useMemo(
+    () => (createEvent ? getRoomCreators(createEvent) : new Set<string>()),
+    [createEvent]
+  );
+
+  return creators;
+};
+
+export const getRoomCreatorsForRoomId = (mx: MatrixClient, roomId: string): Set<string> => {
+  const room = mx.getRoom(roomId);
+  if (!room) return new Set();
+
+  const createEvent = getStateEvent(room, StateEvent.RoomCreate);
+  if (!createEvent) return new Set();
+
+  return getRoomCreators(createEvent);
+};
diff --git a/src/app/hooks/useRoomCreatorsTag.ts b/src/app/hooks/useRoomCreatorsTag.ts
new file mode 100644
index 00000000..2d6db0ec
--- /dev/null
+++ b/src/app/hooks/useRoomCreatorsTag.ts
@@ -0,0 +1,8 @@
+import { MemberPowerTag } from '../../types/matrix/room';
+
+const DEFAULT_TAG: MemberPowerTag = {
+  name: 'Founder',
+  color: '#0000ff',
+};
+
+export const useRoomCreatorsTag = (): MemberPowerTag => DEFAULT_TAG;
diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts
index 0f9f365c..b2d7a91a 100644
--- a/src/app/hooks/useRoomNavigate.ts
+++ b/src/app/hooks/useRoomNavigate.ts
@@ -9,10 +9,12 @@ import {
   getSpaceRoomPath,
 } from '../pages/pathUtils';
 import { useMatrixClient } from './useMatrixClient';
-import { getOrphanParents } from '../utils/room';
+import { getOrphanParents, guessPerfectParent } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
 import { useSelectedSpace } from './router/useSelectedSpace';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings';
 
 export const useRoomNavigate = () => {
   const navigate = useNavigate();
@@ -20,6 +22,7 @@ export const useRoomNavigate = () => {
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const spaceSelectedId = useSelectedSpace();
+  const [developerTools] = useSetting(settingsAtom, 'developerTools');
 
   const navigateSpace = useCallback(
     (roomId: string) => {
@@ -32,16 +35,23 @@ export const useRoomNavigate = () => {
   const navigateRoom = useCallback(
     (roomId: string, eventId?: string, opts?: NavigateOptions) => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
+      const openSpaceTimeline = developerTools && spaceSelectedId === roomId;
 
-      const orphanParents = getOrphanParents(roomToParents, roomId);
+      const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId);
       if (orphanParents.length > 0) {
-        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(
-          mx,
-          spaceSelectedId && orphanParents.includes(spaceSelectedId)
-            ? spaceSelectedId
-            : orphanParents[0]
+        let parentSpace: string;
+        if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) {
+          parentSpace = spaceSelectedId;
+        } else {
+          parentSpace = guessPerfectParent(mx, roomId, orphanParents) ?? orphanParents[0];
+        }
+
+        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace);
+
+        navigate(
+          getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId),
+          opts
         );
-        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts);
         return;
       }
 
@@ -52,7 +62,7 @@ export const useRoomNavigate = () => {
 
       navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
     },
-    [mx, navigate, spaceSelectedId, roomToParents, mDirects]
+    [mx, navigate, spaceSelectedId, roomToParents, mDirects, developerTools]
   );
 
   return {
diff --git a/src/app/hooks/useRoomPermissions.ts b/src/app/hooks/useRoomPermissions.ts
new file mode 100644
index 00000000..cb6f69a2
--- /dev/null
+++ b/src/app/hooks/useRoomPermissions.ts
@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import {
+  IPowerLevels,
+  PowerLevelActions,
+  PowerLevelNotificationsAction,
+  readPowerLevel,
+} from './usePowerLevels';
+
+export type RoomPermissionsAPI = {
+  event: (type: string, userId: string) => boolean;
+  stateEvent: (type: string, userId: string) => boolean;
+  action: (action: PowerLevelActions, userId: string) => boolean;
+  notificationAction: (action: PowerLevelNotificationsAction, userId: string) => boolean;
+};
+
+export const getRoomPermissionsAPI = (
+  creators: Set<string>,
+  powerLevels: IPowerLevels
+): RoomPermissionsAPI => {
+  const api: RoomPermissionsAPI = {
+    event: (type, userId) => {
+      if (creators.has(userId)) return true;
+      const userPower = readPowerLevel.user(powerLevels, userId);
+      const requiredPL = readPowerLevel.event(powerLevels, type);
+      return userPower >= requiredPL;
+    },
+    stateEvent: (type, userId) => {
+      if (creators.has(userId)) return true;
+      const userPower = readPowerLevel.user(powerLevels, userId);
+      const requiredPL = readPowerLevel.state(powerLevels, type);
+      return userPower >= requiredPL;
+    },
+    action: (action, userId) => {
+      if (creators.has(userId)) return true;
+      const userPower = readPowerLevel.user(powerLevels, userId);
+      const requiredPL = readPowerLevel.action(powerLevels, action);
+      return userPower >= requiredPL;
+    },
+    notificationAction: (action, userId) => {
+      if (creators.has(userId)) return true;
+      const userPower = readPowerLevel.user(powerLevels, userId);
+      const requiredPL = readPowerLevel.notification(powerLevels, action);
+      return userPower >= requiredPL;
+    },
+  };
+
+  return api;
+};
+
+export const useRoomPermissions = (
+  creators: Set<string>,
+  powerLevels: IPowerLevels
+): RoomPermissionsAPI => {
+  const api: RoomPermissionsAPI = useMemo(
+    () => getRoomPermissionsAPI(creators, powerLevels),
+    [creators, powerLevels]
+  );
+
+  return api;
+};
diff --git a/src/app/hooks/useTimeoutToggle.ts b/src/app/hooks/useTimeoutToggle.ts
new file mode 100644
index 00000000..7eda99c1
--- /dev/null
+++ b/src/app/hooks/useTimeoutToggle.ts
@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Temporarily sets a boolean state.
+ *
+ * @param duration - Duration in milliseconds before resetting (default: 1500)
+ * @param initial - Initial value (default: false)
+ */
+export function useTimeoutToggle(duration = 1500, initial = false): [boolean, () => void] {
+  const [active, setActive] = useState(initial);
+  const timeoutRef = useRef<number | null>(null);
+
+  const clear = () => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  const trigger = useCallback(() => {
+    setActive(!initial);
+    clear();
+    timeoutRef.current = window.setTimeout(() => {
+      setActive(initial);
+      timeoutRef.current = null;
+    }, duration);
+  }, [duration, initial]);
+
+  useEffect(
+    () => () => {
+      clear();
+    },
+    []
+  );
+
+  return [active, trigger];
+}
diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts
new file mode 100644
index 00000000..5137950e
--- /dev/null
+++ b/src/app/hooks/useUserPresence.ts
@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from 'react';
+import { User, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
+import { useMatrixClient } from './useMatrixClient';
+
+export enum Presence {
+  Online = 'online',
+  Unavailable = 'unavailable',
+  Offline = 'offline',
+}
+
+export type UserPresence = {
+  presence: Presence;
+  status?: string;
+  active: boolean;
+  lastActiveTs?: number;
+};
+
+const getUserPresence = (user: User): UserPresence => ({
+  presence: user.presence as Presence,
+  status: user.presenceStatusMsg,
+  active: user.currentlyActive,
+  lastActiveTs: user.getLastActiveTs(),
+});
+
+export const useUserPresence = (userId: string): UserPresence | undefined => {
+  const mx = useMatrixClient();
+  const user = mx.getUser(userId);
+
+  const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined));
+
+  useEffect(() => {
+    const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => {
+      if (u.userId === user?.userId) {
+        setPresence(getUserPresence(user));
+      }
+    };
+    user?.on(UserEvent.Presence, updatePresence);
+    user?.on(UserEvent.CurrentlyActive, updatePresence);
+    user?.on(UserEvent.LastPresenceTs, updatePresence);
+    return () => {
+      user?.removeListener(UserEvent.Presence, updatePresence);
+      user?.removeListener(UserEvent.CurrentlyActive, updatePresence);
+      user?.removeListener(UserEvent.LastPresenceTs, updatePresence);
+    };
+  }, [user]);
+
+  return presence;
+};
+
+export const usePresenceLabel = (): Record<Presence, string> =>
+  useMemo(
+    () => ({
+      [Presence.Online]: 'Active',
+      [Presence.Unavailable]: 'Busy',
+      [Presence.Offline]: 'Away',
+    }),
+    []
+  );
diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.jsx b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
index 83b967bc..05b8d85f 100644
--- a/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
+++ b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx
@@ -5,7 +5,7 @@ import './SpaceAddExisting.scss';
 
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { joinRuleToIconSrc, getIdServer } from '../../../util/matrixUtil';
+import { joinRuleToIconSrc } from '../../../util/matrixUtil';
 import { Debounce } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
@@ -21,16 +21,17 @@ import Dialog from '../dialog/Dialog';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 
-import { useStore } from '../../hooks/useStore';
 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 mountStore = useStore(roomId);
+  const alive = useAlive();
   const [debounce] = useState(new Debounce());
   const [process, setProcess] = useState(null);
   const [allRoomIds, setAllRoomIds] = useState([]);
@@ -68,14 +69,11 @@ function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
   const handleAdd = async () => {
     setProcess(`Adding ${selected.length} items...`);
 
-    const promises = selected.map((rId) => {
+    await rateLimitedActions(selected, async (rId) => {
       const room = mx.getRoom(rId);
       const via = getViaServers(room);
-      if (via.length === 0) {
-        via.push(getIdServer(rId));
-      }
 
-      return mx.sendStateEvent(
+      await mx.sendStateEvent(
         roomId,
         'm.space.child',
         {
@@ -87,9 +85,7 @@ function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
       );
     });
 
-    mountStore.setItem(true);
-    await Promise.allSettled(promises);
-    if (mountStore.getItem() !== true) return;
+    if (!alive()) return;
 
     const roomIds = onlySpaces ? [...spaces] : [...rooms, ...directs];
     const allIds = roomIds.filter(
diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx
index c5bade69..271c22a9 100644
--- a/src/app/organisms/invite-user/InviteUser.jsx
+++ b/src/app/organisms/invite-user/InviteUser.jsx
@@ -273,7 +273,7 @@ function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
             searchUser(usernameRef.current.value);
           }}
         >
-          <Input value={searchTerm} forwardRef={usernameRef} label="Name or userId" />
+          <Input value={searchTerm} forwardRef={usernameRef} label="Name or userId" autoFocus />
           <Button disabled={isSearching} iconSrc={UserIC} variant="primary" type="submit">
             Search
           </Button>
diff --git a/src/app/organisms/join-alias/JoinAlias.jsx b/src/app/organisms/join-alias/JoinAlias.jsx
index 99cf6e6e..d4e313af 100644
--- a/src/app/organisms/join-alias/JoinAlias.jsx
+++ b/src/app/organisms/join-alias/JoinAlias.jsx
@@ -75,7 +75,7 @@ function JoinAliasContent({ term, requestClose }) {
 
   return (
     <form className="join-alias" onSubmit={handleSubmit}>
-      <Input label="Address" value={term} name="alias" required />
+      <Input label="Address" value={term} name="alias" required autoFocus />
       {error && (
         <Text className="join-alias__error" variant="b3">
           {error}
diff --git a/src/app/organisms/pw/Dialogs.jsx b/src/app/organisms/pw/Dialogs.jsx
index 7fb18daa..56eb6794 100644
--- a/src/app/organisms/pw/Dialogs.jsx
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -2,7 +2,6 @@ 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';
 
@@ -15,7 +14,6 @@ function Dialogs() {
       <CreateRoom />
       <JoinAlias />
       <SpaceAddExisting />
-      <Search />
 
       <ReusableDialog />
     </>
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 89743693..4c0e2a4a 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -28,6 +28,7 @@ import {
   _ROOM_PATH,
   _SEARCH_PATH,
   _SERVER_PATH,
+  CREATE_PATH,
 } from './paths';
 import { isAuthenticated } from '../../client/state/auth';
 import {
@@ -61,6 +62,12 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
+import { UserRoomProfileRenderer } from '../components/UserRoomProfileRenderer';
+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';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -125,6 +132,10 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                       >
                         <Outlet />
                       </ClientLayout>
+                      <SearchModalRenderer />
+                      <UserRoomProfileRenderer />
+                      <CreateRoomModalRenderer />
+                      <CreateSpaceModalRenderer />
                       <RoomSettingsRenderer />
                       <SpaceSettingsRenderer />
                       <ReceiveSelfDeviceVerification />
@@ -152,7 +163,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           }
         >
           {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<p>create</p>} />
+          <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
           <Route path={_JOIN_PATH} element={<p>join</p>} />
           <Route path={_SEARCH_PATH} element={<HomeSearch />} />
           <Route
@@ -253,6 +264,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           <Route path={_FEATURED_PATH} element={<FeaturedRooms />} />
           <Route path={_SERVER_PATH} element={<PublicRooms />} />
         </Route>
+        <Route path={CREATE_PATH} element={<Create />} />
         <Route
           path={INBOX_PATH}
           element={
diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
index 7e6039a8..69d50cdb 100644
--- a/src/app/pages/ThemeManager.tsx
+++ b/src/app/pages/ThemeManager.tsx
@@ -8,6 +8,8 @@ import {
   useActiveTheme,
   useSystemThemeKind,
 } from '../hooks/useTheme';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
 
 export function UnAuthRouteThemeManager() {
   const systemThemeKind = useSystemThemeKind();
@@ -28,13 +30,20 @@ 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);
-  }, [activeTheme]);
+
+    if (monochromeMode) {
+      document.body.style.filter = 'grayscale(1)';
+    } else {
+      document.body.style.filter = '';
+    }
+  }, [activeTheme, monochromeMode]);
 
   return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
 }
diff --git a/src/app/pages/auth/AuthFooter.tsx b/src/app/pages/auth/AuthFooter.tsx
index 71891a8d..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.6.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/SSOLogin.tsx b/src/app/pages/auth/SSOLogin.tsx
index d0cdaeb6..3ff1a229 100644
--- a/src/app/pages/auth/SSOLogin.tsx
+++ b/src/app/pages/auth/SSOLogin.tsx
@@ -1,19 +1,21 @@
 import { Avatar, AvatarImage, Box, Button, Text } from 'folds';
-import { IIdentityProvider, createClient } from 'matrix-js-sdk';
+import { IIdentityProvider, SSOAction, createClient } from 'matrix-js-sdk';
 import React, { useMemo } from 'react';
 import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
 
 type SSOLoginProps = {
   providers?: IIdentityProvider[];
   redirectUrl: string;
+  action?: SSOAction;
   saveScreenSpace?: boolean;
 };
-export function SSOLogin({ providers, redirectUrl, saveScreenSpace }: SSOLoginProps) {
+export function SSOLogin({ providers, redirectUrl, action, saveScreenSpace }: SSOLoginProps) {
   const discovery = useAutoDiscoveryInfo();
   const baseUrl = discovery['m.homeserver'].base_url;
   const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
 
-  const getSSOIdUrl = (ssoId?: string): string => mx.getSsoLoginUrl(redirectUrl, 'sso', ssoId);
+  const getSSOIdUrl = (ssoId?: string): string =>
+    mx.getSsoLoginUrl(redirectUrl, 'sso', ssoId, action);
 
   const withoutIcon = providers
     ? providers.find(
diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx
index 6b9f1223..2f04a733 100644
--- a/src/app/pages/auth/login/Login.tsx
+++ b/src/app/pages/auth/login/Login.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box, Text, color } from 'folds';
 import { Link, useSearchParams } from 'react-router-dom';
+import { SSOAction } from 'matrix-js-sdk';
 import { useAuthFlows } from '../../../hooks/useAuthFlows';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
@@ -76,6 +77,7 @@ export function Login() {
           <SSOLogin
             providers={parsedFlows.sso.identity_providers}
             redirectUrl={ssoRedirectUrl}
+            action={SSOAction.LOGIN}
             saveScreenSpace={parsedFlows.password !== undefined}
           />
           <span data-spacing-node />
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
index 90c305d0..62f46dd2 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>{' '}
-                johndoe
+                user123
               </Text>
               <Text size="T300">
                 <Text as="span" size="Inherit" priority="300">
                   Matrix ID:
                 </Text>
-                {` @johndoe:${server}`}
+                {` @user123:${server}`}
               </Text>
               <Text size="T300">
                 <Text as="span" size="Inherit" priority="300">
                   Email:
                 </Text>
-                {` johndoe@${server}`}
+                {` user123@${server}`}
               </Text>
             </Box>
           </Menu>
diff --git a/src/app/pages/auth/login/loginUtil.ts b/src/app/pages/auth/login/loginUtil.ts
index 1e2248d9..7e1c7153 100644
--- a/src/app/pages/auth/login/loginUtil.ts
+++ b/src/app/pages/auth/login/loginUtil.ts
@@ -73,7 +73,7 @@ export const login = async (
   }
 
   const mx = createClient({ baseUrl: url });
-  const [err, res] = await to<LoginResponse, MatrixError>(mx.login(data.type, data));
+  const [err, res] = await to<LoginResponse, MatrixError>(mx.loginRequest(data));
 
   if (err) {
     if (err.httpStatus === 400) {
diff --git a/src/app/pages/auth/register/Register.tsx b/src/app/pages/auth/register/Register.tsx
index d2986d70..7176489b 100644
--- a/src/app/pages/auth/register/Register.tsx
+++ b/src/app/pages/auth/register/Register.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box, Text, color } from 'folds';
 import { Link, useSearchParams } from 'react-router-dom';
+import { SSOAction } from 'matrix-js-sdk';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { RegisterFlowStatus, useAuthFlows } from '../../../hooks/useAuthFlows';
 import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
@@ -83,6 +84,7 @@ export function Register() {
           <SSOLogin
             providers={sso.identity_providers}
             redirectUrl={ssoRedirectUrl}
+            action={SSOAction.REGISTER}
             saveScreenSpace={registerFlows.status === RegisterFlowStatus.FlowRequired}
           />
           <span data-spacing-node />
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 846d8ff3..c48dbf53 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -25,7 +25,7 @@ import {
 } from '../../../client/initMatrix';
 import { getSecret } from '../../../client/state/auth';
 import { SplashScreen } from '../../components/splash-screen';
-import { CapabilitiesAndMediaConfigLoader } from '../../components/CapabilitiesAndMediaConfigLoader';
+import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
 import { MediaConfigProvider } from '../../hooks/useMediaConfig';
 import { MatrixClientProvider } from '../../hooks/useMatrixClient';
@@ -37,6 +37,7 @@ 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';
 
 function ClientRootLoading() {
   return (
@@ -207,18 +208,20 @@ export function ClientRoot({ children }: ClientRootProps) {
         <ClientRootLoading />
       ) : (
         <MatrixClientProvider value={mx}>
-          <CapabilitiesAndMediaConfigLoader>
-            {(capabilities, mediaConfig) => (
-              <CapabilitiesProvider value={capabilities ?? {}}>
-                <MediaConfigProvider value={mediaConfig ?? {}}>
-                  {children}
-                  <Windows />
-                  <Dialogs />
-                  <ReusableContextMenu />
+          <ServerConfigsLoader>
+            {(serverConfigs) => (
+              <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>
+                <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
+                  <AuthMetadataProvider value={serverConfigs.authMetadata}>
+                    {children}
+                    <Windows />
+                    <Dialogs />
+                    <ReusableContextMenu />
+                  </AuthMetadataProvider>
                 </MediaConfigProvider>
               </CapabilitiesProvider>
             )}
-          </CapabilitiesAndMediaConfigLoader>
+          </ServerConfigsLoader>
         </MatrixClientProvider>
       )}
     </SpecVersions>
diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index 27759a2d..a2e1b682 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -1,14 +1,11 @@
 import React, { useRef } from 'react';
-import { Icon, Icons, Scroll } from 'folds';
+import { Scroll } from 'folds';
 
 import {
   Sidebar,
   SidebarContent,
   SidebarStackSeparator,
   SidebarStack,
-  SidebarAvatar,
-  SidebarItemTooltip,
-  SidebarItem,
 } from '../../components/sidebar';
 import {
   DirectTab,
@@ -18,8 +15,9 @@ import {
   ExploreTab,
   SettingsTab,
   UnverifiedTab,
+  SearchTab,
 } from './sidebar';
-import { openCreateRoom, openSearch } from '../../../client/action/navigation';
+import { CreateTab } from './sidebar/CreateTab';
 
 export function SidebarNav() {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -37,20 +35,7 @@ export function SidebarNav() {
             <SidebarStackSeparator />
             <SidebarStack>
               <ExploreTab />
-              <SidebarItem>
-                <SidebarItemTooltip tooltip="Create Space">
-                  {(triggerRef) => (
-                    <SidebarAvatar
-                      as="button"
-                      ref={triggerRef}
-                      outlined
-                      onClick={() => openCreateRoom(true)}
-                    >
-                      <Icon src={Icons.Plus} />
-                    </SidebarAvatar>
-                  )}
-                </SidebarItemTooltip>
-              </SidebarItem>
+              <CreateTab />
             </SidebarStack>
           </Scroll>
         }
@@ -58,23 +43,8 @@ export function SidebarNav() {
           <>
             <SidebarStackSeparator />
             <SidebarStack>
-              <SidebarItem>
-                <SidebarItemTooltip tooltip="Search">
-                  {(triggerRef) => (
-                    <SidebarAvatar
-                      as="button"
-                      ref={triggerRef}
-                      outlined
-                      onClick={() => openSearch()}
-                    >
-                      <Icon src={Icons.Search} />
-                    </SidebarAvatar>
-                  )}
-                </SidebarItemTooltip>
-              </SidebarItem>
-
+              <SearchTab />
               <UnverifiedTab />
-
               <InboxTab />
               <SettingsTab />
             </SidebarStack>
diff --git a/src/app/pages/client/WelcomePage.tsx b/src/app/pages/client/WelcomePage.tsx
index d2133adc..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.6.0
+                  v4.9.1
                 </a>
               </span>
             }
diff --git a/src/app/pages/client/create/Create.tsx b/src/app/pages/client/create/Create.tsx
new file mode 100644
index 00000000..288169b6
--- /dev/null
+++ b/src/app/pages/client/create/Create.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, Icon, Icons, Scroll } from 'folds';
+import {
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHero,
+  PageHeroSection,
+} from '../../../components/page';
+import { CreateSpaceForm } from '../../../features/create-space';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+
+export function Create() {
+  const { navigateSpace } = useRoomNavigate();
+
+  return (
+    <Page>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <PageContentCenter>
+              <PageHeroSection>
+                <Box direction="Column" gap="700">
+                  <PageHero
+                    icon={<Icon size="600" src={Icons.Space} />}
+                    title="Create Space"
+                    subTitle="Build a space for your community."
+                  />
+                  <CreateSpaceForm onCreate={navigateSpace} />
+                </Box>
+              </PageHeroSection>
+            </PageContentCenter>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}
diff --git a/src/app/pages/client/create/index.ts b/src/app/pages/client/create/index.ts
new file mode 100644
index 00000000..48cba6e7
--- /dev/null
+++ b/src/app/pages/client/create/index.ts
@@ -0,0 +1 @@
+export * from './Create';
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index b6a8de1a..51de3946 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -17,6 +17,7 @@ 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 {
@@ -28,7 +29,7 @@ import {
   NavItem,
   NavItemContent,
 } from '../../../components/nav';
-import { getDirectRoomPath } from '../../pathUtils';
+import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -38,7 +39,6 @@ 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';
@@ -50,6 +50,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
+import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -138,6 +139,8 @@ function DirectHeader() {
 }
 
 function DirectEmpty() {
+  const navigate = useNavigate();
+
   return (
     <NavEmptyCenter>
       <NavEmptyLayout
@@ -153,7 +156,7 @@ function DirectEmpty() {
           </Text>
         }
         options={
-          <Button variant="Secondary" size="300" onClick={() => openInviteUser()}>
+          <Button variant="Secondary" size="300" onClick={() => navigate(getDirectCreatePath())}>
             <Text size="B300" truncate>
               Direct Message
             </Text>
@@ -172,6 +175,9 @@ 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;
@@ -205,8 +211,8 @@ export function Direct() {
         <PageNavContent scrollRef={scrollRef}>
           <Box direction="Column" gap="300">
             <NavCategory>
-              <NavItem variant="Background" radii="400">
-                <NavButton onClick={() => openInviteUser()}>
+              <NavItem variant="Background" radii="400" aria-selected={createDirectSelected}>
+                <NavButton onClick={() => navigate(getDirectCreatePath())}>
                   <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 3affb9c1..3deb0b6d 100644
--- a/src/app/pages/client/direct/DirectCreate.tsx
+++ b/src/app/pages/client/direct/DirectCreate.tsx
@@ -1,33 +1,75 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { WelcomePage } from '../WelcomePage';
+import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getDirectCreateSearchParams } from '../../pathSearchParam';
-import { getDirectPath, getDirectRoomPath } from '../../pathUtils';
+import { 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 room = getDMRoomFor(mx, userId);
-      const { roomId } = room ?? {};
+      const roomId = getDMRoomFor(mx, userId)?.roomId;
       if (roomId && directs.includes(roomId)) {
         navigate(getDirectRoomPath(roomId), { replace: true });
-      } else {
-        openInviteUser(undefined, userId);
       }
-    } else {
-      navigate(getDirectPath(), { replace: true });
     }
   }, [mx, navigate, directs, userId]);
 
-  return <WelcomePage />;
+  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>
+  );
 }
diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx
index 0c3aed2a..b7b2c7e1 100644
--- a/src/app/pages/client/explore/Explore.tsx
+++ b/src/app/pages/client/explore/Explore.tsx
@@ -342,7 +342,7 @@ export function Explore() {
                 key={server}
                 server={server}
                 selected={server === selectedServer}
-                icon={Icons.Category}
+                icon={Icons.Server}
               />
             ))}
           </NavCategory>
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index d0288ef4..c739e452 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -528,7 +528,7 @@ export function PublicRooms() {
               )}
             </Box>
             <Box grow="Yes" basis="Yes" justifyContent="Center" alignItems="Center" gap="200">
-              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Category} />}
+              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Server} />}
               <Text size="H3" truncate>
                 {server}
               </Text>
diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx
new file mode 100644
index 00000000..fddd75aa
--- /dev/null
+++ b/src/app/pages/client/home/CreateRoom.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Box, Icon, Icons, Scroll, IconButton } from 'folds';
+import {
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHeader,
+  PageHero,
+  PageHeroSection,
+} from '../../../components/page';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { CreateRoomForm } from '../../../features/create-room';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+
+export function HomeCreateRoom() {
+  const screenSize = useScreenSizeContext();
+
+  const { navigateRoom } = useRoomNavigate();
+
+  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.Hash} />}
+                    title="Create Room"
+                    subTitle="Build a Room for Real-Time Conversations."
+                  />
+                  <CreateRoomForm onCreate={navigateRoom} />
+                </Box>
+              </PageHeroSection>
+            </PageContentCenter>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index af4164fd..2597bb73 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -29,10 +29,20 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import { getExplorePath, getHomeRoomPath, getHomeSearchPath } from '../../pathUtils';
+import {
+  encodeSearchParamValueArray,
+  getExplorePath,
+  getHomeCreatePath,
+  getHomeRoomPath,
+  getHomeSearchPath,
+  withSearchParam,
+} from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
-import { useHomeSearchSelected } from '../../../hooks/router/useHomeSelected';
+import {
+  useHomeCreateSelected,
+  useHomeSearchSelected,
+} from '../../../hooks/router/useHomeSelected';
 import { useHomeRooms } from './useHomeRooms';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -41,7 +51,6 @@ import { makeNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
-import { openCreateRoom, openJoinAlias } from '../../../../client/action/navigation';
 import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -53,6 +62,9 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
+import { UseStateProvider } from '../../../components/UseStateProvider';
+import { JoinAddressPrompt } from '../../../components/join-address-prompt';
+import { _RoomSearchParams } from '../../paths';
 
 type HomeMenuProps = {
   requestClose: () => void;
@@ -69,11 +81,6 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
     requestClose();
   };
 
-  const handleJoinAddress = () => {
-    openJoinAlias();
-    requestClose();
-  };
-
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -88,16 +95,6 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
             Mark as Read
           </Text>
         </MenuItem>
-        <MenuItem
-          onClick={handleJoinAddress}
-          size="300"
-          radii="300"
-          after={<Icon size="100" src={Icons.Link} />}
-        >
-          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-            Join with Address
-          </Text>
-        </MenuItem>
       </Box>
     </Menu>
   );
@@ -174,7 +171,7 @@ function HomeEmpty() {
         }
         options={
           <>
-            <Button onClick={() => openCreateRoom()} variant="Secondary" size="300">
+            <Button onClick={() => navigate(getHomeCreatePath())} variant="Secondary" size="300">
               <Text size="B300" truncate>
                 Create Room
               </Text>
@@ -204,8 +201,10 @@ export function Home() {
   const rooms = useHomeRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const navigate = useNavigate();
 
   const selectedRoomId = useSelectedRoom();
+  const createRoomSelected = useHomeCreateSelected();
   const searchSelected = useHomeSearchSelected();
   const noRoomToDisplay = rooms.length === 0;
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
@@ -242,8 +241,8 @@ export function Home() {
         <PageNavContent scrollRef={scrollRef}>
           <Box direction="Column" gap="300">
             <NavCategory>
-              <NavItem variant="Background" radii="400">
-                <NavButton onClick={() => openCreateRoom()}>
+              <NavItem variant="Background" radii="400" aria-selected={createRoomSelected}>
+                <NavButton onClick={() => navigate(getHomeCreatePath())}>
                   <NavItemContent>
                     <Box as="span" grow="Yes" alignItems="Center" gap="200">
                       <Avatar size="200" radii="400">
@@ -258,22 +257,44 @@ export function Home() {
                   </NavItemContent>
                 </NavButton>
               </NavItem>
-              <NavItem variant="Background" radii="400">
-                <NavButton onClick={() => openJoinAlias()}>
-                  <NavItemContent>
-                    <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                      <Avatar size="200" radii="400">
-                        <Icon src={Icons.Link} size="100" />
-                      </Avatar>
-                      <Box as="span" grow="Yes">
-                        <Text as="span" size="Inherit" truncate>
-                          Join with Address
-                        </Text>
-                      </Box>
-                    </Box>
-                  </NavItemContent>
-                </NavButton>
-              </NavItem>
+              <UseStateProvider initial={false}>
+                {(open, setOpen) => (
+                  <>
+                    <NavItem variant="Background" radii="400">
+                      <NavButton onClick={() => setOpen(true)}>
+                        <NavItemContent>
+                          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                            <Avatar size="200" radii="400">
+                              <Icon src={Icons.Link} size="100" />
+                            </Avatar>
+                            <Box as="span" grow="Yes">
+                              <Text as="span" size="Inherit" truncate>
+                                Join with Address
+                              </Text>
+                            </Box>
+                          </Box>
+                        </NavItemContent>
+                      </NavButton>
+                    </NavItem>
+                    {open && (
+                      <JoinAddressPrompt
+                        onCancel={() => setOpen(false)}
+                        onOpen={(roomIdOrAlias, viaServers, eventId) => {
+                          setOpen(false);
+                          const path = getHomeRoomPath(roomIdOrAlias, eventId);
+                          navigate(
+                            viaServers
+                              ? withSearchParam<_RoomSearchParams>(path, {
+                                  viaServers: encodeSearchParamValueArray(viaServers),
+                                })
+                              : path
+                          );
+                        }}
+                      />
+                    )}
+                  </>
+                )}
+              </UseStateProvider>
               <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
                 <NavLink to={getHomeSearchPath()}>
                   <NavItemContent>
diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx
index 686296b7..67d6021a 100644
--- a/src/app/pages/client/inbox/Inbox.tsx
+++ b/src/app/pages/client/inbox/Inbox.tsx
@@ -32,7 +32,7 @@ function InvitesNavItem() {
             </Avatar>
             <Box as="span" grow="Yes">
               <Text as="span" size="Inherit" truncate>
-                Invitations
+                Invites
               </Text>
             </Box>
             {inviteCount > 0 && <UnreadBadge highlight count={inviteCount} />}
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index 8dcfa1c2..20518e56 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -1,8 +1,10 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   Avatar,
+  Badge,
   Box,
   Button,
+  Chip,
   Icon,
   IconButton,
   Icons,
@@ -16,56 +18,149 @@ import {
   config,
 } from 'folds';
 import { useAtomValue } from 'jotai';
+import { RoomTopicEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
-import { useDirectInvites, useRoomInvites, useSpaceInvites } from '../../../state/hooks/inviteList';
+import { MatrixClient, MatrixError, Room } from 'matrix-js-sdk';
+import {
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHeader,
+  PageHero,
+  PageHeroEmpty,
+  PageHeroSection,
+} from '../../../components/page';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { allInvitesAtom } from '../../../state/room-list/inviteList';
-import { mDirectAtom } from '../../../state/mDirectList';
 import { SequenceCard } from '../../../components/sequence-card';
 import {
+  bannedInRooms,
+  getCommonRooms,
   getDirectRoomAvatarUrl,
   getMemberDisplayName,
   getRoomAvatarUrl,
+  getStateEvent,
   isDirectInvite,
+  isSpace,
 } from '../../../utils/room';
 import { nameInitials } from '../../../utils/common';
 import { RoomAvatar } from '../../../components/room-avatar';
-import { addRoomIdToMDirect, getMxIdLocalPart, guessDmRoomUserId } from '../../../utils/matrix';
+import {
+  addRoomIdToMDirect,
+  getMxIdLocalPart,
+  guessDmRoomUserId,
+  rateLimitedActions,
+} from '../../../utils/matrix';
 import { Time } from '../../../components/message';
 import { useElementSizeObserver } from '../../../hooks/useElementSizeObserver';
 import { onEnterOrSpace, stopPropagation } from '../../../utils/keyboard';
 import { RoomTopicViewer } from '../../../components/room-topic-viewer';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-import { useRoomTopic } from '../../../hooks/useRoomMeta';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { StateEvent } from '../../../../types/matrix/room';
+import { testBadWords } from '../../../plugins/bad-words';
+import { allRoomsAtom } from '../../../state/room-list/roomList';
+import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
+import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 
 const COMPACT_CARD_WIDTH = 548;
 
-type InviteCardProps = {
+type InviteData = {
   room: Room;
-  userId: string;
-  direct?: boolean;
-  compact?: boolean;
-  onNavigate: (roomId: string) => void;
+  roomId: string;
+  roomName: string;
+  roomAvatar?: string;
+  roomTopic?: string;
+  roomAlias?: string;
+
+  senderId: string;
+  senderName: string;
+  inviteTs?: number;
+  reason?: string;
+
+  isSpace: boolean;
+  isDirect: boolean;
+  isEncrypted: boolean;
 };
-function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
+
+const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean): InviteData => {
+  const userId = mx.getSafeUserId();
+  const direct = isDirectInvite(room, userId);
+
+  const roomAvatar = direct
+    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+    : getRoomAvatarUrl(mx, room, 96, useAuthentication);
   const roomName = room.name || room.getCanonicalAlias() || room.roomId;
+  const roomTopic =
+    getStateEvent(room, StateEvent.RoomTopic)?.getContent<RoomTopicEventContent>()?.topic ??
+    undefined;
+
   const member = room.getMember(userId);
   const memberEvent = member?.events.member;
-  const memberTs = memberEvent?.getTs() ?? 0;
+
+  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 topic = useRoomTopic(room);
+  return {
+    room,
+    roomId: room.roomId,
+    roomAvatar,
+    roomName,
+    roomTopic,
+    roomAlias: room.getCanonicalAlias() ?? undefined,
+
+    senderId: senderId ?? 'Unknown',
+    senderName: senderName ?? 'Unknown',
+    inviteTs,
+    reason,
+
+    isSpace: isSpace(room),
+    isDirect: direct,
+    isEncrypted: !!getStateEvent(room, StateEvent.RoomEncryption),
+  };
+};
+
+const hasBadWords = (invite: InviteData): boolean =>
+  testBadWords(invite.roomName) ||
+  testBadWords(invite.roomTopic ?? '') ||
+  testBadWords(invite.senderName) ||
+  testBadWords(invite.senderId) ||
+  testBadWords(invite.reason || '');
+
+type NavigateHandler = (roomId: string, space: boolean) => void;
+
+type InviteCardProps = {
+  invite: InviteData;
+  compact?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+  onNavigate: NavigateHandler;
+  hideAvatar: boolean;
+};
+function InviteCard({
+  invite,
+  compact,
+  hour24Clock,
+  dateFormatString,
+  onNavigate,
+  hideAvatar,
+}: InviteCardProps) {
+  const mx = useMatrixClient();
+  const userId = mx.getSafeUserId();
 
   const [viewTopic, setViewTopic] = useState(false);
   const closeTopic = () => setViewTopic(false);
@@ -73,17 +168,19 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
 
   const [joinState, join] = useAsyncCallback<void, MatrixError, []>(
     useCallback(async () => {
-      const dmUserId = isDirectInvite(room, userId) ? guessDmRoomUserId(room, userId) : undefined;
+      const dmUserId = isDirectInvite(invite.room, userId)
+        ? guessDmRoomUserId(invite.room, userId)
+        : undefined;
 
-      await mx.joinRoom(room.roomId);
+      await mx.joinRoom(invite.roomId);
       if (dmUserId) {
-        await addRoomIdToMDirect(mx, room.roomId, dmUserId);
+        await addRoomIdToMDirect(mx, invite.roomId, dmUserId);
       }
-      onNavigate(room.roomId);
-    }, [mx, room, userId, onNavigate])
+      onNavigate(invite.roomId, invite.isSpace);
+    }, [mx, invite, userId, onNavigate])
   );
   const [leaveState, leave] = useAsyncCallback<Record<string, never>, MatrixError, []>(
-    useCallback(() => mx.leave(room.roomId), [mx, room])
+    useCallback(() => mx.leave(invite.roomId), [mx, invite])
   );
 
   const joining =
@@ -95,28 +192,43 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
     <SequenceCard
       variant="SurfaceVariant"
       direction="Column"
-      gap="200"
-      style={{ padding: config.space.S400, paddingTop: config.space.S200 }}
+      gap="300"
+      style={{ padding: config.space.S400 }}
     >
-      <Box gap="200" alignItems="Baseline">
-        <Box grow="Yes">
-          <Text size="T200" priority="300" truncate>
-            Invited by <b>{senderName}</b>
-          </Text>
+      {(invite.isEncrypted || invite.isDirect || invite.isSpace) && (
+        <Box gap="200" alignItems="Center">
+          {invite.isEncrypted && (
+            <Box shrink="No" alignItems="Center" justifyContent="Center">
+              <Badge variant="Success" fill="Solid" size="400" radii="300">
+                <Text size="L400">Encrypted</Text>
+              </Badge>
+            </Box>
+          )}
+          {invite.isDirect && (
+            <Box shrink="No" alignItems="Center" justifyContent="Center">
+              <Badge variant="Primary" fill="Solid" size="400" radii="300">
+                <Text size="L400">Direct Message</Text>
+              </Badge>
+            </Box>
+          )}
+          {invite.isSpace && (
+            <Box shrink="No" alignItems="Center" justifyContent="Center">
+              <Badge variant="Secondary" fill="Soft" size="400" radii="300">
+                <Text size="L400">Space</Text>
+              </Badge>
+            </Box>
+          )}
         </Box>
-        <Box shrink="No">
-          <Time size="T200" ts={memberTs} priority="300" />
-        </Box>
-      </Box>
+      )}
       <Box gap="300">
         <Avatar size="300">
           <RoomAvatar
-            roomId={room.roomId}
-            src={direct ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication)}
-            alt={roomName}
+            roomId={invite.roomId}
+            src={hideAvatar ? undefined : invite.roomAvatar}
+            alt={invite.roomName}
             renderFallback={() => (
               <Text as="span" size="H6">
-                {nameInitials(roomName)}
+                {nameInitials(hideAvatar && invite.roomAvatar ? undefined : invite.roomName)}
               </Text>
             )}
           />
@@ -125,9 +237,9 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
           <Box grow="Yes" direction="Column" gap="200">
             <Box direction="Column">
               <Text size="T300" truncate>
-                <b>{roomName}</b>
+                <b>{invite.roomName}</b>
               </Text>
-              {topic && (
+              {invite.roomTopic && (
                 <Text
                   size="T200"
                   onClick={openTopic}
@@ -135,7 +247,7 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
                   tabIndex={0}
                   truncate
                 >
-                  {topic}
+                  {invite.roomTopic}
                 </Text>
               )}
               <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
@@ -149,8 +261,8 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
                     }}
                   >
                     <RoomTopicViewer
-                      name={roomName}
-                      topic={topic ?? ''}
+                      name={invite.roomName}
+                      topic={invite.roomTopic ?? ''}
                       requestClose={closeTopic}
                     />
                   </FocusTrap>
@@ -173,6 +285,7 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
               onClick={leave}
               size="300"
               variant="Secondary"
+              radii="300"
               fill="Soft"
               disabled={joining || leaving}
               before={leaving ? <Spinner variant="Secondary" size="100" /> : undefined}
@@ -182,28 +295,437 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
             <Button
               onClick={join}
               size="300"
-              variant="Primary"
+              variant="Success"
               fill="Soft"
+              radii="300"
               outlined
               disabled={joining || leaving}
-              before={joining ? <Spinner variant="Primary" fill="Soft" size="100" /> : undefined}
+              before={joining ? <Spinner variant="Success" fill="Soft" size="100" /> : undefined}
             >
               <Text size="B300">Accept</Text>
             </Button>
           </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 && (
+          <Text size="T200" priority="300">
+            Reason: {invite.reason}
+          </Text>
+        )}
+      </Box>
     </SequenceCard>
   );
 }
 
+enum InviteFilter {
+  Known,
+  Unknown,
+  Spam,
+}
+type InviteFiltersProps = {
+  filter: InviteFilter;
+  onFilter: (filter: InviteFilter) => void;
+  knownInvites: InviteData[];
+  unknownInvites: InviteData[];
+  spamInvites: InviteData[];
+};
+function InviteFilters({
+  filter,
+  onFilter,
+  knownInvites,
+  unknownInvites,
+  spamInvites,
+}: InviteFiltersProps) {
+  const isKnown = filter === InviteFilter.Known;
+  const isUnknown = filter === InviteFilter.Unknown;
+  const isSpam = filter === InviteFilter.Spam;
+
+  return (
+    <Box gap="200">
+      <Chip
+        variant={isKnown ? 'Success' : 'Surface'}
+        aria-selected={isKnown}
+        outlined={!isKnown}
+        onClick={() => onFilter(InviteFilter.Known)}
+        before={isKnown && <Icon size="100" src={Icons.Check} />}
+        after={
+          knownInvites.length > 0 && (
+            <Badge variant={isKnown ? 'Success' : 'Secondary'} fill="Solid" radii="Pill">
+              <Text size="L400">{knownInvites.length}</Text>
+            </Badge>
+          )
+        }
+      >
+        <Text size="T200">Primary</Text>
+      </Chip>
+      <Chip
+        variant={isUnknown ? 'Warning' : 'Surface'}
+        aria-selected={isUnknown}
+        outlined={!isUnknown}
+        onClick={() => onFilter(InviteFilter.Unknown)}
+        before={isUnknown && <Icon size="100" src={Icons.Check} />}
+        after={
+          unknownInvites.length > 0 && (
+            <Badge variant={isUnknown ? 'Warning' : 'Secondary'} fill="Solid" radii="Pill">
+              <Text size="L400">{unknownInvites.length}</Text>
+            </Badge>
+          )
+        }
+      >
+        <Text size="T200">Public</Text>
+      </Chip>
+      <Chip
+        variant={isSpam ? 'Critical' : 'Surface'}
+        aria-selected={isSpam}
+        outlined={!isSpam}
+        onClick={() => onFilter(InviteFilter.Spam)}
+        before={isSpam && <Icon size="100" src={Icons.Check} />}
+        after={
+          spamInvites.length > 0 && (
+            <Badge variant={isSpam ? 'Critical' : 'Secondary'} fill="Solid" radii="Pill">
+              <Text size="L400">{spamInvites.length}</Text>
+            </Badge>
+          )
+        }
+      >
+        <Text size="T200">Spam</Text>
+      </Chip>
+    </Box>
+  );
+}
+
+type KnownInvitesProps = {
+  invites: InviteData[];
+  handleNavigate: NavigateHandler;
+  compact: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+};
+function KnownInvites({
+  invites,
+  handleNavigate,
+  compact,
+  hour24Clock,
+  dateFormatString,
+}: KnownInvitesProps) {
+  return (
+    <Box direction="Column" gap="200">
+      <Text size="H4">Primary</Text>
+      {invites.length > 0 ? (
+        <Box direction="Column" gap="100">
+          {invites.map((invite) => (
+            <InviteCard
+              key={invite.roomId}
+              invite={invite}
+              compact={compact}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+              onNavigate={handleNavigate}
+              hideAvatar={false}
+            />
+          ))}
+        </Box>
+      ) : (
+        <PageHeroEmpty>
+          <PageHeroSection>
+            <PageHero
+              icon={<Icon size="600" src={Icons.Mail} />}
+              title="No Invites"
+              subTitle="When someone you share a room with sends you an invite, it’ll show up here."
+            />
+          </PageHeroSection>
+        </PageHeroEmpty>
+      )}
+    </Box>
+  );
+}
+
+type UnknownInvitesProps = {
+  invites: InviteData[];
+  handleNavigate: NavigateHandler;
+  compact: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+};
+function UnknownInvites({
+  invites,
+  handleNavigate,
+  compact,
+  hour24Clock,
+  dateFormatString,
+}: UnknownInvitesProps) {
+  const mx = useMatrixClient();
+
+  const [declineAllStatus, declineAll] = useAsyncCallback(
+    useCallback(async () => {
+      const roomIds = invites.map((invite) => invite.roomId);
+
+      await rateLimitedActions(roomIds, (roomId) => mx.leave(roomId));
+    }, [mx, invites])
+  );
+
+  const declining = declineAllStatus.status === AsyncStatus.Loading;
+
+  return (
+    <Box direction="Column" gap="200">
+      <Box gap="200" justifyContent="SpaceBetween" alignItems="Center">
+        <Text size="H4">Public</Text>
+        <Box>
+          {invites.length > 0 && (
+            <Chip
+              variant="SurfaceVariant"
+              onClick={declineAll}
+              before={declining && <Spinner size="50" variant="Secondary" fill="Soft" />}
+              disabled={declining}
+              radii="Pill"
+            >
+              <Text size="T200">Decline All</Text>
+            </Chip>
+          )}
+        </Box>
+      </Box>
+      {invites.length > 0 ? (
+        <Box direction="Column" gap="100">
+          {invites.map((invite) => (
+            <InviteCard
+              key={invite.roomId}
+              invite={invite}
+              compact={compact}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+              onNavigate={handleNavigate}
+              hideAvatar
+            />
+          ))}
+        </Box>
+      ) : (
+        <PageHeroEmpty>
+          <PageHeroSection>
+            <PageHero
+              icon={<Icon size="600" src={Icons.Info} />}
+              title="No Invites"
+              subTitle="Invites from people outside your rooms will appear here."
+            />
+          </PageHeroSection>
+        </PageHeroEmpty>
+      )}
+    </Box>
+  );
+}
+
+type SpamInvitesProps = {
+  invites: InviteData[];
+  handleNavigate: NavigateHandler;
+  compact: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+};
+function SpamInvites({
+  invites,
+  handleNavigate,
+  compact,
+  hour24Clock,
+  dateFormatString,
+}: SpamInvitesProps) {
+  const mx = useMatrixClient();
+  const [showInvites, setShowInvites] = useState(false);
+
+  const reportRoomSupported = useReportRoomSupported();
+
+  const [declineAllStatus, declineAll] = useAsyncCallback(
+    useCallback(async () => {
+      const roomIds = invites.map((invite) => invite.roomId);
+
+      await rateLimitedActions(roomIds, (roomId) => mx.leave(roomId));
+    }, [mx, invites])
+  );
+
+  const [reportAllStatus, reportAll] = useAsyncCallback(
+    useCallback(async () => {
+      const roomIds = invites.map((invite) => invite.roomId);
+
+      await rateLimitedActions(roomIds, (roomId) => mx.reportRoom(roomId, 'Spam Invite'));
+    }, [mx, invites])
+  );
+
+  const ignoredUsers = useIgnoredUsers();
+  const unignoredUsers = Array.from(new Set(invites.map((invite) => invite.senderId))).filter(
+    (user) => !ignoredUsers.includes(user)
+  );
+  const [blockAllStatus, blockAll] = useAsyncCallback(
+    useCallback(
+      () => mx.setIgnoredUsers([...ignoredUsers, ...unignoredUsers]),
+      [mx, ignoredUsers, unignoredUsers]
+    )
+  );
+
+  const declining = declineAllStatus.status === AsyncStatus.Loading;
+  const reporting = reportAllStatus.status === AsyncStatus.Loading;
+  const blocking = blockAllStatus.status === AsyncStatus.Loading;
+  const loading = blocking || reporting || declining;
+
+  return (
+    <Box direction="Column" gap="200">
+      <Text size="H4">Spam</Text>
+      {invites.length > 0 ? (
+        <Box direction="Column" gap="100">
+          <SequenceCard
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="300"
+            style={{ padding: `${config.space.S400} ${config.space.S400} 0` }}
+          >
+            <PageHeroSection>
+              <PageHero
+                icon={<Icon size="600" src={Icons.Warning} />}
+                title={`${invites.length} Spam Invites`}
+                subTitle="Some of the following invites may contain harmful content or have been sent by banned users."
+              >
+                <Box direction="Row" gap="200" justifyContent="Center" wrap="Wrap">
+                  <Button
+                    size="300"
+                    variant="Critical"
+                    fill="Solid"
+                    radii="300"
+                    onClick={declineAll}
+                    before={declining && <Spinner size="100" variant="Critical" fill="Solid" />}
+                    disabled={loading}
+                  >
+                    <Text size="B300" truncate>
+                      Decline All
+                    </Text>
+                  </Button>
+                  {reportRoomSupported && reportAllStatus.status !== AsyncStatus.Success && (
+                    <Button
+                      size="300"
+                      variant="Secondary"
+                      fill="Solid"
+                      radii="300"
+                      onClick={reportAll}
+                      before={reporting && <Spinner size="100" variant="Secondary" fill="Solid" />}
+                      disabled={loading}
+                    >
+                      <Text size="B300" truncate>
+                        Report All
+                      </Text>
+                    </Button>
+                  )}
+                  {unignoredUsers.length > 0 && (
+                    <Button
+                      size="300"
+                      variant="Secondary"
+                      fill="Solid"
+                      radii="300"
+                      disabled={loading}
+                      onClick={blockAll}
+                      before={blocking && <Spinner size="100" variant="Secondary" fill="Solid" />}
+                    >
+                      <Text size="B300" truncate>
+                        Block All
+                      </Text>
+                    </Button>
+                  )}
+                </Box>
+
+                <span data-spacing-node />
+
+                <Button
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="Pill"
+                  before={
+                    <Icon size="100" src={showInvites ? Icons.ChevronTop : Icons.ChevronBottom} />
+                  }
+                  onClick={() => setShowInvites(!showInvites)}
+                >
+                  <Text size="B300">{showInvites ? 'Hide All' : 'View All'}</Text>
+                </Button>
+              </PageHero>
+            </PageHeroSection>
+          </SequenceCard>
+          {showInvites &&
+            invites.map((invite) => (
+              <InviteCard
+                key={invite.roomId}
+                invite={invite}
+                compact={compact}
+                hour24Clock={hour24Clock}
+                dateFormatString={dateFormatString}
+                onNavigate={handleNavigate}
+                hideAvatar
+              />
+            ))}
+        </Box>
+      ) : (
+        <PageHeroEmpty>
+          <PageHeroSection>
+            <PageHero
+              icon={<Icon size="600" src={Icons.Warning} />}
+              title="No Spam Invites"
+              subTitle="Invites detected as spam appear here."
+            />
+          </PageHeroSection>
+        </PageHeroEmpty>
+      )}
+    </Box>
+  );
+}
+
 export function Invites() {
   const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
-  const mDirects = useAtomValue(mDirectAtom);
-  const directInvites = useDirectInvites(mx, allInvitesAtom, mDirects);
-  const spaceInvites = useSpaceInvites(mx, allInvitesAtom);
-  const roomInvites = useRoomInvites(mx, allInvitesAtom, mDirects);
+  const useAuthentication = useMediaAuthentication();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const allRooms = useAtomValue(allRoomsAtom);
+  const allInviteIds = useAtomValue(allInvitesAtom);
+
+  const [filter, setFilter] = useState(InviteFilter.Known);
+
+  const invitesData = allInviteIds
+    .map((inviteId) => mx.getRoom(inviteId))
+    .filter((inviteRoom) => !!inviteRoom)
+    .map((inviteRoom) => makeInviteData(mx, inviteRoom, useAuthentication));
+
+  const [knownInvites, unknownInvites, spamInvites] = useMemo(() => {
+    const known: InviteData[] = [];
+    const unknown: InviteData[] = [];
+    const spam: InviteData[] = [];
+    invitesData.forEach((invite) => {
+      if (hasBadWords(invite) || bannedInRooms(mx, allRooms, invite.senderId)) {
+        spam.push(invite);
+        return;
+      }
+
+      if (getCommonRooms(mx, allRooms, invite.senderId).length === 0) {
+        unknown.push(invite);
+        return;
+      }
+
+      known.push(invite);
+    });
+
+    return [known, unknown, spam];
+  }, [mx, allRooms, invitesData]);
+
   const containerRef = useRef<HTMLDivElement>(null);
   const [compact, setCompact] = useState(document.body.clientWidth <= COMPACT_CARD_WIDTH);
   useElementSizeObserver(
@@ -212,21 +734,15 @@ export function Invites() {
   );
   const screenSize = useScreenSizeContext();
 
-  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
-  const renderInvite = (roomId: string, direct: boolean, handleNavigate: (rId: string) => void) => {
-    const room = mx.getRoom(roomId);
-    if (!room) return null;
-    return (
-      <InviteCard
-        key={roomId}
-        room={room}
-        userId={userId}
-        compact={compact}
-        direct={direct}
-        onNavigate={handleNavigate}
-      />
-    );
+  const handleNavigate = (roomId: string, space: boolean) => {
+    if (space) {
+      navigateSpace(roomId);
+      return;
+    }
+    navigateRoom(roomId);
   };
 
   return (
@@ -247,7 +763,7 @@ export function Invites() {
           <Box alignItems="Center" gap="200">
             {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Mail} />}
             <Text size="H3" truncate>
-              Invitations
+              Invites
             </Text>
           </Box>
           <Box grow="Yes" basis="No" />
@@ -258,47 +774,46 @@ export function Invites() {
           <PageContent>
             <PageContentCenter>
               <Box ref={containerRef} direction="Column" gap="600">
-                {directInvites.length > 0 && (
-                  <Box direction="Column" gap="200">
-                    <Text size="H4">Direct Messages</Text>
-                    <Box direction="Column" gap="100">
-                      {directInvites.map((roomId) => renderInvite(roomId, true, navigateRoom))}
-                    </Box>
-                  </Box>
+                <Box direction="Column" gap="100">
+                  <span data-spacing-node />
+                  <Text size="L400">Filter</Text>
+                  <InviteFilters
+                    filter={filter}
+                    onFilter={setFilter}
+                    knownInvites={knownInvites}
+                    unknownInvites={unknownInvites}
+                    spamInvites={spamInvites}
+                  />
+                </Box>
+                {filter === InviteFilter.Known && (
+                  <KnownInvites
+                    invites={knownInvites}
+                    compact={compact}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                    handleNavigate={handleNavigate}
+                  />
                 )}
-                {spaceInvites.length > 0 && (
-                  <Box direction="Column" gap="200">
-                    <Text size="H4">Spaces</Text>
-                    <Box direction="Column" gap="100">
-                      {spaceInvites.map((roomId) => renderInvite(roomId, false, navigateSpace))}
-                    </Box>
-                  </Box>
+
+                {filter === InviteFilter.Unknown && (
+                  <UnknownInvites
+                    invites={unknownInvites}
+                    compact={compact}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                    handleNavigate={handleNavigate}
+                  />
                 )}
-                {roomInvites.length > 0 && (
-                  <Box direction="Column" gap="200">
-                    <Text size="H4">Rooms</Text>
-                    <Box direction="Column" gap="100">
-                      {roomInvites.map((roomId) => renderInvite(roomId, false, navigateRoom))}
-                    </Box>
-                  </Box>
+
+                {filter === InviteFilter.Spam && (
+                  <SpamInvites
+                    invites={spamInvites}
+                    compact={compact}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                    handleNavigate={handleNavigate}
+                  />
                 )}
-                {directInvites.length === 0 &&
-                  spaceInvites.length === 0 &&
-                  roomInvites.length === 0 && (
-                    <div>
-                      <SequenceCard
-                        variant="SurfaceVariant"
-                        style={{ padding: config.space.S400 }}
-                        direction="Column"
-                        gap="200"
-                      >
-                        <Text>No Pending Invitations</Text>
-                        <Text size="T200">
-                          You don&apos;t have any new pending invitations to display yet.
-                        </Text>
-                      </SequenceCard>
-                    </div>
-                  )}
               </Box>
             </PageContentCenter>
           </PageContent>
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 80ce25a9..afdfec6d 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -84,16 +84,19 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
-import {
-  getTagIconSrc,
-  useAccessibleTagColors,
-  usePowerLevelTags,
-} from '../../../hooks/usePowerLevelTags';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { mDirectAtom } from '../../../state/mDirectList';
+import {
+  getPowerTagIconSrc,
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../../hooks/useMemberPowerTag';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -205,6 +208,8 @@ type RoomNotificationsGroupProps = {
   hideActivity: boolean;
   onOpen: (roomId: string, eventId: string) => void;
   legacyUsernameColor?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 function RoomNotificationsGroupComp({
   room,
@@ -214,16 +219,22 @@ function RoomNotificationsGroupComp({
   hideActivity,
   onOpen,
   legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
 }: RoomNotificationsGroupProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
 
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
-  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const creators = useRoomCreators(room);
+
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
   const theme = useTheme();
-  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
 
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
@@ -443,13 +454,12 @@ function RoomNotificationsGroupComp({
           const threadRootId =
             relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
-          const senderPowerLevel = getPowerLevel(event.sender);
-          const powerLevelTag = getPowerLevelTag(senderPowerLevel);
-          const tagColor = powerLevelTag?.color
-            ? accessibleTagColors?.get(powerLevelTag.color)
+          const memberPowerTag = getMemberPowerTag(event.sender);
+          const tagColor = memberPowerTag?.color
+            ? accessibleTagColors?.get(memberPowerTag.color)
             : undefined;
-          const tagIconSrc = powerLevelTag?.icon
-            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+          const tagIconSrc = memberPowerTag?.icon
+            ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
             : undefined;
 
           const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
@@ -496,7 +506,11 @@ function RoomNotificationsGroupComp({
                       </Username>
                       {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
                     </Box>
-                    <Time ts={event.origin_server_ts} />
+                    <Time
+                      ts={event.origin_server_ts}
+                      hour24Clock={hour24Clock}
+                      dateFormatString={dateFormatString}
+                    />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
                     <Chip
@@ -515,8 +529,7 @@ function RoomNotificationsGroupComp({
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
-                    getPowerLevel={getPowerLevel}
-                    getPowerLevelTag={getPowerLevelTag}
+                    getMemberPowerTag={getMemberPowerTag}
                     accessibleTagColors={accessibleTagColors}
                     legacyUsernameColor={legacyUsernameColor}
                   />
@@ -549,6 +562,8 @@ export function Notifications() {
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
   const screenSize = useScreenSizeContext();
   const mDirects = useAtomValue(mDirectAtom);
 
@@ -713,6 +728,8 @@ export function Notifications() {
                           legacyUsernameColor={
                             legacyUsernameColor || mDirects.has(groupRoom.roomId)
                           }
+                          hour24Clock={hour24Clock}
+                          dateFormatString={dateFormatString}
                         />
                       </VirtualTile>
                     );
diff --git a/src/app/pages/client/sidebar/CreateTab.tsx b/src/app/pages/client/sidebar/CreateTab.tsx
new file mode 100644
index 00000000..e6575cb4
--- /dev/null
+++ b/src/app/pages/client/sidebar/CreateTab.tsx
@@ -0,0 +1,134 @@
+import React, { MouseEventHandler, useState } from 'react';
+import { Box, config, Icon, Icons, Menu, PopOut, RectCords, Text } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useNavigate } from 'react-router-dom';
+import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
+import { stopPropagation } from '../../../utils/keyboard';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SettingTile } from '../../../components/setting-tile';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+import {
+  encodeSearchParamValueArray,
+  getCreatePath,
+  getSpacePath,
+  withSearchParam,
+} from '../../pathUtils';
+import { useCreateSelected } from '../../../hooks/router/useCreateSelected';
+import { JoinAddressPrompt } from '../../../components/join-address-prompt';
+import { _RoomSearchParams } from '../../paths';
+
+export function CreateTab() {
+  const createSelected = useCreateSelected();
+
+  const navigate = useNavigate();
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const [joinAddress, setJoinAddress] = useState(false);
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(menuCords ? undefined : evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleCreateSpace = () => {
+    navigate(getCreatePath());
+    setMenuCords(undefined);
+  };
+
+  const handleJoinWithAddress = () => {
+    setJoinAddress(true);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <SidebarItem active={createSelected}>
+      <SidebarItemTooltip tooltip="Add Space">
+        {(triggerRef) => (
+          <PopOut
+            anchor={menuCords}
+            position="Right"
+            align="Center"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  returnFocusOnDeactivate: false,
+                  initialFocus: false,
+                  onDeactivate: () => setMenuCords(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                  isKeyBackward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu>
+                  <Box direction="Column">
+                    <SequenceCard
+                      style={{ padding: config.space.S300 }}
+                      variant="Surface"
+                      direction="Column"
+                      gap="100"
+                      radii="0"
+                      as="button"
+                      type="button"
+                      onClick={handleCreateSpace}
+                    >
+                      <SettingTile before={<Icon size="400" src={Icons.Space} />}>
+                        <Text size="H6">Create Space</Text>
+                        <Text size="T300" priority="300">
+                          Build a space for your community.
+                        </Text>
+                      </SettingTile>
+                    </SequenceCard>
+                    <SequenceCard
+                      style={{ padding: config.space.S300 }}
+                      variant="Surface"
+                      direction="Column"
+                      gap="100"
+                      radii="0"
+                      as="button"
+                      type="button"
+                      onClick={handleJoinWithAddress}
+                    >
+                      <SettingTile before={<Icon size="400" src={Icons.Link} />}>
+                        <Text size="H6">Join with Address</Text>
+                        <Text size="T300" priority="300">
+                          Become a part of existing community.
+                        </Text>
+                      </SettingTile>
+                    </SequenceCard>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <SidebarAvatar
+              className={menuCords ? ContainerColor({ variant: 'Surface' }) : undefined}
+              as="button"
+              ref={triggerRef}
+              outlined
+              onClick={handleMenu}
+            >
+              <Icon src={Icons.Plus} />
+            </SidebarAvatar>
+            {joinAddress && (
+              <JoinAddressPrompt
+                onCancel={() => setJoinAddress(false)}
+                onOpen={(roomIdOrAlias, viaServers) => {
+                  setJoinAddress(false);
+                  const path = getSpacePath(roomIdOrAlias);
+                  navigate(
+                    viaServers
+                      ? withSearchParam<_RoomSearchParams>(path, {
+                          viaServers: encodeSearchParamValueArray(viaServers),
+                        })
+                      : path
+                  );
+                }}
+              />
+            )}
+          </PopOut>
+        )}
+      </SidebarItemTooltip>
+    </SidebarItem>
+  );
+}
diff --git a/src/app/pages/client/sidebar/SearchTab.tsx b/src/app/pages/client/sidebar/SearchTab.tsx
new file mode 100644
index 00000000..7ceb5c49
--- /dev/null
+++ b/src/app/pages/client/sidebar/SearchTab.tsx
@@ -0,0 +1,23 @@
+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/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 83cd118c..bb212184 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -28,7 +28,7 @@ export function SettingsTab() {
 
   return (
     <SidebarItem active={settings}>
-      <SidebarItemTooltip tooltip={displayName}>
+      <SidebarItemTooltip tooltip="User Settings">
         {(triggerRef) => (
           <SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
             <UserAvatar
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 5b47cb52..c06fab92 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -77,12 +77,11 @@ import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFolder';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 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';
@@ -91,6 +90,9 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useSetting } from '../../../state/hooks/settings';
 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;
@@ -103,10 +105,14 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevels(room);
-    const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-    const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const creators = useRoomCreators(room);
+
+    const permissions = useRoomPermissions(creators, powerLevels);
+    const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openSpaceSettings = useOpenSpaceSettings();
 
+    const [invitePrompt, setInvitePrompt] = useState(false);
+
     const allChild = useSpaceChildren(
       allRoomsAtom,
       room.roomId,
@@ -132,8 +138,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     };
 
     const handleInvite = () => {
-      openInviteUser(room.roomId);
-      requestClose();
+      setInvitePrompt(true);
     };
 
     const handleRoomSettings = () => {
@@ -143,6 +148,15 @@ 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}
@@ -177,6 +191,7 @@ 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>
@@ -744,13 +759,14 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
     const targetSpaceId = target.getAttribute('data-id');
     if (!targetSpaceId) return;
 
+    const spacePath = getSpacePath(getCanonicalAliasOrRoomId(mx, targetSpaceId));
     if (screenSize === ScreenSize.Mobile) {
-      navigate(getSpacePath(getCanonicalAliasOrRoomId(mx, targetSpaceId)));
+      navigate(spacePath);
       return;
     }
 
     const activePath = navToActivePath.get(targetSpaceId);
-    if (activePath) {
+    if (activePath && activePath.pathname.startsWith(spacePath)) {
       navigate(joinPathComponent(activePath));
       return;
     }
diff --git a/src/app/pages/client/sidebar/index.ts b/src/app/pages/client/sidebar/index.ts
index 6460d1f2..d44cfaa2 100644
--- a/src/app/pages/client/sidebar/index.ts
+++ b/src/app/pages/client/sidebar/index.ts
@@ -5,3 +5,4 @@ export * from './InboxTab';
 export * from './ExploreTab';
 export * from './SettingsTab';
 export * from './UnverifiedTab';
+export * from './SearchTab';
diff --git a/src/app/pages/client/space/RoomProvider.tsx b/src/app/pages/client/space/RoomProvider.tsx
index a9632137..0fd52ab6 100644
--- a/src/app/pages/client/space/RoomProvider.tsx
+++ b/src/app/pages/client/space/RoomProvider.tsx
@@ -1,21 +1,24 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useSpace } from '../../../hooks/useSpace';
-import { getAllParents } from '../../../utils/room';
+import { getAllParents, getSpaceChildren } from '../../../utils/room';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
 import { mDirectAtom } from '../../../state/mDirectList';
+import { settingsAtom } from '../../../state/settings';
+import { useSetting } from '../../../state/hooks/settings';
 
 export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const space = useSpace();
-  const roomToParents = useAtomValue(roomToParentsAtom);
+  const [developerTools] = useSetting(settingsAtom, 'developerTools');
+  const [roomToParents, setRoomToParents] = useAtom(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
 
@@ -24,12 +27,36 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
-  if (
-    !room ||
-    room.isSpaceRoom() ||
-    !allRooms.includes(room.roomId) ||
-    !getAllParents(roomToParents, room.roomId).has(space.roomId)
-  ) {
+  if (!room || !allRooms.includes(room.roomId)) {
+    // room is not joined
+    return (
+      <JoinBeforeNavigate
+        roomIdOrAlias={roomIdOrAlias!}
+        eventId={eventId}
+        viaServers={viaServers}
+      />
+    );
+  }
+
+  if (developerTools && room.isSpaceRoom() && room.roomId === space.roomId) {
+    // allow to view space timeline
+    return (
+      <RoomProvider key={room.roomId} value={room}>
+        <IsDirectRoomProvider value={mDirects.has(room.roomId)}>{children}</IsDirectRoomProvider>
+      </RoomProvider>
+    );
+  }
+
+  if (!getAllParents(roomToParents, room.roomId).has(space.roomId)) {
+    if (getSpaceChildren(space).includes(room.roomId)) {
+      // fill missing roomToParent mapping
+      setRoomToParents({
+        type: 'PUT',
+        parent: space.roomId,
+        children: [room.roomId],
+      });
+    }
+
     return (
       <JoinBeforeNavigate
         roomIdOrAlias={roomIdOrAlias!}
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index fa8c0ea8..fba3de50 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -10,6 +10,7 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
+  Button,
   Icon,
   IconButton,
   Icons,
@@ -18,7 +19,9 @@ import {
   MenuItem,
   PopOut,
   RectCords,
+  Spinner,
   Text,
+  color,
   config,
   toRem,
 } from 'folds';
@@ -53,8 +56,7 @@ import { useRoomName } from '../../../hooks/useRoomMeta';
 import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
-import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
-import { openInviteUser } from '../../../../client/action/navigation';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -64,7 +66,7 @@ import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
 import { copyToClipboard } from '../../../utils/dom';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { useStateEvent } from '../../../hooks/useStateEvent';
-import { StateEvent } from '../../../../types/matrix/room';
+import { Membership, StateEvent } from '../../../../types/matrix/room';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -75,6 +77,13 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+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;
@@ -83,11 +92,17 @@ type SpaceMenuProps = {
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
   const mx = useMatrixClient();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
-  const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canInvite = permissions.action('invite', mx.getSafeUserId());
   const openSpaceSettings = useOpenSpaceSettings();
+  const { navigateRoom } = useRoomNavigate();
+
+  const [invitePrompt, setInvitePrompt] = useState(false);
 
   const allChild = useSpaceChildren(
     allRoomsAtom,
@@ -109,8 +124,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   };
 
   const handleInvite = () => {
-    openInviteUser(room.roomId);
-    requestClose();
+    setInvitePrompt(true);
   };
 
   const handleRoomSettings = () => {
@@ -118,9 +132,23 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
     requestClose();
   };
 
+  const handleOpenTimeline = () => {
+    navigateRoom(room.roomId);
+    requestClose();
+  };
+
   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"
@@ -142,6 +170,7 @@ 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>
@@ -168,6 +197,18 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
             Space Settings
           </Text>
         </MenuItem>
+        {developerTools && (
+          <MenuItem
+            onClick={handleOpenTimeline}
+            size="300"
+            after={<Icon size="100" src={Icons.Terminal} />}
+            radii="300"
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Event Timeline
+            </Text>
+          </MenuItem>
+        )}
       </Box>
       <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -264,6 +305,75 @@ function SpaceHeader() {
   );
 }
 
+type SpaceTombstoneProps = { roomId: string; replacementRoomId: string };
+export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProps) {
+  const mx = useMatrixClient();
+  const { navigateSpace } = useRoomNavigate();
+
+  const [joinState, handleJoin] = useAsyncCallback(
+    useCallback(() => {
+      const currentRoom = mx.getRoom(roomId);
+      const via = currentRoom ? getViaServers(currentRoom) : [];
+      return mx.joinRoom(replacementRoomId, {
+        viaServers: via,
+      });
+    }, [mx, roomId, replacementRoomId])
+  );
+  const replacementRoom = mx.getRoom(replacementRoomId);
+
+  const handleOpen = () => {
+    if (replacementRoom) navigateSpace(replacementRoom.roomId);
+    if (joinState.status === AsyncStatus.Success) navigateSpace(joinState.data.roomId);
+  };
+
+  return (
+    <Box
+      style={{
+        padding: config.space.S200,
+        borderRadius: config.radii.R400,
+        borderWidth: config.borderWidth.B300,
+      }}
+      className={ContainerColor({ variant: 'Surface' })}
+      direction="Column"
+      gap="300"
+    >
+      <Box direction="Column" grow="Yes" gap="100">
+        <Text size="L400">Space Upgraded</Text>
+        <Text size="T200">This space has been replaced and is no longer active.</Text>
+        {joinState.status === AsyncStatus.Error && (
+          <Text className={BreakWord} style={{ color: color.Critical.Main }} size="T200">
+            {(joinState.error as any)?.message ?? 'Failed to join replacement space!'}
+          </Text>
+        )}
+      </Box>
+      <Box direction="Column" shrink="No">
+        {replacementRoom?.getMyMembership() === Membership.Join ||
+        joinState.status === AsyncStatus.Success ? (
+          <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
+            <Text size="B300">Open New Space</Text>
+          </Button>
+        ) : (
+          <Button
+            onClick={handleJoin}
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            before={
+              joinState.status === AsyncStatus.Loading && (
+                <Spinner size="100" variant="Primary" fill="Solid" />
+              )
+            }
+            disabled={joinState.status === AsyncStatus.Loading}
+          >
+            <Text size="B300">Join New Space</Text>
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
 export function Space() {
   const mx = useMatrixClient();
   const space = useSpace();
@@ -276,6 +386,8 @@ export function Space() {
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
 
+  const tombstoneEvent = useStateEvent(space, StateEvent.RoomTombstone);
+
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
@@ -331,6 +443,12 @@ export function Space() {
       <SpaceHeader />
       <PageNavContent scrollRef={scrollRef}>
         <Box direction="Column" gap="300">
+          {tombstoneEvent && (
+            <SpaceTombstone
+              roomId={space.roomId}
+              replacementRoomId={tombstoneEvent.getContent().replacement_room}
+            />
+          )}
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
               <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
diff --git a/src/app/pages/pathUtils.ts b/src/app/pages/pathUtils.ts
index cbd453ae..817d21d1 100644
--- a/src/app/pages/pathUtils.ts
+++ b/src/app/pages/pathUtils.ts
@@ -22,6 +22,7 @@ import {
   SPACE_PATH,
   SPACE_ROOM_PATH,
   SPACE_SEARCH_PATH,
+  CREATE_PATH,
 } from './paths';
 import { trimLeadingSlash, trimTrailingSlash } from '../utils/common';
 import { HashRouterConfig } from '../hooks/useClientConfig';
@@ -152,6 +153,8 @@ export const getExploreServerPath = (server: string): string => {
   return generatePath(EXPLORE_SERVER_PATH, params);
 };
 
+export const getCreatePath = (): string => CREATE_PATH;
+
 export const getInboxPath = (): string => INBOX_PATH;
 export const getInboxNotificationsPath = (): string => INBOX_NOTIFICATIONS_PATH;
 export const getInboxInvitesPath = (): string => INBOX_INVITES_PATH;
diff --git a/src/app/pages/paths.ts b/src/app/pages/paths.ts
index 54da8922..9cf4bfb9 100644
--- a/src/app/pages/paths.ts
+++ b/src/app/pages/paths.ts
@@ -74,6 +74,8 @@ export type ExploreServerPathSearchParams = {
 };
 export const EXPLORE_SERVER_PATH = `/explore/${_SERVER_PATH}`;
 
+export const CREATE_PATH = '/create';
+
 export const _NOTIFICATIONS_PATH = 'notifications/';
 export const _INVITES_PATH = 'invites/';
 export const INBOX_PATH = '/inbox/';
diff --git a/src/app/plugins/bad-words.ts b/src/app/plugins/bad-words.ts
new file mode 100644
index 00000000..bb6073d8
--- /dev/null
+++ b/src/app/plugins/bad-words.ts
@@ -0,0 +1,15 @@
+import * as badWords from 'badwords-list';
+import { sanitizeForRegex } from '../utils/regex';
+
+const additionalBadWords: string[] = ['torture', 't0rture'];
+
+const fullBadWordList = additionalBadWords.concat(
+  badWords.array.filter((word) => !additionalBadWords.includes(word))
+);
+
+export const BAD_WORDS_REGEX = new RegExp(
+  `(\\b|_)(${fullBadWordList.map((word) => sanitizeForRegex(word)).join('|')})(\\b|_)`,
+  'g'
+);
+
+export const testBadWords = (str: string): boolean => !!str.toLowerCase().match(BAD_WORDS_REGEX);
diff --git a/src/app/plugins/matrix-to.ts b/src/app/plugins/matrix-to.ts
index c9df0a87..feeafe05 100644
--- a/src/app/plugins/matrix-to.ts
+++ b/src/app/plugins/matrix-to.ts
@@ -42,9 +42,9 @@ const MATRIX_TO = /^https?:\/\/matrix\.to\S*$/;
 export const testMatrixTo = (href: string): boolean => MATRIX_TO.test(href);
 
 const MATRIX_TO_USER = /^https?:\/\/matrix\.to\/#\/(@[^:\s]+:[^?/\s]+)\/?$/;
-const MATRIX_TO_ROOM = /^https?:\/\/matrix\.to\/#\/([#!][^:\s]+:[^?/\s]+)\/?(\?[\S]*)?$/;
+const MATRIX_TO_ROOM = /^https?:\/\/matrix\.to\/#\/([#!][^?/\s]+)\/?(\?[\S]*)?$/;
 const MATRIX_TO_ROOM_EVENT =
-  /^https?:\/\/matrix\.to\/#\/([#!][^:\s]+:[^?/\s]+)\/(\$[^?/\s]+)\/?(\?[\S]*)?$/;
+  /^https?:\/\/matrix\.to\/#\/([#!][^?/\s]+)\/(\$[^?/\s]+)\/?(\?[\S]*)?$/;
 
 export const parseMatrixToUser = (href: string): string | undefined => {
   const match = href.match(MATRIX_TO_USER);
diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index cd683e36..ba40c978 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -1,5 +1,12 @@
 /* eslint-disable jsx-a11y/alt-text */
-import React, { ComponentPropsWithoutRef, ReactEventHandler, Suspense, lazy } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  ReactEventHandler,
+  Suspense,
+  lazy,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Element,
   Text as DOMText,
@@ -9,10 +16,11 @@ import {
 } from 'html-react-parser';
 import { MatrixClient } from 'matrix-js-sdk';
 import classNames from 'classnames';
-import { Scroll, Text } from 'folds';
+import { Box, Chip, config, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
 import { IntermediateRepresentation, Opts as LinkifyOpts, OptFn } from 'linkifyjs';
 import Linkify from 'linkify-react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { ChildNode } from 'domhandler';
 import * as css from '../styles/CustomHtml.css';
 import {
   getMxIdLocalPart,
@@ -31,7 +39,8 @@ import {
   testMatrixTo,
 } from './matrix-to';
 import { onEnterOrSpace } from '../utils/keyboard';
-import { tryDecodeURIComponent } from '../utils/dom';
+import { copyToClipboard, tryDecodeURIComponent } from '../utils/dom';
+import { useTimeoutToggle } from '../hooks/useTimeoutToggle';
 
 const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
 
@@ -195,6 +204,111 @@ export const highlightText = (
     );
   });
 
+/**
+ * Recursively extracts and concatenates all text content from an array of ChildNode objects.
+ *
+ * @param {ChildNode[]} nodes - An array of ChildNode objects to extract text from.
+ * @returns {string} The concatenated plain text content of all descendant text nodes.
+ */
+const extractTextFromChildren = (nodes: ChildNode[]): string => {
+  let text = '';
+
+  nodes.forEach((node) => {
+    if (node.type === 'text') {
+      text += node.data;
+    } else if (node instanceof Element && node.children) {
+      text += extractTextFromChildren(node.children);
+    }
+  });
+
+  return text;
+};
+
+export function CodeBlock({
+  children,
+  opts,
+}: {
+  children: ChildNode[];
+  opts: HTMLReactParserOptions;
+}) {
+  const code = children[0];
+  const languageClass =
+    code instanceof Element && code.name === 'code' ? code.attribs.class : undefined;
+  const language =
+    languageClass && languageClass.startsWith('language-')
+      ? languageClass.replace('language-', '')
+      : languageClass;
+
+  const LINE_LIMIT = 14;
+  const largeCodeBlock = useMemo(
+    () => extractTextFromChildren(children).split('\n').length > LINE_LIMIT,
+    [children]
+  );
+
+  const [expanded, setExpand] = useState(false);
+  const [copied, setCopied] = useTimeoutToggle();
+
+  const handleCopy = () => {
+    copyToClipboard(extractTextFromChildren(children));
+    setCopied();
+  };
+
+  const toggleExpand = () => {
+    setExpand(!expanded);
+  };
+
+  return (
+    <Text size="T300" as="pre" className={css.CodeBlock}>
+      <Header variant="Surface" size="400" className={css.CodeBlockHeader}>
+        <Box grow="Yes">
+          <Text size="L400" truncate>
+            {language ?? 'Code'}
+          </Text>
+        </Box>
+        <Box shrink="No" gap="200">
+          <Chip
+            variant={copied ? 'Success' : 'Surface'}
+            fill="None"
+            radii="Pill"
+            onClick={handleCopy}
+            before={copied && <Icon size="50" src={Icons.Check} />}
+          >
+            <Text size="B300">{copied ? 'Copied' : 'Copy'}</Text>
+          </Chip>
+          {largeCodeBlock && (
+            <IconButton
+              size="300"
+              variant="SurfaceVariant"
+              outlined
+              radii="300"
+              onClick={toggleExpand}
+              aria-label={expanded ? 'Collapse' : 'Expand'}
+            >
+              <Icon size="50" src={expanded ? Icons.ChevronTop : Icons.ChevronBottom} />
+            </IconButton>
+          )}
+        </Box>
+      </Header>
+      <Scroll
+        style={{
+          maxHeight: largeCodeBlock && !expanded ? toRem(300) : undefined,
+          paddingBottom: largeCodeBlock ? config.space.S400 : undefined,
+        }}
+        direction="Both"
+        variant="SurfaceVariant"
+        size="300"
+        visibility="Hover"
+        hideTrack
+      >
+        <div id="code-block-content" className={css.CodeBlockInternal}>
+          {domToReact(children, opts)}
+        </div>
+      </Scroll>
+      {largeCodeBlock && !expanded && <Box className={css.CodeBlockBottomShadow} />}
+    </Text>
+  );
+}
+
 export const getReactCustomHtmlParser = (
   mx: MatrixClient,
   roomId: string | undefined,
@@ -269,19 +383,7 @@ export const getReactCustomHtmlParser = (
         }
 
         if (name === 'pre') {
-          return (
-            <Text {...props} as="pre" className={css.CodeBlock}>
-              <Scroll
-                direction="Horizontal"
-                variant="Secondary"
-                size="300"
-                visibility="Hover"
-                hideTrack
-              >
-                <div className={css.CodeBlockInternal}>{domToReact(children, opts)}</div>
-              </Scroll>
-            </Text>
-          );
+          return <CodeBlock opts={opts}>{children}</CodeBlock>;
         }
 
         if (name === 'blockquote') {
@@ -331,9 +433,9 @@ export const getReactCustomHtmlParser = (
             }
           } else {
             return (
-              <code className={css.Code} {...props}>
+              <Text as="code" size="T300" className={css.Code} {...props}>
                 {domToReact(children, opts)}
-              </code>
+              </Text>
             );
           }
         }
diff --git a/src/app/plugins/react-prism/ReactPrism.tsx b/src/app/plugins/react-prism/ReactPrism.tsx
index f93c6ef1..ab2e9320 100644
--- a/src/app/plugins/react-prism/ReactPrism.tsx
+++ b/src/app/plugins/react-prism/ReactPrism.tsx
@@ -2,18 +2,307 @@ import React, { MutableRefObject, ReactNode, useEffect, useRef } from 'react';
 
 import Prism from 'prismjs';
 
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-sass';
-import 'prismjs/components/prism-swift';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-go';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-cpp';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-abap.js';
+import 'prismjs/components/prism-abnf.js';
+import 'prismjs/components/prism-actionscript.js';
+import 'prismjs/components/prism-ada.js';
+import 'prismjs/components/prism-agda.js';
+import 'prismjs/components/prism-al.js';
+import 'prismjs/components/prism-antlr4.js';
+import 'prismjs/components/prism-apacheconf.js';
+import 'prismjs/components/prism-apex.js';
+import 'prismjs/components/prism-apl.js';
+import 'prismjs/components/prism-applescript.js';
+import 'prismjs/components/prism-aql.js';
+import 'prismjs/components/prism-arff.js';
+import 'prismjs/components/prism-armasm.js';
+import 'prismjs/components/prism-arturo.js';
+import 'prismjs/components/prism-asciidoc.js';
+import 'prismjs/components/prism-asm6502.js';
+import 'prismjs/components/prism-asmatmel.js';
+import 'prismjs/components/prism-aspnet.js';
+import 'prismjs/components/prism-autohotkey.js';
+import 'prismjs/components/prism-autoit.js';
+import 'prismjs/components/prism-avisynth.js';
+import 'prismjs/components/prism-avro-idl.js';
+import 'prismjs/components/prism-awk.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-basic.js';
+import 'prismjs/components/prism-batch.js';
+import 'prismjs/components/prism-bbcode.js';
+import 'prismjs/components/prism-bbj.js';
+import 'prismjs/components/prism-bicep.js';
+import 'prismjs/components/prism-birb.js';
+import 'prismjs/components/prism-bnf.js';
+import 'prismjs/components/prism-bqn.js';
+import 'prismjs/components/prism-brainfuck.js';
+import 'prismjs/components/prism-brightscript.js';
+import 'prismjs/components/prism-bro.js';
+import 'prismjs/components/prism-bsl.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-cfscript.js';
+import 'prismjs/components/prism-cil.js';
+import 'prismjs/components/prism-cilkc.js';
+import 'prismjs/components/prism-cilkcpp.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-clojure.js';
+import 'prismjs/components/prism-cmake.js';
+import 'prismjs/components/prism-cobol.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-concurnas.js';
+import 'prismjs/components/prism-cooklang.js';
+import 'prismjs/components/prism-coq.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-cshtml.js';
+import 'prismjs/components/prism-csp.js';
+import 'prismjs/components/prism-css-extras.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-csv.js';
+import 'prismjs/components/prism-cue.js';
+import 'prismjs/components/prism-cypher.js';
+import 'prismjs/components/prism-d.js';
+import 'prismjs/components/prism-dart.js';
+import 'prismjs/components/prism-dataweave.js';
+import 'prismjs/components/prism-dax.js';
+import 'prismjs/components/prism-dhall.js';
+import 'prismjs/components/prism-diff.js';
+import 'prismjs/components/prism-dns-zone-file.js';
+import 'prismjs/components/prism-docker.js';
+import 'prismjs/components/prism-dot.js';
+import 'prismjs/components/prism-ebnf.js';
+import 'prismjs/components/prism-editorconfig.js';
+import 'prismjs/components/prism-eiffel.js';
+import 'prismjs/components/prism-ejs.js';
+import 'prismjs/components/prism-elixir.js';
+import 'prismjs/components/prism-elm.js';
+import 'prismjs/components/prism-erb.js';
+import 'prismjs/components/prism-erlang.js';
+import 'prismjs/components/prism-etlua.js';
+import 'prismjs/components/prism-excel-formula.js';
+import 'prismjs/components/prism-factor.js';
+import 'prismjs/components/prism-false.js';
+import 'prismjs/components/prism-firestore-security-rules.js';
+import 'prismjs/components/prism-flow.js';
+import 'prismjs/components/prism-fortran.js';
+import 'prismjs/components/prism-fsharp.js';
+import 'prismjs/components/prism-ftl.js';
+import 'prismjs/components/prism-gap.js';
+import 'prismjs/components/prism-gcode.js';
+import 'prismjs/components/prism-gdscript.js';
+import 'prismjs/components/prism-gedcom.js';
+import 'prismjs/components/prism-gettext.js';
+import 'prismjs/components/prism-gherkin.js';
+import 'prismjs/components/prism-git.js';
+import 'prismjs/components/prism-glsl.js';
+import 'prismjs/components/prism-gml.js';
+import 'prismjs/components/prism-gn.js';
+import 'prismjs/components/prism-go-module.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-gradle.js';
+import 'prismjs/components/prism-graphql.js';
+import 'prismjs/components/prism-groovy.js';
+import 'prismjs/components/prism-haml.js';
+import 'prismjs/components/prism-handlebars.js';
+import 'prismjs/components/prism-haskell.js';
+import 'prismjs/components/prism-haxe.js';
+import 'prismjs/components/prism-hcl.js';
+import 'prismjs/components/prism-hlsl.js';
+import 'prismjs/components/prism-hoon.js';
+import 'prismjs/components/prism-hpkp.js';
+import 'prismjs/components/prism-hsts.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-ichigojam.js';
+import 'prismjs/components/prism-icon.js';
+import 'prismjs/components/prism-icu-message-format.js';
+import 'prismjs/components/prism-idris.js';
+import 'prismjs/components/prism-iecst.js';
+import 'prismjs/components/prism-ignore.js';
+import 'prismjs/components/prism-inform7.js';
+import 'prismjs/components/prism-ini.js';
+import 'prismjs/components/prism-io.js';
+import 'prismjs/components/prism-j.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-javadoclike.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-javastacktrace.js';
+import 'prismjs/components/prism-jexl.js';
+import 'prismjs/components/prism-jolie.js';
+import 'prismjs/components/prism-jq.js';
+import 'prismjs/components/prism-js-extras.js';
+import 'prismjs/components/prism-js-templates.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-json5.js';
+import 'prismjs/components/prism-jsonp.js';
+import 'prismjs/components/prism-jsstacktrace.js';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-julia.js';
+import 'prismjs/components/prism-keepalived.js';
+import 'prismjs/components/prism-keyman.js';
+import 'prismjs/components/prism-kotlin.js';
+import 'prismjs/components/prism-kumir.js';
+import 'prismjs/components/prism-kusto.js';
+import 'prismjs/components/prism-latex.js';
+import 'prismjs/components/prism-latte.js';
+import 'prismjs/components/prism-less.js';
+import 'prismjs/components/prism-lilypond.js';
+import 'prismjs/components/prism-linker-script.js';
+import 'prismjs/components/prism-liquid.js';
+import 'prismjs/components/prism-lisp.js';
+import 'prismjs/components/prism-livescript.js';
+import 'prismjs/components/prism-llvm.js';
+import 'prismjs/components/prism-log.js';
+import 'prismjs/components/prism-lolcode.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-magma.js';
+import 'prismjs/components/prism-makefile.js';
+import 'prismjs/components/prism-markdown.js';
+import 'prismjs/components/prism-markup-templating.js';
+import 'prismjs/components/prism-markup.js';
+import 'prismjs/components/prism-mata.js';
+import 'prismjs/components/prism-matlab.js';
+import 'prismjs/components/prism-maxscript.js';
+import 'prismjs/components/prism-mel.js';
+import 'prismjs/components/prism-mermaid.js';
+import 'prismjs/components/prism-metafont.js';
+import 'prismjs/components/prism-mizar.js';
+import 'prismjs/components/prism-mongodb.js';
+import 'prismjs/components/prism-monkey.js';
+import 'prismjs/components/prism-moonscript.js';
+import 'prismjs/components/prism-n1ql.js';
+import 'prismjs/components/prism-n4js.js';
+import 'prismjs/components/prism-nand2tetris-hdl.js';
+import 'prismjs/components/prism-naniscript.js';
+import 'prismjs/components/prism-nasm.js';
+import 'prismjs/components/prism-neon.js';
+import 'prismjs/components/prism-nevod.js';
+import 'prismjs/components/prism-nginx.js';
+import 'prismjs/components/prism-nim.js';
+import 'prismjs/components/prism-nix.js';
+import 'prismjs/components/prism-nsis.js';
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-ocaml.js';
+import 'prismjs/components/prism-odin.js';
+import 'prismjs/components/prism-opencl.js';
+import 'prismjs/components/prism-openqasm.js';
+import 'prismjs/components/prism-oz.js';
+import 'prismjs/components/prism-parigp.js';
+import 'prismjs/components/prism-parser.js';
+import 'prismjs/components/prism-pascal.js';
+import 'prismjs/components/prism-pascaligo.js';
+import 'prismjs/components/prism-pcaxis.js';
+import 'prismjs/components/prism-peoplecode.js';
+import 'prismjs/components/prism-perl.js';
+import 'prismjs/components/prism-php-extras.js';
+import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-phpdoc.js';
+import 'prismjs/components/prism-plant-uml.js';
+import 'prismjs/components/prism-powerquery.js';
+import 'prismjs/components/prism-powershell.js';
+import 'prismjs/components/prism-processing.js';
+import 'prismjs/components/prism-prolog.js';
+import 'prismjs/components/prism-promql.js';
+import 'prismjs/components/prism-properties.js';
+import 'prismjs/components/prism-protobuf.js';
+import 'prismjs/components/prism-psl.js';
+import 'prismjs/components/prism-pug.js';
+import 'prismjs/components/prism-puppet.js';
+import 'prismjs/components/prism-pure.js';
+import 'prismjs/components/prism-purebasic.js';
+import 'prismjs/components/prism-purescript.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-q.js';
+import 'prismjs/components/prism-qml.js';
+import 'prismjs/components/prism-qore.js';
+import 'prismjs/components/prism-qsharp.js';
+import 'prismjs/components/prism-r.js';
+import 'prismjs/components/prism-reason.js';
+import 'prismjs/components/prism-regex.js';
+import 'prismjs/components/prism-rego.js';
+import 'prismjs/components/prism-renpy.js';
+import 'prismjs/components/prism-rescript.js';
+import 'prismjs/components/prism-rest.js';
+import 'prismjs/components/prism-rip.js';
+import 'prismjs/components/prism-roboconf.js';
+import 'prismjs/components/prism-robotframework.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-rust.js';
+import 'prismjs/components/prism-sas.js';
+import 'prismjs/components/prism-sass.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-scheme.js';
+import 'prismjs/components/prism-scss.js';
+import 'prismjs/components/prism-shell-session.js';
+import 'prismjs/components/prism-smali.js';
+import 'prismjs/components/prism-smalltalk.js';
+import 'prismjs/components/prism-smarty.js';
+import 'prismjs/components/prism-sml.js';
+import 'prismjs/components/prism-solidity.js';
+import 'prismjs/components/prism-solution-file.js';
+import 'prismjs/components/prism-soy.js';
+import 'prismjs/components/prism-splunk-spl.js';
+import 'prismjs/components/prism-sqf.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-squirrel.js';
+import 'prismjs/components/prism-stan.js';
+import 'prismjs/components/prism-stata.js';
+import 'prismjs/components/prism-stylus.js';
+import 'prismjs/components/prism-supercollider.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-systemd.js';
+import 'prismjs/components/prism-t4-templating.js';
+import 'prismjs/components/prism-t4-vb.js';
+import 'prismjs/components/prism-tap.js';
+import 'prismjs/components/prism-tcl.js';
+import 'prismjs/components/prism-textile.js';
+import 'prismjs/components/prism-toml.js';
+import 'prismjs/components/prism-tremor.js';
+import 'prismjs/components/prism-tsx.js';
+import 'prismjs/components/prism-tt2.js';
+import 'prismjs/components/prism-turtle.js';
+import 'prismjs/components/prism-twig.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-typoscript.js';
+import 'prismjs/components/prism-unrealscript.js';
+import 'prismjs/components/prism-uorazor.js';
+import 'prismjs/components/prism-uri.js';
+import 'prismjs/components/prism-v.js';
+import 'prismjs/components/prism-vala.js';
+import 'prismjs/components/prism-vbnet.js';
+import 'prismjs/components/prism-velocity.js';
+import 'prismjs/components/prism-verilog.js';
+import 'prismjs/components/prism-vhdl.js';
+import 'prismjs/components/prism-vim.js';
+import 'prismjs/components/prism-visual-basic.js';
+import 'prismjs/components/prism-warpscript.js';
+import 'prismjs/components/prism-wasm.js';
+import 'prismjs/components/prism-web-idl.js';
+import 'prismjs/components/prism-wgsl.js';
+import 'prismjs/components/prism-wiki.js';
+import 'prismjs/components/prism-wolfram.js';
+import 'prismjs/components/prism-wren.js';
+import 'prismjs/components/prism-xeora.js';
+import 'prismjs/components/prism-xml-doc.js';
+import 'prismjs/components/prism-xojo.js';
+import 'prismjs/components/prism-xquery.js';
+import 'prismjs/components/prism-yaml.js';
+import 'prismjs/components/prism-yang.js';
+import 'prismjs/components/prism-zig.js';
+import 'prismjs/components/prism-arduino.js';
+
+// Broken:
+//
+// import 'prismjs/components/prism-bison.js';
+// import 'prismjs/components/prism-chaiscript.js';
+// import 'prismjs/components/prism-core.js';
+// import 'prismjs/components/prism-crystal.js';
+// import 'prismjs/components/prism-django.js';
+// import 'prismjs/components/prism-javadoc.js';
+// import 'prismjs/components/prism-jsdoc.js';
+// import 'prismjs/components/prism-plsql.js';
+// import 'prismjs/components/prism-racket.js';
+// import 'prismjs/components/prism-sparql.js';
+// import 'prismjs/components/prism-t4-cs.js';
 
 import './ReactPrism.css';
 // using classNames .prism-dark .prism-light from ReactPrism.css
diff --git a/src/app/plugins/via-servers.ts b/src/app/plugins/via-servers.ts
index 75470999..d825a1fd 100644
--- a/src/app/plugins/via-servers.ts
+++ b/src/app/plugins/via-servers.ts
@@ -1,11 +1,19 @@
 import { Room } from 'matrix-js-sdk';
 import { IPowerLevels } from '../hooks/usePowerLevels';
-import { getMxIdServer } from '../utils/matrix';
-import { StateEvent } from '../../types/matrix/room';
+import { creatorsSupported, getMxIdServer } from '../utils/matrix';
+import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
 import { getStateEvent } from '../utils/room';
 
 export const getViaServers = (room: Room): string[] => {
   const getHighestPowerUserId = (): string | undefined => {
+    const creatorEvent = getStateEvent(room, StateEvent.RoomCreate);
+    if (
+      creatorEvent &&
+      creatorsSupported(creatorEvent.getContent<IRoomCreateContent>().room_version)
+    ) {
+      return creatorEvent.getSender();
+    }
+
     const powerLevels = getStateEvent(room, StateEvent.RoomPowerLevels)?.getContent<IPowerLevels>();
 
     if (!powerLevels) return undefined;
diff --git a/src/app/state/backupRestore.ts b/src/app/state/backupRestore.ts
index 2f86b4d5..ad14e5d7 100644
--- a/src/app/state/backupRestore.ts
+++ b/src/app/state/backupRestore.ts
@@ -1,5 +1,5 @@
 import { atom } from 'jotai';
-import { ImportRoomKeyProgressData } from 'matrix-js-sdk/lib/crypto-api';
+import { ImportRoomKeyProgressData, ImportRoomKeyStage } from 'matrix-js-sdk/lib/crypto-api';
 
 export enum BackupProgressStatus {
   Idle,
@@ -39,22 +39,16 @@ export const backupRestoreProgressAtom = atom<
 >(
   (get) => get(baseBackupRestoreProgressAtom),
   (get, set, progress) => {
-    if (progress.stage === 'fetch') {
+    if (progress.stage === ImportRoomKeyStage.Fetch) {
       set(baseBackupRestoreProgressAtom, {
         status: BackupProgressStatus.Fetching,
       });
       return;
     }
 
-    if (progress.stage === 'load_keys') {
+    if (progress.stage === ImportRoomKeyStage.LoadKeys) {
       const { total, successes, failures } = progress;
-      if (total === undefined || successes === undefined || failures === undefined) {
-        // Setting to idle as https://github.com/matrix-org/matrix-js-sdk/issues/4703
-        set(baseBackupRestoreProgressAtom, {
-          status: BackupProgressStatus.Idle,
-        });
-        return;
-      }
+
       const downloaded = successes + failures;
       if (downloaded === total) {
         set(baseBackupRestoreProgressAtom, {
diff --git a/src/app/state/createRoomModal.ts b/src/app/state/createRoomModal.ts
new file mode 100644
index 00000000..81af5d5b
--- /dev/null
+++ b/src/app/state/createRoomModal.ts
@@ -0,0 +1,7 @@
+import { atom } from 'jotai';
+
+export type CreateRoomModalState = {
+  spaceId?: string;
+};
+
+export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);
diff --git a/src/app/state/createSpaceModal.ts b/src/app/state/createSpaceModal.ts
new file mode 100644
index 00000000..fe4db755
--- /dev/null
+++ b/src/app/state/createSpaceModal.ts
@@ -0,0 +1,7 @@
+import { atom } from 'jotai';
+
+export type CreateSpaceModalState = {
+  spaceId?: string;
+};
+
+export const createSpaceModalAtom = atom<CreateSpaceModalState | undefined>(undefined);
diff --git a/src/app/state/hooks/createRoomModal.ts b/src/app/state/hooks/createRoomModal.ts
new file mode 100644
index 00000000..15db7289
--- /dev/null
+++ b/src/app/state/hooks/createRoomModal.ts
@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
+
+export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
+  const data = useAtomValue(createRoomModalAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseCreateRoomModal = (): CloseCallback => {
+  const setSettings = useSetAtom(createRoomModalAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setSettings(undefined);
+  }, [setSettings]);
+
+  return close;
+};
+
+type OpenCallback = (space?: string) => void;
+export const useOpenCreateRoomModal = (): OpenCallback => {
+  const setSettings = useSetAtom(createRoomModalAtom);
+
+  const open: OpenCallback = useCallback(
+    (spaceId) => {
+      setSettings({ spaceId });
+    },
+    [setSettings]
+  );
+
+  return open;
+};
diff --git a/src/app/state/hooks/createSpaceModal.ts b/src/app/state/hooks/createSpaceModal.ts
new file mode 100644
index 00000000..ea7cb47a
--- /dev/null
+++ b/src/app/state/hooks/createSpaceModal.ts
@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { createSpaceModalAtom, CreateSpaceModalState } from '../createSpaceModal';
+
+export const useCreateSpaceModalState = (): CreateSpaceModalState | undefined => {
+  const data = useAtomValue(createSpaceModalAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseCreateSpaceModal = (): CloseCallback => {
+  const setSettings = useSetAtom(createSpaceModalAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setSettings(undefined);
+  }, [setSettings]);
+
+  return close;
+};
+
+type OpenCallback = (space?: string) => void;
+export const useOpenCreateSpaceModal = (): OpenCallback => {
+  const setSettings = useSetAtom(createSpaceModalAtom);
+
+  const open: OpenCallback = useCallback(
+    (spaceId) => {
+      setSettings({ spaceId });
+    },
+    [setSettings]
+  );
+
+  return open;
+};
diff --git a/src/app/state/hooks/userRoomProfile.ts b/src/app/state/hooks/userRoomProfile.ts
new file mode 100644
index 00000000..7fed0c08
--- /dev/null
+++ b/src/app/state/hooks/userRoomProfile.ts
@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { Position, RectCords } from 'folds';
+import { userRoomProfileAtom, UserRoomProfileState } from '../userRoomProfile';
+
+export const useUserRoomProfileState = (): UserRoomProfileState | undefined => {
+  const data = useAtomValue(userRoomProfileAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseUserRoomProfile = (): CloseCallback => {
+  const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setUserRoomProfile(undefined);
+  }, [setUserRoomProfile]);
+
+  return close;
+};
+
+type OpenCallback = (
+  roomId: string,
+  spaceId: string | undefined,
+  userId: string,
+  cords: RectCords,
+  position?: Position
+) => void;
+export const useOpenUserRoomProfile = (): OpenCallback => {
+  const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
+
+  const open: OpenCallback = useCallback(
+    (roomId, spaceId, userId, cords, position) => {
+      setUserRoomProfile({ roomId, spaceId, userId, cords, position });
+    },
+    [setUserRoomProfile]
+  );
+
+  return open;
+};
diff --git a/src/app/state/navToActivePath.ts b/src/app/state/navToActivePath.ts
index 80869146..af90c914 100644
--- a/src/app/state/navToActivePath.ts
+++ b/src/app/state/navToActivePath.ts
@@ -9,6 +9,8 @@ import {
 
 const NAV_TO_ACTIVE_PATH = 'navToActivePath';
 
+const getStoreKey = (userId: string): string => `${NAV_TO_ACTIVE_PATH}${userId}`;
+
 type NavToActivePath = Map<string, Path>;
 
 type NavToActivePathAction =
@@ -25,7 +27,7 @@ type NavToActivePathAction =
 export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], undefined>;
 
 export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom => {
-  const storeKey = `${NAV_TO_ACTIVE_PATH}${userId}`;
+  const storeKey = getStoreKey(userId);
 
   const baseNavToActivePathAtom = atomWithLocalStorage<NavToActivePath>(
     storeKey,
@@ -64,3 +66,7 @@ export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom =>
 
   return navToActivePathAtom;
 };
+
+export const clearNavToActivePathStore = (userId: string) => {
+  localStorage.removeItem(getStoreKey(userId));
+};
diff --git a/src/app/state/searchModal.ts b/src/app/state/searchModal.ts
new file mode 100644
index 00000000..3893e5e3
--- /dev/null
+++ b/src/app/state/searchModal.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const searchModalAtom = atom<boolean>(false);
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 799747ac..31ee6ccb 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -1,6 +1,7 @@
 import { atom } from 'jotai';
 
 const STORAGE_KEY = 'settings';
+export type DateFormat = 'D MMM YYYY' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | '';
 export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500';
 export enum MessageLayout {
   Modern = 0,
@@ -13,6 +14,7 @@ export interface Settings {
   useSystemTheme: boolean;
   lightThemeId?: string;
   darkThemeId?: string;
+  monochromeMode?: boolean;
   isMarkdown: boolean;
   editorToolbar: boolean;
   twitterEmoji: boolean;
@@ -35,6 +37,9 @@ export interface Settings {
   showNotifications: boolean;
   isNotificationSounds: boolean;
 
+  hour24Clock: boolean;
+  dateFormatString: string;
+
   developerTools: boolean;
 }
 
@@ -43,6 +48,7 @@ const defaultSettings: Settings = {
   useSystemTheme: true,
   lightThemeId: undefined,
   darkThemeId: undefined,
+  monochromeMode: false,
   isMarkdown: true,
   editorToolbar: false,
   twitterEmoji: false,
@@ -65,6 +71,9 @@ const defaultSettings: Settings = {
   showNotifications: true,
   isNotificationSounds: true,
 
+  hour24Clock: false,
+  dateFormatString: 'D MMM YYYY',
+
   developerTools: false,
 };
 
diff --git a/src/app/state/userRoomProfile.ts b/src/app/state/userRoomProfile.ts
new file mode 100644
index 00000000..cf4e403a
--- /dev/null
+++ b/src/app/state/userRoomProfile.ts
@@ -0,0 +1,12 @@
+import { Position, RectCords } from 'folds';
+import { atom } from 'jotai';
+
+export type UserRoomProfileState = {
+  userId: string;
+  roomId: string;
+  spaceId?: string;
+  cords: RectCords;
+  position?: Position;
+};
+
+export const userRoomProfileAtom = atom<UserRoomProfileState | undefined>(undefined);
diff --git a/src/app/styles/ContainerColor.css.ts b/src/app/styles/ContainerColor.css.ts
index cb1f933d..cefc5256 100644
--- a/src/app/styles/ContainerColor.css.ts
+++ b/src/app/styles/ContainerColor.css.ts
@@ -1,6 +1,6 @@
 import { ComplexStyleRule } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { ContainerColor as TContainerColor, DefaultReset, color } from 'folds';
+import { ContainerColor as TContainerColor, DefaultReset, color, config } from 'folds';
 
 const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
   vars: {
@@ -9,6 +9,20 @@ const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
     outlineColor: color[variant].ContainerLine,
     color: color[variant].OnContainer,
   },
+  selectors: {
+    'button&[aria-pressed=true]': {
+      backgroundColor: color[variant].ContainerActive,
+    },
+    'button&:hover, &:focus-visible': {
+      backgroundColor: color[variant].ContainerHover,
+    },
+    'button&:active': {
+      backgroundColor: color[variant].ContainerActive,
+    },
+    'button&[disabled]': {
+      opacity: config.opacity.Disabled,
+    },
+  },
 });
 
 export const ContainerColor = recipe({
diff --git a/src/app/styles/CustomHtml.css.ts b/src/app/styles/CustomHtml.css.ts
index d86a3236..f717669c 100644
--- a/src/app/styles/CustomHtml.css.ts
+++ b/src/app/styles/CustomHtml.css.ts
@@ -41,16 +41,19 @@ export const BlockQuote = style([
 ]);
 
 const BaseCode = style({
-  fontFamily: 'monospace',
-  color: color.Secondary.OnContainer,
-  background: color.Secondary.Container,
-  border: `${config.borderWidth.B300} solid ${color.Secondary.ContainerLine}`,
+  color: color.SurfaceVariant.OnContainer,
+  background: color.SurfaceVariant.Container,
+  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
   borderRadius: config.radii.R300,
 });
+const CodeFont = style({
+  fontFamily: 'monospace',
+});
 
 export const Code = style([
   DefaultReset,
   BaseCode,
+  CodeFont,
   {
     padding: `0 ${config.space.S100}`,
   },
@@ -85,10 +88,32 @@ export const CodeBlock = style([
   MarginSpaced,
   {
     fontStyle: 'normal',
+    position: 'relative',
+    overflow: 'hidden',
   },
 ]);
-export const CodeBlockInternal = style({
-  padding: `${config.space.S200} ${config.space.S200} 0`,
+export const CodeBlockHeader = style({
+  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
+  borderBottomWidth: config.borderWidth.B300,
+  gap: config.space.S200,
+});
+export const CodeBlockInternal = style([
+  CodeFont,
+  {
+    padding: `${config.space.S200} ${config.space.S200} 0`,
+    minWidth: toRem(200),
+  },
+]);
+
+export const CodeBlockBottomShadow = style({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  pointerEvents: 'none',
+
+  height: config.space.S400,
+  background: `linear-gradient(to top, #00000022, #00000000)`,
 });
 
 export const List = style([
diff --git a/src/app/utils/blurHash.ts b/src/app/utils/blurHash.ts
index 3fe1ade0..566f6d18 100644
--- a/src/app/utils/blurHash.ts
+++ b/src/app/utils/blurHash.ts
@@ -1,4 +1,4 @@
-import { encode } from 'blurhash';
+import { encode, isBlurhashValid } from 'blurhash';
 
 export const encodeBlurHash = (
   img: HTMLImageElement | HTMLVideoElement,
@@ -17,3 +17,13 @@ export const encodeBlurHash = (
   const data = context.getImageData(0, 0, canvas.width, canvas.height);
   return encode(data.data, data.width, data.height, 4, 4);
 };
+
+export const validBlurHash = (hash?: string): string | undefined => {
+  if (typeof hash === 'string') {
+    const validity = isBlurhashValid(hash);
+
+    return validity.result ? hash : undefined;
+  }
+
+  return undefined;
+};
diff --git a/src/app/utils/common.ts b/src/app/utils/common.ts
index d230c6bb..678f1b6e 100644
--- a/src/app/utils/common.ts
+++ b/src/app/utils/common.ts
@@ -18,6 +18,13 @@ export const millisecondsToMinutesAndSeconds = (milliseconds: number): string =>
   return `${mm}:${ss < 10 ? '0' : ''}${ss}`;
 };
 
+export const millisecondsToMinutes = (milliseconds: number): string => {
+  const seconds = Math.floor(milliseconds / 1000);
+  const mm = Math.floor(seconds / 60);
+
+  return mm.toString();
+};
+
 export const secondsToMinutesAndSeconds = (seconds: number): string => {
   const mm = Math.floor(seconds / 60);
   const ss = Math.round(seconds % 60);
@@ -125,3 +132,9 @@ export const suffixRename = (name: string, validator: (newName: string) => boole
 };
 
 export const replaceSpaceWithDash = (str: string): string => str.replace(/ /g, '-');
+
+export const splitWithSpace = (content: string): string[] => {
+  const trimmedContent = content.trim();
+  if (trimmedContent === '') return [];
+  return trimmedContent.split(' ');
+};
diff --git a/src/app/utils/dom.ts b/src/app/utils/dom.ts
index f4c3f719..80db3ae7 100644
--- a/src/app/utils/dom.ts
+++ b/src/app/utils/dom.ts
@@ -43,6 +43,17 @@ export const canFitInScrollView = (
 
 export type FilesOrFile<T extends boolean | undefined = undefined> = T extends true ? File[] : File;
 
+export const getFilesFromFileList = (fileList: FileList): File[] => {
+  const files: File[] = [];
+
+  for (let i = 0; i < fileList.length; i += 1) {
+    const file: File | undefined = fileList[i];
+    if (file instanceof File) files.push(file);
+  }
+
+  return files;
+};
+
 export const selectFile = <M extends boolean | undefined = undefined>(
   accept: string,
   multiple?: M
@@ -58,7 +69,7 @@ export const selectFile = <M extends boolean | undefined = undefined>(
       if (!fileList) {
         resolve(undefined);
       } else {
-        const files: File[] = [...fileList].filter((file) => file);
+        const files: File[] = getFilesFromFileList(fileList);
         resolve((multiple ? files : files[0]) as FilesOrFile<M>);
       }
       input.removeEventListener('change', changeHandler);
@@ -70,7 +81,7 @@ export const selectFile = <M extends boolean | undefined = undefined>(
 
 export const getDataTransferFiles = (dataTransfer: DataTransfer): File[] | undefined => {
   const fileList = dataTransfer.files;
-  const files = [...fileList].filter((file) => file);
+  const files: File[] = getFilesFromFileList(fileList);
   if (files.length === 0) return undefined;
   return files;
 };
@@ -224,3 +235,10 @@ export const notificationPermission = (permission: NotificationPermission) => {
   }
   return false;
 };
+
+export const getMouseEventCords = (event: MouseEvent) => ({
+  x: event.clientX,
+  y: event.clientY,
+  width: 0,
+  height: 0,
+});
diff --git a/src/app/utils/matrix.ts b/src/app/utils/matrix.ts
index cd3c0862..4c86c4e2 100644
--- a/src/app/utils/matrix.ts
+++ b/src/app/utils/matrix.ts
@@ -13,14 +13,19 @@ import {
   UploadProgress,
   UploadResponse,
 } from 'matrix-js-sdk';
+import to from 'await-to-js';
 import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
 import { AccountDataEvent } from '../../types/matrix/accountData';
 import { getStateEvent } from './room';
-import { StateEvent } from '../../types/matrix/room';
+import { Membership, StateEvent } from '../../types/matrix/room';
 
-export const matchMxId = (id: string): RegExpMatchArray | null => id.match(/^([@!$+#])(.+):(\S+)$/);
+const DOMAIN_REGEX = /\b(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}\b/;
 
-export const validMxId = (id: string): boolean => !!matchMxId(id);
+export const isServerName = (serverName: string): boolean => DOMAIN_REGEX.test(serverName);
+
+const matchMxId = (id: string): RegExpMatchArray | null => id.match(/^([@$+#])([^\s:]+):(\S+)$/);
+
+const validMxId = (id: string): boolean => !!matchMxId(id);
 
 export const getMxIdServer = (userId: string): string | undefined => matchMxId(userId)?.[3];
 
@@ -28,7 +33,7 @@ export const getMxIdLocalPart = (userId: string): string | undefined => matchMxI
 
 export const isUserId = (id: string): boolean => validMxId(id) && id.startsWith('@');
 
-export const isRoomId = (id: string): boolean => validMxId(id) && id.startsWith('!');
+export const isRoomId = (id: string): boolean => id.startsWith('!');
 
 export const isRoomAlias = (id: string): boolean => validMxId(id) && id.startsWith('#');
 
@@ -45,7 +50,11 @@ export const getCanonicalAliasOrRoomId = (mx: MatrixClient, roomId: string): str
   const room = mx.getRoom(roomId);
   if (!room) return roomId;
   if (getStateEvent(room, StateEvent.RoomTombstone) !== undefined) return roomId;
-  return room.getCanonicalAlias() || roomId;
+  const alias = room.getCanonicalAlias();
+  if (alias && getCanonicalAliasRoomId(mx, alias) === roomId) {
+    return alias;
+  }
+  return roomId;
 };
 
 export const getImageInfo = (img: HTMLImageElement, fileOrBlob: File | Blob): IImageInfo => {
@@ -173,7 +182,12 @@ export const eventWithShortcode = (ev: MatrixEvent) =>
 export const getDMRoomFor = (mx: MatrixClient, userId: string): Room | undefined => {
   const dmLikeRooms = mx
     .getRooms()
-    .filter((room) => room.hasEncryptionStateEvent() && room.getMembers().length <= 2);
+    .filter(
+      (room) =>
+        room.getMyMembership() === Membership.Join &&
+        room.hasEncryptionStateEvent() &&
+        room.getMembers().length <= 2
+    );
 
   return dmLikeRooms.find((room) => room.getMember(userId));
 };
@@ -216,8 +230,11 @@ export const addRoomIdToMDirect = async (
   roomId: string,
   userId: string
 ): Promise<void> => {
-  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
-  const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
+  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct as any);
+  let userIdToRoomIds: Record<string, string[]> = {};
+
+  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)
@@ -238,12 +255,15 @@ export const addRoomIdToMDirect = async (
   }
   userIdToRoomIds[userId] = roomIds;
 
-  await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
+  await mx.setAccountData(AccountDataEvent.Direct as any, userIdToRoomIds as any);
 };
 
 export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string): Promise<void> => {
-  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
-  const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
+  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct as any);
+  let userIdToRoomIds: Record<string, string[]> = {};
+
+  if (typeof mDirectsEvent !== 'undefined')
+    userIdToRoomIds = structuredClone(mDirectsEvent.getContent());
 
   Object.keys(userIdToRoomIds).forEach((targetUserId) => {
     const roomIds = userIdToRoomIds[targetUserId];
@@ -253,7 +273,7 @@ export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string):
     }
   });
 
-  await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
+  await mx.setAccountData(AccountDataEvent.Direct as any, userIdToRoomIds as any);
 };
 
 export const mxcUrlToHttp = (
@@ -292,3 +312,63 @@ export const downloadEncryptedMedia = async (
 
   return decryptedContent;
 };
+
+export const rateLimitedActions = async <T, R = void>(
+  data: T[],
+  callback: (item: T, index: number) => Promise<R>,
+  maxRetryCount?: number
+) => {
+  let retryCount = 0;
+
+  let actionInterval = 0;
+
+  const sleepForMs = (ms: number) =>
+    new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+
+  const performAction = async (dataItem: T, index: number) => {
+    const [err] = await to<R, MatrixError>(callback(dataItem, index));
+
+    if (err?.httpStatus === 429) {
+      if (retryCount === maxRetryCount) {
+        return;
+      }
+
+      const waitMS = err.getRetryAfterMs() ?? 3000;
+      actionInterval = waitMS * 1.5;
+      await sleepForMs(waitMS);
+      retryCount += 1;
+
+      await performAction(dataItem, index);
+    }
+  };
+
+  for (let i = 0; i < data.length; i += 1) {
+    const dataItem = data[i];
+    retryCount = 0;
+    // eslint-disable-next-line no-await-in-loop
+    await performAction(dataItem, i);
+    if (actionInterval > 0) {
+      // eslint-disable-next-line no-await-in-loop
+      await sleepForMs(actionInterval);
+    }
+  }
+};
+
+export const knockSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6'];
+  return !unsupportedVersion.includes(version);
+};
+export const restrictedSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7'];
+  return !unsupportedVersion.includes(version);
+};
+export const knockRestrictedSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+  return !unsupportedVersion.includes(version);
+};
+export const creatorsSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
+  return !unsupportedVersion.includes(version);
+};
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 3bf8cd5a..b4bba2ad 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -5,6 +5,7 @@ import {
   EventTimelineSet,
   EventType,
   IMentions,
+  IPowerLevelsContent,
   IPushRule,
   IPushRules,
   JoinRule,
@@ -19,6 +20,8 @@ import {
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import { AccountDataEvent } from '../../types/matrix/accountData';
 import {
+  IRoomCreateContent,
+  Membership,
   MessageEvent,
   NotificationType,
   RoomToParents,
@@ -41,7 +44,7 @@ export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[]
 export const getAccountData = (
   mx: MatrixClient,
   eventType: AccountDataEvent
-): MatrixEvent | undefined => mx.getAccountData(eventType);
+): MatrixEvent | undefined => mx.getAccountData(eventType as any);
 
 export const getMDirects = (mDirectEvent: MatrixEvent): Set<string> => {
   const roomIds = new Set<string>();
@@ -171,7 +174,7 @@ export const getNotificationType = (mx: MatrixClient, roomId: string): Notificat
   }
 
   if (!roomPushRule) {
-    const overrideRules = mx.getAccountData('m.push_rules')?.getContent<IPushRules>()
+    const overrideRules = mx.getAccountData(EventType.PushRules)?.getContent<IPushRules>()
       ?.global?.override;
     if (!overrideRules) return NotificationType.Default;
 
@@ -292,9 +295,14 @@ export const getDirectRoomAvatarUrl = (
   useAuthentication = false
 ): string | undefined => {
   const mxcUrl = room.getAvatarFallbackMember()?.getMxcAvatarUrl();
-  return mxcUrl
-    ? mx.mxcUrlToHttp(mxcUrl, size, size, 'crop', undefined, false, useAuthentication) ?? undefined
-    : undefined;
+
+  if (!mxcUrl) {
+    return getRoomAvatarUrl(mx, room, size, useAuthentication);
+  }
+
+  return (
+    mx.mxcUrlToHttp(mxcUrl, size, size, 'crop', undefined, false, useAuthentication) ?? undefined
+  );
 };
 
 export const trimReplyFromBody = (body: string): string => {
@@ -443,3 +451,103 @@ export const getMentionContent = (userIds: string[], room: boolean): IMentions =
 
   return mMentions;
 };
+
+export const getCommonRooms = (
+  mx: MatrixClient,
+  rooms: string[],
+  otherUserId: string
+): string[] => {
+  const commonRooms: string[] = [];
+
+  rooms.forEach((roomId) => {
+    const room = mx.getRoom(roomId);
+    if (!room || room.getMyMembership() !== Membership.Join) return;
+
+    const common = room.hasMembershipState(otherUserId, Membership.Join);
+    if (common) {
+      commonRooms.push(roomId);
+    }
+  });
+
+  return commonRooms;
+};
+
+export const bannedInRooms = (mx: MatrixClient, rooms: string[], otherUserId: string): boolean =>
+  rooms.some((roomId) => {
+    const room = mx.getRoom(roomId);
+    if (!room || room.getMyMembership() !== Membership.Join) return false;
+
+    const banned = room.hasMembershipState(otherUserId, Membership.Ban);
+    return banned;
+  });
+
+export const getAllVersionsRoomCreator = (room: Room): Set<string> => {
+  const creators = new Set<string>();
+
+  const createEvent = getStateEvent(room, StateEvent.RoomCreate);
+  const createContent = createEvent?.getContent<IRoomCreateContent>();
+  const creator = createEvent?.getSender();
+  if (typeof creator === 'string') creators.add(creator);
+
+  if (createContent && Array.isArray(createContent.additional_creators)) {
+    createContent.additional_creators.forEach((c) => {
+      if (typeof c === 'string') creators.add(c);
+    });
+  }
+
+  return creators;
+};
+
+export const guessPerfectParent = (
+  mx: MatrixClient,
+  roomId: string,
+  parents: string[]
+): string | undefined => {
+  if (parents.length === 1) {
+    return parents[0];
+  }
+
+  const getSpecialUsers = (rId: string): string[] => {
+    const specialUsers: Set<string> = new Set();
+
+    const r = mx.getRoom(rId);
+    if (!r) return [];
+
+    getAllVersionsRoomCreator(r).forEach((c) => specialUsers.add(c));
+
+    const powerLevels = getStateEvent(
+      r,
+      StateEvent.RoomPowerLevels
+    )?.getContent<IPowerLevelsContent>();
+
+    const { users_default: usersDefault, users } = powerLevels ?? {};
+    const defaultPower = typeof usersDefault === 'number' ? usersDefault : 0;
+
+    if (typeof users === 'object')
+      Object.keys(users).forEach((userId) => {
+        if (users[userId] > defaultPower) {
+          specialUsers.add(userId);
+        }
+      });
+
+    return Array.from(specialUsers);
+  };
+
+  let perfectParent: string | undefined;
+  let score = 0;
+
+  const roomSpecialUsers = getSpecialUsers(roomId);
+  parents.forEach((parentId) => {
+    const parentSpecialUsers = getSpecialUsers(parentId);
+    const matchedUsersCount = parentSpecialUsers.filter((userId) =>
+      roomSpecialUsers.includes(userId)
+    ).length;
+
+    if (matchedUsersCount > score) {
+      score = matchedUsersCount;
+      perfectParent = parentId;
+    }
+  });
+
+  return perfectParent;
+};
diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts
index 3ee6720c..8f1e30e9 100644
--- a/src/app/utils/time.ts
+++ b/src/app/utils/time.ts
@@ -9,12 +9,29 @@ export const today = (ts: number): boolean => dayjs(ts).isToday();
 
 export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday();
 
-export const timeHourMinute = (ts: number): string => dayjs(ts).format('hh:mm A');
+export const timeHour = (ts: number, hour24Clock: boolean): string =>
+  dayjs(ts).format(hour24Clock ? 'HH' : 'hh');
+export const timeMinute = (ts: number): string => dayjs(ts).format('mm');
+export const timeAmPm = (ts: number): string => dayjs(ts).format('A');
+export const timeDay = (ts: number): string => dayjs(ts).format('D');
+export const timeMon = (ts: number): string => dayjs(ts).format('MMM');
+export const timeMonth = (ts: number): string => dayjs(ts).format('MMMM');
+export const timeYear = (ts: number): string => dayjs(ts).format('YYYY');
 
-export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY');
+export const timeHourMinute = (ts: number, hour24Clock: boolean): string =>
+  dayjs(ts).format(hour24Clock ? 'HH:mm' : 'hh:mm A');
+
+export const timeDayMonYear = (ts: number, dateFormatString: string): string =>
+  dayjs(ts).format(dateFormatString);
 
 export const timeDayMonthYear = (ts: number): string => dayjs(ts).format('D MMMM YYYY');
 
+export const daysInMonth = (month: number, year: number): number =>
+  dayjs(`${year}-${month}-1`).daysInMonth();
+
+export const dateFor = (year: number, month: number, day: number): number =>
+  dayjs(`${year}-${month}-${day}`).valueOf();
+
 export const inSameDay = (ts1: number, ts2: number): boolean => {
   const dt1 = new Date(ts1);
   const dt2 = new Date(ts2);
@@ -33,3 +50,37 @@ export const minuteDifference = (ts1: number, ts2: number): number => {
   diff /= 60;
   return Math.abs(Math.round(diff));
 };
+
+export const hour24to12 = (hour24: number): number => {
+  const h = hour24 % 12;
+
+  if (h === 0) return 12;
+  return h;
+};
+
+export const hour12to24 = (hour: number, pm: boolean): number => {
+  if (hour === 12) {
+    return pm ? 12 : 0;
+  }
+  return pm ? hour + 12 : hour;
+};
+
+export const secondsToMs = (seconds: number) => seconds * 1000;
+
+export const minutesToMs = (minutes: number) => minutes * secondsToMs(60);
+
+export const hoursToMs = (hour: number) => hour * minutesToMs(60);
+
+export const daysToMs = (days: number) => days * hoursToMs(24);
+
+export const getToday = () => {
+  const nowTs = Date.now();
+  const date = dayjs(nowTs);
+  return dateFor(date.year(), date.month() + 1, date.date());
+};
+
+export const getYesterday = () => {
+  const nowTs = Date.now() - daysToMs(1);
+  const date = dayjs(nowTs);
+  return dateFor(date.year(), date.month() + 1, date.date());
+};
diff --git a/src/client/action/room.js b/src/client/action/room.js
index 90b74810..e39aeed8 100644
--- a/src/client/action/room.js
+++ b/src/client/action/room.js
@@ -12,7 +12,7 @@ function addRoomToMDirect(mx, roomId, userId) {
   const mDirectsEvent = mx.getAccountData('m.direct');
   let userIdToRoomIds = {};
 
-  if (typeof mDirectsEvent !== 'undefined') userIdToRoomIds = mDirectsEvent.getContent();
+  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)
@@ -93,11 +93,8 @@ function convertToRoom(mx, roomId) {
  * @param {string[]} via
  */
 async function join(mx, roomIdOrAlias, isDM = false, via = undefined) {
-  const roomIdParts = roomIdOrAlias.split(':');
-  const viaServers = via || [roomIdParts[1]];
-
   try {
-    const resultRoom = await mx.joinRoom(roomIdOrAlias, { viaServers });
+    const resultRoom = await mx.joinRoom(roomIdOrAlias, { viaServers: via });
 
     if (isDM) {
       const targetUserId = guessDMRoomTargetId(mx.getRoom(resultRoom.roomId), mx.getUserId());
diff --git a/src/client/initMatrix.ts b/src/client/initMatrix.ts
index 7c774cf1..b80a080f 100644
--- a/src/client/initMatrix.ts
+++ b/src/client/initMatrix.ts
@@ -1,11 +1,7 @@
 import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from 'matrix-js-sdk';
-import { logger } from 'matrix-js-sdk/lib/logger';
 
 import { cryptoCallbacks } from './state/secretStorageKeys';
-
-if (import.meta.env.PROD) {
-  logger.disableAll();
-}
+import { clearNavToActivePathStore } from '../app/state/navToActivePath';
 
 type Session = {
   baseUrl: string;
@@ -38,7 +34,6 @@ export const initClient = async (session: Session): Promise<MatrixClient> => {
   await indexedDBStore.startup();
   await mx.initRustCrypto();
 
-  mx.setGlobalErrorOnUnknownDevices(false);
   mx.setMaxListeners(50);
 
   return mx;
@@ -52,6 +47,7 @@ export const startClient = async (mx: MatrixClient) => {
 
 export const clearCacheAndReload = async (mx: MatrixClient) => {
   mx.stopClient();
+  clearNavToActivePathStore(mx.getSafeUserId());
   await mx.store.deleteAllData();
   window.location.reload();
 };
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index c79229b9..6f4fabe4 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -1,5 +1,5 @@
 const cons = {
-  version: '4.6.0',
+  version: '4.9.1',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',
diff --git a/src/types/matrix/accountData.ts b/src/types/matrix/accountData.ts
index 1c6eee89..b9d81492 100644
--- a/src/types/matrix/accountData.ts
+++ b/src/types/matrix/accountData.ts
@@ -19,6 +19,8 @@ export enum AccountDataEvent {
   MegolmBackupV1 = 'm.megolm_backup.v1',
 }
 
+export type MDirectContent = Record<string, string[]>;
+
 export type SecretStorageDefaultKeyContent = {
   key: string;
 };
diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index 65dc35f4..b866fd77 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -1,3 +1,5 @@
+import { IImageInfo } from './common';
+
 export enum Membership {
   Invite = 'invite',
   Knock = 'knock',
@@ -68,8 +70,9 @@ export type IRoomCreateContent = {
   ['m.federate']?: boolean;
   room_version: string;
   type?: string;
+  additional_creators?: string[];
   predecessor?: {
-    event_id: string;
+    event_id?: string;
     room_id: string;
   };
 };
@@ -93,3 +96,13 @@ export type MuteChanges = {
   added: string[];
   removed: string[];
 };
+
+export type MemberPowerTagIcon = {
+  key?: string;
+  info?: IImageInfo;
+};
+export type MemberPowerTag = {
+  name: string;
+  color?: string;
+  icon?: MemberPowerTagIcon;
+};
diff --git a/vite.config.js b/vite.config.js
index 9c8d88bc..dfa02fc4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,8 @@ import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfil
 import inject from '@rollup/plugin-inject';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import { VitePWA } from 'vite-plugin-pwa';
+import fs from 'fs';
+import path from 'path';
 import buildConfig from './build.config';
 
 const copyFiles = {
@@ -39,6 +41,32 @@ const copyFiles = {
   ],
 };
 
+function serverMatrixSdkCryptoWasm(wasmFilePath) {
+  return {
+    name: 'vite-plugin-serve-matrix-sdk-crypto-wasm',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.url === wasmFilePath) {
+          const resolvedPath = path.join(path.resolve(), "/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm");
+
+          if (fs.existsSync(resolvedPath)) {
+            res.setHeader('Content-Type', 'application/wasm');
+            res.setHeader('Cache-Control', 'no-cache');
+
+            const fileStream = fs.createReadStream(resolvedPath);
+            fileStream.pipe(res);
+          } else {
+            res.writeHead(404);
+            res.end('File not found');
+          }
+        } else {
+          next();
+        }
+      });
+    },
+  };
+}
+
 export default defineConfig({
   appType: 'spa',
   publicDir: false,
@@ -46,8 +74,13 @@ export default defineConfig({
   server: {
     port: 8080,
     host: true,
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
   },
   plugins: [
+    serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
     topLevelAwait({
       // The export name of top-level await promise for each chunk module
       promiseExportName: '__tla',