diff --git a/sites/blog/src/pages/index.astro b/sites/blog/src/pages/index.astro
index 13b3aef..3d66624 100644
--- a/sites/blog/src/pages/index.astro
+++ b/sites/blog/src/pages/index.astro
@@ -5,9 +5,12 @@
 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()
-);
+
+const posts = await getCollection('post')
+
+const pinnedPosts = posts.filter(p => p.data.pinned);
+const otherPosts = posts.filter(p => !(p.data.pinned || false))
+
 ---
 
 <!doctype html>
@@ -15,8 +18,8 @@
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
-	<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]">
+	<body class="bg-mantle min-h-screen flex flex-col items-center">
+		<div class="flex justify-center w-full flex-col gap-2 md:min-w-[768px] px-4 md:max-w-screen-lg">
 			<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">
@@ -25,24 +28,48 @@
 					<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">
+			<main class="w-full bg-mantle mt-6 min-h-[84vh]">
+				<section id="posts">
+					<div class="flex flex-wrap gap-4 justify-center mb-10">
 						{
-							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
+							pinnedPosts.length > 0 ? pinnedPosts.map((post) => (
+								<a href={`/post/${post.slug}/`} class="
+									h-32  text-base bg-base p-4 rounded-2xl flex flex-col flex-grow border border-blue
+									hover:bg-surface0 hover:-translate-y-2 transition-all">
+											<h4 class="text-text w-full text-ellipsis">{post.data.title}</h4>
+											<div class="text-subtext0 flex">
+												<p title="Pinned">📌&ThinSpace;</p>
+												<FormattedDate date={post.data.pubDate} />
+											</div>
+								</a>
+							)) : null
+						}
+					</div>
+					<div class="flex flex-wrap gap-4 justify-center">
+						{
+							otherPosts.length > 0 ? otherPosts.map((post, idx) => (
+								<a href={`/post/${post.slug}/`} class="
+									h-32  text-base bg-base p-4 rounded-2xl flex flex-col flex-grow
+									first:text-center first:text-xl first:border-yellow first:border first:box-border
+									first:max-md:text-left first:max-md:w-full
 									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">
+											<h4 class="text-text w-full text-ellipsis">{post.data.title}</h4>
+											<div class="text-subtext0 flex">
+												{ idx === 0 ? <p title="Latest">✨&ThinSpace;</p> : null }
 												<FormattedDate date={post.data.pubDate} />
-											</p>
+											</div>
 								</a>
-							))
+							)) : null
+						}
+					</div>
+					<div class="flex justify-center h-40">
+						{
+							posts.length === 0 ?
+								<div class="border border-dashed border-surface0 rounded-xl flex justify-center items-center w-1/2">
+									No Posts Yet
+								</div> :
+								null
 						}
 					</div>
 				</section>