diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index a7a10b1e0f2..bd1d42338fc 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="selectedVideoPeerId"
@@ -78,11 +80,22 @@
 						:is-one-to-one="isOneToOne"
 						:is-sidebar="isSidebar"
 						@force-promote-video="forcePromotedModel = $event" />
+
+					<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"
@@ -92,6 +105,7 @@
 					:local-call-participant-model="localCallParticipantModel"
 					:shared-datas="sharedDatas"
 					v-bind="$attrs"
+					:dev-mode.sync="devMode"
 					@select-video="handleSelectVideo"
 					@click-local-video="handleClickLocalVideo" />
 
@@ -120,6 +134,7 @@
 
 <script>
 import debounce from 'debounce'
+import { ref } from 'vue'
 
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -131,9 +146,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'
@@ -146,13 +163,14 @@ export default {
 
 	components: {
 		EmptyCallView,
-		ViewerOverlayCallView,
 		Grid,
 		LocalVideo,
 		PresenterOverlay,
 		ReactionToaster,
 		Screen,
+		VideoBottomBar,
 		VideoVue,
+		ViewerOverlayCallView,
 	},
 
 	props: {
@@ -173,10 +191,14 @@ export default {
 	},
 
 	setup() {
+		// For debug and screenshot purposes. Set to true to enable
+		const devMode = ref(false)
+
 		return {
 			localMediaModel,
 			localCallParticipantModel,
 			callParticipantCollection,
+			devMode,
 		}
 	},
 
@@ -329,7 +351,7 @@ export default {
 		},
 
 		showEmptyCallView() {
-			return !this.callParticipantModels.length && !this.screenSharingActive
+			return !this.callParticipantModels.length && !this.screenSharingActive && !this.devMode
 		},
 
 		supportedReactions() {
@@ -440,6 +462,11 @@ export default {
 
 	methods: {
 		t,
+		// Placeholder data for devMode and screenshotMode
+		placeholderImage,
+		placeholderName,
+		placeholderModel,
+		placeholderSharedData,
 		/**
 		 * Updates data properties that depend on the CallParticipantModels.
 		 *
@@ -752,6 +779,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 c42e1366860..06f87a455b7 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -57,11 +57,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)"
@@ -71,11 +71,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
@@ -83,6 +80,7 @@
 							: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"
@@ -96,7 +94,7 @@
 						</template>
 					</NcButton>
 				</div>
-				<LocalVideo v-if="isStripe && !isRecording && !screenshotMode"
+				<LocalVideo v-if="isStripe && !isRecording"
 					ref="localVideo"
 					class="video"
 					:is-stripe="true"
@@ -104,21 +102,39 @@
 					:token="token"
 					:local-media-model="localMediaModel"
 					:local-call-participant-model="localCallParticipantModel"
+					:screenshot-mode-url="screenshotMode ? placeholderImage(8) : ''"
 					@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>
@@ -126,6 +142,7 @@
 
 <script>
 import debounce from 'debounce'
+import { ref } from 'vue'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -135,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'
 
@@ -145,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'
 
 // Max number of videos per page. `0`, the default value, means no cap
@@ -176,17 +193,6 @@ export default {
 			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;
 		 */
@@ -239,10 +245,16 @@ export default {
 		},
 	},
 
-	emits: ['select-video', 'click-local-video'],
+	emits: ['select-video', 'click-local-video', 'update:devMode'],
 
 	setup() {
+		// The number of dummy videos in dev mode
+		const dummies = ref(4)
+		const screenshotMode = ref(false)
+
 		return {
+			dummies,
+			screenshotMode,
 			videosCap,
 			videosCapEnforced,
 		}
@@ -489,7 +501,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
 			}
 
@@ -540,6 +552,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: {
@@ -660,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.$emit('update:devMode', false)
 		},
-
 		// whenever the document is resized, re-set the 'clientWidth' variable
 		handleResize(event) {
 			// TODO: properly handle resizes when not on first page:
@@ -1034,17 +995,12 @@ 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%;
@@ -1069,24 +1025,37 @@ 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;
 
-	& 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 8b49c055f0d..27f74abbfb7 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"
@@ -23,7 +28,7 @@
 				:size="avatarSize"
 				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" />
@@ -118,6 +123,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		screenshotModeUrl: {
+			type: String,
+			default: '',
+		}
 	},
 
 	emits: ['click-video'],
@@ -445,4 +454,9 @@ export default {
 		}
 	}
 }
+
+.dev-mode-video--self {
+	object-fit: cover !important;
+	border-radius: calc(var(--default-clickable-area) / 2);
+}
 </style>