diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html
index 1a97e0126..bf752ccc7 100644
--- a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html
+++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html
@@ -1,14 +1,15 @@
 <iqser-side-nav [title]="'account-settings' | translate">
-    <ng-container *ngFor="let item of items">
-        <div
-            *ngIf="item.show"
-            [routerLinkActiveOptions]="{ exact: false }"
-            [routerLink]="'../' + item.screen"
-            [attr.help-mode-key]="item.helpModeKey"
-            class="item"
-            routerLinkActive="active"
-        >
-            {{ item.label | translate }}
-        </div>
-    </ng-container>
+    @for (item of items; track item.helpModeKey) {
+        @if (item.show) {
+            <div
+                [routerLinkActiveOptions]="{ exact: false }"
+                [routerLink]="'../' + item.screen"
+                [attr.help-mode-key]="item.helpModeKey"
+                class="item"
+                routerLinkActive="active"
+            >
+                {{ item.label | translate }}
+            </div>
+        }
+    }
 </iqser-side-nav>
diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts
index 71f58143c..af4b42c72 100644
--- a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts
+++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts
@@ -6,7 +6,6 @@ import { User } from '@red/domain';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { SideNavComponent } from '@common-ui/shared';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgForOf, NgIf } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 interface NavItem {
@@ -22,7 +21,7 @@ interface NavItem {
     styleUrls: ['./account-side-nav.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [SideNavComponent, TranslateModule, NgForOf, NgIf, RouterLinkActive, RouterLink],
+    imports: [SideNavComponent, TranslateModule, RouterLinkActive, RouterLink],
 })
 export class AccountSideNavComponent {
     readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html
index 6335575a8..eb2bcf467 100644
--- a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html
+++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html
@@ -8,9 +8,11 @@
             <div class="content-container full-height">
                 <div class="overlay-shadow"></div>
                 <div [ngClass]="!isWarningsScreen && 'dialog'">
-                    <div *ngIf="!isWarningsScreen" class="dialog-header">
-                        <div class="heading-l" [translate]="translations[path]"></div>
-                    </div>
+                    @if (!isWarningsScreen) {
+                        <div class="dialog-header">
+                            <div class="heading-l" [translate]="translations[path]"></div>
+                        </div>
+                    }
 
                     <router-outlet></router-outlet>
                 </div>
diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
index ccfa31ad0..d82944205 100644
--- a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
+++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 import { accountTranslations } from '@translations/account-translations';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { AccountSideNavComponent } from '../account-side-nav/account-side-nav.component';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -11,7 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
     styleUrls: ['./base-account-screen-component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgClass, NgIf, RouterOutlet, AccountSideNavComponent, TranslateModule],
+    imports: [NgClass, RouterOutlet, AccountSideNavComponent, TranslateModule],
 })
 export class BaseAccountScreenComponent implements OnInit {
     readonly translations = accountTranslations;
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html
index 7c072b355..3871a78b6 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html
@@ -1,6 +1,6 @@
 <form (submit)="save()" [formGroup]="form">
     <div class="dialog-content">
-        <div *ngFor="let category of notificationCategories">
+        @for (category of notificationCategories; track category) {
             <div class="iqser-input-group header w-full">
                 <mat-slide-toggle color="primary" formControlName="{{ category }}Enabled"
                     >{{ translations[category] | translate }}
@@ -8,26 +8,31 @@
             </div>
 
             <!--            TODO: This lots of getters-->
-            <div *ngIf="isCategoryActive(category)" class="options-content">
-                <div [translate]="'notifications-screen.options-title'" class="statement"></div>
+            @if (isCategoryActive(category)) {
+                <div class="options-content">
+                    <div [translate]="'notifications-screen.options-title'" class="statement"></div>
 
-                <div *ngFor="let key of notificationGroupsKeys; let i = index" class="group">
-                    <div [translate]="translations[key]" class="group-title"></div>
-                    <div class="iqser-input-group">
-                        <ng-container *ngFor="let preference of getRssFilteredSettings(notificationGroupsValues[i])">
-                            <mat-checkbox
-                                (change)="addRemovePreference($event.checked, category, preference)"
-                                *ngIf="!skipPreference(preference)"
-                                [checked]="isPreferenceChecked(category, preference)"
-                                color="primary"
-                            >
-                                {{ translations[preference] | translate }}
-                            </mat-checkbox>
-                        </ng-container>
-                    </div>
+                    @for (key of notificationGroupsKeys; track key) {
+                        <div class="group">
+                            <div [translate]="translations[key]" class="group-title"></div>
+                            <div class="iqser-input-group">
+                                @for (preference of getRssFilteredSettings(notificationGroupsValues[$index]); track preference) {
+                                    @if (!skipPreference(preference)) {
+                                        <mat-checkbox
+                                            (change)="addRemovePreference($event.checked, category, preference)"
+                                            [checked]="isPreferenceChecked(category, preference)"
+                                            color="primary"
+                                        >
+                                            {{ translations[preference] | translate }}
+                                        </mat-checkbox>
+                                    }
+                                }
+                            </div>
+                        </div>
+                    }
                 </div>
-            </div>
-        </div>
+            }
+        }
     </div>
 
     <div class="dialog-actions">
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts
index c9b92f288..4c96d2b27 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts
@@ -14,7 +14,6 @@ import {
 import { firstValueFrom } from 'rxjs';
 import { notificationsSettingsTranslations } from '@translations/notifications-settings-translations';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { NgForOf, NgIf } from '@angular/common';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -26,7 +25,7 @@ const RSS_EXCLUDED_SETTINGS = ['USER_PROMOTED_TO_APPROVER', 'USER_DEGRADED_TO_RE
     styleUrls: ['./notifications-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ReactiveFormsModule, NgForOf, MatSlideToggle, TranslateModule, NgIf, MatCheckbox, IconButtonComponent],
+    imports: [ReactiveFormsModule, MatSlideToggle, TranslateModule, MatCheckbox, IconButtonComponent],
 })
 export class NotificationsScreenComponent extends BaseFormComponent implements OnInit {
     readonly #toaster = inject(Toaster);
diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.html b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.html
index 29a462da6..ece6dd4c6 100644
--- a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.html
+++ b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.html
@@ -12,7 +12,7 @@
                         }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionAddRedaction" formControlName="addRedactionApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionAddRedaction()" formControlName="addRedactionApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -25,7 +25,7 @@
                         }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionRemoveRedaction" formControlName="removeRedactionApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionRemoveRedaction()" formControlName="removeRedactionApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -39,7 +39,7 @@
                         }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation" formControlName="removeRecommendationApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation()" formControlName="removeRecommendationApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -51,7 +51,7 @@
                         <mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionAddHint" formControlName="addHintApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionAddHint()" formControlName="addHintApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -62,7 +62,7 @@
                         <mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionRemoveHint" formControlName="removeHintApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionRemoveHint()" formControlName="removeHintApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
index 85ff67c63..eedeec78d 100644
--- a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
@@ -1,11 +1,11 @@
 import { NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, computed, inject } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField } from '@angular/material/form-field';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { BaseFormComponent } from '@common-ui/form';
-import { AsControl } from '@common-ui/utils';
+import { AsControl, formValueToSignal } from '@common-ui/utils';
 import { IconButtonComponent } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
@@ -48,57 +48,53 @@ export class DialogDefaultsComponent extends BaseFormComponent {
     readonly #formBuilder = inject(FormBuilder);
     readonly #userPreferences = inject(UserPreferenceService);
     readonly #changeDetectorRef = inject(ChangeDetectorRef);
-    form: FormGroup<AsControl<DefaultOptionsForm>> = this.#formBuilder.group({
-        addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
-        addHint: this.#userPreferences.getAddHintDefaultOption(),
-        removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
-        removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
-        removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
-        addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
-        removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
-        removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
-        addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
-        removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
-    });
-    initialFormValue = this.form.getRawValue();
-
     readonly redactionAddOptions = redactionAddOptions;
     readonly hintAddOptions = hintAddOptions;
     readonly removeOptions = removeOptions;
     readonly redactionRemoveOptions = redactionRemoveOptions;
     readonly recommendationRemoveOptions = recommendationRemoveOptions;
 
-    constructor() {
-        super();
-    }
+    form: FormGroup<AsControl<DefaultOptionsForm>> = this.#formBuilder.group(this.#initialFormValue);
+    initialFormValue = this.form.getRawValue();
 
-    get displayExtraOptionAddRedaction() {
-        return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addRedaction.value;
-    }
+    readonly formToSignalMap = {
+        addRedaction: formValueToSignal<DefaultOptionsForm['addRedaction']>(this.form.controls.addRedaction),
+        addHint: formValueToSignal<DefaultOptionsForm['addHint']>(this.form.controls.addHint),
+        removeRedaction: formValueToSignal<DefaultOptionsForm['removeRedaction']>(this.form.controls.removeRedaction),
+        removeHint: formValueToSignal<DefaultOptionsForm['removeHint']>(this.form.controls.removeHint),
+        removeRecommendation: formValueToSignal<DefaultOptionsForm['removeRecommendation']>(this.form.controls.removeRecommendation),
+    };
 
-    get displayExtraOptionAddHint() {
-        return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addHint.value;
-    }
-
-    get displayExtraOptionRemoveRedaction() {
-        return (
+    readonly displayExtraOptionAddRedaction = computed(() => RedactOrHintOptions.IN_DOSSIER === this.formToSignalMap['addRedaction']());
+    readonly displayExtraOptionAddHint = computed(() => RedactOrHintOptions.IN_DOSSIER === this.formToSignalMap['addHint']());
+    readonly displayExtraOptionRemoveRedaction = computed(() =>
+        (
             [RemoveRedactionOptions.IN_DOSSIER, RemoveRedactionOptions.FALSE_POSITIVE] as Partial<
                 RemoveRedactionOption | SystemDefaultType
             >[]
-        ).includes(this.form.controls.removeRedaction.value);
-    }
+        ).includes(this.formToSignalMap['removeRedaction']()),
+    );
+    readonly displayExtraOptionRemoveHint = computed(() => RemoveRedactionOptions.IN_DOSSIER === this.formToSignalMap['removeHint']());
+    readonly displayExtraOptionRemoveRecommendation = computed(
+        () => RemoveRedactionOptions.DO_NOT_RECOMMEND === this.formToSignalMap['removeRecommendation'](),
+    );
 
-    get displayExtraOptionRemoveHint() {
-        return RemoveRedactionOptions.IN_DOSSIER === this.form.controls.removeHint.value;
-    }
-
-    get displayExtraOptionRemoveRecommendation() {
-        return RemoveRedactionOptions.DO_NOT_RECOMMEND === this.form.controls.removeRecommendation.value;
+    get #initialFormValue() {
+        return {
+            addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
+            addHint: this.#userPreferences.getAddHintDefaultOption(),
+            removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
+            removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
+            removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
+            addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
+            removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
+            removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
+            addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
+            removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
+        } as DefaultOptionsForm;
     }
 
     async save(): Promise<any> {
-        const formValue = this.form.value;
-
         if (this.initialFormValue.addRedaction !== this.form.controls.addRedaction.value) {
             await this.#userPreferences.saveAddRedactionDefaultOption(this.form.controls.addRedaction.value);
         }
@@ -115,7 +111,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveRemoveHintDefaultOption(this.form.controls.removeHint.value);
         }
 
-        if (this.displayExtraOptionAddRedaction) {
+        if (this.displayExtraOptionAddRedaction()) {
             if (this.initialFormValue.addRedactionApplyToAll !== this.form.controls.addRedactionApplyToAll.value) {
                 await this.#userPreferences.saveAddRedactionDefaultExtraOption(this.form.controls.addRedactionApplyToAll.value);
             }
@@ -123,7 +119,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveAddRedactionDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionAddHint) {
+        if (this.displayExtraOptionAddHint()) {
             if (this.initialFormValue.addHintApplyToAll !== this.form.controls.addHintApplyToAll.value) {
                 await this.#userPreferences.saveAddHintDefaultExtraOption(this.form.controls.addHintApplyToAll.value);
             }
@@ -131,7 +127,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveAddHintDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionRemoveRedaction) {
+        if (this.displayExtraOptionRemoveRedaction()) {
             if (this.initialFormValue.removeRedactionApplyToAll !== this.form.controls.removeRedactionApplyToAll.value) {
                 await this.#userPreferences.saveRemoveRedactionDefaultExtraOption(this.form.controls.removeRedactionApplyToAll.value);
             }
@@ -139,7 +135,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveRemoveRedactionDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionRemoveHint) {
+        if (this.displayExtraOptionRemoveHint()) {
             if (this.initialFormValue.removeHintApplyToAll !== this.form.controls.removeHintApplyToAll.value) {
                 await this.#userPreferences.saveRemoveHintDefaultExtraOption(this.form.controls.removeHintApplyToAll.value);
             }
@@ -147,7 +143,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveRemoveHintDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionRemoveRecommendation) {
+        if (this.displayExtraOptionRemoveRecommendation()) {
             if (this.initialFormValue.removeRecommendationApplyToAll !== this.form.controls.removeRecommendationApplyToAll.value) {
                 await this.#userPreferences.saveRemoveRecommendationDefaultExtraOption(
                     this.form.controls.removeRecommendationApplyToAll.value,
@@ -164,17 +160,6 @@ export class DialogDefaultsComponent extends BaseFormComponent {
     }
 
     #patchValues() {
-        this.form.patchValue({
-            addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
-            addHint: this.#userPreferences.getAddHintDefaultOption(),
-            removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
-            removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
-            removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
-            addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
-            removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
-            removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
-            addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
-            removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
-        });
+        this.form.patchValue(this.#initialFormValue);
     }
 }