diff --git a/pages/_app.js b/pages/_app.js
index 76585b4..558d4d1 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,9 @@
 import 'react-dates/lib/css/_datepicker.css'
 
+import moment from 'moment'
+import deLocale from 'moment/locale/de';
+
+
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
diff --git a/pages/index.js b/pages/index.js
index 0503887..cc70017 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,16 +1,9 @@
 import Head from 'next/head'
-import { useState } from 'react'
 
-import moment from 'moment'
-
-import 'react-dates/initialize'
-import { DateRangePicker } from 'react-dates'
+import Step1 from './step1';
 
 export default function Home() {
 
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
-  const [focusedInput, setFocusedInput ] = useState(null);
   return (
     <div className="container">
       <Head>
@@ -25,27 +18,7 @@ export default function Home() {
           Du willst das Pfadi Bussle buchen? Hier bist du richtig!
         </p>
 
-      <section>
-        <form>
-          <label>Ich will das Bussle für</label>
-          <input type="radio" id="single" name="days" value="singleDay"/>
-          <label for="single">einen Tag</label> 
-          <input type="radio" id="multiple" name="days" value="multipleDays"/>
-          <label for="multiple">mehrere Tage</label>
-
-          <DateRangePicker
-            startDate={startDate}
-            startDateId="bussle_start_date_id"
-            endDate={endDate}
-            endDateId="bussle_end_date_id"
-            onDatesChange={({ startDate, endDate }) => setStartDate(startDate) && setEndDate(endDate)}
-            focusedInput={focusedInput}
-            onFocusChange={focusedInput => setFocusedInput(focusedInput)}
-            minDate={moment()}
-          /> 
-        </form>
-      </section>
-
+        <Step1/>
         
       </main>
 
diff --git a/pages/step1.js b/pages/step1.js
new file mode 100644
index 0000000..48ed49e
--- /dev/null
+++ b/pages/step1.js
@@ -0,0 +1,62 @@
+import { useState } from 'react'
+
+import moment from 'moment'
+
+import 'react-dates/initialize'
+import { DateRangePicker, SingleDatePicker } from 'react-dates'
+
+export default function Home() {
+
+  const [multipleDays, setMultipleDays] = useState(null);
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [focusedInput, setFocusedInput ] = useState(null);
+
+  return (
+    <form>
+      <div>
+        Ich will das Bussle für
+        <div>
+            <input type="radio" id="single" name="days" value="singleDay" onChange={() => setMultipleDays(false)} />
+            <label for="single">einen Tag</label> 
+        </div>
+        <div>
+          <input type="radio" id="multiple" name="days" value="multipleDays" onChange={() => setMultipleDays(true)}/>
+          <label for="multiple">mehrere Tage</label>
+        </div>
+        {' '}mieten
+      </div>
+
+      { multipleDays === false && (
+        <div>
+          <SingleDatePicker
+            date={startDate}
+            onDateChange={date => setStartDate(date)}
+            focused={typeof focusedInput === 'boolean' && focusedInput}
+            onFocusChange={({ focused }) => setFocusedInput(focused)}
+            id="your_unique_id"
+          />
+        </div>
+      ) }
+
+      { multipleDays === true && (
+        <div>
+          <DateRangePicker
+            startDate={startDate}
+            startDateId="bussle_start_date_id"
+            endDate={endDate}
+            endDateId="bussle_end_date_id"
+            onDatesChange={({ startDate, endDate }) => {
+              setStartDate(startDate)
+              setEndDate(endDate)
+            }}
+            focusedInput={focusedInput}
+            onFocusChange={focusedInput => setFocusedInput(focusedInput)}
+            minDate={moment()}
+          /> 
+        </div>
+      )}
+    </form>
+  )
+}
