diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
index 7f8d42a1e..c12eabe47 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
@@ -9,28 +9,28 @@
     </div>
 </div>
 
-<div class="small-label stats-subtitle">
-    <div>
+<div class="stats-subtitle">
+    <div class="small-label">
         <mat-icon svgIcon="iqser:document"></mat-icon>
         {{ dossierStats.numberOfFiles }}
     </div>
 
-    <div>
+    <div class="small-label">
         <mat-icon svgIcon="iqser:pages"></mat-icon>
         {{ dossierStats.numberOfPages }}
     </div>
 
-    <div>
+    <div class="small-label">
         <mat-icon svgIcon="red:user"></mat-icon>
         {{ dossier.memberIds.length }}
     </div>
 
-    <div>
+    <div class="small-label">
         <mat-icon svgIcon="red:calendar"></mat-icon>
         {{ dossier.date | date: 'mediumDate' }}
     </div>
 
-    <div *ngIf="dossier.dueDate">
+    <div *ngIf="dossier.dueDate" [class.error]="passedDueDate" [class.warn]="approachingDueDate" class="small-label">
         <mat-icon svgIcon="red:lightning"></mat-icon>
         {{ dossier.dueDate | date: 'mediumDate' }}
     </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
index 5a270d9fc..3e5d2afc9 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
@@ -3,6 +3,9 @@ import { Dossier, DossierStats } from '@red/domain';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
+import * as moment from 'moment';
+
+const DUE_DATE_WARN_DAYS = 14;
 
 @Component({
     selector: 'redaction-dossiers-listing-dossier-name',
@@ -20,6 +23,18 @@ export class DossiersListingDossierNameComponent {
         private readonly _dossiersService: DossiersService,
     ) {}
 
+    get approachingDueDate(): boolean {
+        return this._dueDateDaysDiff >= 0 && this._dueDateDaysDiff <= DUE_DATE_WARN_DAYS;
+    }
+
+    get passedDueDate(): boolean {
+        return this._dueDateDaysDiff < 0;
+    }
+
+    private get _dueDateDaysDiff(): number {
+        return moment(this.dossier.dueDate).diff(moment(), 'days') + 1;
+    }
+
     getDossierTemplateNameFor(dossierTemplateId: string): string {
         return this._dossierTemplatesService.find(dossierTemplateId).name;
     }
diff --git a/libs/common-ui b/libs/common-ui
index 10ed48587..5341338d3 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 10ed48587427e7e6e4015dd905253ac87514d3db
+Subproject commit 5341338d36d55b63fb0ff08b0d5779b80ed5902f