security+feat: v1.3.0 — pentest remediation, container reliability, UI overhaul

Security (33 pentest findings addressed): - CRITICAL: backend binds 127.0.0.1, path traversal in tor.rs/dwn fixed - HIGH: federation requires signatures, XSS login redirect, RBAC viewer restricted - HIGH: tar slip prevention, S3 SSRF validation, backup ID validation - MEDIUM: remember-me random secret, TOTP session rotation, password re-auth - LOW: CSP unsafe-inline removed, CORS dev-only, onion/webhook validation Container reliability: - Memory limits on all 37 containers (OOM prevention) - Exited vs stopped state distinction with health-aware status badges - Crash recovery coordination (no more restart cascade) - User-stopped tracking survives reboots - Tiered boot recovery (databases → core → services → apps) UI: - Wallet TransactionsModal, health-aware app status badges - Restart button on containers, exited/crashed red state - Mesh view overhaul, glass button updates, BaseModal/ToggleSwitch - Apps sticky header removed, dev faucet, mutable mock wallet Infrastructure: - LND REST port 8080 exposed over Tor (LND Connect fix) - Nginx cookie_session fix, deploy script Tor config updated - Dev environment: podman auto-start, boot mode simulation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 12:44:31 +00:00
parent d1b48388fb
commit 1a74a930f7
77 changed files with 2485 additions and 966 deletions
--- a/neode-ui/dev-dist/sw.js
+++ b/neode-ui/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict';
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
-    "revision": "0.g6vfn35hb3c"
+    "revision": "0.3ur9h1c6gak"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
--- a/neode-ui/mock-backend.js
+++ b/neode-ui/mock-backend.js
@@ -343,6 +343,7 @@ async function getDockerContainers() {
        version: '1.0.0',
        status: isRunning ? 'running' : 'stopped',
        state: isRunning ? 'running' : 'stopped',
+        health: isRunning ? 'healthy' : null,
        'static-files': {
          license: 'MIT',
          instructions: metadata.description,
--- a/neode-ui/public/assets/icon/web5.svg
+++ b/neode-ui/public/assets/icon/web5.svg
@@ -0,0 +1,3 @@
+<svg width="1631" height="1624" viewBox="0 0 1631 1624" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M914.932 359.228H916.229V715.252H1630.47V1088.98H1451.41V1267.98H1274.33V1445H1093.31V1624H715.534V1264.77H714.237V908.748H0V535.02H179.051V356.025H356.135V178.996H537.154V0H914.932V359.228ZM916.229 1425.33H1073.64V1248.31H1254.66V1071.28H1431.74V913.918H916.229V1425.33ZM556.83 375.695H375.811V552.723H198.727V710.082H714.237V198.666H556.83V375.695Z" fill="currentColor"/>
+</svg>
--- a/neode-ui/src/components/AppLauncherOverlay.vue
+++ b/neode-ui/src/components/AppLauncherOverlay.vue
@@ -141,15 +141,15 @@
                    </div>
                  </div>

-                  <div v-if="paymentError" class="mb-3 p-2 bg-red-500/15 border border-red-500/20 rounded-lg">
-                    <p class="text-red-400 text-xs">{{ paymentError }}</p>
+                  <div v-if="paymentError" class="mb-3 alert-error">
+                    <p class="text-xs">{{ paymentError }}</p>
                  </div>

                  <div class="flex gap-3">
                    <button @click="rejectPayment" class="flex-1 px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-sm text-white/70 hover:bg-white/10 transition-colors">
                      Deny
                    </button>
-                    <button @click="approvePayment" :disabled="paymentProcessing" class="flex-1 px-4 py-2.5 bg-orange-500/20 border border-orange-500/30 rounded-lg text-sm font-medium text-orange-300 hover:bg-orange-500/30 transition-colors disabled:opacity-50">
+                    <button @click="approvePayment" :disabled="paymentProcessing" class="flex-1 px-4 py-2.5 glass-button glass-button-warning rounded-lg text-sm font-medium disabled:opacity-50">
                      {{ paymentProcessing ? 'Paying...' : 'Approve' }}
                    </button>
                  </div>
--- a/neode-ui/src/components/BaseModal.vue
+++ b/neode-ui/src/components/BaseModal.vue
@@ -0,0 +1,89 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 flex items-center justify-center p-4"
+        :class="zClass"
+        @click.self="close"
+      >
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+        <div
+          ref="modalRef"
+          class="glass-card p-6 w-full relative z-10"
+          :class="[maxWidth, contentClass]"
+          role="dialog"
+          aria-modal="true"
+          @click.stop
+        >
+          <div class="flex items-start justify-between gap-4 mb-4 shrink-0">
+            <h3 class="text-xl font-semibold text-white">{{ title }}</h3>
+            <button
+              @click="close"
+              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
+              aria-label="Close"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <slot />
+          <slot name="footer" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useModalKeyboard } from '@/composables/useModalKeyboard'
+
+const props = withDefaults(defineProps<{
+  show: boolean
+  title: string
+  maxWidth?: string
+  zIndex?: string
+  contentClass?: string
+}>(), {
+  maxWidth: 'max-w-md',
+  zIndex: 'z-[3000]',
+  contentClass: '',
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const modalRef = ref<HTMLElement | null>(null)
+
+const zClass = computed(() => props.zIndex)
+
+function close() {
+  emit('close')
+}
+
+useModalKeyboard(modalRef, computed(() => props.show), close)
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+.modal-enter-active .glass-card,
+.modal-leave-active .glass-card {
+  transition: transform 0.2s ease;
+}
+.modal-enter-from .glass-card {
+  transform: scale(0.95);
+}
+.modal-leave-to .glass-card {
+  transform: scale(0.95);
+}
+</style>
--- a/neode-ui/src/components/EasyHome.vue
+++ b/neode-ui/src/components/EasyHome.vue
@@ -12,7 +12,18 @@
      :style="{ '--card-stagger': idx }"
    >
      <div class="flex items-start justify-between mb-4">
-        <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
+        <!-- App icons for goals with required apps, emoji fallback otherwise -->
+        <div v-if="goalAppIcons(goal).length > 0" class="flex items-center gap-1.5 shrink-0">
+          <img
+            v-for="icon in goalAppIcons(goal)"
+            :key="icon.appId"
+            :src="icon.url"
+            :alt="icon.appId"
+            class="w-8 h-8 rounded-lg object-contain bg-white/5 border border-white/10 p-0.5"
+            @error="($event.target as HTMLImageElement).style.display = 'none'"
+          />
+        </div>
+        <div v-else class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
          <span class="text-xl">{{ goalIcon(goal.icon) }}</span>
        </div>
        <span class="goal-status-badge" :class="statusBadgeClass(goal.id)">
@@ -28,7 +39,7 @@
      <div class="flex items-center justify-between">
        <span class="text-xs text-white/40">{{ goal.estimatedTime }}</span>
        <span class="text-xs text-white/50 flex items-center gap-1">
-          {{ goal.difficulty === 'beginner' ? 'Beginner' : 'Intermediate' }}
+          {{ goal.difficulty === 'beginner' ? t('easyHome.beginner') : t('easyHome.intermediate') }}
        </span>
      </div>
    </RouterLink>
@@ -37,18 +48,40 @@

 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { GOALS } from '@/data/goals'
 import { useGoalStore } from '@/stores/goals'
+import type { GoalDefinition } from '@/types/goals'

 defineProps<{
  show: boolean
  animate: boolean
 }>()

+const { t } = useI18n()
 const goalStore = useGoalStore()
 const goals = GOALS
 const goalStatuses = goalStore.goalStatuses

+/** Map appId to its icon file path under /assets/img/app-icons/ */
+const APP_ICON_MAP: Record<string, string> = {
+  'bitcoin-knots': '/assets/img/app-icons/bitcoin-knots.webp',
+  lnd: '/assets/img/app-icons/lnd.svg',
+  'btcpay-server': '/assets/img/app-icons/btcpay-server.png',
+  immich: '/assets/img/app-icons/immich.png',
+  nextcloud: '/assets/img/app-icons/nextcloud.webp',
+  fedimint: '/assets/img/app-icons/fedimint.png',
+  mempool: '/assets/img/app-icons/mempool.webp',
+  electrs: '/assets/img/app-icons/electrs.svg',
+  'nostr-rs-relay': '/assets/img/app-icons/nostr-rs-relay.svg',
+}
+
+function goalAppIcons(goal: GoalDefinition): { appId: string; url: string }[] {
+  return goal.requiredApps
+    .filter((appId) => APP_ICON_MAP[appId] !== undefined)
+    .map((appId) => ({ appId, url: APP_ICON_MAP[appId] as string }))
+}
+
 function goalIcon(icon: string): string {
  const icons: Record<string, string> = {
    shop: '🏪',
@@ -64,9 +97,9 @@ function goalIcon(icon: string): string {

 function statusLabel(goalId: string): string {
  const status = goalStatuses[goalId]
-  if (status === 'completed') return 'Done'
-  if (status === 'in-progress') return 'In Progress'
-  return 'Start'
+  if (status === 'completed') return t('easyHome.done')
+  if (status === 'in-progress') return t('easyHome.inProgress')
+  return t('easyHome.start')
 }

 function statusBadgeClass(goalId: string): string {
--- a/neode-ui/src/components/HelpGuideModal.vue
+++ b/neode-ui/src/components/HelpGuideModal.vue
@@ -1,29 +1,5 @@
 <template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="show"
-        class="fixed inset-0 z-[3000] flex items-center justify-center p-4"
-        @click="$emit('close')"
-      >
-        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-        <div
-          ref="modalRef"
-          @click.stop
-          class="glass-card p-6 max-w-lg w-full relative z-10 max-h-[80vh] overflow-y-auto"
-        >
-          <div class="flex items-start justify-between gap-4 mb-4">
-            <h3 class="text-xl font-semibold text-white">{{ title }}</h3>
-            <button
-              @click="$emit('close')"
-              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
-              aria-label="Close"
-            >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
+  <BaseModal :show="show" :title="title" max-width="max-w-lg" content-class="max-h-[80vh] overflow-y-auto" @close="$emit('close')">
          <div class="text-white/80 prose prose-invert max-w-none">
            <p class="whitespace-pre-wrap">{{ content }}</p>
          </div>
@@ -39,27 +15,20 @@
              </svg>
            </router-link>
          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  </BaseModal>
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import BaseModal from '@/components/BaseModal.vue'

-const props = defineProps<{
+defineProps<{
  show: boolean
  title: string
  content: string
  relatedPath?: string
 }>()

-const emit = defineEmits<{
+defineEmits<{
  close: []
 }>()
-
-const modalRef = ref<HTMLElement | null>(null)
-useModalKeyboard(modalRef, computed(() => props.show), () => emit('close'))
 </script>
--- a/neode-ui/src/components/PWAUpdatePrompt.vue
+++ b/neode-ui/src/components/PWAUpdatePrompt.vue
@@ -1,59 +1,33 @@
 <template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="showUpdatePrompt"
-        class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
-        @click.self="dismissUpdate"
-      >
-        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-        <div
-          ref="modalRef"
-          class="glass-card p-6 max-w-md w-full relative z-10"
-          @click.stop
-        >
-          <div class="flex items-start justify-between gap-4 mb-4">
-            <h3 class="text-xl font-semibold text-white">Update Available</h3>
-            <button
-              @click="dismissUpdate"
-              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
-              aria-label="Dismiss"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
+  <BaseModal :show="showUpdatePrompt" title="Update Available" z-index="z-[9999]" @close="dismissUpdate">
          <p class="text-white/80 mb-6">
            A new version of Archipelago is available. Update now to get the latest features and fixes.
          </p>
-          <div class="flex gap-3 justify-end">
-            <button
-              @click="dismissUpdate"
-              class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
-            >
-              Later
-            </button>
-            <button
-              @click="handleUpdate"
-              class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
-            >
-              Update Now
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+          <template #footer>
+            <div class="flex gap-3 justify-end">
+              <button
+                @click="dismissUpdate"
+                class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
+              >
+                Later
+              </button>
+              <button
+                @click="handleUpdate"
+                class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
+              >
+                Update Now
+              </button>
+            </div>
+          </template>
+  </BaseModal>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import BaseModal from '@/components/BaseModal.vue'

 const showUpdatePrompt = ref(false)
 let updateCallback: (() => Promise<void>) | null = null
-const modalRef = ref<HTMLElement | null>(null)

 onMounted(() => {
  // Listen for service worker updates
@@ -106,8 +80,6 @@ onMounted(() => {
  }
 })

-useModalKeyboard(modalRef, showUpdatePrompt, dismissUpdate)
-
 function dismissUpdate() {
  showUpdatePrompt.value = false
 }
--- a/neode-ui/src/components/ReceiveBitcoinModal.vue
+++ b/neode-ui/src/components/ReceiveBitcoinModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <Teleport to="body">
-    <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="close" @keydown.escape="close">
-      <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true">
-        <h2 class="text-lg font-bold text-white mb-4">{{ t('web5.receiveBitcoinTitle') }}</h2>
-
+  <BaseModal :show="show" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
        <!-- Method tabs -->
        <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
          <button
@@ -12,24 +8,24 @@
            @click="receiveMethod = m"
            class="flex-1 px-2 py-1.5 rounded text-xs font-medium capitalize transition-colors"
            :class="receiveMethod === m ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
-          >{{ m === 'onchain' ? 'On-chain' : m }}</button>
+          >{{ m === 'onchain' ? t('receiveBitcoin.onChain') : m === 'lightning' ? t('receiveBitcoin.lightning') : t('receiveBitcoin.ecash') }}</button>
        </div>

        <!-- Lightning -->
        <div v-if="receiveMethod === 'lightning'">
          <div class="mb-3">
-            <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
-            <input v-model.number="invoiceAmount" type="number" min="1" placeholder="1000" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.amountSats') }}</label>
+            <input v-model.number="invoiceAmount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
          </div>
          <div class="mb-3">
-            <label class="text-white/60 text-sm block mb-1">Memo (optional)</label>
-            <input v-model="invoiceMemo" type="text" placeholder="Payment for..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.memoOptional') }}</label>
+            <input v-model="invoiceMemo" type="text" :placeholder="t('receiveBitcoin.memoPlaceholder')" class="w-full input-glass" />
          </div>
          <div v-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
            <canvas ref="lightningQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
-            <p class="text-white/50 text-xs mb-1">Invoice (share with sender):</p>
+            <p class="text-white/50 text-xs mb-1">{{ t('receiveBitcoin.invoiceShareLabel') }}</p>
            <p class="text-xs font-mono text-white/80 break-all">{{ invoiceResult }}</p>
-            <button @click="copyText(invoiceResult)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
+            <button @click="copyText(invoiceResult)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
          </div>
        </div>

@@ -37,9 +33,9 @@
        <div v-if="receiveMethod === 'onchain'">
          <div v-if="onchainAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
            <canvas ref="onchainQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
-            <p class="text-white/50 text-xs mb-2">Your Bitcoin address:</p>
+            <p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.yourBitcoinAddress') }}</p>
            <p class="text-sm font-mono text-white/90 break-all">{{ onchainAddress }}</p>
-            <button @click="copyText(onchainAddress)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
+            <button @click="copyText(onchainAddress)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
          </div>
          <div v-else class="mb-3 text-center">
            <p class="text-white/50 text-sm mb-2">{{ t('web5.generateFreshAddress') }}</p>
@@ -49,29 +45,28 @@
        <!-- Ecash -->
        <div v-if="receiveMethod === 'ecash'">
          <div class="mb-3">
-            <label class="text-white/60 text-sm block mb-1">Paste ecash token</label>
-            <textarea v-model="ecashToken" rows="3" placeholder="cashuSend_..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"></textarea>
+            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.pasteEcashToken') }}</label>
+            <textarea v-model="ecashToken" rows="3" placeholder="cashuSend_..." class="w-full input-glass font-mono"></textarea>
          </div>
          <div v-if="ecashResult" class="mb-3 text-xs text-green-400">{{ ecashResult }}</div>
        </div>

-        <div v-if="error" class="mb-3 text-xs text-red-400">{{ error }}</div>
+        <div v-if="error" class="mb-3 alert-error">{{ error }}</div>

        <div class="flex gap-3">
          <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-          <button @click="receive" :disabled="processing" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-green-500/20 border-green-500/30 disabled:opacity-50">
-            {{ processing ? 'Processing...' : receiveMethod === 'onchain' ? 'Generate Address' : receiveMethod === 'lightning' ? 'Create Invoice' : 'Receive' }}
+          <button @click="receive" :disabled="processing" class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
+            {{ processing ? t('receiveBitcoin.processing') : receiveMethod === 'onchain' ? t('receiveBitcoin.generateAddress') : receiveMethod === 'lightning' ? t('receiveBitcoin.createInvoice') : t('receiveBitcoin.receive') }}
          </button>
        </div>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>

 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
+import BaseModal from '@/components/BaseModal.vue'

 const { t } = useI18n()

@@ -120,7 +115,7 @@ async function receive() {
  error.value = ''
  try {
    if (receiveMethod.value === 'lightning') {
-      if (!invoiceAmount.value) { error.value = 'Enter an amount'; return }
+      if (!invoiceAmount.value) { error.value = t('receiveBitcoin.enterAnAmount'); return }
      const res = await rpcClient.call<{ payment_request: string }>({
        method: 'lnd.addinvoice',
        params: { amount_sats: invoiceAmount.value, memo: invoiceMemo.value || undefined },
@@ -132,12 +127,12 @@ async function receive() {
      onchainAddress.value = res.address
      nextTick(() => renderQr(res.address, onchainQrCanvas.value, 'bitcoin:'))
    } else {
-      if (!ecashToken.value.trim()) { error.value = 'Paste an ecash token'; return }
+      if (!ecashToken.value.trim()) { error.value = t('receiveBitcoin.pasteAnEcashToken'); return }
      await rpcClient.call<{ amount_sats: number }>({
        method: 'wallet.ecash-receive',
        params: { token: ecashToken.value.trim() },
      })
-      ecashResult.value = 'Token received successfully!'
+      ecashResult.value = t('receiveBitcoin.tokenReceivedSuccess')
      emit('received')
    }
  } catch (err: unknown) {
--- a/neode-ui/src/components/SendBitcoinModal.vue
+++ b/neode-ui/src/components/SendBitcoinModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <Teleport to="body">
-    <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="close" @keydown.escape="close">
-      <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true">
-        <h2 class="text-lg font-bold text-white mb-4">{{ t('web5.sendBitcoinTitle') }}</h2>
-
+  <BaseModal :show="show" :title="t('web5.sendBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
        <!-- Method tabs -->
        <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
          <button
@@ -12,55 +8,54 @@
            @click="sendMethod = m"
            class="flex-1 px-2 py-1.5 rounded text-xs font-medium capitalize transition-colors"
            :class="sendMethod === m ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
-          >{{ m === 'onchain' ? 'On-chain' : m }}</button>
+          >{{ m === 'onchain' ? t('sendBitcoin.onChain') : m === 'lightning' ? t('sendBitcoin.lightning') : m === 'ecash' ? t('sendBitcoin.ecash') : t('sendBitcoin.auto') }}</button>
        </div>

        <div v-if="sendMethod === 'auto'" class="mb-3 p-2 bg-white/5 rounded-lg">
-          <p class="text-xs text-white/50">Auto-selects method based on amount: ecash &lt; 1k sats, Lightning 1k–500k, on-chain &gt; 500k</p>
+          <p class="text-xs text-white/50">{{ t('sendBitcoin.autoMethodDesc') }}</p>
        </div>

        <div class="mb-3">
-          <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
-          <input v-model.number="amount" type="number" min="1" placeholder="1000" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+          <label class="text-white/60 text-sm block mb-1">{{ t('sendBitcoin.amountSats') }}</label>
+          <input v-model.number="amount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
        </div>

        <div v-if="effectiveMethod !== 'ecash'" class="mb-3">
          <label class="text-white/60 text-sm block mb-1">
-            {{ effectiveMethod === 'lightning' ? 'Lightning Invoice (BOLT11)' : 'Bitcoin Address' }}
+            {{ effectiveMethod === 'lightning' ? t('sendBitcoin.lightningInvoice') : t('sendBitcoin.bitcoinAddress') }}
          </label>
-          <textarea v-model="dest" rows="2" :placeholder="effectiveMethod === 'lightning' ? 'lnbc...' : 'bc1...'" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-white/30"></textarea>
+          <textarea v-model="dest" rows="2" :placeholder="effectiveMethod === 'lightning' ? 'lnbc...' : 'bc1...'" class="w-full input-glass font-mono"></textarea>
        </div>

        <div v-if="ecashToken && effectiveMethod === 'ecash'" class="mb-3 p-2 bg-white/5 rounded-lg">
-          <p class="text-white/50 text-xs mb-1">Token (share with recipient):</p>
+          <p class="text-white/50 text-xs mb-1">{{ t('sendBitcoin.tokenShareLabel') }}</p>
          <p class="text-xs font-mono text-white/80 break-all">{{ ecashToken }}</p>
-          <button @click="copyText(ecashToken)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
+          <button @click="copyText(ecashToken)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
        </div>

-        <div v-if="resultTxid" class="mb-3 p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
-          <p class="text-green-400 text-xs">Sent! TX: {{ resultTxid }}</p>
+        <div v-if="resultTxid" class="mb-3 alert-success">
+          <p class="text-xs">{{ t('sendBitcoin.sentTx', { txid: resultTxid }) }}</p>
        </div>
-        <div v-if="resultHash" class="mb-3 p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
-          <p class="text-green-400 text-xs">Paid! Hash: {{ resultHash }}</p>
+        <div v-if="resultHash" class="mb-3 alert-success">
+          <p class="text-xs">{{ t('sendBitcoin.paidHash', { hash: resultHash }) }}</p>
        </div>

-        <div v-if="error" class="mb-3 text-xs text-red-400">{{ error }}</div>
+        <div v-if="error" class="mb-3 alert-error">{{ error }}</div>

        <div class="flex gap-3">
          <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-          <button @click="send" :disabled="processing || !amount" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
-            {{ processing ? 'Sending...' : 'Send' }}
+          <button @click="send" :disabled="processing || !amount" class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
+            {{ processing ? t('common.sending') : t('common.send') }}
          </button>
        </div>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>

 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
+import BaseModal from '@/components/BaseModal.vue'

 const { t } = useI18n()

--- a/neode-ui/src/components/ToggleSwitch.vue
+++ b/neode-ui/src/components/ToggleSwitch.vue
@@ -0,0 +1,25 @@
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="modelValue"
+    class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
+    :class="modelValue ? 'bg-orange-500' : 'bg-white/15'"
+    @click="$emit('update:modelValue', !modelValue)"
+  >
+    <div
+      class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+      :class="modelValue ? 'translate-x-5' : 'translate-x-1'"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
--- a/neode-ui/src/components/TransactionsModal.vue
+++ b/neode-ui/src/components/TransactionsModal.vue
@@ -0,0 +1,116 @@
+<template>
+  <BaseModal :show="show" :title="t('transactions.title')" max-width="max-w-2xl" content-class="max-h-[90vh] flex flex-col" @close="close">
+        <div v-if="transactions.length === 0" class="flex-1 flex items-center justify-center py-12">
+          <p class="text-white/40 text-sm">{{ t('transactions.noTransactionsYet') }}</p>
+        </div>
+
+        <div v-else class="flex-1 overflow-y-auto -mx-2 px-2 divide-y divide-white/5">
+          <div
+            v-for="tx in transactions"
+            :key="tx.tx_hash"
+            class="flex items-center justify-between gap-3 py-3 hover:bg-white/5 rounded-lg px-2 cursor-pointer transition-colors"
+            @click="openInMempool(tx.tx_hash)"
+          >
+            <div class="flex items-center gap-3 min-w-0 flex-1">
+              <div
+                class="w-8 h-8 rounded-full flex items-center justify-center shrink-0"
+                :class="tx.direction === 'incoming'
+                  ? (tx.num_confirmations === 0 ? 'bg-yellow-500/15' : 'bg-green-500/15')
+                  : 'bg-red-500/10'"
+              >
+                <svg
+                  class="w-4 h-4"
+                  :class="tx.direction === 'incoming'
+                    ? (tx.num_confirmations === 0 ? 'text-yellow-400' : 'text-green-400')
+                    : 'text-red-400'"
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path v-if="tx.direction === 'incoming'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                </svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <span
+                    class="text-sm font-medium"
+                    :class="tx.direction === 'incoming' ? 'text-green-400' : 'text-red-400'"
+                  >
+                    {{ tx.direction === 'incoming' ? '+' : '-' }}{{ Math.abs(tx.amount_sats).toLocaleString() }} sats
+                  </span>
+                  <span
+                    class="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+                    :class="tx.num_confirmations === 0
+                      ? 'bg-yellow-500/15 text-yellow-400'
+                      : tx.num_confirmations < 3
+                        ? 'bg-green-500/15 text-green-400'
+                        : 'bg-white/10 text-white/50'"
+                  >
+                    {{ tx.num_confirmations === 0 ? t('transactions.unconfirmed') : t('transactions.confirmations', { count: tx.num_confirmations }) }}
+                  </span>
+                </div>
+                <div class="flex items-center gap-2 mt-0.5">
+                  <p class="text-[11px] text-white/40 font-mono truncate">{{ tx.tx_hash }}</p>
+                  <span v-if="tx.label" class="text-[10px] text-white/30 shrink-0">{{ tx.label }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <span class="text-[11px] text-white/40">{{ formatTxTime(tx.time_stamp) }}</span>
+              <svg class="w-3.5 h-3.5 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+            </div>
+          </div>
+        </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import BaseModal from '@/components/BaseModal.vue'
+
+interface WalletTransaction {
+  tx_hash: string
+  amount_sats: number
+  direction: 'incoming' | 'outgoing'
+  num_confirmations: number
+  time_stamp: number
+  total_fees: number
+  dest_addresses: string[]
+  label: string
+  block_height: number
+}
+
+defineProps<{
+  show: boolean
+  transactions: WalletTransaction[]
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+const { t } = useI18n()
+const router = useRouter()
+
+function close() {
+  emit('close')
+}
+
+function openInMempool(txHash: string) {
+  router.push({ name: 'app-session', params: { appId: 'mempool' }, query: { path: `/tx/${txHash}` } })
+}
+
+function formatTxTime(timestamp: number): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp * 1000)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  if (diffMins < 1) return t('transactions.justNow')
+  if (diffMins < 60) return t('transactions.minutesAgo', { count: diffMins })
+  const diffHours = Math.floor(diffMins / 60)
+  if (diffHours < 24) return t('transactions.hoursAgo', { count: diffHours })
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays < 7) return t('transactions.daysAgo', { count: diffDays })
+  return date.toLocaleDateString()
+}
+</script>
--- a/neode-ui/src/components/cloud/ShareModal.vue
+++ b/neode-ui/src/components/cloud/ShareModal.vue
@@ -28,10 +28,7 @@
            <p class="text-sm font-medium text-white/90">Share this {{ isDir ? 'folder' : 'file' }}</p>
            <p class="text-xs text-white/50 mt-0.5">Make visible to connected peers</p>
          </div>
-          <label class="share-toggle">
-            <input type="checkbox" v-model="shared" />
-            <span class="share-toggle-slider"></span>
-          </label>
+          <ToggleSwitch v-model="shared" />
        </div>

        <!-- Access Type (only when shared) -->
@@ -126,6 +123,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { rpcClient } from '@/api/rpc-client'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'

 const props = defineProps<{
  filename: string
--- a/neode-ui/src/locales/en.json
+++ b/neode-ui/src/locales/en.json
@@ -703,5 +703,53 @@
    "containers": "Containers",
    "goToLogin": "Go to Login",
    "lastChecked": "Last checked: {time}"
+  },
+  "receiveBitcoin": {
+    "onChain": "On-Chain",
+    "lightning": "Lightning",
+    "ecash": "Ecash",
+    "amountSats": "Amount (sats)",
+    "memoOptional": "Memo (optional)",
+    "memoPlaceholder": "Payment for...",
+    "invoiceShareLabel": "Invoice (share with sender):",
+    "yourBitcoinAddress": "Your Bitcoin address:",
+    "pasteEcashToken": "Paste ecash token",
+    "processing": "Processing...",
+    "generateAddress": "Generate Address",
+    "createInvoice": "Create Invoice",
+    "receive": "Receive",
+    "enterAnAmount": "Enter an amount",
+    "pasteAnEcashToken": "Paste an ecash token",
+    "tokenReceivedSuccess": "Token received successfully!"
+  },
+  "sendBitcoin": {
+    "onChain": "On-chain",
+    "auto": "Auto",
+    "lightning": "Lightning",
+    "ecash": "Ecash",
+    "autoMethodDesc": "Auto-selects method based on amount: ecash < 1k sats, Lightning 1k\u2013500k, on-chain > 500k",
+    "amountSats": "Amount (sats)",
+    "lightningInvoice": "Lightning Invoice (BOLT11)",
+    "bitcoinAddress": "Bitcoin Address",
+    "tokenShareLabel": "Token (share with recipient):",
+    "sentTx": "Sent! TX: {txid}",
+    "paidHash": "Paid! Hash: {hash}"
+  },
+  "transactions": {
+    "title": "Transactions",
+    "noTransactionsYet": "No transactions yet",
+    "unconfirmed": "Unconfirmed",
+    "confirmations": "{count} conf",
+    "justNow": "just now",
+    "minutesAgo": "{count}m ago",
+    "hoursAgo": "{count}h ago",
+    "daysAgo": "{count}d ago"
+  },
+  "easyHome": {
+    "beginner": "Beginner",
+    "intermediate": "Intermediate",
+    "done": "Done",
+    "inProgress": "In Progress",
+    "start": "Start"
  }
 }
--- a/neode-ui/src/locales/es.json
+++ b/neode-ui/src/locales/es.json
@@ -702,5 +702,53 @@
    "containers": "Contenedores",
    "goToLogin": "Ir a inicio de sesi\u00f3n",
    "lastChecked": "\u00daltima verificaci\u00f3n: {time}"
+  },
+  "receiveBitcoin": {
+    "onChain": "On-Chain",
+    "lightning": "Lightning",
+    "ecash": "Ecash",
+    "amountSats": "Monto (sats)",
+    "memoOptional": "Nota (opcional)",
+    "memoPlaceholder": "Pago por...",
+    "invoiceShareLabel": "Factura (compartir con el remitente):",
+    "yourBitcoinAddress": "Su direcci\u00f3n Bitcoin:",
+    "pasteEcashToken": "Pegar token Ecash",
+    "processing": "Procesando...",
+    "generateAddress": "Generar direcci\u00f3n",
+    "createInvoice": "Crear factura",
+    "receive": "Recibir",
+    "enterAnAmount": "Ingrese un monto",
+    "pasteAnEcashToken": "Pegue un token Ecash",
+    "tokenReceivedSuccess": "\u00a1Token recibido exitosamente!"
+  },
+  "sendBitcoin": {
+    "onChain": "On-chain",
+    "auto": "Auto",
+    "lightning": "Lightning",
+    "ecash": "Ecash",
+    "autoMethodDesc": "Selecci\u00f3n autom\u00e1tica seg\u00fan monto: ecash < 1k sats, Lightning 1k\u2013500k, on-chain > 500k",
+    "amountSats": "Monto (sats)",
+    "lightningInvoice": "Factura Lightning (BOLT11)",
+    "bitcoinAddress": "Direcci\u00f3n Bitcoin",
+    "tokenShareLabel": "Token (compartir con el destinatario):",
+    "sentTx": "\u00a1Enviado! TX: {txid}",
+    "paidHash": "\u00a1Pagado! Hash: {hash}"
+  },
+  "transactions": {
+    "title": "Transacciones",
+    "noTransactionsYet": "A\u00fan no hay transacciones",
+    "unconfirmed": "Sin confirmar",
+    "confirmations": "{count} conf",
+    "justNow": "justo ahora",
+    "minutesAgo": "hace {count}m",
+    "hoursAgo": "hace {count}h",
+    "daysAgo": "hace {count}d"
+  },
+  "easyHome": {
+    "beginner": "Principiante",
+    "intermediate": "Intermedio",
+    "done": "Listo",
+    "inProgress": "En progreso",
+    "start": "Iniciar"
  }
 }
--- a/neode-ui/src/router/index.ts
+++ b/neode-ui/src/router/index.ts
@@ -218,7 +218,7 @@ async function checkSessionWithTimeout(store: ReturnType<typeof useAppStore>): P
 * Navigation Guard
 * Handles authentication and onboarding flow routing
 */
-function isLocalRedirect(path: unknown): path is string {
+export function isLocalRedirect(path: unknown): path is string {
  if (typeof path !== 'string') return false
  try {
    if (path.startsWith('//') || path.includes('://')) return false
--- a/neode-ui/src/stores/aiPermissions.ts
+++ b/neode-ui/src/stores/aiPermissions.ts
@@ -92,8 +92,9 @@ export const useAIPermissionsStore = defineStore('aiPermissions', () => {
    try {
      const stored = localStorage.getItem(STORAGE_KEY)
      if (stored) {
-        const parsed = JSON.parse(stored) as AIContextCategory[]
-        return new Set(parsed.filter(c => AI_PERMISSION_CATEGORIES.some(cat => cat.id === c)))
+        const parsed: unknown = JSON.parse(stored)
+        if (!Array.isArray(parsed)) return new Set()
+        return new Set(parsed.filter((c: unknown) => typeof c === 'string' && AI_PERMISSION_CATEGORIES.some(cat => cat.id === c)) as AIContextCategory[])
      }
    } catch (e) {
      if (import.meta.env.DEV) console.warn('Failed to load AI permissions from storage', e)
--- a/neode-ui/src/stores/appLauncher.ts
+++ b/neode-ui/src/stores/appLauncher.ts
@@ -63,7 +63,10 @@ const APPROVED_ORIGINS_KEY = 'neode_nostr_approved_origins'
 function getApprovedOrigins(): Set<string> {
  try {
    const stored = localStorage.getItem(APPROVED_ORIGINS_KEY)
-    return stored ? new Set(JSON.parse(stored) as string[]) : new Set()
+    if (!stored) return new Set()
+    const parsed: unknown = JSON.parse(stored)
+    if (!Array.isArray(parsed)) return new Set()
+    return new Set(parsed.filter((s: unknown) => typeof s === 'string'))
  } catch {
    return new Set()
  }
@@ -205,8 +208,11 @@ export const useAppLauncherStore = defineStore('appLauncher', () => {
    try {
      const stored = localStorage.getItem(appKey)
      if (stored) {
-        const parsed = JSON.parse(stored) as { id?: string }
-        appIdentityId = parsed.id || null
+        const parsed: unknown = JSON.parse(stored)
+        if (typeof parsed === 'object' && parsed !== null && 'id' in parsed) {
+          const idVal = (parsed as Record<string, unknown>).id
+          appIdentityId = typeof idVal === 'string' ? idVal : null
+        }
      }
    } catch { /* ignore */ }

--- a/neode-ui/src/stores/spotlight.ts
+++ b/neode-ui/src/stores/spotlight.ts
@@ -23,8 +23,17 @@ export const useSpotlightStore = defineStore('spotlight', () => {
    try {
      const raw = localStorage.getItem(RECENT_ITEMS_KEY)
      if (raw) {
-        const parsed = JSON.parse(raw) as RecentItem[]
-        recentItems.value = parsed.slice(0, MAX_RECENT_ITEMS)
+        const parsed: unknown = JSON.parse(raw)
+        if (!Array.isArray(parsed)) {
+          recentItems.value = []
+          return
+        }
+        recentItems.value = parsed
+          .filter((item: unknown) =>
+            typeof item === 'object' && item !== null &&
+            'id' in item && 'label' in item && 'type' in item && 'timestamp' in item
+          )
+          .slice(0, MAX_RECENT_ITEMS) as RecentItem[]
      } else {
        recentItems.value = []
      }
--- a/neode-ui/src/style.css
+++ b/neode-ui/src/style.css
@@ -55,7 +55,7 @@

 /* Mobile touch targets — ensure tappable elements meet 44px minimum */
@media (max-width: 767px) {
-  button:not(.mode-switcher-btn):not(.sidebar-nav-item):not([class*="w-9"]):not([class*="w-8"]):not([class*="w-7"]) {
+  button:not(.mode-switcher-btn):not(.sidebar-nav-item):not([class*="w-9"]):not([class*="w-8"]):not([class*="w-7"]):not([class*="w-10"]):not([class*="w-11"]):not([class*="w-12"]) {
    min-height: 44px;
  }
 }
@@ -81,7 +81,6 @@ button:active:not(:disabled),
 [role="button"]:active,
 a.glass-card:active,
 a.goal-card:active,
-.info-card-button:active,
 .path-action-button:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
@@ -244,18 +243,21 @@ input[type="radio"]:active + * {
    position: relative;
  }

+  /* On mobile browsers, cap chat height to the dynamic viewport to prevent
+     content extending behind browser chrome (address bar / toolbar). */
+  @media (max-width: 767px) {
+    .chat-fullscreen {
+      max-height: 100vh;
+      max-height: 100dvh;
+    }
+  }
+
  .chat-mode-pill {
-    display: none;
    position: absolute;
    top: 2.25rem;
    right: 1.25rem;
    z-index: 10;
  }
-  @media (min-width: 768px) {
-    .chat-mode-pill {
-      display: flex;
-    }
-  }

  .chat-iframe {
    flex: 1;
@@ -265,10 +267,15 @@ input[type="radio"]:active + * {
    background: transparent;
  }

-  /* On mobile, shrink iframe height so AIUI ends above the Archipelago tab bar */
+  /* On mobile, shrink iframe height so AIUI ends above the Archipelago tab bar.
+     Use dvh (dynamic viewport height) instead of 100% — on a normal mobile browser,
+     100% resolves through the parent chain to the large viewport (100vh) which
+     is taller than the visible area when the browser chrome is showing. dvh
+     tracks the actual visible viewport. */
  @media (max-width: 767px) {
    .chat-iframe-mobile {
-      height: calc(100% - var(--mobile-tab-bar-height, 72px)) !important;
+      height: calc(100vh - var(--mobile-tab-bar-height, 72px)) !important;
+      height: calc(100dvh - var(--mobile-tab-bar-height, 72px)) !important;
      flex: none;
    }
  }
@@ -441,6 +448,112 @@ input[type="radio"]:active + * {
    min-height: 36px;
  }

+  /* Glass button color variants */
+  .glass-button-warning {
+    background: rgba(251, 146, 60, 0.2);
+    border: 1px solid rgba(251, 146, 60, 0.3);
+    color: #fdba74;
+  }
+
+  .glass-button-warning:hover {
+    background: rgba(251, 146, 60, 0.3);
+  }
+
+  .glass-button-danger {
+    background: rgba(239, 68, 68, 0.2);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: #fca5a5;
+  }
+
+  .glass-button-danger:hover {
+    background: rgba(239, 68, 68, 0.3);
+  }
+
+  .glass-button-success {
+    background: rgba(74, 222, 128, 0.2);
+    border: 1px solid rgba(74, 222, 128, 0.4);
+    color: #bbf7d0;
+  }
+
+  .glass-button-success:hover {
+    background: rgba(74, 222, 128, 0.3);
+  }
+
+  /* Status badges — inline colored pills */
+  .status-success {
+    background: rgba(74, 222, 128, 0.2);
+    color: #4ade80;
+  }
+
+  .status-error {
+    background: rgba(239, 68, 68, 0.2);
+    color: #f87171;
+  }
+
+  .status-warning {
+    background: rgba(251, 146, 60, 0.2);
+    color: #fb923c;
+  }
+
+  .status-info {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+  }
+
+  /* Alert banners — padded containers with border */
+  .alert-success {
+    padding: 0.5rem 0.75rem;
+    background: rgba(74, 222, 128, 0.1);
+    border: 1px solid rgba(74, 222, 128, 0.2);
+    border-radius: 0.5rem;
+    color: #bbf7d0;
+    font-size: 0.875rem;
+  }
+
+  .alert-error {
+    padding: 0.5rem 0.75rem;
+    background: rgba(239, 68, 68, 0.2);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: 0.5rem;
+    color: #fca5a5;
+    font-size: 0.875rem;
+  }
+
+  .alert-warning {
+    padding: 0.5rem 0.75rem;
+    background: rgba(251, 146, 60, 0.1);
+    border: 1px solid rgba(251, 146, 60, 0.2);
+    border-radius: 0.5rem;
+    color: #fdba74;
+    font-size: 0.875rem;
+  }
+
+  .alert-info {
+    padding: 0.5rem 0.75rem;
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 0.5rem;
+    color: #93c5fd;
+    font-size: 0.875rem;
+  }
+
+  /* Form input focus ring */
+  .input-glass {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.875rem;
+    transition: border-color 0.2s ease;
+  }
+
+  .input-glass:focus {
+    outline: none;
+    border-color: #fb923c;
+    box-shadow: 0 0 0 1px #fb923c;
+  }
+
  /* Toast - glassmorphic, top-right */
  .toast-glass {
    background-color: rgba(0, 0, 0, 0.65);
@@ -593,22 +706,6 @@ input[type="radio"]:active + * {
    z-index: 1;
  }

-  /* Gradient border container for large content areas */
-  .gradient-border-container {
-    position: relative;
-    border-radius: 1.5rem;
-    padding: 4px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.6) 100%);
-    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
-  }
-
-  .gradient-border-container-inner {
-    background: rgba(0, 0, 0, 0.35);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-    border-radius: 1.25rem;
-  }
-
  /* Choose Your Path - Main Container */
  .path-glass-container {
    width: calc(100% - 48px);
@@ -876,6 +973,28 @@ input[type="radio"]:active + * {
  }
 }

+/* Modal transition (Vue <Transition name="modal">) — shared across all modal components */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-active .glass-card,
+.modal-leave-active .glass-card {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .glass-card,
+.modal-leave-to .glass-card {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
 /* Background image */
 body {
  margin: 0;
@@ -958,10 +1077,10 @@ iframe.iframe-scrollbar-hide {
 }

@keyframes caretBlink {
-  0%, 100% { 
-    border-right-color: #00ffff;
+  0%, 100% {
+    border-right-color: #fbbf24;
  }
-  50% { 
+  50% {
    border-right-color: transparent;
  }
 }
@@ -999,15 +1118,6 @@ iframe.iframe-scrollbar-hide {
  }
 }

-@keyframes caretBlink {
-  0%, 100% { 
-    border-right-color: #fbbf24;
-  }
-  50% { 
-    border-right-color: transparent;
-  }
-}
-
 /* Splash screen styles */
 .splash-complete .login-card {
  animation: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
@@ -1065,9 +1175,9 @@ body::after {
  animation-fill-mode: backwards;
 }

-/* Dashboard: full viewport width, no letterboxing */
+/* Dashboard: full viewport width, no letterboxing, no body scroll */
 body.dashboard-active {
-  overflow-x: hidden;
+  overflow: hidden;
  width: 100%;
 }

@@ -1590,46 +1700,6 @@ html:has(body.video-background-active)::before {
  border: 1px solid rgba(255, 255, 255, 0.08);
 }

-/* Toggle switch */
-.share-toggle {
-  position: relative;
-  display: inline-flex;
-  width: 2.75rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-.share-toggle input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.share-toggle-slider {
-  position: absolute;
-  inset: 0;
-  border-radius: 9999px;
-  background: rgba(255, 255, 255, 0.15);
-  transition: background-color 0.2s ease;
-}
-.share-toggle-slider::before {
-  content: '';
-  position: absolute;
-  width: 1.125rem;
-  height: 1.125rem;
-  left: 0.1875rem;
-  bottom: 0.1875rem;
-  border-radius: 9999px;
-  background: white;
-  transition: transform 0.2s ease;
-}
-.share-toggle input:checked + .share-toggle-slider {
-  background: #fb923c;
-}
-.share-toggle input:checked + .share-toggle-slider::before {
-  transform: translateX(1.25rem);
-}
-
 /* Access type options */
 .share-access-options {
  display: grid;
@@ -1823,44 +1893,6 @@ html:has(body.video-background-active)::before {
 .monitoring-bar-danger {
  background: #ef4444;
 }
-.monitoring-alert-toggle {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-  flex-shrink: 0;
-}
-.monitoring-alert-toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.monitoring-alert-toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  transition: background 0.2s ease;
-}
-.monitoring-alert-toggle-slider::before {
-  content: '';
-  position: absolute;
-  height: 14px;
-  width: 14px;
-  left: 3px;
-  bottom: 3px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-}
-.monitoring-alert-toggle input:checked + .monitoring-alert-toggle-slider {
-  background: rgba(74, 222, 128, 0.4);
-}
-.monitoring-alert-toggle input:checked + .monitoring-alert-toggle-slider::before {
-  transform: translateX(16px);
-  background: #4ade80;
-}
 .monitoring-threshold-input {
  width: 60px;
  padding: 4px 8px;
@@ -1872,42 +1904,3 @@ html:has(body.video-background-active)::before {
  text-align: right;
 }

-/* Toggle switch for Tor services and similar on/off controls */
-.tor-toggle-label {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-  cursor: pointer;
-}
-.tor-toggle-input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-.tor-toggle-slider {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  transition: background 0.3s ease;
-}
-.tor-toggle-slider::before {
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  left: 2px;
-  top: 2px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 50%;
-  transition: transform 0.3s ease, background 0.3s ease;
-}
-.tor-toggle-input:checked + .tor-toggle-slider {
-  background: rgba(251, 146, 60, 0.4);
-}
-.tor-toggle-input:checked + .tor-toggle-slider::before {
-  transform: translateX(16px);
-  background: #fb923c;
-}
--- a/neode-ui/src/types/api.ts
+++ b/neode-ui/src/types/api.ts
@@ -79,6 +79,7 @@ export type PackageState = typeof PackageState[keyof typeof PackageState]

 export interface PackageDataEntry {
  state: PackageState
+  health?: string | null // "healthy", "unhealthy", "starting", or null
  'static-files'?: {
    license: string
    instructions: string
--- a/neode-ui/src/views/AppDetails.vue
+++ b/neode-ui/src/views/AppDetails.vue
@@ -41,10 +41,10 @@
            <div class="flex items-center gap-2">
      <span
                class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium"
-        :class="getStatusClass(pkg.state)"
+        :class="getStatusClass(pkg.state, pkg.health)"
      >
-                <span class="w-1.5 h-1.5 rounded-full mr-1.5" :class="getStatusDotClass(pkg.state)"></span>
-        {{ pkg.state }}
+                <span class="w-1.5 h-1.5 rounded-full mr-1.5" :class="getStatusDotClass(pkg.state, pkg.health)"></span>
+        {{ getStatusLabel(pkg.state, pkg.health) }}
      </span>
              <span class="text-white/50 text-xs">v{{ pkg.manifest.version }}</span>
            </div>
@@ -74,14 +74,15 @@
            </button>
            <template v-if="!isWebOnly">
            <button
-              v-if="pkg.state === 'stopped'"
+              v-if="pkg.state === 'stopped' || pkg.state === 'exited'"
              @click="startApp"
-              class="px-4 py-2.5 bg-green-500/20 border border-green-500/40 rounded-lg text-green-200 text-sm font-medium hover:bg-green-500/30 transition-colors flex items-center gap-2"
+              class="px-4 py-2.5 glass-button rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+              :class="pkg.state === 'exited' ? 'glass-button-danger' : 'glass-button-success'"
            >
              <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
              </svg>
-              {{ t('common.start') }}
+              {{ pkg.state === 'exited' ? 'Restart' : t('common.start') }}
            </button>
            <button
              @click="restartApp"
@@ -105,7 +106,7 @@
            </button>
            <button
              @click="uninstallApp"
-              class="px-4 py-2.5 bg-red-600/20 border border-red-600/40 rounded-lg text-red-300 text-sm font-medium hover:bg-red-600/30 transition-colors flex items-center gap-2"
+              class="px-4 py-2.5 glass-button glass-button-danger rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
            >
              <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" />
@@ -135,10 +136,10 @@
              <div class="flex flex-wrap items-center gap-2">
                <span
                  class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
-                  :class="getStatusClass(pkg.state)"
+                  :class="getStatusClass(pkg.state, pkg.health)"
                >
-                  <span class="w-1.5 h-1.5 rounded-full mr-1" :class="getStatusDotClass(pkg.state)"></span>
-                  {{ pkg.state }}
+                  <span class="w-1.5 h-1.5 rounded-full mr-1" :class="getStatusDotClass(pkg.state, pkg.health)"></span>
+                  {{ getStatusLabel(pkg.state, pkg.health) }}
                </span>
                <span class="text-white/50 text-xs">v{{ pkg.manifest.version }}</span>
              </div>
@@ -148,7 +149,7 @@
            <button
              v-if="!isWebOnly"
              @click="uninstallApp"
-              class="flex-shrink-0 w-10 h-10 rounded-lg bg-red-600/20 border border-red-600/40 text-red-300 hover:bg-red-600/30 transition-colors flex items-center justify-center"
+              class="flex-shrink-0 w-10 h-10 rounded-lg glass-button glass-button-danger transition-colors flex items-center justify-center"
              :title="t('common.uninstall')"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -172,14 +173,15 @@
            </button>
            <template v-if="!isWebOnly">
        <button
-          v-if="pkg.state === 'stopped'"
+          v-if="pkg.state === 'stopped' || pkg.state === 'exited'"
          @click="startApp"
-              class="px-4 py-2.5 bg-green-500/20 border border-green-500/40 rounded-lg text-green-200 text-sm font-medium hover:bg-green-500/30 transition-colors flex items-center justify-center gap-2"
+              class="px-4 py-2.5 glass-button rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2"
+              :class="pkg.state === 'exited' ? 'glass-button-danger' : 'glass-button-success'"
        >
              <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
              </svg>
-          {{ t('common.start') }}
+          {{ pkg.state === 'exited' ? 'Restart' : t('common.start') }}
        </button>
        <button
          v-if="pkg.state === 'running'"
@@ -194,7 +196,7 @@
        </button>
        <button
          @click="restartApp"
-              :class="[canLaunch && (pkg.state === 'stopped' || pkg.state === 'running') ? 'col-span-2' : '']"
+              :class="[canLaunch && (pkg.state === 'stopped' || pkg.state === 'exited' || pkg.state === 'running') ? 'col-span-2' : '']"
              class="px-4 py-2.5 glass-button rounded-lg text-sm font-medium hover:bg-white/15 transition-colors flex items-center justify-center gap-2"
        >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -447,7 +449,7 @@
              </button>
              <button
                @click="confirmUninstall"
-                class="w-full md:w-auto px-6 py-3 bg-red-600/80 hover:bg-red-600 rounded-lg text-white text-sm font-medium transition-colors"
+                class="w-full md:w-auto px-6 py-3 glass-button glass-button-danger rounded-lg text-sm font-medium"
              >
                {{ t('common.uninstall') }}
              </button>
@@ -460,7 +462,7 @@
    <!-- Action error toast -->
    <Transition name="fade">
      <div v-if="actionError" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
-        <div class="bg-red-500/20 border border-red-500/40 backdrop-blur-sm rounded-lg px-4 py-3 text-red-200 text-sm flex items-center justify-between gap-3">
+        <div class="alert-error backdrop-blur-sm rounded-lg px-4 py-3 text-sm flex items-center justify-between gap-3">
          <span>{{ actionError }}</span>
          <button @click="actionError = ''" :aria-label="t('apps.dismissError')" class="text-red-300 hover:text-white shrink-0">&times;</button>
        </div>
@@ -898,12 +900,16 @@ async function uninstallApp() {
  showUninstallModal()
 }

-function getStatusClass(state: PackageState): string {
+function getStatusClass(state: PackageState, health?: string | null): string {
+  if (state === PackageState.Running && health === 'starting') return 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30'
+  if (state === PackageState.Running && health === 'unhealthy') return 'bg-orange-500/20 text-orange-200 border border-orange-500/30'
  switch (state) {
    case PackageState.Running:
      return 'bg-green-500/20 text-green-200 border border-green-500/30'
    case PackageState.Stopped:
      return 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
+    case PackageState.Exited:
+      return 'bg-red-500/20 text-red-200 border border-red-500/30'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
@@ -915,12 +921,16 @@ function getStatusClass(state: PackageState): string {
  }
 }

-function getStatusDotClass(state: PackageState): string {
+function getStatusDotClass(state: PackageState, health?: string | null): string {
+  if (state === PackageState.Running && health === 'starting') return 'bg-yellow-400 animate-pulse'
+  if (state === PackageState.Running && health === 'unhealthy') return 'bg-orange-400 animate-pulse'
  switch (state) {
    case PackageState.Running:
      return 'bg-green-400'
    case PackageState.Stopped:
      return 'bg-gray-400'
+    case PackageState.Exited:
+      return 'bg-red-400 animate-pulse'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
@@ -931,6 +941,14 @@ function getStatusDotClass(state: PackageState): string {
      return 'bg-gray-400'
  }
 }
+
+function getStatusLabel(state: PackageState, health?: string | null): string {
+  if (state === PackageState.Running && health === 'starting') return 'starting up'
+  if (state === PackageState.Running && health === 'unhealthy') return 'unhealthy'
+  if (state === PackageState.Running && health === 'healthy') return 'healthy'
+  if (state === PackageState.Exited) return 'crashed'
+  return state
+}
 </script>

 <style scoped>
--- a/neode-ui/src/views/AppSession.vue
+++ b/neode-ui/src/views/AppSession.vue
@@ -555,7 +555,7 @@ function handleBackdropClick() {
 function closeSession() {
  if (document.fullscreenElement) document.exitFullscreen().catch(() => {})
  if (isInlinePanel.value) emit('close')
-  else router.push({ name: 'apps' })
+  else router.back()
 }

 function onKeyDown(e: KeyboardEvent) {
--- a/neode-ui/src/views/Apps.vue
+++ b/neode-ui/src/views/Apps.vue
@@ -40,7 +40,7 @@
    </div>

    <!-- Loading Skeleton -->
-    <div v-if="!store.isConnected && sortedPackageEntries.length === 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-6">
+    <div v-if="!store.isConnected && sortedPackageEntries.length === 0 && !connectionError" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-6">
      <div v-for="i in 3" :key="i" class="glass-card p-6 animate-pulse">
        <div class="flex items-start gap-4">
          <div class="w-16 h-16 rounded-lg bg-white/10"></div>
@@ -56,6 +56,19 @@
      </div>
    </div>

+    <!-- Connection Error -->
+    <div v-else-if="connectionError && sortedPackageEntries.length === 0" class="text-center py-12 pb-6">
+      <div class="glass-card p-8 max-w-md mx-auto">
+        <div class="alert-error mb-4">{{ connectionError }}</div>
+        <button
+          @click="connectionError = ''; store.connectWebSocket()"
+          class="glass-button px-6 py-3 rounded-lg font-medium"
+        >
+          Retry Connection
+        </button>
+      </div>
+    </div>
+
    <!-- Empty State -->
    <div v-else-if="sortedPackageEntries.length === 0 && !searchQuery" class="text-center py-16 pb-6">
      <div class="glass-card p-12 max-w-md mx-auto">
@@ -136,10 +149,10 @@
            <div class="flex items-center gap-2">
              <span
                class="inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium"
-                :class="getStatusClass(pkg.state)"
+                :class="getStatusClass(pkg.state, pkg.health)"
              >
                <svg
-                  v-if="pkg.state === 'starting' || pkg.state === 'installing' || pkg.state === 'stopping' || pkg.state === 'restarting'"
+                  v-if="pkg.state === 'starting' || pkg.state === 'installing' || pkg.state === 'stopping' || pkg.state === 'restarting' || (pkg.state === 'running' && pkg.health === 'starting')"
                  class="animate-spin h-3 w-3"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
@@ -148,7 +161,8 @@
                  <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>
-                {{ pkg.state }}
+                <span v-if="pkg.state === 'running' && pkg.health === 'unhealthy'" class="w-1.5 h-1.5 rounded-full bg-orange-400 animate-pulse"></span>
+                {{ getStatusLabel(pkg.state, pkg.health) }}
              </span>
              <span class="text-xs text-white/50">
                v{{ pkg.manifest.version }}
@@ -171,14 +185,14 @@
          <button
            v-if="!isWebOnlyApp(id as string) && !loadingActions[id as string] && (pkg.state === 'stopped' || pkg.state === 'exited')"
            @click.stop="startApp(id as string)"
-            class="flex-1 px-4 py-2 bg-green-500/20 border border-green-500/40 rounded-lg text-green-200 text-sm font-medium hover:bg-green-500/30 transition-colors flex items-center justify-center gap-2"
+            class="flex-1 px-4 py-2 glass-button glass-button-success rounded-lg text-sm font-medium flex items-center justify-center gap-2"
          >
-            <span>{{ t('common.start') }}</span>
+            <span>{{ pkg.state === 'exited' ? 'Restart' : t('common.start') }}</span>
          </button>
          <button
            v-if="!isWebOnlyApp(id as string) && loadingActions[id as string] && (pkg.state === 'stopped' || pkg.state === 'exited' || pkg.state === 'starting')"
            disabled
-            class="flex-1 px-4 py-2 bg-green-500/20 border border-green-500/40 rounded-lg text-green-200 text-sm font-medium opacity-50 cursor-not-allowed flex items-center justify-center gap-2"
+            class="flex-1 px-4 py-2 glass-button glass-button-success rounded-lg text-sm font-medium opacity-50 cursor-not-allowed flex items-center justify-center gap-2"
          >
            <svg class="animate-spin h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -193,6 +207,16 @@
          >
            <span>{{ t('common.stop') }}</span>
          </button>
+          <button
+            v-if="!isWebOnlyApp(id as string) && !loadingActions[id as string] && (pkg.state === 'running' || pkg.state === 'starting')"
+            @click.stop="restartApp(id as string)"
+            class="px-2.5 py-2 glass-button glass-button-sm rounded-lg flex items-center justify-center"
+            :title="t('common.restart')"
+          >
+            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
          <button
            v-if="!isWebOnlyApp(id as string) && loadingActions[id as string] && (pkg.state === 'running' || pkg.state === 'starting' || pkg.state === 'stopping')"
            disabled
@@ -249,7 +273,7 @@
              <button
                @click="confirmUninstall"
                :disabled="uninstalling"
-                class="px-4 py-2 bg-red-600/80 hover:bg-red-600 rounded-lg text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                class="px-4 py-2 glass-button glass-button-danger rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                <svg
                  v-if="uninstalling"
@@ -274,7 +298,7 @@
    <!-- Action error toast -->
    <Transition name="fade">
      <div v-if="actionError" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
-        <div class="bg-red-500/20 border border-red-500/40 backdrop-blur-sm rounded-lg px-4 py-3 text-red-200 text-sm flex items-center justify-between gap-3">
+        <div class="alert-error backdrop-blur-sm rounded-lg px-4 py-3 text-sm flex items-center justify-between gap-3">
          <span>{{ actionError }}</span>
          <button @click="actionError = ''" :aria-label="t('apps.dismissError')" class="text-red-300 hover:text-white shrink-0">&times;</button>
        </div>
@@ -284,7 +308,7 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, onBeforeUnmount } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, useRoute, RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '../stores/app'
@@ -377,6 +401,20 @@ const categoriesWithApps = computed(() => {
 })


+// Connection error state — show after timeout if backend never connects
+const connectionError = ref('')
+let connectionTimer: ReturnType<typeof setTimeout> | undefined
+
+onMounted(() => {
+  if (!store.isConnected) {
+    connectionTimer = setTimeout(() => {
+      if (!store.isConnected && sortedPackageEntries.value.length === 0) {
+        connectionError.value = 'Unable to connect to server. Check that the backend is running.'
+      }
+    }, 15000)
+  }
+})
+
 // Track loading states for each app action
 const loadingActions = ref<Record<string, boolean>>({})

@@ -523,12 +561,16 @@ function launchApp(id: string) {
  useAppLauncherStore().openSession(id)
 }

-function getStatusClass(state: PackageState): string {
+function getStatusClass(state: PackageState, health?: string | null): string {
+  if (state === PackageState.Running && health === 'starting') return 'bg-yellow-500/20 text-yellow-200'
+  if (state === PackageState.Running && health === 'unhealthy') return 'bg-orange-500/20 text-orange-200'
  switch (state) {
    case PackageState.Running:
      return 'bg-green-500/20 text-green-200'
    case PackageState.Stopped:
      return 'bg-gray-500/20 text-gray-200'
+    case PackageState.Exited:
+      return 'bg-red-500/20 text-red-200'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
@@ -540,6 +582,14 @@ function getStatusClass(state: PackageState): string {
  }
 }

+function getStatusLabel(state: PackageState, health?: string | null): string {
+  if (state === PackageState.Running && health === 'starting') return 'starting up'
+  if (state === PackageState.Running && health === 'unhealthy') return 'unhealthy'
+  if (state === PackageState.Running && health === 'healthy') return 'healthy'
+  if (state === PackageState.Exited) return 'crashed'
+  return state
+}
+
 function goToApp(id: string) {
  router.push(`/dashboard/apps/${id}`).catch(() => {})
 }
@@ -578,9 +628,26 @@ async function stopApp(id: string) {
  }
 }

+async function restartApp(id: string) {
+  loadingActions.value[id] = true
+  try {
+    await store.restartPackage(id)
+    if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
+    actionTimers.set(id, setTimeout(() => {
+      loadingActions.value[id] = false
+      actionTimers.delete(id)
+    }, 8000))
+  } catch (err) {
+    if (import.meta.env.DEV) console.error('Failed to restart app:', err)
+    showActionError(`Failed to restart app: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    loadingActions.value[id] = false
+  }
+}
+
 onBeforeUnmount(() => {
  for (const t of actionTimers.values()) clearTimeout(t)
  actionTimers.clear()
+  if (connectionTimer) clearTimeout(connectionTimer)
 })


@@ -638,25 +705,3 @@ function handleImageError(e: Event) {

 </script>

-<style scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-active .glass-card,
-.modal-leave-active .glass-card {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-from .glass-card,
-.modal-leave-to .glass-card {
-  transform: scale(0.95);
-  opacity: 0;
-}
-</style>
--- a/neode-ui/src/views/Chat.vue
+++ b/neode-ui/src/views/Chat.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="chat-fullscreen">
    <!-- Close button (desktop: top-right pill) -->
-    <div class="chat-mode-pill flex">
+    <div class="chat-mode-pill hidden md:flex">
      <button class="chat-close-btn" :aria-label="t('chat.closeAssistant')" @click="closeChat">
        <svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
--- a/neode-ui/src/views/Cloud.vue
+++ b/neode-ui/src/views/Cloud.vue
@@ -114,6 +114,11 @@
      </div>
    </div>

+    <!-- Error State -->
+    <div v-if="loadError" class="alert-error mb-4">
+      {{ loadError }}
+    </div>
+
    <!-- Not Installed Hint -->
    <div v-if="!fileBrowserRunning" class="glass-card p-8 mt-6 text-center">
      <p class="text-white/60 mb-3">Install File Browser from the App Store to get started with your cloud storage.</p>
@@ -146,6 +151,7 @@ interface PeerNode {

 const peerNodes = ref<PeerNode[]>([])
 const peersLoading = ref(true)
+const loadError = ref('')

 const APP_ALIASES: Record<string, string[]> = {
  immich: ['immich_server', 'immich-server'],
@@ -244,7 +250,8 @@ async function loadCounts() {
      }
    }
  } catch (e) {
-    if (import.meta.env.DEV) console.warn('FileBrowser count loading failed silently', e)
+    loadError.value = e instanceof Error ? e.message : 'Failed to load file counts'
+    if (import.meta.env.DEV) console.warn('FileBrowser count loading failed', e)
  } finally {
    countsLoading.value = false
  }
@@ -260,8 +267,9 @@ async function loadPeers() {
  try {
    const result = await rpcClient.federationListNodes()
    peerNodes.value = result?.nodes ?? []
-  } catch {
+  } catch (e) {
    peerNodes.value = []
+    loadError.value = e instanceof Error ? e.message : 'Failed to load peer nodes'
  } finally {
    peersLoading.value = false
  }
--- a/neode-ui/src/views/CloudFolder.vue
+++ b/neode-ui/src/views/CloudFolder.vue
@@ -69,6 +69,12 @@
      </RouterLink>
    </div>

+    <!-- Cloud Store Error -->
+    <div v-else-if="cloudStore.error" class="glass-card p-6 flex-1 flex flex-col items-center justify-center text-center">
+      <div class="alert-error mb-4">{{ cloudStore.error }}</div>
+      <button class="glass-button px-4 py-2 rounded-lg text-sm" @click="cloudStore.refresh()">Retry</button>
+    </div>
+
    <!-- Native File Browser (for FileBrowser-backed sections) -->
    <div
      v-else-if="useNativeUI"
--- a/neode-ui/src/views/Dashboard.vue
+++ b/neode-ui/src/views/Dashboard.vue
@@ -86,7 +86,10 @@
              @click="appLauncher.closePanel()"
              :style="{ '--nav-stagger': idx }"
            >
-              <svg class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-if="item.icon === 'web5'" class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 1631 1624">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M914.932 359.228H916.229V715.252H1630.47V1088.98H1451.41V1267.98H1274.33V1445H1093.31V1624H715.534V1264.77H714.237V908.748H0V535.02H179.051V356.025H356.135V178.996H537.154V0H914.932V359.228ZM916.229 1425.33H1073.64V1248.31H1254.66V1071.28H1431.74V913.918H916.229V1425.33ZM556.83 375.695H375.811V552.723H198.727V710.082H714.237V198.666H556.83V375.695Z" />
+              </svg>
+              <svg v-else class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  v-for="(path, index) in getIconPath(item.icon)"
                  :key="index"
@@ -247,7 +250,8 @@
              <div :key="route.path" class="view-wrapper">
                <div
                  v-if="route.path === '/dashboard/chat' || route.path === '/dashboard/mesh'"
-                  class="h-full"
+                  :class="['h-full', mobileTabPaddingTop ? 'overflow-y-auto' : '']"
+                  :style="mobileTabPaddingTop ? { paddingTop: (mobileTabPaddingTop + 16) + 'px' } : undefined"
                >
                  <component :is="Component" />
                </div>
@@ -304,7 +308,10 @@
          }"
          :exact-active-class="item.isCombined ? undefined : 'nav-tab-active'"
        >
-          <svg class="w-6 h-6 transition-all duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg v-if="item.icon === 'web5'" class="w-6 h-6 transition-all duration-300" aria-hidden="true" fill="currentColor" viewBox="0 0 1631 1624">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M914.932 359.228H916.229V715.252H1630.47V1088.98H1451.41V1267.98H1274.33V1445H1093.31V1624H715.534V1264.77H714.237V908.748H0V535.02H179.051V356.025H356.135V178.996H537.154V0H914.932V359.228ZM916.229 1425.33H1073.64V1248.31H1254.66V1071.28H1431.74V913.918H916.229V1425.33ZM556.83 375.695H375.811V552.723H198.727V710.082H714.237V198.666H556.83V375.695Z" />
+          </svg>
+          <svg v-else class="w-6 h-6 transition-all duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              v-for="(path, index) in getIconPath(item.icon)"
              :key="index"
--- a/neode-ui/src/views/Federation.vue
+++ b/neode-ui/src/views/Federation.vue
@@ -304,7 +304,7 @@
          <div v-if="!confirmRemove">
            <button
              @click="confirmRemove = true"
-              class="w-full mt-4 px-4 py-2 rounded text-sm text-red-400 border border-red-400/30 hover:bg-red-400/10 transition-colors"
+              class="w-full mt-4 px-4 py-2 rounded text-sm glass-button glass-button-danger transition-colors"
            >
              Remove from Federation
            </button>
@@ -318,7 +318,7 @@
              >Cancel</button>
              <button
                @click="removeNode(selectedNode!.did)"
-                class="flex-1 px-3 py-1.5 rounded text-sm text-red-400 border border-red-400/30 hover:bg-red-400/10 transition-colors font-medium"
+                class="flex-1 px-3 py-1.5 rounded text-sm glass-button glass-button-danger transition-colors font-medium"
              >Confirm Remove</button>
            </div>
          </div>
--- a/neode-ui/src/views/GoalDetail.vue
+++ b/neode-ui/src/views/GoalDetail.vue
@@ -80,6 +80,15 @@
                </div>
              </div>

+              <!-- App icon -->
+              <img
+                v-if="stepIconUrl(step)"
+                :src="stepIconUrl(step)"
+                :alt="step.title"
+                class="w-7 h-7 rounded-md object-contain shrink-0 mt-0.5"
+                @error="($event.target as HTMLImageElement).style.display = 'none'"
+              />
+
              <!-- Step content -->
              <div class="flex-1 min-w-0">
                <h3 class="text-base font-semibold text-white/90 mb-1">{{ step.title }}</h3>
@@ -141,7 +150,7 @@
    <!-- Action error toast -->
    <Transition name="fade">
      <div v-if="actionError" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
-        <div class="bg-red-500/20 border border-red-500/40 backdrop-blur-sm rounded-lg px-4 py-3 text-red-200 text-sm flex items-center justify-between gap-3">
+        <div class="alert-error backdrop-blur-sm rounded-lg px-4 py-3 text-sm flex items-center justify-between gap-3">
          <span>{{ actionError }}</span>
          <button @click="actionError = ''" class="text-red-300 hover:text-white shrink-0">&times;</button>
        </div>
@@ -159,6 +168,24 @@ import { useGoalStore } from '@/stores/goals'
 import { getGoalById } from '@/data/goals'
 import type { GoalStep } from '@/types/goals'

+/** Map appId to its icon file path under /assets/img/app-icons/ */
+const APP_ICON_MAP: Record<string, string> = {
+  'bitcoin-knots': '/assets/img/app-icons/bitcoin-knots.webp',
+  lnd: '/assets/img/app-icons/lnd.svg',
+  'btcpay-server': '/assets/img/app-icons/btcpay-server.png',
+  immich: '/assets/img/app-icons/immich.png',
+  nextcloud: '/assets/img/app-icons/nextcloud.webp',
+  fedimint: '/assets/img/app-icons/fedimint.png',
+  mempool: '/assets/img/app-icons/mempool.webp',
+  electrs: '/assets/img/app-icons/electrs.svg',
+  'nostr-rs-relay': '/assets/img/app-icons/nostr-rs-relay.svg',
+}
+
+function stepIconUrl(step: GoalStep): string | undefined {
+  if (!step.appId) return undefined
+  return APP_ICON_MAP[step.appId]
+}
+
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
--- a/neode-ui/src/views/Kiosk.vue
+++ b/neode-ui/src/views/Kiosk.vue
@@ -12,7 +12,7 @@
          </div>
        </div>
        <div class="flex items-center gap-3">
-          <div class="kiosk-status-pill" :class="isConnected ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'">
+          <div class="kiosk-status-pill" :class="isConnected ? 'status-success' : 'status-error'">
            <div class="w-2 h-2 rounded-full" :class="isConnected ? 'bg-green-400' : 'bg-red-400'"></div>
            {{ isConnected ? t('kiosk.online') : t('kiosk.offline') }}
          </div>
--- a/neode-ui/src/views/KioskRecovery.vue
+++ b/neode-ui/src/views/KioskRecovery.vue
@@ -47,7 +47,7 @@
        <button @click="refreshDiagnostics" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">
          {{ t('common.refresh') }}
        </button>
-        <button @click="goToLogin" class="glass-button px-4 py-2 rounded-lg text-sm flex-1 bg-orange-500/20 border-orange-500/30">
+        <button @click="goToLogin" class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex-1">
          {{ t('kioskRecovery.goToLogin') }}
        </button>
      </div>
--- a/neode-ui/src/views/Login.vue
+++ b/neode-ui/src/views/Login.vue
@@ -204,6 +204,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { isLocalRedirect } from '../router'
 import { useI18n } from 'vue-i18n'
 import AnimatedLogo from '@/components/AnimatedLogo.vue'
 import { useAppStore } from '../stores/app'
@@ -217,7 +218,11 @@ const router = useRouter()
 const currentRoute = useRoute()

 /** After login, redirect to the intended page or default to home */
-const loginRedirectTo = computed(() => (currentRoute.query.redirect as string) || '/dashboard')
+const loginRedirectTo = computed(() => {
+  const redirect = currentRoute.query.redirect as string
+  if (redirect && isLocalRedirect(redirect)) return redirect
+  return '/dashboard'
+})
 const store = useAppStore()
 const loginTransition = useLoginTransitionStore()

--- a/neode-ui/src/views/Marketplace.vue
+++ b/neode-ui/src/views/Marketplace.vue
@@ -116,6 +116,12 @@

    <!-- Scrollable Apps Section -->
    <div class="pb-8">
+      <!-- Community Load Error -->
+      <div v-if="communityError" class="alert-error mb-4">
+        {{ communityError }}
+        <button @click="loadCommunityMarketplace()" class="ml-2 underline hover:no-underline">Retry</button>
+      </div>
+
      <!-- Apps Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div
@@ -1288,30 +1294,6 @@ function handleImageError(event: Event) {
  overflow: hidden;
 }

-/* Modal transition animations */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .glass-card,
-.modal-leave-active .glass-card {
-  transition: transform 0.3s ease;
-}
-
-.modal-enter-from .glass-card {
-  transform: scale(0.95);
-}
-
-.modal-leave-to .glass-card {
-  transform: scale(0.95);
-}
-
 /* Custom scrollbar styling for apps section */
 .marketplace-container ::-webkit-scrollbar {
  width: 8px;
--- a/neode-ui/src/views/Mesh.vue
+++ b/neode-ui/src/views/Mesh.vue
@@ -4,11 +4,21 @@ import { useMeshStore } from '@/stores/mesh'
 import { useTransportStore } from '@/stores/transport'
 import type { MeshPeer, SessionStatus } from '@/stores/mesh'
 import AnimatedLogo from '@/components/AnimatedLogo.vue'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
 import { rpcClient } from '@/api/rpc-client'

 const mesh = useMeshStore()
 const transport = useTransportStore()

+// Responsive layout breakpoints
+const isWideDesktop = ref(window.innerWidth >= 1536)
+const isMobile = ref(window.innerWidth < 1280)
+
+function handleResize() {
+  isWideDesktop.value = window.innerWidth >= 1536
+  isMobile.value = window.innerWidth < 1280
+}
+
 // Active chat: either a peer or a channel
 const activeChatPeer = ref<MeshPeer | null>(null)
 const activeChatChannel = ref<{ index: number; name: string } | null>(null)
@@ -18,6 +28,7 @@ const broadcasting = ref(false)
 const configuring = ref(false)
 const connectingDevice = ref<string | null>(null)
 const chatScrollEl = ref<HTMLElement | null>(null)
+const mobileShowChat = ref(false)
 let pollInterval: ReturnType<typeof setInterval> | null = null

 // The Public channel (always available on Meshcore)
@@ -43,6 +54,27 @@ const deadmanInterval = ref('21600')
 const deadmanEnabled = ref(false)
 const deadmanCustomMsg = ref('')

+// Tools tab for 3rd column on wide desktop and mobile below-chat
+const toolsTab = ref<'bitcoin' | 'deadman'>('bitcoin')
+
+// Panel visibility computeds
+const showChatPanel = computed(() =>
+  activeTab.value === 'chat' || isWideDesktop.value || (isMobile.value && mobileShowChat.value)
+)
+// On wide desktop + mobile first view: tools use their own tab bar
+const showBitcoinPanel = computed(() => {
+  if (isWideDesktop.value || (isMobile.value && !mobileShowChat.value)) return toolsTab.value === 'bitcoin'
+  return activeTab.value === 'bitcoin'
+})
+const showDeadmanPanel = computed(() => {
+  if (isWideDesktop.value || (isMobile.value && !mobileShowChat.value)) return toolsTab.value === 'deadman'
+  return activeTab.value === 'deadman'
+})
+// Mobile tools: show on first view (peers), hide when in chat
+const showMobileTools = computed(() => isMobile.value && !mobileShowChat.value)
+// Medium desktop: show 3-tab bar. Wide + mobile: hidden (tools has own tab bar)
+const showTabBar = computed(() => !isWideDesktop.value && !isMobile.value)
+
 // Fetch session status when active peer changes
 watch(() => activeChatPeer.value, async (peer) => {
  if (peer) {
@@ -184,6 +216,7 @@ function formatTimeRemaining(secs: number): string {
 }

 onMounted(async () => {
+  window.addEventListener('resize', handleResize)
  await Promise.all([mesh.refreshAll(), transport.fetchStatus()])
  // Sync deadman UI state from server
  if (mesh.deadmanStatus) {
@@ -200,6 +233,7 @@ onMounted(async () => {
 })

 onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
  if (pollInterval) clearInterval(pollInterval)
 })

@@ -253,6 +287,7 @@ function openChat(peer: MeshPeer) {
  sendError.value = ''
  messageText.value = ''
  activeTab.value = 'chat'
+  mobileShowChat.value = true
  mesh.markChatRead(peer.contact_id)
  nextTick(() => scrollChatToBottom())
 }
@@ -263,12 +298,14 @@ function openChannelChat(channel: { index: number; name: string }) {
  sendError.value = ''
  messageText.value = ''
  activeTab.value = 'chat'
+  mobileShowChat.value = true
  nextTick(() => scrollChatToBottom())
 }

 function closeChat() {
  activeChatPeer.value = null
  activeChatChannel.value = null
+  mobileShowChat.value = false
  mesh.clearViewingChat()
 }

@@ -360,10 +397,10 @@ function truncatePubkey(hex: string | null): string {
    <!-- Error banner -->
    <div v-if="mesh.error" class="mesh-error">{{ mesh.error }}</div>

-    <!-- Two-column layout (desktop) / single-column (mobile) -->
-    <div class="mesh-columns">
+    <!-- Responsive column layout: 3-col (wide), 2-col (medium), 1-col (mobile) -->
+    <div class="mesh-columns" :class="{ 'mesh-columns-wide': isWideDesktop }">
      <!-- LEFT COLUMN: Status + Peers -->
-      <div class="mesh-left">
+      <div class="mesh-left" :class="{ 'mobile-hidden': mobileShowChat }">
        <!-- Device Status -->
        <div class="glass-card mesh-status-card">
          <div class="mesh-status-header">
@@ -499,9 +536,9 @@ function truncatePubkey(hex: string | null): string {
      </div>

      <!-- RIGHT COLUMN: Tabbed panels -->
-      <div class="mesh-right">
-        <!-- Tab bar -->
-        <div class="mesh-tab-bar">
+      <div class="mesh-right" :class="{ 'mobile-hidden': !mobileShowChat }">
+        <!-- Tab bar (medium desktop only) -->
+        <div v-if="showTabBar" class="mesh-tab-bar">
          <button class="mesh-tab" :class="{ active: activeTab === 'chat' }" @click="activeTab = 'chat'">Chat</button>
          <button class="mesh-tab" :class="{ active: activeTab === 'bitcoin' }" @click="activeTab = 'bitcoin'">
            Off-Grid Bitcoin
@@ -513,146 +550,8 @@ function truncatePubkey(hex: string | null): string {
          </button>
        </div>

-        <!-- Off-Grid Bitcoin Panel -->
-        <div v-if="activeTab === 'bitcoin'" class="glass-card mesh-bitcoin-panel">
-          <h3 class="mesh-panel-title">Off-Grid Bitcoin</h3>
-          <p class="mesh-panel-sub">Relay transactions and receive block headers via mesh radio</p>
-
-          <!-- Relay status notification -->
-          <div v-if="relayResult" class="mesh-relay-result" :class="relayResult.includes('failed') || relayResult.includes('Failed') ? 'error' : 'success'">
-            {{ relayResult }}
-          </div>
-
-          <!-- Block Headers -->
-          <div class="mesh-bitcoin-section">
-            <div class="mesh-bitcoin-section-header">
-              <span class="mesh-bitcoin-label">Latest Block</span>
-              <span v-if="mesh.latestBlockHeight > 0" class="mesh-bitcoin-height">#{{ mesh.latestBlockHeight.toLocaleString() }}</span>
-              <span v-else class="mesh-bitcoin-height mesh-muted">No headers yet</span>
-            </div>
-            <div v-if="mesh.blockHeaders.length" class="mesh-block-list">
-              <div v-for="h in mesh.blockHeaders.slice(0, 2)" :key="h.height" class="mesh-block-row">
-                <span class="mesh-block-height">#{{ h.height.toLocaleString() }}</span>
-                <span class="mesh-block-hash">{{ h.hash.slice(0, 12) }}...{{ h.hash.slice(-8) }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- On-Chain / Lightning tabs -->
-          <div class="mesh-send-tabs">
-            <button class="mesh-send-tab" :class="{ active: sendTab === 'onchain' }" @click="sendTab = 'onchain'">On-Chain</button>
-            <button class="mesh-send-tab" :class="{ active: sendTab === 'lightning' }" @click="sendTab = 'lightning'">Lightning</button>
-          </div>
-
-          <!-- On-Chain tab -->
-          <div v-if="sendTab === 'onchain'" class="mesh-bitcoin-section">
-            <p class="mesh-bitcoin-hint">Creates a signed transaction locally and relays via mesh peers</p>
-            <input v-model="meshSendAddr" class="mesh-bitcoin-input" placeholder="Bitcoin address (bc1...)" />
-            <input v-model="meshSendAmount" class="mesh-bitcoin-input mesh-bitcoin-input-sm" type="number" placeholder="Amount (sats)" min="546" />
-            <div class="mesh-relay-mode">
-              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'archy' }">
-                <input type="radio" v-model="relayMode" value="archy" />
-                <span>Archy Peers <small>(E2E encrypted, direct)</small></span>
-              </label>
-              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'broadcast' }">
-                <input type="radio" v-model="relayMode" value="broadcast" />
-                <span>Mesh Broadcast <small>(multi-hop, wider reach)</small></span>
-              </label>
-            </div>
-            <button class="glass-button" :disabled="!meshSendAddr.trim() || !meshSendAmount || relayingTx" @click="handleMeshSendBitcoin">
-              {{ relayingTx ? 'Sending...' : 'Send via Mesh' }}
-            </button>
-            <details class="mesh-bitcoin-advanced">
-              <summary class="mesh-bitcoin-label">Raw TX Relay</summary>
-              <div style="margin-top: 8px;">
-                <textarea v-model="txHexInput" class="mesh-bitcoin-input" placeholder="Paste raw transaction hex..." rows="3" />
-                <button class="glass-button" :disabled="!txHexInput.trim() || relayingTx" @click="handleRelayTx">
-                  {{ relayingTx ? 'Relaying...' : 'Relay Raw TX' }}
-                </button>
-              </div>
-            </details>
-          </div>
-
-          <!-- Lightning tab -->
-          <div v-if="sendTab === 'lightning'" class="mesh-bitcoin-section">
-            <p class="mesh-bitcoin-hint">Relays a Lightning invoice to an internet-connected peer for payment</p>
-            <input v-model="bolt11Input" class="mesh-bitcoin-input" placeholder="lnbc... (bolt11 invoice)" />
-            <input v-model="bolt11AmountInput" class="mesh-bitcoin-input mesh-bitcoin-input-sm" type="number" placeholder="Amount (sats)" />
-            <div class="mesh-relay-mode">
-              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'archy' }">
-                <input type="radio" v-model="relayMode" value="archy" />
-                <span>Archy Peers <small>(E2E encrypted, direct)</small></span>
-              </label>
-              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'broadcast' }">
-                <input type="radio" v-model="relayMode" value="broadcast" />
-                <span>Mesh Broadcast <small>(multi-hop, wider reach)</small></span>
-              </label>
-            </div>
-            <button class="glass-button" :disabled="!bolt11Input.trim() || !bolt11AmountInput || relayingLn" @click="handleRelayLightning">
-              {{ relayingLn ? 'Relaying...' : 'Pay via Mesh' }}
-            </button>
-          </div>
-
-        </div>
-
-        <!-- Dead Man's Switch Panel -->
-        <div v-if="activeTab === 'deadman'" class="glass-card mesh-deadman-panel">
-          <h3 class="mesh-panel-title">Dead Man's Switch</h3>
-          <p class="mesh-panel-sub">Auto-broadcasts a signed emergency alert if you don't check in</p>
-
-          <!-- Status -->
-          <div v-if="mesh.deadmanStatus" class="mesh-deadman-status">
-            <div class="mesh-deadman-indicator" :class="mesh.deadmanStatus.triggered ? 'triggered' : mesh.deadmanStatus.dead_man_enabled ? 'armed' : 'disabled'">
-              {{ mesh.deadmanStatus.triggered ? 'TRIGGERED' : mesh.deadmanStatus.dead_man_enabled ? 'ARMED' : 'DISABLED' }}
-            </div>
-            <div v-if="mesh.deadmanStatus.dead_man_enabled && !mesh.deadmanStatus.triggered" class="mesh-deadman-timer">
-              {{ formatTimeRemaining(mesh.deadmanStatus.time_remaining_secs) }}
-            </div>
-            <div v-if="deadmanCustomMsg || mesh.deadmanStatus.dead_man_enabled" class="mesh-deadman-message">
-              {{ deadmanCustomMsg || 'Dead man\'s switch triggered — operator unresponsive' }}
-            </div>
-            <button v-if="mesh.deadmanStatus.dead_man_enabled" class="glass-button mesh-deadman-checkin-btn" @click="handleDeadmanCheckin">
-              I'm OK — Check In
-            </button>
-          </div>
-
-          <!-- Configuration -->
-          <div class="mesh-deadman-config">
-            <label class="mesh-deadman-toggle">
-              <input v-model="deadmanEnabled" type="checkbox" @change="handleDeadmanToggle" />
-              <span>{{ deadmanEnabled ? 'Dead Man\'s Switch Active' : 'Enable Dead Man\'s Switch' }}</span>
-            </label>
-
-            <template v-if="deadmanEnabled">
-              <div class="mesh-deadman-field">
-                <label class="mesh-bitcoin-label">Trigger Interval</label>
-                <select v-model="deadmanInterval" class="mesh-bitcoin-input mesh-bitcoin-input-sm">
-                  <option value="3600">1 hour</option>
-                  <option value="21600">6 hours</option>
-                  <option value="43200">12 hours</option>
-                  <option value="86400">24 hours</option>
-                </select>
-              </div>
-
-              <div class="mesh-deadman-field">
-                <label class="mesh-bitcoin-label">Alert Message</label>
-                <input v-model="deadmanCustomMsg" class="mesh-bitcoin-input" placeholder="Dead man's switch triggered — operator unresponsive" />
-              </div>
-
-              <div class="mesh-deadman-info">
-                <span v-if="mesh.deadmanStatus?.has_gps" class="mesh-deadman-info-item">GPS: included</span>
-                <span class="mesh-deadman-info-item">Contacts: {{ mesh.deadmanStatus?.emergency_contacts ?? 0 }}</span>
-              </div>
-
-              <button class="glass-button" :disabled="deadmanConfiguring" @click="handleDeadmanConfigure">
-                {{ deadmanConfiguring ? 'Saving...' : 'Save Configuration' }}
-              </button>
-            </template>
-          </div>
-        </div>
-
-        <!-- Chat Panel (existing) -->
-        <div v-if="activeTab === 'chat'" class="glass-card mesh-chat-card">
+        <!-- Chat Panel (before tools so it gets grid-column 2 on wide) -->
+        <div v-if="showChatPanel" class="glass-card mesh-chat-card">
          <!-- No chat selected -->
          <div v-if="!hasActiveChat" class="mesh-chat-empty">
            <div class="mesh-chat-empty-icon">&#x1F4E1;</div>
@@ -758,12 +657,228 @@ function truncatePubkey(hex: string | null): string {
                  {{ mesh.sending ? '...' : 'Send' }}
                </button>
              </div>
-              <div class="mesh-chat-compose-meta">
-                <span>{{ messageText.length }}/160</span>
-              </div>
            </div>
          </template>
        </div>
+
+        <!-- Off-Grid Bitcoin + Dead Man's Switch panels -->
+        <div class="mesh-tools-wrapper">
+        <!-- Tools tab bar (wide desktop only — mobile has its own outside mesh-right) -->
+        <div v-if="isWideDesktop" class="mesh-tools-tab-bar">
+          <button class="mesh-tab" :class="{ active: toolsTab === 'bitcoin' }" @click="toolsTab = 'bitcoin'">
+            Off-Grid Bitcoin
+            <span v-if="mesh.latestBlockHeight > 0" class="mesh-tab-badge">{{ mesh.latestBlockHeight }}</span>
+          </button>
+          <button class="mesh-tab" :class="{ active: toolsTab === 'deadman' }" @click="toolsTab = 'deadman'">
+            Dead Man
+            <span v-if="mesh.deadmanStatus?.triggered" class="mesh-tab-badge mesh-tab-badge-alert">!</span>
+          </button>
+        </div>
+
+        <!-- Off-Grid Bitcoin Panel -->
+        <div v-if="showBitcoinPanel" class="glass-card mesh-bitcoin-panel">
+          <h3 class="mesh-panel-title">Off-Grid Bitcoin</h3>
+          <p class="mesh-panel-sub">Relay transactions and receive block headers via mesh radio</p>
+
+          <!-- Relay status notification -->
+          <div v-if="relayResult" class="mesh-relay-result" :class="relayResult.includes('failed') || relayResult.includes('Failed') ? 'error' : 'success'">
+            {{ relayResult }}
+          </div>
+
+          <!-- Block Headers -->
+          <div class="mesh-bitcoin-section">
+            <div class="mesh-bitcoin-section-header">
+              <span class="mesh-bitcoin-label">Latest Block</span>
+              <span v-if="mesh.latestBlockHeight > 0" class="mesh-bitcoin-height">#{{ mesh.latestBlockHeight.toLocaleString() }}</span>
+              <span v-else class="mesh-bitcoin-height mesh-muted">No headers yet</span>
+            </div>
+            <div v-if="mesh.blockHeaders.length" class="mesh-block-list">
+              <div v-for="h in mesh.blockHeaders.slice(0, 2)" :key="h.height" class="mesh-block-row">
+                <span class="mesh-block-height">#{{ h.height.toLocaleString() }}</span>
+                <span class="mesh-block-hash">{{ h.hash.slice(0, 12) }}...{{ h.hash.slice(-8) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- On-Chain / Lightning tabs -->
+          <div class="mesh-send-tabs">
+            <button class="mesh-send-tab" :class="{ active: sendTab === 'onchain' }" @click="sendTab = 'onchain'">On-Chain</button>
+            <button class="mesh-send-tab" :class="{ active: sendTab === 'lightning' }" @click="sendTab = 'lightning'">Lightning</button>
+          </div>
+
+          <!-- On-Chain tab -->
+          <div v-if="sendTab === 'onchain'" class="mesh-bitcoin-section">
+            <p class="mesh-bitcoin-hint">Creates a signed transaction locally and relays via mesh peers</p>
+            <input v-model="meshSendAddr" class="mesh-bitcoin-input" placeholder="Bitcoin address (bc1...)" />
+            <input v-model="meshSendAmount" class="mesh-bitcoin-input mesh-bitcoin-input-sm" type="number" placeholder="Amount (sats)" min="546" />
+            <div class="mesh-relay-mode">
+              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'archy' }">
+                <input type="radio" v-model="relayMode" value="archy" />
+                <span>Archy Peers <small>(E2E encrypted, direct)</small></span>
+              </label>
+              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'broadcast' }">
+                <input type="radio" v-model="relayMode" value="broadcast" />
+                <span>Mesh Broadcast <small>(multi-hop, wider reach)</small></span>
+              </label>
+            </div>
+            <button class="glass-button" :disabled="!meshSendAddr.trim() || !meshSendAmount || relayingTx" @click="handleMeshSendBitcoin">
+              {{ relayingTx ? 'Sending...' : 'Send via Mesh' }}
+            </button>
+            <details class="mesh-bitcoin-advanced">
+              <summary class="mesh-bitcoin-label">Raw TX Relay</summary>
+              <div style="margin-top: 8px;">
+                <textarea v-model="txHexInput" class="mesh-bitcoin-input" placeholder="Paste raw transaction hex..." rows="3" />
+                <button class="glass-button" :disabled="!txHexInput.trim() || relayingTx" @click="handleRelayTx">
+                  {{ relayingTx ? 'Relaying...' : 'Relay Raw TX' }}
+                </button>
+              </div>
+            </details>
+          </div>
+
+          <!-- Lightning tab -->
+          <div v-if="sendTab === 'lightning'" class="mesh-bitcoin-section">
+            <p class="mesh-bitcoin-hint">Relays a Lightning invoice to an internet-connected peer for payment</p>
+            <input v-model="bolt11Input" class="mesh-bitcoin-input" placeholder="lnbc... (bolt11 invoice)" />
+            <input v-model="bolt11AmountInput" class="mesh-bitcoin-input mesh-bitcoin-input-sm" type="number" placeholder="Amount (sats)" />
+            <div class="mesh-relay-mode">
+              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'archy' }">
+                <input type="radio" v-model="relayMode" value="archy" />
+                <span>Archy Peers <small>(E2E encrypted, direct)</small></span>
+              </label>
+              <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'broadcast' }">
+                <input type="radio" v-model="relayMode" value="broadcast" />
+                <span>Mesh Broadcast <small>(multi-hop, wider reach)</small></span>
+              </label>
+            </div>
+            <button class="glass-button" :disabled="!bolt11Input.trim() || !bolt11AmountInput || relayingLn" @click="handleRelayLightning">
+              {{ relayingLn ? 'Relaying...' : 'Pay via Mesh' }}
+            </button>
+          </div>
+
+        </div>
+
+        <!-- Dead Man's Switch Panel -->
+        <div v-if="showDeadmanPanel" class="glass-card mesh-deadman-panel">
+          <h3 class="mesh-panel-title">Dead Man's Switch</h3>
+          <p class="mesh-panel-sub">Auto-broadcasts a signed emergency alert if you don't check in</p>
+
+          <!-- Status -->
+          <div v-if="mesh.deadmanStatus" class="mesh-deadman-status">
+            <div class="mesh-deadman-indicator" :class="mesh.deadmanStatus.triggered ? 'triggered' : mesh.deadmanStatus.dead_man_enabled ? 'armed' : 'disabled'">
+              {{ mesh.deadmanStatus.triggered ? 'TRIGGERED' : mesh.deadmanStatus.dead_man_enabled ? 'ARMED' : 'DISABLED' }}
+            </div>
+            <div v-if="mesh.deadmanStatus.dead_man_enabled && !mesh.deadmanStatus.triggered" class="mesh-deadman-timer">
+              {{ formatTimeRemaining(mesh.deadmanStatus.time_remaining_secs) }}
+            </div>
+            <div v-if="deadmanCustomMsg || mesh.deadmanStatus.dead_man_enabled" class="mesh-deadman-message">
+              {{ deadmanCustomMsg || 'Dead man\'s switch triggered — operator unresponsive' }}
+            </div>
+            <button v-if="mesh.deadmanStatus.dead_man_enabled" class="glass-button mesh-deadman-checkin-btn" @click="handleDeadmanCheckin">
+              I'm OK — Check In
+            </button>
+          </div>
+
+          <!-- Configuration -->
+          <div class="mesh-deadman-config">
+            <button
+              @click="deadmanEnabled = !deadmanEnabled; handleDeadmanToggle()"
+              class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-3"
+              :class="deadmanEnabled
+                ? 'bg-white/10 border-orange-500/40'
+                : 'bg-black/20 border-white/10 hover:border-white/20'"
+            >
+              <svg class="w-5 h-5 shrink-0" :class="deadmanEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium" :class="deadmanEnabled ? 'text-white/95' : 'text-white/70'">{{ deadmanEnabled ? 'Dead Man\'s Switch Active' : 'Enable Dead Man\'s Switch' }}</p>
+                <p class="text-xs text-white/50 mt-0.5">Auto-alerts your contacts if you don't check in</p>
+              </div>
+              <ToggleSwitch :model-value="deadmanEnabled" @click.stop @update:model-value="deadmanEnabled = $event; handleDeadmanToggle()" />
+            </button>
+
+            <template v-if="deadmanEnabled">
+              <div class="mesh-deadman-field">
+                <label class="mesh-bitcoin-label">Trigger Interval</label>
+                <select v-model="deadmanInterval" class="mesh-bitcoin-input mesh-bitcoin-input-sm">
+                  <option value="3600">1 hour</option>
+                  <option value="21600">6 hours</option>
+                  <option value="43200">12 hours</option>
+                  <option value="86400">24 hours</option>
+                </select>
+              </div>
+
+              <div class="mesh-deadman-field">
+                <label class="mesh-bitcoin-label">Alert Message</label>
+                <input v-model="deadmanCustomMsg" class="mesh-bitcoin-input" placeholder="Dead man's switch triggered — operator unresponsive" />
+              </div>
+
+              <div class="mesh-deadman-info">
+                <span v-if="mesh.deadmanStatus?.has_gps" class="mesh-deadman-info-item">GPS: included</span>
+                <span class="mesh-deadman-info-item">Contacts: {{ mesh.deadmanStatus?.emergency_contacts ?? 0 }}</span>
+              </div>
+
+              <button class="glass-button" :disabled="deadmanConfiguring" @click="handleDeadmanConfigure">
+                {{ deadmanConfiguring ? 'Saving...' : 'Save Configuration' }}
+              </button>
+            </template>
+          </div>
+        </div>
+
+        </div><!-- /.mesh-tools-wrapper -->
+      </div>
+
+      <!-- Mobile tools: show under peers list on first view -->
+      <div v-if="showMobileTools" class="mesh-mobile-tools">
+        <div class="mesh-tools-tab-bar">
+          <button class="mesh-tab" :class="{ active: toolsTab === 'bitcoin' }" @click="toolsTab = 'bitcoin'">
+            Off-Grid Bitcoin
+            <span v-if="mesh.latestBlockHeight > 0" class="mesh-tab-badge">{{ mesh.latestBlockHeight }}</span>
+          </button>
+          <button class="mesh-tab" :class="{ active: toolsTab === 'deadman' }" @click="toolsTab = 'deadman'">
+            Dead Man
+            <span v-if="mesh.deadmanStatus?.triggered" class="mesh-tab-badge mesh-tab-badge-alert">!</span>
+          </button>
+        </div>
+        <div v-if="showBitcoinPanel" class="glass-card mesh-bitcoin-panel">
+          <!-- Reuse same content via a shared approach - for now inline -->
+          <h3 class="mesh-panel-title">Off-Grid Bitcoin</h3>
+          <p class="mesh-panel-sub">Relay transactions and receive block headers via mesh radio</p>
+          <div class="mesh-bitcoin-section">
+            <div class="mesh-bitcoin-section-header">
+              <span class="mesh-bitcoin-label">Latest Block</span>
+              <span v-if="mesh.latestBlockHeight > 0" class="mesh-bitcoin-height">#{{ mesh.latestBlockHeight.toLocaleString() }}</span>
+              <span v-else class="mesh-bitcoin-height mesh-muted">No headers yet</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="showDeadmanPanel" class="glass-card mesh-deadman-panel">
+          <h3 class="mesh-panel-title">Dead Man's Switch</h3>
+          <p class="mesh-panel-sub">Auto-broadcasts a signed emergency alert if you don't check in</p>
+          <div v-if="mesh.deadmanStatus" class="mesh-deadman-status">
+            <div class="mesh-deadman-indicator" :class="mesh.deadmanStatus.triggered ? 'triggered' : mesh.deadmanStatus.dead_man_enabled ? 'armed' : 'disabled'">
+              {{ mesh.deadmanStatus.triggered ? 'TRIGGERED' : mesh.deadmanStatus.dead_man_enabled ? 'ARMED' : 'DISABLED' }}
+            </div>
+          </div>
+          <div class="mesh-deadman-config">
+            <button
+              @click="deadmanEnabled = !deadmanEnabled; handleDeadmanToggle()"
+              class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left"
+              :class="deadmanEnabled
+                ? 'bg-white/10 border-orange-500/40'
+                : 'bg-black/20 border-white/10 hover:border-white/20'"
+            >
+              <svg class="w-5 h-5 shrink-0" :class="deadmanEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium" :class="deadmanEnabled ? 'text-white/95' : 'text-white/70'">{{ deadmanEnabled ? 'Dead Man\'s Switch Active' : 'Enable Dead Man\'s Switch' }}</p>
+                <p class="text-xs text-white/50 mt-0.5">Auto-alerts your contacts if you don't check in</p>
+              </div>
+              <ToggleSwitch :model-value="deadmanEnabled" @click.stop @update:model-value="deadmanEnabled = $event; handleDeadmanToggle()" />
+            </button>
+          </div>
+        </div>
      </div>
    </div>
  </div>
@@ -772,7 +887,7 @@ function truncatePubkey(hex: string | null): string {
 <style scoped>
 .mesh-view {
  padding: 24px;
-  max-width: 1200px;
+  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
@@ -873,6 +988,65 @@ function truncatePubkey(hex: string | null): string {
  overflow: hidden;
 }

+/* Tools wrapper: holds Off-Grid Bitcoin + Dead Man panels */
+.mesh-tools-wrapper {
+  display: contents;
+}
+
+/* Tools tab bar: hidden by default (medium desktop uses main tab bar) */
+.mesh-tools-tab-bar {
+  display: none;
+}
+
+/* ─── Wide desktop: 3-column layout ─── */
+.mesh-columns-wide {
+  display: grid;
+  grid-template-columns: 340px 1fr 1fr;
+  gap: 16px;
+}
+
+.mesh-columns-wide .mesh-left {
+  grid-column: 1;
+  width: auto;
+}
+
+.mesh-columns-wide .mesh-right {
+  display: contents;
+}
+
+.mesh-columns-wide .mesh-chat-card {
+  grid-column: 2;
+  grid-row: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.mesh-columns-wide .mesh-tools-wrapper {
+  grid-column: 3;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.mesh-columns-wide .mesh-tools-tab-bar {
+  display: flex;
+  gap: 2px;
+  background: rgba(0,0,0,0.3);
+  border-radius: 10px;
+  padding: 3px;
+  flex-shrink: 0;
+  margin-bottom: 12px;
+}
+
+/* Hide main tab bar and mobile back button on wide desktop */
+.mesh-columns-wide .mesh-mobile-back-btn,
+.mesh-columns-wide .mesh-tab-bar {
+  display: none;
+}
+
 /* ─── Status card ─── */
 .mesh-status-card { padding: 16px; flex-shrink: 0; }

@@ -1408,12 +1582,17 @@ function truncatePubkey(hex: string | null): string {
  margin-top: 4px;
 }

-/* ─── Mobile: keep single column ─── */
-@media (max-width: 768px) {
+/* ─── Mobile back button (hidden on desktop) ─── */
+.mesh-mobile-back-btn {
+  display: none;
+}
+
+/* ─── Mobile: single column with panel switching ─── */
+@media (max-width: 1279px) {
  .mesh-view {
    height: auto;
    overflow: visible;
-    padding: 0 12px 12px 12px;
+    padding: 0 12px 100px 12px; /* bottom padding clears tab bar */
  }

  .mesh-columns {
@@ -1427,7 +1606,44 @@ function truncatePubkey(hex: string | null): string {
  }

  .mesh-right {
-    min-height: 400px;
+    min-height: auto;
+    overflow: visible;
+  }
+
+  /* Chat takes available viewport height minus tab bars */
+  .mesh-chat-card {
+    min-height: 60dvh;
+    max-height: 75dvh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Hide tools-wrapper inside mesh-right (shown via mesh-mobile-tools instead) */
+  .mesh-tools-wrapper {
+    display: none !important;
+  }
+
+  /* Tools section under peers — fixed height so no jump on tab switch */
+  .mesh-mobile-tools {
+    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .mesh-mobile-tools .mesh-tools-tab-bar {
+    display: flex;
+    gap: 2px;
+    background: rgba(0,0,0,0.3);
+    border-radius: 10px;
+    padding: 3px;
+  }
+
+  /* Fixed-height panel container so switching tabs doesn't resize */
+  .mesh-mobile-tools .mesh-bitcoin-panel,
+  .mesh-mobile-tools .mesh-deadman-panel {
+    min-height: 320px;
  }

  .mesh-status-grid {
@@ -1437,6 +1653,23 @@ function truncatePubkey(hex: string | null): string {
  .mesh-chat-back {
    display: block;
  }
+
+  /* Hide panel on mobile when toggled */
+  .mobile-hidden {
+    display: none !important;
+  }
+
+  /* Bitcoin and deadman panels should not flex-grow on mobile */
+  .mesh-bitcoin-panel,
+  .mesh-deadman-panel {
+    flex: none;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .mesh-mobile-back-btn:hover {
+    color: rgba(255, 255, 255, 0.9);
+  }
 }

 /* ─── Session badge ─── */
@@ -1571,7 +1804,7 @@ function truncatePubkey(hex: string | null): string {
 }
 .mesh-bitcoin-input::placeholder { color: rgba(255,255,255,0.3); }
 .mesh-bitcoin-input:focus { outline: none; border-color: rgba(251,146,60,0.4); }
-.mesh-bitcoin-input-sm { max-width: 200px; }
+.mesh-bitcoin-input-sm { width: 100%; }
 .mesh-relay-mode {
  display: flex;
  gap: 8px;
--- a/neode-ui/src/views/Monitoring.vue
+++ b/neode-ui/src/views/Monitoring.vue
@@ -102,14 +102,7 @@
          :key="rule.kind"
          class="flex items-center gap-3 p-3 bg-white/5 rounded-lg"
        >
-          <label class="monitoring-alert-toggle">
-            <input
-              type="checkbox"
-              :checked="rule.enabled"
-              @change="toggleAlertRule(rule.kind, !rule.enabled)"
-            />
-            <span class="monitoring-alert-toggle-slider"></span>
-          </label>
+          <ToggleSwitch :model-value="rule.enabled" @update:model-value="toggleAlertRule(rule.kind, $event)" />
          <div class="flex-1 min-w-0">
            <p class="text-sm text-white">{{ ruleLabel(rule.kind) }}</p>
            <p class="text-xs text-white/40">{{ rule.description }}</p>
@@ -223,6 +216,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
 import LineChart from '@/components/LineChart.vue'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
 import type { ChartDataset } from '@/components/LineChart.vue'

 interface SystemMetrics {
--- a/neode-ui/src/views/PeerFiles.vue
+++ b/neode-ui/src/views/PeerFiles.vue
@@ -47,7 +47,7 @@

    <!-- Error -->
    <div v-else-if="catalogError" class="glass-card p-6">
-      <p class="text-red-400 text-sm mb-3">{{ catalogError }}</p>
+      <div class="alert-error mb-4">{{ catalogError }}</div>
      <button class="glass-button px-4 py-2 rounded-lg text-sm" @click="loadCatalog">Retry</button>
    </div>

--- a/neode-ui/src/views/Server.vue
+++ b/neode-ui/src/views/Server.vue
@@ -88,16 +88,7 @@
                <p class="text-xs text-white/60">{{ autoSyncEnabled ? 'Enabled' : 'Disabled' }}</p>
              </div>
            </div>
-            <button
-              @click="toggleAutoSync"
-              class="relative inline-flex h-8 w-14 items-center rounded-full transition-colors shrink-0"
-              :class="autoSyncEnabled ? 'bg-green-500' : 'bg-white/20'"
-            >
-              <span
-                class="inline-block h-6 w-6 transform rounded-full bg-white transition-transform shadow"
-                :class="autoSyncEnabled ? 'translate-x-7' : 'translate-x-1'"
-              />
-            </button>
+            <ToggleSwitch v-model="autoSyncEnabled" />
          </div>
        </div>

@@ -123,7 +114,7 @@
    </div>

    <!-- Overview Cards -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
      <!-- Local Network Card -->
      <div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col">
        <div class="flex items-start gap-4 mb-4 shrink-0">
@@ -284,92 +275,86 @@
      </div>
    </div>

-    <!-- Network Interfaces -->
-    <div class="glass-card p-6 mb-6">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h2 class="text-xl font-semibold text-white mb-1">Network Interfaces</h2>
-          <p class="text-sm text-white/60">Detected hardware and virtual interfaces</p>
-        </div>
-        <button
-          v-if="wifiAvailable"
-          @click="showWifiModal = true"
-          class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
-        >
-          Scan WiFi
-        </button>
-      </div>
-
-      <template v-if="interfacesLoading">
-        <div class="space-y-3">
-          <div v-for="i in 3" :key="i" class="p-3 bg-white/5 rounded-lg animate-pulse h-14"></div>
-        </div>
-      </template>
-      <template v-else>
-        <div class="space-y-3">
-          <div
-            v-for="iface in physicalInterfaces"
-            :key="iface.name"
-            class="flex items-center justify-between p-3 bg-white/5 rounded-lg"
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-6">
+      <!-- Network Interfaces -->
+      <div class="glass-card p-6">
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <h2 class="text-xl font-semibold text-white mb-1">Network Interfaces</h2>
+            <p class="text-sm text-white/60">Detected hardware and virtual interfaces</p>
+          </div>
+          <button
+            v-if="wifiAvailable"
+            @click="showWifiModal = true"
+            class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
          >
-            <div class="flex items-center gap-3">
-              <div class="w-2 h-2 rounded-full" :class="iface.state === 'up' ? 'bg-green-400' : 'bg-white/30'"></div>
-              <div>
-                <p class="text-sm font-medium text-white">{{ iface.name }}</p>
-                <p class="text-xs text-white/50">{{ iface.type === 'wifi' ? 'WiFi' : 'Ethernet' }} &middot; {{ iface.mac }}</p>
+            Scan WiFi
+          </button>
+        </div>
+
+        <template v-if="interfacesLoading">
+          <div class="space-y-3">
+            <div v-for="i in 3" :key="i" class="p-3 bg-white/5 rounded-lg animate-pulse h-14"></div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="space-y-3">
+            <div
+              v-for="iface in physicalInterfaces"
+              :key="iface.name"
+              class="flex items-center justify-between p-3 bg-white/5 rounded-lg"
+            >
+              <div class="flex items-center gap-3">
+                <div class="w-2 h-2 rounded-full" :class="iface.state === 'up' ? 'bg-green-400' : 'bg-white/30'"></div>
+                <div>
+                  <p class="text-sm font-medium text-white">{{ iface.name }}</p>
+                  <p class="text-xs text-white/50">{{ iface.type === 'wifi' ? 'WiFi' : 'Ethernet' }} &middot; {{ iface.mac }}</p>
+                </div>
+              </div>
+              <div class="text-right">
+                <p v-if="iface.ipv4.length > 0" class="text-sm text-white/80">{{ iface.ipv4[0] }}</p>
+                <p v-else class="text-sm text-white/40">No IP</p>
              </div>
            </div>
-            <div class="text-right">
-              <p v-if="iface.ipv4.length > 0" class="text-sm text-white/80">{{ iface.ipv4[0] }}</p>
-              <p v-else class="text-sm text-white/40">No IP</p>
-            </div>
+            <p v-if="physicalInterfaces.length === 0" class="text-sm text-white/50 text-center py-4">No physical interfaces detected</p>
          </div>
-          <p v-if="physicalInterfaces.length === 0" class="text-sm text-white/50 text-center py-4">No physical interfaces detected</p>
-        </div>
-      </template>
-    </div>
-
-    <!-- Tor Services -->
-    <div class="glass-card px-6 py-6 mb-6">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h2 class="text-xl font-semibold text-white/96">Tor Services</h2>
-          <p class="text-sm text-white/60 mt-1">Manage hidden service addresses for your node and apps</p>
-        </div>
-        <button @click="loadTorServices" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
-          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-          </svg>
-          Refresh
-        </button>
+        </template>
      </div>
-      <div v-if="torServicesLoading && torServices.length === 0" class="text-sm text-white/40 py-4 text-center">Loading Tor services...</div>
-      <div v-else-if="torServices.length === 0" class="text-sm text-white/40 py-4 text-center">No Tor services configured</div>
-      <div v-else class="space-y-2">
-        <div v-for="svc in torServices" :key="svc.name" class="bg-black/20 rounded-xl border border-white/10 p-3 flex items-center justify-between gap-3">
-          <div class="flex-1 min-w-0">
-            <p class="text-white text-sm font-medium">{{ svc.name }}</p>
-            <p v-if="svc.onion_address" class="text-amber-300/80 text-xs font-mono truncate cursor-pointer" :title="svc.onion_address" @click="copyTorAddress(svc.onion_address)">{{ svc.onion_address }}</p>
-            <p v-else class="text-white/30 text-xs">No .onion address</p>
+
+      <!-- Tor Services -->
+      <div class="glass-card p-6">
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <h2 class="text-xl font-semibold text-white/96">Tor Services</h2>
+            <p class="text-sm text-white/60 mt-1">Manage hidden service addresses for your node and apps</p>
          </div>
-          <div class="flex items-center gap-2 shrink-0">
-            <button
-              v-if="svc.onion_address && svc.enabled"
-              @click="rotateService(svc.name)"
-              :disabled="torRotating === svc.name"
-              class="glass-button px-3 py-1.5 rounded-lg text-xs"
-            >
-              {{ torRotating === svc.name ? 'Rotating...' : 'Rotate' }}
-            </button>
-            <label class="tor-toggle-label">
-              <input
-                type="checkbox"
-                :checked="svc.enabled"
-                @change="toggleTorApp(svc.name, !svc.enabled)"
-                class="tor-toggle-input"
-              />
-              <span class="tor-toggle-slider"></span>
-            </label>
+          <button @click="loadTorServices" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
+            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            Refresh
+          </button>
+        </div>
+        <div v-if="torServicesLoading && torServices.length === 0" class="text-sm text-white/40 py-4 text-center">Loading Tor services...</div>
+        <div v-else-if="torServices.length === 0" class="text-sm text-white/40 py-4 text-center">No Tor services configured</div>
+        <div v-else class="space-y-2">
+          <div v-for="svc in torServices" :key="svc.name" class="bg-black/20 rounded-xl border border-white/10 p-3 flex items-center justify-between gap-3">
+            <div class="flex-1 min-w-0">
+              <p class="text-white text-sm font-medium">{{ svc.name }}</p>
+              <p v-if="svc.onion_address" class="text-amber-300/80 text-xs font-mono truncate cursor-pointer" :title="svc.onion_address" @click="copyTorAddress(svc.onion_address)">{{ svc.onion_address }}</p>
+              <p v-else class="text-white/30 text-xs">No .onion address</p>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <button
+                v-if="svc.onion_address && svc.enabled"
+                @click="rotateService(svc.name)"
+                :disabled="torRotating === svc.name"
+                class="glass-button px-3 py-1.5 rounded-lg text-xs"
+              >
+                {{ torRotating === svc.name ? 'Rotating...' : 'Rotate' }}
+              </button>
+              <ToggleSwitch :model-value="svc.enabled" @update:model-value="toggleTorApp(svc.name, $event)" />
+            </div>
          </div>
        </div>
      </div>
@@ -512,6 +497,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { rpcClient } from '@/api/rpc-client'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'

 // Connected nodes
 const connectedNodes = ref(0)
@@ -904,10 +890,6 @@ async function checkConnectivity() {
  }
 }

-function toggleAutoSync() {
-  autoSyncEnabled.value = !autoSyncEnabled.value
-}
-
 const logsToast = ref('')

 function viewLogs() {
--- a/neode-ui/src/views/Settings.vue
+++ b/neode-ui/src/views/Settings.vue
@@ -247,7 +247,7 @@
      <div data-controller-container tabindex="0" class="mb-6">
        <button
          @click="showChangePasswordModal = true"
-          class="w-full flex items-center justify-center gap-2 mb-4 px-4 py-2 rounded-lg border border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10 transition-colors"
+          class="w-full flex items-center justify-center gap-2 mb-4 px-4 py-2 rounded-lg glass-button glass-button-warning font-medium"
        >
          <svg class="w-5 h-5" 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" />
@@ -341,7 +341,7 @@
          </div>
          <span
            class="text-xs font-semibold px-2 py-1 rounded-full"
-            :class="totpEnabled ? 'bg-green-500/20 text-green-400' : 'bg-white/10 text-white/50'"
+            :class="totpEnabled ? 'status-success' : 'bg-white/10 text-white/50'"
          >
            {{ totpEnabled ? t('common.enabled') : t('common.disabled') }}
          </span>
@@ -349,7 +349,7 @@
        <button
          v-if="!totpEnabled"
          @click="showTotpSetupModal = true"
-          class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10 transition-colors"
+          class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg glass-button glass-button-warning font-medium"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
@@ -359,7 +359,7 @@
        <button
          v-else
          @click="showTotpDisableModal = true"
-          class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-red-500/50 text-red-400 font-medium hover:bg-red-500/10 transition-colors"
+          class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg glass-button glass-button-danger font-medium"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
@@ -617,7 +617,7 @@
        class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors"
        :class="claudeConnected
          ? 'border-white/20 text-white/70 hover:bg-white/5'
-          : 'border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10'"
+          : 'glass-button-warning font-medium'"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
@@ -674,15 +674,7 @@
          <p class="text-sm font-medium" :class="aiPermissions.allEnabled ? 'text-white/95' : 'text-white/70'">{{ t('common.enableAll') }}</p>
          <p class="text-xs text-white/50 mt-0.5">{{ t('settings.enableAllDesc') }}</p>
        </div>
-        <div
-          class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
-          :class="aiPermissions.allEnabled ? 'bg-orange-500' : 'bg-white/15'"
-        >
-          <div
-            class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
-            :class="aiPermissions.allEnabled ? 'translate-x-5' : 'translate-x-1'"
-          />
-        </div>
+        <ToggleSwitch :model-value="aiPermissions.allEnabled" @update:model-value="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()" @click.stop />
      </button>

      <div class="space-y-5">
@@ -705,15 +697,7 @@
                <p class="text-sm font-medium" :class="aiPermissions.isEnabled(cat.id) ? 'text-white/95' : 'text-white/70'">{{ cat.label }}</p>
                <p class="text-xs text-white/50 mt-0.5">{{ cat.description }}</p>
              </div>
-              <div
-                class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
-                :class="aiPermissions.isEnabled(cat.id) ? 'bg-orange-500' : 'bg-white/15'"
-              >
-                <div
-                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
-                  :class="aiPermissions.isEnabled(cat.id) ? 'translate-x-5' : 'translate-x-1'"
-                />
-              </div>
+              <ToggleSwitch :model-value="aiPermissions.isEnabled(cat.id)" @update:model-value="aiPermissions.toggle(cat.id)" @click.stop />
            </button>
          </div>
        </div>
@@ -744,22 +728,7 @@
          <h2 class="text-xl font-semibold text-white/96">{{ t('settings.webhookNotifications') }}</h2>
          <p class="text-sm text-white/60 mt-1">{{ t('settings.webhookNotificationsDesc') }}</p>
        </div>
-        <div class="flex items-center gap-3">
-          <button
-            @click="toggleWebhookEnabled"
-            role="switch"
-            :aria-checked="webhookConfig.enabled"
-            :aria-label="webhookConfig.enabled ? t('settings.disableWebhooks') : t('settings.enableWebhooks')"
-            class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
-            :class="webhookConfig.enabled ? 'bg-orange-500' : 'bg-white/15'"
-            :title="webhookConfig.enabled ? t('settings.disableWebhooks') : t('settings.enableWebhooks')"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
-              :class="webhookConfig.enabled ? 'translate-x-5' : 'translate-x-1'"
-            />
-          </button>
-        </div>
+        <ToggleSwitch :model-value="webhookConfig.enabled" @update:model-value="toggleWebhookEnabled" />
      </div>

      <div class="space-y-4">
@@ -824,7 +793,7 @@
          <button
            @click="saveWebhookConfig"
            :disabled="savingWebhook"
-            class="glass-button px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 bg-orange-500/20 border-orange-500/30 disabled:opacity-50"
+            class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
          >
            {{ savingWebhook ? t('settings.savingWebhook') : t('common.saveConfiguration') }}
          </button>
@@ -839,7 +808,7 @@
      </div>

      <!-- Webhook status message -->
-      <div v-if="webhookStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="webhookStatusType === 'error' ? 'bg-red-500/15 text-red-300' : 'bg-green-500/15 text-green-300'">
+      <div v-if="webhookStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="webhookStatusType === 'error' ? 'alert-error' : 'alert-success'">
        {{ webhookStatusMsg }}
      </div>
    </div>
@@ -855,7 +824,7 @@
          @click="toggleTelemetry"
          :disabled="telemetryLoading"
          class="shrink-0 ml-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-          :class="telemetryEnabled ? 'bg-green-500/20 text-green-300 border border-green-500/30 hover:bg-green-500/30' : 'glass-button'"
+          :class="telemetryEnabled ? 'glass-button glass-button-success' : 'glass-button'"
        >
          {{ telemetryLoading ? '...' : telemetryEnabled ? 'Enabled' : 'Enable' }}
        </button>
@@ -906,7 +875,7 @@
      </div>

      <!-- Backup status message -->
-      <div v-if="backupStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="backupStatusType === 'error' ? 'bg-red-500/15 text-red-300' : 'bg-green-500/15 text-green-300'">
+      <div v-if="backupStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="backupStatusType === 'error' ? 'alert-error' : 'alert-success'">
        {{ backupStatusMsg }}
      </div>
    </div>
@@ -928,7 +897,7 @@
          </div>
          <div class="flex gap-3 mt-5">
            <button @click="showCreateBackupModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
-            <button @click="createBackup" :disabled="creatingBackup || !backupPassphrase" class="glass-button px-4 py-2 rounded-lg text-sm flex-1 bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
+            <button @click="createBackup" :disabled="creatingBackup || !backupPassphrase" class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
              {{ creatingBackup ? t('settings.creatingBackup') : t('settings.createBackup') }}
            </button>
          </div>
@@ -948,7 +917,7 @@
          </div>
          <div class="flex gap-3 mt-5">
            <button @click="showRestoreModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
-            <button @click="restoreBackup" :disabled="restoringBackup || !restorePassphrase" class="glass-button px-4 py-2 rounded-lg text-sm flex-1 bg-red-500/20 border-red-500/30 disabled:opacity-50">
+            <button @click="restoreBackup" :disabled="restoringBackup || !restorePassphrase" class="glass-button glass-button-danger px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
              {{ restoringBackup ? t('common.restoring') : t('common.restore') }}
            </button>
          </div>
@@ -979,7 +948,7 @@
        Wipe all user data, identities, and credentials. Container images are preserved. The node will restart and show the onboarding screen.
      </p>
      <button
-        class="glass-button text-red-400 border-red-500/30 hover:border-red-500/50"
+        class="glass-button glass-button-danger"
        @click="showFactoryResetConfirm = true"
      >
        Factory Reset
@@ -997,7 +966,7 @@
          <div class="flex gap-3 justify-end">
            <button class="glass-button" @click="showFactoryResetConfirm = false">Cancel</button>
            <button
-              class="glass-button text-red-400 border-red-500/30"
+              class="glass-button glass-button-danger"
              :disabled="factoryResetLoading"
              @click="performFactoryReset"
            >
@@ -1020,6 +989,7 @@ import { useAppStore } from '../stores/app'
 import { useUIModeStore } from '@/stores/uiMode'
 import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
 import ControllerIndicator from '@/components/ControllerIndicator.vue'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
 import { rpcClient } from '@/api/rpc-client'
 import { useModalKeyboard } from '@/composables/useModalKeyboard'
 import type { UIMode } from '@/types/api'
--- a/neode-ui/src/views/Web5.vue
+++ b/neode-ui/src/views/Web5.vue
@@ -34,16 +34,16 @@
              <p v-else class="text-xs text-white/60 capitalize">{{ didStatus }}</p>
            </div>
          </div>
-          <div v-if="userDid" class="flex gap-2">
+          <div v-if="userDid" class="flex gap-2 mt-auto">
            <button
              @click="copyDid"
-              class="px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+              class="flex-1 px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            >
              {{ didCopied ? t('common.copiedBang') : t('web5.copyDid') }}
            </button>
            <button
              @click="showDidDocument"
-              class="px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+              class="flex-1 px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            >
              {{ t('web5.viewDidDocument') }}
            </button>
@@ -52,7 +52,7 @@
            v-else
            @click="createDID"
            :disabled="creatingDid"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+            class="w-full mt-auto px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
          >
            {{ creatingDid ? t('web5.creatingDid') : t('web5.createDid') }}
          </button>
@@ -70,17 +70,17 @@
              <p v-else class="text-xs text-white/60">Not published</p>
            </div>
          </div>
-          <div v-if="dhtDid" class="flex gap-2">
+          <div v-if="dhtDid" class="flex gap-2 mt-auto">
            <button
              @click="copyDhtDid"
-              class="px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+              class="flex-1 px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            >
              {{ dhtDidCopied ? 'Copied!' : 'Copy' }}
            </button>
            <button
              @click="refreshDhtDid"
              :disabled="publishingDht"
-              class="px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+              class="flex-1 px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
            >
              {{ publishingDht ? 'Refreshing...' : 'Refresh DHT' }}
            </button>
@@ -89,7 +89,7 @@
            v-else-if="userDid"
            @click="publishDhtDid"
            :disabled="publishingDht"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+            class="w-full mt-auto px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
          >
            {{ publishingDht ? 'Publishing...' : 'Publish to DHT' }}
          </button>
@@ -109,7 +109,7 @@
          </div>
          <button
            @click="connectWallet"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+            class="w-full mt-auto px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
            :disabled="connectingWallet"
          >
            {{ connectingWallet ? t('common.connecting') : walletConnected ? t('common.disconnect') : t('common.connect') }}
@@ -130,7 +130,7 @@
          </div>
          <button
            @click="manageRelays"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+            class="w-full mt-auto px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
          >
            {{ t('common.manage') }}
          </button>
@@ -148,18 +148,18 @@
              <p class="text-xs text-white/60">{{ t('web5.peersKnown', { count: connectedNodesCount }) }}</p>
            </div>
          </div>
-          <div class="flex gap-2">
+          <div class="flex gap-2 mt-auto">
            <button
              @click="router.push('/dashboard/server/federation')"
-              class="px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+              class="flex-1 px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            >
-              {{ t('web5.findNodes') }}
+              Nodes
            </button>
            <button
              @click="showSendMessageModal = true"
-              class="px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+              class="flex-1 px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            >
-              {{ t('web5.sendMessage') }}
+              Message
            </button>
          </div>
        </div>
@@ -167,7 +167,7 @@
    </div>

    <!-- Hardware Wallet Detected Banner -->
-    <div v-if="detectedHwWallets.length > 0" class="mb-6 p-4 bg-orange-500/10 border border-orange-500/20 rounded-xl flex items-center gap-3">
+    <div v-if="detectedHwWallets.length > 0" class="mb-6 alert-warning flex items-center gap-3">
      <div class="w-8 h-8 rounded-lg bg-orange-500/20 flex items-center justify-center flex-shrink-0">
        <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
@@ -413,6 +413,8 @@
          </div>
        </transition>

+        <div v-if="walletError" class="alert-error mb-3">{{ walletError }}</div>
+
        <div class="space-y-3 flex-1 min-h-0">
          <!-- On-chain Balance -->
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
@@ -587,8 +589,11 @@
      </div>
    </div>

+    <!-- Connected Nodes + Shared Content grid -->
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
+
    <!-- Connected Nodes (P2P over Tor) -->
-    <div ref="nodesContainerRef" data-controller-container tabindex="0" class="glass-card p-6 mb-8 scroll-mt-24">
+    <div ref="nodesContainerRef" data-controller-container tabindex="0" class="glass-card p-6 scroll-mt-24 flex flex-col">
        <!-- Desktop: side-by-side layout -->
        <div class="hidden md:flex items-start gap-4 mb-4">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
@@ -758,11 +763,12 @@
          </div>
        </div>

+        <div class="mt-auto pt-4">
        <button
          v-if="nodesContainerTab === 'peers'"
          @click="discoverAndAddPeers"
          :disabled="discovering"
-          class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+          class="w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
        >
          {{ discovering ? t('web5.discovering') : t('web5.discoverNodes') }}
        </button>
@@ -770,7 +776,7 @@
          v-else-if="nodesContainerTab === 'messages'"
          @click="loadReceivedMessages"
          :disabled="loadingMessages"
-          class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+          class="w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
        >
          {{ loadingMessages ? t('common.loading') : t('web5.refreshMessages') }}
        </button>
@@ -778,14 +784,15 @@
          v-else
          @click="loadConnectionRequests"
          :disabled="loadingRequests"
-          class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+          class="w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
        >
          {{ loadingRequests ? t('common.loading') : t('web5.refreshRequests') }}
        </button>
+        </div>
      </div>

    <!-- Shared Content -->
-    <div class="glass-card p-6 mb-8">
+    <div class="glass-card p-6">
      <!-- Desktop: side-by-side -->
      <div class="hidden md:flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
@@ -835,6 +842,29 @@
        </div>
      </div>

+      <!-- Browse Peer Selector -->
+      <div class="mb-4">
+        <div class="flex items-center gap-3">
+          <select
+            v-model="browsePeerOnion"
+            class="flex-1 px-3 py-2 rounded-lg bg-white/10 text-white text-sm border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+          >
+            <option value="">{{ t('web5.selectPeer') }}</option>
+            <option v-for="p in peers" :key="p.pubkey" :value="p.onion">
+              {{ p.name || p.onion || (p.pubkey || '').slice(0, 12) + '...' }}
+            </option>
+          </select>
+          <button
+            @click="browsePeerContent"
+            :disabled="!browsePeerOnion || browsingPeerContent"
+            class="glass-button glass-button-sm px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
+          >
+            {{ browsingPeerContent ? t('common.loading') : t('web5.browse') }}
+          </button>
+        </div>
+        <p v-if="browsePeerError" class="text-xs text-red-400 mt-2">{{ browsePeerError }}</p>
+      </div>
+
      <!-- Tabs: My Content | Browse Peers -->
      <div class="flex gap-1 mb-4 border-b border-white/10">
        <button
@@ -941,29 +971,6 @@

      <!-- Browse Peers tab -->
      <div v-show="contentTab === 'browse'">
-        <!-- Peer Selector -->
-        <div class="mb-4">
-          <div class="flex items-center gap-3">
-            <select
-              v-model="browsePeerOnion"
-              class="flex-1 px-3 py-2 rounded-lg bg-white/10 text-white text-sm border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
-            >
-              <option value="">{{ t('web5.selectPeer') }}</option>
-              <option v-for="p in peers" :key="p.pubkey" :value="p.onion">
-                {{ p.name || p.onion || (p.pubkey || '').slice(0, 12) + '...' }}
-              </option>
-            </select>
-            <button
-              @click="browsePeerContent"
-              :disabled="!browsePeerOnion || browsingPeerContent"
-              class="glass-button glass-button-sm px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
-            >
-              {{ browsingPeerContent ? t('common.loading') : t('web5.browse') }}
-            </button>
-          </div>
-          <p v-if="browsePeerError" class="text-xs text-red-400 mt-2">{{ browsePeerError }}</p>
-        </div>
-
        <!-- Peer Content Loading -->
        <div v-if="browsingPeerContent" class="py-4 text-center">
          <svg class="animate-spin h-6 w-6 text-blue-400 mx-auto mb-2" fill="none" viewBox="0 0 24 24">
@@ -1038,6 +1045,8 @@
      </div>
    </div>

+    </div> <!-- end Connected Nodes + Shared Content grid -->
+
    <!-- Content Streaming Player -->
    <Teleport to="body">
      <div v-if="streamingItem" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="closePlayer" @keydown.escape="closePlayer">
@@ -1087,8 +1096,8 @@
            </div>

            <!-- Player Error -->
-            <div v-if="playerError" class="mt-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
-              <p class="text-red-400 text-sm">{{ playerError }}</p>
+            <div v-if="playerError" class="mt-3 alert-error">
+              <p>{{ playerError }}</p>
              <p class="text-white/50 text-xs mt-1">This may be a Tor-only resource. Copy the URL to use with a Tor-enabled media player.</p>
            </div>

@@ -1118,15 +1127,15 @@
          <div class="space-y-4">
            <div>
              <label class="text-white/60 text-sm block mb-1">Filename</label>
-              <input v-model="newContentFilename" type="text" placeholder="my-file.mp3" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="newContentFilename" type="text" placeholder="my-file.mp3" class="w-full input-glass" />
            </div>
            <div>
              <label class="text-white/60 text-sm block mb-1">MIME Type</label>
-              <input v-model="newContentMimeType" type="text" placeholder="audio/mpeg" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="newContentMimeType" type="text" placeholder="audio/mpeg" class="w-full input-glass" />
            </div>
            <div>
              <label class="text-white/60 text-sm block mb-1">Description (optional)</label>
-              <input v-model="newContentDescription" type="text" placeholder="A short description" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="newContentDescription" type="text" placeholder="A short description" class="w-full input-glass" />
            </div>
            <div>
              <label class="text-white/60 text-sm block mb-2">Access</label>
@@ -1144,16 +1153,16 @@
            </div>
            <div v-if="newContentAccess === 'paid'">
              <label class="text-white/60 text-sm block mb-1">Price (sats)</label>
-              <input v-model.number="newContentPrice" type="number" min="1" placeholder="100" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model.number="newContentPrice" type="number" min="1" placeholder="100" class="w-full input-glass" />
              <p v-if="newContentPrice > 0" class="text-xs text-orange-400/80 mt-1">Peers will pay {{ newContentPrice }} sats to access this</p>
            </div>
          </div>
-          <div v-if="addContentError" class="mt-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
-            <p class="text-red-300 text-xs">{{ addContentError }}</p>
+          <div v-if="addContentError" class="mt-3 alert-error">
+            <p class="text-xs">{{ addContentError }}</p>
          </div>
          <div class="flex gap-3 mt-6">
            <button @click="showAddContentModal = false; addContentError = ''" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.cancel') }}</button>
-            <button @click="addContentItem" :disabled="addingContent || !newContentFilename.trim()" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
+            <button @click="addContentItem" :disabled="addingContent || !newContentFilename.trim()" class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
              {{ addingContent ? 'Adding...' : 'Add' }}
            </button>
          </div>
@@ -1161,8 +1170,11 @@
      </div>
    </Teleport>

+    <!-- Identities + DWN grid -->
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
+
    <!-- Identity Management -->
-    <div class="glass-card p-6 mb-8">
+    <div class="glass-card p-6">
      <!-- Desktop: side-by-side -->
      <div class="hidden md:flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
@@ -1302,7 +1314,7 @@
        <div class="space-y-4">
          <div>
            <label class="text-white/60 text-sm block mb-1">Name</label>
-            <input v-model="newIdentityName" type="text" placeholder="Personal" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="newIdentityName" type="text" placeholder="Personal" class="w-full input-glass" />
          </div>
          <div>
            <label class="text-white/60 text-sm block mb-1">Purpose</label>
@@ -1317,8 +1329,8 @@
            </div>
          </div>
        </div>
-        <div v-if="createIdentityError" class="mt-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
-          <p class="text-red-300 text-xs">{{ createIdentityError }}</p>
+        <div v-if="createIdentityError" class="mt-3 alert-error">
+          <p class="text-xs">{{ createIdentityError }}</p>
        </div>
        <div class="flex gap-3 mt-6">
          <button @click="showCreateIdentityModal = false" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.cancel') }}</button>
@@ -1338,7 +1350,7 @@
        <p class="text-white/60 text-sm mb-4">{{ t('web5.deleteIdentityConfirm') }}</p>
        <div class="flex gap-3">
          <button @click="deleteIdentityTarget = null" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.cancel') }}</button>
-          <button @click="deleteIdentity" :disabled="deletingIdentity" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-red-500/20 border-red-500/30">
+          <button @click="deleteIdentity" :disabled="deletingIdentity" class="flex-1 glass-button glass-button-danger px-4 py-2 rounded-lg text-sm font-medium">
            {{ deletingIdentity ? t('web5.deleting') : t('common.delete') }}
          </button>
        </div>
@@ -1430,7 +1442,7 @@
                v-model="keyViewerPassword"
                type="password"
                placeholder="Password"
-                class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"
+                class="flex-1 input-glass"
                @keydown.enter="unlockPrivateKeys"
              />
              <button
@@ -1507,41 +1519,41 @@
        <div class="space-y-3">
          <div>
            <label class="text-white/60 text-xs block mb-1">Display Name</label>
-            <input v-model="profileForm.display_name" type="text" :placeholder="profileEditorIdentity.name" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="profileForm.display_name" type="text" :placeholder="profileEditorIdentity.name" class="w-full input-glass" />
          </div>
          <div>
            <label class="text-white/60 text-xs block mb-1">About / Bio</label>
-            <textarea v-model="profileForm.about" rows="3" placeholder="A short bio..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30 resize-none"></textarea>
+            <textarea v-model="profileForm.about" rows="3" placeholder="A short bio..." class="w-full input-glass resize-none"></textarea>
          </div>
          <div>
            <label class="text-white/60 text-xs block mb-1">Profile Picture URL</label>
-            <input v-model="profileForm.picture" type="url" placeholder="https://..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="profileForm.picture" type="url" placeholder="https://..." class="w-full input-glass" />
          </div>
          <div>
            <label class="text-white/60 text-xs block mb-1">Banner Image URL</label>
-            <input v-model="profileForm.banner" type="url" placeholder="https://..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="profileForm.banner" type="url" placeholder="https://..." class="w-full input-glass" />
          </div>
          <div>
            <label class="text-white/60 text-xs block mb-1">Website</label>
-            <input v-model="profileForm.website" type="url" placeholder="https://..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="profileForm.website" type="url" placeholder="https://..." class="w-full input-glass" />
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="text-white/60 text-xs block mb-1">NIP-05 (Nostr address)</label>
-              <input v-model="profileForm.nip05" type="text" placeholder="you@domain.com" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="profileForm.nip05" type="text" placeholder="you@domain.com" class="w-full input-glass" />
            </div>
            <div>
              <label class="text-white/60 text-xs block mb-1">Lightning Address (LUD-16)</label>
-              <input v-model="profileForm.lud16" type="text" placeholder="you@getalby.com" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="profileForm.lud16" type="text" placeholder="you@getalby.com" class="w-full input-glass" />
            </div>
          </div>
        </div>

-        <div v-if="profileError" class="mt-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
-          <p class="text-red-300 text-xs">{{ profileError }}</p>
+        <div v-if="profileError" class="mt-3 alert-error">
+          <p class="text-xs">{{ profileError }}</p>
        </div>
-        <div v-if="profileSuccess" class="mt-3 p-2 bg-green-500/20 border border-green-500/30 rounded-lg">
-          <p class="text-green-300 text-xs">{{ profileSuccess }}</p>
+        <div v-if="profileSuccess" class="mt-3 alert-success">
+          <p class="text-xs">{{ profileSuccess }}</p>
        </div>

        <div class="flex gap-3 mt-5">
@@ -1549,7 +1561,7 @@
          <button @click="saveProfile" :disabled="profileSaving" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium">
            {{ profileSaving ? 'Saving...' : 'Save' }}
          </button>
-          <button @click="publishProfile" :disabled="profilePublishing" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30">
+          <button @click="publishProfile" :disabled="profilePublishing" class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium">
            {{ profilePublishing ? 'Publishing...' : 'Save & Publish' }}
          </button>
        </div>
@@ -1582,7 +1594,7 @@
        <!-- Amount -->
        <div class="mb-3">
          <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
-          <input v-model.number="unifiedSendAmount" type="number" min="1" placeholder="1000" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+          <input v-model.number="unifiedSendAmount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
        </div>

        <!-- Destination (varies by method) -->
@@ -1590,7 +1602,7 @@
          <label class="text-white/60 text-sm block mb-1">
            {{ effectiveSendMethod === 'lightning' ? 'Lightning Invoice (BOLT11)' : 'Bitcoin Address' }}
          </label>
-          <textarea v-model="unifiedSendDest" rows="2" :placeholder="effectiveSendMethod === 'lightning' ? 'lnbc...' : 'bc1...'" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-white/30"></textarea>
+          <textarea v-model="unifiedSendDest" rows="2" :placeholder="effectiveSendMethod === 'lightning' ? 'lnbc...' : 'bc1...'" class="w-full input-glass font-mono"></textarea>
        </div>

        <!-- Ecash token output -->
@@ -1635,7 +1647,7 @@
        </div>

        <!-- Mesh Relay Prompt — shown when offline -->
-        <div v-if="showMeshRelayPrompt" class="mb-3 p-4 bg-orange-500/10 border border-orange-500/30 rounded-lg">
+        <div v-if="showMeshRelayPrompt" class="mb-3 alert-warning">
          <div class="flex items-center gap-2 mb-2">
            <span class="text-lg">&#x1F4E1;</span>
            <p class="text-orange-300 text-sm font-medium">You are offline</p>
@@ -1643,12 +1655,12 @@
          <p class="text-white/70 text-xs mb-3">Send this transaction via mesh radio? It will be relayed by the nearest internet-connected node and you'll receive confirmation updates.</p>
          <div class="flex gap-2">
            <button @click="dismissMeshRelayPrompt" class="flex-1 glass-button px-3 py-2 rounded-lg text-xs">Cancel</button>
-            <button @click="handleMeshRelaySend" class="flex-1 glass-button px-3 py-2 rounded-lg text-xs font-medium bg-orange-500/20 border-orange-500/30">Send via Mesh</button>
+            <button @click="handleMeshRelaySend" class="flex-1 glass-button glass-button-warning px-3 py-2 rounded-lg text-xs font-medium">Send via Mesh</button>
          </div>
        </div>

        <!-- Mesh Relay Status -->
-        <div v-if="meshRelayActive" class="mb-3 p-3 bg-orange-500/10 border border-orange-500/20 rounded-lg">
+        <div v-if="meshRelayActive" class="mb-3 alert-warning">
          <div class="flex items-center gap-2 mb-1">
            <svg class="animate-spin h-3 w-3 text-orange-400" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -1660,23 +1672,23 @@
        </div>

        <!-- On-chain txid result -->
-        <div v-if="sendResultTxid" class="mb-3 p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
-          <p class="text-green-400 text-xs">Sent! TX: {{ sendResultTxid }}</p>
+        <div v-if="sendResultTxid" class="mb-3 alert-success">
+          <p class="text-xs">Sent! TX: {{ sendResultTxid }}</p>
        </div>

        <!-- Lightning payment result -->
-        <div v-if="sendResultHash" class="mb-3 p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
-          <p class="text-green-400 text-xs">Paid! Hash: {{ sendResultHash }}</p>
+        <div v-if="sendResultHash" class="mb-3 alert-success">
+          <p class="text-xs">Paid! Hash: {{ sendResultHash }}</p>
        </div>

        <div v-if="unifiedSendError" class="mb-3 text-xs text-red-400">{{ unifiedSendError }}</div>

        <div class="flex gap-3">
          <button @click="closeUnifiedSendModal" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-          <button v-if="psbtStep === 'created'" @click="finalizePsbt" :disabled="unifiedSendProcessing || !signedPsbtInput.trim()" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
+          <button v-if="psbtStep === 'created'" @click="finalizePsbt" :disabled="unifiedSendProcessing || !signedPsbtInput.trim()" class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
            {{ unifiedSendProcessing ? 'Broadcasting...' : 'Broadcast' }}
          </button>
-          <button v-else @click="unifiedSend" :disabled="unifiedSendProcessing || !unifiedSendAmount" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
+          <button v-else @click="unifiedSend" :disabled="unifiedSendProcessing || !unifiedSendAmount" class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
            {{ unifiedSendProcessing ? 'Sending...' : (useHardwareWallet && effectiveSendMethod === 'onchain' ? 'Create PSBT' : 'Send') }}
          </button>
        </div>
@@ -1705,11 +1717,11 @@
        <div v-if="receiveMethod === 'lightning'">
          <div class="mb-3">
            <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
-            <input v-model.number="receiveInvoiceAmount" type="number" min="1" placeholder="1000" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model.number="receiveInvoiceAmount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
          </div>
          <div class="mb-3">
            <label class="text-white/60 text-sm block mb-1">Memo (optional)</label>
-            <input v-model="receiveInvoiceMemo" type="text" placeholder="Payment for..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="receiveInvoiceMemo" type="text" placeholder="Payment for..." class="w-full input-glass" />
          </div>
          <div v-if="receiveInvoiceResult" class="mb-3 p-2 bg-white/5 rounded-lg">
            <p class="text-white/50 text-xs mb-1">Invoice (share with sender):</p>
@@ -1735,7 +1747,7 @@
        <div v-if="receiveMethod === 'ecash'">
          <div class="mb-3">
            <label class="text-white/60 text-sm block mb-1">Paste ecash token</label>
-            <textarea v-model="ecashReceiveToken" rows="3" placeholder="cashuSend_..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"></textarea>
+            <textarea v-model="ecashReceiveToken" rows="3" placeholder="cashuSend_..." class="w-full input-glass"></textarea>
          </div>
          <div v-if="ecashReceiveResult" class="mb-3 text-xs text-green-400">{{ ecashReceiveResult }}</div>
        </div>
@@ -1744,7 +1756,7 @@

        <div class="flex gap-3">
          <button @click="closeUnifiedReceiveModal" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-          <button @click="unifiedReceive" :disabled="unifiedReceiveProcessing" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-green-500/20 border-green-500/30 disabled:opacity-50">
+          <button @click="unifiedReceive" :disabled="unifiedReceiveProcessing" class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
            {{ unifiedReceiveProcessing ? 'Processing...' : receiveMethod === 'onchain' ? 'Generate Address' : receiveMethod === 'lightning' ? 'Create Invoice' : 'Receive' }}
          </button>
        </div>
@@ -1753,7 +1765,7 @@
    </Teleport>

    <!-- Decentralized Web Node (DWN) -->
-    <div class="glass-card p-6 mb-8">
+    <div class="glass-card p-6">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
          <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
@@ -1907,6 +1919,8 @@
      </template>
    </div>

+    </div> <!-- end Identities + DWN grid -->
+
    <!-- Verifiable Credentials -->
    <div class="glass-card p-6 mb-8">
      <!-- Desktop: side-by-side -->
@@ -2018,16 +2032,16 @@
          <div class="grid grid-cols-2 gap-3 mb-3">
            <div>
              <label class="text-white/60 text-xs block mb-1">Username</label>
-              <input v-model="newDomainName" type="text" placeholder="satoshi" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="newDomainName" type="text" placeholder="satoshi" class="w-full input-glass" />
            </div>
            <div>
              <label class="text-white/60 text-xs block mb-1">Domain</label>
-              <input v-model="newDomainDomain" type="text" placeholder="example.com" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+              <input v-model="newDomainDomain" type="text" placeholder="example.com" class="w-full input-glass" />
            </div>
          </div>
          <div class="mb-3">
            <label class="text-white/60 text-xs block mb-1">Link to Identity</label>
-            <select v-model="newDomainIdentityId" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30">
+            <select v-model="newDomainIdentityId" class="w-full input-glass">
              <option value="" disabled>Select identity...</option>
              <option v-for="id in managedIdentities" :key="id.id" :value="id.id">{{ id.name }} ({{ (id.did || '').slice(0, 24) }}...)</option>
            </select>
@@ -2042,7 +2056,7 @@
        <div class="border-t border-white/10 pt-4 mt-4">
          <h3 class="text-sm font-semibold text-white mb-3">{{ t('web5.verifyNip05') }}</h3>
          <div class="flex gap-2">
-            <input v-model="verifyNip05Input" type="text" placeholder="user@domain.com" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <input v-model="verifyNip05Input" type="text" placeholder="user@domain.com" class="flex-1 input-glass" />
            <button @click="verifyNip05" :disabled="nip05Verifying || !verifyNip05Input.trim()" class="glass-button px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
              {{ nip05Verifying ? '...' : 'Verify' }}
            </button>
@@ -2093,7 +2107,7 @@
        <div class="border-t border-white/10 pt-4">
          <h3 class="text-sm font-semibold text-white mb-3">{{ t('web5.addRelay') }}</h3>
          <div class="flex gap-2">
-            <input v-model="newRelayUrl" type="text" :placeholder="t('web5.relayUrlPlaceholder')" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" @keyup.enter="addNostrRelay" />
+            <input v-model="newRelayUrl" type="text" :placeholder="t('web5.relayUrlPlaceholder')" class="flex-1 input-glass" @keyup.enter="addNostrRelay" />
            <button @click="addNostrRelay" :disabled="!newRelayUrl.trim()" class="glass-button px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
              Add
            </button>
@@ -2541,6 +2555,7 @@ const walletConnected = ref(false)
 const connectingWallet = ref(false)
 const lndOnchainBalance = ref(0)
 const lndChannelBalance = ref(0)
+const walletError = ref('')

 // Incoming Transactions
 interface WalletTransaction {
@@ -2567,13 +2582,15 @@ async function loadTransactions() {
  try {
    const res = await rpcClient.call<{ transactions: WalletTransaction[]; incoming_pending_count: number }>({ method: 'lnd.gettransactions' })
    walletTransactions.value = res.transactions || []
+    walletError.value = ''
    // Auto-show panel when new unconfirmed incoming txs appear
    const pending = res.incoming_pending_count || 0
    if (pending > 0 && !showIncomingTxPanel.value) {
      showIncomingTxPanel.value = true
    }
-  } catch {
+  } catch (e) {
    walletTransactions.value = []
+    walletError.value = e instanceof Error ? e.message : 'Failed to load transactions'
  }
 }

@@ -3876,10 +3893,12 @@ async function loadLndBalances() {
    lndOnchainBalance.value = res.balance_sats || 0
    lndChannelBalance.value = res.channel_balance_sats || 0
    walletConnected.value = true
-  } catch {
+    walletError.value = ''
+  } catch (e) {
    walletConnected.value = false
    lndOnchainBalance.value = 0
    lndChannelBalance.value = 0
+    walletError.value = e instanceof Error ? e.message : 'Failed to load wallet balances'
  }
 }

--- a/neode-ui/src/views/apps/LightningChannels.vue
+++ b/neode-ui/src/views/apps/LightningChannels.vue
@@ -130,7 +130,7 @@
              v-model="openForm.peerUri"
              type="text"
              placeholder="pubkey@host:port"
-              class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"
+              class="w-full input-glass"
            />
            <p class="text-white/40 text-xs mt-1">Format: pubkey@host:port</p>
          </div>
@@ -141,14 +141,14 @@
              type="number"
              min="20000"
              placeholder="100000"
-              class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"
+              class="w-full input-glass"
            />
            <p class="text-white/40 text-xs mt-1">Minimum 20,000 sats</p>
          </div>
        </div>

-        <div v-if="openError" class="mt-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
-          <p class="text-red-300 text-xs">{{ openError }}</p>
+        <div v-if="openError" class="mt-3 alert-error">
+          <p class="text-xs">{{ openError }}</p>
        </div>

        <div class="flex gap-3 mt-6">
@@ -169,15 +169,15 @@
      <div class="glass-card p-6 w-full max-w-sm mx-4">
        <h2 class="text-lg font-bold text-white mb-2">Close Channel?</h2>
        <p class="text-white/60 text-sm mb-4">This will cooperatively close the channel with peer {{ closeTarget.remote_pubkey.slice(0, 16) }}...</p>
-        <div v-if="closeError" class="mb-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
-          <p class="text-red-300 text-xs">{{ closeError }}</p>
+        <div v-if="closeError" class="mb-3 alert-error">
+          <p class="text-xs">{{ closeError }}</p>
        </div>
        <div class="flex gap-3">
          <button @click="closeTarget = null" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">Cancel</button>
          <button
            @click="closeChannel"
            :disabled="closingChannel"
-            class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-red-500/20 border-red-500/30"
+            class="flex-1 glass-button glass-button-danger px-4 py-2 rounded-lg text-sm font-medium"
          >
            {{ closingChannel ? 'Closing...' : 'Close' }}
          </button>