diff --git a/core/client.js b/core/client.js
index 870f4b40..87fc09f5 100644
--- a/core/client.js
+++ b/core/client.js
@@ -344,22 +344,28 @@ class TfNavigationElement extends LitElement {
 					>🎛️</a
 				>
 				${this.render_permissions()}
+				${this.status?.message && !this.status.is_error
+					? html`
+						<link type="text/css" rel="stylesheet" href="/static/w3.css" />
+						<div class="w3-bar-item" style="color: ${this.status.color ?? kStatusColor}">${this.status.message}</div>
+						`
+					: undefined}
 				${Object.keys(this.spark_lines)
 					.sort()
 					.map((x) => this.spark_lines[x])}
 				${this.render_login()} ${this.render_identity()}
 			</div>
-				${this.status.message
-					? html`
-						<link type="text/css" rel="stylesheet" href="/static/w3.css" />
-						<div class="w3-model w3-animate-top" style="position: absolute; left: 50%; transform: translate(-50%); z-index: 1">
-							<dijv class="w3-modal-content w3-card-4" style="display: block; padding: 1em">
-								<span @click=${self.clear_error} class="w3-button w3-display-topright">&times;</span>
-								<div style="color: ${this.status.color ?? kErrorColor}"><b>ERROR:</b><p style="white-space: pre">${this.status.message}</p></div>
-							</div>
+			${this.status?.is_error
+				? html`
+					<link type="text/css" rel="stylesheet" href="/static/w3.css" />
+					<div class="w3-model w3-animate-top" style="position: absolute; left: 50%; transform: translate(-50%); z-index: 1">
+						<dijv class="w3-modal-content w3-card-4" style="display: block; padding: 1em">
+							<span @click=${self.clear_error} class="w3-button w3-display-topright">&times;</span>
+							<div style="color: ${this.status.color ?? kErrorColor}"><b>ERROR:</b><p style="white-space: pre">${this.status.message}</p></div>
 						</div>
-						`
-					: undefined}
+					</div>
+					`
+				: undefined}
 		`;
 	}
 }
@@ -1105,9 +1111,9 @@ function api_postMessage(message) {
 function api_error(error) {
 	if (error) {
 		if (typeof error == 'string') {
-			setStatusMessage('⚠️ ' + error, '#f00');
+			setStatusMessage('⚠️ ' + error, kErrorColor);
 		} else {
-			setStatusMessage('⚠️ ' + error.message + '\n' + error.stack, '#f00');
+			setStatusMessage('⚠️ ' + error.message + '\n' + error.stack, kErrorColor);
 		}
 	}
 	console.log('error', error);
@@ -1324,6 +1330,7 @@ function setStatusMessage(message, color) {
 	document.getElementsByTagName('tf-navigation')[0].status = {
 		message: message,
 		color: color,
+		is_error: color == kErrorColor,
 	};
 }