diff --git a/client/app/main.ts b/client/app/main.ts
index 0f53d4b33e..20a42ff1ae 100644
--- a/client/app/main.ts
+++ b/client/app/main.ts
@@ -1,3 +1,14 @@
+
+
+const translationModule = TranslateModule.forRoot({
+    loader: {
+      provide: TranslateLoader,
+      useFactory: createTranslateLoader,
+      deps: [HttpClient],
+    },
+  })
+;
+
 // https://github.com/globaleaks/GlobaLeaks/issues/3277
 // Create a proxy to override localStorage methods with sessionStorage methods
 (function() {
@@ -20,8 +31,51 @@
   });
 })();
 
-import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
-import {AppModule} from "@app/app.module";
+import { ReceiptValidatorDirective } from "@app/shared/directive/receipt-validator.directive";
+import { mockEngine } from "./src/services/helper/mocks";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateService, TranslateModule, TranslateLoader } from "@ngx-translate/core";
+import { HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient, HttpClient } from "@angular/common/http";
+import { appInterceptor, ErrorCatchingInterceptor, CompletedInterceptor } from "@app/services/root/app-interceptor.service";
+import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy, NgOptimizedImage } from "@angular/common";
+import { FlowInjectionToken, NgxFlowModule } from "@flowjs/ngx-flow";
+import { NgbDatepickerI18n, NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { CustomDatepickerI18n } from "@app/shared/services/custom-datepicker-i18n";
+import { appRoutes } from "@app/app.routes";
+import { BrowserModule, bootstrapApplication } from "@angular/platform-browser";
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { NgSelectModule } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+import { NgIdleKeepaliveModule } from "@ng-idle/keepalive";
+import { MarkdownModule, MARKED_OPTIONS } from "ngx-markdown";
+import { AppComponent, createTranslateLoader } from "./src/pages/app/app.component";
+import { importProvidersFrom } from "@angular/core";
+import * as Flow from "@flowjs/flow.js";
+import {provideRouter} from "@angular/router";
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        provideRouter(appRoutes),
+        importProvidersFrom(NgbModule, BrowserModule, translationModule, NgSelectModule, FormsModule, NgIdleKeepaliveModule.forRoot(), MarkdownModule.forRoot({
+            markedOptions: {
+                provide: MARKED_OPTIONS,
+                useValue: {
+                    breaks: true
+                }
+            }
+        }), NgxFlowModule, NgOptimizedImage),
+        ReceiptValidatorDirective,
+        { provide: 'MockEngine', useValue: mockEngine },
+        TranslatorPipe, TranslateService,
+        { provide: HTTP_INTERCEPTORS, useClass: appInterceptor, multi: true },
+        { provide: APP_BASE_HREF, useValue: "/" },
+        { provide: LocationStrategy, useClass: HashLocationStrategy },
+        { provide: HTTP_INTERCEPTORS, useClass: ErrorCatchingInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: CompletedInterceptor, multi: true },
+        { provide: FlowInjectionToken, useValue: Flow },
+        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideAnimations(),
+    ]
+})
   .catch(err => console.error(err));
diff --git a/client/app/src/app-guard.service.ts b/client/app/src/app-guard.service.ts
index 7ccd5bc939..5babd19948 100644
--- a/client/app/src/app-guard.service.ts
+++ b/client/app/src/app-guard.service.ts
@@ -1,20 +1,20 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {AppDataService} from "@app/app-data.service";
-import {UtilsService} from "@app/shared/services/utils.service";
 
 @Injectable({
   providedIn: "root"
 })
 export class SessionGuard {
-  constructor(private router: Router, private appDataService: AppDataService, public authenticationService: AuthenticationService, protected utilsService: UtilsService) {
-  }
+  private router = inject(Router);
+  private appDataService = inject(AppDataService);
+  authenticationService = inject(AuthenticationService);
 
   canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (!this.authenticationService.session) {
-      this.utilsService.routeGuardRedirect();
+      this.router.navigateByUrl("/login").then();
       return false;
     } else {
       this.appDataService.page = this.router.url;
diff --git a/client/app/src/app.module.ts b/client/app/src/app.module.ts
deleted file mode 100644
index 9594066347..0000000000
--- a/client/app/src/app.module.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import {HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA, OnDestroy} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {AppRoutingModule} from "@app/app-routing.module";
-import {AppComponent} from "@app/pages/app/app.component";
-import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from "@angular/common/http";
-import {AuthModule} from "@app/pages/auth/auth.module";
-import {APP_BASE_HREF, HashLocationStrategy, LocationStrategy, NgOptimizedImage,} from "@angular/common";
-import {SharedModule} from "@app/shared.module";
-import {HeaderComponent} from "@app/shared/partials/header/header.component";
-import {UserComponent} from "@app/shared/partials/header/template/user/user.component";
-import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
-import {TranslateHttpLoader} from "@ngx-translate/http-loader";
-import {
-  CompletedInterceptor,
-  ErrorCatchingInterceptor,
-  appInterceptor
-} from "@app/services/root/app-interceptor.service";
-import {Keepalive, NgIdleKeepaliveModule} from "@ng-idle/keepalive";
-import {DEFAULT_INTERRUPTSOURCES, Idle} from "@ng-idle/core";
-import {AuthenticationService} from "@app/services/helper/authentication.service";
-import {HomeComponent} from "@app/pages/dashboard/home/home.component";
-import {TranslatorPipe} from "@app/shared/pipes/translate";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {FormsModule} from "@angular/forms";
-import {ActionModule} from "@app/pages/action/action.module";
-import {WhistleblowerModule} from "@app/pages/whistleblower/whistleblower.module";
-import {MarkdownModule, MarkedOptions, MARKED_OPTIONS} from "ngx-markdown";
-import {ReceiptValidatorDirective} from "@app/shared/directive/receipt-validator.directive";
-import {NgxFlowModule, FlowInjectionToken} from "@flowjs/ngx-flow";
-import * as Flow from "@flowjs/flow.js";
-import {NgbModule, NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
-import {SignupModule} from "@app/pages/signup/signup.module";
-import {WizardModule} from "@app/pages/wizard/wizard.module";
-import {RecipientModule} from "@app/pages/recipient/recipient.module";
-import {AdminModule} from "@app/pages/admin/admin.module";
-import {CustodianModule} from "@app/pages/custodian/custodian.module";
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import {AnalystModule} from "@app/pages/analyst/analyst.module";
-import {mockEngine} from './services/helper/mocks';
-import {HttpService} from "./shared/services/http.service";
-import {CryptoService} from "@app/shared/services/crypto.service";
-import {TranslationService} from "@app/services/helper/translation.service";
-import {NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';
-import {CustomDatepickerI18n} from '@app/shared/services/custom-datepicker-i18n';
-import {registerLocales} from '@app/services/helper/locale-provider';
-import {ResourceLoaderService} from '@app/services/helper/resource-loader.service';
-
-// Register all the locales
-registerLocales();
-
-export function createTranslateLoader(http: HttpClient) {
-  return new TranslateHttpLoader(http, "l10n/", "");
-}
-
-(window as any).mockEngine = mockEngine;
-declare global {
-  interface Window {
-    GL: {
-      language: string;
-      mockEngine: any;
-    };
-  }
-}
-window.GL = {
-  language: 'en', // Assuming a default language
-  mockEngine: mockEngine
-};
-
-const translationModule = TranslateModule.forRoot({
-    loader: {
-      provide: TranslateLoader,
-      useFactory: createTranslateLoader,
-      deps: [HttpClient],
-    },
-  })
-;
-
-@NgModule({
-  declarations: [AppComponent, HomeComponent, HeaderComponent, UserComponent],
-  imports: [
-    AppRoutingModule,
-    NgbModule,
-    HttpClientModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    AuthModule,
-    SignupModule,
-    ActionModule,
-    WizardModule,
-    AdminModule,
-    RecipientModule,
-    translationModule,
-    NgSelectModule,
-    FormsModule,
-    WhistleblowerModule,
-    CustodianModule,
-    AnalystModule,
-    SharedModule,
-    NgIdleKeepaliveModule.forRoot(),
-    MarkdownModule.forRoot({
-      markedOptions: {
-        provide: MARKED_OPTIONS,
-        useValue: {
-          breaks: true
-        }
-      }
-    }),
-    NgxFlowModule,
-    NgOptimizedImage
-  ],
-  providers: [
-    ReceiptValidatorDirective,
-    {provide: 'MockEngine', useValue: mockEngine},
-    TranslatorPipe, TranslateService,
-    {provide: HTTP_INTERCEPTORS, useClass: appInterceptor, multi: true},
-    {provide: APP_BASE_HREF, useValue: "/"},
-    {provide: LocationStrategy, useClass: HashLocationStrategy},
-    {provide: HTTP_INTERCEPTORS, useClass: ErrorCatchingInterceptor, multi: true},
-    {provide: HTTP_INTERCEPTORS, useClass: CompletedInterceptor, multi: true},
-    {provide: FlowInjectionToken, useValue: Flow},
-    {provide: LocationStrategy, useClass: HashLocationStrategy},
-    {
-      provide: NgbPaginationConfig,
-      useFactory: () => {
-        const config = new NgbPaginationConfig();
-        config.size = 'sm';           // Set pagination size (sm for small, lg for large)
-        config.boundaryLinks = true;  // Display boundary links (first/last)
-        config.directionLinks = true; // Display previous/next buttons
-        config.maxSize = 20;          // Maximum number of pages displayed
-        config.rotate = true;         // Whether to rotate pages when maxSize > number of pages.
-        config.ellipses = true;       // If true, the ellipsis symbols and first/last page numbers
-                                      // will be shown when maxSize > number of pages.
-        return config;
-      }
-    },
-    {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}
-  ],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class AppModule implements OnDestroy {
-
-  constructor(private cryptoService:CryptoService, private authenticationService: AuthenticationService, private idle: Idle, private keepalive: Keepalive, private httpService: HttpService, private resourceLoader: ResourceLoaderService) {
-    this.initIdleState();
-    this.loadNonCriticalResources();
-  }
-
-  @HostListener("window:beforeunload")
-  async ngOnDestroy() {
-    this.reset();
-  }
-
-  initIdleState() {
-    this.idle.setIdle(1500);
-    this.idle.setTimeout(300);
-    this.keepalive.interval(30);
-    this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
-
-    this.keepalive.onPing.subscribe(() => {
-      if (this.authenticationService && this.authenticationService.session) {
-        const token = this.authenticationService.session.token;
-        this.cryptoService.proofOfWork(token.id).subscribe((result) => {
-	  const param = {'token': token.id + ":" + result};
-          this.httpService.requestRefreshUserSession(param).subscribe((result => {
-            this.authenticationService.session.token = result.token;
-	  }));
-	});
-      }
-    });
-
-    this.idle.onTimeout.subscribe(() => {
-      if (this.authenticationService && this.authenticationService.session) {
-        if (this.authenticationService.session.role === "whistleblower") {
-          window.location.replace("about:blank");
-        } else {
-          this.authenticationService.deleteSession();
-          this.authenticationService.loginRedirect();
-        }
-      }
-    });
-
-    this.reset();
-  }
-
-  // Method to load non-critical resources dynamically
-  loadNonCriticalResources() {
-    // Load CSS file dynamically
-    this.resourceLoader.loadStyle('/css/fonts.css');
-  }
-
-  reset() {
-    this.idle.watch();
-    this.authenticationService.reset();
-  }
-}
-
diff --git a/client/app/src/app-routing.module.ts b/client/app/src/app.routes.ts
similarity index 58%
rename from client/app/src/app-routing.module.ts
rename to client/app/src/app.routes.ts
index 7068b44522..94a959e428 100644
--- a/client/app/src/app-routing.module.ts
+++ b/client/app/src/app.routes.ts
@@ -1,39 +1,28 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
+import {Routes} from "@angular/router";
 import {SessionGuard} from "@app/app-guard.service";
-import {HomeComponent} from "@app/pages/dashboard/home/home.component";
-import {
-  PasswordResetResponseComponent
-} from "@app/pages/auth/password-reset-response/password-reset-response.component";
 import {AdminGuard} from "@app/shared/guards/admin.guard";
 import {CustodianGuard} from "@app/shared/guards/custodian.guard";
 import {ReceiverGuard} from "@app/shared/guards/receiver.guard";
 import {AnalystGuard} from "@app/shared/guards/analyst.guard";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {Pageguard} from "@app/shared/guards/pageguard.service";
-import {ActivationComponent} from "@app/pages/signup/templates/activation/activation.component";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {RTipsResolver} from "@app/shared/resolvers/r-tips-resolver.service";
-import {TipComponent} from "@app/pages/recipient/tip/tip.component";
 import {TitleResolver} from "@app/shared/resolvers/title-resolver.resolver";
 import {IarResolver} from "@app/shared/resolvers/iar-resolver.service";
-import {BlankComponent} from "@app/shared/blank/blank.component";
 import {WbTipResolver} from "@app/shared/resolvers/wb-tip-resolver.service";
 import {WhistleblowerLoginResolver} from "@app/shared/resolvers/whistleblower-login.resolver";
-import {SubmissionComponent} from "@app/pages/whistleblower/submission/submission.component";
-import {AuthRoutingModule} from "@app/pages/auth/auth-routing.module";
 
-
-const routes: Routes = [
+export const appRoutes: Routes = [
   {
     path: "blank",
     pathMatch: "full",
-    component: BlankComponent
+    loadComponent: () => import('@app/shared/blank/blank.component').then(m => m.BlankComponent)
   },
   {
     path: "",
     canActivate: [Pageguard],
-    component: HomeComponent,
+    loadComponent: () => import('@app/pages/dashboard/home/home.component').then(m => m.HomeComponent),
     data: {pageTitle: ""},
     pathMatch: "full",
     resolve: {
@@ -43,7 +32,7 @@ const routes: Routes = [
   {
     path: "submission",
     canActivate: [Pageguard],
-    component: SubmissionComponent,
+    loadComponent: () => import('@app/pages/whistleblower/submission/submission.component').then(m => m.SubmissionComponent),
     data: {pageTitle: ""},
     pathMatch: "full",
     resolve: {
@@ -54,7 +43,7 @@ const routes: Routes = [
     path: "login",
     canActivate: [Pageguard],
     data: {pageTitle: "Log in"},
-    loadChildren: () => AuthRoutingModule,
+    loadChildren: () => import("./pages/auth/auth.routes").then(m => m.authRoutes),
   },
   {
     path: "signup",
@@ -62,17 +51,16 @@ const routes: Routes = [
     resolve: {
       PreferenceResolver
     },
-    loadChildren: () => import("./pages/signup/signup-routing.module").then(m => m.SignupRoutingModule)
-
+    loadChildren: () => import("./pages/signup/signup.routes").then(m => m.signupRoutes)
   },
   {
     path: "action",
-    loadChildren: () => import("./pages/action/action-routing.module").then(m => m.ActionRoutingModule)
+    loadChildren: () => import("./pages/action/action.routes").then(m => m.actionRoutes)
   },
   {
     path: "recipient",
     canActivate: [ReceiverGuard],
-    loadChildren: () => import("./pages/recipient/recipient-routing.module").then(m => m.RecipientRoutingModule),
+    loadChildren: () => import("./pages/recipient/recipient.routes").then(m => m.recipientRoutes),
     data: {
       sidebar: "recipient-sidebar"
     }
@@ -83,7 +71,7 @@ const routes: Routes = [
     resolve: {
       PreferenceResolver, NodeResolver, RtipsResolver: RTipsResolver, IarsResolver: IarResolver
     },
-    loadChildren: () => import("./pages/custodian/custodian-routing.module").then(m => m.CustodianRoutingModule),
+    loadChildren: () => import("./pages/custodian/custodian.routes").then(m => m.custodianRoutes),
     data: {
       sidebar: "custodian-sidebar",
       pageTitle: "Home",
@@ -92,7 +80,7 @@ const routes: Routes = [
   {
     path: "analyst",
     canActivate: [AnalystGuard],
-    loadChildren: () => import("./pages/analyst/analyst-routing.module").then(m => m.AnalystRoutingModule),
+    loadChildren: () => import("./pages/analyst/analyst.routes").then(m => m.analystRoutes),
     data: {
       sidebar: "analyst-sidebar",
       pageTitle: "Home",
@@ -101,21 +89,21 @@ const routes: Routes = [
   {
     path: "admin",
     canActivate: [AdminGuard],
-    loadChildren: () => import("./pages/admin/admin-routing.module").then(m => m.AdminRoutingModule),
+    loadChildren: () => import("./pages/admin/admin.routes").then(m => m.adminRoutes),
     data: {
       sidebar: "admin-sidebar",
-      pageTitle: "Log in",
+      pageTitle: "Home",
     },
   },
   {
     path: "password/reset",
     data: {pageTitle: "Password reset"},
-    component: PasswordResetResponseComponent,
+    loadComponent: () => import('@app/pages/auth/password-reset-response/password-reset-response.component').then(m => m.PasswordResetResponseComponent),
   },
   {
     path: "activation",
     data: {pageTitle: "Sign up"},
-    component: ActivationComponent,
+    loadComponent: () => import('@app/pages/signup/templates/activation/activation.component').then(m => m.ActivationComponent),
   },
   {
     path: "wizard",
@@ -124,7 +112,7 @@ const routes: Routes = [
       PreferenceResolver,
       title: TitleResolver
     },
-    loadChildren: () => import("./pages/wizard/wizard-routing.module").then(m => m.WizardRoutingModule)
+    loadChildren: () => import("./pages/wizard/wizard.routes").then(m => m.wizardRoutes)
   },
   {
     path: "reports/:tip_id",
@@ -132,17 +120,9 @@ const routes: Routes = [
     resolve: {
       PreferenceResolver,
     },
-    component: TipComponent,
+    loadComponent: () => import('@app/pages/recipient/tip/tip.component').then(m => m.TipComponent),
     canActivate: [SessionGuard],
     pathMatch: "full",
   },
   {path: "**", redirectTo: ""}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {
-
-}
+];
\ No newline at end of file
diff --git a/client/app/src/models/authentication/session.ts b/client/app/src/models/authentication/session.ts
index 2a79168c55..7c3da163bf 100644
--- a/client/app/src/models/authentication/session.ts
+++ b/client/app/src/models/authentication/session.ts
@@ -1,4 +1,7 @@
+import {redirectResolverModel} from "../resolvers/redirect-resolver-model";
+
 export class Session {
+  redirect: redirectResolverModel;
   id: string;
   role: string;
   encryption: boolean;
@@ -10,7 +13,6 @@ export class Session {
   two_factor: boolean;
   permissions: { can_upload_files: boolean };
   token: any;
-  redirect: string;
 }
 
 export interface Properties {
diff --git a/client/app/src/pages/action/action-routing.module.ts b/client/app/src/pages/action/action-routing.module.ts
deleted file mode 100644
index bf25f54d9a..0000000000
--- a/client/app/src/pages/action/action-routing.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {ForcedTwoFactorComponent} from "@app/pages/action/forced-two-factor/forced-two-factor.component";
-import {ForcePasswordChangeComponent} from "@app/pages/action/force-password-change/force-password-change.component";
-
-const routes: Routes = [
-  {
-    path: "forcedtwofactor",
-    component: ForcedTwoFactorComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Password reset"},
-  }, {
-    path: "forcedpasswordchange",
-    component: ForcePasswordChangeComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Password reset"},
-  }
-
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ActionRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/action/action.module.ts b/client/app/src/pages/action/action.module.ts
deleted file mode 100644
index 558b4fe365..0000000000
--- a/client/app/src/pages/action/action.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ForcedTwoFactorComponent} from "@app/pages/action/forced-two-factor/forced-two-factor.component";
-import {SharedModule} from "@app/shared.module";
-import {TranslateModule} from "@ngx-translate/core";
-import {ForcePasswordChangeComponent} from "@app/pages/action/force-password-change/force-password-change.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-
-
-@NgModule({
-  declarations: [
-    ForcedTwoFactorComponent,
-    ForcePasswordChangeComponent
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    SharedModule
-  ]
-})
-export class ActionModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/action/action.routes.ts b/client/app/src/pages/action/action.routes.ts
new file mode 100644
index 0000000000..54e408ad77
--- /dev/null
+++ b/client/app/src/pages/action/action.routes.ts
@@ -0,0 +1,15 @@
+import {Routes} from "@angular/router";
+
+export const actionRoutes: Routes = [
+  {
+    path: "forcedtwofactor",
+    loadComponent: () => import('@app/pages/action/forced-two-factor/forced-two-factor.component').then(m => m.ForcedTwoFactorComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Password reset"},
+  }, {
+    path: "forcedpasswordchange",
+    loadComponent: () => import('@app/pages/action/force-password-change/force-password-change.component').then(m => m.ForcePasswordChangeComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Password reset"},
+  }
+];
\ No newline at end of file
diff --git a/client/app/src/pages/action/force-password-change/force-password-change.component.ts b/client/app/src/pages/action/force-password-change/force-password-change.component.ts
index f20cfbf936..7301498b2d 100644
--- a/client/app/src/pages/action/force-password-change/force-password-change.component.ts
+++ b/client/app/src/pages/action/force-password-change/force-password-change.component.ts
@@ -1,8 +1,13 @@
 import {Component} from "@angular/core";
+import { PasswordChangeComponent } from "../../../shared/partials/password-change/password-change.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-force-password-change",
-  templateUrl: "./force-password-change.component.html"
+    selector: "src-force-password-change",
+    templateUrl: "./force-password-change.component.html",
+    standalone: true,
+    imports: [PasswordChangeComponent, TranslateModule, TranslatorPipe]
 })
 export class ForcePasswordChangeComponent {
 
diff --git a/client/app/src/pages/action/forced-two-factor/forced-two-factor.component.ts b/client/app/src/pages/action/forced-two-factor/forced-two-factor.component.ts
index 9fc0e4ee26..d520f4a8a7 100644
--- a/client/app/src/pages/action/forced-two-factor/forced-two-factor.component.ts
+++ b/client/app/src/pages/action/forced-two-factor/forced-two-factor.component.ts
@@ -1,16 +1,27 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {TwoFactorAuthData} from "@app/services/helper/2fa.data.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {Router} from "@angular/router";
+import { Enable2fa } from "../../../shared/partials/enable-2fa/enable-2fa";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-forced-two-factor",
-  templateUrl: "./forced-two-factor.component.html"
+    selector: "src-forced-two-factor",
+    templateUrl: "./forced-two-factor.component.html",
+    standalone: true,
+    imports: [Enable2fa, TranslateModule, TranslatorPipe]
 })
 export class ForcedTwoFactorComponent {
-  constructor(protected twoFactorAuthData: TwoFactorAuthData, private httpService: HttpService, private preferenceResolver: PreferenceResolver, private authenticationService: AuthenticationService, private router: Router) {
+  protected twoFactorAuthData = inject(TwoFactorAuthData);
+  private httpService = inject(HttpService);
+  private preferenceResolver = inject(PreferenceResolver);
+  private authenticationService = inject(AuthenticationService);
+  private router = inject(Router);
+
+  constructor() {
     this.twoFactorAuthData.totp.secret = ""
     this.twoFactorAuthData.totp.token = ""
   }
diff --git a/client/app/src/pages/admin/admin-preferences/admin-preferences.component.ts b/client/app/src/pages/admin/admin-preferences/admin-preferences.component.ts
index 57e660ef9e..400ad338a3 100644
--- a/client/app/src/pages/admin/admin-preferences/admin-preferences.component.ts
+++ b/client/app/src/pages/admin/admin-preferences/admin-preferences.component.ts
@@ -1,8 +1,11 @@
 import {Component} from "@angular/core";
+import { PreferencesComponent } from "../../../shared/partials/preferences/preferences.component";
 
 @Component({
-  selector: "src-admin-preferences",
-  templateUrl: "./admin-preferences.component.html"
+    selector: "src-admin-preferences",
+    templateUrl: "./admin-preferences.component.html",
+    standalone: true,
+    imports: [PreferencesComponent]
 })
 export class AdminPreferencesComponent {
 
diff --git a/client/app/src/pages/admin/admin.module.ts b/client/app/src/pages/admin/admin.module.ts
deleted file mode 100644
index 30672b0fac..0000000000
--- a/client/app/src/pages/admin/admin.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {NgbNavModule, NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {SharedModule} from "@app/shared.module";
-import {SidebarComponent} from "@app/pages/admin/sidebar/sidebar.component";
-import {RouterModule} from "@angular/router";
-import {FormsModule} from "@angular/forms";
-import {AdminPreferencesComponent} from "@app/pages/admin/admin-preferences/admin-preferences.component";
-import {adminHomeComponent} from "@app/pages/admin/home/admin-home.component";
-
-@NgModule({
-  declarations: [
-    AdminPreferencesComponent,
-    adminHomeComponent,
-    SidebarComponent,
-  ],
-  imports: [
-    CommonModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule
-  ],
-  exports: [SidebarComponent]
-})
-export class AdminModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/admin-routing.module.ts b/client/app/src/pages/admin/admin.routes.ts
similarity index 68%
rename from client/app/src/pages/admin/admin-routing.module.ts
rename to client/app/src/pages/admin/admin.routes.ts
index 3c972c30ff..318059b6c3 100644
--- a/client/app/src/pages/admin/admin-routing.module.ts
+++ b/client/app/src/pages/admin/admin.routes.ts
@@ -1,16 +1,4 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {adminHomeComponent} from "@app/pages/admin/home/admin-home.component";
-import {SettingsModule} from "@app/pages/admin/settings/settings.module";
-import {UsersModule} from "@app/pages/admin/users/users.module";
-import {ContextsModule} from "@app/pages/admin/contexts/contexts.module";
-import {CaseManagementModule} from "@app/pages/admin/casemanagement/case-management.module";
-import {AuditLogModule} from "@app/pages/admin/auditlog/audit-log.module";
-import {NotificationsModule} from "@app/pages/admin/notifications/notifications.module";
-import {SitesModule} from "@app/pages/admin/sites/sites.module";
-import {NetworkModule} from "@app/pages/admin/network/network.module";
-import {QuestionnairesModule} from "@app/pages/admin/questionnaires/questionnaires.module";
-import {AdminPreferencesComponent} from "@app/pages/admin/admin-preferences/admin-preferences.component";
+import {Routes} from "@angular/router";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {UsersResolver} from "@app/shared/resolvers/users.resolver";
@@ -25,10 +13,10 @@ import {RedirectsResolver} from "@app/shared/resolvers/redirects.resolver";
 import {FieldTemplatesResolver} from "@app/shared/resolvers/field-templates-resolver.service";
 import {StatusResolver} from "@app/shared/resolvers/statuses.resolver";
 
-const routes: Routes = [
+export const adminRoutes: Routes = [
   {
     path: "",
-    component: adminHomeComponent,
+    loadComponent: () => import('@app/pages/admin/home/admin-home.component').then(m => m.adminHomeComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver
     },
@@ -37,7 +25,7 @@ const routes: Routes = [
   },
   {
     path: "home",
-    component: adminHomeComponent,
+    loadComponent: () => import('@app/pages/admin/home/admin-home.component').then(m => m.adminHomeComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver
     },
@@ -46,7 +34,7 @@ const routes: Routes = [
   },
   {
     path: "preferences",
-    component: AdminPreferencesComponent,
+    loadComponent: () => import('@app/pages/admin/admin-preferences/admin-preferences.component').then(m => m.AdminPreferencesComponent),
     resolve: {
       NodeResolver, PreferenceResolver
     },
@@ -55,7 +43,7 @@ const routes: Routes = [
   },
   {
     path: "settings",
-    loadChildren: () => SettingsModule,
+    loadComponent: () => import('@app/pages/admin/settings/settings.component').then(m => m.AdminSettingsComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver, QuestionnairesResolver
     },
@@ -64,7 +52,7 @@ const routes: Routes = [
   },
   {
     path: "sites",
-    loadChildren: () => SitesModule,
+    loadComponent: () => import('@app/pages/admin/sites/sites.component').then(m => m.SitesComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver, JobResolver, TipsResolver, QuestionnairesResolver, StatusResolver
     },
@@ -73,7 +61,7 @@ const routes: Routes = [
   },
   {
     path: "users",
-    loadChildren: () => UsersModule,
+    loadComponent: () => import('@app/pages/admin/users/users.component').then(m => m.UsersComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver
     },
@@ -82,7 +70,7 @@ const routes: Routes = [
   },
   {
     path: "questionnaires",
-    loadChildren: () => QuestionnairesModule,
+    loadComponent: () => import('@app/pages/admin/questionnaires/questionnaires.component').then(m => m.QuestionnairesComponent),
     resolve: {
       NodeResolver, PreferenceResolver, ContextsResolver, UsersResolver, QuestionnairesResolver, FieldTemplatesResolver
     },
@@ -91,7 +79,7 @@ const routes: Routes = [
   },
   {
     path: "channels",
-    loadChildren: () => ContextsModule,
+    loadComponent: () => import('@app/pages/admin/contexts/contexts.component').then(m => m.ContextsComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver, QuestionnairesResolver, ContextsResolver
     },
@@ -100,7 +88,7 @@ const routes: Routes = [
   },
   {
     path: "casemanagement",
-    loadChildren: () => CaseManagementModule,
+    loadComponent: () => import('@app/pages/admin/casemanagement/case-management.component').then(m => m.CaseManagementComponent),
     resolve: {
       NodeResolver, PreferenceResolver, StatuseResolver: StatusResolver
     },
@@ -109,7 +97,7 @@ const routes: Routes = [
   },
   {
     path: "auditlog",
-    loadChildren: () => AuditLogModule,
+    loadComponent: () => import('@app/pages/admin/auditlog/audit-log.component').then(m => m.AuditLogComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver, AuditlogResolver: AuditLogResolver, JobResolver, TipsResolver
     },
@@ -118,7 +106,7 @@ const routes: Routes = [
   },
   {
     path: "notifications",
-    loadChildren: () => NotificationsModule,
+    loadComponent: () => import('@app/pages/admin/notifications/notifications.component').then(m => m.NotificationsComponent),
     resolve: {
       NodeResolver, PreferenceResolver, NotificationsResolver
     },
@@ -127,18 +115,11 @@ const routes: Routes = [
   },
   {
     path: "network",
-    loadChildren: () => NetworkModule,
+    loadComponent: () => import('@app/pages/admin/network/network.component').then(m => m.NetworkComponent),
     resolve: {
       NodeResolver, PreferenceResolver, UsersResolver, NetworkResolver, RedirectsResolver
     },
     pathMatch: "full",
     data: {sidebar: "admin-sidebar", pageTitle: "Network"},
   }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class AdminRoutingModule {
-}
+];
\ No newline at end of file
diff --git a/client/app/src/pages/admin/auditlog/audit-log.component.html b/client/app/src/pages/admin/auditlog/audit-log.component.html
index e62abc3211..db34088d71 100644
--- a/client/app/src/pages/admin/auditlog/audit-log.component.html
+++ b/client/app/src/pages/admin/auditlog/audit-log.component.html
@@ -1,24 +1,24 @@
 <div id="SectionContent" name="contentForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title"> <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-auditlog-tab1></src-auditlog-tab1>
-    </ng-template>
-    <ng-template #tab2>
-        <src-auditlog-tab2></src-auditlog-tab2>
-    </ng-template>
-    <ng-template #tab3>
-        <src-auditlog-tab3></src-auditlog-tab3>
-    </ng-template>
-    <ng-template #tab4>
-        <src-auditlog-tab4></src-auditlog-tab4>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title"> <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+      <ng-template ngbNavContent>
+        <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+      </ng-template>
+    </li>
+  }
+</ul>
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+<ng-template #tab1>
+  <src-auditlog-tab1></src-auditlog-tab1>
+</ng-template>
+<ng-template #tab2>
+  <src-auditlog-tab2></src-auditlog-tab2>
+</ng-template>
+<ng-template #tab3>
+  <src-auditlog-tab3></src-auditlog-tab3>
+</ng-template>
+<ng-template #tab4>
+  <src-auditlog-tab4></src-auditlog-tab4>
+</ng-template>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/auditlog/audit-log.component.ts b/client/app/src/pages/admin/auditlog/audit-log.component.ts
index 4023d0faec..343cb71b20 100644
--- a/client/app/src/pages/admin/auditlog/audit-log.component.ts
+++ b/client/app/src/pages/admin/auditlog/audit-log.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, TemplateRef, ViewChild, ChangeDetectorRef} from "@angular/core";
+import { AfterViewInit, Component, TemplateRef, ViewChild, ChangeDetectorRef, inject } from "@angular/core";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {Tab} from "@app/models/component-model/tab";
@@ -6,12 +6,22 @@ import {AuditLogTab1Component} from "@app/pages/admin/auditlog/auditlog-tab1/aud
 import {AuditLogTab2Component} from "@app/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component";
 import {AuditLogTab3Component} from "@app/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component";
 import {AuditLogTab4Component} from "@app/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-auditlog",
-  templateUrl: "./audit-log.component.html"
+    selector: "src-auditlog",
+    templateUrl: "./audit-log.component.html",
+    standalone: true,
+    imports: [NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, AuditLogTab1Component, AuditLogTab2Component, AuditLogTab3Component, AuditLogTab4Component, TranslatorPipe, TranslateModule]
 })
 export class AuditLogComponent implements AfterViewInit {
+  private nodeResolver = inject(NodeResolver);
+  private authenticationService = inject(AuthenticationService);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<AuditLogTab1Component>;
   @ViewChild("tab2") tab2!: TemplateRef<AuditLogTab2Component>;
   @ViewChild("tab3") tab3!: TemplateRef<AuditLogTab3Component>;
@@ -21,9 +31,6 @@ export class AuditLogComponent implements AfterViewInit {
   nodeData: NodeResolver;
   active: string;
 
-  constructor(private nodeResolver: NodeResolver, private authenticationService: AuthenticationService, private cdr: ChangeDetectorRef) {
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "Audit Log";
diff --git a/client/app/src/pages/admin/auditlog/audit-log.module.ts b/client/app/src/pages/admin/auditlog/audit-log.module.ts
deleted file mode 100644
index 8e86afde44..0000000000
--- a/client/app/src/pages/admin/auditlog/audit-log.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {AuditLogTab1Component} from "@app/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component";
-import {AuditLogTab2Component} from "@app/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component";
-import {AuditLogTab3Component} from "@app/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component";
-import {AuditLogTab4Component} from "@app/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component";
-import {AuditLogComponent} from "@app/pages/admin/auditlog/audit-log.component";
-import {SharedModule} from "@app/shared.module";
-import {NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
-import {RouterModule} from "@angular/router";
-import {FormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {AuditLogRoutingModule} from "@app/pages/admin/auditlog/auditlog-routing.module";
-import {TranslateModule} from "@ngx-translate/core";
-
-@NgModule({
-  declarations: [
-    AuditLogTab1Component,
-    AuditLogTab2Component,
-    AuditLogTab3Component,
-    AuditLogTab4Component,
-    AuditLogComponent
-  ],
-  imports: [
-    CommonModule,
-    AuditLogRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule, TranslateModule
-  ]
-})
-export class AuditLogModule {
-}
diff --git a/client/app/src/pages/admin/auditlog/auditlog-routing.module.ts b/client/app/src/pages/admin/auditlog/auditlog-routing.module.ts
deleted file mode 100644
index c0810998a1..0000000000
--- a/client/app/src/pages/admin/auditlog/auditlog-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {AuditLogComponent} from "@app/pages/admin/auditlog/audit-log.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: AuditLogComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class AuditLogRoutingModule {
-}
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.html b/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.html
index 559a0548f5..c144ef7f0f 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.html
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.html
@@ -1,28 +1,36 @@
-<ng-container *ngIf="this.auditLog.slice">
-    <table id="userList" class="table table-condensed table-striped">
-        <thead>
+@if (this.auditLog.slice()) {
+  <table id="userList" class="table table-condensed table-striped">
+    <thead>
+      <tr>
+        <th>{{'Date'|translate}}</th>
+        <th>{{'Type'|translate}}</th>
+        <th>{{'User'|translate}}</th>
+        <th>{{'Object'|translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (data of getPaginatedData(); track data) {
         <tr>
-            <th>{{'Date'|translate}}</th>
-            <th>{{'Type'|translate}}</th>
-            <th>{{'User'|translate}}</th>
-            <th>{{'Object'|translate}}</th>
+          <td>{{ data.date | date:'dd-MM-yyyy HH:mm' }}</td>
+          <td>{{ data.type }}</td>
+          <td>{{ data.user_id }}</td>
+          <td>{{ data.object_id }}</td>
         </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let data of getPaginatedData()">
-            <td>{{ data.date | date:'dd-MM-yyyy HH:mm' }}</td>
-            <td>{{ data.type }}</td>
-            <td>{{ data.user_id }}</td>
-            <td>{{ data.object_id }}</td>
-        </tr>
-        </tbody>
-    </table>
-    <div class="float-start" *ngIf="auditLog.length > pageSize">
-        <ngb-pagination dir="ltr" class="d-flex justify-content-center" [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="auditLog.length">
-            <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" title="{{'First' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward-step" title="{{'Previous' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationNext><i class="fa-solid fa-forward-step" title="{{'Next' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" title="{{'Last' | translate}}"></i></ng-template>
-        </ngb-pagination>
-    </div><div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button> <span *ngIf="nodeResolver.dataModel.root_tenant"> <a class="btn btn-sm btn-link" type="button" (click)="utilsService.saveAs(authenticationService, 'globaleaks.log', '/api/admin/auditlog/debug')"> <i class="fa-solid fa-download"></i> globaleaks.log </a> <a class="btn btn-sm btn-link" type="button" (click)="utilsService.saveAs(authenticationService, 'access.log', '/api/admin/auditlog/access')"> <i class="fa-solid fa-download"></i> access.log </a> </span></div>
-</ng-container>
+      }
+    </tbody>
+  </table>
+  @if (auditLog.length > pageSize) {
+    <div class="float-start">
+      <ngb-pagination [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="auditLog.length" [boundaryLinks]="true">
+        <ng-template ngbPaginationPrevious>
+        < {{'Previous' | translate}}</ng-template>
+        <ng-template ngbPaginationNext>{{'Next' | translate}} ></ng-template>
+        <ng-template ngbPaginationFirst>
+        << {{'First' | translate}}</ng-template>
+        <ng-template ngbPaginationLast>{{'Last' | translate}} >></ng-template>
+      </ngb-pagination>
+    </div>
+    }<div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button> @if (nodeResolver.dataModel.root_tenant) {
+    <span> <a class="btn btn-sm btn-link" type="button" (click)="utilsService.saveAs(authenticationService, 'globaleaks.log', '/api/admin/auditlog/debug')"> <i class="fa-solid fa-download"></i> globaleaks.log </a> <a class="btn btn-sm btn-link" type="button" (click)="utilsService.saveAs(authenticationService, 'access.log', '/api/admin/auditlog/access')"> <i class="fa-solid fa-download"></i> access.log </a> </span>
+  }</div>
+}
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.ts b/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.ts
index b0568d825c..04d62f91a1 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.ts
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab1/audit-log-tab1.component.ts
@@ -1,22 +1,30 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {auditlogResolverModel} from "@app/models/resolvers/auditlog-resolver-model";
 import {AuditLogResolver} from "@app/shared/resolvers/audit-log-resolver.service";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
+import { DatePipe } from "@angular/common";
+import { NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast } from "@ng-bootstrap/ng-bootstrap";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-auditlog-tab1",
-  templateUrl: "./audit-log-tab1.component.html"
+    selector: "src-auditlog-tab1",
+    templateUrl: "./audit-log-tab1.component.html",
+    standalone: true,
+    imports: [NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast, DatePipe, TranslatorPipe, TranslateModule]
 })
 export class AuditLogTab1Component implements OnInit {
+  protected authenticationService = inject(AuthenticationService);
+  private auditLogResolver = inject(AuditLogResolver);
+  protected nodeResolver = inject(NodeResolver);
+  protected utilsService = inject(UtilsService);
+
   currentPage = 1;
   pageSize = 20;
   auditLog: auditlogResolverModel[] = [];
 
-  constructor(protected authenticationService: AuthenticationService, private auditLogResolver: AuditLogResolver, protected nodeResolver: NodeResolver, protected utilsService: UtilsService) {
-  }
-
   ngOnInit() {
     this.loadAuditLogData();
   }
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.html b/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.html
index 86291026f8..2f8f758c84 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.html
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.html
@@ -1,34 +1,40 @@
-<ng-container *ngIf="this.users.slice">
-    <table id="userList" class="table table-condensed table-striped">
-        <thead>
+@if (this.users.slice()) {
+  <table id="userList" class="table table-condensed table-striped">
+    <thead>
+      <tr>
+        <th>{{'ID'|translate}}</th>
+        <th>{{'Username'|translate}}</th>
+        <th>{{'Role'|translate}}</th>
+        <th>{{'Name'|translate}}</th>
+        <th>2FA</th>
+        <th>{{'Creation date'|translate}}</th>
+        <th>{{'Last access'|translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (data of getPaginatedData(); track data) {
         <tr>
-            <th>{{'ID'|translate}}</th>
-            <th>{{'Username'|translate}}</th>
-            <th>{{'Role'|translate}}</th>
-            <th>{{'Name'|translate}}</th>
-            <th>2FA</th>
-            <th>{{'Creation date'|translate}}</th>
-            <th>{{'Last access'|translate}}</th>
+          <td>{{data.id}}</td>
+          <td>{{data.username}}</td>
+          <td>{{data.role}}</td>
+          <td>{{data.name}}</td>
+          <td> <i class="fa" [ngClass]="{'fa-check': data.two_factor, 'fa-times': !data.two_factor}"></i> </td>
+          <td>{{data.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
+          <td>{{data.last_login | date:'dd-MM-yyyy HH:mm'}}</td>
         </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let data of getPaginatedData()">
-            <td>{{data.id}}</td>
-            <td>{{data.username}}</td>
-            <td>{{data.role}}</td>
-            <td>{{data.name}}</td>
-            <td> <i class="fa" [ngClass]="{'fa-check': data.two_factor, 'fa-times': !data.two_factor}"></i> </td>
-            <td>{{data.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
-            <td>{{data.last_login | date:'dd-MM-yyyy HH:mm'}}</td>
-        </tr>
-        </tbody>
-    </table>
-    <div class="float-start" *ngIf="users.length > pageSize">
-        <ngb-pagination dir="ltr" class="d-flex justify-content-center" [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="users.length">
-            <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" title="{{'First' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward-step" title="{{'Previous' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationNext><i class="fa-solid fa-forward-step" title="{{'Next' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" title="{{'Last' | translate}}"></i></ng-template>
-        </ngb-pagination>
-    </div> <div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button></div>
-</ng-container>
+      }
+    </tbody>
+  </table>
+  @if (users.length > pageSize) {
+    <div class="float-start">
+      <ngb-pagination [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="users.length" [boundaryLinks]="true">
+        <ng-template ngbPaginationPrevious>
+        < {{'Previous' | translate}}</ng-template>
+        <ng-template ngbPaginationNext>{{'Next' | translate}} ></ng-template>
+        <ng-template ngbPaginationFirst>
+        << {{'First' | translate}}</ng-template>
+        <ng-template ngbPaginationLast>{{'Last' | translate}} >></ng-template>
+      </ngb-pagination>
+    </div>
+    } <div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button></div>
+  }
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.ts b/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.ts
index 3d019982f3..e6ecca654b 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.ts
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab2/audit-log-tab2.component.ts
@@ -1,20 +1,26 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {UsersResolver} from "@app/shared/resolvers/users.resolver";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass, DatePipe } from "@angular/common";
+import { NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast } from "@ng-bootstrap/ng-bootstrap";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-auditlog-tab2",
-  templateUrl: "./audit-log-tab2.component.html"
+    selector: "src-auditlog-tab2",
+    templateUrl: "./audit-log-tab2.component.html",
+    standalone: true,
+    imports: [NgClass, NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast, DatePipe, TranslatorPipe, TranslateModule]
 })
 export class AuditLogTab2Component implements OnInit{
+  private utilsService = inject(UtilsService);
+  protected usersResolver = inject(UsersResolver);
+
   currentPage = 1;
   pageSize = 20;
   users: userResolverModel[] = [];
 
-  constructor(private utilsService: UtilsService, protected usersResolver: UsersResolver) {
-  }
-
   ngOnInit() {
     this.loadAuditLogData();
   }
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.html b/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.html
index 3ddbf47469..9a7d4cf47d 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.html
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.html
@@ -1,43 +1,55 @@
-<ng-container *ngIf="this.tips.slice">
-    <table id="ReportsTable" class="table table-condensed table-striped">
-        <thead>
+@if (this.tips.slice()) {
+  <table id="ReportsTable" class="table table-condensed table-striped">
+    <thead>
+      <tr>
+        <th><i class="fa-solid fa-hashtag"></i></th>
+        <th>{{'Date'|translate}}</th>
+        <th>{{'Last update'|translate}}</th>
+        <th>{{'Expiration date'|translate}}</th>
+        <th>{{'Channel'|translate}}</th>
+        <th>{{'Status'|translate}}</th>
+        <th>{{'Tor'|translate}}</th>
+        <th>{{'Comments'|translate}}</th>
+        <th>{{'Files'|translate}}</th>
+        <th>{{'Receivers'|translate}}</th>
+        <th>{{'Whistleblower\'s last access'|translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (data of getPaginatedData(); track data) {
         <tr>
-            <th><i class="fa-solid fa-hashtag"></i></th>
-            <th>{{'Date'|translate}}</th>
-            <th>{{'Last update'|translate}}</th>
-            <th>{{'Expiration date'|translate}}</th>
-            <th>{{'Channel'|translate}}</th>
-            <th>{{'Status'|translate}}</th>
-            <th>{{'Tor'|translate}}</th>
-            <th>{{'Comments'|translate}}</th>
-            <th>{{'Files'|translate}}</th>
-            <th>{{'Receivers'|translate}}</th>
-            <th>{{'Whistleblower\'s last access'|translate}}</th>
+          <td>{{data.progressive}}</td>
+          <td>{{data.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
+          <td>{{data.last_update | date:'dd-MM-yyyy HH:mm'}}</td>
+          <td>{{data.expiration_date | date:'dd-MM-yyyy HH:mm'}}</td>
+          @if (appDataService.contexts_by_id[data.context_id]) {
+            <td>{{appDataService.contexts_by_id[data.context_id]['name']}}</td>
+          }
+          @if (!appDataService.contexts_by_id[data.context_id]) {
+            <td></td>
+          }
+          <td>{{utilsService.getSubmissionStatusText(data.status,data.substatus,appDataService.submissionStatuses)}}</td>
+          <td>@if (data.tor) {
+            <i class="fa-solid fa-check"></i>
+          }</td>
+          <td>{{data.comments}}</td>
+          <td>{{data.files}}</td>
+          <td>{{data.receiver_count}}</td>
+          <td>{{data.last_access | date:'dd-MM-yyyy HH:mm'}}</td>
         </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let data of getPaginatedData()">
-            <td>{{data.progressive}}</td>
-            <td>{{data.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
-            <td>{{data.last_update | date:'dd-MM-yyyy HH:mm'}}</td>
-            <td>{{data.expiration_date | date:'dd-MM-yyyy HH:mm'}}</td>
-            <td *ngIf="appDataService.contexts_by_id[data.context_id]">{{appDataService.contexts_by_id[data.context_id]['name']}}</td>
-            <td *ngIf="!appDataService.contexts_by_id[data.context_id]"></td>
-            <td>{{utilsService.getSubmissionStatusText(data.status,data.substatus,appDataService.submissionStatuses)}}</td>
-            <td><i *ngIf="data.tor" class="fa-solid fa-check"></i></td>
-            <td>{{data.comments}}</td>
-            <td>{{data.files}}</td>
-            <td>{{data.receiver_count}}</td>
-            <td>{{data.last_access | date:'dd-MM-yyyy HH:mm'}}</td>
-        </tr>
-        </tbody>
-    </table>
-    <div class="float-start" *ngIf="tips.length > pageSize">
-        <ngb-pagination dir="ltr" class="d-flex justify-content-center" [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="tips.length">
-            <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" title="{{'First' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward-step" title="{{'Previous' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationNext><i class="fa-solid fa-forward-step" title="{{'Next' | translate}}"></i></ng-template>
-            <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" title="{{'Last' | translate}}"></i></ng-template>
-        </ngb-pagination>
-    </div><div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button></div>
-</ng-container>
+      }
+    </tbody>
+  </table>
+  @if (tips.length > pageSize) {
+    <div class="float-start">
+      <ngb-pagination [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="tips.length" [boundaryLinks]="true">
+        <ng-template ngbPaginationPrevious>
+        < {{'Previous' | translate}}</ng-template>
+        <ng-template ngbPaginationNext>{{'Next' | translate}} ></ng-template>
+        <ng-template ngbPaginationFirst>
+        << {{'First' | translate}}</ng-template>
+        <ng-template ngbPaginationLast>{{'Last' | translate}} >></ng-template>
+      </ngb-pagination>
+    </div>
+    }<div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button></div>
+  }
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.ts b/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.ts
index 89a3136bfa..6ca618c82b 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.ts
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab3/audit-log-tab3.component.ts
@@ -1,21 +1,28 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {TipsResolver} from "@app/shared/resolvers/tips.resolver";
 import {tipsResolverModel} from "@app/models/resolvers/tips-resolver-model";
 import {AppDataService} from "@app/app-data.service";
+import { DatePipe } from "@angular/common";
+import { NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast } from "@ng-bootstrap/ng-bootstrap";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-auditlog-tab3",
-  templateUrl: "./audit-log-tab3.component.html"
+    selector: "src-auditlog-tab3",
+    templateUrl: "./audit-log-tab3.component.html",
+    standalone: true,
+    imports: [NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast, DatePipe, TranslatorPipe, TranslateModule]
 })
 export class AuditLogTab3Component implements OnInit {
+  private tipsResolver = inject(TipsResolver);
+  protected utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+
   currentPage = 1;
   pageSize = 20;
   tips: tipsResolverModel[] = [];
 
-  constructor(private tipsResolver: TipsResolver, protected utilsService: UtilsService, protected appDataService: AppDataService) {
-  }
-
   ngOnInit() {
     this.loadAuditLogData();
   }
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.html b/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.html
index 4f16e22f55..4eaf2c0ebb 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.html
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.html
@@ -1,23 +1,31 @@
-<ng-container *ngIf="this.jobs.slice">
-    <table id="AnomaliesHistoryTable" class="table table-condensed table-striped">
-        <thead>
+@if (this.jobs.slice()) {
+  <table id="AnomaliesHistoryTable" class="table table-condensed table-striped">
+    <thead>
+      <tr>
+        <th></th>
+        @for (t of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track t) {
+          <th>#{{ t }}</th>
+        }
+      </tr>
+    </thead>
+    <tbody>
+      @for (data of getPaginatedData(); track data) {
         <tr>
-            <th></th>
-            <th *ngFor="let t of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">#{{ t }}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let data of getPaginatedData()">
-            <td>{{data.name}}</td>
-            <td *ngFor="let t of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]">
-                <div *ngIf="data.timings[t]">
-                    <div>{{ (data.timings[t][1] - data.timings[t][0]) / 1000 }}s</div>
-                    <div>{{ data.timings[t][0] | date:'HH:mm:ss' }}</div>
-                    <div>{{ data.timings[t][0] | date:'dd-MM-yyyy' }}</div>
+          <td>{{data.name}}</td>
+          @for (t of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track t) {
+            <td>
+              @if (data.timings[t]) {
+                <div>
+                  <div>{{ (data.timings[t][1] - data.timings[t][0]) / 1000 }}s</div>
+                  <div>{{ data.timings[t][0] | date:'HH:mm:ss' }}</div>
+                  <div>{{ data.timings[t][0] | date:'dd-MM-yyyy' }}</div>
                 </div>
+              }
             </td>
+          }
         </tr>
-        </tbody>
-    </table>
-   <div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button></div>
-</ng-container>
+      }
+    </tbody>
+  </table>
+  <div class="float-end"><button class="btn btn-sm btn-link" type="button" (click)="exportAuditLog()"> <i class="fa-solid fa-download"></i> <span>{{ 'Export' | translate }}</span> </button></div>
+}
diff --git a/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.ts b/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.ts
index e8a5c69020..8b237b13a8 100644
--- a/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.ts
+++ b/client/app/src/pages/admin/auditlog/auditlog-tab4/audit-log-tab4.component.ts
@@ -1,20 +1,25 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {JobResolver} from "@app/shared/resolvers/job.resolver";
 import {jobResolverModel} from "@app/models/resolvers/job-resolver-model";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { DatePipe } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-auditlog-tab4",
-  templateUrl: "./audit-log-tab4.component.html"
+    selector: "src-auditlog-tab4",
+    templateUrl: "./audit-log-tab4.component.html",
+    standalone: true,
+    imports: [DatePipe, TranslatorPipe, TranslateModule]
 })
 export class AuditLogTab4Component implements OnInit{
+  private utilsService = inject(UtilsService);
+  private jobResolver = inject(JobResolver);
+
   currentPage = 1;
   pageSize = 20;
   jobs: jobResolverModel[] = [];
 
-  constructor(private utilsService: UtilsService, private jobResolver: JobResolver) {
-  }
-
   ngOnInit() {
     this.loadAuditLogData();
   }
diff --git a/client/app/src/pages/admin/casemanagement/case-management-routing.module.ts b/client/app/src/pages/admin/casemanagement/case-management-routing.module.ts
deleted file mode 100644
index 816436d49d..0000000000
--- a/client/app/src/pages/admin/casemanagement/case-management-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {CaseManagementComponent} from "@app/pages/admin/casemanagement/case-management.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: CaseManagementComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class CaseManagementRoutingModule {
-}
diff --git a/client/app/src/pages/admin/casemanagement/case-management.component.html b/client/app/src/pages/admin/casemanagement/case-management.component.html
index 8a4390ae03..59c35ad926 100644
--- a/client/app/src/pages/admin/casemanagement/case-management.component.html
+++ b/client/app/src/pages/admin/casemanagement/case-management.component.html
@@ -1,16 +1,16 @@
 <form name="contentForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-casemanagement-tab1></src-casemanagement-tab1>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-casemanagement-tab1></src-casemanagement-tab1>
+  </ng-template>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/casemanagement/case-management.component.ts b/client/app/src/pages/admin/casemanagement/case-management.component.ts
index 66fdef796e..92997c1f94 100644
--- a/client/app/src/pages/admin/casemanagement/case-management.component.ts
+++ b/client/app/src/pages/admin/casemanagement/case-management.component.ts
@@ -1,23 +1,27 @@
-import {Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
+import { Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef, inject } from "@angular/core";
 import {Tab} from "@app/models/component-model/tab";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
-import {
-  CaseManagementTab1Component
-} from "@app/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component";
+import {CaseManagementTab1Component} from "@app/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component";
+import { FormsModule } from "@angular/forms";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-casemanagement",
-  templateUrl: "./case-management.component.html"
+    selector: "src-casemanagement",
+    templateUrl: "./case-management.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, CaseManagementTab1Component, TranslatorPipe]
 })
 export class CaseManagementComponent implements AfterViewInit {
+  protected node = inject(NodeResolver);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<CaseManagementTab1Component>;
   tabs: Tab[];
   nodeData: NodeResolver;
   active: string;
 
-  constructor(protected node: NodeResolver, private cdr: ChangeDetectorRef) {
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "Report statuses";
diff --git a/client/app/src/pages/admin/casemanagement/case-management.module.ts b/client/app/src/pages/admin/casemanagement/case-management.module.ts
deleted file mode 100644
index 1f3cd66ff0..0000000000
--- a/client/app/src/pages/admin/casemanagement/case-management.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {CaseManagementComponent} from "@app/pages/admin/casemanagement/case-management.component";
-import {SharedModule} from "@app/shared.module";
-import {NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
-import {RouterModule} from "@angular/router";
-import {FormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {CaseManagementRoutingModule} from "@app/pages/admin/casemanagement/case-management-routing.module";
-import {
-  CaseManagementTab1Component
-} from "@app/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component";
-import {SubStatusManagerComponent} from "@app/pages/admin/casemanagement/substatusmanager/sub-status-manager.component";
-import {SubStatusComponent} from "@app/pages/admin/casemanagement/substatuses/sub-status.component";
-
-
-@NgModule({
-  declarations: [
-    CaseManagementComponent,
-    CaseManagementTab1Component,
-    SubStatusManagerComponent,
-    SubStatusComponent,
-  ],
-  imports: [
-    CommonModule,
-    CaseManagementRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule
-  ]
-})
-export class CaseManagementModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.html b/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.html
index a40a9c3940..484d803339 100644
--- a/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.html
+++ b/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.html
@@ -1,31 +1,35 @@
 <div class="config-section">
-    <div>
-        <span>{{'Report statuses'|translate}}</span>
-        <button class="btn btn-sm btn-primary show-add-user-btn" (click)="toggleAddStatus()">
+  <div>
+    <span>{{'Report statuses'|translate}}</span>
+    <button class="btn btn-sm btn-primary show-add-user-btn" (click)="toggleAddStatus()">
+      <i class="fa-solid fa-plus"></i>
+      <span>{{'Add'|translate}}</span>
+    </button>
+  </div>
+  @if (showAddStatus) {
+    <div class="config-section row">
+      <div ngForm="newSubmissionStatus" #newSubmissionStatus="ngForm" class="addSubmissionStatus col-md-6">
+        <div class="form-group">
+          <label>
+            <span>{{'Label'|translate}}</span>
+            <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+          </label>
+          <div [ngClass]="{'is-invalid': newSubmissionStatus?.errors?.['required']}">
+            <input name="name" class="form-control" [(ngModel)]="newSubmissionsStatus.label" type="text" required />
+          </div>
+        </div>
+        <div class="form-group">
+          <button id="add-btn" class="btn btn-primary" [disabled]="newSubmissionStatus.invalid" (click)="addSubmissionStatus(); toggleAddStatus()" type="submit">
             <i class="fa-solid fa-plus"></i>
             <span>{{'Add'|translate}}</span>
-        </button>
-    </div>
-    <div class="config-section row" *ngIf="showAddStatus">
-        <div ngForm="newSubmissionStatus" #newSubmissionStatus="ngForm" class="addSubmissionStatus col-md-6">
-            <div class="form-group">
-                <label>
-                    <span>{{'Label'|translate}}</span>
-                    <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                </label>
-                <div [ngClass]="{'is-invalid': newSubmissionStatus?.errors?.['required']}">
-                    <input name="name" class="form-control" [(ngModel)]="newSubmissionsStatus.label" type="text" required />
-                </div>
-            </div>
-            <div class="form-group">
-                <button id="add-btn" class="btn btn-primary" [disabled]="newSubmissionStatus.invalid" (click)="addSubmissionStatus(); toggleAddStatus()" type="submit">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>{{'Add'|translate}}</span>
-                </button>
-            </div>
+          </button>
         </div>
+      </div>
     </div>
-    <div *ngFor="let submissions_status of appDataServices.submissionStatuses; let index = index;let first = first; let last = last;">
-        <src-substatusmanager [submissionsStatus]="submissions_status" [submissionStatuses]="appDataServices.submissionStatuses" [index]="index" [first]="first" [last]="last"></src-substatusmanager>
+  }
+  @for (submissions_status of appDataServices.submissionStatuses; track submissions_status; let index = $index; let first = $first; let last = $last) {
+    <div>
+      <src-substatusmanager [submissionsStatus]="submissions_status" [submissionStatuses]="appDataServices.submissionStatuses" [index]="index" [first]="first" [last]="last"></src-substatusmanager>
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.ts b/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.ts
index 9b46130d77..ef282cd913 100644
--- a/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.ts
+++ b/client/app/src/pages/admin/casemanagement/casemanagement-tab1/case-management-tab1.component.ts
@@ -1,19 +1,27 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { SubStatusManagerComponent } from "../substatusmanager/sub-status-manager.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-casemanagement-tab1",
-  templateUrl: "./case-management-tab1.component.html"
+    selector: "src-casemanagement-tab1",
+    templateUrl: "./case-management-tab1.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, SubStatusManagerComponent, TranslatorPipe]
 })
 export class CaseManagementTab1Component {
+  private utilsService = inject(UtilsService);
+  protected appDataServices = inject(AppDataService);
+  private appDataService = inject(AppDataService);
+  private httpService = inject(HttpService);
+
   showAddStatus = false;
   newSubmissionsStatus: { label: string; } = {label: ""};
 
-  constructor(private utilsService: UtilsService, protected appDataServices: AppDataService, private appDataService: AppDataService, private httpService: HttpService) {
-  }
-
   toggleAddStatus() {
     this.showAddStatus = !this.showAddStatus;
   };
diff --git a/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.html b/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.html
index 197b455b5e..4cb8cf9d65 100644
--- a/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.html
+++ b/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.html
@@ -1,97 +1,117 @@
 <div id="SubstatusEditBox">
-    <div class="row">
-        <span class="col-md-8">
-            <span>{{'Substatuses'|translate}}</span>
-            <button class="btn btn-sm btn-primary" id="add-sub-status" (click)="toggleAddSubStatus()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{'Add'|translate}}</span>
-            </button>
-        </span>
-    </div>
-    <div id="SubstatusAddBox" class="row" *ngIf="showAddSubStatus">
-        <div class="col-md-6">
-            <div ngForm="newSubStatusList" #newSubStatusList="ngForm">
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>{{'Label'|translate}}</label>
-                            <input name="label" class="form-control" [(ngModel)]="newSubStatus.label" type="text" required>
-                            <div class="text-danger" *ngIf="newSubStatusList.form.get('label')?.errors?.['required']">
-                                <span>{{'This field is mandatory'|translate}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="form-group clearfix">
-                            <button class="float-start btn btn-primary" id="add-submission-sub-status" [disabled]="newSubStatusList.invalid" (click)="addSubmissionSubStatus(); toggleAddSubStatus()">
-                                <i class="fa-solid fa-plus"></i>
-                                <span> Add</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
+  <div class="row">
+    <span class="col-md-8">
+      <span>{{'Substatuses'|translate}}</span>
+      <button class="btn btn-sm btn-primary" id="add-sub-status" (click)="toggleAddSubStatus()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{'Add'|translate}}</span>
+      </button>
+    </span>
+  </div>
+  @if (showAddSubStatus) {
+    <div id="SubstatusAddBox" class="row">
+      <div class="col-md-6">
+        <div ngForm="newSubStatusList" #newSubStatusList="ngForm">
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group">
+                <label>{{'Label'|translate}}</label>
+                <input name="label" class="form-control" [(ngModel)]="newSubStatus.label" type="text" required>
+                @if (newSubStatusList.form.get('label')?.errors?.['required']) {
+                  <div class="text-danger">
+                    <span>{{'This field is mandatory'|translate}}</span>
+                  </div>
+                }
+              </div>
             </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group clearfix">
+                <button class="float-start btn btn-primary" id="add-submission-sub-status" [disabled]="newSubStatusList.invalid" (click)="addSubmissionSubStatus(); toggleAddSubStatus()">
+                  <i class="fa-solid fa-plus"></i>
+                  <span> Add</span>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
-    <div class="row">
-        <div *ngFor="let substatus of submissionsStatus.substatuses; let index = index;let first = first; let last = last;" class="col-md-12">
-            <div class="config-item">
-                <div class="editorHeader row" (click)="toggleSubstatusEditing(index); $event.stopPropagation();">
-                    <span class="col-md-7">
-                        <span class="substatusLabel">{{substatus.label}}</span>
-                    </span>
-                    <span class="col-md-5 clearfix">
-                        <span class="float-end">
-                            <button *ngIf="!first" id="move-up-button" class="btn btn-sm btn-primary" (click)="moveSsUp($event, index)" title="{{'Move up' | translate}}">
-                                <i class="fa-solid fa-chevron-up"></i>
-                            </button>
-                            <button *ngIf="!last" id="move-down-button" class="btn btn-sm btn-primary" (click)="moveSsDown($event, index)" title="{{'Move down' | translate}}">
-                                <i class="fa-solid fa-chevron-down"></i>
-                            </button>
-                            <button id="substatus-edit-button" class="btn btn-sm btn-outline-secondary" *ngIf="!this.subStatusEditing[index]" (click)="toggleSubstatusEditing(index); $event.stopPropagation();">
-                                <span>{{'Edit'|translate}}</span>
-                            </button>
-                            <button id="substatus-save-button" class="btn btn-sm btn-primary" *ngIf="this.subStatusEditing[index]" (click)="saveSubmissionsSubStatus(substatus);" [disabled]="substatus && substatus.label.length==0">
-                                <span>{{'Save'|translate}}</span>
-                            </button>
-                            <button class="btn btn-sm btn-outline-secondary" *ngIf="this.subStatusEditing[index]" (click)="toggleSubstatusEditing(index); $event.stopPropagation();">
-                                <span>{{'Cancel'|translate}}</span>
-                            </button>
-                            <button id="substatus-delete-button" class="btn btn-sm btn-danger" (click)="deleteSubSubmissionStatus(substatus); $event.stopPropagation();">
-                                <span>{{'Delete'|translate}}</span>
-                            </button>
-                        </span>
-                    </span>
+  }
+  <div class="row">
+    @for (substatus of submissionsStatus.substatuses; track substatus; let index = $index; let first = $first; let last = $last) {
+      <div class="col-md-12">
+        <div class="config-item">
+          <div class="editorHeader row" (click)="toggleSubstatusEditing(index); $event.stopPropagation();">
+            <span class="col-md-7">
+              <span class="substatusLabel">{{substatus.label}}</span>
+            </span>
+            <span class="col-md-5 clearfix">
+              <span class="float-end">
+                @if (!first) {
+                  <button id="move-up-button" class="btn btn-sm btn-primary" (click)="moveSsUp($event, index)" data-toggle="tooltip" title="{{'Move up' | translate}}">
+                    <i class="fa-solid fa-chevron-up"></i>
+                  </button>
+                }
+                @if (!last) {
+                  <button id="move-down-button" class="btn btn-sm btn-primary" (click)="moveSsDown($event, index)" data-toggle="tooltip" title="{{'Move down' | translate}}">
+                    <i class="fa-solid fa-chevron-down"></i>
+                  </button>
+                }
+                @if (!this.subStatusEditing[index]) {
+                  <button id="substatus-edit-button" class="btn btn-sm btn-outline-secondary" (click)="toggleSubstatusEditing(index); $event.stopPropagation();">
+                    <span>{{'Edit'|translate}}</span>
+                  </button>
+                }
+                @if (this.subStatusEditing[index]) {
+                  <button id="substatus-save-button" class="btn btn-sm btn-primary" (click)="saveSubmissionsSubStatus(substatus);" [disabled]="substatus && substatus.label.length==0">
+                    <span>{{'Save'|translate}}</span>
+                  </button>
+                }
+                @if (this.subStatusEditing[index]) {
+                  <button class="btn btn-sm btn-outline-secondary" (click)="toggleSubstatusEditing(index); $event.stopPropagation();">
+                    <span>{{'Cancel'|translate}}</span>
+                  </button>
+                }
+                <button id="substatus-delete-button" class="btn btn-sm btn-danger" (click)="deleteSubSubmissionStatus(substatus); $event.stopPropagation();">
+                  <span>{{'Delete'|translate}}</span>
+                </button>
+              </span>
+            </span>
+          </div>
+          @if (this.subStatusEditing[index]) {
+            <div ngForm="editStep">
+              <hr />
+              <div class="row">
+                <div class="col-md-3">
+                  <div class="form-group">
+                    <label>{{'Label'|translate}}</label>
+                    <input class="form-control" name="substatus.label" [(ngModel)]="substatus.label" type="text" required />
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="form-group">
+                    <label><span>{{ 'Expiration date' | translate }}</span> (<span>{{ 'days' | translate }}</span>)</label>
+                    <select class="form-control" name="substatus.tip_timetolive_option" [(ngModel)]="substatus.tip_timetolive_option">
+                      <option value="-1">{{ 'Disabled' | translate }}</option>
+                      <option value="0">{{ 'Custom' | translate }}</option>
+                    </select>
+                  </div>
                 </div>
-                <div ngForm="editStep" *ngIf="this.subStatusEditing[index]">
-                    <hr />
-                    <div class="row">
-                        <div class="col-md-3">
-                            <div class="form-group">
-                                <label>{{'Label'|translate}}</label>
-                                <input class="form-control" name="substatus.label" [(ngModel)]="substatus.label" type="text" required />
-                            </div>
-                        </div>
-                        <div class="col-md-3">
-                            <div class="form-group">
-                              <label><span>{{ 'Expiration date' | translate }}</span> (<span>{{ 'days' | translate }}</span>)</label>
-                              <select class="form-control" name="substatus.tip_timetolive_option" [(ngModel)]="substatus.tip_timetolive_option">
-                                <option value="-1">{{ 'Disabled' | translate }}</option>
-                                <option value="0">{{ 'Custom' | translate }}</option>
-                              </select>
-                            </div>
-                        </div>
-                          <div class="col-md-1">
-                            <div class="form-group">
-                              <label></label>
-                              <input class="form-control" name="substatus.tip_timetolive" [(ngModel)]="substatus.tip_timetolive" type="number" min="1" *ngIf="isCustomOptionSelected(substatus.tip_timetolive_option)" required/>
-                            </div>
-                        </div>
-                    </div>
+                <div class="col-md-1">
+                  <div class="form-group">
+                    <label></label>
+                    @if (isCustomOptionSelected(substatus.tip_timetolive_option)) {
+                      <input class="form-control" name="substatus.tip_timetolive" [(ngModel)]="substatus.tip_timetolive" type="number" min="1" required/>
+                    }
+                  </div>
                 </div>
+              </div>
             </div>
+          }
         </div>
-    </div>
+      </div>
+    }
+  </div>
 </div>
diff --git a/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.ts b/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.ts
index fd771f0a08..368dcafdbc 100644
--- a/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.ts
+++ b/client/app/src/pages/admin/casemanagement/substatuses/sub-status.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {HttpClient} from "@angular/common/http";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
@@ -7,11 +7,21 @@ import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmatio
 import {Observable} from "rxjs";
 import {Status, Substatus} from "@app/models/app/public-model";
 
+import { FormsModule } from "@angular/forms";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-substatuses",
-  templateUrl: "./sub-status.component.html"
+    selector: "src-substatuses",
+    templateUrl: "./sub-status.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe]
 })
 export class SubStatusComponent implements OnInit {
+  private httpService = inject(HttpService);
+  protected modalService = inject(NgbModal);
+  protected utilsService = inject(UtilsService);
+  private http = inject(HttpClient);
+
   @Input() submissionsStatus: Status;
   subStatusEditing: boolean[] = [];
   newSubStatus: { label: string; } = {label: ""};
@@ -21,9 +31,6 @@ export class SubStatusComponent implements OnInit {
     this.showAddSubStatus = !this.showAddSubStatus;
   }
 
-  constructor(private httpService: HttpService, protected modalService: NgbModal, protected utilsService: UtilsService, private http: HttpClient) {
-  }
-
   ngOnInit(): void {
     this.subStatusEditing = new Array(this.submissionsStatus.substatuses.length).fill(false);
   }
diff --git a/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.html b/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.html
index b4adf2dba2..eab811eaa6 100644
--- a/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.html
+++ b/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.html
@@ -1,46 +1,64 @@
 <div class="submissionStatusList">
-    <div ngForm="editsubmissionStatus" #editsubmissionStatus="ngForm">
-        <div class="config-item">
-            <div class="editorHeader row">
-                <span class="col-md-7" (click)="toggleEditing(submissionsStatus); $event.stopPropagation();">{{ submissionsStatus.label ? (submissionsStatus.label | translate) : '' }}</span>
-                <span class="col-md-5 clearfix">
-                    <span class="float-end">
-                        <button *ngIf="!first" class="btn btn-sm btn-primary" (click)="moveUp($event, index)" title="{{'Move up' | translate}}">
-                            <i class="fa-solid fa-chevron-up"></i>
-                        </button>
-                        <button *ngIf="!last" class="btn btn-sm btn-primary" (click)="moveDown($event, index)" title="{{'Move down' | translate}}">
-                            <i class="fa-solid fa-chevron-down"></i>
-                        </button>
-                        <button id="edit-submissions-status" class="btn btn-sm btn-outline-secondary" *ngIf="isEditable(submissionsStatus) && !editing" (click)="toggleEditing(submissionsStatus); $event.stopPropagation();">
-                            <span>{{'Edit'|translate}}</span>
-                        </button>
-                        <button class="btn btn-sm btn-primary" *ngIf="editing" [disabled]="editsubmissionStatus.invalid" (click)="saveSubmissionsStatus(submissionsStatus); toggleEditing(submissionsStatus);">
-                            <span>{{'Save'|translate}}</span>
-                        </button>
-                        <button class="btn btn-sm btn-outline-secondary" *ngIf="editing" (click)="toggleEditing(submissionsStatus); $event.stopPropagation();">
-                            <span>{{'Cancel'|translate}}</span>
-                        </button>
-                        <button id="delete-submissions-status" class="btn btn-sm btn-danger" *ngIf="!isSystemDefined(submissionsStatus)" (click)="deleteSubmissionStatus(submissionsStatus); $event.stopPropagation();">
-                            <span>{{'Delete'|translate}}</span>
-                        </button>
-                    </span>
-                </span>
-            </div>
-            <div *ngIf="editing">
-                <hr />
-                <div class="row">
-                    <div class="col-md-6" *ngIf="!isSystemDefined(submissionsStatus)">
-                        <div class="form-group">
-                            <label>{{'Label'|translate}}</label>
-                            <input name="name" class="form-control" [(ngModel)]="submissionsStatus.label" [disabled]="submissionsStatus.system_defined" type="text" required>
-                            <div class="text-danger" *ngIf="editsubmissionStatus?.errors?.['required']">{{'This field is mandatory'|translate}}</div>
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <src-substatuses [submissionsStatus]="submissionsStatus"></src-substatuses>
-                    </div>
+  <div ngForm="editsubmissionStatus" #editsubmissionStatus="ngForm">
+    <div class="config-item">
+      <div class="editorHeader row">
+        <span class="col-md-7" (click)="toggleEditing(submissionsStatus); $event.stopPropagation();">{{ submissionsStatus.label ? (submissionsStatus.label | translate) : '' }}</span>
+        <span class="col-md-5 clearfix">
+          <span class="float-end">
+            @if (!first) {
+              <button class="btn btn-sm btn-primary" (click)="moveUp($event, index)" data-toggle="tooltip" title="{{'Move up' | translate}}">
+                <i class="fa-solid fa-chevron-up"></i>
+              </button>
+            }
+            @if (!last) {
+              <button class="btn btn-sm btn-primary" (click)="moveDown($event, index)" data-toggle="tooltip" title="{{'Move down' | translate}}">
+                <i class="fa-solid fa-chevron-down"></i>
+              </button>
+            }
+            @if (isEditable(submissionsStatus) && !editing) {
+              <button id="edit-submissions-status" class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(submissionsStatus); $event.stopPropagation();">
+                <span>{{'Edit'|translate}}</span>
+              </button>
+            }
+            @if (editing) {
+              <button class="btn btn-sm btn-primary" [disabled]="editsubmissionStatus.invalid" (click)="saveSubmissionsStatus(submissionsStatus); toggleEditing(submissionsStatus);">
+                <span>{{'Save'|translate}}</span>
+              </button>
+            }
+            @if (editing) {
+              <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(submissionsStatus); $event.stopPropagation();">
+                <span>{{'Cancel'|translate}}</span>
+              </button>
+            }
+            @if (!isSystemDefined(submissionsStatus)) {
+              <button id="delete-submissions-status" class="btn btn-sm btn-danger" (click)="deleteSubmissionStatus(submissionsStatus); $event.stopPropagation();">
+                <span>{{'Delete'|translate}}</span>
+              </button>
+            }
+          </span>
+        </span>
+      </div>
+      @if (editing) {
+        <div>
+          <hr />
+          <div class="row">
+            @if (!isSystemDefined(submissionsStatus)) {
+              <div class="col-md-6">
+                <div class="form-group">
+                  <label>{{'Label'|translate}}</label>
+                  <input name="name" class="form-control" [(ngModel)]="submissionsStatus.label" [disabled]="submissionsStatus.system_defined" type="text" required>
+                  @if (editsubmissionStatus?.errors?.['required']) {
+                    <div class="text-danger">{{'This field is mandatory'|translate}}</div>
+                  }
                 </div>
+              </div>
+            }
+            <div class="col-md-12">
+              <src-substatuses [submissionsStatus]="submissionsStatus"></src-substatuses>
             </div>
+          </div>
         </div>
+      }
     </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.ts b/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.ts
index 8dd3f65c34..a21178a94e 100644
--- a/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.ts
+++ b/client/app/src/pages/admin/casemanagement/substatusmanager/sub-status-manager.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
@@ -6,12 +6,23 @@ import {UtilsService} from "@app/shared/services/utils.service";
 import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
 import {Observable} from "rxjs";
 import {Status} from "@app/models/app/public-model";
+import { FormsModule } from "@angular/forms";
+
+import { SubStatusComponent } from "../substatuses/sub-status.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-substatusmanager",
-  templateUrl: "./sub-status-manager.component.html"
+    selector: "src-substatusmanager",
+    templateUrl: "./sub-status-manager.component.html",
+    standalone: true,
+    imports: [FormsModule, SubStatusComponent, TranslatorPipe]
 })
 export class SubStatusManagerComponent {
+  private appDataServices = inject(AppDataService);
+  private httpService = inject(HttpService);
+  private modalService = inject(NgbModal);
+  private utilsService = inject(UtilsService);
+
   editing = false;
   @Input() submissionsStatus: Status;
   @Input() submissionStatuses: Status[];
@@ -19,10 +30,6 @@ export class SubStatusManagerComponent {
   @Input() first: boolean;
   @Input() last: boolean;
 
-  constructor(private appDataServices: AppDataService, private httpService: HttpService, private modalService: NgbModal, private utilsService: UtilsService) {
-
-  }
-
   isSystemDefined(state: Status): boolean {
     return ["new", "opened", "closed"].indexOf(state.id) !== -1;
   }
diff --git a/client/app/src/pages/admin/contexts/context-editor/context-editor.component.html b/client/app/src/pages/admin/contexts/context-editor/context-editor.component.html
index c482523456..d6cd658ade 100644
--- a/client/app/src/pages/admin/contexts/context-editor/context-editor.component.html
+++ b/client/app/src/pages/admin/contexts/context-editor/context-editor.component.html
@@ -1,206 +1,248 @@
 <div class="config-item">
-    <div class="editorHeader row">
-        <span class="col-md-7" (click)="toggleEditing()">
-            <span>{{ contextResolver.name }}</span>
-            <span class="badge bg-secondary" *ngIf="contextResolver.hidden">{{ 'Hidden' | translate }}</span>
-        </span>
-        <span class="col-md-5 clearfix">
-            <span class="float-end">
-                <button *ngIf="index !== 0 && !nodeResolver.dataModel.show_contexts_in_alphabetical_order" class="btn btn-sm btn-primary" (click)="moveUp($event, index)" title="{{'Move up' | translate}}">
-                    <i class="fa-solid fa-chevron-up"></i>
-                </button>
-                <button *ngIf="index !== contextsData.length - 1 && !nodeResolver.dataModel.show_contexts_in_alphabetical_order" class="btn btn-sm btn-primary" (click)="moveDown($event, index)" title="{{'Move down' | translate}}">
-                    <i class="fa-solid fa-chevron-down"></i>
-                </button>
-                <button class="btn btn-sm btn-outline-secondary" id="edit_context" *ngIf="!editing" (click)="toggleEditing()">
-                    <span>{{ 'Edit' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-primary" *ngIf="editing" id="save_context" [disabled]="editContext.invalid" (click)="saveContext(contextResolver);toggleEditing()">
-                    <span>{{ 'Save' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-outline-secondary" *ngIf="editing" (click)="toggleEditing()">
-                    <span>{{ 'Cancel' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-danger" name="delete_context" id="delete_context" (click)="deleteContext(contextResolver)">
-                    <span>{{ 'Delete' | translate }}</span>
-                </button>
-            </span>
-        </span>
-    </div>
-    <div *ngIf="editing">
-        <hr />
-        <div class="row">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <div appImageUpload [imageUploadModel]="contextResolver" [imageUploadModelAttr]="'picture'" [imageUploadId]="contextResolver.id"></div>
-                </div>
-                <div class="form-group">
-                    <label>{{ 'Name' | translate }}</label>
-                    <input name="name" class="form-control" [(ngModel)]="contextResolver.name" type="text" required>
-                    <div class="text-danger" *ngIf="editContext.form.get('name')?.errors?.['required']">{{ 'This field is mandatory' | translate }}</div>
-                </div>
-                <div class="form-group">
-                    <label>{{ 'Description' | translate }}</label>
-                    <textarea name="description" class="form-control" [(ngModel)]="contextResolver.description"></textarea>
-                </div>
-                <div class="form-group">
-                    <label>{{ 'Questionnaire' | translate }}</label>
-                    <select class="form-select-custom" name="contextResolver.questionnaire_id" [(ngModel)]="contextResolver.questionnaire_id">
-                        <option *ngFor="let item of questionnairesData" [value]="item.id">{{ item.name }}</option>
-                    </select>
+  <div class="editorHeader row">
+    <span class="col-md-7" (click)="toggleEditing()">
+      <span>{{ contextResolver.name }}</span>
+      @if (contextResolver.hidden) {
+        <span class="badge bg-secondary">{{ 'Hidden' | translate }}</span>
+      }
+    </span>
+    <span class="col-md-5 clearfix">
+      <span class="float-end">
+        @if (index !== 0 && !nodeResolver.dataModel.show_contexts_in_alphabetical_order) {
+          <button class="btn btn-sm btn-primary" (click)="moveUp($event, index)" data-toggle="tooltip" title="{{'Move up' | translate}}">
+            <i class="fa-solid fa-chevron-up"></i>
+          </button>
+        }
+        @if (index !== contextsData.length - 1 && !nodeResolver.dataModel.show_contexts_in_alphabetical_order) {
+          <button class="btn btn-sm btn-primary" (click)="moveDown($event, index)" data-toggle="tooltip" title="{{'Move down' | translate}}">
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+        }
+        @if (!editing) {
+          <button class="btn btn-sm btn-outline-secondary" id="edit_context" (click)="toggleEditing()">
+            <span>{{ 'Edit' | translate }}</span>
+          </button>
+        }
+        @if (editing) {
+          <button class="btn btn-sm btn-primary" id="save_context" [disabled]="editContext.invalid" (click)="saveContext(contextResolver);toggleEditing()">
+            <span>{{ 'Save' | translate }}</span>
+          </button>
+        }
+        @if (editing) {
+          <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing()">
+            <span>{{ 'Cancel' | translate }}</span>
+          </button>
+        }
+        <button class="btn btn-sm btn-danger" name="delete_context" id="delete_context" (click)="deleteContext(contextResolver)">
+          <span>{{ 'Delete' | translate }}</span>
+        </button>
+      </span>
+    </span>
+  </div>
+  @if (editing) {
+    <div>
+      <hr />
+      <div class="row">
+        <div class="col-md-6">
+          <div class="form-group">
+            <div appImageUpload [imageUploadModel]="contextResolver" [imageUploadModelAttr]="'picture'" [imageUploadId]="contextResolver.id"></div>
+          </div>
+          <div class="form-group">
+            <label>{{ 'Name' | translate }}</label>
+            <input name="name" class="form-control" [(ngModel)]="contextResolver.name" type="text" required>
+            @if (editContext.form.get('name')?.errors?.['required']) {
+              <div class="text-danger">{{ 'This field is mandatory' | translate }}</div>
+            }
+          </div>
+          <div class="form-group">
+            <label>{{ 'Description' | translate }}</label>
+            <textarea name="description" class="form-control" [(ngModel)]="contextResolver.description"></textarea>
+          </div>
+          <div class="form-group">
+            <label>{{ 'Questionnaire' | translate }}</label>
+            <select class="form-select-custom" name="contextResolver.questionnaire_id" [(ngModel)]="contextResolver.questionnaire_id">
+              @for (item of questionnairesData; track item) {
+                <option [value]="item.id">{{ item.name }}</option>
+              }
+            </select>
+          </div>
+          <div class="form-group">
+            <label>
+              <span>{{ 'Recipients' | translate }}</span>
+              <button class="btn btn-sm btn-primary add-receiver-btn" (click)="toggleSelect()">
+                <i class="fa-solid fa-plus"></i>
+                <span>{{ 'Add' | translate }}</span>
+              </button>
+            </label>
+            <div id="ReceiverContextAdder" class="row">
+              @if (showSelect) {
+                <div class="col-md-12">
+                  <ng-select [(ngModel)]="selected.value" name="selected.value" bindLabel="name" [items]="usersData | filter:  'role': 'receiver'" [searchable]="true" [placeholder]="'Search' | translate" (change)="moveReceiver($event)">
+                    <ng-template ng-option-tmp let-item="item">
+                      {{ item.name }}
+                    </ng-template>
+                  </ng-select>
+                  <br />
                 </div>
-                <div class="form-group">
-                    <label>
-                        <span>{{ 'Recipients' | translate }}</span>
-                        <button class="btn btn-sm btn-primary add-receiver-btn" (click)="toggleSelect()">
-                            <i class="fa-solid fa-plus"></i>
-                            <span>{{ 'Add' | translate }}</span>
-                        </button>
-                    </label>
-                    <div id="ReceiverContextAdder" class="row">
-                        <div class="col-md-12" *ngIf="showSelect">
-                            <ng-select [(ngModel)]="selected.value" name="selected.value" bindLabel="name" [items]="usersData | filter:  'role': 'receiver'" [searchable]="true" [placeholder]="'Search' | translate" (change)="moveReceiver($event)">
-                                <ng-template ng-option-tmp let-item="item">
-                                    {{ item.name }}
-                                </ng-template>
-                            </ng-select>
-                            <br />
-                        </div>
-                    </div>
-                    <ol class="selection-list">
-                        <li *ngFor="let receiver of contextResolver.receivers; let index = index">
-                            <span *ngIf="!contextResolver.show_receivers_in_alphabetical_order">
-                                <span *ngIf="index !== 0" (click)="moveUpReceiver(index)" title="{{'Move up' | translate}}">
-                                    <i class="fa-solid fa-chevron-up"></i>
-                                </span>
-                                <i *ngIf="(index !== contextResolver.receivers.length - 1) || (index !== 0)" class="fa-solid fa-none"></i>
-                                <span *ngIf="index !== contextResolver.receivers.length - 1" (click)="moveDownReceiver(index)" title="{{'Move down' | translate}}">
-                                    <i class="fa-solid fa-chevron-down"></i>
-                                </span>
-                            </span>
-                            <span (click)="contextResolver.receivers.splice(index, 1);receiverNotSelectedFilter(adminReceiversById[receiver])" title="{{'Remove' | translate}}">
-                                <i class="fa-solid fa-times"></i>
-                            </span>
-                            <span>{{adminReceiversById[receiver].name}}</span>
-                        </li>
-                    </ol>
-                </div>
-                <div class="form-group">
-                    <div [ngClass]="{'is-invalid': editContext.form.get('reminder')?.errors?.['invalid']}">
-                        <div class="input-group">
-                            <div class="dual_title">
-                                <span>{{ 'Reminder date' | translate }}</span> ({{ 'days' | translate }})
-                            </div>
-                        </div>
-                        <div class="input-group">
-                            <input class="form-control" name="reminder" [(ngModel)]="contextResolver.tip_reminder" type="number" min="0" />
-                        </div>
-                    </div>
-                    <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
-                </div>
-                <div class="form-group">
-                    <label>
-                        <span>{{ 'Expiration date' | translate }}</span> ({{ 'days' | translate }}) </label>
-                    <div [ngClass]="{'is-invalid': editContext.form.get('timetolive')?.errors?.['invalid']}">
-                        <input class="form-control" name="timetolive" [(ngModel)]="contextResolver.tip_timetolive" type="number" min="0" max="3650" />
-                    </div>
-                    <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" [(ngModel)]="contextResolver.hidden" name="contextResolver.hidden" type="checkbox" />
-                    <label>{{ 'Hidden' | translate }}</label>
+              }
+            </div>
+            <ol class="selection-list">
+              @for (receiver of contextResolver.receivers; track receiver; let index = $index) {
+                <li>
+                  @if (!contextResolver.show_receivers_in_alphabetical_order) {
+                    <span>
+                      @if (index !== 0) {
+                        <span (click)="moveUpReceiver(index)" data-toggle="tooltip" title="{{'Move up' | translate}}">
+                          <i class="fa-solid fa-chevron-up"></i>
+                        </span>
+                      }
+                      @if ((index !== contextResolver.receivers.length - 1) || (index !== 0)) {
+                        <i class="fa-solid fa-none"></i>
+                      }
+                      @if (index !== contextResolver.receivers.length - 1) {
+                        <span (click)="moveDownReceiver(index)" data-toggle="tooltip" title="{{'Move down' | translate}}">
+                          <i class="fa-solid fa-chevron-down"></i>
+                        </span>
+                      }
+                    </span>
+                  }
+                  <span (click)="contextResolver.receivers.splice(index, 1);receiverNotSelectedFilter(adminReceiversById[receiver])" data-toggle="tooltip" title="{{'Remove' | translate}}">
+                    <i class="fa-solid fa-times"></i>
+                  </span>
+                  <span>{{adminReceiversById[receiver].name}}</span>
+                </li>
+              }
+            </ol>
+          </div>
+          <div class="form-group">
+            <div [ngClass]="{'is-invalid': editContext.form.get('reminder')?.errors?.['invalid']}">
+              <div class="input-group">
+                <div class="dual_title">
+                  <span>{{ 'Reminder date' | translate }}</span> ({{ 'days' | translate }})
                 </div>
+              </div>
+              <div class="input-group">
+                <input class="form-control" name="reminder" [(ngModel)]="contextResolver.tip_reminder" type="number" min="0" />
+              </div>
+            </div>
+            <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
+          </div>
+          <div class="form-group">
+            <label>
+              <span>{{ 'Expiration date' | translate }}</span> ({{ 'days' | translate }}) </label>
+              <div [ngClass]="{'is-invalid': editContext.form.get('timetolive')?.errors?.['invalid']}">
+                <input class="form-control" name="timetolive" [(ngModel)]="contextResolver.tip_timetolive" type="number" min="0" max="3650" />
+              </div>
+              <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
+            </div>
+            <div class="form-group">
+              <input class="form-check-input" [(ngModel)]="contextResolver.hidden" name="contextResolver.hidden" type="checkbox" />
+              <label>{{ 'Hidden' | translate }}</label>
             </div>
+          </div>
         </div>
         <hr />
         <div class="row">
-            <div class="col-md-12">
-                <button class="btn btn-primary" id="advance_context" (click)="showAdvancedSettings = !showAdvancedSettings">
-                    <i *ngIf="!showAdvancedSettings" class="fa-solid fa-plus"></i>
-                    <i *ngIf="showAdvancedSettings" class="fa-solid fa-minus"></i>
-                    <span>{{ 'Advanced' | translate }}</span>
-                </button>
-                <div id="ContextAdvancedSettingsBox">
-                    <div class="row" *ngIf="showAdvancedSettings">
-                        <div class="col-md-6">
-                            <div class="form-group">
-                                <label class="inline-checkbox">
-                                    <input class="form-check-input" type="checkbox" name="contextResolver.show_steps_navigation_interface" [(ngModel)]="contextResolver.show_steps_navigation_interface" />
-                                    <span>{{ 'Show the questionnaire navigation interface' | translate }}</span>
-                                </label>
-                            </div>
-                            <div class="form-group">
-                                <label class="inline-checkbox">
-                                    <input class="form-check-input" type="checkbox" name="contextResolver.allow_recipients_selection" [(ngModel)]="contextResolver.allow_recipients_selection" />
-                                    <span>{{ 'Allow whistleblowers to select their recipients' | translate }}</span>
-                                </label>
-                            </div>
-                            <div *ngIf="contextResolver.allow_recipients_selection" class="form-group well">
-                                <div class="form-group">
-                                    <label class="inline-checkbox">
-                                        <input class="form-check-input" type="checkbox" name="contextResolver.select_all_receivers" [(ngModel)]="contextResolver.select_all_receivers" [disabled]="!contextResolver.allow_recipients_selection" (click)="contextResolver.maximum_selectable_receivers = 0" />
-                                        <span>{{ 'Select all recipients by default' | translate }}</span>
-                                    </label>
-                                </div>
-                                <div class="form-group">
-                                    <label class="inline-checkbox">
-                                        <span>{{ 'Maximum number of selectable recipients:' | translate }}</span>
-                                        <input class="form-control" type="number" name="contextResolver.maximum_selectable_receivers" [(ngModel)]="contextResolver.maximum_selectable_receivers" min="0" [disabled]="contextResolver.select_all_receivers" />
-                                    </label>
-                                    <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="inline-checkbox">
-                                        <input class="form-check-input" type="checkbox" [(ngModel)]="contextResolver.show_receivers_in_alphabetical_order" name="contextResolver.show_receivers_in_alphabetical_order" />
-                                        <span>{{ 'Show recipients in alphabetical order' | translate }}</span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label>{{ 'Additional questionnaire' | translate }}</label>
-                                <select class="form-select-custom" [(ngModel)]="contextResolver.additional_questionnaire_id" name="contextResolver.additional_questionnaire_id">
-                                    <option *ngIf="contextResolver.additional_questionnaire_id" [value]="null"></option>
-                                    <ng-container *ngFor="let item of questionnairesData">
-                                        <ng-container *ngIf="item.id !== contextResolver.questionnaire_id">
-                                            <option [value]="item.id">{{ item.name }}</option>
-                                        </ng-container>
-                                    </ng-container>
-                                </select>
-                            </div>
-                            <div *ngIf="nodeData.enable_scoring_system">
-                                <label>{{ 'Scoring system options' | translate }}</label>
-                                <div class="form-group well">
-                                    <table class="table table-bordered">
-                                        <thead>
-                                        <tr>
-                                            <th>{{ 'Threshold' | translate }}</th>
-                                            <th>{{ 'Value' | translate }}</th>
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                        <tr>
-                                            <td>{{ 'Medium' | translate }}</td>
-                                            <td>
-                                                <input class="form-control" type="number" [(ngModel)]="contextResolver.score_threshold_medium" name="contextResolver.score_threshold_medium" />
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>{{ 'High' | translate }}</td>
-                                            <td>
-                                                <input class="form-control" type="number" [(ngModel)]="contextResolver.score_threshold_high" name="contextResolver.score_threshold_high" />
-                                            </td>
-                                        </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
+          <div class="col-md-12">
+            <button class="btn btn-primary" id="advance_context" (click)="showAdvancedSettings = !showAdvancedSettings">
+              @if (!showAdvancedSettings) {
+                <i class="fa-solid fa-plus"></i>
+              }
+              @if (showAdvancedSettings) {
+                <i class="fa-solid fa-minus"></i>
+              }
+              <span>{{ 'Advanced' | translate }}</span>
+            </button>
+            <div id="ContextAdvancedSettingsBox">
+              @if (showAdvancedSettings) {
+                <div class="row">
+                  <div class="col-md-6">
+                    <div class="form-group">
+                      <label class="inline-checkbox">
+                        <input class="form-check-input" type="checkbox" name="contextResolver.show_steps_navigation_interface" [(ngModel)]="contextResolver.show_steps_navigation_interface" />
+                        <span>{{ 'Show the questionnaire navigation interface' | translate }}</span>
+                      </label>
+                    </div>
+                    <div class="form-group">
+                      <label class="inline-checkbox">
+                        <input class="form-check-input" type="checkbox" name="contextResolver.allow_recipients_selection" [(ngModel)]="contextResolver.allow_recipients_selection" />
+                        <span>{{ 'Allow whistleblowers to select their recipients' | translate }}</span>
+                      </label>
+                    </div>
+                    @if (contextResolver.allow_recipients_selection) {
+                      <div class="form-group well">
+                        <div class="form-group">
+                          <label class="inline-checkbox">
+                            <input class="form-check-input" type="checkbox" name="contextResolver.select_all_receivers" [(ngModel)]="contextResolver.select_all_receivers" [disabled]="!contextResolver.allow_recipients_selection" (click)="contextResolver.maximum_selectable_receivers = 0" />
+                            <span>{{ 'Select all recipients by default' | translate }}</span>
+                          </label>
+                        </div>
+                        <div class="form-group">
+                          <label class="inline-checkbox">
+                            <span>{{ 'Maximum number of selectable recipients:' | translate }}</span>
+                            <input class="form-control" type="number" name="contextResolver.maximum_selectable_receivers" [(ngModel)]="contextResolver.maximum_selectable_receivers" min="0" [disabled]="contextResolver.select_all_receivers" />
+                          </label>
+                          <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
                         </div>
+                        <div class="form-group">
+                          <label class="inline-checkbox">
+                            <input class="form-check-input" type="checkbox" [(ngModel)]="contextResolver.show_receivers_in_alphabetical_order" name="contextResolver.show_receivers_in_alphabetical_order" />
+                            <span>{{ 'Show recipients in alphabetical order' | translate }}</span>
+                          </label>
+                        </div>
+                      </div>
+                    }
+                    <div class="form-group">
+                      <label>{{ 'Additional questionnaire' | translate }}</label>
+                      <select class="form-select-custom" [(ngModel)]="contextResolver.additional_questionnaire_id" name="contextResolver.additional_questionnaire_id">
+                        @if (contextResolver.additional_questionnaire_id) {
+                          <option [value]="null"></option>
+                        }
+                        @for (item of questionnairesData; track item) {
+                          @if (item.id !== contextResolver.questionnaire_id) {
+                            <option [value]="item.id">{{ item.name }}</option>
+                          }
+                        }
+                      </select>
                     </div>
+                    @if (nodeData.enable_scoring_system) {
+                      <div>
+                        <label>{{ 'Scoring system options' | translate }}</label>
+                        <div class="form-group well">
+                          <table class="table table-bordered">
+                            <thead>
+                              <tr>
+                                <th>{{ 'Threshold' | translate }}</th>
+                                <th>{{ 'Value' | translate }}</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td>{{ 'Medium' | translate }}</td>
+                                <td>
+                                  <input class="form-control" type="number" [(ngModel)]="contextResolver.score_threshold_medium" name="contextResolver.score_threshold_medium" />
+                                </td>
+                              </tr>
+                              <tr>
+                                <td>{{ 'High' | translate }}</td>
+                                <td>
+                                  <input class="form-control" type="number" [(ngModel)]="contextResolver.score_threshold_high" name="contextResolver.score_threshold_high" />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    }
+                  </div>
                 </div>
+              }
             </div>
+          </div>
         </div>
         <hr />
         <div class="form-group">UUID: <a [href]="'#/submission?context=' + contextResolver.id" target="_blank">{{contextResolver.id}}</a>
         </div>
     </div>
+}
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/contexts/context-editor/context-editor.component.ts b/client/app/src/pages/admin/contexts/context-editor/context-editor.component.ts
index e6f604efd6..7e0b3cb72f 100644
--- a/client/app/src/pages/admin/contexts/context-editor/context-editor.component.ts
+++ b/client/app/src/pages/admin/contexts/context-editor/context-editor.component.ts
@@ -1,6 +1,6 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
@@ -12,12 +12,26 @@ import {contextResolverModel} from "@app/models/resolvers/context-resolver-model
 import {questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
+import { NgClass } from "@angular/common";
+import { ImageUploadDirective } from "../../../../shared/directive/image-upload.directive";
+import { NgSelectComponent, NgOptionTemplateDirective } from "@ng-select/ng-select";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
 
 @Component({
-  selector: "src-context-editor",
-  templateUrl: "./context-editor.component.html"
+    selector: "src-context-editor",
+    templateUrl: "./context-editor.component.html",
+    standalone: true,
+    imports: [ImageUploadDirective, FormsModule, NgSelectComponent, NgOptionTemplateDirective, NgClass, TranslatorPipe, FilterPipe]
 })
 export class ContextEditorComponent implements OnInit {
+  private http = inject(HttpClient);
+  private modalService = inject(NgbModal);
+  protected nodeResolver = inject(NodeResolver);
+  private usersResolver = inject(UsersResolver);
+  private questionnairesResolver = inject(QuestionnairesResolver);
+  private utilsService = inject(UtilsService);
+
   @Input() contextsData: contextResolverModel[];
   @Input() contextResolver: contextResolverModel;
   @Input() index: number;
@@ -32,9 +46,6 @@ export class ContextEditorComponent implements OnInit {
   selected = {value: []};
   adminReceiversById: { [userId: string]: userResolverModel } = {};
 
-  constructor(private http: HttpClient, private modalService: NgbModal, protected nodeResolver: NodeResolver, private usersResolver: UsersResolver, private questionnairesResolver: QuestionnairesResolver, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     this.questionnairesData = this.questionnairesResolver.dataModel;
 
diff --git a/client/app/src/pages/admin/contexts/contexts-routing.module.ts b/client/app/src/pages/admin/contexts/contexts-routing.module.ts
deleted file mode 100644
index 3ae643a4b7..0000000000
--- a/client/app/src/pages/admin/contexts/contexts-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {ContextsComponent} from "@app/pages/admin/contexts/contexts.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: ContextsComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ContextsRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/contexts/contexts.component.html b/client/app/src/pages/admin/contexts/contexts.component.html
index a6488b74cf..121f918194 100644
--- a/client/app/src/pages/admin/contexts/contexts.component.html
+++ b/client/app/src/pages/admin/contexts/contexts.component.html
@@ -1,37 +1,39 @@
 <div class="config-section reveal">
-    <div>
-        <span>{{ 'Channels' | translate }}</span>
-        <button class="btn btn-sm btn-primary show-add-context-btn" (click)="toggleAddContext()">
+  <div>
+    <span>{{ 'Channels' | translate }}</span>
+    <button class="btn btn-sm btn-primary show-add-context-btn" (click)="toggleAddContext()">
+      <i class="fa-solid fa-plus"></i>
+      <span>{{ 'Add' | translate }}</span>
+    </button>
+  </div>
+  @if (showAddContext) {
+    <div class="row">
+      <div ngForm="newContext" #newContext="ngForm" class="addContext col-md-6">
+        <div class="form-group">
+          <label>
+            <span>{{ 'Name' | translate }}</span>
+            <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+          </label>
+          <div [ngClass]="{'is-invalid': newContext.form.get('new_context.name')?.errors?.['required']}">
+            <input name="new_context.name" class="form-control" [(ngModel)]="new_context.name" type="text" required />
+          </div>
+        </div>
+        <div class="form-group">
+          <button id="add-btn" class="btn btn-primary" [disabled]="newContext.invalid" (click)="addContext(); toggleAddContext()" type="submit">
             <i class="fa-solid fa-plus"></i>
             <span>{{ 'Add' | translate }}</span>
-        </button>
-    </div>
-    <div class="row" *ngIf="showAddContext">
-        <div ngForm="newContext" #newContext="ngForm" class="addContext col-md-6">
-            <div class="form-group">
-                <label>
-                    <span>{{ 'Name' | translate }}</span>
-                    <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                </label>
-                <div [ngClass]="{'is-invalid': newContext.form.get('new_context.name')?.errors?.['required']}">
-                    <input name="new_context.name" class="form-control" [(ngModel)]="new_context.name" type="text" required />
-                </div>
-            </div>
-            <div class="form-group">
-                <button id="add-btn" class="btn btn-primary" [disabled]="newContext.invalid" (click)="addContext(); toggleAddContext()" type="submit">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>{{ 'Add' | translate }}</span>
-                </button>
-            </div>
+          </button>
         </div>
+      </div>
     </div>
-    <ng-container *ngIf="contextsData.length > 0">
-        <ng-container *ngFor="let context of contextsData; let index = index">
-            <div>
-                <form id="context-{{index}}" name="editContext" #editContext="ngForm" novalidate>
-                    <src-context-editor [contextResolver]="context" [editContext]="editContext" [contextsData]="contextsData" [index]="index"></src-context-editor>
-                </form>
-            </div>
-        </ng-container>
-    </ng-container>
+  }
+  @if (contextsData.length > 0) {
+    @for (context of contextsData; track context; let index = $index) {
+      <div>
+        <form id="context-{{index}}" name="editContext" #editContext="ngForm" novalidate>
+          <src-context-editor [contextResolver]="context" [editContext]="editContext" [contextsData]="contextsData" [index]="index"></src-context-editor>
+        </form>
+      </div>
+    }
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/contexts/contexts.component.ts b/client/app/src/pages/admin/contexts/contexts.component.ts
index 1c701f4a54..f9d3ba2955 100644
--- a/client/app/src/pages/admin/contexts/contexts.component.ts
+++ b/client/app/src/pages/admin/contexts/contexts.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {NewContext} from "@app/models/admin/new-context";
 import {contextResolverModel} from "@app/models/resolvers/context-resolver-model";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -8,20 +8,30 @@ import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {UsersResolver} from "@app/shared/resolvers/users.resolver";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { ContextEditorComponent } from "@app/pages/admin/contexts/context-editor/context-editor.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-contexts",
-  templateUrl: "./contexts.component.html"
+    selector: "src-contexts",
+    templateUrl: "./contexts.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, ContextEditorComponent, TranslatorPipe]
 })
 export class ContextsComponent implements OnInit {
+  protected preference = inject(PreferenceResolver);
+  protected httpService = inject(HttpService);
+  protected authenticationService = inject(AuthenticationService);
+  protected node = inject(NodeResolver);
+  protected users = inject(UsersResolver);
+  protected contexts = inject(ContextsResolver);
+  protected utilsService = inject(UtilsService);
+
   showAddContext: boolean = false;
   new_context: { name: string; } = {name: ""};
   contextsData: contextResolverModel[] = [];
 
-
-  constructor(protected preference: PreferenceResolver, protected httpService: HttpService, protected authenticationService: AuthenticationService, protected node: NodeResolver, protected users: UsersResolver, protected contexts: ContextsResolver, protected utilsService: UtilsService) {
-  }
-
   toggleAddContext() {
     this.showAddContext = !this.showAddContext;
   };
diff --git a/client/app/src/pages/admin/contexts/contexts.module.ts b/client/app/src/pages/admin/contexts/contexts.module.ts
deleted file mode 100644
index ade75ae1e0..0000000000
--- a/client/app/src/pages/admin/contexts/contexts.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ContextsRoutingModule} from "@app/pages/admin/contexts/contexts-routing.module";
-import {ContextsComponent} from "@app/pages/admin/contexts/contexts.component";
-import {FormsModule} from "@angular/forms";
-import {RouterModule} from "@angular/router";
-import {NgbNavModule, NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {SharedModule} from "@app/shared.module";
-import {ContextEditorComponent} from "@app/pages/admin/contexts/context-editor/context-editor.component";
-
-
-@NgModule({
-  declarations: [
-    ContextsComponent,
-    ContextEditorComponent
-  ],
-  imports: [
-    CommonModule,
-    ContextsRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule
-  ]
-})
-export class ContextsModule {
-}
diff --git a/client/app/src/pages/admin/home/admin-home.component.html b/client/app/src/pages/admin/home/admin-home.component.html
index 2da05413e1..8ed0602735 100644
--- a/client/app/src/pages/admin/home/admin-home.component.html
+++ b/client/app/src/pages/admin/home/admin-home.component.html
@@ -1,35 +1,37 @@
 <div id="AdminHomepage" class="reveal">
-    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">
-        <li [ngbNavItem]="0">
-            <button ngbNavLink>{{ 'Home' | translate }}</button>
-            <ng-template ngbNavContent>
-                <div class="tab-content">
-                    <src-user-home></src-user-home>
-                </div>
-            </ng-template>
-        </li>
-        <li [ngbNavItem]="1">
-            <button ngbNavLink [attr.data-cy]="'changelog'">
-                <i *ngIf="nodeResolver.dataModel.update_available" class="fa-solid fa-exclamation-sign text-danger"></i>
-                <span>{{ 'Changelog' | translate }}</span>
-            </button>
-            <ng-template ngbNavContent>
-                <div class="tab-content">
-                    <label>
-                        <span>{{ 'Software version:' | translate }}</span> {{ nodeResolver.dataModel.version }}
-                    </label>
-                    <div class="tos-text">{{ nodeResolver.dataModel.changelog }}</div>
-                </div>
-            </ng-template>
-        </li>
-        <li [ngbNavItem]="2">
-            <button ngbNavLink [attr.data-cy]="'license'">{{ 'License' | translate }}</button>
-            <ng-template ngbNavContent>
-                <div class="tab-content">
-                    <div class="tos-text">{{ nodeResolver.dataModel.license }}</div>
-                </div>
-            </ng-template>
-        </li>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">
+    <li [ngbNavItem]="0">
+      <button ngbNavLink>{{ 'Home' | translate }}</button>
+      <ng-template ngbNavContent>
+        <div class="tab-content">
+          <src-user-home></src-user-home>
+        </div>
+      </ng-template>
+    </li>
+    <li [ngbNavItem]="1">
+      <button ngbNavLink [attr.data-cy]="'changelog'">
+        @if (nodeResolver.dataModel.update_available) {
+          <i class="fa-solid fa-exclamation-sign text-danger"></i>
+        }
+        <span>{{ 'Changelog' | translate }}</span>
+      </button>
+      <ng-template ngbNavContent>
+        <div class="tab-content">
+          <label>
+            <span>{{ 'Software version:' | translate }}</span> {{ nodeResolver.dataModel.version }}
+          </label>
+          <div class="tos-text">{{ nodeResolver.dataModel.changelog }}</div>
+        </div>
+      </ng-template>
+    </li>
+    <li [ngbNavItem]="2">
+      <button ngbNavLink [attr.data-cy]="'license'">{{ 'License' | translate }}</button>
+      <ng-template ngbNavContent>
+        <div class="tab-content">
+          <div class="tos-text">{{ nodeResolver.dataModel.license }}</div>
+        </div>
+      </ng-template>
+    </li>
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/home/admin-home.component.ts b/client/app/src/pages/admin/home/admin-home.component.ts
index c13c21a82e..a621b617a0 100644
--- a/client/app/src/pages/admin/home/admin-home.component.ts
+++ b/client/app/src/pages/admin/home/admin-home.component.ts
@@ -1,22 +1,29 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
 import { UtilsService } from "@app/shared/services/utils.service";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { UserHomeComponent } from "../../../shared/partials/user-home/user-home.component";
+
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-admin-home",
-  templateUrl: "./admin-home.component.html"
+    selector: "src-admin-home",
+    templateUrl: "./admin-home.component.html",
+    standalone: true,
+    imports: [NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, UserHomeComponent, NgbNavOutlet, TranslatorPipe]
 })
 export class adminHomeComponent implements OnInit {
+  private utilsService = inject(UtilsService);
+  private preference = inject(PreferenceResolver);
+  protected nodeResolver = inject(NodeResolver);
+
   active: number = 0;
   nodeData: nodeResolverModel;
   preferenceData: preferenceResolverModel;
 
-  constructor(private utilsService: UtilsService, private preference: PreferenceResolver, protected nodeResolver: NodeResolver) {
-  }
-
   ngOnInit(): void {
     if (this.nodeResolver.dataModel) {
       this.nodeData = this.nodeResolver.dataModel;
diff --git a/client/app/src/pages/admin/network/access-control/access-control.component.html b/client/app/src/pages/admin/network/access-control/access-control.component.html
index 7e917b0704..857209fb2f 100644
--- a/client/app/src/pages/admin/network/access-control/access-control.component.html
+++ b/client/app/src/pages/admin/network/access-control/access-control.component.html
@@ -1,76 +1,84 @@
 <div class="card card-default">
-    <div class="card-body">
-        <form name="adminIPAccessControlForm" #adminIPAccessControlForm="ngForm">
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="form-group">
-                        <label>{{ 'Restrict access to specific IP addresses' | translate }}</label>
-                    </div>
-                    <table class="table table-bordered">
-                        <thead>
-                        <tr>
-                            <th>{{ 'Role' | translate }}</th>
-                            <th>{{ 'Enabled' | translate }}</th>
-                            <th>{{ 'Allowed IP addresses' | translate }}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>{{ 'Admin' | translate }}</td>
-                            <td>
-                                <input class="form-check-input" [(ngModel)]="networkData.ip_filter_admin_enable" type="checkbox" name="ip_filter_admin_enable" />
-                            </td>
-                            <td>
-                                <input *ngIf="networkData.ip_filter_admin_enable" class="form-control" name="ip_filter_admin" [(ngModel)]="networkData.ip_filter_admin" type="text" autocomplete="off" />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ 'Analyst' | translate }}</td>
-                            <td>
-                                <input class="form-check-input" [(ngModel)]="networkData.ip_filter_analyst_enable" type="checkbox" name="ip_filter_list" />
-                            </td>
-                            <td>
-                                <input *ngIf="networkData.ip_filter_analyst_enable" class="form-control" name="ip_filter_list" [(ngModel)]="networkData.ip_filter_analyst" type="text" autocomplete="off" />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ 'Custodian' | translate }}</td>
-                            <td>
-                                <input class="form-check-input" [(ngModel)]="networkData.ip_filter_custodian_enable" type="checkbox" name="ip_filter_custodian_enable" />
-                            </td>
-                            <td>
-                                <input *ngIf="networkData.ip_filter_custodian_enable" class="form-control" name="ip_filter_custodian" [(ngModel)]="networkData.ip_filter_custodian" type="text" autocomplete="off" />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ 'Recipient' | translate }}</td>
-                            <td>
-                                <input class="form-check-input" [(ngModel)]="networkData.ip_filter_receiver_enable" type="checkbox" name="ip_filter_receiver_enable" />
-                            </td>
-                            <td>
-                                <input *ngIf="networkData.ip_filter_receiver_enable" class="form-control" name="ip_filter_receiver" [(ngModel)]="networkData.ip_filter_receiver" type="text" autocomplete="off" />
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <div>
-                        <div>{{ 'Each entry must be separated with a comma.' | translate }}</div>
-                        <div>
-                            <span>{{ 'Example' | translate }}:</span>
-                            <span>212.35.212.87,192.0.2.0/24,2001:db8::/32</span>
-                        </div>
-                    </div>
-                </div>
+  <div class="card-body">
+    <form name="adminIPAccessControlForm" #adminIPAccessControlForm="ngForm">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="form-group">
+            <label>{{ 'Restrict access to specific IP addresses' | translate }}</label>
+          </div>
+          <table class="table table-bordered">
+            <thead>
+              <tr>
+                <th>{{ 'Role' | translate }}</th>
+                <th>{{ 'Enabled' | translate }}</th>
+                <th>{{ 'Allowed IP addresses' | translate }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{{ 'Admin' | translate }}</td>
+                <td>
+                  <input class="form-check-input" [(ngModel)]="networkData.ip_filter_admin_enable" type="checkbox" name="ip_filter_admin_enable" />
+                </td>
+                <td>
+                  @if (networkData.ip_filter_admin_enable) {
+                    <input class="form-control" name="ip_filter_admin" [(ngModel)]="networkData.ip_filter_admin" type="text" autocomplete="off" />
+                  }
+                </td>
+              </tr>
+              <tr>
+                <td>{{ 'Analyst' | translate }}</td>
+                <td>
+                  <input class="form-check-input" [(ngModel)]="networkData.ip_filter_analyst_enable" type="checkbox" name="ip_filter_list" />
+                </td>
+                <td>
+                  @if (networkData.ip_filter_analyst_enable) {
+                    <input class="form-control" name="ip_filter_list" [(ngModel)]="networkData.ip_filter_analyst" type="text" autocomplete="off" />
+                  }
+                </td>
+              </tr>
+              <tr>
+                <td>{{ 'Custodian' | translate }}</td>
+                <td>
+                  <input class="form-check-input" [(ngModel)]="networkData.ip_filter_custodian_enable" type="checkbox" name="ip_filter_custodian_enable" />
+                </td>
+                <td>
+                  @if (networkData.ip_filter_custodian_enable) {
+                    <input class="form-control" name="ip_filter_custodian" [(ngModel)]="networkData.ip_filter_custodian" type="text" autocomplete="off" />
+                  }
+                </td>
+              </tr>
+              <tr>
+                <td>{{ 'Recipient' | translate }}</td>
+                <td>
+                  <input class="form-check-input" [(ngModel)]="networkData.ip_filter_receiver_enable" type="checkbox" name="ip_filter_receiver_enable" />
+                </td>
+                <td>
+                  @if (networkData.ip_filter_receiver_enable) {
+                    <input class="form-control" name="ip_filter_receiver" [(ngModel)]="networkData.ip_filter_receiver" type="text" autocomplete="off" />
+                  }
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div>
+            <div>{{ 'Each entry must be separated with a comma.' | translate }}</div>
+            <div>
+              <span>{{ 'Example' | translate }}:</span>
+              <span>212.35.212.87,192.0.2.0/24,2001:db8::/32</span>
             </div>
-            <hr />
-            <div class="row">
-                <div class="col-md-6">
-                    <button id="AccessControlSave" class="btn btn-primary" [disabled]="adminIPAccessControlForm.invalid" (click)="updateAccessControl(networkData)" type="submit">
-                        <i class="fa-solid fa-check"></i>
-                        <span>{{ 'Save' | translate }}</span>
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
+          </div>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-md-6">
+          <button id="AccessControlSave" class="btn btn-primary" [disabled]="adminIPAccessControlForm.invalid" (click)="updateAccessControl(networkData)" type="submit">
+            <i class="fa-solid fa-check"></i>
+            <span>{{ 'Save' | translate }}</span>
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/access-control/access-control.component.ts b/client/app/src/pages/admin/network/access-control/access-control.component.ts
index 696da2feaf..a06d468275 100644
--- a/client/app/src/pages/admin/network/access-control/access-control.component.ts
+++ b/client/app/src/pages/admin/network/access-control/access-control.component.ts
@@ -1,18 +1,24 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {networkResolverModel} from "@app/models/resolvers/network-resolver-model";
 import {NetworkResolver} from "@app/shared/resolvers/network.resolver";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-access-control",
-  templateUrl: "./access-control.component.html"
+    selector: "src-access-control",
+    templateUrl: "./access-control.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe]
 })
 export class AccessControlComponent implements OnInit {
-  networkData: networkResolverModel;
+  private networkResolver = inject(NetworkResolver);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
 
-  constructor(private networkResolver: NetworkResolver, private httpService: HttpService, private utilsService: UtilsService) {
-  }
+  networkData: networkResolverModel;
 
   ngOnInit(): void {
     this.networkData = this.networkResolver.dataModel;
diff --git a/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.html b/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.html
index 4923c54654..d002823a5e 100644
--- a/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.html
+++ b/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.html
@@ -1,38 +1,40 @@
 <form name="certSigRequestForm" #certSigRequestForm="ngForm" class="form-horizontal was-validated clearfix">
-    <div class="form-group">
-        <label class="col-md-4 control-label">{{ 'Organization' | translate }}</label>
-        <div class="col-md-8">
-            <input class="form-control" [(ngModel)]="csr_cfg.company" name="company" [ngClass]="{'is-invalid': certSigRequestForm.form.get('company')?.invalid && csr_cfg.email.length !== 0}" />
-        </div>
+  <div class="form-group">
+    <label class="col-md-4 control-label">{{ 'Organization' | translate }}</label>
+    <div class="col-md-8">
+      <input class="form-control" [(ngModel)]="csr_cfg.company" name="company" [ngClass]="{'is-invalid': certSigRequestForm.form.get('company')?.invalid && csr_cfg.email.length !== 0}" />
     </div>
-    <div class="form-group">
-        <label class="col-md-4 control-label">{{ 'Email' | translate }}</label>
-        <div class="col-md-8">
-            <input class="form-control" [(ngModel)]="csr_cfg.email" name="email" type="text" [pattern]="Constants.emailRegexp" [ngClass]="{'is-invalid': certSigRequestForm.form.get('email')?.invalid && csr_cfg.email.length !== 0}" />
-            <div class="text-danger" *ngIf="certSigRequestForm.form.get('email')?.errors?.['pattern']">
-                {{ 'Invalid email address' | translate }}
-            </div>
+  </div>
+  <div class="form-group">
+    <label class="col-md-4 control-label">{{ 'Email' | translate }}</label>
+    <div class="col-md-8">
+      <input class="form-control" [(ngModel)]="csr_cfg.email" name="email" type="text" [pattern]="Constants.emailRegexp" [ngClass]="{'is-invalid': certSigRequestForm.form.get('email')?.invalid && csr_cfg.email.length !== 0}" />
+      @if (certSigRequestForm.form.get('email')?.errors?.['pattern']) {
+        <div class="text-danger">
+          {{ 'Invalid email address' | translate }}
         </div>
+      }
     </div>
-    <div class="form-group">
-        <label class="col-md-4 control-label">{{ 'City' | translate }}</label>
-        <div class="col-md-8">
-            <input class="form-control" [(ngModel)]="csr_cfg.city" name="city" type="text" [ngClass]="{'is-invalid': certSigRequestForm.form.get('city')?.invalid && csr_cfg.city.length !== 0}" />
-        </div>
+  </div>
+  <div class="form-group">
+    <label class="col-md-4 control-label">{{ 'City' | translate }}</label>
+    <div class="col-md-8">
+      <input class="form-control" [(ngModel)]="csr_cfg.city" name="city" type="text" [ngClass]="{'is-invalid': certSigRequestForm.form.get('city')?.invalid && csr_cfg.city.length !== 0}" />
     </div>
-    <div class="form-group">
-        <label class="col-md-4 control-label">{{ 'Country' | translate }}</label>
-        <div class="col-md-8">
-            <input class="form-control" [(ngModel)]="csr_cfg.province" name="province" type="text" [ngClass]="{'is-invalid': certSigRequestForm.form.get('province')?.invalid && csr_cfg.province.length !== 0}" />
-        </div>
+  </div>
+  <div class="form-group">
+    <label class="col-md-4 control-label">{{ 'Country' | translate }}</label>
+    <div class="col-md-8">
+      <input class="form-control" [(ngModel)]="csr_cfg.province" name="province" type="text" [ngClass]="{'is-invalid': certSigRequestForm.form.get('province')?.invalid && csr_cfg.province.length !== 0}" />
     </div>
-    <div class="form-group">
-        <label class="col-md-4 control-label">{{ 'Country code' | translate }}</label>
-        <div class="col-md-8">
-            <input class="form-control" [(ngModel)]="csr_cfg.country" name="country" type="text" minlength="2" maxlength="2" [pattern]="Constants.countryCodeRegexpOrEmpty" [ngClass]="{'is-invalid': certSigRequestForm.form.get('country')?.errors?.['pattern'] && csr_cfg.country.length !== 0}" />
-        </div>
+  </div>
+  <div class="form-group">
+    <label class="col-md-4 control-label">{{ 'Country code' | translate }}</label>
+    <div class="col-md-8">
+      <input class="form-control" [(ngModel)]="csr_cfg.country" name="country" type="text" minlength="2" maxlength="2" [pattern]="Constants.countryCodeRegexpOrEmpty" [ngClass]="{'is-invalid': certSigRequestForm.form.get('country')?.errors?.['pattern'] && csr_cfg.country.length !== 0}" />
     </div>
-    <button id="csrSubmit" class="btn btn-primary float-end" (click)="submitCSR()" [disabled]="certSigRequestForm.invalid">
-        {{ 'Generate' | translate }}
-    </button>
+  </div>
+  <button id="csrSubmit" class="btn btn-primary float-end" (click)="submitCSR()" [disabled]="certSigRequestForm.invalid">
+    {{ 'Generate' | translate }}
+  </button>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.ts b/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.ts
index 7252bcb389..2b204e0172 100644
--- a/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.ts
+++ b/client/app/src/pages/admin/network/https-csr-gen/https-csr-gen.component.ts
@@ -1,15 +1,24 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {FileResources} from "@app/models/component-model/file-resources";
 import {Constants} from "@app/shared/constants/constants";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-https-csr-gen",
-  templateUrl: "./https-csr-gen.component.html"
+    selector: "src-https-csr-gen",
+    templateUrl: "./https-csr-gen.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, TranslatorPipe]
 })
 export class HttpsCsrGenComponent {
+  private authenticationService = inject(AuthenticationService);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+
   @Input() fileResources: FileResources;
   protected readonly Constants = Constants;
   csr_cfg: {
@@ -28,9 +37,6 @@ export class HttpsCsrGenComponent {
     email: ""
   };
 
-  constructor(private authenticationService: AuthenticationService, private httpService: HttpService, private utilsService: UtilsService) {
-  }
-
   submitCSR() {
     this.httpService.requestCSRDirectContentResource(this.csr_cfg).subscribe({
       next: (response) => {
diff --git a/client/app/src/pages/admin/network/https-files/https-files.component.html b/client/app/src/pages/admin/network/https-files/https-files.component.html
index 15c4e1045f..cd836e28c7 100644
--- a/client/app/src/pages/admin/network/https-files/https-files.component.html
+++ b/client/app/src/pages/admin/network/https-files/https-files.component.html
@@ -1,114 +1,144 @@
 <div class="https-file-res">
-    <ng-container *ngIf="tlsConfig">
-        <div class="card card-default key mb-1">
-            <div class="card-body clearfix">
-                <span>{{ 'Private Key' | translate }}</span>
-                <span>(PEM)</span>
-                <span class="float-end">
-                    <span *ngIf="!tlsConfig.files?.key?.set">
-                        <input type="file" hidden #pkInput (change)="postFile(pkInput.files,fileResources.key)" />
-                        <label id="keyUpload" (click)="pkInput.click()" class="btn btn-sm btn-primary">{{'Upload' | translate}}</label>
-                    </span>
-                    <button id="pkGen" class="btn btn-sm btn-primary" *ngIf="!tlsConfig.files?.key?.set" (click)="genKey()">
-                        <i class="fa-solid fa-cog"></i>
-                        <span>{{ 'Generate' | translate }}</span>
-                    </button>
-                    <span *ngIf="tlsConfig.files?.key?.set">
-                        <button id="deleteKey" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.key)">
-                            <i class="fa-solid fa-times"></i>
-                            <span>{{ 'Delete' | translate }}</span>
-                        </button>
-                    </span>
-                </span>
-            </div>
-        </div>
-        <div *ngIf="tlsConfig.files.key.set && !tlsConfig.acme" class="card card-default csr mb-1">
-            <div class="card-body clearfix">
-                <span>{{ 'Certificate Signing Request' | translate }}</span>
-                <span>(PEM)</span>
-                <span *ngIf="!tlsConfig.files.csr?.set">
-                    <span class="float-end">
-                        <button id="csrGen" class="btn btn-sm btn-primary" *ngIf="!csr_state.open" (click)="csr_state.open = true">
-                            <i class="fa-solid fa-cog"></i>
-                            <span>{{ 'Generate' | translate }}</span>
-                        </button>
-                        <button type="submit" class="close btn large-close-button" *ngIf="csr_state.open" (click)="csr_state.open = false" aria-label="Close">&times;</button>
-                    </span>
-                    <br>
-                    <br>
-                    <div *ngIf="csr_state.open">
-                        <hr />
-                        <src-https-csr-gen [fileResources]="fileResources"></src-https-csr-gen>
+  @if (tlsConfig) {
+    <div class="card card-default key mb-1">
+      <div class="card-body clearfix">
+        <span>{{ 'Private Key' | translate }}</span>
+        <span>(PEM)</span>
+        <span class="float-end">
+          @if (!tlsConfig.files.key.set) {
+            <span>
+              <input type="file" hidden #pkInput (change)="postFile(pkInput.files,fileResources.key)" />
+              <label id="keyUpload" (click)="pkInput.click()" class="btn btn-sm btn-primary">{{'Upload' | translate}}</label>
+            </span>
+          }
+          @if (!tlsConfig.files.key.set) {
+            <button id="pkGen" class="btn btn-sm btn-primary" (click)="genKey()">
+              <i class="fa-solid fa-cog"></i>
+              <span>{{ 'Generate' | translate }}</span>
+            </button>
+          }
+          @if (tlsConfig.files.key.set) {
+            <span>
+              <button id="deleteKey" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.key)">
+                <i class="fa-solid fa-times"></i>
+                <span>{{ 'Delete' | translate }}</span>
+              </button>
+            </span>
+          }
+        </span>
+      </div>
+    </div>
+    @if (tlsConfig.files.key.set && !tlsConfig.acme) {
+      <div class="card card-default csr mb-1">
+        <div class="card-body clearfix">
+          <span>{{ 'Certificate Signing Request' | translate }}</span>
+          <span>(PEM)</span>
+          @if (!isCsrSet()) {
+            <span>
+              <span class="float-end">
+                @if (!csr_state.open) {
+                  <button id="csrGen" class="btn btn-sm btn-primary" (click)="csr_state.open = true">
+                    <i class="fa-solid fa-cog"></i>
+                    <span>{{ 'Generate' | translate }}</span>
+                  </button>
+                }
+                @if (csr_state.open) {
+                  <button type="submit" class="close btn large-close-button" (click)="csr_state.open = false" aria-label="Close">&times;</button>
+                }
+              </span>
+              <br>
+                <br>
+                  @if (csr_state.open) {
+                    <div>
+                      <hr />
+                      <src-https-csr-gen [fileResources]="fileResources"></src-https-csr-gen>
                     </div>
+                  }
                 </span>
-                <span *ngIf="tlsConfig.files.csr?.set" class="clearfix">
-                    <span class="float-end">
-                        <button id="downloadCsr" class="btn btn-sm btn-primary" (click)="downloadCSR()">
-                            <i class="fa-solid fa-file-export"></i>
-                            <span>{{ 'Download' | translate }}</span>
-                        </button>
-                        <button id="deleteCsr" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.csr)">
-                            <i class="fa-solid fa-times"></i>
-                            <span>{{ 'Delete' | translate }}</span>
-                        </button>
-                    </span>
+              }
+              @if (isCsrSet()) {
+                <span class="clearfix">
+                  <span class="float-end">
+                    <button id="downloadCsr" class="btn btn-sm btn-primary" (click)="downloadCSR()">
+                      <i class="fa-solid fa-file-export"></i>
+                      <span>{{ 'Download' | translate }}</span>
+                    </button>
+                    <button id="deleteCsr" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.csr)">
+                      <i class="fa-solid fa-times"></i>
+                      <span>{{ 'Delete' | translate }}</span>
+                    </button>
+                  </span>
                 </span>
+              }
             </div>
-        </div>
+          </div>
+        }
         <div class="card card-default cert mb-1">
-            <div class="card-body clearfix">
-                <span>{{ 'Certificate' | translate }}</span>
-                <span>(PEM)</span>
-                <ng-container *ngIf="tlsConfig.files.cert.set">
-                    <span class="badge bg-primary">
-                        <span>{{ 'Valid until:' | translate }}</span> {{ tlsConfig.files.cert.expiration_date |
-                      date:'dd-MM-yyyy HH:mm' }}
-                        <span>{{ 'Issuer:' | translate }}</span>
-                        <b>{{ tlsConfig.files.cert.issuer }}</b>
-                    </span>
-                </ng-container>
-                <span class="float-end">
-                    <span *ngIf="!tlsConfig.files.cert.set">
-                        <input type="file" hidden #certificateInput (change)="postFile(certificateInput.files,fileResources.cert)" />
-                        <label id="certUpload" (click)="certificateInput.click()" class="btn btn-sm btn-primary">{{'Upload' | translate}}</label>
-                    </span>
-                    <span *ngIf="tlsConfig.files.cert.set">
-                        <button id="deleteCert" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.cert)">
-                            <i class="fa-solid fa-times"></i>
-                            <span>{{ 'Delete' | translate }}</span>
-                        </button>
-                    </span>
+          <div class="card-body clearfix">
+            <span>{{ 'Certificate' | translate }}</span>
+            <span>(PEM)</span>
+            @if (tlsConfig.files.cert.set) {
+              <span class="badge bg-primary">
+                <span>{{ 'Valid until:' | translate }}</span> {{ tlsConfig.files.cert.expiration_date |
+                date:'dd-MM-yyyy HH:mm' }}
+                <span>{{ 'Issuer:' | translate }}</span>
+                <b>{{ tlsConfig.files.cert.issuer }}</b>
+              </span>
+            }
+            <span class="float-end">
+              @if (!tlsConfig.files.cert.set) {
+                <span>
+                  <input type="file" hidden #certificateInput (change)="postFile(certificateInput.files,fileResources.cert)" />
+                  <label id="certUpload" (click)="certificateInput.click()" class="btn btn-sm btn-primary">{{'Upload' | translate}}</label>
                 </span>
-            </div>
+              }
+              @if (tlsConfig.files.cert.set) {
+                <span>
+                  <button id="deleteCert" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.cert)">
+                    <i class="fa-solid fa-times"></i>
+                    <span>{{ 'Delete' | translate }}</span>
+                  </button>
+                </span>
+              }
+            </span>
+          </div>
         </div>
         <div class="card card-default chain mb-1">
-            <div class="card-body clearfix">
-                <span>{{ 'Intermediate Certificates' | translate }}</span>
-                <span>(PEM)</span>
-                <ng-container *ngIf="tlsConfig.files.chain.set">
-                    <span class="badge bg-primary">
-                        <span>{{ 'Valid until:' | translate }}</span> {{ tlsConfig.files.chain.expiration_date |
-                      date:'dd-MM-yyyy HH:mm' }}
-                        <span>{{ 'Issuer:' | translate }}</span>
-                        <b>{{ tlsConfig.files.chain.issuer }}</b>
-                    </span>
-                </ng-container>
-                <div class="float-end">
-                    <span *ngIf="!tlsConfig.files.chain.set">
-                        <input type="file" hidden #iCertificateInput (change)="postFile(iCertificateInput.files,fileResources.chain)" />
-                        <label id="chainUpload" (click)="iCertificateInput.click()" class="btn btn-sm btn-primary">{{'Upload' | translate}}</label>
-                    </span>
-                    <span *ngIf="tlsConfig.files.chain.set">
-                        <button id="deleteChain" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.chain)">
-                            <i class="fa-solid fa-times"></i>
-                            <span>{{ 'Delete' | translate }}</span>
-                        </button>
-                    </span>
-                </div>
+          <div class="card-body clearfix">
+            <span>{{ 'Intermediate Certificates' | translate }}</span>
+            <span>(PEM)</span>
+            @if (tlsConfig.files.chain.set) {
+              <span class="badge bg-primary">
+                <span>{{ 'Valid until:' | translate }}</span> {{ tlsConfig.files.chain.expiration_date |
+                date:'dd-MM-yyyy HH:mm' }}
+                <span>{{ 'Issuer:' | translate }}</span>
+                <b>{{ tlsConfig.files.chain.issuer }}</b>
+              </span>
+            }
+            <div class="float-end">
+              @if (!tlsConfig.files.chain.set) {
+                <span>
+                  <input type="file" hidden #iCertificateInput (change)="postFile(iCertificateInput.files,fileResources.chain)" />
+                  <label id="chainUpload" (click)="iCertificateInput.click()" class="btn btn-sm btn-primary">{{'Upload' | translate}}</label>
+                </span>
+              }
+              @if (tlsConfig.files.chain.set) {
+                <span>
+                  <button id="deleteChain" class="btn btn-sm btn-danger" (click)="deleteFile(fileResources.chain)">
+                    <i class="fa-solid fa-times"></i>
+                    <span>{{ 'Delete' | translate }}</span>
+                  </button>
+                </span>
+              }
             </div>
+          </div>
         </div>
-    </ng-container>
-    <button *ngIf="!tlsConfig.enabled && state > 1" class="btn btn-primary" (click)="toggleCfg()">{{ 'Enable' | translate }}</button>
-    <button *ngIf="tlsConfig.enabled" class="btn btn-danger" (click)="toggleCfg()">{{ 'Disable' | translate }}</button>
-    <button class="btn btn-danger" (click)="resetCfg()">{{ 'Reset' | translate }}</button>
-</div>
\ No newline at end of file
+      }
+      @if (!tlsConfig.enabled && state > 1) {
+        <button class="btn btn-primary" (click)="toggleCfg()">{{ 'Enable' | translate }}</button>
+      }
+      @if (tlsConfig.enabled) {
+        <button class="btn btn-danger" (click)="toggleCfg()">{{ 'Disable' | translate }}</button>
+      }
+      <button class="btn btn-danger" (click)="resetCfg()">{{ 'Reset' | translate }}</button>
+    </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/https-files/https-files.component.ts b/client/app/src/pages/admin/network/https-files/https-files.component.ts
index b1a8530a37..2894cd259f 100644
--- a/client/app/src/pages/admin/network/https-files/https-files.component.ts
+++ b/client/app/src/pages/admin/network/https-files/https-files.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {ConfirmationComponent} from "@app/shared/modals/confirmation/confirmation.component";
@@ -8,12 +8,23 @@ import {UtilsService} from "@app/shared/services/utils.service";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
 import {TlsConfig} from "@app/models/component-model/tls-confiq";
 import {FileResource, FileResources} from "@app/models/component-model/file-resources";
+import { DatePipe } from "@angular/common";
+import { HttpsCsrGenComponent } from "../https-csr-gen/https-csr-gen.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-https-files",
-  templateUrl: "./https-files.component.html"
+    selector: "src-https-files",
+    templateUrl: "./https-files.component.html",
+    standalone: true,
+    imports: [HttpsCsrGenComponent, DatePipe, TranslatorPipe]
 })
 export class HttpsFilesComponent implements OnInit {
+  private authenticationService = inject(AuthenticationService);
+  private nodeResolver = inject(NodeResolver);
+  private httpService = inject(HttpService);
+  private modalService = inject(NgbModal);
+  private utilsService = inject(UtilsService);
+
   @Output() dataToParent = new EventEmitter<string>();
   @Input() tlsConfig: TlsConfig;
   @Input() state: number = 0;
@@ -32,9 +43,6 @@ export class HttpsFilesComponent implements OnInit {
     open: false
   };
 
-  constructor(private authenticationService: AuthenticationService, private nodeResolver: NodeResolver, private httpService: HttpService, private modalService: NgbModal, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     this.nodeData = this.nodeResolver.dataModel;
   }
@@ -117,4 +125,8 @@ export class HttpsFilesComponent implements OnInit {
     };
     return modalRef.result;
   }
+
+  isCsrSet(): boolean {
+    return !!this.tlsConfig.files.csr?.set;
+  }
 }
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/https-setup/https-setup.component.ts b/client/app/src/pages/admin/network/https-setup/https-setup.component.ts
index 0fe4aa1521..38e491dc3f 100644
--- a/client/app/src/pages/admin/network/https-setup/https-setup.component.ts
+++ b/client/app/src/pages/admin/network/https-setup/https-setup.component.ts
@@ -1,13 +1,19 @@
-import {Component, EventEmitter, Output} from "@angular/core";
+import { Component, EventEmitter, Output, inject } from "@angular/core";
 import {FileResources} from "@app/models/component-model/file-resources";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {HttpService} from "@app/shared/services/http.service";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-https-setup",
-  templateUrl: "./https-setup.component.html"
+    selector: "src-https-setup",
+    templateUrl: "./https-setup.component.html",
+    standalone: true,
+    imports: [TranslatorPipe]
 })
 export class HttpsSetupComponent {
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
+
   @Output() dataToParent = new EventEmitter<string>();
   fileResources: FileResources = {
     key: {name: "key"},
@@ -16,9 +22,6 @@ export class HttpsSetupComponent {
     csr: {name: "csr"},
   };
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
-
   setupAcme() {
     const authHeader = this.authenticationService.getHeader();
     this.httpService.requestUpdateTlsConfigFilesResource("key", authHeader, this.fileResources.key).subscribe(() => {
diff --git a/client/app/src/pages/admin/network/https-status/https-status.component.html b/client/app/src/pages/admin/network/https-status/https-status.component.html
index f21ba43115..46f2953cef 100644
--- a/client/app/src/pages/admin/network/https-status/https-status.component.html
+++ b/client/app/src/pages/admin/network/https-status/https-status.component.html
@@ -1,26 +1,34 @@
-<ng-container *ngIf="tlsConfig">
-    <div class="info-section">
+@if (tlsConfig) {
+  <div class="info-section">
+    <div>
+      <div>
+        <span>{{'Status'|translate}}</span>
+        <span>: </span>
+        @if (tlsConfig.enabled) {
+          <span>
+            <span>{{'Enabled'|translate}}</span>
+          </span>
+        }
+        @if (!tlsConfig.enabled) {
+          <span>
+            <span>{{'Disabled'|translate}}</span>
+          </span>
+        }
+      </div>
+      @if (tlsConfig.acme) {
         <div>
-            <div>
-                <span>{{'Status'|translate}}</span>
-                <span>: </span>
-                <span *ngIf="tlsConfig.enabled">
-                    <span>{{'Enabled'|translate}}</span>
-                </span>
-                <span *ngIf="!tlsConfig.enabled">
-                    <span>{{'Disabled'|translate}}</span>
-                </span>
-            </div>
-            <div *ngIf="tlsConfig.acme">
-                <span>{{'Auto - renewal'|translate}}</span>: <span>{{'Enabled'|translate}}</span>
-            </div>
+          <span>{{'Auto - renewal'|translate}}</span>: <span>{{'Enabled'|translate}}</span>
         </div>
-        <div class="hostname">
-            <div *ngIf="tlsConfig.enabled">
-                <span>{{'URL'|translate}}</span>
-                <span>:</span>
-                <a href="{{getNetworkResolver()}}" rel="noreferrer" target="_blank">https://{{networkResolver.dataModel.hostname}}</a>
-            </div>
+      }
+    </div>
+    <div class="hostname">
+      @if (tlsConfig.enabled) {
+        <div>
+          <span>{{'URL'|translate}}</span>
+          <span>:</span>
+          <a href="{{getNetworkResolver()}}" rel="noreferrer" target="_blank">https://{{networkResolver.dataModel.hostname}}</a>
         </div>
+      }
     </div>
-</ng-container>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/https-status/https-status.component.ts b/client/app/src/pages/admin/network/https-status/https-status.component.ts
index 2b57aa5b5c..2638ed4625 100644
--- a/client/app/src/pages/admin/network/https-status/https-status.component.ts
+++ b/client/app/src/pages/admin/network/https-status/https-status.component.ts
@@ -1,21 +1,25 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 import {NetworkResolver} from "@app/shared/resolvers/network.resolver";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
 import {TlsConfig} from "@app/models/component-model/tls-confiq";
 
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-https-status",
-  templateUrl: "./https-status.component.html"
+    selector: "src-https-status",
+    templateUrl: "./https-status.component.html",
+    standalone: true,
+    imports: [TranslatorPipe]
 })
 export class HttpsStatusComponent implements OnInit {
+  protected networkResolver = inject(NetworkResolver);
+  private nodeResolver = inject(NodeResolver);
+
   @Output() dataToParent = new EventEmitter<string>();
   @Input() tlsConfig: TlsConfig;
   nodeData: nodeResolverModel;
 
-  constructor(protected networkResolver: NetworkResolver, private nodeResolver: NodeResolver) {
-  }
-
   ngOnInit(): void {
     this.nodeData = this.nodeResolver.dataModel;
   }
diff --git a/client/app/src/pages/admin/network/https/https.component.html b/client/app/src/pages/admin/network/https/https.component.html
index 7baa3f4fbf..7d2cd8505d 100644
--- a/client/app/src/pages/admin/network/https/https.component.html
+++ b/client/app/src/pages/admin/network/https/https.component.html
@@ -11,16 +11,24 @@
         </p>
     </form>
 </div>
-<div id="HTTPSSettings" *ngIf="appDataService.public.node.hostname">
-    <div class="card card-default">
-        <div class="card-body" [ngSwitch]="menuState">
+@if (appDataService.public.node.hostname) {
+    <div id="HTTPSSettings">
+        <div class="card card-default">
+            <div class="card-body">
             <src-https-status [tlsConfig]="tlsConfig" (dataToParent)="httpsStatus($event)"></src-https-status>
-            <div *ngSwitchCase="'setup'">
-                <src-https-setup (dataToParent)="httpsSetup($event)"></src-https-setup>
-            </div>
-            <div *ngSwitchDefault>
-                <src-https-files [tlsConfig]="tlsConfig" [state]="state" (dataToParent)="httpsFiles($event)"></src-https-files>
+            @switch (menuState) {
+            @case ('setup') {
+                <div>
+                    <src-https-setup (dataToParent)="httpsSetup($event)"></src-https-setup>
+                </div>
+            }
+            @default {
+                <div>
+                    <src-https-files [tlsConfig]="tlsConfig" [state]="state" (dataToParent)="httpsFiles($event)"></src-https-files>
+                </div>
+            }
+            }
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/https/https.component.ts b/client/app/src/pages/admin/network/https/https.component.ts
index 95b054752d..0a8cd7a7b9 100644
--- a/client/app/src/pages/admin/network/https/https.component.ts
+++ b/client/app/src/pages/admin/network/https/https.component.ts
@@ -1,25 +1,35 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {TlsConfig} from "@app/models/component-model/tls-confiq";
 import {Constants} from "@app/shared/constants/constants";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { HttpsStatusComponent } from "../https-status/https-status.component";
+import { HttpsSetupComponent } from "../https-setup/https-setup.component";
+import { HttpsFilesComponent } from "../https-files/https-files.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-https",
-  templateUrl: "./https.component.html"
+    selector: "src-https",
+    templateUrl: "./https.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, HttpsStatusComponent, HttpsSetupComponent, HttpsFilesComponent, TranslatorPipe]
 })
 export class HttpsComponent implements OnInit {
+  protected nodeResolver = inject(NodeResolver);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+
   protected readonly Constants = Constants;
   state = 0;
   menuState = "setup";
   tlsConfig: TlsConfig;
   hostName: string="";
 
-  constructor(protected nodeResolver: NodeResolver, private httpService: HttpService, private utilsService: UtilsService,protected appDataService:AppDataService) {
-  }
-
   ngOnInit() {
     this.initFunction();
     this.hostName = this.appDataService.public.node.hostname
diff --git a/client/app/src/pages/admin/network/network-routing.module.ts b/client/app/src/pages/admin/network/network-routing.module.ts
deleted file mode 100644
index a322223411..0000000000
--- a/client/app/src/pages/admin/network/network-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {NetworkComponent} from "@app/pages/admin/network/network.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: NetworkComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class NetworkRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/network.component.html b/client/app/src/pages/admin/network/network.component.html
index 5bbc7579c9..3bf2fab240 100644
--- a/client/app/src/pages/admin/network/network.component.html
+++ b/client/app/src/pages/admin/network/network.component.html
@@ -1,25 +1,25 @@
 <div class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active" >
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-https></src-https>
-    </ng-template>
-    <ng-template #tab2>
-        <src-tor></src-tor>
-    </ng-template>
-    <ng-template #tab3>
-        <src-access-control></src-access-control>
-    </ng-template>
-    <ng-template #tab4>
-        <src-url-redirects></src-url-redirects>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active" >
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-https></src-https>
+  </ng-template>
+  <ng-template #tab2>
+    <src-tor></src-tor>
+  </ng-template>
+  <ng-template #tab3>
+    <src-access-control></src-access-control>
+  </ng-template>
+  <ng-template #tab4>
+    <src-url-redirects></src-url-redirects>
+  </ng-template>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/network.component.ts b/client/app/src/pages/admin/network/network.component.ts
index 4b56ad0585..8fa94b8d8c 100644
--- a/client/app/src/pages/admin/network/network.component.ts
+++ b/client/app/src/pages/admin/network/network.component.ts
@@ -1,16 +1,24 @@
-import {Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
+import { Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef, inject } from "@angular/core";
 import {Tab} from "@app/models/component-model/tab";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {HttpsComponent} from "@app/pages/admin/network/https/https.component";
 import {TorComponent} from "@app/pages/admin/network/tor/tor.component";
 import {AccessControlComponent} from "@app/pages/admin/network/access-control/access-control.component";
 import {UrlRedirectsComponent} from "@app/pages/admin/network/url-redirects/url-redirects.component";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-network",
-  templateUrl: "./network.component.html"
+    selector: "src-network",
+    templateUrl: "./network.component.html",
+    standalone: true,
+    imports: [NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, HttpsComponent, TorComponent, AccessControlComponent, UrlRedirectsComponent, TranslatorPipe]
 })
 export class NetworkComponent implements AfterViewInit {
+  node = inject(NodeResolver);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<HttpsComponent>;
   @ViewChild("tab2") tab2!: TemplateRef<TorComponent>;
   @ViewChild("tab3") tab3!: TemplateRef<AccessControlComponent>;
@@ -20,12 +28,6 @@ export class NetworkComponent implements AfterViewInit {
   nodeData: NodeResolver;
   active: string;
 
-  constructor(
-    public node: NodeResolver,
-    private cdr: ChangeDetectorRef
-  ) {
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "HTTPS";
diff --git a/client/app/src/pages/admin/network/network.module.ts b/client/app/src/pages/admin/network/network.module.ts
deleted file mode 100644
index 557e9a0b7a..0000000000
--- a/client/app/src/pages/admin/network/network.module.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {NetworkRoutingModule} from "@app/pages/admin/network/network-routing.module";
-import {NetworkComponent} from "@app/pages/admin/network/network.component";
-import {FormsModule} from "@angular/forms";
-import {RouterModule} from "@angular/router";
-import {NgbNavModule, NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {SharedModule} from "@app/shared.module";
-import {HttpsComponent} from "@app/pages/admin/network/https/https.component";
-import {TorComponent} from "@app/pages/admin/network/tor/tor.component";
-import {AccessControlComponent} from "@app/pages/admin/network/access-control/access-control.component";
-import {UrlRedirectsComponent} from "@app/pages/admin/network/url-redirects/url-redirects.component";
-import {HttpsSetupComponent} from "@app/pages/admin/network/https-setup/https-setup.component";
-import {HttpsFilesComponent} from "@app/pages/admin/network/https-files/https-files.component";
-import {HttpsStatusComponent} from "@app/pages/admin/network/https-status/https-status.component";
-import {HttpsCsrGenComponent} from "@app/pages/admin/network/https-csr-gen/https-csr-gen.component";
-
-
-@NgModule({
-  declarations: [
-    NetworkComponent,
-    HttpsComponent,
-    TorComponent,
-    AccessControlComponent,
-    UrlRedirectsComponent,
-    HttpsSetupComponent,
-    HttpsFilesComponent,
-    HttpsStatusComponent,
-    HttpsCsrGenComponent
-  ],
-  imports: [
-    CommonModule,
-    NetworkRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule,
-  ]
-})
-export class NetworkModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/tor/tor.component.html b/client/app/src/pages/admin/network/tor/tor.component.html
index 7f05416422..8cc5cc1334 100644
--- a/client/app/src/pages/admin/network/tor/tor.component.html
+++ b/client/app/src/pages/admin/network/tor/tor.component.html
@@ -1,94 +1,98 @@
-<ng-container *ngIf="networkData">
-    <div class="form-group">
-        <div class="input-group">
-            <span class="input-group-prepend">
-                <span class="input-group-text rounded-end-0">{{ 'Tor Onion Service' | translate }}</span>
-            </span>
-            <input name="onionservice" class="form-control" type="text" [value]="networkData.onionservice" disabled />
-            <span class="input-group-append">
-                <button class="btn btn-danger rounded-start-0 m-0" [disabled]="torOnionResetInProgress"
-                    (click)="resetOnionPrivateKey()">
-                    <i class="fa-solid fa-sync"></i>
-                    <span>{{ 'Regenerate' | translate }}</span>
-                </button>
-            </span>
-        </div>
+@if (networkData) {
+  <div class="form-group">
+    <div class="input-group">
+      <span class="input-group-prepend">
+        <span class="input-group-text rounded-end-0">{{ 'Tor Onion Service' | translate }}</span>
+      </span>
+      <input name="onionservice" class="form-control" type="text" [value]="networkData.onionservice" disabled />
+      <span class="input-group-append">
+        <button class="btn btn-danger rounded-start-0 m-0" [disabled]="torOnionResetInProgress"
+          (click)="resetOnionPrivateKey()">
+          <i class="fa-solid fa-sync"></i>
+          <span>{{ 'Regenerate' | translate }}</span>
+        </button>
+      </span>
     </div>
-    <div class="card card-default">
-        <div class="card-body">
-            <form #adminNetForm="ngForm">
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant">
-                            <input class="form-check-input" [(ngModel)]="networkData.anonymize_outgoing_connections"
-                                name="anonymize_outgoing_connections" type="checkbox">
-                            <label>{{ 'Anonymize outgoing connections' | translate }}</label>
-                        </div>
-                        <div class="form-group">
-                            <input class="form-check-input" [(ngModel)]="networkData.reachable_via_web" name="reachable_via_web" type="checkbox">
-                            <label>{{ 'Let the platform be reachable without Tor' | translate }}</label>
-                        </div>
-                        <div *ngIf="networkData.reachable_via_web">
-                            <div class="form-group">
-                                <label>{{ 'Roles enabled to use the platform without Tor' | translate }}</label>
-                            </div>
-                            <table class="table table-bordered">
-                                <thead>
-                                    <th>{{ 'Role' | translate }}</th>
-                                    <th>{{ 'Enabled' | translate }}</th>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>{{ 'Admin' | translate }}</td>
-                                        <td>
-                                            <input class="form-check-input" [(ngModel)]="networkData.https_admin" name="https_admin"
-                                                type="checkbox">
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ 'Analyst' | translate }}</td>
-                                        <td>
-                                            <input class="form-check-input" [(ngModel)]="networkData.https_analyst" name="https_analyst"
-                                                type="checkbox">
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ 'Custodian' | translate }}</td>
-                                        <td>
-                                            <input class="form-check-input" [(ngModel)]="networkData.https_custodian" name="https_custodian"
-                                                type="checkbox">
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ 'Recipient' | translate }}</td>
-                                        <td>
-                                            <input class="form-check-input" [(ngModel)]="networkData.https_receiver" name="https_receiver"
-                                                type="checkbox">
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ 'Whistleblower' | translate }}</td>
-                                        <td>
-                                            <input class="form-check-input" [(ngModel)]="networkData.https_whistleblower"
-                                                name="https_whistleblower" type="checkbox">
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                <hr />
-                <div class="row">
-                    <div class="col-md-6">
-                        <button class="btn btn-primary" [disabled]="adminNetForm.invalid"
-                            (click)="updateTor(networkData)" type="submit">
-                            <i class="fa-solid fa-check"></i>
-                            <span>{{ 'Save' | translate }}</span>
-                        </button>
-                    </div>
+  </div>
+  <div class="card card-default">
+    <div class="card-body">
+      <form #adminNetForm="ngForm">
+        <div class="row">
+          <div class="col-md-12">
+            @if (nodeResolver.dataModel.root_tenant) {
+              <div class="form-group">
+                <input class="form-check-input" [(ngModel)]="networkData.anonymize_outgoing_connections"
+                  name="anonymize_outgoing_connections" type="checkbox">
+                <label>{{ 'Anonymize outgoing connections' | translate }}</label>
+              </div>
+            }
+            <div class="form-group">
+              <input class="form-check-input" [(ngModel)]="networkData.reachable_via_web" name="reachable_via_web" type="checkbox">
+              <label>{{ 'Let the platform be reachable without Tor' | translate }}</label>
+            </div>
+            @if (networkData.reachable_via_web) {
+              <div>
+                <div class="form-group">
+                  <label>{{ 'Roles enabled to use the platform without Tor' | translate }}</label>
                 </div>
-            </form>
+                <table class="table table-bordered">
+                  <thead>
+                    <th>{{ 'Role' | translate }}</th>
+                    <th>{{ 'Enabled' | translate }}</th>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>{{ 'Admin' | translate }}</td>
+                      <td>
+                        <input class="form-check-input" [(ngModel)]="networkData.https_admin" name="https_admin"
+                          type="checkbox">
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>{{ 'Analyst' | translate }}</td>
+                      <td>
+                        <input class="form-check-input" [(ngModel)]="networkData.https_analyst" name="https_analyst"
+                          type="checkbox">
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>{{ 'Custodian' | translate }}</td>
+                      <td>
+                        <input class="form-check-input" [(ngModel)]="networkData.https_custodian" name="https_custodian"
+                          type="checkbox">
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>{{ 'Recipient' | translate }}</td>
+                      <td>
+                        <input class="form-check-input" [(ngModel)]="networkData.https_receiver" name="https_receiver"
+                          type="checkbox">
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>{{ 'Whistleblower' | translate }}</td>
+                      <td>
+                        <input class="form-check-input" [(ngModel)]="networkData.https_whistleblower"
+                          name="https_whistleblower" type="checkbox">
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            }
+          </div>
+        </div>
+        <hr />
+        <div class="row">
+          <div class="col-md-6">
+            <button class="btn btn-primary" [disabled]="adminNetForm.invalid"
+              (click)="updateTor(networkData)" type="submit">
+              <i class="fa-solid fa-check"></i>
+              <span>{{ 'Save' | translate }}</span>
+            </button>
+          </div>
         </div>
+      </form>
     </div>
-</ng-container>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/tor/tor.component.ts b/client/app/src/pages/admin/network/tor/tor.component.ts
index 9c5d1365c0..1a04900a41 100644
--- a/client/app/src/pages/admin/network/tor/tor.component.ts
+++ b/client/app/src/pages/admin/network/tor/tor.component.ts
@@ -1,20 +1,26 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {networkResolverModel} from "@app/models/resolvers/network-resolver-model";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 
+import { FormsModule } from "@angular/forms";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-tor",
-  templateUrl: "./tor.component.html"
+    selector: "src-tor",
+    templateUrl: "./tor.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe]
 })
 export class TorComponent implements OnInit {
+  protected nodeResolver = inject(NodeResolver);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+
   torOnionResetInProgress: boolean = false;
   networkData: networkResolverModel;
 
-  constructor(protected nodeResolver: NodeResolver, private httpService: HttpService, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     this.getNetortResolver();
   }
diff --git a/client/app/src/pages/admin/network/url-redirects/url-redirects.component.html b/client/app/src/pages/admin/network/url-redirects/url-redirects.component.html
index 28790f4a6e..515d72cd0c 100644
--- a/client/app/src/pages/admin/network/url-redirects/url-redirects.component.html
+++ b/client/app/src/pages/admin/network/url-redirects/url-redirects.component.html
@@ -1,52 +1,54 @@
 <div class="row">
-    <div class="col-md-12">
-        <form name="redirectAddForm" #redirectAddForm="ngForm" class="form-inline">
-            <div class="form-group d-inline-flex align-items-center">
-                <div class="input-group">
-                    <span class="input-group-prepend">
-                        <span class="input-group-text rounded-0 rounded-start">{{ 'From' | translate }}</span>
-                    </span>
-                    <input type="text" class="form-control" name="path1" [(ngModel)]="new_redirect.path1" />
-                </div>
-            </div>
-            <div class="form-group d-inline-flex align-items-center ms-2">
-                <span class="input-group">
-                    <span class="input-group-prepend">
-                        <span class="input-group-text rounded-0 rounded-start">{{ 'To' | translate }}</span>
-                    </span>
-                    <input type="text" class="form-control" name="path2" [(ngModel)]="new_redirect.path2" />
-                </span>
-            </div>
-            <button type="submit" id="add_redirect" class="btn btn-primary ms-2 mb-1" [disabled]="redirectAddForm.invalid" (click)="addRedirect()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{ 'Add' | translate }}</span>
-            </button>
-        </form>
-    </div>
+  <div class="col-md-12">
+    <form name="redirectAddForm" #redirectAddForm="ngForm" class="form-inline">
+      <div class="form-group d-inline-flex align-items-center">
+        <div class="input-group">
+          <span class="input-group-prepend">
+            <span class="input-group-text rounded-0 rounded-start">{{ 'From' | translate }}</span>
+          </span>
+          <input type="text" class="form-control" name="path1" [(ngModel)]="new_redirect.path1" />
+        </div>
+      </div>
+      <div class="form-group d-inline-flex align-items-center ms-2">
+        <span class="input-group">
+          <span class="input-group-prepend">
+            <span class="input-group-text rounded-0 rounded-start">{{ 'To' | translate }}</span>
+          </span>
+          <input type="text" class="form-control" name="path2" [(ngModel)]="new_redirect.path2" />
+        </span>
+      </div>
+      <button type="submit" id="add_redirect" class="btn btn-primary ms-2 mb-1" [disabled]="redirectAddForm.invalid" (click)="addRedirect()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{ 'Add' | translate }}</span>
+      </button>
+    </form>
+  </div>
 </div>
 <br />
 <div class="row">
-    <div class="col-md-12">
-        <table class="table">
-            <thead>
-            <tr>
-                <th>{{ 'From' | translate }}</th>
-                <th>{{ 'To' | translate }}</th>
-                <th></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let redirect of redirectData | orderBy:'path1'">
-                <td>{{redirectPath(redirect, 1)}}</td>
-                <td>{{redirectPath(redirect, 2)}}</td>
-                <td>
-                    <button class="btn btn-sm btn-danger" id="delete_redirect" (click)="deleteRedirect(redirect)">
-                        <i class="fa-solid fa-trash"></i>
-                        <span>{{ 'Delete' | translate }}</span>
-                    </button>
-                </td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
+  <div class="col-md-12">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>{{ 'From' | translate }}</th>
+          <th>{{ 'To' | translate }}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (redirect of redirectData | orderBy:'path1'; track redirect) {
+          <tr>
+            <td>{{redirectPath(redirect, 1)}}</td>
+            <td>{{redirectPath(redirect, 2)}}</td>
+            <td>
+              <button class="btn btn-sm btn-danger" id="delete_redirect" (click)="deleteRedirect(redirect)">
+                <i class="fa-solid fa-trash"></i>
+                <span>{{ 'Delete' | translate }}</span>
+              </button>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/network/url-redirects/url-redirects.component.ts b/client/app/src/pages/admin/network/url-redirects/url-redirects.component.ts
index 37e6e2d3a6..c6d814fa1a 100644
--- a/client/app/src/pages/admin/network/url-redirects/url-redirects.component.ts
+++ b/client/app/src/pages/admin/network/url-redirects/url-redirects.component.ts
@@ -1,21 +1,26 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {redirectResolverModel} from "@app/models/resolvers/redirect-resolver-model";
 import {HttpService} from "@app/shared/services/http.service";
+import { FormsModule } from "@angular/forms";
+
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-url-redirects",
-  templateUrl: "./url-redirects.component.html"
+    selector: "src-url-redirects",
+    templateUrl: "./url-redirects.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe, OrderByPipe]
 })
 export class UrlRedirectsComponent implements OnInit {
+  private httpService = inject(HttpService);
+
   redirectData: redirectResolverModel[];
   new_redirect = {
     path1: "",
     path2: ""
   };
 
-  constructor(private httpService: HttpService) {
-  }
-
   ngOnInit(): void {
     this.getResolver();
   }
diff --git a/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.html b/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.html
index b322840049..8a4a736721 100644
--- a/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.html
+++ b/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.html
@@ -1,102 +1,108 @@
 <div id="UserWarnings">
-    <div class="alert alert-secondary" *ngIf="notificationResolver.dataModel.smtp_server === 'mail.globaleaks.org'">
-        <i class="fa-solid fa-exclamation-circle"></i>
-        <span>{{ 'Default mail configuration in use. Please consider using a private mail server.' | translate }}</span>
+  @if (notificationResolver.dataModel.smtp_server === 'mail.globaleaks.org') {
+    <div class="alert alert-secondary">
+      <i class="fa-solid fa-exclamation-circle"></i>
+      <span>{{ 'Default mail configuration in use. Please consider using a private mail server.' | translate }}</span>
     </div>
+  }
 </div>
 <div class="row">
-    <div class="col-md-12">
-        <div class="form-group">
-            <label>{{ 'SMTP email address' | translate }}</label>
-            <input class="form-control" name="source_email" #source_email="ngModel" [(ngModel)]="notificationResolver.dataModel.smtp_source_email" [pattern]="Constants.emailRegexp" type="text" />
-        </div>
-        <div class="text-danger" *ngIf="source_email?.errors?.['pattern']">
-            <span>{{ 'Invalid email address' | translate }}</span>
-        </div>
-        <div class="form-group">
-            <label>{{ 'SMTP server address' | translate }}</label>
-            <input class="form-control" name="notification.dataModel.smtp_server" [(ngModel)]="notificationResolver.dataModel.smtp_server" type="text" />
-        </div>
-        <div class="form-group">
-            <label>{{ 'SMTP server port' | translate }}</label>
-            <input class="form-control" name="notification.dataModel.smtp_port" [(ngModel)]="notificationResolver.dataModel.smtp_port" type="number" />
-        </div>
-        <div class="form-group">
-            <label>{{ 'Security' | translate }}</label>
-            <select class="form-select-custom" name="notification.dataModel.smtp_security" [(ngModel)]="notificationResolver.dataModel.smtp_security">
-                <option value="PLAIN">PLAIN</option>
-                <option value="SSL">SMTPS</option>
-                <option value="TLS">SMTP/TLS</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <input class="form-check-input" name="notification.dataModel.smtp_authentication" [(ngModel)]="notificationResolver.dataModel.smtp_authentication" type="checkbox">
-            <label>{{ 'Require authentication' | translate }}</label>
-        </div>
-        <div *ngIf="notificationResolver.dataModel.smtp_authentication">
-            <div class="form-group">
-                <label>{{ 'Username' | translate }}</label>
-                <input class="form-control" name="notification.dataModel.smtp_username" [(ngModel)]="notificationResolver.dataModel.smtp_username" type="text" />
-            </div>
-            <div class="form-group">
-                <label>{{ 'Password' | translate }}</label>
-                <input class="form-control" name="notification.dataModel.smtp_password" [(ngModel)]="notificationResolver.dataModel.smtp_password" type="password" placeholder="*****************" />
-            </div>
-        </div>
-        <div class="form-group">
-            <label>{{ 'Notifications' | translate }}</label>
-        </div>
-        <table class="table table-bordered">
-            <thead>
-              <th>{{ 'Role' | translate }}</th>
-              <th>{{ 'Enabled' | translate }}</th>
-            </thead>
-            <tbody>
-              <tr>
-                <td>{{ 'Admin' | translate }}</td>
-                <td>
-                  <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_admin_notification_emails" type="checkbox">
-                </td>
-              </tr>
-              <tr>
-                <td>{{ 'Analyst' | translate }}</td>
-                <td>
-                  <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_analyst_notification_emails" type="checkbox">
-                </td>
-              </tr>
-              <tr>
-                <td>{{ 'Custodian' | translate }}</td>
-                <td>
-                  <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_custodian_notification_emails" type="checkbox">
-                </td>
-              </tr>
-              <tr>
-                <td>{{ 'Recipient' | translate }}</td>
-                <td>
-                  <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_receiver_notification_emails" type="checkbox">
-                </td>
-              </tr>
-            </tbody>
-        </table>
+  <div class="col-md-12">
+    <div class="form-group">
+      <label>{{ 'SMTP email address' | translate }}</label>
+      <input class="form-control" name="source_email" #source_email="ngModel" [(ngModel)]="notificationResolver.dataModel.smtp_source_email" [pattern]="Constants.emailRegexp" type="text" />
+    </div>
+    @if (source_email?.errors?.['pattern']) {
+      <div class="text-danger">
+        <span>{{ 'Invalid email address' | translate }}</span>
+      </div>
+    }
+    <div class="form-group">
+      <label>{{ 'SMTP server address' | translate }}</label>
+      <input class="form-control" name="notification.dataModel.smtp_server" [(ngModel)]="notificationResolver.dataModel.smtp_server" type="text" />
+    </div>
+    <div class="form-group">
+      <label>{{ 'SMTP server port' | translate }}</label>
+      <input class="form-control" name="notification.dataModel.smtp_port" [(ngModel)]="notificationResolver.dataModel.smtp_port" type="number" />
+    </div>
+    <div class="form-group">
+      <label>{{ 'Security' | translate }}</label>
+      <select class="form-select-custom" name="notification.dataModel.smtp_security" [(ngModel)]="notificationResolver.dataModel.smtp_security">
+        <option value="PLAIN">PLAIN</option>
+        <option value="SSL">SMTPS</option>
+        <option value="TLS">SMTP/TLS</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <input class="form-check-input" name="notification.dataModel.smtp_authentication" [(ngModel)]="notificationResolver.dataModel.smtp_authentication" type="checkbox">
+      <label>{{ 'Require authentication' | translate }}</label>
+    </div>
+    @if (notificationResolver.dataModel.smtp_authentication) {
+      <div>
         <div class="form-group">
-            <label>{{ 'Number of hours before sending a report expiration alert' | translate }}</label>
-            <input class="form-control" name="notification.dataModel.tip_expiration_threshold" [(ngModel)]="notificationResolver.dataModel.tip_expiration_threshold" type="number" />
+          <label>{{ 'Username' | translate }}</label>
+          <input class="form-control" name="notification.dataModel.smtp_username" [(ngModel)]="notificationResolver.dataModel.smtp_username" type="text" />
         </div>
         <div class="form-group">
-            <button class="btn btn-primary" [disabled]="notificationForm.invalid" (click)="updateNotification(notificationResolver.dataModel)" type="submit">
-                <i class="fa-solid fa-check"></i>
-                <span id="save_notification">{{ 'Save' | translate }}</span>
-            </button>
-            <button title="{{'Send a test email to your email address.' | translate}}" (click)="updateThenTestMail(notificationResolver.dataModel)" class="btn btn-primary">
-                <i class="fa-solid fa-envelope"></i>
-                <span>{{ 'Test the configuration' | translate }}</span>
-            </button>
-            <button (click)="resetSMTPSettings()" class="btn btn-primary">
-                <span>{{ 'Reset SMTP configuration' | translate }}</span>
-            </button>
-            <button (click)="resetTemplates()" class="btn btn-primary">
-                <span>{{ 'Reset notification templates to default' | translate }}</span>
-            </button>
+          <label>{{ 'Password' | translate }}</label>
+          <input class="form-control" name="notification.dataModel.smtp_password" [(ngModel)]="notificationResolver.dataModel.smtp_password" type="password" placeholder="*****************" />
         </div>
+      </div>
+    }
+    <div class="form-group">
+      <label>{{ 'Notifications' | translate }}</label>
+    </div>
+    <table class="table table-bordered">
+      <thead>
+        <th>{{ 'Role' | translate }}</th>
+        <th>{{ 'Enabled' | translate }}</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ 'Admin' | translate }}</td>
+          <td>
+            <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_admin_notification_emails" type="checkbox">
+          </td>
+        </tr>
+        <tr>
+          <td>{{ 'Analyst' | translate }}</td>
+          <td>
+            <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_analyst_notification_emails" type="checkbox">
+          </td>
+        </tr>
+        <tr>
+          <td>{{ 'Custodian' | translate }}</td>
+          <td>
+            <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_custodian_notification_emails" type="checkbox">
+          </td>
+        </tr>
+        <tr>
+          <td>{{ 'Recipient' | translate }}</td>
+          <td>
+            <input class="form-check-input" [(ngModel)]="notificationResolver.dataModel.enable_receiver_notification_emails" type="checkbox">
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="form-group">
+      <label>{{ 'Number of hours before sending a report expiration alert' | translate }}</label>
+      <input class="form-control" name="notification.dataModel.tip_expiration_threshold" [(ngModel)]="notificationResolver.dataModel.tip_expiration_threshold" type="number" />
+    </div>
+    <div class="form-group">
+      <button class="btn btn-primary" [disabled]="notificationForm.invalid" (click)="updateNotification(notificationResolver.dataModel)" type="submit">
+        <i class="fa-solid fa-check"></i>
+        <span id="save_notification">{{ 'Save' | translate }}</span>
+      </button>
+      <button data-toggle="tooltip" title="{{'Send a test email to your email address.' | translate}}" (click)="updateThenTestMail(notificationResolver.dataModel)" class="btn btn-primary">
+        <i class="fa-solid fa-envelope"></i>
+        <span>{{ 'Test the configuration' | translate }}</span>
+      </button>
+      <button (click)="resetSMTPSettings()" class="btn btn-primary">
+        <span>{{ 'Reset SMTP configuration' | translate }}</span>
+      </button>
+      <button (click)="resetTemplates()" class="btn btn-primary">
+        <span>{{ 'Reset notification templates to default' | translate }}</span>
+      </button>
     </div>
+  </div>
 </div>
diff --git a/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.ts b/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.ts
index a74f14cc27..a1c5806314 100644
--- a/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.ts
+++ b/client/app/src/pages/admin/notifications/notification-tab1/notification-tab1.component.ts
@@ -1,5 +1,5 @@
-import {Component, Input} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, Input, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {notificationResolverModel} from "@app/models/resolvers/notification-resolver-model";
 import {Constants} from "@app/shared/constants/constants";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
@@ -7,17 +7,22 @@ import {NotificationsResolver} from "@app/shared/resolvers/notifications.resolve
 import {UtilsService} from "@app/shared/services/utils.service";
 import {switchMap} from "rxjs";
 
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-notification-tab1",
-  templateUrl: "./notification-tab1.component.html"
+    selector: "src-notification-tab1",
+    templateUrl: "./notification-tab1.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe]
 })
 export class NotificationTab1Component {
+  protected nodeResolver = inject(NodeResolver);
+  protected notificationResolver = inject(NotificationsResolver);
+  private utilsService = inject(UtilsService);
+
   @Input() notificationForm: NgForm;
   protected readonly Constants = Constants;
 
-  constructor(protected nodeResolver: NodeResolver, protected notificationResolver: NotificationsResolver, private utilsService: UtilsService) {
-  }
-
   updateNotification(notification: notificationResolverModel) {
     this.utilsService.updateAdminNotification(notification).subscribe(_ => {
       this.utilsService.reloadComponent();
diff --git a/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.html b/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.html
index 5b6407c1ea..c6961268ec 100644
--- a/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.html
+++ b/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.html
@@ -1,25 +1,29 @@
 <div class="row">
-    <div class="col-md-12">
-        <div class="form-group">
-            <label>{{ 'Template' | translate }}</label>
-            <select name="template" class="form-select-custom" [(ngModel)]="template">
-                <option *ngFor="let t of notificationData.templates" [value]="t">{{ t }}</option>
-            </select>
-        </div>
-        <br />
-        <br />
-        <div class="row" *ngIf="template">
-            <div class="col-md-12">
-                <div class="form-group">
-                    <textarea name="notificationData[template]" [(ngModel)]="notificationData[template]" class="form-control" rows="10"></textarea>
-                </div>
-                <div class="form-group">
-                    <button class="btn btn-primary" [disabled]="notificationForm.invalid" (click)="updateNotification(notificationData)" type="submit">
-                        <i class="fa-solid fa-check"></i>
-                        <span>{{ 'Save' | translate }}</span>
-                    </button>
-                </div>
-            </div>
-        </div>
+  <div class="col-md-12">
+    <div class="form-group">
+      <label>{{ 'Template' | translate }}</label>
+      <select name="template" class="form-select-custom" [(ngModel)]="template">
+        @for (t of notificationData.templates; track t) {
+          <option [value]="t">{{ t }}</option>
+        }
+      </select>
     </div>
+    <br />
+    <br />
+    @if (template) {
+      <div class="row">
+        <div class="col-md-12">
+          <div class="form-group">
+            <textarea name="notificationData[template]" [(ngModel)]="notificationData[template]" class="form-control" rows="10"></textarea>
+          </div>
+          <div class="form-group">
+            <button class="btn btn-primary" [disabled]="notificationForm.invalid" (click)="updateNotification(notificationData)" type="submit">
+              <i class="fa-solid fa-check"></i>
+              <span>{{ 'Save' | translate }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.ts b/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.ts
index 00a2b6449a..b7b617cdaf 100644
--- a/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.ts
+++ b/client/app/src/pages/admin/notifications/notification-tab2/notification-tab2.component.ts
@@ -1,21 +1,25 @@
-import {Component, Input, OnInit} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, Input, OnInit, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {notificationResolverModel} from "@app/models/resolvers/notification-resolver-model";
 import {NotificationsResolver} from "@app/shared/resolvers/notifications.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
 
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-notification-tab2",
-  templateUrl: "./notification-tab2.component.html"
+    selector: "src-notification-tab2",
+    templateUrl: "./notification-tab2.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe]
 })
 export class NotificationTab2Component implements OnInit {
+  private notificationResolver = inject(NotificationsResolver);
+  private utilsService = inject(UtilsService);
+
   @Input() notificationForm: NgForm;
   template: string;
   notificationData: notificationResolverModel;
 
-  constructor(private notificationResolver: NotificationsResolver, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     this.notificationData = this.notificationResolver.dataModel;
   }
diff --git a/client/app/src/pages/admin/notifications/notifications-routing.module.ts b/client/app/src/pages/admin/notifications/notifications-routing.module.ts
deleted file mode 100644
index c1ded70e7d..0000000000
--- a/client/app/src/pages/admin/notifications/notifications-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {NotificationsComponent} from "@app/pages/admin/notifications/notifications.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: NotificationsComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class NotificationsRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/notifications/notifications.component.html b/client/app/src/pages/admin/notifications/notifications.component.html
index 661d337e62..b6a248c946 100644
--- a/client/app/src/pages/admin/notifications/notifications.component.html
+++ b/client/app/src/pages/admin/notifications/notifications.component.html
@@ -1,19 +1,19 @@
 <form name="notificationForm" #notificationForm="ngForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-notification-tab1 [notificationForm]="notificationForm"></src-notification-tab1>
-    </ng-template>
-    <ng-template #tab2>
-        <src-notification-tab2 [notificationForm]="notificationForm"></src-notification-tab2>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-notification-tab1 [notificationForm]="notificationForm"></src-notification-tab1>
+  </ng-template>
+  <ng-template #tab2>
+    <src-notification-tab2 [notificationForm]="notificationForm"></src-notification-tab2>
+  </ng-template>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/notifications/notifications.component.ts b/client/app/src/pages/admin/notifications/notifications.component.ts
index 3299adfd85..4e2e4fa5df 100644
--- a/client/app/src/pages/admin/notifications/notifications.component.ts
+++ b/client/app/src/pages/admin/notifications/notifications.component.ts
@@ -1,14 +1,23 @@
-import {Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
+import { Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef, inject } from "@angular/core";
 import {Tab} from "@app/models/component-model/tab";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {NotificationTab1Component} from "@app/pages/admin/notifications/notification-tab1/notification-tab1.component";
 import {NotificationTab2Component} from "@app/pages/admin/notifications/notification-tab2/notification-tab2.component";
+import { FormsModule } from "@angular/forms";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-notifications",
-  templateUrl: "./notifications.component.html"
+    selector: "src-notifications",
+    templateUrl: "./notifications.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, NotificationTab1Component, NotificationTab2Component, TranslatorPipe]
 })
 export class NotificationsComponent implements AfterViewInit {
+  protected node = inject(NodeResolver);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<NotificationTab1Component>;
   @ViewChild("tab2") tab2!: TemplateRef<NotificationTab2Component>;
 
@@ -16,9 +25,6 @@ export class NotificationsComponent implements AfterViewInit {
   nodeData: NodeResolver;
   active: string;
 
-  constructor(protected node: NodeResolver, private cdr: ChangeDetectorRef) {
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "Settings";
diff --git a/client/app/src/pages/admin/notifications/notifications.module.ts b/client/app/src/pages/admin/notifications/notifications.module.ts
deleted file mode 100644
index 5540216db2..0000000000
--- a/client/app/src/pages/admin/notifications/notifications.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {NotificationsRoutingModule} from "@app/pages/admin/notifications/notifications-routing.module";
-import {NotificationsComponent} from "@app/pages/admin/notifications/notifications.component";
-import {FormsModule} from "@angular/forms";
-import {RouterModule} from "@angular/router";
-import {NgbNavModule, NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {SharedModule} from "@app/shared.module";
-import {NotificationTab1Component} from "@app/pages/admin/notifications/notification-tab1/notification-tab1.component";
-import {NotificationTab2Component} from "@app/pages/admin/notifications/notification-tab2/notification-tab2.component";
-
-
-@NgModule({
-  declarations: [
-    NotificationsComponent,
-    NotificationTab1Component,
-    NotificationTab2Component
-  ],
-  imports: [
-    CommonModule,
-    NotificationsRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule,
-  ]
-})
-export class NotificationsModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.html b/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.html
index d19d9ad2a5..22b53df343 100644
--- a/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.html
+++ b/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.html
@@ -1,17 +1,21 @@
 <form class="add-field-from-template" #newField="ngForm">
-    <div class="form-group">
-        <label>{{ 'Type' | translate }}</label>
-        <select name="template_id" class="form-select-custom" [(ngModel)]="new_field.template_id" required>
-            <option *ngFor="let f of fieldTemplatesData" [value]="f.id">{{ f.label | translate }}</option>
-        </select>
-        <div class="text-danger" *ngIf="newField.form.get('template_id')?.errors?.['required']">
-            <span>{{ 'This field is mandatory' | translate }}</span>
-        </div>
-    </div>
-    <div class="form-group">
-        <button id="add-field-btn" class="btn btn-primary" (click)="addFieldFromTemplate()" [disabled]="newField.invalid" type="button">
-            <i class="fa-solid fa-plus"></i>
-            <span>{{ 'Add' | translate }}</span>
-        </button>
-    </div>
+  <div class="form-group">
+    <label>{{ 'Type' | translate }}</label>
+    <select name="template_id" class="form-select-custom" [(ngModel)]="new_field.template_id" required>
+      @for (f of fieldTemplatesData; track f) {
+        <option [value]="f.id">{{ f.label | translate }}</option>
+      }
+    </select>
+    @if (newField.form.get('template_id')?.errors?.['required']) {
+      <div class="text-danger">
+        <span>{{ 'This field is mandatory' | translate }}</span>
+      </div>
+    }
+  </div>
+  <div class="form-group">
+    <button id="add-field-btn" class="btn btn-primary" (click)="addFieldFromTemplate()" [disabled]="newField.invalid" type="button">
+      <i class="fa-solid fa-plus"></i>
+      <span>{{ 'Add' | translate }}</span>
+    </button>
+  </div>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.ts b/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.ts
index 162c52c316..81ac232e88 100644
--- a/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.ts
+++ b/client/app/src/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component.ts
@@ -1,16 +1,26 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NewField} from "@app/models/admin/new-field";
 import {QuestionnaireService} from "@app/pages/admin/questionnaires/questionnaire.service";
 import {Step} from "@app/models/resolvers/questionnaire-model";
 import {Field, fieldtemplatesResolverModel} from "@app/models/resolvers/field-template-model";
+import { FormsModule } from "@angular/forms";
+
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-add-field-from-template",
-  templateUrl: "./add-field-from-template.component.html"
+    selector: "src-add-field-from-template",
+    templateUrl: "./add-field-from-template.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe, TranslateModule]
 })
 export class AddFieldFromTemplateComponent implements OnInit {
+  private questionnaireService = inject(QuestionnaireService);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+
   @Input() fieldTemplatesData: fieldtemplatesResolverModel[];
   @Input() step: Step;
   @Input() type: string;
@@ -19,9 +29,6 @@ export class AddFieldFromTemplateComponent implements OnInit {
   fields: Step[] | Field[];
   new_field: { template_id: string } = {template_id: ""};
 
-  constructor(private questionnaireService: QuestionnaireService, private httpService: HttpService, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     if (this.step) {
       this.fields = this.step.children;
diff --git a/client/app/src/pages/admin/questionnaires/add-field/add-field.component.html b/client/app/src/pages/admin/questionnaires/add-field/add-field.component.html
index 6146b853f7..ab52d83e7d 100644
--- a/client/app/src/pages/admin/questionnaires/add-field/add-field.component.html
+++ b/client/app/src/pages/admin/questionnaires/add-field/add-field.component.html
@@ -1,34 +1,38 @@
 <form class="add-field" #newField="ngForm">
-    <div class="form-group">
-        <label>{{ 'Question' | translate }}</label>
-        <input name="new_field.label" class="form-control" [(ngModel)]="new_field.label" type="text" required>
-        <div class="text-danger" *ngIf="newField.form.get('label')?.errors?.['required']">
-            <span>{{ 'This field is mandatory' | translate }}</span>
-        </div>
-    </div>
-    <div class="form-group">
-        <label>{{ 'Type' | translate }}</label>
-        <select name="new_field.type" class="form-select-custom" [(ngModel)]="new_field.type" required>
-            <option value="inputbox">{{ 'Single-line text input' | translate }}</option>
-            <option value="textarea">{{ 'Multi-line text input' | translate }}</option>
-            <option value="selectbox">{{ 'Selection box' | translate }}</option>
-            <option value="multichoice">{{ 'Multiple choice input' | translate }}</option>
-            <option value="checkbox">{{ 'Checkbox' | translate }}</option>
-            <option value="fileupload">{{ 'Attachment' | translate }}</option>
-            <option value="tos">{{ 'Terms of service' | translate }}</option>
-            <option value="date">{{ 'Date' | translate }}</option>
-            <option value="daterange">{{ 'Date range' | translate }}</option>
-            <option value="voice">{{ 'Voice' | translate }}</option>
-            <option value="fieldgroup">{{ 'Group of questions' | translate }}</option>
-        </select>
-        <div class="text-danger" *ngIf="newField.form.get('type')?.errors?.['required']">
-            <span>{{ 'This field is mandatory' | translate }}</span>
-        </div>
-    </div>
-    <div class="form-group">
-        <button id="add-field-btn" class="btn btn-primary" [disabled]="newField.invalid" (click)="addField()">
-            <i class="fa-solid fa-plus"></i>
-            <span>{{ 'Add' | translate }}</span>
-        </button>
-    </div>
+  <div class="form-group">
+    <label>{{ 'Question' | translate }}</label>
+    <input name="new_field.label" class="form-control" [(ngModel)]="new_field.label" type="text" required>
+    @if (newField.form.get('label')?.errors?.['required']) {
+      <div class="text-danger">
+        <span>{{ 'This field is mandatory' | translate }}</span>
+      </div>
+    }
+  </div>
+  <div class="form-group">
+    <label>{{ 'Type' | translate }}</label>
+    <select name="new_field.type" class="form-select-custom" [(ngModel)]="new_field.type" required>
+      <option value="inputbox">{{ 'Single-line text input' | translate }}</option>
+      <option value="textarea">{{ 'Multi-line text input' | translate }}</option>
+      <option value="selectbox">{{ 'Selection box' | translate }}</option>
+      <option value="multichoice">{{ 'Multiple choice input' | translate }}</option>
+      <option value="checkbox">{{ 'Checkbox' | translate }}</option>
+      <option value="fileupload">{{ 'Attachment' | translate }}</option>
+      <option value="tos">{{ 'Terms of service' | translate }}</option>
+      <option value="date">{{ 'Date' | translate }}</option>
+      <option value="daterange">{{ 'Date range' | translate }}</option>
+      <option value="voice">{{ 'Voice' | translate }}</option>
+      <option value="fieldgroup">{{ 'Group of questions' | translate }}</option>
+    </select>
+    @if (newField.form.get('type')?.errors?.['required']) {
+      <div class="text-danger">
+        <span>{{ 'This field is mandatory' | translate }}</span>
+      </div>
+    }
+  </div>
+  <div class="form-group">
+    <button id="add-field-btn" class="btn btn-primary" [disabled]="newField.invalid" (click)="addField()">
+      <i class="fa-solid fa-plus"></i>
+      <span>{{ 'Add' | translate }}</span>
+    </button>
+  </div>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/add-field/add-field.component.ts b/client/app/src/pages/admin/questionnaires/add-field/add-field.component.ts
index 8b31bb0ea1..fce1ad2a8a 100644
--- a/client/app/src/pages/admin/questionnaires/add-field/add-field.component.ts
+++ b/client/app/src/pages/admin/questionnaires/add-field/add-field.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NewField} from "@app/models/admin/new-field";
@@ -6,21 +6,28 @@ import {FieldTemplate} from "@app/models/admin/field-Template";
 import {QuestionnaireService} from "@app/pages/admin/questionnaires/questionnaire.service";
 import {Step} from "@app/models/resolvers/questionnaire-model";
 import {Field} from "@app/models/resolvers/field-template-model";
+import { FormsModule } from "@angular/forms";
+
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-add-field",
-  templateUrl: "./add-field.component.html"
+    selector: "src-add-field",
+    templateUrl: "./add-field.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe, TranslateModule]
 })
 export class AddFieldComponent implements OnInit {
+  private questionnaireService = inject(QuestionnaireService);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+
   @Output() dataToParent = new EventEmitter<string>();
   @Input() step: Step;
   @Input() type: string;
   new_field: { label: string, type: string } = {label: "", type: ""};
   fields: Step[] | Field[];
 
-  constructor(private questionnaireService: QuestionnaireService, private httpService: HttpService, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     if (this.step) {
       this.fields = this.step.children;
diff --git a/client/app/src/pages/admin/questionnaires/fields/fields.component.html b/client/app/src/pages/admin/questionnaires/fields/fields.component.html
index 6c5c9d553b..f9ce4379d9 100644
--- a/client/app/src/pages/admin/questionnaires/fields/fields.component.html
+++ b/client/app/src/pages/admin/questionnaires/fields/fields.component.html
@@ -1,433 +1,594 @@
 <div class="config-item">
     <div class="editorHeader">
-        <div class="row" (click)="field.editable && toggleEditing(); $event.stopPropagation();">
-            <div class="col-md-6">
-                <span>{{ field.label }}</span>
-                <span class="fieldIndex badge bg-secondary" *ngIf="field.step_id || field.fieldgroup_id">
-                    <span>{{ 'Row' | translate }}: {{ field.y }}</span>
-                    <span>{{ 'Column' | translate }}: {{ field.x }}</span>
-                    <span>{{ 'Width' | translate }}: {{ field.width }}</span>
-                </span>
-                <span class="fieldType badge bg-primary">
-                    <span>{{ 'Type' | translate }}:</span>
-                    <ng-container [ngSwitch]="field.type" *ngIf="!field.template_id">
-                        <span *ngSwitchCase="'inputbox'">{{ 'Single-line text input' | translate }}</span>
-                        <span *ngSwitchCase="'textarea'">{{ 'Multi-line text input' | translate }}</span>
-                        <span *ngSwitchCase="'selectbox'">{{ 'Selection box' | translate }}</span>
-                        <span *ngSwitchCase="'multichoice'">{{ 'Multiple choice input' | translate }}</span>
-                        <span *ngSwitchCase="'checkbox'">{{ 'Checkbox' | translate }}</span>
-                        <span *ngSwitchCase="'fileupload'">{{ 'Attachment' | translate }}</span>
-                        <span *ngSwitchCase="'tos'">{{ 'Terms of service' | translate }}</span>
-                        <span *ngSwitchCase="'date'">{{ 'Date' | translate }}</span>
-                        <span *ngSwitchCase="'daterange'">{{ 'Date range' | translate }}</span>
-                        <span *ngSwitchCase="'voice'">{{ 'Voice' | translate }}</span>
-                        <span *ngSwitchCase="'fieldgroup'">{{ 'Question group' | translate }}</span>
-                        <span *ngSwitchDefault>{{ field.type }}</span>
-                    </ng-container>
-                    <span *ngIf="field.template_id">{{ 'Template' | translate }}</span>
-                </span>
-                <span *ngIf="field.multi_entry" class="badge bg-default text-dark">
-                    <ng-container [ngSwitch]="field.type">
-                        <span *ngSwitchCase="'fileupload'" title="{{'Accept multiple file uploads' | translate}}">
-                            <i class="fa-solid fa-option-horizontal"></i>
-                        </span>
-                        <span *ngSwitchDefault title="{{'Accept multiple answers for the field' | translate}}">
-                            <i class="fa-solid fa-option-horizontal"></i>
-                        </span>
-                    </ng-container>
-                </span>
-                <span *ngIf="field.required" class="badge bg-danger">
-                    <span title="{{'Mandatory' | translate}}">
-                        <i class="fa-solid fa-asterisk"></i>
-                    </span>
-                </span>
-            </div>
-            <span class="col-md-6 clearfix" *ngIf="field.editable">
-                <span class="float-end">
-                    <button class="btn btn-sm btn-outline-secondary" *ngIf="!editing" (click)="toggleEditing(); $event.stopPropagation();">
-                        <span>{{ 'Edit' | translate }}</span>
-                    </button>
-                    <button name="save_field" class="btn btn-sm btn-primary" *ngIf="editing" (click)="saveField(field,editing)">
-                        <span>{{ 'Save' | translate }}</span>
-                    </button>
-                    <button class="btn btn-sm btn-outline-secondary" *ngIf="editing" (click)="toggleEditing(); $event.stopPropagation();">
-                        <span>{{ 'Cancel' | translate }}</span>
-                    </button>
-                    <button class="downloadButton btn btn-sm btn-outline-secondary" (click)="exportQuestion(field); $event.stopPropagation()">
-                        <i class="fa-solid fa-file-export"></i>
-                        <span>{{ 'Export' | translate }}</span>
-                    </button>
-                    <button class="btn btn-sm btn-danger" *ngIf="field.editable" (click)="delField(field); $event.stopPropagation();">
-                        <span>{{ 'Delete' | translate }}</span>
-                    </button>
-                    <span *ngIf="field.step_id || field.fieldgroup_id">
-                        <button class="btn btn-sm btn-primary" (click)="moveLeftAndSave(field); $event.stopPropagation();" title="{{'Move left' | translate}}">
-                            <i class="fa-solid fa-chevron-left"></i>
-                        </button>
-                        <button class="btn btn-sm btn-primary" (click)="moveRightAndSave(field); $event.stopPropagation();" title="{{'Move right' | translate}}">
-                            <i class="fa-solid fa-chevron-right"></i>
-                        </button>
-                        <button class="btn btn-sm btn-primary" (click)="moveUpAndSave(field); $event.stopPropagation();" title="{{'Move up' | translate}}">
-                            <i class="fa-solid fa-chevron-up"></i>
-                        </button>
-                        <button class="btn btn-sm btn-primary" (click)="moveDownAndSave(field); $event.stopPropagation();" title="{{'Move down' | translate}}">
-                            <i class="fa-solid fa-chevron-down"></i>
-                        </button>
-                    </span>
-                </span>
+      <div class="row" (click)="field.editable && toggleEditing(); $event.stopPropagation();">
+        <div class="col-md-6">
+          <span>{{ field.label }}</span>
+          @if (field.step_id || field.fieldgroup_id) {
+            <span class="fieldIndex badge bg-secondary">
+              <span>{{ 'Row' | translate }}: {{ field.y }}</span>
+              <span>{{ 'Column' | translate }}: {{ field.x }}</span>
+              <span>{{ 'Width' | translate }}: {{ field.width }}</span>
             </span>
+          }
+          <span class="fieldType badge bg-primary">
+            <span>{{ 'Type' | translate }}:</span>
+            @if (!field.template_id) {
+              @switch (field.type) {
+                @case ('inputbox') {
+                  <span>{{ 'Single-line text input' | translate }}</span>
+                }
+                @case ('textarea') {
+                  <span>{{ 'Multi-line text input' | translate }}</span>
+                }
+                @case ('selectbox') {
+                  <span>{{ 'Selection box' | translate }}</span>
+                }
+                @case ('multichoice') {
+                  <span>{{ 'Multiple choice input' | translate }}</span>
+                }
+                @case ('checkbox') {
+                  <span>{{ 'Checkbox' | translate }}</span>
+                }
+                @case ('fileupload') {
+                  <span>{{ 'Attachment' | translate }}</span>
+                }
+                @case ('tos') {
+                  <span>{{ 'Terms of service' | translate }}</span>
+                }
+                @case ('date') {
+                  <span>{{ 'Date' | translate }}</span>
+                }
+                @case ('daterange') {
+                  <span>{{ 'Date range' | translate }}</span>
+                }
+                @case ('voice') {
+                  <span>{{ 'Voice' | translate }}</span>
+                }
+                @case ('fieldgroup') {
+                  <span>{{ 'Question group' | translate }}</span>
+                }
+                @default {
+                  <span>{{ field.type }}</span>
+                }
+              }
+            }
+            @if (field.template_id) {
+              <span>{{ 'Template' | translate }}</span>
+            }
+          </span>
+          @if (field.multi_entry) {
+            <span class="badge bg-default text-dark">
+              @switch (field.type) {
+                @case ('fileupload') {
+                  <span data-toggle="tooltip" title="{{'Accept multiple file uploads' | translate}}">
+                    <i class="fa-solid fa-option-horizontal"></i>
+                  </span>
+                }
+                @default {
+                  <span data-toggle="tooltip" title="{{'Accept multiple answers for the field' | translate}}">
+                    <i class="fa-solid fa-option-horizontal"></i>
+                  </span>
+                }
+              }
+            </span>
+          }
+          @if (field.required) {
+            <span class="badge bg-danger">
+              <span data-toggle="tooltip" title="{{'Mandatory' | translate}}">
+                <i class="fa-solid fa-asterisk"></i>
+              </span>
+            </span>
+          }
         </div>
-        <div class="fieldEditor" *ngIf="editing">
-            <hr />
-            <div class="row">
-                <div class="col-md-12" *ngIf="field.editable">
-                    <div class="form-group" *ngIf="field.instance !== 'reference'">
-                        <label>{{ 'Name' | translate }}</label>
-                        <input name="label" class="form-control" [(ngModel)]="field.label" type="text" required />
-                        <div class="text-danger" *ngIf="editField.form.get('label')?.errors?.['required']">
-                            <span>{{ 'This field is mandatory' | translate }}</span>
-                        </div>
-                    </div>
-                    <div class="form-group" *ngIf="field.instance !== 'reference' && (field.type === 'inputbox' || field.type === 'textarea')">
-                        <label>
-                            <span>{{ 'Type' | translate }}</span>
-                            <span>:</span>
-                        </label>
-                        <select name="type" class="form-select-custom" [(ngModel)]="field.type" required>
-                            <option value="inputbox">{{ 'Single-line text input' | translate }}</option>
-                            <option value="textarea">{{ 'Multi-line text input' | translate }}</option>
-                        </select>
-                    </div>
-                    <div class="form-group" *ngIf="field.instance !== 'reference' && (field.type === 'selectbox' || field.type === 'checkbox' || field.type === 'multichoice')">
-                        <label>
-                            <span>{{ 'Type' | translate }}</span>
-                            <span>:</span>
-                        </label>
-                        <select name="type" class="form-select-custom" [(ngModel)]="field.type" required>
-                            <option value="selectbox">{{ 'Selection box' | translate }}</option>
-                            <option value="multichoice">{{ 'Multiple choice input' | translate }}</option>
-                            <option value="checkbox">{{ 'Checkbox' | translate }}</option>
-                        </select>
-                    </div>
-                    <div class="form-group" *ngIf="field.instance !== 'reference'">
-                        <label>{{ 'Hint' | translate }}</label>
-                        <input name="hint" class="form-control" [(ngModel)]="field.hint" type="text">
-                    </div>
-                    <div class="form-group" *ngIf="field.instance !== 'reference'">
-                        <label>{{ 'Description' | translate }}</label>
-                        <textarea name="description" class="form-control" [(ngModel)]="field.description"></textarea>
-                    </div>
-                    <div class="form-group" *ngIf="field.instance !== 'reference' && (field.type === 'inputbox' || field.type === 'textarea')">
-                        <label>{{ 'Placeholder' | translate }}</label>
-                        <input name="hint" class="form-control" [(ngModel)]="field.placeholder" type="text">
-                    </div>
-                    <div class="form-group" *ngIf="field.type !== 'fieldgroup'">
-                        <input class="form-check-input" name="field.required" [(ngModel)]="field.required" type="checkbox">
-                        <label>{{ 'Mandatory' | translate }}</label>
-                    </div>
-                    <div class="form-group" *ngIf="(field.type === 'fieldgroup' || field.type === 'fileupload') && field.template_id === ''">
-                        <div [ngSwitch]="typeSwitch(field.type)">
-                            <input class="form-check-input" [(ngModel)]="field.multi_entry" type="checkbox">
-                            <label *ngSwitchCase="'fileupload'">{{ 'Accept multiple file uploads' | translate }}</label>
-                            <label *ngSwitchDefault>{{ 'Accept multiple answers' | translate }}</label>
-                        </div>
-                    </div>
-                    <div class="form-group" *ngIf="fieldIsMarkableSubjectToPreview">
-                        <input class="form-check-input" [(ngModel)]="field.preview" type="checkbox">
-                        <label>{{ 'Preview' | translate }}</label>
+        @if (field.editable) {
+          <span class="col-md-6 clearfix">
+            <span class="float-end">
+              @if (!editing) {
+                <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(); $event.stopPropagation();">
+                  <span>{{ 'Edit' | translate }}</span>
+                </button>
+              }
+              @if (editing) {
+                <button name="save_field" class="btn btn-sm btn-primary" (click)="saveField(field,editing)">
+                  <span>{{ 'Save' | translate }}</span>
+                </button>
+              }
+              @if (editing) {
+                <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(); $event.stopPropagation();">
+                  <span>{{ 'Cancel' | translate }}</span>
+                </button>
+              }
+              <button class="downloadButton btn btn-sm btn-outline-secondary" (click)="exportQuestion(field); $event.stopPropagation()">
+                <i class="fa-solid fa-file-export"></i>
+                <span>{{ 'Export' | translate }}</span>
+              </button>
+              @if (field.editable) {
+                <button class="btn btn-sm btn-danger" (click)="delField(field); $event.stopPropagation();">
+                  <span>{{ 'Delete' | translate }}</span>
+                </button>
+              }
+              @if (field.step_id || field.fieldgroup_id) {
+                <span>
+                  <button class="btn btn-sm btn-primary" (click)="moveLeftAndSave(field); $event.stopPropagation();" data-toggle="tooltip" title="{{'Move left' | translate}}">
+                    <i class="fa-solid fa-chevron-left"></i>
+                  </button>
+                  <button class="btn btn-sm btn-primary" (click)="moveRightAndSave(field); $event.stopPropagation();" data-toggle="tooltip" title="{{'Move right' | translate}}">
+                    <i class="fa-solid fa-chevron-right"></i>
+                  </button>
+                  <button class="btn btn-sm btn-primary" (click)="moveUpAndSave(field); $event.stopPropagation();" data-toggle="tooltip" title="{{'Move up' | translate}}">
+                    <i class="fa-solid fa-chevron-up"></i>
+                  </button>
+                  <button class="btn btn-sm btn-primary" (click)="moveDownAndSave(field); $event.stopPropagation();" data-toggle="tooltip" title="{{'Move down' | translate}}">
+                    <i class="fa-solid fa-chevron-down"></i>
+                  </button>
+                </span>
+              }
+            </span>
+          </span>
+        }
+      </div>
+      @if (editing) {
+        <div class="fieldEditor">
+          <hr />
+          <div class="row">
+            @if (field.editable) {
+              <div class="col-md-12">
+                @if (field.instance !== 'reference') {
+                  <div class="form-group">
+                    <label>{{ 'Name' | translate }}</label>
+                    <input name="label" class="form-control" [(ngModel)]="field.label" type="text" required />
+                    @if (editField.form.get('label')?.errors?.['required']) {
+                      <div class="text-danger">
+                        <span>{{ 'This field is mandatory' | translate }}</span>
+                      </div>
+                    }
+                  </div>
+                }
+                @if (field.instance !== 'reference' && (field.type === 'inputbox' || field.type === 'textarea')) {
+                  <div class="form-group">
+                    <label>
+                      <span>{{ 'Type' | translate }}</span>
+                      <span>:</span>
+                    </label>
+                    <select name="type" class="form-select-custom" [(ngModel)]="field.type" required>
+                      <option value="inputbox">{{ 'Single-line text input' | translate }}</option>
+                      <option value="textarea">{{ 'Multi-line text input' | translate }}</option>
+                    </select>
+                  </div>
+                }
+                @if (field.instance !== 'reference' && (field.type === 'selectbox' || field.type === 'checkbox' || field.type === 'multichoice')) {
+                  <div class="form-group">
+                    <label>
+                      <span>{{ 'Type' | translate }}</span>
+                      <span>:</span>
+                    </label>
+                    <select name="type" class="form-select-custom" [(ngModel)]="field.type" required>
+                      <option value="selectbox">{{ 'Selection box' | translate }}</option>
+                      <option value="multichoice">{{ 'Multiple choice input' | translate }}</option>
+                      <option value="checkbox">{{ 'Checkbox' | translate }}</option>
+                    </select>
+                  </div>
+                }
+                @if (field.instance !== 'reference') {
+                  <div class="form-group">
+                    <label>{{ 'Hint' | translate }}</label>
+                    <input name="hint" class="form-control" [(ngModel)]="field.hint" type="text">
+                  </div>
+                }
+                @if (field.instance !== 'reference') {
+                  <div class="form-group">
+                    <label>{{ 'Description' | translate }}</label>
+                    <textarea name="description" class="form-control" [(ngModel)]="field.description"></textarea>
+                  </div>
+                }
+                @if (field.instance !== 'reference' && (field.type === 'inputbox' || field.type === 'textarea')) {
+                  <div class="form-group">
+                    <label>{{ 'Placeholder' | translate }}</label>
+                    <input name="hint" class="form-control" [(ngModel)]="field.placeholder" type="text">
+                  </div>
+                }
+                @if (field.type !== 'fieldgroup') {
+                  <div class="form-group">
+                    <input name="field.required" [(ngModel)]="field.required" type="checkbox">
+                    <label>{{ 'Mandatory' | translate }}</label>
+                  </div>
+                }
+                @if ((field.type === 'fieldgroup' || field.type === 'fileupload') && field.template_id === '') {
+                  <div class="form-group">
+                    <div>
+                      @switch (typeSwitch(field.type)) {
+                        @case ('fileupload') {
+                          <input [(ngModel)]="field.multi_entry" type="checkbox">
+                          <label>{{ 'Accept multiple file uploads' | translate }}</label>
+                        }
+                        @default {
+                          <input [(ngModel)]="field.multi_entry" type="checkbox">
+                          <label>{{ 'Accept multiple answers' | translate }}</label>
+                        }
+                      }
                     </div>
+                </div>
+              }
+              @if (fieldIsMarkableSubjectToPreview) {
+                <div class="form-group">
+                  <input [(ngModel)]="field.preview" type="checkbox">
+                  <label>{{ 'Preview' | translate }}</label>
+                </div>
+              }
+              <div class="form-group">
+                <label>
+                  <span>{{ 'Width' | translate }}</span>
+                  <span>(</span><span>{{ '0 = auto' | translate }}</span><span>)</span>
+                </label>
+                <input class="form-control" [(ngModel)]="field.width" type="number" min="0" max="12">
+              </div>
+              @if (field.template_id) {
+                <div class="form-group">
+                  <label>{{ 'Template override' | translate }}</label>
+                  <input name="template_override_id" class="form-control" [(ngModel)]="field.template_override_id" type="text">
+                </div>
+              }
+            </div>
+          }
+        </div>
+        @if (field.instance !== 'reference') {
+          <div class="row">
+            <div class="col-md-12">
+              @if (field.type === 'inputbox' || field.type === 'textarea' || field.type === 'voice') {
+                <div>
+                  <div class="form-group">
+                    <label>{{ 'Min' | translate }}</label>
+                    <input [(ngModel)]="field.attrs.min_len.value" type="text" class="form-control" [disabled]="!field.editable" />
+                    <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
+                  </div>
+                  <div class="form-group">
+                    <label>{{ 'Max' | translate }}</label>
+                    <input [(ngModel)]="field.attrs.max_len.value" type="text" class="form-control" [disabled]="!field.editable" />
+                    <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
+                  </div>
+                  @if (field.attrs.input_validation) {
                     <div class="form-group">
-                        <label>
-                          <span>{{ 'Width' | translate }}</span>
-                          <span>(</span><span>{{ '0 = auto' | translate }}</span><span>)</span>
-                         </label>
-                        <input class="form-control" [(ngModel)]="field.width" type="number" min="0" max="12">
+                      <label>{{ 'Input validation' | translate }}</label>
+                      <select name="type" class="form-select-custom" [(ngModel)]="field.attrs.input_validation.value" required>
+                        <option value="none">{{ 'None' | translate }}</option>
+                        <option value="email">{{ 'Email address' | translate }}</option>
+                        <option value="number">{{ 'Number' | translate }}</option>
+                        <option value="phonenumber">{{ 'Phone number' | translate }}</option>
+                        <option value="custom">{{ 'Custom' | translate }}</option>
+                      </select>
                     </div>
-                    <div class="form-group" *ngIf="field.template_id">
-                        <label>{{ 'Template override' | translate }}</label>
-                        <input name="template_override_id" class="form-control" [(ngModel)]="field.template_override_id" type="text">
+                  }
+                  @if (isCustomValidation(field)) {
+                    <div class="form-group">
+                      <label>{{ 'Regular expression' | translate }}</label>
+                      <input [(ngModel)]="field.attrs.regexp.value" type="text" class="form-control" [disabled]="!field.editable" />
                     </div>
+                  }
                 </div>
-            </div>
-            <div class="row" *ngIf="field.instance !== 'reference'">
-                <div class="col-md-12">
-                    <div *ngIf="field.type === 'inputbox' || field.type === 'textarea' || field.type === 'voice'">
-                        <div class="form-group">
-                            <label>{{ 'Min' | translate }}</label>
-                            <input [(ngModel)]="field.attrs.min_len.value" type="text" class="form-control" [disabled]="!field.editable" />
-                            <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
-                        </div>
-                        <div class="form-group">
-                            <label>{{ 'Max' | translate }}</label>
-                            <input [(ngModel)]="field.attrs.max_len.value" type="text" class="form-control" [disabled]="!field.editable" />
-                            <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
-                        </div>
-                        <div class="form-group" *ngIf="field.attrs.input_validation">
-                            <label>{{ 'Input validation' | translate }}</label>
-                            <select name="type" class="form-select-custom" [(ngModel)]="field.attrs.input_validation.value" required>
-                                <option value="none">{{ 'None' | translate }}</option>
-                                <option value="email">{{ 'Email address' | translate }}</option>
-                                <option value="number">{{ 'Number' | translate }}</option>
-                                <option value="phonenumber">{{ 'Phone number' | translate }}</option>
-                                <option value="custom">{{ 'Custom' | translate }}</option>
-                            </select>
-                        </div>
-                        <div class="form-group" *ngIf="field.attrs.input_validation?.value === custom">
-                            <label>{{ 'Regular expression' | translate }}</label>
-                            <input [(ngModel)]="field.attrs.regexp.value" type="text" class="form-control" [disabled]="!field.editable" />
-                        </div>
+              }
+              @if (field.type === 'tos') {
+                <div>
+                  <div class="form-group">
+                    <label>{{ 'Text' | translate }}</label>
+                    <textarea [(ngModel)]="field.attrs.text.value" class="form-control" [disabled]="!field.editable"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label>{{ 'Checkbox label' | translate }}</label>
+                    <input [(ngModel)]="field.attrs.checkbox_label.value" type="text" class="form-control" />
+                  </div>
+                  <div class="form-group">
+                    <input [(ngModel)]="field.attrs.attachment.value" type="checkbox" />
+                    <label>{{ 'Attachment' | translate }}</label>
+                  </div>
+                  @if (field.attrs.attachment.value) {
+                    <div class="nested">
+                      <div class="form-group">
+                        <label>{{ 'Text' | translate }}</label>
+                        <input [(ngModel)]="field.attrs.attachment_text.value" type="text" class="form-control" />
+                      </div>
+                      <div class="form-group">
+                        <label>URL</label>
+                        <input [(ngModel)]="field.attrs.attachment_url.value" type="text" class="form-control" />
+                      </div>
                     </div>
-                    <div *ngIf="field.type === 'tos'">
-                        <div class="form-group">
-                            <label>{{ 'Text' | translate }}</label>
-                            <textarea [(ngModel)]="field.attrs.text.value" class="form-control" [disabled]="!field.editable"></textarea>
-                        </div>
+                  }
+                </div>
+              }
+              @if (field.type === 'fieldgroup') {
+                <div>
+                  <div class="form-group">
+                    <input [(ngModel)]="field.attrs.multimedia.value" type="checkbox">
+                    <label>{{ 'Add multimedia content' | translate }}</label>
+                    @if (field.attrs.multimedia.value) {
+                      <div class="nested">
                         <div class="form-group">
-                            <label>{{ 'Checkbox label' | translate }}</label>
-                            <input [(ngModel)]="field.attrs.checkbox_label.value" type="text" class="form-control" />
+                          <label>{{ 'Type' | translate }}</label>
+                          <select name="type" class="form-select-custom" [(ngModel)]="field.attrs.multimedia_type.value" required>
+                            <option value="image">{{ 'Image' | translate }}</option>
+                            <option value="audio">{{ 'Audio' | translate }}</option>
+                            <option value="video">{{ 'Video' | translate }}</option>
+                          </select>
                         </div>
                         <div class="form-group">
-                            <input class="form-check-input" [(ngModel)]="field.attrs.attachment.value" type="checkbox" />
-                            <label>{{ 'Attachment' | translate }}</label>
-                        </div>
-                        <div *ngIf="field.attrs.attachment.value" class="nested">
-                            <div class="form-group">
-                                <label>{{ 'Text' | translate }}</label>
-                                <input [(ngModel)]="field.attrs.attachment_text.value" type="text" class="form-control" />
-                            </div>
-                            <div class="form-group">
-                                <label>URL</label>
-                                <input [(ngModel)]="field.attrs.attachment_url.value" type="text" class="form-control" />
-                            </div>
+                          <label>URL</label>
+                          <input [(ngModel)]="field.attrs.multimedia_url.value" type="text" class="form-control" required />
                         </div>
+                      </div>
+                    }
+                  </div>
+                </div>
+              }
+              <div>
+                @if (field.type === 'checkbox' || field.type === 'selectbox' || field.type === 'multichoice') {
+                  <div>
+                    <div class="form-group">
+                      <input [(ngModel)]="field.attrs.display_alphabetically.value" type="checkbox" [disabled]="!field.editable">
+                      <label>{{ 'Display options alphabetically' | translate }}</label>
                     </div>
-                    <div *ngIf="field.type === 'fieldgroup'">
-                        <div class="form-group">
-                            <input class="form-check-input" [(ngModel)]="field.attrs.multimedia.value" type="checkbox">
-                            <label>{{ 'Add multimedia content' | translate }}</label>
-                            <div *ngIf="field.attrs.multimedia.value" class="nested">
-                                <div class="form-group">
-                                    <label>{{ 'Type' | translate }}</label>
-                                    <select name="type" class="form-select-custom" [(ngModel)]="field.attrs.multimedia_type.value" required>
-                                        <option value="image">{{ 'Image' | translate }}</option>
-                                        <option value="audio">{{ 'Audio' | translate }}</option>
-                                        <option value="video">{{ 'Video' | translate }}</option>
-                                    </select>
-                                </div>
-                                <div class="form-group">
-                                    <label>URL</label>
-                                    <input [(ngModel)]="field.attrs.multimedia_url.value" type="text" class="form-control" required />
-                                </div>
-                            </div>
-                        </div>
+                  </div>
+                }
+                @if (field.type === 'date' || field.type === 'daterange') {
+                  <div data-toggle="tooltip" title="{{'Accept multiple file uploads' | translate}}">
+                    <div class="form-group">
+                      <input class="form-control" placeholder="yyyy-mm-dd" name="minDate" [(ngModel)]="field.attrs.min_date.value" ngbDatepicker #minDate="ngbDatepicker" (click)="toggleMinDate() ; minDate.toggle()" />
+                      <label>{{ 'Earliest selectable date' | translate }}:</label>
+                      @if (field.attrs.min_date.value) {
+                        <span>
+                          <span>{{minDateFormat(field.attrs.min_date.value) | date:'dd-MM-yyyy'}}</span>
+                          <button class="btn btn-sm btn-danger" (click)="field.attrs.min_date.value = ''; $event.stopPropagation();">
+                            <i class="fa-solid fa-times"></i>
+                          </button>
+                        </span>
+                      }
+                      @if (field.attrs.min_date.value === '') {
+                        <button (click)="minDate.toggle()" type="button" class="btn btn-sm btn-outline-secondary">
+                          <i class="fa-solid fa-calendar"></i>
+                        </button>
+                      }
                     </div>
-                    <div>
-                        <div *ngIf="field.type === 'checkbox' || field.type === 'selectbox' || field.type === 'multichoice'">
-                            <div class="form-group">
-                                <input class="form-check-input" [(ngModel)]="field.attrs.display_alphabetically.value" type="checkbox" [disabled]="!field.editable">
-                                <label>{{ 'Display options alphabetically' | translate }}</label>
-                            </div>
-                        </div>
-                        <div *ngIf="field.type === 'date' || field.type === 'daterange'" title="{{'Accept multiple file uploads' | translate}}">
-                            <div class="form-group">
-                                <input class="form-control" placeholder="yyyy-mm-dd" name="minDate" [(ngModel)]="field.attrs.min_date.value" ngbDatepicker #minDate="ngbDatepicker" (click)="toggleMinDate() ; minDate.toggle()" />
-                                <label>{{ 'Earliest selectable date' | translate }}:</label>
-                                <span *ngIf="field.attrs.min_date.value">
-                                    <span>{{minDateFormat(field.attrs.min_date.value) | date:'dd-MM-yyyy'}}</span>
-                                    <button class="btn btn-sm btn-danger" (click)="field.attrs.min_date.value = ''; $event.stopPropagation();">
-                                        <i class="fa-solid fa-times"></i>
-                                    </button>
-                                </span>
-                                <button (click)="minDate.toggle()" *ngIf="field.attrs.min_date.value === ''" type="button" class="btn btn-sm btn-outline-secondary">
-                                    <i class="fa-solid fa-calendar"></i>
-                                </button>
-                            </div>
-                            <div class="form-group">
-                                <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="field.attrs.max_date.value" ngbDatepicker #d="ngbDatepicker" (click)="toggleMaxDate() ; d.toggle()" />
-                                <label>{{ 'Latest selectable date' | translate }}:</label>
-                                <span *ngIf="field.attrs.max_date.value">
-                                    <span>{{maxDateFormat(field.attrs.max_date.value) | date:'dd-MM-yyyy' }}</span>
-                                    <button class="btn btn-sm btn-danger" (click)="field.attrs.max_date.value = ''">
-                                        <i class="fa-solid fa-times"></i>
-                                    </button>
-                                </span>
-                                <button *ngIf="field.attrs.max_date.value === ''" type="button" (click)="d.toggle()" class="btn btn-sm btn-outline-secondary">
-                                    <i class="fa-solid fa-calendar"></i>
-                                </button>
-                            </div>
-                        </div>
+                    <div class="form-group">
+                      <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="field.attrs.max_date.value" ngbDatepicker #d="ngbDatepicker" (click)="toggleMaxDate() ; d.toggle()" />
+                      <label>{{ 'Latest selectable date' | translate }}:</label>
+                      @if (field.attrs.max_date.value) {
+                        <span>
+                          <span>{{maxDateFormat(field.attrs.max_date.value) | date:'dd-MM-yyyy' }}</span>
+                          <button class="btn btn-sm btn-danger" (click)="field.attrs.max_date.value = ''">
+                            <i class="fa-solid fa-times"></i>
+                          </button>
+                        </span>
+                      }
+                      @if (field.attrs.max_date.value === '') {
+                        <button type="button" (click)="d.toggle()" class="btn btn-sm btn-outline-secondary">
+                          <i class="fa-solid fa-calendar"></i>
+                        </button>
+                      }
                     </div>
-                </div>
+                  </div>
+                }
+              </div>
             </div>
-            <div class="row">
-                <div class="col-md-12" *ngIf="field.instance === 'reference'" [ngSwitch]="field.template_id">
-                    <div *ngSwitchCase="'whistleblower_identity'">
+          </div>
+        }
+        <div class="row">
+          @if (field.instance === 'reference') {
+            <div class="col-md-12">
+              @switch (field.template_id) {
+                @case ('whistleblower_identity') {
+                  <div>
+                    <div class="form-group">
+                      <input [(ngModel)]="field.required" type="checkbox">
+                      <label>{{ 'Mandatory' | translate }}</label>
+                    </div>
+                    @if (!field.required) {
+                      <div>
                         <div class="form-group">
-                            <input class="form-check-input" [(ngModel)]="field.required" type="checkbox">
-                            <label>{{ 'Mandatory' | translate }}</label>
-                        </div>
-                        <div *ngIf="!field.required">
-                            <div class="form-group">
-                                <label>{{ 'Text shown upon negative answer' | translate }}</label>
-                                <div>
-                                    <textarea class="form-control" [(ngModel)]="field.attrs.text_shown_upon_negative_answer.value"></textarea>
-                                </div>
-                            </div>
+                          <label>{{ 'Text shown upon negative answer' | translate }}</label>
+                          <div>
+                            <textarea class="form-control" [(ngModel)]="field.attrs.text_shown_upon_negative_answer.value"></textarea>
+                          </div>
                         </div>
-                    </div>
-                </div>
+                      </div>
+                    }
+                  </div>
+                }
+              }
             </div>
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="form-group" *ngIf="nodeResolver.dataModel.enable_scoring_system">
-                        <label>{{ 'Triggered by score' | translate }}:</label>
-                        <select class="form-select-custom" [(ngModel)]="field.triggered_by_score">
-                            <option value="0">{{ 'Low' | translate }}</option>
-                            <option value="1">{{ 'Medium' | translate }}</option>
-                            <option value="2">{{ 'High' | translate }}</option>
-                        </select>
+          }
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            @if (nodeResolver.dataModel.enable_scoring_system) {
+              <div class="form-group">
+                <label>{{ 'Triggered by score' | translate }}:</label>
+                <select class="form-select-custom" [(ngModel)]="field.triggered_by_score">
+                  <option value="0">{{ 'Low' | translate }}</option>
+                  <option value="1">{{ 'Medium' | translate }}</option>
+                  <option value="2">{{ 'High' | translate }}</option>
+                </select>
+              </div>
+            }
+            <div class="form-group">
+              <label>
+                <span>{{ 'Trigger conditions' | translate }}</span>
+                <button class="btn btn-sm btn-primary show-add-question-btn" (click)="toggleAddTrigger()">
+                  <i class="fa-solid fa-plus"></i>
+                  <span>{{ 'Add' | translate }}</span>
+                </button>
+              </label>
+              @if (showAddTrigger) {
+                <div>
+                  <div class="form-group">
+                    <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.field" required>
+                      @for (field of parsedFields.fields; track field) {
+                        <option [value]="field.id">{{field.label}}
+                        </option>
+                      }
+                    </select>
+                  </div>
+                  @if (new_trigger.field) {
+                    <div class="form-group">
+                      <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.option" required>
+                        @for (option of parsedFields.fields_by_id[new_trigger.field].options; track option) {
+                          <option [value]="option.id">{{option.label}}</option>
+                        }
+                      </select>
                     </div>
+                  }
+                  @if (new_trigger.field) {
                     <div class="form-group">
-                        <label>
-                            <span>{{ 'Trigger conditions' | translate }}</span>
-                            <button class="btn btn-sm btn-primary show-add-question-btn" (click)="toggleAddTrigger()">
-                                <i class="fa-solid fa-plus"></i>
-                                <span>{{ 'Add' | translate }}</span>
-                            </button>
-                        </label>
-                        <div *ngIf="showAddTrigger">
-                            <div class="form-group">
-                                <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.field" required>
-                                    <option *ngFor="let field of parsedFields.fields" [value]="field.id">{{field.label}}
-                                    </option>
-                                </select>
-                            </div>
-                            <div *ngIf="new_trigger.field" class="form-group">
-                                <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.option" required>
-                                    <option *ngFor="let option of parsedFields.fields_by_id[new_trigger.field].options" [value]="option.id">{{option.label}}</option>
-                                </select>
-                            </div>
-                            <div *ngIf="new_trigger.field" class="form-group">
-                                <input class="form-check-input" [(ngModel)]="new_trigger.sufficient" type="checkbox">
-                                <label>{{ 'Sufficient' | translate }}</label>
-                            </div>
-                            <div class="form-group">
-                                <button id="add-step-btn" class="btn btn-primary" [disabled]="!new_trigger.field || !new_trigger.option" (click)="addTrigger()">
-                                    <i class="fa-solid fa-plus"></i>
-                                    <span>{{ 'Add' | translate }}</span>
-                                </button>
-                            </div>
-                        </div>
-                        <div *ngFor="let trigger of field.triggered_by_options" class="nested">
-                            <button class="btn btn-sm btn-danger" (click)="delTrigger(trigger)">
-                                <i class="fa-solid fa-times"></i>
-                            </button>
-                            <span>{{parsedFields.fields_by_id[trigger.field].label}}</span>: <span>{{parsedFields.options_by_id[trigger.option].label}}</span>
-                            <span *ngIf="trigger.sufficient">( <span>{{'Sufficient'|translate}}</span>) </span>
-                        </div>
+                      <input [(ngModel)]="new_trigger.sufficient" type="checkbox">
+                      <label>{{ 'Sufficient' | translate }}</label>
                     </div>
+                  }
+                  <div class="form-group">
+                    <button id="add-step-btn" class="btn btn-primary" [disabled]="!new_trigger.field || !new_trigger.option" (click)="addTrigger()">
+                      <i class="fa-solid fa-plus"></i>
+                      <span>{{ 'Add' | translate }}</span>
+                    </button>
+                  </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="form-group" *ngIf="showOptions(field)">
-                        <label>
-                            <span>{{ 'Options' | translate }}</span>
-                            <button name="addOption" class="btn btn-sm btn-primary show-add-question-btn" (click)="addOption()">
-                                <i class="fa-solid fa-plus"></i>
-                                <span>{{ 'Add' | translate }}</span>
-                            </button>
-                        </label>
-                        <div class="col-md-12">
-                            <div class="field-option" *ngFor="let option of field.options; let i = index">
-                                <div class="row">
-                                    <div class="col-md-1">
-                                        <div class="badge bg-secondary">{{ i + 1 }}</div>
-                                    </div>
-                                    <div class="col-md-6">
-                                        <input class="form-control" name="option.label" [(ngModel)]="option.label" [attr.placeholder]="'Label' | translate" [placeholder]="'Label' | translate" type="text" [disabled]="!field.editable" required />
-                                    </div>
-                                    <div class="col-md-5">
-                                        <button name="delOption" class="btn btn-sm btn-danger" (click)="delOption(option)">
-                                            <i class="fa-solid fa-times"></i>
-                                        </button>
-                                        <button [disabled]="i === 0" class="btn btn-sm btn-primary" (click)="moveOptionUp(i);" title="{{'Move up' | translate}}">
-                                            <i class="fa-solid fa-chevron-up"></i>
-                                        </button>
-                                        <button [disabled]="i === field.options.length - 1" class="btn btn-sm btn-primary" (click)="moveOptionDown(i);" title="{{'Move down' | translate}}">
-                                            <i class="fa-solid fa-chevron-down"></i>
-                                        </button>
-                                        <span>
-                                            <button class="btn btn-sm" id="option_hint" [ngClass]="option.hint1 || option.hint2 ? 'btn-primary' : 'btn-outline-secondary'" (click)="addOptionHintDialog(option)" title="{{'Hint' | translate}}">
-                                                <i class="fa-solid fa-question-circle"></i>
-                                            </button>
-                                        </span>
-                                        <span>
-                                            <button class="btn btn-sm" id="option_block_submission" [ngClass]="option.block_submission ? 'btn-danger' : 'btn-outline-secondary'" (click)="flipBlockSubmission(option)" title="{{'Block the submission' | translate}}">
-                                                <i class="fa-solid fa-ban"></i>
-                                            </button>
-                                        </span>
-                                        <span>
-                                            <button class="btn btn-sm" id="option_trigger_receiver" [ngClass]="option.trigger_receiver.length ? 'btn-primary' : 'btn-outline-secondary'" (click)="triggerReceiverDialog(option)" title="{{'Recipients' | translate}}">
-                                                <i class="fa-solid fa-user"></i>
-                                            </button>
-                                        </span>
-                                        <span *ngIf="nodeResolver.dataModel.enable_scoring_system">
-                                            <button class="btn btn-sm" id="option_score" [ngClass]="option.score_type !== 'none' ? 'btn-primary' : 'btn-outline-secondary'" (click)="assignScorePointsDialog(option)" data-toggle="Assign score points" title="{{'Recipients' | translate}}">
-                                                <i class="fa-solid fa-bolt"></i>
-                                                <span *ngIf="option.score_type !== 'none'">
-                                                    <span> {{ option.score_points }} </span>
-                                                    <span [ngSwitch]="option.score_type">
-                                                        <span *ngSwitchCase="'addition'"> ( <span>{{ 'Addition' |
-                                                          translate }}</span>) </span>
-                                                        <span *ngSwitchCase="'multiplier'"> ( <span>{{ 'Multiplier' |
-                                                          translate }}</span>) </span>
-                                                    </span>
-                                                </span>
-                                            </button>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              }
+              @for (trigger of field.triggered_by_options; track trigger) {
+                <div class="nested">
+                  <button class="btn btn-sm btn-danger" (click)="delTrigger(trigger)">
+                    <i class="fa-solid fa-times"></i>
+                  </button>
+                  <span>{{parsedFields.fields_by_id[trigger.field].label}}</span>: <span>{{parsedFields.options_by_id[trigger.option].label}}</span>
+                  @if (trigger.sufficient) {
+                    <span>( <span>{{'Sufficient'|translate}}</span>) </span>
+                  }
                 </div>
+              }
             </div>
-            <div *ngIf="field.editable && field.instance !== 'reference' && field.type === 'fieldgroup'" class="row">
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            @if (showOptions(field)) {
+              <div class="form-group">
+                <label>
+                  <span>{{ 'Options' | translate }}</span>
+                  <button name="addOption" class="btn btn-sm btn-primary show-add-question-btn" (click)="addOption()">
+                    <i class="fa-solid fa-plus"></i>
+                    <span>{{ 'Add' | translate }}</span>
+                  </button>
+                </label>
                 <div class="col-md-12">
-                    <div class="form-group">
-                        <div>
-                            <span>{{ 'Questions' | translate }}</span>
-                            <button class="btn btn-sm btn-primary show-add-question-btn" (click)="toggleAddQuestion()">
-                                <i class="fa-solid fa-plus"></i>
-                                <span>{{ 'Add new question' | translate }}</span>
-                            </button>
-                            <button class="btn btn-sm btn-primary show-add-question-from-template-btn" (click)="toggleAddQuestionFromTemplate()" *ngIf="fieldTemplatesData.length > 0">
-                                <i class="fa-solid fa-plus"></i>
-                                <span>{{ 'Add question from template' | translate }}</span>
-                            </button>
+                  @for (option of field.options; track option; let i = $index) {
+                    <div class="field-option">
+                      <div class="row">
+                        <div class="col-md-1">
+                          <div class="badge bg-secondary">{{ i + 1 }}</div>
                         </div>
-                        <div class="row" *ngIf="field.editable && field.type === 'fieldgroup'">
-                            <div class="col-md-12" *ngIf="showAddQuestion">
-                                <src-add-field [step]="field" [type]="'field'" (dataToParent)="listenToAddField()"></src-add-field>
-                            </div>
-                            <div class="col-md-12" *ngIf="showAddQuestionFromTemplate">
-                                <src-add-field-from-template [fieldTemplatesData]="fieldTemplatesData" [step]="field" [type]="'field'" (dataToParent)="listenToAddFieldFormTemplate()"></src-add-field-from-template>
-                            </div>
+                        <div class="col-md-6">
+                          <input class="form-control" name="option.label" [(ngModel)]="option.label" [attr.placeholder]="'Label' | translate" [placeholder]="'Label' | translate" type="text" [disabled]="!field.editable" required />
                         </div>
-                        <div class="configuredFields">
-                            <div *ngFor="let childField of children | orderBy:['y', 'x']; let index = index">
-                                <div id="field-{{index}}" class="fieldBox">
-                                    <form #editField="ngForm">
-                                        <src-fields (dataToParent)="listenToFields()" [editField]="editField" [field]="childField" [fields]="children" [type]="'field'"></src-fields>
-                                    </form>
-                                </div>
-                            </div>
+                        <div class="col-md-5">
+                          <button name="delOption" class="btn btn-sm btn-danger" (click)="delOption(option)">
+                            <i class="fa-solid fa-times"></i>
+                          </button>
+                          <button [disabled]="i === 0" class="btn btn-sm btn-primary" (click)="moveOptionUp(i);" data-toggle="tooltip" title="{{'Move up' | translate}}">
+                            <i class="fa-solid fa-chevron-up"></i>
+                          </button>
+                          <button [disabled]="i === field.options.length - 1" class="btn btn-sm btn-primary" (click)="moveOptionDown(i);" data-toggle="tooltip" title="{{'Move down' | translate}}">
+                            <i class="fa-solid fa-chevron-down"></i>
+                          </button>
+                          <span>
+                            <button class="btn btn-sm" id="option_hint" [ngClass]="option.hint1 || option.hint2 ? 'btn-primary' : 'btn-outline-secondary'" (click)="addOptionHintDialog(option)" data-toggle="tooltip" title="{{'Hint' | translate}}">
+                              <i class="fa-solid fa-question-circle"></i>
+                            </button>
+                          </span>
+                          <span>
+                            <button class="btn btn-sm" id="option_block_submission" [ngClass]="option.block_submission ? 'btn-danger' : 'btn-outline-secondary'" (click)="flipBlockSubmission(option)" data-toggle="tooltip" title="{{'Block the submission' | translate}}">
+                              <i class="fa-solid fa-ban"></i>
+                            </button>
+                          </span>
+                          <span>
+                            <button class="btn btn-sm" id="option_trigger_receiver" [ngClass]="option.trigger_receiver.length ? 'btn-primary' : 'btn-outline-secondary'" (click)="triggerReceiverDialog(option)" data-toggle="tooltip" title="{{'Recipients' | translate}}">
+                              <i class="fa-solid fa-user"></i>
+                            </button>
+                          </span>
+                          @if (nodeResolver.dataModel.enable_scoring_system) {
+                            <span>
+                              <button class="btn btn-sm" id="option_score" [ngClass]="option.score_type !== 'none' ? 'btn-primary' : 'btn-outline-secondary'" (click)="assignScorePointsDialog(option)" data-toggle="Assign score points" title="{{'Recipients' | translate}}">
+                                <i class="fa-solid fa-bolt"></i>
+                                @if (option.score_type !== 'none') {
+                                  <span>
+                                    <span> {{ option.score_points }} </span>
+                                    <span>
+                                      @switch (option.score_type) {
+                                        @case ('addition') {
+                                          <span> ( <span>{{ 'Addition' | translate }}</span>) </span>
+                                        }
+                                        @case ('multiplier') {
+                                          <span> ( <span>{{ 'Multiplier' | translate }}</span>) </span>
+                                        }
+                                      }
+                                    </span>
+                                  </span>
+                                }
+                              </button>
+                            </span>
+                          }
                         </div>
+                      </div>
                     </div>
+                  }
                 </div>
-            </div>
-            <div class="form-group" *ngIf="field.instance === 'template'">UUID: {{field.id}}</div>
+              </div>
+            }
+          </div>
         </div>
-    </div>
-</div>
\ No newline at end of file
+        @if (field.editable && field.instance !== 'reference' && field.type === 'fieldgroup') {
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group">
+                <div>
+                  <span>{{ 'Questions' | translate }}</span>
+                  <button class="btn btn-sm btn-primary show-add-question-btn" (click)="toggleAddQuestion()">
+                    <i class="fa-solid fa-plus"></i>
+                    <span>{{ 'Add new question' | translate }}</span>
+                  </button>
+                  @if (fieldTemplatesData.length > 0) {
+                    <button class="btn btn-sm btn-primary show-add-question-from-template-btn" (click)="toggleAddQuestionFromTemplate()">
+                      <i class="fa-solid fa-plus"></i>
+                      <span>{{ 'Add question from template' | translate }}</span>
+                    </button>
+                  }
+                </div>
+                @if (field.editable && field.type === 'fieldgroup') {
+                  <div class="row">
+                    @if (showAddQuestion) {
+                      <div class="col-md-12">
+                        <src-add-field [step]="field" [type]="'field'" (dataToParent)="listenToAddField()"></src-add-field>
+                      </div>
+                    }
+                    @if (showAddQuestionFromTemplate) {
+                      <div class="col-md-12">
+                        <src-add-field-from-template [fieldTemplatesData]="fieldTemplatesData" [step]="field" [type]="'field'" (dataToParent)="listenToAddFieldFormTemplate()"></src-add-field-from-template>
+                      </div>
+                    }
+                  </div>
+                }
+                <div class="configuredFields">
+                  @for (childField of children | orderBy:['y', 'x']; track childField; let index = $index) {
+                    <div>
+                      <div id="field-{{index}}" class="fieldBox">
+                        <form #editField="ngForm">
+                          <src-fields (dataToParent)="listenToFields()" [editField]="editField" [field]="childField" [fields]="children" [type]="'field'"></src-fields>
+                        </form>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        @if (field.instance === 'template') {
+          <div class="form-group">UUID: {{field.id}}</div>
+        }
+      </div>
+    }
+  </div>
+  </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/fields/fields.component.ts b/client/app/src/pages/admin/questionnaires/fields/fields.component.ts
index 2d1b3e3124..045699dd32 100644
--- a/client/app/src/pages/admin/questionnaires/fields/fields.component.ts
+++ b/client/app/src/pages/admin/questionnaires/fields/fields.component.ts
@@ -1,6 +1,6 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {NgForm} from "@angular/forms";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
+import { NgbModal, NgbInputDatepicker } from "@ng-bootstrap/ng-bootstrap";
 import {AddOptionHintComponent} from "@app/shared/modals/add-option-hint/add-option-hint.component";
 import {AssignScorePointsComponent} from "@app/shared/modals/assign-score-points/assign-score-points.component";
 import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
@@ -17,12 +17,29 @@ import {ParsedFields} from "@app/models/component-model/parsedFields";
 import {Field, fieldtemplatesResolverModel} from "@app/models/resolvers/field-template-model";
 import {Children, Option, TriggeredByOption} from "@app/models/app/shared-public-model";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
+import { NgClass, DatePipe } from "@angular/common";
+import { AddFieldComponent } from "../add-field/add-field.component";
+import { AddFieldFromTemplateComponent } from "../add-field-from-template/add-field-from-template.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-fields",
-  templateUrl: "./fields.component.html"
+    selector: "src-fields",
+    templateUrl: "./fields.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbInputDatepicker, NgClass, AddFieldComponent, AddFieldFromTemplateComponent, DatePipe, TranslatorPipe, OrderByPipe, TranslateModule]
 })
 export class FieldsComponent implements OnInit {
+  private authenticationService = inject(AuthenticationService);
+  private questionnaireService = inject(QuestionnaireService);
+  private modalService = inject(NgbModal);
+  nodeResolver = inject(NodeResolver);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+  private fieldTemplates = inject(FieldTemplatesResolver);
+  private fieldUtilities = inject(FieldUtilitiesService);
+
   @Input() editField: NgForm;
   @Input() field: Children | Step | Field;
   @Input() fields: Children[] | Field[] | Step[];
@@ -48,9 +65,6 @@ export class FieldsComponent implements OnInit {
   };
   instance: string;
 
-  constructor(private authenticationService: AuthenticationService,private questionnaireService: QuestionnaireService, private modalService: NgbModal, public nodeResolver: NodeResolver, private httpService: HttpService, private utilsService: UtilsService, private fieldTemplates: FieldTemplatesResolver, private fieldUtilities: FieldUtilitiesService,) {
-  }
-
   ngOnInit(): void {
     if (Array.isArray(this.fieldTemplates.dataModel)) {
       this.fieldTemplatesData = this.fieldTemplates.dataModel;
@@ -340,4 +354,8 @@ export class FieldsComponent implements OnInit {
   listenToAddFieldFormTemplate() {
     this.showAddQuestionFromTemplate = false;
   }
+
+  isCustomValidation(field: Step | Field): boolean {
+    return field?.attrs?.input_validation?.value === 'custom';
+  }
 }
diff --git a/client/app/src/pages/admin/questionnaires/main/main.component.html b/client/app/src/pages/admin/questionnaires/main/main.component.html
index e16b9d17e6..462d0c340b 100644
--- a/client/app/src/pages/admin/questionnaires/main/main.component.html
+++ b/client/app/src/pages/admin/questionnaires/main/main.component.html
@@ -1,43 +1,47 @@
 <div class="config-section row">
-    <div class="col-md-12">
-        <div>
-            <span>{{ 'Questionnaires' | translate }}</span>
-            <button class="btn btn-sm btn-primary show-add-questionnaire-btn" (click)="toggleAddQuestionnaire()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{ 'Add' | translate }}</span>
+  <div class="col-md-12">
+    <div>
+      <span>{{ 'Questionnaires' | translate }}</span>
+      <button class="btn btn-sm btn-primary show-add-questionnaire-btn" (click)="toggleAddQuestionnaire()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{ 'Add' | translate }}</span>
+      </button>
+      <span class="custom-file">
+        <input type="file" hidden #keyUploadInput (change)="importQuestionnaire(keyUploadInput.files)" />
+        <label id="keyUpload" (click)="keyUploadInput.click()" class="btn btn-sm btn-outline-secondary">
+          <i class="fa-solid fa-upload"></i>{{'Import' | translate}}
+        </label>
+      </span>
+    </div>
+    @if (showAddQuestionnaire) {
+      <div class="config-section row">
+        <form id="newQuestionnaire" #newQuestionnaire="ngForm" class="addQuestionnaire col-md-6" novalidate>
+          <div class="form-group">
+            <label>
+              <span>{{ 'Name' | translate }}</span>
+              <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+            </label>
+            <div>
+              <input name="new_questionnaire.name" class="form-control" [(ngModel)]="new_questionnaire.name" type="text" [ngClass]="{'is-invalid': newQuestionnaire.form.get('new_questionnaire.name')?.errors?.['required']}" required />
+            </div>
+          </div>
+          <div class="form-group">
+            <button id="add-questionnaire-btn" class="btn btn-primary" [disabled]="newQuestionnaire.invalid" (click)="addQuestionnaire(); toggleAddQuestionnaire()" type="button">
+              <i class="fa-solid fa-plus"></i>
+              <span>{{ 'Add' | translate }}</span>
             </button>
-            <span class="custom-file">
-                <input type="file" hidden #keyUploadInput (change)="importQuestionnaire(keyUploadInput.files)" />
-                <label id="keyUpload" (click)="keyUploadInput.click()" class="btn btn-sm btn-outline-secondary">
-                    <i class="fa-solid fa-upload"></i>{{'Import' | translate}}
-                </label>
-            </span>
-        </div>
-        <div class="config-section row" *ngIf="showAddQuestionnaire">
-            <form id="newQuestionnaire" #newQuestionnaire="ngForm" class="addQuestionnaire col-md-6" novalidate>
-                <div class="form-group">
-                    <label>
-                        <span>{{ 'Name' | translate }}</span>
-                        <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div>
-                        <input name="new_questionnaire.name" class="form-control" [(ngModel)]="new_questionnaire.name" type="text" [ngClass]="{'is-invalid': newQuestionnaire.form.get('new_questionnaire.name')?.errors?.['required']}" required />
-                    </div>
-                </div>
-                <div class="form-group">
-                    <button id="add-questionnaire-btn" class="btn btn-primary" [disabled]="newQuestionnaire.invalid" (click)="addQuestionnaire(); toggleAddQuestionnaire()" type="button">
-                        <i class="fa-solid fa-plus"></i>
-                        <span>{{ 'Add' | translate }}</span>
-                    </button>
-                </div>
-            </form>
+          </div>
+        </form>
+      </div>
+    }
+    @if (questionnairesData.length > 0) {
+      @for (questionnaire of questionnairesData | orderBy:'name'; track trackByFn(index, questionnaire); let index = $index) {
+        <div>
+          <form id="questionnaire-{{index}}" class="config-item" #editQuestionnaire="ngForm" novalidate>
+            <src-questionnaires-list [questionnaire]="questionnaire" [editQuestionnaire]="editQuestionnaire" [questionnaires]="questionnairesData"></src-questionnaires-list>
+          </form>
         </div>
-        <ng-container *ngIf="questionnairesData.length > 0">
-            <div *ngFor="let questionnaire of questionnairesData | orderBy:'name'; let index = index;trackBy: trackByFn">
-                <form id="questionnaire-{{index}}" class="config-item" #editQuestionnaire="ngForm" novalidate>
-                    <src-questionnaires-list [questionnaire]="questionnaire" [editQuestionnaire]="editQuestionnaire" [questionnaires]="questionnairesData"></src-questionnaires-list>
-                </form>
-            </div>
-        </ng-container>
-    </div>
+      }
+    }
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/main/main.component.ts b/client/app/src/pages/admin/questionnaires/main/main.component.ts
index 40541035f8..ef1d2af4bd 100644
--- a/client/app/src/pages/admin/questionnaires/main/main.component.ts
+++ b/client/app/src/pages/admin/questionnaires/main/main.component.ts
@@ -1,5 +1,5 @@
 import {HttpClient} from "@angular/common/http";
-import {ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import {questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
 import {QuestionnairesResolver} from "@app/shared/resolvers/questionnaires.resolver";
 import {HttpService} from "@app/shared/services/http.service";
@@ -7,12 +7,27 @@ import {UtilsService} from "@app/shared/services/utils.service";
 import {NewQuestionare} from "@app/models/admin/new-questionare";
 import {QuestionnaireService} from "@app/pages/admin/questionnaires/questionnaire.service";
 import {Subject, takeUntil} from "rxjs";
+import { NgClass } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { QuestionnairesListComponent } from "../questionnaires-list/questionnaires-list.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-main",
-  templateUrl: "./main.component.html"
+    selector: "src-main",
+    templateUrl: "./main.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, QuestionnairesListComponent, TranslatorPipe, OrderByPipe, TranslateModule]
 })
 export class MainComponent implements OnInit, OnDestroy {
+  private http = inject(HttpClient);
+  private questionnaireService = inject(QuestionnaireService);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+  private cdr = inject(ChangeDetectorRef);
+  protected questionnairesResolver = inject(QuestionnairesResolver);
+
 
   private destroy$ = new Subject<void>();
   questionnairesData: questionnaireResolverModel[] = [];
@@ -20,9 +35,6 @@ export class MainComponent implements OnInit, OnDestroy {
   showAddQuestionnaire: boolean = false;
   @ViewChild('keyUploadInput') keyUploadInput: ElementRef<HTMLInputElement>;
 
-  constructor(private http: HttpClient, private questionnaireService: QuestionnaireService, private httpService: HttpService, private utilsService: UtilsService, private cdr: ChangeDetectorRef, protected questionnairesResolver: QuestionnairesResolver) {
-  }
-
   ngOnInit(): void {
     this.questionnaireService.sharedData = "step";
     this.questionnaireService.getData().pipe(takeUntil(this.destroy$)).subscribe(() => {
diff --git a/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.html b/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.html
index 1f7c260bfd..51d92ecc72 100644
--- a/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.html
+++ b/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.html
@@ -1,44 +1,56 @@
 <div class="editorHeader row">
-    <span class="col-md-7" (click)="toggleEditing(questionnaire)">{{ questionnaire.name }}</span>
-    <span class="col-md-5 clearfix">
-        <span class="float-end">
-            <button class="btn btn-sm btn-outline-secondary" *ngIf="questionnaire.editable && !editing" (click)="toggleEditing(questionnaire)">
-                <span>{{ 'Edit' | translate }}</span>
-            </button>
-            <button class="btn btn-sm btn-primary" *ngIf="editing" (click)="saveQuestionnaire(questionnaire)">
-                <span>{{ 'Save' | translate }}</span>
-            </button>
-            <button class="btn btn-sm btn-outline-secondary" *ngIf="editing" (click)="toggleEditing(questionnaire)">
-                <span>{{ 'Cancel' | translate }}</span>
-            </button>
-            <button class="downloadButton btn btn-sm btn-outline-secondary" (click)="exportQuestionnaire(questionnaire)">
-                <i class="fa-solid fa-file-export"></i>
-                <span>{{ 'Export' | translate }}</span>
-            </button>
-            <button class="btn btn-sm btn-outline-secondary" (click)="duplicateQuestionnaire(questionnaire)">
-                <i class="fa-solid fa-clone"></i>
-                <span>{{ 'Duplicate' | translate }}</span>
-            </button>
-            <button class="btn btn-sm btn-danger" name="deleteQuestionnaire" *ngIf="questionnaire.editable" (click)="deleteQuestionnaire(questionnaire)">
-                <span>{{ 'Delete' | translate }}</span>
-            </button>
-        </span>
+  <span class="col-md-7" (click)="toggleEditing(questionnaire)">{{ questionnaire.name }}</span>
+  <span class="col-md-5 clearfix">
+    <span class="float-end">
+      @if (questionnaire.editable && !editing) {
+        <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(questionnaire)">
+          <span>{{ 'Edit' | translate }}</span>
+        </button>
+      }
+      @if (editing) {
+        <button class="btn btn-sm btn-primary" (click)="saveQuestionnaire(questionnaire)">
+          <span>{{ 'Save' | translate }}</span>
+        </button>
+      }
+      @if (editing) {
+        <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(questionnaire)">
+          <span>{{ 'Cancel' | translate }}</span>
+        </button>
+      }
+      <button class="downloadButton btn btn-sm btn-outline-secondary" (click)="exportQuestionnaire(questionnaire)">
+        <i class="fa-solid fa-file-export"></i>
+        <span>{{ 'Export' | translate }}</span>
+      </button>
+      <button class="btn btn-sm btn-outline-secondary" (click)="duplicateQuestionnaire(questionnaire)">
+        <i class="fa-solid fa-clone"></i>
+        <span>{{ 'Duplicate' | translate }}</span>
+      </button>
+      @if (questionnaire.editable) {
+        <button class="btn btn-sm btn-danger" name="deleteQuestionnaire" (click)="deleteQuestionnaire(questionnaire)">
+          <span>{{ 'Delete' | translate }}</span>
+        </button>
+      }
     </span>
+  </span>
 </div>
-<div *ngIf="editing">
+@if (editing) {
+  <div>
     <hr />
     <div class="row">
-        <div class="col-md-6">
-            <div class="form-group">
-                <label>{{ 'Name' | translate }}</label>
-                <input name="name" class="form-control" [(ngModel)]="questionnaire.name" type="text" required>
-                <div class="text-danger" *ngIf="editQuestionnaire.form.get('name')?.errors?.['required']">
-                    <span>{{ 'This field is mandatory' | translate }}</span>
-                </div>
+      <div class="col-md-6">
+        <div class="form-group">
+          <label>{{ 'Name' | translate }}</label>
+          <input name="name" class="form-control" [(ngModel)]="questionnaire.name" type="text" required>
+          @if (editQuestionnaire.form.get('name')?.errors?.['required']) {
+            <div class="text-danger">
+              <span>{{ 'This field is mandatory' | translate }}</span>
             </div>
+          }
         </div>
-        <div class="col-md-12">
-            <src-steps [questionnaire]="questionnaire"></src-steps>
-        </div>
+      </div>
+      <div class="col-md-12">
+        <src-steps [questionnaire]="questionnaire"></src-steps>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.ts b/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.ts
index 4e77921007..a4389d132e 100644
--- a/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.ts
+++ b/client/app/src/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component.ts
@@ -1,5 +1,5 @@
-import {Component, Input} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, Input, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {
@@ -12,19 +12,28 @@ import {Observable} from "rxjs";
 import {questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 
+import { StepsComponent } from "../steps/steps.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
+
 @Component({
-  selector: "src-questionnaires-list",
-  templateUrl: "./questionnaires-list.component.html"
+    selector: "src-questionnaires-list",
+    templateUrl: "./questionnaires-list.component.html",
+    standalone: true,
+    imports: [FormsModule, StepsComponent, TranslatorPipe, TranslateModule]
 })
 export class QuestionnairesListComponent {
+  private authenticationService = inject(AuthenticationService);
+  private questionnaireService = inject(QuestionnaireService);
+  private modalService = inject(NgbModal);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+
   @Input() questionnaire: questionnaireResolverModel;
   @Input() questionnaires: questionnaireResolverModel[];
   @Input() editQuestionnaire: NgForm;
   editing: boolean = false;
 
-  constructor(private authenticationService: AuthenticationService, private questionnaireService: QuestionnaireService, private modalService: NgbModal, private httpService: HttpService, private utilsService: UtilsService) {
-  }
-
   toggleEditing(questionnaire: questionnaireResolverModel) {
     this.editing = questionnaire.editable && !this.editing;
   }
diff --git a/client/app/src/pages/admin/questionnaires/questionnaires-routing.module.ts b/client/app/src/pages/admin/questionnaires/questionnaires-routing.module.ts
deleted file mode 100644
index fcb40fe02a..0000000000
--- a/client/app/src/pages/admin/questionnaires/questionnaires-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {QuestionnairesComponent} from "@app/pages/admin/questionnaires/questionnaires.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: QuestionnairesComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class QuestionnairesRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/questionnaires.component.html b/client/app/src/pages/admin/questionnaires/questionnaires.component.html
index 4c61edaf81..83a9488680 100644
--- a/client/app/src/pages/admin/questionnaires/questionnaires.component.html
+++ b/client/app/src/pages/admin/questionnaires/questionnaires.component.html
@@ -1,19 +1,19 @@
 <div class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-main></src-main>
-    </ng-template>
-    <ng-template #tab2>
-        <src-questions></src-questions>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-main></src-main>
+  </ng-template>
+  <ng-template #tab2>
+    <src-questions></src-questions>
+  </ng-template>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/questionnaires.component.ts b/client/app/src/pages/admin/questionnaires/questionnaires.component.ts
index 46662b3844..9bbab90000 100644
--- a/client/app/src/pages/admin/questionnaires/questionnaires.component.ts
+++ b/client/app/src/pages/admin/questionnaires/questionnaires.component.ts
@@ -1,23 +1,29 @@
-import {Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
+import { Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef, inject } from "@angular/core";
 import {Tab} from "@app/models/component-model/tab";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {MainComponent} from "@app/pages/admin/questionnaires/main/main.component";
 import {QuestionsComponent} from "@app/pages/admin/questionnaires/questions/questions.component";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-questionnaires",
-  templateUrl: "./questionnaires.component.html"
+    selector: "src-questionnaires",
+    templateUrl: "./questionnaires.component.html",
+    standalone: true,
+    imports: [NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, MainComponent, QuestionsComponent, TranslatorPipe, TranslateModule]
 })
 export class QuestionnairesComponent implements AfterViewInit {
+  protected node = inject(NodeResolver);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<MainComponent>;
   @ViewChild("tab2") tab2!: TemplateRef<QuestionsComponent>;
   tabs: Tab[];
   nodeData: NodeResolver;
   active: string;
 
-  constructor(protected node: NodeResolver, private cdr: ChangeDetectorRef) {
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "Questionnaires";
diff --git a/client/app/src/pages/admin/questionnaires/questionnaires.module.ts b/client/app/src/pages/admin/questionnaires/questionnaires.module.ts
deleted file mode 100644
index 0ac47cf2ff..0000000000
--- a/client/app/src/pages/admin/questionnaires/questionnaires.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-
-import {QuestionnairesRoutingModule} from "@app/pages/admin/questionnaires/questionnaires-routing.module";
-import {QuestionnairesComponent} from "@app/pages/admin/questionnaires/questionnaires.component";
-import {
-  AddFieldFromTemplateComponent
-} from "@app/pages/admin/questionnaires/add-field-from-template/add-field-from-template.component";
-import {AddFieldComponent} from "@app/pages/admin/questionnaires/add-field/add-field.component";
-import {FieldsComponent} from "@app/pages/admin/questionnaires/fields/fields.component";
-import {MainComponent} from "@app/pages/admin/questionnaires/main/main.component";
-import {QuestionsComponent} from "@app/pages/admin/questionnaires/questions/questions.component";
-import {StepComponent} from "@app/pages/admin/questionnaires/step/step.component";
-import {StepsComponent} from "@app/pages/admin/questionnaires/steps/steps.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {RouterModule} from "@angular/router";
-import {
-  NgbNavModule,
-  NgbModule,
-  NgbDropdownModule,
-  NgbDatepickerModule,
-  NgbDatepicker
-} from "@ng-bootstrap/ng-bootstrap";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {SharedModule} from "@app/shared.module";
-import {StepsListComponent} from "@app/pages/admin/questionnaires/steps-list/steps-list.component";
-import {
-  QuestionnairesListComponent
-} from "@app/pages/admin/questionnaires/questionnaires-list/questionnaires-list.component";
-import {TranslateModule} from "@ngx-translate/core";
-import {MarkdownModule} from "ngx-markdown";
-
-
-@NgModule({
-  declarations: [
-    QuestionnairesComponent,
-    AddFieldFromTemplateComponent,
-    AddFieldComponent,
-    FieldsComponent,
-    MainComponent,
-    QuestionsComponent,
-    StepComponent,
-    StepsComponent,
-    StepsListComponent,
-    QuestionnairesListComponent
-  ],
-  imports: [
-    CommonModule,
-    QuestionnairesRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule,
-    NgbDropdownModule,
-    TranslateModule,
-    MarkdownModule,
-    ReactiveFormsModule, NgbDatepickerModule, NgbDatepicker
-
-  ]
-})
-export class QuestionnairesModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/questions/questions.component.html b/client/app/src/pages/admin/questionnaires/questions/questions.component.html
index 89b18937f7..40a791b3eb 100644
--- a/client/app/src/pages/admin/questionnaires/questions/questions.component.html
+++ b/client/app/src/pages/admin/questionnaires/questions/questions.component.html
@@ -1,29 +1,33 @@
 <div class="config-section row">
-    <div class="col-md-12">
-        <div>
-            <span>{{ 'Question templates' | translate }}</span>
-            <button class="btn btn-sm btn-primary show-add-question-btn" (click)="toggleAddQuestion()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{ 'Add' | translate }}</span>
-            </button>
-            <span class="custom-file">
-                <input type="file" hidden #uploadInput (change)="importQuestion(uploadInput.files)" />
-                <label (click)="uploadInput.click()" class="btn btn-sm btn-outline-secondary">
-                    <i class="fa-solid fa-upload"></i>{{'Import' | translate}}
-                </label>
-            </span>
-        </div>
+  <div class="col-md-12">
+    <div>
+      <span>{{ 'Question templates' | translate }}</span>
+      <button class="btn btn-sm btn-primary show-add-question-btn" (click)="toggleAddQuestion()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{ 'Add' | translate }}</span>
+      </button>
+      <span class="custom-file">
+        <input type="file" hidden #uploadInput (change)="importQuestion(uploadInput.files)" />
+        <label (click)="uploadInput.click()" class="btn btn-sm btn-outline-secondary">
+          <i class="fa-solid fa-upload"></i>{{'Import' | translate}}
+        </label>
+      </span>
     </div>
-    <div class="config-section col-md-6" *ngIf="showAddQuestion">
-        <ng-container *ngIf="questionnairesData.length > 0">
-            <src-add-field [step]="step" [type]="'template'" (dataToParent)="listenToAddField()"></src-add-field>
-        </ng-container>
+  </div>
+  @if (showAddQuestion) {
+    <div class="config-section col-md-6">
+      @if (questionnairesData.length > 0) {
+        <src-add-field [step]="step" [type]="'template'" (dataToParent)="listenToAddField()"></src-add-field>
+      }
     </div>
-    <div class="col-md-12" *ngFor="let field of fields | orderBy:'label' ; let index = index">
-        <div id="field-{{index}}" class="fieldBox">
-            <form #editField="ngForm">
-                <src-fields [editField]="editField" [field]="field" [fields]="fields" [type]="'template'"></src-fields>
-            </form>
-        </div>
+  }
+  @for (field of fields | orderBy:'label' ; track field; let index = $index) {
+    <div class="col-md-12">
+      <div id="field-{{index}}" class="fieldBox">
+        <form #editField="ngForm">
+          <src-fields [editField]="editField" [field]="field" [fields]="fields" [type]="'template'"></src-fields>
+        </form>
+      </div>
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/questions/questions.component.ts b/client/app/src/pages/admin/questionnaires/questions/questions.component.ts
index c89d12a0d7..89bdc526bd 100644
--- a/client/app/src/pages/admin/questionnaires/questions/questions.component.ts
+++ b/client/app/src/pages/admin/questionnaires/questions/questions.component.ts
@@ -1,5 +1,5 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
 import {FieldTemplatesResolver} from "@app/shared/resolvers/field-templates-resolver.service";
 import {QuestionnairesResolver} from "@app/shared/resolvers/questionnaires.resolver";
 import {HttpService} from "@app/shared/services/http.service";
@@ -9,11 +9,27 @@ import {Subject, takeUntil} from "rxjs";
 import {fieldtemplatesResolverModel} from "@app/models/resolvers/field-template-model";
 import {Step, questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
 
+import { AddFieldComponent } from "../add-field/add-field.component";
+import { FormsModule } from "@angular/forms";
+import { FieldsComponent } from "../fields/fields.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { TranslateModule } from "@ngx-translate/core";
+
 @Component({
-  selector: "src-questions",
-  templateUrl: "./questions.component.html"
+    selector: "src-questions",
+    templateUrl: "./questions.component.html",
+    standalone: true,
+    imports: [AddFieldComponent, FormsModule, FieldsComponent, TranslatorPipe, OrderByPipe, TranslateModule]
 })
 export class QuestionsComponent implements OnInit, OnDestroy {
+  private questionnaireService = inject(QuestionnaireService);
+  private httpClient = inject(HttpClient);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+  private fieldTemplates = inject(FieldTemplatesResolver);
+  private questionnairesResolver = inject(QuestionnairesResolver);
+
   showAddQuestion: boolean = false;
   fields: fieldtemplatesResolverModel[];
   questionnairesData: questionnaireResolverModel[] = [];
@@ -22,9 +38,6 @@ export class QuestionsComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
-  constructor(private questionnaireService: QuestionnaireService, private httpClient: HttpClient, private httpService: HttpService, private utilsService: UtilsService, private fieldTemplates: FieldTemplatesResolver, private questionnairesResolver: QuestionnairesResolver) {
-  }
-
   ngOnInit(): void {
     this.questionnaireService.sharedData = "template";
     this.questionnaireService.getQuestionnairesData().pipe(takeUntil(this.destroy$)).subscribe(() => {
diff --git a/client/app/src/pages/admin/questionnaires/step/step.component.html b/client/app/src/pages/admin/questionnaires/step/step.component.html
index 6e24750616..d1858c781d 100644
--- a/client/app/src/pages/admin/questionnaires/step/step.component.html
+++ b/client/app/src/pages/admin/questionnaires/step/step.component.html
@@ -1,36 +1,44 @@
 <div id="FieldsEditBox" class="form-group">
-    <div class="row">
-        <span class="col-md-12">
-            <div>
-                <span>{{ 'Questions' | translate }}</span>
-                <button class="btn btn-sm btn-primary show-add-question-btn" id="add-question" (click)="toggleAddQuestion()">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>{{ 'Add new question' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-primary show-add-question-from-template-btn" (click)="toggleAddQuestionFromTemplate()" *ngIf="fieldTemplatesData.length > 0">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>{{ 'Add question from template' | translate }}</span>
-                </button>
-            </div>
-        </span>
+  <div class="row">
+    <span class="col-md-12">
+      <div>
+        <span>{{ 'Questions' | translate }}</span>
+        <button class="btn btn-sm btn-primary show-add-question-btn" id="add-question" (click)="toggleAddQuestion()">
+          <i class="fa-solid fa-plus"></i>
+          <span>{{ 'Add new question' | translate }}</span>
+        </button>
+        @if (fieldTemplatesData.length > 0) {
+          <button class="btn btn-sm btn-primary show-add-question-from-template-btn" (click)="toggleAddQuestionFromTemplate()">
+            <i class="fa-solid fa-plus"></i>
+            <span>{{ 'Add question from template' | translate }}</span>
+          </button>
+        }
+      </div>
+    </span>
+  </div>
+  @if (showAddQuestion) {
+    <div class="row config-section">
+      <div class="col-md-6">
+        <src-add-field [step]="step" [type]="'step'" (dataToParent)="listenToAddField()"></src-add-field>
+      </div>
     </div>
-    <div class="row config-section" *ngIf="showAddQuestion">
-        <div class="col-md-6">
-            <src-add-field [step]="step" [type]="'step'" (dataToParent)="listenToAddField()"></src-add-field>
-        </div>
-    </div>
-    <div class="row config-section" *ngIf="showAddQuestionFromTemplate">
-        <div class="col-md-6">
-            <src-add-field-from-template [step]="step" [type]="'step'" [fieldTemplatesData]="fieldTemplatesData" (dataToParent)="listenToAddFieldFormTemplate()"></src-add-field-from-template>
-        </div>
+  }
+  @if (showAddQuestionFromTemplate) {
+    <div class="row config-section">
+      <div class="col-md-6">
+        <src-add-field-from-template [step]="step" [type]="'step'" [fieldTemplatesData]="fieldTemplatesData" (dataToParent)="listenToAddFieldFormTemplate()"></src-add-field-from-template>
+      </div>
     </div>
-    <div class="row configuredFields">
-        <div class="col-md-12" *ngFor="let field of step.children | orderBy:['y', 'x']; let index = index">
-            <div id="field-{{index}}" class="fieldBox">
-                <form #editField="ngForm"> 
-                    <src-fields (dataToParent)="listenToFields()" [editField]="editField" [field]="field" [parsedFields]="parsedFields" [fields]="step.children" [step]="step" [type]="'step'"></src-fields>
-                </form>
-            </div>
+  }
+  <div class="row configuredFields">
+    @for (field of step.children | orderBy:['y', 'x']; track field; let index = $index) {
+      <div class="col-md-12">
+        <div id="field-{{index}}" class="fieldBox">
+          <form #editField="ngForm">
+            <src-fields (dataToParent)="listenToFields()" [editField]="editField" [field]="field" [parsedFields]="parsedFields" [fields]="step.children" [step]="step" [type]="'step'"></src-fields>
+          </form>
         </div>
-    </div>
+      </div>
+    }
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/step/step.component.ts b/client/app/src/pages/admin/questionnaires/step/step.component.ts
index f4fd39e900..4a2b816f35 100644
--- a/client/app/src/pages/admin/questionnaires/step/step.component.ts
+++ b/client/app/src/pages/admin/questionnaires/step/step.component.ts
@@ -1,24 +1,35 @@
-import {ChangeDetectorRef, Component, Input, OnInit} from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnInit, inject } from "@angular/core";
 import {ParsedFields} from "@app/models/component-model/parsedFields";
 import {fieldtemplatesResolverModel} from "@app/models/resolvers/field-template-model";
 import {Step, questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
 import {FieldTemplatesResolver} from "@app/shared/resolvers/field-templates-resolver.service";
 import {HttpService} from "@app/shared/services/http.service";
 
+import { AddFieldComponent } from "../add-field/add-field.component";
+import { AddFieldFromTemplateComponent } from "../add-field-from-template/add-field-from-template.component";
+import { FormsModule } from "@angular/forms";
+import { FieldsComponent } from "../fields/fields.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { TranslateModule } from "@ngx-translate/core";
+
 @Component({
-  selector: "src-step",
-  templateUrl: "./step.component.html"
+    selector: "src-step",
+    templateUrl: "./step.component.html",
+    standalone: true,
+    imports: [AddFieldComponent, AddFieldFromTemplateComponent, FormsModule, FieldsComponent, TranslatorPipe, OrderByPipe, TranslateModule]
 })
 export class StepComponent implements OnInit {
+  private cdr = inject(ChangeDetectorRef);
+  private httpService = inject(HttpService);
+  protected fieldTemplates = inject(FieldTemplatesResolver);
+
   @Input() step: Step;
   @Input() parsedFields: ParsedFields;
   showAddQuestion: boolean = false;
   showAddQuestionFromTemplate: boolean = false;
   fieldTemplatesData: fieldtemplatesResolverModel[] = [];
 
-  constructor(private cdr: ChangeDetectorRef, private httpService: HttpService, protected fieldTemplates: FieldTemplatesResolver) {
-  }
-
   ngOnInit(): void {
     if (Array.isArray(this.fieldTemplates.dataModel)) {
       this.fieldTemplatesData = this.fieldTemplates.dataModel;
diff --git a/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.html b/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.html
index 2aeb5e2a95..def6e589cb 100644
--- a/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.html
+++ b/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.html
@@ -1,97 +1,125 @@
 <div class="config-item">
-    <div class="editorHeader row">
-        <span class="col-md-7" (click)="toggleEditing(); $event.stopPropagation();">
-            <span class="badge bg-primary">{{index + 1}}</span>
-            <span>{{step.label}}</span>
-        </span>
-        <span class="col-md-5 clearfix">
-            <span class="float-end">
-                <button *ngIf="index !== 0" class="actionButton btn btn-sm btn-primary" (click)="moveUp($event,index)" title="{{'Move up' | translate}}">
-                    <i class="fa-solid fa-chevron-up"></i>
-                </button>
-                <button *ngIf="index !== questionnaire.steps.length - 1" class="actionButton btn btn-sm btn-primary" (click)="moveDown($event,index)" title="{{'Move down' | translate}}">
-                    <i class="fa-solid fa-chevron-down"></i>
-                </button>
-                <button class="btn btn-sm btn-outline-secondary" *ngIf="!editing" (click)="toggleEditing(); $event.stopPropagation();">
-                    <span>{{ 'Edit' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-primary" *ngIf="editing" (click)="saveStep(step)">
-                    <span>{{ 'Save' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-outline-secondary" *ngIf="editing" (click)="toggleEditing(); $event.stopPropagation();">
-                    <span>{{ 'Cancel' | translate }}</span>
-                </button>
-                <button name="delStep" class="btn btn-sm btn-danger" (click)="deleteStep(step); $event.stopPropagation();">
-                    <span>{{ 'Delete' | translate }}</span>
-                </button>
-            </span>
-        </span>
-    </div>
-    <div *ngIf="editing">
-        <hr />
-        <div class="row">
-            <div class="form-group col-md-6">
-                <label>{{ 'Label' | translate }}</label>
-                <input name="step.label" class="form-control" [(ngModel)]="step.label" type="text" required />
-            </div>
+  <div class="editorHeader row">
+    <span class="col-md-7" (click)="toggleEditing(); $event.stopPropagation();">
+      <span class="badge bg-primary">{{index + 1}}</span>
+      <span>{{step.label}}</span>
+    </span>
+    <span class="col-md-5 clearfix">
+      <span class="float-end">
+        @if (index !== 0) {
+          <button class="actionButton btn btn-sm btn-primary" (click)="moveUp($event,index)" data-toggle="tooltip" title="{{'Move up' | translate}}">
+            <i class="fa-solid fa-chevron-up"></i>
+          </button>
+        }
+        @if (index !== questionnaire.steps.length - 1) {
+          <button class="actionButton btn btn-sm btn-primary" (click)="moveDown($event,index)" data-toggle="tooltip" title="{{'Move down' | translate}}">
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+        }
+        @if (!editing) {
+          <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(); $event.stopPropagation();">
+            <span>{{ 'Edit' | translate }}</span>
+          </button>
+        }
+        @if (editing) {
+          <button class="btn btn-sm btn-primary" (click)="saveStep(step)">
+            <span>{{ 'Save' | translate }}</span>
+          </button>
+        }
+        @if (editing) {
+          <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing(); $event.stopPropagation();">
+            <span>{{ 'Cancel' | translate }}</span>
+          </button>
+        }
+        <button name="delStep" class="btn btn-sm btn-danger" (click)="deleteStep(step); $event.stopPropagation();">
+          <span>{{ 'Delete' | translate }}</span>
+        </button>
+      </span>
+    </span>
+  </div>
+  @if (editing) {
+    <div>
+      <hr />
+      <div class="row">
+        <div class="form-group col-md-6">
+          <label>{{ 'Label' | translate }}</label>
+          <input name="step.label" class="form-control" [(ngModel)]="step.label" type="text" required />
         </div>
-        <div class="row">
-            <div class="form-group col-md-6">
-                <label>{{ 'Description' | translate }}</label>
-                <div>
-                    <textarea name="step.description" class="form-control" [(ngModel)]="step.description"></textarea>
-                </div>
-            </div>
+      </div>
+      <div class="row">
+        <div class="form-group col-md-6">
+          <label>{{ 'Description' | translate }}</label>
+          <div>
+            <textarea name="step.description" class="form-control" [(ngModel)]="step.description"></textarea>
+          </div>
         </div>
-        <div class="row">
-            <div class="form-group col-md-12" *ngIf="nodeResolver.dataModel.enable_scoring_system">
-                <label>{{ 'Triggered by score:' | translate }}</label>
-                <select name="step.triggered_by_score" class="form-select-custom" [(ngModel)]="step.triggered_by_score">
-                    <option value="0">{{ 'Low' | translate }}</option>
-                    <option value="1">{{ 'Medium' | translate }}</option>
-                    <option value="2">{{ 'High' | translate }}</option>
+      </div>
+      <div class="row">
+        @if (nodeResolver.dataModel.enable_scoring_system) {
+          <div class="form-group col-md-12">
+            <label>{{ 'Triggered by score:' | translate }}</label>
+            <select name="step.triggered_by_score" class="form-select-custom" [(ngModel)]="step.triggered_by_score">
+              <option value="0">{{ 'Low' | translate }}</option>
+              <option value="1">{{ 'Medium' | translate }}</option>
+              <option value="2">{{ 'High' | translate }}</option>
+            </select>
+          </div>
+        }
+        <div class="form-group col-md-12">
+          <label>
+            <span>{{ 'Trigger conditions' | translate }}</span>
+            <button class="btn btn-sm btn-primary show-add-trigger-btn" (click)="toggleAddTrigger()">
+              <i class="fa-solid fa-plus"></i>
+              <span>{{ 'Add' | translate }}</span>
+            </button>
+          </label>
+          @if (showAddTrigger) {
+            <div class="col-md-12">
+              <div class="form-group">
+                <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.field" required>
+                  @for (field of parsedFields.fields; track field) {
+                    <option [value]="field.id">{{ field.label }}
+                    </option>
+                  }
                 </select>
-            </div>
-            <div class="form-group col-md-12">
-                <label>
-                    <span>{{ 'Trigger conditions' | translate }}</span>
-                    <button class="btn btn-sm btn-primary show-add-trigger-btn" (click)="toggleAddTrigger()">
-                        <i class="fa-solid fa-plus"></i>
-                        <span>{{ 'Add' | translate }}</span>
-                    </button>
-                </label>
-                <div *ngIf="showAddTrigger" class="col-md-12">
-                    <div class="form-group">
-                        <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.field" required>
-                            <option *ngFor="let field of parsedFields.fields" [value]="field.id">{{ field.label }}
-                            </option>
-                        </select>
-                    </div>
-                    <div *ngIf="new_trigger.field" class="form-group">
-                        <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.option" required>
-                            <option *ngFor="let option of parsedFields.fields_by_id[new_trigger.field].options" [value]="option.id">{{ option.label }}</option>
-                        </select>
-                    </div>
-                    <div *ngIf="new_trigger.field" class="form-group">
-                        <input class="form-check-input" name="new_trigger.sufficient" [(ngModel)]="new_trigger.sufficient" type="checkbox">
-                        <label>{{ 'Sufficient' | translate }}</label>
-                    </div>
-                    <div class="form-group">
-                        <button id="add-step-btn" class="btn btn-primary" [disabled]="!new_trigger.field || !new_trigger.option" (click)="addTrigger()">
-                            <i class="fa-solid fa-plus"></i>
-                            <span>{{ 'Add' | translate }}</span>
-                        </button>
-                    </div>
+              </div>
+              @if (new_trigger.field) {
+                <div class="form-group">
+                  <select name="type" class="form-select-custom" [(ngModel)]="new_trigger.option" required>
+                    @for (option of parsedFields.fields_by_id[new_trigger.field].options; track option) {
+                      <option [value]="option.id">{{ option.label }}</option>
+                    }
+                  </select>
                 </div>
-                <div *ngFor="let trigger of step.triggered_by_options" class="nested">
-                    <button class="btn btn-sm btn-danger" (click)="delTrigger(trigger)">
-                        <i class="fa-solid fa-times"></i>
-                    </button>
-                    <span>{{ parsedFields.fields_by_id[trigger.field].label }}</span>: <span>{{ parsedFields.options_by_id[trigger.option].label }}</span>
-                    <span *ngIf="trigger.sufficient">({{ 'Sufficient' | translate }})</span>
+              }
+              @if (new_trigger.field) {
+                <div class="form-group">
+                  <input class="form-check-input" name="new_trigger.sufficient" [(ngModel)]="new_trigger.sufficient" type="checkbox">
+                  <label>{{ 'Sufficient' | translate }}</label>
                 </div>
+              }
+              <div class="form-group">
+                <button id="add-step-btn" class="btn btn-primary" [disabled]="!new_trigger.field || !new_trigger.option" (click)="addTrigger()">
+                  <i class="fa-solid fa-plus"></i>
+                  <span>{{ 'Add' | translate }}</span>
+                </button>
+              </div>
+            </div>
+          }
+          @for (trigger of step.triggered_by_options; track trigger) {
+            <div class="nested">
+              <button class="btn btn-sm btn-danger" (click)="delTrigger(trigger)">
+                <i class="fa-solid fa-times"></i>
+              </button>
+              <span>{{ parsedFields.fields_by_id[trigger.field].label }}</span>: <span>{{ parsedFields.options_by_id[trigger.option].label }}</span>
+              @if (trigger.sufficient) {
+                <span>({{ 'Sufficient' | translate }})</span>
+              }
             </div>
+          }
         </div>
-        <src-step [step]="step" [parsedFields]="parsedFields"></src-step>
+      </div>
+      <src-step [step]="step" [parsedFields]="parsedFields"></src-step>
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.ts b/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.ts
index 7efe76eaa9..3cef01124f 100644
--- a/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.ts
+++ b/client/app/src/pages/admin/questionnaires/steps-list/steps-list.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
@@ -11,11 +11,25 @@ import {Step, questionnaireResolverModel} from "@app/models/resolvers/questionna
 import {ParsedFields} from "@app/models/component-model/parsedFields";
 import {TriggeredByOption} from "@app/models/app/shared-public-model";
 
+import { FormsModule } from "@angular/forms";
+import { StepComponent } from "../step/step.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
+
 @Component({
-  selector: "src-steps-list",
-  templateUrl: "./steps-list.component.html"
+    selector: "src-steps-list",
+    templateUrl: "./steps-list.component.html",
+    standalone: true,
+    imports: [FormsModule, StepComponent, TranslatorPipe, TranslateModule]
 })
 export class StepsListComponent implements OnInit {
+  private utilsService = inject(UtilsService);
+  private questionnaireService = inject(QuestionnaireService);
+  private modalService = inject(NgbModal);
+  private fieldUtilities = inject(FieldUtilitiesService);
+  protected nodeResolver = inject(NodeResolver);
+  private httpService = inject(HttpService);
+
   @Input() step: Step;
   @Input() steps: Step[];
   @Input() questionnaire: questionnaireResolverModel;
@@ -29,9 +43,6 @@ export class StepsListComponent implements OnInit {
     sufficient: true,
   };
 
-  constructor(private utilsService: UtilsService, private questionnaireService: QuestionnaireService, private modalService: NgbModal, private fieldUtilities: FieldUtilitiesService, protected nodeResolver: NodeResolver, private httpService: HttpService) {
-  }
-
   ngOnInit(): void {
     this.parsedFields = this.fieldUtilities.parseQuestionnaire(this.questionnaire, {
       fields: [],
diff --git a/client/app/src/pages/admin/questionnaires/steps/steps.component.html b/client/app/src/pages/admin/questionnaires/steps/steps.component.html
index 7e6530eb32..605a95d298 100644
--- a/client/app/src/pages/admin/questionnaires/steps/steps.component.html
+++ b/client/app/src/pages/admin/questionnaires/steps/steps.component.html
@@ -1,43 +1,49 @@
 <div id="StepsEditBox">
-    <div class="row">
-        <span class="col-md-8">
-            <span>{{ 'Steps' | translate }}</span>
-            <button class="btn btn-sm btn-primary show-add-step-btn" name="new_step" (click)="toggleAddStep()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{ 'Add' | translate }}</span>
-            </button>
-        </span>
-    </div>
-    <div id="StepAddBox" class="row" *ngIf="showAddStep">
-        <div class="col-md-6">
-            <form #newStepForm="ngForm" (ngSubmit)="addStep(); toggleAddStep()">
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>{{ 'Label' | translate }}</label>
-                            <input name="new_step.label" class="form-control" [(ngModel)]="new_step.label" type="text" required>
-                            <div class="text-danger" *ngIf="newStepForm.form.get('label')?.errors?.['required']">
-                                <span>{{ 'This field is mandatory' | translate }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="form-group clearfix">
-                            <button id="add-step-btn" class="float-start btn btn-primary" [disabled]="newStepForm.invalid">
-                                <i class="fa-solid fa-plus"></i>
-                                <span>{{ 'Add' | translate }}</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-    <div class="row">
-        <div *ngFor="let stepData of questionnaire.steps; let index = index" class="col-md-12">
-            <src-steps-list [step]="stepData" [questionnaire]="questionnaire" [steps]="questionnaire.steps" [index]="index"></src-steps-list>
-        </div>
+  <div class="row">
+    <span class="col-md-8">
+      <span>{{ 'Steps' | translate }}</span>
+      <button class="btn btn-sm btn-primary show-add-step-btn" name="new_step" (click)="toggleAddStep()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{ 'Add' | translate }}</span>
+      </button>
+    </span>
+  </div>
+  @if (showAddStep) {
+    <div id="StepAddBox" class="row">
+      <div class="col-md-6">
+        <form #newStepForm="ngForm" (ngSubmit)="addStep(); toggleAddStep()">
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group">
+                <label>{{ 'Label' | translate }}</label>
+                <input name="new_step.label" class="form-control" [(ngModel)]="new_step.label" type="text" required>
+                @if (newStepForm.form.get('label')?.errors?.['required']) {
+                  <div class="text-danger">
+                    <span>{{ 'This field is mandatory' | translate }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group clearfix">
+                <button id="add-step-btn" class="float-start btn btn-primary" [disabled]="newStepForm.invalid">
+                  <i class="fa-solid fa-plus"></i>
+                  <span>{{ 'Add' | translate }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
     </div>
+  }
+  <div class="row">
+    @for (stepData of questionnaire.steps; track stepData; let index = $index) {
+      <div class="col-md-12">
+        <src-steps-list [step]="stepData" [questionnaire]="questionnaire" [steps]="questionnaire.steps" [index]="index"></src-steps-list>
+      </div>
+    }
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/questionnaires/steps/steps.component.ts b/client/app/src/pages/admin/questionnaires/steps/steps.component.ts
index 61ec5abb53..aa9ad59f7d 100644
--- a/client/app/src/pages/admin/questionnaires/steps/steps.component.ts
+++ b/client/app/src/pages/admin/questionnaires/steps/steps.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
@@ -6,20 +6,29 @@ import {NewStep} from "@app/models/admin/new-step";
 import {QuestionnaireService} from "@app/pages/admin/questionnaires/questionnaire.service";
 import {Step, questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
 
+import { FormsModule } from "@angular/forms";
+import { StepsListComponent } from "../steps-list/steps-list.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
+
 @Component({
-  selector: "src-steps",
-  templateUrl: "./steps.component.html"
+    selector: "src-steps",
+    templateUrl: "./steps.component.html",
+    standalone: true,
+    imports: [FormsModule, StepsListComponent, TranslatorPipe, TranslateModule]
 })
 export class StepsComponent implements OnInit {
+  private questionnaireService = inject(QuestionnaireService);
+  protected node = inject(NodeResolver);
+  protected utilsService = inject(UtilsService);
+  private httpService = inject(HttpService);
+
   @Input() questionnaire: questionnaireResolverModel;
   showAddStep: boolean = false;
   step: Step;
   editing: boolean = false;
   new_step: { label: string } = {label: ""};
 
-  constructor(private questionnaireService: QuestionnaireService, protected node: NodeResolver, protected utilsService: UtilsService, private httpService: HttpService) {
-  }
-
   ngOnInit(): void {
     this.step = this.questionnaire.steps[0];
   }
diff --git a/client/app/src/pages/admin/settings/settings-routing.module.ts b/client/app/src/pages/admin/settings/settings-routing.module.ts
deleted file mode 100644
index f64fd16fc3..0000000000
--- a/client/app/src/pages/admin/settings/settings-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {SettingsComponent} from "@app/pages/admin/settings/settings.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: SettingsComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class SettingsRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/settings/settings.component.html b/client/app/src/pages/admin/settings/settings.component.html
index 3b40a1b514..a17cb410bc 100644
--- a/client/app/src/pages/admin/settings/settings.component.html
+++ b/client/app/src/pages/admin/settings/settings.component.html
@@ -1,28 +1,28 @@
 <form name="contentForm" #contentForm="ngForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-tab1 [contentForm]="contentForm"></src-tab1>
-    </ng-template>
-    <ng-template #tab2>
-        <src-tab2 [contentForm]="contentForm"></src-tab2>
-    </ng-template>
-    <ng-template #tab3>
-        <src-tab3 [contentForm]="contentForm"></src-tab3>
-    </ng-template>
-    <ng-template #tab4>
-        <src-tab4 [contentForm]="contentForm"></src-tab4>
-    </ng-template>
-    <ng-template #tab5>
-        <src-tab5 [contentForm]="contentForm"></src-tab5>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-tab1 [contentForm]="contentForm"></src-tab1>
+  </ng-template>
+  <ng-template #tab2>
+    <src-tab2 [contentForm]="contentForm"></src-tab2>
+  </ng-template>
+  <ng-template #tab3>
+    <src-tab3 [contentForm]="contentForm"></src-tab3>
+  </ng-template>
+  <ng-template #tab4>
+    <src-tab4 [contentForm]="contentForm"></src-tab4>
+  </ng-template>
+  <ng-template #tab5>
+    <src-tab5 [contentForm]="contentForm"></src-tab5>
+  </ng-template>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/settings/settings.component.ts b/client/app/src/pages/admin/settings/settings.component.ts
index 68ccc0315c..a0302cd92a 100644
--- a/client/app/src/pages/admin/settings/settings.component.ts
+++ b/client/app/src/pages/admin/settings/settings.component.ts
@@ -1,4 +1,4 @@
-import {Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
+import { Component, TemplateRef, ViewChild, AfterViewInit, ChangeDetectorRef, inject } from "@angular/core";
 import {NodeResolver} from "app/src/shared/resolvers/node.resolver";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {Tab} from "@app/models/component-model/tab";
@@ -7,12 +7,23 @@ import {Tab2Component} from "@app/pages/admin/settings/tab2/tab2.component";
 import {Tab3Component} from "@app/pages/admin/settings/tab3/tab3.component";
 import {Tab4Component} from "@app/pages/admin/settings/tab4/tab4.component";
 import {Tab5Component} from "@app/pages/admin/settings/tab5/tab5.component";
+import { FormsModule } from "@angular/forms";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-admin-settings",
-  templateUrl: "./settings.component.html"
+    selector: "src-admin-settings",
+    templateUrl: "./settings.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, Tab1Component, Tab2Component, Tab3Component, Tab4Component, Tab5Component, TranslatorPipe, TranslateModule]
 })
-export class SettingsComponent implements AfterViewInit {
+export class AdminSettingsComponent implements AfterViewInit {
+  protected node = inject(NodeResolver);
+  protected authenticationService = inject(AuthenticationService);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<Tab1Component>;
   @ViewChild("tab2") tab2!: TemplateRef<Tab2Component>;
   @ViewChild("tab3") tab3!: TemplateRef<Tab3Component>;
@@ -22,10 +33,6 @@ export class SettingsComponent implements AfterViewInit {
   nodeData: NodeResolver;
   active: string;
 
-  constructor(protected node: NodeResolver, protected authenticationService: AuthenticationService, private cdr: ChangeDetectorRef) {
-
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "Settings";
diff --git a/client/app/src/pages/admin/settings/settings.module.ts b/client/app/src/pages/admin/settings/settings.module.ts
deleted file mode 100644
index d143b82060..0000000000
--- a/client/app/src/pages/admin/settings/settings.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {SettingsRoutingModule} from "@app/pages/admin/settings/settings-routing.module";
-import {SettingsComponent} from "@app/pages/admin/settings/settings.component";
-import {RouterModule} from "@angular/router";
-import {NgbNavModule, NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {SharedModule} from "@app/shared.module";
-import {Tab2Component} from "@app/pages/admin/settings/tab2/tab2.component";
-import {Tab3Component} from "@app/pages/admin/settings/tab3/tab3.component";
-import {Tab4Component} from "@app/pages/admin/settings/tab4/tab4.component";
-import {Tab5Component} from "@app/pages/admin/settings/tab5/tab5.component";
-import {FormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {TranslateModule} from "@ngx-translate/core";
-
-@NgModule({
-  declarations: [
-    SettingsComponent,
-    Tab2Component,
-    Tab3Component,
-    Tab4Component,
-    Tab5Component
-  ],
-  imports: [
-    CommonModule,
-    SettingsRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule, TranslateModule
-  ]
-})
-export class SettingsModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/settings/tab1/tab1.component.html b/client/app/src/pages/admin/settings/tab1/tab1.component.html
index 28b7214b92..b95046a889 100644
--- a/client/app/src/pages/admin/settings/tab1/tab1.component.html
+++ b/client/app/src/pages/admin/settings/tab1/tab1.component.html
@@ -1,66 +1,74 @@
 <div class="row">
-    <div class="col-md-6">
-        <div class="form-group">
-            <label>{{ 'Logo' | translate }}</label>
-            <div appImageUpload [imageUploadModel]="nodeResolver.dataModel" [imageUploadModelAttr]="'logo'" [imageUploadId]="'logo'"></div>
-        </div>
-        <div class="form-group">
-            <label id="project_name">{{ 'Project name' | translate }}</label>
-            <input name="node.dataModel.name" class="form-control" [(ngModel)]="nodeResolver.dataModel.name" type="text" required />
-        </div>
-        <div class="form-group">
-            <label>{{ 'Description' | translate }}</label>
-            <div>
-                <textarea name="node.dataModel.description" class="form-control" [(ngModel)]="nodeResolver.dataModel.description"></textarea>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>{{ 'Homepage title' | translate }}</label>
-            <div>
-                <textarea class="form-control" name="node.dataModel.header_title_homepage" [(ngModel)]="nodeResolver.dataModel.header_title_homepage"></textarea>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>{{ 'Presentation' | translate }}</label>
-            <div>
-                <textarea class="form-control" name="node.dataModel.presentation" [(ngModel)]="nodeResolver.dataModel.presentation"></textarea>
-            </div>
-        </div>
-        <div class="form-group" *ngIf="authenticationService.session?.role === 'admin'">
-            <label>{{ 'Question to solicit possible whistleblowers' | translate }}</label>
-            <div>
-                <textarea name="node.dataModel.whistleblowing_question" class="form-control" [(ngModel)]="nodeResolver.dataModel.whistleblowing_question"></textarea>
-            </div>
-        </div>
-        <div class="form-group" *ngIf="authenticationService.session?.role === 'admin'">
-            <label>{{ 'Whistleblowing button' | translate }}</label>
-            <input name="nodeResolver.dataModel.whistleblowing_button" class="form-control" [(ngModel)]="nodeResolver.dataModel.whistleblowing_button" type="text" />
-        </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant || ['default', 'demo'].indexOf(appDataService.public.node.mode) !== -1">
-            <label>{{ 'Disclaimer' | translate }}</label>
-            <div>
-                <textarea name="nodeResolver.dataModel.disclaimer_text" class="form-control" [(ngModel)]="nodeResolver.dataModel.disclaimer_text"></textarea>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>{{'Whistleblowing Policy'|translate}}</label>
-            <input name="footer_whistleblowing_policy" class="form-control" [(ngModel)]="nodeResolver.dataModel.footer_whistleblowing_policy" [pattern]="Constants.secureLocalUrlRegexp" [ngClass]="{'is-invalid': contentForm.form.get('footer_whistleblowing_policy')?.errors?.['pattern']}" type="text" />
-        </div>
-        <div class="form-group">
-            <label>{{'Privacy Policy'|translate}}</label>
-            <input name="footer_privacy_policy" class="form-control" [(ngModel)]="nodeResolver.dataModel.footer_privacy_policy" [pattern]="Constants.secureLocalUrlRegexp" [ngClass]="{'is-invalid': contentForm.form.get('footer_privacy_policy')?.errors?.['pattern']}" type="text" />
+  <div class="col-md-6">
+    <div class="form-group">
+      <label>{{ 'Logo' | translate }}</label>
+      <div appImageUpload [imageUploadModel]="nodeResolver.dataModel" [imageUploadModelAttr]="'logo'" [imageUploadId]="'logo'"></div>
+    </div>
+    <div class="form-group">
+      <label id="project_name">{{ 'Project name' | translate }}</label>
+      <input name="node.dataModel.name" class="form-control" [(ngModel)]="nodeResolver.dataModel.name" type="text" required />
+    </div>
+    <div class="form-group">
+      <label>{{ 'Description' | translate }}</label>
+      <div>
+        <textarea name="node.dataModel.description" class="form-control" [(ngModel)]="nodeResolver.dataModel.description"></textarea>
+      </div>
+    </div>
+    <div class="form-group">
+      <label>{{ 'Homepage title' | translate }}</label>
+      <div>
+        <textarea class="form-control" name="node.dataModel.header_title_homepage" [(ngModel)]="nodeResolver.dataModel.header_title_homepage"></textarea>
+      </div>
+    </div>
+    <div class="form-group">
+      <label>{{ 'Presentation' | translate }}</label>
+      <div>
+        <textarea class="form-control" name="node.dataModel.presentation" [(ngModel)]="nodeResolver.dataModel.presentation"></textarea>
+      </div>
+    </div>
+    @if (authenticationService.session?.role === 'admin') {
+      <div class="form-group">
+        <label>{{ 'Question to solicit possible whistleblowers' | translate }}</label>
+        <div>
+          <textarea name="node.dataModel.whistleblowing_question" class="form-control" [(ngModel)]="nodeResolver.dataModel.whistleblowing_question"></textarea>
         </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant || ['default', 'demo'].indexOf(appDataService.public.node.mode) !== -1">
-            <label>{{ 'Footer' | translate }}</label>
-            <div>
-                <textarea name="nodeResolver.dataModel.footer" class="form-control" [(ngModel)]="nodeResolver.dataModel.footer"></textarea>
-            </div>
+      </div>
+    }
+    @if (authenticationService.session?.role === 'admin') {
+      <div class="form-group">
+        <label>{{ 'Whistleblowing button' | translate }}</label>
+        <input name="nodeResolver.dataModel.whistleblowing_button" class="form-control" [(ngModel)]="nodeResolver.dataModel.whistleblowing_button" type="text" />
+      </div>
+    }
+    @if (nodeResolver.dataModel.root_tenant || ['default', 'demo'].indexOf(appDataService.public.node.mode) !== -1) {
+      <div class="form-group">
+        <label>{{ 'Disclaimer' | translate }}</label>
+        <div>
+          <textarea name="nodeResolver.dataModel.disclaimer_text" class="form-control" [(ngModel)]="nodeResolver.dataModel.disclaimer_text"></textarea>
         </div>
-        <div class="form-group">
-            <button class="btn btn-primary" id="save_settings" [disabled]="contentForm.invalid" (click)="updateNode()" type="submit">
-                <i class="fa-solid fa-check"></i>
-                <span>{{ 'Save' | translate }}</span>
-            </button>
+      </div>
+    }
+    <div class="form-group">
+      <label>{{'Whistleblowing Policy'|translate}}</label>
+      <input name="footer_whistleblowing_policy" class="form-control" [(ngModel)]="nodeResolver.dataModel.footer_whistleblowing_policy" [pattern]="Constants.secureLocalUrlRegexp" [ngClass]="{'is-invalid': contentForm.form.get('footer_whistleblowing_policy')?.errors?.['pattern']}" type="text" />
+    </div>
+    <div class="form-group">
+      <label>{{'Privacy Policy'|translate}}</label>
+      <input name="footer_privacy_policy" class="form-control" [(ngModel)]="nodeResolver.dataModel.footer_privacy_policy" [pattern]="Constants.secureLocalUrlRegexp" [ngClass]="{'is-invalid': contentForm.form.get('footer_privacy_policy')?.errors?.['pattern']}" type="text" />
+    </div>
+    @if (nodeResolver.dataModel.root_tenant || ['default', 'demo'].indexOf(appDataService.public.node.mode) !== -1) {
+      <div class="form-group">
+        <label>{{ 'Footer' | translate }}</label>
+        <div>
+          <textarea name="nodeResolver.dataModel.footer" class="form-control" [(ngModel)]="nodeResolver.dataModel.footer"></textarea>
         </div>
+      </div>
+    }
+    <div class="form-group">
+      <button class="btn btn-primary" id="save_settings" [disabled]="contentForm.invalid" (click)="updateNode()" type="submit">
+        <i class="fa-solid fa-check"></i>
+        <span>{{ 'Save' | translate }}</span>
+      </button>
     </div>
+  </div>
 </div>
diff --git a/client/app/src/pages/admin/settings/tab1/tab1.component.ts b/client/app/src/pages/admin/settings/tab1/tab1.component.ts
index 93ba9f5187..2c627ff268 100644
--- a/client/app/src/pages/admin/settings/tab1/tab1.component.ts
+++ b/client/app/src/pages/admin/settings/tab1/tab1.component.ts
@@ -1,24 +1,39 @@
-import {Component, Input} from "@angular/core";
-import {ControlContainer, NgForm} from "@angular/forms";
+import { Component, Input, inject } from "@angular/core";
+import { ControlContainer, NgForm, FormsModule } from "@angular/forms";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {Constants} from "@app/shared/constants/constants";
 import {AppDataService} from "@app/app-data.service";
+import { ImageUploadDirective } from "../../../../shared/directive/image-upload.directive";
+import { NgClass } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-tab1",
-  templateUrl: "./tab1.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+    selector: "src-tab1",
+    templateUrl: "./tab1.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [
+    ImageUploadDirective,
+    FormsModule,
+    NgClass,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class Tab1Component {
+  private appConfigService = inject(AppConfigService);
+  protected nodeResolver = inject(NodeResolver);
+  protected appDataService = inject(AppDataService);
+  protected authenticationService = inject(AuthenticationService);
+  private utilsService = inject(UtilsService);
+
   protected readonly Constants = Constants;
   @Input() contentForm: NgForm;
 
-  constructor(private appConfigService: AppConfigService, protected nodeResolver: NodeResolver,protected appDataService:AppDataService, protected authenticationService: AuthenticationService, private utilsService: UtilsService) {
-  }
-
   updateNode() {
     this.utilsService.update(this.nodeResolver.dataModel).subscribe(_ => {
       this.appConfigService.reinit(false);
diff --git a/client/app/src/pages/admin/settings/tab2/tab2.component.html b/client/app/src/pages/admin/settings/tab2/tab2.component.html
index 37a1c46ac3..f102b9f6c6 100644
--- a/client/app/src/pages/admin/settings/tab2/tab2.component.html
+++ b/client/app/src/pages/admin/settings/tab2/tab2.component.html
@@ -1,47 +1,51 @@
-<div class="row mt-4" *ngIf="authenticationData.session">
+@if (authenticationData.session) {
+  <div class="row mt-4">
     <div class="col-md-10" [ngClass]="{'container-disabled': !canUploadFiles()}">
-        <div class="form-group">
-            <div>
-                <ng-container *ngFor="let admin_file of admin_files">
-                    <src-admin-file [adminFile]="admin_file"></src-admin-file>
-                </ng-container>
-            </div>
-            <div class="mb-2">
-                <div>{{ 'Files' | translate }}</div>
-                <div class="uploadfile file-custom">
-                    <span class="custom-file">
-                        <input #uploader id="customFile" type="file" [style.display]="'none'" class="custom-file-input" (change)="onFileSelected(uploader.files)" />
-                        <label class="btn btn-sm btn-primary" for="customFile">
-                            <i class="fa-solid fa-upload"></i>
-                            <span>{{ 'Upload' | translate }}</span>
-                        </label>
-                    </span>
-                </div>
-            </div>
-            <div class="table-responsive">
-                <table class="table table-striped" id="fileList">
-                    <tbody id="fileListBody">
-                    <tr *ngFor="let file of files | orderBy:'name'">
-                        <td id="file_name">{{file.name}}</td>
-                        <td>
-                            <a class="btn btn-sm btn-primary" [href]="'s/' + file.name" [download]="file.name">
-                                <i class="fa-solid fa-download"></i>
-                                <span>{{ 'Download' | translate }}</span>
-                            </a>
-                            <button class="btn btn-sm btn-danger" (click)="deleteFile('api/admin/files/' + file.id)">
-                                <i class="fa-solid fa-trash"></i>
-                                <span id="delete">{{ 'Delete' | translate }}</span>
-                            </button>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
+      <div class="form-group">
+        <div>
+          @for (admin_file of admin_files; track admin_file) {
+            <src-admin-file [adminFile]="admin_file"></src-admin-file>
+          }
         </div>
+        <div class="mb-2">
+          <div>{{ 'Files' | translate }}</div>
+          <div class="uploadfile file-custom">
+            <span class="custom-file">
+              <input #uploader id="customFile" type="file" [style.display]="'none'" class="custom-file-input" (change)="onFileSelected(uploader.files)" />
+              <label class="btn btn-sm btn-primary" for="customFile">
+                <i class="fa-solid fa-upload"></i>
+                <span>{{ 'Upload' | translate }}</span>
+              </label>
+            </span>
+          </div>
+        </div>
+        <div class="table-responsive">
+          <table class="table table-striped" id="fileList">
+            <tbody id="fileListBody">
+              @for (file of files | orderBy:'name'; track file) {
+                <tr>
+                  <td id="file_name">{{file.name}}</td>
+                  <td>
+                    <a class="btn btn-sm btn-primary" [href]="'s/' + file.name" [download]="file.name">
+                      <i class="fa-solid fa-download"></i>
+                      <span>{{ 'Download' | translate }}</span>
+                    </a>
+                    <button class="btn btn-sm btn-danger" (click)="deleteFile('api/admin/files/' + file.id)">
+                      <i class="fa-solid fa-trash"></i>
+                      <span id="delete">{{ 'Delete' | translate }}</span>
+                    </button>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
     <div class="col-md-2">
-        <div class="form-check form-switch">
-            <app-switch name="authenticationData.session.permissions.can_upload_files_switch" [isChecked]="permissionStatus" [can_upload_files]="authenticationData.session.permissions.can_upload_files" [label]="authenticationData.session.permissions.can_upload_files ? 'Enabled' : 'Disabled'" (click)="togglePermissionUploadFiles()"></app-switch>
-        </div>
+      <div class="form-check form-switch">
+        <app-switch name="authenticationData.session.permissions.can_upload_files_switch" [isChecked]="permissionStatus" [can_upload_files]="authenticationData.session.permissions.can_upload_files" [label]="authenticationData.session.permissions.can_upload_files ? 'Enabled' : 'Disabled'" (click)="togglePermissionUploadFiles()"></app-switch>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/settings/tab2/tab2.component.ts b/client/app/src/pages/admin/settings/tab2/tab2.component.ts
index 67e3446dd9..8c0db21e17 100644
--- a/client/app/src/pages/admin/settings/tab2/tab2.component.ts
+++ b/client/app/src/pages/admin/settings/tab2/tab2.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
+import { Component, ElementRef, Input, OnInit, ViewChild, inject } from "@angular/core";
 import {NgForm} from "@angular/forms";
 import * as Flow from "@flowjs/flow.js";
 import type {FlowFile} from "@flowjs/flow.js";
@@ -10,12 +10,26 @@ import {UtilsService} from "@app/shared/services/utils.service";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
 import {AdminFile} from "@app/models/component-model/admin-file";
+import { NgClass } from "@angular/common";
+import { AdminFileComponent } from "../../../../shared/partials/admin-file/admin-file.component";
+import { SwitchComponent } from "../../../../shared/components/switch/switch.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-tab2",
-  templateUrl: "./tab2.component.html"
+    selector: "src-tab2",
+    templateUrl: "./tab2.component.html",
+    standalone: true,
+    imports: [NgClass, AdminFileComponent, SwitchComponent, TranslatorPipe, OrderByPipe, TranslateModule]
 })
 export class Tab2Component implements OnInit {
+  private appConfigService = inject(AppConfigService);
+  private preferenceResolver = inject(PreferenceResolver);
+  private utilsService = inject(UtilsService);
+  private nodeResolver = inject(NodeResolver);
+  private authenticationService = inject(AuthenticationService);
+
   @Input() contentForm: NgForm;
   @ViewChild("flowAdvanced", {static: true}) flowAdvanced: FlowDirective;
   @ViewChild("uploader") uploaderInput: ElementRef;
@@ -47,9 +61,6 @@ export class Tab2Component implements OnInit {
     }
   ];
 
-  constructor(private appConfigService: AppConfigService, private preferenceResolver: PreferenceResolver, private utilsService: UtilsService, private nodeResolver: NodeResolver, private authenticationService: AuthenticationService) {
-  }
-
   ngOnInit(): void {
     this.preferenceData = this.preferenceResolver.dataModel;
     this.authenticationData = this.authenticationService;
diff --git a/client/app/src/pages/admin/settings/tab3/tab3.component.html b/client/app/src/pages/admin/settings/tab3/tab3.component.html
index 63ca55ff5a..d2a19234a4 100644
--- a/client/app/src/pages/admin/settings/tab3/tab3.component.html
+++ b/client/app/src/pages/admin/settings/tab3/tab3.component.html
@@ -1,50 +1,62 @@
 <div class="row">
-    <div class="col-md-6">
-        <input name="node.dataModel.languages_enabled" [(ngModel)]="nodeResolver.dataModel.languages_enabled" class="d-none" />
-        <input name="node.dataModel.default_language" [(ngModel)]="nodeResolver.dataModel.default_language" class="d-none" />
-        <div class="form-group">
-            <label>{{ 'Languages' | translate }}</label>
-            <button class="btn btn-sm btn-primary add-language-btn" (click)="toggleLangSelect()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{ 'Add' | translate }}</span>
-            </button>
-            <div>
-                <br />
-                <div id="LanguageAdder" class="row" *ngIf="showLangSelect">
-                    <div class="col-md-12">
-                        <ng-select [(ngModel)]="selected.value" [items]="languagesNotEnabled | filter:'name':selected.value" bindLabel="name" [searchable]="true" [placeholder]="'Search' | translate" (ngModelChange)="enableLanguage($event)">
-                            <ng-template ng-option-tmp let-item="item">
-                                <span [innerHTML]="item.name"></span>
-                                <span>[{{ item.code }}]</span>
-                            </ng-template>
-                        </ng-select>
-                    </div>
-                </div>
-                <br />
-                <ul class="selection-list">
-                    <li *ngFor="let lang_code of nodeResolver.dataModel.languages_enabled; let index = index">
-                        <span class="action-btns">
-                            <span *ngIf="lang_code === nodeResolver.dataModel.default_language" class="default-language">
-                                <i class="fa-solid fa-check"></i>
-                            </span>
-                            <span *ngIf="lang_code !== nodeResolver.dataModel.default_language" class="non-default-language" title="{{'Use as default' | translate}}" (click)="nodeResolver.dataModel.default_language = lang_code">
-                                <i class="fa-solid fa-check"></i>
-                            </span>
-                            <span *ngIf="lang_code !== nodeResolver.dataModel.default_language" (click)="removeLang(index, lang_code)" title="{{'Remove' | translate}}" class="remove-lang-btn">
-                                <i class="fa-solid fa-times"></i>
-                            </span>
-                            <i *ngIf="lang_code === nodeResolver.dataModel.default_language" class="fa-solid fa-times disabled-icon"></i>
-                        </span>
-                        <label>{{ this.languageUtils.languages_supported[lang_code].name }} [{{ lang_code }}]</label>
-                    </li>
-                </ul>
+  <div class="col-md-6">
+    <input name="node.dataModel.languages_enabled" [(ngModel)]="nodeResolver.dataModel.languages_enabled" class="d-none" />
+    <input name="node.dataModel.default_language" [(ngModel)]="nodeResolver.dataModel.default_language" class="d-none" />
+    <div class="form-group">
+      <label>{{ 'Languages' | translate }}</label>
+      <button class="btn btn-sm btn-primary add-language-btn" (click)="toggleLangSelect()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{ 'Add' | translate }}</span>
+      </button>
+      <div>
+        <br />
+        @if (showLangSelect) {
+          <div id="LanguageAdder" class="row">
+            <div class="col-md-12">
+              <ng-select [(ngModel)]="selected.value" [items]="languagesNotEnabled | filter:'name':selected.value" bindLabel="name" [searchable]="true" [placeholder]="'Search' | translate" (ngModelChange)="enableLanguage($event)">
+                <ng-template ng-option-tmp let-item="item">
+                  <span [innerHTML]="item.name"></span>
+                  <span>[{{ item.code }}]</span>
+                </ng-template>
+              </ng-select>
             </div>
-        </div>
-        <div class="form-group">
-            <button class="btn btn-primary" id="save_language" [disabled]="contentForm.invalid" (click)="updateNode()" type="submit">
-                <i class="fa-solid fa-check"></i>
-                <span>{{ 'Save' | translate }}</span>
-            </button>
-        </div>
+          </div>
+        }
+        <br />
+        <ul class="selection-list">
+          @for (lang_code of nodeResolver.dataModel.languages_enabled; track lang_code; let index = $index) {
+            <li>
+              <span class="action-btns">
+                @if (lang_code === nodeResolver.dataModel.default_language) {
+                  <span class="default-language">
+                    <i class="fa-solid fa-check"></i>
+                  </span>
+                }
+                @if (lang_code !== nodeResolver.dataModel.default_language) {
+                  <span class="non-default-language" data-toggle="tooltip" title="{{'Use as default' | translate}}" (click)="nodeResolver.dataModel.default_language = lang_code">
+                    <i class="fa-solid fa-check"></i>
+                  </span>
+                }
+                @if (lang_code !== nodeResolver.dataModel.default_language) {
+                  <span (click)="removeLang(index, lang_code)" data-toggle="tooltip" title="{{'Remove' | translate}}" class="remove-lang-btn">
+                    <i class="fa-solid fa-times"></i>
+                  </span>
+                }
+                @if (lang_code === nodeResolver.dataModel.default_language) {
+                  <i class="fa-solid fa-times disabled-icon"></i>
+                }
+              </span>
+              <label>{{ this.languageUtils.languages_supported[lang_code].name }} [{{ lang_code }}]</label>
+            </li>
+          }
+        </ul>
+      </div>
     </div>
+    <div class="form-group">
+      <button class="btn btn-primary" id="save_language" [disabled]="contentForm.invalid" (click)="updateNode()" type="submit">
+        <i class="fa-solid fa-check"></i>
+        <span>{{ 'Save' | translate }}</span>
+      </button>
+    </div>
+  </div>
 </div>
diff --git a/client/app/src/pages/admin/settings/tab3/tab3.component.ts b/client/app/src/pages/admin/settings/tab3/tab3.component.ts
index 19e0bbd052..8e72dd7b60 100644
--- a/client/app/src/pages/admin/settings/tab3/tab3.component.ts
+++ b/client/app/src/pages/admin/settings/tab3/tab3.component.ts
@@ -1,5 +1,5 @@
-import {Component, Input, OnInit} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, Input, OnInit, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {LanguageUtils} from "@app/pages/admin/settings/helper-methods/language-utils";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
@@ -8,11 +8,24 @@ import {TranslationService} from "@app/services/helper/translation.service";
 import {AppDataService} from "@app/app-data.service";
 import {LanguagesSupported} from "@app/models/app/public-model";
 
+import { NgSelectComponent, NgOptionTemplateDirective } from "@ng-select/ng-select";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
+import { TranslateModule } from "@ngx-translate/core";
+
 @Component({
-  selector: "src-tab3",
-  templateUrl: "./tab3.component.html"
+    selector: "src-tab3",
+    templateUrl: "./tab3.component.html",
+    standalone: true,
+    imports: [FormsModule, NgSelectComponent, NgOptionTemplateDirective, TranslatorPipe, FilterPipe, TranslateModule]
 })
 export class Tab3Component implements OnInit {
+  private appDataService = inject(AppDataService);
+  private translationService = inject(TranslationService);
+  private appConfigService = inject(AppConfigService);
+  private utilsService = inject(UtilsService);
+  protected nodeResolver = inject(NodeResolver);
+
   @Input() contentForm: NgForm;
 
   showLangSelect = false;
@@ -20,9 +33,6 @@ export class Tab3Component implements OnInit {
   languageUtils: LanguageUtils
   languagesNotEnabled: LanguagesSupported[];
 
-  constructor(private appDataService: AppDataService, private translationService: TranslationService, private appConfigService: AppConfigService, private utilsService: UtilsService, protected nodeResolver: NodeResolver) {
-  }
-
   ngOnInit(): void {
     this.updateLanguages();
   }
diff --git a/client/app/src/pages/admin/settings/tab4/tab4.component.html b/client/app/src/pages/admin/settings/tab4/tab4.component.html
index b597f7635c..09ada1eb24 100644
--- a/client/app/src/pages/admin/settings/tab4/tab4.component.html
+++ b/client/app/src/pages/admin/settings/tab4/tab4.component.html
@@ -1,59 +1,69 @@
 <div class="row">
-    <div class="col-md-12">
-        <div class="form-group">
-            <label>{{'Language' | translate}}:</label>
-            <select class="form-select-custom" name="vars.language_to_customize" [(ngModel)]="vars.language_to_customize" (ngModelChange)="getl10n(vars.language_to_customize)">
-                <option *ngFor="let item of languageUtils.languages_enabled_selector" [value]="item.code">{{item.name}}</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label>{{'Add custom text' | translate}}</label>
-            <select class="form-select-custom" name="vars.text_to_customize" [(ngModel)]="vars.text_to_customize" (ngModelChange)="vars.custom_text = custom_texts[vars.text_to_customize] ? custom_texts[vars.text_to_customize] : default_texts[vars.text_to_customize]">
-                <option *ngFor="let item of custom_texts_selector" [value]="item.key">{{item.value}}</option>
-            </select>
-            <br><br>
-            <div *ngIf="vars.text_to_customize">
-                <label>{{'Custom text' | translate}}</label>
-                <div>
-                    <textarea class="form-control" name="vars.custom_text" [(ngModel)]="vars.custom_text"></textarea>
-                </div>
-                <br>
-            </div>
-            <div class="form-group clearfix">
-                <button id="addCustomTextButton" class="float-start btn btn-primary" [disabled]="!vars.text_to_customize" type="submit" (click)="custom_texts[vars.text_to_customize] = vars.custom_text; updateCustomText(custom_texts,vars.language_to_customize)">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>{{'Add' | translate}}</span>
-                </button>
-            </div>
+  <div class="col-md-12">
+    <div class="form-group">
+      <label>{{'Language' | translate}}:</label>
+      <select class="form-select-custom" name="vars.language_to_customize" [(ngModel)]="vars.language_to_customize" (ngModelChange)="getl10n(vars.language_to_customize)">
+        @for (item of languageUtils.languages_enabled_selector; track item) {
+          <option [value]="item.code">{{item.name}}</option>
+        }
+      </select>
+    </div>
+    <div class="form-group">
+      <label>{{'Add custom text' | translate}}</label>
+      <select class="form-select-custom" name="vars.text_to_customize" [(ngModel)]="vars.text_to_customize" (ngModelChange)="vars.custom_text = custom_texts[vars.text_to_customize] ? custom_texts[vars.text_to_customize] : default_texts[vars.text_to_customize]">
+        @for (item of custom_texts_selector; track item) {
+          <option [value]="item.key">{{item.value}}</option>
+        }
+      </select>
+      <br><br>
+      @if (vars.text_to_customize) {
+        <div>
+          <label>{{'Custom text' | translate}}</label>
+          <div>
+            <textarea class="form-control" name="vars.custom_text" [(ngModel)]="vars.custom_text"></textarea>
+          </div>
+          <br>
+          </div>
+        }
+        <div class="form-group clearfix">
+          <button id="addCustomTextButton" class="float-start btn btn-primary" [disabled]="!vars.text_to_customize" type="submit" (click)="custom_texts[vars.text_to_customize] = vars.custom_text; updateCustomText(custom_texts,vars.language_to_customize)">
+            <i class="fa-solid fa-plus"></i>
+            <span>{{'Add' | translate}}</span>
+          </button>
         </div>
+      </div>
     </div>
-</div>
-<br />
-<br />
-<div class="row" *ngIf="custom_texts">
-    <div class="col-md-12">
+  </div>
+  <br />
+  <br />
+  @if (custom_texts) {
+    <div class="row">
+      <div class="col-md-12">
         <div class="form-group">
-            <table class="table table-striped">
-                <thead>
-                <tr>
-                    <th>{{'Original text' | translate}}</th>
-                    <th>{{'Original translation' | translate}}</th>
-                    <th>{{'Custom translation' | translate}}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr *ngFor="let item of customTextsKeys()" [ngClass]="{'bg-danger': !default_texts[item.key]}" title="{{!default_texts[item.key] ? 'This custom text is no longer displayed on the platform. The original text has either changed or been removed.' : '' | translate}}">
-                    <td class="preformatted">{{ item.key }}</td>
-                    <td class="preformatted">{{ default_texts[item.key] }}</td>
-                    <td class="clearfix">
-                        <span class="preformatted">{{ custom_texts[item.key] }}</span>
-                        <button class="deleteCustomTextButton float-end btn btn-sm btn-danger" (click)="deleteCustomText(custom_texts,item.key); updateCustomText(custom_texts,vars.language_to_customize)">
-                            <i class="fa fa-times"></i>
-                        </button>
-                    </td>
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>{{'Original text' | translate}}</th>
+                <th>{{'Original translation' | translate}}</th>
+                <th>{{'Custom translation' | translate}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (item of customTextsKeys(); track item) {
+                <tr [ngClass]="{'bg-danger': !default_texts[item.key]}" data-toggle="tooltip" title="{{!default_texts[item.key] ? 'This custom text is no longer displayed on the platform. The original text has either changed or been removed.' : '' | translate}}">
+                  <td class="preformatted">{{ item.key }}</td>
+                  <td class="preformatted">{{ default_texts[item.key] }}</td>
+                  <td class="clearfix">
+                    <span class="preformatted">{{ custom_texts[item.key] }}</span>
+                    <button class="deleteCustomTextButton float-end btn btn-sm btn-danger" (click)="deleteCustomText(custom_texts,item.key); updateCustomText(custom_texts,vars.language_to_customize)">
+                      <i class="fa fa-times"></i>
+                    </button>
+                  </td>
                 </tr>
-                </tbody>
-            </table>
+              }
+            </tbody>
+          </table>
         </div>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  }
\ No newline at end of file
diff --git a/client/app/src/pages/admin/settings/tab4/tab4.component.ts b/client/app/src/pages/admin/settings/tab4/tab4.component.ts
index 1c6c7bce8a..42e0f9f675 100644
--- a/client/app/src/pages/admin/settings/tab4/tab4.component.ts
+++ b/client/app/src/pages/admin/settings/tab4/tab4.component.ts
@@ -1,14 +1,22 @@
-import {Component, Input, OnInit} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, Input, OnInit, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {LanguageUtils} from "@app/pages/admin/settings/helper-methods/language-utils";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-tab4",
-  templateUrl: "./tab4.component.html"
+    selector: "src-tab4",
+    templateUrl: "./tab4.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, TranslatorPipe, TranslateModule]
 })
 export class Tab4Component implements OnInit {
+  protected utilsService = inject(UtilsService);
+  protected nodeResolver = inject(NodeResolver);
+
   @Input() contentForm: NgForm;
 
   vars: { language_to_customize: string, text_to_customize: string, custom_text: string } = {
@@ -22,10 +30,6 @@ export class Tab4Component implements OnInit {
   customTextsExist: boolean = false;
   languageUtils: LanguageUtils
 
-
-  constructor(protected utilsService: UtilsService, protected nodeResolver: NodeResolver) {
-  }
-
   ngOnInit(): void {
     this.initLanguages();
   }
diff --git a/client/app/src/pages/admin/settings/tab5/tab5.component.html b/client/app/src/pages/admin/settings/tab5/tab5.component.html
index d8f2730fe4..92a32bb1ae 100644
--- a/client/app/src/pages/admin/settings/tab5/tab5.component.html
+++ b/client/app/src/pages/admin/settings/tab5/tab5.component.html
@@ -1,185 +1,205 @@
 <div class="row">
-    <div class="col-md-12">
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" name="disable_submissions" [(ngModel)]="nodeResolver.dataModel.disable_submissions" type="checkbox" />
-                <span>{{'Disable submissions' | translate}}</span>
-            </label>
-        </div>
+  <div class="col-md-12">
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" name="disable_submissions" [(ngModel)]="nodeResolver.dataModel.disable_submissions" type="checkbox" />
+        <span>{{'Disable submissions' | translate}}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" name="node.dataModel.encryption" [(ngModel)]="nodeResolver.dataModel.encryption" type="checkbox" (ngModelChange)="enableEncryption()" [disabled]="nodeResolver.dataModel.encryption" />
+        <span>{{'Enable encryption' | translate}}</span>
+      </label>
+    </div>
+    @if (nodeResolver.dataModel.encryption) {
+      <div>
         <div class="form-group">
-            <label>
-                <input class="form-check-input" name="node.dataModel.encryption" [(ngModel)]="nodeResolver.dataModel.encryption" type="checkbox" (ngModelChange)="enableEncryption()" [disabled]="nodeResolver.dataModel.encryption" />
-                <span>{{'Enable encryption' | translate}}</span>
-            </label>
-        </div>
-        <div *ngIf="nodeResolver.dataModel.encryption">
-            <div class="form-group">
+          <label>
+            <input class="form-check-input" #escrow name="node.dataModel.escrow" [(ngModel)]="nodeResolver.dataModel.escrow" type="checkbox" (ngModelChange)="toggleEscrow(escrow)" [disabled]="nodeResolver.dataModel.escrow && !preferenceResolver.dataModel.escrow" />
+            <span>{{'Enable administrators to change user passwords' | translate}}</span>
+          </label>
+        </div>
+        @if (nodeResolver.dataModel.escrow) {
+          <div class="form-group">
+            <label>{{'Administrators authorized to change user passwords:' | translate}}</label>
+            <ol class="selection-list">
+              @for (user of userData; track user) {
+                <li>
+                  <span>{{user.name}}</span>
+                </li>
+              }
+            </ol>
+          </div>
+        }
+      </div>
+    }
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" name="node.dataModel.pgp" [(ngModel)]="nodeResolver.dataModel.pgp" type="checkbox" />
+        <span>{{ 'Enable PGP' | translate }}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" name="node.dataModel.simplified_login" [(ngModel)]="nodeResolver.dataModel.simplified_login" type="checkbox"/>
+        <span>{{ 'Enable simplified login' | translate }}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" name="node.dataModel.allow_indexing" [(ngModel)]="nodeResolver.dataModel.allow_indexing" type="checkbox" />
+        <span>{{ 'Enable search engines indexing' | translate }}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>{{ 'Text shown on top of the interface for selecting channels' | translate }}</label>
+      <div>
+        <textarea name="node.dataModel.contexts_clarification" class="form-control" [(ngModel)]="nodeResolver.dataModel.contexts_clarification"></textarea>
+      </div>
+    </div>
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.show_contexts_in_alphabetical_order" type="checkbox" />
+        <span>{{ 'Show channels in alphabetical order' | translate }}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>
+        <span>{{ 'Size limit for file attachments' | translate }}</span>
+        <span>( <span>{{ 'megabytes' | translate}}</span>) </span>
+      </label>
+      <input class="form-control" [(ngModel)]="nodeResolver.dataModel.maximum_filesize" type="number" min="0" />
+    </div>
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.two_factor" name="two_factor" (click)="enableRouteReload()" type="checkbox" />
+        <span>{{ 'Require two factor authentication' | translate }}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>{{ 'Password change interval' | translate }}</label>
+      <input class="form-control" [(ngModel)]="nodeResolver.dataModel.password_change_period" type="number" min="0" />
+      <div>{{ 'For security reasons, password changes are required at regular intervals.' | translate }}</div>
+      <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
+    </div>
+    @if (nodeResolver.dataModel.root_tenant) {
+      <div class="form-group">
+        <label>{{ 'Number of days till notifying unread reports to users' | translate }}</label>
+        <input class="form-control" [(ngModel)]="nodeResolver.dataModel.unread_reminder_time" type="number" min="1" />
+      </div>
+    }
+    <div class="form-group">
+      <label>{{ 'Custom support URL' | translate }}</label>
+      <input class="form-control" [(ngModel)]="nodeResolver.dataModel.custom_support_url" #customSupportURL="ngModel" name="customSupportURL" [pattern]="Constants.httpsRegexp" [ngClass]="{'is-invalid': customSupportURL?.errors?.['pattern']}" type="text" />
+    </div>
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.disable_privacy_badge" type="checkbox" />
+        <span>{{ 'Disable the privacy panel' | translate }}</span>
+      </label>
+    </div>
+    @if (!nodeResolver.dataModel.disable_privacy_badge) {
+      <div class="form-group">
+        <label>
+          <input class="form-check-input" name="enable_custom_privacy_badge" [(ngModel)]="nodeResolver.dataModel.enable_custom_privacy_badge" type="checkbox" />
+          <span>{{ 'Enable custom privacy panel' | translate }}</span>
+        </label>
+      </div>
+    }
+    @if (!nodeResolver.dataModel.disable_privacy_badge && nodeResolver.dataModel.enable_custom_privacy_badge) {
+      <div class="form-group">
+        <label>{{ 'Custom privacy panel' | translate }}</label>
+        <div>
+          <textarea class="form-control" [(ngModel)]="nodeResolver.dataModel.custom_privacy_badge_text" type="text"></textarea>
+        </div>
+      </div>
+    }
+    <div class="form-group">
+      <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.enable_scoring_system" id="scoring_system" type="checkbox">
+      <label>{{ 'Enable scoring system' | translate }}</label>
+    </div>
+    @if (nodeResolver.dataModel.root_tenant) {
+      <div class="form-group">
+        <label>{{ 'Logging level' | translate }}</label>
+        <select class="form-select-custom" [(ngModel)]="nodeResolver.dataModel.log_level">
+          <option value="ERROR">ERROR</option>
+          <option value="INFO">INFO</option>
+          <option value="DEBUG">DEBUG</option>
+        </select>
+      </div>
+    }
+    @if (nodeResolver.dataModel.root_tenant) {
+      <div class="form-group">
+        <label>{{ 'Anomaly detection thresholds' | translate }}</label>
+        <table class="table-responsive">
+          <thead>
+            <tr>
+              <th></th>
+              <th>{{ 'Low' | translate }}</th>
+              <th>{{ 'High' | translate }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
                 <label>
-                    <input class="form-check-input" #escrow name="node.dataModel.escrow" [(ngModel)]="nodeResolver.dataModel.escrow" type="checkbox" (ngModelChange)="toggleEscrow(escrow)" [disabled]="nodeResolver.dataModel.escrow && !preferenceResolver.dataModel.escrow" />
-                    <span>{{'Enable administrators to change user passwords' | translate}}</span>
+                  <span>{{ 'Available disk space' | translate }}</span>
+                  <span>( <span>{{ 'megabytes' | translate }}</span>) </span>
                 </label>
-            </div>
-            <div class="form-group" *ngIf="nodeResolver.dataModel.escrow">
-                <label>{{'Administrators authorized to change user passwords:' | translate}}</label>
-                <ol class="selection-list">
-                    <li *ngFor="let user of userData">
-                        <span>{{user.name}}</span>
-                    </li>
-                </ol>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" name="node.dataModel.pgp" [(ngModel)]="nodeResolver.dataModel.pgp" type="checkbox" />
-                <span>{{ 'Enable PGP' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" name="node.dataModel.simplified_login" [(ngModel)]="nodeResolver.dataModel.simplified_login" type="checkbox"/>
-                <span>{{ 'Enable simplified login' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" name="node.dataModel.allow_indexing" [(ngModel)]="nodeResolver.dataModel.allow_indexing" type="checkbox" />
-                <span>{{ 'Enable search engines indexing' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group">
-            <label>{{ 'Text shown on top of the interface for selecting channels' | translate }}</label>
-            <div>
-                <textarea name="node.dataModel.contexts_clarification" class="form-control" [(ngModel)]="nodeResolver.dataModel.contexts_clarification"></textarea>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.show_contexts_in_alphabetical_order" type="checkbox" />
-                <span>{{ 'Show channels in alphabetical order' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group">
-            <label>
-                <span>{{ 'Size limit for file attachments' | translate }}</span>
-                <span>( <span>{{ 'megabytes' | translate}}</span>) </span>
-            </label>
-            <input class="form-control" [(ngModel)]="nodeResolver.dataModel.maximum_filesize" type="number" min="0" />
-        </div>
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.two_factor" name="two_factor" (click)="enableRouteReload()" type="checkbox" />
-                <span>{{ 'Require two factor authentication' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group">
-            <label>{{ 'Password change interval' | translate }}</label>
-            <input class="form-control" [(ngModel)]="nodeResolver.dataModel.password_change_period" type="number" min="0" />
-            <div>{{ 'For security reasons, password changes are required at regular intervals.' | translate }}</div>
-            <div>{{ 'Set the value to 0 to disable this feature.' | translate }}</div>
-        </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant">
-            <label>{{ 'Number of days till notifying unread reports to users' | translate }}</label>
-            <input class="form-control" [(ngModel)]="nodeResolver.dataModel.unread_reminder_time" type="number" min="1" />
-        </div>
-        <div class="form-group">
-            <label>{{ 'Custom support URL' | translate }}</label>
-            <input class="form-control" [(ngModel)]="nodeResolver.dataModel.custom_support_url" #customSupportURL="ngModel" name="customSupportURL" [pattern]="Constants.httpsRegexp" [ngClass]="{'is-invalid': customSupportURL?.errors?.['pattern']}" type="text" />
-        </div>
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.disable_privacy_badge" type="checkbox" />
-                <span>{{ 'Disable the privacy panel' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group" *ngIf="!nodeResolver.dataModel.disable_privacy_badge">
-            <label>
-                <input class="form-check-input" name="enable_custom_privacy_badge" [(ngModel)]="nodeResolver.dataModel.enable_custom_privacy_badge" type="checkbox" />
-                <span>{{ 'Enable custom privacy panel' | translate }}</span>
-            </label>
-        </div>
-        <div class="form-group" *ngIf="!nodeResolver.dataModel.disable_privacy_badge && nodeResolver.dataModel.enable_custom_privacy_badge">
-            <label>{{ 'Custom privacy panel' | translate }}</label>
-            <div>
-                <textarea class="form-control" [(ngModel)]="nodeResolver.dataModel.custom_privacy_badge_text" type="text"></textarea>
-            </div>
-        </div>
-        <div class="form-group">
-            <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.enable_scoring_system" id="scoring_system" type="checkbox">
-            <label>{{ 'Enable scoring system' | translate }}</label>
-        </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant">
-            <label>{{ 'Logging level' | translate }}</label>
-            <select class="form-select-custom" [(ngModel)]="nodeResolver.dataModel.log_level">
-                <option value="ERROR">ERROR</option>
-                <option value="INFO">INFO</option>
-                <option value="DEBUG">DEBUG</option>
-            </select>
-        </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant">
-            <label>{{ 'Anomaly detection thresholds' | translate }}</label>
-            <table class="table-responsive">
-                <thead>
-                <tr>
-                    <th></th>
-                    <th>{{ 'Low' | translate }}</th>
-                    <th>{{ 'High' | translate }}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td>
-                        <label>
-                            <span>{{ 'Available disk space' | translate }}</span>
-                            <span>( <span>{{ 'megabytes' | translate }}</span>) </span>
-                        </label>
-                    </td>
-                    <td>
-                        <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_megabytes_low" type="number" min="0" />
-                    </td>
-                    <td>
-                        <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_megabytes_high" type="number" min="0" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <label>
-                            <span>{{ 'Available disk space' | translate }}</span>
-                            <span>( <span>{{ 'percentage' | translate }}</span>) </span>
-                        </label>
-                    </td>
-                    <td>
-                        <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_percentage_low" type="number" min="0" max="100" />
-                    </td>
-                    <td>
-                        <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_percentage_high" type="number" min="0" max="100" />
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-        <div class="form-group">
-            <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.log_accesses_of_internal_users" type="checkbox" />
-            <label>{{ 'Log accesses of internal users' | translate }}</label>
-        </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant">
-            <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.enable_admin_exception_notification" type="checkbox">
-            <label>{{ 'Notify administrators of software problems' | translate }}</label>
-        </div>
-        <div class="form-group" *ngIf="nodeResolver.dataModel.root_tenant">
-            <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.enable_developers_exception_notification" type="checkbox">
-            <label>{{ 'Notify developers of software problems' | translate }}</label>
-            <div>{{ 'By enabling this feature, you will contribute to the development and security of the platform.' |
-              translate }}</div>
-        </div>
-        <div class="form-group">
-            <button class="btn btn-primary" id="save" [disabled]="contentForm.invalid" (click)="updateNode()" type="submit">
-                <i class="fa-solid fa-check"></i>
-                <span>{{ 'Save' | translate }}</span>
-            </button>
-            <button class="btn btn-danger" (click)="resetSubmissions()">
-                <i class="fa-solid fa-trash"></i>
-                <span>{{ 'Reset reports' | translate }}</span>
-            </button>
-        </div>
+              </td>
+              <td>
+                <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_megabytes_low" type="number" min="0" />
+              </td>
+              <td>
+                <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_megabytes_high" type="number" min="0" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <label>
+                  <span>{{ 'Available disk space' | translate }}</span>
+                  <span>( <span>{{ 'percentage' | translate }}</span>) </span>
+                </label>
+              </td>
+              <td>
+                <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_percentage_low" type="number" min="0" max="100" />
+              </td>
+              <td>
+                <input class="form-control" [(ngModel)]="nodeResolver.dataModel.threshold_free_disk_percentage_high" type="number" min="0" max="100" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    }
+    <div class="form-group">
+      <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.log_accesses_of_internal_users" type="checkbox" />
+      <label>{{ 'Log accesses of internal users' | translate }}</label>
+    </div>
+    @if (nodeResolver.dataModel.root_tenant) {
+      <div class="form-group">
+        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.enable_admin_exception_notification" type="checkbox">
+        <label>{{ 'Notify administrators of software problems' | translate }}</label>
+      </div>
+    }
+    @if (nodeResolver.dataModel.root_tenant) {
+      <div class="form-group">
+        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.enable_developers_exception_notification" type="checkbox">
+        <label>{{ 'Notify developers of software problems' | translate }}</label>
+        <div>{{ 'By enabling this feature, you will contribute to the development and security of the platform.' |
+        translate }}</div>
+      </div>
+    }
+    <div class="form-group">
+      <button class="btn btn-primary" id="save" [disabled]="contentForm.invalid" (click)="updateNode()" type="submit">
+        <i class="fa-solid fa-check"></i>
+        <span>{{ 'Save' | translate }}</span>
+      </button>
+      <button class="btn btn-danger" (click)="resetSubmissions()">
+        <i class="fa-solid fa-trash"></i>
+        <span>{{ 'Reset reports' | translate }}</span>
+      </button>
     </div>
+  </div>
 </div>
diff --git a/client/app/src/pages/admin/settings/tab5/tab5.component.ts b/client/app/src/pages/admin/settings/tab5/tab5.component.ts
index f9ccacb5c5..3a73546f83 100644
--- a/client/app/src/pages/admin/settings/tab5/tab5.component.ts
+++ b/client/app/src/pages/admin/settings/tab5/tab5.component.ts
@@ -1,5 +1,5 @@
-import {Component, Input, OnInit} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, Input, OnInit, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {Constants} from "@app/shared/constants/constants";
 import {EnableEncryptionComponent} from "@app/shared/modals/enable-encryption/enable-encryption.component";
@@ -12,21 +12,31 @@ import {AppConfigService} from "@app/services/root/app-config.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
 import {questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
+import { NgClass } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-tab5",
-  templateUrl: "./tab5.component.html"
+    selector: "src-tab5",
+    templateUrl: "./tab5.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, TranslatorPipe, TranslateModule]
 })
 export class Tab5Component implements OnInit {
+  private authenticationService = inject(AuthenticationService);
+  private modalService = inject(NgbModal);
+  private appConfigService = inject(AppConfigService);
+  private utilsService = inject(UtilsService);
+  protected nodeResolver = inject(NodeResolver);
+  protected preferenceResolver = inject(PreferenceResolver);
+  private usersResolver = inject(UsersResolver);
+  private questionnairesResolver = inject(QuestionnairesResolver);
+
   @Input() contentForm: NgForm;
   userData: userResolverModel[];
   questionnaireData: questionnaireResolverModel[];
   routeReload = false;
 
-  constructor(private authenticationService: AuthenticationService, private modalService: NgbModal, private appConfigService: AppConfigService, private utilsService: UtilsService, protected nodeResolver: NodeResolver, protected preferenceResolver: PreferenceResolver, private usersResolver: UsersResolver, private questionnairesResolver: QuestionnairesResolver) {
-
-  }
-
   protected readonly Constants = Constants;
 
   ngOnInit(): void {
diff --git a/client/app/src/pages/admin/sidebar/sidebar.component.html b/client/app/src/pages/admin/sidebar/sidebar.component.html
index be64d2ad9c..be6c05b881 100644
--- a/client/app/src/pages/admin/sidebar/sidebar.component.html
+++ b/client/app/src/pages/admin/sidebar/sidebar.component.html
@@ -1,41 +1,45 @@
 
 <a routerLink="/admin/home" routerLinkActive="active" id="admin_home" [attr.aria-current]="isActive('/admin/home') ? 'page' : 'false'">
-    <i class="fa fa-home"></i>
-    <span>{{'Home'|translate}}</span>
+  <i class="fa fa-home"></i>
+  <span>{{'Home'|translate}}</span>
 </a>
 <a routerLink="/admin/settings" routerLinkActive="active" id="admin_settings" [attr.aria-current]="isActive('/admin/settings') ? 'page' : 'false'">
-    <i class="fa-solid fa-sliders"></i>
-    <span>{{'Settings'|translate}}</span>
+  <i class="fa-solid fa-sliders"></i>
+  <span>{{'Settings'|translate}}</span>
 </a>
 <a routerLink="/admin/users" routerLinkActive="active" id="admin_users" [attr.aria-current]="isActive('/admin/users') ? 'page' : 'false'">
-    <i class="fa fa-users"></i>
-    <span>{{'Users'|translate}}</span>
+  <i class="fa fa-users"></i>
+  <span>{{'Users'|translate}}</span>
 </a>
 <a routerLink="/admin/questionnaires" routerLinkActive="active" id="admin_questionnaires" [attr.aria-current]="isActive('/admin/questionnaires') ? 'page' : 'false'">
-    <i class="fa fa-circle-question"></i>
-    <span>{{'Questionnaires'|translate}}</span>
+  <i class="fa fa-circle-question"></i>
+  <span>{{'Questionnaires'|translate}}</span>
 </a>
 <a routerLink="/admin/channels" routerLinkActive="active" id="admin_channels" [attr.aria-current]="isActive('/admin/channels') ? 'page' : 'false'">
-    <i class="fa fa-inbox"></i>
-    <span>{{'Channels'|translate}}</span>
+  <i class="fa fa-inbox"></i>
+  <span>{{'Channels'|translate}}</span>
 </a>
 <a routerLink="/admin/casemanagement" routerLinkActive="active" id="admin_case_management" [attr.aria-current]="isActive('/admin/casemanagement') ? 'page' : 'false'">
-    <i class="fa fa-bars-progress"></i>
-    <span>{{'Case management'|translate}}</span>
+  <i class="fa fa-bars-progress"></i>
+  <span>{{'Case management'|translate}}</span>
 </a>
 <a routerLink="/admin/notifications" routerLinkActive="active" id="admin_notifications" [attr.aria-current]="isActive('/admin/notifications') ? 'page' : 'false'">
-    <i class="fa fa-envelope"></i>
-    <span>{{'Notifications'|translate}}</span>
+  <i class="fa fa-envelope"></i>
+  <span>{{'Notifications'|translate}}</span>
 </a>
-<a routerLink="/admin/network" routerLinkActive="active" id="admin_network" *ngIf="nodeResolver.dataModel.root_tenant || authenticationService.session.properties.management_session" [attr.aria-current]="isActive('/admin/network') ? 'page' : 'false'">
+@if (nodeResolver.dataModel.root_tenant || authenticationService.session.properties.management_session) {
+  <a routerLink="/admin/network" routerLinkActive="active" id="admin_network" [attr.aria-current]="isActive('/admin/network') ? 'page' : 'false'">
     <i class="fa fa-network-wired"></i>
     <span>{{'Network'|translate}}</span>
-</a>
-<a routerLink="/admin/sites" routerLinkActive="active" id="admin_sites" *ngIf="nodeResolver.dataModel.root_tenant" [attr.aria-current]="isActive('/admin/sites') ? 'page' : 'false'">
+  </a>
+}
+@if (nodeResolver.dataModel.root_tenant) {
+  <a routerLink="/admin/sites" routerLinkActive="active" id="admin_sites" [attr.aria-current]="isActive('/admin/sites') ? 'page' : 'false'">
     <i class="fa-solid fa-sitemap"></i>
     <span>{{'Sites'|translate}}</span>
-</a>
+  </a>
+}
 <a routerLink="/admin/auditlog" routerLinkActive="active" id="admin_audit_log" [attr.aria-current]="isActive('/admin/auditlog') ? 'page' : 'false'">
-    <i class="fa fa-clipboard-list"></i>
-    <span>{{'Audit log'|translate}}</span>
+  <i class="fa fa-clipboard-list"></i>
+  <span>{{'Audit log'|translate}}</span>
 </a>
diff --git a/client/app/src/pages/admin/sidebar/sidebar.component.ts b/client/app/src/pages/admin/sidebar/sidebar.component.ts
index 61991c5cb1..6858ace821 100644
--- a/client/app/src/pages/admin/sidebar/sidebar.component.ts
+++ b/client/app/src/pages/admin/sidebar/sidebar.component.ts
@@ -1,17 +1,22 @@
-import {ChangeDetectionStrategy, Component} from "@angular/core";
-import {Router} from "@angular/router";
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { Router, RouterLink, RouterLinkActive } from "@angular/router";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-admin-sidebar",
-  templateUrl: "./sidebar.component.html",
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: "src-admin-sidebar",
+    templateUrl: "./sidebar.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, TranslatorPipe]
 })
-export class SidebarComponent {
+export class AdminSidebarComponent {
+  private router = inject(Router);
+  protected nodeResolver = inject(NodeResolver);
+  protected authenticationService = inject(AuthenticationService);
 
-  constructor(private router: Router, protected nodeResolver: NodeResolver, protected authenticationService: AuthenticationService) {
-  }
 
   isActive(route: string): boolean {
     return this.router.isActive(route, {
diff --git a/client/app/src/pages/admin/sites/sites-routing.module.ts b/client/app/src/pages/admin/sites/sites-routing.module.ts
deleted file mode 100644
index 4629e2c619..0000000000
--- a/client/app/src/pages/admin/sites/sites-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {SitesComponent} from "@app/pages/admin/sites/sites.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: SitesComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class SitesRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.html b/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.html
index 78e29829ed..ac31e34c92 100644
--- a/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.html
+++ b/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.html
@@ -1,61 +1,71 @@
 <div class="row">
-    <div class="col-md-12">
-        <div>
-            <span>{{'Sites'|translate}}</span>
-            <button class="btn btn-sm btn-primary show-add-tenant-btn" (click)="toggleAddTenant()">
-                <i class="fa-solid fa-plus"></i>
-                <span>{{'Add'|translate}}</span>
-            </button>
-            <span id="SearchFilter" class="form-group float-end">
-                <br>
-                <br>
-                <input type="text" class="form-control" [placeholder]="'Search' | translate" [attr.placeholder]="'Search' | translate" [(ngModel)]="search" name="search">
-            </span>
+  <div class="col-md-12">
+    <div>
+      <span>{{'Sites'|translate}}</span>
+      <button class="btn btn-sm btn-primary show-add-tenant-btn" (click)="toggleAddTenant()">
+        <i class="fa-solid fa-plus"></i>
+        <span>{{'Add'|translate}}</span>
+      </button>
+      <span id="SearchFilter" class="form-group float-end">
+        <br>
+          <br>
+            <input type="text" class="form-control" [placeholder]="'Search' | translate" [attr.placeholder]="'Search' | translate" [(ngModel)]="search" name="search">
+          </span>
         </div>
+      </div>
     </div>
-</div>
-<div *ngIf="showAddTenant" class="row">
-    <div class="col-md-6">
-        <form ngForm="newTenantForm" #newTenantForm="ngForm" class="addTenant" novalidate>
+    @if (showAddTenant) {
+      <div class="row">
+        <div class="col-md-6">
+          <form ngForm="newTenantForm" #newTenantForm="ngForm" class="addTenant" novalidate>
             <div class="form-group">
-                <label>
-                    <span>{{'Name'|translate}}</span>
-                    <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                </label>
-                <div>
-                    <input name="newTenant.name" class="form-control" [(ngModel)]="newTenant.name" maxlength="120" type="text" required />
-                </div>
+              <label>
+                <span>{{'Name'|translate}}</span>
+                <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+              </label>
+              <div>
+                <input name="newTenant.name" class="form-control" [(ngModel)]="newTenant.name" maxlength="120" type="text" required />
+              </div>
             </div>
             <div class="form-group">
-                <label>{{'Mode:'|translate}}</label>
-                <select name="type" class="form-select-custom" [(ngModel)]="newTenant.mode" required>
-                    <option value="default" [selected]="newTenant.mode === 'default'">DEFAULT</option>
-                    <option value="wbpa">WHISTLEBLOWINGPA</option>
-                </select>
+              <label>{{'Mode:'|translate}}</label>
+              <select name="type" class="form-select-custom" [(ngModel)]="newTenant.mode" required>
+                <option value="default" [selected]="newTenant.mode === 'default'">DEFAULT</option>
+                <option value="wbpa">WHISTLEBLOWINGPA</option>
+              </select>
             </div>
             <div class="form-group clearfix">
-                <button id="add-btn" class="float-start btn btn-primary" [disabled]="newTenantForm.invalid" (click)="addTenant();toggleAddTenant()" type="button">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>Add</span>
-                </button>
+              <button id="add-btn" class="float-start btn btn-primary" [disabled]="newTenantForm.invalid" (click)="addTenant();toggleAddTenant()" type="button">
+                <i class="fa-solid fa-plus"></i>
+                <span>Add</span>
+              </button>
             </div>
-        </form>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-12" *ngIf="tenants">
-        <div *ngFor="let tenant of tenants | orderBy:'id' | search:search | slice: (currentPage - 1) * itemsPerPage : currentPage * itemsPerPage; let index = index">
-          <form id="tenant-{{index}}"  #editTenant="ngForm" novalidate> 
-              <src-siteslist  [editTenant]="editTenant" [index]="(currentPage - 1) * itemsPerPage + index" [tenant]="tenant" [tenants]="tenants"></src-siteslist>
           </form>
         </div>
-        <div class="text-center" *ngIf="(tenants | filter:'name':search).length > 10">
-            <ngb-pagination dir="ltr" class="d-flex justify-content-center" [(page)]="currentPage" [pageSize]="itemsPerPage" [collectionSize]="(tenants | filter:'name':search).length">
-                <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" title="{{'First' | translate}}"></i></ng-template>
-                <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward-step" title="{{'Previous' | translate}}"></i></ng-template>
-                <ng-template ngbPaginationNext><i class="fa-solid fa-forward-step" title="{{'Next' | translate}}"></i></ng-template>
-                <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" title="{{'Last' | translate}}"></i></ng-template>
-            </ngb-pagination>
+      </div>
+    }
+    <div class="row">
+      @if (tenants) {
+        <div class="col-md-12">
+          @for (tenant of tenants | orderBy:'id' | search:search | slice: (currentPage - 1) * itemsPerPage : currentPage * itemsPerPage; track tenant; let index = $index) {
+            <div>
+              <form id="tenant-{{index}}"  #editTenant="ngForm" novalidate>
+                <src-siteslist  [editTenant]="editTenant" [index]="(currentPage - 1) * itemsPerPage + index" [tenant]="tenant" [tenants]="tenants"></src-siteslist>
+              </form>
+            </div>
+          }
+          @if ((tenants | filter:'name':search).length > 10) {
+            <div class="text-center">
+              <ngb-pagination [(page)]="currentPage" [pageSize]="itemsPerPage" [collectionSize]="(tenants | filter:'name':search).length" [boundaryLinks]="true">
+                <ng-template ngbPaginationPrevious>
+                < {{'Previous' | translate}} </ng-template>
+                <ng-template ngbPaginationNext>{{'Next' | translate}} ></ng-template>
+                <ng-template ngbPaginationFirst>
+                << {{'First' | translate}} </ng-template>
+                <ng-template ngbPaginationLast>{{'Last' | translate}} >></ng-template>
+              </ngb-pagination>
+            </div>
+          }
         </div>
+      }
     </div>
-</div>
diff --git a/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.ts b/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.ts
index f98e2a776b..b2e1337867 100644
--- a/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.ts
+++ b/client/app/src/pages/admin/sites/sites-tab1/sites-tab1.component.ts
@@ -1,12 +1,25 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {tenantResolverModel} from "@app/models/resolvers/tenant-resolver-model";
 import {HttpService} from "@app/shared/services/http.service";
+import { FormsModule } from "@angular/forms";
+import { SlicePipe } from "@angular/common";
+import { SiteslistComponent } from "../siteslist/siteslist.component";
+import { NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast } from "@ng-bootstrap/ng-bootstrap";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
+import { FilterSearchPipe } from "@app/shared/pipes/filter-search.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-sites-tab1",
-  templateUrl: "./sites-tab1.component.html"
+    selector: "src-sites-tab1",
+    templateUrl: "./sites-tab1.component.html",
+    standalone: true,
+    imports: [FormsModule, SiteslistComponent, NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast, SlicePipe, TranslatorPipe, FilterPipe, FilterSearchPipe, OrderByPipe, TranslateModule]
 })
 export class SitesTab1Component implements OnInit {
+  private httpService = inject(HttpService);
+
   search: string;
   newTenant: { name: string, active: boolean, mode: string, subdomain: string } = {
     name: "",
@@ -31,9 +44,6 @@ export class SitesTab1Component implements OnInit {
     this.showAddTenant = !this.showAddTenant;
   }
 
-  constructor(private httpService: HttpService) {
-  }
-
   addTenant() {
     this.httpService.addTenant(this.newTenant).subscribe(res => {
       this.tenants.push(res);
diff --git a/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.html b/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.html
index 0d8acbaf77..c575bf30cb 100644
--- a/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.html
+++ b/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.html
@@ -1,90 +1,100 @@
 <div class="row">
-    <div class="col-md-6">
-        <div class="form-group">
-            <label>
-                <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.adminonly" name="nodeResolver.dataModel.adminonly" type="checkbox" />
-                <span>{{'Use the first site for administrative purposes only'|translate}}</span>
-            </label>
-        </div>
-        <div class="form-group">
-            <label>{{'Mode:'|translate}}</label>
-            <select name="type" class="form-select-custom" [(ngModel)]="nodeResolver.dataModel.mode" required>
-                <option value="default" [selected]="nodeResolver.dataModel.mode === 'default'">DEFAULT</option>
-                <option value="demo">DEMO</option>
-                <option value="wbpa">WHISTLEBLOWINGPA</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label>{{'Root domain used for secondary sites'|translate}}</label>
-            <div>
-                <input class="form-control" name="nodeResolver.dataModel.rootdomain" [(ngModel)]="nodeResolver.dataModel.rootdomain" type="text" />
-            </div>
-        </div>
+  <div class="col-md-6">
+    <div class="form-group">
+      <label>
+        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.adminonly" name="nodeResolver.dataModel.adminonly" type="checkbox" />
+        <span>{{'Use the first site for administrative purposes only'|translate}}</span>
+      </label>
+    </div>
+    <div class="form-group">
+      <label>{{'Mode:'|translate}}</label>
+      <select name="type" class="form-select-custom" [(ngModel)]="nodeResolver.dataModel.mode" required>
+        <option value="default" [selected]="nodeResolver.dataModel.mode === 'default'">DEFAULT</option>
+        <option value="demo">DEMO</option>
+        <option value="wbpa">WHISTLEBLOWINGPA</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>{{'Root domain used for secondary sites'|translate}}</label>
+      <div>
+        <input class="form-control" name="nodeResolver.dataModel.rootdomain" [(ngModel)]="nodeResolver.dataModel.rootdomain" type="text" />
+      </div>
+    </div>
+    <div class="form-group">
+      <label>{{'Questionnaire'|translate}}</label>
+      <select class="form-select-custom" [(ngModel)]="nodeResolver.dataModel.default_questionnaire">
+        @for (item of questionnairesResolver.dataModel; track item) {
+          <option [ngValue]="item.id">{{item.name}}</option>
+        }
+      </select>
+    </div>
+    @if (!nodeResolver.dataModel.adminonly) {
+      <div>
         <div class="form-group">
-            <label>{{'Questionnaire'|translate}}</label>
-            <select class="form-select-custom" [(ngModel)]="nodeResolver.dataModel.default_questionnaire">
-                <option *ngFor="let item of questionnairesResolver.dataModel" [ngValue]="item.id">{{item.name}}</option>
-            </select>
+          <label>
+            <input class="form-check-input" name="nodeResolver.dataModel.enable_signup" [(ngModel)]="nodeResolver.dataModel.enable_signup" type="checkbox" />
+            <span>{{'Allow users to sign up'|translate}}</span>
+          </label>
         </div>
-        <div *ngIf="!nodeResolver.dataModel.adminonly">
+        @if (nodeResolver.dataModel.enable_signup) {
+          <div>
             <div class="form-group">
-                <label>
-                    <input class="form-check-input" name="nodeResolver.dataModel.enable_signup" [(ngModel)]="nodeResolver.dataModel.enable_signup" type="checkbox" />
-                    <span>{{'Allow users to sign up'|translate}}</span>
-                </label>
-            </div>
-            <div *ngIf="nodeResolver.dataModel.enable_signup">
-                <div class="form-group">
-                    <label>
-                        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.signup_tos1_enable" type="checkbox" />
-                        <span>{{'Enable terms of service'|translate}}</span>
-                        <span>#1</span>
-                    </label>
-                    <div *ngIf="nodeResolver.dataModel.signup_tos1_enable" class="nested">
-                        <div class="form-group">
-                            <label>{{'Title'|translate}}</label>
-                            <input [(ngModel)]="nodeResolver.dataModel.signup_tos1_title" type="text" class="form-control" />
-                        </div>
-                        <div class="form-group">
-                            <label>{{'Text'|translate}}</label>
-                            <div>
-                                <textarea class="form-control" [(ngModel)]="nodeResolver.dataModel.signup_tos1_text" rows="4"></textarea>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label>{{'Checkbox label'|translate}}</label>
-                            <input [(ngModel)]="nodeResolver.dataModel.signup_tos1_checkbox_label" type="text" class="form-control" />
-                        </div>
+              <label>
+                <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.signup_tos1_enable" type="checkbox" />
+                <span>{{'Enable terms of service'|translate}}</span>
+                <span>#1</span>
+              </label>
+              @if (nodeResolver.dataModel.signup_tos1_enable) {
+                <div class="nested">
+                  <div class="form-group">
+                    <label>{{'Title'|translate}}</label>
+                    <input [(ngModel)]="nodeResolver.dataModel.signup_tos1_title" type="text" class="form-control" />
+                  </div>
+                  <div class="form-group">
+                    <label>{{'Text'|translate}}</label>
+                    <div>
+                      <textarea class="form-control" [(ngModel)]="nodeResolver.dataModel.signup_tos1_text" rows="4"></textarea>
                     </div>
+                  </div>
+                  <div class="form-group">
+                    <label>{{'Checkbox label'|translate}}</label>
+                    <input [(ngModel)]="nodeResolver.dataModel.signup_tos1_checkbox_label" type="text" class="form-control" />
+                  </div>
                 </div>
-                <div class="form-group">
-                    <label>
-                        <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.signup_tos2_enable" type="checkbox" />
-                        <span>{{'Enable terms of service'|translate}}</span>
-                        <span>#2</span>
-                    </label>
-                    <div *ngIf="nodeResolver.dataModel.signup_tos2_enable" class="nested">
-                        <div class="form-group">
-                            <label>{{'Title'|translate}}</label>
-                            <input [(ngModel)]="nodeResolver.dataModel.signup_tos2_title" type="text" class="form-control" />
-                        </div>
-                        <div class="form-group">
-                            <label>{{'Text'|translate}}</label>
-                            <div>
-                                <textarea class="form-control" [(ngModel)]="nodeResolver.dataModel.signup_tos2_text" rows="4"></textarea>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label>{{'Checkbox label'|translate}}</label>
-                            <input [(ngModel)]="nodeResolver.dataModel.signup_tos2_checkbox_label" type="text" class="form-control" />
-                        </div>
+              }
+            </div>
+            <div class="form-group">
+              <label>
+                <input class="form-check-input" [(ngModel)]="nodeResolver.dataModel.signup_tos2_enable" type="checkbox" />
+                <span>{{'Enable terms of service'|translate}}</span>
+                <span>#2</span>
+              </label>
+              @if (nodeResolver.dataModel.signup_tos2_enable) {
+                <div class="nested">
+                  <div class="form-group">
+                    <label>{{'Title'|translate}}</label>
+                    <input [(ngModel)]="nodeResolver.dataModel.signup_tos2_title" type="text" class="form-control" />
+                  </div>
+                  <div class="form-group">
+                    <label>{{'Text'|translate}}</label>
+                    <div>
+                      <textarea class="form-control" [(ngModel)]="nodeResolver.dataModel.signup_tos2_text" rows="4"></textarea>
                     </div>
+                  </div>
+                  <div class="form-group">
+                    <label>{{'Checkbox label'|translate}}</label>
+                    <input [(ngModel)]="nodeResolver.dataModel.signup_tos2_checkbox_label" type="text" class="form-control" />
+                  </div>
                 </div>
+              }
             </div>
-        </div>
-        <button class="btn btn-primary" (click)="utilsService.updateNode(nodeResolver.dataModel)">
-            <i class="fa-solid fa-check"></i>
-            <span>{{'Save'|translate}}</span>
-        </button>
-    </div>
-</div>
+          </div>
+        }
+      </div>
+    }
+    <button class="btn btn-primary" (click)="utilsService.updateNode(nodeResolver.dataModel)">
+      <i class="fa-solid fa-check"></i>
+      <span>{{'Save'|translate}}</span>
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.ts b/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.ts
index e26d356fab..0c97fe63a9 100644
--- a/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.ts
+++ b/client/app/src/pages/admin/sites/sites-tab2/sites-tab2.component.ts
@@ -1,14 +1,20 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {QuestionnairesResolver} from "@app/shared/resolvers/questionnaires.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
+import { FormsModule } from "@angular/forms";
+
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-sites-tab2",
-  templateUrl: "./sites-tab2.component.html"
+    selector: "src-sites-tab2",
+    templateUrl: "./sites-tab2.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe, TranslateModule]
 })
 export class SitesTab2Component {
-
-  constructor(protected nodeResolver: NodeResolver, protected utilsService: UtilsService, public questionnairesResolver: QuestionnairesResolver) {
-  }
+  protected nodeResolver = inject(NodeResolver);
+  protected utilsService = inject(UtilsService);
+  questionnairesResolver = inject(QuestionnairesResolver);
 }
\ No newline at end of file
diff --git a/client/app/src/pages/admin/sites/sites.component.html b/client/app/src/pages/admin/sites/sites.component.html
index 4999deabcc..adad0d7b05 100644
--- a/client/app/src/pages/admin/sites/sites.component.html
+++ b/client/app/src/pages/admin/sites/sites.component.html
@@ -1,19 +1,19 @@
 <form name="contentForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-sites-tab1></src-sites-tab1>
-    </ng-template>
-    <ng-template #tab2>
-        <src-sites-tab2></src-sites-tab2>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-sites-tab1></src-sites-tab1>
+  </ng-template>
+  <ng-template #tab2>
+    <src-sites-tab2></src-sites-tab2>
+  </ng-template>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/admin/sites/sites.component.ts b/client/app/src/pages/admin/sites/sites.component.ts
index aaeee04b3e..a5ffaeaa50 100644
--- a/client/app/src/pages/admin/sites/sites.component.ts
+++ b/client/app/src/pages/admin/sites/sites.component.ts
@@ -1,15 +1,26 @@
-import {Component, TemplateRef, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef} from "@angular/core";
+import { Component, TemplateRef, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef, inject } from "@angular/core";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {Tab} from "@app/models/component-model/tab";
 import {SitesTab1Component} from "@app/pages/admin/sites/sites-tab1/sites-tab1.component";
 import {SitesTab2Component} from "@app/pages/admin/sites/sites-tab2/sites-tab2.component";
+import { FormsModule } from "@angular/forms";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-sites",
-  templateUrl: "./sites.component.html"
+    selector: "src-sites",
+    templateUrl: "./sites.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, SitesTab1Component, SitesTab2Component, TranslatorPipe, TranslateModule]
 })
 export class SitesComponent implements OnInit, AfterViewInit {
+  node = inject(NodeResolver);
+  authenticationService = inject(AuthenticationService);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<SitesTab1Component>;
   @ViewChild("tab2") tab2!: TemplateRef<SitesTab2Component>;
 
@@ -17,9 +28,6 @@ export class SitesComponent implements OnInit, AfterViewInit {
   nodeData: NodeResolver;
   active: string;
 
-  constructor(public node: NodeResolver, public authenticationService: AuthenticationService, private cdr: ChangeDetectorRef) {
-  }
-
   ngOnInit() {
   }
 
diff --git a/client/app/src/pages/admin/sites/sites.module.ts b/client/app/src/pages/admin/sites/sites.module.ts
deleted file mode 100644
index 2da2adc517..0000000000
--- a/client/app/src/pages/admin/sites/sites.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {SitesComponent} from "@app/pages/admin/sites/sites.component";
-import {SitesTab1Component} from "@app/pages/admin/sites/sites-tab1/sites-tab1.component";
-import {SitesTab2Component} from "@app/pages/admin/sites/sites-tab2/sites-tab2.component";
-import {SharedModule} from "@app/shared.module";
-import {NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
-import {RouterModule} from "@angular/router";
-import {FormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {TranslateModule} from "@ngx-translate/core";
-import {SitesRoutingModule} from "@app/pages/admin/sites/sites-routing.module";
-import {SiteslistComponent} from "@app/pages/admin/sites/siteslist/siteslist.component";
-
-
-@NgModule({
-  declarations: [
-    SitesComponent,
-    SitesTab1Component,
-    SitesTab2Component,
-    SiteslistComponent
-  ],
-  imports: [
-    CommonModule,
-    SitesRoutingModule, SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule, TranslateModule
-  ]
-})
-export class SitesModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/sites/siteslist/siteslist.component.html b/client/app/src/pages/admin/sites/siteslist/siteslist.component.html
index e817bb54d1..f015586fce 100644
--- a/client/app/src/pages/admin/sites/siteslist/siteslist.component.html
+++ b/client/app/src/pages/admin/sites/siteslist/siteslist.component.html
@@ -1,60 +1,86 @@
 <div class="config-item reveal">
-    <div class="editorHeader row">
-        <div class="col-md-6" (click)="toggleEditing($event)">
-            <div>
-                <span class="badge bg-secondary">{{tenant.id}}</span>
-                <span>{{tenant.name}}</span>
-            </div>
-            <div class="tenant-badge"
-                 *ngIf="tenant.active && (tenant.onionservice || tenant.hostname || (tenant.subdomain || nodeResolver.dataModel.rootdomain))">
-                <a class="badge bg-primary" *ngIf="tenant.onionservice" [href]="'https://' + tenant.onionservice"
-                   rel="noreferrer" target="_blank">{{tenant.onionservice}}</a>
-                <span *ngIf="tenant.subdomain">
-                        <a *ngIf="nodeResolver.dataModel.onionservice && tenant.subdomain" class="badge bg-primary"
-                           [href]="'https://' + tenant.subdomain + '.' + nodeResolver.dataModel.onionservice"
-                           rel="noreferrer" target="_blank">{{ tenant.subdomain }}
-                            .{{ nodeResolver.dataModel.onionservice }}</a>
-                    </span>
-                    <a class="badge bg-primary" *ngIf="tenant.hostname" [href]="'https://' + tenant.hostname" rel="noreferrer" target="_blank"> {{ tenant.hostname }} </a>
-                </div>
-            </div>
-            <div class="col-md-6 clearfix" *ngIf="tenant.id !== 1" (click)="toggleEditing($event)">
-                <span class="float-end">
-                    <button *ngIf="tenant.active" class="btn btn-sm btn-primary" name="disable_tenant" (click)="toggleActivation($event)">{{'Enabled'|translate}} </button>
-                    <button *ngIf="!tenant.active" class="btn btn-sm btn-danger" name="enable_tenant" (click)="toggleActivation($event)">{{'Disabled'|translate}} </button>
-                    <button *ngIf="tenant.active" class="btn btn-sm btn-primary" name="configure_tenant" (click)="configureTenant($event, tenant.id)">{{'Configure'|translate}}</button>
-                    <button *ngIf="!editing" class="btn btn-sm btn-outline-secondary" name="edit_tenant" (click)="toggleEditing($event)">{{'Edit'|translate}}</button>
-                    <button *ngIf="editing" class="btn btn-sm btn-primary" name="save_tenant" (click)="saveTenant()">{{'Save'|translate}}</button>
-                    <button *ngIf="isRemovableTenant()" class="btn btn-sm btn-danger" name="delete_tenant" (click)="deleteTenant($event, tenant)">{{'Delete'|translate}}</button>
-                </span>
-            </div>
+  <div class="editorHeader row">
+    <div class="col-md-6" (click)="toggleEditing($event)">
+      <div>
+        <span class="badge bg-secondary">{{tenant.id}}</span>
+        <span>{{tenant.name}}</span>
+      </div>
+      @if (tenant.active && (tenant.onionservice || tenant.hostname || (tenant.subdomain || nodeResolver.dataModel.rootdomain))) {
+        <div class="tenant-badge"
+          >
+          @if (tenant.onionservice) {
+            <a class="badge bg-primary" [href]="'https://' + tenant.onionservice"
+            rel="noreferrer" target="_blank">{{tenant.onionservice}}</a>
+          }
+          @if (tenant.subdomain) {
+            <span>
+              @if (nodeResolver.dataModel.onionservice && tenant.subdomain) {
+                <a class="badge bg-primary"
+                  [href]="'https://' + tenant.subdomain + '.' + nodeResolver.dataModel.onionservice"
+                  rel="noreferrer" target="_blank">{{ tenant.subdomain }}
+                .{{ nodeResolver.dataModel.onionservice }}</a>
+              }
+            </span>
+          }
+          @if (tenant.hostname) {
+            <a class="badge bg-primary" [href]="'https://' + tenant.hostname" rel="noreferrer" target="_blank"> {{ tenant.hostname }} </a>
+          }
         </div>
-        <div *ngIf="editing">
-            <hr />
-            <div class="row">
-                <div class="col-md-6">
-                    <div class="form-group">
-                        <label>{{'Name'|translate}}</label>
-                        <input name="name" class="form-control" [(ngModel)]="tenant.name" type="text" required>
-                    </div>
-                    <div class="form-group">
-                        <label>{{'Subdomain'|translate}}</label>
-                        <input name="subdomain" class="form-control" [(ngModel)]="tenant.subdomain" type="text" required>
-                    </div>
-                    <div class="form-group">
-                        <label>{{'Mode:'|translate}}</label>
-                        <select name="type" class="form-select-custom" [(ngModel)]="tenant.mode" required>
-                            <option value="default" [selected]="tenant.mode === 'default'">DEFAULT</option>
-                            <option value="demo">DEMO</option>
-                            <option value="wbpa">WHISTLEBLOWINGPA</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>
-                            <span>{{'Creation date:'|translate}}</span> {{tenant.creation_date | date:'dd-MM-yyyy'}}
-                        </label>
-                    </div>
-                </div>
-            </div>
+      }
+    </div>
+    @if (tenant.id !== 1) {
+      <div class="col-md-6 clearfix" (click)="toggleEditing($event)">
+        <span class="float-end">
+          @if (tenant.active) {
+            <button class="btn btn-sm btn-primary" name="disable_tenant" (click)="toggleActivation($event)">{{'Enabled'|translate}} </button>
+          }
+          @if (!tenant.active) {
+            <button class="btn btn-sm btn-danger" name="enable_tenant" (click)="toggleActivation($event)">{{'Disabled'|translate}} </button>
+          }
+          @if (tenant.active) {
+            <button class="btn btn-sm btn-primary" name="configure_tenant" (click)="configureTenant($event, tenant.id)">{{'Configure'|translate}}</button>
+          }
+          @if (!editing) {
+            <button class="btn btn-sm btn-outline-secondary" name="edit_tenant" (click)="toggleEditing($event)">{{'Edit'|translate}}</button>
+          }
+          @if (editing) {
+            <button class="btn btn-sm btn-primary" name="save_tenant" (click)="saveTenant()">{{'Save'|translate}}</button>
+          }
+          @if (isRemovableTenant()) {
+            <button class="btn btn-sm btn-danger" name="delete_tenant" (click)="deleteTenant($event, tenant)">{{'Delete'|translate}}</button>
+          }
+        </span>
+      </div>
+    }
+  </div>
+  @if (editing) {
+    <div>
+      <hr />
+      <div class="row">
+        <div class="col-md-6">
+          <div class="form-group">
+            <label>{{'Name'|translate}}</label>
+            <input name="name" class="form-control" [(ngModel)]="tenant.name" type="text" required>
+          </div>
+          <div class="form-group">
+            <label>{{'Subdomain'|translate}}</label>
+            <input name="subdomain" class="form-control" [(ngModel)]="tenant.subdomain" type="text" required>
+          </div>
+          <div class="form-group">
+            <label>{{'Mode:'|translate}}</label>
+            <select name="type" class="form-select-custom" [(ngModel)]="tenant.mode" required>
+              <option value="default" [selected]="tenant.mode === 'default'">DEFAULT</option>
+              <option value="demo">DEMO</option>
+              <option value="wbpa">WHISTLEBLOWINGPA</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>
+              <span>{{'Creation date:'|translate}}</span> {{tenant.creation_date | date:'dd-MM-yyyy'}}
+            </label>
+          </div>
         </div>
+      </div>
     </div>
+  }
+</div>
diff --git a/client/app/src/pages/admin/sites/siteslist/siteslist.component.ts b/client/app/src/pages/admin/sites/siteslist/siteslist.component.ts
index 0a0fe9adb8..ecd12db4b7 100644
--- a/client/app/src/pages/admin/sites/siteslist/siteslist.component.ts
+++ b/client/app/src/pages/admin/sites/siteslist/siteslist.component.ts
@@ -1,28 +1,36 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
-import {NgForm} from "@angular/forms";
+import { NgForm, FormsModule } from "@angular/forms";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {tenantResolverModel} from "@app/models/resolvers/tenant-resolver-model";
 import {Observable} from "rxjs";
+import { DatePipe } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: "src-siteslist",
-  templateUrl: "./siteslist.component.html"
+    selector: "src-siteslist",
+    templateUrl: "./siteslist.component.html",
+    standalone: true,
+    imports: [FormsModule, DatePipe, TranslatorPipe, TranslateModule]
 })
 export class SiteslistComponent {
+  protected nodeResolver = inject(NodeResolver);
+  protected appDataService = inject(AppDataService);
+  private modalService = inject(NgbModal);
+  private httpService = inject(HttpService);
+  private utilsService = inject(UtilsService);
+
   @Input() editTenant: NgForm;
   @Input() tenant: tenantResolverModel;
   @Input() tenants: tenantResolverModel[];
   @Input() index: number;
   editing = false;
 
-  constructor(protected nodeResolver: NodeResolver, protected appDataService: AppDataService, private modalService: NgbModal, private httpService: HttpService, private utilsService: UtilsService) {
-  }
-
   toggleActivation(event: Event): void {
     event.stopPropagation();
     this.tenant.active = !this.tenant.active;
diff --git a/client/app/src/pages/admin/users/user-editor/user-editor.component.html b/client/app/src/pages/admin/users/user-editor/user-editor.component.html
index 3cc2c7cc09..0cff33ea8c 100644
--- a/client/app/src/pages/admin/users/user-editor/user-editor.component.html
+++ b/client/app/src/pages/admin/users/user-editor/user-editor.component.html
@@ -1,220 +1,288 @@
 <div class="config-item">
-    <div class="editorHeader row">
-        <span class="col-md-7" (click)="toggleEditing();">
-            <span>{{ user.name }}</span>
-            <span class="badge bg-primary">
-                <ng-container [ngSwitch]="user.role">
-                    <span *ngSwitchCase="'admin'">{{ 'Admin' | translate }}</span>
-                    <span *ngSwitchCase="'receiver'">{{ 'Recipient' | translate }}</span>
-                    <span *ngSwitchCase="'custodian'">{{ 'Custodian' | translate }}</span>
-                    <span *ngSwitchCase="'analyst'">{{ 'Analyst' | translate }}</span>
-                </ng-container>
-            </span>
-            <span class="badge bg-secondary" *ngIf="!user.enabled">{{ 'Disabled' | translate }}</span>
-            <span class="badge bg-default text-dark" *ngIf="nodeData.encryption && !user.encryption" title="{{'This user has not performed the first login yet.' | translate}}">
-                <i class="fa-solid fa-exclamation-circle"></i>
-            </span>
+  <div class="editorHeader row">
+    <span class="col-md-7" (click)="toggleEditing();">
+      <span>{{ user.name }}</span>
+      <span class="badge bg-primary">
+        @switch (user.role) {
+          @case ('admin') {
+            <span>{{ 'Admin' | translate }}</span>
+          }
+          @case ('receiver') {
+            <span>{{ 'Recipient' | translate }}</span>
+          }
+          @case ('custodian') {
+            <span>{{ 'Custodian' | translate }}</span>
+          }
+          @case ('analyst') {
+            <span>{{ 'Analyst' | translate }}</span>
+          }
+        }
+      </span>
+      @if (!user.enabled) {
+        <span class="badge bg-secondary">{{ 'Disabled' | translate }}</span>
+      }
+      @if (nodeData.encryption && !user.encryption) {
+        <span class="badge bg-default text-dark" data-toggle="tooltip" title="{{'This user has not performed the first login yet.' | translate}}">
+          <i class="fa-solid fa-exclamation-circle"></i>
         </span>
-        <span class="col-md-5 clearfix">
-            <span class="float-end">
-                <button class="btn btn-sm btn-outline-secondary" *ngIf="!editing" id="edit_user" (click)="toggleEditing();">
-                    <span>{{ 'Edit' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-primary" *ngIf="editing" id="save_user" [disabled]="editUser.invalid" (click)="saveUser(user);toggleEditing();">
-                    <span>{{ 'Save' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-outline-secondary" *ngIf="editing" (click)="toggleEditing();">
-                    <span>{{ 'Cancel' | translate }}</span>
-                </button>
-                <button class="btn btn-sm btn-danger" *ngIf="getUserID() !== user.id" id="delete_user" (click)="deleteUser(user)">
-                    <span>{{ 'Delete' | translate }}</span>
-                </button>
-            </span>
-        </span>
-    </div>
-    <div class="editor" *ngIf="editing">
-        <hr />
-        <div class="row">
-            <div class="col-md-6">
+      }
+    </span>
+    <span class="col-md-5 clearfix">
+      <span class="float-end">
+        @if (!editing) {
+          <button class="btn btn-sm btn-outline-secondary" id="edit_user" (click)="toggleEditing();">
+            <span>{{ 'Edit' | translate }}</span>
+          </button>
+        }
+        @if (editing) {
+          <button class="btn btn-sm btn-primary" id="save_user" [disabled]="editUser.invalid" (click)="saveUser(user);toggleEditing();">
+            <span>{{ 'Save' | translate }}</span>
+          </button>
+        }
+        @if (editing) {
+          <button class="btn btn-sm btn-outline-secondary" (click)="toggleEditing();">
+            <span>{{ 'Cancel' | translate }}</span>
+          </button>
+        }
+        @if (getUserID() !== user.id) {
+          <button class="btn btn-sm btn-danger" id="delete_user" (click)="deleteUser(user)">
+            <span>{{ 'Delete' | translate }}</span>
+          </button>
+        }
+      </span>
+    </span>
+  </div>
+  @if (editing) {
+    <div class="editor">
+      <hr />
+      <div class="row">
+        <div class="col-md-6">
+          <div class="form-group">
+            <div appImageUpload [imageUploadModel]="user" [imageUploadModelAttr]="'picture'" [imageUploadId]="user.id"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          @if (user.role !== 'receiver' || !nodeData.simplified_login) {
+            <div class="form-group">
+              <label>{{ 'Username' | translate }}</label>
+              <input class="form-control" name="username" [(ngModel)]="user.username" type="text" required />
+              @if (editUser.form.get('username')?.errors?.['required']) {
+                <div class="text-danger">{{'This field is mandatory' | translate }}</div>
+              }
+            </div>
+          }
+          <div class="form-group">
+            <label>{{ 'Name' | translate }}</label>
+            <input class="form-control" name="name" [(ngModel)]="user.name" type="text" required />
+            @if (editUser.form.get('name')?.errors?.['required']) {
+              <div class="text-danger">This field is mandatory </div>
+            }
+          </div>
+          <div class="form-group">
+            <label>{{ 'Public name' | translate }}</label>
+            <input class="form-control" name="public_name" [(ngModel)]="user.public_name" type="text" required />
+          </div>
+          <div class="form-group">
+            <label>{{ 'Description' | translate }}</label>
+            <textarea name="description" class="form-control" [(ngModel)]="user.description"></textarea>
+          </div>
+          <div class="form-group">
+            <label>{{ 'Email address' | translate }}</label>
+            <input class="form-control" name="email" [(ngModel)]="user.mail_address" type="email" [pattern]="Constants.emailRegexp" required />
+            @if (editUser.form.get('email')?.errors?.['required']) {
+              <div class="text-danger">
+                {{ 'This field is mandatory' | translate }}
+              </div>
+            }
+            @if (editUser.form.get('email')?.errors?.['pattern']) {
+              <div class="text-danger"> Invalid email address </div>
+            }
+          </div>
+          @if (getUserID() !== user.id) {
+            <div class="form-group">
+              <label>{{ 'Password' | translate }}</label>
+              <div>
+                <span class="btn btn-outline-secondary" (click)="resetUserPassword(user)">
+                  <i class="fa-solid fa-sync"></i>
+                  @if (user.last_login === '1970-01-01T00:00:00Z') {
+                    <span>{{ 'Send activation link' |
+                    translate }}</span>
+                  }
+                  @if (user.last_login !== '1970-01-01T00:00:00Z') {
+                    <span>{{ 'Send reset link' |
+                    translate }}</span>
+                  }
+                </span>
+                @if (!user.encryption || preferenceData.escrow) {
+                  <span class="btn btn-outline-secondary" (click)="user.newpassword = !user.newpassword">
+                    <i class="fa-solid fa-edit"></i>
+                    <span id="set_password">{{ 'Set password' | translate }}</span>
+                  </span>
+                }
+              </div>
+              @if (user.newpassword) {
                 <div class="form-group">
-                    <div appImageUpload [imageUploadModel]="user" [imageUploadModelAttr]="'picture'" [imageUploadId]="user.id"></div>
+                  <input class="d-none" type="password" name="disable-autocomplete" />
+                  <span class="input-group">
+                    <input name="password" class="form-control" [(ngModel)]="setPasswordArgs.password" #password="ngModel" type="password" (passwordStrengthChange)="onPasswordStrengthChange($event)" [ngClass]="{'is-invalid': setPasswordArgs.password && (!password?.errors?.['passwordStrengthValidator'] && !password?.valid)}" autocomplete="off" passwordStrengthValidator />
+                    <span class="input-group-append">
+                      <button id="setPasswordButton" class="btn btn-primary rounded-start-0 m-0" (click)="setPassword(setPasswordArgs)">
+                        <i class="fa-solid fa-tag"></i>
+                        <span id="set_password">{{ 'Set password' | translate }}</span>
+                      </button>
+                    </span>
+                  </span>
+                  @if (passwordStrengthScore>0) {
+                    <src-password-meter [passwordStrengthScore]="passwordStrengthScore"></src-password-meter>
+                  }
+                  @if (passwordStrengthScore && passwordStrengthScore < 2) {
+                    <div class="text-danger">{{ 'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.' | translate }}</div>
+                  }
                 </div>
+              }
+            </div>
+          }
+          <div class="form-group">
+            <input class="form-check-input" [(ngModel)]="user.enabled" type="checkbox" />
+            <label>{{ 'Enabled' | translate }}</label>
+          </div>
+          <div class="form-group">
+            <input class="form-check-input" [(ngModel)]="user.password_change_needed" [disabled]="user.password_change_needed" type="checkbox" />
+            <label>{{ 'Force password change' | translate }}</label>
+            @if (changePasswordArgs.password_change_needed) {
+              <div>
+                <span class="badge bg-primary">{{ 'Enabled' | translate }}</span>
+                <span>{{ 'The user will be forced to change its password on next login.' | translate}}</span>
+              </div>
+            }
+          </div>
+          @if (user.two_factor) {
+            <div class="form-group">
+              <span class="btn btn-danger" (click)="disable2FA(user)">
+                <i class="fa-solid fa-ban"></i>
+                <span>{{ 'Disable two factor authentication' | translate }}</span>
+              </span>
             </div>
+          }
+          <div class="form-group">
+            <label>{{ 'Language' | translate }}</label>
+            <select class="form-select-custom" [(ngModel)]="user.language" [ngModelOptions]="{standalone: true}">
+              @for (item of appServiceData.languages_enabled_selector; track item) {
+                <option [value]="item.code">
+                  {{ item.name }}
+                </option>
+              }
+            </select>
+          </div>
+          <div class="form-group">
+            <input class="form-check-input" [(ngModel)]="user.notification" type="checkbox">
+            <label>{{ 'Enable email notifications' | translate }}</label>
+          </div>
         </div>
+      </div>
+      @if (nodeData.pgp) {
         <div class="row">
-            <div class="col-md-12">
-                <div class="form-group" *ngIf="user.role !== 'receiver' || !nodeData.simplified_login">
-                    <label>{{ 'Username' | translate }}</label>
-                    <input class="form-control" name="username" [(ngModel)]="user.username" type="text" required />
-                    <div class="text-danger" *ngIf="editUser.form.get('username')?.errors?.['required']">{{'This field is mandatory' | translate }}</div>
-                </div>
-                <div class="form-group">
-                    <label>{{ 'Name' | translate }}</label>
-                    <input class="form-control" name="name" [(ngModel)]="user.name" type="text" required />
-                    <div class="text-danger" *ngIf="editUser.form.get('name')?.errors?.['required']">This field is mandatory </div>
-                </div>
+          <div class="col-md-12">
+            @if (user.pgp_key_fingerprint) {
+              <div class="form-group">
                 <div class="form-group">
-                    <label>{{ 'Public name' | translate }}</label>
-                    <input class="form-control" name="public_name" [(ngModel)]="user.public_name" type="text" required />
+                  <label>{{ 'Details of the PGP key:' | translate }}</label>
+                  <p>
+                    <span>{{ 'Fingerprint' | translate }}</span>: <span>{{ user.pgp_key_fingerprint }}</span>
+                  </p>
+                  <p>
+                    <span>{{ 'Expiration date' | translate }}</span>: {{ user.pgp_key_expiration |
+                    date:"dd/MM/yyyy" }}
+                  </p>
                 </div>
                 <div class="form-group">
-                    <label>{{ 'Description' | translate }}</label>
-                    <textarea name="description" class="form-control" [(ngModel)]="user.description"></textarea>
+                  <input class="form-check-input" [(ngModel)]="user.pgp_key_remove" type="checkbox" />
+                  <label>{{ 'Remove' | translate }}</label>
                 </div>
-                <div class="form-group">
-                    <label>{{ 'Email address' | translate }}</label>
-                    <input class="form-control" name="email" [(ngModel)]="user.mail_address" type="email" [pattern]="Constants.emailRegexp" required />
-                    <div class="text-danger" *ngIf="editUser.form.get('email')?.errors?.['required']">
-                        {{ 'This field is mandatory' | translate }}
-                    </div>
-                    <div class="text-danger" *ngIf="editUser.form.get('email')?.errors?.['pattern']"> Invalid email address </div>
-                </div>
-                <div class="form-group" *ngIf="getUserID() !== user.id">
-                    <label>{{ 'Password' | translate }}</label>
-                    <div>
-                        <span class="btn btn-outline-secondary" (click)="resetUserPassword(user)">
-                            <i class="fa-solid fa-sync"></i>
-                            <span *ngIf="user.last_login === '1970-01-01T00:00:00Z'">{{ 'Send activation link' |
-                              translate }}</span>
-                            <span *ngIf="user.last_login !== '1970-01-01T00:00:00Z'">{{ 'Send reset link' |
-                              translate }}</span>
-                        </span>
-                        <span class="btn btn-outline-secondary" *ngIf="!user.encryption || preferenceData.escrow" (click)="user.newpassword = !user.newpassword">
-                            <i class="fa-solid fa-edit"></i>
-                            <span id="set_password">{{ 'Set password' | translate }}</span>
-                        </span>
-                    </div>
-                    <div class="form-group" *ngIf="user.newpassword">
-                        <input class="d-none" type="password" name="disable-autocomplete" />
-                        <span class="input-group">
-                            <input name="password" class="form-control" [(ngModel)]="setPasswordArgs.password" #password="ngModel" type="password" (passwordStrengthChange)="onPasswordStrengthChange($event)" [ngClass]="{'is-invalid': setPasswordArgs.password && (!password?.errors?.['passwordStrengthValidator'] && !password?.valid)}" autocomplete="off" passwordStrengthValidator />
-                            <span class="input-group-append">
-                                <button id="setPasswordButton" class="btn btn-primary rounded-start-0 m-0" (click)="setPassword(setPasswordArgs)">
-                                    <i class="fa-solid fa-tag"></i>
-                                    <span id="set_password">{{ 'Set password' | translate }}</span>
-                                </button>
-                            </span>
-                        </span>
-                        <src-password-meter *ngIf="passwordStrengthScore>0" [passwordStrengthScore]="passwordStrengthScore"></src-password-meter>
-                        <div class="text-danger" *ngIf="passwordStrengthScore && passwordStrengthScore < 2">{{ 'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.' | translate }}</div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" [(ngModel)]="user.enabled" type="checkbox" />
-                    <label>{{ 'Enabled' | translate }}</label>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" [(ngModel)]="user.password_change_needed" [disabled]="user.password_change_needed" type="checkbox" />
-                    <label>{{ 'Force password change' | translate }}</label>
-                    <div *ngIf="changePasswordArgs.password_change_needed">
-                        <span class="badge bg-primary">{{ 'Enabled' | translate }}</span>
-                        <span>{{ 'The user will be forced to change its password on next login.' | translate}}</span>
-                    </div>
-                </div>
-                <div class="form-group" *ngIf="user.two_factor">
-                    <span class="btn btn-danger" (click)="disable2FA(user)">
-                        <i class="fa-solid fa-ban"></i>
-                        <span>{{ 'Disable two factor authentication' | translate }}</span>
-                    </span>
-                </div>
-                <div class="form-group">
-                    <label>{{ 'Language' | translate }}</label>
-                    <select class="form-select-custom" [(ngModel)]="user.language" [ngModelOptions]="{standalone: true}">
-                        <option *ngFor="let item of appServiceData.languages_enabled_selector" [value]="item.code">
-                            {{ item.name }}
-                        </option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" [(ngModel)]="user.notification" type="checkbox">
-                    <label>{{ 'Enable email notifications' | translate }}</label>
+              </div>
+            }
+            @if (user.pgp_key_fingerprint === '') {
+              <div class="form-group">
+                <div class="position-relative">
+                  <label>{{ 'Set up encryption by providing a PGP public key' | translate }}</label>
+                  <div>
+                    <input #uploader id="customFile" type="file" [style.display]="'none'" class="custom-file-input" (change)="loadPublicKeyFile(uploader.files,user)" />
+                    <label class="btn btn-sm btn-outline-secondary" for="customFile">
+                      <i class="fa-solid fa-upload"></i>
+                      <span>{{ 'Upload' | translate }}</span>
+                    </label>
+                  </div>
                 </div>
-            </div>
+              </div>
+            }
+          </div>
         </div>
-        <div class="row" *ngIf="nodeData.pgp">
-            <div class="col-md-12">
-                <div class="form-group" *ngIf="user.pgp_key_fingerprint">
-                    <div class="form-group">
-                        <label>{{ 'Details of the PGP key:' | translate }}</label>
-                        <p>
-                            <span>{{ 'Fingerprint' | translate }}</span>: <span>{{ user.pgp_key_fingerprint }}</span>
-                        </p>
-                        <p>
-                            <span>{{ 'Expiration date' | translate }}</span>: {{ user.pgp_key_expiration |
-                          date:"dd/MM/yyyy" }}
-                        </p>
-                    </div>
-                    <div class="form-group">
-                        <input class="form-check-input" [(ngModel)]="user.pgp_key_remove" type="checkbox" />
-                        <label>{{ 'Remove' | translate }}</label>
-                    </div>
-                </div>
-                <div class="form-group" *ngIf="user.pgp_key_fingerprint === ''">
-                    <div class="position-relative">
-                        <label>{{ 'Set up encryption by providing a PGP public key' | translate }}</label>
-                        <div>
-                            <input #uploader id="customFile" type="file" [style.display]="'none'" class="custom-file-input" (change)="loadPublicKeyFile(uploader.files,user)" />
-                            <label class="btn btn-sm btn-outline-secondary" for="customFile">
-                                <i class="fa-solid fa-upload"></i>
-                                <span>{{ 'Upload' | translate }}</span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
+      }
+      @if (user.role === 'admin') {
+        <div class="row">
+          <div class="col-md-12">
+            @if (nodeData.escrow && user.encryption && preferenceData.escrow) {
+              <div class="form-group">
+                <input class="form-check-input" [(ngModel)]="user.escrow" name="user.escrow" type="checkbox" (ngModelChange)="toggleUserEscrow(user)" [disabled]="getUserID() === user.id">
+                <label>{{ 'Give this admin ability to change user passwords' | translate }}</label>
+              </div>
+            }
+          </div>
         </div>
-        <div class="row" *ngIf="user.role === 'admin'">
-            <div class="col-md-12">
-                <div class="form-group" *ngIf="nodeData.escrow && user.encryption && preferenceData.escrow">
-                    <input class="form-check-input" [(ngModel)]="user.escrow" name="user.escrow" type="checkbox" (ngModelChange)="toggleUserEscrow(user)" [disabled]="getUserID() === user.id">
-                    <label>{{ 'Give this admin ability to change user passwords' | translate }}</label>
-                </div>
+      }
+      @if (user.role === 'receiver') {
+        <div class="row">
+          <div class="col-md-12">
+            <div class="form-group">
+              <input class="form-check-input" [(ngModel)]="user.forcefully_selected" type="checkbox">
+              <label>{{ 'Forcefully selected' | translate }}</label>
             </div>
-        </div>
-        <div class="row" *ngIf="user.role === 'receiver'">
-            <div class="col-md-12">
-                <div class="form-group">
-                    <input class="form-check-input" [(ngModel)]="user.forcefully_selected" type="checkbox">
-                    <label>{{ 'Forcefully selected' | translate }}</label>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_mask_information" [(ngModel)]="user.can_mask_information" type="checkbox" />
-                    <span>{{ 'Give this user ability to mask information' | translate }}</span>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_redact_information" [(ngModel)]="user.can_redact_information" type="checkbox" />
-                    <span>{{ 'Give this user ability to permanently redact masked information' | translate }}</span>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_delete_submission" [(ngModel)]="user.can_delete_submission" type="checkbox" />
-                    <label>{{ 'Allow the recipient to delete reports' | translate }}</label>
-                </div>
-                <div  class="form-group" *ngIf="!nodeData.can_postpone_expiration">
-                    <input class="form-check-input" name="can_postpone_expiration" [(ngModel)]="user.can_postpone_expiration" type="checkbox" />
-                    <label>{{ 'Allow the recipient to edit the reports' expiration date' | translate }}</label>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_grant_access_to_reports" [(ngModel)]="user.can_grant_access_to_reports" type="checkbox" />
-                    <label>{{ 'Give this user ability to grant user access to reports' | translate }}</label>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_transfer_access_to_reports" [(ngModel)]="user.can_transfer_access_to_reports" type="checkbox" />
-                    <label>{{ 'Give this user ability to transfer reports to other users' | translate }}</label>
-                </div>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_reopen_reports" [(ngModel)]="user.can_reopen_reports" type="checkbox" />
-                    <label>{{ 'Allow this user to reopen management of a report' | translate }}</label>
-                  </div>
+            <div class="form-group">
+              <input class="form-check-input" name="can_mask_information" [(ngModel)]="user.can_mask_information" type="checkbox" />
+              <span>{{ 'Give this user ability to mask information' | translate }}</span>
+            </div>
+            <div class="form-group">
+              <input class="form-check-input" name="can_redact_information" [(ngModel)]="user.can_redact_information" type="checkbox" />
+              <span>{{ 'Give this user ability to permanently redact masked information' | translate }}</span>
+            </div>
+            <div class="form-group">
+              <input class="form-check-input" name="can_delete_submission" [(ngModel)]="user.can_delete_submission" type="checkbox" />
+              <label>{{ 'Allow the recipient to delete reports' | translate }}</label>
             </div>
+            @if (!nodeData.can_postpone_expiration) {
+              <div  class="form-group">
+                <input class="form-check-input" name="can_postpone_expiration" [(ngModel)]="user.can_postpone_expiration" type="checkbox" />
+                <label>{{ 'Allow the recipient to edit the report expiration date' | translate }}</label>
+              </div>
+            }
+            <div class="form-group">
+              <input class="form-check-input" name="can_grant_access_to_reports" [(ngModel)]="user.can_grant_access_to_reports" type="checkbox" />
+              <label>{{ 'Give this user ability to grant user access to reports' | translate }}</label>
+            </div>
+            <div class="form-group">
+              <input class="form-check-input" name="can_transfer_access_to_reports" [(ngModel)]="user.can_transfer_access_to_reports" type="checkbox" />
+              <label>{{ 'Give this user ability to transfer reports to other users' | translate }}</label>
+            </div>
+            <div class="form-group">
+              <input class="form-check-input" name="can_reopen_reports" [(ngModel)]="user.can_reopen_reports" type="checkbox" />
+              <label>{{ 'Allow this user to reopen management of a report' | translate }}</label>
+            </div>
+          </div>
         </div>
-        <div class="row" *ngIf="user.role !== 'admin'">
-            <div class="col-md-12">
-                <label>{{ 'Give the user administrative access to the following features:' | translate }}</label>
-                <div class="form-group">
-                    <input class="form-check-input" name="can_edit_general_settings" [(ngModel)]="user.can_edit_general_settings" type="checkbox" />
-                    <span>{{ 'Settings' | translate }}</span>
-                </div>
+      }
+      @if (user.role !== 'admin') {
+        <div class="row">
+          <div class="col-md-12">
+            <label>{{ 'Give the user administrative access to the following features:' | translate }}</label>
+            <div class="form-group">
+              <input class="form-check-input" name="can_edit_general_settings" [(ngModel)]="user.can_edit_general_settings" type="checkbox" />
+              <span>{{ 'Settings' | translate }}</span>
             </div>
+          </div>
         </div>
+      }
     </div>
+  }
 </div>
diff --git a/client/app/src/pages/admin/users/user-editor/user-editor.component.ts b/client/app/src/pages/admin/users/user-editor/user-editor.component.ts
index 47881528b7..2fa7aac403 100644
--- a/client/app/src/pages/admin/users/user-editor/user-editor.component.ts
+++ b/client/app/src/pages/admin/users/user-editor/user-editor.component.ts
@@ -1,5 +1,5 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
-import {NgForm} from "@angular/forms";
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, inject } from "@angular/core";
+import { NgForm, FormsModule } from "@angular/forms";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {AppDataService} from "@app/app-data.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -12,12 +12,26 @@ import {Observable} from "rxjs";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
+import { NgClass, DatePipe } from "@angular/common";
+import { ImageUploadDirective } from "../../../../shared/directive/image-upload.directive";
+import { PasswordStrengthValidatorDirective } from "../../../../shared/directive/password-strength-validator.directive";
+import { PasswordMeterComponent } from "../../../../shared/components/password-meter/password-meter.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-user-editor",
-  templateUrl: "./user-editor.component.html"
+    selector: "src-user-editor",
+    templateUrl: "./user-editor.component.html",
+    standalone: true,
+    imports: [ImageUploadDirective, FormsModule, PasswordStrengthValidatorDirective, NgClass, PasswordMeterComponent, DatePipe, TranslatorPipe]
 })
 export class UserEditorComponent implements OnInit {
+  private modalService = inject(NgbModal);
+  private appDataService = inject(AppDataService);
+  private preference = inject(PreferenceResolver);
+  private authenticationService = inject(AuthenticationService);
+  private nodeResolver = inject(NodeResolver);
+  private utilsService = inject(UtilsService);
+
   @Input() user: userResolverModel;
   @Input() users: userResolverModel[];
   @Input() index: number;
@@ -34,9 +48,6 @@ export class UserEditorComponent implements OnInit {
   appServiceData: AppDataService;
   protected readonly Constants = Constants;
 
-  constructor(private modalService: NgbModal, private appDataService: AppDataService, private preference: PreferenceResolver, private authenticationService: AuthenticationService, private nodeResolver: NodeResolver, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     if (this.nodeResolver.dataModel) {
       this.nodeData = this.nodeResolver.dataModel;
diff --git a/client/app/src/pages/admin/users/users-routing.module.ts b/client/app/src/pages/admin/users/users-routing.module.ts
deleted file mode 100644
index 2244a9a002..0000000000
--- a/client/app/src/pages/admin/users/users-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {UsersComponent} from "@app/pages/admin/users/users.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: UsersComponent,
-    pathMatch: "full",
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class UsersRoutingModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/users/users-tab1/users-tab1.component.html b/client/app/src/pages/admin/users/users-tab1/users-tab1.component.html
index d2aa5da783..44fa7dbba9 100644
--- a/client/app/src/pages/admin/users/users-tab1/users-tab1.component.html
+++ b/client/app/src/pages/admin/users/users-tab1/users-tab1.component.html
@@ -1,62 +1,70 @@
 <div class="config-section">
-    <div>
-        <span>{{ 'Users' | translate }}</span>
-        <button class="btn btn-sm btn-primary show-add-user-btn" (click)="toggleAddUser()">
-            <i class="fa-solid fa-plus"></i>
-            <span>{{ 'Add' | translate }}</span>
-        </button>
-    </div>
-    <div class="row" *ngIf="showAddUser">
-        <div ngForm="newUser" #newUser="ngForm" class="addUser col-md-6">
-            <div class="form-group">
-                <label>{{ 'Role' | translate }}</label>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                <div>
-                    <select name="role" class="form-select-custom" [(ngModel)]="new_user.role" required>
-                        <option value="admin">{{ 'Admin' | translate }}</option>
-                        <option value="analyst">{{ 'Analyst' | translate }}</option>
-                        <option value="custodian">{{ 'Custodian' | translate }}</option>
-                        <option value="receiver">{{ 'Recipient' | translate }}</option>
-                    </select>
-                </div>
-            </div>
-            <div class="form-group" *ngIf="new_user.role !== 'receiver' || !nodeResolver.dataModel.simplified_login">
-                <label>{{ 'Username' | translate }}</label>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                <div>
-                    <input class="form-control" name="username" [(ngModel)]="new_user.username" type="text" required />
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{ 'Name' | translate }}</label>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                <div>
-                    <input class="form-control" name="name" [(ngModel)]="new_user.name" type="text" required />
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{ 'Email address' | translate }}</label>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                <div>
-                    <input class="form-control" [(ngModel)]="new_user.email" #email="ngModel" name="email" [pattern]="Constants.emailRegexp" [ngClass]="{'is-invalid': email.invalid && (email.dirty || email.touched)}" type="email" required />
-                </div>
-                <div class="text-danger" *ngIf="email?.errors?.['pattern'] && email.invalid && (email.dirty || email.touched)">
-                    {{ 'Invalid email address' | translate }}
-                </div>
+  <div>
+    <span>{{ 'Users' | translate }}</span>
+    <button class="btn btn-sm btn-primary show-add-user-btn" (click)="toggleAddUser()">
+      <i class="fa-solid fa-plus"></i>
+      <span>{{ 'Add' | translate }}</span>
+    </button>
+  </div>
+  @if (showAddUser) {
+    <div class="row">
+      <div ngForm="newUser" #newUser="ngForm" class="addUser col-md-6">
+        <div class="form-group">
+          <label>{{ 'Role' | translate }}</label>
+          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+          <div>
+            <select name="role" class="form-select-custom" [(ngModel)]="new_user.role" required>
+              <option value="admin">{{ 'Admin' | translate }}</option>
+              <option value="analyst">{{ 'Analyst' | translate }}</option>
+              <option value="custodian">{{ 'Custodian' | translate }}</option>
+              <option value="receiver">{{ 'Recipient' | translate }}</option>
+            </select>
+          </div>
+        </div>
+        @if (new_user.role !== 'receiver' || !nodeResolver.dataModel.simplified_login) {
+          <div class="form-group">
+            <label>{{ 'Username' | translate }}</label>
+            <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+            <div>
+              <input class="form-control" name="username" [(ngModel)]="new_user.username" type="text" required />
             </div>
-            <div class="form-group">
-                <button id="add-btn" class="btn btn-primary" [disabled]="newUser.invalid" (click)="addUser(); toggleAddUser()" type="submit">
-                    <i class="fa-solid fa-plus"></i>
-                    <span>{{ 'Add' | translate }}</span>
-                </button>
+          </div>
+        }
+        <div class="form-group">
+          <label>{{ 'Name' | translate }}</label>
+          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+          <div>
+            <input class="form-control" name="name" [(ngModel)]="new_user.name" type="text" required />
+          </div>
+        </div>
+        <div class="form-group">
+          <label>{{ 'Email address' | translate }}</label>
+          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+          <div>
+            <input class="form-control" [(ngModel)]="new_user.email" #email="ngModel" name="email" [pattern]="Constants.emailRegexp" [ngClass]="{'is-invalid': email.invalid && (email.dirty || email.touched)}" type="email" required />
+          </div>
+          @if (email?.errors?.['pattern'] && email.invalid && (email.dirty || email.touched)) {
+            <div class="text-danger">
+              {{ 'Invalid email address' | translate }}
             </div>
+          }
+        </div>
+        <div class="form-group">
+          <button id="add-btn" class="btn btn-primary" [disabled]="newUser.invalid" (click)="addUser(); toggleAddUser()" type="submit">
+            <i class="fa-solid fa-plus"></i>
+            <span>{{ 'Add' | translate }}</span>
+          </button>
         </div>
+      </div>
     </div>
+  }
 </div>
-<ng-container *ngIf="usersData.length > 0">
-    <div class="userList" *ngFor="let user of usersData | orderBy:'name'; let index = index">
-        <form id="user-{{index}}" name="editUser" #editUser="ngForm" novalidate>
-            <src-user-editor [user]="user" [editUser]="editUser" [index]="index" [users]="usersData"></src-user-editor>
-        </form>
+@if (usersData.length > 0) {
+  @for (user of usersData | orderBy:'name'; track user; let index = $index) {
+    <div class="userList">
+      <form id="user-{{index}}" name="editUser" #editUser="ngForm" novalidate>
+        <src-user-editor [user]="user" [editUser]="editUser" [index]="index" [users]="usersData"></src-user-editor>
+      </form>
     </div>
-</ng-container>
\ No newline at end of file
+  }
+}
\ No newline at end of file
diff --git a/client/app/src/pages/admin/users/users-tab1/users-tab1.component.ts b/client/app/src/pages/admin/users/users-tab1/users-tab1.component.ts
index c56bf4d04c..995d63a097 100644
--- a/client/app/src/pages/admin/users/users-tab1/users-tab1.component.ts
+++ b/client/app/src/pages/admin/users/users-tab1/users-tab1.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {NewUser} from "@app/models/admin/new-user";
 import {tenantResolverModel} from "@app/models/resolvers/tenant-resolver-model";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
@@ -8,12 +8,25 @@ import {TenantsResolver} from "@app/shared/resolvers/tenants.resolver";
 import {UsersResolver} from "@app/shared/resolvers/users.resolver";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { UserEditorComponent } from "../user-editor/user-editor.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-users-tab1",
-  templateUrl: "./users-tab1.component.html"
+    selector: "src-users-tab1",
+    templateUrl: "./users-tab1.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, UserEditorComponent, TranslatorPipe, OrderByPipe]
 })
 export class UsersTab1Component implements OnInit {
+  private httpService = inject(HttpService);
+  protected nodeResolver = inject(NodeResolver);
+  private usersResolver = inject(UsersResolver);
+  private tenantsResolver = inject(TenantsResolver);
+  private utilsService = inject(UtilsService);
+
   showAddUser = false;
   tenantData: tenantResolverModel;
   usersData: userResolverModel[];
@@ -26,9 +39,6 @@ export class UsersTab1Component implements OnInit {
   editing = false;
   protected readonly Constants = Constants;
 
-  constructor(private httpService: HttpService, protected nodeResolver: NodeResolver, private usersResolver: UsersResolver, private tenantsResolver: TenantsResolver, private utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     if (this.usersResolver.dataModel) {
       this.usersData = this.usersResolver.dataModel;
diff --git a/client/app/src/pages/admin/users/users-tab2/users-tab2.component.ts b/client/app/src/pages/admin/users/users-tab2/users-tab2.component.ts
index 7d06c95510..0700f0f439 100644
--- a/client/app/src/pages/admin/users/users-tab2/users-tab2.component.ts
+++ b/client/app/src/pages/admin/users/users-tab2/users-tab2.component.ts
@@ -1,17 +1,21 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-users-tab2",
-  templateUrl: "./users-tab2.component.html"
+    selector: "src-users-tab2",
+    templateUrl: "./users-tab2.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslatorPipe]
 })
 export class UsersTab2Component implements OnInit {
-  nodeData: nodeResolverModel;
+  private nodeResolver = inject(NodeResolver);
+  private utilsService = inject(UtilsService);
 
-  constructor(private nodeResolver: NodeResolver, private utilsService: UtilsService) {
-  }
+  nodeData: nodeResolverModel;
 
   ngOnInit(): void {
     if (this.nodeResolver.dataModel) {
diff --git a/client/app/src/pages/admin/users/users.component.html b/client/app/src/pages/admin/users/users.component.html
index 1791a7874d..ee4f291e06 100644
--- a/client/app/src/pages/admin/users/users.component.html
+++ b/client/app/src/pages/admin/users/users.component.html
@@ -1,19 +1,19 @@
 <div class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-users-tab1></src-users-tab1>
-    </ng-template>
-    <ng-template #tab2>
-        <src-users-tab2></src-users-tab2>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink [attr.data-cy]="tab.id">{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-users-tab1></src-users-tab1>
+  </ng-template>
+  <ng-template #tab2>
+    <src-users-tab2></src-users-tab2>
+  </ng-template>
 </div>
diff --git a/client/app/src/pages/admin/users/users.component.ts b/client/app/src/pages/admin/users/users.component.ts
index a3f816ce87..8a6fa232f6 100644
--- a/client/app/src/pages/admin/users/users.component.ts
+++ b/client/app/src/pages/admin/users/users.component.ts
@@ -1,23 +1,28 @@
-import {AfterViewInit, Component, TemplateRef, ViewChild, ChangeDetectorRef} from "@angular/core";
+import { AfterViewInit, Component, TemplateRef, ViewChild, ChangeDetectorRef, inject } from "@angular/core";
 import {Tab} from "@app/models/component-model/tab";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UsersTab1Component} from "@app/pages/admin/users/users-tab1/users-tab1.component";
 import {UsersTab2Component} from "@app/pages/admin/users/users-tab2/users-tab2.component";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-users",
-  templateUrl: "./users.component.html"
+    selector: "src-users",
+    templateUrl: "./users.component.html",
+    standalone: true,
+    imports: [NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, UsersTab1Component, UsersTab2Component, TranslatorPipe]
 })
 export class UsersComponent implements AfterViewInit {
+  node = inject(NodeResolver);
+  private cdr = inject(ChangeDetectorRef);
+
   @ViewChild("tab1") tab1!: TemplateRef<UsersTab1Component>;
   @ViewChild("tab2") tab2!: TemplateRef<UsersTab2Component>;
   tabs: Tab[];
   nodeData: NodeResolver;
   active: string;
 
-  constructor(public node: NodeResolver, private cdr: ChangeDetectorRef) {
-  }
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.active = "Users";
diff --git a/client/app/src/pages/admin/users/users.module.ts b/client/app/src/pages/admin/users/users.module.ts
deleted file mode 100644
index 72066f759f..0000000000
--- a/client/app/src/pages/admin/users/users.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {UsersRoutingModule} from "@app/pages/admin/users/users-routing.module";
-import {UserEditorComponent} from "@app/pages/admin/users/user-editor/user-editor.component";
-import {FormsModule} from "@angular/forms";
-import {RouterModule} from "@angular/router";
-import {NgbNavModule, NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {SharedModule} from "@app/shared.module";
-import {UsersComponent} from "@app/pages/admin/users/users.component";
-import {UsersTab1Component} from "@app/pages/admin/users/users-tab1/users-tab1.component";
-import {UsersTab2Component} from "@app/pages/admin/users/users-tab2/users-tab2.component";
-
-
-@NgModule({
-  declarations: [
-    UsersComponent,
-    UserEditorComponent,
-    UsersTab1Component,
-    UsersTab2Component
-  ],
-  imports: [
-    CommonModule,
-    UsersRoutingModule,
-    SharedModule, NgbNavModule, NgbModule, RouterModule, FormsModule, NgSelectModule
-  ]
-})
-export class UsersModule {
-}
\ No newline at end of file
diff --git a/client/app/src/pages/analyst/analyst.module.ts b/client/app/src/pages/analyst/analyst.module.ts
deleted file mode 100644
index 6acca00e57..0000000000
--- a/client/app/src/pages/analyst/analyst.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {RouterModule} from "@angular/router";
-import {TranslateModule} from "@ngx-translate/core";
-import {SharedModule} from "@app/shared.module";
-import {FormsModule} from "@angular/forms";
-import {NgbDatepickerModule, NgbDropdownModule, NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
-import {NgMultiSelectDropDownModule} from "ng-multiselect-dropdown";
-import { HomeComponent } from '@app/pages/analyst/home/home.component';
-import { SidebarComponent } from '@app/pages/analyst/sidebar/sidebar.component';
-import { StatisticsComponent } from '@app/pages/analyst/statistics/statistics.component';
-import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
-
-
-@NgModule({
-  declarations:[
-    HomeComponent,
-    SidebarComponent,
-    StatisticsComponent
-  ],
-  imports: [
-    CommonModule, RouterModule, TranslateModule, SharedModule, FormsModule,
-    NgbModule, NgbNavModule,BaseChartDirective,
-    NgbDatepickerModule, NgbDropdownModule, NgMultiSelectDropDownModule.forRoot()
-
-  ],
-  providers: [provideCharts(withDefaultRegisterables())],
-  exports: [SidebarComponent]
-})
-export class AnalystModule { }
diff --git a/client/app/src/pages/analyst/analyst-routing.module.ts b/client/app/src/pages/analyst/analyst.routes.ts
similarity index 54%
rename from client/app/src/pages/analyst/analyst-routing.module.ts
rename to client/app/src/pages/analyst/analyst.routes.ts
index 1161e2ba0b..95dd1cf123 100644
--- a/client/app/src/pages/analyst/analyst-routing.module.ts
+++ b/client/app/src/pages/analyst/analyst.routes.ts
@@ -1,21 +1,17 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {HomeComponent} from "@app/pages/analyst/home/home.component";
-import {StatisticsComponent} from "@app/pages/analyst/statistics/statistics.component";
-import {PreferencesComponent} from "@app/shared/partials/preferences/preferences.component";
+import {Routes} from "@angular/router";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {RTipsResolver} from "@app/shared/resolvers/r-tips-resolver.service";
 import {StatisticsResolver} from "@app/shared/resolvers/statistics.resolver";
-const routes: Routes = [
+export const analystRoutes: Routes = [
   {
     path: "",
-    component: HomeComponent,
+    loadComponent: () => import('@app/pages/analyst/home/home.component').then(m => m.HomeComponent),
     pathMatch: "full",
     data: {pageTitle: "Home"},
   },
   {
     path: "home",
-    component: HomeComponent,
+    loadComponent: () => import('@app/pages/analyst/home/home.component').then(m => m.HomeComponent),
     pathMatch: "full",
     resolve: {
       PreferenceResolver, RTipsResolver
@@ -24,7 +20,7 @@ const routes: Routes = [
   },
   {
     path: "statistics",
-    component: StatisticsComponent,
+    loadComponent: () => import('@app/pages/analyst/statistics/statistics.component').then(m => m.StatisticsComponent),
     resolve: {
       StatisticsResolver
     },
@@ -33,17 +29,11 @@ const routes: Routes = [
   },
   {
     path: "preferences",
-    component: PreferencesComponent,
+    loadComponent: () => import('@app/shared/partials/preferences/preferences.component').then(m => m.PreferencesComponent),
     pathMatch: "full",
     resolve: {
       PreferenceResolver, RTipsResolver
     },
     data: {pageTitle: "Preferences"},
   }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class AnalystRoutingModule { }
+];
\ No newline at end of file
diff --git a/client/app/src/pages/analyst/home/home.component.ts b/client/app/src/pages/analyst/home/home.component.ts
index e727c06851..c756eaaa44 100644
--- a/client/app/src/pages/analyst/home/home.component.ts
+++ b/client/app/src/pages/analyst/home/home.component.ts
@@ -1,17 +1,22 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { UserHomeComponent } from "../../../shared/partials/user-home/user-home.component";
 
 @Component({
-  selector: "src-analyst-home",
-  templateUrl: "./home.component.html"
+    selector: "src-analyst-home",
+    templateUrl: "./home.component.html",
+    standalone: true,
+    imports: [UserHomeComponent]
 })
 export class HomeComponent implements OnInit {
+  private appDataService = inject(AppDataService);
+  private utilsService = inject(UtilsService);
+  private preference = inject(PreferenceResolver);
+
   preferenceData:  preferenceResolverModel;
-  constructor(private appDataService: AppDataService,private utilsService: UtilsService, private preference: PreferenceResolver) {
-  }
 
   ngOnInit(): void {
     if (this.preference.dataModel) {
diff --git a/client/app/src/pages/analyst/sidebar/sidebar.component.ts b/client/app/src/pages/analyst/sidebar/sidebar.component.ts
index b244a5eae5..b998f06f03 100644
--- a/client/app/src/pages/analyst/sidebar/sidebar.component.ts
+++ b/client/app/src/pages/analyst/sidebar/sidebar.component.ts
@@ -1,13 +1,17 @@
-import {Component} from "@angular/core";
-import {Router} from "@angular/router";
+import { Component, inject } from "@angular/core";
+import { Router, RouterLink, RouterLinkActive } from "@angular/router";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-analyst-sidebar",
-  templateUrl: "./sidebar.component.html"
+    selector: "src-analyst-sidebar",
+    templateUrl: "./sidebar.component.html",
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, TranslateModule, TranslatorPipe]
 })
-export class SidebarComponent {
-  constructor(private router: Router) {
-  }
+export class AnalystSidebarComponent {
+  private router = inject(Router);
+
 
   isActive(route: string): boolean {
     return this.router.isActive(route, {
diff --git a/client/app/src/pages/analyst/statistics/statistics.component.html b/client/app/src/pages/analyst/statistics/statistics.component.html
index 8ac200d67a..654eb56f8f 100644
--- a/client/app/src/pages/analyst/statistics/statistics.component.html
+++ b/client/app/src/pages/analyst/statistics/statistics.component.html
@@ -1,22 +1,24 @@
 <div class="row">
-    <div class="col-md-3">
-        <div class="card">
-            <div class="card-header">{{ 'Reports' | translate }}</div>
-            <div class="card-body text-center">
-                <h2>{{ charts[0].total }}</h2>
-            </div>
-        </div>
+  <div class="col-md-3">
+    <div class="card">
+      <div class="card-header">{{ 'Reports' | translate }}</div>
+      <div class="card-body text-center">
+        <h2>{{ charts[0].total }}</h2>
+      </div>
     </div>
+  </div>
 </div>
 
 <div class="row">
-    <div *ngFor="let chart of charts; let i = index" class="col-md-3">
-        <div class="card">
-            <div class="card-header">{{ chart.title | translate }}</div>
-            <div class="card-body analyst-graph">
-              <canvas baseChart class="chart chart-pie" [type]="'pie'" [labels]="chart.labels" [datasets]="chart.datasets" [legend]="true">
-                </canvas>
-            </div>
+  @for (chart of charts; track chart; let i = $index) {
+    <div class="col-md-3">
+      <div class="card">
+        <div class="card-header">{{ chart.title | translate }}</div>
+        <div class="card-body analyst-graph">
+          <canvas baseChart class="chart chart-pie" [type]="'pie'" [labels]="chart.labels" [datasets]="chart.datasets" [legend]="true">
+          </canvas>
         </div>
+      </div>
     </div>
+  }
 </div>
diff --git a/client/app/src/pages/analyst/statistics/statistics.component.ts b/client/app/src/pages/analyst/statistics/statistics.component.ts
index 5a6b4bff08..909a10a960 100644
--- a/client/app/src/pages/analyst/statistics/statistics.component.ts
+++ b/client/app/src/pages/analyst/statistics/statistics.component.ts
@@ -1,15 +1,26 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { StatisticsResolver } from '@app/shared/resolvers/statistics.resolver';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
+import { TranslatorPipe } from '@app/shared/pipes/translate';
 
 @Component({
-  selector: 'src-statistics',
-  templateUrl: './statistics.component.html',
+    selector: 'src-statistics',
+    templateUrl: './statistics.component.html',
+    standalone: true,
+    imports: [
+    BaseChartDirective,
+    TranslateModule,
+    TranslatorPipe
+],
+    providers: [provideCharts(withDefaultRegisterables())],
 })
 export class StatisticsComponent implements OnInit {
-  charts: any[] = [];
+  private translateService = inject(TranslateService);
+  private statisticsResolver = inject(StatisticsResolver);
 
-  constructor(private translateService: TranslateService, private statisticsResolver: StatisticsResolver) { }
+  charts: any[] = [];
 
   ngOnInit(): void {
     this.initializeCharts();
diff --git a/client/app/src/pages/app/app.component.html b/client/app/src/pages/app/app.component.html
index 3768612249..f0211cb3db 100644
--- a/client/app/src/pages/app/app.component.html
+++ b/client/app/src/pages/app/app.component.html
@@ -1,67 +1,85 @@
-<ng-container *ngIf="!supportedBrowser">
-    <div id="BrowserNotSupported">
-        <h1>Error!</h1><br/> <br/>
-        <div> You are running an unsupported and potentially vulnerable browser. <br/> <br/> In order to use GlobaLeaks you
-            are strongly advised to download and install the Tor Browser. <br/> The Tor Browser includes various privacy and
-            security enhancements not present in other browsers. <br/> <br/>
-            <a href="https://www.torproject.org/download/" rel="noreferrer" target="_blank" class="text-center">[ Download
-                the Tor Browser ]</a> <br/> <br/> This is the list of the other supported browsers: <br/>
-            <ul>
-                <li>Mozilla Firefox &gt;= 38</li>
-                <li>Google Chrome &gt;= 45</li>
-                <li>Brave &gt;= 1.20.110</li>
-                <li>Edge (any)</li>
-                <li>Internet Explorer 11</li>
-                <li>Safari: &gt;= 8</li>
-                <li>iOS &gt;= 9</li>
-                <li>Android &gt;= 4.4</li>
-            </ul>
-        </div>
+@if (!supportedBrowser) {
+  <div id="BrowserNotSupported">
+    <h1>Error!</h1><br/> <br/>
+    <div> You are running an unsupported and potentially vulnerable browser. <br/> <br/> In order to use GlobaLeaks you
+      are strongly advised to download and install the Tor Browser. <br/> The Tor Browser includes various privacy and
+      security enhancements not present in other browsers. <br/> <br/>
+      <a href="https://www.torproject.org/download/" rel="noreferrer" target="_blank" class="text-center">[ Download
+      the Tor Browser ]</a> <br/> <br/> This is the list of the other supported browsers: <br/>
+      <ul>
+        <li>Mozilla Firefox &gt;= 38</li>
+        <li>Google Chrome &gt;= 45</li>
+        <li>Brave &gt;= 1.20.110</li>
+        <li>Edge (any)</li>
+        <li>Internet Explorer 11</li>
+        <li>Safari: &gt;= 8</li>
+        <li>iOS &gt;= 9</li>
+        <li>Android &gt;= 4.4</li>
+      </ul>
     </div>
-</ng-container>
+  </div>
+}
 <div id="Skip"><a href="#Content" tabindex="0">{{'Skip to content'|translate}}</a></div>
-<div [attr.data-cy]="'page-loader-overlay'" id="PageOverlay" *ngIf="showLoadingPanel" [@fadeInOut]="!showLoadingPanel ? 'void' : ''">
+@if (showLoadingPanel) {
+  <div [attr.data-cy]="'page-loader-overlay'" id="PageOverlay" [@fadeInOut]="!showLoadingPanel ? 'void' : ''">
     <div id="Loader"></div>
-</div>
-<ng-container *ngIf="appDataService.public.node">
-    <div [dir]="utilsService.getDirection(translate.currentLang)" class="reveal" [ngClass]="{'public': isWhistleblowerPage(), 'block-user-input': showLoadingPanel}">
-        <div *ngIf="authenticationService.session?.properties?.operator_session">
-            <src-operation></src-operation>
-        </div>
-        <div *ngIf="!appDataService.public.node.root_tenant && appDataService.public.node.mode === 'demo'">
-            <src-demo></src-demo>
-        </div>
-        <div *ngIf="isWhistleblowerPage() && location.hash!=='#/admin/' && !appDataService.public.node.disable_privacy_badge">
-            <src-privacybadge></src-privacybadge>
-        </div>
-        <views-header></views-header>
-        <messageconsole id="MessagesConsoleBox"></messageconsole>
-        <div id="PageContent">
-            <div id="ContentBox">
-                <div class="row">
-                    <div *ngIf="appConfig.sidebar && showSidebar" id="Sidebar" class="col-lg-2 col-md-4 col-sm-12" role="navigation">
-                        <nav class="navbar navbar-expand-md p-0" role="navigation">
-                            <div class="navbar-header">
-                                <button type="button" class="navbar-toggler" (click)="isNavCollapsed = !isNavCollapsed">
-                                    <i class="fa-solid fa-bars"></i>
-                                </button>
-                            </div>
-                            <div class="collapse navbar-collapse" [ngbCollapse]="isNavCollapsed">
-                                <div class="navbar-nav">
-                                    <src-receipt-sidebar class="nav-items" *ngIf="appConfig.sidebar==='recipient-sidebar'"></src-receipt-sidebar>
-                                    <src-custodian-sidebar class="nav-items" *ngIf="appConfig.sidebar==='custodian-sidebar'"></src-custodian-sidebar>
-                                    <src-analyst-sidebar class="nav-items" *ngIf="appConfig.sidebar==='analyst-sidebar'"></src-analyst-sidebar>
-                                    <src-admin-sidebar class="nav-items" *ngIf="appConfig.sidebar==='admin-sidebar'"></src-admin-sidebar>
-                                </div>
-                            </div>
-                        </nav>
-                    </div>
-                    <main id="Content" [ngClass]="{'col-lg-10 col-md-8 col-sm-12': appConfig.sidebar && showSidebar , 'col-md-12': !appConfig.sidebar}">
-                        <router-outlet></router-outlet>
-                    </main>
+  </div>
+}
+@if (appDataService.public.node) {
+  <div [dir]="utilsService.getDirection(translate.currentLang)" class="reveal" [ngClass]="{'public': isWhistleblowerPage(), 'block-user-input': showLoadingPanel}">
+    @if (authenticationService.session?.properties?.operator_session) {
+      <div>
+        <src-operation></src-operation>
+      </div>
+    }
+    @if (!appDataService.public.node.root_tenant && appDataService.public.node.mode === 'demo') {
+      <div>
+        <src-demo></src-demo>
+      </div>
+    }
+    @if (isWhistleblowerPage() && location.hash!=='#/admin/' && !appDataService.public.node.disable_privacy_badge) {
+      <div>
+        <src-privacybadge></src-privacybadge>
+      </div>
+    }
+    <views-header></views-header>
+    <messageconsole id="MessagesConsoleBox"></messageconsole>
+    <div id="PageContent">
+      <div id="ContentBox">
+        <div class="row">
+          @if (appConfig.sidebar && showSidebar) {
+            <div id="Sidebar" class="col-lg-2 col-md-4 col-sm-12" role="navigation">
+              <nav class="navbar navbar-expand-md p-0" role="navigation">
+                <div class="navbar-header">
+                  <button type="button" class="navbar-toggler" (click)="isNavCollapsed = !isNavCollapsed">
+                    <i class="fa-solid fa-bars"></i>
+                  </button>
+                </div>
+                <div class="collapse navbar-collapse" [ngbCollapse]="isNavCollapsed">
+                  <div class="navbar-nav">
+                    @if (appConfig.sidebar==='recipient-sidebar') {
+                      <src-receipt-sidebar class="nav-items"></src-receipt-sidebar>
+                    }
+                    @if (appConfig.sidebar==='custodian-sidebar') {
+                      <src-custodian-sidebar class="nav-items"></src-custodian-sidebar>
+                    }
+                    @if (appConfig.sidebar==='analyst-sidebar') {
+                      <src-analyst-sidebar class="nav-items"></src-analyst-sidebar>
+                    }
+                    @if (appConfig.sidebar==='admin-sidebar') {
+                      <src-admin-sidebar class="nav-items"></src-admin-sidebar>
+                    }
+                  </div>
                 </div>
+              </nav>
             </div>
+          }
+          <main id="Content" [ngClass]="{'col-lg-10 col-md-8 col-sm-12': appConfig.sidebar && showSidebar , 'col-md-12': !appConfig.sidebar}">
+            <router-outlet></router-outlet>
+          </main>
         </div>
+      </div>
     </div>
-    <app-footer class="footer mt-auto " dir="ltr"></app-footer>
-</ng-container>
+  </div>
+  <app-footer class="footer mt-auto " dir="ltr"></app-footer>
+}
diff --git a/client/app/src/pages/app/app.component.ts b/client/app/src/pages/app/app.component.ts
index 7f9281948a..d1a3a49148 100644
--- a/client/app/src/pages/app/app.component.ts
+++ b/client/app/src/pages/app/app.component.ts
@@ -1,46 +1,107 @@
-import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit, Renderer2} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, Renderer2, inject } from "@angular/core";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {AppDataService} from "@app/app-data.service";
 import {UtilsService} from "@app/shared/services/utils.service";
-import {LangChangeEvent, TranslateService} from "@ngx-translate/core";
-import {NavigationEnd, Router} from "@angular/router";
+import { LangChangeEvent, TranslateService, TranslateModule } from "@ngx-translate/core";
+import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
 import {BrowserCheckService} from "@app/shared/services/browser-check.service";
 import {animate, state, style, transition, trigger} from "@angular/animations";
 import {TranslationService} from "@app/services/helper/translation.service";
-import {DOCUMENT} from "@angular/common";
+import { DOCUMENT, NgClass } from "@angular/common";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
+import { HeaderComponent } from "../../shared/partials/header/header.component";
+import { NgbCollapse } from "@ng-bootstrap/ng-bootstrap";
+import { TranslatorPipe } from "../../shared/pipes/translate";
+import { FooterComponent } from "@app/shared/partials/footer/footer.component";
+import { PrivacyBadgeComponent } from "@app/shared/partials/privacybadge/privacy-badge.component";
+import { DemoComponent } from "@app/shared/partials/demo/demo.component";
+import { MessageConsoleComponent } from "@app/shared/partials/messageconsole/message-console.component";
+import { OperationComponent } from "@app/shared/partials/operation/operation.component";
+import { AdminSidebarComponent } from "../admin/sidebar/sidebar.component";
+import { AnalystSidebarComponent } from "../analyst/sidebar/sidebar.component";
+import { CustodianSidebarComponent } from "../custodian/sidebar/sidebar.component";
+import { ReceiptSidebarComponent } from "../recipient/sidebar/sidebar.component";
+import { HttpClient } from "@angular/common/http";
+import { registerLocales } from "@app/services/helper/locale-provider";
+import { mockEngine } from "@app/services/helper/mocks";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+import { DEFAULT_INTERRUPTSOURCES, Idle } from "@ng-idle/core";
+import { CryptoService } from "@app/shared/services/crypto.service";
+import { HttpService } from "@app/shared/services/http.service";
+import { Keepalive } from "@ng-idle/keepalive";
+registerLocales();
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, "l10n/", "");
+}
+
+(window as any).mockEngine = mockEngine;
+declare global {
+  interface Window {
+    GL: {
+      language: string;
+      mockEngine: any;
+    };
+  }
+}
+window.GL = {
+  language: 'en', // Assuming a default language
+  mockEngine: mockEngine
+};
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  animations: [
-    trigger('fadeInOut', [
-      state('void', style({
-        opacity: 0
-      })),
-      transition(':enter, :leave', animate(150)),
-    ])
-  ]
+    selector: "app-root",
+    templateUrl: "./app.component.html",
+    animations: [
+        trigger('fadeInOut', [
+            state('void', style({
+                opacity: 0
+            })),
+            transition(':enter, :leave', animate(150)),
+        ])
+    ],
+    standalone: true,
+    imports: [NgClass, HeaderComponent, PrivacyBadgeComponent, AdminSidebarComponent, AnalystSidebarComponent, MessageConsoleComponent, DemoComponent, OperationComponent, CustodianSidebarComponent, ReceiptSidebarComponent, FooterComponent, NgbCollapse, RouterOutlet, TranslateModule, TranslatorPipe]
 })
-export class AppComponent implements AfterViewInit, OnInit {
+export class AppComponent implements AfterViewInit, OnInit, OnDestroy{
+  private document = inject<Document>(DOCUMENT);
+  private renderer = inject(Renderer2);
+  protected browserCheckService = inject(BrowserCheckService);
+  private changeDetectorRef = inject(ChangeDetectorRef);
+  private router = inject(Router);
+  protected translationService = inject(TranslationService);
+  protected translate = inject(TranslateService);
+  protected appConfig = inject(AppConfigService);
+  protected appDataService = inject(AppDataService);
+  protected utilsService = inject(UtilsService);
+  protected authenticationService = inject(AuthenticationService);
+  private cryptoService = inject(CryptoService);
+  private idle = inject(Idle);
+  private keepalive = inject(Keepalive);
+  private httpService = inject(HttpService);
+
   showSidebar: boolean = true;
   isNavCollapsed: boolean = true;
   showLoadingPanel = false;
   supportedBrowser = true;
   loading = false;
 
-  constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, protected browserCheckService: BrowserCheckService, private changeDetectorRef: ChangeDetectorRef, private router: Router, protected translationService: TranslationService, protected translate: TranslateService, protected appConfig: AppConfigService, protected appDataService: AppDataService, protected utilsService: UtilsService, protected authenticationService: AuthenticationService) {
+
+  constructor() {
+    this.initIdleState();
     this.watchLanguage();
+    (window as any).scope = this.appDataService;
   }
 
   watchLanguage() {
     this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
       document.getElementsByTagName("html")[0].setAttribute("lang", this.translate.currentLang);
+      this.translationService.handleLTRandRTLStyling(event, this.renderer);
     });
   }
 
   checkToShowSidebar() {
-    this.router.events.subscribe(event => {
+    this.router.events.subscribe((event:any) => {
       if (event instanceof NavigationEnd) {
         const excludedUrls = [
           "/recipient/reports"
@@ -56,23 +117,61 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.checkToShowSidebar();
   }
 
-  isWhistleblowerPage() {
-    const temp = this.utilsService.isWhistleblowerPage(this.authenticationService, this.appDataService)
-    if ((this.router.url === "/" || this.router.url === "/submission") && this.loading) {
-      return true;
-    } else {
-      this.loading = temp;
-      return this.loading;
-    }
+  isWhistleblowerPage(): boolean {
+    const currentHash = location.hash;
+    return currentHash === "#/" || currentHash === "#/submission";
   }
+  
 
   public ngAfterViewInit(): void {
-    this.appDataService.showLoadingPanel$.subscribe((value) => {
+    this.appDataService.showLoadingPanel$.subscribe((value:any) => {
       this.showLoadingPanel = value;
       this.supportedBrowser = this.browserCheckService.checkBrowserSupport();
       this.changeDetectorRef.detectChanges();
     });
   }
 
+  @HostListener("window:beforeunload")
+  async ngOnDestroy() {
+    this.reset();
+  }
+
+  initIdleState() {
+    this.idle.setIdle(1500);
+    this.idle.setTimeout(300);
+    this.keepalive.interval(30);
+    this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
+
+    this.keepalive.onPing.subscribe(() => {
+      if (this.authenticationService && this.authenticationService.session) {
+        const token = this.authenticationService.session.token;
+        this.cryptoService.proofOfWork(token.id).subscribe((result:any) => {
+	  const param = {'token': token.id + ":" + result};
+          this.httpService.requestRefreshUserSession(param).subscribe(((result:any) => {
+            this.authenticationService.session.token = result.token;
+	  }));
+	});
+      }
+    });
+
+    this.idle.onTimeout.subscribe(() => {
+      if (this.authenticationService && this.authenticationService.session) {
+        if (this.authenticationService.session.role === "whistleblower") {
+          window.location.replace("about:blank");
+        } else {
+          this.authenticationService.deleteSession();
+          this.authenticationService.loginRedirect();
+        }
+      }
+    });
+
+    this.reset();
+  }
+
+  reset() {
+    this.idle.watch();
+    this.authenticationService.reset();
+  }
+
   protected readonly location = location;
 }
diff --git a/client/app/src/pages/auth/auth-routing.module.ts b/client/app/src/pages/auth/auth-routing.module.ts
deleted file mode 100644
index 6ba8a9601a..0000000000
--- a/client/app/src/pages/auth/auth-routing.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {LoginComponent} from "@app/pages/auth/login/login.component";
-import {PasswordResetComponent} from "@app/pages/auth/password-reset/password-reset.component";
-import {PasswordRequestedComponent} from "@app/pages/auth/passwordreqested/password-requested.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: LoginComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Log in"},
-  },
-  {
-    path: "passwordreset",
-    component: PasswordResetComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Password reset"},
-  },
-  {
-    path: "passwordreset/requested",
-    component: PasswordRequestedComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Password reset"},
-  }
-
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class AuthRoutingModule {
-}
diff --git a/client/app/src/pages/auth/auth.module.ts b/client/app/src/pages/auth/auth.module.ts
deleted file mode 100644
index cf308ace71..0000000000
--- a/client/app/src/pages/auth/auth.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {LoginComponent} from "@app/pages/auth/login/login.component";
-import {SimpleLoginComponent} from "@app/pages/auth/login/templates/simple-login/simple-login.component";
-import {DefaultLoginComponent} from "@app/pages/auth/login/templates/default-login/default-login.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {PasswordResetComponent} from "@app/pages/auth/password-reset/password-reset.component";
-import {PasswordRequestedComponent} from "@app/pages/auth/passwordreqested/password-requested.component";
-import {
-  PasswordResetResponseComponent
-} from "@app/pages/auth/password-reset-response/password-reset-response.component";
-import {TranslateModule} from "@ngx-translate/core";
-import {SharedModule} from "@app/shared.module";
-
-@NgModule({
-  declarations: [
-    LoginComponent,
-    SimpleLoginComponent,
-    DefaultLoginComponent,
-    PasswordResetComponent,
-    PasswordRequestedComponent,
-    PasswordResetResponseComponent,
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgSelectModule,
-    SharedModule
-  ]
-})
-export class AuthModule {
-}
diff --git a/client/app/src/pages/auth/auth.routes.ts b/client/app/src/pages/auth/auth.routes.ts
new file mode 100644
index 0000000000..8d5e6343c2
--- /dev/null
+++ b/client/app/src/pages/auth/auth.routes.ts
@@ -0,0 +1,22 @@
+import {Routes} from "@angular/router";
+
+export const authRoutes: Routes = [
+  {
+    path: "",
+    loadComponent: () => import('@app/pages/auth/login/login.component').then(m => m.LoginComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Log in"},
+  },
+  {
+    path: "passwordreset",
+    loadComponent: () => import('@app/pages/auth/password-reset/password-reset.component').then(m => m.PasswordResetComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Password reset"},
+  },
+  {
+    path: "passwordreset/requested",
+    loadComponent: () => import('@app/pages/auth/passwordreqested/password-requested.component').then(m => m.PasswordRequestedComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Password reset"},
+  }
+];
\ No newline at end of file
diff --git a/client/app/src/pages/auth/login/login.component.html b/client/app/src/pages/auth/login/login.component.html
index 4fa7795cc2..a335686bfe 100644
--- a/client/app/src/pages/auth/login/login.component.html
+++ b/client/app/src/pages/auth/login/login.component.html
@@ -1,16 +1,24 @@
 <div class="row">
-    <div class="col-3 col-sm-auto login-form" id="login-form">
-        <form #loginValidator="ngForm" autocomplete="off">
-            <input class="d-none" type="password" name="disable-autocomplete" />
-            <app-simple-login *ngIf="location.hash !== '#/admin' && appDataService.public.node.simplified_login" [loginValidator]="loginValidator" [loginData]='loginData'></app-simple-login>
-            <app-default-login *ngIf="location.hash === '#/admin' || !appDataService.public.node.simplified_login" [loginValidator]="loginValidator" [loginData]='loginData'></app-default-login>
-            <br />
-            <div id="LoginError" class="alert alert-danger" *ngIf="appDataService.errorCodes.code === 9">
-                <span>{{'Authentication failed'|translate}}</span>
-            </div>
-            <div id="LoginError" class="alert alert-danger" *ngIf="appDataService.errorCodes.code === 13">
-                <span>{{'The code is either invalid or expired.'|translate}}</span>
-            </div>
-        </form>
-    </div>
+  <div class="col-3 col-sm-auto login-form" id="login-form">
+    <form #loginValidator="ngForm" autocomplete="off">
+      <input class="d-none" type="password" name="disable-autocomplete" />
+      @if (location.hash !== '#/admin' && appDataService.public.node.simplified_login) {
+        <app-simple-login [loginValidator]="loginValidator" [loginData]='loginData'></app-simple-login>
+      }
+      @if (location.hash === '#/admin' || !appDataService.public.node.simplified_login) {
+        <app-default-login [loginValidator]="loginValidator" [loginData]='loginData'></app-default-login>
+      }
+      <br />
+      @if (appDataService.errorCodes.code === 9) {
+        <div id="LoginError" class="alert alert-danger">
+          <span>{{'Authentication failed'|translate}}</span>
+        </div>
+      }
+      @if (appDataService.errorCodes.code === 13) {
+        <div id="LoginError" class="alert alert-danger">
+          <span>{{'The code is either invalid or expired.'|translate}}</span>
+        </div>
+      }
+    </form>
+  </div>
 </div>
diff --git a/client/app/src/pages/auth/login/login.component.ts b/client/app/src/pages/auth/login/login.component.ts
index 94dff88e01..5ca805a4c6 100644
--- a/client/app/src/pages/auth/login/login.component.ts
+++ b/client/app/src/pages/auth/login/login.component.ts
@@ -1,22 +1,32 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {LoginDataRef} from "@app/pages/auth/login/model/login-model";
 import {ActivatedRoute, Router} from "@angular/router";
 import {AppDataService} from "@app/app-data.service";
+import { FormsModule } from "@angular/forms";
+
+import { SimpleLoginComponent } from "./templates/simple-login/simple-login.component";
+import { DefaultLoginComponent } from "./templates/default-login/default-login.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "app-login",
-  templateUrl: "./login.component.html"
+    selector: "app-login",
+    templateUrl: "./login.component.html",
+    standalone: true,
+    imports: [FormsModule, SimpleLoginComponent, DefaultLoginComponent, TranslateModule, TranslatorPipe]
 })
 export class LoginComponent implements OnInit {
+  private authentication = inject(AuthenticationService);
+  router = inject(Router);
+  private route = inject(ActivatedRoute);
+  protected appDataService = inject(AppDataService);
+
 
   protected readonly location = location;
   loginData = new LoginDataRef();
 
-  constructor(private authentication: AuthenticationService, public router: Router, private route: ActivatedRoute, protected appDataService: AppDataService) {
-  }
-
   ngOnInit() {
     this.route.queryParams.subscribe(params => {
       if ("token" in params) {
diff --git a/client/app/src/pages/auth/login/templates/default-login/default-login.component.html b/client/app/src/pages/auth/login/templates/default-login/default-login.component.html
index b1ffcc1ef1..1d0d84298f 100644
--- a/client/app/src/pages/auth/login/templates/default-login/default-login.component.html
+++ b/client/app/src/pages/auth/login/templates/default-login/default-login.component.html
@@ -1,42 +1,46 @@
-<div *ngIf="!authentication.requireAuthCode">
+@if (!authentication.requireAuthCode) {
+  <div>
     <div class="form-group">
-        <div class="input-group mb-3">
-            <span class="input-group-text">
-                <i class="fa-solid fa-user"></i>
-            </span>
-            <input class="form-control" name="username" [attr.aria-label]="'Username' | translate" placeholder="{{'Username' | translate}}" [(ngModel)]="authentication.loginData.loginUsername" type="text" autofocus required />
-        </div>
+      <div class="input-group mb-3">
+        <span class="input-group-text">
+          <i class="fa-solid fa-user"></i>
+        </span>
+        <input class="form-control" name="username" [attr.aria-label]="'Username' | translate" placeholder="{{'Username' | translate}}" [(ngModel)]="authentication.loginData.loginUsername" type="text" autofocus required />
+      </div>
     </div>
     <div class="form-group mb-3">
-        <div class="input-group">
-            <span class="input-group-text">
-                <i class="fa-solid fa-lock"></i>
-            </span>
-            <input class="form-control" name="password" [attr.aria-label]="'Password' | translate" placeholder="{{'Password' | translate}}" [(ngModel)]="authentication.loginData.loginPassword" type="password" required />
-        </div>
+      <div class="input-group">
+        <span class="input-group-text">
+          <i class="fa-solid fa-lock"></i>
+        </span>
+        <input class="form-control" name="password" [attr.aria-label]="'Password' | translate" placeholder="{{'Password' | translate}}" [(ngModel)]="authentication.loginData.loginPassword" type="password" required />
+      </div>
     </div>
     <button id="login-button" class="btn btn-primary" [disabled]="authentication.loginInProgress || loginValidator.invalid" (click)="authentication.login(0, authentication.loginData.loginUsername, authentication.loginData.loginPassword)" type="submit">
-        <i class="fa-solid fa-sign-in-alt"></i>
-        <span>{{'Log in'| translate}}</span>
+      <i class="fa-solid fa-sign-in-alt"></i>
+      <span>{{'Log in'| translate}}</span>
     </button>
     <span id="forgot-button">
-        <a class="btn btn-outline-secondary" id="passwordreset" href="#/login/passwordreset">{{'Forgot password?'|translate}}</a>
+      <a class="btn btn-outline-secondary" id="passwordreset" href="#/login/passwordreset">{{'Forgot password?'|translate}}</a>
     </span>
-</div>
-<div *ngIf="authentication.requireAuthCode">
+  </div>
+}
+@if (authentication.requireAuthCode) {
+  <div>
     <div class="form-group">
-        <label for="input-2fa">{{'Enter the two factor authentication code'|translate}}</label>
+      <label for="input-2fa">{{'Enter the two factor authentication code'|translate}}</label>
     </div>
     <div class="input-group">
-        <input name="input-2fa" class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="authentication.loginData.loginAuthCode" type="text" size="6" maxlength="6" required />
-        <div class="input-group-btn">
-            <button id="login-button" class="btn btn-primary rounded-start-0 m-0" [disabled]="authentication.loginInProgress  || loginValidator.invalid || authentication.loginData.loginAuthCode.length !=6" (click)="authentication.login(0, authentication.loginData.loginUsername, authentication.loginData.loginPassword, authentication.loginData.loginAuthCode)" type="submit">
-                <i class="fa-solid fa-sign-in-alt"></i>
-                <span>{{'Log in'|translate}}</span>
-            </button>
-            <a class="btn" (click)="utils.openSupportModal(appDataService)" title="{{'Request support' | translate}}">
-                <i class="fa-solid fa-life-ring"></i>
-            </a>
-        </div>
+      <input name="input-2fa" class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="authentication.loginData.loginAuthCode" type="text" size="6" maxlength="6" required />
+      <div class="input-group-btn">
+        <button id="login-button" class="btn btn-primary rounded-start-0 m-0" [disabled]="authentication.loginInProgress  || loginValidator.invalid || authentication.loginData.loginAuthCode.length !=6" (click)="authentication.login(0, authentication.loginData.loginUsername, authentication.loginData.loginPassword, authentication.loginData.loginAuthCode)" type="submit">
+          <i class="fa-solid fa-sign-in-alt"></i>
+          <span>{{'Log in'|translate}}</span>
+        </button>
+        <a class="btn" (click)="utils.openSupportModal(appDataService)" data-toggle="tooltip" title="{{'Request support' | translate}}">
+          <i class="fa-solid fa-life-ring"></i>
+        </a>
+      </div>
     </div>
-</div>
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/auth/login/templates/default-login/default-login.component.ts b/client/app/src/pages/auth/login/templates/default-login/default-login.component.ts
index 61c1ab0e73..6b8526e4a9 100644
--- a/client/app/src/pages/auth/login/templates/default-login/default-login.component.ts
+++ b/client/app/src/pages/auth/login/templates/default-login/default-login.component.ts
@@ -1,20 +1,30 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {LoginDataRef} from "@app/pages/auth/login/model/login-model";
 import {UtilsService} from "@app/shared/services/utils.service";
-import {ControlContainer, NgForm} from "@angular/forms";
+import { ControlContainer, NgForm, FormsModule } from "@angular/forms";
 import {AppDataService} from "@app/app-data.service";
 
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "app-default-login",
-  templateUrl: "./default-login.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+    selector: "app-default-login",
+    templateUrl: "./default-login.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [
+    FormsModule,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class DefaultLoginComponent {
+  protected utils = inject(UtilsService);
+  protected authentication = inject(AuthenticationService);
+  protected appDataService = inject(AppDataService);
+
 
   @Input() loginData: LoginDataRef;
   @Input() loginValidator: NgForm;
-
-  constructor(protected utils: UtilsService, protected authentication: AuthenticationService, protected appDataService: AppDataService) {
-  }
 }
diff --git a/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.html b/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.html
index a770b780f7..d5aa56c985 100644
--- a/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.html
+++ b/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.html
@@ -1,49 +1,61 @@
-<div *ngIf="!authentication.requireAuthCode">
-    <div *ngIf="appDataService.public.receivers.length === 1">
+@if (!authentication.requireAuthCode) {
+  <div>
+    @if (appDataService.public.receivers.length === 1) {
+      <div>
         <div class="form-group">
-            <input class="form-control" name="password" [(ngModel)]="authentication.loginData.loginPassword" placeholder="{{'Password' | translate}}" type="password" autofocus required />
+          <input class="form-control" name="password" [(ngModel)]="authentication.loginData.loginPassword" placeholder="{{'Password' | translate}}" type="password" autofocus required />
         </div>
         <div class="form-group">
-            <button id="login-button" class="btn btn-primary" [disabled]="authentication.loginInProgress || authentication.loginData.loginPassword.length==0" (click)="authentication.login(0, appDataService.public.receivers[0].id, authentication.loginData.loginPassword)" type="submit">
-                <i class="fa-solid fa-sign-in-alt"></i>
-                <span>{{'Log in'|translate}}</span>
-            </button>
-            <span id="forgot-button">
-                <a class="btn btn-outline-secondary" id="passwordreset" href="#/login/passwordreset">{{'Forgot password?'|translate}}</a>
-            </span>
+          <button id="login-button" class="btn btn-primary" [disabled]="authentication.loginInProgress || authentication.loginData.loginPassword.length==0" (click)="authentication.login(0, appDataService.public.receivers[0].id, authentication.loginData.loginPassword)" type="submit">
+            <i class="fa-solid fa-sign-in-alt"></i>
+            <span>{{'Log in'|translate}}</span>
+          </button>
+          <span id="forgot-button">
+            <a class="btn btn-outline-secondary" id="passwordreset" href="#/login/passwordreset">{{'Forgot password?'|translate}}</a>
+          </span>
         </div>
-    </div>
-    <div *ngIf="appDataService.public.receivers.length !== 1">
+      </div>
+    }
+    @if (appDataService.public.receivers.length !== 1) {
+      <div>
         <div class="form-group">
-            <label>{{'Please select your account:'|translate}}</label>
-            <ng-select name="authentication.loginData.loginUsername" [clearable]="false" [ngModelOptions]="{standalone: true}" [(ngModel)]="authentication.loginData.loginUsername">
-                <ng-option *ngFor="let item of appDataService.public.receivers" [value]="item.id">{{item.name}}</ng-option>
-            </ng-select>
+          <label>{{'Please select your account:'|translate}}</label>
+          <ng-select name="authentication.loginData.loginUsername" [clearable]="false" [ngModelOptions]="{standalone: true}" [(ngModel)]="authentication.loginData.loginUsername">
+            @for (item of appDataService.public.receivers; track item) {
+              <ng-option [value]="item.id">{{item.name}}</ng-option>
+            }
+          </ng-select>
         </div>
-        <div *ngIf="authentication.loginData.loginUsername">
+        @if (authentication.loginData.loginUsername) {
+          <div>
             <div class="form-group">
-                <label>{{'Now type your password, then click \'Log in\':'|translate}}</label>
-                <input class="form-control" name="password" [(ngModel)]="authentication.loginData.loginPassword" type="password" required />
+              <label>{{'Now type your password, then click \'Log in\':'|translate}}</label>
+              <input class="form-control" name="password" [(ngModel)]="authentication.loginData.loginPassword" type="password" required />
             </div>
             <div class="form-group">
-                <button id="login-button" class="btn btn-primary" [disabled]="authentication.loginInProgress || authentication.loginData.loginPassword.length==0" (click)="authentication.login(0, authentication.loginData.loginUsername, authentication.loginData.loginPassword)" type="submit">
-                    <i class="fa-solid fa-sign-in-alt"></i>
-                    <span>{{'Log in'|translate}}</span>
-                </button>
-                <span id="forgot-button">
-                    <a class="btn btn-outline-secondary" id="passwordreset" href="/#/login/passwordreset">{{'Forgot password?'|translate}}</a>
-                </span>
+              <button id="login-button" class="btn btn-primary" [disabled]="authentication.loginInProgress || authentication.loginData.loginPassword.length==0" (click)="authentication.login(0, authentication.loginData.loginUsername, authentication.loginData.loginPassword)" type="submit">
+                <i class="fa-solid fa-sign-in-alt"></i>
+                <span>{{'Log in'|translate}}</span>
+              </button>
+              <span id="forgot-button">
+                <a class="btn btn-outline-secondary" id="passwordreset" href="/#/login/passwordreset">{{'Forgot password?'|translate}}</a>
+              </span>
             </div>
-        </div>
-    </div>
-</div>
-<div *ngIf="authentication.requireAuthCode">
+          </div>
+        }
+      </div>
+    }
+  </div>
+}
+@if (authentication.requireAuthCode) {
+  <div>
     <div class="form-group">
-        <label>{{'Enter the two factor authentication code'|translate}}</label>
-        <input class="form-control" name="authentication.loginData.loginAuthCode" [(ngModel)]="authentication.loginData.loginAuthCode" type="text" size="6" maxlength="6" required />
+      <label>{{'Enter the two factor authentication code'|translate}}</label>
+      <input class="form-control" name="authentication.loginData.loginAuthCode" [(ngModel)]="authentication.loginData.loginAuthCode" type="text" size="6" maxlength="6" required />
     </div>
     <button id="login-button" class="btn btn-primary" [disabled]="authentication.loginInProgress || authentication.loginData.loginUsername.length === 0" (click)="authentication.login(0, authentication.loginData.loginUsername, authentication.loginData.loginPassword, authentication.loginData.loginAuthCode)" type="submit">
-        <i class="fa-solid fa-sign-in-alt"></i>
-        <span>{{'Log in'|translate}}</span>
+      <i class="fa-solid fa-sign-in-alt"></i>
+      <span>{{'Log in'|translate}}</span>
     </button>
-</div>
+  </div>
+}
diff --git a/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.ts b/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.ts
index 5f471b023d..f5ccf47f26 100644
--- a/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.ts
+++ b/client/app/src/pages/auth/login/templates/simple-login/simple-login.component.ts
@@ -1,21 +1,33 @@
-import {Component, Input, OnInit} from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {LoginDataRef} from "@app/pages/auth/login/model/login-model";
-import {NgForm} from "@angular/forms";
+import { NgForm, FormsModule } from "@angular/forms";
 import {AppDataService} from "@app/app-data.service";
 
+import { NgSelectComponent, NgOptionComponent } from "@ng-select/ng-select";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "app-simple-login",
-  templateUrl: "./simple-login.component.html",
+    selector: "app-simple-login",
+    templateUrl: "./simple-login.component.html",
+    standalone: true,
+    imports: [
+    FormsModule,
+    NgSelectComponent,
+    NgOptionComponent,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class SimpleLoginComponent implements OnInit {
+  protected authentication = inject(AuthenticationService);
+  protected appDataService = inject(AppDataService);
+
 
   @Input() loginData: LoginDataRef;
   @Input() loginValidator: NgForm;
 
-  constructor(protected authentication: AuthenticationService, protected appDataService: AppDataService) {
-  }
-
   public ngOnInit(): void {
 
   }
diff --git a/client/app/src/pages/auth/password-reset-response/password-reset-response.component.html b/client/app/src/pages/auth/password-reset-response/password-reset-response.component.html
index 547931fc95..75f91ddc3d 100644
--- a/client/app/src/pages/auth/password-reset-response/password-reset-response.component.html
+++ b/client/app/src/pages/auth/password-reset-response/password-reset-response.component.html
@@ -1,40 +1,44 @@
-<div *ngIf="state === 'require_recovery_key'">
+@if (state === 'require_recovery_key') {
+  <div>
     <div class="row">
-        <div class="col-md-12">
-            <label>{{'Enter your account recovery key to complete the password reset procedure'|translate}}</label>
-        </div>
+      <div class="col-md-12">
+        <label>{{'Enter your account recovery key to complete the password reset procedure'|translate}}</label>
+      </div>
     </div>
     <div class="row">
-        <div class="col-md-auto">
-            <form name="form" autocomplete="off" novalidate>
-                <div class="input-group">
-                    <input class="form-control recovery-key-input" name="secret" type="text" placeholder="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX" maxlength="64" size="64" [(ngModel)]="request.recovery_key" autofocus>
-                    <div class="input-group-btn">
-                        <button class="btn btn-primary" id="submit" (click)="submit()" type="submit">{{'Submit'|translate}}</button>
-                        <a class="btn" href="" (click)="utilsService.openSupportModal(appDataService)" title="{{'Request support' | translate}}">
-                            <i class="fa-solid fa-life-ring"></i>
-                        </a>
-                    </div>
-                </div>
-            </form>
-        </div>
+      <div class="col-md-auto">
+        <form name="form" autocomplete="off" novalidate>
+          <div class="input-group">
+            <input class="form-control recovery-key-input" name="secret" type="text" placeholder="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX" maxlength="64" size="64" [(ngModel)]="request.recovery_key" autofocus>
+            <div class="input-group-btn">
+              <button class="btn btn-primary" id="submit" (click)="submit()" type="submit">{{'Submit'|translate}}</button>
+              <a class="btn" href="" (click)="utilsService.openSupportModal(appDataService)" data-toggle="tooltip" title="{{'Request support' | translate}}">
+                <i class="fa-solid fa-life-ring"></i>
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>
     </div>
-</div>
-<div *ngIf="state === 'require_two_factor_authentication'">
+  </div>
+}
+@if (state === 'require_two_factor_authentication') {
+  <div>
     <div class="row">
-        <div class="col-md-auto">
-            <div class="form-group">
-                <label>{{'Enter the two factor authentication code'|translate}}</label>
-                <input class="form-control" [(ngModel)]="request.auth_code" type="text" size="6" maxlength="6" autofocus required />
-            </div>
-            <div class="input-group">
-                <button class="btn btn-primary" [disabled]="request.auth_code.length !== 6" (click)="submit()" type="submit">
-                    <span>{{'Proceed'|translate}}</span>
-                </button>
-                <a class="btn" href="" (click)="utilsService.openSupportModal(appDataService)" title="{{'Request support' | translate}}">
-                    <i class="fa-solid fa-life-ring"></i>
-                </a>
-            </div>
+      <div class="col-md-auto">
+        <div class="form-group">
+          <label>{{'Enter the two factor authentication code'|translate}}</label>
+          <input class="form-control" [(ngModel)]="request.auth_code" type="text" size="6" maxlength="6" autofocus required />
+        </div>
+        <div class="input-group">
+          <button class="btn btn-primary" [disabled]="request.auth_code.length !== 6" (click)="submit()" type="submit">
+            <span>{{'Proceed'|translate}}</span>
+          </button>
+          <a class="btn" href="" (click)="utilsService.openSupportModal(appDataService)" data-toggle="tooltip" title="{{'Request support' | translate}}">
+            <i class="fa-solid fa-life-ring"></i>
+          </a>
         </div>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/auth/password-reset-response/password-reset-response.component.ts b/client/app/src/pages/auth/password-reset-response/password-reset-response.component.ts
index 9b793163fd..b66b8860df 100644
--- a/client/app/src/pages/auth/password-reset-response/password-reset-response.component.ts
+++ b/client/app/src/pages/auth/password-reset-response/password-reset-response.component.ts
@@ -1,21 +1,30 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {PasswordRecoveryModel} from "@app/models/authentication/password-recovery-model";
 import {ActivatedRoute, Router} from "@angular/router";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AppDataService} from "@app/app-data.service";
 
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-password-reset-response",
-  templateUrl: "./password-reset-response.component.html"
+    selector: "src-password-reset-response",
+    templateUrl: "./password-reset-response.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class PasswordResetResponseComponent implements OnInit {
+  protected appDataService = inject(AppDataService);
+  private route = inject(ActivatedRoute);
+  private httpService = inject(HttpService);
+  private router = inject(Router);
+  protected utilsService = inject(UtilsService);
+
   state = "start";
   request = new PasswordRecoveryModel();
 
-  constructor(protected appDataService: AppDataService, private route: ActivatedRoute, private httpService: HttpService, private router: Router, protected utilsService: UtilsService) {
-  }
-
   submit() {
     const requestObservable = this.httpService.requestChangePassword(JSON.stringify({
       "reset_token": this.request.reset_token,
diff --git a/client/app/src/pages/auth/password-reset/password-reset.component.html b/client/app/src/pages/auth/password-reset/password-reset.component.html
index d977c7c239..19b85aa197 100644
--- a/client/app/src/pages/auth/password-reset/password-reset.component.html
+++ b/client/app/src/pages/auth/password-reset/password-reset.component.html
@@ -1,22 +1,26 @@
 <div class="row">
-    <div class="col-md-12">
-        <label *ngIf="!appDataService.public.node.simplified_login">{{'Enter your account\'s username or your email address to request a password reset.'|translate}}</label>
-        <label *ngIf="appDataService.public.node.simplified_login">{{'Enter your email address to request a password reset.'|translate}}</label>
-    </div>
+  <div class="col-md-12">
+    @if (!appDataService.public.node.simplified_login) {
+      <label>{{'Enter your account\'s username or your email address to request a password reset.'|translate}}</label>
+    }
+    @if (appDataService.public.node.simplified_login) {
+      <label>{{'Enter your email address to request a password reset.'|translate}}</label>
+    }
+  </div>
 </div>
 <br>
-<div class="row">
+  <div class="row">
     <div class="col-md-3">
-        <form name="form" autocomplete="off" novalidate>
-            <div class="input-group">
-                <input class="form-control" name="username" [(ngModel)]="username" type="text" autofocus required />
-                <span class="input-group-append">
-                    <button class="btn btn-primary rounded-start-0 m-0" id="submit" (click)="submitRequest()" [disabled]="!username" type="submit">Submit</button>
-                    <a class="btn" (click)="utilsService.openSupportModal(appDataService)" title="{{'Request support' | translate}}">
-                        <i class="fa-solid fa-life-ring"></i>
-                    </a>
-                </span>
-            </div>
-        </form>
+      <form name="form" autocomplete="off" novalidate>
+        <div class="input-group">
+          <input class="form-control" name="username" [(ngModel)]="username" type="text" autofocus required />
+          <span class="input-group-append">
+            <button class="btn btn-primary rounded-start-0 m-0" id="submit" (click)="submitRequest()" [disabled]="!username" type="submit">Submit</button>
+            <a class="btn" (click)="utilsService.openSupportModal(appDataService)" data-toggle="tooltip" title="{{'Request support' | translate}}">
+              <i class="fa-solid fa-life-ring"></i>
+            </a>
+          </span>
+        </div>
+      </form>
     </div>
-</div>
\ No newline at end of file
+  </div>
\ No newline at end of file
diff --git a/client/app/src/pages/auth/password-reset/password-reset.component.ts b/client/app/src/pages/auth/password-reset/password-reset.component.ts
index 8ea5933b68..076c485c6a 100644
--- a/client/app/src/pages/auth/password-reset/password-reset.component.ts
+++ b/client/app/src/pages/auth/password-reset/password-reset.component.ts
@@ -1,17 +1,24 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-password-reset",
-  templateUrl: "./password-reset.component.html"
+    selector: "src-password-reset",
+    templateUrl: "./password-reset.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class PasswordResetComponent {
-  username: string | undefined = undefined;
+  private authenticationService = inject(AuthenticationService);
+  protected utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
 
-  constructor(private authenticationService: AuthenticationService, protected utilsService: UtilsService, protected appDataService: AppDataService) {
-  }
+  username: string | undefined = undefined;
 
   submitRequest() {
     if (this.username !== undefined) {
diff --git a/client/app/src/pages/auth/passwordreqested/password-requested.component.ts b/client/app/src/pages/auth/passwordreqested/password-requested.component.ts
index 96de1275b8..34c971d7c8 100644
--- a/client/app/src/pages/auth/passwordreqested/password-requested.component.ts
+++ b/client/app/src/pages/auth/passwordreqested/password-requested.component.ts
@@ -1,8 +1,12 @@
 import {Component} from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-passwordreqested",
-  templateUrl: "./password-requested.component.html"
+    selector: "src-passwordreqested",
+    templateUrl: "./password-requested.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class PasswordRequestedComponent {
 
diff --git a/client/app/src/pages/custodian/custodian-routing.module.ts b/client/app/src/pages/custodian/custodian-routing.module.ts
deleted file mode 100644
index 15aebefc98..0000000000
--- a/client/app/src/pages/custodian/custodian-routing.module.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {PreferencesComponent} from "@app/shared/partials/preferences/preferences.component";
-import {HomeComponent} from "@app/pages/custodian/home/home.component";
-import {SettingsComponent} from "@app/pages/custodian/settings/settings.component";
-import {
-  IdentityAccessRequestsComponent
-} from "@app/pages/custodian/identity-access-requests/identity-access-requests.component";
-import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
-import {NodeResolver} from "@app/shared/resolvers/node.resolver";
-import {RTipsResolver} from "@app/shared/resolvers/r-tips-resolver.service";
-import {IarResolver} from "@app/shared/resolvers/iar-resolver.service";
-
-const routes: Routes = [
-  {
-    path: "preferences",
-    component: PreferencesComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Preferences"},
-  },
-  {
-    path: "home",
-    component: HomeComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Home"},
-  },
-  {
-    path: "",
-    component: HomeComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Home"},
-  },
-  {
-    path: "settings",
-    component: SettingsComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Sites"},
-  },
-  {
-    path: "requests",
-    component: IdentityAccessRequestsComponent,
-    pathMatch: "full",
-    data: {pageTitle: "Requests"},
-    resolve: {
-      PreferenceResolver, NodeResolver, RtipsResolver: RTipsResolver, IarsResolver: IarResolver
-    },
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class CustodianRoutingModule {
-}
diff --git a/client/app/src/pages/custodian/custodian.module.ts b/client/app/src/pages/custodian/custodian.module.ts
deleted file mode 100644
index 52d8770784..0000000000
--- a/client/app/src/pages/custodian/custodian.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {RouterModule} from "@angular/router";
-import {TranslateModule} from "@ngx-translate/core";
-import {SharedModule} from "@app/shared.module";
-import {FormsModule} from "@angular/forms";
-import {NgbDatepickerModule, NgbDropdownModule, NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
-import {NgMultiSelectDropDownModule} from "ng-multiselect-dropdown";
-import {HomeComponent} from "@app/pages/custodian/home/home.component";
-import {SettingsComponent} from "@app/pages/custodian/settings/settings.component";
-import {SidebarComponent} from "@app/pages/custodian/sidebar/sidebar.component";
-import {
-  IdentityAccessRequestsComponent
-} from "@app/pages/custodian/identity-access-requests/identity-access-requests.component";
-import {SettingsModule} from "@app/pages/admin/settings/settings.module";
-
-
-@NgModule({
-  declarations: [
-    HomeComponent,
-    SettingsComponent,
-    SidebarComponent,
-    IdentityAccessRequestsComponent
-  ],
-  imports: [
-    CommonModule, RouterModule, TranslateModule, SharedModule, FormsModule,
-    NgbModule, NgbNavModule,
-    NgbDatepickerModule, NgbDropdownModule, NgMultiSelectDropDownModule.forRoot(), SettingsModule
-  ],
-  exports: [SidebarComponent]
-})
-export class CustodianModule {
-}
diff --git a/client/app/src/pages/custodian/custodian.routes.ts b/client/app/src/pages/custodian/custodian.routes.ts
new file mode 100644
index 0000000000..ae1d491fce
--- /dev/null
+++ b/client/app/src/pages/custodian/custodian.routes.ts
@@ -0,0 +1,41 @@
+import {Routes} from "@angular/router";
+import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
+import {NodeResolver} from "@app/shared/resolvers/node.resolver";
+import {RTipsResolver} from "@app/shared/resolvers/r-tips-resolver.service";
+import {IarResolver} from "@app/shared/resolvers/iar-resolver.service";
+
+export const custodianRoutes: Routes = [
+  {
+    path: "preferences",
+    loadComponent: () => import('@app/shared/partials/preferences/preferences.component').then(m => m.PreferencesComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Preferences"},
+  },
+  {
+    path: "home",
+    loadComponent: () => import('@app/pages/custodian/home/home.component').then(m => m.HomeComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Home"},
+  },
+  {
+    path: "",
+    loadComponent: () => import('@app/pages/custodian/home/home.component').then(m => m.HomeComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Home"},
+  },
+  {
+    path: "settings",
+    loadComponent: () => import('@app/pages/custodian/settings/settings.component').then(m => m.CustodianSettingsComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Settings"},
+  },
+  {
+    path: "requests",
+    loadComponent: () => import('@app/pages/custodian/identity-access-requests/identity-access-requests.component').then(m => m.IdentityAccessRequestsComponent),
+    pathMatch: "full",
+    data: {pageTitle: "Requests"},
+    resolve: {
+      PreferenceResolver, NodeResolver, RtipsResolver: RTipsResolver, IarsResolver: IarResolver
+    },
+  }
+];
\ No newline at end of file
diff --git a/client/app/src/pages/custodian/home/home.component.ts b/client/app/src/pages/custodian/home/home.component.ts
index cf02e8a2d7..058d9da1c4 100644
--- a/client/app/src/pages/custodian/home/home.component.ts
+++ b/client/app/src/pages/custodian/home/home.component.ts
@@ -1,17 +1,22 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { UserHomeComponent } from "../../../shared/partials/user-home/user-home.component";
 
 @Component({
-  selector: "src-custodian-home",
-  templateUrl: "./home.component.html"
+    selector: "src-custodian-home",
+    templateUrl: "./home.component.html",
+    standalone: true,
+    imports: [UserHomeComponent]
 })
 export class HomeComponent implements OnInit {
+  private appDataService = inject(AppDataService);
+  private utilsService = inject(UtilsService);
+  private preference = inject(PreferenceResolver);
+
   preferenceData:  preferenceResolverModel;
-  constructor(private appDataService: AppDataService,private utilsService: UtilsService, private preference: PreferenceResolver) {
-  }
 
   ngOnInit(): void {
     if (this.preference.dataModel) {
diff --git a/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.html b/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.html
index 5d668799eb..ee33cc8ed7 100644
--- a/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.html
+++ b/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.html
@@ -1,59 +1,63 @@
 <div class="reveal">
-    <div class="row">
-        <div class="col-md-12 clearfix">
-        <span class="float-start">
-            <a id="link-tiplist" href="#/custodian/home" title="{{'Home' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-arrow-left"></i>
-            </a>
-            <span id="link-reload" (click)="reload()" title="{{'Refresh' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-sync"></i>
-            </span>
+  <div class="row">
+    <div class="col-md-12 clearfix">
+      <span class="float-start">
+        <a id="link-tiplist" href="#/custodian/home" data-toggle="tooltip" title="{{'Home' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid fa-arrow-left"></i>
+        </a>
+        <span id="link-reload" (click)="reload()" data-toggle="tooltip" title="{{'Refresh' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid fa-sync"></i>
         </span>
-        </div>
+      </span>
     </div>
-    <div class="row mt-2">
-        <div class="col-md-12">
-            <table class="table table-condensed table-striped">
-                <thead>
-                <tr>
-                    <th>{{'Request date'|translate}}</th>
-                    <th>{{'ID'|translate}}</th>
-                    <th>{{'Report date'|translate}}</th>
-                    <th>{{'User'|translate}}</th>
-                    <th>{{'Request motivation'|translate}}</th>
-                    <th>{{'Reply motivation'|translate}}</th>
-                    <th>{{'Authorization'|translate}}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr id="iar-{{index}}" *ngFor="let iar of iarResolver.dataModel;let index=index">
-                    <td>{{iar.request_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                    <td>{{iar.submission_progressive}}</td>
-                    <td>{{iar.submission_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                    <td>{{iar.request_user_name}}</td>
-                    <td>{{iar.request_motivation}}</td>
-                    <td>{{iar.reply_motivation}}</td>
-                    <td>
-                        <div [ngSwitch]="iar.reply">
-                            <ng-container *ngSwitchCase="'authorized'">
-                                {{ 'Authorized' | translate }}
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'denied'">
-                                {{ 'Denied' | translate }}
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'pending'">
-                                <button class="btn btn-sm btn-primary" id="authorize" (click)="authorizeIdentityAccessRequest(iar.id)">
-                                    {{ 'Authorize' | translate }}
-                                </button>
-                                <button class="btn btn-sm btn-danger" id="deny" (click)="fileDeniedIdentityAccessReply(iar.id)">
-                                    {{ 'Deny' | translate }}
-                                </button>
-                            </ng-container>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
+  </div>
+  <div class="row mt-2">
+    <div class="col-md-12">
+      <table class="table table-condensed table-striped">
+        <thead>
+          <tr>
+            <th>{{'Request date'|translate}}</th>
+            <th>{{'ID'|translate}}</th>
+            <th>{{'Report date'|translate}}</th>
+            <th>{{'User'|translate}}</th>
+            <th>{{'Request motivation'|translate}}</th>
+            <th>{{'Reply motivation'|translate}}</th>
+            <th>{{'Authorization'|translate}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (iar of iarResolver.dataModel; track iar; let index = $index) {
+            <tr id="iar-{{index}}">
+              <td>{{iar.request_date | date:'dd-MM-yyyy HH:mm'}}</td>
+              <td>{{iar.submission_progressive}}</td>
+              <td>{{iar.submission_date | date:'dd-MM-yyyy HH:mm'}}</td>
+              <td>{{iar.request_user_name}}</td>
+              <td>{{iar.request_motivation}}</td>
+              <td>{{iar.reply_motivation}}</td>
+              <td>
+                <div>
+                  @switch (iar.reply) {
+                    @case ('authorized') {
+                      {{ 'Authorized' | translate }}
+                    }
+                    @case ('denied') {
+                      {{ 'Denied' | translate }}
+                    }
+                    @case ('pending') {
+                      <button class="btn btn-sm btn-primary" id="authorize" (click)="authorizeIdentityAccessRequest(iar.id)">
+                        {{ 'Authorize' | translate }}
+                      </button>
+                      <button class="btn btn-sm btn-danger" id="deny" (click)="fileDeniedIdentityAccessReply(iar.id)">
+                        {{ 'Deny' | translate }}
+                      </button>
+                    }
+                  }
+                </div>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
     </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.ts b/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.ts
index 159093853c..870a52d16a 100644
--- a/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.ts
+++ b/client/app/src/pages/custodian/identity-access-requests/identity-access-requests.component.ts
@@ -1,4 +1,4 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {IarResolver} from "@app/shared/resolvers/iar-resolver.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {HttpService} from "@app/shared/services/http.service";
@@ -6,15 +6,22 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {
   TipOperationFileIdentityAccessReplyComponent
 } from "@app/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component";
+import { DatePipe } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-identity-access-requests",
-  templateUrl: "./identity-access-requests.component.html"
+    selector: "src-identity-access-requests",
+    templateUrl: "./identity-access-requests.component.html",
+    standalone: true,
+    imports: [DatePipe, TranslateModule, TranslatorPipe]
 })
 export class IdentityAccessRequestsComponent {
+  private modalService = inject(NgbModal);
+  private httpService = inject(HttpService);
+  protected iarResolver = inject(IarResolver);
+  protected utilsService = inject(UtilsService);
 
-  constructor(private modalService: NgbModal, private httpService: HttpService, protected iarResolver: IarResolver, protected utilsService: UtilsService) {
-  }
 
   authorizeIdentityAccessRequest(iar_id: string) {
     this.httpService.authorizeIdentity("api/custodian/iars/" + iar_id, {
diff --git a/client/app/src/pages/custodian/settings/settings.component.html b/client/app/src/pages/custodian/settings/settings.component.html
index b327d1dc18..c4cb25d47e 100644
--- a/client/app/src/pages/custodian/settings/settings.component.html
+++ b/client/app/src/pages/custodian/settings/settings.component.html
@@ -1,16 +1,16 @@
 <form name="contentForm" #contentForm="ngForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink>{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-tab1 [contentForm]="contentForm"></src-tab1>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink>{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-tab1 [contentForm]="contentForm"></src-tab1>
+  </ng-template>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/custodian/settings/settings.component.ts b/client/app/src/pages/custodian/settings/settings.component.ts
index 383495c218..43f4d16559 100644
--- a/client/app/src/pages/custodian/settings/settings.component.ts
+++ b/client/app/src/pages/custodian/settings/settings.component.ts
@@ -1,12 +1,19 @@
 import {AfterViewInit, Component, TemplateRef, ViewChild} from "@angular/core";
 import {Tab} from "@app/models/component-model/tab";
 import {Tab1Component} from "@app/pages/admin/settings/tab1/tab1.component";
+import { FormsModule } from "@angular/forms";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-custodian-settings",
-  templateUrl: "./settings.component.html"
+    selector: "src-custodian-settings",
+    templateUrl: "./settings.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, Tab1Component, TranslateModule, TranslatorPipe]
 })
-export class SettingsComponent implements AfterViewInit {
+export class CustodianSettingsComponent implements AfterViewInit {
   @ViewChild("tab1") tab1!: TemplateRef<Tab1Component>;
   tabs: Tab[];
   active: string;
diff --git a/client/app/src/pages/custodian/sidebar/sidebar.component.ts b/client/app/src/pages/custodian/sidebar/sidebar.component.ts
index 5466115cb2..8d16cce39d 100644
--- a/client/app/src/pages/custodian/sidebar/sidebar.component.ts
+++ b/client/app/src/pages/custodian/sidebar/sidebar.component.ts
@@ -1,13 +1,16 @@
-import {Component} from "@angular/core";
-import {Router} from "@angular/router";
+import { Component, inject } from "@angular/core";
+import { Router, RouterLink, RouterLinkActive } from "@angular/router";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-custodian-sidebar",
-  templateUrl: "./sidebar.component.html"
+    selector: "src-custodian-sidebar",
+    templateUrl: "./sidebar.component.html",
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, TranslateModule, TranslatorPipe]
 })
-export class SidebarComponent {
-  constructor(private router: Router) {
-  }
+export class CustodianSidebarComponent {
+  private router = inject(Router);
 
   isActive(route: string): boolean {
     return this.router.isActive(route, {
diff --git a/client/app/src/pages/dashboard/home/home.component.html b/client/app/src/pages/dashboard/home/home.component.html
index cf7b374af1..3b74696abc 100644
--- a/client/app/src/pages/dashboard/home/home.component.html
+++ b/client/app/src/pages/dashboard/home/home.component.html
@@ -1,16 +1,27 @@
-<ng-container [ngSwitch]="appDataService.page">
-    <div *ngSwitchCase="'blank'">
+
+@switch (appDataService.page) {
+  @case ('blank') {
+    <div>
     </div>
-    <div *ngSwitchCase="'tippage'">
-        <src-tippage></src-tippage>
+  }
+  @case ('tippage') {
+    <div>
+      <src-tippage></src-tippage>
     </div>
-    <div *ngSwitchCase="'submissionpage'">
-        <src-submission></src-submission>
+  }
+  @case ('submissionpage') {
+    <div>
+      <src-submission></src-submission>
     </div>
-    <div *ngSwitchCase="'receiptpage'">
-        <src-receipt-whistleblower></src-receipt-whistleblower>
+  }
+  @case ('receiptpage') {
+    <div>
+      <src-receipt-whistleblower></src-receipt-whistleblower>
     </div>
-    <div *ngSwitchDefault>
-        <src-homepage></src-homepage>
+  }
+  @default {
+    <div>
+      <src-homepage></src-homepage>
     </div>
-</ng-container>
\ No newline at end of file
+  }
+}
diff --git a/client/app/src/pages/dashboard/home/home.component.ts b/client/app/src/pages/dashboard/home/home.component.ts
index 1262cef261..5b10f93c4c 100644
--- a/client/app/src/pages/dashboard/home/home.component.ts
+++ b/client/app/src/pages/dashboard/home/home.component.ts
@@ -1,11 +1,17 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 
+import { TippageComponent } from "../../whistleblower/tippage/tippage.component";
+import { SubmissionComponent } from "../../whistleblower/submission/submission.component";
+import { ReceiptComponent } from "../../whistleblower/receipt/receipt.component";
+import { HomepageComponent } from "../../whistleblower/homepage/homepage.component";
+
 @Component({
-  selector: "src-dashboard-home",
-  templateUrl: "./home.component.html"
+    selector: "src-dashboard-home",
+    templateUrl: "./home.component.html",
+    standalone: true,
+    imports: [TippageComponent, SubmissionComponent, ReceiptComponent, HomepageComponent]
 })
 export class HomeComponent {
-  constructor(protected appDataService: AppDataService) {
-  }
+  protected appDataService = inject(AppDataService);
 }
diff --git a/client/app/src/pages/recipient/home/home.component.ts b/client/app/src/pages/recipient/home/home.component.ts
index eff1d58d05..7badeacf5f 100644
--- a/client/app/src/pages/recipient/home/home.component.ts
+++ b/client/app/src/pages/recipient/home/home.component.ts
@@ -1,17 +1,22 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import { UtilsService } from "@app/shared/services/utils.service";
+import { UserHomeComponent } from "../../../shared/partials/user-home/user-home.component";
 
 @Component({
-  selector: "src-recipient-home",
-  templateUrl: "./home.component.html"
+    selector: "src-recipient-home",
+    templateUrl: "./home.component.html",
+    standalone: true,
+    imports: [UserHomeComponent]
 })
 export class HomeComponent implements OnInit {
+  private appDataService = inject(AppDataService);
+  private utilsService = inject(UtilsService);
+  private preference = inject(PreferenceResolver);
+
   preferenceData: preferenceResolverModel;
-  constructor(private appDataService: AppDataService,private utilsService: UtilsService, private preference: PreferenceResolver) {
-  }
 
  ngOnInit(): void {
     if (this.preference.dataModel) {
diff --git a/client/app/src/pages/recipient/recipient.module.ts b/client/app/src/pages/recipient/recipient.module.ts
deleted file mode 100644
index 318eebe678..0000000000
--- a/client/app/src/pages/recipient/recipient.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {NgModule} from "@angular/core";
-
-import {CommonModule} from "@angular/common";
-import {HomeComponent} from "@app/pages/recipient/home/home.component";
-import {SidebarComponent} from "@app/pages/recipient/sidebar/sidebar.component";
-import {RouterModule} from "@angular/router";
-import {TranslateModule} from "@ngx-translate/core";
-import {SharedModule} from "@app/shared.module";
-import {TipsComponent} from "@app/pages/recipient/tips/tips.component";
-import {TipComponent} from "@app/pages/recipient/tip/tip.component";
-import {SettingsComponent} from "@app/pages/recipient/settings/settings.component";
-import {FormsModule} from "@angular/forms";
-import {NgbDatepickerModule, NgbDropdownModule, NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
-import {
-  WhistleBlowerIdentityReceiverComponent
-} from "@app/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component";
-import {NgMultiSelectDropDownModule} from "ng-multiselect-dropdown";
-
-@NgModule({
-  declarations: [
-    HomeComponent,
-    SidebarComponent,
-    TipsComponent,
-    TipComponent,
-    SettingsComponent,
-    WhistleBlowerIdentityReceiverComponent,
-  ],
-  imports: [
-    CommonModule, RouterModule, TranslateModule, SharedModule, FormsModule,
-    NgbModule, NgbNavModule,
-    NgbDatepickerModule, NgbDropdownModule, NgMultiSelectDropDownModule.forRoot()
-
-  ],
-  exports: [SidebarComponent]
-})
-export class RecipientModule {
-}
diff --git a/client/app/src/pages/recipient/recipient-routing.module.ts b/client/app/src/pages/recipient/recipient.routes.ts
similarity index 56%
rename from client/app/src/pages/recipient/recipient-routing.module.ts
rename to client/app/src/pages/recipient/recipient.routes.ts
index 768ccd7e0f..e055926a05 100644
--- a/client/app/src/pages/recipient/recipient-routing.module.ts
+++ b/client/app/src/pages/recipient/recipient.routes.ts
@@ -1,17 +1,12 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {HomeComponent} from "@app/pages/recipient/home/home.component";
-import {TipsComponent} from "@app/pages/recipient/tips/tips.component";
-import {SettingsComponent} from "@app/pages/recipient/settings/settings.component";
-import {PreferencesComponent} from "@app/shared/partials/preferences/preferences.component";
+import {Routes} from "@angular/router";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {RTipsResolver} from "@app/shared/resolvers/r-tips-resolver.service";
 
-const routes: Routes = [
+export const recipientRoutes: Routes = [
   {
     path: "",
-    component: HomeComponent,
+    loadComponent: () => import('@app/pages/recipient/home/home.component').then(m => m.HomeComponent),
     pathMatch: "full",
     data: {pageTitle: "Home"},
     resolve: {
@@ -20,7 +15,7 @@ const routes: Routes = [
   },
   {
     path: "home",
-    component: HomeComponent,
+    loadComponent: () => import('@app/pages/recipient/home/home.component').then(m => m.HomeComponent),
     pathMatch: "full",
     resolve: {
       PreferenceResolver, RTipsResolver
@@ -29,7 +24,7 @@ const routes: Routes = [
   },
   {
     path: "reports",
-    component: TipsComponent,
+    loadComponent: () => import('@app/pages/recipient/tips/tips.component').then(m => m.TipsComponent),
     pathMatch: "full",
     resolve: {
       PreferenceResolver, RTipsResolver
@@ -38,7 +33,7 @@ const routes: Routes = [
   },
   {
     path: "settings",
-    component: SettingsComponent,
+    loadComponent: () => import('@app/pages/recipient/settings/settings.component').then(m => m.RecipientSettingsComponent),
     resolve: {
       NodeResolver
     },
@@ -47,18 +42,11 @@ const routes: Routes = [
   },
   {
     path: "preferences",
-    component: PreferencesComponent,
+    loadComponent: () => import('@app/shared/partials/preferences/preferences.component').then(m => m.PreferencesComponent),
     pathMatch: "full",
     resolve: {
       PreferenceResolver, RTipsResolver
     },
     data: {pageTitle: "Preferences"},
   }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class RecipientRoutingModule {
-}
+];
\ No newline at end of file
diff --git a/client/app/src/pages/recipient/settings/settings.component.html b/client/app/src/pages/recipient/settings/settings.component.html
index b327d1dc18..c4cb25d47e 100644
--- a/client/app/src/pages/recipient/settings/settings.component.html
+++ b/client/app/src/pages/recipient/settings/settings.component.html
@@ -1,16 +1,16 @@
 <form name="contentForm" #contentForm="ngForm" novalidate class="reveal">
-    <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink>{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
-    </ul>
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-    <ng-template #tab1>
-        <src-tab1 [contentForm]="contentForm"></src-tab1>
-    </ng-template>
+  <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
+    @for (tab of tabs; track tab) {
+      <li [ngbNavItem]="tab.title">
+        <button ngbNavLink>{{ tab.title | translate }}</button>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+        </ng-template>
+      </li>
+    }
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  <ng-template #tab1>
+    <src-tab1 [contentForm]="contentForm"></src-tab1>
+  </ng-template>
 </form>
\ No newline at end of file
diff --git a/client/app/src/pages/recipient/settings/settings.component.ts b/client/app/src/pages/recipient/settings/settings.component.ts
index f0732367e4..1441f33c8b 100644
--- a/client/app/src/pages/recipient/settings/settings.component.ts
+++ b/client/app/src/pages/recipient/settings/settings.component.ts
@@ -1,19 +1,30 @@
-import {AfterViewInit, ChangeDetectorRef, Component, TemplateRef, ViewChild} from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, TemplateRef, ViewChild, inject } from "@angular/core";
 import {Router} from "@angular/router";
 import {Tab} from "@app/models/component-model/tab";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {Tab1Component} from "@app/pages/admin/settings/tab1/tab1.component";
+import { FormsModule } from "@angular/forms";
+import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
+import { NgTemplateOutlet } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-recipient-settings",
-  templateUrl: "./settings.component.html"
+    selector: "src-recipient-settings",
+    templateUrl: "./settings.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgTemplateOutlet, NgbNavOutlet, Tab1Component, TranslateModule, TranslatorPipe]
 })
-export class SettingsComponent implements AfterViewInit {
+export class RecipientSettingsComponent implements AfterViewInit {
+  private cdr = inject(ChangeDetectorRef);
+  private preferenceResolver = inject(PreferenceResolver);
+  private router = inject(Router);
+
   @ViewChild("tab1") tab1!: TemplateRef<Tab1Component>;
   tabs: Tab[];
   active: string;
 
-  constructor(private cdr: ChangeDetectorRef, private preferenceResolver: PreferenceResolver, private router: Router) {
+  constructor() {
     if (!this.preferenceResolver.dataModel.can_edit_general_settings) {
       this.router.navigate(['recipient/home']).then();
     }
diff --git a/client/app/src/pages/recipient/sidebar/sidebar.component.html b/client/app/src/pages/recipient/sidebar/sidebar.component.html
index 8a41af5b2e..284299465a 100644
--- a/client/app/src/pages/recipient/sidebar/sidebar.component.html
+++ b/client/app/src/pages/recipient/sidebar/sidebar.component.html
@@ -1,12 +1,14 @@
 <a routerLink="/recipient/home" routerLinkActive="active" id="recipient_home" [ngClass]="{'active': isActive('/recipient/home')}" [attr.aria-current]="isActive('/recipient/home') ? 'page' : 'false'">
-    <i class="fa fa-home me-2"></i>
-    <span>{{'Home' | translate}}</span>
+  <i class="fa fa-home me-2"></i>
+  <span>{{'Home' | translate}}</span>
 </a>
 <a routerLink="/recipient/reports" routerLinkActive="active" id="recipient_reports" [ngClass]="{'active': isActive('/recipient/reports')}" [attr.aria-current]="isActive('/recipient/reports') ? 'page' : 'false'">
-    <i class="fa fa-inbox me-2"></i>
-    <span>{{'Reports' | translate}}</span>
+  <i class="fa fa-inbox me-2"></i>
+  <span>{{'Reports' | translate}}</span>
 </a>
-<a routerLink="/recipient/settings" routerLinkActive="active" id="recipient_settings" [ngClass]="{'active': isActive('/recipient/settings')}" [attr.aria-current]="isActive('/recipient/settings') ? 'page' : 'false'" *ngIf="preferenceResolver.dataModel.can_edit_general_settings">
+@if (preferenceResolver.dataModel.can_edit_general_settings) {
+  <a routerLink="/recipient/settings" routerLinkActive="active" id="recipient_settings" [ngClass]="{'active': isActive('/recipient/settings')}" [attr.aria-current]="isActive('/recipient/settings') ? 'page' : 'false'">
     <i class="fa-solid fa-sliders me-2"></i>
     <span>{{'Settings' | translate}}</span>
-</a>
\ No newline at end of file
+  </a>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/recipient/sidebar/sidebar.component.ts b/client/app/src/pages/recipient/sidebar/sidebar.component.ts
index d2ed6a418f..163705d017 100644
--- a/client/app/src/pages/recipient/sidebar/sidebar.component.ts
+++ b/client/app/src/pages/recipient/sidebar/sidebar.component.ts
@@ -1,16 +1,21 @@
-import {Component} from "@angular/core";
-import {Router} from "@angular/router";
+import { Component, inject } from "@angular/core";
+import { Router, RouterLink, RouterLinkActive } from "@angular/router";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
+import { NgClass } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-receipt-sidebar",
-  templateUrl: "./sidebar.component.html"
+    selector: "src-receipt-sidebar",
+    templateUrl: "./sidebar.component.html",
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, NgClass, TranslateModule, TranslatorPipe]
 })
-export class SidebarComponent {
-  message: string;
+export class ReceiptSidebarComponent {
+  private router = inject(Router);
+  protected preferenceResolver = inject(PreferenceResolver);
 
-  constructor(private router: Router, protected preferenceResolver: PreferenceResolver) {
-  }
+  message: string;
 
   isActive(route: string): boolean {
     return this.router.isActive(route, {
diff --git a/client/app/src/pages/recipient/tip/tip.component.html b/client/app/src/pages/recipient/tip/tip.component.html
index ec1c36e3e2..703feaa271 100644
--- a/client/app/src/pages/recipient/tip/tip.component.html
+++ b/client/app/src/pages/recipient/tip/tip.component.html
@@ -1,155 +1,175 @@
-<div class="reveal">
-    <div id="Toolbar" class="row" *ngIf="tip">
-        <div class="col-md-12">
-            <a id="link-tiplist" href="#/recipient/reports" title="{{'Reports' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-arrow-left"></i>
-            </a>
-            <span id="tip-action-star" (click)="tipToggleStar()"
-                title="{{'Mark as important' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-star" [ngClass]="{'text-warning': tip && tip.important}"></i>
-            </span>
-            <span id="tip-action-reminder" (click)="setReminder()"
-                title="{{'Set a reminder' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid" [ngClass]="{'fa-bell': !utils.isNever(tip.reminder_date), 'fa-bell-slash': tip && utils.isNever(tip.reminder_date), 'text-warning': tip && utils.isDatePassed(tip.reminder_date)}"></i>
-            </span>
-            <span id="tip-action-notify" *ngIf="tip && !tip.enable_notifications" (click)="tipNotify(true)" title="{{'Turn on email notifications' | translate}}"
-                class="btn btn-outline-secondary active">
-                <i class="fa-solid fa-volume-mute"></i>
-            </span>
-            <span id="tip-action-silence" *ngIf="!tip || tip.enable_notifications" (click)="tipNotify(false)" title="{{'Silence email notifications' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-volume-down"></i>
-            </span>
-            <span id="tip-action-grant-access" *ngIf="preferencesService.dataModel.can_grant_access_to_reports"
-                (click)="openGrantTipAccessModal()" title="{{'Grant access' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-user-plus"></i>
-            </span>
-            <span id="tip-action-revoke-access" *ngIf="preferencesService.dataModel.can_grant_access_to_reports"
-                (click)="openRevokeTipAccessModal()" title="{{'Revoke access' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-user-minus"></i>
-            </span>
-            <span id="tip-action-transfer-access" *ngIf="preferencesService.dataModel.can_transfer_access_to_reports"
-                (click)="openTipTransferModal()" title="{{'Transfer access' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-people-arrows"></i>
-            </span>
-            <ng-container *ngIf="!tip || tip.context">
-                <span id="tip-action-postpone"
-                    *ngIf="!tip || preferencesService.dataModel.can_postpone_expiration && tip.context.tip_timetolive > 0"
-                    (click)="tipPostpone()" title="{{'Edit the expiration date' | translate}}"
-                    class="btn btn-outline-secondary">
-                    <i class="fa-solid fa-clock"></i>
-                </span>
-            </ng-container>
-            <span id="tip-action-delete" *ngIf="preferencesService.dataModel.can_delete_submission"
-                (click)="tipDelete()" title="{{'Delete' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-trash"></i>
-            </span>
-            <span id="tip-action-mask"
-                *ngIf="(preferencesService.dataModel.can_redact_information || preferencesService.dataModel.can_mask_information)"
-                (click)="toggleRedactMode()" title="{{redactOperationTitle | translate}}"
-                class="btn btn-outline-secondary" [ngClass]="{'active': redactMode}">
-                <i class="fa-solid fa-eraser"></i>
-            </span>
-            <ng-container *ngIf="tip?.status !== 'closed'">
-                <span id="tip-action-change-status" (click)="openModalChangeState()"
-                    title="{{'Change status' | translate}}" class="btn btn-outline-secondary">
-                    <i class="fa-solid fa-dot-circle"></i>
-                </span>
-            </ng-container>
-            <ng-container *ngIf="preferencesService.dataModel.can_reopen_reports && tip?.status === 'closed'">
-                <span id="tip-action-reopen-status" (click)="openModalReopen()"
-                    title="{{'Reopen' | translate}}" class="btn btn-outline-secondary">
-                    <i class="fa-solid fa-dot-circle"></i>
-                </span>
-            </ng-container>
-            <span id="tip-action-print" (click)="utils.print()" title="{{'Print' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-print"></i>
-            </span>
-            <span id="tip-action-export" (click)="exportTip(tip.id)"
-                title="{{'Export' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-download"></i>
-            </span>
-            <span id="link-reload" (click)="reload()" title="{{'Refresh' | translate}}"
-                class="btn btn-outline-secondary">
-                <i class="fa-solid fa-sync"></i>
+@if (tip) {
+  <div class="reveal">
+    <div id="Toolbar" class="row">
+      <div class="col-md-12">
+        <a id="link-tiplist" href="#/recipient/reports" data-toggle="tooltip" title="{{'Reports' | translate}}"
+          class="btn btn-outline-secondary">
+          <i class="fa-solid fa-arrow-left"></i>
+        </a>
+        <span id="tip-action-star" (click)="tipToggleStar()" data-toggle="tooltip"
+          title="{{'Mark as important' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid fa-star" [ngClass]="{'text-warning': tip && tip.important}"></i>
+        </span>
+        <span id="tip-action-reminder" (click)="setReminder()" data-toggle="tooltip"
+          title="{{'Set a reminder' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid" [ngClass]="{'fa-bell': !utils.isNever(tip.reminder_date), 'fa-bell-slash': tip && utils.isNever(tip.reminder_date), 'text-warning': tip && utils.isDatePassed(tip.reminder_date)}"></i>
+        </span>
+        @if (tip && !tip.enable_notifications) {
+          <span id="tip-action-notify" (click)="tipNotify(true)"
+            data-toggle="tooltip" title="{{'Turn on email notifications' | translate}}"
+            class="btn btn-outline-secondary active">
+            <i class="fa-solid fa-volume-mute"></i>
+          </span>
+        }
+        @if (!tip || tip.enable_notifications) {
+          <span id="tip-action-silence" (click)="tipNotify(false)"
+            data-toggle="tooltip" title="{{'Silence email notifications' | translate}}"
+            class="btn btn-outline-secondary">
+            <i class="fa-solid fa-volume-down"></i>
+          </span>
+        }
+        @if (preferencesService.dataModel.can_grant_access_to_reports) {
+          <span id="tip-action-grant-access"
+            (click)="openGrantTipAccessModal()" data-toggle="tooltip" title="{{'Grant access' | translate}}"
+            class="btn btn-outline-secondary">
+            <i class="fa-solid fa-user-plus"></i>
+          </span>
+        }
+        @if (preferencesService.dataModel.can_grant_access_to_reports) {
+          <span id="tip-action-revoke-access"
+            (click)="openRevokeTipAccessModal()" data-toggle="tooltip" title="{{'Revoke access' | translate}}"
+            class="btn btn-outline-secondary">
+            <i class="fa-solid fa-user-minus"></i>
+          </span>
+        }
+        @if (preferencesService.dataModel.can_transfer_access_to_reports) {
+          <span id="tip-action-transfer-access"
+            (click)="openTipTransferModal()" data-toggle="tooltip" title="{{'Transfer access' | translate}}"
+            class="btn btn-outline-secondary">
+            <i class="fa-solid fa-people-arrows"></i>
+          </span>
+        }
+        @if (!tip || tip.context) {
+          @if (!tip || preferencesService.dataModel.can_postpone_expiration && tip.context.tip_timetolive > 0) {
+            <span id="tip-action-postpone"
+              (click)="tipPostpone()" data-toggle="tooltip" title="{{'Edit the expiration date' | translate}}"
+              class="btn btn-outline-secondary">
+              <i class="fa-solid fa-clock"></i>
             </span>
-        </div>
+          }
+        }
+        @if (preferencesService.dataModel.can_delete_submission) {
+          <span id="tip-action-delete"
+            (click)="tipDelete()" data-toggle="tooltip" title="{{'Delete' | translate}}"
+            class="btn btn-outline-secondary">
+            <i class="fa-solid fa-trash"></i>
+          </span>
+        }
+        @if ((preferencesService.dataModel.can_redact_information || preferencesService.dataModel.can_mask_information)) {
+          <span id="tip-action-mask"
+            (click)="toggleRedactMode()" data-toggle="tooltip" title="{{redactOperationTitle | translate}}"
+            class="btn btn-outline-secondary" [ngClass]="{'active': redactMode}">
+            <i class="fa-solid fa-eraser"></i>
+          </span>
+        }
+        @if (tip.status !== 'closed') {
+          <span id="tip-action-change-status" (click)="openModalChangeState()" data-toggle="tooltip"
+            title="{{'Change status' | translate}}" class="btn btn-outline-secondary">
+            <i class="fa-solid fa-dot-circle"></i>
+          </span>
+        }
+        @if (preferencesService.dataModel.can_reopen_reports && tip.status === 'closed') {
+          <span id="tip-action-reopen-status" (click)="openModalReopen()" data-toggle="tooltip"
+            title="{{'Reopen' | translate}}" class="btn btn-outline-secondary">
+            <i class="fa-solid fa-dot-circle"></i>
+          </span>
+        }
+        <span id="tip-action-print" (click)="utils.print()" data-toggle="tooltip" title="{{'Print' | translate}}"
+          class="btn btn-outline-secondary">
+          <i class="fa-solid fa-print"></i>
+        </span>
+        <span id="tip-action-export" (click)="exportTip(tip.id)" data-toggle="tooltip"
+          title="{{'Export' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid fa-download"></i>
+        </span>
+        <span id="link-reload" (click)="reload()" data-toggle="tooltip" title="{{'Refresh' | translate}}"
+          class="btn btn-outline-secondary">
+          <i class="fa-solid fa-sync"></i>
+        </span>
+      </div>
     </div>
     <div class="row mt-2">
-        <div class="col-md-12">
-            <src-tip-info [loading]="loading" [tipService]="RTipService"></src-tip-info>
-        </div>
+      <div class="col-md-12">
+        <src-tip-info [loading]="loading" [tipService]="RTipService"></src-tip-info>
+      </div>
     </div>
-    <ng-container *ngIf="tip && tip.receivers">
-        <div class="row" *ngIf="tip.receivers.length > 1">
-            <div class="col-md-12">
-                <src-tip-receiver-list [tipService]="RTipService"></src-tip-receiver-list>
-            </div>
+    @if (tip && tip.receivers) {
+      @if (tip.receivers.length > 1) {
+        <div class="row">
+          <div class="col-md-12">
+            <src-tip-receiver-list [tipService]="RTipService"></src-tip-receiver-list>
+          </div>
         </div>
-    </ng-container>
+      }
+    }
     <div class="row">
-        <div [ngClass]="{'col-md-12': !(tip && tip.enable_whistleblower_identity),'col-md-6': (tip && tip.enable_whistleblower_identity)}">
-            <src-tip-questionnaire-answers [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
-                [redactMode]="redactMode"></src-tip-questionnaire-answers>
+      <div [ngClass]="{'col-md-12': !(tip && tip.enable_whistleblower_identity),'col-md-6': (tip && tip.enable_whistleblower_identity)}">
+        <src-tip-questionnaire-answers [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
+        [redactMode]="redactMode"></src-tip-questionnaire-answers>
+      </div>
+      @if (tip && tip.enable_whistleblower_identity) {
+        <div class="col-md-6">
+          <src-whistleblower-identity-reciever [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode"></src-whistleblower-identity-reciever>
         </div>
-        <ng-container *ngIf="tip && tip.enable_whistleblower_identity">
-            <div class="col-md-6">
-                <src-whistleblower-identity-reciever [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode"></src-whistleblower-identity-reciever>
-            </div>
-        </ng-container>
+      }
     </div>
     <div class="row">
-        <div class="col-md-12">
-            <src-tip-files-receiver [redactMode]="redactMode"></src-tip-files-receiver>
-        </div>
+      <div class="col-md-12">
+        <src-tip-files-receiver [redactMode]="redactMode"></src-tip-files-receiver>
+      </div>
     </div>
     <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
-        <ng-container *ngFor="let tab of tabs">
-            <li [ngbNavItem]="tab.title">
-                <button ngbNavLink>{{ tab.title | translate }}</button>
-                <ng-template ngbNavContent>
-                    <ng-container *ngTemplateOutlet="tab.component"></ng-container>
-                </ng-template>
-            </li>
-        </ng-container>
+      @for (tab of tabs; track tab) {
+        <li [ngbNavItem]="tab.title">
+          <button ngbNavLink>{{ tab.title | translate }}</button>
+          <ng-template ngbNavContent>
+            <ng-container *ngTemplateOutlet="tab.component"></ng-container>
+          </ng-template>
+        </li>
+      }
     </ul>
     <div [ngbNavOutlet]="nav" class="mt-2"></div>
     <div class="row">
-        <ng-template #tab1>
-            <div class="col-md-12">
-                <src-tip-upload-wbfile [tip]="tip" (dataToParent)="listenToFields()"
-                    [key]="'public'"></src-tip-upload-wbfile>
-                <ng-container *ngIf="tip && tip.context">
-                    <src-tip-comments [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
-                        [redactMode]="redactMode" [key]="'public'"></src-tip-comments>
-                </ng-container>
-            </div>
-        </ng-template>
-        <ng-template #tab2>
-            <div class="col-md-12">
-                <src-tip-upload-wbfile [tip]="tip" (dataToParent)="listenToFields()"
-                    [key]="'internal'"></src-tip-upload-wbfile>
-                <ng-container *ngIf="tip && tip.context">
-                    <src-tip-comments [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
-                        [redactMode]="redactMode" [key]="'internal'"></src-tip-comments>
-                </ng-container>
-            </div>
-        </ng-template>
-        <ng-template #tab3>
-            <div class="col-md-12">
-                <src-tip-upload-wbfile [tip]="tip" (dataToParent)="listenToFields()"
-                    [key]="'personal'"></src-tip-upload-wbfile>
-                <ng-container *ngIf="tip && tip.context">
-                    <src-tip-comments [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
-                        [redactMode]="redactMode" [key]="'personal'"></src-tip-comments>
-                </ng-container>
-            </div>
-        </ng-template>
+      <ng-template #tab1>
+        <div class="col-md-12">
+          <src-tip-upload-wbfile [tip]="tip" (dataToParent)="listenToFields()"
+          [key]="'public'"></src-tip-upload-wbfile>
+          @if (tip && tip.context) {
+            <src-tip-comments [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
+            [redactMode]="redactMode" [key]="'public'"></src-tip-comments>
+          }
+        </div>
+      </ng-template>
+      <ng-template #tab2>
+        <div class="col-md-12">
+          <src-tip-upload-wbfile [tip]="tip" (dataToParent)="listenToFields()"
+          [key]="'internal'"></src-tip-upload-wbfile>
+          @if (tip && tip.context) {
+            <src-tip-comments [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
+            [redactMode]="redactMode" [key]="'internal'"></src-tip-comments>
+          }
+        </div>
+      </ng-template>
+      <ng-template #tab3>
+        <div class="col-md-12">
+          <src-tip-upload-wbfile [tip]="tip" (dataToParent)="listenToFields()"
+          [key]="'personal'"></src-tip-upload-wbfile>
+          @if (tip && tip.context) {
+            <src-tip-comments [tipService]="RTipService" [redactOperationTitle]="redactOperationTitle"
+            [redactMode]="redactMode" [key]="'personal'"></src-tip-comments>
+          }
+        </div>
+      </ng-template>
     </div>
-</div>
+  </div>
+}
diff --git a/client/app/src/pages/recipient/tip/tip.component.ts b/client/app/src/pages/recipient/tip/tip.component.ts
index 9d3a8f3371..94901181e9 100644
--- a/client/app/src/pages/recipient/tip/tip.component.ts
+++ b/client/app/src/pages/recipient/tip/tip.component.ts
@@ -1,8 +1,8 @@
-import {ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild} from "@angular/core";
+import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild, inject } from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {TipService} from "@app/shared/services/tip-service";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { NgbModal, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkButton, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from "@ng-bootstrap/ng-bootstrap";
 import {AppDataService} from "@app/app-data.service";
 import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 import {GrantAccessComponent} from "@app/shared/modals/grant-access/grant-access.component";
@@ -29,14 +29,60 @@ import {TipUploadWbFileComponent} from "@app/shared/partials/tip-upload-wbfile/t
 import {TipCommentsComponent} from "@app/shared/partials/tip-comments/tip-comments.component";
 import {ReopenSubmissionComponent} from "@app/shared/modals/reopen-submission/reopen-submission.component";
 import {ChangeSubmissionStatusComponent} from "@app/shared/modals/change-submission-status/change-submission-status.component";
-import {TranslateService} from "@ngx-translate/core";
+import { TranslateService, TranslateModule } from "@ngx-translate/core";
+import { NgClass, NgTemplateOutlet } from "@angular/common";
+import { TipInfoComponent } from "../../../shared/partials/tip-info/tip-info.component";
+import { TipReceiverListComponent } from "../../../shared/partials/tip-receiver-list/tip-receiver-list.component";
+import { TipQuestionnaireAnswersComponent } from "../../../shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component";
+import { WhistleBlowerIdentityReceiverComponent } from "../whistleblower-identity-reciever/whistle-blower-identity-receiver.component";
+import { TipFilesReceiverComponent } from "../../../shared/partials/tip-files-receiver/tip-files-receiver.component";
+import { TipUploadWbFileComponent as TipUploadWbFileComponent_1 } from "../../../shared/partials/tip-upload-wbfile/tip-upload-wb-file.component";
+import { TipCommentsComponent as TipCommentsComponent_1 } from "../../../shared/partials/tip-comments/tip-comments.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "src-tip",
-  templateUrl: "./tip.component.html",
+    selector: "src-tip",
+    templateUrl: "./tip.component.html",
+    standalone: true,
+    imports: [
+    NgClass,
+    TipInfoComponent,
+    TipReceiverListComponent,
+    TipQuestionnaireAnswersComponent,
+    WhistleBlowerIdentityReceiverComponent,
+    TipFilesReceiverComponent,
+    NgbNav,
+    NgbNavItem,
+    NgbNavItemRole,
+    NgbNavLinkButton,
+    NgbNavLinkBase,
+    NgbNavContent,
+    NgTemplateOutlet,
+    NgbNavOutlet,
+    TipUploadWbFileComponent_1,
+    TipCommentsComponent_1,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class TipComponent implements OnInit {
+  private translateService = inject(TranslateService);
+  private tipService = inject(TipService);
+  private appConfigServices = inject(AppConfigService);
+  private router = inject(Router);
+  private cdr = inject(ChangeDetectorRef);
+  private cryptoService = inject(CryptoService);
+  protected utils = inject(UtilsService);
+  protected preferencesService = inject(PreferenceResolver);
+  protected modalService = inject(NgbModal);
+  private activatedRoute = inject(ActivatedRoute);
+  protected httpService = inject(HttpService);
+  protected http = inject(HttpClient);
+  protected appDataService = inject(AppDataService);
+  protected RTipService = inject(ReceiverTipService);
+  protected authenticationService = inject(AuthenticationService);
+
   @ViewChild("tab1") tab1!: TemplateRef<TipUploadWbFileComponent | TipCommentsComponent>;
   @ViewChild("tab2") tab2!: TemplateRef<TipUploadWbFileComponent | TipCommentsComponent>;
   @ViewChild("tab3") tab3!: TemplateRef<TipUploadWbFileComponent | TipCommentsComponent>;
@@ -52,9 +98,6 @@ export class TipComponent implements OnInit {
   redactOperationTitle: string;
   tabs: Tab[];
 
-  constructor(private translateService: TranslateService,private tipService: TipService, private appConfigServices: AppConfigService, private router: Router, private cdr: ChangeDetectorRef, private cryptoService: CryptoService, protected utils: UtilsService, protected preferencesService: PreferenceResolver, protected modalService: NgbModal, private activatedRoute: ActivatedRoute, protected httpService: HttpService, protected http: HttpClient, protected appDataService: AppDataService, protected RTipService: ReceiverTipService, protected authenticationService: AuthenticationService) {
-  }
-
   ngOnInit() {
     this.loadTipDate();
     this.cdr.detectChanges();
@@ -253,7 +296,7 @@ export class TipComponent implements OnInit {
         for (const y of x.substatuses) {
           output.push({
             id: `${x.id}:${y.id}`,
-            label: (x.label ? this.translateService.instant(x.label) : '') + ' \u2013 ' + y.label,
+            label: this.translateService.instant(x.label) + ' \u2013 ' + y.label,
             status: x.id,
             substatus: y.id,
             order: output.length,
diff --git a/client/app/src/pages/recipient/tips/tips.component.html b/client/app/src/pages/recipient/tips/tips.component.html
index 02018b93eb..5b133b051f 100644
--- a/client/app/src/pages/recipient/tips/tips.component.html
+++ b/client/app/src/pages/recipient/tips/tips.component.html
@@ -1,277 +1,405 @@
-<ng-container *ngIf="RTips.dataModel && RTips.dataModel && filteredTips">
-    <div id="Toolbar" class="row">
-        <div class="col-md-12">
-            <a id="link-home" routerLink="/recipient/home" title="{{'Home' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-arrow-left"></i>
-            </a>
-            <span id="tip-action-select-all" *ngIf="selectedTips.length !== RTips.dataModel.length " (click)="selectAll()" title="{{'Select all' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-square"></i>
+@if (RTips.dataModel && RTips.dataModel && filteredTips) {
+  <div id="Toolbar" class="row">
+    <div class="col-md-12">
+      <a id="link-home" routerLink="/recipient/home" data-toggle="tooltip" title="{{'Home' | translate}}" class="btn btn-outline-secondary">
+        <i class="fa-solid fa-arrow-left"></i>
+      </a>
+      @if (selectedTips.length !== RTips.dataModel.length ) {
+        <span id="tip-action-select-all" (click)="selectAll()" data-toggle="tooltip" title="{{'Select all' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid fa-square"></i>
+        </span>
+      }
+      @if (selectedTips.length === RTips.dataModel.length) {
+        <span id="tip-action-select-all" (click)="deselectAll()" data-toggle="tooltip" title="{{'Deselect all' | translate}}" class="btn btn-outline-secondary">
+          <i class="fa-solid fa-check-square"></i>
+        </span>
+      }
+      @if (selectedTips.length) {
+        <span>
+          @if (preference.dataModel.can_grant_access_to_reports) {
+            <span id="tip-action-grant-access-selected" (click)="openGrantAccessModal()" data-toggle="tooltip" title="{{'Grant access' | translate}}" class="btn btn-outline-secondary">
+              <i class="fa-solid fa-user-plus"></i>
             </span>
-            <span id="tip-action-select-all" *ngIf="selectedTips.length === RTips.dataModel.length" (click)="deselectAll()" title="{{'Deselect all' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-check-square"></i>
+          }
+          @if (preference.dataModel.can_grant_access_to_reports) {
+            <span id="tip-action-revoke-access-selected" (click)="openRevokeAccessModal()" data-toggle="tooltip" title="{{'Revoke access' | translate}}" class="btn btn-outline-secondary">
+              <i class="fa-solid fa-user-minus"></i>
             </span>
-            <span *ngIf="selectedTips.length">
-                <span id="tip-action-grant-access-selected" *ngIf="preference.dataModel.can_grant_access_to_reports" (click)="openGrantAccessModal()" title="{{'Grant access' | translate}}" class="btn btn-outline-secondary">
-                    <i class="fa-solid fa-user-plus"></i>
+          }
+          <span id="tip-action-export-selected" (click)="exportTips()" data-toggle="tooltip" title="{{'Export' | translate}}" class="btn btn-outline-secondary">
+            <i class="fa-solid fa-download"></i>
+          </span>
+        </span>
+      }
+      <span id="tip-action-open-new-tab" (click)="actAsWhistleblower()" data-toggle="tooltip" title="{{'Act on behalf of a whistleblower' | translate}}"
+        class="btn btn-outline-secondary">
+        <i class="fa-solid fa-handshake-angle"></i>
+      </span>
+      <span id="tip-action-reload" (click)="reload()" data-toggle="tooltip" title="{{'Refresh' | translate}}" class="btn btn-outline-secondary">
+        <i class="fa-solid fa-sync"></i>
+      </span>
+      <span id="SearchFilter" class="w-auto d-inline-block">
+        <span class="input-group ">
+          <input type="text" class="form-control" placeholder="{{'Search' | translate}}" [(ngModel)]="search" (ngModelChange)="onSearchChange($event)">
+          <div class="input-group-append">
+            <button class="input-group-text h-100 rounded-start-0">
+              <i class="fa-solid fa-search"></i>
+            </button>
+          </div>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div id="TipList" class="row mt-2">
+    <div class="col-md-12 table-responsive">
+      <table class="table table-striped" id="tipList">
+        <thead>
+          <tr>
+            <th></th>
+            <th (click)="sortKey = 'important'; sortReverse = !sortReverse">
+              <i class="fa-solid fa-star"></i>
+              @if (sortKey === 'important') {
+                <span>
+                  @if (!sortReverse) {
+                    <span class="fa-solid fa-caret-down"></span>
+                  }
+                  @if (sortReverse) {
+                    <span class="fa-solid fa-caret-up"></span>
+                  }
                 </span>
-                <span id="tip-action-revoke-access-selected" *ngIf="preference.dataModel.can_grant_access_to_reports" (click)="openRevokeAccessModal()" title="{{'Revoke access' | translate}}" class="btn btn-outline-secondary">
-                    <i class="fa-solid fa-user-minus"></i>
+              }
+            </th>
+            <th (click)="sortKey = 'reminder_date'; sortReverse = !sortReverse">
+              <i class="fa-solid fa-bell"></i>
+              @if (sortKey === 'reminder_date') {
+                <span>
+                  @if (!sortReverse) {
+                    <span class="fa-solid fa-caret-down"></span>
+                  }
+                  @if (sortReverse) {
+                    <span class="fa-solid fa-caret-up"></span>
+                  }
                 </span>
-                <span id="tip-action-export-selected" (click)="exportTips()" title="{{'Export' | translate}}" class="btn btn-outline-secondary">
-                    <i class="fa-solid fa-download"></i>
+              }
+            </th>
+            <th class="TipInfoID" (click)="sortKey = 'progressive'; sortReverse = !sortReverse">
+              <i class="fa-solid fa-hashtag"></i>
+              @if (sortKey === 'progressive') {
+                <span>
+                  @if (!sortReverse) {
+                    <span class="fa-solid fa-caret-down"></span>
+                  }
+                  @if (sortReverse) {
+                    <span class="fa-solid fa-caret-up"></span>
+                  }
                 </span>
-            </span>
-            <span id="tip-action-open-new-tab" (click)="actAsWhistleblower()" title="{{'Act on behalf of a whistleblower' | translate}}"
-              class="btn btn-outline-secondary">
-              <i class="fa-solid fa-handshake-angle"></i>
-            </span>
-            <span id="tip-action-reload" (click)="reload()" title="{{'Refresh' | translate}}" class="btn btn-outline-secondary">
-                <i class="fa-solid fa-sync"></i>
-            </span>
-            <span id="SearchFilter" class="w-auto d-inline-block">
-                <span class="input-group ">
-                    <input type="text" class="form-control" placeholder="{{'Search' | translate}}" [(ngModel)]="search" (ngModelChange)="onSearchChange($event)">
-                    <div class="input-group-append">
-                        <button class="input-group-text h-100 rounded-start-0">
-                            <i class="fa-solid fa-search"></i>
-                        </button>
-                    </div>
+              }
+            </th>
+            @if (appDataService.public.contexts.length > 1) {
+              <th class="TipInfoContext">
+                <span (click)="sortKey = 'context_name'; sortReverse = !sortReverse">
+                  <i class="fa-solid fa-inbox"></i>
+                  <span>{{'Channel' | translate}}</span>
+                  @if (sortKey === 'context_name') {
+                    <span>
+                      @if (!sortReverse) {
+                        <span class="fa-solid fa-caret-down"></span>
+                      }
+                      @if (sortReverse) {
+                        <span class="fa-solid fa-caret-up"></span>
+                      }
+                    </span>
+                  }
                 </span>
-            </span>
-        </div>
-    </div>
-    <div id="TipList" class="row mt-2">
-        <div class="col-md-12 table-responsive">
-            <table class="table table-striped" id="tipList">
-                <thead>
-                <tr>
-                    <th></th>
-                    <th (click)="sortKey = 'important'; sortReverse = !sortReverse">
-                        <i class="fa-solid fa-star"></i>
-                        <span *ngIf="sortKey === 'important'">
-                            <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                            <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                        </span>
-                    </th>
-                    <th (click)="sortKey = 'reminder_date'; sortReverse = !sortReverse">
-                        <i class="fa-solid fa-bell"></i>
-                        <span *ngIf="sortKey === 'reminder_date'">
-                            <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                            <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                        </span>
-                    </th>
-                    <th class="TipInfoID" (click)="sortKey = 'progressive'; sortReverse = !sortReverse">
-                        <i class="fa-solid fa-hashtag"></i>
-                        <span *ngIf="sortKey === 'progressive'">
-                            <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                            <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                        </span>
-                    </th>
-                    <th class="TipInfoContext" *ngIf="appDataService.public.contexts.length > 1">
-                        <span (click)="sortKey = 'context_name'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-inbox"></i>
-                            <span>{{'Channel' | translate}}</span>
-                            <span *ngIf="sortKey === 'context_name'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                        </span>
-                        <span class="dropdown-multi-select-container" *ngIf="RTips.dataModel.length > 0">
-                            <i class="fa-solid fa-filter" [ngClass]="{ filterSelected: checkFilter(dropdownContextModel) }" (click)="toggleChannelDropdown()"></i>
-                            <span [class.hidden]="!channelDropdownVisible">
-                                <ng-multiselect-dropdown [class.dropdown-visible]="channelDropdownVisible" [settings]="dropdownSettings" [data]="dropdownContextData" [(ngModel)]="dropdownContextModel" (ngModelChange)="onChanged(dropdownContextModel,'Channel')"></ng-multiselect-dropdown>
-                            </span>
-                        </span>
-                    </th>
-                    <th class="TipInfoLabel">
-                        <span (click)="sortKey = 'label'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-tag"></i>
-                            <span>{{'Label' | translate}}</span>
-                            <span *ngIf="sortKey === 'label'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                        </span>
-                    </th>
-                    <th class="TipInfoStatus">
-                        <span (click)="sortKey = 'submissionStatusStr'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-dot-circle"></i>
-                            <span>{{'Status' | translate}}</span>
-                            <span *ngIf="sortKey === 'submissionStatusStr'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                        </span>
-                        <span class="dropdown-multi-select-container" *ngIf="RTips.dataModel.length > 0">
-                            <i class="fa-solid fa-filter" [ngClass]="{ filterSelected: checkFilter(dropdownStatusModel) }" (click)="toggleStatusDropdown()"></i>
-                            <span [class.hidden]="!statusDropdownVisible">
-                                <ng-multiselect-dropdown [class.dropdown-visible]="statusDropdownVisible" [settings]="dropdownSettings" [data]="dropdownStatusData" [(ngModel)]="dropdownStatusModel" (ngModelChange)="onChanged(dropdownStatusModel,'Status')"></ng-multiselect-dropdown>
-                            </span>
-                        </span>
-                    </th>
-                    <th class="TipInfoSubmissionDate">
-                        <span (click)="sortKey = 'creation_date'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-clock"></i>
-                            <span>{{'Report date' | translate}}</span>
-                            <span *ngIf="sortKey === 'creation_date'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                        </span>
-                        <span class="ngb-dtepicker-container ms-1">
-                                <i class="fas fa-calendar" [ngClass]="{'calendar-active':  reportDateFilter}" (click)="reportDatePicker=!reportDatePicker;lastUpdatePicker=false;expirationDatePicker=false;statusDropdownVisible=false;channelDropdownVisible=false;scoreDropdownVisible=false;"></i>
-                                <div [hidden]="!reportDatePicker">
-                                    <ngbd-datepicker-range class="z-3 position-absolute d-block" [currentDates]="reportDateModel" (emitDateSelection)="onReportFilterChange($event)"></ngbd-datepicker-range>
-                                </div>
-                        </span>
-                    </th>
-                    <th class="TipInfoUpdateDate">
-                        <span (click)="sortKey = 'update_date'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-clock"></i>
-                            <span>{{'Last update' | translate}}</span>
-                            <span *ngIf="sortKey === 'update_date'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                            </span>
-                        <span class="ngb-dtepicker-container ms-1">
-                            <i class="fas fa-calendar" [ngClass]="{'calendar-active':  updateDateFilter}" (click)="lastUpdatePicker=!lastUpdatePicker;reportDatePicker=false;expirationDatePicker=false;statusDropdownVisible=false;channelDropdownVisible=false;scoreDropdownVisible=false;"></i>
-                            <div [hidden]="!lastUpdatePicker">
-                                <ngbd-datepicker-range class="z-3 position-absolute d-block" [currentDates]="updateDateModel" (emitDateSelection)="onUpdateFilterChange($event)"></ngbd-datepicker-range>
-                            </div>
-                        </span>
-                    </th>
-                    <th class="TipInfoExpirationDate">
-                        <span (click)="sortKey = 'expiration_date'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-hourglass"></i>
-                            <span>{{'Expiration date' | translate}}</span>
-                            <span *ngIf="sortKey === 'expiration_date'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                        </span>
-                        <span class="ngb-dtepicker-container ms-1">
-                            <i class="fas fa-calendar" [ngClass]="{'calendar-active':  expiryDateFilter}" (click)="expirationDatePicker=!expirationDatePicker;reportDatePicker=false;lastUpdatePicker=false;statusDropdownVisible=false;channelDropdownVisible=false;scoreDropdownVisible=false;"></i>
-                            <div [hidden]="!expirationDatePicker">
-                                <ngbd-datepicker-range class="z-3 position-absolute d-block" [currentDates]="expiryDateModel" (emitDateSelection)="onExpiryFilterChange($event)"></ngbd-datepicker-range>
-                            </div>
-                        </span>
-                    </th>
-                    <th class="TipInfoReadReceipt">
-                        <i class="fa-solid fa-envelope-circle-check"></i>
-                    </th>
-                    <th class="TipInfoComments">
-                        <i class="fa-solid fa-comment"></i>
-                    </th>
-                    <th class="TipInfoFiles">
-                        <i class="fa-solid fa-file"></i>
-                    </th>
-                    <th class="TipInfoIdentity">
-                        <i class="fa-solid fa-user"></i>
-                    </th>
-                    <th class="TipInfoRecipientCount">
-                        <span (click)="sortKey = 'receiver_count'; sortReverse = !sortReverse">
-                          <i class="fa-solid fa-users"></i>
-                          <span></span>
-                          <span *ngIf="sortKey === 'receiver_count'">
-                            <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                            <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                          </span>
-                        </span>
-                    </th>
-                    <th class="TipInfoScore" *ngIf="appDataService.public.node.enable_scoring_system">
-                        <span (click)="sortKey = 'score'; sortReverse = !sortReverse">
-                            <i class="fa-solid fa-flash"></i>
-                            <span>{{'Score' | translate}}</span>
-                            <span *ngIf="sortKey === 'score'">
-                                <span *ngIf="!sortReverse" class="fa-solid fa-caret-down"></span>
-                                <span *ngIf="sortReverse" class="fa-solid fa-caret-up"></span>
-                            </span>
-                        </span>
-                        <span class="dropdown-multi-select-container" *ngIf="RTips.dataModel.length > 0">
-                            <i class="fa-solid fa-filter" [ngClass]="{ filterSelected: checkFilter(dropdownScoreModel) }" (click)="toggleScoreDropdown()"></i>
-                            <span [class.hidden]="!scoreDropdownVisible">
-                                <ng-multiselect-dropdown [class.dropdown-visible]="scoreDropdownVisible" [settings]="dropdownSettings" [data]="dropdownScoreData" [(ngModel)]="dropdownScoreModel" (ngModelChange)="onChanged(dropdownScoreModel,'Score')"></ng-multiselect-dropdown>
-                            </span>
-                        </span>
-                    </th>
-                </tr>
-                </thead>
-                <tbody id="tipListTableBody">
-                <ng-container *ngFor="let tip of orderbyCast(filteredTips | orderBy:sortKey:sortReverse) | slice:((currentPage - 1) * itemsPerPage):((currentPage - 1) * itemsPerPage + itemsPerPage) let index = index">
-                    <tr id="tip-{{index}}" [ngClass]="{'fw-bold': tip.updated, 'selectedTip': isSelected(tip.id),'disabled': !tip.accessible}" class="tip-action-open" (click)="utils.go('/reports/' + tip.id)">
-                        <td>
-                            <span class="btn btn-sm btn-outline-secondary" *ngIf="isSelected(tip.id)" (click)="tipSwitch(tip.id); $event.stopPropagation();">
-                                <i class="fa-solid fa-check-square"></i>
-                            </span>
-                            <span class="btn btn-sm btn-outline-secondary" *ngIf="!isSelected(tip.id)" (click)="tipSwitch(tip.id); $event.stopPropagation();">
-                                <i class="fa-solid fa-square"></i>
-                            </span>
-                        </td>
-                        <td>
-                            <i *ngIf="tip.important" class="fa-solid fa-star text-warning"></i>
-                        <td>
-                            <i *ngIf="!utils.isNever(tip.reminder_date)" class="fa-solid fa-bell" [ngClass]="{'text-warning': utils.isDatePassed(tip.reminder_date)}"></i>
-                        </td>
-                        <td class="TipInfoID">{{tip.progressive}}</td>
-                        <td class="TipInfoContext" *ngIf="appDataService.public.contexts.length > 1">{{tip.context_name}}</td>
-                        <td class="TipInfoLabel">{{tip.label}}</td>
-                        <td class="TipInfoStatus">{{tip.submissionStatusStr}}</td>
-                        <td class="TipInfoSubmissionDate">{{tip.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                        <td class="TipInfoUpdateDate">{{tip.update_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                        <td class="TipInfoExpirationDate">
-                            <span *ngIf="!utils.isNever(tip.expiration_date)">{{tip.expiration_date | date:'dd-MM-yyyy HH:mm'}}</span>
-                            <span *ngIf="utils.isNever(tip.expiration_date)">-</span>
-                        </td>
-                        <td class="TipInfoLastAccess">
-                            <i *ngIf="tip.last_access >= tip.update_date" class="fa-solid fa-check" title="{{'The whistleblower has already read the last update' | translate}} ({{tip.last_access | date:'dd-MM-yyyy HH:mm'}})"></i>
-                            <i *ngIf="tip.last_access < tip.update_date" class="fa-solid fa-times" title="{{'The whistleblower has not read the last update yet' | translate}}">
-                            </i>
-                        </td>
-                        <td class="TipInfoComments">{{tip.comment_count}}</td>
-                        <td class="TipInfoFiles">{{tip.file_count}}</td>
-                        <td class="TipInfoIdentity" [ngSwitch]="tip.subscription">
-                            <i *ngSwitchCase="0" class="fa-solid fa-times"></i>
-                            <i *ngSwitchCase="1" class="fa-solid fa-check"></i>
-                            <ng-container *ngSwitchCase="2">
-                                <ng-container *ngIf="tip.data">
-                                    <i class="fa-solid fa-check underline" title="{{'Subscription date: ' + (tip.data.whistleblower_identity_date | date:'dd-MM-yyyy HH:mm')}}"></i>
-                                </ng-container>
-                                <ng-container *ngIf="!tip.data">
-                                    <i class="fa-solid fa-check underline"></i>
-                                </ng-container>
-                            </ng-container>
-                        </td>
-
-                        <td class="TipInfoRecipientCount">{{tip.receiver_count}}</td>
-                        <td class="TipInfoScore" *ngIf="appDataService.public.node.enable_scoring_system">
-                            <ng-container [ngSwitch]="tip.score">
-                                <span *ngSwitchCase="0">-</span>
-                                <span class="badge bg-primary" *ngSwitchCase="1">{{ 'Low' | translate }}</span>
-                                <span class="badge bg-primary" *ngSwitchCase="2">{{ 'Medium' | translate }}</span>
-                                <span class="badge bg-primary" *ngSwitchCase="3">{{ 'High' | translate }}</span>
-                            </ng-container>
-                        </td>
-                    </tr>
-                </ng-container>
-                </tbody>
-            </table>
-            <div class="text-center" *ngIf="filteredTips.length > itemsPerPage">
-                <ngb-pagination dir="ltr" class="d-flex justify-content-center" [collectionSize]="filteredTips.length" [(page)]="currentPage" [pageSize]="itemsPerPage">
-                    <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" title="{{'First' | translate}}"></i></ng-template>
-                    <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward-step" title="{{'Previous' | translate}}"></i></ng-template>
-                    <ng-template ngbPaginationNext><i class="fa-solid fa-forward-step" title="{{'Next' | translate}}"></i></ng-template>
-                    <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" title="{{'Last' | translate}}"></i></ng-template>
-                </ngb-pagination>
-            </div>
-            <div class="float-end">
-                <a class="btn btn-sm btn-link" type="button"
-                   *ngIf="filteredTips.length > 0"
-                   (click)="exportToCsv()">
-                  <i class="fa-solid fa-download"></i>
-                  <span>{{ 'Export' | translate }}</span>
-                </a>
-            </div>
+                @if (RTips.dataModel.length > 0) {
+                  <span class="dropdown-multi-select-container">
+                    <i class="fa-solid fa-filter" [ngClass]="{ filterSelected: checkFilter(dropdownContextModel) }" (click)="toggleChannelDropdown()"></i>
+                    <span [class.hidden]="!channelDropdownVisible">
+                      <ng-multiselect-dropdown [class.dropdown-visible]="channelDropdownVisible" [settings]="dropdownSettings" [data]="dropdownContextData" [(ngModel)]="dropdownContextModel" (ngModelChange)="onChanged(dropdownContextModel,'Channel')"></ng-multiselect-dropdown>
+                    </span>
+                  </span>
+                }
+              </th>
+            }
+            <th class="TipInfoLabel">
+              <span (click)="sortKey = 'label'; sortReverse = !sortReverse">
+                <i class="fa-solid fa-tag"></i>
+                <span>{{'Label' | translate}}</span>
+                @if (sortKey === 'label') {
+                  <span>
+                    @if (!sortReverse) {
+                      <span class="fa-solid fa-caret-down"></span>
+                    }
+                    @if (sortReverse) {
+                      <span class="fa-solid fa-caret-up"></span>
+                    }
+                  </span>
+                }
+              </span>
+            </th>
+            <th class="TipInfoStatus">
+              <span (click)="sortKey = 'submissionStatusStr'; sortReverse = !sortReverse">
+                <i class="fa-solid fa-dot-circle"></i>
+                <span>{{'Status' | translate}}</span>
+                @if (sortKey === 'submissionStatusStr') {
+                  <span>
+                    @if (!sortReverse) {
+                      <span class="fa-solid fa-caret-down"></span>
+                    }
+                    @if (sortReverse) {
+                      <span class="fa-solid fa-caret-up"></span>
+                    }
+                  </span>
+                }
+              </span>
+              @if (RTips.dataModel.length > 0) {
+                <span class="dropdown-multi-select-container">
+                  <i class="fa-solid fa-filter" [ngClass]="{ filterSelected: checkFilter(dropdownStatusModel) }" (click)="toggleStatusDropdown()"></i>
+                  <span [class.hidden]="!statusDropdownVisible">
+                    <ng-multiselect-dropdown [class.dropdown-visible]="statusDropdownVisible" [settings]="dropdownSettings" [data]="dropdownStatusData" [(ngModel)]="dropdownStatusModel" (ngModelChange)="onChanged(dropdownStatusModel,'Status')"></ng-multiselect-dropdown>
+                  </span>
+                </span>
+              }
+            </th>
+            <th class="TipInfoSubmissionDate">
+              <span (click)="sortKey = 'creation_date'; sortReverse = !sortReverse">
+                <i class="fa-solid fa-clock"></i>
+                <span>{{'Report date' | translate}}</span>
+                @if (sortKey === 'creation_date') {
+                  <span>
+                    @if (!sortReverse) {
+                      <span class="fa-solid fa-caret-down"></span>
+                    }
+                    @if (sortReverse) {
+                      <span class="fa-solid fa-caret-up"></span>
+                    }
+                  </span>
+                }
+              </span>
+              <span class="ngb-dtepicker-container ms-1">
+                <i class="fas fa-calendar" [ngClass]="{'calendar-active':  reportDateFilter}" (click)="reportDatePicker=!reportDatePicker;lastUpdatePicker=false;expirationDatePicker=false;statusDropdownVisible=false;channelDropdownVisible=false;scoreDropdownVisible=false;"></i>
+                <div [hidden]="!reportDatePicker">
+                  <ngbd-datepicker-range class="position-absolute d-block" [currentDates]="reportDateModel" (emitDateSelection)="onReportFilterChange($event)"></ngbd-datepicker-range>
+                </div>
+              </span>
+            </th>
+            <th class="TipInfoUpdateDate">
+              <span (click)="sortKey = 'update_date'; sortReverse = !sortReverse">
+                <i class="fa-solid fa-clock"></i>
+                <span>{{'Last update' | translate}}</span>
+                @if (sortKey === 'update_date') {
+                  <span>
+                    @if (!sortReverse) {
+                      <span class="fa-solid fa-caret-down"></span>
+                    }
+                    @if (sortReverse) {
+                      <span class="fa-solid fa-caret-up"></span>
+                    }
+                  </span>
+                }
+              </span>
+              <span class="ngb-dtepicker-container ms-1">
+                <i class="fas fa-calendar" [ngClass]="{'calendar-active':  updateDateFilter}" (click)="lastUpdatePicker=!lastUpdatePicker;reportDatePicker=false;expirationDatePicker=false;statusDropdownVisible=false;channelDropdownVisible=false;scoreDropdownVisible=false;"></i>
+                <div [hidden]="!lastUpdatePicker">
+                  <ngbd-datepicker-range class="position-absolute d-block" [currentDates]="updateDateModel" (emitDateSelection)="onUpdateFilterChange($event)"></ngbd-datepicker-range>
+                </div>
+              </span>
+            </th>
+            <th class="TipInfoExpirationDate">
+              <span (click)="sortKey = 'expiration_date'; sortReverse = !sortReverse">
+                <i class="fa-solid fa-hourglass"></i>
+                <span>{{'Expiration date' | translate}}</span>
+                @if (sortKey === 'expiration_date') {
+                  <span>
+                    @if (!sortReverse) {
+                      <span class="fa-solid fa-caret-down"></span>
+                    }
+                    @if (sortReverse) {
+                      <span class="fa-solid fa-caret-up"></span>
+                    }
+                  </span>
+                }
+              </span>
+              <span class="ngb-dtepicker-container ms-1">
+                <i class="fas fa-calendar" [ngClass]="{'calendar-active':  expiryDateFilter}" (click)="expirationDatePicker=!expirationDatePicker;reportDatePicker=false;lastUpdatePicker=false;statusDropdownVisible=false;channelDropdownVisible=false;scoreDropdownVisible=false;"></i>
+                <div [hidden]="!expirationDatePicker">
+                  <ngbd-datepicker-range class="position-absolute d-block" [currentDates]="expiryDateModel" (emitDateSelection)="onExpiryFilterChange($event)"></ngbd-datepicker-range>
+                </div>
+              </span>
+            </th>
+            <th class="TipInfoReadReceipt">
+              <i class="fa-solid fa-envelope-circle-check"></i>
+            </th>
+            <th class="TipInfoComments">
+              <i class="fa-solid fa-comment"></i>
+            </th>
+            <th class="TipInfoFiles">
+              <i class="fa-solid fa-file"></i>
+            </th>
+            <th class="TipInfoIdentity">
+              <i class="fa-solid fa-user"></i>
+            </th>
+            <th class="TipInfoRecipientCount">
+              <span (click)="sortKey = 'receiver_count'; sortReverse = !sortReverse">
+                <i class="fa-solid fa-users"></i>
+                <span></span>
+                @if (sortKey === 'receiver_count') {
+                  <span>
+                    @if (!sortReverse) {
+                      <span class="fa-solid fa-caret-down"></span>
+                    }
+                    @if (sortReverse) {
+                      <span class="fa-solid fa-caret-up"></span>
+                    }
+                  </span>
+                }
+              </span>
+            </th>
+            @if (appDataService.public.node.enable_scoring_system) {
+              <th class="TipInfoScore">
+                <span (click)="sortKey = 'score'; sortReverse = !sortReverse">
+                  <i class="fa-solid fa-flash"></i>
+                  <span>{{'Score' | translate}}</span>
+                  @if (sortKey === 'score') {
+                    <span>
+                      @if (!sortReverse) {
+                        <span class="fa-solid fa-caret-down"></span>
+                      }
+                      @if (sortReverse) {
+                        <span class="fa-solid fa-caret-up"></span>
+                      }
+                    </span>
+                  }
+                </span>
+                @if (RTips.dataModel.length > 0) {
+                  <span class="dropdown-multi-select-container">
+                    <i class="fa-solid fa-filter" [ngClass]="{ filterSelected: checkFilter(dropdownScoreModel) }" (click)="toggleScoreDropdown()"></i>
+                    <span [class.hidden]="!scoreDropdownVisible">
+                      <ng-multiselect-dropdown [class.dropdown-visible]="scoreDropdownVisible" [settings]="dropdownSettings" [data]="dropdownScoreData" [(ngModel)]="dropdownScoreModel" (ngModelChange)="onChanged(dropdownScoreModel,'Score')"></ng-multiselect-dropdown>
+                    </span>
+                  </span>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody id="tipListTableBody">
+          @for (tip of orderbyCast(filteredTips | orderBy:sortKey:sortReverse) | slice:((currentPage - 1) * itemsPerPage):((currentPage - 1) * itemsPerPage + itemsPerPage); let index = $index; track tip) {
+            <tr id="tip-{{index}}" [ngClass]="{'fw-bold': tip.updated, 'selectedTip': isSelected(tip.id),'disabled': !tip.accessible}" class="tip-action-open" (click)="utils.go('/reports/' + tip.id)">
+              <td>
+                @if (isSelected(tip.id)) {
+                  <span class="btn btn-sm btn-outline-secondary" (click)="tipSwitch(tip.id); $event.stopPropagation();">
+                    <i class="fa-solid fa-check-square"></i>
+                  </span>
+                }
+                @if (!isSelected(tip.id)) {
+                  <span class="btn btn-sm btn-outline-secondary" (click)="tipSwitch(tip.id); $event.stopPropagation();">
+                    <i class="fa-solid fa-square"></i>
+                  </span>
+                }
+              </td>
+              <td>
+                @if (tip.important) {
+                  <i class="fa-solid fa-star text-warning"></i>
+                }
+                <td>
+                  @if (!utils.isNever(tip.reminder_date)) {
+                    <i class="fa-solid fa-bell" [ngClass]="{'text-warning': utils.isDatePassed(tip.reminder_date)}"></i>
+                  }
+                </td>
+                <td class="TipInfoID">{{tip.progressive}}</td>
+                @if (appDataService.public.contexts.length > 1) {
+                  <td class="TipInfoContext">{{tip.context_name}}</td>
+                }
+                <td class="TipInfoLabel">{{tip.label}}</td>
+                <td class="TipInfoStatus">{{tip.submissionStatusStr}}</td>
+                <td class="TipInfoSubmissionDate">{{tip.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
+                <td class="TipInfoUpdateDate">{{tip.update_date | date:'dd-MM-yyyy HH:mm'}}</td>
+                <td class="TipInfoExpirationDate">
+                  @if (!utils.isNever(tip.expiration_date)) {
+                    <span>{{tip.expiration_date | date:'dd-MM-yyyy HH:mm'}}</span>
+                  }
+                  @if (utils.isNever(tip.expiration_date)) {
+                    <span>-</span>
+                  }
+                </td>
+                <td class="TipInfoLastAccess">
+                  @if (tip.last_access >= tip.update_date) {
+                    <i class="fa-solid fa-check" data-toggle="tooltip" title="{{'The whistleblower has already read the last update' | translate}} ({{tip.last_access | date:'dd-MM-yyyy HH:mm'}})"></i>
+                  }
+                  @if (tip.last_access < tip.update_date) {
+                    <i class="fa-solid fa-times" data-toggle="tooltip" title="{{'The whistleblower has not read the last update yet' | translate}}">
+                    </i>
+                  }
+                </td>
+                <td class="TipInfoComments">{{tip.comment_count}}</td>
+                <td class="TipInfoFiles">{{tip.file_count}}</td>
+                <td class="TipInfoIdentity">
+                  @switch (tip.subscription) {
+                    @case (0) {
+                      <i class="fa-solid fa-times"></i>
+                    }
+                    @case (1) {
+                      <i class="fa-solid fa-check"></i>
+                    }
+                    @case (2) {
+                      @if (tip.data) {
+                        <i class="fa-solid fa-check underline"  data-toggle="tooltip" title="{{'Subscription date: ' + (tip.data.whistleblower_identity_date | date:'dd-MM-yyyy HH:mm')}}"></i>
+                      }
+                      @if (!tip.data) {
+                        <i class="fa-solid fa-check underline"  data-toggle="tooltip"></i>
+                      }
+                    }
+                  }
+                </td>
+                <td class="TipInfoRecipientCount">{{tip.receiver_count}}</td>
+                @if (appDataService.public.node.enable_scoring_system) {
+                  <td class="TipInfoScore">
+                    @switch (tip.score) {
+                      @case (0) {
+                        <span>-</span>
+                      }
+                      @case (1) {
+                        <span class="badge bg-primary">{{ 'Low' | translate }}</span>
+                      }
+                      @case (2) {
+                        <span class="badge bg-primary">{{ 'Medium' | translate }}</span>
+                      }
+                      @case (3) {
+                        <span class="badge bg-primary">{{ 'High' | translate }}</span>
+                      }
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+        @if (filteredTips.length > itemsPerPage) {
+          <div class="text-center">
+            <ngb-pagination class="pagination-sm" [collectionSize]="filteredTips.length" [(page)]="currentPage" [pageSize]="itemsPerPage" [maxSize]="10" [rotate]="true" [ellipses]="true" [boundaryLinks]="true">
+              <ng-template ngbPaginationPrevious> &lt; {{ 'Previous' | translate }}
+              </ng-template>
+              <ng-template ngbPaginationNext>
+                {{ 'Next' | translate }} &gt;
+              </ng-template>
+              <ng-template ngbPaginationFirst> &lt;&lt; {{ 'First' | translate }}
+              </ng-template>
+              <ng-template ngbPaginationLast>
+                {{ 'Last' | translate }} &gt;&gt;
+              </ng-template>
+            </ngb-pagination>
+          </div>
+        }
+        <div class="float-end">
+          @if (filteredTips.length > 0) {
+            <a class="btn btn-sm btn-link" type="button"
+              (click)="exportToCsv()">
+              <i class="fa-solid fa-download"></i>
+              <span>{{ 'Export' | translate }}</span>
+            </a>
+          }
         </div>
+      </div>
     </div>
-</ng-container>
+  }
diff --git a/client/app/src/pages/recipient/tips/tips.component.ts b/client/app/src/pages/recipient/tips/tips.component.ts
index dc74f678e2..a965539b19 100644
--- a/client/app/src/pages/recipient/tips/tips.component.ts
+++ b/client/app/src/pages/recipient/tips/tips.component.ts
@@ -1,30 +1,49 @@
-import {Component, HostListener, OnInit} from "@angular/core";
+import { Component, HostListener, OnInit, inject } from "@angular/core";
 import {AppConfigService} from "@app/services/root/app-config.service";
-import {NgbDate, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { NgbDate, NgbModal, NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast } from "@ng-bootstrap/ng-bootstrap";
 import {AppDataService} from "@app/app-data.service";
 import {GrantAccessComponent} from "@app/shared/modals/grant-access/grant-access.component";
 import {RevokeAccessComponent} from "@app/shared/modals/revoke-access/revoke-access.component";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {RTipsResolver} from "@app/shared/resolvers/r-tips-resolver.service";
 import {UtilsService} from "@app/shared/services/utils.service";
-import {TranslateService} from "@ngx-translate/core";
-import {IDropdownSettings} from "ng-multiselect-dropdown";
+import { TranslateService, TranslateModule } from "@ngx-translate/core";
+import { IDropdownSettings, NgMultiSelectDropDownModule } from "ng-multiselect-dropdown";
 import {filter, orderBy} from "lodash-es";
 import {TokenResource} from "@app/shared/services/token-resource.service";
-import {Router} from "@angular/router";
+import { Router, RouterLink } from "@angular/router";
 import {rtipResolverModel} from "@app/models/resolvers/rtips-resolver-model";
 import {Receiver} from "@app/models/reciever/reciever-tip-data";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {Observable, from, switchMap} from "rxjs";
 import {HttpClient, HttpResponse} from "@angular/common/http";
-import {formatDate} from "@angular/common";
+import { formatDate, NgClass, SlicePipe, DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { DateRangeSelectorComponent } from "../../../shared/components/date-selector/date-selector.component";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-tips",
-  templateUrl: "./tips.component.html"
+    selector: "src-tips",
+    templateUrl: "./tips.component.html",
+    standalone: true,
+    imports: [RouterLink, FormsModule, NgClass, NgMultiSelectDropDownModule, DateRangeSelectorComponent, NgbPagination, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationFirst, NgbPaginationLast, SlicePipe, DatePipe, TranslateModule, TranslatorPipe, OrderByPipe]
 })
 export class TipsComponent implements OnInit {
+  private http = inject(HttpClient);
+  protected authenticationService = inject(AuthenticationService);
+  protected httpService = inject(HttpService);
+  private appConfigServices = inject(AppConfigService);
+  private router = inject(Router);
+  protected RTips = inject(RTipsResolver);
+  protected preference = inject(PreferenceResolver);
+  private modalService = inject(NgbModal);
+  protected utils = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+  private translateService = inject(TranslateService);
+  private tokenResourceService = inject(TokenResource);
+
   search: string | undefined;
   selectedTips: string[] = [];
   filteredTips: rtipResolverModel[];
@@ -62,10 +81,6 @@ export class TipsComponent implements OnInit {
     searchPlaceholderText: this.translateService.instant("Search")
   };
 
-  constructor(private http: HttpClient,protected authenticationService: AuthenticationService, protected httpService: HttpService, private appConfigServices: AppConfigService, private router: Router, protected RTips: RTipsResolver, protected preference: PreferenceResolver, private modalService: NgbModal, protected utils: UtilsService, protected appDataService: AppDataService, private translateService: TranslateService, private tokenResourceService: TokenResource) {
-
-  }
-
   ngOnInit() {
     if (!this.RTips.dataModel) {
       this.router.navigate(["/recipient/home"]).then();
@@ -428,6 +443,6 @@ export class TipsComponent implements OnInit {
       'Number of Files',
       'Subscription',
       'Number of Recipients'
-    ].map(header => header ? this.translateService.instant(header) : '');
+    ].map(header => this.translateService.instant(header));
   }
 }
diff --git a/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.html b/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.html
index 1b526c7413..6d0a0874fe 100644
--- a/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.html
+++ b/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.html
@@ -1,48 +1,80 @@
 <div id="TipInfoBox" class="card card-default">
-    <div class="card-header clearfix" [attr.data-cy]="'identity_toggle'" (click)="toggleCollapse(); utilsService.stopPropagation($event)">
-        <span>{{'Identity' | translate}}</span>
-        <span class="float-end">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-        </span>
-    </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngIf="tipService.tip.iar && tipService.tip.iar.reply !== 'authorized'">
-            <div>
-                <label>{{"Access to the whistleblower's identity has been requested to the custodian." | translate}}</label>
-            </div>
-            <div>
-                <label>{{'Date of the request' | translate}}</label>
-                <span>:</span>
-                <span>{{tipService.tip.iar.request_date | date:'dd-MM-yyyy HH:mm'}}</span>
-            </div>
+  <div class="card-header clearfix" [attr.data-cy]="'identity_toggle'" (click)="toggleCollapse(); utilsService.stopPropagation($event)">
+    <span>{{'Identity' | translate}}</span>
+    <span class="float-end">
+      @if (!collapsed) {
+        <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+      }
+      @if (collapsed) {
+        <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+      }
+    </span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      @if (tipService.tip.iar && tipService.tip.iar.reply !== 'authorized') {
+        <div>
+          <div>
+            <label>{{"Access to the whistleblower's identity has been requested to the custodian." | translate}}</label>
+          </div>
+          <div>
+            <label>{{'Date of the request' | translate}}</label>
+            <span>:</span>
+            <span>{{tipService.tip.iar.request_date | date:'dd-MM-yyyy HH:mm'}}</span>
+          </div>
+          <div>
+            <label>{{'Request status' | translate}}</label>
+            <span>:</span>
+            <span>
+              @switch (tipService.tip.iar.reply) {
+                @case ('pending') {
+                  <span>{{ 'Waiting for authorization' | translate }}</span>
+                }
+                @case ('denied') {
+                  <span>{{ 'Denied' | translate }}</span>
+                }
+              }
+            </span>
+            <div><label>{{'Motivation' | translate}}</label>:<span> {{tipService.tip.iar.request_motivation}}</span></div>
+          </div>
+          @if (tipService.tip.iar && tipService.tip.iar.reply === 'denied') {
             <div>
-                <label>{{'Request status' | translate}}</label>
-                <span>:</span>
-                <span [ngSwitch]="tipService.tip.iar.reply">
-                    <span *ngSwitchCase="'pending'">{{ 'Waiting for authorization' | translate }}</span>
-                    <span *ngSwitchCase="'denied'">{{ 'Denied' | translate }}</span>
-                </span>
-                <div><label>{{'Motivation' | translate}}</label>:<span> {{tipService.tip.iar.request_motivation}}</span></div>
-            </div>
-            <div *ngIf="tipService.tip.iar && tipService.tip.iar.reply === 'denied'">
-                <label>{{'Reply motivation' | translate}}</label>: <span>{{tipService.tip.iar.reply_motivation}}</span>
+              <label>{{'Reply motivation' | translate}}</label>: <span>{{tipService.tip.iar.reply_motivation}}</span>
             </div>
+          }
         </div>
-        <span *ngIf="!tipService.tip?.data?.whistleblower_identity_provided">-</span>
-        <div *ngIf="tipService.tip.data.whistleblower_identity_provided">
-            <div *ngIf="tipService.tip.iar && tipService.tip.iar.reply === 'authorized'">
-                <div *ngFor="let field of tipService.tip.whistleblower_identity_field.children ; let index = index">
-                    <src-tip-field [fields]=field [fieldAnswers]=tipService.tip.data.whistleblower_identity [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode" [index]="index"></src-tip-field>
+      }
+      @if (!tipService.tip.data.whistleblower_identity_provided) {
+        <span>-</span>
+      }
+      @if (tipService.tip.data.whistleblower_identity_provided) {
+        <div>
+          @if (tipService.tip.iar && tipService.tip.iar.reply === 'authorized') {
+            <div>
+              @for (field of tipService.tip.whistleblower_identity_field.children ; track field; let index = $index) {
+                <div>
+                  <src-tip-field [fields]=field [fieldAnswers]=tipService.tip.data.whistleblower_identity [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode" [index]="index"></src-tip-field>
                 </div>
+              }
             </div>
-            <div *ngIf="!tipService.tip.iar || tipService.tip.iar.reply === 'denied'">
-                <button *ngIf="tipService.tip.custodian" class="btn btn-sm btn-primary" id="identity_access_request" (click)="fileIdentityAccessRequest()">{{"Request access to the whistleblower's identity" | translate}}</button>
-                <button *ngIf="!tipService.tip.custodian" class="btn btn-sm btn-primary" (click)="accessIdentity()">{{'Show' | translate}}</button>
+          }
+          @if (!tipService.tip.iar || tipService.tip.iar.reply === 'denied') {
+            <div>
+              @if (tipService.tip.custodian) {
+                <button class="btn btn-sm btn-primary" id="identity_access_request" (click)="fileIdentityAccessRequest()">{{"Request access to the whistleblower's identity" | translate}}</button>
+              }
+              @if (!tipService.tip.custodian) {
+                <button class="btn btn-sm btn-primary" (click)="accessIdentity()">{{'Show' | translate}}</button>
+              }
             </div>
-            <div *ngIf="tipService.tip.data.whistleblower_identity_date !== tipService.tip.creation_date" class="mt-3" [ngClass]="{'nested': tipService.tip.iar && tipService.tip.iar.reply === 'authorized'}">
-                <span>{{ 'Subscription date'|translate }}</span> :  <span>{{tipService.tip.data.whistleblower_identity_date | date:'dd-MM-yyyy HH:mm'}}</span>
+          }
+          @if (tipService.tip.data.whistleblower_identity_date !== tipService.tip.creation_date) {
+            <div class="mt-3" [ngClass]="{'nested': tipService.tip.iar && tipService.tip.iar.reply === 'authorized'}">
+              <span>{{ 'Subscription date'|translate }}</span> :  <span>{{tipService.tip.data.whistleblower_identity_date | date:'dd-MM-yyyy HH:mm'}}</span>
             </div>
+          }
         </div>
+      }
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.ts b/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.ts
index 3495750258..bae00ef397 100644
--- a/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.ts
+++ b/client/app/src/pages/recipient/whistleblower-identity-reciever/whistle-blower-identity-receiver.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 import {
@@ -6,20 +6,29 @@ import {
 } from "@app/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.ompoent";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass, DatePipe } from "@angular/common";
+import { TipFieldComponent } from "../../../shared/partials/tip-field/tip-field.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "src-whistleblower-identity-reciever",
-  templateUrl: "./whistle-blower-identity-receiver.component.html"
+    selector: "src-whistleblower-identity-reciever",
+    templateUrl: "./whistle-blower-identity-receiver.component.html",
+    standalone: true,
+    imports: [TipFieldComponent, NgClass, DatePipe, TranslateModule, TranslatorPipe]
 })
 export class WhistleBlowerIdentityReceiverComponent {
+  protected tipService = inject(ReceiverTipService);
+  protected utilsService = inject(UtilsService);
+  private httpService = inject(HttpService);
+  private modalService = inject(NgbModal);
+  private utils = inject(UtilsService);
+
   @Input() redactOperationTitle: string;
   @Input() redactMode: boolean;
   collapsed: boolean = true;
 
-  constructor(protected tipService: ReceiverTipService, protected utilsService: UtilsService, private httpService: HttpService, private modalService: NgbModal, private utils: UtilsService) {
-  }
-
   public toggleCollapse() {
     this.collapsed = !this.collapsed;
   }
diff --git a/client/app/src/pages/signup/signup-routing.module.ts b/client/app/src/pages/signup/signup-routing.module.ts
deleted file mode 100644
index f6f85820b9..0000000000
--- a/client/app/src/pages/signup/signup-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {SignupComponent} from "@app/pages/signup/signup/signup.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: SignupComponent,
-    pathMatch: "full",
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class SignupRoutingModule {
-}
diff --git a/client/app/src/pages/signup/signup.module.ts b/client/app/src/pages/signup/signup.module.ts
deleted file mode 100644
index b962de3089..0000000000
--- a/client/app/src/pages/signup/signup.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {NgModule} from "@angular/core";
-import {MarkdownModule} from "ngx-markdown";
-import {CommonModule} from "@angular/common";
-import {SignupComponent} from "@app/pages/signup/signup/signup.component";
-import {TranslateModule} from "@ngx-translate/core";
-import {SignupdefaultComponent} from "@app/pages/signup/templates/signupdefault/signupdefault.component";
-import {SharedModule} from "@app/shared.module";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {TosComponent} from "@app/pages/signup/templates/tos/tos.component";
-import {WbpaComponent} from "@app/pages/signup/templates/wbpa/wbpa.component";
-import {ActivationComponent} from "@app/pages/signup/templates/activation/activation.component";
-
-
-@NgModule({
-  declarations: [
-    SignupComponent,
-    SignupdefaultComponent,
-    TosComponent,
-    WbpaComponent,
-    ActivationComponent
-  ],
-  imports: [
-    CommonModule,
-    MarkdownModule,
-    TranslateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgSelectModule,
-    SharedModule
-  ]
-})
-export class SignupModule {
-}
diff --git a/client/app/src/pages/signup/signup.routes.ts b/client/app/src/pages/signup/signup.routes.ts
new file mode 100644
index 0000000000..c2e565f5b5
--- /dev/null
+++ b/client/app/src/pages/signup/signup.routes.ts
@@ -0,0 +1,9 @@
+import {Routes} from "@angular/router";
+
+export const signupRoutes: Routes = [
+  {
+    path: "",
+    loadComponent: () => import('@app/pages/signup/signup/signup.component').then(m => m.SignupComponent),
+    pathMatch: "full",
+  },
+];
\ No newline at end of file
diff --git a/client/app/src/pages/signup/signup/signup.component.html b/client/app/src/pages/signup/signup/signup.component.html
index f693bd5707..f07b6a44c5 100644
--- a/client/app/src/pages/signup/signup/signup.component.html
+++ b/client/app/src/pages/signup/signup/signup.component.html
@@ -1,24 +1,36 @@
 <div class="row">
-    <div *ngIf="step === 1" class="col-md-6 wizard-block" [ngSwitch]="appDataService.public.node.mode">
-        <div *ngSwitchCase="'default'">
+  @if (step === 1) {
+    <div class="col-md-6 wizard-block">
+      @switch (appDataService.public.node.mode) {
+        @case ('default') {
+          <div>
             <src-signupdefault (complete)="complete()" [signup]="signup"></src-signupdefault>
-        </div>
-        <div *ngSwitchCase="'demo'">
+          </div>
+        }
+        @case ('demo') {
+          <div>
             <src-signupdefault (complete)="complete()" [signup]="signup"></src-signupdefault>
-        </div>
-        <div *ngSwitchCase="'wbpa'">
+          </div>
+        }
+        @case ('wbpa') {
+          <div>
             <src-wbpa (updateSubdomain)=updateSubdomain() (complete)="complete()" [signup]="signup"></src-wbpa>
-        </div>
+          </div>
+        }
+      }
     </div>
-    <div *ngIf="step === 2" class="col-md-12 wizard-block">
-        <div class="congratulations">
-            <div class="title">{{'Success!'|translate}}</div>
-            <div>
-                <span>{{'Your whistleblowing platform is almost ready!'|translate}}</span>
-                <span>{{'Check your inbox to activate it.'|translate}}</span>
-                <br />
-                <span>{{'If not activated within 24 hours the platform will be automatically deleted.'|translate}}</span>
-            </div>
+  }
+  @if (step === 2) {
+    <div class="col-md-12 wizard-block">
+      <div class="congratulations">
+        <div class="title">{{'Success!'|translate}}</div>
+        <div>
+          <span>{{'Your whistleblowing platform is almost ready!'|translate}}</span>
+          <span>{{'Check your inbox to activate it.'|translate}}</span>
+          <br />
+          <span>{{'If not activated within 24 hours the platform will be automatically deleted.'|translate}}</span>
         </div>
+      </div>
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/signup/signup/signup.component.ts b/client/app/src/pages/signup/signup/signup.component.ts
index 508a8e1486..94147f3dd1 100644
--- a/client/app/src/pages/signup/signup/signup.component.ts
+++ b/client/app/src/pages/signup/signup/signup.component.ts
@@ -1,14 +1,25 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {Signup} from "@app/models/component-model/signup";
 
+import { SignupdefaultComponent } from "../templates/signupdefault/signupdefault.component";
+import { WbpaComponent } from "../templates/wbpa/wbpa.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-signup",
-  templateUrl: "./signup.component.html"
+    selector: "src-signup",
+    templateUrl: "./signup.component.html",
+    standalone: true,
+    imports: [SignupdefaultComponent, WbpaComponent, TranslateModule, TranslatorPipe]
 })
 export class SignupComponent implements OnInit {
+  protected appDataService = inject(AppDataService);
+  private httpService = inject(HttpService);
+  private appConfig = inject(AppConfigService);
+
   hostname = "";
   completed = false;
   step = 1;
@@ -28,9 +39,6 @@ export class SignupComponent implements OnInit {
     "tos2": false
   };
 
-  constructor(protected appDataService: AppDataService, private httpService: HttpService, private appConfig: AppConfigService) {
-  }
-
   ngOnInit() {
     this.appConfig.routeChangeListener();
   }
diff --git a/client/app/src/pages/signup/templates/activation/activation.component.ts b/client/app/src/pages/signup/templates/activation/activation.component.ts
index 5b7a452b24..a56427256e 100644
--- a/client/app/src/pages/signup/templates/activation/activation.component.ts
+++ b/client/app/src/pages/signup/templates/activation/activation.component.ts
@@ -1,15 +1,19 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {ActivatedRoute} from "@angular/router";
 import {HttpService} from "@app/shared/services/http.service";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-activation",
-  templateUrl: "./activation.component.html"
+    selector: "src-activation",
+    templateUrl: "./activation.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class ActivationComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private httpService = inject(HttpService);
 
-  constructor(private route: ActivatedRoute, private httpService: HttpService) {
-  }
 
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
diff --git a/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.html b/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.html
index f62669564c..ed40898f71 100644
--- a/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.html
+++ b/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.html
@@ -1,64 +1,68 @@
 <form #signupform="ngForm" [ngClass]="{ 'was-validated': validated }" novalidate>
-    <div class="row">
-        <div class="col-md-12">
-            <div class="title">{{'Sign up'|translate}}</div>
-        </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="title">{{'Sign up'|translate}}</div>
     </div>
-    <div class="row">
-        <div class="col-md-12 form-group">
-            <label>
-                <span>{{'Site'|translate}}</span>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            </label>
-            <div class="input-group">
-                <input name="subdomain" class="form-control" [(ngModel)]="signup.subdomain" type="text" subdomainvalidators required>
-                <span class="input-group-append">
-                    <span class="input-group-text">.{{appDataService.public.node.rootdomain}}</span>
-                </span>
-            </div>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 form-group">
+      <label>
+        <span>{{'Site'|translate}}</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <div class="input-group">
+        <input name="subdomain" class="form-control" [(ngModel)]="signup.subdomain" type="text" subdomainvalidators required>
+        <span class="input-group-append">
+          <span class="input-group-text">.{{appDataService.public.node.rootdomain}}</span>
+        </span>
+      </div>
     </div>
-    <div class="row">
-        <div class="col-md-6 form-group">
-            <label>{{'Name'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="name" class="form-control" [(ngModel)]="signup.name" type="text" required>
-        </div>
-        <div class="col-md-6 form-group">
-            <label>{{'Surname'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="surname" class="form-control" [(ngModel)]="signup.surname" type="text" required>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 form-group">
+      <label>{{'Name'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="name" class="form-control" [(ngModel)]="signup.name" type="text" required>
     </div>
-    <div class="row">
-        <div class="col-md-6 form-group">
-            <label>
-                <span>{{'Email address'|translate}}</span>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            </label>
-            <input #mail_address="ngModel" name="mail_address" class="form-control" [(ngModel)]="signup.email" type="email" [ngClass]="{'is-invalid': validated && mail_address.invalid}" [pattern]="emailRegex" required>
-            <div class="text-danger" *ngIf="validated && mail_address?.errors?.['pattern']">
-                <span>{{'Invalid email address'|translate}}</span>
-            </div>
-        </div>
-        <div class="col-md-6 form-group">
-            <label>
-                <span>{{'Email address'|translate}} ({{'Confirmation'|translate}})</span>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            </label>
-            <input name="email" class="form-control" [(ngModel)]="confirmation_email" disableCcp="" type="email" [ngClass]="{'is-invalid': validated && signup.email !== confirmation_email}" required>
-            <div class="text-danger" *ngIf="validated && signupform && mail_address.valid && signup.email !== confirmation_email">
-                <span>{{'Invalid confirmation'|translate}}</span>
-            </div>
+    <div class="col-md-6 form-group">
+      <label>{{'Surname'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="surname" class="form-control" [(ngModel)]="signup.surname" type="text" required>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 form-group">
+      <label>
+        <span>{{'Email address'|translate}}</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <input #mail_address="ngModel" name="mail_address" class="form-control" [(ngModel)]="signup.email" type="email" [ngClass]="{'is-invalid': validated && mail_address.invalid}" [pattern]="emailRegex" required>
+      @if (validated && mail_address?.errors?.['pattern']) {
+        <div class="text-danger">
+          <span>{{'Invalid email address'|translate}}</span>
         </div>
+      }
     </div>
-    <src-tos [signup]="signup" [signupform]="signupform"></src-tos>
-    <div class="row">
-        <div class="col-md-12">
-            <button class="ButtonNext btn btn-primary" type="submit" (click)="(validated = true) && !signupform.invalid && complete.emit()">
-                <i class="fa-solid fa-check"></i>
-                <span>{{'Proceed'|translate}}</span>
-            </button>
+    <div class="col-md-6 form-group">
+      <label>
+        <span>{{'Email address'|translate}} ({{'Confirmation'|translate}})</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <input name="email" class="form-control" [(ngModel)]="confirmation_email" disableCcp="" type="email" [ngClass]="{'is-invalid': validated && signup.email !== confirmation_email}" required>
+      @if (validated && signupform && mail_address.valid && signup.email !== confirmation_email) {
+        <div class="text-danger">
+          <span>{{'Invalid confirmation'|translate}}</span>
         </div>
+      }
+    </div>
+  </div>
+  <src-tos [signup]="signup" [signupform]="signupform"></src-tos>
+  <div class="row">
+    <div class="col-md-12">
+      <button class="ButtonNext btn btn-primary" type="submit" (click)="(validated = true) && !signupform.invalid && complete.emit()">
+        <i class="fa-solid fa-check"></i>
+        <span>{{'Proceed'|translate}}</span>
+      </button>
     </div>
+  </div>
 </form>
diff --git a/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.ts b/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.ts
index b0ef7d895d..53a737dd9c 100644
--- a/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.ts
+++ b/client/app/src/pages/signup/templates/signupdefault/signupdefault.component.ts
@@ -1,13 +1,24 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {Signup} from "@app/models/component-model/signup";
 import * as Constants from "@app/shared/constants/constants";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { SubdomainValidatorDirective } from "../../../../shared/directive/subdomain-validator.directive";
+import { DisableCcpDirective } from "../../../../shared/directive/disable-ccp.directive";
+import { TosComponent } from "../tos/tos.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-signupdefault",
-  templateUrl: "./signupdefault.component.html"
+    selector: "src-signupdefault",
+    templateUrl: "./signupdefault.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, SubdomainValidatorDirective, DisableCcpDirective, TosComponent, TranslateModule, TranslatorPipe]
 })
 export class SignupdefaultComponent implements OnInit {
+  protected appDataService = inject(AppDataService);
+
 
   @Input() signup: Signup;
   @Output() complete: EventEmitter<any> = new EventEmitter<any>();
@@ -17,9 +28,6 @@ export class SignupdefaultComponent implements OnInit {
   validated = false;
   mail: string;
 
-  constructor(protected appDataService: AppDataService) {
-  }
-
   ngOnInit(): void {
     this.emailRegex = Constants.Constants.emailRegexp;
   }
diff --git a/client/app/src/pages/signup/templates/tos/tos.component.html b/client/app/src/pages/signup/templates/tos/tos.component.html
index 9ee1ea70bb..ceb19629e4 100644
--- a/client/app/src/pages/signup/templates/tos/tos.component.html
+++ b/client/app/src/pages/signup/templates/tos/tos.component.html
@@ -1,20 +1,24 @@
 <div class="row">
-    <div id="SignupTos1" class="col-md-12 form-group" *ngIf="appDataService.public.node.signup_tos1_enable">
-        <label>{{appDataService.public.node.signup_tos1_title}}</label>
-        <div class="tos-text">{{appDataService.public.node.signup_tos1_text}}</div>
-        <div class="">
-            <input name="tos1" class="form-check-input" type="checkbox" [(ngModel)]="signup.tos1" required />
-            <label class="form-check-label"><markdown [data]="appDataService.public.node.signup_tos1_checkbox_label | stripHtml"></markdown></label>
-        </div>
+  @if (appDataService.public.node.signup_tos1_enable) {
+    <div id="SignupTos1" class="col-md-12 form-group">
+      <label>{{appDataService.public.node.signup_tos1_title}}</label>
+      <div class="tos-text">{{appDataService.public.node.signup_tos1_text}}</div>
+      <div class="">
+        <input name="tos1" class="form-check-input" type="checkbox" [(ngModel)]="signup.tos1" required />
+        <label class="form-check-label"><markdown [data]="appDataService.public.node.signup_tos1_checkbox_label | stripHtml"></markdown></label>
+      </div>
     </div>
+  }
 </div>
 <div class="row">
-    <div id="SignupTos2" class="col-md-12 form-group" *ngIf="appDataService.public.node.signup_tos2_enable">
-        <label>{{appDataService.public.node.signup_tos2_title}}</label>
-        <div class="tos-text"><markdown [data]="appDataService.public.node.signup_tos1_checkbox_label | stripHtml"></markdown></div>
-        <div class="">
-            <input name="tos2" class="form-check-input" type="checkbox" [(ngModel)]="signup.tos2" required />
-            <label class="form-check-label"><markdown [data]="appDataService.public.node.signup_tos2_checkbox_label | stripHtml"></markdown></label>
-        </div>
+  @if (appDataService.public.node.signup_tos2_enable) {
+    <div id="SignupTos2" class="col-md-12 form-group">
+      <label>{{appDataService.public.node.signup_tos2_title}}</label>
+      <div class="tos-text"><markdown [data]="appDataService.public.node.signup_tos1_checkbox_label | stripHtml"></markdown></div>
+      <div class="">
+        <input name="tos2" class="form-check-input" type="checkbox" [(ngModel)]="signup.tos2" required />
+        <label class="form-check-label"><markdown [data]="appDataService.public.node.signup_tos2_checkbox_label | stripHtml"></markdown></label>
+      </div>
     </div>
+  }
 </div>
diff --git a/client/app/src/pages/signup/templates/tos/tos.component.ts b/client/app/src/pages/signup/templates/tos/tos.component.ts
index dbf78e7b46..3d9f7d93b1 100644
--- a/client/app/src/pages/signup/templates/tos/tos.component.ts
+++ b/client/app/src/pages/signup/templates/tos/tos.component.ts
@@ -1,17 +1,21 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
-import {ControlContainer, NgForm} from "@angular/forms";
+import { ControlContainer, NgForm, FormsModule } from "@angular/forms";
 import {Signup} from "@app/models/component-model/signup";
 
+import { MarkdownComponent } from "ngx-markdown";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+
 @Component({
-  selector: "src-tos",
-  templateUrl: "./tos.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
+    selector: "src-tos",
+    templateUrl: "./tos.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [FormsModule, MarkdownComponent, StripHtmlPipe]
 })
 export class TosComponent {
+  protected appDataService = inject(AppDataService);
+
   @Input() signup: Signup;
   @Input() signupform: NgForm;
-
-  constructor(protected appDataService: AppDataService) {
-  }
 }
diff --git a/client/app/src/pages/signup/templates/wbpa/wbpa.component.html b/client/app/src/pages/signup/templates/wbpa/wbpa.component.html
index 3b2a56a871..fc85b4cdc1 100644
--- a/client/app/src/pages/signup/templates/wbpa/wbpa.component.html
+++ b/client/app/src/pages/signup/templates/wbpa/wbpa.component.html
@@ -1,109 +1,115 @@
 <form #signupform="ngForm" [ngClass]="{'was-validated': validated}" novalidate>
-    <div class="row">
-        <div class="col-md-12">
-            <div class="title">{{'Sign up'|translate}}</div>
-        </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="title">{{'Sign up'|translate}}</div>
     </div>
-    <div class="row">
-        <div class="col-md-6 form-group">
-            <label>{{'Name'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="name" class="form-control" [(ngModel)]="signup.name" type="text" required>
-        </div>
-        <div class="col-md-6 form-group">
-            <label>{{'Surname'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="surname" class="form-control" [(ngModel)]="signup.surname" type="text" required>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 form-group">
+      <label>{{'Name'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="name" class="form-control" [(ngModel)]="signup.name" type="text" required>
     </div>
-    <div class="row">
-        <div class="col-md-6 form-group">
-            <label>{{'Phone number'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="phonenumber" #phone="ngModel" class="form-control" [(ngModel)]="signup.phone" type="text" [pattern]="Constants.Constants.phoneNumberRegexp" required>
-            <div class="text-danger" *ngIf="phone?.errors?.['pattern']">
-                <span>{{'Invalid phone number'|translate}}</span>
-            </div>
-        </div>
+    <div class="col-md-6 form-group">
+      <label>{{'Surname'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="surname" class="form-control" [(ngModel)]="signup.surname" type="text" required>
     </div>
-    <div class="row">
-        <div class="col-md-6 form-group">
-            <label>
-                <span>{{'Email address'|translate}}</span>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            </label>
-            <div>
-                <input name="email" #email="ngModel" class="form-control" [(ngModel)]="signup.email" [pattern]="Constants.Constants.emailRegexp" type="email" required>
-                <div class="text-danger" *ngIf="email?.errors?.['pattern']">
-                    <span>{{'Invalid email address'|translate}}</span>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6 form-group">
-            <label>
-                <span>{{'Email address'|translate}} ({{'Confirm'|translate}})</span>
-		<span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            </label>
-            <div>
-                <input name="email" class="form-control" [(ngModel)]="confirmation_email" disableCcp type="email" required>
-                <div class="text-danger" *ngIf="validated && signupform && email.valid && signup.email !== confirmation_email">
-                    <span>{{'Invalid confirmation'|translate}}</span>
-                </div>
-            </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 form-group">
+      <label>{{'Phone number'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="phonenumber" #phone="ngModel" class="form-control" [(ngModel)]="signup.phone" type="text" [pattern]="Constants.Constants.phoneNumberRegexp" required>
+      @if (phone?.errors?.['pattern']) {
+        <div class="text-danger">
+          <span>{{'Invalid phone number'|translate}}</span>
         </div>
+      }
     </div>
-    <div class="row">
-        <div class="col-md-12">
-            <label class="title">{{'Organization'|translate}}</label>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 form-group">
+      <label>
+        <span>{{'Email address'|translate}}</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <div>
+        <input name="email" #email="ngModel" class="form-control" [(ngModel)]="signup.email" [pattern]="Constants.Constants.emailRegexp" type="email" required>
+        @if (email?.errors?.['pattern']) {
+          <div class="text-danger">
+            <span>{{'Invalid email address'|translate}}</span>
+          </div>
+        }
+      </div>
     </div>
-    <div class="row">
-        <div class="col-md-12 form-group">
-            <label>{{'Name'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="organization_name" class="form-control" [(ngModel)]="signup.organization_name" type="text" (ngModelChange)="updateSubdomain.emit()" required>
-        </div>
+    <div class="col-md-6 form-group">
+      <label>
+        <span>{{'Email address'|translate}} ({{'Confirm'|translate}})</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <div>
+        <input name="email" class="form-control" [(ngModel)]="confirmation_email" disableCcp type="email" required>
+        @if (validated && signupform && email.valid && signup.email !== confirmation_email) {
+          <div class="text-danger">
+            <span>{{'Invalid confirmation'|translate}}</span>
+          </div>
+        }
+      </div>
     </div>
-    <div class="row">
-        <div class="col-md-12 form-group">
-            <label>{{'Address'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="organization_location" class="form-control" [(ngModel)]="signup.organization_location" type="text" required>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <label class="title">{{'Organization'|translate}}</label>
     </div>
-    <div class="row">
-        <div class="col-md-6 form-group">
-            <label>{{'Fiscal code'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="tax_code" class="form-control" [(ngModel)]="signup.organization_tax_code" type="text" [required]="!signup.organization_tax_code && !signup.organization_vat_code">
-        </div>
-        <div class="col-md-6 form-group">
-            <label>{{'Tax code'|translate}}</label>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            <input name="vat_code" class="form-control" [(ngModel)]="signup.organization_vat_code" type="text" [required]="!signup.organization_tax_code && !signup.organization_vat_code">
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 form-group">
+      <label>{{'Name'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="organization_name" class="form-control" [(ngModel)]="signup.organization_name" type="text" (ngModelChange)="updateSubdomain.emit()" required>
     </div>
-    <div class="row">
-        <div class="col-md-12 form-group">
-            <label>
-                <span>{{'Site'|translate}}</span>
-                <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-            </label>
-            <div class="input-group">
-                <input name="subdomain" class="form-control" [(ngModel)]="signup.subdomain" type="text" subdomainvalidators required>
-                <span class="input-group-append">
-                    <span class="input-group-text">.{{appDataService.public.node.rootdomain}}</span>
-                </span>
-            </div>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 form-group">
+      <label>{{'Address'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="organization_location" class="form-control" [(ngModel)]="signup.organization_location" type="text" required>
     </div>
-    <src-tos [signup]="signup"></src-tos>
-    <div class="row">
-        <div class="col-md-12">
-            <button class="ButtonNext btn btn-primary" type="submit" (click)="(validated = true) && !signupform.invalid && complete.emit()">
-                <i class="fa-solid fa-check"></i>
-                <span>{{'Proceed'|translate}}</span>
-            </button>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 form-group">
+      <label>{{'Fiscal code'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="tax_code" class="form-control" [(ngModel)]="signup.organization_tax_code" type="text" [required]="!signup.organization_tax_code && !signup.organization_vat_code">
+    </div>
+    <div class="col-md-6 form-group">
+      <label>{{'Tax code'|translate}}</label>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      <input name="vat_code" class="form-control" [(ngModel)]="signup.organization_vat_code" type="text" [required]="!signup.organization_tax_code && !signup.organization_vat_code">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 form-group">
+      <label>
+        <span>{{'Site'|translate}}</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <div class="input-group">
+        <input name="subdomain" class="form-control" [(ngModel)]="signup.subdomain" type="text" subdomainvalidators required>
+        <span class="input-group-append">
+          <span class="input-group-text">.{{appDataService.public.node.rootdomain}}</span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <src-tos [signup]="signup"></src-tos>
+  <div class="row">
+    <div class="col-md-12">
+      <button class="ButtonNext btn btn-primary" type="submit" (click)="(validated = true) && !signupform.invalid && complete.emit()">
+        <i class="fa-solid fa-check"></i>
+        <span>{{'Proceed'|translate}}</span>
+      </button>
     </div>
+  </div>
 </form>
diff --git a/client/app/src/pages/signup/templates/wbpa/wbpa.component.ts b/client/app/src/pages/signup/templates/wbpa/wbpa.component.ts
index 3b60d1a02c..be78223ed6 100644
--- a/client/app/src/pages/signup/templates/wbpa/wbpa.component.ts
+++ b/client/app/src/pages/signup/templates/wbpa/wbpa.component.ts
@@ -1,13 +1,24 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import * as Constants from "@app/shared/constants/constants";
 import {AppDataService} from "@app/app-data.service";
 import {Signup} from "@app/models/component-model/signup";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { DisableCcpDirective } from "../../../../shared/directive/disable-ccp.directive";
+import { SubdomainValidatorDirective } from "../../../../shared/directive/subdomain-validator.directive";
+import { TosComponent } from "../tos/tos.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-wbpa",
-  templateUrl: "./wbpa.component.html"
+    selector: "src-wbpa",
+    templateUrl: "./wbpa.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, DisableCcpDirective, SubdomainValidatorDirective, TosComponent, TranslateModule, TranslatorPipe]
 })
 export class WbpaComponent {
+  protected appDataService = inject(AppDataService);
+
   @Input() signup: Signup;
   @Output() complete: EventEmitter<any> = new EventEmitter<any>();
   @Output() updateSubdomain: EventEmitter<any> = new EventEmitter<any>();
@@ -15,6 +26,4 @@ export class WbpaComponent {
   protected readonly Constants = Constants;
   validated = false;
   confirmation_email: string;
-  constructor(protected appDataService: AppDataService) {
-  }
 }
diff --git a/client/app/src/pages/whistleblower/context-selection/context-selection.component.html b/client/app/src/pages/whistleblower/context-selection/context-selection.component.html
index 0d23982fcd..8c5cbd54a9 100644
--- a/client/app/src/pages/whistleblower/context-selection/context-selection.component.html
+++ b/client/app/src/pages/whistleblower/context-selection/context-selection.component.html
@@ -1,22 +1,32 @@
-<div class="row mb-3" *ngIf="appDataService.public.node.contexts_clarification">
+@if (appDataService.public.node.contexts_clarification) {
+  <div class="row mb-3">
     <b>
-        <markdown class="col-md-12" [data]="appDataService.public.node.contexts_clarification | stripHtml"></markdown>
+      <markdown class="col-md-12" [data]="appDataService.public.node.contexts_clarification | stripHtml"></markdown>
     </b>
-</div>
+  </div>
+}
 <div id="SubmissionStepContext" class="row">
-    <div id="context-{{index}}" *ngFor="let context of (selectable_contexts| orderBy:contextsOrderPredicate);let index = index" (click)="selectContext.emit(context)" [class]="utilsService.getCardSize(selectable_contexts.length)">
-        <div class="select-card">
-            <div class="row">
-                <div class="col-md-12 title">{{context.name}}</div>
-            </div>
-            <div class="row" *ngIf="context.picture">
-                <div class="col-md-4">
-                    <img class="context-image" alt="context picture" *ngIf="context.picture" width="500" height="500" ngSrc="/s/{{context.id}}"/>
-                </div>
-            </div>
-            <div class="row" *ngIf="context.description">
-                <div class="col-md-12 description">{{context.description}}</div>
-            </div>
+  @for (context of (selectable_contexts| orderBy:contextsOrderPredicate); track context; let index = $index) {
+    <div id="context-{{index}}" (click)="selectContext.emit(context)" [class]="utilsService.getCardSize(selectable_contexts.length)">
+      <div class="select-card">
+        <div class="row">
+          <div class="col-md-12 title">{{context.name}}</div>
         </div>
+        @if (context.picture) {
+          <div class="row">
+            <div class="col-md-4">
+              @if (context.picture) {
+                <img class="context-image" alt="context picture" width="500" height="500" ngSrc="/s/{{context.id}}"/>
+              }
+            </div>
+          </div>
+        }
+        @if (context.description) {
+          <div class="row">
+            <div class="col-md-12 description">{{context.description}}</div>
+          </div>
+        }
+      </div>
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/context-selection/context-selection.component.ts b/client/app/src/pages/whistleblower/context-selection/context-selection.component.ts
index 78bdc5568d..8a137d9ac9 100644
--- a/client/app/src/pages/whistleblower/context-selection/context-selection.component.ts
+++ b/client/app/src/pages/whistleblower/context-selection/context-selection.component.ts
@@ -1,18 +1,24 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {Context} from "@app/models/app/public-model";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgOptimizedImage } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-context-selection",
-  templateUrl: "./context-selection.component.html"
+    selector: "src-context-selection",
+    templateUrl: "./context-selection.component.html",
+    standalone: true,
+    imports: [MarkdownComponent, NgOptimizedImage, StripHtmlPipe, OrderByPipe]
 })
 export class ContextSelectionComponent {
+  protected appDataService = inject(AppDataService);
+  protected utilsService = inject(UtilsService);
+
 
   @Input() selectable_contexts: Context[];
   @Input() contextsOrderPredicate: string;
   @Output() selectContext: EventEmitter<any> = new EventEmitter();
-
-  constructor(protected appDataService: AppDataService, protected utilsService: UtilsService) {
-  }
 }
diff --git a/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.html b/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.html
index 8763de6bc2..c1a548ea59 100644
--- a/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.html
+++ b/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.html
@@ -1,14 +1,20 @@
 <div>
-    <div *ngIf="!field.required">
-            <input id="whistleblower_identity_radio_1" class="form-check-input" type="radio" (click)="changeIdentitySetting(true)" [checked]="identity_provided" [value]="identity_provided" />
-            <label class="form-check-inline" for="whistleblower_identity_radio_1">{{'Yes'|translate}}</label>
-            <input id="whistleblower_identity_radio_2" class="form-check-input" type="radio" (click)="changeIdentitySetting(false)" [checked]="!identity_provided" [value]="!identity_provided" />
-            <label class="form-check-inline" for="whistleblower_identity_radio_2">{{'No'|translate}}</label>
+  @if (!field.required) {
+    <div>
+      <input id="whistleblower_identity_radio_1" class="form-check-input" type="radio" (click)="changeIdentitySetting(true)" [checked]="identity_provided" [value]="identity_provided" />
+      <label class="form-check-inline" for="whistleblower_identity_radio_1">{{'Yes'|translate}}</label>
+      <input id="whistleblower_identity_radio_2" class="form-check-input" type="radio" (click)="changeIdentitySetting(false)" [checked]="!identity_provided" [value]="!identity_provided" />
+      <label class="form-check-inline" for="whistleblower_identity_radio_2">{{'No'|translate}}</label>
     </div>
-    <div *ngIf="!identity_provided && field.attrs.text_shown_upon_negative_answer.value" class="alert alert-secondary">
-        <div>{{field.attrs.text_shown_upon_negative_answer.value|translate}}</div>
+  }
+  @if (!identity_provided && field.attrs.text_shown_upon_negative_answer.value) {
+    <div class="alert alert-secondary">
+      <div>{{field.attrs.text_shown_upon_negative_answer.value|translate}}</div>
     </div>
-    <div *ngIf="identity_provided">
-        <src-form [identity_provided]=false (notifyFileUpload)="notifyFileUpload.emit()" [uploads]="uploads"  [fileUploadUrl]="fileUploadUrl" [displayErrors]="displayErrors" [entry]="entry" [answers]="answers" [step]="step" [submission]="submission" [index]="index"></src-form>
+  }
+  @if (identity_provided) {
+    <div>
+      <src-form [identity_provided]=false (notifyFileUpload)="notifyFileUpload.emit()" [uploads]="uploads"  [fileUploadUrl]="fileUploadUrl" [displayErrors]="displayErrors" [entry]="entry" [answers]="answers" [step]="step" [submission]="submission" [index]="index"></src-form>
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.ts b/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.ts
index de53530ffb..334f408327 100644
--- a/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.ts
+++ b/client/app/src/pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component.ts
@@ -1,14 +1,20 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from "@angular/core";
 import {ControlContainer, NgForm} from "@angular/forms";
 import {Answers} from "@app/models/reciever/reciever-tip-data";
 import {Field} from "@app/models/resolvers/field-template-model";
 import {Step} from "@app/models/whistleblower/wb-tip-data";
 import {SubmissionService} from "@app/services/helper/submission.service";
 
+import { FormComponent } from "../../form/form.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-whistleblower-identity-field",
-  templateUrl: "./whistleblower-identity-field.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
+    selector: "src-whistleblower-identity-field",
+    templateUrl: "./whistleblower-identity-field.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [forwardRef(() => FormComponent), TranslateModule, TranslatorPipe]
 })
 export class WhistleblowerIdentityFieldComponent implements OnInit {
   @Input() submission: SubmissionService;
diff --git a/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.html b/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.html
index 079aa2d5de..b9e4410a4f 100644
--- a/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.html
+++ b/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.html
@@ -1,149 +1,247 @@
 <div class="Question" [ngModelGroup]="fieldFormVarName" id="{{fieldFormVarName}}">
-    <div [ngSwitch]="field.template_id">
-        <div *ngSwitchCase="'whistleblower_identity'">
-            <src-whistleblower-identity-field (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [identity_provided]="identity_provided" [index]="index" [step]="rows" [entry]="entry" [fields]="fields" [answers]="answers" [displayErrors]="displayErrors" [submission]="submission" [field]="field"></src-whistleblower-identity-field>
+  <div>
+    @switch (field.template_id) {
+      @case ('whistleblower_identity') {
+        <div>
+          <src-whistleblower-identity-field (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [identity_provided]="identity_provided" [index]="index" [step]="rows" [entry]="entry" [fields]="fields" [answers]="answers" [displayErrors]="displayErrors" [submission]="submission" [field]="field"></src-whistleblower-identity-field>
         </div>
-        <div *ngSwitchDefault [ngSwitch]="field.type">
-            <div *ngSwitchCase="'textarea'">
+      }
+      @default {
+        <div>
+          @switch (field.type) {
+            @case ('textarea') {
+              <div>
                 <textarea id="{{fieldEntry}}" [name]=fieldEntry class="form-control" [minlength]="field.attrs.min_len.value" [maxlength]="field.attrs.max_len.value" [(ngModel)]="entry['value']" [required]="entry.required_status" #textarea="ngModel" [attr.aria-label]="field.label" [placeholder]="field.placeholder" ></textarea>
-                <div class="clearfix" *ngIf="entry['value']">
-                    <div *ngIf="entry['value'].length && field.attrs.max_len.value > 0 && (field.attrs.max_len.value - entry['value'].length) <= 50" class="float-end">{{entry['value'].length}}/{{field.attrs.max_len.value}}
-                    </div>
-                </div>
-                <div *ngIf="displayErrors" class="text-danger">
-                    <span *ngIf="textarea?.errors?.['required']">{{'This field is mandatory'|translate}}</span>
-                    <span *ngIf="textarea?.errors?.['minlength']">{{'The answer is too short'|translate}}</span>
-                </div>
-            </div>
-            <div *ngSwitchCase="'selectbox'">
-                <select id="{{fieldEntry}}" [name]="fieldEntry" class="form-control" [(ngModel)]="entry['value']" [required]="entry.required_status" *ngIf="field.options.length < 10">
+                @if (entry['value']) {
+                  <div class="clearfix">
+                    @if (entry['value'].length && field.attrs.max_len.value > 0 && (field.attrs.max_len.value - entry['value'].length) <= 50) {
+                      <div class="float-end">{{entry['value'].length}}/{{field.attrs.max_len.value}}
+                      </div>
+                    }
+                  </div>
+                }
+                @if (displayErrors) {
+                  <div class="text-danger">
+                    @if (textarea?.errors?.['required']) {
+                      <span>{{'This field is mandatory'|translate}}</span>
+                    }
+                    @if (textarea?.errors?.['minlength']) {
+                      <span>{{'The answer is too short'|translate}}</span>
+                    }
+                  </div>
+                }
+              </div>
+            }
+            @case ('selectbox') {
+              <div>
+                @if (field.options.length < 10) {
+                  <select id="{{fieldEntry}}" [name]="fieldEntry" class="form-control" [(ngModel)]="entry['value']" [required]="entry.required_status">
                     <option class="d-none" value="">Select an option</option>
-                    <option *ngFor="let option of field.options | orderBy:field.attrs.display_alphabetically.value ? 'label' : 'order'; let index = index" id="{{fieldEntry}}-option-{{index}}" [value]="option.id">{{option.label}}</option>
-                </select>
-                <div class="input-group" [ngClass]="{'d-block': !entry['value']}" *ngIf="field.options.length >= 10">
+                    @for (option of field.options | orderBy:field.attrs.display_alphabetically.value ? 'label' : 'order'; track option; let index = $index) {
+                      <option id="{{fieldEntry}}-option-{{index}}" [value]="option.id">{{option.label}}</option>
+                    }
+                  </select>
+                }
+                @if (field.options.length >= 10) {
+                  <div class="input-group" [ngClass]="{'d-block': !entry['value']}">
                     <ng-select class="w-75" [clearable]="false" [name]="fieldEntry" [(ngModel)]="entry['value']" >
-                        <ng-option *ngFor="let option of field.options | orderBy:field.attrs.display_alphabetically.value ? 'label' : 'order'" [value]="option.id">{{option.label}}</ng-option>
+                      @for (option of field.options | orderBy:field.attrs.display_alphabetically.value ? 'label' : 'order'; track option) {
+                        <ng-option [value]="option.id">{{option.label}}</ng-option>
+                      }
                     </ng-select>
-                    <span class="input-append" (click)="entry['value']='';" disabled="!entry['value']" *ngIf="entry['value']">
+                    @if (entry['value']) {
+                      <span class="input-append" (click)="entry['value']='';" disabled="!entry['value']">
                         <i class="input-group-text cross-padding fa-solid fa-times-circle"></i>
-                    </span>
-                </div>
-            </div>
-            <div *ngSwitchCase="'multichoice'">
-                <div *ngFor="let option of field.options | orderBy:'order';let innerindex = index">
+                      </span>
+                    }
+                  </div>
+                }
+              </div>
+            }
+            @case ('multichoice') {
+              <div>
+                @for (option of field.options | orderBy:'order'; track option; let innerindex = $index) {
+                  <div>
                     <input [name]="fieldEntry" id="{{fieldEntry + '-option-' + innerindex}}" class="form-control-inputform-check-input" type="radio" [(ngModel)]="entry['value']" value="{{option.id}}" [required]="field.required" />
-                    <label for="{{fieldEntry + '-option-' + innerindex}}" title="{{option.hint1}}" class="form-control-label" [ngClass]="{'text-underline': option.hint1}">{{option.label}}</label>
-                </div>
-            </div>
-            <div *ngSwitchCase="'checkbox'">
-                <div *ngFor="let option of field.options | orderBy:field.attrs.display_alphabetically.value ? 'label' : 'order'; let index = index">
+                    <label for="{{fieldEntry + '-option-' + innerindex}}" data-toggle="tooltip" title="{{option.hint1}}" class="form-control-label" [ngClass]="{'text-underline': option.hint1}">{{option.label}}</label>
+                  </div>
+                }
+              </div>
+            }
+            @case ('checkbox') {
+              <div>
+                @for (option of field.options | orderBy:field.attrs.display_alphabetically.value ? 'label' : 'order'; track option; let index = $index) {
+                  <div>
                     <input id="{{fieldEntry + '-option-' + index}}" [name]="fieldEntry" class="form-control-input inputelinem form-check-input" [(ngModel)]="entry[option.id]" value="{{option.id}}" [required]="entry.required_status" type="checkbox" />
-                    <label for="{{fieldEntry + '-option-' + index}}" title="{{option.hint1}}" class="form-control-label" [ngClass]="{'text-underline': option.hint1}">{{option.label}}</label>
-                </div>
-            </div>
-            <div *ngSwitchCase="'date'">
+                    <label for="{{fieldEntry + '-option-' + index}}" data-toggle="tooltip" title="{{option.hint1}}" class="form-control-label" [ngClass]="{'text-underline': option.hint1}">{{option.label}}</label>
+                  </div>
+                }
+              </div>
+            }
+            @case ('date') {
+              <div>
                 <div class="input-group">
-                    <input id="{{fieldEntry}}" class="form-control" [name]="fieldEntry" [minDate]="dateOptions.min_date" [maxDate]="dateOptions.max_date" type="text" readonly="readonly" [attr.aria-label]="field.label" [(ngModel)]="input_date" [required]="entry.required_status" ngbDatepicker #datepicker="ngbDatepicker" (click)="datepicker.toggle()" (ngModelChange)="onDateSelection()" />
-                    <span class="input-group-append btn btn-light border border-1" (click)="datepicker.toggle()">
-                        <i class="fa-solid fa-calendar"></i>
-                    </span>
+                  <input id="{{fieldEntry}}" class="form-control" [name]="fieldEntry" [minDate]="dateOptions.min_date" [maxDate]="dateOptions.max_date" type="text" readonly="readonly" [attr.aria-label]="field.label" [(ngModel)]="input_date" [required]="entry.required_status" ngbDatepicker #datepicker="ngbDatepicker" (click)="datepicker.toggle()" (ngModelChange)="onDateSelection()" />
+                  <span class="input-group-append btn btn-light border border-1" (click)="datepicker.toggle()">
+                    <i class="fa-solid fa-calendar"></i>
+                  </span>
                 </div>
-            </div>
-            <div *ngSwitchCase="'daterange'" class="form-inline d-inline-flex align-items-center">
+              </div>
+            }
+            @case ('daterange') {
+              <div class="form-inline d-inline-flex align-items-center">
                 <span class="form-group">
-                    <label [for]="fieldEntry+'-startDate'">{{'From' | translate}}</label>
+                  <label [for]="fieldEntry+'-startDate'">{{'From' | translate}}</label>
                 </span>
                 <span class="form-group ms-1">
-                    <div class="input-group ms-1">
-                        <input id="{{fieldEntry}}" class="form-control" [name]="fieldEntry+'-startDate'" [minDate]="dateOptions1" [maxDate]="dateOptions2" type="text" [readOnly]="true" [attr.aria-label]="field.label" [(ngModel)]="input_start_date" [required]="entry.required_status" ngbDatepicker #datepickerstart="ngbDatepicker" (click)="datepickerstart.toggle()" (ngModelChange)="onStartDateSelection(input_start_date)" />
-                        <span class="input-group-append btn btn-light border border-1" (click)="datepickerstart.toggle()">
-                            <i class="fa-solid fa-calendar"></i>
-                        </span>
-                    </div>
+                  <div class="input-group ms-1">
+                    <input id="{{fieldEntry}}" class="form-control" [name]="fieldEntry+'-startDate'" [minDate]="dateOptions1" [maxDate]="dateOptions2" type="text" [readOnly]="true" [attr.aria-label]="field.label" [(ngModel)]="input_start_date" [required]="entry.required_status" ngbDatepicker #datepickerstart="ngbDatepicker" (click)="datepickerstart.toggle()" (ngModelChange)="onStartDateSelection(input_start_date)" />
+                    <span class="input-group-append btn btn-light border border-1" (click)="datepickerstart.toggle()">
+                      <i class="fa-solid fa-calendar"></i>
+                    </span>
+                  </div>
                 </span>
                 <span class="form-group ms-2">
-                    <label [for]="fieldEntry+'-endDate'">{{'To' | translate}}</label>
+                  <label [for]="fieldEntry+'-endDate'">{{'To' | translate}}</label>
                 </span>
                 <span class="form-group ms-2">
-                    <div class="input-group ms-1">
-                        <input id="{{fieldEntry}}" class="form-control" [name]="fieldEntry+'-endDate'" [minDate]="input_start_date" [maxDate]="dateOptions2" type="text" [readonly]="true" [attr.aria-label]="field.label" [(ngModel)]="input_end_date" [required]="entry.required_status" ngbDatepicker #datepickerend="ngbDatepicker" (click)="datepickerend.toggle()" (ngModelChange)="onEndDateSelection(input_end_date)" [disabled]="!input_start_date" />
-                        <span class="input-group-append btn btn-light border border-1" (click)="input_start_date && datepickerend.toggle()">
-                            <i class="fa-solid fa-calendar"></i>
-                        </span>
-                    </div>
+                  <div class="input-group ms-1">
+                    <input id="{{fieldEntry}}" class="form-control" [name]="fieldEntry+'-endDate'" [minDate]="input_start_date" [maxDate]="dateOptions2" type="text" [readonly]="true" [attr.aria-label]="field.label" [(ngModel)]="input_end_date" [required]="entry.required_status" ngbDatepicker #datepickerend="ngbDatepicker" (click)="datepickerend.toggle()" (ngModelChange)="onEndDateSelection(input_end_date)" [disabled]="!input_start_date" />
+                    <span class="input-group-append btn btn-light border border-1" (click)="input_start_date && datepickerend.toggle()">
+                      <i class="fa-solid fa-calendar"></i>
+                    </span>
+                  </div>
                 </span>
-                <span class="form-group ms-2" *ngIf="input_start_date">
+                @if (input_start_date) {
+                  <span class="form-group ms-2">
                     <button type="button" class="btn btn-outline-secondary" (click)="clearDateRange()">
-                        <i class="fa-solid fa-times-circle"></i>
+                      <i class="fa-solid fa-times-circle"></i>
                     </button>
-                </span>
-            </div>
-            <div *ngSwitchCase="'tos'">
+                  </span>
+                }
+              </div>
+            }
+            @case ('tos') {
+              <div>
                 <markdown class="form-group tos-text" [data]="field.attrs.text.value | stripHtml"></markdown>
-                <div *ngIf="field.attrs.attachment.value">
+                @if (field.attrs.attachment.value) {
+                  <div>
                     <a [href]="field.attrs.attachment_url.value" rel="noreferrer" target="_blank">{{field.attrs.attachment_text.value}}</a>
-                </div>
+                  </div>
+                }
                 <div class="form-check">
-                        <input id="{{fieldEntry}}" [name]="fieldEntry" class="form-check-input" [(ngModel)]="entry['value']" [required]="entry.required_status" value="{{field.value}}" type="checkbox" />
-                        <label for="{{fieldEntry}}" class="form-check-label"><markdown [data]="field.attrs.checkbox_label.value | stripHtml"></markdown></label>
+                  <input id="{{fieldEntry}}" [name]="fieldEntry" class="form-check-input" [(ngModel)]="entry['value']" [required]="entry.required_status" value="{{field.value}}" type="checkbox" />
+                  <label for="{{fieldEntry}}" class="form-check-label"><markdown [data]="field.attrs.checkbox_label.value | stripHtml"></markdown></label>
                 </div>
-            </div>
-            <div id="{{fieldEntry}}" *ngSwitchCase="'voice'">
+              </div>
+            }
+            @case ('voice') {
+              <div id="{{fieldEntry}}">
                 <src-voice-recorder (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [field]="field" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry"></src-voice-recorder>
-            </div>
-            <div id="{{fieldEntry}}" *ngSwitchCase="'fileupload'">
+              </div>
+            }
+            @case ('fileupload') {
+              <div id="{{fieldEntry}}">
                 <src-rfile-upload-button [file_id]="fieldEntry" (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [field]="field" [formUploader]="true"></src-rfile-upload-button>
-            </div>
-            <div *ngSwitchCase="'fieldgroup'">
-                <div [ngSwitch]="field.attrs.multimedia_type.value">
-                    <div *ngSwitchCase="'image'">
+              </div>
+            }
+            @case ('fieldgroup') {
+              <div>
+                <div>
+                  @switch (field.attrs.multimedia_type.value) {
+                    @case ('image') {
+                      <div>
                         <img alt="media" [src]="field.attrs.multimedia_url.value" />
-                    </div>
-                    <div *ngSwitchCase="'audio'">
+                      </div>
+                    }
+                    @case ('audio') {
+                      <div>
                         <audio controls>
-                            <source [src]="field.attrs.multimedia_url.value" type="audio/mpeg" />
+                          <source [src]="field.attrs.multimedia_url.value" type="audio/mpeg" />
                         </audio>
-                    </div>
-                    <div *ngSwitchCase="'video'">
+                      </div>
+                    }
+                    @case ('video') {
+                      <div>
                         <video controls>
-                            <source [src]="field.attrs.multimedia_url.value" type="video/mp4">
+                          <source [src]="field.attrs.multimedia_url.value" type="video/mp4">
                         </video>
-                    </div>
+                      </div>
+                    }
+                  }
                 </div>
                 <src-form (notifyFileUpload)="notifyFileUpload.emit()" [identity_provided]="identity_provided" [fileUploadUrl] = fileUploadUrl [fieldEntry]="fieldEntry" [displayErrors]="displayErrors" [entry]="entry" [answers]="answers" [step]="rows" [submission]="submission" [index]="index" [uploads]="uploads"></src-form>
-            </div>
-            <div *ngSwitchDefault>
+              </div>
+            }
+            @default {
+              <div>
                 <input id="{{fieldEntry}}" [name]="fieldEntry" class="form-control" [(ngModel)]="entry['value']" [minlength]="field.attrs.min_len.value" [maxlength]="field.attrs.max_len.value" [required]=entry.required_status #defaultinput="ngModel" [pattern]="validator" [placeholder]="field.placeholder" [attr.aria-label]="field.label" type="text" />
                 <div class="clearfix">
-                    <div *ngIf="entry['value'] && defaultinput?.errors?.['pattern'] && entry['value'].length && entry['value'].length>0 && field.attrs.input_validation.value === 'custom'" class="text-danger">{{'The specified input is not valid.'}}</div>
-                    <div *ngIf="entry['value'] && defaultinput?.errors?.['pattern'] && entry['value'].length && entry['value'].length>0 && field.attrs.input_validation.value !== 'custom'">
-                        <span class="text-danger">{{'The specified input is not valid:'|translate}}</span>
-                        <span class="text-danger" [ngSwitch]="field.attrs.input_validation.value">
-                            <span *ngSwitchCase="'email'">{{'please enter a valid email address.'|translate}}</span>
-                            <span *ngSwitchCase="'number'" class="text-danger">{{'please enter numbers only.'|translate}}</span>
-                            <span *ngSwitchCase="'phonenumber'" class="text-danger">{{'please enter numbers only.'}}</span>
-                        </span>
+                  @if (entry['value'] && defaultinput?.errors?.['pattern'] && entry['value'].length && entry['value'].length>0 && field.attrs.input_validation.value === 'custom') {
+                    <div class="text-danger">{{'The specified input is not valid.'}}</div>
+                  }
+                  @if (entry['value'] && defaultinput?.errors?.['pattern'] && entry['value'].length && entry['value'].length>0 && field.attrs.input_validation.value !== 'custom') {
+                    <div>
+                      <span class="text-danger">{{'The specified input is not valid:'|translate}}</span>
+                      <span class="text-danger">
+                        @switch (field.attrs.input_validation.value) {
+                          @case ('email') {
+                            <span>{{'please enter a valid email address.'|translate}}</span>
+                          }
+                          @case ('number') {
+                            <span class="text-danger">{{'please enter numbers only.'|translate}}</span>
+                          }
+                          @case ('phonenumber') {
+                            <span class="text-danger">{{'please enter numbers only.'}}</span>
+                          }
+                        }
+                      </span>
                     </div>
-                    <div *ngIf="entry['value'] && entry['value'].length && field.attrs.max_len.value > 0 && (field.attrs.max_len.value - entry['value']) <= 50" class="float-end">{{entry['value'].length}}/{{field.attrs.max_len.value}}
+                  }
+                  @if (entry['value'] && entry['value'].length && field.attrs.max_len.value > 0 && (field.attrs.max_len.value - entry['value']) <= 50) {
+                    <div class="float-end">{{entry['value'].length}}/{{field.attrs.max_len.value}}
                     </div>
-                    <div *ngIf="entry.required_status && displayErrors" class="float-start text-danger"></div>
-                    <span *ngIf="defaultinput?.errors?.['required'] && displayErrors" class="text-danger">{{'This field is mandatory'|translate}}</span>
-                    <span *ngIf="defaultinput?.errors?.['minlength'] && displayErrors" class="text-danger">{{'The answer is too short'|translate}}</span>
+                  }
+                  @if (entry.required_status && displayErrors) {
+                    <div class="float-start text-danger"></div>
+                  }
+                  @if (defaultinput?.errors?.['required'] && displayErrors) {
+                    <span class="text-danger">{{'This field is mandatory'|translate}}</span>
+                  }
+                  @if (defaultinput?.errors?.['minlength'] && displayErrors) {
+                    <span class="text-danger">{{'The answer is too short'|translate}}</span>
+                  }
                 </div>
-            </div>
+              </div>
+            }
+          }
         </div>
-    </div>
-    <div *ngIf="field.type !== 'inputbox' && field.type !== 'textarea' && entry.required_status && (displayErrors || validateUploadSubmission())" class="text-danger">{{'This field is mandatory'|translate}}</div>
-    <div *ngIf="field.type === 'selectbox'">
-        <div *ngFor="let option of field.options">
-            <div *ngIf="option.set && option.hint1">
-                <i class="fa-solid fa-info-circle"></i> {{option.hint1}}
+      }
+    }
+  </div>
+  @if (field.type !== 'inputbox' && field.type !== 'textarea' && entry.required_status && (displayErrors || validateUploadSubmission())) {
+    <div class="text-danger">{{'This field is mandatory'|translate}}</div>
+  }
+  @if (field.type === 'selectbox') {
+    <div>
+      @for (option of field.options; track option) {
+        <div>
+          @if (option.set && option.hint1) {
+            <div>
+              <i class="fa-solid fa-info-circle"></i> {{option.hint1}}
             </div>
+          }
         </div>
+      }
     </div>
-    <div *ngFor="let option of field.options">
-        <div *ngIf="option.set && option.hint2" [ngClass]="{'text-danger': option.block_submission}">
-            <i class="fa-solid fa-info-circle"></i> {{option.hint2}}
+  }
+  @for (option of field.options; track option) {
+    <div>
+      @if (option.set && option.hint2) {
+        <div [ngClass]="{'text-danger': option.block_submission}">
+          <i class="fa-solid fa-info-circle"></i> {{option.hint2}}
         </div>
+      }
     </div>
+  }
 </div>
diff --git a/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.ts b/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.ts
index 788dbb6998..f76d96f1e3 100644
--- a/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.ts
+++ b/client/app/src/pages/whistleblower/form-field-input/form-field-input.component.ts
@@ -1,18 +1,33 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output, inject } from "@angular/core";
 import {FieldUtilitiesService} from "@app/shared/services/field-utilities.service";
-import {ControlContainer, NgForm} from "@angular/forms";
+import { ControlContainer, NgForm, FormsModule } from "@angular/forms";
 import {SubmissionService} from "@app/services/helper/submission.service";
-import {NgbDateStruct} from "@ng-bootstrap/ng-bootstrap";
+import { NgbDateStruct, NgbInputDatepicker } from "@ng-bootstrap/ng-bootstrap";
 import {Answers} from "@app/models/reciever/reciever-tip-data";
 import {Step} from "@app/models/whistleblower/wb-tip-data";
 import {Field} from "@app/models/resolvers/field-template-model";
+import { NgClass } from "@angular/common";
+import { WhistleblowerIdentityFieldComponent } from "../fields/whistleblower-identity-field/whistleblower-identity-field.component";
+import { NgSelectComponent, NgOptionComponent } from "@ng-select/ng-select";
+import { MarkdownComponent } from "ngx-markdown";
+import { VoiceRecorderComponent } from "../../../shared/partials/voice-recorder/voice-recorder.component";
+import { RFileUploadButtonComponent } from "../../../shared/partials/rfile-upload-button/r-file-upload-button.component";
+import { FormComponent } from "../form/form.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-form-field-input",
-  templateUrl: "./form-field-input.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
+    selector: "src-form-field-input",
+    templateUrl: "./form-field-input.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [FormsModule, forwardRef(() => WhistleblowerIdentityFieldComponent), NgClass, NgSelectComponent, NgOptionComponent, NgbInputDatepicker, MarkdownComponent, VoiceRecorderComponent, RFileUploadButtonComponent, forwardRef(() => FormComponent), TranslateModule, TranslatorPipe, StripHtmlPipe, OrderByPipe]
 })
 export class FormFieldInputComponent implements OnInit {
+  private fieldUtilitiesService = inject(FieldUtilitiesService);
+
 
   @Input() field: any;
   @Input() index: number;
@@ -42,9 +57,6 @@ export class FormFieldInputComponent implements OnInit {
   dateOptions2: NgbDateStruct;
   dateOptions: {min_date:NgbDateStruct,max_date:NgbDateStruct}={min_date:{year:0,month:0,day:0},max_date:{year:0,month:0,day:0}}
 
-  constructor(private fieldUtilitiesService: FieldUtilitiesService) {
-  }
-
   clearDateRange() {
     this.input_start_date = "";
     this.input_end_date = {year: 0, month: 0, day: 0};
diff --git a/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.html b/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.html
index b844baeb31..019b5996dd 100644
--- a/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.html
+++ b/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.html
@@ -1,62 +1,94 @@
-<div *ngIf="(['checkbox', 'fieldgroup', 'multichoice'].indexOf(field.type) === -1) && (['whistleblower_identity'].indexOf(field.template_id) === -1)" id="{{fieldId}}" class="question">
-    <label class="question-label" data-content="field.hint" [title]="field.hint" for="{{fieldId + '-input-' + 0}}">
-        <span *ngIf="field.label" class="title">{{field.label|translate}}</span>
-        <i *ngIf="field.hint" class="fa-solid fa-question-circle"></i>
-        <span *ngIf="field.required" class="text-danger sup" title="{{'This field is mandatory' | translate}}">*</span>
+@if ((['checkbox', 'fieldgroup', 'multichoice'].indexOf(field.type) === -1) && (['whistleblower_identity'].indexOf(field.template_id) === -1)) {
+  <div id="{{fieldId}}" class="question">
+    <label class="question-label" data-content="field.hint" data-toggle="tooltip" [title]="field.hint" for="{{fieldId + '-input-' + 0}}">
+      @if (field.label) {
+        <span class="title">{{field.label|translate}}</span>
+      }
+      @if (field.hint) {
+        <i class="fa-solid fa-question-circle"></i>
+      }
+      @if (field.required) {
+        <span class="text-danger sup" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      }
     </label>
     <div class="question-body">
-        <markdown *ngIf="field.description" class="description" [data]="field.description | stripHtml"></markdown>
-        <div class="form-group">
-            <div class="field-answer-entry" *ngFor="let entry of entries; let entryIndex = index;let first = first;let last = last;" [ngClass]="{'fieldAnswerEntryFirst': first, 'fieldAnswerEntryLast': last}">
-                <div class="field-answer-entry-label clearfix" *ngIf="entries.length > 1">
-                    <span class="float-start">
-                        <label class="text-muted">
-                            <span>#{{entryIndex + 1}}</span>
-                        </label>
-                    </span>
-                    <span class="float-end">
-                        <span class="text-danger" title="{{'Remove' | translate}}" [attr.aria-label]="'Remove' | translate" (click)="utilsService.deleteFromList(entries, entry)">
-                            <i class="fa-solid fa-times"></i>
-                        </span>
-                    </span>
-                </div>
-                <src-form-field-input [fileUploadUrl]="fileUploadUrl" (notifyFileUpload)="notifyFileUpload.emit()" [identity_provided]=identity_provided [uploads]="uploads" [fields]="fields" [step]="step" [answers]="answers" [fieldId]="fieldId" [displayErrors]="displayErrors" [entry]="entry" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry" [submission]="submission" [field]="field" [index]="entryIndex"></src-form-field-input>
-            </div>
-            <div *ngIf="field.multi_entry && field.type === 'fieldgroup'" class="float-end">
-                <button class="btn btn-outline-secondary" [attr.aria-label]="'Add' | translate" (click)="addAnswerEntry(entries)">
-                    <i class="fa-solid fa-plus"></i>
-                </button>
-            </div>
-        </div>
+      @if (field.description) {
+        <markdown class="description" [data]="field.description | stripHtml"></markdown>
+      }
+      <div class="form-group">
+        @for (entry of entries; track entry; let entryIndex = $index; let first = $first; let last = $last) {
+          <div class="field-answer-entry" [ngClass]="{'fieldAnswerEntryFirst': first, 'fieldAnswerEntryLast': last}">
+            @if (entries.length > 1) {
+              <div class="field-answer-entry-label clearfix">
+                <span class="float-start">
+                  <label class="text-muted">
+                    <span>#{{entryIndex + 1}}</span>
+                  </label>
+                </span>
+                <span class="float-end">
+                  <span class="text-danger" data-toggle="tooltip" title="{{'Remove' | translate}}" [attr.aria-label]="'Remove' | translate" (click)="utilsService.deleteFromList(entries, entry)">
+                    <i class="fa-solid fa-times"></i>
+                  </span>
+                </span>
+              </div>
+            }
+            <src-form-field-input [fileUploadUrl]="fileUploadUrl" (notifyFileUpload)="notifyFileUpload.emit()" [identity_provided]=identity_provided [uploads]="uploads" [fields]="fields" [step]="step" [answers]="answers" [fieldId]="fieldId" [displayErrors]="displayErrors" [entry]="entry" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry" [submission]="submission" [field]="field" [index]="entryIndex"></src-form-field-input>
+          </div>
+        }
+        @if (field.multi_entry && field.type === 'fieldgroup') {
+          <div class="float-end">
+            <button class="btn btn-outline-secondary" [attr.aria-label]="'Add' | translate" (click)="addAnswerEntry(entries)">
+              <i class="fa-solid fa-plus"></i>
+            </button>
+          </div>
+        }
+      </div>
     </div>
-</div>
-<fieldset *ngIf="(['checkbox', 'fieldgroup', 'multichoice'].indexOf(field.type) !== -1) || (['whistleblower_identity'].indexOf(field.template_id) !== -1)" id="{{fieldId}}" class="question">
-    <legend *ngIf="field.label" class="title">{{field.label|translate}}</legend>
-    <i *ngIf="field.hint" class="fa-solid fa-question-circle"></i>
-    <span *ngIf="field.required" class="text-danger sup" title="{{'This field is mandatory' | translate}}">*</span>
+  </div>
+}
+@if ((['checkbox', 'fieldgroup', 'multichoice'].indexOf(field.type) !== -1) || (['whistleblower_identity'].indexOf(field.template_id) !== -1)) {
+  <fieldset id="{{fieldId}}" class="question">
+    @if (field.label) {
+      <legend class="title">{{field.label|translate}}</legend>
+    }
+    @if (field.hint) {
+      <i class="fa-solid fa-question-circle"></i>
+    }
+    @if (field.required) {
+      <span class="text-danger sup" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+    }
     <div class="question-body">
-        <markdown *ngIf="field.description" class="description" [data]="field.description | stripHtml"></markdown>
-        <div class="form-group">
-            <div class="field-answer-entry" *ngFor="let entry of entries; let entryIndex = index;let first = first;let last = last;" [ngClass]="{'fieldAnswerEntryFirst': first, 'fieldAnswerEntryLast': last}">
-                <div class="field-answer-entry-label clearfix" *ngIf="entries.length > 1">
-                    <span class="float-start">
-                        <label class="text-muted">
-                            <span>#{{entryIndex + 1}}</span>
-                        </label>
-                    </span>
-                    <span class="float-end">
-                        <span class="text-danger" title="{{'Remove' | translate}}" [attr.aria-label]="'Remove' | translate" (click)="utilsService.deleteFromList(entries, entry)">
-                            <i class="fa-solid fa-times"></i>
-                        </span>
-                    </span>
-                </div>
-                <src-form-field-input [fileUploadUrl]="fileUploadUrl" (notifyFileUpload)="notifyFileUpload.emit()" [identity_provided]=identity_provided [uploads]="uploads" [fields]="fields" [step]="step" [answers]="answers" [fieldId]="fieldId" [displayErrors]="displayErrors" [entry]="entry" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry" [submission]="submission" [field]="field" [index]="entryIndex"></src-form-field-input>
-            </div>
-            <div *ngIf="field.multi_entry && field.type === 'fieldgroup'" class="float-end">
-                <button class="btn btn-outline-secondary" [attr.aria-label]="'Add' | translate" (click)="addAnswerEntry(entries)">
-                    <i class="fa-solid fa-plus"></i>
-                </button>
-            </div>
-        </div>
+      @if (field.description) {
+        <markdown class="description" [data]="field.description | stripHtml"></markdown>
+      }
+      <div class="form-group">
+        @for (entry of entries; track entry; let entryIndex = $index; let first = $first; let last = $last) {
+          <div class="field-answer-entry" [ngClass]="{'fieldAnswerEntryFirst': first, 'fieldAnswerEntryLast': last}">
+            @if (entries.length > 1) {
+              <div class="field-answer-entry-label clearfix">
+                <span class="float-start">
+                  <label class="text-muted">
+                    <span>#{{entryIndex + 1}}</span>
+                  </label>
+                </span>
+                <span class="float-end">
+                  <span class="text-danger" data-toggle="tooltip" title="{{'Remove' | translate}}" [attr.aria-label]="'Remove' | translate" (click)="utilsService.deleteFromList(entries, entry)">
+                    <i class="fa-solid fa-times"></i>
+                  </span>
+                </span>
+              </div>
+            }
+            <src-form-field-input [fileUploadUrl]="fileUploadUrl" (notifyFileUpload)="notifyFileUpload.emit()" [identity_provided]=identity_provided [uploads]="uploads" [fields]="fields" [step]="step" [answers]="answers" [fieldId]="fieldId" [displayErrors]="displayErrors" [entry]="entry" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry" [submission]="submission" [field]="field" [index]="entryIndex"></src-form-field-input>
+          </div>
+        }
+        @if (field.multi_entry && field.type === 'fieldgroup') {
+          <div class="float-end">
+            <button class="btn btn-outline-secondary" [attr.aria-label]="'Add' | translate" (click)="addAnswerEntry(entries)">
+              <i class="fa-solid fa-plus"></i>
+            </button>
+          </div>
+        }
+      </div>
     </div>
-</fieldset>
\ No newline at end of file
+  </fieldset>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.ts b/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.ts
index 982529c1be..c2303b9412 100644
--- a/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.ts
+++ b/client/app/src/pages/whistleblower/form-field-inputs/form-field-inputs.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {ControlContainer, NgForm} from "@angular/forms";
 import {SubmissionService} from "@app/services/helper/submission.service";
@@ -6,13 +6,30 @@ import {Answers} from "@app/models/reciever/reciever-tip-data";
 import {Step} from "@app/models/whistleblower/wb-tip-data";
 import {Field} from "@app/models/resolvers/field-template-model";
 import {cloneDeep} from "lodash-es";
+import { NgClass } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { FormFieldInputComponent } from "../form-field-input/form-field-input.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
 
 @Component({
-  selector: "src-form-field-inputs",
-  templateUrl: "./form-field-inputs.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+    selector: "src-form-field-inputs",
+    templateUrl: "./form-field-inputs.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [
+    MarkdownComponent,
+    NgClass,
+    forwardRef(() => FormFieldInputComponent),
+    TranslateModule,
+    TranslatorPipe,
+    StripHtmlPipe
+],
 })
 export class FormFieldInputsComponent implements OnInit {
+  protected utilsService = inject(UtilsService);
+
   @Input() field: Field;
   @Input() fieldRow: number;
   @Input() fieldCol: number;
@@ -33,9 +50,6 @@ export class FormFieldInputsComponent implements OnInit {
   fieldId: string;
   entries: { [key: string]: Field }[] = [];
 
-  constructor(protected utilsService: UtilsService) {
-  }
-
   ngOnInit(): void {
     if(!this.fieldEntry){
       this.fieldId = this.stepId + "-field-" + this.fieldRow + "-" + this.fieldCol;
diff --git a/client/app/src/pages/whistleblower/form/form.component.html b/client/app/src/pages/whistleblower/form/form.component.html
index edad06ba8b..077c196044 100644
--- a/client/app/src/pages/whistleblower/form/form.component.html
+++ b/client/app/src/pages/whistleblower/form/form.component.html
@@ -1,9 +1,11 @@
-<div *ngFor="let row of rows;let fieldRow = index" class="row">
-    <ng-container *ngFor="let field of row | orderBy:'x' let fieldCol = index">
-        <ng-container *ngIf="field.enabled">
-            <div [ngClass]="fieldUtilitiesService.getClass(field, row.length)">
-                <src-form-field-inputs [fileUploadUrl]="fileUploadUrl" (notifyFileUpload)="notifyFileUpload.emit()" [fieldEntry] = fieldEntry [identity_provided]=identity_provided [uploads]="uploads" [entry]="entry" [fields]="fields" [step]="step" [displayErrors]="displayErrors" [index]="index" [submission]="submission" [answers]="answers" [stepId]="stepId" [fieldCol]="fieldCol" [fieldRow]="fieldRow" [field]="field"></src-form-field-inputs>
-            </div>
-        </ng-container>
-    </ng-container>
-</div>
\ No newline at end of file
+@for (row of rows; track row; let fieldRow = $index) {
+  <div class="row">
+    @for (field of row | orderBy:'x' ;let fieldCol = $index; track field) {
+      @if (field.enabled) {
+        <div [ngClass]="fieldUtilitiesService.getClass(field, row.length)">
+          <src-form-field-inputs [fileUploadUrl]="fileUploadUrl" (notifyFileUpload)="notifyFileUpload.emit()" [fieldEntry] = fieldEntry [identity_provided]=identity_provided [uploads]="uploads" [entry]="entry" [fields]="fields" [step]="step" [displayErrors]="displayErrors" [index]="index" [submission]="submission" [answers]="answers" [stepId]="stepId" [fieldCol]="fieldCol" [fieldRow]="fieldRow" [field]="field"></src-form-field-inputs>
+        </div>
+      }
+    }
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/form/form.component.ts b/client/app/src/pages/whistleblower/form/form.component.ts
index be92b5499a..38ff4b79d7 100644
--- a/client/app/src/pages/whistleblower/form/form.component.ts
+++ b/client/app/src/pages/whistleblower/form/form.component.ts
@@ -1,16 +1,27 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output, inject } from "@angular/core";
 import {FieldUtilitiesService} from "@app/shared/services/field-utilities.service";
 import {ControlContainer, NgForm} from "@angular/forms";
 import {SubmissionService} from "@app/services/helper/submission.service";
 import {Answers} from "@app/models/reciever/reciever-tip-data";
 import {Children, Step} from "@app/models/whistleblower/wb-tip-data";
+import { NgClass } from "@angular/common";
+import { FormFieldInputsComponent } from "../form-field-inputs/form-field-inputs.component";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-form",
-  templateUrl: "./form.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+    selector: "src-form",
+    templateUrl: "./form.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [
+    NgClass,
+    forwardRef(() => FormFieldInputsComponent),
+    OrderByPipe
+],
 })
 export class FormComponent implements OnInit {
+  protected fieldUtilitiesService = inject(FieldUtilitiesService);
+
   @Input() step: Step;
   @Input() index: number;
   @Input() answers: Answers;
@@ -28,9 +39,6 @@ export class FormComponent implements OnInit {
   rows: any;
   status: { opened: boolean };
 
-  constructor(protected fieldUtilitiesService: FieldUtilitiesService) {
-  }
-
   ngOnInit(): void {
     this.initialize();
   }
diff --git a/client/app/src/pages/whistleblower/homepage/homepage.component.html b/client/app/src/pages/whistleblower/homepage/homepage.component.html
index 3e2bc2d37d..9372939cae 100644
--- a/client/app/src/pages/whistleblower/homepage/homepage.component.html
+++ b/client/app/src/pages/whistleblower/homepage/homepage.component.html
@@ -1,22 +1,36 @@
 <div id="HomePageBox">
-    <markdown id="Presentation" class="mb-4" *ngIf="appDataService.public.node.presentation" [data]="appDataService.public.node.presentation | stripHtml"></markdown>
-    <div id="WhistleblowerBox" class="d-block mx-auto">
-        <div id="WhistleblowerSubmitBoxButtonDisabled" class="mb-4" *ngIf="appDataService.public.node.disable_submissions || (!appDataService.public.node.https_whistleblower && !appDataService.connection.tor)">
-            <button class="btn btn-danger disabled">
-                <i class="fa-solid fa-ban-circle"></i>
-                <span id="submissions_disabled">{{'Submissions disabled'|translate}}</span>
-            </button>
-        </div>
-        <div class="mb-4" *ngIf="!appDataService.public.node.https_whistleblower && !appDataService.connection.tor">
-            <p class="text-danger">{{'You are connecting to the server without anonymity and this server supports only anonymous submissions'|translate}}</p>
-        </div>
-        <div id="WhistleblowerSubmitBox" class="mb-4" *ngIf="!appDataService.public.node.disable_submissions && (appDataService.public.node.https_whistleblower || appDataService.connection.tor)">
-            <markdown id="WhistleblowingQuestion" *ngIf="appDataService.public.node.whistleblowing_question" [data]="appDataService.public.node.whistleblowing_question | stripHtml"></markdown>
-            <button id="WhistleblowingButton" (click)="openSubmission()" class="btn btn-primary"><span *ngIf="appDataService.public.node.whistleblowing_button">{{appDataService.public.node.whistleblowing_button|translate}}</span></button>
-        </div>
-        <br>
-        <div id="WhistleblowerLoginBox" *ngIf="appDataService.public.node.https_whistleblower || appDataService.connection.tor">
-            <src-receipt></src-receipt>
+  @if (appDataService.public.node.presentation) {
+    <markdown id="Presentation" class="mb-4" [data]="appDataService.public.node.presentation | stripHtml"></markdown>
+  }
+  <div id="WhistleblowerBox" class="d-block mx-auto">
+    @if (appDataService.public.node.disable_submissions || (!appDataService.public.node.https_whistleblower && !appDataService.connection.tor)) {
+      <div id="WhistleblowerSubmitBoxButtonDisabled" class="mb-4">
+        <button class="btn btn-danger disabled">
+          <i class="fa-solid fa-ban-circle"></i>
+          <span id="submissions_disabled">{{'Submissions disabled'|translate}}</span>
+        </button>
+      </div>
+    }
+    @if (!appDataService.public.node.https_whistleblower && !appDataService.connection.tor) {
+      <div class="mb-4">
+        <p class="text-danger">{{'You are connecting to the server without anonymity and this server supports only anonymous submissions'|translate}}</p>
+      </div>
+    }
+    @if (!appDataService.public.node.disable_submissions && (appDataService.public.node.https_whistleblower || appDataService.connection.tor)) {
+      <div id="WhistleblowerSubmitBox" class="mb-4">
+        @if (appDataService.public.node.whistleblowing_question) {
+          <markdown id="WhistleblowingQuestion" [data]="appDataService.public.node.whistleblowing_question | stripHtml"></markdown>
+        }
+        <button id="WhistleblowingButton" (click)="openSubmission()" class="btn btn-primary">@if (appDataService.public.node.whistleblowing_button) {
+          <span>{{appDataService.public.node.whistleblowing_button|translate}}</span>
+        }</button>
+      </div>
+    }
+    <br>
+      @if (appDataService.public.node.https_whistleblower || appDataService.connection.tor) {
+        <div id="WhistleblowerLoginBox">
+          <src-receipt></src-receipt>
         </div>
+      }
     </div>
-</div>
+  </div>
diff --git a/client/app/src/pages/whistleblower/homepage/homepage.component.ts b/client/app/src/pages/whistleblower/homepage/homepage.component.ts
index 37991298a5..48475ba18f 100644
--- a/client/app/src/pages/whistleblower/homepage/homepage.component.ts
+++ b/client/app/src/pages/whistleblower/homepage/homepage.component.ts
@@ -1,18 +1,27 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {DisclaimerComponent} from "@app/shared/modals/disclaimer/disclaimer.component";
 import {Observable} from "rxjs";
 import {AppConfigService} from "@app/services/root/app-config.service";
 
+import { MarkdownComponent } from "ngx-markdown";
+import { ReceiptComponent } from "../../../shared/partials/receipt/receipt.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+
 @Component({
-  selector: "src-homepage",
-  templateUrl: "./homepage.component.html"
+    selector: "src-homepage",
+    templateUrl: "./homepage.component.html",
+    standalone: true,
+    imports: [MarkdownComponent, ReceiptComponent, TranslateModule, TranslatorPipe, StripHtmlPipe]
 })
 export class HomepageComponent {
+  protected appConfigService = inject(AppConfigService);
+  protected appDataService = inject(AppDataService);
+  private modalService = inject(NgbModal);
 
-  constructor(protected appConfigService: AppConfigService, protected appDataService: AppDataService, private modalService: NgbModal) {
-  }
 
   openSubmission() {
     if (this.appDataService.public.node.disclaimer_text) {
diff --git a/client/app/src/pages/whistleblower/receipt/receipt.component.html b/client/app/src/pages/whistleblower/receipt/receipt.component.html
index 2483570505..139ae44308 100644
--- a/client/app/src/pages/whistleblower/receipt/receipt.component.html
+++ b/client/app/src/pages/whistleblower/receipt/receipt.component.html
@@ -1,32 +1,36 @@
-<div class="row" *ngIf="appDataService.page === 'receiptpage'">
+@if (appDataService.page === 'receiptpage') {
+  <div class="row">
     <div id="ReceiptText" class="col-md-12">
-        <span>{{'Thank you.' | translate}}</span>
-        <span>{{'Your report was successful.' | translate}}</span>
-        <span>{{'We will try to get back to you as soon as possible.' | translate}}</span>
+      <span>{{'Thank you.' | translate}}</span>
+      <span>{{'Your report was successful.' | translate}}</span>
+      <span>{{'We will try to get back to you as soon as possible.' | translate}}</span>
     </div>
-</div>
+  </div>
+}
 <div class="row">
-    <div class="col-md-12">
-        <div class="card card-secondary">
-            <label for="ReceiptCode" class="card-header">{{'Remember your receipt for this report.' | translate}}</label>
-            <div class="card-body">
-                <span class="form-inline" title="{{'Copy to clipboard' | translate}}" (click)="utilsService.copyToClipboard(receipt)">
-                    <div class="form-group d-block mx-auto receipt-input">
-                        <div class="input-group">
-                            <input id="ReceiptCode" class="form-control text-center" type="text" maxlength="19" name="formatted_receipt" size="19" [(ngModel)]="receiptId" [readOnly]="appDataService.page !== 'tippage'">
-                            <span class="input-group-append">
-                                <button id="ReceiptButton" (click)="utilsService.copyToClipboard(receipt)" class="btn btn-primary m-0 rounded-start-0" type="button" [attr.aria-label]="'Copy to clipboard' | translate">
-                                    <i class="fa-solid fa-copy"></i>
-                                </button>
-                            </span>
-                        </div>
-                    </div>
-                </span>
-                <div class="mt-md-1 text-center">{{'Use the 16 digit receipt to log in. It will allow you to view any messages we sent you, and also to add extra info.' | translate}}</div>
-                <div class="mt-md-3 clearfix" *ngIf="appDataService.page === 'receiptpage'">
-                    <button id="ReceiptButton" class="btn btn-primary float-end " (click)="viewReport()">{{'View your report' | translate}}</button>
-                </div>
+  <div class="col-md-12">
+    <div class="card card-secondary">
+      <label for="ReceiptCode" class="card-header">{{'Remember your receipt for this report.' | translate}}</label>
+      <div class="card-body">
+        <span class="form-inline" data-toggle="tooltip" title="{{'Copy to clipboard' | translate}}" (click)="utilsService.copyToClipboard(receipt)">
+          <div class="form-group d-block mx-auto receipt-input">
+            <div class="input-group">
+              <input id="ReceiptCode" class="form-control text-center" type="text" maxlength="19" name="formatted_receipt" size="19" [(ngModel)]="receiptId" [readOnly]="appDataService.page !== 'tippage'">
+              <span class="input-group-append">
+                <button id="ReceiptButton" (click)="utilsService.copyToClipboard(receipt)" class="btn btn-primary m-0 rounded-start-0" type="button" [attr.aria-label]="'Copy to clipboard' | translate">
+                  <i class="fa-solid fa-copy"></i>
+                </button>
+              </span>
             </div>
-        </div>
+          </div>
+        </span>
+        <div class="mt-md-1 text-center">{{'Use the 16 digit receipt to log in. It will allow you to view any messages we sent you, and also to add extra info.' | translate}}</div>
+        @if (appDataService.page === 'receiptpage') {
+          <div class="mt-md-3 clearfix">
+            <button id="ReceiptButton" class="btn btn-primary float-end " (click)="viewReport()">{{'View your report' | translate}}</button>
+          </div>
+        }
+      </div>
     </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/receipt/receipt.component.ts b/client/app/src/pages/whistleblower/receipt/receipt.component.ts
index 7d725432cb..0579036818 100644
--- a/client/app/src/pages/whistleblower/receipt/receipt.component.ts
+++ b/client/app/src/pages/whistleblower/receipt/receipt.component.ts
@@ -1,20 +1,28 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {AppDataService} from "@app/app-data.service";
 import {AppConfigService} from "@app/services/root/app-config.service";
 
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-receipt-whistleblower",
-  templateUrl: "./receipt.component.html"
+    selector: "src-receipt-whistleblower",
+    templateUrl: "./receipt.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class ReceiptComponent implements OnInit {
+  private appConfigService = inject(AppConfigService);
+  protected utilsService = inject(UtilsService);
+  protected authenticationService = inject(AuthenticationService);
+  protected appDataService = inject(AppDataService);
+
   receipt: string;
   receiptId: string = "";
 
-  constructor(private appConfigService: AppConfigService,protected utilsService: UtilsService, protected authenticationService: AuthenticationService, protected appDataService: AppDataService) {
-  }
-
   public ngOnInit(): void {
     if (this.authenticationService.session.receipt) {
       this.receipt = this.authenticationService.session.receipt;
diff --git a/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.html b/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.html
index 4b93f64a3f..bd834b7bb1 100644
--- a/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.html
+++ b/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.html
@@ -1,16 +1,22 @@
 <div class="select-card" [ngClass]="{ 'selected':submission.selected_receivers[receiverModel.id] || receiverModel.forcefully_selected}">
-    <div class="row mb-1">
-        <div class="col-md-12">
-            <input type="checkbox" class="btn-checkbox form-check-input" [id]="'recipient-' + receiverModel.id" [name]="'recipient-' + receiverModel.id" [(ngModel)]="submission.selected_receivers[receiverModel.id]" (change)="switchSelection(receiverModel)" *ngIf="!receiverModel.forcefully_selected">
-            <label [for]="'recipient-' + receiverModel.id" class="title">{{receiverModel.name}}</label>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-4" *ngIf="receiverModel.picture">
-            <img class="receiver-image" alt="receiver picture" width="500" height="500" ngSrc="/s/{{receiverModel.id}}" />
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-12 description" *ngIf="receiverModel.description">{{receiverModel.description}}</div>
+  <div class="row mb-1">
+    <div class="col-md-12">
+      @if (!receiverModel.forcefully_selected) {
+        <input type="checkbox" class="btn-checkbox form-check-input" [id]="'recipient-' + receiverModel.id" [name]="'recipient-' + receiverModel.id" [(ngModel)]="submission.selected_receivers[receiverModel.id]" (change)="switchSelection(receiverModel)">
+      }
+      <label [for]="'recipient-' + receiverModel.id" class="title">{{receiverModel.name}}</label>
     </div>
+  </div>
+  <div class="row">
+    @if (receiverModel.picture) {
+      <div class="col-md-4">
+        <img class="receiver-image" alt="receiver picture" width="500" height="500" ngSrc="/s/{{receiverModel.id}}" />
+      </div>
+    }
+  </div>
+  <div class="row">
+    @if (receiverModel.description) {
+      <div class="col-md-12 description">{{receiverModel.description}}</div>
+    }
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.ts b/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.ts
index ddca5998b8..c013fbc222 100644
--- a/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.ts
+++ b/client/app/src/pages/whistleblower/receiver-card/receiver-card.component.ts
@@ -1,18 +1,22 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {Receiver} from "@app/models/app/public-model";
 import {SubmissionService} from "@app/services/helper/submission.service";
 import {TranslateService} from "@ngx-translate/core";
+import { NgClass, NgOptimizedImage } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
-  selector: "src-receiver-card",
-  templateUrl: "./receiver-card.component.html"
+    selector: "src-receiver-card",
+    templateUrl: "./receiver-card.component.html",
+    standalone: true,
+    imports: [NgClass, FormsModule, NgOptimizedImage]
 })
 export class ReceiverCardComponent {
+  protected translate = inject(TranslateService);
+
   @Input() submission: SubmissionService;
   @Input() receiverModel: Receiver;
 
-  constructor(protected translate: TranslateService) {}
-
   selectable(): boolean {
     if (this.submission.context.maximum_selectable_receivers === 0) {
       return true;
diff --git a/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.html b/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.html
index e47742b5a1..b90dc251cb 100644
--- a/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.html
+++ b/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.html
@@ -1,25 +1,39 @@
 <div id="SubmissionStepReceiver" class="receiverCards">
-    <div id="title" *ngIf="!show_steps_navigation_bar">{{'Recipient selection'|translate}}</div>
-    <div *ngIf="submission.optional_receivers">
-        <div class="description mb-2"><strong>{{'Select the recipients of your report'|translate}}</strong></div>
-        <div *ngIf="submission.context.maximum_selectable_receivers !== 0 && !submission.context.select_all_receivers" id="MaxSelectableReceiverBox">
-            <div>
-                <span>{{'Recipients selected:'|translate}}</span> {{submission.countSelectedReceivers()}} /{{submission.context.maximum_selectable_receivers}}
-            </div>
-            <div class="text-danger" *ngIf="submission.countSelectedReceivers() === submission.context.maximum_selectable_receivers">{{'You have reached the maximum number of selectable recipients.'|translate}}</div>
-        </div>
-        <div id="ReceiverSelectionBox" class="row">
-            <div *ngFor="let receiver of submission.receivers | filter : 'forcefully_selected' : false | orderBy:receiversOrderPredicate; let index = index" id="receiver-{{index}}" [ngClass]="utilsService.getCardSize(submission.receivers.length)" (click)="switchSelection.emit(receiver)">
-                <src-receiver-card [submission]="submission" [receiverModel]="receiver"></src-receiver-card>
-            </div>
+  @if (!show_steps_navigation_bar) {
+    <div id="title">{{'Recipient selection'|translate}}</div>
+  }
+  @if (submission.optional_receivers) {
+    <div>
+      <div class="description mb-2"><strong>{{'Select the recipients of your report'|translate}}</strong></div>
+      @if (submission.context.maximum_selectable_receivers !== 0 && !submission.context.select_all_receivers) {
+        <div id="MaxSelectableReceiverBox">
+          <div>
+            <span>{{'Recipients selected:'|translate}}</span> {{submission.countSelectedReceivers()}} /{{submission.context.maximum_selectable_receivers}}
+          </div>
+          @if (submission.countSelectedReceivers() === submission.context.maximum_selectable_receivers) {
+            <div class="text-danger">{{'You have reached the maximum number of selectable recipients.'|translate}}</div>
+          }
         </div>
+      }
+      <div id="ReceiverSelectionBox" class="row">
+        @for (receiver of submission.receivers | filter : 'forcefully_selected' : false | orderBy:receiversOrderPredicate; track receiver; let index = $index) {
+          <div id="receiver-{{index}}" [ngClass]="utilsService.getCardSize(submission.receivers.length)" (click)="switchSelection.emit(receiver)">
+            <src-receiver-card [submission]="submission" [receiverModel]="receiver"></src-receiver-card>
+          </div>
+        }
+      </div>
     </div>
-    <div *ngIf="submission.mandatory_receivers">
-        <div class="description">{{'The following recipients will receive your report and could not be deselected:'|translate}}</div>
-        <div id="ReceiverSelectionBox" class="row">
-            <div *ngFor="let receiver of submission.receivers | filter : 'forcefully_selected' : true | orderBy:receiversOrderPredicate; let index = index" id="receiver-{{index}}" [ngClass]="utilsService.getCardSize(submission.receivers.length)" (click)="switchSelection.emit(receiver)">
-                <src-receiver-card [submission]="submission" [receiverModel]="receiver"></src-receiver-card>
-            </div>
-        </div>
+  }
+  @if (submission.mandatory_receivers) {
+    <div>
+      <div class="description">{{'The following recipients will receive your report and could not be deselected:'|translate}}</div>
+      <div id="ReceiverSelectionBox" class="row">
+        @for (receiver of submission.receivers | filter : 'forcefully_selected' : true | orderBy:receiversOrderPredicate; track receiver; let index = $index) {
+          <div id="receiver-{{index}}" [ngClass]="utilsService.getCardSize(submission.receivers.length)" (click)="switchSelection.emit(receiver)">
+            <src-receiver-card [submission]="submission" [receiverModel]="receiver"></src-receiver-card>
+          </div>
+        }
+      </div>
     </div>
+  }
 </div>
diff --git a/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.ts b/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.ts
index 835acbe7db..1312bf99ac 100644
--- a/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.ts
+++ b/client/app/src/pages/whistleblower/receiver-selection/receiver-selection.component.ts
@@ -1,16 +1,24 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import {SubmissionService} from "@app/services/helper/submission.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { NgClass } from "@angular/common";
+import { ReceiverCardComponent } from "../receiver-card/receiver-card.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-receiver-selection",
-  templateUrl: "./receiver-selection.component.html"
+    selector: "src-receiver-selection",
+    templateUrl: "./receiver-selection.component.html",
+    standalone: true,
+    imports: [NgClass, ReceiverCardComponent, TranslateModule, TranslatorPipe, FilterPipe, OrderByPipe]
 })
 export class ReceiverSelectionComponent {
+  protected utilsService = inject(UtilsService);
+
   @Input() show_steps_navigation_bar: boolean;
   @Input() submission: SubmissionService;
   @Input() receiversOrderPredicate: string;
   @Output() switchSelection: EventEmitter<any> = new EventEmitter();
-
-  constructor(protected utilsService: UtilsService) {}
 }
diff --git a/client/app/src/pages/whistleblower/step-error/step-error.component.html b/client/app/src/pages/whistleblower/step-error/step-error.component.html
index e48ad248c9..9cfa43c6cf 100644
--- a/client/app/src/pages/whistleblower/step-error/step-error.component.html
+++ b/client/app/src/pages/whistleblower/step-error/step-error.component.html
@@ -1,8 +1,10 @@
-<div *ngIf="stepForm.invalid">
+@if (stepForm.invalid) {
+  <div>
     <p>{{'In this step the answers to the following questions are either missing or invalid:'|translate}}</p>
     <ul>
-        <ng-container *ngFor="let error of getInnerGroupErrors(stepForm)">
-            <src-step-error-entry [form]="stepForm" [field_id_map]="field_id_map" [err]=error></src-step-error-entry>
-        </ng-container>
+      @for (error of getInnerGroupErrors(stepForm); track error) {
+        <src-step-error-entry [form]="stepForm" [field_id_map]="field_id_map" [err]=error></src-step-error-entry>
+      }
     </ul>
-</div>
+  </div>
+}
diff --git a/client/app/src/pages/whistleblower/step-error/step-error.component.ts b/client/app/src/pages/whistleblower/step-error/step-error.component.ts
index 4ca75b7694..f393d53060 100644
--- a/client/app/src/pages/whistleblower/step-error/step-error.component.ts
+++ b/client/app/src/pages/whistleblower/step-error/step-error.component.ts
@@ -3,9 +3,15 @@ import {FormArray, FormGroup, NgForm} from "@angular/forms";
 import {Field} from "@app/models/resolvers/field-template-model";
 import {DisplayStepErrorsFunction, StepFormFunction} from "@app/shared/constants/types";
 
+import { StepErrorEntryComponent } from "./template/step-error-entry/step-error-entry.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-step-error",
-  templateUrl: "./step-error.component.html"
+    selector: "src-step-error",
+    templateUrl: "./step-error.component.html",
+    standalone: true,
+    imports: [StepErrorEntryComponent, TranslateModule, TranslatorPipe]
 })
 export class StepErrorComponent {
   @Input() navigation: number;
diff --git a/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.html b/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.html
index 64aa2a0233..7a140ee72e 100644
--- a/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.html
+++ b/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.html
@@ -1 +1,3 @@
-<li *ngIf="field" (click)="goToQuestion()">{{field.label}}</li>
+@if (field) {
+  <li (click)="goToQuestion()">{{field.label}}</li>
+}
diff --git a/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.ts b/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.ts
index 1574414915..a3b8ba001c 100644
--- a/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.ts
+++ b/client/app/src/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component.ts
@@ -2,9 +2,12 @@ import {Component, Input, OnInit} from "@angular/core";
 import {NgForm} from "@angular/forms";
 import {Field} from "@app/models/resolvers/field-template-model";
 
+
 @Component({
-  selector: "src-step-error-entry",
-  templateUrl: "./step-error-entry.component.html"
+    selector: "src-step-error-entry",
+    templateUrl: "./step-error-entry.component.html",
+    standalone: true,
+    imports: []
 })
 export class StepErrorEntryComponent implements OnInit {
   @Input() err: string;
diff --git a/client/app/src/pages/whistleblower/submission/submission.component.html b/client/app/src/pages/whistleblower/submission/submission.component.html
index aad51111d8..ba2261245c 100644
--- a/client/app/src/pages/whistleblower/submission/submission.component.html
+++ b/client/app/src/pages/whistleblower/submission/submission.component.html
@@ -1,68 +1,106 @@
-<ng-container *ngIf="submissionService">
-    <div *ngIf="selectable_contexts.length && !submissionService.context">
-        <src-context-selection (selectContext)="selectContext($event)" [selectable_contexts]=selectable_contexts [contextsOrderPredicate]=contextsOrderPredicate></src-context-selection>
+@if (submissionService) {
+  @if (selectable_contexts.length && !submissionService.context) {
+    <div>
+      <src-context-selection (selectContext)="selectContext($event)" [selectable_contexts]=selectable_contexts [contextsOrderPredicate]=contextsOrderPredicate></src-context-selection>
     </div>
-    <div *ngIf="submissionService.context">
-        <div *ngIf="selectable_contexts.length > 1 || context_id">
-            <div class="title">{{submissionService.context.name}}</div>
-            <div class="row">
-                <div class="col-md-2" *ngIf="submissionService.context.picture">
-                    <img class="context-image" alt="context picture" src="/s/{{submissionService.context.id}}" />
-                </div>
-            </div>
+  }
+  @if (submissionService.context) {
+    <div>
+      @if (selectable_contexts.length > 1 || context_id) {
+        <div>
+          <div class="title">{{submissionService.context.name}}</div>
+          <div class="row">
+            @if (submissionService.context.picture) {
+              <div class="col-md-2">
+                <img class="context-image" alt="context picture" src="/s/{{submissionService.context.id}}" />
+              </div>
+            }
+          </div>
         </div>
-        <form #submissionForm="ngForm" id="SubmissionForm" [ngClass]="{'was-validated': displaySubmissionErrors()}" autocomplete="off" novalidate>
-            <div class="tabbable tabs-below mb-3">
-                <ul id="SubmissionTabsNavigationBox" class="nav nav-tabs" *ngIf="submissionService.context.show_steps_navigation_interface && submissionService.context.questionnaire.steps.length > 1" role="tablist">
-                    <li *ngIf="submissionService.context.allow_recipients_selection" id="step-recipient-selection-tab" class="nav-item" role="presentation">
-                        <button id="receiver-selection-link" [ngClass]="{active: navigation === -1}" class="nav-link nav-link-custom" (click)="goToStep(-1)" [attr.aria-selected]="navigation === -1" [attr.aria-current]="navigation === -1 ? 'step' : 'false'" aria-controls="step-recipient-selection" role="tab">
-                            <span class="step-index" [ngClass]="{'step-index-selected': navigation === -1}">1</span>
-                            <span class="step-label">{{'Recipient selection'|translate}}</span>
-                        </button>
-                    </li>
-                    <li id="context-{{index}}" *ngFor="let step of (submissionService.context.questionnaire.steps | orderBy:'order');let index = index" class="nav-item" role="presentation">
-                        <button *ngIf="step.enabled" id="step-{{index}}-link" [ngClass]="{active: navigation === index}" class="nav-link nav-link-custom" (click)="goToStep(index)" [attr.aria-selected]="navigation === index" [attr.aria-current]="navigation === index ? 'step' : 'false'" [attr.aria-controls]="'step-' + index" role="tab">
-                            <span class="step-index" [ngClass]="{'step-index-selected': navigation === index}">{{index + (submissionService.context.allow_recipients_selection ? 2 : 1)}}</span>
-                            <span class="step-label">{{step.label}}</span>
-                        </button>
-                    </li>
-                </ul>
-                <div id="SubmissionTabsContentBox" class="tab-content">
-                    <div *ngIf="validate[navigation] && !hasPreviousStepValue && !areReceiversSelectedValue">
-                        <div id="SubmissionErrors" class="alert alert-secondary mb-2" role="alert">
-                            <p>{{'You must select at least one recipient.'|translate}}</p>
-                        </div>
-                    </div>
-                    <div id="step-receiver-selection" *ngIf="submissionService.context.allow_recipients_selection && navigation === -1" role="tabpanel">
-                        <src-receiver-selection (switchSelection)="switchSelection($event)" [receiversOrderPredicate]="receiversOrderPredicate" [submission]="submissionService" [show_steps_navigation_bar]="show_steps_navigation_bar"></src-receiver-selection>
-                    </div>
-                    <div *ngIf="navigation !== -1">
-                        <div *ngFor="let step of submissionService.context.questionnaire.steps | orderBy:'order'; let index = index">
-                            <div *ngIf="step && step.enabled && submissionService" id="step-{{index}}"  [class.hidden]="navigation !== index" role="tabpanel">
-                                <div ngForm #stepForm="ngForm" ngFormChanges (ngFormChange)="onFormChange()">
-                                    <div *ngIf="validate[navigation] && stepForm.invalid">
-                                        <src-step-error [navigation]="navigation" [field_id_map]="field_id_map" [stepForm]="stepForm"></src-step-error>
-                                    </div>
-                                    <markdown *ngIf="step.description" class="description" [data]="step.description | stripHtml"></markdown>
-                                    <src-form (notifyFileUpload)="notifyFileUpload($event)" [fileUploadUrl]="'api/whistleblower/submission/attachment'" [identity_provided]=identity_provided [uploads]="uploads" [displayErrors]="displayErrors()" [answers]="answers" [submission]="submissionService" [step]="step" [index]="index"></src-form>
-                                </div>
+      }
+      <form #submissionForm="ngForm" id="SubmissionForm" [ngClass]="{'was-validated': displaySubmissionErrors()}" autocomplete="off" novalidate>
+        <div class="tabbable tabs-below mb-3">
+          @if (submissionService.context.show_steps_navigation_interface && submissionService.context.questionnaire.steps.length > 1) {
+            <ul id="SubmissionTabsNavigationBox" class="nav nav-tabs" role="tablist">
+              @if (submissionService.context.allow_recipients_selection) {
+                <li id="step-recipient-selection-tab" class="nav-item" role="presentation">
+                  <button id="receiver-selection-link" [ngClass]="{active: navigation === -1}" class="nav-link nav-link-custom" (click)="goToStep(-1)" [attr.aria-selected]="navigation === -1" [attr.aria-current]="navigation === -1 ? 'step' : 'false'" aria-controls="step-recipient-selection" role="tab">
+                    <span class="step-index" [ngClass]="{'step-index-selected': navigation === -1}">1</span>
+                    <span class="step-label">{{'Recipient selection'|translate}}</span>
+                  </button>
+                </li>
+              }
+              @for (step of (submissionService.context.questionnaire.steps | orderBy:'order'); track step; let index = $index) {
+                <li id="context-{{index}}" class="nav-item" role="presentation">
+                  @if (step.enabled) {
+                    <button id="step-{{index}}-link" [ngClass]="{active: navigation === index}" class="nav-link nav-link-custom" (click)="goToStep(index)" [attr.aria-selected]="navigation === index" [attr.aria-current]="navigation === index ? 'step' : 'false'" [attr.aria-controls]="'step-' + index" role="tab">
+                      <span class="step-index" [ngClass]="{'step-index-selected': navigation === index}">{{index + (submissionService.context.allow_recipients_selection ? 2 : 1)}}</span>
+                      <span class="step-label">{{step.label}}</span>
+                    </button>
+                  }
+                </li>
+              }
+            </ul>
+          }
+          <div id="SubmissionTabsContentBox" class="tab-content">
+            @if (validate[navigation] && !hasPreviousStepValue && !areReceiversSelectedValue) {
+              <div>
+                <div id="SubmissionErrors" class="alert alert-secondary mb-2" role="alert">
+                  <p>{{'You must select at least one recipient.'|translate}}</p>
+                </div>
+              </div>
+            }
+            @if (submissionService.context.allow_recipients_selection && navigation === -1) {
+              <div id="step-receiver-selection" role="tabpanel">
+                <src-receiver-selection (switchSelection)="switchSelection($event)" [receiversOrderPredicate]="receiversOrderPredicate" [submission]="submissionService" [show_steps_navigation_bar]="show_steps_navigation_bar"></src-receiver-selection>
+              </div>
+            }
+            @if (navigation !== -1) {
+              <div>
+                @for (step of submissionService.context.questionnaire.steps | orderBy:'order'; track step; let index = $index) {
+                  <div>
+                    @if (step && step.enabled && submissionService) {
+                      <div id="step-{{index}}"  [class.hidden]="navigation !== index" role="tabpanel">
+                        <div ngForm #stepForm="ngForm" ngFormChanges (ngFormChange)="onFormChange()">
+                          @if (validate[navigation] && stepForm.invalid) {
+                            <div>
+                              <src-step-error [navigation]="navigation" [field_id_map]="field_id_map" [stepForm]="stepForm"></src-step-error>
                             </div>
+                          }
+                          @if (step.description) {
+                            <markdown class="description" [data]="step.description | stripHtml"></markdown>
+                          }
+                          <src-form (notifyFileUpload)="notifyFileUpload($event)" [fileUploadUrl]="'api/whistleblower/submission/attachment'" [identity_provided]=identity_provided [uploads]="uploads" [displayErrors]="displayErrors()" [answers]="answers" [submission]="submissionService" [step]="step" [index]="index"></src-form>
                         </div>
-                    </div>
-                </div>
-            </div>
-            <div id="SubmissionButtons">
-                <button id="PreviousStepButton" class="btn btn-outline-secondary" *ngIf="hasPreviousStep()" (click)="whistleblowerSubmissionService.decrementStep(this)">
-                    <i class="fa-solid fa-arrow-circle-left"></i>
-                    <span>{{'Previous'|translate}}</span>
-                </button>
-                <button id="NextStepButton" class="btn btn-outline-secondary" *ngIf="hasNextStep()" [disabled]="submissionService.blocked" (click)="whistleblowerSubmissionService.incrementStep(this)">
-                    <span>{{'Next'|translate}}</span>
-                    <i class="fa-solid fa-arrow-circle-right"></i>
-                </button>
-                <src-rfiles-upload-status [progress]="calculateProgress()" [estimatedTime]="calculateEstimatedTime()" [uploading]="uploading()" *ngIf="!hasNextStep() && uploading()"></src-rfiles-upload-status>
-                <button id="SubmitButton" class="btn btn-primary" *ngIf="!hasNextStep()" (click)="completeSubmission()" [disabled]="!authenticationService.session || submissionService.blocked || done" type="submit">{{'Submit'|translate}}</button>
-            </div>
-        </form>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        </div>
+        <div id="SubmissionButtons">
+          @if (hasPreviousStep()) {
+            <button id="PreviousStepButton" class="btn btn-outline-secondary" (click)="whistleblowerSubmissionService.decrementStep(this)">
+              <i class="fa-solid fa-arrow-circle-left"></i>
+              <span>{{'Previous'|translate}}</span>
+            </button>
+          }
+          @if (hasNextStep()) {
+            <button id="NextStepButton" class="btn btn-outline-secondary" [disabled]="submissionService.blocked" (click)="whistleblowerSubmissionService.incrementStep(this)">
+              <span>{{'Next'|translate}}</span>
+              <i class="fa-solid fa-arrow-circle-right"></i>
+            </button>
+          }
+          @if (!hasNextStep() && uploading()) {
+            <src-rfiles-upload-status [progress]="calculateProgress()" [estimatedTime]="calculateEstimatedTime()" [uploading]="uploading()"></src-rfiles-upload-status>
+          }
+          @if (!hasNextStep()) {
+            <button id="SubmitButton" class="btn btn-primary" (click)="completeSubmission()" [disabled]="!authenticationService.session || submissionService.blocked || done" type="submit">{{'Submit'|translate}}</button>
+          }
+        </div>
+      </form>
     </div>
-</ng-container>
+  }
+}
diff --git a/client/app/src/pages/whistleblower/submission/submission.component.ts b/client/app/src/pages/whistleblower/submission/submission.component.ts
index dfaf865240..31353c3939 100644
--- a/client/app/src/pages/whistleblower/submission/submission.component.ts
+++ b/client/app/src/pages/whistleblower/submission/submission.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, SimpleChanges, QueryList, ViewChild, ViewChildren} from "@angular/core";
+import { Component, OnInit, SimpleChanges, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import { ActivatedRoute } from '@angular/router';
 import {AppDataService} from "@app/app-data.service";
 import {WhistleblowerLoginResolver} from "@app/shared/resolvers/whistleblower-login.resolver";
@@ -6,7 +6,7 @@ import {FieldUtilitiesService} from "@app/shared/services/field-utilities.servic
 import {SubmissionService} from "@app/services/helper/submission.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
-import {NgForm} from "@angular/forms";
+import { NgForm, FormsModule } from "@angular/forms";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {Context, Questionnaire, Receiver} from "@app/models/app/public-model";
 import {Answers} from "@app/models/reciever/reciever-tip-data";
@@ -15,13 +15,39 @@ import * as Flow from "@flowjs/flow.js";
 import {TitleService} from "@app/shared/services/title.service";
 import {Router} from "@angular/router";
 import {WhistleblowerSubmissionService} from "@app/pages/whistleblower/whistleblower-submission.service";
+import { NgClass } from "@angular/common";
+import { ContextSelectionComponent } from "../context-selection/context-selection.component";
+import { ReceiverSelectionComponent } from "../receiver-selection/receiver-selection.component";
+import { NgFormChangeDirective } from "../../../shared/directive/ng-form-change.directive";
+import { StepErrorComponent } from "../step-error/step-error.component";
+import { MarkdownComponent } from "ngx-markdown";
+import { FormComponent } from "../form/form.component";
+import { RFilesUploadStatusComponent } from "../../../shared/partials/rfiles-upload-status/r-files-upload-status.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-submission",
-  templateUrl: "./submission.component.html",
-  providers: [SubmissionService]
+    selector: "src-submission",
+    templateUrl: "./submission.component.html",
+    providers: [SubmissionService],
+    standalone: true,
+    imports: [ContextSelectionComponent, FormsModule, NgClass, ReceiverSelectionComponent, NgFormChangeDirective, StepErrorComponent, MarkdownComponent, FormComponent, RFilesUploadStatusComponent, TranslateModule, TranslatorPipe, StripHtmlPipe, OrderByPipe]
 })
 export class SubmissionComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  protected whistleblowerSubmissionService = inject(WhistleblowerSubmissionService);
+  private titleService = inject(TitleService);
+  private router = inject(Router);
+  private appConfigService = inject(AppConfigService);
+  private whistleblowerLoginResolver = inject(WhistleblowerLoginResolver);
+  protected authenticationService = inject(AuthenticationService);
+  private appDataService = inject(AppDataService);
+  private utilsService = inject(UtilsService);
+  private fieldUtilitiesService = inject(FieldUtilitiesService);
+  submissionService = inject(SubmissionService);
+
   @ViewChild("submissionForm") public submissionForm: NgForm;
   @ViewChildren("stepForm") stepForms: QueryList<NgForm>;
 
@@ -45,7 +71,7 @@ export class SubmissionComponent implements OnInit {
   hasPreviousStepValue: boolean;
   areReceiversSelectedValue: boolean;
 
-  constructor(private route:ActivatedRoute, protected whistleblowerSubmissionService:WhistleblowerSubmissionService,private titleService: TitleService, private router: Router, private appConfigService: AppConfigService, private whistleblowerLoginResolver: WhistleblowerLoginResolver, protected authenticationService: AuthenticationService, private appDataService: AppDataService, private utilsService: UtilsService, private fieldUtilitiesService: FieldUtilitiesService, public submissionService: SubmissionService) {
+  constructor() {
     this.selectable_contexts = [];
     this.receivedData = this.submissionService.getSharedData();
 
diff --git a/client/app/src/pages/whistleblower/tippage/tippage.component.html b/client/app/src/pages/whistleblower/tippage/tippage.component.html
index 96a3863302..ee6adc3f1c 100644
--- a/client/app/src/pages/whistleblower/tippage/tippage.component.html
+++ b/client/app/src/pages/whistleblower/tippage/tippage.component.html
@@ -1,43 +1,51 @@
 <div id="Toolbar" class="row">
-    <div class="col-md-12">
-        <span id="link-reload" (click)="onReload()" title="{{'Refresh' | translate}}" class="btn btn-outline-secondary">
-            <i class="fa-solid fa-sync"></i>
-        </span>
-    </div>
+  <div class="col-md-12">
+    <span id="link-reload" (click)="onReload()" data-toggle="tooltip" title="{{'Refresh' | translate}}" class="btn btn-outline-secondary">
+      <i class="fa-solid fa-sync"></i>
+    </span>
+  </div>
 </div>
-<div class="row" *ngIf="wbTipService.tip.status !== 'closed' && wbTipService.tip.context?.additional_questionnaire_id && wbTipService.tip.questionnaires.length === 1">
+@if (shouldShowAdditionalQuestionnaire()) {
+  <div class="row">
     <div class="col-md-12">
-        <src-tip-additional-questionnaire-invite></src-tip-additional-questionnaire-invite>
+      <src-tip-additional-questionnaire-invite></src-tip-additional-questionnaire-invite>
     </div>
-</div>
+  </div>
+}
 <div class="row">
-    <div class="col-md-12">
-        <src-tip-info [tipService]="wbTipService"></src-tip-info>
-    </div>
+  <div class="col-md-12">
+    <src-tip-info [tipService]="wbTipService"></src-tip-info>
+  </div>
 </div>
-<div class="row" *ngIf="wbTipService.tip.receivers && wbTipService.tip.receivers.length > 1">
+@if (wbTipService.tip.receivers && wbTipService.tip.receivers.length > 1) {
+  <div class="row">
     <div class="col-md-12">
-        <src-tip-receiver-list [tipService]="wbTipService"></src-tip-receiver-list>
+      <src-tip-receiver-list [tipService]="wbTipService"></src-tip-receiver-list>
     </div>
-</div>
+  </div>
+}
 <div class="row">
-    <div [ngClass]="{'col-md-12': !wbTipService.tip.enable_whistleblower_identity,'col-md-6': wbTipService.tip.enable_whistleblower_identity}">
-        <src-tip-questionnaire-answers [tipService]="wbTipService"></src-tip-questionnaire-answers>
-    </div>
-    <div class="col-md-6" *ngIf="wbTipService.tip.enable_whistleblower_identity">
-        <src-whistleblower-identity [uploadEstimateTime]="calculateEstimatedTime()" [uploadProgress]="calculateProgress()" [isUploading]="uploading()" (onFormUpdate)="onFormChange()" (provideIdentityInformation)=provideIdentityInformation($event) [answers]="answers" [step]="wbTipService.tip.whistleblower_identity_field" [field]="wbTipService.tip.whistleblower_identity_field"></src-whistleblower-identity>
-    </div>
+  <div [ngClass]="{'col-md-12': !wbTipService.tip.enable_whistleblower_identity,'col-md-6': wbTipService.tip.enable_whistleblower_identity}">
+    <src-tip-questionnaire-answers [tipService]="wbTipService"></src-tip-questionnaire-answers>
+  </div>
+  @if (wbTipService.tip.enable_whistleblower_identity) {
+    <div class="col-md-6">
+      <src-whistleblower-identity [uploadEstimateTime]="calculateEstimatedTime()" [uploadProgress]="calculateProgress()" [isUploading]="uploading()" (onFormUpdate)="onFormChange()" (provideIdentityInformation)=provideIdentityInformation($event) [answers]="answers" [step]="wbTipService.tip.whistleblower_identity_field" [field]="wbTipService.tip.whistleblower_identity_field"></src-whistleblower-identity>
+    </div>
+  }
 </div>
 <div class="row">
-    <div class="col-md-12">
-        <src-tip-files-whistleblower [fileUploadUrl]="fileUploadUrl"></src-tip-files-whistleblower>
-        <src-widget-wbfiles [receivers_by_id]="tip.receivers_by_id" [ctx]="ctx" *ngIf="wbTipService.tip.wbfiles && wbTipService.tip.wbfiles.length"></src-widget-wbfiles>
-    </div>
+  <div class="col-md-12">
+    <src-tip-files-whistleblower [fileUploadUrl]="fileUploadUrl"></src-tip-files-whistleblower>
+    @if (wbTipService.tip.wbfiles && wbTipService.tip.wbfiles.length) {
+      <src-widget-wbfiles [receivers_by_id]="tip.receivers_by_id" [ctx]="ctx"></src-widget-wbfiles>
+    }
+  </div>
 </div>
 <div class="row">
-    <div class="col-md-12">
-        <ng-container *ngIf="wbTipService">
-            <src-tip-comments [tipService]="wbTipService" [key]="'public'"></src-tip-comments>
-        </ng-container>
-    </div>
+  <div class="col-md-12">
+    @if (wbTipService) {
+      <src-tip-comments [tipService]="wbTipService" [key]="'public'"></src-tip-comments>
+    }
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/pages/whistleblower/tippage/tippage.component.ts b/client/app/src/pages/whistleblower/tippage/tippage.component.ts
index 3061cc1210..953d3621d8 100644
--- a/client/app/src/pages/whistleblower/tippage/tippage.component.ts
+++ b/client/app/src/pages/whistleblower/tippage/tippage.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {WbTipResolver} from "@app/shared/resolvers/wb-tip-resolver.service";
 import {FieldUtilitiesService} from "@app/shared/services/field-utilities.service";
 import {ActivatedRoute} from "@angular/router";
@@ -9,12 +9,34 @@ import {UtilsService} from "@app/shared/services/utils.service";
 import {Children, WbTipData} from "@app/models/whistleblower/wb-tip-data";
 import {Answers, Questionnaire} from "@app/models/reciever/reciever-tip-data";
 import {WhistleblowerIdentity} from "@app/models/app/shared-public-model";
+import { NgClass } from "@angular/common";
+import { TipAdditionalQuestionnaireInviteComponent } from "../../../shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component";
+import { TipInfoComponent } from "../../../shared/partials/tip-info/tip-info.component";
+import { TipReceiverListComponent } from "../../../shared/partials/tip-receiver-list/tip-receiver-list.component";
+import { TipQuestionnaireAnswersComponent } from "../../../shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component";
+import { WhistleblowerIdentityComponent } from "../../../shared/partials/whistleblower-identity/whistleblower-identity.component";
+import { TipFilesWhistleblowerComponent } from "../../../shared/partials/tip-files-whistleblower/tip-files-whistleblower.component";
+import { WidgetWbFilesComponent } from "../../../shared/partials/widget-wbfiles/widget-wb-files.component";
+import { TipCommentsComponent } from "../../../shared/partials/tip-comments/tip-comments.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-tippage",
-  templateUrl: "./tippage.component.html"
+    selector: "src-tippage",
+    templateUrl: "./tippage.component.html",
+    standalone: true,
+    imports: [TipAdditionalQuestionnaireInviteComponent, TipInfoComponent, TipReceiverListComponent, NgClass, TipQuestionnaireAnswersComponent, WhistleblowerIdentityComponent, TipFilesWhistleblowerComponent, WidgetWbFilesComponent, TipCommentsComponent, TranslateModule, TranslatorPipe]
 })
 export class TippageComponent implements OnInit {
+  private fieldUtilities = inject(FieldUtilitiesService);
+  private wbTipResolver = inject(WbTipResolver);
+  private fieldUtilitiesService = inject(FieldUtilitiesService);
+  protected utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+  private activatedRoute = inject(ActivatedRoute);
+  private httpService = inject(HttpService);
+  protected wbTipService = inject(WbtipService);
+
   fileUploadUrl: string;
   answers = {};
   uploads: { [key: string]: any } = {};
@@ -28,9 +50,6 @@ export class TippageComponent implements OnInit {
   private submission: { _submission: WbTipData[] } = {_submission: []};
   protected tip: WbTipData;
 
-  constructor(private fieldUtilities: FieldUtilitiesService, private wbTipResolver: WbTipResolver, private fieldUtilitiesService: FieldUtilitiesService, protected utilsService: UtilsService, protected appDataService: AppDataService, private activatedRoute: ActivatedRoute, private httpService: HttpService, protected wbTipService: WbtipService) {
-  }
-
   ngOnInit() {
     const wpTip = this.wbTipResolver.dataModel;
     if (wpTip) {
@@ -182,4 +201,11 @@ export class TippageComponent implements OnInit {
   onFormChange() {
     this.fieldUtilitiesService.onAnswersUpdate(this);
   }
+  
+  shouldShowAdditionalQuestionnaire(): boolean {
+    const tip = this.wbTipService.tip;
+    return tip?.status !== 'closed' && 
+           !!tip?.context?.additional_questionnaire_id && 
+           tip?.questionnaires?.length === 1;
+  }
 }
diff --git a/client/app/src/pages/whistleblower/whistleblower.module.ts b/client/app/src/pages/whistleblower/whistleblower.module.ts
deleted file mode 100644
index ede75cd367..0000000000
--- a/client/app/src/pages/whistleblower/whistleblower.module.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule, NgOptimizedImage} from "@angular/common";
-import {HomepageComponent} from "@app/pages/whistleblower/homepage/homepage.component";
-import {TranslateModule} from "@ngx-translate/core";
-import {SharedModule} from "@app/shared.module";
-import {MarkdownModule} from "ngx-markdown";
-import {TippageComponent} from "@app/pages/whistleblower/tippage/tippage.component";
-import {
-  WhistleblowerIdentityComponent
-} from "@app/shared/partials/whistleblower-identity/whistleblower-identity.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {SubmissionComponent} from "@app/pages/whistleblower/submission/submission.component";
-import {ContextSelectionComponent} from "@app/pages/whistleblower/context-selection/context-selection.component";
-import {StepErrorComponent} from "@app/pages/whistleblower/step-error/step-error.component";
-import {
-  StepErrorEntryComponent
-} from "@app/pages/whistleblower/step-error/template/step-error-entry/step-error-entry.component";
-import {ReceiverSelectionComponent} from "@app/pages/whistleblower/receiver-selection/receiver-selection.component";
-import {ReceiverCardComponent} from "@app/pages/whistleblower/receiver-card/receiver-card.component";
-import {FormComponent} from "@app/pages/whistleblower/form/form.component";
-import {FormFieldInputsComponent} from "@app/pages/whistleblower/form-field-inputs/form-field-inputs.component";
-import {FormFieldInputComponent} from "@app/pages/whistleblower/form-field-input/form-field-input.component";
-import {
-  WhistleblowerIdentityFieldComponent
-} from "./fields/whistleblower-identity-field/whistleblower-identity-field.component";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {NgbInputDatepicker} from "@ng-bootstrap/ng-bootstrap";
-import {ReceiptComponent} from "@app/pages/whistleblower/receipt/receipt.component";
-import {
-  TipAdditionalQuestionnaireFormComponent
-} from "@app/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component";
-
-
-@NgModule({
-  declarations: [
-    HomepageComponent,
-    TippageComponent,
-    WhistleblowerIdentityComponent,
-    SubmissionComponent,
-    ContextSelectionComponent,
-    StepErrorComponent,
-    StepErrorEntryComponent,
-    ReceiverSelectionComponent,
-    ReceiverCardComponent,
-    FormComponent,
-    FormFieldInputsComponent,
-    FormFieldInputComponent,
-    WhistleblowerIdentityFieldComponent,
-    ReceiptComponent,
-    TipAdditionalQuestionnaireFormComponent,
-  ],
-  exports: [
-    HomepageComponent,
-    TippageComponent,
-    SubmissionComponent,
-    WhistleblowerIdentityFieldComponent,
-    ReceiptComponent
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule,
-    SharedModule,
-    MarkdownModule,
-    ReactiveFormsModule,
-    FormsModule,
-    NgSelectModule,
-    NgbInputDatepicker,
-    NgOptimizedImage,
-  ]
-})
-export class WhistleblowerModule {
-}
diff --git a/client/app/src/pages/wizard/wizard-routing.module.ts b/client/app/src/pages/wizard/wizard-routing.module.ts
deleted file mode 100644
index 10a62cd73a..0000000000
--- a/client/app/src/pages/wizard/wizard-routing.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {WizardComponent} from "@app/pages/wizard/wizard/wizard.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: WizardComponent,
-    pathMatch: "full",
-  }
-
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class WizardRoutingModule {
-}
diff --git a/client/app/src/pages/wizard/wizard.module.ts b/client/app/src/pages/wizard/wizard.module.ts
deleted file mode 100644
index 362a0acccd..0000000000
--- a/client/app/src/pages/wizard/wizard.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {SharedModule} from "@app/shared.module";
-import {WizardComponent} from "@app/pages/wizard/wizard/wizard.component";
-import {ProfileComponent} from "@app/pages/wizard/wizard/template/profile/profile.component";
-
-
-@NgModule({
-  declarations: [
-    WizardComponent,
-    ProfileComponent
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgSelectModule,
-    SharedModule
-  ]
-})
-export class WizardModule {
-}
diff --git a/client/app/src/pages/wizard/wizard.routes.ts b/client/app/src/pages/wizard/wizard.routes.ts
new file mode 100644
index 0000000000..9d5f3d6167
--- /dev/null
+++ b/client/app/src/pages/wizard/wizard.routes.ts
@@ -0,0 +1,9 @@
+import {Routes} from "@angular/router";
+
+export const wizardRoutes: Routes = [
+  {
+    path: "",
+    loadComponent: () => import('@app/pages/wizard/wizard/wizard.component').then(m => m.WizardComponent),
+    pathMatch: "full",
+  }
+];
\ No newline at end of file
diff --git a/client/app/src/pages/wizard/wizard/template/profile/profile.component.ts b/client/app/src/pages/wizard/wizard/template/profile/profile.component.ts
index 6bb044250e..96fd47bc1d 100644
--- a/client/app/src/pages/wizard/wizard/template/profile/profile.component.ts
+++ b/client/app/src/pages/wizard/wizard/template/profile/profile.component.ts
@@ -1,8 +1,9 @@
 import {Component} from "@angular/core";
 
 @Component({
-  selector: "src-profile",
-  templateUrl: "./profile.component.html"
+    selector: "src-profile",
+    templateUrl: "./profile.component.html",
+    standalone: true
 })
 export class ProfileComponent {
 
diff --git a/client/app/src/pages/wizard/wizard/wizard.component.html b/client/app/src/pages/wizard/wizard/wizard.component.html
index 246d3b1784..073cb31fc8 100644
--- a/client/app/src/pages/wizard/wizard/wizard.component.html
+++ b/client/app/src/pages/wizard/wizard/wizard.component.html
@@ -1,270 +1,306 @@
 <form name="wizardForm" novalidate>
-    <div *ngIf="step === 1" ngForm class="clearfix">
-        <div class="row wizard-block">
-            <div class="col-md-12">
-                <div class="title">{{'Welcome!'|translate}}</div>
-                <div>{{'The following step-by-step procedure will guide you through creating your whistleblowing platform.'|translate}}</div>
-            </div>
+  @if (step === 1) {
+    <div ngForm class="clearfix">
+      <div class="row wizard-block">
+        <div class="col-md-12">
+          <div class="title">{{'Welcome!'|translate}}</div>
+          <div>{{'The following step-by-step procedure will guide you through creating your whistleblowing platform.'|translate}}</div>
         </div>
-        <br>
+      </div>
+      <br>
         <div class="pager float-start">
-            <button class="ButtonNext btn btn-primary" (click)="step = 2">
-                <span>{{'Next'|translate}}</span>
-                <i class="fa-solid fa-arrow-circle-right"></i>
-            </button>
+          <button class="ButtonNext btn btn-primary" (click)="step = 2">
+            <span>{{'Next'|translate}}</span>
+            <i class="fa-solid fa-arrow-circle-right"></i>
+          </button>
         </div>
-    </div>
-    <div *ngIf="step === 2" ngForm #wizardFormStep2="ngForm" [ngClass]="{'was-validated': validation.step2}" class="clearfix">
+      </div>
+    }
+    @if (step === 2) {
+      <div ngForm #wizardFormStep2="ngForm" [ngClass]="{'was-validated': validation.step2}" class="clearfix">
         <div class="row wizard-block">
-            <div class="col-md-6">
-                <div class="row form-group">
-                    <label class="col-md-4" for="node_name">
-                        <span>{{'Project name'|translate}}</span>
-                        <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div class="col-md-8">
-                        <input id="node_name" name="node_name" class="form-control" [(ngModel)]="wizard.node_name" [placeholder]="'Project name' | translate" type="text" required>
-                    </div>
-                </div>
+          <div class="col-md-6">
+            <div class="row form-group">
+              <label class="col-md-4" for="node_name">
+                <span>{{'Project name'|translate}}</span>
+                <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+              </label>
+              <div class="col-md-8">
+                <input id="node_name" name="node_name" class="form-control" [(ngModel)]="wizard.node_name" [placeholder]="'Project name' | translate" type="text" required>
+              </div>
             </div>
+          </div>
         </div>
         <br>
-        <div class="pager float-start">
+          <div class="pager float-start">
             <button class="ButtonPrevious btn btn-primary" (click)="step = 1">
-                <i class="fa-solid fa-arrow-circle-left"></i>
-                <span>{{'Previous'|translate}}</span>
+              <i class="fa-solid fa-arrow-circle-left"></i>
+              <span>{{'Previous'|translate}}</span>
             </button>
             <button class="ButtonNext btn btn-primary" (click)="(validation.step2=true) && !wizardFormStep2.invalid && (step = 4)">
-                <span>{{'Next'|translate}}</span>
-                <i class="fa-solid fa-arrow-circle-right"></i>
+              <span>{{'Next'|translate}}</span>
+              <i class="fa-solid fa-arrow-circle-right"></i>
             </button>
+          </div>
         </div>
-    </div>
-    <div *ngIf="step === 3" ngForm #wizardFormStep3="ngForm" [ngClass]="{'was-validated': validation.step3}" class="clearfix">
-        <div class="row wizard-block">
+      }
+      @if (step === 3) {
+        <div ngForm #wizardFormStep3="ngForm" [ngClass]="{'was-validated': validation.step3}" class="clearfix">
+          <div class="row wizard-block">
             <div class="title">{{'Please choose a configuration profile:'|translate}}</div>
             <div class="col-md-6">
-                <src-profile></src-profile>
+              <src-profile></src-profile>
             </div>
-        </div>
-        <br>
-        <div class="pager float-start">
-            <button class="ButtonPrevious btn btn-primary" (click)="step = 2">
+          </div>
+          <br>
+            <div class="pager float-start">
+              <button class="ButtonPrevious btn btn-primary" (click)="step = 2">
                 <i class="fa-solid fa-arrow-circle-left"></i>
                 <span>{{'Previous'|translate}}</span>
-            </button>
-            <button class="ButtonNext btn btn-primary" (click)="(validation.step3=true) && !wizardFormStep3.invalid && (step = 5)">
+              </button>
+              <button class="ButtonNext btn btn-primary" (click)="(validation.step3=true) && !wizardFormStep3.invalid && (step = 5)">
                 <span>{{'Next'|translate}}</span>
                 <i class="fa-solid fa-arrow-circle-right"></i>
-            </button>
-        </div>
-    </div>
-    <div *ngIf="step === 4" ngForm #wizardFormStep4="ngForm" [ngClass]="{'was-validated': validation.step4}" class="clearfix">
-        <div class="row wizard-block">
-            <div class="col-md-12 title">{{'Admin'|translate}}</div>
-            <div class="col-md-6">
+              </button>
+            </div>
+          </div>
+        }
+        @if (step === 4) {
+          <div ngForm #wizardFormStep4="ngForm" [ngClass]="{'was-validated': validation.step4}" class="clearfix">
+            <div class="row wizard-block">
+              <div class="col-md-12 title">{{'Admin'|translate}}</div>
+              <div class="col-md-6">
                 <div class="row form-group">
-                    <label class="col-md-4" for="admin_username">
-                        <span>{{'Username'|translate}}</span>
-                        <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div class="col-md-8">
-                        <input id="admin_username" name="admin_username" class="form-control" [(ngModel)]="wizard.admin_username" type="text" placeholder="{{'Username' | translate}}" autocomplete="off" required>
-                    </div>
+                  <label class="col-md-4" for="admin_username">
+                    <span>{{'Username'|translate}}</span>
+                    <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+                  </label>
+                  <div class="col-md-8">
+                    <input id="admin_username" name="admin_username" class="form-control" [(ngModel)]="wizard.admin_username" type="text" placeholder="{{'Username' | translate}}" autocomplete="off" required>
+                  </div>
                 </div>
                 <div class="row form-group">
-                    <label class="col-md-4" for="admin_name">
-                        <span>{{'Name'|translate}}</span>
-                        <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div class="col-md-8">
-                        <input id="admin_name" name="admin_name" class="form-control" [(ngModel)]="wizard.admin_name" type="text" placeholder="{{'Name' | translate}}" required>
-                    </div>
+                  <label class="col-md-4" for="admin_name">
+                    <span>{{'Name'|translate}}</span>
+                    <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+                  </label>
+                  <div class="col-md-8">
+                    <input id="admin_name" name="admin_name" class="form-control" [(ngModel)]="wizard.admin_name" type="text" placeholder="{{'Name' | translate}}" required>
+                  </div>
                 </div>
                 <div class="row form-group">
-                    <label class="col-md-4" for="admin_mail_address">
-                        <span>{{'Email address'|translate}}</span>
-                        <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div class="col-md-8">
-                        <input id="admin_mail_address" name="admin_mail_address" class="form-control" #admin_email="ngModel" [(ngModel)]="wizard.admin_mail_address" placeholder="{{'Email address' | translate}}" [pattern]="emailRegexp" type="text" [ngClass]="{'is-invalid': wizardFormStep4.valid && (admin_email?.errors?.['required'] || wizardFormStep4?.errors?.['pattern'])}" required>
-                        <div class="text-danger" *ngIf="admin_email?.errors?.['pattern']">
-                            <span>{{'Invalid email address'|translate}}</span>
-                        </div>
-                    </div>
+                  <label class="col-md-4" for="admin_mail_address">
+                    <span>{{'Email address'|translate}}</span>
+                    <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+                  </label>
+                  <div class="col-md-8">
+                    <input id="admin_mail_address" name="admin_mail_address" class="form-control" #admin_email="ngModel" [(ngModel)]="wizard.admin_mail_address" placeholder="{{'Email address' | translate}}" [pattern]="emailRegexp" type="text" [ngClass]="{'is-invalid': wizardFormStep4.valid && (admin_email?.errors?.['required'] || wizardFormStep4?.errors?.['pattern'])}" required>
+                    @if (admin_email?.errors?.['pattern']) {
+                      <div class="text-danger">
+                        <span>{{'Invalid email address'|translate}}</span>
+                      </div>
+                    }
+                  </div>
                 </div>
                 <div class="row form-group">
-                    <label class="col-md-4" for="admin_password">
-                        <span>{{'Password'|translate}}</span>
-                        <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div class="col-md-8">
-                        <input id="admin_password" name="admin_password" #password_admin="ngModel" class="form-control" [(ngModel)]="wizard.admin_password" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': wizardFormStep4.valid && (password_admin?.errors?.['required'] || (password_admin.errors?.['passwordStrengthValidator']))}" (passwordStrengthChange)="onPasswordStrengthChange($event)" required passwordStrengthValidator />
-                        <src-password-meter *ngIf="password_score>0" [passwordStrengthScore]='password_score'></src-password-meter>
-                        <div class="text-danger" *ngIf="!password_admin?.errors?.['required'] && password_admin.errors?.['passwordStrengthValidator']">
-                            <p>{{'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.'|translate}}</p>
-                        </div>
-                    </div>
+                  <label class="col-md-4" for="admin_password">
+                    <span>{{'Password'|translate}}</span>
+                    <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+                  </label>
+                  <div class="col-md-8">
+                    <input id="admin_password" name="admin_password" #password_admin="ngModel" class="form-control" [(ngModel)]="wizard.admin_password" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': wizardFormStep4.valid && (password_admin?.errors?.['required'] || (password_admin.errors?.['passwordStrengthValidator']))}" (passwordStrengthChange)="onPasswordStrengthChange($event)" required passwordStrengthValidator />
+                    @if (password_score>0) {
+                      <src-password-meter [passwordStrengthScore]='password_score'></src-password-meter>
+                    }
+                    @if (!password_admin?.errors?.['required'] && password_admin.errors?.['passwordStrengthValidator']) {
+                      <div class="text-danger">
+                        <p>{{'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.'|translate}}</p>
+                      </div>
+                    }
+                  </div>
                 </div>
                 <div class="row form-group">
-                    <label class="col-md-4" for="admin_password_check">
-                        <span>{{'Password'|translate}}</span> ( <span>{{'Confirm'|translate}}</span>) <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-                    </label>
-                    <div class="col-md-8">
-                        <input id="admin_password_check" name="admin_password_check" class="form-control" [(ngModel)]="admin_check_password" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': wizardFormStep4.valid && (!password_admin.errors?.['passwordStrengthValidator'] && wizard.admin_password && (wizard.admin_password !== admin_check_password))}" required />
-                        <div class="text-danger" *ngIf="wizardFormStep4.valid  && (!password_admin.errors?.['passwordStrengthValidator'] && wizard.admin_password && (wizard.admin_password !== admin_check_password))">{{'The two passwords do not match'|translate}}</div>
-                    </div>
+                  <label class="col-md-4" for="admin_password_check">
+                    <span>{{'Password'|translate}}</span> ( <span>{{'Confirm'|translate}}</span>) <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+                  </label>
+                  <div class="col-md-8">
+                    <input id="admin_password_check" name="admin_password_check" class="form-control" [(ngModel)]="admin_check_password" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': wizardFormStep4.valid && (!password_admin.errors?.['passwordStrengthValidator'] && wizard.admin_password && (wizard.admin_password !== admin_check_password))}" required />
+                    @if (wizardFormStep4.valid  && (!password_admin.errors?.['passwordStrengthValidator'] && wizard.admin_password && (wizard.admin_password !== admin_check_password))) {
+                      <div class="text-danger">{{'The two passwords do not match'|translate}}</div>
+                    }
+                  </div>
                 </div>
                 <div class="row form-group">
-                    <div class="col-md-12">
-                        <div class="form-check">
-                            <input id="admin_escrow_checkbox" class="admin-escrow form-check-input" type="checkbox" name="wizard.admin_escrow" [(ngModel)]="wizard.admin_escrow">
-                            <label class="form-check-label" for="admin_escrow_checkbox">{{'Make it possible for this admin to reset user passwords.'|translate}}</label>
-                        </div>
-                        <div>{{'We advise selecting this option if you would like to protect data from being lost in the situation where recipients lose their passwords. On the other hand, we would not advise using this feature if you want to setup a system where only recipients are able to access submissions.'|translate}}</div>
+                  <div class="col-md-12">
+                    <div class="form-check">
+                      <input id="admin_escrow_checkbox" class="admin-escrow form-check-input" type="checkbox" name="wizard.admin_escrow" [(ngModel)]="wizard.admin_escrow">
+                      <label class="form-check-label" for="admin_escrow_checkbox">{{'Make it possible for this admin to reset user passwords.'|translate}}</label>
                     </div>
+                    <div>{{'We advise selecting this option if you would like to protect data from being lost in the situation where recipients lose their passwords. On the other hand, we would not advise using this feature if you want to setup a system where only recipients are able to access submissions.'|translate}}</div>
+                  </div>
                 </div>
+              </div>
             </div>
-        </div>
-        <br>
-        <div class="pager float-start">
-            <button class="ButtonPrevious btn btn-primary" (click)="step = 2">
-                <i class="fa-solid fa-arrow-circle-left"></i>
-                <span>{{'Previous'|translate}}</span>
-            </button>
-            <button class="ButtonNext btn btn-primary" (click)="(validation.step4=true) && !(wizardFormStep4.invalid || (wizard.admin_password !== admin_check_password)) && (step = 5)">
-                <span>{{'Next'|translate}}</span>
-                <i class="fa-solid fa-arrow-circle-right"></i>
-            </button>
-        </div>
-    </div>
-    <div *ngIf="step === 5" ngForm #wizardFormStep5="ngForm" [ngClass]="{'was-validated': validation.step5}" class="clearfix">
-        <div class="row wizard-block">
-            <div class="col-md-12 title">{{'Recipient'|translate}}</div>
-            <div class="col-md-6">
-                <div *ngIf="!wizard.skip_recipient_account_creation">
-                    <div class="row form-group">
+            <br>
+              <div class="pager float-start">
+                <button class="ButtonPrevious btn btn-primary" (click)="step = 2">
+                  <i class="fa-solid fa-arrow-circle-left"></i>
+                  <span>{{'Previous'|translate}}</span>
+                </button>
+                <button class="ButtonNext btn btn-primary" (click)="(validation.step4=true) && !(wizardFormStep4.invalid || (wizard.admin_password !== admin_check_password)) && (step = 5)">
+                  <span>{{'Next'|translate}}</span>
+                  <i class="fa-solid fa-arrow-circle-right"></i>
+                </button>
+              </div>
+            </div>
+          }
+          @if (step === 5) {
+            <div ngForm #wizardFormStep5="ngForm" [ngClass]="{'was-validated': validation.step5}" class="clearfix">
+              <div class="row wizard-block">
+                <div class="col-md-12 title">{{'Recipient'|translate}}</div>
+                <div class="col-md-6">
+                  @if (!wizard.skip_recipient_account_creation) {
+                    <div>
+                      <div class="row form-group">
                         <label class="col-md-4" for="receiver_username">
-                            <span>{{'Username'|translate}}</span>
-                            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+                          <span>{{'Username'|translate}}</span>
+                          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
                         </label>
                         <div class="col-md-8">
-                            <input id="receiver_username" name="receiver_username" class="form-control" [(ngModel)]="wizard.receiver_username" autocomplete="off" type="text" placeholder="{{'Username' | translate}}" [ngClass]="{'is-invalid': recipientDuplicate}" required>
-                            <div class="text-danger" *ngIf="recipientDuplicate && wizard.receiver_username === wizard.admin_username">
-                                <span>{{'Please choose a different username.'|translate}}</span>
+                          <input id="receiver_username" name="receiver_username" class="form-control" [(ngModel)]="wizard.receiver_username" autocomplete="off" type="text" placeholder="{{'Username' | translate}}" [ngClass]="{'is-invalid': recipientDuplicate}" required>
+                          @if (recipientDuplicate && wizard.receiver_username === wizard.admin_username) {
+                            <div class="text-danger">
+                              <span>{{'Please choose a different username.'|translate}}</span>
                             </div>
+                          }
                         </div>
-                    </div>
-                    <div class="row form-group">
+                      </div>
+                      <div class="row form-group">
                         <label class="col-md-4" for="receiver_name">
-                            <span>Name</span>
-                            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+                          <span>Name</span>
+                          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
                         </label>
                         <div class="col-md-8">
-                            <input id="receiver_name" name="receiver_name" class="form-control" [(ngModel)]="wizard.receiver_name" type="text" placeholder="{{'Name' | translate}}" [disabled]="wizard.skip_recipient_account_creation" required>
+                          <input id="receiver_name" name="receiver_name" class="form-control" [(ngModel)]="wizard.receiver_name" type="text" placeholder="{{'Name' | translate}}" [disabled]="wizard.skip_recipient_account_creation" required>
                         </div>
-                    </div>
-                    <div class="row form-group">
+                      </div>
+                      <div class="row form-group">
                         <label class="col-md-4" for="receiver_mail_address">
-                            <span>{{'Email address'|translate}}</span>
-                            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+                          <span>{{'Email address'|translate}}</span>
+                          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
                         </label>
                         <div class="col-md-8">
-                            <input id="receiver_mail_address" name="receiver_mail_address" #receiver_email="ngModel" class="form-control" [(ngModel)]="wizard.receiver_mail_address" [pattern]="emailRegexp" type="text" placeholder="{{'Email address' | translate}}" [ngClass]="{'is-invalid': validation.step4 && wizardFormStep5.valid && receiver_email?.errors?.['required'] || receiver_email?.errors?.['pattern']}" [disabled]="wizard.skip_recipient_account_creation" required>
-                            <div class="text-danger" *ngIf="receiver_email?.errors?.['pattern']">
-                                <span>{{'Invalid email address'|translate}}</span>
+                          <input id="receiver_mail_address" name="receiver_mail_address" #receiver_email="ngModel" class="form-control" [(ngModel)]="wizard.receiver_mail_address" [pattern]="emailRegexp" type="text" placeholder="{{'Email address' | translate}}" [ngClass]="{'is-invalid': validation.step4 && wizardFormStep5.valid && receiver_email?.errors?.['required'] || receiver_email?.errors?.['pattern']}" [disabled]="wizard.skip_recipient_account_creation" required>
+                          @if (receiver_email?.errors?.['pattern']) {
+                            <div class="text-danger">
+                              <span>{{'Invalid email address'|translate}}</span>
                             </div>
+                          }
                         </div>
-                    </div>
-                    <div class="row form-group">
+                      </div>
+                      <div class="row form-group">
                         <label class="col-md-4" for="receiver_password">
-                            <span>{{'Password'|translate}}</span>
-                            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+                          <span>{{'Password'|translate}}</span>
+                          <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
                         </label>
                         <div class="col-md-8">
-                            <input id="receiver_password" name="receiver_password" class="form-control" [(ngModel)]="wizard.receiver_password" #password_receiver="ngModel" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': validation.step4 && wizardFormStep5.valid && (password_receiver?.errors?.['required'] || (password_receiver?.errors?.['passwordStrengthValidator']))}" (passwordStrengthChange)="onPasswordStrengthChange($event)" required passwordStrengthValidator />
-                            <src-password-meter *ngIf="password_score>0" [passwordStrengthScore]='password_score'></src-password-meter>
-                            <div class="text-danger" *ngIf="!password_receiver?.errors?.['required'] && password_receiver?.errors?.['passwordStrengthValidator']">
-                                <p>{{'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.'|translate}}</p>
+                          <input id="receiver_password" name="receiver_password" class="form-control" [(ngModel)]="wizard.receiver_password" #password_receiver="ngModel" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': validation.step4 && wizardFormStep5.valid && (password_receiver?.errors?.['required'] || (password_receiver?.errors?.['passwordStrengthValidator']))}" (passwordStrengthChange)="onPasswordStrengthChange($event)" required passwordStrengthValidator />
+                          @if (password_score>0) {
+                            <src-password-meter [passwordStrengthScore]='password_score'></src-password-meter>
+                          }
+                          @if (!password_receiver?.errors?.['required'] && password_receiver?.errors?.['passwordStrengthValidator']) {
+                            <div class="text-danger">
+                              <p>{{'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.'|translate}}</p>
                             </div>
+                          }
                         </div>
-                    </div>
-                    <div class="row form-group">
+                      </div>
+                      <div class="row form-group">
                         <label class="col-md-4" for="receiver_password_check">
-                            <span>{{'Password'|translate}}</span> (<span>{{'Confirm'|translate}}</span>)<span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+                          <span>{{'Password'|translate}}</span> (<span>{{'Confirm'|translate}}</span>)<span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
                         </label>
                         <div class="col-md-8">
-                            <input id="receiver_password_check" name="receiver_password_check" class="form-control" [(ngModel)]="recipient_check_password" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': validation.step4 && (!password_receiver.errors?.['passwordStrengthValidator'] && wizard.receiver_password && (wizard.receiver_password !== recipient_check_password))}" required />
-                            <div class="text-danger" *ngIf="validation.step4 && (!password_receiver?.errors?.['passwordStrengthValidator'] && recipient_check_password.length>0 && wizard.receiver_password && (wizard.receiver_password !== recipient_check_password))">{{'The two passwords do not match'|translate}}</div>
+                          <input id="receiver_password_check" name="receiver_password_check" class="form-control" [(ngModel)]="recipient_check_password" type="password" placeholder="{{'Password' | translate}}" autocomplete="off" [ngClass]="{'is-invalid': validation.step4 && (!password_receiver.errors?.['passwordStrengthValidator'] && wizard.receiver_password && (wizard.receiver_password !== recipient_check_password))}" required />
+                          @if (validation.step4 && (!password_receiver?.errors?.['passwordStrengthValidator'] && recipient_check_password.length>0 && wizard.receiver_password && (wizard.receiver_password !== recipient_check_password))) {
+                            <div class="text-danger">{{'The two passwords do not match'|translate}}</div>
+                          }
                         </div>
+                      </div>
                     </div>
-                </div>
-                <div class="row form-group">
+                  }
+                  <div class="row form-group">
                     <div class="col-md-12">
-                        <div class="form-check">
-                            <input id="skip_recipient_account_creation_checkbox" name="skip_recipient_account_creation_checkbox" class="form-check-input" type="checkbox" [(ngModel)]="wizard.skip_recipient_account_creation">
-                            <label class="form-check-label" for="skip_recipient_account_creation_checkbox">{{'Skip the recipient account creation.'|translate}}</label>
-                        </div>
+                      <div class="form-check">
+                        <input id="skip_recipient_account_creation_checkbox" name="skip_recipient_account_creation_checkbox" class="form-check-input" type="checkbox" [(ngModel)]="wizard.skip_recipient_account_creation">
+                        <label class="form-check-label" for="skip_recipient_account_creation_checkbox">{{'Skip the recipient account creation.'|translate}}</label>
+                      </div>
                     </div>
+                  </div>
                 </div>
-            </div>
-        </div>
-        <br>
-        <div class="pager float-start">
-            <button class="ButtonPrevious btn btn-primary" (click)="step = 4">
-                <i class="fa-solid fa-arrow-circle-left"></i>
-                <span>{{'Previous'|translate}}</span>
-            </button>
-            <button class="ButtonNext btn btn-primary" (click)="(validation.step5 = true) && validation.step4 && (wizard.receiver_password === recipient_check_password) && (wizard.skip_recipient_account_creation || !(wizardFormStep5.invalid || (validateDuplicateRecipient()))) && (step = 6)">
-                <span>{{'Next'|translate}}</span>
-                <i class="fa-solid fa-arrow-circle-right"></i>
-            </button>
-        </div>
-    </div>
-    <div *ngIf="step === 6" ngForm #wizardFormStep6="ngForm" [ngClass]="{'was-validated': validation.step6}" class="clearfix">
-        <div class="row wizard-block">
-            <div class="col-md-12">
-                <div class="form-group">
-                    <div class="title">{{'License'|translate}}</div>
-                    <div class="tos-text">{{license|translate}}</div>
-                    <div class="form-check">
+              </div>
+              <br>
+                <div class="pager float-start">
+                  <button class="ButtonPrevious btn btn-primary" (click)="step = 4">
+                    <i class="fa-solid fa-arrow-circle-left"></i>
+                    <span>{{'Previous'|translate}}</span>
+                  </button>
+                  <button class="ButtonNext btn btn-primary" (click)="(validation.step5 = true) && validation.step4 && (wizard.receiver_password === recipient_check_password) && (wizard.skip_recipient_account_creation || !(wizardFormStep5.invalid || (validateDuplicateRecipient()))) && (step = 6)">
+                    <span>{{'Next'|translate}}</span>
+                    <i class="fa-solid fa-arrow-circle-right"></i>
+                  </button>
+                </div>
+              </div>
+            }
+            @if (step === 6) {
+              <div ngForm #wizardFormStep6="ngForm" [ngClass]="{'was-validated': validation.step6}" class="clearfix">
+                <div class="row wizard-block">
+                  <div class="col-md-12">
+                    <div class="form-group">
+                      <div class="title">{{'License'|translate}}</div>
+                      <div class="tos-text">{{license|translate}}</div>
+                      <div class="form-check">
                         <input id="tos_agreement_checkbox" name="tos_agreement_checkbox" class="tos-agreement-input form-check-input" type="checkbox" [(ngModel)]="tosAccept" required>
                         <label class="tos-agreement-label form-check-label" [ngClass]="{'text-danger': validation.step6 && wizardFormStep6.invalid}" for="tos_agreement_checkbox">{{'I have read and agree to the terms of the license.'|translate}}</label>
+                      </div>
+                      @if (appDataService.public.node.root_tenant) {
+                        <div class="form-check">
+                          <input id="enable_developers_exception_notification_checkbox" class="form-check-input" name="wizard.enable_developers_exception_notification_checkbox" [(ngModel)]="wizard.enable_developers_exception_notification" type="checkbox">
+                          <label for="enable_developers_exception_notification_checkbox">{{'Notify developers of software problems'|translate}}</label>
+                          <div>{{'By enabling this feature, you will contribute to the development and security of the platform.'|translate}}</div>
+                        </div>
+                      }
                     </div>
-                    <div class="form-check" *ngIf="appDataService.public.node.root_tenant">
-                        <input id="enable_developers_exception_notification_checkbox" class="form-check-input" name="wizard.enable_developers_exception_notification_checkbox" [(ngModel)]="wizard.enable_developers_exception_notification" type="checkbox">
-                        <label for="enable_developers_exception_notification_checkbox">{{'Notify developers of software problems'|translate}}</label>
-                        <div>{{'By enabling this feature, you will contribute to the development and security of the platform.'|translate}}</div>
-                    </div>
+                  </div>
                 </div>
-            </div>
-        </div>
-        <br>
-        <div class="pager float-start">
-            <button class="ButtonPrevious btn btn-primary" (click)="step = 5">
-                <i class="fa-solid fa-arrow-circle-left"></i>
-                <span>{{'Previous'|translate}}</span>
-            </button>
-            <button class="ButtonNext btn btn-primary" (click)="(validation.step6 = true) && !wizardFormStep6.invalid &&  complete()">
-                <span>{{'Next'|translate}}</span>
-                <i class="fa-solid fa-arrow-circle-right"></i>
-            </button>
-        </div>
-    </div>
-    <div *ngIf="step === 7" class="clearfix">
-        <div class="row wizard-block">
-            <div class="col-md-10">
-                <div class="congratulations">
-                    <div class="title" role="alert">{{'Congratulations!'|translate}}</div>
-                    <div>{{'You have completed the platform wizard.'|translate}}</div>
+                <br>
+                  <div class="pager float-start">
+                    <button class="ButtonPrevious btn btn-primary" (click)="step = 5">
+                      <i class="fa-solid fa-arrow-circle-left"></i>
+                      <span>{{'Previous'|translate}}</span>
+                    </button>
+                    <button class="ButtonNext btn btn-primary" (click)="(validation.step6 = true) && !wizardFormStep6.invalid &&  complete()">
+                      <span>{{'Next'|translate}}</span>
+                      <i class="fa-solid fa-arrow-circle-right"></i>
+                    </button>
+                  </div>
                 </div>
-            </div>
-        </div>
-        <br>
-        <div class="pager float-start">
-            <button name="proceed" id="proceed" class="ButtonNext btn btn-primary" (click)="goToAdminInterface()" type="submit">
-                <span>{{'Proceed'|translate}}</span>
-            </button>
-        </div>
-    </div>
-</form>
+              }
+              @if (step === 7) {
+                <div class="clearfix">
+                  <div class="row wizard-block">
+                    <div class="col-md-10">
+                      <div class="congratulations">
+                        <div class="title" role="alert">{{'Congratulations!'|translate}}</div>
+                        <div>{{'You have completed the platform wizard.'|translate}}</div>
+                      </div>
+                    </div>
+                  </div>
+                  <br>
+                    <div class="pager float-start">
+                      <button name="proceed" id="proceed" class="ButtonNext btn btn-primary" (click)="goToAdminInterface()" type="submit">
+                        <span>{{'Proceed'|translate}}</span>
+                      </button>
+                    </div>
+                  </div>
+                }
+              </form>
diff --git a/client/app/src/pages/wizard/wizard/wizard.component.ts b/client/app/src/pages/wizard/wizard/wizard.component.ts
index eae200b8b9..37134396fc 100644
--- a/client/app/src/pages/wizard/wizard/wizard.component.ts
+++ b/client/app/src/pages/wizard/wizard/wizard.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {Constants} from "@app/shared/constants/constants";
 import {Router} from "@angular/router";
 import {HttpClient} from "@angular/common/http";
@@ -9,12 +9,31 @@ import {TranslationService} from "@app/services/helper/translation.service";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {TitleService} from "@app/shared/services/title.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { ProfileComponent } from "./template/profile/profile.component";
+import { PasswordStrengthValidatorDirective } from "../../../shared/directive/password-strength-validator.directive";
+import { PasswordMeterComponent } from "../../../shared/components/password-meter/password-meter.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-wizard",
-  templateUrl: "./wizard.component.html"
+    selector: "src-wizard",
+    templateUrl: "./wizard.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, ProfileComponent, PasswordStrengthValidatorDirective, PasswordMeterComponent, TranslateModule, TranslatorPipe]
 })
 export class WizardComponent implements OnInit {
+  private titleService = inject(TitleService);
+  private translationService = inject(TranslationService);
+  private router = inject(Router);
+  private http = inject(HttpClient);
+  private authenticationService = inject(AuthenticationService);
+  private httpService = inject(HttpService);
+  protected appDataService = inject(AppDataService);
+  protected appConfigService = inject(AppConfigService);
+  private utilsService = inject(UtilsService);
+
   step: number = 1;
   emailRegexp = Constants.emailRegexp;
   password_score = 0;
@@ -49,9 +68,6 @@ export class WizardComponent implements OnInit {
     "enable_developers_exception_notification": false
   };
 
-  constructor(private titleService: TitleService, private translationService: TranslationService, private router: Router, private http: HttpClient, private authenticationService: AuthenticationService, private httpService: HttpService, protected appDataService: AppDataService, protected appConfigService: AppConfigService, private utilsService: UtilsService) {
-  }
-
   ngOnInit() {
     if (this.appDataService.public.node.wizard_done) {
       this.router.navigate(["/"]).then(_ => {
diff --git a/client/app/src/services/helper/authentication.service.ts b/client/app/src/services/helper/authentication.service.ts
index b6faee93da..430dda448f 100644
--- a/client/app/src/services/helper/authentication.service.ts
+++ b/client/app/src/services/helper/authentication.service.ts
@@ -1,4 +1,4 @@
-import {Injectable, SecurityContext} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {LoginDataRef} from "@app/pages/auth/login/model/login-model";
 import {HttpService} from "@app/shared/services/http.service";
 import {Observable} from "rxjs";
@@ -10,20 +10,26 @@ import {TitleService} from "@app/shared/services/title.service";
 import {HttpClient, HttpErrorResponse, HttpHeaders} from "@angular/common/http";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {OtkcAccessComponent} from "@app/shared/modals/otkc-access/otkc-access.component";
-import {DomSanitizer} from '@angular/platform-browser';
-
 
 @Injectable({
   providedIn: "root"
 })
 export class AuthenticationService {
+  private http = inject(HttpClient);
+  private modalService = inject(NgbModal);
+  private titleService = inject(TitleService);
+  private activatedRoute = inject(ActivatedRoute);
+  private httpService = inject(HttpService);
+  private appDataService = inject(AppDataService);
+  private router = inject(Router);
+
   public session: any = undefined;
   permissions: { can_upload_files: boolean }
   loginInProgress: boolean = false;
   requireAuthCode: boolean = false;
   loginData: LoginDataRef = new LoginDataRef();
 
-  constructor(private http: HttpClient, private modalService: NgbModal,private titleService: TitleService, private activatedRoute: ActivatedRoute, private httpService: HttpService, private appDataService: AppDataService, private router: Router, private sanitizer: DomSanitizer) {
+  constructor() {
     this.init();
   }
 
@@ -103,11 +109,9 @@ export class AuthenticationService {
     requestObservable.subscribe(
       {
         next: (response: Session) => {
+          this.reset()
           if (response.redirect) {
-            response.redirect = this.sanitizer.sanitize(SecurityContext.URL, response.redirect) || '';
-	    if (response.redirect) {
-              this.router.navigate([response.redirect]).then();
-	    }
+            this.router.navigate([response.redirect]).then();
           }
           this.setSession(response);
           if (response && response && response.properties && response.properties.new_receipt) {
@@ -130,39 +134,36 @@ export class AuthenticationService {
             };
             return;
           }
-
-          if (this.session.role === "whistleblower") {
-            if (password) {
-              this.appDataService.receipt = password;
-              this.titleService.setPage("tippage");
-            } else if (this.session.properties.operator_session) {
-              this.router.navigate(['/']);
-            }
+          const src = this.activatedRoute.snapshot.queryParams['src'];
+          if (src) {
+            this.router.navigate([src]).then();
+            location.replace(src);
           } else {
-            if (!callback) {
-              this.reset();
-
-              let redirect = this.activatedRoute.snapshot.queryParams['redirect'] || undefined;
-              redirect = this.activatedRoute.snapshot.queryParams['redirect'] || '/';
-              redirect = decodeURIComponent(redirect);
-
-	      if (redirect !== "/") {
-                redirect = this.sanitizer.sanitize(SecurityContext.URL, redirect) || '';
-
-		// Honor only local redirects
-                if (redirect.startsWith("/")) {
-                  this.router.navigate([redirect]);
-		}
-              } else {
-                this.appDataService.updateShowLoadingPanel(true);
-                this.router.navigate([this.session.homepage], {
-                  queryParams: this.activatedRoute.snapshot.queryParams,
-                  queryParamsHandling: "merge"
-                }).then();
+            if (this.session.role === "whistleblower") {
+              if (password) {
+                this.appDataService.receipt = password;
+                this.titleService.setPage("tippage");
+              } else if (this.session.properties.operator_session) {
+                this.router.navigate(['/']);
+              }
+            } else {
+              if (!callback) {
+                let redirect = this.activatedRoute.snapshot.queryParams['redirect'] || undefined;
+                this.reset();
+                redirect = this.activatedRoute.snapshot.queryParams['redirect'] || '/';
+                const redirectURL = decodeURIComponent(redirect);
+                if (redirectURL !== "/") {
+                  this.router.navigate([redirectURL]);
+                } else {
+                  this.appDataService.updateShowLoadingPanel(true);
+                  this.router.navigate([this.session.homepage], {
+                    queryParams: this.activatedRoute.snapshot.queryParams,
+                    queryParamsHandling: "merge"
+                  }).then();
+                }
               }
             }
           }
-
           if (callback) {
             callback();
           }
diff --git a/client/app/src/services/helper/custom-file-loader-service.service.ts b/client/app/src/services/helper/custom-file-loader-service.service.ts
index bea361baf4..4bf1f23d59 100644
--- a/client/app/src/services/helper/custom-file-loader-service.service.ts
+++ b/client/app/src/services/helper/custom-file-loader-service.service.ts
@@ -1,12 +1,12 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import {AppDataService} from "@app/app-data.service";
 
 @Injectable({
   providedIn: 'root'
 })
 export class CustomFileLoaderServiceService {
+  private appDataService = inject(AppDataService);
 
-  constructor(private appDataService: AppDataService) {}
 
   loadCustomFiles(): void {
     if (window.location.pathname === '/' && this.appDataService.public.node) {
diff --git a/client/app/src/services/helper/receiver-tip.service.ts b/client/app/src/services/helper/receiver-tip.service.ts
index 5f9610582a..f60dec0c16 100644
--- a/client/app/src/services/helper/receiver-tip.service.ts
+++ b/client/app/src/services/helper/receiver-tip.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {HttpService} from "@app/shared/services/http.service";
 import {AppDataService} from "@app/app-data.service";
 import {RecieverTipData} from "@app/models/reciever/reciever-tip-data";
@@ -9,10 +9,11 @@ import { RedactionData } from "@app/models/component-model/redaction";
   providedIn: "root"
 })
 export class ReceiverTipService {
-  tip: RecieverTipData = new RecieverTipData();
+  private httpService = inject(HttpService);
+  private appDataService = inject(AppDataService);
+  protected utils = inject(UtilsService);
 
-  constructor(private httpService: HttpService, private appDataService: AppDataService,protected utils: UtilsService) {
-  }
+  tip: RecieverTipData = new RecieverTipData();
 
   reset() {
     this.tip = new RecieverTipData();
diff --git a/client/app/src/services/helper/resource-loader.service.ts b/client/app/src/services/helper/resource-loader.service.ts
deleted file mode 100644
index 1ffab05d4d..0000000000
--- a/client/app/src/services/helper/resource-loader.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ResourceLoaderService {
-
-  // Function to dynamically load a stylesheet
-  loadStyle(href: string): void {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = href;
-    document.head.appendChild(link);
-  }
-}
diff --git a/client/app/src/services/helper/submission.service.ts b/client/app/src/services/helper/submission.service.ts
index 6a63a79ba5..375e6ae09a 100644
--- a/client/app/src/services/helper/submission.service.ts
+++ b/client/app/src/services/helper/submission.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {Context} from "@app/models/reciever/reciever-tip-data";
@@ -8,6 +8,9 @@ import {submissionResourceModel} from "@app/models/whistleblower/submission-reso
   providedIn: "root",
 })
 export class SubmissionService {
+  private httpService = inject(HttpService);
+  private appDataService = inject(AppDataService);
+
   submission: submissionResourceModel = new submissionResourceModel();
   context: Context;
   receivers: string[] = [];
@@ -19,9 +22,6 @@ export class SubmissionService {
   uploads: { [key: string]: any };
   private sharedData: Flow[] = [];
 
-  constructor(private httpService: HttpService, private appDataService: AppDataService) {
-  }
-
   setContextReceivers(context_id: number) {
     this.context = this.appDataService.contexts_by_id[context_id];
 
diff --git a/client/app/src/services/helper/translation.service.ts b/client/app/src/services/helper/translation.service.ts
index fc35749236..896208802a 100644
--- a/client/app/src/services/helper/translation.service.ts
+++ b/client/app/src/services/helper/translation.service.ts
@@ -1,5 +1,5 @@
 import {BehaviorSubject} from 'rxjs';
-import {Inject, Injectable, Renderer2} from "@angular/core";
+import { Injectable, Renderer2, inject } from "@angular/core";
 import {LangChangeEvent, TranslateService} from "@ngx-translate/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {DOCUMENT} from "@angular/common";
@@ -8,6 +8,10 @@ import {DOCUMENT} from "@angular/common";
   providedIn: "root",
 })
 export class TranslationService {
+  private utilsService = inject(UtilsService);
+  protected translate = inject(TranslateService);
+  private document = inject<Document>(DOCUMENT);
+
   language = "";
 
   private currentLocale = new BehaviorSubject<string>("");
@@ -19,10 +23,31 @@ export class TranslationService {
 
   public currentDirection: string;
 
-  constructor(private utilsService: UtilsService, protected translate: TranslateService, @Inject(DOCUMENT) private document: Document) {
+  constructor() {
     this.currentDirection = this.utilsService.getDirection(this.translate.currentLang);
   }
 
+  handleLTRandRTLStyling(event: LangChangeEvent, renderer: Renderer2) {
+    let waitForLoader = false;
+    const newDirection = this.utilsService.getDirection(event.lang);
+    if (newDirection !== this.currentDirection) {
+      waitForLoader = true;
+      this.utilsService.removeStyles(renderer, this.document, "css/styles-" + this.currentDirection + ".css");
+
+      const lang = this.translate.currentLang;
+      const cssFilename = ['ar', 'dv', 'fa', 'fa_AF', 'he', 'ps', 'ug', 'ur'].includes(lang) ? 'styles-rtl.css' : 'styles-ltr.css';
+      const cssPath = `css/${cssFilename}`;
+      const newLinkElement = renderer.createElement('link');
+      renderer.setAttribute(newLinkElement, 'rel', 'stylesheet');
+      renderer.setAttribute(newLinkElement, 'type', 'text/css');
+      renderer.setAttribute(newLinkElement, 'href', cssPath);
+      const firstLink = this.document.head.querySelector('link');
+      renderer.insertBefore(this.document.head, newLinkElement, firstLink);
+      this.currentDirection = newDirection;
+    }
+    return waitForLoader;
+  }
+
   onChange(changedLanguage: string, callback?: () => void) {
     this.language = changedLanguage;
     this.changeLocale(this.language);
diff --git a/client/app/src/services/helper/wbtip.service.ts b/client/app/src/services/helper/wbtip.service.ts
index 868f246d9f..108728d82d 100644
--- a/client/app/src/services/helper/wbtip.service.ts
+++ b/client/app/src/services/helper/wbtip.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {HttpService} from "@app/shared/services/http.service";
 import {Receiver, WbTipData} from "@app/models/whistleblower/wb-tip-data";
 import {AppDataService} from "@app/app-data.service";
@@ -7,10 +7,10 @@ import {AppDataService} from "@app/app-data.service";
   providedIn: "root"
 })
 export class WbtipService {
-  tip: WbTipData = new WbTipData();
+  private httpService = inject(HttpService);
+  private appDataService = inject(AppDataService);
 
-  constructor(private httpService: HttpService, private appDataService: AppDataService) {
-  }
+  tip: WbTipData = new WbTipData();
 
   initialize(response: WbTipData) {
     this.tip = response;
diff --git a/client/app/src/services/root/app-config.service.ts b/client/app/src/services/root/app-config.service.ts
index 01956faefa..29a9ecf3e1 100644
--- a/client/app/src/services/root/app-config.service.ts
+++ b/client/app/src/services/root/app-config.service.ts
@@ -1,4 +1,4 @@
-import {Injectable, NgZone} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {HttpService} from "@app/shared/services/http.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AppDataService} from "@app/app-data.service";
@@ -9,28 +9,33 @@ import {AuthenticationService} from "@app/services/helper/authentication.service
 import {LanguagesSupported} from "@app/models/app/public-model";
 import {TitleService} from "@app/shared/services/title.service";
 import {CustomFileLoaderServiceService} from "@app/services/helper/custom-file-loader-service.service";
+import {NgZone} from "@angular/core";
 import {mockEngine} from "@app/services/helper/mocks";
 
 @Injectable({
   providedIn: "root"
 })
 export class AppConfigService {
+  private customFileLoaderServiceService = inject(CustomFileLoaderServiceService);
+  private titleService = inject(TitleService);
+  authenticationService = inject(AuthenticationService);
+  private translationService = inject(TranslationService);
+  private utilsService = inject(UtilsService);
+  private router = inject(Router);
+  private activatedRoute = inject(ActivatedRoute);
+  private httpService = inject(HttpService);
+  private appDataService = inject(AppDataService);
+  private fieldUtilitiesService = inject(FieldUtilitiesService);
+  private ngZone = inject(NgZone);
+  private isRunning: boolean = false;
+
   public sidebar: string = "";
   private firstLoad = true;
-  private isRunning: boolean = false;
 
-  constructor(private ngZone: NgZone, private customFileLoaderServiceService: CustomFileLoaderServiceService, private titleService: TitleService, public authenticationService: AuthenticationService, private translationService: TranslationService, private utilsService: UtilsService, private router: Router, private activatedRoute: ActivatedRoute, private httpService: HttpService, private appDataService: AppDataService, private fieldUtilitiesService: FieldUtilitiesService) {
+  constructor() {
     this.init();
   }
 
-  init() {
-    this.activatedRoute.paramMap.subscribe(_ => {
-      const currentURL = window.location.hash.substring(2).split("?")[0];
-      this.initRoutes(currentURL);
-      this.localInitialization();
-    });
-  }
-
   private monitorChangeDetection(): void {
     this.ngZone.onStable.subscribe(() => {
       if (this.isRunning) {
@@ -45,6 +50,14 @@ export class AppConfigService {
     });
   }
 
+  init() {
+    this.activatedRoute.paramMap.subscribe(_ => {
+      const currentURL = window.location.hash.substring(2).split("?")[0];
+      this.initRoutes(currentURL);
+      this.localInitialization();
+    });
+  }
+
   initRoutes(currentURL: string) {
     if (this.authenticationService && this.authenticationService.session && currentURL !== "login") {
       const queryParams = this.activatedRoute.snapshot.queryParams;
@@ -185,9 +198,6 @@ export class AppConfigService {
   routeChangeListener() {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        if (event.url === '/') {
-          this.customFileLoaderServiceService.loadCustomFiles();
-        }
         this.onValidateInitialConfiguration();
         const lastChildRoute = this.findLastChildRoute(this.router.routerState.root);
         if (lastChildRoute && lastChildRoute.snapshot.data && lastChildRoute.snapshot.data["pageTitle"]) {
diff --git a/client/app/src/services/root/app-interceptor.service.ts b/client/app/src/services/root/app-interceptor.service.ts
index f961cab562..f560bdcbd6 100644
--- a/client/app/src/services/root/app-interceptor.service.ts
+++ b/client/app/src/services/root/app-interceptor.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {
   HttpInterceptor,
   HttpEvent,
@@ -28,8 +28,11 @@ const protectedUrls = [
 
 @Injectable()
 export class appInterceptor implements HttpInterceptor {
-  constructor(private authenticationService: AuthenticationService, private httpClient: HttpClient, private cryptoService: CryptoService, private translationService: TranslationService) {
-  }
+  private authenticationService = inject(AuthenticationService);
+  private httpClient = inject(HttpClient);
+  private cryptoService = inject(CryptoService);
+  private translationService = inject(TranslationService);
+
 
   private getAcceptLanguageHeader(): string | null {
     if (this.translationService.language) {
@@ -85,9 +88,9 @@ export class appInterceptor implements HttpInterceptor {
 
 @Injectable()
 export class ErrorCatchingInterceptor implements HttpInterceptor {
+  private authenticationService = inject(AuthenticationService);
+  private appDataService = inject(AppDataService);
 
-  constructor(private authenticationService: AuthenticationService, private appDataService: AppDataService) {
-  }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 
@@ -114,10 +117,9 @@ export class ErrorCatchingInterceptor implements HttpInterceptor {
 
 @Injectable()
 export class CompletedInterceptor implements HttpInterceptor {
-  count = 0;
+  private appDataService = inject(AppDataService);
 
-  constructor(private appDataService: AppDataService) {
-  }
+  count = 0;
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     if (req.url !== "api/auth/authentication") {
diff --git a/client/app/src/shared.module.ts b/client/app/src/shared.module.ts
deleted file mode 100644
index a47bc1a446..0000000000
--- a/client/app/src/shared.module.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule, NgOptimizedImage} from "@angular/common";
-import {FooterComponent} from "@app/shared/partials/footer/footer.component";
-import {ReceiptComponent} from "@app/shared/partials/receipt/receipt.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {TranslatorPipe} from "@app/shared/pipes/translate";
-import {Enable2fa} from "@app/shared/partials/enable-2fa/enable-2fa";
-import {TranslateModule} from "@ngx-translate/core";
-import {QRCodeModule} from "angularx-qrcode";
-import {PasswordChangeComponent} from "@app/shared/partials/password-change/password-change.component";
-import {PasswordMeterComponent} from "@app/shared/components/password-meter/password-meter.component";
-import { NgbPagination,NgbPaginationFirst,NgbPaginationLast,NgbPaginationNext,NgbPaginationNumber,NgbPaginationPages,NgbPaginationPrevious,NgbNav,NgbNavItem,NgbNavLink,NgbNavContent,NgbProgressbar,NgbDatepickerModule,NgbDropdownModule,NgbTooltipModule} from "@ng-bootstrap/ng-bootstrap";
-import {PrivacyBadgeComponent} from "@app/shared/partials/privacybadge/privacy-badge.component";
-import {MarkdownModule} from "ngx-markdown";
-import {StripHtmlPipe} from "@app/shared/pipes/strip-html.pipe";
-import {ReceiptValidatorDirective} from "@app/shared/directive/receipt-validator.directive";
-import {TipInfoComponent} from "@app/shared/partials/tip-info/tip-info.component";
-import {NgSelectModule} from "@ng-select/ng-select";
-import {TipAdditionalQuestionnaireInviteComponent} from "@app/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component";
-import {TipFieldComponent} from "@app/shared/partials/tip-field/tip-field.component";
-import {TipFieldAnswerEntryComponent} from "@app/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component";
-import {TipQuestionnaireAnswersComponent} from "@app/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component";
-import {DatePipe} from "@app/shared/pipes/date.pipe";
-import {SplitPipe} from "@app/shared/pipes/split.pipe";
-import {TipFilesWhistleblowerComponent} from "@app/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component";
-import {WidgetWbFilesComponent} from "@app/shared/partials/widget-wbfiles/widget-wb-files.component";
-import {ByteFmtPipe} from "@app/shared/pipes/byte-fmt.pipe";
-import {RFileUploadButtonComponent} from "@app/shared/partials/rfile-upload-button/r-file-upload-button.component";
-import {RFileUploadStatusComponent} from "@app/shared/partials/rfile-upload-status/r-file-upload-status.component";
-import {TipCommentsComponent} from "@app/shared/partials/tip-comments/tip-comments.component";
-import {LimitToPipe} from "@app/shared/pipes/limit-to.pipe";
-import {OrderByPipe} from "@app/shared/pipes/order-by.pipe";
-import {TipReceiverListComponent} from "@app/shared/partials/tip-receiver-list/tip-receiver-list.component";
-import {FilterPipe} from "@app/shared/pipes/filter.pipe";
-import {FilterSearchPipe} from "@app/shared/pipes/filter-search.pipe";
-import {RequestSupportComponent} from "@app/shared/modals/request-support/request-support.component";
-import {NgxFlowModule} from "@flowjs/ngx-flow";
-import {RFilesUploadStatusComponent} from "@app/shared/partials/rfiles-upload-status/r-files-upload-status.component";
-import {NgFormChangeDirective} from "@app/shared/directive/ng-form-change.directive";
-import {WbFilesComponent} from "@app/shared/partials/wbfiles/wb-files.component";
-import {DisableCcpDirective} from "@app/shared/directive/disable-ccp.directive";
-import {SubdomainValidatorDirective} from "@app/shared/directive/subdomain-validator.directive";
-import {PasswordStrengthValidatorDirective} from "@app/shared/directive/password-strength-validator.directive";
-import {UserHomeComponent} from "@app/shared/partials/user-home/user-home.component";
-import {UserWarningsComponent} from "@app/shared/partials/user-warnings/user-warnings.component";
-import {GrantAccessComponent} from "@app/shared/modals/grant-access/grant-access.component";
-import {RevokeAccessComponent} from "@app/shared/modals/revoke-access/revoke-access.component";
-import {DeleteConfirmationComponent} from "@app/shared/modals/delete-confirmation/delete-confirmation.component";
-import {DateRangeSelectorComponent} from "@app/shared/components/date-selector/date-selector.component";
-import {PreferencesComponent} from "@app/shared/partials/preferences/preferences.component";
-import {PreferenceTab1Component} from "@app/shared/partials/preference-tabs/preference-tab1/preference-tab1.component";
-import {PreferenceTab2Component} from "@app/shared/partials/preference-tabs/preference-tab2/preference-tab2.component";
-import {Enable2faComponent} from "@app/shared/modals/enable2fa/enable2fa.component";
-import {EncryptionRecoveryKeyComponent} from "@app/shared/modals/encryption-recovery-key/encryption-recovery-key.component";
-import {ConfirmationWithPasswordComponent} from "@app/shared/modals/confirmation-with-password/confirmation-with-password.component";
-import {ConfirmationWith2faComponent} from "@app/shared/modals/confirmation-with2fa/confirmation-with2fa.component";
-import {TipOperationFileIdentityAccessRequestComponent} from "@app/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.ompoent";
-import {TipFilesReceiverComponent} from "@app/shared/partials/tip-files-receiver/tip-files-receiver.component";
-import {TipOperationSetReminderComponent} from "@app/shared/modals/tip-operation-set-reminder/tip-operation-set-reminder.component";
-import {TipOperationPostponeComponent} from "@app/shared/modals/tip-operation-postpone/tip-operation-postpone.component";
-import {FileViewComponent} from "@app/shared/modals/file-view/file-view.component";
-import {TipUploadWbFileComponent} from "@app/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component";
-import {ImageUploadDirective} from "@app/shared/directive/image-upload.directive";
-import {ImageUploadComponent} from "@app/shared/partials/image-upload/image-upload.component";
-import {EnableEncryptionComponent} from "@app/shared/modals/enable-encryption/enable-encryption.component";
-import {AdminFileComponent} from "@app/shared/partials/admin-file/admin-file.component";
-import {ConfirmationComponent} from "@app/shared/modals/confirmation/confirmation.component";
-import {QuestionnaireDuplicationComponent} from "@app/shared/modals/questionnaire-duplication/questionnaire-duplication.component";
-import {AddOptionHintComponent} from "@app/shared/modals/add-option-hint/add-option-hint.component";
-import {TriggerReceiverComponent} from "@app/shared/modals/trigger-receiver/trigger-receiver.component";
-import {AssignScorePointsComponent} from "@app/shared/modals/assign-score-points/assign-score-points.component";
-import {TipOperationFileIdentityAccessReplyComponent} from "@app/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component";
-import {DemoComponent} from "@app/shared/partials/demo/demo.component";
-import {MessageConsoleComponent} from "@app/shared/partials/messageconsole/message-console.component";
-import {AcceptAgreementComponent} from "@app/shared/modals/accept-agreement/accept-agreement.component";
-import {DisclaimerComponent} from "@app/shared/modals/disclaimer/disclaimer.component";
-import {TransferAccessComponent} from "@app/shared/modals/transfer-access/transfer-access.component";
-import {BlankComponent} from "@app/shared/blank/blank.component";
-import {VoiceRecorderComponent} from "@app/shared/partials/voice-recorder/voice-recorder.component";
-import {Tab1Component} from "@app/pages/admin/settings/tab1/tab1.component";
-import {SwitchComponent} from "@app/shared/components/switch/switch.component";
-import {ChangeSubmissionStatusComponent} from "@app/shared/modals/change-submission-status/change-submission-status.component";
-import {ReopenSubmissionComponent} from "@app/shared/modals/reopen-submission/reopen-submission.component";
-import {OtkcAccessComponent} from "@app/shared/modals/otkc-access/otkc-access.component";
-import {OperationComponent} from "@app/shared/partials/operation/operation.component";
-import {RedactInformationComponent} from "@app/shared/modals/redact-information/redact-information.component";
-
-@NgModule({
-  imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    QRCodeModule,
-    ReactiveFormsModule,
-    NgbProgressbar,
-    MarkdownModule,
-    NgSelectModule,
-    NgbPagination,
-    NgbPaginationPrevious,
-    NgbPaginationNext,
-    NgbPaginationFirst,
-    NgbPaginationLast,
-    NgbPaginationNumber,
-    NgbPaginationPages,
-    NgxFlowModule,
-    NgbDatepickerModule,
-    NgbDropdownModule,
-    DateRangeSelectorComponent,
-    NgbNav,
-    NgbNavItem,
-    NgbNavLink,
-    NgbNavContent,
-    NgbDropdownModule,
-    NgbTooltipModule,
-    NgOptimizedImage,
-  ],
-  declarations: [
-    FooterComponent,
-    ReceiptComponent,
-    TranslatorPipe,
-    Enable2fa,
-    PasswordChangeComponent,
-    PasswordMeterComponent,
-    PrivacyBadgeComponent,
-    StripHtmlPipe,
-    DatePipe,
-    ReceiptValidatorDirective,
-    TipInfoComponent,
-    TipQuestionnaireAnswersComponent,
-    TipAdditionalQuestionnaireInviteComponent,
-    TipFieldComponent,
-    TipFieldAnswerEntryComponent,
-    DatePipe,
-    SplitPipe,
-    TipFilesWhistleblowerComponent,
-    WidgetWbFilesComponent,
-    ByteFmtPipe,
-    RFileUploadButtonComponent,
-    RFileUploadStatusComponent,
-    TipCommentsComponent,
-    LimitToPipe,
-    OrderByPipe,
-    TipReceiverListComponent,
-    FilterPipe,
-    FilterSearchPipe,
-    RequestSupportComponent,
-    RFilesUploadStatusComponent,
-    NgFormChangeDirective,
-    WbFilesComponent,
-    DisableCcpDirective,
-    SubdomainValidatorDirective,
-    PasswordStrengthValidatorDirective,
-    PasswordStrengthValidatorDirective,
-    ImageUploadDirective,
-    ImageUploadComponent,
-    UserHomeComponent,
-    UserWarningsComponent,
-    GrantAccessComponent,
-    RevokeAccessComponent,
-    DeleteConfirmationComponent,
-    PreferencesComponent,
-    PreferenceTab1Component,
-    PreferenceTab2Component,
-    Enable2faComponent,
-    EncryptionRecoveryKeyComponent,
-    ConfirmationWithPasswordComponent,
-    ConfirmationWith2faComponent,
-    TipOperationFileIdentityAccessRequestComponent,
-    TipFilesReceiverComponent,
-    TipOperationSetReminderComponent,
-    TipOperationPostponeComponent,
-    FileViewComponent,
-    TipUploadWbFileComponent,
-    EnableEncryptionComponent,
-    AdminFileComponent,
-    ConfirmationComponent,
-    QuestionnaireDuplicationComponent,
-    AddOptionHintComponent,
-    TriggerReceiverComponent,
-    AssignScorePointsComponent,
-    TipOperationFileIdentityAccessReplyComponent,
-    DemoComponent,
-    MessageConsoleComponent,
-    MessageConsoleComponent,
-    AcceptAgreementComponent,
-    TransferAccessComponent,
-    DisclaimerComponent,
-    ChangeSubmissionStatusComponent,
-    ReopenSubmissionComponent,
-    BlankComponent,
-    VoiceRecorderComponent,
-    Tab1Component,
-    SwitchComponent,
-    OtkcAccessComponent,
-    OperationComponent,
-    RedactInformationComponent
-  ],
-  exports: [
-    FooterComponent,
-    ReceiptComponent,
-    TranslatorPipe,
-    PrivacyBadgeComponent,
-    Enable2fa,
-    PasswordChangeComponent,
-    StripHtmlPipe,
-    FilterPipe,
-    FilterSearchPipe,
-    OrderByPipe,
-    TipInfoComponent,
-    TipQuestionnaireAnswersComponent,
-    TipAdditionalQuestionnaireInviteComponent,
-    TipFieldComponent,
-    TipFilesWhistleblowerComponent,
-    WidgetWbFilesComponent,
-    TipCommentsComponent,
-    TipReceiverListComponent,
-    RFileUploadStatusComponent,
-    RFileUploadButtonComponent,
-    RFilesUploadStatusComponent,
-    NgFormChangeDirective,
-    DisableCcpDirective,
-    SubdomainValidatorDirective,
-    PasswordMeterComponent,
-    PasswordStrengthValidatorDirective,
-    ImageUploadDirective,
-    ImageUploadComponent,
-    UserHomeComponent,
-    UserWarningsComponent,
-    GrantAccessComponent,
-    RevokeAccessComponent,
-    DeleteConfirmationComponent,
-    DateRangeSelectorComponent,
-    TipOperationFileIdentityAccessRequestComponent,
-    TipFilesReceiverComponent,
-    TipOperationSetReminderComponent,
-    TipUploadWbFileComponent,
-    EnableEncryptionComponent,
-    AdminFileComponent,
-    ConfirmationComponent,
-    QuestionnaireDuplicationComponent,
-    AddOptionHintComponent,
-    TriggerReceiverComponent,
-    AssignScorePointsComponent,
-    PreferencesComponent,
-    DemoComponent,
-    MessageConsoleComponent,
-    AcceptAgreementComponent,
-    TransferAccessComponent,
-    DisclaimerComponent,
-    ChangeSubmissionStatusComponent,
-    ReopenSubmissionComponent,
-    VoiceRecorderComponent,
-    Tab1Component,
-    SwitchComponent,
-    OtkcAccessComponent,
-    OperationComponent,
-    RedactInformationComponent
-  ]
-})
-export class SharedModule {
-}
diff --git a/client/app/src/shared/blank/blank.component.ts b/client/app/src/shared/blank/blank.component.ts
index 9690988b37..a287a332ea 100644
--- a/client/app/src/shared/blank/blank.component.ts
+++ b/client/app/src/shared/blank/blank.component.ts
@@ -1,8 +1,9 @@
 import {Component} from "@angular/core";
 
 @Component({
-  selector: "src-blank",
-  templateUrl: "./blank.component.html"
+    selector: "src-blank",
+    templateUrl: "./blank.component.html",
+    standalone: true
 })
 export class BlankComponent {
 
diff --git a/client/app/src/shared/components/password-meter/password-meter.component.ts b/client/app/src/shared/components/password-meter/password-meter.component.ts
index 48b6035be1..64631aa8ce 100644
--- a/client/app/src/shared/components/password-meter/password-meter.component.ts
+++ b/client/app/src/shared/components/password-meter/password-meter.component.ts
@@ -1,8 +1,11 @@
 import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import { NgClass } from "@angular/common";
 
 @Component({
-  selector: "src-password-meter",
-  templateUrl: "./password-meter.component.html"
+    selector: "src-password-meter",
+    templateUrl: "./password-meter.component.html",
+    standalone: true,
+    imports: [NgClass]
 })
 export class PasswordMeterComponent implements OnChanges {
 
diff --git a/client/app/src/shared/components/switch/switch.component.ts b/client/app/src/shared/components/switch/switch.component.ts
index ef91cea44c..b51e93247a 100644
--- a/client/app/src/shared/components/switch/switch.component.ts
+++ b/client/app/src/shared/components/switch/switch.component.ts
@@ -1,8 +1,13 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { TranslatorPipe } from '@app/shared/pipes/translate';
 
 @Component({
-  selector: 'app-switch',
-  templateUrl: './switch.component.html'
+    selector: 'app-switch',
+    templateUrl: './switch.component.html',
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class SwitchComponent {
   @Input() label: string = 'Switch';
diff --git a/client/app/src/shared/directive/disable-ccp.directive.ts b/client/app/src/shared/directive/disable-ccp.directive.ts
index c6c3fa0a78..b8f706f1a1 100644
--- a/client/app/src/shared/directive/disable-ccp.directive.ts
+++ b/client/app/src/shared/directive/disable-ccp.directive.ts
@@ -1,7 +1,8 @@
 import {Directive, HostListener} from "@angular/core";
 
 @Directive({
-  selector: "[disableCcp]"
+    selector: "[disableCcp]",
+    standalone: true
 })
 export class DisableCcpDirective {
   @HostListener("cut", ["$event"])
diff --git a/client/app/src/shared/directive/image-upload.directive.ts b/client/app/src/shared/directive/image-upload.directive.ts
index fe7b81a711..d644325ed4 100644
--- a/client/app/src/shared/directive/image-upload.directive.ts
+++ b/client/app/src/shared/directive/image-upload.directive.ts
@@ -1,21 +1,22 @@
-import {ComponentFactoryResolver, Directive, Input, ViewContainerRef, OnInit} from "@angular/core";
+import { ComponentFactoryResolver, Directive, Input, ViewContainerRef, OnInit, inject } from "@angular/core";
 import {contextResolverModel} from "@app/models/resolvers/context-resolver-model";
 import {nodeResolverModel} from "@app/models/resolvers/node-resolver-model";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
 import {ImageUploadComponent} from "@app/shared/partials/image-upload/image-upload.component";
 
 @Directive({
-  selector: "[appImageUpload]",
+    selector: "[appImageUpload]",
+    standalone: true,
 })
 export class ImageUploadDirective implements OnInit {
+  private viewContainerRef = inject(ViewContainerRef);
+  private componentFactoryResolver = inject(ComponentFactoryResolver);
+
   @Input() imageUploadModel: contextResolverModel | nodeResolverModel | userResolverModel;
   @Input() imageUploadModelAttr: string;
   @Input() imageUploadId: string;
   @Input() imageSrcUrl: string;
 
-  constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
-  }
-
   ngOnInit() {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ImageUploadComponent);
     const componentRef = this.viewContainerRef.createComponent(componentFactory);
diff --git a/client/app/src/shared/directive/ng-form-change.directive.ts b/client/app/src/shared/directive/ng-form-change.directive.ts
index d372e9ddea..2c0f50ed13 100644
--- a/client/app/src/shared/directive/ng-form-change.directive.ts
+++ b/client/app/src/shared/directive/ng-form-change.directive.ts
@@ -1,18 +1,18 @@
-import {Directive, EventEmitter, OnDestroy, OnInit, Output} from "@angular/core";
+import { Directive, EventEmitter, OnDestroy, OnInit, Output, inject } from "@angular/core";
 import {debounceTime, Subscription} from "rxjs";
 import {NgForm} from "@angular/forms";
 
 @Directive({
-  selector: "[ngFormChanges]"
+    selector: "[ngFormChanges]",
+    standalone: true
 })
 export class NgFormChangeDirective implements OnInit, OnDestroy {
+  private ngForm = inject(NgForm);
+
 
   @Output("ngFormChange") formChange: EventEmitter<any> = new EventEmitter<any>();
   private formSubscription: Subscription;
 
-  constructor(private ngForm: NgForm) {
-  }
-
   ngOnInit() {
     this.formSubscription = this.ngForm.form.valueChanges.pipe(debounceTime(150)).subscribe(() => {
       this.formChange.emit();
diff --git a/client/app/src/shared/directive/password-strength-validator.directive.ts b/client/app/src/shared/directive/password-strength-validator.directive.ts
index ce151c509f..2b29e0ee96 100644
--- a/client/app/src/shared/directive/password-strength-validator.directive.ts
+++ b/client/app/src/shared/directive/password-strength-validator.directive.ts
@@ -2,12 +2,13 @@ import {Directive, Input, Output, EventEmitter} from "@angular/core";
 import {NG_VALIDATORS, AbstractControl, Validator, ValidationErrors} from "@angular/forms";
 
 @Directive({
-  selector: "[passwordStrengthValidator]",
-  providers: [{
-    provide: NG_VALIDATORS,
-    useExisting: PasswordStrengthValidatorDirective,
-    multi: true
-  }]
+    selector: "[passwordStrengthValidator]",
+    providers: [{
+            provide: NG_VALIDATORS,
+            useExisting: PasswordStrengthValidatorDirective,
+            multi: true
+        }],
+    standalone: true
 })
 export class PasswordStrengthValidatorDirective implements Validator {
   @Input("passwordStrengthValidator") passwordStrength: string;
diff --git a/client/app/src/shared/directive/receipt-validator.directive.ts b/client/app/src/shared/directive/receipt-validator.directive.ts
index 1495b32e35..5dd119266f 100644
--- a/client/app/src/shared/directive/receipt-validator.directive.ts
+++ b/client/app/src/shared/directive/receipt-validator.directive.ts
@@ -2,12 +2,13 @@ import {Directive, HostListener} from "@angular/core";
 import {AbstractControl, Validator, NG_VALIDATORS, ValidationErrors} from "@angular/forms";
 
 @Directive({
-  selector: "[customReceiptValidator]",
-  providers: [{
-    provide: NG_VALIDATORS,
-    useExisting: ReceiptValidatorDirective,
-    multi: true
-  }]
+    selector: "[customReceiptValidator]",
+    providers: [{
+            provide: NG_VALIDATORS,
+            useExisting: ReceiptValidatorDirective,
+            multi: true
+        }],
+    standalone: true
 })
 export class ReceiptValidatorDirective implements Validator {
 
diff --git a/client/app/src/shared/directive/subdomain-validator.directive.ts b/client/app/src/shared/directive/subdomain-validator.directive.ts
index 8ecfa6edfd..d6a00fdd43 100644
--- a/client/app/src/shared/directive/subdomain-validator.directive.ts
+++ b/client/app/src/shared/directive/subdomain-validator.directive.ts
@@ -1,10 +1,14 @@
-import {Directive, ElementRef, HostListener} from "@angular/core";
+import { Directive, ElementRef, HostListener, inject } from "@angular/core";
 import {NgModel} from "@angular/forms";
 
 @Directive({
-  selector: "[subdomainvalidators]"
+    selector: "[subdomainvalidators]",
+    standalone: true
 })
 export class SubdomainValidatorDirective {
+  private el = inject(ElementRef);
+  private ngModel = inject(NgModel);
+
 
   @HostListener("input")
   onInput() {
@@ -14,7 +18,4 @@ export class SubdomainValidatorDirective {
     this.el.nativeElement.value = viewValue;
     this.ngModel.update.emit(viewValue);
   }
-
-  constructor(private el: ElementRef, private ngModel: NgModel) {
-  }
 }
diff --git a/client/app/src/shared/guards/admin.guard.ts b/client/app/src/shared/guards/admin.guard.ts
index a32cb75543..96df4c5792 100644
--- a/client/app/src/shared/guards/admin.guard.ts
+++ b/client/app/src/shared/guards/admin.guard.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {ActivatedRoute, Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,8 +9,12 @@ import {UtilsService} from "@app/shared/services/utils.service";
   providedIn: "root"
 })
 export class AdminGuard {
-  constructor(private activatedRoute: ActivatedRoute, private utilsService: UtilsService, private router: Router, private appConfigService: AppConfigService, public authenticationService: AuthenticationService) {
-  }
+  private activatedRoute = inject(ActivatedRoute);
+  private utilsService = inject(UtilsService);
+  private router = inject(Router);
+  private appConfigService = inject(AppConfigService);
+  authenticationService = inject(AuthenticationService);
+
 
   canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (this.authenticationService.session) {
diff --git a/client/app/src/shared/guards/analyst.guard.ts b/client/app/src/shared/guards/analyst.guard.ts
index d35b13df3e..a727f6d06f 100644
--- a/client/app/src/shared/guards/analyst.guard.ts
+++ b/client/app/src/shared/guards/analyst.guard.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,8 +9,11 @@ import {UtilsService} from "@app/shared/services/utils.service";
   providedIn: "root"
 })
 export class AnalystGuard {
-  constructor(private utilsService: UtilsService, private appConfigService: AppConfigService, private router: Router, public authenticationService: AuthenticationService) {
-  }
+  private utilsService = inject(UtilsService);
+  private appConfigService = inject(AppConfigService);
+  private router = inject(Router);
+  authenticationService = inject(AuthenticationService);
+
 
   canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (this.authenticationService.session) {
diff --git a/client/app/src/shared/guards/custodian.guard.ts b/client/app/src/shared/guards/custodian.guard.ts
index 2c0875af82..7ddd57f22b 100644
--- a/client/app/src/shared/guards/custodian.guard.ts
+++ b/client/app/src/shared/guards/custodian.guard.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,8 +9,11 @@ import {UtilsService} from "@app/shared/services/utils.service";
   providedIn: "root"
 })
 export class CustodianGuard {
-  constructor(private utilsService: UtilsService, private appConfigService: AppConfigService, private router: Router, public authenticationService: AuthenticationService) {
-  }
+  private utilsService = inject(UtilsService);
+  private appConfigService = inject(AppConfigService);
+  private router = inject(Router);
+  authenticationService = inject(AuthenticationService);
+
 
   canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (this.authenticationService.session) {
diff --git a/client/app/src/shared/guards/pageguard.service.ts b/client/app/src/shared/guards/pageguard.service.ts
index e37bad990b..e690857216 100644
--- a/client/app/src/shared/guards/pageguard.service.ts
+++ b/client/app/src/shared/guards/pageguard.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AppDataService} from "@app/app-data.service";
@@ -8,8 +8,10 @@ import {AuthenticationService} from "@app/services/helper/authentication.service
   providedIn: "root"
 })
 export class Pageguard {
-  constructor(private authenticationService: AuthenticationService, private router: Router, private appDataService: AppDataService) {
-  }
+  private authenticationService = inject(AuthenticationService);
+  private router = inject(Router);
+  private appDataService = inject(AppDataService);
+
 
   canActivate(_: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
 
diff --git a/client/app/src/shared/guards/receiver.guard.ts b/client/app/src/shared/guards/receiver.guard.ts
index f9edc68f7a..c7e8246917 100644
--- a/client/app/src/shared/guards/receiver.guard.ts
+++ b/client/app/src/shared/guards/receiver.guard.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,14 +9,17 @@ import {UtilsService} from "@app/shared/services/utils.service";
   providedIn: "root"
 })
 export class ReceiverGuard {
-  constructor(private utilsService: UtilsService, private appConfigService: AppConfigService, private router: Router, public authenticationService: AuthenticationService) {
-  }
+  private utilsService = inject(UtilsService);
+  private appConfigService = inject(AppConfigService);
+  private router = inject(Router);
+  authenticationService = inject(AuthenticationService);
+
 
   canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (this.authenticationService.session) {
       if(this.authenticationService.session.role === "receiver"){
         this.appConfigService.setPage(this.router.url);
-      } else {
+      }else {
         this.router.navigateByUrl("/login").then();
       }
       return true;
diff --git a/client/app/src/shared/modals/accept-agreement/accept-agreement.component.html b/client/app/src/shared/modals/accept-agreement/accept-agreement.component.html
index ac78bf7a44..7291f094b7 100644
--- a/client/app/src/shared/modals/accept-agreement/accept-agreement.component.html
+++ b/client/app/src/shared/modals/accept-agreement/accept-agreement.component.html
@@ -1,19 +1,21 @@
 <div class="modal-header">
-    <div class="modal-title">{{ 'Privacy Policy' | translate }}</div>
+  <div class="modal-title">{{ 'Privacy Policy' | translate }}</div>
 </div>
 <div class="modal-body">
-    <div>
-        <div class="tos-text">{{appDataService.public.node.user_privacy_policy_text}}</div>
-        <a *ngIf="appDataService.public.node.user_privacy_policy_url" href="{{appDataService.public.node.user_privacy_policy_url}}" target="_blank">{{ 'Download copy of the Privacy Policy' | translate }}</a>
-        <div class="form-check">
-            <input name="tos2" class="form-check-input" type="checkbox" [(ngModel)]="accept" required />
-            <label class="form-check-label">{{ "I've read and accept the Privacy Policy" | translate }}</label>
-        </div>
+  <div>
+    <div class="tos-text">{{appDataService.public.node.user_privacy_policy_text}}</div>
+    @if (appDataService.public.node.user_privacy_policy_url) {
+      <a href="{{appDataService.public.node.user_privacy_policy_url}}" target="_blank">{{ 'Download copy of the Privacy Policy' | translate }}</a>
+    }
+    <div class="form-check">
+      <input name="tos2" class="form-check-input" type="checkbox" [(ngModel)]="accept" required />
+      <label class="form-check-label">{{ "I've read and accept the Privacy Policy" | translate }}</label>
     </div>
+  </div>
 </div>
 <div class="modal-footer">
-    <button id="modal-action-ok" class="btn btn-primary" [disabled]="!accept" (click)="confirm()">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Confirm' | translate }}</span>
-    </button>
+  <button id="modal-action-ok" class="btn btn-primary" [disabled]="!accept" (click)="confirm()">
+    <i class="fa-solid fa-check"></i>
+    <span>{{ 'Confirm' | translate }}</span>
+  </button>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/accept-agreement/accept-agreement.component.ts b/client/app/src/shared/modals/accept-agreement/accept-agreement.component.ts
index 529c3a687e..ab56428c1d 100644
--- a/client/app/src/shared/modals/accept-agreement/accept-agreement.component.ts
+++ b/client/app/src/shared/modals/accept-agreement/accept-agreement.component.ts
@@ -1,21 +1,32 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {AppDataService} from "@app/app-data.service";
 import {preferenceResolverModel} from "@app/models/resolvers/preference-resolver-model";
 
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-accept-agreement",
-  templateUrl: "./accept-agreement.component.html",
+    selector: "src-accept-agreement",
+    templateUrl: "./accept-agreement.component.html",
+    standalone: true,
+    imports: [
+    FormsModule,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class AcceptAgreementComponent implements OnInit {
+  private activeModal = inject(NgbActiveModal);
+  private preference = inject(PreferenceResolver);
+  appDataService = inject(AppDataService);
+
   confirmFunction: () => void;
   preferenceData: preferenceResolverModel;
   accept: boolean = false;
 
-  constructor(private activeModal: NgbActiveModal, private preference: PreferenceResolver, public appDataService: AppDataService) {
-  }
-
   ngOnInit(): void {
     if (this.preference.dataModel) {
       this.preferenceData = this.preference.dataModel;
diff --git a/client/app/src/shared/modals/add-option-hint/add-option-hint.component.ts b/client/app/src/shared/modals/add-option-hint/add-option-hint.component.ts
index 2ffc0fbf81..8d15a32d13 100644
--- a/client/app/src/shared/modals/add-option-hint/add-option-hint.component.ts
+++ b/client/app/src/shared/modals/add-option-hint/add-option-hint.component.ts
@@ -1,18 +1,23 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {Option} from "@app/models/app/shared-public-model";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-add-option-hint",
-  templateUrl: "./add-option-hint.component.html"
+    selector: "src-add-option-hint",
+    templateUrl: "./add-option-hint.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class AddOptionHintComponent {
+  private activeModal = inject(NgbActiveModal);
+  private modalService = inject(NgbModal);
+
   confirmFunction: (data: Option) => void;
   @Input() arg: Option;
 
-  constructor(private activeModal: NgbActiveModal, private modalService: NgbModal) {
-  }
-
   confirm() {
     this.confirmFunction(this.arg);
     return this.activeModal.close(this.arg);
diff --git a/client/app/src/shared/modals/assign-score-points/assign-score-points.component.html b/client/app/src/shared/modals/assign-score-points/assign-score-points.component.html
index 8558dfc9df..76bd1b0714 100644
--- a/client/app/src/shared/modals/assign-score-points/assign-score-points.component.html
+++ b/client/app/src/shared/modals/assign-score-points/assign-score-points.component.html
@@ -1,35 +1,37 @@
 <div class="modal-header">
-    <div class="modal-title">{{ 'Assign score points' | translate }}</div>
-    <button type="button" class="close btn" (click)="cancel()" [attr.aria-label]="'Close' | translate">
-        <i class="fa-solid fa-times"></i>
-    </button>
+  <div class="modal-title">{{ 'Assign score points' | translate }}</div>
+  <button type="button" class="close btn" (click)="cancel()" [attr.aria-label]="'Close' | translate">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 <div class="modal-body">
-    <span class="">
-        <span>{{ 'Type' | translate }}</span>
-        <select class="form-control" [(ngModel)]="arg.score_type">
-            <option value="none">{{ 'None' | translate }}</option>
-            <option value="addition">{{ 'Addition' | translate }}</option>
-            <option value="multiplier">{{ 'Multiplier' | translate }}</option>
-        </select>
-        <br>
-        <div *ngIf="arg.score_type !== 'none'">
-            <span>{{ 'Value' | translate }}</span>
-            <input id="score_points" class="form-control" [(ngModel)]="arg.score_points" type="number" />
+  <span class="">
+    <span>{{ 'Type' | translate }}</span>
+    <select class="form-control" [(ngModel)]="arg.score_type">
+      <option value="none">{{ 'None' | translate }}</option>
+      <option value="addition">{{ 'Addition' | translate }}</option>
+      <option value="multiplier">{{ 'Multiplier' | translate }}</option>
+    </select>
+    <br>
+      @if (arg.score_type !== 'none') {
+        <div>
+          <span>{{ 'Value' | translate }}</span>
+          <input id="score_points" class="form-control" [(ngModel)]="arg.score_points" type="number" />
         </div>
+      }
     </span>
-</div>
-<div class="modal-footer">
+  </div>
+  <div class="modal-footer">
     <a id="modal-action-ok" class="btn btn-primary" (click)="confirm()">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Confirm' | translate }}</span>
+      <i class="fa-solid fa-check"></i>
+      <span>{{ 'Confirm' | translate }}</span>
     </a>
     <a id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
-        <i class="fa-solid fa-times"></i>
-        <span>{{ 'Cancel' | translate }}</span>
+      <i class="fa-solid fa-times"></i>
+      <span>{{ 'Cancel' | translate }}</span>
     </a>
     <a id="modal-action-reset" class="btn btn-danger" (click)="arg.score_type = 'none'; arg.score_points = 0; cancel()">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Reset' | translate }}</span>
+      <i class="fa-solid fa-check"></i>
+      <span>{{ 'Reset' | translate }}</span>
     </a>
-</div>
\ No newline at end of file
+  </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/assign-score-points/assign-score-points.component.ts b/client/app/src/shared/modals/assign-score-points/assign-score-points.component.ts
index fbd6427b2d..6f82a9a305 100644
--- a/client/app/src/shared/modals/assign-score-points/assign-score-points.component.ts
+++ b/client/app/src/shared/modals/assign-score-points/assign-score-points.component.ts
@@ -1,19 +1,25 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { FormsModule } from "@angular/forms";
+
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-assign-score-points",
-  templateUrl: "./assign-score-points.component.html"
+    selector: "src-assign-score-points",
+    templateUrl: "./assign-score-points.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class AssignScorePointsComponent {
+  private activeModal = inject(NgbActiveModal);
+  private modalService = inject(NgbModal);
+
   @Input() arg = {
     score_points: 0,
     score_type: 'addition'
   };
 
-  constructor(private activeModal: NgbActiveModal, private modalService: NgbModal) {
-  }
-
   confirmFunction: (data: { score_points: number, score_type: string }) => void;
 
   confirm() {
diff --git a/client/app/src/shared/modals/change-submission-status/change-submission-status.component.html b/client/app/src/shared/modals/change-submission-status/change-submission-status.component.html
index 7aa071caf5..434c786ba0 100644
--- a/client/app/src/shared/modals/change-submission-status/change-submission-status.component.html
+++ b/client/app/src/shared/modals/change-submission-status/change-submission-status.component.html
@@ -1,27 +1,29 @@
 <div class="modal-header">
-    <div class="modal-title">{{ 'Change status' | translate }}</div>
+  <div class="modal-title">{{ 'Change status' | translate }}</div>
 </div>
 <div class="modal-body">
-    <div>{{ 'Status:' | translate }}</div>
-    <select id="assignSubmissionStatus" class="form-control" [(ngModel)]="arg.status">
-        <option *ngFor="let state of arg.submission_statuses.slice(1)" [ngValue]="state">
-            {{ state.label | translate }}
-        </option>
-    </select>
-    <div class="mt-2">
-        <span>{{ 'Motivation' | translate }}</span>
-    </div>
-    <div class="form-group">
-        <textarea name="reason" class="form-control" [(ngModel)]="arg.motivation"></textarea>
-    </div>
+  <div>{{ 'Status:' | translate }}</div>
+  <select id="assignSubmissionStatus" class="form-control" [(ngModel)]="arg.status">
+    @for (state of arg.submission_statuses.slice(1); track state) {
+      <option [ngValue]="state">
+        {{ state.label | translate }}
+      </option>
+    }
+  </select>
+  <div class="mt-2">
+    <span>{{ 'Motivation' | translate }}</span>
+  </div>
+  <div class="form-group">
+    <textarea name="reason" class="form-control" [(ngModel)]="arg.motivation"></textarea>
+  </div>
 </div>
 <div class="modal-footer">
-    <button id="modal-action-ok" class="btn btn-primary" (click)="confirm(arg.status,arg.motivation)">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Confirm' | translate }}</span>
-    </button>
-    <span id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
-        <i class="fa-solid fa-times"></i>
-        <span>{{ 'Cancel' | translate }}</span>
-    </span>
+  <button id="modal-action-ok" class="btn btn-primary" (click)="confirm(arg.status,arg.motivation)">
+    <i class="fa-solid fa-check"></i>
+    <span>{{ 'Confirm' | translate }}</span>
+  </button>
+  <span id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
+    <i class="fa-solid fa-times"></i>
+    <span>{{ 'Cancel' | translate }}</span>
+  </span>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/change-submission-status/change-submission-status.component.ts b/client/app/src/shared/modals/change-submission-status/change-submission-status.component.ts
index 0608353de5..879cd52cd9 100644
--- a/client/app/src/shared/modals/change-submission-status/change-submission-status.component.ts
+++ b/client/app/src/shared/modals/change-submission-status/change-submission-status.component.ts
@@ -1,16 +1,26 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {SubmissionStatus} from "@app/models/app/shared-public-model";
 import {RecieverTipData} from "@app/models/reciever/reciever-tip-data";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { FormsModule } from "@angular/forms";
+
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 @Component({
-  selector: 'src-change-submission-status',
-  templateUrl: './change-submission-status.component.html',
+    selector: 'src-change-submission-status',
+    templateUrl: './change-submission-status.component.html',
+    standalone: true,
+    imports: [
+    FormsModule,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class ChangeSubmissionStatusComponent {
-  @Input() arg: {tip:RecieverTipData, motivation:string,submission_statuses:SubmissionStatus[],status:any};
+  private modalService = inject(NgbModal);
+  private activeModal = inject(NgbActiveModal);
 
-  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) {
-  }
+  @Input() arg: {tip:RecieverTipData, motivation:string,submission_statuses:SubmissionStatus[],status:any};
   
   confirmFunction: (status:SubmissionStatus,motivation: string) => void;
   
diff --git a/client/app/src/shared/modals/confirmation-with-password/confirmation-with-password.component.ts b/client/app/src/shared/modals/confirmation-with-password/confirmation-with-password.component.ts
index 4909463b4b..8e9ce92f26 100644
--- a/client/app/src/shared/modals/confirmation-with-password/confirmation-with-password.component.ts
+++ b/client/app/src/shared/modals/confirmation-with-password/confirmation-with-password.component.ts
@@ -1,15 +1,19 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-confirmation-with-password",
-  templateUrl: "./confirmation-with-password.component.html"
+    selector: "src-confirmation-with-password",
+    templateUrl: "./confirmation-with-password.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class ConfirmationWithPasswordComponent {
-  secret: string;
+  private activeModal = inject(NgbActiveModal);
 
-  constructor(private activeModal: NgbActiveModal) {
-  }
+  secret: string;
 
   confirmFunction: (secret: string) => void;
 
diff --git a/client/app/src/shared/modals/confirmation-with2fa/confirmation-with2fa.component.ts b/client/app/src/shared/modals/confirmation-with2fa/confirmation-with2fa.component.ts
index f2d7313b79..231f45138c 100644
--- a/client/app/src/shared/modals/confirmation-with2fa/confirmation-with2fa.component.ts
+++ b/client/app/src/shared/modals/confirmation-with2fa/confirmation-with2fa.component.ts
@@ -1,15 +1,19 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-confirmation-with2fa",
-  templateUrl: "./confirmation-with2fa.component.html"
+    selector: "src-confirmation-with2fa",
+    templateUrl: "./confirmation-with2fa.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class ConfirmationWith2faComponent {
-  secret: string;
+  private activeModal = inject(NgbActiveModal);
 
-  constructor(private activeModal: NgbActiveModal) {
-  }
+  secret: string;
 
   confirmFunction: (secret: string) => void;
   close: () => void;
diff --git a/client/app/src/shared/modals/confirmation/confirmation.component.ts b/client/app/src/shared/modals/confirmation/confirmation.component.ts
index bd3737f2ea..0fa413df0b 100644
--- a/client/app/src/shared/modals/confirmation/confirmation.component.ts
+++ b/client/app/src/shared/modals/confirmation/confirmation.component.ts
@@ -1,15 +1,19 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-confirmation",
-  templateUrl: "./confirmation.component.html"
+    selector: "src-confirmation",
+    templateUrl: "./confirmation.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class ConfirmationComponent {
-  @Input() arg: string;
+  private modalService = inject(NgbModal);
+  private activeModal = inject(NgbActiveModal);
 
-  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) {
-  }
+  @Input() arg: string;
 
   confirmFunction: (secret: string) => void;
 
diff --git a/client/app/src/shared/modals/delete-confirmation/delete-confirmation.component.ts b/client/app/src/shared/modals/delete-confirmation/delete-confirmation.component.ts
index 3c5100dad4..02b0938f08 100644
--- a/client/app/src/shared/modals/delete-confirmation/delete-confirmation.component.ts
+++ b/client/app/src/shared/modals/delete-confirmation/delete-confirmation.component.ts
@@ -1,24 +1,30 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {Router} from "@angular/router";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "src-delete-confirmation",
-  templateUrl: "./delete-confirmation.component.html"
+    selector: "src-delete-confirmation",
+    templateUrl: "./delete-confirmation.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class DeleteConfirmationComponent {
+  private modalService = inject(NgbActiveModal);
+  private http = inject(HttpClient);
+  private utils = inject(UtilsService);
+  private router = inject(Router);
+
 
   @Input() args: any;
   @Input() selected_tips: string[];
   @Input() operation: string;
   confirmFunction: () => void;
 
-  constructor(private modalService: NgbActiveModal, private http: HttpClient, private utils: UtilsService, private router: Router) {
-  }
-
   confirm() {
     this.cancel();
     this.confirmFunction();
diff --git a/client/app/src/shared/modals/disclaimer/disclaimer.component.ts b/client/app/src/shared/modals/disclaimer/disclaimer.component.ts
index c1fc072954..c5591f2485 100644
--- a/client/app/src/shared/modals/disclaimer/disclaimer.component.ts
+++ b/client/app/src/shared/modals/disclaimer/disclaimer.component.ts
@@ -1,17 +1,29 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {AppDataService} from "@app/app-data.service";
 import {Node} from "@app/models/app/public-model";
+import { MarkdownComponent } from "ngx-markdown";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
 
 @Component({
-  selector: "src-disclaimer",
-  templateUrl: "./disclaimer.component.html",
+    selector: "src-disclaimer",
+    templateUrl: "./disclaimer.component.html",
+    standalone: true,
+    imports: [
+        MarkdownComponent,
+        TranslateModule,
+        TranslatorPipe,
+        StripHtmlPipe,
+    ],
 })
 export class DisclaimerComponent implements OnInit {
-  nodeData: Node;
+  private activeModal = inject(NgbActiveModal);
+  private modalService = inject(NgbModal);
+  protected appDataService = inject(AppDataService);
 
-  constructor(private activeModal: NgbActiveModal, private modalService: NgbModal, protected appDataService: AppDataService) {
-  }
+  nodeData: Node;
 
   confirmFunction: () => void;
 
diff --git a/client/app/src/shared/modals/enable-encryption/enable-encryption.component.ts b/client/app/src/shared/modals/enable-encryption/enable-encryption.component.ts
index 604a19e197..229254c105 100644
--- a/client/app/src/shared/modals/enable-encryption/enable-encryption.component.ts
+++ b/client/app/src/shared/modals/enable-encryption/enable-encryption.component.ts
@@ -1,13 +1,17 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-enable-encryption",
-  templateUrl: "./enable-encryption.component.html"
+    selector: "src-enable-encryption",
+    templateUrl: "./enable-encryption.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class EnableEncryptionComponent {
-  constructor(protected activeModal: NgbActiveModal) {
-  }
+  protected activeModal = inject(NgbActiveModal);
+
 
   confirm() {
     this.activeModal.close();
diff --git a/client/app/src/shared/modals/enable2fa/enable2fa.component.ts b/client/app/src/shared/modals/enable2fa/enable2fa.component.ts
index 309eefff43..4c72513993 100644
--- a/client/app/src/shared/modals/enable2fa/enable2fa.component.ts
+++ b/client/app/src/shared/modals/enable2fa/enable2fa.component.ts
@@ -1,17 +1,24 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {TwoFactorAuthData} from "@app/services/helper/2fa.data.service";
+import { Enable2fa } from "../../partials/enable-2fa/enable-2fa";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-enable2fa",
-  templateUrl: "./enable2fa.component.html"
+    selector: "src-enable2fa",
+    templateUrl: "./enable2fa.component.html",
+    standalone: true,
+    imports: [Enable2fa, TranslateModule, TranslatorPipe]
 })
 export class Enable2faComponent {
+  private preferenceResolver = inject(PreferenceResolver);
+  private activeModal = inject(NgbActiveModal);
+  private utilsService = inject(UtilsService);
+  protected twoFactorAuthData = inject(TwoFactorAuthData);
 
-  constructor(private preferenceResolver: PreferenceResolver, private activeModal: NgbActiveModal, private utilsService: UtilsService, protected twoFactorAuthData: TwoFactorAuthData) {
-  }
 
   dismiss() {
     this.activeModal.dismiss();
diff --git a/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.html b/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.html
index 163988498a..3bbfee0981 100644
--- a/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.html
+++ b/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.html
@@ -2,7 +2,7 @@
     <div class="modal-title">{{'Account recovery key'|translate}}</div>
 </div>
 <div class="modal-body">
-    <div class="text-center font-weight-bold" title="{{'Copy to clipboard' | translate}}" (click)="utilsService.copyToClipboard(erk)">
+    <div class="text-center font-weight-bold" data-toggle="tooltip" title="{{'Copy to clipboard' | translate}}" (click)="utilsService.copyToClipboard(erk)">
         <b>{{erk}}</b></div>
     <br/>
     <div>{{'Make a copy and store it in a safe place. It will be necessary if you lose your password to recover the access to your account without data loss.'|translate}}</div>
diff --git a/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.ts b/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.ts
index 71a45d0a90..5ff1ec9746 100644
--- a/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.ts
+++ b/client/app/src/shared/modals/encryption-recovery-key/encryption-recovery-key.component.ts
@@ -1,17 +1,21 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-encryption-recovery-key",
-  templateUrl: "./encryption-recovery-key.component.html"
+    selector: "src-encryption-recovery-key",
+    templateUrl: "./encryption-recovery-key.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class EncryptionRecoveryKeyComponent {
+  private activeModal = inject(NgbActiveModal);
+  protected utilsService = inject(UtilsService);
 
-  @Input() erk: string;
 
-  constructor(private activeModal: NgbActiveModal, protected utilsService: UtilsService) {
-  }
+  @Input() erk: string;
 
   dismiss() {
     this.activeModal.dismiss();
diff --git a/client/app/src/shared/modals/file-view/file-view.component.html b/client/app/src/shared/modals/file-view/file-view.component.html
index d97e5a6e1e..251124d314 100644
--- a/client/app/src/shared/modals/file-view/file-view.component.html
+++ b/client/app/src/shared/modals/file-view/file-view.component.html
@@ -1,17 +1,21 @@
 <div class="modal-header">
-    <div class="modal-title">
-        <h2>{{args.file.name}}</h2>
-    </div>
-    <button type="button" class="close btn" (click)="cancel()">
-        <i class="fa-solid fa-times"></i>
-    </button>
+  <div class="modal-title">
+    <h2>{{args.file.name}}</h2>
+  </div>
+  <button type="button" class="close btn" (click)="cancel()">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 <div class="modal-body">
-    <div *ngIf="!args.loaded" class="Loader"></div>
-    <iframe #viewer *ngIf="args.loaded" id="viewer" class="w-100" [src]="iframeUrl" title="fileviewer" height="{{args.iframeHeight}}" sandbox="allow-downloads allow-scripts"></iframe>
+  @if (!args.loaded) {
+    <div class="Loader"></div>
+  }
+  @if (args.loaded) {
+    <iframe #viewer id="viewer" class="w-100" [src]="iframeUrl" title="fileviewer" height="{{args.iframeHeight}}" sandbox="allow-downloads allow-scripts"></iframe>
+  }
 </div>
 <div class="modal-footer">
-    <a id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
-        <span>{{'Close'|translate}}</span>
-    </a>
+  <a id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
+    <span>{{'Close'|translate}}</span>
+  </a>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/file-view/file-view.component.ts b/client/app/src/shared/modals/file-view/file-view.component.ts
index 129ab99a28..64e9f45d86 100644
--- a/client/app/src/shared/modals/file-view/file-view.component.ts
+++ b/client/app/src/shared/modals/file-view/file-view.component.ts
@@ -1,15 +1,25 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
+import { Component, ElementRef, Input, OnInit, ViewChild, inject } from "@angular/core";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {WbFile} from "@app/models/app/shared-public-model";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-file-view",
-  templateUrl: "./file-view.component.html"
+    selector: "src-file-view",
+    templateUrl: "./file-view.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class FileViewComponent implements OnInit {
+  private authenticationService = inject(AuthenticationService);
+  private sanitizer = inject(DomSanitizer);
+  private utilsService = inject(UtilsService);
+  private modalService = inject(NgbModal);
+
   @Input() args: {
     file: WbFile,
     loaded: boolean,
@@ -19,10 +29,6 @@ export class FileViewComponent implements OnInit {
 
   iframeUrl: SafeResourceUrl;
 
-  constructor(private authenticationService: AuthenticationService, private sanitizer: DomSanitizer, private utilsService: UtilsService, private modalService: NgbModal) {
-
-  }
-
   ngOnInit() {
     this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl("viewer/index.html");
     this.args.iframeHeight = window.innerHeight * 0.75;
diff --git a/client/app/src/shared/modals/grant-access/grant-access.component.ts b/client/app/src/shared/modals/grant-access/grant-access.component.ts
index e5f13b1426..4c96146753 100644
--- a/client/app/src/shared/modals/grant-access/grant-access.component.ts
+++ b/client/app/src/shared/modals/grant-access/grant-access.component.ts
@@ -1,14 +1,23 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {Receiver} from "@app/models/app/public-model";
 import {cancelFun, ConfirmFunFunction} from "@app/shared/constants/types";
+import { NgSelectComponent, NgLabelTemplateDirective } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-grant-access",
-  templateUrl: "./grant-access.component.html"
+    selector: "src-grant-access",
+    templateUrl: "./grant-access.component.html",
+    standalone: true,
+    imports: [NgSelectComponent, FormsModule, NgLabelTemplateDirective, TranslateModule, TranslatorPipe]
 })
 export class GrantAccessComponent {
+  private modalService = inject(NgbModal);
+  private utils = inject(UtilsService);
+
 
   @Input() usersNames: Record<string, string> | undefined;
   @Input() selectableRecipients: Receiver[];
@@ -16,9 +25,6 @@ export class GrantAccessComponent {
   @Input() cancelFun: cancelFun;
   receiver_id: { id: number };
 
-  constructor(private modalService: NgbModal, private utils: UtilsService) {
-  }
-
   confirm() {
     this.cancel();
     if (this.confirmFun) {
diff --git a/client/app/src/shared/modals/otkc-access/otkc-access.component.html b/client/app/src/shared/modals/otkc-access/otkc-access.component.html
index 5ae734408b..762907ccc4 100644
--- a/client/app/src/shared/modals/otkc-access/otkc-access.component.html
+++ b/client/app/src/shared/modals/otkc-access/otkc-access.component.html
@@ -8,7 +8,7 @@
     <div class="row">
         <div class="col-md-12">
             <label for="ReceiptCode">{{ 'For security reasons, the code needs to be changed' | translate }}.</label>
-            <div class="mt-2 form-inline d-flex justify-content-center" title="{{'Copy to clipboard' | translate}}"
+            <div class="mt-2 form-inline d-flex justify-content-center" data-toggle="tooltip" title="{{'Copy to clipboard' | translate}}"
                 (click)="utils.copyToClipboard(arg.receipt)">
                 <div class="form-group d-block mx-auto">
                     <div class="input-group">
diff --git a/client/app/src/shared/modals/otkc-access/otkc-access.component.ts b/client/app/src/shared/modals/otkc-access/otkc-access.component.ts
index aa08429889..71a5aa1ac3 100644
--- a/client/app/src/shared/modals/otkc-access/otkc-access.component.ts
+++ b/client/app/src/shared/modals/otkc-access/otkc-access.component.ts
@@ -1,17 +1,27 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { UtilsService } from '@app/shared/services/utils.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { TranslatorPipe } from '@app/shared/pipes/translate';
 
 @Component({
-  selector: 'src-otkc-access',
-  templateUrl: './otkc-access.component.html',
+    selector: 'src-otkc-access',
+    templateUrl: './otkc-access.component.html',
+    standalone: true,
+    imports: [
+        FormsModule,
+        TranslateModule,
+        TranslatorPipe,
+    ],
 })
 export class OtkcAccessComponent {
+  private modalService = inject(NgbModal);
+  protected utils = inject(UtilsService);
+
   @Input() arg: { receipt: any, formatted_receipt: any };
  
   confirmFunction: () => void;
-  constructor(private modalService: NgbModal, protected utils: UtilsService) {
-  }
 
   confirm() {
     this.confirmFunction();
diff --git a/client/app/src/shared/modals/questionnaire-duplication/questionnaire-duplication.component.ts b/client/app/src/shared/modals/questionnaire-duplication/questionnaire-duplication.component.ts
index 3019e203e3..55b5b704c1 100644
--- a/client/app/src/shared/modals/questionnaire-duplication/questionnaire-duplication.component.ts
+++ b/client/app/src/shared/modals/questionnaire-duplication/questionnaire-duplication.component.ts
@@ -1,21 +1,27 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {questionnaireResolverModel} from "@app/models/resolvers/questionnaire-model";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-questionnaire-duplication",
-  templateUrl: "./questionnaire-duplication.component.html"
+    selector: "src-questionnaire-duplication",
+    templateUrl: "./questionnaire-duplication.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class QuestionnaireDuplicationComponent {
+  private utilsService = inject(UtilsService);
+  private http = inject(HttpClient);
+  private modalService = inject(NgbModal);
+
   @Input() questionnaire: questionnaireResolverModel;
   @Input() operation: string;
   duplicate_questionnaire: { name: string } = {name: ""};
 
-  constructor(private utilsService: UtilsService, private http: HttpClient, private modalService: NgbModal) {
-  }
-
   cancel() {
     this.modalService.dismissAll();
   }
diff --git a/client/app/src/shared/modals/redact-information/redact-information.component.html b/client/app/src/shared/modals/redact-information/redact-information.component.html
index ff1a69f41f..0442f12c2e 100644
--- a/client/app/src/shared/modals/redact-information/redact-information.component.html
+++ b/client/app/src/shared/modals/redact-information/redact-information.component.html
@@ -1,50 +1,60 @@
 <div class="modal-header">
-    <div *ngIf="vars.redaction_switch" class="modal-title">{{ 'Mask' | translate }}</div>
-    <div *ngIf="!vars.redaction_switch" class="modal-title">{{ 'Redact' | translate }}</div>
-    <button type="button" class="close btn" id="close-redact-modal" (click)="cancel()" [attr.aria-label]="'Close' | translate">
-        <i class="fa-solid fa-times"></i>
-    </button>
+  @if (vars.redaction_switch) {
+    <div class="modal-title">{{ 'Mask' | translate }}</div>
+  }
+  @if (!vars.redaction_switch) {
+    <div class="modal-title">{{ 'Redact' | translate }}</div>
+  }
+  <button type="button" class="close btn" id="close-redact-modal" (click)="cancel()" [attr.aria-label]="'Close' | translate">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 
 <div class="modal-body">
-    <textarea #redact id="redact" name="controlElement" [ngModel]="forced_visible ? unmaskedContent : content" (ngModelChange)="forced_visible ? unmaskedContent : content = $event" cols="30"
-              rows="10" (keydown)="ignoreEdit($event)" class="form-control"></textarea>
+  <textarea #redact id="redact" name="controlElement" [ngModel]="forced_visible ? unmaskedContent : content" (ngModelChange)="forced_visible ? unmaskedContent : content = $event" cols="30"
+  rows="10" (keydown)="ignoreEdit($event)" class="form-control"></textarea>
 </div>
 
 <div class="modal-footer">
-    <div class="container">
-        <div class="float-start">
-            <div *ngIf="preferenceResolver.dataModel.can_mask_information && preferenceResolver.dataModel.can_redact_information" class="btn mask-btn">
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
-                           [(ngModel)]="vars.redaction_switch" [value]="true" (ngModelChange)="toggleMasking()" />
-                    <label class="form-check-label" for="inlineRadio1">{{ 'Mask' | translate }}</label>
-                </div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
-                           [(ngModel)]="vars.redaction_switch" [value]="false" (ngModelChange)="toggleMasking()" />
-                    <label class="form-check-label" for="inlineRadio2">{{ 'Redact' | translate }}</label>
-                </div>
-            </div>
+  <div class="container">
+    <div class="float-start">
+      @if (preferenceResolver.dataModel.can_mask_information && preferenceResolver.dataModel.can_redact_information) {
+        <div class="btn mask-btn">
+          <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
+              [(ngModel)]="vars.redaction_switch" [value]="true" (ngModelChange)="toggleMasking()" />
+            <label class="form-check-label" for="inlineRadio1">{{ 'Mask' | translate }}</label>
+          </div>
+          <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
+              [(ngModel)]="vars.redaction_switch" [value]="false" (ngModelChange)="toggleMasking()" />
+            <label class="form-check-label" for="inlineRadio2">{{ 'Redact' | translate }}</label>
+          </div>
         </div>
+      }
+    </div>
 
-        <div class="float-end">
-            <button id="toggle-button" (click)="toggleVisibility()" class="btn">
-                <i class="fas fa-eye" *ngIf="forced_visible" id="eye-icon-open"></i>
-                <i class="fas fa-eye-slash" *ngIf="!forced_visible" id="eye-icon-closed"></i>
-            </button>
+    <div class="float-end">
+      <button id="toggle-button" (click)="toggleVisibility()" class="btn">
+        @if (forced_visible) {
+          <i class="fas fa-eye" id="eye-icon-open"></i>
+        }
+        @if (!forced_visible) {
+          <i class="fas fa-eye-slash" id="eye-icon-closed"></i>
+        }
+      </button>
 
-            <button class="btn btn-primary" id="select_content" (click)="selectContent()">
-                <span>{{ 'Select' | translate }}</span>
-            </button>
+      <button class="btn btn-primary" id="select_content" (click)="selectContent()">
+        <span>{{ 'Select' | translate }}</span>
+      </button>
 
-            <button class="btn btn-primary" id="unselect_content" (click)="unSelectContent()">
-                <span>{{ 'Unselect' | translate }}</span>
-            </button>
+      <button class="btn btn-primary" id="unselect_content" (click)="unSelectContent()">
+        <span>{{ 'Unselect' | translate }}</span>
+      </button>
 
-            <button class="btn btn-primary" id="save_masking" (click)="saveMasking()">
-                <span>{{ 'Save' | translate }}</span>
-            </button>
-        </div>
+      <button class="btn btn-primary" id="save_masking" (click)="saveMasking()">
+        <span>{{ 'Save' | translate }}</span>
+      </button>
     </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/redact-information/redact-information.component.ts b/client/app/src/shared/modals/redact-information/redact-information.component.ts
index a4f6dfb514..2083b75c5b 100644
--- a/client/app/src/shared/modals/redact-information/redact-information.component.ts
+++ b/client/app/src/shared/modals/redact-information/redact-information.component.ts
@@ -1,15 +1,30 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild, inject } from '@angular/core';
 import {ReceiverTipService} from '@app/services/helper/receiver-tip.service';
 import {PreferenceResolver} from '@app/shared/resolvers/preference.resolver';
 import {MaskService} from '@app/shared/services/mask.service';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {RedactionData} from "@app/models/component-model/redaction";
 
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { TranslatorPipe } from '@app/shared/pipes/translate';
+
 @Component({
-  selector: 'src-redact-information',
-  templateUrl: './redact-information.component.html',
+    selector: 'src-redact-information',
+    templateUrl: './redact-information.component.html',
+    standalone: true,
+    imports: [
+    FormsModule,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class RedactInformationComponent implements OnInit{
+  private maskService = inject(MaskService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  private modalService = inject(NgbModal);
+  private receiverTipService = inject(ReceiverTipService);
+
   @ViewChild('redact', { static: false }) redactTextArea: ElementRef;
   @Input() arg:any;
   redaction: any = null;
@@ -23,7 +38,6 @@ export class RedactInformationComponent implements OnInit{
   unmaskedContent: string = "";
   content: string = "";
   originalContent: string = "";
-  constructor(private maskService:MaskService,protected preferenceResolver:PreferenceResolver,private modalService: NgbModal,private receiverTipService:ReceiverTipService){}
 
   cancel() {
     this.modalService.dismissAll();
diff --git a/client/app/src/shared/modals/reopen-submission/reopen-submission.component.html b/client/app/src/shared/modals/reopen-submission/reopen-submission.component.html
index 27269fa8f5..258c716547 100644
--- a/client/app/src/shared/modals/reopen-submission/reopen-submission.component.html
+++ b/client/app/src/shared/modals/reopen-submission/reopen-submission.component.html
@@ -1,26 +1,28 @@
 <div class="modal-header">
-    <div class="modal-title">{{ 'Reopen' | translate }}</div>
-    <button type="button" class="close btn" (click)="cancel()" [attr.aria-label]="'Close' | translate">
-        <i class="fa-solid fa-times"></i>
-    </button>
+  <div class="modal-title">{{ 'Reopen' | translate }}</div>
+  <button type="button" class="close btn" (click)="cancel()" [attr.aria-label]="'Close' | translate">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 <div class="modal-body">
-    <span>{{ 'Motivation' | translate }}</span>
-    <span title="{{'This field is mandatory' | translate}}" class="text-danger sup">*</span>
-    <div class="form-group">
-        <textarea name="motivation" class="form-control" [ngClass]="{'is-invalid': !arg.motivation}"
-            [(ngModel)]="arg.motivation" required></textarea>
-        <span *ngIf="!arg.motivation" class="text-danger">{{ 'This field is mandatory' | translate }}</span>
-    </div>
+  <span>{{ 'Motivation' | translate }}</span>
+  <span data-toggle="tooltip" title="{{'This field is mandatory' | translate}}" class="text-danger sup">*</span>
+  <div class="form-group">
+    <textarea name="motivation" class="form-control" [ngClass]="{'is-invalid': !arg.motivation}"
+    [(ngModel)]="arg.motivation" required></textarea>
+    @if (!arg.motivation) {
+      <span class="text-danger">{{ 'This field is mandatory' | translate }}</span>
+    }
+  </div>
 </div>
 <div class="modal-footer">
-    <button type="button" id="modal-action-ok" class="btn btn-primary" [disabled]="!arg.motivation"
-        (click)="confirm(arg.motivation)">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Confirm' | translate }}</span>
-    </button>
-    <span id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
-        <i class="fa-solid fa-times"></i>
-        <span>{{ 'Cancel' | translate }}</span>
-    </span>
+  <button type="button" id="modal-action-ok" class="btn btn-primary" [disabled]="!arg.motivation"
+    (click)="confirm(arg.motivation)">
+    <i class="fa-solid fa-check"></i>
+    <span>{{ 'Confirm' | translate }}</span>
+  </button>
+  <span id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
+    <i class="fa-solid fa-times"></i>
+    <span>{{ 'Cancel' | translate }}</span>
+  </span>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/reopen-submission/reopen-submission.component.ts b/client/app/src/shared/modals/reopen-submission/reopen-submission.component.ts
index a6f057dc04..ca8254f2a9 100644
--- a/client/app/src/shared/modals/reopen-submission/reopen-submission.component.ts
+++ b/client/app/src/shared/modals/reopen-submission/reopen-submission.component.ts
@@ -1,14 +1,26 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: 'src-reopen-submission',
-  templateUrl: './reopen-submission.component.html',
+    selector: 'src-reopen-submission',
+    templateUrl: './reopen-submission.component.html',
+    standalone: true,
+    imports: [
+    FormsModule,
+    NgClass,
+    TranslateModule,
+    TranslatorPipe
+],
 })
 export class ReopenSubmissionComponent {
+  private modalService = inject(NgbModal);
+  private activeModal = inject(NgbActiveModal);
+
   arg:{ motivation: string}={motivation: ""};
-  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) {
-  }
  
   confirmFunction: (motivation: string) => void;
   
diff --git a/client/app/src/shared/modals/request-support/request-support.component.html b/client/app/src/shared/modals/request-support/request-support.component.html
index 87019041ce..66c2f88c62 100644
--- a/client/app/src/shared/modals/request-support/request-support.component.html
+++ b/client/app/src/shared/modals/request-support/request-support.component.html
@@ -1,38 +1,50 @@
 <div class="modal-header">
-    <div class="modal-title">{{'Request support'|translate}}</div>
-    <button type="button" class="btn close" (click)="activeModal.dismiss()" [attr.aria-label]="'Close'|translate">
-         <i class="fa-solid fa-times"></i>
-    </button>
+  <div class="modal-title">{{'Request support'|translate}}</div>
+  <button type="button" class="btn close" (click)="activeModal.dismiss()" [attr.aria-label]="'Close'|translate">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 <div class="modal-body">
-    <form #SupportRequest="ngForm" name="SupportRequest" id="SupportRequest" novalidate>
-        <div *ngIf="!sent">
-            <div class="form-group">
-                <label>{{'Email address'|translate}}</label>
-                <input class="form-control" name="email" [(ngModel)]="arg.mail_address" type="email" [pattern]="Constants.emailRegexp" required />
-                <div class="text-danger" *ngIf="SupportRequest.form.get('email')?.errors?.['required']">{{'This field is mandatory'|translate}}</div>
-                <div class="text-danger" *ngIf="SupportRequest.form.get('email')?.errors?.['pattern']">{{'Invalid email address'|translate}}</div>
-            </div>
-            <div class="form-group">
-                <label>{{'Text'|translate}}</label>
-                <div>
-                    <textarea class="form-control" name="message" [(ngModel)]="arg.text" required></textarea>
-                </div>
-                <div class="text-danger" *ngIf="SupportRequest.form.get('message')?.errors?.['required']">{{'This field is mandatory'|translate}}</div>
-            </div>
+  <form #SupportRequest="ngForm" name="SupportRequest" id="SupportRequest" novalidate>
+    @if (!sent) {
+      <div>
+        <div class="form-group">
+          <label>{{'Email address'|translate}}</label>
+          <input class="form-control" name="email" [(ngModel)]="arg.mail_address" type="email" [pattern]="Constants.emailRegexp" required />
+          @if (SupportRequest.form.get('email')?.errors?.['required']) {
+            <div class="text-danger">{{'This field is mandatory'|translate}}</div>
+          }
+          @if (SupportRequest.form.get('email')?.errors?.['pattern']) {
+            <div class="text-danger">{{'Invalid email address'|translate}}</div>
+          }
+        </div>
+        <div class="form-group">
+          <label>{{'Text'|translate}}</label>
+          <div>
+            <textarea class="form-control" name="message" [(ngModel)]="arg.text" required></textarea>
+          </div>
+          @if (SupportRequest.form.get('message')?.errors?.['required']) {
+            <div class="text-danger">{{'This field is mandatory'|translate}}</div>
+          }
         </div>
-    </form>
-    <div *ngIf="sent" id="sent" class="alert alert-secondary">
-        <span>{{'Thank you.'|translate}}</span>
-        <span>{{'We will try to get back to you as soon as possible.'|translate}}</span>
+      </div>
+    }
+  </form>
+  @if (sent) {
+    <div id="sent" class="alert alert-secondary">
+      <span>{{'Thank you.'|translate}}</span>
+      <span>{{'We will try to get back to you as soon as possible.'|translate}}</span>
     </div>
+  }
 </div>
 <div class="modal-footer">
-    <button id="modal-action-ok" class="btn btn-primary" *ngIf="!sent" [disabled]="SupportRequest.form.invalid" (click)="sent=true; utilsService.submitSupportRequest(arg);">
-        <span>{{'Submit'|translate}}</span>
+  @if (!sent) {
+    <button id="modal-action-ok" class="btn btn-primary" [disabled]="SupportRequest.form.invalid" (click)="sent=true; utilsService.submitSupportRequest(arg);">
+      <span>{{'Submit'|translate}}</span>
     </button>
-    <a id="modal-action-cancel" class="btn btn-outline-secondary" (click)="activeModal.dismiss()">
-        <i class="fa-solid fa-times"></i>
-        <span>{{'Close'|translate}}</span>
-    </a>
+  }
+  <a id="modal-action-cancel" class="btn btn-outline-secondary" (click)="activeModal.dismiss()">
+    <i class="fa-solid fa-times"></i>
+    <span>{{'Close'|translate}}</span>
+  </a>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/request-support/request-support.component.ts b/client/app/src/shared/modals/request-support/request-support.component.ts
index b0bfab5a35..9c835604d4 100644
--- a/client/app/src/shared/modals/request-support/request-support.component.ts
+++ b/client/app/src/shared/modals/request-support/request-support.component.ts
@@ -1,21 +1,28 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {Constants} from "@app/shared/constants/constants";
+import { FormsModule } from "@angular/forms";
+
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-request-support",
-  templateUrl: "./request-support.component.html"
+    selector: "src-request-support",
+    templateUrl: "./request-support.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class RequestSupportComponent implements OnInit {
+  protected activeModal = inject(NgbActiveModal);
+  protected utilsService = inject(UtilsService);
+  private preferenceResolver = inject(PreferenceResolver);
+
   protected readonly Constants = Constants;
   sent = false;
   arg: { mail_address: string, text: string } = {mail_address: "", text: ""};
 
-  constructor(protected activeModal: NgbActiveModal, protected utilsService: UtilsService, private preferenceResolver: PreferenceResolver) {
-  }
-
   ngOnInit(): void {
     this.arg.mail_address = this.preferenceResolver.dataModel.mail_address;
   }
diff --git a/client/app/src/shared/modals/revoke-access/revoke-access.component.ts b/client/app/src/shared/modals/revoke-access/revoke-access.component.ts
index 9dc6f74d8f..3fb69dc259 100644
--- a/client/app/src/shared/modals/revoke-access/revoke-access.component.ts
+++ b/client/app/src/shared/modals/revoke-access/revoke-access.component.ts
@@ -1,15 +1,24 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {Receiver} from "@app/models/app/public-model";
 import {cancelFun, ConfirmFunFunction} from "@app/shared/constants/types";
+import { NgSelectComponent, NgLabelTemplateDirective } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "src-revoke-access",
-  templateUrl: "./revoke-access.component.html"
+    selector: "src-revoke-access",
+    templateUrl: "./revoke-access.component.html",
+    standalone: true,
+    imports: [NgSelectComponent, FormsModule, NgLabelTemplateDirective, TranslateModule, TranslatorPipe]
 })
 export class RevokeAccessComponent {
+  private modalService = inject(NgbModal);
+  private utils = inject(UtilsService);
+
 
 
   @Input() usersNames: Record<string, string> | undefined;
@@ -18,9 +27,6 @@ export class RevokeAccessComponent {
   @Input() cancelFun: cancelFun;
   receiver_id: { id: number };
 
-  constructor(private modalService: NgbModal, private utils: UtilsService) {
-  }
-
   confirm() {
     this.cancel();
     if (this.confirmFun) {
diff --git a/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.html b/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.html
index 069bc7dd16..cc2177f80f 100644
--- a/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.html
+++ b/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.html
@@ -1,55 +1,74 @@
 <div class="modal-header">
-    <div class="modal-title">{{'Additional questionnaire'|translate}}</div>
-    <button type="submit" class="close btn" [attr.aria-hidden]="true" (click)="activeModal.dismiss()" [attr.aria-label]="'Close' | translate">
-        <i class="fa-solid fa-times"></i>
-    </button>
+  <div class="modal-title">{{'Additional questionnaire'|translate}}</div>
+  <button type="submit" class="close btn" [attr.aria-hidden]="true" (click)="activeModal.dismiss()" [attr.aria-label]="'Close' | translate">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 <div class="modal-body">
-    <form #submissionForm="ngForm" id="SubmissionForm" autocomplete="off" novalidate>
-        <div class="tabbable tabs-below">
-            <ul id="SubmissionTabsNavigationBox" class="nav nav-tabs" *ngIf="wbTipService.tip.additional_questionnaire.steps.length > 1">
-                <li class="nav-item" *ngFor="let step of wbTipService.tip.additional_questionnaire.steps | orderBy:'order' ;let index = index">
-                    <ng-container *ngIf="step.enabled">
-                        <a id="step-{{index}}-link" class="nav-link title" [ngClass]="{active: navigation === index}" (click)="goToStep(index)">
-                            <span>{{index + 1}} - {{step.label}}</span>
-                        </a>
-                    </ng-container>
-                </li>
-            </ul>
-            <div id="SubmissionTabsContentBox" class="tab-content">
-                <div *ngFor="let step of this.questionnaire.steps | orderBy:'order'; let index = index">
-                    <span *ngIf="step && step.enabled">
-                        <div [class.hidden]="navigation !== index">
-                            <div id="step-{{index}}" ngForm #stepForm="ngForm" ngFormChanges (ngFormChange)="onFormChange()">
-                                <div *ngIf="validate[navigation] && stepForm.invalid">
-                                    <src-step-error [navigation]="navigation" [field_id_map]="field_id_map" [stepForm]="stepForm"></src-step-error>
-
-                                </div>
-                                <div class="description" *ngIf="step.description">{{step.description}}</div>
-                                <src-form [fileUploadUrl]="file_upload_url" (notifyFileUpload)="onFileUpload($event)" [identity_provided]="wbTipService.tip.data.whistleblower_identity" [uploads]="uploads" [answers]="answers" [step]="step" [index]="index"></src-form>
-                            </div>
-                        </div>
-                    </span>
+  <form #submissionForm="ngForm" id="SubmissionForm" autocomplete="off" novalidate>
+    <div class="tabbable tabs-below">
+      @if (wbTipService.tip.additional_questionnaire.steps.length > 1) {
+        <ul id="SubmissionTabsNavigationBox" class="nav nav-tabs">
+          @for (step of wbTipService.tip.additional_questionnaire.steps | orderBy:'order' ; track step; let index = $index) {
+            <li class="nav-item">
+              @if (step.enabled) {
+                <a id="step-{{index}}-link" class="nav-link title" [ngClass]="{active: navigation === index}" (click)="goToStep(index)">
+                  <span>{{index + 1}} - {{step.label}}</span>
+                </a>
+              }
+            </li>
+          }
+        </ul>
+      }
+      <div id="SubmissionTabsContentBox" class="tab-content">
+        @for (step of this.questionnaire.steps | orderBy:'order'; track step; let index = $index) {
+          <div>
+            @if (step && step.enabled) {
+              <span>
+                <div [class.hidden]="navigation !== index">
+                  <div id="step-{{index}}" ngForm #stepForm="ngForm" ngFormChanges (ngFormChange)="onFormChange()">
+                    @if (validate[navigation] && stepForm.invalid) {
+                      <div>
+                        <src-step-error [navigation]="navigation" [field_id_map]="field_id_map" [stepForm]="stepForm"></src-step-error>
+                      </div>
+                    }
+                    @if (step.description) {
+                      <div class="description">{{step.description}}</div>
+                    }
+                    <src-form [fileUploadUrl]="file_upload_url" (notifyFileUpload)="onFileUpload($event)" [identity_provided]="wbTipService.tip.data.whistleblower_identity" [uploads]="uploads" [answers]="answers" [step]="step" [index]="index"></src-form>
+                  </div>
                 </div>
-            </div>
-        </div>
-    </form>
-    <src-rfiles-upload-status [progress]="calculateProgress()" [estimatedTime]="calculateEstimatedTime()" [uploading]="uploading()" *ngIf="!hasNextStep()"></src-rfiles-upload-status>
+              </span>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  </form>
+  @if (!hasNextStep()) {
+    <src-rfiles-upload-status [progress]="calculateProgress()" [estimatedTime]="calculateEstimatedTime()" [uploading]="uploading()"></src-rfiles-upload-status>
+  }
 </div>
 <div class="modal-footer">
-    <div id="SubmissionButtons">
-        <br>
-        <button id="PreviousStepButton" class="btn btn-outline-secondary" *ngIf="hasPreviousStep()" (click)="whistleblowerSubmissionService.decrementStep(this)">
-            <i class="fa-solid fa-arrow-circle-left"></i>
-            <span>{{'Previous'|translate}}</span>
+  <div id="SubmissionButtons">
+    <br>
+      @if (hasPreviousStep()) {
+        <button id="PreviousStepButton" class="btn btn-outline-secondary" (click)="whistleblowerSubmissionService.decrementStep(this)">
+          <i class="fa-solid fa-arrow-circle-left"></i>
+          <span>{{'Previous'|translate}}</span>
         </button>
-        <button id="NextStepButton" class="btn btn-outline-secondary" *ngIf="hasNextStep()" (click)="whistleblowerSubmissionService.incrementStep(this)">
-            <span>{{'Next'|translate}}</span>
-            <i class="fa-solid fa-arrow-circle-right"></i>
+      }
+      @if (hasNextStep()) {
+        <button id="NextStepButton" class="btn btn-outline-secondary" (click)="whistleblowerSubmissionService.incrementStep(this)">
+          <span>{{'Next'|translate}}</span>
+          <i class="fa-solid fa-arrow-circle-right"></i>
         </button>
-        <button id="SubmitButton" class="btn btn-primary" [disabled]="done" *ngIf="!hasNextStep()" (click)="completeSubmission()" type="submit">
-            <i id="SubmitIconOK" class="fa-solid fa-check"></i>
-            <span>{{'Submit'|translate}}</span>
+      }
+      @if (!hasNextStep()) {
+        <button id="SubmitButton" class="btn btn-primary" [disabled]="done" (click)="completeSubmission()" type="submit">
+          <i id="SubmitIconOK" class="fa-solid fa-check"></i>
+          <span>{{'Submit'|translate}}</span>
         </button>
+      }
     </div>
-</div>
+  </div>
diff --git a/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.ts b/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.ts
index 62df824308..56e4a91639 100644
--- a/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.ts
+++ b/client/app/src/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit, QueryList, ViewChild, ViewChildren} from "@angular/core";
+import { Component, OnInit, QueryList, ViewChild, ViewChildren, inject } from "@angular/core";
 import {WbTipResolver} from "@app/shared/resolvers/wb-tip-resolver.service";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
-import {NgForm} from "@angular/forms";
+import { NgForm, FormsModule } from "@angular/forms";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {FieldUtilitiesService} from "@app/shared/services/field-utilities.service";
 import {UtilsService} from "@app/shared/services/utils.service";
@@ -9,12 +9,30 @@ import {HttpService} from "@app/shared/services/http.service";
 import {Answers, Questionnaire3} from "@app/models/reciever/reciever-tip-data";
 import {Field} from "@app/models/resolvers/field-template-model";
 import {WhistleblowerSubmissionService} from "@app/pages/whistleblower/whistleblower-submission.service";
+import { NgClass } from "@angular/common";
+import { NgFormChangeDirective } from "../../directive/ng-form-change.directive";
+import { StepErrorComponent } from "../../../pages/whistleblower/step-error/step-error.component";
+import { FormComponent } from "../../../pages/whistleblower/form/form.component";
+import { RFilesUploadStatusComponent } from "../../partials/rfiles-upload-status/r-files-upload-status.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-tip-additional-questionnaire-form",
-  templateUrl: "./tip-additional-questionnaire-form.component.html"
+    selector: "src-tip-additional-questionnaire-form",
+    templateUrl: "./tip-additional-questionnaire-form.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, NgFormChangeDirective, StepErrorComponent, FormComponent, RFilesUploadStatusComponent, TranslateModule, TranslatorPipe, OrderByPipe]
 })
 export class TipAdditionalQuestionnaireFormComponent implements OnInit {
+  protected whistleblowerSubmissionService = inject(WhistleblowerSubmissionService);
+  private wbTipResolver = inject(WbTipResolver);
+  private httpService = inject(HttpService);
+  private fieldUtilitiesService = inject(FieldUtilitiesService);
+  private utilsService = inject(UtilsService);
+  protected wbTipService = inject(WbtipService);
+  protected activeModal = inject(NgbActiveModal);
+
   @ViewChild("submissionForm") public submissionForm: NgForm;
   @ViewChildren("stepForm") stepForms: QueryList<NgForm>;
 
@@ -30,9 +48,6 @@ export class TipAdditionalQuestionnaireFormComponent implements OnInit {
   hasPreviousStepValue: boolean;
   hasNextStepValue: boolean;
 
-  constructor(protected whistleblowerSubmissionService:WhistleblowerSubmissionService,private wbTipResolver: WbTipResolver, private httpService: HttpService, private fieldUtilitiesService: FieldUtilitiesService, private utilsService: UtilsService, protected wbTipService: WbtipService, protected activeModal: NgbActiveModal) {
-  }
-
   ngOnInit(): void {
     this.prepareSubmission();
   }
diff --git a/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.html b/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.html
index 842fab35a8..9d040099fb 100644
--- a/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.html
+++ b/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.html
@@ -6,7 +6,7 @@
 </div>
 <div class="modal-body">
     <label>{{'Motivation'}}</label>
-    <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+    <span class="text-danger"  data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
     <textarea class="form-control" id="motivation" [(ngModel)]="reply_motivation"></textarea>
 </div>
 <div class="modal-footer">
diff --git a/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.ts b/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.ts
index 66eabb8413..2a729c31b0 100644
--- a/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.ts
+++ b/client/app/src/shared/modals/tip-operation-file-identity-access-reply/tip-operation-file-identity-access-reply.component.ts
@@ -1,19 +1,24 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {HttpService} from "@app/shared/services/http.service";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-tip-operation-file-identity-access-reply",
-  templateUrl: "./tip-operation-file-identity-access-reply.component.html"
+    selector: "src-tip-operation-file-identity-access-reply",
+    templateUrl: "./tip-operation-file-identity-access-reply.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class TipOperationFileIdentityAccessReplyComponent {
+  private httpService = inject(HttpService);
+  private modalService = inject(NgbModal);
+
 
   reply_motivation = "";
   @Input() iar_id = "";
 
-  constructor(private httpService: HttpService, private modalService: NgbModal) {
-  }
-
   cancel() {
     this.modalService.dismissAll();
   }
diff --git a/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.component.html b/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.component.html
index 6b5f6a948b..37302b322c 100644
--- a/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.component.html
+++ b/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.component.html
@@ -6,7 +6,7 @@
 </div>
 <div class="modal-body">
     <label>{{ 'Motivation' | translate }}</label>
-    <span class="text-danger" [title]="'This field is mandatory' | translate">*</span>
+    <span class="text-danger" data-toggle="tooltip" [title]="'This field is mandatory' | translate">*</span>
     <textarea class="form-control" name="request_motivation" [(ngModel)]="request_motivation" [placeholder]="'Motivation' | translate"></textarea>
 </div>
 <div class="modal-footer">
diff --git a/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.ompoent.ts b/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.ompoent.ts
index 316499ebe2..d723bc4257 100644
--- a/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.ompoent.ts
+++ b/client/app/src/shared/modals/tip-operation-file-identity-access-request/tip-operation-file-identity-access-request.ompoent.ts
@@ -1,21 +1,28 @@
 import {HttpClient} from "@angular/common/http";
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
 import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "src-tip-operation-file-identity-access-request",
-  templateUrl: "./tip-operation-file-identity-access-request.component.html"
+    selector: "src-tip-operation-file-identity-access-request",
+    templateUrl: "./tip-operation-file-identity-access-request.component.html",
+    standalone: true,
+    imports: [FormsModule, TranslateModule, TranslatorPipe]
 })
 export class TipOperationFileIdentityAccessRequestComponent {
+  private modalService = inject(NgbModal);
+  private tipsService = inject(ReceiverTipService);
+  private http = inject(HttpClient);
+  private utils = inject(UtilsService);
+
   request_motivation: string;
   modal: NgbModalRef;
 
-  constructor(private modalService: NgbModal, private tipsService: ReceiverTipService, private http: HttpClient, private utils: UtilsService) {
-  }
-
   confirm() {
     this.modalService.dismissAll();
     this.http.post("api/recipient/rtips/" + this.tipsService.tip.id + "/iars", {"request_motivation": this.request_motivation})
diff --git a/client/app/src/shared/modals/tip-operation-postpone/tip-operation-postpone.component.ts b/client/app/src/shared/modals/tip-operation-postpone/tip-operation-postpone.component.ts
index db369dd7c0..11945ecf43 100644
--- a/client/app/src/shared/modals/tip-operation-postpone/tip-operation-postpone.component.ts
+++ b/client/app/src/shared/modals/tip-operation-postpone/tip-operation-postpone.component.ts
@@ -1,13 +1,22 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, Input, OnInit} from "@angular/core";
-import {NgbDateStruct, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { Component, Input, OnInit, inject } from "@angular/core";
+import { NgbDateStruct, NgbModal, NgbInputDatepicker } from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-tip-operation-postpone",
-  templateUrl: "./tip-operation-postpone.component.html"
+    selector: "src-tip-operation-postpone",
+    templateUrl: "./tip-operation-postpone.component.html",
+    standalone: true,
+    imports: [NgbInputDatepicker, FormsModule, TranslateModule, TranslatorPipe]
 })
 export class TipOperationPostponeComponent implements OnInit {
+  private modalService = inject(NgbModal);
+  private http = inject(HttpClient);
+  private utils = inject(UtilsService);
+
   @Input() args: any;
 
   request_motivation: string;
@@ -15,9 +24,6 @@ export class TipOperationPostponeComponent implements OnInit {
   minDate: NgbDateStruct;
   maxDate: NgbDateStruct;
 
-  constructor(private modalService: NgbModal, private http: HttpClient, private utils: UtilsService) {
-  }
-
   confirm() {
     this.cancel();
 
diff --git a/client/app/src/shared/modals/tip-operation-set-reminder/tip-operation-set-reminder.component.ts b/client/app/src/shared/modals/tip-operation-set-reminder/tip-operation-set-reminder.component.ts
index 040f57669c..b6e2018b87 100644
--- a/client/app/src/shared/modals/tip-operation-set-reminder/tip-operation-set-reminder.component.ts
+++ b/client/app/src/shared/modals/tip-operation-set-reminder/tip-operation-set-reminder.component.ts
@@ -1,22 +1,28 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, Input, OnInit} from "@angular/core";
-import {NgbDateStruct, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { Component, Input, OnInit, inject } from "@angular/core";
+import { NgbDateStruct, NgbModal, NgbInputDatepicker } from "@ng-bootstrap/ng-bootstrap";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 
 @Component({
-  selector: "src-tip-operation-set-reminder",
-  templateUrl: "./tip-operation-set-reminder.component.html"
+    selector: "src-tip-operation-set-reminder",
+    templateUrl: "./tip-operation-set-reminder.component.html",
+    standalone: true,
+    imports: [NgbInputDatepicker, FormsModule, TranslateModule, TranslatorPipe]
 })
 export class TipOperationSetReminderComponent implements OnInit {
+  private modalService = inject(NgbModal);
+  private http = inject(HttpClient);
+  private utils = inject(UtilsService);
+
   @Input() args: any;
 
   request_motivation: string;
   model: NgbDateStruct;
 
-  constructor(private modalService: NgbModal, private http: HttpClient, private utils: UtilsService) {
-  }
-
   ngOnInit() {
     const reminderDate = this.args.reminder_date;
     this.args.reminder_date = {
diff --git a/client/app/src/shared/modals/transfer-access/transfer-access.component.ts b/client/app/src/shared/modals/transfer-access/transfer-access.component.ts
index a72b0c684a..92e2cdc172 100644
--- a/client/app/src/shared/modals/transfer-access/transfer-access.component.ts
+++ b/client/app/src/shared/modals/transfer-access/transfer-access.component.ts
@@ -1,19 +1,30 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {Receiver} from "@app/models/app/public-model";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+import { NgSelectComponent, NgLabelTemplateDirective } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-transfer-access",
-  templateUrl: "./transfer-access.component.html",
+    selector: "src-transfer-access",
+    templateUrl: "./transfer-access.component.html",
+    standalone: true,
+    imports: [
+        NgSelectComponent,
+        FormsModule,
+        NgLabelTemplateDirective,
+        TranslateModule,
+        TranslatorPipe,
+    ],
 })
 export class TransferAccessComponent {
+  private activeModal = inject(NgbActiveModal);
+
   @Input() usersNames: Record<string, string> | undefined;
   @Input() selectableRecipients: Receiver[];
   receiverId: { id: number };
 
-  constructor(private activeModal: NgbActiveModal) {
-  }
-
   confirm(receiverId: { id: number }) {
     this.activeModal.close(receiverId.id);
   }
diff --git a/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.html b/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.html
index 041e027bd7..1f7eb6c5c0 100644
--- a/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.html
+++ b/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.html
@@ -1,44 +1,48 @@
 <div class="modal-header">
-    <div class="modal-title">{{ 'Recipients' | translate }}</div>
-    <button type="button" class="close btn" (click)="cancel()" [attr.aria-label]="'Close' | translate">
-        <i class="fa-solid fa-times"></i>
-    </button>
+  <div class="modal-title">{{ 'Recipients' | translate }}</div>
+  <button type="button" class="close btn" (click)="cancel()" [attr.aria-label]="'Close' | translate">
+    <i class="fa-solid fa-times"></i>
+  </button>
 </div>
 <div class="modal-body">
-    <div>{{ 'Recipients' | translate }}</div>
-    <ng-select [items]="userData | filter: 'role': 'receiver'" [attr.data-cy]="'reciever_selection'" [(ngModel)]="selected.value" [virtualScroll]="true" [placeholder]="'Search' | translate" bindValue="name" (change)="addReceiver($event)">
-        <ng-template ng-label-tmp let-item="item">
-            {{ item.name }}
-        </ng-template>
-        <ng-template ng-option-tmp let-item="item">
-            <span [innerHTML]="item.name"></span>
-        </ng-template>
-    </ng-select>
-    <div *ngIf="arg.trigger_receiver">
-        <br />
-        <ol class="selection-list">
-            <li *ngFor="let user of arg.trigger_receiver; let i = index">
-                <span class="action-btns">
-                    <span (click)="removeReceiver(i)" title="{{'Remove' | translate}}">
-                        <i class="fa-solid fa-times"></i>
-                    </span>
-                </span>
-                <span>{{ admin_receivers_by_id[user].name }}</span>
-            </li>
-        </ol>
+  <div>{{ 'Recipients' | translate }}</div>
+  <ng-select [items]="userData | filter: 'role': 'receiver'" [attr.data-cy]="'reciever_selection'" [(ngModel)]="selected.value" [virtualScroll]="true" [placeholder]="'Search' | translate" bindValue="name" (change)="addReceiver($event)">
+    <ng-template ng-label-tmp let-item="item">
+      {{ item.name }}
+    </ng-template>
+    <ng-template ng-option-tmp let-item="item">
+      <span [innerHTML]="item.name"></span>
+    </ng-template>
+  </ng-select>
+  @if (arg.trigger_receiver) {
+    <div>
+      <br />
+      <ol class="selection-list">
+        @for (user of arg.trigger_receiver; track user; let i = $index) {
+          <li>
+            <span class="action-btns">
+              <span (click)="removeReceiver(i)" data-toggle="tooltip" title="{{'Remove' | translate}}">
+                <i class="fa-solid fa-times"></i>
+              </span>
+            </span>
+            <span>{{ admin_receivers_by_id[user].name }}</span>
+          </li>
+        }
+      </ol>
     </div>
+  }
 </div>
 <div class="modal-footer">
-    <button id="modal-action-ok" class="btn btn-primary" (click)="confirm()">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Confirm' | translate }}</span>
-    </button>
-    <button id="modal-action-reset" class="btn btn-danger" (click)="resetRecipients()">
-        <i class="fa-solid fa-check"></i>
-        <span>{{ 'Reset' | translate }}</span>
-    </button>
-    <button id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
-        <i class="fa-solid fa-times"></i>
-        <span>{{ 'Cancel' | translate }}</span>
-    </button>
+  <button id="modal-action-ok" class="btn btn-primary" (click)="confirm()">
+    <i class="fa-solid fa-check"></i>
+    <span>{{ 'Confirm' | translate }}</span>
+  </button>
+  <button id="modal-action-reset" class="btn btn-danger" (click)="resetRecipients()">
+    <i class="fa-solid fa-check"></i>
+    <span>{{ 'Reset' | translate }}</span>
+  </button>
+  <button id="modal-action-cancel" class="btn btn-outline-secondary" (click)="cancel()">
+    <i class="fa-solid fa-times"></i>
+    <span>{{ 'Cancel' | translate }}</span>
+  </button>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.ts b/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.ts
index ae8871d555..3c860e0a5c 100644
--- a/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.ts
+++ b/client/app/src/shared/modals/trigger-receiver/trigger-receiver.component.ts
@@ -1,15 +1,28 @@
-import {Component, Input, OnInit} from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {UsersResolver} from "@app/shared/resolvers/users.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {Option} from "@app/models/app/shared-public-model";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
+import { NgSelectComponent, NgLabelTemplateDirective, NgOptionTemplateDirective } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
 
 @Component({
-  selector: "src-trigger-receiver",
-  templateUrl: "./trigger-receiver.component.html"
+    selector: "src-trigger-receiver",
+    templateUrl: "./trigger-receiver.component.html",
+    standalone: true,
+    imports: [NgSelectComponent, FormsModule, NgLabelTemplateDirective, NgOptionTemplateDirective, TranslateModule, TranslatorPipe, FilterPipe]
 })
 export class TriggerReceiverComponent implements OnInit {
+  private utilsService = inject(UtilsService);
+  private users = inject(UsersResolver);
+  private activeModal = inject(NgbActiveModal);
+  private modalService = inject(NgbModal);
+
 
   @Input() arg: Option;
   confirmFunction: (data: Option) => void;
@@ -18,9 +31,6 @@ export class TriggerReceiverComponent implements OnInit {
   admin_receivers_by_id: { [userId: string]: userResolverModel } = {};
   userData: userResolverModel[] = [];
 
-  constructor(private utilsService: UtilsService, private users: UsersResolver, private activeModal: NgbActiveModal, private modalService: NgbModal) {
-  }
-
   ngOnInit(): void {
     this.selected = {value: [], name: ""};
     if (Array.isArray(this.users.dataModel)) {
diff --git a/client/app/src/shared/partials/admin-file/admin-file.component.html b/client/app/src/shared/partials/admin-file/admin-file.component.html
index 5bd9ce83ab..e54dba4913 100644
--- a/client/app/src/shared/partials/admin-file/admin-file.component.html
+++ b/client/app/src/shared/partials/admin-file/admin-file.component.html
@@ -1,23 +1,23 @@
 <label>{{ adminFile.title }}</label>
 <div class="uploadfile" [ngClass]="'file-' + adminFile.varname">
-    <ng-container *ngIf="!nodeData[adminFile.varname]">
-        <div class="custom-file">
-            <input #uploader [attr.id]="'customFile-' + adminFile.varname" type="file" flowButton [style.display]="'none'" class="custom-file-input" (change)="onFileSelected(uploader.files, adminFile.varname)" />
-            <label [attr.for]="'customFile-' + adminFile.varname" class="btn btn-sm btn-primary">
-                <i class="fa-solid fa-upload"></i>
-                <span>{{ 'Upload' | translate }}</span>
-            </label>
-        </div>
-    </ng-container>
-    <ng-container *ngIf="nodeData[adminFile.varname]">
-        <a class="btn btn-sm btn-primary" [href]="'s/' + adminFile.varname" [download]="adminFile.filename">
-            <i class="fa-solid fa-download"></i>
-            <span>{{ 'Download' | translate }}</span>
-        </a>
-        <button class="btn btn-sm btn-danger" (click)="deleteFile('api/admin/files/' + adminFile.varname)">
-            <i class="fa-solid fa-trash"></i>
-            <span>{{ 'Delete' | translate }}</span>
-        </button>
-    </ng-container>
-    <br>
-</div>
\ No newline at end of file
+  @if (!nodeData[adminFile.varname]) {
+    <div class="custom-file">
+      <input #uploader [attr.id]="'customFile-' + adminFile.varname" type="file" flowButton [style.display]="'none'" class="custom-file-input" (change)="onFileSelected(uploader.files, adminFile.varname)" />
+      <label [attr.for]="'customFile-' + adminFile.varname" class="btn btn-sm btn-primary">
+        <i class="fa-solid fa-upload"></i>
+        <span>{{ 'Upload' | translate }}</span>
+      </label>
+    </div>
+  }
+  @if (nodeData[adminFile.varname]) {
+    <a class="btn btn-sm btn-primary" [href]="'s/' + adminFile.varname" [download]="adminFile.filename">
+      <i class="fa-solid fa-download"></i>
+      <span>{{ 'Download' | translate }}</span>
+    </a>
+    <button class="btn btn-sm btn-danger" (click)="deleteFile('api/admin/files/' + adminFile.varname)">
+      <i class="fa-solid fa-trash"></i>
+      <span>{{ 'Delete' | translate }}</span>
+    </button>
+  }
+  <br>
+  </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/admin-file/admin-file.component.ts b/client/app/src/shared/partials/admin-file/admin-file.component.ts
index 4416086671..f996cfa8ca 100644
--- a/client/app/src/shared/partials/admin-file/admin-file.component.ts
+++ b/client/app/src/shared/partials/admin-file/admin-file.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
+import { Component, ElementRef, Input, OnInit, ViewChild, inject } from "@angular/core";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -6,19 +6,28 @@ import * as Flow from "@flowjs/flow.js";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {AppDataService} from "@app/app-data.service";
 import {AdminFile} from "@app/models/component-model/admin-file";
+import { NgClass } from "@angular/common";
+import { NgxFlowModule } from "@flowjs/ngx-flow";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-admin-file",
-  templateUrl: "./admin-file.component.html"
+    selector: "src-admin-file",
+    templateUrl: "./admin-file.component.html",
+    standalone: true,
+    imports: [NgClass, NgxFlowModule, TranslateModule, TranslatorPipe]
 })
 export class AdminFileComponent implements OnInit {
+  protected node = inject(NodeResolver);
+  protected appConfigService = inject(AppConfigService);
+  protected appDataService = inject(AppDataService);
+  protected utilsService = inject(UtilsService);
+  protected authenticationService = inject(AuthenticationService);
+
   @Input() adminFile: AdminFile;
   nodeData: { [key: string]: string[] | boolean } = {};
   @ViewChild("uploader") uploaderInput!: ElementRef<HTMLInputElement>;
 
-  constructor(protected node: NodeResolver, protected appConfigService: AppConfigService, protected appDataService: AppDataService, protected utilsService: UtilsService, protected authenticationService: AuthenticationService) {
-  }
-
   ngOnInit() {
     this.nodeData["css"] = this.appDataService.public.node.css;
     this.nodeData["script"] = this.appDataService.public.node.script;
diff --git a/client/app/src/shared/partials/demo/demo.component.ts b/client/app/src/shared/partials/demo/demo.component.ts
index b52435646c..bf32267057 100644
--- a/client/app/src/shared/partials/demo/demo.component.ts
+++ b/client/app/src/shared/partials/demo/demo.component.ts
@@ -1,8 +1,12 @@
 import {Component} from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-demo",
-  templateUrl: "./demo.component.html"
+    selector: "src-demo",
+    templateUrl: "./demo.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class DemoComponent {
 
diff --git a/client/app/src/shared/partials/enable-2fa/enable-2fa.html b/client/app/src/shared/partials/enable-2fa/enable-2fa.html
index a66fa9f902..a5b77bb715 100644
--- a/client/app/src/shared/partials/enable-2fa/enable-2fa.html
+++ b/client/app/src/shared/partials/enable-2fa/enable-2fa.html
@@ -1,50 +1,54 @@
 <div class="row">
-    <div class="col-md-12">
-        <div>
-            <span class="badge bg-primary">1</span>
-            <span>{{'Install an authenticator app on your phone'|translate}}</span>
-        </div>
+  <div class="col-md-12">
+    <div>
+      <span class="badge bg-primary">1</span>
+      <span>{{'Install an authenticator app on your phone'|translate}}</span>
     </div>
+  </div>
 </div>
 <div class="row mt-3">
-    <div class="col-md-12">
-        <div>
-            <div>
-                <span class="badge bg-primary">2</span>
-                <span>{{'Scan the QR code with the app'|translate}}</span>
+  <div class="col-md-12">
+    <div>
+      <div>
+        <span class="badge bg-primary">2</span>
+        <span>{{'Scan the QR code with the app'|translate}}</span>
+      </div>
+      <br />
+      <div class="text-center">
+        <qrcode data-toggle="tooltip" title="{{'Copy to clipboard' | translate}}" (click)="utils.copyToClipboard(twoFactorAuthData.totp.secret);" [qrdata]="twoFactorAuthData.totp.qrcode_string" [width]="350" [errorCorrectionLevel]="'Q'" [colorDark]="'#1d1f2a'" [colorLight]="'#fff'"></qrcode>
+        <form id="OTPSecretForm" [formGroup]="OTPSecretForm" class="form-inline">
+          <div class="form-group d-block mx-auto">
+            <div class="input-group">
+              <input [ngModelOptions]="{standalone: true}" [ngClass]="{'is-invalid': OTPSecretForm.invalid}" class="form-control" name="secret" (ngModelChange)="onSecretKeyChanged()" [(ngModel)]="twoFactorAuthData.totp.secret" [disabled]="!twoFactorAuthData.totp.edit" type="text" [minlength]="32" [maxLength]="32" maxlength="32" size="32" required />
+              @if (twoFactorAuthData.totp.edit) {
+                <span class="input-group-append" (click)="OTPSecretForm.valid && (twoFactorAuthData.totp.edit=!twoFactorAuthData.totp.edit)" data-toggle="tooltip" title="{{'Save' | translate}}">
+                  <button class="btn btn-secondary rounded-start-0 m-0" [disabled]="OTPSecretForm.invalid">
+                    <i class="fa-solid fa-save"></i>
+                  </button>
+                </span>
+              }
+              @if (!twoFactorAuthData.totp.edit) {
+                <span class="input-group-append" (click)="twoFactorAuthData.totp.edit=!twoFactorAuthData.totp.edit" data-toggle="tooltip" title="{{'Edit' | translate}}">
+                  <button class="btn btn-secondary rounded-start-0 m-0" [disabled]="twoFactorAuthData.totp.secret.length !== 32">
+                    <i class="fa-solid fa-edit"></i>
+                  </button>
+                </span>
+              }
             </div>
-            <br />
-            <div class="text-center">
-                <qrcode title="{{'Copy to clipboard' | translate}}" (click)="utils.copyToClipboard(twoFactorAuthData.totp.secret);" [qrdata]="twoFactorAuthData.totp.qrcode_string" [width]="350" [errorCorrectionLevel]="'Q'" [colorDark]="'#1d1f2a'" [colorLight]="'#fff'"></qrcode>
-                <form id="OTPSecretForm" [formGroup]="OTPSecretForm" class="form-inline">
-                    <div class="form-group d-block mx-auto">
-                        <div class="input-group">
-                            <input [ngModelOptions]="{standalone: true}" [ngClass]="{'is-invalid': OTPSecretForm.invalid}" class="form-control" name="secret" (ngModelChange)="onSecretKeyChanged()" [(ngModel)]="twoFactorAuthData.totp.secret" [disabled]="!twoFactorAuthData.totp.edit" type="text" [minlength]="32" [maxLength]="32" maxlength="32" size="32" required />
-                            <span *ngIf="twoFactorAuthData.totp.edit" class="input-group-append" (click)="OTPSecretForm.valid && (twoFactorAuthData.totp.edit=!twoFactorAuthData.totp.edit)" title="{{'Save' | translate}}">
-                                <button class="btn btn-secondary rounded-start-0 m-0" [disabled]="OTPSecretForm.invalid">
-                                    <i class="fa-solid fa-save"></i>
-                                </button>
-                            </span>
-                            <span *ngIf="!twoFactorAuthData.totp.edit" class="input-group-append" (click)="twoFactorAuthData.totp.edit=!twoFactorAuthData.totp.edit" title="{{'Edit' | translate}}">
-                                <button class="btn btn-secondary rounded-start-0 m-0" [disabled]="twoFactorAuthData.totp.secret.length !== 32">
-                                    <i class="fa-solid fa-edit"></i>
-                                </button>
-                            </span>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
+          </div>
+        </form>
+      </div>
     </div>
+  </div>
 </div>
 <div class="row mt-3">
-    <div class="col-md-12">
-        <div class="form-group">
-            <div>
-                <span class="badge bg-primary">3</span>
-                <span>{{'Enter the two factor authentication code'|translate}}</span>
-            </div>
-            <input class="form-control" [(ngModel)]="twoFactorAuthData.totp.token" type="text" size="6" maxlength="6" />
-        </div>
+  <div class="col-md-12">
+    <div class="form-group">
+      <div>
+        <span class="badge bg-primary">3</span>
+        <span>{{'Enter the two factor authentication code'|translate}}</span>
+      </div>
+      <input class="form-control" [(ngModel)]="twoFactorAuthData.totp.token" type="text" size="6" maxlength="6" />
     </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/enable-2fa/enable-2fa.ts b/client/app/src/shared/partials/enable-2fa/enable-2fa.ts
index 2e071a5ca3..dc416be842 100644
--- a/client/app/src/shared/partials/enable-2fa/enable-2fa.ts
+++ b/client/app/src/shared/partials/enable-2fa/enable-2fa.ts
@@ -1,20 +1,31 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
-import {FormBuilder, FormGroup} from "@angular/forms";
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import {TwoFactorAuthData} from "@app/services/helper/2fa.data.service";
+import { QRCodeModule } from "angularx-qrcode";
+import { NgClass } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-enable-2fa",
-  templateUrl: "./enable-2fa.html"
+    selector: "src-enable-2fa",
+    templateUrl: "./enable-2fa.html",
+    standalone: true,
+    imports: [QRCodeModule, FormsModule, ReactiveFormsModule, NgClass, TranslateModule, TranslatorPipe]
 })
 export class Enable2fa implements OnInit{
+  protected utils = inject(UtilsService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  private builder = inject(FormBuilder);
+  protected twoFactorAuthData = inject(TwoFactorAuthData);
+
 
   symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
   array = new Uint32Array(32);
   OTPSecretForm: FormGroup;
 
-  constructor(protected utils: UtilsService, protected preferenceResolver: PreferenceResolver, private builder: FormBuilder, protected twoFactorAuthData: TwoFactorAuthData) {
+  constructor() {
     this.initialization();
   }
 
diff --git a/client/app/src/shared/partials/footer/footer.component.html b/client/app/src/shared/partials/footer/footer.component.html
index b034dac1dd..2515251a18 100644
--- a/client/app/src/shared/partials/footer/footer.component.html
+++ b/client/app/src/shared/partials/footer/footer.component.html
@@ -1,11 +1,21 @@
 <footer id="FooterBox">
-    <ng-container *ngIf="appDataService.public.node">
-        <markdown id="CustomFooter" class="vcenter preformatted mb-1" *ngIf="appDataService.public.node.footer" [data]="appDataService.public.node.footer | stripHtml"></markdown>
-        <div id="Policies" class="vcenter mb-1" *ngIf="appDataService.public.node.footer_whistleblowing_policy || appDataService.public.node.footer_privacy_policy">
-            <a *ngIf="appDataService.public.node.footer_whistleblowing_policy" href="{{appDataService.public.node.footer_whistleblowing_policy}}">{{'Whistleblowing Policy' | translate}}</a>
-            <span *ngIf="appDataService.public.node.footer_whistleblowing_policy && appDataService.public.node.footer_privacy_policy"> - </span>
-            <a *ngIf="appDataService.public.node.footer_privacy_policy" href="{{appDataService.public.node.footer_privacy_policy}}">{{'Privacy Policy' | translate}}</a>
-        </div>
-        <div id="AttributionClause" class="vcenter">Powered by <a href="https://www.globaleaks.org/" title="GlobaLeaks - Secure Whistleblowing Software" rel="noreferrer" target="_blank">GlobaLeaks</a></div>
-    </ng-container>
+  @if (appDataService.public.node) {
+    @if (appDataService.public.node.footer) {
+      <markdown id="CustomFooter" class="vcenter preformatted mb-1" [data]="appDataService.public.node.footer | stripHtml"></markdown>
+    }
+    @if (appDataService.public.node.footer_whistleblowing_policy || appDataService.public.node.footer_privacy_policy) {
+      <div id="Policies" class="vcenter mb-1">
+        @if (appDataService.public.node.footer_whistleblowing_policy) {
+          <a href="{{appDataService.public.node.footer_whistleblowing_policy}}">{{'Whistleblowing Policy' | translate}}</a>
+        }
+        @if (appDataService.public.node.footer_whistleblowing_policy && appDataService.public.node.footer_privacy_policy) {
+          <span> - </span>
+        }
+        @if (appDataService.public.node.footer_privacy_policy) {
+          <a href="{{appDataService.public.node.footer_privacy_policy}}">{{'Privacy Policy' | translate}}</a>
+        }
+      </div>
+    }
+    <div id="AttributionClause" class="vcenter">Powered by <a href="https://www.globaleaks.org/" title="GlobaLeaks - Secure Whistleblowing Software" rel="noreferrer" target="_blank">GlobaLeaks</a></div>
+  }
 </footer>
diff --git a/client/app/src/shared/partials/footer/footer.component.ts b/client/app/src/shared/partials/footer/footer.component.ts
index d77f680005..036b435667 100644
--- a/client/app/src/shared/partials/footer/footer.component.ts
+++ b/client/app/src/shared/partials/footer/footer.component.ts
@@ -1,11 +1,17 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 
+import { MarkdownComponent } from "ngx-markdown";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+
 @Component({
-  selector: "app-footer",
-  templateUrl: "./footer.component.html"
+    selector: "app-footer",
+    templateUrl: "./footer.component.html",
+    standalone: true,
+    imports: [MarkdownComponent, TranslateModule, TranslatorPipe, StripHtmlPipe]
 })
 export class FooterComponent {
-  constructor(protected appDataService: AppDataService) {
-  }
+  protected appDataService = inject(AppDataService);
 }
diff --git a/client/app/src/shared/partials/header/header.component.html b/client/app/src/shared/partials/header/header.component.html
index fcbf54d660..0557a98226 100644
--- a/client/app/src/shared/partials/header/header.component.html
+++ b/client/app/src/shared/partials/header/header.component.html
@@ -1,23 +1,25 @@
 <header id="HeaderBox" class="p-3">
-    <div class="d-flex flex-wrap justify-content-between">
-        <div id="HeaderBox1">
-            <div id="LogoBox" class="mb-3" (click)="appConfig.setHomepage()">
-                <img class="img-fluid pointer" [alt]="appDataService.projectTitle" src="{{appDataService.public.node.logo ? 's/logo' : 'data/logo.png'}}" />
-            </div>
-            <div id="TitleBox">
-                <ng-container *ngIf="appDataService.projectTitle || appDataService.pageTitle">
-                    <h1>
-                        <span id="ProjectTitle" (click)="appConfig.setHomepage()">
-                            <a href="">{{appDataService.projectTitle}}</a>
-                        </span>
-                        <span class="TitleSeparator" *ngIf="appDataService.projectTitle && appDataService.pageTitle"> - </span>
-                        <span id="PageTitle">{{appDataService ? appDataService.pageTitle ? appDataService.pageTitle : '' : '' | translate}}</span>
-                    </h1>
-                </ng-container>
-            </div>
-        </div>
-        <div id="HeaderBox2">
-            <views-user id="UserBox"></views-user>
-        </div>
+  <div class="d-flex flex-wrap justify-content-between">
+    <div id="HeaderBox1">
+      <div id="LogoBox" class="mb-3" (click)="appConfig.setHomepage()">
+        <img class="img-fluid pointer" [alt]="appDataService.projectTitle" src="{{appDataService.public.node.logo ? 's/logo' : 'data/logo.png'}}" />
+      </div>
+      <div id="TitleBox">
+        @if (appDataService.projectTitle || appDataService.pageTitle) {
+          <h1>
+            <span id="ProjectTitle" (click)="appConfig.setHomepage()">
+              <a href="">{{appDataService.projectTitle}}</a>
+            </span>
+            @if (appDataService.projectTitle && appDataService.pageTitle) {
+              <span class="TitleSeparator"> - </span>
+            }
+            <span id="PageTitle">{{appDataService ? appDataService.pageTitle ? appDataService.pageTitle : '' : '' | translate}}</span>
+          </h1>
+        }
+      </div>
     </div>
+    <div id="HeaderBox2">
+      <views-user id="UserBox"></views-user>
+    </div>
+  </div>
 </header>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/header/header.component.ts b/client/app/src/shared/partials/header/header.component.ts
index dab76e77eb..8772f22a2e 100644
--- a/client/app/src/shared/partials/header/header.component.ts
+++ b/client/app/src/shared/partials/header/header.component.ts
@@ -1,12 +1,18 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {AppDataService} from "@app/app-data.service";
 
+import { UserComponent } from "./template/user/user.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "views-header",
-  templateUrl: "./header.component.html"
+    selector: "views-header",
+    templateUrl: "./header.component.html",
+    standalone: true,
+    imports: [UserComponent, TranslateModule, TranslatorPipe]
 })
 export class HeaderComponent {
-  constructor(public appConfig: AppConfigService, public appDataService: AppDataService) {
-  }
+  appConfig = inject(AppConfigService);
+  appDataService = inject(AppDataService);
 }
diff --git a/client/app/src/shared/partials/header/template/user/user.component.html b/client/app/src/shared/partials/header/template/user/user.component.html
index 25987400db..86bff246c7 100644
--- a/client/app/src/shared/partials/header/template/user/user.component.html
+++ b/client/app/src/shared/partials/header/template/user/user.component.html
@@ -1,48 +1,64 @@
 <div [hidden]="preferences.dataModel && (preferences.dataModel.password_change_needed || preferences.dataModel.require_two_factor)" class="d-flex justify-content-end">
-	<div id="LanguagePickerBox" *ngIf="appDataService.public.node.languages_enabled.length > 1" class="order-2" [ngClass]="appDataService.public.node.wizard_done ? 'language-box' : 'language-box-extended'">
-        <label for="language-picker-select" class="visually-hidden">{{'Select your language' | translate}}</label>
-        <ng-select labelForId="language-picker-select" [clearable]="false" (change)="onChangeLanguage();" [(ngModel)]="translationService.language">
-            <ng-option *ngFor="let lang of appDataService.languages_enabled_selector | orderBy: 'native'" [value]="lang.code">
-                <span [attr.data-cy]="lang.code">{{lang.native}}</span>
-            </ng-option>
-        </ng-select>
-	</div>
-	<div id="LoginStatusBox" *ngIf="utils.showUserStatusBox(authentication, appDataService)">
-		<span id="HomeLinkBox">
-            <span *ngIf="authentication.session.role !== 'whistleblower'">
-                <a id="HomepageLink" [href]="'#'+authentication.session.homepage" title="{{'Home' | translate }}">
-                    <i class="fa-solid fa-fw fa-home"></i>
-                </a>
-                <span class="text-separator">|</span>
-            </span>
-        </span>
-		<span id="PreferencesLinkBox" *ngIf="authentication.session.role !== 'whistleblower' && !authentication.session.properties.management_session">
-            <a id="PreferencesLink" [href]="'#'+authentication.session.preferencespage" title="{{'Preferences' | translate}}">
-                <i class="fa-solid fa-fw fa-user"></i>
-            </a>
-            <span class="text-separator">|</span>
-        </span>
-		<span id="SupportLinkBox" *ngIf="authentication.session && authentication.session.role !== 'whistleblower'">
-            <a id="SupportLink" (click)="utils.openSupportModal(appDataService)" title="{{'Request support' | translate}}">
-                <i class="fa-solid fa-fw fa-life-ring"></i>
+  @if (appDataService.public.node.languages_enabled.length > 1) {
+    <div id="LanguagePickerBox" class="order-2" [ngClass]="appDataService.public.node.wizard_done ? 'language-box' : 'language-box-extended'">
+      <label for="language-picker-select" class="visually-hidden">{{'Select your language' | translate}}</label>
+      <ng-select id="language-picker-select" [clearable]="false" (change)="onChangeLanguage();" [(ngModel)]="translationService.language">
+        @for (lang of appDataService.languages_enabled_selector | orderBy: 'native'; track lang) {
+          <ng-option [value]="lang.code">
+            <span [attr.data-cy]="lang.code">{{lang.native}}</span>
+          </ng-option>
+        }
+      </ng-select>
+    </div>
+  }
+  @if (utils.showUserStatusBox(authentication, appDataService)) {
+    <div id="LoginStatusBox">
+      <span id="HomeLinkBox">
+        @if (authentication.session.role !== 'whistleblower') {
+          <span>
+            <a id="HomepageLink" [href]="'#'+authentication.session.homepage" title="{{'Home' | translate }}">
+              <i class="fa-solid fa-fw fa-home"></i>
             </a>
             <span class="text-separator">|</span>
+          </span>
+        }
+      </span>
+      @if (authentication.session.role !== 'whistleblower' && !authentication.session.properties.management_session) {
+        <span id="PreferencesLinkBox">
+          <a id="PreferencesLink" [href]="'#'+authentication.session.preferencespage" title="{{'Preferences' | translate}}">
+            <i class="fa-solid fa-fw fa-user"></i>
+          </a>
+          <span class="text-separator">|</span>
         </span>
-		<span id="LogoutLinkBox">
-            <i class="glyphicon glyphicon-user"></i>
+      }
+      @if (authentication.session && authentication.session.role !== 'whistleblower') {
+        <span id="SupportLinkBox">
+          <a id="SupportLink" (click)="utils.openSupportModal(appDataService)" title="{{'Request support' | translate}}">
+            <i class="fa-solid fa-fw fa-life-ring"></i>
+          </a>
+          <span class="text-separator">|</span>
         </span>
-		<span id="LogoutLinkBox">
-            <a href="#" id="LogoutLink" (click)="onLogout($event)" title="{{'Logout' | translate}}">
-                <i class="pointer fa-solid fa-fw fa-sign-out-alt"></i>
-                <span *ngIf="authentication.session.role === 'whistleblower'">
-                    <span></span>
-                    <span>{{'Logout'|translate}}</span>
-                </span>
-            </a>
-        </span>
-	</div>
+      }
+      <span id="LogoutLinkBox">
+        <i class="glyphicon glyphicon-user"></i>
+      </span>
+      <span id="LogoutLinkBox">
+        <a href="#" id="LogoutLink" (click)="onLogout($event)" title="{{'Logout' | translate}}">
+          <i class="pointer fa-solid fa-fw fa-sign-out-alt"></i>
+          @if (authentication.session.role === 'whistleblower') {
+            <span>
+              <span></span>
+              <span>{{'Logout'|translate}}</span>
+            </span>
+          }
+        </a>
+      </span>
+    </div>
+  }
 </div>
-<div id="WhistleblowerLoginBox" class="ms-1 mb-1" *ngIf="utils.showWBLoginBox()">
+@if (utils.showWBLoginBox()) {
+  <div id="WhistleblowerLoginBox" class="ms-1 mb-1">
     <src-receipt ></src-receipt>
-</div>
+  </div>
+}
 
diff --git a/client/app/src/shared/partials/header/template/user/user.component.ts b/client/app/src/shared/partials/header/template/user/user.component.ts
index e5b0cd1fd2..674f32a228 100644
--- a/client/app/src/shared/partials/header/template/user/user.component.ts
+++ b/client/app/src/shared/partials/header/template/user/user.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component} from "@angular/core";
+import { ChangeDetectorRef, Component, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {AppConfigService} from "@app/services/root/app-config.service";
@@ -7,15 +7,35 @@ import {AppDataService} from "@app/app-data.service";
 import {TranslationService} from "@app/services/helper/translation.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {ActivatedRoute, Router} from "@angular/router";
+import { NgClass } from "@angular/common";
+import { NgSelectComponent, NgOptionComponent } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+import { ReceiptComponent } from "../../../receipt/receipt.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "views-user",
-  templateUrl: "./user.component.html"
+    selector: "views-user",
+    templateUrl: "./user.component.html",
+    standalone: true,
+    imports: [NgClass, NgSelectComponent, FormsModule, NgOptionComponent, ReceiptComponent, TranslateModule, TranslatorPipe, OrderByPipe]
 })
 export class UserComponent {
+  protected activatedRoute = inject(ActivatedRoute);
+  protected httpService = inject(HttpService);
+  protected appConfigService = inject(AppConfigService);
+  private cdr = inject(ChangeDetectorRef);
+  protected authentication = inject(AuthenticationService);
+  protected preferences = inject(PreferenceResolver);
+  protected utils = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+  protected translationService = inject(TranslationService);
+  private router = inject(Router);
+
   private lastLang: string | null = null;
 
-  constructor(protected activatedRoute: ActivatedRoute, protected httpService: HttpService, protected appConfigService: AppConfigService, private cdr: ChangeDetectorRef, protected authentication: AuthenticationService, protected preferences: PreferenceResolver, protected utils: UtilsService, protected appDataService: AppDataService, protected translationService: TranslationService, private router: Router) {
+  constructor() {
     this.onQueryParameterChangeListener();
   }
 
diff --git a/client/app/src/shared/partials/image-upload/image-upload.component.html b/client/app/src/shared/partials/image-upload/image-upload.component.html
index 273ef29194..d43b08cb7f 100644
--- a/client/app/src/shared/partials/image-upload/image-upload.component.html
+++ b/client/app/src/shared/partials/image-upload/image-upload.component.html
@@ -1,16 +1,24 @@
 <form action="">
-    <div id="projectImageLoader" class="image-upload">
-        <ng-container #flowAdvanced="flow" flowDrop [flowConfig]="flowConfig"></ng-container>
-        <input #uploader id="projectImageLoader" (change)="onFileSelected(uploader.files)" type="file" flowButton [style.display]="'none'" [flowAttributes]="{ accept: 'image/*' }" class="custom-file-input" />
-        <label for="projectImageLoader" class="change-picture-button text-primary" *ngIf="!imageUploadModel[imageUploadModelAttr]" title="{{'Edit' | translate}}" (click)="triggerFileInputClick()">
-            <i class="fa-solid fa-edit"></i>
-        </label>
-        <label [attr.id]="'projectImageLoader'" class="change-picture-button text-danger" (click)="deletePicture()" *ngIf="imageUploadModel[imageUploadModelAttr] || imageUploadObj.files.length" title="{{'Delete' | translate}}">
-            <i class="fa-solid fa-times"></i>
-        </label>
-        <div class="embed-responsive embed-responsive-16by9">
-            <img *ngIf="filemodel" class="embed-responsive-item logo-image" alt="image" width="500" height="500" ngSrc="s/{{imageUploadId}}?timestamp={{getCurrentTimestamp()}}" />
-            <div *ngIf="!filemodel" class="logo-image-empty"></div>
-        </div>
+  <div id="projectImageLoader" class="image-upload">
+    <ng-container #flowAdvanced="flow" flowDrop [flowConfig]="flowConfig"></ng-container>
+    <input #uploader id="projectImageLoader" (change)="onFileSelected(uploader.files)" type="file" flowButton [style.display]="'none'" [flowAttributes]="{ accept: 'image/*' }" class="custom-file-input" />
+    @if (!imageUploadModel[imageUploadModelAttr]) {
+      <label for="projectImageLoader" class="change-picture-button text-primary" data-toggle="tooltip" title="{{'Edit' | translate}}" (click)="triggerFileInputClick()">
+        <i class="fa-solid fa-edit"></i>
+      </label>
+    }
+    @if (imageUploadModel[imageUploadModelAttr] || imageUploadObj.files.length) {
+      <label [attr.id]="'projectImageLoader'" class="change-picture-button text-danger" (click)="deletePicture()" data-toggle="tooltip" title="{{'Delete' | translate}}">
+        <i class="fa-solid fa-times"></i>
+      </label>
+    }
+    <div class="embed-responsive embed-responsive-16by9">
+      @if (filemodel) {
+        <img class="embed-responsive-item logo-image" alt="image" width="500" height="500" ngSrc="s/{{imageUploadId}}?timestamp={{getCurrentTimestamp()}}" />
+      }
+      @if (!filemodel) {
+        <div class="logo-image-empty"></div>
+      }
     </div>
+  </div>
 </form>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/image-upload/image-upload.component.ts b/client/app/src/shared/partials/image-upload/image-upload.component.ts
index f75a794eac..f980add7a1 100644
--- a/client/app/src/shared/partials/image-upload/image-upload.component.ts
+++ b/client/app/src/shared/partials/image-upload/image-upload.component.ts
@@ -1,16 +1,26 @@
 import {HttpClient} from "@angular/common/http";
-import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
-import {FlowDirective} from "@flowjs/ngx-flow";
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, inject } from "@angular/core";
+import { FlowDirective, NgxFlowModule } from "@flowjs/ngx-flow";
 import {Subscription} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {FlowOptions} from "@flowjs/flow.js";
 import { UtilsService } from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { NgOptimizedImage } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-image-upload",
-  templateUrl: "./image-upload.component.html"
+    selector: "src-image-upload",
+    templateUrl: "./image-upload.component.html",
+    standalone: true,
+    imports: [FormsModule, NgxFlowModule, NgOptimizedImage, TranslateModule, TranslatorPipe]
 })
 export class ImageUploadComponent implements AfterViewInit, OnDestroy, OnInit {
+  private http = inject(HttpClient);
+  protected authenticationService = inject(AuthenticationService);
+  private utilsService = inject(UtilsService);
+
   @ViewChild("flowAdvanced")
   flow: FlowDirective;
   @ViewChild("uploader") uploaderElementRef!: ElementRef<HTMLInputElement>;
@@ -25,9 +35,6 @@ export class ImageUploadComponent implements AfterViewInit, OnDestroy, OnInit {
   flowConfig: FlowOptions;
   @ViewChild('uploader') uploaderInput: ElementRef<HTMLInputElement>;
 
-  constructor(private http: HttpClient, protected authenticationService: AuthenticationService,private utilsService: UtilsService) {
-  }
-
   ngOnInit() {
     this.filemodel = this.imageUploadModel[this.imageUploadModelAttr];
     this.flowConfig = this.utilsService.flowDefault.opts;
diff --git a/client/app/src/shared/partials/messageconsole/message-console.component.html b/client/app/src/shared/partials/messageconsole/message-console.component.html
index 872fb5312e..fddba8745d 100644
--- a/client/app/src/shared/partials/messageconsole/message-console.component.html
+++ b/client/app/src/shared/partials/messageconsole/message-console.component.html
@@ -1,45 +1,70 @@
-<div *ngIf="appDataService.errorCodes.code != -1 && ![4, 9, 11, 13, 10].includes(appDataService.errorCodes.code)">
+@if (appDataService.errorCodes.code != -1 && ![4, 9, 11, 13, 10].includes(appDataService.errorCodes.code)) {
+  <div>
     <div class="alert alert-danger alert-danger-console alert-dismissible fade show" (close)="dismissError()">
-        <button type="button" class="close close-btn bg-transparent custom-close-button" (click)="dismissError()" data-bs-dismiss="alert" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
-
-        <div *ngIf="appDataService.errorCodes.code !== 15">
-            <div>{{'Error!'|translate}}</div>
+      <button type="button" class="close close-btn bg-transparent custom-close-button" (click)="dismissError()" data-bs-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      @if (appDataService.errorCodes.code !== 15) {
+        <div>
+          <div>{{'Error!'|translate}}</div>
         </div>
-        <ng-container [ngSwitch]="appDataService.errorCodes.code">
-            <div *ngSwitchCase="1">
-                <span>{{ 'Error on input validation' | translate }}</span>
-                <span *ngIf="appDataService.errorCodes.arguments && appDataService.errorCodes.arguments.length > 0">
-                    {{ appDataService.errorCodes.arguments[0] }}
-                </span>
-            </div>
-            <div *ngSwitchCase="3">
-                <span>{{ 'Error on input validation' | translate }}</span>
-                <span *ngIf="appDataService.errorCodes.arguments && appDataService.errorCodes.arguments.length > 0"> [{{ appDataService.errorCodes.arguments[0] }}] </span>
-            </div>
-            <div *ngSwitchCase="6">
-                <span>{{'Resource not found'|translate}}</span>
-            </div>
-            <div *ngSwitchCase="8">
-                <span>{{'Forbidden operation'|translate}}</span>
-            </div>
-            <div *ngSwitchCase="12">
-                <span>{{'The specified old password is not valid'|translate}}</span>
-            </div>
-            <div *ngSwitchCase="13">
-                <span>{{'Resource can only be accessed via the Tor network'|translate}}</span>
-            </div>
-            <div *ngSwitchCase="14">
-                <span>{{'The upload request exceeds the size limit'|translate}}</span>
-            </div>
-            <div *ngSwitchCase="17">
-                <span>{{'A user with this username already exists'|translate}}</span>
-            </div>
-            <div *ngSwitchCase="15">
-                <strong><span class="text-danger">{{'Error loading custom files'|translate}}</span></strong>
-                <span>{{appDataService.errorCodes.message|translate}}</span>
-            </div>
-        </ng-container>
+      }
+      @switch (appDataService.errorCodes.code) {
+        @case (1) {
+          <div>
+            <span>{{ 'Error on input validation' | translate }}</span>
+            @if (appDataService.errorCodes.arguments && appDataService.errorCodes.arguments.length > 0) {
+              <span>
+                {{ appDataService.errorCodes.arguments[0] }}
+              </span>
+            }
+          </div>
+        }
+        @case (3) {
+          <div>
+            <span>{{ 'Error on input validation' | translate }}</span>
+            @if (appDataService.errorCodes.arguments && appDataService.errorCodes.arguments.length > 0) {
+              <span> [{{ appDataService.errorCodes.arguments[0] }}] </span>
+            }
+          </div>
+        }
+        @case (6) {
+          <div>
+            <span>{{'Resource not found'|translate}}</span>
+          </div>
+        }
+        @case (8) {
+          <div>
+            <span>{{'Forbidden operation'|translate}}</span>
+          </div>
+        }
+        @case (12) {
+          <div>
+            <span>{{'The specified old password is not valid'|translate}}</span>
+          </div>
+        }
+        @case (13) {
+          <div>
+            <span>{{'Resource can only be accessed via the Tor network'|translate}}</span>
+          </div>
+        }
+        @case (14) {
+          <div>
+            <span>{{'The upload request exceeds the size limit'|translate}}</span>
+          </div>
+        }
+        @case (17) {
+          <div>
+            <span>{{'A user with this username already exists'|translate}}</span>
+          </div>
+        }
+        @case (15) {
+          <div>
+            <strong><span class="text-danger">{{'Error loading custom files'|translate}}</span></strong>
+            <span>{{appDataService.errorCodes.message|translate}}</span>
+          </div>
+        }
+      }
     </div>
-</div>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/messageconsole/message-console.component.ts b/client/app/src/shared/partials/messageconsole/message-console.component.ts
index 80d1827d62..1dd9f363b2 100644
--- a/client/app/src/shared/partials/messageconsole/message-console.component.ts
+++ b/client/app/src/shared/partials/messageconsole/message-console.component.ts
@@ -1,18 +1,22 @@
-import {AfterViewChecked, Component} from "@angular/core";
+import { AfterViewChecked, Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {ErrorCodes} from "@app/models/app/error-code";
 
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "messageconsole",
-  templateUrl: "./message-console.component.html"
+    selector: "messageconsole",
+    templateUrl: "./message-console.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class MessageConsoleComponent implements AfterViewChecked {
+  appDataService = inject(AppDataService);
+
   private timeoutId: any;
   private timeoutRunning: boolean = false;
 
-  constructor(public appDataService: AppDataService) {
-  }
-
   dismissError() {
     clearTimeout(this.timeoutId);
     this.timeoutRunning = false;
diff --git a/client/app/src/shared/partials/operation/operation.component.ts b/client/app/src/shared/partials/operation/operation.component.ts
index d9ac9bd060..95f6b7ab38 100644
--- a/client/app/src/shared/partials/operation/operation.component.ts
+++ b/client/app/src/shared/partials/operation/operation.component.ts
@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { TranslatorPipe } from '@app/shared/pipes/translate';
 
 @Component({
-  selector: 'src-operation',
-  templateUrl: './operation.component.html',
+    selector: 'src-operation',
+    templateUrl: './operation.component.html',
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe],
 })
 export class OperationComponent {
 
diff --git a/client/app/src/shared/partials/password-change/password-change.component.html b/client/app/src/shared/partials/password-change/password-change.component.html
index f3698819e8..79424bc69c 100644
--- a/client/app/src/shared/partials/password-change/password-change.component.html
+++ b/client/app/src/shared/partials/password-change/password-change.component.html
@@ -1,36 +1,46 @@
 <form #passwordChangeForm="ngForm">
-    <input class="d-none" type="password" />
-    <div class="form-group" *ngIf='!preferencesService.dataModel.password_change_needed'>
-        <label>
-            <span>{{'Current password'|translate}}</span>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-        </label>
-        <input class="form-control" #current="ngModel" name="changePasswordArgs.current" id="current" [(ngModel)]="changePasswordArgs.current" type="password" autocomplete="off" [ngClass]="{'is-invalid': changePasswordArgs.password && current.errors?.['required']}" required />
-    </div>
+  <input class="d-none" type="password" />
+  @if (!preferencesService.dataModel.password_change_needed) {
     <div class="form-group">
-        <label>
-            <span>{{'New password'|translate}}</span>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
-        </label>
+      <label>
+        <span>{{'Current password'|translate}}</span>
+        <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+      </label>
+      <input class="form-control" #current="ngModel" name="changePasswordArgs.current" id="current" [(ngModel)]="changePasswordArgs.current" type="password" autocomplete="off" [ngClass]="{'is-invalid': changePasswordArgs.password && current.errors?.['required']}" required />
+    </div>
+  }
+  <div class="form-group">
+    <label>
+      <span>{{'New password'|translate}}</span>
+      <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
+    </label>
         <input class="form-control" #password="ngModel" name="changePasswordArgs.password" id="password" (passwordStrengthChange)="onPasswordStrengthChange($event)" [(ngModel)]="changePasswordArgs.password" type="password" autocomplete="off" [ngClass]="{'is-invalid': changePasswordArgs.password && passwordStrengthScore
 			<2}" passwordStrengthValidator required />
-        <src-password-meter *ngIf="passwordStrengthScore>0" [passwordStrengthScore]='passwordStrengthScore'></src-password-meter>
-        <div class="text-danger" *ngIf="passwordStrengthScore && passwordStrengthScore < 2">
+        @if (passwordStrengthScore>0) {
+<src-password-meter [passwordStrengthScore]='passwordStrengthScore'></src-password-meter>
+}
+        @if (passwordStrengthScore && passwordStrengthScore < 2) {
+<div class="text-danger">
             <p>{{'The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.'|translate}}</p>
         </div>
-        <div class="text-danger" *ngIf="changePasswordArgs.password && changePasswordArgs.password === changePasswordArgs.current">
+}
+        @if (changePasswordArgs.password && changePasswordArgs.password === changePasswordArgs.current) {
+<div class="text-danger">
             <p>{{'The new password must be different from the current one.'|translate}}</p>
         </div>
+}
     </div>
     <div class="form-group">
         <label>
             <span>{{'Type your new password again'|translate}}</span>
-            <span class="text-danger" title="{{'This field is mandatory' | translate}}">*</span>
+            <span class="text-danger" data-toggle="tooltip" title="{{'This field is mandatory' | translate}}">*</span>
         </label>
         <input class="form-control" #confirm="ngModel" name="changePasswordArgs.confirm" [(ngModel)]="changePasswordArgs.confirm" type="password" autocomplete="off" [ngClass]="{'is-invalid': changePasswordArgs.password && !password.errors && (confirm.errors?.['required'] || changePasswordArgs.password !== changePasswordArgs.confirm)}" required />
-        <p class="text-danger" *ngIf="changePasswordArgs.password && changePasswordArgs.confirm.length>0 && passwordStrengthScore>=2 && (changePasswordArgs.password !== changePasswordArgs.confirm)">
+        @if (changePasswordArgs.password && changePasswordArgs.confirm.length>0 && passwordStrengthScore>=2 && (changePasswordArgs.password !== changePasswordArgs.confirm)) {
+<p class="text-danger">
             <span>{{'The two passwords do not match'|translate}}</span>
         </p>
+}
     </div>
     <br />
     <button type="submit" name="submit" class="btn btn-primary" [disabled]="password.errors?.['required'] || passwordChangeForm.invalid || passwordChangeForm.pristine || changePasswordArgs.password !== changePasswordArgs.confirm || (changePasswordArgs.password && changePasswordArgs.password === changePasswordArgs.current)" (click)="changePassword()">
@@ -38,6 +48,8 @@
         <span>{{'Save'|translate}}</span>
     </button>
 </form>
-<div class="mt-2 alert alert-danger" *ngIf="appDataService.errorCodes.code === 11">
+@if (appDataService.errorCodes.code === 11) {
+<div class="mt-2 alert alert-danger">
     <span>{{'The new password must be different from the current one.'|translate}}</span>
-</div>
\ No newline at end of file
+</div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/password-change/password-change.component.ts b/client/app/src/shared/partials/password-change/password-change.component.ts
index 639a5f0e6f..2d23224299 100644
--- a/client/app/src/shared/partials/password-change/password-change.component.ts
+++ b/client/app/src/shared/partials/password-change/password-change.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {UtilsService} from "@app/shared/services/utils.service";
@@ -6,12 +6,29 @@ import {AppDataService} from "@app/app-data.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {Router} from "@angular/router";
 import {ErrorCodes} from "@app/models/app/error-code";
+import { FormsModule } from "@angular/forms";
+import { NgClass } from "@angular/common";
+import { PasswordStrengthValidatorDirective } from "../../directive/password-strength-validator.directive";
+import { PasswordMeterComponent } from "../../components/password-meter/password-meter.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-password-change",
-  templateUrl: "./password-change.component.html"
+    selector: "src-password-change",
+    templateUrl: "./password-change.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, PasswordStrengthValidatorDirective, PasswordMeterComponent, TranslateModule, TranslatorPipe]
 })
 export class PasswordChangeComponent implements OnInit {
+  rootDataService = inject(AppDataService);
+  private authenticationService = inject(AuthenticationService);
+  private router = inject(Router);
+  httpService = inject(HttpService);
+  appDataService = inject(AppDataService);
+  authentication = inject(AuthenticationService);
+  preferencesService = inject(PreferenceResolver);
+  utilsService = inject(UtilsService);
+
   passwordStrengthScore: number = 0;
 
   changePasswordArgs = {
@@ -49,8 +66,4 @@ export class PasswordChangeComponent implements OnInit {
     this.passwordStrengthScore = score;
   }
 
-  public constructor(public rootDataService: AppDataService, private authenticationService: AuthenticationService, private router: Router, public httpService: HttpService, public appDataService: AppDataService, public authentication: AuthenticationService, public preferencesService: PreferenceResolver, public utilsService: UtilsService) {
-
-  }
-
 }
diff --git a/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.html b/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.html
index 3cbbb57fb7..d3329242dc 100644
--- a/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.html
+++ b/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.html
@@ -1,121 +1,169 @@
-<form name="preferenceResolver.dataModel.orm" #preferenceForm="ngForm" class="reveal" *ngIf="authenticationService.session" id="PreferencesForm">
-    <div *ngIf="preferenceResolver.dataModel.picture" class="image-thumbnail">
+@if (authenticationService.session) {
+  <form name="preferenceResolver.dataModel.orm" #preferenceForm="ngForm" class="reveal" id="PreferencesForm">
+    @if (preferenceResolver.dataModel.picture) {
+      <div class="image-thumbnail">
         <img class="receiver-image" alt="user picture" src="/s/{{preferenceResolver.dataModel.id}}" />
         <br />
-    </div>
+      </div>
+    }
     <div id="Username">
+      <label>
+        <span>{{'Username'|translate}}</span>: </label> {{preferenceResolver.dataModel.username}}
+      </div>
+      <div id="Role">
         <label>
-            <span>{{'Username'|translate}}</span>: </label> {{preferenceResolver.dataModel.username}}
-    </div>
-    <div id="Role">
-        <label>
-            <span>{{'Role'|translate}}</span>: </label>
-        <span>{{role}}</span>
-    </div>
-    <div id="Name">
-        <label>
-            <span>{{'Name'|translate}}</span>: </label>
-        <span *ngIf="!editingName">
-            <span>{{preferenceResolver.dataModel.name}}</span>
-            <button class="btn btn-sm btn-outline-secondary" *ngIf="!editingName" (click)="toggleNameEditing(); $event.stopPropagation();">
-                <span>{{'Edit'|translate}}</span>
-            </button>
-        </span>
-        <input *ngIf="editingName" class="form-control" name="name" [(ngModel)]="preferenceResolver.dataModel.name" type="text" required />
-    </div>
-    <div id="PublicName">
-        <label>
-            <span>{{'Public name'|translate}}</span>: </label>
-        <span *ngIf="!editingPublicName">
-            <span>{{preferenceResolver.dataModel.public_name}}</span>
-            <button class="btn btn-sm btn-outline-secondary" *ngIf="!editingPublicName" (click)="togglePublicNameEditing(); $event.stopPropagation();">
-                <span>{{'Edit'|translate}}</span>
-            </button>
-        </span>
-        <input *ngIf="editingPublicName" class="form-control" name="public_name" [(ngModel)]="preferenceResolver.dataModel.public_name" type="text" required />
-    </div>
-    <div id="EmailAddress">
-        <label>
-            <span>{{'Email address'|translate}}</span>: </label>
-        <div>
-            <span *ngIf="!editingEmailAddress">{{preferenceResolver.dataModel.mail_address}}</span>
-            <button class="btn btn-sm btn-outline-secondary" *ngIf="!editingEmailAddress" (click)="toggleEmailAddressEditing(); $event.stopPropagation();">
-                <span>{{'Edit'|translate}}</span>
-            </button>
+          <span>{{'Role'|translate}}</span>: </label>
+          <span>{{role}}</span>
         </div>
-    </div>
-    <div *ngIf="editingEmailAddress">
-        <input class="form-control" name="mail_address" [(ngModel)]="preferenceResolver.dataModel.mail_address" [pattern]="Constants.emailRegexp" type="email" [ngClass]="{'is-invalid': preferenceForm.form.get('mail_address')?.errors?.['pattern']}"/>
-    </div>
-    <div *ngIf="!editingEmailAddress && preferenceResolver.dataModel.change_email_address" class="alert alert-secondary mt-2">
-        <div>{{'Validation of email address change in progress.'|translate}}</div>
-        <div>{{'Please check your inbox for further instructions.'|translate}}</div>
-    </div>
-    <div *ngIf="preferenceResolver.dataModel.description">
-        <label>{{'Description'|translate}}</label> {{preferenceResolver.dataModel.description}}
-    </div>
-    <div id="Contexts" *ngIf="authenticationService.session.role === 'receiver' && appDataService.public.contexts.length > 1">
-        <label>
-            <span>{{'Channels'|translate}}</span>
-        </label>
-        <ul *ngFor="let context_id of preferenceResolver.dataModel.contexts">
-            <li>{{appDataService.contexts_by_id[context_id].name}}</li>
-        </ul>
-    </div>
-    <div id="Language" class="form-group" *ngIf="appDataService.languages_enabled_selector.length > 1">
-        <label>{{'Language'|translate}}</label>
-        <select class="form-select-custom" name="languageModel" [(ngModel)]="languageModel" (ngModelChange)="onlanguagechange()">
-            <option *ngFor="let item of appDataService.languages_enabled_selector" [value]="item.code">{{ item.native }}</option>
-        </select>
-    </div>
-    <div id="EnableNotifications" class="form-group" *ngIf="(authenticationService.session.role === 'admin' && !appDataService.public.node.disable_admin_notification) || (authenticationService.session.role === 'receiver' && !appDataService.public.node.disable_receiver_notification) || (authenticationService.session.role === 'custodian' && !appDataService.public.node.disable_custodian_notification)">
-        <input class="form-check-input" name="notification" [(ngModel)]="preferenceResolver.dataModel.notification" type="checkbox">
-        <label>{{'Enable email notifications'|translate}}</label>
-    </div>
-    <div class="form-group">
-        <label>
-            <input class="form-check-input" name="two_factor" type="checkbox" [checked]="preferenceResolver.dataModel.two_factor" (click)="toggle2FA($event)" />
-            <span>{{'Enable two factor authentication'|translate}}</span>
-        </label>
-    </div>
-    <div id="EditPGP" ngForm #pgpkeyForm="ngForm" *ngIf="appDataService.public.node.pgp">
-        <div *ngIf="preferenceResolver.dataModel.pgp_key_fingerprint">
-            <div class="form-group">
-                <label>{{'Details of the PGP key:'|translate}}</label>
+        <div id="Name">
+          <label>
+            <span>{{'Name'|translate}}</span>: </label>
+            @if (!editingName) {
+              <span>
+                <span>{{preferenceResolver.dataModel.name}}</span>
+                @if (!editingName) {
+                  <button class="btn btn-sm btn-outline-secondary" (click)="toggleNameEditing(); $event.stopPropagation();">
+                    <span>{{'Edit'|translate}}</span>
+                  </button>
+                }
+              </span>
+            }
+            @if (editingName) {
+              <input class="form-control" name="name" [(ngModel)]="preferenceResolver.dataModel.name" type="text" required />
+            }
+          </div>
+          <div id="PublicName">
+            <label>
+              <span>{{'Public name'|translate}}</span>: </label>
+              @if (!editingPublicName) {
+                <span>
+                  <span>{{preferenceResolver.dataModel.public_name}}</span>
+                  @if (!editingPublicName) {
+                    <button class="btn btn-sm btn-outline-secondary" (click)="togglePublicNameEditing(); $event.stopPropagation();">
+                      <span>{{'Edit'|translate}}</span>
+                    </button>
+                  }
+                </span>
+              }
+              @if (editingPublicName) {
+                <input class="form-control" name="public_name" [(ngModel)]="preferenceResolver.dataModel.public_name" type="text" required />
+              }
+            </div>
+            <div id="EmailAddress">
+              <label>
+                <span>{{'Email address'|translate}}</span>: </label>
                 <div>
-                    <span>{{'Fingerprint'|translate}}</span>: <span>{{preferenceResolver.dataModel.pgp_key_fingerprint}}</span>
+                  @if (!editingEmailAddress) {
+                    <span>{{preferenceResolver.dataModel.mail_address}}</span>
+                  }
+                  @if (!editingEmailAddress) {
+                    <button class="btn btn-sm btn-outline-secondary" (click)="toggleEmailAddressEditing(); $event.stopPropagation();">
+                      <span>{{'Edit'|translate}}</span>
+                    </button>
+                  }
                 </div>
+              </div>
+              @if (editingEmailAddress) {
                 <div>
-                    <span>{{'Expiration date'|translate}}</span>: {{preferenceResolver.dataModel.pgp_key_expiration | date:"dd/MM/yyyy"}}
+                  <input class="form-control" name="mail_address" [(ngModel)]="preferenceResolver.dataModel.mail_address" [pattern]="Constants.emailRegexp" type="email" [ngClass]="{'is-invalid': preferenceForm.form.get('mail_address')?.errors?.['pattern']}"/>
                 </div>
-            </div>
-            <div class="form-group">
-                <input class="form-check-input" name="pgp" [(ngModel)]="preferenceResolver.dataModel.pgp_key_remove" type="checkbox">
-                <label>{{'Remove'|translate}}</label>
-            </div>
-        </div>
-        <div *ngIf="!preferenceResolver.dataModel.pgp_key_fingerprint">
-            <div class="position-relative">
-                <label>{{'Set up encryption by providing a PGP public key'|translate}}</label>
+              }
+              @if (!editingEmailAddress && preferenceResolver.dataModel.change_email_address) {
+                <div class="alert alert-secondary mt-2">
+                  <div>{{'Validation of email address change in progress.'|translate}}</div>
+                  <div>{{'Please check your inbox for further instructions.'|translate}}</div>
+                </div>
+              }
+              @if (preferenceResolver.dataModel.description) {
                 <div>
-                    <input #uploader id="customFile" type="file" [style.display]="'none'" class="custom-file-input" (change)="loadPublicKeyFile(uploader.files)" />
-                    <label class="btn btn-sm btn-outline-secondary" for="customFile">
-                        <i class="fa-solid fa-upload"></i>
-                        <span>{{ 'Upload' | translate }}</span>
-                    </label>
+                  <label>{{'Description'|translate}}</label> {{preferenceResolver.dataModel.description}}
                 </div>
-            </div>
-        </div>
-        <br />
-        <button type="submit" class="btn btn-primary" (click)="save()" [disabled]="preferenceForm.invalid || pgpkeyForm.invalid">
-            <i class="fa-solid fa-check"></i>
-            <span>{{'Save'|translate}}</span>
-        </button>
-        <button *ngIf="preferenceResolver.dataModel.encryption" class="btn btn-outline-secondary" id="account_recovery_key" (click)="getEncryptionRecoveryKey($event)">{{'Account recovery key'|translate}}</button>
-    </div>
-    <button *ngIf="!appDataService.public.node.pgp" type="submit" class="btn btn-primary" (click)="save()" [disabled]="preferenceForm.invalid">
-        <i class="fa-solid fa-check"></i>
-        <span>{{'Save'|translate}}</span>
-    </button>
-    <button *ngIf="!appDataService.public.node.pgp && preferenceResolver.dataModel.encryption" id="account_recovery_key" class="btn btn-outline-secondary" (click)="getEncryptionRecoveryKey($event)">{{'Account recovery key'|translate}}</button>
-</form>
\ No newline at end of file
+              }
+              @if (authenticationService.session.role === 'receiver' && appDataService.public.contexts.length > 1) {
+                <div id="Contexts">
+                  <label>
+                    <span>{{'Channels'|translate}}</span>
+                  </label>
+                  @for (context_id of preferenceResolver.dataModel.contexts; track context_id) {
+                    <ul>
+                      <li>{{appDataService.contexts_by_id[context_id].name}}</li>
+                    </ul>
+                  }
+                </div>
+              }
+              @if (appDataService.languages_enabled_selector.length > 1) {
+                <div id="Language" class="form-group">
+                  <label>{{'Language'|translate}}</label>
+                  <select class="form-select-custom" name="languageModel" [(ngModel)]="languageModel" (ngModelChange)="onlanguagechange()">
+                    @for (item of appDataService.languages_enabled_selector; track item) {
+                      <option [value]="item.code">{{ item.native }}</option>
+                    }
+                  </select>
+                </div>
+              }
+              @if ((authenticationService.session.role === 'admin' && !appDataService.public.node.disable_admin_notification) || (authenticationService.session.role === 'receiver' && !appDataService.public.node.disable_receiver_notification) || (authenticationService.session.role === 'custodian' && !appDataService.public.node.disable_custodian_notification)) {
+                <div id="EnableNotifications" class="form-group">
+                  <input class="form-check-input" name="notification" [(ngModel)]="preferenceResolver.dataModel.notification" type="checkbox">
+                  <label>{{'Enable email notifications'|translate}}</label>
+                </div>
+              }
+              <div class="form-group">
+                <label>
+                  <input class="form-check-input" name="two_factor" type="checkbox" [checked]="preferenceResolver.dataModel.two_factor" (click)="toggle2FA($event)" />
+                  <span>{{'Enable two factor authentication'|translate}}</span>
+                </label>
+              </div>
+              @if (appDataService.public.node.pgp) {
+                <div id="EditPGP" ngForm #pgpkeyForm="ngForm">
+                  @if (preferenceResolver.dataModel.pgp_key_fingerprint) {
+                    <div>
+                      <div class="form-group">
+                        <label>{{'Details of the PGP key:'|translate}}</label>
+                        <div>
+                          <span>{{'Fingerprint'|translate}}</span>: <span>{{preferenceResolver.dataModel.pgp_key_fingerprint}}</span>
+                        </div>
+                        <div>
+                          <span>{{'Expiration date'|translate}}</span>: {{preferenceResolver.dataModel.pgp_key_expiration | date:"dd/MM/yyyy"}}
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <input class="form-check-input" name="pgp" [(ngModel)]="preferenceResolver.dataModel.pgp_key_remove" type="checkbox">
+                        <label>{{'Remove'|translate}}</label>
+                      </div>
+                    </div>
+                  }
+                  @if (!preferenceResolver.dataModel.pgp_key_fingerprint) {
+                    <div>
+                      <div class="position-relative">
+                        <label>{{'Set up encryption by providing a PGP public key'|translate}}</label>
+                        <div>
+                          <input #uploader id="customFile" type="file" [style.display]="'none'" class="custom-file-input" (change)="loadPublicKeyFile(uploader.files)" />
+                          <label class="btn btn-sm btn-outline-secondary" for="customFile">
+                            <i class="fa-solid fa-upload"></i>
+                            <span>{{ 'Upload' | translate }}</span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                  <br />
+                  <button type="submit" class="btn btn-primary" (click)="save()" [disabled]="preferenceForm.invalid || pgpkeyForm.invalid">
+                    <i class="fa-solid fa-check"></i>
+                    <span>{{'Save'|translate}}</span>
+                  </button>
+                  @if (preferenceResolver.dataModel.encryption) {
+                    <button class="btn btn-outline-secondary" id="account_recovery_key" (click)="getEncryptionRecoveryKey($event)">{{'Account recovery key'|translate}}</button>
+                  }
+                </div>
+              }
+              @if (!appDataService.public.node.pgp) {
+                <button type="submit" class="btn btn-primary" (click)="save()" [disabled]="preferenceForm.invalid">
+                  <i class="fa-solid fa-check"></i>
+                  <span>{{'Save'|translate}}</span>
+                </button>
+              }
+              @if (!appDataService.public.node.pgp && preferenceResolver.dataModel.encryption) {
+                <button id="account_recovery_key" class="btn btn-outline-secondary" (click)="getEncryptionRecoveryKey($event)">{{'Account recovery key'|translate}}</button>
+              }
+            </form>
+          }
\ No newline at end of file
diff --git a/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.ts b/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.ts
index 1a0565bce9..813776d55b 100644
--- a/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.ts
+++ b/client/app/src/shared/partials/preference-tabs/preference-tab1/preference-tab1.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, inject } from "@angular/core";
 import {AppConfigService} from "@app/services/root/app-config.service";
 import {Constants} from "@app/shared/constants/constants";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
@@ -13,17 +13,34 @@ import {
   EncryptionRecoveryKeyComponent
 } from "@app/shared/modals/encryption-recovery-key/encryption-recovery-key.component";
 import {TranslationService} from "@app/services/helper/translation.service";
-import {TranslateService} from "@ngx-translate/core";
+import { TranslateService, TranslateModule } from "@ngx-translate/core";
 import {ConfirmationWith2faComponent} from "@app/shared/modals/confirmation-with2fa/confirmation-with2fa.component";
 import {
   ConfirmationWithPasswordComponent
 } from "@app/shared/modals/confirmation-with-password/confirmation-with-password.component";
+import { NgClass, DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-preference-tab1",
-  templateUrl: "./preference-tab1.component.html"
+    selector: "src-preference-tab1",
+    templateUrl: "./preference-tab1.component.html",
+    standalone: true,
+    imports: [FormsModule, NgClass, DatePipe, TranslateModule, TranslatorPipe]
 })
 export class PreferenceTab1Component implements OnInit {
+  private translationService = inject(TranslationService);
+  protected appConfigService = inject(AppConfigService);
+  private cdr = inject(ChangeDetectorRef);
+  private translateService = inject(TranslateService);
+  private httpService = inject(HttpService);
+  private twoFactorAuthData = inject(TwoFactorAuthData);
+  private modalService = inject(NgbModal);
+  appDataService = inject(AppDataService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  private utilsService = inject(UtilsService);
+  protected authenticationService = inject(AuthenticationService);
+
 
   protected readonly Constants = Constants;
 
@@ -34,13 +51,13 @@ export class PreferenceTab1Component implements OnInit {
   role = "";
   @ViewChild('uploader') uploaderInput: ElementRef<HTMLInputElement>;
 
-  constructor(private translationService: TranslationService, protected appConfigService: AppConfigService, private cdr: ChangeDetectorRef, private translateService: TranslateService, private httpService: HttpService, private twoFactorAuthData: TwoFactorAuthData, private modalService: NgbModal, public appDataService: AppDataService, protected preferenceResolver: PreferenceResolver, private utilsService: UtilsService, protected authenticationService: AuthenticationService) {
+  constructor() {
     this.languageModel = this.preferenceResolver.dataModel.language;
   }
 
   ngOnInit(): void {
     this.role = this.utilsService.rolel10n(this.authenticationService.session.role);
-    this.role = this.role ? this.translateService.instant(this.role) : '';
+    this.role = this.translateService.instant(this.role);
     setTimeout(() => {
       this.languageModel = this.preferenceResolver.dataModel.language;
     }, 150);
diff --git a/client/app/src/shared/partials/preference-tabs/preference-tab2/preference-tab2.component.ts b/client/app/src/shared/partials/preference-tabs/preference-tab2/preference-tab2.component.ts
index 57e141a812..a679749240 100644
--- a/client/app/src/shared/partials/preference-tabs/preference-tab2/preference-tab2.component.ts
+++ b/client/app/src/shared/partials/preference-tabs/preference-tab2/preference-tab2.component.ts
@@ -1,8 +1,11 @@
 import {Component} from "@angular/core";
+import { PasswordChangeComponent } from "../../password-change/password-change.component";
 
 @Component({
-  selector: "src-preference-tab2",
-  templateUrl: "./preference-tab2.component.html"
+    selector: "src-preference-tab2",
+    templateUrl: "./preference-tab2.component.html",
+    standalone: true,
+    imports: [PasswordChangeComponent]
 })
 export class PreferenceTab2Component {
 
diff --git a/client/app/src/shared/partials/preferences/preferences.component.html b/client/app/src/shared/partials/preferences/preferences.component.html
index be08d192b0..74f686b250 100644
--- a/client/app/src/shared/partials/preferences/preferences.component.html
+++ b/client/app/src/shared/partials/preferences/preferences.component.html
@@ -1,19 +1,21 @@
 <div class="reveal">
-    <ul ngbNav class="nav-tabs">
-        <li ngbNavItem>
-            <a ngbNavLink (click)="activeTab = 'tab1'">{{ 'Preferences' | translate }}</a>
-        </li>
-        <li ngbNavItem>
-            <a ngbNavLink class="password" (click)="activeTab = 'tab2'">{{ 'Password' | translate }}</a>
-        </li>
-    </ul>
-    <br>
-    <div [ngSwitch]="activeTab">
-        <ng-template ngSwitchCase="tab1">
-            <src-preference-tab1></src-preference-tab1>
-        </ng-template>
-        <ng-template ngSwitchCase="tab2">
-            <src-preference-tab2></src-preference-tab2>
-        </ng-template>
+  <ul ngbNav class="nav-tabs">
+    <li ngbNavItem>
+      <a ngbNavLink (click)="activeTab = 'tab1'">{{ 'Preferences' | translate }}</a>
+    </li>
+    <li ngbNavItem>
+      <a ngbNavLink class="password" (click)="activeTab = 'tab2'">{{ 'Password' | translate }}</a>
+    </li>
+  </ul>
+  <br>
+    <div>
+      @switch (activeTab) {
+        @case ('tab1') {
+          <src-preference-tab1></src-preference-tab1>
+        }
+        @case ('tab2') {
+          <src-preference-tab2></src-preference-tab2>
+        }
+      }
     </div>
-</div>
+  </div>
diff --git a/client/app/src/shared/partials/preferences/preferences.component.ts b/client/app/src/shared/partials/preferences/preferences.component.ts
index 4c77db7f9d..129cc693bf 100644
--- a/client/app/src/shared/partials/preferences/preferences.component.ts
+++ b/client/app/src/shared/partials/preferences/preferences.component.ts
@@ -1,10 +1,18 @@
 import {Component} from "@angular/core";
 import {PreferenceTab1Component} from "@app/shared/partials/preference-tabs/preference-tab1/preference-tab1.component";
 import {PreferenceTab2Component} from "@app/shared/partials/preference-tabs/preference-tab2/preference-tab2.component";
+import { NgbNav, NgbNavItem, NgbNavLink } from "@ng-bootstrap/ng-bootstrap";
+
+import { PreferenceTab1Component as PreferenceTab1Component_1 } from "../preference-tabs/preference-tab1/preference-tab1.component";
+import { PreferenceTab2Component as PreferenceTab2Component_1 } from "../preference-tabs/preference-tab2/preference-tab2.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-preferences",
-  templateUrl: "./preferences.component.html"
+    selector: "src-preferences",
+    templateUrl: "./preferences.component.html",
+    standalone: true,
+    imports: [NgbNav, NgbNavItem, NgbNavLink, PreferenceTab1Component_1, PreferenceTab2Component_1, TranslateModule, TranslatorPipe]
 })
 export class PreferencesComponent {
   activeTab: string = "tab1";
diff --git a/client/app/src/shared/partials/privacybadge/privacy-badge.component.html b/client/app/src/shared/partials/privacybadge/privacy-badge.component.html
index c16dab54e3..f81891cbdf 100644
--- a/client/app/src/shared/partials/privacybadge/privacy-badge.component.html
+++ b/client/app/src/shared/partials/privacybadge/privacy-badge.component.html
@@ -1,40 +1,48 @@
-<div *ngIf="!appDataService.connection.tor">
+@if (!appDataService.connection.tor) {
+  <div>
     <div id="PrivacyBadge">
-        <div *ngIf="!appDataService.public.node.enable_custom_privacy_badge">
-            <div id="PrivacyBadgeTextBox">
-                <span class="badge badge-warning-custom text-bg-warning">
-                    <i class="fa-solid fa-exclamation-circle"></i>
-                    <span>
-                        {{'Warning'|translate}}
-                    </span>
+      @if (!appDataService.public.node.enable_custom_privacy_badge) {
+        <div>
+          <div id="PrivacyBadgeTextBox">
+            <span class="badge badge-warning-custom text-bg-warning">
+              <i class="fa-solid fa-exclamation-circle"></i>
+              <span>
+                {{'Warning'|translate}}
+              </span>
+            </span>
+            <div>
+              <div id="PrivacyBadgeText">
+                {{'You are strongly advised to visit this site using the app called Tor Browser, that protects your identity.'|translate}}
+              </div>
+            </div>
+            <div>
+              <a class="btn btn-sm btn-secondary" href="https://www.torproject.org/download/" rel="noreferrer" target="_blank">
+                <i class="fa-solid fa-download"></i>
+                <span>
+                  {{'Download the Tor Browser'|translate}}
                 </span>
-                <div>
-                    <div id="PrivacyBadgeText">
-                        {{'You are strongly advised to visit this site using the app called Tor Browser, that protects your identity.'|translate}}
-                    </div>
-                </div>
-                <div>
-                    <a class="btn btn-sm btn-secondary" href="https://www.torproject.org/download/" rel="noreferrer" target="_blank">
-                        <i class="fa-solid fa-download"></i>
-                        <span>
-                            {{'Download the Tor Browser'|translate}}
-                        </span>
-                    </a>
-                </div>
-                <div *ngIf="appDataService.public.node.onionservice">
-                    <span>
-                        {{'Then, copy and paste the following address into the Tor Browser:'|translate}}
-                    </span>
-                    <span (click)="utilsService.copyToClipboard(appDataService.public.node.onionservice); utilsService.stopPropagation($event)" class="onion-address" title="{{'Copy to clipboard' | translate}}">
-                        {{appDataService.public.node.onionservice}}
-                    </span>
-                </div>
+              </a>
             </div>
+            @if (appDataService.public.node.onionservice) {
+              <div>
+                <span>
+                  {{'Then, copy and paste the following address into the Tor Browser:'|translate}}
+                </span>
+                <span (click)="utilsService.copyToClipboard(appDataService.public.node.onionservice); utilsService.stopPropagation($event)" class="onion-address" data-toggle="tooltip" title="{{'Copy to clipboard' | translate}}">
+                  {{appDataService.public.node.onionservice}}
+                </span>
+              </div>
+            }
+          </div>
         </div>
-        <div *ngIf="appDataService.public.node.enable_custom_privacy_badge">
-            <div id="PrivacyBoxTextBox">
-                <markdown id="PrivacyBadgeCustomText" [data]="markdown | stripHtml" class="variable-binding"></markdown>
-            </div>
+      }
+      @if (appDataService.public.node.enable_custom_privacy_badge) {
+        <div>
+          <div id="PrivacyBoxTextBox">
+            <markdown id="PrivacyBadgeCustomText" [data]="markdown | stripHtml" class="variable-binding"></markdown>
+          </div>
         </div>
+      }
     </div>
-</div>
+  </div>
+}
diff --git a/client/app/src/shared/partials/privacybadge/privacy-badge.component.ts b/client/app/src/shared/partials/privacybadge/privacy-badge.component.ts
index 2ee4ee522d..c0e22936fb 100644
--- a/client/app/src/shared/partials/privacybadge/privacy-badge.component.ts
+++ b/client/app/src/shared/partials/privacybadge/privacy-badge.component.ts
@@ -1,15 +1,27 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 
+import { MarkdownComponent } from "ngx-markdown";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { StripHtmlPipe } from "@app/shared/pipes/strip-html.pipe";
+
 @Component({
-  selector: "src-privacybadge",
-  templateUrl: "./privacy-badge.component.html"
+    selector: "src-privacybadge",
+    templateUrl: "./privacy-badge.component.html",
+    standalone: true,
+    imports: [MarkdownComponent, TranslateModule, TranslatorPipe, StripHtmlPipe]
 })
 export class PrivacyBadgeComponent {
+  protected appDataService = inject(AppDataService);
+  protected utilsService = inject(UtilsService);
+
   public markdown: string;
 
-  constructor(protected appDataService: AppDataService, protected utilsService: UtilsService) {
+  constructor() {
+    const appDataService = this.appDataService;
+
     this.markdown = appDataService.public.node.custom_privacy_badge_text;
   }
 
diff --git a/client/app/src/shared/partials/receipt/receipt.component.html b/client/app/src/shared/partials/receipt/receipt.component.html
index a58448a116..3b3c01f0d2 100644
--- a/client/app/src/shared/partials/receipt/receipt.component.html
+++ b/client/app/src/shared/partials/receipt/receipt.component.html
@@ -1,23 +1,25 @@
 <form id="WhistleblowerLoginForm" autocomplete="off" novalidate>
-    <div>
-        <label id="WhistleblowerLoginQuestion" for="receipt-input">
-            {{'Have you already filed a report? Enter your receipt.'|translate}}
-        </label>
-    </div>
-    <div class="d-flex justify-content-start">
-        <div class="form-group d-block mx-auto">
-            <div class="input-group">
-                <input class="d-none" type="password" name="disable-autocomplete" />
-                <input [autocomplete]="'off'" #receiptinput="ngModel" [(ngModel)]="formattedReceipt" id="receipt-input" class="form-control text-center rounded-start" type="text" autocomplete="receipt" name="receipt" maxlength="19" size="19" customReceiptValidator>
-                <button [disabled]="formattedReceipt.length < 16 || authenticationService.loginInProgress || !receiptinput.errors?.['receiptvalidator']" (click)="viewReport()" id="ReceiptButton" class="btn btn-primary" type="submit">
-                    <span>
-                        {{'Log in'|translate}}
-                    </span>
-                </button>
-            </div>
-        </div>
+  <div>
+    <label id="WhistleblowerLoginQuestion" for="receipt-input">
+      {{'Have you already filed a report? Enter your receipt.'|translate}}
+    </label>
+  </div>
+  <div class="d-flex justify-content-start">
+    <div class="form-group d-block mx-auto">
+      <div class="input-group">
+        <input class="d-none" type="password" name="disable-autocomplete" />
+        <input [autocomplete]="'off'" #receiptinput="ngModel" [(ngModel)]="formattedReceipt" id="receipt-input" class="form-control text-center rounded-start" type="text" autocomplete="receipt" name="receipt" maxlength="19" size="19" customReceiptValidator>
+        <button [disabled]="formattedReceipt.length < 16 || authenticationService.loginInProgress || !receiptinput.errors?.['receiptvalidator']" (click)="viewReport()" id="ReceiptButton" class="btn btn-primary" type="submit">
+          <span>
+            {{'Log in'|translate}}
+          </span>
+        </button>
+      </div>
     </div>
+  </div>
 </form>
-<div *ngIf="appDataService.errorCodes.code === 9" class="login-error-box-homepage text-danger">
+@if (appDataService.errorCodes.code === 9) {
+  <div class="login-error-box-homepage text-danger">
     {{'The receipt is either invalid or the report has expired.'|translate}}
-</div>
\ No newline at end of file
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/receipt/receipt.component.ts b/client/app/src/shared/partials/receipt/receipt.component.ts
index 08de8bb084..36d998c904 100644
--- a/client/app/src/shared/partials/receipt/receipt.component.ts
+++ b/client/app/src/shared/partials/receipt/receipt.component.ts
@@ -1,17 +1,25 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {AppDataService} from "@app/app-data.service";
 import {UtilsService} from "@app/shared/services/utils.service";
+import { FormsModule } from "@angular/forms";
+import { ReceiptValidatorDirective } from "../../directive/receipt-validator.directive";
+
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-receipt",
-  templateUrl: "./receipt.component.html"
+    selector: "src-receipt",
+    templateUrl: "./receipt.component.html",
+    standalone: true,
+    imports: [FormsModule, ReceiptValidatorDirective, TranslateModule, TranslatorPipe]
 })
 export class ReceiptComponent{
-  formattedReceipt = "";
+  protected utilsService = inject(UtilsService);
+  protected authenticationService = inject(AuthenticationService);
+  protected appDataService = inject(AppDataService);
 
-  constructor(protected utilsService: UtilsService, protected authenticationService: AuthenticationService, protected appDataService: AppDataService) {
-  }
+  formattedReceipt = "";
 
   viewReport() {
     this.authenticationService.login(0, 'whistleblower', this.formattedReceipt);
diff --git a/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.html b/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.html
index 32ab2ca8ca..b1afcf0040 100644
--- a/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.html
+++ b/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.html
@@ -1,40 +1,50 @@
 <div>
-    <ng-container #flow="flow" [flowConfig]="flowConfig"></ng-container>
-    <div class="drag-drop" flowDrop [flow]="flow.flowJs">
-        <div class="custom-file">
-            <input [attr.id]="'customFile-' + fileInput" id="customFile-{{fileInput}}" type="file" flowButton [flow]="flow.flowJs" [style.display]="'none'" class="custom-file-input" [required]="field && field.required" />
-            <label [attr.for]="'customFile-' + fileInput" for="customFile-{{fileInput}}" class="btn btn-sm btn-outline-secondary">
-                <i class="fa-solid fa-upload"></i>
-                <span> {{'Upload'|translate}}</span>
-            </label>
-            <span class="mx-2">{{'Select a file or drag it here.'|translate}}</span>
-        </div>
-        <div *ngIf="showError">
-            <br>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <div *ngIf="errorFile">
-                    <span>{{'File size not accepted.' | translate}}</span> {{errorFile.flowFile.name}} {{'Maximum file size is:' | translate}} {{appDataService.public.node.maximum_filesize}} MB
-                </div>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismissError();errorFile.flowFile.cancel(); showError=false"></button>
-            </div>
+  <ng-container #flow="flow" [flowConfig]="flowConfig"></ng-container>
+  <div class="drag-drop" flowDrop [flow]="flow.flowJs">
+    <div class="custom-file">
+      <input [attr.id]="'customFile-' + fileInput" id="customFile-{{fileInput}}" type="file" flowButton [flow]="flow.flowJs" [style.display]="'none'" class="custom-file-input" [required]="field && field.required" />
+      <label [attr.for]="'customFile-' + fileInput" for="customFile-{{fileInput}}" class="btn btn-sm btn-outline-secondary">
+        <i class="fa-solid fa-upload"></i>
+        <span> {{'Upload'|translate}}</span>
+      </label>
+      <span class="mx-2">{{'Select a file or drag it here.'|translate}}</span>
+    </div>
+    @if (showError) {
+      <div>
+        <br>
+          <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            @if (errorFile) {
+              <div>
+                <span>{{'File size not accepted.' | translate}}</span> {{errorFile.flowFile.name}} {{'Maximum file size is:' | translate}} {{appDataService.public.node.maximum_filesize}} MB
+              </div>
+            }
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismissError();errorFile.flowFile.cancel(); showError=false"></button>
+          </div>
         </div>
+      }
     </div>
     <div class="transfers">
-        <div data-flow-name="flow" class="row">
-            <div [ngClass]="{'col-md-12': (flow.transfers$ | async)?.transfers?.length === 1, 'col-md-6 col-sm-12': (flow.transfers$ | async)?.transfers?.length !== 1}" *ngFor="let transfer of (flow.transfers$ | async)?.transfers">
-                <div class="fileUploadBox mt-2 mb-2">
-                    <div *ngIf="appDataService.public.node.maximum_filesize >= (transfer.size/1000000)">
-                        <src-rfile-upload-status [formUploader]="formUploader" [file]="transfer"></src-rfile-upload-status>
-                    </div>
+      <div data-flow-name="flow" class="row">
+        @for (transfer of (flow.transfers$ | async)?.transfers; track transfer) {
+          <div [ngClass]="{'col-md-12': (flow.transfers$ | async)?.transfers?.length === 1, 'col-md-6 col-sm-12': (flow.transfers$ | async)?.transfers?.length !== 1}">
+            <div class="fileUploadBox mt-2 mb-2">
+              @if (appDataService.public.node.maximum_filesize >= (transfer.size/1000000)) {
+                <div>
+                  <src-rfile-upload-status [formUploader]="formUploader" [file]="transfer"></src-rfile-upload-status>
                 </div>
+              }
             </div>
-        </div>
+          </div>
+        }
+      </div>
     </div>
-    <ng-container *ngIf="confirmButton && !formUploader">
-        <button id="files-action-confirm" class="btn btn-sm btn-outline-secondary" (click)="onConfirmClick()">
-            <i class="fa-solid fa-upload"></i>
-            <span>{{'Confirm'|translate}}</span>
-        </button>
-    </ng-container>
-    <src-rfiles-upload-status *ngIf="!formUploader && (flow.transfers$ | async)?.flow?.files" [estimatedTime]="(flow.transfers$ | async)?.flow?.timeRemaining()" [progress]="(flow.transfers$ | async)?.totalProgress" [uploading]="(flow.transfers$ | async)?.flow?.isUploading()"></src-rfiles-upload-status>
-</div>
\ No newline at end of file
+    @if (confirmButton && !formUploader) {
+      <button id="files-action-confirm" class="btn btn-sm btn-outline-secondary" (click)="onConfirmClick()">
+        <i class="fa-solid fa-upload"></i>
+        <span>{{'Confirm'|translate}}</span>
+      </button>
+    }
+    @if (!formUploader && (flow.transfers$ | async)?.flow?.files) {
+      <src-rfiles-upload-status [estimatedTime]="(flow.transfers$ | async)?.flow?.timeRemaining()" [progress]="(flow.transfers$ | async)?.totalProgress" [uploading]="(flow.transfers$ | async)?.flow?.isUploading()"></src-rfiles-upload-status>
+    }
+  </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.ts b/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.ts
index 2377e441b9..d5aa2ada17 100644
--- a/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.ts
+++ b/client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.ts
@@ -1,14 +1,5 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input, OnDestroy,
-  OnInit,
-  Output,
-  ViewChild
-} from "@angular/core";
-import {FlowDirective, Transfer} from "@flowjs/ngx-flow";
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, inject } from "@angular/core";
+import { FlowDirective, Transfer, NgxFlowModule } from "@flowjs/ngx-flow";
 import {AppDataService} from "@app/app-data.service";
 import {ControlContainer, NgForm} from "@angular/forms";
 import {Subscription} from "rxjs";
@@ -16,13 +7,25 @@ import {FlowOptions} from "@flowjs/flow.js";
 import {Field} from "@app/models/resolvers/field-template-model";
 import { AuthenticationService } from "@app/services/helper/authentication.service";
 import { UtilsService } from "@app/shared/services/utils.service";
+import { NgClass, AsyncPipe } from "@angular/common";
+import { RFileUploadStatusComponent } from "../rfile-upload-status/r-file-upload-status.component";
+import { RFilesUploadStatusComponent } from "../rfiles-upload-status/r-files-upload-status.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-rfile-upload-button",
-  templateUrl: "./r-file-upload-button.component.html",
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
+    selector: "src-rfile-upload-button",
+    templateUrl: "./r-file-upload-button.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: true,
+    imports: [NgxFlowModule, NgClass, RFileUploadStatusComponent, RFilesUploadStatusComponent, AsyncPipe, TranslateModule, TranslatorPipe]
 })
 export class RFileUploadButtonComponent implements AfterViewInit, OnInit, OnDestroy {
+  private cdr = inject(ChangeDetectorRef);
+  private utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+  protected authenticationService = inject(AuthenticationService);
+
 
   @Input() fileUploadUrl: string;
   @Input() formUploader: boolean = true;
@@ -39,9 +42,6 @@ export class RFileUploadButtonComponent implements AfterViewInit, OnInit, OnDest
   confirmButton = false;
   flowConfig: FlowOptions;
 
-  constructor(private cdr: ChangeDetectorRef, private utilsService: UtilsService, protected appDataService: AppDataService,protected authenticationService:AuthenticationService) {
-  }
-
   ngOnInit(): void {
     this.file_id = this.file_id ? this.file_id:"status_page";
     this.flowConfig = this.utilsService.flowDefault.opts;
diff --git a/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.html b/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.html
index 93446994a8..885f9ebc76 100644
--- a/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.html
+++ b/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.html
@@ -1,50 +1,60 @@
 <div class="fileUploadBox mt-2 mb-2">
-    <div class="row">
-        <div class="col-md-4">
-            <div class="file-preview">
-                <div class="file-buttons" *ngIf="!formUploader || (!file.flowFile.isComplete() && !file.flowFile.isUploading())">
-                    <div *ngIf="appDataService.page === 'submissionpage' || !file.complete" class="removeFileButton text-danger">
-                        <div class="btn btn-sm btn-danger" (click)="file.flowFile.cancel()">
-                            <i class="fa-solid fa-times" aria-label="{'Remove' | translate}"></i>
-                        </div>
-                    </div>
+  <div class="row">
+    <div class="col-md-4">
+      <div class="file-preview">
+        @if (!formUploader || (!file.flowFile.isComplete() && !file.flowFile.isUploading())) {
+          <div class="file-buttons">
+            @if (appDataService.page === 'submissionpage' || !file.complete) {
+              <div class="removeFileButton text-danger">
+                <div class="btn btn-sm btn-danger" (click)="file.flowFile.cancel()">
+                  <i class="fa-solid fa-times" aria-label="{'Remove' | translate}"></i>
                 </div>
-                <div class="file-upload">
-                    <div>
-                        <div class="file-upload-icon" *ngIf="file.error">
-                            <i class="fa-solid fa-ban-circle"></i>
-                        </div>
-                        <div class="file-upload-icon" *ngIf="!file.error && !file.complete">
-                            <i class="fa-solid fa-file"></i>
-                        </div>
-                        <div class="file-upload-icon" *ngIf="!file.error && file.complete">
-                            <i class="fa-solid fa-check"></i>
-                        </div>
-                    </div>
-                    <div class="file-upload-progress progress progress-striped" [ngClass]="{'invisible': file.paused || file.progress === 0}">
-                        <ng-container *ngIf="file.progress !== 1">
-                            <div class="progress-bar" role="progressbar" [ngStyle]="{'width': (file.progress * 100) + '%'}"></div>
-                        </ng-container>
-                        <ng-container *ngIf="file.progress === 1">
-                            <div class="progress-bar progress-bar-complete" [attr.data-cy]="'progress-bar-complete'" role="progressbar" [ngStyle]="{'width': (file.progress * 100) + '%'}"></div>
-                        </ng-container>
-                    </div>
-                </div>
-            </div>
+              </div>
+            }
+          </div>
+        }
+        <div class="file-upload">
+          <div>
+            @if (file.error) {
+              <div class="file-upload-icon">
+                <i class="fa-solid fa-ban-circle"></i>
+              </div>
+            }
+            @if (!file.error && !file.complete) {
+              <div class="file-upload-icon">
+                <i class="fa-solid fa-file"></i>
+              </div>
+            }
+            @if (!file.error && file.complete) {
+              <div class="file-upload-icon">
+                <i class="fa-solid fa-check"></i>
+              </div>
+            }
+          </div>
+          <div class="file-upload-progress progress progress-striped" [ngClass]="{'invisible': file.paused || file.progress === 0}">
+            @if (file.progress !== 1) {
+              <div class="progress-bar" role="progressbar" [ngStyle]="{'width': (file.progress * 100) + '%'}"></div>
+            }
+            @if (file.progress === 1) {
+              <div class="progress-bar progress-bar-complete" [attr.data-cy]="'progress-bar-complete'" role="progressbar" [ngStyle]="{'width': (file.progress * 100) + '%'}"></div>
+            }
+          </div>
         </div>
-        <div class="col-md-8">
-            <div class="pl-2 pr-2">
-                <div>
-                    <label class="fileName">{{file.name}}</label>
-                </div>
-                <div>
-                    <label class="fileSize">
-                        <span>{{'Size:'|translate}}</span>
-                        <span>{{file.size | byteFmt:2}}</span>
-                    </label>
-                </div>
-                <br />
-            </div>
+      </div>
+    </div>
+    <div class="col-md-8">
+      <div class="pl-2 pr-2">
+        <div>
+          <label class="fileName">{{file.name}}</label>
+        </div>
+        <div>
+          <label class="fileSize">
+            <span>{{'Size:'|translate}}</span>
+            <span>{{file.size | byteFmt:2}}</span>
+          </label>
         </div>
+        <br />
+      </div>
     </div>
+  </div>
 </div>
diff --git a/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.ts b/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.ts
index 97586a086d..d50240086a 100644
--- a/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.ts
+++ b/client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.ts
@@ -1,16 +1,22 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AppDataService} from "@app/app-data.service";
 import {Transfer} from "@flowjs/ngx-flow";
+import { NgClass, NgStyle } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { ByteFmtPipe } from "@app/shared/pipes/byte-fmt.pipe";
 
 @Component({
-  selector: "src-rfile-upload-status",
-  templateUrl: "./r-file-upload-status.component.html"
+    selector: "src-rfile-upload-status",
+    templateUrl: "./r-file-upload-status.component.html",
+    standalone: true,
+    imports: [NgClass, NgStyle, TranslateModule, TranslatorPipe, ByteFmtPipe]
 })
 export class RFileUploadStatusComponent {
+  protected utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+
   @Input() file: Transfer;
   @Input() formUploader: boolean;
-
-  constructor(protected utilsService: UtilsService, protected appDataService: AppDataService) {
-  }
 }
diff --git a/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.html b/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.html
index 476f120986..660933be77 100644
--- a/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.html
+++ b/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.html
@@ -1,12 +1,22 @@
-<span *ngIf="uploading">{{'Uploading files…'|translate}}</span>
-<span *ngIf="!uploading && progress==100">{{'Upload completed successfully!'|translate}}</span>
+@if (uploading) {
+  <span>{{'Uploading files…'|translate}}</span>
+}
+@if (!uploading && progress==100) {
+  <span>{{'Upload completed successfully!'|translate}}</span>
+}
 <div id="FileUpoloadsInfo">
-    <div *ngIf="estimatedTime && uploading">
-        <span>{{'Estimated upload time:'|translate}}</span>
-        <span *ngIf="isFinite(estimatedTime)">{{estimatedTime}}</span>
-        <span>{{'seconds'|translate}}</span>
-        <div class="progress progress-striped;active" *ngIf="progress">
-           <div class="progress-bar" role="progressbar" [ngStyle]="{width: progress*105 + '%'}"></div>
+  @if (estimatedTime && uploading) {
+    <div>
+      <span>{{'Estimated upload time:'|translate}}</span>
+      @if (isFinite(estimatedTime)) {
+        <span>{{estimatedTime}}</span>
+      }
+      <span>{{'seconds'|translate}}</span>
+      @if (progress) {
+        <div class="progress progress-striped;active">
+          <div class="progress-bar" role="progressbar" [ngStyle]="{width: progress*105 + '%'}"></div>
         </div>
+      }
     </div>
+  }
 </div><br>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.ts b/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.ts
index e7a81e1649..bfae3738a7 100644
--- a/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.ts
+++ b/client/app/src/shared/partials/rfiles-upload-status/r-files-upload-status.component.ts
@@ -1,8 +1,13 @@
 import {Component, Input} from "@angular/core";
+import { NgStyle } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-rfiles-upload-status",
-  templateUrl: "./r-files-upload-status.component.html"
+    selector: "src-rfiles-upload-status",
+    templateUrl: "./r-files-upload-status.component.html",
+    standalone: true,
+    imports: [NgStyle, TranslateModule, TranslatorPipe]
 })
 export class RFilesUploadStatusComponent {
   @Input() uploading: boolean | undefined;
diff --git a/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.html b/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.html
index 45918db956..ecfbc06067 100644
--- a/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.html
+++ b/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.html
@@ -1,14 +1,16 @@
 <div id="TipInfoBox" class="card card.bg-primary" [attr.aria-expanded]="collapsed">
-    <div class="card-header" (click)="toggleColLapse(); utilsService.stopPropagation($event)">
-        <span>{{'Additional questionnaire'|translate}}</span>
-    </div>
-    <div class="card-body d-flex justify-content-between" *ngIf="!collapsed">
-        <div>{{'Recipients have requested you to fill an additional questionnaire.'|translate}}</div>
-        <div class="">
-            <button class="btn btn-primary" id="open_additional_questionnaire" (click)="tipOpenAdditionalQuestionnaire()">
-                <i class="fa-solid fa-check"></i>
-                <span>{{'Fill the additional questionnaire'|translate}}</span>
-            </button>
-        </div>
+  <div class="card-header" (click)="toggleColLapse(); utilsService.stopPropagation($event)">
+    <span>{{'Additional questionnaire'|translate}}</span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body d-flex justify-content-between">
+      <div>{{'Recipients have requested you to fill an additional questionnaire.'|translate}}</div>
+      <div class="">
+        <button class="btn btn-primary" id="open_additional_questionnaire" (click)="tipOpenAdditionalQuestionnaire()">
+          <i class="fa-solid fa-check"></i>
+          <span>{{'Fill the additional questionnaire'|translate}}</span>
+        </button>
+      </div>
     </div>
+  }
 </div>
diff --git a/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.ts b/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.ts
index 528d8f53ab..101272e417 100644
--- a/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.ts
+++ b/client/app/src/shared/partials/tip-additional-questionnaire-invite/tip-additional-questionnaire-invite.component.ts
@@ -1,24 +1,29 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {
   TipAdditionalQuestionnaireFormComponent
 } from "@app/shared/modals/tip-additional-questionnaire-form/tip-additional-questionnaire-form.component";
 
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-tip-additional-questionnaire-invite",
-  templateUrl: "./tip-additional-questionnaire-invite.component.html"
+    selector: "src-tip-additional-questionnaire-invite",
+    templateUrl: "./tip-additional-questionnaire-invite.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class TipAdditionalQuestionnaireInviteComponent {
+  protected utilsService = inject(UtilsService);
+  private modalService = inject(NgbModal);
+
   collapsed = false;
 
   public toggleColLapse() {
     this.collapsed = !this.collapsed;
   }
 
-  constructor(protected utilsService: UtilsService, private modalService: NgbModal) {
-  }
-
   tipOpenAdditionalQuestionnaire() {
     this.modalService.open(TipAdditionalQuestionnaireFormComponent, {
       windowClass: "custom-modal-width",
diff --git a/client/app/src/shared/partials/tip-comments/tip-comments.component.html b/client/app/src/shared/partials/tip-comments/tip-comments.component.html
index 5d77e5da13..21bdce34f6 100644
--- a/client/app/src/shared/partials/tip-comments/tip-comments.component.html
+++ b/client/app/src/shared/partials/tip-comments/tip-comments.component.html
@@ -1,60 +1,88 @@
 <div id="TipCommunicationComments" class="card card-default" [attr.aria-expanded]="collapsed">
-    <div class="card-header d-flex justify-content-between" (click)="toggleCollapse(); utilsService.stopPropagation($event);">
-        <span>{{'Comments'|translate}}</span>
-        <span class="">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-        </span>
-    </div>
-    <div class="card-body" *ngIf="!collapsed">
-       <div *ngIf="tipService.tip.status !== 'closed'" class="row">
-           <div class="col-md-12 clearfix">
-                <textarea id="TipCommunicationCommentsInput" [(ngModel)]="newCommentContent" name="newCommentContent" maxlength="4096" class="form-control" autocomplete="off"></textarea>
-                <span class="float-end">{{newCommentContent.length ? newCommentContent.length : '0'}}/4096</span>
-            </div>
-            <div class="col-md-12 clearfix">
-                <button id="comment-action-send" class="btn btn-primary" (click)="newComment()" [disabled]="!newCommentContent">
-                    <i class="fa-solid fa-comment"></i>
-                    <span>{{'Send'|translate}}</span>
-                </button>
-            </div>
+  <div class="card-header d-flex justify-content-between" (click)="toggleCollapse(); utilsService.stopPropagation($event);">
+    <span>{{'Comments'|translate}}</span>
+    <span class="">
+      @if (!collapsed) {
+        <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+      }
+      @if (collapsed) {
+        <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+      }
+    </span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      @if (tipService.tip.status !== 'closed') {
+        <div class="row">
+          <div class="col-md-12 clearfix">
+            <textarea id="TipCommunicationCommentsInput" [(ngModel)]="newCommentContent" name="newCommentContent" maxlength="4096" class="form-control" autocomplete="off"></textarea>
+            <span class="float-end">{{newCommentContent.length ? newCommentContent.length : '0'}}/4096</span>
+          </div>
+          <div class="col-md-12 clearfix">
+            <button id="comment-action-send" class="btn btn-primary" (click)="newComment()" [disabled]="!newCommentContent">
+              <i class="fa-solid fa-comment"></i>
+              <span>{{'Send'|translate}}</span>
+            </button>
+          </div>
         </div>
-        <div *ngIf="tipService.tip.comments && tipService.tip.comments.length">
-            <div data-cy="SubmissionComments" id="SubmissionComments" *ngFor="let comment of getSortedComments(comments | orderBy:'creation_date': true | filter : 'visibility' : key) | slice: (currentCommentsPage-1) * itemsPerPage : (currentCommentsPage-1) * itemsPerPage + itemsPerPage; let index = index">
-                <div id="comment-{{index}}" class="mt-2">
-                    <div *ngIf="!comment.author_id && !comment.type" class="message-whistle-blower">
-                        <div class="row">
-                            <div class="col-md-6">{{'Whistleblower'|translate}}</div>
-                            <div class="col-md-6 text-end">{{comment.creation_date | date:'dd-MM-yyyy HH:mm'}}</div>
-                        </div>
-                        <div data-ng-if="comment.content" class="preformatted">{{maskContent(comment.id, '0', comment.content)}}</div>
-                        <span class="float-end edit" id="edit-question" (click)="redactInformation('comment', comment.id, '0', comment.content)" *ngIf="redactMode && (preferenceResolver.dataModel.can_mask_information || preferenceResolver.dataModel.can_redact_information)" title="{{redactOperationTitle | translate}}">
-                          <i class="fa-solid fa-eraser"></i>
-                        </span>
-                        <br/>
+      }
+      @if (tipService.tip.comments && tipService.tip.comments.length) {
+        <div>
+          @for (comment of getSortedComments(comments | orderBy:'creation_date': true | filter : 'visibility' : key) | slice: (currentCommentsPage-1) * itemsPerPage : (currentCommentsPage-1) * itemsPerPage + itemsPerPage; track comment; let index = $index) {
+            <div data-cy="SubmissionComments" id="SubmissionComments">
+              <div id="comment-{{index}}" class="mt-2">
+                @if (!comment.author_id && !comment.type) {
+                  <div class="message-whistle-blower">
+                    <div class="row">
+                      <div class="col-md-6">{{'Whistleblower'|translate}}</div>
+                      <div class="col-md-6 text-end">{{comment.creation_date | date:'dd-MM-yyyy HH:mm'}}</div>
                     </div>
-                    <div class="message" *ngIf="tipService.tip.receivers_by_id[comment.author_id]">
-                        <div class="row">
-                            <div class="col-md-6">{{tipService.tip.receivers_by_id[comment.author_id].name}}</div>
-                            <div class="col-md-6 text-end">{{comment.creation_date | date:'dd-MM-yyyy HH:mm'}}</div>
-                        </div>
-                        <div *ngIf="!comment.type" class="preformatted">{{comment.content}}</div>
-                        <div *ngIf="comment.type === 'auditlog_update_report_status'">
-                            <div>{{'Status'|translate}}: {{utilsService.getSubmissionStatusText(comment.data.status,comment.data.substatus,appDataService.submissionStatuses) | translate}}</div>
-			    <div *ngIf="comment.data.motivation">{{'Motivation'|translate}}: {{comment.data.motivation}}</div>
-                        </div>
-                        <div *ngIf="comment.type === 'auditlog_update_report_expiration'">{{'Expiration date'|translate}}: {{comment.data.curr_expiration_date * 1000 | date:'dd-MM-yyyy'}}</div>
+                    <div data-ng-if="comment.content" class="preformatted">{{maskContent(comment.id, '0', comment.content)}}</div>
+                    @if (redactMode && (preferenceResolver.dataModel.can_mask_information || preferenceResolver.dataModel.can_redact_information)) {
+                      <span class="float-end edit" id="edit-question" (click)="redactInformation('comment', comment.id, '0', comment.content)" data-toggle="tooltip" title="{{redactOperationTitle | translate}}">
+                        <i class="fa-solid fa-eraser"></i>
+                      </span>
+                    }
+                    <br/>
+                  </div>
+                }
+                @if (tipService.tip.receivers_by_id[comment.author_id]) {
+                  <div class="message">
+                    <div class="row">
+                      <div class="col-md-6">{{tipService.tip.receivers_by_id[comment.author_id].name}}</div>
+                      <div class="col-md-6 text-end">{{comment.creation_date | date:'dd-MM-yyyy HH:mm'}}</div>
                     </div>
-                </div>
+                    @if (!comment.type) {
+                      <div class="preformatted">{{comment.content}}</div>
+                    }
+                    @if (comment.type === 'auditlog_update_report_status') {
+                      <div>
+                        <div>{{'Status'|translate}}: {{utilsService.getSubmissionStatusText(comment.data.status,comment.data.substatus,appDataService.submissionStatuses) | translate}}</div>
+                        @if (comment.data.motivation) {
+                          <div>{{'Motivation'|translate}}: {{comment.data.motivation}}</div>
+                        }
+                      </div>
+                    }
+                    @if (comment.type === 'auditlog_update_report_expiration') {
+                      <div>{{'Expiration date'|translate}}: {{comment.data.curr_expiration_date * 1000 | date:'dd-MM-yyyy'}}</div>
+                    }
+                  </div>
+                }
+              </div>
             </div>
+          }
         </div>
-        <div class="mt-2 text-center" *ngIf="tipService.tip.comments && ((comments | orderBy:'creation_date': true) | filter : 'visibility' : key ).length > itemsPerPage">
-            <ngb-pagination dir="ltr" class="d-flex justify-content-center" [collectionSize]="((comments | orderBy:'creation_date': true) | filter : 'visibility' : key ).length" [(page)]="currentCommentsPage" [pageSize]="itemsPerPage">
-                <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" title="{{'First' | translate}}"></i></ng-template>
-                <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward-step" title="{{'Previous' | translate}}"></i></ng-template>
-                <ng-template ngbPaginationNext><i class="fa-solid fa-forward-step" title="{{'Next' | translate}}"></i></ng-template>
-                <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" title="{{'Last' | translate}}"></i></ng-template>
-            </ngb-pagination>
+      }
+      @if (tipService.tip.comments && ((comments | orderBy:'creation_date': true) | filter : 'visibility' : key ).length > itemsPerPage) {
+        <div class="mt-2 text-center">
+          <ngb-pagination class="pagination-sm" [collectionSize]="((comments | orderBy:'creation_date': true) | filter : 'visibility' : key ).length" [(page)]="currentCommentsPage" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [ellipses]="true" [boundaryLinks]="true">
+            <ng-template ngbPaginationFirst><i class="fa-solid fa-backward-fast" data-toggle="tooltip" [title]="'First' | translate"></i></ng-template>
+            <ng-template ngbPaginationPrevious><i class="fa-solid fa-backward" data-toggle="tooltip" [title]="'Previous' | translate"></i></ng-template>
+            <ng-template ngbPaginationNext><i class="fa-solid fa-forward" data-toggle="tooltip" [title]="'Next' | translate"></i></ng-template>
+            <ng-template ngbPaginationLast><i class="fa-solid fa-forward-fast" data-toggle="tooltip" [title]="'Last' | translate"></i></ng-template>
+          </ngb-pagination>
         </div>
+      }
     </div>
+  }
 </div>
diff --git a/client/app/src/shared/partials/tip-comments/tip-comments.component.ts b/client/app/src/shared/partials/tip-comments/tip-comments.component.ts
index 9438f9a519..b5b94bb922 100644
--- a/client/app/src/shared/partials/tip-comments/tip-comments.component.ts
+++ b/client/app/src/shared/partials/tip-comments/tip-comments.component.ts
@@ -1,5 +1,5 @@
 import {AppDataService} from "@app/app-data.service";
-import {ChangeDetectorRef, Component, Input, OnInit} from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnInit, inject } from "@angular/core";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {UtilsService} from "@app/shared/services/utils.service";
@@ -7,12 +7,29 @@ import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 import {Comment} from "@app/models/app/shared-public-model";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {MaskService} from "@app/shared/services/mask.service";
+import { SlicePipe, DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { NgbPagination, NgbPaginationFirst, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationLast } from "@ng-bootstrap/ng-bootstrap";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
 
 @Component({
-  selector: "src-tip-comments",
-  templateUrl: "./tip-comments.component.html"
+    selector: "src-tip-comments",
+    templateUrl: "./tip-comments.component.html",
+    standalone: true,
+    imports: [FormsModule, NgbPagination, NgbPaginationFirst, NgbPaginationPrevious, NgbPaginationNext, NgbPaginationLast, SlicePipe, DatePipe, TranslateModule, TranslatorPipe, OrderByPipe, FilterPipe]
 })
 export class TipCommentsComponent implements OnInit {
+  private maskService = inject(MaskService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  private rTipService = inject(ReceiverTipService);
+  protected authenticationService = inject(AuthenticationService);
+  protected utilsService = inject(UtilsService);
+  private cdr = inject(ChangeDetectorRef);
+  appDataService = inject(AppDataService);
+
   @Input() tipService: ReceiverTipService | WbtipService;
   @Input() key: string;
   @Input() redactMode: boolean;
@@ -25,10 +42,6 @@ export class TipCommentsComponent implements OnInit {
   comments: Comment[] = [];
   newComments: Comment;
 
-  constructor(private maskService:MaskService,protected preferenceResolver:PreferenceResolver,private rTipService: ReceiverTipService, protected authenticationService: AuthenticationService, protected utilsService: UtilsService, private cdr: ChangeDetectorRef, public appDataService: AppDataService) {
-
-  }
-
   ngOnInit() {
     this.comments = this.tipService.tip.comments;
   }
diff --git a/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.html b/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.html
index 0c8e05ecc4..4e8cdb44ad 100644
--- a/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.html
+++ b/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.html
@@ -1,68 +1,124 @@
-<div [ngSwitch]="field.type" class="nested">
-    <div *ngSwitchCase="'checkbox'">
-        <span *ngIf="entry">
-            <div [ngSwitch]="field.type">
-                <div *ngFor="let option of field.options">
-                    <div *ngIf="entry[option.id] === true">
+<div class="nested">
+  @switch (field.type) {
+    @case ('checkbox') {
+      <div>
+        @if (entry) {
+          <span>
+            @if (field.type) {
+              <div>
+                @for (option of field.options; track option) {
+                  <div>
+                    @if (entry[option.id] === true) {
+                      <div>
                         <i class="fa-solid fa-check-square"></i>
                         <span>{{ option.label }}</span>
-                    </div>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div *ngSwitchCase="'voice'">
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </span>
+        }
+      </div>
+    }
+    @case ('voice') {
+      <div>
         <div class="audio-player-wrapper">
-            <iframe #viewer id="{{'audio-file-' + field.id}}" class="audio-player-iframe" sandbox="allow-downloads allow-scripts" [src]="iframeUrl" ></iframe>
+          <iframe #viewer id="{{'audio-file-' + field.id}}" class="audio-player-iframe" sandbox="allow-downloads allow-scripts" [src]="iframeUrl" ></iframe>
         </div>
-    </div>
-    <div *ngSwitchCase="'selectbox'">
-        <div *ngFor="let option of field.options">
-            <span *ngIf="entry['value'] === option.id">{{option.label}}</span>
-        </div>
-    </div>
-    <div *ngSwitchCase="'multichoice'">
-        <div *ngFor="let option of field.options">
-            <span *ngIf="entry['value'] === option.id">{{option.label}}</span>
-        </div>
-    </div>
-    <span *ngSwitchCase="'date'">
-        <div *ngIf="entry['value']">
+      </div>
+    }
+    @case ('selectbox') {
+      <div>
+        @for (option of field.options; track option) {
+          <div>
+            @if (entry['value'] === option.id) {
+              <span>{{option.label}}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+    @case ('multichoice') {
+      <div>
+        @for (option of field.options; track option) {
+          <div>
+            @if (entry['value'] === option.id) {
+              <span>{{option.label}}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+    @case ('date') {
+      <span>
+        @if (entry['value']) {
+          <div>
             {{entry['value'] | date:'dd-MM-yyyy'}}
-        </div>
-    </span>
-    <span *ngSwitchCase="'daterange'">
-        <span *ngIf="entry['value']">
+          </div>
+        }
+      </span>
+    }
+    @case ('daterange') {
+      <span>
+        @if (entry['value']) {
+          <span>
             <span>{{'From:'|translate}}</span> {{entry['value'] | split: [":", 0] | date:'dd-MM-yyyy'}}
             <span>{{'To:'|translate}}</span> {{entry['value'] | split: [":", 1] |  date:'dd-MM-yyyy'}}
-        </span>
-    </span>
-    <span *ngSwitchCase="'tos'">
-        <span *ngIf="entry['value']">
-            <i *ngIf="entry['value'] === true" class="fa-solid fa-check-square"></i>
-            <i *ngIf="entry['value'] === false" class="fa-solid fa-square"></i>
-        </span>
-    </span>
-    <span *ngSwitchCase="'fieldgroup'">
-        <div *ngFor="let field of field.children | orderBy:['y', 'x']">
+          </span>
+        }
+      </span>
+    }
+    @case ('tos') {
+      <span>
+        @if (entry['value']) {
+          <span>
+            @if (entry['value'] === true) {
+              <i class="fa-solid fa-check-square"></i>
+            }
+            @if (entry['value'] === false) {
+              <i class="fa-solid fa-square"></i>
+            }
+          </span>
+        }
+      </span>
+    }
+    @case ('fieldgroup') {
+      <span>
+        @for (field of field.children | orderBy:['y', 'x']; track field) {
+          <div>
             <src-tip-field [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode" [fields]=field [fieldAnswers]=entry></src-tip-field>
-        </div>
-    </span>
-    <div *ngSwitchCase="'fileupload'">
-        <ng-container *ngFor="let wbFile of filteredWbFiles">
-            <div class="mb-2">
-                <span>{{wbFile.name}}</span>
-                <button class="ml-2 btn btn-sm btn-primary tip-action-views-file" *ngIf="utilsService.supportedViewTypes.includes(wbFile.type)" [title]="'View' | translate" (click)="utilsService.viewRFile(wbFile)"><i class="fa-solid fa-eye"></i></button>
-                <button class="ml-2 btn btn-sm btn-primary tip-action-download-file" [title]="'Download' | translate" (click)="utilsService.downloadRFile(wbFile)"><i class="fa-solid fa-download"></i></button>
-            </div>
-        </ng-container>
-    </div>
-    <span *ngSwitchDefault class="entry-text">
-        <span *ngIf="entry['value']">
+          </div>
+        }
+      </span>
+    }
+    @case ('fileupload') {
+      <div>
+        @for (wbFile of filteredWbFiles; track wbFile) {
+          <div class="mb-2">
+            <span>{{wbFile.name}}</span>
+            @if (utilsService.supportedViewTypes.includes(wbFile.type)) {
+              <button class="ml-2 btn btn-sm btn-primary tip-action-views-file" data-toggle="tooltip" [title]="'View' | translate" (click)="utilsService.viewRFile(wbFile)"><i class="fa-solid fa-eye"></i></button>
+            }
+            <button class="ml-2 btn btn-sm btn-primary tip-action-download-file" data-toggle="tooltip" [title]="'Download' | translate" (click)="utilsService.downloadRFile(wbFile)"><i class="fa-solid fa-download"></i></button>
+          </div>
+        }
+      </div>
+    }
+    @default {
+      <span class="entry-text">
+        @if (entry['value']) {
+          <span>
             <span class="preformatted">{{maskContent(field.id, entry['index'], entry['value'])}}</span>
-            <span class="float-end edit" id="edit-question" (click)="redactInformation('answer', field, entry['index'], entry['value'])" *ngIf="redactMode && (preferenceResolver.dataModel.can_mask_information || preferenceResolver.dataModel.can_redact_information)" title="{{redactOperationTitle | translate}}">
-              <i class="fa-solid fa-eraser"></i>
-            </span>
-        </span>
-    </span>
+            @if (redactMode && (preferenceResolver.dataModel.can_mask_information || preferenceResolver.dataModel.can_redact_information)) {
+              <span class="float-end edit" id="edit-question" (click)="redactInformation('answer', field, entry['index'], entry['value'])" data-toggle="tooltip" title="{{redactOperationTitle | translate}}">
+                <i class="fa-solid fa-eraser"></i>
+              </span>
+            }
+          </span>
+        }
+      </span>
+    }
+  }
 </div>
diff --git a/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.ts b/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.ts
index 05c575be95..b2a86252c5 100644
--- a/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.ts
+++ b/client/app/src/shared/partials/tip-field-answer-entry/tip-field-answer-entry.component.ts
@@ -1,5 +1,5 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
+import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild, inject } from "@angular/core";
 import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
 import {AppDataService} from "@app/app-data.service";
 import {WbFile} from "@app/models/app/shared-public-model";
@@ -11,12 +11,32 @@ import {HttpService} from "@app/shared/services/http.service";
 import {MaskService} from "@app/shared/services/mask.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import { DatePipe } from "@angular/common";
+import { TipFieldComponent } from "../tip-field/tip-field.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { SplitPipe } from "@app/shared/pipes/split.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-tip-field-answer-entry",
-  templateUrl: "./tip-field-answer-entry.component.html"
+    selector: "src-tip-field-answer-entry",
+    templateUrl: "./tip-field-answer-entry.component.html",
+    standalone: true,
+    imports: [forwardRef(() => TipFieldComponent), DatePipe, TranslateModule, TranslatorPipe, SplitPipe, OrderByPipe]
 })
 export class TipFieldAnswerEntryComponent implements OnInit {
+  protected httpService = inject(HttpService);
+  protected appDataService = inject(AppDataService);
+  protected modalService = inject(NgbModal);
+  protected utilsService = inject(UtilsService);
+  private maskService = inject(MaskService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  private http = inject(HttpClient);
+  private sanitizer = inject(DomSanitizer);
+  protected authenticationService = inject(AuthenticationService);
+  private wbTipService = inject(WbtipService);
+  private rTipService = inject(ReceiverTipService);
+
   @Input() entry: any;
   @Input() field: any;
   @Input() fieldAnswers: any;
@@ -31,8 +51,6 @@ export class TipFieldAnswerEntryComponent implements OnInit {
   tipService:WbtipService|ReceiverTipService;
   filteredWbFiles: WbFile[];
   wbfile:WbFile;
-  constructor(protected httpService: HttpService, protected appDataService: AppDataService,protected modalService: NgbModal,protected utilsService: UtilsService,private maskService:MaskService,protected preferenceResolver:PreferenceResolver,private http: HttpClient, private sanitizer: DomSanitizer, protected authenticationService: AuthenticationService, private wbTipService: WbtipService,private rTipService: ReceiverTipService) {
-  }
 
   ngOnInit(): void {
     if (this.authenticationService.session.role === "whistleblower") {
diff --git a/client/app/src/shared/partials/tip-field/tip-field.component.html b/client/app/src/shared/partials/tip-field/tip-field.component.html
index 1f8a2f0691..c37e55a67d 100644
--- a/client/app/src/shared/partials/tip-field/tip-field.component.html
+++ b/client/app/src/shared/partials/tip-field/tip-field.component.html
@@ -1,22 +1,34 @@
-<div *ngIf="fields.enabled" class="field-answer">
+@if (fields.enabled) {
+  <div class="field-answer">
     <div>
-        <span *ngIf="!fields">{{index + 1}})</span>
-        <span>{{fields.label |translate}}</span>
+      @if (!fields) {
+        <span>{{index + 1}})</span>
+      }
+      <span>{{fields.label |translate}}</span>
     </div>
-    <div *ngIf="fieldAnswers && fieldAnswers[fields.id]">
-        <div *ngIf="!hasMultipleEntries(fieldAnswers[fields.id])">
+    @if (fieldAnswers && fieldAnswers[fields.id]) {
+      <div>
+        @if (!hasMultipleEntries(fieldAnswers[fields.id])) {
+          <div>
             <src-tip-field-answer-entry [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode"
-                [field]="fields" [fieldAnswers]=fieldAnswers
-                [entry]="fieldAnswers[fields.id][0]"></src-tip-field-answer-entry>
-        </div>
-        <div *ngIf="hasMultipleEntries(fieldAnswers[fields.id])">
-            <div *ngFor="let entry of fieldAnswers[fields.id] | orderBy:['y', 'x'],let i = index">
+              [field]="fields" [fieldAnswers]=fieldAnswers
+            [entry]="fieldAnswers[fields.id][0]"></src-tip-field-answer-entry>
+          </div>
+        }
+        @if (hasMultipleEntries(fieldAnswers[fields.id])) {
+          <div>
+            @for (entry of fieldAnswers[fields.id] | orderBy:['y', 'x']; track entry; let i = $index) {
+              <div>
                 <div class="">
-                    <span class="text-muted">#{{i + 1}}</span>
+                  <span class="text-muted">#{{i + 1}}</span>
                 </div>
                 <src-tip-field-answer-entry [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode"
-                    [field]="fields" class="" [entry]="entry"></src-tip-field-answer-entry>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+                [field]="fields" class="" [entry]="entry"></src-tip-field-answer-entry>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/tip-field/tip-field.component.ts b/client/app/src/shared/partials/tip-field/tip-field.component.ts
index db8295d124..f85a330441 100644
--- a/client/app/src/shared/partials/tip-field/tip-field.component.ts
+++ b/client/app/src/shared/partials/tip-field/tip-field.component.ts
@@ -1,8 +1,15 @@
-import {Component, Input} from "@angular/core";
+import {Component, forwardRef, Input} from "@angular/core";
+
+import { TipFieldAnswerEntryComponent } from "../tip-field-answer-entry/tip-field-answer-entry.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 @Component({
-  selector: "src-tip-field",
-  templateUrl: "./tip-field.component.html"
+    selector: "src-tip-field",
+    templateUrl: "./tip-field.component.html",
+    standalone: true,
+    imports: [forwardRef(() => TipFieldAnswerEntryComponent), TranslateModule, TranslatorPipe, OrderByPipe]
 })
 export class TipFieldComponent {
   @Input() fields: any;
diff --git a/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.html b/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.html
index aeaca0e099..8b5224a0e6 100644
--- a/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.html
+++ b/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.html
@@ -1,70 +1,92 @@
-<div *ngIf="tipService.tip" id="TipPageFilesInfoBox" class="card card-default" [attr.aria-expanded]="collapsed">
+@if (tipService.tip) {
+  <div id="TipPageFilesInfoBox" class="card card-default" [attr.aria-expanded]="collapsed">
     <div class="card-header clearfix" (click)="collapsed = !collapsed; $event.stopPropagation();">
-        <span>{{ 'Attachments' | translate }}</span>
-        <span class="float-end">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" [title]="'Collapse' | translate"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" [title]="'Expand' | translate"></i>
-        </span>
+      <span>{{ 'Attachments' | translate }}</span>
+      <span class="float-end">
+        @if (!collapsed) {
+          <i class="fa-solid fa-chevron-up" data-toggle="tooltip" [title]="'Collapse' | translate"></i>
+        }
+        @if (collapsed) {
+          <i class="fa-solid fa-chevron-down" data-toggle="tooltip" [title]="'Expand' | translate"></i>
+        }
+      </span>
     </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngIf="tipService.tip.wbfiles?.length" class="table-responsive">
+    @if (!collapsed) {
+      <div class="card-body">
+        @if (tipService.tip.wbfiles.length) {
+          <div class="table-responsive">
             <table class="table table-striped" id="fileList">
-                <thead>
+              <thead>
                 <tr>
-                    <th>{{ 'Filename' | translate }}</th>
-                    <th>{{ 'View' | translate }}</th>
-                    <th>{{ 'Download' | translate }}</th>
-                    <th>{{ 'Upload date' | translate }}</th>
-                    <th>{{ 'Type' | translate }}</th>
-                    <th>{{ 'File size' | translate }}</th>
+                  <th>{{ 'Filename' | translate }}</th>
+                  <th>{{ 'View' | translate }}</th>
+                  <th>{{ 'Download' | translate }}</th>
+                  <th>{{ 'Upload date' | translate }}</th>
+                  <th>{{ 'Type' | translate }}</th>
+                  <th>{{ 'File size' | translate }}</th>
                 </tr>
-                </thead>
-                <tbody id="fileListBody">
-                <ng-container *ngFor="let file of getSortedWBFiles(tipService.tip.wbfiles | orderBy:'creation_date') as index">
-                    <tr id="file-{{index}}" *ngIf="(file.name !== 'audio.webm') && (!maskService.isMasked(file.ifile_id,tipService.tip) || redactMode)" [ngClass]="{ 'view-supported': utilsService.supportedViewTypes.includes(file.type) }">
-                        <td>{{ file.name }}</td>
-                        <td>
-                            <button class="btn btn-sm btn-primary tip-action-views-file"  [ngClass]="{'btn-secondary': !utilsService.supportedViewTypes.includes(file.type)}"
-                            [disabled]="!utilsService.supportedViewTypes.includes(file.type)" [title]="'View' | translate" (click)="utilsService.viewRFile(file)">
-                                <i class="fa-solid fa-eye"></i>
-                            </button>
-                        </td>
-                        <td>
-                            <button class="btn btn-sm btn-primary tip-action-download-file" [title]="'Download' | translate" (click)="utilsService.downloadRFile(file)">
-                                <i class="fa-solid fa-download"></i>
-                            </button>
-                            <span *ngIf="redactMode">
-                                <span *ngIf="preferenceResolver.dataModel.can_mask_information && !maskService.isMasked(file.ifile_id,tipService.tip)">
-                                  <button class="btn btn-sm btn-outline-secondary" [title]="'Mask' | translate"
-                                    (click)="redactFileOperation('full-mask', 'file', file)">
-                                    <i class="fa-solid fa-eraser"></i>
-                                  </button>
-                                </span>
-                                <span *ngIf="maskService.isMasked(file.ifile_id,tipService.tip)">
+              </thead>
+              <tbody id="fileListBody">
+                @for (file of getSortedWBFiles(tipService.tip.wbfiles | orderBy:'creation_date'); track file; let index = $index) {
+                  @if ((file.name !== 'audio.webm') && (!maskService.isMasked(file.ifile_id,tipService.tip) || redactMode)) {
+                    <tr id="file-{{index}}" [ngClass]="{ 'view-supported': utilsService.supportedViewTypes.includes(file.type) }">
+                      <td>{{ file.name }}</td>
+                      <td>
+                        <button class="btn btn-sm btn-primary tip-action-views-file"  [ngClass]="{'btn-secondary': !utilsService.supportedViewTypes.includes(file.type)}"
+                          [disabled]="!utilsService.supportedViewTypes.includes(file.type)" data-toggle="tooltip" [title]="'View' | translate" (click)="utilsService.viewRFile(file)">
+                          <i class="fa-solid fa-eye"></i>
+                        </button>
+                      </td>
+                      <td>
+                        <button class="btn btn-sm btn-primary tip-action-download-file" data-toggle="tooltip" [title]="'Download' | translate" (click)="utilsService.downloadRFile(file)">
+                          <i class="fa-solid fa-download"></i>
+                        </button>
+                        @if (redactMode) {
+                          <span>
+                            @if (preferenceResolver.dataModel.can_mask_information && !maskService.isMasked(file.ifile_id,tipService.tip)) {
+                              <span>
+                                <button class="btn btn-sm btn-outline-secondary"
+                                  data-toggle="tooltip" [title]="'Mask' | translate"
+                                  (click)="redactFileOperation('full-mask', 'file', file)">
+                                  <i class="fa-solid fa-eraser"></i>
+                                </button>
+                              </span>
+                            }
+                            @if (maskService.isMasked(file.ifile_id,tipService.tip)) {
+                              <span>
+                                @if (preferenceResolver.dataModel.can_mask_information) {
                                   <button class="btn btn-sm btn-outline-secondary"
-                                    [ngClass]="{ 'active': redactMode }" [title]="'Mask' | translate"
-                                    *ngIf="preferenceResolver.dataModel.can_mask_information"
+                                    [ngClass]="{ 'active': redactMode }"
+                                    data-toggle="tooltip" [title]="'Mask' | translate"
                                     [attr.disabled]="!redactMode ? true : null"
                                     (click)="redactFileOperation('full-unmask', 'file', file)">
                                     <i class="fa-solid fa-eraser"></i>
                                   </button>
-                                  <button class="btn btn-sm btn-danger tip-action-delete-file" [title]="'Redact' | translate"
-                                    *ngIf="preferenceResolver.dataModel.can_redact_information"
+                                }
+                                @if (preferenceResolver.dataModel.can_redact_information) {
+                                  <button class="btn btn-sm btn-danger tip-action-delete-file"
+                                    data-toggle="tooltip" [title]="'Redact' | translate"
                                     [attr.disabled]="!redactMode ? true : null"
                                     (click)="redactFileOperation('redact', 'file', file)">
                                     <i class="fa-solid fa-trash"></i>
                                   </button>
-                                </span>
-                            </span>
-                        </td>
-                        <td>{{ file.creation_date | date:'dd-MM-yyyy HH:mm' }}</td>
-                        <td>{{ file.type }}</td>
-                        <td>{{ file.size | byteFmt:2 }}</td>
-                </tr>
-                </ng-container>
-
-                </tbody>
+                                }
+                              </span>
+                            }
+                          </span>
+                        }
+                      </td>
+                      <td>{{ file.creation_date | date:'dd-MM-yyyy HH:mm' }}</td>
+                      <td>{{ file.type }}</td>
+                      <td>{{ file.size | byteFmt:2 }}</td>
+                    </tr>
+                  }
+                }
+              </tbody>
             </table>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+          </div>
+        }
+      </div>
+    }
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.ts b/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.ts
index f351db52fd..8fd9cc9663 100644
--- a/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.ts
+++ b/client/app/src/shared/partials/tip-files-receiver/tip-files-receiver.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from "@angular/core";
+import { Component, Input, OnInit, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AppDataService} from "@app/app-data.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,19 +9,32 @@ import {WbFile} from "@app/models/app/shared-public-model";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {MaskService} from "@app/shared/services/mask.service";
 import {RedactionData} from "@app/models/component-model/redaction";
+import { NgClass, DatePipe } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { ByteFmtPipe } from "@app/shared/pipes/byte-fmt.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 @Component({
-  selector: "src-tip-files-receiver",
-  templateUrl: "./tip-files-receiver.component.html"
+    selector: "src-tip-files-receiver",
+    templateUrl: "./tip-files-receiver.component.html",
+    standalone: true,
+    imports: [NgClass, DatePipe, TranslateModule, TranslatorPipe, ByteFmtPipe, OrderByPipe]
 })
 export class TipFilesReceiverComponent implements OnInit {
+  protected maskService = inject(MaskService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  protected modalService = inject(NgbModal);
+  protected httpService = inject(HttpService);
+  protected authenticationService = inject(AuthenticationService);
+  protected utilsService = inject(UtilsService);
+  protected tipService = inject(ReceiverTipService);
+  protected appDataService = inject(AppDataService);
+
   @Input() fileUploadUrl: string;
   @Input() redactMode: boolean;
 
   collapsed = false;
 
-  constructor(protected maskService:MaskService,protected preferenceResolver:PreferenceResolver,protected modalService: NgbModal,protected httpService: HttpService, protected authenticationService: AuthenticationService, protected utilsService: UtilsService, protected tipService: ReceiverTipService, protected appDataService: AppDataService) {
-  }
-
   ngOnInit(): void {
   }
 
diff --git a/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.html b/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.html
index f4c85aec9d..9309724ab4 100644
--- a/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.html
+++ b/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.html
@@ -1,43 +1,58 @@
 <div id="TipPageFilesInfoBox" class="card card-default" [attr.aria-expanded]="collapsed">
-    <div class="card-header clearfix" (click)="toggleColLapse()">
-        <span>{{'Attachments'|translate}}</span>
-        <span class="float-end">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-        </span>
-    </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div class="table-responsive">
-            <table class="table table-striped" id="fileList">
-                <thead>
-                <tr>
-                    <th>{{'Filename'|translate}}</th>
-                    <th *ngIf="wbTipService.tip.enable_whistleblower_download">{{'Download' | translate}}</th>
-                    <th>{{'Upload date'|translate}}</th>
-                    <th>{{'Type'|translate}}</th>
-                    <th>{{'File size'|translate}}</th>
-                </tr>
-                </thead>
-                <tbody id="fileListBody">
-                <tr id="file-{{index}}" *ngFor="let file of getSortedWBFiles(wbTipService.tip.wbfiles | orderBy:'creation_date'); let index = index">
-                    <td>{{file.name}}</td>
-                    <td *ngIf="wbTipService.tip.enable_whistleblower_download">
-                        <button class="btn btn-sm btn-primary tip-action-download-file"
-                                [disabled]="file.error" title="{{'Download' | translate}}"
-                                (click)="downloadWBFile(file)">
-                            <i class="fa-solid fa-download"></i>
-                        </button>
-                    </td>
-                    <td>{{file.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                    <td>{{file.type}}</td>
-                    <td>{{file.size | byteFmt:2}}</td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-        <br />
-        <div *ngIf="wbTipService.tip.status !== 'closed'">
-            <src-rfile-upload-button [formUploader]=false [fileUploadUrl]="fileUploadUrl"></src-rfile-upload-button>
+  <div class="card-header clearfix" (click)="toggleColLapse()">
+    <span>{{'Attachments'|translate}}</span>
+    <span class="float-end">
+      @if (!collapsed) {
+        <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+      }
+      @if (collapsed) {
+        <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+      }
+    </span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      <div class="table-responsive">
+        <table class="table table-striped" id="fileList">
+          <thead>
+            <tr>
+              <th>{{'Filename'|translate}}</th>
+              @if (wbTipService.tip.enable_whistleblower_download) {
+                <th>{{'Download' | translate}}</th>
+              }
+              <th>{{'Upload date'|translate}}</th>
+              <th>{{'Type'|translate}}</th>
+              <th>{{'File size'|translate}}</th>
+            </tr>
+          </thead>
+          <tbody id="fileListBody">
+            @for (file of getSortedWBFiles(wbTipService.tip.wbfiles | orderBy:'creation_date'); track file; let index = $index) {
+              <tr id="file-{{index}}">
+                <td>{{file.name}}</td>
+                @if (wbTipService.tip.enable_whistleblower_download) {
+                  <td>
+                    <button class="btn btn-sm btn-primary tip-action-download-file"
+                      [disabled]="file.error"
+                      data-toggle="tooltip" title="{{'Download' | translate}}"
+                      (click)="downloadWBFile(file)">
+                      <i class="fa-solid fa-download"></i>
+                    </button>
+                  </td>
+                }
+                <td>{{file.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
+                <td>{{file.type}}</td>
+                <td>{{file.size | byteFmt:2}}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <br />
+      @if (wbTipService.tip.status !== 'closed') {
+        <div>
+          <src-rfile-upload-button [formUploader]=false [fileUploadUrl]="fileUploadUrl"></src-rfile-upload-button>
         </div>
+      }
     </div>
+  }
 </div>
diff --git a/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.ts b/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.ts
index 1190a1ef64..8001903ed2 100644
--- a/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.ts
+++ b/client/app/src/shared/partials/tip-files-whistleblower/tip-files-whistleblower.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {HttpService} from "@app/shared/services/http.service";
@@ -6,19 +6,31 @@ import {AppDataService} from "@app/app-data.service";
 import {CryptoService} from "@app/shared/services/crypto.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {WbFile} from "@app/models/app/shared-public-model";
+import { DatePipe } from "@angular/common";
+import { RFileUploadButtonComponent } from "../rfile-upload-button/r-file-upload-button.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { ByteFmtPipe } from "@app/shared/pipes/byte-fmt.pipe";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
 
 
 @Component({
-  selector: "src-tip-files-whistleblower",
-  templateUrl: "./tip-files-whistleblower.component.html"
+    selector: "src-tip-files-whistleblower",
+    templateUrl: "./tip-files-whistleblower.component.html",
+    standalone: true,
+    imports: [RFileUploadButtonComponent, DatePipe, TranslateModule, TranslatorPipe, ByteFmtPipe, OrderByPipe]
 })
 export class TipFilesWhistleblowerComponent {
+  private appDataService = inject(AppDataService);
+  private cryptoService = inject(CryptoService);
+  private httpService = inject(HttpService);
+  protected authenticationService = inject(AuthenticationService);
+  protected utilsService = inject(UtilsService);
+  protected wbTipService = inject(WbtipService);
+
   @Input() fileUploadUrl: string;
   collapsed = false;
 
-  constructor(private appDataService: AppDataService, private cryptoService: CryptoService, private httpService: HttpService, protected authenticationService: AuthenticationService, protected utilsService: UtilsService, protected wbTipService: WbtipService) {
-  }
-
   downloadWBFile(wbFile: WbFile) {
 
     const param = JSON.stringify({});
diff --git a/client/app/src/shared/partials/tip-info/tip-info.component.html b/client/app/src/shared/partials/tip-info/tip-info.component.html
index 2187c80fc3..d27fe033a3 100644
--- a/client/app/src/shared/partials/tip-info/tip-info.component.html
+++ b/client/app/src/shared/partials/tip-info/tip-info.component.html
@@ -1,114 +1,168 @@
 <div id="TipInfoBox" class="card card-default">
-    <div class="card-header" *ngIf="authenticationService.session?.role === 'receiver'">
-        <div class="row justify-content-between">
-            <div class="col-md-12 p-0">
-                <div class="float-start">
-                    <span class="input-group ms-1">
-                        <input id="assignLabelInput" type="text" class="form-control m-0" placeholder="{{'Label' | translate}}" [(ngModel)]="tipService.tip.label" />
-                        <span class="input-group-append" title="{{'Label the report' | translate}} ">
-                            <button id="assignLabelButton" class="btn btn-primary rounded-start-0 m-0" name="tip.label" (click)="updateLabel(tipService.tip.label)">
-                                <i class="fa-solid fa-tag"></i>
-                            </button>
-                        </span>
-                    </span>
-                </div>
-            </div>
+  @if (authenticationService.session?.role === 'receiver') {
+    <div class="card-header">
+      <div class="row justify-content-between">
+        <div class="col-md-12 p-0">
+          <div class="float-start">
+            <span class="input-group ms-1">
+              <input id="assignLabelInput" type="text" class="form-control m-0" placeholder="{{'Label' | translate}}" [(ngModel)]="tipService.tip.label" />
+              <span class="input-group-append" data-toggle="tooltip" title="{{'Label the report' | translate}} ">
+                <button id="assignLabelButton" class="btn btn-primary rounded-start-0 m-0" name="tip.label" (click)="updateLabel(tipService.tip.label)">
+                  <i class="fa-solid fa-tag"></i>
+                </button>
+              </span>
+            </span>
+          </div>
         </div>
+      </div>
     </div>
-    <div class="card-body">
-        <div class="text-center mb-2">
-            <span class="fw-bold">ID:</span>
-            <span>{{tipService.tip.id}}</span>
-        </div>
-        <table class="table table-borderless table-striped">
-            <thead>
-            <tr>
-                <th class="TipInfoID" *ngIf="authenticationService.session?.role === 'receiver'">
-                    <i class="fa-solid fa-hashtag"></i>
-                </th>
-                <th class="TipInfoContext" *ngIf="appDataService.public.contexts.length > 1">
-                    <i class="fa-solid fa-inbox"></i>
-                    <span>{{'Channel'|translate}}</span>
-                </th>
-                <th class="TipInfoSubmissionDate">
-                    <i class="fa-solid fa-clock"></i>
-                    <span>{{'Date'|translate}}</span>
-                </th>
-                <th class="TipInfoLastUpdate">
-                    <i class="fa-solid fa-clock"></i>
-                    <span>{{'Last update'|translate}}</span>
-                </th>
-                <th class="TipInfoExpirationDate">
-                    <i class="fa-solid fa-hourglass"></i>
-                    <span>{{'Expiration date'|translate}}</span>
-                </th>
-                <th class="TipInfoReminderDate" *ngIf="authenticationService.session?.role === 'receiver'">
-                    <i class="fa-solid fa-bell"></i>
-                    <span>{{'Reminder date'|translate}}</span>
-                </th>
-                <th class="TipInfoReadReceipt" *ngIf="authenticationService.session?.role === 'receiver'">
-                    <i class="fa-solid fa-envelope-circle-check"></i>
-                </th>
-                <th class="TipInfoConnection" *ngIf="authenticationService.session?.role === 'receiver'">
-                    <i class="fa-solid fa-network-wired"></i>
-                    <span>{{'Tor'|translate}}</span>
-                </th>
-                <th class="TipInfoSubmissionStatus">
-                    <i class="fa-solid fa-dot-circle"></i>
-                    <span>{{'Status'|translate}}</span>
-                </th>
-                <th class="TipInfoScore" *ngIf="authenticationService.session?.role === 'receiver' && appDataService.public.node.enable_scoring_system">
-                    <i class="fa-solid fa-flash"></i>
-                    <span>{{'Score'|translate}}</span>
-                </th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <ng-container *ngIf="loading">
-                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
-                </ng-container>
-                <ng-container *ngIf="!loading">
-                    <td class="TipInfoID" *ngIf="authenticationService.session?.role === 'receiver'">
-                        {{tipService.tip.progressive}}
-                    </td>
-                    <td class="TipInfoContext" *ngIf="appDataService.public.contexts.length > 1">
-                        <ng-container *ngIf="tipService.tip.context">
-                            {{tipService.tip.context.name}}
-                        </ng-container>
-                    </td>
-                    <td class="TipInfoCreationDate">{{tipService.tip.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                    <td class="TipInfoUpdateDate">{{tipService.tip.update_date | date:'dd-MM-yyyy HH:mm'}}</td>
-                    <td class="TipInfoExpirationDate">
-                        <span *ngIf="!utilsService.isNever(tipService.tip.expiration_date)">{{tipService.tip.expiration_date | date:'dd-MM-yyyy HH:mm'}}</span>
-                        <span *ngIf="utilsService.isNever(tipService.tip.expiration_date)">-</span>
-                    </td>
-                    <td class="TipInfoReminderDate" *ngIf="authenticationService.session?.role === 'receiver'">
-                        <span *ngIf="!utilsService.isNever(tipService.tip.reminder_date)">
-                            <span>{{tipService.tip.reminder_date | date:'dd-MM-yyyy'}}</span>
-                            <i *ngIf="markReportStatus(tipService.tip.reminder_date)" class="reminder fa-solid fa-bell"></i>
-                        </span>
-                        <i *ngIf="utilsService.isNever(tipService.tip.reminder_date)" class="fa-solid fa-minus"></i>
-                    </td>
-                    <td class="TipInfoLastAccess" *ngIf="authenticationService.session?.role === 'receiver'">
-                        <i *ngIf="tipService.tip.last_access >= tipService.tip.update_date" class="fa-solid fa-check" title="{{'The whistleblower has already read the last update' | translate}} ({{tipService.tip.last_access | date:'dd-MM-yyyy HH:mm'}})"></i>
-                        <i *ngIf="tipService.tip.last_access < tipService.tip.update_date" class="fa-solid fa-times" title="{{'The whistleblower has not read the last update yet' | translate}}">
-                        </i>
-                    </td>
-                    <td class="TipInfoConnection" *ngIf="authenticationService.session?.role === 'receiver'">
-                        <i *ngIf="tipService.tip.tor" class="fa-solid fa-check"></i>
-                        <i *ngIf="!tipService.tip.tor" class="fa-solid fa-times"></i>
-                    </td>
-                    <td class="TipInfoSubmissionStatus">{{tipService.tip.submissionStatusStr}}</td>
-                    <td class="TipInfoScore" *ngIf="authenticationService.session?.role === 'receiver' && appDataService.public.node.enable_scoring_system" [ngSwitch]="tipService.tip.score">
-                        <span *ngSwitchCase="0">-</span>
-                        <span class="badge bg-primary" *ngSwitchCase="1">{{'Low'|translate}}</span>
-                        <span class="badge bg-primary" *ngSwitchCase="2">{{'Medium'|translate}}</span>
-                        <span class="badge bg-primary" *ngSwitchCase="3">{{'High'|translate}}</span>
-                    </td>
-                </ng-container>
-            </tr>
-            </tbody>
-        </table>
+  }
+  <div class="card-body">
+    <div class="text-center mb-2">
+      <span class="fw-bold">ID:</span>
+      <span>{{tipService.tip.id}}</span>
     </div>
+    <table class="table table-borderless table-striped">
+      <thead>
+        <tr>
+          @if (authenticationService.session?.role === 'receiver') {
+            <th class="TipInfoID">
+              <i class="fa-solid fa-hashtag"></i>
+            </th>
+          }
+          @if (appDataService.public.contexts.length > 1) {
+            <th class="TipInfoContext">
+              <i class="fa-solid fa-inbox"></i>
+              <span>{{'Channel'|translate}}</span>
+            </th>
+          }
+          <th class="TipInfoSubmissionDate">
+            <i class="fa-solid fa-clock"></i>
+            <span>{{'Date'|translate}}</span>
+          </th>
+          <th class="TipInfoLastUpdate">
+            <i class="fa-solid fa-clock"></i>
+            <span>{{'Last update'|translate}}</span>
+          </th>
+          <th class="TipInfoExpirationDate">
+            <i class="fa-solid fa-hourglass"></i>
+            <span>{{'Expiration date'|translate}}</span>
+          </th>
+          @if (authenticationService.session?.role === 'receiver') {
+            <th class="TipInfoReminderDate">
+              <i class="fa-solid fa-bell"></i>
+              <span>{{'Reminder date'|translate}}</span>
+            </th>
+          }
+          @if (authenticationService.session?.role === 'receiver') {
+            <th class="TipInfoReadReceipt">
+              <i class="fa-solid fa-envelope-circle-check"></i>
+            </th>
+          }
+          @if (authenticationService.session?.role === 'receiver') {
+            <th class="TipInfoConnection">
+              <i class="fa-solid fa-network-wired"></i>
+              <span>{{'Tor'|translate}}</span>
+            </th>
+          }
+          <th class="TipInfoSubmissionStatus">
+            <i class="fa-solid fa-dot-circle"></i>
+            <span>{{'Status'|translate}}</span>
+          </th>
+          @if (authenticationService.session?.role === 'receiver' && appDataService.public.node.enable_scoring_system) {
+            <th class="TipInfoScore">
+              <i class="fa-solid fa-flash"></i>
+              <span>{{'Score'|translate}}</span>
+            </th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          @if (loading) {
+            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
+          }
+          @if (!loading) {
+            @if (authenticationService.session?.role === 'receiver') {
+              <td class="TipInfoID">
+                {{tipService.tip.progressive}}
+              </td>
+            }
+            @if (appDataService.public.contexts.length > 1) {
+              <td class="TipInfoContext">
+                @if (tipService.tip.context) {
+                  {{tipService.tip.context.name}}
+                }
+              </td>
+            }
+            <td class="TipInfoCreationDate">{{tipService.tip.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
+            <td class="TipInfoUpdateDate">{{tipService.tip.update_date | date:'dd-MM-yyyy HH:mm'}}</td>
+            <td class="TipInfoExpirationDate">
+              @if (!utilsService.isNever(tipService.tip.expiration_date)) {
+                <span>{{tipService.tip.expiration_date | date:'dd-MM-yyyy HH:mm'}}</span>
+              }
+              @if (utilsService.isNever(tipService.tip.expiration_date)) {
+                <span>-</span>
+              }
+            </td>
+            @if (authenticationService.session?.role === 'receiver') {
+              <td class="TipInfoReminderDate">
+                @if (!utilsService.isNever(tipService.tip.reminder_date)) {
+                  <span>
+                    <span>{{tipService.tip.reminder_date | date:'dd-MM-yyyy'}}</span>
+                    @if (markReportStatus(tipService.tip.reminder_date)) {
+                      <i class="reminder fa-solid fa-bell"></i>
+                    }
+                  </span>
+                }
+                @if (utilsService.isNever(tipService.tip.reminder_date)) {
+                  <i class="fa-solid fa-minus"></i>
+                }
+              </td>
+            }
+            @if (authenticationService.session?.role === 'receiver') {
+              <td class="TipInfoLastAccess">
+                @if (tipService.tip.last_access >= tipService.tip.update_date) {
+                  <i class="fa-solid fa-check" data-toggle="tooltip" title="{{'The whistleblower has already read the last update' | translate}} ({{tipService.tip.last_access | date:'dd-MM-yyyy HH:mm'}})"></i>
+                }
+                @if (tipService.tip.last_access < tipService.tip.update_date) {
+                  <i class="fa-solid fa-times" data-toggle="tooltip" title="{{'The whistleblower has not read the last update yet' | translate}}">
+                  </i>
+                }
+              </td>
+            }
+            @if (authenticationService.session?.role === 'receiver') {
+              <td class="TipInfoConnection">
+                @if (tipService.tip.tor) {
+                  <i class="fa-solid fa-check"></i>
+                }
+                @if (!tipService.tip.tor) {
+                  <i class="fa-solid fa-times"></i>
+                }
+              </td>
+            }
+            <td class="TipInfoSubmissionStatus">{{tipService.tip.submissionStatusStr}}</td>
+            @if (authenticationService.session?.role === 'receiver' && appDataService.public.node.enable_scoring_system) {
+              <td class="TipInfoScore">
+                @switch (tipService.tip.score) {
+                  @case (0) {
+                    <span>-</span>
+                  }
+                  @case (1) {
+                    <span class="badge bg-primary">{{'Low'|translate}}</span>
+                  }
+                  @case (2) {
+                    <span class="badge bg-primary">{{'Medium'|translate}}</span>
+                  }
+                  @case (3) {
+                    <span class="badge bg-primary">{{'High'|translate}}</span>
+                  }
+                }
+              </td>
+            }
+          }
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/client/app/src/shared/partials/tip-info/tip-info.component.ts b/client/app/src/shared/partials/tip-info/tip-info.component.ts
index cfcf37a461..a7fce853f6 100644
--- a/client/app/src/shared/partials/tip-info/tip-info.component.ts
+++ b/client/app/src/shared/partials/tip-info/tip-info.component.ts
@@ -1,22 +1,31 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {AppDataService} from "@app/app-data.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 import {HttpService} from "@app/shared/services/http.service";
+import { DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-tip-info",
-  templateUrl: "./tip-info.component.html"
+    selector: "src-tip-info",
+    templateUrl: "./tip-info.component.html",
+    standalone: true,
+    imports: [FormsModule, DatePipe, TranslateModule, TranslatorPipe]
 })
 export class TipInfoComponent {
+  protected authenticationService = inject(AuthenticationService);
+  protected appDataService = inject(AppDataService);
+  protected utilsService = inject(UtilsService);
+  private rTipService = inject(ReceiverTipService);
+  private httpService = inject(HttpService);
+
   @Input() tipService: ReceiverTipService | WbtipService;
   @Input() loading: boolean;
 
-  constructor(protected authenticationService: AuthenticationService, protected appDataService: AppDataService, protected utilsService: UtilsService, private rTipService: ReceiverTipService, private httpService: HttpService,) {
-  }
-
   markReportStatus(date: string) {
     const report_date = new Date(date);
     const current_date = new Date();
diff --git a/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.html b/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.html
index ee00eef5a6..4d083dcff6 100644
--- a/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.html
+++ b/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.html
@@ -1,30 +1,48 @@
 <div id="TipQuestionnaireAnswersBox" class="card card-default" [attr.aria-expanded]="collapsed">
-    <div class="card-header d-flex justify-content-between" (click)="toggleCollapse(); utilsService.stopPropagation($event)">
-        <span>{{'Questionnaire answers'|translate}}</span>
-        <span class="">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-        </span>
-    </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngFor="let questionnaire of tipService.tip.questionnaires;let index = index">
-            <div *ngIf="tipService.tip.questionnaires.length > 1">
-                <span>{{'Questionnaire'|translate}}</span>
-                <span>{{index + 1}}</span>
+  <div class="card-header d-flex justify-content-between" (click)="toggleCollapse(); utilsService.stopPropagation($event)">
+    <span>{{'Questionnaire answers'|translate}}</span>
+    <span class="">
+      @if (!collapsed) {
+        <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+      }
+      @if (collapsed) {
+        <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+      }
+    </span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      @for (questionnaire of tipService.tip.questionnaires; track questionnaire; let index = $index) {
+        <div>
+          @if (tipService.tip.questionnaires.length > 1) {
+            <div>
+              <span>{{'Questionnaire'|translate}}</span>
+              <span>{{index + 1}}</span>
             </div>
-            <div *ngFor="let step of questionnaire.steps | orderBy:'order'; let questionare_steps = index">
-                <dt id="step={{questionare_steps}}" *ngIf="questionnaire.steps.length > 1 && tipService.tip.context.show_steps_navigation_interface && step.enabled">
-                    <span>{{'Step'|translate}}</span>
-                    <span>{{questionare_steps + 1}}: {{step.label}}</span>
+          }
+          @for (step of questionnaire.steps | orderBy:'order'; track step; let questionare_steps = $index) {
+            <div>
+              @if (questionnaire.steps.length > 1 && tipService.tip.context.show_steps_navigation_interface && step.enabled) {
+                <dt id="step={{questionare_steps}}">
+                  <span>{{'Step'|translate}}</span>
+                  <span>{{questionare_steps + 1}}: {{step.label}}</span>
                 </dt>
-                <div *ngIf="step.enabled">
-                    <div *ngFor="let field of step.children | orderBy:['y', 'x']; let index_step = index">
-                        <ng-container>
-                            <src-tip-field [fieldAnswers]="questionnaire.answers" [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode" [fields]="field" [index]="index_step"></src-tip-field>
-                        </ng-container>
+              }
+              @if (step.enabled) {
+                <div>
+                  @for (field of step.children | orderBy:['y', 'x']; track field; let index_step = $index) {
+                    <div>
+                      <ng-container>
+                        <src-tip-field [fieldAnswers]="questionnaire.answers" [redactOperationTitle]="redactOperationTitle" [redactMode]="redactMode" [fields]="field" [index]="index_step"></src-tip-field>
+                      </ng-container>
                     </div>
+                  }
                 </div>
+              }
             </div>
+          }
         </div>
+      }
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.ts b/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.ts
index 70ac1327fc..f5cdd29b0b 100644
--- a/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.ts
+++ b/client/app/src/shared/partials/tip-questionnaire-answers/tip-questionnaire-answers.component.ts
@@ -1,21 +1,27 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 
+import { TipFieldComponent } from "../tip-field/tip-field.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+
 @Component({
-  selector: "src-tip-questionnaire-answers",
-  templateUrl: "./tip-questionnaire-answers.component.html"
+    selector: "src-tip-questionnaire-answers",
+    templateUrl: "./tip-questionnaire-answers.component.html",
+    standalone: true,
+    imports: [TipFieldComponent, TranslateModule, TranslatorPipe, OrderByPipe]
 })
 export class TipQuestionnaireAnswersComponent {
+  protected utilsService = inject(UtilsService);
+
   @Input() tipService: ReceiverTipService | WbtipService;
   @Input() redactOperationTitle: string;
   @Input() redactMode: boolean;
   collapsed = false;
 
-  constructor(protected utilsService: UtilsService) {
-  }
-
   public toggleCollapse() {
     this.collapsed = !this.collapsed;
   }
diff --git a/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.html b/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.html
index 55c99a6be1..b11b69b146 100644
--- a/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.html
+++ b/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.html
@@ -1,14 +1,22 @@
 <div id="TipPageReceiversInfoBox" class="card card-default" [attr.aria-expanded]="collapsed">
-    <div class="card-header d-flex justify-content-between" (click)="toggleCollapse();utilsService.stopPropagation($event)">
-        <span>{{'Recipients'|translate}}</span>
-        <span class="">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-        </span>
-    </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngFor="let receiver of tipService.tip.receivers">
-            <div>{{tipService.tip.receivers_by_id[receiver.id].name}}</div>
+  <div class="card-header d-flex justify-content-between" (click)="toggleCollapse();utilsService.stopPropagation($event)">
+    <span>{{'Recipients'|translate}}</span>
+    <span class="">
+      @if (!collapsed) {
+        <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+      }
+      @if (collapsed) {
+        <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+      }
+    </span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      @for (receiver of tipService.tip.receivers; track receiver) {
+        <div>
+          <div>{{tipService.tip.receivers_by_id[receiver.id].name}}</div>
         </div>
+      }
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.ts b/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.ts
index 4811f1b727..ce07c23998 100644
--- a/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.ts
+++ b/client/app/src/shared/partials/tip-receiver-list/tip-receiver-list.component.ts
@@ -1,19 +1,23 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {ReceiverTipService} from "@app/services/helper/receiver-tip.service";
 
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-tip-receiver-list",
-  templateUrl: "./tip-receiver-list.component.html"
+    selector: "src-tip-receiver-list",
+    templateUrl: "./tip-receiver-list.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class TipReceiverListComponent {
+  protected utilsService = inject(UtilsService);
+
   collapsed = false;
   @Input() tipService: ReceiverTipService | WbtipService;
 
-  constructor(protected utilsService: UtilsService) {
-  }
-
   public toggleCollapse() {
     this.collapsed = !this.collapsed;
   }
diff --git a/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.html b/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.html
index f74bf62a9d..3d0b6e13af 100644
--- a/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.html
+++ b/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.html
@@ -1,43 +1,55 @@
 <div id="TipPageRFileUpload" class="card card-default" [attr.aria-expanded]="collapsed">
-    <div class="card-header clearfix" (click)="collapsed = !collapsed; utilsService.stopPropagation($event);">
-        <span>{{'Files attached by recipients'|translate}}</span>
-        <span class="float-end">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" [title]="'Collapse' | translate"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" [title]="'Expand' | translate"></i>
-        </span>
-    </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngFor="let rfile of tip.rfiles | filter : 'visibility' : key | orderBy: 'creation_date' as index">
-            <div id="rfile-{{index}}" data-wbfile data-ctx="'rtip'">
-                <src-wbfiles [ctx]="'rtip'" (dataToParent)="listenToWbfiles($event)" [receivers_by_id]="{}" [wbFile]="rfile"></src-wbfiles>
-            </div>
+  <div class="card-header clearfix" (click)="collapsed = !collapsed; utilsService.stopPropagation($event);">
+    <span>{{'Files attached by recipients'|translate}}</span>
+    <span class="float-end">
+      @if (!collapsed) {
+        <i class="fa-solid fa-chevron-up" data-toggle="tooltip" [title]="'Collapse' | translate"></i>
+      }
+      @if (collapsed) {
+        <i class="fa-solid fa-chevron-down" data-toggle="tooltip" [title]="'Expand' | translate"></i>
+      }
+    </span>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      @for (rfile of tip.rfiles | filter : 'visibility' : key | orderBy: 'creation_date'; track rfile; let index = $index) {
+        <div>
+          <div id="rfile-{{index}}" data-wbfile data-ctx="'rtip'">
+            <src-wbfiles [ctx]="'rtip'" (dataToParent)="listenToWbfiles($event)" [receivers_by_id]="{}" [wbFile]="rfile"></src-wbfiles>
+          </div>
         </div>
-        <div *ngIf="tip.status !== 'closed'">
-            <div>{{'Upload a file:'|translate}}</div>
-            <div class="form">
-                <div class="input-group">
-                    <span class="input-group-prepend">
-                        <span class="input-group-text rounded-end-0">{{'Description'|translate}}</span>
-                    </span>
-                    <input type="text" class="form-control" id="upload_description" [(ngModel)]="file_upload_description" />
-                    <span class="input-group-append" [ngClass]="{'disabled': !file_upload_description}">
-                        <input #uploader [attr.id]="fileInput" id="customFile" type="file" flowButton [style.display]="'none'" class="custom-file-input" (change)="onFileSelected(uploader.files)" />
-                        <label [attr.for]="fileInput" for="customFile" class="btn btn-primary rounded-start-0 m-0">
-                            <i class="fa-solid fa-upload "></i>
-                            <span>{{'Upload'|translate}}</span>
-                        </label>
-                    </span>
-                </div>
-                <div *ngIf="showError">
-                    <br>
-                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                        <div>
-                            <span>{{'File size not accepted.'|translate}}</span> {{errorFile?.name}} {{'Maximum file size is:' | translate}} {{appDataService.public.node.maximum_filesize}} MB
-                        </div>
-                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismissError();errorFile?.cancel(); showError=false"></button>
+      }
+      @if (tip.status !== 'closed') {
+        <div>
+          <div>{{'Upload a file:'|translate}}</div>
+          <div class="form">
+            <div class="input-group">
+              <span class="input-group-prepend">
+                <span class="input-group-text rounded-end-0">{{'Description'|translate}}</span>
+              </span>
+              <input type="text" class="form-control" id="upload_description" [(ngModel)]="file_upload_description" />
+              <span class="input-group-append" [ngClass]="{'disabled': !file_upload_description}">
+                <input #uploader [attr.id]="fileInput" id="customFile" type="file" flowButton [style.display]="'none'" class="custom-file-input" (change)="onFileSelected(uploader.files)" />
+                <label [attr.for]="fileInput" for="customFile" class="btn btn-primary rounded-start-0 m-0">
+                  <i class="fa-solid fa-upload "></i>
+                  <span>{{'Upload'|translate}}</span>
+                </label>
+              </span>
+            </div>
+            @if (showError) {
+              <div>
+                <br>
+                  <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                    <div>
+                      <span>{{'File size not accepted.'|translate}}</span> {{errorFile?.name}} {{'Maximum file size is:' | translate}} {{appDataService.public.node.maximum_filesize}} MB
                     </div>
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismissError();errorFile?.cancel(); showError=false"></button>
+                  </div>
                 </div>
+              }
             </div>
-        </div>
-    </div>
-</div>
+          </div>
+        }
+      </div>
+    }
+  </div>
diff --git a/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.ts b/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.ts
index c037d3b5d4..8cf1699004 100644
--- a/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.ts
+++ b/client/app/src/shared/partials/tip-upload-wbfile/tip-upload-wb-file.component.ts
@@ -1,16 +1,31 @@
-import {Component, Input, ViewChild, ElementRef, ChangeDetectorRef, EventEmitter, Output} from "@angular/core";
+import { Component, Input, ViewChild, ElementRef, ChangeDetectorRef, EventEmitter, Output, inject } from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AppDataService} from "@app/app-data.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import * as Flow from "@flowjs/flow.js";
 import {RecieverTipData} from "@app/models/reciever/reciever-tip-data";
 import {FlowFile} from "@flowjs/flow.js";
+import { NgClass } from "@angular/common";
+import { WbFilesComponent } from "../wbfiles/wb-files.component";
+import { FormsModule } from "@angular/forms";
+import { NgxFlowModule } from "@flowjs/ngx-flow";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+import { FilterPipe } from "@app/shared/pipes/filter.pipe";
 
 @Component({
-  selector: "src-tip-upload-wbfile",
-  templateUrl: "./tip-upload-wb-file.component.html"
+    selector: "src-tip-upload-wbfile",
+    templateUrl: "./tip-upload-wb-file.component.html",
+    standalone: true,
+    imports: [WbFilesComponent, FormsModule, NgClass, NgxFlowModule, TranslateModule, TranslatorPipe, OrderByPipe, FilterPipe]
 })
 export class TipUploadWbFileComponent {
+  private cdr = inject(ChangeDetectorRef);
+  private authenticationService = inject(AuthenticationService);
+  protected utilsService = inject(UtilsService);
+  protected appDataService = inject(AppDataService);
+
   @ViewChild('uploader') uploaderInput: ElementRef<HTMLInputElement>;
   @Input() tip: RecieverTipData;
   @Input() key: string;
@@ -21,10 +36,6 @@ export class TipUploadWbFileComponent {
   showError: boolean = false;
   errorFile: FlowFile | null;
 
-  constructor(private cdr: ChangeDetectorRef, private authenticationService: AuthenticationService, protected utilsService: UtilsService, protected appDataService: AppDataService) {
-
-  }
-
   onFileSelected(files: FileList | null) {
     if (files && files.length > 0) {
       const file = files[0];
diff --git a/client/app/src/shared/partials/user-home/user-home.component.html b/client/app/src/shared/partials/user-home/user-home.component.html
index 51fb2c7186..2ff9de2861 100644
--- a/client/app/src/shared/partials/user-home/user-home.component.html
+++ b/client/app/src/shared/partials/user-home/user-home.component.html
@@ -15,7 +15,7 @@
             <span>
                 {{'If you want to contribute to software development or report a bug, please open an issue in our ticketing system:' | translate}}
             </span>
-            <a href="https://issues.globaleaks.org" rel="noreferrer" target="_blank">issues.globaleaks.org</a>
+            <a href="https://github.com/globaleaks/whistleblowing-software/issues/" rel="noreferrer" target="_blank">github.com/globaleaks/whistleblowing-software/issues</a>
         </li>
         <li>
             <span>{{'Join our chat:' | translate}}</span>
diff --git a/client/app/src/shared/partials/user-home/user-home.component.ts b/client/app/src/shared/partials/user-home/user-home.component.ts
index d8ba62fec9..5b19b575a1 100644
--- a/client/app/src/shared/partials/user-home/user-home.component.ts
+++ b/client/app/src/shared/partials/user-home/user-home.component.ts
@@ -1,8 +1,13 @@
 import {Component} from "@angular/core";
+import { UserWarningsComponent } from "../user-warnings/user-warnings.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
 
 @Component({
-  selector: "src-user-home",
-  templateUrl: "./user-home.component.html"
+    selector: "src-user-home",
+    templateUrl: "./user-home.component.html",
+    standalone: true,
+    imports: [UserWarningsComponent, TranslateModule, TranslatorPipe]
 })
 export class UserHomeComponent {
 }
diff --git a/client/app/src/shared/partials/user-warnings/user-warnings.component.html b/client/app/src/shared/partials/user-warnings/user-warnings.component.html
index ad35c1a893..6382294a79 100644
--- a/client/app/src/shared/partials/user-warnings/user-warnings.component.html
+++ b/client/app/src/shared/partials/user-warnings/user-warnings.component.html
@@ -1,15 +1,22 @@
-<div id="UserWarnings" *ngIf="authentication.session" role="alert">
-    <div class="alert alert-secondary" *ngIf="authentication.session.role === 'admin' && nodeResolver.dataModel.update_available">
+@if (authentication.session) {
+  <div id="UserWarnings" role="alert">
+    @if (authentication.session.role === 'admin' && nodeResolver.dataModel.update_available) {
+      <div class="alert alert-secondary">
         <i class="fa-solid fa-exclamation-circle"></i>
         <span>{{'An update is available:' | translate}}</span>
         <span>
-            <a href="https://github.com/globaleaks/globaleaks-whistleblowing-software/blob/main/CHANGELOG" rel="noreferrer" target="_blank">{{nodeResolver.dataModel.latest_version}} (<span>{{'Changelog' | translate}}</span>)</a>
-        </span>
-    </div>
-    <div class="alert alert-secondary" *ngIf="preferenceResolver.dataModel.encryption && !preferenceResolver.dataModel.clicked_recovery_key">
-        <i class="fa-solid fa-exclamation-circle"></i>
-        <span>
+          <a href="https://github.com/globaleaks/whistleblowing-software/blob/main/CHANGELOG" rel="noreferrer" target="_blank">
+            {{nodeResolver.dataModel.latest_version}} ( <span>{{'Changelog' | translate}}</span>) </a>
+          </span>
+        </div>
+      }
+      @if (preferenceResolver.dataModel.encryption && !preferenceResolver.dataModel.clicked_recovery_key) {
+        <div class="alert alert-secondary">
+          <i class="fa-solid fa-exclamation-circle"></i>
+          <span>
             {{'We recommend that you access the “Preferences” section in order to retrieve your “Account Recovery Key” and store it safely. This key will be necessary to recover your access to the platform and to your data in case you forget your password.' | translate}}
-        </span>
+          </span>
+        </div>
+      }
     </div>
-</div>
+  }
\ No newline at end of file
diff --git a/client/app/src/shared/partials/user-warnings/user-warnings.component.ts b/client/app/src/shared/partials/user-warnings/user-warnings.component.ts
index 4fdb8dd8b0..818e0657ee 100644
--- a/client/app/src/shared/partials/user-warnings/user-warnings.component.ts
+++ b/client/app/src/shared/partials/user-warnings/user-warnings.component.ts
@@ -1,14 +1,19 @@
-import {Component} from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {PreferenceResolver} from "@app/shared/resolvers/preference.resolver";
 import {NodeResolver} from "@app/shared/resolvers/node.resolver";
 
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-user-warnings",
-  templateUrl: "./user-warnings.component.html"
+    selector: "src-user-warnings",
+    templateUrl: "./user-warnings.component.html",
+    standalone: true,
+    imports: [TranslateModule, TranslatorPipe]
 })
 export class UserWarningsComponent {
-
-  constructor(protected authentication: AuthenticationService, protected preferenceResolver: PreferenceResolver, protected nodeResolver: NodeResolver) {
-  }
+  protected authentication = inject(AuthenticationService);
+  protected preferenceResolver = inject(PreferenceResolver);
+  protected nodeResolver = inject(NodeResolver);
 }
diff --git a/client/app/src/shared/partials/voice-recorder/voice-recorder.component.html b/client/app/src/shared/partials/voice-recorder/voice-recorder.component.html
index f988833812..06a1faf27a 100644
--- a/client/app/src/shared/partials/voice-recorder/voice-recorder.component.html
+++ b/client/app/src/shared/partials/voice-recorder/voice-recorder.component.html
@@ -1,33 +1,45 @@
-<div class="audio-box" *ngIf="authenticationService.session">
+@if (authenticationService.session) {
+  <div class="audio-box">
     <div class="row">
-        <div class="col-md-6">
-            <button class="btn" id="start_recording" [ngClass]="{'text-secondary': !activeButton, 'text-danger': activeButton === 'record' }" [disabled]="isRecording || uploads[fileInput]?.files.length" (click)="triggerRecording(field.id)" aria-label="Record a voice message">
-                <i class="fas fa-microphone"></i>
-            </button>
-            <button class="btn" id="stop_recording" *ngIf="activeButton === 'record'" (click)="onStop()" aria-label="Stop Recording">
-                <i class="fas fa-stop"></i>
-            </button>
-        </div>
-        <div class="col-md-6 text-end">
-            <button class="btn text-danger" [ngClass]="{'blink': activeButton === 'record'}" *ngIf="activeButton === 'record'" aria-label="Recording Indicator">
-                <i class="fas fa-circle-dot"></i>
-            </button>
-            <button class="btn text-danger" *ngIf="!isRecording && seconds" id="delete_recording" (click)="deleteRecording()" aria-label="Delete Recording">
-                <i class="fas fa-trash"></i>
-            </button>
-        </div>
+      <div class="col-md-6">
+        <button class="btn" id="start_recording" [ngClass]="{'text-secondary': !activeButton, 'text-danger': activeButton === 'record' }" [disabled]="isRecording || uploads[fileInput]?.files.length" (click)="triggerRecording(field.id)" aria-label="Record a voice message">
+          <i class="fas fa-microphone"></i>
+        </button>
+        @if (activeButton === 'record') {
+          <button class="btn" id="stop_recording" (click)="onStop()" aria-label="Stop Recording">
+            <i class="fas fa-stop"></i>
+          </button>
+        }
+      </div>
+      <div class="col-md-6 text-end">
+        @if (activeButton === 'record') {
+          <button class="btn text-danger" [ngClass]="{'blink': activeButton === 'record'}" aria-label="Recording Indicator">
+            <i class="fas fa-circle-dot"></i>
+          </button>
+        }
+        @if (!isRecording && seconds) {
+          <button class="btn text-danger" id="delete_recording" (click)="deleteRecording()" aria-label="Delete Recording">
+            <i class="fas fa-trash"></i>
+          </button>
+        }
+      </div>
     </div>
     <div class="row">
-        <div class="col-md-12">
-            <input class="d-none" [attr.id]="'customFile-' + fileInput" [(ngModel)]="_fakeModel" [required]="field && field.required && !uploads[fileInput]?.files.length" [name]="'input-' + entryIndex" type="file" />
-            <iframe #viewer *ngIf="audioPlayer" id="{{fieldEntry}}-audio" class="audio-player-iframe" sandbox="allow-downloads allow-scripts" [src]="iframeUrl" ></iframe>
-        </div>
+      <div class="col-md-12">
+        <input class="d-none" [attr.id]="'customFile-' + fileInput" [(ngModel)]="_fakeModel" [required]="field && field.required && !uploads[fileInput]?.files.length" [name]="'input-' + entryIndex" type="file" />
+        @if (audioPlayer) {
+          <iframe #viewer id="{{fieldEntry}}-audio" class="audio-player-iframe" sandbox="allow-downloads allow-scripts" [src]="iframeUrl" ></iframe>
+        }
+      </div>
     </div>
-    <div class="row" *ngIf="seconds > 0">
+    @if (seconds > 0) {
+      <div class="row">
         <div class="col-md-12 text-end">
-            <div class="btn" [ngClass]="{'text-danger': seconds < parseInt(field.attrs.min_len.value)}">
-                {{ seconds }}/{{ field.attrs.max_len.value }}
-            </div>
+          <div class="btn" [ngClass]="{'text-danger': seconds < parseInt(field.attrs.min_len.value)}">
+            {{ seconds }}/{{ field.attrs.max_len.value }}
+          </div>
         </div>
-    </div>
-</div>
\ No newline at end of file
+      </div>
+    }
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/voice-recorder/voice-recorder.component.ts b/client/app/src/shared/partials/voice-recorder/voice-recorder.component.ts
index b83d57fab1..323def464d 100644
--- a/client/app/src/shared/partials/voice-recorder/voice-recorder.component.ts
+++ b/client/app/src/shared/partials/voice-recorder/voice-recorder.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, inject } from "@angular/core";
 import * as Flow from "@flowjs/flow.js";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {SubmissionService} from "@app/services/helper/submission.service";
@@ -6,12 +6,22 @@ import {Observable} from "rxjs";
 import {Field} from "@app/models/resolvers/field-template-model";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 import { UtilsService } from "@app/shared/services/utils.service";
+import { NgClass } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
-  selector: "src-voice-recorder",
-  templateUrl: "./voice-recorder.component.html"
+    selector: "src-voice-recorder",
+    templateUrl: "./voice-recorder.component.html",
+    standalone: true,
+    imports: [NgClass, FormsModule]
 })
 export class VoiceRecorderComponent implements OnInit {
+  private cd = inject(ChangeDetectorRef);
+  private utilsService = inject(UtilsService);
+  private sanitizer = inject(DomSanitizer);
+  protected authenticationService = inject(AuthenticationService);
+  private submissionService = inject(SubmissionService);
+
   @Input() uploads: any;
   @Input() field: Field;
   @Input() fileUploadUrl: string;
@@ -38,9 +48,6 @@ export class VoiceRecorderComponent implements OnInit {
   iframeUrl: SafeResourceUrl;
   @ViewChild("viewer") viewerFrame: ElementRef;
 
-  constructor(private cd: ChangeDetectorRef,private utilsService: UtilsService,private sanitizer: DomSanitizer, protected authenticationService: AuthenticationService, private submissionService: SubmissionService) {
-  }
-
   ngOnInit(): void {
     this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl("viewer/index.html");
     this.fileInput = this.field ? this.field.id : "status_page";
diff --git a/client/app/src/shared/partials/wbfiles/wb-files.component.html b/client/app/src/shared/partials/wbfiles/wb-files.component.html
index 16fe332eb3..5811609208 100644
--- a/client/app/src/shared/partials/wbfiles/wb-files.component.html
+++ b/client/app/src/shared/partials/wbfiles/wb-files.component.html
@@ -1,41 +1,51 @@
 <div class="whistle-blower-file card card-default">
-    <div class="card-body">
-        <div class="top-row clearfix">
-            <span class="float-start">
-                <span class="text-muted" *ngIf="ctx === 'download'">
-                    <span>{{'Filename'|translate}}</span>: </span>
-                <span class="filename px-1">{{wbFile.name}}</span>
+  <div class="card-body">
+    <div class="top-row clearfix">
+      <span class="float-start">
+        @if (ctx === 'download') {
+          <span class="text-muted">
+            <span>{{'Filename'|translate}}</span>: </span>
+          }
+          <span class="filename px-1">{{wbFile.name}}</span>
+        </span>
+        <span class="float-end">
+          <span>
+            <span class="download-button btn btn-sm btn-primary" (click)="downloadWBFile(wbFile)">
+              <i class="fa-solid fa-download"></i>
             </span>
-            <span class="float-end">
-                <span>
-                    <span class="download-button btn btn-sm btn-primary" (click)="downloadWBFile(wbFile)">
-                        <i class="fa-solid fa-download"></i>
-                    </span>
-                    <button *ngIf="authenticationService.session?.role === 'receiver'" class="btn btn-sm btn-danger" (click)="deleteWBFile(wbFile)">
-                        <i class="fa-solid fa-trash"></i>
-                    </button>
-                </span>
-            </span>
-        </div>
-        <div class="file-info-row">
-            <span *ngIf="receivers_by_id[wbFile.author]">
-                <span>{{'From'|translate}}</span>: <span>{{receivers_by_id[wbFile.author].name}}</span>
-            </span>
-            <span class="px-1">
-                <span>{{'Date'|translate}}</span>: <span>{{wbFile.creation_date | date:'dd-MM-yyyy HH:MM'}}</span>
-            </span>
-            <span class="px-1">
-                <span>{{'Size:'|translate}}</span>
-                <span>{{wbFile.size | byteFmt:2}}</span>
-            </span>
-            <span class="px-1" *ngIf="ctx === 'rtip'">
-                <span>{{'Number of downloads'|translate}}</span>: <span>{{wbFile.downloads}}</span>
-            </span>
-        </div>
-        <div *ngIf="wbFile.description">
-            <span>
-                <span class="px-1">{{'Description'|translate}}</span>: </span>
+            @if (authenticationService.session?.role === 'receiver') {
+              <button class="btn btn-sm btn-danger" (click)="deleteWBFile(wbFile)">
+                <i class="fa-solid fa-trash"></i>
+              </button>
+            }
+          </span>
+        </span>
+      </div>
+      <div class="file-info-row">
+        @if (receivers_by_id[wbFile.author]) {
+          <span>
+            <span>{{'From'|translate}}</span>: <span>{{receivers_by_id[wbFile.author].name}}</span>
+          </span>
+        }
+        <span class="px-1">
+          <span>{{'Date'|translate}}</span>: <span>{{wbFile.creation_date | date:'dd-MM-yyyy HH:MM'}}</span>
+        </span>
+        <span class="px-1">
+          <span>{{'Size:'|translate}}</span>
+          <span>{{wbFile.size | byteFmt:2}}</span>
+        </span>
+        @if (ctx === 'rtip') {
+          <span class="px-1">
+            <span>{{'Number of downloads'|translate}}</span>: <span>{{wbFile.downloads}}</span>
+          </span>
+        }
+      </div>
+      @if (wbFile.description) {
+        <div>
+          <span>
+            <span class="px-1">{{'Description'|translate}}</span>: </span>
             <span> {{wbFile.description}} </span>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+          </div>
+        }
+      </div>
+    </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/wbfiles/wb-files.component.ts b/client/app/src/shared/partials/wbfiles/wb-files.component.ts
index 048ae65f31..ca432c9138 100644
--- a/client/app/src/shared/partials/wbfiles/wb-files.component.ts
+++ b/client/app/src/shared/partials/wbfiles/wb-files.component.ts
@@ -1,24 +1,32 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {HttpService} from "@app/shared/services/http.service";
 import {CryptoService} from "@app/shared/services/crypto.service";
 import {RFile} from "@app/models/app/shared-public-model";
 import {ReceiversById} from "@app/models/reciever/reciever-tip-data";
+import { DatePipe } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { ByteFmtPipe } from "@app/shared/pipes/byte-fmt.pipe";
 
 @Component({
-  selector: "src-wbfiles",
-  templateUrl: "./wb-files.component.html"
+    selector: "src-wbfiles",
+    templateUrl: "./wb-files.component.html",
+    standalone: true,
+    imports: [DatePipe, TranslateModule, TranslatorPipe, ByteFmtPipe]
 })
 export class WbFilesComponent implements OnInit {
+  private appDataService = inject(AppDataService);
+  private cryptoService = inject(CryptoService);
+  private httpService = inject(HttpService);
+  protected authenticationService = inject(AuthenticationService);
+
   @Input() wbFile: RFile;
   @Input() ctx: string;
   @Input() receivers_by_id: ReceiversById;
   @Output() dataToParent = new EventEmitter<any>();
 
-  constructor(private appDataService: AppDataService, private cryptoService: CryptoService, private httpService: HttpService, protected authenticationService: AuthenticationService) {
-  }
-
   ngOnInit(): void {
   }
 
diff --git a/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.html b/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.html
index 0c89cfb311..be4fec9778 100644
--- a/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.html
+++ b/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.html
@@ -1,41 +1,65 @@
 <div id="TipInfoBox" class="card card-default">
-    <div class="card-header" (click)="toggleCollapse(); utilsService.stopPropagation($event)">
-        <div>
-            <span class="d-flex justify-content-between">
-                <span>
-                    <span *ngIf="wbTipService.tip.data.whistleblower_identity">{{'Identity'|translate}}</span>
-                    <span *ngIf="!wbTipService.tip.data.whistleblower_identity">{{wbTipService.tip.whistleblower_identity_field.label}}</span>
-                    <span *ngIf="wbTipService.tip.data.whistleblower_identity_provided" class="btn btn-sm btn-link">
-                        <span *ngIf="collapsed">{{'Show'|translate}}</span>
-                        <span *ngIf="!collapsed">{{'Hide'|translate}}</span>
-                    </span>
-                </span>
-                <span class="float-end">
-                    <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-                    <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-                </span>
+  <div class="card-header" (click)="toggleCollapse(); utilsService.stopPropagation($event)">
+    <div>
+      <span class="d-flex justify-content-between">
+        <span>
+          @if (wbTipService.tip.data.whistleblower_identity) {
+            <span>{{'Identity'|translate}}</span>
+          }
+          @if (!wbTipService.tip.data.whistleblower_identity) {
+            <span>{{wbTipService.tip.whistleblower_identity_field.label}}</span>
+          }
+          @if (wbTipService.tip.data.whistleblower_identity_provided) {
+            <span class="btn btn-sm btn-link">
+              @if (collapsed) {
+                <span>{{'Show'|translate}}</span>
+              }
+              @if (!collapsed) {
+                <span>{{'Hide'|translate}}</span>
+              }
             </span>
-        </div>
+          }
+        </span>
+        <span class="float-end">
+          @if (!collapsed) {
+            <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+          }
+          @if (collapsed) {
+            <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+          }
+        </span>
+      </span>
     </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngIf="wbTipService.tip.data.whistleblower_identity">
-            <div *ngFor="let field of wbTipService.tip.whistleblower_identity_field.children; let index = index">
-                <src-tip-field [fields]=field [fieldAnswers]=wbTipService.tip.data.whistleblower_identity [index]="index"></src-tip-field>
+  </div>
+  @if (!collapsed) {
+    <div class="card-body">
+      @if (wbTipService.tip.data.whistleblower_identity) {
+        <div>
+          @for (field of wbTipService.tip.whistleblower_identity_field.children; track field; let index = $index) {
+            <div>
+              <src-tip-field [fields]=field [fieldAnswers]=wbTipService.tip.data.whistleblower_identity [index]="index"></src-tip-field>
             </div>
+          }
         </div>
-        <div *ngIf="wbTipService.tip.status !== 'closed' && !wbTipService.tip.data.whistleblower_identity">
-            <form #wbform="ngForm" ngFormChanges (ngFormChange)="onFormChange()">
-                <ng-container *ngIf="identity_provided">
-                    <src-whistleblower-identity-field [step]="step" (notifyFileUpload)="notifyFileUpload.emit()" (stateChanged)="stateChanged($event)" [identity_provided]="identity_provided" [answers]="answers" [field]="field" [index]="0"></src-whistleblower-identity-field>
-                </ng-container>
-                <src-rfiles-upload-status [progress]="uploadProgress" [estimatedTime]="uploadEstimateTime" [uploading]="isUploading"></src-rfiles-upload-status>
-                <div id="SubmitBox">
-                    <button *ngIf="identity_provided" id="SubmitButton" class="btn btn-primary float-end" (click)="provideIdentityInformation.emit({ param1: field.id, param2: answers })" [disabled]="wbform.invalid" type="submit">
-                        <i id="SubmitIconOK" class="fa-solid fa-check"></i>
-                        <span>{{'Submit'|translate}}</span>
-                    </button>
-                </div>
-            </form>
+      }
+      @if (wbTipService.tip.status !== 'closed' && !wbTipService.tip.data.whistleblower_identity) {
+        <div>
+          <form #wbform="ngForm" ngFormChanges (ngFormChange)="onFormChange()">
+            @if (identity_provided) {
+              <src-whistleblower-identity-field [step]="step" (notifyFileUpload)="notifyFileUpload.emit()" (stateChanged)="stateChanged($event)" [identity_provided]="identity_provided" [answers]="answers" [field]="field" [index]="0"></src-whistleblower-identity-field>
+            }
+            <src-rfiles-upload-status [progress]="uploadProgress" [estimatedTime]="uploadEstimateTime" [uploading]="isUploading"></src-rfiles-upload-status>
+            <div id="SubmitBox">
+              @if (identity_provided) {
+                <button id="SubmitButton" class="btn btn-primary float-end" (click)="provideIdentityInformation.emit({ param1: field.id, param2: answers })" [disabled]="wbform.invalid" type="submit">
+                  <i id="SubmitIconOK" class="fa-solid fa-check"></i>
+                  <span>{{'Submit'|translate}}</span>
+                </button>
+              }
+            </div>
+          </form>
         </div>
+      }
     </div>
+  }
 </div>
\ No newline at end of file
diff --git a/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.ts b/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.ts
index a27f0af3b5..0c0c807a77 100644
--- a/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.ts
+++ b/client/app/src/shared/partials/whistleblower-identity/whistleblower-identity.component.ts
@@ -1,13 +1,26 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import {Answers} from "@app/models/reciever/reciever-tip-data";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 
+import { TipFieldComponent } from "../tip-field/tip-field.component";
+import { FormsModule } from "@angular/forms";
+import { NgFormChangeDirective } from "../../directive/ng-form-change.directive";
+import { WhistleblowerIdentityFieldComponent } from "../../../pages/whistleblower/fields/whistleblower-identity-field/whistleblower-identity-field.component";
+import { RFilesUploadStatusComponent } from "../rfiles-upload-status/r-files-upload-status.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+
 @Component({
-  selector: "src-whistleblower-identity",
-  templateUrl: "./whistleblower-identity.component.html"
+    selector: "src-whistleblower-identity",
+    templateUrl: "./whistleblower-identity.component.html",
+    standalone: true,
+    imports: [TipFieldComponent, FormsModule, NgFormChangeDirective, WhistleblowerIdentityFieldComponent, RFilesUploadStatusComponent, TranslateModule, TranslatorPipe]
 })
 export class WhistleblowerIdentityComponent {
+  protected wbTipService = inject(WbtipService);
+  protected utilsService = inject(UtilsService);
+
   @Input() field: any;
   @Input() step: any;
   @Input() answers: Answers;
@@ -23,7 +36,7 @@ export class WhistleblowerIdentityComponent {
   protected readonly JSON = JSON;
   identity_provided: boolean = true;
 
-  constructor(protected wbTipService: WbtipService, protected utilsService: UtilsService) {
+  constructor() {
     this.collapsed = this.wbTipService.tip.data.whistleblower_identity_provided;
   }
 
diff --git a/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.html b/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.html
index 2b373353c5..83651da802 100644
--- a/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.html
+++ b/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.html
@@ -1,16 +1,26 @@
-<div id="AttachedWBFile" class="card card-default" *ngIf="wbTipService.tip.rfiles.length>0">
+@if (wbTipService.tip.rfiles.length>0) {
+  <div id="AttachedWBFile" class="card card-default">
     <div class="card-header clearfix" (click)="toggleCollapse(); utilsService.stopPropagation($event);">
-        <span>{{'Files attached by recipients'|translate}}</span>
-        <span class="float-end">
-            <i *ngIf="!collapsed" class="fa-solid fa-chevron-up" title="{{'Collapse' | translate}}"></i>
-            <i *ngIf="collapsed" class="fa-solid fa-chevron-down" title="{{'Expand' | translate}}"></i>
-        </span>
+      <span>{{'Files attached by recipients'|translate}}</span>
+      <span class="float-end">
+        @if (!collapsed) {
+          <i class="fa-solid fa-chevron-up" data-toggle="tooltip" title="{{'Collapse' | translate}}"></i>
+        }
+        @if (collapsed) {
+          <i class="fa-solid fa-chevron-down" data-toggle="tooltip" title="{{'Expand' | translate}}"></i>
+        }
+      </span>
     </div>
-    <div class="card-body" *ngIf="!collapsed">
-        <div *ngFor="let wbfile of wbTipService.tip.rfiles | orderBy: 'creation_date'">
+    @if (!collapsed) {
+      <div class="card-body">
+        @for (wbfile of wbTipService.tip.rfiles | orderBy: 'creation_date'; track wbfile) {
+          <div>
             <div id="rfile-{{index}}">
-                <src-wbfiles [ctx]="ctx" (dataToParent)="listenToWbfiles($event)" [receivers_by_id]="receivers_by_id" [wbFile]="wbfile"></src-wbfiles>
+              <src-wbfiles [ctx]="ctx" (dataToParent)="listenToWbfiles($event)" [receivers_by_id]="receivers_by_id" [wbFile]="wbfile"></src-wbfiles>
             </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+          </div>
+        }
+      </div>
+    }
+  </div>
+}
\ No newline at end of file
diff --git a/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.ts b/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.ts
index 4f879093ef..dc523b5138 100644
--- a/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.ts
+++ b/client/app/src/shared/partials/widget-wbfiles/widget-wb-files.component.ts
@@ -1,13 +1,23 @@
-import {Component, Input} from "@angular/core";
+import { Component, Input, inject } from "@angular/core";
 import {ReceiversById} from "@app/models/reciever/reciever-tip-data";
 import {WbtipService} from "@app/services/helper/wbtip.service";
 import {UtilsService} from "@app/shared/services/utils.service";
 
+import { WbFilesComponent } from "../wbfiles/wb-files.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { OrderByPipe } from "@app/shared/pipes/order-by.pipe";
+
 @Component({
-  selector: "src-widget-wbfiles",
-  templateUrl: "./widget-wb-files.component.html"
+    selector: "src-widget-wbfiles",
+    templateUrl: "./widget-wb-files.component.html",
+    standalone: true,
+    imports: [WbFilesComponent, TranslateModule, TranslatorPipe, OrderByPipe]
 })
 export class WidgetWbFilesComponent {
+  protected wbTipService = inject(WbtipService);
+  protected utilsService = inject(UtilsService);
+
 
   @Input() index: number;
   @Input() ctx: string;
@@ -16,9 +26,6 @@ export class WidgetWbFilesComponent {
   collapsed = false;
   submission = {};
 
-  constructor(protected wbTipService: WbtipService, protected utilsService: UtilsService) {
-  }
-
   public toggleCollapse() {
     this.collapsed = !this.collapsed;
   }
diff --git a/client/app/src/shared/pipes/byte-fmt.pipe.ts b/client/app/src/shared/pipes/byte-fmt.pipe.ts
index 597b4a7252..9544367dca 100644
--- a/client/app/src/shared/pipes/byte-fmt.pipe.ts
+++ b/client/app/src/shared/pipes/byte-fmt.pipe.ts
@@ -1,7 +1,8 @@
 import {Pipe, PipeTransform} from "@angular/core";
 
 @Pipe({
-  name: "byteFmt"
+    name: "byteFmt",
+    standalone: true
 })
 export class ByteFmtPipe implements PipeTransform {
 
diff --git a/client/app/src/shared/pipes/date.pipe.ts b/client/app/src/shared/pipes/date.pipe.ts
index 9007694b7f..68439b0f32 100644
--- a/client/app/src/shared/pipes/date.pipe.ts
+++ b/client/app/src/shared/pipes/date.pipe.ts
@@ -21,7 +21,8 @@ const predefinedFormats: Record<Formats, Intl.DateTimeFormatOptions> = {
 };
 
 @Pipe({
-  name: "datse",
+    name: "datse",
+    standalone: true,
 })
 
 export class DatePipe implements PipeTransform {
diff --git a/client/app/src/shared/pipes/filter-search.pipe.ts b/client/app/src/shared/pipes/filter-search.pipe.ts
index 1c70689fd1..1b6e498b67 100644
--- a/client/app/src/shared/pipes/filter-search.pipe.ts
+++ b/client/app/src/shared/pipes/filter-search.pipe.ts
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'search'
+    name: 'search',
+    standalone: true
 })
 export class FilterSearchPipe implements PipeTransform {
   transform(items: any[], searchText: string): any[] {
diff --git a/client/app/src/shared/pipes/filter.pipe.ts b/client/app/src/shared/pipes/filter.pipe.ts
index ac261536f0..53949dd9d8 100644
--- a/client/app/src/shared/pipes/filter.pipe.ts
+++ b/client/app/src/shared/pipes/filter.pipe.ts
@@ -1,7 +1,8 @@
 import {Pipe, PipeTransform} from "@angular/core";
 
 @Pipe({
-  name: "filter"
+    name: "filter",
+    standalone: true
 })
 export class FilterPipe implements PipeTransform {
   transform(items: any[], field: any, value: any): any[] {
diff --git a/client/app/src/shared/pipes/limit-to.pipe.ts b/client/app/src/shared/pipes/limit-to.pipe.ts
index 96ca1bcb5a..7459ec9a68 100644
--- a/client/app/src/shared/pipes/limit-to.pipe.ts
+++ b/client/app/src/shared/pipes/limit-to.pipe.ts
@@ -1,7 +1,8 @@
 import {Pipe, PipeTransform} from "@angular/core";
 
 @Pipe({
-  name: "limitTo"
+    name: "limitTo",
+    standalone: true
 })
 export class LimitToPipe implements PipeTransform {
 
diff --git a/client/app/src/shared/pipes/order-by.pipe.ts b/client/app/src/shared/pipes/order-by.pipe.ts
index d3fdf76a9d..4cc88cec2b 100644
--- a/client/app/src/shared/pipes/order-by.pipe.ts
+++ b/client/app/src/shared/pipes/order-by.pipe.ts
@@ -1,7 +1,8 @@
 import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
-  name: 'orderBy'
+    name: 'orderBy',
+    standalone: true
 })
 export class OrderByPipe implements PipeTransform {
   transform(value: any[], propertyName: string | string[], reverse: boolean = false): any[] {
diff --git a/client/app/src/shared/pipes/split.pipe.ts b/client/app/src/shared/pipes/split.pipe.ts
index 792832e942..96b4e4bbbe 100644
--- a/client/app/src/shared/pipes/split.pipe.ts
+++ b/client/app/src/shared/pipes/split.pipe.ts
@@ -1,7 +1,8 @@
 import {Pipe, PipeTransform} from "@angular/core";
 
 @Pipe({
-  name: "split"
+    name: "split",
+    standalone: true
 })
 export class SplitPipe implements PipeTransform {
   transform(val: string, params: [string, number]): string {
diff --git a/client/app/src/shared/pipes/strip-html.pipe.ts b/client/app/src/shared/pipes/strip-html.pipe.ts
index 3e6556e70d..3c74eac239 100644
--- a/client/app/src/shared/pipes/strip-html.pipe.ts
+++ b/client/app/src/shared/pipes/strip-html.pipe.ts
@@ -1,13 +1,12 @@
 import {Pipe, PipeTransform} from "@angular/core";
-import * as DOMPurify from 'dompurify';
 
 @Pipe({
-  name: "stripHtml"
+    name: "stripHtml",
+    standalone: true
 })
 export class StripHtmlPipe implements PipeTransform {
 
   transform(value: string): string {
-    // Use DOMPurify to sanitize input
-    return (DOMPurify as any).default.sanitize(value);
+    return value.replace(/<[^>]*>?/gm, "");
   }
-}
+}
\ No newline at end of file
diff --git a/client/app/src/shared/pipes/translate.ts b/client/app/src/shared/pipes/translate.ts
index aa5db2c19d..474b665c55 100644
--- a/client/app/src/shared/pipes/translate.ts
+++ b/client/app/src/shared/pipes/translate.ts
@@ -1,19 +1,25 @@
-import {Pipe, PipeTransform} from "@angular/core";
+import { Pipe, PipeTransform, inject } from "@angular/core";
 import {TranslateService} from "@ngx-translate/core";
 
 @Pipe({
-  name: "translate",
-  pure: false,
+    name: "translate",
+    pure: false,
+    standalone: true,
 })
 export class TranslatorPipe implements PipeTransform {
-  constructor(private translate: TranslateService) {
-  }
+  private translate = inject(TranslateService);
+
 
   transform(key: string): string {
-    let translation = key ? this.translate.instant(key) : '';
+    
+    if (!key) {
+      return key;
+    }
+
+    let translation = this.translate.instant(key);
 
     this.translate.onLangChange.subscribe(() => {
-      translation = key ? this.translate.instant(key) : '';
+      translation = this.translate.instant(key);
     });
 
     return translation;
diff --git a/client/app/src/shared/resolvers/audit-log-resolver.service.ts b/client/app/src/shared/resolvers/audit-log-resolver.service.ts
index e821587a84..5c6fe3e57c 100644
--- a/client/app/src/shared/resolvers/audit-log-resolver.service.ts
+++ b/client/app/src/shared/resolvers/audit-log-resolver.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {switchMap} from "rxjs/operators";
 import {HttpService} from "@app/shared/services/http.service";
@@ -9,10 +9,10 @@ import {auditlogResolverModel} from "@app/models/resolvers/auditlog-resolver-mod
   providedIn: "root"
 })
 export class AuditLogResolver {
-  dataModel: auditlogResolverModel = new auditlogResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: auditlogResolverModel = new auditlogResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/contexts.resolver.ts b/client/app/src/shared/resolvers/contexts.resolver.ts
index f1d4c2ec08..edbc9efb3a 100644
--- a/client/app/src/shared/resolvers/contexts.resolver.ts
+++ b/client/app/src/shared/resolvers/contexts.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {switchMap} from "rxjs/operators";
 import {HttpService} from "@app/shared/services/http.service";
@@ -9,10 +9,10 @@ import {contextResolverModel} from "@app/models/resolvers/context-resolver-model
   providedIn: "root"
 })
 export class ContextsResolver {
-  dataModel: contextResolverModel = new contextResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: contextResolverModel = new contextResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/field-templates-resolver.service.ts b/client/app/src/shared/resolvers/field-templates-resolver.service.ts
index 682eba8b93..0a0511a02e 100644
--- a/client/app/src/shared/resolvers/field-templates-resolver.service.ts
+++ b/client/app/src/shared/resolvers/field-templates-resolver.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {map} from "rxjs/operators";
 import {HttpService} from "@app/shared/services/http.service";
@@ -9,10 +9,10 @@ import {fieldtemplatesResolverModel} from "@app/models/resolvers/field-template-
   providedIn: "root"
 })
 export class FieldTemplatesResolver {
-  dataModel: fieldtemplatesResolverModel[];
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: fieldtemplatesResolverModel[];
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/iar-resolver.service.ts b/client/app/src/shared/resolvers/iar-resolver.service.ts
index 4e5a7afd7a..23d53f3a3d 100644
--- a/client/app/src/shared/resolvers/iar-resolver.service.ts
+++ b/client/app/src/shared/resolvers/iar-resolver.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {map} from "rxjs/operators";
 import {HttpService} from "@app/shared/services/http.service";
@@ -9,10 +9,10 @@ import {IarData} from "@app/models/reciever/Iar-data";
   providedIn: "root"
 })
 export class IarResolver {
-  dataModel: IarData[] = [];
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: IarData[] = [];
 
   reload() {
     this.httpService.iarResource().subscribe(
diff --git a/client/app/src/shared/resolvers/job.resolver.ts b/client/app/src/shared/resolvers/job.resolver.ts
index d8154f4eff..bb1f23cd01 100644
--- a/client/app/src/shared/resolvers/job.resolver.ts
+++ b/client/app/src/shared/resolvers/job.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {map} from "rxjs/operators";
 import {HttpService} from "@app/shared/services/http.service";
@@ -9,10 +9,10 @@ import {jobResolverModel} from "@app/models/resolvers/job-resolver-model";
   providedIn: "root"
 })
 export class JobResolver {
-  dataModel: jobResolverModel = new jobResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: jobResolverModel = new jobResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/network.resolver.ts b/client/app/src/shared/resolvers/network.resolver.ts
index f21ba35911..45a85e662a 100644
--- a/client/app/src/shared/resolvers/network.resolver.ts
+++ b/client/app/src/shared/resolvers/network.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,10 +9,10 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class NetworkResolver {
-  dataModel: networkResolverModel = new networkResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: networkResolverModel = new networkResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/node.resolver.ts b/client/app/src/shared/resolvers/node.resolver.ts
index 834c2671f2..fbf77237fd 100644
--- a/client/app/src/shared/resolvers/node.resolver.ts
+++ b/client/app/src/shared/resolvers/node.resolver.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { PreferenceResolver } from "@app/shared/resolvers/preference.resolver";
 import { Observable, of, throwError } from "rxjs";
 import { HttpService } from "@app/shared/services/http.service";
@@ -11,14 +11,12 @@ import {Router} from "@angular/router";
   providedIn: "root"
 })
 export class NodeResolver {
-  dataModel: nodeResolverModel = new nodeResolverModel();
+  private router = inject(Router);
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
+  private preferenceResolver = inject(PreferenceResolver);
 
-  constructor(
-      private router: Router,
-      private httpService: HttpService,
-      private authenticationService: AuthenticationService,
-      private preferenceResolver: PreferenceResolver
-  ) {}
+  dataModel: nodeResolverModel = new nodeResolverModel();
 
   resolve(): Observable<boolean> {
     if (
diff --git a/client/app/src/shared/resolvers/notifications.resolver.ts b/client/app/src/shared/resolvers/notifications.resolver.ts
index ae90873c90..723970a23c 100644
--- a/client/app/src/shared/resolvers/notifications.resolver.ts
+++ b/client/app/src/shared/resolvers/notifications.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,10 +9,10 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class NotificationsResolver {
-  dataModel: notificationResolverModel = new notificationResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: notificationResolverModel = new notificationResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/preference.resolver.ts b/client/app/src/shared/resolvers/preference.resolver.ts
index 7c82b5b951..39c3b78e16 100644
--- a/client/app/src/shared/resolvers/preference.resolver.ts
+++ b/client/app/src/shared/resolvers/preference.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Router} from "@angular/router";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
@@ -10,10 +10,11 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class PreferenceResolver {
-  dataModel: preferenceResolverModel = new preferenceResolverModel();
+  private router = inject(Router);
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private router: Router, private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: preferenceResolverModel = new preferenceResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.isSessionActive()) {
diff --git a/client/app/src/shared/resolvers/questionnaires.resolver.ts b/client/app/src/shared/resolvers/questionnaires.resolver.ts
index 9c1ba5bfed..bfdc970b8a 100644
--- a/client/app/src/shared/resolvers/questionnaires.resolver.ts
+++ b/client/app/src/shared/resolvers/questionnaires.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,10 +9,10 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class QuestionnairesResolver {
-  dataModel: questionnaireResolverModel[];
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: questionnaireResolverModel[];
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/r-tips-resolver.service.ts b/client/app/src/shared/resolvers/r-tips-resolver.service.ts
index 65d9d64073..258531e65e 100644
--- a/client/app/src/shared/resolvers/r-tips-resolver.service.ts
+++ b/client/app/src/shared/resolvers/r-tips-resolver.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -10,6 +10,10 @@ import {UtilsService} from "@app/shared/services/utils.service";
   providedIn: "root"
 })
 export class RTipsResolver {
+  private utilsService = inject(UtilsService);
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
+
   dataModel: rtipResolverModel[] = [];
 
   reload() {
@@ -21,9 +25,6 @@ export class RTipsResolver {
     );
   }
 
-  constructor(private utilsService: UtilsService, private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
-
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "receiver") {
       return this.httpService.receiverTipResource().pipe(
diff --git a/client/app/src/shared/resolvers/redirects.resolver.ts b/client/app/src/shared/resolvers/redirects.resolver.ts
index ecdfd14a63..7fd9cd67ba 100644
--- a/client/app/src/shared/resolvers/redirects.resolver.ts
+++ b/client/app/src/shared/resolvers/redirects.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,13 +9,10 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class RedirectsResolver {
-  dataModel: redirectResolverModel[];
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(
-    private httpService: HttpService,
-    private authenticationService: AuthenticationService
-  ) {
-  }
+  dataModel: redirectResolverModel[];
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/statistics.resolver.ts b/client/app/src/shared/resolvers/statistics.resolver.ts
index d4542ab6cb..ac513e7a94 100644
--- a/client/app/src/shared/resolvers/statistics.resolver.ts
+++ b/client/app/src/shared/resolvers/statistics.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,10 +9,10 @@ import {statisticsResolverModel} from "@app/models/resolvers/statistics-resolver
   providedIn: "root"
 })
 export class StatisticsResolver {
-  dataModel: statisticsResolverModel;
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: statisticsResolverModel;
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "analyst") {
diff --git a/client/app/src/shared/resolvers/statuses.resolver.ts b/client/app/src/shared/resolvers/statuses.resolver.ts
index 8949379d29..9072335870 100644
--- a/client/app/src/shared/resolvers/statuses.resolver.ts
+++ b/client/app/src/shared/resolvers/statuses.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, map, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -8,10 +8,10 @@ import {statusResolverModel} from "@app/models/resolvers/status-resolver-model";
   providedIn: "root"
 })
 export class StatusResolver {
-  dataModel: statusResolverModel = new statusResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: statusResolverModel = new statusResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/tenants.resolver.ts b/client/app/src/shared/resolvers/tenants.resolver.ts
index 93c3617600..0598aafa08 100644
--- a/client/app/src/shared/resolvers/tenants.resolver.ts
+++ b/client/app/src/shared/resolvers/tenants.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,10 +9,10 @@ import {catchError, map} from "rxjs/operators";
   providedIn: "root"
 })
 export class TenantsResolver {
-  dataModel: tenantResolverModel = new tenantResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: tenantResolverModel = new tenantResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/tips.resolver.ts b/client/app/src/shared/resolvers/tips.resolver.ts
index 0630f647db..71957c8f6a 100644
--- a/client/app/src/shared/resolvers/tips.resolver.ts
+++ b/client/app/src/shared/resolvers/tips.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
@@ -9,10 +9,10 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class TipsResolver {
-  dataModel: tipsResolverModel = new tipsResolverModel();
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: tipsResolverModel = new tipsResolverModel();
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/title-resolver.resolver.ts b/client/app/src/shared/resolvers/title-resolver.resolver.ts
index c801236067..b03f506593 100644
--- a/client/app/src/shared/resolvers/title-resolver.resolver.ts
+++ b/client/app/src/shared/resolvers/title-resolver.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {ActivatedRouteSnapshot} from "@angular/router";
 import {Title} from "@angular/platform-browser";
 
@@ -6,8 +6,8 @@ import {Title} from "@angular/platform-browser";
   providedIn: "root",
 })
 export class TitleResolver {
-  constructor(private titleService: Title) {
-  }
+  private titleService = inject(Title);
+
 
   resolve(route: ActivatedRouteSnapshot): void {
     const title = route.data["title"] || "Globaleaks";
diff --git a/client/app/src/shared/resolvers/users.resolver.ts b/client/app/src/shared/resolvers/users.resolver.ts
index d00f4d9687..d387587377 100644
--- a/client/app/src/shared/resolvers/users.resolver.ts
+++ b/client/app/src/shared/resolvers/users.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Observable, of} from "rxjs";
 import {HttpService} from "@app/shared/services/http.service";
 import {userResolverModel} from "@app/models/resolvers/user-resolver-model";
@@ -9,10 +9,10 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class UsersResolver {
-  dataModel: userResolverModel[];
+  private httpService = inject(HttpService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private httpService: HttpService, private authenticationService: AuthenticationService) {
-  }
+  dataModel: userResolverModel[];
 
   resolve(): Observable<boolean> {
     if (this.authenticationService.session.role === "admin") {
diff --git a/client/app/src/shared/resolvers/wb-tip-resolver.service.ts b/client/app/src/shared/resolvers/wb-tip-resolver.service.ts
index d116b146c5..4543782abb 100644
--- a/client/app/src/shared/resolvers/wb-tip-resolver.service.ts
+++ b/client/app/src/shared/resolvers/wb-tip-resolver.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {Observable, of} from "rxjs";
 import {WbTipData} from "@app/models/whistleblower/wb-tip-data";
@@ -9,11 +9,11 @@ import {map} from "rxjs/operators";
   providedIn: "root"
 })
 export class WbTipResolver {
+  private authenticationService = inject(AuthenticationService);
+  private httpService = inject(HttpService);
 
-  dataModel: WbTipData;
 
-  constructor(private authenticationService: AuthenticationService, private httpService: HttpService) {
-  }
+  dataModel: WbTipData;
 
   onReload(callback: () => void) {
     this.httpService.whistleBlowerTip().subscribe(
diff --git a/client/app/src/shared/resolvers/whistleblower-login.resolver.ts b/client/app/src/shared/resolvers/whistleblower-login.resolver.ts
index 655cf7ebf8..d3edc24b22 100644
--- a/client/app/src/shared/resolvers/whistleblower-login.resolver.ts
+++ b/client/app/src/shared/resolvers/whistleblower-login.resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {AppDataService} from "@app/app-data.service";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {Observable, of} from "rxjs";
@@ -7,9 +7,9 @@ import {Observable, of} from "rxjs";
   providedIn: "root"
 })
 export class WhistleblowerLoginResolver {
+  private appDataService = inject(AppDataService);
+  private authenticationService = inject(AuthenticationService);
 
-  constructor(private appDataService: AppDataService, private authenticationService: AuthenticationService) {
-  }
 
   resolve(): Observable<boolean> {
     if (this.appDataService.page === "submissionpage") {
diff --git a/client/app/src/shared/services/custom-datepicker-i18n.ts b/client/app/src/shared/services/custom-datepicker-i18n.ts
index f6ca83c9f5..96f35bc00f 100644
--- a/client/app/src/shared/services/custom-datepicker-i18n.ts
+++ b/client/app/src/shared/services/custom-datepicker-i18n.ts
@@ -1,13 +1,15 @@
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { formatDate } from "@angular/common"; // Use Angular's built-in date formatting
 import { TranslationService } from "@app/services/helper/translation.service";
 import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
 @Injectable()
 export class CustomDatepickerI18n extends NgbDatepickerI18n {
+  private translationService = inject(TranslationService);
+
   private locale: string;
 
-  constructor(private translationService: TranslationService) {
+  constructor() {
     super();
     // Use Angular's i18n system to determine the current locale
     this.translationService.currentLocale$.subscribe(locale => {
diff --git a/client/app/src/shared/services/http.service.ts b/client/app/src/shared/services/http.service.ts
index a990bd8397..5a5e5dfcbd 100644
--- a/client/app/src/shared/services/http.service.ts
+++ b/client/app/src/shared/services/http.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {HttpClient, HttpHeaders, HttpResponse} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {PasswordRecoveryResponseModel} from "@app/models/authentication/password-recovery-response-model";
@@ -41,9 +41,9 @@ import { RedactionData } from "@app/models/component-model/redaction";
   providedIn: "root"
 })
 export class HttpService {
+  private httpClient = inject(HttpClient);
+  private router = inject(Router);
 
-  constructor(private httpClient: HttpClient, private router: Router) {
-  }
 
   getPublicResource(): Observable<HttpResponse<Root>> {
     return this.httpClient.get<Root>("api/public", {observe: "response"});
diff --git a/client/app/src/shared/services/mask.service.ts b/client/app/src/shared/services/mask.service.ts
index 27a5124d29..f387ce3397 100644
--- a/client/app/src/shared/services/mask.service.ts
+++ b/client/app/src/shared/services/mask.service.ts
@@ -1,4 +1,4 @@
-import {ElementRef, Injectable} from '@angular/core';
+import { ElementRef, Injectable, inject } from '@angular/core';
 import {RecieverTipData} from '@app/models/reciever/reciever-tip-data';
 import {WbTipData} from '@app/models/whistleblower/wb-tip-data';
 import {RedactInformationComponent} from '@app/shared/modals/redact-information/redact-information.component';
@@ -8,8 +8,8 @@ import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
   providedIn: 'root', 
 })
 export class MaskService {
+  private modalService = inject(NgbModal);
 
-  constructor(private modalService: NgbModal){}
 
   getSelectedRanges(select: boolean, selected_ranges: any[],redactTextArea:ElementRef) {
     
diff --git a/client/app/src/shared/services/tip-service.ts b/client/app/src/shared/services/tip-service.ts
index 255437e5d0..569c4af3d9 100644
--- a/client/app/src/shared/services/tip-service.ts
+++ b/client/app/src/shared/services/tip-service.ts
@@ -1,13 +1,12 @@
-import {Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import {FieldUtilitiesService} from "@app/shared/services/field-utilities.service";
 
 @Injectable({
   providedIn: 'root'
 })
 export class TipService {
+  private fieldUtilities = inject(FieldUtilitiesService);
 
-  constructor(private fieldUtilities: FieldUtilitiesService) {
-  }
 
   filterNotTriggeredField(tip: any, parent: any, field: any, answers: any): void {
     let i;
diff --git a/client/app/src/shared/services/title.service.ts b/client/app/src/shared/services/title.service.ts
index 644ca5a15f..1fbf0486a0 100644
--- a/client/app/src/shared/services/title.service.ts
+++ b/client/app/src/shared/services/title.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import {AppDataService} from "@app/app-data.service";
 import {TranslateService} from "@ngx-translate/core";
 import {Router} from "@angular/router";
@@ -7,9 +7,10 @@ import {Router} from "@angular/router";
   providedIn: 'root'
 })
 export class TitleService {
+  private appDataService = inject(AppDataService);
+  private translateService = inject(TranslateService);
+  private router = inject(Router);
 
-  constructor(private appDataService: AppDataService, private translateService: TranslateService, private router: Router) {
-  }
 
   public setPage(page: string) {
     this.appDataService.page = page;
@@ -34,14 +35,14 @@ export class TitleService {
     }
 
     if (pageTitle && pageTitle.length > 0) {
-      pageTitle = pageTitle ? this.translateService.instant(pageTitle) : '';
+      pageTitle = this.translateService.instant(pageTitle);
     }
 
     this.appDataService.projectTitle = projectTitle !== "GLOBALEAKS" ? projectTitle : "";
     this.appDataService.pageTitle = pageTitle !== projectTitle ? pageTitle : "";
 
     if (pageTitle) {
-      const finalPageTitle = pageTitle ? this.translateService.instant(pageTitle) : projectTitle;
+      const finalPageTitle = pageTitle.length > 0 ? this.translateService.instant(pageTitle) : projectTitle;
       window.document.title = `${projectTitle} - ${finalPageTitle}`;
 
       const element = window.document.querySelector("meta[name=\"description\"]");
diff --git a/client/app/src/shared/services/token-resource.service.ts b/client/app/src/shared/services/token-resource.service.ts
index c0cfefb896..15af5ee55d 100644
--- a/client/app/src/shared/services/token-resource.service.ts
+++ b/client/app/src/shared/services/token-resource.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {CryptoService} from "@app/shared/services/crypto.service";
 import {Observable, from, switchMap} from "rxjs";
@@ -7,11 +7,11 @@ import {Observable, from, switchMap} from "rxjs";
   providedIn: "root"
 })
 export class TokenResource {
+  private cryptoService = inject(CryptoService);
+  private http = inject(HttpClient);
 
-  private baseUrl = "api/token/:id";
 
-  constructor(private cryptoService: CryptoService, private http: HttpClient) {
-  }
+  private baseUrl = "api/token/:id";
 
   getWithProofOfWork(): Observable<any> {
     return from(this.http.post("api/auth/token", {})).pipe(
diff --git a/client/app/src/shared/services/utils.service.ts b/client/app/src/shared/services/utils.service.ts
index 5d8eb56f9d..d452ac92bf 100644
--- a/client/app/src/shared/services/utils.service.ts
+++ b/client/app/src/shared/services/utils.service.ts
@@ -1,4 +1,4 @@
-import {EventEmitter, Injectable, Renderer2} from "@angular/core";
+import { EventEmitter, Injectable, Renderer2, inject } from "@angular/core";
 import * as Flow from "@flowjs/flow.js";
 import {TranslateService} from "@ngx-translate/core";
 import {ActivatedRoute, Router} from "@angular/router";
@@ -36,10 +36,20 @@ import {CryptoService} from "@app/shared/services/crypto.service";
   providedIn: "root"
 })
 export class UtilsService {
-  supportedViewTypes = ["application/pdf", "audio/mpeg", "image/gif", "image/jpeg", "image/png", "text/csv", "text/plain", "video/mp4"];
+  private authenticationService = inject(AuthenticationService);
+  private activatedRoute = inject(ActivatedRoute);
+  protected appDataService = inject(AppDataService);
+  private cryptoService = inject(CryptoService);
+  private tokenResource = inject(TokenResource);
+  private translateService = inject(TranslateService);
+  private clipboardService = inject(ClipboardService);
+  private http = inject(HttpClient);
+  private httpService = inject(HttpService);
+  private modalService = inject(NgbModal);
+  private preferenceResolver = inject(PreferenceResolver);
+  private router = inject(Router);
 
-  constructor(private authenticationService: AuthenticationService,private activatedRoute: ActivatedRoute,protected appDataService: AppDataService,private cryptoService: CryptoService, private tokenResource: TokenResource,private translateService: TranslateService, private clipboardService: ClipboardService, private http: HttpClient, private httpService: HttpService, private modalService: NgbModal, private preferenceResolver: PreferenceResolver, private router: Router) {
-  }
+  supportedViewTypes = ["application/pdf", "audio/mpeg", "image/gif", "image/jpeg", "image/png", "text/csv", "text/plain", "video/mp4"];
 
   updateNode(nodeResolverModel:nodeResolverModel) {
     this.httpService.updateNodeResource(nodeResolverModel).subscribe();
@@ -292,7 +302,7 @@ export class UtilsService {
     let text;
     for (let i = 0; i < submission_statuses.length; i++) {
       if (submission_statuses[i].id === status) {
-        text = this.translateService.instant(submission_statuses[i].label ? submission_statuses[i].label : '');
+        text = this.translateService.instant(submission_statuses[i].label);
 
         const subStatus = submission_statuses[i].substatuses;
         for (let j = 0; j < subStatus.length; j++) {
@@ -308,19 +318,20 @@ export class UtilsService {
   }
 
   searchInObject(obj: any, searchTerm: string) {
-    try {
-        // Convert object to a string
-        const objString = JSON.stringify(obj);
-
-        // Create a regular expression for the search term with 'i' flag for case-insensitive search
-        const regex = new RegExp(searchTerm, 'i');
-
-        // Test if the search term is found in the object string
-        return regex.test(objString);
-    } catch (error) {
-        // Return false in case of any exception (e.g., cyclic reference or BigInt error)
-        return false;
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const value = obj[key];
+
+        if (typeof value === 'string' && value.toLowerCase().includes(searchTerm.toLowerCase())) {
+          return true;
+        } else if (typeof value === 'object') {
+          if (this.searchInObject(value, searchTerm)) {
+            return true;
+          }
+        }
+      }
     }
+    return false;
   }
 
   isDatePassed(time: string) {
@@ -709,21 +720,12 @@ export class UtilsService {
 
     const headers = Object.keys(data[0] || {});
     const newHeader = headerx.join(',');
+    const csvContent = `${newHeader ? `${newHeader}\n` : ""}${data.map(row => headers.map(header => row[header]).join(',')).join('\n')}`;
 
-    // Create CSV content with custom headers and stringified objects
-    const csvContent = [
-      headers.join(','), // First line: headers
-      ...data.map(row => headers.map(header => {
-        const value = row[header];
-
-        // Check if the value is an object or an array and stringify it
-        if (typeof value === 'object' && value !== null) {
-          return `"${JSON.stringify(value).replace(/"/g, '""')}"`; // Escape quotes and stringify
-        }
-
-        return `"${value !== undefined ? String(value).replace(/"/g, '""') : ''}"`; // Escape quotes for normal strings
-      }).join(','))
-    ].join('\n');
+    if (!csvContent.trim()) {
+      console.warn('No data to export');
+      return;
+    }
 
     const blob = new Blob([csvContent], { type: 'text/csv' });
     const link = document.createElement('a');