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>
diff --git "a/sites/blog/src/pages/blog/\133...slug\135.astro" "b/sites/blog/src/pages/post/\133...slug\135.astro"
similarity index 82%
rename from "sites/blog/src/pages/blog/\133...slug\135.astro"
rename to "sites/blog/src/pages/post/\133...slug\135.astro"
index ecdd3da..9162df4 100644
--- "a/sites/blog/src/pages/blog/\133...slug\135.astro"
+++ "b/sites/blog/src/pages/post/\133...slug\135.astro"
@@ -3,13 +3,13 @@
 import BlogPost from '../../layouts/BlogPost.astro';
 
 export async function getStaticPaths() {
-	const posts = await getCollection('blog');
+	const posts = await getCollection('post');
 	return posts.map((post: { slug: any; }) => ({
 		params: { slug: post.slug },
 		props: post,
 	}));
 }
-type Props = CollectionEntry<'blog'>;
+type Props = CollectionEntry<'post'>;
 
 const post = Astro.props;
 const { Content } = await post.render();
diff --git a/sites/blog/src/pages/rss.xml.js b/sites/blog/src/pages/rss.xml.js
index 9ff9801..41b0d4a 100644
--- a/sites/blog/src/pages/rss.xml.js
+++ b/sites/blog/src/pages/rss.xml.js
@@ -3,14 +3,14 @@
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 
 export async function GET(context) {
-	const posts = await getCollection('blog');
+	const posts = await getCollection('post');
 	return rss({
 		title: SITE_TITLE,
 		description: SITE_DESCRIPTION,
 		site: context.site,
 		items: posts.map((post) => ({
 			...post.data,
-			link: `/blog/${post.slug}/`,
+			link: `/post/${post.slug}/`,
 		})),
 	});
 }