diff --git a/src/assets/icons/SearchIcon.astro b/src/assets/icons/SearchIcon.astro
new file mode 100644
index 00000000..68ae108a
--- /dev/null
+++ b/src/assets/icons/SearchIcon.astro
@@ -0,0 +1,11 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.5 3C11.5376 3 14 5.46243 14 8.5C14 9.83879 13.5217 11.0659 12.7266 12.0196L16.8536 16.1464C17.0488 16.3417 17.0488 16.6583 16.8536 16.8536C16.68 17.0271 16.4106 17.0464 16.2157 16.9114L16.1464 16.8536L12.0196 12.7266C11.0659 13.5217 9.83879 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.46243 5.46243 3 8.5 3ZM8.5 4C6.01472 4 4 6.01472 4 8.5C4 10.9853 6.01472 13 8.5 13C10.9853 13 13 10.9853 13 8.5C13 6.01472 10.9853 4 8.5 4Z"
+    fill="currentColor"></path>
+</svg>
diff --git a/src/ui/components/CenteredSearchWithAI.astro b/src/ui/components/CenteredSearchWithAI.astro
index 85dc806b..3464ac41 100644
--- a/src/ui/components/CenteredSearchWithAI.astro
+++ b/src/ui/components/CenteredSearchWithAI.astro
@@ -1,9 +1,17 @@
+---
+import SearchIcon from "@/assets/icons/SearchIcon.astro";
+---
+
 <div class="nav_search-wrap">
   <div class="search-wrap--centered" id="docsearch"></div>
   <div id="custom-button" class="nav_ai-btn"></div>
 </div>
+<button class="mobile-search-button" id="mobile-search-btn" aria-label="Search">
+  <SearchIcon />
+  Search
+</button>
 <script type="module" is:inline data-astro-rerun>
-  docsearch({
+  const docSearchInstance = docsearch({
     container: '#docsearch',
     appId: "MXZNUT59HV",
     apiKey: "7c390e262ac8858df0b6624d01d9dfef",
@@ -11,6 +19,17 @@
     placeholder: "Search documentation...",
   });
 
+  const mobileSearchBtn = document.getElementById('mobile-search-btn');
+  if (mobileSearchBtn) {
+    mobileSearchBtn.addEventListener('click', () => {
+      // Trigger the DocSearch modal by clicking the hidden search button
+      const searchButton = document.querySelector('.DocSearch-Button');
+      if (searchButton) {
+        searchButton.click();
+      }
+    });
+  }
+
   let themeName = localStorage.getItem('theme');
   if(themeName === 'system') {
     themeName = window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -72,10 +91,45 @@
     border-radius: 4px;
   }
 
+  .mobile-search-button {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 12px 8px 8px;
+    height: 36px;
+    background-color: #f0f0f0;
+    border: 1px solid rgba(33,39,46,.12);
+    border-radius: 8px;
+    cursor: pointer;
+    color: #909090;
+    transition: all 0.2s ease;
+  }
+
+  .mobile-search-button:hover {
+    color: #000;
+    border-color: #b8bfc8;
+  }
+
+  html[class~=dark] .mobile-search-button {
+    background-color: #1c1c1c;
+    border-color: #292929;
+    color: #909090;
+  }
+
+  html[class~=dark] .mobile-search-button:hover {
+    background-color: #1a1a1a;
+    color: #c8c9ca;
+    border-color: #c8c9ca;
+  }
+
   @media screen and (max-width: 768px) {
     .nav_search-wrap {
       display: none;
     }
     
+    .mobile-search-button {
+      display: flex;
+    }
   }
 </style>
\ No newline at end of file