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 d6b7c1d29..3fb933fb7 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
@@ -11,10 +11,6 @@ import { SavedViewConfigService } from 'src/app/services/saved-view-config.servi
 import { Toast, ToastService } from 'src/app/services/toast.service';
 import { environment } from 'src/environments/environment';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { FilterEditorComponent } from 'src/app/components/filter-editor/filter-editor.component';
 
 @Component({
   selector: 'app-document-list',
@@ -71,6 +67,8 @@ export class DocumentListComponent implements OnInit {
   }
 
   applyFilterRules() {
+    console.log('applyFilterRules');
+
     this.list.filterRules = this.filterRules
   }
 
@@ -103,43 +101,4 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  filterByTag(tag_id: number) {
-    let filterRules = this.list.filterRules
-    if (filterRules.find(rule => rule.type.id == FILTER_HAS_TAG && rule.value == tag_id)) {
-      return
-    }
-
-    filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_HAS_TAG), value: tag_id})
-    this.filterRules = filterRules
-    this.applyFilterRules()
-  }
-
-  filterByCorrespondent(correspondent_id: number) {
-    let filterRules = this.list.filterRules
-    let existing_rule = filterRules.find(rule => rule.type.id == FILTER_CORRESPONDENT)
-    if (existing_rule && existing_rule.value == correspondent_id) {
-      return
-    } else if (existing_rule) {
-      existing_rule.value = correspondent_id
-    } else {
-      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_CORRESPONDENT), value: correspondent_id})
-    }
-    this.filterRules = filterRules
-    this.applyFilterRules()
-  }
-
-  filterByDocumentType(document_type_id: number) {
-    let filterRules = this.list.filterRules
-    let existing_rule = filterRules.find(rule => rule.type.id == FILTER_DOCUMENT_TYPE)
-    if (existing_rule && existing_rule.value == document_type_id) {
-      return
-    } else if (existing_rule) {
-      existing_rule.value = document_type_id
-    } else {
-      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_DOCUMENT_TYPE), value: document_type_id})
-    }
-    this.filterRules = filterRules
-    this.applyFilterRules()
-  }
-
 }
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/filter-editor/filter-editor.component.html
index 925b216bd..756110d13 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.html
@@ -73,11 +73,11 @@
   <div class="btn-group col-auto" ngbDropdown role="group">
     <button class="btn btn-outline-primary btn-sm" id="dropdownAdded" ngbDropdownToggle>Added</button>
   </div>
-</div>
 
-<button class="btn-link border-0 bg-transparent ml-3 text-muted" *ngIf="hasFilters()" (click)="clearClicked()">
-  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
-  </svg>
-  Clear
-</button>
+  <button class="btn btn-outline-secondary btn-sm" [disabled]="!hasFilters()" (click)="clearSelected()">
+    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+    </svg>
+    Clear all filters
+  </button>
+</div>
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
index ac0133f16..f4dc7162b 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
@@ -35,22 +35,11 @@ export class FilterEditorComponent implements OnInit {
   filterCorrespondentsText: string
   filterDocumentTypesText: string
 
-  newRuleClicked() {
-    this.filterRules.push({type: this.selectedRuleType, value: this.selectedRuleType.default})
-  }
-
-  removeRuleClicked(rule) {
-    let index = this.filterRules.findIndex(r => r == rule)
-    if (index > -1) {
-      this.filterRules.splice(index, 1)
-    }
-  }
-
-  applyClicked() {
+  applySelected() {
     this.apply.next()
   }
 
-  clearClicked() {
+  clearSelected() {
     this.filterRules.splice(0,this.filterRules.length)
     this.clear.next()
   }
@@ -71,38 +60,42 @@ export class FilterEditorComponent implements OnInit {
 
   toggleFilterByTag(tag_id: number) {
     let existingRuleIndex = this.findRuleIndex(FILTER_HAS_TAG, tag_id)
+    let filterRules = this.filterRules
     if (existingRuleIndex !== -1) {
-      let filterRules = this.filterRules
       filterRules.splice(existingRuleIndex, 1)
-      this.filterRules = filterRules
-      this.applyFilterRules()
     } else {
-      this.filterByTag(tag_id)
+      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_HAS_TAG), value: tag_id})
     }
+    this.filterRules = filterRules
+    this.applySelected()
   }
 
   toggleFilterByCorrespondent(correspondent_id: number) {
-    let existingRuleIndex = this.findRuleIndex(FILTER_CORRESPONDENT, correspondent_id)
-    if (existingRuleIndex !== -1) {
-      let filterRules = this.filterRules
-      filterRules.splice(existingRuleIndex, 1)
-      this.filterRules = filterRules
-      this.applyFilterRules()
+    let filterRules = this.filterRules
+    let existingRule = filterRules.find(rule => rule.type.id == FILTER_CORRESPONDENT)
+    if (existingRule && existingRule.value == correspondent_id) {
+      return
+    } else if (existingRule) {
+      existingRule.value = correspondent_id
     } else {
-      this.filterByCorrespondent(correspondent_id)
+      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_CORRESPONDENT), value: correspondent_id})
     }
+    this.filterRules = filterRules
+    this.applySelected()
   }
 
   toggleFilterByDocumentType(document_type_id: number) {
-    let existingRuleIndex = this.findRuleIndex(FILTER_DOCUMENT_TYPE, document_type_id)
-    if (existingRuleIndex !== -1) {
-      let filterRules = this.filterRules
-      filterRules.splice(existingRuleIndex, 1)
-      this.filterRules = filterRules
-      this.applyFilterRules()
+    let filterRules = this.filterRules
+    let existingRule = filterRules.find(rule => rule.type.id == FILTER_DOCUMENT_TYPE)
+    if (existingRule && existingRule.value == document_type_id) {
+      return
+    } else if (existingRule) {
+      existingRule.value = document_type_id
     } else {
-      this.filterByDocumentType(document_type_id)
+      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_DOCUMENT_TYPE), value: document_type_id})
     }
+    this.filterRules = filterRules
+    this.applySelected()
   }
 
   currentViewIncludesTag(tag_id: number) {