diff --git a/package-lock.json b/package-lock.json
index 13e8f799b6..c37fbb017f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11160,13 +11160,10 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
     },
     "serialize-javascript": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
-      "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
-      "dev": true,
-      "requires": {
-        "randombytes": "^2.1.0"
-      }
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+      "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
+      "dev": true
     },
     "set-blocking": {
       "version": "2.0.0",
@@ -12912,9 +12909,9 @@
       "integrity": "sha512-GQnDA1UcFSdmL2Gjo/3+0jlOwvRvSpdzl+q+vOtQsAjb+uQDo8UG1RKxyoQ1lkJCz5uM8OSqb/6+L3LBqInk2w=="
     },
     "vue-server-renderer": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz",
-      "integrity": "sha512-3LODaOsnQx7iMFTBLjki8xSyOxhCtbZ+nQie0wWY4iOVeEtTg1a3YQAjd82WvKxrWHHTshjvLb7OXMc2/dYuxw==",
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz",
+      "integrity": "sha512-V3faFJHr2KYfdSIalL+JjinZSHYUhlrvJ9pzCIjjwSh77+pkrsXpK4PucdPcng57+N77pd1LrKqwbqjQdktU1A==",
       "dev": true,
       "requires": {
         "chalk": "^1.1.3",
@@ -12923,7 +12920,7 @@
         "lodash.template": "^4.5.0",
         "lodash.uniq": "^4.5.0",
         "resolve": "^1.2.0",
-        "serialize-javascript": "^3.1.0",
+        "serialize-javascript": "^2.1.2",
         "source-map": "0.5.6"
       },
       "dependencies": {
diff --git a/package.json b/package.json
index 1e96c2f8c3..78eda6fcf3 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "svg-inline-loader": "^0.8.2",
     "url-loader": "^4.1.0",
     "vue-loader": "^15.9.3",
-    "vue-server-renderer": "^2.6.12",
+    "vue-server-renderer": "^2.6.11",
     "vue-template-compiler": "^2.6.12",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e6afd2c2d5..8bfe27ae15 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -38,13 +38,14 @@
 			</DashboardWidgetItem>
 		</template>
 		<template v-slot:empty-content>
-			<div class="empty-content">
-				<img class="empty-content__image" :src="emptyImage">
-				<p class="empty-content__text">
-					{{ t('mail', 'No messages found yet') }}
-				</p>
-				<a v-if="accounts.length === 0" :href="accountSetupUrl" class="button">{{ t('mail', 'Set up an account') }}</a>
-			</div>
+			<EmptyContent id="mail--empty-content" icon="icon-checkmark">
+				<template #desc>
+					{{ t('mail', 'No message found yet') }}
+					<div class="no-account">
+						<a v-if="accounts.length === 0" :href="accountSetupUrl" class="button">{{ t('mail', 'Set up an account') }}</a>
+					</div>
+				</template>
+			</EmptyContent>
 		</template>
 	</DashboardWidget>
 </template>
@@ -55,6 +56,7 @@ import { generateUrl, imagePath } from '@nextcloud/router'
 import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
 import orderBy from 'lodash/fp/orderBy'
 import prop from 'lodash/fp/prop'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 
 import Avatar from '../components/Avatar'
 import { fetchEnvelopes } from '../service/MessageService'
@@ -70,6 +72,7 @@ export default {
 		Avatar,
 		DashboardWidget,
 		DashboardWidgetItem,
+		EmptyContent,
 	},
 	data() {
 		return {
@@ -130,19 +133,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.empty-content {
+<style lang="scss">
+#mail--empty-content {
 	text-align: center;
-	margin-top: 50px;
-}
-.empty-content__image {
-	width: 80%;
-	margin: auto;
-	margin-bottom: 10px;
+	margin-top: 5vh;
 }
-.empty-content__text {
-	color: var(--color-text-maxcontrast);
-	text-align: center;
-	margin-bottom: 10px;
+.no-account {
+	margin-top: 5vh;
+	margin-right: 5px;
 }
 </style>