diff --git a/static/scss/navbar.scss b/static/scss/navbar.scss
new file mode 100644
index 0000000..e35e993
--- /dev/null
+++ b/static/scss/navbar.scss
@@ -0,0 +1,33 @@
+#navbar {
+
+    background-color: $primary-colour;
+
+    .nav-link {
+
+        color: rgba(255, 255, 255, 0.55);
+
+        &.active { color: #fff; }
+        &:disabled { color: rgba(255, 255, 255, 0.25); }
+        &:focus, &:hover { color: rgba(255, 255, 255, 0.75); }
+
+    }
+
+    .btn-nav {
+
+        color: #fff;
+        background-color: transparent;
+        border-color: transparent;
+        border-radius: 0.25rem;
+        font-weight: bold;
+        font-size: 14px;
+
+        &:hover, &:active {
+            color: #fff;
+            background-color: #085c8d;
+            border-color: #085c8d;
+        
+        }
+
+    }
+
+}
\ No newline at end of file
diff --git a/templates/includes/navbar.html b/templates/includes/navbar.html
index ffcf454..0939253 100644
--- a/templates/includes/navbar.html
+++ b/templates/includes/navbar.html
@@ -1,52 +1,41 @@
 {% load static %}
 
-<nav id="navbar" class="navbar navbar-expand-lg navbar-dark" style="background-color: #04385c;">
-    <div class="container-fluid">
-        <a href="#" class="navbar-brand mx-auto ms-sm-4 me-sm-5 user-select-none">
-            <img src="{% static 'img/logo-icon-alt.webp' %}" class="me-1" height="45px" alt="Brand Logo">
-            <img src="{% static 'img/logo-text-alt.webp' %}" height="40px" alt="Brand Logo">
-        </a>
-        <button class="navbar-toggler mx-auto my-3 my-sm-0 me-sm-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+<nav id="navbar" class="navbar navbar-expand-lg">
+    <div class="container-fluid py-lg-2">
+        <div class="ms-4 me-lg-2 me-4" data-bs-theme="dark">
+            <a href="/" class="navbar-brand">
+                <img src="{% static 'img/logo-icon-alt.webp' %}" height="45px" alt="Angling Trust Logo">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
         <div id="navbarCollapse" class="collapse navbar-collapse mx-4 mx-lg-0 mt-3 mt-lg-0">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0 fw-bold small">
                 <li class="nav-item">
-                    <a href="#" class="nav-link pe-3">Dashboard</a>
+                    <a href="/" class="nav-link pe-3 {% if request.resolver_match.url_name == 'index' %}active{% endif %}">Dashboard</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link pe-3 active">Venues &amp; Waters</a>
+                    <a href="/venues" class="nav-link pe-3 {% if request.resolver_match.url_name == 'venues-waters' %}active{% endif %}">Venues &amp; Waters</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link pe-3">Other Page</a>
+                    <a href="/leagues" class="nav-link pe-3 {% if request.resolver_match.url_name == 'leagues' %}active{% endif %}">Leagues</a>
                 </li>
             </ul>
             <hr class="d-lg-none">
             <ul class="navbar-nav mb-2 mb-lg-0 me-0 me-lg-4 flex-row flex-wrap">
                 <li class="nav-item mb-2 mb-lg-0">
-                    <button id="themeSwitcher" class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
+                    <button id="themeSwitcher" class="btn btn-nav px-lg-3 me-2">
                         <i class="bi"></i>
                         <span class="d-lg-none ms-2">Theme</span>
                     </button>
                 </li>
-                <li class="nav-item mb-2 mb-lg-0 dropdown position-relative">
-                    <button class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
-                        <i class="bi bi-bell"></i>
-                        <span class="d-lg-none ms-2">Notifications</span>
+                <li class="nav-item mb-2 mb-lg-0 dropdown">
+                    <button class="btn btn-nav dropdown-toggle" data-bs-toggle="dropdown">
+                        <i class="bi bi-person-fill"></i>
+                        <span class="d-lg-none ms-2">placeholder</span>
                     </button>
-                    <ul class="dropdown-menu dropdown-menu-end position-absolute me-3 p-3" style="min-width: 15rem;">
-                        <li class="text-center text-body-secondary small">
-                            There are no notifications right now
-                        </li>
-                    </ul>
-                </li>
-                <li class="nav-item mb-2 mb-lg-0 ms-auto ms-lg-0 dropdown position-relative">
-                    <button class="btn btn-outline-light rounded-pill border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
-                        <i class="bi bi-person me-2"></i>
-                        <span class="d-lg-none me-2">Administrator</span>
-                        <i class="bi bi-chevron-down"></i>
-                    </button>
-                    <ul class="dropdown-menu dropdown-menu-end position-absolute me-3">
+                    <ul class="dropdown-menu dropdown-menu-end">
                         <li>
                             <a href="" class="dropdown-item">
                                 <i class="bi bi-gear me-2"></i>