diff --git a/package.json b/package.json
index c8296e9..ca38cac 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"deploy": "wrangler deploy --minify",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 0a83643..8881b75 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -7,32 +7,25 @@ const R2_BASE_URL = "https://r2.steve.photo";
 export const load: PageServerLoad = async ({ platform }) => {
 	const db = platform?.env?.DB;
 
-	if (!db) {
-		// Fallback for local dev without D1
-		const data = await import("$lib/data.json");
-		return { photos: data.default as ImageItem[] };
-	}
-
 	const result = await db
 		.prepare("SELECT * FROM photos ORDER BY date DESC")
 		.all();
 
 	const photos: ImageItem[] = result.results.map(
 		(row: Record<string, unknown>) => ({
-			slug: row.slug as string,
-			title: row.title as string,
-			date: row.date as string,
+			slug: row.slug,
+			title: row.title,
+			date: row.date,
 			image: `${R2_BASE_URL}/${row.image_key}`,
 			thumb: `${R2_BASE_URL}/${row.thumb_key}`,
-			type: row.type as string,
-			camera: row.camera as string,
-			lens: row.lens as string,
-			aperture: row.aperture as string,
-			exposure: row.exposure as string,
-			focalLength: row.focal_length as string,
-			iso: row.iso as string,
-			make: row.make as string,
-			tags: JSON.parse((row.tags as string) || "[]"),
+			type: row.type,
+			camera: row.camera,
+			lens: row.lens,
+			aperture: row.aperture,
+			exposure: row.exposure,
+			focalLength: row.focal_length,
+			iso: row.iso,
+			make: row.make,
 		}),
 	);
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 928ba73..5bd2258 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { PageData } from "./$types";
-import type { ImageItem } from "$lib/types";
-
+type ImageItem = PageData["photos"][number];
 let { data }: { data: PageData } = $props();
 </script>
 
@@ -12,9 +11,9 @@ let { data }: { data: PageData } = $props();
 
   {#snippet figure(image: ImageItem)}
   <div class="flex gap-2 px-8 pt-2">
-    <div class="flex-2 min-w-0">
+    <a href="/photo/{image.slug}" class="flex-2 min-w-0">
      	<img class="max-w-full h-auto block" src={image.image} alt={image.title} />
-    </div>
+    </a>
     <div class="flex flex-col gap-1 flex-1 min-w-0 p-4">
       <h2 class="text-lg">{image.title.toUpperCase()}</h2>
       <h3 class="text-sm">{image.make} {image.camera}</h3>
diff --git a/src/routes/photo/[slug]/+page.server.ts b/src/routes/photo/[slug]/+page.server.ts
new file mode 100644
index 0000000..97357a5
--- /dev/null
+++ b/src/routes/photo/[slug]/+page.server.ts
@@ -0,0 +1,37 @@
+import type { PageServerLoad } from "./$types";
+import type { ImageItem } from "$lib/types";
+import { error } from "@sveltejs/kit";
+
+const R2_BASE_URL = "https://r2.steve.photo";
+
+export const load: PageServerLoad = async ({ platform, params }) => {
+	const db = platform?.env?.DB;
+
+	const result = await db
+		.prepare("SELECT * FROM photos WHERE slug = ?")
+		.bind(params.slug)
+		.first();
+
+	if (!result) {
+		throw error(404, "Photo not found");
+	}
+
+	const photo: ImageItem = {
+		slug: result.slug as string,
+		title: result.title as string,
+		date: result.date as string,
+		image: `${R2_BASE_URL}/${result.image_key}`,
+		thumb: `${R2_BASE_URL}/${result.thumb_key}`,
+		type: result.type as string,
+		camera: result.camera as string,
+		lens: result.lens as string,
+		aperture: result.aperture as string,
+		exposure: result.exposure as string,
+		focalLength: result.focal_length as string,
+		iso: result.iso as string,
+		make: result.make as string,
+		tags: [],
+	};
+
+	return { photo };
+};
diff --git a/src/routes/photo/[slug]/+page.svelte b/src/routes/photo/[slug]/+page.svelte
new file mode 100644
index 0000000..e7cc813
--- /dev/null
+++ b/src/routes/photo/[slug]/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	let { data }: { data: PageData } = $props();
+</script>
+
+<div class="bg-[#121113] min-h-screen text-white">
+	<div class="fixed bg-[#121113] w-full py-4 px-8">
+		<a href="/" class="text-sm hover:underline">steve.photo</a>
+	</div>
+
+	<div class="flex gap-2 px-8 pt-16">
+		<div class="flex-2 min-w-0">
+			<img class="max-w-full h-auto block" src={data.photo.image} alt={data.photo.title} />
+		</div>
+		<div class="flex flex-col gap-1 flex-1 min-w-0 p-4">
+			<h2 class="text-lg">{data.photo.title.toUpperCase()}</h2>
+			<h3 class="text-sm">{data.photo.make} {data.photo.camera}</h3>
+			<div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4">
+				<p>{data.photo.focalLength}</p>
+				<p>{data.photo.aperture}</p>
+				<p>{data.photo.exposure}</p>
+				<p>ISO {data.photo.iso}</p>
+				<p>-</p>
+				<p class="text-neutral-700 text-xs">{new Date(data.photo.date).toLocaleDateString()}</p>
+			</div>
+		</div>
+	</div>
+</div>