diff --git a/index.html b/index.html
index 2bd0053..182fa6a 100644
--- a/index.html
+++ b/index.html
@@ -4,32 +4,84 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>API test</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+
 </head>
 <body>
-    <div id="mista"></div>
-    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <!-- Modal -->
+    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div id="mista"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Zavřít</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <h1>Volba dopravy</h1>
+
+    <ul class="list-group">
+        <li class="list-group-item">
+            <input type="radio" name="volba" id="posta"> <label for="posta">Česká pošta</label>
+            
+        </li>
+        <li class="list-group-item">
+            <input type="radio" name="volba" id="ppl"> <label for="ppl">PPL </label>
+            
+        </li>
+        <li class="list-group-item">
+            <input type="radio" name="volba" id="osobni"> 
+            <label for="osobni" data-toggle="modal" data-target="#exampleModal">Osobní odběr <span id="misto"></span></label>
+            
+        </li>
+    </ul>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
     <script>
         $.ajax({
             dataType: "json",
-            url: "http://pak.asgard.odbornaskola.cz/paks/",
+            url: "http://pak.asgard.odbornaskola.cz/paks/", 
             headers: {
                 Authorization: "Token f81ba6fa563046e52a8ab6b7a0e5b1e8bd6b4a0e"
             }
         })
-            .done(function(data){
+            .done(function(data) {
                 console.log(data);
                 for (let index = 0; index < data.length; index++) {
                     const item = data[index];
-                    $("#mista").append("<p>" + item.name + "</p>");
-                    
+                    $("#mista").append("<input type='radio' name='mista' data-nazev='" + item.name + "' id='misto" + item.id + "'> <label for='misto" + item.id + "'>" + item.name + "</label><br>");
+                }
+
+                let radia = document.querySelectorAll("input[name='mista']");
+                console.log(radia);
+                for (let index = 0; index < radia.length; index++) {
+                    const element = radia[index];
+                    element.addEventListener("change", function() {
+                        console.log(this);
+                        $("#misto").html(this.dataset.nazev);
+                        $('#exampleModal').modal('hide');
+                    });
                 }
 
             })
-            .fail(function(){
-                console.log("chyba...");
+            .fail(function() {
+                console.log("chyba ...");
             });
+
+
+        //aaa
     </script>
-    
 </body>
 </html>
\ No newline at end of file
