diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 00d4484..f12e6ca 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,5 @@
 import { Link } from '@tanstack/react-router'
+import ThemeToggle from './ThemeToggle'
 
 export default function Header({ did }: { did: string | null }) {
 	return (
@@ -15,16 +16,19 @@ export default function Header({ did }: { did: string | null }) {
 						</Link>
 					</h2>
 				)}
-				{did && (
-					<form method="POST" action="/logout" className="ml-auto">
-						<button
-							type="submit"
-							className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)] transition-colors sm:px-4 sm:py-2"
-						>
-							Sign out
-						</button>
-					</form>
-				)}
+				<div className="ml-auto flex items-center gap-2">
+					<ThemeToggle />
+					{did && (
+						<form method="POST" action="/logout">
+							<button
+								type="submit"
+								className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)] transition-colors sm:px-4 sm:py-2"
+							>
+								Sign out
+							</button>
+						</form>
+					)}
+				</div>
 			</nav>
 		</header>
 	)
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index 0f7d3d0..219bbe7 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -21,7 +21,7 @@ function LoginPage() {
 						placeholder="you.bsky.social"
 					/>
 					<button
-						className="bg-[--lagoon] text-white rounded-lg px-4 py-2 w-full font-semibold hover:bg-[--lagoon-deep] transition-colors"
+						className="bg-[--lagoon] text-[#173a40] dark:text-white rounded-lg px-4 py-2 w-full font-semibold hover:bg-[--lagoon-deep] transition-colors"
 						type="submit"
 					>
 						Login with Atmosphere