diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
index 7379e3003..0b74f9a20 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
@@ -53,29 +53,22 @@
         [config]="documentsChartData"
         [radius]="70"
         [strokeWidth]="15"
-        [subtitle]="'project-overview.project-details.charts.total-documents'"
+        [subtitle]="'project-overview.project-details.charts.documents-in-project'"
         direction="row"
     ></redaction-simple-doughnut-chart>
 </div>
 
 <div class="mt-24 legend" *ngIf="hasFiles">
-    <div>
+    <div
+        *ngFor="let filter of filters.needsWorkFilters"
+        class="annotation"
+        [class.active]="filter.checked"
+        (click)="toggleFilter(filter.key)"
+    >
         <redaction-annotation-icon
-            [typeValue]="appStateService.getDictionaryTypeValue('hint')"
+            [typeValue]="appStateService.getDictionaryTypeValue(filter.key.slice(0, -1))"
         ></redaction-annotation-icon>
-        {{ 'project-overview.legend.contains-hints' | translate }}
-    </div>
-    <div>
-        <redaction-annotation-icon
-            [typeValue]="appStateService.getDictionaryTypeValue('redaction')"
-        ></redaction-annotation-icon>
-        {{ 'project-overview.legend.contains-redactions' | translate }}
-    </div>
-    <div>
-        <redaction-annotation-icon
-            [typeValue]="appStateService.getDictionaryTypeValue('request')"
-        ></redaction-annotation-icon>
-        {{ 'project-overview.legend.contains-suggestions' | translate }}
+        {{ 'project-overview.legend.' + filter.key | translate }}
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
index 2a0234af9..ac0ffd3c8 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/styles/red-variables';
+
 .members-container {
     gap: 5px;
 }
@@ -5,12 +7,24 @@
 .legend {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
+    margin-left: -8px;
 
     > div {
         display: flex;
         gap: 8px;
         align-items: center;
+        border-radius: 4px;
+        cursor: pointer;
+        padding: 3px 8px;
+
+        &:hover {
+            background-color: $grey-6;
+        }
+
+        &.active {
+            background-color: rgba($primary, 0.1);
+        }
     }
 }
 
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
index 384cf25af..f6f1baf33 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { AppStateService } from '../../../state/app-state.service';
 import { UserService } from '../../../user/user.service';
 import { groupBy } from '../../../utils/functions';
 import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { DialogService } from '../../../dialogs/dialog.service';
 import { Router } from '@angular/router';
+import { FilterModel } from '../../../common/filter/model/filter.model';
 
 @Component({
     selector: 'redaction-project-details',
@@ -13,7 +14,9 @@ import { Router } from '@angular/router';
 })
 export class ProjectDetailsComponent implements OnInit {
     public documentsChartData: DoughnutChartConfig[] = [];
-    @Output() public reloadProjects = new EventEmitter<void>();
+    @Input() public filters: { needsWorkFilters: FilterModel[] };
+    @Output() public reloadProjects = new EventEmitter();
+    @Output() public filtersChanged = new EventEmitter();
 
     constructor(
         public readonly appStateService: AppStateService,
@@ -55,7 +58,7 @@ export class ProjectDetailsComponent implements OnInit {
         );
     }
 
-    public openAssignProjectMembersDialog() {
+    public openAssignProjectMembersDialog(): void {
         this._dialogService.openAssignProjectMembersAndOwnerDialog(
             null,
             this.appStateService.activeProject.project,
@@ -65,12 +68,12 @@ export class ProjectDetailsComponent implements OnInit {
         );
     }
 
-    public downloadRedactionReport($event: MouseEvent) {
+    public downloadRedactionReport($event: MouseEvent): void {
         $event.stopPropagation();
         this.appStateService.downloadRedactionReport();
     }
 
-    public calculateChartConfig() {
+    public calculateChartConfig(): void {
         if (this.appStateService.activeProject) {
             const groups = groupBy(this.appStateService.activeProject?.files, 'status');
             this.documentsChartData = [];
@@ -80,7 +83,13 @@ export class ProjectDetailsComponent implements OnInit {
         }
     }
 
-    get hasFiles() {
+    get hasFiles(): boolean {
         return this.appStateService.activeProject.hasFiles;
     }
+
+    public toggleFilter(key: string): void {
+        const filter = this.filters.needsWorkFilters.find((f) => f.key === key);
+        filter.checked = !filter.checked;
+        this.filtersChanged.emit(this.filters);
+    }
 }
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 ae76eb713..170294da4 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
@@ -334,6 +334,8 @@
         <redaction-project-details
             #projectDetailsComponent
             (reloadProjects)="reloadProjects()"
+            [filters]="detailsContainerFilters"
+            (filtersChanged)="filtersChanged($event)"
         ></redaction-project-details>
     </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 4f0df4abb..952e07dd4 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
@@ -19,7 +19,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { FileActionService } from '../file/service/file-action.service';
 import { FilterModel } from '../../common/filter/model/filter.model';
 import * as moment from 'moment';
-import { SortingComponent, SortingOption } from '../../components/sorting/sorting.component';
+import { SortingOption } from '../../components/sorting/sorting.component';
 import { ProjectDetailsComponent } from './project-details/project-details.component';
 import { FileStatusWrapper } from '../file/model/file-status.wrapper';
 import {
@@ -45,6 +45,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
     public displayedFiles: FileStatusWrapper[] = [];
 
+    public detailsContainerFilters: { needsWorkFilters: FilterModel[] };
+
     @ViewChild('projectDetailsComponent', { static: true })
     private _projectDetailsComponent: ProjectDetailsComponent;
 
@@ -314,7 +316,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         });
     }
 
-    filtersChanged() {
+    filtersChanged(filters?: { [key: string]: FilterModel[] }): void {
+        if (filters) {
+            for (const key of Object.keys(filters)) {
+                this[key] = filters[key];
+            }
+        }
         this._filterFiles();
     }
 
@@ -328,6 +335,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
             this.appStateService.activeProject.files,
             filters
         );
+        this.detailsContainerFilters = {
+            needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f }))
+        };
         this._changeDetectorRef.detectChanges();
     }
 
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index be31eb3e7..08372d28b 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -224,7 +224,7 @@
         },
         "project-details": {
             "charts": {
-                "total-documents": "Total Documents"
+                "documents-in-project": "Documents in Project"
             },
             "stats": {
                 "documents": "{{count}} documents",
@@ -239,9 +239,9 @@
         "upload-document": "Upload Document",
         "no-project": "Requested project: {{projectId}} does not exist! <a href='/ui/projects'>Back to Project Listing. <a/>",
         "legend": {
-            "contains-hints": "Hints only ",
-            "contains-redactions": "Redacted ",
-            "contains-suggestions": "Suggested Redaction "
+            "hints": "Hints only",
+            "redactions": "Redacted",
+            "suggestions": "Suggested Redaction"
         }
     },
     "file-preview": {