diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 3bdf8a8ce..bb687632d 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -99,12 +99,54 @@
 <table class="table table-sm border shadow-sm" *ngIf="displayMode == 'details'">
   <thead>
     <th></th>
-    <th class="d-none d-lg-table-cell" i18n>ASN</th>
-    <th class="d-none d-md-table-cell" i18n>Correspondent</th>
-    <th i18n>Title</th>
-    <th class="d-none d-xl-table-cell" i18n>Document type</th>
-    <th i18n>Created</th>
-    <th class="d-none d-xl-table-cell" i18n>Added</th>
+    <th class="d-none d-lg-table-cell"
+      sortable="archive_serial_number"
+      [currentSortField]="list.sortField"
+      [currentSortReverse]="list.sortReverse"
+      (sort)="onSort($event)"
+      i18n>
+      ASN
+    </th>
+    <th class="d-none d-md-table-cell"
+      sortable="correspondent__name"
+      [currentSortField]="list.sortField"
+      [currentSortReverse]="list.sortReverse"
+      (sort)="onSort($event)"
+      i18n>
+      Correspondent
+    </th>
+    <th
+      sortable="title"
+      [currentSortField]="list.sortField"
+      [currentSortReverse]="list.sortReverse"
+      (sort)="onSort($event)"
+      i18n>
+      Title
+    </th>
+    <th class="d-none d-xl-table-cell"
+      sortable="document_type__name"
+      [currentSortField]="list.sortField"
+      [currentSortReverse]="list.sortReverse"
+      (sort)="onSort($event)"
+      i18n>
+      Document type
+    </th>
+    <th
+      sortable="created"
+      [currentSortField]="list.sortField"
+      [currentSortReverse]="list.sortReverse"
+      (sort)="onSort($event)"
+      i18n>
+      Created
+    </th>
+    <th class="d-none d-xl-table-cell"
+      sortable="added"
+      [currentSortField]="list.sortField"
+      [currentSortReverse]="list.sortReverse"
+      (sort)="onSort($event)"
+      i18n>
+      Added
+    </th>
   </thead>
   <tbody>
     <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 1f29cb901..84daf7e22 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
+import { SortableDirective, SortEvent } from 'src/app/directives/sortable.directive';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
@@ -28,6 +29,8 @@ export class DocumentListComponent implements OnInit {
   @ViewChild("filterEditor")
   private filterEditor: FilterEditorComponent
 
+  @ViewChildren(SortableDirective) headers: QueryList<SortableDirective>;
+  
   displayMode = 'smallCards' // largeCards, smallCards, details
 
   get isFiltered() {
@@ -42,6 +45,10 @@ export class DocumentListComponent implements OnInit {
     return DOCUMENT_SORT_FIELDS
   }
 
+  onSort(event: SortEvent) {
+    this.list.setSort(event.column, event.reverse)
+  }
+
   get isBulkEditing(): boolean {
     return this.list.selected.size > 0
   }
@@ -73,7 +80,6 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-
   loadViewConfig(view: PaperlessSavedView) {
     this.list.load(view)
     this.list.reload()
diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
index 4abc72037..c04a0bcfe 100644
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
@@ -9,10 +9,10 @@
 <table class="table table-striped border shadow">
     <thead>
     <tr>
-      <th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
-      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
-      <th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
-      <th scope="col" sortable="last_correspondence" (sort)="onSort($event)" i18n>Last correspondence</th>
+      <th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" sortable="last_correspondence" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Last correspondence</th>
       <th scope="col" i18n>Actions</th>
     </tr>
     </thead>
diff --git a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
index e18d3ec00..0282ae863 100644
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
@@ -10,9 +10,9 @@
 <table class="table table-striped border shadow">
   <thead>
     <tr>
-      <th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
-      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
-      <th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
       <th scope="col" i18n>Actions</th>
     </tr>
   </thead>
diff --git a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
index 7f4e4dbd2..e1d5226f3 100644
--- a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
+++ b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
@@ -39,21 +39,8 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
   }
 
   onSort(event: SortEvent) {
-
-    if (event.sorted) {
-      this.sortField = event.column
-      this.sortReverse = event.reverse
-    } else {
-      this.sortField = null
-      this.sortReverse = false
-    }
-
-    this.headers.forEach(header => {
-      if (header.sortable !== this.sortField) {
-        header.sorted = false
-      }
-    });
-
+    this.sortField = event.column
+    this.sortReverse = event.reverse
     this.reloadData()
   }
 
diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.html b/src-ui/src/app/components/manage/tag-list/tag-list.component.html
index 43126f7b2..4af22b3cd 100644
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.html
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.html
@@ -10,10 +10,10 @@
 <table class="table table-striped border shadow-sm">
   <thead>
     <tr>
-      <th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
       <th scope="col" i18n>Color</th>
-      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
-      <th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
       <th scope="col" i18n>Actions</th>
     </tr>
   </thead>
diff --git a/src-ui/src/app/directives/sortable.directive.ts b/src-ui/src/app/directives/sortable.directive.ts
index 18892a846..22750273d 100644
--- a/src-ui/src/app/directives/sortable.directive.ts
+++ b/src-ui/src/app/directives/sortable.directive.ts
@@ -2,15 +2,14 @@ import { Directive, EventEmitter, Input, Output } from '@angular/core';
 
 export interface SortEvent {
   column: string
-  sorted: boolean
   reverse: boolean
 }
 
 @Directive({
   selector: 'th[sortable]',
   host: {
-    '[class.asc]': 'sorted && !reverse',
-    '[class.des]': 'sorted && reverse',
+    '[class.asc]': 'currentSortField == sortable && !currentSortReverse',
+    '[class.des]': 'currentSortField == sortable && currentSortReverse',
     '(click)': 'rotate()'
   }
 })
@@ -22,22 +21,20 @@ export class SortableDirective {
   sortable: string = '';
 
   @Input()
-  sorted: boolean = false
+  currentSortReverse: boolean = false
 
   @Input()
-  reverse: boolean = false
+  currentSortField: string
 
   @Output() sort = new EventEmitter<SortEvent>();
 
   rotate() {
-    if (!this.sorted) {
-      this.sorted = true
-      this.reverse = false
-    } else if (this.sorted && !this.reverse) {
-      this.reverse = true
+    if (this.currentSortField != this.sortable) {
+      this.sort.emit({column: this.sortable, reverse: false});
+    } else if (this.currentSortField == this.sortable && !this.currentSortReverse) {
+      this.sort.emit({column: this.currentSortField, reverse: true});
     } else {
-      this.sorted = false
+      this.sort.emit({column: null, reverse: false});
     }
-    this.sort.emit({column: this.sortable, sorted: this.sorted, reverse: this.reverse});
   }
 }