diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 887c2bdb2..e38588243 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div [class]="'container flex ' + direction">
   <svg attr.height="{{size}}" attr.width="{{size}}" attr.viewBox="0 0 {{size}} {{size}}" class="donut-chart">
     <g *ngFor="let value of parsedConfig; let i = index">
       <circle attr.cx="{{cx}}"
@@ -13,16 +13,16 @@
     </g>
   </svg>
 
-  <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px;'">
+  <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'">
     <div class="heading-xl">{{ dataTotal }}</div>
-    <div class="projects-text mt-5">{{ subtitle }}</div>
+    <div class="projects-text mt-5">{{ subtitle | translate }}</div>
   </div>
 
-  <div class="mt-20 breakdown-container">
+  <div class="breakdown-container">
     <div>
       <div *ngFor="let val of parsedConfig">
         <redaction-status-bar [small]="true"
-                              [config]="[{ length: val.value, color: val.color, label: val.value + ' ' + val.label}]">
+                              [config]="[{ length: val.value, color: val.color, label: val.value + ' ' + (val.label | translate | lowercase) }]">
         </redaction-status-bar>
       </div>
     </div>
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
index a1bcc530b..90889090e 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
@@ -3,8 +3,12 @@
 .container {
   position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  gap: 20px;
+
+  &.column {
+    flex-direction: column;
+  }
 }
 
 .text-container {
@@ -14,6 +18,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  box-sizing: border-box;
 }
 
 .breakdown-container {
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
index 848557486..d3797ecda 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
@@ -19,6 +19,7 @@ export class SimpleDoughnutChartComponent implements OnInit {
   @Input() angleOffset = -90;
   @Input() radius = 85;
   @Input() strokeWidth = 20;
+  @Input() direction: 'row' | 'column' = 'column';
 
   public chartData: any[] = [];
   public perimeter: number;
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 62c49abe6..4cd931581 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -105,7 +105,7 @@
     <div>
       <redaction-simple-doughnut-chart [config]="projectsChartData"
                                        [strokeWidth]="15"
-                                       [subtitle]="'project-listing.stats.charts.projects.label' | translate"
+                                       [subtitle]="'project-listing.stats.charts.projects.label'"
       ></redaction-simple-doughnut-chart>
 
       <div class="project-stats-container">
@@ -129,7 +129,7 @@
     <div>
       <redaction-simple-doughnut-chart [config]="documentsChartData"
                                        [strokeWidth]="15"
-                                       [subtitle]="'project-listing.stats.charts.total-documents.label' | translate"
+                                       [subtitle]="'project-listing.stats.charts.total-documents.label'"
       ></redaction-simple-doughnut-chart>
     </div>
   </div>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index c44752475..f1b7bd75d 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -41,8 +41,8 @@ export class ProjectListingScreenComponent implements OnInit {
   ngOnInit(): void {
     this.appStateService.reset();
     this.projectsChartData = [
-      { value: this.activeProjects, color: 'active', label: 'active-projects' },
-      { value: this.inactiveProjects, color: 'archived', label: 'Archived' }
+      { value: this.activeProjects, color: 'active', label: 'active' },
+      { value: this.inactiveProjects, color: 'archived', label: 'archived' }
     ];
     this.documentsChartData = [
       { value: this.appStateService.totalDocuments, color: 'unassigned', label: 'unassigned' },
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 3797dd911..8af169d8b 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -53,7 +53,8 @@
       <div class="flex-4 small-label min-width" translate="project-overview.table-col-names.added-on.label"></div>
       <div class="flex-2 small-label min-width" translate="project-overview.table-col-names.needs-work.label"></div>
       <div class="flex-2 small-label min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
-      <div class="flex-1 small-label status-container min-width" translate="project-overview.table-col-names.status.label"></div>
+      <div class="flex-1 small-label status-container min-width"
+           translate="project-overview.table-col-names.status.label"></div>
     </div>
 
     <div class="table-item"
@@ -168,5 +169,14 @@
         </div>
       </div>
     </div>
+
+    <div class="mt-20">
+      <redaction-simple-doughnut-chart [config]="documentsChartData"
+                                       [strokeWidth]="15"
+                                       [radius]="70"
+                                       [subtitle]="'project-overview.project-details.charts.total-documents.label'"
+                                       direction="row"
+      ></redaction-simple-doughnut-chart>
+    </div>
   </div>
 </div>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index 191695d9a..cd1d40493 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -1,5 +1,5 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import {
   FileStatus,
   FileUploadControllerService,
@@ -7,19 +7,20 @@ import {
   ReanalysisControllerService,
   StatusControllerService
 } from '@redaction/red-ui-http';
-import {NotificationService, NotificationType} from '../../notification/notification.service';
-import {TranslateService} from '@ngx-translate/core';
-import {ConfirmationDialogComponent} from '../../common/confirmation-dialog/confirmation-dialog.component';
-import {MatDialog} from '@angular/material/dialog';
-import {AppStateService} from '../../state/app-state.service';
-import {ProjectDetailsDialogComponent} from './project-details-dialog/project-details-dialog.component';
-import {FileDropOverlayService} from '../../upload/file-drop/service/file-drop-overlay.service';
-import {FileUploadModel} from "../../upload/model/file-upload.model";
-import {FileUploadService} from "../../upload/file-upload.service";
-import {UploadStatusOverlayService} from "../../upload/upload-status-dialog/service/upload-status-overlay.service";
-import {AddEditProjectDialogComponent} from "../project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component";
-import {UserService} from "../../user/user.service";
+import { NotificationService, NotificationType } from '../../notification/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { AppStateService } from '../../state/app-state.service';
+import { ProjectDetailsDialogComponent } from './project-details-dialog/project-details-dialog.component';
+import { FileDropOverlayService } from '../../upload/file-drop/service/file-drop-overlay.service';
+import { FileUploadModel } from '../../upload/model/file-upload.model';
+import { FileUploadService } from '../../upload/file-upload.service';
+import { UploadStatusOverlayService } from '../../upload/upload-status-dialog/service/upload-status-overlay.service';
+import { AddEditProjectDialogComponent } from '../project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component';
+import { UserService } from '../../user/user.service';
 import { SortingOption } from '../../utils/types';
+import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
 
 
 @Component({
@@ -28,7 +29,7 @@ import { SortingOption } from '../../utils/types';
   styleUrls: ['./project-overview-screen.component.scss']
 })
 export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
-  @ViewChild('dropzoneComponent', {static: true})
+  @ViewChild('dropzoneComponent', { static: true })
   dropZoneComponent;
 
   dragActive = false;
@@ -37,10 +38,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     { label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated' },
     { label: 'project-overview.sorting.alphabetically.label', order: 'asc', column: 'filename' },
     { label: 'project-overview.sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages' },
-    { label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' },
+    { label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' }
   ];
   public sortingOption: SortingOption = this.sortingOptions[0];
 
+  public documentsChartData: DoughnutChartConfig[] = [];
+
   projectId: string;
   private _fileStatusInterval;
 
@@ -71,6 +74,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this._fileDropOverlayService.initFileDropHandling();
+    this._calculateChartConfig();
     this._fileStatusInterval = setInterval(() => {
       this._getFileStatus();
     }, 5000);
@@ -120,7 +124,23 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
   }
 
   private _getFileStatus() {
-    this.appStateService.reloadActiveProjectFiles();
+    this.appStateService.reloadActiveProjectFiles().then(() => {
+      this._calculateChartConfig();
+    });
+  }
+
+  private _calculateChartConfig() {
+    const obj = this.appStateService.activeProject.files.reduce((acc, file) => {
+      console.log(file.status);
+      acc[file.status === 'PROCESSED' ? 'finished' : file.status === 'ERROR' ? 'under-approval' : 'under-review']++;
+      return acc;
+    }, { 'finished': 0, 'under-approval': 0, 'under-review': 0 });
+
+    this.documentsChartData = Object.keys(obj).map((key) => ({
+      value: obj[key],
+      color: key,
+      label: key
+    })) as DoughnutChartConfig[];
   }
 
   fileId(index, item) {
@@ -137,7 +157,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         progress: 0,
         completed: false,
         error: null
-      })
+      });
     }
 
     this._fileUploadService.uploadFiles(uploadFiles);
@@ -157,7 +177,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     $event.stopPropagation();
     const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
       width: '400px',
-      maxWidth: '90vw',
+      maxWidth: '90vw'
     });
 
     dialogRef.afterClosed().subscribe(result => {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 1e4509e72..6f6c8388e 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -329,6 +329,11 @@
     "project-details": {
       "project-team": {
         "label": "Project team"
+      },
+      "charts": {
+        "total-documents": {
+          "label": "Total Documents"
+        }
       }
     },
     "header": {
@@ -414,5 +419,14 @@
     "unassigned": {
       "label": "Unassigned"
     }
-  }
+  },
+  "unassigned": "Unassigned",
+  "under-review": "Under review",
+  "under-approval": "Under approval",
+  "efsa": "EFSA approval",
+  "finished": "Finished",
+  "approved": "Approved",
+  "submitted": "Submitted",
+  "active": "Active",
+  "archived": "Archived"
 }