diff --git a/src/app.html b/src/app.html
index 4158c07..0f3625c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,15 +1,17 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="cs2dark">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
 		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
-		<meta name="theme-color" content="#0f172a" />
-		<meta name="description" content="Statistics for CS2 matchmaking matches" />
+		<meta name="theme-color" content="#0a0a0f" />
+		<meta name="color-scheme" content="dark" />
+		<meta name="darkreader-lock" />
+		<meta name="description" content="Track flashbang statistics in CS2. Expose team flashers." />
 		%sveltekit.head%
 	</head>
-	<body>
+	<body class="bg-void text-white">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
index 49658a0..42a369d 100644
--- a/src/lib/components/layout/Header.svelte
+++ b/src/lib/components/layout/Header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Menu, X } from 'lucide-svelte';
 	import SearchBar from './SearchBar.svelte';
-	import ThemeToggle from './ThemeToggle.svelte';
 
 	let mobileMenuOpen = $state(false);
 
@@ -44,7 +43,6 @@
 			<!-- Search & Actions -->
 			<div class="flex items-center gap-2">
 				<SearchBar />
-				<ThemeToggle />
 
 				<!-- Mobile Menu Toggle -->
 				<button
diff --git a/src/lib/components/layout/ThemeToggle.svelte b/src/lib/components/layout/ThemeToggle.svelte
deleted file mode 100644
index 9ff779a..0000000
--- a/src/lib/components/layout/ThemeToggle.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-	import { Moon, Sun, Monitor } from 'lucide-svelte';
-	import { preferences } from '$lib/stores';
-	import { browser } from '$app/environment';
-	import { onMount } from 'svelte';
-
-	const themes = [
-		{ value: 'cs2light', label: 'Light', icon: Sun },
-		{ value: 'cs2dark', label: 'Dark', icon: Moon },
-		{ value: 'auto', label: 'Auto', icon: Monitor }
-	] as const;
-
-	// Get current theme data
-	const currentTheme = $derived(themes.find((t) => t.value === $preferences.theme) || themes[2]);
-
-	const applyTheme = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
-		if (!browser) return;
-
-		let actualTheme = theme;
-
-		if (theme === 'auto') {
-			const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-			actualTheme = isDark ? 'cs2dark' : 'cs2light';
-		}
-
-		document.documentElement.setAttribute('data-theme', actualTheme);
-	};
-
-	const handleThemeChange = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
-		preferences.setTheme(theme);
-		applyTheme(theme);
-	};
-
-	// Apply theme on mount and when system preference changes
-	onMount(() => {
-		applyTheme($preferences.theme);
-
-		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-		const handler = () => {
-			if ($preferences.theme === 'auto') {
-				applyTheme('auto');
-			}
-		};
-
-		mediaQuery.addEventListener('change', handler);
-		return () => mediaQuery.removeEventListener('change', handler);
-	});
-</script>
-
-<!-- Theme Toggle Dropdown -->
-<div class="dropdown dropdown-end">
-	<button tabindex="0" class="btn btn-circle btn-ghost" aria-label="Theme">
-		<currentTheme.icon class="h-5 w-5" />
-	</button>
-	<ul class="menu dropdown-content z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow-lg">
-		{#each themes as theme}
-			<li>
-				<button
-					class:active={$preferences.theme === theme.value}
-					onclick={() => handleThemeChange(theme.value)}
-				>
-					<theme.icon class="h-4 w-4" />
-					{theme.label}
-					{#if theme.value === 'auto'}
-						<span class="text-xs text-base-content/60">(System)</span>
-					{/if}
-				</button>
-			</li>
-		{/each}
-	</ul>
-</div>
