diff --git a/.cargo/config.toml b/.cargo/config.toml
index 1e4c80007..10deaca5b 100644
--- a/.cargo/config.toml
+++ b/.cargo/config.toml
@@ -3,3 +3,12 @@
 [target.'cfg(all())']
 rustflags = ["--cfg", "ruma_identifiers_storage=\"Arc\""]
 
+## LiveKit/libwebrtc requires -ObjC linker flag on macOS
+[target.'cfg(target_os = "macos")']
+rustflags = ["-C", "link-args=-Wl,-ObjC"]
+
+[target.x86_64-pc-windows-msvc]                                                                                                                 
+rustflags = ["-C", "target-feature=-crt-static"]                                                                                                
+                                                                                                                                                
+[target.aarch64-pc-windows-msvc]                                                                                                                
+rustflags = ["-C", "target-feature=-crt-static"]
\ No newline at end of file
diff --git a/.github/workflows/builds.yml b/.github/workflows/builds.yml
index 7aee76ee6..559708920 100644
--- a/.github/workflows/builds.yml
+++ b/.github/workflows/builds.yml
@@ -123,9 +123,16 @@ jobs:
         with:
           key: macos-${{ matrix.arch }}-build-${{ hashFiles('Cargo.lock') }}
 
+      - name: Install LLVM
+        run: brew install llvm
+
       - name: Build
         env:
           RUSTFLAGS: "-D warnings"
+          # Use Homebrew LLVM for C++ compilation to avoid cxx contiguous_range
+          # static_assert issue with Apple's libc++
+          CXX: ${{ matrix.arch == 'arm64' && '/opt/homebrew/opt/llvm/bin/clang++' || '/usr/local/opt/llvm/bin/clang++' }}
+          CC: ${{ matrix.arch == 'arm64' && '/opt/homebrew/opt/llvm/bin/clang' || '/usr/local/opt/llvm/bin/clang' }}
         run: |
           cargo build --profile fast
 
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index c0dd613dc..9aa87d0dc 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -50,6 +50,10 @@ jobs:
     runs-on: macos-14  ## avoids having to install Linux deps
     steps:
       - uses: actions/checkout@v4
+      - name: Select Xcode version
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: '16.1.0'
       - uses: dtolnay/rust-toolchain@stable
         with:
           components: rustfmt, clippy
diff --git a/Cargo.toml b/Cargo.toml
index 564970744..9e951c631 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -69,6 +69,7 @@ matrix-sdk-ui = { git = "https://github.com/project-robius/matrix-rust-sdk", bra
 ruma = { git = "https://github.com/ruma/ruma", rev = "a0acf4187a7c7557d145db54bcb23b01f6295ce7", features = [
     "compat-optional",
     "compat-unset-avatar",
+    "unstable-msc3401",
 ] }
 rand = "0.8.5"
 rangemap = "1.5.0"
@@ -85,6 +86,14 @@ url = "2.5.0"
 rfd = "0.15"
 cargo-packager-updater = "0.2"
 semver = "1"
+## nokhwa camera capture - only for desktop platforms (core-video-sys doesn't work on iOS)
+nokhwa = { version = "0.10", features = ["input-native"] }
+
+## LiveKit WebRTC SDK - only for desktop platforms (macOS, Linux)
+## Windows is excluded due to MSVC runtime library mismatch with webrtc-sys
+## rustls-tls-native-roots is required for WSS connections
+[target.'cfg(all(not(any(target_os = "android", target_os = "ios", target_os = "windows"))))'.dependencies]
+livekit = { version = "0.7", features = ["rustls-tls-native-roots"] }
 
 ## Dependencies for TSP support.
 ## Commit "f0bc4625dcd729e07e4a36257df2f1d94c81cef4" is the most recent one without the invalid change to pin serde to 1.0.219.
diff --git a/makepad b/makepad
new file mode 160000
index 000000000..2cff94d01
--- /dev/null
+++ b/makepad
@@ -0,0 +1 @@
+Subproject commit 2cff94d01b842643699c0ee4a23c4d9462c43f8d
diff --git a/resources/icons/microphone.svg b/resources/icons/microphone.svg
new file mode 100644
index 000000000..4f2957aa5
--- /dev/null
+++ b/resources/icons/microphone.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+  <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+  <line x1="12" y1="19" x2="12" y2="23"/>
+  <line x1="8" y1="23" x2="16" y2="23"/>
+</svg>
diff --git a/resources/icons/video.svg b/resources/icons/video.svg
new file mode 100644
index 000000000..5ac9a5a63
--- /dev/null
+++ b/resources/icons/video.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polygon points="23 7 16 12 23 17 23 7"/>
+  <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
+</svg>
diff --git a/src/app.rs b/src/app.rs
index f4123db8e..e0f81ca59 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -8,6 +8,7 @@ use std::{cell::RefCell, collections::HashMap};
 use makepad_widgets::*;
 use matrix_sdk::{RoomState, ruma::{OwnedEventId, OwnedMxcUri, OwnedRoomId, OwnedUserId, RoomId, UserId, events::room::message::RoomMessageEventContent}};
 use serde::{Deserialize, Serialize};
+use makepad_widgets::makepad_platform::permission::Permission;
 use crate::{
     avatar_cache::{self, AvatarCacheEntry, clear_avatar_cache}, home::{
         add_room::{CreateRoomModalAction, CreateRoomModalWidgetRefExt},
@@ -18,7 +19,8 @@ use crate::{
     }, login::login_screen::LoginAction, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction, LogoutConfirmModalWidgetRefExt}, persistence, profile::{user_profile::UserProfile, user_profile_cache::clear_user_profile_cache}, room::{BasicRoomDetails, FetchedRoomAvatar}, shared::{avatar::{AvatarState, AvatarWidgetRefExt}, confirmation_modal::{ConfirmationModalContent, ConfirmationModalWidgetRefExt}, file_upload_modal::{FilePreviewerAction, FileUploadModalWidgetRefExt}, image_viewer::{ImageViewerAction, LoadState}, popup_list::{PopupKind, enqueue_popup_notification}, room_filter_input_bar::FilterAction}, sliding_sync::{DirectMessageRoomAction, MatrixRequest, RemoteDirectorySearchKind, RemoteDirectorySearchResult, TimelineKind, AccountSwitchAction, current_user_id, submit_async_request, get_timeline_update_sender}, utils::RoomNameId, verification::VerificationAction, verification_modal::{
         VerificationModalAction,
         VerificationModalWidgetRefExt,
-    }
+    },
+    voip::{VoipGlobalState, VoipAction, PipVoipOverlayWidgetRefExt},
 };
 
 script_mod! {
@@ -311,6 +313,9 @@ script_mod! {
                             }
                         }
 
+                        // PiP overlay for VoIP calls (shown when switching away from active call)
+                        pip_voip_overlay := PipVoipOverlay {}
+
                         PopupList {}
 
                         // Tooltips must be shown in front of all other UI elements,
@@ -630,19 +635,9 @@ impl MatchEvent for App {
             log!("App::Startup: initializing TSP (Trust Spanning Protocol) module.");
             crate::tsp::tsp_init(_tokio_rt_handle).unwrap();
         }
-    }
 
-    fn handle_signal(&mut self, cx: &mut Cx) {
-        avatar_cache::process_avatar_updates(cx);
-        self.refresh_room_filter_modal_result_buttons(cx);
-    }
-
-    fn handle_timer(&mut self, cx: &mut Cx, event: &TimerEvent) {
-        if self.room_filter_debounce_timer.is_timer(event).is_some() {
-            self.room_filter_debounce_timer = Timer::empty();
-            let keywords = std::mem::take(&mut self.pending_room_filter_keywords);
-            self.update_room_filter_modal_results(cx, &keywords);
-        }
+        // Initialize VoIP global state (camera permissions, video inputs)
+        VoipGlobalState::initialize(cx);
     }
 
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
@@ -1007,6 +1002,42 @@ impl MatchEvent for App {
                 _ => {}
             }
 
+            // Handle VoIP PiP overlay actions
+            match action.downcast_ref() {
+                Some(VoipAction::ShowPip { room_id }) => {
+                    log!("App: VoipAction::ShowPip received for room {}", room_id);
+                    self.ui.pip_voip_overlay(cx, ids!(pip_voip_overlay)).show(cx, room_id.clone());
+                    continue;
+                }
+                Some(VoipAction::HidePip) => {
+                    log!("App: VoipAction::HidePip received");
+                    self.ui.pip_voip_overlay(cx, ids!(pip_voip_overlay)).hide(cx);
+                    continue;
+                }
+                Some(VoipAction::ReturnToVoipTab { room_id }) => {
+                    log!("App: VoipAction::ReturnToVoipTab received for room {}", room_id);
+                    // Hide the PiP overlay
+                    self.ui.pip_voip_overlay(cx, ids!(pip_voip_overlay)).hide(cx);
+                    // Navigate back to the VoIP tab by emitting a RoomsListAction::Selected
+                    // We need to look up the room name from RoomsList
+                    if let Some(room_name_id) = cx.get_global::<RoomsListRef>().get_room_name(room_id) {
+                        cx.widget_action(
+                            self.ui.widget_uid(),
+                            RoomsListAction::Selected(SelectedRoom::Voip { room_name_id }),
+                        );
+                    }
+                    self.ui.redraw(cx);
+                    continue;
+                }
+                Some(VoipAction::PipHangup { room_id }) => {
+                    log!("App: VoipAction::PipHangup received for room {}", room_id);
+                    // Hide the PiP overlay - the VoipScreen will handle the actual hangup
+                    self.ui.pip_voip_overlay(cx, ids!(pip_voip_overlay)).hide(cx);
+                    // The action will continue to propagate to VoipScreen
+                }
+                _ => {}
+            }
+
             // When a stack navigation pop is initiated (back button pressed),
             // pop the mobile nav stack so it stays in sync with StackNavigation.
             if let StackNavigationAction::Pop = action.as_widget_action().cast() {
@@ -1044,6 +1075,10 @@ impl MatchEvent for App {
                     self.app_state.logged_in = logged_in_actual;
                     // Initialize the global translation config so RoomInputBar can access it.
                     crate::room::translation::set_global_config(&self.app_state.translation);
+
+                    // Restore VoIP token state to global state for caching
+                    VoipGlobalState::restore_token_state(cx, self.app_state.voip_tokens.clone());
+
                     cx.action(MainDesktopUiAction::LoadDockFromAppState);
                     continue;
                 }
@@ -1458,6 +1493,8 @@ impl AppMain for App {
         crate::join_leave_room_modal::script_mod(vm);
         crate::verification_modal::script_mod(vm);
         crate::profile::script_mod(vm);
+        crate::voip::voip_screen::script_mod(vm);
+        crate::voip::pip_overlay::script_mod(vm);
         crate::home::script_mod(vm);
         crate::login::script_mod(vm);
         crate::logout::script_mod(vm);
@@ -1472,6 +1509,8 @@ impl AppMain for App {
                 error!("Failed to save window state. Error: {e}");
             }
             if let Some(user_id) = current_user_id() {
+                // Get the latest VoIP token state from global state before saving
+                self.app_state.voip_tokens = VoipGlobalState::get_token_state(cx);
                 let app_state = self.app_state.clone();
                 if let Err(e) = persistence::save_app_state(app_state, user_id) {
                     error!("Failed to save app state. Error: {e}");
@@ -1498,6 +1537,17 @@ impl AppMain for App {
             }
         }
         
+        // Handle VoIP-related events at app level (before VoipScreen is shown)
+        match event {
+            Event::PermissionResult(result) if result.permission == Permission::Camera => {
+                VoipGlobalState::handle_permission_result(cx, result.status);
+            }
+            Event::VideoInputs(ev) => {
+                VoipGlobalState::handle_video_inputs(cx, ev);
+            }
+            _ => {}
+        }
+
         // Forward events to the MatchEvent trait implementation.
         self.match_event(cx, event);
         let scope = &mut Scope::with_data(&mut self.app_state);
@@ -1961,6 +2011,12 @@ impl App {
                     .set_displayed_space(cx, space_name_id);
                 id!(space_lobby_view)
             }
+            SelectedRoom::Voip { room_name_id } => {
+                // VoIP uses RoomScreen with VoIP as main content (no timeline)
+                let room_screen = self.ui.room_screen(cx, ids!(room_screen_0));
+                room_screen.set_voip_visible(cx, true, Some(room_name_id.room_id().clone()));
+                id!(room_view_0)
+            }
         };
 
         // Set the header title for the view being pushed.
@@ -2025,6 +2081,12 @@ pub struct AppState {
     pub adding_account: bool,
     /// Local configuration and UI state for bot-assisted room binding.
     pub bot_settings: BotSettingsState,
+    /// The room ID for VoIP calls, set when navigating to VoIP screen from a call notification.
+    #[serde(skip)]
+    pub voip_room_id: Option<OwnedRoomId>,
+    /// Cached VoIP tokens (OpenID and LiveKit JWT) for faster reconnection.
+    #[serde(default)]
+    pub voip_tokens: crate::voip::VoipTokenState,
     /// Translation API configuration.
     #[serde(default)]
     pub translation: crate::room::translation::TranslationConfig,
@@ -2316,6 +2378,9 @@ pub enum SelectedRoom {
     Space {
         space_name_id: RoomNameId,
     },
+    Voip {
+        room_name_id: RoomNameId,
+    },
 }
 
 impl SelectedRoom {
@@ -2325,6 +2390,8 @@ impl SelectedRoom {
             SelectedRoom::InvitedRoom { room_name_id } => room_name_id.room_id(),
             SelectedRoom::Space { space_name_id } => space_name_id.room_id(),
             SelectedRoom::Thread { room_name_id, .. } => room_name_id.room_id(),
+            SelectedRoom::Voip { room_name_id } => room_name_id.room_id(),
+
         }
     }
 
@@ -2334,6 +2401,26 @@ impl SelectedRoom {
             SelectedRoom::InvitedRoom { room_name_id } => room_name_id,
             SelectedRoom::Space { space_name_id } => space_name_id,
             SelectedRoom::Thread { room_name_id, .. } => room_name_id,
+            SelectedRoom::Voip { room_name_id } => room_name_id,
+        }
+    }
+
+    /// Returns the `TimelineKind` for this room, if applicable.
+    /// Returns `None` for invited rooms, spaces, and VoIP rooms which don't have timelines.
+    pub fn timeline_kind(&self) -> Option<TimelineKind> {
+        match self {
+            SelectedRoom::JoinedRoom { room_name_id } => {
+                Some(TimelineKind::MainRoom { room_id: room_name_id.room_id().clone() })
+            }
+            SelectedRoom::Thread { room_name_id, thread_root_event_id } => {
+                Some(TimelineKind::Thread {
+                    room_id: room_name_id.room_id().clone(),
+                    thread_root_event_id: thread_root_event_id.clone(),
+                })
+            }
+            SelectedRoom::InvitedRoom { .. } => None,
+            SelectedRoom::Space { .. } => None,
+            SelectedRoom::Voip { .. } => None,
         }
     }
 
@@ -2364,6 +2451,12 @@ impl SelectedRoom {
                     &format!("{}##{}", room_name_id.room_id(), thread_root_event_id)
                 )
             }
+            SelectedRoom::Voip { room_name_id } => {
+                // VoIP tabs get a distinct ID to differentiate from normal room tabs
+                LiveId::from_str(
+                    &format!("{}##voip", room_name_id.room_id())
+                )
+            }
             other => LiveId::from_str(other.room_id().as_str()),
         }
     }
@@ -2375,26 +2468,7 @@ impl SelectedRoom {
             SelectedRoom::InvitedRoom { room_name_id } => room_name_id.to_string(),
             SelectedRoom::Space { space_name_id } => format!("[Space] {space_name_id}"),
             SelectedRoom::Thread { room_name_id, .. } => format!("[Thread] {room_name_id}"),
-        }
-    }
-
-    /// Returns the `TimelineKind` for this selected room.
-    ///
-    /// Returns `None` for `InvitedRoom` and `Space` variants, as they don't have timelines.
-    pub fn timeline_kind(&self) -> Option<TimelineKind> {
-        match self {
-            SelectedRoom::JoinedRoom { room_name_id } => {
-                Some(TimelineKind::MainRoom {
-                    room_id: room_name_id.room_id().clone(),
-                })
-            }
-            SelectedRoom::Thread { room_name_id, thread_root_event_id } => {
-                Some(TimelineKind::Thread {
-                    room_id: room_name_id.room_id().clone(),
-                    thread_root_event_id: thread_root_event_id.clone(),
-                })
-            }
-            SelectedRoom::InvitedRoom { .. } | SelectedRoom::Space { .. } => None,
+            SelectedRoom::Voip { room_name_id } => format!("[VoIP] {room_name_id}"),
         }
     }
 }
@@ -2402,6 +2476,7 @@ impl SelectedRoom {
 impl PartialEq for SelectedRoom {
     fn eq(&self, other: &Self) -> bool {
         match (self, other) {
+            // Threads are equal if room_id and thread_root_event_id match
             (
                 SelectedRoom::Thread {
                     room_name_id: lhs_room_name_id,
@@ -2415,7 +2490,16 @@ impl PartialEq for SelectedRoom {
                 lhs_room_name_id.room_id() == rhs_room_name_id.room_id()
                     && lhs_thread_root_event_id == rhs_thread_root_event_id
             }
+            // Thread is never equal to non-Thread
             (SelectedRoom::Thread { .. }, _) | (_, SelectedRoom::Thread { .. }) => false,
+            // VoIP rooms are equal only to other VoIP rooms with same room_id
+            (
+                SelectedRoom::Voip { room_name_id: lhs },
+                SelectedRoom::Voip { room_name_id: rhs },
+            ) => lhs.room_id() == rhs.room_id(),
+            // VoIP is never equal to non-VoIP (even if same room_id)
+            (SelectedRoom::Voip { .. }, _) | (_, SelectedRoom::Voip { .. }) => false,
+            // All other variants compare by room_id only
             _ => self.room_id() == other.room_id(),
         }
     }
diff --git a/src/home/home_screen.rs b/src/home/home_screen.rs
index bb7cb03bb..c3d7d6b69 100644
--- a/src/home/home_screen.rs
+++ b/src/home/home_screen.rs
@@ -525,6 +525,7 @@ impl HomeScreen {
                     | SelectedTab::Home => id!(home_page),
                     SelectedTab::Settings => id!(settings_page),
                     SelectedTab::AddRoom => id!(add_room_page),
+                    SelectedTab::VoIP => id!(voip_page),
                 },
             )
     }
diff --git a/src/home/main_desktop_ui.rs b/src/home/main_desktop_ui.rs
index be32c291d..354e2f944 100644
--- a/src/home/main_desktop_ui.rs
+++ b/src/home/main_desktop_ui.rs
@@ -3,7 +3,7 @@ use ruma::OwnedRoomId;
 use tokio::sync::Notify;
 use std::{collections::HashMap, sync::Arc};
 
-use crate::{app::{AppState, AppStateAction, SavedDockState, SelectedRoom}, home::{navigation_tab_bar::{NavigationBarAction, SelectedTab}, rooms_list::RoomsListRef, space_lobby::SpaceLobbyScreenWidgetRefExt}, logout::logout_confirm_modal::LogoutAction, sliding_sync::AccountSwitchAction, utils::RoomNameId};
+use crate::{app::{AppState, AppStateAction, SavedDockState, SelectedRoom}, home::{navigation_tab_bar::{NavigationBarAction, SelectedTab}, rooms_list::RoomsListRef, space_lobby::SpaceLobbyScreenWidgetRefExt}, logout::logout_confirm_modal::LogoutAction, sliding_sync::AccountSwitchAction, utils::RoomNameId, voip::{VoipAction, VoipGlobalState, VoipScreenWidgetRefExt}};
 use super::{invite_screen::InviteScreenWidgetRefExt, room_screen::RoomScreenWidgetRefExt, rooms_list::RoomsListAction};
 
 script_mod! {
@@ -62,6 +62,7 @@ script_mod! {
             room_screen := mod.widgets.RoomScreen {}
             invite_screen := mod.widgets.InviteScreen {}
             space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
+            voip_screen := mod.widgets.VoipScreen {}
         }
     }
 }
@@ -176,6 +177,10 @@ impl MainDesktopUI {
                     space_name_id,
                 );
             }
+            SelectedRoom::Voip { room_name_id } => {
+                // VoIP tabs use VoipScreen directly, not RoomScreen
+                widget.as_voip_screen().initialize(cx, room_name_id.room_id().clone());
+            }
         }
     }
 
@@ -205,6 +210,7 @@ impl MainDesktopUI {
         let kind = match &room {
             SelectedRoom::JoinedRoom { .. }
             | SelectedRoom::Thread { .. } => id!(room_screen),
+            SelectedRoom::Voip { .. } => id!(voip_screen),  // VoIP uses standalone VoipScreen
             SelectedRoom::InvitedRoom { .. } => id!(invite_screen),
             SelectedRoom::Space { .. } => id!(space_lobby_screen),
         };
@@ -240,8 +246,10 @@ impl MainDesktopUI {
 
     /// Closes a tab in the dock and focuses on the latest open room.
     fn close_tab(&mut self, cx: &mut Cx, tab_id: LiveId) {
+        log!("close_tab called for tab_id: {:?}", tab_id);
         let dock = self.view.dock(cx, ids!(dock));
         if let Some(room_being_closed) = self.open_rooms.get(&tab_id) {
+            log!("Found room to close: {:?}", room_being_closed);
             self.room_order.retain(|sr| sr != room_being_closed);
 
             if self.open_rooms.len() > 1 {
@@ -260,15 +268,20 @@ impl MainDesktopUI {
                 }
             } else {
                 // If there is no room to focus, notify app to reset the selected room in the app state
+                log!("No more rooms to focus, selecting home_tab");
                 cx.action(AppStateAction::FocusNone);
                 dock.select_tab(cx, id!(home_tab));
                 self.most_recently_selected_room = None;
             }
+        } else {
+            log!("Room not found in open_rooms for tab_id: {:?}", tab_id);
         }
 
+        log!("Calling dock.close_tab for tab_id: {:?}", tab_id);
         dock.close_tab(cx, tab_id);
         self.tab_to_close = None;
         self.open_rooms.remove(&tab_id);
+        log!("Tab closed, open_rooms now has {} tabs", self.open_rooms.len());
     }
 
     /// Closes all tabs
@@ -460,6 +473,25 @@ impl WidgetMatchEvent for MainDesktopUI {
             match widget_action.cast() {
                 // Whenever a tab (except for the home_tab) is pressed, notify the app state.
                 DockAction::TabWasPressed(tab_id) => {
+                    // Check if we're switching FROM a VoIP tab with active call -> show PiP
+                    // Or if we're switching TO a VoIP tab -> hide PiP
+                    let prev_room = self.most_recently_selected_room.clone();
+                    let new_room = self.open_rooms.get(&tab_id).cloned();
+
+                    // Detect switch TO VoIP tab -> hide PiP
+                    if let Some(SelectedRoom::Voip { .. }) = &new_room {
+                        log!("MainDesktopUI: Switching TO VoIP tab, hiding PiP");
+                        cx.action(VoipAction::HidePip);
+                    }
+                    // Detect switch FROM VoIP tab with active call -> show PiP
+                    else if let Some(SelectedRoom::Voip { room_name_id }) = &prev_room {
+                        let room_id = room_name_id.room_id();
+                        if VoipGlobalState::is_call_active(cx, room_id) {
+                            log!("MainDesktopUI: Switching FROM VoIP tab with active call, showing PiP");
+                            cx.action(VoipAction::ShowPip { room_id: room_id.clone() });
+                        }
+                    }
+
                     if tab_id == id!(home_tab) {
                         cx.action(AppStateAction::FocusNone);
                         self.most_recently_selected_room = None;
@@ -476,6 +508,15 @@ impl WidgetMatchEvent for MainDesktopUI {
                     should_save_dock_action = true;
                 }
                 DockAction::TabCloseWasPressed(tab_id) => {
+                    // If closing a VoIP tab, call hangup on the VoipScreen first and hide PiP
+                    if let Some(SelectedRoom::Voip { .. }) = self.open_rooms.get(&tab_id) {
+                        log!("MainDesktopUI: Closing VoIP tab via dock X button, calling hangup and hiding PiP");
+                        let dock = self.view.dock(cx, ids!(dock));
+                        let widget = dock.item(tab_id);
+                        widget.as_voip_screen().hangup(cx);
+                        // Hide PiP when VoIP tab is closed
+                        cx.action(VoipAction::HidePip);
+                    }
                     self.tab_to_close = Some(tab_id);
                     self.close_tab(cx, tab_id);
                     self.redraw(cx);
@@ -518,6 +559,7 @@ impl WidgetMatchEvent for MainDesktopUI {
                     // Note that this cannot be performed within draw_walk() as the draw flow prevents from
                     // performing actions that would trigger a redraw, and the Dock internally performs (and expects)
                     // a redraw to be happening in order to draw the tab content.
+                    log!("MainDesktopUI: RoomsListAction::Selected received for {:?}", selected_room);
                     self.focus_or_create_tab(cx, selected_room.clone());
                 }
                 RoomsListAction::InviteAccepted { room_name_id } => {
@@ -527,6 +569,27 @@ impl WidgetMatchEvent for MainDesktopUI {
                 RoomsListAction::None => { }
             }
 
+            // Handle VoIP actions
+            if let Some(VoipAction::Close(room_id)) = action.downcast_ref() {
+                log!("MainDesktopUI: VoipAction::Close received for room {:?}", room_id);
+                // Find the VoIP tab for this room and close it
+                let voip_tab_id = LiveId::from_str(&format!("{}##voip", room_id));
+                log!("Looking for voip_tab_id: {:?}, open_rooms has {} tabs", voip_tab_id, self.open_rooms.len());
+                if self.open_rooms.contains_key(&voip_tab_id) {
+                    log!("Found VoIP tab, closing it");
+                    self.tab_to_close = Some(voip_tab_id);
+                    self.close_tab(cx, voip_tab_id);
+                    self.redraw(cx);
+                    should_save_dock_action = true;
+                } else {
+                    log!("VoIP tab NOT found in open_rooms! Trying to close anyway...");
+                    // Try closing the tab anyway via the dock
+                    let dock = self.view.dock(cx, ids!(dock));
+                    dock.close_tab(cx, voip_tab_id);
+                    self.redraw(cx);
+                }
+            }
+
             // Handle our own actions related to dock updates that we have previously emitted.
             match action.downcast_ref() {
                 Some(MainDesktopUiAction::LoadDockFromAppState) => {
diff --git a/src/home/main_mobile_ui.rs b/src/home/main_mobile_ui.rs
index f06118447..3ecc6842d 100644
--- a/src/home/main_mobile_ui.rs
+++ b/src/home/main_mobile_ui.rs
@@ -116,6 +116,14 @@ impl Widget for MainMobileUI {
                     .room_screen(cx, ids!(room_screen))
                     .set_displayed_room(cx, room_name_id, Some(thread_root_event_id.clone()));
             }
+            Some(SelectedRoom::Voip { room_name_id }) => {
+                show_welcome = false;
+                show_room = true; // VoIP uses RoomScreen with VoIP as main content
+                show_invite = false;
+                show_space_lobby = false;
+                let room_screen = self.view.room_screen(cx, ids!(room_screen));
+                room_screen.set_voip_visible(cx, true, Some(room_name_id.room_id().clone()));
+            }
             None => {
                 show_welcome = true;
                 show_room = false;
diff --git a/src/home/navigation_tab_bar.rs b/src/home/navigation_tab_bar.rs
index 4e9c096e4..6c0d8d8c3 100644
--- a/src/home/navigation_tab_bar.rs
+++ b/src/home/navigation_tab_bar.rs
@@ -479,6 +479,15 @@ impl Widget for NavigationTabBar {
                         SelectedTab::Home     => self.view.radio_button(cx, ids!(home_button)).select(cx, scope),
                         SelectedTab::AddRoom  => self.view.radio_button(cx, ids!(add_room_button)).select(cx, scope),
                         SelectedTab::Settings => self.view.radio_button(cx, ids!(settings_button)).select(cx, scope),
+                        SelectedTab::VoIP => {
+                            // VoIP doesn't have a dedicated button in the tab bar,
+                            // so just deselect all buttons
+                            for rb in radio_button_set.iter() {
+                                if let Some(mut rb_inner) = rb.borrow_mut() {
+                                    rb_inner.animator_play(cx, ids!(active.off));
+                                }
+                            }
+                        }
                         SelectedTab::Space { .. } => {
                             for rb in radio_button_set.iter() {
                                 if let Some(mut rb_inner) = rb.borrow_mut() {
@@ -506,6 +515,7 @@ pub enum SelectedTab {
     Home,
     AddRoom,
     Settings,
+    VoIP,
     // AlertsInbox,
     Space { space_name_id: RoomNameId },
 }
@@ -551,11 +561,13 @@ pub enum NavigationBarAction {
     CloseSettings,
     /// Go the space screen for the given space.
     GoToSpace { space_name_id: RoomNameId },
+    // /// Go to the VoIP call screen.
+    // GoToVoip,
 
     // TODO: add GoToAlertsInbox, once we add that button/screen
 
     /// The given tab was selected as the active top-level view.
-    /// This is needed to ensure that the proper tab is marked as selected. 
+    /// This is needed to ensure that the proper tab is marked as selected.
     TabSelected(SelectedTab),
     /// Toggle whether the SpacesBar is shown, i.e., show/hide it.
     /// This is only applicable in the Mobile view mode, because the SpacesBar
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 7e6ee4f38..a190af8e4 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -41,6 +41,7 @@ use crate::home::event_reaction_list::ReactionListWidgetRefExt;
 use crate::home::room_read_receipt::AvatarRowWidgetRefExt;
 use crate::room::room_input_bar::RoomInputBarWidgetExt;
 use crate::shared::mentionable_text_input::MentionableTextInputAction;
+use crate::voip::voip_screen::VoipScreenWidgetExt;
 
 use rangemap::RangeSet;
 
@@ -858,6 +859,85 @@ script_mod! {
     }
 
 
+    // The view used for RTC notification events (call invites, call notifications).
+    // Displays a call notification with a "Join Call" button.
+    mod.widgets.RtcNotificationEvent = View {
+        width: Fill,
+        height: Fit,
+        flow: Right,
+        margin: Inset{ top: 8.0, bottom: 8.0 }
+        padding: Inset{ top: 8.0, bottom: 8.0, left: 10.0, right: 10.0 }
+        spacing: 0.0
+        cursor: MouseCursor.Default
+
+        show_bg: true
+        draw_bg +: {
+            color: #f0e6ff
+        }
+
+        body := View {
+            width: Fill,
+            height: Fit
+            flow: Right,
+            padding: Inset{ left: 7.0, top: 2.0, bottom: 2.0 }
+            spacing: 10.0
+            align: Align{y: 0.5}
+
+            left_container := View {
+                align: Align{x: 0.5, y: 0}
+                width: 70.0,
+                height: Fit
+
+                timestamp := Timestamp {
+                    margin: Inset{top: 3}
+                }
+            }
+
+            avatar := Avatar {
+                width: 24.,
+                height: 24.,
+                margin: 0
+
+                text_view +: {
+                    text +: {
+                        draw_text +: {
+                            text_style: TITLE_TEXT { font_size: 9.0 }
+                        }
+                    }
+                }
+            }
+
+            content := Label {
+                width: Fit,
+                height: Fit
+                margin: Inset{top: 2.5}
+                draw_text +: {
+                    text_style: SMALL_STATE_TEXT_STYLE {},
+                    color: #333
+                }
+                text: ""
+            }
+
+            View { width: Fill, height: 1 }
+
+            join_call_button := RobrixPositiveIconButton {
+                padding: 6.0
+                draw_bg +: {
+                    border_size: 0.75
+                    color: #7b1fa2
+                }
+                draw_text +: {
+                    color: #fff
+                    text_style: SMALL_STATE_TEXT_STYLE {}
+                }
+                text: "Join Call"
+            }
+
+            avatar_row := mod.widgets.AvatarRow {}
+        }
+    }
+
+
     // The view used for each day divider in a room's timeline.
     // The date text is centered between two horizontal lines.
     mod.widgets.DateDivider = View {
@@ -1874,6 +1954,7 @@ script_mod! {
             ImageMessage := mod.widgets.ImageMessage {}
             CondensedImageMessage := mod.widgets.CondensedImageMessage {}
             SmallStateEvent := mod.widgets.SmallStateEvent {}
+            RtcNotificationEvent := mod.widgets.RtcNotificationEvent {}
             Empty := mod.widgets.Empty {}
             DateDivider := mod.widgets.DateDivider {}
             ReadMarker := mod.widgets.ReadMarker {}
@@ -2004,6 +2085,76 @@ script_mod! {
             threads_sliding_pane := mod.widgets.ThreadsSlidingPane { }
             room_info_sliding_pane := mod.widgets.RoomInfoSlidingPane { }
 
+            // Active call banner - shown when there's an ongoing call in the room
+            active_call_banner := View {
+                width: Fill
+                height: Fit
+                visible: false
+                padding: Inset{top: 8, bottom: 8, left: 16, right: 16}
+                align: Align{x: 0.5, y: 0.0}
+                show_bg: true
+                draw_bg +: {
+                    color: #7b1fa2
+                }
+
+                <View> {
+                    width: Fit
+                    height: Fit
+                    flow: Right
+                    spacing: 12
+                    align: Align{y: 0.5}
+
+                    <Icon> {
+                        icon_path: dep("crate://self/resources/icons/video.svg")
+                        draw_icon: { color: #fff }
+                        icon_size: vec2(20.0, 20.0)
+                    }
+
+                    <Label> {
+                        text: "Ongoing call in this room"
+                        draw_text: { color: #fff, text_style: { font_size: 11.0 } }
+                    }
+
+                    join_call_banner_button := Button {
+                        text: "Join Call"
+                        padding: Inset{top: 6, bottom: 6, left: 16, right: 16}
+                        draw_bg +: {
+                            color: #fff
+                            border_radius: 2.0
+                        }
+                        draw_text +: {
+                            color: #7b1fa2
+                            text_style: { font_size: 11.0 }
+                        }
+                    }
+                }
+            }
+
+            // Video call button - floating in top right corner
+            video_call_button_container := View {
+                width: Fill
+                height: Fit
+                align: Align{x: 1.0, y: 0.0}
+                padding: Inset{top: 10, right: 10}
+
+                video_call_button := RobrixIconButton {
+                    width: 40
+                    height: 40
+                    padding: 8
+                    draw_icon.svg: (ICON_VIDEO)
+                    icon_walk: Walk{width: 20, height: 20}
+                    draw_bg +: {
+                        color: #fff
+                        border_radius: 20.0
+                        border_size: 1.0
+                        border_color: #ddd
+                    }
+                    draw_icon +: {
+                        color: #333
+                    }
+                }
+            }
+
             // The user profile sliding pane should be displayed on top of other "static" subviews
             // (on top of all other views that are always visible).
             user_profile_sliding_pane := mod.widgets.UserProfileSlidingPane { }
@@ -2840,6 +2991,10 @@ pub struct RoomScreen {
     #[rust] app_language: AppLanguage,
     #[rust] app_language_initialized: bool,
     #[rust] pending_invited_users: HashSet<OwnedUserId>,
+    /// Whether the VoIP call screen is currently visible for this room.
+    #[rust] show_voip_screen: bool,
+    /// Whether this room has an active call (from RTC notifications).
+    #[rust] has_active_call: bool,
 }
 
 impl Drop for RoomScreen {
@@ -3100,6 +3255,68 @@ impl Widget for RoomScreen {
                         cx.action(InviteAction::ShowInviteConfirmationModal(RefCell::new(Some(content))));
                     }
                 }
+
+                // Handle the join_call_button (in an RtcNotificationEvent) being clicked.
+                if wr.button(cx, ids!(join_call_button)).clicked(actions) {
+                    let Some(room_name_id) = self.room_name_id.clone() else { continue };
+                    log!("Join call button clicked for room: {}", room_name_id.room_id());
+                    #[cfg(any(target_os = "android", target_os = "ios", target_os = "windows"))]
+                    {
+                        let _ = room_name_id;
+                        enqueue_popup_notification(
+                            "VoIP calls are not supported on this platform.",
+                            PopupKind::Warning,
+                            Some(4.0),
+                        );
+                    }
+                    #[cfg(not(any(target_os = "android", target_os = "ios", target_os = "windows")))]
+                    cx.widget_action(
+                        self.widget_uid(),
+                        RoomsListAction::Selected(SelectedRoom::Voip { room_name_id }),
+                    );
+                }
+            }
+
+            // Handle the video_call_button (floating button in top-right) being clicked.
+            if self.view.button(cx, ids!(video_call_button)).clicked(actions) {
+                if let Some(room_name_id) = self.room_name_id.clone() {
+                    log!("Video call button clicked for room: {}", room_name_id.room_id());
+                    #[cfg(any(target_os = "android", target_os = "ios", target_os = "windows"))]
+                    {
+                        let _ = room_name_id;
+                        enqueue_popup_notification(
+                            "VoIP calls are not supported on this platform.",
+                            PopupKind::Warning,
+                            Some(4.0),
+                        );
+                    }
+                    #[cfg(not(any(target_os = "android", target_os = "ios", target_os = "windows")))]
+                    cx.widget_action(
+                        self.widget_uid(),
+                        RoomsListAction::Selected(SelectedRoom::Voip { room_name_id }),
+                    );
+                }
+            }
+
+            // Handle the join_call_banner_button (in active call banner) being clicked.
+            if self.view.button(cx, ids!(join_call_banner_button)).clicked(actions) {
+                if let Some(room_name_id) = self.room_name_id.clone() {
+                    log!("Join call banner button clicked for room: {}", room_name_id.room_id());
+                    #[cfg(any(target_os = "android", target_os = "ios", target_os = "windows"))]
+                    {
+                        let _ = room_name_id;
+                        enqueue_popup_notification(
+                            "VoIP calls are not supported on this platform.",
+                            PopupKind::Warning,
+                            Some(4.0),
+                        );
+                    }
+                    #[cfg(not(any(target_os = "android", target_os = "ios", target_os = "windows")))]
+                    cx.widget_action(
+                        self.widget_uid(),
+                        RoomsListAction::Selected(SelectedRoom::Voip { room_name_id }),
+                    );
+                }
             }
 
             self.handle_message_actions(cx, actions, &portal_list, &loading_pane);
@@ -4021,6 +4238,25 @@ impl Widget for RoomScreen {
                                 other,
                                 item_drawn_status,
                             ),
+                            TimelineItemContent::CallInvite | TimelineItemContent::RtcNotification => {
+                                // Update active call state and show banner
+                                if !self.has_active_call {
+                                    self.has_active_call = true;
+                                    let banner = self.view.view(cx, ids!(active_call_banner));
+                                    banner.set_visible(cx, true);
+                                    banner.redraw(cx);
+                                    self.view.redraw(cx);
+                                }
+
+                                populate_rtc_notification_event(
+                                    cx,
+                                    list,
+                                    item_id,
+                                    &tl_state.kind,
+                                    event_tl_item,
+                                    item_drawn_status,
+                                )
+                            },
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
                                 item.label(cx, ids!(content)).set_text(
@@ -6253,6 +6489,10 @@ impl RoomScreen {
         // Reset the the state of the inner loading pane.
         self.loading_pane(cx, ids!(loading_pane)).take_state();
 
+        // Reset active call state when switching rooms
+        self.has_active_call = false;
+        self.view.view(cx, ids!(active_call_banner)).set_visible(cx, false);
+
         self.room_name_id = Some(room_name_id.clone());
         self.room_avatar_url = get_client()
             .and_then(|client| client.get_room(room_name_id.room_id()))
@@ -6384,6 +6624,36 @@ impl RoomScreenRef {
         let Some(mut inner) = self.borrow_mut() else { return };
         inner.set_displayed_room(cx, room_name_id, thread_root_event_id);
     }
+
+    /// Shows or hides the VoIP call screen for this room.
+    /// When visible, hides the timeline and shows VoIP as the main content.
+    /// Note: On desktop, VoIP is handled via standalone VoipScreen tabs, so this
+    /// may fail to borrow (which is expected and harmless).
+    pub fn set_voip_visible(&self, cx: &mut Cx, visible: bool, room_id: Option<OwnedRoomId>) {
+        let Some(mut inner) = self.borrow_mut() else {
+            // Expected on desktop where MainDesktopUI handles VoIP via standalone VoipScreen tabs
+            return;
+        };
+        inner.show_voip_screen = visible;
+
+        // Hide/show the timeline area (keyboard_view contains timeline, typing notice, input bar)
+        inner.view.view(cx, ids!(keyboard_view)).set_visible(cx, !visible);
+
+        if visible {
+            // Initialize the VoIP screen if showing
+            let voip_screen = inner.view.voip_screen(cx, ids!(voip_screen));
+            if let Some(room_id) = room_id {
+                log!("RoomScreen: Showing VoIP screen for room {}", room_id);
+                voip_screen.initialize(cx, room_id);
+            }
+        } else {
+            let voip_screen = inner.view.voip_screen(cx, ids!(voip_screen));
+            voip_screen.hangup(cx);
+        }
+
+        // Force a redraw to ensure visibility changes take effect
+        inner.view.redraw(cx);
+    }
 }
 
 /// Immutable RoomScreen states passed via Scope props
@@ -8425,6 +8695,64 @@ fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String>
     }
 }
 
+/// Creates, populates, and adds an RtcNotificationEvent widget to the given `PortalList`
+/// with the given `item_id`.
+///
+/// This is used for CallInvite and RtcNotification timeline events.
+fn populate_rtc_notification_event(
+    cx: &mut Cx,
+    list: &mut PortalList,
+    item_id: usize,
+    timeline_kind: &TimelineKind,
+    event_tl_item: &EventTimelineItem,
+    item_drawn_status: ItemDrawnStatus,
+) -> (WidgetRef, ItemDrawnStatus) {
+    let mut new_drawn_status = item_drawn_status;
+    let (item, existed) = list.item_with_existed(cx, item_id, id!(RtcNotificationEvent));
+
+    let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
+    let skip_redrawing_content = skip_redrawing_profile && item_drawn_status.content_drawn;
+
+    populate_read_receipts(&item, cx, timeline_kind, event_tl_item);
+
+    if skip_redrawing_content {
+        return (item, new_drawn_status);
+    }
+
+    // Get username for display
+    let username = if skip_redrawing_profile {
+        get_profile_display_name(event_tl_item)
+            .unwrap_or_else(|| event_tl_item.sender().to_string())
+    } else {
+        let avatar_ref = item.avatar(cx, ids!(avatar));
+        let (username, profile_drawn) = avatar_ref.set_avatar_and_get_username(
+            cx,
+            timeline_kind,
+            event_tl_item.sender(),
+            Some(event_tl_item.sender_profile()),
+            event_tl_item.event_id(),
+            true,
+        );
+        // Draw the timestamp as part of the profile.
+        if let Some(dt) = unix_time_millis_to_datetime(event_tl_item.timestamp()) {
+            item.timestamp(cx, ids!(left_container.timestamp)).set_date_time(cx, dt);
+        }
+        new_drawn_status.profile_drawn = profile_drawn;
+        username
+    };
+
+    // Set the content text based on the event type
+    let content_text = match event_tl_item.content() {
+        TimelineItemContent::CallInvite => format!("{} started a call", username),
+        TimelineItemContent::RtcNotification => format!("{} is in a call", username),
+        _ => format!("{} - call notification", username),
+    };
+    item.label(cx, ids!(content)).set_text(cx, &content_text);
+
+    new_drawn_status.content_drawn = true;
+    (item, new_drawn_status)
+}
+
 
 /// Actions related to invites within a room.
 ///
@@ -8439,6 +8767,18 @@ pub enum InviteAction {
     ShowInviteConfirmationModal(RefCell<Option<ConfirmationModalContent>>),
 }
 
+/// Actions related to RTC (Real-Time Communication) calls.
+///
+/// These are NOT widget actions, just regular actions.
+#[derive(Debug, Clone)]
+pub enum RtcCallAction {
+    /// The user clicked the "Join Call" button on an RTC notification event.
+    /// Navigate to the VoIP screen with the given room ID.
+    JoinCall {
+        room_id: OwnedRoomId,
+    },
+}
+
 /// The result of inviting a user to a room.
 ///
 #[derive(Debug)]
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index 9a3affaa3..adc7668de 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -209,6 +209,11 @@ pub enum RoomsListUpdate {
     TombstonedRoom {
         room_id: OwnedRoomId
     },
+    /// Update whether the given room has an active call.
+    UpdateActiveCall {
+        room_id: OwnedRoomId,
+        has_active_call: bool,
+    },
     /// Hide the given room from being displayed.
     ///
     /// This is useful for temporarily preventing a room from being shown,
@@ -307,6 +312,8 @@ pub struct JoinedRoomInfo {
     pub is_direct: bool,
     /// Whether this room is tombstoned (shut down and replaced with a successor room).
     pub is_tombstoned: bool,
+    /// Whether this room has an active video/voice call.
+    pub has_active_call: bool,
 
     // TODO: we could store the parent chain(s) of this room, i.e., which spaces
     //       they are children of. One room can be in multiple spaces.
@@ -580,6 +587,7 @@ impl RoomsList {
                     is_selected: false,
                     is_direct: false,
                     is_tombstoned: false,
+                    has_active_call: false,
                 });
             }
         }
@@ -863,6 +871,14 @@ impl RoomsList {
                         warning!("Warning: couldn't find room {room_id} to update the tombstone status");
                     }
                 }
+                RoomsListUpdate::UpdateActiveCall { room_id, has_active_call } => {
+                    if let Some(room) = self.all_joined_rooms.get_mut(&room_id) {
+                        room.has_active_call = has_active_call;
+                        log!("Updated room {} has_active_call to {}", room_id, has_active_call);
+                    } else {
+                        warning!("Warning: couldn't find room {room_id} to update active call status");
+                    }
+                }
                 RoomsListUpdate::HideRoom { room_id } => {
                     self.hidden_rooms.insert(room_id.clone());
                     // Hiding a regular room is the most common case (e.g., after its successor is joined),
diff --git a/src/home/rooms_list_entry.rs b/src/home/rooms_list_entry.rs
index df9392ced..1e888d344 100644
--- a/src/home/rooms_list_entry.rs
+++ b/src/home/rooms_list_entry.rs
@@ -32,6 +32,22 @@ script_mod! {
         }
     }
 
+    // A video call icon to be displayed when there's an active call in the room.
+    mod.widgets.ActiveCallIcon = View {
+        width: Fit, height: Fit,
+        visible: false,
+
+        Icon {
+            width: 19, height: 19,
+            align: Align{x: 0.5, y: 0.5}
+            draw_icon +: {
+                svg: (ICON_VIDEO)
+                color: #4CAF50  // Green color for active call
+            }
+            icon_walk: Walk{ width: 15, height: 15 }
+        }
+    }
+
     mod.widgets.RoomName = Label {
         width: Fill, height: Fit
         flow: Flow.Right{wrap: false},
@@ -158,6 +174,7 @@ script_mod! {
                     avatar := Avatar {}
                     unread_badge := UnreadBadge {}
                     tombstone_icon := mod.widgets.TombstoneIcon {}
+                    active_call_icon := mod.widgets.ActiveCallIcon {}
                 }
             }
             IconAndName := mod.widgets.RoomsListEntryContent {
@@ -167,6 +184,7 @@ script_mod! {
                 room_name := mod.widgets.RoomName {}
                 unread_badge := UnreadBadge {}
                 tombstone_icon := mod.widgets.TombstoneIcon {}
+                active_call_icon := mod.widgets.ActiveCallIcon {}
             }
             FullPreview := mod.widgets.RoomsListEntryContent {
                 padding: 10
@@ -192,6 +210,7 @@ script_mod! {
                         View {
                             width: Fit, height: Fit
                             align: Align{ x: 1.0 }
+                            active_call_icon := mod.widgets.ActiveCallIcon {}
                             unread_badge := UnreadBadge {}
                             tombstone_icon := mod.widgets.TombstoneIcon {}
                         }
@@ -358,6 +377,8 @@ impl RoomsListEntryContent {
         self.draw_common(cx, &room_info.room_avatar, room_info.is_selected);
         // Show tombstone icon if the room is tombstoned
         self.view.view(cx, ids!(tombstone_icon)).set_visible(cx, room_info.is_tombstoned);
+        // Show active call icon if there's an active call in this room
+        self.view.view(cx, ids!(active_call_icon)).set_visible(cx, room_info.has_active_call);
     }
 
     /// Populates this RoomsListEntry with info about an invited room.
diff --git a/src/lib.rs b/src/lib.rs
index 81e858724..13e1e24d7 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -62,6 +62,8 @@ pub mod shared;
 /// Generating text previews of timeline events/messages.
 mod event_preview;
 pub mod room;
+/// VoIP call screen and related functionality.
+pub mod voip;
 
 
 /// All content related to TSP (Trust Spanning Protocol) wallets/identities.
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index e9a04b020..9380a09c6 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -22,7 +22,8 @@ pub mod unread_badge;
 pub mod verification_badge;
 pub mod restore_status_view;
 pub mod image_viewer;
-
+pub mod webcam_capture;
+pub mod webrtc_video;
 
 pub fn script_mod(vm: &mut ScriptVm) {
     // Order matters here, as some widget definitions depend on others.
@@ -48,4 +49,6 @@ pub fn script_mod(vm: &mut ScriptVm) {
     image_viewer::script_mod(vm);
     progress_bar::script_mod(vm);
     file_upload_modal::script_mod(vm);
+    webrtc_video::script_mod(vm);
+    webcam_capture::script_mod(vm);
 }
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index d534b4165..2262b90ba 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -6,6 +6,8 @@ script_mod! {
     use mod.widgets.*
 
     mod.widgets.ICON_ADD              = crate_resource("self://resources/icons/add.svg")
+    mod.widgets.ICON_MICROPHONE       = crate_resource("self://resources/icons/microphone.svg")
+    mod.widgets.ICON_VIDEO            = crate_resource("self://resources/icons/video.svg")
     mod.widgets.ICON_ADD_REACTION     = crate_resource("self://resources/icons/add_reaction.svg")
     mod.widgets.ICON_ADD_USER         = crate_resource("self://resources/icons/add_user.svg") // TODO: FIX
     mod.widgets.ICON_ADD_WALLET       = crate_resource("self://resources/icons/add_wallet.svg")
diff --git a/src/shared/webcam_capture.rs b/src/shared/webcam_capture.rs
new file mode 100644
index 000000000..847dd1ab0
--- /dev/null
+++ b/src/shared/webcam_capture.rs
@@ -0,0 +1,352 @@
+//! Standalone webcam capture widget for efficient video display.
+//!
+//! This widget wraps Makepad's native Video widget for GPU-accelerated
+//! camera preview with a clean, simplified API.
+
+use makepad_widgets::*;
+use makepad_widgets::makepad_platform::video::{
+    VideoInputId, VideoFormatId, VideoInputsEvent, VideoPixelFormat,
+};
+use makepad_widgets::video::VideoCameraPreviewMode;
+
+use crate::voip::VoipGlobalState;
+
+script_mod! {
+    use mod.prelude.widgets.*
+
+    mod.widgets.WebcamCaptureBase = #(WebcamCapture::register_widget(vm))
+
+    mod.widgets.WebcamCapture = set_type_default() do mod.widgets.WebcamCaptureBase {
+        width: Fill
+        height: Fill
+
+        flow: Overlay
+
+        // Native video preview (GPU-accelerated)
+        video := Video {
+            width: Fill
+            height: Fill
+        }
+
+        // Placeholder shown when camera is inactive
+        placeholder := View {
+            width: Fill
+            height: Fill
+            visible: true
+            align: Align{ x: 0.5, y: 0.5 }
+            show_bg: true
+            draw_bg +: { color: #1a1a1a }
+
+            placeholder_label := Label {
+                text: "Camera Off"
+                draw_text +: { color: #666 }
+            }
+        }
+    }
+}
+
+/// Camera format choice for capture configuration.
+#[derive(Clone, Debug)]
+pub struct CameraChoice {
+    pub input_id: VideoInputId,
+    pub format_id: VideoFormatId,
+    pub name: String,
+    pub width: usize,
+    pub height: usize,
+    pub pixel_format: VideoPixelFormat,
+}
+
+impl CameraChoice {
+    /// Pick the best camera format from available video inputs.
+    pub fn pick_best(ev: &VideoInputsEvent) -> Option<Self> {
+        let desc = ev.descs.first()?;
+
+        fn pixel_rank(pf: VideoPixelFormat) -> usize {
+            match pf {
+                VideoPixelFormat::NV12 => 4,
+                VideoPixelFormat::YUY2 => 3,
+                VideoPixelFormat::YUV420 => 2,
+                VideoPixelFormat::RGB24 => 1,
+                _ => 0,
+            }
+        }
+
+        fn better(
+            a: &makepad_widgets::makepad_platform::video::VideoFormat,
+            b: &makepad_widgets::makepad_platform::video::VideoFormat,
+        ) -> bool {
+            let ar = pixel_rank(a.pixel_format);
+            let br = pixel_rank(b.pixel_format);
+            if ar != br { return ar > br; }
+            let ap = a.width * a.height;
+            let bp = b.width * b.height;
+            if ap != bp { return ap > bp; }
+            a.frame_rate.unwrap_or(0.0) > b.frame_rate.unwrap_or(0.0)
+        }
+
+        let mut best: Option<makepad_widgets::makepad_platform::video::VideoFormat> = None;
+
+        // Pass 1: NV12 at <= 1080p
+        for fmt in &desc.formats {
+            if fmt.pixel_format == VideoPixelFormat::NV12
+                && fmt.width <= 1920 && fmt.height <= 1080
+                && best.as_ref().is_none_or(|b| better(fmt, b))
+            {
+                best = Some(*fmt);
+            }
+        }
+
+        // Pass 2: any NV12
+        if best.is_none() {
+            for fmt in &desc.formats {
+                if fmt.pixel_format == VideoPixelFormat::NV12
+                    && best.as_ref().is_none_or(|b| better(fmt, b))
+                {
+                    best = Some(*fmt);
+                }
+            }
+        }
+
+        // Pass 3: YUY2 or YUV420
+        if best.is_none() {
+            for fmt in &desc.formats {
+                if matches!(fmt.pixel_format, VideoPixelFormat::YUY2 | VideoPixelFormat::YUV420)
+                    && best.as_ref().is_none_or(|b| better(fmt, b))
+                {
+                    best = Some(*fmt);
+                }
+            }
+        }
+
+        // Pass 4: fallback
+        if best.is_none() {
+            best = desc.formats.first().copied();
+        }
+
+        let format = best?;
+        Some(CameraChoice {
+            input_id: desc.input_id,
+            format_id: format.format_id,
+            name: desc.name.clone(),
+            width: format.width,
+            height: format.height,
+            pixel_format: format.pixel_format,
+        })
+    }
+}
+
+/// Convert from voip::CameraChoice to shared::CameraChoice
+impl From<crate::voip::camera::CameraChoice> for CameraChoice {
+    fn from(c: crate::voip::camera::CameraChoice) -> Self {
+        Self {
+            input_id: c.input_id,
+            format_id: c.format_id,
+            name: c.name,
+            width: c.width,
+            height: c.height,
+            pixel_format: c.pixel_format,
+        }
+    }
+}
+
+/// Actions emitted by the WebcamCapture widget.
+#[derive(Clone, Debug, Default)]
+pub enum WebcamCaptureAction {
+    #[default]
+    None,
+    CaptureStarted { width: u32, height: u32 },
+    CaptureStopped,
+    NoCameraAvailable,
+    Error(String),
+}
+
+/// Capture state.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
+pub enum CaptureState {
+    #[default]
+    Idle,
+    Starting,
+    Active,
+    Stopping,
+}
+
+/// Standalone webcam capture widget using native GPU-accelerated preview.
+#[derive(Script, ScriptHook, Widget)]
+pub struct WebcamCapture {
+    #[source] source: ScriptObjectRef,
+    #[deref] view: View,
+    #[walk] walk: Walk,
+    #[layout] layout: Layout,
+
+    #[visible]
+    #[live(true)]
+    visible: bool,
+
+    #[rust] state: CaptureState,
+    #[rust] camera_choice: Option<CameraChoice>,
+}
+
+impl Widget for WebcamCapture {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+
+        match event {
+            Event::VideoPlaybackPrepared(_) if self.state == CaptureState::Starting => {
+                self.state = CaptureState::Active;
+                self.view(cx, ids!(placeholder)).set_visible(cx, false);
+                if let Some(ref choice) = self.camera_choice {
+                    cx.widget_action(self.widget_uid(), WebcamCaptureAction::CaptureStarted {
+                        width: choice.width as u32,
+                        height: choice.height as u32,
+                    });
+                }
+            }
+            Event::VideoPlaybackResourcesReleased(_) if self.state == CaptureState::Stopping => {
+                self.state = CaptureState::Idle;
+                self.update_placeholder(cx, "Camera Off");
+                cx.widget_action(self.widget_uid(), WebcamCaptureAction::CaptureStopped);
+            }
+            // Note: Event::VideoInputs is handled at the App level and stored in VoipGlobalState.
+            // WebcamCapture reads from global state via start_capture_from_global().
+            _ => {}
+        }
+    }
+}
+
+impl WebcamCapture {
+    /// Update the placeholder text
+    fn update_placeholder(&mut self, cx: &mut Cx, text: &str) {
+        self.view(cx, ids!(placeholder)).set_visible(cx, true);
+        self.view.label(cx, ids!(placeholder_label)).set_text(cx, text);
+    }
+
+    /// Internal: actually start the camera
+    fn start_camera_internal(&mut self, cx: &mut Cx) {
+        let Some(choice) = self.camera_choice.clone() else {
+            return;
+        };
+
+        let video = self.view.video(cx, ids!(video));
+        if !video.is_unprepared() {
+            log!("WebcamCapture: Video not unprepared, cannot start");
+            return;
+        }
+
+        log!("WebcamCapture: Starting camera {} ({}x{} {:?})",
+            choice.name, choice.width, choice.height, choice.pixel_format);
+
+        self.state = CaptureState::Starting;
+        self.update_placeholder(cx, "Starting Camera...");
+
+        video.set_camera_preview_mode(cx, VideoCameraPreviewMode::Native);
+        video.set_source_camera(cx, choice.input_id, choice.format_id);
+        video.begin_playback(cx);
+    }
+
+    /// Start camera capture using global camera choice from VoipGlobalState.
+    /// VoipGlobalState must be initialized (via VoipGlobalState::initialize) before calling this.
+    pub fn start_capture_from_global(&mut self, cx: &mut Cx) {
+        if self.state != CaptureState::Idle {
+            log!("WebcamCapture: Already in state {:?}, not starting", self.state);
+            return;
+        }
+
+        // Read camera choice from global state (populated by App handling Event::VideoInputs)
+        if let Some(c) = VoipGlobalState::get_camera_choice(cx) {
+            log!("WebcamCapture: Got camera from global state: {}", c.name);
+            self.camera_choice = Some(c.into());
+            self.start_camera_internal(cx);
+        } else {
+            // No camera available in global state - VoipGlobalState may not have received VideoInputs yet
+            log!("WebcamCapture: No camera in global state");
+            self.update_placeholder(cx, "No Camera Available");
+            cx.widget_action(self.widget_uid(), WebcamCaptureAction::NoCameraAvailable);
+        }
+    }
+
+    /// Start camera capture with the given camera choice.
+    pub fn start_capture(&mut self, cx: &mut Cx, choice: CameraChoice) {
+        if self.state != CaptureState::Idle {
+            return;
+        }
+
+        self.camera_choice = Some(choice);
+        self.start_camera_internal(cx);
+    }
+
+    /// Stop camera capture.
+    pub fn stop_capture(&mut self, cx: &mut Cx) {
+        if self.state == CaptureState::Idle {
+            return;
+        }
+
+        let video = self.view.video(cx, ids!(video));
+        if !video.is_unprepared() && !video.is_cleaning_up() {
+            self.state = CaptureState::Stopping;
+            video.stop_and_cleanup_resources(cx);
+        }
+
+        self.camera_choice = None;
+    }
+
+    /// Get the current capture state.
+    pub fn capture_state(&self) -> CaptureState {
+        self.state
+    }
+
+    /// Check if capture is active.
+    pub fn is_capturing(&self) -> bool {
+        self.state == CaptureState::Active
+    }
+
+    /// Get the current frame dimensions.
+    pub fn frame_size(&self) -> Option<(u32, u32)> {
+        if self.state == CaptureState::Active {
+            self.camera_choice.as_ref().map(|c| (c.width as u32, c.height as u32))
+        } else {
+            None
+        }
+    }
+
+    /// Get the camera choice.
+    pub fn camera_choice(&self) -> Option<&CameraChoice> {
+        self.camera_choice.as_ref()
+    }
+}
+
+/// Reference to a WebcamCapture widget.
+impl WebcamCaptureRef {
+    pub fn start_capture_from_global(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.start_capture_from_global(cx);
+        }
+    }
+
+    pub fn start_capture(&self, cx: &mut Cx, choice: CameraChoice) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.start_capture(cx, choice);
+        }
+    }
+
+    pub fn stop_capture(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.stop_capture(cx);
+        }
+    }
+
+    pub fn is_capturing(&self) -> bool {
+        self.borrow().map(|i| i.is_capturing()).unwrap_or(false)
+    }
+
+    pub fn capture_state(&self) -> CaptureState {
+        self.borrow().map(|i| i.capture_state()).unwrap_or(CaptureState::Idle)
+    }
+
+    pub fn frame_size(&self) -> Option<(u32, u32)> {
+        self.borrow().and_then(|i| i.frame_size())
+    }
+}
diff --git a/src/shared/webrtc_video.rs b/src/shared/webrtc_video.rs
new file mode 100644
index 000000000..52713075e
--- /dev/null
+++ b/src/shared/webrtc_video.rs
@@ -0,0 +1,322 @@
+//! WebRTC video streaming widget for displaying video frames from WebRTC sources.
+//!
+//! This widget is designed to receive video frames as RGBA data from WebRTC
+//! streams (e.g., LiveKit) and display them efficiently using GPU textures.
+
+use makepad_widgets::*;
+
+script_mod! {
+    use mod.prelude.widgets_internal.*
+
+    mod.widgets.WebRtcVideoBase = #(WebRtcVideo::register_widget(vm))
+
+    mod.widgets.WebRtcVideo = set_type_default() do mod.widgets.WebRtcVideoBase{
+        width: 320
+        height: 240
+
+        draw_bg +: {
+            video_texture: texture_2d(float)
+            opacity: instance(1.0)
+
+            pixel: fn() {
+                let color = self.video_texture.sample_as_bgra(self.pos)
+                return Pal.premul(vec4(color.xyz, color.w * self.opacity))
+            }
+        }
+    }
+}
+
+/// Video frame data structure for receiving frames from WebRTC sources.
+#[derive(Clone)]
+pub struct WebRtcVideoFrame {
+    /// RGBA pixel data (4 bytes per pixel: R, G, B, A)
+    pub data: Vec<u8>,
+    /// Frame width in pixels
+    pub width: u32,
+    /// Frame height in pixels
+    pub height: u32,
+    /// Optional participant identifier
+    pub participant_id: Option<String>,
+}
+
+impl std::fmt::Debug for WebRtcVideoFrame {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WebRtcVideoFrame")
+            .field("width", &self.width)
+            .field("height", &self.height)
+            .field("participant_id", &self.participant_id)
+            .field("data_len", &self.data.len())
+            .finish()
+    }
+}
+
+/// Actions emitted by the WebRtcVideo widget.
+#[derive(Clone, Debug, Default)]
+pub enum WebRtcVideoAction {
+    #[default]
+    None,
+    /// A new frame has been displayed
+    FrameUpdated {
+        width: u32,
+        height: u32,
+    },
+    /// The video stream has started (first frame received)
+    StreamStarted,
+    /// The video stream has stopped
+    StreamStopped,
+}
+
+/// WebRTC video streaming widget.
+///
+/// This widget displays video frames from WebRTC sources such as LiveKit.
+/// Frames are provided as RGBA data and rendered using GPU textures.
+///
+/// # Example
+///
+/// ```ignore
+/// // In your UI definition:
+/// webrtc_video := WebRtcVideo {
+///     width: 320
+///     height: 240
+/// }
+///
+/// // In your code:
+/// let frame = WebRtcVideoFrame {
+///     data: rgba_data,
+///     width: 640,
+///     height: 480,
+///     participant_id: Some("user123".to_string()),
+/// };
+/// self.ui.webrtc_video(cx, ids!(webrtc_video)).set_frame(cx, frame);
+/// ```
+#[derive(Script, ScriptHook, Widget)]
+pub struct WebRtcVideo {
+    #[uid]
+    uid: WidgetUid,
+    #[source]
+    source: ScriptObjectRef,
+
+    #[redraw]
+    #[live]
+    draw_bg: DrawColor,
+
+    #[walk]
+    walk: Walk,
+
+    #[live]
+    layout: Layout,
+
+    #[visible]
+    #[live(true)]
+    visible: bool,
+
+    /// The current video texture
+    #[rust]
+    texture: Option<Texture>,
+
+    /// Current frame dimensions
+    #[rust]
+    frame_width: u32,
+    #[rust]
+    frame_height: u32,
+
+    /// Whether the stream is active (has received at least one frame)
+    #[rust]
+    stream_active: bool,
+
+    /// Participant ID of the current stream source
+    #[rust]
+    participant_id: Option<String>,
+}
+
+impl Widget for WebRtcVideo {
+    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
+        if !self.visible {
+            return DrawStep::done();
+        }
+
+        // Set texture if available
+        if let Some(texture) = &self.texture {
+            self.draw_bg.draw_vars.set_texture(0, texture);
+        } else {
+            self.draw_bg.draw_vars.empty_texture(0);
+        }
+
+        self.draw_bg.draw_walk(cx, walk);
+        DrawStep::done()
+    }
+
+    fn handle_event(&mut self, _cx: &mut Cx, _event: &Event, _scope: &mut Scope) {
+        // No special event handling needed for basic video display
+    }
+}
+
+impl WebRtcVideo {
+    /// Sets a video frame to be displayed.
+    ///
+    /// The frame data should be in RGBA format (4 bytes per pixel).
+    /// This method handles texture creation and updates efficiently.
+    pub fn set_frame(&mut self, cx: &mut Cx, frame: WebRtcVideoFrame) {
+        let width = frame.width as usize;
+        let height = frame.height as usize;
+        let pixel_count = width * height;
+
+        // Convert RGBA bytes to packed u32 for VecBGRAu8_32 texture format
+        // Input: RGBA bytes [R, G, B, A]
+        // Output: 0xAARRGGBB format (BGRA in memory on little-endian)
+        let mut data_u32: Vec<u32> = Vec::with_capacity(pixel_count);
+        let rgba = &frame.data;
+
+        for i in 0..pixel_count {
+            let idx = i * 4;
+            if idx + 3 < rgba.len() {
+                let r = rgba[idx] as u32;
+                let g = rgba[idx + 1] as u32;
+                let b = rgba[idx + 2] as u32;
+                let a = rgba[idx + 3] as u32;
+                // Pack as 0xAARRGGBB
+                data_u32.push((a << 24) | (r << 16) | (g << 8) | b);
+            }
+        }
+
+        // Check if we need to create a new texture (dimension change or first frame)
+        let needs_new_texture = match &self.texture {
+            Some(texture) => {
+                texture.get_format(cx).vec_width_height() != Some((width, height))
+            }
+            None => true,
+        };
+
+        let was_inactive = !self.stream_active;
+
+        if needs_new_texture {
+            // Create new texture with the frame data
+            let texture = Texture::new_with_format(
+                cx,
+                TextureFormat::VecBGRAu8_32 {
+                    width,
+                    height,
+                    data: Some(data_u32),
+                    updated: TextureUpdated::Full,
+                },
+            );
+            self.texture = Some(texture);
+            self.frame_width = frame.width;
+            self.frame_height = frame.height;
+        } else if let Some(texture) = &self.texture {
+            // Reuse existing texture, just update the data
+            texture.set_data_u32(cx, width, height, data_u32);
+        }
+
+        // Update state
+        self.stream_active = true;
+        self.participant_id = frame.participant_id;
+
+        // Emit action for first frame
+        if was_inactive {
+            cx.widget_action(self.uid, WebRtcVideoAction::StreamStarted);
+        }
+
+        cx.widget_action(
+            self.uid,
+            WebRtcVideoAction::FrameUpdated {
+                width: frame.width,
+                height: frame.height,
+            },
+        );
+
+        // Trigger redraw
+        self.redraw(cx);
+    }
+
+    /// Clears the current video frame and marks the stream as inactive.
+    pub fn clear_frame(&mut self, cx: &mut Cx) {
+        self.texture = None;
+        self.frame_width = 0;
+        self.frame_height = 0;
+        self.participant_id = None;
+
+        if self.stream_active {
+            self.stream_active = false;
+            cx.widget_action(self.uid, WebRtcVideoAction::StreamStopped);
+        }
+
+        self.redraw(cx);
+    }
+
+    /// Returns the current frame dimensions, or None if no frame has been set.
+    pub fn frame_size(&self) -> Option<(u32, u32)> {
+        if self.stream_active {
+            Some((self.frame_width, self.frame_height))
+        } else {
+            None
+        }
+    }
+
+    /// Returns true if the stream is currently active (has received frames).
+    pub fn is_active(&self) -> bool {
+        self.stream_active
+    }
+
+    /// Returns the participant ID of the current stream source.
+    pub fn participant_id(&self) -> Option<&str> {
+        self.participant_id.as_deref()
+    }
+
+    /// Sets the texture directly (advanced usage).
+    pub fn set_texture(&mut self, cx: &mut Cx, texture: Option<Texture>) {
+        self.texture = texture;
+        self.redraw(cx);
+    }
+}
+
+/// Reference to a WebRtcVideo widget.
+impl WebRtcVideoRef {
+    /// Sets a video frame to be displayed.
+    pub fn set_frame(&self, cx: &mut Cx, frame: WebRtcVideoFrame) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_frame(cx, frame);
+        }
+    }
+
+    /// Clears the current video frame.
+    pub fn clear_frame(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.clear_frame(cx);
+        }
+    }
+
+    /// Returns the current frame dimensions.
+    pub fn frame_size(&self) -> Option<(u32, u32)> {
+        if let Some(inner) = self.borrow() {
+            inner.frame_size()
+        } else {
+            None
+        }
+    }
+
+    /// Returns true if the stream is currently active.
+    pub fn is_active(&self) -> bool {
+        if let Some(inner) = self.borrow() {
+            inner.is_active()
+        } else {
+            false
+        }
+    }
+
+    /// Returns the participant ID of the current stream source.
+    pub fn participant_id(&self) -> Option<String> {
+        if let Some(inner) = self.borrow() {
+            inner.participant_id().map(|s| s.to_string())
+        } else {
+            None
+        }
+    }
+
+    /// Sets the texture directly.
+    pub fn set_texture(&self, cx: &mut Cx, texture: Option<Texture>) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_texture(cx, texture);
+        }
+    }
+}
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index ae0070887..c7aa621f7 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -32,7 +32,19 @@ use matrix_sdk_ui::{
     RoomListService, Timeline, encryption_sync_service, room_list_service::{RoomListItem, RoomListLoadingState, SyncIndicator, filters}, sync_service::{self, SyncService}, timeline::{LatestEventValue, RoomExt, TimelineEventItemId, TimelineFocus, TimelineItem, TimelineReadReceiptTracking, TimelineDetails}
 };
 use robius_open::Uri;
-use ruma::{OwnedRoomOrAliasId, RoomId, events::tag::Tags};
+use ruma::{
+    OwnedRoomOrAliasId, RoomId,
+    api::client::account::request_openid_token,
+    events::{
+        tag::Tags,
+        call::member::{
+            CallMemberEventContent, CallMemberStateKey,
+            Application, CallApplicationContent, CallScope,
+            Focus, LivekitFocus,
+            ActiveFocus, ActiveLivekitFocus, FocusSelection,
+        },
+    },
+};
 use tokio::{
     runtime::Handle,
     sync::{broadcast, mpsc::{Sender, UnboundedReceiver, UnboundedSender}, watch, Notify}, task::JoinHandle, time::error::Elapsed,
@@ -1022,6 +1034,31 @@ pub enum MatrixRequest {
         destination: Arc<Mutex<crate::home::link_preview::TimestampedCacheEntry>>,
         update_sender: Option<crossbeam_channel::Sender<TimelineUpdate>>,
     },
+    /// Send a call member state event to join a call (MSC3401).
+    SendCallMemberState {
+        room_id: OwnedRoomId,
+        call_type: crate::voip::call_state::CallType,
+    },
+    /// Send an empty call member state event to leave a call (MSC3401).
+    SendEndCallState {
+        room_id: OwnedRoomId,
+    },
+    /// Fetch call member state events to get list of participants in the call (MSC3401).
+    GetCallMembers {
+        room_id: OwnedRoomId,
+    },
+    /// Fetch OpenID token from Matrix homeserver (for LiveKit authentication).
+    FetchOpenIdToken {
+        room_id: OwnedRoomId,
+    },
+    /// Fetch LiveKit JWT using OpenID token.
+    FetchLiveKitJwt {
+        room_id: OwnedRoomId,
+        access_token: String,
+        token_type: String,
+        matrix_server_name: String,
+        expires_in: u64,
+    },
 }
 
 fn add_octos_target_user_id(
@@ -3074,6 +3111,304 @@ async fn matrix_worker_task(
                     SignalToUI::set_ui_signal();
                 });
             }
+
+            MatrixRequest::SendCallMemberState { room_id, call_type: _ } => {
+                let Some(client) = get_client() else { continue };
+                let _send_call_member_task = Handle::current().spawn(async move {
+                    log!("Sending call member state for room {room_id}...");
+
+                    let Some(room) = client.get_room(&room_id) else {
+                        error!("Room {room_id} not found for call member state");
+                        return;
+                    };
+
+                    let Some(session) = client.session_meta() else {
+                        error!("No session metadata available for call member state");
+                        return;
+                    };
+                    let user_id = session.user_id.clone();
+                    let device_id = session.device_id.clone();
+
+                    // LiveKit service URL (Element Call uses this)
+                    let livekit_service_url = "https://livekit-jwt.call.matrix.org";
+
+                    // Build the call application content
+                    let call_app = CallApplicationContent::new(
+                        String::new(),  // call_id: empty for room-scoped calls
+                        CallScope::Room,
+                    );
+
+                    // Build the active focus (LiveKit with oldest_membership selection)
+                    let mut active_livekit = ActiveLivekitFocus::new();
+                    active_livekit.focus_selection = FocusSelection::OldestMembership;
+                    let focus_active = ActiveFocus::Livekit(active_livekit);
+
+                    // Build the preferred foci list
+                    let foci_preferred = vec![
+                        Focus::Livekit(LivekitFocus::new(
+                            room_id.to_string(),           // alias
+                            livekit_service_url.to_string(), // service_url
+                        ))
+                    ];
+
+                    // Build the call member event content using typed API (MSC3401)
+                    let content = CallMemberEventContent::new(
+                        Application::Call(call_app),
+                        device_id.clone(),
+                        focus_active,
+                        foci_preferred,
+                        None,  // created_ts: will be set by server
+                        Some(Duration::from_secs(7200)),  // expires: 2 hours
+                    );
+
+                    // Build the state key using typed API
+                    let state_key = CallMemberStateKey::new(
+                        user_id.clone(),
+                        Some(format!("{}_m.call", device_id)),
+                        true,  // use underscore prefix
+                    );
+
+                    // Send the typed state event
+                    match room.send_state_event_for_key(&state_key, content).await {
+                        Ok(response) => {
+                            log!("Successfully sent call member state, event_id: {}", response.event_id);
+                            // Notify UI that call member state was sent
+                            Cx::post_action(crate::voip::VoipAction::CallMemberStateSent {
+                                room_id: room_id.clone(),
+                                success: true,
+                            });
+                        }
+                        Err(e) => {
+                            error!("Failed to send call member state: {e:?}");
+                            Cx::post_action(crate::voip::VoipAction::CallMemberStateSent {
+                                room_id: room_id.clone(),
+                                success: false,
+                            });
+                        }
+                    }
+                    SignalToUI::set_ui_signal();
+                });
+            }
+
+            MatrixRequest::SendEndCallState { room_id } => {
+                let Some(client) = get_client() else { continue };
+                let _send_end_call_task = Handle::current().spawn(async move {
+                    log!("Sending end call state for room {room_id}...");
+
+                    let Some(room) = client.get_room(&room_id) else {
+                        error!("Room {room_id} not found for end call state");
+                        return;
+                    };
+
+                    let Some(session) = client.session_meta() else {
+                        error!("No session metadata available for end call state");
+                        return;
+                    };
+                    let user_id = session.user_id.clone();
+                    let device_id = session.device_id.clone();
+
+                    // Build empty content to leave the call
+                    let content = CallMemberEventContent::new_empty(None);
+
+                    // Build the state key using typed API
+                    let state_key = CallMemberStateKey::new(
+                        user_id.clone(),
+                        Some(format!("{}_m.call", device_id)),
+                        true,  // use underscore prefix
+                    );
+
+                    match room.send_state_event_for_key(&state_key, content).await {
+                        Ok(response) => {
+                            log!("Successfully sent end call state, event_id: {}", response.event_id);
+                        }
+                        Err(e) => {
+                            error!("Failed to send end call state: {e:?}");
+                        }
+                    }
+                    SignalToUI::set_ui_signal();
+                });
+            }
+
+            MatrixRequest::GetCallMembers { room_id } => {
+                let Some(client) = get_client() else { continue };
+                let _get_call_members_task = Handle::current().spawn(async move {
+                    log!("Fetching call members for room {room_id}...");
+
+                    let Some(room) = client.get_room(&room_id) else {
+                        error!("Room {room_id} not found for get call members");
+                        return;
+                    };
+
+                    // Use RoomInfo::active_room_call_participants() for simpler API
+                    let participants = room.active_room_call_participants();
+                    log!("Found {} active room call participants", participants.len());
+
+                    let mut members = Vec::new();
+                    for user_id in participants {
+                        // Get display name for the user
+                        let display_name = room.get_member_no_sync(&user_id)
+                            .await
+                            .ok()
+                            .flatten()
+                            .and_then(|m| m.display_name().map(|n| n.to_string()));
+
+                        log!("Active call participant: {}", user_id);
+
+                        members.push(crate::voip::CallMember {
+                            user_id: user_id.to_string(),
+                            device_id: String::new(), // Not available from this API
+                            display_name,
+                        });
+                    }
+
+                    log!("Total active call members: {}", members.len());
+                    Cx::post_action(crate::voip::VoipAction::CallMembersUpdated {
+                        room_id: room_id.clone(),
+                        members,
+                    });
+                    SignalToUI::set_ui_signal();
+                });
+            }
+
+            MatrixRequest::FetchOpenIdToken { room_id } => {
+                let Some(client) = get_client() else { continue };
+                let _fetch_openid_task = Handle::current().spawn(async move {
+                    log!("Fetching OpenID token for room {room_id}...");
+
+                    // Get the user ID for the OpenID request
+                    let user_id = client.user_id().expect("Client should have user_id").to_owned();
+
+                    // Use the Matrix SDK to get an OpenID token via direct API call
+                    // This corresponds to POST /_matrix/client/v3/user/{userId}/openid/request_token
+                    match client.send(request_openid_token::v3::Request::new(user_id)).await {
+                        Ok(response) => {
+                            log!("OpenID token fetched successfully");
+                            log!("  matrix_server_name: {}", response.matrix_server_name);
+                            log!("  expires_in: {:?}", response.expires_in);
+
+                            // Convert expires_in Duration to seconds
+                            let expires_in_secs = response.expires_in.as_secs();
+
+                            Cx::post_action(crate::voip::VoipAction::OpenIdTokenFetched {
+                                room_id: room_id.clone(),
+                                access_token: response.access_token,
+                                token_type: "Bearer".to_string(),
+                                matrix_server_name: response.matrix_server_name.to_string(),
+                                expires_in: expires_in_secs,
+                            });
+                        }
+                        Err(e) => {
+                            error!("Failed to fetch OpenID token: {e:?}");
+                            Cx::post_action(crate::voip::VoipAction::LiveKitConnectionFailed {
+                                room_id: room_id.clone(),
+                                error: format!("Failed to fetch OpenID token: {e}"),
+                            });
+                        }
+                    }
+                    SignalToUI::set_ui_signal();
+                });
+            }
+
+            MatrixRequest::FetchLiveKitJwt { room_id, access_token, token_type, matrix_server_name, expires_in } => {
+                let _fetch_jwt_task = Handle::current().spawn(async move {
+                    log!("Fetching LiveKit JWT for room {room_id}...");
+
+                    // LiveKit JWT endpoint (external service, not Matrix API)
+                    // POST https://livekit-jwt.call.matrix.org/sfu/get
+                    let jwt_endpoint = "https://livekit-jwt.call.matrix.org/sfu/get";
+
+                    // Get device_id from client
+                    let device_id = get_client()
+                        .and_then(|c| c.session_meta().map(|m| m.device_id.to_string()))
+                        .unwrap_or_default();
+
+                    // Build the request body matching webrtc example format
+                    // JwtRequest { room, openid_token: OpenIdToken, device_id }
+                    let request_body = serde_json::json!({
+                        "room": room_id.as_str(),
+                        "openid_token": {
+                            "access_token": access_token,
+                            "token_type": token_type,
+                            "matrix_server_name": matrix_server_name,
+                            "expires_in": expires_in,
+                        },
+                        "device_id": device_id,
+                    });
+
+                    log!("LiveKit JWT request body: {}", serde_json::to_string_pretty(&request_body).unwrap_or_default());
+
+                    // Make HTTP request to LiveKit JWT endpoint
+                    let http_client = matrix_sdk::reqwest::Client::new();
+                    let request_body_str = serde_json::to_string(&request_body).unwrap_or_default();
+                    match http_client
+                        .post(jwt_endpoint)
+                        .header("Content-Type", "application/json")
+                        .body(request_body_str)
+                        .send()
+                        .await
+                    {
+                        Ok(response) => {
+                            if response.status().is_success() {
+                                match response.text().await {
+                                    Ok(text) => {
+                                        match serde_json::from_str::<serde_json::Value>(&text) {
+                                            Ok(json) => {
+                                                let url = json["url"].as_str().unwrap_or("").to_string();
+                                                let jwt = json["jwt"].as_str().unwrap_or("").to_string();
+
+                                                if !url.is_empty() && !jwt.is_empty() {
+                                                    log!("LiveKit JWT fetched successfully, url: {}", url);
+                                                    Cx::post_action(crate::voip::VoipAction::LiveKitJwtFetched {
+                                                        room_id: room_id.clone(),
+                                                        url,
+                                                        jwt,
+                                                    });
+                                                } else {
+                                                    error!("LiveKit JWT response missing url or jwt");
+                                                    Cx::post_action(crate::voip::VoipAction::LiveKitConnectionFailed {
+                                                        room_id: room_id.clone(),
+                                                        error: "Invalid JWT response".to_string(),
+                                                    });
+                                                }
+                                            }
+                                            Err(e) => {
+                                                error!("Failed to parse LiveKit JWT response: {e:?}");
+                                                Cx::post_action(crate::voip::VoipAction::LiveKitConnectionFailed {
+                                                    room_id: room_id.clone(),
+                                                    error: format!("Failed to parse JWT response: {e}"),
+                                                });
+                                            }
+                                        }
+                                    }
+                                    Err(e) => {
+                                        error!("Failed to read LiveKit JWT response: {e:?}");
+                                        Cx::post_action(crate::voip::VoipAction::LiveKitConnectionFailed {
+                                            room_id: room_id.clone(),
+                                            error: format!("Failed to read response: {e}"),
+                                        });
+                                    }
+                                }
+                            } else {
+                                let status = response.status();
+                                let error_text = response.text().await.unwrap_or_else(|_| String::new());
+                                error!("LiveKit JWT request failed: {} - {}", status, error_text);
+                                Cx::post_action(crate::voip::VoipAction::LiveKitConnectionFailed {
+                                    room_id: room_id.clone(),
+                                    error: format!("JWT request failed: {status}"),
+                                });
+                            }
+                        }
+                        Err(e) => {
+                            error!("Failed to fetch LiveKit JWT: {e:?}");
+                            Cx::post_action(crate::voip::VoipAction::LiveKitConnectionFailed {
+                                room_id: room_id.clone(),
+                                error: format!("Network error: {e}"),
+                            });
+                        }
+                    }
+                    SignalToUI::set_ui_signal();
+                });
+            }
         }
     }
 
@@ -3437,6 +3772,7 @@ struct RoomListServiceRoomInfo {
     is_direct: bool,
     is_marked_unread: bool,
     is_tombstoned: bool,
+    has_active_call: bool,
     tags: Option<Tags>,
     user_power_levels: Option<UserPowerLevels>,
     latest_event_timestamp: Option<MilliSecondsSinceUnixEpoch>,
@@ -3468,6 +3804,7 @@ impl RoomListServiceRoomInfo {
             is_direct: is_direct.unwrap_or(false),
             is_marked_unread: room.is_marked_unread(),
             is_tombstoned: room.is_tombstoned(),
+            has_active_call: room.has_active_room_call(),
             tags: tags.ok().flatten(),
             user_power_levels,
             latest_event_timestamp: room.latest_event_timestamp(),
@@ -4374,6 +4711,18 @@ async fn update_room(
                 });
             }
 
+            if old_room.has_active_call != new_room.has_active_call {
+                log!("Updating room {} has_active_call from {} to {}",
+                    new_room_id,
+                    old_room.has_active_call,
+                    new_room.has_active_call,
+                );
+                enqueue_rooms_list_update(RoomsListUpdate::UpdateActiveCall {
+                    room_id: new_room_id.clone(),
+                    has_active_call: new_room.has_active_call,
+                });
+            }
+
             let mut __timeline_update_sender_opt = None;
             let mut get_timeline_update_sender = |room_id| {
                 if __timeline_update_sender_opt.is_none() {
@@ -4514,7 +4863,6 @@ async fn add_new_room(
     if subscribe {
         room_list_service.subscribe_to_rooms(&[&new_room.room_id]).await;
     }
-
     let timeline = Arc::new(
         new_room.room.timeline_builder()
             .with_focus(TimelineFocus::Live {
@@ -4584,6 +4932,7 @@ async fn add_new_room(
         is_selected: false,
         is_direct: new_room.is_direct,
         is_tombstoned: new_room.is_tombstoned,
+        has_active_call: new_room.has_active_call,
     }));
 
     Cx::post_action(AppStateAction::RoomLoadedSuccessfully {
diff --git a/src/voip/call_state.rs b/src/voip/call_state.rs
new file mode 100644
index 000000000..3df9c2ab6
--- /dev/null
+++ b/src/voip/call_state.rs
@@ -0,0 +1,45 @@
+//! Call state management
+
+use std::collections::HashMap;
+
+/// Connection state for a call
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum ConnectionState {
+    #[default]
+    Disconnected,
+    Connecting,
+    Connected,
+    Disconnecting,
+}
+
+/// Type of call (voice or video)
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum CallType {
+    Voice,
+    #[default]
+    Video,
+}
+
+/// Represents a participant in the call
+#[derive(Debug, Clone)]
+pub struct CallParticipant {
+    pub user_id: String,
+    pub display_name: String,
+    pub is_muted: bool,
+    pub is_video_on: bool,
+    pub is_speaking: bool,
+    pub is_screen_sharing: bool,
+}
+
+/// Main call state structure
+#[derive(Debug, Clone, Default)]
+pub struct Call {
+    pub call_type: CallType,
+    pub connection_state: ConnectionState,
+    pub participants: HashMap<String, CallParticipant>,
+    pub local_audio_muted: bool,
+    pub local_video_muted: bool,
+    pub is_screen_sharing: bool,
+    pub livekit_url: Option<String>,
+    pub livekit_token: Option<String>,
+}
diff --git a/src/voip/camera.rs b/src/voip/camera.rs
new file mode 100644
index 000000000..168c6410f
--- /dev/null
+++ b/src/voip/camera.rs
@@ -0,0 +1,198 @@
+//! Camera handling and video management
+
+use makepad_widgets::*;
+use makepad_widgets::makepad_platform::video::{VideoInputId, VideoFormatId, VideoInputsEvent, VideoPixelFormat};
+use makepad_widgets::video::VideoCameraPreviewMode;
+
+/// Camera format choice
+#[derive(Clone)]
+pub struct CameraChoice {
+    pub input_id: VideoInputId,
+    pub format_id: VideoFormatId,
+    pub name: String,
+    pub width: usize,
+    pub height: usize,
+    pub pixel_format: VideoPixelFormat,
+}
+
+/// Camera manager handles camera selection and video playback
+pub struct CameraManager;
+
+impl CameraManager {
+    /// Pick the best camera format from available options
+    pub fn pick_camera_choice(ev: &VideoInputsEvent) -> Option<CameraChoice> {
+        let desc = ev.descs.first()?;
+
+        log!("Camera: {} has {} formats", desc.name, desc.formats.len());
+        for (i, fmt) in desc.formats.iter().enumerate() {
+            log!(
+                "  Format {}: {}x{} {:?} fps={:?}",
+                i, fmt.width, fmt.height, fmt.pixel_format, fmt.frame_rate
+            );
+        }
+
+        fn pixel_rank(pixel_format: VideoPixelFormat) -> usize {
+            match pixel_format {
+                VideoPixelFormat::NV12 => 4,
+                VideoPixelFormat::YUY2 => 3,
+                VideoPixelFormat::YUV420 => 2,
+                VideoPixelFormat::RGB24 => 1,
+                _ => 0,
+            }
+        }
+
+        fn better(
+            a: &makepad_widgets::makepad_platform::video::VideoFormat,
+            b: &makepad_widgets::makepad_platform::video::VideoFormat,
+        ) -> bool {
+            let a_rank = pixel_rank(a.pixel_format);
+            let b_rank = pixel_rank(b.pixel_format);
+            if a_rank != b_rank {
+                return a_rank > b_rank;
+            }
+            let a_pixels = a.width * a.height;
+            let b_pixels = b.width * b.height;
+            if a_pixels != b_pixels {
+                return a_pixels > b_pixels;
+            }
+            let a_fps = a.frame_rate.unwrap_or(0.0);
+            let b_fps = b.frame_rate.unwrap_or(0.0);
+            a_fps > b_fps
+        }
+
+        let mut best: Option<makepad_widgets::makepad_platform::video::VideoFormat> = None;
+
+        // Pass 1: NV12 at <= 1080p (preferred)
+        for fmt in &desc.formats {
+            if fmt.pixel_format != VideoPixelFormat::NV12 {
+                continue;
+            }
+            if fmt.width > 1920 || fmt.height > 1080 {
+                continue;
+            }
+            if best.as_ref().is_none_or(|b| better(fmt, b)) {
+                best = Some(*fmt);
+            }
+        }
+
+        // Pass 2: any NV12
+        if best.is_none() {
+            for fmt in &desc.formats {
+                if fmt.pixel_format != VideoPixelFormat::NV12 {
+                    continue;
+                }
+                if best.as_ref().is_none_or(|b| better(fmt, b)) {
+                    best = Some(*fmt);
+                }
+            }
+        }
+
+        // Pass 3: YUY2 or YUV420
+        if best.is_none() {
+            for fmt in &desc.formats {
+                if !matches!(fmt.pixel_format, VideoPixelFormat::YUY2 | VideoPixelFormat::YUV420) {
+                    continue;
+                }
+                if best.as_ref().is_none_or(|b| better(fmt, b)) {
+                    best = Some(*fmt);
+                }
+            }
+        }
+
+        // Pass 4: Any format (fallback)
+        if best.is_none() {
+            log!("No preferred format found, taking first available format...");
+            best = desc.formats.first().copied();
+        }
+
+        let format = match best {
+            Some(f) => f,
+            None => {
+                log!("No camera format available!");
+                return None;
+            }
+        };
+        log!("Selected format: {}x{} {:?}", format.width, format.height, format.pixel_format);
+
+        Some(CameraChoice {
+            input_id: desc.input_id,
+            format_id: format.format_id,
+            name: desc.name.clone(),
+            width: format.width,
+            height: format.height,
+            pixel_format: format.pixel_format,
+        })
+    }
+
+    /// Start camera for lobby preview
+    pub fn start_lobby_camera(ui: &View, cx: &mut Cx, choice: &CameraChoice) -> bool {
+        let video = ui.video(cx, &[live_id!(lobby_camera_video)]);
+
+        if !video.is_unprepared() {
+            return false;
+        }
+
+        log!("Starting lobby camera: {} ({}x{} {:?})",
+            choice.name, choice.width, choice.height, choice.pixel_format);
+
+        ui.view(cx, ids!(lobby_video_host)).set_visible(cx, true);
+        ui.view(cx, ids!(lobby_camera_placeholder)).set_visible(cx, false);
+
+        video.set_camera_preview_mode(cx, VideoCameraPreviewMode::Native);
+        video.set_source_camera(cx, choice.input_id, choice.format_id);
+        video.begin_playback(cx);
+        true
+    }
+
+    /// Start camera for in-call video
+    pub fn start_call_camera(ui: &View, cx: &mut Cx, choice: &CameraChoice) -> bool {
+        let video = ui.video(cx, &[live_id!(local_camera_video)]);
+
+        if !video.is_unprepared() {
+            return false;
+        }
+
+        log!("Starting call camera...");
+
+        ui.view(cx, ids!(local_video_host)).set_visible(cx, true);
+        ui.view(cx, ids!(local_avatar_view)).set_visible(cx, false);
+
+        video.set_camera_preview_mode(cx, VideoCameraPreviewMode::Native);
+        video.set_source_camera(cx, choice.input_id, choice.format_id);
+        video.begin_playback(cx);
+        true
+    }
+
+    /// Stop lobby camera
+    pub fn stop_lobby_camera(ui: &View, cx: &mut Cx) {
+        let video = ui.video(cx, &[live_id!(lobby_camera_video)]);
+        if !video.is_unprepared() && !video.is_cleaning_up() {
+            video.stop_and_cleanup_resources(cx);
+        }
+        ui.view(cx, ids!(lobby_video_host)).set_visible(cx, false);
+        ui.view(cx, ids!(lobby_camera_placeholder)).set_visible(cx, true);
+        ui.view(cx, ids!(join_call_button_view)).set_visible(cx, true);
+    }
+
+    /// Stop in-call camera
+    pub fn stop_call_camera(ui: &View, cx: &mut Cx) {
+        let video = ui.video(cx, &[live_id!(local_camera_video)]);
+        if !video.is_unprepared() && !video.is_cleaning_up() {
+            video.stop_and_cleanup_resources(cx);
+        }
+        ui.view(cx, ids!(local_video_host)).set_visible(cx, false);
+        ui.view(cx, ids!(local_avatar_view)).set_visible(cx, true);
+    }
+
+    /// Show video view for lobby
+    pub fn show_lobby_video(ui: &View, cx: &mut Cx) {
+        ui.view(cx, ids!(lobby_video_host)).set_visible(cx, true);
+        ui.view(cx, ids!(lobby_camera_placeholder)).set_visible(cx, false);
+    }
+
+    /// Show video view for call
+    pub fn show_call_video(ui: &View, cx: &mut Cx) {
+        ui.view(cx, ids!(local_video_host)).set_visible(cx, true);
+        ui.view(cx, ids!(local_avatar_view)).set_visible(cx, false);
+    }
+}
diff --git a/src/voip/livekit_client.rs b/src/voip/livekit_client.rs
new file mode 100644
index 000000000..5f2280e15
--- /dev/null
+++ b/src/voip/livekit_client.rs
@@ -0,0 +1,421 @@
+//! LiveKit client integration for WebRTC
+//!
+//! This module provides LiveKit WebRTC connectivity for VoIP calls.
+//! On macOS and Linux, it uses the real LiveKit SDK.
+//! On Android, iOS, and Windows, it provides a stub implementation (VoIP not supported).
+//! Windows is excluded due to MSVC runtime library mismatch with webrtc-sys.
+
+use std::sync::{Arc, Mutex};
+use tokio::sync::mpsc;
+use makepad_widgets::{SignalToUI, log};
+
+use super::call_state::CallParticipant;
+
+/// Video frame data for publishing
+#[derive(Clone)]
+pub struct VideoFrame {
+    pub data: Vec<u8>,
+    pub width: u32,
+    pub height: u32,
+    #[allow(dead_code)]
+    pub format: VideoFrameFormat,
+}
+
+#[derive(Clone, Copy, Debug)]
+#[allow(dead_code)]
+pub enum VideoFrameFormat {
+    Rgb24,
+    Rgba32,
+}
+
+/// Messages sent from LiveKit client to UI
+#[derive(Debug, Clone)]
+#[allow(dead_code)]
+pub enum LiveKitMessage {
+    Connected,
+    Disconnected,
+    Error(String),
+    ParticipantJoined(CallParticipant),
+    ParticipantLeft(String),
+    /// I420 video frame received from remote participant
+    RemoteVideoFrame {
+        participant_id: String,
+        /// Y plane data
+        y: Vec<u8>,
+        /// U plane data
+        u: Vec<u8>,
+        /// V plane data
+        v: Vec<u8>,
+        width: u32,
+        height: u32,
+        /// Presentation timestamp in milliseconds
+        pts_ms: u64,
+    },
+    /// Remote participant's video track subscribed
+    VideoTrackSubscribed { participant_id: String },
+    /// Remote participant's video track unsubscribed
+    VideoTrackUnsubscribed { participant_id: String },
+}
+
+/// Commands sent from UI to LiveKit client
+pub enum LiveKitCommand {
+    Connect { url: String, token: String },
+    Disconnect,
+    SetMicrophoneMuted(bool),
+    SetCameraMuted(bool),
+    StartScreenShare,
+    StopScreenShare,
+    PublishVideoFrame(VideoFrame),
+    PublishData { payload: Vec<u8>, reliable: bool },
+}
+
+/// LiveKit client state
+pub struct LiveKitClient {
+    command_tx: Option<mpsc::UnboundedSender<LiveKitCommand>>,
+    is_connected: Arc<Mutex<bool>>,
+}
+
+impl LiveKitClient {
+    pub fn new() -> Self {
+        Self {
+            command_tx: None,
+            is_connected: Arc::new(Mutex::new(false)),
+        }
+    }
+
+    /// Start the LiveKit client with channels for communication
+    pub fn start(&mut self) -> mpsc::UnboundedReceiver<LiveKitMessage> {
+        let (cmd_tx, cmd_rx) = mpsc::unbounded_channel();
+        let (msg_tx, msg_rx) = mpsc::unbounded_channel();
+
+        self.command_tx = Some(cmd_tx);
+
+        let is_connected = self.is_connected.clone();
+
+        std::thread::spawn(move || {
+            let rt = tokio::runtime::Runtime::new().unwrap();
+            rt.block_on(async {
+                Self::run_event_loop(cmd_rx, msg_tx, is_connected).await;
+            });
+        });
+
+        msg_rx
+    }
+
+    /// Stub implementation for Android/iOS/Windows where LiveKit is not supported.
+    #[cfg(any(target_os = "android", target_os = "ios", target_os = "windows"))]
+    async fn run_event_loop(
+        mut cmd_rx: mpsc::UnboundedReceiver<LiveKitCommand>,
+        msg_tx: mpsc::UnboundedSender<LiveKitMessage>,
+        _is_connected: Arc<Mutex<bool>>,
+    ) {
+        // On Android/iOS/Windows, VoIP is not supported. Just drain commands and send error.
+        while let Some(cmd) = cmd_rx.recv().await {
+            match cmd {
+                LiveKitCommand::Connect { .. } => {
+                    log!("LiveKit: VoIP not supported on this platform");
+                    let _ = msg_tx.send(LiveKitMessage::Error(
+                        "VoIP calls are not supported on this platform".to_string()
+                    ));
+                    SignalToUI::set_ui_signal();
+                }
+                LiveKitCommand::Disconnect => {
+                    let _ = msg_tx.send(LiveKitMessage::Disconnected);
+                    SignalToUI::set_ui_signal();
+                }
+                _ => {
+                    // Ignore other commands on unsupported platforms
+                }
+            }
+        }
+    }
+
+    /// Full LiveKit implementation for desktop platforms (macOS, Linux).
+    #[cfg(not(any(target_os = "android", target_os = "ios", target_os = "windows")))]
+    async fn run_event_loop(
+        mut cmd_rx: mpsc::UnboundedReceiver<LiveKitCommand>,
+        msg_tx: mpsc::UnboundedSender<LiveKitMessage>,
+        is_connected: Arc<Mutex<bool>>,
+    ) {
+        use livekit::prelude::*;
+        use livekit::RoomOptions;
+        use livekit::webrtc::video_stream::native::NativeVideoStream;
+        use livekit::webrtc::prelude::VideoBuffer;
+        use futures_util::StreamExt;
+
+        let mut room: Option<Arc<Room>> = None;
+
+        while let Some(cmd) = cmd_rx.recv().await {
+            match cmd {
+                LiveKitCommand::Connect { url, token } => {
+                    log!("LiveKit: Connecting to {}", url);
+                    log!("LiveKit: Token length: {}, starts with: {}",
+                        token.len(),
+                        if token.len() > 20 { &token[..20] } else { &token });
+
+                    // Validate token is not empty and looks like a JWT (three dot-separated parts)
+                    if token.is_empty() {
+                        log!("LiveKit: ERROR - Token is empty!");
+                        let _ = msg_tx.send(LiveKitMessage::Error("Token is empty".to_string()));
+                        SignalToUI::set_ui_signal();
+                        continue;
+                    }
+
+                    let jwt_parts: Vec<&str> = token.split('.').collect();
+                    if jwt_parts.len() != 3 {
+                        log!("LiveKit: WARNING - Token doesn't look like a JWT (expected 3 parts, got {})", jwt_parts.len());
+                    } else {
+                        log!("LiveKit: Token appears to be valid JWT format");
+                    }
+
+                    log!("LiveKit: Calling Room::connect with url={} and token length={}", url, token.len());
+                    match Room::connect(&url, &token, RoomOptions::default()).await {
+                        Ok((r, mut room_events)) => {
+                            let room_name = r.name().to_string();
+                            let room_sid = String::from(r.sid().await);
+
+                            log!("LiveKit: Connected to room: {} - {}", room_name, room_sid);
+
+                            let r = Arc::new(r);
+                            room = Some(r.clone());
+
+                            if let Ok(mut connected) = is_connected.lock() {
+                                *connected = true;
+                            }
+                            let _ = msg_tx.send(LiveKitMessage::Connected);
+                            SignalToUI::set_ui_signal();
+
+                            // Spawn task to handle room events
+                            let msg_tx_clone = msg_tx.clone();
+                            tokio::spawn(async move {
+                                while let Some(event) = room_events.recv().await {
+                                    log!("LiveKit: Room event: {:?}", event);
+                                    match event {
+                                        RoomEvent::ParticipantConnected(participant) => {
+                                            log!("LiveKit: Participant connected: {}", participant.identity());
+                                            let name = participant.name();
+                                            let display_name = if name.is_empty() {
+                                                participant.identity().to_string()
+                                            } else {
+                                                name.to_string()
+                                            };
+                                            let participant_info = CallParticipant {
+                                                user_id: participant.identity().to_string(),
+                                                display_name,
+                                                is_muted: false,
+                                                is_video_on: false,
+                                                is_speaking: false,
+                                                is_screen_sharing: false,
+                                            };
+                                            let _ = msg_tx_clone.send(LiveKitMessage::ParticipantJoined(participant_info));
+                                            SignalToUI::set_ui_signal();
+                                        }
+                                        RoomEvent::ParticipantDisconnected(participant) => {
+                                            log!("LiveKit: Participant disconnected: {}", participant.identity());
+                                            let _ = msg_tx_clone.send(LiveKitMessage::ParticipantLeft(
+                                                participant.identity().to_string()
+                                            ));
+                                            SignalToUI::set_ui_signal();
+                                        }
+                                        RoomEvent::TrackSubscribed { track, publication: _, participant } => {
+                                            let participant_id = participant.identity().to_string();
+                                            log!("LiveKit: Track subscribed from {}: kind={:?}", participant_id, track.kind());
+
+                                            if let RemoteTrack::Video(video_track) = track {
+                                                log!("LiveKit: Video track subscribed from {}", participant_id);
+                                                let _ = msg_tx_clone.send(LiveKitMessage::VideoTrackSubscribed {
+                                                    participant_id: participant_id.clone(),
+                                                });
+                                                SignalToUI::set_ui_signal();
+
+                                                // Start receiving video frames
+                                                let msg_tx_video = msg_tx_clone.clone();
+                                                let participant_id_clone = participant_id.clone();
+                                                let rtc_track = video_track.rtc_track();
+
+                                                tokio::spawn(async move {
+                                                    let mut video_stream = NativeVideoStream::new(rtc_track);
+                                                    let mut frame_count = 0u64;
+                                                    let mut pts_counter = 0u64;
+
+                                                    log!("LiveKit: Starting video frame reception for {}", participant_id_clone);
+
+                                                    while let Some(frame) = video_stream.next().await {
+                                                        frame_count += 1;
+
+                                                        // Convert to I420 buffer
+                                                        let buffer = frame.buffer.to_i420();
+                                                        let width = buffer.width();
+                                                        let height = buffer.height();
+
+                                                        // Log first frame and then periodically
+                                                        if frame_count == 1 {
+                                                            log!("LiveKit: Received first video frame from {}: {}x{}", participant_id_clone, width, height);
+                                                        } else if frame_count.is_multiple_of(60) {
+                                                            log!("LiveKit: Video frame #{} from {}: {}x{}", frame_count, participant_id_clone, width, height);
+                                                        }
+
+                                                        // Get I420 plane data
+                                                        let (data_y, data_u, data_v) = buffer.data();
+
+                                                        // Calculate presentation timestamp (30fps assumed)
+                                                        pts_counter += 33; // ~33ms per frame at 30fps
+
+                                                        // Send I420 frame directly (let the UI handle conversion)
+                                                        let _ = msg_tx_video.send(LiveKitMessage::RemoteVideoFrame {
+                                                            participant_id: participant_id_clone.clone(),
+                                                            y: data_y.to_vec(),
+                                                            u: data_u.to_vec(),
+                                                            v: data_v.to_vec(),
+                                                            width,
+                                                            height,
+                                                            pts_ms: pts_counter,
+                                                        });
+                                                        SignalToUI::set_ui_signal();
+                                                    }
+                                                    log!("LiveKit: Video stream ended for {} after {} frames", participant_id_clone, frame_count);
+                                                });
+                                            }
+                                        }
+                                        RoomEvent::TrackUnsubscribed { track, publication: _, participant } => {
+                                            let participant_id = participant.identity().to_string();
+                                            log!("LiveKit: Track unsubscribed from {}: kind={:?}", participant_id, track.kind());
+
+                                            if matches!(track, RemoteTrack::Video(_)) {
+                                                let _ = msg_tx_clone.send(LiveKitMessage::VideoTrackUnsubscribed {
+                                                    participant_id,
+                                                });
+                                                SignalToUI::set_ui_signal();
+                                            }
+                                        }
+                                        RoomEvent::Disconnected { reason } => {
+                                            log!("LiveKit: Room disconnected: {:?}", reason);
+                                            let _ = msg_tx_clone.send(LiveKitMessage::Disconnected);
+                                            SignalToUI::set_ui_signal();
+                                            break;
+                                        }
+                                        _ => {}
+                                    }
+                                }
+                            });
+                        }
+                        Err(e) => {
+                            log!("LiveKit: Failed to connect: {}", e);
+                            let _ = msg_tx.send(LiveKitMessage::Error(e.to_string()));
+                            SignalToUI::set_ui_signal();
+                        }
+                    }
+                }
+                LiveKitCommand::Disconnect => {
+                    log!("LiveKit: Disconnecting");
+                    if let Some(r) = room.take() {
+                        r.close().await.ok();
+                    }
+                    if let Ok(mut connected) = is_connected.lock() {
+                        *connected = false;
+                    }
+                    let _ = msg_tx.send(LiveKitMessage::Disconnected);
+                    SignalToUI::set_ui_signal();
+                }
+                LiveKitCommand::SetMicrophoneMuted(muted) => {
+                    log!("LiveKit: Set microphone muted: {}", muted);
+                    // Note: Muting requires publishing/unpublishing tracks or using LocalAudioTrack::set_enabled
+                    // For now, just log the request. Full implementation requires track management.
+                    if let Some(r) = &room {
+                        let local = r.local_participant();
+                        for (_, publication) in local.track_publications().iter() {
+                            if matches!(publication.kind(), TrackKind::Audio) {
+                                log!("LiveKit: Audio track found, muted state: {}", publication.is_muted());
+                                // publication.mute() is async in newer versions
+                            }
+                        }
+                    }
+                }
+                LiveKitCommand::SetCameraMuted(muted) => {
+                    log!("LiveKit: Set camera muted: {}", muted);
+                    // Note: Muting requires publishing/unpublishing tracks or using LocalVideoTrack::set_enabled
+                    // For now, just log the request. Full implementation requires track management.
+                    if let Some(r) = &room {
+                        let local = r.local_participant();
+                        for (_, publication) in local.track_publications().iter() {
+                            if matches!(publication.kind(), TrackKind::Video) {
+                                log!("LiveKit: Video track found, muted state: {}", publication.is_muted());
+                                // publication.mute() is async in newer versions
+                            }
+                        }
+                    }
+                }
+                LiveKitCommand::StartScreenShare => {
+                    log!("LiveKit: Starting screen share");
+                    // Screen sharing requires platform-specific implementation
+                    // For now, just log the request
+                }
+                LiveKitCommand::StopScreenShare => {
+                    log!("LiveKit: Stopping screen share");
+                }
+                LiveKitCommand::PublishVideoFrame(frame) => {
+                    log!("LiveKit: Publishing video frame: {}x{}, format: {:?}, data_len: {}",
+                        frame.width, frame.height, frame.format, frame.data.len());
+                    // Video frame publishing requires creating a video track source
+                    // For now, this is a placeholder for future implementation
+                }
+                LiveKitCommand::PublishData { payload, reliable } => {
+                    if let Some(r) = &room {
+                        let data_packet = livekit::DataPacket {
+                            payload,
+                            reliable,
+                            ..Default::default()
+                        };
+
+                        match r.local_participant().publish_data(data_packet).await {
+                            Ok(_) => {
+                                log!("LiveKit: Published data packet");
+                            }
+                            Err(e) => {
+                                log!("LiveKit: Failed to publish data: {}", e);
+                            }
+                        }
+                    } else {
+                        log!("LiveKit: Cannot publish data: not connected to room");
+                    }
+                }
+            }
+        }
+    }
+
+    pub fn send_command(&self, cmd: LiveKitCommand) {
+        if let Some(tx) = &self.command_tx {
+            let _ = tx.send(cmd);
+        }
+    }
+
+    pub fn connect(&self, url: String, token: String) {
+        self.send_command(LiveKitCommand::Connect { url, token });
+    }
+
+    pub fn disconnect(&self) {
+        self.send_command(LiveKitCommand::Disconnect);
+    }
+
+    pub fn set_microphone_muted(&self, muted: bool) {
+        self.send_command(LiveKitCommand::SetMicrophoneMuted(muted));
+    }
+
+    pub fn set_camera_muted(&self, muted: bool) {
+        self.send_command(LiveKitCommand::SetCameraMuted(muted));
+    }
+
+    pub fn publish_video_frame(&self, frame: VideoFrame) {
+        self.send_command(LiveKitCommand::PublishVideoFrame(frame));
+    }
+
+    pub fn publish_data(&self, payload: Vec<u8>, reliable: bool) {
+        self.send_command(LiveKitCommand::PublishData { payload, reliable });
+    }
+}
+
+impl Default for LiveKitClient {
+    fn default() -> Self {
+        Self::new()
+    }
+}
diff --git a/src/voip/mod.rs b/src/voip/mod.rs
new file mode 100644
index 000000000..8be52ce01
--- /dev/null
+++ b/src/voip/mod.rs
@@ -0,0 +1,365 @@
+//! VoIP screen module for voice/video calls
+//!
+//! This module provides VoIP functionality including:
+//! - Call state management
+//! - Camera handling
+//! - LiveKit WebRTC integration
+//! - Speaking detection
+//! - Participants list
+//! - Token caching for OpenID and LiveKit JWT
+
+use makepad_widgets::*;
+use makepad_widgets::makepad_platform::video::VideoInputsEvent;
+use makepad_widgets::makepad_platform::permission::PermissionStatus;
+use matrix_sdk::ruma::OwnedRoomId;
+
+pub mod call_state;
+pub mod camera;
+pub mod livekit_client;
+pub mod pip_overlay;
+pub mod remote_video_session;
+pub mod speaking;
+pub mod participants_list;
+pub mod token_cache;
+pub mod voip_screen;
+
+pub use voip_screen::VoipScreenWidgetRefExt;
+pub use participants_list::{Participant, ParticipantsListWidgetRefExt};
+pub use camera::CameraChoice;
+pub use token_cache::{CachedOpenIdToken, CachedLiveKitJwt, VoipTokenState};
+pub use pip_overlay::PipVoipOverlayWidgetRefExt;
+
+/// Represents a call member from Matrix state events
+#[derive(Clone, Debug)]
+pub struct CallMember {
+    pub user_id: String,
+    pub device_id: String,
+    pub display_name: Option<String>,
+}
+
+/// Information about a participant in an active call (for PiP display)
+#[derive(Clone, Debug, Default)]
+pub struct ParticipantInfo {
+    pub user_id: String,
+    pub display_name: String,
+    pub avatar_letter: String,
+}
+
+/// State of an active VoIP call (stored in VoipGlobalState for PiP access)
+#[derive(Clone, Debug, Default)]
+pub struct ActiveCallState {
+    /// The room ID where the call is happening
+    pub room_id: Option<OwnedRoomId>,
+    /// Connection state description
+    pub status_text: String,
+    /// Whether we are in lobby or in an active call
+    pub in_call: bool,
+    /// Whether the local microphone is muted
+    pub mic_muted: bool,
+    /// Whether the local camera is off
+    pub camera_muted: bool,
+    /// Whether screen sharing is active
+    pub screen_sharing: bool,
+    /// Information about the local participant
+    pub local_participant: ParticipantInfo,
+    /// Number of remote participants
+    pub participant_count: usize,
+}
+
+/// Actions emitted by VoIP screens
+#[derive(Clone, Debug, Default)]
+pub enum VoipAction {
+    /// Close the VoIP screen and return to the room
+    Close(OwnedRoomId),
+    /// Join the call (triggers the join_call_button click)
+    JoinCall,
+    /// Notification that call member state was sent (or failed)
+    CallMemberStateSent {
+        room_id: OwnedRoomId,
+        success: bool,
+    },
+    /// Call members list updated from Matrix state events
+    CallMembersUpdated {
+        room_id: OwnedRoomId,
+        members: Vec<CallMember>,
+    },
+    /// OpenID token fetched from Matrix
+    OpenIdTokenFetched {
+        room_id: OwnedRoomId,
+        access_token: String,
+        token_type: String,
+        matrix_server_name: String,
+        expires_in: u64,
+    },
+    /// LiveKit JWT fetched
+    LiveKitJwtFetched {
+        room_id: OwnedRoomId,
+        url: String,
+        jwt: String,
+    },
+    /// LiveKit connection failed
+    LiveKitConnectionFailed {
+        room_id: OwnedRoomId,
+        error: String,
+    },
+    /// Test action: Add a participant
+    TestAddParticipant {
+        name: String,
+        is_video_on: bool,
+    },
+    /// Test action: Toggle participant video
+    TestToggleParticipantVideo {
+        id: String,
+    },
+    /// Test action: Remove a participant
+    TestRemoveParticipant {
+        id: String,
+    },
+    /// Test action: Clear all participants
+    TestClearParticipants,
+    /// Test action: Toggle participants sidebar
+    TestToggleParticipantsSidebar,
+    /// Test action: Push a test video frame to a participant
+    TestPushVideoFrame {
+        participant_id: String,
+    },
+    /// Test action: Start continuous test video frames to a participant
+    TestStartVideoStream {
+        participant_id: String,
+    },
+    /// Test action: Stop continuous test video frames
+    TestStopVideoStream,
+    /// Show the PiP overlay for an active call
+    ShowPip { room_id: OwnedRoomId },
+    /// Hide the PiP overlay
+    HidePip,
+    /// Toggle microphone from PiP
+    PipMicToggle { room_id: OwnedRoomId },
+    /// Toggle camera from PiP
+    PipCameraToggle { room_id: OwnedRoomId },
+    /// Toggle screen share from PiP
+    PipScreenShareToggle { room_id: OwnedRoomId },
+    /// Hangup from PiP
+    PipHangup { room_id: OwnedRoomId },
+    /// Return to the VoIP tab from clicking on PiP
+    ReturnToVoipTab { room_id: OwnedRoomId },
+    #[default]
+    None,
+}
+
+/// Global VoIP state stored in Makepad's Cx context.
+/// This allows camera permission and video inputs events to be captured
+/// at app startup before VoipScreen is shown.
+/// Also stores cached tokens for OpenID and LiveKit JWT.
+#[derive(Default)]
+pub struct VoipGlobalState {
+    /// Camera permission status (captured at app level)
+    pub camera_permission: Option<PermissionStatus>,
+    /// Selected camera choice from VideoInputsEvent
+    pub camera_choice: Option<CameraChoice>,
+    /// Whether video inputs have been requested
+    pub video_inputs_requested: bool,
+    /// Cached OpenID token (valid for any room, tied to user session)
+    pub cached_openid_token: Option<CachedOpenIdToken>,
+    /// Cached LiveKit JWTs (per-room, since JWTs are room-specific)
+    pub cached_livekit_jwts: Vec<CachedLiveKitJwt>,
+    /// Active call state for PiP overlay display
+    pub active_call: Option<ActiveCallState>,
+}
+
+impl VoipGlobalState {
+    /// Initialize global VoIP state and request permissions/video inputs.
+    /// Call this in App::handle_startup.
+    pub fn initialize(cx: &mut Cx) {
+        // Set global state
+        cx.set_global(VoipGlobalState::default());
+
+        // Request camera permission
+        log!("VoipGlobalState: Requesting camera permission...");
+        cx.request_permission(makepad_widgets::makepad_platform::permission::Permission::Camera);
+
+        // Request video inputs enumeration - this triggers VideoInputsEvent
+        log!("VoipGlobalState: Requesting video inputs...");
+        cx.video_input(0, |_buf| {});
+    }
+
+    /// Handle camera permission result. Call from App's event handler.
+    pub fn handle_permission_result(cx: &mut Cx, status: PermissionStatus) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            log!("VoipGlobalState: Camera permission result: {:?}", status);
+            state.camera_permission = Some(status);
+        }
+    }
+
+    /// Handle video inputs event. Call from App's event handler.
+    pub fn handle_video_inputs(cx: &mut Cx, ev: &VideoInputsEvent) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            log!("VoipGlobalState: VideoInputs event with {} cameras", ev.descs.len());
+            state.video_inputs_requested = true;
+
+            if ev.descs.is_empty() {
+                log!("VoipGlobalState: No cameras found");
+                state.camera_choice = None;
+            } else {
+                state.camera_choice = camera::CameraManager::pick_camera_choice(ev);
+                if let Some(ref choice) = state.camera_choice {
+                    log!("VoipGlobalState: Selected camera: {} ({}x{} {:?})",
+                        choice.name, choice.width, choice.height, choice.pixel_format);
+                } else {
+                    log!("VoipGlobalState: No suitable camera format found");
+                }
+            }
+        }
+    }
+
+    /// Get camera permission from global state
+    pub fn get_camera_permission(cx: &mut Cx) -> Option<PermissionStatus> {
+        if cx.has_global::<VoipGlobalState>() {
+            cx.get_global::<VoipGlobalState>().camera_permission
+        } else {
+            None
+        }
+    }
+
+    /// Get camera choice from global state
+    pub fn get_camera_choice(cx: &mut Cx) -> Option<CameraChoice> {
+        if cx.has_global::<VoipGlobalState>() {
+            cx.get_global::<VoipGlobalState>().camera_choice.clone()
+        } else {
+            None
+        }
+    }
+
+    /// Store a cached OpenID token in global state
+    pub fn store_openid_token(cx: &mut Cx, token: CachedOpenIdToken) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            log!("VoipGlobalState: Storing OpenID token (expires in {} seconds)", token.remaining_seconds());
+            state.cached_openid_token = Some(token);
+        }
+    }
+
+    /// Get a valid cached OpenID token from global state
+    pub fn get_valid_openid_token(cx: &mut Cx) -> Option<CachedOpenIdToken> {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            if let Some(ref token) = state.cached_openid_token {
+                if token.is_valid() {
+                    log!("VoipGlobalState: Using cached OpenID token ({} seconds remaining)", token.remaining_seconds());
+                    return Some(token.clone());
+                } else {
+                    log!("VoipGlobalState: Cached OpenID token expired, clearing");
+                    state.cached_openid_token = None;
+                }
+            }
+        }
+        None
+    }
+
+    /// Store a cached LiveKit JWT in global state
+    pub fn store_livekit_jwt(cx: &mut Cx, jwt: CachedLiveKitJwt) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            log!("VoipGlobalState: Storing LiveKit JWT for room {} (expires in {} seconds)",
+                jwt.room_id, jwt.remaining_seconds());
+            // Remove any existing JWT for this room
+            state.cached_livekit_jwts.retain(|j| j.room_id != jwt.room_id);
+            // Add the new JWT
+            state.cached_livekit_jwts.push(jwt);
+            // Clean up expired JWTs
+            state.cached_livekit_jwts.retain(|j| j.is_valid());
+        }
+    }
+
+    /// Get a valid cached LiveKit JWT for the given room from global state
+    pub fn get_valid_livekit_jwt(cx: &mut Cx, room_id: &OwnedRoomId) -> Option<CachedLiveKitJwt> {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            // Clean up expired JWTs first
+            state.cached_livekit_jwts.retain(|j| j.is_valid());
+            // Find a valid JWT for this room
+            if let Some(jwt) = state.cached_livekit_jwts.iter().find(|j| j.is_valid_for_room(room_id)) {
+                log!("VoipGlobalState: Using cached LiveKit JWT for room {} ({} seconds remaining)",
+                    room_id, jwt.remaining_seconds());
+                return Some(jwt.clone());
+            }
+        }
+        None
+    }
+
+    /// Get the token state for persistence (to be called when saving app state)
+    pub fn get_token_state(cx: &mut Cx) -> VoipTokenState {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            VoipTokenState {
+                cached_openid_token: state.cached_openid_token.clone(),
+                cached_livekit_jwts: state.cached_livekit_jwts.clone(),
+            }
+        } else {
+            VoipTokenState::default()
+        }
+    }
+
+    /// Restore token state from persistence (to be called when loading app state)
+    pub fn restore_token_state(cx: &mut Cx, token_state: VoipTokenState) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            // Only restore valid tokens
+            if let Some(ref token) = token_state.cached_openid_token {
+                if token.is_valid() {
+                    log!("VoipGlobalState: Restoring cached OpenID token ({} seconds remaining)", token.remaining_seconds());
+                    state.cached_openid_token = Some(token.clone());
+                }
+            }
+            // Restore valid JWTs
+            for jwt in token_state.cached_livekit_jwts {
+                if jwt.is_valid() {
+                    log!("VoipGlobalState: Restoring cached LiveKit JWT for room {} ({} seconds remaining)",
+                        jwt.room_id, jwt.remaining_seconds());
+                    state.cached_livekit_jwts.push(jwt);
+                }
+            }
+        }
+    }
+
+    /// Check if there is an active call for the given room
+    pub fn is_call_active(cx: &mut Cx, room_id: &OwnedRoomId) -> bool {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            if let Some(ref active) = state.active_call {
+                return active.in_call && active.room_id.as_ref() == Some(room_id);
+            }
+        }
+        false
+    }
+
+    /// Update the active call state
+    pub fn update_active_call(cx: &mut Cx, call: ActiveCallState) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            log!("VoipGlobalState: Updating active call state for room {:?}, in_call={}",
+                call.room_id, call.in_call);
+            state.active_call = Some(call);
+        }
+    }
+
+    /// Clear the active call state
+    pub fn clear_active_call(cx: &mut Cx) {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            log!("VoipGlobalState: Clearing active call state");
+            state.active_call = None;
+        }
+    }
+
+    /// Get the active call state
+    pub fn get_active_call(cx: &mut Cx) -> Option<ActiveCallState> {
+        if cx.has_global::<VoipGlobalState>() {
+            let state = cx.get_global::<VoipGlobalState>();
+            return state.active_call.clone();
+        }
+        None
+    }
+}
diff --git a/src/voip/participants_list.rs b/src/voip/participants_list.rs
new file mode 100644
index 000000000..61558d5ea
--- /dev/null
+++ b/src/voip/participants_list.rs
@@ -0,0 +1,329 @@
+//! Participants list widget for VoIP calls
+//!
+//! This module provides a participants list widget that displays remote
+//! participants in a VoIP call, including their video feeds rendered as textures.
+
+use std::collections::HashMap;
+use makepad_widgets::*;
+use crate::shared::webrtc_video::{WebRtcVideoWidgetRefExt, WebRtcVideoFrame};
+
+/// Represents a remote participant in a VoIP call
+#[derive(Clone, Debug)]
+pub struct Participant {
+    pub id: String,
+    pub name: String,
+    pub avatar_letter: String,
+    pub is_muted: bool,
+    pub is_speaking: bool,
+    pub is_video_on: bool,
+}
+
+impl Default for Participant {
+    fn default() -> Self {
+        Self {
+            id: String::new(),
+            name: String::from("Unknown"),
+            avatar_letter: String::from("?"),
+            is_muted: false,
+            is_speaking: false,
+            is_video_on: false,
+        }
+    }
+}
+
+/// Internal state for a participant's video frame data
+struct ParticipantVideoFrame {
+    /// RGBA pixel data
+    data: Vec<u8>,
+    width: u32,
+    height: u32,
+}
+
+#[derive(Script, ScriptHook, Widget)]
+pub struct ParticipantsList {
+    #[deref]
+    view: View,
+    #[rust]
+    participants: Vec<Participant>,
+    /// Video frames for each participant, keyed by participant ID
+    #[rust]
+    video_frames: HashMap<String, ParticipantVideoFrame>,
+}
+
+impl Widget for ParticipantsList {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        while let Some(item) = self.view.draw_walk(cx, scope, walk).step() {
+            if let Some(mut list) = item.as_flat_list().borrow_mut() {
+                for (i, participant) in self.participants.iter().enumerate() {
+                    let item_id = LiveId::from_num(0, i as u64);
+                    if let Some(widget) = list.item(cx, item_id, live_id!(ParticipantItem)) {
+                        widget.label(cx, ids!(avatar_letter)).set_text(cx, &participant.avatar_letter);
+                        widget.label(cx, ids!(name_label)).set_text(cx, &participant.name);
+
+                        // Update mute icon color based on mute status
+                        let mut mute_btn = widget.button(cx, ids!(mute_icon));
+                        if participant.is_muted {
+                            script_apply_eval!(cx, mute_btn, {
+                                draw_icon +: { color: #e53935 }
+                            });
+                        } else {
+                            script_apply_eval!(cx, mute_btn, {
+                                draw_icon +: { color: #aaa }
+                            });
+                        }
+
+                        widget.label(cx, ids!(status_label)).set_text(cx, if participant.is_speaking { "Speaking" } else { "" });
+
+                        // Toggle video/avatar visibility based on is_video_on
+                        let has_frame = self.video_frames.contains_key(&participant.id);
+                        let has_video = participant.is_video_on && has_frame;
+
+                        let video_widget = widget.web_rtc_video(cx, ids!(participant_video));
+                        video_widget.set_visible(cx, has_video);
+                        widget.view(cx, ids!(avatar_container)).set_visible(cx, !has_video);
+
+                        // If video is on and we have frame data, set it on the WebRtcVideo widget
+                        if has_video {
+                            if let Some(video_frame) = self.video_frames.get(&participant.id) {
+                                let webrtc_frame = WebRtcVideoFrame {
+                                    data: video_frame.data.clone(),
+                                    width: video_frame.width,
+                                    height: video_frame.height,
+                                    participant_id: Some(participant.id.clone()),
+                                };
+                                video_widget.set_frame(cx, webrtc_frame);
+                            }
+                        }
+
+                        widget.draw_all(cx, scope);
+                    }
+                }
+            }
+        }
+        DrawStep::done()
+    }
+
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+    }
+}
+
+impl ParticipantsList {
+    /// Add a new participant to the list
+    pub fn add_participant(&mut self, cx: &mut Cx, participant: Participant) {
+        self.participants.push(participant);
+        self.redraw(cx);
+    }
+
+    /// Remove a participant from the list
+    pub fn remove_participant(&mut self, cx: &mut Cx, id: &str) {
+        self.participants.retain(|p| p.id != id);
+        self.video_frames.remove(id);
+        self.redraw(cx);
+    }
+
+    /// Update a participant's properties
+    pub fn update_participant(&mut self, cx: &mut Cx, id: &str, updater: impl FnOnce(&mut Participant)) {
+        if let Some(participant) = self.participants.iter_mut().find(|p| p.id == id) {
+            updater(participant);
+            self.redraw(cx);
+        }
+    }
+
+    /// Clear all participants from the list
+    pub fn clear(&mut self, cx: &mut Cx) {
+        self.participants.clear();
+        // Don't clear video_frames - they will be reused when participants are re-added
+        // This preserves video streams across participant list refreshes
+        self.redraw(cx);
+    }
+
+    /// Clear all participants and their video frames
+    pub fn clear_all(&mut self, cx: &mut Cx) {
+        self.participants.clear();
+        self.video_frames.clear();
+        self.redraw(cx);
+    }
+
+    /// Get a reference to the participants list
+    pub fn participants(&self) -> &[Participant] {
+        &self.participants
+    }
+
+    /// Push an I420 video frame to a participant's video
+    ///
+    /// This converts the I420 YUV data to RGBA and stores it for rendering.
+    ///
+    /// # Arguments
+    /// * `livekit_participant_id` - The LiveKit identity (may include session suffix)
+    /// * `y` - Y plane data
+    /// * `u` - U plane data
+    /// * `v` - V plane data
+    /// * `width` - Frame width in pixels
+    /// * `height` - Frame height in pixels
+    /// * `_pts_ms` - Presentation timestamp in milliseconds (currently unused)
+    pub fn push_video_frame(
+        &mut self,
+        cx: &mut Cx,
+        livekit_participant_id: &str,
+        y: Vec<u8>,
+        u: Vec<u8>,
+        v: Vec<u8>,
+        width: u32,
+        height: u32,
+        _pts_ms: u64,
+    ) {
+        // LiveKit identity format: "@user:server.tld:session_id"
+        // Matrix user_id format: "@user:server.tld"
+        // We need to match by user_id prefix since LiveKit adds session suffix
+
+        // Find matching participant - try exact match first, then prefix match
+        let storage_key = self.participants.iter()
+            .find(|p| p.id == livekit_participant_id)
+            .or_else(|| self.participants.iter().find(|p| livekit_participant_id.starts_with(&p.id)))
+            .map(|p| p.id.clone());
+
+        let storage_key = match storage_key {
+            Some(key) => key,
+            None => {
+                // No matching participant found - store under LiveKit ID anyway
+                // (participant might be added later)
+                livekit_participant_id.to_string()
+            }
+        };
+
+        // Convert I420 YUV to RGBA
+        let rgba_data = i420_to_rgba(&y, &u, &v, width, height);
+
+        // Store the RGBA frame data
+        self.video_frames.insert(
+            storage_key.clone(),
+            ParticipantVideoFrame {
+                data: rgba_data,
+                width,
+                height,
+            },
+        );
+
+        // Mark participant as having video
+        if let Some(participant) = self.participants.iter_mut().find(|p| p.id == storage_key) {
+            participant.is_video_on = true;
+        }
+
+        self.redraw(cx);
+    }
+
+    /// Check if a participant has an active video frame
+    /// Checks both exact match and prefix match (for LiveKit session IDs)
+    pub fn has_video_frame(&self, participant_id: &str) -> bool {
+        // Exact match
+        if self.video_frames.contains_key(participant_id) {
+            return true;
+        }
+        // Check if any frame key starts with this participant_id
+        // (for when frame was stored under LiveKit ID before participant was matched)
+        self.video_frames.keys().any(|k| k.starts_with(participant_id))
+    }
+
+    /// Check if a participant has an active video texture (alias for has_video_frame)
+    pub fn has_video_texture(&self, participant_id: &str) -> bool {
+        self.has_video_frame(participant_id)
+    }
+}
+
+/// Convert I420 YUV to RGBA
+fn i420_to_rgba(y: &[u8], u: &[u8], v: &[u8], width: u32, height: u32) -> Vec<u8> {
+    let width = width as usize;
+    let height = height as usize;
+    let mut rgba = vec![0u8; width * height * 4];
+
+    for j in 0..height {
+        for i in 0..width {
+            let y_idx = j * width + i;
+            let uv_idx = (j / 2) * (width / 2) + (i / 2);
+
+            let y_val = y[y_idx] as f32;
+            let u_val = u[uv_idx] as f32 - 128.0;
+            let v_val = v[uv_idx] as f32 - 128.0;
+
+            // BT.601 YUV to RGB conversion
+            let r = (y_val + 1.402 * v_val).clamp(0.0, 255.0) as u8;
+            let g = (y_val - 0.344 * u_val - 0.714 * v_val).clamp(0.0, 255.0) as u8;
+            let b = (y_val + 1.772 * u_val).clamp(0.0, 255.0) as u8;
+
+            let rgba_idx = (j * width + i) * 4;
+            rgba[rgba_idx] = r;
+            rgba[rgba_idx + 1] = g;
+            rgba[rgba_idx + 2] = b;
+            rgba[rgba_idx + 3] = 255; // Alpha
+        }
+    }
+
+    rgba
+}
+
+impl ParticipantsListRef {
+    pub fn add_participant(&self, cx: &mut Cx, participant: Participant) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.add_participant(cx, participant);
+        }
+    }
+
+    pub fn remove_participant(&self, cx: &mut Cx, id: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.remove_participant(cx, id);
+        }
+    }
+
+    pub fn update_participant(&self, cx: &mut Cx, id: &str, updater: impl FnOnce(&mut Participant)) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.update_participant(cx, id, updater);
+        }
+    }
+
+    pub fn clear(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.clear(cx);
+        }
+    }
+
+    pub fn clear_all(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.clear_all(cx);
+        }
+    }
+
+    pub fn get_participants(&self) -> Vec<Participant> {
+        if let Some(inner) = self.borrow() {
+            inner.participants.clone()
+        } else {
+            Vec::new()
+        }
+    }
+
+    /// Check if a participant has an active video texture
+    pub fn has_video_texture(&self, participant_id: &str) -> bool {
+        if let Some(inner) = self.borrow() {
+            inner.has_video_texture(participant_id)
+        } else {
+            false
+        }
+    }
+
+    /// Push an I420 video frame to a participant's video texture
+    pub fn push_video_frame(
+        &self,
+        cx: &mut Cx,
+        participant_id: &str,
+        y: Vec<u8>,
+        u: Vec<u8>,
+        v: Vec<u8>,
+        width: u32,
+        height: u32,
+        pts_ms: u64,
+    ) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.push_video_frame(cx, participant_id, y, u, v, width, height, pts_ms);
+        }
+    }
+}
diff --git a/src/voip/pip_overlay.rs b/src/voip/pip_overlay.rs
new file mode 100644
index 000000000..cc355ca16
--- /dev/null
+++ b/src/voip/pip_overlay.rs
@@ -0,0 +1,515 @@
+//! Picture-in-Picture (PiP) overlay for VoIP calls
+//!
+//! This module provides a floating PiP window that appears when the user switches
+//! to a different room tab during an active VoIP call. It shows participant info,
+//! call status, and control buttons.
+
+use makepad_widgets::*;
+use makepad_widgets::video::VideoCameraPreviewMode;
+use matrix_sdk::ruma::OwnedRoomId;
+use super::{VoipGlobalState, VoipAction, CameraChoice};
+
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    mod.widgets.PipVoipOverlay = #(PipVoipOverlay::register_widget(vm)) {
+        width: Fit
+        height: Fit
+        flow: Overlay
+        visible: false
+
+        // Position in top-right corner
+        margin: Inset { top: 60, right: 16, left: 0, bottom: 0 }
+        align: Align { x: 1.0, y: 0.0 }
+
+        // Main container with click area
+        pip_container := RoundedView {
+            width: 280
+            height: Fit
+            padding: 0
+            draw_bg.color: #2a2a4a
+            draw_bg.radius: 12.0
+            flow: Down
+            spacing: 0
+
+            // Video preview area
+            pip_video_container := View {
+                width: Fill
+                height: 160
+                flow: Overlay
+
+                // Avatar placeholder (shown when camera is off)
+                pip_avatar_view := View {
+                    width: Fill
+                    height: Fill
+                    align: Center
+                    show_bg: true
+                    draw_bg.color: #1a1a2e
+
+                    RoundedView {
+                        width: 60
+                        height: 60
+                        draw_bg.color: #a0d0a0
+                        draw_bg.radius: 30.0
+                        align: Center
+
+                        pip_avatar_letter := Label {
+                            text: "?"
+                            draw_text.text_style.font_size: 24
+                            draw_text.color: #2a6a2a
+                        }
+                    }
+                }
+
+                // Camera video (shown when camera is on)
+                pip_video_host := View {
+                    width: Fill
+                    height: Fill
+                    visible: false
+
+                    pip_camera_video := Video {
+                        width: Fill
+                        height: Fill
+                        autoplay: false
+                        show_controls: false
+                    }
+                }
+
+                // Back button overlay at top-left
+                View {
+                    width: Fill
+                    height: Fill
+                    align: Align { x: 0.0, y: 0.0 }
+                    padding: 8
+
+                    pip_back_button := RobrixIconButton {
+                        width: 32
+                        height: 32
+                        padding: 6
+                        draw_icon.svg: (ICON_JUMP)
+                        icon_walk: Walk { width: 16, height: 16 }
+                        draw_bg +: {
+                            color: #1a1a3aCC
+                            border_radius: 16.0
+                        }
+                        draw_icon +: {
+                            color: #fff
+                        }
+                    }
+                }
+
+                // Name badge overlay at bottom
+                View {
+                    width: Fill
+                    height: Fill
+                    align: Align { x: 0.5, y: 1.0 }
+                    padding: 8
+
+                    RoundedView {
+                        width: Fit
+                        height: Fit
+                        padding: Inset { left: 8, right: 10, top: 4, bottom: 4 }
+                        draw_bg.color: #1a1a3a
+                        draw_bg.radius: 10.0
+                        flow: Right
+                        spacing: 4
+                        align: Center
+
+                        participant_name := Label {
+                            text: "User"
+                            draw_text.text_style.font_size: 11
+                            draw_text.color: #ddd
+                        }
+
+                        status_label := Label {
+                            text: ""
+                            draw_text.text_style.font_size: 10
+                            draw_text.color: #aaa
+                            margin: Inset { left: 4 }
+                        }
+                    }
+                }
+            }
+
+            // Control buttons row
+            controls_row := View {
+                width: Fill
+                height: Fit
+                flow: Right
+                spacing: 8
+                align: Center
+                padding: 10
+
+                pip_mic_button := RobrixIconButton {
+                    width: 36
+                    height: 36
+                    padding: 6
+                    draw_icon.svg: (ICON_MICROPHONE)
+                    icon_walk: Walk { width: 18, height: 18 }
+                    draw_bg +: {
+                        color: #3a3a5a
+                        border_radius: 18.0
+                    }
+                    draw_icon +: {
+                        color: #fff
+                    }
+                }
+
+                pip_camera_button := RobrixIconButton {
+                    width: 36
+                    height: 36
+                    padding: 6
+                    draw_icon.svg: (ICON_VIDEO)
+                    icon_walk: Walk { width: 18, height: 18 }
+                    draw_bg +: {
+                        color: #3a3a5a
+                        border_radius: 18.0
+                    }
+                    draw_icon +: {
+                        color: #fff
+                    }
+                }
+
+                pip_screenshare_button := RobrixIconButton {
+                    width: 36
+                    height: 36
+                    padding: 6
+                    draw_icon.svg: (ICON_SQUARES)
+                    icon_walk: Walk { width: 18, height: 18 }
+                    draw_bg +: {
+                        color: #3a3a5a
+                        border_radius: 18.0
+                    }
+                    draw_icon +: {
+                        color: #fff
+                    }
+                }
+
+                pip_hangup_button := RobrixIconButton {
+                    width: 36
+                    height: 36
+                    padding: 6
+                    draw_icon.svg: (ICON_CLOSE)
+                    icon_walk: Walk { width: 18, height: 18 }
+                    draw_bg +: {
+                        color: #e53935
+                        border_radius: 18.0
+                    }
+                    draw_icon +: {
+                        color: #fff
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// PiP overlay widget for VoIP calls
+#[derive(Script, ScriptHook, Widget)]
+pub struct PipVoipOverlay {
+    #[deref]
+    view: View,
+
+    /// The room ID of the active call being displayed
+    #[rust]
+    room_id: Option<OwnedRoomId>,
+
+    /// Whether the PiP is currently visible
+    #[rust]
+    is_visible: bool,
+
+    /// Whether the camera is active in PiP
+    #[rust]
+    camera_active: bool,
+
+    /// Stored camera choice for starting camera
+    #[rust]
+    camera_choice: Option<CameraChoice>,
+}
+
+impl Widget for PipVoipOverlay {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+
+        // Handle video events
+        match event {
+            Event::VideoPlaybackPrepared(_) => {
+                if self.is_visible && self.camera_active {
+                    self.show_video(cx);
+                }
+            }
+            Event::VideoTextureUpdated(_) => {
+                if self.is_visible && self.camera_active {
+                    self.show_video(cx);
+                }
+            }
+            _ => {}
+        }
+
+        if !self.is_visible {
+            return;
+        }
+
+        // Handle button clicks
+        if let Event::Actions(actions) = event {
+            self.handle_actions(cx, actions);
+        }
+
+        // Handle click anywhere on the PiP to return to VoIP tab
+        if let Hit::FingerUp(fe) = event.hits(cx, self.view.area()) {
+            if fe.was_tap() {
+                // Check if the click was NOT on a button (buttons handle their own clicks)
+                let back_area = self.view.button(cx, ids!(pip_back_button)).area();
+                let mic_area = self.view.button(cx, ids!(pip_mic_button)).area();
+                let cam_area = self.view.button(cx, ids!(pip_camera_button)).area();
+                let share_area = self.view.button(cx, ids!(pip_screenshare_button)).area();
+                let hangup_area = self.view.button(cx, ids!(pip_hangup_button)).area();
+
+                let click_pos = fe.abs;
+                let on_button = back_area.rect(cx).contains(click_pos)
+                    || mic_area.rect(cx).contains(click_pos)
+                    || cam_area.rect(cx).contains(click_pos)
+                    || share_area.rect(cx).contains(click_pos)
+                    || hangup_area.rect(cx).contains(click_pos);
+
+                if !on_button {
+                    if let Some(room_id) = self.room_id.clone() {
+                        log!("PipVoipOverlay: Clicked on PiP, returning to VoIP tab");
+                        cx.action(VoipAction::ReturnToVoipTab { room_id });
+                    }
+                }
+            }
+        }
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        if self.is_visible {
+            // Update the display from global state before drawing
+            self.update_from_global_state(cx);
+        }
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl PipVoipOverlay {
+    /// Show the PiP overlay for the given room
+    pub fn show(&mut self, cx: &mut Cx, room_id: OwnedRoomId) {
+        log!("PipVoipOverlay: Showing for room {}", room_id);
+        self.room_id = Some(room_id);
+        self.is_visible = true;
+        self.view.set_visible(cx, true);
+        self.update_from_global_state(cx);
+
+        // Start camera if available and not muted
+        if let Some(active_call) = VoipGlobalState::get_active_call(cx) {
+            if !active_call.camera_muted {
+                self.start_camera(cx);
+            }
+        }
+
+        self.redraw(cx);
+    }
+
+    /// Hide the PiP overlay
+    pub fn hide(&mut self, cx: &mut Cx) {
+        log!("PipVoipOverlay: Hiding");
+        self.is_visible = false;
+
+        // Stop camera before hiding
+        self.stop_camera(cx);
+
+        self.view.set_visible(cx, false);
+        self.redraw(cx);
+    }
+
+    /// Start the camera in PiP
+    fn start_camera(&mut self, cx: &mut Cx) {
+        // Get camera choice from global state
+        let Some(choice) = VoipGlobalState::get_camera_choice(cx) else {
+            log!("PipVoipOverlay: No camera choice available");
+            return;
+        };
+
+        let video = self.view.video(cx, &[live_id!(pip_camera_video)]);
+
+        if !video.is_unprepared() {
+            log!("PipVoipOverlay: Camera already running or preparing");
+            return;
+        }
+
+        log!("PipVoipOverlay: Starting camera: {} ({}x{} {:?})",
+            choice.name, choice.width, choice.height, choice.pixel_format);
+
+        self.camera_choice = Some(choice.clone());
+        self.camera_active = true;
+
+        video.set_camera_preview_mode(cx, VideoCameraPreviewMode::Native);
+        video.set_source_camera(cx, choice.input_id, choice.format_id);
+        video.begin_playback(cx);
+    }
+
+    /// Stop the camera in PiP
+    fn stop_camera(&mut self, cx: &mut Cx) {
+        if !self.camera_active {
+            return;
+        }
+
+        log!("PipVoipOverlay: Stopping camera");
+        let video = self.view.video(cx, &[live_id!(pip_camera_video)]);
+        if !video.is_unprepared() && !video.is_cleaning_up() {
+            video.stop_and_cleanup_resources(cx);
+        }
+
+        self.view.view(cx, ids!(pip_video_host)).set_visible(cx, false);
+        self.view.view(cx, ids!(pip_avatar_view)).set_visible(cx, true);
+        self.camera_active = false;
+    }
+
+    /// Show video view
+    fn show_video(&mut self, cx: &mut Cx) {
+        self.view.view(cx, ids!(pip_video_host)).set_visible(cx, true);
+        self.view.view(cx, ids!(pip_avatar_view)).set_visible(cx, false);
+    }
+
+    /// Update the display from global VoIP state
+    fn update_from_global_state(&mut self, cx: &mut Cx) {
+        if let Some(active_call) = VoipGlobalState::get_active_call(cx) {
+            // Update participant info
+            self.view.label(cx, ids!(pip_avatar_letter))
+                .set_text(cx, &active_call.local_participant.avatar_letter);
+            self.view.label(cx, ids!(participant_name))
+                .set_text(cx, &active_call.local_participant.display_name);
+            self.view.label(cx, ids!(status_label))
+                .set_text(cx, &format!(" - {}", active_call.status_text));
+
+            // Update button styles based on state
+            let mut mic_btn = self.view.button(cx, ids!(pip_mic_button));
+            let mut cam_btn = self.view.button(cx, ids!(pip_camera_button));
+            let mut share_btn = self.view.button(cx, ids!(pip_screenshare_button));
+
+            // Mic button - red when muted
+            if active_call.mic_muted {
+                script_apply_eval!(cx, mic_btn, {
+                    draw_bg +: { color: #e53935 }
+                });
+            } else {
+                script_apply_eval!(cx, mic_btn, {
+                    draw_bg +: { color: #3a3a5a }
+                });
+            }
+
+            // Camera button - red when off
+            if active_call.camera_muted {
+                script_apply_eval!(cx, cam_btn, {
+                    draw_bg +: { color: #e53935 }
+                });
+                // Hide video, show avatar when camera is muted
+                if self.camera_active {
+                    self.stop_camera(cx);
+                }
+            } else {
+                script_apply_eval!(cx, cam_btn, {
+                    draw_bg +: { color: #3a3a5a }
+                });
+                // Start camera if not already active
+                if !self.camera_active && self.is_visible {
+                    self.start_camera(cx);
+                }
+            }
+
+            // Screen share button - green when sharing
+            if active_call.screen_sharing {
+                script_apply_eval!(cx, share_btn, {
+                    draw_bg +: { color: #4CAF50 }
+                });
+            } else {
+                script_apply_eval!(cx, share_btn, {
+                    draw_bg +: { color: #3a3a5a }
+                });
+            }
+
+            // If the call ended, hide the PiP
+            if !active_call.in_call {
+                self.hide(cx);
+            }
+        } else {
+            // No active call, hide PiP
+            self.hide(cx);
+        }
+    }
+
+    /// Handle UI actions (button clicks)
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        let Some(room_id) = self.room_id.clone() else {
+            return;
+        };
+
+        // Back button - return to VoIP tab
+        if self.view.button(cx, ids!(pip_back_button)).clicked(actions) {
+            log!("PipVoipOverlay: Back button clicked, returning to VoIP tab");
+            cx.action(VoipAction::ReturnToVoipTab { room_id: room_id.clone() });
+            return;
+        }
+
+        // Mic button
+        if self.view.button(cx, ids!(pip_mic_button)).clicked(actions) {
+            log!("PipVoipOverlay: Mic button clicked");
+            cx.action(VoipAction::PipMicToggle { room_id: room_id.clone() });
+        }
+
+        // Camera button
+        if self.view.button(cx, ids!(pip_camera_button)).clicked(actions) {
+            log!("PipVoipOverlay: Camera button clicked");
+            cx.action(VoipAction::PipCameraToggle { room_id: room_id.clone() });
+        }
+
+        // Screen share button
+        if self.view.button(cx, ids!(pip_screenshare_button)).clicked(actions) {
+            log!("PipVoipOverlay: Screen share button clicked");
+            cx.action(VoipAction::PipScreenShareToggle { room_id: room_id.clone() });
+        }
+
+        // Hangup button
+        if self.view.button(cx, ids!(pip_hangup_button)).clicked(actions) {
+            log!("PipVoipOverlay: Hangup button clicked");
+            cx.action(VoipAction::PipHangup { room_id: room_id.clone() });
+            // Hide PiP after hangup
+            self.hide(cx);
+        }
+    }
+}
+
+impl PipVoipOverlayRef {
+    /// Show the PiP overlay for the given room
+    pub fn show(&self, cx: &mut Cx, room_id: OwnedRoomId) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.show(cx, room_id);
+        }
+    }
+
+    /// Hide the PiP overlay
+    pub fn hide(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.hide(cx);
+        }
+    }
+
+    /// Check if the PiP is currently visible
+    pub fn is_visible(&self) -> bool {
+        if let Some(inner) = self.borrow() {
+            inner.is_visible
+        } else {
+            false
+        }
+    }
+
+    /// Get the room ID of the active call being displayed
+    pub fn get_room_id(&self) -> Option<OwnedRoomId> {
+        if let Some(inner) = self.borrow() {
+            inner.room_id.clone()
+        } else {
+            None
+        }
+    }
+}
diff --git a/src/voip/remote_video_session.rs b/src/voip/remote_video_session.rs
new file mode 100644
index 000000000..7b2ebe65f
--- /dev/null
+++ b/src/voip/remote_video_session.rs
@@ -0,0 +1,109 @@
+//! Remote video session for displaying LiveKit participant video
+
+use std::collections::VecDeque;
+use std::sync::{Arc, Mutex};
+use makepad_widgets::makepad_platform::{
+    VideoFrameSession, VideoSessionState,
+    MseDecodedFrame,
+};
+use makepad_widgets::makepad_platform::video_decode::yuv::{YuvPlaneData, YuvLayout, YuvColorMatrix};
+
+/// A video session that receives I420 frames from LiveKit remote participants
+pub struct RemoteVideoSession {
+    frames: Arc<Mutex<VecDeque<MseDecodedFrame>>>,
+    dimensions: Arc<Mutex<Option<(u32, u32)>>>,
+    state: Arc<Mutex<VideoSessionState>>,
+}
+
+impl Default for RemoteVideoSession {
+    fn default() -> Self {
+        Self {
+            frames: Arc::new(Mutex::new(VecDeque::new())),
+            dimensions: Arc::new(Mutex::new(None)),
+            state: Arc::new(Mutex::new(VideoSessionState::Connecting)),
+        }
+    }
+}
+
+impl RemoteVideoSession {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Get a handle to push frames into this session
+    pub fn get_pusher(&self) -> RemoteVideoFramePusher {
+        RemoteVideoFramePusher {
+            frames: self.frames.clone(),
+            dimensions: self.dimensions.clone(),
+            state: self.state.clone(),
+        }
+    }
+}
+
+impl VideoFrameSession for RemoteVideoSession {
+    fn take_frames(&mut self) -> Vec<MseDecodedFrame> {
+        let mut frames = self.frames.lock().unwrap();
+        frames.drain(..).collect()
+    }
+
+    fn dimensions(&self) -> Option<(u32, u32)> {
+        *self.dimensions.lock().unwrap()
+    }
+
+    fn state(&self) -> VideoSessionState {
+        self.state.lock().unwrap().clone()
+    }
+}
+
+/// Handle for pushing frames into a RemoteVideoSession from another thread
+#[derive(Clone)]
+pub struct RemoteVideoFramePusher {
+    frames: Arc<Mutex<VecDeque<MseDecodedFrame>>>,
+    dimensions: Arc<Mutex<Option<(u32, u32)>>>,
+    state: Arc<Mutex<VideoSessionState>>,
+}
+
+impl RemoteVideoFramePusher {
+    /// Push an I420 frame into the session
+    pub fn push_i420_frame(&self, y: Vec<u8>, u: Vec<u8>, v: Vec<u8>, width: u32, height: u32, pts_ms: u64) {
+        // Update dimensions
+        *self.dimensions.lock().unwrap() = Some((width, height));
+
+        // Set state to active
+        *self.state.lock().unwrap() = VideoSessionState::Active;
+
+        // Create the decoded frame
+        let frame = MseDecodedFrame {
+            track_id: 0,
+            pts_ms,
+            yuv: YuvPlaneData {
+                y,
+                u,
+                v,
+                width,
+                height,
+                layout: YuvLayout::I420,
+                matrix: YuvColorMatrix::BT709,
+            },
+        };
+
+        // Push to queue (limit queue size to avoid memory buildup)
+        let mut frames = self.frames.lock().unwrap();
+        if frames.len() >= 3 {
+            frames.pop_front();
+        }
+        frames.push_back(frame);
+    }
+
+    /// Mark the session as ended
+    #[allow(dead_code)]
+    pub fn set_ended(&self) {
+        *self.state.lock().unwrap() = VideoSessionState::Ended;
+    }
+
+    /// Mark the session as errored
+    #[allow(dead_code)]
+    pub fn set_error(&self, error: String) {
+        *self.state.lock().unwrap() = VideoSessionState::Error(error);
+    }
+}
diff --git a/src/voip/speaking.rs b/src/voip/speaking.rs
new file mode 100644
index 000000000..072c849f9
--- /dev/null
+++ b/src/voip/speaking.rs
@@ -0,0 +1,88 @@
+//! Audio level detection and speaking indicator
+
+use makepad_widgets::*;
+use makepad_widgets::View;
+use makepad_widgets::makepad_platform::audio::{AudioDeviceId, AudioDevicesEvent};
+use std::sync::atomic::{AtomicU32, Ordering};
+use std::sync::Arc;
+
+/// Threshold for speaking detection (RMS level)
+const SPEAKING_THRESHOLD: f32 = 0.01;
+
+/// Speaking detector handles audio level monitoring
+pub struct SpeakingDetector {
+    pub audio_device: Option<AudioDeviceId>,
+    pub audio_level: Arc<AtomicU32>,
+    pub is_speaking: bool,
+}
+
+impl Default for SpeakingDetector {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl SpeakingDetector {
+    pub fn new() -> Self {
+        Self {
+            audio_device: None,
+            audio_level: Arc::new(AtomicU32::new(0)),
+            is_speaking: false,
+        }
+    }
+
+    /// Handle audio devices event and start monitoring
+    pub fn handle_audio_devices(&mut self, cx: &mut Cx, ev: &AudioDevicesEvent) {
+        log!("AudioDevices event: {} devices found", ev.descs.len());
+
+        let inputs = ev.default_input();
+        if let Some(device_id) = inputs.first() {
+            log!("Using audio input device: {:?}", device_id);
+            self.audio_device = Some(*device_id);
+            cx.use_audio_inputs(&[*device_id]);
+
+            let audio_level = self.audio_level.clone();
+            cx.audio_input(0, move |_info, buffer| {
+                let rms = Self::calculate_rms(&buffer.data);
+                audio_level.store(rms.to_bits(), Ordering::Relaxed);
+            });
+        }
+    }
+
+    /// Calculate RMS (root mean square) of audio samples
+    fn calculate_rms(samples: &[f32]) -> f32 {
+        if samples.is_empty() {
+            return 0.0;
+        }
+        let mut sum = 0.0f32;
+        for sample in samples {
+            sum += sample * sample;
+        }
+        (sum / samples.len() as f32).sqrt()
+    }
+
+    /// Get current audio level
+    pub fn get_level(&self) -> f32 {
+        let level_bits = self.audio_level.load(Ordering::Relaxed);
+        f32::from_bits(level_bits)
+    }
+
+    /// Check if user is currently speaking (level above threshold)
+    pub fn check_speaking(&mut self, is_muted: bool) -> bool {
+        if is_muted {
+            self.is_speaking = false;
+            return false;
+        }
+
+        let level = self.get_level();
+        let was_speaking = self.is_speaking;
+        self.is_speaking = level > SPEAKING_THRESHOLD;
+
+        was_speaking != self.is_speaking
+    }
+
+    /// Update the speaking indicator in the UI
+    pub fn update_indicator(ui: &View, cx: &mut Cx, is_speaking: bool) {
+        ui.view(cx, ids!(local_speaking_border)).set_visible(cx, is_speaking);
+    }
+}
diff --git a/src/voip/token_cache.rs b/src/voip/token_cache.rs
new file mode 100644
index 000000000..db16ec7ee
--- /dev/null
+++ b/src/voip/token_cache.rs
@@ -0,0 +1,284 @@
+//! Token caching for VoIP authentication (OpenID and LiveKit JWT)
+//!
+//! This module provides caching mechanisms for OpenID tokens and LiveKit JWTs
+//! to avoid unnecessary network requests. Tokens are cached with their expiration
+//! times and validated before use.
+
+use serde::{Deserialize, Serialize};
+use matrix_sdk::ruma::OwnedRoomId;
+
+/// Cached OpenID token with fetch timestamp for reuse.
+/// This structure is serializable for persistence across app restarts.
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct CachedOpenIdToken {
+    pub access_token: String,
+    pub token_type: String,
+    pub matrix_server_name: String,
+    /// Unix timestamp (seconds) when the token was fetched
+    pub fetched_at: u64,
+    /// Expiry duration in seconds (copied from response for convenience)
+    pub expires_in: u64,
+}
+
+impl CachedOpenIdToken {
+    /// Create a new cached token with the current timestamp
+    pub fn new(
+        access_token: String,
+        token_type: String,
+        matrix_server_name: String,
+        expires_in: u64,
+    ) -> Self {
+        let fetched_at = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+        Self {
+            access_token,
+            token_type,
+            matrix_server_name,
+            fetched_at,
+            expires_in,
+        }
+    }
+
+    /// Check if the token is still valid with a safety margin (60 seconds)
+    pub fn is_valid(&self) -> bool {
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+
+        // Token is valid if current time is less than (fetched_at + expires_in - margin)
+        // Use a 60-second safety margin to avoid edge cases
+        let safety_margin = 60;
+        let expiry_time = self.fetched_at.saturating_add(self.expires_in);
+
+        now < expiry_time.saturating_sub(safety_margin)
+    }
+
+    /// Get the remaining validity time in seconds
+    pub fn remaining_seconds(&self) -> u64 {
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+
+        let expiry_time = self.fetched_at.saturating_add(self.expires_in);
+        expiry_time.saturating_sub(now)
+    }
+}
+
+/// Cached LiveKit JWT with fetch timestamp for reuse.
+/// JWT tokens typically expire after some time, we cache them to avoid unnecessary requests.
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct CachedLiveKitJwt {
+    pub jwt: String,
+    pub url: String,
+    /// The room ID this JWT is valid for
+    pub room_id: OwnedRoomId,
+    /// Unix timestamp (seconds) when the JWT was fetched
+    pub fetched_at: u64,
+    /// Expiration timestamp extracted from JWT (seconds since epoch)
+    pub expires_at: u64,
+}
+
+impl CachedLiveKitJwt {
+    /// Create a new cached JWT with the current timestamp.
+    /// Attempts to extract expiration from JWT payload, falls back to 1 hour default.
+    pub fn new(jwt: String, url: String, room_id: OwnedRoomId) -> Self {
+        let fetched_at = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+
+        // Try to extract expiration from JWT
+        let expires_at = Self::extract_jwt_expiration(&jwt)
+            .unwrap_or(fetched_at + 3600); // Default to 1 hour if extraction fails
+
+        Self {
+            jwt,
+            url,
+            room_id,
+            fetched_at,
+            expires_at,
+        }
+    }
+
+    /// Extract expiration timestamp from JWT payload.
+    /// JWT format: header.payload.signature (all base64 encoded)
+    fn extract_jwt_expiration(jwt: &str) -> Option<u64> {
+        let parts: Vec<&str> = jwt.split('.').collect();
+        if parts.len() != 3 {
+            return None;
+        }
+
+        // Decode payload (second part) - JWT uses base64url encoding
+        let payload_b64 = parts[1];
+        // Add padding if needed
+        let padding = (4 - payload_b64.len() % 4) % 4;
+        let padded = format!("{}{}", payload_b64, "=".repeat(padding));
+        // Replace URL-safe chars
+        let standard_b64: String = padded
+            .chars()
+            .map(|c| match c {
+                '-' => '+',
+                '_' => '/',
+                c => c,
+            })
+            .collect();
+
+        // Decode base64
+        let decoded = base64_decode(&standard_b64)?;
+        let payload_str = String::from_utf8(decoded).ok()?;
+
+        // Parse JSON and extract "exp" field
+        // Simple parsing without full JSON library
+        if let Some(exp_start) = payload_str.find("\"exp\":") {
+            let after_exp = &payload_str[exp_start + 6..];
+            let exp_str: String = after_exp
+                .chars()
+                .take_while(|c| c.is_ascii_digit())
+                .collect();
+            return exp_str.parse().ok();
+        }
+
+        None
+    }
+
+    /// Check if the JWT is still valid with a safety margin (60 seconds)
+    pub fn is_valid(&self) -> bool {
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+
+        // Token is valid if current time is less than (expires_at - margin)
+        let safety_margin = 60;
+        now < self.expires_at.saturating_sub(safety_margin)
+    }
+
+    /// Check if this JWT is valid for the given room
+    pub fn is_valid_for_room(&self, room_id: &OwnedRoomId) -> bool {
+        self.is_valid() && &self.room_id == room_id
+    }
+
+    /// Get the remaining validity time in seconds
+    pub fn remaining_seconds(&self) -> u64 {
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+
+        self.expires_at.saturating_sub(now)
+    }
+}
+
+/// Simple base64 decoder (no external dependency)
+fn base64_decode(input: &str) -> Option<Vec<u8>> {
+    const CHARS: &[u8] = b"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+    fn char_to_val(c: u8) -> Option<u8> {
+        CHARS.iter().position(|&x| x == c).map(|p| p as u8)
+    }
+
+    let input: Vec<u8> = input.bytes().filter(|&b| b != b'=').collect();
+    let mut output = Vec::new();
+
+    for chunk in input.chunks(4) {
+        let vals: Vec<u8> = chunk.iter().filter_map(|&c| char_to_val(c)).collect();
+        if vals.len() < 2 {
+            continue;
+        }
+
+        output.push((vals[0] << 2) | (vals[1] >> 4));
+        if vals.len() > 2 {
+            output.push((vals[1] << 4) | (vals[2] >> 2));
+        }
+        if vals.len() > 3 {
+            output.push((vals[2] << 6) | vals[3]);
+        }
+    }
+
+    Some(output)
+}
+
+/// Persistent VoIP token state, stored in AppState for persistence across app restarts.
+#[derive(Clone, Debug, Default, Serialize, Deserialize)]
+pub struct VoipTokenState {
+    /// Cached OpenID token (valid for any room, tied to user session)
+    pub cached_openid_token: Option<CachedOpenIdToken>,
+    /// Cached LiveKit JWTs (per-room, since JWTs are room-specific)
+    pub cached_livekit_jwts: Vec<CachedLiveKitJwt>,
+}
+
+impl VoipTokenState {
+    /// Get a valid cached LiveKit JWT for the given room, if available
+    pub fn get_valid_jwt_for_room(&self, room_id: &OwnedRoomId) -> Option<&CachedLiveKitJwt> {
+        self.cached_livekit_jwts
+            .iter()
+            .find(|jwt| jwt.is_valid_for_room(room_id))
+    }
+
+    /// Store a new LiveKit JWT, replacing any existing one for the same room
+    pub fn store_jwt(&mut self, jwt: CachedLiveKitJwt) {
+        // Remove any existing JWT for this room
+        self.cached_livekit_jwts
+            .retain(|j| j.room_id != jwt.room_id);
+        // Add the new JWT
+        self.cached_livekit_jwts.push(jwt);
+        // Clean up expired JWTs
+        self.cleanup_expired();
+    }
+
+    /// Store a new OpenID token
+    pub fn store_openid_token(&mut self, token: CachedOpenIdToken) {
+        self.cached_openid_token = Some(token);
+    }
+
+    /// Get a valid cached OpenID token, if available
+    pub fn get_valid_openid_token(&self) -> Option<&CachedOpenIdToken> {
+        self.cached_openid_token
+            .as_ref()
+            .filter(|t| t.is_valid())
+    }
+
+    /// Clean up expired tokens
+    pub fn cleanup_expired(&mut self) {
+        // Remove expired JWTs
+        self.cached_livekit_jwts.retain(|jwt| jwt.is_valid());
+        // Clear expired OpenID token
+        if let Some(ref token) = self.cached_openid_token {
+            if !token.is_valid() {
+                self.cached_openid_token = None;
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_openid_token_validity() {
+        let token = CachedOpenIdToken::new(
+            "test_token".to_string(),
+            "Bearer".to_string(),
+            "matrix.org".to_string(),
+            3600, // 1 hour
+        );
+        assert!(token.is_valid());
+        assert!(token.remaining_seconds() > 3500);
+    }
+
+    #[test]
+    fn test_jwt_expiration_extraction() {
+        // This is a test JWT with exp claim
+        // Header: {"alg":"HS256","typ":"JWT"}
+        // Payload: {"exp":9999999999,"sub":"test"}
+        // Note: This is not a real JWT, just for testing the extraction
+        let test_jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjk5OTk5OTk5OTksInN1YiI6InRlc3QifQ.signature";
+        let exp = CachedLiveKitJwt::extract_jwt_expiration(test_jwt);
+        assert_eq!(exp, Some(9999999999));
+    }
+}
diff --git a/src/voip/voip_screen.rs b/src/voip/voip_screen.rs
new file mode 100644
index 000000000..8fad8091d
--- /dev/null
+++ b/src/voip/voip_screen.rs
@@ -0,0 +1,2003 @@
+//! VoIP Screen - Voice/Video call interface
+//!
+//! This module provides a VoIP screen widget that can be used for voice/video calls.
+//! It uses the Matrix client from the room screen for authentication and signaling.
+
+use makepad_widgets::*;
+use makepad_widgets::makepad_platform::permission::{Permission, PermissionStatus};
+use matrix_sdk::Client;
+use ruma::OwnedRoomId;
+use tokio::sync::mpsc;
+
+use crate::sliding_sync::{get_client, submit_async_request, MatrixRequest};
+use super::{VoipGlobalState, VoipAction, CallMember, ActiveCallState, ParticipantInfo};
+
+use super::call_state::{Call, CallType, ConnectionState};
+use super::camera::{CameraChoice, CameraManager};
+use super::livekit_client::{LiveKitClient, LiveKitCommand, LiveKitMessage};
+use super::speaking::SpeakingDetector;
+use super::participants_list::{Participant, ParticipantsListWidgetExt};
+
+script_mod! {
+    use mod.prelude.widgets.*
+    use mod.widgets.*
+
+    // ParticipantsList widget definition
+    let ParticipantsListBase = #(super::participants_list::ParticipantsList::register_widget(vm))
+    mod.widgets.VoipParticipantsList = set_type_default() do ParticipantsListBase {
+        width: Fill
+        height: Fill
+
+        list := FlatList {
+            width: Fill
+            height: Fill
+            flow: Down
+            grab_key_focus: true
+
+            ParticipantItem := RoundedView {
+                width: Fill
+                height: 100
+                margin: Inset{bottom: 4}
+                draw_bg.color: #3a3a5a
+                draw_bg.radius: 6.0
+                flow: Overlay
+
+                // Video view (shown when video is on)
+                participant_video := WebRtcVideo {
+                    width: Fill
+                    height: Fill
+                    visible: false
+                }
+
+                // Avatar view (shown when video is off)
+                avatar_container := View {
+                    width: Fill
+                    height: Fill
+                    align: Center
+
+                    avatar := RoundedView {
+                        width: 40
+                        height: 40
+                        draw_bg.color: #a0d0a0
+                        draw_bg.radius: 20.0
+                        align: Center
+
+                        avatar_letter := Label {
+                            text: "?"
+                            draw_text.text_style.font_size: 18
+                            draw_text.color: #2a6a2a
+                        }
+                    }
+                }
+
+                // Info overlay at bottom
+                View {
+                    width: Fill
+                    height: Fill
+                    align: Align{x: 0.5 y: 1.0}
+                    padding: 6
+
+                    RoundedView {
+                        width: Fit
+                        height: Fit
+                        padding: Inset{left: 8 right: 10 top: 4 bottom: 4}
+                        draw_bg.color: #1a1a3a
+                        draw_bg.radius: 12.0
+                        flow: Right
+                        spacing: 4
+                        align: Center
+
+                        mute_icon := RobrixIconButton {
+                            width: 14
+                            height: 14
+                            padding: 0
+                            draw_icon.svg: (ICON_MICROPHONE)
+                            icon_walk: Walk{width: 12, height: 12}
+                            draw_bg +: {
+                                color: #00000000
+                                border_radius: 0.0
+                            }
+                            draw_icon +: {
+                                color: #aaa
+                            }
+                        }
+
+                        name_label := Label {
+                            text: "Participant"
+                            draw_text.text_style.font_size: 10
+                            draw_text.color: #ddd
+                        }
+
+                        status_label := Label {
+                            text: ""
+                            draw_text.text_style.font_size: 10
+                            draw_text.color: #4CAF50
+                            visible: false
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // VoIP Screen widget
+    mod.widgets.VoipScreen = #(VoipScreen::register_widget(vm)) {
+        width: Fill
+        height: Fill
+        flow: Overlay
+
+        // Main call view
+        call_view := View {
+            width: Fill
+            height: Fill
+            flow: Down
+            show_bg: true
+            draw_bg.color: #1a1a2e
+            visible: false
+
+            // Call header
+            call_header := View {
+                width: Fill
+                height: Fit
+                padding: 16
+                flow: Right
+                spacing: 8
+                align: Center
+
+                room_name := Label {
+                    text: "Call Room"
+                    draw_text.text_style.font_size: 18
+                    draw_text.color: #888
+                }
+
+                call_status := Label {
+                    text: "Not connected"
+                    draw_text.text_style.font_size: 12
+                    draw_text.color: #888
+                    margin: Inset{left: 4}
+                }
+
+                View { width: Fill height: 1 }
+
+                call_duration := Label {
+                    text: ""
+                    draw_text.text_style.font_size: 14
+                    draw_text.color: #888
+                    margin: Inset{right: 8}
+                }
+
+                participant_count := Label {
+                    text: "0 participants"
+                    draw_text.text_style.font_size: 12
+                    draw_text.color: #888
+                }
+            }
+
+            // Main content area (participants + video)
+            call_content := View {
+                width: Fill
+                height: Fill
+                flow: Right
+                spacing: 0
+
+                // Participants list on the left
+                participants_panel := View {
+                    width: 200
+                    height: Fill
+                    padding: 0
+                    show_bg: true
+                    draw_bg.color: #1e1e3a
+                    flow: Down
+                    spacing: 0
+
+                    Label {
+                        text: "Participants"
+                        draw_text.text_style.font_size: 13
+                        draw_text.color: #888
+                        margin: Inset{bottom: 4}
+                    }
+
+                    participants_list := mod.widgets.VoipParticipantsList {}
+                }
+
+                // Local video container (takes remaining space)
+                local_video_container := View {
+                    width: Fill
+                    height: Fill
+                    flow: Overlay
+
+                    // Speaking indicator border
+                    local_speaking_border := RoundedView {
+                        width: Fill
+                        height: Fill
+                        draw_bg.color: #4CAF50
+                        draw_bg.radius: 0.0
+                        visible: false
+                    }
+
+                    // Avatar placeholder (shown when camera is off)
+                    local_avatar_view := View {
+                        width: Fill
+                        height: Fill
+                        align: Center
+                        show_bg: true
+                        draw_bg.color: #2a2a4a
+
+                        RoundedView {
+                            width: 120
+                            height: 120
+                            draw_bg.color: #a0d0a0
+                            draw_bg.radius: 60.0
+                            align: Center
+
+                            local_avatar_letter := Label {
+                                text: "Y"
+                                draw_text.text_style.font_size: 48
+                                draw_text.color: #2a6a2a
+                            }
+                        }
+                    }
+
+                    // Camera video (shown when camera is on)
+                    local_video_host := View {
+                        width: Fill
+                        height: Fill
+                        visible: false
+
+                        local_camera_video := Video {
+                            width: Fill
+                            height: Fill
+                            autoplay: false
+                            show_controls: false
+                        }
+                    }
+
+                    // Name badge overlay at bottom center (always visible)
+                    View {
+                        width: Fill
+                        height: Fill
+                        align: Align{x: 0.5 y: 1.0}
+                        padding: 12
+
+                        RoundedView {
+                            width: Fit
+                            height: Fit
+                            padding: Inset{left: 10 right: 14 top: 6 bottom: 6}
+                            draw_bg.color: #1a1a3a
+                            draw_bg.radius: 14.0
+                            flow: Right
+                            spacing: 6
+                            align: Center
+
+                            local_mute_icon := RobrixIconButton {
+                                width: 16
+                                height: 16
+                                padding: 0
+                                draw_icon.svg: (ICON_MICROPHONE)
+                                icon_walk: Walk{width: 14, height: 14}
+                                draw_bg +: {
+                                    color: #00000000
+                                    border_radius: 0.0
+                                }
+                                draw_icon +: {
+                                    color: #aaa
+                                }
+                            }
+
+                            local_name_label := Label {
+                                text: "You"
+                                draw_text.text_style.font_size: 12
+                                draw_text.color: #ddd
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Call controls
+            call_controls := View {
+                width: Fill
+                height: Fit
+                padding: Inset{bottom: 20 top: 10}
+                align: Center
+
+                RoundedView {
+                    width: Fit
+                    height: Fit
+                    padding: 12
+                    draw_bg.color: #2a2a4a
+                    draw_bg.radius: 24.0
+                    flow: Right
+                    spacing: 12
+
+                    mic_button := RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: 10
+                        draw_icon.svg: (ICON_MICROPHONE)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #3a3a5a
+                            border_radius: 24.0
+                        }
+                        draw_icon +: {
+                            color: #fff
+                        }
+                    }
+
+                    camera_button := RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: 10
+                        draw_icon.svg: (ICON_VIDEO)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #3a3a5a
+                            border_radius: 24.0
+                        }
+                        draw_icon +: {
+                            color: #fff
+                        }
+                    }
+
+                    screenshare_button := RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: 10
+                        draw_icon.svg: (ICON_SQUARES)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #3a3a5a
+                            border_radius: 24.0
+                        }
+                        draw_icon +: {
+                            color: #fff
+                        }
+                    }
+
+                    participants_button := RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: 10
+                        draw_icon.svg: (ICON_ADD_USER)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #3a3a5a
+                            border_radius: 24.0
+                        }
+                        draw_icon +: {
+                            color: #fff
+                        }
+                    }
+
+                    hangup_button := RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: 10
+                        draw_icon.svg: (ICON_CLOSE)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #e53935
+                            border_radius: 24.0
+                        }
+                        draw_icon +: {
+                            color: #fff
+                        }
+                    }
+                }
+            }
+        }
+
+        // Lobby view
+        lobby_view := View {
+            width: Fill
+            height: Fill
+            flow: Down
+            visible: true
+            show_bg: true
+            draw_bg.color: #2a2a4a
+
+            // Top bar with close button
+            lobby_header := View {
+                width: Fill
+                height: Fit
+                flow: Right
+                padding: Inset{top: 12, right: 12, bottom: 0, left: 12}
+                align: Align{x: 1.0, y: 0.0}
+
+                close_button := RobrixIconButton {
+                    width: 40
+                    height: 40
+                    padding: 8
+                    draw_icon.svg: (ICON_CLOSE)
+                    icon_walk: Walk{width: 20, height: 20}
+                    draw_bg +: {
+                        color: #ffffff20
+                        border_radius: 20.0
+                    }
+                    draw_icon +: {
+                        color: #fff
+                    }
+                }
+            }
+
+            // Main content area with camera preview - use flex to fill remaining space
+            lobby_content := View {
+                width: Fill
+                height: Fill
+                flow: Overlay
+                margin: 0
+                show_bg: true
+                draw_bg.color: #2a2a4a
+
+                // Camera preview background
+                lobby_camera_container := View {
+                    width: Fill
+                    height: Fill
+                    flow: Overlay
+
+                    lobby_camera_placeholder := View {
+                        width: Fill
+                        height: Fill
+                        align: Center
+
+                        // Placeholder logo/icon
+                        RoundedView {
+                            width: 120
+                            height: 120
+                            draw_bg.color: #1a1a2e
+                            draw_bg.radius: 60.0
+                            align: Center
+
+                            Label {
+                                text: "VoIP"
+                                draw_text.text_style.font_size: 24
+                                draw_text.color: #fff
+                            }
+                        }
+                    }
+
+                    lobby_video_host := View {
+                        width: Fill
+                        height: Fill
+                        visible: false
+
+                        lobby_camera_video := Video {
+                            width: Fill
+                            height: Fill
+                            autoplay: false
+                            show_controls: false
+                        }
+                    }
+                }
+
+                // Status label at bottom
+                View {
+                    width: Fill
+                    height: Fill
+                    align: Align{x: 0.5, y: 0.85}
+
+                    lobby_status := Label {
+                        text: ""
+                        draw_text.text_style.font_size: 12
+                        draw_text.color: #aaa
+                    }
+                }
+            }
+            join_call_button_view := View {
+                width: Fill
+                height: Fit
+                align: Align{x: 0.5, y: 0.7}
+
+                join_call_button := Button {
+                    padding: Inset{left: 24, right: 24, top: 12, bottom: 12}
+                    text: "Join call"
+                    width: Fit
+                    height: Fit
+                    draw_bg +: {
+                        color: #4CAF50
+                        border_radius: 4.0
+                    }
+                    draw_text +: {
+                        color: #fff
+                        text_style.font_size: 16
+                    }
+                }
+            }
+            // Bottom control bar with icons
+            lobby_controls := View {
+                width: Fill
+                height: Fit
+                padding: Inset{top: 16 bottom: 24}
+                align: Center
+                show_bg: true
+                draw_bg.color: #fff
+
+                View {
+                    width: Fit
+                    height: Fit
+                    flow: Right
+                    spacing: 16
+                    align: Center
+
+                    lobby_mic_button := RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: Inset{top: 10, bottom: 10, left: 10, right: 10}
+                        margin: 0,
+                        draw_icon.svg: (ICON_MICROPHONE)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #fff
+                            border_radius: 0.0
+                            border_size: 1.5
+                            border_color: #ccc
+                        }
+                    }
+
+                    // Video icon button
+                    lobby_camera_button :=  RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: Inset{top: 10, bottom: 10, left: 10, right: 10}
+                        margin: 0,
+                        draw_icon.svg: (ICON_VIDEO)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #fff
+                            border_radius: 0.0
+                            border_size: 1.5
+                            border_color: #ccc
+                        }
+                    }
+
+                    // Settings icon button
+                    lobby_settings_button :=  RobrixIconButton {
+                        width: 48
+                        height: 48
+                        padding: Inset{top: 10, bottom: 10, left: 10, right: 10}
+                        margin: 0,
+                        draw_icon.svg: (ICON_SETTINGS)
+                        icon_walk: Walk{width: 24, height: 24}
+                        draw_bg +: {
+                            color: #000000
+                            border_radius: 0.0
+                            border_size: 1.5
+                            border_color: #ccc
+                        }
+                    }
+                }
+            }
+
+            // Hidden buttons for compatibility
+            video_call_button := Button { visible: false text: "Video Call" }
+            voice_call_button := Button { visible: false text: "Voice Call" }
+        }
+
+        // Debug panel
+        debug_panel := View {
+            width: 300
+            height: 200
+            margin: Inset{right: 10 bottom: 10}
+            padding: 10
+            align: Align{x: 1.0 y: 1.0}
+            show_bg: true
+            draw_bg.color: #000000
+            visible: false
+
+            message_log := Label {
+                width: Fill
+                height: Fill
+                text: ""
+                draw_text.text_style.font_size: 9
+                draw_text.color: #0f0
+            }
+        }
+    }
+}
+
+/// VoIP Screen widget for voice/video calls
+#[derive(Script, ScriptHook, Widget)]
+pub struct VoipScreen {
+    #[deref]
+    view: View,
+
+    // Call state
+    #[rust] call: Call,
+    #[rust] in_lobby: bool,
+    #[rust] lobby_mic_enabled: bool,
+    #[rust] lobby_camera_enabled: bool,
+    /// Whether the user navigated here from a call notification (to join an existing call)
+    #[rust] from_notification: bool,
+    #[rust] show_participants: bool,
+    #[rust] show_debug: bool,
+
+    // LiveKit client
+    #[rust] livekit_client: Option<LiveKitClient>,
+    #[rust] livekit_rx: Option<mpsc::UnboundedReceiver<LiveKitMessage>>,
+
+    // Call timing
+    #[rust] call_start_time: Option<f64>,
+
+    // Matrix auth (from room screen client)
+    #[rust] room_id: Option<OwnedRoomId>,
+
+    // Camera
+    #[rust] camera_permission: Option<PermissionStatus>,
+    #[rust] camera_choice: Option<CameraChoice>,
+    #[rust] camera_active: bool,
+
+    // Speaking detection
+    #[rust] speaking_detector: SpeakingDetector,
+    #[rust] speaking_check_timer: Timer,
+
+    // Video publish timer
+    #[rust] video_publish_timer: Timer,
+
+    // Flag to start call camera after lobby camera releases
+    #[rust] pending_call_camera_start: bool,
+
+    // Participant counter
+    #[rust] participant_counter: usize,
+
+    // Timer for refreshing call members from Matrix
+    #[rust] call_members_refresh_timer: Timer,
+
+    // Timer for updating call duration display
+    #[rust] call_duration_timer: Timer,
+
+    // Test mode: timer for pushing test video frames
+    #[rust] test_video_frame_timer: Timer,
+    // Test mode: participant ID to push frames to
+    #[rust] test_video_participant_id: Option<String>,
+}
+
+impl Widget for VoipScreen {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        match event {
+            Event::PermissionResult(result) => {
+                if result.permission == Permission::Camera {
+                    log!("VoipScreen: Camera permission result: {:?}", result.status);
+                    // Sync from global state (App already updated it)
+                    self.camera_permission = VoipGlobalState::get_camera_permission(cx);
+                    self.try_start_camera(cx);
+                }
+            }
+            Event::VideoInputs(ev) => {
+                log!("VoipScreen: VideoInputs event received with {} cameras", ev.descs.len());
+                // Sync from global state (App already updated it)
+                self.camera_choice = VoipGlobalState::get_camera_choice(cx);
+                if let Some(ref choice) = self.camera_choice {
+                    log!("VoipScreen: Got camera from global: {} ({}x{} {:?})",
+                        choice.name, choice.width, choice.height, choice.pixel_format);
+                }
+                self.try_start_camera(cx);
+            }
+            Event::AudioDevices(ev) => {
+                self.speaking_detector.handle_audio_devices(cx, ev);
+            }
+            Event::VideoPlaybackPrepared(ev) => {
+                log!("VideoPlaybackPrepared: {:?}", ev.video_id);
+                self.handle_video_prepared(cx);
+            }
+            Event::VideoTextureUpdated(ev) => {
+                log!("VideoTextureUpdated: {:?}", ev.video_id);
+                self.handle_video_texture_updated(cx);
+            }
+            Event::VideoPlaybackResourcesReleased(_) => {
+                self.handle_video_resources_released(cx);
+            }
+            _ => {
+                if self.speaking_check_timer.is_event(event).is_some() {
+                    self.check_speaking_state(cx);
+                }
+                if self.video_publish_timer.is_event(event).is_some() {
+                    // Video publishing handled here if needed
+                }
+                if self.call_duration_timer.is_event(event).is_some() {
+                    // Update call duration display
+                    self.update_call_duration(cx);
+                }
+                if self.call_members_refresh_timer.is_event(event).is_some() {
+                    // Refresh call members from Matrix (only when in a call)
+                    if !self.in_lobby {
+                        if let Some(room_id) = self.room_id.clone() {
+                            submit_async_request(MatrixRequest::GetCallMembers { room_id });
+                        }
+                    }
+                }
+                // Test mode: push video frames at ~30fps
+                if self.test_video_frame_timer.is_event(event).is_some() {
+                    if let Some(ref participant_id) = self.test_video_participant_id.clone() {
+                        self.push_test_video_frame(cx, participant_id);
+                    }
+                }
+            }
+        }
+
+        // Poll LiveKit messages
+        if self.poll_livekit_messages(cx) {
+            self.update_ui(cx);
+        }
+
+        // Let the view process events first (including button clicks)
+        self.view.handle_event(cx, event, scope);
+
+        // Then handle actions AFTER the view has processed them
+        if let Event::Actions(actions) = event {
+            self.handle_actions(cx, actions);
+
+            // Handle VoipActions
+            for action in actions {
+                if let Some(voip_action) = action.downcast_ref::<VoipAction>() {
+                    match voip_action {
+                        VoipAction::JoinCall => {
+                            if self.in_lobby {
+                                log!("VoipScreen: Received VoipAction::JoinCall, triggering join call");
+                                self.start_call(cx, super::call_state::CallType::Video);
+                            } else {
+                                log!("VoipScreen: VoipAction::JoinCall ignored - not in lobby");
+                            }
+                        }
+                        VoipAction::CallMemberStateSent { room_id, success } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                if *success {
+                                    log!("VoipScreen: Call member state sent successfully");
+                                    self.call.connection_state = ConnectionState::Connecting;
+                                    self.in_lobby = false;
+                                    self.call_start_time = Some(Cx::time_now());
+
+                                    // Start call duration timer (updates every second)
+                                    self.call_duration_timer = cx.start_interval(1.0);
+
+                                    // Stop lobby camera and prepare for call camera
+                                    CameraManager::stop_lobby_camera(&self.view, cx);
+                                    self.pending_call_camera_start = true;
+                                    self.camera_active = false;
+
+                                    // Fetch call members immediately after joining
+                                    submit_async_request(MatrixRequest::GetCallMembers { room_id: room_id.clone() });
+
+                                    // Start LiveKit connection flow with token caching
+                                    // Check if we have a valid cached LiveKit JWT for this room
+                                    if let Some(cached_jwt) = VoipGlobalState::get_valid_livekit_jwt(cx, room_id) {
+                                        log!("VoipScreen: Using cached LiveKit JWT ({} seconds remaining)", cached_jwt.remaining_seconds());
+                                        self.connect_livekit(cx, &cached_jwt.url, &cached_jwt.jwt);
+                                    } else if let Some(cached_openid) = VoipGlobalState::get_valid_openid_token(cx) {
+                                        // Have valid OpenID token, skip to JWT fetch
+                                        log!("VoipScreen: Using cached OpenID token ({} seconds remaining), fetching LiveKit JWT", cached_openid.remaining_seconds());
+                                        submit_async_request(MatrixRequest::FetchLiveKitJwt {
+                                            room_id: room_id.clone(),
+                                            access_token: cached_openid.access_token.clone(),
+                                            token_type: cached_openid.token_type.clone(),
+                                            matrix_server_name: cached_openid.matrix_server_name.clone(),
+                                            expires_in: cached_openid.expires_in,
+                                        });
+                                    } else {
+                                        // No cached tokens, start fresh
+                                        log!("VoipScreen: No cached tokens, fetching OpenID token for LiveKit auth");
+                                        submit_async_request(MatrixRequest::FetchOpenIdToken { room_id: room_id.clone() });
+                                    }
+                                } else {
+                                    log!("VoipScreen: Failed to send call member state");
+                                    self.call.connection_state = ConnectionState::Disconnected;
+                                }
+                                self.update_ui(cx);
+                            }
+                        }
+                        VoipAction::OpenIdTokenFetched { room_id, access_token, token_type, matrix_server_name, expires_in } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: OpenID token fetched, now fetching LiveKit JWT");
+                                log!("  server_name: {}", matrix_server_name);
+                                log!("  expires_in: {} seconds", expires_in);
+
+                                // Cache the OpenID token for future use
+                                let cached_token = super::CachedOpenIdToken::new(
+                                    access_token.clone(),
+                                    token_type.clone(),
+                                    matrix_server_name.clone(),
+                                    *expires_in,
+                                );
+                                VoipGlobalState::store_openid_token(cx, cached_token);
+
+                                // Next step: fetch LiveKit JWT from SFU
+                                // POST https://livekit-jwt.call.matrix.org/sfu/get
+                                submit_async_request(MatrixRequest::FetchLiveKitJwt {
+                                    room_id: room_id.clone(),
+                                    access_token: access_token.clone(),
+                                    token_type: token_type.clone(),
+                                    matrix_server_name: matrix_server_name.clone(),
+                                    expires_in: *expires_in,
+                                });
+                            }
+                        }
+                        VoipAction::LiveKitJwtFetched { room_id, url, jwt } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: LiveKit JWT fetched, connecting to LiveKit");
+                                log!("  url: {}", url);
+
+                                // Cache the LiveKit JWT for future use
+                                let cached_jwt = super::CachedLiveKitJwt::new(
+                                    jwt.clone(),
+                                    url.clone(),
+                                    room_id.clone(),
+                                );
+                                VoipGlobalState::store_livekit_jwt(cx, cached_jwt);
+
+                                self.connect_livekit(cx, url, jwt);
+                            }
+                        }
+                        VoipAction::LiveKitConnectionFailed { room_id, error } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: LiveKit connection failed: {}", error);
+                                self.call.connection_state = ConnectionState::Disconnected;
+                                self.update_ui(cx);
+                            }
+                        }
+                        VoipAction::CallMembersUpdated { room_id, members } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: CallMembersUpdated - {} members", members.len());
+                                self.update_participants_from_call_members(cx, members);
+                                self.update_ui(cx);
+                                self.redraw(cx);
+                            }
+                        }
+                        VoipAction::TestAddParticipant { name, is_video_on } => {
+                            log!("VoipScreen: TestAddParticipant - name={}, video={}", name, is_video_on);
+                            self.add_participant(cx, name, *is_video_on);
+                            self.update_ui(cx);
+                        }
+                        VoipAction::TestToggleParticipantVideo { id } => {
+                            log!("VoipScreen: TestToggleParticipantVideo - id={}", id);
+                            self.toggle_participant_video(cx, id);
+                            self.update_ui(cx);
+                        }
+                        VoipAction::TestRemoveParticipant { id } => {
+                            log!("VoipScreen: TestRemoveParticipant - id={}", id);
+                            self.remove_participant(cx, id);
+                            self.update_ui(cx);
+                        }
+                        VoipAction::TestClearParticipants => {
+                            log!("VoipScreen: TestClearParticipants");
+                            self.clear_participants(cx);
+                            self.update_ui(cx);
+                        }
+                        VoipAction::TestToggleParticipantsSidebar => {
+                            log!("VoipScreen: TestToggleParticipantsSidebar");
+                            self.show_participants = !self.show_participants;
+                            self.update_ui(cx);
+                        }
+                        VoipAction::TestPushVideoFrame { participant_id } => {
+                            log!("VoipScreen: TestPushVideoFrame - participant_id={}", participant_id);
+                            self.push_test_video_frame(cx, participant_id);
+                            self.update_ui(cx);
+                        }
+                        VoipAction::TestStartVideoStream { participant_id } => {
+                            log!("VoipScreen: TestStartVideoStream - participant_id={}", participant_id);
+                            self.start_test_video_stream(cx, participant_id);
+                        }
+                        VoipAction::TestStopVideoStream => {
+                            log!("VoipScreen: TestStopVideoStream");
+                            self.stop_test_video_stream(cx);
+                        }
+                        VoipAction::PipMicToggle { room_id } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: PipMicToggle from PiP");
+                                self.toggle_microphone();
+                                self.update_ui(cx);
+                            }
+                        }
+                        VoipAction::PipCameraToggle { room_id } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: PipCameraToggle from PiP");
+                                self.toggle_camera(cx);
+                                self.update_ui(cx);
+                            }
+                        }
+                        VoipAction::PipScreenShareToggle { room_id } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: PipScreenShareToggle from PiP");
+                                self.toggle_screenshare();
+                                self.update_ui(cx);
+                            }
+                        }
+                        VoipAction::PipHangup { room_id } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: PipHangup from PiP");
+                                self.hangup(cx);
+                            }
+                        }
+                        VoipAction::ShowPip { room_id } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                log!("VoipScreen: ShowPip - stopping local camera for PiP");
+                                // Stop the call camera so PiP can use it
+                                if !self.call.local_video_muted {
+                                    CameraManager::stop_call_camera(&self.view, cx);
+                                    self.camera_active = false;
+                                }
+                            }
+                        }
+                        VoipAction::HidePip => {
+                            // When PiP is hidden (user returned to VoIP tab), restart camera
+                            if !self.in_lobby && !self.call.local_video_muted {
+                                log!("VoipScreen: HidePip - attempting to restart camera");
+
+                                if let Some(choice) = self.camera_choice.clone() {
+                                    let video = self.view.video(cx, &[live_id!(local_camera_video)]);
+                                    let is_unprepared = video.is_unprepared();
+                                    let is_cleaning_up = video.is_cleaning_up();
+                                    log!("VoipScreen: local_camera_video state - unprepared={}, cleaning_up={}",
+                                        is_unprepared, is_cleaning_up);
+
+                                    if is_unprepared {
+                                        // Camera is ready to start
+                                        log!("VoipScreen: Starting camera immediately");
+                                        if CameraManager::start_call_camera(&self.view, cx, &choice) {
+                                            log!("VoipScreen: Call camera started successfully");
+                                            self.camera_active = true;
+                                        } else {
+                                            log!("VoipScreen: Failed to start camera, will retry on release event");
+                                            self.pending_call_camera_start = true;
+                                            self.camera_active = false;
+                                        }
+                                    } else if is_cleaning_up {
+                                        // Camera is still cleaning up, wait for release event
+                                        log!("VoipScreen: Camera is cleaning up, will wait for release");
+                                        self.pending_call_camera_start = true;
+                                        self.camera_active = false;
+                                    } else {
+                                        // Video is in some other state - force stop and restart
+                                        log!("VoipScreen: Camera in unexpected state, forcing stop and restart");
+                                        CameraManager::stop_call_camera(&self.view, cx);
+                                        self.pending_call_camera_start = true;
+                                        self.camera_active = false;
+                                    }
+                                }
+                            }
+                        }
+                        VoipAction::ReturnToVoipTab { room_id } => {
+                            if self.room_id.as_ref() == Some(room_id) {
+                                // When returning to VoIP tab from PiP, restart camera
+                                if !self.in_lobby && !self.call.local_video_muted {
+                                    log!("VoipScreen: ReturnToVoipTab - attempting to restart camera");
+
+                                    if let Some(choice) = self.camera_choice.clone() {
+                                        let video = self.view.video(cx, &[live_id!(local_camera_video)]);
+                                        let is_unprepared = video.is_unprepared();
+                                        let is_cleaning_up = video.is_cleaning_up();
+                                        log!("VoipScreen: local_camera_video state - unprepared={}, cleaning_up={}",
+                                            is_unprepared, is_cleaning_up);
+
+                                        if is_unprepared {
+                                            // Camera is ready to start
+                                            log!("VoipScreen: Starting camera immediately");
+                                            if CameraManager::start_call_camera(&self.view, cx, &choice) {
+                                                log!("VoipScreen: Call camera started successfully");
+                                                self.camera_active = true;
+                                            } else {
+                                                log!("VoipScreen: Failed to start camera, will retry on release event");
+                                                self.pending_call_camera_start = true;
+                                                self.camera_active = false;
+                                            }
+                                        } else if is_cleaning_up {
+                                            // Camera is still cleaning up, wait for release event
+                                            log!("VoipScreen: Camera is cleaning up, will wait for release");
+                                            self.pending_call_camera_start = true;
+                                            self.camera_active = false;
+                                        } else {
+                                            // Video is in some other state - force stop and restart
+                                            log!("VoipScreen: Camera in unexpected state, forcing stop and restart");
+                                            CameraManager::stop_call_camera(&self.view, cx);
+                                            self.pending_call_camera_start = true;
+                                            self.camera_active = false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        _ => {}
+                    }
+                }
+            }
+        }
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl VoipScreen {
+    /// Initialize the VoIP screen
+    pub fn initialize(&mut self, cx: &mut Cx, room_id: OwnedRoomId) {
+        log!("VoipScreen: Initializing for room {}", room_id);
+        self.in_lobby = true;
+        self.lobby_mic_enabled = true;
+        self.lobby_camera_enabled = true;
+        self.show_participants = true;
+        self.call = Call::default();
+        self.speaking_detector = SpeakingDetector::new();
+
+        // Initialize LiveKit client
+        let mut client = LiveKitClient::new();
+        let rx = client.start();
+        self.livekit_client = Some(client);
+        self.livekit_rx = Some(rx);
+
+        // Timer for speaking detection
+        self.speaking_check_timer = cx.start_interval(0.1);
+
+        // Timer for video frames (~30fps)
+        self.video_publish_timer = cx.start_interval(1.0 / 30.0);
+
+        // Timer for refreshing call members (every 5 seconds)
+        self.call_members_refresh_timer = cx.start_interval(5.0);
+
+        // Read camera permission and choice from global state (captured at app startup)
+        self.camera_permission = VoipGlobalState::get_camera_permission(cx);
+        self.camera_choice = VoipGlobalState::get_camera_choice(cx);
+
+        // Try to start camera if we already have permission and camera choice
+        self.try_start_camera(cx);
+
+        // Set default room
+        self.set_room(cx, room_id.clone());
+
+        // Fetch initial call members
+        submit_async_request(MatrixRequest::GetCallMembers { room_id });
+
+        self.update_ui(cx);
+    }
+
+    /// Set the room for this VoIP call (uses Matrix client from room screen)
+    /// When called from a call notification, this shows the "Join Call" button.
+    pub fn set_room(&mut self, cx: &mut Cx, room_id: OwnedRoomId) {
+        self.room_id = Some(room_id.clone());
+        self.from_notification = true;  // Show "Join Call" button
+
+        // Get room name and user display name from client
+        if let Some(client) = get_client() {
+            if let Some(room) = client.get_room(&room_id) {
+                let room_name = room.name().unwrap_or_else(|| room_id.to_string());
+                self.view.label(cx, ids!(room_name)).set_text(cx, &room_name);
+            }
+
+            // Set local user's display name
+            if let Some(session) = client.session_meta() {
+                let user_id = session.user_id.to_string();
+                // Extract display name from user_id (remove @ prefix and domain)
+                let display_name = user_id
+                    .strip_prefix('@')
+                    .and_then(|s| s.split(':').next())
+                    .unwrap_or(&user_id);
+                // Set name on local user badge
+                self.view.label(cx, ids!(local_name_label)).set_text(cx, display_name);
+
+                // Also set avatar letter
+                let letter = display_name.chars().next().unwrap_or('?').to_uppercase().to_string();
+                self.view.label(cx, ids!(local_avatar_letter)).set_text(cx, &letter);
+            }
+        }
+
+        self.update_ui(cx);
+    }
+
+    /// Get the Matrix client from the sliding_sync module
+    #[allow(dead_code)]
+    fn get_matrix_client(&self) -> Option<Client> {
+        get_client()
+    }
+
+    /// Start a call of the given type
+    fn start_call(&mut self, cx: &mut Cx, call_type: CallType) {
+        self.call.call_type = call_type;
+        self.call.local_audio_muted = !self.lobby_mic_enabled;
+        self.call.local_video_muted = !self.lobby_camera_enabled;
+        self.call.connection_state = ConnectionState::Connecting;
+
+        log!("Starting {:?} call...", call_type);
+
+        // Send call member state event via Matrix (MSC3401)
+        if let Some(room_id) = self.room_id.clone() {
+            log!("Submitting SendCallMemberState request for room {}", room_id);
+            submit_async_request(MatrixRequest::SendCallMemberState {
+                room_id,
+                call_type,
+            });
+        } else {
+            log!("Error: No room_id set, cannot start call");
+            self.call.connection_state = ConnectionState::Disconnected;
+        }
+
+        self.update_ui(cx);
+    }
+
+    /// Poll for LiveKit messages
+    fn poll_livekit_messages(&mut self, cx: &mut Cx) -> bool {
+        let messages: Vec<LiveKitMessage> = if let Some(rx) = &mut self.livekit_rx {
+            let mut msgs = Vec::new();
+            while let Ok(msg) = rx.try_recv() {
+                msgs.push(msg);
+            }
+            msgs
+        } else {
+            Vec::new()
+        };
+
+        let mut needs_update = false;
+        for msg in messages {
+            match msg {
+                LiveKitMessage::Connected => {
+                    self.call.connection_state = ConnectionState::Connected;
+                    self.in_lobby = false;
+                    self.call_start_time = Some(Cx::time_now());
+                    // Start call duration timer (updates every second)
+                    self.call_duration_timer = cx.start_interval(1.0);
+                    log!("LiveKit connected");
+                    needs_update = true;
+                }
+                LiveKitMessage::Disconnected => {
+                    self.call.connection_state = ConnectionState::Disconnected;
+                    log!("LiveKit disconnected");
+                    needs_update = true;
+                }
+                LiveKitMessage::ParticipantJoined(p) => {
+                    log!("Participant joined: {}", p.user_id);
+
+                    // Add to participants list UI
+                    let name = if p.display_name.is_empty() {
+                        p.user_id.clone()
+                    } else {
+                        p.display_name.clone()
+                    };
+                    let letter = name.chars().next().unwrap_or('?').to_uppercase().to_string();
+
+                    let participant = Participant {
+                        id: p.user_id.clone(),
+                        name,
+                        avatar_letter: letter,
+                        is_muted: p.is_muted,
+                        is_speaking: p.is_speaking,
+                        is_video_on: p.is_video_on,
+                    };
+
+                    let list = self.view.participants_list(cx, ids!(participants_list));
+                    list.add_participant(cx, participant);
+
+                    self.call.participants.insert(p.user_id.clone(), p);
+                    needs_update = true;
+                }
+                LiveKitMessage::ParticipantLeft(id) => {
+                    log!("Participant left: {}", id);
+
+                    // Remove from participants list UI
+                    let list = self.view.participants_list(cx, ids!(participants_list));
+                    list.remove_participant(cx, &id);
+
+                    self.call.participants.remove(&id);
+                    needs_update = true;
+                }
+                LiveKitMessage::Error(e) => {
+                    log!("LiveKit error: {}", e);
+                    self.call.connection_state = ConnectionState::Disconnected;
+                    needs_update = true;
+                }
+                LiveKitMessage::VideoTrackSubscribed { participant_id } => {
+                    log!("Video track subscribed for participant: {}", participant_id);
+
+                    // Update participant's video state
+                    let list = self.view.participants_list(cx, ids!(participants_list));
+                    list.update_participant(cx, &participant_id, |p| {
+                        p.is_video_on = true;
+                    });
+
+                    if let Some(p) = self.call.participants.get_mut(&participant_id) {
+                        p.is_video_on = true;
+                    }
+                    needs_update = true;
+                }
+                LiveKitMessage::VideoTrackUnsubscribed { participant_id } => {
+                    log!("Video track unsubscribed for participant: {}", participant_id);
+
+                    // Update participant's video state
+                    let list = self.view.participants_list(cx, ids!(participants_list));
+                    list.update_participant(cx, &participant_id, |p| {
+                        p.is_video_on = false;
+                    });
+
+                    if let Some(p) = self.call.participants.get_mut(&participant_id) {
+                        p.is_video_on = false;
+                    }
+                    needs_update = true;
+                }
+                LiveKitMessage::RemoteVideoFrame { participant_id, y, u, v, width, height, pts_ms } => {
+                    // Push the I420 frame to the participant's video session
+                    // Only log periodically to avoid spam
+                    if pts_ms % 1000 < 33 {
+                        log!("Remote video frame from {}: {}x{} pts={}ms", participant_id, width, height, pts_ms);
+                    }
+
+                    // Get the participants list and push the frame
+                    let participants_list = self.view.participants_list(cx, ids!(participants_list));
+                    participants_list.push_video_frame(
+                        cx,
+                        &participant_id,
+                        y,
+                        u,
+                        v,
+                        width,
+                        height,
+                        pts_ms,
+                    );
+                    needs_update = true;
+                }
+            }
+        }
+
+        needs_update
+    }
+
+    /// Toggle microphone
+    fn toggle_microphone(&mut self) {
+        self.call.local_audio_muted = !self.call.local_audio_muted;
+        if let Some(client) = &self.livekit_client {
+            client.set_microphone_muted(self.call.local_audio_muted);
+        }
+        log!("Microphone {}", if self.call.local_audio_muted { "muted" } else { "unmuted" });
+    }
+
+    /// Toggle camera
+    fn toggle_camera(&mut self, cx: &mut Cx) {
+        self.call.local_video_muted = !self.call.local_video_muted;
+        if let Some(client) = &self.livekit_client {
+            client.set_camera_muted(self.call.local_video_muted);
+        }
+
+        if self.call.local_video_muted {
+            // Camera off - stop the call camera
+            log!("Camera off - stopping call camera");
+            CameraManager::stop_call_camera(&self.view, cx);
+            self.camera_active = false;
+        } else {
+            // Camera on - start the call camera
+            log!("Camera on - starting call camera");
+            if let Some(choice) = self.camera_choice.clone() {
+                if CameraManager::start_call_camera(&self.view, cx, &choice) {
+                    self.camera_active = true;
+                }
+            }
+        }
+    }
+
+    /// Toggle screen sharing
+    fn toggle_screenshare(&mut self) {
+        self.call.is_screen_sharing = !self.call.is_screen_sharing;
+        if let Some(client) = &self.livekit_client {
+            if self.call.is_screen_sharing {
+                client.send_command(LiveKitCommand::StartScreenShare);
+            } else {
+                client.send_command(LiveKitCommand::StopScreenShare);
+            }
+        }
+        log!("Screen sharing {}", if self.call.is_screen_sharing { "started" } else { "stopped" });
+    }
+
+    /// Hangup the call
+    fn hangup(&mut self, cx: &mut Cx) {
+        self.call.connection_state = ConnectionState::Disconnecting;
+        if let Some(client) = &self.livekit_client {
+            client.disconnect();
+        }
+        CameraManager::stop_call_camera(&self.view, cx);
+        self.camera_active = false;
+
+        log!("Ending call...");
+
+        // Send end call state event via Matrix (MSC3401)
+        if let Some(room_id) = self.room_id.clone() {
+            log!("Submitting SendEndCallState request for room {}", room_id);
+            submit_async_request(MatrixRequest::SendEndCallState { room_id });
+        }
+
+        // Reset state
+        self.call.connection_state = ConnectionState::Disconnected;
+        self.in_lobby = true;
+        self.call_start_time = None;
+        // Stop call duration timer
+        self.call_duration_timer = Timer::default();
+        CameraManager::stop_lobby_camera(&self.view, cx);
+        self.pending_call_camera_start = true;
+        self.camera_active = false;
+
+        // Clear global state for PiP
+        VoipGlobalState::clear_active_call(cx);
+
+        self.update_ui(cx);
+    }
+
+    /// Update call duration display
+    fn update_call_duration(&mut self, cx: &mut Cx) {
+        if let Some(start) = self.call_start_time {
+            let elapsed = (Cx::time_now() - start) as u64;
+            let mins = elapsed / 60;
+            let secs = elapsed % 60;
+            self.view.label(cx, ids!(call_duration))
+                .set_text(cx, &format!("{:02}:{:02}", mins, secs));
+            self.redraw(cx);
+        }
+    }
+
+    /// Update UI to reflect current state
+    fn update_ui(&mut self, cx: &mut Cx) {
+        self.view.view(cx, ids!(lobby_view)).set_visible(cx, self.in_lobby);
+        self.view.view(cx, ids!(call_view)).set_visible(cx, !self.in_lobby);
+
+        let status = match self.call.connection_state {
+            ConnectionState::Disconnected => "Not connected",
+            ConnectionState::Connecting => "Connecting...",
+            ConnectionState::Connected => "Connected",
+            ConnectionState::Disconnecting => "Disconnecting...",
+        };
+        self.view.label(cx, ids!(call_status)).set_text(cx, status);
+
+        let count = self.call.participants.len() + 1;
+        self.view.label(cx, ids!(participant_count))
+            .set_text(cx, &format!("{} participant{}", count, if count == 1 { "" } else { "s" }));
+
+        // Update call control icon button styles based on state
+        let mut mic_btn = self.view.button(cx, ids!(mic_button));
+        let mut cam_btn = self.view.button(cx, ids!(camera_button));
+        let mut screen_btn = self.view.button(cx, ids!(screenshare_button));
+        let mut users_btn = self.view.button(cx, ids!(participants_button));
+
+        // Mic button - red when muted
+        if self.call.local_audio_muted {
+            script_apply_eval!(cx, mic_btn, {
+                draw_bg +: { color: #e53935 }
+            });
+        } else {
+            script_apply_eval!(cx, mic_btn, {
+                draw_bg +: { color: #3a3a5a }
+            });
+        }
+
+        // Camera button - red when off
+        if self.call.local_video_muted {
+            script_apply_eval!(cx, cam_btn, {
+                draw_bg +: { color: #e53935 }
+            });
+        } else {
+            script_apply_eval!(cx, cam_btn, {
+                draw_bg +: { color: #3a3a5a }
+            });
+        }
+
+        // Screen share button - green when sharing
+        if self.call.is_screen_sharing {
+            script_apply_eval!(cx, screen_btn, {
+                draw_bg +: { color: #4CAF50 }
+            });
+        } else {
+            script_apply_eval!(cx, screen_btn, {
+                draw_bg +: { color: #3a3a5a }
+            });
+        }
+
+        // Participants button - highlighted when panel is visible
+        if self.show_participants {
+            script_apply_eval!(cx, users_btn, {
+                draw_bg +: { color: #4a4a6a }
+            });
+        } else {
+            script_apply_eval!(cx, users_btn, {
+                draw_bg +: { color: #3a3a5a }
+            });
+        }
+
+        // Update local mute icon - red when muted, gray when unmuted
+        let mut local_mute_btn = self.view.button(cx, ids!(local_mute_icon));
+        if self.call.local_audio_muted {
+            script_apply_eval!(cx, local_mute_btn, {
+                draw_icon +: { color: #e53935 }
+            });
+        } else {
+            script_apply_eval!(cx, local_mute_btn, {
+                draw_icon +: { color: #aaa }
+            });
+        }
+
+        // Toggle participants panel visibility
+        self.view.view(cx, ids!(participants_panel)).set_visible(cx, self.show_participants);
+        self.view.view(cx, ids!(debug_panel)).set_visible(cx, self.show_debug);
+
+        // Update call duration display (timer handles continuous updates)
+        self.update_call_duration(cx);
+
+        // Update lobby icon button styles based on state
+        // When disabled, show different border color
+        if self.in_lobby {
+            let mut mic_btn = self.view.button(cx, ids!(lobby_mic_button));
+            let mut cam_btn = self.view.button(cx, ids!(lobby_camera_button));
+
+            if self.lobby_mic_enabled {
+                script_apply_eval!(cx, mic_btn, {
+                    draw_bg +: { border_color: #ccc }
+                    draw_icon +: { color: #333 }
+                });
+            } else {
+                script_apply_eval!(cx, mic_btn, {
+                    draw_bg +: { border_color: #f00 }
+                    draw_icon +: { color: #f00 }
+                });
+            }
+
+            if self.lobby_camera_enabled {
+                script_apply_eval!(cx, cam_btn, {
+                    draw_bg +: { border_color: #ccc }
+                    draw_icon +: { color: #333 }
+                });
+            } else {
+                script_apply_eval!(cx, cam_btn, {
+                    draw_bg +: { border_color: #f00 }
+                    draw_icon +: { color: #f00 }
+                });
+            }
+        }
+
+        // Show "Join Call" button always in lobby (it's the main action button now)
+        self.view.view(cx, ids!(join_call_button_view)).set_visible(cx, self.in_lobby);
+        self.view.button(cx, ids!(join_call_button)).set_visible(cx, self.in_lobby);
+
+        // Force redraw to ensure all visibility changes take effect
+        self.view.redraw(cx);
+
+        // Sync state to global for PiP display
+        self.sync_to_global_state(cx);
+    }
+
+    /// Sync current call state to global state for PiP overlay access
+    fn sync_to_global_state(&mut self, cx: &mut Cx) {
+        // Only sync if we have a room and are in a call (not lobby)
+        if self.in_lobby {
+            // Clear global state when in lobby
+            VoipGlobalState::clear_active_call(cx);
+            return;
+        }
+
+        let status_text = match self.call.connection_state {
+            ConnectionState::Disconnected => "Not connected".to_string(),
+            ConnectionState::Connecting => "Connecting...".to_string(),
+            ConnectionState::Connected => "In call".to_string(),
+            ConnectionState::Disconnecting => "Disconnecting...".to_string(),
+        };
+
+        // Get local participant info
+        let local_participant = if let Some(client) = get_client() {
+            if let Some(session) = client.session_meta() {
+                let user_id = session.user_id.to_string();
+                let display_name = user_id
+                    .strip_prefix('@')
+                    .and_then(|s| s.split(':').next())
+                    .unwrap_or(&user_id)
+                    .to_string();
+                let avatar_letter = display_name.chars().next()
+                    .unwrap_or('?')
+                    .to_uppercase()
+                    .to_string();
+                ParticipantInfo {
+                    user_id,
+                    display_name,
+                    avatar_letter,
+                }
+            } else {
+                ParticipantInfo::default()
+            }
+        } else {
+            ParticipantInfo::default()
+        };
+
+        let active_call = ActiveCallState {
+            room_id: self.room_id.clone(),
+            status_text,
+            in_call: !self.in_lobby && self.call.connection_state != ConnectionState::Disconnected,
+            mic_muted: self.call.local_audio_muted,
+            camera_muted: self.call.local_video_muted,
+            screen_sharing: self.call.is_screen_sharing,
+            local_participant,
+            participant_count: self.call.participants.len() + 1,
+        };
+
+        VoipGlobalState::update_active_call(cx, active_call);
+    }
+
+    /// Try to start camera
+    fn try_start_camera(&mut self, cx: &mut Cx) {
+        if !matches!(self.camera_permission, Some(PermissionStatus::Granted)) {
+            self.view.label(cx, ids!(lobby_status)).set_text(cx, "Waiting for camera permission...");
+            return;
+        }
+
+        let Some(choice) = self.camera_choice.clone() else {
+            self.view.label(cx, ids!(lobby_status)).set_text(cx, "Waiting for camera device...");
+            return;
+        };
+
+        if self.in_lobby {
+            log!("Starting lobby camera: {}", choice.name);
+            self.view.label(cx, ids!(lobby_status))
+                .set_text(cx, &format!("Camera: {} ({}x{})", choice.name, choice.width, choice.height));
+            if CameraManager::start_lobby_camera(&self.view, cx, &choice) {
+                log!("Lobby camera started successfully");
+                self.camera_active = true;
+            } else {
+                log!("Failed to start lobby camera (already running?)");
+            }
+        } else if CameraManager::start_call_camera(&self.view, cx, &choice) {
+            log!("Call camera started successfully");
+            self.camera_active = true;
+        }
+    }
+
+    /// Check speaking state
+    fn check_speaking_state(&mut self, cx: &mut Cx) {
+        if self.in_lobby {
+            if self.speaking_detector.is_speaking {
+                self.speaking_detector.is_speaking = false;
+                SpeakingDetector::update_indicator(&self.view, cx, false);
+            }
+            return;
+        }
+
+        if self.speaking_detector.check_speaking(self.call.local_audio_muted) {
+            SpeakingDetector::update_indicator(&self.view, cx, self.speaking_detector.is_speaking);
+        }
+    }
+
+    /// Handle camera permission result
+    pub fn handle_camera_permission(&mut self, cx: &mut Cx, status: PermissionStatus) {
+        self.camera_permission = Some(status);
+        match status {
+            PermissionStatus::Granted => {
+                log!("Camera permission granted");
+                self.try_start_camera(cx);
+            }
+            PermissionStatus::DeniedPermanent => {
+                log!("Camera permission denied permanently");
+                self.view.label(cx, ids!(lobby_status)).set_text(cx, "Camera permission denied");
+            }
+            _ => {
+                log!("Camera permission: {:?}", status);
+            }
+        }
+    }
+
+    /// Handle video playback prepared
+    fn handle_video_prepared(&mut self, cx: &mut Cx) {
+        if self.camera_active {
+            if self.in_lobby {
+                CameraManager::show_lobby_video(&self.view, cx);
+                self.view.view(cx, ids!(join_call_button_view)).set_visible(cx, true);
+            } else {
+                CameraManager::show_call_video(&self.view, cx);
+            }
+        }
+    }
+
+    /// Handle video texture updated
+    fn handle_video_texture_updated(&mut self, cx: &mut Cx) {
+        if self.camera_active {
+            if self.in_lobby {
+                CameraManager::show_lobby_video(&self.view, cx);
+            } else {
+                CameraManager::show_call_video(&self.view, cx);
+            }
+        }
+    }
+
+    /// Handle video resources released (camera handoff from lobby/PiP to call)
+    fn handle_video_resources_released(&mut self, cx: &mut Cx) {
+        if self.pending_call_camera_start {
+            log!("VoipScreen: Camera resources released, attempting to start call camera...");
+            self.pending_call_camera_start = false;
+            if let Some(choice) = self.camera_choice.clone() {
+                let video = self.view.video(cx, &[live_id!(local_camera_video)]);
+                let is_unprepared = video.is_unprepared();
+                let is_cleaning_up = video.is_cleaning_up();
+                log!("VoipScreen: local_camera_video state - unprepared={}, cleaning_up={}",
+                    is_unprepared, is_cleaning_up);
+
+                if is_unprepared {
+                    // Camera is ready to start
+                    if CameraManager::start_call_camera(&self.view, cx, &choice) {
+                        log!("VoipScreen: Call camera started successfully");
+                        self.camera_active = true;
+                    } else {
+                        log!("VoipScreen: Failed to start camera even though unprepared");
+                        self.pending_call_camera_start = true;
+                    }
+                } else if is_cleaning_up {
+                    // Still cleaning up, wait for next release event
+                    log!("VoipScreen: Camera still cleaning up, will retry on next release");
+                    self.pending_call_camera_start = true;
+                } else {
+                    // Unexpected state - force stop and retry
+                    log!("VoipScreen: Camera in unexpected state, forcing stop");
+                    CameraManager::stop_call_camera(&self.view, cx);
+                    self.pending_call_camera_start = true;
+                }
+            }
+        } else {
+            log!("VoipScreen: Video resources released (no pending start)");
+        }
+    }
+
+    /// Handle UI actions
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        
+        // Lobby buttons
+        // Close button - exit VoIP screen
+        if self.view.button(cx, ids!(close_button)).clicked(actions) {
+            log!("Close button clicked, exiting VoIP screen");
+            if let Some(room_id) = self.room_id.clone() {
+                log!("Emitting VoipAction::Close for room {}", room_id);
+                
+                self.hangup(cx);
+                cx.action(VoipAction::Close(room_id));
+            }
+        }
+        // Join Call button - main action to start the call
+        if self.view.button(cx, ids!(join_call_button)).clicked(actions) {
+            log!("Join call button clicked for room: {:?}", self.room_id);
+            self.from_notification = false;
+            self.start_call(cx, CallType::Video);
+        }
+        // Microphone toggle (icon button)
+        if self.view.button(cx, ids!(lobby_mic_button)).clicked(actions) {
+            self.lobby_mic_enabled = !self.lobby_mic_enabled;
+            log!("Lobby mic toggled: {}", self.lobby_mic_enabled);
+            self.update_ui(cx);
+        }
+        // Camera toggle (icon button)
+        if self.view.button(cx, ids!(lobby_camera_button)).clicked(actions) {
+            self.lobby_camera_enabled = !self.lobby_camera_enabled;
+            log!("Lobby camera toggled: {}", self.lobby_camera_enabled);
+            self.update_ui(cx);
+        }
+        // Settings button (icon button)
+        if self.view.button(cx, ids!(lobby_settings_button)).clicked(actions) {
+            log!("Settings button clicked");
+            // Toggle debug panel for now
+            self.show_debug = !self.show_debug;
+            self.update_ui(cx);
+        }
+        // Legacy buttons (hidden, for compatibility)
+        if self.view.button(cx, ids!(video_call_button)).clicked(actions) {
+            self.start_call(cx, CallType::Video);
+        }
+        if self.view.button(cx, ids!(voice_call_button)).clicked(actions) {
+            self.start_call(cx, CallType::Voice);
+        }
+
+        // Call controls
+        if self.view.button(cx, ids!(mic_button)).clicked(actions) {
+            self.toggle_microphone();
+            self.update_ui(cx);
+        }
+        if self.view.button(cx, ids!(camera_button)).clicked(actions) {
+            self.toggle_camera(cx);
+            self.update_ui(cx);
+        }
+        if self.view.button(cx, ids!(screenshare_button)).clicked(actions) {
+            self.toggle_screenshare();
+            self.update_ui(cx);
+        }
+        if self.view.button(cx, ids!(participants_button)).clicked(actions) {
+            self.show_participants = !self.show_participants;
+            self.update_ui(cx);
+        }
+        if self.view.button(cx, ids!(hangup_button)).clicked(actions) {
+            self.hangup(cx);
+            self.update_ui(cx);
+        }
+    }
+
+    /// Add a test participant (with optional video on)
+    /// Returns the participant ID for use with push_test_video_frame
+    pub fn add_participant(&mut self, cx: &mut Cx, name: &str, is_video_on: bool) -> String {
+        self.participant_counter += 1;
+        let letter = name.chars().next().unwrap_or('?').to_uppercase().to_string();
+        // Use a predictable ID format: "test_<name>" for easy testing
+        let participant_id = format!("test_{}", name.to_lowercase().replace(' ', "_"));
+        let participant = Participant {
+            id: participant_id.clone(),
+            name: name.to_string(),
+            avatar_letter: letter,
+            is_muted: false,
+            is_speaking: false,
+            is_video_on,
+        };
+        log!("Adding participant: {} (id={}, video={})", name, participant_id, is_video_on);
+
+        let list = self.view.participants_list(cx, ids!(participants_list));
+        list.add_participant(cx, participant);
+        participant_id
+    }
+
+    /// Toggle participant video state
+    pub fn toggle_participant_video(&mut self, cx: &mut Cx, id: &str) {
+        log!("Toggling video for participant id={}", id);
+        let list = self.view.participants_list(cx, ids!(participants_list));
+        list.update_participant(cx, id, |p| {
+            p.is_video_on = !p.is_video_on;
+            log!("Participant {} video is now {}", p.name, if p.is_video_on { "on" } else { "off" });
+        });
+    }
+
+    /// Remove a participant
+    pub fn remove_participant(&mut self, cx: &mut Cx, id: &str) {
+        log!("Removing participant with id={}", id);
+        let list = self.view.participants_list(cx, ids!(participants_list));
+        list.remove_participant(cx, id);
+    }
+
+    /// Clear all participants and their video textures
+    pub fn clear_participants(&mut self, cx: &mut Cx) {
+        log!("Clearing all participants");
+        let list = self.view.participants_list(cx, ids!(participants_list));
+        list.clear_all(cx);  // Use clear_all to also remove video textures
+        self.participant_counter = 0;
+    }
+
+    /// Start continuous test video frames to a participant (~30fps)
+    pub fn start_test_video_stream(&mut self, cx: &mut Cx, participant_id: &str) {
+        log!("Starting test video stream for participant: {}", participant_id);
+        self.test_video_participant_id = Some(participant_id.to_string());
+        self.test_video_frame_timer = cx.start_interval(1.0 / 30.0);  // ~30fps
+
+        // Also ensure the participant has video enabled
+        let list = self.view.participants_list(cx, ids!(participants_list));
+        list.update_participant(cx, participant_id, |p| {
+            p.is_video_on = true;
+        });
+    }
+
+    /// Stop continuous test video frames
+    pub fn stop_test_video_stream(&mut self, cx: &mut Cx) {
+        log!("Stopping test video stream");
+        self.test_video_frame_timer = Timer::default();  // Stop the timer
+        self.test_video_participant_id = None;
+        self.redraw(cx);
+    }
+
+    /// Push a test video frame to a participant for debugging
+    /// Generates a colored gradient pattern in I420 format
+    pub fn push_test_video_frame(&mut self, cx: &mut Cx, participant_id: &str) {
+        let width: u32 = 320;
+        let height: u32 = 240;
+
+        // Generate I420 test pattern (colored gradient)
+        let y_size = (width * height) as usize;
+        let uv_size = ((width / 2) * (height / 2)) as usize;
+
+        let mut y_plane = vec![0u8; y_size];
+        let mut u_plane = vec![128u8; uv_size];  // Neutral U
+        let mut v_plane = vec![128u8; uv_size];  // Neutral V
+
+        // Create a gradient pattern - Y varies horizontally, U/V create color
+        // Use time-based offset to animate the pattern
+        let time_offset = (Cx::time_now() * 100.0) as u32 % 256;
+
+        for j in 0..height {
+            for i in 0..width {
+                let y_idx = (j * width + i) as usize;
+                // Luminance gradient (bright in center, dark at edges)
+                let cx_dist = ((i as i32 - width as i32 / 2).abs() as f32) / (width as f32 / 2.0);
+                let cy_dist = ((j as i32 - height as i32 / 2).abs() as f32) / (height as f32 / 2.0);
+                let dist = (cx_dist * cx_dist + cy_dist * cy_dist).sqrt().min(1.0);
+                let luma = ((1.0 - dist * 0.5) * 200.0 + time_offset as f32) as u8;
+                y_plane[y_idx] = luma.wrapping_add(((i + j) % 32) as u8);
+            }
+        }
+
+        // Create color pattern in UV planes (blue-ish tint that shifts over time)
+        for j in 0..(height / 2) {
+            for i in 0..(width / 2) {
+                let uv_idx = (j * (width / 2) + i) as usize;
+                // U controls blue-yellow, V controls red-cyan
+                u_plane[uv_idx] = (128u8).wrapping_add((time_offset / 2) as u8).wrapping_add((i * 2) as u8);
+                v_plane[uv_idx] = (128u8).wrapping_sub((time_offset / 3) as u8).wrapping_add((j * 2) as u8);
+            }
+        }
+
+        let pts_ms = (Cx::time_now() * 1000.0) as u64;
+
+        log!("Pushing test video frame to participant {}: {}x{} pts={}ms",
+            participant_id, width, height, pts_ms);
+
+        let list = self.view.participants_list(cx, ids!(participants_list));
+        list.push_video_frame(
+            cx,
+            participant_id,
+            y_plane,
+            u_plane,
+            v_plane,
+            width,
+            height,
+            pts_ms,
+        );
+    }
+
+    /// Update participants list from Matrix call member state events
+    fn update_participants_from_call_members(&mut self, cx: &mut Cx, members: &[CallMember]) {
+        log!("update_participants_from_call_members: received {} members", members.len());
+
+        // Get the participants list reference
+        let list = self.view.participants_list(cx, ids!(participants_list));
+
+        // Clear existing participants but preserve video textures
+        // Video textures are keyed by participant ID (user_id) and will be matched
+        // when participants are re-added with the same IDs
+        list.clear(cx);
+        self.participant_counter = 0;
+
+        // Get current user to exclude self from participants list
+        let current_user_id = get_client()
+            .and_then(|c| c.session_meta().map(|m| m.user_id.to_string()));
+        log!("Current user ID: {:?}", current_user_id);
+
+        // Track added user_ids to avoid duplicates (multiple devices same user)
+        let mut added_user_ids = std::collections::HashSet::new();
+
+        for member in members {
+            // Skip self
+            if current_user_id.as_ref() == Some(&member.user_id) {
+                continue;
+            }
+
+            // Skip if we already added this user (multiple devices)
+            if added_user_ids.contains(&member.user_id) {
+                log!("Skipping duplicate user: {} (device={})", member.user_id, member.device_id);
+                continue;
+            }
+            added_user_ids.insert(member.user_id.clone());
+
+            self.participant_counter += 1;
+            let name = member.display_name.clone()
+                .unwrap_or_else(|| member.user_id.clone());
+            let letter = name.chars().next().unwrap_or('?').to_uppercase().to_string();
+
+            // Use just user_id as the participant ID to match LiveKit identity format
+            // LiveKit identity is set from the JWT which uses the Matrix user_id
+            let participant_id = member.user_id.clone();
+
+            // Check if this participant already has video texture (from LiveKit video frames)
+            let has_video = list.has_video_texture(&participant_id);
+
+            let participant = Participant {
+                id: participant_id.clone(),
+                name,
+                avatar_letter: letter,
+                is_muted: false,  // We don't have this info from state events
+                is_speaking: false,
+                is_video_on: has_video,  // Preserve video state from LiveKit
+            };
+
+            log!("Adding call member: {} (id={}, video={})",
+                participant.name, participant_id, has_video);
+            list.add_participant(cx, participant);
+        }
+
+        // Update participant count display
+        let count = self.participant_counter;
+        self.view.label(cx, ids!(participant_count))
+            .set_text(cx, &format!("{} participant{}", count, if count == 1 { "" } else { "s" }));
+
+        log!("Updated participants panel with {} other participants", self.participant_counter);
+    }
+
+    /// Connect to LiveKit with the given URL and JWT token
+    fn connect_livekit(&mut self, cx: &mut Cx, url: &str, jwt: &str) {
+        log!("connect_livekit: url={}", url);
+        log!("connect_livekit: jwt length={}, empty={}", jwt.len(), jwt.is_empty());
+        if jwt.len() > 20 {
+            log!("connect_livekit: jwt starts with: {}", &jwt[..20]);
+        }
+
+        if jwt.is_empty() {
+            log!("ERROR: JWT token is empty, cannot connect to LiveKit");
+            self.call.connection_state = ConnectionState::Disconnected;
+            self.update_ui(cx);
+            return;
+        }
+
+        if let Some(client) = &self.livekit_client {
+            // Connect to LiveKit
+            client.connect(url.to_string(), jwt.to_string());
+
+            // Update connection state
+            self.call.connection_state = ConnectionState::Connected;
+            log!("LiveKit connection initiated");
+        } else {
+            log!("Error: LiveKit client not initialized");
+            self.call.connection_state = ConnectionState::Disconnected;
+        }
+
+        self.update_ui(cx);
+    }
+}
+
+impl VoipScreenRef {
+    /// Initialize the VoIP screen
+    pub fn initialize(&self, cx: &mut Cx, room_id: OwnedRoomId) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.initialize(cx, room_id);
+        }
+    }
+
+    /// Set the room for this VoIP call
+    pub fn set_room(&self, cx: &mut Cx, room_id: OwnedRoomId) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_room(cx, room_id);
+        }
+    }
+
+    /// Handle camera permission
+    pub fn handle_camera_permission(&self, cx: &mut Cx, status: PermissionStatus) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.handle_camera_permission(cx, status);
+        }
+    }
+
+    /// Add a participant, returns the participant ID
+    pub fn add_participant(&self, cx: &mut Cx, name: &str, is_video_on: bool) -> Option<String> {
+        self.borrow_mut().map(|mut inner| inner.add_participant(cx, name, is_video_on))
+    }
+
+    /// Toggle participant video state
+    pub fn toggle_participant_video(&self, cx: &mut Cx, id: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.toggle_participant_video(cx, id);
+        }
+    }
+
+    /// Remove a participant
+    pub fn remove_participant(&self, cx: &mut Cx, id: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.remove_participant(cx, id);
+        }
+    }
+
+    /// Clear all participants
+    pub fn clear_participants(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.clear_participants(cx);
+        }
+    }
+
+    pub fn hangup(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.hangup(cx);
+        }
+    }
+
+    /// Push a test video frame to a participant for debugging
+    pub fn push_test_video_frame(&self, cx: &mut Cx, participant_id: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.push_test_video_frame(cx, participant_id);
+        }
+    }
+
+    /// Start continuous test video frames to a participant
+    pub fn start_test_video_stream(&self, cx: &mut Cx, participant_id: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.start_test_video_stream(cx, participant_id);
+        }
+    }
+
+    /// Stop continuous test video frames
+    pub fn stop_test_video_stream(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.stop_test_video_stream(cx);
+        }
+    }
+}