diff --git a/assets/js/main.js b/assets/js/main.js
index bf8b60e..f10fbf5 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -76,9 +76,10 @@ searchInput.addEventListener('input', function () {
     searchTimeout = setTimeout(async () => {
         let searchValue = this.value.trim();
 
+
         if (searchValue.length < 3) {
             searchResults.innerHTML = '';
-            searchResults.classList.add('hidden');
+            searchResults.hidden = true;
             return;
         }
 
@@ -107,16 +108,22 @@ searchInput.addEventListener('input', function () {
             results.forEach(result => {
                 searchResults.innerHTML += `
         <div class="search-result-item hover-anim">
-            <a href="#" class="search-result-link">
+            <a href="${result.url}" class="search-result-link">
             ${result.field_title}
             </a>
         </div>
         `;
             });
-            searchResults.classList.remove('hidden');
+            searchResults.hidden = false;
         } else {
             searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
-            searchResults.classList.remove('hidden');
+            searchResults.hidden = false;
         }
     }, 300);
+});
+
+document.addEventListener('click', function (event) {
+    if (!searchResults.contains(event.target) && event.target !== searchInput) {
+        searchResults.hidden = true;
+    }
 });
\ No newline at end of file
diff --git a/components/templates/layout/header.php b/components/templates/layout/header.php
index 824d0fe..f9206ae 100644
--- a/components/templates/layout/header.php
+++ b/components/templates/layout/header.php
@@ -67,7 +67,7 @@
                 <div class="search-and-login">
                     <i class="fa-solid fa-magnifying-glass search-icon"></i>
                     <input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
-                    <div class="search-results hidden" id="search-results">
+                    <div class="search-results" id="search-results" hidden>
                         
                     </div>
                     <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>"