diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx
index 9b9c082da510cd6e7a67173866b1b761c5e64f60..c84f61e9d1dca6eedbefa5f60baac3c1b6a965ee 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx
@@ -206,7 +206,7 @@ class AudioControls extends PureComponent {
 
     return (
       <span className={styles.container}>
-        {isVoiceUser && inputStream && muteAlertEnabled && !listenOnly ? (
+        {isVoiceUser && inputStream && muteAlertEnabled && !listenOnly && muted ? (
           <MutedAlert {...{
             muted, inputStream, isViewer, isPresenter,
           }}
diff --git a/bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx b/bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx
index 3a5d03ff4487930faba45ab60899137b835e9243..c44bfcd7879927dfac972354f80084bffa8995a1 100644
--- a/bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx
@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import hark from 'hark';
 import Icon from '/imports/ui/components/icon/component';
 import cx from 'classnames';
 import { styles } from './styles';
+import { defineMessages, injectIntl } from 'react-intl';
+import { notify } from '/imports/ui/services/notification';
+import TooltipContainer from '/imports/ui/components/tooltip/container';
 
 const MUTE_ALERT_CONFIG = Meteor.settings.public.app.mutedAlert;
 
@@ -15,6 +17,21 @@ const propTypes = {
   muted: PropTypes.bool.isRequired,
 };
 
+const intlMessages = defineMessages({
+  disableMessage: {
+    id: 'app.muteWarning.disableMessage',
+    description: 'Message used when mute alerts has been disabled',
+  },
+  tooltip: {
+    id: 'app.muteWarning.tooltip',
+    description: 'Tooltip message',
+  },
+  warningLabel: {
+    id: 'app.muteWarning.label',
+    description: 'Warning when someone speaks while muted',
+  },
+});
+
 class MutedAlert extends Component {
   constructor(props) {
     super(props);
@@ -29,6 +46,7 @@ class MutedAlert extends Component {
 
     this.cloneMediaStream = this.cloneMediaStream.bind(this);
     this.resetTimer = this.resetTimer.bind(this);
+    this.closeAlert = this.closeAlert.bind(this);
   }
 
   componentDidMount() {
@@ -100,28 +118,41 @@ class MutedAlert extends Component {
     return false;
   }
 
+  closeAlert() {
+    const { intl } = this.props;
+
+    this.setState({ visible: false });
+    this.speechEvents.stop();
+
+    notify(intl.formatMessage(intlMessages.disableMessage), 'info', 'mute');
+  }
+
   render() {
-    const { isViewer, isPresenter, muted } = this.props;
+    const {
+      isViewer, isPresenter, muted, intl,
+    } = this.props;
     const { visible } = this.state;
     const style = {};
     style[styles.alignForMod] = !isViewer || isPresenter;
 
     return visible && muted ? (
-      <div className={cx(styles.muteWarning, style)}>
-        <span>
-          <FormattedMessage
-            id="app.muteWarning.label"
-            description="Warning when someone speaks while muted"
-            values={{
-              0: <Icon iconName="mute" />,
-            }}
-          />
-        </span>
-      </div>
+      <TooltipContainer
+        title={intl.formatMessage(intlMessages.tooltip)}
+        position="top"
+      >
+        <div
+          className={cx(styles.muteWarning, style)}
+          onClick={() => this.closeAlert()}
+        >
+          <span>
+            {intl.formatMessage(intlMessages.warningLabel, { 0: <Icon iconName="mute" /> })}
+          </span>
+        </div>
+      </TooltipContainer>
     ) : null;
   }
 }
 
 MutedAlert.propTypes = propTypes;
 
-export default MutedAlert;
+export default injectIntl(MutedAlert);
diff --git a/bigbluebutton-html5/imports/ui/components/muted-alert/styles.scss b/bigbluebutton-html5/imports/ui/components/muted-alert/styles.scss
index 1c06feb16c33a2cbc781314609fbc52a0038b203..dda42e7c13f0d25871b1e72c5a3224a816462847 100644
--- a/bigbluebutton-html5/imports/ui/components/muted-alert/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/muted-alert/styles.scss
@@ -13,6 +13,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
+  cursor: pointer;
 
   > span {
     white-space: nowrap;
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
index 8afb52d809fcb913f8d563dcc238e20de252ac79..1f1733d8be2cfeda47d86c2c0fa64a14ce7395ba 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -284,6 +284,8 @@
     "app.waitingMessage": "Disconnected. Trying to reconnect in {0} seconds ...",
     "app.retryNow": "Retry now",
     "app.muteWarning.label": "Click {0} to unmute yourself.",
+    "app.muteWarning.disableMessage": "Mute alerts disabled until unmute",
+    "app.muteWarning.tooltip": "Click to close and disable warning until next unmute",
     "app.navBar.settingsDropdown.optionsLabel": "Options",
     "app.navBar.settingsDropdown.fullscreenLabel": "Make fullscreen",
     "app.navBar.settingsDropdown.settingsLabel": "Settings",