diff --git a/website/client/src/pages/settings/components/inlineSettingMixin.js b/website/client/src/pages/settings/components/inlineSettingMixin.js
index d1009cf625..bbb9fe01e5 100644
--- a/website/client/src/pages/settings/components/inlineSettingMixin.js
+++ b/website/client/src/pages/settings/components/inlineSettingMixin.js
@@ -20,6 +20,7 @@ export const sharedInlineSettingStore = reactive({
 export const InlineSettingMixin = {
   data () {
     return {
+      // todo before merge use mixinData property
       modalVisible: false,
       sharedState: sharedInlineSettingStore,
     };
diff --git a/website/client/src/pages/settings/settingRows/displayNameSetting.vue b/website/client/src/pages/settings/settingRows/displayNameSetting.vue
index e2c41e795f..cc61956be9 100644
--- a/website/client/src/pages/settings/settingRows/displayNameSetting.vue
+++ b/website/client/src/pages/settings/settingRows/displayNameSetting.vue
@@ -138,10 +138,11 @@ import { mapState } from '@/libs/store';
 import checkIcon from '@/assets/svg/check.svg';
 import SaveCancelButtons from '../components/saveCancelButtons.vue';
 import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import NotificationMixins from '@/mixins/notifications';
 
 export default {
   components: { SaveCancelButtons },
-  mixins: [InlineSettingMixin],
+  mixins: [InlineSettingMixin, NotificationMixins],
   data () {
     return {
       temporaryDisplayName: '',
@@ -198,7 +199,7 @@ export default {
     },
     async changeDisplayName (newName) {
       await axios.put('/api/v4/user/', { 'profile.name': newName });
-      window.alert(this.$t('displayNameSuccess')); // eslint-disable-line no-alert
+      this.text(this.$t('displayNameSuccess'));
       this.user.profile.name = newName;
       this.temporaryDisplayName = newName;