feat: Add voice/video room support (#2680)

* Add users on the nav to showcase call activity and who is in the call * add check to prevent DCing from the call you're currently in... * Add avatar and username for the space (needs to be moved into RoomNavItem proper) * Add background variant to buttons * Update hook to keep method signature (accepting an array of Rooms instead) to support multiple room event tracking of the same event * Add state listener so the call activity is real time updated on joins/leaves within the space * Add RoomNavUser for displaying the user avatar + name in the nav for a visual of call activity and participants * rename CallNavBottom to CallNavStatus * Rename callnavbottom and fix linking implementation to actually be correct * temp fix to allow the status to be cleared in some way * re-add background to active call link button * prepare to feed this to child elements for visibility handling * loosely provide nav handling for testing refactoring * Add CallView * Update to funnel Outlet context through for Call handling (might not be the best approach, but removes code replication in PersistentCallContainer where we were remaking the roomview entirely) * update client layout to funnel outlet the iframes for the call container * funnel through just iframe for now for testing sake * Update room to use CallView * Pass forward the backupIframeRef now * remove unused params * Add backupIframeRef so we can re-add the lobby screen for non-joined calls (for viewing their text channels) * Remove unused imports and restructure to support being parent to clientlayout * Re-add layout as we're no longer oddly passing outlet context * swap to using ref provider context from to connect to persistentcallcontainer more directly * Revert to original code as we've moved calling to be more inline with design * Revert to original code as we've moved the outlet context passing out and made more direct use of the ref * Fix unexpected visibility in non-room areas * correctly provide visibility * re-add mobile chat handling * Improve call room view stability * split into two refs * add ViewedRoom usage * Disable * add roomViewId and related * (broken) juggle the iframe states proper... still needs fixing * Conditionals to manage the active iframe state better * add navigateRoom to be in both conditions for the nav button * Fix the view to correctly display the active iframe based on which is currently hosting the active call (juggling views) * Testing the iframe juggling. Seems to work for the first and second joins... so likely on the right path with this * add url as a param for widget url * fix backup iframe visibility * Much closer to the call state handling we want w/ hangups and joins * Fix the position of the member drawer to its correct location * Ensure drawer doesn't appear in call room * Better handling of the isCallActive in the join handler * Add ideal call room join behavior where text rooms to call room simply joins, but doesn't swap current view * Fix mobile call room default behavior from auto-join to displaying lobby * swap call status to be bound to call state and not active call id * Remove clean room ID and add default handler for if no active call has existed yet, but user clicks on show chat * Applies the correct changes to the call state and removes listeners of old active widget so we don't trigger hang ups on the new one (the element-call widget likes to spam the hang up response back several times for some reason long after you tell it to hang up) * Remove superfluous comments and Date.now() that was causing loading... bug when widgetId desynced * Remove Date.now() that was causing widgetId desync * add listener clearing, camel case es lint rule exception, remove unneeded else statements * Remove unused * Add widgetId as a getWidgetUrl param * Remove no longer needed files * revert ternary expression change and add to dependency array * add widgetId to correct pos in getWidgetUrl usage * Remove CallActivation * Move and rename RoomCallNavStatus * update imports and dependency array * Rename and clean up * Moved CallProvider * Fix spelling mistake * Fix to use shorthand prop * Remove unneeded logger.errors * Fixes element-call embedded support (but it seems to run poorly) * null the default url so that we fallback to the embedded version (would recommend hosting it until performance issue is determined) * Fix vite build to place element-call correctly for embedded npm package support * add vite preview as an npm script * Move files to more correct location * Add package-lock changes * Set dep version to exact * Fix path issue from moving file locations * Sets initial states so the iframes don't cause the other to fail with the npm embedded package * Revert navitem change * Just check for state on both which should only occur at initial * Fixes call initializing by default on mobile * Provides correct behavior when call isn't active and no activeClientWidgetApi exists yet * Corrects the state for the situations where both iframes are "active" (not necessarily visible) * Reduce code reuse in handleJoin * Seems to sort out the hangup status button bug the occurred after joining a call via lobby * Re-add the default view current active room behavior * Remove repetitive check * Add storing widget for comparing with (since we already store room id and the clientWidgetApi anyway) * Update rendering logic to clear up remaining rendering bug (straight to call -> lobby of another room and joining call from that interface -> lobby of that previous room and joining was leading to duplication of the user in lobbies. This was actually from listening to and acknowledging hangups from the viewed widget in CallProvider) * Prevent null rooms from ever rendering * This seems to manage the hangup state with the status bar button well enough that black screens should never be encountered * Remove viewed room setting here and pass the room to hang up (seems state doesn't update fast enough otherwise) * Remove unused * Properly declare new hangup method sig * Seems to avoid almost all invalid states (hang up while viewing another lobby and hitting join seems to black screen, sets the active call as the previous active room id, but does join the viewed room correctly) * Fix for cases where you're viewing a lobby and hang up your existing call and try to join lobby (was not rendering for the correct room id, but was joining the correct call prior) * Re-add intended switching behavior * More correct filter (viewedRoom can return false on that compare in some cases) * Seems to shore up the remaining state issues with the status bar hangup * Fix formatting * In widget hang up button should be handled correct now * Solves the CHCH sequence issue, CLJH remains * Fixes CLJH, found CCH * Solves CCH. Looks like CLCH left * A bit of an abomination, but adds a state counter to iteratively handle the diverse potential states (where a user can join from the nav bar or the join button, hang up from either as well, and account for the juggling iframes) Black screens shouldn't be occurring now. * Fix dependency array * Technically corrects the hangup button in the widget, should be more precise though * Bind the on messaging iframe for easier access in hangup/join handling * Far cleaner and more sensible handling of the call window... I just really don't like the idea of sending a click event, but right now the element-call code treats preload/skipLobby hangups (sent from our end) as if they had no lobby at all and thus black screens. Other implementation was working around that without just sending a click event on the iframe's hangup button. * Fixes a bug where if you left a call then went to a lobby and joined it didn't update the actual activeCallRoomId * Fixes complaints of null contentDocument in iframe * Update to use new icons (thank you) * Remove unneeded prop * Re-arrange more options and add checks for each option to see if it is a call room (probably should manage a state to see if a header is already on screen and provide a slightly modified visual based on that for call rooms) * Invert icons to show the state instead of the action they will perform (more visual clarity) * Update src/app/features/room-nav/RoomCallNavStatus.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomCallNavStatus.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomCallNavStatus.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomCallNavStatus.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomCallNavStatus.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomCallNavStatus.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomViewHeader.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavItem.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavUser.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavUser.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room-nav/RoomNavUser.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/pages/client/space/Space.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/call/CallView.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/call/CallView.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/call/CallView.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomView.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomView.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * adjust room header for calling * Remove No Active Call text when not in a call * update element-call version * Update src/app/features/room/RoomViewHeader.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomViewHeader.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomViewHeader.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomViewHeader.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Update src/app/features/room/RoomViewHeader.tsx Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> * Revert most changes to Space.tsx * Show call room even if category is collapsed * changes to RoomNavItem, RoomNavUser and add useCallMembers * Rename file, sprinkle in the magic one line for matrixRTCSession. and remove comment block * swap userId to callMembership as a prop and add a nullchecked userId that uses the membership sender * update references to use callMembership instead * Simplify RoomNavUser Discard future functionality since it probably won't exist in time for merging this PR * Simplify RoomViewHeader.tsx Remove unused UI elements that don't have implemented functionality. Replace custom function for checking if a room is direct with a standard hook. * Update Room.tsx to accomodate restructuring of Room, RoomView and CallView * Update RoomView.tsx to accomodate restructuring of Room, RoomView and CallView * Update CallView.tsx to accomodate restructuring of Room, RoomView and CallView + suggested changes * add call related permissions to room permissions * bump element call to 0.16.3, apply cinny theme to element call ui, replace element call lobby (backup iframe) with custom ui and only use element call for the in-call ui * update text spacing * redo roomcallnavstatus ui, force user preferred mute/video states when first joining calls, update variable names and remove unnecessary logic * set default mic state to enabled * clean up ts/eslint errors * remove debug logs * format using prettier rules from project prettierrc * fix: show call nav status while active call is ongoing * fix: clean up call nav/call view console warnings * fix: keep call media controls visible before joining * fix: restore header icon button fill behavior Fixes regression from b074d421b66eb4d8b600dfa55b967e6c4f783044. * style: blend header and room input button styles in call nav * fix page header background color on room view header * fix: permissions and room icon resolution (#2) * Initialize call state upon room creation for call rooms, remove subsequent useless permission * handle case of missing call permissions * use call icon for room item summary when room is call room * replace previous icon src resolution function with a more robust approach * replace usages of previous icon resolution function with new implementation * fix room name not updating for a while when changed * set up framework for room power level overrides upon room creation * override join call permission to all members upon room creation * fix broken usages of RoomIcon * remove unneeded import * remove unnecessary logic * format with prettier * feat: show connected/connecting call status * fix: preserve navigation context when opening non-call rooms * fix: reset room name state when room instance changes * feat: Disable webcam by default using callIntent='audio' * Add channel type selecor * Add option for voice rooms, which for now sets the default selected option in the creation modal * Add proper support for room selection from the enu * Move enums to `types.ts` and change icons selection to use `getRoomIconSrc` * fix: group duplicate conditions into one * fix: typo * refactor: rename kind/voice to access/type and simplify room creation - rename CreateRoomVoice to CreateRoomType and modal voice state to type - rename CreateRoomKind to CreateRoomAccess and KindSelector to AccessSelector - propagate access/defaultAccess through create room and create space forms - set voice room power levels via createRoom power_level_content_override * refactor: unify join rule icon mapping and update call/space icons - bump folds from 2.5.0 to 2.6.0 - replace separate room/space join-rule icon hooks with useJoinRuleIcons(roomType) - route join-rule icons through getRoomIconSrc for consistent room type handling - simplify getRoomIconSrc by removing the locked override path - use VolumeHighGlobe for public call rooms and VolumeHighLock for private call rooms * chore(deps): bump matrix-widget-api to 1.17 and remove react-sdk-module-api * fix: adapt SmallWidget to matrix-widget-api 1.17.0 API * fix: render call room chat only when chat panel is open * fix(permissions): show call settings permissions only for call rooms * refactor: remove redundant room-nav props/guards and minor naming cleanup * fix: use PhoneDown icon for hang up action * chore(hooks): remove unused useStateEvents hook * fix(room): enable members drawer toggle in desktop call rooms - show filled User icon when the drawer is open * Revert "fix: adapt SmallWidget to matrix-widget-api 1.17.0 API" This reverts commit a4c34eff8a. * fix: semi-revert matrix-widget-api 1.17 bump and migrate to 1.13 API * fix(call): wait for Element Call contentLoaded before widget handshake - fixes not working on firefox * fix missing imports * improve create room type design and add beta badge for voice room * add beta badge for voice room in space lobby * fix create room modal title * pass missing roomType param to roomicon component * add roomtype * Add deafen functionality (#2695) * feat:(deafen functionality) * feat:(reworked voice controls for deafen) * ref:(use muted instead of volume for deafen) * fix:(backpedal audio_enabled rename) * ref:(renaming of deafened vars) * add stack avatar component * add call status bar - WIP * remove call status from navigation drawer * fix deprecated method use in use call members hook * render new call status bar * move call widget driver to plugins * remove old status bar usage from navigation drawer * add call session and joined hook * remove unknown changes * upgrade widget api * add element call embed plugin * remove unknown change * add call embed atom * add call embed hooks and context * add call embed provider * replace old call implementation * stop joining other call on second click if already in a call * refactor embed placement hook * add merge border prop to sequence card * add call preferences * add prescreen to call view - WIP * prevent joining new call if already in call * make call layout adaptive * render call chat as right panel * show call members in prescreen * render call join leave event in timeline * remove unknown rewrite in docker-nginx file * render call event without hidden event enable --------- Co-authored-by: Gigiaj <gigiaboone@yahoo.com> Co-authored-by: Jaggar <18173108+GigiaJ@users.noreply.github.com> Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com> Co-authored-by: Gimle Larpes <gimlelarpes@gmail.com> Co-authored-by: YoJames2019 <jamesclark1700@gmail.com> Co-authored-by: YoJames2019 <yobiscuit0@gmail.com> Co-authored-by: hazre <mail@haz.re> Co-authored-by: haz <37149950+hazre@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com> Co-authored-by: James <49845975+YoJames2019@users.noreply.github.com> Co-authored-by: James Reilly <jreilly1821@gmail.com> Co-authored-by: Tymek <vonautymek@gmail.com> Co-authored-by: Thedustbuster <92692948+Thedustbustr@users.noreply.github.com>
2026-03-07 18:03:32 +11:00
parent 730670cf52
commit b050cd01f9
78 changed files with 3154 additions and 261 deletions
--- a/config.json
+++ b/config.json
@@ -1,12 +1,6 @@
 {
  "defaultHomeserver": 1,
-  "homeserverList": [
-    "converser.eu",
-    "matrix.org",
-    "mozilla.org",
-    "unredacted.org",
-    "xmr.se"
-  ],
+  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
  "allowCustomHomeservers": true,

  "featuredCommunities": {
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
        "linkify-react": "4.3.2",
        "linkifyjs": "4.3.2",
        "matrix-js-sdk": "38.2.0",
+        "matrix-widget-api": "1.17.0",
        "millify": "6.1.0",
        "pdfjs-dist": "4.2.67",
        "prismjs": "1.30.0",
@@ -65,6 +66,7 @@
        "ua-parser-js": "1.0.35"
      },
      "devDependencies": {
+        "@element-hq/element-call-embedded": "0.16.3",
        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
        "@rollup/plugin-inject": "5.0.3",
        "@rollup/plugin-wasm": "6.1.1",
@@ -1649,6 +1651,12 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@element-hq/element-call-embedded": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.16.3.tgz",
+      "integrity": "sha512-OViKJonDaDNVBUW9WdV9mk78/Ruh34C7XsEgt3O8D9z+64C39elbIgllHSoH5S12IRlv9RYrrV37FZLo6QWsDQ==",
+      "dev": true
+    },
    "node_modules/@emotion/hash": {
      "version": "0.9.2",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -8666,9 +8674,9 @@
      }
    },
    "node_modules/matrix-widget-api": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.1.tgz",
-      "integrity": "sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.17.0.tgz",
+      "integrity": "sha512-5FHoo3iEP3Bdlv5jsYPWOqj+pGdFQNLWnJLiB0V7Ygne7bb+Gsj3ibyFyHWC6BVw+Z+tSW4ljHpO17I9TwStwQ==",
      "license": "Apache-2.0",
      "dependencies": {
        "@types/events": "^3.0.0",
@@ -10909,6 +10917,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
      "dev": true,
+      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  "scripts": {
    "start": "vite",
    "build": "vite build",
+    "preview": "vite preview",
    "lint": "yarn check:eslint && yarn check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
@@ -55,6 +56,7 @@
    "linkify-react": "4.3.2",
    "linkifyjs": "4.3.2",
    "matrix-js-sdk": "38.2.0",
+    "matrix-widget-api": "1.17.0",
    "millify": "6.1.0",
    "pdfjs-dist": "4.2.67",
    "prismjs": "1.30.0",
@@ -76,6 +78,7 @@
    "ua-parser-js": "1.0.35"
  },
  "devDependencies": {
+    "@element-hq/element-call-embedded": "0.16.3",
    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
    "@rollup/plugin-inject": "5.0.3",
    "@rollup/plugin-wasm": "6.1.1",
--- a/src/app/components/CallEmbedProvider.tsx
+++ b/src/app/components/CallEmbedProvider.tsx
@@ -0,0 +1,63 @@
+import React, { ReactNode, useCallback, useRef } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import {
+  CallEmbedContextProvider,
+  CallEmbedRefContextProvider,
+  useCallHangupEvent,
+  useCallJoined,
+  useCallThemeSync,
+} from '../hooks/useCallEmbed';
+import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
+import { CallEmbed } from '../plugins/call';
+import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
+
+function CallUtils({ embed }: { embed: CallEmbed }) {
+  const setCallEmbed = useSetAtom(callEmbedAtom);
+
+  useCallThemeSync(embed);
+  useCallHangupEvent(
+    embed,
+    useCallback(() => {
+      setCallEmbed(undefined);
+    }, [setCallEmbed])
+  );
+
+  return null;
+}
+
+type CallEmbedProviderProps = {
+  children?: ReactNode;
+};
+export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
+  const callEmbed = useAtomValue(callEmbedAtom);
+  const callEmbedRef = useRef<HTMLDivElement>(null);
+  const joined = useCallJoined(callEmbed);
+
+  const selectedRoom = useSelectedRoom();
+  const chat = useAtomValue(callChatAtom);
+  const screenSize = useScreenSizeContext();
+
+  const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
+
+  const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;
+
+  return (
+    <CallEmbedContextProvider value={callEmbed}>
+      {callEmbed && <CallUtils embed={callEmbed} />}
+      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
+      <div
+        data-call-embed-container
+        style={{
+          visibility: callVisible ? undefined : 'hidden',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '50%',
+        }}
+        ref={callEmbedRef}
+      />
+    </CallEmbedContextProvider>
+  );
+}
--- a/src/app/components/JoinRulesSwitcher.tsx
+++ b/src/app/components/JoinRulesSwitcher.tsx
@@ -16,34 +16,24 @@ import {
 import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
+import { getRoomIconSrc } from '../utils/room';

 export type ExtraJoinRules = 'knock_restricted';
 export type ExtendedJoinRules = JoinRule | ExtraJoinRules;

 type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
-export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
+
+export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
  useMemo(
    () => ({
-      [JoinRule.Invite]: Icons.HashLock,
-      [JoinRule.Knock]: Icons.HashLock,
-      knock_restricted: Icons.Hash,
-      [JoinRule.Restricted]: Icons.Hash,
-      [JoinRule.Public]: Icons.HashGlobe,
-      [JoinRule.Private]: Icons.HashLock,
+      [JoinRule.Invite]: getRoomIconSrc(Icons, roomType, JoinRule.Invite),
+      [JoinRule.Knock]: getRoomIconSrc(Icons, roomType, JoinRule.Knock),
+      knock_restricted: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
+      [JoinRule.Restricted]: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
+      [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
+      [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
    }),
-    []
-  );
-export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: Icons.SpaceLock,
-      [JoinRule.Knock]: Icons.SpaceLock,
-      knock_restricted: Icons.Space,
-      [JoinRule.Restricted]: Icons.Space,
-      [JoinRule.Public]: Icons.SpaceGlobe,
-      [JoinRule.Private]: Icons.SpaceLock,
-    }),
-    []
+    [roomType]
  );

 type JoinRuleLabels = Record<ExtendedJoinRules, string>;
--- a/src/app/components/create-room/CreateRoomAccessSelector.tsx
+++ b/src/app/components/create-room/CreateRoomAccessSelector.tsx
@@ -2,43 +2,39 @@ import React from 'react';
 import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
 import { SequenceCard } from '../sequence-card';
 import { SettingTile } from '../setting-tile';
+import { CreateRoomAccess } from './types';

-export enum CreateRoomKind {
-  Private = 'private',
-  Restricted = 'restricted',
-  Public = 'public',
-}
-type CreateRoomKindSelectorProps = {
-  value?: CreateRoomKind;
-  onSelect: (value: CreateRoomKind) => void;
+type CreateRoomAccessSelectorProps = {
+  value?: CreateRoomAccess;
+  onSelect: (value: CreateRoomAccess) => void;
  canRestrict?: boolean;
  disabled?: boolean;
-  getIcon: (kind: CreateRoomKind) => IconSrc;
+  getIcon: (access: CreateRoomAccess) => IconSrc;
 };
-export function CreateRoomKindSelector({
+export function CreateRoomAccessSelector({
  value,
  onSelect,
  canRestrict,
  disabled,
  getIcon,
-}: CreateRoomKindSelectorProps) {
+}: CreateRoomAccessSelectorProps) {
  return (
    <Box shrink="No" direction="Column" gap="100">
      {canRestrict && (
        <SequenceCard
          style={{ padding: config.space.S300 }}
-          variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
+          variant={value === CreateRoomAccess.Restricted ? 'Primary' : 'SurfaceVariant'}
          direction="Column"
          gap="100"
          as="button"
          type="button"
-          aria-pressed={value === CreateRoomKind.Restricted}
-          onClick={() => onSelect(CreateRoomKind.Restricted)}
+          aria-pressed={value === CreateRoomAccess.Restricted}
+          onClick={() => onSelect(CreateRoomAccess.Restricted)}
          disabled={disabled}
        >
          <SettingTile
-            before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
-            after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
+            before={<Icon size="400" src={getIcon(CreateRoomAccess.Restricted)} />}
+            after={value === CreateRoomAccess.Restricted && <Icon src={Icons.Check} />}
          >
            <Text size="H6">Restricted</Text>
            <Text size="T300" priority="300">
@@ -49,18 +45,18 @@ export function CreateRoomKindSelector({
      )}
      <SequenceCard
        style={{ padding: config.space.S300 }}
-        variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
+        variant={value === CreateRoomAccess.Private ? 'Primary' : 'SurfaceVariant'}
        direction="Column"
        gap="100"
        as="button"
        type="button"
-        aria-pressed={value === CreateRoomKind.Private}
-        onClick={() => onSelect(CreateRoomKind.Private)}
+        aria-pressed={value === CreateRoomAccess.Private}
+        onClick={() => onSelect(CreateRoomAccess.Private)}
        disabled={disabled}
      >
        <SettingTile
-          before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
-          after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
+          before={<Icon size="400" src={getIcon(CreateRoomAccess.Private)} />}
+          after={value === CreateRoomAccess.Private && <Icon src={Icons.Check} />}
        >
          <Text size="H6">Private</Text>
          <Text size="T300" priority="300">
@@ -70,18 +66,18 @@ export function CreateRoomKindSelector({
      </SequenceCard>
      <SequenceCard
        style={{ padding: config.space.S300 }}
-        variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
+        variant={value === CreateRoomAccess.Public ? 'Primary' : 'SurfaceVariant'}
        direction="Column"
        gap="100"
        as="button"
        type="button"
-        aria-pressed={value === CreateRoomKind.Public}
-        onClick={() => onSelect(CreateRoomKind.Public)}
+        aria-pressed={value === CreateRoomAccess.Public}
+        onClick={() => onSelect(CreateRoomAccess.Public)}
        disabled={disabled}
      >
        <SettingTile
-          before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
-          after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
+          before={<Icon size="400" src={getIcon(CreateRoomAccess.Public)} />}
+          after={value === CreateRoomAccess.Public && <Icon src={Icons.Check} />}
        >
          <Text size="H6">Public</Text>
          <Text size="T300" priority="300">
--- a/src/app/components/create-room/CreateRoomTypeSelector.tsx
+++ b/src/app/components/create-room/CreateRoomTypeSelector.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { SequenceCard } from '../sequence-card';
+import { SettingTile } from '../setting-tile';
+import { CreateRoomType } from './types';
+import { BetaNoticeBadge } from '../BetaNoticeBadge';
+
+type CreateRoomTypeSelectorProps = {
+  value?: CreateRoomType;
+  onSelect: (value: CreateRoomType) => void;
+  disabled?: boolean;
+  getIcon: (type: CreateRoomType) => IconSrc;
+};
+export function CreateRoomTypeSelector({
+  value,
+  onSelect,
+  disabled,
+  getIcon,
+}: CreateRoomTypeSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomType.TextRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomType.TextRoom}
+        onClick={() => onSelect(CreateRoomType.TextRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomType.TextRoom)} />}
+          after={value === CreateRoomType.TextRoom && <Icon src={Icons.Check} />}
+        >
+          <Box gap="200" alignItems="Baseline">
+            <Text size="H6" style={{ flexShrink: 0 }}>
+              Chat Room
+            </Text>
+            <Text size="T300" priority="300" truncate>
+              - Messages, photos, and videos.
+            </Text>
+          </Box>
+        </SettingTile>
+      </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomType.VoiceRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomType.VoiceRoom}
+        onClick={() => onSelect(CreateRoomType.VoiceRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomType.VoiceRoom)} />}
+          after={value === CreateRoomType.VoiceRoom && <Icon src={Icons.Check} />}
+        >
+          <Box gap="200" alignItems="Baseline">
+            <Text size="H6" style={{ flexShrink: 0 }}>
+              Voice Room
+            </Text>
+            <Text size="T300" priority="300" truncate>
+              - Live audio and video conversations.
+            </Text>
+            <BetaNoticeBadge />
+          </Box>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}
--- a/src/app/components/create-room/index.ts
+++ b/src/app/components/create-room/index.ts
@@ -1,5 +1,6 @@
-export * from './CreateRoomKindSelector';
+export * from './CreateRoomAccessSelector';
 export * from './CreateRoomAliasInput';
 export * from './RoomVersionSelector';
 export * from './utils';
 export * from './AdditionalCreatorInput';
+export * from './types';
--- a/src/app/components/create-room/types.ts
+++ b/src/app/components/create-room/types.ts
@@ -0,0 +1,10 @@
+export enum CreateRoomType {
+  TextRoom = 'text',
+  VoiceRoom = 'voice',
+}
+
+export enum CreateRoomAccess {
+  Private = 'private',
+  Restricted = 'restricted',
+  Public = 'public',
+}
--- a/src/app/components/create-room/utils.ts
+++ b/src/app/components/create-room/utils.ts
@@ -7,10 +7,10 @@ import {
  Room,
 } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { CreateRoomKind } from './CreateRoomKindSelector';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { getMxIdServer } from '../../utils/matrix';
+import { CreateRoomAccess } from './types';

 export const createRoomCreationContent = (
  type: RoomType | undefined,
@@ -32,7 +32,7 @@ export const createRoomCreationContent = (
 };

 export const createRoomJoinRulesState = (
-  kind: CreateRoomKind,
+  access: CreateRoomAccess,
  parent: Room | undefined,
  knock: boolean
 ) => {
@@ -40,13 +40,13 @@ export const createRoomJoinRulesState = (
    join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
  };

-  if (kind === CreateRoomKind.Public) {
+  if (access === CreateRoomAccess.Public) {
    content = {
      join_rule: JoinRule.Public,
    };
  }

-  if (kind === CreateRoomKind.Restricted && parent) {
+  if (access === CreateRoomAccess.Restricted && parent) {
    content = {
      join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
      allow: [
@@ -86,11 +86,23 @@ export const createRoomEncryptionState = () => ({
  },
 });

+export const createRoomCallState = () => ({
+  type: 'org.matrix.msc3401.call',
+  state_key: '',
+  content: {},
+});
+
+export const createVoiceRoomPowerLevelsOverride = () => ({
+  events: {
+    [StateEvent.GroupCallMemberPrefix]: 0,
+  },
+});
+
 export type CreateRoomData = {
  version: string;
  type?: RoomType;
  parent?: Room;
-  kind: CreateRoomKind;
+  access: CreateRoomAccess;
  name: string;
  topic?: string;
  aliasLocalPart?: string;
@@ -110,7 +122,11 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
    initialState.push(createRoomParentState(data.parent));
  }

-  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
+  if (data.type === RoomType.Call) {
+    initialState.push(createRoomCallState());
+  }
+
+  initialState.push(createRoomJoinRulesState(data.access, data.parent, data.knock));

  const options: ICreateRoomOpts = {
    room_version: data.version,
@@ -122,6 +138,8 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
      data.allowFederation,
      data.additionalCreators
    ),
+    power_level_content_override:
+      data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
    initial_state: initialState,
  };

--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -169,12 +169,13 @@ export function RoomMentionAutocomplete({
                        <RoomIcon
                          size="50"
                          joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                          roomType={room.getType()}
                          filled
                        />
                      )}
                    />
                  ) : (
-                    <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
+                    <RoomIcon size="100" joinRule={room.getJoinRule()} roomType={room.getType()} />
                  )}
                </Avatar>
              }
--- a/src/app/components/room-avatar/RoomAvatar.tsx
+++ b/src/app/components/room-avatar/RoomAvatar.tsx
@@ -2,7 +2,7 @@ import { JoinRule } from 'matrix-js-sdk';
 import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
 import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
 import * as css from './RoomAvatar.css';
-import { joinRuleToIconSrc } from '../../utils/room';
+import { getRoomIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';

 type RoomAvatarProps = {
@@ -44,13 +44,9 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
 export const RoomIcon = forwardRef<
  SVGSVGElement,
  Omit<ComponentProps<typeof Icon>, 'src'> & {
-    joinRule: JoinRule;
-    space?: boolean;
+    joinRule?: JoinRule;
+    roomType?: string;
  }
->(({ joinRule, space, ...props }, ref) => (
-  <Icon
-    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
-    {...props}
-    ref={ref}
-  />
+>(({ joinRule, roomType, ...props }, ref) => (
+  <Icon src={getRoomIconSrc(Icons, roomType, joinRule)} {...props} ref={ref} />
 ));
--- a/src/app/components/sequence-card/SequenceCard.tsx
+++ b/src/app/components/sequence-card/SequenceCard.tsx
@@ -17,6 +17,7 @@ export const SequenceCard = as<
      firstChild,
      lastChild,
      outlined,
+      mergeBorder,
      ...props
    },
    ref
@@ -24,7 +25,7 @@ export const SequenceCard = as<
    <Box
      as={AsSequenceCard}
      className={classNames(
-        css.SequenceCard({ radii, outlined }),
+        css.SequenceCard({ radii, outlined, mergeBorder }),
        ContainerColor({ variant }),
        className
      )}
--- a/src/app/components/sequence-card/style.css.ts
+++ b/src/app/components/sequence-card/style.css.ts
@@ -11,7 +11,7 @@ export const SequenceCard = recipe({
    },
    borderStyle: 'solid',
    borderWidth: outlinedWidth,
-    borderBottomWidth: 0,
+
    selectors: {
      '&:first-child, :not(&) + &': {
        borderTopLeftRadius: [radii],
@@ -20,7 +20,6 @@ export const SequenceCard = recipe({
      '&:last-child, &:not(:has(+&))': {
        borderBottomLeftRadius: [radii],
        borderBottomRightRadius: [radii],
-        borderBottomWidth: outlinedWidth,
      },
      [`&[data-first-child="true"]`]: {
        borderTopLeftRadius: [radii],
@@ -74,6 +73,16 @@ export const SequenceCard = recipe({
        },
      },
    },
+    mergeBorder: {
+      true: {
+        borderBottomWidth: 0,
+        selectors: {
+          '&:last-child, &:not(:has(+&))': {
+            borderBottomWidth: outlinedWidth,
+          },
+        },
+      },
+    },
  },
  defaultVariants: {
    radii: '400',
--- a/src/app/components/stacked-avatar/StackedAvatar.tsx
+++ b/src/app/components/stacked-avatar/StackedAvatar.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { as, Avatar } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+
+type StackedAvatarProps = {
+  radii?: '0' | '300' | '400' | '500' | 'Pill' | 'Inherit' | undefined;
+};
+export const StackedAvatar = as<'span', css.StackedAvatarVariants & StackedAvatarProps>(
+  ({ size, variant, className, ...props }, ref) => (
+    <Avatar
+      size={size}
+      className={classNames(css.StackedAvatar({ size, variant }), className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);
--- a/src/app/components/stacked-avatar/index.ts
+++ b/src/app/components/stacked-avatar/index.ts
@@ -0,0 +1 @@
+export * from './StackedAvatar';
--- a/src/app/components/stacked-avatar/styles.css.ts
+++ b/src/app/components/stacked-avatar/styles.css.ts
@@ -0,0 +1,59 @@
+import { ComplexStyleRule } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { color, config, ContainerColor, toRem } from 'folds';
+
+const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
+  outlineColor: color[variant].Container,
+});
+
+export const StackedAvatar = recipe({
+  base: {
+    backgroundColor: color.Surface.Container,
+    outlineStyle: 'solid',
+    selectors: {
+      '&:first-child': {
+        marginLeft: 0,
+      },
+      'button&': {
+        cursor: 'pointer',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      '200': {
+        marginLeft: toRem(-6),
+        outlineWidth: config.borderWidth.B300,
+      },
+      '300': {
+        marginLeft: toRem(-9),
+        outlineWidth: config.borderWidth.B400,
+      },
+      '400': {
+        marginLeft: toRem(-10.5),
+        outlineWidth: config.borderWidth.B500,
+      },
+      '500': {
+        marginLeft: toRem(-13),
+        outlineWidth: config.borderWidth.B600,
+      },
+    },
+    variant: {
+      Background: getVariant('Background'),
+      Surface: getVariant('Surface'),
+      SurfaceVariant: getVariant('SurfaceVariant'),
+      Primary: getVariant('Primary'),
+      Secondary: getVariant('Secondary'),
+      Success: getVariant('Success'),
+      Warning: getVariant('Warning'),
+      Critical: getVariant('Critical'),
+    },
+  },
+  defaultVariants: {
+    size: '400',
+    variant: 'Surface',
+  },
+});
+
+export type StackedAvatarVariants = RecipeVariants<typeof StackedAvatar>;
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -323,7 +323,7 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
                )}
              />
            ) : (
-              <RoomIcon size="100" joinRule={room.getJoinRule()} />
+              <RoomIcon size="100" joinRule={room.getJoinRule()} roomType={room.getType()} />
            )}
          </Avatar>
        }
--- a/src/app/features/add-existing/AddExisting.tsx
+++ b/src/app/features/add-existing/AddExisting.tsx
@@ -291,7 +291,11 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                                      )}
                                    />
                                  ) : (
-                                    <RoomIcon size="200" joinRule={room.getJoinRule()} />
+                                    <RoomIcon
+                                      size="200"
+                                      joinRule={room.getJoinRule()}
+                                      roomType={room.getType()}
+                                    />
                                  )}
                                </Avatar>
                              }
--- a/src/app/features/call-status/CallControl.tsx
+++ b/src/app/features/call-status/CallControl.tsx
@@ -0,0 +1,168 @@
+import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import React, { useState } from 'react';
+import { StatusDivider } from './components';
+import { CallEmbed, useCallControlState } from '../../plugins/call';
+
+type MicrophoneButtonProps = {
+  enabled: boolean;
+  onToggle: () => Promise<unknown>;
+};
+function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Background' : 'Warning'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => onToggle()}
+          outlined={!enabled}
+        >
+          <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type SoundButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+function SoundButton({ enabled, onToggle }: SoundButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Background' : 'Warning'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => onToggle()}
+          outlined={!enabled}
+        >
+          <Icon
+            size="100"
+            src={enabled ? Icons.Headphone : Icons.HeadphoneMute}
+            filled={!enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type VideoButtonProps = {
+  enabled: boolean;
+  onToggle: () => Promise<unknown>;
+};
+function VideoButton({ enabled, onToggle }: VideoButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Camera' : 'Start Camera'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Background'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => onToggle()}
+          outlined={enabled}
+        >
+          <Icon
+            size="100"
+            src={enabled ? Icons.VideoCamera : Icons.VideoCameraMute}
+            filled={enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+function ScreenShareButton() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Screenshare' : 'Start Screenshare'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Background'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => setEnabled(!enabled)}
+          outlined={enabled}
+        >
+          <Icon size="100" src={Icons.ScreenShare} filled={enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export function CallControl({ callEmbed }: { callEmbed: CallEmbed }) {
+  const { microphone, video, sound } = useCallControlState(callEmbed.control);
+
+  return (
+    <Box shrink="No" alignItems="Center" gap="300">
+      <Box alignItems="Inherit" gap="200">
+        <MicrophoneButton
+          enabled={microphone}
+          onToggle={() => callEmbed.control.toggleMicrophone()}
+        />
+        <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
+      </Box>
+      <StatusDivider />
+      <Box alignItems="Inherit" gap="200">
+        <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
+        {false && <ScreenShareButton />}
+      </Box>
+      <StatusDivider />
+      <Chip
+        variant="Critical"
+        radii="300"
+        fill="Soft"
+        before={<Icon size="50" src={Icons.PhoneDown} filled />}
+        outlined
+        onClick={() => callEmbed.hangup()}
+      >
+        <Text as="span" size="L400">
+          End
+        </Text>
+      </Chip>
+    </Box>
+  );
+}
--- a/src/app/features/call-status/CallRoomName.tsx
+++ b/src/app/features/call-status/CallRoomName.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Room } from 'matrix-js-sdk';
+import { Chip, Text } from 'folds';
+import { useAtomValue } from 'jotai';
+import { useRoomName } from '../../hooks/useRoomMeta';
+import { RoomIcon } from '../../components/room-avatar';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { getAllParents, guessPerfectParent } from '../../utils/room';
+import { useOrphanSpaces } from '../../state/hooks/roomList';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+import { mDirectAtom } from '../../state/mDirectList';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+
+type CallRoomNameProps = {
+  room: Room;
+};
+export function CallRoomName({ room }: CallRoomNameProps) {
+  const mx = useMatrixClient();
+  const name = useRoomName(room);
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
+  const mDirects = useAtomValue(mDirectAtom);
+  const dm = mDirects.has(room.roomId);
+
+  const allRoomsSet = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allRoomsSet);
+
+  const allParents = getAllParents(roomToParents, room.roomId);
+  const orphanParents = allParents && orphanSpaces.filter((o) => allParents.has(o));
+  const perfectOrphanParent = orphanParents && guessPerfectParent(mx, room.roomId, orphanParents);
+
+  const { navigateRoom } = useRoomNavigate();
+
+  return (
+    <Chip
+      variant="Background"
+      radii="Pill"
+      before={
+        <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+      }
+      onClick={() => navigateRoom(room.roomId)}
+    >
+      <Text size="L400" truncate>
+        {name}
+        {!dm && perfectOrphanParent && (
+          <Text as="span" size="T200" priority="300">
+            {' •'} <b>{getRoom(perfectOrphanParent)?.name ?? perfectOrphanParent}</b>
+          </Text>
+        )}
+      </Text>
+    </Chip>
+  );
+}
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/src/app/features/call-status/CallStatus.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Spinner } from 'folds';
+import classNames from 'classnames';
+import { LiveChip } from './LiveChip';
+import * as css from './styles.css';
+import { CallRoomName } from './CallRoomName';
+import { CallControl } from './CallControl';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
+import { MemberGlance } from './MemberGlance';
+import { StatusDivider } from './components';
+import { CallEmbed } from '../../plugins/call/CallEmbed';
+import { useCallJoined } from '../../hooks/useCallEmbed';
+
+type CallStatusProps = {
+  callEmbed: CallEmbed;
+};
+export function CallStatus({ callEmbed }: CallStatusProps) {
+  const { room } = callEmbed;
+
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const screenSize = useScreenSize();
+  const callJoined = useCallJoined(callEmbed);
+
+  return (
+    <Box
+      className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
+      shrink="No"
+      gap="400"
+      alignItems="Center"
+      direction={screenSize === ScreenSize.Mobile ? 'Column' : 'Row'}
+    >
+      <Box grow="Yes" alignItems="Inherit" gap="200">
+        {callJoined && callMembers.length > 0 ? (
+          <Box shrink="No" gap="Inherit" alignItems="Inherit">
+            <MemberGlance room={room} members={callMembers} />
+            <LiveChip count={callMembers.length} room={room} members={callMembers} />
+          </Box>
+        ) : (
+          <Spinner variant="Secondary" size="200" />
+        )}
+        <StatusDivider />
+        <CallRoomName room={room} />
+      </Box>
+      <Box shrink="No" alignItems="Inherit" gap="Inherit">
+        <CallControl callEmbed={callEmbed} />
+      </Box>
+    </Box>
+  );
+}
--- a/src/app/features/call-status/LiveChip.tsx
+++ b/src/app/features/call-status/LiveChip.tsx
@@ -0,0 +1,137 @@
+import React, { MouseEventHandler, useState } from 'react';
+import {
+  Avatar,
+  Badge,
+  Box,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  toRem,
+} from 'folds';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import FocusTrap from 'focus-trap-react';
+import { Room } from 'matrix-js-sdk';
+import * as css from './styles.css';
+import { stopPropagation } from '../../utils/keyboard';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { UserAvatar } from '../../components/user-avatar';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { getMouseEventCords } from '../../utils/dom';
+
+type LiveChipProps = {
+  room: Room;
+  members: CallMembership[];
+  count: number;
+};
+export function LiveChip({ count, room, members }: LiveChipProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Top"
+      align="Start"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu
+            style={{
+              maxHeight: '75vh',
+              maxWidth: toRem(300),
+              display: 'flex',
+            }}
+          >
+            <Box grow="Yes">
+              <Scroll size="0" hideTrack visibility="Hover">
+                <Box direction="Column" style={{ padding: config.space.S100 }}>
+                  {members.map((callMember) => {
+                    const userId = callMember.sender;
+                    if (!userId) return null;
+                    const name =
+                      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+                    const avatarMxc = getMemberAvatarMxc(room, userId);
+                    const avatarUrl = avatarMxc
+                      ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+                      : undefined;
+
+                    return (
+                      <MenuItem
+                        key={callMember.membershipID}
+                        size="400"
+                        variant="Surface"
+                        radii="300"
+                        style={{ paddingLeft: config.space.S200 }}
+                        onClick={(evt) =>
+                          openUserProfile(
+                            room.roomId,
+                            undefined,
+                            userId,
+                            getMouseEventCords(evt.nativeEvent),
+                            'Right'
+                          )
+                        }
+                        before={
+                          <Avatar size="200" radii="400">
+                            <UserAvatar
+                              userId={userId}
+                              src={avatarUrl}
+                              alt={name}
+                              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                            />
+                          </Avatar>
+                        }
+                      >
+                        <Text size="T300" truncate>
+                          {name}
+                        </Text>
+                      </MenuItem>
+                    );
+                  })}
+                </Box>
+              </Scroll>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="Surface"
+        fill="Soft"
+        before={<Badge variant="Critical" fill="Solid" size="200" />}
+        after={<Icon size="50" src={cords ? Icons.ChevronBottom : Icons.ChevronTop} />}
+        radii="Pill"
+        onClick={handleOpenMenu}
+      >
+        <Text className={css.LiveChipText} as="span" size="L400">
+          {count} Live
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
--- a/src/app/features/call-status/MemberGlance.tsx
+++ b/src/app/features/call-status/MemberGlance.tsx
@@ -0,0 +1,72 @@
+import { Box, config, Icon, Icons, Text } from 'folds';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import React from 'react';
+import { Room } from 'matrix-js-sdk';
+import { UserAvatar } from '../../components/user-avatar';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { StackedAvatar } from '../../components/stacked-avatar';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { getMouseEventCords } from '../../utils/dom';
+
+type MemberGlanceProps = {
+  room: Room;
+  members: CallMembership[];
+  max?: number;
+};
+export function MemberGlance({ room, members, max = 6 }: MemberGlanceProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const visibleMembers = members.slice(0, max);
+  const remainingCount = max && members.length > max ? members.length - max : 0;
+
+  return (
+    <Box alignItems="Center">
+      {visibleMembers.map((callMember) => {
+        const userId = callMember.sender;
+        if (!userId) return null;
+        const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+        const avatarMxc = getMemberAvatarMxc(room, userId);
+        const avatarUrl = avatarMxc
+          ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+          : undefined;
+
+        return (
+          <StackedAvatar
+            key={callMember.membershipID}
+            title={name}
+            as="button"
+            variant="Background"
+            size="200"
+            radii="Pill"
+            onClick={(evt) =>
+              openUserProfile(
+                room.roomId,
+                undefined,
+                userId,
+                getMouseEventCords(evt.nativeEvent),
+                'Top'
+              )
+            }
+          >
+            <UserAvatar
+              userId={userId}
+              src={avatarUrl}
+              alt={name}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </StackedAvatar>
+        );
+      })}
+      {remainingCount > 0 && (
+        <Text size="L400" style={{ paddingLeft: config.space.S100 }}>
+          +{remainingCount}
+        </Text>
+      )}
+    </Box>
+  );
+}
--- a/src/app/features/call-status/components.tsx
+++ b/src/app/features/call-status/components.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Line } from 'folds';
+import * as css from './styles.css';
+
+export function StatusDivider() {
+  return (
+    <Line variant="Background" size="300" direction="Vertical" className={css.ControlDivider} />
+  );
+}
--- a/src/app/features/call-status/index.ts
+++ b/src/app/features/call-status/index.ts
@@ -0,0 +1 @@
+export * from './CallStatus';
--- a/src/app/features/call-status/styles.css.ts
+++ b/src/app/features/call-status/styles.css.ts
@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const LiveChipText = style({
+  color: color.Critical.Main,
+});
+
+export const CallStatus = style([
+  {
+    padding: `${toRem(6)} ${config.space.S200}`,
+    borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
+  },
+]);
+
+export const ControlDivider = style({
+  height: toRem(16),
+});
--- a/src/app/features/call/CallMemberCard.tsx
+++ b/src/app/features/call/CallMemberCard.tsx
@@ -0,0 +1,121 @@
+import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import React, { useState } from 'react';
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { SequenceCard } from '../../components/sequence-card';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { useRoom } from '../../hooks/useRoom';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { UserAvatar } from '../../components/user-avatar';
+import { getMouseEventCords } from '../../utils/dom';
+import * as css from './styles.css';
+
+interface MemberWithMembershipData {
+  membershipData?: SessionMembershipData & {
+    'm.call.intent': 'video' | 'audio';
+  };
+}
+
+type CallMemberCardProps = {
+  member: CallMembership;
+};
+export function CallMemberCard({ member }: CallMemberCardProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const userId = member.sender;
+  if (!userId) return null;
+
+  const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarMxc = getMemberAvatarMxc(room, userId);
+  const avatarUrl = avatarMxc
+    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+    : undefined;
+
+  const audioOnly =
+    (member as unknown as MemberWithMembershipData).membershipData?.['m.call.intent'] === 'audio';
+
+  return (
+    <SequenceCard
+      as="button"
+      key={member.membershipID}
+      className={css.CallMemberCard}
+      variant="SurfaceVariant"
+      radii="500"
+      onClick={(evt: any) =>
+        openUserProfile(
+          room.roomId,
+          undefined,
+          userId,
+          getMouseEventCords(evt.nativeEvent),
+          'Right'
+        )
+      }
+    >
+      <Box grow="Yes" gap="300" alignItems="Center">
+        <Avatar size="200" radii="400">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            alt={name}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
+        <Box grow="Yes">
+          <Text size="L400" truncate>
+            {name}
+          </Text>
+        </Box>
+        {audioOnly && <Icon src={Icons.VideoCameraMute} size="100" />}
+      </Box>
+    </SequenceCard>
+  );
+}
+
+export function CallMemberRenderer({
+  members,
+  max = 4,
+}: {
+  members: CallMembership[];
+  max?: number;
+}) {
+  const [viewMore, setViewMore] = useState(false);
+
+  const truncatedMembers = viewMore ? members : members.slice(0, 4);
+  const remaining = members.length - truncatedMembers.length;
+
+  return (
+    <>
+      {truncatedMembers.map((member) => (
+        <CallMemberCard key={member.membershipID} member={member} />
+      ))}
+      {members.length > max && (
+        <SequenceCard
+          as="button"
+          className={css.CallMemberCard}
+          variant="SurfaceVariant"
+          radii="500"
+          onClick={() => setViewMore(!viewMore)}
+        >
+          <Box grow="Yes" gap="300" alignItems="Center">
+            {viewMore ? (
+              <Text size="L400" truncate>
+                Collapse
+              </Text>
+            ) : (
+              <Text size="L400" truncate>
+                {remaining === 0 ? `+${remaining} Other` : `+${remaining} Others`}
+              </Text>
+            )}
+          </Box>
+          <Icon src={viewMore ? Icons.ChevronTop : Icons.ChevronBottom} size="100" />
+        </SequenceCard>
+      )}
+    </>
+  );
+}
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -0,0 +1,105 @@
+import React, { useRef } from 'react';
+import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
+import { useCallEmbed, useCallJoined, useSyncCallEmbedPlacement } from '../../hooks/useCallEmbed';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { PrescreenControls } from './PrescreenControls';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useRoom } from '../../hooks/useRoom';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { StateEvent } from '../../../types/matrix/room';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { CallMemberRenderer } from './CallMemberCard';
+import * as css from './styles.css';
+
+function JoinMessage({ hasParticipant }: { hasParticipant?: boolean }) {
+  if (hasParticipant) return null;
+
+  return (
+    <Text style={{ margin: 'auto' }} size="L400" align="Center">
+      Voice chat’s empty — Be the first to hop in!
+    </Text>
+  );
+}
+
+function NoPermissionMessage() {
+  return (
+    <Text style={{ margin: 'auto' }} size="L400" align="Center">
+      You don&#39;t have permission to join!
+    </Text>
+  );
+}
+
+function AlreadyInCallMessage() {
+  return (
+    <Text style={{ margin: 'auto', color: color.Warning.Main }} size="L400" align="Center">
+      Already in another call — End the current call to join!
+    </Text>
+  );
+}
+
+export function CallView() {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const callViewRef = useRef<HTMLDivElement>(null);
+  useSyncCallEmbedPlacement(callViewRef);
+
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canJoin = permissions.event(StateEvent.GroupCallMemberPrefix, mx.getSafeUserId());
+
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const hasParticipant = callMembers.length > 0;
+
+  const callEmbed = useCallEmbed();
+  const callJoined = useCallJoined(callEmbed);
+  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
+
+  const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
+
+  return (
+    <Box
+      ref={callViewRef}
+      className={ContainerColor({ variant: 'Surface' })}
+      style={{ minWidth: toRem(280) }}
+      grow="Yes"
+    >
+      {!currentJoined && (
+        <Scroll variant="Surface" hideTrack>
+          <Box className={css.CallViewContent} alignItems="Center" justifyContent="Center">
+            <Box style={{ maxWidth: toRem(382), width: '100%' }} direction="Column" gap="100">
+              {hasParticipant && (
+                <Header size="300">
+                  <Box grow="Yes" alignItems="Center">
+                    <Text size="L400">Participant</Text>
+                  </Box>
+                  <Badge variant="Critical" fill="Solid" size="400">
+                    <Text as="span" size="L400" truncate>
+                      {callMembers.length} Live
+                    </Text>
+                  </Badge>
+                </Header>
+              )}
+              <CallMemberRenderer members={callMembers} />
+              <PrescreenControls canJoin={canJoin} />
+              <Header size="300">
+                {!inOtherCall &&
+                  (canJoin ? (
+                    <JoinMessage hasParticipant={hasParticipant} />
+                  ) : (
+                    <NoPermissionMessage />
+                  ))}
+                {inOtherCall && <AlreadyInCallMessage />}
+              </Header>
+            </Box>
+          </Box>
+        </Scroll>
+      )}
+    </Box>
+  );
+}
--- a/src/app/features/call/Controls.tsx
+++ b/src/app/features/call/Controls.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds';
+import { useAtom } from 'jotai';
+import * as css from './styles.css';
+import { callChatAtom } from '../../state/callEmbed';
+
+export function ControlDivider() {
+  return (
+    <Line variant="SurfaceVariant" size="300" direction="Vertical" className={css.ControlDivider} />
+  );
+}
+
+type MicrophoneButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Surface' : 'Warning'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type SoundButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Surface' : 'Warning'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon
+            size="400"
+            src={enabled ? Icons.Headphone : Icons.HeadphoneMute}
+            filled={!enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type VideoButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Camera' : 'Start Camera'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon
+            size="400"
+            src={enabled ? Icons.VideoCamera : Icons.VideoCameraMute}
+            filled={enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export function ChatButton() {
+  const [chat, setChat] = useAtom(callChatAtom);
+
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{chat ? 'Close Chat' : 'Open Chat'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={chat ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => setChat(!chat)}
+          outlined
+        >
+          <Icon size="400" src={Icons.Message} filled={chat} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
--- a/src/app/features/call/PrescreenControls.tsx
+++ b/src/app/features/call/PrescreenControls.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
+import { SequenceCard } from '../../components/sequence-card';
+import * as css from './styles.css';
+import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
+import { useCallEmbed, useCallJoined, useCallStart } from '../../hooks/useCallEmbed';
+import { useCallPreferences } from '../../state/hooks/callPreferences';
+import { CallControlState } from '../../plugins/call/CallControlState';
+
+type PrescreenControlsProps = {
+  canJoin?: boolean;
+};
+export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
+  const room = useRoom();
+  const callEmbed = useCallEmbed();
+  const callJoined = useCallJoined(callEmbed);
+  const direct = useIsDirectRoom();
+
+  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
+
+  const startCall = useCallStart(direct);
+  const joining = callEmbed?.roomId === room.roomId && !callJoined;
+
+  const disabled = inOtherCall || !canJoin;
+
+  const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
+    useCallPreferences();
+
+  return (
+    <SequenceCard
+      className={css.ControlCard}
+      variant="SurfaceVariant"
+      gap="400"
+      radii="500"
+      alignItems="Center"
+      justifyContent="SpaceBetween"
+      wrap="Wrap"
+    >
+      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
+        <MicrophoneButton enabled={microphone} onToggle={toggleMicrophone} />
+        <SoundButton enabled={sound} onToggle={toggleSound} />
+      </Box>
+      <ControlDivider />
+      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
+        <VideoButton enabled={video} onToggle={toggleVideo} />
+        <ChatButton />
+      </Box>
+      <Box grow="Yes" direction="Column">
+        <Button
+          variant={disabled ? 'Secondary' : 'Success'}
+          fill={disabled ? 'Soft' : 'Solid'}
+          onClick={() => startCall(room, new CallControlState(microphone, video, sound))}
+          disabled={disabled || joining}
+          before={
+            joining ? (
+              <Spinner variant="Success" fill="Solid" size="200" />
+            ) : (
+              <Icon src={Icons.Phone} size="200" filled />
+            )
+          }
+        >
+          <Text size="B400">Join</Text>
+        </Button>
+      </Box>
+    </SequenceCard>
+  );
+}
--- a/src/app/features/call/styles.css.ts
+++ b/src/app/features/call/styles.css.ts
@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const CallViewContent = style({
+  padding: config.space.S400,
+  paddingRight: 0,
+  minHeight: '100%',
+});
+
+export const ControlCard = style({
+  padding: config.space.S300,
+});
+
+export const ControlDivider = style({
+  height: toRem(24),
+});
+
+export const CallMemberCard = style({
+  padding: config.space.S300,
+});
--- a/src/app/features/common-settings/general/RoomJoinRules.tsx
+++ b/src/app/features/common-settings/general/RoomJoinRules.tsx
@@ -6,9 +6,8 @@ import { useAtomValue } from 'jotai';
 import {
  ExtendedJoinRules,
  JoinRulesSwitcher,
-  useRoomJoinRuleIcon,
+  useJoinRuleIcons,
  useRoomJoinRuleLabel,
-  useSpaceJoinRuleIcon,
 } from '../../../components/JoinRulesSwitcher';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
@@ -75,8 +74,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
    return r;
  }, [allowKnockRestricted, allowRestricted, allowKnock, space]);

-  const icons = useRoomJoinRuleIcon();
-  const spaceIcons = useSpaceJoinRuleIcon();
+  const icons = useJoinRuleIcons(room.getType());
  const labels = useRoomJoinRuleLabel();

  const [submitState, submit] = useAsyncCallback(
@@ -137,7 +135,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
        }
        after={
          <JoinRulesSwitcher
-            icons={room.isSpaceRoom() ? spaceIcons : icons}
+            icons={icons}
            labels={labels}
            rules={joinRules}
            value={rule}
--- a/src/app/features/common-settings/general/RoomProfile.tsx
+++ b/src/app/features/common-settings/general/RoomProfile.tsx
@@ -199,7 +199,7 @@ export function RoomProfileEdit({
              alt={name}
              renderFallback={() => (
                <RoomIcon
-                  space={room.isSpaceRoom()}
+                  roomType={room.getType()}
                  size="400"
                  joinRule={joinRule?.join_rule ?? JoinRule.Invite}
                  filled
@@ -342,7 +342,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
                  alt={name}
                  renderFallback={() => (
                    <RoomIcon
-                      space={room.isSpaceRoom()}
+                      roomType={room.getType()}
                      size="400"
                      joinRule={joinRule?.join_rule ?? JoinRule.Invite}
                      filled
--- a/src/app/features/create-room/CreateRoom.tsx
+++ b/src/app/features/create-room/CreateRoom.tsx
@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
+import { MatrixError, Room, JoinRule } from 'matrix-js-sdk';
 import {
  Box,
  Button,
@@ -33,24 +33,43 @@ import {
  createRoom,
  CreateRoomAliasInput,
  CreateRoomData,
-  CreateRoomKind,
-  CreateRoomKindSelector,
+  CreateRoomAccess,
+  CreateRoomAccessSelector,
  RoomVersionSelector,
  useAdditionalCreators,
+  CreateRoomType,
 } from '../../components/create-room';
+import { RoomType } from '../../../types/matrix/room';
+import { CreateRoomTypeSelector } from '../../components/create-room/CreateRoomTypeSelector';
+import { getRoomIconSrc } from '../../utils/room';

-const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.HashLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
-  return Icons.HashGlobe;
+const getCreateRoomAccessToIcon = (access: CreateRoomAccess, type?: CreateRoomType) => {
+  const isVoiceRoom = type === CreateRoomType.VoiceRoom;
+
+  let joinRule: JoinRule = JoinRule.Public;
+  if (access === CreateRoomAccess.Restricted) joinRule = JoinRule.Restricted;
+  if (access === CreateRoomAccess.Private) joinRule = JoinRule.Knock;
+
+  return getRoomIconSrc(Icons, isVoiceRoom ? RoomType.Call : undefined, joinRule);
+};
+
+const getCreateRoomTypeToIcon = (type: CreateRoomType) => {
+  if (type === CreateRoomType.VoiceRoom) return Icons.VolumeHigh;
+  return Icons.Hash;
 };

 type CreateRoomFormProps = {
-  defaultKind?: CreateRoomKind;
+  defaultAccess?: CreateRoomAccess;
+  defaultType?: CreateRoomType;
  space?: Room;
  onCreate?: (roomId: string) => void;
 };
-export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
+export function CreateRoomForm({
+  defaultAccess,
+  defaultType,
+  space,
+  onCreate,
+}: CreateRoomFormProps) {
  const mx = useMatrixClient();
  const alive = useAlive();

@@ -64,8 +83,9 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP

  const allowRestricted = space && restrictedSupported(selectedRoomVersion);

-  const [kind, setKind] = useState(
-    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
+  const [type, setType] = useState(defaultType ?? CreateRoomType.TextRoom);
+  const [access, setAccess] = useState(
+    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
  );
  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
@@ -75,13 +95,13 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
  const [knock, setKnock] = useState(false);
  const [advance, setAdvance] = useState(false);

-  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
  const allowKnockRestricted =
-    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+    access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);

  const handleRoomVersionChange = (version: string) => {
    if (!restrictedSupported(version)) {
-      setKind(CreateRoomKind.Private);
+      setAccess(CreateRoomAccess.Private);
    }
    selectRoomVersion(version);
  };
@@ -107,19 +127,23 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;

    if (!roomName) return;
-    const publicRoom = kind === CreateRoomKind.Public;
+    const publicRoom = access === CreateRoomAccess.Public;
    let roomKnock = false;
-    if (allowKnock && kind === CreateRoomKind.Private) {
+    if (allowKnock && access === CreateRoomAccess.Private) {
      roomKnock = knock;
    }
-    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+    if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
      roomKnock = knock;
    }

+    let roomType: RoomType | undefined;
+    if (type === CreateRoomType.VoiceRoom) roomType = RoomType.Call;
+
    create({
      version: selectedRoomVersion,
+      type: roomType,
      parent: space,
-      kind,
+      access,
      name: roomName,
      topic: roomTopic || undefined,
      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -136,21 +160,32 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP

  return (
    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      {!space && (
+        <Box direction="Column" gap="100">
+          <Text size="L400">Type</Text>
+          <CreateRoomTypeSelector
+            value={type}
+            onSelect={setType}
+            disabled={disabled}
+            getIcon={getCreateRoomTypeToIcon}
+          />
+        </Box>
+      )}
      <Box direction="Column" gap="100">
        <Text size="L400">Access</Text>
-        <CreateRoomKindSelector
-          value={kind}
-          onSelect={setKind}
+        <CreateRoomAccessSelector
+          value={access}
+          onSelect={setAccess}
          canRestrict={allowRestricted}
          disabled={disabled}
-          getIcon={getCreateRoomKindToIcon}
+          getIcon={(roomAccess) => getCreateRoomAccessToIcon(roomAccess, type)}
        />
      </Box>
      <Box shrink="No" direction="Column" gap="100">
        <Text size="L400">Name</Text>
        <Input
          required
-          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
+          before={<Icon size="100" src={getCreateRoomAccessToIcon(access, type)} />}
          name="nameInput"
          autoFocus
          size="500"
@@ -171,7 +206,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
        />
      </Box>

-      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
+      {access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}

      <Box shrink="No" direction="Column" gap="100">
        <Box gap="200" alignItems="End">
@@ -201,7 +236,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
            />
          </SequenceCard>
        )}
-        {kind !== CreateRoomKind.Public && (
+        {access !== CreateRoomAccess.Public && (
          <>
            <SequenceCard
              style={{ padding: config.space.S300 }}
--- a/src/app/features/create-room/CreateRoomModal.tsx
+++ b/src/app/features/create-room/CreateRoomModal.tsx
@@ -23,12 +23,13 @@ import {
 } from '../../state/hooks/createRoomModal';
 import { CreateRoomModalState } from '../../state/createRoomModal';
 import { stopPropagation } from '../../utils/keyboard';
+import { CreateRoomType } from '../../components/create-room/types';

 type CreateRoomModalProps = {
  state: CreateRoomModalState;
 };
 function CreateRoomModal({ state }: CreateRoomModalProps) {
-  const { spaceId } = state;
+  const { spaceId, type } = state;
  const closeDialog = useCloseCreateRoomModal();

  const allJoinedRooms = useAllJoinedRoomsSet();
@@ -57,7 +58,9 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                  }}
                >
                  <Box grow="Yes">
-                    <Text size="H4">New Room</Text>
+                    <Text size="H4">
+                      {type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
+                    </Text>
                  </Box>
                  <Box shrink="No">
                    <IconButton size="300" radii="300" onClick={closeDialog}>
@@ -74,7 +77,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                    direction="Column"
                    gap="500"
                  >
-                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                    <CreateRoomForm space={space} onCreate={closeDialog} defaultType={type} />
                  </Box>
                </Scroll>
              </Box>
--- a/src/app/features/create-space/CreateSpace.tsx
+++ b/src/app/features/create-space/CreateSpace.tsx
@@ -33,25 +33,25 @@ import {
  createRoom,
  CreateRoomAliasInput,
  CreateRoomData,
-  CreateRoomKind,
-  CreateRoomKindSelector,
+  CreateRoomAccess,
+  CreateRoomAccessSelector,
  RoomVersionSelector,
  useAdditionalCreators,
 } from '../../components/create-room';
 import { RoomType } from '../../../types/matrix/room';

-const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.SpaceLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Space;
+const getCreateSpaceAccessToIcon = (access: CreateRoomAccess) => {
+  if (access === CreateRoomAccess.Private) return Icons.SpaceLock;
+  if (access === CreateRoomAccess.Restricted) return Icons.Space;
  return Icons.SpaceGlobe;
 };

 type CreateSpaceFormProps = {
-  defaultKind?: CreateRoomKind;
+  defaultAccess?: CreateRoomAccess;
  space?: Room;
  onCreate?: (roomId: string) => void;
 };
-export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFormProps) {
+export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceFormProps) {
  const mx = useMatrixClient();
  const alive = useAlive();

@@ -65,8 +65,8 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor

  const allowRestricted = space && restrictedSupported(selectedRoomVersion);

-  const [kind, setKind] = useState(
-    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
+  const [access, setAccess] = useState(
+    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
  );

  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
@@ -76,13 +76,13 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
  const [knock, setKnock] = useState(false);
  const [advance, setAdvance] = useState(false);

-  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
  const allowKnockRestricted =
-    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+    access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);

  const handleRoomVersionChange = (version: string) => {
    if (!restrictedSupported(version)) {
-      setKind(CreateRoomKind.Private);
+      setAccess(CreateRoomAccess.Private);
    }
    selectRoomVersion(version);
  };
@@ -108,12 +108,12 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;

    if (!roomName) return;
-    const publicRoom = kind === CreateRoomKind.Public;
+    const publicRoom = access === CreateRoomAccess.Public;
    let roomKnock = false;
-    if (allowKnock && kind === CreateRoomKind.Private) {
+    if (allowKnock && access === CreateRoomAccess.Private) {
      roomKnock = knock;
    }
-    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+    if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
      roomKnock = knock;
    }

@@ -121,7 +121,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
      version: selectedRoomVersion,
      type: RoomType.Space,
      parent: space,
-      kind,
+      access,
      name: roomName,
      topic: roomTopic || undefined,
      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -139,19 +139,19 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
    <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}
+        <CreateRoomAccessSelector
+          value={access}
+          onSelect={setAccess}
          canRestrict={allowRestricted}
          disabled={disabled}
-          getIcon={getCreateSpaceKindToIcon}
+          getIcon={getCreateSpaceAccessToIcon}
        />
      </Box>
      <Box shrink="No" direction="Column" gap="100">
        <Text size="L400">Name</Text>
        <Input
          required
-          before={<Icon size="100" src={getCreateSpaceKindToIcon(kind)} />}
+          before={<Icon size="100" src={getCreateSpaceAccessToIcon(access)} />}
          name="nameInput"
          autoFocus
          size="500"
@@ -172,7 +172,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
        />
      </Box>

-      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
+      {access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}

      <Box shrink="No" direction="Column" gap="100">
        <Box gap="200" alignItems="End">
@@ -202,7 +202,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
            />
          </SequenceCard>
        )}
-        {kind !== CreateRoomKind.Public && advance && (allowKnock || allowKnockRestricted) && (
+        {access !== CreateRoomAccess.Public && advance && (allowKnock || allowKnockRestricted) && (
          <SequenceCard
            style={{ padding: config.space.S300 }}
            variant="SurfaceVariant"
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -165,7 +165,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
            <Box shrink="No">
              <BackRouteHandler>
                {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton fill="None" onClick={onBack}>
                    <Icon src={Icons.ArrowLeft} />
                  </IconButton>
                )}
@@ -218,7 +218,11 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
              }
            >
              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                <IconButton
+                  fill="None"
+                  ref={triggerRef}
+                  onClick={() => setPeopleDrawer((drawer) => !drawer)}
+                >
                  <Icon size="400" src={Icons.User} />
                </IconButton>
              )}
@@ -235,7 +239,12 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
            }
          >
            {(triggerRef) => (
-              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+              <IconButton
+                fill="None"
+                onClick={handleOpenMenu}
+                ref={triggerRef}
+                aria-pressed={!!menuAnchor}
+              >
                <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
              </IconButton>
            )}
--- a/src/app/features/lobby/RoomItem.tsx
+++ b/src/app/features/lobby/RoomItem.tsx
@@ -175,6 +175,7 @@ function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProf

 type RoomProfileProps = {
  roomId: string;
+  roomType?: string;
  name: string;
  topic?: string;
  avatarUrl?: string;
@@ -185,6 +186,7 @@ type RoomProfileProps = {
 };
 function RoomProfile({
  roomId,
+  roomType,
  name,
  topic,
  avatarUrl,
@@ -200,9 +202,7 @@ function RoomProfile({
          roomId={roomId}
          src={avatarUrl}
          alt={name}
-          renderFallback={() => (
-            <RoomIcon size="300" joinRule={joinRule ?? JoinRule.Restricted} filled />
-          )}
+          renderFallback={() => <RoomIcon size="300" joinRule={joinRule} roomType={roomType} />}
        />
      </Avatar>
      <Box grow="Yes" direction="Column">
@@ -338,6 +338,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
              {(localSummary) => (
                <RoomProfile
                  roomId={roomId}
+                  roomType={localSummary.roomType}
                  name={localSummary.name}
                  topic={localSummary.topic}
                  avatarUrl={
@@ -396,6 +397,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
              {summary && (
                <RoomProfile
                  roomId={roomId}
+                  roomType={summary.room_type}
                  name={summary.name || summary.canonical_alias || roomId}
                  topic={summary.topic}
                  avatarUrl={
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -36,6 +36,8 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
 import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
 import { AddExistingModal } from '../add-existing';
+import { CreateRoomType } from '../../components/create-room/types';
+import { BetaNoticeBadge } from '../../components/BetaNoticeBadge';

 function SpaceProfileLoading() {
  return (
@@ -249,8 +251,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
    setCords(evt.currentTarget.getBoundingClientRect());
  };

-  const handleCreateRoom = () => {
-    openCreateRoomModal(item.roomId);
+  const handleCreateRoom = (type?: CreateRoomType) => {
+    openCreateRoomModal(item.roomId, type);
    setCords(undefined);
  };

@@ -281,9 +283,19 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
              radii="300"
              variant="Primary"
              fill="None"
-              onClick={handleCreateRoom}
+              onClick={() => handleCreateRoom(CreateRoomType.TextRoom)}
            >
-              <Text size="T300">New Room</Text>
+              <Text size="T300">Chat Room</Text>
+            </MenuItem>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={() => handleCreateRoom(CreateRoomType.VoiceRoom)}
+              after={<BetaNoticeBadge />}
+            >
+              <Text size="T300">Voice Room</Text>
            </MenuItem>
            <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
              <Text size="T300">Existing Room</Text>
--- a/src/app/features/message-search/SearchFilters.tsx
+++ b/src/app/features/message-search/SearchFilters.tsx
@@ -29,7 +29,7 @@ import { SearchOrderBy } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { joinRuleToIconSrc } from '../../utils/room';
+import { getRoomIconSrc } from '../../utils/room';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
 import {
  SearchItemStrGetter,
@@ -274,9 +274,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                            before={
                              <Icon
                                size="50"
-                                src={
-                                  joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash
-                                }
+                                src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())}
                              />
                            }
                          >
@@ -392,10 +390,7 @@ export function SearchFilters({
              onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))}
              radii="Pill"
              before={
-                <Icon
-                  size="50"
-                  src={joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash}
-                />
+                <Icon size="50" src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())} />
              }
              after={<Icon size="50" src={Icons.Cross} />}
            >
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -203,7 +203,12 @@ export function SearchResultGroup({
              src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
              alt={room.name}
              renderFallback={() => (
-                <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
+                <RoomIcon
+                  size="50"
+                  roomType={room.getType()}
+                  joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                  filled
+                />
              )}
            />
          </Avatar>
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -19,6 +19,7 @@ import {
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
+import { useAtom, useAtomValue } from 'jotai';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -51,6 +52,12 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { useRoomName } from '../../hooks/useRoomMeta';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
+import { callChatAtom } from '../../state/callEmbed';
+import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
+import { CallControlState } from '../../plugins/call/CallControlState';

 type RoomNavItemMenuProps = {
  room: Room;
@@ -209,6 +216,24 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
  }
 );

+function CallChatToggle() {
+  const [chat, setChat] = useAtom(callChatAtom);
+
+  return (
+    <IconButton
+      onClick={() => setChat(!chat)}
+      aria-pressed={chat}
+      aria-label="Toggle Chat"
+      variant="Background"
+      fill="None"
+      size="300"
+      radii="300"
+    >
+      <Icon size="50" src={Icons.Message} filled={chat} />
+    </IconButton>
+  );
+}
+
 type RoomNavItemProps = {
  room: Room;
  selected: boolean;
@@ -236,6 +261,8 @@ export function RoomNavItem({
    (receipt) => receipt.userId !== mx.getUserId()
  );

+  const roomName = useRoomName(room);
+
  const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
    evt.preventDefault();
    setMenuAnchor({
@@ -251,6 +278,23 @@ export function RoomNavItem({
  };

  const optionsVisible = hover || !!menuAnchor;
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const startCall = useCallStart(direct);
+  const callEmbed = useCallEmbed();
+  const callPref = useAtomValue(useCallPreferencesAtom());
+
+  const handleStartCall: MouseEventHandler<HTMLAnchorElement> = (evt) => {
+    // Do not join if already in call
+    if (callEmbed) {
+      return;
+    }
+    // Start call in second click
+    if (selected) {
+      evt.preventDefault();
+      startCall(room, new CallControlState(callPref.microphone, callPref.video, callPref.sound));
+    }
+  };

  return (
    <NavItem
@@ -263,7 +307,7 @@ export function RoomNavItem({
      {...hoverProps}
      {...focusWithinProps}
    >
-      <NavLink to={linkPath}>
+      <NavLink to={linkPath} onClick={room.isCallRoom() ? handleStartCall : undefined}>
        <NavItemContent>
          <Box as="span" grow="Yes" alignItems="Center" gap="200">
            <Avatar size="200" radii="400">
@@ -275,25 +319,28 @@ export function RoomNavItem({
                      ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
                      : getRoomAvatarUrl(mx, room, 96, useAuthentication)
                  }
-                  alt={room.name}
+                  alt={roomName}
                  renderFallback={() => (
                    <Text as="span" size="H6">
-                      {nameInitials(room.name)}
+                      {nameInitials(roomName)}
                    </Text>
                  )}
                />
              ) : (
                <RoomIcon
-                  style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                  style={{
+                    opacity: unread ? config.opacity.P500 : config.opacity.P300,
+                  }}
                  filled={selected}
                  size="100"
                  joinRule={room.getJoinRule()}
+                  roomType={room.getType()}
                />
              )}
            </Avatar>
            <Box as="span" grow="Yes">
              <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
-                {room.name}
+                {roomName}
              </Text>
            </Box>
            {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
@@ -307,14 +354,30 @@ export function RoomNavItem({
              </UnreadBadgeCenter>
            )}
            {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+              <Icon
+                size="50"
+                src={getRoomNotificationModeIcon(notificationMode)}
+                aria-label={notificationMode}
+              />
+            )}
+            {room.isCallRoom() && callMembers.length > 0 && (
+              <Badge variant="Critical" fill="Solid" size="400">
+                <Text as="span" size="L400" truncate>
+                  {callMembers.length} Live
+                </Text>
+              </Badge>
            )}
          </Box>
        </NavItemContent>
      </NavLink>
      {optionsVisible && (
        <NavItemOptions>
+          {selected && (callEmbed?.roomId === room.roomId || room.isCallRoom()) && (
+            <CallChatToggle />
+          )}
          <PopOut
+            id={`menu-${room.roomId}`}
+            aria-expanded={!!menuAnchor}
            anchor={menuAnchor}
            offset={menuAnchor?.width === 0 ? 0 : undefined}
            alignOffset={menuAnchor?.width === 0 ? 0 : -5}
@@ -343,6 +406,8 @@ export function RoomNavItem({
            <IconButton
              onClick={handleOpenMenu}
              aria-pressed={!!menuAnchor}
+              aria-controls={`menu-${room.roomId}`}
+              aria-label="More Options"
              variant="Background"
              fill="None"
              size="300"
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -104,6 +104,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
                    renderFallback={() => (
                      <RoomIcon
                        size="50"
+                        roomType={room.getType()}
                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
                        filled
                      />
--- a/src/app/features/room-settings/permissions/Permissions.tsx
+++ b/src/app/features/room-settings/permissions/Permissions.tsx
@@ -23,7 +23,7 @@ export function Permissions({ requestClose }: PermissionsProps) {

  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
-  const permissionGroups = usePermissionGroups();
+  const permissionGroups = usePermissionGroups(room.isCallRoom());

  const [powerEditor, setPowerEditor] = useState(false);

--- a/src/app/features/room-settings/permissions/usePermissionItems.ts
+++ b/src/app/features/room-settings/permissions/usePermissionItems.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
 import { PermissionGroup } from '../../common-settings/permissions';

-export const usePermissionGroups = (): PermissionGroup[] => {
+export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
  const groups: PermissionGroup[] = useMemo(() => {
    const messagesGroup: PermissionGroup = {
      name: 'Messages',
@@ -46,6 +46,19 @@ export const usePermissionGroups = (): PermissionGroup[] => {
      ],
    };

+    const callSettingsGroup: PermissionGroup = {
+      name: 'Calls',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.GroupCallMemberPrefix,
+          },
+          name: 'Join Call',
+        },
+      ],
+    };
+
    const moderationGroup: PermissionGroup = {
      name: 'Moderation',
      items: [
@@ -203,12 +216,13 @@ export const usePermissionGroups = (): PermissionGroup[] => {

    return [
      messagesGroup,
+      ...(isCallRoom ? [callSettingsGroup] : []),
      moderationGroup,
      roomOverviewGroup,
      roomSettingsGroup,
      otherSettingsGroup,
    ];
-  }, []);
+  }, [isCallRoom]);

  return groups;
 };
--- a/src/app/features/room/CallChatView.tsx
+++ b/src/app/features/room/CallChatView.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSetAtom } from 'jotai';
+import { useParams } from 'react-router-dom';
+import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds';
+import { Page, PageHeader } from '../../components/page';
+import { callChatAtom } from '../../state/callEmbed';
+import { RoomView } from './RoomView';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+
+export function CallChatView() {
+  const { eventId } = useParams();
+  const setChat = useSetAtom(callChatAtom);
+  const screenSize = useScreenSizeContext();
+
+  const handleClose = () => setChat(false);
+
+  return (
+    <Page
+      style={{
+        width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
+        flexShrink: 0,
+        flexGrow: 0,
+      }}
+    >
+      <PageHeader>
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes">
+            <Text size="H5" truncate>
+              Chat
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center">
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Close</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes" direction="Column">
+        <RoomView eventId={eventId} />
+      </Box>
+    </Page>
+  );
+}
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
+import { useAtomValue } from 'jotai';
 import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
@@ -13,6 +14,10 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { CallView } from '../call/CallView';
+import { RoomViewHeader } from './RoomViewHeader';
+import { callChatAtom } from '../../state/callEmbed';
+import { CallChatView } from './CallChatView';

 export function Room() {
  const { eventId } = useParams();
@@ -24,6 +29,7 @@ export function Room() {
  const screenSize = useScreenSizeContext();
  const powerLevels = usePowerLevels(room);
  const members = useRoomMembers(mx, room.roomId);
+  const chat = useAtomValue(callChatAtom);

  useKeyDown(
    window,
@@ -37,11 +43,37 @@ export function Room() {
    )
  );

+  const callView = room.isCallRoom();
+
  return (
    <PowerLevelsContextProvider value={powerLevels}>
      <Box grow="Yes">
-        <RoomView room={room} eventId={eventId} />
-        {screenSize === ScreenSize.Desktop && isDrawer && (
+        {callView && (screenSize === ScreenSize.Desktop || !chat) && (
+          <Box grow="Yes" direction="Column">
+            <RoomViewHeader callView />
+            <Box grow="Yes">
+              <CallView />
+            </Box>
+          </Box>
+        )}
+        {!callView && (
+          <Box grow="Yes" direction="Column">
+            <RoomViewHeader />
+            <Box grow="Yes">
+              <RoomView eventId={eventId} />
+            </Box>
+          </Box>
+        )}
+
+        {callView && chat && (
+          <>
+            {screenSize === ScreenSize.Desktop && (
+              <Line variant="Background" direction="Vertical" size="300" />
+            )}
+            <CallChatView />
+          </>
+        )}
+        {!callView && screenSize === ScreenSize.Desktop && isDrawer && (
          <>
            <Line variant="Background" direction="Vertical" size="300" />
            <MembersDrawer key={room.roomId} room={room} members={members} />
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -27,6 +27,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
+import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
@@ -1469,6 +1470,51 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          </Event>
        );
      },
+      [StateEvent.GroupCallMemberPrefix]: (mEventId, mEvent, item) => {
+        const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderId = mEvent.getSender() ?? '';
+        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
+
+        const callJoined = mEvent.getContent<SessionMembershipData>().application;
+
+        const timeJSX = (
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
+        );
+
+        return (
+          <Event
+            key={mEvent.getId()}
+            data-message-item={item}
+            data-message-id={mEventId}
+            room={room}
+            mEvent={mEvent}
+            highlight={highlighted}
+            messageSpacing={messageSpacing}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
+            hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
+          >
+            <EventContent
+              messageLayout={messageLayout}
+              time={timeJSX}
+              iconSrc={callJoined ? Icons.Phone : Icons.PhoneDown}
+              content={
+                <Box grow="Yes" direction="Column">
+                  <Text size="T300" priority="300">
+                    <b>{senderName}</b>
+                    {callJoined ? ' joined the call' : ' ended the call'}
+                  </Text>
+                </Box>
+              }
+            />
+          </Event>
+        );
+      },
    },
    (mEventId, mEvent, item) => {
      if (!showHiddenEvents) return null;
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { Box, Text, config } from 'folds';
-import { EventType, Room } from 'matrix-js-sdk';
+import { EventType } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
@@ -15,13 +15,13 @@ import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
-import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoom } from '../../hooks/useRoom';

 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -30,10 +30,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
    return false;
  }

-  // do not focus on F keys
  if (FN_KEYS_REGEX.test(code)) return false;

-  // do not focus on numlock/scroll lock
  if (
    code.startsWith('OS') ||
    code.startsWith('Meta') ||
@@ -56,12 +54,13 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
  return true;
 };

-export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
+export function RoomView({ eventId }: { eventId?: string }) {
  const roomInputRef = useRef<HTMLDivElement>(null);
  const roomViewRef = useRef<HTMLDivElement>(null);

  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');

+  const room = useRoom();
  const { roomId } = room;
  const editor = useEditor();

@@ -93,7 +92,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {

  return (
    <Page ref={roomViewRef}>
-      <RoomViewHeader />
      <Box grow="Yes" direction="Column">
        <RoomTimeline
          key={roomId}
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -23,9 +23,8 @@ import {
  Spinner,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
-import { JoinRule, Room } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
-
+import { Room } from 'matrix-js-sdk';
+import { useAtom } from 'jotai';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -33,7 +32,7 @@ import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoom } from '../../hooks/useRoom';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
@@ -48,7 +47,6 @@ import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
@@ -69,6 +67,9 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { callChatAtom } from '../../state/callEmbed';
+import { RoomSettingsPage } from '../../state/roomSettings';

 type RoomMenuProps = {
  room: Room;
@@ -254,7 +255,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
  );
 });

-export function RoomViewHeader() {
+export function RoomViewHeader({ callView }: { callView?: boolean }) {
  const navigate = useNavigate();
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
@@ -263,12 +264,14 @@ export function RoomViewHeader() {
  const space = useSpaceOptionally();
  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
  const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
-  const mDirects = useAtomValue(mDirectAtom);
+  const direct = useIsDirectRoom();
+
+  const [chat, setChat] = useAtom(callChatAtom);

  const pinnedEvents = useRoomPinnedEvents(room);
  const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
-  const ecryptedRoom = !!encryptionEvent;
-  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
+  const encryptedRoom = !!encryptionEvent;
+  const avatarMxc = useRoomAvatar(room, direct);
  const name = useRoomName(room);
  const topic = useRoomTopic(room);
  const avatarUrl = avatarMxc
@@ -295,14 +298,27 @@ export function RoomViewHeader() {
    setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
  };

+  const openSettings = useOpenRoomSettings();
+  const parentSpace = useSpaceOptionally();
+  const handleMemberToggle = () => {
+    if (callView) {
+      openSettings(room.roomId, parentSpace?.roomId, RoomSettingsPage.MembersPage);
+      return;
+    }
+    setPeopleDrawer(!peopleDrawer);
+  };
+
  return (
-    <PageHeader balance={screenSize === ScreenSize.Mobile}>
+    <PageHeader
+      className={ContainerColor({ variant: 'Surface' })}
+      balance={screenSize === ScreenSize.Mobile}
+    >
      <Box grow="Yes" gap="300">
        {screenSize === ScreenSize.Mobile && (
          <BackRouteHandler>
            {(onBack) => (
              <Box shrink="No" alignItems="Center">
-                <IconButton onClick={onBack}>
+                <IconButton fill="None" onClick={onBack}>
                  <Icon src={Icons.ArrowLeft} />
                </IconButton>
              </Box>
@@ -317,11 +333,7 @@ export function RoomViewHeader() {
                src={avatarUrl}
                alt={name}
                renderFallback={() => (
-                  <RoomIcon
-                    size="200"
-                    joinRule={room.getJoinRule() ?? JoinRule.Restricted}
-                    filled
-                  />
+                  <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} />
                )}
              />
            </Avatar>
@@ -369,8 +381,9 @@ export function RoomViewHeader() {
            )}
          </Box>
        </Box>
+
        <Box shrink="No">
-          {!ecryptedRoom && (
+          {!encryptedRoom && (
            <TooltipProvider
              position="Bottom"
              offset={4}
@@ -381,7 +394,7 @@ export function RoomViewHeader() {
              }
            >
              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                <IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
                  <Icon size="400" src={Icons.Search} />
                </IconButton>
              )}
@@ -398,6 +411,7 @@ export function RoomViewHeader() {
          >
            {(triggerRef) => (
              <IconButton
+                fill="None"
                style={{ position: 'relative' }}
                onClick={handleOpenPinMenu}
                ref={triggerRef}
@@ -443,6 +457,7 @@ export function RoomViewHeader() {
              </FocusTrap>
            }
          />
+
          {screenSize === ScreenSize.Desktop && (
            <TooltipProvider
              position="Bottom"
@@ -454,12 +469,31 @@ export function RoomViewHeader() {
              }
            >
              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                <IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle}>
                  <Icon size="400" src={Icons.User} />
                </IconButton>
              )}
            </TooltipProvider>
          )}
+
+          {callView && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Chat</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton fill="None" ref={triggerRef} onClick={() => setChat(!chat)}>
+                  <Icon size="400" src={Icons.Message} filled={chat} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+
          <TooltipProvider
            position="Bottom"
            align="End"
@@ -471,7 +505,12 @@ export function RoomViewHeader() {
            }
          >
            {(triggerRef) => (
-              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+              <IconButton
+                fill="None"
+                onClick={handleOpenMenu}
+                ref={triggerRef}
+                aria-pressed={!!menuAnchor}
+              >
                <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
              </IconButton>
            )}
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -373,7 +373,7 @@ export function Search({ requestClose }: SearchProps) {
                                <RoomIcon
                                  size="100"
                                  joinRule={room.getJoinRule()}
-                                  space={room.isSpaceRoom()}
+                                  roomType={room.getType()}
                                />
                              )}
                            </Avatar>
--- a/src/app/features/space-settings/SpaceSettings.tsx
+++ b/src/app/features/space-settings/SpaceSettings.tsx
@@ -103,7 +103,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
                    alt={roomName}
                    renderFallback={() => (
                      <RoomIcon
-                        space
+                        roomType={room.getType()}
                        size="50"
                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
                        filled
--- a/src/app/hooks/useCall.ts
+++ b/src/app/hooks/useCall.ts
@@ -0,0 +1,55 @@
+import { Room } from 'matrix-js-sdk';
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { useEffect, useState } from 'react';
+import { MatrixRTCSessionManagerEvents } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSessionManager';
+import { useMatrixClient } from './useMatrixClient';
+
+export const useCallSession = (room: Room): MatrixRTCSession => {
+  const mx = useMatrixClient();
+
+  const [session, setSession] = useState(mx.matrixRTC.getRoomSession(room));
+
+  useEffect(() => {
+    const start = (roomId: string) => {
+      if (roomId !== room.roomId) return;
+      setSession(mx.matrixRTC.getRoomSession(room));
+    };
+    const end = (roomId: string) => {
+      if (roomId !== room.roomId) return;
+      setSession(mx.matrixRTC.getRoomSession(room));
+    };
+    mx.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionStarted, start);
+    mx.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionEnded, end);
+    return () => {
+      mx.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionStarted, start);
+      mx.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionEnded, end);
+    };
+  }, [mx, room]);
+
+  return session;
+};
+
+export const useCallMembers = (room: Room, session: MatrixRTCSession): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>(
+    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription)
+  );
+
+  useEffect(() => {
+    const updateMemberships = () => {
+      setMemberships(MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription));
+    };
+
+    updateMemberships();
+
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [session, room]);
+
+  return memberships;
+};
--- a/src/app/hooks/useCallEmbed.ts
+++ b/src/app/hooks/useCallEmbed.ts
@@ -0,0 +1,130 @@
+import { createContext, RefObject, useCallback, useContext, useEffect, useState } from 'react';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { MatrixClient, Room } from 'matrix-js-sdk';
+import { useSetAtom } from 'jotai';
+import {
+  CallEmbed,
+  ElementCallThemeKind,
+  ElementWidgetActions,
+  useClientWidgetApiEvent,
+} from '../plugins/call';
+import { useMatrixClient } from './useMatrixClient';
+import { ThemeKind, useTheme } from './useTheme';
+import { callEmbedAtom } from '../state/callEmbed';
+import { useResizeObserver } from './useResizeObserver';
+import { CallControlState } from '../plugins/call/CallControlState';
+
+const CallEmbedContext = createContext<CallEmbed | undefined>(undefined);
+
+export const CallEmbedContextProvider = CallEmbedContext.Provider;
+
+export const useCallEmbed = (): CallEmbed | undefined => {
+  const callEmbed = useContext(CallEmbedContext);
+
+  return callEmbed;
+};
+
+const CallEmbedRefContext = createContext<RefObject<HTMLDivElement> | undefined>(undefined);
+export const CallEmbedRefContextProvider = CallEmbedRefContext.Provider;
+export const useCallEmbedRef = (): RefObject<HTMLDivElement> => {
+  const ref = useContext(CallEmbedRefContext);
+  if (!ref) {
+    throw new Error('CallEmbedRef is not provided!');
+  }
+  return ref;
+};
+
+export const createCallEmbed = (
+  mx: MatrixClient,
+  room: Room,
+  dm: boolean,
+  themeKind: ElementCallThemeKind,
+  container: HTMLElement,
+  controlState?: CallControlState
+): CallEmbed => {
+  const rtcSession = mx.matrixRTC.getRoomSession(room);
+  const ongoing =
+    MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;
+
+  const intent = CallEmbed.getIntent(dm, ongoing);
+  const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
+  const embed = new CallEmbed(mx, room, widget, container, controlState);
+
+  return embed;
+};
+
+export const useCallStart = (dm = false) => {
+  const mx = useMatrixClient();
+  const theme = useTheme();
+  const setCallEmbed = useSetAtom(callEmbedAtom);
+  const callEmbedRef = useCallEmbedRef();
+
+  const startCall = useCallback(
+    (room: Room, controlState?: CallControlState) => {
+      const container = callEmbedRef.current;
+      if (!container) {
+        throw new Error('Failed to start call, No embed container element found!');
+      }
+      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, controlState);
+
+      setCallEmbed(callEmbed);
+    },
+    [mx, dm, theme, setCallEmbed, callEmbedRef]
+  );
+
+  return startCall;
+};
+
+export const useCallJoined = (embed?: CallEmbed): boolean => {
+  const [joined, setJoined] = useState(embed?.joined ?? false);
+
+  useClientWidgetApiEvent(
+    embed?.call,
+    ElementWidgetActions.JoinCall,
+    useCallback(() => {
+      setJoined(true);
+    }, [])
+  );
+
+  useEffect(() => {
+    if (!embed) {
+      setJoined(false);
+    }
+  }, [embed]);
+
+  return joined;
+};
+
+export const useCallHangupEvent = (embed: CallEmbed, callback: () => void) => {
+  useClientWidgetApiEvent(embed.call, ElementWidgetActions.HangupCall, callback);
+};
+
+export const useCallThemeSync = (embed: CallEmbed) => {
+  const theme = useTheme();
+
+  useEffect(() => {
+    const name: ElementCallThemeKind = theme.kind === ThemeKind.Dark ? 'dark' : 'light';
+
+    embed.setTheme(name);
+  }, [theme.kind, embed]);
+};
+
+export const useSyncCallEmbedPlacement = (containerViewRef: RefObject<HTMLDivElement>): void => {
+  const callEmbedRef = useCallEmbedRef();
+
+  const syncCallEmbedPlacement = useCallback(() => {
+    const embedEl = callEmbedRef.current;
+    const container = containerViewRef.current;
+    if (!embedEl || !container) return;
+
+    embedEl.style.top = `${container.offsetTop}px`;
+    embedEl.style.left = `${container.offsetLeft}px`;
+    embedEl.style.width = `${container.clientWidth}px`;
+    embedEl.style.height = `${container.clientHeight}px`;
+  }, [callEmbedRef, containerViewRef]);
+
+  useResizeObserver(
+    syncCallEmbedPlacement,
+    useCallback(() => containerViewRef.current, [containerViewRef])
+  );
+};
--- a/src/app/hooks/useRoomMeta.ts
+++ b/src/app/hooks/useRoomMeta.ts
@@ -20,6 +20,8 @@ export const useRoomName = (room: Room): string => {
  const [name, setName] = useState(room.name);

  useEffect(() => {
+    setName(room.name);
+
    const handleRoomNameChange: RoomEventHandlerMap[RoomEvent.Name] = () => {
      setName(room.name);
    };
--- a/src/app/hooks/useStateEvents.ts
+++ b/src/app/hooks/useStateEvents.ts
@@ -1,28 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { Room } from 'matrix-js-sdk';
-import { StateEvent } from '../../types/matrix/room';
-import { useForceUpdate } from './useForceUpdate';
-import { useStateEventCallback } from './useStateEventCallback';
-import { getStateEvents } from '../utils/room';
-
-export const useStateEvents = (room: Room, eventType: StateEvent) => {
-  const [updateCount, forceUpdate] = useForceUpdate();
-
-  useStateEventCallback(
-    room.client,
-    useCallback(
-      (event) => {
-        if (event.getRoomId() === room.roomId && event.getType() === eventType) {
-          forceUpdate();
-        }
-      },
-      [room, eventType, forceUpdate]
-    )
-  );
-
-  return useMemo(
-    () => getStateEvents(room, eventType),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [room, eventType, updateCount]
-  );
-};
--- a/src/app/pages/CallStatusRenderer.tsx
+++ b/src/app/pages/CallStatusRenderer.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { useCallEmbed } from '../hooks/useCallEmbed';
+import { CallStatus } from '../features/call-status';
+
+export function CallStatusRenderer() {
+  const callEmbed = useCallEmbed();
+
+  if (!callEmbed) return null;
+
+  return <CallStatus callEmbed={callEmbed} />;
+}
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -68,6 +68,8 @@ import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
 import { SearchModalRenderer } from '../features/search';
 import { getFallbackSession } from '../state/sessions';
+import { CallStatusRenderer } from './CallStatusRenderer';
+import { CallEmbedProvider } from '../components/CallEmbedProvider';

 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
  const { hashRouter } = clientConfig;
@@ -124,6 +126,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                <ClientRoomsNotificationPreferences>
                  <ClientBindAtoms>
                    <ClientNonUIFeatures>
+                      <CallEmbedProvider>
                        <ClientLayout
                          nav={
                            <MobileFriendlyClientNav>
@@ -133,6 +136,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                        >
                          <Outlet />
                        </ClientLayout>
+                        <CallStatusRenderer />
+                      </CallEmbedProvider>
                      <SearchModalRenderer />
                      <UserRoomProfileRenderer />
                      <CreateRoomModalRenderer />
--- a/src/app/pages/client/ClientInitStorageAtom.tsx
+++ b/src/app/pages/client/ClientInitStorageAtom.tsx
@@ -8,6 +8,8 @@ import { makeNavToActivePathAtom } from '../../state/navToActivePath';
 import { NavToActivePathProvider } from '../../state/hooks/navToActivePath';
 import { makeOpenedSidebarFolderAtom } from '../../state/openedSidebarFolder';
 import { OpenedSidebarFolderProvider } from '../../state/hooks/openedSidebarFolder';
+import { makeCallPreferencesAtom } from '../../state/callPreferences';
+import { CallPreferencesProvider } from '../../state/hooks/callPreferences';

 type ClientInitStorageAtomProps = {
  children: ReactNode;
@@ -24,12 +26,16 @@ export function ClientInitStorageAtom({ children }: ClientInitStorageAtomProps)

  const openedSidebarFolderAtom = useMemo(() => makeOpenedSidebarFolderAtom(userId), [userId]);

+  const callPreferencesAtom = useMemo(() => makeCallPreferencesAtom(userId), [userId]);
+
  return (
    <ClosedNavCategoriesProvider value={closedNavCategoriesAtom}>
      <ClosedLobbyCategoriesProvider value={closedLobbyCategoriesAtom}>
        <NavToActivePathProvider value={navToActivePathAtom}>
          <OpenedSidebarFolderProvider value={openedSidebarFolderAtom}>
+            <CallPreferencesProvider value={callPreferencesAtom}>
              {children}
+            </CallPreferencesProvider>
          </OpenedSidebarFolderProvider>
        </NavToActivePathProvider>
      </ClosedLobbyCategoriesProvider>
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -417,7 +417,12 @@ function RoomNotificationsGroupComp({
              src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
              alt={room.name}
              renderFallback={() => (
-                <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
+                <RoomIcon
+                  size="50"
+                  roomType={room.getType()}
+                  joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                  filled
+                />
              )}
            />
          </Avatar>
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -84,6 +84,7 @@ import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { BreakWord } from '../../../styles/Text.css';
 import { InviteUserPrompt } from '../../../components/invite-user-prompt';
+import { useCallEmbed } from '../../../hooks/useCallEmbed';

 type SpaceMenuProps = {
  room: Room;
@@ -387,15 +388,15 @@ export function Space() {
  const notificationPreferences = useRoomsNotificationPreferencesContext();

  const tombstoneEvent = useStateEvent(space, StateEvent.RoomTombstone);
-
  const selectedRoomId = useSelectedRoom();
  const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
  const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
+  const callEmbed = useCallEmbed();

  const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());

  const getRoom = useCallback(
-    (rId: string) => {
+    (rId: string): Room | undefined => {
      if (allJoinedRooms.has(rId)) {
        return mx.getRoom(rId) ?? undefined;
      }
@@ -412,11 +413,11 @@ export function Space() {
        if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
          return false;
        }
-        const showRoom = roomToUnread.has(roomId) || roomId === selectedRoomId;
-        if (showRoom) return false;
-        return true;
+        const showRoomAnyway =
+          roomToUnread.has(roomId) || roomId === selectedRoomId || callEmbed?.roomId === roomId;
+        return !showRoomAnyway;
      },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId, callEmbed]
    ),
    useCallback(
      (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),
--- a/src/app/plugins/call/CallControl.ts
+++ b/src/app/plugins/call/CallControl.ts
@@ -0,0 +1,117 @@
+import { ClientWidgetApi } from 'matrix-widget-api';
+import EventEmitter from 'events';
+import { CallControlState } from './CallControlState';
+import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
+
+export enum CallControlEvent {
+  StateUpdate = 'state_update',
+}
+
+export class CallControl extends EventEmitter implements CallControlState {
+  private state: CallControlState;
+
+  private call: ClientWidgetApi;
+
+  private iframe: HTMLIFrameElement;
+
+  constructor(state: CallControlState, call: ClientWidgetApi, iframe: HTMLIFrameElement) {
+    super();
+
+    this.state = state;
+    this.call = call;
+    this.iframe = iframe;
+  }
+
+  public getState(): CallControlState {
+    return this.state;
+  }
+
+  public get microphone(): boolean {
+    return this.state.microphone;
+  }
+
+  public get video(): boolean {
+    return this.state.video;
+  }
+
+  public get sound(): boolean {
+    return this.state.sound;
+  }
+
+  public async applyState() {
+    await this.setMediaState({
+      audio_enabled: this.microphone,
+      video_enabled: this.video,
+    });
+    this.setSound(this.sound);
+    this.emitStateUpdate();
+  }
+
+  private setMediaState(state: ElementMediaStatePayload) {
+    return this.call.transport.send(ElementWidgetActions.DeviceMute, state);
+  }
+
+  private setSound(sound: boolean): void {
+    const callDocument = this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
+    if (callDocument) {
+      callDocument.querySelectorAll('audio').forEach((el) => {
+        if (el instanceof HTMLAudioElement) {
+          // eslint-disable-next-line no-param-reassign
+          el.muted = !sound;
+        }
+      });
+    }
+  }
+
+  public onMediaState(evt: CustomEvent<ElementMediaStateDetail>) {
+    const { data } = evt.detail;
+    if (!data) return;
+
+    const state = new CallControlState(
+      data.audio_enabled ?? this.microphone,
+      data.video_enabled ?? this.video,
+      this.sound
+    );
+
+    this.state = state;
+    this.emitStateUpdate();
+
+    if (this.microphone && !this.sound) {
+      this.toggleSound();
+    }
+  }
+
+  public toggleMicrophone() {
+    const payload: ElementMediaStatePayload = {
+      audio_enabled: !this.microphone,
+      video_enabled: this.video,
+    };
+    return this.setMediaState(payload);
+  }
+
+  public toggleVideo() {
+    const payload: ElementMediaStatePayload = {
+      audio_enabled: this.microphone,
+      video_enabled: !this.video,
+    };
+    return this.setMediaState(payload);
+  }
+
+  public toggleSound() {
+    const sound = !this.sound;
+
+    this.setSound(sound);
+
+    const state = new CallControlState(this.microphone, this.video, sound);
+    this.state = state;
+    this.emitStateUpdate();
+
+    if (!this.sound && this.microphone) {
+      this.toggleMicrophone();
+    }
+  }
+
+  private emitStateUpdate() {
+    this.emit(CallControlEvent.StateUpdate);
+  }
+}
--- a/src/app/plugins/call/CallControlState.ts
+++ b/src/app/plugins/call/CallControlState.ts
@@ -0,0 +1,13 @@
+export class CallControlState {
+  public readonly microphone: boolean;
+
+  public readonly video: boolean;
+
+  public readonly sound: boolean;
+
+  constructor(microphone: boolean, video: boolean, sound: boolean) {
+    this.microphone = microphone;
+    this.video = video;
+    this.sound = sound;
+  }
+}
--- a/src/app/plugins/call/CallEmbed.ts
+++ b/src/app/plugins/call/CallEmbed.ts
@@ -0,0 +1,358 @@
+import {
+  ClientEvent,
+  KnownMembership,
+  MatrixClient,
+  MatrixEvent,
+  MatrixEventEvent,
+  Room,
+  RoomStateEvent,
+} from 'matrix-js-sdk';
+import {
+  ClientWidgetApi,
+  IRoomEvent,
+  IWidget,
+  Widget,
+  WidgetApiToWidgetAction,
+  WidgetDriver,
+} from 'matrix-widget-api';
+import { CallWidgetDriver } from './CallWidgetDriver';
+import { trimTrailingSlash } from '../../utils/common';
+import {
+  ElementCallIntent,
+  ElementCallThemeKind,
+  ElementMediaStateDetail,
+  ElementWidgetActions,
+} from './types';
+import { CallControl } from './CallControl';
+import { CallControlState } from './CallControlState';
+
+export class CallEmbed {
+  private mx: MatrixClient;
+
+  public readonly call: ClientWidgetApi;
+
+  public readonly iframe: HTMLIFrameElement;
+
+  public readonly room: Room;
+
+  public joined = false;
+
+  public readonly control: CallControl;
+
+  private readonly container: HTMLElement;
+
+  private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
+
+  private eventsToFeed = new WeakSet<MatrixEvent>();
+
+  private readonly disposables: Array<() => void> = [];
+
+  static getIntent(dm: boolean, ongoing: boolean): ElementCallIntent {
+    if (ongoing) {
+      return dm ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExisting;
+    }
+
+    return dm ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCall;
+  }
+
+  static getWidget(
+    mx: MatrixClient,
+    room: Room,
+    intent: ElementCallIntent,
+    themeKind: ElementCallThemeKind
+  ): Widget {
+    const userId = mx.getSafeUserId();
+    const deviceId = mx.getDeviceId() ?? '';
+    const clientOrigin = window.location.origin;
+    const widgetId = 'call-embed';
+
+    const params = new URLSearchParams({
+      widgetId,
+      parentUrl: clientOrigin,
+      baseUrl: mx.baseUrl,
+      roomId: room.roomId,
+      userId,
+      deviceId,
+      intent,
+
+      skipLobby: 'true',
+      confineToRoom: 'true',
+      appPrompt: 'false',
+      perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
+      lang: 'en-EN',
+      theme: themeKind,
+    });
+
+    const widgetUrl = new URL(
+      `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
+      window.location.origin
+    );
+    widgetUrl.search = params.toString();
+
+    const options: IWidget = {
+      id: widgetId,
+      creatorUserId: userId,
+      name: 'Call',
+      type: 'm.call',
+      url: widgetUrl.href,
+      waitForIframeLoad: false,
+      data: {},
+    };
+
+    const widget: Widget = new Widget(options);
+
+    return widget;
+  }
+
+  static getIframe(url: string): HTMLIFrameElement {
+    const iframe = document.createElement('iframe');
+
+    iframe.title = 'Call Embed';
+    iframe.sandbox =
+      'allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads';
+    iframe.allow = 'microphone; camera; display-capture; autoplay; clipboard-write;';
+    iframe.src = url;
+
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    iframe.style.border = 'none';
+
+    return iframe;
+  }
+
+  constructor(
+    mx: MatrixClient,
+    room: Room,
+    widget: Widget,
+    container: HTMLElement,
+    initialControlState?: CallControlState
+  ) {
+    const iframe = CallEmbed.getIframe(
+      widget.getCompleteUrl({ currentUserId: mx.getSafeUserId() })
+    );
+    container.append(iframe);
+
+    const callWidgetDriver: WidgetDriver = new CallWidgetDriver(mx, room.roomId);
+    const call: ClientWidgetApi = new ClientWidgetApi(widget, iframe, callWidgetDriver);
+
+    this.mx = mx;
+    this.call = call;
+    this.room = room;
+    this.iframe = iframe;
+    this.container = container;
+
+    const controlState = initialControlState ?? new CallControlState(true, false, true);
+    this.control = new CallControl(controlState, call, iframe);
+
+    let initialMediaEvent = true;
+    this.disposables.push(
+      this.listenEvent<ElementMediaStateDetail>(ElementWidgetActions.DeviceMute, (evt) => {
+        if (initialMediaEvent) {
+          initialMediaEvent = false;
+          this.control.applyState();
+          return;
+        }
+        this.control.onMediaState(evt);
+      })
+    );
+
+    this.start();
+  }
+
+  get roomId(): string {
+    return this.room.roomId;
+  }
+
+  public setTheme(theme: ElementCallThemeKind) {
+    return this.call.transport.send(WidgetApiToWidgetAction.ThemeChange, {
+      name: theme,
+    });
+  }
+
+  public hangup() {
+    return this.call.transport.send(ElementWidgetActions.HangupCall, {});
+  }
+
+  public listenEvent<T>(type: string, callback: (event: CustomEvent<T>) => void) {
+    this.call.on(`action:${type}`, callback);
+    return () => {
+      this.call.off(`action:${type}`, callback);
+    };
+  }
+
+  private start() {
+    // Room widgets get locked to the room they were added in
+    this.call.setViewedRoomId(this.roomId);
+    this.disposables.push(
+      this.listenEvent(ElementWidgetActions.JoinCall, this.onCallJoined.bind(this))
+    );
+
+    // Populate the map of "read up to" events for this widget with the current event in every room.
+    // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
+    // requests timeline capabilities in other rooms down the road. It's just easier to manage here.
+    this.mx.getRooms().forEach((room) => {
+      // Timelines are most recent last
+      const events = room.getLiveTimeline()?.getEvents() || [];
+      const roomEvent = events[events.length - 1];
+      if (!roomEvent) return; // force later code to think the room is fresh
+      this.readUpToMap[room.roomId] = roomEvent.getId()!;
+    });
+
+    // Attach listeners for feeding events - the underlying widget classes handle permissions for us
+    this.mx.on(ClientEvent.Event, this.onEvent.bind(this));
+    this.mx.on(MatrixEventEvent.Decrypted, this.onEventDecrypted.bind(this));
+    this.mx.on(RoomStateEvent.Events, this.onStateUpdate.bind(this));
+    this.mx.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent.bind(this));
+  }
+
+  /**
+   * Stops the widget messaging for if it is started. Skips stopping if it is an active
+   * widget.
+   * @param opts
+   */
+  public dispose(): void {
+    this.disposables.forEach((disposable) => {
+      disposable();
+    });
+    this.call.stop();
+    this.container.removeChild(this.iframe);
+
+    this.mx.off(ClientEvent.Event, this.onEvent.bind(this));
+    this.mx.off(MatrixEventEvent.Decrypted, this.onEventDecrypted.bind(this));
+    this.mx.off(RoomStateEvent.Events, this.onStateUpdate.bind(this));
+    this.mx.off(ClientEvent.ToDeviceEvent, this.onToDeviceEvent.bind(this));
+
+    // Clear internal state
+    this.readUpToMap = {};
+    this.eventsToFeed = new WeakSet<MatrixEvent>();
+  }
+
+  private onCallJoined(): void {
+    this.joined = true;
+  }
+
+  private onEvent(ev: MatrixEvent): void {
+    this.mx.decryptEventIfNeeded(ev);
+    this.feedEvent(ev);
+  }
+
+  private onEventDecrypted(ev: MatrixEvent): void {
+    this.feedEvent(ev);
+  }
+
+  private onStateUpdate(ev: MatrixEvent): void {
+    if (this.call === null) return;
+    const raw = ev.getEffectiveEvent();
+    this.call.feedStateUpdate(raw as IRoomEvent).catch((e) => {
+      console.error('Error sending state update to widget: ', e);
+    });
+  }
+
+  private async onToDeviceEvent(ev: MatrixEvent): Promise<void> {
+    await this.mx.decryptEventIfNeeded(ev);
+    if (ev.isDecryptionFailure()) return;
+    await this.call?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
+  }
+
+  /**
+   * Determines whether the event has a relation to an unknown parent.
+   */
+  private relatesToUnknown(ev: MatrixEvent): boolean {
+    // Replies to unknown events don't count
+    if (!ev.relationEventId || ev.replyEventId) return false;
+    const room = this.mx.getRoom(ev.getRoomId());
+    return room === null || !room.findEventById(ev.relationEventId);
+  }
+
+  /**
+   * Advances the "read up to" marker for a room to a certain event. No-ops if
+   * the event is before the marker.
+   * @returns Whether the "read up to" marker was advanced.
+   */
+  private advanceReadUpToMarker(ev: MatrixEvent): boolean {
+    const evId = ev.getId();
+    if (evId === undefined) return false;
+    const roomId = ev.getRoomId();
+    if (roomId === undefined) return false;
+    const room = this.mx.getRoom(roomId);
+    if (room === null) return false;
+
+    const upToEventId = this.readUpToMap[ev.getRoomId()!];
+    if (!upToEventId) {
+      // There's no marker yet; start it at this event
+      this.readUpToMap[roomId] = evId;
+      return true;
+    }
+
+    // Small optimization for exact match (skip the search)
+    if (upToEventId === evId) return false;
+
+    // Timelines are most recent last, so reverse the order and limit ourselves to 100 events
+    // to avoid overusing the CPU.
+    const timeline = room.getLiveTimeline();
+    const events = [...timeline.getEvents()].reverse().slice(0, 100);
+    function isRelevantTimelineEvent(timelineEvent: MatrixEvent): boolean {
+      return timelineEvent.getId() === upToEventId || timelineEvent.getId() === ev.getId();
+    }
+    const possibleMarkerEv = events.find(isRelevantTimelineEvent);
+    if (possibleMarkerEv?.getId() === upToEventId) {
+      // The event must be somewhere before the "read up to" marker
+      return false;
+    }
+    if (possibleMarkerEv?.getId() === ev.getId()) {
+      // The event is after the marker; advance it
+      this.readUpToMap[roomId] = evId;
+      return true;
+    }
+
+    // We can't say for sure whether the widget has seen the event; let's
+    // just assume that it has
+    return false;
+  }
+
+  /**
+   * Determines whether the event comes from a room that we've been invited to
+   * (in which case we likely don't have the full timeline).
+   */
+  private isFromInvite(ev: MatrixEvent): boolean {
+    const room = this.mx.getRoom(ev.getRoomId());
+    return room?.getMyMembership() === KnownMembership.Invite;
+  }
+
+  private feedEvent(ev: MatrixEvent): void {
+    if (this.call === null) return;
+    if (
+      // If we had decided earlier to feed this event to the widget, but
+      // it just wasn't ready, give it another try
+      this.eventsToFeed.delete(ev) ||
+      // Skip marker timeline check for events with relations to unknown parent because these
+      // events are not added to the timeline here and will be ignored otherwise:
+      // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213
+      this.relatesToUnknown(ev) ||
+      // Skip marker timeline check for rooms where membership is
+      // 'invite', otherwise the membership event from the invitation room
+      // will advance the marker and new state events will not be
+      // forwarded to the widget.
+      this.isFromInvite(ev) ||
+      // Check whether this event would be before or after our "read up to" marker. If it's
+      // before, or we can't decide, then we assume the widget will have already seen the event.
+      // If the event is after, or we don't have a marker for the room,
+      // then the marker will advance and we'll send it through.
+      // This approach of "read up to" prevents widgets receiving decryption spam from startup or
+      // receiving ancient events from backfill and such.
+      this.advanceReadUpToMarker(ev)
+    ) {
+      // If the event is still being decrypted, remember that we want to
+      // feed it to the widget (even if not strictly in the order given by
+      // the timeline) and get back to it later
+      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
+        this.eventsToFeed.add(ev);
+      } else {
+        const raw = ev.getEffectiveEvent();
+        this.call.feedEvent(raw as IRoomEvent).catch((e) => {
+          console.error('Error sending event to widget: ', e);
+        });
+      }
+    }
+  }
+}
--- a/src/app/plugins/call/CallWidgetDriver.ts
+++ b/src/app/plugins/call/CallWidgetDriver.ts
@@ -0,0 +1,340 @@
+import {
+  type Capability,
+  type ISendDelayedEventDetails,
+  type ISendEventDetails,
+  type IReadEventRelationsResult,
+  type IRoomEvent,
+  WidgetDriver,
+  type IWidgetApiErrorResponseDataDetails,
+  type ISearchUserDirectoryResult,
+  type IGetMediaConfigResult,
+  type UpdateDelayedEventAction,
+  OpenIDRequestState,
+  SimpleObservable,
+  IOpenIDUpdate,
+} from 'matrix-widget-api';
+import {
+  EventType,
+  type IContent,
+  MatrixError,
+  type MatrixEvent,
+  Direction,
+  type SendDelayedEventResponse,
+  type StateEvents,
+  type TimelineEvents,
+  MatrixClient,
+} from 'matrix-js-sdk';
+import { getCallCapabilities } from './utils';
+import { downloadMedia, mxcUrlToHttp } from '../../utils/matrix';
+
+export class CallWidgetDriver extends WidgetDriver {
+  private allowedCapabilities: Set<Capability>;
+
+  private readonly mx: MatrixClient;
+
+  public constructor(mx: MatrixClient, private inRoomId: string) {
+    super();
+    this.mx = mx;
+
+    const deviceId = mx.getDeviceId();
+    if (!deviceId) throw new Error('Failed to initialize CallWidgetDriver! Device ID not found.');
+
+    this.allowedCapabilities = getCallCapabilities(inRoomId, mx.getSafeUserId(), deviceId);
+  }
+
+  public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
+    const allow = Array.from(requested).filter((cap) => this.allowedCapabilities.has(cap));
+    return new Set(allow);
+  }
+
+  public async sendEvent(
+    eventType: string,
+    content: IContent,
+    stateKey: string | null = null,
+    targetRoomId: string | null = null
+  ): Promise<ISendEventDetails> {
+    const client = this.mx;
+    const roomId = targetRoomId || this.inRoomId;
+
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
+    let r: { event_id: string } | null;
+    if (typeof stateKey === 'string') {
+      r = await client.sendStateEvent(
+        roomId,
+        eventType as keyof StateEvents,
+        content as StateEvents[keyof StateEvents],
+        stateKey
+      );
+    } else if (eventType === EventType.RoomRedaction) {
+      // special case: extract the `redacts` property and call redact
+      r = await client.redactEvent(roomId, content.redacts);
+    } else {
+      r = await client.sendEvent(
+        roomId,
+        eventType as keyof TimelineEvents,
+        content as TimelineEvents[keyof TimelineEvents]
+      );
+    }
+
+    return { roomId, eventId: r.event_id };
+  }
+
+  public async sendDelayedEvent(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: string,
+    content: IContent,
+    stateKey: string | null = null,
+    targetRoomId: string | null = null
+  ): Promise<ISendDelayedEventDetails> {
+    const client = this.mx;
+    const roomId = targetRoomId || this.inRoomId;
+
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
+    let delayOpts;
+    if (delay !== null) {
+      delayOpts = {
+        delay,
+        ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
+      };
+    } else if (parentDelayId !== null) {
+      delayOpts = {
+        parent_delay_id: parentDelayId,
+      };
+    } else {
+      throw new Error('Must provide at least one of delay or parentDelayId');
+    }
+
+    let r: SendDelayedEventResponse | null;
+    if (stateKey !== null) {
+      // state event
+      r = await client._unstable_sendDelayedStateEvent(
+        roomId,
+        delayOpts,
+        eventType as keyof StateEvents,
+        content as StateEvents[keyof StateEvents],
+        stateKey
+      );
+    } else {
+      // message event
+      r = await client._unstable_sendDelayedEvent(
+        roomId,
+        delayOpts,
+        null,
+        eventType as keyof TimelineEvents,
+        content as TimelineEvents[keyof TimelineEvents]
+      );
+    }
+
+    return {
+      roomId,
+      delayId: r.delay_id,
+    };
+  }
+
+  public async updateDelayedEvent(
+    delayId: string,
+    action: UpdateDelayedEventAction
+  ): Promise<void> {
+    const client = this.mx;
+
+    if (!client) throw new Error('Not in a room or not attached to a client');
+
+    await client._unstable_updateDelayedEvent(delayId, action);
+  }
+
+  public async sendToDevice(
+    eventType: string,
+    encrypted: boolean,
+    contentMap: { [userId: string]: { [deviceId: string]: object } }
+  ): Promise<void> {
+    const client = this.mx;
+
+    if (encrypted) {
+      const crypto = client.getCrypto();
+      if (!crypto) throw new Error('E2EE not enabled');
+
+      // attempt to re-batch these up into a single request
+      const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const userId of Object.keys(contentMap)) {
+        const userContentMap = contentMap[userId];
+        // eslint-disable-next-line no-restricted-syntax
+        for (const deviceId of Object.keys(userContentMap)) {
+          const content = userContentMap[deviceId];
+          const stringifiedContent = JSON.stringify(content);
+          invertedContentMap[stringifiedContent] = invertedContentMap[stringifiedContent] || [];
+          invertedContentMap[stringifiedContent].push({ userId, deviceId });
+        }
+      }
+
+      await Promise.all(
+        Object.entries(invertedContentMap).map(async ([stringifiedContent, recipients]) => {
+          const batch = await crypto.encryptToDeviceMessages(
+            eventType,
+            recipients,
+            JSON.parse(stringifiedContent)
+          );
+
+          await client.queueToDevice(batch);
+        })
+      );
+    } else {
+      await client.queueToDevice({
+        eventType,
+        batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
+          Object.entries(userContentMap).map(([deviceId, content]) => ({
+            userId,
+            deviceId,
+            payload: content,
+          }))
+        ),
+      });
+    }
+  }
+
+  public async readRoomTimeline(
+    roomId: string,
+    eventType: string,
+    msgtype: string | undefined,
+    stateKey: string | undefined,
+    limit: number,
+    since: string | undefined
+  ): Promise<IRoomEvent[]> {
+    const safeLimit =
+      limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
+
+    const room = this.mx.getRoom(roomId);
+    if (room === null) return [];
+    const results: MatrixEvent[] = [];
+    const events = room.getLiveTimeline().getEvents();
+
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const ev = events[i];
+      if (results.length >= safeLimit) break;
+      if (since !== undefined && ev.getId() === since) break;
+
+      if (
+        ev.getType() === eventType &&
+        !ev.isState() &&
+        (eventType !== EventType.RoomMessage || !msgtype || msgtype === ev.getContent().msgtype) &&
+        (ev.getStateKey() === undefined || stateKey === undefined || ev.getStateKey() === stateKey)
+      ) {
+        results.push(ev);
+      }
+    }
+
+    return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
+  }
+
+  public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>): Promise<void> {
+    return observer.update({
+      state: OpenIDRequestState.Allowed,
+      token: await this.mx.getOpenIdToken(),
+    });
+  }
+
+  public async readRoomState(
+    roomId: string,
+    eventType: string,
+    stateKey: string | undefined
+  ): Promise<IRoomEvent[]> {
+    const room = this.mx.getRoom(roomId);
+    if (room === null) return [];
+    const state = room.getLiveTimeline().getState(Direction.Forward);
+    if (state === undefined) return [];
+
+    if (stateKey === undefined)
+      return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
+    const event = state.getStateEvents(eventType, stateKey);
+    return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+  }
+
+  public async readEventRelations(
+    eventId: string,
+    roomId?: string,
+    relationType?: string,
+    eventType?: string,
+    from?: string,
+    to?: string,
+    limit?: number,
+    direction?: 'f' | 'b'
+  ): Promise<IReadEventRelationsResult> {
+    const client = this.mx;
+    const dir = direction as Direction;
+    const targetRoomId = roomId ?? this.inRoomId ?? undefined;
+
+    if (typeof targetRoomId !== 'string') {
+      throw new Error('Error while reading the current room');
+    }
+
+    const { events, nextBatch, prevBatch } = await client.relations(
+      targetRoomId,
+      eventId,
+      relationType ?? null,
+      eventType ?? null,
+      { from, to, limit, dir }
+    );
+
+    return {
+      chunk: events.map((e) => e.getEffectiveEvent() as IRoomEvent),
+      nextBatch: nextBatch ?? undefined,
+      prevBatch: prevBatch ?? undefined,
+    };
+  }
+
+  public async searchUserDirectory(
+    searchTerm: string,
+    limit?: number
+  ): Promise<ISearchUserDirectoryResult> {
+    const client = this.mx;
+
+    const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });
+
+    return {
+      limited,
+      results: results.map((r) => ({
+        userId: r.user_id,
+        displayName: r.display_name,
+        avatarUrl: r.avatar_url,
+      })),
+    };
+  }
+
+  public async getMediaConfig(): Promise<IGetMediaConfigResult> {
+    const client = this.mx;
+
+    return client.getMediaConfig();
+  }
+
+  public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
+    const client = this.mx;
+
+    const uploadResult = await client.uploadContent(file);
+
+    return { contentUri: uploadResult.content_uri };
+  }
+
+  public async downloadFile(contentUri: string): Promise<{ file: XMLHttpRequestBodyInit }> {
+    const httpUrl = mxcUrlToHttp(this.mx, contentUri, true);
+    if (!httpUrl) {
+      throw new Error('Call widget failed to download file! No http url!');
+    }
+    const blob = await downloadMedia(httpUrl);
+    return { file: blob };
+  }
+
+  public getKnownRooms(): string[] {
+    return this.mx.getVisibleRooms().map((r) => r.roomId);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  public processError(error: unknown): IWidgetApiErrorResponseDataDetails | undefined {
+    return error instanceof MatrixError
+      ? { matrix_api_error: error.asWidgetApiErrorData() }
+      : undefined;
+  }
+}
--- a/src/app/plugins/call/hooks.ts
+++ b/src/app/plugins/call/hooks.ts
@@ -0,0 +1,49 @@
+import {
+  ClientWidgetApi,
+  IWidgetApiAcknowledgeResponseData,
+  IWidgetApiRequestData,
+} from 'matrix-widget-api';
+import { useCallback, useEffect, useState } from 'react';
+import { CallControl, CallControlEvent } from './CallControl';
+import { CallControlState } from './CallControlState';
+
+export const useClientWidgetApiEvent = <T>(
+  api: ClientWidgetApi | undefined,
+  type: string,
+  callback: (event: CustomEvent<T>) => void
+) => {
+  useEffect(() => {
+    api?.on(`action:${type}`, callback);
+    return () => {
+      api?.off(`action:${type}`, callback);
+    };
+  }, [api, type, callback]);
+};
+
+export const useSendClientWidgetApiAction = (api: ClientWidgetApi) => {
+  const sendWidgetAction = useCallback(
+    async <T extends IWidgetApiRequestData = IWidgetApiRequestData>(
+      action: string,
+      data: T
+    ): Promise<IWidgetApiAcknowledgeResponseData> => api.transport.send(action, data),
+    [api]
+  );
+
+  return sendWidgetAction;
+};
+
+export const useCallControlState = (control: CallControl): CallControlState => {
+  const [state, setState] = useState(control.getState());
+
+  useEffect(() => {
+    const handleUpdate = () => {
+      setState(control.getState());
+    };
+    control.on(CallControlEvent.StateUpdate, handleUpdate);
+    return () => {
+      control.off(CallControlEvent.StateUpdate, handleUpdate);
+    };
+  }, [control]);
+
+  return state;
+};
--- a/src/app/plugins/call/index.ts
+++ b/src/app/plugins/call/index.ts
@@ -0,0 +1,3 @@
+export * from './CallEmbed';
+export * from './hooks';
+export * from './types';
--- a/src/app/plugins/call/types.ts
+++ b/src/app/plugins/call/types.ts
@@ -0,0 +1,25 @@
+export enum ElementCallIntent {
+  StartCall = 'start_call',
+  JoinExisting = 'join_existing',
+  StartCallDM = 'start_call_dm',
+  JoinExistingDM = 'join_existing_dm',
+  StartCallDMVoice = 'start_call_dm_voice',
+  JoinExistingDMVoice = 'join_existing_dm_voice',
+}
+
+export type ElementCallThemeKind = 'light' | 'dark';
+
+export type ElementMediaStatePayload = {
+  audio_enabled?: boolean;
+  video_enabled?: boolean;
+};
+export type ElementMediaStateDetail = {
+  data?: ElementMediaStatePayload;
+};
+
+export enum ElementWidgetActions {
+  JoinCall = 'io.element.join',
+  HangupCall = 'im.vector.hangup',
+  Close = 'io.element.close',
+  DeviceMute = 'io.element.device_mute',
+}
--- a/src/app/plugins/call/utils.ts
+++ b/src/app/plugins/call/utils.ts
@@ -0,0 +1,118 @@
+import {
+  type Capability,
+  EventDirection,
+  MatrixCapabilities,
+  WidgetEventCapability,
+} from 'matrix-widget-api';
+import { EventType } from 'matrix-js-sdk';
+
+export function getCallCapabilities(
+  roomId: string,
+  userId: string,
+  deviceId: string
+): Set<Capability> {
+  const capabilities: Set<Capability> = new Set();
+
+  capabilities.add(MatrixCapabilities.Screenshots);
+  capabilities.add(MatrixCapabilities.AlwaysOnScreen);
+  capabilities.add(MatrixCapabilities.MSC3846TurnServers);
+  capabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
+  capabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
+  capabilities.add(`org.matrix.msc2762.timeline:${roomId}`);
+  capabilities.add(`org.matrix.msc2762.state:${roomId}`);
+
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call').raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomName).raw
+  );
+
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(
+      EventDirection.Send,
+      'org.matrix.msc3401.call.member',
+      userId
+    ).raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(
+      EventDirection.Send,
+      'org.matrix.msc3401.call.member',
+      `_${userId}_${deviceId}_m.call`
+    ).raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(
+      EventDirection.Send,
+      'org.matrix.msc3401.call.member',
+      `${userId}_${deviceId}_m.call`
+    ).raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(
+      EventDirection.Send,
+      'org.matrix.msc3401.call.member',
+      `_${userId}_${deviceId}`
+    ).raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(
+      EventDirection.Send,
+      'org.matrix.msc3401.call.member',
+      `${userId}_${deviceId}`
+    ).raw
+  );
+
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call.member')
+      .raw
+  );
+  capabilities.add(
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw
+  );
+
+  capabilities.add(
+    WidgetEventCapability.forRoomEvent(
+      EventDirection.Receive,
+      'org.matrix.msc4075.rtc.notification'
+    ).raw
+  );
+
+  [
+    'io.element.call.encryption_keys',
+    'org.matrix.rageshake_request',
+    EventType.Reaction,
+    EventType.RoomRedaction,
+    'io.element.call.reaction',
+    'org.matrix.msc4310.rtc.decline',
+  ].forEach((type) => {
+    capabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Send, type).raw);
+    capabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Receive, type).raw);
+  });
+
+  [
+    EventType.CallInvite,
+    EventType.CallCandidates,
+    EventType.CallAnswer,
+    EventType.CallHangup,
+    EventType.CallReject,
+    EventType.CallSelectAnswer,
+    EventType.CallNegotiate,
+    EventType.CallSDPStreamMetadataChanged,
+    EventType.CallSDPStreamMetadataChangedPrefix,
+    EventType.CallReplaces,
+    EventType.CallEncryptionKeysPrefix,
+  ].forEach((type) => {
+    capabilities.add(WidgetEventCapability.forToDeviceEvent(EventDirection.Send, type).raw);
+    capabilities.add(WidgetEventCapability.forToDeviceEvent(EventDirection.Receive, type).raw);
+  });
+
+  return capabilities;
+}
--- a/src/app/state/callEmbed.ts
+++ b/src/app/state/callEmbed.ts
@@ -0,0 +1,20 @@
+import { atom } from 'jotai';
+import { CallEmbed } from '../plugins/call';
+
+const baseCallEmbedAtom = atom<CallEmbed | undefined>(undefined);
+
+export const callEmbedAtom = atom<CallEmbed | undefined, [CallEmbed | undefined], void>(
+  (get) => get(baseCallEmbedAtom),
+  (get, set, callEmbed) => {
+    const prevCallEmbed = get(baseCallEmbedAtom);
+    if (callEmbed === prevCallEmbed) return;
+
+    if (prevCallEmbed) {
+      prevCallEmbed.dispose();
+    }
+
+    set(baseCallEmbedAtom, callEmbed);
+  }
+);
+
+export const callChatAtom = atom<boolean>(false);
--- a/src/app/state/callPreferences.ts
+++ b/src/app/state/callPreferences.ts
@@ -0,0 +1,39 @@
+import { WritableAtom } from 'jotai';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+export type CallPreferences = {
+  microphone: boolean;
+  video: boolean;
+  sound: boolean;
+};
+
+const CALL_PREFERENCES = 'callPreferences';
+
+const DEFAULT_PREFERENCES: CallPreferences = {
+  microphone: true,
+  video: false,
+  sound: true,
+};
+
+export type CallPreferencesAtom = WritableAtom<CallPreferences, [CallPreferences], undefined>;
+
+export const makeCallPreferencesAtom = (userId: string): CallPreferencesAtom => {
+  const storeKey = `${CALL_PREFERENCES}${userId}`;
+
+  const callPreferencesAtom = atomWithLocalStorage<CallPreferences>(
+    storeKey,
+    (key) => {
+      const v = getLocalStorageItem<CallPreferences>(key, DEFAULT_PREFERENCES);
+      return v;
+    },
+    (key, value) => {
+      setLocalStorageItem(key, value);
+    }
+  );
+
+  return callPreferencesAtom;
+};
--- a/src/app/state/createRoomModal.ts
+++ b/src/app/state/createRoomModal.ts
@@ -1,7 +1,9 @@
 import { atom } from 'jotai';
+import { CreateRoomType } from '../components/create-room/types';

 export type CreateRoomModalState = {
  spaceId?: string;
+  type?: CreateRoomType;
 };

 export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);
--- a/src/app/state/hooks/callPreferences.ts
+++ b/src/app/state/hooks/callPreferences.ts
@@ -0,0 +1,61 @@
+import { createContext, useCallback, useContext } from 'react';
+import { useAtom } from 'jotai';
+import { CallPreferences, CallPreferencesAtom } from '../callPreferences';
+
+const CallPreferencesAtomContext = createContext<CallPreferencesAtom | null>(null);
+export const CallPreferencesProvider = CallPreferencesAtomContext.Provider;
+
+export const useCallPreferencesAtom = (): CallPreferencesAtom => {
+  const atom = useContext(CallPreferencesAtomContext);
+  if (!atom) {
+    throw new Error('CallPreferencesAtom not provided!');
+  }
+
+  return atom;
+};
+
+export const useCallPreferences = (): CallPreferences & {
+  toggleMicrophone: () => void;
+  toggleVideo: () => void;
+  toggleSound: () => void;
+} => {
+  const callPrefAtom = useCallPreferencesAtom();
+  const [pref, setPref] = useAtom(callPrefAtom);
+
+  const toggleMicrophone = useCallback(() => {
+    const microphone = !pref.microphone;
+
+    setPref({
+      microphone,
+      video: pref.video,
+      sound: !pref.sound && microphone ? true : pref.sound,
+    });
+  }, [setPref, pref]);
+
+  const toggleVideo = useCallback(() => {
+    const video = !pref.video;
+
+    setPref({
+      microphone: pref.microphone,
+      video,
+      sound: pref.sound,
+    });
+  }, [setPref, pref]);
+
+  const toggleSound = useCallback(() => {
+    const sound = !pref.sound;
+
+    setPref({
+      microphone: !sound ? false : pref.microphone,
+      video: pref.video,
+      sound,
+    });
+  }, [setPref, pref]);
+
+  return {
+    ...pref,
+    toggleMicrophone,
+    toggleVideo,
+    toggleSound,
+  };
+};
--- a/src/app/state/hooks/createRoomModal.ts
+++ b/src/app/state/hooks/createRoomModal.ts
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
+import { CreateRoomType } from '../../components/create-room/types';

 export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
  const data = useAtomValue(createRoomModalAtom);
@@ -19,13 +20,13 @@ export const useCloseCreateRoomModal = (): CloseCallback => {
  return close;
 };

-type OpenCallback = (space?: string) => void;
+type OpenCallback = (space?: string, type?: CreateRoomType) => void;
 export const useOpenCreateRoomModal = (): OpenCallback => {
  const setSettings = useSetAtom(createRoomModalAtom);

  const open: OpenCallback = useCallback(
-    (spaceId) => {
-      setSettings({ spaceId });
+    (spaceId, type) => {
+      setSettings({ spaceId, type });
    },
    [setSettings]
  );
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -161,7 +161,8 @@ export const getOrphanParents = (roomToParents: RoomToParents, roomId: string):

 export const isMutedRule = (rule: IPushRule) =>
  // Check for empty actions (new spec) or dont_notify (deprecated)
-  (rule.actions.length === 0 || rule.actions[0] === 'dont_notify') && rule.conditions?.[0]?.kind === 'event_match';
+  (rule.actions.length === 0 || rule.actions[0] === 'dont_notify') &&
+  rule.conditions?.[0]?.kind === 'event_match';

 export const findMutedRule = (overrideRules: IPushRule[], roomId: string) =>
  overrideRules.find((rule) => rule.rule_id === roomId && isMutedRule(rule));
@@ -257,24 +258,44 @@ export const getUnreadInfos = (mx: MatrixClient): UnreadInfo[] => {
  return unreadInfos;
 };

-export const joinRuleToIconSrc = (
+export const getRoomIconSrc = (
  icons: Record<IconName, IconSrc>,
-  joinRule: JoinRule,
-  space: boolean
-): IconSrc | undefined => {
-  if (joinRule === JoinRule.Restricted) {
-    return space ? icons.Space : icons.Hash;
+  roomType?: string,
+  joinRule?: JoinRule
+): IconSrc => {
+  if (roomType === RoomType.Space) {
+    if (joinRule === JoinRule.Public) return icons.SpaceGlobe;
+    if (
+      joinRule === JoinRule.Invite ||
+      joinRule === JoinRule.Knock ||
+      joinRule === JoinRule.Private
+    ) {
+      return icons.SpaceLock;
    }
-  if (joinRule === JoinRule.Knock) {
-    return space ? icons.SpaceLock : icons.HashLock;
+    return icons.Space;
  }
-  if (joinRule === JoinRule.Invite) {
-    return space ? icons.SpaceLock : icons.HashLock;
+
+  if (roomType === RoomType.Call) {
+    if (joinRule === JoinRule.Public) return icons.VolumeHighGlobe;
+    if (
+      joinRule === JoinRule.Invite ||
+      joinRule === JoinRule.Knock ||
+      joinRule === JoinRule.Private
+    ) {
+      return icons.VolumeHighLock;
    }
-  if (joinRule === JoinRule.Public) {
-    return space ? icons.SpaceGlobe : icons.HashGlobe;
+    return icons.VolumeHigh;
  }
-  return undefined;
+
+  if (joinRule === JoinRule.Public) return icons.HashGlobe;
+  if (
+    joinRule === JoinRule.Invite ||
+    joinRule === JoinRule.Knock ||
+    joinRule === JoinRule.Private
+  ) {
+    return icons.HashLock;
+  }
+  return icons.Hash;
 };

 export const getRoomAvatarUrl = (
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -32,6 +32,8 @@ export enum StateEvent {
  RoomGuestAccess = 'm.room.guest_access',
  RoomServerAcl = 'm.room.server_acl',
  RoomTombstone = 'm.room.tombstone',
+  GroupCallPrefix = 'org.matrix.msc3401.call',
+  GroupCallMemberPrefix = 'org.matrix.msc3401.call.member',

  SpaceChild = 'm.space.child',
  SpaceParent = 'm.space.parent',
@@ -50,6 +52,7 @@ export enum MessageEvent {

 export enum RoomType {
  Space = 'm.space',
+  Call = 'org.matrix.msc3417.call',
 }

 export type MSpaceChildContent = {
--- a/vite.config.js
+++ b/vite.config.js
@@ -13,6 +13,10 @@ import buildConfig from './build.config';

 const copyFiles = {
  targets: [
+    {
+      src: 'node_modules/@element-hq/element-call-embedded/dist/*',
+      dest: 'public/element-call',
+    },
    {
      src: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
      dest: '',
@@ -47,7 +51,10 @@ function serverMatrixSdkCryptoWasm(wasmFilePath) {
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === wasmFilePath) {
-          const resolvedPath = path.join(path.resolve(), "/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm");
+          const resolvedPath = path.join(
+            path.resolve(),
+            '/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm'
+          );

          if (fs.existsSync(resolvedPath)) {
            res.setHeader('Content-Type', 'application/wasm');
@@ -102,8 +109,8 @@ export default defineConfig({
      },
      devOptions: {
        enabled: true,
-        type: 'module'
-      }
+        type: 'module',
+      },
    }),
  ],
  optimizeDeps: {