Merge pull request 'Add campaigns page' (#2 ) from feat/campaigns into main

Reviewed-on: #2
feat: Use git lfs
2025-08-21 15:55:44 +10:00 · 2025-08-21 15:37:20 +10:00 · 2025-08-21 15:34:50 +10:00 · 2025-08-07 17:45:33 +10:00 · 2025-08-07 16:36:11 +10:00 · 2025-08-07 16:25:08 +10:00
49 changed files with 3949 additions and 1013 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
--- a/.gitignore
+++ b/.gitignore
@@ -3,8 +3,5 @@

 __pycache__/

-used.json
+*.json

-payments.json
-
-promo.json
--- a/HNSAU.bsdesign
+++ b/HNSAU.bsdesign
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
-# website
+# Handshake Australia Website
+
+
 HNSAU website files

 To deploy the website, run the following commands:
--- a/payments.py
+++ b/payments.py
@@ -92,6 +92,8 @@ def check_payments():
    with open(path+'payments.json', 'r') as f:
        payments = json.load(f)

+    #! FIX NIAMI API NO LONGER WORKING
+    return False
    # Get all txs
    data = requests.get(f"https://api.niami.io/address/{HNSaddress}")
    if data.status_code != 200:
@@ -121,7 +123,6 @@ def check_payments():
                            json.dump(payments, f, indent=4)
                        print("Payment finalised",flush=True)
                    
-        

 def finalise_payment(payment):
    # Send webhook
--- a/server.py
+++ b/server.py
@@ -20,7 +20,7 @@ exchange = {
    'rate': 0
 }

-
+DEV = os.getenv('DEV', 'false').lower() in ['true', '1', 'yes']
 tlds = ['australia','newzealand']

 #Assets routes
@@ -400,7 +400,7 @@ def index():
    year = datetime.datetime.now().year
    hns_scripts = '<script src="https://gday.hnsau/handshake.js" domain="gday.hnsau" async></script><script src="https://gday.hnsau/https.js" async></script>'

-    if 'localhost' in request.host or '127.0.0.1' in request.host:
+    if 'localhost' in request.host or '127.0.0.1' in request.host or DEV:
        hns_scripts = ''

    tld = request.host.split('.')[-1]
@@ -419,7 +419,7 @@ def catch_all(path):
    year = datetime.datetime.now().year
    hns_scripts = '<script src="https://gday.hnsau/handshake.js" domain="gday.hnsau" async></script><script src="https://gday.hnsau/https.js" async></script>'

-    if 'localhost' in request.host or '127.0.0.1' in request.host:
+    if 'localhost' in request.host or '127.0.0.1' in request.host or DEV:
        hns_scripts = ''

    # If file exists, load it
@@ -435,6 +435,22 @@ def catch_all(path):

    return render_template('404.html'), 404

+
+# Redirects
+@app.route('/contact')
+def contact():
+    return redirect('/#contact')
+
+@app.route('/about')
+def about():
+    return redirect('/#about')
+
+@app.route('/support')
+@app.route('/donate')
+def donate():
+    return redirect('/#support')
+
+
 # 404 catch all
@app.errorhandler(404)
 def not_found(e):
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,27 +8,111 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/404">
    <meta property="og:url" content="https://hns.au/404">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
    <link rel="stylesheet" href="/assets/css/404.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
--- a/templates/about.html
+++ b/templates/about.html
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>About Us | HNSAU</title>
-    <meta name="theme-color" content="#ffffff">
-    <link rel="canonical" href="https://hns.au/about">
-    <meta property="og:url" content="https://hns.au/about">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
-    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
-    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
-    <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
-    <link rel="stylesheet" href="/assets/fonts/simple-line-icons.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
-    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
-<script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
-{{handshake_scripts | safe}}
-</head>
-
-<body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse" id="navcol-1">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <main class="page">
-        <section class="clean-block about-us">
-            <div class="container">
-                <div class="block-heading">
-                    <h2 class="text-info">About Us</h2>
-                    <p style="font-size: 20px;">HNSAU was has established in 2022 to assist and help create awareness of the Handshake protocol in the Australasian region. We feel a localised presence is needed to assist the younger generation in adapting to web3 and help create awareness of decentralised naming. We are open to having anyone join our Directors group and take part in forming Australia’s Internet future.</p>
-                </div>
-                <section class="clean-block about-us">
-                    <div class="container">
-                        <div class="block-heading">
-                            <h2 class="text-info">HNS Directors of Handshake Australia</h2>
-                        </div>
-                        <div class="row justify-content-center">
-                            <div class="col-sm-6 col-lg-4">
-                                <div class="card text-center clean-card"><img class="card-img-top w-100 d-block" src="/assets/img/avatars/nathan.woodburn.jpg">
-                                    <div class="card-body info">
-                                        <h4 class="card-title">Nathan.Woodburn/</h4>
-                                        <p class="card-text">Developer and tech administrator for HNSAU<br><br></p>
-                                        <div class="icons"><a href="https://nathan.woodburn.au" target="_blank"><i class="icon-link"></i></a><a href="https://twitter.com/woodburn_nathan" target="_blank"><i class="icon-social-twitter"></i></a></div><span>Canberra, AU</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-sm-6 col-lg-4">
-                                <div class="card text-center clean-card"><img class="card-img-top w-100 d-block" src="/assets/img/avatars/erwin.groen.jpg" style="background: #ffffff;">
-                                    <div class="card-body info">
-                                        <h4 class="card-title">Erwin.Groen/</h4>
-                                        <p class="card-text">Creating HNS pins and contributing to HNSAU domain acquisitions&nbsp;</p>
-                                        <div class="icons"><a href="https://erwin.groen.au" target="_blank"><i class="icon-link"></i></a><a href="https://twitter.com/erwingroen" target="_blank"><i class="icon-social-twitter"></i></a></div><span>Adelaide, AU</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-sm-6 col-lg-4">
-                                <div class="card text-center clean-card"><img class="card-img-top w-100 d-block" src="/assets/img/avatars/timaxal.jpg">
-                                    <div class="card-body info">
-                                        <h4 class="card-title">tiMaxal/</h4>
-                                        <p class="card-text"><br><br></p>
-                                        <div class="icons"><a href="https://timax.au" target="_blank"><i class="icon-link"></i></a><a href="https://twitter.com/tiMaxal" target="_blank"><i class="icon-social-twitter"></i></a></div><span>Brisbane, AU</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <div class="block-heading">
-                    <h2 class="text-info">Contact Us</h2>
-                    <div class="social-icons" style="font-size: 50px;"><a href="mailto:hns@hns.au" target="_blank" style="padding-right: 10px;padding-left: 10px;"><i class="icon ion-email" style="font-size: 50px;"></i></a><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="padding-right: 10px;padding-left: 10px;"><i class="fab fa-discord" style="font-size: 50px;"></i></a><a target="_blank" style="padding-right: 10px;padding-left: 10px;" href="https://github.com/Handshake-AU"><i class="icon ion-social-github" style="font-size: 50px;"></i></a></div>
-                </div>
-                <div class="text-center block-heading">
-                    <h2 class="text-info">Support Us</h2><span style="font-size: 20px;">You can support us by donating HNS to&nbsp;</span><code style="font-size: 20px;"><br>hs1qjdsz8u2ftm93jmczq8x36zqmfh3pqagq0hkkaf</code><span style="font-size: 20px;"><br>Or by using our alias</span><code style="font-size: 20px;"><br>@donate.hnsau<br><br></code><span style="font-size: 20px;">You can also support us by buying an SLD from&nbsp;<a href="https://domains.hnsau" target="_blank">https://domains.hns.au</a><br>Or by buying a TLD from <a href="/domains">here</a></span>
-                </div>
-            </div>
-        </section>
-    </main>
-    <footer class="page-footer dark">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-3">
-                    <h5>Get started</h5>
-                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
-                    </ul>
-                </div>
-                <div class="col-sm-3">
-                    <h5>Contact</h5>
-                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
-        </div>
-    </footer>
-    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
-    <script src="/assets/js/vanilla-zoom.js"></script>
-    <script src="/assets/js/theme.js"></script>
-</body>
-
-</html>
--- a/templates/assets/bootstrap/css/bootstrap.min.css
+++ b/templates/assets/bootstrap/css/bootstrap.min.css
--- a/templates/assets/bootstrap/js/bootstrap.min.js
+++ b/templates/assets/bootstrap/js/bootstrap.min.js
--- a/templates/assets/css/Hero-Features-icons.css
+++ b/templates/assets/css/Hero-Features-icons.css
@@ -0,0 +1,57 @@
+.bs-icon {
+  --bs-icon-size: .75rem;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--bs-icon-size);
+  width: calc(var(--bs-icon-size) * 2);
+  height: calc(var(--bs-icon-size) * 2);
+  color: var(--bs-primary);
+}
+
+.bs-icon-xs {
+  --bs-icon-size: 1rem;
+  width: calc(var(--bs-icon-size) * 1.5);
+  height: calc(var(--bs-icon-size) * 1.5);
+}
+
+.bs-icon-sm {
+  --bs-icon-size: 1rem;
+}
+
+.bs-icon-md {
+  --bs-icon-size: 1.5rem;
+}
+
+.bs-icon-lg {
+  --bs-icon-size: 2rem;
+}
+
+.bs-icon-xl {
+  --bs-icon-size: 2.5rem;
+}
+
+.bs-icon.bs-icon-primary {
+  color: var(--bs-white);
+  background: var(--bs-primary);
+}
+
+.bs-icon.bs-icon-primary-light {
+  color: var(--bs-primary);
+  background: rgba(var(--bs-primary-rgb), .2);
+}
+
+.bs-icon.bs-icon-semi-white {
+  color: var(--bs-primary);
+  background: rgba(255, 255, 255, .5);
+}
+
+.bs-icon.bs-icon-rounded {
+  border-radius: .5rem;
+}
+
+.bs-icon.bs-icon-circle {
+  border-radius: 50%;
+}
+
--- a/templates/assets/css/bss-overrides.css
+++ b/templates/assets/css/bss-overrides.css
@@ -0,0 +1,43 @@
+:root, [data-bs-theme=light] {
+  --bs-primary: #F55700;
+  --bs-primary-rgb: 245,87,0;
+  --bs-primary-text-emphasis: #622300;
+  --bs-primary-bg-subtle: #FDDDCC;
+  --bs-primary-border-subtle: #FBBC99;
+  --bs-link-color: #F55700;
+  --bs-link-color-rgb: 245,87,0;
+  --bs-link-hover-color: rgba(245,87,0,0.61);
+  --bs-link-hover-color-rgb: 245,87,0,0.61;
+}
+
+.btn-primary {
+  --bs-btn-color: #000000;
+  --bs-btn-bg: #F55700;
+  --bs-btn-border-color: #F55700;
+  --bs-btn-hover-color: #000000;
+  --bs-btn-hover-bg: #F77026;
+  --bs-btn-hover-border-color: #F66819;
+  --bs-btn-focus-shadow-rgb: 37,13,0;
+  --bs-btn-active-color: #000000;
+  --bs-btn-active-bg: #F77933;
+  --bs-btn-active-border-color: #F66819;
+  --bs-btn-disabled-color: #000000;
+  --bs-btn-disabled-bg: #F55700;
+  --bs-btn-disabled-border-color: #F55700;
+}
+
+.btn-outline-primary {
+  --bs-btn-color: #F55700;
+  --bs-btn-border-color: #F55700;
+  --bs-btn-focus-shadow-rgb: 245,87,0;
+  --bs-btn-hover-color: #000000;
+  --bs-btn-hover-bg: #F55700;
+  --bs-btn-hover-border-color: #F55700;
+  --bs-btn-active-color: #000000;
+  --bs-btn-active-bg: #F55700;
+  --bs-btn-active-border-color: #F55700;
+  --bs-btn-disabled-color: #F55700;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #F55700;
+}
+
--- a/templates/assets/css/theme.css
+++ b/templates/assets/css/theme.css
@@ -0,0 +1,42 @@
+[data-bs-theme=auto] .dark-only {
+  display: none;
+}
+
+[data-bs-theme=light] .dark-only {
+  display: none;
+}
+
+/* [data-bs-theme=dark] .dark-only {
+  display: initial;
+}
+
+[data-bs-theme=light] .light-only {
+  display: initial;
+} */
+
+[data-bs-theme=dark] .light-only {
+  display: none;
+}
+
+[data-bs-theme=dark] .page.landing-page {
+  background: rgba(0,0,0,0.79);
+}
+
+[data-bs-theme=dark] .clean-block.clean-hero::before {
+  background: url("/assets/img/backgrounds/blocksaugw.svg") center / contain no-repeat;
+  color: rgba(0,0,0,0);
+  filter: opacity(45%);
+}
+
+.clean-block.clean-hero::before {
+  background: url("/assets/img/backgrounds/blocksaug.svg") center / contain no-repeat;
+  color: rgba(0,0,0,0);
+  filter: opacity(15%);
+}
+
+.floating-switch {
+  position: sticky;
+  right: 2em;
+  bottom: 2em;
+}
+
--- a/templates/assets/img/HandshakeAustraliaT.webp
+++ b/templates/assets/img/HandshakeAustraliaT.webp
--- a/templates/assets/img/avatars/erwin.jpg
+++ b/templates/assets/img/avatars/erwin.jpg
--- a/templates/assets/img/backgrounds/blocks.svg
+++ b/templates/assets/img/backgrounds/blocks.svg
@@ -0,0 +1,206 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="430px"
+   height="404px"
+   viewBox="0 0 430 404"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="blocks.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.8329611"
+     inkscape:cx="230.50087"
+     inkscape:cy="188.14236"
+     inkscape:window-width="2560"
+     inkscape:window-height="1553"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title1">Artboard</title>
+  <desc
+     id="desc1">Created with Sketch.</desc>
+  <defs
+     id="defs1" />
+  <g
+     id="Artboard"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd">
+    <g
+       id="Group-31">
+      <path
+         d="M35.7900051,144.677972 L163.790005,40.6779722"
+         id="Path-4-Copy"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M42.7900051,163.677972 L190,135"
+         id="Path-4-Copy-2"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M129,241 L199,154"
+         id="Path-4-Copy-3"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M141,260 L270,260"
+         id="Path-4-Copy-4"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M132,278 L244,361"
+         id="Path-4-Copy-5"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M220,153 L281,242"
+         id="Path-4-Copy-6"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M230,134 L319,123"
+         id="Path-4-Copy-7"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M326,140 L301,243"
+         id="Path-4-Copy-8"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M200.790005,115.677972 L181.790005,49.6779722"
+         id="Path-4-Copy-9"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M324,106 L189.790005,39.6779722"
+         id="Path-4-Copy-10"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M351,143 L399,266"
+         id="Path-4-Copy-11"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M291,285 L265,360"
+         id="Path-4-Copy-12"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M312,271 L388,285"
+         id="Path-4-Copy-13"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M276,381 L402,300"
+         id="Path-4-Copy-14"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M33.7900051,180.677972 L109.790005,245.677972"
+         id="Path-4-Copy-15"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M8.79000513,179.677972 L37.7900051,323.677972"
+         id="Path-4-Copy-16"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M104.790005,278.677972 L59.7900051,324.677972"
+         id="Path-4-Copy-17"
+         stroke="#999999"
+         stroke-width="2.5"
+         stroke-dasharray="20,5" />
+      <path
+         d="M200.322233,11.5605445 L180.305196,0 L160.280796,11.5605445 L159,12.2998617 L159,13.7657322 L159,36.8676755 L179.030292,48.3585101 L180.305196,49.0914454 L181.57961,48.3585101 L201.60352,36.8676755 L201.60352,13.7657322 L201.60352,12.2998617 L200.322233,11.5605445 Z M180.305196,2.9445049 L197.773405,13.0327969 L180.305196,23.1078343 L162.830115,13.0327969 L180.305196,2.9445049 Z M179.030292,45.4198962 L161.549319,35.3895321 L161.549319,15.2379847 L179.030292,25.3198948 L179.030292,45.4198962 Z M199.054201,35.3895321 L181.57961,45.4198962 L181.57961,25.3198948 L199.054201,15.2379847 L199.054201,35.3895321 Z"
+         id="Shape-Copy-8"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M358.322233,110.560544 L338.305196,99 L318.280796,110.560544 L317,111.299862 L317,112.765732 L317,135.867676 L337.030292,147.35851 L338.305196,148.091445 L339.57961,147.35851 L359.60352,135.867676 L359.60352,112.765732 L359.60352,111.299862 L358.322233,110.560544 Z M338.305196,101.944505 L355.773405,112.032797 L338.305196,122.107834 L320.830115,112.032797 L338.305196,101.944505 Z M337.030292,144.419896 L319.549319,134.389532 L319.549319,114.237985 L337.030292,124.319895 L337.030292,144.419896 Z M357.054201,134.389532 L339.57961,144.419896 L339.57961,124.319895 L357.054201,114.237985 L357.054201,134.389532 Z"
+         id="Shape-Copy-9"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M41.3222333,149.560544 L21.3051964,138 L1.28079581,149.560544 L0,150.299862 L0,151.765732 L0,174.867676 L20.0302916,186.35851 L21.3051964,187.091445 L22.5796103,186.35851 L42.60352,174.867676 L42.60352,151.765732 L42.60352,150.299862 L41.3222333,149.560544 Z M21.3051964,140.944505 L38.7734054,151.032797 L21.3051964,161.107834 L3.83011457,151.032797 L21.3051964,140.944505 Z M20.0302916,183.419896 L2.54931876,173.389532 L2.54931876,153.237985 L20.0302916,163.319895 L20.0302916,183.419896 Z M40.0542012,173.389532 L22.5796103,183.419896 L22.5796103,163.319895 L40.0542012,153.237985 L40.0542012,173.389532 Z"
+         id="Shape-Copy-10"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M227.322233,121.560544 L207.305196,110 L187.280796,121.560544 L186,122.299862 L186,123.765732 L186,146.867676 L206.030292,158.35851 L207.305196,159.091445 L208.57961,158.35851 L228.60352,146.867676 L228.60352,123.765732 L228.60352,122.299862 L227.322233,121.560544 Z M207.305196,112.944505 L224.773405,123.032797 L207.305196,133.107834 L189.830115,123.032797 L207.305196,112.944505 Z M206.030292,155.419896 L188.549319,145.389532 L188.549319,125.237985 L206.030292,135.319895 L206.030292,155.419896 Z M226.054201,145.389532 L208.57961,155.419896 L208.57961,135.319895 L226.054201,125.237985 L226.054201,145.389532 Z"
+         id="Shape-Copy-11"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M310.322233,246.560544 L290.305196,235 L270.280796,246.560544 L269,247.299862 L269,248.765732 L269,271.867676 L289.030292,283.35851 L290.305196,284.091445 L291.57961,283.35851 L311.60352,271.867676 L311.60352,248.765732 L311.60352,247.299862 L310.322233,246.560544 Z M290.305196,237.944505 L307.773405,248.032797 L290.305196,258.107834 L272.830115,248.032797 L290.305196,237.944505 Z M289.030292,280.419896 L271.549319,270.389532 L271.549319,250.237985 L289.030292,260.319895 L289.030292,280.419896 Z M309.054201,270.389532 L291.57961,280.419896 L291.57961,260.319895 L309.054201,250.237985 L309.054201,270.389532 Z"
+         id="Shape-Copy-12"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M428.322233,272.560544 L408.305196,261 L388.280796,272.560544 L387,273.299862 L387,274.765732 L387,297.867676 L407.030292,309.35851 L408.305196,310.091445 L409.57961,309.35851 L429.60352,297.867676 L429.60352,274.765732 L429.60352,273.299862 L428.322233,272.560544 Z M408.305196,263.944505 L425.773405,274.032797 L408.305196,284.107834 L390.830115,274.032797 L408.305196,263.944505 Z M407.030292,306.419896 L389.549319,296.389532 L389.549319,276.237985 L407.030292,286.319895 L407.030292,306.419896 Z M427.054201,296.389532 L409.57961,306.419896 L409.57961,286.319895 L427.054201,276.237985 L427.054201,296.389532 Z"
+         id="Shape-Copy-13"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M67.3222333,328.560544 L47.3051964,317 L27.2807958,328.560544 L26,329.299862 L26,330.765732 L26,353.867676 L46.0302916,365.35851 L47.3051964,366.091445 L48.5796103,365.35851 L68.60352,353.867676 L68.60352,330.765732 L68.60352,329.299862 L67.3222333,328.560544 Z M47.3051964,319.944505 L64.7734054,330.032797 L47.3051964,340.107834 L29.8301146,330.032797 L47.3051964,319.944505 Z M46.0302916,362.419896 L28.5493188,352.389532 L28.5493188,332.237985 L46.0302916,342.319895 L46.0302916,362.419896 Z M66.0542012,352.389532 L48.5796103,362.419896 L48.5796103,342.319895 L66.0542012,332.237985 L66.0542012,352.389532 Z"
+         id="Shape-Copy-14"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M275.322233,365.560544 L255.305196,354 L235.280796,365.560544 L234,366.299862 L234,367.765732 L234,390.867676 L254.030292,402.35851 L255.305196,403.091445 L256.57961,402.35851 L276.60352,390.867676 L276.60352,367.765732 L276.60352,366.299862 L275.322233,365.560544 Z M255.305196,356.944505 L272.773405,367.032797 L255.305196,377.107834 L237.830115,367.032797 L255.305196,356.944505 Z M254.030292,399.419896 L236.549319,389.389532 L236.549319,369.237985 L254.030292,379.319895 L254.030292,399.419896 Z M274.054201,389.389532 L256.57961,399.419896 L256.57961,379.319895 L274.054201,369.237985 L274.054201,389.389532 Z"
+         id="Shape-Copy-15"
+         fill="#000000"
+         fill-rule="nonzero"
+         style="fill:#f55700;fill-opacity:1" />
+      <path
+         d="M138.322233,246.560544 L118.305196,235 L98.2807958,246.560544 L97,247.299862 L97,248.765732 L97,271.867676 L117.030292,283.35851 L118.305196,284.091445 L119.57961,283.35851 L139.60352,271.867676 L139.60352,248.765732 L139.60352,247.299862 L138.322233,246.560544 Z M118.305196,237.944505 L135.773405,248.032797 L118.305196,258.107834 L100.830115,248.032797 L118.305196,237.944505 Z M117.030292,280.419896 L99.5493188,270.389532 L99.5493188,250.237985 L117.030292,260.319895 L117.030292,280.419896 Z M137.054201,270.389532 L119.57961,280.419896 L119.57961,260.319895 L137.054201,250.237985 L137.054201,270.389532 Z"
+         id="Shape-Copy-16"
+         fill="#000000"
+         fill-rule="nonzero"
+         inkscape:label="Shape-Copy-16"
+         style="fill:#f55700;fill-opacity:1" />
+    </g>
+  </g>
+</svg>
--- a/templates/assets/img/backgrounds/blocks_w_au.svg
+++ b/templates/assets/img/backgrounds/blocks_w_au.svg
--- a/templates/assets/img/backgrounds/blocksaug.svg
+++ b/templates/assets/img/backgrounds/blocksaug.svg
--- a/templates/assets/img/backgrounds/blocksaugw.svg
+++ b/templates/assets/img/backgrounds/blocksaugw.svg
--- a/templates/assets/img/backgrounds/landing.svg
+++ b/templates/assets/img/backgrounds/landing.svg
--- a/templates/assets/img/backgrounds/polygraph.svg
+++ b/templates/assets/img/backgrounds/polygraph.svg
--- a/templates/assets/img/backgrounds/polygraph2.svg
+++ b/templates/assets/img/backgrounds/polygraph2.svg
--- a/templates/assets/img/campaign/your-dot.jpg
+++ b/templates/assets/img/campaign/your-dot.jpg
--- a/templates/assets/img/favicon-light.png
+++ b/templates/assets/img/favicon-light.png
--- a/templates/assets/js/theme.js
+++ b/templates/assets/js/theme.js
@@ -9,3 +9,113 @@ if (document.getElementsByClassName('clean-product').length > 0) {
        vanillaZoom.init('#product-preview');
    };
 }
+
+// Global toggle function for the button
+function toggle() {
+  const currentTheme = getStoredTheme() || getPreferredTheme();
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  setStoredTheme(newTheme);
+  setTheme(newTheme);
+  showActiveTheme(newTheme, true);
+}
+
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  // Make these functions globally accessible
+  window.getStoredTheme = () => localStorage.getItem('theme')
+  window.setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  window.getPreferredTheme = () => {
+    const storedTheme = window.getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  window.setTheme = theme => {
+    // Add smooth transitions
+    if (!document.querySelector('#theme-transitions')) {
+      const style = document.createElement('style');
+      style.id = 'theme-transitions';
+      style.textContent = `
+        * {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
+        }
+        *:before, *:after {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  window.showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    
+    // Check if btnToActive exists before accessing its properties
+    if (btnToActive) {
+      const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+        element.setAttribute('aria-pressed', 'false')
+      })
+
+      btnToActive.classList.add('active')
+      btnToActive.setAttribute('aria-pressed', 'true')
+      activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+      const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+      themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+      if (focus) {
+        themeSwitcher.focus()
+      }
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()
--- a/templates/assets/vid/your-dot.mp4
+++ b/templates/assets/vid/your-dot.mp4
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/blog">
    <meta property="og:url" content="https://hns.au/blog">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -53,7 +137,7 @@
        <section class="clean-block clean-blog-list dark">
            <div class="container">
                <div class="block-heading">
-                    <h2 class="text-info">HNSAU Blog Posts</h2>
+                    <h2 class="text-primary">HNSAU Blog Posts</h2>
                    <p>Latest Blog posts from HNSAU</p>
                </div>
                <div class="block-content">
@@ -101,31 +185,34 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="/assets/js/vanilla-zoom.js"></script>
--- a/templates/blog/happening.html
+++ b/templates/blog/happening.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/blog/happening.html">
    <meta property="og:url" content="https://hns.au/blog/happening.html">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
    <meta property="og:description" content="The &quot;Happening&quot; is when over 78,000 domain names will be released to auction. These domains will be released in early Feb 2024">
    <meta name="description" content="The &quot;Happening&quot; is when over 78,000 domain names will be released to auction. These domains will be released in early Feb 2024">
    <meta name="twitter:description" content="The &quot;Happening&quot; is when over 78,000 domain names will be released to auction. These domains will be released in early Feb 2024">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -70,31 +154,34 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="/assets/js/vanilla-zoom.js"></script>
--- a/templates/blog/links.html
+++ b/templates/blog/links.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,8 +8,8 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/blog/links.html">
    <meta property="og:url" content="https://hns.au/blog/links.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:title" content="New Links Page Service - HNSAU">
    <meta name="twitter:image" content="https://hns.au/assets/img/blog/links_dashboard.png">
    <meta property="og:description" content="HNSAU has just released a new links page hosting service. Find out about it and try it out.">
@@ -17,34 +17,118 @@
    <meta name="twitter:description" content="HNSAU has just released a new links page hosting service. Find out about it and try it out.">
    <meta property="og:image" content="https://hns.au/assets/img/blog/links_dashboard.png">
    <meta name="twitter:title" content="New Links Page Service - HNSAU">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -75,31 +159,34 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="/assets/js/vanilla-zoom.js"></script>
--- a/templates/blog/new_domains.html
+++ b/templates/blog/new_domains.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,8 +8,8 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/blog/new_domains.html">
    <meta property="og:url" content="https://hns.au/blog/new_domains.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:image" content="https://hns.au/assets/img/blog/dot_anz.webp">
    <meta property="og:description" content="HNSAU has just added 5 domains to the registry. 
 Register even more Australian SLDs on HNSAU.">
@@ -20,34 +20,118 @@ Register even more Australian SLDs on HNSAU.">
    <meta name="twitter:description" content="HNSAU has just added 5 domains to the registry. 
 Register even more Australian SLDs on HNSAU.">
    <meta name="twitter:image" content="https://hns.au/assets/img/blog/dot_anz.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -80,31 +164,34 @@ Register even more Australian SLDs on HNSAU.">
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="/assets/js/vanilla-zoom.js"></script>
--- a/templates/blog/pins.html
+++ b/templates/blog/pins.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,9 +8,9 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/blog/pins.html">
    <meta property="og:url" content="https://hns.au/blog/pins.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta name="twitter:description" content="We are thrilled to announce that HNS Lapel Pins are now available for purchase directly from HNSAU using HNS! These high-quality pins are designed to showcase the iconic HNS logo, making them the perfect accessory for anyone passionate about the future of the decentralized web.
 ">
@@ -19,34 +19,118 @@
    <meta property="og:title" content="Pins | HNS AU">
    <meta name="twitter:title" content="Pins | HNS AU">
    <meta name="twitter:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -76,31 +160,34 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="/assets/js/vanilla-zoom.js"></script>
--- a/templates/campaigns.html
+++ b/templates/campaigns.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html data-bs-theme="auto" lang="en-au">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Campaigns - HNSAU</title>
+    <meta name="theme-color" content="#ffffff">
+    <link rel="canonical" href="https://hns.au/campaigns">
+    <meta property="og:url" content="https://hns.au/campaigns">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
+    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
+    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
+<script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
+{{handshake_scripts | safe}}
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+            <div class="collapse navbar-collapse" id="navcol-1">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="page blog-post-list">
+        <section class="clean-block clean-blog-list dark">
+            <div class="container">
+                <div class="block-heading">
+                    <h2 class="text-primary">HNSAU Campaigns</h2>
+                </div>
+                <div class="block-content">
+                    <div class="clean-blog-post">
+                        <div class="row">
+                            <div class="col-lg-5"><video width="100%" controls="" poster="/assets/img/campaign/your-dot.jpg">
+                                    <source src="/assets/vid/your-dot.mp4" type="video/mp4">
+                                </video><span>by Shakeroo our Australian Handshake ambassador</span></div>
+                            <div class="col-lg-7">
+                                <h3>Your dot is as unique as our backyard</h3>
+                                <div class="info"><span class="text-muted">Aug 21, 2025</span></div>
+                                <p>Where do you place your dot?</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-3">
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
+                    <ul>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
+                    </ul>
+                </div>
+                <div class="col-sm-3">
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
+                    <ul>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
+        </div>
+    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
+    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
+    <script src="/assets/js/vanilla-zoom.js"></script>
+    <script src="/assets/js/theme.js"></script>
+</body>
+
+</html>
--- a/templates/cart.html
+++ b/templates/cart.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/cart">
    <meta property="og:url" content="https://hns.au/cart">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -53,7 +137,7 @@
        <section class="clean-block clean-cart dark">
            <div class="container">
                <div class="block-heading">
-                    <h2 class="text-info">Shopping Cart</h2>
+                    <h2 class="text-primary">Shopping Cart</h2>
                    <p>Please note that all payments are to be paid in HNS</p>
                </div>
                <div class="content">
@@ -74,29 +158,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Contact | HNSAU</title>
-    <meta name="theme-color" content="#ffffff">
-    <link rel="canonical" href="https://hns.au/contact">
-    <meta property="og:url" content="https://hns.au/contact">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
-    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
-    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
-    <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
-    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
-<script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
-{{handshake_scripts | safe}}
-</head>
-
-<body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse" id="navcol-1">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <main class="page landing-page">
-        <section class="clean-block clean-hero" style="color: rgba(9,162,255,0);background: url(&quot;/assets/img/scenery/beach1.jpg&quot;) top no-repeat;">
-            <div class="text"><img src="/assets/img/favicon.png" width="50%">
-                <h2>Get in touch with us</h2>
-            </div>
-        </section>
-    </main>
-    <section class="d-print-none d-lg-none d-xl-none d-xxl-none clean-block clean-info dark" style="text-align: center;padding-top: 20px;max-width: 100%;">
-        <h1>G'day, we are most active in Discord</h1><!-- <iframe src="https://discord.com/widget?id=932192727200829440&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
-<widgetbot server="932192727200829440" channel="932216772113858611" width="100%" height="600"></widgetbot>
-<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
-        <div style="margin-top: 20px;"><a class="btn btn-primary" role="button" style="font-size: 20px;" href="https://discord.gg/8GmVe9nGCn" target="_blank"><i class="fab fa-discord"></i>Join Server</a></div>
-    </section>
-    <section class="text-center">
-        <h1>You can contact us via Email<br><a class="btn btn-primary" role="button" href="/email" target="_blank">Send us an Email</a></h1>
-    </section>
-    <section class="d-none d-lg-block d-xl-block d-xxl-block clean-block clean-info dark" style="text-align: center;padding-top: 20px;max-width: 100%;">
-        <h1>We are also very active on Discord</h1>
-        <div style="margin-top: 20px;"><a class="btn btn-primary" role="button" style="font-size: 20px;" href="https://discord.gg/8GmVe9nGCn" target="_blank"><i class="fab fa-discord"></i>Join Server</a></div>
-    </section>
-    <footer class="page-footer dark">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-3">
-                    <h5>Get started</h5>
-                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
-                    </ul>
-                </div>
-                <div class="col-sm-3">
-                    <h5>Contact</h5>
-                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
-        </div>
-    </footer>
-    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
-    <script src="/assets/js/vanilla-zoom.js"></script>
-    <script src="/assets/js/theme.js"></script>
-</body>
-
-</html>
--- a/templates/domains.html
+++ b/templates/domains.html
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Domains - HNSAU</title>
-    <meta name="theme-color" content="#ffffff">
-    <link rel="canonical" href="https://hns.au/domains">
-    <meta property="og:url" content="https://hns.au/domains">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
-    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta property="og:description" content="Domains for sale by HNSAU">
-    <meta name="description" content="Domains for sale by HNSAU">
-    <meta name="twitter:description" content="Domains for sale by HNSAU">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
-    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
-<script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
-{{handshake_scripts | safe}}
-</head>
-
-<body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse" id="navcol-1">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <main class="page catalog-page">
-        <section class="clean-block clean-catalog dark">
-            <div class="container">
-                <div class="block-heading">
-                    <h2 class="text-info">These domain are a unique opportunity.</h2>
-                    <p>These unique Handshake domain are for sale.<br>Handshake domains are secured by the Handshake blockchain. TLDs are owned (not rented) and personal.<br>Proceeds from this domain will go towards HNSAU.<br>The Handshake Australia group are promoting adoption and education in the "down under"</p>
-                    <h3 class="text-info" style="margin-top: 30px;">Why use a Handshake domain?</h3>
-                    <ul style="width: auto;display: inline-block;">
-                        <li style="width: auto;text-align: left;">Secured on the Handshake blockchain</li>
-                        <li style="width: auto;text-align: left;">Unique</li>
-                        <li style="width: auto;text-align: left;">Used as a wallet address to send crypto to</li>
-                        <li style="width: auto;text-align: left;">Host your site without relying on centralized hosting</li>
-                        <li style="width: auto;text-align: left;">Secure your site with SSL without the need of Certificate Authorities</li>
-                        <li style="width: auto;text-align: left;">Use your domain as your identity to login to sites</li>
-                    </ul>
-                </div>
-                <div class="content">
-                    <div class="products" style="padding: 30px;color: rgb(255,255,255);">
-                        <div class="row g-0">
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">hnsai/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">my.uniwallet/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Gifted by <a href="https://twitter.com/tiMaxal/status/1572716183509700608" target="_blank">@dotUniwallet</a> - The Unique Unicorn of a Unified and Universal Wallet!<br>This domain is hosted in varo/</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">apihns/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">apiez/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">campingground/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">This domain also comes with&nbsp;campinground/<br>Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">exploretheglobe/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">closeathand/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-6 col-md-12 col-lg-6" style="padding: 10px;">
-                                <div class="text-center border-light-subtle clean-product-item" style="background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.36) 100%), url(&quot;/assets/img/scenery/image6.jpg&quot;) center / cover no-repeat;">
-                                    <div class="image">
-                                        <h1 style="text-align: center;">iotwallet/</h1>
-                                    </div>
-                                    <div class="product-name">
-                                        <p class="bg-info-subtle border rounded" style="text-align: center;max-width: 400px;margin: auto;">Please contact us if you are interested in this domain</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </main>
-    <footer class="page-footer dark">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-3">
-                    <h5>Get started</h5>
-                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
-                    </ul>
-                </div>
-                <div class="col-sm-3">
-                    <h5>Contact</h5>
-                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
-        </div>
-    </footer>
-    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
-    <script src="/assets/js/vanilla-zoom.js"></script>
-    <script src="/assets/js/theme.js"></script>
-</body>
-
-</html>
--- a/templates/faq.html
+++ b/templates/faq.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/faq">
    <meta property="og:url" content="https://hns.au/faq">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -53,7 +137,7 @@
        <section class="clean-block clean-faq dark">
            <div class="container">
                <div class="block-heading">
-                    <h2 class="text-info">FAQ</h2>
+                    <h2 class="text-primary">FAQ</h2>
                    <p>Contact us in Discord if you can't find the answers you need</p>
                </div>
                <div class="block-content">
@@ -73,29 +157,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,14 +8,14 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/">
    <meta property="og:url" content="https://hns.au/">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
    <script type="application/ld+json">
        {
@@ -25,88 +25,234 @@
            "url": "https://hns.au"
        }
    </script>
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
+    <link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
+    <link rel="stylesheet" href="/assets/fonts/simple-line-icons.min.css">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img class="light-only" src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;"><img class="dark-only" src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link active" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link active" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link active" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
-    <main class="page landing-page">
-        <section class="clean-block clean-hero" style="color: rgba(9,162,255,0);background: url(&quot;/assets/img/scenery/beach2.jpg&quot;) top / auto no-repeat, url(&quot;/assets/img/backgrounds/blobs.svg&quot;) center / cover no-repeat;">
-            <div class="text"><img src="/assets/img/favicon.png" width="50%">
-                <h2>Handshake Australia</h2>
-                <p>The home of Australians using the decentralized web, built on Handshake.<br>Handshake is an alternative to a centralised DNS root authority that ensures a fair and transparent root zone.<br>No one owns or controls Handshake.</p>
-            </div>
-        </section>
+    <main class="page landing-page" style="margin-top: 50px;">
+        <div class="light-only" style="margin-bottom: 3em;">
+            <div style="max-width: 800px;margin: auto;"><img src="/assets/img/HandshakeAustraliaT.webp" width="50%" style="max-width: 400px;margin-left: 20px;"></div>
+            <section class="text-start clean-block clean-hero">
+                <div class="text" style="max-width: 700px;width: 95%;">
+                    <p style="color: black;font-size: 20px;">Welcome to the premier destination for Australians embracing the decentralized web, powered by Handshake. Handshake offers a revolutionary alternative to centralized DNS root authorities, delivering a transparent and equitable root zone. Operated without ownership or control by any single entity, Handshake ensures a truly decentralized internet experience.</p>
+                </div>
+            </section>
+        </div>
+        <div class="dark-only" style="margin-bottom: 3em;">
+            <div style="max-width: 800px;margin: auto;"><img src="/assets/img/HandshakeAustraliaTW.webp" width="50%" style="max-width: 400px;margin-left: 20px;"></div>
+            <section class="text-start clean-block clean-hero">
+                <div class="text" style="max-width: 700px;width: 95%;">
+                    <p style="font-size: 20px;">Welcome to the premier destination for Australians embracing the decentralized web, powered by Handshake. Handshake offers a revolutionary alternative to centralized DNS root authorities, delivering a transparent and equitable root zone. Operated without ownership or control by any single entity, Handshake ensures a truly decentralized internet experience.</p>
+                </div>
+            </section>
+        </div>
        <section class="clean-block clean-info dark">
            <div class="container">
                <div class="block-heading">
-                    <h2 class="text-info">Info</h2>
-                    <p>Handshake is a naming protocol that’s backwards compatible with the existing DNS system. It does not replace the DNS protocol, but instead decentralizes the root zone file where TLD ownership information is stored by adding a distributed and decentralized blockchain-based system that no one controls and anyone can use. This allows for a root zone that is uncensorable, permissionless, and free of gatekeepers like ICANN.<br>In addition, it is much cheaper than other blockchain domain systems as there isn't any company looking for profits.</p>
+                    <h2 class="text-primary">Info</h2>
+                    <p style="max-width: 600px;">Handshake is a naming protocol designed to integrate seamlessly with the existing DNS system. Rather than replacing DNS, it decentralizes the root zone file, which stores TLD ownership data, by utilizing a distributed, blockchain-based system that operates without centralized control and is accessible to all. This creates a root zone that is uncensorable, permissionless, and independent of gatekeepers like ICANN. Additionally, Handshake offers a cost-effective alternative to other blockchain domain systems, as it operates without profit-driven entities.</p>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-6"><img class="img-thumbnail img-fluid" src="/assets/img/scenery/Handshake.png"></div>
                    <div class="col-md-6">
                        <h3>Stop renting yourname.com.au/<br>Own yourname/</h3>
                        <div class="getting-started-info">
-                            <p>Handshake allows you to own your own top level domain (kinda like .au). So you can stop renting yourname.com.au and really own yourname/</p>
+                            <p>Handshake empowers you to own your own top-level domain (similar to .au), enabling you to move beyond renting domains like yourname.com.au and truly possess yourname/ in a decentralized system.</p>
                        </div>
                    </div>
                </div>
            </div>
+            <section id="about" class="clean-block about-us">
+                <div class="container">
+                    <div class="block-heading">
+                        <h2 class="text-primary">Directors of Handshake Australia</h2>
+                    </div>
+                    <div class="row justify-content-center">
+                        <div class="col-sm-6 col-lg-4">
+                            <div class="card text-center clean-card"><img class="card-img-top w-100 d-block" src="/assets/img/avatars/nathan.woodburn.jpg">
+                                <div class="card-body info" style="height: min-content;">
+                                    <h4 class="card-title">Nathan Woodburn</h4>
+                                    <h6 class="card-title">Nathan.Woodburn/</h6>
+                                    <p class="card-text" style="height: 4em;">Developer and tech administrator for HNSAU</p>
+                                    <div class="icons"><a href="https://nathan.woodburn.au" target="_blank"><i class="icon-link"></i></a><a href="https://twitter.com/woodburn_nathan" target="_blank"><i class="icon-social-twitter"></i></a></div><span>Canberra, AU</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-lg-4">
+                            <div class="card text-center clean-card"><img class="card-img-top w-100 d-block" src="/assets/img/avatars/erwin.jpg" style="background: #ffffff;">
+                                <div class="card-body info" style="height: min-content;">
+                                    <h4 class="card-title">Erwin Groen</h4>
+                                    <h6 class="card-title">Erwin.Groen/</h6>
+                                    <p class="card-text" style="height: 4em;">Founder/Co founder Handshake Australia</p>
+                                    <div class="icons"><a href="https://erwin.groen.au" target="_blank"><i class="icon-link"></i></a><a href="https://twitter.com/erwingroen" target="_blank"><i class="icon-social-twitter"></i></a></div><span>Adelaide, AU</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-lg-4">
+                            <div class="card text-center clean-card"><img class="card-img-top w-100 d-block" src="/assets/img/avatars/timaxal.jpg">
+                                <div class="card-body info" style="height: min-content;">
+                                    <h4 class="card-title">Tim Maskall</h4>
+                                    <h6 class="card-title">tiMaxal/</h6>
+                                    <p class="card-text" style="height: 4em;"></p>
+                                    <div class="icons"><a href="https://timax.au" target="_blank"><i class="icon-link"></i></a><a href="https://twitter.com/tiMaxal" target="_blank"><i class="icon-social-twitter"></i></a></div><span>Brisbane, AU</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="contact" class="block-heading">
+                        <h2 class="text-primary">Contact Us</h2>
+                        <div class="social-icons" style="font-size: 50px;"><a href="mailto:hns@hns.au" target="_blank" style="padding-right: 10px;padding-left: 10px;"><i class="icon ion-email" style="font-size: 50px;"></i></a><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="padding-right: 10px;padding-left: 10px;"><i class="fab fa-discord" style="font-size: 50px;"></i></a></div>
+                    </div>
+                    <div class="text-center block-heading" id="support">
+                        <h2 class="text-primary">Support Us</h2><span style="font-size: 20px;">You can support us by donating HNS to&nbsp;</span><code style="font-size: 20px;"><br>hs1qjdsz8u2ftm93jmczq8x36zqmfh3pqagq0hkkaf</code><span style="font-size: 20px;"><br>Or by using our alias</span><code style="font-size: 20px;"><br>@donate.hnsau<br><br></code><span style="font-size: 20px;">You can also support us by buying an SLD from&nbsp;<a href="https://domains.hnsau" target="_blank">https://domains.hns.au</a></span>
+                    </div>
+                </div>
+            </section>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
+    <div class="text-end floating-switch" style="margin: 10px;"><button class="btn btn-primary btn-sm" type="button" onclick="toggle();"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun light-only" style="font-size: 20px;margin: auto;">
+                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
+            </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-fill dark-only" style="font-size: 20px;margin: auto;">
+                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
+            </svg></button></div>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="/assets/js/vanilla-zoom.js"></script>
--- a/templates/links.html
+++ b/templates/links.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/links">
    <meta property="og:url" content="https://hns.au/links">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -53,8 +137,7 @@
        <section class="clean-block clean-services dark" style="padding-bottom: 200px;background: url(&quot;/assets/img/backgrounds/polygons.svg&quot;) no-repeat;background-size: cover;">
            <div class="container">
                <div class="block-heading">
-                    <h2 class="text-info">Useful Links</h2>
-                    <p>Links to help you learn about and use Handshake</p>
+                    <h1 class="text-primary">Useful Links</h1>
                </div>
                <div class="row row-cols-2 row-cols-sm-5 row-cols-md-5 row-cols-lg-5 row-cols-xl-5 row-cols-xxl-5">
                    <div class="col">
@@ -165,15 +248,6 @@
                            </div>
                        </div>
                    </div>
-                    <div class="col">
-                        <div class="card"><img class="card-img-top w-100 d-block" src="/assets/img/hns/transparent.png" style="padding: 26px;padding-bottom: 0px;padding-top: 5px;">
-                            <div class="card-body">
-                                <h4 class="card-title">HNS Cloud</h4>
-                                <p class="card-text">Get access to a cloud alternative using your HNS domain</p>
-                                <div><a class="btn btn-outline-primary btn-sm" role="button" href="https://cloud.hns.au" target="_blank" style="margin-bottom: 15%;">Visit HNS Cloud</a></div>
-                            </div>
-                        </div>
-                    </div>
                    <div class="col">
                        <div class="card"><img class="card-img-top w-100 d-block" src="/assets/img/hns/transparent.png" style="padding: 26px;padding-bottom: 0px;padding-top: 5px;">
                            <div class="card-body">
@@ -214,29 +288,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/login">
    <meta property="og:url" content="https://hns.au/login">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -62,29 +146,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/payment.html
+++ b/templates/payment.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/payment">
    <meta property="og:url" content="https://hns.au/payment">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -89,29 +173,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/payment_info.html
+++ b/templates/payment_info.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/payment_info">
    <meta property="og:url" content="https://hns.au/payment_info">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -73,29 +157,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/pins.html
+++ b/templates/pins.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/pins">
    <meta property="og:url" content="https://hns.au/pins">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta property="og:description" content="Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from. Free shipping worldwide.">
    <meta property="og:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta property="og:title" content="Pins | HNS AU">
    <meta name="twitter:description" content="Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from. Free shipping worldwide.">
    <meta name="twitter:title" content="Pins | HNS AU">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -53,7 +137,7 @@
        <section class="clean-block clean-catalog dark">
            <div class="container">
                <div class="block-heading">
-                    <h2 class="text-info">Pins</h2>
+                    <h2 class="text-primary">Pins</h2>
                    <p>Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from.<br>Free shipping worldwide</p>
                </div>
                <div class="products" style="padding: 30px;">
@@ -87,29 +171,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/pins/pack1.html
+++ b/templates/pins/pack1.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,19 +8,100 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/pins/pack1.html">
    <meta property="og:url" content="https://hns.au/pins/pack1.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:description" content="Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from. Free shipping worldwide.">
    <meta property="og:description" content="Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from. Free shipping worldwide.">
    <meta property="og:title" content="Pins | HNS AU">
    <meta property="og:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta name="twitter:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta name="twitter:title" content="Pins | HNS AU">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
@@ -28,24 +109,27 @@
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
    <link rel="stylesheet" href="/assets/fonts/simple-line-icons.min.css">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -144,29 +228,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/pins/pack2.html
+++ b/templates/pins/pack2.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,19 +8,100 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/pins/pack2.html">
    <meta property="og:url" content="https://hns.au/pins/pack2.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:title" content="Pins | HNS AU">
    <meta property="og:description" content="Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from. Free shipping worldwide.">
    <meta property="og:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta property="og:title" content="Pins | HNS AU">
    <meta name="twitter:image" content="https://hns.au/assets/img/pins/IMG_8116.jpg">
    <meta name="twitter:description" content="Show that you support Handshake with a HNS lapel pin. Created to our high stands with multiple colours to choose from. Free shipping worldwide.">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
@@ -28,24 +109,27 @@
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
    <link rel="stylesheet" href="/assets/fonts/simple-line-icons.min.css">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -144,29 +228,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/promo.html
+++ b/templates/promo.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/promo">
    <meta property="og:url" content="https://hns.au/promo">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -67,29 +151,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/sitemap.xml
+++ b/templates/sitemap.xml
@@ -27,21 +27,15 @@
    <url>
        <loc>https://hns.au/404</loc>
    </url>
-    <url>
-        <loc>https://hns.au/about</loc>
-    </url>
    <url>
        <loc>https://hns.au/blog</loc>
    </url>
+    <url>
+        <loc>https://hns.au/campaigns</loc>
+    </url>
    <url>
        <loc>https://hns.au/cart</loc>
    </url>
-    <url>
-        <loc>https://hns.au/contact</loc>
-    </url>
-    <url>
-        <loc>https://hns.au/domains</loc>
-    </url>
    <url>
        <loc>https://hns.au/faq</loc>
    </url>
--- a/templates/tlds/australia.html
+++ b/templates/tlds/australia.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,8 +8,8 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/tlds/australia.html">
    <meta property="og:url" content="https://hns.au/tlds/australia.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:image" content="https://hns.au/assets/img/blog/dot_australia.png">
    <meta name="twitter:description" content=".Australia/ domains by HNSAU">
    <meta property="og:title" content=".Australia/ - HNSAU">
@@ -17,34 +17,118 @@
    <meta property="og:description" content=".Australia/ domains by HNSAU">
    <meta name="twitter:title" content=".Australia/ - HNSAU">
    <meta name="twitter:image" content="https://hns.au/assets/img/blog/dot_australia.png">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -74,29 +158,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/tlds/newzealand.html
+++ b/templates/tlds/newzealand.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en">
+<html data-bs-theme="auto" lang="en">

 <head>
    <meta charset="utf-8">
@@ -8,8 +8,8 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/tlds/newzealand.html">
    <meta property="og:url" content="https://hns.au/tlds/newzealand.html">
-    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://hns.au/assets/img/blog/dot_newzealand.webp">
    <meta property="og:description" content=".NewZealand/ domains by HNSAU">
    <meta name="twitter:title" content=".NewZealand/ - HNSAU">
@@ -17,34 +17,118 @@
    <meta name="description" content=".NewZealand/ domains by HNSAU">
    <meta property="og:image" content="https://hns.au/assets/img/blog/dot_newzealand.webp">
    <meta name="twitter:description" content=".NewZealand/ domains by HNSAU">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -74,29 +158,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
--- a/templates/uv.html
+++ b/templates/uv.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="dark" lang="en-au">
+<html data-bs-theme="auto" lang="en-au">

 <head>
    <meta charset="utf-8">
@@ -8,43 +8,127 @@
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="https://hns.au/uv">
    <meta property="og:url" content="https://hns.au/uv">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:description" content="The home of Australians using the decentralized web, built on Handshake.">
-    <meta property="og:title" content="HNS AU">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="HNS AU">
+    <meta name="twitter:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta name="twitter:image" content="https://hns.au/assets/img/HNSAU-social.webp">
-    <meta name="description" content="Handshake Australia">
+    <meta name="twitter:title" content="HNS AU">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="HNS AU">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
+    <meta name="description" content="Handshake Australia; The leading hub for Australians leveraging the decentralized web, powered by Handshake.">
    <meta property="og:image" content="https://hns.au/assets/img/HNSAU-social.webp">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
-    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon-light.png" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="icon" type="image/png" sizes="600x627" href="/assets/img/favicon.png">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i&amp;display=swap">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="/assets/css/Hero-Features-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
    <link rel="stylesheet" href="/assets/css/vanilla-zoom.min.css">
 <script async src="https://umami.woodburn.au/script.js" data-website-id="15852010-8d3c-4553-92fc-2d6ac31098e8"></script>
 {{handshake_scripts | safe}}
 </head>

 <body>
-    <nav class="navbar navbar-expand-lg fixed-top bg-dark clean-navbar navbar-light" data-bs-theme="dark">
-        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+    <nav class="navbar navbar-expand-lg fixed-top bg-secondary-subtle clean-navbar navbar-light">
+        <div class="container-fluid"><a class="navbar-brand logo" href="/" style="width: 50%;"><img src="/assets/img/HandshakeAustraliaT.webp" style="margin-right: 10px;height: 50px;" class="light-only"><img src="/assets/img/HandshakeAustraliaTW.webp" style="margin-right: 10px;height: 50px;" class="dark-only"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/links">Links</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au">Domains</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/pins">Pins</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/" style="color: var(--bs-primary);">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/blog" style="color: var(--bs-primary);">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/campaigns" style="color: var(--bs-primary);">Campaigns</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/links" style="color: var(--bs-primary);">Links</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#about" style="color: var(--bs-primary);">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://domains.hns.au" style="color: var(--bs-primary);">Domains</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/#contact" style="color: var(--bs-primary);">Contact</a></li>
                </ul>
            </div>
        </div>
@@ -66,29 +150,27 @@
            </div>
        </section>
    </main>
-    <footer class="page-footer dark">
+    <footer class="page-footer dark" style="background: var(--bs-body-bg);color: var(--bs-body-color);">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
-                    <h5>Get started</h5>
+                    <h5 style="color: var(--bs-body-color);">Get started</h5>
                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/links">Links</a></li>
-                        <li><a href="/domains" target="_blank">Domains</a></li>
+                        <li><a href="/" style="color: var(--bs-body-color);">Home</a></li>
+                        <li><a href="/links" style="color: var(--bs-body-color);">Links</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
-                    <h5>Contact</h5>
+                    <h5 style="color: var(--bs-body-color);">Contact</h5>
                    <ul>
-                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
-                        <li><a href="/email" target="_blank">Email</a></li>
-                        <li><a href="/about">About Us</a></li>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank" style="color: var(--bs-body-color);">Discord</a></li>
+                        <li><a href="/email" target="_blank" style="color: var(--bs-body-color);">Email</a></li>
                    </ul>
                </div>
            </div>
        </div>
-        <div class="footer-copyright">
-            <p>© {{year}} Handshake AU</p>
+        <div class="footer-copyright" style="background: var(--bs-body-bg);border-style: none;">
+            <p style="color: var(--bs-body-color);">© {{year}} Handshake AU</p>
        </div>
    </footer>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
Author	SHA1	Message	Date
Nathan Woodburn	4a4d8b31c4	Merge pull request 'Add campaigns page' (#2 ) from feat/campaigns into main All checks were successful Build Docker / Build Image (push) Successful in 2m50s Details Reviewed-on: #2	2025-08-21 15:55:44 +10:00
Nathan Woodburn	508275d02a	feat: Use git lfs All checks were successful Build Docker / Build Image (push) Successful in 1m37s Details	2025-08-21 15:37:20 +10:00
Nathan Woodburn	ec81a3c8d4	feat: Add campaigns Some checks failed Build Docker / Build Image (push) Has been cancelled Details Also adds theme switcher to more pages	2025-08-21 15:34:50 +10:00
Nathan Woodburn	21aa0c3eeb	feat: Add redirects for old pages All checks were successful Build Docker / Build Image (push) Successful in 54s Details	2025-08-07 17:45:33 +10:00
Nathan Woodburn	be4432386b	Merge pull request 'New design' (#1 ) from feat/newdesign into main All checks were successful Build Docker / Build Image (push) Successful in 58s Details Reviewed-on: #1	2025-08-07 16:36:11 +10:00
Nathan Woodburn	7203672773	feat: Update opacity of bg image All checks were successful Build Docker / Build Image (push) Successful in 1m2s Details	2025-08-07 16:25:08 +10:00
Nathan Woodburn	71725cfecb	feat: Lower opacity on landing bg image All checks were successful Build Docker / Build Image (push) Successful in 2m13s Details	2025-08-07 15:33:07 +10:00
Nathan Woodburn	3cfb7f1ebb	feat: Update theme switcher to work on mobile All checks were successful Build Docker / Build Image (push) Successful in 55s Details	2025-08-07 00:43:23 +10:00
Nathan Woodburn	0761d9d707	feat: Add inital dark/light mode switching All checks were successful Build Docker / Build Image (push) Successful in 2m10s Details	2025-08-07 00:26:22 +10:00
Nathan Woodburn	6ebeb1b5bc	feat: Remove contact page All checks were successful Build Docker / Build Image (push) Successful in 47s Details Change link to just point to the contact section on the main page	2025-08-06 23:05:55 +10:00
Nathan Woodburn	9bd6483f8a	feat: Cleanup gitignore All checks were successful Build Docker / Build Image (push) Successful in 50s Details	2025-08-06 22:48:42 +10:00
Nathan Woodburn	b25ac25557	feat: Remove old HNS cloud link All checks were successful Build Docker / Build Image (push) Successful in 50s Details	2025-08-06 22:35:56 +10:00
Nathan Woodburn	deb6fbeb10	feat: Update readme All checks were successful Build Docker / Build Image (push) Successful in 54s Details	2025-08-06 22:26:10 +10:00
Nathan Woodburn	d66238668c	fix: Text colour on links page All checks were successful Build Docker / Build Image (push) Successful in 52s Details	2025-08-06 22:10:25 +10:00
Nathan Woodburn	ab756dbbae	feat: Change connections in main bg graphic to green All checks were successful Build Docker / Build Image (push) Successful in 57s Details	2025-08-06 22:02:14 +10:00
Nathan Woodburn	eda7089af3	feat: Update directors info All checks were successful Build Docker / Build Image (push) Successful in 51s Details	2025-08-06 13:57:20 +10:00
Nathan Woodburn	e4ff659e45	feat: Update erwin photo All checks were successful Build Docker / Build Image (push) Successful in 56s Details	2025-08-06 13:41:47 +10:00
Nathan Woodburn	df20f1fbc1	feat: Update bg and add about to main page All checks were successful Build Docker / Build Image (push) Successful in 51s Details	2025-08-06 13:32:02 +10:00
Nathan Woodburn	19b828706f	feat: Update primary colour to HNSAU orange All checks were successful Build Docker / Build Image (push) Successful in 55s Details	2025-08-06 12:37:17 +10:00
Nathan Woodburn	2cb9ba1c50	feat: Update blocks to better fit au All checks were successful Build Docker / Build Image (push) Successful in 2m12s Details	2025-08-06 11:45:17 +10:00
Nathan Woodburn	9392edf109	feat: Add new landing bg All checks were successful Build Docker / Build Image (push) Successful in 56s Details	2025-08-05 17:02:40 +10:00
Nathan Woodburn	c9bfa97be2	fix: Lower colour of bg graphic to make text easier to read All checks were successful Build Docker / Build Image (push) Successful in 46s Details	2025-08-05 16:03:28 +10:00
Nathan Woodburn	2115908983	feat: Add background graphic All checks were successful Build Docker / Build Image (push) Successful in 53s Details	2025-08-05 15:59:45 +10:00
Nathan Woodburn	3d2344467e	feat: Update to light theme All checks were successful Build Docker / Build Image (push) Successful in 3m21s Details	2025-08-05 15:49:43 +10:00
Nathan Woodburn	cf49e5fac1	feat: Add dev mode All checks were successful Build Docker / Build Image (push) Successful in 45s Details	2025-08-05 12:37:54 +10:00
Nathan Woodburn	cbaf577fa9	feat: Clean up home page All checks were successful Build Docker / Build Image (push) Successful in 2m59s Details	2025-08-05 12:28:08 +10:00