diff --git a/index.html b/index.html
index 257ea04..fb30bf8 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,30 @@
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+  <script src="index.js" defer></script>
+  <script src="https://unpkg.com/petite-vue" defer init></script>
 </head>
 
-<body>
+<body v-scope>
 <main class="container">
-  <div id="root"></div>
+  <div v-for="group in data" :key="group.id">
+    <table>
+      <thead>
+      <tr>
+        <th>Имя</th>
+        <th>Время</th>
+        <th>Telegram</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="el in group" :key="el.id">
+        <td>{{ el.name }}</td>
+        <td style="width: 200px">{{ el.availableTime.from }} - {{ el.availableTime.to }}</td>
+        <td style="width: 200px">{{ el.tgUsername }}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
 </main>
-  <script src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
index dea0d41..107f775 100644
--- a/index.js
+++ b/index.js
@@ -77,29 +77,3 @@ const data = [
     },
   ],
 ];
-
-const root = document.getElementById('root');
-
-const html = `<div>${data
-  .map((group) => {
-    return `<table><thead>
-      <tr>
-        <th>Имя</th>
-        <th>Время</th>
-        <th>Telegram</th>
-      </tr>
-    </thead>
-    <tbody>${group
-      .map((el) => {
-        return `<tr>
-        <td >${el.name}</td>
-        <td style='width: 200px'">${el.availableTime.from} - ${el.availableTime.to}</td>
-        <td style='width: 200px'>${el.tgUsername}</td>
-      </tr>`;
-      })
-      .join('')}</tbody>
-  </table>`;
-  })
-  .join('')}</div>`;
-
-root.innerHTML = html;
