diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
index e93467724..2cc87f2fe 100644
--- a/src/lib/components/calling/CallScreen.svelte
+++ b/src/lib/components/calling/CallScreen.svelte
@@ -13,11 +13,24 @@
     import type { Chat } from "$lib/types"
     import VolumeMixer from "./VolumeMixer.svelte"
     import { createEventDispatcher, onDestroy, onMount } from "svelte"
-    import { callInProgress, callScreenVisible, callTimeout, makeCallSound, TIME_TO_SHOW_CONNECTING, TIME_TO_SHOW_END_CALL_FEEDBACK, timeCallStarted, usersAcceptedTheCall, usersDeniedTheCall, VoiceRTCInstance } from "$lib/media/Voice"
+    import {
+        callInProgress,
+        callScreenVisible,
+        callTimeout,
+        makeCallSound,
+        showCallPopUp,
+        TIME_TO_SHOW_CONNECTING,
+        TIME_TO_SHOW_END_CALL_FEEDBACK,
+        timeCallStarted,
+        usersAcceptedTheCall,
+        usersDeniedTheCall,
+        VoiceRTCInstance,
+    } from "$lib/media/Voice"
     import { log } from "$lib/utils/Logger"
     import { playSound, Sounds } from "../utils/SoundHandler"
     import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
     import { debounce } from "$lib/utils/Functions"
+    import LiveLabel from "./LiveLabel.svelte"
 
     const MIN_USER_SIZE = 250
     export let expanded: boolean = false
@@ -196,6 +209,7 @@
 
     onMount(async () => {
         callScreenVisible.set(true)
+        showCallPopUp.set(false)
         if ($makeCallSound) {
             stopMakeCallSound()
         }
@@ -269,6 +283,12 @@
         if (get(Store.state.activeCall) === null && get(Store.state.devices.screenShare) === true) {
             Store.state.devices.screenShare.set(false)
         }
+
+        if ($callInProgress !== null) {
+            showCallPopUp.set(true)
+        } else {
+            showCallPopUp.set(false)
+        }
     })
 
     function updateUserListSplit() {
@@ -494,12 +514,7 @@
                                     <div class="user-name">
                                         {$userCache[user].name}
                                     </div>
-                                    {#if $remoteStreams[user].user.screenShareEnabled}
-                                        <div class="live-label">
-                                            <span class="red-dot"></span>
-                                            <span>{$_("settings.calling.live")}</span>
-                                        </div>
-                                    {/if}
+                                    <LiveLabel screenShareEnabled={$remoteStreams[user].user.screenShareEnabled} />
                                     {#if !$remoteStreams[user].user.audioEnabled}
                                         <div class="mute-status">
                                             <Icon icon={Shape.MicrophoneSlash}></Icon>
@@ -813,28 +828,6 @@
             z-index: 1;
         }
 
-        .live-label {
-            position: absolute;
-            top: 8px;
-            left: 12px;
-            display: inline-flex;
-            align-items: center;
-            background-color: rgba(0, 0, 0, 0.6);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 8px;
-            font-size: 14px;
-            z-index: 1;
-        }
-
-        .red-dot {
-            width: 6px;
-            height: 6px;
-            background-color: red;
-            border-radius: 50%;
-            margin-right: 8px;
-        }
-
         .mute-status {
             position: absolute;
             display: flex;
diff --git a/src/lib/components/calling/LiveLabel.svelte b/src/lib/components/calling/LiveLabel.svelte
new file mode 100644
index 000000000..2ea0f3d91
--- /dev/null
+++ b/src/lib/components/calling/LiveLabel.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { _ } from "svelte-i18n"
+
+    export let screenShareEnabled = false
+</script>
+
+{#if screenShareEnabled}
+    <div class="live-label">
+        <span class="red-dot"></span>
+        <span>{$_("settings.calling.live")}</span>
+    </div>
+{/if}
+
+<style>
+    .live-label {
+        position: absolute;
+        top: 8px;
+        left: 12px;
+        display: inline-flex;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 8px;
+        font-size: 14px;
+        z-index: 1;
+    }
+
+    .red-dot {
+        width: 6px;
+        height: 6px;
+        background-color: red;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+</style>
diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 00af59c5c..ca2f6fcbd 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -1,54 +1,92 @@
 <script lang="ts">
-    import { VoiceRTCInstance } from "$lib/media/Voice"
+    import { showCallPopUp, usersDidInActiveCall } from "$lib/media/Voice"
     import { Store } from "$lib/state/Store"
     import { onMount } from "svelte"
     import { page } from "$app/stores"
-    import { Route } from "$lib/enums"
+    import { Shape } from "$lib/enums"
     import { get } from "svelte/store"
     import Participant from "./Participant.svelte"
     import { UIStore } from "$lib/state/ui"
     import { log } from "$lib/utils/Logger"
+    import Icon from "$lib/elements/Icon.svelte"
+    import { _ } from "svelte-i18n"
+    import LiveLabel from "./LiveLabel.svelte"
 
-    export let show: boolean = false
     let previewVideo: HTMLDivElement
-    let remoteVideoElement: HTMLVideoElement
-
-    Store.state.activeChat.subscribe(async activeChat => {
-        if (activeChat.id !== VoiceRTCInstance.channel && get(Store.state.activeCall)) {
-            show = true
-            if (VoiceRTCInstance.remoteVideoElement) {
-                remoteVideoElement.srcObject = VoiceRTCInstance.activeCall?.remoteStream!
-                remoteVideoElement.play()
+    $: remoteStreams = Store.state.activeCallMeta
+    $: gridTemplateColumns = `repeat(${Math.min(filteredUsers.length, 3)}, 1fr)`
+
+    $: chat = get(Store.state.activeCall)?.chat
+    let ownUserKey = get(Store.state.user).key
+
+    function sortUsers(users: string[]) {
+        return users.sort((a, b) => {
+            const userA = $userCache[a]
+            const userB = $userCache[b]
+            if (userA.media.is_playing_audio && !userB.media.is_playing_audio) return -1
+            if (!userA.media.is_playing_audio && userB.media.is_playing_audio) return 1
+            return 0
+        })
+    }
+
+    $: filteredUsers = sortUsers($usersDidInActiveCall.filter(user => $userCache[user] && $userCache[user].key !== ownUserKey && $remoteStreams[user]) || [])
+    let lastSortedUsers: string[] = []
+
+    $: {
+        if ($usersDidInActiveCall.length > 1) {
+            const usersPlayingAudio = filteredUsers.filter(user => $userCache[user].media.is_playing_audio)
+            if (usersPlayingAudio.length > 0 && !arraysEqual(usersPlayingAudio, lastSortedUsers)) {
+                filteredUsers = sortUsers($usersDidInActiveCall)
+                usersDidInActiveCall.set(filteredUsers)
+                lastSortedUsers = [...usersPlayingAudio]
             }
         }
-    })
+    }
 
-    $: chat = get(Store.state.activeCall)?.chat
+    function arraysEqual(a: any[], b: any[]) {
+        if (a === b) return true
+        if (a == null || b == null) return false
+        if (a.length !== b.length) return false
+
+        for (let i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i]) return false
+        }
+        return true
+    }
 
     Store.state.activeCall.subscribe(async activeCall => {
         log.debug(`VideoPreview: Page: ${$page.route.id}. activeCall: ${activeCall}`)
-        if ($page.route.id !== Route.Chat && activeCall != null) {
-            show = true
-            remoteVideoElement.srcObject = VoiceRTCInstance.activeCall?.remoteStream!
-            remoteVideoElement.play()
-        } else if (!activeCall && remoteVideoElement) {
-            show = false
-            remoteVideoElement.pause()
-            remoteVideoElement.srcObject = null
-        } else if ($page.route.id === Route.Chat && get(Store.state.activeChat).id === VoiceRTCInstance.channel) {
-            show = false
-            remoteVideoElement.pause()
-            remoteVideoElement.srcObject = null
+        if (activeCall) {
+            chat = activeCall.chat
         }
-        otherUserSettingsInCall = VoiceRTCInstance.remoteVoiceUser
-        chat = activeCall?.chat
     })
 
-    $: otherUserSettingsInCall = VoiceRTCInstance.remoteVoiceUser
-    $: ownUser = get(Store.state.user)
     $: chats = UIStore.state.chats
     $: userCache = Store.getUsersLookup($chats.map(c => c.users).flat())
 
+    function attachStream(node: HTMLMediaElement, user: string) {
+        const stream = $remoteStreams[user]?.stream
+
+        if (stream) {
+            node.srcObject = stream
+            stream.onremovetrack = () => {
+                log.dev("Stream removed: ", user)
+            }
+        }
+
+        return {
+            update(newUser: string) {
+                const newStream = $remoteStreams[newUser]?.stream
+                if (newStream && node.srcObject !== newStream) {
+                    node.srcObject = newStream
+                }
+            },
+            destroy() {
+                node.srcObject = null
+            },
+        }
+    }
+
     onMount(() => {
         const video = previewVideo
 
@@ -107,22 +145,55 @@
     })
 </script>
 
-<div id="video-preview" class={show ? "video-preview" : "hidden"}>
+<div id="video-preview" class={$showCallPopUp ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
-        <video id="remote-user-float-video" bind:this={remoteVideoElement} width={otherUserSettingsInCall?.videoEnabled ? 400 : 0} height={otherUserSettingsInCall?.videoEnabled ? 400 : 0} autoplay>
-            <track kind="captions" src="" />
-        </video>
-        {#if !otherUserSettingsInCall?.videoEnabled && chat !== undefined}
-            {#each chat.users as user}
-                {#if user !== ownUser.key}
-                    <Participant
-                        participant={$userCache[user]}
-                        hasVideo={$userCache[user].media.is_streaming_video}
-                        isMuted={$userCache[user].media.is_muted}
-                        isDeafened={$userCache[user].media.is_deafened}
-                        isTalking={$userCache[user].media.is_playing_audio} />
-                {/if}
-            {/each}
+        <div class="users-in-call">
+            <Icon icon={Shape.Users}></Icon>
+            {filteredUsers.length}
+        </div>
+        {#if chat !== undefined && get(Store.state.activeCall) !== null && filteredUsers.length > 0}
+            <div class="video-grid" style="grid-template-columns: {gridTemplateColumns};">
+                {#each filteredUsers.slice(0, 3) as user}
+                    {#if $remoteStreams[user]}
+                        <div
+                            class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}"
+                            style={!$remoteStreams[user].user.videoEnabled && !$remoteStreams[user].user.screenShareEnabled ? "display: none" : ""}
+                            role="none">
+                            <video
+                                data-cy="remote-user-video"
+                                id="remote-user-video-{user}"
+                                class={$remoteStreams[user].user.videoEnabled || $remoteStreams[user].user.screenShareEnabled ? "" : "disabled"}
+                                autoplay
+                                muted={false}
+                                use:attachStream={user}>
+                                <track kind="captions" src="" />
+                            </video>
+                            <div class="user-name">{$userCache[user].name}</div>
+                            <LiveLabel screenShareEnabled={$remoteStreams[user].user.screenShareEnabled} />
+                            {#if !$remoteStreams[user].user.audioEnabled}
+                                <div class="mute-status">
+                                    <Icon icon={Shape.MicrophoneSlash}></Icon>
+                                </div>
+                            {/if}
+                        </div>
+
+                        {#if !$remoteStreams[user].stream || (!$remoteStreams[user].user.videoEnabled && !$remoteStreams[user].user.screenShareEnabled)}
+                            <Participant
+                                participant={$userCache[user]}
+                                hasVideo={$userCache[user].media.is_streaming_video}
+                                isMuted={$remoteStreams[user] && !$remoteStreams[user].user.audioEnabled}
+                                isDeafened={$remoteStreams[user] && $remoteStreams[user].user.isDeafened}
+                                isTalking={$userCache[user].media.is_playing_audio}
+                                on:click={_ => {}} />
+                        {/if}
+                    {/if}
+                {/each}
+            </div>
+        {:else if chat !== undefined && get(Store.state.activeCall) !== null && filteredUsers.length === 0}
+            <div class="loading-when-no-answer">
+                <div class="spinner"></div>
+                <p>{$_("settings.calling.waitingOthersToJoin")}</p>
+            </div>
         {/if}
     </div>
 </div>
@@ -138,6 +209,7 @@
         overflow: hidden;
         pointer-events: none;
     }
+
     #video-preview {
         position: fixed;
         top: 0;
@@ -156,7 +228,7 @@
             height: 225px;
             background: var(--background-alt);
             border-radius: var(--border-radius);
-            border: var(--border-width) solid var(--border-color);
+            border: var(--border-width) solid var(--color-muted);
             position: absolute;
             top: 0;
             right: 0;
@@ -164,10 +236,127 @@
             pointer-events: all;
             transition: transform 0.3s ease;
             margin: var(--padding);
-            display: inline-flex;
+            display: flex;
+            flex-direction: column;
             justify-content: center;
+            align-items: center;
+            padding: var(--padding);
+            box-sizing: border-box;
             overflow: hidden;
             align-items: center;
+
+            .users-in-call {
+                position: absolute;
+                display: flex;
+                gap: 4px;
+                bottom: 8px;
+                right: 12px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(14, 13, 13, 0.5);
+                color: white;
+                padding: 4px 8px;
+                border-radius: 8px;
+                font-size: 14px;
+                z-index: 1;
+            }
+
+            .video-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                justify-content: center;
+                align-items: center;
+                justify-items: center;
+                gap: 10px;
+                width: 100%;
+                height: 100%;
+            }
+
+            .video-container {
+                position: relative;
+                display: inline-block;
+                border-radius: 12px;
+                overflow: hidden;
+                border: 2px solid var(--color-muted);
+                cursor: pointer;
+                &.talking {
+                    border: 2px solid var(--success-color);
+                }
+                width: 100%;
+                height: 100%;
+                aspect-ratio: 4 / 3;
+
+                .user-name {
+                    position: absolute;
+                    bottom: 8px;
+                    left: 12px;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    color: white;
+                    padding: 4px 8px;
+                    border-radius: 8px;
+                    font-size: 14px;
+                    z-index: 1;
+                }
+
+                .mute-status {
+                    position: absolute;
+                    display: flex;
+                    bottom: 8px;
+                    right: 12px;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    color: white;
+                    padding: 4px 8px;
+                    border-radius: 8px;
+                    font-size: 14px;
+                    z-index: 1;
+                }
+
+                video {
+                    object-fit: cover;
+                    border-radius: 12px;
+                    background-color: var(--black);
+                    width: 100%;
+                    height: 100%;
+
+                    &.disabled {
+                        width: 0;
+                        height: 0;
+                    }
+                }
+            }
         }
     }
+
+    .spinner {
+        width: 48px;
+        height: 48px;
+        border: 8px solid #f3f3f3;
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loading-when-no-answer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        margin: 32px;
+    }
+
+    .loading-when-no-answer p {
+        margin-top: 16px;
+    }
 </style>
diff --git a/src/lib/lang/en.json b/src/lib/lang/en.json
index ce8c4f671..f99a4c769 100644
--- a/src/lib/lang/en.json
+++ b/src/lib/lang/en.json
@@ -379,6 +379,7 @@
             "hasCancelled": "Has cancelled the call.",
             "disconnecting": "Disconnecting...",
             "userInviteToAGroupCall": "{user} has started a group call in {group}",
+            "waitingOthersToJoin": "Waiting for others to join...",
             "noAnswer": "No answer, leaving the call...",
             "everybodyDeniedTheCall": "Everybody Denied the call. Disconnecting...",
             "acceptedCall": "Joined, loading...",
diff --git a/src/lib/media/Voice.ts b/src/lib/media/Voice.ts
index 600285271..0a1bd7c64 100644
--- a/src/lib/media/Voice.ts
+++ b/src/lib/media/Voice.ts
@@ -28,6 +28,8 @@ export const timeCallStarted: Writable<Date | null> = writable(null)
 export const callInProgress: Writable<string | null> = writable(null)
 export const makeCallSound = writable<SoundHandler | undefined>(undefined)
 export const callScreenVisible = writable(false)
+export const usersDidInActiveCall = writable<string[]>([])
+export const showCallPopUp = writable(false)
 
 const relaysToTest = [
     "wss://nostr-pub.wellorder.net",
@@ -158,6 +160,7 @@ async function handleStreamMeta(did: string, stream: MediaStream): Promise<Strea
             }, 200)
         },
     }
+
     const voiceDetector = vad(audioContext, stream, options)
     voiceDetector.connect()
 
@@ -239,6 +242,9 @@ export class CallRoom {
         })
         let [did_ch, did_rv] = room.makeAction<string>("did_sync")
         did_rv((did, peer) => {
+            if (!get(usersDidInActiveCall).includes(did)) {
+                usersDidInActiveCall.update(u => [...u, did])
+            }
             this.participants[did] = new Participant(did, peer)
         })
         room.onPeerJoin(async peer => {
@@ -253,13 +259,14 @@ export class CallRoom {
                 this.start = new Date()
             }
         })
-        room.onPeerTrack((stream, peer, _meta) => {
+        room.onPeerTrack((_, peer, _meta) => {
             log.debug(`Receiving track from ${peer}`)
         })
         room.onPeerLeave(peer => {
             log.debug(`Peer ${peer} left the room`)
             let participant = Object.entries(this.participants).find(p => p[1].remotePeerId === peer)
             if (participant) {
+                usersDidInActiveCall.update(u => u.filter(did => did !== participant[0]))
                 VoiceRTCInstance.remoteVideoCreator.delete(participant[0])
                 delete this.participants[participant[0]]
             }
@@ -276,8 +283,6 @@ export class CallRoom {
                 participant[1].handleRemoteStream(stream)
             }
         })
-        room.onPeerTrack((stream, peer, _meta) => {})
-        // room.onPeerTrack((stream, peer, meta) => {})
     }
 
     toggleStreams(state: boolean, type: ToggleType) {
@@ -809,9 +814,9 @@ export class VoiceRTC {
     }
 
     async leaveCall(sendEndCallMessage = false) {
-        callScreenVisible.set(false)
         callInProgress.set(null)
         timeCallStarted.set(null)
+        showCallPopUp.set(false)
         usersDeniedTheCall.set([])
         callTimeout.set(false)
         connectionOpened.set(false)
@@ -834,6 +839,7 @@ export class VoiceRTC {
         if (get(Store.state.activeCall)) {
             Store.endCall()
         }
+        callScreenVisible.set(false)
 
         if (get(Store.state.pendingCall)) {
             Store.denyCall()
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 652eb5af8..327a34af6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -290,7 +290,7 @@
 
         <Toasts />
         <IncomingCall />
-        <!-- <VideoPreview /> This needs a rework as atm it only supports one to one calling. Maybe add ability to select source? -->
+        <VideoPreview />
         <GamepadListener />
         <Market on:close={() => UIStore.toggleMarket()} />
         <InstallBanner />