diff --git a/src/main/java/nl/herpiederpiee/appie_scraper/BonusItem.java b/src/main/java/nl/herpiederpiee/appie_scraper/BonusItem.java
index 4fbc400..ad5d06b 100644
--- a/src/main/java/nl/herpiederpiee/appie_scraper/BonusItem.java
+++ b/src/main/java/nl/herpiederpiee/appie_scraper/BonusItem.java
@@ -3,13 +3,13 @@ package nl.herpiederpiee.appie_scraper;
 import com.microsoft.playwright.ElementHandle;
 
 public class BonusItem {
-    String title;
-    String description = "";
-    String bonusText;
-    String category;
-    String imageURL;
+    public String title;
+    public String description = "";
+    public String bonusText;
+    public String category;
+    public String imageURL;
 
-    String moreInfoURL;
+    public String moreInfoURL;
 
     float originalPrice = 0.0f;
     float bonusPrice = 0.0f;
diff --git a/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java b/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
index 6a71b40..d26a2f3 100644
--- a/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
+++ b/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
@@ -42,6 +42,10 @@ public class BonusManager {
     public static ArrayList<BonusItem> getBonusItems(String name){
         ArrayList<Pair<BonusItem, Integer>> list = new ArrayList<>();
 
+        if (name == null || name.trim().isEmpty()){
+            return bonusItems;
+        }
+
         for (BonusItem bonusItem : bonusItems) {
             Integer score = fuzzyMatchScore(name, bonusItem.title);
             list.add(Pair.pair(bonusItem, score));
diff --git a/src/main/java/nl/herpiederpiee/appie_scraper/WebServer.java b/src/main/java/nl/herpiederpiee/appie_scraper/WebServer.java
index 820a987..ff010b3 100644
--- a/src/main/java/nl/herpiederpiee/appie_scraper/WebServer.java
+++ b/src/main/java/nl/herpiederpiee/appie_scraper/WebServer.java
@@ -1,12 +1,20 @@
 package nl.herpiederpiee.appie_scraper;
+
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import java.util.ArrayList;
 
 @Controller
 public class WebServer {
+
     @GetMapping("/")
-    public String index() {
-        return "index"; // resolves to index.html in templates/
+    public String index(@RequestParam(value = "fuzzySearch", required = false) String fuzzySearch, Model model) {
+        // Call your BonusManager or service to get items
+        ArrayList<BonusItem> items = BonusManager.getBonusItems(fuzzySearch);
+        model.addAttribute("items", items);
+        return "index";
     }
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index a78c5b2..6d9c227 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -3,8 +3,87 @@
 <head>
     <meta charset="UTF-8">
     <title>Appie Scraper</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        form {
+            margin-bottom: 20px;
+        }
+        input[type="text"] {
+            padding: 8px;
+            width: 300px;
+            font-size: 14px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        th, td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+        th {
+            background-color: #4CAF50;
+            color: white;
+            font-weight: bold;
+        }
+        tr:hover {
+            background-color: #f9f9f9;
+        }
+        img {
+            width: 200px;
+            height: 200px;
+            object-fit: cover;
+            border-radius: 4px;
+        }
+        a {
+            color: #4CAF50;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
 </head>
 <body>
-<h1>Hello World</h1>
+<h1>Appie Bonus Items</h1>
+
+<form action="">
+    <input type="text" name="fuzzySearch" placeholder="Search items...">
+</form>
+
+<table>
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Description</th>
+        <th>Bonus Text</th>
+        <th>Category</th>
+        <th>Image</th>
+        <th>More Info</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr th:each="item : ${items}">
+        <td th:text="${item.title}">Item Name</td>
+        <td th:text="${item.description}">Description</td>
+        <td th:text="${item.bonusText}">Bonus Text</td>
+        <td th:text="${item.category}">Category</td>
+        <td>
+            <img th:src="${item.imageURL}" th:alt="${item.title}" width="200" height="200">
+        </td>
+        <td>
+            <a th:href="${item.moreInfoURL}" target="_blank">here</a>
+        </td>
+    </tr>
+    </tbody>
+</table>
 </body>
-</html>
+</html>
\ No newline at end of file
