diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
index cdc9880b3734a8ff070c8008315d34a7c0278006..e78b8f721fcd7852db7bbd7b549d66c10ed09248 100644
--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -31,7 +31,7 @@ public class TrailsController {
     {
         List<Trail> trailList= Trail.trails;//results from db
         ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
-        mv.addObject("searchList", trailList.get(id-1));
+        mv.addObject("trail", trailList.get(id-1));
 
         return mv;
     }
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index 97ec296393273fac916dbd1b4f9f30b9548c0adb..87da2602458447d169d1781cf88a83709227d111 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -1,17 +1,24 @@
+* {
+    box-sizing: border-box;
+}
 body {
     background-color: rgb(41, 41, 41);
     margin: 0;
 }
+main {
+}
 .centerFlex {
     display: flex;
     justify-content: center;
 }
 #allTrailsBar {
     padding:0;
-    max-width: 60%;
+    max-width: 80%;
     height: 11svh;
-    margin: auto;
-    border-bottom: solid grey 2px;
+    margin: 1svh auto;
+    display: flex;
+    justify-content: space-between;
+    /*border-bottom: solid grey 2px;*/
     /*border-top: solid grey 4px;*/
 
 }
@@ -33,19 +40,73 @@ body {
 .selected {
     box-shadow: 0 0 20px 10px #bbbb00;
 }
-
-.trailInfoBox {
-    animation: fadeIn 3s;
-    padding: 20px;
-    font-size: xx-large;
-}
-
 @keyframes fadeIn {
     0% { opacity: 0; }
     100% { opacity: 1; }
 }
+main {
+    margin: 0;
+}
 
+#trailInfoContainer {
+    margin: auto;
+    width: 95vw;
+    min-height: 80vh;
+    min-width: 30svw;
+}
+
+.trailInfoFrag {
+    background-color: rgb(84, 33, 128);
+    border: #000000 solid 2px;
+    border-radius: 10px;
+    box-shadow: 0 5px 20px 0 #000000;
 
+    margin:0;
+    padding:0;
+    animation: fadeIn 3s;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    /*min-height: 80svh;*/
+    min-width: 30svh;
+
+    & h1 {
+        color: white;
+        grid-area: header;
+        margin: 10px 25%;
+        font-size: xx-large;
+        text-align: center;
+        border-bottom: #1e1e1e solid 2px;
+    }
+}
+
+#trailFragContent {
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    overflow: hidden;
+
+    & img {
+        border-radius: 10px;
+        border: black solid 1px;
+        margin: 1%;
+        flex: 1 1;
+        width: 30%;
+        min-height: 30svh;
+    }
+    & p {
+        color: white;
+        flex: 1 1;
+        padding-top: 5px;
+        padding-left: 10px;
+        width: 60%;
+        border-left: solid darkgrey 2px;
+
+    }
+
+}
 
 
 
diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
index d04eed9d438bc2c7683e35b048068f9a556bb018..0e5132a7453bee04a1eed08dbcdb5401a68b72f7 100644
--- a/src/main/resources/static/scripts/allTrails.js
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -1,7 +1,7 @@
 function updateOutputTrail(id) {
     /* Updates the trail being shown on screen to the one requested by ID */
     $.get("/allTrails/" + id).done(function (fragment) {
-        $("#trailInfoBox").html(fragment)
+        $("#trailInfoContainer").html(fragment)
     });
     updateSelectedTrail(id);
 }
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 1179d27219d11ee88a7dc44453ed0e458706f0b4..8304b05c7593d24d1d087f187440d5ce734d33d4 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -13,7 +13,6 @@
 
 <main>
     <section id="allTrailsBar" class="centerFlex">
-        <!--TODO add rest of page-->
         <img class="trailsImages"
              th:each="trail : ${trails}"
              th:src="@{${trail.getImgPath()}}"
@@ -21,7 +20,12 @@
              th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
         >
     </section>
-    <section id="trailInfoBox"></section>
+
+    <section id="trailInfoContainer">
+
+
+    </section>
+
 </main>
 
 <footer th:replace="towns/templates.server/Templating.html:: footerBlock"></footer>
diff --git a/src/main/resources/templates/allTrails/oneTrail.html b/src/main/resources/templates/allTrails/oneTrail.html
deleted file mode 100644
index 30d74d258442c7c65512eafab474568dd706c430..0000000000000000000000000000000000000000
--- a/src/main/resources/templates/allTrails/oneTrail.html
+++ /dev/null
@@ -1 +0,0 @@
-test
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
index 89f08f8e5befa1d8d578319948a154bb94891f52..fc4da1492b07e6d7f3004a95554aeae13cf58bcb 100644
--- a/src/main/resources/templates/fragments/allTrailsFrags.html
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -1,5 +1,11 @@
-<section th:fragment="trailSection" class="trailInfoBox">
-    <h1 th:text="${searchList.getName()}"></h1>
-    <p th:text="${searchList.getDescription()}"></p>
+<article th:fragment="trailSection" class="trailInfoFrag">
+    <h1 th:text="${trail.getName()}"></h1>
+
+    <div id="trailFragContent">
+        <img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
+        <p th:text="${trail.getDescription()}"></p>
+    </div>
+
+
     <!--TODO add more to this fragment and then add styling to it-->
-</section>
+</article>