diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..02a4a20
--- /dev/null
+++ b/src/lib/components/Footer.svelte
@@ -0,0 +1,21 @@
+<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} 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 289d1ed..9597f80 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -9,29 +9,27 @@
 	let { photo, titles, name, description }: Props = $props();
 </script>
 
-<div class="flex flex-col">
-	<div class="hero bg-base-200 py-48">
-		<div class="hero-content">
-			<div class="flex max-w-5xl gap-12">
-				<div class="flex-0">
-					<div class="avatar">
-						<div
-							class="ring-offset-base-100 ring-base-100 w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
-						>
-							<img src={photo} alt="Its me!" />
-						</div>
+<div class="hero bg-base-200">
+	<div class="hero-content">
+		<div class="flex max-w-5xl gap-12">
+			<div class="flex-0">
+				<div class="avatar">
+					<div
+						class="ring-offset-base-100 ring-base-100 w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
+					>
+						<img src={photo} alt="Its me!" />
 					</div>
 				</div>
-				<div class="flex flex-1 flex-col">
-					<p>{titles.join(', ')}</p>
-					<h1 class="text-5xl font-bold">{name}</h1>
-					<p class="block py-6">
-						{description}
-					</p>
-					<div class="flex justify-end gap-4">
-						<a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a>
-						<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
-					</div>
+			</div>
+			<div class="flex flex-1 flex-col">
+				<p>{titles.join(', ')}</p>
+				<h1 class="text-5xl font-bold">{name}</h1>
+				<p class="block py-6">
+					{description}
+				</p>
+				<div class="flex justify-end gap-4">
+					<a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a>
+					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
 				</div>
 			</div>
 		</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 0e3bf96..622f257 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -10,9 +10,9 @@
 <nav class="navbar px-12">
 	<div class="flex flex-1 items-center gap-4">
 		<a href="/">
-			<div class="avatar avatar-placeholder">
+			<div class="avatar avatar-placeholder w-12">
 				<div
-					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content w-10 rounded-full text-xl ring-2 ring-offset-2"
+					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full text-xl ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
 				>
 					<b>B</b>
 				</div>
@@ -22,7 +22,11 @@
 	</div>
 	<div class="flex gap-4 text-lg">
 		{#each pages as page (page.slug)}
-			<a href={page.slug} class="link hover:link-accent" class:link-accent={route.id === page.slug}>
+			<a
+				href={page.slug}
+				class="link hover:link-accent transition-colors"
+				class:link-accent={route.id === page.slug}
+			>
 				{page.name}
 			</a>
 		{/each}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cc9ee5a..3782da1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import Footer from '$lib/components/Footer.svelte';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import '../app.css';
 
@@ -13,11 +14,21 @@
 		{ slug: '/experience', name: 'Experience' },
 		{ slug: '/contact', name: 'Contact' }
 	];
+
+	const socialLinks = [
+		{ name: 'Github', href: 'https://github.com/BenjaminPalko' },
+		{ name: 'LinkedIn', href: 'https://www.linkedin.com/in/benjaminpalko/' },
+		{ name: 'Itch.io', href: 'https://baobeld.itch.io/' },
+		{ name: 'Ko-fi', href: 'https://ko-fi.com/baobeld' }
+	];
 </script>
 
 <div class="h-screen w-screen p-12">
-	<div class="bg-base-200 flex min-h-full flex-col gap-8 rounded-4xl p-8">
+	<div class="bg-base-200 flex min-h-full flex-col rounded-4xl p-8">
 		<Navbar {pages} route={page.route} />
-		<div class="px-8">{@render children()}</div>
+		<div class="flex-1 p-8">{@render children()}</div>
+		<div>
+			<Footer links={socialLinks} />
+		</div>
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5275fb1..a75f348 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,63 @@
 <script lang="ts">
 	import Hero from '$lib/components/Hero.svelte';
+	import { Braces, Gamepad2, HeartHandshake, MonitorCog } from 'lucide-svelte';
 
 	const description =
 		'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>
 
-<Hero
-	photo="/yeet-winter.jpg"
-	titles={['Software Engineer', 'Game Developer']}
-	name="Benjamin Palko"
-	{description}
-/>
+<div class="flex flex-col px-12">
+	<div class="py-48">
+		<Hero
+			photo="/yeet-winter.jpg"
+			titles={['Software Engineer', 'Game Developer']}
+			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>
+			<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 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 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>
+	</div>
+</div>