diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx
index 7e3ef9bf218ac075d8070bd4c7aed915f5f85921..b2a0e9bc378af93be62e0d24bcd64e0c0e4f92e9 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx
@@ -7,7 +7,7 @@ export default class MuteAudio extends React.Component {
   render() {
     const { isInAudio, isMuted, callback, isTalking} = this.props;
     let label = !isMuted ? 'Mute' : 'Unmute';
-    let icon = !isMuted ? 'audio-off' : 'audio';
+    let icon = !isMuted ? 'audio' : 'audio-off';
     let className = !isInAudio ? styles.invisible : null;
     let tabIndex = !isInAudio ? -1 : 0;
 
diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx
index 87d3d74157765e1eb6fb8b2eea783e20bc283543..9a827c971f3b22e59b7203cc127961edf3c0273a 100755
--- a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx
@@ -53,6 +53,7 @@ export default class Audio extends React.Component {
   render() {
     return (
       <ModalBase
+        isTransparent={true}
         isOpen={true}
         onHide={null}
         onShow={null}
diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx
old mode 100644
new mode 100755
index ed6e2c57f45a1ea324a0edf60b1229968bec35df..c1b82ce8e88ed1fd02b45dd65c11e88838bd26b2
--- a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx
@@ -7,6 +7,7 @@ const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onShow: PropTypes.func,
   onHide: PropTypes.func,
+  isTransparent: PropTypes.bool
 };
 
 const defaultProps = {
@@ -41,12 +42,15 @@ export default class ModalBase extends Component {
       onShow,
       onHide,
       className,
+      isTransparent,
     } = this.props;
 
+    let styleOverlay = (isTransparent) ? styles.transparentOverlay : styles.overlay;
+
     return (
       <ReactModal
       className={cx(styles.modal, className)}
-      overlayClassName={styles.overlay}
+      overlayClassName={styleOverlay}
       portalClassName={styles.portal}
       isOpen={isOpen}
       onAfterOpen={this.handleAfterOpen}
diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
index 17d08d3cc6bb0f3d71a0c46b72051c30ab8543f1..d3384dee0165219a721db61de4a31a0e92719175 100755
--- a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
@@ -20,11 +20,13 @@
   }
 }
 
-.overlay {
+.transparentOverlay {
+  background: transparentize($color-gray-dark, .40) !important;
+}
+
+.overlay, .transparentOverlay {
   z-index: 1000;
-  // background: transparentize($color-white, .35);
   background: #fff;
-  // background: transparentize($color-gray-dark, .40);
   display: flex;
   align-items: center;
   justify-content: center;