diff --git a/assets/css/app.css b/assets/css/app.css
index e014874..fe879df 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,188 +1,7 @@
-:root {
-    --primary: hsl(82.3, 54.4%, 44.7%);
-    --secondary: hsl(194.5, 100.0%, 26.9%);
-    --gray: hsl(37.5, 25.0%, 93.7%);
-    --container: hsl(37.5, 50.0%, 96.9%);
-}
+@import "tailwindcss/base";
+@import "tailwindcss/components";
 
-.stepper {
+@import "stepper";
 
-    .fancy-checkbox {
-        display: flex;
-        align-items: center;
-        input {
-            flex: 0 0 auto;
-            width: auto;
-        }
-        span {
-            flex: 1 0 auto;
-        }
-    }
+@import "tailwindcss/utilities";
 
-    .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;
-        }
-    }
-
-    .button-row {
-        display: grid;
-        grid-template-columns: max-content 1fr;
-        grid-gap: 0.5rem;
-    }
-
-    form {
-        font-family: sans-serif;
-        & > div {
-            h2 {
-                color: var(--secondary);
-                text-align: center;
-            }
-
-            .radio-grid {
-                display: grid;
-                grid-gap: 2rem;
-                grid-template-columns: repeat(3, 1fr);
-                margin-top: 1rem;
-
-                label {
-                    height: 20rem;
-                    @media screen and (max-width: 1024px) {
-                        height: 15rem;
-                    }
-                    @media screen and (max-width: 980px) {
-                        height: 14rem;
-                    }
-                    @media screen and (max-width: 768px) {
-                        height: 15rem;
-                    }
-                    @media screen and (max-width: 580px) {
-                        height: 14rem;
-                    }
-                    position: relative;
-
-                    input {
-                        visibility: hidden;
-                        z-index: -99;
-                        position: absolute;
-                    }
-                    input + span {
-                        border: 1px var(--primary) solid;
-                        border-radius: 2rem;
-                        overflow: hidden;
-                        cursor: pointer;
-                        background: white;
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-
-                        span:first-child {
-                            display: flex;
-                            flex: 1 0 0;
-                            justify-content: center;
-                            align-items: center;
-                        }
-
-                        span:nth-child(2) {
-                            flex: 0 0 4rem;
-                            background: var(--gray);
-                            display: flex;
-                            width: 100%;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                    }
-                    input:checked + span {
-                        border-color: var(--secondary);
-                    }
-
-                    svg {
-                        color: var(--secondary);
-                        fill: currentColor;
-                        width: 5.625rem;
-                        height: 5.625rem;
-                        @media screen and (max-width: 580px) {
-                            width: 4rem;
-                            height: 4rem;
-                            &.icon-immobilienfinanzierung {
-                                width: 5rem;
-                                height: 5rem;
-                            }
-                        }
-                    }
-                    svg.icon-immobilienfinanzierung {
-                        width: 9.6875rem;
-                        height: 9.6875rem;
-                    }
-                }
-            }
-
-            .form-container {
-                background: var(--container);
-                border-radius: 2rem;
-                padding: 3rem;
-                display: grid;
-                grid-gap: 1rem;
-
-                .separator {
-                    background: white;
-                    height: 5px;
-                }
-
-                .form-grid {
-                    display: grid;
-                    grid-gap: 0.5rem;
-                    grid-template-columns: 2fr 3fr 30px;
-                    align-items: center;
-
-                    input[type="text"], input[type="number"], input[type="tel"] {
-                        font-weight: bold;
-                        border: var(--primary) 1px solid;
-                        text-align: right;
-                    }
-
-                    input::-webkit-outer-spin-button,
-                    input::-webkit-inner-spin-button {
-                        -webkit-appearance: none;
-                        margin: 0;
-                    }
-
-                    .unit {
-                        text-align: right;
-                    }
-
-                    .comment {
-                        grid-column: 1 / -1;
-                        font-size: 1.5rem;
-                    }
-                }
-            }
-        }
-    }
-
-    .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/css/stepper.css b/assets/css/stepper.css
new file mode 100644
index 0000000..e014874
--- /dev/null
+++ b/assets/css/stepper.css
@@ -0,0 +1,188 @@
+:root {
+    --primary: hsl(82.3, 54.4%, 44.7%);
+    --secondary: hsl(194.5, 100.0%, 26.9%);
+    --gray: hsl(37.5, 25.0%, 93.7%);
+    --container: hsl(37.5, 50.0%, 96.9%);
+}
+
+.stepper {
+
+    .fancy-checkbox {
+        display: flex;
+        align-items: center;
+        input {
+            flex: 0 0 auto;
+            width: auto;
+        }
+        span {
+            flex: 1 0 auto;
+        }
+    }
+
+    .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;
+        }
+    }
+
+    .button-row {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        grid-gap: 0.5rem;
+    }
+
+    form {
+        font-family: sans-serif;
+        & > div {
+            h2 {
+                color: var(--secondary);
+                text-align: center;
+            }
+
+            .radio-grid {
+                display: grid;
+                grid-gap: 2rem;
+                grid-template-columns: repeat(3, 1fr);
+                margin-top: 1rem;
+
+                label {
+                    height: 20rem;
+                    @media screen and (max-width: 1024px) {
+                        height: 15rem;
+                    }
+                    @media screen and (max-width: 980px) {
+                        height: 14rem;
+                    }
+                    @media screen and (max-width: 768px) {
+                        height: 15rem;
+                    }
+                    @media screen and (max-width: 580px) {
+                        height: 14rem;
+                    }
+                    position: relative;
+
+                    input {
+                        visibility: hidden;
+                        z-index: -99;
+                        position: absolute;
+                    }
+                    input + span {
+                        border: 1px var(--primary) solid;
+                        border-radius: 2rem;
+                        overflow: hidden;
+                        cursor: pointer;
+                        background: white;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+
+                        span:first-child {
+                            display: flex;
+                            flex: 1 0 0;
+                            justify-content: center;
+                            align-items: center;
+                        }
+
+                        span:nth-child(2) {
+                            flex: 0 0 4rem;
+                            background: var(--gray);
+                            display: flex;
+                            width: 100%;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                    }
+                    input:checked + span {
+                        border-color: var(--secondary);
+                    }
+
+                    svg {
+                        color: var(--secondary);
+                        fill: currentColor;
+                        width: 5.625rem;
+                        height: 5.625rem;
+                        @media screen and (max-width: 580px) {
+                            width: 4rem;
+                            height: 4rem;
+                            &.icon-immobilienfinanzierung {
+                                width: 5rem;
+                                height: 5rem;
+                            }
+                        }
+                    }
+                    svg.icon-immobilienfinanzierung {
+                        width: 9.6875rem;
+                        height: 9.6875rem;
+                    }
+                }
+            }
+
+            .form-container {
+                background: var(--container);
+                border-radius: 2rem;
+                padding: 3rem;
+                display: grid;
+                grid-gap: 1rem;
+
+                .separator {
+                    background: white;
+                    height: 5px;
+                }
+
+                .form-grid {
+                    display: grid;
+                    grid-gap: 0.5rem;
+                    grid-template-columns: 2fr 3fr 30px;
+                    align-items: center;
+
+                    input[type="text"], input[type="number"], input[type="tel"] {
+                        font-weight: bold;
+                        border: var(--primary) 1px solid;
+                        text-align: right;
+                    }
+
+                    input::-webkit-outer-spin-button,
+                    input::-webkit-inner-spin-button {
+                        -webkit-appearance: none;
+                        margin: 0;
+                    }
+
+                    .unit {
+                        text-align: right;
+                    }
+
+                    .comment {
+                        grid-column: 1 / -1;
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .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/Stepper.vue b/assets/js/Stepper.vue
index 1a37a7a..e42d453 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -1,11 +1,60 @@
 <template>
-    <div>
-        aaa
+    <div class="slider" ref="stepper">
+        <div>
+            <a href="#" @click.prevent="step++">weiter</a>
+        </div>
+        <div>
+            aaaa
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-    
+    data: function() {
+        return {
+            innerStep: 0,
+            slideCount: 2,
+        };
+    },
+    computed: {
+        step: {
+            set(index) {
+                var _self = this;
+                this.innerStep = index;
+
+                this.$nextTick(function() {
+                    _self.$refs.stepper.scrollLeft = _self.$refs.stepper.scrollWidth / _self.slideCount * index;
+                });
+            },
+            get() {
+                return this.innerStep;
+            }
+        },
+    },
+    methods: {
+        slideTo(e, index) {
+            if (e !== null) {
+                e.preventDefault();
+            }
+
+            var _self = this;
+            this.step = index;
+
+            if (index === 0) {
+                window.setTimeout(function() {
+                    _self.value.kind = null;
+                }, 500);
+            }
+
+            jQuery('html, body').stop().animate({
+                'scrollTop': jQuery('#stepper-main').offset().top
+            }, 600, 'swing');
+
+            this.$nextTick(function() {
+                _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
+            });
+        }
+    }
 };
 </script>