diff --git a/layouts/base.htm b/layouts/base.htm
index 9980bdd..acfdfc5 100644
--- a/layouts/base.htm
+++ b/layouts/base.htm
@@ -3,7 +3,7 @@
 <!doctype html>
 <html lang="it">
     {% partial 'shared/head' %}
-<body class="font-nunito dark">
+<body class="font-nunito">
     {% partial 'shared/header' %}
     {% page %}
     {% partial 'shared/footer' %}
diff --git a/pages/homepage.htm b/pages/homepage.htm
index bd71c82..245ac38 100644
--- a/pages/homepage.htm
+++ b/pages/homepage.htm
@@ -16,21 +16,27 @@ is_hidden = 0
         </div>
     </div>
 
-    <section id="ablauf" class="py-10 comtainer mx-auto">
-        {% partial 'heading' title="Ablauf" %}
-        <div class="px-6">
-            {% partial 'listelement' title="Anfragen" number="1" content='Fülle das folgende <a href="#buchen">Formular</a> aus und sende uns so eine Buchungsanfrage.' %}
-            {% partial 'listelement' title="Rückmeldung" number="2" content='Wir melden uns innerhalb von einigen Tagen per E-Mail bei dir und senden dir ein Vertragsdokument als PDF zu.' %}
-            {% partial 'listelement' title="Bestätigung" number="3" content='Sende uns den Vertrag unterschrieben per Post zurück.' %}
-            {% partial 'listelement' title="Bezahlung" number="4" content='Überweise den fälligen Betrag (lt. Vertrag) an uns' %}
-            {% partial 'listelement' title="Übergabe" number="5" content='Ein Ansprechpartner wird sich 1-2 Wochen vor der Veranstaltung bei dir melden und einen Termin für die Schlüsselübergabe vereinbaren. Diese erfolgt i.d.R. 1-2 Tage vor der Veranstaltung. Bitte bringe hier die vereinbarte Kaution in Bar mit.' %}
-            {% partial 'listelement' title="Nach der Party: Abnahme durch den Ansprechpartner" number="6" content='Einen Tag nach der Party übergibst du die Schlüssel zurück an den Ansprechpartner und erhälst (sofern alles korrekt hinterlassen wurde) deine Kaution zurück.' %}
-        </div>
-    </section>
+    <div class="container mx-auto py-10 px-6">
+        <div class="flex space-x-6 items-start">
+            <section id="ablauf" class="grow">
+                {% partial 'heading' title="Ablauf" %}
+                <div>
+                    {% partial 'listelement' title="Anfragen" number="1" content='Fülle das folgende <a href="#buchen">Formular</a> aus und sende uns so eine Buchungsanfrage.' %}
+                    {% partial 'listelement' title="Rückmeldung" number="2" content='Wir melden uns innerhalb von einigen Tagen per E-Mail bei dir und senden dir ein Vertragsdokument als PDF zu.' %}
+                    {% partial 'listelement' title="Bestätigung" number="3" content='Sende uns den Vertrag unterschrieben per Post zurück.' %}
+                    {% partial 'listelement' title="Bezahlung" number="4" content='Überweise den fälligen Betrag (lt. Vertrag) an uns' %}
+                    {% partial 'listelement' title="Übergabe" number="5" content='Ein Ansprechpartner wird sich 1-2 Wochen vor der Veranstaltung bei dir melden und einen Termin für die Schlüsselübergabe vereinbaren. Diese erfolgt i.d.R. 1-2 Tage vor der Veranstaltung. Bitte bringe hier die vereinbarte Kaution in Bar mit.' %}
+                    {% partial 'listelement' title="Nach der Party: Abnahme durch den Ansprechpartner" number="6" content='Einen Tag nach der Party übergibst du die Schlüssel zurück an den Ansprechpartner und erhälst (sofern alles korrekt hinterlassen wurde) deine Kaution zurück.' %}
+                </div>
+            </section>
 
-    <section id="anfrage" class="py-10 container mx-auto">
-        {% partial 'heading' title="Anfrage" %}
-        {% component 'anfrage' %}
-    </section>
+            <section id="anfrage" class="shadow-xl bg-neutral-200 border border-neutral-200 rounded-xl p-3 w-2/5 flex-none">
+                {% partial 'heading' title="Anfrage" %}
+                <div class="mt-4">
+                    {% component 'anfrage' %}
+                </div>
+            </section>
+        </div>
+    </div>
 </div>
 
diff --git a/partials/anfrage/default.htm b/partials/anfrage/default.htm
index 9975770..a8a3a49 100644
--- a/partials/anfrage/default.htm
+++ b/partials/anfrage/default.htm
@@ -1,29 +1,49 @@
-<form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2">
-    <span>Vorname</span>
-    <input type="text" name="firstname" class="border-gray-700 border-2" />
-    <span>Nachname</span>
-    <input type="text" name="lastname" class="border-gray-700 border-2" />
-    <span>Telefonnummer</span>
-    <input type="text" name="phone" class="border-gray-700 border-2" />
-    <span>E-Mail-Adressse</span>
-    <input type="text" name="email" class="border-gray-700 border-2" />
-    <span>Grund für die Feier</span>
-    <input type="text" name="reason" class="border-gray-700 border-2" />
-    <span>Wie viele Gäste werden erwartet</span>
-    <input type="text" name="guests" class="border-gray-700 border-2" />
-    <span>Was du sonst noch loswerden willst</span>
-    <textarea name="misc" rows="5" class="border-gray-700 border-2"></textarea>
-    <span>Gewünschtes Datum</span>
-    <div class="relative max-w-sm">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-         <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
-          </svg>
-      </div>
-      <input datepicker datepicker-autohide  datepicker-format="dd.mm.yyyy" name="date" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Datum auswählen">
+<form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-2 gap-3">
+
+    <div class="col-span-full">
+      <label for="reason" class="block text-sm font-medium text-gray-900 dark:text-white">Grund für die Feier</label>
+      <input id="reason" name="reason" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="z.B. 18. Geburtstag">
     </div>
 
-    <div class="flex justify-center col-span-full">
-        <button class="py-3 px-6 rounded bg-gray-600 text-xl font-bold text-gray-300" type="submit">Absenden</button>
+    <div>
+      <label for="firstname" class="block text-sm font-medium text-gray-900 dark:text-white">Vorname</label>
+      <input id="firstname" name="firstname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+    </div>
+
+    <div>
+      <label for="lastname" class="block text-sm font-medium text-gray-900 dark:text-white">Nachname</label>
+      <input id="lastname" name="lastname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+    </div>
+
+    <div>
+      <label for="phone" class="block text-sm font-medium text-gray-900 dark:text-white">Telefonnummer</label>
+      <input id="phone" name="phone" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+    </div>
+
+    <div>
+      <label for="email" class="block text-sm font-medium text-gray-900 dark:text-white">E-Mail-Adresse</label>
+      <input id="email" name="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+    </div>
+
+    <div>
+      <label for="date" class="block text-sm font-medium text-gray-900 dark:text-white">Gewünschtes Datum</label>
+      <input id="date" name="date" datepicker datepicker-autohide  datepicker-format="dd.mm.yyyy" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+    </div>
+
+    <div>
+      <label for="guests" class="block text-sm font-medium text-gray-900 dark:text-white">Wie viele Gäste werden erwartet?</label>
+      <input id="guests" name="guests" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+    </div>
+
+    <div class="col-span-full">
+      <label for="misc" class="block text-sm font-medium text-gray-900 dark:text-white">Was du sonst noch loswerden willst …</label>
+      <textarea id="misc" name="misc" rows="5" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"></textarea>
+    </div>
+
+
+    <div class="flex justify-center col-span-full mt-5">
+        <button class="py-2 px-6 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">Absenden</button>
     </div>
 </form>
+
+
diff --git a/partials/heading.htm b/partials/heading.htm
index 8cb3ce0..55723b2 100644
--- a/partials/heading.htm
+++ b/partials/heading.htm
@@ -1 +1 @@
-<h1 class="font-bold text-center text-3xl">{{title}}</h1>
+<h1 class="font-bold {{class}} text-3xl">{{title}}</h1>
diff --git a/partials/listelement.htm b/partials/listelement.htm
index a12f160..1e73e1d 100644
--- a/partials/listelement.htm
+++ b/partials/listelement.htm
@@ -1,9 +1,9 @@
 <div class="mt-3">
-    <div class="flex">
-        <div class="flex-none bg-gray-900 text-white w-12 h-12 flex items-center justify-center rounded-full text-2xl">{{number}}</div>
-        <div class="ml-5">
-            <div class="text-2xl">{{title}}</div>
-            <div class="text-xl"> {{ content | raw }} </div>
-        </div>
+    <div class="flex items-center">
+        <div class="flex-none bg-neutral-900 text-white w-10 h-10 flex items-center justify-center rounded-full text-xl shadow font-semibold">{{number}}</div>
+        <div class="text-2xl ml-6 font-semibold">{{title}}</div>
+    </div>
+    <div class="ml-16 text-lg">
+        {{ content | raw }}
     </div>
 </div>
