diff --git a/input.css b/input.css
index 83c8592..b483148 100644
--- a/input.css
+++ b/input.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "./internal/ui/views/shelf/shelf.css";
 @import "./internal/ui/views/login/login.css";
+@import "./internal/ui/components/header/header.css";
 
 @font-face {
     font-family: 'Epilogue';
@@ -33,11 +34,18 @@
 body {
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
     font-family: var(--font-primary);
     background-color: var(--color-canvas);
     color: var(--color-ink);
 }
 
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 .container {
     margin-inline: auto;
     max-width: 80rem;
@@ -51,6 +59,8 @@ body {
     gap: theme(spacing.2);
     cursor: pointer;
     padding: theme(spacing.3) theme(spacing.2);
+    font-weight: bold;
+    font-family: var(--font-primary);
 
     &:hover {
         background-color: var(--color-hover);
@@ -66,17 +76,15 @@ body {
         cursor: not-allowed;
         pointer-events: none;
     }
-}
-
-.button-primary {
-    background-color: var(--color-ink);
-    color: var(--color-canvas);
-    font-weight: bold;
-    font-family: var(--font-primary);
 
-    &:hover {
-        background-color: var(--color-dim);
+    &.button-primary {
+        background-color: var(--color-ink);
         color: var(--color-canvas);
+
+        &:hover {
+            background-color: var(--color-dim);
+            color: var(--color-canvas);
+        }
     }
 }
 
diff --git a/internal/ui/components/header/header.css b/internal/ui/components/header/header.css
new file mode 100644
index 0000000..5aec633
--- /dev/null
+++ b/internal/ui/components/header/header.css
@@ -0,0 +1,89 @@
+header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    padding-inline: 1rem;
+    margin-bottom: 2rem;
+}
+
+.header-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-inline: auto;
+    max-width: 80rem;
+    height: 4rem;
+}
+
+.header-logo {
+    font-size: 1.25rem;
+    font-weight: 500;
+    text-decoration: none;
+    color: inherit;
+
+    span {
+        font-size: 0.75rem;
+        font-weight: 400;
+        font-style: italic;
+    }
+}
+
+.header-dropdown {
+    position: relative;
+    display: inline-block;
+
+    summary {
+        cursor: pointer;
+        list-style: none;
+        display: flex;
+        gap: 0.375rem;
+        align-items: center;
+    }
+
+    & > div {
+        position: absolute;
+        right: 0;
+        margin-top: 0.5rem;
+        padding: 0.25rem;
+        display: flex;
+        flex-direction: column;
+        width: 12rem;
+        background: var(--color-tonal);
+        border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
+
+        hr {
+            border: none;
+            border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
+            margin: 0.25rem 0;
+        }
+    }
+}
+
+.header-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 9999px;
+    background: var(--color-dim);
+}
+
+.header-dropdown-btn {
+    display: block;
+    width: 100%;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.8125rem;
+    font-family: var(--font-primary);
+    color: var(--color-dim);
+    text-decoration: none;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--color-hover);
+        color: var(--color-ink);
+    }
+}
diff --git a/internal/ui/components/header/header.templ b/internal/ui/components/header/header.templ
index 8a8d4ea..1cce332 100644
--- a/internal/ui/components/header/header.templ
+++ b/internal/ui/components/header/header.templ
@@ -3,44 +3,51 @@ package header
 import "fmt"
 
 templ Header(params HeaderParams) {
-	<header class="w-full sticky top-0 z-50 px-4 mb-8">
-		<nav class="flex justify-between items-center mx-auto max-w-7xl h-16">
-			<a class="text-xl font-medium" href="/">shlf.space <span class="text-xs font-normal italic">alpha</span></a>
-			<div class="flex gap-2 items-center">
+	<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="relative inline-block text-left">
-						<summary class="cursor-pointer list-none flex gap-2 items-center">
-							<div class="flex items-center justify-center w-7 h-7 rounded-full bg-dim">
-								<i class="w-4 h-4" data-lucide="user"></i>
+					<details class="header-dropdown">
+						<summary aria-label="User menu">
+							<div class="header-avatar">
+								<i data-lucide="user" aria-hidden="true"></i>
 							</div>
-							<span class="text-sm">{ params.User.Account.Handle }</span>
+							<span style="font-size:0.875rem">{ params.User.Account.Handle }</span>
 						</summary>
-						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-tonal drop-shadow-sm">
+						<div role="menu">
 							<a
 								href={ templ.SafeURL(fmt.Sprintf("/%s/shelf", params.User.Account.Did)) }
-								class="button p-2 justify-start text-sm w-full"
+								class="header-dropdown-btn"
+								role="menuitem"
 							>
 								My shelf
 							</a>
-							<hr/>
-							<button type="button" hx-post="/logout" hx-swap="none" class="button p-2 justify-start text-sm w-full">
-								<i class="w-4 h-4" data-lucide="log-out"></i>
+							<hr role="separator"/>
+							<button
+								type="button"
+								hx-post="/logout"
+								hx-swap="none"
+								class="header-dropdown-btn"
+								role="menuitem"
+							>
 								Log out
 							</button>
 						</div>
 					</details>
-					<details class="relative inline-block text-left">
-						<summary class="cursor-pointer list-none flex gap-2 items-center">
-							<span>🇰🇷</span>
+					<details class="header-dropdown">
+						<summary aria-label="Language selector">
+							<span role="img" aria-label="South Korea flag">🇰🇷</span>
 						</summary>
-						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-tonal drop-shadow-sm">
+						<div role="menu">
 							<button
 								type="button"
 								@click="localStorage.setItem('shlf-language', 'ko');"
 								hx-swap="none"
-								class="button border-none text-sm w-full"
+								class="header-dropdown-btn"
+								role="menuitem"
 							>
-								<span>🇰🇷 Korean</span>
+								🇰🇷 Korean
 							</button>
 						</div>
 					</details>
diff --git a/internal/ui/layouts/base/base.templ b/internal/ui/layouts/base/base.templ
index 0aca320..c2d98fa 100644
--- a/internal/ui/layouts/base/base.templ
+++ b/internal/ui/layouts/base/base.templ
@@ -14,8 +14,8 @@ templ Base(params BaseParams) {
 			<script src="/static/js/alpinejs.min.js" defer></script>
 			<link rel="stylesheet" href="/static/style.css" type="text/css"/>
 		</head>
-		<body class="min-h-screen">
-			<main class="flex-1 flex flex-col text-ink">
+		<body>
+			<main>
 				{ children... }
 			</main>
 		</body>
diff --git a/internal/ui/views/login/login.css b/internal/ui/views/login/login.css
index 76c6e13..4101346 100644
--- a/internal/ui/views/login/login.css
+++ b/internal/ui/views/login/login.css
@@ -57,22 +57,6 @@
     }
 }
 
-.spinner {
-    width: 1rem;
-    height: 1rem;
-    display: none;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    from { rotate: 0deg; }
-    to   { rotate: 360deg; }
-}
-
-.htmx-request .spinner {
-    display: inline;
-}
-
 .explainer-panel {
     background: var(--color-tonal);
     display: none;
@@ -134,7 +118,7 @@
         display: flex;
         gap: 0.75rem;
 
-        i {
+        svg {
             margin-top: 0.125rem;
             flex-shrink: 0;
             width: 1.25rem;
@@ -163,7 +147,7 @@
     &:hover {
         background: var(--color-hover);
 
-        i {
+        svg {
             color: var(--color-ink);
             translate: 0.125rem 0;
         }
@@ -175,7 +159,7 @@
         flex-shrink: 0;
     }
 
-    i {
+    svg {
         width: 1rem;
         height: 1rem;
         color: var(--color-dim);
@@ -228,7 +212,7 @@
         cursor: not-allowed;
     }
 
-    i {
+    svg {
         width: 1rem;
         height: 1rem;
     }
@@ -271,7 +255,7 @@
         color: var(--color-ink);
     }
 
-    i {
+    svg {
         width: 1.25rem;
         height: 1.25rem;
     }