diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
index f331ec0c5..6505551dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row justify-between gap-4">
+  <div class="flex flex-row justify-between gap-4 mb-8">
     <form-input
       name="access_token"
       class="flex-1"
@@ -10,17 +10,19 @@
       :has-error="false"
       :error-message="$t('REGISTER.FULL_NAME.ERROR')"
     />
-    <woot-button
-      icon="copy"
+    <v3-button
+      type="submit"
+      size="large"
+      icon="text-copy"
       variant="hollow"
       color-scheme="secondary"
-      class="rounded-xl w-fit"
       @click="$emit('click')"
     >
       Copy
-    </woot-button>
+    </v3-button>
   </div>
 </template>
 <script setup>
 import FormInput from 'v3/components/Form/Input.vue';
+import V3Button from 'v3/components/Form/Button.vue';
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
index db3778d2d..c21e6f350 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
@@ -46,10 +46,11 @@
         @blur="$v.passwordConfirmation.$touch"
       />
 
-      <woot-button
-        class="w-fit"
-        :is-loading="isPasswordChanging"
+      <v3-button
         type="submit"
+        color-scheme="primary"
+        variant="solid"
+        size="large"
         :disabled="
           !currentPassword ||
           !passwordConfirmation ||
@@ -57,7 +58,7 @@
         "
       >
         {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
-      </woot-button>
+      </v3-button>
     </div>
   </form>
 </template>
@@ -67,8 +68,12 @@ import { required, minLength } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+import V3Button from 'v3/components/Form/Button.vue';
 
 export default {
+  components: {
+    V3Button,
+  },
   mixins: [alertMixin],
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
index b25075328..1fd84e6c0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
@@ -1,14 +1,16 @@
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] w-[23rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] sm:w-[23rem] rounded-md border border-solid border-ash-200"
     :class="{
-      'border border-solid border-woot-300 dark:border-woot-400': active,
+      'border border-solid border-primary-300 ': active,
     }"
   >
     <div
       class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
     >
-      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
+      <div class="flex items-center p-1 text-base font-medium text-ash-900">
+        {{ heading }}
+      </div>
       <div>
         <!-- Show radio button, if the card is active, set radio button checked -->
         <input
@@ -20,7 +22,7 @@
       </div>
     </div>
     <div
-      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pb-0 text-start"
+      class="text-slate-700 dark:text-slate-200 text-sm leading-[1.4] px-3 pb-0 text-start"
     >
       {{ content }}
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index eefa777f8..73b721c7a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -3,67 +3,70 @@
     <div
       class="flex flex-col h-full p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 font-inter"
     >
-      <div class="flex flex-col gap-8 sm:max-w-3xl">
-        <h2 class="text-2xl font-medium text-slate-900 dark:text-white">
-          Profile Settings
-        </h2>
-        <user-basic-profile
-          :src="avatarUrl"
-          :display-name="displayName"
-          size="72px"
-          @change="handleImageUpload"
-          @update="updateUser"
-        />
+      <div class="flex flex-col gap-16 sm:max-w-3xl">
+        <div class="flex flex-col gap-6">
+          <h2 class="mt-4 text-2xl font-medium text-ash-900">
+            Profile Settings
+          </h2>
+          <user-basic-profile
+            :src="avatarUrl"
+            :name="name"
+            size="72px"
+            @change="handleImageUpload"
+            @update="updateUser"
+            @delete="deleteAvatar"
+          />
 
-        <form
-          class="flex flex-col gap-6"
-          @submit.prevent="updateUser('profile')"
-        >
-          <form-input
-            v-model="name"
-            type="text"
-            name="name"
-            :class="{ error: $v.name.$error }"
-            :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
-            :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
-            :has-error="$v.name.$error"
-            :error-message="$t('PROFILE_SETTINGS.FORM.NAME.ERROR')"
-            @blur="$v.name.$touch"
-          />
-          <form-input
-            v-model="displayName"
-            type="text"
-            name="displayName"
-            :class="{ error: $v.displayName.$error }"
-            :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
-            :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
-            :has-error="$v.displayName.$error"
-            :error-message="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')"
-            @blur="$v.displayName.$touch"
-          />
-          <form-input
-            v-if="!globalConfig.disableUserProfileUpdate"
-            v-model="email"
-            type="email"
-            name="email"
-            :class="{ error: $v.email.$error }"
-            :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
-            :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
-            :has-error="$v.email.$error"
-            :error-message="$t('PROFILE_SETTINGS.FORM.EMAIL.ERROR')"
-            @blur="$v.email.$touch"
-          />
-          <v3-button
-            type="submit"
-            color-scheme="primary"
-            variant="solid"
-            icon="copy"
-            show-right-icon
-            size="large"
+          <form
+            class="flex flex-col gap-6"
+            @submit.prevent="updateUser('profile')"
           >
-            {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
-          </v3-button>
-        </form>
+            <form-input
+              v-model="name"
+              type="text"
+              name="name"
+              :class="{ error: $v.name.$error }"
+              :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
+              :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
+              :has-error="$v.name.$error"
+              :error-message="$t('PROFILE_SETTINGS.FORM.NAME.ERROR')"
+              @blur="$v.name.$touch"
+            />
+            <form-input
+              v-model="displayName"
+              type="text"
+              name="displayName"
+              :class="{ error: $v.displayName.$error }"
+              :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
+              :placeholder="
+                $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')
+              "
+              :has-error="$v.displayName.$error"
+              :error-message="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')"
+              @blur="$v.displayName.$touch"
+            />
+            <form-input
+              v-if="!globalConfig.disableUserProfileUpdate"
+              v-model="email"
+              type="email"
+              name="email"
+              :class="{ error: $v.email.$error }"
+              :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
+              :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
+              :has-error="$v.email.$error"
+              :error-message="$t('PROFILE_SETTINGS.FORM.EMAIL.ERROR')"
+              @blur="$v.email.$touch"
+            />
+            <v3-button
+              type="submit"
+              color-scheme="primary"
+              variant="solid"
+              size="large"
+            >
+              {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
+            </v3-button>
+          </form>
+        </div>
 
         <personal-wrapper
           header="Personal message signature"
@@ -82,11 +85,13 @@
           :show-action-button="false"
         >
           <template #settingsItem>
-            <div class="flex flex-col justify-between w-full gap-4 sm:flex-row">
+            <div
+              class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
+            >
               <button
                 v-for="keyOption in keyOptions"
                 :key="keyOption.key"
-                class="p-0 cursor-pointer"
+                class="reset-base"
               >
                 <hot-key-card
                   :heading="keyOption.heading"
@@ -109,6 +114,15 @@
             <notification-settings />
           </template>
         </personal-wrapper>
+        <personal-wrapper
+          header="Notification preferences"
+          description=""
+          :show-action-button="false"
+        >
+          <template #settingsItem>
+            <notification-preferences />
+          </template>
+        </personal-wrapper>
         <personal-wrapper
           header="Access Token"
           :description="
@@ -145,6 +159,7 @@ 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 FormInput from 'v3/components/Form/Input.vue';
 import V3Button from 'v3/components/Form/Button.vue';
 
@@ -159,6 +174,7 @@ export default {
     AccessToken,
     FormInput,
     V3Button,
+    NotificationPreferences,
   },
   mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
index 473838cb0..3eb1c3987 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
@@ -10,14 +10,15 @@
       :enable-suggestions="false"
       :show-image-resize-toolbar="true"
     />
-    <woot-button
-      class="w-fit"
-      :is-loading="isUpdating"
-      type="button"
+    <v3-button
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
       @click.prevent="updateSignature"
     >
       {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </woot-button>
+    </v3-button>
   </div>
 </template>
 
@@ -27,10 +28,12 @@ import { mapGetters } from 'vuex';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import V3Button from 'v3/components/Form/Button.vue';
 
 export default {
   components: {
     WootMessageEditor,
+    V3Button,
   },
   mixins: [alertMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index f8bcf9511..f884a42b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -1,161 +1,490 @@
 <template>
-  <div>
-    <!-- Draw a line -->
-    <div class="flex flex-row items-center justify-between gap-4">
-      <div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
-    </div>
-    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
-      <table-header-cell :span="6" label="Notification type" />
-      <table-header-cell :span="3" label="Email" />
-      <table-header-cell :span="3" label="Push notification" />
-    </div>
-    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <div>
       <div
-        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <span class="text-slate-700 dark:text-slate-200">
-          A new conversation is created
-        </span>
+        <table-header-cell :span="6" label="Notification type">
+          <span class="text-sm font-normal uppercase text-ash-900">
+            Notification type
+          </span>
+        </table-header-cell>
+        <table-header-cell :span="3" label="Email">
+          <span class="text-sm font-medium uppercase text-ash-900">
+            Email
+          </span>
+        </table-header-cell>
+        <table-header-cell :span="3" label="Push notification">
+          <div class="flex flex-row items-center justify-center gap-1">
+            <span class="text-sm font-medium uppercase text-ash-900">
+              Push notification
+            </span>
+            <!-- <woot-switch
+              :value="!hasEnabledPushPermissions"
+              @input="onRequestPermissions()"
+            /> -->
+          </div>
+        </table-header-cell>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <input
-          type="checkbox"
-          name="email"
-          :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]"
-        />
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            A new conversation is created
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            type="checkbox"
+            value="email_conversation_creation"
+            @input="handleEmailInput"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <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-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]"
-        />
-      </div>
-    </div>
-    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
-      <div
-        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        <span class="text-slate-700 dark:text-slate-200">
-          Conversation is assigned to you
-        </span>
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            Conversation is assigned to you
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            type="checkbox"
+            value="email_conversation_assignment"
+            @input="handleEmailInput"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <input
-          type="checkbox"
-          name="email"
-          :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]"
-        />
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            You are mentioned in a conversation
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handleEmailInput"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <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-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]"
-        />
-      </div>
-    </div>
-    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
-      <div
-        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        <span class="text-slate-700 dark:text-slate-200">
-          Conversation is assigned to you
-        </span>
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            New message is created in an assigned conversation
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handleEmailInput"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <input
-          type="checkbox"
-          name="email"
-          :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]"
-        />
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            New message is created in an participating conversation
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handleEmailInput"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        v-if="isSLAEnabled"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <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-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]"
-        />
-      </div>
-    </div>
-    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
-      <div
-        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        <span class="text-slate-700 dark:text-slate-200">
-          You are mentioned in a conversation
-        </span>
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            Conversation misses first response SLA
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        v-if="isSLAEnabled"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <input
-          type="checkbox"
-          name="email"
-          :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]"
-        />
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            Conversation misses next response SLA
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </div>
       </div>
       <div
-        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+        v-if="isSLAEnabled"
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <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-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]"
-        />
-      </div>
-    </div>
-    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
-      <div
-        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        <span class="text-slate-700 dark:text-slate-200">
-          New message is created in an assigned conversation
-        </span>
-      </div>
-      <div
-        class="flex items-center gap-2 col-span-3 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="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]"
-        />
-      </div>
-      <div
-        class="flex items-center gap-2 col-span-3 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-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]"
-        />
+        <div
+          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-ash-900 rtl:text-right"
+        >
+          <span class="text-sm text-ash-900">
+            Conversation misses resolution SLA
+          </span>
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+          />
+        </div>
+        <div
+          class="flex items-center gap-2 col-span-3 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-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]"
+            @input="handlePushInput"
+          />
+        </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 TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import {
+  hasPushPermissions,
+  requestPushPermissions,
+  verifyServiceWorkerExistence,
+} from '../../../../helper/pushHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+export default {
+  components: {
+    TableHeaderCell,
+  },
+  mixins: [alertMixin, configMixin, uiSettingsMixin],
+  data() {
+    return {
+      selectedEmailFlags: [],
+      selectedPushFlags: [],
+      enableAudioAlerts: false,
+      hasEnabledPushPermissions: false,
+      playAudioWhenTabIsInactive: false,
+      alertIfUnreadConversationExist: false,
+      notificationTone: 'ding',
+      notificationAlertTones: [
+        {
+          value: 'ding',
+          label: 'Ding',
+        },
+        {
+          value: 'bell',
+          label: 'Bell',
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
+      pushFlags: 'userNotificationSettings/getSelectedPushFlags',
+      uiSettings: 'getUISettings',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasPushAPISupport() {
+      return !!('Notification' in window);
+    },
+    isSLAEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
+    },
+  },
+  watch: {
+    emailFlags(value) {
+      this.selectedEmailFlags = value;
+    },
+    pushFlags(value) {
+      this.selectedPushFlags = value;
+    },
+    uiSettings(value) {
+      this.notificationUISettings(value);
+    },
+  },
+  mounted() {
+    if (hasPushPermissions()) {
+      this.getPushSubscription();
+    }
+    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: notificationTone,
+      } = uiSettings;
+      this.enableAudioAlerts = enableAudio;
+      this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
+      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+      this.notificationTone = notificationTone || 'ding';
+    },
+    onRegistrationSuccess() {
+      this.hasEnabledPushPermissions = true;
+    },
+    onRequestPermissions() {
+      requestPushPermissions({
+        onSuccess: this.onRegistrationSuccess,
+      });
+    },
+    getPushSubscription() {
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager
+          .getSubscription()
+          .then(subscription => {
+            if (!subscription) {
+              this.hasEnabledPushPermissions = false;
+            } else {
+              this.hasEnabledPushPermissions = true;
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.log(error))
+      );
+    },
+    async updateNotificationSettings() {
+      try {
+        this.$store.dispatch('userNotificationSettings/update', {
+          selectedEmailFlags: this.selectedEmailFlags,
+          selectedPushFlags: this.selectedPushFlags,
+        });
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      } catch (error) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
+      }
+    },
+    handleEmailInput(e) {
+      this.selectedEmailFlags = this.toggleInput(
+        this.selectedEmailFlags,
+        e.target.value
+      );
+
+      this.updateNotificationSettings();
+    },
+    handlePushInput(e) {
+      this.selectedPushFlags = this.toggleInput(
+        this.selectedPushFlags,
+        e.target.value
+      );
+
+      this.updateNotificationSettings();
+    },
+    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'));
+    },
+    toggleInput(selected, current) {
+      if (selected.includes(current)) {
+        const newSelectedFlags = selected.filter(flag => flag !== current);
+        return newSelectedFlags;
+      }
+      return [...selected, current];
+    },
+  },
+};
 </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
index 192fd8ee1..eb3a1ca1c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="profile-settings-notifications" class="flex flex-col gap-4">
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
     <form-select
       v-model="notificationTone"
       name="timezone"
@@ -20,15 +20,15 @@
 
     <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
       </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
             id="audio_enable_alert_none"
@@ -38,10 +38,15 @@
             value="none"
             @input="handleAudioInput"
           />
-          <label>None</label>
+          <label
+            class="text-sm font-medium text-ash-900"
+            :class="{ 'text-ash-400': enableAudioAlerts !== 'none' }"
+          >
+            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
             id="audio_enable_alert_mine"
@@ -51,9 +56,14 @@
             value="mine"
             @input="handleAudioInput"
           />
-          <label>Assigned</label>
+          <label
+            class="text-sm font-medium text-ash-900"
+            :class="{ 'text-ash-400': enableAudioAlerts !== 'mine' }"
+          >
+            Assigned
+          </label>
         </div>
-        <div class="flex flex-row items-center justify-center gap-1 grow">
+        <div class="flex flex-row items-center justify-center gap-2 px-4 grow">
           <input
             id="audio_enable_alert_all"
             v-model="enableAudioAlerts"
@@ -62,7 +72,12 @@
             value="all"
             @input="handleAudioInput"
           />
-          <label>All</label>
+          <label
+            class="text-sm font-medium text-ash-900"
+            :class="{ 'text-ash-400': enableAudioAlerts !== 'all' }"
+          >
+            All
+          </label>
         </div>
       </div>
     </div>
@@ -98,298 +113,6 @@
         </label>
       </div>
     </div>
-
-    <div>
-      <h4 class="text-lg font-medium text-slate-900 dark:text-slate-25">
-        Notification preferences
-      </h4>
-      <!-- Draw a line -->
-      <div class="flex flex-row items-center justify-between gap-4">
-        <div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
-      </div>
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <table-header-cell :span="6" label="Notification type" />
-        <table-header-cell :span="3" label="Email" />
-        <table-header-cell :span="3" label="Push notification">
-          <div class="flex flex-row items-center justify-center gap-1">
-            <span
-              class="text-xs font-medium uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
-            >
-              Push notification
-            </span>
-            <woot-switch
-              :value="!hasEnabledPushPermissions"
-              @input="onRequestPermissions()"
-            />
-          </div>
-        </table-header-cell>
-      </div>
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            A new conversation is created
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            type="checkbox"
-            value="email_conversation_creation"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-          />
-        </div>
-      </div>
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            Conversation is assigned to you
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            type="checkbox"
-            value="email_conversation_assignment"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            You are mentioned in a conversation
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            New message is created in an assigned conversation
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            New message is created in an participating conversation
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handleEmailInput"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-      <div
-        v-if="isSLAEnabled"
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            Conversation misses first response SLA
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-      <div
-        v-if="isSLAEnabled"
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            Conversation misses next response SLA
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-      <div
-        v-if="isSLAEnabled"
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <div
-          class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-        >
-          <span class="text-slate-700 dark:text-slate-200">
-            Conversation misses resolution SLA
-          </span>
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-          />
-        </div>
-        <div
-          class="flex items-center gap-2 col-span-3 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-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]"
-            @input="handlePushInput"
-          />
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -399,7 +122,6 @@ 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';
-import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
 import {
   hasPushPermissions,
   requestPushPermissions,
@@ -410,7 +132,6 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 export default {
   components: {
     FormSelect,
-    TableHeaderCell,
   },
   mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
index 0a0c10c52..edda806c9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
@@ -1,36 +1,33 @@
 <template>
   <div class="flex flex-col items-start w-full gap-6">
-    <div
-      class="flex flex-col w-full gap-4 divide-y divide-slate-200 dark:divide-slate-700"
-    >
-      <h4
-        v-if="header"
-        class="text-lg font-medium text-slate-900 dark:text-slate-25"
-      >
+    <div class="flex flex-col w-full gap-4">
+      <h4 v-if="header" class="text-lg font-medium text-ash-900">
         {{ header }}
       </h4>
-      <p
-        v-if="description"
-        class="pt-4 mb-0 text-sm font-normal text-slate-600 dark:text-slate-400"
-      >
+      <div class="flex flex-row items-center justify-between">
+        <div class="flex-grow h-px bg-ash-200" />
+      </div>
+      <p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
         {{ description }}
       </p>
     </div>
     <div v-if="$slots.settingsItem" class="flex flex-col w-full gap-6">
       <slot name="settingsItem" />
-      <woot-button
+      <v3-button
         v-if="showActionButton"
+        type="submit"
         color-scheme="primary"
-        class="rounded-xl w-fit"
-        @click="$emit('click')"
+        variant="solid"
+        size="large"
       >
         {{ buttonText }}
-      </woot-button>
+      </v3-button>
     </div>
   </div>
 </template>
 
 <script setup>
+import V3Button from 'v3/components/Form/Button.vue';
 defineProps({
   header: {
     type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
index 55199ef9f..43e2a1733 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
@@ -1,22 +1,26 @@
 <template>
   <div>
-    <div class="flex flex-col gap-2 mt-2">
-      <span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
-        Profile picture
-      </span>
+    <div class="flex flex-col gap-2">
+      <span class="font-medium text-ash-90"> Profile picture </span>
       <div
         class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
-        :title="title"
-        @mouse-over="showUpload"
-        @click="openFileInput"
+        :title="name"
+        @mouseover="showUpload"
+        @mouseleave="hideUpload"
       >
         <img
+          v-if="shouldShowImage"
           class="rounded-xl h-[72px] w-[72px]"
           :src="src"
           draggable="false"
           @load="onImgLoad"
           @error="onImgError"
         />
+        <Avatar
+          v-show="!shouldShowImage"
+          :username="userNameWithoutEmoji"
+          :size="72"
+        />
         <input
           ref="file"
           type="file"
@@ -24,36 +28,41 @@
           style="display: none"
           @change="handleImageUpload"
         />
-        <div
-          class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
+        <button
+          v-if="src && showUploadIcon"
+          class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none reset-base -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
+          @click="onAvatarDelete"
         >
           <fluent-icon
             icon="dismiss"
             size="16"
             class="text-slate-800 dark:text-slate-200"
           />
-        </div>
-        <div
-          class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+        </button>
+        <button
+          v-if="showUploadIcon"
+          class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+          @click="openFileInput"
         >
-          <fluent-icon
-            icon="avatar-upload"
-            size="32"
-            class="text-white dark:text-white"
-          />
-        </div>
+          <fluent-icon icon="avatar-upload" size="32" class="text-white" />
+        </button>
       </div>
     </div>
   </div>
 </template>
 <script>
+import Avatar from 'v3/components/Form/Avatar.vue';
+import { removeEmoji } from 'shared/helpers/emoji';
 export default {
+  components: {
+    Avatar,
+  },
   props: {
     src: {
       type: String,
       default: '',
     },
-    title: {
+    name: {
       type: String,
       default: '',
     },
@@ -66,6 +75,9 @@ export default {
     };
   },
   computed: {
+    userNameWithoutEmoji() {
+      return removeEmoji(this.name);
+    },
     shouldShowImage() {
       if (!this.src) {
         return false;
@@ -73,7 +85,7 @@ export default {
       if (this.hasImageLoaded) {
         return !this.imgError;
       }
-      return false;
+      return true;
     },
   },
   watch: {
@@ -93,6 +105,9 @@ export default {
     showUpload() {
       this.showUploadIcon = true;
     },
+    hideUpload() {
+      this.showUploadIcon = false;
+    },
     openFileInput() {
       // Trigger click event on the hidden file input
       this.$refs.file.click();
@@ -104,6 +119,9 @@ export default {
         url: file ? URL.createObjectURL(file) : null,
       });
     },
+    onAvatarDelete() {
+      this.$emit('delete');
+    },
   },
 };
 </script>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 15d5a44ad..8b92a5a78 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -273,5 +273,6 @@
   "chevron-left-single-outline": "m15 18-6-6 6-6",
   "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
   "chevron-right-single-outline": "m9 18 6-6-6-6",
-  "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z"
+  "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
+  "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75"
 }
diff --git a/app/javascript/v3/components/Form/Avatar.vue b/app/javascript/v3/components/Form/Avatar.vue
new file mode 100644
index 000000000..2f9c0109d
--- /dev/null
+++ b/app/javascript/v3/components/Form/Avatar.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="rounded-xl h-[72px] w-[72px] flex leading-[100%] font-medium items-center justify-center text-center cursor-default bg-ash-200 text-ash-900"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    username: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 40,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        fontSize: `${Math.floor(this.size / 2.5)}px`,
+      };
+    },
+    userInitial() {
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
+      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
+        initials = initials.replace(/[a-z]+/g, '');
+      }
+      initials = initials.substring(0, 2).toUpperCase();
+
+      return initials;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 42a609126..50fb8d8d5 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -3,10 +3,15 @@
     class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
     :type="type"
     :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
+    :disabled="isDisabled"
     @click="handleClick"
   >
-    <fluent-icon :size="iconSize" :icon="icon" class="flex-shrink-0" />
+    <fluent-icon
+      v-if="icon"
+      :size="iconSize"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
     <span
       v-if="$slots.default"
       class="text-sm font-medium truncate"
@@ -14,7 +19,12 @@
     >
       <slot />
     </span>
-    <fluent-icon :size="iconSize" icon="chevron-right" class="flex-shrink-0" />
+    <fluent-icon
+      v-if="rightIcon"
+      :size="iconSize"
+      icon="chevron-right"
+      class="flex-shrink-0"
+    />
   </button>
 </template>
 <script>
@@ -60,41 +70,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    rightIcon: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
-    // variantClasses() {
-    //   if (this.variant.includes('link')) {
-    //     return `clear ${this.variant}`;
-    //   }
-    //   return this.variant;
-    // },
-    // hasOnlyIcon() {
-    //   const hasEmojiOrIcon = this.emoji || this.icon;
-    //   return !this.$slots.default && hasEmojiOrIcon;
-    // },
-    // hasOnlyIconClasses() {
-    //   return this.hasOnlyIcon ? 'button--only-icon' : '';
-    // },
-
     buttonClasses() {
-      return [
-        this.colorClass,
-        this.sizeClass,
-        // this.variantClasses,
-        // this.hasOnlyIconClasses,
-        // this.size,
-        // this.colorClass,
-        // this.classNames,
-        // this.isDisabled ? 'disabled' : '',
-        // this.isExpanded ? 'expanded' : '',
-      ];
+      return [this.colorClass, this.sizeClass];
     },
     colorClass() {
       if (this.colorScheme === 'primary') {
         return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
       }
       if (this.colorScheme === 'secondary') {
-        return 'bg-ash-100 text-white hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
+        return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
       }
       if (this.colorScheme === 'danger') {
         return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index a7165b7f2..793fa5134 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -11,11 +11,11 @@
       :selected="value"
       :name="name"
       :class="{
-        'text-slate-400': !value,
-        'text-slate-900 dark:text-slate-100': value,
+        'text-ash-400': !value,
+        'text-ash-900': value,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">