diff --git a/kolotoc-helcl.zip b/kolotoc-helcl.zip
new file mode 100644
index 0000000..33cafec
Binary files /dev/null and b/kolotoc-helcl.zip differ
diff --git a/package-lock.json b/package-lock.json
index 84f0978..2c8556d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,13 +14,13 @@
         "vue-timers": "^2.0.4"
       },
       "devDependencies": {
-        "@vue/cli-plugin-babel": "~4.5.0",
-        "@vue/cli-plugin-eslint": "~4.5.0",
-        "@vue/cli-service": "~4.5.0",
+        "@vue/cli-plugin-babel": "^4.5.11",
+        "@vue/cli-plugin-eslint": "^4.5.11",
+        "@vue/cli-service": "^4.5.11",
         "babel-eslint": "^10.1.0",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
-        "vue-template-compiler": "^2.6.11"
+        "vue-template-compiler": "^2.6.12"
       }
     },
     "node_modules/@babel/code-frame": {
diff --git a/package.json b/package.json
index 20a1309..34cf324 100644
--- a/package.json
+++ b/package.json
@@ -15,13 +15,13 @@
     "vue-timers": "^2.0.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,
diff --git a/src/App.vue b/src/App.vue
index fc19c6b..2fbccb7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,17 @@
 <template>
   <div id="app">
-    <div v-on:click="backImg" class="arrow left">
-      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
-    </div>
-    <div class="box-with-img">
-      <h1> {{ images[index].title }} </h1>
-      <img :src="images[index].src" alt="" />
-      <p> {{ images[index].text }} </p>
-    </div>
-    <div v-on:click="nextImg" class="arrow right">
-      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
-    </div>
+    <kolotoc :images="images"/>
   </div>
 </template>
 
 <script>
-
+import kolotoc from "./components/kolotoc";
 
 export default {
   name: "App",
+  components: {
+    kolotoc
+  },
   data: function () {
     return {
       images: [
@@ -48,56 +41,18 @@ export default {
           text: "Tohle je obrázek 5",
         },
       ],
-      index: 0,
     };
   },
-  methods: {
-    nextImg: function () {
-      this.index += 1;
-      if (this.index > this.images.length - 1) {
-        this.index = 0;
-      }
-    },
-    backImg: function () {      
-      this.index -= 1;
-      if (this.index < 0) {
-        this.index = this.images.length - 1;
-      }
-    },
-  },
+  
 };
 </script>
 
 <style>
-#app {
+#app > div{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 90vh;
 }
-.box-with-img {
-  width: 30%;
-  height: 50%;
-}
-.box-with-img img {
-  width: 100%;
-  height: 100%;
-}
-.arrow {
-  width: 50px;
-  height: 50%;
-  display: flex;
-  align-items: center;
-}
-.arrow.left {
-  padding-top: 37px;
-  padding-right: 15px;
-}
-.arrow.right {
-  padding-top: 37px;
-  padding-left: 15px;
-}
-.arrow.right svg {
-  transform: rotate(180deg);
-}
+
 </style>
diff --git a/src/components/kolotoc.vue b/src/components/kolotoc.vue
new file mode 100644
index 0000000..0c9a150
--- /dev/null
+++ b/src/components/kolotoc.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div v-on:click="backImg" class="arrow left">
+      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
+    </div>
+    <div class="box-with-img">
+      <h1> {{ images[index].title }} </h1>
+      <img :src="images[index].src" alt="" />
+      <p> {{ images[index].text }} </p>
+    </div>
+    <div v-on:click="nextImg" class="arrow right">
+      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+      images: {default: () => []}
+  },
+  data: function() {
+      return {
+        index: 0,
+      }
+  },
+  methods: {
+    nextImg: function () {
+      this.index += 1;
+      if (this.index > this.images.length - 1) {
+        this.index = 0;
+      }
+    },
+    backImg: function () {      
+      this.index -= 1;
+      if (this.index < 0) {
+        this.index = this.images.length - 1;
+      }
+    },
+  }
+}
+</script>
+<style >
+.box-with-img {
+  width: 30%;
+  height: 50%;
+}
+.box-with-img img {
+  width: 100%;
+  height: 100%;
+}
+.arrow {
+  width: 50px;
+  height: 50%;
+  display: flex;
+  align-items: center;
+}
+.arrow.left {
+  padding-top: 37px;
+  padding-right: 15px;
+}
+.arrow.right {
+  padding-top: 37px;
+  padding-left: 15px;
+}
+.arrow.right svg {
+  transform: rotate(180deg);
+}
+</style>
+