diff --git a/new-registration-app/templates/event.html b/new-registration-app/templates/event.html
index 4714ddf..3ee5a01 100644
--- a/new-registration-app/templates/event.html
+++ b/new-registration-app/templates/event.html
@@ -18,21 +18,19 @@
 <hr class="hr"/>
 <p class="h3">Anmeldungen</p>
 <div class="container">
-    <div class="row">
+    <div class="row m-2">
         <div class="col-md-4 d-flex justify-content-center align-items-center flex-column">
             <!-- Button trigger modal -->
-            <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#registration">
+            <button type="button" class="btn btn-primary mb-2 w-100" data-bs-toggle="modal" data-bs-target="#registration">
                 Anmeldung hinzufügen
             </button>
-            <button type="button" class="btn btn-primary mb-2 {% if event.all_teams_max() %}disabled{% endif %}" data-bs-toggle="modal" data-bs-target="#teamRegistration">
+            <button type="button" class="btn btn-primary mb-2 w-100" {% if event.all_teams_max() %}disabled{% endif %} data-bs-toggle="modal" data-bs-target="#teamRegistration">
                 Dienst übernehmen
             </button>
             {% if event.recipe_link %}
-            <div class="mb-3">
-                <a href="{{ event.recipe_link }}" class="btn btn-outline-primary" target="_blank">
-                    <i class="bi bi-book"></i> Original Rezept ansehen
-                </a>
-            </div>
+            <a href="{{ event.recipe_link }}" class="btn btn-outline-primary mb-2 w-100" target="_blank">
+                <i class="bi bi-book"></i> Original Rezept ansehen
+            </a>
             {% endif %}
         </div>
         <div class="col-md-4">
@@ -95,28 +93,61 @@
         </div>
     </div>
 
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col">Haushalt</th>
-      <th scope="col">Erwachsene</th>
-      <th scope="col">Kinder</th>
-      <th scope="col">Kleinkinder</th>
-      <th scope="col">Löschen</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for reg in event.registrations %}
-    <tr>
-      <td>{{ reg.household.name }}</td>
-      <td>{{ reg.num_adult_meals }}</td>
-      <td>{{ reg.num_children_meals }}</td>
-      <td>{{ reg.num_small_children_meals }}</td>
-      <td><a href="/event/{{event.id}}/registration/{{reg.household_id}}/delete"><i class="bi bi-trash"></i></a></td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+    <!-- Desktop table view -->
+    <div class="d-none d-md-block">
+        <table class="table">
+            <thead>
+            <tr>
+                <th scope="col">Haushalt</th>
+                <th scope="col">Erwachsene</th>
+                <th scope="col">Kinder</th>
+                <th scope="col">Kleinkinder</th>
+                <th scope="col">Löschen</th>
+            </tr>
+            </thead>
+            <tbody>
+            {% for reg in event.registrations %}
+            <tr>
+                <td>{{ reg.household.name }}</td>
+                <td>{{ reg.num_adult_meals }}</td>
+                <td>{{ reg.num_children_meals }}</td>
+                <td>{{ reg.num_small_children_meals }}</td>
+                <td><a href="/event/{{event.id}}/registration/{{reg.household_id}}/delete"><i class="bi bi-trash"></i></a></td>
+            </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Mobile card view -->
+    <div class="d-md-none">
+        {% for reg in event.registrations %}
+        <div class="card mb-3">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-start mb-2">
+                    <h5 class="card-title mb-0">{{ reg.household.name }}</h5>
+                    <a href="/event/{{event.id}}/registration/{{reg.household_id}}/delete" class="text-danger">
+                        <i class="bi bi-trash"></i>
+                    </a>
+                </div>
+                <div class="row mt-3">
+                    <div class="col-4 text-center">
+                        <div class="text-muted small">Erwachsene</div>
+                        <div class="fw-bold">{{ reg.num_adult_meals }}</div>
+                    </div>
+                    <div class="col-4 text-center">
+                        <div class="text-muted small">Kinder</div>
+                        <div class="fw-bold">{{ reg.num_children_meals }}</div>
+                    </div>
+                    <div class="col-4 text-center">
+                        <div class="text-muted small">Kleinkinder</div>
+                        <div class="fw-bold">{{ reg.num_small_children_meals }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
     </div>
 <!-- Modal -->
 <div class="modal fade" id="registration" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
@@ -143,18 +174,18 @@
                     <div class="row">
                         <div class="col">
                             <label for="InputAdults" class="form-label">Anzahl Erwachsene</label>
-                            <input name="numAdults" id="InputAdults" type="text" class="form-control"
-                                   aria-label="Anzahl Erwachsene">
+                            <input name="numAdults" id="InputAdults" type="number" class="form-control"
+                                   aria-label="Anzahl Erwachsene" min="0" step="1" inputmode="numeric">
                         </div>
                         <div class="col">
                             <label for="InputKids" class="form-label">Anzahl Kinder >7 </label>
-                            <input name="numKids" id="InputKids" type="text" class="form-control"
-                                   aria-label="Anzahl Kinder >7">
+                            <input name="numKids" id="InputKids" type="number" class="form-control"
+                                   aria-label="Anzahl Kinder >7" min="0" step="1" inputmode="numeric">
                         </div>
                         <div class="col">
                             <label for="InputSmallKids" class="form-label">Anzahl Kinder <7 </label>
-                            <input name="numSmallKids" id="InputSmallKids" type="text" class="form-control"
-                                   aria-label="Anzahl Kinder <7">
+                            <input name="numSmallKids" id="InputSmallKids" type="number" class="form-control"
+                                   aria-label="Anzahl Kinder <7" min="0" step="1" inputmode="numeric">
                         </div>
 
                     </div>