diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
index 2b60ca2de..cafa955f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
@@ -1,41 +1,105 @@
 <template>
-  <div>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
     <form-select
-      name="timezone"
+      v-model="alertTone"
+      name="alertTone"
       spacing="compact"
-      label="Alert tone"
-      placeholder="Ding"
+      :value="alertTone"
+      :options="alertTones"
+      :label="
+        $t(
+          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
+        )
+      "
       class="max-w-xl"
+      @input="handleAudioToneChange"
     >
-      <option v-for="file in audioFiles" :key="file.label" :value="file.value">
-        {{ file.label }}
+      <option
+        v-for="tone in alertTones"
+        :key="tone.label"
+        :value="tone.value"
+        :selected="tone.value === alertTone"
+      >
+        {{ tone.label }}
       </option>
     </form-select>
 
     <div>
       <label
-        class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
+        class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
       >
-        Alert events for conversations
+        {{
+          $t(
+            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE'
+          )
+        }}
       </label>
       <div
-        class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-slate-75 dark:border-slate-600"
+        class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
       >
         <div
-          class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
+          class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
         >
-          <input type="radio" name="hotkey" value="enter" checked />
-          <label>None</label>
+          <input
+            id="audio_enable_alert_none"
+            v-model="enableAudioAlerts"
+            class="accent-primary-600"
+            type="radio"
+            value="none"
+            @input="handleAudioInput"
+          />
+          <label
+            class="text-sm font-medium text-ash-900"
+            :class="{ 'text-ash-400': enableAudioAlerts !== 'none' }"
+          >
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.NONE'
+              )
+            }}
+          </label>
         </div>
         <div
-          class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
+          class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
         >
-          <input type="radio" name="hotkey" value="enter" />
-          <label>Assigned</label>
+          <input
+            id="audio_enable_alert_mine"
+            v-model="enableAudioAlerts"
+            class="accent-primary-600"
+            type="radio"
+            value="mine"
+            @input="handleAudioInput"
+          />
+          <label
+            class="text-sm font-medium text-ash-900"
+            :class="{ 'text-ash-400': enableAudioAlerts !== 'mine' }"
+          >
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ASSIGNED'
+              )
+            }}
+          </label>
         </div>
-        <div class="flex flex-row items-center justify-center gap-1 grow">
-          <input type="radio" name="hotkey" value="enter" />
-          <label>All</label>
+        <div class="flex flex-row items-center justify-center gap-2 px-4 grow">
+          <input
+            id="audio_enable_alert_all"
+            v-model="enableAudioAlerts"
+            class="accent-primary-600"
+            type="radio"
+            value="all"
+            @input="handleAudioInput"
+          />
+          <label
+            class="text-sm font-medium text-ash-900"
+            :class="{ 'text-ash-400': enableAudioAlerts !== 'all' }"
+          >
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ALL_CONVERSATIONS'
+              )
+            }}
+          </label>
         </div>
       </div>
     </div>
@@ -43,37 +107,134 @@
       <label
         class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
       >
-        Alert conditions
+        {{
+          $t(
+            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE'
+          )
+        }}
       </label>
-      <div class="flex flex-row items-center justify-start gap-2">
-        <input
-          type="checkbox"
-          name="send"
-          :checked="true"
-          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-        />
-        <label>
-          Send audio alerts only if the browser window is not active
-        </label>
-      </div>
-      <div class="flex flex-row items-center justify-start gap-2">
-        <input
-          type="checkbox"
-          name="send"
-          :checked="false"
-          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-        />
-        <label>
-          Send alerts every 30s until all the assigned conversations are read
-        </label>
+      <div class="flex flex-col gap-2">
+        <div class="flex flex-row items-start gap-2">
+          <input
+            id="audio_alert_when_tab_is_inactive"
+            v-model="playAudioWhenTabIsInactive"
+            type="checkbox"
+            value="tab_is_inactive"
+            class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            @input="handleAudioAlertConditions"
+          />
+          <label class="text-sm font-normal text-ash-900">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
+              )
+            }}
+          </label>
+        </div>
+        <div class="flex flex-row items-start gap-2">
+          <input
+            v-model="alertIfUnreadConversationExist"
+            class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            type="checkbox"
+            value="conversations_are_read"
+            @input="handleAudioAlertConditions"
+          />
+          <label class="text-sm font-normal text-ash-900">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
+              )
+            }}
+          </label>
+        </div>
       </div>
     </div>
   </div>
 </template>
-<script setup>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import configMixin from 'shared/mixins/configMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import FormSelect from 'v3/components/Form/Select.vue';
-const audioFiles = [
-  { label: 'Ding', value: 'ding' },
-  { label: 'Dong', value: 'dong' },
-];
+
+export default {
+  components: {
+    FormSelect,
+  },
+  mixins: [alertMixin, configMixin, uiSettingsMixin],
+  data() {
+    return {
+      enableAudioAlerts: false,
+      playAudioWhenTabIsInactive: false,
+      alertIfUnreadConversationExist: false,
+      alertTone: 'ding',
+      alertTones: [
+        {
+          value: 'ding',
+          label: 'Ding',
+        },
+        {
+          value: 'bell',
+          label: 'Bell',
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      uiSettings: 'getUISettings',
+    }),
+  },
+  watch: {
+    uiSettings(value) {
+      this.notificationUISettings(value);
+    },
+  },
+  mounted() {
+    this.notificationUISettings(this.uiSettings);
+    this.$store.dispatch('userNotificationSettings/get');
+  },
+  methods: {
+    notificationUISettings(uiSettings) {
+      const {
+        enable_audio_alerts: enableAudio = false,
+        always_play_audio_alert: alwaysPlayAudioAlert,
+        alert_if_unread_assigned_conversation_exist:
+          alertIfUnreadConversationExist,
+        notification_tone: alertTone,
+      } = uiSettings;
+      this.enableAudioAlerts = enableAudio;
+      this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
+      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+      this.alertTone = alertTone || 'ding';
+    },
+    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'));
+    },
+  },
+};
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index cb193e74b..d03676edd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -72,7 +72,7 @@
           :show-action-button="false"
         >
           <template #settingsItem>
-            <notification-settings />
+            <audio-notifications />
           </template>
         </profile-wrapper>
         <profile-wrapper
@@ -115,8 +115,8 @@ import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
 import { clearCookiesOnLogout } from '../../../../store/utils/api';
 import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
-import NotificationSettings from './NotificationSettings.vue';
 import NotificationPreferences from './NotificationPreferences.vue';
+import AudioNotifications from './AudioNotifications.vue';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 
@@ -126,11 +126,11 @@ export default {
     ProfileWrapper,
     HotKeyCard,
     ChangePassword,
-    NotificationSettings,
     AccessToken,
     NotificationPreferences,
     UserProfilePicture,
     UserBasicDetails,
+    AudioNotifications,
   },
   mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationItem.vue
new file mode 100644
index 000000000..9e334de50
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationItem.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="flex items-center gap-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+    :class="`col-span-${span}`"
+  >
+    <input
+      v-model="localFlags"
+      class="m-0 border-[1.5px] checked:bg-primary-600 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+      type="checkbox"
+      :value="localValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  span: {
+    type: Number,
+    default: 2,
+  },
+  selectedEmailFlags: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['input']);
+
+const localValue = ref(props.value);
+const localFlags = computed(() => props.selectedEmailFlags);
+
+const handleInput = e => {
+  emit('input', e);
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index 28da34747..025af7af8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -37,27 +37,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            class="m-0 border-[1.5px] checked:bg-primary-600 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            type="checkbox"
-            value="email_conversation_creation"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            type="checkbox"
-            name="email"
-            :checked="false"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-          />
-        </div>
+        <notification-item
+          value="email_conversation_creation"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_conversation_creation'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
@@ -73,28 +63,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            type="checkbox"
-            value="email_conversation_assignment"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_conversation_creation"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_conversation_assignment'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_conversation_assignment'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
@@ -110,28 +89,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            type="checkbox"
-            value="email_conversation_mention"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_conversation_mention"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_conversation_mention'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_conversation_mention'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
@@ -147,28 +115,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            type="checkbox"
-            value="email_conversation_message"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_assigned_conversation_new_message"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_assigned_conversation_new_message'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_assigned_conversation_new_message'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
@@ -184,28 +141,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            type="checkbox"
-            value="email_participating_conversation_new_message"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_participating_conversation_new_message"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_participating_conversation_new_message'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_participating_conversation_new_message'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         v-if="isSLAEnabled"
@@ -222,27 +168,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            type="checkbox"
-            value="email_sla_missed_first_response"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_sla_missed_first_response"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_sla_missed_first_response'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_sla_missed_first_response'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         v-if="isSLAEnabled"
@@ -259,27 +195,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            type="checkbox"
-            value="email_sla_missed_next_response"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_sla_missed_next_response"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_sla_missed_next_response'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_sla_missed_next_response'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
       <div
         v-if="isSLAEnabled"
@@ -296,27 +222,17 @@
             }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedEmailFlags"
-            type="checkbox"
-            value="email_sla_missed_resolution"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
-        >
-          <input
-            v-model="selectedPushFlags"
-            type="checkbox"
-            value="push_sla_missed_resolution"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handlePushInput"
-          />
-        </div>
+        <notification-item
+          :value="'email_sla_missed_resolution'"
+          :selected-email-flags="selectedEmailFlags"
+          @input="handleEmailInput"
+        />
+        <notification-item
+          :value="'push_sla_missed_resolution'"
+          :span="4"
+          :selected-email-flags="selectedPushFlags"
+          @input="handlePushInput"
+        />
       </div>
     </div>
   </div>
@@ -335,11 +251,13 @@ import {
 } from '../../../../helper/pushHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import V3Switch from 'v3/components/Form/Switch.vue';
+import NotificationItem from './NotificationItem.vue';
 
 export default {
   components: {
     TableHeaderCell,
     V3Switch,
+    NotificationItem,
   },
   mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
@@ -449,7 +367,6 @@ export default {
         this.selectedEmailFlags,
         e.target.value
       );
-
       this.updateNotificationSettings();
     },
     handlePushInput(e) {
@@ -494,28 +411,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables.scss';
-
-.notification--checkbox {
-  font-size: $font-size-large;
-}
-
-.push-notification--button {
-  margin-bottom: var(--space-one);
-}
-
-.notification-label {
-  display: flex;
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-small);
-}
-
-.tone-selector {
-  height: var(--space-large);
-  padding-bottom: var(--space-micro);
-  padding-top: var(--space-micro);
-  width: var(--space-mega);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
deleted file mode 100644
index cafa955f4..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <div id="profile-settings-notifications" class="flex flex-col gap-6">
-    <form-select
-      v-model="alertTone"
-      name="alertTone"
-      spacing="compact"
-      :value="alertTone"
-      :options="alertTones"
-      :label="
-        $t(
-          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
-        )
-      "
-      class="max-w-xl"
-      @input="handleAudioToneChange"
-    >
-      <option
-        v-for="tone in alertTones"
-        :key="tone.label"
-        :value="tone.value"
-        :selected="tone.value === alertTone"
-      >
-        {{ tone.label }}
-      </option>
-    </form-select>
-
-    <div>
-      <label
-        class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
-      >
-        {{
-          $t(
-            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE'
-          )
-        }}
-      </label>
-      <div
-        class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
-      >
-        <div
-          class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
-        >
-          <input
-            id="audio_enable_alert_none"
-            v-model="enableAudioAlerts"
-            class="accent-primary-600"
-            type="radio"
-            value="none"
-            @input="handleAudioInput"
-          />
-          <label
-            class="text-sm font-medium text-ash-900"
-            :class="{ 'text-ash-400': enableAudioAlerts !== 'none' }"
-          >
-            {{
-              $t(
-                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.NONE'
-              )
-            }}
-          </label>
-        </div>
-        <div
-          class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
-        >
-          <input
-            id="audio_enable_alert_mine"
-            v-model="enableAudioAlerts"
-            class="accent-primary-600"
-            type="radio"
-            value="mine"
-            @input="handleAudioInput"
-          />
-          <label
-            class="text-sm font-medium text-ash-900"
-            :class="{ 'text-ash-400': enableAudioAlerts !== 'mine' }"
-          >
-            {{
-              $t(
-                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ASSIGNED'
-              )
-            }}
-          </label>
-        </div>
-        <div class="flex flex-row items-center justify-center gap-2 px-4 grow">
-          <input
-            id="audio_enable_alert_all"
-            v-model="enableAudioAlerts"
-            class="accent-primary-600"
-            type="radio"
-            value="all"
-            @input="handleAudioInput"
-          />
-          <label
-            class="text-sm font-medium text-ash-900"
-            :class="{ 'text-ash-400': enableAudioAlerts !== 'all' }"
-          >
-            {{
-              $t(
-                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ALL_CONVERSATIONS'
-              )
-            }}
-          </label>
-        </div>
-      </div>
-    </div>
-    <div>
-      <label
-        class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
-      >
-        {{
-          $t(
-            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE'
-          )
-        }}
-      </label>
-      <div class="flex flex-col gap-2">
-        <div class="flex flex-row items-start gap-2">
-          <input
-            id="audio_alert_when_tab_is_inactive"
-            v-model="playAudioWhenTabIsInactive"
-            type="checkbox"
-            value="tab_is_inactive"
-            class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @input="handleAudioAlertConditions"
-          />
-          <label class="text-sm font-normal text-ash-900">
-            {{
-              $t(
-                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
-              )
-            }}
-          </label>
-        </div>
-        <div class="flex flex-row items-start gap-2">
-          <input
-            v-model="alertIfUnreadConversationExist"
-            class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            type="checkbox"
-            value="conversations_are_read"
-            @input="handleAudioAlertConditions"
-          />
-          <label class="text-sm font-normal text-ash-900">
-            {{
-              $t(
-                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
-              )
-            }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import configMixin from 'shared/mixins/configMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import FormSelect from 'v3/components/Form/Select.vue';
-
-export default {
-  components: {
-    FormSelect,
-  },
-  mixins: [alertMixin, configMixin, uiSettingsMixin],
-  data() {
-    return {
-      enableAudioAlerts: false,
-      playAudioWhenTabIsInactive: false,
-      alertIfUnreadConversationExist: false,
-      alertTone: 'ding',
-      alertTones: [
-        {
-          value: 'ding',
-          label: 'Ding',
-        },
-        {
-          value: 'bell',
-          label: 'Bell',
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      uiSettings: 'getUISettings',
-    }),
-  },
-  watch: {
-    uiSettings(value) {
-      this.notificationUISettings(value);
-    },
-  },
-  mounted() {
-    this.notificationUISettings(this.uiSettings);
-    this.$store.dispatch('userNotificationSettings/get');
-  },
-  methods: {
-    notificationUISettings(uiSettings) {
-      const {
-        enable_audio_alerts: enableAudio = false,
-        always_play_audio_alert: alwaysPlayAudioAlert,
-        alert_if_unread_assigned_conversation_exist:
-          alertIfUnreadConversationExist,
-        notification_tone: alertTone,
-      } = uiSettings;
-      this.enableAudioAlerts = enableAudio;
-      this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
-      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
-      this.alertTone = alertTone || 'ding';
-    },
-    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'));
-    },
-  },
-};
-</script>