diff --git a/src/routes/__layout.svelte b/src/routes/+layout.svelte
similarity index 100%
rename from src/routes/__layout.svelte
rename to src/routes/+layout.svelte
diff --git a/src/routes/index.svelte b/src/routes/+page.svelte
similarity index 98%
rename from src/routes/index.svelte
rename to src/routes/+page.svelte
index 8c563f2..8c61574 100644
--- a/src/routes/index.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,3 @@
-<script context="module">
-	export const prerender = true;
-</script>
-
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import Navbar from '../components/Navbar.svelte';
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/api/blog.json.ts b/src/routes/api/blog.json/+server.ts
similarity index 60%
rename from src/routes/api/blog.json.ts
rename to src/routes/api/blog.json/+server.ts
index e0f129b..4237797 100644
--- a/src/routes/api/blog.json.ts
+++ b/src/routes/api/blog.json/+server.ts
@@ -1,4 +1,5 @@
-import allPosts from '../../content/posts.json';
+import { json as json$1 } from '@sveltejs/kit';
+import allPosts from '../../../content/posts.json';
 
 export const GET = async ({ url }) => {
 	try {
@@ -16,19 +17,15 @@ export const GET = async ({ url }) => {
 			return 0;
 		});
 
-		return {
-			status: 200,
-			body: {
-				posts: sortedBlogPosts
-			}
-		};
+		return json$1({
+			posts: sortedBlogPosts
+		});
 	} catch (error) {
 		console.error({ error: JSON.stringify(error) });
-		return {
-			status: 500,
-			body: {
-				error: 'Could not fetch posts. ' + error
-			}
-		};
+		return json$1({
+			error: 'Could not fetch posts. ' + error
+		}, {
+			status: 500
+		});
 	}
 };
diff --git a/src/routes/api/blog/[slug].json.ts b/src/routes/api/blog/[slug].json.ts
deleted file mode 100644
index cb1929d..0000000
--- a/src/routes/api/blog/[slug].json.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { fetchBlogPostBySlug } from '$lib';
-import type { LoadInput } from '@sveltejs/kit';
-
-export const GET = async ({ params }: LoadInput) => {
-	const { slug } = params;
-
-	const post = await fetchBlogPostBySlug(slug);
-
-	if (!post) {
-		return {
-			status: 404,
-			body: {}
-		};
-	}
-
-	return {
-		status: 200,
-		body: { post }
-	};
-};
diff --git a/src/routes/api/blog/[slug].json/+server.ts b/src/routes/api/blog/[slug].json/+server.ts
new file mode 100644
index 0000000..6efb077
--- /dev/null
+++ b/src/routes/api/blog/[slug].json/+server.ts
@@ -0,0 +1,14 @@
+import { json, type LoadEvent, error } from '@sveltejs/kit';
+import { fetchBlogPostBySlug } from '$lib';
+
+export const GET = async ({ params }: LoadEvent) => {
+	const { slug } = params;
+
+	const post = await fetchBlogPostBySlug(slug);
+
+	if (!post) {
+		throw error(404, `Could not find blog post with slug '${slug}'`);
+	}
+
+	return json({ post });
+};
diff --git a/src/routes/blog/__error.svelte b/src/routes/blog/+error.svelte
similarity index 100%
rename from src/routes/blog/__error.svelte
rename to src/routes/blog/+error.svelte
diff --git a/src/routes/blog.svelte b/src/routes/blog/+page.svelte
similarity index 51%
rename from src/routes/blog.svelte
rename to src/routes/blog/+page.svelte
index c68d8bc..0a8d325 100644
--- a/src/routes/blog.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,75 +1,43 @@
-<script lang="ts" context="module">
-	import type { Load, LoadInput, LoadOutput } from '@sveltejs/kit';
-	import { differenceInCalendarDays, intlFormat } from 'date-fns';
-	export const prerender = true;
-
-	type BlogPost = {
-		filename: string;
-		preview: string[];
-		title: string;
-		slug: string;
-		date: Date;
-		book_review?: boolean;
-	};
-
-	export async function load({ fetch }: LoadInput): Promise<LoadOutput> {
-		const posts = await fetch('/api/blog.json')
-			.then((res) => res.json())
-			.then((res) => res.posts);
-
-		const mostRecentPost = posts[0];
-
-		const daysSinceLastPublish = differenceInCalendarDays(
-			new Date(),
-			new Date(mostRecentPost.date)
-		);
-
-		const numberOfPosts = posts.length;
-		const firstPost = posts[numberOfPosts - 1]
-		const daysSinceFirstPost = differenceInCalendarDays(new Date(), new Date(firstPost.date))
-		const averageDaysBetweenPosts = Number(daysSinceFirstPost / numberOfPosts).toFixed(2)
-
-		const res: LoadOutput = {
-			status: 200,
-			props: {
-				posts,
-				firstPost,
-				averageDaysBetweenPosts,
-				daysSinceFirstPost,
-				daysSinceLastPublish,
-				numberOfPosts,
-			}
-		};
-
-		return res;
-	}
-</script>
-
 <script lang="ts">
-	import Navbar from '../components/Navbar.svelte';
-	export let posts: BlogPost[];
-	export let firstPost: BlogPost;
-	export let numberOfPosts: number;
-	export let daysSinceLastPublish: number;
-	export let daysSinceFirstPost: number;
-	export let averageDaysBetweenPosts: number;
+	import type { PageData } from './$types';
+	import Navbar from '../../components/Navbar.svelte';
+	import { intlFormat } from 'date-fns';
+
+	export let data: PageData;
+	$: ({
+		posts,
+		firstPost,
+		numberOfPosts,
+		daysSinceLastPublish,
+		daysSinceFirstPost,
+		averageDaysBetweenPosts
+	} = data);
 </script>
 
 <svelte:head>
 	<!-- Primary Meta Tags -->
 	<title>Blog | thomaswilson.xyz</title>
-	<meta name="title" content="Blog | thomaswilson.xyz">
-	<meta name="description" content="I write about software and how I should have built it, and sometimes other things.">
+	<meta name="title" content="Blog | thomaswilson.xyz" />
+	<meta
+		name="description"
+		content="I write about software and how I should have built it, and sometimes other things."
+	/>
 
 	<!-- Open Graph / Facebook -->
-	<meta property="og:type" content="website">
-	<meta property="og:url" content="https://www.thomaswilson.xyz/blog">
-	<meta property="og:title" content="Blog | thomaswilson.xyz">
-	<meta property="og:description" content="I write about software and how I should have built it, and sometimes other things.">
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="https://www.thomaswilson.xyz/blog" />
+	<meta property="og:title" content="Blog | thomaswilson.xyz" />
+	<meta
+		property="og:description"
+		content="I write about software and how I should have built it, and sometimes other things."
+	/>
 
 	<!-- Twitter -->
-	<meta property="twitter:title" content="Blog | thomaswilson.xyz">
-	<meta property="twitter:description" content="I write about software and how I should have built it, and sometimes other things.">
+	<meta property="twitter:title" content="Blog | thomaswilson.xyz" />
+	<meta
+		property="twitter:description"
+		content="I write about software and how I should have built it, and sometimes other things."
+	/>
 </svelte:head>
 
 <Navbar />
@@ -81,13 +49,11 @@
 			things.
 		</p>
 		<p>
-			It's been <span
-				class="days-since"
-				class:days-since-success={daysSinceLastPublish === 0}
-			>
+			It's been <span class="days-since" class:days-since-success={daysSinceLastPublish === 0}>
 				{daysSinceLastPublish}
 			</span>
-			{daysSinceLastPublish === 1 ? 'day' : 'days'} since I last published something.  On average I publish something every {averageDaysBetweenPosts} days ({numberOfPosts} posts in {daysSinceFirstPost} days).
+			{daysSinceLastPublish === 1 ? 'day' : 'days'} since I last published something. On average I publish
+			something every {averageDaysBetweenPosts} days ({numberOfPosts} posts in {daysSinceFirstPost} days).
 		</p>
 	</section>
 
diff --git a/src/routes/blog/+page.ts b/src/routes/blog/+page.ts
new file mode 100644
index 0000000..21c5832
--- /dev/null
+++ b/src/routes/blog/+page.ts
@@ -0,0 +1,36 @@
+import type { LoadEvent, Load, Page } from '@sveltejs/kit';
+import { differenceInCalendarDays, intlFormat } from 'date-fns';
+export const prerender = true;
+
+type BlogPost = {
+	filename: string;
+	preview: string[];
+	title: string;
+	slug: string;
+	date: Date;
+	book_review?: boolean;
+};
+
+export async function load({ fetch }: LoadEvent) {
+	const posts = await fetch('/api/blog.json')
+		.then((res) => res.json())
+		.then((res) => res.posts);
+
+	const mostRecentPost = posts[0];
+
+	const daysSinceLastPublish = differenceInCalendarDays(new Date(), new Date(mostRecentPost.date));
+
+	const numberOfPosts = posts.length;
+	const firstPost = posts[numberOfPosts - 1];
+	const daysSinceFirstPost = differenceInCalendarDays(new Date(), new Date(firstPost.date));
+	const averageDaysBetweenPosts = Number(daysSinceFirstPost / numberOfPosts).toFixed(2);
+
+	return {
+		posts,
+		firstPost,
+		averageDaysBetweenPosts,
+		daysSinceFirstPost,
+		daysSinceLastPublish,
+		numberOfPosts
+	};
+}
diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug]/+page.svelte
similarity index 70%
rename from src/routes/blog/[slug].svelte
rename to src/routes/blog/[slug]/+page.svelte
index ce42a81..ba68848 100644
--- a/src/routes/blog/[slug].svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,34 +1,11 @@
-<script lang="ts" context="module">
-	import type { LoadInput, LoadOutput } from '@sveltejs/kit';
-
-	export async function load({ params, fetch }: LoadInput): Promise<LoadOutput> {
-		const { slug } = params;
-		const { post } = await fetch(`/api/blog/${slug}.json`)
-			.then((res) => res.json())
-			.catch((error) => {
-				console.error(error);
-				return { post: null };
-			});
-
-		const res: LoadOutput = {
-			status: post ? 200 : 404,
-			props: {
-				date: new Date(post.date),
-				post
-			}
-		};
-
-		return res;
-	}
-</script>
-
 <script lang="ts">
+	import type { PageData } from './$types';
 	import type { Post } from '$lib/Post';
 	import { intlFormat } from 'date-fns';
-	import Navbar from '../../components/Navbar.svelte';
+	import Navbar from '../../../components/Navbar.svelte';
 
-	export let date: Date;
-	export let post: Post;
+	export let data: PageData;
+	$: ({ date, post } = data);
 </script>
 
 <svelte:head>
diff --git a/src/routes/blog/[slug]/+page.ts b/src/routes/blog/[slug]/+page.ts
new file mode 100644
index 0000000..b40a913
--- /dev/null
+++ b/src/routes/blog/[slug]/+page.ts
@@ -0,0 +1,17 @@
+import type { LoadEvent } from '@sveltejs/kit';
+import type { Post } from '$lib/Post';
+
+export async function load({ params, fetch }: LoadEvent): Promise<{ post: Post; date: Date }> {
+	const { slug } = params;
+	const { post } = await fetch(`/api/blog/${slug}.json`)
+		.then((res) => res.json())
+		.catch((error) => {
+			console.error(error);
+			return { post: null };
+		});
+
+	return {
+		post,
+		date: new Date(post.date)
+	};
+}
diff --git a/src/routes/mcc.svelte b/src/routes/mcc/+page.svelte
similarity index 99%
rename from src/routes/mcc.svelte
rename to src/routes/mcc/+page.svelte
index 9e8fd62..08f5e66 100644
--- a/src/routes/mcc.svelte
+++ b/src/routes/mcc/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import Employee from '../components/salary-calculator/employee.svelte';
+	import Employee from '../../components/salary-calculator/employee.svelte';
 
 	type Employee = {
 		id: string;
diff --git a/src/routes/payday.svelte b/src/routes/payday/+page.svelte
similarity index 100%
rename from src/routes/payday.svelte
rename to src/routes/payday/+page.svelte