diff --git a/public/img/hardcore-historie.png b/public/img/hardcore-historie.png
new file mode 100644
index 0000000..98d09b4
Binary files /dev/null and b/public/img/hardcore-historie.png differ
diff --git a/public/img/spotify.png b/public/img/spotify.png
new file mode 100644
index 0000000..904da99
Binary files /dev/null and b/public/img/spotify.png differ
diff --git a/public/img/telo-scita-rany.png b/public/img/telo-scita-rany.png
new file mode 100644
index 0000000..1f2a5c0
Binary files /dev/null and b/public/img/telo-scita-rany.png differ
diff --git a/public/img/valka-o-uber.png b/public/img/valka-o-uber.png
new file mode 100644
index 0000000..66023ec
Binary files /dev/null and b/public/img/valka-o-uber.png differ
diff --git a/public/index.html b/public/index.html
index 3e5a139..04d495b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,9 @@
     <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">
+    <script src="https://kit.fontawesome.com/51bfbf9540.js" crossorigin="anonymous"></script>
+
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 591a031..5b7475e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,30 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+<div>
+<h1>Knihkupectví</h1>
+<div class="row">
+  <div class="col">
+      <h2>Knihy</h2>
+      <div v-for="kniha, i in knihy" :key="i">
+        {{kniha.nazev}}
+      </div>
+  </div>
+</div>
+</div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import data from "./assets/knihy.json"
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
+  data:function () {
+    return{
+      knihy: data,
+    }
+  },
+
 }
 </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>
diff --git a/src/assets/knihy.json b/src/assets/knihy.json
new file mode 100644
index 0000000..9c3b59a
--- /dev/null
+++ b/src/assets/knihy.json
@@ -0,0 +1,81 @@
+[
+    {
+        "nazev":"Telosčítá rány",
+        "obrazek":"/img/telo-scita-rany.png",
+        "autor":"",
+        "stran":0,
+        "cena": "",
+        "typy":[
+            {
+                "nazev":"papír",
+                "ikona":"fa-book",
+                "format":""
+            },
+            {
+                "nazev": "e-book",
+                "ikona":"fa-tablet-alt",
+                "format": "pdf"
+            }
+        ]
+        
+    },
+    {
+        "nazev":"Hardcore historie",
+        "autor":"",
+        "stran":0,
+        "cena": "",
+        "typy":[
+            {
+                "nazev":"papír",
+                "ikona":"fa-book",
+                "format":""
+            },
+            {
+                "nazev": "e-book",
+                "ikona":"fa-tablet-alt",
+                "format": "pdf mobil"
+            },
+            {
+                "nazev":"audio",
+                "ikona":"fa-book",
+                "format":"mp3 audio"
+            }
+        ]
+    },
+    {
+        "nazev":"Spotify",
+        "autor":"",
+        "stran":0,
+        "cena": "",
+        "typy":[
+            {
+                "nazev":"papír",
+                "ikona":"fa-book",
+                "format":""
+            },
+            {
+                "nazev": "e-book",
+                "ikona":"fa-tablet-alt",
+                "format": "pdf mobil"
+            },
+            {
+                "nazev":"audio",
+                "ikona":"fa-book",
+                "format":"mp3 audio"
+            }
+        ]
+    },
+    {
+        "nazev":"Uber",
+        "autor":"",
+        "stran":0,
+        "cena": "",
+        "typy":[
+            {
+                "nazev":"papír",
+                "ikona":"fa-book",
+                "format":""
+            }
+        ]
+    }
+]
\ No newline at end of file
