diff --git a/resources/views/components/layout/header-grocery.blade.php b/resources/views/components/layout/header-grocery.blade.php
index 86b3d56..136283b 100644
--- a/resources/views/components/layout/header-grocery.blade.php
+++ b/resources/views/components/layout/header-grocery.blade.php
@@ -27,13 +27,19 @@
 
             <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
             <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
-                <input type="search" class="form-control form-control-lg rounded-pill"
-                    placeholder="Search for products" aria-label="Search">
-                <button type="button"
-                    class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
-                    aria-label="Search button">
-                    <i class="ci-search"></i>
-                </button>
+                <form action="{{ route('product.index') }}" method="GET" id="header-search-form">
+                    <input type="search" 
+                           class="form-control form-control-lg rounded-pill" 
+                           name="search"
+                           placeholder="Search for products" 
+                           aria-label="Search"
+                           value="{{ request('search') }}">
+                    <button type="submit"
+                            class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
+                            aria-label="Search button">
+                        <i class="ci-search"></i>
+                    </button>
+                </form>
             </div>
 
             <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
@@ -159,9 +165,15 @@
         <div class="collapse d-md-none" id="searchBar">
             <div class="container pt-2 pb-3">
                 <div class="position-relative">
-                    <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
-                    <input type="search" class="form-control form-icon-start rounded-pill"
-                        placeholder="Search for products" data-autofocus="collapse">
+                    <form action="{{ route('product.index') }}" method="GET" id="mobile-search-form">
+                        <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
+                        <input type="search" 
+                               class="form-control form-icon-start rounded-pill"
+                               name="search"
+                               placeholder="Search for products" 
+                               data-autofocus="collapse"
+                               value="{{ request('search') }}">
+                    </form>
                 </div>
             </div>
         </div>
@@ -169,3 +181,46 @@
 
     <x-grocery.top-header />
 
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Handle desktop search form submission
+            const desktopSearchForm = document.getElementById('header-search-form');
+            if (desktopSearchForm) {
+                desktopSearchForm.addEventListener('submit', function(e) {
+                    const searchInput = this.querySelector('input[name="search"]');
+                    if (!searchInput.value.trim()) {
+                        e.preventDefault();
+                        searchInput.focus();
+                        return false;
+                    }
+                });
+            }
+
+            // Handle mobile search form submission
+            const mobileSearchForm = document.getElementById('mobile-search-form');
+            if (mobileSearchForm) {
+                mobileSearchForm.addEventListener('submit', function(e) {
+                    const searchInput = this.querySelector('input[name="search"]');
+                    if (!searchInput.value.trim()) {
+                        e.preventDefault();
+                        searchInput.focus();
+                        return false;
+                    }
+                });
+            }
+
+            // Add search suggestions functionality (optional enhancement)
+            const searchInputs = document.querySelectorAll('input[name="search"]');
+            searchInputs.forEach(input => {
+                input.addEventListener('input', function(e) {
+                    const searchTerm = e.target.value.trim();
+                    if (searchTerm.length >= 2) {
+                        // You can implement AJAX search suggestions here
+                        // For now, just log the search term
+                        console.log('Searching for:', searchTerm);
+                    }
+                });
+            });
+        });
+    </script>
+