diff --git a/web/src/App.css b/web/src/App.css
index cc8f1a0..421fedc 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -76,12 +76,12 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
 .message-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; }
 .message-pane-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); }
 .messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; }
-.message { display: flex; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; }
+.message { display: grid; grid-template-columns: 44px 120px 1fr; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; }
 .message:hover { background: rgba(255,255,255,0.02); }
-.message-ts { color: var(--muted); font-size: 11px; min-width: 42px; flex-shrink: 0; }
-.message-alias { font-weight: 600; font-size: 13px; min-width: 100px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px 0 8px; flex-shrink: 0; }
+.message-ts { color: var(--muted); font-size: 11px; }
+.message-alias { font-weight: 600; font-size: 13px; text-align: right; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .message.mine .message-alias { color: var(--accent); }
-.message-text { flex: 1; word-break: break-word; font-size: 14px; color: var(--text); }
+.message-text { word-break: break-word; font-size: 14px; color: var(--text); }
 .compose { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
 .compose input { flex: 1; width: auto; }
 .compose button { flex-shrink: 0; }
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index c958f4f..9468676 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -87,9 +87,17 @@ export function Sidebar() {
       </div>
 
       <div className="sidebar-section sidebar-peers">
-        <span className="sidebar-label">Peers {connectedPeers.length > 0 && `· ${connectedPeers.length}`}</span>
+        <span className="sidebar-label">Peers · {connectedPeers.length + 1}</span>
+
+        {/* Self */}
+        <div className="peer-row peer-row-self">
+          <span className="peer-dot" style={{ background: 'var(--accent)' }} />
+          <span className="peer-row-alias" style={{ fontWeight: 700 }}>{displayAlias || '…'}</span>
+          <span className="peer-row-id">{displayId.slice(0, 8)}</span>
+        </div>
+
         {connectedPeers.length === 0 && (
-          <span className="sidebar-empty">no peers yet</span>
+          <span className="sidebar-empty">no peers connected</span>
         )}
         {connectedPeers.map(p => {
           const st = peerStatus[p.id]