diff --git a/public/index.html b/public/index.html
index 3e5a139..a4c3c99 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 591a031..817f8d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,63 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <div class="card">
+      <div class="card-header">Služby</div>
+      <div class="card-body">
+        <div class="list-group list-group-flush">
+            <a v-on:click="aktivniSluzba = sluzba" v-for="sluzba, i in sluzby" :key="i" href="#" class="list-group-item list-group-item-action">{{ sluzba.nazev }}</a>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="aktivniSluzba" class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>Možnosti - {{ aktivniSluzba.nazev }}</div>
+        <div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-light">&times;</button></div>
+        </div>
+      <div class="card-body">
+
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+  name: "App",
+  data: function() {
+    return {
+      sluzby: [
+        {
+          nazev: "Posekání zahdrady",
+          akce: 1,
+          cenaMetr: 1.5,
+        },
+        {
+          nazev: "Vysázení stromu",
+          akce: 2,
+          stromy: [
+            {nazev: "Bříza", cena: 49},
+            {nazev: "Dub", cena: 89},
+            {nazev: "Jasan", cena: 59},
+            {nazev: "Topol", cena: 39},
+          ],
+        },
+        {
+          nazev: "Čištění jezírka",
+          akce: 3,
+          cenaKubik: 22,
+        },
+        {
+          nazev: "Výstavba jezírka",
+          akce: 4,
+          cenaObjem: 250
+        },
+      ],
+      aktivniSluzba: null,
+    };
+  },
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>
