diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 5b98e8d9616..eb7ef111278 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -101,3 +101,26 @@ $chat-line-height: 1.6em;
 		transition: all 150ms ease-in-out;
 	}
 }
+
+.slide {
+	&-enter {
+		transform: translateY(-50%);
+		opacity: 0;
+	}
+	&-enter-to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	&-leave {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	&-leave-to {
+		transform: translateY(-50%);
+		opacity: 0;
+	}
+	&-enter-active,
+	&-leave-active {
+		transition: all 150ms ease-in-out;
+	}
+}
\ No newline at end of file
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 03c10a0cca5..a7dbf826841 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -20,104 +20,118 @@
 -->
 
 <template>
-	<div class="wrapper" :style="wrapperStyle">
-		<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
-			<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
-				class="grid-navigation grid-navigation__previous"
-				@click="handleClickPrevious">
-				<ChevronLeft decorative
-					:size="24" />
-			</button>
-			<div
-				ref="grid"
-				class="grid"
-				:style="gridStyle"
-				@mousemove="handleMovement"
-				@keydown="handleMovement">
-				<template v-if="!devMode">
-					<EmptyCallView v-if="videos.length === 0 &&!isStripe" class="video" :is-grid="true" />
-					<template v-for="callParticipantModel in displayedVideos">
-						<Video
-							:key="callParticipantModel.attributes.peerId"
-							:class="{'video': !isStripe}"
-							:show-video-overlay="showVideoOverlay"
-							:token="token"
-							:model="callParticipantModel"
-							:is-grid="true"
-							:show-talking-highlight="!isStripe"
-							:is-stripe="isStripe"
-							:is-promoted="sharedDatas[callParticipantModel.attributes.peerId].promoted"
-							:is-selected="isSelected(callParticipantModel)"
-							:fit-video="false"
-							:video-container-aspect-ratio="videoContainerAspectRatio"
-							:video-background-blur="videoBackgroundBlur"
-							: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>
+	<div>
+		<button v-if="isStripe"
+			class="stripe--collapse grid-navigation"
+			@click="handleToggleStripes">
+			<ChevronUp v-if="!stripeOpen"
+				decorative
+				:size="24" />
+			<ChevronDown v-if="stripeOpen"
+				decorative
+				:size="24" />
+		</button>
+		<transition name="slide">
+			<div v-if="isStripe && stripeOpen || !isStripe" class="wrapper" :style="wrapperStyle">
+				<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
+					<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
+						class="grid-navigation grid-navigation__previous"
+						@click="handleClickPrevious">
+						<ChevronLeft decorative
+							:size="24" />
+					</button>
 					<div
-						v-for="video in displayedVideos"
-						:key="video"
-						class="dev-mode-video video"
-						v-text="video" />
-					<h1 class="dev-mode__title">
-						Dev mode on ;-)
-					</h1>
-				</template>
+						ref="grid"
+						class="grid"
+						:style="gridStyle"
+						@mousemove="handleMovement"
+						@keydown="handleMovement">
+						<template v-if="!devMode">
+							<EmptyCallView v-if="videos.length === 0 &&!isStripe" class="video" :is-grid="true" />
+							<template v-for="callParticipantModel in displayedVideos">
+								<Video
+									:key="callParticipantModel.attributes.peerId"
+									:class="{'video': !isStripe}"
+									:show-video-overlay="showVideoOverlay"
+									:token="token"
+									:model="callParticipantModel"
+									:is-grid="true"
+									:show-talking-highlight="!isStripe"
+									:is-stripe="isStripe"
+									:is-promoted="sharedDatas[callParticipantModel.attributes.peerId].promoted"
+									:is-selected="isSelected(callParticipantModel)"
+									:fit-video="false"
+									:video-container-aspect-ratio="videoContainerAspectRatio"
+									:video-background-blur="videoBackgroundBlur"
+									: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>
+							<div
+								v-for="video in displayedVideos"
+								:key="video"
+								class="dev-mode-video video"
+								v-text="video" />
+							<h1 class="dev-mode__title">
+								Dev mode on ;-)
+							</h1>
+						</template>
+					</div>
+					<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
+						class="grid-navigation grid-navigation__next"
+						@click="handleClickNext">
+						<ChevronRight decorative
+							:size="24" />
+					</button>
+				</div>
+				<LocalVideo
+					v-if="isStripe"
+					ref="localVideo"
+					class="video"
+					:fit-video="true"
+					:is-stripe="true"
+					:local-media-model="localMediaModel"
+					:video-container-aspect-ratio="videoContainerAspectRatio"
+					:local-call-participant-model="localCallParticipantModel"
+					@switchScreenToId="1"
+					@click-video="handleClickLocalVideo" />
+				<!-- page indicator (disabled) -->
+				<div
+					v-if="numberOfPages !== 0 && hasPagination && false"
+					class="pages-indicator">
+					<div v-for="(page, index) in numberOfPages"
+						:key="index"
+						class="pages-indicator__dot"
+						:class="{'pages-indicator__dot--active': index === currentPage }" />
+				</div>
+				<div v-if="devMode" 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>
 			</div>
-			<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
-				class="grid-navigation grid-navigation__next"
-				@click="handleClickNext">
-				<ChevronRight decorative
-					:size="24" />
-			</button>
-		</div>
-		<LocalVideo
-			v-if="isStripe"
-			ref="localVideo"
-			class="video"
-			:fit-video="true"
-			:is-stripe="true"
-			:local-media-model="localMediaModel"
-			:video-container-aspect-ratio="videoContainerAspectRatio"
-			:local-call-participant-model="localCallParticipantModel"
-			@switchScreenToId="1"
-			@click-video="handleClickLocalVideo" />
-		<!-- page indicator (disabled) -->
-		<div
-			v-if="numberOfPages !== 0 && hasPagination && false"
-			class="pages-indicator">
-			<div v-for="(page, index) in numberOfPages"
-				:key="index"
-				class="pages-indicator__dot"
-				:class="{'pages-indicator__dot--active': index === currentPage }" />
-		</div>
-		<div v-if="devMode" 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>
+		</transition>
 	</div>
 </template>
 
@@ -130,6 +144,8 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import EmptyCallView from '../shared/EmptyCallView'
 import ChevronRight from 'vue-material-design-icons/ChevronRight'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
+import ChevronUp from 'vue-material-design-icons/ChevronUp'
+import ChevronDown from 'vue-material-design-icons/ChevronDown'
 
 export default {
 	name: 'Grid',
@@ -140,6 +156,8 @@ export default {
 		EmptyCallView,
 		ChevronRight,
 		ChevronLeft,
+		ChevronUp,
+		ChevronDown,
 	},
 
 	props: {
@@ -242,6 +260,8 @@ export default {
 			showVideoOverlay: true,
 			// Timer for the videos bottom bar
 			showVideoOverlayTimer: null,
+			// State of the stripe
+			stripeOpen: true,
 		}
 	},
 
@@ -649,12 +669,20 @@ export default {
 			return callParticipantModel.attributes.peerId === this.$store.getters.selectedVideoPeerId
 		},
 
+		handleToggleStripe() {
+			if (this.stripeOpen) {
+				this.stripeOpen = false
+			} else {
+				this.stripeOpen = true
+			}
+		},
 	},
 }
 
 </script>
 
 <style lang="scss" scoped>
+@import '../../../assets/variables.scss';
 
 .wrapper {
 	width: 100%;
@@ -774,4 +802,10 @@ export default {
 	}
 }
 
+.stripe-toggle {
+	position: absolute;
+	top: -22px;
+	right: 44px;
+}
+
 </style>