diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index d965d2a..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 flex-col gap-12 lg:flex-row">
+		<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 flex-col gap-2 lg:flex-row lg:justify-end lg: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 17d46c2..9fa85d9 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -14,7 +14,7 @@
 <nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
 		<a href="/">
-			<div class="avatar avatar-placeholder">
+			<div class="avatar avatar-placeholder animate-pulse">
 				<div
 					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"
 				>
diff --git a/src/lib/components/WIP.svelte b/src/lib/components/WIP.svelte
index da35e34..66242b2 100644
--- a/src/lib/components/WIP.svelte
+++ b/src/lib/components/WIP.svelte
@@ -6,7 +6,7 @@
 
 {#snippet Banner(messages: string[], backwards: boolean)}
 	<div
-		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-black lg:py-6 lg:text-lg"
+		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}
 	>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8d42f29..b1b29b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -68,19 +68,28 @@
 
 	<div class="drawer-side">
 		<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
-		<ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4">
-			{#each pages as page (page.slug)}
-				<li>
-					<button
-						class="btn btn-primary btn-lg"
-						onclick={() => {
-							goto(page.slug);
-							drawerOpen = false;
-						}}>{page.name}</button
-					>
-				</li>
-			{/each}
-			<label for="navigation-drawer" class="btn btn-error btn-lg">Close</label>
-		</ul>
+		<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 cdd00ec..529e7fc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,16 +6,22 @@
 		'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 items-center px-12">
+<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 class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+	<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>
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