diff --git a/src/layouts/partials/navbar.html b/src/layouts/partials/navbar.html
index 183decb..0280022 100644
--- a/src/layouts/partials/navbar.html
+++ b/src/layouts/partials/navbar.html
@@ -1,4 +1,4 @@
-<nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
+<nav class="navbar navbar-expand-lg sticky-top my-auto main-nav">
     <div class="container-fluid top-nav p-0">
       <a class="navbar-brand p-0" href="/"><img src="/Images/tea-logo-1.png" class="top-logo" alt="top-logo"></a>
       <button class="navbar-toggler me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
@@ -8,11 +8,11 @@
       <div class="collapse navbar-collapse flex" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto my-auto">
           {{ range .Site.Menus.main }}
-          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
+          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
             <a class="nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
           </li>
           {{ end }}
-          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
+          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
             <a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers">GitHub (<span class="stargazers"></span>)</a>
           </li>
           <style>
@@ -120,6 +120,14 @@
               height:50px;
             }
 
+            .top-nav-item{
+              color: #e1e1e1 !important;
+            }
+
+            .top-nav-item:hover{
+              color: #1a1a1a !important;
+            }
+
           </style>
 
         </ul>
diff --git a/src/static/css/typography.css b/src/static/css/typography.css
index 3cf2337..c1c15d1 100644
--- a/src/static/css/typography.css
+++ b/src/static/css/typography.css
@@ -85,13 +85,19 @@ li{
 }
 
 a{
-  color: #fff !important;
+  color: #fff;
   text-decoration: none;
 }
 
-a:hover{
-  color: #fff !important;
-  text-decoration: none !important;
+a.nav-link{
+  color: #e1e1e1;
+  border-bottom: 1px solid #1a1a1a;
+
+}
+
+a.nav-link:hover{
+  color: #00ffd0;
+  border-bottom: 1px solid #00ffd0;
 }
 
 /* Breakpoint-Specific Typography */