diff --git a/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html b/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html
index 88e7bde63aa2..ed3edac13993 100644
--- a/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html
+++ b/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html
@@ -1,31 +1,49 @@
 <template name="mailMessagesInstructions">
 	<main class="rc-user-info__scroll">
-	<div class="rc-input rc-input--usernames">
-		<label class="rc-input__label">
-			<div class="rc-input__title">{{_ "To_users"}}</div>
-			<div class="rc-input__wrapper">
-				<div class="rc-input__icon">
-					{{> icon block="rc-input__icon-svg" icon="at"}}
+		{{#if selectedMessages}}
+			<div class="mail-messages__instructions mail-messages__instructions--selected">
+				<div class="mail-messages__instructions-wrapper">
+					{{> icon block="mail-messages__instructions-icon" icon="modal-success"}}
+					<div class="mail-messages__instructions-text">
+							<span class="mail-messages__instructions-text-selected">{{selectedMessages.length}} Messages selected</span>
+							<span>Click here to clear the selection</span>
+					</div>
 				</div>
-				<div class="rc-tags">
-					{{#each user in selectedUsers}}
-						{{> tag user}}
-					{{/each}}
-					<input type="text" class="rc-tags__input" placeholder="{{_ "Username_Placeholder"}}" name="users" autocomplete="off"/>
+			</div>
+		{{else}}
+			<div class="mail-messages__instructions">
+				<div class="mail-messages__instructions-wrapper">
+					{{> icon block="mail-messages__instructions-icon" icon="hand-pointer"}}
+					<div class="mail-messages__instructions-text">
+							Click the messages you would like to send by e-mail
+					</div>
 				</div>
 			</div>
-			{{#with config}}
-				{{#if autocomplete 'isShowing'}}
-					<div class="fadeInDown">
+		{{/if}}
+		<div class="rc-input rc-input--usernames">
+			<label class="rc-input__label">
+				<div class="rc-input__title">{{_ "To_users"}}</div>
+				<div class="rc-input__wrapper">
+					<div class="rc-input__icon">
+						{{> icon block="rc-input__icon-svg" icon="at"}}
+					</div>
+					<div class="rc-tags">
+						{{#each user in selectedUsers}}
+							{{> tag user}}
+						{{/each}}
+						<input type="text" class="rc-tags__input" placeholder="{{_ "Username_Placeholder"}}" name="users" autocomplete="off"/>
+					</div>
+				</div>
+				{{#with config}}
+					{{#if autocomplete 'isShowing'}}
 						{{#if autocomplete 'isLoaded'}}
 							{{> popupList data=config items=items}}
 						{{/if}}
-					</div>
-				{{/if}}
-			{{/with}}
-		</label>
-	</div>
-	<div class="rc-input rc-input--emails">
+					{{/if}}
+				{{/with}}
+			</label>
+		</div>
+		<div class="rc-input rc-input--emails">
 			<label class="rc-input__label">
 				<div class="rc-input__title">{{_ "To_additional_emails"}}</div>
 				<div class="rc-input__wrapper">
@@ -52,6 +70,14 @@
 				</div>
 			</label>
 		</div>
+
+		{{#if errorMessage}}
+			<div class="mail-messages__instructions mail-messages__instructions--warning">
+				<div class="mail-messages__instructions-wrapper">
+					<div class="mail-messages__instructions-text">{{errorMessage}}</div>
+				</div>
+			</div>
+		{{/if}}
 	</main>
 	<div class="rc-user-info__flex rc-user-info__row">
 		<button class="rc-button rc-button--outline js-cancel" title="{{_ 'Cancel'}}">{{_ 'Cancel'}}</button>
diff --git a/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.js b/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.js
index 91ae5ed1b6ea..d81a56fda523 100644
--- a/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.js
+++ b/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.js
@@ -1,6 +1,4 @@
 /* global AutoComplete Deps */
-
-import _ from 'underscore';
 import toastr from 'toastr';
 import resetSelection from '../resetSelection';
 
@@ -79,6 +77,9 @@ Template.mailMessagesInstructions.helpers({
 	selectedEmails() {
 		return Template.instance().selectedEmails.get();
 	},
+	selectedMessages() {
+		return Template.instance().selectedMessages.get();
+	},
 	config() {
 		const filter = Template.instance().userFilter;
 		return {
@@ -99,90 +100,62 @@ Template.mailMessagesInstructions.helpers({
 	},
 	items() {
 		return Template.instance().ac.filteredList();
+	},
+	errorMessage() {
+		return Template.instance().errorMessage.get();
 	}
 });
 
 Template.mailMessagesInstructions.events({
-	'click .js-cancel'(e, t) {
+	'click .js-cancel, click .mail-messages__instructions--selected'(e, t) {
 		t.reset(true);
 	},
-	'click .js-send'(e, t) {
-		t.$('.error').hide();
-		const $btn = t.$('button.send');
-		const oldBtnValue = $btn.html();
-		$btn.html(TAPi18n.__('Sending'));
-		const selectedMessages = $('.messages-box .message.selected');
-		let error = false;
-		if (selectedMessages.length === 0) {
-			t.$('.error-select').show();
-			error = true;
+	'click .js-send'(e, instance) {
+		const selectedUsers = instance.selectedUsers;
+		const selectedEmails = instance.selectedEmails;
+		const $emailsInput = instance.$('[name="emails"]');
+		const selectedMessages = instance.selectedMessages;
+		const subject = instance.$('[name="subject"]').val();
+
+		if (!selectedUsers.get().length && !selectedEmails.get().length && $emailsInput.val().trim() === '') {
+			instance.errorMessage.set(t('Mail_Message_Missing_to'));
+			return false;
 		}
-		if (t.$('input[name=to_emails]').val().trim()) {
-			const rfcMailPatternWithName = /^(?:.*<)?([a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*)(?:>?)$/;
-			const emails = t.$('input[name=to_emails]').val().trim().split(',');
-			const erroredEmails = [];
-			emails.forEach((email) => {
-				if (!rfcMailPatternWithName.test(email.trim())) {
-					erroredEmails.push(email.trim());
-				}
-			});
-			t.erroredEmails.set(erroredEmails);
-			if (erroredEmails.length > 0) {
-				t.$('.error-invalid-emails').show();
-				error = true;
+
+		if ($emailsInput.val() !== '') {
+			if (isEmail($emailsInput.val())) {
+				const emailsArr = selectedEmails.get();
+				emailsArr.push({text: $emailsInput.val()});
+				$('[name="emails"]').val('');
+				selectedEmails.set(emailsArr);
+			} else {
+				instance.errorMessage.set(t('Mail_Message_Invalid_emails', $emailsInput.val()));
+				return false;
 			}
-		} else if (!t.selectedUsers.get().length) {
-			t.$('.error-missing-to').show();
-			error = true;
 		}
-		if (error) {
-			return $btn.html(oldBtnValue);
+
+		if (!selectedMessages.get().length) {
+			instance.errorMessage.set(t('Mail_Message_No_messages_selected_select_all'));
+			return false;
 		}
+
 		const data = {
 			rid: Session.get('openedRoom'),
-			to_users: t.selectedUsers.get(),
-			to_emails: t.$('input[name=to_emails]').val().trim(),
-			subject: t.$('input[name=subject]').val().trim(),
-			messages: selectedMessages.map(function(i, message) {
-				return message.id;
-			}).toArray(),
+			to_users: selectedUsers.get().map(user => user.username),
+			to_emails: selectedEmails.get().map(email => email.text).toString(),
+			subject,
+			messages: selectedMessages.get(),
 			language: localStorage.getItem('userLanguage')
 		};
-		return Meteor.call('mailMessages', data, function(err, result) {
-			$btn.html(oldBtnValue);
+
+		Meteor.call('mailMessages', data, function(err, result) {
 			if (err != null) {
 				return handleError(err);
 			}
 			console.log(result);
-			toastr.success(TAPi18n.__('Your_email_has_been_queued_for_sending'));
-			return t.reset();
-		});
-	},
-	'click .select-all'(e, t) {
-		t.$('.error-select').hide();
-		const view = Blaze.getView($('.messages-box')[0]);
-		if (view != null) {
-			if (typeof view.templateInstance === 'function') {
-				const chat = ChatMessage.find({
-					rid: Session.get('openedRoom')
-				});
-				view.templateInstance().selectedMessages = _.pluck(chat && chat.fetch(), '_id');
-			}
-		}
-		return $('.messages-box .message').addClass('selected');
-	},
-	'autocompleteselect #to_users'(event, instance, doc) {
-		instance.selectedUsers.set(instance.selectedUsers.get().concat(doc.username));
-		event.currentTarget.value = '';
-		return event.currentTarget.focus();
-	},
-	'click .remove-to-user'() {
-		let users = Template.instance().selectedUsers.get();
-		users = _.reject(Template.instance().selectedUsers.get(), (_id) => {
-			return _id === this.valueOf();
+			toastr.success(t('Your_email_has_been_queued_for_sending'));
+			instance.reset(true);
 		});
-		Template.instance().selectedUsers.set(users);
-		return $('#to_users').focus();
 	},
 	'click .rc-input--usernames .rc-tags__tag'({target}, t) {
 		const {username} = Blaze.getData(target);
@@ -263,11 +236,27 @@ Template.mailMessagesInstructions.onRendered(function() {
 		usersArr.push(item);
 		users.set(usersArr);
 	});
+
+	const selectedMessages = this.selectedMessages;
+
+	$('.messages-box .message').on('click', function() {
+		const id = this.id;
+		const messages = selectedMessages.get();
+
+		if ($(this).hasClass('selected')) {
+			selectedMessages.set(messages.filter(message => message !== id));
+		} else {
+			selectedMessages.set(messages.concat(id));
+		}
+	});
 });
 
 Template.mailMessagesInstructions.onCreated(function() {
 	resetSelection(true);
 
+	this.selectedEmails = new ReactiveVar([]);
+	this.selectedMessages = new ReactiveVar([]);
+	this.errorMessage = new ReactiveVar('');
 	this.selectedUsers = new ReactiveVar([]);
 	this.userFilter = new ReactiveVar('');
 
@@ -301,16 +290,13 @@ Template.mailMessagesInstructions.onCreated(function() {
 			]
 
 		});
-
 	this.ac.tmplInst = this;
 
-	this.selectedEmails = new ReactiveVar([]);
-
-	this.autoCompleteCollection = new Mongo.Collection(null);
-	this.erroredEmails = new ReactiveVar([]);
 	this.reset = (bool) => {
 		this.selectedUsers.set([]);
 		this.selectedEmails.set([]);
+		this.selectedMessages.set([]);
+		this.errorMessage.set('');
 		resetSelection(bool);
 	};
 });
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 852bb7bafec6..e816aa715c8f 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1154,7 +1154,7 @@
   "mail-messages_description": "Permission to use the mail messages option",
   "Mail_Message_Invalid_emails": "You have provided one or more invalid emails: %s",
   "Mail_Message_Missing_to": "You must select one or more users or provide one or more email addresses, separated by commas.",
-  "Mail_Message_No_messages_selected_select_all": "You haven't selected any messages. Would you like to <a href='#' class='select-all'>select all</a> visible messages?",
+  "Mail_Message_No_messages_selected_select_all": "You haven't selected any messages",
   "Mail_Messages": "Mail Messages",
   "Mail_Messages_Instructions": "Choose which messages you want to send via email by clicking the messages",
   "Mail_Messages_Subject": "Here's a selected portion of %s messages",
diff --git a/packages/rocketchat-theme/client/imports/components/contextual-bar.css b/packages/rocketchat-theme/client/imports/components/contextual-bar.css
index 7f47ff0a04e8..9dd506a10afb 100644
--- a/packages/rocketchat-theme/client/imports/components/contextual-bar.css
+++ b/packages/rocketchat-theme/client/imports/components/contextual-bar.css
@@ -222,3 +222,67 @@
 		color: #9ea2a8;
 	}
 }
+
+.contextual-bar__content.mail-messages {
+	& .rc-popup-list {
+		z-index: 1;
+	}
+
+	& .rc-input:not(:last-child) {
+		margin-bottom: 2rem;
+	}
+}
+
+.mail-messages__instructions {
+	display: flex;
+	border-width: 1px;
+	border-color: var(--rc-color-alert-message-primary);
+	background: var(--rc-color-alert-message-primary-background);
+	border-radius: 2px;
+	color: var(--rc-color-alert-message-primary);
+	padding: 1.25rem;
+	margin-bottom: 3rem;
+
+	&--selected {
+		background: var(--rc-color-alert-message-secondary-background);
+		border-color: var(--rc-color-alert-message-secondary);
+		color: var(--rc-color-alert-message-secondary);
+
+		cursor: pointer;
+	}
+
+	&--warning {
+		color: var(--rc-color-alert-message-warning);
+		border-color: var(--rc-color-alert-message-warning);
+		background: var(--rc-color-alert-message-warning-background);
+	}
+
+	&-wrapper {
+		display: flex;
+		margin: 0 -10px;
+	}
+
+	&-icon {
+		font-size: 2rem;
+		margin: 0 10px;
+
+		&--hand-pointer {
+			transform: rotate3d(0, 0, 1, -25deg);
+			margin: 0 15px;
+			fill: currentColor;
+		}
+	}
+
+	&-text {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin: 0 10px;
+		display: flex;
+		flex-direction: column;
+		line-height: 1.2rem;
+
+		&-selected {
+			font-weight: 400;
+		}
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css
index 1341b68052a3..8caed14de318 100644
--- a/packages/rocketchat-theme/client/imports/general/variables.css
+++ b/packages/rocketchat-theme/client/imports/general/variables.css
@@ -24,6 +24,13 @@
 	--rc-color-button-primary: #1d74f5;
 	--rc-color-button-primary-light: #175cc4;
 
+	--rc-color-alert-message-primary: var(--rc-color-button-primary);
+	--rc-color-alert-message-primary-background: #f1f6ff;
+	--rc-color-alert-message-secondary: #7ca52b;
+	--rc-color-alert-message-secondary-background: #fafff1;
+	--rc-color-alert-message-warning: #d52d24;
+	--rc-color-alert-message-warning-background: #fff3f3;
+
 	--rc-color-primary: var(--color-dark);
 	--rc-color-primary-darkest: var(--color-darkest);
 	--rc-color-primary-dark: var(--color-dark-medium);
diff --git a/packages/rocketchat-ui-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg
index b31a84088ec9..0dc3c4aa913b 100644
--- a/packages/rocketchat-ui-master/public/icons.svg
+++ b/packages/rocketchat-ui-master/public/icons.svg
@@ -77,4 +77,5 @@
     <symbol viewBox="0 0 20 20" id="icon-file-sheets"><g transform="translate(1 1)" fill="#FFF" fill-rule="evenodd" opacity=".75"><circle cx="6.12" cy="6.12" r="6.12"/><path d="M4.32 5.04h12.96V18H4.32z"/></g></symbol>
     <symbol viewBox="0 0 24 24" id="icon-arrow-down"><path d="M18.585 12.1L12.5 18.185 6.415 12.1" stroke="currentColor" stroke-width="1.5" fill="none" fill-rule="evenodd"/></symbol>
     <symbol viewBox="0 0 320 512" id="icon-mobile"><path d="M192 416c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zM320 48v416c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h224c26.5 0 48 21.5 48 48zm-32 0c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v416c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V48z"/></symbol>
+    <symbol viewBox="0 0 448 512" id="icon-hand-pointer"><path d="M360.543 188.156c-17.46-28.491-54.291-37.063-82.138-19.693-15.965-20.831-42.672-28.278-66.119-20.385V60.25c0-33.222-26.788-60.25-59.714-60.25S92.857 27.028 92.857 60.25v181.902c-20.338-13.673-47.578-13.89-68.389 1.472-26.556 19.605-32.368 57.08-13.132 83.926l114.271 159.5C136.803 502.673 154.893 512 174 512h185.714c27.714 0 51.832-19.294 58.145-46.528l28.571-123.25a60.769 60.769 0 0 0 1.57-13.723v-87c0-45.365-48.011-74.312-87.457-53.343zM82.097 275.588l28.258 39.439a7.999 7.999 0 1 0 14.503-4.659V60.25c0-37.35 55.428-37.41 55.428 0V241.5a8 8 0 0 0 8 8h7.144a8 8 0 0 0 8-8v-36.25c0-37.35 55.429-37.41 55.429 0v36.25a8 8 0 0 0 8 8H274a8 8 0 0 0 8-8v-21.75c0-37.351 55.429-37.408 55.429 0v21.75a8 8 0 0 0 8 8h7.143a8 8 0 0 0 8-8c0-37.35 55.429-37.41 55.429 0v87c0 2.186-.25 4.371-.742 6.496l-28.573 123.251C383.717 471.055 372.626 480 359.715 480H174c-8.813 0-17.181-4.332-22.381-11.588l-114.283-159.5c-22.213-31.004 23.801-62.575 44.761-33.324zM180.285 401v-87a8 8 0 0 1 8-8h7.144a8 8 0 0 1 8 8v87a8 8 0 0 1-8 8h-7.144a8 8 0 0 1-8-8zm78.572 0v-87a8 8 0 0 1 8-8H274a8 8 0 0 1 8 8v87a8 8 0 0 1-8 8h-7.143a8 8 0 0 1-8-8zm78.572 0v-87a8 8 0 0 1 8-8h7.143a8 8 0 0 1 8 8v87a8 8 0 0 1-8 8h-7.143a8 8 0 0 1-8-8z"/></symbol>
 </svg>