diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
new file mode 100644
index 0000000000000000000000000000000000000000..f8b4888565caadc7510be75682268d6c18edd6de
--- /dev/null
+++ b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
new file mode 100644
index 0000000000000000000000000000000000000000..d282b3b2429acfde2dec7effcded342bf9fd7122
--- /dev/null
+++ b/.vs/VSWorkspaceState.json
@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\README.md",
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/.vs/client-project-15-main/v16/.suo b/.vs/client-project-15-main/v16/.suo
new file mode 100644
index 0000000000000000000000000000000000000000..381e8b772446dfe9b5fc859d6374674e65bc497d
Binary files /dev/null and b/.vs/client-project-15-main/v16/.suo differ
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..539c57ca73138669bcca56622d33f85059855353
Binary files /dev/null and b/.vs/slnx.sqlite differ
diff --git a/main.py b/main.py
index 14a2dbdc5a4e8d9261d5e674e5423b851e61a71f..ba4680310f17fe96a479bee1a071b0f51a60ee26 100644
--- a/main.py
+++ b/main.py
@@ -15,6 +15,10 @@ def home():
 def about():
 	return render_template("about.html")
 
+@app.route("/Locations", methods = ["GET"])
+def Locations():
+	return render_template("Locations.html")
+
 @app.route("/contact-us", methods = ["GET"])
 def contact():
 	return render_template("contact-us.html")
diff --git a/static/Location.css b/static/Location.css
new file mode 100644
index 0000000000000000000000000000000000000000..18b4e405b2e85583eceeca8b23308f1a109bad12
--- /dev/null
+++ b/static/Location.css
@@ -0,0 +1,35 @@
+.container {
+  overflow: hidden;
+}
+
+.filterDiv {
+  float: left;
+  background-color: #2196F3;
+  color: #ffffff;
+  width: 100px;
+  line-height: 100px;
+  text-align: center;
+  margin: 2px;
+  display: none; /* Hidden by default */
+}
+
+.show {
+  display: block;
+}
+
+.btn {
+  border: none;
+  outline: none;
+  padding: 12px 16px;
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #ddd;
+}
+
+.btn.active {
+  background-color: #666;
+  color: white;
+}
diff --git a/static/scripts/Location.js b/static/scripts/Location.js
new file mode 100644
index 0000000000000000000000000000000000000000..d940a352c80682aa995584899ccb2a9da1792535
--- /dev/null
+++ b/static/scripts/Location.js
@@ -0,0 +1,47 @@
+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("filterDiv");
+  if (c == "all") c = "";
+  // Add the Show class
+  for (i = 0; i < x.length; i++) {
+    RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
+  }
+}
+
+// Showing filtered elements
+function AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Removing elements that are not selected
+function RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to current control button
+var btnContainer = document.getElementById("myBtnContainer");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}
diff --git a/templates/Locations.html b/templates/Locations.html
new file mode 100644
index 0000000000000000000000000000000000000000..97c6bfb15fbeff2c8617a88af9c73f9344a58e21
--- /dev/null
+++ b/templates/Locations.html
@@ -0,0 +1,26 @@
+{% extends "main.html" %}
+{% block title %}Locations{% endblock %}
+{% block mainBlock %}
+<div id="myBtnContainer">
+  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
+  <button class="btn" onclick="filterSelection('Wales')"> Wales</button>
+  <button class="btn" onclick="filterSelection('North-England')"> North England</button>
+  <button class="btn" onclick="filterSelection('South-West-England')"> South West England</button>
+  <button class="btn" onclick="filterSelection('Midlands')"> Midlands</button>
+  <button class="btn" onclick="filterSelection('Scotland')"> Scotland<button>
+</div>
+
+<div class="container">
+  <div class="filterDiv Wales">Location 1</div>
+  <div class="filterDiv Wales">Location 2</div>
+  <div class="filterDiv North-England">Location 3</div>
+  <div class="filterDiv North-England">Location 4</div>
+  <div class="filterDiv South-West-England">Location 5</div>
+  <div class="filterDiv South-West-England">Location 6</div>
+  <div class="filterDiv South-West-England">Location 7</div>
+  <div class="filterDiv Midlands">Location 8</div>
+  <div class="filterDiv Midlands">Location 9</div>
+  <div class="filterDiv Scotland">Location 10</div>
+  <div class="filterDiv Scotland">Location 11</div>
+  <div class="filterDiv Scotland">Location 12</div>
+</div>
diff --git a/templates/main.html b/templates/main.html
index 3c531ed4995ce964ffdadc0357886426be05aac3..d390e91694ef8da99a6929ddf61117fb50c6e727 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -24,6 +24,7 @@
   <li><a href="/">Home</a></li>
   <li><a href="/map">Map</a></li>
   <li><a href="/contact-us">Contact Us</a></li>
+	<li><a href="/Locations">Locations</a></li>
   <li style="float:right"><a class="active" href="/about">About</a></li>
 </ul>
 	</nav>