diff --git a/package-lock.json b/package-lock.json
index 7658608..99aac6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1103,6 +1103,61 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@nuxt/opencollective": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.2.tgz",
+      "integrity": "sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==",
+      "requires": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.0",
+        "node-fetch": "^2.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@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",
@@ -2603,6 +2658,23 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+    },
+    "bootstrap-vue": {
+      "version": "2.21.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.21.2.tgz",
+      "integrity": "sha512-0Exe+4MZysqhZNXIKf4TzkvXaupxh9EHsoCRez0o5Dc0J7rlafayOEwql63qXv74CgZO8E4U8ugRNJko1vMvNw==",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.2",
+        "bootstrap": ">=4.5.3 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3418,6 +3490,11 @@
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
+    "consola": {
+      "version": "2.15.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.2.tgz",
+      "integrity": "sha512-VxqWw5C8O/mQpZYtfaaSCDJcVK3AxyvQ26rhgvyAI4j/QJISh8DLwFS8GQU+9154u4ngyCsSlnyIAYJme9kQug=="
+    },
     "console-browserify": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@@ -7435,6 +7512,11 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -8079,6 +8161,16 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10894,6 +10986,11 @@
         }
       }
     },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index a13bda1..cf2baf4 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^4.6.0",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
     "v-calendar": "^2.2.3",
     "vue": "^2.6.11"
diff --git a/src/App.vue b/src/App.vue
index 6989907..9a08136 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,89 +1,115 @@
+
 <template>
     <div id="app">
-        <h1>Letenka</h1>
+        <div class="hlava"><h1>Letenka</h1></div>
         <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 -->
-                <v-date-picker v-model="departuredate" :min-date="new Date()" value=""/>
-                <!-- datum příletu pokud zpáteční -->
+            
+                <div class="col1">
+                    <div class="hlavni">
+                    
+                        <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 -->
+                        <v-date-picker v-model="departuredate" :min-date="new Date()" value=""/>
+                        <!-- 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>
+                        <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="sedadlo">
+                            <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>
+                                    <img class="obr" src="./assets/sedadlo.png" alt="">
+                                    
+                                </div>
+                            </div>
+                        </div>
+                        <br>
+                        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+                    
                     </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 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 class="col">
+                    <div class="hlavni">
+                        <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="sedadlo">
+                                <div class="seat" v-for="seat in chosenSeats" :key="seat">
+                                    {{ seat }}
+                                    <img class="obr" src="./assets/sedadlo.png" alt="">
+                                </div>
+                            </div>
+                        </div>
+                        
                     </div>
-                </div>
 
-            </div>
+                </div>
+                
+            
         </div>
     </div>
+     
+    
 </template>
 
 <script>
+
 import Vue from 'vue';
+
 import VCalendar from 'v-calendar';
 Vue.use(VCalendar, {});
 
@@ -91,6 +117,8 @@ export default {
   name: 'App',
   data: function() {
       return {
+         
+          
           travelType: "",
           travelTypes: [
               { value: "R", text: "Zpáteční" },
@@ -99,15 +127,22 @@ export default {
           personCount: 1,
           classType: "",
           classTypes: [
-              { value: "E", text: "Ekonomická" },
-              { value: "B", text: "Byznys" }
+              { value: "E", text: "Ekonomi" },
+              { value: "B", text: "Business" },
+              { value: "F", text: "First" }
           ],
           seats: [
+              "F1", "F2", "F3",
               "B1", "B2", "B3", 
-              "E1", "E2", "E3", "E4", "E5"
+              "E1", "E2", "E3", "E4", "E5", "E6",
           ],
           chosenSeats: [],
           departuredate: new Date(),
+          departurerangedate: {
+              start: new Date(),
+              end: new Date(),
+
+          },
       }
   },
   methods: {
@@ -132,17 +167,24 @@ export default {
 </script>
 
 <style>
+    
+
+
   .wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    
   }
 
   .seat {
       display: inline-block;
-      width: 30px;
+      width: 50px;
+      height: 50px;
       text-align: center;
       border: 1px solid gray;
       margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
   }
 
   .seat div:hover {
@@ -151,7 +193,7 @@ export default {
   }
 
   .seat .disabled {
-      color: brown;
+      color: rgb(255, 255, 255);
   }
 
   .seat .disabled:hover {
@@ -162,5 +204,42 @@ export default {
   .seat .chosen {
       background-color: lightgreen;
   }
+  .col{
+      width: 40%;
+      background-color: rgb(255, 255, 255);
+      margin: 0 left;
+       opacity: 0.8;
+  }
+
+  .hlavni{
+      width: 50%;
+      margin: 0 auto;
+  }
+  .hlava{
+      width: 100%;
+      background-color:
+  }
+  #app{
+      background-image: url("./assets/leta.jpeg");
+  }
+  .obr{
+      width: 30px;
+  }
+  h1,h2,h3,p {
+      font-family: Arial, Helvetica, sans-serif;
+  }
+  .sedadlo{
+      width: 170px;
+  }
+
+  @media (max-width: 500px) {
+    
+    
+}
+
+  
+
+  
+  
 
 </style>
diff --git a/src/assets/leta.jpeg b/src/assets/leta.jpeg
new file mode 100644
index 0000000..c8558d4
Binary files /dev/null and b/src/assets/leta.jpeg differ
diff --git a/src/assets/leta.jpg b/src/assets/leta.jpg
new file mode 100644
index 0000000..ed7abb9
Binary files /dev/null and b/src/assets/leta.jpg differ
diff --git a/src/assets/sedadlo.png b/src/assets/sedadlo.png
new file mode 100644
index 0000000..4ef8ab5
Binary files /dev/null and b/src/assets/sedadlo.png differ
diff --git a/src/main.js b/src/main.js
index 63eb05f..7d579d4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+
 Vue.config.productionTip = false
 
+
+
+
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')