diff --git a/index.html b/index.html
index 4330e86..73bf2a3 100644
--- a/index.html
+++ b/index.html
@@ -11,11 +11,10 @@
 <header>
     <h1>Expense Tracker</h1>
     <div class="dark-box">
-        <label class="switch">
-            <input type="checkbox" id="darkToggle">
-            <span class="slider"></span>
-        </label>
-    </div>
+    <button id="darkToggle" class="dark-mode-btn" aria-label="Toggle dark mode">
+        <span class="icon">🌙</span>
+    </button>
+</div>
 </header>
 
 <div class="container">
diff --git a/script.js b/script.js
index ad069da..b7c698f 100644
--- a/script.js
+++ b/script.js
@@ -3,20 +3,29 @@ let monthlyBudget = localStorage.getItem("monthlyBudget") || 0;
 let editIndex = -1;
 let expenseChart;
 
-const toggle = document.getElementById("darkToggle");
+const darkToggle = document.getElementById("darkToggle");
 
+// Set initial icon based on saved mode
 if (localStorage.getItem("darkMode") === "enabled") {
     document.body.classList.add("dark");
-    toggle.checked = true;
+    darkToggle.querySelector('.icon').textContent = '☀️';
+} else {
+    darkToggle.querySelector('.icon').textContent = '🌙';
 }
 
-toggle.addEventListener("change", function () {
+darkToggle.addEventListener("click", function () {
     document.body.classList.toggle("dark");
-    localStorage.setItem("darkMode",
-        document.body.classList.contains("dark") ? "enabled" : "disabled"
-    );
+    const icon = darkToggle.querySelector('.icon');
+    
+    // Update button icon based on mode
+    if (document.body.classList.contains("dark")) {
+        icon.textContent = '☀️';  // Sun for dark mode (to switch to light)
+        localStorage.setItem("darkMode", "enabled");
+    } else {
+        icon.textContent = '🌙';  // Moon for light mode (to switch to dark)
+        localStorage.setItem("darkMode", "disabled");
+    }
 });
-
 function saveData() {
     localStorage.setItem("expenses", JSON.stringify(expenses));
     localStorage.setItem("monthlyBudget", monthlyBudget);
diff --git a/style.css b/style.css
index 4592895..41198ee 100644
--- a/style.css
+++ b/style.css
@@ -23,8 +23,35 @@ header {
 
 .dark-box {
     background: white;
-    padding: 5px 12px;
-    border-radius: 20px;
+    padding: 5px 15px;
+    border-radius: 30px;
+}
+
+.dark-mode-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 20px;
+    padding: 5px 10px;
+    transition: all 0.3s ease;
+}
+
+.dark-mode-btn .icon {
+    display: inline-block;
+    transition: transform 0.3s ease;
+}
+
+.dark-mode-btn:hover .icon {
+    transform: scale(1.1);
+}
+
+/* Dark mode styles for the button */
+.dark .dark-box {
+    background: #333;
+}
+
+.dark .dark-mode-btn {
+    color: #ffd700;
 }
 
 .switch {