diff --git a/hotovo.zip b/hotovo.zip
new file mode 100644
index 0000000..dcc25dc
Binary files /dev/null and b/hotovo.zip differ
diff --git a/src/App.vue b/src/App.vue
index dd08763..198807c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,71 +3,59 @@
         <h1>Letenka</h1>
         <div class="wrapper">
             <div class="col form">
-                <h2>Parametry letu</h2>
-                <form action="">
-                    <p>
-                        <label for="">Třída: </label>
-                        <select v-model="travelType">
-                            <option value="" disabled>Vyberte jednu možnost</option>
-                            <option v-for="(option, index) in travelTypes" :key="index" :value="option">
-                                    {{ option.text }}
-                            </option>
-                        </select>
-                    </p>
-                    
-                    <!-- volba destinace -->
-                    <p>
-                        <label for="">Destinace: </label>
-                        <select v-model="travelDest">
-                            <option value="" disabled>Vyberte jednu možnost</option>
-                            <option v-for="(option, index) in travelDests" :key="index" :value="option">
-                                 {{ option.text }}
-                            </option>
-                        </select>
-                    </p>
-                    <!-- datum odletu -->
-                    <div v-if="travelType.value == 'R'">
-                        <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" is-range/>
-                    </div>
-                    <div v-else>
-                        <v-date-picker v-model="departureDate" :min-date="new Date()" />
-                    </div>
-                    <!-- datum příletu pokud zpáteční -->
-
-
-                    <p>
-                        <label for="inputPersonCount">Počet cestujících</label><br>
-                        <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
-                    </p>
-                    
-                    <!-- volba třídy E, B -->
-                    <p>
-                        <label for="inputClassType">Volba třídy</label><br>
-                        <select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
-                            <option value="" disabled>Vyberte jednu možnost</option>
-                            <option v-for="(option, index) in classTypes" :key="index" :value="option">
-                                {{ option.text }}
-                            </option>
-                        </select>
-                    </p>
-                    
-                    <div class="seatWrap">
-                        <div class="seat" v-for="(seat, index) in seats" :key="index">
-                            <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
-                                {{ seat }}
-                            </div>
-                            <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
-                                {{ seat }}
+                <div class="wrapper2">
+                    <h2>Parametry letu</h2>
+                        <form action="">
+                            <p>
+                                <label for="">Třída: </label>
+                                <select v-model="travelType">
+                                    <option value="" disabled>Vyberte jednu možnost</option>
+                                    <option v-for="(option, index) in travelTypes" :key="index" :value="option">
+                                            {{ option.text }}
+                                    </option>
+                                </select>
+                            </p>
+                            
+                            <!-- volba destinace -->
+                            <p>
+                                <label for="">Destinace: </label>
+                                <select v-model="travelDest">
+                                    <option value="" disabled>Vyberte jednu možnost</option>
+                                    <option v-for="(option, index) in travelDests" :key="index" :value="option">
+                                        {{ option.text }}
+                                    </option>
+                                </select>
+                            </p>
+                            <!-- datum odletu -->
+                            <div v-if="travelType.value == 'R'">
+                                <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" is-range/>
                             </div>
-                            <div v-else class="disabled">
-                                {{ seat }}
+                            <div v-else>
+                                <v-date-picker v-model="departureDate" :min-date="new Date()" />
                             </div>
-                            
-                        </div>
-                    </div>
-                    <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
-                </form>
+                            <!-- datum příletu pokud zpáteční -->
 
+
+                            <p>
+                                <label for="inputPersonCount">Počet cestujících</label><br>
+                                <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
+                            </p>
+                            
+                            <!-- volba třídy E, B -->
+                            <p>
+                                <label for="inputClassType">Volba třídy</label><br>
+                                <select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
+                                    <option value="" disabled>Vyberte jednu možnost</option>
+                                    <option v-for="(option, index) in classTypes" :key="index" :value="option">
+                                        {{ option.text }}
+                                    </option>
+                                </select>
+                            </p>
+                            <Seat-picker v-model= "chosenSeats" :seats= "seats" :classType= "classType" :personCount= "personCount" />
+                            <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+                            
+                        </form>
+                </div>
             </div>
             <div>
                 <div class="col order">
@@ -86,9 +74,13 @@
                 </p>
                 <p v-if="travelType.value == 'R'">
                     Datum odletu:
-                    {{  departureRangeDate.start }} <br>
+                    {{  departureRangeDate.start.getDate() }}. {{  departureRangeDate.start.getMonth() }}. {{  departureRangeDate.start.getFullYear() }} <br>
                     Datum příletu:
-                    {{  departureRangeDate.end }}
+                    {{  departureRangeDate.end }} <br>
+                </p>
+                <p v-else-if="travelType.value == 'O'">
+                    Datum odletu:
+                    {{  departureDate.getDate() }}. {{  departureDate.start.getMonth() }}. {{  departureDate.start.getFullYear() }} <br>
                 </p>
                 <p v-if="classType">
                     Třída: 
@@ -112,6 +104,7 @@
 <script>
 import Vue from 'vue';
 import VCalendar from 'v-calendar';
+import SeatPicker from './components/SeatPicker'
 
 // Use v-calendar & v-date-picker components
 Vue.use(VCalendar, {});
@@ -120,10 +113,10 @@ Vue.use(VCalendar, {});
 
 export default {
     name: 'App',
+    components : {
+        SeatPicker,
+    },
     data: function() {
-        const date = new Date();
-        const year = date.getFullYear();
-        const month = date.getMonth();
         return {
             travelType: "",
             travelTypes: [
@@ -149,9 +142,9 @@ export default {
                 { value:"Pe", text:"Peking"},
                 { value:"T", text:"Tokio"},
             ],
-            departureDate: new Date(year, month, 12),
+            departureDate: new Date(),
             departureRangeDate: {
-                start: new Date(year, month, 12)
+                start: new Date()
             },
         }
     },
@@ -176,8 +169,13 @@ export default {
 </script>
 
 <style>
+    html{
+        background-color: lightskyblue;
+    }
     .wrapper {
-    background-color: lightgreen;
+    box-shadow: 10px 10px 5px grey;
+    padding: 10px;
+    background-color: white;
     display: grid;
     grid-template-columns: 1fr 1fr;
     }
diff --git a/src/components/SeatPicker.vue b/src/components/SeatPicker.vue
new file mode 100644
index 0000000..2c89611
--- /dev/null
+++ b/src/components/SeatPicker.vue
@@ -0,0 +1,46 @@
+<template>
+    <div >
+        <div class="seatWrap">
+            <div class="seat" v-for="(seat, index) in seats" :key="index">
+            <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
+                {{ seat }}
+            </div>
+            <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+                {{ seat }}
+            </div>
+            <div v-else class="disabled">
+                {{ seat }}
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+<script>
+export default {
+    props: ["seats", "classType", "personCount", "value" ],
+    data: function(){
+        return{
+            chosenSeats: this.value
+        }
+    },
+    methods:{
+        addSeatClick: function(seat) {
+            if (this.chosenSeats.length < this.personCount) {
+                this.chosenSeats.push(seat);
+                this.$emit("input", this.chosenSeats);
+            }
+            else {
+                alert("Všichni cestující již sedí!");
+            }
+        },
+    }
+}
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file