diff --git a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
index 724fd18cf..d591fd1cf 100644
--- a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
+++ b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
@@ -36,6 +36,18 @@ class DashboardAudioNotificationHelper {
     initFaviconSwitcher();
   };
 
+  updateInstanceValues = ({
+    alwaysPlayAudioAlert,
+    alertIfUnreadConversationExist,
+    audioAlertType,
+    audioAlertTone,
+  }) => {
+    this.audioAlertType = audioAlertType;
+    this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
+    this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+    this.audioAlertTone = audioAlertTone;
+  };
+
   onAudioListenEvent = async () => {
     try {
       await getAlertAudio('', {
diff --git a/app/javascript/dashboard/helper/scriptHelpers.js b/app/javascript/dashboard/helper/scriptHelpers.js
index 292751a94..696320171 100644
--- a/app/javascript/dashboard/helper/scriptHelpers.js
+++ b/app/javascript/dashboard/helper/scriptHelpers.js
@@ -21,7 +21,7 @@ const initializeAudioAlerts = user => {
     enable_audio_alerts: audioAlertType,
     alert_if_unread_assigned_conversation_exist: alertIfUnreadConversationExist,
     notification_tone: audioAlertTone,
-    // UI Settings can be undefined initally as we don't send the
+    // UI Settings can be undefined initially as we don't send the
     // entire payload for the user during the signup process.
   } = uiSettings || {};
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index 84f369f5a..22cc40ec6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -30,6 +30,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import DashboardAudioNotificationHelper from 'dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper';
 import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
@@ -69,6 +70,21 @@ export default {
     this.$store.dispatch('userNotificationSettings/get');
   },
   methods: {
+    updateAudioAlertInstanceValues() {
+      const {
+        enable_audio_alerts: audioAlert = '',
+        always_play_audio_alert: alwaysPlayAudioAlert,
+        alert_if_unread_assigned_conversation_exist:
+          alertIfUnreadConversationExist,
+        notification_tone: alertTone,
+      } = this.uiSettings;
+      DashboardAudioNotificationHelper.updateInstanceValues({
+        audioAlertType: audioAlert,
+        alwaysPlayAudioAlert: alwaysPlayAudioAlert,
+        alertIfUnreadConversationExist: alertIfUnreadConversationExist,
+        audioAlertTone: alertTone,
+      });
+    },
     notificationUISettings(uiSettings) {
       const {
         enable_audio_alerts: audioAlert = '',
@@ -106,22 +122,26 @@ export default {
         enable_audio_alerts: this.audioAlert,
       });
       this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      this.updateAudioAlertInstanceValues();
     },
     handleAudioAlertConditions(id, value) {
       if (id === 'tab_is_inactive') {
         this.updateUISettings({
           always_play_audio_alert: !value,
         });
+        this.updateAudioAlertInstanceValues();
       } else if (id === 'conversations_are_read') {
         this.updateUISettings({
           alert_if_unread_assigned_conversation_exist: value,
         });
+        this.updateAudioAlertInstanceValues();
       }
       this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
     handleAudioToneChange(value) {
       this.updateUISettings({ notification_tone: value });
       this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      this.updateAudioAlertInstanceValues();
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index 986ff9aca..7125e89c5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -242,31 +242,6 @@ export default {
         this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
       }
     },
-
-    handleAudioInput(e) {
-      this.enableAudioAlerts = e.target.value;
-      this.updateUISettings({
-        enable_audio_alerts: this.enableAudioAlerts,
-      });
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioAlertConditions(e) {
-      let condition = e.target.value;
-      if (condition === 'tab_is_inactive') {
-        this.updateUISettings({
-          always_play_audio_alert: !e.target.checked,
-        });
-      } else if (condition === 'conversations_are_read') {
-        this.updateUISettings({
-          alert_if_unread_assigned_conversation_exist: e.target.checked,
-        });
-      }
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioToneChange(value) {
-      this.updateUISettings({ notification_tone: value });
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
     handleInput(type, id) {
       if (type === 'email') {
         this.handleEmailInput(id);