diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f790440..c35a2c4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { nip19 } from 'nostr-tools';
 import { useAuthStore } from './stores/auth';
 import { useRouter } from 'vue-router';
 
 const auth = useAuthStore();
 const router = useRouter();
 
+// Hex pubkeys look identical at a glance across identities — npub is the
+// standard nostr display form and is what users actually recognize.
+const identityLabel = computed(() => {
+  if (auth.displayName) return auth.displayName;
+  if (!auth.pubkey) return '';
+  try {
+    const npub = nip19.npubEncode(auth.pubkey);
+    return npub.slice(0, 12) + '…' + npub.slice(-6);
+  } catch {
+    return auth.pubkey.slice(0, 8) + '…';
+  }
+});
+
 async function logout() {
   await auth.logout();
   router.push('/login');
@@ -23,7 +38,7 @@ async function logout() {
           <RouterLink to="/earnings" class="hover:text-orange-400">Earnings</RouterLink>
           <RouterLink to="/settings" class="hover:text-orange-400">Settings</RouterLink>
           <button class="btn-secondary !px-3 !py-1" @click="logout">
-            <span class="max-w-[8rem] truncate font-mono text-xs">{{ auth.displayName || auth.pubkey.slice(0, 8) + '…' }}</span>
+            <span class="max-w-[8rem] truncate font-mono text-xs" :title="auth.pubkey ?? undefined">{{ identityLabel }}</span>
             Logout
           </button>
         </nav>