diff --git a/css/style.css b/css/style.css
index e712f47..8426ce8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -71,7 +71,7 @@ main{
     margin-right: auto;
 }
 
-#change-theme{
+/* #change-theme{
     padding: 10px 15px;
     border-radius: 50px;
     background-color: var(--orange);
@@ -87,4 +87,41 @@ main{
 }
 #change-theme:hover{
     background-color: transparent;
-}
\ No newline at end of file
+} */
+
+.checkbox {
+    opacity: 0;
+    position: absolute;
+  }
+  
+ .checkbox-label {
+    background-color: #111;
+    width: 50px;
+    height: 26px;
+    border-radius: 50px;
+    position: relative;
+    padding: 5px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .fa-moon {color: #f1c40f;}
+  
+  .fa-sun {color: #f39c12;}
+  
+  .checkbox-label .ball {
+    background-color: #fff;
+    width: 22px;
+    height: 22px;
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    border-radius: 50%;
+    transition: transform 0.2s linear;
+  }
+  
+  .checkbox:checked + .checkbox-label .ball {
+    transform: translateX(24px);
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 63a1dfe..f713b8c 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,13 @@
         </a>
       </div>
       <div class="theme-toggle">
-        <button id="change-theme">Toggle theme</button>
+        <!-- <button id="change-theme">Toggle theme</button> -->
+        <input type="checkbox" class="checkbox" id="checkbox">
+        <label for="checkbox" class="checkbox-label">
+          <i class="fas fa-moon"></i>
+          <i class="fas fa-sun"></i>
+          <span class="ball"></span>
+        </label>
       </div>
 
       <div class="nav-links">
diff --git a/js/toggle-theme.js b/js/toggle-theme.js
index a910556..12ca64e 100644
--- a/js/toggle-theme.js
+++ b/js/toggle-theme.js
@@ -1,4 +1,9 @@
-var theme=document.getElementById("change-theme");
-theme.onclick=function(){
-    document.body.classList.toggle("light-theme");
-}
\ No newline at end of file
+// var theme=document.getElementById("change-theme");
+// theme.onclick=function(){
+//     document.body.classList.toggle("light-theme");
+// }
+
+const checkbox = document.getElementById("checkbox")
+checkbox.addEventListener("change", () => {
+  document.body.classList.toggle("light-theme")
+})
\ No newline at end of file