diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
index 1cac45abcd..3d452b5f0c 100644
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -262,8 +262,6 @@ $navbar-logo-width: auto !default;
 
 .nav-link-new {
   margin-left: auto;
-  border-right: 1px solid #828ba0a1;
-  padding: 0px 11px 0px 5px;
   font-size: 14px;
   color: #333333;
   @include media-breakpoint-up(lg) {
@@ -272,7 +270,10 @@ $navbar-logo-width: auto !default;
 }
 
 .new-button {
-  margin-right: -10px!important;
+  margin-right: -7px !important;
+  padding-right: 0px;
+  height: 20px!important;
+  border-left: 1px solid #828ba0a1!important;
   @include media-breakpoint-up(lg) {
       display: none!important;
   }
@@ -326,17 +327,19 @@ $navbar-logo-width: auto !default;
   .navbar.navbar-primary .navbar-nav .nav-link:focus {
       background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
       width: 100%;
-      border-left: 2px solid #5c33a2;
+      
   }
   .navbar.navbar-primary .navbar-nav .nav-link:hover:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 50px;
-      width: 50%;
-      border-left: 5px solid #726E97;
+    content: "|";
+    height: 50px;
+    width: 50%;
+    opacity: 1;
+    background: none;
+    left: 24%;
+    top: 14%;
+    color: $primary;
   }
+
   .navbar {
       padding: 0.5rem 0rem!important;
   }
@@ -349,9 +352,18 @@ $navbar-logo-width: auto !default;
   .dropdown-item:focus {
       background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
       width: 100%;
-      border-left: 2px solid #5c33a2;
       background-color: white!important;
   }
+  .dropdown-item:hover:before {
+    content: "|";
+      height: 50px;
+      width: 50%;
+      opacity: 1;
+      background: none;
+      right: 17%;
+      color: $primary;
+      position: relative;
+  }
   .dark-mode-changer svg path {
       fill: #a3a9b5!important;
   }
@@ -363,5 +375,10 @@ $navbar-logo-width: auto !default;
   #toggleImage2 {
     display: none;
     outline: none;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  #toggleImage1 {
+    width: 27px!important;
   }
 }
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
index dd1ee83d96..1403b72bda 100644
--- a/apps/block_scout_web/assets/css/theme/_dark-theme.scss
+++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -68,7 +68,7 @@ $labels-dark: #8a8dba; // header nav, labels
 		}
 	}
 	.navbar.navbar-primary .navbar-toggler .navbar-toggler-icon {
-		filter: invert(1);
+		filter: invert(1);	
 	}
 
 	// footer
@@ -778,4 +778,48 @@ $labels-dark: #8a8dba; // header nav, labels
 			color: #fff;
 		}
 	}
-}
\ No newline at end of file
+}
+.navbar-dark .navbar-toggler {
+	color: rgba(255, 255, 255, 0.5);
+	border: none;
+}
+
+.dark-theme-applied .dropdown-item {
+    color: #fff!important;
+}
+
+.dark-theme-applied .dropdown-item.active, .dark-theme-applied .dropdown-item:hover, .dark-theme-applied .dropdown-item:focus {
+    background-image: none;
+    width: 100%;
+    background-color: #35335d!important;
+}
+ .dark-theme-applied .dropdown-item:hover:before {
+	content: "|";
+    height: 50px;
+    width: 50%;
+    opacity: 1;
+    background: none;
+    right: 17%;
+    color: $dark-primary;
+    position: relative;
+}
+.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover,
+.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
+.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:focus {
+	background-image: none;
+    width: 100%;
+	background-color: #35335d!important;
+	color: white;
+	border: none;
+  }
+  .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover:before
+   {
+	content: "|";
+    height: 50px;
+    width: 50%;
+    opacity: 1;
+    background: none;
+    left: 24%;
+    top: 14%;
+	color: $dark-primary;
+	}
\ 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 24a66425c3..ee2062e53f 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
@@ -44,7 +44,7 @@
               </span>
               <%= gettext("Blocks") %>
             </a>
-            <div class="dropdown-menu" id="checkIfSmall" aria-labelledby="navbarBlocksDropdown">        
+            <div class="dropdown-menu" id="checkIfSmall" aria-labelledby="navbarBlocksDropdown">
               <%= link to: block_path(@conn, :index), class: "dropdown-item #{tab_status("blocks", @conn.request_path)}" do %>
                 <%= gettext("Blocks") %>
               <% end %>