diff --git a/src-ui/src/app/components/common/toasts/toasts.component.ts b/src-ui/src/app/components/common/toasts/toasts.component.ts
index e4da0dfd3..53279f5cc 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.ts
+++ b/src-ui/src/app/components/common/toasts/toasts.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import {
   NgbAccordionModule,
   NgbProgressbarModule,
@@ -24,7 +24,15 @@ export class ToastsComponent implements OnInit, OnDestroy {
 
   private subscription: Subscription
 
-  public toasts: Toast[] = [] // array to force change detection
+  private toastsSignal = signal<Toast[]>([])
+
+  public get toasts(): Toast[] {
+    return this.toastsSignal()
+  }
+
+  public set toasts(toasts: Toast[]) {
+    this.toastsSignal.set(toasts)
+  }
 
   ngOnDestroy(): void {
     this.subscription?.unsubscribe()