diff --git a/index.html b/index.html
index 06b3841..151a6b7 100644
--- a/index.html
+++ b/index.html
@@ -14,14 +14,15 @@
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
     <script src="/js/ga4.js"></script>
-    <script src="/js/darkmode.js"></script>
+    <script src="./js/darkmoderewrite.js"></script>
 
 </head>
 
 <body>
     <h1>Welcome to EaglerCraftX</h1 class="title">
 
-    <button id="dMode">Dark Mode (Not working yet)</button>
+    <label for="darkModeCheckbox">Dark Mode Checkbox</label>
+    <input type="checkbox" id="darkModeCheckbox">
 
 
     <p>Site views counter:</p>
diff --git a/js/darkmoderewrite.js b/js/darkmoderewrite.js
new file mode 100644
index 0000000..b34c854
--- /dev/null
+++ b/js/darkmoderewrite.js
@@ -0,0 +1,26 @@
+$(document).ready(function() {
+    function updateDarkMode() {
+        var isChecked = $("#darkModeCheckbox").is(":checked");
+        if (isChecked) {
+            const body = document.querySelector('body');
+            body.style.backgroundColor = '#404040';
+
+            const text = document.querySelector('.footer');
+            text.style.backgroundColor = 'grey';
+
+        } else {
+            const body = document.querySelector('body');
+            body.style.backgroundColor = '#f1f1f1';
+
+            const text = document.querySelector('.footer');
+            text.style.backgroundColor = '#ddd';
+
+        }
+    }
+
+    $("#darkModeCheckbox").on("change", function() {
+        updateDarkMode();
+    });
+
+    updateDarkMode();
+});
