diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html
new file mode 100644
index 000000000..0078aa46a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html
@@ -0,0 +1,14 @@
+<div class="small-label stats-subtitle">
+    <div>
+        <mat-icon svgIcon="iqser:pages"></mat-icon>
+        {{ file.numberOfPages }}
+    </div>
+    <div>
+        <mat-icon svgIcon="red:exclude-pages"></mat-icon>
+        {{ file.excludedPages.length }}
+    </div>
+    <div *ngIf="file.lastOCRTime" [matTooltipPosition]="'above'" [matTooltip]="'dossier-overview.ocr-performed' | translate">
+        <mat-icon svgIcon="iqser:ocr"></mat-icon>
+        {{ file.lastOCRTime | date: 'mediumDate' }}
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts
new file mode 100644
index 000000000..e7b619086
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { File } from '@red/domain';
+
+@Component({
+    selector: 'redaction-file-stats',
+    templateUrl: './file-stats.component.html',
+    styleUrls: ['./file-stats.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileStatsComponent {
+    @Input() file: File;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html
new file mode 100644
index 000000000..072d80130
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html
@@ -0,0 +1,22 @@
+<div class="workflow-item">
+    <div>
+        <div class="details">
+            <div [matTooltip]="file.filename" class="filename" matTooltipPosition="above">
+                {{ file.filename }}
+            </div>
+
+            <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
+        </div>
+
+        <div class="user">
+            <redaction-initials-avatar [user]="file.currentReviewer"></redaction-initials-avatar>
+        </div>
+    </div>
+
+    <redaction-file-actions
+        (actionPerformed)="actionPerformed.emit($event)"
+        *ngIf="!file.isProcessing"
+        [file]="file"
+        type="dossier-overview-workflow"
+    ></redaction-file-actions>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss
new file mode 100644
index 000000000..75bdb518a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss
@@ -0,0 +1,34 @@
+@use 'common-mixins';
+
+.workflow-item {
+    padding: 10px;
+
+    > div {
+        display: flex;
+        justify-content: space-between;
+
+        .details {
+            max-width: calc(100% - 28px);
+
+            .filename {
+                font-weight: 600;
+                line-height: 18px;
+                @include common-mixins.line-clamp(1);
+            }
+        }
+
+        .user {
+            display: flex;
+            align-items: flex-end;
+        }
+    }
+
+    redaction-file-actions {
+        margin-top: 10px;
+        display: none;
+    }
+
+    &:hover redaction-file-actions {
+        display: block;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts
new file mode 100644
index 000000000..ace8c60da
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { File } from '@red/domain';
+
+@Component({
+    selector: 'redaction-workflow-item',
+    templateUrl: './workflow-item.component.html',
+    styleUrls: ['./workflow-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkflowItemComponent {
+    @Input() file: File;
+    @Input() statsTemplate: TemplateRef<unknown>;
+    @Output() readonly actionPerformed = new EventEmitter<string>();
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
index e3cfb523c..8a849ef77 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
@@ -12,6 +12,8 @@ import { TableItemComponent } from './components/table-item/table-item.component
 import { ConfigService } from './config.service';
 import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
 import { FileWorkloadColumnComponent } from './components/file-workload-column/file-workload-column.component';
+import { FileStatsComponent } from './components/file-stats/file-stats.component';
+import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
 
 const routes = [
     {
@@ -29,6 +31,8 @@ const routes = [
         DossierDetailsStatsComponent,
         FileWorkloadColumnComponent,
         TableItemComponent,
+        FileStatsComponent,
+        WorkflowItemComponent,
     ],
     providers: [ConfigService],
     imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
index 8b87b7aa1..4f7dc3d65 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
@@ -131,40 +131,13 @@
 </ng-template>
 
 <ng-template #workflowItemTemplate let-entity="entity">
-    <div *ngIf="cast(entity) as file" class="workflow-item">
-        <div>
-            <div class="details">
-                <div [matTooltip]="file.filename" class="filename" matTooltipPosition="above">
-                    {{ file.filename }}
-                </div>
-                <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
-            </div>
-            <div class="user">
-                <redaction-initials-avatar [user]="file.currentReviewer"></redaction-initials-avatar>
-            </div>
-        </div>
-        <redaction-file-actions
-            (actionPerformed)="actionPerformed($event, file)"
-            *ngIf="!file.isProcessing"
-            [file]="file"
-            type="dossier-overview-workflow"
-        ></redaction-file-actions>
-    </div>
+    <redaction-workflow-item
+        (actionPerformed)="actionPerformed($event, entity)"
+        [file]="entity"
+        [statsTemplate]="statsTemplate"
+    ></redaction-workflow-item>
 </ng-template>
 
 <ng-template #statsTemplate let-file="entity">
-    <div class="small-label stats-subtitle">
-        <div>
-            <mat-icon svgIcon="iqser:pages"></mat-icon>
-            {{ file.numberOfPages }}
-        </div>
-        <div>
-            <mat-icon svgIcon="red:exclude-pages"></mat-icon>
-            {{ file.excludedPages.length }}
-        </div>
-        <div *ngIf="file.lastOCRTime" [matTooltipPosition]="'above'" [matTooltip]="'dossier-overview.ocr-performed' | translate">
-            <mat-icon svgIcon="iqser:ocr"></mat-icon>
-            {{ file.lastOCRTime | date: 'mediumDate' }}
-        </div>
-    </div>
+    <redaction-file-stats [file]="file"></redaction-file-stats>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
index 6b70634b3..ca2488e7f 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
@@ -59,36 +59,3 @@
         margin-right: 8px;
     }
 }
-
-.workflow-item {
-    padding: 10px;
-
-    > div {
-        display: flex;
-        justify-content: space-between;
-
-        .details {
-            max-width: calc(100% - 28px);
-
-            .filename {
-                font-weight: 600;
-                line-height: 18px;
-                @include common-mixins.line-clamp(1);
-            }
-        }
-
-        .user {
-            display: flex;
-            align-items: flex-end;
-        }
-    }
-
-    redaction-file-actions {
-        margin-top: 10px;
-        display: none;
-    }
-
-    &:hover redaction-file-actions {
-        display: block;
-    }
-}