diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index a233865a3db9..4858d0b7ded9 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -73,9 +73,7 @@
 		{{template "custom/body_inner_pre" .}}
 
 		{{if not .PageIsInstall}}
-			<div class="ui top secondary stackable main menu following bar light">
-				{{template "base/head_navbar" .}}
-			</div><!-- end bar -->
+			{{template "base/head_navbar" .}}
 		{{end}}
 
 {{if false}}
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index a61c62396402..e435fd67ca0d 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -1,4 +1,4 @@
-<nav class="ui container" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
+<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
 	{{$notificationUnreadCount := 0}}
 	{{if .IsSigned}}
 		{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
@@ -78,7 +78,7 @@
 			</div><!-- end dropdown avatar menu -->
 		</div>
 	{{else if .IsSigned}}
-		<div class="right stackable menu">
+		<div class="right stackable menu gt-mr-4">
 			{{if EnableTimetracking}}
 			<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
 				<span class="fitted gt-relative">
@@ -125,7 +125,7 @@
 				</span>
 			</a>
 
-			<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "create_new"}}">
+			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}">
 				<span class="text">
 					<span class="fitted">{{svg "octicon-plus"}}</span>
 					<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
@@ -148,7 +148,7 @@
 				</div><!-- end content create new menu -->
 			</div><!-- end dropdown menu create new -->
 
-			<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
+			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
 				<span class="text">
 					{{avatar $.Context .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 42d422687ee8..dbe6ab7c89b4 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -15,7 +15,7 @@
 </head>
 <body>
 	<div class="full height">
-		<nav class="ui secondary menu following bar light">
+		<nav class="ui container secondary stackable main menu" id="navbar">
 			<div class="ui container gt-df">
 				<div class="item brand gt-f1">
 					<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index a35eccb26bea..b56e7b68d658 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -195,8 +195,8 @@
   --color-input-toggle-background: #dedede;
   --color-input-border: #dedede;
   --color-input-border-hover: #cecece;
-  --color-navbar: #f8f8f8;
-  --color-navbar-transparent: #f8f8f800;
+  --color-header-wrapper: #f8f8f8;
+  --color-header-wrapper-transparent: #f8f8f800;
   --color-light: #00000006;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000001d;
@@ -223,7 +223,8 @@
   --color-reaction-active-bg: var(--color-primary-light-6);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
-  --color-header-bar: #ffffff;
+  --color-nav-bg: #ffffff;
+  --color-nav-hover-bg: #ebebeb;
   --color-label-text: #232323;
   --color-label-bg: #cacaca5b;
   --color-label-hover-bg: #cacacaa0;
@@ -946,44 +947,44 @@ img.ui.avatar,
   }
 }
 
-.following.bar {
-  margin: 0 !important;
-}
-
-.following.bar.light {
-  background: var(--color-header-bar);
+#navbar {
+  display: flex;
+  align-items: center;
+  background: var(--color-nav-bg);
   border-bottom: 1px solid var(--color-secondary);
+  width: 100vw;
+  min-height: 52px;
+  margin: 0 !important;
 }
 
-.following.bar .column .menu {
+#navbar .column .menu {
   margin-top: 0;
 }
 
-.following.bar .fitted .svg {
+#navbar .fitted .svg {
   margin-right: 0;
   vertical-align: middle;
 }
 
-.following.bar .searchbox {
+#navbar .searchbox {
   background-color: var(--color-input-background) !important;
 }
 
-.following.bar .text .svg {
+#navbar .text .svg {
   width: 16px;
   text-align: center;
 }
 
-.following.bar #navbar {
-  width: 100vw;
-  min-height: 52px;
+#navbar a.item:hover {
+  background: var(--color-nav-hover-bg);
 }
 
-.following.bar #navbar .dropdown .avatar {
+#navbar .dropdown .avatar {
   margin-right: 0 !important;
 }
 
 @media (max-width: 767px) {
-  .following.bar #navbar:not(.shown) > *:not(:first-child) {
+  #navbar:not(.shown) > *:not(:first-child) {
     display: none;
   }
 }
@@ -1576,7 +1577,7 @@ img.ui.avatar,
 
 .ui.menu.new-menu {
   margin-bottom: 15px;
-  background: var(--color-navbar);
+  background: var(--color-header-wrapper);
   border-bottom: 1px solid var(--color-secondary) !important;
   overflow: auto;
 }
@@ -1591,7 +1592,7 @@ img.ui.avatar,
 .ui.menu.new-menu::after {
   position: absolute;
   display: block;
-  background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%);
+  background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%);
   content: '';
   right: 0;
   height: 39px;
@@ -2126,24 +2127,31 @@ a.ui.basic.label:hover {
   width: 13px;
   height: 13px;
   background: var(--color-primary);
-  border: 2px solid var(--color-header-bar);
+  border: 2px solid var(--color-nav-bg);
   border-radius: 100%;
 }
 
 .notification_count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
-  left: 7px;
-  top: -9px;
-  min-width: 1.5em;
-  text-align: center;
+  left: 6px;
+  top: -8px;
+  min-width: 17px;
+  min-height: 17px;
   background: var(--color-primary);
-  border: 2px solid var(--color-header-bar);
-  color: var(--color-header-bar);
-  padding: 2.75px;
-  border-radius: 1em;
-  font-size: 11px;
+  border: 2px solid var(--color-nav-bg);
+  color: var(--color-nav-bg);
+  border-radius: 17px;
+  padding: 0 3.5px;
+  font-size: 12px;
+  line-height: 12px;
   font-weight: var(--font-weight-bold);
-  line-height: .7;
+}
+
+#navbar a.item:hover .notification_count {
+  border-color: var(--color-nav-hover-bg);
 }
 
 .rss-icon {
diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index ee05918e77d7..f4d1eed96081 100644
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -1,6 +1,6 @@
 .explore .navbar {
   margin-bottom: 15px !important;
-  background-color: var(--color-navbar) !important;
+  background-color: var(--color-header-wrapper) !important;
   border-width: 1px !important;
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 4e300be87879..c6655a8fc95b 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -132,7 +132,7 @@
 }
 
 .repository .header-wrapper {
-  background-color: var(--color-navbar);
+  background-color: var(--color-header-wrapper);
 }
 
 .repository .header-wrapper .ui.tabs.divider {
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index f6321c9ed779..b07a171b5299 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -180,8 +180,8 @@
   --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
   --color-input-border-hover: #505667;
-  --color-navbar: #2a2e3a;
-  --color-navbar-transparent: #2a2e3a00;
+  --color-header-wrapper: #2a2e3a;
+  --color-header-wrapper-transparent: #2a2e3a00;
   --color-light: #00000028;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #ffffff28;
@@ -207,7 +207,8 @@
   --color-reaction-active-bg: var(--color-primary-light-5);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
-  --color-header-bar: #2e323e;
+  --color-nav-bg: #2e323e;
+  --color-nav-hover-bg: #434651;
   --color-label-text: #dfe3ec;
   --color-label-bg: #7c84974b;
   --color-label-hover-bg: #7c8497a0;
