diff --git a/website/index.html b/website/index.html
index 109b8bf..a374b47 100644
--- a/website/index.html
+++ b/website/index.html
@@ -16,6 +16,8 @@
         <div class="menu-item" onclick="showItemDetails('drinks')">Drinken</div>
         <div class="menu-item" onclick="showItemDetails('Snacks')">Snacks</div>
         <div class="menu-item" onclick="showItemDetails('deserts')">Ijsjes</div>
+        <div class="menu-item" onclick="showItemDetails('Deals')">Deals</div>
+        <div class="menu-item" onclick="showItemDetails('soepen')">Soepen</div>
     </div>
 
     <!-- Rechterkant: Productafbeeldingen in mooie hokjes -->
diff --git a/website/script.js b/website/script.js
index 7f38dd2..4e698b5 100644
--- a/website/script.js
+++ b/website/script.js
@@ -2,6 +2,7 @@
 function showItemDetails(item) {
     var items = [];
 
+
     // Afhankelijk van het geselecteerde item, voeg de producten toe
     if (item === 'Broodjes') {
         items = [
@@ -37,33 +38,54 @@ function showItemDetails(item) {
         ];
     }
 
-    // Leeg de productweergave
-    const productDisplay = document.getElementById('product-display');
-    productDisplay.innerHTML = '';
+    else if (item === 'Deals') {
+        items = [
+            {
+                title: "deals",
+                image: "",
+                description: "Onze beste deals met de beste prijzen!."
+            }
+        ];
+    }
 
-    // Voeg de items toe aan de weergave
-    items.forEach(item => {
-        const productBox = document.createElement('div');
-        productBox.classList.add('product-box');
-        productBox.innerHTML = `
-            <img src="${item.image}" alt="${item.title}" onclick="openModal('${item.title}', '${item.image}', '${item.description}')">
-            <h3>${item.title}</h3>
-        `;
-        productDisplay.appendChild(productBox);
-    });
+    else if (item === 'soepen') {
+        items = [
+            {
+                title: "soepen",
+                image: "",
+                description: "Soep van de dag! (Allergieën? Meld het bij ons!)."
+            }
+        ];
+    }
+
+
+ // Leeg de productweergave
+ const productDisplay = document.getElementById('product-display');
+ productDisplay.innerHTML = '';
+
+ // Voeg de items toe aan de weergave
+ items.forEach(item => {
+     const productBox = document.createElement('div');
+     productBox.classList.add('product-box');
+     productBox.innerHTML = `
+         <img src="${item.image}" alt="${item.title}" onclick="openModal('${item.title}', '${item.image}', '${item.description}')">
+         <h3>${item.title}</h3>
+     `;
+     productDisplay.appendChild(productBox);
+ });
 }
 
 // Functie om het modaal venster te openen
 function openModal(title, image, description) {
-    document.getElementById("modal-title").innerText = title;
-    document.getElementById("modal-image").src = image;
-    document.getElementById("modal-description").innerText = description;
+ document.getElementById("modal-title").innerText = title;
+ document.getElementById("modal-image").src = image;
+ document.getElementById("modal-description").innerText = description;
 
-    // Zet het modaal venster zichtbaar
-    document.getElementById("modal").style.display = "block";
+ // Zet het modaal venster zichtbaar
+ document.getElementById("modal").style.display = "block";
 }
 
 // Functie om het modaal venster te sluiten
 function closeModal() {
-    document.getElementById("modal").style.display = "none";
-}
+ document.getElementById("modal").style.display = "none";
+}
\ No newline at end of file
diff --git a/website/style.css b/website/style.css
index deeedc3..96f4138 100644
--- a/website/style.css
+++ b/website/style.css
@@ -92,7 +92,7 @@ body {
 
 .modal img {
     width: 100%;
-    max-width: 200px;
+    max-width: 500px;
     margin: 20px 0;
 }