diff --git a/public/zday-screenshot.jpg b/public/zday-screenshot.jpg
new file mode 100644
index 0000000..633b7fd
Binary files /dev/null and b/public/zday-screenshot.jpg differ
diff --git a/src/components/Games.tsx b/src/components/Games.tsx
index 8386c6b..3f51d8a 100644
--- a/src/components/Games.tsx
+++ b/src/components/Games.tsx
@@ -13,14 +13,13 @@ export default function Games() {
         <div className="max-w-2xl mx-auto">
           <div className="bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-xl border border-gray-100 dark:border-gray-800">
             {/* Game banner */}
-            <div className="relative h-48 bg-gradient-to-br from-gray-800 via-gray-700 to-red-900 flex items-center justify-center overflow-hidden">
-              <div className="absolute inset-0 flex items-center justify-center opacity-10">
-                <div className="grid grid-cols-8 gap-1">
-                  {Array.from({ length: 64 }).map((_, i) => (
-                    <div key={i} className="w-6 h-6 bg-white rounded-sm" />
-                  ))}
-                </div>
-              </div>
+            <div className="relative h-56 flex items-center justify-center overflow-hidden">
+              <img
+                src="/zday-screenshot.jpg"
+                alt="Z-DAY gameplay"
+                className="absolute inset-0 w-full h-full object-cover object-center"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/10" />
               <div className="relative text-center">
                 <p className="text-6xl font-black text-white tracking-widest drop-shadow-lg">Z-DAY</p>
                 <div className="mt-1 inline-block bg-red-500/80 text-white text-xs font-bold px-3 py-0.5 rounded-full uppercase tracking-wider">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e91d785..818e0ad 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -25,9 +25,8 @@ export default function Header({ theme, onToggleTheme }: Props) {
     <header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur border-b border-gray-200 dark:border-gray-800">
       <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
         {/* Logo */}
-        <a href="#" className="flex items-center gap-2 font-bold text-xl tracking-tight">
-          <span className="text-orange-500">Kai</span>
-          <span className="text-gray-900 dark:text-white">Soft</span>
+        <a href="#" className="flex items-center font-bold text-xl tracking-tight">
+          <span className="text-orange-500">Kai</span><span className="text-gray-900 dark:text-white">Soft</span>
         </a>
 
         {/* Desktop nav */}
diff --git a/src/index.css b/src/index.css
index 4e31e69..db91c2d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@variant dark (&:where(.dark, .dark *));
+
 @layer base {
   :root {
     --accent: #f97316;