diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css
index 4a568e7..c1e366f 100644
--- a/assets/styles/components/button.css
+++ b/assets/styles/components/button.css
@@ -1,7 +1,7 @@
 .button {
     @apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
-    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
+    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
 }
 
@@ -20,42 +20,47 @@
 }
 
 .button--secondary {
-    @apply bg-none bg-primary-dark text-white;
-    @apply hover:bg-primary-light/80;
+    @apply bg-none bg-primary-light text-white;
+    @apply hover:bg-primary-light/50;
+}
+
+.button--neutral {
+    @apply bg-none bg-gray-200;
+    @apply hover:bg-gray-200/50;
 }
 
 .sbw {
     .button--primary {
         @apply bg-none bg-sbw-secondary text-white;
-        @apply hover:bg-none hover:bg-sbw-primary/80;
+        @apply hover:bg-none hover:bg-sbw-primary/50;
     }
 
     .button--secondary {
         @apply bg-none bg-sbw-primary-dark text-white;
-        @apply hover:bg-none hover:bg-sbw-primary/80;
+        @apply hover:bg-none hover:bg-sbw-primary/50;
     }
 }
 
 .snz {
     .button--primary {
         @apply bg-none bg-snz-secondary text-white;
-        @apply hover:bg-none hover:bg-snz-primary/80;
+        @apply hover:bg-none hover:bg-snz-primary/50;
     }
 
     .button--secondary {
         @apply bg-none bg-snz-primary-dark text-white;
-        @apply hover:bg-none hover:bg-snz-primary/80;
+        @apply hover:bg-none hover:bg-snz-primary/50;
     }
 }
 
 .ser {
     .button--primary {
         @apply bg-none bg-ser-secondary text-white;
-        @apply hover:bg-none hover:bg-ser-primary/80;
+        @apply hover:bg-none hover:bg-ser-primary/50;
     }
 
     .button--secondary {
         @apply bg-none bg-ser-primary text-white;
-        @apply hover:bg-none hover:bg-ser-primary/80;
+        @apply hover:bg-none hover:bg-ser-primary/50;
     }
 }
diff --git a/templates/booking/create/step_2.html.twig b/templates/booking/create/step_2.html.twig
index 3974d15..a67310b 100644
--- a/templates/booking/create/step_2.html.twig
+++ b/templates/booking/create/step_2.html.twig
@@ -62,15 +62,23 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <button type="button"
+                        title="Buchung abbrechen"
                         hx-get="{{ path('app_booking_cancel') }}"
                         hx-target="body"
                         hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        class="button button--neutral w-10 h-10 px-0">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
-                    Weiter zu Schritt 3
-                </button>
+                <div class="flex items-center gap-2">
+                    <a href="{{ path('app_booking_create_step_1') }}"
+                       class="button button--secondary"
+                       {{ qa_attribute('btn-back') }}>
+                        Zurück
+                    </a>
+                    <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
+                        Weiter zu Schritt 3
+                    </button>
+                </div>
             </div>
         </div>
     {{ form_rest(form) }}
diff --git a/templates/booking/create/step_2_participant.html.twig b/templates/booking/create/step_2_participant.html.twig
index ef4b847..db3f3e8 100644
--- a/templates/booking/create/step_2_participant.html.twig
+++ b/templates/booking/create/step_2_participant.html.twig
@@ -37,8 +37,8 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between">
                 <a href="{{ path('app_booking_create_step_2') }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                   class="button button--secondary">
+                    Zurück
                 </a>
                 <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern
diff --git a/templates/booking/create/step_3.html.twig b/templates/booking/create/step_3.html.twig
index c02face..177fe6b 100644
--- a/templates/booking/create/step_3.html.twig
+++ b/templates/booking/create/step_3.html.twig
@@ -72,15 +72,23 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <button type="button"
+                        title="Buchung abbrechen"
                         hx-get="{{ path('app_booking_cancel') }}"
                         hx-target="body"
                         hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        class="button button--neutral w-10 h-10 px-0">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
-                    Weiter zu Schritt 4
-                </button>
+                <div class="flex items-center gap-2">
+                    <a href="{{ path('app_booking_create_step_2') }}"
+                       class="button button--secondary"
+                       {{ qa_attribute('btn-back') }}>
+                        Zurück
+                    </a>
+                    <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
+                        Weiter zu Schritt 4
+                    </button>
+                </div>
             </div>
         </div>
     {{ form_rest(form) }}
diff --git a/templates/booking/create/step_4.html.twig b/templates/booking/create/step_4.html.twig
index 70be8f8..dea984b 100644
--- a/templates/booking/create/step_4.html.twig
+++ b/templates/booking/create/step_4.html.twig
@@ -565,19 +565,27 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <button type="button"
+                        title="Buchung abbrechen"
                         hx-get="{{ path('app_booking_cancel') }}"
                         hx-target="body"
                         hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        class="button button--neutral w-10 h-10 px-0">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
-                    {% if bookingCreateDto.bookingStatus == 'A' %}
-                        Anfragen
-                    {% else %}
-                        Verbindlich buchen
-                    {% endif %}
-                </button>
+                <div class="flex items-center gap-2">
+                    <a href="{{ path('app_booking_create_step_3') }}"
+                       class="button button--secondary"
+                       {{ qa_attribute('btn-back') }}>
+                        Zurück
+                    </a>
+                    <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
+                        {% if bookingCreateDto.bookingStatus == 'A' %}
+                            Anfragen
+                        {% else %}
+                            Verbindlich buchen
+                        {% endif %}
+                    </button>
+                </div>
             </div>
         </div>
     {{ form_rest(form) }}