diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index ec1b286..055de5e 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,4 +1,134 @@
+"use client"
+
 import { links } from "../siteConfig"
+import styled, { css } from "styled-components"
+
+const LogoImage = styled.img`
+	border-radius: 0.25rem;
+	width: 3rem;
+`
+
+const Anchor = styled.a<{
+	ghost?: boolean
+}>`
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	font-size: 0.875rem;
+	text-align: center;
+	border-radius: 0.5rem;
+	transition: background 200ms ease-in-out;
+
+	color: #a7adba;
+
+	height: 3rem;
+	padding: 0 1rem;
+	font-weight: 600;
+	line-height: 1em;
+
+	${(props) => {
+		const backgroundColor = props.ghost ? "transparent" : "#1a1e23"
+
+		return css`
+			background: ${backgroundColor};
+			border: 1px solid ${backgroundColor};
+		`
+	}}
+
+	&:hover {
+		${(props) => {
+			if (props.ghost)
+				return css`
+					background: color-mix(in srgb, white 5%, transparent 100%);
+					border: 1px solid transparent;
+				`
+			else
+				return css`
+					background: #15181d;
+					border: 1px solid #15181d;
+				`
+		}}
+	}
+`
+
+const Button = styled.a<{
+	ghost?: boolean
+}>`
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	font-size: 0.875rem;
+	text-align: center;
+	border-radius: 0.5rem;
+	transition: background 200ms ease-in-out;
+
+	color: #a7adba;
+
+	height: 3rem;
+	padding: 0 1rem;
+	font-weight: 600;
+	line-height: 1em;
+
+	${(props) => {
+		const backgroundColor = props.ghost ? "transparent" : "#1a1e23"
+
+		return css`
+			background: ${backgroundColor};
+			border: 1px solid ${backgroundColor};
+		`
+	}}
+
+	&:hover {
+		${(props) => {
+			if (props.ghost)
+				return css`
+					background: color-mix(in srgb, white 5%, transparent 100%);
+					border: 1px solid transparent;
+				`
+			else
+				return css`
+					background: #15181d;
+					border: 1px solid #15181d;
+				`
+		}}
+	}
+`
+
+const ImageAnchor = styled(Anchor)`
+	padding: 0;
+`
+
+const NavLink = styled.a`
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	font-size: 0.875rem;
+	text-align: center;
+	border-radius: 0.5rem;
+	transition: background 200ms ease-in-out;
+
+	color: #a7adba;
+
+	padding: 0.5rem 1rem;
+	line-height: 1.4em;
+
+	background: transparent;
+	border: 1px solid transparent;
+
+	&:hover {
+		background: color-mix(in srgb, white 5%, transparent 100%);
+		border: 1px solid transparent;
+	}
+`
+
+const DropdownButton = styled(Button)`
+	@media (min-width: 1024px) {
+		display: none;
+	}
+`
 
 const Header = () => {
 	return (
@@ -6,7 +136,7 @@ const Header = () => {
 			<nav className="navbar bg-base-100">
 				<div className="navbar-start">
 					<div className="dropdown">
-						<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+						<DropdownButton tabIndex={0} ghost>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								className="w-5 h-5"
@@ -21,7 +151,7 @@ const Header = () => {
 									d="M4 6h16M4 12h8m-8 6h16"
 								/>
 							</svg>
-						</div>
+						</DropdownButton>
 						<ul
 							tabIndex={0}
 							className="menu menu-lg dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
@@ -29,9 +159,9 @@ const Header = () => {
 							<NavLinks />
 						</ul>
 					</div>
-					<a className="inline p-0 btn btn-ghost" href="/">
-						<img src="/images/logo.jpeg" className="w-12 rounded" />
-					</a>
+					<ImageAnchor ghost href="/">
+						<LogoImage src="/images/logo.jpeg" />
+					</ImageAnchor>
 				</div>
 				<div className="hidden navbar-center lg:flex">
 					<ul className="px-1 menu menu-horizontal">
@@ -39,9 +169,7 @@ const Header = () => {
 					</ul>
 				</div>
 				<div className="navbar-end">
-					<a className="btn" href={links.discord}>
-						Join Us on Discord
-					</a>
+					<Anchor href={links.discord}>Join Us on Discord</Anchor>
 				</div>
 			</nav>
 		</header>
@@ -52,24 +180,20 @@ const NavLinks = () => {
 	return (
 		<>
 			<li>
-				<a href="/">Home</a>
+				<NavLink href="/">Home</NavLink>
 			</li>
 			<li>
-				<a href="/about">About</a>
+				<NavLink href="/about">About</NavLink>
 			</li>
 			<li>
-				<a target="_blank" href={links.lumaUrl}>
+				<NavLink target="_blank" href={links.lumaUrl}>
 					Event Calendar
-				</a>
+				</NavLink>
 			</li>
-			{/* Hide Events until the page design is ready and finalized */}
-			{/* <li>
-				<a href="/events">Events</a>
-			</li> */}
 			<li>
-				<a target="_blank" href={links.talkSubmissionUrl}>
+				<NavLink target="_blank" href={links.talkSubmissionUrl}>
 					Give a Talk!
-				</a>
+				</NavLink>
 			</li>
 		</>
 	)
diff --git a/package-lock.json b/package-lock.json
index a8b7e63..3a6c5ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
 				"next": "14.2.4",
 				"react": "^18",
 				"react-dom": "^18",
-				"sqlite3": "^5.1.7"
+				"sqlite3": "^5.1.7",
+				"styled-components": "6.1.13"
 			},
 			"devDependencies": {
 				"@types/node": "^20",
@@ -44,6 +45,27 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@emotion/is-prop-valid": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+			"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+			"license": "MIT",
+			"dependencies": {
+				"@emotion/memoize": "^0.8.1"
+			}
+		},
+		"node_modules/@emotion/memoize": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+			"license": "MIT"
+		},
+		"node_modules/@emotion/unitless": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+			"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+			"license": "MIT"
+		},
 		"node_modules/@eslint-community/eslint-utils": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -532,6 +554,12 @@
 				"@types/react": "*"
 			}
 		},
+		"node_modules/@types/stylis": {
+			"version": "4.2.5",
+			"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+			"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+			"license": "MIT"
+		},
 		"node_modules/@typescript-eslint/parser": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -1352,6 +1380,15 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/camelize": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+			"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/caniuse-lite": {
 			"version": "1.0.30001640",
 			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
@@ -1594,6 +1631,15 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/css-selector-tokenizer": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -1604,6 +1650,17 @@
 				"fastparse": "^1.1.2"
 			}
 		},
+		"node_modules/css-to-react-native": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+			"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+			"license": "MIT",
+			"dependencies": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^4.0.2"
+			}
+		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1619,8 +1676,7 @@
 		"node_modules/csstype": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-			"dev": true
+			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
 		},
 		"node_modules/culori": {
 			"version": "3.3.0",
@@ -5394,8 +5450,7 @@
 		"node_modules/postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-			"dev": true
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
 		"node_modules/prebuild-install": {
 			"version": "7.1.2",
@@ -5933,6 +5988,12 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/shallowequal": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+			"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+			"license": "MIT"
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6420,6 +6481,68 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/styled-components": {
+			"version": "6.1.13",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+			"integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+			"license": "MIT",
+			"dependencies": {
+				"@emotion/is-prop-valid": "1.2.2",
+				"@emotion/unitless": "0.8.1",
+				"@types/stylis": "4.2.5",
+				"css-to-react-native": "3.2.0",
+				"csstype": "3.1.3",
+				"postcss": "8.4.38",
+				"shallowequal": "1.1.0",
+				"stylis": "4.3.2",
+				"tslib": "2.6.2"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/styled-components"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8.0",
+				"react-dom": ">= 16.8.0"
+			}
+		},
+		"node_modules/styled-components/node_modules/postcss": {
+			"version": "8.4.38",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/styled-components/node_modules/tslib": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+			"license": "0BSD"
+		},
 		"node_modules/styled-jsx": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -6442,6 +6565,12 @@
 				}
 			}
 		},
+		"node_modules/stylis": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+			"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+			"license": "MIT"
+		},
 		"node_modules/sucrase": {
 			"version": "3.35.0",
 			"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
diff --git a/package.json b/package.json
index dcb97cd..4777aa2 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
 		"next": "14.2.4",
 		"react": "^18",
 		"react-dom": "^18",
-		"sqlite3": "^5.1.7"
+		"sqlite3": "^5.1.7",
+		"styled-components": "6.1.13"
 	},
 	"devDependencies": {
 		"@types/node": "^20",