diff --git a/public/buyModal.js b/public/buyModal.js
index e09e649..4110908 100644
--- a/public/buyModal.js
+++ b/public/buyModal.js
@@ -1,13 +1,5 @@
-// =======================
-// CONFIGURATION
-// =======================
-const WEBHOOK_URL = "https://your-webhook-url.com"; // <-- Set your webhook here
+const WEBHOOK_URL = "https://your-webhook-url.com";
 
-// =======================
-// HELPER FUNCTIONS
-// =======================
-
-// Create the modal form HTML
 function createModal() {
     const modal = document.createElement("div");
     modal.id = "buyNowModal";
@@ -23,46 +15,50 @@ function createModal() {
     modal.style.zIndex = "1000";
 
     modal.innerHTML = `
-        <div style="background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; position: relative;">
-            <span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold;">&times;</span>
-            <h2>Buy Product</h2>
-            <form id="buyForm">
-                <label>Name:<br><input type="text" name="name" required></label><br><br>
-                <label>Company:<br><input type="text" name="company" required></label><br><br>
-                <label>Country:<br><input type="text" name="country" required></label><br><br>
-                <label>Street:<br><input type="text" name="street" required></label><br><br>
-                <label>ZIP:<br><input type="text" name="zip" required></label><br><br>
-                <label>Town:<br><input type="text" name="town" required></label><br><br>
-                <label>Email:<br><input type="email" name="email" required></label><br><br>
-                <label>Product:<br><input type="text" name="product" readonly></label><br><br>
-                <button type="submit">Submit</button>
+        <div style="background: #fff; padding: 25px; border-radius: 12px; max-width: 450px; width: 95%; position: relative; font-family: sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
+            <span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold; font-size: 20px;">&times;</span>
+            <h2 style="margin-bottom: 10px;">Order Details</h2>
+            <p id="productText" style="margin-bottom: 20px; font-weight: 500;"></p>
+            <form id="buyForm" style="display: flex; flex-direction: column; gap: 12px;">
+                <input type="text" name="name" placeholder="Name" required>
+                <input type="text" name="company" placeholder="Company" required>
+                <input type="text" name="country" placeholder="Country" required>
+                <input type="text" name="street" placeholder="Street" required>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" name="zip" placeholder="ZIP" required style="flex: 1;">
+                    <input type="text" name="town" placeholder="Town" required style="flex: 2;">
+                </div>
+                <input type="email" name="email" placeholder="Email" required>
+                <input type="hidden" name="product">
+                <input type="hidden" name="price">
+                <button type="submit" style="padding: 10px; background: #007BFF; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">Submit</button>
             </form>
         </div>
     `;
 
     document.body.appendChild(modal);
-
-    // Close button
-    document.getElementById("closeModal").onclick = () => {
-        modal.style.display = "none";
-    };
-
-    // Close modal on outside click
-    modal.onclick = (e) => {
-        if (e.target === modal) modal.style.display = "none";
-    };
-
+    document.getElementById("closeModal").onclick = () => { modal.style.display = "none"; };
+    modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
     return modal;
 }
 
-// Show modal and set product
 function openModal(productHref) {
     const modal = document.getElementById("buyNowModal");
     modal.style.display = "flex";
-    modal.querySelector('input[name="product"]').value = productHref;
+
+    let product = productHref;
+    let price = "";
+    if (productHref.includes("/")) {
+        const parts = productHref.split("/").filter(Boolean);
+        product = parts[parts.length - 2] || "Product";
+        price = parts[parts.length - 1] || "0";
+    }
+
+    modal.querySelector('input[name="product"]').value = product;
+    modal.querySelector('input[name="price"]').value = price;
+    modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`;
 }
 
-// Handle form submission
 function handleFormSubmit() {
     const form = document.getElementById("buyForm");
     form.addEventListener("submit", async (e) => {
@@ -91,23 +87,20 @@ function handleFormSubmit() {
     });
 }
 
-// Attach modal to buttons
 function attachButtons() {
     const buttons = Array.from(document.querySelectorAll("button, a"));
     buttons.forEach(btn => {
-        if (btn.textContent.trim() === "Buy Now") {
+        const text = btn.textContent.trim();
+        if (text === "Buy Now" || text === "Book Now") {
             btn.addEventListener("click", (e) => {
                 e.preventDefault();
-                const href = btn.getAttribute("href") || btn.dataset.product || "Unknown Product";
+                const href = btn.getAttribute("href") || btn.dataset.product || "Unknown/0";
                 openModal(href);
             });
         }
     });
 }
 
-// =======================
-// INIT
-// =======================
 document.addEventListener("DOMContentLoaded", () => {
     createModal();
     handleFormSubmit();
diff --git a/public/index.html.template b/public/index.html.template
index 4982fd4..695d499 100644
--- a/public/index.html.template
+++ b/public/index.html.template
@@ -12,6 +12,9 @@
 
   <script>const configUrl = `https://od8n.com/widget/custom/od8n.json`;</script>
   <script src="widget/widget.js"></script>
+  <script src="buyModal.js"></script>
+
+
   <link rel="stylesheet" href="widget/custom/od8n.css">
 
 
@@ -212,7 +215,7 @@
 	      <a href="/agenda/q1-2026.pdf" class="agenda-link">Download Agenda</a>
 	        <div class="workshop-action">
 	          <span class="price">$450.00 <br> per Person</span>
-	          <a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q1-2026" 
+	          <a href="https://Q1-2026/450.00" 
 	            target="_blank" 
 	            class="btn-secondary">
 	            Book Now
@@ -228,7 +231,7 @@
 	      <a href="/agenda/q2-2026.pdf" class="agenda-link">Download Agenda</a>
 	      <div class="workshop-action">
 	        <span class="price">$450.00 <br> per Person</span>
-	          <a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q2-2026" 
+	          <a href="https://Q2-2026/450.00" 
 	            target="_blank" 
 	            class="btn-secondary">
 	            Book Now
@@ -246,7 +249,7 @@
 	      <a href="/agenda/q3-2026.pdf" class="agenda-link">Download Agenda</a>
 	      <div class="workshop-action">
 	        <span class="price">$450.00 <br> per Person</span>
-	         <a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q3-2026" 
+	         <a href="https://Q3-2026/450.00" 
 	            target="_blank" 
 	            class="btn-secondary">
 	            Book Now
@@ -263,7 +266,7 @@
 	      <a href="/agenda/q4-2026.pdf" class="agenda-link">Download Agenda</a>
 	      <div class="workshop-action">
 	        <span class="price">$450.00 <br> per Person</span>
-	          <a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q4-2026" 
+	          <a href="https://Q4-2026/450.00" 
 	            target="_blank" 
 	            class="btn-secondary">
 	            Book Now