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 a6930bcd1..ca19f3835 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
@@ -1,4 +1,4 @@
-<div class="component-value" [ngClass]="{ selected: entry.name === selectedEntry?.name, editing: editing }">
+<div class="component-value" [ngClass]="{ selected: selected, editing: editing }" (click)="select()">
     <div class="component">{{ entry.name }}</div>
     <div class="value" *ngIf="!editing; else editValue">
         <div class="text">
@@ -8,7 +8,7 @@
         </div>
         <div class="actions">
             <iqser-circle-button
-                (action)="toggleEdit(entry)"
+                (action)="edit()"
                 *ngIf="canEdit"
                 [tooltip]="'component-management.actions.edit' | translate"
                 class="ml-2"
@@ -21,13 +21,45 @@
 </div>
 
 <ng-template #editValue>
-    <div *ngFor="let componentValue of entry.componentValues" class="editing-value">
-        <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
-        <span> test </span>
-        <iqser-circle-button
-            [tooltip]="'component-management.actions.edit' | translate"
-            class="ml-2"
-            icon="iqser:trash"
-        ></iqser-circle-button>
-    </div>
+    <form [formGroup]="form" (submit)="save()">
+        <ng-container *ngFor="let componentValue of entry.componentValues; let index = index">
+            <div class="editing-value" *ngIf="form.get(index.toString())">
+                <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+                <div class="iqser-input-group w-400">
+                    <textarea [formControlName]="index" rows="1" type="text"></textarea>
+                </div>
+                <iqser-circle-button
+                    (action)="removeValue(index)"
+                    [tooltip]="'component-management.actions.delete' | translate"
+                    class="ml-2"
+                    icon="iqser:trash"
+                ></iqser-circle-button>
+            </div>
+        </ng-container>
+        <div class="editing-actions">
+            <iqser-icon-button
+                (action)="save()"
+                [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>
+
+            <!--            *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"-->
+            <div class="flex right">
+                <iqser-circle-button
+                    (action)="undo(entry.originalKey)"
+                    [showDot]="true"
+                    [tooltip]="'component-management.actions.undo' | translate"
+                    class="ml-2"
+                    icon="red:undo"
+                ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="add()"
+                    [tooltip]="'component-management.actions.add' | translate"
+                    class="ml-2"
+                    icon="iqser:plus"
+                ></iqser-circle-button>
+            </div>
+        </div>
+    </form>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
index 695a92125..901d6b438 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
@@ -13,7 +13,6 @@
     .value {
         width: 60%;
         display: flex;
-        align-items: center;
 
         .text {
             width: 80%;
@@ -50,7 +49,7 @@
         position: absolute;
         right: 0;
         top: 50%;
-        transform: translateY(-50%);
+        transform: translateY(-50%) scale(0.7);
     }
 
     mat-icon {
@@ -61,10 +60,13 @@
     &.selected {
         background-color: var(--iqser-grey-8);
         border-left: 4px solid var(--iqser-primary);
-        cursor: pointer;
         margin-left: 0;
         margin-right: 0;
 
+        &:not(.editing) {
+            cursor: pointer;
+        }
+
         .component {
             margin-left: 22px;
         }
@@ -89,10 +91,31 @@
         .editing-value {
             display: flex;
             align-items: center;
+            margin: 10px 0 10px 22px;
+
+            .iqser-input-group {
+                margin-top: 0;
+
+                textarea {
+                    resize: none;
+                }
+            }
 
             .draggable {
                 cursor: grab;
             }
         }
+
+        .editing-actions {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 12px;
+            margin: 20px 10px 10px 22px;
+
+            .right {
+                margin-left: auto;
+            }
+        }
     }
 }
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 0131b4d68..24545fcb0 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,26 +1,78 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
+import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
-    selector: 'redaction-editable-structured-component-value [entry] [selectedEntry] [canEdit]',
+    selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
     templateUrl: './editable-structured-component-value.component.html',
     styleUrls: ['/editable-structured-component-value.component.scss'],
 })
-export class EditableStructuredComponentValueComponent implements OnChanges {
+export class EditableStructuredComponentValueComponent implements OnInit {
     @Input() entry: ComponentLogEntry;
-    @Input() selectedEntry: ComponentLogEntry;
     @Input() canEdit: boolean;
-    @Output() readonly selectEntry = new EventEmitter<ComponentLogEntry>();
+    @Output() readonly deselectLast = new EventEmitter();
+
+    protected readonly iconButtonTypes = IconButtonTypes;
+
+    form: UntypedFormGroup;
+    selected = false;
     editing = false;
 
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes?.selectedEntry?.currentValue) {
-            this.editing = changes.selectedEntry.currentValue.name === this.entry.name;
+    constructor(private readonly _formBuilder: FormBuilder) {}
+
+    ngOnInit() {
+        this.form = this.#getForm();
+    }
+
+    #getForm() {
+        const form = this._formBuilder.group({});
+        this.entry.componentValues.forEach((value, index) => {
+            form.addControl(index.toString(), this._formBuilder.control(value.value ?? value.originalValue));
+        });
+        return form;
+    }
+
+    select() {
+        if (!this.editing) {
+            if (this.selected) {
+                this.deselect();
+                return;
+            }
+            this.deselectLast.emit();
+            this.selected = true;
         }
     }
 
-    toggleEdit(entry?: ComponentLogEntry) {
-        this.editing = !this.editing;
-        this.selectEntry.emit(entry);
+    edit() {
+        this.deselectLast.emit();
+        this.selected = true;
+        this.editing = true;
+    }
+
+    deselect($event?: MouseEvent) {
+        $event?.stopImmediatePropagation();
+        this.selected = false;
+        this.editing = false;
+    }
+
+    removeValue(key: number) {
+        this.form.removeControl(key.toString());
+    }
+
+    save() {}
+
+    undo(originalKey: string) {}
+
+    add() {
+        const key = (Object.keys(this.form.controls).length + 1).toString();
+        this.form.addControl(key, new FormControl(''));
+        this.entry.componentValues.push({
+            value: '',
+            originalValue: '',
+            valueDescription: '',
+            componentRuleId: '',
+            entityReferences: [],
+        });
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 4e77b3e4d..bde5b1bf2 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -12,12 +12,12 @@
         <div class="row-separator"></div>
     </div>
 
-    <div *ngFor="let entry of componentLogEntries" class="component-row" (click)="selectEntry(entry)">
+    <div *ngFor="let entry of componentLogEntries" class="component-row">
         <redaction-editable-structured-component-value
+            #editableComponent
             [entry]="entry"
-            [selectedEntry]="selectedEntry"
             [canEdit]="canEdit"
-            (selectEntry)="selectEntry($event)"
+            (deselectLast)="deselectLast()"
         ></redaction-editable-structured-component-value>
         <div class="row-separator"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index cf90cbbac..1191df27a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,10 +1,16 @@
-import { Component, Input, signal } from '@angular/core';
+import { Component, Input, QueryList, signal, ViewChildren } from '@angular/core';
 import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
+import { List } from '@common-ui/utils';
+import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
+
+interface DeselectEvent {
+    name: string;
+}
 
 @Component({
     selector: 'redaction-structured-component-management',
@@ -15,10 +21,11 @@ export class StructuredComponentManagementComponent {
     @Input() file: File;
     @Input() dictionaries: Dictionary[];
 
+    @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
+
     readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     readonly iconButtonTypes = IconButtonTypes;
-    selectedEntry: ComponentLogEntry;
 
     constructor(
         private readonly _componentLogService: ComponentLogService,
@@ -27,8 +34,11 @@ export class StructuredComponentManagementComponent {
         readonly userPreferences: UserPreferenceService,
     ) {}
 
-    selectEntry(entry: ComponentLogEntry) {
-        this.selectedEntry = this.selectedEntry?.name !== entry.name ? entry : null;
+    deselectLast() {
+        const lastSelected = this.editableComponents.find(c => c.selected);
+        if (lastSelected) {
+            lastSelected.deselect();
+        }
     }
 
     get canEdit() {
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 1aa05e456..71b4cddbb 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": ""
+      "add": "",
+      "cancel": "",
+      "delete": "",
+      "edit": "",
+      "save": "",
+      "undo": ""
     },
     "components": "",
     "table-header": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 09ea9f10e..73321e5f0 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": "Edit"
+      "add": "Add",
+      "cancel": "Cancel",
+      "delete": "Remove value",
+      "edit": "Edit",
+      "save": "Save",
+      "undo": "Undo"
     },
     "components": "Components",
     "table-header": {
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 3a94f7c25..af906e040 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": ""
+      "add": "",
+      "cancel": "",
+      "delete": "",
+      "edit": "",
+      "save": "",
+      "undo": ""
     },
     "components": "",
     "table-header": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index ae141c18d..439ae5836 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": "Edit"
+      "add": "Add",
+      "cancel": "Cancel",
+      "delete": "Remove value",
+      "edit": "Edit",
+      "save": "Save",
+      "undo": "Undo"
     },
     "components": "Components",
     "table-header": {