diff --git a/index.html b/index.html
index a21e477..07fbd09 100644
--- a/index.html
+++ b/index.html
@@ -22,25 +22,55 @@
       position: relative;
       background: url('pogo-wallpaper.jpg') no-repeat center center fixed;
       background-size: cover;
+      transition: background-color 0.4s, color 0.4s;
     }
     body::before {
       content: '';
       position: fixed;
       top: 0; left: 0;
       width: 100%; height: 100%;
-      background: rgba(255, 255, 255, 0.8); /* overlay to keep text readable */
+      background: rgba(255, 255, 255, 0.8);
       background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 0);
       background-size: 20px 20px;
       opacity: 0.8;
       z-index: -1;
+      transition: background 0.4s, opacity 0.4s;
+    }
+    .dark body::before { 
+      background: rgba(0,0,0,0.7);
+      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
+      opacity: 0.9;
+    }
+    .dark-mode {
+      background-color: #0f172a;
+      color: #f1f5f9;
+    }
+    .dark-mode .bg-white { background-color: #1e293b !important; }
+    .dark-mode .text-slate-900 { color: #f1f5f9 !important; }
+    .dark-mode .text-slate-500, 
+    .dark-mode .text-slate-600 { color: #cbd5e1 !important; }
+    .dark-mode .border-slate-200 { border-color: #334155 !important; }
+    .dark-mode input { background-color: #334155; color: #f1f5f9; }
+    .dark-mode #progress-bar { background-color: #38bdf8 !important; }
+    .dark-mode #theme-toggle { color: #facc15; }
+    #theme-toggle {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+      font-size: 1.5rem;
+      cursor: pointer;
+      transition: transform 0.3s;
+    }
+    #theme-toggle:hover {
+      transform: scale(1.2);
     }
-    .cursor-pointer { cursor: pointer; }
     #edit-xp { display: inline-block; transform: scaleX(-1); }
   </style>
 </head>
-<body class="flex items-center justify-center min-h-screen p-4">
+<body class="flex items-center justify-center min-h-screen p-4 transition-colors duration-500">
 
-  <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-slate-200 text-center">
+  <div id="main-card" class="relative w-full max-w-md bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-slate-200 text-center">
+    <div id="theme-toggle">☀️</div>
     <img src="pogo.png" alt="Pokémon GO" class="mx-auto mb-4 w-32 h-auto">
     <h1 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">Pokémon GO Level Calculator</h1>
     <p class="text-slate-500 mb-6">Enter your total XP to see your level</p>
@@ -154,6 +184,17 @@
     document.getElementById('xp-input').addEventListener('input', (e)=>{
       e.target.value = e.target.value.replace(/[^0-9,]/g,'');
     });
+
+    const themeToggle = document.getElementById('theme-toggle');
+    const mainCard = document.getElementById('main-card');
+    themeToggle.addEventListener('click', () => {
+      document.body.classList.toggle('dark-mode');
+      if (document.body.classList.contains('dark-mode')) {
+        themeToggle.textContent = '🌙';
+      } else {
+        themeToggle.textContent = '☀️';
+      }
+    });
   </script>
 
 </body>