diff --git a/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java b/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
index 102235a..a2d4171 100644
--- a/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
+++ b/src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
@@ -53,6 +53,9 @@ public class BonusManager {
         }
         list.sort((a, b) -> Integer.compare(b.second, a.second));
 
+        if (list.get(0).second.equals(0)){
+            return new ArrayList<>();
+        }
         ArrayList<BonusItem> top10 = new ArrayList<>();
         int i = 0;
         while (top10.size() < 10) {
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 2f7528b..5476009 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -2,6 +2,7 @@
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Appie Scraper</title>
     <style>
         :root {
@@ -15,6 +16,11 @@
             --ah-text: #E6EDF3;
             --ah-text-secondary: #8B949E;
             --ah-border: #30363D;
+            --spacing-xs: 8px;
+            --spacing-sm: 12px;
+            --spacing-md: 16px;
+            --spacing-lg: 24px;
+            --spacing-xl: 32px;
         }
 
         * {
@@ -23,24 +29,33 @@
             box-sizing: border-box;
         }
 
+        html, body {
+            width: 100%;
+            height: 100%;
+        }
+
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
             background: linear-gradient(135deg, var(--ah-dark-bg) 0%, #132236 100%);
             color: var(--ah-text);
             padding: 0;
             min-height: 100vh;
+            overflow-x: hidden;
         }
 
         header {
             background: linear-gradient(90deg, var(--ah-dark-surface) 0%, #1a2634 100%);
-            padding: 28px 40px;
+            padding: var(--spacing-lg);
             border-bottom: 3px solid var(--ah-blue);
             box-shadow: 0 8px 32px rgba(0, 173, 230, 0.15);
-            margin-bottom: 40px;
+            margin-bottom: var(--spacing-lg);
+            position: sticky;
+            top: 0;
+            z-index: 100;
         }
 
         h1 {
-            font-size: 32px;
+            font-size: clamp(24px, 5vw, 36px);
             font-weight: 700;
             letter-spacing: -0.5px;
             background: linear-gradient(135deg, var(--ah-blue) 0%, var(--ah-blue-light) 100%);
@@ -52,11 +67,11 @@
         .container {
             max-width: 1400px;
             margin: 0 auto;
-            padding: 0 40px;
+            padding: 0 var(--spacing-lg);
         }
 
         .search-container {
-            margin-bottom: 40px;
+            margin-bottom: var(--spacing-xl);
             animation: slideDown 0.6s ease-out;
         }
 
@@ -71,13 +86,18 @@
             }
         }
 
+        .search-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sm);
+        }
+
         input[type="text"] {
             width: 100%;
-            max-width: 500px;
-            padding: 14px 18px;
+            padding: var(--spacing-md);
             font-size: 15px;
             border: 2px solid var(--ah-border);
-            border-radius: 8px;
+            border-radius: 10px;
             background: var(--ah-dark-surface-light);
             color: var(--ah-text);
             transition: all 0.3s ease;
@@ -91,116 +111,156 @@
         input[type="text"]:focus {
             outline: none;
             border-color: var(--ah-blue);
-            background: var(--ah-dark-surface-light);
             box-shadow: 0 0 0 3px rgba(0, 173, 230, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
         }
 
         .search-info {
-            margin-top: 12px;
             font-size: 13px;
             color: var(--ah-text-secondary);
             font-weight: 500;
         }
 
-        table {
-            width: 100%;
-            border-collapse: collapse;
+        .cards-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-xl);
+            animation: fadeIn 0.4s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        .card {
             background: var(--ah-dark-surface);
+            border: 1px solid var(--ah-border);
             border-radius: 12px;
             overflow: hidden;
-            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
-            border: 1px solid var(--ah-border);
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            height: 100%;
         }
 
-        thead {
-            background: linear-gradient(90deg, var(--ah-blue) 0%, var(--ah-blue-dark) 100%);
+        .card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 32px rgba(0, 173, 230, 0.2);
+            border-color: var(--ah-blue);
         }
 
-        th {
-            padding: 16px 18px;
-            text-align: left;
-            color: white;
-            font-weight: 600;
-            font-size: 14px;
-            letter-spacing: 0.3px;
-            text-transform: uppercase;
-        }
-
-        td {
-            padding: 16px 18px;
-            border-bottom: 1px solid var(--ah-border);
-            color: var(--ah-text);
-            font-size: 14px;
-        }
-
-        tbody tr {
-            transition: all 0.2s ease;
-        }
-
-        tbody tr:hover {
-            background: var(--ah-dark-surface-light);
-            box-shadow: inset 0 0 0 1px var(--ah-blue);
-        }
-
-        tbody tr:last-child td {
-            border-bottom: none;
-        }
-
-        img {
-            width: 160px;
-            height: 160px;
+        .card-image {
+            width: 100%;
+            height: 200px;
             object-fit: cover;
-            border-radius: 8px;
-            border: 1px solid var(--ah-border);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            background: linear-gradient(135deg, var(--ah-dark-surface-light) 0%, var(--ah-dark-bg) 100%);
+            transition: transform 0.3s ease;
         }
 
-        tbody tr:hover img {
+        .card:hover .card-image {
             transform: scale(1.05);
-            box-shadow: 0 8px 20px rgba(0, 173, 230, 0.3);
+        }
+
+        .card-content {
+            padding: var(--spacing-lg);
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            gap: var(--spacing-md);
+        }
+
+        .card-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--ah-text);
+            line-height: 1.3;
+        }
+
+        .card-description {
+            font-size: 13px;
+            color: var(--ah-text-secondary);
+            line-height: 1.5;
+            flex: 1;
+        }
+
+        .card-bonus {
+            display: inline-block;
+            padding: var(--spacing-sm) var(--spacing-md);
+            background: linear-gradient(135deg, rgba(255, 121, 0, 0.15), rgba(255, 121, 0, 0.05));
+            border: 1px solid rgba(255, 121, 0, 0.3);
+            border-radius: 6px;
+            color: var(--ah-orange);
+            font-weight: 600;
+            font-size: 12px;
+            text-align: center;
+        }
+
+        .card-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-top: var(--spacing-md);
+            border-top: 1px solid var(--ah-border);
+            gap: var(--spacing-sm);
+            flex-wrap: wrap;
+        }
+
+        .card-category {
+            font-size: 11px;
+            background: rgba(0, 173, 230, 0.1);
+            color: var(--ah-blue-light);
+            padding: 4px 8px;
+            border-radius: 4px;
+            text-transform: uppercase;
+            font-weight: 600;
+            letter-spacing: 0.3px;
+        }
+
+        .card-link {
+            margin-left: auto;
         }
 
         a {
             color: var(--ah-blue-light);
             text-decoration: none;
             font-weight: 600;
-            font-size: 13px;
-            padding: 8px 12px;
+            font-size: 12px;
+            padding: 6px 12px;
             border-radius: 6px;
             transition: all 0.2s ease;
-            display: inline-block;
             background: rgba(0, 173, 230, 0.1);
+            display: inline-block;
+            white-space: nowrap;
         }
 
         a:hover {
             background: rgba(0, 173, 230, 0.2);
-            color: var(--ah-blue-light);
             transform: translateX(2px);
         }
 
         .no-results {
             text-align: center;
-            padding: 60px 20px;
+            padding: var(--spacing-xl);
             color: var(--ah-text-secondary);
             font-size: 16px;
             background: var(--ah-dark-surface);
             border-radius: 12px;
+            border: 1px solid var(--ah-border);
         }
 
         .no-results strong {
             color: var(--ah-orange);
         }
 
-        /* Bonus text highlight in orange */
-        .bonus-text {
-            color: var(--ah-orange);
-            font-weight: 600;
-        }
-
         /* Scrollbar styling */
         ::-webkit-scrollbar {
             width: 10px;
-            height: 10px;
         }
 
         ::-webkit-scrollbar-track {
@@ -216,36 +276,127 @@
             background: var(--ah-blue-light);
         }
 
-        /* Responsive */
+        /* Mobile Responsive */
         @media (max-width: 768px) {
+            :root {
+                --spacing-xs: 6px;
+                --spacing-sm: 10px;
+                --spacing-md: 12px;
+                --spacing-lg: 16px;
+                --spacing-xl: 20px;
+            }
+
             header {
-                padding: 16px 20px;
+                padding: var(--spacing-md);
+                margin-bottom: var(--spacing-lg);
             }
 
             h1 {
-                font-size: 24px;
+                font-size: 20px;
             }
 
             .container {
-                padding: 0 20px;
+                padding: 0 var(--spacing-md);
             }
 
             input[type="text"] {
-                max-width: 100%;
+                font-size: 16px; /* Prevents zoom on iOS */
+                padding: var(--spacing-sm) var(--spacing-md);
             }
 
-            table {
-                font-size: 13px;
+            .cards-grid {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                gap: var(--spacing-md);
+                margin-bottom: var(--spacing-lg);
             }
 
-            th, td {
-                padding: 12px;
+            .card-image {
+                height: 150px;
             }
 
-            img {
-                width: 100px;
-                height: 100px;
+            .card-content {
+                padding: var(--spacing-md);
+                gap: var(--spacing-sm);
             }
+
+            .card-title {
+                font-size: 15px;
+            }
+
+            .card-description {
+                font-size: 12px;
+            }
+
+            .card-meta {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .card-link {
+                margin-left: 0;
+                width: 100%;
+            }
+
+            a {
+                width: 100%;
+                text-align: center;
+                padding: var(--spacing-sm);
+            }
+        }
+
+        @media (max-width: 480px) {
+            header {
+                padding: var(--spacing-sm);
+            }
+
+            h1 {
+                font-size: 18px;
+            }
+
+            .container {
+                padding: 0 var(--spacing-sm);
+            }
+
+            .cards-grid {
+                grid-template-columns: 1fr;
+                gap: var(--spacing-sm);
+            }
+
+            .card-image {
+                height: 120px;
+            }
+
+            .card-content {
+                padding: var(--spacing-sm);
+            }
+
+            .card-title {
+                font-size: 14px;
+            }
+
+            .card-description {
+                font-size: 11px;
+            }
+
+            .card-bonus {
+                font-size: 11px;
+                padding: 4px 8px;
+            }
+
+            input[type="text"] {
+                padding: 10px 12px;
+                font-size: 16px;
+            }
+        }
+
+        /* Loading skeleton */
+        .card-skeleton {
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 1; }
         }
     </style>
 </head>
@@ -258,36 +409,27 @@
 
 <div class="container">
     <div class="search-container">
-        <input
-                type="text"
-                id="fuzzySearch"
-                placeholder="Search bonus items... (real-time)"
-                autocomplete="off"
-        >
-        <div class="search-info">
-            <span id="resultCount">Loading items...</span>
+        <div class="search-wrapper">
+            <input
+                    type="text"
+                    id="fuzzySearch"
+                    placeholder="Search bonus items... (real-time)"
+                    autocomplete="off"
+            >
+            <div class="search-info">
+                <span id="resultCount">Loading items...</span>
+            </div>
         </div>
     </div>
 
-    <table>
-        <thead>
-        <tr>
-            <th>Product Name</th>
-            <th>Description</th>
-            <th>Bonus Offer</th>
-            <th>Category</th>
-            <th>Image</th>
-            <th>More Details</th>
-        </tr>
-        </thead>
-        <tbody id="tableBody">
-        </tbody>
-    </table>
+    <div id="cardsContainer" class="cards-grid">
+        <!-- Cards will be inserted here -->
+    </div>
 </div>
 
 <script>
     const searchInput = document.getElementById('fuzzySearch');
-    const tableBody = document.getElementById('tableBody');
+    const cardsContainer = document.getElementById('cardsContainer');
     const resultCount = document.getElementById('resultCount');
     let debounceTimer;
 
@@ -322,32 +464,30 @@
 
     function renderResults(results, query) {
         if (results.length === 0) {
-            tableBody.innerHTML = `
-                <tr>
-                    <td colspan="6" class="no-results">
+            cardsContainer.innerHTML = `
+                <div style="grid-column: 1 / -1;">
+                    <div class="no-results">
                         No items found matching "<strong>${escapeHtml(query)}</strong>"
-                    </td>
-                </tr>
+                    </div>
+                </div>
             `;
             resultCount.textContent = `0 results for "${query}"`;
             return;
         }
 
-        tableBody.innerHTML = results.map(item => `
-            <tr>
-                <td>
-                    <strong>${escapeHtml(item.title)}</strong>
-                </td>
-                <td>${escapeHtml(item.description)}</td>
-                <td><span class="bonus-text">${escapeHtml(item.bonusText)}</span></td>
-                <td>${escapeHtml(item.category)}</td>
-                <td>
-                    <img src="${escapeHtml(item.imageURL)}" alt="${escapeHtml(item.title)}">
-                </td>
-                <td>
-                    <a href="${escapeHtml(item.moreInfoURL)}" target="_blank">View Offer</a>
-                </td>
-            </tr>
+        cardsContainer.innerHTML = results.map(item => `
+            <div class="card">
+                <img src="${escapeHtml(item.imageURL)}" alt="${escapeHtml(item.title)}" class="card-image">
+                <div class="card-content">
+                    <h2 class="card-title">${escapeHtml(item.title)}</h2>
+                    <p class="card-description">${escapeHtml(item.description)}</p>
+                    <div class="card-bonus">${escapeHtml(item.bonusText)}</div>
+                    <div class="card-meta">
+                        <span class="card-category">${escapeHtml(item.category)}</span>
+                        <a href="${escapeHtml(item.moreInfoURL)}" target="_blank" class="card-link">View Offer</a>
+                    </div>
+                </div>
+            </div>
         `).join('');
 
         resultCount.textContent = `${results.length} item${results.length !== 1 ? 's' : ''} found`;
@@ -365,4 +505,4 @@
     }
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
