diff --git a/daemon/HTTPServer.cpp b/daemon/HTTPServer.cpp
index 0151733e..4bfb2763 100644
--- a/daemon/HTTPServer.cpp
+++ b/daemon/HTTPServer.cpp
@@ -45,7 +45,7 @@ namespace http {
 		"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23405' rx='5'/%3E%3Ccircle cx='32' cy='32' r='4' fill='%23e580ff'/%3E%3Cg fill='%23d42aff'%3E%3Ccircle cx='20' cy='32' r='4'/%3E%3Ccircle cx='44' cy='32' r='4'/%3E%3Ccircle cx='32' cy='20' r='4'/%3E%3Ccircle cx='32' cy='44' r='4'/%3E%3C/g%3E%3Cg fill='%2380a'%3E%3Ccircle cx='20' cy='56' r='4'/%3E%3Ccircle cx='44' cy='8' r='4'/%3E%3Ccircle cx='44' cy='56' r='4'/%3E%3Ccircle cx='8' cy='44' r='4'/%3E%3Ccircle cx='56' cy='20' r='4'/%3E%3Ccircle cx='56' cy='44' r='4'/%3E%3Ccircle cx='8' cy='20' r='4'/%3E%3Ccircle cx='20' cy='8' r='4'/%3E%3C/g%3E%3Cg fill='%23aa00d4'%3E%3Ccircle cx='32' cy='56' r='4'/%3E%3Ccircle cx='44' cy='20' r='4'/%3E%3Ccircle cx='44' cy='44' r='4'/%3E%3Ccircle cx='8' cy='32' r='4'/%3E%3Ccircle cx='56' cy='32' r='4'/%3E%3Ccircle cx='32' cy='8' r='4'/%3E%3Ccircle cx='20' cy='44' r='4'/%3E%3Ccircle cx='20' cy='20' r='4'/%3E%3C/g%3E%3Cg fill='%23660080'%3E%3Ccircle cx='8' cy='56' r='4'/%3E%3Ccircle cx='56' cy='8' r='4'/%3E%3Ccircle cx='56' cy='56' r='4'/%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3C/g%3E%3C/svg%3E";
 	// Bundled style
 	const std::string internalCSS =
-		"<style>\r\n"
+		"<style title=\"purple royale\">\r\n"
 ":root{"
 "--bodyfont:Open Sans,Noto Sans,Ubuntu,Segoe UI,sans-serif;"
 "--monospaced:Droid Sans Mono,Noto Mono,Lucida Console,DejaVu Sans Mono,monospace;"
@@ -859,12 +859,12 @@ namespace http {
 					s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
 					if (it->GetMeanLatency() >= 1000) {
 						s << std::fixed << std::setprecision(2);
-						s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
+						s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span> ";
 					} else {
-						s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
+						s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span> ";
 					}
 				} else { // placeholder for alignment
-					s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span>";
+					s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span> ";
 				}
 				ShowTunnelDetails(s, it->GetState (), false, it->GetNumReceivedBytes ());
 				s << "</span></div>\r\n";
@@ -878,12 +878,12 @@ namespace http {
 					s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
 					if (it->GetMeanLatency() >= 1000) {
 						s << std::fixed << std::setprecision(2);
-						s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
+						s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span> ";
 					} else {
-						s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
+						s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span> ";
 					}
 				} else { // placeholder for alignment
-					s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span>";
+					s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span> ";
 				}
 				ShowTunnelDetails(s, it->GetState (), false, it->GetNumSentBytes ());
 				s << "</span></div>\r\n";
@@ -1107,12 +1107,12 @@ namespace http {
 				s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
 				if (it->GetMeanLatency() >= 1000) {
 					s << std::fixed << std::setprecision(2);
-					s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
+					s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span> ";
 				} else {
-					s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
+					s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span> ";
 				}
 			} else { // placeholder for alignment
-				s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span>";
+				s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span> ";
 			}
 			ShowTunnelDetails(s, it->GetState (), (it->GetTunnelPool () == ExplPool), it->GetNumReceivedBytes ());
 			s << "</span></div>\r\n";
@@ -1126,12 +1126,12 @@ namespace http {
 				s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
 				if (it->GetMeanLatency() >= 1000) {
 					s << std::fixed << std::setprecision(2);
-					s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
+					s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span> ";
 				} else {
-					s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
+					s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span> ";
 				}
 			} else { // placeholder for alignment
-				s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span>";
+				s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---&nbsp;</span> ";
 			}
 			ShowTunnelDetails(s, it->GetState (), (it->GetTunnelPool () == ExplPool), it->GetNumSentBytes ());
 			s << "</span>\r\n</div>\r\n";
diff --git a/webconsole/style.css b/webconsole/style.css
index f681957b..e17dcd26 100644
--- a/webconsole/style.css
+++ b/webconsole/style.css
@@ -1,4 +1,4 @@
-/* "purple" console theme for i2pd */
+/* "purple royale" console theme for i2pd */
 /* Author: dr|z3d */
 
 :root {
@@ -93,11 +93,7 @@ body {
 	text-align: center;
 	font: 14pt var(--bodyfont);
 	color: var(--ink);
-	background: radial-gradient(circle at center, rgba(48,0,48,.3), rgba(0,0,0,.05)),
-				linear-gradient(to bottom, rgba(0,0,0,.3), rgba(32,0,32,.6), rgba(0,0,0,.3)), var(--page);
-	background: linear-gradient(to right, rgba(0,0,0,0), rgba(16,0,16,.3), rgba(0,0,0,0)),
-				linear-gradient(to bottom, rgba(0,0,0,.3), rgba(32,0,32,.6), rgba(0,0,0,.3));
-	background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(32,0,32,.3), rgba(0,0,0,.4));
+	background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(32,0,32,.1), rgba(0,0,0,.1));
 }
 
 .wrapper {
@@ -116,6 +112,10 @@ body {
 	position: relative;
 }
 
+a, label, button, #navlinks, .sectiontitle span, .chrome  {
+	user-select: none;
+}
+
 #shutdownbutton, #enabletransit, #disabletransit {
 	position: absolute;
 	top: 0;
@@ -847,6 +847,11 @@ table.services {
 
 span[data-tooltip] {
 	position: relative;
+	text-transform: capitalize;
+}
+
+span[data-tooltip]::after {
+	font-family: var(--bodyfont);
 }
 
 .hops {