diff --git a/src/app/components/sequence-card/SequenceCard.tsx b/src/app/components/sequence-card/SequenceCard.tsx
index 4036b963..8e48817c 100644
--- a/src/app/components/sequence-card/SequenceCard.tsx
+++ b/src/app/components/sequence-card/SequenceCard.tsx
@@ -7,12 +7,18 @@ import * as css from './style.css';
 export const SequenceCard = as<
   'div',
   ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
->(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
-  <Box
-    className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
-    data-first-child={firstChild}
-    data-last-child={lastChild}
-    {...props}
-    ref={ref}
-  />
-));
+>(
+  (
+    { as: AsSequenceCard = 'div', className, variant, firstChild, lastChild, outlined, ...props },
+    ref
+  ) => (
+    <Box
+      as={AsSequenceCard}
+      className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
+      data-first-child={firstChild}
+      data-last-child={lastChild}
+      {...props}
+      ref={ref}
+    />
+  )
+);
diff --git a/src/app/components/sequence-card/style.css.ts b/src/app/components/sequence-card/style.css.ts
index c8ed48b8..dcd693a1 100644
--- a/src/app/components/sequence-card/style.css.ts
+++ b/src/app/components/sequence-card/style.css.ts
@@ -37,6 +37,10 @@ export const SequenceCard = recipe({
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
       },
+
+      'button&': {
+        cursor: 'pointer',
+      },
     },
   },
   variants: {
diff --git a/src/app/features/common-settings/general/RoomJoinRules.tsx b/src/app/features/common-settings/general/RoomJoinRules.tsx
index c0d62a6a..f47ff757 100644
--- a/src/app/features/common-settings/general/RoomJoinRules.tsx
+++ b/src/app/features/common-settings/general/RoomJoinRules.tsx
@@ -27,6 +27,11 @@ import {
 } from '../../../state/hooks/roomList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
+import {
+  knockRestrictedSupported,
+  knockSupported,
+  restrictedSupported,
+} from '../../../utils/matrix';
 
 type RestrictedRoomAllowContent = {
   room_id: string;
@@ -39,10 +44,9 @@ type RoomJoinRulesProps = {
 export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const roomVersion = parseInt(room.getVersion(), 10);
-  const allowKnockRestricted = roomVersion >= 10;
-  const allowRestricted = roomVersion >= 8;
-  const allowKnock = roomVersion >= 7;
+  const allowKnockRestricted = knockRestrictedSupported(room.getVersion());
+  const allowRestricted = restrictedSupported(room.getVersion());
+  const allowKnock = knockSupported(room.getVersion());
 
   const roomIdToParents = useAtomValue(roomToParentsAtom);
   const space = useSpaceOptionally();
diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx
new file mode 100644
index 00000000..a83f7ca7
--- /dev/null
+++ b/src/app/features/create-room/CreateRoom.tsx
@@ -0,0 +1,680 @@
+import React, {
+  FormEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ICreateRoomOpts,
+  ICreateRoomStateEvent,
+  JoinRule,
+  MatrixClient,
+  MatrixError,
+  RestrictedAllowType,
+  Room,
+} from 'matrix-js-sdk';
+import {
+  Box,
+  Button,
+  Chip,
+  color,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Menu,
+  PopOut,
+  RectCords,
+  Spinner,
+  Switch,
+  Text,
+  TextArea,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
+import { isKeyHotkey } from 'is-hotkey';
+import { SettingTile } from '../../components/setting-tile';
+import { SequenceCard } from '../../components/sequence-card';
+import {
+  getMxIdServer,
+  knockRestrictedSupported,
+  knockSupported,
+  restrictedSupported,
+} from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
+import { AsyncState, AsyncStatus, useAsync, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useDebounce } from '../../hooks/useDebounce';
+import { useCapabilities } from '../../hooks/useCapabilities';
+import { stopPropagation } from '../../utils/keyboard';
+import { getViaServers } from '../../plugins/via-servers';
+import { StateEvent } from '../../../types/matrix/room';
+import { getIdServer } from '../../../util/matrixUtil';
+import { useAlive } from '../../hooks/useAlive';
+import { ErrorCode } from '../../cs-errorcode';
+
+export enum CreateRoomKind {
+  Private = 'private',
+  Restricted = 'restricted',
+  Public = 'public',
+}
+type CreateRoomKindSelectorProps = {
+  value?: CreateRoomKind;
+  onSelect: (value: CreateRoomKind) => void;
+  canRestrict?: boolean;
+  disabled?: boolean;
+};
+export function CreateRoomKindSelector({
+  value,
+  onSelect,
+  canRestrict,
+  disabled,
+}: CreateRoomKindSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomKind.Private}
+        onClick={() => onSelect(CreateRoomKind.Private)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={Icons.HashLock} />}
+          after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Private</Text>
+          <Text size="T300" priority="300">
+            Only people with invite can join.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+      {canRestrict && (
+        <SequenceCard
+          style={{ padding: config.space.S300 }}
+          variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
+          direction="Column"
+          gap="100"
+          as="button"
+          type="button"
+          aria-pressed={value === CreateRoomKind.Restricted}
+          onClick={() => onSelect(CreateRoomKind.Restricted)}
+          disabled={disabled}
+        >
+          <SettingTile
+            before={<Icon size="400" src={Icons.Hash} />}
+            after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
+          >
+            <Text size="H6">Restricted</Text>
+            <Text size="T300" priority="300">
+              Only member of parent space can join.
+            </Text>
+          </SettingTile>
+        </SequenceCard>
+      )}
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomKind.Public}
+        onClick={() => onSelect(CreateRoomKind.Public)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={Icons.HashGlobe} />}
+          after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Public</Text>
+          <Text size="T300" priority="300">
+            Anyone with the room address can join.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}
+
+export function AliasInput({ disabled }: { disabled?: boolean }) {
+  const mx = useMatrixClient();
+  const aliasInputRef = useRef<HTMLInputElement>(null);
+  const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
+    status: AsyncStatus.Idle,
+  });
+
+  useEffect(() => {
+    if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
+      setAliasAvail({ status: AsyncStatus.Idle });
+    }
+  }, [aliasAvail]);
+
+  const checkAliasAvail = useAsync(
+    useCallback(
+      async (aliasLocalPart: string) => {
+        const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
+        try {
+          const result = await mx.getRoomIdForAlias(roomAlias);
+          return typeof result.room_id !== 'string';
+        } catch (e) {
+          if (e instanceof MatrixError && e.httpStatus === 404) {
+            return true;
+          }
+          throw e;
+        }
+      },
+      [mx]
+    ),
+    setAliasAvail
+  );
+  const aliasAvailable: boolean | undefined =
+    aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
+
+  const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
+
+  const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
+    const aliasInput = evt.currentTarget;
+    const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
+    if (aliasLocalPart) {
+      aliasInput.value = aliasLocalPart;
+      debounceCheckAliasAvail(aliasLocalPart);
+    } else {
+      setAliasAvail({ status: AsyncStatus.Idle });
+    }
+  };
+
+  const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('enter', evt)) {
+      evt.preventDefault();
+
+      const aliasInput = evt.currentTarget;
+      const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
+      if (aliasLocalPart) {
+        checkAliasAvail(aliasLocalPart);
+      } else {
+        setAliasAvail({ status: AsyncStatus.Idle });
+      }
+    }
+  };
+
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <Text size="L400">Address (Optional)</Text>
+      <Text size="T200" priority="300">
+        Pick an unique address to make your room discoverable to public.
+      </Text>
+      <Input
+        ref={aliasInputRef}
+        onChange={handleAliasChange}
+        before={
+          aliasAvail.status === AsyncStatus.Loading ? (
+            <Spinner size="100" variant="Secondary" />
+          ) : (
+            <Icon size="100" src={Icons.Hash} />
+          )
+        }
+        after={
+          <Text style={{ maxWidth: toRem(150) }} truncate>
+            :{getMxIdServer(mx.getSafeUserId())}
+          </Text>
+        }
+        onKeyDown={handleAliasKeyDown}
+        name="aliasInput"
+        size="500"
+        variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
+        radii="400"
+        disabled={disabled}
+      />
+      {aliasAvailable === false && (
+        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
+          <Icon src={Icons.Warning} filled size="50" />
+          <Text size="T200">
+            <b>This address is already taken. Please select a different one.</b>
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export function RoomVersionSelector({
+  versions,
+  value,
+  onChange,
+  disabled,
+}: {
+  versions: string[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (version: string) => {
+    setMenuCords(undefined);
+    onChange(version);
+  };
+
+  return (
+    <SequenceCard
+      style={{ padding: config.space.S300 }}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="500"
+    >
+      <SettingTile
+        title="Room Version"
+        after={
+          <PopOut
+            anchor={menuCords}
+            offset={5}
+            position="Bottom"
+            align="End"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setMenuCords(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                  isKeyBackward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu>
+                  <Box
+                    direction="Column"
+                    gap="200"
+                    style={{ padding: config.space.S200, maxWidth: toRem(300) }}
+                  >
+                    <Text size="L400">Room Versions</Text>
+                    <Box wrap="Wrap" gap="100">
+                      {versions.map((version) => (
+                        <Chip
+                          key={version}
+                          variant={value === version ? 'Primary' : 'SurfaceVariant'}
+                          aria-pressed={value === version}
+                          outlined={value === version}
+                          radii="300"
+                          onClick={() => handleSelect(version)}
+                          type="button"
+                        >
+                          <Text truncate size="T300">
+                            {version}
+                          </Text>
+                        </Chip>
+                      ))}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <Button
+              type="button"
+              onClick={handleMenu}
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              aria-pressed={!!menuCords}
+              before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
+              disabled={disabled}
+            >
+              <Text size="B300">{value}</Text>
+            </Button>
+          </PopOut>
+        }
+      />
+    </SequenceCard>
+  );
+}
+
+type CreateRoomData = {
+  version: string;
+  parent?: Room;
+  kind: CreateRoomKind;
+  name: string;
+  topic?: string;
+  aliasLocalPart?: string;
+  encryption: boolean;
+  knock: boolean;
+  allowFederation: boolean;
+};
+const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
+  const creationContent = {
+    'm.federate': data.allowFederation,
+  };
+
+  const initialState: ICreateRoomStateEvent[] = [];
+
+  if (data.encryption) {
+    initialState.push({
+      type: 'm.room.encryption',
+      state_key: '',
+      content: {
+        algorithm: 'm.megolm.v1.aes-sha2',
+      },
+    });
+  }
+
+  if (data.parent) {
+    initialState.push({
+      type: StateEvent.SpaceParent,
+      state_key: data.parent.roomId,
+      content: {
+        canonical: true,
+        via: getViaServers(data.parent),
+      },
+    });
+  }
+
+  const getJoinRuleContent = (): RoomJoinRulesEventContent => {
+    if (data.kind === CreateRoomKind.Public) {
+      return {
+        join_rule: JoinRule.Public,
+      };
+    }
+
+    if (data.kind === CreateRoomKind.Restricted && data.parent) {
+      return {
+        join_rule: data.knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
+        allow: [
+          {
+            type: RestrictedAllowType.RoomMembership,
+            room_id: data.parent.roomId,
+          },
+        ],
+      };
+    }
+
+    return {
+      join_rule: data.knock ? JoinRule.Knock : JoinRule.Invite,
+    };
+  };
+
+  initialState.push({
+    type: StateEvent.RoomJoinRules,
+    content: getJoinRuleContent(),
+  });
+
+  const options: ICreateRoomOpts = {
+    room_version: data.version,
+    name: data.name,
+    topic: data.topic,
+    room_alias_name: data.aliasLocalPart,
+    creation_content: creationContent,
+    initial_state: initialState,
+  };
+
+  const result = await mx.createRoom(options);
+
+  if (data.parent) {
+    await mx.sendStateEvent(
+      data.parent.roomId,
+      StateEvent.SpaceChild as any,
+      {
+        auto_join: false,
+        suggested: false,
+        via: [getIdServer(mx.getUserId())],
+      },
+      result.room_id
+    );
+  }
+
+  return result.room_id;
+};
+
+const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
+  if (kind === CreateRoomKind.Private) return Icons.HashLock;
+  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
+  return Icons.HashGlobe;
+};
+
+type CreateRoomFormProps = {
+  defaultKind?: CreateRoomKind;
+  space?: Room;
+  onCreate?: (roomId: string) => void;
+};
+export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const capabilities = useCapabilities();
+  const roomVersion = capabilities['m.room_versions'];
+  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersion?.default ?? '1');
+
+  const [kind, setKind] = useState(defaultKind ?? CreateRoomKind.Private);
+  const [federation, setFederation] = useState(true);
+  const [encryption, setEncryption] = useState(false);
+  const [knock, setKnock] = useState(false);
+  const [advance, setAdvance] = useState(false);
+
+  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
+  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnockRestricted =
+    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+
+  const handleRoomVersionChange = (version: string) => {
+    if (!restrictedSupported(version)) {
+      setKind(CreateRoomKind.Private);
+    }
+    selectRoomVersion(version);
+  };
+
+  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
+    useCallback((data) => createRoom(mx, data), [mx])
+  );
+  const loading = createState.status === AsyncStatus.Loading;
+  const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
+  const disabled = createState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (disabled) return;
+    const form = evt.currentTarget;
+
+    const nameInput = form.nameInput as HTMLInputElement | undefined;
+    const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined;
+    const aliasInput = form.aliasInput as HTMLInputElement | undefined;
+    const roomName = nameInput?.value.trim();
+    const roomTopic = topicTextArea?.value.trim();
+    const aliasLocalPart =
+      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
+
+    if (!roomName) return;
+    const publicRoom = kind === CreateRoomKind.Public;
+    let roomKnock = false;
+    if (allowKnock && kind === CreateRoomKind.Private) {
+      roomKnock = knock;
+    }
+    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+      roomKnock = knock;
+    }
+
+    create({
+      version: selectedRoomVersion,
+      parent: space,
+      kind,
+      name: roomName,
+      topic: roomTopic || undefined,
+      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
+      encryption: publicRoom ? false : encryption,
+      knock: roomKnock,
+      allowFederation: federation,
+    }).then((roomId) => {
+      if (alive()) {
+        onCreate?.(roomId);
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      <Box direction="Column" gap="100">
+        <Text size="L400">Access</Text>
+        <CreateRoomKindSelector
+          value={kind}
+          onSelect={setKind}
+          canRestrict={allowRestricted}
+          disabled={disabled}
+        />
+      </Box>
+      <Box shrink="No" direction="Column" gap="100">
+        <Text size="L400">Name</Text>
+        <Input
+          required
+          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
+          name="nameInput"
+          autoFocus
+          size="500"
+          variant="SurfaceVariant"
+          radii="400"
+          disabled={disabled}
+        />
+      </Box>
+      <Box shrink="No" direction="Column" gap="100">
+        <Text size="L400">Topic (Optional)</Text>
+        <TextArea
+          name="topicTextAria"
+          size="500"
+          variant="SurfaceVariant"
+          radii="400"
+          disabled={disabled}
+        />
+      </Box>
+
+      {kind === CreateRoomKind.Public && <AliasInput />}
+
+      <Box shrink="No" direction="Column" gap="100">
+        <Box gap="200" alignItems="End">
+          <Text size="L400">Options</Text>
+          <Box grow="Yes" justifyContent="End">
+            <Chip
+              radii="Pill"
+              before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
+              onClick={() => setAdvance(!advance)}
+              type="button"
+            >
+              <Text size="T200">Advance Options</Text>
+            </Chip>
+          </Box>
+        </Box>
+        {kind !== CreateRoomKind.Public && (
+          <>
+            <SequenceCard
+              style={{ padding: config.space.S300 }}
+              variant="SurfaceVariant"
+              direction="Column"
+              gap="500"
+            >
+              <SettingTile
+                title="End-to-End Encryption"
+                description="Once this feature is enabled, it can't be disabled after the room is created."
+                after={
+                  <Switch
+                    variant="Primary"
+                    value={encryption}
+                    onChange={setEncryption}
+                    disabled={disabled}
+                  />
+                }
+              />
+            </SequenceCard>
+            {advance && (allowKnock || allowKnockRestricted) && (
+              <SequenceCard
+                style={{ padding: config.space.S300 }}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="500"
+              >
+                <SettingTile
+                  title="Knock to Join"
+                  description="Anyone can send request to join this room."
+                  after={
+                    <Switch
+                      variant="Primary"
+                      value={knock}
+                      onChange={setKnock}
+                      disabled={disabled}
+                    />
+                  }
+                />
+              </SequenceCard>
+            )}
+          </>
+        )}
+
+        <SequenceCard
+          style={{ padding: config.space.S300 }}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="500"
+        >
+          <SettingTile
+            title="Allow Federation"
+            description="Users from other servers can join."
+            after={
+              <Switch
+                variant="Primary"
+                value={federation}
+                onChange={setFederation}
+                disabled={disabled}
+              />
+            }
+          />
+        </SequenceCard>
+        {advance && (
+          <RoomVersionSelector
+            versions={roomVersion?.available ? Object.keys(roomVersion.available) : ['1']}
+            value={selectedRoomVersion}
+            onChange={handleRoomVersionChange}
+            disabled={disabled}
+          />
+        )}
+      </Box>
+
+      {error && (
+        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
+          <Icon src={Icons.Warning} filled size="100" />
+          <Text size="T300" style={{ color: color.Critical.Main }}>
+            <b>
+              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
+                ? `Server rate-limited your request for ${millisecondsToMinutes(
+                    (error.data.retry_after_ms as number | undefined) ?? 0
+                  )} minutes!`
+                : error.message}
+            </b>
+          </Text>
+        </Box>
+      )}
+      <Box shrink="No" direction="Column" gap="200">
+        <Button
+          type="submit"
+          size="500"
+          variant="Primary"
+          radii="400"
+          disabled={disabled}
+          before={loading && <Spinner variant="Primary" fill="Solid" size="200" />}
+        >
+          <Text size="B500">Create</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/features/create-room/CreateRoomModalRenderer.tsx b/src/app/features/create-room/CreateRoomModalRenderer.tsx
new file mode 100644
index 00000000..e20ff7e1
--- /dev/null
+++ b/src/app/features/create-room/CreateRoomModalRenderer.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  Box,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+import { CreateRoomForm } from './CreateRoom';
+import {
+  useCloseCreateRoomModal,
+  useCreateRoomModalState,
+} from '../../state/hooks/createRoomModal';
+import { CreateRoomModalState } from '../../state/createRoomModal';
+import * as css from './styles.css';
+import { stopPropagation } from '../../utils/keyboard';
+
+type CreateRoomModalProps = {
+  state: CreateRoomModalState;
+};
+function CreateRoomModal({ state }: CreateRoomModalProps) {
+  const { spaceId } = state;
+  const closeDialog = useCloseCreateRoomModal();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  return (
+    <SpaceProvider value={space ?? null}>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              clickOutsideDeactivates: true,
+              onDeactivate: closeDialog,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal className={css.CreateRoomModal} size="300" flexHeight>
+              <Box direction="Column">
+                <Header size="500" className={css.CreateRoomModalHeader}>
+                  <Box grow="Yes">
+                    <Text size="H4">New Room</Text>
+                  </Box>
+                  <Box shrink="No">
+                    <IconButton size="300" radii="300" onClick={closeDialog}>
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  </Box>
+                </Header>
+                <Scroll size="300" hideTrack>
+                  <Box className={css.CreateRoomModalContent} direction="Column" gap="500">
+                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                  </Box>
+                </Scroll>
+              </Box>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SpaceProvider>
+  );
+}
+
+export function CreateRoomModalRenderer() {
+  const state = useCreateRoomModalState();
+
+  if (!state) return null;
+  return <CreateRoomModal state={state} />;
+}
diff --git a/src/app/features/create-room/index.ts b/src/app/features/create-room/index.ts
new file mode 100644
index 00000000..cb70756c
--- /dev/null
+++ b/src/app/features/create-room/index.ts
@@ -0,0 +1,2 @@
+export * from './CreateRoom';
+export * from './CreateRoomModalRenderer';
diff --git a/src/app/features/create-room/styles.css.ts b/src/app/features/create-room/styles.css.ts
new file mode 100644
index 00000000..a03d17f3
--- /dev/null
+++ b/src/app/features/create-room/styles.css.ts
@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const CreateRoomModal = style({
+  position: 'relative',
+});
+
+export const CreateRoomModalHeader = style({
+  padding: config.space.S200,
+  paddingLeft: config.space.S400,
+  borderBottomWidth: config.borderWidth.B300,
+});
+
+export const CreateRoomModalContent = style({
+  padding: config.space.S400,
+  paddingRight: config.space.S200,
+});
diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx
index dca81b90..e9e26adf 100644
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -34,6 +34,7 @@ import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/nav
 import { stopPropagation } from '../../utils/keyboard';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
 
 function SpaceProfileLoading() {
   return (
@@ -240,13 +241,14 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
 
 function AddRoomButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
+  const openCreateRoomModal = useOpenCreateRoomModal();
 
   const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleCreateRoom = () => {
-    openCreateRoom(false, item.roomId as any);
+    openCreateRoomModal(item.roomId);
     setCords(undefined);
   };
 
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 89743693..8e5fade4 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -61,6 +61,8 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
+import { CreateRoomModalRenderer } from '../features/create-room';
+import { HomeCreateRoom } from './client/home/CreateRoom';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -125,6 +127,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                       >
                         <Outlet />
                       </ClientLayout>
+                      <CreateRoomModalRenderer />
                       <RoomSettingsRenderer />
                       <SpaceSettingsRenderer />
                       <ReceiveSelfDeviceVerification />
@@ -152,7 +155,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           }
         >
           {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<p>create</p>} />
+          <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
           <Route path={_JOIN_PATH} element={<p>join</p>} />
           <Route path={_SEARCH_PATH} element={<HomeSearch />} />
           <Route
diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx
new file mode 100644
index 00000000..5d7a607f
--- /dev/null
+++ b/src/app/pages/client/home/CreateRoom.tsx
@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import { Box, Icon, Icons, Scroll, IconButton } from 'folds';
+import {
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHeader,
+  PageHero,
+  PageHeroSection,
+} from '../../../components/page';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { CreateRoomForm } from '../../../features/create-room';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+
+export function HomeCreateRoom() {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const screenSize = useScreenSizeContext();
+
+  const { navigateRoom } = useRoomNavigate();
+
+  return (
+    <Page>
+      {screenSize === ScreenSize.Mobile && (
+        <PageHeader balance outlined={false}>
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <BackRouteHandler>
+              {(onBack) => (
+                <IconButton onClick={onBack}>
+                  <Icon src={Icons.ArrowLeft} />
+                </IconButton>
+              )}
+            </BackRouteHandler>
+          </Box>
+        </PageHeader>
+      )}
+      <Box style={{ position: 'relative' }} grow="Yes">
+        <Scroll ref={scrollRef} hideTrack visibility="Hover">
+          <PageContent>
+            <PageContentCenter>
+              <PageHeroSection>
+                <Box direction="Column" gap="700">
+                  <PageHero
+                    icon={<Icon size="600" src={Icons.Hash} />}
+                    title="Create Room"
+                    subTitle="Build a Room for Real-Time Conversations"
+                  />
+                  <CreateRoomForm onCreate={navigateRoom} />
+                </Box>
+              </PageHeroSection>
+            </PageContentCenter>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index ff26438d..632ee10c 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -29,10 +29,18 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import { getExplorePath, getHomeRoomPath, getHomeSearchPath } from '../../pathUtils';
+import {
+  getExplorePath,
+  getHomeCreatePath,
+  getHomeRoomPath,
+  getHomeSearchPath,
+} from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
-import { useHomeSearchSelected } from '../../../hooks/router/useHomeSelected';
+import {
+  useHomeCreateSelected,
+  useHomeSearchSelected,
+} from '../../../hooks/router/useHomeSelected';
 import { useHomeRooms } from './useHomeRooms';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -41,7 +49,7 @@ import { makeNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
-import { openCreateRoom, openJoinAlias } from '../../../../client/action/navigation';
+import { openJoinAlias } from '../../../../client/action/navigation';
 import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -174,7 +182,7 @@ function HomeEmpty() {
         }
         options={
           <>
-            <Button onClick={() => openCreateRoom()} variant="Secondary" size="300">
+            <Button onClick={() => navigate(getHomeCreatePath())} variant="Secondary" size="300">
               <Text size="B300" truncate>
                 Create Room
               </Text>
@@ -204,8 +212,10 @@ export function Home() {
   const rooms = useHomeRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const navigate = useNavigate();
 
   const selectedRoomId = useSelectedRoom();
+  const createRoomSelected = useHomeCreateSelected();
   const searchSelected = useHomeSearchSelected();
   const noRoomToDisplay = rooms.length === 0;
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
@@ -242,8 +252,8 @@ export function Home() {
         <PageNavContent scrollRef={scrollRef}>
           <Box direction="Column" gap="300">
             <NavCategory>
-              <NavItem variant="Background" radii="400">
-                <NavButton onClick={() => openCreateRoom()}>
+              <NavItem variant="Background" radii="400" aria-selected={createRoomSelected}>
+                <NavButton onClick={() => navigate(getHomeCreatePath())}>
                   <NavItemContent>
                     <Box as="span" grow="Yes" alignItems="Center" gap="200">
                       <Avatar size="200" radii="400">
diff --git a/src/app/state/createRoomModal.ts b/src/app/state/createRoomModal.ts
new file mode 100644
index 00000000..81af5d5b
--- /dev/null
+++ b/src/app/state/createRoomModal.ts
@@ -0,0 +1,7 @@
+import { atom } from 'jotai';
+
+export type CreateRoomModalState = {
+  spaceId?: string;
+};
+
+export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);
diff --git a/src/app/state/hooks/createRoomModal.ts b/src/app/state/hooks/createRoomModal.ts
new file mode 100644
index 00000000..15db7289
--- /dev/null
+++ b/src/app/state/hooks/createRoomModal.ts
@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
+
+export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
+  const data = useAtomValue(createRoomModalAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseCreateRoomModal = (): CloseCallback => {
+  const setSettings = useSetAtom(createRoomModalAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setSettings(undefined);
+  }, [setSettings]);
+
+  return close;
+};
+
+type OpenCallback = (space?: string) => void;
+export const useOpenCreateRoomModal = (): OpenCallback => {
+  const setSettings = useSetAtom(createRoomModalAtom);
+
+  const open: OpenCallback = useCallback(
+    (spaceId) => {
+      setSettings({ spaceId });
+    },
+    [setSettings]
+  );
+
+  return open;
+};
diff --git a/src/app/styles/ContainerColor.css.ts b/src/app/styles/ContainerColor.css.ts
index cb1f933d..cefc5256 100644
--- a/src/app/styles/ContainerColor.css.ts
+++ b/src/app/styles/ContainerColor.css.ts
@@ -1,6 +1,6 @@
 import { ComplexStyleRule } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { ContainerColor as TContainerColor, DefaultReset, color } from 'folds';
+import { ContainerColor as TContainerColor, DefaultReset, color, config } from 'folds';
 
 const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
   vars: {
@@ -9,6 +9,20 @@ const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
     outlineColor: color[variant].ContainerLine,
     color: color[variant].OnContainer,
   },
+  selectors: {
+    'button&[aria-pressed=true]': {
+      backgroundColor: color[variant].ContainerActive,
+    },
+    'button&:hover, &:focus-visible': {
+      backgroundColor: color[variant].ContainerHover,
+    },
+    'button&:active': {
+      backgroundColor: color[variant].ContainerActive,
+    },
+    'button&[disabled]': {
+      opacity: config.opacity.Disabled,
+    },
+  },
 });
 
 export const ContainerColor = recipe({
diff --git a/src/app/utils/common.ts b/src/app/utils/common.ts
index 34e1ecbf..678f1b6e 100644
--- a/src/app/utils/common.ts
+++ b/src/app/utils/common.ts
@@ -18,6 +18,13 @@ export const millisecondsToMinutesAndSeconds = (milliseconds: number): string =>
   return `${mm}:${ss < 10 ? '0' : ''}${ss}`;
 };
 
+export const millisecondsToMinutes = (milliseconds: number): string => {
+  const seconds = Math.floor(milliseconds / 1000);
+  const mm = Math.floor(seconds / 60);
+
+  return mm.toString();
+};
+
 export const secondsToMinutesAndSeconds = (seconds: number): string => {
   const mm = Math.floor(seconds / 60);
   const ss = Math.round(seconds % 60);
diff --git a/src/app/utils/matrix.ts b/src/app/utils/matrix.ts
index 610ef0af..b31677a0 100644
--- a/src/app/utils/matrix.ts
+++ b/src/app/utils/matrix.ts
@@ -344,3 +344,16 @@ export const rateLimitedActions = async <T, R = void>(
     }
   }
 };
+
+export const knockSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6'];
+  return !unsupportedVersion.includes(version);
+};
+export const restrictedSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7'];
+  return !unsupportedVersion.includes(version);
+};
+export const knockRestrictedSupported = (version: string): boolean => {
+  const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+  return !unsupportedVersion.includes(version);
+};