diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index b806b51..02c887f 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,87 +1,174 @@
 <script lang="ts">
 	import { Github, Heart, Code, Zap } from 'lucide-svelte';
-	import Card from '$lib/components/ui/Card.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 </script>
 
 <svelte:head>
 	<title>About - teamflash.rip</title>
 </svelte:head>
 
-<div class="container mx-auto max-w-4xl px-4 py-12">
-	<h1 class="mb-8 text-4xl font-bold">About teamflash.rip</h1>
-
-	<Card padding="lg" class="mb-8">
-		<h2 class="mb-4 text-2xl font-semibold">Our Mission</h2>
-		<p class="mb-4 text-base-content/80">
-			teamflash.rip is a free and open-source platform for analyzing Counter-Strike 2 matchmaking
-			matches. We're on a mission to expose every teammate who ever threw a flashbang backwards.
-		</p>
-		<p class="text-base-content/80">
-			Originally created for CS:GO, we've completely rewritten the platform to support CS2 with
-			modern technologies and the ability to track exactly who ruined your retake with a poorly
-			timed flash.
-		</p>
-	</Card>
-
-	<div class="mb-8 grid gap-6 md:grid-cols-3">
-		<Card padding="lg">
-			<Code class="mb-3 h-8 w-8 text-primary" />
-			<h3 class="mb-2 text-xl font-semibold">Open Source</h3>
-			<p class="text-sm text-base-content/70">
-				Built by the community, for the community. All code is available on GitHub.
-			</p>
-		</Card>
-
-		<Card padding="lg">
-			<Heart class="mb-3 h-8 w-8 text-error" />
-			<h3 class="mb-2 text-xl font-semibold">Free Forever</h3>
-			<p class="text-sm text-base-content/70">
-				No paywalls, no premium features. Everyone gets full access to all flash crime statistics.
-			</p>
-		</Card>
-
-		<Card padding="lg">
-			<Zap class="mb-3 h-8 w-8 text-warning" />
-			<h3 class="mb-2 text-xl font-semibold">Community Driven</h3>
-			<p class="text-sm text-base-content/70">
-				Contributions welcome! Help us shame more team-flashers together.
-			</p>
-		</Card>
+<div class="relative min-h-screen bg-void">
+	<!-- Decorative Background -->
+	<div class="pointer-events-none absolute inset-0 overflow-hidden">
+		<!-- Blur orbs -->
+		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>
+		<div
+			class="absolute -right-40 top-40 h-80 w-80 rounded-full bg-neon-purple/10 blur-[100px]"
+		></div>
+		<div
+			class="absolute bottom-20 left-1/2 h-60 w-60 rounded-full bg-neon-gold/5 blur-[80px]"
+		></div>
+		<!-- Grid pattern -->
+		<div
+			class="absolute inset-0 opacity-20"
+			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: 60px 60px;"
+		></div>
 	</div>
 
-	<Card padding="lg" class="mb-8">
-		<h2 class="mb-4 text-2xl font-semibold">Technology Stack</h2>
-		<div class="grid gap-4 md:grid-cols-2">
-			<div>
-				<h3 class="mb-2 font-semibold text-primary">Frontend</h3>
-				<ul class="space-y-1 text-sm text-base-content/80">
-					<li>• SvelteKit 2.0 + Svelte 5</li>
-					<li>• TypeScript (Strict Mode)</li>
-					<li>• Tailwind CSS + DaisyUI</li>
-					<li>• Vitest + Playwright</li>
-				</ul>
+	<!-- Content -->
+	<div class="container relative z-10 mx-auto max-w-4xl px-4 py-12">
+		<!-- Page Header -->
+		<h1
+			class="mb-8 text-4xl font-bold text-white"
+			style="text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);"
+		>
+			About teamflash.rip
+		</h1>
+
+		<!-- Mission Card -->
+		<div class="mb-8 rounded-xl border border-white/10 bg-void-light p-6">
+			<h2
+				class="mb-4 text-2xl font-semibold text-white"
+				style="text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);"
+			>
+				Our Mission
+			</h2>
+			<p class="mb-4 text-white/70">
+				teamflash.rip is a free and open-source platform for analyzing Counter-Strike 2 matchmaking
+				matches. We're on a mission to expose every teammate who ever threw a flashbang backwards.
+			</p>
+			<p class="text-white/70">
+				Originally created for CS:GO, we've completely rewritten the platform to support CS2 with
+				modern technologies and the ability to track exactly who ruined your retake with a poorly
+				timed flash.
+			</p>
+		</div>
+
+		<!-- Feature Cards -->
+		<div class="mb-8 grid gap-6 md:grid-cols-3">
+			<div
+				class="group rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 hover:border-neon-blue/50 hover:shadow-[0_0_20px_rgba(0,212,255,0.1)]"
+			>
+				<Code
+					class="mb-3 h-8 w-8 text-neon-blue"
+					style="filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));"
+				/>
+				<h3 class="mb-2 text-xl font-semibold text-white">Open Source</h3>
+				<p class="text-sm text-white/60">
+					Built by the community, for the community. All code is available on GitHub.
+				</p>
 			</div>
-			<div>
-				<h3 class="mb-2 font-semibold text-secondary">Backend</h3>
-				<ul class="space-y-1 text-sm text-base-content/80">
-					<li>• Go + Gin Framework</li>
-					<li>• PostgreSQL Database</li>
-					<li>• Redis Cache</li>
-					<li>• Demo Parser (flash crime evidence collector)</li>
-				</ul>
+
+			<div
+				class="group rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 hover:border-neon-red/50 hover:shadow-[0_0_20px_rgba(255,51,102,0.1)]"
+			>
+				<Heart
+					class="mb-3 h-8 w-8 text-neon-red"
+					style="filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.5));"
+				/>
+				<h3 class="mb-2 text-xl font-semibold text-white">Free Forever</h3>
+				<p class="text-sm text-white/60">
+					No paywalls, no premium features. Everyone gets full access to all flash crime statistics.
+				</p>
+			</div>
+
+			<div
+				class="group rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 hover:border-neon-gold/50 hover:shadow-[0_0_20px_rgba(255,170,0,0.1)]"
+			>
+				<Zap
+					class="mb-3 h-8 w-8 text-neon-gold"
+					style="filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.5));"
+				/>
+				<h3 class="mb-2 text-xl font-semibold text-white">Community Driven</h3>
+				<p class="text-sm text-white/60">
+					Contributions welcome! Help us shame more team-flashers together.
+				</p>
 			</div>
 		</div>
-	</Card>
 
-	<div class="flex justify-center gap-4">
-		<Button variant="primary" href="https://somegit.dev/CSGOWTF/csgowtf">
-			<Github class="mr-2 h-5 w-5" />
-			View on GitHub
-		</Button>
-		<Button variant="secondary" href="https://liberapay.com/CSGOWTF/">
-			<Heart class="mr-2 h-5 w-5" />
-			Support Us
-		</Button>
+		<!-- Technology Stack Card -->
+		<div class="mb-8 rounded-xl border border-white/10 bg-void-light p-6">
+			<h2
+				class="mb-4 text-2xl font-semibold text-white"
+				style="text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);"
+			>
+				Technology Stack
+			</h2>
+			<div class="grid gap-6 md:grid-cols-2">
+				<div>
+					<h3 class="mb-3 font-semibold text-neon-blue">Frontend</h3>
+					<ul class="space-y-2 text-sm text-white/70">
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							SvelteKit 2.0 + Svelte 5
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							TypeScript (Strict Mode)
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							Tailwind CSS + DaisyUI
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							Vitest + Playwright
+						</li>
+					</ul>
+				</div>
+				<div>
+					<h3 class="mb-3 font-semibold text-neon-purple">Backend</h3>
+					<ul class="space-y-2 text-sm text-white/70">
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							Go + Gin Framework
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							PostgreSQL Database
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							Redis Cache
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							Demo Parser (flash crime evidence collector)
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+
+		<!-- Action Buttons -->
+		<div class="flex flex-wrap justify-center gap-4">
+			<a
+				href="https://somegit.dev/CSGOWTF/csgowtf"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-2 rounded-lg bg-neon-blue px-6 py-3 font-medium text-void transition-all duration-300 hover:shadow-[0_0_25px_rgba(0,212,255,0.4)]"
+			>
+				<Github class="h-5 w-5" />
+				View on GitHub
+			</a>
+			<a
+				href="https://liberapay.com/CSGOWTF/"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-2 rounded-lg border border-neon-red/50 bg-neon-red/10 px-6 py-3 font-medium text-neon-red transition-all duration-300 hover:bg-neon-red/20 hover:shadow-[0_0_25px_rgba(255,51,102,0.3)]"
+			>
+				<Heart class="h-5 w-5" />
+				Support Us
+			</a>
+		</div>
 	</div>
 </div>