diff --git a/src/lib/components/Blog/Archive.svelte b/src/lib/components/Blog/Archive.svelte
new file mode 100644
index 0000000..bfa8ce6
--- /dev/null
+++ b/src/lib/components/Blog/Archive.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ChevronRight from 'svelte-radix/ChevronRight.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+
+	export let archived: Object | undefined = undefined;
+</script>
+
+<!-- 
+	Currently nothing in the archive, so this component is left unfinished.
+ -->
+
+<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10">
+	<Card.Header>
+		<h2 class="text-3xl font-serif font-bold mb-6" id="archive">Archive</h2>
+		<h3 class="text-3xl font-serif font-medium text-muted-foreground" id="2024">2024</h3>
+		<Separator class="mt-4 bg-primary/10 h-1" />
+	</Card.Header>
+	<Card.Content>
+		{#if archived}
+			<div class="grid grid-cols-1 gap-2 mb-8">
+				<h3 class="text-2xl font-serif font-bold">Placeholder Title</h3>
+				<p class="text-lg text-muted-foreground">Placeholder</p>
+				<div class="flex items-center gap-2">
+					<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
+						>Read more</a
+					>
+					<ChevronRight class="w-6 h-6 text-primary" />
+				</div>
+			</div>
+		{:else}
+			<p class="text-lg text-muted-foreground">Nothing here yet.</p>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 6acd318..b066c20 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Archive from '$lib/components/Blog/Archive.svelte';
+
 	import ChevronRight from 'svelte-radix/ChevronRight.svelte';
 	import * as Card from '$lib/components/ui/card';
 	import Code from 'svelte-radix/Code.svelte';
@@ -72,37 +74,7 @@
 					{/each}
 				</div>
 				<div in:fly={{ y: -50, delay: 300 }} class="col-span-3 md:col-span-1">
-					<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10">
-						<Card.Header>
-							<h2 class="text-3xl font-serif font-bold mb-6" id="archive">Archive</h2>
-							<h3 class="text-3xl font-serif font-medium text-muted-foreground" id="2024">2024</h3>
-							<Separator class="mt-4 bg-primary/10 h-1" />
-						</Card.Header>
-						<Card.Content>
-							{#each Array(5) as _, i}
-								<div class="grid grid-cols-1 gap-2 mb-8">
-									<h3 class="text-2xl font-serif font-bold">
-										{faker.hacker.noun() +
-											' ' +
-											faker.hacker.verb() +
-											' ' +
-											faker.hacker.adjective() +
-											' ' +
-											faker.hacker.noun()}
-									</h3>
-									<p class="text-lg text-muted-foreground">
-										{faker.hacker.phrase()}
-									</p>
-									<div class="flex items-center gap-2">
-										<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
-											>Read more</a
-										>
-										<ChevronRight class="w-6 h-6 text-primary" />
-									</div>
-								</div>
-							{/each}
-						</Card.Content>
-					</Card.Root>
+					<Archive></Archive>
 				</div>
 			</div>
 		{:else}