diff --git a/index.html b/index.html
index 1928a32..8987116 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link id="harbor-favicon" rel="icon" href="/harbor-connect.svg" type="image/svg+xml" />
+    <link id="harbor-favicon" rel="icon" href="/harbor-connect.svg?v=2" type="image/svg+xml" sizes="any" />
     <title>Harbor</title>
   </head>
   <body>
diff --git a/src/web/App.jsx b/src/web/App.jsx
index f03ee56..e0de6ce 100644
--- a/src/web/App.jsx
+++ b/src/web/App.jsx
@@ -35,8 +35,8 @@ function App() {
     const isGateway = state.mode === 'gateway';
     document.title = isGateway ? 'Harbor Gateway' : 'Harbor Connect';
     document.getElementById('harbor-favicon').href = isGateway
-      ? '/harbor-gateway.svg'
-      : '/harbor-connect.svg';
+      ? '/harbor-gateway.svg?v=2'
+      : '/harbor-connect.svg?v=2';
   }, [state?.mode]);
 
   async function run(action) {
@@ -87,7 +87,7 @@ function App() {
   if (!state) return <div className="app-loading">Harbor</div>;
 
   return (
-    <div className="app client-app">
+    <div className={`app client-app${state.mode === 'gateway' ? ' is-gateway-app' : ''}`}>
       <div className="app-body client-mode">
         <main className="app-main">
           <ClientOverviewPage
diff --git a/src/web/styles.css b/src/web/styles.css
index fad6494..0ba8117 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -68,6 +68,10 @@ p {
   background: var(--client-bg);
 }
 
+.app.client-app.is-gateway-app {
+  --client-accent: var(--harbor-gateway);
+}
+
 .app-body.client-mode {
   min-height: 100vh;
   background: var(--client-bg);
@@ -180,6 +184,10 @@ p {
   stroke: var(--harbor-gateway);
 }
 
+.harbor-brand.is-gateway .harbor-anchor-left {
+  stroke: var(--harbor-gateway);
+}
+
 .harbor-brand strong {
   font-weight: 800;
 }
