diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 35e14d38d3b10..8c8c6138c3349 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -130,8 +130,7 @@
 					<span class="only-mobile">{{.SignedUser.Name}}</span>
 					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
 				</span>
-				{{/* do not localize it, here it needs the fixed length (width) to make UI comfortable */}}
-				{{if .IsAdmin}}<span class="navbar-profile-admin">admin</span>{{end}}
+				{{if .IsAdmin}}<span class="navbar-profile-admin">{{svg "octicon-server" 11}}</span>{{end}}
 				<div class="menu user-menu">
 					<div class="header">
 						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b09b271ad48dd..f475876db1f46 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -101,17 +101,22 @@
   }
 }
 
+#navbar .ui.dropdown.active .navbar-profile-admin {
+  background: var(--color-nav-hover-bg);
+  border-color: var(--color-nav-hover-bg);
+}
+
 #navbar .ui.dropdown .navbar-profile-admin {
   display: block;
   position: absolute;
-  font-size: 9px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-nav-bg);
-  background: var(--color-primary);
-  padding: 2px 3px;
+  color: var(--color-text);
+  background: var(--color-nav-bg);
+  border: 1px solid var(--color-nav-bg);
+  padding: 2px;
   border-radius: 10px;
-  top: -1px;
-  left: 18px;
+  top: -0.5px;
+  left: 28px;
+  line-height: 0;
 }
 
 #navbar a.item:hover .notification_count,