diff --git a/package-lock.json b/package-lock.json
index 564e54d..ed3c03d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "v-calendar": "^2.2.3",
         "vue": "^2.6.11"
       },
       "devDependencies": {
@@ -1347,6 +1348,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -4616,6 +4627,26 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/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==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0-alpha.13"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -8356,8 +8387,7 @@
     "node_modules/lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-      "dev": true
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "node_modules/lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -13156,6 +13186,21 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-calendar": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-2.2.3.tgz",
+      "integrity": "sha512-E4dByu3vDYtleIsZcciUJANpKn6zI0DCXzRsm6g3VsfV7Wpr49t+OQrrc6zVFtISardEUCabivzJOJ0NVdga/Q==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "date-fns": "^2.8.1",
+        "date-fns-tz": "^1.0.12",
+        "lodash": "4.17.20"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.4.0",
+        "vue": "^2.5.18"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
@@ -15812,6 +15857,12 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==",
+      "peer": true
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -16295,7 +16346,8 @@
       "version": "4.5.10",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.10.tgz",
       "integrity": "sha512-Z5pnL3Eg2uwkKqP09NoM46/rwQCJ1j/1cZMgO4JF817O9n5AsFgV456UE6lK2cVCvIfvt7+S3HLrSPZUsYNQjQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.10",
@@ -16455,7 +16507,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.2.0",
@@ -16670,7 +16723,8 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -16710,13 +16764,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -18512,6 +18568,17 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+    },
+    "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==",
+      "requires": {}
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -21466,8 +21533,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",
@@ -25463,6 +25529,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 55df315..311553b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,290 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <link href="assets/style.css" rel="stylesheet"/>
+    <h1 class="nadpis"> Letenka </h1>
+    <div class="wrapper">
+      <div class="col first">
+        <h2> Parametry Letu </h2>
+        <div class="box">
+          <div class="col">
+            <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><br>
+
+
+            <!-- volba destinace -->
+            <!-- datum odletu -->
+            <div v-if="travelType.value == 'O'">
+              <v-date-picker v-model="departureDate" :min-date="new Date()" value=""  />
+            </div>
+            <div v-else-if="travelType.value == 'R'">
+              <v-date-picker v-model="departureRangeDate" is-range :min-date="new Date()"  />
+           </div>
+           <div v-else>
+             <p> Pro zvolení datumu vyberte o typ letu. </p>
+           </div>
+            <!-- datum příletu pokud i zpátečný -->
+            <!-- počet cestujících -->
+          </div>
+          <div class="col">
+
+      <p>
+        <label for="inputPersonCount"> Počet cestujících </label>
+        <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10"> 
+      </p>
+      <p>
+        <label for="inputcesta"> Volba destinace </label><br>
+        <select v-model="cesty" id="inputcesta">
+          <option value="" disabled> Vyberte jednu možnost </option>
+          <option v-for="(option,index) in cesta" :key="index" :value="option">
+            {{ option.text }}
+          </option>
+        </select>
+        </p>
+        <!-- volba trídy -->
+      <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>
+            <div v-else class="disabled">
+              {{ seat }}
+            </div>
+          </div>
+        </div>
+        <button v-on:click="chosenSeats=[]"> Odebrat všechna sedadla </button>
+        </div>
+      </div>
+      </div>
+
+
+
+
+
+
+
+
+      <div class="col second ">
+        <div class="box2">
+          <div class="items">
+            <h2> Objednávka </h2>
+            <p v-if="travelType">
+              Typ letu: <span style="text-transform: lowercase;">{{ travelType.text }}</span>
+            </p>
+            <div v-if="travelType.value == 'O'">
+              Datum letu: <span>{{ departureDate.getDate() }}.{{ departureDate.getMonth() }}.{{ departureDate.getYear() }}</span>
+            </div>
+            <div v-else-if="travelType.value == 'R'">
+              Datum odletu tam: <span>{{ departureRangeDate.start.getDate() }}.{{ departureRangeDate.start.getMonth() }}.{{ departureRangeDate.start.getYear() }}</span><br>
+              Datum odletu zpět: <span>{{ departureRangeDate.end.getDate() }}.{{ departureRangeDate.end.getMonth() }}.{{ departureRangeDate.end.getYear() }}</span>
+            </div>
+            <p v-if="cesty">
+              Volba destinace:<span> {{ cesty.text }} </span>
+            </p>
+            <p>
+              Počet cestujících: <span>{{ personCount }}</span>
+            </p>
+            <p v-if="classType">
+              Třída:<span style="text-transform: lowercase"> {{ classType.text }} </span>
+            </p>
+            
+            <div v-if="chosenSeats.length > 0">
+              Vybraná místa:<span class="seat" v-for="seat in chosenSeats" :key="seat"> {{ seat }} </span>
+            </div>
+          </div>
+          <div class="bcg"> </div>
+        </div>
+      </div>
+    </div>
+    <footer>
+      © Lukáš Helcl
+    </footer>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Vue from 'vue';
+import VCalendar from 'v-calendar';
+
+Vue.use(VCalendar, {});
 
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
+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" }
+    ],
+    cesty: "",
+    cesta: [
+      { text: "Maledivy" },
+      { text: "Thajsko" },
+      { text: "Mauricius" },
+      { text: "Dominikánská republika" },
+      { text: "Srí Lanka" },
+      { text: "Kuba" },
+      { text: "Tanzanie - Zanzibar" },
+      { text: "Mexiko" }
+    ],
+    seats: [
+      "B1", "B2", "B3",
+      "E1", "E2", "E3", "E4", "E5"
+    ],
+    chosenSeats: [],
+    departureDate: new Date(),
+    departureRangeDate: {
+      start: new Date(),
+      end: new Date()
+    }
+  }
+},
+  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
+        for (let i = diff; i < 0; i++) {
+          this.chosenSeats.pop();
+          
+        }
+    }
   }
 }
+
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.wrapper {
+  display: grid;
+  grid-template-columns:1fr 1fr ;
+}
+.col.second .seat {
+  display: inline-block;
+  width: 30px;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  border: 1px solid grey;
+  margin: 5px;
+}
+.col.first .seat {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background-image: url(seat-b.png);
+  background-size: 100% 100%;
+}
+.col.first .seat > div {
+  width: 100%;
+  height: 100%;
+}
+.seatWrap .seat:hover {
+  cursor: pointer;
+  background-color: lightgray;
+}
+.seat .chosen {
+  background-color: #a1a1a19e;
+}
+.seat .disabled {
+  color: lightgray;
+}
+.seat .disabled:hover {
+  cursor: default;
+}
+h2 {
+  color: #ffffff;
+  
+}
+.nadpis {
+  background-color: #2b4c6f;
+  color: #ffffff;
+  margin: 0px;
+  z-index: 10000;
+}
+.col.first {
+  background-image: url(fly.jpg);
+  background-size: 100% 100%;
+}
+.col.second {
+  background-color: #d7e3ee;
+  color: #000000;
+}
+.col.second h2 {
+  color: #000000;
+}
+.box {
+  background-color: #ffffff;
+  margin: 5%;
+  display: grid;
+  grid-template-columns:1fr 1fr ;
+  padding: 10px;
+}
+.box2 {
+  display: grid;
+  grid-template-columns:1fr 2fr ;
+  padding: 10px;
+  height: 100%;
+}
+.box2 .items {
+  box-shadow: 60px 0px 100px #d7e3ee;
+  z-index: 50;
+  color: #9fa3a7;
+}
+.box2 .items span {
+  color: #000000;
+}
+.box2 .bcg {
+  background-image: url(inside.jpg);
+  background-size: 100% 100%;
+  margin: 20px 0px;
+}
+footer {
+    height: 80px;
+    width: 100%;
+    text-align: left;
+    color: #ffffff;
+    background-color: #2b4c6f;
+    vertical-align: middle;
+    line-height: 80px;
+    padding: 0px 15px;
+}
+
+@media only screen and (max-width: 950px) {
+  .box {
+    grid-template-columns:none ;
+  }
+  .box2 {
+    grid-template-columns:none ;
+  }
+
 }
 </style>
diff --git a/src/components/SeatPicker.vue b/src/components/SeatPicker.vue
new file mode 100644
index 0000000..b9ac1ac
--- /dev/null
+++ b/src/components/SeatPicker.vue
@@ -0,0 +1,72 @@
+<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>
+          </div>
+        </div>
+</template>
+<script>
+export default {
+    name: 'SeatPicker',
+    data: function () {
+        return {
+            chosenSeats: [],
+        }
+    },
+    props: [
+        "seats",
+        "classType",
+        "personCount",
+    ],
+    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>
+
+.col.second .seat {
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+    border: 1px solid grey;
+    margin: 5px;
+}
+.col.first .seat {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    background-size: 100% 100%;
+}
+.seatWrap .seat:hover {
+    cursor: pointer;
+    background-color: lightgray;
+}
+.seat .chosen {
+    background-color: #333333;
+    color: white;
+}
+.seat .disabled {
+    color: lightgray;
+}
+
+.seat .disabled:hover {
+    cursor: default;
+}
+</style>
\ No newline at end of file
diff --git a/src/fly.jpg b/src/fly.jpg
new file mode 100644
index 0000000..a40e64a
Binary files /dev/null and b/src/fly.jpg differ
diff --git a/src/inside.jpg b/src/inside.jpg
new file mode 100644
index 0000000..70cb301
Binary files /dev/null and b/src/inside.jpg differ
diff --git a/src/seat-b.png b/src/seat-b.png
new file mode 100644
index 0000000..557261b
Binary files /dev/null and b/src/seat-b.png differ