diff --git a/src/main/java/Team5/SmartTowns/SmartTownsController.java b/src/main/java/Team5/SmartTowns/SmartTownsController.java
new file mode 100644
index 0000000000000000000000000000000000000000..8f21592b64931ea5a0eb04abe0de1c0ade0fb5f9
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/SmartTownsController.java
@@ -0,0 +1,16 @@
+package Team5.SmartTowns;
+
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+@Controller
+public class SmartTownsController {
+
+
+    @GetMapping("/")
+    public ModelAndView getHomePage(){
+        return new ModelAndView("welcome-page");
+    }
+}
diff --git a/src/main/java/Team5/SmartTowns/data/Location.java b/src/main/java/Team5/SmartTowns/data/Location.java
index 10f7f590e06f93595692b795cad1d4cad84249cb..60b4a772bd93dbd24df5e38a9d62a89dc7b0df74 100644
--- a/src/main/java/Team5/SmartTowns/data/Location.java
+++ b/src/main/java/Team5/SmartTowns/data/Location.java
@@ -8,7 +8,7 @@ import lombok.NoArgsConstructor;
 @Data
 @AllArgsConstructor
 public class Location {
-//    private int locationID;
+    private long locationID;
     private String locationName;
     private String locationEmail;
     private String locationDescription;
diff --git a/src/main/java/Team5/SmartTowns/data/LocationRepositoryJDBC.java b/src/main/java/Team5/SmartTowns/data/LocationRepositoryJDBC.java
index 4f9e0e6f78088babd11ec64eb39557dc090f5ebf..73fe962ea7797900de3fb7465c01fb6ecfe6de12 100644
--- a/src/main/java/Team5/SmartTowns/data/LocationRepositoryJDBC.java
+++ b/src/main/java/Team5/SmartTowns/data/LocationRepositoryJDBC.java
@@ -28,7 +28,7 @@ public class LocationRepositoryJDBC implements LocationRepository {
 
     private void setlocationMapper(){
         locationMapper = (rs, i) -> new Location(
-
+                rs.getLong("locationID"),
                 rs.getString("locationName"),
                 rs.getString("locationEmail"),
                 rs.getString("locationDescription"),
diff --git a/src/main/java/Team5/SmartTowns/data/Trail.java b/src/main/java/Team5/SmartTowns/data/Trail.java
index f9056d64b47f0f5104216b6eb15f50f9301d843c..672ec49090c608149c14db5aa2b018232155c1f0 100644
--- a/src/main/java/Team5/SmartTowns/data/Trail.java
+++ b/src/main/java/Team5/SmartTowns/data/Trail.java
@@ -1,18 +1,31 @@
 //Holds variable data for the trails table
 package Team5.SmartTowns.data;
 
+import Team5.SmartTowns.placeswithcoordinates.PlacesCoordinatesRepository;
 import lombok.AllArgsConstructor;
 import lombok.Data;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.jdbc.core.JdbcTemplate;
+
+import java.io.File;
+import java.util.List;
 
 @Data
 @AllArgsConstructor
 public class Trail {
-    private String trailsId;
+    private Long trailsId;
     private String trailName;
     private String trailNumber;
+    private String imgPath;
+
 
+    public Trail(Long trailsId, String trailName, String trailNumber) {
+        this.trailsId = trailsId;
+        this.trailName = trailName;
+        this.trailNumber = trailNumber;
+    }
 
-    public String getTrailsId() {
+    public Long getTrailsId() {
         return trailsId;
     }
 
@@ -24,5 +37,19 @@ public class Trail {
         return trailNumber;
     }
 
+    public String getTrailLink(){
+        String[] split = trailName.split(" ");
+        return String.join("-", split);
+    }
+
+
+    public String getImagePath(){
+        /* Finds the image in the Path folder, if image is not found assigns default image */
+        String imgPath = "images/trails/trail" + trailsId + ".jpg";
+        String notFoundPath = "images/trails/trailNotFound.jpg";
+
+        File imgFile = new File("src/main/resources/static/" + imgPath);
+        return imgFile.exists() ? imgPath : notFoundPath;
+    }
 
 }
diff --git a/src/main/java/Team5/SmartTowns/data/TrailsRepository.java b/src/main/java/Team5/SmartTowns/data/TrailsRepository.java
index 4fbe02180e45e11fae34218b697d7cedf22cc9fe..240334862a1d086df9f686838ea7aade4c38ec65 100644
--- a/src/main/java/Team5/SmartTowns/data/TrailsRepository.java
+++ b/src/main/java/Team5/SmartTowns/data/TrailsRepository.java
@@ -7,5 +7,7 @@ public interface TrailsRepository {
     List<Trail> getAllTrails();
     String getTrailNameWithID(String trailsID);
 
+    List<Trail> getAllTrailsFromCity(String cityName);
+
     int getTrailIDFromTrailName(String trailsName);
 }
diff --git a/src/main/java/Team5/SmartTowns/data/TrailsRepositoryJDBC.java b/src/main/java/Team5/SmartTowns/data/TrailsRepositoryJDBC.java
index a415626ac6a64b7ffed0ab068c2b19cbfab13d63..68549602aea6ce0f854909e10aa2bce8f7c9d254 100644
--- a/src/main/java/Team5/SmartTowns/data/TrailsRepositoryJDBC.java
+++ b/src/main/java/Team5/SmartTowns/data/TrailsRepositoryJDBC.java
@@ -17,7 +17,7 @@ public class TrailsRepositoryJDBC implements TrailsRepository {
     }
     private void settrailsMapper(){
         trailMapper = (rs, i) -> new Trail(
-                rs.getString("trailID"),
+                rs.getLong("trailID"),
                 rs.getString("trailName"),
                 rs.getString("trailNumber")
         );
@@ -35,6 +35,12 @@ public class TrailsRepositoryJDBC implements TrailsRepository {
 
     }
 
+    @Override
+    public List<Trail> getAllTrailsFromCity(String cityName) {
+        String sql = "SELECT * FROM trails WHERE city = ?";
+        return jdbc.query(sql, trailMapper, cityName);
+    }
+
     @Override
     public int getTrailIDFromTrailName(String trailsName){
         return jdbc.queryForObject("SELECT trailID FROM trails WHERE trailName=?", Integer.class, trailsName);
diff --git a/src/main/java/Team5/SmartTowns/landmarks/LandmarksController.java b/src/main/java/Team5/SmartTowns/landmarks/LandmarksController.java
index b611410baa9eb490ddb458afb7cdceb33d1255f6..f7005bed0229ebaffaa4ee283fb5368001694cec 100644
--- a/src/main/java/Team5/SmartTowns/landmarks/LandmarksController.java
+++ b/src/main/java/Team5/SmartTowns/landmarks/LandmarksController.java
@@ -42,7 +42,7 @@ public class LandmarksController {
 
         } else {
             // converts valid response using Location constructor into a submittable format to the sql table
-            Location loc = new Location(landmarks.getLandmarkName(), landmarks.getLandmarkEmail(), landmarks.getLandmarkDescription(), landmarks.getLandmarkLocation(), landmarks.getTrailID(), false);
+            Location loc = new Location(landmarks.getLandmarkID(), landmarks.getLandmarkName(), landmarks.getLandmarkEmail(), landmarks.getLandmarkDescription(), landmarks.getLandmarkLocation(), landmarks.getTrailID(), false);
             locationRepository.addLocation(loc); // adds valid landmark to locations table
             ModelAndView modelAndView = new ModelAndView("redirect:/home");
             return modelAndView;
diff --git a/src/main/java/Team5/SmartTowns/placeswithcoordinates/PlacesController.java b/src/main/java/Team5/SmartTowns/placeswithcoordinates/PlacesController.java
index 1a5e26b50d0fafd86e622ede2f93d4048dcce4a0..b9f08193e5f31d8285e385cc6c9495cc15ddf3b1 100644
--- a/src/main/java/Team5/SmartTowns/placeswithcoordinates/PlacesController.java
+++ b/src/main/java/Team5/SmartTowns/placeswithcoordinates/PlacesController.java
@@ -4,6 +4,8 @@ import Team5.SmartTowns.data.Location;
 import Team5.SmartTowns.data.LocationRepository;
 import Team5.SmartTowns.data.Trail;
 import Team5.SmartTowns.data.TrailsRepository;
+import Team5.SmartTowns.rewards.RewardsRepository;
+import Team5.SmartTowns.users.UserRepository;
 import jakarta.validation.constraints.Max;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -14,7 +16,9 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.servlet.ModelAndView;
 
-import java.util.*;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
 
 @Controller
 public class PlacesController {
@@ -27,57 +31,9 @@ public class PlacesController {
     @Autowired
     private TrailsRepository trailsRepo;
 
-    @GetMapping("/towns")
-    public ModelAndView getTownPages(){
-        ModelAndView modelAndView = new ModelAndView("towns/townsPageList.html");
-        List<TownWithTrails> townsList = placeRepo.getAllTownCoords();
-        List<Trail> trailslocations =  trailsRepo.getAllTrails();
-        modelAndView.addObject("trails", trailslocations);
-        modelAndView.addObject("towns", townsList);
-        return  modelAndView;
-    }
-
-    @RequestMapping(value="/town", method= RequestMethod.POST)
-    public String sendHtmlFragmentTown(Model map) {
-        map.addAttribute("foo", "bar");
-        return "checkpoint/checkpoint";
-    }
-
-    @GetMapping("/towns/{town}")
-    public ModelAndView getResultBySearchKeyTowns(@PathVariable String town) {
-        List<TownWithTrails> townsList = placeRepo.getAllTownCoords();
-        List<Trail> trailslocations =  trailsRepo.getAllTrails();
-        List<Trail> correctTrails = new ArrayList<>();
-        String townNamee="";
-        int indexTown=999;
-        for (int i=0;i<townsList.size();i++){
-            if (Objects.equals(townsList.get(i).getTownName(), town)){
-                indexTown=i;
-                townNamee=town;
-            }
-        }
-        if (indexTown!=999){
-            int townIDFromTable= placeRepo.getTownIDFromName(townNamee);
-            for (int i=0;i<trailslocations.size();i++){
-                int trailID = trailsRepo.getTrailIDFromTrailName(trailslocations.get(i).getTrailName());
-                if ((trailID>100)&&(trailID<200)&&(Objects.equals(townNamee, "Caerphilly"))){
-                    correctTrails.add(trailslocations.get(i));
-                }
-                if ((trailID>200)&&(trailID<300)&&(Objects.equals(townNamee, "Risca"))){
-                    correctTrails.add(trailslocations.get(i));
-                }
-                if ((trailID>300)&&(trailID<400)&& (Objects.equals(townNamee, "Penarth")) ){
-                    correctTrails.add(trailslocations.get(i));
-                }
-            }
-        }
-
-        ModelAndView modelAndView= new ModelAndView("fragments/townsPageFrags :: townSection");
-        modelAndView.addObject("town", townsList.get(indexTown));
-        modelAndView.addObject("trails", correctTrails);
+    @Autowired
+    private RewardsRepository rewardsRepository;
 
-        return modelAndView;
-    }
 
     @GetMapping("/checkpoints")
     public ModelAndView getLocationPages(){
@@ -99,11 +55,9 @@ public class PlacesController {
 
 
 
-
-
         @GetMapping("/checkpoints/{location}")
     public ModelAndView getResultBySearchKeyLocation(@PathVariable String location) {
-            List<LocationsCoordinates> locCoords = reorderCoordsWRTLocations(placeRepo.getAllLocationCoords());
+            List<LocationsCoordinates> locCoords = placeRepo.getAllLocationCoords();
             List<Location> approvedLocations = locationRepo.getAllApprovedLocations();
 
             int locationID = 999;
@@ -136,7 +90,7 @@ public class PlacesController {
 
         modelAndView.addObject("trails", trailslocations);
         modelAndView.addObject("locations", approvedLocations);
-        modelAndView.addObject("locationCoords", reorderCoordsWRTLocations(locCoords));
+        modelAndView.addObject("locationCoords", locCoords);
         return  modelAndView;
     }
 
@@ -158,52 +112,24 @@ public class PlacesController {
                 trailID=i;
             break;}
         }
-        List<LocationsCoordinates> aa=reorderCoordsWRTLocations(locCoords);
         ModelAndView modelAndView= new ModelAndView("fragments/trailsPageFrags :: trailsSection");
-        modelAndView.addObject("trail", trailslocations.get(trailID));
-        modelAndView.addObject("locCoords", aa);
-        modelAndView.addObject("locations", approvedLocations);
-        return modelAndView;
-    }
+        System.out.println(locCoords.get(0).getLocationID());
+        System.out.println(approvedLocations.get(0).getLocationID());
+//        locations[indexValue.index].getLocationTrailID()==trail.getTrailsId()}
 
 
-//    public List<LocationsCoordinates> reorderCoordsWRTLocations(List<LocationsCoordinates> locCoords){
-//        List<Location> approvedList = locationRepo.getAllLocation();
-////        List<LocationsCoordinates> locCoords = placeRepo.getAllLocationCoords();
-//        List<Integer> locationID= new ArrayList<Integer>();
-//        System.out.println(locCoords);
-//        System.out.println("///////");
-//        Collections.swap(locCoords,0,10);
-//        for(int i=0;i<locCoords.size();i++){
-//            if (i==locCoords.size()-1){
-//                if (locCoords.get(i).getLocationID()<locCoords.get(i-1).getLocationID()){
-//                    Collections.swap(locCoords,i,i--);
-//                    i=0;
-//                }
-//
-//            }
-//            if (locCoords.get(i).getLocationID()>locCoords.get(i++).getLocationID()){
-//                System.out.println("ASDSADASD");
-//                Collections.swap(locCoords,i,i++);
-//                i=0;
-//            }
-//
-//        } System.out.println(locCoords);
-//        return locCoords;
-//
-//
-//
-//    }
-
- // When adding to the locationsCoordinates table, the order is not based on LocationID order, therefore it is needed to rearrange this list to
-    // follow ascending locationID so that any new coordinates match up with their intended locations.
-    public List<LocationsCoordinates> reorderCoordsWRTLocations(List<LocationsCoordinates> locCoords){
-        Collections.sort(locCoords,
-                Comparator.comparingInt(LocationsCoordinates::getLocationID));
-        return locCoords;
+        final int trailIDFINAL = trailID;
+        List<Location> finalLocations = approvedLocations.stream()
+                .filter(loc -> Long.parseLong(loc.getLocationTrailID()) == trailslocations.get(trailIDFINAL).getTrailsId())
+                        .toList();
+        System.out.println(finalLocations);
 
-    }
+        modelAndView.addObject("trail", trailslocations.get(trailID));
+        modelAndView.addObject("locCoords", locCoords);
+        modelAndView.addObject("locations", finalLocations);
 
+        modelAndView.addObject("stickers", rewardsRepository.getAllStickersFromPack(1));
+        return modelAndView;
     }
 
-
+}
diff --git a/src/main/java/Team5/SmartTowns/security/SecurityConfiguration.java b/src/main/java/Team5/SmartTowns/security/SecurityConfiguration.java
index ef2490fe86e95dbc73ed89e103f5370b2760c904..f6ef3bd588a34b002e0df70b37faa90fed95a427 100644
--- a/src/main/java/Team5/SmartTowns/security/SecurityConfiguration.java
+++ b/src/main/java/Team5/SmartTowns/security/SecurityConfiguration.java
@@ -2,6 +2,7 @@ package Team5.SmartTowns.security;
 
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.http.HttpMethod;
 import org.springframework.security.config.Customizer;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
@@ -10,6 +11,7 @@ import org.springframework.security.crypto.password.NoOpPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.provisioning.JdbcUserDetailsManager;
 import org.springframework.security.provisioning.UserDetailsManager;
+import org.springframework.security.web.AuthenticationEntryPoint;
 import org.springframework.security.web.SecurityFilterChain;
 
 import javax.sql.DataSource;
@@ -28,10 +30,11 @@ public class SecurityConfiguration {
                 .authorizeHttpRequests((requests) -> requests
                         .requestMatchers("/user/**", "/userProfile").authenticated()
                         .anyRequest().permitAll()
+
                 )
                 .formLogin((login) -> login
                         .loginPage("/login").permitAll()
-                        .defaultSuccessUrl("/userProfile")
+                        .defaultSuccessUrl("/mobile-home")
                 )
                 .logout((logout) -> logout.permitAll());
 
diff --git a/src/main/java/Team5/SmartTowns/towns/TownController.java b/src/main/java/Team5/SmartTowns/towns/TownController.java
index ece2bb1e8ed2700be94c9999f8b4d26e8d23fa95..d31409b3409c4b3e50cc8994e25ce3c6d2406506 100644
--- a/src/main/java/Team5/SmartTowns/towns/TownController.java
+++ b/src/main/java/Team5/SmartTowns/towns/TownController.java
@@ -21,7 +21,16 @@ public class TownController {
 
     @GetMapping("/home")
     public ModelAndView getTownList(){
-        ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
+        ModelAndView modelAndView = new ModelAndView("towns/home/homePage");
+        TownStorage townsCurrent= new TownStorage().getInstance();
+        List<Towns> towns = townsCurrent.getTownList();
+        modelAndView.addObject("towns",towns);
+        return modelAndView;
+
+    }
+    @GetMapping("/mobile-home")
+    public ModelAndView getTownListMobile(){
+        ModelAndView modelAndView = new ModelAndView("towns/home/mobile-homepage");
         TownStorage townsCurrent= new TownStorage().getInstance();
         List<Towns> towns = townsCurrent.getTownList();
         modelAndView.addObject("towns",towns);
diff --git a/src/main/java/Team5/SmartTowns/towns/TownStorage.java b/src/main/java/Team5/SmartTowns/towns/TownStorage.java
index 988a20223b33d27fbccab94007a1efb6e3088bbb..3b86208bbb9818e61ef2a50e1084b416535d108a 100644
--- a/src/main/java/Team5/SmartTowns/towns/TownStorage.java
+++ b/src/main/java/Team5/SmartTowns/towns/TownStorage.java
@@ -12,8 +12,8 @@ public class TownStorage {
         townList.addAll(
           List.of(
                   new Towns("Caerphilly",01,3,70,"/images/banners/CaerphillyCastle.jpg"),
-                  new Towns("Risca",02,2,34,"/images/banners/RiscaBanner.jpg"),
-                  new Towns("Penarth",03,5,0,"/images/banners/PenarthBanner.jpg"),
+                  new Towns("Risca",02,1,34,"/images/banners/RiscaBanner.jpg"),
+                  new Towns("Penarth",03,1,0,"/images/banners/PenarthBanner.jpg"),
                   new Towns("Penarth",03,5,50,"/images/banners/PenarthBanner.jpg"),
                   new Towns("Caerphilly",01,3,70,"/images/banners/CaerphillyCastle.jpg"),
                   new Towns("Risca",02,2,90,"/images/banners/RiscaBanner.jpg"),
diff --git a/src/main/java/Team5/SmartTowns/towns/Towns.java b/src/main/java/Team5/SmartTowns/towns/Towns.java
index ebe6fd4797c205ace803727026e64837a2af93e6..677faf85a287ac8903edcbf9ff4395a234d9e44f 100644
--- a/src/main/java/Team5/SmartTowns/towns/Towns.java
+++ b/src/main/java/Team5/SmartTowns/towns/Towns.java
@@ -59,4 +59,23 @@ public class Towns {
         this.trailProgress = trailProgress;
         this.imageTown = imageTown;
     }
+
+    public String setTrailProgressClass() {
+        /*SUGGESTION INSTEAD OF DOING THIS IS THE HTML*/
+        String progress;
+        if (trailProgress < 50) {
+            progress = "notComplete";
+        } else if (trailProgress < 70) {
+            progress = "farComplete";
+        } else if (trailProgress < 90) {
+            progress = "nearComplete";
+        } else if (trailProgress < 100) {
+            progress = "closeComplete";
+        } else {
+            progress = "Complete";
+        }
+        return progress;
+    }
+
+
 }
diff --git a/src/main/java/Team5/SmartTowns/trails/Trail.java b/src/main/java/Team5/SmartTowns/trails/Trail.java
deleted file mode 100644
index a7067f83758ce0904851b89a51880dc9782da104..0000000000000000000000000000000000000000
--- a/src/main/java/Team5/SmartTowns/trails/Trail.java
+++ /dev/null
@@ -1,40 +0,0 @@
-package Team5.SmartTowns.trails;
-
-import lombok.Data;
-
-import java.io.File;
-import java.util.List;
-
-@Data
-public class Trail {
-    public static List<Trail> trails = List.of(
-            new Trail(1,"Caerphilly Castle Trail", "Take a stroll through the grounds of one of Europe's finest historic buildings and you will see stunning views of the castle and the lakes. The route of the trail is marked with eight special circular markers, which depict various fascinating historical facts relating to the castle. Pupils from Ysgol Gynradd Gymraeg Caerffili, Plasyfelin Junior School, Ysgol Y Castell and Twyn Primary worked with the artist to come up with the different designs. You do not need to pay to go in the castle to complete this trail. This Trail is fairly short at 1.5 miles and very suitable for wheelchairs and pushchairs as the route stays mostly on well-marked and ramped paths with just a couple of short diversions onto grassed areas."),
-            new Trail(2,"Trail2", "This is trail two"),
-            new Trail(3,"Trail3", "This is trail three"),
-            new Trail(4,"Trail4", "This is trail four"),
-            new Trail(5,"A Dragon's Tale", "EDITING THIS")
-    );
-
-    int id;
-    String name;
-    String description;
-    int nLandmarks;
-    int difficulty; //1-5
-    String imgPath;
-
-    public Trail(int id, String name, String description) {
-        this.id = id;
-        this.name = name;
-        this.description = description;
-        imgPath = findImagePath();
-    }
-
-    private String findImagePath(){
-        /* Finds the image in the Path folder, if image is not found assigns default image */
-        String imgPath = "images/trails/trail" + id + ".jpg";
-        String notFoundPath = "images/trails/trailNotFound.jpg";
-
-        File imgFile = new File("src/main/resources/static/" + imgPath);
-        return imgFile.exists() ? imgPath : notFoundPath;
-    }
-}
diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
index 3b99af4fbf1b4dba80625e50525d6c70300fdaba..0a6aaa6de004d10f283016f6d1c4ad53f640abcd 100644
--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -1,7 +1,13 @@
 package Team5.SmartTowns.trails;
 
 
+import Team5.SmartTowns.data.LocationRepository;
+import Team5.SmartTowns.data.LocationRepositoryJDBC;
+import Team5.SmartTowns.data.Trail;
+import Team5.SmartTowns.data.TrailsRepository;
 import Team5.SmartTowns.landmarks.Landmarks;
+import Team5.SmartTowns.placeswithcoordinates.PlacesCoordinatesRepository;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
@@ -15,10 +21,14 @@ import java.util.Optional;
 
 @Controller
 public class TrailsController {
-    @GetMapping("/allTrails")
-    public ModelAndView getAllTrails(){
+
+    @Autowired
+    private TrailsRepository trailsRepository;
+
+    @GetMapping("/allTrails-{city}")
+    public ModelAndView getAllTrails(@PathVariable String city){
         ModelAndView mav = new ModelAndView("allTrails/allTrails");
-        mav.addObject("trails", Trail.trails); //Mock data for trails
+        mav.addObject("trails", trailsRepository.getAllTrailsFromCity(city)); //Mock data for trails
         return mav;
     }
     @RequestMapping(value="/id", method=RequestMethod.POST)
@@ -30,7 +40,7 @@ public class TrailsController {
     @GetMapping("/allTrails/{id}")
     public ModelAndView getResultBySearchKey(@PathVariable int id)
     {
-        List<Trail> trailList= Trail.trails;//results from db
+        List<Trail> trailList = trailsRepository.getAllTrails();//results from db
         ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
         mv.addObject("trail", trailList.get(id-1));
         return mv;
diff --git a/src/main/java/Team5/SmartTowns/users/UserController.java b/src/main/java/Team5/SmartTowns/users/UserController.java
index e1acd4b66f1546db506ec5313c5680122e05587d..e9fd1bef1b655dad57a0550739cbaad74e996e38 100644
--- a/src/main/java/Team5/SmartTowns/users/UserController.java
+++ b/src/main/java/Team5/SmartTowns/users/UserController.java
@@ -43,7 +43,7 @@ public class UserController {
 //        return mav;
 //    }
 
-    @PostMapping("/login/register")
+    @PostMapping("/register")
     public ModelAndView registerUser(@Valid @ModelAttribute("user") NewUser user, BindingResult bindingResult, Model model) {
         ModelAndView mav = new ModelAndView("users/login", model.asMap());
         // TODO VALIDATE EMAIL INPUT
@@ -51,19 +51,12 @@ public class UserController {
         if (bindingResult.hasErrors()) {
             ModelAndView modelAndView = new ModelAndView("users/login");
             modelAndView.addObject("errors", bindingResult);
+            modelAndView.addObject("error", "");
             return modelAndView;
         }
-
-        if ( userRepository.doesUserExist(user.getEmail()) ) {
-            mav.addObject("errors", "Email already in use");
-            return mav;
-        }
-
         try {
             userRepository.addUser(user.name, user.email, user.password);
-            mav.addObject("error", "");
-            //TODO return user creation success
-            return mav;
+            return new ModelAndView("redirect:/login?register");
         } catch (DataAccessException e) {
             mav.addObject("error", "User exists");
         }
@@ -83,12 +76,14 @@ public class UserController {
     }
 
 
+
     /* USER MAPPING & FUNCTIONS */
-    @GetMapping("/user/{username}")
+    @GetMapping("/profile/{username}")
     public ModelAndView getUserPage(@PathVariable String username) {
         ModelAndView mav = new ModelAndView("users/userProfile");
         List<Pack> allPacks = rewardsRepository.getAllPacks();
-        mav.addObject("user", userRepository.findUserByName("Admin"));
+        allPacks.remove(0);
+        mav.addObject("user", userRepository.findUserByName(username));
         mav.addObject("packs", allPacks);
         mav.addAllObjects(getPackInfo(username, 1).getModelMap());
         return mav;
@@ -102,13 +97,16 @@ public class UserController {
         ModelAndView mav = new ModelAndView("users/userFrags :: stickersBox");
         List<Sticker> allStickers = rewardsRepository.getAllStickersFromPack(packID);
         List<Long> userStickers = userRepository.getUserStickersFromPack(username, packID);
-        System.out.println(userStickers);
-
 
+        List<Pack> allPacks = rewardsRepository.getAllPacks();
+        Pack current = allPacks.stream().filter(pack -> pack.getId() == packID).findFirst().get();
+        allPacks.remove(current);
 
         mav.addObject("stickers", setStickerVisibility(allStickers, userStickers));
         mav.addObject("progress", getPackProgress(allStickers));
         mav.addObject("selectedPack", rewardsRepository.findPackByID(packID));
+        mav.addObject("packs", allPacks);
+        mav.addObject("user", userRepository.findUserByName(username));
         return mav;
     }
 
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 52e81d219c68d4702643665e6f9d58c7aebb8308..fc40c9e4004d1b4e83234ecefecf308e3e4871b8 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1,4 +1,4 @@
-spring.datasource.url=jdbc:mariadb://localhost:3306/towns
+spring.datasource.url=jdbc:mariadb://localhost:3306/
 spring.datasource.username=root
 spring.datasource.password=comsc
 
diff --git a/src/main/resources/data.sql b/src/main/resources/data.sql
index 389042e16e7a3acdc3cb53ca62ce1a7438747069..93da531894ec89fb4bbd38b4f468d9e0169cfcb9 100644
--- a/src/main/resources/data.sql
+++ b/src/main/resources/data.sql
@@ -1,13 +1,9 @@
-# delete from users;
-# insert into users (email, name) value ('hannah@gmail.com', 'Hannah');
-# insert into users (email, name) value ('nigel@gmail.com', 'Nigel');
-
 delete from trails;
-insert into trails ( trailID, trailName, trailNumber) value ( 0101,'Caerphilly Castle Trail','0101');
-insert into trails ( trailID, trailName, trailNumber) value ( 0102,'Caerphilly Pub Trail','0102');
-insert into trails ( trailID, trailName, trailNumber) value ( 0103,'Caerphilly Heritage Trail','0103');
-insert into trails ( trailID, trailName, trailNumber) value ( 0201,'Risca Heritage Trail','0201');
-insert into trails ( trailID, trailName, trailNumber) value ( 0301,'Penarth Esplanade Trail','0301');
+insert into trails ( trailID, trailName, trailNumber, city) value ( 0101,'Caerphilly Castle Trail','0101', 'Caerphilly');
+insert into trails ( trailID, trailName, trailNumber, city) value ( 0102,'Caerphilly Pub Trail','0102', 'Caerphilly');
+insert into trails ( trailID, trailName, trailNumber, city) value ( 0103,'Caerphilly Heritage Trail','0103', 'Caerphilly');
+insert into trails ( trailID, trailName, trailNumber, city) value ( 0201,'Risca Heritage Trail','0201', 'Risca');
+insert into trails ( trailID, trailName, trailNumber, city) value ( 0301,'Penarth Esplanade Trail','0301', 'Penarth');
 
 delete from locations;
 insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID, locationApproved) value ( 'St Cenydd','','Location description here','Caerphilly',0101, false);
@@ -31,25 +27,17 @@ insert into locations ( locationName , locationEmail,locationDescription,locatio
 
 insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID, locationApproved) value ( 'Risca Colliery','','Location description here','Risca',0201, true);
 insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID, locationApproved) value ( 'Black Vein Colliery Disaster','','Location description here','Risca',0201, true);
-
 insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID, locationApproved) value ( 'The Esplanade','','Location description here','Penarth',0301, true);
 insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID, locationApproved) value ( 'The Old Swimming Baths','','Location description here','Penarth',0301, true);
 
 
-# delete from badges;
-# insert into badges (name, description, difficulty) value ('TownConnoisseur', 'You know the town very well!', '2');
-# insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-# insert into badges (name, description, difficulty) value ('TownMaster', 'You visited the town 7 days in a row!', '1');
-# insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-# insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-
 
 
-delete from packs;
-insert into packs (name, description) value ('Wales Football Team', 'Pack of Welsh Football Players in the National Team');
-insert into packs (name, description) value ('Wales Rugby Team', 'Pack of Welsh Rugby Players in the National Team');
-insert into packs (name, description) value ('Welsh Heritage', 'Pack About Welsh Heritage');
 
+DELETE FROM packs;
+INSERT INTO packs (name, description) VALUE ('Wales Football Team', 'Pack of Welsh Football Players in the National Team');
+INSERT INTO packs (name, description) VALUE ('Wales Rugby Team', 'Pack of Welsh Rugby Players in the National Team');
+INSERT INTO packs (name, description) VALUE ('Welsh Heritage', 'Pack About Welsh Heritage');
 
 DELETE FROM stickers;
 INSERT INTO stickers (packID, stickerID, name, description, rarity) VALUE (1, 1, 'wayne_hennessey', 'Wales Football Team Player', '2');
diff --git a/src/main/resources/schema.sql b/src/main/resources/schema.sql
index 6a2f0ee317773ffb4f36e8b87037a5c250bcb1c4..dceaa69dfd0935641eef99dfd1aa5f3e77e70297 100644
--- a/src/main/resources/schema.sql
+++ b/src/main/resources/schema.sql
@@ -24,7 +24,8 @@ create table if not exists trails
 (
     trailID varchar(128) primary key,
     trailName varchar(128),
-    trailNumber varchar(128)
+    trailNumber varchar(128),
+    city varchar(128)
 )   engine=InnoDB;
 
 drop table if exists locationCoordinates;
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index ab706c5ba8ee5925faf8c774e1ec8711ffab4674..ea3a17f56d38be864c8d56530e925ec3abc7e29f 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -1,36 +1,48 @@
-* {
-    box-sizing: border-box;
-}
-body {
-    background-color: rgb(41, 41, 41);
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    min-height: 100svh;
-}
-main {
-}
-
-.centerFlex {
-    display: flex;
-    justify-content: center;
-}
 #allTrailsBar {
     width: 100%;
-    height: auto;
+    min-height: 70svh;
     /*margin: 1svh auto;*/
-    padding: 0 5svh;
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     justify-content: space-evenly;
+    position: relative;
 
 }
+
+.trailWrapper {
+    position: relative;
+    display: flex;
+    width: 70vw;
+    height: 20svh;
+    margin-inline: auto;
+    & h1 {
+        display: flex;
+        width: 100%;
+        position: absolute;
+        align-items: flex-start;
+        padding-top: 1svh;
+        padding-bottom: 0.5svh;
+        text-align: center;
+        justify-content: center;
+        text-decoration: none;
+        color: white;
+        font-weight: 600;
+        text-shadow: rgba(0, 0, 0, 0.2) 0 1svh 1svh;
+        font-size: 2em;
+        border-bottom: black solid 2px;
+        background-color: rgba(31, 31, 31, 0.2);
+        border-radius: 20px 20px 0 0;
+    }
+}
+
 .trailsImages {
-    margin: 1svh auto;
-    height: 12svh;
-    width: auto;
+    width: 100%;
+    height: 100%;
+    /*margin: 1svh 0;*/
+    /*height: auto;*/
+    /*aspect-ratio: 1;*/
     border-radius: 20px;
-    border: solid grey 2px;
+    border: solid grey 4px;
     transition: 0.5s ease-out 100ms;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
 }
@@ -47,88 +59,79 @@ main {
     0% { opacity: 0; }
     100% { opacity: 1; }
 }
-main {
-    margin: 0;
-}
-
-#trailInfoContainer {
-
-    overflow: scroll;
-}
 
-.trailInfoFrag {
-    background-color: rgb(84, 33, 128);
-    border: #000000 solid 2px;
-    border-radius: 10px;
-    box-shadow: 0 5px 20px 0 #000000;
-    margin: 2svh auto;
-    padding-bottom: 2svw;
-    width: 70vw;
-    height: auto;
-    min-height: 30svh;
-    animation: fadeIn 3s;
+/*#trailInfoContainer {*/
 
-    display: grid;
-    grid-template-areas:
-            "header header header"
-            "image text text";
-    grid-template-columns: 30% 30% auto;
-    grid-template-rows: 10% auto;
-    grid-column-gap: 2vw;
-    grid-row-gap: 2svh;
-    & .trailInfoHeader {
-        grid-area: header;
-        width: 100%;
-        height: 100%;
-        margin-top: 1svh;
-        padding: 0;
-        & h1 {
-            color: white;
-            padding:0;
-            margin:0 25%;
-            font-size: 2vw;
-            text-align: center;
-            box-shadow: 0 10px 10px -10px black;
-        }
+/*    overflow: scroll;*/
+/*}*/
 
-    }
+/*.trailInfoFrag {*/
+/*    background-color: rgb(84, 33, 128);*/
+/*    border: #000000 solid 2px;*/
+/*    border-radius: 10px;*/
+/*    box-shadow: 0 5px 20px 0 #000000;*/
+/*    margin: 2svh auto;*/
+/*    padding-bottom: 2svw;*/
+/*    width: 70vw;*/
+/*    height: auto;*/
+/*    min-height: 30svh;*/
+/*    animation: fadeIn 3s;*/
 
-    & img {
-        grid-area: image;
-        border-radius: 10px;
-        border: black solid 1px;
-        margin-left: 2vw;
-        margin-right: 2vw;
-        width: 100%;
-        height: auto;
-        box-shadow: 0 10px 20px -10px black;
-    }
-    & p {
-        grid-area: text;
-        color: white;
-        margin: 0;
-        padding: 0 2vw;
-        font-size: 1.3vw;
-        text-align: justify;
-        text-justify: inter-character;
-        line-height: 1.5;
-        width: fit-content;
-        height: fit-content;
-        overflow: scroll;
+/*    display: grid;*/
+/*    grid-template-areas:*/
+/*            "header header header"*/
+/*            "image text text";*/
+/*    grid-template-columns: 30% 30% auto;*/
+/*    grid-template-rows: 10% auto;*/
+/*    grid-column-gap: 2vw;*/
+/*    grid-row-gap: 2svh;*/
+/*    & .trailInfoHeader {*/
+/*        grid-area: header;*/
+/*        width: 100%;*/
+/*        height: 100%;*/
+/*        margin-top: 1svh;*/
+/*        padding: 0;*/
+/*        & h1 {*/
+/*            color: white;*/
+/*            padding:0;*/
+/*            margin:0 25%;*/
+/*            font-size: 2vw;*/
+/*            text-align: center;*/
+/*            box-shadow: 0 10px 10px -10px black;*/
+/*        }*/
 
-    }
-}
+/*    }*/
 
-#trailFragContent {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    min-height: 40svh;
-    flex-wrap: wrap;
+/*    & img {*/
+/*        grid-area: image;*/
+/*        border-radius: 10px;*/
+/*        border: black solid 1px;*/
+/*        margin-left: 2vw;*/
+/*        margin-right: 2vw;*/
+/*        width: 100%;*/
+/*        height: auto;*/
+/*        box-shadow: 0 10px 20px -10px black;*/
+/*    }*/
+/*    & p {*/
+/*        grid-area: text;*/
+/*        color: white;*/
+/*        margin: 0;*/
+/*        padding: 0 2vw;*/
+/*        font-size: 1.3vw;*/
+/*        text-align: justify;*/
+/*        text-justify: inter-character;*/
+/*        line-height: 1.5;*/
+/*        width: fit-content;*/
+/*        height: fit-content;*/
+/*        overflow: scroll;*/
 
-}
+/*    }*/
+/*}*/
 
-header {
-    box-shadow: #1e1e1e 0 0 10px 10px;
-    font-size: 1vw;
-}
+/*#trailFragContent {*/
+/*    margin: 0;*/
+/*    padding: 0;*/
+/*    display: flex;*/
+/*    min-height: 40svh;*/
+/*    flex-wrap: wrap;*/
+/*}*/
\ No newline at end of file
diff --git a/src/main/resources/static/css/colours.css b/src/main/resources/static/css/colours.css
new file mode 100644
index 0000000000000000000000000000000000000000..fd5fc2bf78240e9a2b07b222cab37d118145e2a0
--- /dev/null
+++ b/src/main/resources/static/css/colours.css
@@ -0,0 +1,50 @@
+/* AUTHOR: Gabriel Copat
+ * Variable list for website palette, to be re-used throughout the site
+ *
+ * This makes it easy to change up the site's colours without having to go through
+ *     each individual reference in the CSS
+*/
+
+/*FONTS*/
+@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap'); /*MedievalSharp*/
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); /*Montserrat*/
+
+:root {
+    /*Variable Colours for Dark Theme Users
+    *************DEFAULT VALUES************
+    */
+
+    --primary-colour: hsl(271, 100%, 20%);
+    --primary-dark: hsl(271, 100%, 15%);
+    --primary-darker: hsl(272, 100%, 10%);
+    --prim-shade-1:#632e93;
+    --prim-shade-2:#9159c2;
+    --prim-shade-3:#c285f3;
+
+    --secondary-colour: #f2724a;
+    --accent-colour: #cc2f58;
+    --accent-secondary: #8f0065;
+
+    /*DEFAULT TEXT COLOUR*/
+    color:  white;
+    font-family: 'Montserrat', sans-serif;
+
+
+    /*Variable Colours for Light Theme Users*/
+    /*UN-IMPLEMENTED AS OF YET*/
+    @media (prefers-color-scheme: light) {
+        /*--primary-darker: hsl(272, 100%, 10%);*/
+        /*--primary-dark: hsl(271, 100%, 20%);*/
+        /*--primary-colour: hsl(271, 100%, 30%);*/
+        /*--primary-light: hsl(271, 100%, 40%);*/
+        /*--primary-lighter: hsl(271, 100%, 50%);*/
+
+        /*--secondary-colour: hsl(12, 81%, 46%);*/
+        /*--accent-colour: hsl(12, 82%, 32%);*/
+        /*--accent-border: hsl(12, 81%, 25%);*/
+
+        /*--accent-shadow: rgba(0, 0, 0, 0.7) 0 0.5em 1em -0.5em;*/
+
+        /*color: white;*/
+    }
+}
diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
index 9ecf1b6294ebdadef823e3e25ebeb68fd04e79f2..4d69af3c489fc11c8772ed8e68eda94d2d536b75 100644
--- a/src/main/resources/static/css/homePageStyle.css
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -1,176 +1,264 @@
+@media only screen
+and (min-device-width: 1000px) {
+    body {
+        background-color: rgb(41, 41, 41)
+    }
+
+    #homeTitle {
+        grid-area: pageTitle;
+        color: whitesmoke;
+    }
+
+    .submitLand {
+        grid-area: submitButton;
+    }
+
+    .Banner {
+        margin-top: 20px;
+        background-color: darkslategrey;
+        margin-bottom: 20px;
+        /*border: solid 2px whitesmoke;*/
+        /*border colour here at .banner and .bannertrail*/
+        border-right: none;
+    }
+
+    /* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
+    .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        border: solid 2px whitesmoke;
+        text-align: center;
+    }
+
+    .BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th {
+        grid-area: townBannerDetsR
+    }
+
+    .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
+        grid-area: townBannerDets;
+    }
+
+    .BannerTrail {
+        background-color: darkslategrey;
+
+    }
+
+    .BannerTrail.Complete {
+        background-color: gold;
+        border: 2px solid gold;
+        border-left: solid 2px whitesmoke;
+    }
+
+    .BannerTrail.closeComplete {
+        background-color: darkgoldenrod;
+        background-color: darkgoldenrod;
+        border: 2px solid darkgoldenrod;
+        border-left: solid 2px whitesmoke;
+    }
+
+    .BannerTrail.nearComplete {
+        background-color: deepskyblue;
+        background-color: deepskyblue;
+        border: 2px solid deepskyblue;
+        border-left: solid 2px whitesmoke;
+    }
+
+    .BannerTrail.farComplete {
+        background-color: green;
+        background-color: green;
+        border: 2px solid green;
+        border-left: solid 2px whitesmoke;
+    }
+
+    .BannerTrail.notComplete {
+        background-color: red;
+        background-color: red;
+        border: 2px solid red;
+        border-left: solid 2px whitesmoke;
+    }
+
+    /*Below selects banner that has the Complete class to change color*/
+    .Banner:has(+.BannerTrail.Complete) {
+        border: 2px solid gold;
+        border-right: solid 2px whitesmoke;
+    }
+
+    .Banner:has(+.BannerTrail.closeComplete) {
+        border: 2px solid darkgoldenrod;
+        border-right: solid 2px whitesmoke;
+    }
+
+
+    .Banner:has(+.BannerTrail.nearComplete) {
+        border: 2px solid deepskyblue;
+        border-right: solid 2px whitesmoke;
+    }
+
+    .Banner:has(+.BannerTrail.farComplete) {
+        border: 2px solid green;
+        border-right: solid 2px whitesmoke;
+    }
+
+    .Banner:has(+.BannerTrail.notComplete) {
+        border: 2px solid red;
+        border-right: solid 2px whitesmoke;
+    }
 
-body{
-    background-color: rgb(41, 41, 41)
-}
-#homeTitle{
-    grid-area: pageTitle;
-    color: whitesmoke;
-}
-.submitLand{
-    grid-area: submitButton;
-}
-
-.reviewLand{
-    grid-area: reviewButton;
-}
-.Banner {
-    margin-top: 20px;
-    background-color: darkslategrey;
-    margin-bottom: 20px;
-    /*border: solid 2px whitesmoke;*/
-    /*border colour here at .banner and .bannertrail*/
-    border-right: none;
-}
-
-/* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
-.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: solid 2px whitesmoke;
-    text-align: center;
-}
-
-.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
-    grid-area:townBannerDetsR
-}
-
-.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
-    grid-area:townBannerDets;
-}
-
-.BannerTrail {
-    background-color: darkslategrey;
-
-}
-
-.BannerTrail.Complete {
-    background-color: gold;
-    border: 2px solid gold;
-    border-left: solid 2px whitesmoke;
-}
-.BannerTrail.closeComplete {
-    background-color: darkgoldenrod;
-    background-color: darkgoldenrod;
-    border: 2px solid darkgoldenrod;
-    border-left: solid 2px whitesmoke;
-}
-
-.BannerTrail.nearComplete {
-    background-color: deepskyblue;
-    background-color: deepskyblue;
-    border: 2px solid deepskyblue;
-    border-left: solid 2px whitesmoke;
-}
-
-.BannerTrail.farComplete {
-    background-color: green;
-    background-color: green;
-    border: 2px solid green;
-    border-left: solid 2px whitesmoke;
-}
-
-.BannerTrail.notComplete {
-    background-color: red;
-    background-color: red;
-    border: 2px solid red;
-    border-left: solid 2px whitesmoke;
-}
-
-/*Below selects banner that has the Complete class to change color*/
-.Banner:has(+.BannerTrail.Complete){
-    border: 2px solid gold;
-    border-right: solid 2px whitesmoke;
-}
 
-.Banner:has(+.BannerTrail.closeComplete){
-    border: 2px solid darkgoldenrod;
-    border-right: solid 2px whitesmoke;
-}
+    .BannerTrail {
+        background-color: darkslategrey;
+
+    }
+
+
+    .Banner {
+        grid-area: townBanner;
+        color: inherit;
+        text-decoration: none;
+        background-color: hotpink;
+    }
 
 
-.Banner:has(+.BannerTrail.nearComplete){
-    border: 2px solid deepskyblue;
-    border-right: solid 2px whitesmoke;
-}
-.Banner:has(+.BannerTrail.farComplete){
-    border: 2px solid green;
-    border-right: solid 2px whitesmoke;
-}
-.Banner:has(+.BannerTrail.notComplete){
-    border: 2px solid red;
-    border-right: solid 2px whitesmoke;
-}
-
+    a {
+        background-size: contain;
 
-.BannerTrail {
-    background-color: darkslategrey;
+    }
 
-}
 
+    #aboutUsFlavour {
+        grid-area: textFlavour;
+        margin-top: 25px;
+        margin-bottom: 15px;
+        color: whitesmoke;
+    }
 
+    #trailCount {
+        flex: 1;
 
 
+    }
 
+    #trailProgress {
+        flex: 2;
+        align-content: center;
 
-.Banner {
-    grid-area:townBanner;
-    color: inherit;
-    text-decoration: none;
-    background-color: hotpink;
-}
-
-
-a{
-    background-size: contain;
-
-}
-
+    }
 
 
-#aboutUsFlavour{
-    grid-area: textFlavour;
-    margin-top: 25px;
-    margin-bottom: 15px;
-    color: whitesmoke;
-}
-#trailCount{
-    flex:1;
-
-
-
-
-}
-#trailProgress{
-    flex:2;
-    align-content: center;
-
-}
-
-
-.gridContainer1 {
-    display:grid;
-    grid-template-columns: 10% 10% 60% 5% 5% 10%;
-    grid-template-rows: auto;
-    grid-template-areas:
+    .gridContainer1 {
+        display: grid;
+        grid-template-columns: 10% 10% 60% 5% 5% 10%;
+        grid-template-rows: auto;
+        grid-template-areas:
             ". pageTitle pageTitle pageTitle pageTitle ."
-            ". reviewButton . submitButton submitButton .";
-}
+            ". . . submitButton submitButton .";
+    }
 
-.gridContainer2 {
-    display:grid;
-    grid-template-columns: 10% 10% 60% 5% 5% 10%;
-    grid-template-rows: auto;
-    grid-template-areas:
+    .gridContainer2 {
+        display: grid;
+        grid-template-columns: 10% 10% 60% 5% 5% 10%;
+        grid-template-rows: auto;
+        grid-template-areas:
 
             ". townBanner townBanner townBannerDets . .";
-}
+    }
 
-.gridContainer3 {
-    display:grid;
-    grid-template-columns: 10% 10% 60% 5% 5% 10%;
-    grid-template-rows: auto;
-    grid-template-areas:
+    .gridContainer3 {
+        display: grid;
+        grid-template-columns: 10% 10% 60% 5% 5% 10%;
+        grid-template-rows: auto;
+        grid-template-areas:
 
             " . . textFlavour . . .";
+    }
 }
 
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 640px) {
+    .small-text {
+        font-size: 0.8em;
+    }
+
+
+    .towns-wrapper {
+        width: 100%;
+    }
+    .gridContainer2 {
+        height: 10svh;
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
+        text-align: left;
+        flex: 1 1;
+        margin-block: 1svh;
+    }
+    .town-name {
+        position: absolute;
+        z-index: 5;
+        padding: 0.2em;
+        margin: 0.5em;
+        border-radius: 35%;
+        background: rgba(31, 31, 31, 0.6);
+
+    }
+    .img-container {
+        float: left;
+        z-index: 1;
+        height: 100%;
+        width: 60vw;
+    }
+    .town-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 20% 0 0 20%;
+        border: #36454F solid;
+        border-width: 6px 3px 6px 6px;
+    }
+    .BannerTrail {
+        width: 25vw;
+        height: 10svh;
+        border-radius: 0 20% 20% 0;
+        border: #36454F solid;
+        border-width: 6px 6px 6px 3px;
+        position: relative;
+        overflow: hidden;
+        & h4 {
+            text-align: center;
+        }
+    }
+    .trail-info {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        width: 25vw;
+        height: 10svh;
+    }
+
+    /*Below selects banner that has the Complete class to change color*/
+    .BannerFill {
+        position: absolute;
+        background: var(--trail-colour, transparent);
+        width: 10%;
+        height: 10svh;
+        opacity: 0.9;
+        z-index: 0;
+    }
+    .Complete {
+        --trail-colour: gold;
+    }
+    .closeComplete {
+        --trail-colour: darkgoldenrod;
+    }
+    .nearComplete {
+        --trail-colour: deepskyblue;
+    }
+    .farComplete {
+        --trail-colour: green;
+    }
+    .notComplete {
+        --trail-colour: red;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/landmarkFormStyle.css b/src/main/resources/static/css/landmarkFormStyle.css
index 9d638b48ae03d406b9f97c85e21f14a00fb3188f..df77f4d47993c4dd75a5c9abe7a2b1084226b8cd 100644
--- a/src/main/resources/static/css/landmarkFormStyle.css
+++ b/src/main/resources/static/css/landmarkFormStyle.css
@@ -1,21 +1,77 @@
 /*LandmarkFormTh stylesheet*/
-body{
-    background:  rgb(41, 41, 41);
-    color: wheat;
-}
-#landmarkSubmission {
-    background-color: rgb(206, 153, 253);
-    color: black;
-    border-color: white;
-    align-content: center;
-    text-align: center;
-    border-radius: 25px;
-    max-width: 620px;
-    margin: 0 auto
+@media only screen
+and (min-device-width: 640px) {
+    #landmarkSubmission {
+        background-color: var(--prim-shade-1);
+        color: black;
+        border-color: white;
+        align-content: center;
+        text-align: center;
+        border-radius: 25px;
+        max-width: 620px;
+        margin: 0 auto
+    }
+
+    #landmarkFormTitle {
+        color: white;
+        text-align: center;
+
+    }
 }
 
-#landmarkFormTitle{
-    color:white;
-    text-align: center;
+@media only screen
+and (max-device-width: 640px) {
+    /*LandmarkFormTh stylesheet*/
+    main {
+       min-height: 30svh;
+    }
+    #landmarkSubmission {
+        background-color: var(--prim-shade-1);
+        border-color: white;
+        align-content: center;
+        text-align: center;
+        border-radius: 25px;
+        max-width: 620px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        row-gap: 2svh;
+        align-items: center;
+
+        & h1 {
+
+        }
+
+        & label {
+            font-weight: 600;
+        }
+        & select {
+            font-size: 1em;
+        }
+
+        & input {
+            font-size: 1em;
+        }
+    }
+
+    .button {
+        background-color: var(--prim-shade-3);
+        border-radius: 20px;
+        border: var(--prim-shade-2) 5px;
+        color: #fff;
+        font-size: xxx-large;
+        padding: 40px 40px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        margin-bottom: 2svh;
+        cursor: pointer;
+        box-shadow: rgba(0, 0, 0, 0.2) 0 1svh 1svh;
+    }
+
+    #landmarkFormTitle {
+        color: white;
+        text-align: center;
 
+    }
 }
\ No newline at end of file
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
index 023566c253e9354e789e85744cd1e4989d523845..6b4674175cd31c60bc189301a648c4f27716e982 100644
--- a/src/main/resources/static/css/login.css
+++ b/src/main/resources/static/css/login.css
@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url(colours.css);
 :root {
     --container-colour: #2a2a2a;
-    --details-colour: var(--primary-light);
+    --details-colour: var(--prim-shade-1);
     --details-light: #512da8;
 
     --font-buttons: 14px;
@@ -13,27 +13,6 @@
     --error-colour: red;
 }
 
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Montserrat', sans-serif;
-    color: white;
-}
-
-body{
-    align-items: center;
-    height: 100svh;
-}
-
-main {
-    height: 90%;
-    width: 90%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 @keyframes move{
     0%, 49.99%{
         opacity: 0;
@@ -48,9 +27,6 @@ main {
 @media only screen
 and (min-device-width: 650px) {
     .container{
-        background-color: var(--container-colour);
-        border-radius: 30px;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
         position: relative;
         overflow: hidden;
         min-width: 768px;
@@ -215,53 +191,64 @@ and (min-device-width: 650px) {
     }
 
 }
+
 @media only screen
 and (max-device-width: 640px) {
+    main {
+        padding: 0;
+        height: 70svh;
+    }
     .container {
         position: relative;
-
-        background-color: var(--container-colour);
-        border-radius: 30px;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
-
         overflow: hidden;
-
         width: 100%;
         height: 100%;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
     }
     .form-container {
-        height: 100%;
+        height: 50%;
         transition: all 0.6s ease-in-out;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+    }
+    .form-title {
+        padding-top: 3svh;
+        font-size: 3em;
     }
     .form-container form {
         display: flex;
-
+        width: 100%;
+        height: 100%;
+        padding-block: 1svh;
         flex-direction: column;
-        align-items: center;
-        font-size: 3em;
-        margin-inline: 5%;
+        font-size: 1.5em;
+        & label {
+            width: 100%;
+        }
     }
+    .form-container label {
+        margin-block: 0.5svh;
+    }
+
     .form-container input {
-        flex: 1 1;
+        width: 70%;
+        height: 90%;
+        padding: 0.5em;
         font-size: 1em;
         color: black;
-        margin-block: 5%;
-        padding: 2%;
         border-radius: 30px;
+        border: #36454F 5px solid;
+        box-shadow: rgba(0, 0, 0, 0.25) 0 1svh 1svh;
+        /*margin-top: 1svh;*/
     }
 
     .form-container button {
-        flex: 1 1;
+        width: 40%;
         font-size: 1em;
+        margin: auto;
     }
+    .recovery-text {
+        margin-top: 1svh;
+        font-size: 0.6em;
+    }
+
     .toggle-container {
         position: absolute;
         top: 0;
@@ -269,16 +256,16 @@ and (max-device-width: 640px) {
         height: 50%;
         transition: all 0.6s ease-in-out;
         overflow: hidden;
-        border-radius:  0 0 150px 150px;
-        z-index: 1000;
-
+        border-radius: 150px 150px 0 0;
+        transform: translateY(100%);
     }
     .container.active .toggle-container{
-        transform: translateY(100%); /*BG THING*/
-        border-radius: 150px 150px 0 0;
+        transform: translateY(0); /*BG THING*/
+
+        border-radius:  0 0 150px 150px;
     }
     .toggle {
-        position: absolute;
+        position: relative;
         width: 100%;
         height: 200%;
         display: flex;
@@ -289,46 +276,51 @@ and (max-device-width: 640px) {
         /*background-color: red;*/
     }
     .toggle-panel {
-        flex: 1 1;
+        height: 100%;
         width: 100%;
+        position: absolute;
     }
     .container .toggle-right {
-        transform: translateY(0);
         opacity: 1;
+        z-index: 5;
+        transform: translateY(-25%);
     }
     .container .toggle-left {
         transform: translateY(-100%);
         opacity: 0;
+        z-index: 1;
     }
     .container.active .toggle-right{
-        transform: translateY(-100%);
+        transform: translateY(50%);
         opacity: 0;
+        z-index: 1;
     }
     .container.active .toggle-left{
-        transform: translateY(-100%);
+        transform: translateY(-25%);
         opacity: 1;
+        z-index: 5;
     }
 
     .container .sign-up {
         opacity: 0;
         z-index: -1;
-        transform: translateY(100%);
+        transform: translateY(150%);
     }
     .container .sign-in {
+        transform: translateY(-100%);
         opacity: 1;
         z-index: 5;
     }
 
     .container.active .sign-in{
-        transform: translateY(-100%);
+        transform: translateY(-150%);
         opacity: 0;
         z-index: -1;
     }
     .container.active .sign-up{
-        animation: move 0.6s;
         opacity: 1;
         z-index: 5;
-        transform: translateY(0);
+        transform: translateY(100%);
     }
 
 
@@ -347,7 +339,7 @@ and (max-device-width: 640px) {
         line-height: 1.5em;
     }
     .container button{
-        background-color: var(--details-colour)/*#512da8*/;
+        background-color: var(--details-colour);
         color: #fff;
         font-size: xxx-large;
         padding: 40px 40px;
@@ -366,7 +358,14 @@ and (max-device-width: 640px) {
     }
 }
 .alert {
-    color: var(--error-colour);
-    text-shadow: var(--error-colour) 0 0 10px;
+    color: var(--alert-colour, black);
+    text-shadow: 0 0 10px var(--alert-colour, black);
+}
+
+.alert-error {
+    --alert-colour: red;
+}
+.alert-success {
+    --alert-colour: green;
 }
 
diff --git a/src/main/resources/static/css/mobile-style.css b/src/main/resources/static/css/mobile-style.css
new file mode 100644
index 0000000000000000000000000000000000000000..6be7d20cb2d472f85e42d7154c059181e13a0904
--- /dev/null
+++ b/src/main/resources/static/css/mobile-style.css
@@ -0,0 +1,195 @@
+@import url(colours.css);
+
+/*PHONES - PORTRAIT*/
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 640px) {
+    :root{
+        --font-headers: 20px;
+        --font-body: 20px;
+    }
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    body {
+        background: linear-gradient(to bottom right,
+        var(--primary-darker),
+        var(--primary-dark),
+        var(--primary-darker));
+
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+
+        width: 100vw;
+        min-height: 100svh;
+        font-size: 2em;
+        row-gap: 2svh;
+    }
+
+    header {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-inline: auto;
+        width: 95vw;
+        height: 6svh;
+        margin-top: 1svh;
+
+        .head-navbar {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            background-color: #1f1f1f;
+            border-radius: 20px;
+            box-shadow: rgba(0, 0, 0, 0.4) 0 1svh 1svh;
+            overflow: hidden;
+        }
+
+        .nav-ul {
+            list-style: none;
+            display: flex;
+            justify-content: space-evenly;
+            flex: 1 1;
+        }
+
+        .nav-li {
+            display: flex;
+            flex: 1 1;
+        }
+
+        .nav-links {
+            display: grid;
+            align-content: center;
+            flex: 1 1;
+            text-align: center;
+            transition: 0.3s ease-in-out 1ms;
+            font-weight: bolder;
+            text-decoration: none;
+            color: white;
+        }
+
+        .nav-links:hover {
+            background-color: #36454F;
+        }
+
+        .nav-logo-container {
+            display: flex;
+            width: 20vw;
+            height: 100%;
+            z-index: 5;
+        }
+
+        .nav-logo {
+            height: 100%;
+            width: 100%;
+            border-radius: 45% 15% 15% 45%;
+            border: #1f1f1f 5px solid;
+            box-shadow: rgba(0, 0, 0, 0.4) 0 1svh 1svh;
+            transition: 0.3s ease-in-out 1ms;
+        }
+
+        .nav-logo:hover {
+            filter: grayscale(0.7);
+        }
+
+        .li-middle {
+            border-style: solid;
+            border-width: 2px;
+            border-image: linear-gradient(to bottom, transparent 10%, #36454F, transparent 90%) 0 50;
+        }
+
+        .li-last {
+            border-style: solid;
+            border-width: 2px;
+            border-image: linear-gradient(to bottom, transparent 10%, #36454F, transparent 90%) 0 0 0 50;
+        }
+
+        .li-first {
+            border-style: solid;
+            border-width: 2px;
+            border-image: linear-gradient(to bottom, transparent 10%, #36454F, transparent 90%) 0 50 0 0;
+        }
+    }
+
+    main {
+        background-color: #1f1f1f;
+        border-radius: 20px;
+        overflow: hidden;
+        box-shadow: rgba(0, 0, 0, 0.4) 0 1svh 2svh;
+        padding: 3vw;
+        margin-inline: 5vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        min-height: 80svh;
+        height: max-content;
+        /*overflow-y: scroll;*/
+
+    }
+    .center-flex-columns {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    footer {
+        display: flex;
+        font-size: 0.5em;
+        justify-content: space-evenly;
+        margin-inline: 5%;
+        padding-top: 2%;
+        border-width: 5px;
+        border-style: solid;
+        border-image: linear-gradient(to left, transparent 5%, #36454F, transparent 95%) 50 0 0 0;
+
+
+        .footer-div {
+            width: 30%;
+        }
+
+        .centerFooter {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        .rightFooter {
+            text-align: right;
+        }
+
+        .icon {
+            border-radius: 50%;
+            width: 4vw;
+            height: auto;
+            aspect-ratio: 1;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*PHONES - LANDSCAPE*/
+/* TODO -> UNIMPLEMENTED LANDSCAPE STYLE FOR PHONES*/
+@media only screen
+and (min-device-width: 640px)
+and (max-device-width: 1000px) {
+
+
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/userProfile2.css b/src/main/resources/static/css/userProfile.css
similarity index 51%
rename from src/main/resources/static/css/userProfile2.css
rename to src/main/resources/static/css/userProfile.css
index 0c5c0e9c4aef739bda2f4d38039fa4735a3e30bb..a3de978ecbcd7a392f061500c37e26fe96ac3820 100644
--- a/src/main/resources/static/css/userProfile2.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -2,29 +2,13 @@
 @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
 
-
-
-
-
 /* DEFAULT CSS MADE FOR SCREEN SIZES WIDTHS
     BETWEEN 320px and 640px:*/
 
-body {
-    background: linear-gradient(to bottom right,
-    var(--primary-darker),
-    var(--primary-dark),
-    var(--primary-darker));
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-
-    position: fixed;
-    width: 100vw;
-    height: 100svh;
+main {
+    row-gap: 1svh;
+    padding: 4vw;
 }
-
 .grayedSticker {
     filter: grayscale(1);
 }
@@ -32,58 +16,27 @@ body {
     filter: drop-shadow(0 0 10px yellow);
 }
 
-
-html {
-    position: fixed;
-    width: 100vw;
-    height: 100svh;
-}
-main {
-    width: 90%;
-    height: 95%;
-    background: linear-gradient(to bottom left, #1f1f1f, #1e1e1e, #1f1f1f);
-    overflow-x: hidden;
-    overflow-y: scroll;
-    margin-inline: auto;
-
-    display: flex;
-    flex-direction: column;
-    align-content: flex-start;
-    align-items: center;
-    border-radius: 5vw;
-}
 .userContainer {
-    width: 90%;
-    padding-block: 2em;
-    margin-block: 1em;
-    border-radius: 5vw;
+    width: 90vw;
     display: flex;
-    flex-direction: row-reverse;
-    /*align-items: center;*/
-    justify-content: space-evenly;
-
+    justify-content: flex-start;
+    padding-inline: 2vw;
+    column-gap: 3vw;
     row-gap: 1svh;
-
     & h1 {
-        font-size: 5em;
-        text-align: center;
-        text-shadow: black 0 0.2em 0.5em;
+        font-size: 3em;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        text-shadow: rgba(0,0,0,0.3) 0 1svh 1svh;
         letter-spacing: 0.1em;
-        width: 40vw;
+        width: 400px;
         max-height: 40vw;
-        /*border-bottom: black solid 3px;*/
-        padding-inline: 5%;
-        padding-block: 2%;
-        border-radius: 35%;
-        /*box-shadow: var(--accent-shadow);*/
-        /*background: var(--accent-border);*/
-        align-self: center;
         text-wrap: normal;
     }
     & #userPicture {
         border-radius: 100%;
-        box-shadow: var(--accent-shadow);
-        overflow: hidden;
+        box-shadow: rgba(0,0,0,0.3) 0 1svh 1svh;
     }
 
 }
@@ -94,109 +47,158 @@ main {
     display: flex;
     flex-direction: column;
     overflow: visible;
-    width: 100%;
+    width: 90vw;
 }
 #packsBar {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
     text-align: center;
     width: 100%;
     & h2 {
-        font-size: 4em;
+        font-size: 2em;
         letter-spacing: 0.1em;
-        border-bottom: 10px solid darkred;
+        border-width: 0 0 10px 0 ;
+        border-style: solid;
+        border-image: linear-gradient(to left, transparent 20%, darkred 50%, transparent 80%)
+                        50;
         margin-inline: 5%;
     }
 
 }
+
+#packRewardsWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 90vw;
+    row-gap: 2svh;
+}
+.pack-title {
+    display: flex;
+    justify-content: center;
+    font-family: MedievalSharp, serif;
+    padding-block: 0.5svh;
+    letter-spacing: 0.1svw;
+    font-size: 3em;
+    border-width: 10px 0 10px 0 ;
+    border-style: solid;
+    border-image: linear-gradient(to left, transparent 10%, darkred 50%, transparent 90%)
+    50;
+}
+.packs-area {
+    position: relative;
+    display: grid;
+    grid-template-columns: 20vw auto;
+    grid-template-rows: 20% auto;
+    grid-template-areas:
+            "current pack-title"
+            "current other-packs";
+    margin-inline: 2vw;
+    align-items: end;
+}
+.other-packs {
+    width: 60vw;
+}
+.progImgContainer {
+    grid-area: current;
+    position: relative;
+    padding-top: 1.5svh;
+    z-index: 1;
+}
+.pack-text {
+    grid-area: pack-title;
+    font-size: 0.8em;
+}
+.progImg {
+    height: 10svh;
+    border-radius: 20%;
+}
+.progImgFill {
+    position: absolute;
+    overflow: hidden;
+    width: 50%;
+}
+.progImgOutline {
+    opacity: 0.1;
+    filter: grayscale(1);
+}
+.progText {
+    font-family: Consolas, serif;
+    opacity: 0.4;
+    -webkit-text-stroke: 1px black;
+    position: absolute;
+    text-align: center;
+    width: 16svh;
+    left:50%;
+    top:50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.5em;
+}
+
 #allPacksContainer {
-    padding-top: 3em;
+    grid-area: other-packs;
+    height: 100%;
+    width: 100%;
     display: flex;
     overflow-x: scroll;
-    padding-inline: 20%;
-    justify-content: space-between;
-    border-bottom: 10px solid rgba(139, 0, 0, 0.5);
-    margin-bottom: 2em;
-    & .packName {
-        font-size: 2em;
-        height: 2.4em;
-        overflow: hidden;
-        padding-bottom: 1em;
-        display: flex;
-        justify-content: center;
-        align-content: flex-start;
-
-    }
-    & .packImg {
-        transition: 0.5s ease-in-out 1ms;
-        border-radius: 20%;
-    }
+    justify-content: flex-start;
+    column-gap: 3vw;
+    padding-inline: 5vw;
+    z-index: 5;
 }
-.packImg:hover {
-    transform: scale(1.5, 1.5)
+.packContainer {
+    flex: 0 0;
+    border-radius: 20px;
+    /*border: darkred solid 3px;*/
+    width: 250px;
+    height: 100%;
+    display: grid;
+    grid-template-rows: 80% auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+.packImg {
+    transition: 0.5s ease-in-out 1ms;
+    border-radius: 20%;
+    height: 100px;
+    padding-inline: 10px;
+    aspect-ratio: 1;
 }
-.progressionContainer {
+.packName {
+    font-size: 0.5em;
+    font-weight: lighter;
+    height: 2.4em;
+    overflow: hidden;
+    padding-bottom: 1em;
     display: flex;
-    flex-direction: column;
-    height: 18svh;
-    & h1 {
-        font-size: 4em;
-        width: 100%;
-        font-family: 'MedievalSharp', cursive;
-        text-align: center;
-        overflow-x: scroll;
-        overflow-y: hidden;
-    }
-    & .progImgContainer {
-        position: relative;
-        margin-inline: auto;
-        & .progImg {
-            height: 14svh;
-            /*width: 16svh;*/
-            border-radius: 20%;
-        }
-        & .progImgFill {
-            position: absolute;
-            overflow: hidden;
-            width: 50%;
-        }
-        & .progImgOutline {
-            opacity: 0.1;
-            filter: grayscale(1);
-        }
-        & .progText {
-            font-family: Consolas, serif;
-            opacity: 0.5;
-            -webkit-text-stroke: 1px black;
-            position: absolute;
-            text-align: center;
-            width: 16svh;
-            left:50%;
-            transform: translate(-50%, 150%);
-            font-size: 3em;
-        }
-
-    }
+    justify-content: center;
+    align-content: flex-start;
 
 }
-
+.packImg:hover {
+    transform: scale(1.5, 1.5)
+}
 #stickersBox {
     width: 100%;
+    height: 40svh;
+    overflow: hidden;
+    overflow-y: scroll;
+    padding-block: 1svh;
+    margin-top:0.5svh;
 }
 .stickersContainer {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    margin-top: 2em;
-    row-gap: 2em;
+    align-items: center;
+    align-content: flex-start;
+    row-gap: 1svh;
     height: 100%;
 
 }
 .stickerImg {
-    height: 17em;
-    margin: 1.5em;
+    height: 250px;
+    margin-inline: 2vw;
+
 }
 /* LOGIN FORM PAGE */
 
@@ -210,15 +212,9 @@ main {
 and (min-device-width: 320px)
 and (max-device-width: 640px) {
     #userPicture {
-        width: 30vw;
-        height: 30vw;
-        border: solid #989898 0.8em;
-    }
-    .packImg {
-        height: 10svh;
-        width: 15em;
-        padding-inline: 1em;
-        margin-inline: 1em;
+        width: 300px;
+        aspect-ratio: 1;
+        border: solid #989898 10px;
     }
     #allPacksContainer::-webkit-scrollbar {
         display: none;
diff --git a/src/main/resources/static/images/trails/trail1.jpg b/src/main/resources/static/images/trails/trail101.jpg
similarity index 100%
rename from src/main/resources/static/images/trails/trail1.jpg
rename to src/main/resources/static/images/trails/trail101.jpg
diff --git a/src/main/resources/static/images/trails/trail102.jpg b/src/main/resources/static/images/trails/trail102.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aa2867f7e26d7cf94e64571bf284a7ecba12f950
Binary files /dev/null and b/src/main/resources/static/images/trails/trail102.jpg differ
diff --git a/src/main/resources/static/images/trails/trail103.jpg b/src/main/resources/static/images/trails/trail103.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..922c12d013b5382b39e6c78831c3bfd314d2223e
Binary files /dev/null and b/src/main/resources/static/images/trails/trail103.jpg differ
diff --git a/src/main/resources/static/images/trails/trail2.jpg b/src/main/resources/static/images/trails/trail2.jpg
deleted file mode 100644
index 683d275abb6772456d55082eb4940d0e606bf5f6..0000000000000000000000000000000000000000
Binary files a/src/main/resources/static/images/trails/trail2.jpg and /dev/null differ
diff --git a/src/main/resources/static/images/trails/trail201.jpg b/src/main/resources/static/images/trails/trail201.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17a27691160693ecb16bf33bee1170b3630ef0ed
Binary files /dev/null and b/src/main/resources/static/images/trails/trail201.jpg differ
diff --git a/src/main/resources/static/images/trails/trail3.jpg b/src/main/resources/static/images/trails/trail3.jpg
deleted file mode 100644
index f02b15249a3f0e2158023b8a98c8bf67fcc272c8..0000000000000000000000000000000000000000
Binary files a/src/main/resources/static/images/trails/trail3.jpg and /dev/null differ
diff --git a/src/main/resources/static/images/trails/trail301.jpg b/src/main/resources/static/images/trails/trail301.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..916164409153d3ea470491cc48df88be768e4f4e
Binary files /dev/null and b/src/main/resources/static/images/trails/trail301.jpg differ
diff --git a/src/main/resources/static/images/trails/trail4.jpg b/src/main/resources/static/images/trails/trail4.jpg
deleted file mode 100644
index c8c405e4f332a4f9b495c98ecbac7988b2b27cda..0000000000000000000000000000000000000000
Binary files a/src/main/resources/static/images/trails/trail4.jpg and /dev/null differ
diff --git a/src/main/resources/static/images/trails/trailNotFound.jpg b/src/main/resources/static/images/trails/trailNotFound.jpg
index 9fd46288f31cf61cbce2d58244e69b908cf727c1..8b2411d1083639471dc6501d8a921d6ea4dbcd5c 100644
Binary files a/src/main/resources/static/images/trails/trailNotFound.jpg and b/src/main/resources/static/images/trails/trailNotFound.jpg differ
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 0fefa92c95a928454c100894149bf18340015baf..092a1969f929e268deada3fa0918df277f7f2434 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -2,37 +2,36 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>All Trails</title>
-    <link rel="stylesheet" th:href="@{css/allTrails.css}">
-    <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+    <link rel="stylesheet" th:href="@{/css/colours.css.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+    <link rel="stylesheet" th:href="@{/css/allTrails.css}">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
 
-<header th:replace="~{/fragments/Templating.html :: header}"></header>
-<div>TEST</div>
+<header th:replace="~{/fragments/banners :: header}"></header>
+
 <main>
     <section id="allTrailsBar" class="centerFlex">
-        <img class="trailsImages"
-             th:each="trail : ${trails}"
-             th:src="@{${trail.getImgPath()}}"
-             th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
-             th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
-        >
-    </section>
+        <a th:each="trail : ${trails}" th:href="'/trails/' + ${trail.getTrailLink()}" class="trailWrapper">
+            <h1 th:text="${trail.getTrailName()}"></h1>
+            <img class="trailsImages"
+                th:src="${trail.getImagePath()}"
+                th:onclick="'updateOutputTrail('+ ${trail.getTrailsId()} +');'"
+                th:id="'img' + ${trail.getTrailsId()}" th:alt="${trail.getTrailName()}"
+        ></a>
 
-    <section id="trailInfoContainer" class="trailInfoFrag">
-        <!--All this section is loaded from thymeleaf, based on what tail is selected
-            in the #allTrailsBar -->
-        <div class="trailInfoHeader">
-            <h1 class="centerFlex">Please select your trail</h1>
-        </div>
     </section>
-
+<!--    <section id="trailInfoContainer" class="trailInfoFrag">-->
+<!--        &lt;!&ndash;All this section is loaded from thymeleaf, based on what tail is selected-->
+<!--            in the #allTrailsBar &ndash;&gt;-->
+<!--        <div class="trailInfoHeader">-->
+<!--            <h1 class="centerFlex">Please select your trail</h1>-->
+<!--        </div>-->
+<!--    </section>-->
 </main>
-<footer th:insert="~{/fragments/Templating.html :: footer}"></footer>
-
+<footer th:replace="~{/fragments/banners :: footer}"></footer>
 
 <script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
 
diff --git a/src/main/resources/templates/fragments/banners.html b/src/main/resources/templates/fragments/banners.html
new file mode 100644
index 0000000000000000000000000000000000000000..c336ba3b355e15647b108265ad760a7fc45e0c95
--- /dev/null
+++ b/src/main/resources/templates/fragments/banners.html
@@ -0,0 +1,52 @@
+<header th:fragment="header">
+  <a class="nav-logo-container"><img th:src="@{/images/icons/VZTA.png}" alt="Logo" class="nav-logo"></a>
+  <nav class="head-navbar">
+    <ul class="nav-ul">
+      <li class="nav-li li-first">
+        <a href="/mobile-home" class="nav-links">Home</a>
+      </li>
+      <li class="nav-li li-middle" th:if="${#authentication.principal}!=anonymousUser">
+        <a th:href="'/profile/' + ${#authentication.getName()}" class="nav-links">Profile</a>
+      </li>
+      <li class="nav-li li-middle">
+        <a class="nav-links">FAQ</a>
+      </li>
+      <li class="nav-li li-last" th:if="${#authentication.principal}==anonymousUser">
+        <a href="/login" class="nav-links">Log In</a>
+      </li>
+      <li class="nav-li li-last" th:if="${#authentication.principal}!=anonymousUser">
+        <a class="nav-links" href="javascript: document.logoutForm.submit()" role="menuitem">Log Out</a>
+        <form name="logoutForm" th:action="@{/logout}" method="post" th:hidden="true">
+          <input hidden type="submit" value="Sign Out"/>
+        </form>
+      </li>
+    </ul>
+  </nav>
+</header>
+
+<footer th:fragment="footer">
+  <!-- By Rhys Nute -->
+  <div class="footer-div leftFooter">
+    <h3>VZTA</h3>
+    Near Me Now LTD
+    <br>Britania House
+    <br>Caerphilly Business Park
+    <br>Caerphilly
+    <br>CF83 3GG
+  </div>
+  <div class="footer-div centerFooter">
+    <div class="footerText">
+      <h3>Follow Us</h3>
+      <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/icons/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
+      <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="/images/icons/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
+      <a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="/images/icons/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
+      <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="/images/icons/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
+    </div>
+  </div>
+  <div class="footer-div rightFooter">
+    <h3>Connect with us</h3>
+    <p>Be the first to know about updates by joining out Community page</p>
+    (C) VZTA 2022<br>
+    Policy Terms and Conditions
+  </div>
+</footer>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/locationPageFrags.html b/src/main/resources/templates/fragments/locationPageFrags.html
index ba7813ecf7e24927302cd49b1ca1523d959cae17..4bcdc2ba498ff8c754a00b0e02447f5fe33d6c30 100644
--- a/src/main/resources/templates/fragments/locationPageFrags.html
+++ b/src/main/resources/templates/fragments/locationPageFrags.html
@@ -6,9 +6,10 @@
 
     <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
     <link rel="stylesheet" th:href="@{/css/locationPageFragsStyle.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
 </head>
 <body >
-<header th:insert="~{/fragments/Templating.html::header}"></header>
+<header th:replace="~{/fragments/banners::header}"></header>
     <main>
 
         <hr style="height:40px; visibility:hidden;" />
@@ -35,6 +36,6 @@
         <hr style="height:40px; visibility:hidden;" />
     </main>
 
-<footer th:insert="~{/fragments/Templating.html::footer}"></footer>
+<footer th:replace="~{/fragments/banners::footer}"></footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/trailsPageFrags.html b/src/main/resources/templates/fragments/trailsPageFrags.html
index 457f3cba062a92fac546d09b1b1694f82dcbb789..9a62be17086ae209a7b3c372e8edacc0992713ed 100644
--- a/src/main/resources/templates/fragments/trailsPageFrags.html
+++ b/src/main/resources/templates/fragments/trailsPageFrags.html
@@ -1,16 +1,19 @@
+<!-- @thymesVar id="location" type="Team5.SmartTowns.data.Location" -->
 <!DOCTYPE html>
 <html lang="en" th:fragment="trailsSection" class="trailsPageFrag">
 <head>
     <meta charset="UTF-8">
     <title th:text="${trail.getTrailName()}"></title>
 
-    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+
     <link rel="stylesheet" th:href="@{/css/trailsPageFragsStyle.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
 
 
 </head>
 <body >
-<header th:insert="~{/fragments/Templating.html::header}"></header>
+<header th:replace="~{/fragments/banners::header}"></header>
 <main>
 
     <hr style="height:40px; visibility:hidden;" />
@@ -26,9 +29,10 @@
                     scrolling="yes"
                     marginheight="0"
                     marginwidth="0"
-                    src="https://www.google.com/maps/dir/51.57623,-3.21910/51.575372,-3.219186/51.576363,-3.220712//@11z">
+
+                    src="https://maps.google.com/maps?q=51.57623,-3.21910&output=svembed">
             </iframe>
-            <div><a href="https://www.google.com/maps/dir/51.57623,-3.21910/51.575372,-3.219186/51.576363,-3.220712//@11z">Trail Map</a></div>
+            <div><a href="https://www.google.com/maps/dir/51.57623,-3.21910/51.575372,-3.219186/51.576363,-3.220712//@11z&output=svembed">Trail Map</a></div>
 
         </div>
 
@@ -40,7 +44,8 @@
                     scrolling="yes"
                     marginheight="0"
                     marginwidth="0"
-                    th:src="'https://www.google.com/maps/dir/51.57239,-3.21992/51.57230,-3.21938//@&hl=en&z=20&amp;output=embed'">
+
+                    src="https://maps.google.com/maps?q=51.57239,-3.21992&output=svembed">
             </iframe>
             <div><a href="https://www.google.com/maps/dir/51.57239,-3.21992/51.57230,-3.21938//@11z">Trail Map</a></div>
 
@@ -53,7 +58,8 @@
                     scrolling="yes"
                     marginheight="0"
                     marginwidth="0"
-                    th:src="'https://www.google.com/maps/dir/51.57168,-3.21861/51.57465,-3.22022//@11z'">
+
+                    th:src="'https://maps.google.com/maps?q=51.57168,-3.21861&output=svembed'">
             </iframe>
             <div>
             <a href="https://www.google.com/maps/dir/51.57168,-3.21861/51.57465,-3.22022//@11z">Trail Map</a></div>
@@ -67,7 +73,7 @@
                     scrolling="yes"
                     marginheight="0"
                     marginwidth="0"
-                    th:src="'https://www.google.com/maps/dir/51.61117,-3.10198/51.61655,-3.12371 //@11z'">
+                    th:src="'https://maps.google.com/maps?q=51.61117,-3.10198&output=svembed'">
             </iframe>
             <div><a href="https://www.google.com/maps/dir/51.61117,-3.10198/51.61655,-3.12371 //@11z">Trail Map</a></div>
         </div>
@@ -79,7 +85,8 @@
                     scrolling="yes"
                     marginheight="0"
                     marginwidth="0"
-                    th:src="'https://www.google.com/maps/dir/51.43484,-3.16492/51.43547,-3.16789//@11z'">
+
+                    th:src="'https://maps.google.com/maps?q=51.43484,-3.164928&output=svembed'">
             </iframe>
             <div>
             <a href="https://www.google.com/maps/dir/51.43484,-3.16492/51.43547,-3.16789//@11z">Trail Map</a>
@@ -87,32 +94,31 @@
         </div>
         <H3>Checkpoints:</H3>
 <!-- With the trial name, we go through locations list to get -->
-        <div th:each="locationCoord, indexValue:${locCoords}"  >
-            <div th:if="${locations[indexValue.index].getLocationTrailID()==trail.getTrailsId()}">
+        <div th:each="location:${locations}" >
+            <div>
                 <li id="checkpointList">
-                    <div><a th:href="'/checkpoints/'+${locations[indexValue.index].getLocationName().replace(' ', '-')}" th:text="${locations[indexValue.index].getLocationName()}"></a></div>
+                    <div><a th:href="'/checkpoints/'+${location.getLocationName().replace(' ', '-')}" th:text="${location.getLocationName()}"></a></div>
                     <ul></ul>
                 </li>
-
-
-
-
             </div>
+        </div>
+    </article>
 
-
-
-
-
-
+    <article>
+        <h1> Stickers </h1>
+        <br>
+        <div class="stickersContainer">
+            <img th:class="'stickerImg gotSticker'"  th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getDisplayImg()}}"
+                 th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
         </div>
         <hr style="height:15px; visibility:hidden;" />
         <H2 id="return">
-            <a href="/home">Home</a></H2>
+            <a href="/mobile-home">Home</a></H2>
         <hr style="height:5px; visibility:hidden;" />
     </article>
     <hr style="height:40px; visibility:hidden;" />
 </main>
 
-<footer th:insert="~{/fragments/Templating.html::footer}"></footer>
+<footer th:replace="~{/fragments/banners::footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/landmarks/LandmarkFormTh.html b/src/main/resources/templates/landmarks/LandmarkFormTh.html
index 646632ce015eb3e16d14e7da06c604cc2ae10c5b..3547d0fba7ec009120f975bc0d4c49185af7b066 100644
--- a/src/main/resources/templates/landmarks/LandmarkFormTh.html
+++ b/src/main/resources/templates/landmarks/LandmarkFormTh.html
@@ -4,31 +4,31 @@
     <meta charset="UTF-8">
     <title>Landmark Sign Up</title>
     <link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}">
-    <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+    <link rel="stylesheet" th:href="@{css/mobile-style.css}">
     <script src="scripts/landmarkFormThScript.js"></script>
 
 
 </head>
 <body>
-<header th:insert="~{/fragments/Templating.html :: header}"></header>
-<hr style="height:20px; visibility:hidden;" />
-<H2 id="landmarkFormTitle"> Interested in joining our trails? Sign up Here! </H2>
+<header th:insert="~{/fragments/banners :: header}"></header>
+
+
 <main>
 <!--    Form used to submit potential landmarks for trails-->
-    <form action="/landmarkSub" id="landmarkSubmission" name="landmarkSubmission" method="post" th:object="${landmarkData}" onsubmit="return landmarkFormValidation()">
 
-        <br>
+    <form action="/landmarkSub" id="landmarkSubmission" name="landmarkSubmission" method="post" th:object="${landmarkData}" onsubmit="return landmarkFormValidation()">
+        <h1 id="landmarkFormTitle"> Interested in joining our trails? Sign up Here! </h1>
         <label>Business Name:
            <input type="text" th:field="*{landmarkName}" placeholder="Business name here...">
-        </label><br>
+        </label>
         <div th:errors="*{landmarkName}" th:if="${#fields.hasErrors('landmarkName')}">ErrorLandmarkName</div>
-        <br><label>Contact Address:
+        <label>Contact Address:
             <input type="text" th:field="*{landmarkEmail}" placeholder="E-mail here...">
-        </label><br>
+        </label>
         <div th:errors="*{landmarkEmail}" th:if="${#fields.hasErrors('landmarkEmail')}">ErrorEmail</div>
-        <br><label>Please Describe Your Business:<br>
+        <label>Please Describe Your Business:<br>
             <textarea th:field="*{landmarkDescription}" rows="18" cols="70" placeholder="Max 200 words please..."></textarea>
-        </label><br><br>
+        </label>
         <label>Your Location:
             <select th:field="*{landmarkLocation}">
                 <option value="" hidden="true">Select Location</option>
@@ -37,7 +37,7 @@
                 <option value="Risca">Risca</option>
                 <option value="Penarth">Penarth</option>
             </select>
-        </label><br><br>
+        </label>
         <label>Trail:
             <select th:field="*{trailID}">
                 <option value=0 hidden="true">Select Trail</option>
@@ -48,18 +48,14 @@
                 <option value=0201>(Risca) Heritage and Culture Trail</option>
                 <option value=0301>(Penarth) Esplanade Trail</option>
             </select>
-
-        </label><br><br>
-
-
-        <input type="submit">
-        <hr style="height:0px; visibility:hidden;" />
+        </label>
+        <button class="button" type="submit">Submit</button>
     </form>
 
     <hr style="height:40px; visibility:hidden;" />
 </main>
 
 
-<footer th:insert="~{/fragments/Templating.html :: footer}"></footer>
+<footer th:insert="~{/fragments/banners :: footer}"></footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/landmarks/locationPage.html b/src/main/resources/templates/landmarks/locationPage.html
index 7cf62c6f4cb81dd98416bf95f89c973b7714c40f..902a660f6d492edb8ecc890cdc4cf07e00ebccdc 100644
--- a/src/main/resources/templates/landmarks/locationPage.html
+++ b/src/main/resources/templates/landmarks/locationPage.html
@@ -5,11 +5,12 @@
     <title>Checkpoint</title>
 <!--    todo make this a list per trail or per town that when clicked brings to unique location page-->
     <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
 </head>
 <body>
 
 <main>
-    <header th:insert="~{/fragments/Templating.html::header}"></header>
+    <header th:replace="~{/fragments/banners::header}"></header>
     <div th:each="coord, indexValue:${locationCoords}">
         <p th:text="*{coord.getLocationID()}"></p>
 <!--        <p th:text="${locations[indexValue.index]}"></p>-->
@@ -42,6 +43,6 @@
 
 
 </main>
-<footer th:insert="~{/fragments/Templating.html::footer}"></footer>
+<footer th:replace="~{/fragments/banners::footer}"></footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/home/mobile-homepage.html b/src/main/resources/templates/towns/home/mobile-homepage.html
new file mode 100644
index 0000000000000000000000000000000000000000..43da82f7201b96bd66ab76381a4d450bc2a0ddb2
--- /dev/null
+++ b/src/main/resources/templates/towns/home/mobile-homepage.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>VZTA - Smart Towns Trails</title>
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+    <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
+</head>
+<body>
+<header th:replace="~{/fragments/banners::header}"></header>
+
+<main>
+    <div class="title-container">
+        <h1 class="title">Welcome to VZTA Smart Towns!</h1>
+        <a class="submitLand" href="/landmarkSubmission">  <button> Submit Landmark!</button></a>
+        <p class="small-text">Choose your town and start tracking your trails!</p>
+    </div>
+
+    <article class="towns-wrapper">
+        <div th:each="town:${towns}" class="gridContainer2">
+            <h2 class="town-name" th:text="${town.getName()}"></h2>
+            <a th:href="'/allTrails-' + ${town.getName()}" class="img-container">
+                <img class="town-img" th:src="${town.getImageTown()}" th:alt="${town.getName()}">
+            </a>
+            <div class="BannerTrail">
+                <div class="BannerFill" th:style="'width: '+ ${town.getTrailProgress()} + '%;'" th:classappend="${town.setTrailProgressClass()}" ></div>
+                <div class="trail-info">
+                    <h4 class="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}"></h4>
+                    <h4 class="trailProgress" th:text="${town.getTrailProgress()}+'%'"></h4>
+                </div>
+            </div>
+        </div>
+    </article>
+
+
+    <div class="gridContainer3">
+
+
+        <div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
+            the trails and towns and resultant awards written in an excitable manner!!</div>
+
+    </div>
+
+</main>
+<footer th:replace="~{/fragments/banners::footer}"></footer>
+
+</body>
+</html>
diff --git a/src/main/resources/templates/users/login.html b/src/main/resources/templates/users/login.html
index 82f791b9acfff17bada66a547b3f2e3e7d79d29b..6119dcce66cb09b8a4dd9ef7a2e3da77bfa80278 100644
--- a/src/main/resources/templates/users/login.html
+++ b/src/main/resources/templates/users/login.html
@@ -3,28 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <title>User Log In</title>
-    <link rel="stylesheet" th:href="@{/css/style.css}">
+    <link rel="stylesheet" th:href="@{/css/colours.css.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
     <link rel="stylesheet" th:href="@{/css/login.css}">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 </head>
 <body>
 
-<header>
-    <form name="logoutForm" th:action="@{/logout}" method="post" th:hidden="false">
-        <input hidden type="submit" value="Sign Out"/>
-        <button type="submit">CLICK ME OT LOG OUT</button>
-    </form>
-</header>
+<header th:replace="~{/fragments/banners::header}"></header>
 
 <main>
     <!--CODE MODIFIED FROM: https://github.com/AsmrProg-YT/Modern-Login -->
-    <div class="container sign-in">
+
         <div class="container" th:classappend="${status}" id="container">
             <div class="form-container sign-up">
-                <form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="return registerFormValidation()">
-                    <h1>Create Account</h1>
+                <h1 class="form-title">Create Account</h1>
+                <form th:object="${user}" action="#" th:action="@{/register}" th:method="POST" onsubmit="return registerFormValidation()">
                     <div th:if="${error.equals('User exists')}" class="alert alert-error">User already exist</div>
+                    <div th:text="${errors}" class="alert alert-error"></div>
                     <label>
                         <input class="input" th:field="*{name}" id="register-username" type="text" placeholder="Name">
                     </label>
@@ -38,16 +35,18 @@
                 </form>
             </div>
             <div class="form-container sign-in">
+                <h1 class="form-title">Sign In</h1>
                 <form  name="f" th:action="@{/login}" th:method="POST">
-                    <h1>Sign In</h1>
                     <div th:if="${param.error}" class="alert alert-error">Invalid Username or Password</div>
+                    <div th:if="${param.logout}" class="alert alert-success">Successfully Logged out</div>
+                    <div th:if="${param.register}" class="alert alert-success">Account Created Successfully</div>
                     <label>
                         <input class="input" id="username" type="text" name="username" placeholder="Email">
                     </label>
                     <label>
                         <input class="input" id="password" type="password" name="password" placeholder="Password">
                     </label>
-                    <a href="#" class="text">Forget Your Password?</a>
+                    <a href="#" class="recovery-text">Forget Your Password?</a>
                     <button type="submit">Sign In</button>
                 </form>
             </div>
@@ -59,18 +58,17 @@
                         <button class="hidden" id="login">Sign In</button>
                     </div>
                     <div class="toggle-panel toggle-right">
-                        <div th:if="${param.logout}" class="alert alert-success">Successfully Logged out</div>
-                        <h1 th:if="!${param.logout}">Hello, Welcome!</h1>
-                        <p th:if="!${param.logout}">Register with your personal details and start earning stickers!</p>
+                        <h1>Hello, Welcome!</h1>
+                        <p>Register with your personal details and start earning stickers!</p>
                         <button class="hidden" id="register">Sign Up</button>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-</main>
 
+</main>
 
+<footer th:replace="~{/fragments/banners::footer}"></footer>
 
 <script type="text/javascript" th:src="@{scripts/login.js}"></script>
 
diff --git a/src/main/resources/templates/users/userFrags.html b/src/main/resources/templates/users/userFrags.html
index 5b5e8201f805bdcbed9234da8c39d6a4b79e94f7..33fb7b7b988c915af79e63fb2daeeb7822fa10db 100644
--- a/src/main/resources/templates/users/userFrags.html
+++ b/src/main/resources/templates/users/userFrags.html
@@ -2,10 +2,9 @@
 <!-- @thymesVar id="user" type="Team5.SmartTowns.users.User" -->
 <!-- @thymesVar id="selectedPack" type="Team5.SmartTowns.rewards.Pack" -->
 <div th:fragment="stickersBox" id="packRewardsWrapper">
-  <article class="progressionContainer">
-    <h1 th:text="${selectedPack.getName()}"></h1>
+  <div class="packs-area">
     <div class="progImgContainer">
-      <div class="progImgFill" th:style="'width:'+ ${progress} + '%;'">
+      <div class="progImgFill gotSticker" th:style="'width:'+ ${progress} + '%;'">
         <img th:src="@{'../' + ${selectedPack.getDisplayImg()}}"
              alt="Filled Dragon" id="FilledDragon" class="progImg">
       </div>
@@ -17,7 +16,18 @@
              alt="Outline Dragon" id="OutlineDragon" class="progImg">
       </div>
     </div>
-  </article>
+      <h2 class="pack-text">Other Packs</h2>
+      <div id="allPacksContainer"  class="centerFlex">
+        <div th:each="pack : ${packs}"  class="packContainer">
+          <img class="packImg"   th:src="@{'../' + ${pack.getDisplayImg()}}"
+               th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
+               th:data-url="@{/packInfo/{username}/{packID}(username=${user.getName()}, packID=${pack.getId()})}"
+               onclick="updatePack(this.getAttribute('data-url'))">
+          <h4 class="packName" th:text="${pack.getName()}"></h4>
+        </div>
+      </div>
+  </div>
+  <h1 class="pack-title" th:text="${selectedPack.getName()}"></h1>
 
   <article id="stickersBox">
     <div class="stickersContainer">
diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html
index edbe13918a53d466e7194ba42ff9dcf86bebdc56..a7f4787de673240f2cf600d0845f256eb30db18b 100644
--- a/src/main/resources/templates/users/userProfile.html
+++ b/src/main/resources/templates/users/userProfile.html
@@ -3,60 +3,32 @@
 <head>
     <meta charset="UTF-8">
     <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
-    <link rel="stylesheet" th:href="@{/css/style.css}">
-    <link rel="stylesheet" th:href="@{/css/userProfile2.css}">
+    <link rel="stylesheet" th:href="@{/css/colours.css.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <!--    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
 </head>
-<body>
-
-<!--<header>-->
-<!--    <ul class="footerBar">-->
-<!--        <li class="footerButton"><b>Home</b></li>-->
-<!--        <li class="footerButton"><b>About</b></li>-->
-<!--        <li class="footerButton"><b>Map</b></li>-->
-<!--        <li class="footerButton"><b>Facilities</b></li>-->
-<!--        <li class="footerButton"><b>Log In</b></li>-->
-<!--    </ul>-->
-<!--</header>-->
-
-<main>
-    <!--PICTURE - DATA - BADGES -->
-    <div class="userContainer">
-        <h1 th:text="${user.getName()}"></h1>
-        <img th:src="@{${user.getImgPath()}}"
-             th:alt="${user.getName()}"
-             id="userPicture"
-        >
-
-        <!--TODO add some progression info here?-->
-    </div>
-    <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
-        <article id="packsBar">
-            <h2>Packs</h2>
-             <!--Shows first earned badges, followed by greyed out badges-->
-            <div id="allPacksContainer"  class="centerFlex">
-                <div th:each="pack : ${packs}"  class="packContainer">
-                    <img class="packImg"   th:src="@{'../' + ${pack.getDisplayImg()}}"
-                         th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
-                         th:data-url="@{/packInfo/{username}/{packID}(username=${user.getName()}, packID=${pack.getId()})}"
-                         onclick="updatePack(this.getAttribute('data-url'))">
-                    <h4 class="packName" th:text="${pack.getName()}"></h4>
-                </div>
-            </div>
-        </article>
-        <article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article>
-    </section>
-
 
-</main>
-
-<footer>
-
-</footer>
-<script type="text/javascript" th:src="@{../scripts/userPage.js}"></script>
-
-<script>
-</script>
+<body>
+    <header th:replace="~{/fragments/banners::header}"></header>
+
+    <main>
+        <!--PICTURE - DATA - BADGES -->
+        <div class="userContainer">
+            <img th:src="@{${user.getImgPath()}}"
+                 th:alt="${user.getName()}"
+                 id="userPicture"
+            >
+            <h1 th:text="${user.getName()}"></h1>
+        </div>
+        <section class="rewards">
+            <article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article>
+        </section>
+    </main>
+
+    <footer th:replace="~{/fragments/banners::footer}"></footer>
+
+    <script type="text/javascript" th:src="@{../scripts/userPage.js}"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/welcome-page.html b/src/main/resources/templates/welcome-page.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed84a8bb9a708c8d6ed940d42dcdfa338ded18b0
--- /dev/null
+++ b/src/main/resources/templates/welcome-page.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" th:href="@{/css/colours.css}">
+    <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+</head>
+
+<body>
+    <header th:replace="~{/fragments/banners :: header}"></header>
+
+    <main>
+        <h1>Welcome to Smart Towns by VZTA!</h1>
+        <p>Click here to start exploring!</p>
+        <button type="submit">Explore!</button>
+    </main>
+
+    <footer th:replace="~{/fragments/banners :: footer}"></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/test/java/Team5/SmartTownsOld/DatasourceConfig.java b/src/test/java/Team5/SmartTownsOld/DatasourceConfig.java
new file mode 100644
index 0000000000000000000000000000000000000000..568065a262e3a45668c889f8a8ddc6c1048bba01
--- /dev/null
+++ b/src/test/java/Team5/SmartTownsOld/DatasourceConfig.java
@@ -0,0 +1,19 @@
+package Team5.SmartTowns;
+
+import javax.sql.DataSource;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.jdbc.datasource.DriverManagerDataSource;
+
+@Configuration
+public class DataSourceConfig {
+
+    @Bean
+    public DataSource dataSource(){
+            DriverManagerDataSource dataSource = new DriverManagerDataSource();
+            dataSource.setUrl("jdbc:mariadb://localhost:3306/test_towns");
+            dataSource.setUsername("root");
+            dataSource.setPassword("comsc");
+            return dataSource;
+    }
+}
\ No newline at end of file
diff --git a/src/test/java/Team5/SmartTownsOld/users/UserTests.java b/src/test/java/Team5/SmartTownsOld/users/UserTests.java
new file mode 100644
index 0000000000000000000000000000000000000000..50fe6606bce14bec456f720d59ef3f13f3215d2c
--- /dev/null
+++ b/src/test/java/Team5/SmartTownsOld/users/UserTests.java
@@ -0,0 +1,88 @@
+package Team5.SmartTowns.users;
+
+import org.junit.jupiter.api.*;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.jdbc.core.JdbcTemplate;
+
+import javax.sql.DataSource;
+import java.util.Arrays;
+import java.util.List;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+@TestInstance(TestInstance.Lifecycle.PER_CLASS)
+@DisplayName("User Database Operations")
+@SpringBootTest
+class UserTests {
+
+    @Autowired
+    UserRepository userRepository;
+
+    @Autowired
+    JdbcTemplate jdbcTemplate;
+
+    @BeforeEach
+    public void resetUserTable(){
+        /*Deletes table as each test creates the table it needs for its own testing*/
+        jdbcTemplate.update("DELETE FROM users");
+    }
+
+    @Test
+    @DisplayName("Add User to Database")
+    void testAddUser() {
+        String testEmail = "TestEmail";
+        String testPassword = "Password";
+        String testUsername = "TestUsername";
+
+        userRepository.addUser(testUsername, testEmail, testPassword);
+
+        String email = jdbcTemplate.queryForObject("SELECT email FROM users WHERE username=?", String.class, testUsername);
+        String password = jdbcTemplate.queryForObject("SELECT password FROM users WHERE username=?", String.class, testUsername);
+
+        assertEquals(testPassword, password);
+        assertEquals(testEmail, email);
+
+    }
+
+    @Test
+    @DisplayName("Get all from Users")
+    void testGetAllUsers() {
+        jdbcTemplate.update("INSERT INTO users (username, password) VALUE ('TestUser1', 'admin')");
+        jdbcTemplate.update("INSERT INTO users (username, password) VALUE ('TestUser2', 'admin')");
+        jdbcTemplate.update("INSERT INTO users (username, password) VALUE ('TestUser3', 'admin')");
+
+        List<String> queryList = jdbcTemplate.queryForList("SELECT username FROM users", String.class);
+        List<User> users = userRepository.getAllUsers();
+
+        assertEquals(queryList.size(), users.size());
+    }
+
+
+    @Test
+    @DisplayName("Find if user exists")
+    void doesUserExist() {
+        jdbcTemplate.update("INSERT INTO users (username, email, password) VALUE ('UserExists', 'email@test.com', 'test')" );
+        assertTrue( userRepository.doesUserExist("email@test.com") );
+    }
+
+    @Test
+    @DisplayName("Find user by email")
+    void findUserByEmail() {
+        String email = "email@test.com";
+        jdbcTemplate.update("INSERT INTO users (username, email, password) VALUE ('UserExists', ?, 'test')",
+                email);
+        User user = userRepository.findUserByEmail(email);
+        assertEquals(email, user.getEmail());
+    }
+
+    @Test
+    @DisplayName("Find user by name")
+    void findUserByName() {
+        String name = "TestUser";
+        jdbcTemplate.update("INSERT INTO users (username, password) VALUE (?, 'test')",
+                name);
+        User user = userRepository.findUserByName(name);
+        assertEquals(name, user.getName());
+    }
+}
\ No newline at end of file
diff --git a/src/test/resources/application.properties b/src/test/resources/application.properties
index 83f47c5db5a7390e1ab3dadf4882c3ddf1e3b4ea..5abd1133a1282d079e81ddf4d5f0185fb43a5b40 100644
--- a/src/test/resources/application.properties
+++ b/src/test/resources/application.properties
@@ -3,6 +3,5 @@ spring.datasource.username=root
 spring.datasource.password=comsc
 
 spring.sql.init.mode=always
-spring.sql.init.platform=test
-spring.sql.init.schema-locations=classpath:schema-test.sql
-spring.sql.init.data-locations=classpath:test-data.sql
\ No newline at end of file
+spring.sql.init.schema-locations=classpath:schema.sql, classpath:schema-test.sql
+spring.sql.init.data-locations=classpath:data.sql, classpath:test-data.sql
\ No newline at end of file
diff --git a/src/test/resources/data.sql b/src/test/resources/data.sql
index c2259e46e52a7b84e4dabf968a3c315118ff253a..c3fa214d326ed9e2c4218f54c086af97eaa42bd5 100644
--- a/src/test/resources/data.sql
+++ b/src/test/resources/data.sql
@@ -1,3 +1,12 @@
+USE test_towns;
+INSERT INTO users (username, password) VALUE ('Admin', 'admin');
+INSERT INTO users (username, password) VALUE ('Hannah', 'root');
+INSERT INTO users (username, password) VALUE ('Nigel', 'root');
+INSERT INTO users (username, password) VALUE ('Oscar', 'root');
+
+INSERT INTO authorities (username, authority) VALUE ('Admin', 'ADMIN');
+INSERT INTO authorities (username, authority) VALUE ('Hannah', 'USER');
+
 # delete from users;
 # insert into users (email, name) value ('hannah@gmail.com', 'Hannah');
 # insert into users (email, name) value ('nigel@gmail.com', 'Nigel');
diff --git a/src/test/resources/schema.sql b/src/test/resources/schema.sql
index 70cf59c3ea7e21770133191348ff79616c78622a..6bd0ce804c378d73e58c6da53d11412d6c282fd6 100644
--- a/src/test/resources/schema.sql
+++ b/src/test/resources/schema.sql
@@ -1,8 +1,22 @@
-# DROP DATABASE test_towns;
-# CREATE DATABASE test_towns;
-# USE test_towns;
-#
-#
+/* DELETES AND RECREATES DATABASE EVERY TIME THE SYSTEM IS BOOTED*/
+DROP DATABASE IF EXISTS test_towns;
+CREATE DATABASE IF NOT EXISTS test_towns;
+USE test_towns;
+/****************************************************************/
+
+CREATE TABLE IF NOT EXISTS users (
+    username varchar(30) primary key NOT NULL,
+    id bigint auto_increment unique, /*DEPRECATED COLUMN, LEFT IN WHILE SOME OTHER FUNCTIONS STILL USE IT*/
+    email varchar(128),
+    password varchar(30) NOT NULL,
+    enabled boolean default true
+);
+
+CREATE TABLE IF NOT EXISTS authorities (
+    id bigint primary key auto_increment NOT NULL,
+    username varchar(30) NOT NULL ,
+    authority varchar(45) NOT NULL
+);
 # drop table if exists locationCoordinates;
 # drop table if exists locations;
 # drop table if exists trails;