diff --git a/templates/index.html b/templates/index.html
index 0f01a6d..32a53af 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -82,18 +82,55 @@
             .then(resp => resp.json())
             .then(routes => {
                 result_elem.innerHTML = ''
-                let city_elem = document.createElement('ul')
-                result_elem.appendChild(city_elem)
+
+                let cities_number = Object.keys(routes).length
+
+                let accordion = document.createElement('div')
+                accordion.classList.add('accordion')
+                accordion.setAttribute('id', 'result-accordion')
+                result_elem.appendChild(accordion)
 
                 for (let city in routes) {
                     let city_routes = routes[city]
 
-                    let city_name_elem = document.createElement('li')
-                    city_name_elem.textContent = city + " :"
-                    city_elem.appendChild(city_name_elem)
+                    let city_id = city.replaceAll(' ', '_')
+
+                    let city_elem = document.createElement('div')
+                    city_elem.classList.add('accordion-item')
+                    accordion.appendChild(city_elem)
+
+                    let city_header = document.createElement('h2')
+                    city_header.classList.add('accordion-header')
+                    city_header.setAttribute('id', 'collapse-header-' + city_id)
+                    city_elem.appendChild(city_header)
+
+                    let city_name_button = document.createElement('button')
+                    city_name_button.classList.add('accordion-button')
+                    if (cities_number > 1)
+                        city_name_button.classList.add('collapsed')
+                    city_name_button.setAttribute('type', 'button')
+                    city_name_button.setAttribute('data-bs-toggle', 'collapse')
+                    city_name_button.setAttribute('data-bs-target', '#collapse-' + city_id)
+                    city_name_button.setAttribute('aria-expanded', cities_number > 1 ? 'false' : 'true')
+                    city_name_button.setAttribute('aria-controls', 'collapse-' + city_id)
+                    city_name_button.textContent = city
+                    city_header.appendChild(city_name_button)
+
+                    let collapse = document.createElement('div')
+                    collapse.setAttribute('id', 'collapse-' + city_id)
+                    collapse.classList.add('accordion-collapse')
+                    if (cities_number > 1)
+                        collapse.classList.add('collapse')
+                    collapse.setAttribute('aria-labelled-by', 'collapse-header-' + city_id)
+                    collapse.setAttribute('data-bs-parent', '#result-accordion')
+                    city_elem.appendChild(collapse)
+
+                    let collapse_body = document.createElement('div')
+                    collapse_body.classList.add('accordion-body')
+                    collapse.appendChild(collapse_body)
 
                     let routes_elem = document.createElement('ul')
-                    city_elem.appendChild(routes_elem)
+                    collapse_body.appendChild(routes_elem)
 
                     for (let route of city_routes) {
                         let route_elem = document.createElement('li')