diff --git a/pkg/service/soundtouchweb/static/css/app.css b/pkg/service/soundtouchweb/static/css/app.css
index a7998a9..f4fa05e 100644
--- a/pkg/service/soundtouchweb/static/css/app.css
+++ b/pkg/service/soundtouchweb/static/css/app.css
@@ -146,6 +146,37 @@ img { display: block; max-width: 100%; }
     font-family: monospace;
 }
 
+/* Small screens (phones, portrait): the absolutely-centered page title and the
+   right-aligned icon bar share the same space in the fixed-height navbar and
+   collide (#500). Let the navbar wrap into two rows: row 1 keeps the logo with
+   the title beside it (the title fills the remaining width and ellipsizes), and
+   the icon bar drops onto its own full-width row below. */
+@media (max-width: 600px) {
+    .navbar {
+        flex-wrap: wrap;
+        height: auto;
+        min-height: 52px;
+        row-gap: 0.25rem;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+    }
+
+    .page-title {
+        position: static;
+        transform: none;
+        flex: 1 1 auto;   /* sit next to the logo and fill the rest of row 1 */
+        width: auto;
+        min-width: 0;     /* allow the title to shrink + ellipsize */
+    }
+
+    .nav-links {
+        order: 1;          /* force the icon bar onto its own row below */
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+}
+
 .nav-logo {
     width: 24px;
     height: 24px;
diff --git a/pkg/service/soundtouchweb/static/js/components/Zone.js b/pkg/service/soundtouchweb/static/js/components/Zone.js
index cc547e3..c32dedf 100644
--- a/pkg/service/soundtouchweb/static/js/components/Zone.js
+++ b/pkg/service/soundtouchweb/static/js/components/Zone.js
@@ -52,7 +52,7 @@ export function Zone({ deviceId, devices }) {
     const zoneIps = new Set([zone.masterIp, ...(zone.members || []).map(m => m.ip)].filter(Boolean));
     const available = Object.entries(devices || {}).filter(([ip]) => !zoneIps.has(ip));
 
-    const deviceName = (ip) => devices[ip]?.info?.Name ?? ip;
+    const deviceName = (ip) => devices[ip]?.info?.name || ip;
 
     return html`
         <div class="zone-section">
@@ -76,7 +76,7 @@ export function Zone({ deviceId, devices }) {
                     ${(zone.members || []).map(m => html`
                         <div class="zone-member" key=${m.ip}>
                             <span class="zone-badge slave">Member</span>
-                            <span class="zone-member-name">${m.name || m.ip}</span>
+                            <span class="zone-member-name">${m.name || deviceName(m.ip)}</span>
                             <button class="btn-icon zone-remove" title="Remove from zone"
                                 onClick=${() => removeDevice(m.ip)}>✕</button>
                         </div>
@@ -93,7 +93,7 @@ export function Zone({ deviceId, devices }) {
             ${zone.isSlave && html`
                 <div class="zone-row">
                     <span class="zone-badge slave">Member</span>
-                    <span class="zone-member-name">Zone: ${zone.masterName || zone.masterIp}</span>
+                    <span class="zone-member-name">Zone: ${zone.masterName || deviceName(zone.masterIp)}</span>
                     <button class="btn-secondary zone-btn" onClick=${leave}>Leave zone</button>
                 </div>
             `}
@@ -105,7 +105,10 @@ export function Zone({ deviceId, devices }) {
                         <div class="picker-devices">
                             ${available.map(([ip, d]) => html`
                                 <button class="picker-device-btn" key=${ip} onClick=${() => addDevice(ip)}>
-                                    ${d.info?.Name ?? ip}
+                                    <div class="picker-device-info">
+                                        <span class="picker-device-name">${d.info?.name || ip}</span>
+                                        <span class="picker-device-ip">${d.info?.ip_address || ip}</span>
+                                    </div>
                                 </button>
                             `)}
                         </div>