diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67b4d81934c5196e272fb98827a8105c5e2eeb2a
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="container error-container">
+    <h1 v-if="error.statusCode === 404">Page not found</h1>
+    <h1 v-else>An error occurred</h1>
+    <NuxtLink to="/">Go to the home page</NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['error'],
+  layout: 'errorLayout',
+}
+</script>
+
+<style lang="scss">
+.error-container {
+  justify-content: center;
+
+  h1 {
+    font-size: 2rem;
+    text-shadow: 0 5px 7px #222;
+    margin-bottom: 1em;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/layouts/errorLayout.vue b/layouts/errorLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02c4488715bd7fb5f58f45f07f3d0699e46233fc
--- /dev/null
+++ b/layouts/errorLayout.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <Nuxt />
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      bodyAttrs: {
+        id: 'error-page'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+#error-page {
+  background-image: linear-gradient(hsl(201, 16%, 43%), #003b70);
+}
+</style>