diff --git a/src/Client/Components/Layout/MainLayout.razor b/src/Client/Components/Layout/MainLayout.razor
index 02d868b..ae24e99 100644
--- a/src/Client/Components/Layout/MainLayout.razor
+++ b/src/Client/Components/Layout/MainLayout.razor
@@ -2,7 +2,7 @@
 
 <div class="d-flex flex-column h-100">
     <!---Top Nav---> 
-    <NavMenuLight />
+    <NavMenuDark />
     <!-- Main -->
    <main class="flex-grow-1 mt-5"> 
         @Body
diff --git a/src/Client/Components/Layout/NavMenuDark.razor b/src/Client/Components/Layout/NavMenuDark.razor
new file mode 100644
index 0000000..5f30af2
--- /dev/null
+++ b/src/Client/Components/Layout/NavMenuDark.razor
@@ -0,0 +1,56 @@
+<nav class="navbar navbar-expand-lg bg-dark fixed-top mb-5" data-bs-theme="dark">
+    <div class="container">
+        <a class="navbar-brand" href="/">Gerald Ncube</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarColor01">
+            <ul class="navbar-nav me-auto">
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="skills">Skills</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="projects">Projects</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="challenges">Challenges</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="blog">Blog</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="contact">Contact</NavLink>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+                    <div class="dropdown-menu">
+                        <a class="dropdown-item" href="#">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">Separated link</a>
+                    </div>
+                </li>
+            </ul>
+            <ul class="navbar-nav ms-md-auto">
+                <li class="nav-item">
+                    <a target="_blank" rel="noopener" class="nav-link" href="https://github.com/thomaspark/bootswatch/">
+                        <i class="bi bi-github"></i><span class="d-lg-none ms-2">GitHub</span>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a target="_blank" rel="noopener" class="nav-link" href="https://twitter.com/bootswatch">
+                        <i class="bi bi-twitter"></i><span class="d-lg-none ms-2">Twitter</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+@code {
+
+}
diff --git a/src/Client/Components/Layout/TopNavMenu.razor b/src/Client/Components/Layout/TopNavMenu.razor
index ea94c10..853da51 100644
--- a/src/Client/Components/Layout/TopNavMenu.razor
+++ b/src/Client/Components/Layout/TopNavMenu.razor
@@ -1,5 +1,5 @@
 
-<nav class="navbar navbar-expand-lg fixed-top bg-primary mb-5">
+<nav class="navbar navbar-expand-lg fixed-top mb-5">
     <div class="container">
         <a class="navbar-brand" href="#">Gerald Ncube</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/src/Client/Components/Layout/TopNavMenu.razor.css b/src/Client/Components/Layout/TopNavMenu.razor.css
index 1ca4a3b..a754034 100644
--- a/src/Client/Components/Layout/TopNavMenu.razor.css
+++ b/src/Client/Components/Layout/TopNavMenu.razor.css
@@ -1,7 +1,7 @@
 .navStyle {
-    background-color: var(--cf-theme-900);
+    /*background-color: var(--cf-theme-900);*/
 }
 
 .navbar-nav {
-    --bs-navbar-hover-color: var(--cf-theme-400);
+    /*--bs-navbar-hover-color: var(--cf-theme-400);*/
 }
diff --git a/src/Client/Components/Pages/Home.razor.css b/src/Client/Components/Pages/Home.razor.css
index 64e8b34..82a8ca6 100644
--- a/src/Client/Components/Pages/Home.razor.css
+++ b/src/Client/Components/Pages/Home.razor.css
@@ -1,10 +1,16 @@
-.splash {
+
+.splash {
     position: relative;
     padding: 12em 0 6em;
-    color: #fff;
     text-align: center;
-    background-color: #375ee3;
-    background-image: url(../../images/splash.svg), linear-gradient(145deg, #375ee3 0%, #6543e0 80%);
-    background-repeat: no-repeat;
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    /*
+        background-image: url(../../images/splash.svg), linear-gradient(145deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 80%);
+        background-image: url(../../images/splash.svg), linear-gradient(145deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 80%);
+        background-image: url(../../images/splash.svg), linear-gradient(145deg, var(--bs-body-color) 0%, var(--bs-body-color) 80%);
+    */
+
+    background-image: url(../../images/splash.svg), linear-gradient(145deg, #060606 40%, #282828 80%);
     background-size: cover;
 }
diff --git a/src/Client/wwwroot/js/themeSelector.js b/src/Client/wwwroot/js/themeSelector.js
index 7335384..b865066 100644
--- a/src/Client/wwwroot/js/themeSelector.js
+++ b/src/Client/wwwroot/js/themeSelector.js
@@ -16,13 +16,49 @@
 
                 select.addEventListener('change', (e) => {
                     const theme = themes[e.target.value];
+
+                    // Fetch and apply the theme variables as CSS custom properties
+                    //this.applyThemeVariables(theme.scssVariables);
+
                     document.querySelector('#theme').setAttribute('href', theme.css);
                     document.querySelector('.themeSelector dt').textContent = theme.name;
                     document.querySelector('.themeSelector dd').textContent = theme.description;
+
+                    // Update the top div's class with the selected theme name
+                    //const topDiv = document.querySelector('.top-div'); 
+                    //if (topDiv) {
+                    //    // Remove any previously added theme class
+                    //    topDiv.classList.forEach(className => {
+                    //        if (className.startsWith('theme-')) {
+                    //            topDiv.classList.remove(className);
+                    //        }
+                    //    });
+                    //    // Add the new theme class
+                    //    topDiv.classList.add(`theme-${theme.name.toLowerCase().replace(/\s+/g, '-')}`);
+                    //}
                 });
 
                 const changeEvent = new Event('change');
                 select.dispatchEvent(changeEvent);
             });
+    },
+    applyThemeVariables: function (variablesUrl) {
+        console.log(`Fetching SCSS variables from: ${variablesUrl}`); // Log the URL being fetched
+        fetch(variablesUrl)
+            .then(response => response.text())
+            .then(scss => {
+                console.log(`Fetched SCSS content: ${scss.substring(0, 100)}...`); // Log a snippet of the SCSS content
+                const root = document.documentElement;
+                const lines = scss.split('\n');
+                lines.forEach(line => {
+                    if (line.startsWith('$')) {
+                        const [name, value] = line.split(':').map(part => part.trim());
+                        const cssVarName = name.substring(1); // Remove the '$'
+                        const cssValue = value.split(';')[0]; // Remove the ';' at the end
+                        console.log(`Applying --${cssVarName}: ${cssValue}`); // Log each variable being applied
+                        root.style.setProperty(`--${cssVarName}`, cssValue);
+                    }
+                });
+            });
     }
 };