diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 3cac3e1018a..2ae089ebd8d 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -16,7 +16,9 @@
 			<EmptyCallView v-if="showEmptyCallView" :is-sidebar="isSidebar" />
 
 			<div id="videos">
-				<div v-if="!isGrid || !callParticipantModels.length" class="video__promoted" :class="{'full-page': showFullPage}">
+				<div v-if="devMode ? !isGrid : (!isGrid || !callParticipantModels.length)"
+					class="video__promoted"
+					:class="{'full-page': showFullPage}">
 					<!-- Selected video override mode -->
 					<VideoVue v-if="showSelectedVideo && selectedCallParticipantModel"
 						:key="`promoted-${selectedVideoPeerId}`"
@@ -50,21 +52,12 @@
 						:shared-data="localSharedData"
 						is-big />
 					<!-- Remote or selected screen -->
-					<template v-else-if="showRemoteScreen || showSelectedScreen">
-						<Screen v-if="shownRemoteScreenCallParticipantModel"
-							:key="`screen-${shownRemoteScreenPeerId}`"
-							:token="token"
-							:call-participant-model="shownRemoteScreenCallParticipantModel"
-							:shared-data="sharedDatas[shownRemoteScreenPeerId]"
-							is-big />
-						<!-- presenter overlay -->
-						<PresenterOverlay v-if="shouldShowPresenterOverlay"
-							:token="token"
-							:model="shownRemoteScreenCallParticipantModel"
-							:shared-data="sharedDatas[shownRemoteScreenPeerId]"
-							:is-collapsed="!showPresenterOverlay"
-							@click="toggleShowPresenterOverlay" />
-					</template>
+					<Screen v-else-if="(showRemoteScreen || showSelectedScreen) && shownRemoteScreenCallParticipantModel"
+						:key="`screen-${shownRemoteScreenPeerId}`"
+						:token="token"
+						:call-participant-model="shownRemoteScreenCallParticipantModel"
+						:shared-data="sharedDatas[shownRemoteScreenPeerId]"
+						is-big />
 					<!-- Promoted "autopilot" mode -->
 					<VideoVue v-else-if="promotedParticipantModel"
 						:key="`autopilot-${promotedParticipantModel.attributes.peerId}`"
@@ -78,11 +71,31 @@
 						:is-one-to-one="isOneToOne"
 						:is-sidebar="isSidebar"
 						@force-promote-video="forcePromotedModel = $event" />
+					<!-- presenter overlay -->
+					<PresenterOverlay v-if="shouldShowPresenterOverlay"
+						:token="token"
+						:model="presenterModel"
+						:shared-data="presenterSharedData"
+						:is-local-presenter="showLocalScreen"
+						:local-media-model="localMediaModel"
+						:is-collapsed="!showPresenterOverlay"
+						@click="toggleShowPresenterOverlay" />
+
+					<div v-else-if="devMode && !isGrid"
+						class="dev-mode-video--promoted">
+						<img :alt="placeholderName(6)" :src="placeholderImage(6)">
+						<VideoBottomBar :has-shadow="false"
+							:model="placeholderModel(6)"
+							:shared-data="placeholderSharedData(6)"
+							:token="token"
+							:participant-name="placeholderName(6)"
+							is-big />
+					</div>
 				</div>
 
 				<!-- Stripe or fullscreen grid depending on `isGrid` -->
 				<Grid v-if="!isSidebar"
-					:is-stripe="!isGrid || !callParticipantModels.length"
+					:is-stripe="devMode ? !isGrid : (!isGrid || !callParticipantModels.length)"
 					:is-recording="isRecording"
 					:token="token"
 					:has-pagination="true"
@@ -120,6 +133,7 @@
 
 <script>
 import debounce from 'debounce'
+import { provide, ref } from 'vue'
 
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -131,9 +145,11 @@ import LocalVideo from './shared/LocalVideo.vue'
 import PresenterOverlay from './shared/PresenterOverlay.vue'
 import ReactionToaster from './shared/ReactionToaster.vue'
 import Screen from './shared/Screen.vue'
+import VideoBottomBar from './shared/VideoBottomBar.vue'
 import VideoVue from './shared/VideoVue.vue'
 import ViewerOverlayCallView from './shared/ViewerOverlayCallView.vue'
 
+import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './Grid/gridPlaceholders.ts'
 import { SIMULCAST } from '../../constants.js'
 import { fetchPeers } from '../../services/callsService.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@@ -147,13 +163,14 @@ export default {
 
 	components: {
 		EmptyCallView,
-		ViewerOverlayCallView,
 		Grid,
 		LocalVideo,
 		PresenterOverlay,
 		ReactionToaster,
 		Screen,
+		VideoBottomBar,
 		VideoVue,
+		ViewerOverlayCallView,
 	},
 
 	props: {
@@ -174,6 +191,12 @@ 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)
+
 		const settingsStore = useSettingsStore()
 		const startWithoutMediaEnabled = settingsStore.startWithoutMedia
 		if (startWithoutMediaEnabled) {
@@ -184,6 +207,7 @@ export default {
 			localMediaModel,
 			localCallParticipantModel,
 			callParticipantCollection,
+			devMode,
 		}
 	},
 
@@ -327,8 +351,19 @@ export default {
 		},
 
 		shouldShowPresenterOverlay() {
-			return this.shownRemoteScreenCallParticipantModel?.attributes.videoAvailable || this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel)
+			return (this.showLocalScreen && this.hasLocalVideo)
+			|| ((this.showRemoteScreen || this.showSelectedScreen)
+			&& (this.shownRemoteScreenCallParticipantModel?.attributes.videoAvailable || this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel)))
+
+		},
+
+		presenterModel() {
+			// Prioritize local screen over remote screen, if both are available (as in DOM order)
+			return this.showLocalScreen ? this.localCallParticipantModel : this.shownRemoteScreenCallParticipantModel
+		},
 
+		presenterSharedData() {
+			return this.showLocalScreen ? this.localSharedData : this.sharedDatas[this.shownRemoteScreenPeerId]
 		},
 
 		presenterVideoBlockerEnabled() {
@@ -336,7 +371,7 @@ export default {
 		},
 
 		showEmptyCallView() {
-			return !this.callParticipantModels.length && !this.screenSharingActive
+			return !this.callParticipantModels.length && !this.screenSharingActive && !this.devMode
 		},
 
 		supportedReactions() {
@@ -447,6 +482,11 @@ export default {
 
 	methods: {
 		t,
+		// Placeholder data for devMode and screenshotMode
+		placeholderImage,
+		placeholderName,
+		placeholderModel,
+		placeholderSharedData,
 		/**
 		 * Updates data properties that depend on the CallParticipantModels.
 		 *
@@ -707,13 +747,16 @@ export default {
 		},
 
 		isModelWithVideo(callParticipantModel) {
+			if (!callParticipantModel) {
+				return false
+			}
 			return callParticipantModel.attributes.videoAvailable
 				&& this.sharedDatas[callParticipantModel.attributes.peerId].remoteVideoBlocker.isVideoEnabled()
 				&& (typeof callParticipantModel.attributes.stream === 'object')
 		},
 
 		toggleShowPresenterOverlay() {
-			if (!this.presenterVideoBlockerEnabled) {
+			if (!this.showLocalScreen && !this.presenterVideoBlockerEnabled) {
 				this.sharedDatas[this.shownRemoteScreenPeerId].remoteVideoBlocker.setVideoEnabled(true)
 			} else {
 				this.showPresenterOverlay = !this.showPresenterOverlay
@@ -759,6 +802,22 @@ export default {
 		// doesn't affect screen shares, as it's a different MediaStream
 		position: static;
 	}
+
+	.dev-mode-video--promoted {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	.dev-mode-video--promoted img {
+		position: absolute;
+		height: 100%;
+		aspect-ratio: 4 / 3;
+		object-fit: cover;
+		border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
+	}
 }
 
 .local-video {
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 1e8058ea8a3..ac641edaea5 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -59,11 +59,11 @@
 						</template>
 						<!-- Grid developer mode -->
 						<template v-if="devMode">
-							<div v-for="(video, key) in displayedVideos"
-								:key="video"
+							<div v-for="key in displayedVideos"
+								:key="key"
 								class="dev-mode-video video"
 								:class="{'dev-mode-screenshot': screenshotMode}">
-								<img :src="placeholderImage(key)">
+								<img :alt="placeholderName(key)" :src="placeholderImage(key)">
 								<VideoBottomBar :has-shadow="false"
 									:model="placeholderModel(key)"
 									:shared-data="placeholderSharedData(key)"
@@ -73,11 +73,8 @@
 							<h1 v-if="!screenshotMode" class="dev-mode__title">
 								Dev mode on ;-)
 							</h1>
-							<div v-else
-								class="dev-mode-video--self video"
-								:style="{'background': 'url(' + placeholderImage(8) + ')'}" />
 						</template>
-						<LocalVideo v-if="!isStripe && !isRecording && !screenshotMode"
+						<LocalVideo v-if="!isStripe && !isRecording"
 							ref="localVideo"
 							class="video"
 							is-grid
@@ -98,7 +95,7 @@
 						</template>
 					</NcButton>
 				</div>
-				<LocalVideo v-if="isStripe && !isRecording && !screenshotMode"
+				<LocalVideo v-if="isStripe && !isRecording"
 					ref="localVideo"
 					class="video"
 					:is-stripe="true"
@@ -108,19 +105,36 @@
 					:local-call-participant-model="localCallParticipantModel"
 					@click-video="handleClickLocalVideo" />
 
-				<div v-if="devMode && !screenshotMode" class="dev-mode__data">
-					<p>GRID INFO</p>
-					<p>Videos (total): {{ videosCount }}</p>
-					<p>Displayed videos n: {{ displayedVideos.length }}</p>
-					<p>Max per page: ~{{ videosCap }}</p>
-					<p>Grid width: {{ gridWidth }}</p>
-					<p>Grid height: {{ gridHeight }}</p>
-					<p>Min video width: {{ minWidth }} </p>
-					<p>Min video Height: {{ minHeight }} </p>
-					<p>Grid aspect ratio: {{ gridAspectRatio }}</p>
-					<p>Number of pages: {{ numberOfPages }}</p>
-					<p>Current page: {{ currentPage }}</p>
-				</div>
+				<template v-if="devMode">
+					<NcButton type="tertiary"
+						class="dev-mode__toggle"
+						aria-label="Toggle screenshot mode"
+						@click="screenshotMode = !screenshotMode">
+						<template #icon>
+							<ChevronLeft v-if="!screenshotMode" fill-color="#00FF41" :size="20" />
+						</template>
+					</NcButton>
+					<div v-if="!screenshotMode" class="dev-mode__data">
+						<span>GRID INFO</span>
+						<NcButton small @click="disableDevMode">
+							Disable
+						</NcButton>
+						<span>Videos (total):</span><span>{{ videosCount }}</span>
+						<span>Displayed videos:</span><span>{{ displayedVideos.length }}</span>
+						<span>Max per page:</span><span>~{{ videosCap }}</span>
+						<span>Grid width:</span><span>{{ gridWidth }}px</span>
+						<span>Grid height:</span><span>{{ gridHeight }}px</span>
+						<span>Min video width:</span><span>{{ minWidth }}px</span>
+						<span>Min video Height:</span><span>{{ minHeight }}px</span>
+						<span>Grid aspect ratio:</span><span>{{ gridAspectRatio }}</span>
+						<span>Number of pages:</span><span>{{ numberOfPages }}</span>
+						<span>Current page:</span><span>{{ currentPage }}</span>
+						<span>Dummies:</span><input v-model.number="dummies" type="number">
+						<span>Stripe mode:</span><input v-model="devStripe" type="checkbox">
+						<span>Screenshot mode:</span><input v-model="screenshotMode" type="checkbox">
+
+					</div>
+				</template>
 			</div>
 		</TransitionWrapper>
 	</div>
@@ -128,6 +142,7 @@
 
 <script>
 import debounce from 'debounce'
+import { inject, ref } from 'vue'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -137,7 +152,6 @@ import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { generateFilePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
@@ -147,6 +161,7 @@ import LocalVideo from '../shared/LocalVideo.vue'
 import VideoBottomBar from '../shared/VideoBottomBar.vue'
 import VideoVue from '../shared/VideoVue.vue'
 
+import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './gridPlaceholders.ts'
 import { PARTICIPANT, ATTENDEE } from '../../../constants.js'
 import { useSidebarStore } from '../../../stores/sidebar.js'
 
@@ -171,25 +186,6 @@ export default {
 	},
 
 	props: {
-		/**
-		 * Developer mode: If enabled it allows to debug the grid using dummy
-		 * videos
-		 */
-		devMode: {
-			type: Boolean,
-			default: false,
-		},
-		screenshotMode: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * The number of dummy videos in dev mode
-		 */
-		dummies: {
-			type: Number,
-			default: 8,
-		},
 		/**
 		 * Display the overflow of videos in separate pages;
 		 */
@@ -245,7 +241,16 @@ export default {
 	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)
+
 		return {
+			devMode,
+			dummies,
+			screenshotMode,
 			videosCap,
 			videosCapEnforced,
 			sidebarStore: useSidebarStore(),
@@ -494,7 +499,7 @@ export default {
 		orderedVideos() {
 			// Dynamic ordering is not possible for guests because
 			// participants store is not initialized
-			if (this.isGuestNonModerator) {
+			if (this.isGuestNonModerator || this.devMode) {
 				return this.videos
 			}
 
@@ -545,6 +550,15 @@ export default {
 		speakersWithAudioOff() {
 			return this.tempPromotedModels.filter(model => !model.attributes.audioAvailable)
 		},
+
+		devStripe: {
+			get() {
+				return this.isStripe
+			},
+			set(value) {
+				this.$store.dispatch('setCallViewMode', { isGrid: !value, clearLast: false })
+			},
+		},
 	},
 
 	watch: {
@@ -667,76 +681,16 @@ export default {
 			}
 		},
 
-		placeholderImage(i) {
-			return generateFilePath('spreed', 'docs', 'screenshotplaceholders/placeholder-' + i + '.jpeg')
-		},
-
-		placeholderName(i) {
-			switch (i) {
-			case 0:
-				return 'Sandra McKinney'
-			case 1:
-				return 'Chris Wurst'
-			case 2:
-				return 'Edeltraut Bobb'
-			case 3:
-				return 'Arthur Blitz'
-			case 4:
-				return 'Roeland Douma'
-			case 5:
-				return 'Vanessa Steg'
-			case 6:
-				return 'Emily Grant'
-			case 7:
-				return 'Tobias Kaminsky'
-			case 8:
-				return 'Adrian Ada'
-			}
-		},
+		// Placeholder data for devMode and screenshotMode
+		placeholderImage,
+		placeholderName,
+		placeholderModel,
+		placeholderSharedData,
 
-		placeholderModel(i) {
-			return {
-				attributes: {
-					audioAvailable: i === 1 || i === 2 || i === 4 || i === 5 || i === 6 || i === 7 || i === 8,
-					audioEnabled: i === 8,
-					videoAvailable: true,
-					screen: false,
-					currentVolume: 0.75,
-					volumeThreshold: 0.75,
-					localScreen: false,
-					raisedHand: {
-						state: i === 0 || i === 1 || i === 6,
-					},
-				},
-				forceMute: () => {},
-				on: () => {},
-				off: () => {},
-				getWebRtc: () => {
-					return {
-						connection: {
-							getSendVideoIfAvailable: () => {},
-						},
-					}
-				},
-			}
-		},
-
-		placeholderSharedData() {
-			return {
-				videoEnabled: {
-					isVideoEnabled() {
-						return true
-					},
-				},
-				remoteVideoBlocker: {
-					isVideoEnabled() {
-						return true
-					},
-				},
-				screenVisible: false,
-			}
+		disableDevMode() {
+			this.screenshotMode = false
+			this.devMode = false
 		},
-
 		// whenever the document is resized, re-set the 'clientWidth' variable
 		handleResize(event) {
 			// TODO: properly handle resizes when not on first page:
@@ -1053,22 +1007,17 @@ export default {
 
 .dev-mode-video {
 	&:not(.dev-mode-screenshot) {
-		border: 1px solid #00FF41;
+		outline: 1px solid #00FF41;
 		color: #00FF41;
 	}
 
 	position: relative;
 
-	&--self {
-		background-size: cover !important;
-		border-radius: calc(var(--default-clickable-area) / 2);
-	}
-
 	img {
 		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 {
@@ -1088,24 +1037,38 @@ export default {
 	opacity: 25%;
 }
 
+.dev-mode__toggle {
+	position: fixed !important;
+	left: 20px;
+	top: calc(2 * var(--header-height));
+}
+
 .dev-mode__data {
 	font-family: monospace;
 	position: fixed;
 	color: #00FF41;
 	left: 20px;
-	bottom: 50%;
-	padding: 20px;
+	top: calc(2 * var(--header-height) + 40px);
+	padding: 5px;
 	background: rgba(0, 0, 0, 0.8);
 	border: 1px solid #00FF41;
-	width: 212px;
-	font-size: 12px;
-	z-index: 999999999999999;
+	display: grid;
+	grid-template-columns: 165px 75px;
+	align-items: center;
+	justify-content: flex-start;
+	z-index: 1;
 
-	& p {
+	& span {
 		text-overflow: ellipsis;
 		overflow: hidden;
 		white-space: nowrap;
 	}
+	& input {
+		max-width: 65px;
+		height: 22.5px !important;
+		min-height: unset;
+		margin: 0;
+	}
 }
 
 .video:last-child {
diff --git a/src/components/CallView/Grid/gridPlaceholders.ts b/src/components/CallView/Grid/gridPlaceholders.ts
new file mode 100644
index 00000000000..ebc81cd33b5
--- /dev/null
+++ b/src/components/CallView/Grid/gridPlaceholders.ts
@@ -0,0 +1,88 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { generateFilePath } from '@nextcloud/router'
+
+/**
+ * Mock participant image for placeholders
+ * @param i index
+ */
+export function placeholderImage(i: number) {
+	return generateFilePath('spreed', 'docs', 'screenshotplaceholders/placeholder-' + (i % 9) + '.jpeg')
+}
+
+/**
+ * Mock participant name for placeholders
+ * @param i index
+ */
+export function placeholderName(i: number): string {
+	switch (i % 9) {
+	case 0:
+		return 'Sandra McKinney'
+	case 1:
+		return 'Chris Wurst'
+	case 2:
+		return 'Edeltraut Bobb'
+	case 3:
+		return 'Arthur Blitz'
+	case 4:
+		return 'Roeland Douma'
+	case 5:
+		return 'Vanessa Steg'
+	case 6:
+		return 'Emily Grant'
+	case 7:
+		return 'Tobias Kaminsky'
+	case 8:
+	default:
+		return 'Adrian Ada'
+	}
+}
+
+/**
+ * Mock participant model for placeholders
+ * @param i index
+ */
+export function placeholderModel(i: number) {
+	return {
+		attributes: {
+			audioAvailable: [1, 2, 4, 5, 7, 8].includes(i % 9),
+			audioEnabled: (i % 9) === 8,
+			videoAvailable: true,
+			screen: false,
+			currentVolume: 0.75,
+			volumeThreshold: 0.75,
+			localScreen: false,
+			raisedHand: {
+				state: [0, 1, 6].includes(i % 9),
+			},
+		},
+		forceMute: () => {},
+		on: () => {},
+		off: () => {},
+		getWebRtc: () => {
+			return {
+				connection: {
+					getSendVideoIfAvailable: () => {},
+				},
+			}
+		},
+	}
+}
+
+/**
+ * Mock shared data for placeholders
+ */
+export function placeholderSharedData() {
+	return {
+		videoEnabled: {
+			isVideoEnabled: () => true,
+		},
+		remoteVideoBlocker: {
+			isVideoEnabled: () => true,
+		},
+		screenVisible: false,
+	}
+}
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index c86186cbd93..86707dcc0bc 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -10,7 +10,12 @@
 		@mouseover="mouseover = true"
 		@mouseleave="mouseover = false"
 		@click="$emit('click-video')">
-		<div v-show="localMediaModel.attributes.videoEnabled"
+		<img v-if="screenshotModeUrl"
+			class="dev-mode-video--self videoWrapper"
+			alt="dev-mode-video--self"
+			:src="screenshotModeUrl">
+
+		<div v-show="!screenshotModeUrl && localMediaModel.attributes.videoEnabled"
 			class="videoWrapper"
 			:style="videoWrapperStyle">
 			<video id="localVideo"
@@ -19,11 +24,17 @@
 				:class="fitVideo ? 'video--fit' : 'video--fill'"
 				class="video"
 				@playing="updateVideoAspectRatio" />
+			<AccountOff v-if="isPresenterOverlay && mouseover"
+				class="presenter-icon__hide"
+				:aria-label="t('spreed', 'Hide presenter video')"
+				:title="t('spreed', 'Hide presenter video')"
+				:size="32"
+				@click="$emit('click-presenter')" />
 			<NcLoadingIcon v-if="isNotConnected"
 				:size="avatarSize / 2"
 				class="video-loading" />
 		</div>
-		<div v-if="!localMediaModel.attributes.videoEnabled && !isSidebar" class="avatar-container">
+		<div v-if="!screenshotModeUrl && !localMediaModel.attributes.videoEnabled && !isSidebar" class="avatar-container">
 			<VideoBackground v-if="isGrid || isStripe"
 				:display-name="displayName"
 				:user="userId" />
@@ -49,6 +60,10 @@
 </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'
 import { t } from '@nextcloud/l10n'
 
@@ -61,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 {
 
@@ -68,6 +84,7 @@ export default {
 
 	components: {
 		AvatarWrapper,
+		AccountOff,
 		NcButton,
 		VideoBackground,
 		NcLoadingIcon,
@@ -118,9 +135,23 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isPresenterOverlay: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
-	emits: ['click-video'],
+	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 {
@@ -152,6 +183,8 @@ export default {
 				'video-container-stripe': this.isStripe,
 				'video-container-big': this.isBig,
 				'video-container-small': this.isSmall,
+				presenter: this.isPresenterOverlay && this.mouseover,
+				'presenter-overlay': this.isPresenterOverlay,
 				'hover-shadow': this.isSelectable && this.mouseover,
 				speaking: this.localMediaModel.attributes.speaking,
 			}
@@ -203,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: {
@@ -401,7 +438,12 @@ export default {
 	margin: auto;
 }
 
-.localVideoContainer:after {
+.presenter-overlay,
+.presenter-overlay * {
+	border-radius: 50%;
+}
+
+.localVideoContainer::after {
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -410,13 +452,18 @@ export default {
 	border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 }
 
-.hover-shadow:after {
+.presenter-overlay::after {
+	border-radius: 50%;
+	z-index: 1;
+}
+
+.hover-shadow::after {
 	content: '';
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
 }
 
-.speaking:after {
+.speaking::after {
 	content: '';
 	box-shadow: inset 0 0 0 2px white;
 }
@@ -445,4 +492,33 @@ export default {
 		}
 	}
 }
+
+.dev-mode-video--self {
+	object-fit: cover !important;
+	border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
+
+	.presenter-overlay & {
+		border-radius: 50%;
+	}
+}
+
+.presenter-icon__hide {
+	position: absolute;
+	color: white;
+	left: calc(50% - var(--default-clickable-area) / 2);
+	top: calc(100% - var(--default-grid-baseline) - var(--default-clickable-area));
+	opacity: 0.7;
+	background-color: rgba(0, 0, 0, 0.5);
+	border-radius: 50%;
+	padding: 6px;
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
+	z-index: 2; // Above video and its border
+
+	&:hover {
+		cursor: pointer;
+		opacity: 0.9;
+	}
+
+}
 </style>
diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
index 9194ffde7ad..4ab92656c8a 100644
--- a/src/components/CallView/shared/PresenterOverlay.vue
+++ b/src/components/CallView/shared/PresenterOverlay.vue
@@ -13,7 +13,17 @@
 		:y="10"
 		@dragging="isDragging = true"
 		@dragstop="isDragging = false">
-		<VideoVue :token="token"
+		<LocalVideo v-if="isLocalPresenter"
+			class="presenter-overlay__video"
+			:token="token"
+			:local-media-model="localMediaModel"
+			:local-call-participant-model="model"
+			is-presenter-overlay
+			un-selectable
+			hide-bottom-bar
+			@click-presenter="$emit('click')" />
+		<VideoVue v-else
+			:token="token"
 			:class="{ 'dragging': isDragging }"
 			class="presenter-overlay__video"
 			:model="model"
@@ -47,6 +57,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import LocalVideo from './LocalVideo.vue'
 import VideoVue from './VideoVue.vue'
 
 export default {
@@ -56,6 +67,7 @@ export default {
 		AccountBox,
 		VueDraggableResizable,
 		NcButton,
+		LocalVideo,
 		VideoVue,
 	},
 
@@ -79,6 +91,16 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+
+		isLocalPresenter: {
+			type: Boolean,
+			default: false,
+		},
+
+		localMediaModel: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	emits: ['click'],
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index bc2756f5f0b..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 {
@@ -732,10 +758,10 @@ export default {
 }
 
 .presenter-icon__hide {
-	position: relative;
+	position: absolute;
 	color: white;
-	left: 50%;
-	transform: translate(-50%, calc(var(--default-clickable-area) * -1));
+	left: calc(50% - var(--default-clickable-area) / 2);
+	top: calc(100% - var(--default-grid-baseline) - var(--default-clickable-area));
 	opacity: 0.7;
 	background-color: rgba(0, 0, 0, 0.5);
 	border-radius: 50%;