diff --git a/input.css b/input.css
index b483148..a67b4a4 100644
--- a/input.css
+++ b/input.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./internal/ui/views/index/index.css";
 @import "./internal/ui/views/shelf/shelf.css";
 @import "./internal/ui/views/login/login.css";
 @import "./internal/ui/components/header/header.css";
@@ -58,7 +59,7 @@ main {
     justify-content: center;
     gap: theme(spacing.2);
     cursor: pointer;
-    padding: theme(spacing.3) theme(spacing.2);
+    padding: theme(spacing.3) theme(spacing.5);
     font-weight: bold;
     font-family: var(--font-primary);
 
diff --git a/internal/ui/components/header/header.css b/internal/ui/components/header/header.css
index 5aec633..6a82158 100644
--- a/internal/ui/components/header/header.css
+++ b/internal/ui/components/header/header.css
@@ -3,7 +3,6 @@ header {
     top: 0;
     z-index: 50;
     padding-inline: 1rem;
-    margin-bottom: 2rem;
 }
 
 .header-nav {
@@ -38,6 +37,7 @@ header {
         display: flex;
         gap: 0.375rem;
         align-items: center;
+        font-family: var(--font-primary);
     }
 
     & > div {
@@ -67,6 +67,42 @@ header {
     height: 1.5rem;
     border-radius: 9999px;
     background: var(--color-dim);
+
+    svg {
+        height: 1rem;
+        width: 1rem;
+    }
+}
+
+.header-nav-link {
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: var(--color-dim);
+
+    &:hover {
+        color: var(--color-ink);
+    }
+}
+
+.header-signin {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: var(--color-ink);
+
+    &:hover {
+        color: var(--color-dim);
+    }
+}
+
+.header-username {
+    font-size: 0.875rem;
+    font-weight: 500;
 }
 
 .header-dropdown-btn {
diff --git a/internal/ui/components/header/header.templ b/internal/ui/components/header/header.templ
index 1cce332..7fa4c21 100644
--- a/internal/ui/components/header/header.templ
+++ b/internal/ui/components/header/header.templ
@@ -6,14 +6,20 @@ templ Header(params HeaderParams) {
 	<header role="banner">
 		<nav class="header-nav" aria-label="Main navigation">
 			<a class="header-logo" href="/">shlf.space <span>alpha</span></a>
-			<div style="display:flex; gap:0.5rem; align-items:center">
-				if params.User != nil {
-					<details class="header-dropdown">
-						<summary aria-label="User menu">
+			if params.User != nil {
+				<div style="display:flex; gap:2rem; align-items:center">
+					<a href="#" class="header-nav-link">Library</a>
+					<a href="#" class="header-nav-link">Progress</a>
+					<a href="#" class="header-nav-link">Journal</a>
+					<a href="#" class="header-nav-link">Community</a>
+				</div>
+				<div style="display:flex; gap:0.5rem; align-items:center">
+					<details class="header-dropdown" x-data @toggle="$el.querySelector('summary').setAttribute('aria-expanded', $el.open)">
+						<summary aria-label="User menu" aria-expanded="false" aria-haspopup="menu">
 							<div class="header-avatar">
 								<i data-lucide="user" aria-hidden="true"></i>
 							</div>
-							<span style="font-size:0.875rem">{ params.User.Account.Handle }</span>
+							<span class="header-username">{ params.User.Account.Handle }</span>
 						</summary>
 						<div role="menu">
 							<a
@@ -35,8 +41,8 @@ templ Header(params HeaderParams) {
 							</button>
 						</div>
 					</details>
-					<details class="header-dropdown">
-						<summary aria-label="Language selector">
+					<details class="header-dropdown" x-data @toggle="$el.querySelector('summary').setAttribute('aria-expanded', $el.open)">
+						<summary aria-label="Language selector" aria-expanded="false" aria-haspopup="menu">
 							<span role="img" aria-label="South Korea flag">🇰🇷</span>
 						</summary>
 						<div role="menu">
@@ -51,10 +57,10 @@ templ Header(params HeaderParams) {
 							</button>
 						</div>
 					</details>
-				} else {
-					<a href="/login">login</a>
-				}
-			</div>
+				</div>
+			} else {
+				<a href="/login" class="header-signin">Sign in <span aria-hidden="true">→</span></a>
+			}
 		</nav>
 	</header>
 }
diff --git a/internal/ui/layouts/base/base.templ b/internal/ui/layouts/base/base.templ
index c2d98fa..c42a91a 100644
--- a/internal/ui/layouts/base/base.templ
+++ b/internal/ui/layouts/base/base.templ
@@ -6,7 +6,7 @@ templ Base(params BaseParams) {
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<title>shlf.space - { params.Title }</title>
+			<title>{ params.Title } - shlf.space</title>
 			<link rel="preload" href="/static/fonts/epilogue.woff2" as="font" type="font/woff2" crossorigin/>
 			<link rel="preload" href="/static/fonts/caveat.woff2" as="font" type="font/woff2" crossorigin/>
 			<script src="/static/js/htmx.min.js" defer></script>
diff --git a/internal/ui/views/index/index.css b/internal/ui/views/index/index.css
new file mode 100644
index 0000000..25ca295
--- /dev/null
+++ b/internal/ui/views/index/index.css
@@ -0,0 +1,54 @@
+.hero {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 1.5rem 6rem;
+    position: relative;
+}
+
+.hero-inner {
+    position: relative;
+    max-width: 46rem;
+    width: 100%;
+    text-align: center;
+}
+
+.hero-headline {
+    font-size: clamp(3rem, 7vw, 5.5rem);
+    font-weight: 900;
+    line-height: 1.05;
+    letter-spacing: -0.02em;
+    margin: 0 0 1.25rem;
+
+    span {
+        display: block;
+    }
+}
+
+.hero-subtext {
+    font-size: 1.0625rem;
+    line-height: 1.7;
+    color: var(--color-dim);
+    max-width: 38rem;
+    margin: 0 auto 2.5rem;
+}
+
+.hero-cta {
+    padding: 1rem 2rem;
+    font-size: 0.8125rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    text-decoration: none;
+}
+
+.hero-annotation {
+    position: absolute;
+    bottom: -2.5rem;
+    right: 0;
+    font-family: var(--font-accent);
+    font-size: 1.375rem;
+    color: var(--color-dim);
+    transform: rotate(-2deg);
+    pointer-events: none;
+}
diff --git a/internal/ui/views/index/index.templ b/internal/ui/views/index/index.templ
index 8128fdc..4f07379 100644
--- a/internal/ui/views/index/index.templ
+++ b/internal/ui/views/index/index.templ
@@ -8,6 +8,25 @@ import (
 templ IndexPage(params IndexPageParams) {
 	@layouts.Base(layouts.BaseParams{Title: "home"}) {
 		@header.Header(header.HeaderParams{User: params.User})
-		<div></div>
+		<section class="hero" aria-labelledby="hero-headline">
+			<div class="hero-inner">
+				<h1 id="hero-headline" class="hero-headline">
+					Your reading journey,
+					<br/>
+					<span>beautifully shelved.</span>
+				</h1>
+				<p class="hero-subtext">
+					A personal space to log your progress, track your milestones, and curate your personal library.
+				</p>
+				<div style="display:flex; align-items:center; justify-content:center">
+					<a href="/login" class="button button-primary hero-cta">
+						Start your shelf <span aria-hidden="true">→</span>
+					</a>
+				</div>
+				<div class="hero-annotation" aria-hidden="true">
+					Keep going!
+				</div>
+			</div>
+		</section>
 	}
 }
diff --git a/internal/ui/views/login/login.templ b/internal/ui/views/login/login.templ
index d405a6a..b324b3b 100644
--- a/internal/ui/views/login/login.templ
+++ b/internal/ui/views/login/login.templ
@@ -55,7 +55,7 @@ templ LoginPage(params LoginPageParams) {
 						aria-label="Login"
 					>
 						<i class="spinner" data-lucide="loader-circle" aria-hidden="true"></i>
-						<span aria-hidden="true">Login</span>
+						<span>Login</span>
 						<i data-lucide="arrow-right" aria-hidden="true"></i>
 					</button>
 				</form>