diff --git a/.changeset/aaa_syncupstream.md b/.changeset/aaa_syncupstream.md
new file mode 100644
index 000000000..af863df74
--- /dev/null
+++ b/.changeset/aaa_syncupstream.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Merge in upstream call things and remove the duplicate new voice room button.
diff --git a/src/app/cs-api.ts b/src/app/cs-api.ts
index b9aac06ab..42d689b98 100644
--- a/src/app/cs-api.ts
+++ b/src/app/cs-api.ts
@@ -20,6 +20,16 @@ export type AutoDiscoveryInfo = Record<string, unknown> & {
   'm.identity_server'?: {
     base_url: string;
   };
+  'org.matrix.msc2965.authentication'?: {
+    account?: string;
+    issuer?: string;
+  };
+  'org.matrix.msc4143.rtc_foci'?: [
+    {
+      livekit_service_url: string;
+      type: 'livekit';
+    },
+  ];
 };
 
 export const autoDiscovery = async (
diff --git a/src/app/features/call-status/CallControl.tsx b/src/app/features/call-status/CallControl.tsx
index bb682a36e..128df221f 100644
--- a/src/app/features/call-status/CallControl.tsx
+++ b/src/app/features/call-status/CallControl.tsx
@@ -1,13 +1,17 @@
-import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
-import { useState } from 'react';
+import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
+import { useCallback } from 'react';
+import { useSetAtom } from 'jotai';
 import { StatusDivider } from './components';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { callEmbedAtom } from '../../state/callEmbed';
 
 type MicrophoneButtonProps = {
   enabled: boolean;
   onToggle: () => Promise<unknown>;
+  disabled?: boolean;
 };
-function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
   return (
     <TooltipProvider
       position="Top"
@@ -26,6 +30,7 @@ function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
           size="300"
           onClick={() => onToggle()}
           outlined
+          disabled={disabled}
         >
           <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
         </IconButton>
@@ -37,8 +42,9 @@ function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
 type SoundButtonProps = {
   enabled: boolean;
   onToggle: () => void;
+  disabled?: boolean;
 };
-function SoundButton({ enabled, onToggle }: SoundButtonProps) {
+function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
   return (
     <TooltipProvider
       position="Top"
@@ -57,6 +63,7 @@ function SoundButton({ enabled, onToggle }: SoundButtonProps) {
           size="300"
           onClick={() => onToggle()}
           outlined
+          disabled={disabled}
         >
           <Icon
             size="100"
@@ -72,8 +79,9 @@ function SoundButton({ enabled, onToggle }: SoundButtonProps) {
 type VideoButtonProps = {
   enabled: boolean;
   onToggle: () => Promise<unknown>;
+  disabled?: boolean;
 };
-function VideoButton({ enabled, onToggle }: VideoButtonProps) {
+function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
   return (
     <TooltipProvider
       position="Top"
@@ -92,6 +100,7 @@ function VideoButton({ enabled, onToggle }: VideoButtonProps) {
           size="300"
           onClick={() => onToggle()}
           outlined
+          disabled={disabled}
         >
           <Icon
             size="100"
@@ -104,9 +113,12 @@ function VideoButton({ enabled, onToggle }: VideoButtonProps) {
   );
 }
 
-function ScreenShareButton() {
-  const [enabled, setEnabled] = useState(false);
-
+type ScreenShareButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+};
+function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonProps) {
   return (
     <TooltipProvider
       position="Top"
@@ -123,8 +135,9 @@ function ScreenShareButton() {
           fill="Soft"
           radii="300"
           size="300"
-          onClick={() => setEnabled(!enabled)}
+          onClick={onToggle}
           outlined
+          disabled={disabled}
         >
           <Icon size="100" src={Icons.ScreenShare} filled={enabled} />
         </IconButton>
@@ -133,8 +146,31 @@ function ScreenShareButton() {
   );
 }
 
-export function CallControl({ callEmbed }: { callEmbed: CallEmbed }) {
-  const { microphone, video, sound } = useCallControlState(callEmbed.control);
+export function CallControl({
+  callEmbed,
+  compact,
+  callJoined,
+}: {
+  callEmbed: CallEmbed;
+  compact: boolean;
+  callJoined: boolean;
+}) {
+  const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
+  const setCallEmbed = useSetAtom(callEmbedAtom);
+
+  const [hangupState, hangup] = useAsyncCallback(
+    useCallback(() => callEmbed.hangup(), [callEmbed])
+  );
+  const exiting =
+    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;
+
+  const handleHangup = () => {
+    if (!callJoined) {
+      setCallEmbed(undefined);
+      return;
+    }
+    hangup();
+  };
 
   return (
     <Box shrink="No" alignItems="Center" gap="300">
@@ -142,23 +178,48 @@ export function CallControl({ callEmbed }: { callEmbed: CallEmbed }) {
         <MicrophoneButton
           enabled={microphone}
           onToggle={() => callEmbed.control.toggleMicrophone()}
+          disabled={!callJoined}
+        />
+        <SoundButton
+          enabled={sound}
+          onToggle={() => callEmbed.control.toggleSound()}
+          disabled={!callJoined}
         />
-        <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
-        <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
-        {false && <ScreenShareButton />}
+        {!compact && <StatusDivider />}
+        <VideoButton
+          enabled={video}
+          onToggle={() => callEmbed.control.toggleVideo()}
+          disabled={!callJoined}
+        />
+        {!compact && (
+          <ScreenShareButton
+            enabled={screenshare}
+            onToggle={() => callEmbed.control.toggleScreenshare()}
+            disabled={!callJoined}
+          />
+        )}
       </Box>
       <StatusDivider />
       <Chip
         variant="Critical"
-        radii="300"
+        radii="Pill"
         fill="Soft"
-        before={<Icon size="50" src={Icons.PhoneDown} filled />}
+        before={
+          exiting ? (
+            <Spinner variant="Critical" fill="Soft" size="50" />
+          ) : (
+            <Icon size="50" src={Icons.PhoneDown} filled />
+          )
+        }
+        disabled={exiting}
         outlined
-        onClick={() => callEmbed.hangup()}
+        onClick={handleHangup}
       >
-        <Text as="span" size="L400">
-          End
-        </Text>
+        {!compact && (
+          <Text as="span" size="L400">
+            End
+          </Text>
+        )}
       </Chip>
     </Box>
   );
diff --git a/src/app/features/call-status/CallStatus.tsx b/src/app/features/call-status/CallStatus.tsx
index 7a9177d48..899bff7d6 100644
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/src/app/features/call-status/CallStatus.tsx
@@ -46,18 +46,17 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
         ) : (
           <Spinner variant="Secondary" size="200" />
         )}
-        <Box
-          grow="Yes"
-          alignItems="Center"
-          gap="Inherit"
-          justifyContent={compact ? 'Center' : undefined}
-        >
-          <CallRoomName room={room} />
-          {speakers.size > 0 && !compact && (
+        <Box grow="Yes" alignItems="Center" gap="Inherit">
+          {!compact && (
             <>
-              <StatusDivider />
-              <span data-spacing-node />
-              <MemberSpeaking room={room} speakers={speakers} />
+              <CallRoomName room={room} />
+              {speakers.size > 0 && (
+                <>
+                  <StatusDivider />
+                  <span data-spacing-node />
+                  <MemberSpeaking room={room} speakers={speakers} />
+                </>
+              )}
             </>
           )}
         </Box>
@@ -68,8 +67,13 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
         )}
       </Box>
       {memberVisible && !compact && <StatusDivider />}
-      <Box shrink="No" alignItems="Center" justifyContent="Center" gap="Inherit">
-        <CallControl callEmbed={callEmbed} />
+      <Box shrink="No" alignItems="Center" gap="Inherit">
+        {compact && (
+          <Box grow="Yes">
+            <CallRoomName room={room} />
+          </Box>
+        )}
+        <CallControl callJoined={callJoined} compact={compact} callEmbed={callEmbed} />
       </Box>
     </Box>
   );
diff --git a/src/app/features/call-status/LiveChip.tsx b/src/app/features/call-status/LiveChip.tsx
index 3806fd0e0..e62af0e24 100644
--- a/src/app/features/call-status/LiveChip.tsx
+++ b/src/app/features/call-status/LiveChip.tsx
@@ -128,7 +128,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
         radii="Pill"
         onClick={handleOpenMenu}
       >
-        <Text className={css.LiveChipText} as="span" size="L400">
+        <Text className={css.LiveChipText} as="span" size="L400" truncate>
           {count} Live
         </Text>
       </Chip>
diff --git a/src/app/features/call-status/MemberSpeaking.tsx b/src/app/features/call-status/MemberSpeaking.tsx
index 431bdb128..b80190cd3 100644
--- a/src/app/features/call-status/MemberSpeaking.tsx
+++ b/src/app/features/call-status/MemberSpeaking.tsx
@@ -13,7 +13,7 @@ export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) {
   );
   return (
     <Box alignItems="Center" gap="100">
-      <Icon size="100" src={Icons.Phone} filled />
+      <Icon size="100" src={Icons.Mic} filled />
       <Text size="T200" truncate>
         {speakingNames.length === 1 && (
           <>
diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx
new file mode 100644
index 000000000..cfd85d650
--- /dev/null
+++ b/src/app/features/call/CallControls.tsx
@@ -0,0 +1,203 @@
+import { MouseEventHandler, useCallback, useRef, useState } from 'react';
+import {
+  Box,
+  Button,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { SequenceCard } from '../../components/sequence-card';
+import * as css from './styles.css';
+import {
+  ChatButton,
+  ControlDivider,
+  MicrophoneButton,
+  ScreenShareButton,
+  SoundButton,
+  VideoButton,
+} from './Controls';
+import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { stopPropagation } from '../../utils/keyboard';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+
+type CallControlsProps = {
+  callEmbed: CallEmbed;
+};
+export function CallControls({ callEmbed }: CallControlsProps) {
+  const controlRef = useRef<HTMLDivElement>(null);
+  const [compact, setCompact] = useState(document.body.clientWidth < 500);
+
+  useResizeObserver(
+    useCallback(() => {
+      const element = controlRef.current;
+      if (!element) return;
+      setCompact(element.clientWidth < 500);
+    }, []),
+    useCallback(() => controlRef.current, [])
+  );
+
+  const { microphone, video, sound, screenshare, spotlight } = useCallControlState(
+    callEmbed.control
+  );
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSpotlightClick = () => {
+    callEmbed.control.toggleSpotlight();
+    setCords(undefined);
+  };
+
+  const handleReactionsClick = () => {
+    callEmbed.control.toggleReactions();
+    setCords(undefined);
+  };
+
+  const handleSettingsClick = () => {
+    callEmbed.control.toggleSettings();
+    setCords(undefined);
+  };
+
+  const [hangupState, hangup] = useAsyncCallback(
+    useCallback(() => callEmbed.hangup(), [callEmbed])
+  );
+  const exiting =
+    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;
+
+  return (
+    <Box
+      ref={controlRef}
+      className={css.CallControlContainer}
+      justifyContent="Center"
+      alignItems="Center"
+    >
+      <SequenceCard
+        className={css.ControlCard}
+        variant="SurfaceVariant"
+        gap="400"
+        radii="500"
+        alignItems="Center"
+        justifyContent="SpaceBetween"
+      >
+        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
+          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+            <MicrophoneButton
+              enabled={microphone}
+              onToggle={() => callEmbed.control.toggleMicrophone()}
+            />
+            <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
+          </Box>
+          {!compact && <ControlDivider />}
+          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
+            <ScreenShareButton
+              enabled={screenshare}
+              onToggle={() => callEmbed.control.toggleScreenshare()}
+            />
+          </Box>
+        </Box>
+        {!compact && <ControlDivider />}
+        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
+          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+            <ChatButton />
+            <PopOut
+              anchor={cords}
+              position="Top"
+              align="Center"
+              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>
+                    <Box direction="Column" style={{ padding: config.space.S100 }}>
+                      <MenuItem
+                        size="300"
+                        variant="Surface"
+                        radii="300"
+                        onClick={handleSpotlightClick}
+                      >
+                        <Text size="B300" truncate>
+                          {spotlight ? 'Grid View' : 'Spotlight View'}
+                        </Text>
+                      </MenuItem>
+                      <MenuItem
+                        size="300"
+                        variant="Surface"
+                        radii="300"
+                        onClick={handleReactionsClick}
+                      >
+                        <Text size="B300" truncate>
+                          Reactions
+                        </Text>
+                      </MenuItem>
+                      <MenuItem
+                        size="300"
+                        variant="Surface"
+                        radii="300"
+                        onClick={handleSettingsClick}
+                      >
+                        <Text size="B300" truncate>
+                          Settings
+                        </Text>
+                      </MenuItem>
+                    </Box>
+                  </Menu>
+                </FocusTrap>
+              }
+            >
+              <IconButton
+                variant="Surface"
+                fill="Soft"
+                radii="400"
+                size="400"
+                onClick={handleOpenMenu}
+                outlined
+                aria-pressed={!!cords}
+              >
+                <Icon size="400" src={Icons.VerticalDots} />
+              </IconButton>
+            </PopOut>
+          </Box>
+          <Box shrink="No" direction="Column">
+            <Button
+              style={{ minWidth: toRem(88) }}
+              variant="Critical"
+              fill="Solid"
+              onClick={hangup}
+              before={
+                exiting ? (
+                  <Spinner variant="Critical" fill="Solid" size="200" />
+                ) : (
+                  <Icon src={Icons.PhoneDown} size="200" filled />
+                )
+              }
+              disabled={exiting}
+            >
+              <Text size="B400">End</Text>
+            </Button>
+          </Box>
+        </Box>
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index ff59e7111..bfb3b16ec 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -1,21 +1,41 @@
-import { useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
-import { EventType } from '$types/matrix-sdk';
-import { useCallEmbed, useCallEmbedPlacementSync, useCallJoined } from '$hooks/useCallEmbed';
 import { ContainerColor } from '$styles/ContainerColor.css';
 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 { useRoom } from '$hooks/useRoom';
+import { useLivekitSupport } from '$hooks/useLivekitSupport';
+import { StateEvent } from '$types/matrix/room';
 import { useCallMembers, useCallSession } from '$hooks/useCall';
-import { PrescreenControls } from './PrescreenControls';
-import { CallMemberRenderer } from './CallMemberCard';
+import { useCallEmbed, useCallEmbedPlacementSync, useCallJoined } from '$hooks/useCallEmbed';
 import * as css from './styles.css';
+import { CallMemberRenderer } from './CallMemberCard';
+import { PrescreenControls } from './PrescreenControls';
+import { CallControls } from './CallControls';
 
-function JoinMessage({ hasParticipant }: { hasParticipant?: boolean }) {
+function LivekitServerMissingMessage() {
+  return (
+    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+      Your homeserver does not support calling. But you can still join call started by others.
+    </Text>
+  );
+}
+
+function JoinMessage({
+  hasParticipant,
+  livekitSupported,
+}: {
+  hasParticipant?: boolean;
+  livekitSupported?: boolean;
+}) {
   if (hasParticipant) return null;
 
+  if (livekitSupported === false) {
+    return <LivekitServerMissingMessage />;
+  }
+
   return (
     <Text style={{ margin: 'auto' }} size="L400" align="Center">
       Voice chat&apos;s empty — Be the first to hop in!
@@ -39,67 +59,92 @@ function AlreadyInCallMessage() {
   );
 }
 
-export function CallView() {
+function CallPrescreen() {
   const mx = useMatrixClient();
   const room = useRoom();
-
-  const callViewRef = useRef<HTMLDivElement>(null);
-  useCallEmbedPlacementSync(callViewRef);
+  const livekitSupported = useLivekitSupport();
 
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canJoin = permissions.event(EventType.GroupCallMemberPrefix, mx.getSafeUserId());
+  const hasPermission = 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 canJoin = hasPermission && (livekitSupported || hasParticipant);
+
+  return (
+    <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} />
+          <Box className={css.PrescreenMessage} alignItems="Center">
+            {!inOtherCall &&
+              (hasPermission ? (
+                <JoinMessage hasParticipant={hasParticipant} livekitSupported={livekitSupported} />
+              ) : (
+                <NoPermissionMessage />
+              ))}
+            {inOtherCall && <AlreadyInCallMessage />}
+          </Box>
+        </Box>
+      </Box>
+    </Scroll>
+  );
+}
+
+type CallJoinedProps = {
+  containerRef: RefObject<HTMLDivElement>;
+  joined: boolean;
+};
+function CallJoined({ joined, containerRef }: CallJoinedProps) {
+  const callEmbed = useCallEmbed();
+
+  return (
+    <Box grow="Yes" direction="Column">
+      <Box grow="Yes" ref={containerRef} />
+      {callEmbed && joined && <CallControls callEmbed={callEmbed} />}
+    </Box>
+  );
+}
+
+export function CallView() {
+  const room = useRoom();
+  const callContainerRef = useRef<HTMLDivElement>(null);
+  useCallEmbedPlacementSync(callContainerRef);
+
+  const callEmbed = useCallEmbed();
+  const callJoined = useCallJoined(callEmbed);
+
   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>
-      )}
+      {!currentJoined && <CallPrescreen />}
+      <CallJoined joined={currentJoined} containerRef={callContainerRef} />
     </Box>
   );
 }
diff --git a/src/app/features/call/Controls.tsx b/src/app/features/call/Controls.tsx
index 0e0a07cda..3fe6d68fe 100644
--- a/src/app/features/call/Controls.tsx
+++ b/src/app/features/call/Controls.tsx
@@ -113,6 +113,38 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
   );
 }
 
+type ScreenShareButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Screenshare' : 'Start Screenshare'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon size="400" src={Icons.ScreenShare} filled={enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
 export function ChatButton() {
   const [chat, setChat] = useAtom(callChatAtom);
 
diff --git a/src/app/features/call/PrescreenControls.tsx b/src/app/features/call/PrescreenControls.tsx
index 705a4d1e6..d5dc1464a 100644
--- a/src/app/features/call/PrescreenControls.tsx
+++ b/src/app/features/call/PrescreenControls.tsx
@@ -5,7 +5,6 @@ import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton
 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;
@@ -49,7 +48,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
         <Button
           variant={disabled ? 'Secondary' : 'Success'}
           fill={disabled ? 'Soft' : 'Solid'}
-          onClick={() => startCall(room, new CallControlState(microphone, video, sound))}
+          onClick={() => startCall(room, { microphone, video, sound })}
           disabled={disabled || joining}
           before={
             joining ? (
diff --git a/src/app/features/call/styles.css.ts b/src/app/features/call/styles.css.ts
index 1ee2892a2..2b9f28ad6 100644
--- a/src/app/features/call/styles.css.ts
+++ b/src/app/features/call/styles.css.ts
@@ -18,3 +18,11 @@ export const ControlDivider = style({
 export const CallMemberCard = style({
   padding: config.space.S300,
 });
+
+export const CallControlContainer = style({
+  padding: config.space.S400,
+});
+
+export const PrescreenMessage = style({
+  padding: config.space.S200,
+});
diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx
index f43af5d72..c8ec05f22 100644
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -296,15 +296,6 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
             >
               <Text size="T300">Voice Room</Text>
             </MenuItem>
-            <MenuItem
-              size="300"
-              radii="300"
-              variant="Primary"
-              fill="None"
-              onClick={() => handleCreateRoom(CreateRoomType.VoiceRoom)}
-            >
-              <Text size="T300">New Voice Room</Text>
-            </MenuItem>
             <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
               <Text size="T300">Existing Room</Text>
             </MenuItem>
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 474522cdf..1ed865e54 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -60,18 +60,18 @@ import { useRoomName } from '$hooks/useRoomMeta';
 import { nicknamesAtom } from '$state/nicknames';
 import { useRoomNavigate } from '$hooks/useRoomNavigate';
 
-// Upstream Call Hooks
+// Call Hooks & Plugins
 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';
+import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo';
+import { livekitSupport } from '$hooks/useLivekitSupport';
 import { RoomNavUser } from './RoomNavUser';
 
 /**
- * Reactively checks whether a room has unread messages, even if the
- * push-rule notification count is zero (e.g. mentions-only rooms with
- * new regular messages).
+ * Reactively checks whether a room has unread messages.
  */
 function useRoomHasUnread(room: Room): boolean {
   const mx = useMatrixClient();
@@ -278,25 +278,23 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
 
-  // Name Resolution
   const nicknames = useAtomValue(nicknamesAtom);
   const dmUserId = direct ? room.getAvatarFallbackMember()?.userId : undefined;
   const matrixRoomName = useRoomName(room);
   const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName;
 
-  // Navigation & Context
   const { navigateRoom } = useRoomNavigate();
   const navigate = useNavigate();
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
-  // Call Hooks (Merged from upstream)
   const callSession = useCallSession(room);
   const callMembers = useCallMembers(room, callSession);
   const startCall = useCallStart(direct);
   const callEmbed = useCallEmbed();
   const callPref = useAtomValue(useCallPreferencesAtom());
   const [isChatOpen, setChatOpen] = useAtom(callChatAtom);
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
 
   const isActiveCall = callEmbed?.roomId === room.roomId;
 
@@ -316,6 +314,10 @@ export function RoomNavItem({
 
   const handleNavItemClick: MouseEventHandler<HTMLElement> = (evt) => {
     if (room.isCallRoom()) {
+      // Upstream safety checks: verify Livekit support or active participants
+      if (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0) return;
+      if (callEmbed && !isActiveCall) return;
+
       if (!isMobile) {
         if (!isActiveCall && !callEmbed) {
           startCall(
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 632a9f08b..48d0e661b 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -290,7 +290,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const isEncrypted = room.hasEncryptionStateEvent();
 
     useElementSizeObserver(
-      useCallback(() => document.body, []),
+      useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 668b33f7b..84c9e0108 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1895,7 +1895,13 @@ export function RoomTimeline({
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const callJoined = mEvent.getContent<SessionMembershipData>().application;
+        const content = mEvent.getContent<SessionMembershipData>();
+        const prevContent = mEvent.getPrevContent();
+
+        const callJoined = content.application;
+        if (callJoined && 'application' in prevContent) {
+          return null;
+        }
 
         const timeJSX = (
           <Time
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 84b67cce9..e7ecc8114 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -45,7 +45,7 @@ import {
   mxcUrlToHttp,
   removeRoomIdFromMDirect,
 } from '$utils/matrix';
-import { SearchPathSearchParams } from '$pages/paths';
+import { type SearchPathSearchParams } from '$pages/paths';
 import { useRoomUnread } from '$state/hooks/unread';
 import { usePowerLevelsContext } from '$hooks/usePowerLevels';
 import { markAsRead } from '$utils/notifications';
@@ -648,7 +648,11 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  {callView ? (
+                    <Text>Members</Text>
+                  ) : (
+                    <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  )}
                 </Tooltip>
               }
             >
diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx
index 59abedea2..be5418159 100644
--- a/src/app/features/settings/about/About.tsx
+++ b/src/app/features/settings/about/About.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem, Spinner } from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
@@ -7,7 +8,6 @@ import { clearCacheAndReload } from '$client/initMatrix';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { SequenceCardStyle } from '$features/settings/styles.css';
 import { Method } from '$types/matrix-sdk';
-import { useState } from 'react';
 import { useOpenBugReportModal } from '$state/hooks/bugReportModal';
 
 export function HomeserverInfo() {
@@ -15,7 +15,6 @@ export function HomeserverInfo() {
   const [federationUrl, setFederationUrl] = useState<string>(mx.baseUrl);
   const [version, setVersion] = useState<any>(undefined);
 
-  // By default assume the federationUrl is the same as the baseUrl.
   if (!version)
     mx.http
       .request(Method.Get, '/version', undefined, undefined, {
@@ -25,7 +24,6 @@ export function HomeserverInfo() {
       .then((fetched_version) => setVersion(fetched_version))
       .catch((error) => {
         if (federationUrl === mx.baseUrl) {
-          // Maybe they are *not* the same actually.
           mx.http
             .request(Method.Get, '/server', undefined, undefined, {
               prefix: '/.well-known/matrix',
diff --git a/src/app/hooks/useCallEmbed.ts b/src/app/hooks/useCallEmbed.ts
index 620530d5a..46f9fbc59 100644
--- a/src/app/hooks/useCallEmbed.ts
+++ b/src/app/hooks/useCallEmbed.ts
@@ -16,6 +16,7 @@ import { callEmbedAtom } from '../state/callEmbed';
 import { useResizeObserver } from './useResizeObserver';
 import { CallControlState } from '../plugins/call/CallControlState';
 import { useCallMembersChange, useCallSession } from './useCall';
+import { CallPreferences } from '../state/callPreferences';
 
 const CallEmbedContext = createContext<CallEmbed | undefined>(undefined);
 
@@ -43,7 +44,7 @@ export const createCallEmbed = (
   dm: boolean,
   themeKind: ElementCallThemeKind,
   container: HTMLElement,
-  controlState?: CallControlState
+  pref?: CallPreferences
 ): CallEmbed => {
   const rtcSession = mx.matrixRTC.getRoomSession(room);
   const ongoing =
@@ -51,6 +52,8 @@ export const createCallEmbed = (
 
   const intent = CallEmbed.getIntent(dm, ongoing);
   const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
+  const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);
+
   const embed = new CallEmbed(mx, room, widget, container, controlState);
 
   return embed;
@@ -63,12 +66,12 @@ export const useCallStart = (dm = false) => {
   const callEmbedRef = useCallEmbedRef();
 
   const startCall = useCallback(
-    (room: Room, controlState?: CallControlState) => {
+    (room: Room, pref?: CallPreferences) => {
       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);
+      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, pref);
 
       setCallEmbed(callEmbed);
     },
diff --git a/src/app/hooks/useLivekitSupport.ts b/src/app/hooks/useLivekitSupport.ts
new file mode 100644
index 000000000..3cb2c1d88
--- /dev/null
+++ b/src/app/hooks/useLivekitSupport.ts
@@ -0,0 +1,16 @@
+import { AutoDiscoveryInfo } from '../cs-api';
+import { useAutoDiscoveryInfo } from './useAutoDiscoveryInfo';
+
+export const livekitSupport = (autoDiscoveryInfo: AutoDiscoveryInfo): boolean => {
+  const rtcFoci = autoDiscoveryInfo['org.matrix.msc4143.rtc_foci'];
+
+  return (
+    Array.isArray(rtcFoci) && rtcFoci.some((info) => typeof info.livekit_service_url === 'string')
+  );
+};
+
+export const useLivekitSupport = (): boolean => {
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+
+  return livekitSupport(autoDiscoveryInfo);
+};
diff --git a/src/app/pages/CallStatusRenderer.tsx b/src/app/pages/CallStatusRenderer.tsx
index 344c67be4..d0fb4732e 100644
--- a/src/app/pages/CallStatusRenderer.tsx
+++ b/src/app/pages/CallStatusRenderer.tsx
@@ -1,10 +1,17 @@
 import { useCallEmbed } from '../hooks/useCallEmbed';
 import { CallStatus } from '../features/call-status';
+import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 
 export function CallStatusRenderer() {
   const callEmbed = useCallEmbed();
+  const selectedRoom = useSelectedRoom();
+
+  const screenSize = useScreenSizeContext();
 
   if (!callEmbed) return null;
 
+  if (screenSize === ScreenSize.Mobile && callEmbed.roomId === selectedRoom) return null;
+
   return <CallStatus callEmbed={callEmbed} />;
 }
diff --git a/src/app/pages/client/AutoDiscovery.tsx b/src/app/pages/client/AutoDiscovery.tsx
new file mode 100644
index 000000000..c39f16cd3
--- /dev/null
+++ b/src/app/pages/client/AutoDiscovery.tsx
@@ -0,0 +1,32 @@
+import { ReactNode, useCallback, useMemo } from 'react';
+import { AutoDiscoveryInfoProvider } from '../../hooks/useAutoDiscoveryInfo';
+import { AsyncStatus, useAsyncCallbackValue } from '../../hooks/useAsyncCallback';
+import { autoDiscovery, AutoDiscoveryInfo } from '../../cs-api';
+import { getMxIdServer } from '../../utils/matrix';
+
+type AutoDiscoveryProps = {
+  userId: string;
+  baseUrl: string;
+  children: ReactNode;
+};
+export function AutoDiscovery({ userId, baseUrl, children }: AutoDiscoveryProps) {
+  const [state] = useAsyncCallbackValue(
+    useCallback(async () => {
+      const server = getMxIdServer(userId);
+      return autoDiscovery(fetch, server ?? userId);
+    }, [userId])
+  );
+
+  const [, info] = state.status === AsyncStatus.Success ? state.data : [];
+
+  const fallback: AutoDiscoveryInfo = useMemo(
+    () => ({
+      'm.homeserver': {
+        base_url: baseUrl,
+      },
+    }),
+    [baseUrl]
+  );
+
+  return <AutoDiscoveryInfoProvider value={info ?? fallback}>{children}</AutoDiscoveryInfoProvider>;
+}
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 1901c483d..8a9f23052 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -36,7 +36,12 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { useSyncState } from '$hooks/useSyncState';
 import { stopPropagation } from '$utils/keyboard';
 import { AuthMetadataProvider } from '$hooks/useAuthMetadata';
-import { sessionsAtom, activeSessionIdAtom, Session, SessionsAction } from '$state/sessions';
+import {
+  sessionsAtom,
+  activeSessionIdAtom,
+  type Session,
+  type SessionsAction,
+} from '$state/sessions';
 import { createLogger } from '$utils/debug';
 import { useSyncNicknames } from '$hooks/useNickname';
 import { useAppVisibility } from '$hooks/useAppVisibility';
@@ -45,6 +50,7 @@ import { useClientConfig } from '$hooks/useClientConfig';
 import { pushSessionToSW } from '../../../sw-session';
 import { SyncStatus } from './SyncStatus';
 import { SpecVersions } from './SpecVersions';
+import { AutoDiscovery } from './AutoDiscovery';
 
 const log = createLogger('ClientRoot');
 
@@ -171,7 +177,7 @@ export function ClientRoot({ children }: ClientRootProps) {
   const activeSession: Session | undefined =
     sessions.find((s) => s.userId === activeSessionId) ?? sessions[0];
 
-  const { baseUrl } = activeSession ?? {};
+  const { baseUrl, userId } = activeSession ?? {};
 
   const loadedUserIdRef = useRef<string | undefined>(undefined);
 
@@ -193,7 +199,9 @@ export function ClientRoot({ children }: ClientRootProps) {
       return newMx;
     }, [activeSession, activeSessionId, setActiveSessionId])
   );
+
   const mx = loadState.status === AsyncStatus.Success ? loadState.data : undefined;
+
   const [startState, startMatrix] = useAsyncCallback<void, Error, [MatrixClient]>(
     useCallback(
       (m) =>
@@ -216,7 +224,6 @@ export function ClientRoot({ children }: ClientRootProps) {
         activeSession.userId,
         '— reloading client'
       );
-      // Update the SW immediately so media requests use the new account's token
       pushSessionToSW(activeSession.baseUrl, activeSession.accessToken);
       if (mx?.clientRunning) {
         stopClient(mx);
@@ -278,48 +285,57 @@ export function ClientRoot({ children }: ClientRootProps) {
       }
     }, [])
   );
+
   return (
-    <SpecVersions baseUrl={baseUrl}>
-      {mx && <SyncStatus mx={mx} />}
-      {loading && <ClientRootOptions mx={mx} onLogout={handleLogout} />}
-      {(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
-        <SplashScreen>
-          <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
-            <Dialog>
-              <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
-                {loadState.status === AsyncStatus.Error && (
-                  <Text>{`Failed to load. ${loadState.error.message}`}</Text>
-                )}
-                {startState.status === AsyncStatus.Error && (
-                  <Text>{`Failed to start. ${startState.error.message}`}</Text>
-                )}
-                <Button variant="Critical" onClick={mx ? () => startMatrix(mx) : loadMatrix}>
-                  <Text as="span" size="B400">
-                    Retry
-                  </Text>
-                </Button>
-              </Box>
-            </Dialog>
-          </Box>
-        </SplashScreen>
-      )}
-      {loading || !mx ? (
-        <ClientRootLoading />
-      ) : (
-        <MatrixClientProvider value={mx}>
-          <ServerConfigsLoader>
-            {(serverConfigs) => (
-              <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>
-                <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
-                  <AuthMetadataProvider value={serverConfigs.authMetadata}>
-                    {children}
-                  </AuthMetadataProvider>
-                </MediaConfigProvider>
-              </CapabilitiesProvider>
-            )}
-          </ServerConfigsLoader>
-        </MatrixClientProvider>
-      )}
-    </SpecVersions>
+    <AutoDiscovery userId={userId} baseUrl={baseUrl}>
+      <SpecVersions baseUrl={baseUrl}>
+        {mx && <SyncStatus mx={mx} />}
+        {loading && <ClientRootOptions mx={mx} onLogout={handleLogout} />}
+        {(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
+          <SplashScreen>
+            <Box
+              direction="Column"
+              grow="Yes"
+              alignItems="Center"
+              justifyContent="Center"
+              gap="400"
+            >
+              <Dialog>
+                <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
+                  {loadState.status === AsyncStatus.Error && (
+                    <Text>{`Failed to load. ${loadState.error.message}`}</Text>
+                  )}
+                  {startState.status === AsyncStatus.Error && (
+                    <Text>{`Failed to start. ${startState.error.message}`}</Text>
+                  )}
+                  <Button variant="Critical" onClick={mx ? () => startMatrix(mx) : loadMatrix}>
+                    <Text as="span" size="B400">
+                      Retry
+                    </Text>
+                  </Button>
+                </Box>
+              </Dialog>
+            </Box>
+          </SplashScreen>
+        )}
+        {loading || !mx ? (
+          <ClientRootLoading />
+        ) : (
+          <MatrixClientProvider value={mx}>
+            <ServerConfigsLoader>
+              {(serverConfigs) => (
+                <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>
+                  <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
+                    <AuthMetadataProvider value={serverConfigs.authMetadata}>
+                      {children}
+                    </AuthMetadataProvider>
+                  </MediaConfigProvider>
+                </CapabilitiesProvider>
+              )}
+            </ServerConfigsLoader>
+          </MatrixClientProvider>
+        )}
+      </SpecVersions>
+    </AutoDiscovery>
   );
 }
diff --git a/src/app/plugins/call/CallControl.ts b/src/app/plugins/call/CallControl.ts
index 5a8578f66..c30ffc1c7 100644
--- a/src/app/plugins/call/CallControl.ts
+++ b/src/app/plugins/call/CallControl.ts
@@ -14,12 +14,58 @@ export class CallControl extends EventEmitter implements CallControlState {
 
   private iframe: HTMLIFrameElement;
 
+  private controlMutationObserver: MutationObserver;
+
+  private get document(): Document | undefined {
+    return this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
+  }
+
+  private get screenshareButton(): HTMLElement | undefined {
+    const screenshareBtn = this.document?.querySelector(
+      '[data-testid="incall_screenshare"]'
+    ) as HTMLElement | null;
+
+    return screenshareBtn ?? undefined;
+  }
+
+  private get settingsButton(): HTMLElement | undefined {
+    const leaveBtn = this.document?.querySelector('[data-testid="incall_leave"]');
+
+    const settingsButton = leaveBtn?.previousElementSibling as HTMLElement | null;
+
+    return settingsButton ?? undefined;
+  }
+
+  private get reactionsButton(): HTMLElement | undefined {
+    const reactionsButton = this.settingsButton?.previousElementSibling as HTMLElement | null;
+
+    return reactionsButton ?? undefined;
+  }
+
+  private get spotlightButton(): HTMLInputElement | undefined {
+    const spotlightButton = this.document?.querySelector(
+      'input[value="spotlight"]'
+    ) as HTMLInputElement | null;
+
+    return spotlightButton ?? undefined;
+  }
+
+  private get gridButton(): HTMLInputElement | undefined {
+    const gridButton = this.document?.querySelector(
+      'input[value="grid"]'
+    ) as HTMLInputElement | null;
+
+    return gridButton ?? undefined;
+  }
+
   constructor(state: CallControlState, call: ClientWidgetApi, iframe: HTMLIFrameElement) {
     super();
 
     this.state = state;
     this.call = call;
     this.iframe = iframe;
+
+    this.controlMutationObserver = new MutationObserver(this.onControlMutation.bind(this));
   }
 
   public getState(): CallControlState {
@@ -38,6 +84,14 @@ export class CallControl extends EventEmitter implements CallControlState {
     return this.state.sound;
   }
 
+  public get screenshare(): boolean {
+    return this.state.screenshare;
+  }
+
+  public get spotlight(): boolean {
+    return this.state.spotlight;
+  }
+
   public async applyState() {
     await this.setMediaState({
       audio_enabled: this.microphone,
@@ -47,6 +101,26 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.emitStateUpdate();
   }
 
+  public startObserving() {
+    this.controlMutationObserver.disconnect();
+
+    const screenshareBtn = this.screenshareButton;
+    if (screenshareBtn) {
+      this.controlMutationObserver.observe(screenshareBtn, {
+        attributes: true,
+        attributeFilter: ['data-kind'],
+      });
+    }
+    const spotlightBtn = this.spotlightButton;
+    if (spotlightBtn) {
+      this.controlMutationObserver.observe(spotlightBtn, {
+        attributes: true,
+      });
+    }
+
+    this.onControlMutation();
+  }
+
   public applySound() {
     this.setSound(this.sound);
   }
@@ -72,7 +146,9 @@ export class CallControl extends EventEmitter implements CallControlState {
     const state = new CallControlState(
       data.audio_enabled ?? this.microphone,
       data.video_enabled ?? this.video,
-      this.sound
+      this.sound,
+      this.screenshare,
+      this.spotlight
     );
 
     this.state = state;
@@ -83,6 +159,20 @@ export class CallControl extends EventEmitter implements CallControlState {
     }
   }
 
+  public onControlMutation() {
+    const screenshare: boolean = this.screenshareButton?.getAttribute('data-kind') === 'primary';
+    const spotlight: boolean = this.spotlightButton?.checked ?? false;
+
+    this.state = new CallControlState(
+      this.microphone,
+      this.video,
+      this.sound,
+      screenshare,
+      spotlight
+    );
+    this.emitStateUpdate();
+  }
+
   public toggleMicrophone() {
     const payload: ElementMediaStatePayload = {
       audio_enabled: !this.microphone,
@@ -104,7 +194,13 @@ export class CallControl extends EventEmitter implements CallControlState {
 
     this.setSound(sound);
 
-    const state = new CallControlState(this.microphone, this.video, sound);
+    const state = new CallControlState(
+      this.microphone,
+      this.video,
+      sound,
+      this.screenshare,
+      this.spotlight
+    );
     this.state = state;
     this.emitStateUpdate();
 
@@ -113,6 +209,30 @@ export class CallControl extends EventEmitter implements CallControlState {
     }
   }
 
+  public toggleScreenshare() {
+    this.screenshareButton?.click();
+  }
+
+  public toggleSpotlight() {
+    if (this.spotlight) {
+      this.gridButton?.click();
+      return;
+    }
+    this.spotlightButton?.click();
+  }
+
+  public toggleReactions() {
+    this.reactionsButton?.click();
+  }
+
+  public toggleSettings() {
+    this.settingsButton?.click();
+  }
+
+  public dispose() {
+    this.controlMutationObserver.disconnect();
+  }
+
   private emitStateUpdate() {
     this.emit(CallControlEvent.StateUpdate);
   }
diff --git a/src/app/plugins/call/CallControlState.ts b/src/app/plugins/call/CallControlState.ts
index 42f0b1965..fc7e3f22b 100644
--- a/src/app/plugins/call/CallControlState.ts
+++ b/src/app/plugins/call/CallControlState.ts
@@ -5,9 +5,21 @@ export class CallControlState {
 
   public readonly sound: boolean;
 
-  constructor(microphone: boolean, video: boolean, sound: boolean) {
+  public readonly screenshare: boolean;
+
+  public readonly spotlight: boolean;
+
+  constructor(
+    microphone: boolean,
+    video: boolean,
+    sound: boolean,
+    screenshare = false,
+    spotlight = false
+  ) {
     this.microphone = microphone;
     this.video = video;
     this.sound = sound;
+    this.screenshare = screenshare;
+    this.spotlight = spotlight;
   }
 }
diff --git a/src/app/plugins/call/CallEmbed.ts b/src/app/plugins/call/CallEmbed.ts
index c0c02f9c1..c370bfac5 100644
--- a/src/app/plugins/call/CallEmbed.ts
+++ b/src/app/plugins/call/CallEmbed.ts
@@ -146,7 +146,7 @@ export class CallEmbed {
 
     let initialMediaEvent = true;
     this.disposables.push(
-      this.listenEvent<ElementMediaStateDetail>(ElementWidgetActions.DeviceMute, (evt) => {
+      this.listenAction<ElementMediaStateDetail>(ElementWidgetActions.DeviceMute, (evt) => {
         if (initialMediaEvent) {
           initialMediaEvent = false;
           this.control.applyState();
@@ -177,18 +177,27 @@ export class CallEmbed {
     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);
-    };
+  public onPreparing(callback: () => void) {
+    return this.listenEvent('preparing', callback);
+  }
+
+  public onPreparingError(callback: (error: any) => void) {
+    return this.listenEvent('error:preparing', callback);
+  }
+
+  public onReady(callback: () => void) {
+    return this.listenEvent('ready', callback);
+  }
+
+  public onCapabilitiesNotified(callback: () => void) {
+    return this.listenEvent('capabilitiesNotified', 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))
+      this.listenAction(ElementWidgetActions.JoinCall, this.onCallJoined.bind(this))
     );
 
     // Populate the map of "read up to" events for this widget with the current event in every room.
@@ -220,6 +229,7 @@ export class CallEmbed {
     });
     this.call.stop();
     this.container.removeChild(this.iframe);
+    this.control.dispose();
 
     this.mx.off(ClientEvent.Event, this.onEvent.bind(this));
     this.mx.off(MatrixEventEvent.Decrypted, this.onEventDecrypted.bind(this));
@@ -233,6 +243,21 @@ export class CallEmbed {
 
   private onCallJoined(): void {
     this.joined = true;
+    this.applyStyles();
+    this.control.startObserving();
+  }
+
+  private applyStyles(): void {
+    const doc = this.document;
+    if (!doc) return;
+
+    doc.body.style.setProperty('background', 'none', 'important');
+    const controls = doc.body.querySelector('[data-testid="incall_leave"]')?.parentElement
+      ?.parentElement;
+    if (controls) {
+      controls.style.setProperty('position', 'absolute');
+      controls.style.setProperty('visibility', 'hidden');
+    }
   }
 
   private onEvent(ev: MatrixEvent): void {
@@ -359,4 +384,15 @@ export class CallEmbed {
       }
     }
   }
+
+  public listenAction<T>(type: string, callback: (event: CustomEvent<T>) => void) {
+    return this.listenEvent(`action:${type}`, callback);
+  }
+
+  public listenEvent<T>(type: string, callback: (event: T) => void) {
+    this.call.on(type, callback);
+    return () => {
+      this.call.off(type, callback);
+    };
+  }
 }
diff --git a/src/app/plugins/recent-emoji.ts b/src/app/plugins/recent-emoji.ts
index c511159d1..ca7b25cc1 100644
--- a/src/app/plugins/recent-emoji.ts
+++ b/src/app/plugins/recent-emoji.ts
@@ -27,7 +27,11 @@ export const getRecentEmojis = (mx: MatrixClient, limit?: number): IEmoji[] => {
 
 export function addRecentEmoji(mx: MatrixClient, unicode: string) {
   const recentEmojiEvent = getAccountData(mx, AccountDataEvent.ElementRecentEmoji);
-  const recentEmoji = recentEmojiEvent?.getContent<IRecentEmojiContent>().recent_emoji ?? [];
+  const recentEmojiContent = recentEmojiEvent?.getContent<IRecentEmojiContent>();
+  const recentEmoji =
+    recentEmojiContent && Array.isArray(recentEmojiContent.recent_emoji)
+      ? structuredClone(recentEmojiContent.recent_emoji)
+      : [];
 
   const emojiIndex = recentEmoji.findIndex(([u]) => u === unicode);
   let entry: [EmojiUnicode, EmojiUsageCount];
diff --git a/src/app/utils/common.ts b/src/app/utils/common.ts
index 8507e06ce..fb1e0b16b 100644
--- a/src/app/utils/common.ts
+++ b/src/app/utils/common.ts
@@ -87,16 +87,16 @@ export const scaleYDimension = (x: number, scaledX: number, y: number): number =
 };
 
 export const parseGeoUri = (location: string) => {
-  if (!location) return null;
+  if (!location) return undefined;
 
   const [, data] = location.split(':');
-  if (!data) return null;
+  if (!data) return undefined;
 
   const [cords] = data.split(';');
-  if (!cords) return null;
+  if (!cords) return undefined;
 
   const [latitude, longitude] = cords.split(',');
-  if (!latitude || !longitude) return null;
+  if (!latitude || !longitude) return undefined;
 
   return {
     latitude,
@@ -112,8 +112,8 @@ export const trimTrailingSlash = (str: string): string => str.replace(END_SLASHE
 export const trimSlash = (str: string): string => trimLeadingSlash(trimTrailingSlash(str));
 
 export const nameInitials = (str: string | undefined | null, len = 1): string => {
-  if (!str) return '�';
-  return [...str].slice(0, len).join('') || '�';
+  if (!str) return '';
+  return [...str].slice(0, len).join('') || '';
 };
 
 export const randomStr = (len = 12): string => {