diff --git a/src/App.vue b/src/App.vue
index 90b28ec..6f5eea9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,131 +1,163 @@
-<template>
-<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 z možností</option>
-      <option v-for="(option, index) in TravelTypes" :key="index" value="option">{{ option.text }}</option>
-    </select>
-    </p>
-    <input type="date">
-    <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="">
-    </p>
-    <p>
-      <label for="inputClassType">Volba třídy</label><br>
-        <select v-model="classType" id="inputClassType">
-        <option value="" disabled>Vyberte z 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 }}
+    <template>
+        <div id="app">
+            <h1>Letenka</h1>
+            <div class="wrapper">
+                <div class="col form">
+                    <h2>Parametry letu</h2>
+                    <form action="">
+                        <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í -->
+
+
+                        <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>
+                                <div v-else class="disabled">
+                                    {{ seat }}
+                                </div>
+                                
+                            </div>
+                        </div>
+                        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+                    </form>
+
+                </div>
+                <div class="col order">
+                    <h2>Objednávka</h2>
+                    <p v-if="travelType">
+                        Typ cesty: 
+                        <span style="text-transform: lowercase">
+                            {{ travelType.text }}
+                        </span>
+                    </p>
+                    <p>
+                        Počet cestujích: {{ personCount}}
+                    </p>
+                    <p v-if="classType">
+                        Třída: 
+                        <span style="text-transform: lowercase">
+                            {{ classType.text }}
+                        </span>
+                    </p>
+
+                    <div v-if="chosenSeats.length">
+                        Vybraná místa: 
+                        <div class="seat" v-for="seat in chosenSeats" :key="seat">
+                            {{ seat }}
+                        </div>
+                    </div>
+
+                </div>
             </div>
-          </div>
         </div>
-        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
-  </div>
-    <div class="col">
-      <h2>Objednávka</h2>
-      <p v-if="travelType">
-         Typ Letu: 
-         <span style="text-transform: lowercase">
-          {{ travelType.text }}
-          </span>
-        </p>
-        <p>
-          Počet cestujícíh : {{ personCount }}
-        </p>
-        <p v-if="classType">
-          Třída: 
-            <span style="text-transform: lowercase">
-              {{ classType.text }}
-            </span>
-        </p>
-        <div v-if="chosenSeats.length">
-          Vybraná místa:
-          <div class="seat" v-for="seat in chosenSeats" :key="seat">
-            {{ seat }}
-          </div>
-        </div>
-    </div>
-  </div>
-</div>
-</template>
+    </template>
+
+    <script>
 
-<script>
-export default{
-  name: "App",
-  data: function(){
-    return{
-      travelType:"",
-      TravelTypes:[
-        { value: "R", text: "TwoWay"},
-        { value: "O", text: "OneWay"},
-      ],
-      personCount: 1,
-      classType: "",
-      classTypes:[
-        { value: "E", text: "Economy"},
-        { value: "E", text: "Business"},
-      ],
-      seats:[
-        "B1", "B2", "B3",
-        "E1", "E2", "E3",
-      ],
-      chosenSeats: []
+    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;
+              // diff je záporné číslo
+              for (let i = diff; i < 0; i++) {
+                  this.chosenSeats.pop();       
+              }
+          }
+      }
     }
-  },
-  methods:{
-    addSeatClick: function(seat){
-      if (this.chosenSeats.length < this.personCount){
-        this.chosenSeats.push(seat);
+    </script>
+
+    <style>
+      .wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
       }
-      else{
-        alert("MAXIMÁLNÍ POČET SEDADEL DOSAŽEN")
+
+      .seat {
+          display: inline-block;
+          width: 30px;
+          text-align: center;
+          border: 1px solid gray;
+          margin: 2px;
       }
-    },
-    personCountChange: function(){
-      let diff = this.personCount - this.chosenSeats.length;
-      if (diff < 0){
-        for (let i = 0; i < diff * -1; i++) {
-        this.chosenSeats.pop();
-        }
+
+      .seat div:hover {
+          cursor: pointer;
+          background-color: lightgray;
       }
-    }
-  }
-}
-</script>
 
-<style>
-.wrapper{
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
+      .seat .disabled {
+          color: lightgray;
+      }
 
-.seat{
-  display: inline-block;
-  width: 30px;
-  text-align: center;
-  border: 1px solid grey;
-  margin: 2px;
-}
+      .seat .disabled:hover {
+          cursor: default;
+          background-color: transparent;
+      }
 
-.seat:hover{
-  cursor: pointer;
-  background-color: grey;
-}
+      .seat .chosen {
+          background-color: lightgreen;
+      }
 
-.seat .chosen{
-  background-color: lightgreen;
-}
-</style>
+    </style>
\ No newline at end of file