diff --git a/sites/blog/src/pages/index.astro b/sites/blog/src/pages/index.astro
index 31269ef..13b3aef 100644
--- a/sites/blog/src/pages/index.astro
+++ b/sites/blog/src/pages/index.astro
@@ -1,8 +1,13 @@
 ---
 import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import { getCollection } from 'astro:content';
+import FormattedDate from '../components/FormattedDate.astro';
+
+const posts = (await getCollection('blog')).sort(
+	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+);
 ---
 
 <!doctype html>
@@ -10,41 +15,39 @@
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
-	<body>
-		<Header />
-		<main>
-			<h1>🧑‍🚀 Hello, Astronaut!</h1>
-			<p>
-				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
-				a personal website, blog, or portfolio with Astro.
-			</p>
-			<p>
-				This template comes with a few integrations already configured in your
-				<code>astro.config.mjs</code> file. You can customize your setup with
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
-				React, or Vue to your project.
-			</p>
-			<p>Here are a few ideas on how to get started with the template:</p>
-			<ul>
-				<li>Edit this page in <code>src/pages/index.astro</code></li>
-				<li>Edit the site header items in <code>src/components/Header.astro</code></li>
-				<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
-				<li>Check out the included blog posts in <code>src/content/blog/</code></li>
-				<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
-			</ul>
-			<p>
-				Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
-					>read the docs
-				</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
-			</p>
-			<p>
-				Looking for a blog template with a bit more personality? Check out <a
-					href="https://github.com/Charca/astro-blog-template"
-					>astro-blog-template
-				</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
-			</p>
-		</main>
+	<body class="bg-mantle px-72 min-h-dvh flex flex-col max-md:px-4 transition-all">
+		<div class="w-full min-h-[90vh]">
+			<nav class="bg-mantle flex justify-center py-2 h-12">
+				<div class="flex flex-col items-center group">
+					<a href="/" class="text-text cursor-pointer hover:bg-surface0 rounded px-4 transition-colors">
+						Home
+					</a>
+					<div class="bg-text h-[2px] w-8 -mt-1 rounded-full group-hover:w-10 transition-all" />
+				</div>
+			</nav>
+			<main class="w-full bg-mantle mt-6 h-full">
+				<section id="posts" class="flex justify-center rounded-2xl min-h-full">
+					<div class="flex flex-wrap gap-4 m-0 p-0 w-full min-h-full">
+						{
+							posts.map((post) => (
+								<a href={`/blog/${post.slug}/`} class="
+									min-w-72
+									w-[calc(25%-0.75rem)] text-lg bg-base p-4 rounded-2xl
+									first:w-[calc(50%-0.5rem)] first:text-center first:text-2xl
+									first:max-md:text-lg first:max-md:text-left first:max-md:w-full first:max-md:h-auto
+									hover:bg-surface0 hover:-translate-y-2 transition-all
+									max-md:w-full">
+											<h4 class="text-text">{post.data.title}</h4>
+											<p class="text-subtext0">
+												<FormattedDate date={post.data.pubDate} />
+											</p>
+								</a>
+							))
+						}
+					</div>
+				</section>
+			</main>
+		</div>
 		<Footer />
 	</body>
 </html>