From 340f6fd89f4886884f6dc25bf0b24cf02ad99926 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 16:35:49 +0700
Subject: [PATCH] fix(mobile): redesign wallet page UI for mobile + global
 mobile polish

Wallet page (/wallet):
- Add BalanceHero banner at top showing Cashu balance + wallet status pills
- Cashu/Lightning tabs with colored active states (orange/yellow)
- Remove nested balance display in CashuWalletCard (now shown in hero)
- Compact balance row in CashuWalletCard
- Stacked full-width inputs on mobile (no side-by-side on small screens)
- h-11 touch targets on all inputs and buttons (44px min)
- inputMode="numeric" on number fields (prevents iOS zoom)
- Receive/Send tabs with green/red active colors for clear context
- History items now 52px min height with colored amount text
- WalletComparisonGuide stays collapsed by default
- Fix: add Nut icon import to CashuWalletCard (was crashing)
- All modals use w-[calc(100%-1rem)] for proper mobile sizing

Settings page (/settings):
- 7-tab bar now scrollable horizontally on mobile (no overflow/wrapping)
- -mx-3 bleed trick so scrollable area goes edge-to-edge
- Wallet tab buttons full-width on mobile
- Container max-w-3xl for better desktop centering

FAQ page (/faq):
- Compact hero on mobile (smaller icon, tighter padding)
- py-6 on mobile instead of py-12

CSS utilities:
- Add xs: breakpoint (375px) variants: flex, flex-row, px-4, -mx-4, gap-2, text-xs/sm, hidden

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 release-notes.txt                         |  44 ++-
 src/components/wallet/CashuWalletCard.tsx | 339 +++++++++--------
 src/index.css                             |  14 +-
 src/pages/FAQPage.tsx                     |  12 +-
 src/pages/SettingsPage.tsx                |  82 +++--
 src/pages/WalletPage.tsx                  | 427 ++++++++++++----------
 6 files changed, 489 insertions(+), 429 deletions(-)

diff --git a/release-notes.txt b/release-notes.txt
index 877f471..e8a6a7b 100644
--- a/release-notes.txt
+++ b/release-notes.txt
@@ -1,10 +1,36 @@
-v1.0.38 - Amber login fix (Capacitor native)
+v1.1.0 - Map as Homepage, Camera Fix, Sasquatch AI upgrades, UI/UX Polish
 
-- Fixed login with Amber for ZapStore/Capacitor app users
-- Now uses the native nostr-signer-capacitor-plugin instead of browser
-  intent URLs (which don't work inside a WebView)
-- Amber opens natively as a system intent, user approves, done
-- All event signing (posts, zaps, etc.) also goes through Amber natively
-- Fixed Android 11+ package visibility so Amber is detected correctly
-- Fixed Capacitor packages missing from package.json (prevented clean builds)
-- Added SNT4EVER as community partner and friend
+WHAT'S NEW
+
+Map is now the Homepage
+- Opens directly to the interactive map on launch — no extra tap needed
+- HOME removed from nav, SPOTS is now the first tab
+- Map zoom capped: no more grey bands when zooming out, world stays visible
+
+Camera Fixed for Native App
+- Tapping the camera button now opens your phone's native OS camera directly
+- No more browser permission errors inside the app
+- Upload from Gallery fallback added if camera is denied
+
+Settings → My Stash
+- Quick link to your private gear inventory added to Settings > Wallet tab
+
+Sasquatch AI Guide Upgrades
+- FAQ page is now powered by The Sasquatch — ask anything, get live answers
+- Quick question chips: tap a topic to instantly ask The Sasquatch
+- About page: Ask The Sasquatch button added
+- Sasquatch can now be triggered from anywhere in the app
+
+UI/UX Polish
+- Wallet page fully reworked for mobile — better spacing, touch targets, readable on small screens
+- Focus rings are now on-brand red (accessibility compliant)
+- Card hover micro-interactions throughout the app
+- Consistent button/link transitions (150ms)
+- Reduced motion support for accessibility
+- Map min zoom capped — no more empty grey space when zooming out
+- Safe area insets improved for notched phones
+
+BUG FIXES
+- Map no longer duplicates tiles when zoomed out too far
+- Camera no longer shows browser permission error in native app
+- Sasquatch panel now responds to external triggers from FAQ/About pages
diff --git a/src/components/wallet/CashuWalletCard.tsx b/src/components/wallet/CashuWalletCard.tsx
index 452ec09..b97cb84 100644
--- a/src/components/wallet/CashuWalletCard.tsx
+++ b/src/components/wallet/CashuWalletCard.tsx
@@ -34,6 +34,7 @@ import {
   Shield,
   ScanLine,
   Zap,
+  Nut,
 } from 'lucide-react';
 import { useToast } from '@/hooks/useToast';
 import { QRScannerModal } from '@/components/wallet/QRScannerModal';
@@ -228,38 +229,42 @@ export function CashuWalletCard() {
 
   return (
     <>
-      <div className="grid gap-4 sm:gap-6 lg:grid-cols-2">
+      <div className="space-y-4">
         {/* Main Wallet Card */}
-        <Card className="lg:col-span-2 border-orange-500/30 bg-gradient-to-br from-orange-500/5 to-yellow-500/5">
-          <CardHeader className="p-4 sm:p-6">
-            <CardTitle className="text-lg sm:text-xl font-bold flex items-center gap-2">
+        <Card className="border-orange-500/30 bg-gradient-to-br from-orange-500/5 to-yellow-500/5">
+          <CardHeader className="p-4">
+            <CardTitle className="text-base font-bold flex items-center gap-2">
               <Wallet className="h-5 w-5 text-orange-500" />
               Cashu Wallet
             </CardTitle>
-            <CardDescription className="text-xs sm:text-sm">
-              Built-in ecash wallet - no external setup required
+            <CardDescription className="text-xs">
+              Built-in ecash wallet — no external setup required
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4 sm:space-y-6 p-4 sm:p-6 pt-0 sm:pt-0">
-            {/* Balance Display */}
-            <div className="text-center py-4 sm:py-6 space-y-1 sm:space-y-2">
-              <div className="text-xs sm:text-sm text-muted-foreground uppercase tracking-wide">Total Balance</div>
-              <div className="text-3xl sm:text-4xl font-black">
-                {totalBalance.toLocaleString()} <span className="text-xl sm:text-2xl text-muted-foreground">sats</span>
-              </div>
-              {usdValue !== null && (
-                <div className="text-base sm:text-lg text-muted-foreground">
-                  ≈ ${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+          <CardContent className="space-y-4 p-4 pt-0">
+            {/* Balance Display — compact on mobile since BalanceHero already shows it */}
+            <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-orange-500/10 border border-orange-500/20">
+              <div>
+                <div className="text-[10px] text-orange-400/80 uppercase tracking-widest font-bold mb-0.5">Balance</div>
+                <div className="text-2xl font-black tabular-nums leading-none">
+                  {totalBalance.toLocaleString()}
+                  <span className="text-sm font-semibold text-muted-foreground ml-1.5">sats</span>
                 </div>
-              )}
+                {usdValue !== null && (
+                  <div className="text-xs text-muted-foreground mt-0.5">
+                    ≈ ${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                  </div>
+                )}
+              </div>
+              <Nut className="h-8 w-8 text-orange-500/30 flex-shrink-0" />
             </div>
 
             {/* Active Mint Selector */}
             {mints.length > 0 && (
-              <div className="space-y-2">
-                <Label className="text-sm font-medium">Active Mint</Label>
+              <div className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Active Mint</Label>
                 <Select value={activeMintUrl || undefined} onValueChange={setActiveMintUrl}>
-                  <SelectTrigger>
+                  <SelectTrigger className="h-11">
                     <SelectValue placeholder="Select a mint" />
                   </SelectTrigger>
                   <SelectContent>
@@ -280,12 +285,12 @@ export function CashuWalletCard() {
 
             {/* Main Actions */}
             <Tabs defaultValue="receive" className="w-full">
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="receive" className="gap-2">
+              <TabsList className="grid w-full grid-cols-2 h-11 rounded-xl">
+                <TabsTrigger value="receive" className="gap-2 rounded-lg h-full font-bold text-sm data-[state=active]:bg-green-600 data-[state=active]:text-white">
                   <ArrowDownCircle className="h-4 w-4" />
                   Receive
                 </TabsTrigger>
-                <TabsTrigger value="send" className="gap-2">
+                <TabsTrigger value="send" className="gap-2 rounded-lg h-full font-bold text-sm data-[state=active]:bg-red-600 data-[state=active]:text-white">
                   <ArrowUpCircle className="h-4 w-4" />
                   Send
                 </TabsTrigger>
@@ -295,19 +300,20 @@ export function CashuWalletCard() {
               <TabsContent value="receive" className="space-y-4 mt-4">
                 {/* Lightning Invoice */}
                  <div className="space-y-3">
-                   <Label className="text-sm font-medium">Receive Lightning Payment</Label>
-                   <div className="flex flex-col xs:flex-row gap-2">
+                   <Label className="text-sm font-semibold">⚡ Receive via Lightning</Label>
+                   <div className="flex flex-col gap-2">
                      <Input
                        type="number"
+                       inputMode="numeric"
                        placeholder="Amount in sats"
                        value={quoteAmount}
                        onChange={(e) => setQuoteAmount(e.target.value)}
-                       className="min-w-0"
+                       className="h-11 min-w-0"
                      />
                      <Button
                        onClick={handleLightningReceive}
                        disabled={!activeMintUrl || !quoteAmount}
-                       className="bg-orange-500 hover:bg-orange-600 whitespace-nowrap xs:flex-shrink-0"
+                       className="h-11 bg-orange-500 hover:bg-orange-600 font-bold"
                      >
                        Generate Invoice
                      </Button>
@@ -324,54 +330,55 @@ export function CashuWalletCard() {
                 </div>
 
                 {/* Cashu Token */}
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <Label className="text-sm font-medium">Receive Cashu Token</Label>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-8 gap-1"
-                      onClick={() => setShowQRScanner(true)}
-                    >
-                      <ScanLine className="h-4 w-4" />
-                      Scan
-                    </Button>
-                  </div>
-                  <div className="space-y-2">
-                    <Input
-                      placeholder="Paste Cashu token (cashu...)"
-                      value={tokenInput}
-                      onChange={(e) => setTokenInput(e.target.value)}
-                      className="font-mono text-xs"
-                    />
-                    <Button
-                      onClick={handleTokenReceive}
-                      disabled={!tokenInput}
-                      className="w-full bg-green-600 hover:bg-green-700"
-                    >
-                      Receive Token
-                    </Button>
-                  </div>
-                </div>
+                 <div className="space-y-3">
+                   <div className="flex items-center justify-between">
+                     <Label className="text-sm font-semibold">🥜 Receive Cashu Token</Label>
+                     <Button
+                       variant="outline"
+                       size="sm"
+                       className="h-9 gap-1.5 px-3"
+                       onClick={() => setShowQRScanner(true)}
+                     >
+                       <ScanLine className="h-4 w-4" />
+                       Scan QR
+                     </Button>
+                   </div>
+                   <div className="space-y-2">
+                     <Input
+                       placeholder="Paste Cashu token (cashu...)"
+                       value={tokenInput}
+                       onChange={(e) => setTokenInput(e.target.value)}
+                       className="font-mono text-xs h-11"
+                     />
+                     <Button
+                       onClick={handleTokenReceive}
+                       disabled={!tokenInput}
+                       className="w-full h-11 bg-green-600 hover:bg-green-700 font-bold"
+                     >
+                       Receive Token
+                     </Button>
+                   </div>
+                 </div>
               </TabsContent>
 
               {/* Send Tab */}
               <TabsContent value="send" className="space-y-4 mt-4">
                 {/* Send Token */}
                  <div className="space-y-3">
-                   <Label className="text-sm font-medium">Create Cashu Token</Label>
-                   <div className="flex flex-col xs:flex-row gap-2">
+                   <Label className="text-sm font-semibold">🥜 Create Cashu Token</Label>
+                   <div className="flex flex-col gap-2">
                      <Input
                        type="number"
+                       inputMode="numeric"
                        placeholder="Amount in sats"
                        value={sendAmount}
                        onChange={(e) => setSendAmount(e.target.value)}
-                       className="min-w-0"
+                       className="min-w-0 h-11"
                      />
                      <Button
                        onClick={handleTokenSend}
                        disabled={!activeMintUrl || !sendAmount}
-                       className="bg-orange-500 hover:bg-orange-600 whitespace-nowrap xs:flex-shrink-0"
+                       className="h-11 bg-orange-500 hover:bg-orange-600 font-bold"
                      >
                        Create Token
                      </Button>
@@ -388,36 +395,36 @@ export function CashuWalletCard() {
                 </div>
 
                 {/* Pay Lightning Invoice */}
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <Label className="text-sm font-medium">Pay Lightning Invoice</Label>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-8 gap-1"
-                      onClick={() => setShowQRScanner(true)}
-                    >
-                      <ScanLine className="h-4 w-4" />
-                      Scan
-                    </Button>
-                  </div>
-                  <div className="space-y-2">
-                    <Input
-                      placeholder="Paste Lightning invoice (lnbc...)"
-                      value={lightningInvoice}
-                      onChange={(e) => setLightningInvoice(e.target.value)}
-                      className="font-mono text-xs"
-                    />
-                    <Button
-                      onClick={handleLightningSend}
-                      disabled={!lightningInvoice || isProcessingPayment}
-                      className="w-full bg-blue-600 hover:bg-blue-700"
-                    >
-                      <Zap className="h-4 w-4 mr-2" />
-                      {isProcessingPayment ? 'Processing...' : 'Pay Invoice'}
-                    </Button>
-                  </div>
-                </div>
+                 <div className="space-y-3">
+                   <div className="flex items-center justify-between">
+                     <Label className="text-sm font-semibold">⚡ Pay Lightning Invoice</Label>
+                     <Button
+                       variant="outline"
+                       size="sm"
+                       className="h-9 gap-1.5 px-3"
+                       onClick={() => setShowQRScanner(true)}
+                     >
+                       <ScanLine className="h-4 w-4" />
+                       Scan QR
+                     </Button>
+                   </div>
+                   <div className="space-y-2">
+                     <Input
+                       placeholder="Paste Lightning invoice (lnbc...)"
+                       value={lightningInvoice}
+                       onChange={(e) => setLightningInvoice(e.target.value)}
+                       className="font-mono text-xs h-11"
+                     />
+                     <Button
+                       onClick={handleLightningSend}
+                       disabled={!lightningInvoice || isProcessingPayment}
+                       className="w-full h-11 bg-blue-600 hover:bg-blue-700 font-bold"
+                     >
+                       <Zap className="h-4 w-4 mr-2" />
+                       {isProcessingPayment ? 'Processing...' : 'Pay Invoice'}
+                     </Button>
+                   </div>
+                 </div>
 
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center">
@@ -429,79 +436,72 @@ export function CashuWalletCard() {
                 </div>
 
                 {/* Pay Lightning Address */}
-                <div className="space-y-3">
-                  <Label className="text-sm font-medium">Pay Lightning Address</Label>
-                  <div className="space-y-2">
-                    <Input
-                      placeholder="user@domain.com"
-                      value={lightningAddress}
-                      onChange={(e) => setLightningAddress(e.target.value)}
-                    />
-                    <div className="flex gap-2">
-                      <Input
-                        type="number"
-                        placeholder="Amount in sats"
-                        value={sendAmount}
-                        onChange={(e) => setSendAmount(e.target.value)}
-                        className="flex-1"
-                      />
-                      <Button
-                        onClick={handlePayLightningAddress}
-                        disabled={!lightningAddress || !sendAmount || isResolvingAddress || isProcessingPayment}
-                        className="bg-purple-600 hover:bg-purple-700"
-                      >
-                        {isResolvingAddress ? 'Resolving...' : 'Send'}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
+                 <div className="space-y-3">
+                   <Label className="text-sm font-semibold">📧 Pay Lightning Address</Label>
+                   <div className="space-y-2">
+                     <Input
+                       placeholder="user@domain.com"
+                       value={lightningAddress}
+                       onChange={(e) => setLightningAddress(e.target.value)}
+                       className="h-11"
+                     />
+                     <Input
+                       type="number"
+                       inputMode="numeric"
+                       placeholder="Amount in sats"
+                       value={sendAmount}
+                       onChange={(e) => setSendAmount(e.target.value)}
+                       className="h-11"
+                     />
+                     <Button
+                       onClick={handlePayLightningAddress}
+                       disabled={!lightningAddress || !sendAmount || isResolvingAddress || isProcessingPayment}
+                       className="w-full h-11 bg-purple-600 hover:bg-purple-700 font-bold"
+                     >
+                       {isResolvingAddress ? 'Resolving...' : 'Send to Address'}
+                     </Button>
+                   </div>
+                 </div>
               </TabsContent>
             </Tabs>
 
             {/* History */}
             {history.length > 0 && (
               <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <Label className="text-sm font-medium flex items-center gap-2">
-                    <History className="h-4 w-4" />
-                    Recent Activity
-                  </Label>
-                </div>
-                <div className="space-y-2 max-h-48 overflow-y-auto">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                  <History className="h-3.5 w-3.5" />
+                  Recent Activity
+                </Label>
+                <div className="space-y-2 max-h-52 overflow-y-auto scroll-container">
                   {history.slice(0, 5).map((entry) => (
                     <div
                       key={entry.id}
-                      className="flex items-center justify-between p-2 rounded-lg bg-muted/50 border"
+                      className="flex items-center justify-between p-3 rounded-xl bg-muted/50 border min-h-[52px]"
                     >
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2.5 min-w-0">
                         {entry.type === 'mint' || entry.type === 'receive' ? (
-                          <ArrowDownCircle className="h-4 w-4 text-green-500" />
+                          <ArrowDownCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                         ) : (
-                          <ArrowUpCircle className="h-4 w-4 text-red-500" />
+                          <ArrowUpCircle className="h-5 w-5 text-red-500 flex-shrink-0" />
                         )}
-                        <div>
-                          <div className="text-sm font-medium">
-                            {entry.type === 'mint' && 'Received Lightning'}
-                            {entry.type === 'melt' && 'Sent Lightning'}
-                            {entry.type === 'send' && 'Sent Token'}
-                            {entry.type === 'receive' && 'Received Token'}
+                        <div className="min-w-0">
+                          <div className="text-sm font-semibold leading-tight">
+                            {entry.type === 'mint' && 'Received ⚡ Lightning'}
+                            {entry.type === 'melt' && 'Sent ⚡ Lightning'}
+                            {entry.type === 'send' && 'Sent 🥜 Token'}
+                            {entry.type === 'receive' && 'Received 🥜 Token'}
                           </div>
                           <div className="text-xs text-muted-foreground">
                             {new Date(entry.timestamp).toLocaleDateString()}
                           </div>
                         </div>
                       </div>
-                      <div className="text-right">
-                        <div className="text-sm font-mono">
+                      <div className="text-right flex-shrink-0 ml-2">
+                        <div className={`text-sm font-mono font-bold ${entry.type === 'mint' || entry.type === 'receive' ? 'text-green-400' : 'text-red-400'}`}>
                           {entry.type === 'mint' || entry.type === 'receive' ? '+' : '-'}
-                          {entry.amount.toLocaleString()} sats
+                          {entry.amount.toLocaleString()}
                         </div>
-                        <Badge
-                          variant={entry.status === 'completed' ? 'default' : entry.status === 'pending' ? 'secondary' : 'destructive'}
-                          className="text-[10px]"
-                        >
-                          {entry.status}
-                        </Badge>
+                        <div className="text-xs text-muted-foreground">sats</div>
                       </div>
                     </div>
                   ))}
@@ -512,34 +512,29 @@ export function CashuWalletCard() {
         </Card>
 
         {/* What is Cashu Info Card */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
+        <Card className="border-gray-700">
+          <CardHeader className="px-4 pt-4 pb-3">
+            <CardTitle className="flex items-center gap-2 text-base">
               <Zap className="h-5 w-5 text-amber-500" />
               What is Cashu?
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-3">
-            <p className="text-muted-foreground text-sm">
+          <CardContent className="px-4 pb-4 space-y-3">
+            <p className="text-muted-foreground text-sm leading-relaxed">
               Cashu is digital cash backed by Bitcoin Lightning. Think of it as Bitcoin tokens you hold in your browser.
             </p>
-            <div className="grid gap-2 text-sm">
-              <div className="flex items-start gap-2">
-                <span className="text-green-500">✅</span>
-                <span className="text-muted-foreground">Works offline at skate spots</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-500">✅</span>
-                <span className="text-muted-foreground">Instant peer-to-peer payments</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-500">✅</span>
-                <span className="text-muted-foreground">Privacy-focused (mints don't track you)</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-500">✅</span>
-                <span className="text-muted-foreground">Always redeemable for Lightning sats</span>
-              </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
+              {[
+                'Works offline at skate spots',
+                'Instant peer-to-peer payments',
+                "Privacy-focused (mints can't track you)",
+                'Always redeemable for Lightning sats',
+              ].map((item) => (
+                <div key={item} className="flex items-start gap-2 p-2.5 bg-muted/40 rounded-lg">
+                  <span className="text-green-500 flex-shrink-0 mt-0.5">✅</span>
+                  <span className="text-muted-foreground text-xs leading-snug">{item}</span>
+                </div>
+              ))}
             </div>
             <a
               href="https://cashumints.space/"
@@ -567,28 +562,28 @@ export function CashuWalletCard() {
 
       {/* Backup Warning */}
       {mnemonic && (
-        <Card className="mt-6 border-amber-500/50 bg-amber-500/5">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-amber-600">
+        <Card className="border-amber-500/50 bg-amber-500/5">
+          <CardHeader className="px-4 pt-4 pb-3">
+            <CardTitle className="flex items-center gap-2 text-amber-600 text-base">
               <Shield className="h-5 w-5" />
               Backup Your Wallet
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-3">
-            <p className="text-muted-foreground text-sm">
-              Your wallet is secured with a 12-word recovery phrase. Save it safely - you'll need it to restore your balance if you clear browser data.
+          <CardContent className="px-4 pb-4 space-y-3">
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              Your wallet is secured with a 12-word recovery phrase. Save it safely — you'll need it to restore your balance if you clear browser data.
             </p>
             <Button
               onClick={() => {
                 alert(`Your backup phrase:\n\n${mnemonic}\n\nWrite these words down and store them safely!`);
               }}
               variant="outline"
-              className="w-full border-amber-500/50 text-amber-600 hover:bg-amber-500/10"
+              className="w-full h-11 border-amber-500/50 text-amber-600 hover:bg-amber-500/10 font-bold"
             >
               View Recovery Phrase
             </Button>
             <p className="text-xs text-muted-foreground italic">
-              This is like your Nostr nsec - keep it secret and backed up!
+              This is like your Nostr nsec — keep it secret and backed up!
             </p>
           </CardContent>
         </Card>
diff --git a/src/index.css b/src/index.css
index 24e6bcf..233699e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -413,11 +413,17 @@ html {
   display: none;  /* Chrome, Safari and Opera */
 }
 
-/* Extra small breakpoint for very small phones */
+/* Extra small breakpoint for very small phones (375px+) */
 @media (min-width: 375px) {
-  .xs\:inline {
-    display: inline;
-  }
+  .xs\:inline { display: inline; }
+  .xs\:flex { display: flex; }
+  .xs\:hidden { display: none; }
+  .xs\:flex-row { flex-direction: row; }
+  .xs\:px-4 { padding-left: 1rem; padding-right: 1rem; }
+  .xs\:-mx-4 { margin-left: -1rem; margin-right: -1rem; }
+  .xs\:text-xs { font-size: 0.75rem; line-height: 1rem; }
+  .xs\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+  .xs\:gap-2 { gap: 0.5rem; }
 }
 
 /* ─── Global UI/UX Polish ────────────────────────────────────────────────── */
diff --git a/src/pages/FAQPage.tsx b/src/pages/FAQPage.tsx
index ddea76b..13b74d6 100644
--- a/src/pages/FAQPage.tsx
+++ b/src/pages/FAQPage.tsx
@@ -57,17 +57,17 @@ export default function FAQPage() {
 
   return (
     <Layout>
-      <div className="container px-4 py-12 max-w-3xl">
+      <div className="container px-3 xs:px-4 py-6 sm:py-10 max-w-3xl mx-auto">
 
         {/* Hero */}
-        <div className="text-center mb-10">
-          <div className="inline-flex items-center justify-center w-24 h-24 rounded-3xl bg-gradient-to-br from-[#ff0040] via-[#ff6600] to-[#ccff00] mb-5 shadow-2xl shadow-[#ff0040]/40">
-            <span className="text-5xl">🦧</span>
+        <div className="text-center mb-7">
+          <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#ff0040] via-[#ff6600] to-[#ccff00] mb-4 shadow-2xl shadow-[#ff0040]/40">
+            <span className="text-3xl sm:text-4xl">🦧</span>
           </div>
-          <h1 className="text-4xl md:text-5xl font-black uppercase mb-3 tracking-tight">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-black uppercase mb-2 tracking-tight">
             <span className="text-white">Got Questions?</span>
           </h1>
-          <p className="text-xl text-gray-400 max-w-lg mx-auto leading-relaxed">
+          <p className="text-base sm:text-xl text-gray-400 max-w-lg mx-auto leading-relaxed">
             Ask The Sasquatch — he knows everything about SkateSpots, Nostr, Bitcoin, and skateboarding.
           </p>
         </div>
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 5e4e39b..7a0df4d 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -503,8 +503,8 @@ function WalletTab() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <a href="/wallet">
-            <Button className="gap-2 bg-orange-500 hover:bg-orange-600 w-full sm:w-auto">
+          <a href="/wallet" className="block sm:inline-block">
+            <Button className="gap-2 bg-orange-500 hover:bg-orange-600 w-full sm:w-auto h-11 font-bold">
               <Wallet className="h-4 w-4" />
               Go to Wallet
             </Button>
@@ -545,7 +545,7 @@ function WalletTab() {
         </CardHeader>
         <CardContent className="space-y-4">
           <WalletModal>
-            <Button variant="outline" className="gap-2 border-purple-500/50 text-purple-400 hover:bg-purple-500/10 w-full sm:w-auto">
+            <Button variant="outline" className="gap-2 border-purple-500/50 text-purple-400 hover:bg-purple-500/10 w-full h-11 font-bold">
               <ExternalLink className="h-4 w-4" />
               Connect with NWC
             </Button>
@@ -624,49 +624,51 @@ export default function SettingsPage() {
 
   return (
     <Layout>
-      <div className="container px-4 sm:px-6 py-6 sm:py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold flex items-center gap-3">
-            <Settings className="h-8 w-8" />
+      <div className="container px-3 xs:px-4 sm:px-6 py-4 sm:py-8 max-w-3xl mx-auto">
+        <div className="mb-5">
+          <h1 className="text-2xl sm:text-3xl font-bold flex items-center gap-3">
+            <Settings className="h-6 w-6 sm:h-8 sm:w-8" />
             Settings
           </h1>
-          <p className="text-muted-foreground mt-1">
+          <p className="text-muted-foreground text-sm mt-1">
             Manage your account and app preferences
           </p>
         </div>
 
-        <Tabs defaultValue={initialTab} className="space-y-6">
-          {/* Grid tabs for mobile, horizontal for larger screens */}
-          <TabsList className="grid grid-cols-4 sm:grid-cols-7 gap-1 p-1 h-auto">
-            <TabsTrigger value="profile" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <User className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">Profile</span>
-            </TabsTrigger>
-            <TabsTrigger value="mydata" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <Database className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">My Data</span>
-            </TabsTrigger>
-            <TabsTrigger value="security" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <Shield className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">Security</span>
-            </TabsTrigger>
-            <TabsTrigger value="appearance" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <Palette className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">Theme</span>
-            </TabsTrigger>
-            <TabsTrigger value="relays" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <Radio className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">Relays</span>
-            </TabsTrigger>
-            <TabsTrigger value="wallet" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <Wallet className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">Wallet</span>
-            </TabsTrigger>
-            <TabsTrigger value="advanced" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
-              <Wrench className="h-4 w-4" />
-              <span className="text-[10px] sm:text-sm">Advanced</span>
-            </TabsTrigger>
-          </TabsList>
+        <Tabs defaultValue={initialTab} className="space-y-5">
+          {/* Horizontally scrollable tab bar on mobile — no wrapping */}
+          <div className="overflow-x-auto scrollbar-hide -mx-3 xs:-mx-4 sm:mx-0 px-3 xs:px-4 sm:px-0">
+            <TabsList className="inline-flex w-auto min-w-full sm:w-full sm:grid sm:grid-cols-7 gap-0.5 p-1 h-auto rounded-xl">
+              <TabsTrigger value="profile" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <User className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">Profile</span>
+              </TabsTrigger>
+              <TabsTrigger value="mydata" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <Database className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">My Data</span>
+              </TabsTrigger>
+              <TabsTrigger value="security" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <Shield className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">Security</span>
+              </TabsTrigger>
+              <TabsTrigger value="appearance" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <Palette className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">Theme</span>
+              </TabsTrigger>
+              <TabsTrigger value="relays" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <Radio className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">Relays</span>
+              </TabsTrigger>
+              <TabsTrigger value="wallet" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <Wallet className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">Wallet</span>
+              </TabsTrigger>
+              <TabsTrigger value="advanced" className="flex-col gap-1 px-3 py-2.5 h-auto min-w-[64px] sm:min-w-0 rounded-lg data-[state=active]:bg-background">
+                <Wrench className="h-4 w-4 flex-shrink-0" />
+                <span className="text-[10px] font-semibold whitespace-nowrap">Advanced</span>
+              </TabsTrigger>
+            </TabsList>
+          </div>
 
           <TabsContent value="profile">
             <ProfileTab />
diff --git a/src/pages/WalletPage.tsx b/src/pages/WalletPage.tsx
index bffd73f..17d9d8a 100644
--- a/src/pages/WalletPage.tsx
+++ b/src/pages/WalletPage.tsx
@@ -25,8 +25,12 @@ import {
   WalletMinimal,
   Info,
   Nut,
+  ChevronRight,
+  Bitcoin,
 } from 'lucide-react';
 
+// ─── Wallet Status Card ───────────────────────────────────────────────────────
+
 function WalletStatusCard() {
   const { webln } = useWallet();
   const { connections } = useNWC();
@@ -36,82 +40,85 @@ function WalletStatusCard() {
   const isReady = webln || hasNWC || hasCashu;
 
   return (
-    <Card className={isReady ? 'border-primary/30' : ''}>
-      <CardHeader className="pb-3">
+    <Card className={isReady ? 'border-green-500/30 bg-green-950/10' : 'border-gray-700'}>
+      <CardHeader className="pb-3 px-4 pt-4">
         <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2">
-            <Wallet className="h-5 w-5 text-primary" />
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Wallet className="h-5 w-5 text-primary flex-shrink-0" />
             Wallet Status
           </CardTitle>
-          <Badge variant={isReady ? 'default' : 'secondary'}>
-            {isReady ? 'Ready' : 'Not Connected'}
+          <Badge
+            variant={isReady ? 'default' : 'secondary'}
+            className={isReady ? 'bg-green-500/20 text-green-400 border-green-500/30 text-xs' : 'text-xs'}
+          >
+            {isReady ? '✓ Ready' : 'Not Connected'}
           </Badge>
         </div>
-        <CardDescription>
+        <CardDescription className="text-xs mt-1">
           {isReady
             ? 'Your wallet is connected and ready to send zaps!'
             : 'Connect a wallet to enable Lightning zaps'}
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Cashu Wallet Status */}
-        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
-          <div className="flex items-center gap-3">
-            <Nut className="h-5 w-5 text-orange-500" />
-            <div>
-              <p className="font-medium">Cashu Wallet</p>
-              <p className="text-sm text-muted-foreground">
+      <CardContent className="px-4 pb-4 space-y-2">
+        {/* Cashu */}
+        <div className="flex items-center justify-between p-3 bg-muted/40 rounded-xl min-h-[56px]">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="w-9 h-9 rounded-lg bg-orange-500/15 flex items-center justify-center flex-shrink-0">
+              <Nut className="h-4 w-4 text-orange-500" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-semibold text-sm">Cashu Wallet</p>
+              <p className="text-xs text-muted-foreground truncate">
                 {hasCashu && cashuBalance > 0
-                  ? `${cashuBalance.toLocaleString()} sats${cashuUsd ? ` (~$${cashuUsd.toFixed(2)})` : ''}`
+                  ? `${cashuBalance.toLocaleString()} sats${cashuUsd ? ` · $${cashuUsd.toFixed(2)}` : ''}`
                   : 'Built-in ecash wallet'}
               </p>
             </div>
           </div>
-          {hasCashu ? (
-            <CheckCircle className="h-5 w-5 text-green-500" />
-          ) : (
-            <XCircle className="h-5 w-5 text-muted-foreground" />
-          )}
+          {hasCashu
+            ? <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
+            : <XCircle className="h-5 w-5 text-muted-foreground/50 flex-shrink-0" />}
         </div>
 
-        {/* WebLN Status */}
-        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
-          <div className="flex items-center gap-3">
-            <Globe className="h-5 w-5 text-muted-foreground" />
-            <div>
-              <p className="font-medium">WebLN</p>
-              <p className="text-sm text-muted-foreground">Browser extension wallet</p>
+        {/* WebLN */}
+        <div className="flex items-center justify-between p-3 bg-muted/40 rounded-xl min-h-[56px]">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="w-9 h-9 rounded-lg bg-blue-500/15 flex items-center justify-center flex-shrink-0">
+              <Globe className="h-4 w-4 text-blue-400" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-semibold text-sm">WebLN</p>
+              <p className="text-xs text-muted-foreground">Browser extension wallet</p>
             </div>
           </div>
-          {webln ? (
-            <CheckCircle className="h-5 w-5 text-green-500" />
-          ) : (
-            <XCircle className="h-5 w-5 text-muted-foreground" />
-          )}
+          {webln
+            ? <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
+            : <XCircle className="h-5 w-5 text-muted-foreground/50 flex-shrink-0" />}
         </div>
 
-        {/* NWC Status */}
-        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
-          <div className="flex items-center gap-3">
-            <WalletMinimal className="h-5 w-5 text-muted-foreground" />
-            <div>
-              <p className="font-medium">Nostr Wallet Connect</p>
-              <p className="text-sm text-muted-foreground">
+        {/* NWC */}
+        <div className="flex items-center justify-between p-3 bg-muted/40 rounded-xl min-h-[56px]">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="w-9 h-9 rounded-lg bg-purple-500/15 flex items-center justify-center flex-shrink-0">
+              <WalletMinimal className="h-4 w-4 text-purple-400" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-semibold text-sm">Nostr Wallet Connect</p>
+              <p className="text-xs text-muted-foreground">
                 {connections.length > 0
                   ? `${connections.length} wallet${connections.length !== 1 ? 's' : ''} connected`
                   : 'Remote wallet connection'}
               </p>
             </div>
           </div>
-          {hasNWC ? (
-            <CheckCircle className="h-5 w-5 text-green-500" />
-          ) : (
-            <XCircle className="h-5 w-5 text-muted-foreground" />
-          )}
+          {hasNWC
+            ? <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
+            : <XCircle className="h-5 w-5 text-muted-foreground/50 flex-shrink-0" />}
         </div>
 
         <WalletModal>
-          <Button className="w-full gap-2">
+          <Button className="w-full gap-2 mt-1 h-12 rounded-xl font-bold">
             <Settings className="h-4 w-4" />
             Manage Wallets
           </Button>
@@ -121,162 +128,112 @@ function WalletStatusCard() {
   );
 }
 
+// ─── Zaps Info Card ───────────────────────────────────────────────────────────
+
 function ZapsInfoCard() {
+  const items = [
+    { emoji: '⚡', title: 'Instant', desc: 'Payments settle in seconds over Lightning' },
+    { emoji: '🔐', title: 'Flexible custody', desc: 'Use your own wallet or a custodial service' },
+    { emoji: '🥜', title: 'NutZaps for privacy', desc: "Cashu ecash — mints can't see who pays whom" },
+    { emoji: '💜', title: 'Value for value', desc: 'Support creators directly' },
+  ];
+
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
+    <Card className="border-gray-700">
+      <CardHeader className="px-4 pt-4 pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
           <Zap className="h-5 w-5 text-amber-500" />
           What are Zaps?
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <p className="text-muted-foreground">
-          Zaps are Lightning Network micropayments on Nostr. They allow you to send
-          satoshis (sats) instantly to other users as a way of tipping, thanking, or
-          supporting their content.
+      <CardContent className="px-4 pb-4 space-y-2">
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Zaps are Lightning micropayments — send sats instantly to any skater, spot creator, or coach. No middleman, no platform cut.
         </p>
-
-        <div className="space-y-3">
-          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
-            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
-              <span className="text-lg">⚡</span>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 pt-1">
+          {items.map((item) => (
+            <div key={item.title} className="flex items-start gap-3 p-3 bg-muted/40 rounded-xl">
+              <span className="text-xl flex-shrink-0 mt-0.5">{item.emoji}</span>
+              <div>
+                <p className="font-semibold text-sm">{item.title}</p>
+                <p className="text-xs text-muted-foreground leading-snug">{item.desc}</p>
+              </div>
             </div>
-            <div>
-              <p className="font-medium">Instant</p>
-              <p className="text-sm text-muted-foreground">
-                Payments settle in seconds over the Lightning Network
-              </p>
-            </div>
-          </div>
-
-          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
-            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
-              <span className="text-lg">🔐</span>
-            </div>
-            <div>
-              <p className="font-medium">Flexible custody</p>
-              <p className="text-sm text-muted-foreground">
-                Use your own wallet (self-custodial) or a custodial service - your choice
-              </p>
-            </div>
-          </div>
-
-          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
-            <div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center flex-shrink-0">
-              <span className="text-lg">🥜</span>
-            </div>
-            <div>
-              <p className="font-medium">NutZaps for privacy</p>
-              <p className="text-sm text-muted-foreground">
-                Use Cashu ecash for private zaps - mints can't see who pays whom
-              </p>
-            </div>
-          </div>
-
-          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
-            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
-              <span className="text-lg">💜</span>
-            </div>
-            <div>
-              <p className="font-medium">Value for value</p>
-              <p className="text-sm text-muted-foreground">
-                Support creators directly for content you appreciate
-              </p>
-            </div>
-          </div>
+          ))}
         </div>
       </CardContent>
     </Card>
   );
 }
 
+// ─── Recommended Wallets ──────────────────────────────────────────────────────
+
 function WalletResourcesCard() {
-  const walletResources = [
-    {
-      name: 'Alby',
-      description: 'Browser extension wallet with WebLN + NWC support',
-      url: 'https://getalby.com',
-      type: 'WebLN',
-    },
-    {
-      name: 'Minibits',
-      description: 'Mobile Cashu wallet with NWC support',
-      url: 'https://www.minibits.cash',
-      type: 'NWC',
-    },
-    {
-      name: 'Zeus',
-      description: 'Self-custodial mobile Lightning wallet',
-      url: 'https://zeusln.com',
-      type: 'NWC',
-    },
-    {
-      name: 'Coinos',
-      description: 'Web-based Lightning wallet, works on any device',
-      url: 'https://coinos.io',
-      type: 'NWC',
-    },
+  const wallets = [
+    { name: 'Alby', desc: 'Browser extension · WebLN + NWC', url: 'https://getalby.com', type: 'WebLN', color: 'text-yellow-400' },
+    { name: 'Minibits', desc: 'Mobile Cashu wallet · NWC', url: 'https://www.minibits.cash', type: 'NWC', color: 'text-orange-400' },
+    { name: 'Zeus', desc: 'Self-custodial mobile Lightning', url: 'https://zeusln.com', type: 'NWC', color: 'text-blue-400' },
+    { name: 'Coinos', desc: 'Web-based · works everywhere', url: 'https://coinos.io', type: 'NWC', color: 'text-green-400' },
   ];
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
+    <Card className="border-gray-700">
+      <CardHeader className="px-4 pt-4 pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
           <Info className="h-5 w-5" />
           Recommended Wallets
         </CardTitle>
-        <CardDescription>
-          Get started with one of these Lightning wallets
-        </CardDescription>
+        <CardDescription className="text-xs">Get started with one of these Lightning wallets</CardDescription>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="grid gap-3">
-          {walletResources.map((wallet) => (
-            <a
-              key={wallet.name}
-              href={wallet.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center justify-between p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors group"
-            >
-              <div>
-                <div className="flex items-center gap-2">
-                  <p className="font-medium group-hover:text-primary transition-colors">
-                    {wallet.name}
-                  </p>
-                  <Badge variant="outline" className="text-xs">
-                    {wallet.type}
-                  </Badge>
-                </div>
-                <p className="text-sm text-muted-foreground">{wallet.description}</p>
+      <CardContent className="px-4 pb-4 space-y-2">
+        {wallets.map((w) => (
+          <a
+            key={w.name}
+            href={w.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-between p-3 bg-muted/40 rounded-xl hover:bg-muted active:scale-[0.98] transition-all group min-h-[56px]"
+          >
+            <div className="flex items-center gap-3 min-w-0">
+              <div className="w-9 h-9 rounded-lg bg-white/5 flex items-center justify-center flex-shrink-0">
+                <Wallet className={`h-4 w-4 ${w.color}`} />
               </div>
-              <ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
-            </a>
-          ))}
-        </div>
-        
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-semibold text-sm group-hover:text-primary transition-colors">{w.name}</span>
+                  <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4">{w.type}</Badge>
+                </div>
+                <p className="text-xs text-muted-foreground truncate">{w.desc}</p>
+              </div>
+            </div>
+            <ChevronRight className="h-4 w-4 text-muted-foreground group-hover:text-primary flex-shrink-0 transition-colors" />
+          </a>
+        ))}
         <a
           href="https://planb.academy/en/tutorials/wallet"
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center gap-2 text-sm text-orange-400 hover:text-orange-300 transition-colors"
+          className="flex items-center gap-2 text-xs text-orange-400 hover:text-orange-300 transition-colors pt-1"
         >
-          <ExternalLink className="h-4 w-4" />
-          <span>Want to learn more? Check out Plan B Academy's wallet guides</span>
+          <ExternalLink className="h-3.5 w-3.5 flex-shrink-0" />
+          Learn more at Plan B Academy
         </a>
       </CardContent>
     </Card>
   );
 }
 
+// ─── Not Logged In ────────────────────────────────────────────────────────────
+
 function NotLoggedInCard() {
   return (
-    <Card className="border-dashed">
-      <CardContent className="py-12 text-center">
-        <Wallet className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
-        <h3 className="text-lg font-medium mb-2">Login Required</h3>
-        <p className="text-muted-foreground max-w-md mx-auto mb-6">
+    <Card className="border-dashed border-gray-700">
+      <CardContent className="py-12 px-6 text-center">
+        <div className="w-16 h-16 rounded-2xl bg-[#ff0040]/10 flex items-center justify-center mx-auto mb-4">
+          <Wallet className="h-8 w-8 text-[#ff0040]/60" />
+        </div>
+        <h3 className="text-lg font-bold mb-2">Login Required</h3>
+        <p className="text-muted-foreground text-sm max-w-xs mx-auto mb-6 leading-relaxed">
           Log in with your Nostr account to connect your Lightning wallet and start zapping.
         </p>
         <LoginArea className="justify-center" />
@@ -285,6 +242,75 @@ function NotLoggedInCard() {
   );
 }
 
+// ─── Balance Hero Banner ──────────────────────────────────────────────────────
+
+function BalanceHero() {
+  const { totalBalance: cashuBalance, isInitialized: hasCashu } = useCashu();
+  const cashuUsd = useSatsToUsd(cashuBalance);
+  const { webln } = useWallet();
+  const { connections } = useNWC();
+  const hasNWC = connections.length > 0 && connections.some(c => c.isConnected);
+
+  return (
+    <div className="relative overflow-hidden rounded-2xl border border-orange-500/30 bg-gradient-to-br from-orange-950/40 via-black to-yellow-950/20 p-5">
+      {/* Background glow */}
+      <div className="absolute -top-8 -right-8 w-32 h-32 bg-orange-500/10 rounded-full blur-2xl pointer-events-none" />
+      <div className="absolute -bottom-6 -left-6 w-24 h-24 bg-yellow-500/10 rounded-full blur-2xl pointer-events-none" />
+
+      <div className="relative flex items-center justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <Bitcoin className="h-4 w-4 text-orange-400" />
+            <span className="text-xs font-bold uppercase tracking-widest text-orange-400/80">Cashu Balance</span>
+          </div>
+          <div className="text-3xl font-black tabular-nums leading-none">
+            {hasCashu ? cashuBalance.toLocaleString() : '—'}
+            <span className="text-base font-semibold text-muted-foreground ml-2">sats</span>
+          </div>
+          {cashuUsd !== null && cashuBalance > 0 && (
+            <div className="text-sm text-muted-foreground mt-1">
+              ≈ ${cashuUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+            </div>
+          )}
+          {/* Wallet status pills */}
+          <div className="flex flex-wrap gap-1.5 mt-3">
+            {hasCashu && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-orange-500/20 border border-orange-500/30 text-[10px] font-bold text-orange-400">
+                <Nut className="h-2.5 w-2.5" /> Cashu
+              </span>
+            )}
+            {webln && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30 text-[10px] font-bold text-blue-400">
+                <Globe className="h-2.5 w-2.5" /> WebLN
+              </span>
+            )}
+            {hasNWC && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-purple-500/20 border border-purple-500/30 text-[10px] font-bold text-purple-400">
+                <WalletMinimal className="h-2.5 w-2.5" /> NWC
+              </span>
+            )}
+            {!hasCashu && !webln && !hasNWC && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-gray-700/50 border border-gray-600 text-[10px] font-semibold text-gray-400">
+                No wallet connected
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Manage button */}
+        <WalletModal>
+          <button className="flex-shrink-0 flex flex-col items-center gap-1.5 px-3 py-2.5 rounded-xl bg-orange-500/15 border border-orange-500/30 hover:bg-orange-500/25 active:scale-95 transition-all">
+            <Settings className="h-5 w-5 text-orange-400" />
+            <span className="text-[10px] font-bold text-orange-400 uppercase tracking-wide leading-none">Manage</span>
+          </button>
+        </WalletModal>
+      </div>
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
 export default function WalletPage() {
   useSeoMeta({
     title: 'Wallet - SkateSpots',
@@ -295,58 +321,63 @@ export default function WalletPage() {
 
   return (
     <Layout>
-      <div className="container px-4 py-6 md:py-8">
+      <div className="container px-3 xs:px-4 py-4 md:py-8 max-w-2xl mx-auto">
         {/* Header */}
-        <div className="mb-6 md:mb-8">
-          <h1 className="text-2xl md:text-3xl font-bold">Wallet</h1>
-          <p className="text-muted-foreground mt-1 text-sm md:text-base">
-            Manage your Bitcoin and send zaps to skaters and creators
+        <div className="mb-4">
+          <h1 className="text-2xl font-black uppercase tracking-wide flex items-center gap-2">
+            <Wallet className="h-6 w-6 text-orange-400" />
+            Wallet
+          </h1>
+          <p className="text-muted-foreground text-sm mt-0.5">
+            Bitcoin Lightning payments &amp; zaps
           </p>
         </div>
 
         {user ? (
-          <div className="space-y-4 md:space-y-6">
-            {/* Wallet Comparison Guide */}
+          <div className="space-y-4">
+            {/* Balance hero — always at top for logged-in users */}
+            <BalanceHero />
+
+            {/* Quick Guide — collapsed by default */}
             <WalletComparisonGuide />
 
             <Tabs defaultValue="cashu" className="w-full">
-              <TabsList className="grid w-full grid-cols-2 mb-4 md:mb-6 h-auto">
-                <TabsTrigger value="cashu" className="gap-1.5 py-2.5 text-sm">
+              {/* Tab pills — full width, thumb-friendly height */}
+              <TabsList className="grid w-full grid-cols-2 h-12 rounded-xl p-1 mb-4 bg-muted/60">
+                <TabsTrigger
+                  value="cashu"
+                  className="gap-2 rounded-lg text-sm font-bold h-full data-[state=active]:bg-orange-500 data-[state=active]:text-white"
+                >
                   <Nut className="h-4 w-4 flex-shrink-0" />
-                  <span>Cashu Wallet</span>
+                  <span>Cashu</span>
                 </TabsTrigger>
-                <TabsTrigger value="lightning" className="gap-1.5 py-2.5 text-sm">
+                <TabsTrigger
+                  value="lightning"
+                  className="gap-2 rounded-lg text-sm font-bold h-full data-[state=active]:bg-yellow-500 data-[state=active]:text-black"
+                >
                   <Zap className="h-4 w-4 flex-shrink-0" />
                   <span>Lightning</span>
                 </TabsTrigger>
               </TabsList>
 
-            <TabsContent value="cashu" className="space-y-6">
-              <CashuWalletCard />
-            </TabsContent>
+              {/* Cashu tab */}
+              <TabsContent value="cashu" className="space-y-4 mt-0">
+                <CashuWalletCard />
+              </TabsContent>
 
-            <TabsContent value="lightning" className="space-y-6">
-              {/* Privacy Tips at the top */}
-              <LightningPrivacyTips />
-              
-              <div className="grid gap-6 lg:grid-cols-2">
-                <div className="space-y-6">
-                  <WalletStatusCard />
-                  <WalletResourcesCard />
-                </div>
-                <div>
-                  <ZapsInfoCard />
-                </div>
-              </div>
-            </TabsContent>
+              {/* Lightning tab */}
+              <TabsContent value="lightning" className="space-y-4 mt-0">
+                <LightningPrivacyTips />
+                <WalletStatusCard />
+                <WalletResourcesCard />
+                <ZapsInfoCard />
+              </TabsContent>
             </Tabs>
           </div>
         ) : (
-          <div className="max-w-xl mx-auto">
+          <div className="space-y-4">
             <NotLoggedInCard />
-            <div className="mt-6">
-              <ZapsInfoCard />
-            </div>
+            <ZapsInfoCard />
           </div>
         )}
       </div>