diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
index b51337b8ac..937e3bdc58 100644
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -1,9 +1,10 @@
 // Default variables
 $header-background-color: #fff !default;
 $header-links-color: #a3a9b5 !default;
-$header-links-color-active: $primary !default;
+$header-links-color-active: #333 !default;
 $header-icon-color: $header-links-color !default;
-$header-icon-color-hover: $primary !default;
+$header-icon-color-hover: #333 !default;
+$header-icon-border-color-hover: $primary !default;
 $header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default;
 $header-textfield-text-color: $header-links-color !default;
 $header-textfield-background-color: #f5f6fa !default;
@@ -22,6 +23,7 @@ $navbar-logo-width: auto !default;
   }
   .navbar-nav {
     flex-grow: 1;
+
     .nav-link {
       align-items: center;
       color: $header-links-color;
@@ -30,15 +32,15 @@ $navbar-logo-width: auto !default;
       position: relative;
 
       &:before {
-        background-color: $primary;
+        background-color: $header-icon-border-color-hover;
         border-radius: 0 0 4px 4px;
-        top: -10px;
         content: "";
         display: block;
         height: 0.25rem;
         left: 50%;
         opacity: 0;
         position: absolute;
+        top: -10px;
         transform: translateX(-50%);
         transition: all 0.2s ease;
         width: calc(
@@ -60,7 +62,7 @@ $navbar-logo-width: auto !default;
       &.active-icon {
         color: $header-links-color-active;
         .nav-link-icon {
-          * {
+          path {
             fill: $header-icon-color-hover;
           }
         }
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_active_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_active_icon.html.eex
index e00402e338..bbe516974c 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_active_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_active_icon.html.eex
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6">
-    <circle cx="3" cy="3" r="3" fill="#A3A9B5" />
+    <circle cx="3" cy="3" r="3" fill="#80d6a1" />
 </svg>
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
index 20c9779bd2..c322b1d35e 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
@@ -78,7 +78,6 @@
         </li>
         <li class="nav-item dropdown nav-item-networks">
           <a class="nav-link topnav-nav-link dropdown-toggle active-icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <!-- ICON FOR MAINNET -->
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_active_icon.html" %>
             </span>