diff --git a/disease.html b/disease.html
index 6ac4fa35..fb285c9d 100644
--- a/disease.html
+++ b/disease.html
@@ -414,8 +414,8 @@ <h4>Quick Links</h4>
       <div class="footer-links">
         <h4>Tools</h4>
         <ul>
-          <li><a href="#">Crop Recommendation</a></li>
-          <li><a href="#">Yield Prediction</a></li>
+          <li><a href="crop_recommendation/templates/index.html">Crop Recommendation</a></li>
+          <li><a href="Crop Yield Prediction/crop_yield_app/templates/index.html">Yield Prediction</a></li>
           <li><a href="disease.html">Disease Detector</a></li>
         </ul>
       </div>
diff --git a/plantation.css b/plantation.css
index 243c3f44..7f243dca 100644
--- a/plantation.css
+++ b/plantation.css
@@ -1224,4 +1224,151 @@ a:focus,
   background-color: #22c55e;
   /* AgriTech green */
   box-shadow: 0 0 20px #22c55e;
-}
\ No newline at end of file
+}/* ==========================
+   THEME VARIABLES
+========================== */
+
+/* Light Theme (Default) */
+:root {
+  --bg-primary: #f8f9fa;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f0f2f5;
+
+  --text-primary: #2c3e50;
+  --text-secondary: #5a6c7d;
+
+  --border-color: #e1e8ed;
+
+  --primary-green: #2ecc71;
+  --dark-green: #27ae60;
+  --light-green: #58d68d;
+
+  --card-bg: #ffffff;
+
+  --shadow: 0 4px 15px rgba(0,0,0,0.08);
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+  --bg-primary: #121212;
+  --bg-secondary: #1e1e1e;
+  --bg-tertiary: #242424;
+
+  --text-primary: #e8eaed;
+  --text-secondary: #b8bdc3;
+
+  --border-color: #3a3a3a;
+
+  --primary-green: #2ecc71;
+  --dark-green: #1b5e20;
+  --light-green: #4ade80;
+
+  --card-bg: #1f2937;
+
+  --shadow: 0 4px 20px rgba(0,0,0,0.5);
+}
+
+/* ==========================
+   GLOBAL BODY
+========================== */
+
+body {
+  font-family: "Poppins", sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+/* ==========================
+   CARDS
+========================== */
+
+.info-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+  transition: 0.3s ease;
+}
+
+/* ==========================
+   HERO SECTION
+========================== */
+
+.hero-section {
+  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
+  color: white;
+}
+
+/* Dark mode hero */
+[data-theme="dark"] .hero-section {
+  background: linear-gradient(135deg, #1b5e20, #2e7d32);
+}
+
+/* ==========================
+   NAVIGATION
+========================== */
+
+.nav-links a {
+  color: var(--text-primary);
+}
+
+.nav-links a:hover {
+  color: var(--primary-green);
+}
+
+/* ==========================
+   SIDEBAR
+========================== */
+
+.sidebar {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+}
+
+/* ==========================
+   TAB BUTTONS
+========================== */
+
+.tab-btn {
+  color: var(--text-secondary);
+}
+
+.tab-btn.active {
+  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
+  color: white;
+}
+
+/* ==========================
+   FOOTER
+========================== */
+
+footer {
+  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
+  color: white;
+}
+
+[data-theme="dark"] footer {
+  background: linear-gradient(135deg, #1b5e20, #2e7d32);
+}
+
+/* ==========================
+   THEME TOGGLE BUTTON
+========================== */
+
+.theme-toggle {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  cursor: pointer;
+  border-radius: 999px;
+  padding: 8px 14px;
+}
+
+/* Icons */
+
+.sun-icon { display: none; }
+
+[data-theme="dark"] .sun-icon { display: inline; }
+[data-theme="dark"] .moon-icon { display: none; }
+
+:not([data-theme="dark"]) .moon-icon { display: inline; }
\ No newline at end of file
diff --git a/plantation.html b/plantation.html
index 588e098c..88b8cac0 100644
--- a/plantation.html
+++ b/plantation.html
@@ -1668,33 +1668,27 @@ <h4>Smart Tools</h4>
   }
 </style>
 
-<button id="globalBackToTop" title="Back to Top">↑</button>
-
 <script>
-  (function () {
-    const btn = document.getElementById("globalBackToTop");
-
-    // Show button after scrolling down
-    window.addEventListener("scroll", function () {
-      if (window.scrollY > 300) {
-        btn.style.display = "block";
-      } else {
-        btn.style.display = "none";
-      }
-    });
+(function () {
+  const btn = document.getElementById("globalBackToTop");
 
-    // Smooth scroll to top on click
-    btn.addEventListener("click", function () {
-      window.scrollTo({
-        top: 0,
-        behavior: "smooth"
-      });
+  if (!btn) return; // stop if button doesn't exist
+
+  window.addEventListener("scroll", function () {
+    if (window.scrollY > 300) {
+      btn.style.display = "block";
+    } else {
+      btn.style.display = "none";
+    }
+  });
+
+  btn.addEventListener("click", function () {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
     });
-  })();
+  });
+})();
 </script>
-<script src="plantation.js"></script>
-<script src="theme.js"></script>
-<!-- ===== End Back To Top Button ===== -->
-
-  </body>
+</body>
 </html>
\ No newline at end of file
diff --git a/plantation.js b/plantation.js
index a761d4de..c9e59267 100644
--- a/plantation.js
+++ b/plantation.js
@@ -502,4 +502,24 @@ function animateCursor() {
 
     requestAnimationFrame(animateCursor);
 }
-animateCursor();
\ No newline at end of file
+animateCursor();const toggleBtn = document.getElementById("theme-toggle-btn");
+
+const savedTheme = localStorage.getItem("theme");
+
+if (savedTheme === "dark") {
+  document.documentElement.setAttribute("data-theme","dark");
+}
+
+toggleBtn.addEventListener("click", () => {
+
+  const currentTheme = document.documentElement.getAttribute("data-theme");
+
+  if (currentTheme === "dark") {
+    document.documentElement.removeAttribute("data-theme");
+    localStorage.setItem("theme","light");
+  } else {
+    document.documentElement.setAttribute("data-theme","dark");
+    localStorage.setItem("theme","dark");
+  }
+
+});
\ No newline at end of file
diff --git a/shopkeeper.css b/shopkeeper.css
index d1ca2371..cefcca16 100644
--- a/shopkeeper.css
+++ b/shopkeeper.css
@@ -1343,4 +1343,39 @@ body {
   transform: translate(-50%, -50%) scale(1.8);
   background-color: #22c55e; /* AgriTech green */
   box-shadow: 0 0 20px #22c55e;
+}/* Default Light Mode */
+body {
+  background: #ffffff;
+  color: #222;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background: #0f172a;
+  color: #f1f5f9;
+}
+
+/* Navbar */
+body.dark-mode .sticky-header {
+  background: #1e293b;
+}
+
+/* Cards */
+body.dark-mode .dealer-card {
+  background: #1e293b;
+  color: #f1f5f9;
+}
+
+/* Search input */
+body.dark-mode .search-input {
+  background: #0f172a;
+  color: white;
+  border: 1px solid #334155;
+}
+
+/* Footer */
+body.dark-mode .site-footer {
+  background: #020617;
+  color: #cbd5f5;
 }
\ No newline at end of file
diff --git a/shopkeeper.js b/shopkeeper.js
index c79886ab..b2397705 100644
--- a/shopkeeper.js
+++ b/shopkeeper.js
@@ -490,15 +490,55 @@ document.addEventListener("DOMContentLoaded", () => {
 document.addEventListener("touchstart", function () {}, {
   passive: true,
 });
-  document.getElementById("backToHomeBtn").addEventListener("click", () => {
-    // Preserve theme
+ // =============================
+// Back to Home Button
+// =============================
+const backBtn = document.getElementById("backToHomeBtn");
+
+if (backBtn) {
+  backBtn.addEventListener("click", () => {
     const currentTheme =
       document.documentElement.getAttribute("data-theme") || "light";
+
+    // Save theme preference
     localStorage.setItem("theme", currentTheme);
 
-    // Preserve scroll position of home page
+    // Save scroll position
     localStorage.setItem("homeScrollY", window.scrollY);
 
     // Navigate back
     window.location.href = "index.html";
-  });
\ No newline at end of file
+  });
+}
+
+// =============================
+// Theme Toggle System
+// =============================
+const toggleBtn = document.getElementById("theme-toggle-btn");
+const body = document.body;
+const themeText = document.querySelector(".theme-text");
+
+// Load saved theme on page load
+const savedTheme = localStorage.getItem("theme");
+
+if (savedTheme === "dark") {
+  body.classList.add("dark-mode");
+  if (themeText) themeText.textContent = "Dark";
+} else {
+  body.classList.remove("dark-mode");
+  if (themeText) themeText.textContent = "Light";
+}
+
+if (toggleBtn) {
+  toggleBtn.addEventListener("click", () => {
+    body.classList.toggle("dark-mode");
+
+    if (body.classList.contains("dark-mode")) {
+      localStorage.setItem("theme", "dark");
+      if (themeText) themeText.textContent = "Dark";
+    } else {
+      localStorage.setItem("theme", "light");
+      if (themeText) themeText.textContent = "Light";
+    }
+  });
+}
\ No newline at end of file