diff --git a/appinfo/routes.php b/appinfo/routes.php
index 4f669ad09a..b2bd8c8e12 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -34,11 +34,6 @@
 			'url' => '/setup',
 			'verb' => 'GET'
 		],
-		[
-			'name' => 'page#accountSettings',
-			'url' => '/accounts/{id}/settings',
-			'verb' => 'GET'
-		],
 		[
 			'name' => 'page#mailbox',
 			'url' => '/box/{id}',
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index ce67d03005..488c5bebd3 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -165,16 +165,6 @@ public function setup(): TemplateResponse {
 		return $this->index();
 	}
 
-	/**
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return TemplateResponse
-	 */
-	public function accountSettings(int $id): TemplateResponse {
-		return $this->index();
-	}
-
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
diff --git a/package-lock.json b/package-lock.json
index 108f29d3e9..e63afbc8d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2949,9 +2949,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.8.1.tgz",
-      "integrity": "sha512-6a11iUyOs8cUbmzLdK+WZG7g7gTH2oDESU9o/J16+nKn6g3BlfH0iI/dWaqGiPuNiLy5CAqeQPvhx1UxaL/f5A==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.1.0.tgz",
+      "integrity": "sha512-BB3/6RM0yPw4+McZvda8CaL0JEFb4lXQ/7l8tZ1zgrY2jDCZpwnEMsizzK16KeX4dzx1HNyt4PPBlWaSoVvfuQ==",
       "requires": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
@@ -2989,6 +2989,41 @@
         "@nextcloud/vue": "^2.3.0",
         "core-js": "^3.6.4",
         "vue": "^2.6.11"
+      },
+      "dependencies": {
+        "@nextcloud/vue": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.8.1.tgz",
+          "integrity": "sha512-6a11iUyOs8cUbmzLdK+WZG7g7gTH2oDESU9o/J16+nKn6g3BlfH0iI/dWaqGiPuNiLy5CAqeQPvhx1UxaL/f5A==",
+          "requires": {
+            "@nextcloud/auth": "^1.2.3",
+            "@nextcloud/axios": "^1.3.2",
+            "@nextcloud/browser-storage": "^0.1.1",
+            "@nextcloud/capabilities": "^1.0.2",
+            "@nextcloud/dialogs": "^3.0.0",
+            "@nextcloud/event-bus": "^1.1.4",
+            "@nextcloud/l10n": "^1.2.3",
+            "@nextcloud/router": "^1.0.2",
+            "core-js": "^3.6.5",
+            "debounce": "1.2.0",
+            "emoji-mart-vue-fast": "^7.0.4",
+            "escape-html": "^1.0.3",
+            "hammerjs": "^2.0.8",
+            "linkifyjs": "~2.1.9",
+            "md5": "^2.2.1",
+            "regenerator-runtime": "^0.13.5",
+            "string-length": "^4.0.1",
+            "striptags": "^3.1.1",
+            "tributejs": "^5.1.3",
+            "v-click-outside": "^3.0.1",
+            "v-tooltip": "^2.0.3",
+            "vue": "^2.6.11",
+            "vue-color": "^2.7.1",
+            "vue-multiselect": "^2.1.6",
+            "vue-visible": "^1.0.2",
+            "vue2-datepicker": "^3.6.2"
+          }
+        }
       }
     },
     "@nodelib/fs.scandir": {
@@ -6018,7 +6053,7 @@
     },
     "domelementtype": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
       "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
     },
     "domexception": {
diff --git a/package.json b/package.json
index c1fa17c5af..9f5c7b7d01 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@nextcloud/logger": "^1.1.2",
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^1.2.0",
-    "@nextcloud/vue": "^2.8.1",
+    "@nextcloud/vue": "^3.1.0",
     "@nextcloud/vue-dashboard": "^1.0.1",
     "@vue/babel-preset-app": "^4.5.8",
     "color-convert": "^2.0.1",
diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
new file mode 100644
index 0000000000..229c1e1ff3
--- /dev/null
+++ b/src/components/AccountSettings.vue
@@ -0,0 +1,153 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<AppSettingsDialog
+		:open.sync="showSettings">
+		<AppSettingsSection
+			:title="t('mail', 'Account settings')">
+			<strong>{{ displayName }}</strong> &lt;{{ email }}&gt;
+			<a
+				v-if="!account.provisioned"
+				class="button icon-rename"
+				href="#account-form"
+				:title="t('mail', 'Change name')" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Alias settings')">
+			<AliasSettings v-if="!account.provisioned" :account="account" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Signature settings')">
+			<SignatureSettings :account="account" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Editor settings')">
+			<EditorSettings :account="account" />
+			<div v-if="!account.provisioned" class="section">
+				<h2>{{ t('mail', 'Mail server') }}</h2>
+				<div id="mail-settings">
+					<AccountForm
+						:key="account.accountId"
+						:display-name="displayName"
+						:email="email"
+						:save="onSave"
+						:account="account" />
+				</div>
+			</div>
+		</AppSettingsSection>
+	</AppSettingsDialog>
+</template>
+
+<script>
+import AccountForm from '../components/AccountForm'
+import EditorSettings from '../components/EditorSettings'
+import Logger from '../logger'
+import SignatureSettings from '../components/SignatureSettings'
+import AliasSettings from '../components/AliasSettings'
+import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog'
+import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection'
+
+export default {
+	name: 'AccountSettings',
+	components: {
+		AccountForm,
+		AliasSettings,
+		EditorSettings,
+		SignatureSettings,
+		AppSettingsDialog,
+		AppSettingsSection,
+	},
+	props: {
+		account: {
+			required: true,
+			type: Object,
+		},
+		open: {
+			required: true,
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			showSettings: false,
+		}
+	},
+	computed: {
+		menu() {
+			return this.buildMenu()
+		},
+		displayName() {
+			return this.account.name
+		},
+		email() {
+			return this.account.emailAddress
+		},
+	},
+	watch: {
+		showSettings(value) {
+			if (!value) {
+				this.$emit('update:open', value)
+			}
+		},
+		open(value) {
+			if (value) {
+				this.showSettings = true
+			}
+		},
+	},
+	methods: {
+		onSave(data) {
+			Logger.log('saving data', { data })
+			return this.$store
+				.dispatch('updateAccount', {
+					...data,
+					accountId: this.$route.params.accountId,
+				})
+				.then((account) => account)
+				.catch((error) => {
+					Logger.error('account update failed:', { error })
+
+					throw error
+				})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .modal-container {
+	display: block;
+	overflow: scroll;
+	transition: transform 300ms ease;
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 40px rgba(0,0,0,0.2);
+	padding: 30px 70px 20px;
+}
+.button.icon-rename {
+	background-image: var(--icon-rename-000);
+	background-color: var(--color-main-background);
+	border: none;
+	opacity: 0.7;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 6707396c5b..21873cb77a 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -130,6 +130,15 @@ input {
 }
 .icon-delete {
 	vertical-align: bottom;
+	background-image: var(--icon-delete-000);
+	background-color: var(--color-main-background);
+	border: none;
+	opacity: 0.7;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
 }
 .icon-add {
 	background-image: var(--icon-add-fff);
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index 20d1e56a96..643325ba70 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -38,9 +38,12 @@
 			<ActionText v-if="!account.isUnified" icon="icon-info" :title="t('mail', 'Quota')">
 				{{ quotaText }}
 			</ActionText>
-			<ActionRouter :to="settingsRoute" icon="icon-settings">
+			<ActionButton icon="icon-settings"
+				:close-after-click="true"
+				@click="showAccountSettings"
+				@shortkey="toggleAccountSettings">
 				{{ t('mail', 'Account settings') }}
-			</ActionRouter>
+			</ActionButton>
 			<ActionCheckbox
 				:checked="account.showSubscribedOnly"
 				:disabled="savingShowOnlySubscribed"
@@ -64,13 +67,16 @@
 				{{ t('mail', 'Remove account') }}
 			</ActionButton>
 		</template>
+
+		<template #extra>
+			<AccountSettings :open.sync="showSettings" :account="account" />
+		</template>
 	</AppNavigationItem>
 </template>
 
 <script>
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
-import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
@@ -78,16 +84,16 @@ import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 
+import AccountSettings from './AccountSettings'
 import { calculateAccountColor } from '../util/AccountColor'
 import logger from '../logger'
 import { fetchQuota } from '../service/AccountService'
-
 export default {
 	name: 'NavigationAccount',
 	components: {
+		AccountSettings,
 		AppNavigationItem,
 		AppNavigationIconBullet,
-		ActionRouter,
 		ActionButton,
 		ActionCheckbox,
 		ActionInput,
@@ -121,20 +127,13 @@ export default {
 			quota: undefined,
 			editing: false,
 			showSaving: false,
+			showSettings: false,
 		}
 	},
 	computed: {
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
 		},
-		settingsRoute() {
-			return {
-				name: 'accountSettings',
-				params: {
-					accountId: this.account.id,
-				},
-			}
-		},
 		firstMailboxRoute() {
 			return {
 				name: 'mailbox',
@@ -267,6 +266,18 @@ export default {
 				this.quota = quota
 			}
 		},
+		/**
+		 * Toggles the account settings overview
+		 */
+		toggleAccountSettings() {
+			this.displayAccountSettings = !this.displayAccountSettings
+		},
+		/**
+		 * Shows the account settings
+		 */
+		showAccountSettings() {
+			this.showSettings = true
+		},
 	},
 }
 </script>
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index 9cc3e9caac..09626b4320 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -112,7 +112,7 @@ export default {
 }
 
 .ck.ck-editor__editable_inline {
-	width: 400px;
+	width: 330px;
 	max-width: 78vw;
 	height: 100px;
 	border-radius: var(--border-radius) !important;
diff --git a/src/router.js b/src/router.js
index 5b00f696a5..313b831160 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,7 +2,6 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 
-const AccountSettings = () => import('./views/AccountSettings')
 const Home = () => import('./views/Home')
 const Setup = () => import('./views/Setup')
 
@@ -33,11 +32,6 @@ export default new Router({
 			name: 'message',
 			component: Home,
 		},
-		{
-			path: '/accounts/:accountId/settings',
-			name: 'accountSettings',
-			component: AccountSettings,
-		},
 		{
 			path: '/setup',
 			name: 'setup',
diff --git a/src/views/AccountSettings.vue b/src/views/AccountSettings.vue
deleted file mode 100644
index b51a31bc6f..0000000000
--- a/src/views/AccountSettings.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-	<Content app-name="mail">
-		<Navigation />
-		<AppContent>
-			<div class="section">
-				<h2>{{ t('mail', 'Account settings') }}</h2>
-				<p>
-					<strong>{{ displayName }}</strong> &lt;{{ email }}&gt;
-					<a
-						v-if="!account.provisioned"
-						class="button icon-rename"
-						href="#account-form"
-						:title="t('mail', 'Change name')" />
-				</p>
-				<AliasSettings v-if="!account.provisioned" :account="account" />
-			</div>
-			<SignatureSettings :account="account" />
-			<EditorSettings :account="account" />
-			<div v-if="!account.provisioned" class="section">
-				<h2>{{ t('mail', 'Mail server') }}</h2>
-				<div id="mail-settings">
-					<AccountForm
-						:key="account.accountId"
-						:display-name="displayName"
-						:email="email"
-						:save="onSave"
-						:account="account" />
-				</div>
-			</div>
-		</AppContent>
-	</Content>
-</template>
-
-<script>
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Content from '@nextcloud/vue/dist/Components/Content'
-
-import AccountForm from '../components/AccountForm'
-import EditorSettings from '../components/EditorSettings'
-import Logger from '../logger'
-import Navigation from '../components/Navigation'
-import SignatureSettings from '../components/SignatureSettings'
-import AliasSettings from '../components/AliasSettings'
-
-export default {
-	name: 'AccountSettings',
-	components: {
-		AccountForm,
-		AliasSettings,
-		AppContent,
-		Content,
-		EditorSettings,
-		Navigation,
-		SignatureSettings,
-	},
-	computed: {
-		menu() {
-			return this.buildMenu()
-		},
-		account() {
-			return this.$store.getters.getAccount(this.$route.params.accountId)
-		},
-		displayName() {
-			return this.$store.getters.getAccount(this.$route.params.accountId).name
-		},
-		email() {
-			return this.$store.getters.getAccount(this.$route.params.accountId).emailAddress
-		},
-	},
-	methods: {
-		onSave(data) {
-			Logger.log('saving data', { data })
-			return this.$store
-				.dispatch('updateAccount', {
-					...data,
-					accountId: this.$route.params.accountId,
-				})
-				.then((account) => account)
-				.catch((error) => {
-					Logger.error('account update failed:', { error })
-
-					throw error
-				})
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.button.icon-rename {
-	background-color: transparent;
-	border: none;
-	opacity: 0.3;
-
-	&:hover,
-	&:focus {
-		opacity: 1;
-	}
-}
-</style>