diff --git a/assets/css/app.css b/assets/css/app.css
index 663ffd7..d90e324 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -11,6 +11,18 @@ body {
 }
 
 .stepper {
+    .slider {
+        display: flex;
+        flex-wrap: nowrap;
+        scroll-snap-type: x proximity;
+        scroll-behavior: smooth;
+        overflow-x: hidden;
+        & > * {
+            flex: 0 0 100%;
+            scroll-snap-align: start;
+        }
+    }
+
     form {
         font-family: sans-serif;
         background: var(--bg-color);
@@ -104,18 +116,18 @@ body {
                 }
             }
         }
+    }
 
-        .step {
-            height: 5px;
-            position: relative;
-            div {
-                position: absolute;
-                transition: width 0.5s;
-                top: 0;
-                left: 0;
-                height: 100%;
-                background: var(--primary);
-            }
+    .step {
+        height: 5px;
+        position: relative;
+        div {
+            position: absolute;
+            transition: width 0.5s;
+            top: 0;
+            left: 0;
+            height: 100%;
+            background: var(--primary);
         }
     }
 }
diff --git a/assets/js/app.js b/assets/js/app.js
index 21f2664..817cc6b 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -96,7 +96,19 @@ window.stepper = {
         axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
             ...this.value
         }).then(ret => {
-            this.step++;
+            this.slideTo(null, this.step+1);
         });
-    }
+    },
+
+    slideTo(e, index) {
+        if (e !== null) {
+            e.preventDefault();
+        }
+
+        var _self = this;
+        this.step = index;
+        this.$nextTick(function() {
+            _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
+        });
+    },
 };
diff --git a/src/Stepper.php b/src/Stepper.php
index 385148a..8d7cf3b 100644
--- a/src/Stepper.php
+++ b/src/Stepper.php
@@ -22,6 +22,9 @@ class Stepper {
         $this->twig->addFunction(new Func('cprop', function ($aprop, $modifier) {
             return $this->alpineProp($aprop, $modifier);
         }));
+        $this->twig->addFunction(new Func('sliderelement', function ($aprop, $modifier) {
+            return '$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active';
+        }));
     }
     
     public function init() {
@@ -58,9 +61,13 @@ class Stepper {
     }
 
     public function onSubmit() {
-        json_decode(file_get_contents('php://input'));
-        wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', json_decode(file_get_contents('php://input'), true)), [
-            'From' => 'philipp@aweos.de'
+        $payload = json_decode(file_get_contents('php://input'), true);
+
+        wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', $payload, true), [
+            'From' => 'philipp@zoomyboy.de'
+        ]);
+        wp_mail($payload['email'], 'Vielen Dank für Ihre Finanzierungs-Anfrage', $this->twig->render('client.twig.htm', $payload, true), [
+            'From' => 'philipp@zoomyboy.de'
         ]);
 
         die();    
diff --git a/views/client.twig.htm b/views/client.twig.htm
new file mode 100644
index 0000000..21eb4be
--- /dev/null
+++ b/views/client.twig.htm
@@ -0,0 +1,23 @@
+Vielen Dank für Ihre Anfrage.
+
+Anbei Ihre Daten:
+
+Name: {{firstname}} {{lastname}}
+Adresse: {{zip}} {{location}}
+Tel: {{phone}}
+Mail: {{email}}
+
+Anfrage für: {{kind}}
+
+{% if kind == 'kauf' %}
+* Kaufpreis: {{kauf.kaufpreis}} €
+* Modernisierung: {{kauf.modernisierung}} €
+* Baukosten: {{kauf.baukosten}} €
+* Eigenkapital: {{kauf.eigenkapital}} €
+{% endif %}
+{% if kind == 'bau' %}
+* Grundstückspreis: {{bau.grundstueckspreis}} €
+* Bezahlt: {{bau.bezahlt}} €
+* Baukosten: {{bau.baukosten}} €
+* Eigenkapital: {{bau.eigenkapital}} €
+{% endif %}
diff --git a/views/daten.twig.htm b/views/daten.twig.htm
index d4ed79b..9d6c887 100644
--- a/views/daten.twig.htm
+++ b/views/daten.twig.htm
@@ -1,4 +1,4 @@
-<div x-show="step == 2">
+<div>
     <h2 class="gradient">Geben Sie Ihre persönlichen Daten ein</h2>
 
     <div class="form-container">
diff --git a/views/stepper.twig.htm b/views/stepper.twig.htm
index 2210439..8b681c7 100644
--- a/views/stepper.twig.htm
+++ b/views/stepper.twig.htm
@@ -1,75 +1,80 @@
 <div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
+
+    <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+
     <form @submit.prevent="submit">
-        <div x-show="step == 0">
-            <h2>Was möchten Sie finanzieren</h2>
-            <div class="radio-grid">
-                <template x-for="ckind in kinds">
-                    <label>
-                        <input @change="step++" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
-                        <span>
-                            <span x-html="svg(ckind.icon)"></span>
-                            <span x-text="ckind.label"></span>
-                        </span>
-                    </label>
-                </template>
-            </div>
-        </div>
 
-        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
-        {% include 'vorhaben.twig.htm' with {
-            'kind': "bau",
-            bezahlt: true,
-            second: {label: 'Baukosten', value: 'baukosten'},
-            main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
-        } %}
+        <div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
+            <div>
+                <h2>Was möchten Sie finanzieren</h2>
+                <div class="radio-grid">
+                    <template x-for="ckind in kinds">
+                        <label>
+                            <input @change="slideTo($event, step+1)" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
+                            <span>
+                                <span x-html="svg(ckind.icon)"></span>
+                                <span x-text="ckind.label"></span>
+                            </span>
+                        </label>
+                    </template>
+                </div>
+            </div>
 
-        {% include 'vorhaben.twig.htm' with {
-            'kind': "kauf",
-            bezahlt: false,
-            second: {label: 'Modernisierung', value: 'modernisierung'},
-            main: {label: 'Kaufpreis', value: 'kaufpreis'}
-        } %}
+            {% include 'vorhaben.twig.htm' with {
+                'kind': "bau",
+                bezahlt: true,
+                second: {label: 'Baukosten', value: 'baukosten'},
+                main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
+            } %}
 
-        {% include 'daten.twig.htm' %}
+            {% include 'vorhaben.twig.htm' with {
+                'kind': "kauf",
+                bezahlt: false,
+                second: {label: 'Modernisierung', value: 'modernisierung'},
+                main: {label: 'Kaufpreis', value: 'kaufpreis'}
+            } %}
 
-        <div x-show="step == 1 && value.kind == 'anschluss'">
-            <h2 class="gradient">Das Vorhaben in Zahlen</h2>
+            <div x-show="value.kind == 'anschluss'">
+                <h2 class="gradient">Das Vorhaben in Zahlen</h2>
 
-            <div class="form-container">
-                <div class="form-grid">
-                    <label>Objektwert</label>
-                    <input type="text" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
-                    <span class="unit">€</span>
-                </div>
-                <div class="separator"></div>
-                <div class="form-grid">
-                    <label>Umschuldung</label>
-                    <input type="text" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
-                    <span class="unit">€</span>
-                    <span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
+                <div class="form-container">
+                    <div class="form-grid">
+                        <label>Objektwert</label>
+                        <input type="text" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
+                        <span class="unit">€</span>
+                    </div>
+                    <div class="separator"></div>
+                    <div class="form-grid">
+                        <label>Umschuldung</label>
+                        <input type="text" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
+                        <span class="unit">€</span>
+                        <span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
+                    </div>
+                    <div class="separator"></div>
+                    <div class="form-grid">
+                        <label>Zusätzl. Kapital</label>
+                        <input type="text" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
+                        <span  class="unit">€</span>
+                    </div>
+                    <div class="separator primary"></div>
+                    <div>
+                        <div>Darlehensbetrag</div>
+                        <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
+                    </div>
+                    <div class="separator gray"></div>
+                    <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
                 </div>
-                <div class="separator"></div>
-                <div class="form-grid">
-                    <label>Zusätzl. Kapital</label>
-                    <input type="text" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
-                    <span  class="unit">€</span>
-                </div>
-                <div class="separator primary"></div>
-                <div>
-                    <div>Darlehensbetrag</div>
-                    <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
-                </div>
-                <div class="separator gray"></div>
-                <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
             </div>
-        </div>
 
-        <div x-show="step === 3">
-            <div class="form-container">
-                Vielen Dank für Ihre Anfrage.
+            {% include 'daten.twig.htm' %}
+
+            <div>
+                <div class="form-container">
+                    Vielen Dank für Ihre Anfrage.
+                </div>
             </div>
-        </div>
 
+        </div>
 
     </form>
 </div>
diff --git a/views/vorhaben.twig.htm b/views/vorhaben.twig.htm
index 6972ecb..e29ac9c 100644
--- a/views/vorhaben.twig.htm
+++ b/views/vorhaben.twig.htm
@@ -1,4 +1,4 @@
-<div x-show="step == 1 && value.kind == '{{kind}}'">
+<div x-show="value.kind == '{{kind}}'">
     <h2 class="gradient">Ihr Bauvorhaben</h2>
 
     <div class="form-container">
@@ -66,6 +66,6 @@
             <div x-text="units.currency.to(  Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital) / 1000)*1000  )"></div>
         </div>
         <div class="separator gray"></div>
-        <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+        <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
     </div>
 </div>