diff --git a/src/lib/components/layout/Footer.svelte b/src/lib/components/layout/Footer.svelte
index 0688edf..0e479b6 100644
--- a/src/lib/components/layout/Footer.svelte
+++ b/src/lib/components/layout/Footer.svelte
@@ -28,15 +28,27 @@
 	};
 </script>
 
-<footer class="border-t border-base-300 bg-base-100">
-	<div class="container mx-auto px-4 py-12">
+<footer class="relative border-t border-neon-blue/20 bg-void">
+	<!-- Grid Pattern Overlay -->
+	<div
+		class="pointer-events-none absolute inset-0 opacity-10"
+		style="background-image: linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px;"
+		aria-hidden="true"
+	></div>
+
+	<div class="container relative mx-auto px-4 py-12">
 		<div class="grid gap-8 md:grid-cols-4">
 			<!-- Brand -->
 			<div class="md:col-span-1">
-				<a href="/" class="mb-4 inline-block text-2xl font-bold">
-					<span class="text-primary">team</span><span class="text-secondary">flash.rip</span>
+				<a
+					href="/"
+					class="mb-4 inline-block rounded text-2xl font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue"
+				>
+					<span style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff;">team</span><span
+						style="color: #ffd700; text-shadow: 0 0 10px #ffd700;">flash.rip</span
+					>
 				</a>
-				<p class="mb-4 text-sm text-base-content/60">
+				<p class="mb-4 text-sm text-white/50">
 					Stop flashing your teammates. Free and open source.
 				</p>
 				<div class="flex gap-3">
@@ -44,34 +56,32 @@
 						href="https://somegit.dev/CSGOWTF/csgowtf"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="text-base-content/60 transition-colors hover:text-primary"
+						class="rounded text-white/50 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
 						aria-label="GitHub"
 					>
-						<Github class="h-5 w-5" />
+						<Github class="h-5 w-5" aria-hidden="true" />
 					</a>
 					<a
 						href="https://liberapay.com/CSGOWTF/"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="text-base-content/60 transition-colors hover:text-error"
+						class="rounded text-white/50 transition-colors hover:text-neon-red focus:outline-none focus-visible:text-neon-red"
 						aria-label="Support on Liberapay"
 					>
-						<Heart class="h-5 w-5" />
+						<Heart class="h-5 w-5" aria-hidden="true" />
 					</a>
 				</div>
 			</div>
 
 			<!-- Links -->
 			<div>
-				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
-					Navigate
-				</h3>
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">Navigate</h3>
 				<ul class="space-y-2">
 					{#each links.main as link}
 						<li>
 							<a
 								href={link.href}
-								class="text-sm text-base-content/60 transition-colors hover:text-primary"
+								class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
 							>
 								{link.name}
 							</a>
@@ -81,15 +91,13 @@
 			</div>
 
 			<div>
-				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
-					About
-				</h3>
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">About</h3>
 				<ul class="space-y-2">
 					{#each links.about as link}
 						<li>
 							<a
 								href={link.href}
-								class="text-sm text-base-content/60 transition-colors hover:text-primary"
+								class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
 							>
 								{link.name}
 							</a>
@@ -99,15 +107,13 @@
 			</div>
 
 			<div>
-				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
-					Resources
-				</h3>
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">Resources</h3>
 				<ul class="space-y-2">
 					{#each links.resources as link}
 						<li>
 							<a
 								href={link.href}
-								class="text-sm text-base-content/60 transition-colors hover:text-primary"
+								class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
 								{...link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
 							>
 								{link.name}
@@ -119,13 +125,18 @@
 		</div>
 
 		<!-- Bottom -->
-		<div class="mt-12 border-t border-base-300 pt-8 text-center text-sm text-base-content/60">
+		<div class="mt-12 border-t border-neon-blue/20 pt-8 text-center text-sm text-white/50">
 			<p>
 				© {currentYear} teamflash.rip Team. Licensed under
-				<a href="/license" class="hover:text-primary">GPL-3.0</a>
+				<a
+					href="/license"
+					class="rounded transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
+					>GPL-3.0</a
+				>
 			</p>
 			<p class="mt-2">
-				Made with <Heart class="inline h-4 w-4 text-error" /> by players who are tired of being flashed.
+				Made with <Heart class="inline h-4 w-4 text-neon-red" aria-hidden="true" /> by players who are
+				tired of being flashed.
 			</p>
 		</div>
 	</div>
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
index 1a5e9f9..49658a0 100644
--- a/src/lib/components/layout/Header.svelte
+++ b/src/lib/components/layout/Header.svelte
@@ -13,13 +13,19 @@
 	];
 </script>
 
-<header class="sticky top-0 z-50 w-full border-b border-base-300 bg-base-100/95 backdrop-blur-md">
+<header class="sticky top-0 z-50 w-full border-b border-neon-blue/20 bg-void/95 backdrop-blur-md">
 	<div class="container mx-auto px-4">
 		<div class="flex h-16 items-center justify-between">
 			<!-- Logo -->
-			<a href="/" class="transition-transform hover:scale-105" aria-label="teamflash.rip Home">
+			<a
+				href="/"
+				class="rounded transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:hover:scale-100"
+				aria-label="teamflash.rip Home"
+			>
 				<h1 class="text-2xl font-bold">
-					<span class="text-primary">team</span><span class="text-secondary">flash.rip</span>
+					<span style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff;">team</span><span
+						style="color: #ffd700; text-shadow: 0 0 10px #ffd700;">flash.rip</span
+					>
 				</h1>
 			</a>
 
@@ -28,7 +34,7 @@
 				{#each navigation as item}
 					<a
 						href={item.href}
-						class="text-sm font-medium text-base-content/70 transition-colors hover:text-primary"
+						class="rounded text-sm font-medium text-white/60 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
 					>
 						{item.name}
 					</a>
@@ -42,7 +48,7 @@
 
 				<!-- Mobile Menu Toggle -->
 				<button
-					class="btn btn-ghost btn-sm md:hidden"
+					class="rounded-lg p-2 text-white/70 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue md:hidden"
 					onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
 					aria-label="Toggle menu"
 				>
@@ -57,11 +63,11 @@
 
 		<!-- Mobile Navigation -->
 		{#if mobileMenuOpen}
-			<nav class="animate-fade-in border-t border-base-300 py-4 md:hidden">
+			<nav class="animate-fade-in border-t border-neon-blue/20 py-4 md:hidden">
 				{#each navigation as item}
 					<a
 						href={item.href}
-						class="block px-4 py-2 text-sm font-medium text-base-content transition-colors hover:bg-base-200"
+						class="mx-2 block rounded-lg px-4 py-2 text-sm font-medium text-white/60 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue"
 						onclick={() => (mobileMenuOpen = false)}
 					>
 						{item.name}