diff --git a/app/admin/talks/page.tsx b/app/admin/talks/page.tsx
index 4307095..4559ea4 100644
--- a/app/admin/talks/page.tsx
+++ b/app/admin/talks/page.tsx
@@ -403,7 +403,7 @@ export default function AdminTalks() {
 // Styled Components //
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -434,12 +434,12 @@ const PageHeader = styled.div`
 const Title = styled.h1`
 	font-size: 2rem;
 	font-weight: 700;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
 const Subtitle = styled.p`
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	margin: 0.5rem 0 0 0;
 `
 
@@ -450,7 +450,7 @@ const FilterBar = styled.div`
 `
 
 const FilterLabel = styled.span`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 0.875rem;
 	font-weight: 600;
 `
@@ -470,10 +470,11 @@ const FilterButton = styled.button<{ $active: boolean; $color?: string }>`
 	transition: all 0.2s ease;
 	text-transform: capitalize;
 	border: 1px solid
-		${(props) => (props.$active ? props.$color || "white" : "rgba(255, 255, 255, 0.2)")};
+		${(props) => (props.$active ? props.$color || "white" : "rgba(var(--foreground-rgb), 0.2)")};
 	background-color: ${(props) =>
 		props.$active ? (props.$color || "white") + "22" : "transparent"};
-	color: ${(props) => (props.$active ? props.$color || "white" : "rgba(255, 255, 255, 0.6)")};
+	color: ${(props) =>
+		props.$active ? props.$color || "white" : "rgba(var(--foreground-rgb), 0.6)"};
 
 	&:hover {
 		border-color: ${(props) => props.$color || "white"};
@@ -488,10 +489,10 @@ const TalkList = styled.div`
 `
 
 const TalkCard = styled.div`
-	background-color: rgba(21, 21, 28, 0.75);
+	background-color: var(--surface);
 	-webkit-backdrop-filter: blur(20px);
 	backdrop-filter: blur(20px);
-	border: 1px solid rgba(255, 255, 255, 0.1);
+	border: 1px solid var(--border);
 	border-radius: 0.75rem;
 	padding: 1.5rem;
 	display: flex;
@@ -509,7 +510,7 @@ const CardHeader = styled.div`
 const TalkTitle = styled.h2`
 	font-size: 1.125rem;
 	font-weight: 600;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 	flex: 1;
 `
@@ -612,7 +613,7 @@ const StatusPillSelect = styled.select<{ $color: string; $widthCh: number }>`
 
 	option {
 		background-color: #1a1a2e;
-		color: white;
+		color: var(--foreground);
 	}
 `
 
@@ -632,7 +633,7 @@ const MetaRow = styled.div`
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 	gap: 0.75rem;
-	background-color: rgba(255, 255, 255, 0.03);
+	background-color: rgba(var(--foreground-rgb), 0.03);
 	border-radius: 0.75rem;
 	padding: 0.75rem;
 
@@ -654,14 +655,14 @@ const MetaItem = styled.div`
 const MetaLabel = styled.span`
 	font-size: 0.6875rem;
 	font-weight: 600;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 `
 
 const MetaValue = styled.span`
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
@@ -678,7 +679,7 @@ const HandleLink = styled.a`
 `
 
 const Synopsis = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 0.875rem;
 	line-height: 1.6;
 	margin: 0;
@@ -687,7 +688,7 @@ const Synopsis = styled.p`
 
 const SlidesInfo = styled.div`
 	font-size: 0.8125rem;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 `
 
 const SlidesLink = styled.a`
@@ -732,13 +733,13 @@ const ErrorMessage = styled.div`
 
 const EmptyState = styled.div`
 	text-align: center;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	padding: 3rem;
 	font-size: 1rem;
 `
 
 const LoadingText = styled.div`
-	color: white;
+	color: var(--foreground);
 	font-size: 1.25rem;
 	text-align: center;
 	margin-top: 4rem;
diff --git a/app/admin/thumbnails/page.tsx b/app/admin/thumbnails/page.tsx
index 2e05d9d..00e9aa2 100644
--- a/app/admin/thumbnails/page.tsx
+++ b/app/admin/thumbnails/page.tsx
@@ -358,7 +358,7 @@ function AdminTalkThumbnailGen() {
 //
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -382,13 +382,13 @@ const Container = styled.main`
 const Title = styled.h1`
 	font-size: 2rem;
 	font-weight: 700;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 	text-align: center;
 `
 
 const Subtitle = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	margin: -1rem 0 0 0;
 	text-align: center;
 `
@@ -441,15 +441,15 @@ const Field = styled.div`
 const Label = styled.label`
 	font-size: 0.875rem;
 	font-weight: 700;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 `
 
 const FileInput = styled.input`
 	padding: 0.5rem;
-	background-color: rgba(255, 255, 255, 0.1);
-	border: 1px solid rgba(255, 255, 255, 0.2);
+	background-color: rgba(var(--foreground-rgb), 0.1);
+	border: 1px solid rgba(var(--foreground-rgb), 0.2);
 	border-radius: 0.5rem;
-	color: white;
+	color: var(--foreground);
 	font-size: 0.875rem;
 	cursor: pointer;
 
@@ -459,7 +459,7 @@ const FileInput = styled.input`
 		background-color: rgba(156, 163, 255, 0.2);
 		border: 1px solid rgba(156, 163, 255, 0.4);
 		border-radius: 0.375rem;
-		color: white;
+		color: var(--foreground);
 		cursor: pointer;
 		font-size: 0.8125rem;
 		transition: all 0.2s ease;
@@ -481,7 +481,7 @@ const HandleRow = styled.div`
 `
 
 const HandlePrefix = styled.span`
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	font-size: 1rem;
 	font-weight: 600;
 	flex-shrink: 0;
@@ -501,7 +501,7 @@ const PhotoStatus = styled.p`
 
 const OrDivider = styled.div`
 	text-align: center;
-	color: rgba(255, 255, 255, 0.4);
+	color: rgba(var(--foreground-rgb), 0.4);
 	font-size: 0.75rem;
 	text-transform: uppercase;
 	letter-spacing: 0.1em;
@@ -522,12 +522,12 @@ const DownloadRow = styled.div`
 const SpecNote = styled.p`
 	margin: -1rem 0 0 0;
 	text-align: center;
-	color: rgba(255, 255, 255, 0.4);
+	color: rgba(var(--foreground-rgb), 0.4);
 	font-size: 0.75rem;
 `
 
 const LoadingText = styled.div`
-	color: white;
+	color: var(--foreground);
 	font-size: 1.25rem;
 	text-align: center;
 	margin-top: 4rem;
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 970b355..2ec0f82 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -74,27 +74,30 @@ const StyledButton = styled.button<{
 	$variant: "primary" | "secondary" | "tertiary"
 	$size: "small" | "default"
 }>`
-	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
-	border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
-	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
+	padding: ${(props) => (props.$size === "small" ? "0.5rem 1.1rem" : "0.85rem 1.75rem")};
+	border-radius: 999px;
+	font-weight: ${(props) => (props.$size === "small" ? "600" : "700")};
+	font-size: ${(props) => (props.$size === "small" ? "0.9rem" : "1.05rem")};
 	cursor: pointer;
-	transition: all 0.3s ease;
+	transition: all 0.2s ease;
 	text-decoration: none;
 	display: inline-flex;
 	align-items: center;
+	justify-content: center;
 	gap: 0.5rem;
 	border: none;
 	font-family: inherit;
 	line-height: 1.5;
+	white-space: nowrap;
 	background-color: ${(props) =>
 		props.$variant === "primary"
-			? "white"
+			? "var(--foreground)"
 			: props.$variant === "tertiary"
 				? "transparent"
 				: "transparent"};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
-	border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
+	color: ${(props) => (props.$variant === "primary" ? "var(--background)" : "var(--foreground)")};
+	border: ${(props) =>
+		props.$variant === "secondary" ? "1.5px solid var(--foreground)" : "1.5px solid transparent"};
 	position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
 	overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
 
@@ -111,7 +114,7 @@ const StyledButton = styled.button<{
 			background: linear-gradient(
 				90deg,
 				transparent,
-				rgba(255, 255, 255, 0.1),
+				rgba(var(--foreground-rgb), 0.1),
 				transparent
 			);
 			transition: left 0.5s ease;
@@ -120,11 +123,11 @@ const StyledButton = styled.button<{
 
 	&:hover:not(:disabled) {
 		background-color: ${(props) => {
-			if (props.$variant === "primary") return "#ddd"
-			if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
-			return "rgba(255, 255, 255, 0.1)"
+			if (props.$variant === "primary") return "rgba(var(--foreground-rgb), 0.82)"
+			if (props.$variant === "tertiary") return "rgba(var(--foreground-rgb), 0.05)"
+			return "rgba(var(--foreground-rgb), 0.1)"
 		}};
-		border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
+		border-radius: 999px;
 
 		${(props) =>
 			props.$variant === "tertiary" &&
@@ -145,27 +148,30 @@ const StyledLink = styled(Link)<{
 	$variant: "primary" | "secondary" | "tertiary"
 	$size: "small" | "default"
 }>`
-	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
-	border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
-	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
+	padding: ${(props) => (props.$size === "small" ? "0.5rem 1.1rem" : "0.85rem 1.75rem")};
+	border-radius: 999px;
+	font-weight: ${(props) => (props.$size === "small" ? "600" : "700")};
+	font-size: ${(props) => (props.$size === "small" ? "0.9rem" : "1.05rem")};
 	cursor: pointer;
-	transition: all 0.3s ease;
+	transition: all 0.2s ease;
 	text-decoration: none;
 	display: inline-flex;
 	align-items: center;
+	justify-content: center;
 	gap: 0.5rem;
 	border: none;
 	font-family: inherit;
 	line-height: 1.5;
+	white-space: nowrap;
 	background-color: ${(props) =>
 		props.$variant === "primary"
-			? "white"
+			? "var(--foreground)"
 			: props.$variant === "tertiary"
 				? "transparent"
 				: "transparent"};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
-	border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
+	color: ${(props) => (props.$variant === "primary" ? "var(--background)" : "var(--foreground)")};
+	border: ${(props) =>
+		props.$variant === "secondary" ? "1.5px solid var(--foreground)" : "1.5px solid transparent"};
 	position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
 	overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
 
@@ -182,7 +188,7 @@ const StyledLink = styled(Link)<{
 			background: linear-gradient(
 				90deg,
 				transparent,
-				rgba(255, 255, 255, 0.1),
+				rgba(var(--foreground-rgb), 0.1),
 				transparent
 			);
 			transition: left 0.5s ease;
@@ -191,11 +197,11 @@ const StyledLink = styled(Link)<{
 
 	&:hover {
 		background-color: ${(props) => {
-			if (props.$variant === "primary") return "#ddd"
-			if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
-			return "rgba(255, 255, 255, 0.1)"
+			if (props.$variant === "primary") return "rgba(var(--foreground-rgb), 0.82)"
+			if (props.$variant === "tertiary") return "rgba(var(--foreground-rgb), 0.05)"
+			return "rgba(var(--foreground-rgb), 0.1)"
 		}};
-		border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
+		border-radius: 999px;
 
 		${(props) =>
 			props.$variant === "tertiary" &&
@@ -211,27 +217,30 @@ const StyledExternalLink = styled.a<{
 	$variant: "primary" | "secondary" | "tertiary"
 	$size: "small" | "default"
 }>`
-	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
-	border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
-	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
+	padding: ${(props) => (props.$size === "small" ? "0.5rem 1.1rem" : "0.85rem 1.75rem")};
+	border-radius: 999px;
+	font-weight: ${(props) => (props.$size === "small" ? "600" : "700")};
+	font-size: ${(props) => (props.$size === "small" ? "0.9rem" : "1.05rem")};
 	cursor: pointer;
-	transition: all 0.3s ease;
+	transition: all 0.2s ease;
 	text-decoration: none;
 	display: inline-flex;
 	align-items: center;
+	justify-content: center;
 	gap: 0.5rem;
 	border: none;
 	font-family: inherit;
 	line-height: 1.5;
+	white-space: nowrap;
 	background-color: ${(props) =>
 		props.$variant === "primary"
-			? "white"
+			? "var(--foreground)"
 			: props.$variant === "tertiary"
 				? "transparent"
 				: "transparent"};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
-	border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
+	color: ${(props) => (props.$variant === "primary" ? "var(--background)" : "var(--foreground)")};
+	border: ${(props) =>
+		props.$variant === "secondary" ? "1.5px solid var(--foreground)" : "1.5px solid transparent"};
 	position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
 	overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
 
@@ -248,7 +257,7 @@ const StyledExternalLink = styled.a<{
 			background: linear-gradient(
 				90deg,
 				transparent,
-				rgba(255, 255, 255, 0.1),
+				rgba(var(--foreground-rgb), 0.1),
 				transparent
 			);
 			transition: left 0.5s ease;
@@ -257,11 +266,11 @@ const StyledExternalLink = styled.a<{
 
 	&:hover {
 		background-color: ${(props) => {
-			if (props.$variant === "primary") return "#ddd"
-			if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
-			return "rgba(255, 255, 255, 0.1)"
+			if (props.$variant === "primary") return "rgba(var(--foreground-rgb), 0.82)"
+			if (props.$variant === "tertiary") return "rgba(var(--foreground-rgb), 0.05)"
+			return "rgba(var(--foreground-rgb), 0.1)"
 		}};
-		border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
+		border-radius: 999px;
 
 		${(props) =>
 			props.$variant === "tertiary" &&
diff --git a/app/components/Card.tsx b/app/components/Card.tsx
index 7b09795..2968a46 100644
--- a/app/components/Card.tsx
+++ b/app/components/Card.tsx
@@ -78,13 +78,13 @@ export const CardContent = styled.div<{ $padding?: string }>`
 export const CardTitle = styled.h3<{ $size?: string }>`
 	font-size: ${(props) => props.$size || "1.25rem"};
 	font-weight: bold;
-	color: white;
+	color: var(--foreground);
 	margin-bottom: 0.5rem;
 `
 
 export const CardText = styled.p<{ $color?: string; $size?: string; $weight?: string }>`
 	font-size: ${(props) => props.$size || "0.875rem"};
-	color: ${(props) => props.$color || "#9ca3af"};
+	color: ${(props) => props.$color || "var(--subtle-foreground)"};
 	margin-bottom: 0.5rem;
 	font-weight: ${(props) => props.$weight || "normal"};
 `
@@ -94,9 +94,9 @@ export const CardText = styled.p<{ $color?: string; $size?: string; $weight?: st
 const StyledLink = styled(Link)`
 	display: flex;
 	flex-direction: column;
-	background-color: rgba(21, 21, 28, 0.75);
-	backdrop-filter: blur(10px);
-	border-radius: 0.5rem;
+	background-color: var(--surface-solid);
+	border: 1px solid var(--border);
+	border-radius: 0.75rem;
 	overflow: hidden;
 	transition: transform 0.2s ease;
 	text-decoration: none;
@@ -111,9 +111,9 @@ const StyledLink = styled(Link)`
 const StyledExternalLink = styled.a`
 	display: flex;
 	flex-direction: column;
-	background-color: rgba(21, 21, 28, 0.75);
-	backdrop-filter: blur(10px);
-	border-radius: 0.5rem;
+	background-color: var(--surface-solid);
+	border: 1px solid var(--border);
+	border-radius: 0.75rem;
 	overflow: hidden;
 	transition: transform 0.2s ease;
 	text-decoration: none;
@@ -128,9 +128,9 @@ const StyledExternalLink = styled.a`
 const StyledDiv = styled.div`
 	display: flex;
 	flex-direction: column;
-	background-color: rgba(21, 21, 28, 0.75);
-	backdrop-filter: blur(10px);
-	border-radius: 0.5rem;
+	background-color: var(--surface-solid);
+	border: 1px solid var(--border);
+	border-radius: 0.75rem;
 	overflow: hidden;
 	transition: transform 0.2s ease;
 
@@ -146,9 +146,8 @@ const ImageContainer = styled.div<{ $aspectRatio?: "16/9" | "1/1" | "auto" }>`
 	overflow: hidden;
 	${(props) => props.$aspectRatio === "16/9" && "aspect-ratio: 16/9;"}
 	${(props) => props.$aspectRatio === "1/1" && "aspect-ratio: 1/1;"}
-	background-color: ${(props) =>
-		props.$aspectRatio !== "auto" ? "rgba(0, 0, 0, 0.8)" : "transparent"};
-	border-radius: ${(props) => (props.$aspectRatio !== "auto" ? "0.5rem" : "0")};
+	background-color: ${(props) => (props.$aspectRatio !== "auto" ? "var(--border)" : "transparent")};
+	border-radius: 0;
 `
 
 const CardImage = styled.img<{ $aspectRatio?: "16/9" | "1/1" | "auto" }>`
@@ -169,8 +168,8 @@ const PlayButton = styled.div`
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	background-color: rgba(255, 255, 255, 0.5);
-	color: black;
+	background-color: rgba(var(--foreground-rgb), 0.5);
+	color: var(--background);
 	border-radius: 50%;
 	width: 60px;
 	height: 60px;
@@ -185,7 +184,7 @@ const PlayButton = styled.div`
 	${StyledLink}:hover &,
 	${StyledDiv}:hover &,
 	${StyledExternalLink}:hover & {
-		background-color: rgba(255, 255, 255, 0.8);
+		background-color: rgba(var(--foreground-rgb), 0.8);
 		transform: translate(-50%, -50%) scale(1.1);
 	}
 `
diff --git a/app/components/CheckboxInput.tsx b/app/components/CheckboxInput.tsx
index e374157..2e520b3 100644
--- a/app/components/CheckboxInput.tsx
+++ b/app/components/CheckboxInput.tsx
@@ -34,7 +34,7 @@ const StyledCheckbox = styled.input.attrs({ type: "checkbox" })<{
 	height: ${(props) => (props.$size === "small" ? "1rem" : "1.25rem")};
 	border: 2px solid
 		${(props) =>
-			props.$variant === "secondary" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"};
+			props.$variant === "secondary" ? "rgba(var(--foreground-rgb), 0.3)" : "rgba(0, 0, 0, 0.3)"};
 	border-radius: 0.25rem;
 	background-color: transparent;
 	cursor: pointer;
@@ -45,7 +45,7 @@ const StyledCheckbox = styled.input.attrs({ type: "checkbox" })<{
 
 	&:hover {
 		border-color: ${(props) =>
-			props.$variant === "secondary" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"};
+			props.$variant === "secondary" ? "rgba(var(--foreground-rgb), 0.5)" : "rgba(0, 0, 0, 0.5)"};
 	}
 
 	&:checked {
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
index 39f50d9..89e1102 100644
--- a/app/components/ErrorBoundary.tsx
+++ b/app/components/ErrorBoundary.tsx
@@ -33,7 +33,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 			// Render fallback UI, default to black background for WebGL crashes
 			return (
 				this.props.fallback || (
-					<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />
+					<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
 				)
 			)
 		}
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index d4da903..d2f31ac 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -90,7 +90,7 @@ const FooterContainer = styled.footer`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	background-color: rgba(0, 0, 0, 0.1);
+	background-color: var(--footer-background);
 	backdrop-filter: blur(64px);
 	margin-top: auto;
 `
@@ -101,7 +101,7 @@ const FooterContent = styled.div`
 	align-items: center;
 	justify-content: space-between;
 	padding: 1.5rem 1rem;
-	color: #a3a3a3;
+	color: var(--subtle-foreground);
 	max-width: 1200px;
 	width: 100%;
 	gap: 1rem;
diff --git a/app/components/GiveATalkCTA.tsx b/app/components/GiveATalkCTA.tsx
index 012fa15..287b7dc 100644
--- a/app/components/GiveATalkCTA.tsx
+++ b/app/components/GiveATalkCTA.tsx
@@ -1,13 +1,14 @@
 "use client"
-import styled from "styled-components"
-import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useState, useEffect } from "react"
+import { useEffect, useState } from "react"
 import { supabaseClient } from "../../lib/supabaseClient"
+import { Button } from "./Button"
 
-// Components //
+//
+// Components
+//
 
-export const GiveATalkCTA: React.FC = () => {
+export const GiveATalkCTA = () => {
 	const router = useRouter()
 	const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
 
@@ -18,217 +19,21 @@ export const GiveATalkCTA: React.FC = () => {
 			} = await supabaseClient.auth.getUser()
 			setIsAuthenticated(!!user)
 		}
+
 		checkAuth()
 	}, [])
 
-	const handleClick = (e: React.MouseEvent) => {
+	const handleClick = (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
 		if (isAuthenticated === false) {
-			e.preventDefault()
+			event?.preventDefault()
 			const redirectUrl = encodeURIComponent("/submit-talk")
 			router.push(`/login?redirect=${redirectUrl}`)
 		}
 	}
 
 	return (
-		<StyledLink href="/submit-talk" onClick={handleClick}>
-			<IconWrapper>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					strokeWidth={2}
-					stroke="currentColor"
-				>
-					<path
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
-					/>
-				</svg>
-			</IconWrapper>
-			<span>Give a Talk!</span>
-		</StyledLink>
+		<Button href="/submit-talk" onClick={handleClick} variant="secondary">
+			Give a Talk
+		</Button>
 	)
 }
-
-const StyledLink = styled(Link)`
-	display: inline-flex;
-	align-items: center;
-	padding: 0.5rem 1rem;
-	gap: 0.5rem;
-	font-weight: 500;
-	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.95);
-	text-decoration: none;
-	transition: all 0.3s ease-in-out;
-	border-radius: 15px 0 20px 0px;
-	box-shadow:
-		0 0 20px rgba(156, 163, 255, 0.15),
-		0 0 40px rgba(92, 107, 246, 0.1),
-		0 0 60px rgba(28, 28, 40, 0.4),
-		0 1px 3px rgba(0, 0, 0, 0.9),
-		0 10px 20px -5px rgba(28, 28, 40, 0.5),
-		inset 0 1px 0 rgba(156, 163, 255, 0.1);
-	background: linear-gradient(
-		135deg,
-		rgba(28, 28, 40, 0.9) 0%,
-		rgba(15, 15, 22, 0.95) 25%,
-		rgba(0, 0, 1, 1) 50%,
-		rgba(15, 15, 22, 0.95) 75%,
-		rgba(28, 28, 40, 0.9) 100%
-	);
-	border: 1px solid rgba(156, 163, 255, 0.5);
-	position: relative;
-	overflow: hidden;
-	white-space: nowrap;
-	transform: perspective(1000px) rotateX(5deg) skew(-10deg) scaleY(.9);
-	animation: pulseGlow 3s ease-in-out infinite;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: -200%;
-		left: -100%;
-		width: 300%;
-		height: 400%;
-		background: linear-gradient(
-			115deg,
-			transparent 40%,
-			rgba(156, 163, 255, 0.15) 48%,
-			rgba(255, 255, 255, 0.25) 50%,
-			rgba(156, 163, 255, 0.15) 52%,
-			transparent 60%
-		);
-		animation: shimmer 2.5s linear infinite;
-	}
-
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 1px;
-		background: linear-gradient(
-			90deg,
-			transparent 0%,
-			rgba(255, 255, 255, 0.4) 50%,
-			transparent 100%
-		);
-		pointer-events: none;
-	}
-
-	&:hover {
-		transform: perspective(1000px) rotateX(5deg) translateY(-1px) skew(-10deg) scaleY(.9);
-		box-shadow:
-			0 0 30px rgba(156, 163, 255, 0.25),
-			0 0 50px rgba(92, 107, 246, 0.15),
-			0 0 80px rgba(28, 28, 40, 0.5),
-			0 2px 4px rgba(0, 0, 0, 1),
-			0 15px 30px -5px rgba(28, 28, 40, 0.7),
-			inset 0 1px 0 rgba(156, 163, 255, 0.15);
-		text-decoration: none;
-	}
-
-	@keyframes shimmer {
-		0% {
-			transform: translateX(-100%) translateY(-100%) rotate(45deg);
-		}
-		100% {
-			transform: translateX(100%) translateY(100%) rotate(45deg);
-		}
-	}
-
-	@keyframes pulseGlow {
-		0%, 100% {
-			box-shadow:
-				0 0 20px rgba(156, 163, 255, 0.15),
-				0 0 40px rgba(92, 107, 246, 0.1),
-				0 0 60px rgba(28, 28, 40, 0.4),
-				0 1px 3px rgba(0, 0, 0, 0.9),
-				0 10px 20px -5px rgba(28, 28, 40, 0.5),
-				inset 0 1px 0 rgba(156, 163, 255, 0.1);
-		}
-		50% {
-			box-shadow:
-				0 0 35px rgba(156, 163, 255, 0.25),
-				0 0 70px rgba(92, 107, 246, 0.18),
-				0 0 100px rgba(28, 28, 40, 0.5),
-				0 1px 3px rgba(0, 0, 0, 0.9),
-				0 10px 20px -5px rgba(28, 28, 40, 0.5),
-				inset 0 1px 0 rgba(156, 163, 255, 0.15);
-		}
-	}
-
-		&:hover {
-			transform: scale(1.02) skew(-10deg) scaleY(.9);
-			box-shadow:
-				0 4px 12px rgba(0, 0, 0, 1),
-				0 0 20px rgba(92, 107, 246, 0.1),
-				inset 0 1px 0 rgba(255, 255, 255, 0.2);
-			text-decoration: none;
-		}
-
-		@keyframes shimmer {
-			0% {
-				transform: translateX(-100%) translateY(-100%) rotate(45deg);
-			}
-			100% {
-				transform: translateX(100%) translateY(100%) rotate(45deg);
-			}
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			height: 50%;
-			background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
-			pointer-events: none;
-		}
-
-		&:hover {
-			transform: scale(1.03) skew(-10deg) scaleY(.9);
-			box-shadow:
-				0 6px 16px rgba(0, 0, 0, 0.8),
-				0 0 20px rgba(92, 107, 246, 0.15),
-				inset 0 1px 0 rgba(255, 255, 255, 0.25),
-				inset 0 -1px 0 rgba(0, 0, 0, 0.9);
-			text-decoration: none;
-		}
-
-		@keyframes shimmer {
-			0% {
-				transform: translateX(-100%) translateY(-100%) rotate(45deg);
-			}
-			100% {
-				transform: translateX(100%) translateY(100%) rotate(45deg);
-			}
-		}
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.8;
-		}
-	}
-`
-
-const IconWrapper = styled.div`
-	width: 1.25rem;
-	height: 1.25rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-`
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 067a76b..4c49e3d 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
+import Link from "next/link"
 import styled from "styled-components"
 import { links } from "../siteConfig"
 import { GiveATalkCTA } from "./GiveATalkCTA"
@@ -129,7 +130,7 @@ export const Header = () => {
 			<Container>
 				<Nav>
 					<NavStart>
-						<MenuButton onClick={toggleMenu}>
+						<MenuButton onClick={toggleMenu} aria-label="Open menu">
 							<MenuIcon
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
@@ -144,6 +145,9 @@ export const Header = () => {
 								/>
 							</MenuIcon>
 						</MenuButton>
+						<Logo href="/">
+							DEV<LogoAccent>x</LogoAccent>
+						</Logo>
 					</NavStart>
 					<NavCenter>
 						<MenuList>
@@ -304,9 +308,9 @@ const Container = styled.header`
 	width: 100%;
 	position: sticky;
 	top: 0;
-	background-color: rgba(0, 0, 0, 0.05);
-	backdrop-filter: blur(38px);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	background-color: var(--header-background);
+	backdrop-filter: blur(16px);
+	border-bottom: 1px solid var(--border);
 	z-index: 100;
 
 	body.full & {
@@ -318,17 +322,28 @@ const Nav = styled.nav`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 1rem;
+	padding: 1rem 1.5rem;
 	max-width: 1200px;
 	margin: 0 auto;
 `
 
 const NavStart = styled.div`
 	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+`
 
-	@media (min-width: 768px) {
-		display: none;
-	}
+const Logo = styled(Link)`
+	font-size: 1.35rem;
+	font-weight: 900;
+	letter-spacing: -0.02em;
+	color: var(--foreground);
+	text-decoration: none;
+`
+
+const LogoAccent = styled.span`
+	color: var(--accent);
 `
 
 const MenuButton = styled.button`
@@ -339,11 +354,16 @@ const MenuButton = styled.button`
 	border: none;
 	cursor: pointer;
 	padding: 0.5rem;
-	color: white;
+	margin-left: -0.5rem;
+	color: var(--foreground);
 
 	&:hover {
 		opacity: 0.8;
 	}
+
+	@media (min-width: 768px) {
+		display: none;
+	}
 `
 
 const NavCenter = styled.div`
@@ -395,7 +415,7 @@ const ProfileImage = styled.img`
 	height: 100%;
 	object-fit: cover;
 	border-radius: 50%;
-	border: 2px solid rgba(255, 255, 255, 0.2);
+	border: 2px solid rgba(var(--foreground-rgb), 0.2);
 `
 
 const ProfilePlaceholder = styled.div`
@@ -404,10 +424,10 @@ const ProfilePlaceholder = styled.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: rgba(255, 255, 255, 0.1);
+	background-color: rgba(var(--foreground-rgb), 0.1);
 	border-radius: 50%;
-	border: 2px solid rgba(255, 255, 255, 0.2);
-	color: white;
+	border: 2px solid rgba(var(--foreground-rgb), 0.2);
+	color: var(--foreground);
 	font-size: 1rem;
 	font-weight: 600;
 `
@@ -425,21 +445,21 @@ const AccountMenuItem = styled.li`
 const AccountMenuLink = styled.a`
 	display: block;
 	padding: 0.75rem 1rem;
-	color: white;
+	color: var(--foreground);
 	text-decoration: none;
 	font-size: 1.1rem;
 	border-radius: 0.375rem;
 	transition: background-color 0.2s ease;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.1);
+		background-color: rgba(var(--foreground-rgb), 0.1);
 	}
 `
 
 const AccountMenuButton = styled.button`
 	display: block;
 	padding: 0.75rem 1rem;
-	color: white;
+	color: var(--foreground);
 	text-decoration: none;
 	font-size: 1.1rem;
 	border-radius: 0.375rem;
@@ -451,13 +471,13 @@ const AccountMenuButton = styled.button`
 	cursor: pointer;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.1);
+		background-color: rgba(var(--foreground-rgb), 0.1);
 	}
 `
 
 const AccountMenuDivider = styled.hr`
 	border: none;
-	border-top: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: 1px solid var(--border);
 	margin: 0.5rem 0;
 `
 
@@ -478,9 +498,9 @@ const LeftSidebar = styled.div<{ $isOpen: boolean }>`
 	left: 0;
 	width: 280px;
 	height: 100%;
-	background-color: rgba(0, 0, 0, 0.05);
+	background-color: var(--sidebar-background);
 	backdrop-filter: blur(38px);
-	border-right: 1px solid rgba(255, 255, 255, 0.1);
+	border-right: 1px solid var(--border);
 	z-index: 201;
 	transform: translateX(${(props) => (props.$isOpen ? "0" : "-100%")});
 	transition: transform 0.3s ease-in-out;
@@ -497,9 +517,9 @@ const RightSidebar = styled.div<{ $isOpen: boolean }>`
 	right: 0;
 	width: 280px;
 	height: 100%;
-	background-color: rgba(0, 0, 0, 0.05);
+	background-color: var(--sidebar-background);
 	backdrop-filter: blur(38px);
-	border-left: 1px solid rgba(255, 255, 255, 0.1);
+	border-left: 1px solid var(--border);
 	z-index: 201;
 	transform: translateX(${(props) => (props.$isOpen ? "0" : "100%")});
 	transition: transform 0.3s ease-in-out;
@@ -530,13 +550,13 @@ const SidebarProfileImage = styled.img`
 	height: 2.5rem;
 	object-fit: cover;
 	border-radius: 50%;
-	border: 2px solid rgba(255, 255, 255, 0.2);
+	border: 2px solid rgba(var(--foreground-rgb), 0.2);
 	display: block;
 	flex-shrink: 0;
 `
 
 const ProfileHandle = styled.span`
-	color: white;
+	color: var(--foreground);
 	font-size: 1rem;
 	font-weight: 500;
 `
@@ -549,7 +569,7 @@ const CloseButton = styled.button`
 	border: none;
 	cursor: pointer;
 	padding: 0.5rem;
-	color: white;
+	color: var(--foreground);
 
 	&:hover {
 		opacity: 0.8;
@@ -591,14 +611,15 @@ const MenuItem = styled.li`
 const MenuLink = styled.a`
 	display: block;
 	padding: 0.75rem 1rem;
-	color: white;
+	color: var(--foreground);
 	text-decoration: none;
 	font-size: 1.1rem;
+	font-weight: 500;
 	border-radius: 0.375rem;
 	transition: background-color 0.2s ease;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.1);
+		background-color: rgba(var(--foreground-rgb), 0.1);
 	}
 
 	@media (min-width: 768px) {
diff --git a/app/components/HelpInfoButton.tsx b/app/components/HelpInfoButton.tsx
index 22d6b7a..7678026 100644
--- a/app/components/HelpInfoButton.tsx
+++ b/app/components/HelpInfoButton.tsx
@@ -50,12 +50,12 @@ const HelpIconWrapper = styled.div`
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	transition: color 0.2s ease;
 	flex-shrink: 0;
 
 	&:hover {
-		color: rgba(255, 255, 255, 0.9);
+		color: rgba(var(--foreground-rgb), 0.9);
 	}
 `
 
@@ -64,7 +64,7 @@ const Tooltip = styled.div<{ $minWidth?: string; $maxWidth?: string }>`
 	bottom: calc(100% + 8px);
 	right: 0;
 	background: rgba(0, 0, 0, 0.95);
-	color: rgba(255, 255, 255, 0.95);
+	color: rgba(var(--foreground-rgb), 0.95);
 	padding: 0.75rem 1rem;
 	border-radius: 8px;
 	font-size: 0.875rem;
@@ -76,7 +76,7 @@ const Tooltip = styled.div<{ $minWidth?: string; $maxWidth?: string }>`
 	z-index: 1000;
 	box-shadow:
 		0 4px 12px rgba(0, 0, 0, 0.4),
-		0 0 0 1px rgba(255, 255, 255, 0.1);
+		0 0 0 1px rgba(var(--foreground-rgb), 0.1);
 	pointer-events: auto;
 
 	&::after {
diff --git a/app/components/LinkCloudSection.tsx b/app/components/LinkCloudSection.tsx
index f47e7df..d6ab046 100644
--- a/app/components/LinkCloudSection.tsx
+++ b/app/components/LinkCloudSection.tsx
@@ -88,12 +88,12 @@ const SectionHeader = styled.div`
 const SectionTitle = styled.h3`
 	font-size: 1.25rem;
 	font-weight: 600;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
 const SavingIndicator = styled.span`
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	font-style: italic;
 `
diff --git a/app/components/LinkInput.tsx b/app/components/LinkInput.tsx
index 505542d..3aeacd0 100644
--- a/app/components/LinkInput.tsx
+++ b/app/components/LinkInput.tsx
@@ -265,18 +265,18 @@ const LinkPill = styled.div<{ $isDragging?: boolean; $dragOver?: boolean }>`
 	align-items: center;
 	gap: 0.375rem;
 	padding: 0.375rem 0.75rem;
-	background-color: rgba(255, 255, 255, 0.2);
-	border: 1px solid rgba(255, 255, 255, 0.3);
+	background-color: rgba(var(--foreground-rgb), 0.2);
+	border: 1px solid rgba(var(--foreground-rgb), 0.3);
 	border-radius: 9999px;
 	font-size: 0.875rem;
-	color: white;
+	color: var(--foreground);
 	font-weight: 500;
 	transition: all 0.2s ease;
 	cursor: ${(props) => (props.draggable ? "grab" : "pointer")};
 	opacity: ${(props) => (props.$isDragging ? 0.5 : 1)};
 	transform: ${(props) => (props.$isDragging ? "scale(0.95)" : "scale(1)")};
 	border-color: ${(props) =>
-		props.$dragOver ? "rgba(255, 255, 255, 0.6)" : "rgba(255, 255, 255, 0.3)"};
+		props.$dragOver ? "rgba(var(--foreground-rgb), 0.6)" : "rgba(var(--foreground-rgb), 0.3)"};
 
 	&:hover {
 		background-color: rgba(255, 255, 255, 0.25);
@@ -290,7 +290,7 @@ const LinkPill = styled.div<{ $isDragging?: boolean; $dragOver?: boolean }>`
 const RemoveButton = styled.button`
 	background: none;
 	border: none;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	cursor: pointer;
 	font-size: 1.2rem;
 	line-height: 1;
@@ -305,8 +305,8 @@ const RemoveButton = styled.button`
 	transition: all 0.2s ease;
 
 	&:hover {
-		color: white;
-		background-color: rgba(255, 255, 255, 0.2);
+		color: var(--foreground);
+		background-color: rgba(var(--foreground-rgb), 0.2);
 	}
 `
 
@@ -315,19 +315,19 @@ const AddPill = styled.button`
 	align-items: center;
 	gap: 0.375rem;
 	padding: 0.375rem 0.75rem;
-	background-color: rgba(255, 255, 255, 0.1);
-	border: 1px dashed rgba(255, 255, 255, 0.3);
+	background-color: rgba(var(--foreground-rgb), 0.1);
+	border: 1px dashed rgba(var(--foreground-rgb), 0.3);
 	border-radius: 9999px;
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-weight: 500;
 	cursor: pointer;
 	transition: all 0.2s ease;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.15);
-		border-color: rgba(255, 255, 255, 0.5);
-		color: white;
+		background-color: rgba(var(--foreground-rgb), 0.15);
+		border-color: rgba(var(--foreground-rgb), 0.5);
+		color: var(--foreground);
 	}
 `
 
@@ -342,8 +342,8 @@ const InputPill = styled.div`
 	align-items: center;
 	gap: 0.375rem;
 	padding: 0.375rem 0.75rem;
-	background-color: rgba(255, 255, 255, 0.15);
-	border: 1px solid rgba(255, 255, 255, 0.3);
+	background-color: rgba(var(--foreground-rgb), 0.15);
+	border: 1px solid rgba(var(--foreground-rgb), 0.3);
 	border-radius: 9999px;
 	min-width: 120px;
 	position: relative;
@@ -353,7 +353,7 @@ const Input = styled.input`
 	background: transparent;
 	border: none;
 	outline: none;
-	color: white;
+	color: var(--foreground);
 	font-size: 0.875rem;
 	font-weight: 500;
 	font-family: inherit;
@@ -362,7 +362,7 @@ const Input = styled.input`
 	padding: 0;
 
 	&::placeholder {
-		color: rgba(255, 255, 255, 0.5);
+		color: rgba(var(--foreground-rgb), 0.5);
 	}
 
 	&:disabled {
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index e9ee1c8..baf1c45 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -66,8 +66,8 @@ const Backdrop = styled.div`
 `
 
 const ModalContent = styled.div`
-	background-color: rgba(20, 20, 20, 0.95);
-	border: 1px solid rgba(255, 255, 255, 0.2);
+	background-color: var(--surface-solid);
+	border: 1px solid var(--border);
 	border-radius: 0.5rem;
 	padding: 2rem;
 	max-width: 500px;
@@ -82,7 +82,7 @@ const CloseButton = styled.button`
 	right: 1rem;
 	background: transparent;
 	border: none;
-	color: white;
+	color: var(--foreground);
 	font-size: 1.5rem;
 	cursor: pointer;
 	padding: 0.25rem;
diff --git a/app/components/PageContainer.tsx b/app/components/PageContainer.tsx
index 46b309b..4a33503 100644
--- a/app/components/PageContainer.tsx
+++ b/app/components/PageContainer.tsx
@@ -28,7 +28,7 @@ export const PageContainer = ({
 const StyledContainer = styled.div<{
 	$alignItems: "center" | "stretch" | "flex-start" | "flex-end"
 }>`
-	background-color: rgba(21, 21, 28, 0.75);
+	background-color: var(--surface);
 	backdrop-filter: blur(10px);
 	padding: 3rem;
 	border-radius: 1rem;
diff --git a/app/components/PotionBackground.tsx b/app/components/PotionBackground.tsx
index 4f22a45..42c1e09 100644
--- a/app/components/PotionBackground.tsx
+++ b/app/components/PotionBackground.tsx
@@ -287,7 +287,7 @@ export const PotionBackground = () => {
 }
 
 const BackgroundContainer = styled.div`
-	background-color: black;
+	background-color: var(--background);
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
@@ -305,8 +305,13 @@ const Canvas = styled.canvas<{
 }>`
 	display: block;
 	position: absolute;
-	width: ${(props) => props.$width}px
-	height: ${(props) => props.$height}px
-	top: ${(props) => props.$top}px
-	left: ${(props) => props.$left}px
+	width: ${(props) => props.$width}px;
+	height: ${(props) => props.$height}px;
+	top: ${(props) => props.$top}px;
+	left: ${(props) => props.$left}px;
+	filter: invert(1);
+
+	@media (prefers-color-scheme: dark) {
+		filter: none;
+	}
 `
diff --git a/app/components/RadioInput.tsx b/app/components/RadioInput.tsx
index 10c9283..505e71d 100644
--- a/app/components/RadioInput.tsx
+++ b/app/components/RadioInput.tsx
@@ -34,7 +34,7 @@ const StyledRadio = styled.input.attrs({ type: "radio" })<{
 	height: ${(props) => (props.$size === "small" ? "1rem" : "1.25rem")};
 	border: 2px solid
 		${(props) =>
-			props.$variant === "secondary" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"};
+			props.$variant === "secondary" ? "rgba(var(--foreground-rgb), 0.3)" : "rgba(0, 0, 0, 0.3)"};
 	border-radius: 50%;
 	background-color: transparent;
 	cursor: pointer;
@@ -45,7 +45,7 @@ const StyledRadio = styled.input.attrs({ type: "radio" })<{
 
 	&:hover {
 		border-color: ${(props) =>
-			props.$variant === "secondary" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"};
+			props.$variant === "secondary" ? "rgba(var(--foreground-rgb), 0.5)" : "rgba(0, 0, 0, 0.5)"};
 	}
 
 	&:checked {
@@ -64,7 +64,7 @@ const StyledRadio = styled.input.attrs({ type: "radio" })<{
 		width: ${(props) => (props.$size === "small" ? "0.375rem" : "0.5rem")};
 		height: ${(props) => (props.$size === "small" ? "0.375rem" : "0.5rem")};
 		border-radius: 50%;
-		background-color: white;
+		background-color: var(--foreground);
 	}
 
 	&:focus {
diff --git a/app/components/TagCloudSection.tsx b/app/components/TagCloudSection.tsx
index 564c96b..5292aba 100644
--- a/app/components/TagCloudSection.tsx
+++ b/app/components/TagCloudSection.tsx
@@ -97,12 +97,12 @@ const SectionHeader = styled.div`
 const SectionTitle = styled.h3`
 	font-size: 1.25rem;
 	font-weight: 600;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
 const SavingIndicator = styled.span`
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	font-style: italic;
 `
diff --git a/app/components/TagInput.tsx b/app/components/TagInput.tsx
index bf96de7..1f99fb6 100644
--- a/app/components/TagInput.tsx
+++ b/app/components/TagInput.tsx
@@ -385,12 +385,12 @@ const TagPill = styled.div<{ $approved: boolean; $isDragging?: boolean; $dragOve
 	gap: 0.375rem;
 	padding: 0.375rem 0.75rem;
 	background-color: ${(props) =>
-		props.$approved ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 243, 205, 0.3)"};
+		props.$approved ? "rgba(var(--foreground-rgb), 0.2)" : "rgba(255, 243, 205, 0.3)"};
 	border: 1px solid
-		${(props) => (props.$approved ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 193, 7, 0.5)")};
+		${(props) => (props.$approved ? "rgba(var(--foreground-rgb), 0.3)" : "rgba(255, 193, 7, 0.5)")};
 	border-radius: 9999px;
 	font-size: 0.875rem;
-	color: white;
+	color: var(--foreground);
 	font-weight: 500;
 	transition: all 0.2s ease;
 	cursor: ${(props) => (props.draggable ? "grab" : "default")};
@@ -399,10 +399,10 @@ const TagPill = styled.div<{ $approved: boolean; $isDragging?: boolean; $dragOve
 	border-color: ${(props) =>
 		props.$dragOver
 			? props.$approved
-				? "rgba(255, 255, 255, 0.6)"
+				? "rgba(var(--foreground-rgb), 0.6)"
 				: "rgba(255, 193, 7, 0.8)"
 			: props.$approved
-				? "rgba(255, 255, 255, 0.3)"
+				? "rgba(var(--foreground-rgb), 0.3)"
 				: "rgba(255, 193, 7, 0.5)"};
 
 	&:hover {
@@ -418,7 +418,7 @@ const TagPill = styled.div<{ $approved: boolean; $isDragging?: boolean; $dragOve
 const RemoveButton = styled.button`
 	background: none;
 	border: none;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	cursor: pointer;
 	font-size: 1.2rem;
 	line-height: 1;
@@ -433,8 +433,8 @@ const RemoveButton = styled.button`
 	transition: all 0.2s ease;
 
 	&:hover {
-		color: white;
-		background-color: rgba(255, 255, 255, 0.2);
+		color: var(--foreground);
+		background-color: rgba(var(--foreground-rgb), 0.2);
 	}
 `
 
@@ -443,19 +443,19 @@ const AddPill = styled.button`
 	align-items: center;
 	gap: 0.375rem;
 	padding: 0.375rem 0.75rem;
-	background-color: rgba(255, 255, 255, 0.1);
-	border: 1px dashed rgba(255, 255, 255, 0.3);
+	background-color: rgba(var(--foreground-rgb), 0.1);
+	border: 1px dashed rgba(var(--foreground-rgb), 0.3);
 	border-radius: 9999px;
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-weight: 500;
 	cursor: pointer;
 	transition: all 0.2s ease;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.15);
-		border-color: rgba(255, 255, 255, 0.5);
-		color: white;
+		background-color: rgba(var(--foreground-rgb), 0.15);
+		border-color: rgba(var(--foreground-rgb), 0.5);
+		color: var(--foreground);
 	}
 `
 
@@ -470,8 +470,8 @@ const InputPill = styled.div`
 	align-items: center;
 	gap: 0.375rem;
 	padding: 0.375rem 0.75rem;
-	background-color: rgba(255, 255, 255, 0.15);
-	border: 1px solid rgba(255, 255, 255, 0.3);
+	background-color: rgba(var(--foreground-rgb), 0.15);
+	border: 1px solid rgba(var(--foreground-rgb), 0.3);
 	border-radius: 9999px;
 	min-width: 120px;
 	position: relative;
@@ -481,7 +481,7 @@ const Input = styled.input`
 	background: transparent;
 	border: none;
 	outline: none;
-	color: white;
+	color: var(--foreground);
 	font-size: 0.875rem;
 	font-weight: 500;
 	font-family: inherit;
@@ -490,7 +490,7 @@ const Input = styled.input`
 	padding: 0;
 
 	&::placeholder {
-		color: rgba(255, 255, 255, 0.5);
+		color: rgba(var(--foreground-rgb), 0.5);
 	}
 
 	&:disabled {
@@ -502,7 +502,7 @@ const Input = styled.input`
 const SearchIndicator = styled.div`
 	position: absolute;
 	right: 0.75rem;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	font-size: 0.875rem;
 `
 
@@ -513,7 +513,7 @@ const SuggestionsList = styled.div`
 	right: 0;
 	background-color: rgba(0, 0, 0, 0.9);
 	backdrop-filter: blur(10px);
-	border: 1px solid rgba(255, 255, 255, 0.2);
+	border: 1px solid rgba(var(--foreground-rgb), 0.2);
 	border-radius: 0.5rem;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 	max-height: 200px;
@@ -525,12 +525,13 @@ const SuggestionItem = styled.div<{ $highlighted: boolean }>`
 	padding: 0.625rem 1rem;
 	cursor: pointer;
 	font-size: 0.875rem;
-	color: white;
-	background-color: ${(props) => (props.$highlighted ? "rgba(255, 255, 255, 0.1)" : "transparent")};
+	color: var(--foreground);
+	background-color: ${(props) =>
+		props.$highlighted ? "rgba(var(--foreground-rgb), 0.1)" : "transparent"};
 	transition: background-color 0.15s ease;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.1);
+		background-color: rgba(var(--foreground-rgb), 0.1);
 	}
 
 	&:first-child {
@@ -545,7 +546,7 @@ const SuggestionItem = styled.div<{ $highlighted: boolean }>`
 `
 
 const CreateItem = styled(SuggestionItem)`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-style: italic;
-	border-top: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: 1px solid var(--border);
 `
diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 0af4b1e..5055917 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -39,14 +39,14 @@ const StyledInput = styled.input<{
 	width: 100%;
 	box-sizing: border-box;
 	background-color: ${(props) => (props.$variant === "primary" ? "white" : "transparent")};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
+	color: ${(props) => (props.$variant === "primary" ? "black" : "var(--foreground)")};
 	border: ${(props) => {
 		if (props.$error) {
 			return "1px solid var(--error-color)"
 		}
 
 		if (props.$variant === "secondary") {
-			return "1px solid rgba(255, 255, 255, 0.3)"
+			return "1px solid rgba(var(--foreground-rgb), 0.3)"
 		}
 
 		return "1px solid rgba(0, 0, 0, 0.2)"
@@ -60,18 +60,18 @@ const StyledInput = styled.input<{
 			}
 
 			if (props.$variant === "secondary") {
-				return "white"
+				return "var(--foreground)"
 			}
 
 			return "rgba(0, 0, 0, 0.4)"
 		}};
 		background-color: ${(props) =>
-			props.$variant === "primary" ? "white" : "rgba(255, 255, 255, 0.05)"};
+			props.$variant === "primary" ? "white" : "rgba(var(--foreground-rgb), 0.05)"};
 	}
 
 	&::placeholder {
 		color: ${(props) =>
-			props.$variant === "primary" ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)"};
+			props.$variant === "primary" ? "rgba(0, 0, 0, 0.5)" : "rgba(var(--foreground-rgb), 0.5)"};
 	}
 
 	&:disabled {
diff --git a/app/components/TextareaInput.tsx b/app/components/TextareaInput.tsx
index 319b3f6..8e1f8b9 100644
--- a/app/components/TextareaInput.tsx
+++ b/app/components/TextareaInput.tsx
@@ -38,22 +38,23 @@ const StyledTextarea = styled.textarea<{
 	box-sizing: border-box;
 	resize: vertical;
 	background-color: ${(props) => (props.$variant === "primary" ? "white" : "transparent")};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
+	color: ${(props) => (props.$variant === "primary" ? "black" : "var(--foreground)")};
 	border: ${(props) =>
 		props.$variant === "secondary"
-			? "1px solid rgba(255, 255, 255, 0.3)"
+			? "1px solid rgba(var(--foreground-rgb), 0.3)"
 			: "1px solid rgba(0, 0, 0, 0.2)"};
 
 	&:focus {
 		outline: none;
-		border-color: ${(props) => (props.$variant === "secondary" ? "white" : "rgba(0, 0, 0, 0.4)")};
+		border-color: ${(props) =>
+			props.$variant === "secondary" ? "var(--foreground)" : "rgba(0, 0, 0, 0.4)"};
 		background-color: ${(props) =>
-			props.$variant === "primary" ? "white" : "rgba(255, 255, 255, 0.05)"};
+			props.$variant === "primary" ? "white" : "rgba(var(--foreground-rgb), 0.05)"};
 	}
 
 	&::placeholder {
 		color: ${(props) =>
-			props.$variant === "primary" ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)"};
+			props.$variant === "primary" ? "rgba(0, 0, 0, 0.5)" : "rgba(var(--foreground-rgb), 0.5)"};
 	}
 
 	&:disabled {
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index 688200f..95962fc 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -35,7 +35,11 @@ export const CameraIcon = ({ color = "#888" }: { color?: string }) => (
 	</svg>
 )
 
-export const QuestionIcon = ({ color = "rgba(255, 255, 255, 0.6)" }: { color?: string }) => (
+export const QuestionIcon = ({
+	color = "rgba(var(--foreground-rgb), 0.6)"
+}: {
+	color?: string
+}) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="16"
diff --git a/app/doorbell/layout.tsx b/app/doorbell/layout.tsx
index 01f5634..65a6a6d 100644
--- a/app/doorbell/layout.tsx
+++ b/app/doorbell/layout.tsx
@@ -36,12 +36,12 @@ const MinimalFooter = styled.div.attrs({ className: "doorbell-footer" })`
 `
 
 const FooterLink = styled(Link)`
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	font-size: 0.875rem;
 	text-decoration: none;
 	transition: color 0.2s ease;
 
 	&:hover {
-		color: rgba(255, 255, 255, 0.9);
+		color: rgba(var(--foreground-rgb), 0.9);
 	}
 `
diff --git a/app/doorbell/page.tsx b/app/doorbell/page.tsx
index 9c498b5..b30bfe9 100644
--- a/app/doorbell/page.tsx
+++ b/app/doorbell/page.tsx
@@ -113,7 +113,9 @@ export default function Doorbell() {
 		<>
 			<BackgroundContainer>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
@@ -182,7 +184,7 @@ export default function Doorbell() {
 // Styled Components //
 
 const Main = styled.main`
-	color: white;
+	color: var(--foreground);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -190,7 +192,7 @@ const Main = styled.main`
 `
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -249,7 +251,7 @@ const TermsMessage = styled.p`
 	text-align: center;
 	max-width: 420px;
 	margin: 0;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 `
 
 const ButtonSection = styled.section`
@@ -275,7 +277,7 @@ const DoorbellMessage = styled.p`
 	text-align: center;
 	max-width: 420px;
 	margin: 0;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 `
 
 const AnimatedButtonContent = styled(motion.span)`
@@ -297,11 +299,11 @@ const CallMessage = styled.p`
 	font-size: 1.25rem;
 	text-align: center;
 	margin: 0;
-	color: white;
+	color: var(--foreground);
 `
 
 const TermsLink = styled(Link)`
-	color: white;
+	color: var(--foreground);
 	text-decoration: underline;
 	transition: opacity 0.2s ease;
 
diff --git a/app/event-terms/page.tsx b/app/event-terms/page.tsx
index 896d087..3ec94d7 100644
--- a/app/event-terms/page.tsx
+++ b/app/event-terms/page.tsx
@@ -8,7 +8,9 @@ export default function EventTerms() {
 		<>
 			<BackgroundContainer>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
@@ -153,7 +155,7 @@ export default function EventTerms() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -168,7 +170,7 @@ const BackgroundContainer = styled.section`
 const Main = styled.main`
 	position: relative;
 	z-index: 1;
-	color: white;
+	color: var(--foreground);
 `
 
 const TermsSection = styled.section`
@@ -190,7 +192,7 @@ const Title = styled.h1`
 	font-weight: 700;
 	margin-bottom: 1.5rem;
 	text-align: center;
-	color: white;
+	color: var(--foreground);
 `
 
 const IntroText = styled.p`
@@ -198,7 +200,7 @@ const IntroText = styled.p`
 	line-height: 1.7;
 	text-align: center;
 	margin-bottom: 3rem;
-	color: rgba(255, 255, 255, 0.85);
+	color: rgba(var(--foreground-rgb), 0.85);
 
 	@media (max-width: 768px) {
 		font-size: 1rem;
@@ -214,7 +216,7 @@ const SectionTitle = styled.h2`
 	font-size: 1.5rem;
 	font-weight: 600;
 	margin-bottom: 1rem;
-	color: white;
+	color: var(--foreground);
 
 	@media (max-width: 768px) {
 		font-size: 1.375rem;
@@ -225,7 +227,7 @@ const Paragraph = styled.p`
 	font-size: 1.0625rem;
 	line-height: 1.8;
 	margin-bottom: 1rem;
-	color: rgba(255, 255, 255, 0.8);
+	color: rgba(var(--foreground-rgb), 0.8);
 
 	&:last-child {
 		margin-bottom: 0;
@@ -239,7 +241,7 @@ const Paragraph = styled.p`
 
 const List = styled.ul`
 	margin: 1rem 0 0 1.5rem;
-	color: rgba(255, 255, 255, 0.8);
+	color: rgba(var(--foreground-rgb), 0.8);
 `
 
 const ListItem = styled.li`
diff --git a/app/events/[eventId]/EventDetailClient.tsx b/app/events/[eventId]/EventDetailClient.tsx
index 1bd7752..d9c286f 100644
--- a/app/events/[eventId]/EventDetailClient.tsx
+++ b/app/events/[eventId]/EventDetailClient.tsx
@@ -134,7 +134,11 @@ export default function EventDetailClient() {
 			<>
 				<BackgroundContainer>
 					<ErrorBoundary
-						fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+						fallback={
+							<div
+								style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }}
+							/>
+						}
 					>
 						<PotionBackground />
 					</ErrorBoundary>
@@ -159,7 +163,9 @@ export default function EventDetailClient() {
 		<>
 			<BackgroundContainer>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
@@ -350,7 +356,7 @@ function formatEventDateTime(startAt: string, endAt: string): string {
 // Styled Components //
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -377,7 +383,7 @@ const Container = styled.div`
 	@media (min-width: 1132px) {
 		margin-inline: auto;
 	}
-	background-color: rgba(21, 21, 28, 0.75);
+	background-color: var(--surface);
 	backdrop-filter: blur(10px);
 	border-radius: 0.5rem;
 	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
@@ -444,22 +450,22 @@ const Header = styled.header`
 const Title = styled.h1`
 	font-size: 2.25rem;
 	font-weight: bold;
-	color: white;
+	color: var(--foreground);
 	margin-bottom: 0.5rem;
 `
 
 const DateTime = styled.p`
 	font-size: 1.125rem;
-	color: #9ca3af;
+	color: var(--subtle-foreground);
 	margin-bottom: 1rem;
 `
 
 const SectionTitle = styled.h2`
 	font-size: 1.5rem;
 	font-weight: bold;
-	color: white;
+	color: var(--foreground);
 	margin-bottom: 1rem;
-	border-bottom: 1px solid #374151;
+	border-bottom: 1px solid var(--border);
 	padding-bottom: 0.75rem;
 `
 
@@ -469,7 +475,7 @@ const LocationSection = styled.section`
 
 const LocationText = styled.p`
 	font-size: 1rem;
-	color: #d1d5db;
+	color: var(--muted-foreground);
 	margin-bottom: 1rem;
 `
 
@@ -496,7 +502,7 @@ const DescriptionSection = styled.section`
 
 const Description = styled.div`
 	font-size: 1rem;
-	color: #d1d5db;
+	color: var(--muted-foreground);
 	line-height: 1.5;
 	word-break: break-word;
 
@@ -601,7 +607,7 @@ const AttendeeLink = styled.a`
 `
 
 const RegistrationSection = styled.section`
-	background-color: rgba(255, 255, 255, 0.01);
+	background-color: rgba(var(--foreground-rgb), 0.01);
 	backdrop-filter: blur(32px);
 	box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, 0.05);
 	padding: 1.5rem;
@@ -633,18 +639,18 @@ const OneClickRSVPContainer = styled.div`
 
 const StoredInfoDisplay = styled.div`
 	font-size: 0.875rem;
-	color: #d1d5db;
+	color: var(--muted-foreground);
 	text-align: center;
 	line-height: 1.6;
 `
 
 const NameValue = styled.span`
-	color: white;
+	color: var(--foreground);
 	font-weight: 900;
 `
 
 const EmailValue = styled.span`
-	color: #aaa;
+	color: var(--subtle-foreground);
 `
 
 const ClearUserInfoLink = styled.a`
@@ -662,7 +668,7 @@ const ClearUserInfoLink = styled.a`
 
 const LoadingMessage = styled.p`
 	text-align: center;
-	color: #9ca3af;
+	color: var(--subtle-foreground);
 	font-size: 1.125rem;
 	padding: 4rem 2rem;
 `
diff --git a/app/events/page.tsx b/app/events/page.tsx
index 1c3c796..436b8ba 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -51,7 +51,9 @@ export default function Events() {
 		<>
 			<BackgroundContainer>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
@@ -97,7 +99,7 @@ export default function Events() {
 										<CardTitle>{event.name}</CardTitle>
 										<CardText>{formatEventDate(event.start_at)}</CardText>
 										{event.location && (
-											<CardText $color="#d1d5db">
+											<CardText $color="var(--muted-foreground)">
 												{event.location.type === "physical"
 													? `${event.location.city}, ${event.location.state}`
 													: "Online Event"}
@@ -140,7 +142,7 @@ function formatEventDate(dateString: string): string {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -176,7 +178,7 @@ const Title = styled.h2`
 	font-weight: bold;
 	margin-bottom: 1rem;
 	text-align: center;
-	color: white;
+	color: var(--foreground);
 `
 
 const EventDescription = styled.p`
@@ -187,7 +189,7 @@ const EventDescription = styled.p`
 	margin-left: auto;
 	margin-right: auto;
 	margin-bottom: 2rem;
-	color: #d1d5db;
+	color: var(--muted-foreground);
 `
 
 const FilterToggle = styled.div`
@@ -214,14 +216,14 @@ const EventsGrid = styled.div`
 
 const LoadingMessage = styled.p`
 	text-align: center;
-	color: #9ca3af;
+	color: var(--subtle-foreground);
 	font-size: 1.125rem;
 	padding: 2rem;
 `
 
 const NoEventsMessage = styled.p`
 	text-align: center;
-	color: #9ca3af;
+	color: var(--subtle-foreground);
 	font-size: 1.125rem;
 	padding: 2rem;
 `
diff --git a/app/globals.css b/app/globals.css
index 1ed1702..d311310 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,14 +3,48 @@
 @tailwind utilities;
 
 :root {
-	--error-color: #f87171;
-	--b1: #000000;
-	--n: 21% 0.003 296.813;
+	color-scheme: light;
+	--background: #f7f7fa;
+	--background-rgb: 247, 247, 250;
+	--foreground: #17171c;
+	--foreground-rgb: 23, 23, 28;
+	--muted-foreground: #555b66;
+	--subtle-foreground: #6b7280;
+	--accent: #6d5bd0;
+	--accent-hover: #5b49bd;
+	--accent-contrast: #ffffff;
+	--surface: rgba(255, 255, 255, 0.78);
+	--surface-solid: #ffffff;
+	--header-background: rgba(247, 247, 250, 0.82);
+	--sidebar-background: rgba(247, 247, 250, 0.94);
+	--footer-background: rgba(247, 247, 250, 0.88);
+	--border: rgba(23, 23, 28, 0.12);
+	--error-color: #dc2626;
+	--b1: #ffffff;
+	--n: 35% 0.003 296.813;
 }
 
 @media (prefers-color-scheme: dark) {
-	html {
+	:root {
 		color-scheme: dark;
+		--background: #0a0a0a;
+		--background-rgb: 10, 10, 10;
+		--foreground: #ffffff;
+		--foreground-rgb: 255, 255, 255;
+		--muted-foreground: #d1d5db;
+		--subtle-foreground: #9ca3af;
+		--accent: #9ca3ff;
+		--accent-hover: #b2b7ff;
+		--accent-contrast: #0a0a0a;
+		--surface: rgba(21, 21, 28, 0.75);
+		--surface-solid: #15151c;
+		--header-background: rgba(0, 0, 0, 0.05);
+		--sidebar-background: rgba(0, 0, 0, 0.05);
+		--footer-background: rgba(0, 0, 0, 0.1);
+		--border: rgba(255, 255, 255, 0.1);
+		--error-color: #f87171;
+		--b1: #000000;
+		--n: 21% 0.003 296.813;
 	}
 }
 
@@ -25,6 +59,16 @@ body {
 	flex-direction: column;
 	margin: 0;
 	padding: 0;
+	background-color: var(--background);
+	color: var(--foreground);
+	font-family:
+		"Chivo",
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Helvetica,
+		Arial,
+		sans-serif;
 }
 
 #__next {
@@ -41,7 +85,8 @@ h5,
 h6 {
 	margin-top: 0;
 	margin-bottom: 1rem;
-	line-height: 1.2;
+	line-height: 1.1;
+	letter-spacing: -0.01em;
 }
 
 h1 {
diff --git a/app/layout.tsx b/app/layout.tsx
index 207b27e..42bce97 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({
 				<link rel="preconnect" href="https://fonts.googleapis.com" />
 				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
 				<link
-					href="https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700;900&display=swap"
+					href="https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;500;600;700;900&display=swap"
 					rel="stylesheet"
 				/>
 				<script async src="https://www.googletagmanager.com/gtag/js?id=G-L0X5333Q2X"></script>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index f8bc4a1..22fbd43 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -388,7 +388,7 @@ export default function Login() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -408,12 +408,12 @@ const Container = styled.main`
 const Title = styled.h1`
 	font-size: 2rem;
 	font-weight: 700;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
 const Subtitle = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	margin: -1rem 0 0 0;
 	text-align: center;
 `
@@ -469,7 +469,7 @@ const InputGroup = styled.div`
 `
 
 const PasswordHelpText = styled.p`
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	font-size: 0.75rem;
 	margin: 0;
 	line-height: 1.4;
@@ -482,7 +482,7 @@ const SuccessContainer = styled.div`
 const BackButton = styled.button`
 	background: none;
 	border: none;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	font-size: 0.875rem;
 	cursor: pointer;
 	padding: 0.5rem;
@@ -491,14 +491,14 @@ const BackButton = styled.button`
 	font-family: inherit;
 
 	&:hover {
-		color: rgba(255, 255, 255, 0.9);
+		color: rgba(var(--foreground-rgb), 0.9);
 	}
 `
 
 const ForgotPasswordButton = styled.button`
 	background: none;
 	border: none;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	cursor: pointer;
 	padding: 0;
 	margin-top: -0.5rem;
@@ -508,7 +508,7 @@ const ForgotPasswordButton = styled.button`
 	text-align: right;
 
 	&:hover:not(:disabled) {
-		color: rgba(255, 255, 255, 0.9);
+		color: rgba(var(--foreground-rgb), 0.9);
 	}
 
 	&:disabled {
diff --git a/app/nametags/page.tsx b/app/nametags/page.tsx
index 2a0fde9..fedf107 100644
--- a/app/nametags/page.tsx
+++ b/app/nametags/page.tsx
@@ -45,7 +45,9 @@ export default function NametagPage() {
 					<source src="/videos/nametags-hero.webm" type="video/webm" />
 				</VideoBackground>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
@@ -92,7 +94,7 @@ export default function NametagPage() {
 // Styled Components //
 
 const Main = styled.main`
-	color: white;
+	color: var(--foreground);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -100,7 +102,7 @@ const Main = styled.main`
 `
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -196,7 +198,7 @@ const Heading = styled.h1`
 const Description = styled.p`
 	font-size: clamp(1.25rem, 2vw, 1.75rem);
 	margin: 0;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 	line-height: 1.4;
 `
 
diff --git a/app/page.tsx b/app/page.tsx
index 18b2938..64e2308 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,57 +1,74 @@
 "use client"
-import { useRef, useState, useEffect } from "react"
-import styled from "styled-components"
-import { motion, useInView, AnimatePresence } from "framer-motion"
+import { useEffect, useState } from "react"
+import styled, { keyframes } from "styled-components"
+import { AnimatePresence, motion } from "framer-motion"
 import { organizers } from "./info/organizers"
 import { links } from "./siteConfig"
-import { PotionBackground } from "./components/PotionBackground"
-import { ErrorBoundary } from "./components/ErrorBoundary"
 import { Button } from "./components/Button"
+import { ErrorBoundary } from "./components/ErrorBoundary"
+import { PotionBackground } from "./components/PotionBackground"
 import { lumaService } from "./services/luma"
 import type { LumaEvent } from "./services/luma"
 
 // Constants //
 
-const sliderImages = [
-	"/images/slides/slide1.webp",
-	"/images/slides/slide2.webp",
-	"/images/slides/slide3.webp",
-	"/images/slides/slide4.webp",
-	"/images/slides/slide5.webp",
-	"/images/slides/slide6.webp"
-]
+const heroAccentCycle = keyframes`
+	0%,
+	100% {
+		filter: hue-rotate(0deg) brightness(1.05);
+		text-shadow:
+			0 0 0.04em rgba(255, 64, 96, 0.35),
+			0 0 0.09em rgba(64, 224, 255, 0.25),
+			0 0 0.14em rgba(190, 90, 255, 0.18);
+	}
+
+	50% {
+		filter: hue-rotate(180deg) brightness(1.25);
+		text-shadow:
+			0 0 0.08em rgba(255, 90, 120, 0.72),
+			0 0 0.15em rgba(90, 235, 255, 0.56),
+			0 0 0.22em rgba(215, 120, 255, 0.42);
+	}
+`
+
+const heroLocations = [
+	{ code: "SD", city: "San Diego" },
+	{ code: "LA", city: "Los Angeles" },
+	{ code: "SF", city: "San Francisco" }
+] as const
+
+const aboutItems = [
+	{
+		title: "Connects everyone",
+		copy: "We're a community of developers of all skill levels, hosted by organizers who want everyone to have a place to learn, meet people, and share what they're working on.",
+		image: "/images/slides/slide1.webp"
+	},
+	{
+		title: "Inspires ideas",
+		copy: "Our monthly meetups pair good food and real conversation with talks from local developers. Members can present an idea, demo a project, or ask the room for help.",
+		image: "/images/slides/slide3.webp"
+	},
+	{
+		title: "Builds together",
+		copy: "After the talks, we break into groups for project showcases, coding help, and casual networking. Bring your laptop and leave with feedback, collaborators, or a problem solved.",
+		image: "/images/slides/slide5.webp"
+	}
+] as const
 
 // Components //
 
 export default function Home() {
-	// Add refs for each animated section
-	const heroRef = useRef(null)
-	const firstLineRef = useRef(null)
-	const secondLineRef = useRef(null)
-	const thirdLineRef = useRef(null)
-	const aboutRef = useRef(null)
-	const organizersRef = useRef(null)
-	const joinRef = useRef(null)
-
-	// Use IntersectionObserver to check if sections are in view
-	const heroInView = useInView(heroRef, { amount: 0.3 })
-	const firstLineView = useInView(firstLineRef, { amount: 0.4 })
-	const secondLineView = useInView(secondLineRef, { amount: 0.4 })
-	const thirdLineView = useInView(thirdLineRef, { amount: 0.4 })
-	const aboutInView = useInView(aboutRef, { amount: 0.2 })
-	const organizersInView = useInView(organizersRef, { amount: 0.3 })
-
-	// Image slider state
-	const [currentImageIndex, setCurrentImageIndex] = useState(0)
+	const [currentHeroLocationIndex, setCurrentHeroLocationIndex] = useState(0)
+
+	const [activeAboutIndex, setActiveAboutIndex] = useState(0)
 
 	// Next event state
 	const [nextEvent, setNextEvent] = useState<LumaEvent | null>(null)
 
-	// Auto-advance slider
 	useEffect(() => {
 		const interval = setInterval(() => {
-			setCurrentImageIndex((prevIndex) => (prevIndex + 1) % sliderImages.length)
-		}, 4000) // Change image every 4 seconds
+			setCurrentHeroLocationIndex((previousIndex) => (previousIndex + 1) % heroLocations.length)
+		}, 3000)
 
 		return () => clearInterval(interval)
 	}, [])
@@ -77,70 +94,61 @@ export default function Home() {
 		loadNextEvent()
 	}, [])
 
-	const joinInView = useInView(joinRef, { amount: 0.3 })
-
-	// Determine the link for the next event button
 	const nextEventLink = nextEvent ? `/events/${nextEvent.api_id}` : "/events"
+	const heroLocation = heroLocations[currentHeroLocationIndex]
 
 	return (
 		<>
 			<BackgroundContainer>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
 			</BackgroundContainer>
 			<Main>
 				<Hero>
-					<HeroSection
-						ref={heroRef}
-						animate={{
-							opacity: heroInView ? 1 : 0,
-							scale: heroInView ? 1 : 0.95
-						}}
-						transition={{ duration: 0.6, ease: "easeOut" }}
-						as={motion.section}
-					>
-						<HeroImage src="/images/sd-devx-brand.png" alt="Developer meetup hero" />
-					</HeroSection>
-					<Tagline
-						animate={{
-							opacity: heroInView ? 1 : 0,
-							scale: heroInView ? 1 : 0.95
-						}}
-						transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-						as={motion.section}
-					>
-						<TaglineText>
-							A developer community of events and open-source projects in San Diego, California.
-						</TaglineText>
-					</Tagline>
-					<HeroButtonContainer
-						animate={{
-							opacity: heroInView ? 1 : 0,
-							y: heroInView ? 0 : 20
-						}}
-						transition={{ duration: 0.6, ease: "easeOut", delay: 0.3 }}
-						as={motion.div}
-					>
-						<Button href={nextEventLink} size="default">
+					<HeroEyebrow>{heroLocation.city}</HeroEyebrow>
+					<HeroWordmark aria-label={`DEVx ${heroLocation.code}`}>
+						<HeroWordmarkBase>DEV</HeroWordmarkBase>
+						<HeroWordmarkAccent aria-label="x">
+							<HeroWordmarkAccentFill aria-hidden="true">x</HeroWordmarkAccentFill>
+							<HeroWordmarkAccentOutline aria-hidden="true">x</HeroWordmarkAccentOutline>
+						</HeroWordmarkAccent>
+						<HeroLocationSlot aria-hidden="true">
+							<AnimatePresence initial={false}>
+								<HeroLocationCode
+									key={heroLocation.code}
+									initial={{ opacity: 0, x: "-0.35em", y: "0.45em" }}
+									animate={{ opacity: 1, x: 0, y: 0 }}
+									exit={{ opacity: 0, x: "0.35em", y: "-0.45em" }}
+									transition={{ duration: 0.35, ease: "easeInOut" }}
+								>
+									{heroLocation.code}
+								</HeroLocationCode>
+							</AnimatePresence>
+						</HeroLocationSlot>
+					</HeroWordmark>
+					<HeroTagline>
+						A developer community of events and open-source projects in {heroLocation.city},
+						California.
+					</HeroTagline>
+					<HeroActions>
+						<Button href={nextEventLink} variant="primary" size="default">
 							Join the Next Event
 						</Button>
-					</HeroButtonContainer>
-					<HeroSocialLinks
-						animate={{
-							opacity: heroInView ? 1 : 0,
-							y: heroInView ? 0 : 20
-						}}
-						transition={{ duration: 0.6, ease: "easeOut", delay: 0.4 }}
-						as={motion.div}
-					>
+						<Button href="/watch" variant="secondary" size="default">
+							Watch Past Talks
+						</Button>
+					</HeroActions>
+					<HeroSocialLinks>
 						<HeroSocialIcon href={links.x} aria-label="X" target="_blank">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								width="24"
-								height="24"
+								width="20"
+								height="20"
 								viewBox="0 0 24 24"
 								fill="currentColor"
 							>
@@ -148,17 +156,17 @@ export default function Home() {
 							</svg>
 						</HeroSocialIcon>
 						<HeroSocialIcon href={links.linkedInUrl} aria-label="LinkedIn" target="_blank">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 50 50">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50">
 								<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z" />
 							</svg>
 						</HeroSocialIcon>
 						<HeroSocialIcon href={links.youtube} aria-label="Youtube" target="_blank">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
 								<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
 							</svg>
 						</HeroSocialIcon>
 						<HeroSocialIcon href={links.tiktok} aria-label="TikTok" target="_blank">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
 								<path
 									fill="currentColor"
 									d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74a2.89 2.89 0 0 1 2.31-4.64a2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"
@@ -169,8 +177,8 @@ export default function Home() {
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
-								width="24"
-								height="24"
+								width="20"
+								height="20"
 								viewBox="0 0 133 134"
 							>
 								<path
@@ -180,7 +188,7 @@ export default function Home() {
 							</svg>
 						</HeroSocialIcon>
 						<HeroSocialIcon href={links.discord} aria-label="Discord" target="_blank">
-							<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 								<path
 									fill="currentColor"
 									d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"
@@ -188,7 +196,7 @@ export default function Home() {
 							</svg>
 						</HeroSocialIcon>
 						<HeroSocialIcon href={links.github} aria-label="Github" target="_blank">
-							<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
+							<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
 								<path
 									fill="currentColor"
 									d="M5.315 2.1c.791-.113 1.9.145 3.333.966l.272.161l.16.1l.397-.083a13.3 13.3 0 0 1 4.59-.08l.456.08l.396.083l.161-.1c1.385-.84 2.487-1.17 3.322-1.148l.164.008l.147.017l.076.014l.05.011l.144.047a1 1 0 0 1 .53.514a5.2 5.2 0 0 1 .397 2.91l-.047.267l-.046.196l.123.163c.574.795.93 1.728 1.03 2.707l.023.295L21 9.5c0 3.855-1.659 5.883-4.644 6.68l-.245.061l-.132.029l.014.161l.008.157l.004.365l-.002.213L16 21a1 1 0 0 1-.883.993L15 22H9a1 1 0 0 1-.993-.883L8 21v-.734c-1.818.26-3.03-.424-4.11-1.878l-.535-.766c-.28-.396-.455-.579-.589-.644l-.048-.019a1 1 0 0 1 .564-1.918c.642.188 1.074.568 1.57 1.239l.538.769c.76 1.079 1.36 1.459 2.609 1.191L8 17.562l-.018-.168a5 5 0 0 1-.021-.824l.017-.185l.019-.12l-.108-.024c-2.976-.71-4.703-2.573-4.875-6.139l-.01-.31L3 9.5a5.6 5.6 0 0 1 .908-3.051l.152-.222l.122-.163l-.045-.196a5.2 5.2 0 0 1 .145-2.642l.1-.282l.106-.253a1 1 0 0 1 .529-.514l.144-.047z"
@@ -198,594 +206,555 @@ export default function Home() {
 					</HeroSocialLinks>
 				</Hero>
 
-				<ScrollFeatureSection ref={firstLineRef}>
-					<ScrollFeatureTitle
-						animate={{
-							x: firstLineView ? 0 : "-100%",
-							opacity: firstLineView ? 1 : 0
-						}}
-						transition={{ duration: 0.9, ease: "easeOut" }}
-					>
-						CONNECT
-					</ScrollFeatureTitle>
-					<ScrollFeatureTagline
-						animate={{
-							opacity: firstLineView ? 1 : 0,
-							y: firstLineView ? 0 : 40
-						}}
-						transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
-					>
-						where ideas meet action
-					</ScrollFeatureTagline>
-				</ScrollFeatureSection>
-
-				<ScrollFeatureSection ref={secondLineRef}>
-					<ScrollFeatureTitle
-						animate={{
-							x: secondLineView ? 0 : "100%",
-							opacity: secondLineView ? 1 : 0
-						}}
-						transition={{ duration: 0.9, ease: "easeOut" }}
-					>
-						INSPIRE
-					</ScrollFeatureTitle>
-					<ScrollFeatureTagline
-						animate={{
-							opacity: secondLineView ? 1 : 0,
-							y: secondLineView ? 0 : 40
-						}}
-						transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
-					>
-						innovation through imagination
-					</ScrollFeatureTagline>
-				</ScrollFeatureSection>
-
-				<ScrollFeatureSection ref={thirdLineRef}>
-					<ScrollFeatureTitle
-						animate={{
-							x: thirdLineView ? 0 : "-100%",
-							opacity: thirdLineView ? 1 : 0
-						}}
-						transition={{ duration: 0.9, ease: "easeOut" }}
-					>
-						BUILD
-					</ScrollFeatureTitle>
-					<ScrollFeatureTagline
-						animate={{
-							opacity: thirdLineView ? 1 : 0,
-							y: thirdLineView ? 0 : 40
-						}}
-						transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
-					>
-						the next big thing
-					</ScrollFeatureTagline>
-				</ScrollFeatureSection>
-
-				<AboutSectionWithSlider
-					ref={aboutRef}
-					as={motion.section}
-					initial={{ opacity: 1 }}
-					animate={{ opacity: aboutInView ? 1 : 0.3 }}
-					transition={{ duration: 0.8, ease: "easeOut" }}
-				>
-					<SliderContainer
-						as={motion.div}
-						animate={{ opacity: aboutInView ? 1 : 0 }}
-						transition={{ duration: 1, ease: "easeOut" }}
-					>
-						<AnimatePresence>
-							<SliderImage
-								key={currentImageIndex}
-								src={sliderImages[currentImageIndex]}
-								alt="Community gathering"
-								initial={{ opacity: 0 }}
-								animate={{ opacity: 1 }}
-								exit={{ opacity: 0 }}
-								transition={{ duration: 1.5 }}
-							/>
-						</AnimatePresence>
-					</SliderContainer>
-					<SliderOverlay
-						as={motion.div}
-						animate={{ opacity: aboutInView ? 1 : 0.6 }}
-						transition={{ duration: 1, ease: "easeOut" }}
-					/>
-					<AboutContentOverlay>
-						<SectionTitle
-							as={motion.h2}
-							animate={{ opacity: aboutInView ? 1 : 0, y: aboutInView ? 0 : 50 }}
-							transition={{ duration: 0.6, ease: "easeOut" }}
-						>
-							About us
-						</SectionTitle>
-						<AboutTextBox
-							animate={{
-								opacity: aboutInView ? 1 : 0,
-								scale: aboutInView ? 1 : 0.9
-							}}
-							transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-							as={motion.div}
-						>
-							<AboutTextContent>
-								<ContentParagraph>
-									We&apos;re a community of developers of all skill levels, dedicated to fostering a
-									fun and educational environment.
-								</ContentParagraph>
-								<ContentParagraph>
-									Hosted by a team of passionate organizers, our monthly meetups offer an
-									opportunity to network, learn, and showcase community projects. Each event
-									features complimentary food and drinks during our networking lunch, followed by
-									engaging presentations on various developer and engineering topics.
-								</ContentParagraph>
-								<ContentParagraph>
-									After the talks, we break into groups for casual networking, project showcases,
-									and coding help. Whether you&apos;re a seasoned developer or just starting out,
-									there&apos;s something for everyone.
-								</ContentParagraph>
-								<ContentParagraph $noMargin>
-									Be sure to bring your laptop if you&apos;d like to share your latest project or
-									give a presentation. We look forward to meeting you and seeing what you&apos;re
-									excited about!
-								</ContentParagraph>
-							</AboutTextContent>
-						</AboutTextBox>
-					</AboutContentOverlay>
-				</AboutSectionWithSlider>
-
-				<ContentSection ref={organizersRef} as={motion.section}>
-					<SectionTitle
-						as={motion.h2}
-						animate={{ opacity: organizersInView ? 1 : 0, y: organizersInView ? 0 : 50 }}
-						transition={{ duration: 0.6, ease: "easeOut" }}
-					>
-						Organizers
-					</SectionTitle>
-					<ContentWrapper>
-						<OrganizerGrid>
-							{organizers.map((organizer) => (
-								<OrganizerCardWrapper key={organizer.name}>
-									<OrganizerCardLink
-										href={organizer.linkedIn}
-										target="_blank"
-										rel="noopener noreferrer"
-										as={motion.a}
-										initial={{ opacity: 0, y: 50 }}
-										animate={{ opacity: 1, y: 0 }}
-										transition={{
-											duration: 0.5,
-											ease: "easeOut"
-										}}
-										whileHover={{ scale: 1.1 }}
-									>
-										<OrganizerImage src={organizer.imageSrc} alt={organizer.name} />
-										<OrganizerName>{organizer.name}</OrganizerName>
-										<LinkedInIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-											<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-										</LinkedInIcon>
-									</OrganizerCardLink>
-								</OrganizerCardWrapper>
-							))}
-						</OrganizerGrid>
-					</ContentWrapper>
+				<AboutSection>
+					<AboutLayout>
+						<AboutSummary>
+							<SectionEyebrow>About us</SectionEyebrow>
+							<AboutLead>A community that</AboutLead>
+						</AboutSummary>
+						<AboutAccordion>
+							{aboutItems.map((item, index) => {
+								const isActive = activeAboutIndex === index
+								const panelId = `about-panel-${index}`
+
+								return (
+									<AboutAccordionItem key={item.title} $active={isActive} $image={item.image}>
+										<AboutAccordionButton
+											type="button"
+											$active={isActive}
+											aria-expanded={isActive}
+											aria-controls={panelId}
+											onClick={() => setActiveAboutIndex(index)}
+										>
+											<AboutItemIndex>0{index + 1}</AboutItemIndex>
+											<AboutItemTitle>{item.title}</AboutItemTitle>
+											<AboutItemIndicator aria-hidden="true">
+												{isActive ? "−" : "+"}
+											</AboutItemIndicator>
+										</AboutAccordionButton>
+										<AboutPanel id={panelId} $active={isActive}>
+											<AboutPanelClip>
+												<AboutPanelContent>
+													<AboutPanelCopy>{item.copy}</AboutPanelCopy>
+												</AboutPanelContent>
+											</AboutPanelClip>
+										</AboutPanel>
+									</AboutAccordionItem>
+								)
+							})}
+						</AboutAccordion>
+					</AboutLayout>
+				</AboutSection>
+
+				<ContentSection>
+					<SectionEyebrow $center>Organizers</SectionEyebrow>
+					<SectionTitle $center>The people behind DEVx</SectionTitle>
+					<OrganizerGrid>
+						{organizers.map((organizer) => (
+							<OrganizerCard
+								key={organizer.name}
+								href={organizer.linkedIn}
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<OrganizerImage src={organizer.imageSrc} alt={organizer.name} />
+								<OrganizerName>{organizer.name}</OrganizerName>
+								<LinkedInIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+									<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+								</LinkedInIcon>
+							</OrganizerCard>
+						))}
+					</OrganizerGrid>
 				</ContentSection>
 
-				<ContentSection ref={joinRef} as={motion.section}>
-					<SectionTitle
-						as={motion.h2}
-						animate={{ opacity: joinInView ? 1 : 0, y: joinInView ? 0 : 50 }}
-						transition={{ duration: 0.6, ease: "easeOut" }}
-					>
-						Join us
-					</SectionTitle>
-					<ContentWrapper>
-						<ContentText
-							as={motion.div}
-							animate={{ opacity: joinInView ? 1 : 0, scale: joinInView ? 1 : 0.9 }}
-							transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-						>
-							<Button href={nextEventLink} size="default">
-								Join the Next Event
-							</Button>
-						</ContentText>
-					</ContentWrapper>
-				</ContentSection>
+				<JoinSection>
+					<JoinPanel>
+						<SectionTitle $center>Join us at the next event</SectionTitle>
+						<JoinText>
+							Free to attend, open to every skill level. Come meet the San Diego developer
+							community.
+						</JoinText>
+						<Button href={nextEventLink} variant="primary" size="default">
+							Join the Next Event
+						</Button>
+					</JoinPanel>
+				</JoinSection>
 			</Main>
 		</>
 	)
 }
 
+// Styled Components //
+
 const Main = styled.main`
-	color: white;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
 `
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
 	position: fixed;
-	height: 100vh;
-	width: 100vw;
 	top: 0;
 	left: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+	width: 100vw;
+	height: 100vh;
+	background-color: var(--background);
 `
 
 const Hero = styled.section`
-	position: relative;
-	height: 100vh;
-	width: 100vw;
+	width: 100%;
+	max-width: 900px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
-`
-
-const HeroSocialLinks = styled.div`
-	position: absolute;
-	bottom: 4rem;
-	display: flex;
-	gap: 5vw;
-	align-items: center;
-	justify-content: center;
+	text-align: center;
+	padding: 6rem 1.5rem 5rem;
 
 	@media (max-width: 768px) {
-		bottom: 3rem;
+		padding: 3.5rem 1.5rem 3rem;
 	}
 `
 
-const HeroSocialIcon = styled.a`
+const HeroEyebrow = styled.p`
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: var(--accent);
+	margin: 0 0 1rem 0;
+`
+
+const HeroWordmark = styled.h1`
 	display: flex;
-	align-items: center;
-	color: rgba(255, 255, 255, 0.7);
-	transition: all 0.3s ease;
+	align-items: baseline;
+	justify-content: center;
+	font-size: clamp(4rem, 13vw, 8rem);
+	font-weight: 900;
+	letter-spacing: -0.04em;
+	line-height: 1;
+	margin: 0;
+	color: var(--foreground);
+`
 
-	svg {
-		fill: currentColor;
-		width: 28px;
-		height: 28px;
-	}
+const HeroWordmarkBase = styled.span`
+	color: var(--foreground);
+`
 
-	&:hover {
-		color: rgba(255, 255, 255, 1);
-		transform: scale(1.1);
+const HeroWordmarkAccent = styled.span`
+	display: inline-grid;
+	align-items: baseline;
+`
+
+const HeroWordmarkAccentFill = styled.span`
+	grid-area: 1 / 1;
+	display: inline-block;
+	padding: 0.12em;
+	margin: -0.12em;
+	color: transparent;
+	background: linear-gradient(
+		45deg,
+		#ff0000 0%,
+		#ff7f00 12.5%,
+		#ffff00 25%,
+		#00ff00 37.5%,
+		#00ffff 50%,
+		#0000ff 62.5%,
+		#4b0082 75%,
+		#9400d3 87.5%,
+		#ff0000 100%
+	);
+	background-size: 100% 100%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	text-shadow:
+		0 0 0.04em rgba(255, 64, 96, 0.35),
+		0 0 0.09em rgba(64, 224, 255, 0.25),
+		0 0 0.14em rgba(190, 90, 255, 0.18);
+	animation: ${heroAccentCycle} 4s ease-in-out infinite;
+	will-change: filter, text-shadow;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+		filter: none;
 	}
 `
 
-const HeroSection = styled.section`
-	position: relative;
-	margin: 0 1rem;
+const HeroWordmarkAccentOutline = styled.span`
+	grid-area: 1 / 1;
+	display: inline-block;
+	padding: 0.12em;
+	margin: -0.12em;
+	color: transparent;
+	-webkit-text-stroke: 1px white;
+	paint-order: stroke fill;
 `
 
-const HeroImage = styled.img`
-	width: 100%;
-	max-width: 688px;
-	margin: 0 auto;
+const HeroLocationSlot = styled.span`
+	display: inline-grid;
+	width: 2ch;
+	color: var(--foreground);
 `
 
-const Tagline = styled.section`
-	padding: 3rem;
-	border-radius: 0.5rem;
+const HeroLocationCode = styled(motion.span)`
+	grid-area: 1 / 1;
+	display: inline-block;
+	color: transparent;
+	-webkit-text-stroke: 2px var(--foreground);
+	letter-spacing: -0.04em;
+	paint-order: stroke fill;
 `
 
-const TaglineText = styled.p`
+const HeroTagline = styled.p`
 	font-size: 1.25rem;
-	text-align: center;
-	max-width: 1024px;
+	color: var(--muted-foreground);
+	max-width: 620px;
+	margin: 1.5rem 0 0 0;
+
+	@media (max-width: 768px) {
+		font-size: 1.1rem;
+	}
 `
 
-const HeroButtonContainer = styled.div`
-	margin-top: 2rem;
+const HeroActions = styled.div`
 	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
 	justify-content: center;
-	align-items: center;
+	margin-top: 2.25rem;
 `
 
-const ScrollFeatureSection = styled.section`
-	width: 100%;
-	min-height: 80vh;
+const HeroSocialLinks = styled.div`
 	display: flex;
-	flex-direction: column;
+	gap: 1.5rem;
 	align-items: center;
 	justify-content: center;
-	padding: 6rem 2rem;
-	gap: 1.5rem;
-	box-sizing: border-box;
-	margin: 4rem 0;
-	overflow: hidden;
-	position: relative;
+	margin-top: 3rem;
+`
 
-	@media (max-width: 768px) {
-		min-height: 70vh;
-		padding: 4rem 1.5rem;
-		margin: 2rem 0;
+const HeroSocialIcon = styled.a`
+	display: flex;
+	align-items: center;
+	color: var(--subtle-foreground);
+	transition: color 0.2s ease;
+
+	svg {
+		fill: currentColor;
 	}
 
-	@media (max-width: 480px) {
-		min-height: 60vh;
-		padding: 3rem 1rem;
+	&:hover {
+		color: var(--accent);
 	}
 `
 
-const ScrollFeatureTitle = styled(motion.h1)`
-	font-size: clamp(3rem, 10vw, 8rem);
-	font-weight: 800;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-	text-align: center;
-`
+const AboutSection = styled.section`
+	width: 100%;
+	padding: 3rem 0;
 
-const ScrollFeatureTagline = styled(motion.p)`
-	font-size: clamp(1.5rem, 3vw, 2.5rem);
-	text-align: center;
-	max-width: 820px;
-	color: rgba(255, 255, 255, 0.8);
-	line-height: 1.4;
+	@media (max-width: 768px) {
+		padding: 1rem 0;
+	}
 `
 
-const ContentSection = styled.section`
-	position: relative;
-	width: 100vw;
-	height: auto;
-	min-height: 100vh;
+const AboutLayout = styled.div`
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 4rem;
-	box-sizing: border-box;
+	width: 100%;
+	min-height: 620px;
+	background-color: var(--surface-solid);
+	border-top: 1px solid var(--border);
+	border-bottom: 1px solid var(--border);
+	overflow: hidden;
 
-	@media (max-width: 1024px) {
-		padding: 3rem;
-		height: auto;
-		min-height: 100vh;
+	@media (max-width: 800px) {
+		min-height: 0;
+		flex-direction: column;
 	}
+`
 
-	@media (max-width: 768px) {
-		padding: 2rem;
-		height: auto;
-		min-height: 80vh;
-	}
+const AboutSummary = styled.div`
+	flex: 0 0 clamp(240px, 25vw, 380px);
+	padding: 2.5rem;
+	border-right: 1px solid var(--border);
 
-	@media (max-width: 480px) {
-		padding: 1rem;
-		height: auto;
-		min-height: 70vh;
+	@media (max-width: 800px) {
+		flex-basis: auto;
+		border-right: none;
+		border-bottom: 1px solid var(--border);
 	}
 `
 
-const AboutSectionWithSlider = styled.section`
-	position: relative;
-	width: 100vw;
-	min-height: 100vh;
+const AboutLead = styled.h2`
+	font-size: clamp(2rem, 4vw, 3.5rem);
+	font-weight: 800;
+	line-height: 1.05;
+	margin: 0;
+	color: var(--foreground);
+`
+
+const AboutAccordion = styled.div`
 	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
+	flex: 1;
+	min-width: 0;
 
-	@media (max-width: 768px) {
-		overflow: visible;
-		padding: 4rem 0;
+	@media (max-width: 800px) {
+		flex-direction: column;
 	}
 `
 
-const SliderContainer = styled.div`
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
-`
+const AboutAccordionItem = styled.div<{ $active: boolean; $image: string }>`
+	display: flex;
+	flex: ${(props) => (props.$active ? "5 1 0" : "1 1 0")};
+	flex-direction: column;
+	min-width: 0;
+	overflow: hidden;
+	border-left: 1px solid rgba(255, 255, 255, 0.2);
+	background-image: ${(props) =>
+		`linear-gradient(rgba(5, 5, 8, ${props.$active ? 0.48 : 0.7}), rgba(5, 5, 8, ${
+			props.$active ? 0.78 : 0.84
+		})), url("${props.$image}")`};
+	background-position: center;
+	background-size: cover;
+	transition: flex 0.5s ease;
 
-const SliderImage = styled(motion.img)`
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	filter: blur(2px);
-`
+	&:first-child {
+		border-left: none;
+	}
 
-const SliderOverlay = styled.div`
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.4);
-	z-index: 1;
+	@media (max-width: 800px) {
+		flex: none;
+		border-top: 1px solid rgba(255, 255, 255, 0.2);
+		border-left: none;
+
+		&:first-child {
+			border-top: none;
+		}
+	}
 `
 
-const AboutContentOverlay = styled.div`
-	position: relative;
-	z-index: 2;
-	display: flex;
+const AboutAccordionButton = styled.button<{ $active: boolean }>`
+	display: ${(props) => (props.$active ? "grid" : "flex")};
+	grid-template-columns: 3rem minmax(0, 1fr) auto;
+	flex: ${(props) => (props.$active ? "none" : "1")};
 	flex-direction: column;
+	gap: 1rem;
 	align-items: center;
-	justify-content: center;
-	padding: 2rem;
+	justify-content: ${(props) => (props.$active ? "normal" : "space-between")};
 	width: 100%;
-	max-width: 1200px;
+	min-height: ${(props) => (props.$active ? "auto" : "100%")};
+	padding: 1.5rem 2rem;
+	border: none;
+	background: transparent;
+	color: ${(props) => (props.$active ? "#ffffff" : "rgba(255, 255, 255, 0.72)")};
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+	transition: color 0.2s ease;
 
-	@media (max-width: 768px) {
-		padding: 3rem 1rem;
+	&:hover,
+	&:focus-visible {
+		color: #ffffff;
 	}
-`
 
-const AboutTextBox = styled.div`
-	background-color: rgba(0, 0, 0, 0.75);
-	padding: 3.5rem;
-	border-radius: 1rem;
-	backdrop-filter: blur(8px);
-	max-width: 800px;
-	margin: 0 auto;
-	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
-
-	@media (max-width: 768px) {
-		padding: 2.5rem;
-		max-width: 90%;
+	&:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: -2px;
 	}
 
-	@media (max-width: 480px) {
-		padding: 2rem;
-		border-radius: 0.75rem;
+	@media (max-width: 800px) {
+		display: grid;
+		grid-template-columns: 2rem minmax(0, 1fr) auto;
+		flex: none;
+		flex-direction: row;
+		gap: 0.5rem;
+		align-items: center;
+		min-height: auto;
+		padding: 1.25rem;
 	}
 `
 
-const AboutTextContent = styled.div`
-	display: flex;
-	flex-direction: column;
-	gap: 1.5rem;
+const AboutItemIndex = styled.span`
+	align-self: start;
+	padding-top: 0.4rem;
+	font-size: 0.8rem;
+	font-weight: 700;
 `
 
-const ContentParagraph = styled.p<{ $noMargin?: boolean }>`
-	font-size: 1.125rem;
-	line-height: 1.9;
-	text-align: left;
-	margin: ${(props) => (props.$noMargin ? "0" : "0")};
-	color: rgba(255, 255, 255, 0.9);
-	font-weight: 300;
+const AboutItemTitle = styled.span`
+	font-size: clamp(2.25rem, 5.5vw, 4.75rem);
+	font-weight: 500;
+	letter-spacing: -0.04em;
+	line-height: 0.95;
 
-	&:first-child {
-		font-size: 1.375rem;
-		font-weight: 300;
-		text-align: center;
-		margin-bottom: 0.75rem;
-		color: rgba(255, 255, 255, 0.95);
-		letter-spacing: 0.02em;
+	${AboutAccordionButton}:not([aria-expanded="true"]) & {
+		font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+		writing-mode: vertical-rl;
+		transform: rotate(180deg);
 	}
 
-	@media (max-width: 768px) {
-		font-size: 1.05rem;
-		line-height: 1.8;
-
-		&:first-child {
-			font-size: 1.25rem;
+	@media (max-width: 800px) {
+		${AboutAccordionButton}:not([aria-expanded="true"]) & {
+			font-size: clamp(2rem, 9vw, 3.5rem);
+			writing-mode: horizontal-tb;
+			transform: none;
 		}
 	}
+`
 
-	@media (max-width: 480px) {
-		font-size: 1rem;
-		line-height: 1.7;
+const AboutItemIndicator = styled.span`
+	font-size: 1.75rem;
+	font-weight: 300;
+`
 
-		&:first-child {
-			font-size: 1.15rem;
-		}
-	}
+const AboutPanel = styled.div<{ $active: boolean }>`
+	display: grid;
+	flex: ${(props) => (props.$active ? "1" : "0")};
+	min-height: 0;
+	grid-template-rows: ${(props) => (props.$active ? "1fr" : "0fr")};
+	opacity: ${(props) => (props.$active ? 1 : 0)};
+	transition:
+		flex 0.45s ease,
+		grid-template-rows 0.45s ease,
+		opacity 0.3s ease;
 `
 
-const SectionTitle = styled.h2`
-	font-size: clamp(2rem, 8vw, 4rem);
-	font-weight: 700;
-	margin: 0 0 2rem 0;
+const AboutPanelClip = styled.div`
+	min-height: 0;
+	overflow: hidden;
 `
 
-const ContentWrapper = styled.div`
-	width: 100%;
+const AboutPanelContent = styled.div`
 	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 5rem;
-	padding: 5rem;
+	align-items: flex-end;
+	height: 100%;
+	padding: 0 2rem 2rem 6rem;
 
-	@media (max-width: 1280px) {
-		flex-direction: column;
-		gap: 2rem;
-		padding: 2rem;
+	@media (max-width: 900px) {
+		padding-left: 2rem;
 	}
 
-	@media (max-width: 480px) {
-		padding: 1rem;
-		gap: 1.5rem;
+	@media (max-width: 600px) {
+		padding: 0 1.25rem 1.5rem;
 	}
 `
 
-const ContentText = styled.p`
-	margin-top: 0.5rem;
-	font-size: 1.25rem;
-	text-align: center;
-	max-width: 1024px;
+const AboutPanelCopy = styled.p`
+	max-width: 560px;
+	font-size: 1.05rem;
+	line-height: 1.7;
+	color: rgba(255, 255, 255, 0.88);
+	margin: 0;
+`
 
-	@media (max-width: 768px) {
-		font-size: 1.125rem;
-		max-width: 90vw;
-	}
+const SectionEyebrow = styled.p<{ $center?: boolean }>`
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: var(--accent);
+	margin: 0 0 0.75rem 0;
+	text-align: ${(props) => (props.$center ? "center" : "left")};
+`
+
+const SectionTitle = styled.h2<{ $center?: boolean }>`
+	font-size: clamp(1.75rem, 4vw, 2.75rem);
+	font-weight: 800;
+	margin: 0 0 1.5rem 0;
+	color: var(--foreground);
+	text-align: ${(props) => (props.$center ? "center" : "left")};
+	max-width: 720px;
+	${(props) => props.$center && "margin-left: auto; margin-right: auto;"}
+`
 
-	@media (max-width: 480px) {
-		font-size: 1rem;
-		line-height: 1.6;
+const ContentSection = styled.section`
+	width: 100%;
+	max-width: 1200px;
+	padding: 3rem 1.5rem 5rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	@media (max-width: 768px) {
+		padding: 2rem 1.5rem 3rem;
 	}
 `
 
 const OrganizerGrid = styled.div`
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	gap: 1.5rem;
 	width: 100%;
+	margin-top: 1rem;
 `
 
-const OrganizerCardWrapper = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex: 1 1 300px;
-	max-width: 350px;
-`
-
-const OrganizerCardLink = styled.a`
-	background-color: rgba(255, 255, 255, 0.02);
-	padding: 3rem;
-	border-radius: 0.5rem;
+const OrganizerCard = styled.a`
+	background-color: var(--surface-solid);
+	border: 1px solid var(--border);
+	padding: 2.5rem 1.5rem;
+	border-radius: 1rem;
 	text-align: center;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	width: 280px;
 	text-decoration: none;
 	color: inherit;
 	cursor: pointer;
-	transition: background-color 0.3s ease;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.05);
-	}
-
-	@media (max-width: 768px) {
-		width: 260px;
-		padding: 2.5rem;
-	}
-
-	@media (max-width: 480px) {
-		width: 240px;
-		padding: 2rem;
+		transform: translateY(-4px);
+		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 	}
 `
 
 const OrganizerImage = styled.img`
-	width: 8rem;
-	height: 8rem;
+	width: 7rem;
+	height: 7rem;
 	object-fit: cover;
 	border-radius: 50%;
-	margin: 0 auto 0.5rem auto;
+	margin: 0 auto 1rem auto;
+	border: 3px solid var(--border);
 `
 
 const OrganizerName = styled.h3`
-	font-size: 1.25rem;
+	font-size: 1.1rem;
 	font-weight: 700;
-	margin: 1rem 0;
+	margin: 0;
+	color: var(--foreground);
 `
 
 const LinkedInIcon = styled.svg`
-	height: 2rem;
-	width: 2rem;
-	fill: currentColor;
-	margin-top: 0.5rem;
+	height: 1.5rem;
+	width: 1.5rem;
+	fill: var(--subtle-foreground);
+	margin-top: 0.75rem;
+`
+
+const JoinSection = styled.section`
+	width: 100%;
+	max-width: 1200px;
+	padding: 1rem 1.5rem 6rem;
+`
+
+const JoinPanel = styled.div`
+	background-color: var(--surface-solid);
+	border: 1px solid var(--border);
+	border-radius: 1.5rem;
+	padding: 4.5rem 2rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+
+	@media (max-width: 768px) {
+		padding: 3rem 1.5rem;
+	}
+`
+
+const JoinText = styled.p`
+	font-size: 1.1rem;
+	color: var(--muted-foreground);
+	max-width: 480px;
+	margin: 0 0 2rem 0;
 `
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
index 92164b6..c394c62 100644
--- a/app/reset-password/page.tsx
+++ b/app/reset-password/page.tsx
@@ -149,7 +149,7 @@ export default function ResetPasswordPage() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -169,12 +169,12 @@ const Container = styled.main`
 const Title = styled.h1`
 	font-size: 2rem;
 	font-weight: 700;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
 const Subtitle = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	margin: -1rem 0 0 0;
 	text-align: center;
 `
diff --git a/app/setup/page.tsx b/app/setup/page.tsx
index caab40b..42ae133 100644
--- a/app/setup/page.tsx
+++ b/app/setup/page.tsx
@@ -375,7 +375,7 @@ export default function Setup() {
 								{handle && (
 									<HandleStatus>
 										{checkingHandle ? (
-											<StatusText $color="rgba(255, 255, 255, 0.5)">Checking...</StatusText>
+											<StatusText $color="rgba(var(--foreground-rgb), 0.5)">Checking...</StatusText>
 										) : handleAvailable === true ? (
 											<StatusText $color="#4ade80">✓ Available</StatusText>
 										) : handleAvailable === false ? (
@@ -460,13 +460,13 @@ const HeaderRow = styled.div`
 const Title = styled.h1`
 	font-size: 2.5rem;
 	font-weight: 700;
-	color: rgba(255, 255, 255, 0.95);
+	color: rgba(var(--foreground-rgb), 0.95);
 	text-align: center;
 	width: 100%;
 `
 
 const LoadingText = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 1.2rem;
 `
 
@@ -487,7 +487,7 @@ const Section = styled.div`
 const SectionTitle = styled.h2`
 	font-size: 1.5rem;
 	font-weight: 600;
-	color: rgba(255, 255, 255, 0.95);
+	color: rgba(var(--foreground-rgb), 0.95);
 	margin: 0;
 `
 
@@ -518,7 +518,7 @@ const StatusText = styled.span<{ $color: string }>`
 `
 
 const HelpText = styled.p`
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	font-size: 0.875rem;
 	margin: 0;
 `
diff --git a/app/slides/SlidesListClient.tsx b/app/slides/SlidesListClient.tsx
index dc9ec69..a699024 100644
--- a/app/slides/SlidesListClient.tsx
+++ b/app/slides/SlidesListClient.tsx
@@ -39,7 +39,7 @@ export default function SlidesListClient({ slides }: SlidesListClientProps) {
 // Styled Components //
 
 const Main = styled.main`
-	color: white;
+	color: var(--foreground);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -80,7 +80,7 @@ const SectionTitle = styled.h1`
 
 const EmptyState = styled.p`
 	font-size: 1.125rem;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 `
 
 const SlidesList = styled.div`
@@ -94,7 +94,7 @@ const SlideCard = styled(Link)`
 	flex-direction: column;
 	gap: 0.5rem;
 	padding: 1.5rem;
-	background: rgba(255, 255, 255, 0.03);
+	background: rgba(var(--foreground-rgb), 0.03);
 	border-radius: 0.5rem;
 	text-decoration: none;
 	color: inherit;
@@ -113,13 +113,13 @@ const SlideTitle = styled.h2`
 
 const SlideAuthor = styled.p`
 	font-size: 1rem;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	margin: 0;
 `
 
 const SlideDescription = styled.p`
 	font-size: 1rem;
 	line-height: 1.6;
-	color: rgba(255, 255, 255, 0.8);
+	color: rgba(var(--foreground-rgb), 0.8);
 	margin: 0.5rem 0 0;
 `
diff --git a/app/slides/[slug]/SlideDetailClient.tsx b/app/slides/[slug]/SlideDetailClient.tsx
index cb57a69..82544c4 100644
--- a/app/slides/[slug]/SlideDetailClient.tsx
+++ b/app/slides/[slug]/SlideDetailClient.tsx
@@ -76,7 +76,7 @@ function ShareIcon() {
 // Styled Components //
 
 const Main = styled.main`
-	color: white;
+	color: var(--foreground);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -139,7 +139,7 @@ const MetadataSection = styled.section`
 	max-width: 1200px;
 	width: 100%;
 	padding: 2rem;
-	background: rgba(255, 255, 255, 0.03);
+	background: rgba(var(--foreground-rgb), 0.03);
 	border-radius: 0.5rem;
 	backdrop-filter: blur(8px);
 `
@@ -159,20 +159,20 @@ const MetaInfo = styled.div`
 
 const Author = styled.p`
 	font-size: 1.125rem;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	margin: 0;
 `
 
 const DateText = styled.p`
 	font-size: 1rem;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	margin: 0;
 `
 
 const Description = styled.p`
 	font-size: 1.125rem;
 	line-height: 1.8;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 	font-weight: 300;
 	margin: 0.5rem 0;
 
diff --git a/app/submit-talk/page.tsx b/app/submit-talk/page.tsx
index 11ab455..237ab48 100644
--- a/app/submit-talk/page.tsx
+++ b/app/submit-talk/page.tsx
@@ -557,7 +557,7 @@ export default function SubmitTalk() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -577,13 +577,13 @@ const Container = styled.main`
 const Title = styled.h1`
 	font-size: 2rem;
 	font-weight: 700;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 	text-align: center;
 `
 
 const Subtitle = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	margin: -1rem 0 0 0;
 	text-align: center;
 `
@@ -599,7 +599,7 @@ const FormSection = styled.div`
 	flex-direction: column;
 	gap: 1rem;
 	padding-top: 1rem;
-	border-top: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: 1px solid var(--border);
 
 	&:first-of-type {
 		border-top: none;
@@ -610,7 +610,7 @@ const FormSection = styled.div`
 const SectionTitle = styled.h2`
 	font-size: 1.25rem;
 	font-weight: 600;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
@@ -626,21 +626,21 @@ const Field = styled.div`
 `
 
 const InfoValue = styled.div`
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 	font-size: 0.9375rem;
 	margin: 0;
 `
 
 const InfoNote = styled.p`
 	margin: 0.5rem 0 0 0;
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(var(--foreground-rgb), 0.6);
 	font-size: 0.875rem;
 	line-height: 1.5;
 `
 
 const HookNote = styled.p`
 	margin: 0;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(var(--foreground-rgb), 0.5);
 	font-size: 0.8125rem;
 	line-height: 1.4;
 `
@@ -663,15 +663,15 @@ const ThumbnailPreviewWrap = styled.div`
 const Label = styled.label`
 	font-size: 0.875rem;
 	font-weight: 700;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 `
 
 const ReadOnlyValue = styled.div`
 	padding: 0.75rem;
-	background-color: rgba(255, 255, 255, 0.05);
-	border: 1px solid rgba(255, 255, 255, 0.1);
+	background-color: rgba(var(--foreground-rgb), 0.05);
+	border: 1px solid var(--border);
 	border-radius: 0.5rem;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 1rem;
 `
 
@@ -689,16 +689,16 @@ const RadioOption = styled.div`
 
 const RadioLabel = styled.label`
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 	cursor: pointer;
 `
 
 const FileInput = styled.input`
 	padding: 0.75rem;
-	background-color: rgba(255, 255, 255, 0.1);
-	border: 1px solid rgba(255, 255, 255, 0.2);
+	background-color: rgba(var(--foreground-rgb), 0.1);
+	border: 1px solid rgba(var(--foreground-rgb), 0.2);
 	border-radius: 0.5rem;
-	color: white;
+	color: var(--foreground);
 	font-size: 1rem;
 	cursor: pointer;
 
@@ -708,7 +708,7 @@ const FileInput = styled.input`
 		background-color: rgba(156, 163, 255, 0.2);
 		border: 1px solid rgba(156, 163, 255, 0.4);
 		border-radius: 0.375rem;
-		color: white;
+		color: var(--foreground);
 		cursor: pointer;
 		font-size: 0.875rem;
 		transition: all 0.2s ease;
@@ -722,7 +722,7 @@ const FileInput = styled.input`
 const FileInfo = styled.div`
 	margin-top: 0.5rem;
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-style: italic;
 `
 
@@ -752,7 +752,7 @@ const CancelButton = styled(Button)`
 `
 
 const LoadingText = styled.div`
-	color: white;
+	color: var(--foreground);
 	font-size: 1.25rem;
 	text-align: center;
 `
@@ -763,12 +763,12 @@ const CheckboxField = styled.div`
 	gap: 0.75rem;
 	margin-top: 1rem;
 	padding-top: 1.5rem;
-	border-top: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: 1px solid var(--border);
 `
 
 const CheckboxLabel = styled.label`
 	font-size: 0.875rem;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(var(--foreground-rgb), 0.9);
 	cursor: pointer;
 	line-height: 1.5;
 `
diff --git a/app/talk/page.tsx b/app/talk/page.tsx
index 71a9f88..799e1c0 100644
--- a/app/talk/page.tsx
+++ b/app/talk/page.tsx
@@ -82,10 +82,10 @@ const FormContainer = styled.form`
 	max-width: 48rem;
 	margin: 0 auto;
 	padding: 2rem;
-	background-color: rgba(255, 255, 255, 0.05);
+	background-color: rgba(var(--foreground-rgb), 0.05);
 	backdrop-filter: blur(10px);
 	border-radius: 0.5rem;
-	border: 1px solid rgba(255, 255, 255, 0.1);
+	border: 1px solid var(--border);
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@@ -99,8 +99,8 @@ const TextArea = styled.textarea`
 	padding: 0.75rem;
 	border-radius: 0.375rem;
 	background-color: rgba(0, 0, 0, 0.8);
-	color: white;
-	border: 1px solid rgba(255, 255, 255, 0.2);
+	color: var(--foreground);
+	border: 1px solid rgba(var(--foreground-rgb), 0.2);
 	font-size: 1rem;
 	min-height: 8rem;
 	resize: vertical;
@@ -114,7 +114,7 @@ const TextArea = styled.textarea`
 	}
 
 	&::placeholder {
-		color: rgba(255, 255, 255, 0.5);
+		color: rgba(var(--foreground-rgb), 0.5);
 	}
 
 	&:disabled {
@@ -150,7 +150,7 @@ const Button = styled.button`
 
 const SubmitButton = styled(Button)`
 	background: linear-gradient(135deg, rgba(147, 51, 234, 0.8), rgba(99, 102, 241, 0.8));
-	color: white;
+	color: var(--foreground);
 
 	&:hover:not(:disabled) {
 		background: linear-gradient(135deg, rgba(147, 51, 234, 1), rgba(99, 102, 241, 1));
@@ -170,12 +170,12 @@ const ResetButton = styled.input`
 	font-weight: 500;
 	transition: all 0.2s;
 	cursor: pointer;
-	background-color: rgba(255, 255, 255, 0.1);
-	color: white;
-	border: 1px solid rgba(255, 255, 255, 0.2);
+	background-color: rgba(var(--foreground-rgb), 0.1);
+	color: var(--foreground);
+	border: 1px solid rgba(var(--foreground-rgb), 0.2);
 
 	&:hover:not(:disabled) {
-		background-color: rgba(255, 255, 255, 0.15);
+		background-color: rgba(var(--foreground-rgb), 0.15);
 		transform: translateY(-1px);
 	}
 
diff --git a/app/talk/submitted/page.tsx b/app/talk/submitted/page.tsx
index 6fc8486..301a7ec 100644
--- a/app/talk/submitted/page.tsx
+++ b/app/talk/submitted/page.tsx
@@ -29,10 +29,10 @@ const SuccessContainer = styled.div`
 	max-width: 30rem;
 	margin: 0 auto;
 	padding: 3rem;
-	background-color: rgba(255, 255, 255, 0.05);
+	background-color: rgba(var(--foreground-rgb), 0.05);
 	backdrop-filter: blur(10px);
 	border-radius: 0.5rem;
-	border: 1px solid rgba(255, 255, 255, 0.1);
+	border: 1px solid var(--border);
 	text-align: center;
 `
 
@@ -44,7 +44,7 @@ const SuccessTitle = styled.h1`
 `
 
 const SuccessMessage = styled.p`
-	color: #d1d5db;
+	color: var(--muted-foreground);
 	font-size: 1.125rem;
 	margin-bottom: 2rem;
 	line-height: 1.6;
@@ -54,7 +54,7 @@ const BackLink = styled.a`
 	display: inline-block;
 	padding: 0.75rem 1.5rem;
 	background-color: #8b5cf6;
-	color: white;
+	color: var(--foreground);
 	border-radius: 0.375rem;
 	text-decoration: none;
 	font-weight: 500;
diff --git a/app/watch/page.tsx b/app/watch/page.tsx
index 9144bf1..6422114 100644
--- a/app/watch/page.tsx
+++ b/app/watch/page.tsx
@@ -57,7 +57,9 @@ export default function Watch() {
 		<>
 			<BackgroundContainer>
 				<ErrorBoundary
-					fallback={<div style={{ backgroundColor: "black", width: "100%", height: "100%" }} />}
+					fallback={
+						<div style={{ backgroundColor: "var(--background)", width: "100%", height: "100%" }} />
+					}
 				>
 					<PotionBackground />
 				</ErrorBoundary>
@@ -119,10 +121,10 @@ Explore our collection of presentations from the community.`}
 											rel="noopener noreferrer"
 										>
 											<CardContent $padding="1rem 1rem">
-												<CardText $size="0.9rem" $color="#d1d5db" $weight="500">
+												<CardText $size="0.9rem" $color="var(--muted-foreground)" $weight="500">
 													{talk.title}
 												</CardText>
-												<CardText $size="0.85rem" $color="#9ca3af" $weight="600">
+												<CardText $size="0.85rem" $color="var(--subtle-foreground)" $weight="600">
 													{talk.speaker}
 												</CardText>
 											</CardContent>
@@ -150,7 +152,7 @@ Explore our collection of presentations from the community.`}
 // Styles
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -222,7 +224,7 @@ const HeroSection = styled.section`
 const HeroBlurb = styled.p`
 	font-size: 1.25rem;
 	line-height: 1.8;
-	color: #d1d5db;
+	color: var(--muted-foreground);
 	text-align: center;
 	max-width: 900px;
 	margin: 0;
@@ -255,8 +257,8 @@ const YearHeader = styled.h2`
 	font-weight: bold;
 	margin-bottom: 2rem;
 	text-align: center;
-	color: white;
-	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+	color: var(--foreground);
+	border-bottom: 2px solid rgba(var(--foreground-rgb), 0.2);
 	padding-bottom: 1rem;
 `
 
diff --git a/app/whois/ProfileDisplay.tsx b/app/whois/ProfileDisplay.tsx
index 36e4dfc..60c575a 100644
--- a/app/whois/ProfileDisplay.tsx
+++ b/app/whois/ProfileDisplay.tsx
@@ -408,7 +408,7 @@ export function ProfileDisplay({
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
diff --git a/app/whois/ProfileList.tsx b/app/whois/ProfileList.tsx
index 95d6533..52265bd 100644
--- a/app/whois/ProfileList.tsx
+++ b/app/whois/ProfileList.tsx
@@ -168,7 +168,7 @@ export function ProfileList() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -195,7 +195,7 @@ const ContentWrapper = styled.div`
 `
 
 const Title = styled.h1`
-	color: white;
+	color: var(--foreground);
 	font-size: 2.5rem;
 	font-weight: 700;
 	margin: 0;
@@ -203,7 +203,7 @@ const Title = styled.h1`
 `
 
 const EmptyState = styled.div`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 1.25rem;
 	text-align: center;
 	padding: 4rem 0;
@@ -226,12 +226,12 @@ const ProfileListItem = styled.div`
 `
 
 const LoadingText = styled.div`
-	color: white;
+	color: var(--foreground);
 	font-size: 1.2rem;
 `
 
 const LoadingMoreText = styled.div`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 1rem;
 	text-align: center;
 	padding: 2rem 0;
diff --git a/app/whois/ProfileNotFound.tsx b/app/whois/ProfileNotFound.tsx
index fcd660b..02dcd92 100644
--- a/app/whois/ProfileNotFound.tsx
+++ b/app/whois/ProfileNotFound.tsx
@@ -19,7 +19,7 @@ export function ProfileNotFound() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -49,12 +49,12 @@ const NotFoundContent = styled.div`
 const NotFoundTitle = styled.h1`
 	font-size: 6rem;
 	font-weight: 700;
-	color: white;
+	color: var(--foreground);
 	margin: 0;
 `
 
 const NotFoundText = styled.p`
-	color: rgba(255, 255, 255, 0.7);
+	color: rgba(var(--foreground-rgb), 0.7);
 	font-size: 1.25rem;
 	margin: 0;
 `
diff --git a/app/whois/page.tsx b/app/whois/page.tsx
index 7a562d3..3a61e2f 100644
--- a/app/whois/page.tsx
+++ b/app/whois/page.tsx
@@ -263,7 +263,7 @@ export default function Who() {
 }
 
 const BackgroundContainer = styled.section`
-	background-color: #0a0a0a;
+	background-color: var(--background);
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
@@ -282,6 +282,6 @@ const Container = styled.main`
 `
 
 const LoadingText = styled.div`
-	color: white;
+	color: var(--foreground);
 	font-size: 1.2rem;
 `