diff --git a/.github/workflows/build-pull-request.yml b/.github/workflows/build-pull-request.yml
index 6d80727a..441da0de 100644
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v4.6.1
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v4.6.1
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: pr
           path: ./pr.txt
diff --git a/contrib/caddy/caddyfile b/contrib/caddy/caddyfile
index e55efe92..d23dcccb 100644
--- a/contrib/caddy/caddyfile
+++ b/contrib/caddy/caddyfile
@@ -1,6 +1,6 @@
+# more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
 cinny.domain.tld {
-  @nativeRouter not file {path} /
-  rewrite @nativeRouter {http.matchers.file.relative}
-  root * /path/to/caddy/dist
+  root * /path/to/cinny/dist
+  try_files {path} / index.html
   file_server
 }
diff --git a/package-lock.json b/package-lock.json
index 83c6facd..ac6f5d30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "await-to-js": "3.0.0",
         "blurhash": "2.0.4",
         "browser-encrypt-attachment": "0.3.0",
+        "chroma-js": "3.1.2",
         "classnames": "2.3.2",
         "dateformat": "5.0.3",
         "dayjs": "1.11.10",
@@ -74,6 +75,7 @@
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
+        "@types/chroma-js": "3.1.1",
         "@types/file-saver": "2.0.5",
         "@types/is-hotkey": "0.1.10",
         "@types/node": "18.11.18",
@@ -97,7 +99,7 @@
         "prettier": "2.8.1",
         "sass": "1.56.2",
         "typescript": "4.9.4",
-        "vite": "5.4.12",
+        "vite": "5.4.15",
         "vite-plugin-pwa": "0.20.5",
         "vite-plugin-static-copy": "1.0.4",
         "vite-plugin-top-level-await": "1.4.4"
@@ -4573,6 +4575,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/chroma-js": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-3.1.1.tgz",
+      "integrity": "sha512-SFCr4edNkZ1bGaLzGz7rgR1bRzVX4MmMxwsIa3/Bh6ose8v+hRpneoizHv0KChdjxaXyjRtaMq7sCuZSzPomQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -5730,6 +5739,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-3.1.2.tgz",
+      "integrity": "sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg==",
+      "license": "(BSD-3-Clause AND Apache-2.0)"
+    },
     "node_modules/classnames": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
@@ -11289,9 +11304,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.12.tgz",
-      "integrity": "sha512-KwUaKB27TvWwDJr1GjjWthLMATbGEbeWYZIbGZ5qFIsgPP3vWzLu4cVooqhm5/Z2SPDUMjyPVjTztm5tYKwQxA==",
+      "version": "5.4.15",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.15.tgz",
+      "integrity": "sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
diff --git a/package.json b/package.json
index 59273043..dbc5e105 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "await-to-js": "3.0.0",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
+    "chroma-js": "3.1.2",
     "classnames": "2.3.2",
     "dateformat": "5.0.3",
     "dayjs": "1.11.10",
@@ -85,6 +86,7 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
+    "@types/chroma-js": "3.1.1",
     "@types/file-saver": "2.0.5",
     "@types/is-hotkey": "0.1.10",
     "@types/node": "18.11.18",
@@ -108,7 +110,7 @@
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "5.4.12",
+    "vite": "5.4.15",
     "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/components/JoinRulesSwitcher.tsx b/src/app/components/JoinRulesSwitcher.tsx
index ddd1903f..e78c19ce 100644
--- a/src/app/components/JoinRulesSwitcher.tsx
+++ b/src/app/components/JoinRulesSwitcher.tsx
@@ -29,6 +29,17 @@ export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
     }),
     []
   );
+export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
+  useMemo(
+    () => ({
+      [JoinRule.Invite]: Icons.SpaceLock,
+      [JoinRule.Knock]: Icons.SpaceLock,
+      [JoinRule.Restricted]: Icons.Space,
+      [JoinRule.Public]: Icons.SpaceGlobe,
+      [JoinRule.Private]: Icons.SpaceLock,
+    }),
+    []
+  );
 
 type JoinRuleLabels = Record<JoinRule, string>;
 export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 55b0ffc2..2457e5e3 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
+import { config } from 'folds';
 import {
   AudioContent,
   DownloadFile,
@@ -29,7 +30,7 @@ import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
-import {IImageContent} from "../../types/matrix/common";
+import { IImageContent } from '../../types/matrix/common';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -70,9 +71,10 @@ export function RenderMessageContent({
   };
   const renderCaption = () => {
     const content: IImageContent = getContent();
-    if(content.filename && content.filename !== content.body) {
+    if (content.filename && content.filename !== content.body) {
       return (
         <MText
+          style={{ marginTop: config.space.S200 }}
           edited={edited}
           content={content}
           renderBody={(props) => (
@@ -85,41 +87,40 @@ export function RenderMessageContent({
           )}
           renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
         />
-      )
+      );
     }
     return null;
-  }
+  };
 
   const renderFile = () => (
     <>
       <MFile
         content={getContent()}
         renderFileContent={({ body, mimeType, info, encInfo, url }) => (
-            <FileContent
-              body={body}
-              mimeType={mimeType}
-              renderAsPdfFile={() => (
-                <ReadPdfFile
-                  body={body}
-                  mimeType={mimeType}
-                  url={url}
-                  encInfo={encInfo}
-                  renderViewer={(p) => <PdfViewer {...p} />}
-                />
-              )}
-              renderAsTextFile={() => (
-                <ReadTextFile
-                  body={body}
-                  mimeType={mimeType}
-                  url={url}
-                  encInfo={encInfo}
-                  renderViewer={(p) => <TextViewer {...p} />}
-                />
-              )}
-            >
-              <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
-            </FileContent>
-
+          <FileContent
+            body={body}
+            mimeType={mimeType}
+            renderAsPdfFile={() => (
+              <ReadPdfFile
+                body={body}
+                mimeType={mimeType}
+                url={url}
+                encInfo={encInfo}
+                renderViewer={(p) => <PdfViewer {...p} />}
+              />
+            )}
+            renderAsTextFile={() => (
+              <ReadTextFile
+                body={body}
+                mimeType={mimeType}
+                url={url}
+                encInfo={encInfo}
+                renderViewer={(p) => <TextViewer {...p} />}
+              />
+            )}
+          >
+            <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
+          </FileContent>
         )}
         outlined={outlineAttachment}
       />
@@ -188,12 +189,12 @@ export function RenderMessageContent({
         <MImage
           content={getContent()}
           renderImageContent={(props) => (
-              <ImageContent
-                  {...props}
-                  autoPlay={mediaAutoLoad}
-                  renderImage={(p) => <Image {...p} loading="lazy" />}
-                  renderViewer={(p) => <ImageViewer {...p} />}
-              />
+            <ImageContent
+              {...props}
+              autoPlay={mediaAutoLoad}
+              renderImage={(p) => <Image {...p} loading="lazy" />}
+              renderViewer={(p) => <ImageViewer {...p} />}
+            />
           )}
           outlined={outlineAttachment}
         />
@@ -218,13 +219,13 @@ export function RenderMessageContent({
               renderThumbnail={
                 mediaAutoLoad
                   ? () => (
-                    <ThumbnailContent
-                      info={info}
-                      renderImage={(src) => (
-                        <Image alt={body} title={body} src={src} loading="lazy" />
-                      )}
-                    />
-                  )
+                      <ThumbnailContent
+                        info={info}
+                        renderImage={(src) => (
+                          <Image alt={body} title={body} src={src} loading="lazy" />
+                        )}
+                      />
+                    )
                   : undefined
               }
               renderVideo={(p) => <Video {...p} />}
@@ -234,7 +235,6 @@ export function RenderMessageContent({
         />
         {renderCaption()}
       </>
-
     );
   }
 
@@ -251,7 +251,6 @@ export function RenderMessageContent({
         />
         {renderCaption()}
       </>
-
     );
   }
 
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index cea5220b..15c95ddf 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
@@ -74,8 +74,9 @@ type MTextProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  style?: CSSProperties;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) {
+export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -88,6 +89,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextP
       <MessageTextBody
         preWrap={typeof customBody !== 'string'}
         jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+        style={style}
       >
         {renderBody({
           body: trimmedBody,
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 54b1849f..563d1bf8 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -2,7 +2,6 @@ import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, Room } from 'matrix-js-sdk';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import colorMXID from '../../../util/colorMXID';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { LinePlaceholder } from './placeholder';
@@ -11,6 +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';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -49,10 +50,28 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
+  getPowerLevel?: (userId: string) => number;
+  getPowerLevelTag?: GetPowerLevelTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
 };
 
 export const Reply = as<'div', ReplyProps>(
-  ({ room, timelineSet, replyEventId, threadRootId, onClick, ...props }, ref) => {
+  (
+    {
+      room,
+      timelineSet,
+      replyEventId,
+      threadRootId,
+      onClick,
+      getPowerLevel,
+      getPowerLevelTag,
+      accessibleTagColors,
+      legacyUsernameColor,
+      ...props
+    },
+    ref
+  ) => {
     const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
     const getFromLocalTimeline = useCallback(
       () => timelineSet?.findEventById(replyEventId),
@@ -62,6 +81,11 @@ 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 tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
+
+    const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
 
     const fallbackBody = replyEvent?.isRedacted() ? (
       <MessageDeletedContent />
@@ -79,7 +103,7 @@ export const Reply = as<'div', ReplyProps>(
         )}
         <ReplyLayout
           as="button"
-          userColor={sender ? colorMXID(sender) : undefined}
+          userColor={usernameColor}
           username={
             sender && (
               <Text size="T300" truncate>
diff --git a/src/app/components/message/layout/Base.tsx b/src/app/components/message/layout/Base.tsx
index 1ce764b5..ac196a5b 100644
--- a/src/app/components/message/layout/Base.tsx
+++ b/src/app/components/message/layout/Base.tsx
@@ -24,6 +24,10 @@ export const Username = as<'span'>(({ as: AsUsername = 'span', className, ...pro
   <AsUsername className={classNames(css.Username, className)} {...props} ref={ref} />
 ));
 
+export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...props }, ref) => (
+  <AsUsernameBold className={classNames(css.UsernameBold, className)} {...props} ref={ref} />
+));
+
 export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
   ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
     <Text
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index a1d45679..a9b3f35f 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -157,6 +157,10 @@ export const Username = style({
   },
 });
 
+export const UsernameBold = style({
+  fontWeight: 550,
+});
+
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
diff --git a/src/app/components/power/PowerColorBadge.tsx b/src/app/components/power/PowerColorBadge.tsx
index a1df0126..497385b7 100644
--- a/src/app/components/power/PowerColorBadge.tsx
+++ b/src/app/components/power/PowerColorBadge.tsx
@@ -9,7 +9,7 @@ type PowerColorBadgeProps = {
 export const PowerColorBadge = as<'span', PowerColorBadgeProps>(
   ({ as: AsPowerColorBadge = 'span', color, className, style, ...props }, ref) => (
     <AsPowerColorBadge
-      className={classNames(css.PowerColorBadge, className)}
+      className={classNames(css.PowerColorBadge, { [css.PowerColorBadgeNone]: !color }, className)}
       style={{
         backgroundColor: color,
         ...style,
diff --git a/src/app/components/power/style.css.ts b/src/app/components/power/style.css.ts
index bf752987..60737f8c 100644
--- a/src/app/components/power/style.css.ts
+++ b/src/app/components/power/style.css.ts
@@ -3,13 +3,30 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { color, config, DefaultReset, toRem } from 'folds';
 
 export const PowerColorBadge = style({
-  display: 'inline-block',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   flexShrink: 0,
   width: toRem(16),
   height: toRem(16),
-  backgroundColor: color.Surface.OnContainer,
   borderRadius: config.radii.Pill,
-  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  border: `${config.borderWidth.B300} solid ${color.Secondary.ContainerLine}`,
+  position: 'relative',
+});
+
+export const PowerColorBadgeNone = style({
+  selectors: {
+    '&::before': {
+      content: '',
+      display: 'inline-block',
+      width: '100%',
+      height: config.borderWidth.B300,
+      backgroundColor: color.Critical.Main,
+
+      position: 'absolute',
+      transform: `rotateZ(-45deg)`,
+    },
+  },
 });
 
 const PowerIconSize = createVar();
diff --git a/src/app/features/room-settings/developer-tools/DevelopTools.tsx b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
similarity index 100%
rename from src/app/features/room-settings/developer-tools/DevelopTools.tsx
rename to src/app/features/common-settings/developer-tools/DevelopTools.tsx
diff --git a/src/app/features/room-settings/developer-tools/SendRoomEvent.tsx b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx
similarity index 100%
rename from src/app/features/room-settings/developer-tools/SendRoomEvent.tsx
rename to src/app/features/common-settings/developer-tools/SendRoomEvent.tsx
diff --git a/src/app/features/room-settings/developer-tools/StateEventEditor.tsx b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
similarity index 100%
rename from src/app/features/room-settings/developer-tools/StateEventEditor.tsx
rename to src/app/features/common-settings/developer-tools/StateEventEditor.tsx
diff --git a/src/app/features/room-settings/developer-tools/index.ts b/src/app/features/common-settings/developer-tools/index.ts
similarity index 100%
rename from src/app/features/room-settings/developer-tools/index.ts
rename to src/app/features/common-settings/developer-tools/index.ts
diff --git a/src/app/features/room-settings/emojis-stickers/EmojisStickers.tsx b/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx
similarity index 100%
rename from src/app/features/room-settings/emojis-stickers/EmojisStickers.tsx
rename to src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx
diff --git a/src/app/features/room-settings/emojis-stickers/RoomPacks.tsx b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
similarity index 100%
rename from src/app/features/room-settings/emojis-stickers/RoomPacks.tsx
rename to src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
diff --git a/src/app/features/room-settings/emojis-stickers/index.ts b/src/app/features/common-settings/emojis-stickers/index.ts
similarity index 100%
rename from src/app/features/room-settings/emojis-stickers/index.ts
rename to src/app/features/common-settings/emojis-stickers/index.ts
diff --git a/src/app/features/room-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx
similarity index 98%
rename from src/app/features/room-settings/general/RoomAddress.tsx
rename to src/app/features/common-settings/general/RoomAddress.tsx
index dfe6645d..9e1f1a97 100644
--- a/src/app/features/room-settings/general/RoomAddress.tsx
+++ b/src/app/features/common-settings/general/RoomAddress.tsx
@@ -18,7 +18,7 @@ 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 '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import {
@@ -65,7 +65,7 @@ export function RoomPublishedAddresses({ powerLevels }: RoomPublishedAddressesPr
         title="Published Addresses"
         description={
           <span>
-            If room access is <b>Public</b>, Published addresses will be used to join by anyone.
+            If access is <b>Public</b>, Published addresses will be used to join by anyone.
           </span>
         }
       />
diff --git a/src/app/features/room-settings/general/RoomEncryption.tsx b/src/app/features/common-settings/general/RoomEncryption.tsx
similarity index 98%
rename from src/app/features/room-settings/general/RoomEncryption.tsx
rename to src/app/features/common-settings/general/RoomEncryption.tsx
index 7d95fe35..1bb73399 100644
--- a/src/app/features/room-settings/general/RoomEncryption.tsx
+++ b/src/app/features/common-settings/general/RoomEncryption.tsx
@@ -19,7 +19,7 @@ import React, { useCallback, useState } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
diff --git a/src/app/features/room-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
similarity index 98%
rename from src/app/features/room-settings/general/RoomHistoryVisibility.tsx
rename to src/app/features/common-settings/general/RoomHistoryVisibility.tsx
index d36e3121..7b329b13 100644
--- a/src/app/features/room-settings/general/RoomHistoryVisibility.tsx
+++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
@@ -16,7 +16,7 @@ import { HistoryVisibility, MatrixError } from 'matrix-js-sdk';
 import { RoomHistoryVisibilityEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
 import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
diff --git a/src/app/features/room-settings/general/RoomJoinRules.tsx b/src/app/features/common-settings/general/RoomJoinRules.tsx
similarity index 89%
rename from src/app/features/room-settings/general/RoomJoinRules.tsx
rename to src/app/features/common-settings/general/RoomJoinRules.tsx
index a98fee63..158ca25b 100644
--- a/src/app/features/room-settings/general/RoomJoinRules.tsx
+++ b/src/app/features/common-settings/general/RoomJoinRules.tsx
@@ -7,9 +7,10 @@ import {
   JoinRulesSwitcher,
   useRoomJoinRuleIcon,
   useRoomJoinRuleLabel,
+  useSpaceJoinRuleIcon,
 } from '../../../components/JoinRulesSwitcher';
 import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
@@ -60,6 +61,7 @@ export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
   }, [allowRestricted, allowKnock, space]);
 
   const icons = useRoomJoinRuleIcon();
+  const spaceIcons = useSpaceJoinRuleIcon();
   const labels = useRoomJoinRuleLabel();
 
   const [submitState, submit] = useAsyncCallback(
@@ -99,11 +101,15 @@ export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
       gap="400"
     >
       <SettingTile
-        title="Room Access"
-        description="Change how people can join the room."
+        title={room.isSpaceRoom() ? 'Space Access' : 'Room Access'}
+        description={
+          room.isSpaceRoom()
+            ? 'Change how people can join the space.'
+            : 'Change how people can join the room.'
+        }
         after={
           <JoinRulesSwitcher
-            icons={icons}
+            icons={room.isSpaceRoom() ? spaceIcons : icons}
             labels={labels}
             rules={joinRules}
             value={rule}
diff --git a/src/app/features/room-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx
similarity index 95%
rename from src/app/features/room-settings/general/RoomProfile.tsx
rename to src/app/features/common-settings/general/RoomProfile.tsx
index c59ecf01..a3a62e1c 100644
--- a/src/app/features/room-settings/general/RoomProfile.tsx
+++ b/src/app/features/common-settings/general/RoomProfile.tsx
@@ -17,7 +17,7 @@ import Linkify from 'linkify-react';
 import classNames from 'classnames';
 import { JoinRule, MatrixError } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { useRoom } from '../../../hooks/useRoom';
 import {
   useRoomAvatar,
@@ -198,7 +198,12 @@ export function RoomProfileEdit({
               src={avatarUrl}
               alt={name}
               renderFallback={() => (
-                <RoomIcon size="400" joinRule={joinRule?.join_rule ?? JoinRule.Invite} filled />
+                <RoomIcon
+                  space={room.isSpaceRoom()}
+                  size="400"
+                  joinRule={joinRule?.join_rule ?? JoinRule.Invite}
+                  filled
+                />
               )}
             />
           </Avatar>
@@ -338,7 +343,12 @@ export function RoomProfile({ powerLevels }: RoomProfileProps) {
                   src={avatarUrl}
                   alt={name}
                   renderFallback={() => (
-                    <RoomIcon size="400" joinRule={joinRule?.join_rule ?? JoinRule.Invite} filled />
+                    <RoomIcon
+                      space={room.isSpaceRoom()}
+                      size="400"
+                      joinRule={joinRule?.join_rule ?? JoinRule.Invite}
+                      filled
+                    />
                   )}
                 />
               </Avatar>
diff --git a/src/app/features/room-settings/general/RoomPublish.tsx b/src/app/features/common-settings/general/RoomPublish.tsx
similarity index 97%
rename from src/app/features/room-settings/general/RoomPublish.tsx
rename to src/app/features/common-settings/general/RoomPublish.tsx
index d17f70ec..e27c6872 100644
--- a/src/app/features/room-settings/general/RoomPublish.tsx
+++ b/src/app/features/common-settings/general/RoomPublish.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, color, Spinner, Switch, Text } from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
diff --git a/src/app/features/room-settings/general/RoomUpgrade.tsx b/src/app/features/common-settings/general/RoomUpgrade.tsx
similarity index 86%
rename from src/app/features/room-settings/general/RoomUpgrade.tsx
rename to src/app/features/common-settings/general/RoomUpgrade.tsx
index fa1fa856..5d6bc5e2 100644
--- a/src/app/features/room-settings/general/RoomUpgrade.tsx
+++ b/src/app/features/common-settings/general/RoomUpgrade.tsx
@@ -20,7 +20,7 @@ import FocusTrap from 'focus-trap-react';
 import { MatrixError } from 'matrix-js-sdk';
 import { RoomCreateEventContent, RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
 import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -39,7 +39,7 @@ type RoomUpgradeProps = {
 export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const { navigateRoom } = useRoomNavigate();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
   const createContent = useStateEvent(
     room,
     StateEvent.RoomCreate
@@ -66,14 +66,22 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
   const handleOpenRoom = () => {
     if (replacementRoom) {
       requestClose();
-      navigateRoom(replacementRoom);
+      if (room.isSpaceRoom()) {
+        navigateSpace(replacementRoom);
+      } else {
+        navigateRoom(replacementRoom);
+      }
     }
   };
 
   const handleOpenOldRoom = () => {
     if (predecessorRoomId) {
       requestClose();
-      navigateRoom(predecessorRoomId, createContent.predecessor?.event_id);
+      if (room.isSpaceRoom()) {
+        navigateSpace(predecessorRoomId);
+      } else {
+        navigateRoom(predecessorRoomId, createContent.predecessor?.event_id);
+      }
     }
   };
 
@@ -110,10 +118,11 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
       gap="400"
     >
       <SettingTile
-        title="Upgrade Room"
+        title={room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
         description={
           replacementRoom
-            ? tombstoneContent.body || 'This room has been replaced!'
+            ? tombstoneContent.body ||
+              `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
             : `Current room version: ${roomVersion}.`
         }
         after={
@@ -127,7 +136,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
                 radii="300"
                 onClick={handleOpenOldRoom}
               >
-                <Text size="B300">Old Room</Text>
+                <Text size="B300">{room.isSpaceRoom() ? 'Old Space' : 'Old Room'}</Text>
               </Button>
             )}
             {replacementRoom ? (
@@ -138,7 +147,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
                 radii="300"
                 onClick={handleOpenRoom}
               >
-                <Text size="B300">Open New Room</Text>
+                <Text size="B300">{room.isSpaceRoom() ? 'Open New Space' : 'Open New Room'}</Text>
               </Button>
             ) : (
               <Button
@@ -183,7 +192,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
                     size="500"
                   >
                     <Box grow="Yes">
-                      <Text size="H4">Room Upgrade</Text>
+                      <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
                     </Box>
                     <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
                       <Icon src={Icons.Cross} />
@@ -203,7 +212,9 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
                       />
                     </Box>
                     <Button type="submit" variant="Secondary">
-                      <Text size="B400">Upgrade Room</Text>
+                      <Text size="B400">
+                        {room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
+                      </Text>
                     </Button>
                   </Box>
                 </Dialog>
diff --git a/src/app/features/common-settings/general/index.ts b/src/app/features/common-settings/general/index.ts
new file mode 100644
index 00000000..80804b0b
--- /dev/null
+++ b/src/app/features/common-settings/general/index.ts
@@ -0,0 +1,7 @@
+export * from './RoomAddress';
+export * from './RoomEncryption';
+export * from './RoomHistoryVisibility';
+export * from './RoomJoinRules';
+export * from './RoomProfile';
+export * from './RoomPublish';
+export * from './RoomUpgrade';
diff --git a/src/app/features/room-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
similarity index 97%
rename from src/app/features/room-settings/members/Members.tsx
rename to src/app/features/common-settings/members/Members.tsx
index 40e055b1..8d7f89fd 100644
--- a/src/app/features/room-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -287,6 +287,13 @@ export function Members({ requestClose }: MembersProps) {
                   <Spinner />
                 </Box>
               )}
+
+              {!fetchingMembers && !result && flattenTagMembers.length === 0 && (
+                <Text style={{ padding: config.space.S300 }} align="Center">
+                  {`No "${membershipFilter.name}" Members`}
+                </Text>
+              )}
+
               <Box
                 style={{
                   position: 'relative',
diff --git a/src/app/features/room-settings/members/index.ts b/src/app/features/common-settings/members/index.ts
similarity index 100%
rename from src/app/features/room-settings/members/index.ts
rename to src/app/features/common-settings/members/index.ts
diff --git a/src/app/features/room-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx
similarity index 98%
rename from src/app/features/room-settings/permissions/PermissionGroups.tsx
rename to src/app/features/common-settings/permissions/PermissionGroups.tsx
index add2f55d..54c9c5d2 100644
--- a/src/app/features/room-settings/permissions/PermissionGroups.tsx
+++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx
@@ -12,7 +12,7 @@ import {
   PermissionLocation,
   usePowerLevelsAPI,
 } from '../../../hooks/usePowerLevels';
-import { usePermissionGroups } from './usePermissionItems';
+import { PermissionGroup } from './types';
 import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { useRoom } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -27,8 +27,9 @@ const USER_DEFAULT_LOCATION: PermissionLocation = {
 
 type PermissionGroupsProps = {
   powerLevels: IPowerLevels;
+  permissionGroups: PermissionGroup[];
 };
-export function PermissionGroups({ powerLevels }: PermissionGroupsProps) {
+export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGroupsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const alive = useAlive();
@@ -40,8 +41,6 @@ export function PermissionGroups({ powerLevels }: PermissionGroupsProps) {
   const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const maxPower = useMemo(() => Math.max(...getPowers(powerLevelTags)), [powerLevelTags]);
 
-  const permissionGroups = usePermissionGroups();
-
   const [permissionUpdate, setPermissionUpdate] = useState<Map<PermissionLocation, number>>(
     new Map()
   );
diff --git a/src/app/features/room-settings/permissions/Powers.tsx b/src/app/features/common-settings/permissions/Powers.tsx
similarity index 91%
rename from src/app/features/room-settings/permissions/Powers.tsx
rename to src/app/features/common-settings/permissions/Powers.tsx
index 24a71e7d..b7dadf5a 100644
--- a/src/app/features/room-settings/permissions/Powers.tsx
+++ b/src/app/features/common-settings/permissions/Powers.tsx
@@ -24,16 +24,16 @@ import { PowerColorBadge, PowerIcon } from '../../../components/power';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { stopPropagation } from '../../../utils/keyboard';
-import { usePermissionGroups } from './usePermissionItems';
+import { PermissionGroup } from './types';
 
 type PeekPermissionsProps = {
   powerLevels: IPowerLevels;
   power: number;
+  permissionGroups: PermissionGroup[];
   children: (handleOpen: MouseEventHandler<HTMLButtonElement>, opened: boolean) => ReactNode;
 };
-function PeekPermissions({ powerLevels, power, children }: PeekPermissionsProps) {
+function PeekPermissions({ powerLevels, power, permissionGroups, children }: PeekPermissionsProps) {
   const [menuCords, setMenuCords] = useState<RectCords>();
-  const permissionGroups = usePermissionGroups();
 
   const handleOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuCords(evt.currentTarget.getBoundingClientRect());
@@ -101,9 +101,10 @@ function PeekPermissions({ powerLevels, power, children }: PeekPermissionsProps)
 
 type PowersProps = {
   powerLevels: IPowerLevels;
+  permissionGroups: PermissionGroup[];
   onEdit?: () => void;
 };
-export function Powers({ powerLevels, onEdit }: PowersProps) {
+export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
@@ -144,7 +145,12 @@ export function Powers({ powerLevels, onEdit }: PowersProps) {
               const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
 
               return (
-                <PeekPermissions key={power} powerLevels={powerLevels} power={power}>
+                <PeekPermissions
+                  key={power}
+                  powerLevels={powerLevels}
+                  power={power}
+                  permissionGroups={permissionGroups}
+                >
                   {(openMenu, opened) => (
                     <Chip
                       onClick={openMenu}
diff --git a/src/app/features/room-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
similarity index 100%
rename from src/app/features/room-settings/permissions/PowersEditor.tsx
rename to src/app/features/common-settings/permissions/PowersEditor.tsx
diff --git a/src/app/features/common-settings/permissions/index.ts b/src/app/features/common-settings/permissions/index.ts
new file mode 100644
index 00000000..6a6e62c7
--- /dev/null
+++ b/src/app/features/common-settings/permissions/index.ts
@@ -0,0 +1,4 @@
+export * from './PermissionGroups';
+export * from './Powers';
+export * from './PowersEditor';
+export * from './types';
diff --git a/src/app/features/common-settings/permissions/types.ts b/src/app/features/common-settings/permissions/types.ts
new file mode 100644
index 00000000..fe70d122
--- /dev/null
+++ b/src/app/features/common-settings/permissions/types.ts
@@ -0,0 +1,12 @@
+import { PermissionLocation } from '../../../hooks/usePowerLevels';
+
+export type PermissionItem = {
+  location: PermissionLocation;
+  name: string;
+  description?: string;
+};
+
+export type PermissionGroup = {
+  name: string;
+  items: PermissionItem[];
+};
diff --git a/src/app/features/common-settings/styles.css.ts b/src/app/features/common-settings/styles.css.ts
new file mode 100644
index 00000000..ce89c16e
--- /dev/null
+++ b/src/app/features/common-settings/styles.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const SequenceCardStyle = style({
+  padding: config.space.S300,
+});
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index 195d4443..f126e7cb 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -18,7 +18,7 @@ import {
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
-import { openInviteUser, openSpaceSettings } from '../../../client/action/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -26,6 +26,7 @@ import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { stopPropagation } from '../../utils/keyboard';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -153,11 +154,12 @@ function SettingsMenuItem({
   disabled?: boolean;
 }) {
   const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
   const space = useSpaceOptionally();
 
   const handleSettings = () => {
     if ('space' in item) {
-      openSpaceSettings(item.roomId);
+      openSpaceSettings(item.roomId, item.parentId);
     } else {
       openRoomSettings(item.roomId, space?.roomId);
     }
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index 6ef0044b..bc4c46fe 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -26,7 +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, openSpaceSettings } from '../../../client/action/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
 import { IPowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -35,6 +35,7 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 
 type LobbyMenuProps = {
   roomId: string;
@@ -46,6 +47,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     const mx = useMatrixClient();
     const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
     const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const openSpaceSettings = useOpenSpaceSettings();
 
     const handleInvite = () => {
       openInviteUser(roomId);
@@ -132,7 +134,9 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
 
   const name = useRoomName(space);
   const avatarMxc = useRoomAvatar(space);
-  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
+  const avatarUrl = avatarMxc
+    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 5793ed91..8eae4aea 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -55,6 +55,8 @@ export function MessageSearch({
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -297,6 +299,7 @@ export function MessageSearch({
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
                     onOpen={navigateRoom}
+                    legacyUsernameColor={legacyUsernameColor || mDirects.has(groupRoom.roomId)}
                   />
                 </VirtualTile>
               );
diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index 29fce7bf..c2e6c0a1 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -25,6 +25,7 @@ import {
   Reply,
   Time,
   Username,
+  UsernameBold,
 } from '../../components/message';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
 import { Image } from '../../components/media';
@@ -32,13 +33,21 @@ import { ImageViewer } from '../../components/image-viewer';
 import * as customHtmlCss from '../../styles/CustomHtml.css';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../utils/room';
-import colorMXID from '../../../util/colorMXID';
 import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
 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 { useTheme } from '../../hooks/useTheme';
+import { PowerIcon } from '../../components/power';
+import colorMXID from '../../../util/colorMXID';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -47,6 +56,7 @@ type SearchResultGroupProps = {
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
+  legacyUsernameColor?: boolean;
 };
 export function SearchResultGroup({
   room,
@@ -55,11 +65,18 @@ export function SearchResultGroup({
   mediaAutoLoad,
   urlPreview,
   onOpen,
+  legacyUsernameColor,
 }: 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 theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
 
@@ -81,7 +98,15 @@ export function SearchResultGroup({
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
       }),
-    [mx, room, linkifyOpts, highlightRegex, mentionClickHandler, spoilerClickHandler, useAuthentication]
+    [
+      mx,
+      room,
+      linkifyOpts,
+      highlightRegex,
+      mentionClickHandler,
+      spoilerClickHandler,
+      useAuthentication,
+    ]
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
@@ -197,6 +222,17 @@ 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)
+            : undefined;
+          const tagIconSrc = powerLevelTag?.icon
+            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+            : undefined;
+
+          const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
+
           return (
             <SequenceCard
               key={event.event_id}
@@ -212,7 +248,14 @@ export function SearchResultGroup({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(
+                                mx,
+                                senderAvatarMxc,
+                                useAuthentication,
+                                48,
+                                48,
+                                'crop'
+                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -224,11 +267,14 @@ export function SearchResultGroup({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: colorMXID(event.sender) }}>
-                      <Text as="span" truncate>
-                        <b>{displayName}</b>
-                      </Text>
-                    </Username>
+                    <Box alignItems="Center" gap="200">
+                      <Username style={{ color: usernameColor }}>
+                        <Text as="span" truncate>
+                          <UsernameBold>{displayName}</UsernameBold>
+                        </Text>
+                      </Username>
+                      {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+                    </Box>
                     <Time ts={event.origin_server_ts} />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
@@ -244,11 +290,14 @@ export function SearchResultGroup({
                 </Box>
                 {replyEventId && (
                   <Reply
-                    mx={mx}
                     room={room}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
+                    getPowerLevel={getPowerLevel}
+                    getPowerLevelTag={getPowerLevelTag}
+                    accessibleTagColors={accessibleTagColors}
+                    legacyUsernameColor={legacyUsernameColor}
                   />
                 )}
                 {renderMatrixEvent(event.type, false, event, displayName, getContent)}
diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx
index 42192c01..32b5df9c 100644
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -11,12 +11,12 @@ import { useRoomAvatar, useRoomJoinRule, useRoomName } from '../../hooks/useRoom
 import { mDirectAtom } from '../../state/mDirectList';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { General } from './general';
-import { Members } from './members';
-import { EmojisStickers } from './emojis-stickers';
+import { Members } from '../common-settings/members';
+import { EmojisStickers } from '../common-settings/emojis-stickers';
 import { Permissions } from './permissions';
 import { RoomSettingsPage } from '../../state/roomSettings';
 import { useRoom } from '../../hooks/useRoom';
-import { DeveloperTools } from './developer-tools';
+import { DeveloperTools } from '../common-settings/developer-tools';
 
 type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
diff --git a/src/app/features/room-settings/general/General.tsx b/src/app/features/room-settings/general/General.tsx
index 3d217f32..0c3152c0 100644
--- a/src/app/features/room-settings/general/General.tsx
+++ b/src/app/features/room-settings/general/General.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
-import { RoomProfile } from './RoomProfile';
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
-import { RoomEncryption } from './RoomEncryption';
-import { RoomHistoryVisibility } from './RoomHistoryVisibility';
-import { RoomJoinRules } from './RoomJoinRules';
-import { RoomLocalAddresses, RoomPublishedAddresses } from './RoomAddress';
-import { RoomPublish } from './RoomPublish';
-import { RoomUpgrade } from './RoomUpgrade';
+import {
+  RoomProfile,
+  RoomEncryption,
+  RoomHistoryVisibility,
+  RoomJoinRules,
+  RoomLocalAddresses,
+  RoomPublishedAddresses,
+  RoomPublish,
+  RoomUpgrade,
+} from '../../common-settings/general';
 
 type GeneralProps = {
   requestClose: () => void;
diff --git a/src/app/features/room-settings/permissions/Permissions.tsx b/src/app/features/room-settings/permissions/Permissions.tsx
index 802dd657..ae3769bf 100644
--- a/src/app/features/room-settings/permissions/Permissions.tsx
+++ b/src/app/features/room-settings/permissions/Permissions.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
-import { Powers } from './Powers';
 import { useRoom } from '../../../hooks/useRoom';
 import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
-import { PowersEditor } from './PowersEditor';
-import { PermissionGroups } from './PermissionGroups';
+import { usePermissionGroups } from './usePermissionItems';
+import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
 
 type PermissionsProps = {
   requestClose: () => void;
@@ -21,6 +20,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
     StateEvent.PowerLevelTags,
     getPowerLevel(mx.getSafeUserId())
   );
+  const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
 
@@ -55,8 +55,9 @@ export function Permissions({ requestClose }: PermissionsProps) {
               <Powers
                 powerLevels={powerLevels}
                 onEdit={canEditPowers ? handleEditPowers : undefined}
+                permissionGroups={permissionGroups}
               />
-              <PermissionGroups powerLevels={powerLevels} />
+              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/features/room-settings/permissions/usePermissionItems.ts b/src/app/features/room-settings/permissions/usePermissionItems.ts
index f8df6453..513f82b4 100644
--- a/src/app/features/room-settings/permissions/usePermissionItems.ts
+++ b/src/app/features/room-settings/permissions/usePermissionItems.ts
@@ -1,17 +1,6 @@
 import { useMemo } from 'react';
-import { PermissionLocation } from '../../../hooks/usePowerLevels';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
-
-export type PermissionItem = {
-  location: PermissionLocation;
-  name: string;
-  description?: string;
-};
-
-export type PermissionGroup = {
-  name: string;
-  items: PermissionItem[];
-};
+import { PermissionGroup } from '../../common-settings/permissions';
 
 export const usePermissionGroups = (): PermissionGroup[] => {
   const groups: PermissionGroup[] = useMemo(() => {
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 4d6ce04c..501ee0dc 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -99,7 +99,6 @@ import {
   getImageMsgContent,
   getVideoMsgContent,
 } from './msgContent';
-import colorMXID from '../../../util/colorMXID';
 import { getMemberDisplayName, getMentionContent, trimReplyFromBody } from '../../utils/room';
 import { CommandAutocomplete } from './CommandAutocomplete';
 import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
@@ -109,26 +108,44 @@ 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 colorMXID from '../../../util/colorMXID';
+import { useIsDirectRoom } from '../../hooks/useRoom';
 
 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 }, ref) => {
+  ({ editor, fileDropContainerRef, roomId, room, getPowerLevelTag, accessibleTagColors }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+    const direct = useIsDirectRoom();
     const commands = useCommands(mx, room);
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
     const roomToParents = useAtomValue(roomToParentsAtom);
+    const powerLevels = usePowerLevelsContext();
 
     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
+      ? accessibleTagColors.get(replyPowerTag.color)
+      : undefined;
+    const replyUsernameColor =
+      legacyUsernameColor || direct ? colorMXID(replyUserID ?? '') : replyPowerColor;
+
     const [uploadBoard, setUploadBoard] = useState(true);
     const [selectedFiles, setSelectedFiles] = useAtom(roomIdToUploadItemsAtomFamily(roomId));
     const uploadFamilyObserverAtom = createUploadFamilyObserverAtom(
@@ -348,7 +365,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
-        if ((isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) && !evt.nativeEvent.isComposing) {
+        if (
+          (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) &&
+          !evt.nativeEvent.isComposing
+        ) {
           evt.preventDefault();
           submit();
         }
@@ -526,7 +546,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   <Box direction="Column">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
-                      userColor={colorMXID(replyDraft.userId)}
+                      userColor={replyUsernameColor}
                       username={
                         <Text size="T300" truncate>
                           <b>
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 2e50380e..05caf4b0 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -118,6 +118,8 @@ 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';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -220,6 +222,8 @@ type RoomTimelineProps = {
   eventId?: string;
   roomInputRef: RefObject<HTMLElement>;
   editor: Editor;
+  getPowerLevelTag: GetPowerLevelTag;
+  accessibleTagColors: Map<string, string>;
 };
 
 const PAGINATION_LIMIT = 80;
@@ -422,12 +426,21 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
   };
 };
 
-export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
+export function RoomTimeline({
+  room,
+  eventId,
+  roomInputRef,
+  editor,
+  getPowerLevelTag,
+  accessibleTagColors,
+}: RoomTimelineProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const direct = useIsDirectRoom();
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@@ -443,11 +456,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const powerLevels = usePowerLevelsContext();
   const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
     usePowerLevelsAPI(powerLevels);
+
   const myPowerLevel = getPowerLevel(mx.getUserId() ?? '');
   const canRedact = canDoAction('redact', myPowerLevel);
   const canSendReaction = canSendEvent(MessageEvent.Reaction, myPowerLevel);
   const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, myPowerLevel);
   const [editId, setEditId] = useState<string>();
+
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const { navigateRoom } = useRoomNavigate();
@@ -996,6 +1011,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           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;
 
@@ -1029,6 +1045,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
+                  getPowerLevel={getPowerLevel}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
+                  legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
             }
@@ -1045,6 +1065,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               )
             }
             hideReadReceipts={hideActivity}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@@ -1071,6 +1094,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const hasReactions = reactions && reactions.length > 0;
         const { replyEventId, threadRootId } = mEvent;
         const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1102,6 +1126,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
+                  getPowerLevel={getPowerLevel}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
+                  legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
             }
@@ -1118,6 +1146,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               )
             }
             hideReadReceipts={hideActivity}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
           >
             <EncryptedContent mEvent={mEvent}>
               {() => {
@@ -1181,6 +1212,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         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
@@ -1215,6 +1247,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               )
             }
             hideReadReceipts={hideActivity}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 0eb6bff1..b6eebdf2 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -21,6 +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';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -74,6 +76,10 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
     : false;
 
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+
   useKeyDown(
     window,
     useCallback(
@@ -103,6 +109,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
           eventId={eventId}
           roomInputRef={roomInputRef}
           editor={editor}
+          getPowerLevelTag={getPowerLevelTag}
+          accessibleTagColors={accessibleTagColors}
         />
         <RoomViewTyping room={room} />
       </Box>
@@ -123,6 +131,8 @@ 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 17a69fd3..352ae4b5 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -20,6 +20,7 @@ import {
   PopOut,
   RectCords,
   Badge,
+  Spinner,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
@@ -58,6 +59,12 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
 import { RoomPinMenu } from './room-pin-menu';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
+import {
+  getRoomNotificationMode,
+  getRoomNotificationModeIcon,
+  useRoomsNotificationPreferencesContext,
+} from '../../hooks/useRoomsNotificationPreferences';
 
 type RoomMenuProps = {
   room: Room;
@@ -70,6 +77,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   const powerLevels = usePowerLevelsContext();
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
   const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const notificationPreferences = useRoomsNotificationPreferencesContext();
+  const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
 
   const handleMarkAsRead = () => {
     markAsRead(mx, room.roomId, hideActivity);
@@ -109,6 +118,27 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
             Mark as Read
           </Text>
         </MenuItem>
+        <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
+          {(handleOpen, opened, changing) => (
+            <MenuItem
+              size="300"
+              after={
+                changing ? (
+                  <Spinner size="100" variant="Secondary" />
+                ) : (
+                  <Icon size="100" src={getRoomNotificationModeIcon(notificationMode)} />
+                )
+              }
+              radii="300"
+              aria-pressed={opened}
+              onClick={handleOpen}
+            >
+              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                Notifications
+              </Text>
+            </MenuItem>
+          )}
+        </RoomNotificationModeSwitcher>
       </Box>
       <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index d6709a97..ae971ab8 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -44,8 +44,8 @@ import {
   ModernLayout,
   Time,
   Username,
+  UsernameBold,
 } from '../../../components/message';
-import colorMXID from '../../../../util/colorMXID';
 import {
   canEditEvent,
   getEventEdits,
@@ -76,6 +76,9 @@ 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 { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -672,6 +675,9 @@ export type MessageProps = {
   reply?: ReactNode;
   reactions?: ReactNode;
   hideReadReceipts?: boolean;
+  powerLevelTag?: PowerLevelTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
 };
 export const Message = as<'div', MessageProps>(
   (
@@ -697,6 +703,9 @@ export const Message = as<'div', MessageProps>(
       reply,
       reactions,
       hideReadReceipts,
+      powerLevelTag,
+      accessibleTagColors,
+      legacyUsernameColor,
       children,
       ...props
     },
@@ -715,6 +724,15 @@ 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)
+      : undefined;
+    const tagIconSrc = powerLevelTag?.icon
+      ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+      : undefined;
+
+    const usernameColor = legacyUsernameColor ? colorMXID(senderId) : tagColor;
+
     const headerJSX = !collapse && (
       <Box
         gap="300"
@@ -723,17 +741,24 @@ export const Message = as<'div', MessageProps>(
         alignItems="Baseline"
         grow="Yes"
       >
-        <Username
-          as="button"
-          style={{ color: colorMXID(senderId) }}
-          data-user-id={senderId}
-          onContextMenu={onUserClick}
-          onClick={onUsernameClick}
-        >
-          <Text as="span" size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'} truncate>
-            <b>{senderDisplayName}</b>
-          </Text>
-        </Username>
+        <Box alignItems="Center" gap="200">
+          <Username
+            as="button"
+            style={{ color: usernameColor }}
+            data-user-id={senderId}
+            onContextMenu={onUserClick}
+            onClick={onUsernameClick}
+          >
+            <Text
+              as="span"
+              size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'}
+              truncate
+            >
+              <UsernameBold>{senderDisplayName}</UsernameBold>
+            </Text>
+          </Username>
+          {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+        </Box>
         <Box shrink="No" gap="100">
           {messageLayout === MessageLayout.Modern && hover && (
             <>
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index 2a35fc09..fdc19784 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -38,6 +38,7 @@ import {
   Reply,
   Time,
   Username,
+  UsernameBold,
 } from '../../../components/message';
 import { UserAvatar } from '../../../components/user-avatar';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
@@ -49,7 +50,6 @@ import {
   getStateEvent,
 } from '../../../utils/room';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
-import colorMXID from '../../../../util/colorMXID';
 import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
 import {
@@ -72,6 +72,15 @@ import { VirtualTile } from '../../../components/virtualizer';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
+import {
+  getTagIconSrc,
+  useAccessibleTagColors,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
+import { useTheme } from '../../../hooks/useTheme';
+import { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
+import { useIsDirectRoom } from '../../../hooks/useRoom';
 
 type PinnedMessageProps = {
   room: Room;
@@ -84,6 +93,14 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
   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(() => {
@@ -93,7 +110,7 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
         pinned: content.pinned.filter((id) => id !== eventId),
       };
 
-      return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents, newContent);
+      return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, newContent);
     }, [room, eventId, mx])
   );
 
@@ -148,6 +165,16 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
   const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
   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)
+    : undefined;
+
+  const usernameColor = legacyUsernameColor || direct ? colorMXID(sender) : tagColor;
+
   return (
     <ModernLayout
       before={
@@ -170,11 +197,14 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
     >
       <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
         <Box gap="200" alignItems="Baseline">
-          <Username style={{ color: colorMXID(sender) }}>
-            <Text as="span" truncate>
-              <b>{displayName}</b>
-            </Text>
-          </Username>
+          <Box alignItems="Center" gap="200">
+            <Username style={{ color: usernameColor }}>
+              <Text as="span" truncate>
+                <UsernameBold>{displayName}</UsernameBold>
+              </Text>
+            </Username>
+            {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+          </Box>
           <Time ts={pinnedEvent.getTs()} />
         </Box>
         {renderOptions()}
@@ -185,6 +215,10 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
           replyEventId={pinnedEvent.replyEventId}
           threadRootId={pinnedEvent.threadRootId}
           onClick={handleOpenClick}
+          getPowerLevel={getPowerLevel}
+          getPowerLevelTag={getPowerLevelTag}
+          accessibleTagColors={accessibleTagColors}
+          legacyUsernameColor={legacyUsernameColor}
         />
       )}
       {renderContent(pinnedEvent.getType(), false, pinnedEvent, displayName, getContent)}
diff --git a/src/app/features/settings/account/Account.tsx b/src/app/features/settings/account/Account.tsx
index ba354af5..bfdb0ef5 100644
--- a/src/app/features/settings/account/Account.tsx
+++ b/src/app/features/settings/account/Account.tsx
@@ -241,7 +241,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
   const disableSetDisplayname = capabilities['m.set_displayname']?.enabled === false;
 
   const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const [displayName, setDisplayName] = useState<string>();
+  const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
 
   const [changeState, changeDisplayName] = useAsyncCallback(
     useCallback((name: string) => mx.setDisplayName(name), [mx])
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 569cd410..04e2728b 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -514,6 +514,10 @@ function SelectMessageSpacing() {
 }
 
 function Messages() {
+  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
+    settingsAtom,
+    'legacyUsernameColor'
+  );
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
     settingsAtom,
     'hideMembershipEvents'
@@ -536,6 +540,18 @@ function Messages() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile title="Message Spacing" after={<SelectMessageSpacing />} />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Legacy Username Color"
+          after={
+            <Switch
+              variant="Primary"
+              value={legacyUsernameColor}
+              onChange={setLegacyUsernameColor}
+            />
+          }
+        />
+      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Hide Membership Change"
diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx
new file mode 100644
index 00000000..e565fb92
--- /dev/null
+++ b/src/app/features/space-settings/SpaceSettings.tsx
@@ -0,0 +1,173 @@
+import React, { useMemo, useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds';
+import { JoinRule } from 'matrix-js-sdk';
+import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRoomAvatar, useRoomJoinRule, useRoomName } from '../../hooks/useRoomMeta';
+import { mDirectAtom } from '../../state/mDirectList';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
+import { useRoom } from '../../hooks/useRoom';
+import { EmojisStickers } from '../common-settings/emojis-stickers';
+import { Members } from '../common-settings/members';
+import { DeveloperTools } from '../common-settings/developer-tools';
+import { General } from './general';
+import { Permissions } from './permissions';
+
+type SpaceSettingsMenuItem = {
+  page: SpaceSettingsPage;
+  name: string;
+  icon: IconSrc;
+};
+
+const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
+  useMemo(
+    () => [
+      {
+        page: SpaceSettingsPage.GeneralPage,
+        name: 'General',
+        icon: Icons.Setting,
+      },
+      {
+        page: SpaceSettingsPage.MembersPage,
+        name: 'Members',
+        icon: Icons.User,
+      },
+      {
+        page: SpaceSettingsPage.PermissionsPage,
+        name: 'Permissions',
+        icon: Icons.Lock,
+      },
+      {
+        page: SpaceSettingsPage.EmojisStickersPage,
+        name: 'Emojis & Stickers',
+        icon: Icons.Smile,
+      },
+      {
+        page: SpaceSettingsPage.DeveloperToolsPage,
+        name: 'Developer Tools',
+        icon: Icons.Terminal,
+      },
+    ],
+    []
+  );
+
+type SpaceSettingsProps = {
+  initialPage?: SpaceSettingsPage;
+  requestClose: () => void;
+};
+export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps) {
+  const room = useRoom();
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const mDirects = useAtomValue(mDirectAtom);
+
+  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId));
+  const roomName = useRoomName(room);
+  const joinRuleContent = useRoomJoinRule(room);
+
+  const avatarUrl = roomAvatar
+    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const screenSize = useScreenSizeContext();
+  const [activePage, setActivePage] = useState<SpaceSettingsPage | undefined>(() => {
+    if (initialPage) return initialPage;
+    return screenSize === ScreenSize.Mobile ? undefined : SpaceSettingsPage.GeneralPage;
+  });
+  const menuItems = useSpaceSettingsMenuItems();
+
+  const handlePageRequestClose = () => {
+    if (screenSize === ScreenSize.Mobile) {
+      setActivePage(undefined);
+      return;
+    }
+    requestClose();
+  };
+
+  return (
+    <PageRoot
+      nav={
+        screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+          <PageNav size="300">
+            <PageNavHeader outlined={false}>
+              <Box grow="Yes" gap="200">
+                <Avatar size="200" radii="300">
+                  <RoomAvatar
+                    roomId={room.roomId}
+                    src={avatarUrl}
+                    alt={roomName}
+                    renderFallback={() => (
+                      <RoomIcon
+                        space
+                        size="50"
+                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
+                        filled
+                      />
+                    )}
+                  />
+                </Avatar>
+                <Text size="H4" truncate>
+                  {roomName}
+                </Text>
+              </Box>
+              <Box shrink="No">
+                {screenSize === ScreenSize.Mobile && (
+                  <IconButton onClick={requestClose} variant="Background">
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                )}
+              </Box>
+            </PageNavHeader>
+            <Box grow="Yes" direction="Column">
+              <PageNavContent>
+                <div style={{ flexGrow: 1 }}>
+                  {menuItems.map((item) => (
+                    <MenuItem
+                      key={item.name}
+                      variant="Background"
+                      radii="400"
+                      aria-pressed={activePage === item.page}
+                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
+                      onClick={() => setActivePage(item.page)}
+                    >
+                      <Text
+                        style={{
+                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
+                        }}
+                        size="T300"
+                        truncate
+                      >
+                        {item.name}
+                      </Text>
+                    </MenuItem>
+                  ))}
+                </div>
+              </PageNavContent>
+            </Box>
+          </PageNav>
+        )
+      }
+    >
+      {activePage === SpaceSettingsPage.GeneralPage && (
+        <General requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.MembersPage && (
+        <Members requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.PermissionsPage && (
+        <Permissions requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.EmojisStickersPage && (
+        <EmojisStickers requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.DeveloperToolsPage && (
+        <DeveloperTools requestClose={handlePageRequestClose} />
+      )}
+    </PageRoot>
+  );
+}
diff --git a/src/app/features/space-settings/SpaceSettingsRenderer.tsx b/src/app/features/space-settings/SpaceSettingsRenderer.tsx
new file mode 100644
index 00000000..085c5e2b
--- /dev/null
+++ b/src/app/features/space-settings/SpaceSettingsRenderer.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { SpaceSettings } from './SpaceSettings';
+import { Modal500 } from '../../components/Modal500';
+import { useCloseSpaceSettings, useSpaceSettingsState } from '../../state/hooks/spaceSettings';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { SpaceSettingsState } from '../../state/spaceSettings';
+import { RoomProvider } from '../../hooks/useRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+
+type RenderSettingsProps = {
+  state: SpaceSettingsState;
+};
+function RenderSettings({ state }: RenderSettingsProps) {
+  const { roomId, spaceId, page } = state;
+  const closeSettings = useCloseSpaceSettings();
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const room = getRoom(roomId);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  if (!room) return null;
+
+  return (
+    <Modal500 requestClose={closeSettings}>
+      <SpaceProvider value={space ?? null}>
+        <RoomProvider value={room}>
+          <SpaceSettings initialPage={page} requestClose={closeSettings} />
+        </RoomProvider>
+      </SpaceProvider>
+    </Modal500>
+  );
+}
+
+export function SpaceSettingsRenderer() {
+  const state = useSpaceSettingsState();
+
+  if (!state) return null;
+  return <RenderSettings state={state} />;
+}
diff --git a/src/app/features/space-settings/general/General.tsx b/src/app/features/space-settings/general/General.tsx
new file mode 100644
index 00000000..6f4d8d38
--- /dev/null
+++ b/src/app/features/space-settings/general/General.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { useRoom } from '../../../hooks/useRoom';
+import {
+  RoomProfile,
+  RoomJoinRules,
+  RoomLocalAddresses,
+  RoomPublishedAddresses,
+  RoomPublish,
+  RoomUpgrade,
+} from '../../common-settings/general';
+
+type GeneralProps = {
+  requestClose: () => void;
+};
+export function General({ requestClose }: GeneralProps) {
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              General
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <RoomProfile powerLevels={powerLevels} />
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <RoomJoinRules powerLevels={powerLevels} />
+                <RoomPublish powerLevels={powerLevels} />
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Addresses</Text>
+                <RoomPublishedAddresses powerLevels={powerLevels} />
+                <RoomLocalAddresses powerLevels={powerLevels} />
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Advance Options</Text>
+                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}
diff --git a/src/app/features/space-settings/general/index.ts b/src/app/features/space-settings/general/index.ts
new file mode 100644
index 00000000..0ab02c52
--- /dev/null
+++ b/src/app/features/space-settings/general/index.ts
@@ -0,0 +1 @@
+export * from './General';
diff --git a/src/app/features/space-settings/index.ts b/src/app/features/space-settings/index.ts
new file mode 100644
index 00000000..e01a1b26
--- /dev/null
+++ b/src/app/features/space-settings/index.ts
@@ -0,0 +1,2 @@
+export * from './SpaceSettings';
+export * from './SpaceSettingsRenderer';
diff --git a/src/app/features/space-settings/permissions/Permissions.tsx b/src/app/features/space-settings/permissions/Permissions.tsx
new file mode 100644
index 00000000..ae3769bf
--- /dev/null
+++ b/src/app/features/space-settings/permissions/Permissions.tsx
@@ -0,0 +1,67 @@
+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 { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { StateEvent } from '../../../../types/matrix/room';
+import { usePermissionGroups } from './usePermissionItems';
+import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
+
+type PermissionsProps = {
+  requestClose: () => void;
+};
+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 permissionGroups = usePermissionGroups();
+
+  const [powerEditor, setPowerEditor] = useState(false);
+
+  const handleEditPowers = () => {
+    setPowerEditor(true);
+  };
+
+  if (canEditPowers && powerEditor) {
+    return <PowersEditor powerLevels={powerLevels} requestClose={() => setPowerEditor(false)} />;
+  }
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Permissions
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <Powers
+                powerLevels={powerLevels}
+                onEdit={canEditPowers ? handleEditPowers : undefined}
+                permissionGroups={permissionGroups}
+              />
+              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}
diff --git a/src/app/features/space-settings/permissions/index.ts b/src/app/features/space-settings/permissions/index.ts
new file mode 100644
index 00000000..753f2b4b
--- /dev/null
+++ b/src/app/features/space-settings/permissions/index.ts
@@ -0,0 +1 @@
+export * from './Permissions';
diff --git a/src/app/features/space-settings/permissions/usePermissionItems.ts b/src/app/features/space-settings/permissions/usePermissionItems.ts
new file mode 100644
index 00000000..8192e7bc
--- /dev/null
+++ b/src/app/features/space-settings/permissions/usePermissionItems.ts
@@ -0,0 +1,148 @@
+import { useMemo } from 'react';
+import { StateEvent } from '../../../../types/matrix/room';
+import { PermissionGroup } from '../../common-settings/permissions';
+
+export const usePermissionGroups = (): PermissionGroup[] => {
+  const groups: PermissionGroup[] = useMemo(() => {
+    const messagesGroup: PermissionGroup = {
+      name: 'Manage',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.SpaceChild,
+          },
+          name: 'Manage space rooms',
+        },
+        {
+          location: {},
+          name: 'Message Events',
+        },
+      ],
+    };
+
+    const moderationGroup: PermissionGroup = {
+      name: 'Moderation',
+      items: [
+        {
+          location: {
+            action: true,
+            key: 'invite',
+          },
+          name: 'Invite',
+        },
+        {
+          location: {
+            action: true,
+            key: 'kick',
+          },
+          name: 'Kick',
+        },
+        {
+          location: {
+            action: true,
+            key: 'ban',
+          },
+          name: 'Ban',
+        },
+      ],
+    };
+
+    const roomOverviewGroup: PermissionGroup = {
+      name: 'Space Overview',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomAvatar,
+          },
+          name: 'Space Avatar',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomName,
+          },
+          name: 'Space Name',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomTopic,
+          },
+          name: 'Space Topic',
+        },
+      ],
+    };
+
+    const roomSettingsGroup: PermissionGroup = {
+      name: 'Settings',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomJoinRules,
+          },
+          name: 'Change Space Access',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomCanonicalAlias,
+          },
+          name: 'Publish Address',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomPowerLevels,
+          },
+          name: 'Change All Permission',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.PowerLevelTags,
+          },
+          name: 'Edit Power Levels',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomTombstone,
+          },
+          name: 'Upgrade Space',
+        },
+        {
+          location: {
+            state: true,
+          },
+          name: 'Other Settings',
+        },
+      ],
+    };
+
+    const otherSettingsGroup: PermissionGroup = {
+      name: 'Other',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomServerAcl,
+          },
+          name: 'Change Server ACLs',
+        },
+      ],
+    };
+
+    return [
+      messagesGroup,
+      moderationGroup,
+      roomOverviewGroup,
+      roomSettingsGroup,
+      otherSettingsGroup,
+    ];
+  }, []);
+
+  return groups;
+};
diff --git a/src/app/features/space-settings/styles.css.ts b/src/app/features/space-settings/styles.css.ts
new file mode 100644
index 00000000..ce89c16e
--- /dev/null
+++ b/src/app/features/space-settings/styles.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const SequenceCardStyle = style({
+  padding: config.space.S300,
+});
diff --git a/src/app/hooks/usePowerLevelTags.ts b/src/app/hooks/usePowerLevelTags.ts
index e91bacbc..bdcb9bcc 100644
--- a/src/app/hooks/usePowerLevelTags.ts
+++ b/src/app/hooks/usePowerLevelTags.ts
@@ -4,6 +4,8 @@ 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';
 
 export type PowerLevelTagIcon = {
   key?: string;
@@ -63,7 +65,7 @@ const DEFAULT_TAGS: PowerLevelTags = {
   },
   100: {
     name: 'Admin',
-    color: '#a000e4',
+    color: '#0088ff',
   },
   50: {
     name: 'Moderator',
@@ -71,9 +73,11 @@ const DEFAULT_TAGS: PowerLevelTags = {
   },
   0: {
     name: 'Member',
+    color: '#91cfdf',
   },
   [-1]: {
     name: 'Muted',
+    color: '#888888',
   },
 };
 
@@ -152,3 +156,24 @@ export const getTagIconSrc = (
   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;
+};
diff --git a/src/app/hooks/useRoom.ts b/src/app/hooks/useRoom.ts
index 3f802d43..4041887d 100644
--- a/src/app/hooks/useRoom.ts
+++ b/src/app/hooks/useRoom.ts
@@ -10,3 +10,13 @@ export function useRoom(): Room {
   if (!room) throw new Error('Room not provided!');
   return room;
 }
+
+const IsDirectRoomContext = createContext<boolean>(false);
+
+export const IsDirectRoomProvider = IsDirectRoomContext.Provider;
+
+export const useIsDirectRoom = () => {
+  const direct = useContext(IsDirectRoomContext);
+
+  return direct;
+};
diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts
index a29af011..cdbb9dba 100644
--- a/src/app/hooks/useTheme.ts
+++ b/src/app/hooks/useTheme.ts
@@ -1,7 +1,9 @@
 import { lightTheme } from 'folds';
-import { useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings';
 
 export enum ThemeKind {
   Light = 'light',
@@ -72,3 +74,37 @@ export const useSystemThemeKind = (): ThemeKind => {
 
   return themeKind;
 };
+
+export const useActiveTheme = (): Theme => {
+  const systemThemeKind = useSystemThemeKind();
+  const themes = useThemes();
+  const [systemTheme] = useSetting(settingsAtom, 'useSystemTheme');
+  const [themeId] = useSetting(settingsAtom, 'themeId');
+  const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
+  const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+
+  if (!systemTheme) {
+    const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
+
+    return selectedTheme;
+  }
+
+  const selectedTheme =
+    systemThemeKind === ThemeKind.Dark
+      ? themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme
+      : themes.find((theme) => theme.id === lightThemeId) ?? LightTheme;
+
+  return selectedTheme;
+};
+
+const ThemeContext = createContext<Theme | null>(null);
+export const ThemeContextProvider = ThemeContext.Provider;
+
+export const useTheme = (): Theme => {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('No theme provided!');
+  }
+
+  return theme;
+};
diff --git a/src/app/molecules/image-pack/ImagePack.jsx b/src/app/molecules/image-pack/ImagePack.jsx
deleted file mode 100644
index 93d1d90f..00000000
--- a/src/app/molecules/image-pack/ImagePack.jsx
+++ /dev/null
@@ -1,511 +0,0 @@
-import React, { useState, useMemo, useReducer, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { EventTimeline } from 'matrix-js-sdk';
-import './ImagePack.scss';
-
-import { openReusableDialog } from '../../../client/action/navigation';
-import { suffixRename } from '../../../util/common';
-
-import Button from '../../atoms/button/Button';
-import Text from '../../atoms/text/Text';
-import Input from '../../atoms/input/Input';
-import Checkbox from '../../atoms/button/Checkbox';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-
-import { ImagePack as ImagePackBuilder } from '../../organisms/emoji-board/custom-emoji';
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
-import ImagePackProfile from './ImagePackProfile';
-import ImagePackItem from './ImagePackItem';
-import ImagePackUpload from './ImagePackUpload';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { getStateEvent } from '../../utils/room';
-
-const renameImagePackItem = (shortcode) =>
-  new Promise((resolve) => {
-    let isCompleted = false;
-
-    openReusableDialog(
-      <Text variant="s1" weight="medium">
-        Rename
-      </Text>,
-      (requestClose) => (
-        <div style={{ padding: 'var(--sp-normal)' }}>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              const sc = e.target.shortcode.value;
-              if (sc.trim() === '') return;
-              isCompleted = true;
-              resolve(sc.trim());
-              requestClose();
-            }}
-          >
-            <Input value={shortcode} name="shortcode" label="Shortcode" autoFocus required />
-            <div style={{ height: 'var(--sp-normal)' }} />
-            <Button variant="primary" type="submit">
-              Rename
-            </Button>
-          </form>
-        </div>
-      ),
-      () => {
-        if (!isCompleted) resolve(null);
-      }
-    );
-  });
-
-function getUsage(usage) {
-  if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
-  if (usage.includes('emoticon')) return 'emoticon';
-  if (usage.includes('sticker')) return 'sticker';
-
-  return 'both';
-}
-
-function isGlobalPack(mx, roomId, stateKey) {
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
-  if (typeof globalContent !== 'object') return false;
-
-  const { rooms } = globalContent;
-  if (typeof rooms !== 'object') return false;
-
-  return rooms[roomId]?.[stateKey] !== undefined;
-}
-
-function useRoomImagePack(roomId, stateKey) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  const pack = useMemo(() => {
-    const packEvent = getStateEvent(room, 'im.ponies.room_emotes', stateKey);
-    return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent());
-  }, [room, stateKey]);
-
-  const sendPackContent = (content) => {
-    mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
-  };
-
-  return {
-    pack,
-    sendPackContent,
-  };
-}
-
-function useUserImagePack() {
-  const mx = useMatrixClient();
-  const pack = useMemo(() => {
-    const packEvent = mx.getAccountData('im.ponies.user_emotes');
-    return ImagePackBuilder.parsePack(
-      mx.getUserId(),
-      packEvent?.getContent() ?? {
-        pack: { display_name: 'Personal' },
-        images: {},
-      }
-    );
-  }, [mx]);
-
-  const sendPackContent = (content) => {
-    mx.setAccountData('im.ponies.user_emotes', content);
-  };
-
-  return {
-    pack,
-    sendPackContent,
-  };
-}
-
-function useImagePackHandles(pack, sendPackContent) {
-  const [, forceUpdate] = useReducer((count) => count + 1, 0);
-
-  const getNewKey = (key) => {
-    if (typeof key !== 'string') return undefined;
-    let newKey = key?.replace(/\s/g, '_');
-    if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(newKey, (suffixedKey) => pack.getImages().get(suffixedKey));
-    }
-    return newKey;
-  };
-
-  const handleAvatarChange = (url) => {
-    pack.setAvatarUrl(url);
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleEditProfile = (name, attribution) => {
-    pack.setDisplayName(name);
-    pack.setAttribution(attribution);
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleUsageChange = (newUsage) => {
-    const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
-    pack.setUsage(usage);
-    pack.getImages().forEach((img) => pack.setImageUsage(img.shortcode, undefined));
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-
-  const handleRenameItem = async (key) => {
-    const newKey = getNewKey(await renameImagePackItem(key));
-
-    if (!newKey || newKey === key) return;
-    pack.updateImageKey(key, newKey);
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleDeleteItem = async (key) => {
-    const isConfirmed = await confirmDialog(
-      'Delete',
-      `Are you sure that you want to delete "${key}"?`,
-      'Delete',
-      'danger'
-    );
-    if (!isConfirmed) return;
-    pack.removeImage(key);
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleUsageItem = (key, newUsage) => {
-    const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
-    pack.setImageUsage(key, usage);
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleAddItem = (key, url) => {
-    const newKey = getNewKey(key);
-    if (!newKey || !url) return;
-
-    pack.addImage(newKey, {
-      url,
-    });
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-
-  return {
-    handleAvatarChange,
-    handleEditProfile,
-    handleUsageChange,
-    handleRenameItem,
-    handleDeleteItem,
-    handleUsageItem,
-    handleAddItem,
-  };
-}
-
-function addGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
-  if (!content.rooms) content.rooms = {};
-  if (!content.rooms[roomId]) content.rooms[roomId] = {};
-  content.rooms[roomId][stateKey] = {};
-  return mx.setAccountData('im.ponies.emote_rooms', content);
-}
-function removeGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
-  if (!content.rooms) return Promise.resolve();
-  if (!content.rooms[roomId]) return Promise.resolve();
-  delete content.rooms[roomId][stateKey];
-  if (Object.keys(content.rooms[roomId]).length === 0) {
-    delete content.rooms[roomId];
-  }
-  return mx.setAccountData('im.ponies.emote_rooms', content);
-}
-
-function ImagePack({ roomId, stateKey, handlePackDelete }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-  const [viewMore, setViewMore] = useState(false);
-  const [isGlobal, setIsGlobal] = useState(isGlobalPack(mx, roomId, stateKey));
-  const useAuthentication = useMediaAuthentication();
-
-  const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
-
-  const {
-    handleAvatarChange,
-    handleEditProfile,
-    handleUsageChange,
-    handleRenameItem,
-    handleDeleteItem,
-    handleUsageItem,
-    handleAddItem,
-  } = useImagePackHandles(pack, sendPackContent);
-
-  const handleGlobalChange = (isG) => {
-    setIsGlobal(isG);
-    if (isG) addGlobalImagePack(mx, roomId, stateKey);
-    else removeGlobalImagePack(mx, roomId, stateKey);
-  };
-
-  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room
-    .getLiveTimeline()
-    .getState(EventTimeline.FORWARDS)
-    ?.hasSufficientPowerLevelFor('state_default', myPowerlevel);
-
-  const handleDeletePack = async () => {
-    const isConfirmed = await confirmDialog(
-      'Delete Pack',
-      `Are you sure that you want to delete "${pack.displayName}"?`,
-      'Delete',
-      'danger'
-    );
-    if (!isConfirmed) return;
-    handlePackDelete(stateKey);
-  };
-
-  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
-
-  return (
-    <div className="image-pack">
-      <ImagePackProfile
-        avatarUrl={
-          pack.avatarUrl
-            ? mx.mxcUrlToHttp(
-                pack.avatarUrl,
-                42,
-                42,
-                'crop',
-                undefined,
-                undefined,
-                useAuthentication
-              )
-            : null
-        }
-        displayName={pack.displayName ?? 'Unknown'}
-        attribution={pack.attribution}
-        usage={getUsage(pack.usage)}
-        onUsageChange={canChange ? handleUsageChange : null}
-        onAvatarChange={canChange ? handleAvatarChange : null}
-        onEditProfile={canChange ? handleEditProfile : null}
-      />
-      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
-      {images.length === 0 ? null : (
-        <div>
-          <div className="image-pack__header">
-            <Text variant="b3">Image</Text>
-            <Text variant="b3">Shortcode</Text>
-            <Text variant="b3">Usage</Text>
-          </div>
-          {images.map(([shortcode, image]) => (
-            <ImagePackItem
-              key={shortcode}
-              url={mx.mxcUrlToHttp(
-                image.mxc,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                useAuthentication
-              )}
-              shortcode={shortcode}
-              usage={getUsage(image.usage)}
-              onUsageChange={canChange ? handleUsageItem : undefined}
-              onDelete={canChange ? handleDeleteItem : undefined}
-              onRename={canChange ? handleRenameItem : undefined}
-            />
-          ))}
-        </div>
-      )}
-      {(pack.images.size > 2 || handlePackDelete) && (
-        <div className="image-pack__footer">
-          {pack.images.size > 2 && (
-            <Button onClick={() => setViewMore(!viewMore)}>
-              {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
-            </Button>
-          )}
-          {handlePackDelete && (
-            <Button variant="danger" onClick={handleDeletePack}>
-              Delete Pack
-            </Button>
-          )}
-        </div>
-      )}
-      <div className="image-pack__global">
-        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
-        <div>
-          <Text variant="b2">Use globally</Text>
-          <Text variant="b3">Add this pack to your account to use in all rooms.</Text>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-ImagePack.defaultProps = {
-  handlePackDelete: null,
-};
-ImagePack.propTypes = {
-  roomId: PropTypes.string.isRequired,
-  stateKey: PropTypes.string.isRequired,
-  handlePackDelete: PropTypes.func,
-};
-
-function ImagePackUser() {
-  const mx = useMatrixClient();
-  const [viewMore, setViewMore] = useState(false);
-  const useAuthentication = useMediaAuthentication();
-
-  const { pack, sendPackContent } = useUserImagePack();
-
-  const {
-    handleAvatarChange,
-    handleEditProfile,
-    handleUsageChange,
-    handleRenameItem,
-    handleDeleteItem,
-    handleUsageItem,
-    handleAddItem,
-  } = useImagePackHandles(pack, sendPackContent);
-
-  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
-
-  return (
-    <div className="image-pack">
-      <ImagePackProfile
-        avatarUrl={
-          pack.avatarUrl
-            ? mx.mxcUrlToHttp(
-                pack.avatarUrl,
-                42,
-                42,
-                'crop',
-                undefined,
-                undefined,
-                useAuthentication
-              )
-            : null
-        }
-        displayName={pack.displayName ?? 'Personal'}
-        attribution={pack.attribution}
-        usage={getUsage(pack.usage)}
-        onUsageChange={handleUsageChange}
-        onAvatarChange={handleAvatarChange}
-        onEditProfile={handleEditProfile}
-      />
-      <ImagePackUpload onUpload={handleAddItem} />
-      {images.length === 0 ? null : (
-        <div>
-          <div className="image-pack__header">
-            <Text variant="b3">Image</Text>
-            <Text variant="b3">Shortcode</Text>
-            <Text variant="b3">Usage</Text>
-          </div>
-          {images.map(([shortcode, image]) => (
-            <ImagePackItem
-              key={shortcode}
-              url={mx.mxcUrlToHttp(
-                image.mxc,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                useAuthentication
-              )}
-              shortcode={shortcode}
-              usage={getUsage(image.usage)}
-              onUsageChange={handleUsageItem}
-              onDelete={handleDeleteItem}
-              onRename={handleRenameItem}
-            />
-          ))}
-        </div>
-      )}
-      {pack.images.size > 2 && (
-        <div className="image-pack__footer">
-          <Button onClick={() => setViewMore(!viewMore)}>
-            {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function useGlobalImagePack() {
-  const [, forceUpdate] = useReducer((count) => count + 1, 0);
-  const mx = useMatrixClient();
-
-  const roomIdToStateKeys = new Map();
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
-  const { rooms } = globalContent;
-
-  Object.keys(rooms).forEach((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return;
-    const room = mx.getRoom(roomId);
-    const stateKeys = Object.keys(rooms[roomId]);
-    if (!room || stateKeys.length === 0) return;
-    roomIdToStateKeys.set(roomId, stateKeys);
-  });
-
-  useEffect(() => {
-    const handleEvent = (event) => {
-      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
-    };
-    mx.addListener('accountData', handleEvent);
-    return () => {
-      mx.removeListener('accountData', handleEvent);
-    };
-  }, [mx]);
-
-  return roomIdToStateKeys;
-}
-
-function ImagePackGlobal() {
-  const mx = useMatrixClient();
-  const roomIdToStateKeys = useGlobalImagePack();
-
-  const handleChange = (roomId, stateKey) => {
-    removeGlobalImagePack(mx, roomId, stateKey);
-  };
-
-  return (
-    <div className="image-pack-global">
-      <MenuHeader>Global packs</MenuHeader>
-      <div>
-        {roomIdToStateKeys.size > 0 ? (
-          [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
-            const room = mx.getRoom(roomId);
-            return stateKeys.map((stateKey) => {
-              const data = getStateEvent(room, 'im.ponies.room_emotes', stateKey);
-              const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
-              if (!pack) return null;
-              return (
-                <div className="image-pack__global" key={pack.id}>
-                  <Checkbox
-                    variant="positive"
-                    onToggle={() => handleChange(roomId, stateKey)}
-                    isActive
-                  />
-                  <div>
-                    <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
-                    <Text variant="b3">{room.name}</Text>
-                  </div>
-                </div>
-              );
-            });
-          })
-        ) : (
-          <div className="image-pack-global__empty">
-            <Text>No global packs</Text>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default ImagePack;
-
-export { ImagePackUser, ImagePackGlobal };
diff --git a/src/app/molecules/image-pack/ImagePack.scss b/src/app/molecules/image-pack/ImagePack.scss
deleted file mode 100644
index 91d6a185..00000000
--- a/src/app/molecules/image-pack/ImagePack.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@use '../../partials/flex';
-
-.image-pack {
-  &-item {
-    border-top: 1px solid var(--bg-surface-border);
-  }
-
-  &__header {
-    padding: var(--sp-extra-tight) var(--sp-normal);
-    display: flex;
-    align-items: center;
-    gap: var(--sp-normal);
-
-    & > *:nth-child(2) {
-      @extend .cp-fx__item-one;
-    }
-  }
-
-  &__footer {
-    padding: var(--sp-normal);
-    display: flex;
-    justify-content: space-between;
-    gap: var(--sp-tight);
-  }
-
-  &__global {
-    padding: var(--sp-normal);
-    padding-top: var(--sp-tight);
-    display: flex;
-    align-items: center;
-    gap: var(--sp-normal);
-  }
-}
-
-.image-pack-global {
-  &__empty {
-    text-align: center;
-    padding: var(--sp-extra-loose) var(--sp-normal);
-  }
-  & .image-pack__global {
-    padding: 0 var(--sp-normal);
-    padding-bottom: var(--sp-normal);
-    &:first-child {
-      padding-top: var(--sp-normal);
-    }
-  }
-}
diff --git a/src/app/molecules/image-pack/ImagePackItem.jsx b/src/app/molecules/image-pack/ImagePackItem.jsx
deleted file mode 100644
index 27436793..00000000
--- a/src/app/molecules/image-pack/ImagePackItem.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackItem.scss';
-
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Avatar from '../../atoms/avatar/Avatar';
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import ImagePackUsageSelector from './ImagePackUsageSelector';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-import BinIC from '../../../../public/res/ic/outlined/bin.svg';
-
-function ImagePackItem({
-  url, shortcode, usage, onUsageChange, onDelete, onRename,
-}) {
-  const handleUsageSelect = (event) => {
-    openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
-      (closeMenu) => (
-        <ImagePackUsageSelector
-          usage={usage}
-          onSelect={(newUsage) => {
-            onUsageChange(shortcode, newUsage);
-            closeMenu();
-          }}
-        />
-      ),
-    );
-  };
-
-  return (
-    <div className="image-pack-item">
-      <Avatar imageSrc={url} size="extra-small" text={shortcode} bgColor="black" />
-      <div className="image-pack-item__content">
-        <Text>{shortcode}</Text>
-      </div>
-      <div className="image-pack-item__usage">
-        <div className="image-pack-item__btn">
-          {onRename && <IconButton tooltip="Rename" size="extra-small" src={PencilIC} onClick={() => onRename(shortcode)} />}
-          {onDelete && <IconButton tooltip="Delete" size="extra-small" src={BinIC} onClick={() => onDelete(shortcode)} />}
-        </div>
-        <Button onClick={onUsageChange ? handleUsageSelect : undefined}>
-          {onUsageChange && <RawIcon src={ChevronBottomIC} size="extra-small" />}
-          <Text variant="b2">
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
-          </Text>
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-ImagePackItem.defaultProps = {
-  onUsageChange: null,
-  onDelete: null,
-  onRename: null,
-};
-ImagePackItem.propTypes = {
-  url: PropTypes.string.isRequired,
-  shortcode: PropTypes.string.isRequired,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
-  onUsageChange: PropTypes.func,
-  onDelete: PropTypes.func,
-  onRename: PropTypes.func,
-};
-
-export default ImagePackItem;
diff --git a/src/app/molecules/image-pack/ImagePackItem.scss b/src/app/molecules/image-pack/ImagePackItem.scss
deleted file mode 100644
index ab1be3a7..00000000
--- a/src/app/molecules/image-pack/ImagePackItem.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-
-.image-pack-item {
-  margin: 0 var(--sp-normal);
-  padding: var(--sp-tight) 0;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-normal);
-
-  & .avatar-container img {
-    object-fit: contain;
-    border-radius: 0;
-  }
-
-  &__content {
-    @extend .cp-fx__item-one;
-  }
-
-  &__usage {
-    display: flex;
-    gap: var(--sp-ultra-tight);
-    & button {
-      padding: 6px;
-    }
-    & > button.btn-surface {
-      padding: 6px var(--sp-tight);
-      min-width: 0;
-      @include dir.side(margin, var(--sp-ultra-tight), 0);
-    }
-  }
-
-  &__btn {
-    display: none;
-  }
-  &:hover,
-  &:focus-within {
-    .image-pack-item__btn {
-      display: flex;
-      gap: var(--sp-ultra-tight);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/image-pack/ImagePackProfile.jsx b/src/app/molecules/image-pack/ImagePackProfile.jsx
deleted file mode 100644
index b639936d..00000000
--- a/src/app/molecules/image-pack/ImagePackProfile.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackProfile.scss';
-
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Input from '../../atoms/input/Input';
-import ImageUpload from '../image-upload/ImageUpload';
-import ImagePackUsageSelector from './ImagePackUsageSelector';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-
-function ImagePackProfile({
-  avatarUrl, displayName, attribution, usage,
-  onUsageChange, onAvatarChange, onEditProfile,
-}) {
-  const [isEdit, setIsEdit] = useState(false);
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    const { nameInput, attributionInput } = e.target;
-    const name = nameInput.value.trim() || undefined;
-    const att = attributionInput.value.trim() || undefined;
-
-    onEditProfile(name, att);
-    setIsEdit(false);
-  };
-
-  const handleUsageSelect = (event) => {
-    openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
-      (closeMenu) => (
-        <ImagePackUsageSelector
-          usage={usage}
-          onSelect={(newUsage) => {
-            onUsageChange(newUsage);
-            closeMenu();
-          }}
-        />
-      ),
-    );
-  };
-
-  return (
-    <div className="image-pack-profile">
-      {
-        onAvatarChange
-          ? (
-            <ImageUpload
-              bgColor="#555"
-              text={displayName}
-              imageSrc={avatarUrl}
-              size="normal"
-              onUpload={onAvatarChange}
-              onRequestRemove={() => onAvatarChange(undefined)}
-            />
-          )
-          : <Avatar bgColor="#555" text={displayName} imageSrc={avatarUrl} size="normal" />
-      }
-      <div className="image-pack-profile__content">
-        {
-          isEdit
-            ? (
-              <form onSubmit={handleSubmit}>
-                <Input name="nameInput" label="Name" value={displayName} required />
-                <Input name="attributionInput" label="Attribution" value={attribution} resizable />
-                <div>
-                  <Button variant="primary" type="submit">Save</Button>
-                  <Button onClick={() => setIsEdit(false)}>Cancel</Button>
-                </div>
-              </form>
-            ) : (
-              <>
-                <div>
-                  <Text>{displayName}</Text>
-                  {onEditProfile && <IconButton size="extra-small" onClick={() => setIsEdit(true)} src={PencilIC} tooltip="Edit" />}
-                </div>
-                {attribution && <Text variant="b3">{attribution}</Text>}
-              </>
-            )
-        }
-      </div>
-      <div className="image-pack-profile__usage">
-        <Text variant="b3">Pack usage</Text>
-        <Button
-          onClick={onUsageChange ? handleUsageSelect : undefined}
-          iconSrc={onUsageChange ? ChevronBottomIC : null}
-        >
-          <Text>
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
-          </Text>
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-ImagePackProfile.defaultProps = {
-  avatarUrl: null,
-  attribution: null,
-  onUsageChange: null,
-  onAvatarChange: null,
-  onEditProfile: null,
-};
-ImagePackProfile.propTypes = {
-  avatarUrl: PropTypes.string,
-  displayName: PropTypes.string.isRequired,
-  attribution: PropTypes.string,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
-  onUsageChange: PropTypes.func,
-  onAvatarChange: PropTypes.func,
-  onEditProfile: PropTypes.func,
-};
-
-export default ImagePackProfile;
diff --git a/src/app/molecules/image-pack/ImagePackProfile.scss b/src/app/molecules/image-pack/ImagePackProfile.scss
deleted file mode 100644
index d21212fb..00000000
--- a/src/app/molecules/image-pack/ImagePackProfile.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use '../../partials/flex';
-
-.image-pack-profile {
-  padding: var(--sp-normal);
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sp-tight);
-
-  &__content {
-    @extend .cp-fx__item-one;
-
-    & > div:first-child {
-      display: flex;
-      align-items: center;
-      gap: var(--sp-extra-tight);
-
-      & .ic-btn {
-        padding: var(--sp-ultra-tight);
-      }
-    }
-    & > form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sp-extra-tight);
-      & > div:last-child {
-        margin: var(--sp-extra-tight) 0;
-        display: flex;
-        gap: var(--sp-tight);
-      }
-    }
-  }
-  &__usage {
-    & > *:first-child {
-      margin-bottom: var(--sp-ultra-tight);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/image-pack/ImagePackUpload.jsx b/src/app/molecules/image-pack/ImagePackUpload.jsx
deleted file mode 100644
index cdf2e13b..00000000
--- a/src/app/molecules/image-pack/ImagePackUpload.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackUpload.scss';
-
-import { scaleDownImage } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import IconButton from '../../atoms/button/IconButton';
-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function ImagePackUpload({ onUpload }) {
-  const mx = useMatrixClient();
-  const inputRef = useRef(null);
-  const shortcodeRef = useRef(null);
-  const [imgFile, setImgFile] = useState(null);
-  const [progress, setProgress] = useState(false);
-
-  const handleSubmit = async (evt) => {
-    evt.preventDefault();
-    if (!imgFile) return;
-    const { shortcodeInput } = evt.target;
-    const shortcode = shortcodeInput.value.trim();
-    if (shortcode === '') return;
-
-    setProgress(true);
-    const image = await scaleDownImage(imgFile, 512, 512);
-    const { content_uri: url } = await mx.uploadContent(image);
-
-    onUpload(shortcode, url);
-    setProgress(false);
-    setImgFile(null);
-    shortcodeRef.current.value = '';
-  };
-
-  const handleFileChange = (evt) => {
-    const img = evt.target.files[0];
-    if (!img) return;
-    setImgFile(img);
-    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf('.'));
-    shortcodeRef.current.focus();
-  };
-  const handleRemove = () => {
-    setImgFile(null);
-    inputRef.current.value = null;
-    shortcodeRef.current.value = '';
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="image-pack-upload">
-      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" accept=".png, .gif, .webp" required />
-      {
-        imgFile
-          ? (
-            <div className="image-pack-upload__file">
-              <IconButton onClick={handleRemove} src={CirclePlusIC} tooltip="Remove file" />
-              <Text>{imgFile.name}</Text>
-            </div>
-          )
-          : <Button onClick={() => inputRef.current.click()}>Import image</Button>
-      }
-      <Input forwardRef={shortcodeRef} name="shortcodeInput" placeholder="shortcode" required />
-      <Button disabled={progress} variant="primary" type="submit">{progress ? 'Uploading...' : 'Upload'}</Button>
-    </form>
-  );
-}
-ImagePackUpload.propTypes = {
-  onUpload: PropTypes.func.isRequired,
-};
-
-export default ImagePackUpload;
diff --git a/src/app/molecules/image-pack/ImagePackUpload.scss b/src/app/molecules/image-pack/ImagePackUpload.scss
deleted file mode 100644
index 75b57ed2..00000000
--- a/src/app/molecules/image-pack/ImagePackUpload.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use '../../partials/dir';
-@use '../../partials/text';
-
-.image-pack-upload {
-  padding: var(--sp-normal);
-  padding-top: 0;
-  display: flex;
-  gap: var(--sp-tight);
-
-  & > .input-container {
-    flex-grow: 1;
-    input {
-      padding: 9px var(--sp-normal);
-    }
-  }
-  &__file {
-    display: inline-flex;
-    align-items: center;
-    background: var(--bg-surface-low);
-    border-radius: var(--bo-radius);
-    box-shadow: var(--bs-surface-border);
-  
-    & button {
-      --parent-height: 40px;
-      width: var(--parent-height);
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  
-    & .ic-raw {
-      background-color: var(--bg-caution);
-      transform: rotate(45deg);
-    }
-    
-    & .text {
-      @extend .cp-txt__ellipsis;
-      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-normal));
-      max-width: 86px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx b/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
deleted file mode 100644
index 279b3816..00000000
--- a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
-
-function ImagePackUsageSelector({ usage, onSelect }) {
-  return (
-    <div>
-      <MenuHeader>Usage</MenuHeader>
-      <MenuItem
-        iconSrc={usage === 'emoticon' ? CheckIC : undefined}
-        variant={usage === 'emoticon' ? 'positive' : 'surface'}
-        onClick={() => onSelect('emoticon')}
-      >
-        Emoji
-      </MenuItem>
-      <MenuItem
-        iconSrc={usage === 'sticker' ? CheckIC : undefined}
-        variant={usage === 'sticker' ? 'positive' : 'surface'}
-        onClick={() => onSelect('sticker')}
-      >
-        Sticker
-      </MenuItem>
-      <MenuItem
-        iconSrc={usage === 'both' ? CheckIC : undefined}
-        variant={usage === 'both' ? 'positive' : 'surface'}
-        onClick={() => onSelect('both')}
-      >
-        Both
-      </MenuItem>
-    </div>
-  );
-}
-
-ImagePackUsageSelector.propTypes = {
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-export default ImagePackUsageSelector;
diff --git a/src/app/molecules/room-aliases/RoomAliases.jsx b/src/app/molecules/room-aliases/RoomAliases.jsx
deleted file mode 100644
index a96fbb8b..00000000
--- a/src/app/molecules/room-aliases/RoomAliases.jsx
+++ /dev/null
@@ -1,359 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomAliases.scss';
-import { EventTimeline } from 'matrix-js-sdk';
-
-import cons from '../../../client/state/cons';
-import { Debounce } from '../../../util/common';
-import { isRoomAliasAvailable } from '../../../util/matrixUtil';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Checkbox from '../../atoms/button/Checkbox';
-import Toggle from '../../atoms/button/Toggle';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
-
-import { useStore } from '../../hooks/useStore';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function useValidate(hsString) {
-  const mx = useMatrixClient();
-  const [debounce] = useState(new Debounce());
-  const [validate, setValidate] = useState({ alias: null, status: cons.status.PRE_FLIGHT });
-
-  const setValidateToDefault = () => {
-    setValidate({
-      alias: null,
-      status: cons.status.PRE_FLIGHT,
-    });
-  };
-
-  const checkValueOK = (value) => {
-    if (value.trim() === '') {
-      setValidateToDefault();
-      return false;
-    }
-    if (!value.match(/^[a-zA-Z0-9_-]+$/)) {
-      setValidate({
-        alias: null,
-        status: cons.status.ERROR,
-        msg: 'Invalid character: only letter, numbers and _- are allowed.',
-      });
-      return false;
-    }
-    return true;
-  };
-
-  const handleAliasChange = (e) => {
-    const input = e.target;
-    if (validate.status !== cons.status.PRE_FLIGHT) {
-      setValidateToDefault();
-    }
-    if (checkValueOK(input.value) === false) return;
-
-    debounce._(async () => {
-      const { value } = input;
-      const alias = `#${value}:${hsString}`;
-      if (checkValueOK(value) === false) return;
-
-      setValidate({
-        alias,
-        status: cons.status.IN_FLIGHT,
-        msg: `validating ${alias}...`,
-      });
-
-      const isValid = await isRoomAliasAvailable(mx, alias);
-      setValidate(() => {
-        if (e.target.value !== value) {
-          return { alias: null, status: cons.status.PRE_FLIGHT };
-        }
-        return {
-          alias,
-          status: isValid ? cons.status.SUCCESS : cons.status.ERROR,
-          msg: isValid ? `${alias} is available.` : `${alias} is already in use.`,
-        };
-      });
-    }, 600)();
-  };
-
-  return [validate, setValidateToDefault, handleAliasChange];
-}
-
-function getAliases(mx, roomId) {
-  const room = mx.getRoom(roomId);
-
-  const main = room.getCanonicalAlias();
-  const published = room.getAltAliases();
-  if (main && !published.includes(main)) published.splice(0, 0, main);
-
-  return {
-    main,
-    published: [...new Set(published)],
-    local: [],
-  };
-}
-
-function RoomAliases({ roomId }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-  const userId = mx.getUserId();
-  const hsString = userId.slice(userId.indexOf(':') + 1);
-
-  const isMountedStore = useStore();
-  const [isPublic, setIsPublic] = useState(false);
-  const [isLocalVisible, setIsLocalVisible] = useState(false);
-  const [aliases, setAliases] = useState(getAliases(mx, roomId));
-  const [selectedAlias, setSelectedAlias] = useState(null);
-  const [deleteAlias, setDeleteAlias] = useState(null);
-  const [validate, setValidateToDefault, handleAliasChange] = useValidate(hsString);
-
-  const canPublishAlias = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('m.room.canonical_alias', userId);
-
-  useEffect(() => {
-    isMountedStore.setItem(true)
-  }, []);
-
-  useEffect(() => {
-    let isUnmounted = false;
-
-    const loadLocalAliases = async () => {
-      let local = [];
-      try {
-        const result = await mx.getLocalAliases(roomId);
-        local = result.aliases.filter((alias) => !aliases.published.includes(alias));
-      } catch {
-        local = [];
-      }
-      aliases.local = [...new Set(local.reverse())];
-
-      if (isUnmounted) return;
-      setAliases({ ...aliases });
-    };
-    const loadVisibility = async () => {
-      const result = await mx.getRoomDirectoryVisibility(roomId);
-      if (isUnmounted) return;
-      setIsPublic(result.visibility === 'public');
-    };
-    loadLocalAliases();
-    loadVisibility();
-    return () => {
-      isUnmounted = true;
-    };
-  }, [mx, roomId]);
-
-  const toggleDirectoryVisibility = () => {
-    mx.setRoomDirectoryVisibility(roomId, isPublic ? 'private' : 'public');
-    setIsPublic(!isPublic);
-  };
-
-  const handleAliasSubmit = async (e) => {
-    e.preventDefault();
-    if (validate.status === cons.status.ERROR) return;
-    if (!validate.alias) return;
-
-    const { alias } = validate;
-    const aliasInput = e.target.elements['alias-input'];
-    aliasInput.value = '';
-    setValidateToDefault();
-
-    try {
-      aliases.local.push(alias);
-      setAliases({ ...aliases });
-      await mx.createAlias(alias, roomId);
-    } catch {
-      if (isMountedStore.getItem()) {
-        const lIndex = alias.local.indexOf(alias);
-        if (lIndex === -1) return;
-        aliases.local.splice(lIndex, 1);
-        setAliases({ ...aliases });
-      }
-    }
-  };
-
-  const handleAliasSelect = (alias) => {
-    setSelectedAlias(alias === selectedAlias ? null : alias);
-  };
-
-  const handlePublishAlias = (alias) => {
-    const { main, published } = aliases;
-    let { local } = aliases;
-
-    if (!published.includes(aliases)) {
-      published.push(alias);
-      local = local.filter((al) => al !== alias);
-      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
-        alias: main,
-        alt_aliases: published.filter((al) => al !== main),
-      });
-      setAliases({ main, published, local });
-      setSelectedAlias(null);
-    }
-  };
-
-  const handleUnPublishAlias = (alias) => {
-    let { main, published } = aliases;
-    const { local } = aliases;
-
-    if (published.includes(alias) || main === alias) {
-      if (main === alias) main = null;
-      published = published.filter((al) => al !== alias);
-      local.push(alias);
-      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
-        alias: main,
-        alt_aliases: published.filter((al) => al !== main),
-      });
-      setAliases({ main, published, local });
-      setSelectedAlias(null);
-    }
-  };
-
-  const handleSetMainAlias = (alias) => {
-    let { main, local } = aliases;
-    const { published } = aliases;
-
-    if (main !== alias) {
-      main = alias;
-      if (!published.includes(alias)) published.splice(0, 0, alias);
-      local = local.filter((al) => al !== alias);
-      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
-        alias: main,
-        alt_aliases: published.filter((al) => al !== main),
-      });
-      setAliases({ main, published, local });
-      setSelectedAlias(null);
-    }
-  };
-
-  const handleDeleteAlias = async (alias) => {
-    try {
-      setDeleteAlias({ alias, status: cons.status.IN_FLIGHT, msg: 'deleting...' });
-      await mx.deleteAlias(alias);
-      let { main, published, local } = aliases;
-      if (published.includes(alias)) {
-        handleUnPublishAlias(alias);
-        if (main === alias) main = null;
-        published = published.filter((al) => al !== alias);
-      }
-
-      local = local.filter((al) => al !== alias);
-      setAliases({ main, published, local });
-      setDeleteAlias(null);
-      setSelectedAlias(null);
-    } catch (err) {
-      setDeleteAlias({ alias, status: cons.status.ERROR, msg: err.message });
-    }
-  };
-
-  const renderAliasBtns = (alias) => {
-    const isPublished = aliases.published.includes(alias);
-    const isMain = aliases.main === alias;
-    if (deleteAlias?.alias === alias) {
-      const isError = deleteAlias.status === cons.status.ERROR;
-      return (
-        <div className="room-aliases__item-btns">
-          <Text variant="b2">
-            <span style={{ color: isError ? 'var(--tc-danger-high' : 'inherit' }}>{deleteAlias.msg}</span>
-          </Text>
-        </div>
-      );
-    }
-
-    return (
-      <div className="room-aliases__item-btns">
-        {canPublishAlias && !isMain && <Button onClick={() => handleSetMainAlias(alias)} variant="primary">Set as Main</Button>}
-        {!isPublished && canPublishAlias && <Button onClick={() => handlePublishAlias(alias)} variant="positive">Publish</Button>}
-        {isPublished && canPublishAlias && <Button onClick={() => handleUnPublishAlias(alias)} variant="caution">Un-Publish</Button>}
-        <Button onClick={() => handleDeleteAlias(alias)} variant="danger">Delete</Button>
-      </div>
-    );
-  };
-
-  const renderAlias = (alias) => {
-    const isActive = selectedAlias === alias;
-    const disabled = !canPublishAlias && aliases.published.includes(alias);
-    const isMain = aliases.main === alias;
-
-    return (
-      <React.Fragment key={`${alias}-wrapper`}>
-        <div className="room-aliases__alias-item" key={alias}>
-          <Checkbox variant="positive" disabled={disabled} isActive={isActive} onToggle={() => handleAliasSelect(alias)} />
-          <Text>
-            {alias}
-            {isMain && <span>Main</span>}
-          </Text>
-        </div>
-        {isActive && renderAliasBtns(alias)}
-      </React.Fragment>
-    );
-  };
-
-  let inputState = 'normal';
-  if (validate.status === cons.status.ERROR) inputState = 'error';
-  if (validate.status === cons.status.SUCCESS) inputState = 'success';
-  return (
-    <div className="room-aliases">
-      <SettingTile
-        title="Publish to room directory"
-        content={<Text variant="b3">{`Publish this ${room.isSpaceRoom() ? 'space' : 'room'} to the ${hsString}'s public room directory?`}</Text>}
-        options={(
-          <Toggle
-            isActive={isPublic}
-            onToggle={toggleDirectoryVisibility}
-            disabled={!canPublishAlias}
-          />
-        )}
-      />
-
-      <div className="room-aliases__content">
-        <MenuHeader>Published addresses</MenuHeader>
-        {(aliases.published.length === 0) && <Text className="room-aliases__message">No published addresses</Text>}
-        {(aliases.published.length > 0 && !aliases.main) && <Text className="room-aliases__message">No Main address (select one from below)</Text>}
-        {aliases.published.map(renderAlias)}
-        <Text className="room-aliases__message" variant="b3">
-          {`Published addresses can be used by anyone on any server to join your ${room.isSpaceRoom() ? 'space' : 'room'}. To publish an address, it needs to be set as a local address first.`}
-        </Text>
-      </div>
-      { isLocalVisible && (
-        <div className="room-aliases__content">
-          <MenuHeader>Local addresses</MenuHeader>
-          {(aliases.local.length === 0) && <Text className="room-aliases__message">No local addresses</Text>}
-          {aliases.local.map(renderAlias)}
-          <Text className="room-aliases__message" variant="b3">
-            {`Set local addresses for this ${room.isSpaceRoom() ? 'space' : 'room'} so users can find this ${room.isSpaceRoom() ? 'space' : 'room'} through your homeserver.`}
-          </Text>
-
-          <Text className="room-aliases__form-label" variant="b2">Add local address</Text>
-          <form className="room-aliases__form" onSubmit={handleAliasSubmit}>
-            <div className="room-aliases__input-wrapper">
-              <Input
-                name="alias-input"
-                state={inputState}
-                onChange={handleAliasChange}
-                placeholder={`my_${room.isSpaceRoom() ? 'space' : 'room'}_address`}
-                required
-              />
-            </div>
-            <Button variant="primary" type="submit">Add</Button>
-          </form>
-          <div className="room-aliases__input-status">
-            {validate.status === cons.status.SUCCESS && <Text className="room-aliases__valid" variant="b2">{validate.msg}</Text>}
-            {validate.status === cons.status.ERROR && <Text className="room-aliases__invalid" variant="b2">{validate.msg}</Text>}
-          </div>
-        </div>
-      )}
-      <div className="room-aliases__content">
-        <Button onClick={() => setIsLocalVisible(!isLocalVisible)}>
-          {`${isLocalVisible ? 'Hide' : 'Add / View'} local address`}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-RoomAliases.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomAliases;
diff --git a/src/app/molecules/room-aliases/RoomAliases.scss b/src/app/molecules/room-aliases/RoomAliases.scss
deleted file mode 100644
index b0df6147..00000000
--- a/src/app/molecules/room-aliases/RoomAliases.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
-
-.room-aliases {
-  &__message,
-  & .setting-tile {
-    margin: var(--sp-tight) var(--sp-normal);
-  }
-  & .setting-tile {
-    margin-bottom: var(--sp-loose);
-  }
-
-  &__alias-item {
-    padding: var(--sp-extra-tight) var(--sp-normal);
-    @extend .cp-fx__row--s-c;
-    &.checkbox {
-      @include dir.side(margin, 0 , var(--sp-tight));
-    }
-    & .text {
-      @extend .cp-fx__item-one;
-      @extend .cp-txt__ellipsis;
-      color: var(--tc-surface-high);
-      span {
-        margin: 0 var(--sp-extra-tight);
-        padding: 0 var(--sp-ultra-tight);
-        color: var(--bg-surface);
-        background-color: var(--tc-surface-low);
-        border-radius: 4px;
-      }
-    }
-  }
-  &__item-btns {
-    @include dir.side(margin, 48px, 0);
-    & button {
-      padding: var(--sp-ultra-tight) var(--sp-tight);
-      margin-bottom: var(--sp-tight);
-      @include dir.side(margin, 0, var(--sp-tight));
-    }
-  }
-
-  &__content {
-    margin-bottom: var(--sp-normal);
-
-    & .checkbox {
-      @include dir.side(margin, 0, var(--sp-tight));
-      min-width: 20px;
-    }
-    & > button {
-      margin: 0 var(--sp-normal);
-    }
-  }
-  
-  &__form {
-    padding: var(--sp-normal);
-    padding-top: 0;
-    display: flex;
-    &-label {
-      padding: var(--sp-normal) var(--sp-normal) var(--sp-ultra-tight);
-    }
-  }
-  
-  &__input-wrapper {
-    display: flex;
-    @extend .cp-fx__item-one;
-    @include dir.side(margin, 0, var(--sp-tight));
-    
-    & .input-container {
-      @extend .cp-fx__item-one;
-    }
-  }
-
-  &__input-status {
-    padding: 0 var(--sp-normal);
-  }
-  &__valid {
-    color: var(--tc-positive-high);
-    padding-bottom: var(--sp-normal);
-  }
-  &__invalid {
-    color: var(--tc-danger-high);
-    padding-bottom: var(--sp-normal);
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-emojis/RoomEmojis.jsx b/src/app/molecules/room-emojis/RoomEmojis.jsx
deleted file mode 100644
index c45a9afa..00000000
--- a/src/app/molecules/room-emojis/RoomEmojis.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useReducer, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomEmojis.scss';
-import { EventTimeline } from 'matrix-js-sdk';
-
-import { suffixRename } from '../../../util/common';
-
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import Text from '../../atoms/text/Text';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import ImagePack from '../image-pack/ImagePack';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getStateEvent, getStateEvents } from '../../utils/room';
-
-function useRoomPacks(room) {
-  const mx = useMatrixClient();
-  const [, forceUpdate] = useReducer((count) => count + 1, 0);
-
-  const packEvents = getStateEvents(room, 'im.ponies.room_emotes');
-  const unUsablePacks = [];
-  const usablePacks = packEvents.filter((mEvent) => {
-    if (typeof mEvent.getContent()?.images !== 'object') {
-      unUsablePacks.push(mEvent);
-      return false;
-    }
-    return true;
-  });
-
-  useEffect(() => {
-    const handleEvent = (event, state, prevEvent) => {
-      if (event.getRoomId() !== room.roomId) return;
-      if (event.getType() !== 'im.ponies.room_emotes') return;
-      if (!prevEvent?.getContent()?.images || !event.getContent().images) {
-        forceUpdate();
-      }
-    };
-
-    mx.on('RoomState.events', handleEvent);
-    return () => {
-      mx.removeListener('RoomState.events', handleEvent);
-    };
-  }, [room, mx]);
-
-  const isStateKeyAvailable = (key) => !getStateEvent(room, 'im.ponies.room_emotes', key);
-
-  const createPack = async (name) => {
-    const packContent = {
-      pack: { display_name: name },
-      images: {},
-    };
-    let stateKey = '';
-    if (unUsablePacks.length > 0) {
-      const mEvent = unUsablePacks[0];
-      stateKey = mEvent.getStateKey();
-    } else {
-      stateKey = packContent.pack.display_name.replace(/\s/g, '-');
-      if (!isStateKeyAvailable(stateKey)) {
-        stateKey = suffixRename(
-          stateKey,
-          isStateKeyAvailable,
-        );
-      }
-    }
-    await mx.sendStateEvent(room.roomId, 'im.ponies.room_emotes', packContent, stateKey);
-  };
-
-  const deletePack = async (stateKey) => {
-    await mx.sendStateEvent(room.roomId, 'im.ponies.room_emotes', {}, stateKey);
-  };
-
-  return {
-    usablePacks,
-    createPack,
-    deletePack,
-  };
-}
-
-function RoomEmojis({ roomId }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  const { usablePacks, createPack, deletePack } = useRoomPacks(room);
-
-  const canChange = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('im.ponies.room_emote', mx.getUserId());
-
-  const handlePackCreate = (e) => {
-    e.preventDefault();
-    const { nameInput } = e.target;
-    const name = nameInput.value.trim();
-    if (name === '') return;
-    nameInput.value = '';
-
-    createPack(name);
-  };
-
-  return (
-    <div className="room-emojis">
-      { canChange && (
-        <div className="room-emojis__add-pack">
-          <MenuHeader>Create Pack</MenuHeader>
-          <form onSubmit={handlePackCreate}>
-            <Input name="nameInput" placeholder="Pack Name" required />
-            <Button variant="primary" type="submit">Create pack</Button>
-          </form>
-        </div>
-      )}
-      {
-        usablePacks.length > 0
-          ? usablePacks.reverse().map((mEvent) => (
-            <ImagePack
-              key={mEvent.getId()}
-              roomId={roomId}
-              stateKey={mEvent.getStateKey()}
-              handlePackDelete={canChange ? deletePack : undefined}
-            />
-          )) : (
-            <div className="room-emojis__empty">
-              <Text>No emoji or sticker pack.</Text>
-            </div>
-          )
-      }
-    </div>
-  );
-}
-
-RoomEmojis.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomEmojis;
diff --git a/src/app/molecules/room-emojis/RoomEmojis.scss b/src/app/molecules/room-emojis/RoomEmojis.scss
deleted file mode 100644
index 7ba2b494..00000000
--- a/src/app/molecules/room-emojis/RoomEmojis.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.room-emojis {
-  .image-pack,
-  .room-emojis__add-pack,
-  .room-emojis__empty {
-    margin: var(--sp-normal) 0;
-    background-color: var(--bg-surface);
-    border-radius: var(--bo-radius);
-    box-shadow: var(--bs-surface-border);
-    overflow: hidden;
-  
-    & > .context-menu__header:first-child {
-      margin-top: 2px;
-    }
-  }
-  &__add-pack {
-    & form {
-      margin: var(--sp-normal);
-      display: flex;
-      gap: var(--sp-normal);
-      & .input-container {
-        flex-grow: 1;
-      }
-    }
-  }
-  &__empty {
-    padding: var(--sp-extra-loose) var(--sp-normal);
-    text-align: center;
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-encryption/RoomEncryption.jsx b/src/app/molecules/room-encryption/RoomEncryption.jsx
deleted file mode 100644
index 6db87a8e..00000000
--- a/src/app/molecules/room-encryption/RoomEncryption.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './RoomEncryption.scss';
-import { EventTimeline } from 'matrix-js-sdk';
-
-import Text from '../../atoms/text/Text';
-import Toggle from '../../atoms/button/Toggle';
-import SettingTile from '../setting-tile/SettingTile';
-
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getStateEvents } from '../../utils/room';
-
-function RoomEncryption({ roomId }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-  const encryptionEvents = getStateEvents(room, 'm.room.encryption');
-  const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
-  const canEnableEncryption = room.getLiveTimeline().getState(EventTimeline.FORWARDS).maySendStateEvent('m.room.encryption', mx.getUserId());
-
-  const handleEncryptionEnable = async () => {
-    const joinRule = room.getJoinRule();
-    const confirmMsg1 = 'It is not recommended to add encryption in public room. Anyone can find and join public rooms, so anyone can read messages in them.';
-    const confirmMsg2 = 'Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly';
-
-    const isConfirmed1 = (joinRule === 'public')
-      ? await confirmDialog('Enable encryption', confirmMsg1, 'Continue', 'caution')
-      : true;
-    if (!isConfirmed1) return;
-    if (await confirmDialog('Enable encryption', confirmMsg2, 'Enable', 'caution')) {
-      setIsEncrypted(true);
-      mx.sendStateEvent(roomId, 'm.room.encryption', {
-        algorithm: 'm.megolm.v1.aes-sha2',
-      });
-    }
-  };
-
-  return (
-    <div className="room-encryption">
-      <SettingTile
-        title="Enable room encryption"
-        content={(
-          <Text variant="b3">Once enabled, encryption cannot be disabled.</Text>
-        )}
-        options={(
-          <Toggle
-            isActive={isEncrypted}
-            onToggle={handleEncryptionEnable}
-            disabled={isEncrypted || !canEnableEncryption}
-          />
-        )}
-      />
-    </div>
-  );
-}
-
-RoomEncryption.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomEncryption;
diff --git a/src/app/molecules/room-encryption/RoomEncryption.scss b/src/app/molecules/room-encryption/RoomEncryption.scss
deleted file mode 100644
index 1c521f49..00000000
--- a/src/app/molecules/room-encryption/RoomEncryption.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.room-encryption {
-  & .setting-tile {
-    margin: var(--sp-normal);
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx b/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx
deleted file mode 100644
index c897cb35..00000000
--- a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import './RoomHistoryVisibility.scss';
-
-
-import Text from '../../atoms/text/Text';
-import RadioButton from '../../atoms/button/RadioButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const visibility = {
-  WORLD_READABLE: 'world_readable',
-  SHARED: 'shared',
-  INVITED: 'invited',
-  JOINED: 'joined',
-};
-
-const items = [{
-  iconSrc: null,
-  text: 'Anyone (including guests)',
-  type: visibility.WORLD_READABLE,
-}, {
-  iconSrc: null,
-  text: 'Members (all messages)',
-  type: visibility.SHARED,
-}, {
-  iconSrc: null,
-  text: 'Members (messages after invite)',
-  type: visibility.INVITED,
-}, {
-  iconSrc: null,
-  text: 'Members (messages after join)',
-  type: visibility.JOINED,
-}];
-
-
-function useVisibility(roomId) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  const [activeType, setActiveType] = useState(room.getHistoryVisibility());
-  useEffect(() => {
-    setActiveType(room.getHistoryVisibility());
-  }, [room]);
-
-  const setVisibility = useCallback((item) => {
-    if (item.type === activeType.type) return;
-    setActiveType(item.type);
-    mx.sendStateEvent(
-      roomId, 'm.room.history_visibility',
-      {
-        history_visibility: item.type,
-      },
-    );
-  }, [mx, activeType, roomId]);
-
-  return [activeType, setVisibility];
-}
-
-function RoomHistoryVisibility({ roomId }) {
-  const [activeType, setVisibility] = useVisibility(roomId);
-  const mx = useMatrixClient();
-  const userId = mx.getUserId();
-  const room = mx.getRoom(roomId);
-  const { currentState } = room;
-
-  const canChange = currentState.maySendStateEvent('m.room.history_visibility', userId);
-
-  return (
-    <div className="room-history-visibility">
-      {
-        items.map((item) => (
-          <MenuItem
-            variant={activeType === item.type ? 'positive' : 'surface'}
-            key={item.type}
-            iconSrc={item.iconSrc}
-            onClick={() => setVisibility(item)}
-            disabled={(!canChange)}
-          >
-            <Text varient="b1">
-              <span>{item.text}</span>
-              <RadioButton isActive={activeType === item.type} />
-            </Text>
-          </MenuItem>
-        ))
-      }
-      <Text variant="b3">Changes to history visibility will only apply to future messages. The visibility of existing history will have no effect.</Text>
-    </div>
-  );
-}
-
-RoomHistoryVisibility.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomHistoryVisibility;
diff --git a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss b/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss
deleted file mode 100644
index b9e0a2c6..00000000
--- a/src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
-
-.room-history-visibility {
-  & .context-menu__item .text {
-    margin: 0 !important;
-    @extend .cp-fx__item-one;
-    @extend .cp-fx__row--s-c;
-    
-    & span:first-child {
-      @extend .cp-fx__item-one;
-      @extend .cp-txt__ellipsis;
-    }
-    
-    & .radio-btn {
-      @include dir.side(margin, var(--sp-tight), 0);
-    }
-  }
-
-  & > .text {
-    margin: var(--sp-normal);
-    margin-top: var(--sp-ultra-tight);
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-intro/RoomIntro.jsx b/src/app/molecules/room-intro/RoomIntro.jsx
deleted file mode 100644
index 2ec46cb1..00000000
--- a/src/app/molecules/room-intro/RoomIntro.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RoomIntro.scss';
-
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-
-function RoomIntro({
-  roomId, avatarSrc, name, heading, desc, time,
-}) {
-  return (
-    <div className="room-intro">
-      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
-      <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1" weight="medium" primary>{heading}</Text>
-        <Text className="room-intro__desc" variant="b1">{desc}</Text>
-        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
-      </div>
-    </div>
-  );
-}
-
-RoomIntro.defaultProps = {
-  avatarSrc: null,
-  time: null,
-};
-
-RoomIntro.propTypes = {
-  roomId: PropTypes.string.isRequired,
-  avatarSrc: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
-  name: PropTypes.string.isRequired,
-  heading: PropTypes.node.isRequired,
-  desc: PropTypes.node.isRequired,
-  time: PropTypes.node,
-};
-
-export default RoomIntro;
diff --git a/src/app/molecules/room-intro/RoomIntro.scss b/src/app/molecules/room-intro/RoomIntro.scss
deleted file mode 100644
index 7e80249a..00000000
--- a/src/app/molecules/room-intro/RoomIntro.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use '../../partials/dir';
-
-.room-intro {
-  margin-top: calc(2 * var(--sp-extra-loose));
-  margin-bottom: var(--sp-extra-loose);
-  --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
-
-  .room-intro__content {
-    margin-top: var(--sp-extra-loose);
-    width: calc(100% - 88px);
-  }
-  &__name {
-    color: var(--tc-surface-high);
-  }
-  &__desc {
-    color: var(--tc-surface-normal);
-    margin: var(--sp-tight) 0 var(--sp-extra-tight);
-    & a {
-      word-break: break-all;
-    }
-  }
-  &__time {
-    color: var(--tc-surface-low);
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-members/RoomMembers.jsx b/src/app/molecules/room-members/RoomMembers.jsx
deleted file mode 100644
index a3928fb7..00000000
--- a/src/app/molecules/room-members/RoomMembers.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, {
-  useState, useEffect, useCallback,
-} from 'react';
-import PropTypes from 'prop-types';
-import './RoomMembers.scss';
-
-import colorMXID from '../../../util/colorMXID';
-import { openProfileViewer } from '../../../client/action/navigation';
-import { getUsernameOfRoomMember, getPowerLabel } from '../../../util/matrixUtil';
-import AsyncSearch from '../../../util/AsyncSearch';
-import { memberByAtoZ, memberByPowerLevel } from '../../../util/sort';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
-import PeopleSelector from '../people-selector/PeopleSelector';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const PER_PAGE_MEMBER = 50;
-
-function normalizeMembers(mx, members) {
-  return members.map((member) => ({
-    userId: member.userId,
-    name: getUsernameOfRoomMember(member),
-    username: member.userId.slice(1, member.userId.indexOf(':')),
-    avatarSrc: member.getAvatarUrl(mx.baseUrl, 24, 24, 'crop'),
-    peopleRole: getPowerLabel(member.powerLevel),
-    powerLevel: members.powerLevel,
-  }));
-}
-
-function useMemberOfMembership(roomId, membership) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-  const [members, setMembers] = useState([]);
-
-  useEffect(() => {
-    let isMounted = true;
-    let isLoadingMembers = false;
-
-    const updateMemberList = (event) => {
-      if (isLoadingMembers) return;
-      if (event && event?.getRoomId() !== roomId) return;
-      const memberOfMembership = normalizeMembers(
-        mx,
-        room.getMembersWithMembership(membership)
-          .sort(memberByAtoZ).sort(memberByPowerLevel),
-      );
-      setMembers(memberOfMembership);
-    };
-
-    updateMemberList();
-    isLoadingMembers = true;
-    room.loadMembersIfNeeded().then(() => {
-      isLoadingMembers = false;
-      if (!isMounted) return;
-      updateMemberList();
-    });
-
-    mx.on('RoomMember.membership', updateMemberList);
-    mx.on('RoomMember.powerLevel', updateMemberList);
-    return () => {
-      isMounted = false;
-      mx.removeListener('RoomMember.membership', updateMemberList);
-      mx.removeListener('RoomMember.powerLevel', updateMemberList);
-    };
-  }, [mx, membership]);
-
-  return [members];
-}
-
-function useSearchMembers(members) {
-  const [searchMembers, setSearchMembers] = useState(null);
-  const [asyncSearch] = useState(new AsyncSearch());
-
-  const reSearch = useCallback(() => {
-    if (searchMembers) {
-      asyncSearch.search(searchMembers.term);
-    }
-  }, [searchMembers, asyncSearch]);
-
-  useEffect(() => {
-    asyncSearch.setup(members, {
-      keys: ['name', 'username', 'userId'],
-      limit: PER_PAGE_MEMBER,
-    });
-    reSearch();
-  }, [members, asyncSearch]);
-
-  useEffect(() => {
-    const handleSearchData = (data, term) => setSearchMembers({ data, term });
-    asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
-    return () => {
-      asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
-    };
-  }, [asyncSearch]);
-
-  const handleSearch = (e) => {
-    const term = e.target.value;
-    if (term === '' || term === undefined) {
-      setSearchMembers(null);
-    } else asyncSearch.search(term);
-  };
-
-  return [searchMembers, handleSearch];
-}
-
-function RoomMembers({ roomId }) {
-  const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
-  const [membership, setMembership] = useState('join');
-  const [members] = useMemberOfMembership(roomId, membership);
-  const [searchMembers, handleSearch] = useSearchMembers(members);
-
-  useEffect(() => {
-    setItemCount(PER_PAGE_MEMBER);
-  }, [searchMembers]);
-
-  const loadMorePeople = () => {
-    setItemCount(itemCount + PER_PAGE_MEMBER);
-  };
-
-  const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount);
-  return (
-    <div className="room-members">
-      <MenuHeader>Search member</MenuHeader>
-      <Input
-        onChange={handleSearch}
-        placeholder="Search for name"
-        autoFocus
-      />
-      <div className="room-members__header">
-        <MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader>
-        <SegmentedControls
-          selected={
-            (() => {
-              const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
-              return getSegmentIndex[membership];
-            })()
-          }
-          segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
-          onSelect={(index) => {
-            const memberships = ['join', 'invite', 'ban'];
-            setMembership(memberships[index]);
-          }}
-        />
-      </div>
-      <div className="room-members__list">
-        {mList.map((member) => (
-          <PeopleSelector
-            key={member.userId}
-            onClick={() => openProfileViewer(member.userId, roomId)}
-            avatarSrc={member.avatarSrc}
-            name={member.name}
-            color={colorMXID(member.userId)}
-            peopleRole={member.peopleRole}
-          />
-        ))}
-        {
-          (searchMembers?.data.length === 0 || members.length === 0)
-          && (
-            <div className="room-members__status">
-              <Text variant="b2">
-                {searchMembers ? `No results found for "${searchMembers.term}"` : 'No members to display'}
-              </Text>
-            </div>
-          )
-        }
-        {
-          mList.length !== 0
-          && members.length > itemCount
-          && searchMembers === null
-          && <Button onClick={loadMorePeople}>View more</Button>
-        }
-      </div>
-    </div>
-  );
-}
-
-RoomMembers.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomMembers;
diff --git a/src/app/molecules/room-members/RoomMembers.scss b/src/app/molecules/room-members/RoomMembers.scss
deleted file mode 100644
index 4715508e..00000000
--- a/src/app/molecules/room-members/RoomMembers.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-
-.room-members {
-  & .input-container {
-    margin: var(--sp-normal);
-  } 
-
-  &__header {
-    display: flex;
-    align-items: flex-start;
-    & .context-menu__header {
-      @extend .cp-fx__item-one;
-      margin-top: 14px;
-      border-top: 1px solid var(--bg-surface-border);
-      border-bottom: none;
-    }
-    & .segmented-controls {
-      @include dir.side(margin, 0, var(--sp-normal));
-      & > button {
-        padding: var(--sp-ultra-tight) 0;
-      }
-    }
-  }
-  &__list {
-    
-    & .people-selector__container:last-child {
-      margin-bottom: var(--sp-extra-tight);
-    }
-    & > .btn-surface {
-      width: calc(100% - 32px);
-      margin: var(--sp-normal);
-    }
-  }
-  
-  &__status {
-    margin: var(--sp-normal);
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-notification/RoomNotification.jsx b/src/app/molecules/room-notification/RoomNotification.jsx
deleted file mode 100644
index db970708..00000000
--- a/src/app/molecules/room-notification/RoomNotification.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import './RoomNotification.scss';
-
-import cons from '../../../client/state/cons';
-
-import Text from '../../atoms/text/Text';
-import RadioButton from '../../atoms/button/RadioButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
-
-import BellIC from '../../../../public/res/ic/outlined/bell.svg';
-import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
-import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
-import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
-import { getNotificationType } from '../../utils/room';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const items = [
-  {
-    iconSrc: BellIC,
-    text: 'Global',
-    type: cons.notifs.DEFAULT,
-  },
-  {
-    iconSrc: BellRingIC,
-    text: 'All messages',
-    type: cons.notifs.ALL_MESSAGES,
-  },
-  {
-    iconSrc: BellPingIC,
-    text: 'Mentions & Keywords',
-    type: cons.notifs.MENTIONS_AND_KEYWORDS,
-  },
-  {
-    iconSrc: BellOffIC,
-    text: 'Mute',
-    type: cons.notifs.MUTE,
-  },
-];
-
-function setRoomNotifType(mx, roomId, newType) {
-  let roomPushRule;
-  try {
-    roomPushRule = mx.getRoomPushRule('global', roomId);
-  } catch {
-    roomPushRule = undefined;
-  }
-  const promises = [];
-
-  if (newType === cons.notifs.MUTE) {
-    if (roomPushRule) {
-      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
-    }
-    promises.push(
-      mx.addPushRule('global', 'override', roomId, {
-        conditions: [
-          {
-            kind: 'event_match',
-            key: 'room_id',
-            pattern: roomId,
-          },
-        ],
-        actions: ['dont_notify'],
-      })
-    );
-    return promises;
-  }
-
-  const oldState = getNotificationType(mx, roomId);
-  if (oldState === cons.notifs.MUTE) {
-    promises.push(mx.deletePushRule('global', 'override', roomId));
-  }
-
-  if (newType === cons.notifs.DEFAULT) {
-    if (roomPushRule) {
-      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
-    }
-    return Promise.all(promises);
-  }
-
-  if (newType === cons.notifs.MENTIONS_AND_KEYWORDS) {
-    promises.push(
-      mx.addPushRule('global', 'room', roomId, {
-        actions: ['dont_notify'],
-      })
-    );
-    promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
-    return Promise.all(promises);
-  }
-
-  // cons.notifs.ALL_MESSAGES
-  promises.push(
-    mx.addPushRule('global', 'room', roomId, {
-      actions: [
-        'notify',
-        {
-          set_tweak: 'sound',
-          value: 'default',
-        },
-      ],
-    })
-  );
-
-  promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
-
-  return Promise.all(promises);
-}
-
-function useNotifications(roomId) {
-  const mx = useMatrixClient();
-  const [activeType, setActiveType] = useState(getNotificationType(mx, roomId));
-  useEffect(() => {
-    setActiveType(getNotificationType(mx, roomId));
-  }, [mx, roomId]);
-
-  const setNotification = useCallback(
-    (item) => {
-      if (item.type === activeType.type) return;
-      setActiveType(item.type);
-      setRoomNotifType(mx, roomId, item.type);
-    },
-    [mx, activeType, roomId]
-  );
-  return [activeType, setNotification];
-}
-
-function RoomNotification({ roomId }) {
-  const [activeType, setNotification] = useNotifications(roomId);
-
-  return (
-    <div className="room-notification">
-      {items.map((item) => (
-        <MenuItem
-          variant={activeType === item.type ? 'positive' : 'surface'}
-          key={item.type}
-          iconSrc={item.iconSrc}
-          onClick={() => setNotification(item)}
-        >
-          <Text varient="b1">
-            <span>{item.text}</span>
-            <RadioButton isActive={activeType === item.type} />
-          </Text>
-        </MenuItem>
-      ))}
-    </div>
-  );
-}
-
-RoomNotification.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomNotification;
diff --git a/src/app/molecules/room-notification/RoomNotification.scss b/src/app/molecules/room-notification/RoomNotification.scss
deleted file mode 100644
index a831b34d..00000000
--- a/src/app/molecules/room-notification/RoomNotification.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
-
-.room-notification {
-  & .context-menu__item .text {
-    @extend .cp-fx__item-one;
-    @extend .cp-fx__row--s-c;
-    
-    & span:first-child {
-      @extend .cp-fx__item-one;
-      @extend .cp-txt__ellipsis;
-    }
-    
-    & .radio-btn {
-      @include dir.side(margin, var(--sp-tight), 0);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-permissions/RoomPermissions.jsx b/src/app/molecules/room-permissions/RoomPermissions.jsx
deleted file mode 100644
index 7629558f..00000000
--- a/src/app/molecules/room-permissions/RoomPermissions.jsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomPermissions.scss';
-import { EventTimeline } from 'matrix-js-sdk';
-
-import { getPowerLabel } from '../../../util/matrixUtil';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import PowerLevelSelector from '../power-level-selector/PowerLevelSelector';
-import SettingTile from '../setting-tile/SettingTile';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-
-import { useForceUpdate } from '../../hooks/useForceUpdate';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getStateEvent } from '../../utils/room';
-
-const permissionsInfo = {
-  users_default: {
-    name: 'Default role',
-    description: 'Set default role for all members.',
-    default: 0,
-  },
-  events_default: {
-    name: 'Send messages',
-    description: 'Set minimum power level to send messages in room.',
-    default: 0,
-  },
-  'm.reaction': {
-    parent: 'events',
-    name: 'Send reactions',
-    description: 'Set minimum power level to send reactions in room.',
-    default: 0,
-  },
-  redact: {
-    name: 'Delete messages sent by others',
-    description: 'Set minimum power level to delete messages in room.',
-    default: 50,
-  },
-  notifications: {
-    name: 'Ping room',
-    description: 'Set minimum power level to ping room.',
-    default: {
-      room: 50,
-    },
-  },
-  'm.space.child': {
-    parent: 'events',
-    name: 'Manage rooms in space',
-    description: 'Set minimum power level to manage rooms in space.',
-    default: 50,
-  },
-  invite: {
-    name: 'Invite',
-    description: 'Set minimum power level to invite members.',
-    default: 50,
-  },
-  kick: {
-    name: 'Kick',
-    description: 'Set minimum power level to kick members.',
-    default: 50,
-  },
-  ban: {
-    name: 'Ban',
-    description: 'Set minimum power level to ban members.',
-    default: 50,
-  },
-  'm.room.avatar': {
-    parent: 'events',
-    name: 'Change avatar',
-    description: 'Set minimum power level to change room/space avatar.',
-    default: 50,
-  },
-  'm.room.name': {
-    parent: 'events',
-    name: 'Change name',
-    description: 'Set minimum power level to change room/space name.',
-    default: 50,
-  },
-  'm.room.topic': {
-    parent: 'events',
-    name: 'Change topic',
-    description: 'Set minimum power level to change room/space topic.',
-    default: 50,
-  },
-  state_default: {
-    name: 'Change settings',
-    description: 'Set minimum power level to change settings.',
-    default: 50,
-  },
-  'm.room.canonical_alias': {
-    parent: 'events',
-    name: 'Change published address',
-    description: 'Set minimum power level to publish and set main address.',
-    default: 50,
-  },
-  'm.room.power_levels': {
-    parent: 'events',
-    name: 'Change permissions',
-    description: 'Set minimum power level to change permissions.',
-    default: 50,
-  },
-  'm.room.encryption': {
-    parent: 'events',
-    name: 'Enable room encryption',
-    description: 'Set minimum power level to enable room encryption.',
-    default: 50,
-  },
-  'm.room.history_visibility': {
-    parent: 'events',
-    name: 'Change history visibility',
-    description: 'Set minimum power level to change room messages history visibility.',
-    default: 50,
-  },
-  'm.room.tombstone': {
-    parent: 'events',
-    name: 'Upgrade room',
-    description: 'Set minimum power level to upgrade room.',
-    default: 50,
-  },
-  'm.room.pinned_events': {
-    parent: 'events',
-    name: 'Pin messages',
-    description: 'Set minimum power level to pin messages in room.',
-    default: 50,
-  },
-  'm.room.server_acl': {
-    parent: 'events',
-    name: 'Change server ACLs',
-    description: 'Set minimum power level to change server ACLs.',
-    default: 50,
-  },
-  'im.vector.modular.widgets': {
-    parent: 'events',
-    name: 'Modify widgets',
-    description: 'Set minimum power level to modify room widgets.',
-    default: 50,
-  },
-};
-
-const roomPermsGroups = {
-  'General Permissions': ['users_default', 'events_default', 'm.reaction', 'redact', 'notifications'],
-  'Manage members permissions': ['invite', 'kick', 'ban'],
-  'Room profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
-  'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels', 'm.room.encryption', 'm.room.history_visibility'],
-  'Other permissions': ['m.room.tombstone', 'm.room.pinned_events', 'm.room.server_acl', 'im.vector.modular.widgets'],
-};
-
-const spacePermsGroups = {
-  'General Permissions': ['users_default', 'm.space.child'],
-  'Manage members permissions': ['invite', 'kick', 'ban'],
-  'Space profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
-  'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'],
-};
-
-function useRoomStateUpdate(roomId) {
-  const [, forceUpdate] = useForceUpdate();
-  const mx = useMatrixClient();
-
-  useEffect(() => {
-    const handleStateEvent = (event) => {
-      if (event.getRoomId() !== roomId) return;
-      forceUpdate();
-    };
-
-    mx.on('RoomState.events', handleStateEvent);
-    return () => {
-      mx.removeListener('RoomState.events', handleStateEvent);
-    };
-  }, [mx, roomId]);
-}
-
-function RoomPermissions({ roomId }) {
-  useRoomStateUpdate(roomId);
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-  const pLEvent = getStateEvent(room, 'm.room.power_levels');
-  const permissions = pLEvent.getContent();
-  const canChangePermission = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('m.room.power_levels', mx.getUserId());
-  const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel ?? 100;
-
-  const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
-    const handlePowerLevelChange = (newPowerLevel) => {
-      if (powerLevel === newPowerLevel) return;
-
-      const newPermissions = { ...permissions };
-      if (parentKey) {
-        newPermissions[parentKey] = {
-          ...permissions[parentKey],
-          [permKey]: newPowerLevel,
-        };
-      } else if (permKey === 'notifications') {
-        newPermissions[permKey] = {
-          ...permissions[permKey],
-          room: newPowerLevel,
-        };
-      } else {
-        newPermissions[permKey] = newPowerLevel;
-      }
-
-      mx.sendStateEvent(roomId, 'm.room.power_levels', newPermissions);
-    };
-
-    openReusableContextMenu(
-      'bottom',
-      getEventCords(e, '.btn-surface'),
-      (closeMenu) => (
-        <PowerLevelSelector
-          value={powerLevel}
-          max={myPowerLevel}
-          onSelect={(pl) => {
-            closeMenu();
-            handlePowerLevelChange(pl);
-          }}
-        />
-      ),
-    );
-  };
-
-  const permsGroups = room.isSpaceRoom() ? spacePermsGroups : roomPermsGroups;
-  return (
-    <div className="room-permissions">
-      {
-        Object.keys(permsGroups).map((groupKey) => {
-          const groupedPermKeys = permsGroups[groupKey];
-          return (
-            <div className="room-permissions__card" key={groupKey}>
-              <MenuHeader>{groupKey}</MenuHeader>
-              {
-                groupedPermKeys.map((permKey) => {
-                  const permInfo = permissionsInfo[permKey];
-
-                  let powerLevel = 0;
-                  let permValue = permInfo.parent
-                    ? permissions[permInfo.parent]?.[permKey]
-                    : permissions[permKey];
-
-                  if (permValue === undefined) permValue = permInfo.default;
-
-                  if (typeof permValue === 'number') {
-                    powerLevel = permValue;
-                  } else if (permKey === 'notifications') {
-                    powerLevel = permValue.room ?? 50;
-                  }
-                  return (
-                    <SettingTile
-                      key={permKey}
-                      title={permInfo.name}
-                      content={<Text variant="b3">{permInfo.description}</Text>}
-                      options={(
-                        <Button
-                          onClick={
-                            canChangePermission
-                              ? (e) => handlePowerSelector(e, permKey, permInfo.parent, powerLevel)
-                              : null
-                          }
-                          iconSrc={canChangePermission ? ChevronBottomIC : null}
-                        >
-                          <Text variant="b2">
-                            {`${getPowerLabel(powerLevel) || 'Member'} - ${powerLevel}`}
-                          </Text>
-                        </Button>
-                      )}
-                    />
-                  );
-                })
-              }
-            </div>
-          );
-        })
-      }
-    </div>
-  );
-}
-
-RoomPermissions.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomPermissions;
diff --git a/src/app/molecules/room-permissions/RoomPermissions.scss b/src/app/molecules/room-permissions/RoomPermissions.scss
deleted file mode 100644
index 81b22ca8..00000000
--- a/src/app/molecules/room-permissions/RoomPermissions.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.room-permissions {
-  & .setting-tile {
-    margin: 0 var(--sp-normal);
-    margin-top: var(--sp-tight);
-    padding-bottom: var(--sp-tight);
-    border-bottom: 1px solid var(--bg-surface-border);
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-profile/RoomProfile.jsx b/src/app/molecules/room-profile/RoomProfile.jsx
deleted file mode 100644
index da8ce755..00000000
--- a/src/app/molecules/room-profile/RoomProfile.jsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useAtomValue } from 'jotai';
-import Linkify from 'linkify-react';
-import './RoomProfile.scss';
-
-import cons from '../../../client/state/cons';
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import IconButton from '../../atoms/button/IconButton';
-import ImageUpload from '../image-upload/ImageUpload';
-
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-
-import { useStore } from '../../hooks/useStore';
-import { useForceUpdate } from '../../hooks/useForceUpdate';
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
-import { mDirectAtom } from '../../state/mDirectList';
-import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function RoomProfile({ roomId }) {
-  const isMountStore = useStore();
-  const [isEditing, setIsEditing] = useState(false);
-  const [, forceUpdate] = useForceUpdate();
-  const [status, setStatus] = useState({
-    msg: null,
-    type: cons.status.PRE_FLIGHT,
-  });
-
-  const mx = useMatrixClient();
-  const mDirects = useAtomValue(mDirectAtom);
-  const isDM = mDirects.has(roomId);
-  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM
-    ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop')
-    : avatarSrc;
-  const room = mx.getRoom(roomId);
-  const { currentState } = room;
-  const roomName = room.name;
-  const roomTopic = currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
-
-  const userId = mx.getUserId();
-
-  const canChangeAvatar = currentState.maySendStateEvent('m.room.avatar', userId);
-  const canChangeName = currentState.maySendStateEvent('m.room.name', userId);
-  const canChangeTopic = currentState.maySendStateEvent('m.room.topic', userId);
-
-  useEffect(() => {
-    isMountStore.setItem(true);
-    const handleStateEvent = (mEvent) => {
-      if (mEvent.event.room_id !== roomId) return;
-      forceUpdate();
-    };
-
-    mx.on('RoomState.events', handleStateEvent);
-    return () => {
-      mx.removeListener('RoomState.events', handleStateEvent);
-      isMountStore.setItem(false);
-      setStatus({
-        msg: null,
-        type: cons.status.PRE_FLIGHT,
-      });
-      setIsEditing(false);
-    };
-  }, [mx, roomId]);
-
-  const handleOnSubmit = async (e) => {
-    e.preventDefault();
-    const { target } = e;
-    const roomNameInput = target.elements['room-name'];
-    const roomTopicInput = target.elements['room-topic'];
-
-    try {
-      if (canChangeName) {
-        const newName = roomNameInput.value;
-        if (newName !== roomName && roomName.trim() !== '') {
-          setStatus({
-            msg: 'Saving room name...',
-            type: cons.status.IN_FLIGHT,
-          });
-          await mx.setRoomName(roomId, newName);
-        }
-      }
-      if (canChangeTopic) {
-        const newTopic = roomTopicInput.value;
-        if (newTopic !== roomTopic) {
-          if (isMountStore.getItem()) {
-            setStatus({
-              msg: 'Saving room topic...',
-              type: cons.status.IN_FLIGHT,
-            });
-          }
-          await mx.setRoomTopic(roomId, newTopic);
-        }
-      }
-      if (!isMountStore.getItem()) return;
-      setStatus({
-        msg: 'Saved successfully',
-        type: cons.status.SUCCESS,
-      });
-    } catch (err) {
-      if (!isMountStore.getItem()) return;
-      setStatus({
-        msg: err.message || 'Unable to save.',
-        type: cons.status.ERROR,
-      });
-    }
-  };
-
-  const handleCancelEditing = () => {
-    setStatus({
-      msg: null,
-      type: cons.status.PRE_FLIGHT,
-    });
-    setIsEditing(false);
-  };
-
-  const handleAvatarUpload = async (url) => {
-    if (url === null) {
-      const isConfirmed = await confirmDialog(
-        'Remove avatar',
-        'Are you sure that you want to remove room avatar?',
-        'Remove',
-        'caution'
-      );
-      if (isConfirmed) {
-        await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
-      }
-    } else await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
-  };
-
-  const renderEditNameAndTopic = () => (
-    <form className="room-profile__edit-form" onSubmit={handleOnSubmit}>
-      {canChangeName && (
-        <Input
-          value={roomName}
-          name="room-name"
-          disabled={status.type === cons.status.IN_FLIGHT}
-          label="Name"
-        />
-      )}
-      {canChangeTopic && (
-        <Input
-          value={roomTopic}
-          name="room-topic"
-          disabled={status.type === cons.status.IN_FLIGHT}
-          minHeight={100}
-          resizable
-          label="Topic"
-        />
-      )}
-      {(!canChangeName || !canChangeTopic) && (
-        <Text variant="b3">{`You have permission to change ${
-          room.isSpaceRoom() ? 'space' : 'room'
-        } ${canChangeName ? 'name' : 'topic'} only.`}</Text>
-      )}
-      {status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.SUCCESS && (
-        <Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">
-          {status.msg}
-        </Text>
-      )}
-      {status.type === cons.status.ERROR && (
-        <Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">
-          {status.msg}
-        </Text>
-      )}
-      {status.type !== cons.status.IN_FLIGHT && (
-        <div>
-          <Button type="submit" variant="primary">
-            Save
-          </Button>
-          <Button onClick={handleCancelEditing}>Cancel</Button>
-        </div>
-      )}
-    </form>
-  );
-
-  const renderNameAndTopic = () => (
-    <div
-      className="room-profile__display"
-      style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
-    >
-      <div>
-        <Text variant="h2" weight="medium" primary>
-          {roomName}
-        </Text>
-        {(canChangeName || canChangeTopic) && (
-          <IconButton
-            src={PencilIC}
-            size="extra-small"
-            tooltip="Edit"
-            onClick={() => setIsEditing(true)}
-          />
-        )}
-      </div>
-      <Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
-      {roomTopic && (
-        <Text variant="b2">
-          <Linkify options={LINKIFY_OPTS}>{roomTopic}</Linkify>
-        </Text>
-      )}
-    </div>
-  );
-
-  return (
-    <div className="room-profile">
-      <div className="room-profile__content">
-        {!canChangeAvatar && (
-          <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />
-        )}
-        {canChangeAvatar && (
-          <ImageUpload
-            text={roomName}
-            bgColor={colorMXID(roomId)}
-            imageSrc={avatarSrc}
-            onUpload={handleAvatarUpload}
-            onRequestRemove={() => handleAvatarUpload(null)}
-          />
-        )}
-        {!isEditing && renderNameAndTopic()}
-        {isEditing && renderEditNameAndTopic()}
-      </div>
-    </div>
-  );
-}
-
-RoomProfile.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomProfile;
diff --git a/src/app/molecules/room-profile/RoomProfile.scss b/src/app/molecules/room-profile/RoomProfile.scss
deleted file mode 100644
index 43d70144..00000000
--- a/src/app/molecules/room-profile/RoomProfile.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-
-.room-profile {
-  
-  &__content {
-    @extend .cp-fx__row;
-    & .avatar-container {
-      min-width: var(--av-large);
-    }
-  }
-
-  &__display {
-    align-self: flex-end;
-    @include dir.side(margin, var(--sp-loose), 0);
-
-    & > div:first-child {
-      @extend .cp-fx__row--s-c;
-      & > .text {
-        @include dir.side(margin, 0, var(--sp-extra-tight));
-      }
-    }
-
-    & > *:not(:first-child) {
-      margin-top: var(--sp-ultra-tight);
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-  }
-  
-  &__edit-form {
-    @extend .cp-fx__item-one;
-    @include dir.side(margin, var(--sp-loose), 0);
-
-    & .input-container {
-      margin-bottom: var(--sp-extra-tight);
-    }
-
-    & > .text {
-      margin-bottom: var(--sp-tight);
-    }
-    
-    & > *:last-child {
-      @extend .cp-fx__item-one;
-      @extend .cp-fx__row;
-      margin-top: var(--sp-tight);
-      
-      .btn-primary {
-        @include dir.side(margin, 0, var(--sp-tight));
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-visibility/RoomVisibility.jsx b/src/app/molecules/room-visibility/RoomVisibility.jsx
deleted file mode 100644
index f9bb815d..00000000
--- a/src/app/molecules/room-visibility/RoomVisibility.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import './RoomVisibility.scss';
-import { EventTimeline } from 'matrix-js-sdk';
-
-import Text from '../../atoms/text/Text';
-import RadioButton from '../../atoms/button/RadioButton';
-import { MenuItem } from '../../atoms/context-menu/ContextMenu';
-
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
-import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const visibility = {
-  INVITE: 'invite',
-  RESTRICTED: 'restricted',
-  PUBLIC: 'public',
-};
-
-function setJoinRule(mx, roomId, type) {
-  let allow;
-  if (type === visibility.RESTRICTED) {
-    const { currentState } = mx.getRoom(roomId);
-    const mEvent = currentState.getStateEvents('m.space.parent')[0];
-    if (!mEvent) return Promise.resolve(undefined);
-
-    allow = [{
-      room_id: mEvent.getStateKey(),
-      type: 'm.room_membership',
-    }];
-  }
-
-  return mx.sendStateEvent(
-    roomId,
-    'm.room.join_rules',
-    {
-      join_rule: type,
-      allow,
-    },
-  );
-}
-
-function useVisibility(roomId) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  const [activeType, setActiveType] = useState(room.getJoinRule());
-  useEffect(() => {
-    setActiveType(room.getJoinRule());
-  }, [room]);
-
-  const setNotification = useCallback((item) => {
-    if (item.type === activeType.type) return;
-    setActiveType(item.type);
-    setJoinRule(mx, roomId, item.type);
-  }, [mx, activeType, roomId]);
-
-  return [activeType, setNotification];
-}
-
-function RoomVisibility({ roomId }) {
-  const [activeType, setVisibility] = useVisibility(roomId);
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-  const isSpace = room.isSpaceRoom();
-  const { currentState } = room;
-
-  const noSpaceParent = currentState.getStateEvents('m.space.parent').length === 0;
-  const mCreate = currentState.getStateEvents('m.room.create')[0]?.getContent();
-  const roomVersion = Number(mCreate?.room_version ?? 0);
-
-  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.hasSufficientPowerLevelFor('state_default', myPowerlevel);
-
-  const items = [{
-    iconSrc: isSpace ? SpaceLockIC : HashLockIC,
-    text: 'Private (invite only)',
-    type: visibility.INVITE,
-    unsupported: false,
-  }, {
-    iconSrc: isSpace ? SpaceIC : HashIC,
-    text: roomVersion < 8 ? 'Restricted (unsupported: required room upgrade)' : 'Restricted (space member can join)',
-    type: visibility.RESTRICTED,
-    unsupported: roomVersion < 8 || noSpaceParent,
-  }, {
-    iconSrc: isSpace ? SpaceGlobeIC : HashGlobeIC,
-    text: 'Public (anyone can join)',
-    type: visibility.PUBLIC,
-    unsupported: false,
-  }];
-
-  return (
-    <div className="room-visibility">
-      {
-        items.map((item) => (
-          <MenuItem
-            variant={activeType === item.type ? 'positive' : 'surface'}
-            key={item.type}
-            iconSrc={item.iconSrc}
-            onClick={() => setVisibility(item)}
-            disabled={(!canChange || item.unsupported)}
-          >
-            <Text varient="b1">
-              <span>{item.text}</span>
-              <RadioButton isActive={activeType === item.type} />
-            </Text>
-          </MenuItem>
-        ))
-      }
-    </div>
-  );
-}
-
-RoomVisibility.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default RoomVisibility;
diff --git a/src/app/molecules/room-visibility/RoomVisibility.scss b/src/app/molecules/room-visibility/RoomVisibility.scss
deleted file mode 100644
index b3ad9664..00000000
--- a/src/app/molecules/room-visibility/RoomVisibility.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-@use '../../partials/text';
-
-.room-visibility {
-  & .context-menu__item .text {
-    @extend .cp-fx__item-one;
-    @extend .cp-fx__row--s-c;
-    
-    & span:first-child {
-      @extend .cp-fx__item-one;
-      @extend .cp-txt__ellipsis;
-    }
-    
-    & .radio-btn {
-      @include dir.side(margin, var(--sp-tight), 0);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/app/organisms/pw/Windows.jsx b/src/app/organisms/pw/Windows.jsx
index b3fd0b3b..77452d15 100644
--- a/src/app/organisms/pw/Windows.jsx
+++ b/src/app/organisms/pw/Windows.jsx
@@ -4,8 +4,6 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 
 import InviteUser from '../invite-user/InviteUser';
-import SpaceSettings from '../space-settings/SpaceSettings';
-import RoomSettings from '../room/RoomSettings';
 
 function Windows() {
   const [inviteUser, changeInviteUser] = useState({
@@ -30,16 +28,12 @@ function Windows() {
   }, []);
 
   return (
-    <>
-      <InviteUser
-        isOpen={inviteUser.isOpen}
-        roomId={inviteUser.roomId}
-        searchTerm={inviteUser.searchTerm}
-        onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
-      />
-      <SpaceSettings />
-      <RoomSettings />
-    </>
+    <InviteUser
+      isOpen={inviteUser.isOpen}
+      roomId={inviteUser.roomId}
+      searchTerm={inviteUser.searchTerm}
+      onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
+    />
   );
 }
 
diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx
deleted file mode 100644
index 69f977b2..00000000
--- a/src/app/organisms/room/RoomSettings.jsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RoomSettings.scss';
-
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-
-import Text from '../../atoms/text/Text';
-import Tabs from '../../atoms/tabs/Tabs';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import RoomProfile from '../../molecules/room-profile/RoomProfile';
-import RoomNotification from '../../molecules/room-notification/RoomNotification';
-import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
-import RoomAliases from '../../molecules/room-aliases/RoomAliases';
-import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
-import RoomEncryption from '../../molecules/room-encryption/RoomEncryption';
-import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
-import RoomMembers from '../../molecules/room-members/RoomMembers';
-import RoomEmojis from '../../molecules/room-emojis/RoomEmojis';
-
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
-import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
-import LockIC from '../../../../public/res/ic/outlined/lock.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import IconButton from '../../atoms/button/IconButton';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const tabText = {
-  GENERAL: 'General',
-  MEMBERS: 'Members',
-  EMOJIS: 'Emojis',
-  PERMISSIONS: 'Permissions',
-  SECURITY: 'Security',
-};
-
-const tabItems = [
-  {
-    iconSrc: SettingsIC,
-    text: tabText.GENERAL,
-    disabled: false,
-  },
-  {
-    iconSrc: UserIC,
-    text: tabText.MEMBERS,
-    disabled: false,
-  },
-  {
-    iconSrc: EmojiIC,
-    text: tabText.EMOJIS,
-    disabled: false,
-  },
-  {
-    iconSrc: ShieldUserIC,
-    text: tabText.PERMISSIONS,
-    disabled: false,
-  },
-  {
-    iconSrc: LockIC,
-    text: tabText.SECURITY,
-    disabled: false,
-  },
-];
-
-function GeneralSettings({ roomId }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  return (
-    <>
-      <div className="room-settings__card">
-        <MenuHeader>Options</MenuHeader>
-        <MenuItem
-          variant="danger"
-          onClick={async () => {
-            const isConfirmed = await confirmDialog(
-              'Leave room',
-              `Are you sure that you want to leave "${room.name}" room?`,
-              'Leave',
-              'danger'
-            );
-            if (!isConfirmed) return;
-            mx.leave(roomId);
-          }}
-          iconSrc={LeaveArrowIC}
-        >
-          Leave
-        </MenuItem>
-      </div>
-      <div className="room-settings__card">
-        <MenuHeader>Notification (Changing this will only affect you)</MenuHeader>
-        <RoomNotification roomId={roomId} />
-      </div>
-      <div className="room-settings__card">
-        <MenuHeader>Room visibility (who can join)</MenuHeader>
-        <RoomVisibility roomId={roomId} />
-      </div>
-      <div className="room-settings__card">
-        <MenuHeader>Room addresses</MenuHeader>
-        <RoomAliases roomId={roomId} />
-      </div>
-    </>
-  );
-}
-
-GeneralSettings.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-function SecuritySettings({ roomId }) {
-  return (
-    <>
-      <div className="room-settings__card">
-        <MenuHeader>Encryption</MenuHeader>
-        <RoomEncryption roomId={roomId} />
-      </div>
-      <div className="room-settings__card">
-        <MenuHeader>Message history visibility</MenuHeader>
-        <RoomHistoryVisibility roomId={roomId} />
-      </div>
-    </>
-  );
-}
-SecuritySettings.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-function useWindowToggle(setSelectedTab) {
-  const [window, setWindow] = useState(null);
-
-  useEffect(() => {
-    const openRoomSettings = (roomId, tab) => {
-      setWindow({ roomId, tabText });
-      const tabItem = tabItems.find((item) => item.text === tab);
-      if (tabItem) setSelectedTab(tabItem);
-    };
-    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, openRoomSettings);
-    return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, openRoomSettings);
-    };
-  }, [setSelectedTab]);
-
-  const requestClose = () => setWindow(null);
-
-  return [window, requestClose];
-}
-
-function RoomSettings() {
-  const [selectedTab, setSelectedTab] = useState(tabItems[0]);
-  const [window, requestClose] = useWindowToggle(setSelectedTab);
-  const isOpen = window !== null;
-  const roomId = window?.roomId;
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  const handleTabChange = (tabItem) => {
-    setSelectedTab(tabItem);
-  };
-
-  return (
-    <PopupWindow
-      isOpen={isOpen}
-      className="room-settings"
-      title={
-        <Text variant="s1" weight="medium" primary>
-          {isOpen && room.name}
-          <span style={{ color: 'var(--tc-surface-low)' }}> — room settings</span>
-        </Text>
-      }
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
-      onRequestClose={requestClose}
-    >
-      {isOpen && (
-        <div className="room-settings__content">
-          <RoomProfile roomId={roomId} />
-          <Tabs
-            items={tabItems}
-            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
-            onSelect={handleTabChange}
-          />
-          <div className="room-settings__cards-wrapper">
-            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
-            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
-            {selectedTab.text === tabText.EMOJIS && <RoomEmojis roomId={roomId} />}
-            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
-            {selectedTab.text === tabText.SECURITY && <SecuritySettings roomId={roomId} />}
-          </div>
-        </div>
-      )}
-    </PopupWindow>
-  );
-}
-
-export default RoomSettings;
-export { tabText };
diff --git a/src/app/organisms/room/RoomSettings.scss b/src/app/organisms/room/RoomSettings.scss
deleted file mode 100644
index fd3af501..00000000
--- a/src/app/organisms/room/RoomSettings.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
-
-.room-settings {
-  & .pw {
-    background-color: var(--bg-surface-low);
-  }
-
-  & .room-profile {
-    padding: var(--sp-loose) var(--sp-extra-loose);
-  }
-
-  & .tabs__content {
-    padding: 0 var(--sp-normal);
-  }
-
-  &__cards-wrapper {
-    padding: 0 var(--sp-normal);
-    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-  }
-}
-
-.room-settings__card {
-  margin: var(--sp-normal) 0;
-  background-color: var(--bg-surface);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-surface-border);
-  overflow: hidden;
-
-  & > .context-menu__header:first-child {
-    margin-top: 2px;
-  }
-}
-
-.room-settings .room-permissions__card,
-.room-settings .room-search__form,
-.room-settings .room-search__result-item,
-.room-settings .room-members {
-  @extend .room-settings__card;
-}
diff --git a/src/app/organisms/space-settings/SpaceSettings.jsx b/src/app/organisms/space-settings/SpaceSettings.jsx
deleted file mode 100644
index 9f2069d4..00000000
--- a/src/app/organisms/space-settings/SpaceSettings.jsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './SpaceSettings.scss';
-
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Tabs from '../../atoms/tabs/Tabs';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import RoomProfile from '../../molecules/room-profile/RoomProfile';
-import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
-import RoomAliases from '../../molecules/room-aliases/RoomAliases';
-import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
-import RoomMembers from '../../molecules/room-members/RoomMembers';
-import RoomEmojis from '../../molecules/room-emojis/RoomEmojis';
-
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
-
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const tabText = {
-  GENERAL: 'General',
-  MEMBERS: 'Members',
-  EMOJIS: 'Emojis',
-  PERMISSIONS: 'Permissions',
-};
-
-const tabItems = [
-  {
-    iconSrc: SettingsIC,
-    text: tabText.GENERAL,
-    disabled: false,
-  },
-  {
-    iconSrc: UserIC,
-    text: tabText.MEMBERS,
-    disabled: false,
-  },
-  {
-    iconSrc: EmojiIC,
-    text: tabText.EMOJIS,
-    disabled: false,
-  },
-  {
-    iconSrc: ShieldUserIC,
-    text: tabText.PERMISSIONS,
-    disabled: false,
-  },
-];
-
-function GeneralSettings({ roomId }) {
-  const mx = useMatrixClient();
-  const roomName = mx.getRoom(roomId)?.name;
-
-  return (
-    <>
-      <div className="room-settings__card">
-        <MenuHeader>Options</MenuHeader>
-        <MenuItem
-          variant="danger"
-          onClick={async () => {
-            const isConfirmed = await confirmDialog(
-              'Leave space',
-              `Are you sure that you want to leave "${roomName}" space?`,
-              'Leave',
-              'danger'
-            );
-            if (isConfirmed) mx.leave(roomId);
-          }}
-          iconSrc={LeaveArrowIC}
-        >
-          Leave
-        </MenuItem>
-      </div>
-      <div className="space-settings__card">
-        <MenuHeader>Space visibility (who can join)</MenuHeader>
-        <RoomVisibility roomId={roomId} />
-      </div>
-      <div className="space-settings__card">
-        <MenuHeader>Space addresses</MenuHeader>
-        <RoomAliases roomId={roomId} />
-      </div>
-    </>
-  );
-}
-
-GeneralSettings.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-function useWindowToggle(setSelectedTab) {
-  const [window, setWindow] = useState(null);
-
-  useEffect(() => {
-    const openSpaceSettings = (roomId, tab) => {
-      setWindow({ roomId, tabText });
-      const tabItem = tabItems.find((item) => item.text === tab);
-      if (tabItem) setSelectedTab(tabItem);
-    };
-    navigation.on(cons.events.navigation.SPACE_SETTINGS_OPENED, openSpaceSettings);
-    return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SETTINGS_OPENED, openSpaceSettings);
-    };
-  }, []);
-
-  const requestClose = () => setWindow(null);
-
-  return [window, requestClose];
-}
-
-function SpaceSettings() {
-  const [selectedTab, setSelectedTab] = useState(tabItems[0]);
-  const [window, requestClose] = useWindowToggle(setSelectedTab);
-  const isOpen = window !== null;
-  const roomId = window?.roomId;
-
-  const mx = useMatrixClient();
-  const room = mx.getRoom(roomId);
-
-  const handleTabChange = (tabItem) => {
-    setSelectedTab(tabItem);
-  };
-
-  return (
-    <PopupWindow
-      isOpen={isOpen}
-      className="space-settings"
-      title={
-        <Text variant="s1" weight="medium" primary>
-          {isOpen && room.name}
-          <span style={{ color: 'var(--tc-surface-low)' }}> — space settings</span>
-        </Text>
-      }
-      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
-      onRequestClose={requestClose}
-    >
-      {isOpen && (
-        <div className="space-settings__content">
-          <RoomProfile roomId={roomId} />
-          <Tabs
-            items={tabItems}
-            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
-            onSelect={handleTabChange}
-          />
-          <div className="space-settings__cards-wrapper">
-            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
-            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
-            {selectedTab.text === tabText.EMOJIS && <RoomEmojis roomId={roomId} />}
-            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
-          </div>
-        </div>
-      )}
-    </PopupWindow>
-  );
-}
-
-export default SpaceSettings;
diff --git a/src/app/organisms/space-settings/SpaceSettings.scss b/src/app/organisms/space-settings/SpaceSettings.scss
deleted file mode 100644
index 987f23b8..00000000
--- a/src/app/organisms/space-settings/SpaceSettings.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use '../../partials/dir.scss';
-
-.space-settings {
-  & .pw {
-    background-color: var(--bg-surface-low);
-  }
-
-  & .room-profile {
-    padding: var(--sp-loose) var(--sp-extra-loose);
-  } 
-
-  & .tabs__content {
-    padding: 0 var(--sp-normal);
-  }
-
-  &__cards-wrapper {
-    padding: 0 var(--sp-normal);
-    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-  }
-}
-  
-.space-settings__card {
-  margin: var(--sp-normal) 0;
-  background-color: var(--bg-surface);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-surface-border);
-  overflow: hidden;
-
-  & > .context-menu__header:first-child {
-    margin-top: 2px;
-  }
-}
-
-.space-settings .room-permissions__card,
-.space-settings .room-members {
-  @extend .space-settings__card;
-}
\ No newline at end of file
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 76f0460f..89743693 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -60,6 +60,7 @@ import { ReceiveSelfDeviceVerification } from '../components/DeviceVerification'
 import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
+import { SpaceSettingsRenderer } from '../features/space-settings';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -109,7 +110,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           return null;
         }}
         element={
-          <>
+          <AuthRouteThemeManager>
             <ClientRoot>
               <ClientInitStorageAtom>
                 <ClientRoomsNotificationPreferences>
@@ -125,6 +126,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                         <Outlet />
                       </ClientLayout>
                       <RoomSettingsRenderer />
+                      <SpaceSettingsRenderer />
                       <ReceiveSelfDeviceVerification />
                       <AutoRestoreBackupOnVerification />
                     </ClientNonUIFeatures>
@@ -132,8 +134,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                 </ClientRoomsNotificationPreferences>
               </ClientInitStorageAtom>
             </ClientRoot>
-            <AuthRouteThemeManager />
-          </>
+          </AuthRouteThemeManager>
         }
       >
         <Route
diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
index cabd8c6c..7e6039a8 100644
--- a/src/app/pages/ThemeManager.tsx
+++ b/src/app/pages/ThemeManager.tsx
@@ -1,8 +1,13 @@
-import { useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { configClass, varsClass } from 'folds';
-import { DarkTheme, LightTheme, ThemeKind, useSystemThemeKind, useThemes } from '../hooks/useTheme';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
+import {
+  DarkTheme,
+  LightTheme,
+  ThemeContextProvider,
+  ThemeKind,
+  useActiveTheme,
+  useSystemThemeKind,
+} from '../hooks/useTheme';
 
 export function UnAuthRouteThemeManager() {
   const systemThemeKind = useSystemThemeKind();
@@ -21,38 +26,15 @@ export function UnAuthRouteThemeManager() {
   return null;
 }
 
-export function AuthRouteThemeManager() {
-  const systemThemeKind = useSystemThemeKind();
-  const themes = useThemes();
-  const [systemTheme] = useSetting(settingsAtom, 'useSystemTheme');
-  const [themeId] = useSetting(settingsAtom, 'themeId');
-  const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
-  const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
+  const activeTheme = useActiveTheme();
 
-  // apply normal theme if system theme is disabled
   useEffect(() => {
-    if (!systemTheme) {
-      document.body.className = '';
-      document.body.classList.add(configClass, varsClass);
-      const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
+    document.body.className = '';
+    document.body.classList.add(configClass, varsClass);
 
-      document.body.classList.add(...selectedTheme.classNames);
-    }
-  }, [systemTheme, themes, themeId]);
+    document.body.classList.add(...activeTheme.classNames);
+  }, [activeTheme]);
 
-  // apply preferred system theme if system theme is enabled
-  useEffect(() => {
-    if (systemTheme) {
-      document.body.className = '';
-      document.body.classList.add(configClass, varsClass);
-      const selectedTheme =
-        systemThemeKind === ThemeKind.Dark
-          ? themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme
-          : themes.find((theme) => theme.id === lightThemeId) ?? LightTheme;
-
-      document.body.classList.add(...selectedTheme.classNames);
-    }
-  }, [systemTheme, systemThemeKind, themes, lightThemeId, darkThemeId]);
-
-  return null;
+  return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
 }
diff --git a/src/app/pages/client/direct/RoomProvider.tsx b/src/app/pages/client/direct/RoomProvider.tsx
index ca45aa19..7c26ec54 100644
--- a/src/app/pages/client/direct/RoomProvider.tsx
+++ b/src/app/pages/client/direct/RoomProvider.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
-import { RoomProvider } from '../../../hooks/useRoom';
+import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useDirectRooms } from './useDirectRooms';
@@ -20,7 +20,7 @@ export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
 
   return (
     <RoomProvider key={room.roomId} value={room}>
-      {children}
+      <IsDirectRoomProvider value>{children}</IsDirectRoomProvider>
     </RoomProvider>
   );
 }
diff --git a/src/app/pages/client/home/RoomProvider.tsx b/src/app/pages/client/home/RoomProvider.tsx
index aa14d153..4e16f797 100644
--- a/src/app/pages/client/home/RoomProvider.tsx
+++ b/src/app/pages/client/home/RoomProvider.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
-import { RoomProvider } from '../../../hooks/useRoom';
+import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useHomeRooms } from './useHomeRooms';
@@ -28,7 +28,7 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
 
   return (
     <RoomProvider key={room.roomId} value={room}>
-      {children}
+      <IsDirectRoomProvider value={false}>{children}</IsDirectRoomProvider>
     </RoomProvider>
   );
 }
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index c28b6753..80ce25a9 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -53,8 +53,8 @@ import {
   Reply,
   Time,
   Username,
+  UsernameBold,
 } from '../../../components/message';
-import colorMXID from '../../../../util/colorMXID';
 import {
   factoryRenderLinkifyWithMention,
   getReactCustomHtmlParser,
@@ -84,6 +84,16 @@ 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 { useTheme } from '../../../hooks/useTheme';
+import { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
+import { mDirectAtom } from '../../../state/mDirectList';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -194,6 +204,7 @@ type RoomNotificationsGroupProps = {
   urlPreview?: boolean;
   hideActivity: boolean;
   onOpen: (roomId: string, eventId: string) => void;
+  legacyUsernameColor?: boolean;
 };
 function RoomNotificationsGroupComp({
   room,
@@ -202,10 +213,18 @@ function RoomNotificationsGroupComp({
   urlPreview,
   hideActivity,
   onOpen,
+  legacyUsernameColor,
 }: 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 theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
 
@@ -424,6 +443,17 @@ 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)
+            : undefined;
+          const tagIconSrc = powerLevelTag?.icon
+            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+            : undefined;
+
+          const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
+
           return (
             <SequenceCard
               key={notification.event.event_id}
@@ -458,11 +488,14 @@ function RoomNotificationsGroupComp({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: colorMXID(event.sender) }}>
-                      <Text as="span" truncate>
-                        <b>{displayName}</b>
-                      </Text>
-                    </Username>
+                    <Box alignItems="Center" gap="200">
+                      <Username style={{ color: usernameColor }}>
+                        <Text as="span" truncate>
+                          <UsernameBold>{displayName}</UsernameBold>
+                        </Text>
+                      </Username>
+                      {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+                    </Box>
                     <Time ts={event.origin_server_ts} />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
@@ -482,6 +515,10 @@ function RoomNotificationsGroupComp({
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
+                    getPowerLevel={getPowerLevel}
+                    getPowerLevelTag={getPowerLevelTag}
+                    accessibleTagColors={accessibleTagColors}
+                    legacyUsernameColor={legacyUsernameColor}
                   />
                 )}
                 {renderMatrixEvent(event.type, false, event, displayName, getContent)}
@@ -511,7 +548,9 @@ export function Notifications() {
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
   const screenSize = useScreenSizeContext();
+  const mDirects = useAtomValue(mDirectAtom);
 
   const { navigateRoom } = useRoomNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -671,6 +710,9 @@ export function Notifications() {
                           urlPreview={urlPreview}
                           hideActivity={hideActivity}
                           onOpen={navigateRoom}
+                          legacyUsernameColor={
+                            legacyUsernameColor || mDirects.has(groupRoom.roomId)
+                          }
                         />
                       </VirtualTile>
                     );
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 96e3b9ad..5b47cb52 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -82,7 +82,7 @@ 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, openSpaceSettings } from '../../../../client/action/navigation';
+import { openInviteUser } from '../../../../client/action/navigation';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -90,6 +90,7 @@ import { getRoomAvatarUrl } from '../../../utils/room';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 
 type SpaceMenuProps = {
   room: Room;
@@ -104,6 +105,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     const powerLevels = usePowerLevels(room);
     const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
     const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const openSpaceSettings = useOpenSpaceSettings();
 
     const allChild = useSpaceChildren(
       allRoomsAtom,
diff --git a/src/app/pages/client/space/RoomProvider.tsx b/src/app/pages/client/space/RoomProvider.tsx
index 0f13f933..a9632137 100644
--- a/src/app/pages/client/space/RoomProvider.tsx
+++ b/src/app/pages/client/space/RoomProvider.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
-import { RoomProvider } from '../../../hooks/useRoom';
+import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useSpace } from '../../../hooks/useSpace';
@@ -10,11 +10,13 @@ import { getAllParents } 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';
 
 export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const space = useSpace();
   const roomToParents = useAtomValue(roomToParentsAtom);
+  const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
 
   const { roomIdOrAlias, eventId } = useParams();
@@ -39,7 +41,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
 
   return (
     <RoomProvider key={room.roomId} value={room}>
-      {children}
+      <IsDirectRoomProvider value={mDirects.has(room.roomId)}>{children}</IsDirectRoomProvider>
     </RoomProvider>
   );
 }
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 737663ad..fa8c0ea8 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -54,7 +54,7 @@ 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, openSpaceSettings } from '../../../../client/action/navigation';
+import { openInviteUser } from '../../../../client/action/navigation';
 import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -74,6 +74,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
+import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 
 type SpaceMenuProps = {
   room: Room;
@@ -86,6 +87,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
   const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const openSpaceSettings = useOpenSpaceSettings();
 
   const allChild = useSpaceChildren(
     allRoomsAtom,
diff --git a/src/app/plugins/color.ts b/src/app/plugins/color.ts
new file mode 100644
index 00000000..47c73170
--- /dev/null
+++ b/src/app/plugins/color.ts
@@ -0,0 +1,16 @@
+import chroma from 'chroma-js';
+import { ThemeKind } from '../hooks/useTheme';
+
+export const accessibleColor = (themeKind: ThemeKind, color: string): string => {
+  if (!chroma.valid(color)) return color;
+
+  let lightness = chroma(color).lab()[0];
+  if (themeKind === ThemeKind.Dark && lightness < 60) {
+    lightness = 60;
+  }
+  if (themeKind === ThemeKind.Light && lightness > 50) {
+    lightness = 50;
+  }
+
+  return chroma(color).set('lab.l', lightness).hex();
+};
diff --git a/src/app/state/hooks/spaceSettings.ts b/src/app/state/hooks/spaceSettings.ts
new file mode 100644
index 00000000..e589d65d
--- /dev/null
+++ b/src/app/state/hooks/spaceSettings.ts
@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { spaceSettingsAtom, SpaceSettingsPage, SpaceSettingsState } from '../spaceSettings';
+
+export const useSpaceSettingsState = (): SpaceSettingsState | undefined => {
+  const data = useAtomValue(spaceSettingsAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseSpaceSettings = (): CloseCallback => {
+  const setSettings = useSetAtom(spaceSettingsAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setSettings(undefined);
+  }, [setSettings]);
+
+  return close;
+};
+
+type OpenCallback = (roomId: string, space?: string, page?: SpaceSettingsPage) => void;
+export const useOpenSpaceSettings = (): OpenCallback => {
+  const setSettings = useSetAtom(spaceSettingsAtom);
+
+  const open: OpenCallback = useCallback(
+    (roomId, spaceId, page) => {
+      setSettings({ roomId, spaceId, page });
+    },
+    [setSettings]
+  );
+
+  return open;
+};
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 9d979195..799747ac 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -30,6 +30,7 @@ export interface Settings {
   urlPreview: boolean;
   encUrlPreview: boolean;
   showHiddenEvents: boolean;
+  legacyUsernameColor: boolean;
 
   showNotifications: boolean;
   isNotificationSounds: boolean;
@@ -59,6 +60,7 @@ const defaultSettings: Settings = {
   urlPreview: true,
   encUrlPreview: false,
   showHiddenEvents: false,
+  legacyUsernameColor: false,
 
   showNotifications: true,
   isNotificationSounds: true,
diff --git a/src/app/state/spaceSettings.ts b/src/app/state/spaceSettings.ts
new file mode 100644
index 00000000..e79506bb
--- /dev/null
+++ b/src/app/state/spaceSettings.ts
@@ -0,0 +1,17 @@
+import { atom } from 'jotai';
+
+export enum SpaceSettingsPage {
+  GeneralPage,
+  MembersPage,
+  PermissionsPage,
+  EmojisStickersPage,
+  DeveloperToolsPage,
+}
+
+export type SpaceSettingsState = {
+  page?: SpaceSettingsPage;
+  roomId: string;
+  spaceId?: string;
+};
+
+export const spaceSettingsAtom = atom<SpaceSettingsState | undefined>(undefined);
diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index 3e6339d3..b7c5ae38 100644
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -1,13 +1,6 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-export function openSpaceSettings(roomId, tabText) {
-  appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_SPACE_SETTINGS,
-    roomId,
-    tabText,
-  });
-}
 
 export function openSpaceAddExisting(roomId, spaces = false) {
   appDispatcher.dispatch({
@@ -17,14 +10,6 @@ export function openSpaceAddExisting(roomId, spaces = false) {
   });
 }
 
-export function toggleRoomSettings(roomId, tabText) {
-  appDispatcher.dispatch({
-    type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
-    roomId,
-    tabText
-  });
-}
-
 
 export function openCreateRoom(isSpace = false, parentId = null) {
   appDispatcher.dispatch({
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index d214ebb7..7f316958 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -6,22 +6,6 @@ const cons = {
     USER_ID: 'cinny_user_id',
     BASE_URL: 'cinny_hs_base_url',
   },
-  DEVICE_DISPLAY_NAME: 'Cinny Web',
-  IN_CINNY_SPACES: 'in.cinny.spaces',
-  supportEventTypes: [
-    'm.room.create',
-    'm.room.message',
-    'm.room.encrypted',
-    'm.room.member',
-    'm.sticker',
-  ],
-  supportReceiptTypes: ['m.read', 'm.read.private'],
-  notifs: {
-    DEFAULT: 'default',
-    ALL_MESSAGES: 'all_messages',
-    MENTIONS_AND_KEYWORDS: 'mentions_and_keywords',
-    MUTE: 'mute',
-  },
   status: {
     PRE_FLIGHT: 'pre-flight',
     IN_FLIGHT: 'in-flight',
@@ -30,9 +14,7 @@ const cons = {
   },
   actions: {
     navigation: {
-      OPEN_SPACE_SETTINGS: 'OPEN_SPACE_SETTINGS',
       OPEN_SPACE_ADDEXISTING: 'OPEN_SPACE_ADDEXISTING',
-      TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS',
       OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
       OPEN_JOIN_ALIAS: 'OPEN_JOIN_ALIAS',
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
@@ -44,9 +26,7 @@ const cons = {
   },
   events: {
     navigation: {
-      SPACE_SETTINGS_OPENED: 'SPACE_SETTINGS_OPENED',
       SPACE_ADDEXISTING_OPENED: 'SPACE_ADDEXISTING_OPENED',
-      ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
       CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
       JOIN_ALIAS_OPENED: 'JOIN_ALIAS_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
index 1228d9c8..743d0199 100644
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -19,19 +19,9 @@ class Navigation extends EventEmitter {
 
   navigate(action) {
     const actions = {
-      [cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
-        this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText);
-      },
       [cons.actions.navigation.OPEN_SPACE_ADDEXISTING]: () => {
         this.emit(cons.events.navigation.SPACE_ADDEXISTING_OPENED, action.roomId, action.spaces);
       },
-      [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
-        this.emit(
-          cons.events.navigation.ROOM_SETTINGS_TOGGLED,
-          action.roomId,
-          action.tabText
-        );
-      },
       [cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
         this.emit(
           cons.events.navigation.CREATE_ROOM_OPENED,
diff --git a/src/util/matrixUtil.js b/src/util/matrixUtil.js
index 0389177e..19688a2b 100644
--- a/src/util/matrixUtil.js
+++ b/src/util/matrixUtil.js
@@ -102,8 +102,9 @@ export function getIdServer(userId) {
 
 export async function hasDevices(mx, userId) {
   try {
-    const usersDeviceMap = await mx.getUserDeviceInfo([userId, mx.getUserId()]);
-    return Object.values(usersDeviceMap)
+    const usersDeviceMap = await mx.getCrypto()?.getUserDeviceInfo([userId, mx.getUserId()], true);
+
+    return Array.from(usersDeviceMap.values())
       .every((deviceIdToDevices) => deviceIdToDevices.size > 0);
   } catch (e) {
     console.error("Error determining if it's possible to encrypt to all users: ", e);