diff --git a/app.css b/app.css
index 775a6d6..b9d7767 100644
--- a/app.css
+++ b/app.css
@@ -56,7 +56,12 @@ a.brand, a.brand:hover { color: #fff; text-decoration: none; }
 .side a.nav.on { background: #2a2b31; color: #fff; }
 .side .count { margin-left: auto; font-size: 12px; color: #8d8e93; }
 .side .foot { margin-top: auto; padding-top: 16px; border-top: 1px solid #2c2d32; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #8d8e93; }
-.side .foot button { background: none; border: 0; padding: 0; font: inherit; color: #c9c9c3; text-decoration: underline; cursor: pointer; }
+.side .acctrow { display: flex; align-items: center; gap: 4px; }
+.side .acctrow .acct { flex: 1; min-width: 0; }
+.side .signout { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #8d8e93; cursor: pointer; }
+.side .signout:hover { background: #222328; color: #fff; }
+.side .signout .tip { position: absolute; bottom: calc(100% + 6px); right: 0; padding: 3px 8px; border-radius: 5px; background: #000; color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
+.side .signout:hover .tip, .side .signout:focus-visible .tip { opacity: 1; }
 .side .acct { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 8px; color: #c9c9c3; text-decoration: none; }
 .side .acct:hover { background: #222328; color: #fff; }
 .side .acct.on { background: #2a2b31; color: #fff; }
diff --git a/app.js b/app.js
index 9d292ea..d20c908 100644
--- a/app.js
+++ b/app.js
@@ -48,6 +48,7 @@
     server: '<rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><path d="M7 7.5h.01M7 16.5h.01"/>',
     settings: '<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12"/><circle cx="16" cy="6" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="18" cy="18" r="2"/>',
     plus: '<path d="M12 5v14M5 12h14"/>',
+    logout: '<path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/><path d="M10 16l-4-4 4-4M6 12h10"/>',
   };
 
   // The Hannya mark: the horned demon mask of Noh. Same drawing as favicon.svg.
@@ -513,11 +514,12 @@
       srvBox,
       NAV.map(([href, ic, label]) => (navLinks[href] = h('a', { class: 'nav', href }, icon(ic), label, ic === 'peers' ? peerCount : null))),
       h('div', { class: 'foot' },
-        (navLinks['#/account'] = h('a', { class: 'acct', href: '#/account' },
-          h('span', { class: 'avatar', 'aria-hidden': 'true' }, me.name.slice(0, 1).toUpperCase()),
-          h('span', null, h('strong', null, me.name), h('span', null, 'My account')))),
+        h('div', { class: 'acctrow' },
+          (navLinks['#/account'] = h('a', { class: 'acct', href: '#/account' },
+            h('span', { class: 'avatar', 'aria-hidden': 'true' }, me.name.slice(0, 1).toUpperCase()),
+            h('span', null, h('strong', null, me.name), h('span', null, 'My account')))),
+          h('button', { type: 'button', class: 'signout', 'aria-label': 'Sign out', onClick: logout }, icon('logout'), h('span', { class: 'tip', 'aria-hidden': 'true' }, 'Sign out'))),
         h('div', { class: 'footrow' },
-          h('button', { type: 'button', onClick: logout }, 'Sign out'),
           h('span', null, 'v' + me.version.replace(/^v/, '')))));
     main = h('main', { class: 'main', id: 'main' });
     app.replaceChildren(h('div', { class: 'shell' }, nav, main));