diff --git a/img/sad-face-in-rounded-square.svg b/img/sad-face-in-rounded-square.svg
deleted file mode 100644
index 69903063f4..0000000000
--- a/img/sad-face-in-rounded-square.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="106.059" height="106.059" viewBox="0 0 106.059 106.059" xml:space="preserve"><path d="M90.546 15.518c-20.688-20.69-54.347-20.69-75.031-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.341 20.684 75.027-.004 20.686-20.685 20.685-54.343.002-75.025m-5.789 69.24c-17.494 17.494-45.96 17.496-63.455.002-17.498-17.497-17.496-45.966 0-63.46 17.494-17.493 45.959-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456m-7.74-10.757a3 3 0 0 1-1.562 3.943 3 3 0 0 1-3.944-1.562c-2.893-6.689-9.73-11.012-17.421-11.012-7.868 0-14.747 4.319-17.522 11.004a3 3 0 0 1-3.921 1.621 3 3 0 0 1-1.62-3.921c3.71-8.932 12.764-14.703 23.063-14.703 10.084 0 19.084 5.742 22.927 14.63M33.24 38.671a6.201 6.201 0 1 1 12.4 0 6.201 6.201 0 0 1-12.4 0m28.117 0a6.201 6.201 0 0 1 12.403 0c0 3.426-2.776 6.202-6.2 6.202s-6.203-2.776-6.203-6.202"/></svg>
\ No newline at end of file
diff --git a/src/views/DefaultPageError.vue b/src/views/DefaultPageError.vue
index 63abb4df52..f096afc345 100644
--- a/src/views/DefaultPageError.vue
+++ b/src/views/DefaultPageError.vue
@@ -4,20 +4,29 @@
 -->
 
 <template>
-	<div class="container">
-		<div id="img" />
-		<div class="content">
-			<h1>404</h1>
-			<h2>
-				{{ t('libresign', 'Page not found') }}
-			</h2>
-			<p>{{ paragrath }}</p>
-			<NcNoteCard v-for="(error, index) in errors"
-				:key="index"
-				type="error"
-				heading="Error">
-				{{ error.message }}
-			</NcNoteCard>
+	<div class="error-page">
+		<div class="logo-header">
+			<img :src="logoLibreSign"
+				:alt="t('libresign', 'LibreSign')"
+				class="logo-icon">
+		</div>
+
+		<div class="error-container">
+			<NcEmptyContent :name="t('libresign', 'Page not found')"
+				:description="paragrath">
+				<template #icon>
+					<AlertCircleOutline :size="80" class="alert-icon" />
+				</template>
+				<template #action>
+					<div v-if="errors.length" class="error-messages">
+						<NcNoteCard v-for="(error, index) in errors"
+							:key="index"
+							type="error">
+							{{ error.message }}
+						</NcNoteCard>
+					</div>
+				</template>
+			</NcEmptyContent>
 		</div>
 	</div>
 </template>
@@ -26,16 +35,23 @@
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+
+import logoLibreSign from '../../img/logo-gray.svg'
 
 export default {
 	name: 'DefaultPageError',
 	components: {
+		NcEmptyContent,
 		NcNoteCard,
+		AlertCircleOutline,
 	},
 
 	data() {
 		return {
+			logoLibreSign,
 			paragrath: t('libresign', 'Sorry but the page you are looking for does not exist, has been removed, moved or is temporarily unavailable.'),
 		}
 	},
@@ -47,7 +63,7 @@ export default {
 			}
 			const errorMessage = loadState('libresign', 'error', {})?.message
 			if (errorMessage) {
-				return [errorMessage]
+				return [{ message: errorMessage }]
 			}
 			return []
 		},
@@ -57,49 +73,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container{
+.error-page {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	height: 100%;
-
-	#img{
-		background-image: url('../../img/sad-face-in-rounded-square.svg');
-		height: 140px;
-		width: 140px;
-		background-repeat: no-repeat;
-		background-size: cover;
-		line-height: 17.6px;
-	}
+	min-height: 100vh;
+	padding: 40px 20px;
+	gap: 24px;
+	background: var(--color-background-dark);
 
-}
+	.logo-header {
+		.logo-icon {
+			height: 80px;
 
-.content{
-	box-sizing: border-box;
-	font-family: 'Nunito', sans-serif;
-	max-width: 560px;
-	padding-inline-start: 50px;
-
-	h1{
-		font-size: 65px;
-		font-weight: 700;
-		line-height: 71.5px;
-		margin-bottom: 10px;
-		margin-top: 0px;
+			@media (max-width: 768px) {
+				height: 60px;
+			}
+		}
 	}
 
-	h2{
-		font-size: 21px;
-		font-weight: 400;
-		line-height: 23.1px;
-		margin: 0px;
-		margin-bottom: 10px;
+	.error-container {
+		max-width: 800px;
+		width: 100%;
+		padding: 48px 32px;
+		background: var(--color-main-background);
+		border-radius: var(--border-radius-large);
+		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
+
+		.error-messages {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			width: 100%;
+			min-width: 500px;
+
+			@media (max-width: 768px) {
+				min-width: auto;
+			}
+		}
+
+		@media (max-width: 768px) {
+			padding: 32px 24px;
+		}
 	}
-	p{
-		color: var(--color-main-text);
-		font-weight: 400;
-		line-height: 17.6px;
+
+	.alert-icon {
+		color: #e53c3c;
 	}
 }
 </style>