diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index e4f17c4e6..b70a04103 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -1,4 +1,4 @@
-  <div class="btn-group" ngbDropdown role="group">
+  <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
   </button>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index b09491683..fc74eb4e9 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -1,11 +1,9 @@
-<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
+<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
-    <div class="d-none d-md-inline">{{title}}</div>
-    <div class="d-inline-block d-md-none">
-      <svg class="toolbaricon" fill="currentColor">
-        <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
-      </svg>
-    </div>
+    <svg class="toolbaricon" fill="currentColor">
+      <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
+    </svg>
+    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
         {{selectionModel.selectionSize()}}
diff --git a/src-ui/src/app/components/common/page-header/page-header.component.html b/src-ui/src/app/components/common/page-header/page-header.component.html
index fccce9b98..1174ee044 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/src-ui/src/app/components/common/page-header/page-header.component.html
@@ -1,9 +1,9 @@
-<div class="row pt-3 pb-1 mb-3 border-bottom align-items-center" >
+<div class="row pt-3 pb-3 pb-md-1 mb-3 border-bottom align-items-center">
   <div class="col-md text-truncate">
     <p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p>
     <p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p>
   </div>
-  <div class="btn-toolbar col-auto">
+  <div class="btn-toolbar col col-md-auto">
     <ng-content></ng-content>
   </div>
 </div>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index cb5ae98fc..d3d736aa2 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -1,5 +1,5 @@
 <app-page-header [(title)]="title">
-    <div class="input-group input-group-sm mr-5" *ngIf="getContentType() == 'application/pdf'">
+    <div class="input-group input-group-sm mr-5 d-none d-md-flex" *ngIf="getContentType() == 'application/pdf'">
       <div class="input-group-prepend">
         <div class="input-group-text" i18n>Page</div>
       </div>
@@ -9,7 +9,7 @@
       </div>
     </div>
 
-    <button type="button" class="btn btn-sm btn-outline-danger mr-2" (click)="delete()">
+    <button type="button" class="btn btn-sm btn-outline-danger mr-2 ml-auto" (click)="delete()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#trash" />
         </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Delete</span>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index b9912ec1d..053126445 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -6,8 +6,7 @@
       </svg>&nbsp;<ng-container i18n>Cancel</ng-container>
     </button>
   </div>
-  <div class="w-100 d-xl-none"></div>
-  <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
+  <div class="col-auto mb-2 mb-xl-0 ml-auto ml-md-0" role="group" aria-label="Select">
     <label class="mr-2 mb-0" i18n>Select:</label>
     <div class="btn-group">
       <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
@@ -56,9 +55,8 @@
       </app-filterable-dropdown>
     </div>
   </div>
-  <div class="w-100 d-xl-none"></div>
-  <div class="col mb-2 mb-xl-0 d-flex">
-    <button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
+  <div class="col-auto ml-auto mb-2 mb-xl-0 d-flex">
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />
       </svg>&nbsp;<ng-container i18n>Delete</ng-container>
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 8ba77a815..612238215 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
@@ -1,11 +1,10 @@
 <app-page-header [title]="getTitle()">
 
-  <div ngbDropdown class="d-inline-block mr-2">
-    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
+  <div ngbDropdown class="mr-2 flex-fill d-flex">
+    <button class="btn btn-sm btn-outline-primary flex-fill" id="dropdownSelect" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
       </svg>&nbsp;<ng-container i18n>Select</ng-container>
-
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
       <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
@@ -14,7 +13,7 @@
     </div>
   </div>
 
-  <div class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="displayMode"
+  <div class="btn-group btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="displayMode"
     (ngModelChange)="saveDisplayMode()">
     <label ngbButtonLabel class="btn-outline-primary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="details">
@@ -36,43 +35,42 @@
     </label>
   </div>
 
-  <div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="list.sortReverse">
-    <div ngbDropdown class="btn-group">
-      <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort by</button>
-      <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
+  <div ngbDropdown class="btn-group ml-2 flex-fill">
+    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort</button>
+    <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
+      <div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="list.sortReverse">
+        <label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
+          <input ngbButton type="radio" class="btn btn-sm" [value]="false">
+          <svg class="toolbaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
+          </svg>
+        </label>
+        <label ngbButtonLabel class="btn-outline-primary btn-sm mr-2 flex-fill">
+          <input ngbButton type="radio" class="btn btn-sm" [value]="true">
+          <svg class="toolbaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
+          </svg>
+        </label>
+      </div>
+      <div>
         <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
-          [class.active]="list.sortField == f.field">{{f.name}}</button>
+          [class.active]="list.sortField == f.field">{{f.name}}
+        </button>
       </div>
     </div>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn btn-sm" [value]="false">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
-      </svg>
-    </label>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn btn-sm" [value]="true">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
-      </svg>
-    </label>
   </div>
 
-  <div class="btn-group ml-2">
+  <div class="btn-group ml-2 flex-fill" ngbDropdown role="group">
+    <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
+    <div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
+      <ng-container *ngIf="!list.savedViewId">
+        <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
+        <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
+      </ng-container>
 
-    <div class="btn-group" ngbDropdown role="group">
-      <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle i18n>Views</button>
-      <div class="dropdown-menu shadow" ngbDropdownMenu>
-        <ng-container *ngIf="!list.savedViewId">
-          <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
-          <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
-        </ng-container>
-
-        <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
-        <button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
-      </div>
+      <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
+      <button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
     </div>
-
   </div>
 
 </app-page-header>
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index d7c08abec..f90a94be4 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -25,3 +25,8 @@ $paperless-card-breakpoints: (
     }
   }
 }
+
+.dropdown-menu-right {
+  right: 0 !important;
+  left: auto !important;
+}
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 415f9d459..033596f53 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -1,14 +1,14 @@
 <div class="row">
    <div class="col mb-2 mb-xl-0">
-     <div class="form-inline d-flex">
-         <label class="text-muted mr-2" i18n>Filter by:</label>
-         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder>
+     <div class="form-inline d-flex align-items-center">
+         <label class="text-muted mr-2 mb-0" i18n>Filter by:</label>
+         <input class="form-control form-control-sm flex-fill w-auto" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder>
      </div>
   </div>
   <div class="w-100 d-xl-none"></div>
     <div class="col col-xl-auto mb-2 mb-xl-0">
       <div class="d-flex">
-        <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" i18n-title
+        <app-filterable-dropdown class="mr-2 flex-fill" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
           [items]="tags"
           [(selectionModel)]="tagSelectionModel"
@@ -16,21 +16,21 @@
           [multiple]="true"
           (open)="onTagsDropdownOpen()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" i18n-title
+        <app-filterable-dropdown class="mr-2 flex-fill" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
           [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
           (selectionModelChange)="updateRules()"
           (open)="onCorrespondentDropdownOpen()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="mr-2 mr-md-3" title="Document type" icon="file-earmark-fill" i18n-title
+        <app-filterable-dropdown class="mr-2 flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
           filterPlaceholder="Filter document types" i18n-filterPlaceholder
           [items]="documentTypes"
           [(selectionModel)]="documentTypeSelectionModel"
           (open)="onDocumentTypeDropdownOpen()"
           (selectionModelChange)="updateRules()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-date-dropdown class="mr-2 mr-md-3"
+        <app-date-dropdown class="mr-2"
           title="Created" i18n-title
           (datesSet)="updateRules()"
           [(dateBefore)]="dateCreatedBefore"
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index a58745b21..93483bca8 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -84,7 +84,7 @@ $border-color-dark-mode: #47494f;
   }
 
   .dropdown-menu {
-    background-color: $bg-dark-mode;
+    background-color: $bg-light-dark-mode;
 
     .dropdown-divider {
       border-color: $border-color-dark-mode;