diff --git a/src/routes/match/[id]/+layout.svelte b/src/routes/match/[id]/+layout.svelte
index b810020..6bac483 100644
--- a/src/routes/match/[id]/+layout.svelte
+++ b/src/routes/match/[id]/+layout.svelte
@@ -48,8 +48,9 @@
 	<!-- Background Image -->
 	<div class="absolute inset-0">
 		<img src={mapBg} alt={mapName} class="h-full w-full object-cover" onerror={handleImageError} />
-		<!-- Stronger gradient overlay for better text contrast -->
-		<div class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/85 to-black/75"></div>
+		<!-- Multi-layer gradient overlay for depth and framing -->
+		<div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/40"></div>
+		<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-black/70"></div>
 	</div>
 
 	<div class="container relative mx-auto px-4 py-8">
@@ -65,84 +66,69 @@
 		</div>
 
 		<!-- Map Name -->
-		<div class="mb-4 flex items-center justify-between">
+		<div class="mb-6 flex items-center justify-between">
 			<div>
-				{#if match.map}
-					<Badge variant="default" size="lg">{match.map}</Badge>
-				{/if}
-				<h1
-					class="mt-2 text-4xl font-bold text-white"
-					style="text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7);"
-				>
+				<h1 class="text-5xl font-bold text-white drop-shadow-2xl">
 					{mapName}
 				</h1>
 			</div>
 			{#if match.demo_parsed}
 				<button
-					class="btn gap-2 bg-primary/90 text-primary-content backdrop-blur-sm hover:bg-primary"
+					class="btn btn-ghost gap-2 border border-white/25 bg-white/15 text-white backdrop-blur-md hover:bg-white/25"
 				>
 					<Download class="h-4 w-4" />
-					Download Demo
+					<span class="hidden sm:inline">Download Demo</span>
 				</button>
 			{/if}
 		</div>
 
-		<!-- Score -->
-		<div class="mb-6 flex items-center justify-center gap-6">
-			<div class="text-center">
-				<div
-					class="text-sm font-medium uppercase tracking-wider text-white"
-					style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
-				>
-					Terrorists
-				</div>
-				<div
-					class="font-mono text-5xl font-bold text-terrorist"
-					style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
-				>
-					{match.score_team_a}
-				</div>
-			</div>
-			<div class="text-3xl font-bold text-white" style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);">
-				:
-			</div>
-			<div class="text-center">
-				<div
-					class="text-sm font-medium uppercase tracking-wider text-white"
-					style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
-				>
-					Counter-Terrorists
-				</div>
-				<div
-					class="font-mono text-5xl font-bold text-ct"
-					style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
-				>
-					{match.score_team_b}
-				</div>
-			</div>
-		</div>
-
-		<!-- Match Meta -->
+		<!-- Hero Info Panel with translucent background -->
 		<div
-			class="flex flex-wrap items-center justify-center gap-4 text-sm text-white"
-			style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
+			class="mx-auto max-w-3xl rounded-xl border border-white/10 bg-black/40 p-6 backdrop-blur-md"
 		>
-			<div class="flex items-center gap-2">
-				<Calendar class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
-				<span>{formattedDate}</span>
+			<!-- Score -->
+			<div class="mb-4 flex items-center justify-center gap-8">
+				<div class="text-center">
+					<div class="mb-1 text-xs font-medium uppercase tracking-wider text-white/70">
+						Terrorists
+					</div>
+					<div class="font-mono text-6xl font-bold text-terrorist drop-shadow-lg">
+						{match.score_team_a}
+					</div>
+				</div>
+				<div class="text-4xl font-bold text-white/50">:</div>
+				<div class="text-center">
+					<div class="mb-1 text-xs font-medium uppercase tracking-wider text-white/70">
+						Counter-Terrorists
+					</div>
+					<div class="font-mono text-6xl font-bold text-ct drop-shadow-lg">
+						{match.score_team_b}
+					</div>
+				</div>
 			</div>
-			<div class="flex items-center gap-2">
-				<Clock class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
-				<span>{duration}</span>
+
+			<!-- Match Meta -->
+			<div class="flex flex-wrap items-center justify-center gap-3 text-sm text-white/90">
+				<div class="flex items-center gap-1.5">
+					<Calendar class="h-3.5 w-3.5" />
+					<span>{formattedDate}</span>
+				</div>
+				<span class="text-white/30">•</span>
+				<div class="flex items-center gap-1.5">
+					<Clock class="h-3.5 w-3.5" />
+					<span>{duration}</span>
+				</div>
+				<span class="text-white/30">•</span>
+				<span>MR12 ({match.max_rounds} rounds)</span>
+				{#if match.demo_parsed}
+					<span class="text-white/30">•</span>
+					<Badge variant="success" size="sm">Demo Parsed</Badge>
+				{/if}
 			</div>
-			<Badge variant="info" size="sm">MR12 ({match.max_rounds} rounds)</Badge>
-			{#if match.demo_parsed}
-				<Badge variant="success" size="sm">Demo Parsed</Badge>
-			{/if}
 		</div>
 
 		<!-- Tabs -->
-		<div class="mt-6 rounded-lg bg-black/70 p-4 backdrop-blur-md">
+		<div class="mt-6 rounded-lg border border-white/10 bg-black/35 p-4 backdrop-blur-lg">
 			<Tabs {tabs} variant="bordered" size="md" />
 		</div>
 	</div>