diff --git a/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java b/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java
index be68a821599f106ed96ac9c1542677deb899a3b9..e2c025038cf5019dc6180fc63765e2e59cff57df 100644
--- a/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java
+++ b/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java
@@ -1,22 +1,45 @@
 package com.example.clientproject.web.restControllers;
 
+import com.example.clientproject.data.shops.Shops;
+import com.example.clientproject.data.shops.ShopsRepo;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.List;
+import java.util.Locale;
+import java.util.stream.Collectors;
 
 @RestController
 public class ShopSearch {
+    @Autowired
+    ShopsRepo shopsRepo;
+
     @GetMapping("/shop/search")
     public String searchShops(@RequestParam(value = "q", required = false) String query,
                               @RequestParam(value = "p", required = false) Integer page,
-                              @RequestParam(value = "t", required = false) List<Integer> tags){
-        System.out.println(tags);
-        System.out.println(query);
-        System.out.println(page);
+                              @RequestParam(value = "t", required = false) List<String> tags){
+        final Integer itemsPerPage = 6;
+
+        //Get all the active shops
+        List<Shops> allShops = shopsRepo.findActiveShops();
+
+        //Filter the shops using the query provided
+        if(query != null){
+            allShops = allShops
+                    .stream()
+                    .filter(s -> s.getShopName().toLowerCase(Locale.ROOT).strip().contains(query.toLowerCase(Locale.ROOT).strip()))
+                    .collect(Collectors.toList());
+        }
+
+        //Filter using the tags provided
+
+        //Paginate
+
+        //Convert to required format
 
-        return "here";
+        return allShops.toString();
 
     }
 }
diff --git a/src/main/resources/static/js/searchBar.js b/src/main/resources/static/js/searchBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..560f8277c0d5057e81111734817fc1527b8fd171
--- /dev/null
+++ b/src/main/resources/static/js/searchBar.js
@@ -0,0 +1,57 @@
+var tags = [];
+var query = "";
+var page = 1;
+
+var searchBar = document.getElementById("main-search");
+var tagGroup = document.getElementById("search-tag-group");
+
+function updateSearch(e){
+    page = 1;
+    query = searchBar.value;
+    doSearch()
+}
+
+function removeTag(i){
+    tags.splice(i, 1);
+    page=1;
+    updateUI()
+    doSearch()
+}
+
+function addTag(e){
+    if(e.key== "Enter"){
+        if (searchBar.value != ""){
+            page = 1;
+            query = "";
+            tags.push(searchBar.value.toLowerCase());
+            searchBar.value = "";
+            updateUI();
+            doSearch();
+        }
+    }
+}
+
+function updateUI(){
+    tagGroup.innerHTML = "";
+    for(let [i,tag] of tags.entries()){
+        tagGroup.innerHTML += `
+            <div class="control mr-3">
+                <div class="tags has-addons">
+                    <span class="tag gradient">${tag}</span>
+                    <a class="tag is-delete" onclick="removeTag(${i})"></a>
+                </div>
+            </div>`
+    }
+}
+
+function doSearch(){
+    let url = "/shop/search"
+    url += "?q=" + query
+    url += "&p=" + page.toString()
+    for (let t of tags){
+        url += "&t=" + t.toString()
+    }
+    fetch(url)
+        .then(e=>e.text())
+        .then(data=>console.log(data))
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 7d36dcf8a9fd8fda6c08e8e55ffa21909878a404..a914e5bd15cd25086252144a0e9c53d48a124f66 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -62,15 +62,16 @@
 		<div class="container is-full-width is-flex is-justify-content-center is-align-items-center is-flex-direction-column mb-4">
 			<h1 class="title is-3">Where else can I earn rewards?</h1>
 			<div class="control has-icons-left mb-2" style="width: 60%;">
-				<input class="input" type="text" placeholder="Enter Brands or keywords e.g. Vegan, Clothing etc..">
+				<input class="input" type="text" placeholder="Enter Brands or keywords e.g. Vegan, Clothing etc.."
+				oninput="updateSearch(event)" onkeydown="addTag(event)" id="main-search">
 				<span class="icon is-small is-left">
 					<i class="fas fa-search"></i>
 				</span>
 			</div>
 			<!--Tags-->
-			<div class="field is-grouped is-grouped-multiline" style="width: 60%;">
-				<div th:each="tag: ${tags}" th:include="fragments/tag.html :: tag"
-					 th:with="text=${tag}"></div>
+			<div class="field is-grouped is-grouped-multiline" style="width: 60%;" id="search-tag-group">
+<!--				<div th:each="tag: ${tags}" th:include="fragments/tag.html :: tag"-->
+<!--					 th:with="text=${tag}"></div>-->
 			</div>
 		</div>
 
@@ -97,5 +98,6 @@
 			</div>
 		</div>
 	</div>
+	<script src="/js/searchBar.js"></script>
 </body>
 </html>