diff --git a/sites/blog/.vscode/extensions.json b/sites/blog/.vscode/extensions.json
deleted file mode 100644
index 56f043d..0000000
--- a/sites/blog/.vscode/extensions.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
-  "unwantedRecommendations": []
-}
diff --git a/sites/blog/.vscode/launch.json b/sites/blog/.vscode/launch.json
deleted file mode 100644
index d642209..0000000
--- a/sites/blog/.vscode/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}
diff --git a/sites/blog/package.json b/sites/blog/package.json
index 71d5b72..4be48d6 100644
--- a/sites/blog/package.json
+++ b/sites/blog/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/mdx": "^2.3.1",
     "@astrojs/rss": "^4.0.5",
-    "@astrojs/sitemap": "^3.1.4"
+    "@astrojs/sitemap": "^3.1.4",
+    "sharp": "^0.33.3"
   }
 }
\ No newline at end of file
diff --git a/sites/blog/public/blog-placeholder-1.jpg b/sites/blog/public/blog-placeholder-1.jpg
deleted file mode 100644
index 74d4009..0000000
--- a/sites/blog/public/blog-placeholder-1.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-2.jpg b/sites/blog/public/blog-placeholder-2.jpg
deleted file mode 100644
index c4214b0..0000000
--- a/sites/blog/public/blog-placeholder-2.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-3.jpg b/sites/blog/public/blog-placeholder-3.jpg
deleted file mode 100644
index fbe2ac0..0000000
--- a/sites/blog/public/blog-placeholder-3.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-4.jpg b/sites/blog/public/blog-placeholder-4.jpg
deleted file mode 100644
index f4fc88e..0000000
--- a/sites/blog/public/blog-placeholder-4.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-5.jpg b/sites/blog/public/blog-placeholder-5.jpg
deleted file mode 100644
index c564674..0000000
--- a/sites/blog/public/blog-placeholder-5.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-about.jpg b/sites/blog/public/blog-placeholder-about.jpg
deleted file mode 100644
index cf5f685..0000000
--- a/sites/blog/public/blog-placeholder-about.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/src/components/BaseHead.astro b/sites/blog/src/components/BaseHead.astro
index abe36fb..1bf7faa 100644
--- a/sites/blog/src/components/BaseHead.astro
+++ b/sites/blog/src/components/BaseHead.astro
@@ -6,12 +6,11 @@
 interface Props {
 	title: string;
 	description: string;
-	image?: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -38,11 +37,9 @@
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
diff --git a/sites/blog/src/content/blog/using-mdx.mdx b/sites/blog/src/content/blog/using-mdx.mdx
deleted file mode 100644
index 8daf5bc..0000000
--- a/sites/blog/src/content/blog/using-mdx.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 'Using MDX'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 02 2022'
-heroImage: '/blog-placeholder-5.jpg'
----
-
-This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
-
-## Why MDX?
-
-MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts.
-
-If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
-
-## Example
-
-Here is how you import and use a UI component inside of MDX.
-When you open this page in the browser, you should see the clickable button below.
-
-## More Links
-
-- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
-- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)
-- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.
diff --git a/sites/blog/src/content/config.ts b/sites/blog/src/content/config.ts
index bb4d8a1..8f6ca9d 100644
--- a/sites/blog/src/content/config.ts
+++ b/sites/blog/src/content/config.ts
@@ -1,6 +1,6 @@
 import { defineCollection, z } from 'astro:content';
 
-const blog = defineCollection({
+const post = defineCollection({
 	type: 'content',
 	// Type-check frontmatter using a schema
 	schema: z.object({
@@ -9,7 +9,8 @@
 		// Transform string to Date object
 		pubDate: z.coerce.date(),
 		updatedDate: z.coerce.date().optional(),
+		pinned: z.coerce.boolean().optional()
 	}),
 });
 
-export const collections = { blog };
+export const collections = { post };
diff --git a/sites/blog/src/layouts/BlogPost.astro b/sites/blog/src/layouts/BlogPost.astro
index 6b96dd7..1d87f76 100644
--- a/sites/blog/src/layouts/BlogPost.astro
+++ b/sites/blog/src/layouts/BlogPost.astro
@@ -4,7 +4,7 @@
 import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 
-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<'post'>['data'];
 
 const { title, description, pubDate, updatedDate } = Astro.props;
 ---
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}/`,
 		})),
 	});
 }