diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 9bd1ce70..ab3b3348 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -1,15 +1,22 @@
-#searchBar { 
-	background-image: url('/images/search.svg'); 
-	background-position: 16px 16px; 
-	background-repeat: no-repeat; 
-	width: 100%; 
-	font-size: 16px; 
+#searchBar {
+	background-image: url('/images/search.svg');
+	background-position: 16px 16px;
+	background-repeat: no-repeat;
+	width: 100%;
+	font-size: 16px;
 	margin-bottom: 12px;
-	padding: 12px 20px 12px 40px; 
+	padding: 12px 20px 12px 40px;
 	border: 1px solid #ddd;
-	
-	
+
+
 }
+.dark-mode-search {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' hei… 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
+    color: #f8f9fa !important;
+    background-color: #212529 !important;
+    border-color: #343a40 !important;
+  }
+
 
 
 .features-container {
@@ -25,10 +32,10 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    background: rgba(13, 110, 253, 0.05); 
+    background: rgba(13, 110, 253, 0.05);
     transition: transform 0.3s, border 0.3s;
     transform-origin: center center;
-    outline: 2px solid transparent; 
+    outline: 2px solid transparent;
 }
 
 .feature-card a {
diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js
index ebf9c683..e7c3b402 100644
--- a/src/main/resources/static/js/darkmode.js
+++ b/src/main/resources/static/js/darkmode.js
@@ -1,90 +1,98 @@
-var toggleCount = 0;
-var lastToggleTime = Date.now();
+var toggleCount = 0
+var lastToggleTime = Date.now()
 
 var elements = {
-	lightModeStyles: null,
-	darkModeStyles: null,
-	rainbowModeStyles: null,
-	darkModeIcon: null
-};
+  lightModeStyles: null,
+  darkModeStyles: null,
+  rainbowModeStyles: null,
+  darkModeIcon: null,
+}
 
 function getElements() {
-	elements.lightModeStyles = document.getElementById("light-mode-styles");
-	elements.darkModeStyles = document.getElementById("dark-mode-styles");
-	elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
-	elements.darkModeIcon = document.getElementById("dark-mode-icon");
+  elements.lightModeStyles = document.getElementById("light-mode-styles")
+  elements.darkModeStyles = document.getElementById("dark-mode-styles")
+  elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles")
+  elements.darkModeIcon = document.getElementById("dark-mode-icon")
+  elements.searchBar = document.getElementById("searchBar")
+  elements.formControls = document.querySelectorAll(".form-control")
 }
 
 function setMode(mode) {
-	var event = new CustomEvent('modeChanged', { detail: mode });
-    document.dispatchEvent(event);
-	elements.lightModeStyles.disabled = mode !== "off";
-	elements.darkModeStyles.disabled = mode !== "on";
-	elements.rainbowModeStyles.disabled = mode !== "rainbow";
-	var jumbotron = document.getElementById('jumbotron');
-	if (mode === "on") {
-        elements.darkModeIcon.src = "moon.svg";
-        // Add the table-dark class to tables for dark mode
-        var tables = document.querySelectorAll('.table');
-        tables.forEach(table => {
-            table.classList.add('table-dark');
-        });
-        if(jumbotron) {
-        	jumbotron.classList.add('bg-dark');
-        	jumbotron.classList.remove('bg-light');
-    	}
-    } else if (mode === "off") {
-        elements.darkModeIcon.src = "sun.svg";
-        // Remove the table-dark class for light mode
-        var tables = document.querySelectorAll('.table-dark');
-        tables.forEach(table => {
-            table.classList.remove('table-dark');
-        });
-        if(jumbotron){
-			console.log(mode)
-         	jumbotron.classList.remove('bg-dark');
-         	jumbotron.classList.add('bg-light');
-     	}
-    } else if (mode === "rainbow") {
-		elements.darkModeIcon.src = "rainbow.svg";
-	}
+  var event = new CustomEvent("modeChanged", { detail: mode })
+  document.dispatchEvent(event)
+  elements.lightModeStyles.disabled = mode !== "off"
+  elements.darkModeStyles.disabled = mode !== "on"
+  elements.rainbowModeStyles.disabled = mode !== "rainbow"
+  var jumbotron = document.getElementById("jumbotron")
+  if (mode === "on") {
+    elements.darkModeIcon.src = "moon.svg"
+    // Dark mode improvement
+    elements.searchBar.classList.add("dark-mode-search")
+    elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"))
+    // Add the table-dark class to tables for dark mode
+    var tables = document.querySelectorAll(".table")
+    tables.forEach(table => {
+      table.classList.add("table-dark")
+    })
+    if (jumbotron) {
+      jumbotron.classList.add("bg-dark")
+      jumbotron.classList.remove("bg-light")
+    }
+  } else if (mode === "off") {
+    elements.darkModeIcon.src = "sun.svg"
+    // Dark Mode Improvement
+    elements.searchBar.classList.remove("dark-mode-search")
+    elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"))
+    // Remove the table-dark class for light mode
+    var tables = document.querySelectorAll(".table-dark")
+    tables.forEach(table => {
+      table.classList.remove("table-dark")
+    })
+    if (jumbotron) {
+      console.log(mode)
+      jumbotron.classList.remove("bg-dark")
+      jumbotron.classList.add("bg-light")
+    }
+  } else if (mode === "rainbow") {
+    elements.darkModeIcon.src = "rainbow.svg"
+  }
 }
 
 function toggleDarkMode() {
-	var currentTime = Date.now();
-	if (currentTime - lastToggleTime < 1000) {
-		toggleCount++;
-	} else {
-		toggleCount = 1;
-	}
-	lastToggleTime = currentTime;
+  var currentTime = Date.now()
+  if (currentTime - lastToggleTime < 1000) {
+    toggleCount++
+  } else {
+    toggleCount = 1
+  }
+  lastToggleTime = currentTime
 
-	if (toggleCount >= 18) {
-		localStorage.setItem("dark-mode", "rainbow");
-		setMode("rainbow");
-	} else if (localStorage.getItem("dark-mode") == "on") {
-		localStorage.setItem("dark-mode", "off");
-		setMode("off");
-	} else {
-		localStorage.setItem("dark-mode", "on");
-		setMode("on");
-	}
+  if (toggleCount >= 18) {
+    localStorage.setItem("dark-mode", "rainbow")
+    setMode("rainbow")
+  } else if (localStorage.getItem("dark-mode") == "on") {
+    localStorage.setItem("dark-mode", "off")
+    setMode("off")
+  } else {
+    localStorage.setItem("dark-mode", "on")
+    setMode("on")
+  }
 }
 
-document.addEventListener("DOMContentLoaded", function() {
-	getElements();
+document.addEventListener("DOMContentLoaded", function () {
+  getElements()
 
-	var currentMode = localStorage.getItem("dark-mode");
-	if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
-		setMode(currentMode);
-	} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-		setMode("on");
-	} else {
-		setMode("off");
-	}
-	
-	document.getElementById("dark-mode-toggle").addEventListener("click", function(event) {
-		event.preventDefault();
-		toggleDarkMode();
-	});
-});
+  var currentMode = localStorage.getItem("dark-mode")
+  if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
+    setMode(currentMode)
+  } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    setMode("on")
+  } else {
+    setMode("off")
+  }
+
+  document.getElementById("dark-mode-toggle").addEventListener("click", function (event) {
+    event.preventDefault()
+    toggleDarkMode()
+  })
+})