diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 3fd3347ecf1..c08e7f371a9 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -23,6 +23,7 @@
 				<TopBar v-if="isInCall" is-in-call is-sidebar />
 				<CallView v-if="isInCall" :token="token" is-sidebar />
 				<CallButton v-if="!isInCall" class="call-button" />
+				<CallFailedDialog v-if="connectionFailed" :token="token" />
 				<ChatView is-sidebar />
 				<PollViewer />
 				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
@@ -39,6 +40,7 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
+import CallFailedDialog from './components/CallView/CallFailedDialog.vue'
 import CallView from './components/CallView/CallView.vue'
 import ChatView from './components/ChatView.vue'
 import MediaSettings from './components/MediaSettings/MediaSettings.vue'
@@ -63,6 +65,7 @@ export default {
 
 	components: {
 		CallButton,
+		CallFailedDialog,
 		CallView,
 		ChatView,
 		MediaSettings,
@@ -118,6 +121,10 @@ export default {
 		warnLeaving() {
 			return !this.isLeavingAfterSessionIssue && this.isInCall
 		},
+
+		connectionFailed() {
+			return this.$store.getters.connectionFailed(this.token)
+		},
 	},
 
 	created() {
diff --git a/src/components/CallView/CallFailedDialog.vue b/src/components/CallView/CallFailedDialog.vue
new file mode 100644
index 00000000000..99242d3d628
--- /dev/null
+++ b/src/components/CallView/CallFailedDialog.vue
@@ -0,0 +1,70 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import IconAlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
+
+import { t } from '@nextcloud/l10n'
+
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
+import { useStore } from '../../composables/useStore.js'
+
+const store = useStore()
+
+const props = defineProps({
+	token: {
+		type: String,
+		required: true,
+	},
+})
+
+const STATUS_ERRORS = {
+	400: t('spreed', 'Recording consent is required'),
+	403: t('spreed', 'This conversation is read-only'),
+	404: t('spreed', 'Conversation not found or not joined'),
+	412: t('spreed', "Lobby is still active and you're not a moderator"),
+}
+const connectionFailed = computed(() => store.getters.connectionFailed(props.token))
+const connectionFailedDialogId = `connection-failed-${props.token}`
+const message = computed(() => {
+	if (!connectionFailed.value) {
+		return ''
+	}
+
+	const statusCode = connectionFailed.value?.meta?.statuscode
+	if (STATUS_ERRORS[statusCode]) {
+		return STATUS_ERRORS[statusCode]
+	}
+	if (connectionFailed.value?.data?.error) {
+		return connectionFailed.value.data.error
+	}
+
+	return t('spreed', 'Please try to reload the page')
+})
+
+/**
+ *
+ */
+function clearConnectionFailedError() {
+	store.dispatch('clearConnectionFailed', props.token)
+}
+
+</script>
+
+<template>
+	<NcModal :label-id="connectionFailedDialogId"
+		@close="clearConnectionFailedError">
+		<NcEmptyContent :name="t('spreed', 'Connection failed')"
+			:description="message">
+			<template #icon>
+				<IconAlertOctagon />
+			</template>
+		</NcEmptyContent>
+	</NcModal>
+</template>
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 7fc355063d7..857f797861d 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -16,9 +16,6 @@
 			<p v-if="message" class="emptycontent-additional">
 				{{ message }}
 			</p>
-			<p v-if="helper" class="emptycontent-additional">
-				{{ helper }}
-			</p>
 			<NcButton v-if="showLink"
 				type="primary"
 				@click.stop="handleCopyLink">
@@ -30,7 +27,6 @@
 
 <script>
 import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
-import IconAlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
 import IconLinkVariant from 'vue-material-design-icons/LinkVariant.vue'
 import IconPhone from 'vue-material-design-icons/Phone.vue'
 
@@ -42,24 +38,16 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
-const STATUS_ERRORS = {
-	400: t('spreed', 'Recording consent is required'),
-	403: t('spreed', 'This conversation is read-only'),
-	404: t('spreed', 'Conversation not found or not joined'),
-	412: t('spreed', "Lobby is still active and you're not a moderator"),
-}
-
 export default {
 
 	name: 'EmptyCallView',
 
 	components: {
 		NcButton,
+		NcLoadingIcon,
 		IconAccountMultiple,
-		IconAlertOctagon,
 		IconLinkVariant,
 		IconPhone,
-		NcLoadingIcon,
 	},
 
 	props: {
@@ -80,7 +68,6 @@ export default {
 	},
 
 	computed: {
-
 		token() {
 			return this.$store.getters.getToken()
 		},
@@ -89,10 +76,6 @@ export default {
 			return this.$store.getters.isConnecting(this.token)
 		},
 
-		connectionFailed() {
-			return this.$store.getters.connectionFailed(this.token)
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},
@@ -138,9 +121,7 @@ export default {
 		},
 
 		emptyCallViewIcon() {
-			if (this.connectionFailed) {
-				return IconAlertOctagon
-			} else if (this.isConnecting) {
+			if (this.isConnecting) {
 				return NcLoadingIcon
 			} else if (this.isPhoneConversation) {
 				return IconPhone
@@ -150,9 +131,6 @@ export default {
 		},
 
 		title() {
-			if (this.connectionFailed) {
-				return t('spreed', 'Connection failed')
-			}
 			if (this.isConnecting) {
 				return t('spreed', 'Connecting …')
 			}
@@ -165,23 +143,7 @@ export default {
 			return t('spreed', 'Waiting for others to join the call …')
 		},
 
-		helper() {
-			return this.connectionFailed ? t('spreed', 'Please try to reload the page') : ''
-		},
-
 		message() {
-			if (this.connectionFailed) {
-				const statusCode = this.connectionFailed?.meta?.statuscode
-				if (STATUS_ERRORS[statusCode]) {
-					return STATUS_ERRORS[statusCode]
-				}
-				if (this.connectionFailed?.data?.error) {
-					return this.connectionFailed.data.error
-				}
-
-				return t('spreed', 'Something went wrong')
-			}
-
 			if (this.isConnecting) {
 				return ''
 			}
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index ab7c0a3c857..5c9931be14d 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -9,11 +9,12 @@
 			id="call_button"
 			:title="startCallTitle"
 			:aria-label="startCallLabel"
-			:disabled="startCallButtonDisabled || loading"
+			:disabled="startCallButtonDisabled || loading || isJoiningCall"
 			:type="startCallButtonType"
 			@click="handleClick">
 			<template #icon>
-				<IconPhoneDial v-if="isPhoneRoom" :size="20" />
+				<NcLoadingIcon v-if="isJoiningCall || loading" :size="20" />
+				<IconPhoneDial v-else-if="isPhoneRoom" :size="20" />
 				<IconPhoneOutline v-else-if="silentCall" :size="20" />
 				<IconPhone v-else :size="20" />
 			</template>
@@ -21,6 +22,7 @@
 				{{ startCallLabel }}
 			</template>
 		</NcButton>
+
 		<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
 			id="call_button"
 			:aria-label="endCallLabel"
@@ -28,7 +30,8 @@
 			:disabled="loading"
 			@click="leaveCall(true)">
 			<template #icon>
-				<IconPhoneHangup :size="20" /> <!-- here -->
+				<NcLoadingIcon v-if="loading" :size="20" />
+				<IconPhoneHangup v-else :size="20" /> <!-- here -->
 			</template>
 			<template v-if="showButtonText" #default>
 				{{ endCallLabel }}
@@ -41,7 +44,8 @@
 			:disabled="loading"
 			@click="leaveCall(false)">
 			<template #icon>
-				<IconPhoneHangup :size="20" />
+				<NcLoadingIcon v-if="loading" :size="20" />
+				<IconPhoneHangup v-else :size="20" />
 			</template>
 			<template v-if="showButtonText" #default>
 				{{ leaveCallLabel }}
@@ -54,7 +58,8 @@
 			force-name
 			:type="isScreensharing ? 'tertiary' : 'error'">
 			<template #icon>
-				<IconPhoneHangup v-if="!isBreakoutRoom" :size="20" />
+				<NcLoadingIcon v-if="loading" :size="20" />
+				<IconPhoneHangup v-else-if="!isBreakoutRoom" :size="20" />
 				<IconArrowLeft v-else :size="20" />
 			</template>
 			<NcActionButton v-if="isBreakoutRoom"
@@ -96,6 +101,7 @@ import { t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
@@ -124,6 +130,7 @@ export default {
 		IconPhoneHangup,
 		IconPhoneOff,
 		IconPhoneOutline,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -268,6 +275,10 @@ export default {
 				return t('spreed', 'Join call')
 			}
 
+			if (this.isJoiningCall) {
+				return t('spreed', 'Connecting …')
+			}
+
 			return this.silentCall ? t('spreed', 'Start call silently') : t('spreed', 'Start call')
 		},
 
@@ -334,6 +345,10 @@ export default {
 		isInLobby() {
 			return this.$store.getters.isInLobby
 		},
+
+		isJoiningCall() {
+			return this.$store.getters.isJoiningCall(this.token)
+		},
 	},
 
 	watch: {
diff --git a/src/services/callsService.js b/src/services/callsService.js
index bd0f72923c5..8da0a6395b6 100644
--- a/src/services/callsService.js
+++ b/src/services/callsService.js
@@ -32,11 +32,7 @@ import {
  * @return {number} The actual flags based on the available media
  */
 const joinCall = async function(token, flags, silent, recordingConsent) {
-	try {
-		return await signalingJoinCall(token, flags, silent, recordingConsent)
-	} catch (error) {
-		console.debug('Error while joining call: ', error)
-	}
+	return signalingJoinCall(token, flags, silent, recordingConsent)
 }
 
 /**
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 576d572d94a..73d3fea7374 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -66,6 +66,8 @@ const state = {
 	},
 	inCall: {
 	},
+	joiningCall: {
+	},
 	connecting: {
 	},
 	connectionFailed: {
@@ -93,6 +95,10 @@ const getters = {
 		return !!(state.inCall[token] && Object.keys(state.inCall[token]).length > 0)
 	},
 
+	isJoiningCall: (state) => (token) => {
+		return !!(state.joiningCall[token] && Object.keys(state.joiningCall[token]).length > 0)
+	},
+
 	isConnecting: (state) => (token) => {
 		return !!(state.connecting[token] && Object.keys(state.connecting[token]).length > 0)
 	},
@@ -338,20 +344,11 @@ const mutations = {
 			if (state.inCall[token] && state.inCall[token][sessionId]) {
 				Vue.delete(state.inCall[token], sessionId)
 			}
-
-			if (state.connecting[token] && state.connecting[token][sessionId]) {
-				Vue.delete(state.connecting[token], sessionId)
-			}
 		} else {
 			if (!state.inCall[token]) {
 				Vue.set(state.inCall, token, {})
 			}
 			Vue.set(state.inCall[token], sessionId, flags)
-
-			if (!state.connecting[token]) {
-				Vue.set(state.connecting, token, {})
-			}
-			Vue.set(state.connecting[token], sessionId, flags)
 		}
 	},
 
@@ -359,9 +356,39 @@ const mutations = {
 		Vue.set(state.connectionFailed, token, payload)
 	},
 
+	clearConnectionFailed(state, token) {
+		Vue.delete(state.connectionFailed, token)
+	},
+
+	joiningCall(state, { token, sessionId, flags }) {
+		if (!state.joiningCall[token]) {
+			Vue.set(state.joiningCall, token, {})
+		}
+		Vue.set(state.joiningCall[token], sessionId, flags)
+	},
+
+	finishedJoiningCall(state, { token, sessionId }) {
+		if (state.joiningCall[token] && state.joiningCall[token][sessionId]) {
+			Vue.delete(state.joiningCall[token], sessionId)
+			if (!Object.keys(state.joiningCall[token]).length) {
+				Vue.delete(state.joiningCall, token)
+			}
+		}
+	},
+
+	connecting(state, { token, sessionId, flags }) {
+		if (!state.connecting[token]) {
+			Vue.set(state.connecting, token, {})
+		}
+		Vue.set(state.connecting[token], sessionId, flags)
+	},
+
 	finishedConnecting(state, { token, sessionId }) {
 		if (state.connecting[token] && state.connecting[token][sessionId]) {
 			Vue.delete(state.connecting[token], sessionId)
+			if (!Object.keys(state.connecting[token]).length) {
+				Vue.delete(state.connecting, token)
+			}
 		}
 	},
 
@@ -809,8 +836,23 @@ const actions = {
 		return false
 	},
 
-	async joinCall({ commit, getters }, { token, participantIdentifier, flags, silent, recordingConsent }) {
-		if (!participantIdentifier?.sessionId) {
+	async joinCall({ commit, getters, state }, { token, participantIdentifier, flags, silent, recordingConsent }) {
+		// SUMMARY: join call process
+		// There are 2 main steps to join a call:
+		// 1. Join the call (signaling-join-call)
+		// 2A. Wait for the users list (signaling-users-in-room) INTERNAL server event
+		// 2B. Wait for the users list (signaling-users-changed) EXTERNAL server event
+		// In case of failure, we receive a signaling-join-call-failed event
+
+		// Exception 1: We may receive the users list before the signaling-join-call event
+		// In this case, we use the isParticipantsListReceived flag to handle this case
+
+		// Exception 2: We may receive the users list in a second event of signaling-users-changed or signaling-users-in-room
+		// In this case, we always check if the list is the updated one (it has the current participant in the call)
+
+		const { sessionId } = participantIdentifier
+
+		if (!sessionId) {
 			console.error('Trying to join call without sessionId')
 			return
 		}
@@ -821,31 +863,91 @@ const actions = {
 			return
 		}
 
-		commit('setInCall', {
-			token,
-			sessionId: participantIdentifier.sessionId,
-			flags,
-		})
+		let isParticipantsListReceived = null
+		commit('joiningCall', { token, sessionId, flags })
 
-		const actualFlags = await joinCall(token, flags, silent, recordingConsent)
+		const handleJoinCall = ([token, flags]) => {
+			commit('setInCall', { token, sessionId, flags })
+			commit('finishedJoiningCall', { token, sessionId })
 
-		const updatedData = {
-			inCall: actualFlags,
+			if (isParticipantsListReceived) {
+				finishConnecting()
+			} else {
+				commit('connecting', { token, sessionId, flags })
+			}
 		}
-		commit('updateParticipant', { token, attendeeId: attendee.attendeeId, updatedData })
 
-		EventBus.once('signaling-users-in-room', () => {
-			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
-		})
+		const handleJoinCallFailed = ([token, payload]) => {
+			finishConnecting()
+			commit('connectionFailed', {
+				token,
+				payload
+			})
+			commit('setInCall', {
+				token,
+				sessionId: participantIdentifier.sessionId,
+				flags: PARTICIPANT.CALL_FLAG.DISCONNECTED,
+			})
+		}
+
+		const handleUsersInRoom = (payload) => {
+			const participant = payload[0].find(p => p.sessionId === sessionId)
+			if (participant && participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED) {
+				if (state.joiningCall[token]?.[sessionId]) {
+					isParticipantsListReceived = true
+					commit('connecting', { token, sessionId, flags })
+					return
+				}
+				finishConnecting()
+			}
+		}
+
+		const handleUsersChanged = (payload) => {
+			const participant = payload[0].find(p => p.nextcloudSessionId === sessionId)
+			if (participant && participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED) {
+				if (state.joiningCall[token]?.[sessionId]) {
+					isParticipantsListReceived = true
+					commit('connecting', { token, sessionId, flags })
+					return
+				}
+				finishConnecting()
+			}
+		}
+
+		const finishConnecting = () => {
+			isParticipantsListReceived = null
+			commit('finishedConnecting', { token, sessionId })
+			commit('finishedJoiningCall', { token, sessionId })
+			EventBus.off('signaling-join-call', handleJoinCall)
+			EventBus.off('signaling-join-call-failed', handleJoinCallFailed)
+			EventBus.off('signaling-users-in-room', handleUsersInRoom)
+			EventBus.off('signaling-users-changed', handleUsersChanged)
+		}
 
+		// Fallback in case we never receive the users list after joining the call
 		setTimeout(() => {
-			// If by accident we never receive a users list, just switch to
+			// If, by accident, we never receive a users list, just switch to
 			// "Waiting for others to join the call …" after some seconds.
-			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
+			finishConnecting()
 		}, 10000)
 
-		const callViewStore = useCallViewStore()
-		callViewStore.handleJoinCall(getters.conversation(token))
+		EventBus.once('signaling-join-call', handleJoinCall)
+		EventBus.once('signaling-join-call-failed', handleJoinCallFailed)
+		EventBus.on('signaling-users-in-room', handleUsersInRoom)
+		EventBus.on('signaling-users-changed', handleUsersChanged)
+
+		try {
+			const actualFlags = await joinCall(token, flags, silent, recordingConsent)
+			const updatedData = {
+				inCall: actualFlags,
+			}
+			commit('updateParticipant', { token, attendeeId: attendee.attendeeId, updatedData })
+			const callViewStore = useCallViewStore()
+			callViewStore.handleJoinCall(getters.conversation(token))
+		} catch (e) {
+			console.error('Error while joining call: ', e)
+
+		}
 	},
 
 	async leaveCall({ commit, getters }, { token, participantIdentifier, all = false }) {
@@ -1187,6 +1289,10 @@ const actions = {
 	setPhoneMute(context, { callid, value }) {
 		context.commit('setPhoneMute', { callid, value })
 	},
+
+	clearConnectionFailed(context, token) {
+		context.commit('clearConnectionFailed', token)
+	}
 }
 
 export default { state, mutations, getters, actions }
diff --git a/src/store/participantsStore.spec.js b/src/store/participantsStore.spec.js
index 8ff40b7be38..957dd384c33 100644
--- a/src/store/participantsStore.spec.js
+++ b/src/store/participantsStore.spec.js
@@ -540,6 +540,7 @@ describe('participantsStore', () => {
 		const flags = PARTICIPANT.CALL_FLAG.WITH_AUDIO | PARTICIPANT.CALL_FLAG.WITH_VIDEO
 
 		beforeEach(async () => {
+			jest.useFakeTimers()
 			testStoreConfig.getters.conversation = () => jest.fn().mockReturnValue({
 				token: TOKEN,
 				type: 3,
@@ -555,8 +556,7 @@ describe('participantsStore', () => {
 				},
 			})
 
-			// The requested flags and the actual flags can be different if some
-			// media device is not available.
+			// Setup joinCall and leaveCall mock behavior
 			joinCall.mockResolvedValue(actualFlags)
 			leaveCall.mockResolvedValue()
 
@@ -572,23 +572,70 @@ describe('participantsStore', () => {
 			})
 		})
 
-		test('joins call', async () => {
-			// Assert
+		afterEach(() => {
+			jest.clearAllTimers()
+		})
+
+		const assertInitialCallState = () => {
 			expect(joinCall).toHaveBeenCalledWith(TOKEN, flags, false, false)
+			EventBus.emit('signaling-join-call', [TOKEN, actualFlags])
 			expect(store.getters.isInCall(TOKEN)).toBe(true)
 			expect(store.getters.isConnecting(TOKEN)).toBe(true)
-			expect(store.getters.participantsList(TOKEN)).toStrictEqual([
-				{
-					attendeeId: 1,
-					sessionId: 'session-id-1',
-					inCall: actualFlags,
-					participantType: PARTICIPANT.TYPE.USER,
-				},
-			])
+			expect(store.getters.participantsList(TOKEN)).toStrictEqual([{
+				attendeeId: 1,
+				sessionId: 'session-id-1',
+				inCall: actualFlags,
+				participantType: PARTICIPANT.TYPE.USER,
+			}])
+		}
 
-			// Finished connecting to the call
-			EventBus.emit('signaling-users-in-room')
+		const finishConnectingWithUsers = (participants) => {
+			EventBus.emit('signaling-users-in-room', [participants])
+			expect(store.getters.isInCall(TOKEN)).toBe(true)
+			expect(store.getters.isConnecting(TOKEN)).toBe(false)
+		}
+
+		const emitFailureAndAssert = (reason) => {
+			EventBus.emit('signaling-join-call-failed', [TOKEN, reason])
+			expect(store.getters.isInCall(TOKEN)).toBe(false)
+			expect(store.getters.isConnecting(TOKEN)).toBe(false)
+		}
 
+		test('joins call with internal signaling', async () => {
+			assertInitialCallState()
+			finishConnectingWithUsers([{
+				attendeeId: 1,
+				sessionId: 'session-id-1',
+				inCall: actualFlags,
+				participantType: PARTICIPANT.TYPE.USER,
+			}])
+		})
+
+		test('joins call with external signaling', async () => {
+			assertInitialCallState()
+			EventBus.emit('signaling-users-changed', [[{
+				attendeeId: 1,
+				nextcloudSessionId: 'session-id-1',
+				inCall: actualFlags,
+				participantType: PARTICIPANT.TYPE.USER,
+			}]])
+			expect(store.getters.isInCall(TOKEN)).toBe(true)
+			expect(store.getters.isConnecting(TOKEN)).toBe(false)
+		})
+
+		test('joins call but it fails', async () => {
+			assertInitialCallState()
+			emitFailureAndAssert('error reason')
+		})
+
+		test('joins call but it does not receive participants list', async () => {
+			assertInitialCallState()
+			// No other signaling event, simulates a missing participant list
+			expect(store.getters.isInCall(TOKEN)).toBe(true)
+			expect(store.getters.isConnecting(TOKEN)).toBe(true)
+
+			// Trigger fallback after delay
+			jest.advanceTimersByTime(10000)
 			expect(store.getters.isInCall(TOKEN)).toBe(true)
 			expect(store.getters.isConnecting(TOKEN)).toBe(false)
 		})
@@ -906,7 +953,7 @@ describe('participantsStore', () => {
 				flags,
 				silent: false,
 			})
-
+			EventBus.emit('signaling-join-call', [TOKEN, flags])
 			expect(store.getters.isInCall(TOKEN)).toBe(true)
 
 			leaveConversation.mockResolvedValue()
diff --git a/src/utils/signaling.js b/src/utils/signaling.js
index 4aaa1ddbc15..9f2bd012831 100644
--- a/src/utils/signaling.js
+++ b/src/utils/signaling.js
@@ -274,18 +274,15 @@ Signaling.Base.prototype.joinCall = function(token, flags, silent, recordingCons
 				this.currentCallFlags = flags
 				this.currentCallSilent = silent
 				this.currentCallRecordingConsent = recordingConsent
-				this._trigger('joinCall', [token])
+				this._trigger('joinCall', [token, flags])
 				resolve()
 				this._joinCallSuccess(token)
 			}.bind(this))
 			.catch(function(e) {
 				reject(new Error())
 				console.error('Connection failed, reason: ', e)
-				store.commit('connectionFailed', {
-					token,
-					payload: e.response?.data?.ocs,
-				})
-			})
+				this._trigger('joinCallFailed', [token, e.response?.data?.ocs])
+			}.bind(this))
 	})
 }
 
@@ -1228,7 +1225,7 @@ Signaling.Standalone.prototype.joinCall = function(token, flags, silent, recordi
 			this.currentCallFlags = flags
 			this.currentCallSilent = silent
 			this.currentCallRecordingConsent = recordingConsent
-			this._trigger('joinCall', [token])
+			this._trigger('joinCall', [token, flags])
 
 			resolve()
 		})
diff --git a/src/utils/webrtc/index.js b/src/utils/webrtc/index.js
index 6ec7275d5ec..90231323ef7 100644
--- a/src/utils/webrtc/index.js
+++ b/src/utils/webrtc/index.js
@@ -157,6 +157,7 @@ function startCall(signaling, configuration, silent, recordingConsent) {
 	signaling.joinCall(pendingJoinCallToken, flags, silent, recordingConsent).then(() => {
 		startedCall(flags)
 	}).catch(error => {
+		signalingLeaveCall(pendingJoinCallToken)
 		failedToStartCall(error)
 	})
 }
diff --git a/src/views/FilesSidebarChatView.vue b/src/views/FilesSidebarChatView.vue
index 908aeffcb29..deccbb206ec 100644
--- a/src/views/FilesSidebarChatView.vue
+++ b/src/views/FilesSidebarChatView.vue
@@ -6,6 +6,7 @@
 <template>
 	<div class="talk-tab__wrapper">
 		<CallButton v-if="!isInCall" class="talk-tab__call-button" />
+		<CallFailedDialog v-if="connectionFailed" :token="token" />
 		<ChatView class="talk-tab__chat-view" is-sidebar />
 		<PollViewer />
 		<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
@@ -13,6 +14,7 @@
 </template>
 <script>
 
+import CallFailedDialog from '../components/CallView/CallFailedDialog.vue'
 import ChatView from '../components/ChatView.vue'
 import MediaSettings from '../components/MediaSettings/MediaSettings.vue'
 import PollViewer from '../components/PollViewer/PollViewer.vue'
@@ -26,6 +28,7 @@ export default {
 
 	components: {
 		CallButton,
+		CallFailedDialog,
 		ChatView,
 		MediaSettings,
 		PollViewer,
@@ -42,6 +45,15 @@ export default {
 			recordingConsentGiven: false,
 		}
 	},
+
+	computed: {
+		token() {
+			return this.$store.getters.getToken()
+		},
+		connectionFailed() {
+			return this.$store.getters.connectionFailed(this.token)
+		},
+	},
 }
 
 </script>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index ed679a02776..9b29ee78cd6 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -11,6 +11,7 @@
 			<CallView v-if="isInCall" :token="token" />
 			<ChatView v-else />
 			<PollViewer />
+			<CallFailedDialog v-if="connectionFailed" :token="token" />
 		</template>
 	</div>
 </template>
@@ -18,6 +19,7 @@
 <script>
 import { emit } from '@nextcloud/event-bus'
 
+import CallFailedDialog from '../components/CallView/CallFailedDialog.vue'
 import CallView from '../components/CallView/CallView.vue'
 import ChatView from '../components/ChatView.vue'
 import LobbyScreen from '../components/LobbyScreen.vue'
@@ -31,6 +33,7 @@ export default {
 	name: 'MainView',
 	components: {
 		CallView,
+		CallFailedDialog,
 		ChatView,
 		LobbyScreen,
 		PollViewer,
@@ -57,6 +60,10 @@ export default {
 		isInLobby() {
 			return this.$store.getters.isInLobby
 		},
+
+		connectionFailed() {
+			return this.$store.getters.connectionFailed(this.token)
+		},
 	},
 
 	watch: {