diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index dea054e..ee903f0 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -2,7 +2,7 @@
 
 :root {
   /* Backgrounds */
-  --background: #0a0a0a;
+  --background: #0B0F19;
   --foreground: #ffffff;
 
   /* Cards & Surfaces */
@@ -10,13 +10,13 @@
   --card-hover: #1f1f23;
   --card-foreground: #ffffff;
 
-  /* Primary Blue Scale */
-  --primary-50: #eff6ff;
-  --primary-100: #dbeafe;
-  --primary-400: #60a5fa;
-  --primary-500: #3b82f6;
-  --primary-600: #2563eb;
-  --primary-700: #1d4ed8;
+  /* Primary Cyan/Neon Scale */
+  --primary-50: #ecfeff;
+  --primary-100: #cffafe;
+  --primary-400: #22d3ee;
+  --primary-500: #00F0FF;
+  --primary-600: #00d4e0;
+  --primary-700: #00b8c4;
 
   /* Semantic Colors */
   --success: #22c55e;
@@ -29,7 +29,7 @@
   /* Neutrals */
   --secondary: #27272a;
   --muted: #71717a;
-  --accent: #3b82f6;
+  --accent: #00F0FF;
 
   /* Typography Scale */
   --font-size-xs: 0.75rem;
@@ -57,7 +57,8 @@
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
+  --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.3);
+  --shadow-glow-strong: 0 0 15px rgba(0, 240, 255, 0.5), 0 0 30px rgba(0, 240, 255, 0.3);
 
   /* Border Radius */
   --radius-sm: 0.375rem;
@@ -176,10 +177,10 @@ body {
 /* Pulse glow effect */
 @keyframes pulse-glow {
   0%, 100% {
-    box-shadow: 0 0 5px var(--primary-500), 0 0 10px var(--primary-500);
+    box-shadow: 0 0 5px rgba(0, 240, 255, 0.4), 0 0 10px rgba(0, 240, 255, 0.2);
   }
   50% {
-    box-shadow: 0 0 20px var(--primary-500), 0 0 30px var(--primary-500);
+    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 0 30px rgba(0, 240, 255, 0.3);
   }
 }
 
@@ -262,14 +263,16 @@ body {
 
 /* Button styles */
 .btn-primary {
-  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
-  box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
-  transition: all 0.2s ease-out;
+  background: var(--primary-500);
+  color: #0B0F19;
+  font-weight: 700;
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5), 0 0 30px rgba(0, 240, 255, 0.3);
+  transition: all 0.3s ease-out;
 }
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 25px rgba(0, 240, 255, 0.8), 0 0 40px rgba(0, 240, 255, 0.5);
 }
 
 .btn-primary:active {
@@ -293,26 +296,80 @@ body {
 
 .card-hover:hover {
   transform: translateY(-4px);
-  border-color: rgba(59, 130, 246, 0.5);
-  box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.2);
+  border-color: rgba(0, 240, 255, 0.5);
+  box-shadow: 0 10px 40px -10px rgba(0, 240, 255, 0.2);
 }
 
 /* Glassmorphism */
 .glass {
-  background: rgba(24, 24, 27, 0.7);
+  background: rgba(17, 24, 39, 0.6);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Neon border card */
+.neon-card {
+  background: rgba(17, 24, 39, 0.6);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 240, 255, 0.3);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
+  transition: all 0.3s ease;
+}
+
+.neon-card:hover {
+  border-color: rgba(0, 240, 255, 0.8);
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
+  transform: translateY(-4px);
 }
 
 /* Gradient text */
 .gradient-text {
-  background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);
+  background: linear-gradient(135deg, #00F0FF 0%, #00b8c4 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+/* Hero ping display */
+.ping-display {
+  border: 1px solid #00F0FF;
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
+  background: rgba(17, 24, 39, 0.8);
+  position: relative;
+  overflow: hidden;
+}
+
+.ping-display::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, transparent 100%);
+}
+
+/* Corner decorations for ping display */
+.corner-decoration {
+  position: absolute;
+  width: 2rem;
+  height: 2px;
+  background: rgba(0, 240, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 1);
+}
+
+.corner-decoration::after {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 2rem;
+  background: rgba(0, 240, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 1);
+}
+
+.corner-tl { top: 1rem; left: 1rem; }
+.corner-tl::after { top: 0; left: 0; }
+.corner-br { bottom: 1rem; right: 1rem; }
+.corner-br::after { bottom: 0; right: 0; }
+
 /* Focus styles for accessibility */
 .focus-ring {
   outline: none;
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 937b5fe..8aa5743 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -17,122 +17,165 @@ export default function Home() {
 
       <main id="main-content">
         {/* Hero Section */}
-        <section className="max-w-6xl mx-auto px-4 py-16 md:py-24 text-center">
-          {/* Open Source Trust Badge */}
-          <div className="inline-flex items-center gap-3 bg-zinc-800/80 border border-zinc-700 rounded-full px-5 py-2.5 mb-4 fade-in">
-            <div className="flex items-center gap-2">
-              <Shield className="w-4 h-4 text-green-500" />
-              <span className="text-sm font-medium text-green-400">100% Open Source</span>
-            </div>
-            <span className="text-zinc-600">|</span>
-            <div className="flex items-center gap-3">
-              <a
-                href="https://github.com/bokiko/pingdiff"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-zinc-400 hover:text-white transition"
-              >
-                <Github className="w-4 h-4" />
-                GitHub
-              </a>
-              <a
-                href="https://gitlab.com/bokiko/pingdiff"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-zinc-400 hover:text-orange-400 transition"
-              >
-                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M23.955 13.587l-1.342-4.135-2.664-8.189a.455.455 0 00-.867 0L16.418 9.45H7.582L4.918 1.263a.455.455 0 00-.867 0L1.386 9.45.044 13.587a.924.924 0 00.331 1.023L12 23.054l11.625-8.443a.92.92 0 00.33-1.024"/>
-                </svg>
-                GitLab
-              </a>
-            </div>
-          </div>
+        <section className="max-w-6xl mx-auto px-4 py-16 md:py-24 relative">
+          {/* Background glow */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-[#00F0FF]/5 rounded-full blur-[120px] pointer-events-none" />
 
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 leading-tight fade-in-delay-1">
-            Know Your Connection
-            <br />
-            <span className="gradient-text">Before You Queue</span>
-          </h1>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+            {/* Text Content */}
+            <div className="space-y-8 z-10 text-center lg:text-left">
+              {/* Open Source Trust Badge */}
+              <div className="inline-flex items-center gap-3 bg-zinc-800/80 border border-zinc-700 rounded-full px-5 py-2.5 fade-in">
+                <div className="flex items-center gap-2">
+                  <Shield className="w-4 h-4 text-green-500" />
+                  <span className="text-sm font-medium text-green-400">100% Open Source</span>
+                </div>
+                <span className="text-zinc-600">|</span>
+                <div className="flex items-center gap-3">
+                  <a
+                    href="https://github.com/bokiko/pingdiff"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 text-sm text-zinc-400 hover:text-white transition"
+                  >
+                    <Github className="w-4 h-4" />
+                    GitHub
+                  </a>
+                </div>
+              </div>
 
-          <p className="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed fade-in-delay-2">
-            Test your ping to game servers across multiple regions at once.
-            Compare EU vs NA vs ASIA and find your best server instantly.
-          </p>
+              <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight fade-in-delay-1">
+                <span className="bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent">
+                  KNOW YOUR
+                </span>
+                <br />
+                <span className="gradient-text">CONNECTION</span>
+              </h1>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center fade-in-delay-3">
-            <Link
-              href="/download"
-              className="inline-flex items-center justify-center gap-2 btn-primary px-8 py-4 rounded-xl font-semibold text-lg focus-ring"
-            >
-              <Download className="w-5 h-5" />
-              Download for Windows
-            </Link>
-            <Link
-              href="/dashboard"
-              className="inline-flex items-center justify-center gap-2 btn-secondary px-8 py-4 rounded-xl font-semibold text-lg focus-ring"
-            >
-              View Dashboard
-            </Link>
+              <p className="text-lg text-zinc-400 max-w-lg leading-relaxed fade-in-delay-2">
+                PingDiff ensures you always know your true connection quality.
+                Test, compare, and optimize your network for competitive gaming.
+              </p>
+
+              <div className="pt-2 fade-in-delay-3">
+                <Link
+                  href="/download"
+                  className="inline-flex items-center justify-center gap-2 btn-primary px-8 py-4 rounded-md text-lg uppercase tracking-wider focus-ring"
+                >
+                  <Download className="w-5 h-5" />
+                  Get PingDiff Free
+                </Link>
+              </div>
+            </div>
+
+            {/* Ping Display Visual */}
+            <div className="relative z-10 flex justify-center lg:justify-end fade-in-delay-2">
+              <div className="relative w-full max-w-md aspect-video rounded-xl ping-display flex items-center justify-center">
+                <div className="corner-decoration corner-tl" />
+                <div className="corner-decoration corner-br" />
+                <div className="text-center z-10">
+                  <span className="text-4xl md:text-5xl font-bold font-mono text-[#00F0FF] drop-shadow-[0_0_15px_rgba(0,240,255,0.8)]">
+                    PING: 18ms
+                  </span>
+                </div>
+              </div>
+            </div>
           </div>
 
           {/* Stats */}
-          <div className="grid grid-cols-3 gap-4 md:gap-8 max-w-2xl mx-auto mt-16 pt-8 border-t border-zinc-800">
-            <div className="slide-up" style={{ animationDelay: "0.4s" }}>
-              <div className="text-2xl md:text-3xl font-bold text-blue-500">10k+</div>
+          <div className="grid grid-cols-3 gap-4 md:gap-8 max-w-2xl mx-auto mt-16 pt-8 border-t border-white/10">
+            <div className="slide-up text-center" style={{ animationDelay: "0.4s" }}>
+              <div className="text-2xl md:text-3xl font-bold text-[#00F0FF]">10k+</div>
               <div className="text-zinc-500 text-xs md:text-sm">Tests Run</div>
             </div>
-            <div className="slide-up" style={{ animationDelay: "0.5s" }}>
-              <div className="text-2xl md:text-3xl font-bold text-green-500">50+</div>
+            <div className="slide-up text-center" style={{ animationDelay: "0.5s" }}>
+              <div className="text-2xl md:text-3xl font-bold text-[#00F0FF]">50+</div>
               <div className="text-zinc-500 text-xs md:text-sm">ISPs Tracked</div>
             </div>
-            <div className="slide-up" style={{ animationDelay: "0.6s" }}>
-              <div className="text-2xl md:text-3xl font-bold text-purple-500">8</div>
+            <div className="slide-up text-center" style={{ animationDelay: "0.6s" }}>
+              <div className="text-2xl md:text-3xl font-bold text-[#00F0FF]">8</div>
               <div className="text-zinc-500 text-xs md:text-sm">Server Regions</div>
             </div>
           </div>
         </section>
 
-        {/* Features Section */}
-        <section className="bg-zinc-900/50 py-16 md:py-24" aria-labelledby="features-heading">
+        {/* Features Section - Neon Cards */}
+        <section className="max-w-6xl mx-auto px-4 py-16 md:py-24" aria-labelledby="features-heading">
+          <div className="grid md:grid-cols-3 gap-6 md:gap-8">
+            {/* Feature 1 */}
+            <div className="neon-card rounded-xl p-8 flex flex-col items-center text-center">
+              <div className="w-16 h-16 rounded-full border border-[#00F0FF]/30 flex items-center justify-center mb-6 text-[#00F0FF]">
+                <Zap className="w-8 h-8" />
+              </div>
+              <h3 className="text-xl font-bold text-white mb-3">Real Ping Tests</h3>
+              <p className="text-sm text-zinc-400 leading-relaxed">
+                Execute accurate ICMP and TCP ping tests directly to game servers to see your true latency.
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="neon-card rounded-xl p-8 flex flex-col items-center text-center">
+              <div className="w-16 h-16 rounded-full border border-[#00F0FF]/30 flex items-center justify-center mb-6 text-[#00F0FF]">
+                <Globe className="w-8 h-8" />
+              </div>
+              <h3 className="text-xl font-bold text-white mb-3">ISP Intelligence</h3>
+              <p className="text-sm text-zinc-400 leading-relaxed">
+                Analyze routing paths and identify potential bottlenecks caused by your Internet Service Provider.
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <div className="neon-card rounded-xl p-8 flex flex-col items-center text-center">
+              <div className="w-16 h-16 rounded-full border border-[#00F0FF]/30 flex items-center justify-center mb-6 text-[#00F0FF]">
+                <TrendingUp className="w-8 h-8" />
+              </div>
+              <h3 className="text-xl font-bold text-white mb-3">Multi-Region Compare</h3>
+              <p className="text-sm text-zinc-400 leading-relaxed">
+                Simultaneously check your connection quality across multiple regional data centers.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Why PingDiff Section */}
+        <section className="py-16 md:py-24" aria-labelledby="why-heading">
           <div className="max-w-6xl mx-auto px-4">
-            <h2 id="features-heading" className="text-2xl md:text-3xl font-bold text-center mb-4">Why PingDiff?</h2>
+            <h2 id="why-heading" className="text-3xl font-bold text-center mb-4 tracking-wider uppercase">
+              Why PingDiff?
+            </h2>
             <p className="text-zinc-400 text-center mb-12 max-w-2xl mx-auto">
               Stop guessing. Start knowing. Get real data about your connection before every game.
             </p>
 
-            <div className="grid md:grid-cols-3 gap-6 md:gap-8">
-              {/* Feature 1 */}
-              <div className="bg-zinc-800/50 border border-zinc-700 rounded-xl p-6 card-hover">
-                <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
-                  <Zap className="w-6 h-6 text-blue-500" />
+            <div className="grid md:grid-cols-3 gap-8">
+              <div className="glass p-6 rounded-lg border border-white/10 hover:border-[#00F0FF]/50 transition-colors group">
+                <div className="flex flex-col items-center text-center space-y-4">
+                  <div className="text-[#00F0FF] group-hover:scale-110 transition-transform">
+                    <Zap className="w-10 h-10" />
+                  </div>
+                  <h4 className="text-lg font-semibold text-white">Real Ping Tests</h4>
+                  <p className="text-sm text-zinc-400">Stop relying on misleading in-game meters. Get raw network data.</p>
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Real Ping Tests</h3>
-                <p className="text-zinc-400 leading-relaxed">
-                  Test actual game server IPs with ICMP ping. Get real latency numbers, not estimates.
-                </p>
               </div>
 
-              {/* Feature 2 */}
-              <div className="bg-zinc-800/50 border border-zinc-700 rounded-xl p-6 card-hover">
-                <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
-                  <Globe className="w-6 h-6 text-green-500" />
+              <div className="glass p-6 rounded-lg border border-white/10 hover:border-[#00F0FF]/50 transition-colors group">
+                <div className="flex flex-col items-center text-center space-y-4">
+                  <div className="text-[#00F0FF] group-hover:scale-110 transition-transform">
+                    <Globe className="w-10 h-10" />
+                  </div>
+                  <h4 className="text-lg font-semibold text-white">ISP Intelligence</h4>
+                  <p className="text-sm text-zinc-400">Know exactly when your provider is routing you inefficiently.</p>
                 </div>
-                <h3 className="text-xl font-semibold mb-2">ISP Intelligence</h3>
-                <p className="text-zinc-400 leading-relaxed">
-                  See how your ISP performs. Get recommendations based on what works for players like you.
-                </p>
               </div>
 
-              {/* Feature 3 */}
-              <div className="bg-zinc-800/50 border border-zinc-700 rounded-xl p-6 card-hover">
-                <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
-                  <TrendingUp className="w-6 h-6 text-purple-500" />
+              <div className="glass p-6 rounded-lg border border-white/10 hover:border-[#00F0FF]/50 transition-colors group">
+                <div className="flex flex-col items-center text-center space-y-4">
+                  <div className="text-[#00F0FF] group-hover:scale-110 transition-transform">
+                    <TrendingUp className="w-10 h-10" />
+                  </div>
+                  <h4 className="text-lg font-semibold text-white">Multi-Region Compare</h4>
+                  <p className="text-sm text-zinc-400">Find the optimal server location before you queue up.</p>
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Multi-Region Compare</h3>
-                <p className="text-zinc-400 leading-relaxed">
-                  Test EU, NA, and ASIA at once. Results ranked by ping so you know exactly where to play.
-                </p>
               </div>
             </div>
           </div>
@@ -141,7 +184,7 @@ export default function Home() {
         {/* Open Source Trust Section */}
         <section className="py-16 md:py-24">
           <div className="max-w-6xl mx-auto px-4">
-            <div className="bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-zinc-700 rounded-2xl p-8 md:p-12">
+            <div className="neon-card rounded-2xl p-8 md:p-12">
               <div className="flex flex-col md:flex-row items-center gap-8">
                 <div className="flex-shrink-0">
                   <div className="w-20 h-20 bg-green-500/20 rounded-2xl flex items-center justify-center">
@@ -161,7 +204,7 @@ export default function Home() {
                       <span className="text-zinc-300">No Tracking</span>
                     </div>
                     <div className="flex items-center gap-2 text-sm">
-                      <Lock className="w-4 h-4 text-blue-500" />
+                      <Lock className="w-4 h-4 text-[#00F0FF]" />
                       <span className="text-zinc-300">Privacy First</span>
                     </div>
                     <div className="flex items-center gap-2 text-sm">
@@ -199,151 +242,109 @@ export default function Home() {
 
         {/* How It Works */}
         <section className="py-16 md:py-24" aria-labelledby="how-it-works-heading">
-          <div className="max-w-6xl mx-auto px-4">
-            <h2 id="how-it-works-heading" className="text-2xl md:text-3xl font-bold text-center mb-4">How It Works</h2>
+          <div className="max-w-5xl mx-auto px-4">
+            <h2 id="how-it-works-heading" className="text-3xl font-bold text-center mb-4 tracking-wider uppercase">
+              How It Works
+            </h2>
             <p className="text-zinc-400 text-center mb-12">
               Three simple steps to better gaming
             </p>
 
-            <div className="grid md:grid-cols-3 gap-8 md:gap-12">
-              <div className="text-center group">
-                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg shadow-blue-500/25 group-hover:scale-110 transition-transform">
+            <div className="flex flex-col md:flex-row items-center justify-between gap-4 relative">
+              {/* Connecting line (desktop) */}
+              <div className="hidden md:block absolute top-1/2 left-[10%] right-[10%] h-[1px] bg-white/10 -translate-y-1/2 -z-10" />
+
+              {/* Step 1 */}
+              <div className="glass w-full md:w-1/3 p-6 rounded-xl border border-white/5 relative">
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#00F0FF] text-[#0B0F19] font-bold flex items-center justify-center text-sm shadow-[0_0_20px_rgba(0,240,255,0.4)]">
                   1
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Download</h3>
-                <p className="text-zinc-400">
-                  Get the lightweight app (under 20MB). Run the installer and launch from Start Menu.
-                </p>
+                <div className="text-center mt-4">
+                  <h4 className="text-lg font-semibold text-white mb-2">Download</h4>
+                  <p className="text-sm text-zinc-400">Get the lightweight app. Run the installer and launch from Start Menu.</p>
+                </div>
+              </div>
+
+              {/* Arrow (mobile) */}
+              <div className="md:hidden text-[#00F0FF] py-2">
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 14l-7 7m0 0l-7-7m7 7V3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" /></svg>
+              </div>
+              {/* Arrow (desktop) */}
+              <div className="hidden md:block text-[#00F0FF] bg-[#0B0F19] px-2 z-10">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M14 5l7 7m0 0l-7 7m7-7H3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" /></svg>
               </div>
 
-              <div className="text-center group">
-                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg shadow-blue-500/25 group-hover:scale-110 transition-transform">
+              {/* Step 2 */}
+              <div className="glass w-full md:w-1/3 p-6 rounded-xl border border-white/5 relative">
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#00F0FF] text-[#0B0F19] font-bold flex items-center justify-center text-sm shadow-[0_0_20px_rgba(0,240,255,0.4)]">
                   2
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Test</h3>
-                <p className="text-zinc-400">
-                  Select multiple regions to compare (EU + NA + ASIA). Results in seconds.
-                </p>
+                <div className="text-center mt-4">
+                  <h4 className="text-lg font-semibold text-white mb-2">Test</h4>
+                  <p className="text-sm text-zinc-400">Select multiple regions to compare. PingDiff runs diagnostics to server endpoints.</p>
+                </div>
               </div>
 
-              <div className="text-center group">
-                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg shadow-blue-500/25 group-hover:scale-110 transition-transform">
+              {/* Arrow (mobile) */}
+              <div className="md:hidden text-[#00F0FF] py-2">
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 14l-7 7m0 0l-7-7m7 7V3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" /></svg>
+              </div>
+              {/* Arrow (desktop) */}
+              <div className="hidden md:block text-[#00F0FF] bg-[#0B0F19] px-2 z-10">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M14 5l7 7m0 0l-7 7m7-7H3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" /></svg>
+              </div>
+
+              {/* Step 3 */}
+              <div className="glass w-full md:w-1/3 p-6 rounded-xl border border-white/5 relative">
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#00F0FF] text-[#0B0F19] font-bold flex items-center justify-center text-sm shadow-[0_0_20px_rgba(0,240,255,0.4)]">
                   3
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Know</h3>
-                <p className="text-zinc-400">
-                  See results ranked by ping. Find your best server across all regions instantly.
-                </p>
+                <div className="text-center mt-4">
+                  <h4 className="text-lg font-semibold text-white mb-2">Know</h4>
+                  <p className="text-sm text-zinc-400">Review results ranked by ping. Find your best server across all regions.</p>
+                </div>
               </div>
             </div>
           </div>
         </section>
 
         {/* Supported Games */}
-        <section className="bg-zinc-900/50 py-16 md:py-24" aria-labelledby="supported-games-heading">
-          <div className="max-w-6xl mx-auto px-4 text-center">
-            <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-2 mb-4" aria-hidden="true">
+        <section className="py-16 md:py-24" aria-labelledby="supported-games-heading">
+          <div className="max-w-5xl mx-auto px-4 text-center">
+            <div className="inline-flex items-center gap-2 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-full px-4 py-2 mb-4" aria-hidden="true">
               <span className="relative flex h-2 w-2">
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                 <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
               </span>
-              <span className="text-sm text-blue-400">9 games • 141 servers worldwide</span>
+              <span className="text-sm text-[#00F0FF]">9 games &bull; 141 servers worldwide</span>
             </div>
-            <h2 id="supported-games-heading" className="text-2xl md:text-3xl font-bold mb-4">Supported Games</h2>
+            <h2 id="supported-games-heading" className="text-3xl font-bold mb-4 tracking-wider uppercase">Supported Games</h2>
             <p className="text-zinc-400 mb-12">
               Test your connection to your favorite games. More coming soon.
             </p>
 
-            <div className="flex justify-center gap-6 md:gap-8 flex-wrap">
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-orange-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <span className="text-2xl font-bold text-orange-500">OW2</span>
-                </div>
-                <h3 className="font-semibold mb-2">Overwatch 2</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-zinc-700/50 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/activision/ffffff" alt="Call of Duty" className="w-10 h-10" />
-                </div>
-                <h3 className="font-semibold mb-2">Call of Duty</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-red-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/valorant/FF4655" alt="Valorant" className="w-10 h-10" />
-                </div>
-                <h3 className="font-semibold mb-2">Valorant</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-yellow-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/counterstrike/F7B93E" alt="Counter-Strike 2" className="w-10 h-10" />
-                </div>
-                <h3 className="font-semibold mb-2">Counter-Strike 2</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-blue-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/ea/ffffff" alt="Battlefield 6" className="w-10 h-10" />
-                </div>
-                <h3 className="font-semibold mb-2">Battlefield 6</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-red-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <span className="text-2xl font-bold text-red-500">MR</span>
-                </div>
-                <h3 className="font-semibold mb-2">Marvel Rivals</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-purple-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/fortnite/a855f7" alt="Fortnite" className="w-10 h-10" />
-                </div>
-                <h3 className="font-semibold mb-2">Fortnite</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-amber-500/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/leagueoflegends/C28F2C" alt="League of Legends" className="w-10 h-10" />
-                </div>
-                <h3 className="font-semibold mb-2">League of Legends</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
-
-              <div className="bg-zinc-800 border border-zinc-700 rounded-xl p-6 w-44 md:w-48 card-hover">
-                <div className="w-16 h-16 bg-red-600/20 rounded-xl mx-auto mb-4 flex items-center justify-center">
-                  <img src="https://cdn.simpleicons.org/ea/ED1C24" alt="Apex Legends" className="w-10 h-10" />
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 lg:gap-6">
+              {[
+                { name: "Valorant", abbr: "VAL", color: "text-red-500" },
+                { name: "Overwatch 2", abbr: "OW2", color: "text-orange-500" },
+                { name: "Apex Legends", abbr: "APX", color: "text-red-400" },
+                { name: "CS 2", abbr: "CS2", color: "text-amber-500" },
+                { name: "League of Legends", abbr: "LOL", color: "text-amber-400" },
+                { name: "Fortnite", abbr: "FN", color: "text-purple-500" },
+              ].map((game) => (
+                <div
+                  key={game.name}
+                  className="glass rounded-xl p-6 flex flex-col items-center justify-center border border-white/5 hover:border-white/20 transition-all hover:-translate-y-1 aspect-video group cursor-default"
+                >
+                  <div className="w-16 h-16 bg-zinc-800/50 rounded-xl mx-auto mb-4 flex items-center justify-center">
+                    <span className={`text-2xl font-bold ${game.color}`}>{game.abbr}</span>
+                  </div>
+                  <h3 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{game.name}</h3>
+                  <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
+                    Active
+                  </span>
                 </div>
-                <h3 className="font-semibold mb-2">Apex Legends</h3>
-                <span className="text-xs text-green-500 bg-green-500/20 px-3 py-1 rounded-full font-medium">
-                  Active
-                </span>
-              </div>
+              ))}
             </div>
           </div>
         </section>
@@ -351,8 +352,8 @@ export default function Home() {
         {/* CTA Section */}
         <section className="py-16 md:py-24">
           <div className="max-w-4xl mx-auto px-4 text-center">
-            <div className="w-20 h-20 bg-blue-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6 float">
-              <TrendingUp className="w-10 h-10 text-blue-500" />
+            <div className="w-20 h-20 bg-[#00F0FF]/20 rounded-2xl flex items-center justify-center mx-auto mb-6 float">
+              <TrendingUp className="w-10 h-10 text-[#00F0FF]" />
             </div>
             <h2 className="text-2xl md:text-3xl font-bold mb-4">Ready to Improve Your Game?</h2>
             <p className="text-zinc-400 mb-8 max-w-xl mx-auto leading-relaxed">
@@ -361,7 +362,7 @@ export default function Home() {
             </p>
             <Link
               href="/download"
-              className="inline-flex items-center gap-2 btn-primary px-8 py-4 rounded-xl font-semibold text-lg focus-ring"
+              className="inline-flex items-center gap-2 btn-primary px-8 py-4 rounded-md font-semibold text-lg uppercase tracking-wider focus-ring"
             >
               <Download className="w-5 h-5" />
               Get PingDiff Free
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 8d67242..8d06bbd 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -3,10 +3,10 @@ import { Activity } from "lucide-react";
 
 export function Footer() {
   return (
-    <footer className="border-t border-zinc-800 py-8 mt-16">
+    <footer className="border-t border-white/10 py-8 mt-16">
       <div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4">
         <div className="flex items-center gap-2">
-          <Activity className="w-5 h-5 text-blue-500" />
+          <Activity className="w-5 h-5 text-[#00F0FF]" />
           <span className="font-semibold">PingDiff</span>
           <span className="text-zinc-500 text-sm">© 2026</span>
         </div>
diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
index 9bb534b..aa6bc36 100644
--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@@ -24,11 +24,13 @@ export function Navbar() {
   const isDownload = (href: string) => href === "/download";
 
   return (
-    <nav className="border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm sticky top-0 z-50" aria-label="Main navigation">
+    <nav className="border-b border-white/5 bg-[#0B0F19]/80 backdrop-blur-md sticky top-0 z-50" aria-label="Main navigation">
       <div className="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
         <Link href="/" className="flex items-center gap-2 focus-ring rounded-lg">
-          <Activity className="w-7 h-7 md:w-8 md:h-8 text-blue-500" />
-          <span className="text-lg md:text-xl font-bold">PingDiff</span>
+          <div className="w-8 h-8 bg-[#00F0FF] rounded-sm shadow-[0_0_20px_rgba(0,240,255,0.4)] flex items-center justify-center">
+            <Activity className="w-5 h-5 text-[#0B0F19]" />
+          </div>
+          <span className="text-lg md:text-xl font-bold tracking-tight">PingDiff</span>
         </Link>
 
         {/* Mobile menu button */}