diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index dd987ef15d2..8bb37a9dac5 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -105,7 +105,6 @@
 					:local-call-participant-model="localCallParticipantModel"
 					:shared-datas="sharedDatas"
 					v-bind="$attrs"
-					:dev-mode.sync="devMode"
 					@select-video="handleSelectVideo"
 					@click-local-video="handleClickLocalVideo" />
 
@@ -134,7 +133,7 @@
 
 <script>
 import debounce from 'debounce'
-import { ref } from 'vue'
+import { provide, ref } from 'vue'
 
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -193,6 +192,9 @@ export default {
 	setup() {
 		// For debug and screenshot purposes. Set to true to enable
 		const devMode = ref(false)
+		provide('CallView:devModeEnabled', devMode)
+		const screenshotMode = ref(false)
+		provide('CallView:screenshotModeEnabled', screenshotMode)
 
 		return {
 			localMediaModel,
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 87c3d53a1e0..1d533b9510d 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -80,7 +80,6 @@
 							:token="token"
 							:local-media-model="localMediaModel"
 							:local-call-participant-model="localCallParticipantModel"
-							:screenshot-mode-url="screenshotMode ? placeholderImage(8) : ''"
 							@click-video="handleClickLocalVideo" />
 					</div>
 					<NcButton v-if="hasNextPage && gridWidth > 0"
@@ -102,7 +101,6 @@
 					:token="token"
 					:local-media-model="localMediaModel"
 					:local-call-participant-model="localCallParticipantModel"
-					:screenshot-mode-url="screenshotMode ? placeholderImage(8) : ''"
 					@click-video="handleClickLocalVideo" />
 
 				<template v-if="devMode">
@@ -141,7 +139,7 @@
 
 <script>
 import debounce from 'debounce'
-import { ref } from 'vue'
+import { inject, ref } from 'vue'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -184,14 +182,6 @@ export default {
 	},
 
 	props: {
-		/**
-		 * Developer mode: If enabled it allows to debug the grid using dummy
-		 * videos
-		 */
-		devMode: {
-			type: Boolean,
-			default: false,
-		},
 		/**
 		 * Display the overflow of videos in separate pages;
 		 */
@@ -244,14 +234,17 @@ export default {
 		},
 	},
 
-	emits: ['select-video', 'click-local-video', 'update:devMode'],
+	emits: ['select-video', 'click-local-video'],
 
 	setup() {
+		// Developer mode: If enabled it allows to debug the grid using dummy videos
+		const devMode = inject('CallView:devModeEnabled', ref(false))
+		const screenshotMode = inject('CallView:screenshotModeEnabled', ref(false))
 		// The number of dummy videos in dev mode
 		const dummies = ref(4)
-		const screenshotMode = ref(false)
 
 		return {
+			devMode,
 			dummies,
 			screenshotMode,
 			videosCap,
@@ -688,7 +681,7 @@ export default {
 
 		disableDevMode() {
 			this.screenshotMode = false
-			this.$emit('update:devMode', false)
+			this.devMode = false
 		},
 		// whenever the document is resized, re-set the 'clientWidth' variable
 		handleResize(event) {
@@ -1004,7 +997,7 @@ export default {
 		object-fit: cover;
 		height: 100%;
 		width: 100%;
-		border-radius: calc(var(--default-clickable-area) / 2);
+		border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 	}
 
 	.wrapper {
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index c4b6c891e6b..86707dcc0bc 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -60,6 +60,8 @@
 </template>
 
 <script>
+import { inject, ref } from 'vue'
+
 import AccountOff from 'vue-material-design-icons/AccountOff.vue'
 
 import { showError, showInfo, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
@@ -74,6 +76,7 @@ import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import { AVATAR } from '../../../constants.js'
 import attachMediaStream from '../../../utils/attachmediastream.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
+import { placeholderImage } from '../Grid/gridPlaceholders.ts'
 
 export default {
 
@@ -132,10 +135,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		screenshotModeUrl: {
-			type: String,
-			default: '',
-		},
 		isPresenterOverlay: {
 			type: Boolean,
 			default: false,
@@ -144,6 +143,16 @@ export default {
 
 	emits: ['click-video', 'click-presenter'],
 
+	setup() {
+		const devMode = inject('CallView:devModeEnabled', ref(false))
+		const screenshotMode = inject('CallView:screenshotModeEnabled', ref(false))
+
+		return {
+			devMode,
+			screenshotMode,
+		}
+	},
+
 	data() {
 		return {
 			notificationHandle: null,
@@ -227,6 +236,10 @@ export default {
 		isSelectable() {
 			return !this.unSelectable && !this.isSidebar && this.hasLocalVideo && this.$store.getters.selectedVideoPeerId !== 'local'
 		},
+
+		screenshotModeUrl() {
+			return this.screenshotMode ? placeholderImage(8) : ''
+		},
 	},
 
 	watch: {
@@ -482,7 +495,11 @@ export default {
 
 .dev-mode-video--self {
 	object-fit: cover !important;
-	border-radius: calc(var(--default-clickable-area) / 2);
+	border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
+
+	.presenter-overlay & {
+		border-radius: 50%;
+	}
 }
 
 .presenter-icon__hide {
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index c6cb1497f7b..0744b02490d 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -31,6 +31,11 @@
 				<NcLoadingIcon v-if="isLoading"
 					:size="avatarSize / 2"
 					class="video-loading" />
+
+				<img v-if="screenshotModeUrl && isPresenterOverlay"
+					class="dev-mode-video--presenter"
+					alt="dev-mode-video--presenter"
+					:src="screenshotModeUrl">
 			</div>
 		</TransitionWrapper>
 		<TransitionWrapper name="fade">
@@ -79,6 +84,7 @@
 <script>
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
+import { inject, ref } from 'vue'
 
 import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
 import AccountOff from 'vue-material-design-icons/AccountOff.vue'
@@ -98,6 +104,7 @@ import { EventBus } from '../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 import attachMediaStream from '../../../utils/attachmediastream.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
+import { placeholderImage } from '../Grid/gridPlaceholders.ts'
 
 export default {
 
@@ -193,8 +200,12 @@ export default {
 	emits: ['click-video', 'click-presenter', 'force-promote-video'],
 
 	setup() {
-		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+		const screenshotMode = inject('CallView:screenshotModeEnabled', ref(false))
+
+		return {
+			guestNameStore: useGuestNameStore(),
+			screenshotMode,
+		}
 	},
 
 	data() {
@@ -519,6 +530,10 @@ export default {
 		nextcloudSessionId() {
 			return this.model.attributes.nextcloudSessionId
 		},
+
+		screenshotModeUrl() {
+			return this.screenshotMode ? placeholderImage(6) : ''
+		},
 	},
 
 	watch: {
@@ -666,8 +681,19 @@ export default {
 	border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 }
 
-.videoWrapper.presenter-overlay > video {
-	border-radius: 50%;
+.videoWrapper.presenter-overlay {
+	& > video {
+		border-radius: 50%;
+	}
+	& > .dev-mode-video--presenter {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		object-fit: cover;
+		border-radius: 50%;
+	}
 }
 
 .video-loading {