diff --git a/package-lock.json b/package-lock.json
index 1e6a218f3c..a5c18caaa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "@nextcloud/logger": "^2.3.0",
         "@nextcloud/moment": "^1.2.1",
         "@nextcloud/router": "^2.0.0",
-        "@nextcloud/vue": "^6.0.0-beta.6",
+        "@nextcloud/vue": "^7.0.0-beta.0",
         "@nextcloud/vue-dashboard": "^2",
         "@riophae/vue-treeselect": "^0.4.0",
         "@vue/babel-preset-app": "^5.0.8",
@@ -3550,9 +3550,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "6.0.0-beta.6",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.6.tgz",
-      "integrity": "sha512-abJA+mHwHGcKw5AJ8KTOI2NstCr5Cdz/W6REc+eshs/zer4rHqW9XwJvYrfxDbDHIN0OSzIqJ/aoWkOxI28U6Q==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.0.0-beta.0.tgz",
+      "integrity": "sha512-/LDDDokRDCvR4dm0U6AV1OOGycCjYNvp3M0bFX1iJJdFig/BCqJI00js9wIXi4g02fBEsOu0Ae3+wQmUuQqm/A==",
       "dependencies": {
         "@nextcloud/auth": "^2.0.0",
         "@nextcloud/axios": "^2.0.0",
@@ -17484,9 +17484,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "6.0.0-beta.6",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.6.tgz",
-      "integrity": "sha512-abJA+mHwHGcKw5AJ8KTOI2NstCr5Cdz/W6REc+eshs/zer4rHqW9XwJvYrfxDbDHIN0OSzIqJ/aoWkOxI28U6Q==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.0.0-beta.0.tgz",
+      "integrity": "sha512-/LDDDokRDCvR4dm0U6AV1OOGycCjYNvp3M0bFX1iJJdFig/BCqJI00js9wIXi4g02fBEsOu0Ae3+wQmUuQqm/A==",
       "requires": {
         "@nextcloud/auth": "^2.0.0",
         "@nextcloud/axios": "^2.0.0",
diff --git a/package.json b/package.json
index f25c892e14..0ee755fc89 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@nextcloud/logger": "^2.3.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^6.0.0-beta.6",
+    "@nextcloud/vue": "^7.0.0-beta.0",
     "@nextcloud/vue-dashboard": "^2",
     "@riophae/vue-treeselect": "^0.4.0",
     "@vue/babel-preset-app": "^5.0.8",
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index cd27a511b3..829bdf4c5d 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -1,24 +1,27 @@
 <template>
 	<Content app-name="mail">
 		<Navigation v-if="hasAccounts" />
-		<div class="mail-empty-content">
-			<EmptyContent :title="t('mail', 'Connect your mail account')">
-				<template #icon>
-					<IconMail :size="65" />
-				</template>
-				<template #action>
-					<AccountForm :display-name="displayName"
-						:email="email"
-						:error.sync="error"
-						@account-created="onAccountCreated" />
-				</template>
-			</EmptyContent>
-		</div>
+		<AppContent>
+			<div class="mail-empty-content">
+				<EmptyContent :title="t('mail', 'Connect your mail account')">
+					<template #icon>
+						<IconMail :size="65" />
+					</template>
+					<template #action>
+						<AccountForm :display-name="displayName"
+							:email="email"
+							:error.sync="error"
+							@account-created="onAccountCreated" />
+					</template>
+				</EmptyContent>
+			</div>
+		</AppContent>
 	</Content>
 </template>
 
 <script>
 import Content from '@nextcloud/vue/dist/Components/NcContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
 import { loadState } from '@nextcloud/initial-state'
 
 import AccountForm from '../components/AccountForm'
@@ -30,6 +33,7 @@ import logger from '../logger'
 export default {
 	name: 'Setup',
 	components: {
+		AppContent,
 		AccountForm,
 		Content,
 		EmptyContent,