diff --git a/about.html b/about.html
index c5fdd77f06b289dca4f1d978a9a7b620b160278d..76dffb841a4bfc543165fb84e15da65d1639d27d 100644
--- a/about.html
+++ b/about.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
-    <script src="scripts.js" async></script>
+    <script src="scripts/nav.js" async></script>
     <title>Create Against Hate</title>
 </head>
 
diff --git a/assets/img/placeholder-sketches/PXL_20221214_170210512.jpg b/assets/img/placeholder-sketches/PXL_20221214_170210512.jpg
deleted file mode 100644
index d1505efa9283784596c22fcd889a8d8d9f8ce538..0000000000000000000000000000000000000000
Binary files a/assets/img/placeholder-sketches/PXL_20221214_170210512.jpg and /dev/null differ
diff --git a/assets/img/placeholder-sketches/PXL_20221214_170223254.jpg b/assets/img/placeholder-sketches/PXL_20221214_170223254.jpg
deleted file mode 100644
index 352fc9e25aaa5b1724581d45f665820d5226ed54..0000000000000000000000000000000000000000
Binary files a/assets/img/placeholder-sketches/PXL_20221214_170223254.jpg and /dev/null differ
diff --git a/index.html b/index.html
index dc177c0e45446cc95652d3c475bace0114570ca4..cea14e7542448ca2c4a386d092562f9ba25c4740 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
-    <script src="scripts.js" async></script>
+    <script src="scripts/nav.js" async></script>
     <title>Create Against Hate</title>
 </head>
 
 <body id="home">
     <header id="main-navigation">
-        <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+        <!-- Navigation Bar, index.html && about.html && rules.html && location.html -->
         <nav aria-label="Create Against Hate Main Navigation">
             <ul role="menubar" class="navbar">
                 <li role="none">
@@ -46,7 +46,7 @@
         </button>
     </header>
     <main>
-        <!-- Hero -- index.html && about.html -->
+        <!-- Hero, index.html && about.html -->
         <section id="home__hero" class="hero">
             <article>
                 <img src="assets/main-logo/logo-dark.min.svg" alt="Create Against Hate Main Logo">
@@ -146,7 +146,7 @@
         </section>
     </main>
     <footer>
-        <!-- Footer -- index.html && about.html && rules.html && location.html -->
+        <!-- Footer, index.html && about.html && rules.html && location.html -->
         <!-- Copyright -->
         <p><i>Create Against Hate</i> &copy; Robin King 2022</p>
         <!-- Sitemap -->
diff --git a/location.html b/location.html
index 22b1aaf928cffd2203b93a09c87a82325bb6bdf1..323ac414f4f2dac10ce7f847c7af4a05e21f0d71 100644
--- a/location.html
+++ b/location.html
@@ -5,14 +5,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
-    <script src="scripts.js" async></script>
+    <script src="scripts/nav.js" async></script>
+    <script src="scripts/tablist.js" async></script>
     <title>Create Against Hate</title>
 </head>
 
 <body id="location">
     <header id="main-navigation">
         <img src="assets/main-logo/logo-long-dark.min.svg" alt="Create Against Hate Logo">
-        <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+        <!-- Navigation Bar, index.html && about.html && rules.html && location.html -->
         <nav aria-label="Create Against Hate Main Navigation">
             <ul role="menubar" class="navbar">
                 <li role="none">
@@ -48,11 +49,33 @@
     </header>
     <main>
         <!-- Map -->
-        <!-- Directions -- uses class="text-section" -- about.html && rules.html && location.html -->
-            <!-- Tabs -->
+        <iframe id="googleMap" title="Google Maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.5721314652883!2d-2.6008121233674015!3d51.447651215066415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48718dd658d5706f%3A0x767f1d6261554e46!2sM%20Shed!5e0!3m2!1sen!2suk!4v1682085581070!5m2!1sen!2suk" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        <!-- Directions, uses class="text-section", about.html && rules.html && location.html -->
+        <section class="text-section">
+            <article id="location__transport">
+            <h1>Directions</h1>
+                <div>
+                    <ul role="tablist" aria-orientation="vertical">
+                        <li><button role="tab" aria-selected="true"><span class="icon--walking"></span>Walking</button></li>
+                        <li><button role="tab"><span class="icon--biking"></span>Biking</button></li>
+                        <li><button role="tab"><span class="icon--boat"></span>Boat</button></li>
+                        <li><button role="tab"><span class="icon--bus"></span>Bus</button></li>
+                        <li><button role="tab"><span class="icon--car"></span>Car</button></li>
+                        <li><button role="tab"><span class="icon--coach"></span>Coach</button></li>
+                        <li><button role="tab"><span class="icon--train"></span>Train</button></li>
+                    </ul>
+                    <div id="location__transport--content">
+                        <p>The M Shed is located on the harbourside, a five to 10 minute walk from the city centre or a 20 minute walk from Bristol Temple Meads train station.</p>
+                    </div>
+                </div>
+            </article>
+        </section>
+        <section>
+            <p>Too far to travel? Not a problem! Why not join us on Zoom instead? <a class="btn--primary" href="index.html#home__sign-up"> Sign Up Now!</a></p>
+        </section>
     </main>
     <footer>
-        <!-- Footer -- index.html && about.html && rules.html && location.html -->
+        <!-- Footer, index.html && about.html && rules.html && location.html -->
         <!-- Copyright -->
         <p><i>Create Against Hate</i> &copy; Robin King 2022</p>
         <!-- Sitemap -->
diff --git a/rules.html b/rules.html
index 85e55c7842bd81214a8d14e3b6cb0da5d785f383..d24c7938add7aef03857359a0bf8e145eb1024fb 100644
--- a/rules.html
+++ b/rules.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
-    <script src="scripts.js" async></script>
+    <script src="scripts/nav.js" async></script>
+    <script src="scripts/slides.js" async></script>
     <title>Create Against Hate</title>
 </head>
 
diff --git a/scripts.js b/scripts/nav.js
similarity index 68%
rename from scripts.js
rename to scripts/nav.js
index b8c5374f24572294d21241fbd9719fc42c6b01b5..8a556ea6069ff6dc89b88d0301b6f1f9b1e4e6eb 100644
--- a/scripts.js
+++ b/scripts/nav.js
@@ -70,49 +70,4 @@ document.addEventListener('scroll', () => {
     if (window.innerWidth > 601) {
         desktopNavControls();
     }
-});
-
-/********************************
- * [Code to control slideshow.] *
-*********************************/
-
-const slides = Array.from(document.querySelectorAll(".slide"));
-const carousel = document.querySelector(".carousel");
-const lControl = document.querySelector(".carousel-button__left");
-const rControl = document.querySelector(".carousel-button__right");
-
-// Ensures first slide is visible on page load
-slides[0].scrollIntoView();
-
-/**
- * [Scroll slide to specific index.]
-**/
-
-function scrollSlide(slideNumber) {
-    slides[slideNumber].scrollIntoView({
-        behavior: 'smooth'
-    });
-}
-
-/**
- * [Reset scroll if window resized.]
-**/
-
-window.addEventListener('resize', () => {
-    scrollSlide(0);
-})
-
-let currSlide = 0;
-
-// Move slides to the left
-lControl.addEventListener('click', () => {
-    currSlide > 0 ? currSlide-- : currSlide = slides.length - 1;
-    scrollSlide(currSlide);
-});
-
-
-// Move slides to the right
-rControl.addEventListener('click', () => {
-    currSlide < slides.length - 1 ? currSlide++ : currSlide = 0;
-    scrollSlide(currSlide);
 });
\ No newline at end of file
diff --git a/scripts/slides.js b/scripts/slides.js
new file mode 100644
index 0000000000000000000000000000000000000000..e5749866196a34ac71a449172b894e847d4d277c
--- /dev/null
+++ b/scripts/slides.js
@@ -0,0 +1,44 @@
+/********************************
+ * [Code to control slideshow.] *
+*********************************/
+
+const slides = Array.from(document.querySelectorAll(".slide"));
+const carousel = document.querySelector(".carousel");
+const lControl = document.querySelector(".carousel-button__left");
+const rControl = document.querySelector(".carousel-button__right");
+
+// Ensures first slide is visible on page load
+slides[0].scrollIntoView();
+
+/**
+ * [Scroll slide to specific index.]
+**/
+
+function scrollSlide(slideNumber) {
+    slides[slideNumber].scrollIntoView({
+        behavior: 'smooth'
+    });
+}
+
+/**
+ * [Reset scroll if window resized.]
+**/
+
+window.addEventListener('resize', () => {
+    scrollSlide(0);
+})
+
+let currSlide = 0;
+
+// Move slides to the left
+lControl.addEventListener('click', () => {
+    currSlide > 0 ? currSlide-- : currSlide = slides.length - 1;
+    scrollSlide(currSlide);
+});
+
+
+// Move slides to the right
+rControl.addEventListener('click', () => {
+    currSlide < slides.length - 1 ? currSlide++ : currSlide = 0;
+    scrollSlide(currSlide);
+});
\ No newline at end of file
diff --git a/scripts/tablist.js b/scripts/tablist.js
new file mode 100644
index 0000000000000000000000000000000000000000..8425724374daf949ac73a85ab4d6ab98d281676d
--- /dev/null
+++ b/scripts/tablist.js
@@ -0,0 +1,44 @@
+/*****************************************
+ * [Code to control directions tablist.] *
+******************************************/
+
+const tabs = Array.from(document.querySelectorAll('#location__transport [role="tab"]'));
+const directionsContent = document.querySelector('#location__transport--content')
+const directions = [
+    `<p>The M Shed is located on the harbourside, a five to 10 minute walk from the city centre or a 20 minute walk from Bristol Temple Meads train station.</p>`,
+    
+    `<p>There is a dedicated cycle track to the south/back of M Shed. There is no cyclist access on the dockside at the front of the museum. There are several bicycle stands on Museum Street, outside the south/back entrance of the building. There's a tyre pump at the end of M Shed on Wapping Road.</p>`,
+    
+    `<p>You can catch a ferry from Bristol Temple Meads and Hotwells to Prince Street Bridge on the Floating Harbour, which is a five minute walk away.</p>
+    
+    <p>Boats run every 40-50 minutes – visit the <a href="www.bristolferry.com" target="_blank" rel="noopener">Bristol Ferry Boats website</a> for timetables and fares.</p>`,
+    
+    `<p>You can catch any bus with a city centre drop off – you’ll be dropped off at Broad Quay which is about a five minute walk away.</p>
+    
+    <p>For timetables please visit the <a href="https://travelwest.info/" target="_blank" rel="noopener">TravelWest website</a>.</p>`,
+
+    `<p>The M Shed is located on the harbourside in the city centre on Wapping Road (BS1 4RN) around two miles from the M32 motorway.</p>
+
+    <p>There are two car parks nearby at The Grove (BS1 4RB) and Wapping Wharf (BS1 4RH). You can find more car parks on the <a href="https://travelwest.info/drive/bristol-car-parking-map" target="_blank" rel="noopener">Travel West website</a>.</p>`,
+
+    `<p>The M Shed is located on the harbourside in the city centre on Wapping Road (BS1 4RN) around two miles from the M32.</p>
+    
+    <p>For details on coach pick up/set down points and parking, visit the <a href="https://travelwest.info/bus/bristol-coach-parking/" target="_blank" rel="noopener">TravelWest website</a> or <a href="https://visitbristol.co.uk/your-visit/travelling-around-bristol/coach-parking" target="_blank" rel="noopener">Visit Bristol coach parking</a>.</p>`,
+
+    `<p>It's about a 20 minute walk from Bristol Temple Meads train station to M Shed.</p>
+
+    <p>A number of buses leave from Bristol Temple Meads to the city centre, around a five minute walk away.</p>
+    
+    <p>For timetables please visit the <a href="https://travelwest.info/" target="_blank" rel="noopener">TravelWest website</a>.</p>`
+]
+
+for (let i = 0; i < tabs.length; i++) {
+    tabs[i].addEventListener('click', () => {
+        tabs.forEach(tab => {
+            tab.setAttribute('aria-selected', 'false');
+        })
+        tabs[i].setAttribute('aria-selected', 'true');
+
+        directionsContent.innerHTML = directions[i];
+    })
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 92e5e2053dda4376d922506ac7015134f612de08..0b3eec01eb2307152756adf9b6223c5325139ea0 100644
--- a/styles.css
+++ b/styles.css
@@ -22,63 +22,31 @@
 
     :root {
         /** This is the primary background colour for the website **/
-            /* USAGE: index.html:hero && rules.html:rules && All borders */
-                --main-dark: #03080c;
+            --main-dark: #03080c;
 
         /** These are colours used for the main sections of the website **/
-            /* USAGE: index.html:about && location.html:directions */
-                --section-blue: #194263;
-
-            /* USAGE: index.html:sign-up-form && location.html:map */
-                --section-pink: #fb5aba;
-
-            /* USAGE: rules.html:rules */ 
-                --section-baby-pink: #fd98d4;
-
-            /* USAGE: about.html:hero */
-                --section-purple: #6e539a;
-
-            /* USAGE: about.html:about */
-                --section-purple-saturated: #6f277b;
-
-        /** The colour of checked items in the sign up form **/
-            /* USAGE: index.html:sign-up-form > online-in-person && index.html:sign-up-form > interests */
-                --form-filled: #2c74ae;
+            --section-blue: #194263;
+            --section-pink: #fb5aba;
+            --section-baby-pink: #fd98d4;
+            --section-purple: #6e539a;
+            --section-purple-saturated: #6f277b;
+            --form-filled: #2c74ae;
 
         /** Pink accent colours used across website **/
-            /* USAGE: index.html:hero > sign up button && rules.html:rules > sign up button */
-                --accent-pink: #c30576;
-
-            /* USAGE: index.html:hero > sign up button:active && rules.html:rules > sign up button:active */
-                --accent-pink-lighter: #fa2aa6;
-            
-            /* USAGE: index.html:about > hyperlinks && locations.html:directions > hyperlinks */
-                --accent-baby-pink: #fd98d4;
+            --accent-pink: #c30576;
+            --accent-pink-lighter: #fa2aa6;
+            --accent-baby-pink: #fd98d4;
 
         /** Blue accent colours used across website **/
-            /* USAGE: 
-                    index.html:hero > text
-                    && index.html:sign-up-form > sign up button 
-                    && about.html:hero > hyperlinks 
-                    && about.html:about > hyperlinks 
-                    && rules.html:rules > hyperlinks 
-                    && location.html:directions > selected tab + sign up button
-            */
-                --accent-blue: #00eded;
-
-            /* USAGE: index.html:sign-up-form > sign up button:active && location.html:directions > sign up button:active */
-                --accent-blue-lighter: #54ffff;
-            
-            /* USAGE: All pages:visited hyperlinks */
-                --accent-baby-blue: #c1ffff;
+            --accent-blue: #00eded;
+            --accent-blue-lighter: #54ffff;
+            --accent-baby-blue: #c1ffff;
 
         /** Purple accent colour used on homepage **/
-            /* USAGE: index.html:hero > text */
-                --accent-purple: #b144c4;
+            --accent-purple: #b144c4;
 
         /** Purple background colour for footer **/
-            /* USAGE: All pages:footer && All pages:main navigation on mobile */
-                --footer-purple: #1f172c;
+            --footer-purple: #1f172c;
     }
 
     * {
@@ -230,6 +198,42 @@
             mask: url("assets/icons/fbook-logo.svg");
         }
 
+    /** Directions **/
+        .icon--walking {
+            -webkit-mask: url("assets/icons/person-walking-solid.svg");
+            mask: url("assets/icons/person-walking-solid.svg");
+        }
+
+        .icon--biking {
+            -webkit-mask: url("assets/icons/bicycle-solid.svg");
+            mask: url("assets/icons/bicycle-solid.svg");
+        }
+
+        .icon--boat {
+            -webkit-mask: url("assets/icons/sailboat-solid.svg");
+            mask: url("assets/icons/sailboat-solid.svg");
+        }
+
+        .icon--bus {
+            -webkit-mask: url("assets/icons/bus-solid.svg");
+            mask: url("assets/icons/bus-solid.svg");
+        }
+
+        .icon--car {
+            -webkit-mask: url("assets/icons/car-solid.svg");
+            mask: url("assets/icons/car-solid.svg");
+        }
+
+        .icon--coach {
+            -webkit-mask: url("assets/icons/bus-simple-solid.svg");
+            mask: url("assets/icons/bus-simple-solid.svg");
+        }
+
+        .icon--train {
+            -webkit-mask: url("assets/icons/train-subway-solid.svg");
+            mask: url("assets/icons/train-subway-solid.svg");
+        }
+
     /** Links **/
         /* Add open in new tab icon for target blank links */
             a[target="_blank"]::after {
@@ -370,41 +374,54 @@
 
 /*** Reusable Styles ***/
     /** Hero **/
-        /* USAGE: index.html && about.html */
-            .hero {
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                grid-gap: 2rem;
-            }
+    /* USAGE: index.html && about.html */
+        .hero {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 2rem;
+        }
 
-            .hero article {
-                display: grid;
-                grid-auto-rows: auto;
-            }
+        .hero article {
+            display: grid;
+            grid-auto-rows: auto;
+        }
 
-            .hero > img, .hero figure img {
-                height: 100%;
-            }
+        .hero > img, .hero figure img {
+            height: 100%;
+        }
 
-            .hero figure {
-                position: relative;
-            }
+        .hero figure {
+            position: relative;
+        }
 
-            .hero figcaption {
-                position: absolute;
-                bottom: 0;
+        .hero figcaption {
+            position: absolute;
+            bottom: 0;
 
-                width: 100%;
-                padding: .5rem;
+            width: 100%;
+            padding: .5rem;
 
-                background-color: hsla(0, 0%, 0%, .85);
-            }
+            background-color: hsla(0, 0%, 0%, .85);
+        }
 
-    /*** Text-Section ***/
+    /** Text-Section **/
         .text-section {
             padding-inline: 4rem;
         }
 
+/*** Page Backgrounds ***/
+    #home, #rules {
+        background-color: var(--main-dark);
+    }
+
+    #about {
+        background-color: var(--section-purple);
+    }
+
+    #location {
+        background-color: var(--section-pink);
+    }
+
 /*** Main Navigation Styles ***/
 
     #main-navigation {
@@ -416,19 +433,20 @@
         justify-content: flex-end;
         align-items: center;
 
-        background-color: var(--main-dark);
+        background-color: inherit;
 
         transition: all .3s;
     }
 
-    #main-navigation img {
-        width: calc(100%/3);
-        min-width: calc(64em/6);
+    /** Event Logo **/
+        #main-navigation img {
+            width: calc(100%/3);
+            min-width: calc(64em/6);
 
-        border: none;
+            border: none;
 
-        margin-right: auto;
-    }
+            margin-right: auto;
+        }
 
     #main-navigation .navbar {
         display: flex;
@@ -453,18 +471,18 @@
     }
 
     /** Colour navbar for different pages **/
-        #about #main-navigation {
-            background-color: var(--section-purple);
-        }
-
         #about #main-navigation .navbar a:hover,
-        #about #main-navigation .navbar a[aria-current="page"] {
-            color: var(--accent-blue);
+        #about #main-navigation .navbar a[aria-current="page"],
+        #location #main-navigation .navbar a:hover,
+        #location #main-navigation .navbar a[aria-current="page"] {
+            color: black;
         }
 
         #about #main-navigation .navbar a:hover span[class|="icon"],
-        #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
-            background-color: var(--accent-blue);
+        #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"],
+        #location #main-navigation .navbar a:hover span[class|="icon"],
+        #location #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
+            background-color: black;
         }
 
     /** Toggleable class used to show and hide navbar **/
@@ -773,8 +791,6 @@
 /*** About Page Styling ***/
     /** Hero Section **/
         #about .hero {
-            background-color: var(--section-purple);
-
             color: white;
         }
 
@@ -943,22 +959,110 @@
                 background-color: white;
             }
 
-            /* The blue colour is not very visible on the white background */
-                .slide__text-content a {
-                    color: var(--accent-pink);
-                }
+            .slide__text-content a {
+                color: var(--accent-pink);
+            }
 
-                .slide__text-content a::after {
-                    background-color: var(--accent-pink);
-                }
+            .slide__text-content a::after {
+                background-color: var(--accent-pink);
+            }
 
-                .slide__text-content a:visited {
-                    color: var(--accent-baby-pink);
-                }
+            .slide__text-content a:visited {
+                color: var(--accent-baby-pink);
+            }
 
-                .slide__text-content a:visited::after {
-                    background-color: var(--accent-baby-pink);
-                }
+            .slide__text-content a:visited::after {
+                background-color: var(--accent-baby-pink);
+            }
+
+/*** Find Us Page Styling ***/
+    #googleMap {
+        width: 100%;
+        height: 90vh;
+
+        border: .15rem 0 solid;
+        border-color: var(--main-dark);
+    }
+
+    #location main {
+        position: relative;
+    }
+
+    /** Style the tablist with directions **/
+
+        #location .text-section {
+            /* Overlay the map */
+                position: absolute;
+                top: 30%;
+                left: 2rem;
+
+            padding: 1rem;
+            min-width: 30rem;
+            max-width: 50%;
+
+            border: .15rem solid;
+
+            background-color: var(--section-pink);
+        }
+
+        #location__transport > div {
+            display: flex;
+        }
+
+        #location__transport > div > ul li button {
+            position: relative;
+            z-index: 2;
+            padding: .5rem;
+            width: 6rem;
+
+            border: var(--main-dark) .1rem solid;
+            border-bottom: 0;
+
+            text-align: left;
+        }
+
+        #location__transport > div > ul li:last-of-type button {
+            border-bottom: .1rem solid;
+        }
+
+        #location__transport > div > ul li button span[class|="icon"]{
+            background-color: black;
+        }
+
+        #location__transport > div > ul li button[aria-selected="true"]{
+            border-right-color: white;
+
+            background-color: white;
+        }
+
+        #location__transport--content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            padding: 2rem;
+            margin-left: -.1rem;
+
+            border: var(--main-dark) .1rem solid;
+
+            background-color: white;
+        }
+
+        #location__transport--content a {
+            color: var(--accent-pink);
+        }
+
+        #location__transport--content a::after {
+            background-color: var(--accent-pink);
+        }
+
+        #location__transport--content a:visited {
+            color: var(--accent-baby-pink);
+        }
+
+        #location__transport--content a:visited::after {
+            background-color: var(--accent-baby-pink);
+        }
 
 /* 64em == 1024px */
 @media only screen and (min-width: 64em) {
@@ -971,9 +1075,6 @@
         .text-section {
             padding-inline: calc((100vw - 64rem + 4rem) / 2);
         }
-
-
-    /*  */
 }
 
 /* 37.5625em == 601px */
@@ -984,14 +1085,14 @@
         }
     /*** Reusable Styles -- Tablet ***/
         /** Hero **/
-            /* USAGE: index.html && about.html */
-            .hero {
-                grid-template-columns: 1fr;
-            }
+        /* USAGE: index.html && about.html */
+        .hero {
+            grid-template-columns: 1fr;
+        }
 
-            .hero > img {
-                max-height: 50vh;
-            }
+        .hero > img {
+            max-height: 50vh;
+        }
 
         /** Text Section **/
             .text-section {
@@ -1187,12 +1288,20 @@
 
         /** Reset anchor tag styles in nav because the list background should be coloured instead **/
             #main-navigation .navbar a:hover,
-            #main-navigation .navbar a[aria-current="page"] {
+            #main-navigation .navbar a[aria-current="page"],
+            #about #main-navigation .navbar a:hover,
+            #about #main-navigation .navbar a[aria-current="page"],
+            #location #main-navigation .navbar a:hover,
+            #location #main-navigation .navbar a[aria-current="page"] {
                 color: white;
             }
 
             #main-navigation .navbar a:hover span[class|="icon"],
-            #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
+            #main-navigation .navbar a[aria-current="page"] span[class|="icon"],
+            #about #main-navigation .navbar a:hover span[class|="icon"],
+            #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"],
+            #location #main-navigation .navbar a:hover span[class|="icon"],
+            #location #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
                 background-color: white;
             }