diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
index ba532c16700b0ad61fa2524a90957e2a085e2aa5..612aa55309408aaf2b59e3e84d768617f71c108d 100644
--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
@@ -9,8 +9,6 @@ import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
@Controller
public class WebpageController {
-
-
@GetMapping("/Caerleon")
public ModelAndView getCaerleonPage(){
ModelAndView modelAndView = new ModelAndView("towns/caerleon");
diff --git a/src/main/java/Team5/SmartTowns/trailcontrollers/DragonsTale.java b/src/main/java/Team5/SmartTowns/trailcontrollers/DragonsTale.java
new file mode 100644
index 0000000000000000000000000000000000000000..ba499c964988180a774b2f66ba7c18274ccfdd21
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trailcontrollers/DragonsTale.java
@@ -0,0 +1,15 @@
+package Team5.SmartTowns.trailcontrollers;
+
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+@Controller
+public class DragonsTale {
+ @GetMapping("/dragonstale")
+ public ModelAndView getDragonsTale(){
+ ModelAndView modelAndView = new ModelAndView("src/main/resources/templates/towns/trails/dragonstale/index.html");
+ return modelAndView;
+ }
+}
diff --git a/src/main/resources/templates/towns/caerleon.html b/src/main/resources/templates/towns/caerleon.html
index 4b53c334843f4fe623944fd5f9c179a8f6c672ef..ba3d749226587b1fbc60523f980b8ddc4c867c08 100644
--- a/src/main/resources/templates/towns/caerleon.html
+++ b/src/main/resources/templates/towns/caerleon.html
@@ -5,7 +5,17 @@
<title>Caerleon</title>
</head>
<body>
-<h1> Welcome to the town of Caerleon.</h1>
+<div>
+ <h1> Welcome to the town of Caerleon.</h1>
+</div>
+
+<div>
+ <h2>Explore trails around Caerleon</h2>
+ <ul>
+ <li href="">Welsh History</li>
+ <li>Super</li>
+ </ul>
+</div>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/dragonstale/dragonstalehome.png b/src/main/resources/templates/towns/trails/dragonstale/dragonstalehome.png
new file mode 100644
index 0000000000000000000000000000000000000000..e41aab5599c40896d3ea97cb4292bd6ff7943284
Binary files /dev/null and b/src/main/resources/templates/towns/trails/dragonstale/dragonstalehome.png differ
diff --git a/src/main/resources/templates/towns/trails/dragonstale/index.html b/src/main/resources/templates/towns/trails/dragonstale/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..c9202cfdfe91be4b0d095abe1398e3a5f6e74c19
--- /dev/null
+++ b/src/main/resources/templates/towns/trails/dragonstale/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>A Dragon's Tale</title>
+ <link rel="stylesheet" href="stylesheet.css">
+</head>
+<body>
+
+ <div class="centre">
+ <h1> Welcome, to a dragon's tale! </h1>
+ <img src="dragonstalehome.png" alt="Image of a dragon">
+ <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of (thymeleaf element) to discover a prize! </h2>
+ </div>
+
+ <div class="centre">
+ <p>
+ Adventurers... embark through these mystical historical landmarks and scenery, to ultimately discover the lair of the dragon.
+ Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
+ </p>
+ </div>
+
+ <div class="centre">
+ <h3>Begin your hunt!</h3>
+ <button type="button" id="begin">Click here!</button>
+ </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/dragonstale/script.js b/src/main/resources/templates/towns/trails/dragonstale/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..6708ae40acad145d586be407af2b29a4bba96eba
--- /dev/null
+++ b/src/main/resources/templates/towns/trails/dragonstale/script.js
@@ -0,0 +1,8 @@
+function onClick(){
+ var beginButton = document.getElementById("begin");
+ if (beginButton === true){
+
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/dragonstale/stylesheet.css b/src/main/resources/templates/towns/trails/dragonstale/stylesheet.css
new file mode 100644
index 0000000000000000000000000000000000000000..32670b4a99e9848541977e77c6f119d7e018991b
--- /dev/null
+++ b/src/main/resources/templates/towns/trails/dragonstale/stylesheet.css
@@ -0,0 +1,9 @@
+.centre{
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+ background-color: antiquewhite;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/dragonstale/trailcheckpoints/one/dragonone.png b/src/main/resources/templates/towns/trails/dragonstale/trailcheckpoints/one/dragonone.png
new file mode 100644
index 0000000000000000000000000000000000000000..223398aab54b842b03c9c532f033b6765a5a10f0
Binary files /dev/null and b/src/main/resources/templates/towns/trails/dragonstale/trailcheckpoints/one/dragonone.png differ
diff --git a/src/main/resources/templates/towns/trails/dragonstale/trailcheckpoints/one/one.html b/src/main/resources/templates/towns/trails/dragonstale/trailcheckpoints/one/one.html
new file mode 100644
index 0000000000000000000000000000000000000000..df1237ce0aeff72a3a2f840bfd1a2ffc39200894
--- /dev/null
+++ b/src/main/resources/templates/towns/trails/dragonstale/trailcheckpoints/one/one.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Checkpoint One <filler></title>
+</head>
+<body>
+ <!-- constant use of divs used to separate important sections of the website that'll be maintained throughout the project -->
+ <div>
+ <h1>Checkpoint one... The Beginning of an adventure!</h1>
+ </div>
+
+ <div>
+ <!-- Insert a thymeleaf attribute here to layer this image onto a background of the town-->
+ <img src="dragonone.png" alt="Image of a Red Dragon">
+ </div>
+
+ <div>
+ <p> Enter a story about the checkpoint here.....</p>
+ </div>
+
+ <div>
+ <p> Here goes where the user must go next. Hints, etc. </p>
+ </div>
+
+ <div>
+ <p> Greyed out image of something that can be dynamically altered upon scanning QR code.</p>
+ </div>
+
+ <div>
+ <p> Here a total progress bar...</p>
+ </div>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html b/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
new file mode 100644
index 0000000000000000000000000000000000000000..9a4ae9e885b177cdaa5d12ef77ae9f52ec72f071
--- /dev/null
+++ b/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>The Roman Empire</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file