diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
new file mode 100644
index 000000000..de7e1d214
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
@@ -0,0 +1,61 @@
+<ng-container *ngIf="configService.listingMode$ | async as mode">
+    <div class="file-attribute" [ngClass]="{ 'workflow-attribute': mode === 'workflow' }" (click)="editFileAttribute($event)">
+        <div class="value" [ngClass]="{ 'workflow-value': mode === 'workflow' }">
+            <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
+            <span *ngIf="!isDate; else date" [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
+                {{ fileAttributeValue || '-' }}</span
+            >
+            <ng-template #date>
+                <span [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
+                    {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span
+                >
+            </ng-template>
+        </div>
+
+        <ng-container
+            *ngIf="
+                ((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
+                !file.isInitialProcessing &&
+                permissionsService.canEditFileAttributes(file, dossier)
+            "
+        >
+            <div
+                *ngIf="!isInEditMode; else input"
+                class="action-buttons edit-button"
+                [ngClass]="{ 'workflow-edit-button': mode === 'workflow' }"
+                [class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
+                (click)="editFileAttribute($event)"
+                [attr.help-mode-key]="'edit-file-attributes'"
+            >
+                <div class="edit-icon" [ngClass]="{ 'workflow-edit-icon': mode === 'workflow' }">
+                    <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+
+    <ng-template #input>
+        <div class="edit-input" [ngClass]="{ 'workflow-edit-input': mode === 'workflow' }" stopPropagation>
+            <form (submit)="save()" [formGroup]="form">
+                <iqser-dynamic-input
+                    (closedDatepicker)="closedDatepicker = $event"
+                    (keydown.escape)="close()"
+                    [formControlName]="fileAttribute.id"
+                    [id]="fileAttribute.id"
+                    [type]="fileAttribute.type"
+                    [ngClass]="{ 'workflow-input': mode === 'workflow' }"
+                ></iqser-dynamic-input>
+
+                <iqser-circle-button
+                    (action)="save()"
+                    [disabled]="disabled"
+                    [icon]="'iqser:check'"
+                    [size]="mode === 'workflow' ? 15 : 34"
+                    class="save"
+                ></iqser-circle-button>
+
+                <iqser-circle-button (action)="close()" [size]="mode === 'workflow' ? 15 : 34" [icon]="'iqser:close'"></iqser-circle-button>
+            </form>
+        </div>
+    </ng-template>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
new file mode 100644
index 000000000..6049cf0ba
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
@@ -0,0 +1,185 @@
+.file-attribute {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &.workflow-attribute {
+        padding: 2px;
+        position: relative;
+    }
+
+    .value {
+        z-index: 1;
+    }
+
+    .workflow-value {
+        display: flex;
+        width: 90%;
+
+        b {
+            text-transform: uppercase;
+            padding-right: 5px;
+            white-space: nowrap;
+        }
+
+        span {
+            word-break: unset;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .edit-icon {
+        display: none;
+    }
+
+    .help-mode-button {
+        background-color: var(--iqser-grey-6);
+        width: 90%;
+        height: 50%;
+        border-radius: 4px;
+        position: absolute;
+        margin-left: -10px;
+    }
+
+    .edit-input {
+        cursor: default;
+        display: flex;
+        z-index: 2;
+        border: solid var(--iqser-grey-6);
+        border-radius: 10px;
+        background: var(--iqser-background);
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        margin-left: -10px;
+
+        &.workflow-edit-input {
+            justify-content: space-between;
+            box-shadow: none;
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: -5px;
+            border: none;
+
+            form {
+                width: 100%;
+            }
+
+            iqser-circle-button {
+                margin: 0 5px;
+
+                &:nth-child(2) {
+                    padding-left: 10px;
+                }
+
+                &:last-child {
+                    margin-right: -8px;
+                }
+            }
+        }
+
+        form {
+            margin: 5px;
+            display: flex;
+            align-items: center;
+
+            iqser-dynamic-input {
+                margin-top: 0;
+            }
+
+            .workflow-input {
+                width: 100%;
+                padding-left: 2px;
+
+                ::ng-deep .iqser-input-group {
+                    width: 100%;
+                    margin-top: 0;
+
+                    input {
+                        margin-top: 0;
+                        min-height: 14px;
+                        line-height: 0;
+                        padding-top: 0;
+                        border: solid 1px gray;
+                        font-size: 12px;
+                        padding-left: 5px;
+                    }
+                }
+            }
+
+            .save {
+                margin-left: 7px;
+            }
+        }
+    }
+}
+
+.file-attribute:hover {
+    &.workflow-attribute {
+        background-color: var(--iqser-grey-6);
+        border-radius: 4px;
+        padding: 2px;
+    }
+
+    .workflow-value {
+        b {
+            white-space: nowrap;
+            overflow: unset;
+        }
+
+        span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .edit-button {
+        background-color: var(--iqser-grey-6);
+        width: 100%;
+        height: 50%;
+        border-radius: 4px;
+        position: absolute;
+        margin-left: -10px;
+
+        &.workflow-edit-button {
+            background-color: transparent;
+            position: relative;
+            top: 0;
+        }
+    }
+
+    .edit-icon {
+        z-index: 1;
+        background: white;
+        width: 23px;
+        height: 23px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        right: 0;
+        border-radius: 50%;
+        margin-top: -8px;
+        margin-right: -8px;
+
+        &.workflow-edit-icon {
+            background: none;
+            top: 0;
+            margin-right: 5px;
+            width: 14px;
+            height: 14px;
+        }
+
+        mat-icon {
+            width: 13px;
+            height: 13px;
+        }
+    }
+}
+
+.hide {
+    visibility: hidden;
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
similarity index 98%
rename from apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
rename to apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
index 3d297ac4c..be6de78e3 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
@@ -10,6 +10,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import dayjs from 'dayjs';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, map, tap } from 'rxjs/operators';
+import { ConfigService } from '../../config.service';
 
 @Component({
     selector: 'redaction-file-attribute [fileAttribute] [file] [dossier]',
@@ -34,6 +35,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         private readonly _listingService: ListingService<File>,
         readonly fileAttributesService: FileAttributesService,
         readonly helpModeService: HelpModeService,
+        readonly configService: ConfigService,
     ) {
         super();
         const sub = router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.close());
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
deleted file mode 100644
index 4ccdb5001..000000000
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="file-attribute">
-    <div class="value" (click)="editFileAttribute($event)">
-        <span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
-        <ng-template #date>
-            <span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
-        </ng-template>
-    </div>
-
-    <ng-container
-        *ngIf="
-            ((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
-            !file.isInitialProcessing &&
-            permissionsService.canEditFileAttributes(file, dossier)
-        "
-    >
-        <div
-            *ngIf="!isInEditMode; else input"
-            class="action-buttons edit-button"
-            [class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
-            (click)="editFileAttribute($event)"
-            [attr.help-mode-key]="'edit-file-attributes'"
-        >
-            <div class="edit-icon">
-                <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
-            </div>
-        </div>
-    </ng-container>
-</div>
-
-<ng-template #input>
-    <div class="edit-input" stopPropagation>
-        <form (submit)="save()" [formGroup]="form">
-            <iqser-dynamic-input
-                (closedDatepicker)="closedDatepicker = $event"
-                (keydown.escape)="close()"
-                [formControlName]="fileAttribute.id"
-                [id]="fileAttribute.id"
-                [type]="fileAttribute.type"
-            ></iqser-dynamic-input>
-
-            <iqser-circle-button (action)="save()" [disabled]="disabled" [icon]="'iqser:check'" class="save"></iqser-circle-button>
-
-            <iqser-circle-button (action)="close()" [icon]="'iqser:close'"></iqser-circle-button>
-        </form>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss
deleted file mode 100644
index 2abd763a1..000000000
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.file-attribute {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-
-    .value {
-        z-index: 1;
-    }
-
-    .edit-icon {
-        display: none;
-    }
-
-    .help-mode-button {
-        background-color: var(--iqser-grey-6);
-        width: 90%;
-        height: 50%;
-        border-radius: 4px;
-        position: absolute;
-        margin-left: -10px;
-    }
-
-    .edit-input {
-        cursor: default;
-        display: flex;
-        z-index: 2;
-        border: solid var(--iqser-grey-6);
-        border-radius: 10px;
-        background: var(--iqser-background);
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
-        margin-left: -10px;
-
-        form {
-            margin: 5px;
-            display: flex;
-            align-items: center;
-
-            iqser-dynamic-input {
-                margin-top: 0;
-            }
-
-            .save {
-                margin-left: 7px;
-            }
-        }
-    }
-}
-
-.file-attribute:hover {
-    .edit-button {
-        background-color: var(--iqser-grey-6);
-        width: 100%;
-        height: 50%;
-        border-radius: 4px;
-        position: absolute;
-        margin-left: -10px;
-    }
-
-    .edit-icon {
-        z-index: 1;
-        background: white;
-        width: 23px;
-        height: 23px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        right: 0;
-        border-radius: 50%;
-        margin-top: -8px;
-        margin-right: -8px;
-
-        mat-icon {
-            width: 13px;
-            height: 13px;
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
index 025dc3152..40cd96b34 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
@@ -20,8 +20,7 @@
     </div>
 
     <div *ngFor="let config of displayedAttributes" class="small-label mt-8 attribute">
-        <b> {{ config.label }} </b>
-        <span> {{ file.fileAttributes.attributeIdToValue[config.id] || '-' }} </span>
+        <redaction-file-attribute [file]="file" [dossier]="dossier" [fileAttribute]="config"></redaction-file-attribute>
     </div>
 
     <redaction-file-workload [file]="file"></redaction-file-workload>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
index f5f0111cf..230792a1c 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
@@ -26,7 +26,7 @@ import { FileWorkloadComponent } from './components/table-item/file-workload/fil
 import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
 import { DossierOverviewScreenHeaderComponent } from './components/screen-header/dossier-overview-screen-header.component';
 import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
-import { FileAttributeComponent } from './components/table-item/file-attribute/file-attribute.component';
+import { FileAttributeComponent } from './components/file-attribute/file-attribute.component';
 import { SharedModule } from '@shared/shared.module';
 
 const routes: IqserRoutes = [