diff --git a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
index 831bb1b55..7292ba8ea 100644
--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
@@ -1,10 +1,10 @@
-@if (active) {
+@if (active()) {
   <button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
-    @if (!isNumbered && selected) {
+    @if (!isNumbered() && selected()) {
       <i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
     }
-    @if (isNumbered) {
-      <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    @if (isNumbered()) {
+      <div class="number">{{number()}}<span class="visually-hidden">selected</span></div>
     }
     <i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
   </button>
diff --git a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts
index 2f45dd902..50cb5c3bb 100644
--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts
@@ -21,20 +21,20 @@ describe('ClearableBadgeComponent', () => {
   })
 
   it('should support selected', () => {
-    component.selected = true
-    expect(component.active).toBeTruthy()
+    fixture.componentRef.setInput('selected', true)
+    expect(component.active()).toBeTruthy()
   })
 
   it('should support numbered', () => {
-    component.number = 3
+    fixture.componentRef.setInput('number', 3)
     fixture.detectChanges()
-    expect(component.active).toBeTruthy()
+    expect(component.active()).toBeTruthy()
     expect((fixture.nativeElement as HTMLDivElement).textContent).toContain('3')
   })
 
   it('should support selected', () => {
     let clearedResult
-    component.selected = true
+    fixture.componentRef.setInput('selected', true)
     fixture.detectChanges()
     component.cleared.subscribe((clear) => {
       clearedResult = clear
diff --git a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts
index 1cdce5679..0ee366110 100644
--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, signal } from '@angular/core'
+import { Component, computed, EventEmitter, input, Output } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
@@ -8,37 +8,15 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
   imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
-  private numberSignal = signal<number>(undefined)
-  private selectedSignal = signal<boolean>(undefined)
-
-  @Input()
-  get number(): number {
-    return this.numberSignal()
-  }
-
-  set number(number: number) {
-    this.numberSignal.set(number)
-  }
-
-  @Input()
-  get selected(): boolean {
-    return this.selectedSignal()
-  }
-
-  set selected(selected: boolean) {
-    this.selectedSignal.set(selected)
-  }
+  readonly number = input<number>(undefined)
+  readonly selected = input<boolean>(undefined)
 
   @Output()
   cleared: EventEmitter<boolean> = new EventEmitter()
 
-  get active(): boolean {
-    return this.selected || this.number > -1
-  }
+  readonly active = computed(() => this.selected() || this.number() > -1)
 
-  get isNumbered(): boolean {
-    return this.number > -1
-  }
+  readonly isNumbered = computed(() => this.number() > -1)
 
   onClick(event: PointerEvent) {
     this.cleared.emit(true)
diff --git a/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.html b/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.html
index c98a96ee0..c6aea0fb2 100644
--- a/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.html
+++ b/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.html
@@ -1,11 +1,11 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
 <div class="modal-body">
     <table class="table">
         <tbody>
-            @for (key of hotkeys.entries(); track key[0]) {
+            @for (key of hotkeys().entries(); track key[0]) {
                 <tr>
                   <td>{{ key[1] }}</td>
                   <td class="d-flex justify-content-end">
diff --git a/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts b/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts
index 8666522b2..acf9f2646 100644
--- a/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts
+++ b/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts
@@ -20,24 +20,8 @@ const SYMBOLS = {
 })
 export class HotkeyDialogComponent {
   activeModal = inject(NgbActiveModal)
-  private titleSignal = signal($localize`Keyboard shortcuts`)
-  private hotkeysSignal = signal<Map<string, string>>(new Map())
-
-  public get title(): string {
-    return this.titleSignal()
-  }
-
-  public set title(title: string) {
-    this.titleSignal.set(title)
-  }
-
-  public get hotkeys(): Map<string, string> {
-    return this.hotkeysSignal()
-  }
-
-  public set hotkeys(hotkeys: Map<string, string>) {
-    this.hotkeysSignal.set(hotkeys)
-  }
+  readonly title = signal($localize`Keyboard shortcuts`)
+  readonly hotkeys = signal<Map<string, string>>(new Map())
 
   public close(): void {
     this.activeModal.close()
diff --git a/src-ui/src/app/components/common/logo/logo.component.html b/src-ui/src/app/components/common/logo/logo.component.html
index 15a7ee71c..f8ca689d7 100644
--- a/src-ui/src/app/components/common/logo/logo.component.html
+++ b/src-ui/src/app/components/common/logo/logo.component.html
@@ -1,7 +1,7 @@
 @if (customLogo) {
-    <img src="{{customLogo}}" [class]="getClasses()" [attr.style]="'height:'+height" />
+    <img src="{{customLogo}}" [class]="getClasses()" [attr.style]="'height:'+height()" />
 } @else {
-    <svg [class]="getClasses()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2670 860" [attr.style]="'height:'+height">
+    <svg [class]="getClasses()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2670 860" [attr.style]="'height:'+height()">
       <path class="leaf" style="fill:#005616;" d="M2227.4,821.2c-6.1-17.8-18.1-53.6-19.2-53.4-174.7-77.8-159.8-201.2-117.5-304.2,26.3,120.1,235.3,130.3,128,294.1-.7,2,8.8,24.3,17.1,44.9,19.9-45.4,51.3-101.1,48.8-105.7-199.9-357.4,278.8-444.7,350.7-690.2,72.6,220.1,46.5,577.5-330.4,713.3-1.8,1.2-55.6,130-58.5,131.4-.2-1.9-29.1,2.5-26.4-7.6,1.4-6.2,4.2-14.2,7.2-22.4h0v-.2h.2,0ZM2211.7,731.2c42.3-62.9-11.1-105.7-49.8-133.2,71,94,58.1,105.7,49.8,133.2h0Z"/>
       <g class="text" style="fill: #000;">
         <path class="st1" d="M654.6,393.2l-.7,137.7h-85.5V188.7h85.4c.4,11.3-.3,21.7,1.3,33.8,23.1-34.1,62.3-50,101.1-38.3,16.5,5,29.6,16.4,39.7,30,34.4,46.5,35.1,134,3.6,182.2-10.1,14.4-22.5,26.9-39,33.4-39.5,15.7-81,1.1-105.9-36.6h0ZM721,362.2c21-26.1,21-82.7-.4-108.4-13.2-15.9-36.4-16.1-49.9-.4-22.2,25.8-21.7,85.3.5,110.1,13.6,15.2,36.6,15,49.7-1.3h.1Z"/>
diff --git a/src-ui/src/app/components/common/logo/logo.component.ts b/src-ui/src/app/components/common/logo/logo.component.ts
index fd7d44cd2..f9b0a09c3 100644
--- a/src-ui/src/app/components/common/logo/logo.component.ts
+++ b/src-ui/src/app/components/common/logo/logo.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, inject, signal } from '@angular/core'
+import { Component, inject, input } from '@angular/core'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
@@ -10,26 +10,8 @@ import { environment } from 'src/environments/environment'
 })
 export class LogoComponent {
   private settingsService = inject(SettingsService)
-  private extraClassesSignal = signal<string>(undefined)
-  private heightSignal = signal('6em')
-
-  @Input()
-  get extra_classes(): string {
-    return this.extraClassesSignal()
-  }
-
-  set extra_classes(extraClasses: string) {
-    this.extraClassesSignal.set(extraClasses)
-  }
-
-  @Input()
-  get height(): string {
-    return this.heightSignal()
-  }
-
-  set height(height: string) {
-    this.heightSignal.set(height)
-  }
+  readonly extra_classes = input<string>(undefined)
+  readonly height = input('6em')
 
   get customLogo(): string {
     return this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length
@@ -41,6 +23,6 @@ export class LogoComponent {
   }
 
   getClasses() {
-    return ['logo'].concat(this.extra_classes).join(' ')
+    return ['logo'].concat(this.extra_classes()).join(' ')
   }
 }
diff --git a/src-ui/src/app/services/hot-key.service.ts b/src-ui/src/app/services/hot-key.service.ts
index 0623e8f87..eeab4644c 100644
--- a/src-ui/src/app/services/hot-key.service.ts
+++ b/src-ui/src/app/services/hot-key.service.ts
@@ -94,6 +94,6 @@ export class HotKeyService {
 
   private openHelpModal() {
     const modal = this.modalService.open(HotkeyDialogComponent)
-    modal.componentInstance.hotkeys = this.hotkeys
+    modal.componentInstance.hotkeys.set(this.hotkeys)
   }
 }