diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index 6a0624a6e..1d8262154 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -3,12 +3,12 @@
     @if (!editing) {
         <div class="value">
             <div class="text">
-                @for (componentValue of entry.componentValues; track componentValue) {
+                @for (componentValue of currentEntry().componentValues; track componentValue) {
                     <span [innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue) | replaceNbsp"></span>
                 }
             </div>
             <div class="actions">
-                @if (canEdit) {
+                @if (canEdit()) {
                     <iqser-circle-button
                         (action)="edit()"
                         [tooltip]="'component-management.actions.edit' | translate"
@@ -16,7 +16,7 @@
                         [class.help-mode]="helpModeService.isHelpModeActive()"
                         icon="iqser:edit"
                     ></iqser-circle-button>
-                    @if (hasUpdatedValues) {
+                    @if (hasUpdatedValues()) {
                         <div class="changes-dot"></div>
                     }
                 }
@@ -24,10 +24,10 @@
         </div>
     } @else {
         <div (cdkDropListDropped)="drop($event)" cdkDropList>
-            @for (value of entry.componentValues; track value) {
+            @for (value of currentEntry().componentValues; track value) {
                 <div cdkDrag class="editing-value">
                     <mat-icon
-                        [class.hidden-button]="entry.componentValues.length === 1"
+                        [class.hidden-button]="currentEntry().componentValues.length === 1"
                         [attr.help-mode-key]="'change_component_order'"
                         cdkDragHandle
                         class="draggable"
@@ -39,7 +39,7 @@
                     <iqser-circle-button
                         (action)="removeValue($index)"
                         [tooltip]="'component-management.actions.delete' | translate"
-                        [class.hidden-button]="entry.componentValues.length === 1"
+                        [class.hidden-button]="currentEntry().componentValues.length === 1"
                         [attr.help-mode-key]="'remove_component_value'"
                         class="remove-value"
                         icon="iqser:trash"
@@ -50,13 +50,13 @@
         <div class="editing-actions">
             <iqser-icon-button
                 (action)="save()"
-                [disabled]="disabled"
+                [disabled]="disabled()"
                 [label]="'component-management.actions.save' | translate"
                 [type]="iconButtonTypes.primary"
             ></iqser-icon-button>
-            <div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
+            <div (click)="cancel($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
             <div class="flex right">
-                @if (hasUpdatedValues && canEdit) {
+                @if (hasUpdatedValues() && canEdit()) {
                     <iqser-circle-button
                         (action)="undo()"
                         [tooltip]="'component-management.actions.undo' | translate"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index 9683f667e..34efc54e0 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,6 +1,6 @@
 import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import { AsyncPipe, KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, computed, input, OnInit, output, signal, WritableSignal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
 import { CircleButtonComponent, HelpModeService, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
@@ -34,17 +34,27 @@ import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
     ],
 })
 export class EditableStructuredComponentValueComponent implements OnInit {
+    readonly entry = input<IComponentLogEntry>();
+    currentEntry: WritableSignal<IComponentLogEntry>;
+    readonly canEdit = input<boolean>();
+    readonly deselectLast = output();
+    readonly overrideValue = output<IComponentLogEntry>();
+    readonly revertOverride = output<string>();
+    hasUpdatedValues = computed(() => this.currentEntry().overridden);
+    selected = false;
+    valueBeforeCurrentEdit: IComponentValue[];
     protected entryLabel: string;
     protected editing = false;
-    protected hasUpdatedValues = false;
     protected initialEntry: IComponentLogEntry;
+    disabled = computed(() => {
+        for (let i = 0; i < this.currentEntry().componentValues.length; i++) {
+            if (this.currentEntry().componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
+                return false;
+            }
+        }
+        return this.currentEntry().componentValues.length === this.initialEntry.componentValues.length;
+    });
     protected readonly iconButtonTypes = IconButtonTypes;
-    @Input() entry: IComponentLogEntry;
-    @Input() canEdit: boolean;
-    @Output() readonly deselectLast = new EventEmitter();
-    @Output() readonly overrideValue = new EventEmitter<IComponentLogEntry>();
-    @Output() readonly revertOverride = new EventEmitter<string>();
-    selected = false;
 
     constructor(
         readonly helpModeService: HelpModeService,
@@ -52,39 +62,18 @@ export class EditableStructuredComponentValueComponent implements OnInit {
         private readonly _state: FilePreviewStateService,
     ) {}
 
-    get disabled() {
-        for (let i = 0; i < this.entry.componentValues.length; i++) {
-            if (this.entry.componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
-                return false;
-            }
-        }
-        return this.entry.componentValues.length === this.initialEntry.componentValues.length;
-    }
-
-    get #hasUpdatedValues() {
-        for (const value of this.entry.componentValues) {
-            if (value.originalValue === null && value.value === '') {
-                continue;
-            }
-            if (value.originalValue !== value.value) {
-                return true;
-            }
-        }
-        return false;
-    }
-
     get #initialEntry() {
-        return JSON.parse(JSON.stringify(this.entry));
+        return JSON.parse(JSON.stringify(this.entry()));
     }
 
     ngOnInit() {
+        this.currentEntry = signal(this.entry());
         this.reset();
     }
 
     reset() {
         this.initialEntry = this.#initialEntry;
-        this.hasUpdatedValues = this.#hasUpdatedValues;
-        this.entryLabel = this.parseName(this.entry.name);
+        this.entryLabel = this.parseName(this.currentEntry().name);
         this.deselect();
     }
 
@@ -96,11 +85,12 @@ export class EditableStructuredComponentValueComponent implements OnInit {
             }
             this.deselectLast.emit();
             this.selected = true;
-            this._state.componentReferenceIds = this.#getUniqueReferencesIds(this.entry.componentValues);
+            this._state.componentReferenceIds = this.#getUniqueReferencesIds(this.currentEntry().componentValues);
         }
     }
 
     edit() {
+        this.valueBeforeCurrentEdit = JSON.parse(JSON.stringify([...this.currentEntry().componentValues]));
         this.deselectLast.emit();
         this.selected = true;
         this.editing = true;
@@ -114,37 +104,48 @@ export class EditableStructuredComponentValueComponent implements OnInit {
         this._state.componentReferenceIds = null;
     }
 
+    cancel($event?: MouseEvent) {
+        this.currentEntry.update(value => ({ ...value, componentValues: this.valueBeforeCurrentEdit }));
+        this.deselect($event);
+    }
+
     removeValue(index: number) {
-        this.entry.componentValues.splice(index, 1);
+        this.currentEntry.update(value => ({ ...value, componentValues: value.componentValues.filter((_, i) => i !== index) }));
     }
 
     save() {
-        this.entry.overridden = true;
-        this.overrideValue.emit(this.entry);
+        this.currentEntry.update(value => ({ ...value, overridden: true }));
+        this.overrideValue.emit(this.currentEntry());
         this.reset();
     }
 
     async undo() {
-        const dialog = this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.entry }, width: '800px' });
+        const dialog = this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.currentEntry() }, width: '800px' });
         const result = await dialog.result();
         if (result) {
-            this.revertOverride.emit(this.entry.name);
+            this.revertOverride.emit(this.currentEntry().name);
             this.reset();
         }
     }
 
     add() {
-        this.entry.componentValues.push({
-            componentRuleId: null,
-            entityReferences: [],
-            originalValue: null,
-            value: '',
-            valueDescription: '',
-        });
+        this.currentEntry.update(value => ({
+            ...value,
+            componentValues: [
+                ...value.componentValues,
+                {
+                    componentRuleId: null,
+                    entityReferences: [],
+                    originalValue: null,
+                    value: '',
+                    valueDescription: '',
+                },
+            ],
+        }));
     }
 
     drop(event: CdkDragDrop<string>) {
-        moveItemInArray(this.entry.componentValues, event.previousIndex, event.currentIndex);
+        moveItemInArray(this.currentEntry().componentValues, event.previousIndex, event.currentIndex);
     }
 
     parseName(name: string) {
@@ -167,7 +168,7 @@ export class EditableStructuredComponentValueComponent implements OnInit {
 
     #updateTextAreaHeight() {
         setTimeout(() => {
-            for (let i = 0; i < this.entry.componentValues.length; i++) {
+            for (let i = 0; i < this.currentEntry().componentValues.length; i++) {
                 const textArea = document.getElementById(`value-input-${i}`);
                 textArea.style.height = 'auto';
                 textArea.style.height = `${textArea.scrollHeight}px`;