diff --git a/src/layout/Shell.jsx b/src/layout/Shell.jsx
index d1b13a0..be88c18 100644
--- a/src/layout/Shell.jsx
+++ b/src/layout/Shell.jsx
@@ -5,6 +5,7 @@ import { rolesOf, visibleStages } from '../api/permissions.js'
 import { useStageCounts } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
 import AskDesk from '../components/AskDesk.jsx'
+import logo from '../assets/brand/zurich_logo.webp'
 
 
 /**
@@ -85,10 +86,10 @@ export default function Shell() {
         <button type="button" className="appbar__burger" aria-label="Open the menu" onClick={() => setOpen(true)}>
           <svg viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
         </button>
-        <div className="appbar__brand">
-          <span className="appbar__z" aria-hidden="true">Z</span>
-          <span className="appbar__word">ZURICH <span>kotak</span></span>
-        </div>
+        {/* The real mark rather than type set to look like it — see the
+            console's masthead. Bundled from src/assets, so the URL is
+            rewritten relative and resolves under the sub-path mount. */}
+        <img className="appbar__logo" src={logo} alt="Zurich Kotak General Insurance" />
         <button type="button" className="appbar__me" aria-label="Your account" onClick={() => setMe(true)}>
           {initials(user)}
         </button>
@@ -106,8 +107,7 @@ export default function Shell() {
               <button type="button" className="drawer__x" aria-label="Close the menu" onClick={() => setOpen(false)}>
                 <svg viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/></svg>
               </button>
-              <span className="appbar__z" aria-hidden="true">Z</span>
-              <span className="appbar__word">ZURICH <span>kotak</span></span>
+              <img className="appbar__logo" src={logo} alt="Zurich Kotak General Insurance" />
             </div>
             <div className="drawer__body">
               <NavLink to="/" end onClick={() => setOpen(false)} className={({ isActive }) => 'nav' + (isActive ? ' is-on' : '')}>
diff --git a/src/styles/app.css b/src/styles/app.css
index 8f2bf21..7cfe4ca 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -33,14 +33,14 @@ button { font: inherit; }
 }
 .appbar__burger svg { width: 22px; height: 22px; }
 .appbar__burger:active { background: rgba(255,255,255,.14); }
-.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.appbar__z {
-  width: 30px; height: 30px; flex: none; border-radius: 50%;
-  display: grid; place-items: center;
-  background: #fff; color: var(--zk-navy); font-weight: 700; font-size: 16px;
+.appbar__logo {
+  /* The mark as artwork, not as type. 26px on a 56px bar leaves a thumb-sized
+     burger to its left and the avatar to its right on a 390px screen; the
+     asset carries its own plate and both lines of the wordmark, so nothing is
+     set in type beside it. Used in the drawer head too, which is the same
+     navy bar. */
+  flex: none; display: block; height: 26px; width: auto; border-radius: 5px;
 }
-.appbar__word { font-size: 16px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
-.appbar__word span { font-weight: 400; letter-spacing: 0; opacity: .85; }
 .appbar__me {
   margin-left: auto; flex: none;
   width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;