diff --git a/.changeset/upset-rats-work.md b/.changeset/upset-rats-work.md
new file mode 100644
index 0000000000000..d84f7439c76be
--- /dev/null
+++ b/.changeset/upset-rats-work.md
@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+"@rocket.chat/ui-voip": minor
+---
+
+Introduces popout functionality for voice calls
diff --git a/apps/meteor/client/providers/MediaCallProvider.tsx b/apps/meteor/client/providers/MediaCallProvider.tsx
index e741e76d51025..a9a89d0f066af 100644
--- a/apps/meteor/client/providers/MediaCallProvider.tsx
+++ b/apps/meteor/client/providers/MediaCallProvider.tsx
@@ -14,8 +14,9 @@ const MediaCallProvider = ({ children }: { children: ReactNode }) => {
 
 	const unauthorizedContextValue = useMemo(
 		() => ({
-			inRoomView: false,
-			setInRoomView: () => undefined,
+			currentViews: [],
+			registerView: () => undefined,
+			unregisterView: () => undefined,
 			instance: undefined,
 			signalEmitter: new Emitter<any>(),
 			audioElement: undefined,
diff --git a/apps/meteor/packages/meteor-inject-initial/lib/inject-core.js b/apps/meteor/packages/meteor-inject-initial/lib/inject-core.js
index 6f3a23a66c962..06e67ee0814f2 100644
--- a/apps/meteor/packages/meteor-inject-initial/lib/inject-core.js
+++ b/apps/meteor/packages/meteor-inject-initial/lib/inject-core.js
@@ -45,6 +45,8 @@ Inject.appUrl = function (url) {
 	// Avoid serving app HTML for declared routes such as /sockjs/.
 	if (typeof RoutePolicy !== 'undefined' && RoutePolicy.classify(url)) return false;
 
+	if (url === '/voice-call-popup.html') return false;
+
 	// we currently return app HTML on all URLs by default
 	return true;
 };
diff --git a/apps/meteor/public/voice-call-popup.html b/apps/meteor/public/voice-call-popup.html
new file mode 120000
index 0000000000000..b800ef444c8d1
--- /dev/null
+++ b/apps/meteor/public/voice-call-popup.html
@@ -0,0 +1 @@
+../node_modules/@rocket.chat/ui-voip/dist/voice-call-popup.html
\ No newline at end of file
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/voice-calls.ts b/apps/meteor/tests/e2e/page-objects/fragments/voice-calls.ts
index c02b4db8945e0..1570c0c972e58 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/voice-calls.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/voice-calls.ts
@@ -2,101 +2,385 @@ import type { Locator, Page } from '@playwright/test';
 
 import { expect } from '../../utils/test';
 
-export class VoiceCalls {
+const timerToSeconds = (time: string): number => {
+	const [seconds, minutes, hours = '00'] = time.split(':').reverse();
+	if (!seconds || !minutes) {
+		throw new Error('Voice call timer has an invalid time format');
+	}
+	return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);
+};
+
+export class VoiceCallControls {
+	private readonly _controls: Locator;
+
+	constructor(controls: Locator) {
+		this._controls = controls;
+	}
+
+	get call(): Locator {
+		return this._controls.getByRole('button', { name: 'Call', exact: true });
+	}
+
+	get accept(): Locator {
+		return this._controls.getByRole('button', { name: 'Accept', exact: true });
+	}
+
+	get hangup(): Locator {
+		return this._controls.getByRole('button', { name: /End call|Reject/, exact: true });
+	}
+
+	get cancel(): Locator {
+		return this._controls.getByRole('button', { name: 'Cancel', exact: true });
+	}
+
+	get dialpad(): Locator {
+		return this._controls.getByRole('button', { name: /Dialpad/i });
+	}
+
+	get mute(): Locator {
+		return this._controls.getByRole('button', { name: /Mute/i });
+	}
+
+	get hold(): Locator {
+		return this._controls.getByRole('button', { name: /Hold|Resume/i });
+	}
+
+	get transfer(): Locator {
+		return this._controls.getByRole('button', { name: 'Forward', exact: true });
+	}
+
+	get shareScreen(): Locator {
+		return this._controls.getByRole('button', { name: /Share screen|Stop sharing screen/i });
+	}
+
+	get toggleChat(): Locator {
+		return this._controls.getByRole('button', { name: /Hide chat|Show chat/i });
+	}
+
+	get directMessage(): Locator {
+		return this._controls.getByRole('button', { name: /Direct message/i });
+	}
+
+	get popout(): Locator {
+		return this._controls.getByRole('button', { name: /Open in new window|Return to main window/i });
+	}
+}
+
+export class TransferModal {
+	private readonly root: Locator;
+
 	private readonly page: Page;
 
-	constructor(page: Page) {
+	constructor(page: Page, root: Locator) {
 		this.page = page;
+		this.root = root;
+	}
+
+	get content(): Locator {
+		return this.root;
+	}
+
+	get input(): Locator {
+		return this.root.getByRole('textbox');
+	}
+
+	get hangUpAndTransfer(): Locator {
+		return this.root.getByRole('button', { name: 'Hang up and transfer call', exact: true });
+	}
+
+	async transferCall(username: string): Promise<void> {
+		// await this.input.click();
+		await this.input.fill(username);
+		// Options have to be gotten from the page since the Options are rendered on a portal
+		await this.page.getByRole('option', { name: username }).getByRole('figure').click();
+		await expect(this.content).toContainText(username);
+		await this.hangUpAndTransfer.click();
+	}
+}
+
+export class Widget {
+	private readonly root: Locator;
+
+	private readonly callControls: VoiceCallControls;
+
+	private readonly headerControls: VoiceCallControls;
+
+	private readonly transferModal: TransferModal;
+
+	constructor(page: Page) {
+		this.transferModal = new TransferModal(page, page.getByRole('dialog', { name: 'Transfer call' }));
+		this.root = page.getByRole('dialog', { name: 'Voice call', exact: false });
+		this.callControls = new VoiceCallControls(this.root.getByRole('group'));
+		this.headerControls = new VoiceCallControls(this.root.getByRole('banner'));
+	}
+
+	get content(): Locator {
+		return this.root;
+	}
+
+	get controls(): VoiceCallControls {
+		return this.callControls;
+	}
+
+	get timer(): Locator {
+		return this.root.getByRole('time');
+	}
+
+	get btnShowCallHere(): Locator {
+		return this.root.getByRole('button', { name: 'Show call here' });
+	}
+
+	async showCallHere(): Promise<void> {
+		await this.btnShowCallHere.click();
+		await expect(this.btnShowCallHere).not.toBeVisible();
+	}
+
+	async getTimerContentInSeconds() {
+		const text = await this.timer.innerText();
+		return timerToSeconds(text);
 	}
 
 	async initiateCall(): Promise<void> {
-		await expect(this.callWidget).toBeVisible();
-		await this.btnCall.click();
-		await expect(this.btnCancel).toBeVisible();
+		await this.callControls.call.click();
+		await expect(this.callControls.cancel).toBeVisible();
 	}
 
 	async acceptCall(): Promise<void> {
-		await expect(this.btnAcceptCall).toBeVisible();
-		await this.btnAcceptCall.click();
-		await expect(this.btnOpenDialpad).toBeVisible();
+		await this.callControls.accept.click();
+		await expect(this.callControls.hangup).toBeVisible();
 	}
 
-	async rejectCall(): Promise<void> {
-		await expect(this.btnRejectCall).toBeVisible();
-		await this.btnRejectCall.click();
+	async endCall(): Promise<void> {
+		await this.callControls.hangup.click();
+		await expect(this.content).not.toBeVisible();
 	}
 
-	get callWidget(): Locator {
-		return this.page.getByRole('article', { name: 'New call' });
+	async goToDm(): Promise<void> {
+		await this.headerControls.directMessage.click();
+		await expect(this.content).not.toBeVisible();
 	}
 
-	get btnCall(): Locator {
-		return this.page.getByRole('button', { name: 'Call', exact: true });
+	async transferCall(username: string): Promise<void> {
+		await this.callControls.transfer.click();
+		await expect(this.transferModal.content).toBeVisible();
+		await this.transferModal.transferCall(username);
+		await expect(this.transferModal.content).not.toBeVisible();
+		await expect(this.content).not.toBeVisible();
 	}
 
-	get callControlGroup(): Locator {
-		return this.page.getByRole('article').getByRole('group');
+	async muteSelf(): Promise<void> {
+		await this.callControls.mute.click();
+		await expect(this.callControls.mute).toHaveAttribute('title', 'Unmute');
 	}
 
-	btnEndCall(name: string): Locator {
-		return this.callControlGroup.getByRole('button', { name: `End call with ${name}` });
+	async unmuteSelf(): Promise<void> {
+		await this.callControls.mute.click();
+		await expect(this.callControls.mute).toHaveAttribute('title', 'Mute');
 	}
 
-	get btnCancel(): Locator {
-		return this.page.getByRole('button', { name: 'Cancel', exact: true });
+	async holdSelf(): Promise<void> {
+		await this.callControls.hold.click();
+		await expect(this.callControls.hold).toHaveAttribute('title', 'Resume');
 	}
 
-	get btnAcceptCall(): Locator {
-		return this.page.getByRole('button', { name: 'Accept', exact: true });
+	async resumeSelf(): Promise<void> {
+		await this.callControls.hold.click();
+		await expect(this.callControls.hold).toHaveAttribute('title', 'Hold');
 	}
 
-	get btnRejectCall(): Locator {
-		return this.page.getByRole('button', { name: 'Reject', exact: true });
+	async openDialpad(): Promise<void> {
+		await this.callControls.dialpad.click();
+		await expect(this.callControls.dialpad).toHaveAttribute('title', 'Close dialpad');
 	}
 
-	get btnOpenDialpad(): Locator {
-		return this.page.getByRole('button', { name: /Dialpad/i });
+	async closeDialpad(): Promise<void> {
+		await this.callControls.dialpad.click();
+		await expect(this.callControls.dialpad).toHaveAttribute('title', 'Open dialpad');
 	}
 
-	get btnMute(): Locator {
-		return this.page.getByRole('button', { name: /Mute/i });
+	get allScreenShareVideos(): Locator {
+		return this.root.locator('video');
 	}
 
-	get btnHold(): Locator {
-		return this.page.getByRole('button', { name: /Hold|Resume/i });
+	async shareScreen(): Promise<void> {
+		await this.callControls.shareScreen.click();
+		await expect(this.callControls.shareScreen).toHaveAttribute('title', 'Stop sharing screen');
 	}
 
-	get btnTransfer(): Locator {
-		return this.page.getByRole('button', { name: 'Forward', exact: true });
+	async stopSharing(): Promise<void> {
+		await this.callControls.shareScreen.click();
+		await expect(this.callControls.shareScreen).toHaveAttribute('title', 'Share screen');
 	}
 
-	get transferModal(): Locator {
-		return this.page.getByRole('dialog', { name: 'Transfer call' });
+	async openPopout(): Promise<void> {
+		await this.headerControls.popout.click();
 	}
 
-	get inputUsername(): Locator {
-		return this.transferModal.getByRole('textbox', { name: 'Enter username or number' });
+	peerCard(username: string): Locator {
+		return this.root.getByText(username);
 	}
+}
+
+export class RoomSection {
+	private readonly root: Locator;
+
+	public readonly callControls: VoiceCallControls;
 
-	get btnHangupAndTransfer(): Locator {
-		return this.transferModal.getByRole('button', { name: 'Hang up and transfer call', exact: true });
+	public readonly otherControls: VoiceCallControls;
+
+	constructor(root: Locator) {
+		this.root = root;
+		// Right now there are 2 control groups in the room view, with no discrimination between them
+		this.callControls = new VoiceCallControls(this.root.getByRole('group').first());
+		this.otherControls = new VoiceCallControls(this.root.getByRole('group').last());
 	}
 
-	get callTransferWidget(): Locator {
-		return this.page.getByRole('heading', { name: 'Transferring call...' });
+	get content(): Locator {
+		return this.root;
 	}
 
-	get incommingCallTransferWidget(): Locator {
-		return this.page.getByRole('heading', { name: 'Incoming call transfer...' });
+	get controls(): VoiceCallControls {
+		return this.callControls;
 	}
 
-	async transferCall(username: string): Promise<void> {
-		await this.btnTransfer.click();
-		await expect(this.transferModal).toBeVisible();
-		await this.inputUsername.click();
-		await this.inputUsername.fill(username);
-		await this.page.getByRole('option', { name: username }).getByRole('figure').click();
-		await expect(this.transferModal).toContainText(username);
-		await this.btnHangupAndTransfer.click();
+	get timer(): Locator {
+		return this.root.getByRole('time');
+	}
+
+	get allScreenShareVideos(): Locator {
+		return this.root.locator('video');
+	}
+
+	get btnShowCallHere(): Locator {
+		return this.root.getByRole('button', { name: 'Show call here' });
+	}
+
+	async showCallHere(): Promise<void> {
+		await this.btnShowCallHere.click();
+		await expect(this.btnShowCallHere).not.toBeVisible();
+	}
+
+	async getTimerContentInSeconds() {
+		const text = await this.timer.innerText();
+		return timerToSeconds(text);
+	}
+
+	async endCall(): Promise<void> {
+		await this.callControls.hangup.click();
+		await expect(this.content).not.toBeVisible();
+	}
+
+	async hideChat(): Promise<void> {
+		await expect(this.otherControls.toggleChat).toHaveAccessibleName(/Hide chat/i);
+		await this.otherControls.toggleChat.click();
+		await expect(this.otherControls.toggleChat).toHaveAccessibleName(/Show chat/i);
+	}
+
+	async showChat(): Promise<void> {
+		await expect(this.otherControls.toggleChat).toHaveAccessibleName(/Show chat/i);
+		await this.otherControls.toggleChat.click();
+		await expect(this.otherControls.toggleChat).toHaveAccessibleName(/Hide chat/i);
+	}
+
+	async muteSelf(): Promise<void> {
+		await this.callControls.mute.click();
+		await expect(this.callControls.mute).toHaveAttribute('title', 'Unmute');
+	}
+
+	async unmuteSelf(): Promise<void> {
+		await this.callControls.mute.click();
+		await expect(this.callControls.mute).toHaveAttribute('title', 'Mute');
+	}
+
+	async holdSelf(): Promise<void> {
+		await this.callControls.hold.click();
+		await expect(this.callControls.hold).toHaveAttribute('title', 'Resume');
+	}
+
+	async resumeSelf(): Promise<void> {
+		await this.callControls.hold.click();
+		await expect(this.callControls.hold).toHaveAttribute('title', 'Hold');
+	}
+
+	async shareScreen(): Promise<void> {
+		await this.callControls.shareScreen.click();
+		await expect(this.callControls.shareScreen).toHaveAttribute('title', 'Stop sharing screen');
+	}
+
+	async stopSharing(): Promise<void> {
+		await this.callControls.shareScreen.click();
+		await expect(this.callControls.shareScreen).toHaveAttribute('title', 'Share screen');
+	}
+
+	peerCard(username: string): Locator {
+		return this.root.getByText(username);
+	}
+
+	async openPopout(): Promise<void> {
+		await this.otherControls.popout.click();
+	}
+}
+
+export class PopoutPage extends RoomSection {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		super(page.getByRole('main', { name: 'Voice call' }));
+		this.page = page;
+	}
+
+	override async endCall(): Promise<void> {
+		const pageClosed = new Promise((resolve) => this.page.on('close', () => resolve(true)));
+		await this.callControls.hangup.click();
+		await expect(pageClosed).resolves.toBe(true);
+	}
+}
+
+export class VoiceCalls {
+	public readonly widget: Widget;
+
+	public readonly roomSection: RoomSection;
+
+	public popoutPage: PopoutPage | undefined;
+
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.widget = new Widget(page);
+		this.roomSection = new RoomSection(page.getByRole('region', { name: 'Voice call' }));
+	}
+
+	get popout(): PopoutPage {
+		if (!this.popoutPage) {
+			throw new Error('Voice call - Popout is not open (call openPopout(Room|Widget) first)');
+		}
+		return this.popoutPage;
+	}
+
+	// Open the popout from the room section
+	async openPopoutRoom(): Promise<void> {
+		const [popout] = await Promise.all([this.page.waitForEvent('popup'), this.roomSection.openPopout()]);
+		if (!popout) {
+			throw new Error('Voice call - Failed to open popout');
+		}
+		await popout.waitForLoadState();
+		popout.on('close', () => {
+			this.popoutPage = undefined;
+		});
+		this.popoutPage = new PopoutPage(popout);
+	}
+
+	// Open the popout from the widget
+	async openPopoutWidget(): Promise<void> {
+		const [popout] = await Promise.all([this.page.waitForEvent('popup'), this.widget.openPopout()]);
+		if (!popout) {
+			throw new Error('Voice call - Failed to open popout');
+		}
+		await popout.waitForLoadState();
+		popout.on('close', () => {
+			this.popoutPage = undefined;
+		});
+		this.popoutPage = new PopoutPage(popout);
 	}
 }
diff --git a/apps/meteor/tests/e2e/voice-calls-ee.spec.ts b/apps/meteor/tests/e2e/voice-calls-ee.spec.ts
index e699e8bee96d0..ad93f25a37d42 100644
--- a/apps/meteor/tests/e2e/voice-calls-ee.spec.ts
+++ b/apps/meteor/tests/e2e/voice-calls-ee.spec.ts
@@ -28,6 +28,7 @@ test.describe('Internal Voice Calls - Enterprise Edition', () => {
 
 	test.afterAll(async ({ api }) => {
 		await setSettingValueById(api, 'VoIP_TeamCollab_Screen_Sharing_Enabled', true);
+		await Promise.all([...sessions.map(({ page }) => page.close())]);
 	});
 
 	test('should initiate voice call from direct message', async () => {
@@ -40,18 +41,18 @@ test.describe('Internal Voice Calls - Enterprise Edition', () => {
 
 		await test.step('initiate a voice call from room toolbar', async () => {
 			await user1.poHomeChannel.content.btnVoiceCall.click();
-			await expect(user1.poHomeChannel.voiceCalls.callWidget).toBeVisible();
-			await user1.poHomeChannel.voiceCalls.initiateCall();
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).toBeVisible();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
 		});
 
 		await test.step('user2 accepts the call', async () => {
-			await user2.poHomeChannel.voiceCalls.acceptCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
 		});
 
 		await test.step('user2 ends the call', async () => {
-			await user2.poHomeChannel.voiceCalls.btnEndCall('user1').click();
-			await expect(user2.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
-			await expect(user1.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
+			await user2.poHomeChannel.voiceCalls.widget.endCall();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
 		});
 	});
 
@@ -61,44 +62,37 @@ test.describe('Internal Voice Calls - Enterprise Edition', () => {
 			await user1.poHomeChannel.navbar.openChat('user2');
 			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
 			await user1.poHomeChannel.content.btnVoiceCall.click();
-			await user1.poHomeChannel.voiceCalls.initiateCall();
-			await user2.poHomeChannel.voiceCalls.acceptCall();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
 		});
 
 		await test.step('should mute/unmute microphone from user1', async () => {
 			// User1 mutes microphone
-			await user1.poHomeChannel.voiceCalls.btnMute.click();
-			await expect(user1.poHomeChannel.voiceCalls.btnMute).toHaveAttribute('title', 'Unmute');
+			await user1.poHomeChannel.voiceCalls.widget.muteSelf();
 
 			// User1 unmutes microphone
-			await user1.poHomeChannel.voiceCalls.btnMute.click();
-			await expect(user1.poHomeChannel.voiceCalls.btnMute).toHaveAttribute('title', 'Mute');
+			await user1.poHomeChannel.voiceCalls.widget.unmuteSelf();
 		});
 
 		await test.step('should put call on hold from user1', async () => {
 			// User1 puts call on hold
-			await user1.poHomeChannel.voiceCalls.btnHold.click();
-			await expect(user1.poHomeChannel.voiceCalls.btnHold).toHaveAttribute('title', 'Resume');
+			await user1.poHomeChannel.voiceCalls.widget.holdSelf();
 
 			// User1 resumes call
-			await user1.poHomeChannel.voiceCalls.btnHold.click();
-			await expect(user1.poHomeChannel.voiceCalls.btnHold).toHaveAttribute('title', 'Hold');
+			await user1.poHomeChannel.voiceCalls.widget.resumeSelf();
 		});
 
 		await test.step('should access dialpad during call', async () => {
 			// User1 opens dial pad
-			await user1.poHomeChannel.voiceCalls.btnOpenDialpad.click();
-			await expect(user1.poHomeChannel.voiceCalls.btnOpenDialpad).toHaveAttribute('title', 'Close dialpad');
+			await user1.poHomeChannel.voiceCalls.widget.openDialpad();
 
 			// User1 closes dial pad
-			await user1.poHomeChannel.voiceCalls.btnOpenDialpad.click();
-			await expect(user1.poHomeChannel.voiceCalls.btnOpenDialpad).toHaveAttribute('title', 'Open dialpad');
+			await user1.poHomeChannel.voiceCalls.widget.closeDialpad();
 		});
 
 		await test.step('should end the call from user1', async () => {
-			await user1.poHomeChannel.voiceCalls.btnEndCall('user2').click();
-			await expect(user1.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
-			await expect(user2.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
+			await user1.poHomeChannel.voiceCalls.widget.endCall();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
 		});
 	});
 
@@ -115,27 +109,29 @@ test.describe('Internal Voice Calls - Enterprise Edition', () => {
 			await user1.poHomeChannel.navbar.openChat('user2');
 			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
 			await user1.poHomeChannel.content.btnVoiceCall.click();
-			await user1.poHomeChannel.voiceCalls.initiateCall();
-			await user2.poHomeChannel.voiceCalls.acceptCall();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
 		});
 
 		await test.step('user1 transfers call to user3', async () => {
-			await user1.poHomeChannel.voiceCalls.transferCall('user3');
+			await user1.poHomeChannel.voiceCalls.widget.transferCall('user3');
 			await user1.poHomeChannel.toastMessage.waitForDisplay({ type: 'success' });
-			await expect(user1.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
-			await expect(user2.poHomeChannel.voiceCalls.callTransferWidget).toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).toHaveAccessibleName(/Transferring call.../gi);
 		});
 
 		await test.step('user3 receives transferred call', async () => {
-			await expect(user3.poHomeChannel.voiceCalls.incommingCallTransferWidget).toBeVisible();
-			await user3.poHomeChannel.voiceCalls.acceptCall();
+			await expect(user3.poHomeChannel.voiceCalls.widget.content).toBeVisible();
+			await expect(user3.poHomeChannel.voiceCalls.widget.content).toHaveAccessibleName(/Incoming call transfer.../gi);
+			await user3.poHomeChannel.voiceCalls.widget.acceptCall();
 		});
 
 		await test.step('user3 ends the call', async () => {
-			await user3.poHomeChannel.voiceCalls.btnEndCall('user2').click();
-			await expect(user3.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
-			await expect(user2.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
+			await user3.poHomeChannel.voiceCalls.widget.endCall();
+			await expect(user3.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
 		});
+
 		await user3.page.close();
 	});
 
@@ -146,16 +142,310 @@ test.describe('Internal Voice Calls - Enterprise Edition', () => {
 			await user1.poHomeChannel.navbar.openChat('user2');
 			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
 			await user1.poHomeChannel.content.btnVoiceCall.click();
-			await user1.poHomeChannel.voiceCalls.initiateCall();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
 		});
 
 		await test.step('user2 declines the call', async () => {
-			await user2.poHomeChannel.voiceCalls.btnRejectCall.click();
+			await user2.poHomeChannel.voiceCalls.widget.endCall();
 		});
 
 		await test.step('Verify call widget disappears', async () => {
-			await expect(user1.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
-			await expect(user2.poHomeChannel.voiceCalls.callWidget).not.toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+		});
+	});
+});
+
+test.describe('Internal Voice Calls - In-room view - Enterprise Edition', () => {
+	test.skip(!IS_EE, 'Enterprise Edition Only');
+	let sessions: { page: Page; poHomeChannel: HomeChannel }[];
+
+	test.beforeAll(async ({ api }) => {
+		await Promise.all([
+			api.post('/users.setStatus', { status: 'online', username: 'user1' }),
+			api.post('/users.setStatus', { status: 'online', username: 'user2' }),
+		]);
+	});
+
+	test.beforeAll(async ({ browser }) => {
+		sessions = await Promise.all([
+			createAuxContext(browser, Users.user1).then(({ page }) => ({ page, poHomeChannel: new HomeChannel(page) })),
+			createAuxContext(browser, Users.user2).then(({ page }) => ({ page, poHomeChannel: new HomeChannel(page) })),
+		]);
+	});
+
+	test.afterAll(async () => {
+		await Promise.all([...sessions.map(({ page }) => page.close())]);
+	});
+
+	test('should show in-room view when navigating to peer DM during call', async () => {
+		const [user1, user2] = sessions;
+
+		await test.step('establish call from user1 DM with user2', async () => {
+			await user1.poHomeChannel.navbar.openChat('user2');
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+			await user1.poHomeChannel.content.btnVoiceCall.click();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
+		});
+
+		await test.step('widget should be hidden and room view should be visible', async () => {
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).toBeVisible();
+		});
+
+		await test.step('user cards should have correct names', async () => {
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.peerCard('user1')).toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.peerCard('user2')).toBeVisible();
+		});
+
+		await test.step('mute/unmute and hold/resume', async () => {
+			await user1.poHomeChannel.voiceCalls.roomSection.muteSelf();
+			await user1.poHomeChannel.voiceCalls.roomSection.unmuteSelf();
+
+			await user1.poHomeChannel.voiceCalls.roomSection.holdSelf();
+			await user1.poHomeChannel.voiceCalls.roomSection.resumeSelf();
+		});
+
+		await test.step('should change chat visibility', async () => {
+			// Visible by default
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).toBeVisible();
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.otherControls.toggleChat).toHaveAccessibleName(/Hide chat/i);
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+
+			// Hide
+			await user1.poHomeChannel.voiceCalls.roomSection.hideChat();
+			await expect(user1.poHomeChannel.composer.inputMessage).not.toBeVisible();
+
+			// Show
+			await user1.poHomeChannel.voiceCalls.roomSection.showChat();
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+		});
+
+		await test.step('end call to clean up', async () => {
+			await user1.poHomeChannel.voiceCalls.roomSection.endCall();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.roomSection.content).not.toBeVisible();
+		});
+	});
+
+	test('should switch views when navigating into and away from peer DM', async () => {
+		const [user1, user2] = sessions;
+
+		await test.step('establish call and navigate to peer DM', async () => {
+			await user1.poHomeChannel.navbar.openChat('user2');
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+			await user1.poHomeChannel.content.btnVoiceCall.click();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
+		});
+
+		await test.step('navigate user1 away from peer DM', async () => {
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).toBeVisible();
+			const initialRoomViewTimer = await user1.poHomeChannel.voiceCalls.roomSection.getTimerContentInSeconds();
+
+			await user1.poHomeChannel.navbar.openChat('general');
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).not.toBeVisible();
+
+			const widgetTimer = await user1.poHomeChannel.voiceCalls.widget.getTimerContentInSeconds();
+			expect(widgetTimer).toBeGreaterThanOrEqual(initialRoomViewTimer);
+		});
+
+		await test.step('return to peer DM (go to dm button)', async () => {
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).toBeVisible();
+			const initialWidgetTimer = await user1.poHomeChannel.voiceCalls.widget.getTimerContentInSeconds();
+
+			await user1.poHomeChannel.voiceCalls.widget.goToDm();
+
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+
+			const roomTimer = await user1.poHomeChannel.voiceCalls.roomSection.getTimerContentInSeconds();
+			expect(roomTimer).toBeGreaterThanOrEqual(initialWidgetTimer);
+		});
+
+		await test.step('end call to clean up', async () => {
+			await user1.poHomeChannel.voiceCalls.roomSection.endCall();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+		});
+	});
+
+	// Maybe flaky
+	test('Screen sharing', async () => {
+		const [user1, user2] = sessions;
+
+		await test.step('establish call and navigate to peer DM', async () => {
+			await user1.poHomeChannel.navbar.openChat('user2');
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+			await user1.poHomeChannel.content.btnVoiceCall.click();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).toBeVisible();
+		});
+
+		await test.step('start screen sharing with both users', async () => {
+			await user1.poHomeChannel.voiceCalls.roomSection.shareScreen();
+
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.allScreenShareVideos).toHaveCount(1);
+			await expect(user2.poHomeChannel.voiceCalls.widget.allScreenShareVideos).toHaveCount(1);
+
+			await user2.poHomeChannel.voiceCalls.widget.shareScreen();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.allScreenShareVideos).toHaveCount(2);
+			await expect(user2.poHomeChannel.voiceCalls.widget.allScreenShareVideos).toHaveCount(2);
+		});
+
+		await test.step('stop sharing with user1 through room view', async () => {
+			await user1.poHomeChannel.voiceCalls.roomSection.stopSharing();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.allScreenShareVideos).toHaveCount(1);
+			await expect(user2.poHomeChannel.voiceCalls.widget.allScreenShareVideos).toHaveCount(1);
+		});
+
+		await test.step('stop sharing with user2 through widget', async () => {
+			await user2.poHomeChannel.voiceCalls.widget.stopSharing();
+
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.allScreenShareVideos).toHaveCount(0);
+			await expect(user2.poHomeChannel.voiceCalls.widget.allScreenShareVideos).toHaveCount(0);
+		});
+
+		await test.step('end call to clean up', async () => {
+			await user1.poHomeChannel.voiceCalls.roomSection.endCall();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.roomSection.content).not.toBeVisible();
+		});
+	});
+});
+
+test.describe('Internal Voice Calls - Popout view - Enterprise Edition', () => {
+	test.skip(!IS_EE, 'Enterprise Edition Only');
+	let sessions: { page: Page; poHomeChannel: HomeChannel }[];
+
+	test.beforeAll(async ({ api }) => {
+		await Promise.all([
+			api.post('/users.setStatus', { status: 'online', username: 'user1' }),
+			api.post('/users.setStatus', { status: 'online', username: 'user2' }),
+		]);
+	});
+
+	test.beforeAll(async ({ browser }) => {
+		sessions = await Promise.all([
+			createAuxContext(browser, Users.user1).then(({ page }) => ({ page, poHomeChannel: new HomeChannel(page) })),
+			createAuxContext(browser, Users.user2).then(({ page }) => ({ page, poHomeChannel: new HomeChannel(page) })),
+		]);
+	});
+
+	test.afterAll(async () => {
+		await Promise.all([...sessions.map(({ page }) => page.close())]);
+	});
+
+	test('should show popout view', async () => {
+		const [user1, user2] = sessions;
+
+		await test.step('establish call from user1 DM with user2', async () => {
+			await user1.poHomeChannel.navbar.openChat('user2');
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+			await user1.poHomeChannel.content.btnVoiceCall.click();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
+		});
+
+		await test.step('should open popout for both users', async () => {
+			await user1.poHomeChannel.voiceCalls.openPopoutRoom();
+			await expect(user1.poHomeChannel.voiceCalls.popout.content).toBeVisible();
+
+			await user2.poHomeChannel.voiceCalls.openPopoutWidget();
+			await expect(user2.poHomeChannel.voiceCalls.popout.content).toBeVisible();
+		});
+
+		await test.step('user cards should have correct names', async () => {
+			await expect(user1.poHomeChannel.voiceCalls.popout.peerCard('user1')).toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.popout.peerCard('user2')).toBeVisible();
+
+			await expect(user2.poHomeChannel.voiceCalls.popout.peerCard('user1')).toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.popout.peerCard('user2')).toBeVisible();
+		});
+
+		await test.step('mute/unmute and hold/resume', async () => {
+			await user1.poHomeChannel.voiceCalls.popout.muteSelf();
+			await user2.poHomeChannel.voiceCalls.popout.muteSelf();
+
+			await user1.poHomeChannel.voiceCalls.popout.unmuteSelf();
+			await user2.poHomeChannel.voiceCalls.popout.unmuteSelf();
+
+			await user1.poHomeChannel.voiceCalls.popout.holdSelf();
+			await user2.poHomeChannel.voiceCalls.popout.holdSelf();
+
+			await user1.poHomeChannel.voiceCalls.popout.resumeSelf();
+			await user2.poHomeChannel.voiceCalls.popout.resumeSelf();
+		});
+
+		await test.step('Widget "Show call here" button', async () => {
+			await expect(user2.poHomeChannel.voiceCalls.widget.btnShowCallHere).toBeVisible();
+			await user2.poHomeChannel.voiceCalls.widget.showCallHere();
+		});
+
+		await test.step('Room "Show call here" button', async () => {
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.btnShowCallHere).toBeVisible();
+			await user1.poHomeChannel.voiceCalls.roomSection.showCallHere();
+		});
+
+		await test.step('end call from within popup', async () => {
+			await user1.poHomeChannel.voiceCalls.openPopoutRoom();
+			await expect(user1.poHomeChannel.voiceCalls.popout.content).toBeVisible();
+
+			await user1.poHomeChannel.voiceCalls.popout.endCall();
+			await expect(user2.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user2.poHomeChannel.voiceCalls.roomSection.content).not.toBeVisible();
+		});
+	});
+
+	// Maybe flaky
+	test('Screen sharing', async () => {
+		const [user1, user2] = sessions;
+
+		await test.step('establish call and open popout', async () => {
+			await user1.poHomeChannel.navbar.openChat('user2');
+			await expect(user1.poHomeChannel.composer.inputMessage).toBeVisible();
+			await user1.poHomeChannel.content.btnVoiceCall.click();
+			await user1.poHomeChannel.voiceCalls.widget.initiateCall();
+			await user2.poHomeChannel.voiceCalls.widget.acceptCall();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).toBeVisible();
+
+			await user1.poHomeChannel.voiceCalls.openPopoutRoom();
+			await expect(user1.poHomeChannel.voiceCalls.popout.content).toBeVisible();
+
+			await user2.poHomeChannel.voiceCalls.openPopoutWidget();
+			await expect(user2.poHomeChannel.voiceCalls.popout.content).toBeVisible();
+		});
+
+		await test.step('start screen sharing with both users', async () => {
+			await user1.poHomeChannel.voiceCalls.popout.shareScreen();
+
+			await expect(user1.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(1);
+			await expect(user2.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(1);
+
+			await user2.poHomeChannel.voiceCalls.popout.shareScreen();
+			await expect(user1.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(2);
+			await expect(user2.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(2);
+		});
+
+		await test.step('stop sharing with both users through popout', async () => {
+			await user1.poHomeChannel.voiceCalls.popout.stopSharing();
+			await expect(user1.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(1);
+			await expect(user2.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(1);
+
+			await user2.poHomeChannel.voiceCalls.popout.stopSharing();
+			await expect(user1.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(0);
+			await expect(user2.poHomeChannel.voiceCalls.popout.allScreenShareVideos).toHaveCount(0);
+		});
+
+		await test.step('end call with user2 from the popout', async () => {
+			await user2.poHomeChannel.voiceCalls.popout.endCall();
+			await expect(user1.poHomeChannel.voiceCalls.widget.content).not.toBeVisible();
+			await expect(user1.poHomeChannel.voiceCalls.roomSection.content).not.toBeVisible();
 		});
 	});
 });
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 2ab8263d4e6fb..9575fd1284e63 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -1053,6 +1053,7 @@
   "Call_not_found": "Call not found",
   "Call_not_found_error": "This could happen when the call URL is not valid, or you're having connection issues. Please check with the source of the call URL and try again, or talk to your workspace administrator if the problem persists",
   "Call_ongoing": "Call ongoing",
+  "Call_open_separate_window": "Call open in a separate window",
   "Call_provider": "Call Provider",
   "Call_ringer_volume": "Call ringer volume",
   "Call_ringer_volume_hint": "For all incoming voice and video call notifications",
@@ -2157,6 +2158,7 @@
   "Exclude_pinned": "Exclude pinned messages",
   "Execute_Synchronization_Now": "Execute Synchronization Now",
   "Exit_Full_Screen": "Exit Full Screen",
+  "Exit_fullscreen": "Exit fullscreen",
   "Expand": "Expand",
   "Expand_group": "Expand {{group}}",
   "Expand_all": "Expand all",
@@ -2222,6 +2224,7 @@
   "Failed_to_generate_invite_link": "Failed to generate invite link",
   "Failed_to_transfer_call": "Failed to transfer call",
   "Failed_to_validate_invite_token": "Failed to validate invite token",
+  "Failed_to_open_call_window": "Failed to open call window",
   "Failure": "Failure",
   "Fallback_forward_department": "Fallback department for forwarding",
   "Fallback_forward_department_description": "Allows you to define a fallback department which will receive the chats forwarded to this one in case there's no online agents at the moment",
@@ -4067,6 +4070,7 @@
   "Open_Days": "Open days",
   "Open_Dialpad": "Open Dialpad",
   "Open_dialpad": "Open dialpad",
+  "Open_in_new_window": "Open in new window",
   "Open_Livechats": "Chats in progress",
   "Open_Outlook": "Open Outlook",
   "Open_call": "Open call",
@@ -4612,6 +4616,7 @@
   "Retrying": "Retrying",
   "Retry_Count": "Retry Count",
   "Return_to_home": "Return to home",
+  "Return_to_main_window": "Return to main window",
   "Return_to_previous_page": "Return to previous page",
   "Return_to_the_queue": "Return back to the Queue",
   "Review": "Review",
@@ -4982,6 +4987,7 @@
   "Show_agent_email": "Show agent email",
   "Show_agent_info": "Show agent information",
   "Show_all": "Show All",
+  "Show_call_here": "Show call here",
   "Show_counter": "Mark as unread",
   "Show_default_content": "Show default content",
   "Show_email_field": "Show email field",
@@ -6029,6 +6035,7 @@
   "You_are_not_authorized_to_access_this_feature": "You are not authorized to access this feature.",
   "You_are_sharing_your_screen": "You are sharing your screen",
   "You_can_change_a_different_avatar_too": "You can override the avatar used to post from this integration.",
+  "You_can_close_this_window": "You can close this window",
   "You_can_close_this_window_now": "You can close this window now.",
   "You_can_do_from_account_preferences": "You can do this later from your account preferences",
   "You_can_search_using_RegExp_eg": "You can search using <a href=\"https://en.wikipedia.org/wiki/Regular_expression\" target=\"_blank\">Regular Expression</a>. e.g. <code class='code-colors inline'>/^text$/i</code>",
diff --git a/packages/ui-voip/package.json b/packages/ui-voip/package.json
index cae9475f57e75..76e16c947bc1a 100644
--- a/packages/ui-voip/package.json
+++ b/packages/ui-voip/package.json
@@ -8,7 +8,8 @@
 		"/dist"
 	],
 	"scripts": {
-		"build": "rm -rf dist && tsc -p tsconfig.build.json",
+		"build": "rm -rf dist && tsc -p tsconfig.build.json && yarn build:post",
+		"build:post": "node --no-warnings dist/generate-landing-view.js && rm -f dist/generate-landing-view.*",
 		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
 		"lint": "eslint .",
 		"lint:fix": "eslint --fix .",
@@ -51,6 +52,7 @@
 		"@testing-library/user-event": "~14.6.1",
 		"@types/jest": "~30.0.0",
 		"@types/jest-axe": "~3.5.9",
+		"@types/node": "~22.19.17",
 		"@types/react": "~18.3.28",
 		"@types/react-dom": "~18.3.7",
 		"date-fns": "~4.1.0",
@@ -58,6 +60,7 @@
 		"i18next": "~23.4.9",
 		"jest": "~30.2.0",
 		"jest-axe": "~10.0.0",
+		"jsdom": "^26.1.0",
 		"react": "~18.3.1",
 		"react-dom": "~18.3.1",
 		"react-virtuoso": "~4.12.8",
diff --git a/packages/ui-voip/src/components/ToggleButton.tsx b/packages/ui-voip/src/components/ToggleButton.tsx
index 86f6a72852d4a..03ea1e2362e7b 100644
--- a/packages/ui-voip/src/components/ToggleButton.tsx
+++ b/packages/ui-voip/src/components/ToggleButton.tsx
@@ -11,20 +11,32 @@ type ToggleButtonProps = {
 	onToggle?: () => void;
 } & Omit<ComponentProps<typeof IconButton>, 'icon' | 'title' | 'aria-label' | 'disabled' | 'onClick'>;
 
-const ToggleButton = ({ disabled, label, pressed, icons, titles, onToggle, ...props }: ToggleButtonProps) => {
+const ToggleButton = ({
+	disabled,
+	label,
+	pressed,
+	icons,
+	titles,
+	onToggle,
+	danger = true,
+	secondary = true,
+	tiny = false,
+	...props
+}: ToggleButtonProps) => {
 	const iconName = icons[pressed ? 1 : 0];
 	const title = titles[pressed ? 1 : 0];
-	const iconColor = pressed ? 'font-danger' : undefined;
+	const iconColor = pressed && danger ? 'font-danger' : undefined;
+
+	const size = tiny ? { tiny: true } : { medium: true };
 
 	return (
 		<IconButton
 			{...props}
 			label={label}
-			medium
-			secondary
+			{...size}
+			secondary={secondary}
 			icon={<Icon size={16} color={iconColor} name={iconName} />}
 			title={title}
-			pressed={pressed}
 			aria-label={label}
 			disabled={disabled}
 			onClick={onToggle}
diff --git a/packages/ui-voip/src/components/Widget/Widget.tsx b/packages/ui-voip/src/components/Widget/Widget.tsx
index d199f0ef0ac81..56c43ea828bba 100644
--- a/packages/ui-voip/src/components/Widget/Widget.tsx
+++ b/packages/ui-voip/src/components/Widget/Widget.tsx
@@ -10,8 +10,9 @@ import { type LastKnownPosition } from '../../providers/useWidgetPositionTracker
 
 // TODO: Initial position from the draggable api instead of style props
 // TODO: A11Y
-const WidgetBase = styled('article')`
+const WidgetBase = styled('div')`
 	position: fixed;
+	padding: 0;
 	right: 2em;
 	top: 11em;
 	display: flex;
@@ -45,7 +46,12 @@ const Widget = ({ children, onChangePosition, restorePosition, ...props }: Widge
 	return (
 		<DragContext.Provider value={{ draggableRef, boundingRef, handleRef }}>
 			<FocusScope autoFocus>
-				<WidgetBase {...props} ref={draggableRef} aria-labelledby='rcx-media-call-widget-title rcx-media-call-widget-caller-info'>
+				<WidgetBase
+					{...props}
+					ref={draggableRef}
+					role='dialog'
+					aria-labelledby='rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info'
+				>
 					{children}
 				</WidgetBase>
 			</FocusScope>
diff --git a/packages/ui-voip/src/components/Widget/WidgetHeader.tsx b/packages/ui-voip/src/components/Widget/WidgetHeader.tsx
index 733c8c21441cc..02c3495ad1297 100644
--- a/packages/ui-voip/src/components/Widget/WidgetHeader.tsx
+++ b/packages/ui-voip/src/components/Widget/WidgetHeader.tsx
@@ -1,5 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
+import { VisuallyHidden } from 'react-aria';
+import { useTranslation } from 'react-i18next';
 
 type WidgetHeaderProps = {
 	title: ReactNode;
@@ -8,8 +10,10 @@ type WidgetHeaderProps = {
 
 // TODO: A11Y - duration/title
 const WidgetHeader = ({ title, children }: WidgetHeaderProps) => {
+	const { t } = useTranslation();
 	return (
 		<Box is='header' mi={12} mb={4} display='flex' alignItems='center' justifyContent='space-between'>
+			<VisuallyHidden id='rcx-media-call-widget-title-prefix'>{t('Voice_call')}</VisuallyHidden>
 			<Box is='h3' color='titles-labels' fontScale='p1b' id='rcx-media-call-widget-title'>
 				{title}
 			</Box>
diff --git a/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap b/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap
index 26354a3750a1d..041b73b7e6363 100644
--- a/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap
+++ b/packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap
@@ -7,9 +7,10 @@ exports[`renders FullWidget without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -25,6 +26,12 @@ exports[`renders FullWidget without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -113,7 +120,7 @@ exports[`renders FullWidget without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
diff --git a/packages/ui-voip/src/context/MediaCallInstanceContext.ts b/packages/ui-voip/src/context/MediaCallInstanceContext.ts
index f520079ba5488..72eced82fa6b7 100644
--- a/packages/ui-voip/src/context/MediaCallInstanceContext.ts
+++ b/packages/ui-voip/src/context/MediaCallInstanceContext.ts
@@ -10,15 +10,21 @@ export type Signals = {
 	toggleWidget: { peerInfo?: PeerInfo };
 };
 
+export type AvailableViews = 'room' | 'popout' | 'widget';
+
+type RegisterView = (view: AvailableViews) => void;
+type UnregisterView = (view: AvailableViews) => void;
+
 type MediaCallInstanceContextValue = {
 	instance: MediaSignalingSession | undefined;
 	signalEmitter: Emitter<Signals>;
 	audioElement: RefObject<HTMLAudioElement | null> | undefined;
 	openRoomId: string | undefined;
-	inRoomView: boolean;
+	currentViews: AvailableViews[];
 	setOpenRoomId: (openRoomId: string | undefined) => void;
 	getAutocompleteOptions: (filter: string) => Promise<PeerAutocompleteOptions[]>;
-	setInRoomView: (inRoomView: boolean) => void;
+	registerView: RegisterView;
+	unregisterView: UnregisterView;
 };
 
 export const MediaCallInstanceContext = createContext<MediaCallInstanceContextValue>({
@@ -28,8 +34,9 @@ export const MediaCallInstanceContext = createContext<MediaCallInstanceContextVa
 	openRoomId: undefined,
 	setOpenRoomId: () => undefined,
 	getAutocompleteOptions: () => Promise.resolve([]),
-	inRoomView: false,
-	setInRoomView: () => undefined,
+	currentViews: [],
+	registerView: () => undefined,
+	unregisterView: () => undefined,
 });
 
 export const useMediaCallInstance = (): MediaCallInstanceContextValue => useContext(MediaCallInstanceContext);
diff --git a/packages/ui-voip/src/context/MediaCallViewContext.ts b/packages/ui-voip/src/context/MediaCallViewContext.ts
index c10f93fbfda7f..29ebe544c1324 100644
--- a/packages/ui-voip/src/context/MediaCallViewContext.ts
+++ b/packages/ui-voip/src/context/MediaCallViewContext.ts
@@ -23,6 +23,8 @@ type MediaCallViewContextValue = {
 	onAccept: () => Promise<void>;
 	onSelectPeer: (peerInfo: PeerInfo) => void;
 	onToggleScreenSharing: () => void;
+	onOpenPopout: () => void;
+	onClosePopout: () => void;
 	streams: MediaCallStreams;
 	widgetPositionTracker?: {
 		onChangePosition: (position: LastKnownPosition | null) => void;
@@ -56,6 +58,8 @@ export const defaultMediaCallContextValue: MediaCallViewContextValue = {
 	onAccept: () => Promise.resolve(undefined),
 	onSelectPeer: () => undefined,
 	onToggleScreenSharing: () => undefined,
+	onOpenPopout: () => undefined,
+	onClosePopout: () => undefined,
 	streams: {},
 };
 
diff --git a/packages/ui-voip/src/context/index.ts b/packages/ui-voip/src/context/index.ts
index 5df5f42764a00..3a294e90c0d24 100644
--- a/packages/ui-voip/src/context/index.ts
+++ b/packages/ui-voip/src/context/index.ts
@@ -4,6 +4,7 @@ export { useMediaCallView } from './MediaCallViewContext';
 export { usePeerAutocomplete, isFirstPeerAutocompleteOption } from './usePeerAutocomplete';
 export { useWidgetExternalControls } from './useWidgetExternalControls';
 export { usePeekMediaSessionState } from './usePeekMediaSessionState';
+export { usePeekMediaSessionCallId } from './usePeekMediaSessionCallId';
 export { usePeekMediaSessionPeerInfo } from './usePeekMediaSessionPeerInfo';
 export { usePeekMediaSessionFeatures } from './usePeekMediaSessionFeatures';
 export type { PeekMediaSessionStateReturn } from './usePeekMediaSessionState';
diff --git a/packages/ui-voip/src/context/usePeekMediaSessionCallId.ts b/packages/ui-voip/src/context/usePeekMediaSessionCallId.ts
new file mode 100644
index 0000000000000..adfc4768d9ae1
--- /dev/null
+++ b/packages/ui-voip/src/context/usePeekMediaSessionCallId.ts
@@ -0,0 +1,25 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+import { useMediaCallInstance } from './MediaCallInstanceContext';
+
+export type PeekMediaSessionCallIdReturn = string | undefined;
+
+export const usePeekMediaSessionCallId = (): PeekMediaSessionCallIdReturn => {
+	const { instance } = useMediaCallInstance();
+
+	const subscribe = useCallback(
+		(onStoreChange: () => void): (() => void) => {
+			if (!instance) {
+				return () => undefined;
+			}
+			return instance?.on('sessionStateChange', onStoreChange);
+		},
+		[instance],
+	);
+
+	const getSnapshot = useCallback(() => {
+		return instance?.getState()?.tempCallId || undefined;
+	}, [instance]);
+
+	return useSyncExternalStore(subscribe, getSnapshot);
+};
diff --git a/packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx b/packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx
index 464daafc926ae..7b2eab5e020e0 100644
--- a/packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx
+++ b/packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx
@@ -16,8 +16,9 @@ const createWrapper = (instance: MockInstance | undefined) => {
 	const wrapper = ({ children }: { children?: ReactNode }) => (
 		<MediaCallInstanceContext.Provider
 			value={{
-				inRoomView: false,
-				setInRoomView: () => undefined,
+				currentViews: [],
+				registerView: () => undefined,
+				unregisterView: () => undefined,
 				instance: instance as any,
 				signalEmitter: new Emitter<Signals>(),
 				audioElement: undefined,
diff --git a/packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx b/packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx
index d493ff77d466d..a6d31f6392948 100644
--- a/packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx
+++ b/packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx
@@ -16,8 +16,9 @@ const createWrapper = (instance: MockInstance | undefined) => {
 	const wrapper = ({ children }: { children?: ReactNode }) => (
 		<MediaCallInstanceContext.Provider
 			value={{
-				inRoomView: false,
-				setInRoomView: () => undefined,
+				currentViews: [],
+				registerView: () => undefined,
+				unregisterView: () => undefined,
 				instance: instance as any,
 				signalEmitter: new Emitter<Signals>(),
 				audioElement: undefined,
diff --git a/packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx b/packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx
index 6153410802d72..1382b150ae007 100644
--- a/packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx
+++ b/packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx
@@ -24,8 +24,9 @@ const appRoot = () =>
 		.wrap((children) => (
 			<MediaCallInstanceContext.Provider
 				value={{
-					inRoomView: false,
-					setInRoomView: () => undefined,
+					currentViews: [],
+					registerView: () => undefined,
+					unregisterView: () => undefined,
 					instance: undefined,
 					signalEmitter: new Emitter<Signals>(),
 					audioElement: undefined,
diff --git a/packages/ui-voip/src/context/useRegisterView.ts b/packages/ui-voip/src/context/useRegisterView.ts
new file mode 100644
index 0000000000000..d0059fa1b1c27
--- /dev/null
+++ b/packages/ui-voip/src/context/useRegisterView.ts
@@ -0,0 +1,18 @@
+import { useLayoutEffect } from 'react';
+
+import { useMediaCallInstance } from '.';
+import type { AvailableViews } from './MediaCallInstanceContext';
+
+const useRegisterView = (view: AvailableViews): AvailableViews[] => {
+	const { currentViews, registerView, unregisterView } = useMediaCallInstance();
+
+	useLayoutEffect(() => {
+		registerView(view);
+
+		return () => unregisterView(view);
+	}, [view, registerView, unregisterView]);
+
+	return currentViews;
+};
+
+export default useRegisterView;
diff --git a/packages/ui-voip/src/context/useRoomView.ts b/packages/ui-voip/src/context/useRoomView.ts
deleted file mode 100644
index c877a726d4d8a..0000000000000
--- a/packages/ui-voip/src/context/useRoomView.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-import { useMediaCallInstance } from '.';
-
-const useRoomView = () => {
-	const { setInRoomView } = useMediaCallInstance();
-
-	useLayoutEffect(() => {
-		setInRoomView(true);
-		return () => {
-			setInRoomView(false);
-		};
-	}, [setInRoomView]);
-};
-
-export default useRoomView;
diff --git a/packages/ui-voip/src/generate-landing-view.tsx b/packages/ui-voip/src/generate-landing-view.tsx
new file mode 100644
index 0000000000000..b4befb641cb7c
--- /dev/null
+++ b/packages/ui-voip/src/generate-landing-view.tsx
@@ -0,0 +1,136 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { createRequire } from 'module';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import type { CSSProperties } from 'react';
+
+const require = createRequire(import.meta.url);
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// 1. Set up a jsdom DOM environment before loading fuselage.
+//    Fuselage's webpack bundle reads window/document/document.body at module init time.
+//    renderToStaticMarkup never calls effects, so the DOM is never actually used.
+const { JSDOM } = require('jsdom') as { JSDOM: new (html: string, options?: { url?: string }) => { window: Window & typeof globalThis } };
+
+const { window: jsdomWindow } = new JSDOM('<!DOCTYPE html><body></body>', { url: 'http://localhost' });
+
+const g = globalThis as Record<string, unknown>;
+g.self = jsdomWindow;
+g.window = jsdomWindow;
+g.document = jsdomWindow.document;
+
+// 2. Redirect all React-family CJS requires to this repo's copy.
+//    When @rocket.chat/fuselage is symlinked from a separate dev repo it has its own
+//    node_modules/react, which creates a second React instance and breaks hook calls.
+//    Module._resolveFilename runs before the module cache lookup, so this forces every
+//    require('react') — including fuselage's internal ones — to resolve to the same file.
+const NodeModule = require('module') as { _resolveFilename: (...args: unknown[]) => string };
+
+const origResolveFilename = NodeModule._resolveFilename.bind(NodeModule);
+const reactRedirects: Record<string, string> = {
+	'react': require.resolve('react'),
+	'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+	'react-dom': require.resolve('react-dom'),
+	'react-dom/server': require.resolve('react-dom/server'),
+};
+NodeModule._resolveFilename = (...args: unknown[]) => {
+	const request = args[0] as string;
+	return reactRedirects[request] ?? origResolveFilename(...args);
+};
+
+// 3. Load fuselage and react-dom/server after all redirects are in place.
+const { renderToStaticMarkup } = require('react-dom/server') as typeof import('react-dom/server');
+const { flushSync } = require('react-dom') as typeof import('react-dom');
+const { createRoot } = require('react-dom/client') as typeof import('react-dom/client');
+const { States, StatesIcon, StatesSubtitle, StatesTitle, PaletteStyleTag } =
+	require('@rocket.chat/fuselage') as typeof import('@rocket.chat/fuselage');
+
+const fuselageCssPath = require.resolve('@rocket.chat/fuselage/dist/fuselage.css');
+
+// 4. Embed the RocketChat icon font as a base64 data URI.
+//    fuselage.css sets font-family:RocketChat on .rcx-icon but does not include the
+//    @font-face declaration — that lives in @rocket.chat/icons. Inlining the woff2
+//    makes the HTML fully self-contained with no external font file dependencies.
+const iconFontPath = require.resolve('@rocket.chat/icons/dist/font/rocketchat.woff2');
+const iconFontBase64 = readFileSync(iconFontPath).toString('base64');
+const iconFontCss = `@font-face {
+  font-family: 'RocketChat';
+  font-weight: 400;
+  font-style: normal;
+  font-display: auto;
+  src: url('data:font/woff2;base64,${iconFontBase64}') format('woff2');
+}`;
+
+// 5. Render PaletteStyleTag for all three themes using the real DOM renderer so its
+//    createPortal calls work. Each instance injects a <style> tag into jsdom's
+//    document.head, which we collect into dynamicStyles below.
+//    renderToStaticMarkup does not support portals, so we use flushSync + createRoot.
+const paletteContainer = jsdomWindow.document.createElement('div');
+jsdomWindow.document.body.appendChild(paletteContainer);
+const paletteRoot = createRoot(paletteContainer);
+flushSync(() => {
+	paletteRoot.render(
+		<>
+			<PaletteStyleTag theme='light' tagId='palette-light' />
+			<PaletteStyleTag theme='dark' tagId='palette-dark' selector='[data-color-scheme="dark"]' />
+			<PaletteStyleTag theme='high-contrast' tagId='palette-high-contrast' selector='[data-color-scheme="high-contrast"]' />
+		</>,
+	);
+});
+
+// Use a plain <div> for the outer container: Box's dynamic CSS classes (display, bg, etc.)
+// are inserted via useInsertionEffect which doesn't run in renderToStaticMarkup.
+// Inline styles and a CSS variable reference cover the same behavior.
+const containerStyle: CSSProperties = {
+	display: 'flex',
+	position: 'absolute',
+	justifyContent: 'center',
+	alignItems: 'center',
+	left: 0,
+	top: 0,
+	bottom: 0,
+	right: 0,
+	backgroundColor: 'var(--rcx-color-surface-tint)',
+	zIndex: -1,
+};
+
+function LandingView() {
+	return (
+		<div style={containerStyle}>
+			<States>
+				<StatesIcon name='phone-off' />
+				<StatesTitle data-i18n='Call_ended'>Call ended</StatesTitle>
+				<StatesSubtitle data-i18n='You_can_close_this_window'>You can close this window.</StatesSubtitle>
+			</States>
+		</div>
+	);
+}
+
+const body = renderToStaticMarkup(<LandingView />);
+
+// In browser mode (jsdom present), @rocket.chat/css-in-js inserts generated styles
+// into document.head via attachRules. Collect them now so we can inline them.
+const dynamicStyles = Array.from(jsdomWindow.document.head.querySelectorAll('style'))
+	.map((el) => el.textContent ?? '')
+	.join('\n');
+
+const fuselageCss = readFileSync(fuselageCssPath, 'utf-8');
+
+const html = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>html, body { margin: 0; padding: 0; width: 100%; height: 100%; }</style>
+    <style>${iconFontCss}</style>
+    <style>${fuselageCss}</style>
+    <style>${dynamicStyles}</style>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 100%; height: 100vh;" class="rcx-box--full">${body}</div>
+  </body>
+</html>`;
+
+writeFileSync(`${__dirname}/voice-call-popup.html`, html, 'utf-8');
+console.log('Generated dist/voice-call-popup.html');
diff --git a/packages/ui-voip/src/hooks/useMediaCallOpenRoomTracker.spec.tsx b/packages/ui-voip/src/hooks/useMediaCallOpenRoomTracker.spec.tsx
index 3fd13b28c919e..543d43e4dc345 100644
--- a/packages/ui-voip/src/hooks/useMediaCallOpenRoomTracker.spec.tsx
+++ b/packages/ui-voip/src/hooks/useMediaCallOpenRoomTracker.spec.tsx
@@ -12,8 +12,9 @@ const createWrapper = () => {
 	const wrapper = ({ children }: { children?: ReactNode }) => (
 		<MediaCallInstanceContext.Provider
 			value={{
-				inRoomView: false,
-				setInRoomView: () => undefined,
+				currentViews: [],
+				registerView: () => undefined,
+				unregisterView: () => undefined,
 				instance: undefined,
 				signalEmitter: new Emitter<Signals>(),
 				audioElement: undefined,
diff --git a/packages/ui-voip/src/providers/MediaCallInstanceProvider.tsx b/packages/ui-voip/src/providers/MediaCallInstanceProvider.tsx
index 8f4e1bc2a8f40..f1b13a5e6dc5a 100644
--- a/packages/ui-voip/src/providers/MediaCallInstanceProvider.tsx
+++ b/packages/ui-voip/src/providers/MediaCallInstanceProvider.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useAudioStream } from './useAudioStream';
+import useAvailableViewTracker from './useAvailableViewTracker';
 import { useGetAutocompleteOptions } from './useGetAutocompleteOptions';
 import { useMediaSessionInstance } from './useMediaSessionInstance';
 import { MediaCallInstanceContext } from '../context/MediaCallInstanceContext';
@@ -15,7 +16,7 @@ type MediaCallInstanceProviderProps = {
 
 const MediaCallInstanceProvider = ({ children }: MediaCallInstanceProviderProps) => {
 	const [openRoomId, setOpenRoomId] = useState<string | undefined>(undefined);
-	const [inRoomView, setInRoomView] = useState(false);
+	const { currentViews, registerView, unregisterView } = useAvailableViewTracker();
 	const user = useUser();
 	const instance = useMediaSessionInstance(user?._id);
 	const [signalEmitter] = useState(() => new Emitter<Signals>());
@@ -25,8 +26,18 @@ const MediaCallInstanceProvider = ({ children }: MediaCallInstanceProviderProps)
 	const getAutocompleteOptions = useGetAutocompleteOptions(instance);
 
 	const value = useMemo(
-		() => ({ instance, signalEmitter, audioElement, openRoomId, setOpenRoomId, getAutocompleteOptions, inRoomView, setInRoomView }),
-		[instance, signalEmitter, audioElement, openRoomId, setOpenRoomId, getAutocompleteOptions, inRoomView],
+		() => ({
+			instance,
+			signalEmitter,
+			audioElement,
+			openRoomId,
+			setOpenRoomId,
+			getAutocompleteOptions,
+			currentViews,
+			registerView,
+			unregisterView,
+		}),
+		[instance, signalEmitter, audioElement, openRoomId, setOpenRoomId, getAutocompleteOptions, currentViews, registerView, unregisterView],
 	);
 
 	return (
diff --git a/packages/ui-voip/src/providers/MediaCallProvider.tsx b/packages/ui-voip/src/providers/MediaCallProvider.tsx
index 3940882d7ef7a..66aa5489cac3c 100644
--- a/packages/ui-voip/src/providers/MediaCallProvider.tsx
+++ b/packages/ui-voip/src/providers/MediaCallProvider.tsx
@@ -1,7 +1,10 @@
+import { AnchorPortal } from '@rocket.chat/ui-client';
 import type { ReactNode } from 'react';
 
 import MediaCallInstanceProvider from './MediaCallInstanceProvider';
 import MediaCallViewProvider from './MediaCallViewProvider';
+import { MediaCallWidget } from '../views';
+import MediaCallPopout from '../views/MediaCallPopout';
 
 type MediaCallProviderProps = {
 	children: ReactNode;
@@ -10,7 +13,12 @@ type MediaCallProviderProps = {
 const MediaCallProvider = ({ children }: MediaCallProviderProps) => {
 	return (
 		<MediaCallInstanceProvider>
-			<MediaCallViewProvider />
+			<MediaCallViewProvider>
+				<AnchorPortal id='rcx-media-call-widget-portal'>
+					<MediaCallWidget />
+				</AnchorPortal>
+			</MediaCallViewProvider>
+			<MediaCallPopout />
 			{children}
 		</MediaCallInstanceProvider>
 	);
diff --git a/packages/ui-voip/src/providers/MediaCallViewProvider.tsx b/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
index bbf30e8a9fdea..917235745caa1 100644
--- a/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
+++ b/packages/ui-voip/src/providers/MediaCallViewProvider.tsx
@@ -1,4 +1,4 @@
-import { AnchorPortal, useGoToDirectMessage } from '@rocket.chat/ui-client';
+import { useGoToDirectMessage } from '@rocket.chat/ui-client';
 import type { Device } from '@rocket.chat/ui-contexts';
 import {
 	useSetOutputMediaDevice,
@@ -23,7 +23,6 @@ import MediaCallViewContext from '../context/MediaCallViewContext';
 import type { PeerInfo } from '../context/definitions';
 import { stopTracks, useDevicePermissionPrompt2, PermissionRequestCancelledCallRejectedError } from '../hooks/useDevicePermissionPrompt';
 import { isValidTone, useTonePlayer } from '../hooks/useTonePlayer';
-import { MediaCallWidget } from '../views';
 import TransferModal from '../views/TransferModal';
 
 type MediaCallViewProviderProps = {
@@ -36,7 +35,7 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 
 	const setModal = useSetModal();
 
-	const { instance, audioElement, openRoomId } = useMediaCallInstance();
+	const { instance, audioElement, openRoomId, registerView, unregisterView } = useMediaCallInstance();
 
 	const { sessionState, toggleWidget, selectPeer } = useMediaSession(instance);
 	const controls = useMediaSessionControls(instance);
@@ -209,6 +208,14 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 		controls.toggleScreenSharing();
 	};
 
+	const onOpenPopout = useCallback(() => {
+		registerView('popout');
+	}, [registerView]);
+
+	const onClosePopout = useCallback(() => {
+		unregisterView('popout');
+	}, [unregisterView]);
+
 	const streams = useScreenShareStreams(instance);
 
 	useWidgetExternalControlSignalListener(
@@ -242,6 +249,8 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 		onAccept,
 		onSelectPeer,
 		onToggleScreenSharing,
+		onOpenPopout,
+		onClosePopout,
 		streams,
 		widgetPositionTracker: {
 			onChangePosition,
@@ -249,14 +258,7 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 		},
 	};
 
-	return (
-		<MediaCallViewContext.Provider value={contextValue}>
-			<AnchorPortal id='rcx-media-call-widget-portal'>
-				<MediaCallWidget />
-			</AnchorPortal>
-			{children}
-		</MediaCallViewContext.Provider>
-	);
+	return <MediaCallViewContext.Provider value={contextValue}>{children}</MediaCallViewContext.Provider>;
 };
 
 export default MediaCallViewProvider;
diff --git a/packages/ui-voip/src/providers/MockedMediaCallProvider.tsx b/packages/ui-voip/src/providers/MockedMediaCallProvider.tsx
index ec13c9f75113b..9f232c65fbe15 100644
--- a/packages/ui-voip/src/providers/MockedMediaCallProvider.tsx
+++ b/packages/ui-voip/src/providers/MockedMediaCallProvider.tsx
@@ -4,7 +4,8 @@ import type { MediaSignalingSession } from '@rocket.chat/media-signaling';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
 
-import { MediaCallInstanceContext, type Signals } from '../context/MediaCallInstanceContext';
+import { MediaCallInstanceContext } from '../context/MediaCallInstanceContext';
+import type { AvailableViews, Signals } from '../context/MediaCallInstanceContext';
 import MediaCallViewContext from '../context/MediaCallViewContext';
 import type { State, PeerInfo, SessionState } from '../context/definitions';
 
@@ -158,6 +159,8 @@ const MockedMediaCallProvider = ({
 		onSelectPeer,
 		streams: {},
 		onToggleScreenSharing: () => undefined,
+		onOpenPopout: () => undefined,
+		onClosePopout: () => undefined,
 	};
 
 	const instanceContextValue = {
@@ -165,13 +168,14 @@ const MockedMediaCallProvider = ({
 			getState: () => null,
 			on: () => undefined,
 		} as unknown as MediaSignalingSession,
+		currentViews: ['widget'] as AvailableViews[],
+		registerView: (_view: AvailableViews) => undefined,
+		unregisterView: (_view: AvailableViews) => undefined,
 		signalEmitter: new Emitter<Signals>(),
 		audioElement: undefined,
 		openRoomId: undefined,
 		setOpenRoomId: () => undefined,
 		getAutocompleteOptions,
-		inRoomView: false,
-		setInRoomView: () => undefined,
 	};
 
 	return (
diff --git a/packages/ui-voip/src/providers/useAvailableViewTracker.ts b/packages/ui-voip/src/providers/useAvailableViewTracker.ts
new file mode 100644
index 0000000000000..cde6b2afd139d
--- /dev/null
+++ b/packages/ui-voip/src/providers/useAvailableViewTracker.ts
@@ -0,0 +1,85 @@
+import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
+
+import type { AvailableViews } from '../context/MediaCallInstanceContext';
+
+const filter = (view: AvailableViews, _index: number, array: AvailableViews[]) => {
+	switch (view) {
+		case 'widget':
+			return !array.includes('room');
+		case 'popout':
+		case 'room':
+		default:
+			return true;
+	}
+};
+
+const FLUSH_DELAY = 100;
+
+const useAvailableViewTracker = () => {
+	const viewsRef = useRef<Set<AvailableViews>>(new Set<AvailableViews>());
+	const filteredViewsRef = useRef<AvailableViews[]>([]);
+
+	const [registerView, unregisterView, subscribeToViews] = useMemo(() => {
+		let timeout: NodeJS.Timeout | undefined;
+
+		let sub: (() => void) | undefined = undefined;
+		const subscribeToViews = (onStoreChange: () => void) => {
+			sub = onStoreChange;
+			return () => {
+				sub = undefined;
+			};
+		};
+
+		// TODO maybe we don't need to debounce this
+		// It is used to prevent an useEffect from unregistering the view too early
+		// Specially when the view will be re-registered when the effect runs again
+		// meaning it should not have unregistered at all
+		const flushDebounced = () => {
+			if (timeout) {
+				clearTimeout(timeout);
+				timeout = undefined;
+			}
+
+			timeout = setTimeout(() => {
+				const viewsArray = [...viewsRef.current].filter(filter);
+				if (viewsArray.length === filteredViewsRef.current.length && viewsArray.every((view) => filteredViewsRef.current.includes(view))) {
+					return;
+				}
+				filteredViewsRef.current = viewsArray;
+				return sub?.();
+			}, FLUSH_DELAY);
+		};
+
+		const unregisterView = (view: AvailableViews) => {
+			if (!viewsRef.current.has(view)) {
+				return;
+			}
+			viewsRef.current.delete(view);
+			flushDebounced();
+		};
+
+		const registerView = (view: AvailableViews) => {
+			if (viewsRef.current.has(view)) {
+				return;
+			}
+			viewsRef.current.add(view);
+			flushDebounced();
+		};
+
+		return [registerView, unregisterView, subscribeToViews];
+	}, []);
+
+	const currentViews = useSyncExternalStore(
+		subscribeToViews,
+		useCallback(() => filteredViewsRef.current, []),
+		useCallback(() => filteredViewsRef.current, []),
+	);
+
+	return {
+		currentViews,
+		registerView,
+		unregisterView,
+	};
+};
+
+export default useAvailableViewTracker;
diff --git a/packages/ui-voip/src/providers/useMediaSessionInstance.ts b/packages/ui-voip/src/providers/useMediaSessionInstance.ts
index 701027dcd1f14..720003c8f2460 100644
--- a/packages/ui-voip/src/providers/useMediaSessionInstance.ts
+++ b/packages/ui-voip/src/providers/useMediaSessionInstance.ts
@@ -44,6 +44,8 @@ class MediaSessionStore extends Emitter<MediaSessionStoreEventMap> {
 
 	private logger = new MediaCallLogger();
 
+	private popoutWindow: Window | undefined;
+
 	constructor() {
 		super();
 	}
@@ -95,11 +97,12 @@ class MediaSessionStore extends Emitter<MediaSessionStoreEventMap> {
 
 	private async getDisplayMedia(constraints: MediaStreamConstraints) {
 		try {
-			if (!navigator?.mediaDevices?.getDisplayMedia) {
+			const actualWindow = this.popoutWindow || window;
+			if (!actualWindow.navigator?.mediaDevices?.getDisplayMedia) {
 				throw new Error('getDisplayMedia is not supported');
 			}
 
-			const stream = await navigator.mediaDevices.getDisplayMedia(constraints);
+			const stream = await actualWindow.navigator.mediaDevices.getDisplayMedia(constraints);
 			if (!stream) {
 				this.logger.log('MediaSessionStore - getDisplayMedia - no stream returned');
 				throw new Error('MediaSessionStore - getDisplayMedia - Failed to get display media');
@@ -196,10 +199,24 @@ class MediaSessionStore extends Emitter<MediaSessionStoreEventMap> {
 
 		void this.sessionInstance.processSignal(signal);
 	}
+
+	public setPopoutWindow(popoutWindow?: Window) {
+		if (!popoutWindow) {
+			this.popoutWindow = undefined;
+		}
+		this.popoutWindow = popoutWindow;
+	}
 }
 
 const mediaSession = new MediaSessionStore();
 
+export const useSetPopoutWindow = (popoutWindow?: Window) => {
+	useEffect(() => {
+		mediaSession.setPopoutWindow(popoutWindow);
+		return () => mediaSession.setPopoutWindow(undefined);
+	});
+};
+
 export const useMediaSessionInstance = (userId?: string) => {
 	const { t } = useTranslation();
 	const iceServers = useIceServers();
diff --git a/packages/ui-voip/src/views/MediaCallPopout.tsx b/packages/ui-voip/src/views/MediaCallPopout.tsx
new file mode 100644
index 0000000000000..ed221ebad7d06
--- /dev/null
+++ b/packages/ui-voip/src/views/MediaCallPopout.tsx
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useLayoutEffect } from 'react';
+
+import { useMediaCallInstance, usePeekMediaSessionState, usePeekMediaSessionCallId } from '../context';
+import MediaCallPopoutWindow from './MediaCallPopoutWindow';
+import { usePopoutWindow } from './usePopoutWindow';
+import { useSetPopoutWindow } from '../providers/useMediaSessionInstance';
+
+const MediaCallPopout = () => {
+	const { currentViews, unregisterView } = useMediaCallInstance();
+	const callState = usePeekMediaSessionState();
+	const callId = usePeekMediaSessionCallId();
+
+	const onClosePopout = useCallback(() => {
+		unregisterView('popout');
+	}, [unregisterView]);
+
+	const { container, closePopoutWindow, openPopoutWindow } = usePopoutWindow(onClosePopout);
+
+	useSetPopoutWindow(container?.ownerDocument.defaultView || undefined);
+
+	const onClosePopoutAndWindow = useCallback(() => {
+		onClosePopout();
+		closePopoutWindow();
+	}, [onClosePopout, closePopoutWindow]);
+
+	useLayoutEffect(() => {
+		if (callState !== 'ongoing') {
+			onClosePopout();
+		}
+	}, [callState, onClosePopout]);
+
+	useEffect(() => {
+		queueMicrotask(() => {
+			if (currentViews.includes('popout') && callId) {
+				void openPopoutWindow(callId);
+				return;
+			}
+			closePopoutWindow();
+		});
+	}, [currentViews, openPopoutWindow, closePopoutWindow, callId]);
+
+	if (!container) {
+		return null;
+	}
+
+	return <MediaCallPopoutWindow container={container} onClosePopout={onClosePopoutAndWindow} />;
+};
+
+export default MediaCallPopout;
diff --git a/packages/ui-voip/src/views/MediaCallPopoutView.tsx b/packages/ui-voip/src/views/MediaCallPopoutView.tsx
new file mode 100644
index 0000000000000..c03827dfe51ba
--- /dev/null
+++ b/packages/ui-voip/src/views/MediaCallPopoutView.tsx
@@ -0,0 +1,171 @@
+import { Box, ButtonGroup } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	ToggleButton,
+	Timer,
+	DevicePicker,
+	ActionButton,
+	CardListContainer,
+	CardListSection,
+	PeerCard,
+	StreamCard,
+	useShouldWrapCards,
+	ActionStrip,
+} from '../components';
+import { useMediaCallView } from '../context/MediaCallViewContext';
+import { usePlayMediaStream } from '../providers/usePlayMediaStream';
+
+type MediaCallPopoutViewProps = {
+	user: {
+		displayName: string;
+		avatarUrl: string;
+	};
+	onClickClosePopout: () => void;
+	onClickFullscreen: () => void;
+	fullscreen: boolean;
+};
+
+const MediaCallPopoutView = ({ user, onClickClosePopout, onClickFullscreen, fullscreen }: MediaCallPopoutViewProps) => {
+	const { t } = useTranslation();
+
+	const [focusedCard, setFocusedCard] = useState<'remote' | 'local' | null>('remote');
+	const {
+		sessionState,
+		onMute,
+		onHold,
+		onForward,
+		onEndCall,
+		onToggleScreenSharing,
+		streams: { remoteScreen, localScreen },
+	} = useMediaCallView();
+
+	const { muted, held, remoteMuted, remoteHeld, peerInfo, connectionState, startedAt } = sessionState;
+
+	const { ref, borderBoxSize } = useResizeObserver<HTMLDivElement>();
+
+	const shouldWrapCards = useShouldWrapCards(false, borderBoxSize?.blockSize || 0);
+
+	const connecting = connectionState === 'CONNECTING';
+	const reconnecting = connectionState === 'RECONNECTING';
+
+	const [remoteStreamRefCallback] = usePlayMediaStream(remoteScreen?.stream ?? null);
+	const [localStreamRefCallback] = usePlayMediaStream(localScreen?.stream ?? null);
+
+	const onClickFocusRemoteCard = () => {
+		setFocusedCard((prev) => (prev === 'remote' ? null : 'remote'));
+	};
+
+	const onClickFocusLocalCard = () => {
+		setFocusedCard((prev) => (prev === 'local' ? null : 'local'));
+	};
+
+	if (!peerInfo || 'number' in peerInfo) {
+		return null;
+	}
+
+	const remoteStreamCard = remoteScreen?.active ? (
+		<StreamCard onClickFocusStream={onClickFocusRemoteCard} focused={focusedCard === 'remote'}>
+			<video
+				preload='metadata'
+				style={{ objectFit: 'contain', height: '100%', width: '100%' }}
+				ref={remoteStreamRefCallback}
+				autoPlay={true}
+				muted={true}
+				playsInline={true}
+			>
+				<track kind='captions' />
+			</video>
+		</StreamCard>
+	) : null;
+
+	const localStreamCard = localScreen?.active ? (
+		<StreamCard
+			own
+			onClickFocusStream={onClickFocusLocalCard}
+			onClickStopSharing={onToggleScreenSharing}
+			focused={focusedCard === 'local'}
+			showStopSharingOnHover
+		>
+			<video
+				preload='metadata'
+				style={{ objectFit: 'contain', height: '100%', width: '100%' }}
+				ref={localStreamRefCallback}
+				autoPlay={true}
+				playsInline={true}
+				muted={true}
+			>
+				<track kind='captions' />
+			</video>
+		</StreamCard>
+	) : null;
+
+	const focusedCardElement = focusedCard === 'remote' ? remoteStreamCard : localStreamCard;
+
+	return (
+		<Box
+			is='main'
+			aria-label={t('Voice_call')}
+			id='outer-element'
+			w='full'
+			h='full'
+			bg='surface-tint'
+			overflow='hidden'
+			display='flex'
+			flexDirection='column'
+			ref={ref}
+		>
+			<CardListSection>
+				<CardListContainer focusedCard={focusedCard ? focusedCardElement : undefined} shouldWrapCards={shouldWrapCards}>
+					<PeerCard displayName={user.displayName} avatarUrl={user.avatarUrl} muted={muted} held={held} />
+					<PeerCard displayName={peerInfo.displayName} avatarUrl={peerInfo.avatarUrl} muted={remoteMuted} held={remoteHeld} />
+					{focusedCard !== 'remote' && remoteStreamCard}
+					{focusedCard !== 'local' && localStreamCard}
+				</CardListContainer>
+			</CardListSection>
+			<ActionStrip
+				leftSlot={
+					<Box color='default' alignContent='center' pis={16}>
+						<Timer startAt={startedAt} />
+					</Box>
+				}
+				rightSlot={
+					<ButtonGroup>
+						<ActionButton label={t('Return_to_main_window')} icon='arrow-from-cross-box' onClick={onClickClosePopout} />
+						<ToggleButton
+							label={t('Fullscreen')}
+							titles={[t('Fullscreen'), t('Exit_fullscreen')]}
+							icons={['arrow-expand', 'arrow-collapse']}
+							pressed={fullscreen}
+							onToggle={onClickFullscreen}
+							danger={false}
+						/>
+						<DevicePicker secondary />
+					</ButtonGroup>
+				}
+			>
+				<ToggleButton label={t('Mute')} icons={['mic', 'mic-off']} titles={[t('Mute'), t('Unmute')]} pressed={muted} onToggle={onMute} />
+				<ToggleButton
+					label={t('Hold')}
+					icons={['pause-shape-unfilled', 'pause-shape-unfilled']}
+					titles={[t('Hold'), t('Resume')]}
+					pressed={held}
+					onToggle={onHold}
+				/>
+				<ToggleButton
+					label={t('Share_screen')}
+					icons={['desktop-arrow-up', 'desktop-cross']}
+					titles={[t('Share_screen'), t('Stop_sharing_screen')]}
+					pressed={localScreen?.active ?? false}
+					onToggle={onToggleScreenSharing}
+				/>
+				<ActionButton disabled={connecting || reconnecting} label={t('Forward')} icon='arrow-forward' onClick={onForward} />
+				<ActionButton label={t('Voice_call__user__hangup', { user: peerInfo.displayName })} icon='phone-off' danger onClick={onEndCall} />
+			</ActionStrip>
+		</Box>
+	);
+};
+
+export default memo(MediaCallPopoutView);
diff --git a/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx b/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx
new file mode 100644
index 0000000000000..99fee03d46104
--- /dev/null
+++ b/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx
@@ -0,0 +1,77 @@
+import { Box, OwnerDocument as FuselageOwnerDocument } from '@rocket.chat/fuselage';
+import { OwnerDocument as StyledOwnerDocument } from '@rocket.chat/styled';
+import { ModalProvider, ModalRegion, TooltipProvider, useUserDisplayName } from '@rocket.chat/ui-client';
+import { useUser, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import { useCallback, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import MediaCallPopoutView from './MediaCallPopoutView';
+import type { PopoutContainer } from './usePopoutWindow';
+import MediaCallViewProvider from '../providers/MediaCallViewProvider';
+
+type MediaCallPopoutWindowProps = {
+	container: PopoutContainer;
+	onClosePopout: () => void;
+};
+const MediaCallPopoutWindow = ({ container, onClosePopout }: MediaCallPopoutWindowProps) => {
+	const [fullscreen, setFullscreen] = useState(false);
+	const [region] = useState(() => Symbol());
+
+	const user = useUser();
+	const displayName = useUserDisplayName({ name: user?.name, username: user?.username });
+	const getUserAvatarPath = useUserAvatarPath();
+	const ownUser = useMemo(() => {
+		return {
+			displayName: displayName || '',
+			avatarUrl: getUserAvatarPath({ userId: user?._id || '' }),
+		};
+	}, [displayName, getUserAvatarPath, user?._id]);
+
+	const { root, ownerDocument } = container;
+
+	const onClickFullscreen = useCallback(() => {
+		const requestFullScreen = async () => {
+			try {
+				if (!fullscreen) {
+					await ownerDocument.documentElement.requestFullscreen();
+					setFullscreen(true);
+				} else {
+					await ownerDocument.exitFullscreen();
+					setFullscreen(false);
+				}
+			} catch (error) {
+				console.error('Error requesting fullscreen', error);
+			}
+		};
+		void requestFullScreen();
+	}, [ownerDocument, fullscreen]);
+
+	const contextValue = useMemo(() => ({ document: ownerDocument }), [ownerDocument]);
+
+	return (
+		<ModalProvider region={region}>
+			<MediaCallViewProvider>
+				<FuselageOwnerDocument.Provider value={contextValue}>
+					<StyledOwnerDocument.Provider value={contextValue}>
+						<TooltipProvider ownerDocument={ownerDocument}>
+							{createPortal(
+								<Box w='full' h='full' display='flex' flexDirection='column' justifyContent='space-between'>
+									<MediaCallPopoutView
+										user={ownUser}
+										onClickClosePopout={onClosePopout}
+										onClickFullscreen={onClickFullscreen}
+										fullscreen={fullscreen}
+									/>
+									<ModalRegion />
+								</Box>,
+								root,
+							)}
+						</TooltipProvider>
+					</StyledOwnerDocument.Provider>
+				</FuselageOwnerDocument.Provider>
+			</MediaCallViewProvider>
+		</ModalProvider>
+	);
+};
+
+export default MediaCallPopoutWindow;
diff --git a/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx b/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx
index fdf221acd8e4e..0429312e03f6e 100644
--- a/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx
+++ b/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx
@@ -1,4 +1,4 @@
-import { Box, ButtonGroup } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,8 +16,9 @@ import {
 	ActionStrip,
 	ActionToggleChat,
 } from '../../components';
+import { useMediaCallInstance } from '../../context/MediaCallInstanceContext';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
-import useRoomView from '../../context/useRoomView';
+import useRegisterView from '../../context/useRegisterView';
 import { usePlayMediaStream } from '../../providers/usePlayMediaStream';
 
 type MediaCallRoomSectionProps = {
@@ -55,8 +56,13 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 		onForward,
 		onEndCall,
 		onToggleScreenSharing,
+		onOpenPopout,
+		onClosePopout,
 		streams: { remoteScreen, localScreen },
 	} = useMediaCallView();
+	const { currentViews } = useMediaCallInstance();
+
+	const isPopout = currentViews.includes('popout');
 
 	const { muted, held, remoteMuted, remoteHeld, peerInfo, connectionState, startedAt } = sessionState;
 
@@ -68,7 +74,7 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 	const [remoteStreamRefCallback] = usePlayMediaStream(remoteScreen?.stream ?? null);
 	const [localStreamRefCallback] = usePlayMediaStream(localScreen?.stream ?? null);
 
-	useRoomView();
+	useRegisterView('room');
 
 	const onClickFocusRemoteCard = () => {
 		setFocusedCard((prev) => (prev === 'remote' ? null : 'remote'));
@@ -84,7 +90,14 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 
 	const remoteStreamCard = remoteScreen?.active ? (
 		<StreamCard onClickFocusStream={onClickFocusRemoteCard} focused={focusedCard === 'remote'}>
-			<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={remoteStreamRefCallback}>
+			<video
+				preload='metadata'
+				style={{ objectFit: 'contain', height: '100%', width: '100%' }}
+				ref={remoteStreamRefCallback}
+				autoPlay={true}
+				muted={true}
+				playsInline={true}
+			>
 				<track kind='captions' />
 			</video>
 		</StreamCard>
@@ -98,7 +111,14 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 			focused={focusedCard === 'local'}
 			showStopSharingOnHover
 		>
-			<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={localStreamRefCallback}>
+			<video
+				preload='metadata'
+				style={{ objectFit: 'contain', height: '100%', width: '100%' }}
+				ref={localStreamRefCallback}
+				autoPlay={true}
+				playsInline={true}
+				muted={true}
+			>
 				<track kind='captions' />
 			</video>
 		</StreamCard>
@@ -114,15 +134,29 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 			overflow='hidden'
 			display='flex'
 			flexDirection='column'
+			is='section'
+			aria-label={t('Voice_call')}
 			{...getSplitStyles(showChat)}
 		>
 			<CardListSection>
-				<CardListContainer focusedCard={focusedCard ? focusedCardElement : undefined} shouldWrapCards={shouldWrapCards}>
-					<PeerCard displayName={user.displayName} avatarUrl={user.avatarUrl} muted={muted} held={held} />
-					<PeerCard displayName={peerInfo.displayName} avatarUrl={peerInfo.avatarUrl} muted={remoteMuted} held={remoteHeld} />
-					{focusedCard !== 'remote' && remoteStreamCard}
-					{focusedCard !== 'local' && localStreamCard}
-				</CardListContainer>
+				{isPopout && (
+					<Box mb={20} p={24} w='full' display='flex' flexDirection='column' justifyContent='space-between' alignItems='center'>
+						<Box is='h1' color='font-default' mbe={40}>
+							{t('Call_open_separate_window')}
+						</Box>
+						<Button onClick={onClosePopout} icon='arrow-from-cross-box' large>
+							{t('Show_call_here')}
+						</Button>
+					</Box>
+				)}
+				{!isPopout && (
+					<CardListContainer focusedCard={focusedCard ? focusedCardElement : undefined} shouldWrapCards={shouldWrapCards}>
+						<PeerCard displayName={user.displayName} avatarUrl={user.avatarUrl} muted={muted} held={held} />
+						<PeerCard displayName={peerInfo.displayName} avatarUrl={peerInfo.avatarUrl} muted={remoteMuted} held={remoteHeld} />
+						{focusedCard !== 'remote' && remoteStreamCard}
+						{focusedCard !== 'local' && localStreamCard}
+					</CardListContainer>
+				)}
 			</CardListSection>
 			<ActionStrip
 				leftSlot={
@@ -133,6 +167,14 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 				rightSlot={
 					<ButtonGroup>
 						<ActionToggleChat pressed={showChat} onClick={onToggleChat} />
+						<ToggleButton
+							label={t('Open_in_new_window')}
+							titles={[t('Open_in_new_window'), t('Return_to_main_window')]}
+							icons={['arrow-to-square-box', 'arrow-from-cross-box']}
+							pressed={isPopout}
+							onToggle={isPopout ? onClosePopout : onOpenPopout}
+							danger={false}
+						/>
 						<DevicePicker secondary />
 					</ButtonGroup>
 				}
diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
index c1048541e66da..ca4551c7c8bd8 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
@@ -1,15 +1,15 @@
 import { OngoingCall, NewCall, IncomingCall, OutgoingCall, IncomingCallTransfer, OutgoingCallTransfer } from '..';
 import OngoingCallWithScreen from './OngoingCallWithScreen';
-import { useMediaCallInstance } from '../../context/MediaCallInstanceContext';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
+import useRegisterView from '../../context/useRegisterView';
 
 const MediaCallWidget = () => {
-	const { inRoomView } = useMediaCallInstance();
+	const currentViews = useRegisterView('widget');
 	const {
 		sessionState: { state, hidden, transferredBy, peerInfo, supportedFeatures },
 	} = useMediaCallView();
 
-	if (hidden || inRoomView) {
+	if (hidden || !currentViews.includes('widget')) {
 		return null;
 	}
 
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
index 7c188b7c85f2a..e8a3aed87d14c 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
@@ -1,4 +1,4 @@
-import { Box, ButtonGroup } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -17,6 +17,7 @@ import {
 	CardWidgetContainer,
 	StreamCard,
 } from '../../components';
+import { useMediaCallInstance } from '../../context';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
 import { usePlayMediaStream } from '../../providers/usePlayMediaStream';
 
@@ -30,11 +31,15 @@ const OngoingCall = () => {
 		onForward,
 		onEndCall,
 		onClickDirectMessage,
+		onOpenPopout,
 		streams,
 		onToggleScreenSharing,
 		widgetPositionTracker,
+		onClosePopout,
 	} = useMediaCallView();
 	const { muted, held, remoteMuted, remoteHeld, peerInfo, connectionState, startedAt } = sessionState;
+	const { currentViews } = useMediaCallInstance();
+	const isPopout = currentViews.includes('popout');
 
 	const { localScreen, remoteScreen } = streams;
 
@@ -59,29 +64,56 @@ const OngoingCall = () => {
 				{onClickDirectMessage && (
 					<ActionButton tiny secondary={false} label={t('Direct_Message')} icon='balloon' onClick={onClickDirectMessage} />
 				)}
+
+				<ToggleButton
+					label={t('Open_in_new_window')}
+					titles={[t('Open_in_new_window'), t('Return_to_main_window')]}
+					icons={['arrow-to-square-box', 'arrow-from-cross-box']}
+					pressed={isPopout}
+					onToggle={isPopout ? onClosePopout : onOpenPopout}
+					danger={false}
+					secondary={false}
+					tiny
+				/>
+
 				<DevicePicker />
 			</WidgetHeader>
 			<WidgetContent>
 				<CardWidgetContainer>
 					<PeerInfo {...peerInfo} slots={remoteSlots} remoteMuted={remoteMuted} />
 
-					{remoteScreen?.active && (
-						<StreamCard autoHeight maxHeight={120} onClickOpenInRoom={onClickDirectMessage}>
-							<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={remoteStreamRefCallback}>
-								<track kind='captions' />
-							</video>
-						</StreamCard>
-					)}
-					{localScreen?.active && (
-						<Box display='flex' flexDirection='column'>
-							<StreamCard own autoHeight maxHeight={120} onClickStopSharing={onToggleScreenSharing}>
-								<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={localStreamRefCallback}>
-									<track kind='captions' />
-								</video>
-							</StreamCard>
-							<WidgetInfo slots={[{ text: t('You_are_sharing_your_screen'), type: 'warning' }]} variant='card-content' />
+					{isPopout && (
+						<Box display='flex' flexDirection='column' gap={4}>
+							<Button onClick={onClosePopout} icon='arrow-from-cross-box' medium w='full'>
+								{t('Show_call_here')}
+							</Button>
+							{localScreen?.active && (
+								<WidgetInfo slots={[{ text: t('You_are_sharing_your_screen'), type: 'warning' }]} variant='card-content' />
+							)}
 						</Box>
 					)}
+
+					{!isPopout && (
+						<>
+							{remoteScreen?.active && (
+								<StreamCard autoHeight maxHeight={120} onClickOpenInRoom={onClickDirectMessage}>
+									<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={remoteStreamRefCallback}>
+										<track kind='captions' />
+									</video>
+								</StreamCard>
+							)}
+							{localScreen?.active && (
+								<Box display='flex' flexDirection='column'>
+									<StreamCard own autoHeight maxHeight={120} onClickStopSharing={onToggleScreenSharing}>
+										<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={localStreamRefCallback}>
+											<track kind='captions' />
+										</video>
+									</StreamCard>
+									<WidgetInfo slots={[{ text: t('You_are_sharing_your_screen'), type: 'warning' }]} variant='card-content' />
+								</Box>
+							)}
+						</>
+					)}
 				</CardWidgetContainer>
 			</WidgetContent>
 			<WidgetInfo slots={slots} />
diff --git a/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap b/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap
index d5423e552f3e5..ec457f006cea5 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap
+++ b/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap
@@ -7,9 +7,10 @@ exports[`renders IncomingCall without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -25,6 +26,12 @@ exports[`renders IncomingCall without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -150,7 +157,7 @@ exports[`renders IncomingCall without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
@@ -166,9 +173,10 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -184,6 +192,12 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -319,7 +333,7 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
@@ -362,9 +376,10 @@ exports[`renders NewCall without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -380,6 +395,12 @@ exports[`renders NewCall without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -544,7 +565,7 @@ exports[`renders NewCall without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
@@ -560,9 +581,10 @@ exports[`renders OngoingCall without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -578,6 +600,12 @@ exports[`renders OngoingCall without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -594,6 +622,20 @@ exports[`renders OngoingCall without crashing 1`] = `
         <div
           class="rcx-box rcx-box--full rcx-css-qwfmt5"
         >
+          <button
+            aria-label="Open_in_new_window"
+            class="rcx-box rcx-box--full rcx-button--tiny-square rcx-button--square rcx-button--icon rcx-button"
+            label="Open_in_new_window"
+            title="Open_in_new_window"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-arrow-to-square-box rcx-icon rcx-css-xb06ut"
+            >
+              
+            </i>
+          </button>
           <button
             aria-label="customize"
             class="rcx-box rcx-box--full rcx-button--tiny-square rcx-button--square rcx-button--icon rcx-button rcx-css-1wk08i8"
@@ -750,7 +792,7 @@ exports[`renders OngoingCall without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
@@ -766,9 +808,10 @@ exports[`renders OutgoingCall without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -784,6 +827,12 @@ exports[`renders OutgoingCall without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -892,7 +941,7 @@ exports[`renders OutgoingCall without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
@@ -908,9 +957,10 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
       data-focus-scope-start="true"
       hidden=""
     />
-    <article
-      aria-labelledby="rcx-media-call-widget-title rcx-media-call-widget-caller-info"
-      class="rcx-css-155a7q5"
+    <div
+      aria-labelledby="rcx-media-call-widget-title-prefix rcx-media-call-widget-title rcx-media-call-widget-caller-info"
+      class="rcx-css-1rau14i"
+      role="dialog"
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
@@ -926,6 +976,12 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
       <header
         class="rcx-box rcx-box--full rcx-css-4vvilp"
       >
+        <div
+          id="rcx-media-call-widget-title-prefix"
+          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        >
+          Voice_call
+        </div>
         <h3
           class="rcx-box rcx-box--full rcx-css-u3j01s"
           id="rcx-media-call-widget-title"
@@ -1044,7 +1100,7 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
           </button>
         </div>
       </footer>
-    </article>
+    </div>
     <span
       data-focus-scope-end="true"
       hidden=""
diff --git a/packages/ui-voip/src/views/usePopoutWindow.ts b/packages/ui-voip/src/views/usePopoutWindow.ts
new file mode 100644
index 0000000000000..682ec32fd5177
--- /dev/null
+++ b/packages/ui-voip/src/views/usePopoutWindow.ts
@@ -0,0 +1,182 @@
+import { useThemeMode } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { TFunction } from 'i18next';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const createRootElement = (externalWindow: Window) => {
+	const landingPageRoot = externalWindow.document.querySelector('#root');
+	if (!landingPageRoot) {
+		throw new Error('usePopoutWindow - createRootElement - landingPageRoot not found');
+	}
+
+	const newRoot = externalWindow.document.createElement('div');
+	newRoot.style.width = '100%';
+	newRoot.style.height = '100%';
+
+	landingPageRoot.appendChild(newRoot);
+
+	return newRoot;
+};
+
+const replaceWithTranslationString = (t: TFunction, externalDocument: Document) => {
+	externalDocument.querySelectorAll('[data-i18n]').forEach((el) => {
+		el.textContent = t(el.getAttribute('data-i18n') as string);
+	});
+};
+
+const changeTheme = (ownerDocument: Document, theme?: string) => {
+	if (theme) {
+		ownerDocument.documentElement.setAttribute('data-color-scheme', theme);
+	} else {
+		ownerDocument.documentElement.removeAttribute('data-color-scheme');
+	}
+};
+
+const openExternalWindow = async (callId: string, theme: string) => {
+	const externalWindow = window.open('/voice-call-popup.html', callId, 'width=800,height=500,popup');
+
+	if (!externalWindow) {
+		throw new Error('No window was opened');
+	}
+
+	changeTheme(externalWindow.document, theme);
+
+	const root = await new Promise<HTMLDivElement>((resolve, reject) => {
+		let createRootTimeout: NodeJS.Timeout | null = null;
+		let attempt = 1;
+		let created = false;
+		const attemptCreateRoot = () => {
+			// In case `onload` runs after the root has been created already
+			if (created === true) {
+				return;
+			}
+
+			if (createRootTimeout) {
+				clearTimeout(createRootTimeout);
+			}
+
+			try {
+				const root = createRootElement(externalWindow);
+				created = true;
+				resolve(root);
+			} catch (error) {
+				// arround ~ 5 seconds total timeout
+				if (attempt > 9) {
+					reject(error as Error);
+					externalWindow.close();
+					return;
+				}
+				attempt += 1;
+				createRootTimeout = setTimeout(attemptCreateRoot, attempt * 100);
+			}
+		};
+
+		// DOMContentLoaded nor readyState can be used because they have already fired
+		// onload takes longer to fire but could also have already been fired
+		externalWindow.onload = () => {
+			attemptCreateRoot();
+		};
+
+		// If onload takes too long to start it could mean it has already fired
+		// So we start polling for the element. It could still not have been fired.
+		setTimeout(() => {
+			attemptCreateRoot();
+		}, 500);
+	});
+
+	return { root, externalWindow };
+};
+
+export type PopoutContainer = { root: HTMLDivElement; ownerDocument: Document };
+type PopoutRef = { root: HTMLDivElement; externalWindow: Window; closing: boolean };
+type OpenPopoutWindow = (callId: string) => Promise<void>;
+type ClosePopoutWindow = () => void;
+
+type UsePopoutWindowReturn = {
+	container: PopoutContainer | null;
+	openPopoutWindow: OpenPopoutWindow;
+	closePopoutWindow: ClosePopoutWindow;
+};
+
+export const usePopoutWindow = (onBeforeUnload: () => void): UsePopoutWindowReturn => {
+	const popoutRef = useRef<PopoutRef | null>(null);
+	const [container, setContainer] = useState<PopoutContainer | null>(null);
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const [, , theme] = useThemeMode();
+
+	const openPopoutWindow = useCallback(
+		async (callId: string) => {
+			if (!!popoutRef.current && popoutRef.current.externalWindow?.closed === false) {
+				return;
+			}
+
+			try {
+				const result = await openExternalWindow(callId, theme);
+				if (!result) {
+					onBeforeUnload();
+				}
+				const { root, externalWindow } = result;
+				popoutRef.current = { root, externalWindow, closing: false };
+				setContainer({ root, ownerDocument: externalWindow.document });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: t('Failed_to_open_call_window') });
+				console.error('Failed to open popout', error);
+				onBeforeUnload();
+			}
+		},
+		[onBeforeUnload, theme, dispatchToastMessage, t],
+	);
+
+	const closePopoutWindow = useCallback(() => {
+		if (popoutRef.current !== null && popoutRef.current?.externalWindow?.closed !== true && !popoutRef.current.closing) {
+			popoutRef.current.externalWindow.close();
+			popoutRef.current = null;
+			setContainer(null);
+		}
+	}, []);
+
+	useEffect(() => {
+		const externalWindow = popoutRef.current?.externalWindow;
+		if (!externalWindow || !container) return;
+
+		const handleBeforeUnload = () => {
+			if (popoutRef.current) {
+				popoutRef.current.closing = true;
+			}
+			onBeforeUnload();
+			popoutRef.current = null;
+			setContainer(null);
+		};
+
+		externalWindow.addEventListener('beforeunload', handleBeforeUnload);
+		window.addEventListener('beforeunload', closePopoutWindow);
+
+		return () => {
+			externalWindow.removeEventListener('beforeunload', handleBeforeUnload);
+			window.removeEventListener('beforeunload', closePopoutWindow);
+		};
+	}, [container, onBeforeUnload, closePopoutWindow]);
+
+	useEffect(() => {
+		if (!container) {
+			return;
+		}
+		replaceWithTranslationString(t, container.ownerDocument);
+	}, [container, t]);
+
+	useEffect(() => {
+		if (!container) {
+			return;
+		}
+		changeTheme(container.ownerDocument, theme);
+	}, [container, theme]);
+
+	return {
+		container,
+		openPopoutWindow,
+		closePopoutWindow,
+	};
+};
diff --git a/yarn.lock b/yarn.lock
index 116ec22ea0813..8d0824d5d3094 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11163,6 +11163,7 @@ __metadata:
     "@testing-library/user-event": "npm:~14.6.1"
     "@types/jest": "npm:~30.0.0"
     "@types/jest-axe": "npm:~3.5.9"
+    "@types/node": "npm:~22.19.17"
     "@types/react": "npm:~18.3.28"
     "@types/react-dom": "npm:~18.3.7"
     date-fns: "npm:~4.1.0"
@@ -11170,6 +11171,7 @@ __metadata:
     i18next: "npm:~23.4.9"
     jest: "npm:~30.2.0"
     jest-axe: "npm:~10.0.0"
+    jsdom: "npm:^26.1.0"
     react: "npm:~18.3.1"
     react-dom: "npm:~18.3.1"
     react-i18next: "npm:~13.2.2"