diff --git a/neode-ui/mock-backend.js b/neode-ui/mock-backend.js
index 7a1fbd50..8977a89a 100755
--- a/neode-ui/mock-backend.js
+++ b/neode-ui/mock-backend.js
@@ -2032,6 +2032,7 @@ app.post('/rpc/v1', (req, res) => {
                   about: 'Self-sovereign Bitcoin node',
                   nip05: 'satoshi@archipelago.local',
                   lud16: 'satoshi@getalby.com',
+                  picture: '/demo-avatars/satoshi.svg',
                 },
               },
               {
@@ -2044,7 +2045,7 @@ app.post('/rpc/v1', (req, res) => {
                 is_default: false,
                 nostr_pubkey: 'f6e5d4c3b2a19876543210fedcba9876543210fedcba9876543210fedcba98',
                 nostr_npub: 'npub1mockanonidentitypubkeyvalue000000000000000000000000000xyz',
-                profile: { display_name: 'Anon' },
+                profile: { display_name: 'Anon', picture: '/demo-avatars/anon.svg' },
               },
               {
                 id: 'id-merchant',
@@ -2056,7 +2057,7 @@ app.post('/rpc/v1', (req, res) => {
                 is_default: false,
                 nostr_pubkey: '1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
                 nostr_npub: 'npub1mockmerchantidentitypubkeyvalue000000000000000000000000def',
-                profile: { display_name: 'My Shop', website: 'https://myshop.onion' },
+                profile: { display_name: 'My Shop', website: 'https://myshop.onion', picture: '/demo-avatars/business.svg' },
               },
             ],
           },
@@ -2079,6 +2080,7 @@ app.post('/rpc/v1', (req, res) => {
             profile: {
               display_name: 'Archipelago Node',
               about: 'Self-sovereign Bitcoin node',
+              picture: '/demo-avatars/satoshi.svg',
             },
           },
         })
@@ -2121,6 +2123,7 @@ app.post('/rpc/v1', (req, res) => {
                   about: 'Running a sovereign Bitcoin node',
                   nip05: 'satoshi@archipelago.local',
                   lud16: 'satoshi@getalby.com',
+                  picture: '/demo-avatars/satoshi.svg',
                 },
               },
               {
@@ -2136,6 +2139,7 @@ app.post('/rpc/v1', (req, res) => {
                 profile: {
                   display_name: 'Archy Consulting',
                   about: 'Bitcoin infrastructure services',
+                  picture: '/demo-avatars/business.svg',
                 },
               },
               {
@@ -2146,7 +2150,7 @@ app.post('/rpc/v1', (req, res) => {
                 did: 'did:key:z6MknGc3ocHs3zdPiJbnaaqDi5hjrZo4HzmQnwzaxWhAbWAs',
                 created_at: '2026-03-01T18:00:00Z',
                 is_default: false,
-                profile: {},
+                profile: { picture: '/demo-avatars/anon.svg' },
               },
             ],
           },
@@ -2163,7 +2167,7 @@ app.post('/rpc/v1', (req, res) => {
             nostr_pubkey: 'a1b2c3d4e5f6789012345678901234567890abcdef1234567890abcdef123456',
             nostr_npub: 'npub1598eg0y7m08htfzjfmzv6zjvf5u7p00dr9w0yfamaxqhkwlryckq5dh9ee',
             is_default: true, created_at: '2026-01-10T08:00:00Z',
-            profile: { display_name: 'Satoshi', about: 'Running a sovereign Bitcoin node' },
+            profile: { display_name: 'Satoshi', about: 'Running a sovereign Bitcoin node', picture: '/demo-avatars/satoshi.svg' },
           },
         }
         return res.json({ result: identities[id] || identities['id-primary'] })
@@ -2238,9 +2242,10 @@ app.post('/rpc/v1', (req, res) => {
 
       // Node visibility — interactive (persisted per demo session)
       case 'network.get-visibility': {
+        // No onion_address in the demo: the public showcase shouldn't display
+        // a Tor address (even a fake one) on the Node Visibility card.
         return res.json({ result: {
           visibility: mockState.nodeVisibility,
-          onion_address: mockData['server-info']['tor-address'],
         } })
       }
       case 'network.set-visibility': {
@@ -2248,7 +2253,6 @@ app.post('/rpc/v1', (req, res) => {
         if (['hidden', 'discoverable', 'public'].includes(v)) mockState.nodeVisibility = v
         return res.json({ result: {
           visibility: mockState.nodeVisibility,
-          onion_address: mockData['server-info']['tor-address'],
         } })
       }
 
diff --git a/neode-ui/public/demo-avatars/anon.svg b/neode-ui/public/demo-avatars/anon.svg
new file mode 100644
index 00000000..aaf1a694
--- /dev/null
+++ b/neode-ui/public/demo-avatars/anon.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#7e22ce;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#231133;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="fig" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#d8b4fe;stop-opacity:0.5" />
+    </linearGradient>
+  </defs>
+  <rect width="240" height="240" fill="url(#bg)"/>
+  <circle cx="120" cy="78" r="70" fill="rgba(255,255,255,0.06)"/>
+  <!-- hooded figure, face in shadow -->
+  <path d="M120 44 C86 44 72 76 72 106 L72 132 L168 132 L168 106 C168 76 154 44 120 44 Z" fill="url(#fig)"/>
+  <ellipse cx="120" cy="104" rx="30" ry="34" fill="rgba(35,17,51,0.9)"/>
+  <path d="M45 240 C45 182 78 150 120 150 C162 150 195 182 195 240 Z" fill="url(#fig)"/>
+</svg>
diff --git a/neode-ui/public/demo-avatars/business.svg b/neode-ui/public/demo-avatars/business.svg
new file mode 100644
index 00000000..c2b90038
--- /dev/null
+++ b/neode-ui/public/demo-avatars/business.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#c2540a;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3b1c0a;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="fig" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.85" />
+      <stop offset="100%" style="stop-color:#fdba74;stop-opacity:0.55" />
+    </linearGradient>
+  </defs>
+  <rect width="240" height="240" fill="url(#bg)"/>
+  <circle cx="120" cy="78" r="70" fill="rgba(255,255,255,0.06)"/>
+  <!-- head + suited shoulders -->
+  <circle cx="120" cy="92" r="38" fill="url(#fig)"/>
+  <path d="M45 240 C45 178 78 152 120 152 C162 152 195 178 195 240 Z" fill="url(#fig)"/>
+  <!-- collar + tie -->
+  <path d="M104 156 L120 176 L136 156 L120 148 Z" fill="rgba(59,28,10,0.85)"/>
+  <path d="M115 176 L125 176 L123 214 L120 220 L117 214 Z" fill="rgba(59,28,10,0.85)"/>
+</svg>
diff --git a/neode-ui/public/demo-avatars/satoshi.svg b/neode-ui/public/demo-avatars/satoshi.svg
new file mode 100644
index 00000000..9e3dcbe2
--- /dev/null
+++ b/neode-ui/public/demo-avatars/satoshi.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1d4ed8;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="fig" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.85" />
+      <stop offset="100%" style="stop-color:#93c5fd;stop-opacity:0.55" />
+    </linearGradient>
+  </defs>
+  <rect width="240" height="240" fill="url(#bg)"/>
+  <circle cx="120" cy="78" r="70" fill="rgba(255,255,255,0.06)"/>
+  <!-- head + shoulders -->
+  <circle cx="120" cy="92" r="38" fill="url(#fig)"/>
+  <path d="M45 240 C45 178 78 152 120 152 C162 152 195 178 195 240 Z" fill="url(#fig)"/>
+</svg>
diff --git a/neode-ui/src/views/server/OpenWrtGateway.vue b/neode-ui/src/views/server/OpenWrtGateway.vue
index 0b83bf28..1b091056 100644
--- a/neode-ui/src/views/server/OpenWrtGateway.vue
+++ b/neode-ui/src/views/server/OpenWrtGateway.vue
@@ -368,8 +368,10 @@ onMounted(() => load())
 
 <template>
   <div class="pb-6">
+    <!-- mb-0 overrides the pill's default mb-4, which pushed it above the
+         title's centerline in this inline header row. -->
     <div class="flex items-center gap-3 mb-6">
-      <BackButton @click="goBack" />
+      <BackButton desktop-margin="mb-0" @click="goBack" />
       <h1 class="text-lg font-semibold text-white">OpenWrt Gateway</h1>
     </div>
 
diff --git a/neode-ui/src/views/web5/Web5Identities.vue b/neode-ui/src/views/web5/Web5Identities.vue
index 1d232c31..79f60ec9 100644
--- a/neode-ui/src/views/web5/Web5Identities.vue
+++ b/neode-ui/src/views/web5/Web5Identities.vue
@@ -61,9 +61,91 @@
       <div
         v-for="(identity, idx) in managedIdentities"
         :key="identity.id"
-        :class="{ 'card-stagger': showStagger }" class="identity-row flex flex-col gap-3 p-4 bg-white/[0.08] rounded-lg"
+        :class="{ 'card-stagger': showStagger }"
         :style="{ '--stagger-index': idx }"
       >
+        <!-- Narrow containers (phones): profile-card layout with banner +
+             overlapping avatar. Hidden on wide containers where the classic
+             row below renders instead. -->
+        <div class="identity-card-m rounded-xl overflow-hidden bg-white/[0.08]">
+          <div class="relative h-16" :class="bannerFallback(identity)">
+            <img
+              v-if="identity.profile?.banner"
+              :src="displayableUrl(identity.profile.banner)"
+              class="absolute inset-0 w-full h-full object-cover"
+            />
+          </div>
+          <div class="px-4 pb-4">
+            <div class="flex items-end justify-between -mt-7">
+              <button @click="openProfileEditor(identity)" class="relative w-14 h-14 rounded-full overflow-hidden ring-4 ring-black/60 group shrink-0" title="Edit profile">
+                <img
+                  v-if="identity.profile?.picture && !listPictureFailed[identity.id]"
+                  :src="displayableUrl(identity.profile.picture)"
+                  class="w-full h-full object-cover"
+                  @error="() => { listPictureFailed[identity.id] = true }"
+                />
+                <div v-if="!identity.profile?.picture || listPictureFailed[identity.id]" class="w-full h-full flex items-center justify-center" :class="{
+                  'bg-blue-500/20': identity.purpose === 'personal',
+                  'bg-orange-500/20': identity.purpose === 'business',
+                  'bg-purple-500/20': identity.purpose === 'anonymous',
+                }">
+                  <span class="text-lg font-bold" :class="{
+                    'text-blue-400': identity.purpose === 'personal',
+                    'text-orange-400': identity.purpose === 'business',
+                    'text-purple-400': identity.purpose === 'anonymous',
+                  }">{{ identity.name.charAt(0).toUpperCase() }}</span>
+                </div>
+                <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
+                </div>
+              </button>
+              <div class="flex items-center gap-1 pt-8">
+                <button @click="openKeyViewer(identity)" class="p-2 rounded-lg text-white/50 hover:text-white hover:bg-white/10 transition-colors" title="View keys">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                  </svg>
+                </button>
+                <button v-if="!identity.is_default" @click="setDefaultIdentity(identity.id)" class="p-2 rounded-lg text-white/50 hover:text-yellow-400 hover:bg-white/10 transition-colors" title="Set as default">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                  </svg>
+                </button>
+                <button @click="confirmDeleteIdentity(identity)" class="p-2 rounded-lg text-white/50 hover:text-red-400 hover:bg-white/10 transition-colors" title="Delete">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div class="mt-2 flex items-center gap-2 flex-wrap min-w-0">
+              <span class="text-white font-semibold text-sm truncate">{{ identity.profile?.display_name || identity.name }}</span>
+              <span v-if="identity.is_default" class="text-yellow-400 text-xs" title="Default identity">&#9733;</span>
+              <span class="text-xs px-2 py-0.5 rounded-full capitalize" :class="{
+                'bg-blue-500/20 text-blue-300': identity.purpose === 'personal',
+                'bg-orange-500/20 text-orange-300': identity.purpose === 'business',
+                'bg-purple-500/20 text-purple-300': identity.purpose === 'anonymous',
+              }">{{ identity.purpose }}</span>
+            </div>
+            <p v-if="identity.profile?.about" class="text-white/60 text-xs mt-1 leading-relaxed">{{ identity.profile.about }}</p>
+            <div class="mt-2 space-y-0.5">
+              <div class="flex items-center gap-1 min-w-0">
+                <p class="text-white/50 text-xs font-mono truncate" :title="identity.did">{{ identity.did }}</p>
+                <button @click="copyIdentityDid(identity.did)" class="shrink-0 p-0.5 rounded text-white/30 hover:text-white/70 transition-colors" title="Copy DID">
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                </button>
+              </div>
+              <div v-if="identity.nostr_npub" class="flex items-center gap-1 min-w-0">
+                <p class="text-white/40 text-xs font-mono truncate" :title="identity.nostr_npub">{{ identity.nostr_npub }}</p>
+                <button @click="copyIdentityDid(identity.nostr_npub || '')" class="shrink-0 p-0.5 rounded text-white/30 hover:text-white/70 transition-colors" title="Copy npub">
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Wide containers: the original row — desktop appearance unchanged -->
+        <div class="identity-row flex flex-col gap-3 p-4 bg-white/[0.08] rounded-lg">
       <div class="identity-row-main flex items-center gap-4 min-w-0">
         <!-- Avatar -->
         <button @click="openProfileEditor(identity)" class="relative flex-shrink-0 w-10 h-10 rounded-full overflow-hidden group" title="Edit profile">
@@ -134,6 +216,7 @@
             </svg>
           </button>
         </div>
+        </div>
       </div>
     </div>
 
@@ -465,6 +548,16 @@ watch(() => profileForm.value.picture, () => { editorPictureFailed.value = false
 // Rewrite onion-rooted `/blob/<cid>` URLs (with or without capability
 // query) to same-origin `/blob/<cid>` so they render in this UI. Data
 // URLs and plain external URLs pass through untouched.
+// Gradient banner backdrop for the narrow profile card when the identity has
+// no banner image, tinted by purpose to match the avatar/chip colors.
+function bannerFallback(identity: ManagedIdentity): string {
+  switch (identity.purpose) {
+    case 'business': return 'bg-gradient-to-br from-orange-500/40 to-amber-500/15'
+    case 'anonymous': return 'bg-gradient-to-br from-purple-500/40 to-fuchsia-500/15'
+    default: return 'bg-gradient-to-br from-blue-500/40 to-indigo-500/15'
+  }
+}
+
 function displayableUrl(url: string | null | undefined): string {
   if (!url) return ''
   if (url.startsWith('data:') || url.startsWith('/')) return url
@@ -710,8 +803,21 @@ defineExpose({ loadIdentities, managedIdentities })
   container-name: identities-card;
 }
 
+/* Narrow containers (default): the profile card renders and the classic row
+   is hidden. Wide containers: the original desktop row — untouched — and the
+   profile card hides. Doubled selectors out-rank the Tailwind utilities on
+   the same elements regardless of stylesheet order. */
+.identities-card .identity-row {
+  display: none;
+}
+
 @container identities-card (min-width: 560px) {
-  .identity-row {
+  .identities-card .identity-card-m {
+    display: none;
+  }
+
+  .identities-card .identity-row {
+    display: flex;
     flex-direction: row;
     align-items: center;
     gap: 1rem;
diff --git a/neode-ui/src/views/web5/Web5NodeVisibility.vue b/neode-ui/src/views/web5/Web5NodeVisibility.vue
index 0574e5e9..afde2f50 100644
--- a/neode-ui/src/views/web5/Web5NodeVisibility.vue
+++ b/neode-ui/src/views/web5/Web5NodeVisibility.vue
@@ -1,27 +1,36 @@
 <template>
   <!-- Node Visibility -->
   <div data-controller-container tabindex="0" :class="{ 'card-stagger': showStagger }" class="glass-card p-6 flex flex-col" style="--stagger-index: 3">
-    <div class="flex items-start gap-4 mb-4 shrink-0">
-      <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
-        <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-        </svg>
-      </div>
-      <div class="flex-1 min-w-0">
-        <h2 class="text-xl font-semibold text-white mb-2">{{ t('web5.nodeVisibility') }}</h2>
-        <p class="text-white/70 text-sm">
-          Make your node publicly discoverable. When enabled, anyone on the Nostr
-          network can find your node and request a connection — requests always
-          wait for your approval and join as a Peer, never trusted.
-        </p>
-      </div>
-      <div v-if="visibilityLoading" class="shrink-0">
-        <svg class="animate-spin h-5 w-5 text-white/40" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
+    <div class="mb-4 shrink-0">
+      <div class="flex items-center sm:items-start gap-4">
+        <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
+          <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <h2 class="text-xl font-semibold text-white sm:mb-2">{{ t('web5.nodeVisibility') }}</h2>
+          <!-- Desktop: description beside the icon, as before -->
+          <p class="hidden sm:block text-white/70 text-sm">
+            Make your node publicly discoverable. When enabled, anyone on the Nostr
+            network can find your node and request a connection — requests always
+            wait for your approval and join as a Peer, never trusted.
+          </p>
+        </div>
+        <div v-if="visibilityLoading" class="shrink-0">
+          <svg class="animate-spin h-5 w-5 text-white/40" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
       </div>
+      <!-- Mobile: description stacked under the icon + title -->
+      <p class="sm:hidden mt-3 text-white/70 text-sm">
+        Make your node publicly discoverable. When enabled, anyone on the Nostr
+        network can find your node and request a connection — requests always
+        wait for your approval and join as a Peer, never trusted.
+      </p>
     </div>
 
     <!-- Enable switch -->
@@ -57,16 +66,7 @@
 
     <!-- Discoverable nodes -->
     <div v-if="discoverEnabled" class="mt-4 flex-1 min-h-0">
-      <div class="flex items-center justify-between mb-2">
-        <p class="text-sm font-medium text-white">Discoverable nodes</p>
-        <button
-          class="px-2.5 py-1 glass-button glass-button-sm rounded text-xs text-white/90 hover:text-white disabled:opacity-50"
-          :disabled="discovering"
-          @click="discoverNodes"
-        >
-          {{ discovering ? 'Searching…' : 'Refresh' }}
-        </button>
-      </div>
+      <p class="text-sm font-medium text-white mb-2">Discoverable nodes</p>
       <div v-if="discovering && discoveredNodes.length === 0" class="py-4 text-center text-white/45 text-xs">
         Searching relays…
       </div>
@@ -95,10 +95,15 @@
       </div>
     </div>
 
-    <!-- Warning -->
-    <p v-if="discoverEnabled" class="mt-3 text-xs text-amber-400/80">
-      {{ t('web5.discoverableWarning') }}
-    </p>
+    <!-- Refresh — full-width card action on every screen size -->
+    <button
+      v-if="discoverEnabled"
+      class="mt-4 w-full glass-button rounded-lg py-2.5 text-sm font-medium text-white/90 hover:text-white disabled:opacity-50"
+      :disabled="discovering"
+      @click="discoverNodes"
+    >
+      {{ discovering ? 'Searching…' : 'Refresh' }}
+    </button>
 
     <PeerRequestModal
       :show="requestModalTarget !== null"