diff --git a/static/css/style-search.css b/static/css/style-search.css
index 59620c1..382d910 100644
--- a/static/css/style-search.css
+++ b/static/css/style-search.css
@@ -99,6 +99,8 @@ body.menu-open {
     max-width: 600px;
     overflow: visible;
     border: 1px solid var(--search-bg-input-border);
+    display: flex;
+    flex-direction: column;
 }
 
 .wrapper input {
@@ -133,8 +135,7 @@ body.menu-open {
     border-bottom-left-radius: 22px;
     border-bottom-right-radius: 22px;
     border: 1px solid var(--search-bg-input-border);
-    border-top: none;
-    z-index: 999;
+    border-top: none; /* No top border to avoid double borders with the input */
 }
 
 /* Show autocomplete when wrapper has 'wrapper-searching' class */
diff --git a/templates/search.html b/templates/search.html
index aa8966a..5afd027 100755
--- a/templates/search.html
+++ b/templates/search.html
@@ -126,7 +126,7 @@
                 </g>
                 </svg>
             </div>
-            <div class="wrapper">
+            <div class="wrapper custom-search-page">
                 <input type="text" name="q" autofocus id="search-input"/>
                 <button id="search-wrapper-ico" class="material-icons-round" name="t" value="web" type="submit">search</button>
                 <div class="autocomplete">
@@ -170,6 +170,44 @@
     </form>
 
     <!-- JavaScript Functions -->
+    <script>
+document.addEventListener('DOMContentLoaded', () => {
+    const customSearchWrapper = document.querySelector('.wrapper.custom-search-page');
+    const searchTypeIcons = document.querySelector('.search-type-icons');
+    const resultsWrapper = document.querySelector('.wrapper.custom-search-page .autocomplete');
+
+    // Check if we are on the correct page
+    if (customSearchWrapper && resultsWrapper) {
+
+        // Function to move buttons without affecting the page flow
+        function adjustSearchIconsPosition() {
+            const autocompleteHeight = resultsWrapper.offsetHeight;
+            if (autocompleteHeight > 0) {
+                // Use transform to move the buttons down
+                searchTypeIcons.style.transform = `translateY(${autocompleteHeight + 20}px)`;
+            } else {
+                // Reset the buttons position when no suggestions
+                searchTypeIcons.style.transform = 'translateY(0)';
+            }
+        }
+
+        // Observer to detect changes in the autocomplete content and adjust position
+        const observer = new MutationObserver(() => {
+            adjustSearchIconsPosition();
+        });
+
+        // Start observing the autocomplete for content changes
+        observer.observe(resultsWrapper, { childList: true, subtree: true });
+
+        // Optionally adjust when window resizes (for responsive changes)
+        window.addEventListener('resize', adjustSearchIconsPosition);
+
+        // Adjust initially on load in case suggestions are already present
+        adjustSearchIconsPosition();
+    }
+});
+
+    </script>
     <script>
         function openNav() {
             document.getElementById("mySidenav").style.width = "250px";