diff --git a/src/main/resources/static/images/trails/trail1.jpg b/src/main/resources/static/images/trails/trail1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cd0a8efd807a1298eceb3a7f0ae92b806a5ff52f
Binary files /dev/null and b/src/main/resources/static/images/trails/trail1.jpg differ
diff --git a/src/main/resources/static/images/trails/trail2.jpg b/src/main/resources/static/images/trails/trail2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..31e14eae5ac6e1132c33b7161dc2bc5e30c90dcf
Binary files /dev/null and b/src/main/resources/static/images/trails/trail2.jpg differ
diff --git a/src/main/resources/static/images/trails/trail3.jpg b/src/main/resources/static/images/trails/trail3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..84763490556a7e758d2d56e8b649e051bd7a770d
Binary files /dev/null and b/src/main/resources/static/images/trails/trail3.jpg differ
diff --git a/src/main/resources/static/images/trails/trail4.jpg b/src/main/resources/static/images/trails/trail4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c2b43e3a3488a4b4c7105948c4a9903bd15915e0
Binary files /dev/null and b/src/main/resources/static/images/trails/trail4.jpg differ
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 70a7e5fa47fdd8a8368b626fab7d705937532023..161f9e25606f902cc35b003acb5d803eb4fb8916 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -10,8 +10,12 @@
 
 <header>
     <ul class="flexList">
+        <!--TODO trail image instead of title-->
         <li class="listButton" th:each="trail : ${trails}">
-            <a class="listA" th:onclick="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}" th:text="${trail.name}"></a>
+            <a class="listA" th:onclick="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}">
+                <img th:src="@{${trail.getImgPath()}}" class="trailsImages" th:id="'img' + ${trail.getId()}" alt="IMG">
+            </a>
+
         </li>
     </ul>
 </header>
@@ -28,16 +32,18 @@
         $.get("/allTrails/" + id).done(function (fragment) {
             $("#trailInfoBox").html(fragment)
         });
+        updateSelectedTrail(id);
     }
-
-    function updateSelectedTrail(string) {
+    function updateSelectedTrail(id) {
         /* Updates the trail bar, so that it highlights the selected trail */
-        let listEl = document.getElementsByClassName('listA')
-        for (let i = 0; i < listEl.length; i++) {
-            listEl[i].classList.remove('selected')
+        let list = document.getElementsByClassName('trailsImages')
+        for (let i = 0; i < list.length; i++) {
+            if (list[i].classList.contains('selected')) {
+                list[i].classList.remove('selected')
+                break
+            }
         }
-        document.getElementById(string).classList.add("selected")
-
+        document.getElementById("img" + id).classList.add("selected")
     }
 </script>
 </body>