diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 1cccb80ddc4..46327a4d6d3 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -21,8 +21,8 @@
 
 <template>
 	<div class="wrapper" :style="wrapperStyle">
-		<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
-			<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
+		<div :class="{'stripe-wrapper': isStripe, 'wrapper': !isStripe}">
+			<button v-if="hasPreviousPage && gridWidth > 0 && showVideoOverlay"
 				class="grid-navigation grid-navigation__previous"
 				@click="handleClickPrevious">
 				<ChevronLeft decorative
@@ -54,17 +54,6 @@
 							:shared-data="sharedDatas[callParticipantModel.attributes.peerId]"
 							@click-video="handleClickVideo($event, callParticipantModel.attributes.peerId)" />
 					</template>
-					<LocalVideo
-						v-if="!isStripe"
-						ref="localVideo"
-						class="video"
-						:is-grid="true"
-						:fit-video="isStripe"
-						:local-media-model="localMediaModel"
-						:video-container-aspect-ratio="videoContainerAspectRatio"
-						:local-call-participant-model="localCallParticipantModel"
-						@switchScreenToId="1"
-						@click-video="handleClickLocalVideo" />
 				</template>
 				<!-- Grid developer mode -->
 				<template v-else>
@@ -76,9 +65,20 @@
 					<h1 class="dev-mode__title">
 						Dev mode on ;-)
 					</h1>
+					<LocalVideo
+						v-if="!isStripe"
+						ref="localVideo"
+						class="video"
+						:is-grid="true"
+						:fit-video="isStripe"
+						:local-media-model="localMediaModel"
+						:video-container-aspect-ratio="videoContainerAspectRatio"
+						:local-call-participant-model="localCallParticipantModel"
+						@switchScreenToId="1"
+						@click-video="handleClickLocalVideo" />
 				</template>
 			</div>
-			<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
+			<button v-if="hasNextPage && gridWidth > 0 && showVideoOverlay"
 				class="grid-navigation grid-navigation__next"
 				@click="handleClickNext">
 				<ChevronRight decorative
@@ -125,7 +125,6 @@
 import debounce from 'debounce'
 import Video from '../shared/Video'
 import LocalVideo from '../shared/LocalVideo'
-import { EventBus } from '../../../services/EventBus'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import EmptyCallView from '../shared/EmptyCallView'
 import ChevronRight from 'vue-material-design-icons/ChevronRight'
@@ -227,15 +226,10 @@ export default {
 		return {
 			gridWidth: 0,
 			gridHeight: 0,
-			// Array of videos that are being displayed in the grid at any
-			// given moment
-			displayedVideos: [],
 			// Columns of the grid at any given moment
 			columns: 0,
 			// Rows of the grid at any given moment
 			rows: 0,
-			// Grid pages at any given moment
-			numberOfPages: 0,
 			// The current page
 			currentPage: 0,
 			// Videos controls and name
@@ -257,18 +251,14 @@ export default {
 			}
 		},
 
-		// Number of video components (includes localvideo if not in dev mode)
+		// Number of video components (it does not include the local video)
 		videosCount() {
-			if (this.devMode || this.isStripe) {
-				return this.videos.length
-			} else {
+			if (!this.isStripe && this.videos.length === 0) {
 				// Count the emptycontent as a grid element
-				if (this.videos.length === 0) {
-					return 2
-				}
-				// Add the local video to the count
-				return this.videos.length + 1
+				return 1
 			}
+
+			return this.videos.length
 		},
 		videoWidth() {
 			return this.gridWidth / this.columns
@@ -276,6 +266,22 @@ export default {
 		videoHeight() {
 			return this.gridHeight / this.rows
 		},
+
+		// Array of videos that are being displayed in the grid at any given
+		// moment
+		displayedVideos() {
+			if (!this.slots) {
+				return []
+			}
+
+			// Slice the `videos` array to display the current page of videos
+			if (((this.currentPage + 1) * this.slots) >= this.videos.length) {
+				return this.videos.slice(this.currentPage * this.slots)
+			}
+
+			return this.videos.slice(this.currentPage * this.slots, (this.currentPage + 1) * this.slots)
+		},
+
 		// The aspect ratio of the grid (in terms of px)
 		gridAspectRatio() {
 			return (this.gridWidth / this.gridHeight).toPrecision([2])
@@ -302,8 +308,15 @@ export default {
 		},
 
 		// Number of grid slots at any given moment
+		// The local video always takes one slot if the grid view is not shown
+		// as a stripe.
 		slots() {
-			return this.rows * this.columns
+			return this.isStripe ? this.rows * this.columns : this.rows * this.columns - 1
+		},
+
+		// Grid pages at any given moment
+		numberOfPages() {
+			return Math.ceil(this.videosCount / this.slots)
 		},
 
 		// Hides or displays the `grid-navigation next` button
@@ -365,10 +378,6 @@ export default {
 				return 'height: 100%'
 			}
 		},
-		// Determines when to show the stripe navigation buttons
-		showNavigation() {
-			return this.gridWidth > 0 && this.isStripe && this.videosCount > 0 && this.showVideoOverlay
-		},
 
 		// Blur radius for each background in the grid
 		videoBackgroundBlur() {
@@ -380,12 +389,6 @@ export default {
 		// If the video array size changes, rebuild the grid
 		'videos.length': function() {
 			this.makeGrid()
-			if (this.hasPagination) {
-				this.setNumberOfPages()
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
 		},
 		// TODO: rebuild the grid to have optimal for last page
 		// Exception for when navigating in and away from the last page of the
@@ -408,17 +411,21 @@ export default {
 			console.debug('previousGridWidth: ', this.gridWidth, 'previousGridHeight: ', this.gridHeight)
 			console.debug('newGridWidth: ', this.gridWidth, 'newGridHeight: ', this.gridHeight)
 			this.$nextTick(this.makeGrid)
-			if (this.hasPagination) {
-				this.setNumberOfPages()
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
+
+			// Reset current page when switching between stripe and full grid,
+			// as the previous page is meaningless in the new mode.
+			this.currentPage = 0
 		},
 		sidebarStatus() {
 			// Handle the resize after the sidebar animation has completed
 			setTimeout(this.handleResize, 500)
 		},
+
+		numberOfPages() {
+			if (this.currentPage >= this.numberOfPages) {
+				this.currentPage = this.numberOfPages - 1
+			}
+		},
 	},
 
 	// bind event handlers to the `handleResize` method
@@ -426,12 +433,6 @@ export default {
 		window.addEventListener('resize', this.handleResize)
 		subscribe('navigation-toggled', this.handleResize)
 		this.makeGrid()
-		if (this.hasPagination) {
-			this.setNumberOfPages()
-			// Set the current page to 0
-			// TODO: add support for keeping position in the videos array when resizing
-			this.currentPage = 0
-		}
 	},
 	beforeDestroy() {
 		window.removeEventListener('resize', this.handleResize)
@@ -447,12 +448,6 @@ export default {
 			// current position in the videos array is lost (first element
 			// in the grid goes back to be first video)
 			debounce(this.makeGrid(), 200)
-			if (this.hasPagination) {
-				this.setNumberOfPages()
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
 		},
 
 		// Find the right size if the grid in rows and columns (we already know
@@ -464,7 +459,6 @@ export default {
 			if (this.videos.length === 0) {
 				this.columns = 0
 				this.rows = 0
-				this.displayedVideos = []
 				return
 			}
 
@@ -491,24 +485,6 @@ export default {
 			} else {
 				this.shrinkGrid(this.videosCount)
 			}
-			// Once the grid is done, populate it with video components
-			if (this.devMode || this.isStripe) {
-				this.displayedVideos = this.videos.slice(0, this.rows * this.columns)
-			} else {
-				// `- 1` because we a ccount for the localVideo component (see template)
-				this.displayedVideos = this.videos.slice(0, this.rows * this.columns - 1)
-			}
-			// Send event to display hint in the topbar component if there's an
-			// overflow of videos (only if in full-grid mode, not stripe)
-			if (this.hasVideoOverflow) {
-				if (!this.isStripe) {
-					EventBus.$emit('toggleLayoutHint', true)
-				} else {
-				// Remove the hint if user resizes
-					EventBus.$emit('toggleLayoutHint', false)
-				}
-			}
-
 		},
 
 		// Fine tune the number of rows and columns of the grid
@@ -524,7 +500,7 @@ export default {
 
 			let currentColumns = this.columns
 			let currentRows = this.rows
-			let currentSlots = currentColumns * currentRows
+			let currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
 
 			// Run this code only if we don't have an 'overflow' of videos. If the
 			// videos are populating the grid, there's no point in shrinking it.
@@ -557,7 +533,7 @@ export default {
 						currentColumns--
 					}
 
-					currentSlots = currentColumns * currentRows
+					currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
 
 					// Check that there are still enough slots available
 					if (numberOfVideos > currentSlots) {
@@ -570,7 +546,7 @@ export default {
 						currentRows--
 					}
 
-					currentSlots = currentColumns * currentRows
+					currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
 
 					// Check that there are still enough slots available
 					if (numberOfVideos > currentSlots) {
@@ -589,11 +565,6 @@ export default {
 			this.rows = currentRows
 		},
 
-		// Set the current number of pages
-		setNumberOfPages() {
-			this.numberOfPages = Math.ceil(this.videosCount / this.slots)
-		},
-
 		// The last grid page is very likely not to have the same number of
 		// elements as the previous pages so the grid needs to be tweaked
 		// accordingly
@@ -605,23 +576,13 @@ export default {
 		// this.shrinkGrid(this.displayedVideos.length)
 		// },
 
-		// Slice the `videos` array to display the next set of videos
 		handleClickNext() {
 			this.currentPage++
 			console.debug('handleclicknext, ', 'currentPage ', this.currentPage, 'slots ', this.slot, 'videos.length ', this.videos.length)
-			if (((this.currentPage + 1) * this.slots) >= this.videos.length) {
-				this.displayedVideos = this.videos.slice(this.currentPage * this.slots)
-			} else {
-				this.displayedVideos = this.videos.slice(this.currentPage * this.slots, (this.currentPage + 1) * this.slots)
-			}
-			console.debug('slicevalues', (this.currentPage) * this.slots, this.currentPage * this.slots)
 		},
-		// Slice the `videos` array to display the previous set of videos
 		handleClickPrevious() {
 			this.currentPage--
 			console.debug('handleclickprevious, ', 'currentPage ', this.currentPage, 'slots ', this.slots, 'videos.length ', this.videos.length)
-			this.displayedVideos = this.videos.slice((this.currentPage) * this.slots, (this.currentPage + 1) * this.slots)
-			console.debug('slicevalues', (this.currentPage) * this.slots, (this.currentPage + 1) * this.slots)
 		},
 
 		handleMovement() {
@@ -679,9 +640,9 @@ export default {
 	width: 300px;
 }
 
-.pagination-wrapper {
+.stripe-wrapper {
 	width: calc(100% - 300px);
-	position:relative
+	position: relative;
 }
 
 .dev-mode-video {
@@ -734,7 +695,8 @@ export default {
 	height: 44px;
 	background-color: white;
 	opacity: 0.6 !important;
-	top: 12px;
+	/* Center icons vertically in the grid view */
+	top: calc(50% - 22px);
 	z-index: 2;
 	box-shadow: 0 0 4px var(--color-box-shadow);
 	padding: 0;
@@ -754,6 +716,10 @@ export default {
 	}
 }
 
+.stripe-wrapper .grid-navigation {
+	top: 12px;
+}
+
 .pages-indicator {
 	position: absolute;
 	right: 50%;
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 4765a79ae9f..a8c4332b59d 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -23,34 +23,13 @@
 	<div class="top-bar">
 		<CallButton class="top-bar__button" />
 		<!-- Call layout switcher -->
-		<Popover v-if="isInCall"
-			class="top-bar__button"
-			trigger="manual"
-			:open="showLayoutHint && !hintDismissed"
-			@auto-hide="showLayoutHint=false">
-			<Actions slot="trigger">
-				<ActionButton v-if="isInCall"
-					:icon="changeViewIconClass"
-					@click="changeView">
-					{{ changeViewText }}
-				</actionbutton>
-			</Actions>
-			<div class="hint">
-				{{ layoutHintText }}
-				<div class="hint__actions">
-					<button
-						class="hint__button"
-						@click="showLayoutHint=false, hintDismissed=true">
-						{{ t('spreed', 'Dismiss') }}
-					</button>
-					<button
-						class="hint__button primary"
-						@click="changeView">
-						{{ t('spreed', 'Use speaker view') }}
-					</button>
-				</div>
-			</div>
-		</Popover>
+		<Actions slot="trigger">
+			<ActionButton v-if="isInCall"
+				:icon="changeViewIconClass"
+				@click="changeView">
+				{{ changeViewText }}
+			</actionbutton>
+		</Actions>
 		<!-- sidebar toggle -->
 		<Actions
 			v-shortkey="['f']"
@@ -164,10 +143,8 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import CallButton from './CallButton'
-import { EventBus } from '../../services/EventBus'
 import BrowserStorage from '../../services/BrowserStorage'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
@@ -190,7 +167,6 @@ export default {
 		ActionInput,
 		ActionLink,
 		CallButton,
-		Popover,
 		ActionSeparator,
 	},
 
@@ -203,8 +179,6 @@ export default {
 
 	data() {
 		return {
-			showLayoutHint: false,
-			hintDismissed: false,
 			// The conversation's password
 			password: '',
 			// Switch for the password-editing operation
@@ -258,9 +232,6 @@ export default {
 			}
 		},
 
-		layoutHintText() {
-			return t('Spreed', 'Too many videos to fit in the window. Maximize the window or switch to "speaker view" for a better experience.')
-		},
 		isFileConversation() {
 			return this.conversation.objectType === 'file' && this.conversation.objectId
 		},
@@ -372,8 +343,6 @@ export default {
 		document.addEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.addEventListener('MSFullscreenChange', this.fullScreenChanged, false)
 		document.addEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
-		// Add call layout hint listener
-		EventBus.$on('toggleLayoutHint', this.handleToggleLayoutHint)
 	},
 
 	beforeDestroy() {
@@ -381,8 +350,6 @@ export default {
 		document.removeEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('MSFullscreenChange', this.fullScreenChanged, false)
 		document.removeEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
-		// Remove call layout hint listener
-		EventBus.$off('toggleLayoutHint', this.handleToggleLayoutHint)
 	},
 
 	methods: {
@@ -437,7 +404,6 @@ export default {
 		changeView() {
 			this.$store.dispatch('isGrid', !this.isGrid)
 			this.$store.dispatch('selectedVideoPeerId', null)
-			this.showLayoutHint = false
 		},
 		async toggleGuests() {
 			await this.$store.dispatch('toggleGuests', {
@@ -512,9 +478,6 @@ export default {
 			this.$store.dispatch('isRenamingConversation', true)
 			this.$store.dispatch('showSidebar')
 		},
-		handleToggleLayoutHint(display) {
-			this.showLayoutHint = display
-		},
 		forceMuteOthers() {
 			callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 				callParticipantModel.forceMute()
@@ -551,18 +514,4 @@ export default {
 	}
 
 }
-
-.hint {
-	padding: 12px;
-	max-width: 300px;
-	text-align: left;
-	&__button {
-		height: $clickable-area;
-	}
-	&__actions{
-		display: flex;
-		justify-content: space-between;
-		padding-top:4px;
-	}
-}
 </style>