diff --git a/assets/controllers/form_controller.js b/assets/controllers/form_controller.js
new file mode 100644
index 0000000..0fc5078
--- /dev/null
+++ b/assets/controllers/form_controller.js
@@ -0,0 +1,33 @@
+import {Controller} from "@hotwired/stimulus";
+
+
+export default class extends Controller {
+    static targets = ['ticket', 'afterShowTicket', 'kid12yo', 'kid6yo', 'meat', 'vegetarian', 'vegan', 'error']
+
+    connect() {
+        this.element.addEventListener('submit', (e) => this.submit(e))
+    }
+
+    submit(e) {
+        e.preventDefault();
+        const ticketCount = this.getTotalTicketCount();
+        const foodCount = this.getTotalFoodCount();
+
+        if (foodCount > ticketCount) {
+            this.errorTarget.textContent = 'Sie können nicht mehr Essen als Tickets bestellen';
+        }
+    }
+
+    getTotalTicketCount() {
+        return parseInt(this.ticketTarget.value)
+            + parseInt(this.kid12yoTarget.value)
+            + parseInt(this.kid6yoTarget.value)
+            + parseInt(this.afterShowTicketTarget.value);
+    }
+
+    getTotalFoodCount() {
+        return parseInt(this.meatTarget.value)
+            + parseInt(this.vegetarianTarget.value)
+            + parseInt(this.veganTarget.value);
+    }
+}
\ No newline at end of file
diff --git a/templates/ticket/index.html.twig b/templates/ticket/index.html.twig
index cd0ba9e..7f53ea6 100644
--- a/templates/ticket/index.html.twig
+++ b/templates/ticket/index.html.twig
@@ -20,30 +20,57 @@
                 <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-800 text-center mb-6 sm:mb-8 tracking-tight leading-tight">
                     <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500">Tickets kaufen</span>
                 </h1>
-                
+
                 <div class="bg-white/80 backdrop-blur-md shadow-xl rounded-2xl sm:rounded-3xl p-6 sm:p-8 md:p-10 mb-12 sm:mb-16 transform transition-all duration-300 border border-gray-100">
-                    {{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
+                    {{ form_start(form, { 'attr': { 'class': 'space-y-6', 'data-controller': 'form' } }) }}
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <h2>Tickets</h2>
+                        <br>
                         <div>
                             <label for="ticket" class="block text-sm font-medium text-gray-700 mb-1">Normales Tickets</label>
-                            <input type="number" name="{{ field_name(form.ticket) }}" id="ticket" required value="0"
+                            <input type="number" name="{{ field_name(form.ticket) }}" id="ticket" required value="0" data-form-target="ticket"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                         </div>
 
                         <div>
                             <label for="afterShowTicket" class="block text-sm font-medium text-gray-700 mb-1">After-Show Tickets</label>
-                            <input type="number" name="{{ field_name(form.afterShowTicket) }}" id="afterShowTicket" required value="0"
-                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
-                        </div>
-                        <div>
-                            <label for="12yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 0-6</label>
-                            <input type="number" name="{{ field_name(form.kids12yo) }}" id="12yo" required value="0"
+                            <input type="number" name="{{ field_name(form.afterShowTicket) }}" id="afterShowTicket" required value="0"  data-form-target="afterShowTicket"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                         </div>
 
                         <div>
-                            <label for="6yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 6-12</label>
-                            <input type="number" name="{{ field_name(form.kids6yo) }}" id="6yo" required value="0"
+                            <label for="12yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 6-12</label>
+                            <input type="number" name="{{ field_name(form.kids12yo) }}" id="12yo" required value="0"  data-form-target="kid12yo"
+                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
+                        </div>
+
+                        <div>
+                            <label for="6yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 0-6</label>
+                            <input type="number" name="{{ field_name(form.kids6yo) }}" id="6yo" required value="0"  data-form-target="kid6yo"
+                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
+                        </div>
+
+                        <h2>Essen</h2>
+
+                        <div data-form-target="error"></div>
+
+                        <div>
+                            <label for="meat" class="block text-sm font-medium text-gray-700 mb-1">Fleisch</label>
+                            <input type="number" name="{{ field_name(form.afterShowTicket) }}" id="meat" required value="0"  data-form-target="meat"
+                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
+                        </div>
+
+
+                        <div>
+                            <label for="vegetarian" class="block text-sm font-medium text-gray-700 mb-1">Vegetarier</label>
+                            <input type="number" name="{{ field_name(form.afterShowTicket) }}" id="vegetarian" required value="0"  data-form-target="vegetarian"
+                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
+                        </div>
+
+
+                        <div>
+                            <label for="vegan" class="block text-sm font-medium text-gray-700 mb-1">Veganer</label>
+                            <input type="number" name="{{ field_name(form.afterShowTicket) }}" id="vegan" required value="0"  data-form-target="vegan"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                         </div>
                     </div>
@@ -53,7 +80,7 @@
                             <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Anmerkungen</label>
                             <textarea name="{{ field_name(form.notes) }}" id="notes" rows="4"
                                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors"
-                                placeholder="Optionale Anmerkungen zu Ihrer Bestellung"></textarea>
+                                placeholder="Unverträglichkeiten, Allergien etc."></textarea>
                         </div>
                         
                         <div class="text-center pt-4">