diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 08eeff71bfe..2e9d073f92d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -149,6 +149,7 @@ the main body of the message as well as a quote.
 			ref="messageButtonsBar"
 			:is-action-menu-open.sync="isActionMenuOpen"
 			:is-emoji-picker-open.sync="isEmojiPickerOpen"
+			:is-reactions-menu-open.sync="isReactionsMenuOpen"
 			:message-api-data="messageApiData"
 			:message-object="messageObject"
 			v-bind="$props"
@@ -357,6 +358,7 @@ export default {
 			seen: false,
 			isActionMenuOpen: false,
 			isEmojiPickerOpen: false,
+			isReactionsMenuOpen: false,
 			detailedReactionsRequested: false,
 		}
 	},
@@ -507,7 +509,7 @@ export default {
 		},
 
 		showMessageButtonsBar() {
-			return !this.isSystemMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen)
+			return !this.isSystemMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isReactionsMenuOpen)
 		},
 
 		isTemporaryUpload() {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index cbfabbd5ef7..65e7f5d198a 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -21,11 +21,12 @@
 
 <template>
 	<!-- Message Actions -->
-	<div class="message-buttons-bar">
-		<template v-if="page === 0">
+	<div v-click-outside="handleClickOutside"
+		class="message-buttons-bar">
+		<template v-if="!isReactionsMenuOpen">
 			<Button v-if="acceptsReactions"
 				type="tertiary"
-				@click="page = 1">
+				@click="openReactionsMenu">
 				<template #icon>
 					<EmoticonOutline :size="20" />
 				</template>
@@ -95,9 +96,9 @@
 			</Actions>
 		</template>
 
-		<template v-if="page === 1">
+		<template v-if="isReactionsMenuOpen">
 			<Button type="tertiary"
-				@click="page = 0">
+				@click="closeReactionsMenu">
 				<template #icon>
 					<ArrowLeft :size="20" />
 				</template>
@@ -278,15 +279,17 @@ export default {
 			type: Object,
 			required: true,
 		},
+
+		isReactionsMenuOpen: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	data() {
 		return {
 			// Shows/hides the message forwarder component
 			showForwarder: false,
-
-			// The pagination of the buttons menu
-			page: 0,
 		}
 	},
 
@@ -420,7 +423,7 @@ export default {
 					actorId: this.actorId,
 				})
 			}
-
+			this.closeReactionsMenu()
 		},
 
 		handleDelete() {
@@ -442,6 +445,22 @@ export default {
 		onEmojiPickerClose() {
 			this.$emit('update:isEmojiPickerOpen', false)
 		},
+
+		openReactionsMenu() {
+			this.$emit('update:isReactionsMenuOpen', true)
+		},
+
+		handleClickOutside(event) {
+			// Making sure that the click is outside the MessageButtonsBar
+			if (event.path.indexOf(this.$el) !== -1) {
+				return
+			}
+			this.closeReactionsMenu()
+		},
+
+		closeReactionsMenu() {
+			this.$emit('update:isReactionsMenuOpen', false)
+		},
 	},
 }
 </script>