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..7b8c2f9546ebde6f8369ab7281a2531dcff63c52
--- /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/about.html b/templates/about.html
index 5dfe09ecd0ee7dfba5d8dd7204a8f59bac22806e..dda99e92d4cdad6a471be4eb085252431985411b 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -1,6 +1,6 @@
 {% extends "main.html" %}
-{% block title %}Map{% endblock %}
+{% block title %}About{% endblock %}
 {% block mainBlock %}
-<header> About Us </header>
+<header> About 1</header>
 <p>text about us.</p>
 {% endblock %}
diff --git a/templates/contact-us.html b/templates/contact-us.html
index 76c03cb68c13e596062d704d8eff42a42dfee30e..cbc51eaa2f82de05937eb893a37d6f8bc0915560 100644
--- a/templates/contact-us.html
+++ b/templates/contact-us.html
@@ -1,6 +1,6 @@
 {% extends "main.html" %}
 {% block title %}Map{% endblock %}
 {% block mainBlock %}
-<header> Contact Us </header>
-<p>text about contact info.</p>
+<header> Contact <header> 
+  <p> tact info.</p>
 {% endblock %}