diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
index ab20ca9b57ae0818f849bd30ba2e1b0d14106ac0..2c019d326606552c92c2a2ebac7c2336ff96b779 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
@@ -85,6 +85,9 @@ class ActionsBar extends PureComponent {
 
 
   componentDidMount() {
+
+    AudioManager.registerMuteStateListener(() => this.forceUpdate());
+
     if (TRANSLATOR_SPEAKING_ENABLED) {
       setInterval(() => {
         const meeting = Meetings.findOne(
@@ -170,7 +173,6 @@ class ActionsBar extends PureComponent {
       AudioManager.muteTranslator(muteKey);
     }
 
-    this.setState({translationMuted : AudioManager.isTranslatorMuted(muteKey)});
     this.forceUpdate();
   }
   handleLanguageSelection(language){
@@ -215,8 +217,10 @@ class ActionsBar extends PureComponent {
       allowExternalVideo,
       hasBreakouts,
       isTranslatorTalking,
+      isTranslatorMuted,
     } = this.props;
 
+    const amIAsTranslatorMuted = isTranslatorMuted();
     const actionBarClasses = {};
 
     actionBarClasses[styles.centerWithActions] = amIPresenter;
@@ -306,14 +310,14 @@ class ActionsBar extends PureComponent {
           { amIModerator ?
               (
                   <Button
-                      className={[this.state.translationMuted ? styles.btnmuted: "", styles.translatorBtn ].join(" ")}
+                      className={[amIAsTranslatorMuted ? styles.btnmuted: "", styles.translatorBtn ].join(" ")}
                       onClick={this.handleMuteTranslator}
                       hideLabel
                       label={intl.formatMessage(intlMessages.translatorMicrophoneLabel)}
                       aria-label={intl.formatMessage(intlMessages.translatorMicrophoneLabel)}
-                      color={!this.state.translationMuted ? 'primary' : 'default'}
-                      ghost={this.state.translationMuted}
-                      icon={this.state.translationMuted ? 'mute' : 'unmute'}
+                      color={!amIAsTranslatorMuted ? 'primary' : 'default'}
+                      ghost={amIAsTranslatorMuted}
+                      icon={amIAsTranslatorMuted ? 'mute' : 'unmute'}
                       size="lg"
                       circle
                   />
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
index d06e1e8b60842b104dc0e6ced01785af0775a0f0..9f350e08581ab8fd079066e8b8e86b7ff9790348 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
@@ -51,4 +51,5 @@ export default withTracker(() => ({
   allowExternalVideo: Meteor.settings.public.externalVideoPlayer.enabled,
   hasBreakouts: Service.hasBreakouts,
   isTranslatorTalking: Service.isTranslatorTalking(),
+  isTranslatorMuted: Service.isTranslatorMuted,
 }))(injectIntl(ActionsBarContainer));
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/service.js b/bigbluebutton-html5/imports/ui/components/actions-bar/service.js
index 4a528ea7f0f6a0717f2cac45551512c99c408583..6781ed7d71da57b4e088d06f732a13b825ac332c 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/service.js
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/service.js
@@ -71,4 +71,5 @@ export default {
   isSharingVideo: () => getVideoUrl(),
   muteMicrophone,
   isTranslatorTalking,
+  isTranslatorMuted: () => AudioManager.isTranslatorMuted(),
 };
diff --git a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
index 2fdd80c8dcd35a6bf4a26a83ee7ff6c5d690dad0..f7c06c7439f74e15751ff4d5356528fe1ae3b00c 100755
--- a/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
+++ b/bigbluebutton-html5/imports/ui/services/audio-manager/index.js
@@ -68,6 +68,7 @@ class AudioManager {
     this.monitor = this.monitor.bind(this);
     this.translatorVolumeGainNode = new AudioContext().createGain();
     this.muteHandels = new Set();
+    this.muteStateCallbacks = new Set();
   }
 
   init(userData) {
@@ -795,6 +796,7 @@ class AudioManager {
   muteTranslator(muteHandle) {
     this.setSenderTrackEnabledTranslator(false)
     this.muteHandels.add(muteHandle);
+    this.notifyMuteStateListener();
   }
 
   unmuteTranslator(muteHandle) {
@@ -802,6 +804,7 @@ class AudioManager {
     if(this.muteHandels.size === 0) {
       this.setSenderTrackEnabledTranslator(true);
     }
+    this.notifyMuteStateListener();
   }
 
   isTranslatorMuted(muteHandle = null) {
@@ -811,6 +814,14 @@ class AudioManager {
       return this.muteHandels.has(muteHandle);
     }
   }
+
+  registerMuteStateListener( callback ) {
+    this.muteStateCallbacks.add(callback);
+  }
+
+  async notifyMuteStateListener() {
+    this.muteStateCallbacks.forEach(callback => callback());
+  }
 }
 
 const audioManager = new AudioManager();