diff --git a/_redirects b/_redirects
new file mode 100644
index 0000000..aa33418
--- /dev/null
+++ b/_redirects
@@ -0,0 +1 @@
+/* /404.html 404
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 199464a..7bd1145 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,8 +16,12 @@ const { title } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
-	<body>
-		<slot />
+	<body class="bg-slate-700">
+		<main
+			class="flex relative overflow-hidden justify-center items-center h-full w-full font-sans"
+		>
+			<slot />
+		</main>
 	</body>
 </html>
 <style is:global>
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..67ec13b
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,21 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+const title = '404 | Page Not Found';
+---
+
+<Layout title={title}>
+	<section class="flex flex-col text-center">
+		<h2 class="text-9xl font-bold font-mono text-gray-200">404</h2>
+		<h1 class="mt-2 text-gray-200 text-xl">
+			<span class="text-cyan-500/70 font-bold text-xl">Oops!</span> Page Not Found
+		</h1>
+		<p class="mt-5 text-gray-300">
+			Sorry, we couldn’t find the page you’re looking for.
+		</p>
+		<a
+			class="font-bold hover:shadow-[0_0_5px_rgba(245,245,245,0.50)] text-gray-300 hover:text-gray-200 bg-slate-500/50 w-fit mx-auto mt-3 p-2 rounded-lg block"
+			href="/">Go back to homepage</a
+		>
+	</section>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1c02c49..cd95eb2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,47 +15,43 @@ const socialMedia: SocialMedia[] = [
 ---
 
 <Layout title="Dylanson25 | Portafolio">
-	<main
-		class="flex relative overflow-hidden justify-center items-center h-full w-full bg-slate-700 font-sans"
+	<header class="absolute top-0 px-10 pt-6 pb-4 rounded-b-lg bg-slate-500/50">
+		<h2 class="font-semibold text-gray-200/70 text-center mb-2">
+			Dylanson25.dev
+		</h2>
+		<ul class="grid gap-6 grid-cols-3">
+			{
+				socialMedia.map(({ name, url }) => (
+					<li class="hover:drop-shadow-[0_0_10px_rgba(245,245,245,0.50)] hover:fill-white fill-[#e4e2e2]">
+						<a href={url} target="_blank">
+							<Icon fill_hover="white" size="lg" name={name} />
+						</a>
+					</li>
+				))
+			}
+		</ul>
+	</header>
+	<section>
+		<Image
+			class="rounded-full drop-shadow-lg"
+			src={dylanImg}
+			alt="Imagen Dylan Villarreal Toscano"
+			width={300}
+		/>
+		<h1 class="font-semibold text-gray-200 text-center mt-5 text-3xl">
+			Dylan <br /> Villrarreal Toscano
+		</h1>
+	</section>
+	<section
+		class="absolute hidden md:block right-0 bottom-2 -rotate-12 bg-orange-300 rounded-lg p-2 w-full h-full max-h-56 max-w-64"
 	>
-		<header class="absolute top-0 px-10 pt-6 pb-4 rounded-b-lg bg-slate-500/50">
-			<h2 class="font-semibold text-gray-200/70 text-center mb-2">
-				Dylanson25.dev
-			</h2>
-			<ul class="grid gap-6 grid-cols-3">
-				{
-					socialMedia.map(({ name, url }) => (
-						<li class="hover:drop-shadow-[0_0_10px_rgba(245,245,245,0.50)] hover:fill-white fill-[#e4e2e2]">
-							<a href={url} target="_blank">
-								<Icon fill_hover="white" size="lg" name={name} />
-							</a>
-						</li>
-					))
-				}
-			</ul>
-		</header>
-		<section>
-			<Image
-				class="rounded-full drop-shadow-lg"
-				src={dylanImg}
-				alt="Imagen Dylan Villarreal Toscano"
-				width={300}
-			/>
-			<h1 class="font-semibold text-gray-200 text-center mt-5 text-3xl">
-				Dylan <br /> Villrarreal Toscano
-			</h1>
-		</section>
-		<section
-			class="absolute hidden md:block right-0 bottom-2 -rotate-12 bg-orange-300 rounded-lg p-2 w-full h-full max-h-56 max-w-64"
-		>
-			<h2 class="font-semibold text-4xl leading-10 font-mono">
-				My New <br /> Site Is <br /> Coming <br /> Soon!
-			</h2>
-		</section>
-		<article class="absolute left-5 bottom-5 md:hidden">
-			<h2 class="text-2xl text-slate-100/50 font-extrabold">
-				My New Site Is <br /> Coming Soon!
-			</h2>
-		</article>
-	</main>
+		<h2 class="font-semibold text-4xl leading-10 font-mono">
+			My New <br /> Site Is <br /> Coming <br /> Soon!
+		</h2>
+	</section>
+	<article class="absolute left-5 bottom-5 md:hidden">
+		<h2 class="text-2xl text-slate-100/50 font-extrabold">
+			My New Site Is <br /> Coming Soon!
+		</h2>
+	</article>
 </Layout>
