diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
new file mode 100644
index 0000000..289d1ed
--- /dev/null
+++ b/src/lib/components/Hero.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	interface Props {
+		photo: string;
+		titles: string[];
+		name: string;
+		description: string;
+	}
+
+	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>
+				</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>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 35d73d4..0e3bf96 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -9,13 +9,15 @@
 
 <nav class="navbar px-12">
 	<div class="flex flex-1 items-center gap-4">
-		<div class="avatar avatar-placeholder">
-			<div
-				class="ring-accent ring-offset-base-100 bg-base-200 text-neutral-content w-10 rounded-full ring ring-offset-2"
-			>
-				<span>B</span>
+		<a href="/">
+			<div class="avatar avatar-placeholder">
+				<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"
+				>
+					<b>B</b>
+				</div>
 			</div>
-		</div>
+		</a>
 		<h2 class="text-3xl"><b>Benjamin</b> Palko</h2>
 	</div>
 	<div class="flex gap-4 text-lg">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0fbba99..5275fb1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,13 @@
 <script lang="ts">
+	import Hero from '$lib/components/Hero.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}
+/>