diff --git a/projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts b/projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts
index 0a02fd1..eb96f9e 100644
--- a/projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts
+++ b/projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts
@@ -376,8 +376,7 @@ export class AASTreeComponent implements OnInit, OnDestroy {
     private async showImageAsync(name: string, src: string): Promise<void> {
         try {
             const modalRef = this.modal.open(ShowImageFormComponent, { backdrop: 'static' });
-            modalRef.componentInstance.name = name;
-            modalRef.componentInstance.image = src;
+            modalRef.componentInstance.initialize(name, src);
             await modalRef.result;
         } catch (error) {
             if (error) {
diff --git a/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.html b/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.html
index 446f08f..321c41b 100644
--- a/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.html
+++ b/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.html
@@ -9,12 +9,12 @@
 <div class="modal-header">
     <h4 class="modal-title text-info">
         <i class="bi bi-image"></i>
-        <span class="ms-2">{{name}}</span>
+        <span class="ms-2">{{name()}}</span>
     </h4>
     <button type="button" class="btn-close" (click)="close()"> </button>
 </div>
 <div class="modal-body">
-    <fhg-img classname="img-fluid" [src]="image" [alt]="name" [width]="600" [height]="400"/>
+    <fhg-img classname="img-fluid" [src]="image()" [alt]="name()" [width]="600" [height]="400"/>
 </div>
 <div class="modal-footer">
     <button type="button" class="btn btn-primary" (click)="close()" translate>CMD_CLOSE</button>
diff --git a/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.ts b/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.ts
index ac1802f..715b8a9 100644
--- a/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.ts
+++ b/projects/aas-lib/src/lib/aas-tree/show-image-form/show-image-form.component.ts
@@ -6,10 +6,10 @@
  *
  *****************************************************************************/
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { SecuredImageComponent } from '../../secured-image/secured-image.component';
-import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'fhg-show-image',
@@ -17,13 +17,19 @@ import { TranslateModule } from '@ngx-translate/core';
     styleUrls: ['./show-image-form.component.scss'],
     standalone: true,
     imports: [SecuredImageComponent, TranslateModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShowImageFormComponent {
     public constructor(private readonly modal: NgbActiveModal) {}
 
-    public name!: string;
+    public readonly name = signal('');
 
-    public image!: string;
+    public readonly image = signal('');
+
+    public initialize(name: string, image: string): void {
+        this.name.set(name);
+        this.image.set(image);
+    }
 
     public close(): void {
         this.modal.close();