diff --git a/package-lock.json b/package-lock.json
index 469444d..08dc7be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4080,6 +4080,16 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.17.0.tgz",
+      "integrity": "sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA=="
+    },
+    "date-fns-tz": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.1.tgz",
+      "integrity": "sha512-5PR604TlyvpiNXtvn+PZCcCazsI8fI1am3/aimNFN8CMqHQ0KRl+6hB46y4mDbB7bk3+caEx3qHhS7Ewac/FIg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -7003,8 +7013,7 @@
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-      "dev": true
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -10877,6 +10886,17 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-calendar": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-2.2.3.tgz",
+      "integrity": "sha512-E4dByu3vDYtleIsZcciUJANpKn6zI0DCXzRsm6g3VsfV7Wpr49t+OQrrc6zVFtISardEUCabivzJOJ0NVdga/Q==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "date-fns": "^2.8.1",
+        "date-fns-tz": "^1.0.12",
+        "lodash": "4.17.20"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
diff --git a/package.json b/package.json
index b372f5a..a13bda1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "v-calendar": "^2.2.3",
     "vue": "^2.6.11"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 7d6a6cd..85ad5bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,69 +2,76 @@
     <div id="app">
         <h1>Letenka</h1>
         <div class="wrapper">
-            <div class="col">
-                <h2>Parametry letu</h2>
-                <p>
-                    <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 -->
-                <!-- datum odletu -->
-                <input type="date">
-                <!-- datum příletu pokud zpáteční -->
+            <div class="col form">
+                <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>
+                                <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-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 v-on:click="addSeatClick(seat)">
-                            {{ seat }}
-                        </div>
-                        
-                    </div>
+                            <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 :seats="seats" :classType="classType" :personCount= "personCount" />
+                            
+                        </form>
                 </div>
-                <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
-
             </div>
-            <div class="col">
+            <div>
+                <div class="col order">
                 <h2>Objednávka</h2>
                 <p v-if="travelType">
                     Typ cesty: 
-                    <span style="text-transform: lowercase">
+                    <span>
                         {{ travelType.text }}
                     </span>
                 </p>
                 <p>
-                    Počet cestujích: {{ personCount}}
+                    Počet cestujích: {{ personCount }}
                 </p>
-                <p v-if="classType">
-                    Třída: 
-                    <span style="text-transform: lowercase">
-                        {{ classType.text }}
-                    </span>
+                <p v-if="travelDest">
+                    Destinace: {{ travelDest.text }}
                 </p>
                 <p v-if="travelType.value == 'R'">
                     Datum odletu:
@@ -76,6 +83,12 @@
                     Datum odletu:
                     {{  departureDate }} <br>
                 </p>
+                <p v-if="classType">
+                    Třída: 
+                    <span>
+                        {{ classType.text }}
+                    </span>
+                </p>
 
                 <div v-if="chosenSeats.length">
                     Vybraná místa: 
@@ -83,60 +96,71 @@
                         {{ seat }}
                     </div>
                 </div>
-
+            </div>
             </div>
         </div>
     </div>
 </template>
 
 <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, {});
+
+
 
 export default {
-  name: 'App',
-  data: function() {
-      return {
-          travelType: "",
-          travelTypes: [
-              { value: "R", text: "Zpáteční" },
-              { value: "O", text: "Jednosměrná" },
-          ],
-          personCount: 1,
-          classType: "",
-          classTypes: [
-              { value: "E", text: "Ekonomická" },
-              { value: "B", text: "Byznys" }
-          ],
-          seats: [
-              "B1", "B2", "B3", 
-              "E1", "E2", "E3", "E4", "E5"
-          ],
-          chosenSeats: []
-      }
-  },
-  methods: {
-      addSeatClick: function(seat) {
-          if (this.chosenSeats.length < this.personCount) {
-              this.chosenSeats.push(seat);
-          }
-          else {
-              alert("Všichni cestující již sedí!");
-          }
-      },
-      personCountChange: function() {
-          let diff = this.personCount - this.chosenSeats.length;
-          if (diff < 0) {
-              // diff je záporné číslo
-              for (let i = diff; i < 0; i++) {
-                  this.chosenSeats.pop();       
-              }
-          }
-      }
-  }
-}
+  components: { SeatPicker },
+    name: 'App',
+    data: function() {
+        return {
+            travelType: "",
+            travelTypes: [
+                { value: "R", text: "TwoWay" },
+                { value: "O", text: "OneWay" },
+            ],
+            personCount: 1,
+            classType: "",
+            classTypes: [
+                { value: "E", text: "Ekonomická" },
+                { value: "B", text: "Byznys" }
+            ],
+            seats: [
+                "B1", "B2", "B3", 
+                "E1", "E2", "E3", "E4", "E5"
+            ],
+            chosenSeats: [],
+            travelDest: "",
+            travelDests:[
+                { value:"Pg", text:"Prague"},
+                { value:"Ps", text:"Paris"},
+                { value:"LA", text:"Los Angeles"},
+                { value:"Pe", text:"Peking"},
+                { value:"T", text:"Tokio"},
+            ],
+            departureDate: new Date(),
+            departureRangeDate: {
+                start: new Date()
+            },
+        }
+    },
+   
+        personCountChange: function() {
+            let diff = this.personCount - this.chosenSeats.length;
+            // diff je záporné číslo
+            for (let i = diff; i < 0; i++) {
+                this.chosenSeats.pop();       
+            }
+        }
+    }
+
 </script>
 
 <style>
-  html{
+    html{
         background-color: lightskyblue;
     }
     .wrapper {
diff --git a/src/components/SeatPicker.vue b/src/components/SeatPicker.vue
new file mode 100644
index 0000000..9bdb837
--- /dev/null
+++ b/src/components/SeatPicker.vue
@@ -0,0 +1,43 @@
+<template>
+    <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>
+        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+    </div>
+</div>
+
+</template>
+
+<script>
+export default {
+    propS: ["seats", "classType", "personCount", ],
+    data: function() {
+        return {
+            chosenSeats: [],
+        }
+    },
+    methods: {
+        addSeatClick: function(seat) {
+            if (this.chosenSeats.length < this.personCount) {
+                this.chosenSeats.push(seat);
+            }
+            else {
+                alert("Všichni cestující již sedí!");
+            }
+        },
+    }
+
+}
+</script>
+
+<style scoped>
+
+</style>>