diff --git a/index.html b/index.html
index 5106b754..039068ab 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,87 @@
     <link rel="stylesheet" href="/index.css">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Press+Start+2P&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
+    <style>
+        :root {
+            /* Light mode variables */
+            --background-color-light: #ffffff;
+            --text-color-light: #000000;
+            --button-bg-light: #f0f0f0;
+            --button-hover-bg-light: #e0e0e0;
+            --button-hover-text-light: #000000;
+
+            /* Dark mode variables (consistent with WebGames-master) */
+            --background-color-dark: #0d1117;
+            --text-color-dark: #c9d1d9;
+            --button-bg-dark: #21262d;
+            --button-hover-bg-dark: #30363d;
+            --button-hover-text-dark: #ffffff;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            font-family: 'Orbitron', sans-serif;
+            text-align: center;
+        }
+
+        .button-container {
+            margin-top: 20px;
+        }
+
+        .button {
+            padding: 10px 20px;
+            margin: 5px;
+            background-color: var(--button-bg);
+            color: var(--text-color);
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        .button:hover {
+            background-color: var(--button-hover-bg);
+            color: var(--button-hover-text);
+        }
+
+        .dark-mode-toggle {
+            margin-top: 20px;
+            padding: 10px 20px;
+            background-color: var(--button-bg);
+            color: var(--text-color);
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        .dark-mode-toggle:hover {
+            background-color: var(--button-hover-bg);
+            color: var(--button-hover-text);
+        }
+
+        .calendar-button {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            padding: 10px 15px;
+            background-color: var(--button-bg);
+            color: var(--text-color);
+            border: none;
+            border-radius: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        .calendar-button:hover {
+            background-color: var(--button-hover-bg);
+            color: var(--button-hover-text);
+        }
+    </style>
 </head>
 <body>
     <h1>Moon Gaming</h1>
@@ -18,6 +99,9 @@
         <button class="button" id="gamesComingSoonButton" onclick="location.href='./gametoadd.html'">Coming Soon</button>
     </div>
 
+    <!-- Calendar Button -->
+    <button class="calendar-button" onclick="location.href='cal.html'">Calendar</button>
+
     <script>
         // Utility function to set a cookie
         function setCookie(name, value, days) {
@@ -55,6 +139,13 @@
             }
         }
 
+        // Toggle dark mode
+        function toggleDarkMode() {
+            const darkModeEnabled = getCookie('darkMode') === 'true';
+            setCookie('darkMode', !darkModeEnabled, 30);
+            applyDarkMode(!darkModeEnabled);
+        }
+
         // Ensure dark mode is the default
         if (getCookie('darkMode') === null) {
             setCookie('darkMode', 'true', 30); // Default to dark mode
@@ -63,65 +154,6 @@
         // Apply saved mode on load
         const darkModeEnabled = getCookie('darkMode') === 'true';
         applyDarkMode(darkModeEnabled);
-
-        // Clock Functionality
-        function updateClock() {
-            const now = new Date();
-            const hours = String(now.getHours()).padStart(2, '0');
-            const minutes = String(now.getMinutes()).padStart(2, '0');
-            const seconds = String(now.getSeconds()).padStart(2, '0');
-            const timeString = `${hours}:${minutes}:${seconds}`;
-            const dateString = now.toDateString(); // Get the current date as a string
-            document.getElementById('clock').innerHTML = `${dateString} <br> ${timeString}`;
-        }
-
-        // Update the clock every second
-        setInterval(updateClock, 1000);
-        updateClock(); // Initialize clock immediately
-
-        // Ensure FPS Counter is enabled by default
-        if (getCookie('fpsCounter') === null) {
-            setCookie('fpsCounter', 'true', 30); // Default to enabled
-        }
-
-        // Check if FPS Counter is enabled
-        const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
-
-        if (fpsCounterEnabled) {
-            const fpsCounter = document.getElementById('fpsCounter');
-            let lastFrameTime = performance.now();
-            let frames = 0;
-
-            function calculateFPS() {
-                const now = performance.now();
-                frames++;
-
-                if (now - lastFrameTime >= 1000) {
-                    const fps = Math.round(frames / ((now - lastFrameTime) / 1000));
-                    fpsCounter.textContent = `FPS: ${fps}`;
-                    frames = 0;
-                    lastFrameTime = now;
-                }
-
-                requestAnimationFrame(calculateFPS);
-            }
-
-            calculateFPS(); // Start FPS calculation
-        }
-
-        // Check if Date and Time is enabled
-        const dateTimeEnabled = getCookie('dateTime') === 'true';
-
-        if (dateTimeEnabled) {
-            document.getElementById('clock').style.display = 'block'; // Show the clock
-        }
-
-        // Check if "Games Coming Soon" is enabled
-        const gamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
-
-        if (gamesComingSoonEnabled) {
-            document.getElementById('gamesComingSoonButton').style.display = 'inline-block'; // Show the button
-        }
     </script>
 </body>
 </html>
