diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index f46c44a6..abbb02de 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -11,7 +11,7 @@
 }
 
 #searchForm {
-  width: 200px; /* Adjust this value as needed */
+  width: 300px; /* Adjust this value as needed */
 }
 
 /* Style the search results to match the navbar */
@@ -21,6 +21,7 @@
   width: 100%;
   max-width: 300px; /* Adjust to your preferred width */
   transition: height 0.3s ease; /* Smooth height transition */
+  padding: 0px !important;
 }
 
 #searchResults .dropdown-item {
diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js
index 2329f998..df9967d6 100644
--- a/src/main/resources/static/js/search.js
+++ b/src/main/resources/static/js/search.js
@@ -4,6 +4,7 @@ document.querySelector("#search-icon").addEventListener("click", function (e) {
   var searchBar = document.querySelector("#navbarSearch");
   searchBar.classList.toggle("show");
 });
+
 window.onload = function () {
   var items = document.querySelectorAll(".dropdown-item, .nav-link");
   var dummyContainer = document.createElement("div");
@@ -32,44 +33,47 @@ window.onload = function () {
 
 // Show search results as user types in search box
 document.querySelector("#navbarSearchInput").addEventListener("input", function (e) {
-  var searchText = e.target.value.toLowerCase();
+  var searchText = e.target.value.trim().toLowerCase(); // Trim whitespace and convert to lowercase
   var items = document.querySelectorAll(".dropdown-item, .nav-link");
   var resultsBox = document.querySelector("#searchResults");
 
   // Clear any previous results
   resultsBox.innerHTML = "";
 
-  items.forEach(function (item) {
-    var titleElement = item.querySelector(".icon-text");
-    var iconElement = item.querySelector(".icon");
-    var itemHref = item.getAttribute("href");
-    var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
+  // Check if search text is not empty
+  if (searchText !== "") {
+    items.forEach(function (item) {
+      var titleElement = item.querySelector(".icon-text");
+      var iconElement = item.querySelector(".icon");
+      var itemHref = item.getAttribute("href");
+      var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
 
-    if (titleElement && iconElement && itemHref !== "#") {
-      var title = titleElement.innerText;
-      if (
-        (title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
-        !resultsBox.querySelector(`a[href="${item.getAttribute("href")}"]`)
-      ) {
-        var result = document.createElement("a");
-        result.href = itemHref;
-        result.classList.add("dropdown-item");
+      if (titleElement && iconElement && itemHref !== "#") {
+        var title = titleElement.innerText;
+        if (
+          (title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
+          !resultsBox.querySelector(`a[href="${itemHref}"]`)
+        ) {
+          var result = document.createElement("a");
+          result.href = itemHref;
+          result.classList.add("dropdown-item");
 
-        var resultIcon = document.createElement("img");
-        resultIcon.src = iconElement.src;
-        resultIcon.alt = "icon";
-        resultIcon.classList.add("icon");
-        result.appendChild(resultIcon);
+          var resultIcon = document.createElement("img");
+          resultIcon.src = iconElement.src;
+          resultIcon.alt = "icon";
+          resultIcon.classList.add("icon");
+          result.appendChild(resultIcon);
 
-        var resultText = document.createElement("span");
-        resultText.textContent = title;
-        resultText.classList.add("icon-text");
-        result.appendChild(resultText);
+          var resultText = document.createElement("span");
+          resultText.textContent = title;
+          resultText.classList.add("icon-text");
+          result.appendChild(resultText);
 
-        resultsBox.appendChild(result);
+          resultsBox.appendChild(result);
+        }
       }
-    }
-  });
+    });
+  }
 
   // Set the width of the search results box to the maximum width
   resultsBox.style.width = window.navItemMaxWidth + "px";