diff --git a/src/globals.d.ts b/src/globals.d.ts
index e69de29..28bc0d6 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -0,0 +1,10 @@
+interface BlogDocument {
+	time: number;
+	title: string;
+	content: string;
+	primaryTags: string[];
+	secondaryTags: string[];
+	blurb: string;
+	image?: string;
+	description: string;
+}
diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte
index 2b732d7..9ea3c30 100644
--- a/src/lib/components/Blog/Article.svelte
+++ b/src/lib/components/Blog/Article.svelte
@@ -1,29 +1,35 @@
 <script lang="ts">
 	import { ChevronRight } from 'svelte-radix';
+	import PostMetadata from './PostMetadata.svelte';
 
-	export let content: string;
-	export let title: string;
-	export let description: string;
+	export let doc: BlogDocument;
 </script>
 
 <article>
 	<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
 		<div class="overflow-hidden text-ellipsis whitespace-nowrap">The Coredump</div>
 		<ChevronRight class="h-4 w-4" />
-		<div class="font-medium text-foreground">{title}</div>
+		<div class="font-medium text-foreground">{doc.title}</div>
 	</div>
 	<div class="space-y-2">
 		<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
-			{title}
+			{doc.title}
 		</h1>
-		{#if description}
+		{#if doc.description}
 			<p class="text-balance text-lg text-muted-foreground">
-				{description}
+				{doc.description}
 			</p>
 		{/if}
+		<PostMetadata
+			primaryTags={doc.primaryTags}
+			secondaryTags={doc.secondaryTags}
+			time={doc.time}
+			length={doc.content.length}
+			reverseDateAndRest
+		/>
 	</div>
 
 	<div class="markdown-body mt-8 font-serif">
-		{@html content}
+		{@html doc.content}
 	</div>
 </article>
diff --git a/src/lib/components/Blog/PostCard.svelte b/src/lib/components/Blog/PostCard.svelte
index ddb001f..11a931b 100644
--- a/src/lib/components/Blog/PostCard.svelte
+++ b/src/lib/components/Blog/PostCard.svelte
@@ -5,20 +5,18 @@
 	import PostMetadata from './PostMetadata.svelte';
 	import { faker } from '@faker-js/faker';
 
-	export let title: string;
-	export let blurb: string;
-	export let description: string;
+	export let doc: BlogDocument;
 </script>
 
 <Card.Root>
 	<Card.Header>
-		<h3 class="text-4xl font-serif font-bold mb-4 leading-tight">{title}</h3>
-		<p class="text-muted-foreground text-xl">{blurb}</p>
+		<h3 class="text-4xl font-serif font-bold mb-4 leading-tight">{doc.title}</h3>
+		<p class="text-muted-foreground text-xl">{doc.blurb}</p>
 		<PostMetadata
-			primaryTags={Array.from({ length: 3 }, () => faker.hacker.noun())}
-			secondaryTags={Array.from({ length: 2 }, () => faker.hacker.noun())}
-			time={Date.now() / 1000}
-			length={faker.number.int(1000)}
+			primaryTags={doc.primaryTags}
+			secondaryTags={doc.secondaryTags}
+			time={doc.time}
+			length={doc.content.split(' ').length}
 		/>
 	</Card.Header>
 	<Card.Content class="grid grid-cols-3 gap-6">
@@ -28,7 +26,7 @@
 			class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
 		/>
 		<div class="flex flex-col justify-around col-span-3 md:col-span-2 gap-4">
-			<p class="text-primary/95 font-serif leading-relaxed">{description}</p>
+			<p class="text-primary/95 font-serif leading-relaxed">{doc.description}</p>
 			<Button variant="outline" href="/blog/2024/test-post" class="text-xl flex-grow sm:flex-grow-0"
 				>Read More</Button
 			>
diff --git a/src/lib/components/Blog/PostMetadata.svelte b/src/lib/components/Blog/PostMetadata.svelte
index f130621..fb3420d 100644
--- a/src/lib/components/Blog/PostMetadata.svelte
+++ b/src/lib/components/Blog/PostMetadata.svelte
@@ -9,6 +9,7 @@
   - `secondaryTags` - An array of strings representing the secondary tags of the post.
   - `time` - A unix epoch integer representing the time the post was published.
   - `length` - An integer representing amount of words in the post.
+  - `reverseDateAndRest` - A boolean that determines whether the date should be displayed at the bottom of the metadata.
  -->
 
 <script lang="ts">
@@ -22,12 +23,15 @@
 	export let secondaryTags: string[] = [];
 	export let time: number;
 	export let length: number;
+	export let reverseDateAndRest: boolean = false;
 
 	let date = dayjs(time * 1000);
 </script>
 
 <div class="grid grid-cols-1">
-	<p class="text-muted-foreground/80 my-1 text-lg">{date.format('MM/DD/YY')}</p>
+	{#if !reverseDateAndRest}
+		<p class="text-muted-foreground/80 my-1 text-lg">{date.format('MMMM DD, YYYY')}</p>
+	{/if}
 	<span class="flex items-center flex-wrap my-2 gap-2">
 		{#each primaryTags as tag}
 			<Badge>{tag}</Badge>
@@ -38,6 +42,9 @@
 	</span>
 	<!-- Assuming adult silent reading rate of 238 wpm -->
 	<span class="text-muted-foreground text-sm mt-2">
-		{dayjs(date).fromNow()} | {Math.round(length / 238)} min read | {length} words
+		{dayjs(date).fromNow()} | {Math.ceil(length / 238)} min read | {length} words
 	</span>
+	{#if reverseDateAndRest}
+		<p class="text-muted-foreground/80 text-xl mt-4">{date.format('MMMM DD, YYYY')}</p>
+	{/if}
 </div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 62dab86..c89357f 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -17,6 +17,18 @@
 	onMount(() => {
 		loaded = true;
 	});
+
+	let testDoc: BlogDocument = {
+		title: 'An introduction to Taylor Series',
+		primaryTags: ['Computer Science', 'Mathematics'],
+		secondaryTags: ['Calculus', 'Taylor Series'],
+		time: Date.now() / 1000,
+		content:
+			"This is a test post to test the layout and rendering of the blog. It's taken directly from my obsidian notebook, so some of the formatting may be off. The blog supports KaTeX math rendering and GitHub markdown alerts. Support for syntax highlighting and graphs is coming soon.",
+		blurb: 'A brief introduction to Taylor Series and its applications in calculus.',
+		description:
+			'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.'
+	};
 </script>
 
 <svelte:head>
@@ -43,22 +55,38 @@
 						Latest Posts
 					</h2>
 					{#each Array(5) as _, i}
-						<div
-							class="grid grid-cols-1 gap-4 mt-8"
-							in:fly|global={{ x: -50, delay: 350 + i * 100 }}
-						>
-							<PostCard
-								title={faker.hacker.noun() +
-									' ' +
-									faker.hacker.verb() +
-									' ' +
-									faker.hacker.adjective() +
-									' ' +
-									faker.hacker.noun()}
-								blurb={faker.hacker.phrase()}
-								description={faker.lorem.paragraphs(2)}
-							/>
-						</div>
+						{#if i > 0}
+							<div
+								class="grid grid-cols-1 gap-4 mt-8"
+								in:fly|global={{ x: -50, delay: 350 + i * 100 }}
+							>
+								<PostCard
+									doc={{
+										title:
+											faker.hacker.noun() +
+											' ' +
+											faker.hacker.verb() +
+											' ' +
+											faker.hacker.adjective() +
+											' ' +
+											faker.hacker.noun(),
+										primaryTags: Array(2).map(() => faker.hacker.noun()),
+										secondaryTags: Array(2).map(() => faker.hacker.noun()),
+										time: Date.now() / 1000,
+										content: faker.lorem.paragraphs(5),
+										blurb: faker.hacker.phrase(),
+										description: faker.lorem.paragraphs(2)
+									}}
+								/>
+							</div>
+						{:else}
+							<div
+								class="grid grid-cols-1 gap-4 mt-8"
+								in:fly|global={{ x: -50, delay: 350 + i * 100 }}
+							>
+								<PostCard doc={testDoc} />
+							</div>
+						{/if}
 					{/each}
 				</div>
 				<div in:fly={{ y: -50, delay: 300 }} class="col-span-3 md:col-span-1">
diff --git a/src/routes/blog/[year]/[slug]/+page.svelte b/src/routes/blog/[year]/[slug]/+page.svelte
index afb9956..5e2bf64 100644
--- a/src/routes/blog/[year]/[slug]/+page.svelte
+++ b/src/routes/blog/[year]/[slug]/+page.svelte
@@ -6,13 +6,18 @@
 	import { cn } from '$lib/utils.js';
 	import Article from '$lib/components/Blog/Article.svelte';
 
-	let doc = {
-		title: 'Test Post',
-		description: 'An insightful and succinct blurb about the post.'
-	};
-
 	export let data: PageData;
-	$: markdown = data.markdown;
+
+	let doc: BlogDocument = {
+		title: 'Test Post',
+		primaryTags: ['Computer Science', 'Mathematics'],
+		secondaryTags: ['Calculus', 'Taylor Series'],
+		time: Date.now() / 1000,
+		content: data.markdown,
+		blurb: 'A short and succinct, yet descriptive blurb about the post.',
+		description:
+			'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.'
+	};
 	// $: doc = data.metadata;
 	// $: componentSource = data.metadata.source?.replace('default', $config.style ?? 'default');
 </script>
@@ -24,5 +29,5 @@
 </svelte:head>
 
 <main class="max-w-4xl md:mx-auto mx-4 mt-8 mb-14">
-	<Article title={doc.title} description={doc.description} content={markdown} />
+	<Article {doc} />
 </main>