diff --git a/css/index.css b/css/index.css
index 05ab953..ec8680b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,6 +1,5 @@
 body {
     font-family: 'Arial', sans-serif;
-    background: rgb(0,0,0);
     background: linear-gradient(39deg, rgba(0,0,0,1) 0%, rgba(128,3,251,1) 20%, rgba(107,6,255,1) 40%, rgba(88,31,255,1) 60%, rgba(43,0,255,1) 80%, rgba(0,0,0,1) 100%);
     margin: 0;
     padding: 0;
diff --git a/index.html b/index.html
index 96ac70f..f2f794a 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,12 @@
     <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2593894696548093" crossorigin="anonymous"></script>
     <script src="js/ga4.js"></script> <!-- if you put the ga4 script in ANY other file, put a "/" before "js" -->
-    <script src="js/darkmoderewrite.js"></script>
+    <script src="js/darkmode.js"></script>
   </head>
   <body style="background-color: rgb(241, 241, 241); color: black;">
     <h1 style="color: black;">Welcome to EaglerCraftX</h1>
-    <button type="button" onclick="darkmode()">Dark Mode Enable</button>
+    <label for="darkModeCheckbox">Dark Mode Checkbox</label>
+    <input type="checkbox" id="darkModeCheckbox">
 
 <script>
 function darkmode()
diff --git a/js/darkmoderewrite.js b/js/darkmode.js
similarity index 72%
rename from js/darkmoderewrite.js
rename to js/darkmode.js
index d2d7266..0b0e577 100644
--- a/js/darkmoderewrite.js
+++ b/js/darkmode.js
@@ -3,8 +3,10 @@ $(document).ready(function() {
         var isChecked = $("#darkModeCheckbox").is(":checked");
         if (isChecked) {
             const body = document.querySelector('body');
-            body.style.backgroundColor = '#141414';
-            body.style.color = '#f1f1f1';
+            //body.style.backgroundColor = '#141414';
+            //body.style.color = '#f1f1f1';
+            body.style = 'background: linear-gradient(39deg, rgba(0,0,0,1) 0%, rgba(128,3,251,1) 20%, rgba(107,6,255,1) 40%, rgba(88,31,255,1) 60%, rgba(43,0,255,1) 80%, rgba(0,0,0,1) 100%);';
+            // linear-gradient(39deg, rgba(0,0,0,1) 0%, rgba(128,3,251,1) 20%, rgba(107,6,255,1) 40%, rgba(88,31,255,1) 60%, rgba(43,0,255,1) 80%, rgba(0,0,0,1) 100%);
 
             const paragraphs = document.querySelectorAll('p');
             paragraphs.forEach(function(p) {
@@ -35,8 +37,10 @@ $(document).ready(function() {
 
         } else {
             const body = document.querySelector('body');
-            body.style.backgroundColor = '#f1f1f1';
-            body.style.color = 'black';
+            //body.style.backgroundColor = '#f1f1f1';
+            //body.style.color = 'black';
+            body.style = 'background: linear-gradient(100deg, rgba(0,0,0,1) 0%, rgba(128,3,251,1) 20%, rgba(107,6,255,1) 40%, rgba(88,31,255,1) 60%, rgba(43,0,255,1) 80%, rgba(0,0,0,1) 100%);';
+            // linear-gradient(39deg, rgba(0,0,0,1) 0%, rgba(128,3,251,1) 20%, rgba(107,6,255,1) 40%, rgba(88,31,255,1) 60%, rgba(43,0,255,1) 80%, rgba(0,0,0,1) 100%);
 
             const paragraphs = document.querySelectorAll('p');
             paragraphs.forEach(function(p) {
