diff --git a/erpnext/e_commerce/website_item_indexing.py b/erpnext/e_commerce/website_item_indexing.py
index faf5760..a4c45cc 100644
--- a/erpnext/e_commerce/website_item_indexing.py
+++ b/erpnext/e_commerce/website_item_indexing.py
@@ -153,7 +153,6 @@
 	for item in items:
 		web_item = create_web_item_map(item)
 		key = get_cache_key(item.name)
-		print(key, web_item)
 		r.hset(key, mapping=web_item)
 
 def get_cache_key(name):
diff --git a/erpnext/templates/pages/product_search.py b/erpnext/templates/pages/product_search.py
index 755dfec..1f7a2c6 100644
--- a/erpnext/templates/pages/product_search.py
+++ b/erpnext/templates/pages/product_search.py
@@ -72,7 +72,7 @@
 	query_string = query
 
 	for s in suggestions:
-		query_string += f"|({s.string})"
+		query_string += f"|('{s.string}')"
 
 	q = Query(query_string)
 
diff --git a/erpnext/www/all-products/search.html b/erpnext/www/all-products/search.html
index 1c58e65..c6c8708 100644
--- a/erpnext/www/all-products/search.html
+++ b/erpnext/www/all-products/search.html
@@ -11,20 +11,29 @@
 {% endblock header %}
 
 {% block page_content %}
-<input type="text" name="query" id="search-box">
-
-<!-- Search Results -->
-<h2>Products</h2>
-<ul id="results">Start typing...</ul>
-
-{% set show_categories = frappe.db.get_single_value('E Commerce Settings', 'show_categories_in_search_autocomplete') %}
-
-{% if show_categories %}
-<div id="categories">
-	<h2>Categories</h2>
-	<ul id="category-suggestions">
-	</ul>
+<div class="input-group mb-3">
+	<input type="text" name="query" id="search-box" class="form-control" placeholder="Search for products..." aria-label="Product" aria-describedby="button-addon2">
+	<div class="input-group-append">
+		<button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
+	</div>
 </div>
-{% endif %}
+
+<div class="row mt-2">
+	<!-- Search Results -->
+	<div class="col-sm">
+		<h2>Products</h2>
+		<ul id="results" class="list-group"></ul>
+	</div>
+	
+	{% set show_categories = frappe.db.get_single_value('E Commerce Settings', 'show_categories_in_search_autocomplete') %}
+	
+	{% if show_categories %}
+	<div id="categories" class="col-sm">
+		<h2>Categories</h2>
+		<ul id="category-suggestions">
+		</ul>
+	</div>
+	{% endif %}
+</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/all-products/search.js b/erpnext/www/all-products/search.js
index aa47a4d..f17f7a0 100644
--- a/erpnext/www/all-products/search.js
+++ b/erpnext/www/all-products/search.js
@@ -1,4 +1,4 @@
-console.log("search.js loaded");
+let loading = false;
 
 const searchBox = document.getElementById("search-box");
 const results = document.getElementById("results");
@@ -7,7 +7,7 @@
 function populateResults(data) {
     html = ""
     for (let res of data.message) {
-        html += `<li>
+        html += `<li class="list-group-item list-group-item-action">
         <img class="item-thumb" src="${res.thumbnail || ''}" />
         <a href="/${res.route}">${res.web_item_name}</a>
         </li>`
@@ -17,7 +17,7 @@
 
 function populateCategoriesList(data) {
     if (data.length === 0) {
-        categoryList.innerText = "No matches";
+        categoryList.innerHTML = 'Type something...';
         return;
     }
 
@@ -29,7 +29,15 @@
     categoryList.innerHTML = html;
 }
 
+function updateLoadingState() {
+    if (loading) {
+        results.innerHTML = `<div class="spinner-border"><span class="sr-only">loading...<span></div>`;
+    }
+}
+
 searchBox.addEventListener("input", (e) => {
+    loading = true;
+    updateLoadingState();
     frappe.call({
         method: "erpnext.templates.pages.product_search.search", 
         args: {
@@ -37,6 +45,7 @@
         },
         callback: (data) => {
             populateResults(data);
+            loading = false;
         }
     });