diff --git a/assets/404.webp b/assets/404.webp
new file mode 100644
index 0000000..e3caf75
Binary files /dev/null and b/assets/404.webp differ
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..7fdbfc0
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,54 @@
+<template>
+  <section class="hero is-light is-bold is-fullheight">
+    <div class="container hero-body">
+      <div class="container columns">
+        <div class="column animate__animated animate__fadeIn animate__slow">
+          <transition name="slide-fade" appear>
+            <b-image
+              class="image"
+              :src="require('@/assets/404.webp')"
+              alt="404 image"
+            ></b-image>
+          </transition>
+        </div>
+        <div class="column">
+          <h1 class="title">
+            ERROR 404 LA PÁGINA NO HA SIDO ENCONTRADA
+          </h1>
+          <a href="/">
+            <b-button class="is-dark" outlined
+              >Ir a la página principal</b-button
+            >
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  layout: "login",
+};
+</script>
+
+<style scoped>
+.image {
+  height: 100%;
+  width: 100%;
+}
+.title {
+  margin-top: 40%;
+}
+.slide-fade-enter-active {
+  transition: all 2s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
+</style>