diff --git a/static/css/style-search.css b/static/css/style-search.css
index 27f516f..59620c1 100644
--- a/static/css/style-search.css
+++ b/static/css/style-search.css
@@ -116,13 +116,29 @@ body.menu-open {
     color: var(--fg);
 }
 
-/* Autocomplete Styles */
-.autocomplete {
-    text-align: left;
-    width: 100%; /* Ensure it matches the input width */
+.wrapper-searching {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
-.wrapper.show .autocomplete {
+/* Autocomplete Styles */
+.autocomplete {
+    display: none;
+    text-align: left;
+    width: 100%;
+    position: absolute;
+    left: -1px; /* this is so curesed */
+    top: 100%;
+    background-color: var(--search-bg-input);
+    border-bottom-left-radius: 22px;
+    border-bottom-right-radius: 22px;
+    border: 1px solid var(--search-bg-input-border);
+    border-top: none;
+    z-index: 999;
+}
+
+/* Show autocomplete when wrapper has 'wrapper-searching' class */
+.wrapper-searching .autocomplete {
     display: block;
 }
 
diff --git a/static/js/autocomplete.js b/static/js/autocomplete.js
index 9ac63f3..b704d56 100644
--- a/static/js/autocomplete.js
+++ b/static/js/autocomplete.js
@@ -22,7 +22,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Function to render results
     function renderSuggestions(results) {
         if (!results || !results.length) {
-            searchWrapper.classList.remove('show');
+            searchWrapper.classList.remove('wrapper-searching');
             resultsWrapper.innerHTML = '';
             return;
         }
@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
 
         resultsWrapper.innerHTML = `<ul>${content}</ul>`;
-        searchWrapper.classList.add('show');
+        searchWrapper.classList.add('wrapper-searching');
     }
 
     // Fetch suggestions when input is focused
@@ -91,7 +91,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const query = item.textContent;
         searchInput.value = query;
         resultsWrapper.innerHTML = '';
-        searchWrapper.classList.remove('show');
+        searchWrapper.classList.remove('wrapper-searching');
 
         // Submit the form or navigate to search results
         const form = searchInput.closest('form');
@@ -112,7 +112,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Close the suggestions when clicking outside
     document.addEventListener('click', (event) => {
         if (!searchWrapper.contains(event.target)) {
-            searchWrapper.classList.remove('show');
+            searchWrapper.classList.remove('wrapper-searching');
             resultsWrapper.innerHTML = '';
             currentIndex = -1;
         }