diff --git a/src-ui/cypress/e2e/settings/settings.cy.ts b/src-ui/cypress/e2e/settings/settings.cy.ts
index 0f46df9a4..aa59997d4 100644
--- a/src-ui/cypress/e2e/settings/settings.cy.ts
+++ b/src-ui/cypress/e2e/settings/settings.cy.ts
@@ -73,7 +73,7 @@ describe('settings', () => {
     cy.contains('a', 'Dashboard').click()
     cy.contains('You have unsaved changes')
     cy.contains('button', 'Cancel').click()
-    cy.contains('button', 'Save').click().wait(2000)
+    cy.contains('button', 'Save').click().wait('@savedViews').wait(2000)
     cy.contains('a', 'Dashboard').click()
     cy.contains('You have unsaved changes').should('not.exist')
   })
diff --git a/src-ui/src/app/app-routing.module.ts b/src-ui/src/app/app-routing.module.ts
index c95d1ea7e..10a4ca301 100644
--- a/src-ui/src/app/app-routing.module.ts
+++ b/src-ui/src/app/app-routing.module.ts
@@ -166,6 +166,11 @@ const routes: Routes = [
           },
         },
       },
+      {
+        path: 'settings/:section',
+        component: SettingsComponent,
+        canDeactivate: [DirtyFormGuard],
+      },
       { path: 'tasks', component: TasksComponent },
     ],
   },
diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html
index 72a995fe9..36ef37704 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -227,6 +227,90 @@
       </ng-template>
     </li>
 
+    <li [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
+      <a ngbNavLink i18n>Mail</a>
+      <ng-template ngbNavContent>
+
+        <ng-container *ngIf="mailAccounts && mailRules">
+          <h4>
+            <ng-container i18n>Mail accounts</ng-container>
+            <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()">
+              <svg class="sidebaricon me-1" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+              </svg>
+              <ng-container i18n>Add Account</ng-container>
+            </button>
+          </h4>
+          <ul class="list-group" formGroupName="mailAccounts">
+
+              <li class="list-group-item">
+                <div class="row">
+                  <div class="col" i18n>Name</div>
+                  <div class="col" i18n>Server</div>
+                  <div class="col" i18n>Actions</div>
+                </div>
+              </li>
+
+              <li *ngFor="let account of mailAccounts" class="list-group-item" [formGroupName]="account.id">
+                <div class="row">
+                  <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailAccount(account)">{{account.name}}</button></div>
+                  <div class="col d-flex align-items-center">{{account.imap_server}}</div>
+                  <div class="col">
+                    <div class="btn-group">
+                      <button class="btn btn-sm btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button>
+                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)" i18n>Delete</button>
+                    </div>
+                  </div>
+                </div>
+              </li>
+
+              <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
+          </ul>
+
+          <h4 class="mt-4">
+            <ng-container i18n>Mail rules</ng-container>
+            <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailRule()">
+              <svg class="sidebaricon me-1" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+              </svg>
+              <ng-container i18n>Add Rule</ng-container>
+            </button>
+          </h4>
+          <ul class="list-group" formGroupName="mailRules">
+
+              <li class="list-group-item">
+                <div class="row">
+                  <div class="col" i18n>Name</div>
+                  <div class="col" i18n>Account</div>
+                  <div class="col" i18n>Actions</div>
+                </div>
+              </li>
+
+              <li *ngFor="let rule of mailRules" class="list-group-item" [formGroupName]="rule.id">
+                <div class="row">
+                  <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailRule(rule)">{{rule.name}}</button></div>
+                  <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
+                  <div class="col">
+                    <div class="btn-group">
+                      <button class="btn btn-sm btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button>
+                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)" i18n>Delete</button>
+                    </div>
+                  </div>
+                </div>
+              </li>
+
+              <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
+          </ul>
+        </ng-container>
+
+        <div *ngIf="!mailAccounts || !mailRules">
+          <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+          <div class="visually-hidden" i18n>Loading...</div>
+        </div>
+
+      </ng-template>
+    </li>
+
     <li *ifPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }" [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
       <a ngbNavLink i18n>Mail</a>
       <ng-template ngbNavContent>
diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts
index 917dbf4a0..dded419c7 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -31,7 +31,6 @@ import { ViewportScroller } from '@angular/common'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { NgbModal, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
-import { Results } from 'src/app/data/results'
 import { UserService } from 'src/app/services/rest/user.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { PaperlessUser } from 'src/app/data/paperless-user'