diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..8661180143d4330efc6f86e02d3668c8c1520f24
--- /dev/null
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -0,0 +1,93 @@
+/* Header */
+.headerBar {
+ border-bottom: 2px rgb(230, 230, 230) solid;
+ margin-bottom: 20px;
+ display: flex;
+ background: blueviolet;
+}
+/* Navbar Links */
+.navBar {
+ margin-top: 50px;
+ margin-left: auto;
+ margin-right:20px;
+ text-align: right;
+}
+.work{
+ color: rgb(255, 255, 255);
+}
+.navBar ul {
+ list-style: none;
+ display: flex;
+ margin-left: 100px;
+}
+.navBar a {
+ border-left: 2px rgb(185, 185, 185) solid;
+ padding: 10px 40px;
+ text-decoration: none;
+ color:rgb(87, 86, 86);
+ white-space: nowrap;
+ overflow: hidden;
+ float: right;
+}
+.navBar a:hover {
+ background-color: rgb(209, 209, 209);
+}
+.navBar li{
+ margin-left: 10px;
+ margin-right: 10px;
+ color: rgb(255, 255, 255);
+}
+.navListLast {
+ border-right: 2px rgb(185, 185, 185) solid;
+ margin-right:40px;
+}
+
+/* Navbar Logo */
+.Logo {
+ margin-left:10px;
+ padding: 20px;
+ width: fit-content;
+}
+.Logo img {
+ width: 120px;
+ margin-left:15px;
+}
+
+/* Footer */
+footer {
+ margin-top:20px;
+ display: flex;
+ justify-content: center;
+}
+.footerBar{
+ border-top: 2px rgb(230, 230, 230) solid;
+ text-align: left;
+ display: flex;
+ background: blueviolet;
+ color: rgb(255, 255, 255);
+ padding-left: 30px;
+}
+.footerBar ul {
+ list-style: none;
+ display: flex;
+}
+.copyright{
+ text-align: left;
+ display: flex;
+}
+.containerFooter{
+ display: flex;
+ flex-direction: row;
+}
+.leftFooter{
+ flex:1;
+ color: rgb(255, 255,255);
+}
+.centerFooter{
+ flex: 1;
+ color: rgb(255, 255,255);
+}
+.rightFooter{
+ flex:1;
+ color: rgb(255, 255, 255);
+}
\ No newline at end of file
diff --git a/src/main/resources/static/images/Facebook.png b/src/main/resources/static/images/Facebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..259359777e3e7c2ea4f31e00df81dbf075570f84
Binary files /dev/null and b/src/main/resources/static/images/Facebook.png differ
diff --git a/src/main/resources/static/images/Instagram.jpg b/src/main/resources/static/images/Instagram.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0c7f47366beef8b56464e6214276ab46e2c8ab66
Binary files /dev/null and b/src/main/resources/static/images/Instagram.jpg differ
diff --git a/src/main/resources/static/images/Linkedin.png b/src/main/resources/static/images/Linkedin.png
new file mode 100644
index 0000000000000000000000000000000000000000..d24bc89a650a17bf68c4416211dcdc473c829467
Binary files /dev/null and b/src/main/resources/static/images/Linkedin.png differ
diff --git a/src/main/resources/static/images/Twitter.jpg b/src/main/resources/static/images/Twitter.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5a350e164922562dc8ba6dab403391daf2b9491a
Binary files /dev/null and b/src/main/resources/static/images/Twitter.jpg differ
diff --git a/src/main/resources/static/images/VZTA.png b/src/main/resources/static/images/VZTA.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c294080b020125d34f981e84952450bdbbe9168
Binary files /dev/null and b/src/main/resources/static/images/VZTA.png differ
diff --git a/src/main/resources/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html
new file mode 100644
index 0000000000000000000000000000000000000000..c27b5912286144bc1b6d3a83d255dc45c693a0ee
--- /dev/null
+++ b/src/main/resources/templates/towns/Templating.html
@@ -0,0 +1,55 @@
+<link rel="stylesheet" href="../../static/css/templatingstyle.css">
+<header class="headerBar" th:fragment="header">
+
+<div class="Logo">
+ <img src="../../static/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
+</div>
+<nav class="navBar">
+ <ul>
+ <li>Home</li>
+ <li>FAQs</li>
+ <li>Contact us</li>
+ </ul>
+ <label class="work">Who we Work with:</label>
+ <select>
+ <ul>
+ <option value="localauthorities">Local Authorities</option>
+ <option value="towns">Towns</option>
+ <option value="businesses">Businesses</option>
+ <option value="consumers">Consumers</option>
+ </ul>
+ </select>
+</nav>
+</header>
+
+<div class="footerBar" th:fragment="footer">
+ <div class="containerFooter">
+ <div class="leftFooter">
+ <h3>VZTA</h3>
+ Near Me Now LTD
+ <br>Britania House
+ <br>Caerphilly Business Park
+ <br>Caerphilly
+ <br>CF83 3GG
+ </div>
+ <div class="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>
+ <div class="centerFooter">
+ <span class="footerText">
+ <h3>Follow Us</h3>
+ <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
+ <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/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="../../static/images/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
+ <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="../../static/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
+ </span>
+ </div>
+ <div class="copyright" style="text-align: left">
+
+ </div>
+ </div>
+</div>
+</div>