diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
index cb5500ab6..d66727109 100644
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
+++ b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
@@ -13,7 +13,7 @@
                     <mat-icon svgIcon="red:archive"></mat-icon>
                     <span
                         [innerHTML]="
-                            'dossier-template-stats.archived-dossiers' | translate: { count: dossierTemplate.numberOfArchivedDossiers }
+                            'dossier-template-stats.archived-dossiers' | translate : { count: dossierTemplate.numberOfArchivedDossiers }
                         "
                     ></span>
                 </div>
@@ -21,28 +21,30 @@
                     <mat-icon svgIcon="iqser:trash"></mat-icon>
                     <span
                         [innerHTML]="
-                            'dossier-template-stats.deleted-dossiers' | translate: { count: dossierTemplate.numberOfDeletedDossiers }
+                            'dossier-template-stats.deleted-dossiers' | translate : { count: dossierTemplate.numberOfDeletedDossiers }
                         "
                     ></span>
                 </div>
                 <div>
                     <mat-icon svgIcon="red:user"></mat-icon>
-                    <span [innerHTML]="'dossier-template-stats.total-people' | translate: { count: dossierTemplate.numberOfPeople }"></span>
+                    <span
+                        [innerHTML]="'dossier-template-stats.total-people' | translate : { count: dossierTemplate.numberOfPeople }"
+                    ></span>
                 </div>
                 <div>
                     <mat-icon svgIcon="iqser:pages"></mat-icon>
                     <span
-                        [innerHTML]="'dossier-template-stats.analyzed-pages' | translate: { count: dossierTemplate.numberOfPages }"
+                        [innerHTML]="'dossier-template-stats.analyzed-pages' | translate : { count: dossierTemplate.numberOfPages }"
                     ></span>
                 </div>
             </div>
         </div>
         <div class="flex-3">
             <redaction-donut-chart
-                [config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartConfig, dossierTemplate.id)"
+                [config]="translateChartService.translateAndSortDossierStates(dossierTemplate.dossiersChartConfig, dossierTemplate.id)"
                 [radius]="63"
                 [strokeWidth]="15"
-                [subtitles]="['dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }]"
+                [subtitles]="['dossier-template-stats.active-dossiers' | translate : { count: dossierTemplate.numberOfActiveDossiers }]"
                 direction="row"
                 totalType="sum"
             ></redaction-donut-chart>
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index 283137f18..7bfaf8bb1 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -23,7 +23,7 @@ export class DossiersListingDetailsComponent {
 
         this.dossiersChartConfig$ = this.stats$.pipe(
             map(stats => stats.dossiersChartConfig),
-            map(data => _translateChartService.translateDossierStates(data, dossierTemplateId)),
+            map(data => _translateChartService.translateAndSortDossierStates(data, dossierTemplateId)),
         );
         this.documentsChartConfig$ = this.stats$.pipe(
             map(stats => stats.documentsChartConfig),
diff --git a/apps/red-ui/src/app/services/translate-chart.service.ts b/apps/red-ui/src/app/services/translate-chart.service.ts
index 243789b98..f7ab76dbc 100644
--- a/apps/red-ui/src/app/services/translate-chart.service.ts
+++ b/apps/red-ui/src/app/services/translate-chart.service.ts
@@ -5,6 +5,23 @@ import { rolesTranslations } from '@translations/roles-translations';
 import { workflowFileStatusTranslations } from '@translations/file-status-translations';
 import { DossierStatesMapService } from './entity-services/dossier-states-map.service';
 
+function sortStatesByRank(
+    a: DonutChartConfig,
+    b: DonutChartConfig,
+    dossierTemplateId: string,
+    dossierStatesMapService: DossierStatesMapService,
+): number {
+    if (a.key === 'undefined') {
+        return 1;
+    }
+    if (b.key === 'undefined') {
+        return -1;
+    }
+    const aState = dossierStatesMapService.get(dossierTemplateId, a.key);
+    const bState = dossierStatesMapService.get(dossierTemplateId, b.key);
+    return aState.rank - bState.rank;
+}
+
 @Injectable({
     providedIn: 'root',
 })
@@ -15,18 +32,23 @@ export class TranslateChartService {
         return config.map(val => ({ ...val, label: this._translateService.instant(val.label) }));
     }
 
-    translateDossierStates(config: DonutChartConfig[], dossierTemplateId: string): DonutChartConfig[] {
-        return config.map(val => {
-            if (val.key === 'undefined') {
-                return { ...val, label: this._translateService.instant(val.label) };
-            }
-            const dossierState = this._dossierStatesMapService.get(dossierTemplateId, val.key);
-            return { ...val, label: dossierState.name, color: dossierState.color };
-        });
+    translateAndSortDossierStates(config: DonutChartConfig[], dossierTemplateId: string): DonutChartConfig[] {
+        return config
+            .map(val => {
+                if (val.key === 'undefined') {
+                    return { ...val, label: this._translateService.instant(val.label) };
+                }
+                const dossierState = this._dossierStatesMapService.get(dossierTemplateId, val.key);
+                return { ...val, label: dossierState.name, color: dossierState.color };
+            })
+            .sort((a: DonutChartConfig, b: DonutChartConfig) => sortStatesByRank(a, b, dossierTemplateId, this._dossierStatesMapService));
     }
 
     translateWorkflowStatus(config: DonutChartConfig[]): DonutChartConfig[] {
-        return config.map(val => ({ ...val, label: this._translateService.instant(workflowFileStatusTranslations[val.label] as string) }));
+        return config.map(val => ({
+            ...val,
+            label: this._translateService.instant(workflowFileStatusTranslations[val.label] as string),
+        }));
     }
 
     translateRoles(config: DonutChartConfig[]): DonutChartConfig[] {