diff --git a/src/app/layout/common/update/update.component.html b/src/app/layout/common/update/update.component.html
index d645f29..d2d7882 100644
--- a/src/app/layout/common/update/update.component.html
+++ b/src/app/layout/common/update/update.component.html
@@ -1,9 +1,9 @@
-<!-- Update toggle -->
-<button
-    *ngIf="updateService.isNewVersionAvailable$ | async"
-    mat-icon-button
-    [matTooltip]="tooltip || 'Update App'"
-    (click)="applyUpdate()"
->
-    <mat-icon [svgIcon]="'heroicons_outline:cloud-arrow-down'"></mat-icon>
-</button>
+@if (isNewVersionAvailable()) {
+    <button
+        mat-icon-button
+        [matTooltip]="tooltip()"
+        (click)="applyUpdate()"
+    >
+        <mat-icon [svgIcon]="'heroicons_outline:cloud-arrow-down'"></mat-icon>
+    </button>
+}
diff --git a/src/app/layout/common/update/update.component.ts b/src/app/layout/common/update/update.component.ts
index c36a8a6..8e3d516 100644
--- a/src/app/layout/common/update/update.component.ts
+++ b/src/app/layout/common/update/update.component.ts
@@ -1,48 +1,39 @@
-import {
-    CommonModule,
-    DatePipe,
-    NgClass,
-    NgTemplateOutlet,
-} from '@angular/common';
 import {
     ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
-    Input,
-    ViewEncapsulation,
+    Signal,
+    inject,
+    signal,
+    effect,
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterLink } from '@angular/router';
 import { NewVersionCheckerService } from 'app/services/update.service';
 
 @Component({
     selector: 'update',
-    templateUrl: './update.component.html',
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs: 'update',
     standalone: true,
     imports: [
+        CommonModule,
         MatButtonModule,
         MatIconModule,
         MatTooltipModule,
-        CommonModule,
-    ]
+    ],
+    templateUrl: './update.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UpdateComponent {
-    @Input() tooltip: string;
+    tooltip: Signal<string> = signal('Update App');
 
-    constructor(
-        public updateService: NewVersionCheckerService,
-        private _changeDetectorRef: ChangeDetectorRef // Injecting ChangeDetectorRef
-    ) {
-        // Listen to the update available event and trigger change detection
+    isNewVersionAvailable = signal(false);
+
+    private updateService = inject(NewVersionCheckerService);
+
+    constructor() {
         this.updateService.isNewVersionAvailable$.subscribe((isAvailable) => {
-            if (isAvailable) {
-                this._changeDetectorRef.detectChanges(); // Trigger change detection
-            }
+            this.isNewVersionAvailable.set(isAvailable);
         });
     }