diff --git a/sites/blog/src/layouts/BlogPost.astro b/sites/blog/src/layouts/BlogPost.astro
index e67b2b3..6b96dd7 100644
--- a/sites/blog/src/layouts/BlogPost.astro
+++ b/sites/blog/src/layouts/BlogPost.astro
@@ -1,79 +1,41 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate } = Astro.props;
 ---
 
 <html lang="en">
 	<head>
 		<BaseHead title={title} description={description} />
-		<style>
-			main {
-				width: calc(100% - 2em);
-				max-width: 100%;
-				margin: 0;
-			}
-			.hero-image {
-				width: 100%;
-			}
-			.hero-image img {
-				display: block;
-				margin: 0 auto;
-				border-radius: 12px;
-				box-shadow: var(--box-shadow);
-			}
-			.prose {
-				width: 720px;
-				max-width: calc(100% - 2em);
-				margin: auto;
-				padding: 1em;
-				color: rgb(var(--gray-dark));
-			}
-			.title {
-				margin-bottom: 1em;
-				padding: 1em 0;
-				text-align: center;
-				line-height: 1;
-			}
-			.title h1 {
-				margin: 0 0 0.5em 0;
-			}
-			.date {
-				margin-bottom: 0.5em;
-				color: rgb(var(--gray));
-			}
-			.last-updated-on {
-				font-style: italic;
-			}
-		</style>
 	</head>
 
-	<body>
-		<Header />
-		<main>
-			<article>
-				<div class="hero-image">
-					{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
-				</div>
-				<div class="prose">
-					<div class="title">
-						<div class="date">
+	<body class="flex items-center flex-col w-full bg-mantle px-10">
+		<nav class="bg-mantle flex flex-col items-center justify-center py-2 mb-4 group">
+			<a href="/" class="text-text cursor-pointer group-hover:text-text group-hover:bg-surface0 rounded px-4 transition-colors">
+				Home
+			</a>
+			<div class="bg-text h-[2px] w-0 -mt-1 rounded-full group-hover:w-10 transition-all" />
+		</nav>
+		<main class="bg-mantle w-full lg:w-[1024px]">
+			<article class="flex flex-col items-center">
+				<div class="w-11/12 lg:[720px]">
+					<div class="text-left">
+						<h1 class="my-2 text-text">{title}</h1>
+						<div class="text-subtext0 mb-2">
 							<FormattedDate date={pubDate} />
 							{
 								updatedDate && (
-									<div class="last-updated-on">
+									<div class="italic">
 										Last updated on <FormattedDate date={updatedDate} />
 									</div>
 								)
 							}
 						</div>
-						<h1>{title}</h1>
 						<hr />
 					</div>
 					<slot />