diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
index 9aa733bee5..a4e7e062b5 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
@@ -26,7 +26,7 @@
       </button>
       <span class="notification-type"
             [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
-        {{notificationSettingsFormGroup.get('ruleName').value}}
+        {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
       </span>
     </div>
     <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of notificationDeliveryMethodMap">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts
index 1c73ed8a8c..9e8df2e107 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts
@@ -19,7 +19,11 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFor
 import { UtilsService } from '@core/services/utils.service';
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subscription } from 'rxjs';
-import { NotificationDeliveryMethod, NotificationUserSetting } from '@shared/models/notification.models';
+import {
+  NotificationDeliveryMethod,
+  NotificationTemplateTypeTranslateMap,
+  NotificationUserSetting
+} from '@shared/models/notification.models';
 
 @Component({
   selector: 'tb-notification-setting-form',
@@ -44,7 +48,8 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   notificationSettingsFormGroup: UntypedFormGroup;
 
   notificationDeliveryMethod = NotificationDeliveryMethod;
-  notificationDeliveryMethodMap = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
+  notificationDeliveryMethodMap = [NotificationDeliveryMethod.WEB, NotificationDeliveryMethod.SMS, NotificationDeliveryMethod.EMAIL];
+  notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
 
   private propagateChange = null;
 
@@ -64,8 +69,7 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   ngOnInit() {
     this.notificationSettingsFormGroup = this.fb.group(
       {
-        ruleId: [],
-        ruleName: [''],
+        name: [''],
         enabled: [true],
         enabledDeliveryMethods: []
       });
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts
index 183ebb9a99..afcc833754 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts
@@ -40,7 +40,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
 
   notificationSettings: UntypedFormGroup;
 
-  notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
+  notificationDeliveryMethods = [NotificationDeliveryMethod.WEB, NotificationDeliveryMethod.SMS, NotificationDeliveryMethod.EMAIL];
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
 
   allowNotificationDeliveryMethods: Array<NotificationDeliveryMethod>;
@@ -72,14 +72,23 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
 
   private patchNotificationSettings(settings: NotificationUserSettings) {
     const notificationSettingsControls: Array<AbstractControl> = [];
+    let preparedSettings;
     if (settings.prefs) {
-      settings.prefs.forEach((setting) => {
+      preparedSettings = this.prepareNotificationSettings(settings.prefs);
+      preparedSettings.forEach((setting) => {
         notificationSettingsControls.push(this.fb.control(setting, [Validators.required]));
       });
     }
     this.notificationSettings.setControl('prefs', this.fb.array(notificationSettingsControls), {emitEvent: false});
   }
 
+  private prepareNotificationSettings(prefs: any) {
+    return Object.entries(prefs).map((value: any) => {
+      value[1].name = value[0];
+      return value[1];
+    });
+  }
+
   resetSettings() {
     this.dialogService.confirm(
       this.translate.instant('notification.settings.reset-all-title'),
@@ -90,11 +99,11 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     ).subscribe(
       result => {
         if (result) {
-          const settings = this.route.snapshot.data.userSettings;
+          const settings = this.prepareNotificationSettings(this.route.snapshot.data.userSettings.prefs);
           const notificationSettingsControls: Array<AbstractControl> = [];
           this.notificationSettings.reset({});
-          if (settings.prefs) {
-            settings.prefs.forEach((setting) => {
+          if (settings) {
+            settings.forEach((setting) => {
               setting.enabled = true;
               setting.enabledDeliveryMethods = this.notificationDeliveryMethods;
               notificationSettingsControls.push(this.fb.control(setting, [Validators.required]));
@@ -153,7 +162,13 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
   }
 
   save(): void {
-    this.notificationService.saveNotificationUserSettings(this.notificationSettings.getRawValue()).subscribe(
+    const settings = {prefs: {}};
+    this.notificationSettings.getRawValue().prefs.forEach(value => {
+      const key = value.name;
+      delete value.name;
+      settings.prefs[key] = value;
+    });
+    this.notificationService.saveNotificationUserSettings(settings).subscribe(
       (userSettings) => {
         this.notificationSettings.get('prefs').reset({});
         this.patchNotificationSettings(userSettings);
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index 071e3230fa..9ba1bca7c5 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/ui-ngx/src/app/shared/models/notification.models.ts
@@ -591,12 +591,10 @@ export const TriggerTypeTranslationMap = new Map<TriggerType, string>([
 ]);
 
 export interface NotificationUserSettings {
-  prefs: Array<NotificationUserSetting>;
+  prefs: {[key: string]: NotificationUserSetting};
 }
 
 export interface NotificationUserSetting {
-  ruleId: string;
-  ruleName: string;
   enabled: boolean;
   enabledDeliveryMethods: Array<NotificationDeliveryMethod>;
 }