diff --git a/package-lock.json b/package-lock.json
index 2aeec20c39..8c996d577e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4687,7 +4687,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/src/views/Dashboard.vue b/src/views/Dashboard.vue
index d4516ede12..48ee0dd0f3 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -38,13 +38,12 @@
 			</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>
+			<EmptyContent id="mail--empty-content" icon="icon-mail">
+				<template #desc>
+					{{ t('mail', 'No important message found yet') }}
 				<a v-if="accounts.length === 0" :href="accountSetupUrl" class="button">{{ t('mail', 'Set up an account') }}</a>
-			</div>
+				</template>
+		</EmptyContent>
 		</template>
 	</DashboardWidget>
 </template>
@@ -57,6 +56,7 @@ import Avatar from '../components/Avatar'
 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'
 
 const accounts = loadState('mail', 'mail-accounts')
 const orderByDateInt = orderBy(prop('dateInt'), 'desc')
@@ -67,6 +67,7 @@ export default {
 		Avatar,
 		DashboardWidget,
 		DashboardWidgetItem,
+		EmptyContent,
 	},
 	data() {
 		return {
@@ -113,18 +114,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.empty-content {
-	text-align: center;
+#mail--empty-content {
 	margin-top: 50px;
 }
-.empty-content__image {
-	width: 80%;
-	margin: auto;
-	margin-bottom: 10px;
-}
-.empty-content__text {
-	color: var(--color-text-maxcontrast);
-	text-align: center;
-	margin-bottom: 10px;
+.empty-content {
+	margin-top: 50px;
 }
 </style>