diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..67057a9
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,17 @@
+NPM_TOKEN=
+
+# Name: Toby Purdy
+MAIL_TRANSPORT_HOST=smtp.ethereal.email
+MAIL_TRANSPORT_PORT=587
+MAIL_TRANSPORT_USER=toby.purdy58@ethereal.email
+MAIL_TRANSPORT_PASS=2bh8GWQpB2FWk6Eu9S
+
+STRAPI_HOST=
+STRAPI_PORT=
+
+DATABASE_CLIENT=
+DATABASE_HOST=
+DATABASE_PORT=
+DATABASE_NAME=
+DATABASE_USERNAME=
+DATABASE_PASSWORD=
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 45d1dd3..83d7bb3 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -27,9 +27,9 @@ jobs:
         run: bun install
       - name: Lint
         run: bun lint
-      - name: Build
-        run: bun run build
       - name: Svelte Check
         run: bun check
       - name: Test
         run: bun run test:unit
+      - name: Build
+        run: bun run build
diff --git a/.gitignore b/.gitignore
index 3b462cb..789de27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,9 +14,6 @@ Thumbs.db
 
 # Env
 .env
-.env.*
-!.env.example
-!.env.test
 
 # Vite
 vite.config.js.timestamp-*
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
deleted file mode 100644
index 94ba8ba..0000000
--- a/src/lib/components/Footer.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	interface Props {
-		links: {
-			name: string;
-			href: string;
-		}[];
-	}
-
-	let { links }: Props = $props();
-</script>
-
-<div class="flex justify-between">
-	<div class="flex gap-8">
-		{#each links as link (link.href)}
-			<a
-				href={link.href}
-				target="_blank"
-				class="hover:text-base-content text-slate-600 transition-colors">{link.name}</a
-			>
-		{/each}
-	</div>
-	<p class="text-slate-600">© 2025 Benjamin Palko</p>
-</div>
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 5d09cea..d09fbe6 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -13,18 +13,18 @@
 
 <div class="hero bg-base-200">
 	<div class="hero-content">
-		<div class="flex max-w-5xl gap-12">
+		<div class="flex flex-col items-center gap-12 lg:flex-row lg:items-start">
 			<div class="flex-0">
 				<div class="avatar">
 					<div
-						class="ring-offset-base-100 ring-base-100 dark:ring-primary w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
+						class="ring-offset-base-100 ring-base-100 dark:ring-primary w-48 rounded-full shadow-2xl ring-8 ring-offset-2 md:w-56 dark:shadow-none"
 					>
 						<img src={photo} alt="Its me!" />
 					</div>
 				</div>
 			</div>
-			<div class="flex flex-1 flex-col">
-				<p>{titles.join(', ')}</p>
+			<div class="flex flex-1 flex-col text-center lg:text-left">
+				<p class="text-gray-500">{titles.join(', ')}</p>
 				<h1 class="text-primary text-5xl font-light">
 					<span class="text-base-content font-semibold">{first}</span>
 					{rest}
@@ -32,7 +32,7 @@
 				<p class="block py-6">
 					{description}
 				</p>
-				<div class="flex justify-end gap-4">
+				<div class="flex flex-col gap-2 sm:flex-row lg:gap-4">
 					<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
 					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
 				</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 3e6e66b..9fa85d9 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,30 +1,36 @@
 <script lang="ts">
+	import { Menu } from 'lucide-svelte';
+
 	interface Props {
+		drawerId: string;
 		title: string;
 		pages: { slug: string; name: string }[];
 		route: { id: string | null };
 	}
 
-	let { title, pages, route }: Props = $props();
+	let { drawerId, title, pages, route }: Props = $props();
 </script>
 
 <nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
 		<a href="/">
-			<div class="avatar avatar-placeholder w-12">
+			<div class="avatar avatar-placeholder animate-pulse">
 				<div
-					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
+					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
 				>
-					<span class="text-2xl"> {title.at(0)} </span>
+					<span class="text-xl lg:text-2xl"> {title.at(0)} </span>
 				</div>
 			</div>
 		</a>
-		<h2 class="text-primary text-3xl font-light">
+		<h2 class="text-primary text-2xl font-light lg:text-3xl">
 			<span class="text-base-content font-semibold">Benjamin</span>
 			Palko
 		</h2>
 	</div>
-	<div class="flex gap-4 text-lg">
+	<label for={drawerId} aria-label="open sidebar" class="btn btn-square btn-outline lg:hidden">
+		<Menu />
+	</label>
+	<div class="hidden gap-4 text-lg lg:flex">
 		{#each pages as page (page.slug)}
 			<a
 				href={page.slug}
diff --git a/src/lib/components/WIP.svelte b/src/lib/components/WIP.svelte
index 89048f3..66242b2 100644
--- a/src/lib/components/WIP.svelte
+++ b/src/lib/components/WIP.svelte
@@ -6,11 +6,11 @@
 
 {#snippet Banner(messages: string[], backwards: boolean)}
 	<div
-		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-6 text-xl font-semibold text-black"
+		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-nowrap text-black lg:py-6 lg:text-lg"
 		class:rotate-5={!backwards}
 		class:-rotate-5={backwards}
 	>
-		<div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8">
+		<div class="scroll-parent h-4 w-full overflow-x-hidden bg-amber-400 px-8 lg:h-6">
 			<div
 				class="scroll-element flex justify-around"
 				class:primary={!backwards}
@@ -40,9 +40,9 @@
 	</div>
 {/snippet}
 
-<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-6">
+<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-4 lg:p-6">
 	<div
-		class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-48 overflow-hidden border border-amber-400"
+		class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-32 overflow-hidden border border-amber-400 lg:gap-48"
 	>
 		{@render Banner(messages, false)}
 		{@render Banner(messages, true)}
@@ -52,7 +52,6 @@
 <style>
 	.scroll-parent {
 		position: relative;
-		height: 1.8rem;
 	}
 
 	.scroll-element {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4a72278..b1b29b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import Footer from '$lib/components/Footer.svelte';
+	import { goto } from '$app/navigation';
+	import { navigating, page } from '$app/state';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import '../app.css';
 
 	let { children } = $props();
 
+	let drawerOpen = $state(false);
+
+	if (navigating) {
+		drawerOpen = false;
+	}
+
 	const pages = [
 		{ slug: '/', name: 'About Me' },
 		{ slug: '/resume', name: 'Resume' },
@@ -23,23 +29,67 @@
 	let current = $derived(pages.find((p) => p.slug === page.route.id));
 </script>
 
-<div class="h-screen w-screen p-12">
-	<div
-		class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] rounded-4xl"
-	>
-		<header class=" p-8">
-			<Navbar title="Benjamin Palko" {pages} route={page.route} />
-		</header>
-		{#if current && current.slug !== '/'}
-			<div class="bg-base-300 w-full px-12 py-8">
-				<h1 class="text-4xl font-light">{current.name}</h1>
+<div class="drawer drawer-end">
+	<input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
+
+	<div class="drawer-content h-screen w-screen lg:p-12">
+		<div
+			class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] overflow-hidden lg:gap-4 lg:rounded-4xl"
+		>
+			<header class="lg:p-6">
+				<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
+			</header>
+			<div>
+				{#if current && current.slug !== '/'}
+					<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
+						<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
+					</div>
+				{/if}
 			</div>
-		{/if}
-		<main>
-			{@render children()}
-		</main>
-		<footer class="p-8">
-			<Footer links={socialLinks} />
-		</footer>
+			<main>
+				{@render children()}
+			</main>
+			<footer class="p-2 lg:p-6">
+				<div class="flex justify-between text-xs lg:text-lg">
+					<div class="flex gap-2 lg:gap-8">
+						{#each socialLinks as link (link.href)}
+							<a
+								href={link.href}
+								target="_blank"
+								class="hover:text-base-content text-slate-600 transition-colors">{link.name}</a
+							>
+						{/each}
+					</div>
+					<p class="text-slate-600">© 2025 Benjamin Palko</p>
+				</div>
+			</footer>
+		</div>
+	</div>
+
+	<div class="drawer-side">
+		<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+		<div class="menu bg-base-200 flex min-h-full w-full flex-col justify-between p-4">
+			<ul class="flex flex-col gap-4">
+				{#each pages as page (page.slug)}
+					<li>
+						<button
+							class="btn btn-primary btn-soft btn-lg"
+							onclick={() => {
+								goto(page.slug);
+								drawerOpen = false;
+							}}>{page.name}</button
+						>
+					</li>
+				{/each}
+			</ul>
+
+			<div class="flex flex-col gap-4">
+				<h2 class="text-primary text-center text-4xl font-light lg:text-3xl">
+					<span class="text-base-content font-semibold">Benjamin</span>
+					Palko
+				</h2>
+				<label for="navigation-drawer" class="btn btn-error btn-soft btn-lg">Close</label>
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a75f348..529e7fc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,57 +6,63 @@
 		'Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.';
 </script>
 
-<div class="flex flex-col px-12">
-	<div class="py-48">
+<div class="flex flex-col items-center px-6 md:px-12">
+	<div class="lg:py-48">
 		<Hero
-			photo="/yeet-winter.jpg"
-			titles={['Software Engineer', 'Game Developer']}
+			photo="/waterfall-cropped.jpg"
+			titles={[
+				'Software Engineer',
+				'Game Developer',
+				'Linux Enjoyer',
+				'Cyclist',
+				'Goalie for Hire ⚽'
+			]}
 			name="Benjamin Palko"
 			{description}
 		/>
 	</div>
-	<div>
-		<h2 class="py-8 text-xl">What I Do</h2>
-		<div class="grid grid-cols-2 gap-8">
-			<div class="flex gap-4">
-				<Braces size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Web Development</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+	<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+		<div class="col-span-full">
+			<h2 class="border-primary w-fit border-b text-2xl font-light">What I Do</h2>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<Braces size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Web Development</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
-			<div class="flex gap-4">
-				<Gamepad2 size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Video Game Development</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<Gamepad2 size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Video Game Development</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
-			<div class="flex gap-4">
-				<MonitorCog size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Linux Ricing</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<MonitorCog size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Linux Ricing</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
-			<div class="flex gap-4">
-				<HeartHandshake size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Open-Source Development</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<HeartHandshake size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Open-Source Development</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/contact/+page.server.ts b/src/routes/contact/+page.server.ts
index d25477b..6ee228a 100644
--- a/src/routes/contact/+page.server.ts
+++ b/src/routes/contact/+page.server.ts
@@ -1,9 +1,4 @@
-import {
-	MAIL_TRANSPORT_HOST,
-	MAIL_TRANSPORT_PASS,
-	MAIL_TRANSPORT_PORT,
-	MAIL_TRANSPORT_USER
-} from '$env/static/private';
+import { env } from '$env/dynamic/private';
 import { fail } from '@sveltejs/kit';
 import { createTransport } from 'nodemailer';
 import type { Actions } from './$types';
@@ -49,11 +44,11 @@ export const actions = {
 		}
 
 		const transport = createTransport({
-			host: MAIL_TRANSPORT_HOST,
-			port: isNaN(Number(MAIL_TRANSPORT_PORT)) ? 587 : Number(MAIL_TRANSPORT_PORT),
+			host: env.MAIL_TRANSPORT_HOST,
+			port: isNaN(Number(env.MAIL_TRANSPORT_PORT)) ? 587 : Number(env.MAIL_TRANSPORT_PORT),
 			auth: {
-				user: MAIL_TRANSPORT_USER,
-				pass: MAIL_TRANSPORT_PASS
+				user: env.MAIL_TRANSPORT_USER,
+				pass: env.MAIL_TRANSPORT_PASS
 			}
 		});
 
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index a1bad8a..c6155dc 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <form id="contact" method="post" use:enhance>
-	<div class="mx-auto grid max-w-3xl grid-flow-col grid-cols-3 grid-rows-7 content-end gap-4 py-8">
+	<div class="mx-auto grid max-w-3xl gap-4 py-8 sm:grid-flow-col sm:grid-cols-3 sm:grid-rows-6">
 		<div class="col-span-full">
 			{#if form?.response?.rejected.length ?? 0 > 0}
 				<div role="alert" class="alert alert-error w-full">
@@ -37,21 +37,20 @@
 
 		<h2 class="col-span-full text-3xl font-light">Reach out! 🤝</h2>
 
-		<label class="input input-bordered flex w-full items-center">
+		<label class="input input-bordered col-span-full flex w-full items-center sm:col-span-1">
 			<UserRound />
 			<input name="name" type="text" class="grow" placeholder="Full Name" />
 		</label>
-		<label class="input input-bordered flex w-full items-center gap-2">
+		<label class="input input-bordered col-span-full flex w-full items-center gap-2 sm:col-span-1">
 			<Mail />
 			<input name="email" type="text" class="grow" placeholder="Your Email" />
 		</label>
-		<label class="input input-bordered flex w-full items-center gap-2">
+		<label class="input input-bordered col-span-full flex w-full items-center gap-2 sm:col-span-1">
 			<Croissant />
 			<input name="subject" type="text" class="grow" placeholder="Subject" />
 		</label>
-		<button type="submit" class="btn btn-primary">Send Message <Send size={20} /></button>
 
-		<div class="col-span-2 row-span-4">
+		<div class="row-span-3 sm:col-span-2">
 			<textarea
 				name="message"
 				form="contact"
@@ -59,5 +58,7 @@
 				placeholder="Message"
 			></textarea>
 		</div>
+
+		<button type="submit" class="btn btn-primary col-span0">Send Message <Send size={20} /></button>
 	</div>
 </form>
diff --git a/static/waterfall-cropped.jpg b/static/waterfall-cropped.jpg
new file mode 100644
index 0000000..4513607
Binary files /dev/null and b/static/waterfall-cropped.jpg differ