diff --git a/src/pages/StashPage.tsx b/src/pages/StashPage.tsx
index de92ab9..a1f2373 100644
--- a/src/pages/StashPage.tsx
+++ b/src/pages/StashPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo, useRef } from 'react';
 import { useSeoMeta } from '@unhead/react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -10,10 +10,7 @@ import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
-import { Progress } from '@/components/ui/progress';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, DialogDescription } from '@/components/ui/dialog';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { LoginArea } from '@/components/auth/LoginArea';
@@ -34,8 +31,6 @@ import {
   Globe,
   Zap,
   ArrowRightLeft,
-  Eye,
-  EyeOff,
   Shield,
   Sparkles,
   Star,
@@ -47,25 +42,27 @@ import {
   ShoppingCart,
   Target,
   Swords,
-  TrendingUp,
   Heart,
-  MessageCircle,
   Send,
   Backpack,
   Trophy,
   Flame,
   X,
-  Camera,
   ImagePlus,
   Loader2,
   ExternalLink,
   Store,
   MapPin,
+  LayoutGrid,
+  List,
+  RefreshCw,
+  ChevronRight,
+  Smartphone,
+  Monitor,
 } from 'lucide-react';
-import { useQuery } from '@tanstack/react-query';
 import { cn } from '@/lib/utils';
 
-// RPG rarity colors
+// ─── Rarity helpers ──────────────────────────────────────────────────────────
 const RARITY_COLORS = {
   common: 'from-gray-500 to-gray-600',
   uncommon: 'from-green-500 to-emerald-600',
@@ -73,7 +70,6 @@ const RARITY_COLORS = {
   epic: 'from-purple-500 to-violet-600',
   legendary: 'from-yellow-400 to-orange-500',
 };
-
 const RARITY_GLOW = {
   common: '',
   uncommon: 'shadow-[0_0_15px_rgba(34,197,94,0.3)]',
@@ -81,7 +77,6 @@ const RARITY_GLOW = {
   epic: 'shadow-[0_0_25px_rgba(168,85,247,0.5)]',
   legendary: 'shadow-[0_0_30px_rgba(250,204,21,0.6)] animate-pulse',
 };
-
 const RARITY_BORDER = {
   common: 'border-gray-500/40',
   uncommon: 'border-green-500/50',
@@ -94,9 +89,7 @@ const RARITY_BORDER = {
 function getCharacterClass(byCategory: Record<string, number>): { name: string; icon: React.ReactNode; color: string } {
   const entries = Object.entries(byCategory);
   if (entries.length === 0) return { name: 'Rookie', icon: <Backpack className="h-4 w-4" />, color: '#888' };
-  
   const [topCategory] = entries.sort(([,a], [,b]) => b - a)[0];
-  
   const classes: Record<string, { name: string; icon: React.ReactNode; color: string }> = {
     deck: { name: 'Board Wizard', icon: <Swords className="h-4 w-4" />, color: '#ff0040' },
     trucks: { name: 'Grind Master', icon: <Target className="h-4 w-4" />, color: '#ff6600' },
@@ -108,18 +101,141 @@ function getCharacterClass(byCategory: Record<string, number>): { name: string;
     complete: { name: 'Setup Sage', icon: <Trophy className="h-4 w-4" />, color: '#ffd700' },
     other: { name: 'Collector', icon: <Package className="h-4 w-4" />, color: '#888' },
   };
-  
   return classes[topCategory] || classes.other;
 }
 
-function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = false }: { item: StashItem; onEdit: () => void; onDelete: () => void; onListOnMarketplace?: () => void; isWTB?: boolean }) {
+// ─── List Row Card (mobile default) ──────────────────────────────────────────
+function StashListRow({ item, onEdit, onDelete, onListOnMarketplace, isWTB = false }: {
+  item: StashItem;
+  onEdit: () => void;
+  onDelete: () => void;
+  onListOnMarketplace?: () => void;
+  isWTB?: boolean;
+}) {
+  const category = STASH_CATEGORIES[item.category];
+  const condition = CONDITION_LABELS[item.condition];
+  const rarity = (item.rarity || category.rarity) as keyof typeof RARITY_COLORS;
+  const rarityTier = RARITY_TIERS[rarity];
+  const usdValue = useSatsToUsd(item.minPrice || item.maxPrice || 0);
+  const canListOnMarketplace = !isWTB && (item.willingToSell || item.willingToTrade);
+
+  return (
+    <div className={cn(
+      'relative flex items-center gap-3 p-3 rounded-xl border-2 bg-black/60 transition-all active:scale-[0.99]',
+      RARITY_BORDER[rarity],
+      RARITY_GLOW[rarity],
+    )}>
+      {/* Rarity left bar */}
+      <div className={cn('absolute left-0 top-0 bottom-0 w-1 rounded-l-xl bg-gradient-to-b', RARITY_COLORS[rarity])} />
+
+      {/* Thumbnail */}
+      <div className="w-14 h-14 flex-shrink-0 rounded-lg overflow-hidden bg-black/50 border border-white/10 flex items-center justify-center ml-1">
+        {item.images?.[0] ? (
+          <img src={item.images[0]} alt={item.title} className="w-full h-full object-cover" />
+        ) : (
+          <span className="text-2xl">{category.emoji}</span>
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5 mb-0.5">
+          {isWTB && (
+            <Badge className="bg-cyan-500 text-black text-[9px] px-1 py-0 h-4 font-black">WTB</Badge>
+          )}
+          <h3 className="font-bold text-sm text-white truncate leading-tight" style={{ textShadow: `0 0 8px ${rarityTier.color}30` }}>
+            {item.title}
+          </h3>
+        </div>
+        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground flex-wrap">
+          {item.brand && <span className="font-medium text-gray-300">{item.brand}</span>}
+          {item.size && <span className="text-muted-foreground/60">• {item.size}</span>}
+          {!isWTB && item.storageLocation && item.storageLocation !== 'other' && (
+            <span className="text-[#ff6600]/80">• {{
+              home: '🏠', car: '🚗', skatepark: '🛹', warehouse: '🏭',
+              storage_unit: '🔒', van: '🚐', friends: '👫', parents: '👨‍👩‍👦',
+              wardrobe: '🚪', backpack: '🎒', sponsor: '🤝', other: '📦',
+            }[item.storageLocation]}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2 mt-1">
+          {/* Condition stars (compact) */}
+          {!isWTB && (
+            <div className="flex items-center gap-0.5">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Star key={i} className={cn('h-2.5 w-2.5', i < condition.stars ? 'fill-yellow-400 text-yellow-400' : 'text-gray-700')} />
+              ))}
+            </div>
+          )}
+          {/* Price */}
+          {(item.minPrice || item.maxPrice) ? (
+            <span className="text-[11px] font-bold text-amber-400 flex items-center gap-0.5">
+              <Zap className="h-3 w-3" />
+              {(item.maxPrice || item.minPrice || 0).toLocaleString()}
+              {usdValue && <span className="text-muted-foreground font-normal">(~${usdValue.toFixed(0)})</span>}
+            </span>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Right actions */}
+      <div className="flex flex-col items-end gap-1.5 flex-shrink-0">
+        {/* Visibility icon */}
+        <div>
+          {item.visibility === 'private' && <Lock className="h-3.5 w-3.5 text-red-400/70" />}
+          {item.visibility === 'friends' && <Users className="h-3.5 w-3.5 text-blue-400/70" />}
+          {item.visibility === 'public' && <Globe className="h-3.5 w-3.5 text-green-400/70" />}
+        </div>
+        {/* Trade/sell badges */}
+        <div className="flex gap-1">
+          {item.willingToTrade && (
+            <span className="text-[9px] font-bold text-cyan-400 border border-cyan-500/40 rounded px-1 py-0">↔</span>
+          )}
+          {item.willingToSell && !isWTB && (
+            <span className="text-[9px] font-bold text-green-400 border border-green-500/40 rounded px-1 py-0">⚡</span>
+          )}
+        </div>
+        {/* Action buttons */}
+        <div className="flex gap-1">
+          <button
+            onClick={(e) => { e.stopPropagation(); onEdit(); }}
+            className="w-7 h-7 rounded-lg bg-white/5 hover:bg-white/15 flex items-center justify-center transition-colors touch-manipulation active:scale-90"
+          >
+            <Edit3 className="h-3.5 w-3.5 text-gray-300" />
+          </button>
+          {canListOnMarketplace && onListOnMarketplace && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onListOnMarketplace(); }}
+              className="w-7 h-7 rounded-lg bg-[#ff6600]/20 hover:bg-[#ff6600]/40 flex items-center justify-center transition-colors touch-manipulation active:scale-90"
+            >
+              <Store className="h-3.5 w-3.5 text-[#ff6600]" />
+            </button>
+          )}
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+            className="w-7 h-7 rounded-lg bg-red-500/10 hover:bg-red-500/30 flex items-center justify-center transition-colors touch-manipulation active:scale-90"
+          >
+            <Trash2 className="h-3.5 w-3.5 text-red-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Grid Card (desktop / user-toggled) ──────────────────────────────────────
+function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = false }: {
+  item: StashItem;
+  onEdit: () => void;
+  onDelete: () => void;
+  onListOnMarketplace?: () => void;
+  isWTB?: boolean;
+}) {
   const category = STASH_CATEGORIES[item.category];
   const condition = CONDITION_LABELS[item.condition];
   const rarity = (item.rarity || category.rarity) as keyof typeof RARITY_COLORS;
   const usdValue = useSatsToUsd(item.minPrice || item.maxPrice || 0);
   const rarityTier = RARITY_TIERS[rarity];
-  
-  // Can list on marketplace if willing to sell or trade
   const canListOnMarketplace = !isWTB && (item.willingToSell || item.willingToTrade);
 
   return (
@@ -130,87 +246,61 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
       RARITY_BORDER[rarity],
       isWTB && 'ring-2 ring-cyan-500/30'
     )}>
-      {/* Rarity stripe with shimmer effect */}
+      {/* Rarity stripe */}
       <div className={cn('absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r', RARITY_COLORS[rarity])}>
         {rarity !== 'common' && (
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
         )}
       </div>
 
-      {/* Wishlist indicator */}
       {isWTB && (
         <div className="absolute top-3 left-2 z-10">
           <Badge className="bg-cyan-500 text-black text-[10px] font-black uppercase">
-            <Heart className="h-2.5 w-2.5 mr-0.5" />
-            Wishlist
+            <Heart className="h-2.5 w-2.5 mr-0.5" />Wishlist
           </Badge>
         </div>
       )}
-
-      {/* Rarity badge */}
       <div className="absolute top-3 right-2 z-10">
-        <Badge 
-          variant="outline" 
-          className="text-[9px] px-1.5 py-0.5 backdrop-blur-sm font-bold uppercase tracking-wider"
-          style={{ borderColor: rarityTier.color, color: rarityTier.color, backgroundColor: rarityTier.color + '15' }}
-        >
+        <Badge variant="outline" className="text-[9px] px-1.5 py-0.5 backdrop-blur-sm font-bold uppercase tracking-wider"
+          style={{ borderColor: rarityTier.color, color: rarityTier.color, backgroundColor: rarityTier.color + '15' }}>
           {rarityTier.label}
         </Badge>
       </div>
 
-      {/* Item image or placeholder with RPG frame */}
       <div className="h-36 bg-gradient-to-br from-black/50 to-black/30 flex items-center justify-center relative overflow-hidden">
-        <div className={cn(
-          'absolute inset-2 rounded-lg border-2 opacity-30',
-          RARITY_BORDER[rarity]
-        )} />
-        
+        <div className={cn('absolute inset-2 rounded-lg border-2 opacity-30', RARITY_BORDER[rarity])} />
         {item.images?.[0] ? (
-          <img 
-            src={item.images[0]} 
-            alt={item.title}
-            className="w-full h-full object-cover"
-          />
+          <img src={item.images[0]} alt={item.title} className="w-full h-full object-cover" />
         ) : (
           <div className="flex flex-col items-center gap-1">
             <span className="text-5xl">{category.emoji}</span>
             <span className="text-[10px] uppercase tracking-wider text-muted-foreground">{category.label}</span>
           </div>
         )}
-
-        {/* Hover overlay with actions */}
         <div className="absolute inset-0 bg-black/80 opacity-0 group-hover:opacity-100 transition-all duration-200 flex flex-col items-center justify-center gap-2 backdrop-blur-sm">
           <div className="flex items-center gap-2">
             <Button size="sm" variant="outline" className="h-8 border-white/30" onClick={(e) => { e.stopPropagation(); onEdit(); }}>
-              <Edit3 className="h-3.5 w-3.5 mr-1" />
-              Edit
+              <Edit3 className="h-3.5 w-3.5 mr-1" />Edit
             </Button>
             <Button size="sm" variant="destructive" className="h-8" onClick={(e) => { e.stopPropagation(); onDelete(); }}>
               <Trash2 className="h-3.5 w-3.5" />
             </Button>
           </div>
-          {/* List on Marketplace button for items marked for sale/trade */}
           {canListOnMarketplace && onListOnMarketplace && (
-            <Button 
-              size="sm" 
-              className="h-7 bg-[#ff6600] hover:bg-[#ff6600]/90 text-black font-bold"
-              onClick={(e) => { e.stopPropagation(); onListOnMarketplace(); }}
-            >
-              <Store className="h-3 w-3 mr-1" />
-              List on Marketplace
+            <Button size="sm" className="h-7 bg-[#ff6600] hover:bg-[#ff6600]/90 text-black font-bold"
+              onClick={(e) => { e.stopPropagation(); onListOnMarketplace(); }}>
+              <Store className="h-3 w-3 mr-1" />List on Marketplace
             </Button>
           )}
           {item.visibility !== 'private' && (
             <Button size="sm" variant="ghost" className="h-7 text-cyan-400 hover:text-cyan-300 hover:bg-cyan-500/10">
-              <Send className="h-3 w-3 mr-1" />
-              Share via DM
+              <Send className="h-3 w-3 mr-1" />Share via DM
             </Button>
           )}
         </div>
       </div>
 
       <CardContent className="p-3 space-y-2">
-        {/* Title and category */}
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0">
             <h3 className="font-bold text-sm text-white line-clamp-1" style={{ textShadow: `0 0 10px ${rarityTier.color}40` }}>
@@ -223,48 +313,27 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
             </p>
           </div>
         </div>
-
-        {/* Storage location badge */}
         {!isWTB && item.storageLocation && item.storageLocation !== 'other' && (
           <div className="flex items-center gap-1">
             <span className="text-[10px] px-1.5 py-0.5 rounded-full border border-[#ff6600]/30 text-[#ff6600] font-bold uppercase tracking-wide">
               {{
-                home: '🏠 Home',
-                car: '🚗 Car',
-                skatepark: '🛹 Skatepark',
-                warehouse: '🏭 Warehouse',
-                storage_unit: '🔒 Storage Unit',
-                van: '🚐 Van',
-                friends: "👫 Friend's",
-                parents: "👨‍👩‍👦 Parents'",
-                wardrobe: '🚪 Wardrobe',
-                backpack: '🎒 Backpack',
-                sponsor: '🤝 Sponsor',
-                other: '📦 Other',
+                home: '🏠 Home', car: '🚗 Car', skatepark: '🛹 Skatepark', warehouse: '🏭 Warehouse',
+                storage_unit: '🔒 Storage Unit', van: '🚐 Van', friends: "👫 Friend's", parents: "👨‍👩‍👦 Parents'",
+                wardrobe: '🚪 Wardrobe', backpack: '🎒 Backpack', sponsor: '🤝 Sponsor', other: '📦 Other',
               }[item.storageLocation]}
             </span>
           </div>
         )}
-
-        {/* Condition stars */}
         {!isWTB && (
           <div className="flex items-center gap-1">
             {Array.from({ length: 5 }).map((_, i) => (
-              <Star 
-                key={i}
-                className={cn(
-                  'h-3 w-3 transition-all',
-                  i < condition.stars ? 'fill-yellow-400 text-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.5)]' : 'text-gray-700'
-                )}
-              />
+              <Star key={i} className={cn('h-3 w-3', i < condition.stars ? 'fill-yellow-400 text-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.5)]' : 'text-gray-700')} />
             ))}
             <span className="text-[10px] ml-1 font-medium" style={{ color: condition.color }}>
               {condition.label.split(' ')[1]}
             </span>
           </div>
         )}
-
-        {/* Price and trade info */}
         <div className="flex items-center justify-between pt-2 border-t border-white/10">
           {(item.minPrice || item.maxPrice) ? (
             <div className="flex items-center gap-1">
@@ -273,41 +342,16 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
                 {isWTB ? 'Up to ' : ''}{(item.maxPrice || item.minPrice || 0).toLocaleString()}
               </span>
               <span className="text-[10px] text-muted-foreground">sats</span>
-              {usdValue && (
-                <span className="text-[10px] text-muted-foreground">(~${usdValue.toFixed(0)})</span>
-              )}
+              {usdValue && <span className="text-[10px] text-muted-foreground">(~${usdValue.toFixed(0)})</span>}
             </div>
           ) : (
             <span className="text-xs text-muted-foreground">No price set</span>
           )}
-
           <div className="flex items-center gap-1">
-            {item.visibility === 'private' && (
-              <Tooltip>
-                <TooltipTrigger>
-                  <Lock className="h-3.5 w-3.5 text-red-400" />
-                </TooltipTrigger>
-                <TooltipContent>Private - only you can see</TooltipContent>
-              </Tooltip>
-            )}
-            {item.visibility === 'friends' && (
-              <Tooltip>
-                <TooltipTrigger>
-                  <Users className="h-3.5 w-3.5 text-blue-400" />
-                </TooltipTrigger>
-                <TooltipContent>Friends - mutual follows can see</TooltipContent>
-              </Tooltip>
-            )}
-            {item.willingToTrade && (
-              <Badge variant="outline" className="text-[9px] h-5 px-1 border-cyan-500/50 text-cyan-400 gap-0.5">
-                <ArrowRightLeft className="h-2.5 w-2.5" />
-              </Badge>
-            )}
-            {item.willingToSell && !isWTB && (
-              <Badge variant="outline" className="text-[9px] h-5 px-1 border-green-500/50 text-green-400 gap-0.5">
-                <Zap className="h-2.5 w-2.5" />
-              </Badge>
-            )}
+            {item.visibility === 'private' && <Tooltip><TooltipTrigger><Lock className="h-3.5 w-3.5 text-red-400" /></TooltipTrigger><TooltipContent>Private</TooltipContent></Tooltip>}
+            {item.visibility === 'friends' && <Tooltip><TooltipTrigger><Users className="h-3.5 w-3.5 text-blue-400" /></TooltipTrigger><TooltipContent>Friends only</TooltipContent></Tooltip>}
+            {item.willingToTrade && <Badge variant="outline" className="text-[9px] h-5 px-1 border-cyan-500/50 text-cyan-400 gap-0.5"><ArrowRightLeft className="h-2.5 w-2.5" /></Badge>}
+            {item.willingToSell && !isWTB && <Badge variant="outline" className="text-[9px] h-5 px-1 border-green-500/50 text-green-400 gap-0.5"><Zap className="h-2.5 w-2.5" /></Badge>}
           </div>
         </div>
       </CardContent>
@@ -315,103 +359,52 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
   );
 }
 
-// Profile Stats Panel - Clean inventory overview
-function CharacterPanel({ stats, pubkey }: { stats: { total: number; byCategory: Record<string, number>; totalValue: number }; pubkey: string }) {
+// ─── Compact Profile Stats ────────────────────────────────────────────────────
+function ProfileStatsBar({ stats, pubkey }: { stats: { total: number; byCategory: Record<string, number>; totalValue: number }; pubkey: string }) {
   const author = useAuthor(pubkey);
   const metadata = author.data?.metadata;
   const displayName = metadata?.name ?? genUserName(pubkey);
   const avatar = metadata?.picture;
   const usdValue = useSatsToUsd(stats.totalValue);
-  
-  // Get top category for display
-  const topCategory = Object.entries(stats.byCategory).sort(([,a], [,b]) => b - a)[0];
-  const topCategoryInfo = topCategory ? STASH_CATEGORIES[topCategory[0] as keyof typeof STASH_CATEGORIES] : null;
+  const charClass = getCharacterClass(stats.byCategory);
 
   return (
-    <Card className="bg-gradient-to-br from-black/90 to-black/70 border-2 border-[#ff6600]/40 overflow-hidden">
-      {/* Header */}
-      <div className="relative h-20 bg-gradient-to-r from-[#ff0040]/20 via-[#ff6600]/15 to-[#ccff00]/20 overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent" />
-      </div>
-      
-      {/* Avatar overlapping */}
-      <div className="relative -mt-10 px-4">
-        <Avatar className="h-16 w-16 border-4 border-black ring-2 ring-[#ff6600]/50">
-          <AvatarImage src={avatar} alt={displayName} />
-          <AvatarFallback className="bg-[#ff6600]/20 text-[#ff6600] text-lg font-black">
-            {displayName.slice(0, 2).toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-      </div>
-
-      <CardContent className="pt-2 pb-4 px-4 space-y-4">
-        {/* Name */}
-        <div>
-          <h3 className="font-black text-lg text-white">{displayName}</h3>
-          <p className="text-xs text-muted-foreground">
-            {topCategoryInfo ? (
-              <span className="flex items-center gap-1">
-                <span>{topCategoryInfo.emoji}</span>
-                <span>Mostly {topCategoryInfo.label.toLowerCase()}</span>
-              </span>
-            ) : (
-              'Start adding gear!'
-            )}
-          </p>
+    <div className="flex items-center gap-3 p-4 rounded-2xl bg-gradient-to-r from-[#ff6600]/10 via-black/60 to-[#ff0040]/10 border border-[#ff6600]/30">
+      <Avatar className="h-12 w-12 border-2 ring-2 ring-[#ff6600]/40 flex-shrink-0" style={{ borderColor: '#ff6600' }}>
+        <AvatarImage src={avatar} alt={displayName} />
+        <AvatarFallback className="bg-[#ff6600]/20 text-[#ff6600] font-black">{displayName.slice(0, 2).toUpperCase()}</AvatarFallback>
+      </Avatar>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="font-black text-white text-sm truncate">{displayName}</span>
+          <Badge className="text-[10px] px-1.5 py-0 h-4 font-bold flex items-center gap-1 flex-shrink-0"
+            style={{ backgroundColor: charClass.color + '20', color: charClass.color, borderColor: charClass.color + '50' }}
+            variant="outline">
+            {charClass.icon}{charClass.name}
+          </Badge>
         </div>
-
-        {/* Stats grid */}
-        <div className="grid grid-cols-2 gap-2">
-          <div className="p-3 rounded-lg bg-gradient-to-br from-[#ff0040]/10 to-[#ff0040]/5 border border-[#ff0040]/30 text-center">
-            <div className="text-2xl font-black text-[#ff0040]">{stats.total}</div>
-            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Items</div>
-          </div>
-          <div className="p-3 rounded-lg bg-gradient-to-br from-amber-500/10 to-amber-500/5 border border-amber-500/30 text-center">
-            <div className="flex items-center justify-center gap-1">
-              <Zap className="h-4 w-4 text-amber-400" />
-              <span className="text-lg font-black text-amber-400">
-                {stats.totalValue > 999999 ? (stats.totalValue / 1000000).toFixed(1) + 'M' : 
-                 stats.totalValue > 999 ? Math.floor(stats.totalValue / 1000) + 'k' : stats.totalValue}
-              </span>
-            </div>
-            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
-              {usdValue ? `~$${usdValue.toFixed(0)}` : 'Est. Value'}
-            </div>
-          </div>
+        <div className="flex items-center gap-4 text-xs">
+          <span className="text-[#ff0040] font-black">{stats.total} <span className="text-muted-foreground font-normal">items</span></span>
+          {stats.totalValue > 0 && (
+            <span className="text-amber-400 font-black flex items-center gap-0.5">
+              <Zap className="h-3 w-3" />
+              {stats.totalValue > 999 ? Math.floor(stats.totalValue / 1000) + 'k' : stats.totalValue}
+              {usdValue ? <span className="text-muted-foreground font-normal ml-0.5">~${usdValue.toFixed(0)}</span> : null}
+            </span>
+          )}
         </div>
-
-        {/* Category breakdown */}
-        {Object.keys(stats.byCategory).length > 0 && (
-          <div className="space-y-2">
-            <h4 className="text-[10px] font-black uppercase tracking-wider text-muted-foreground">By Category</h4>
-            <div className="grid grid-cols-3 gap-1.5">
-              {Object.entries(stats.byCategory).slice(0, 6).map(([cat, count]) => {
-                const category = STASH_CATEGORIES[cat as keyof typeof STASH_CATEGORIES];
-                if (!category) return null;
-                return (
-                  <div 
-                    key={cat} 
-                    className="flex items-center gap-1.5 px-2 py-1.5 rounded bg-black/40 border border-white/5"
-                  >
-                    <span className="text-sm">{category.emoji}</span>
-                    <span className="text-xs font-bold" style={{ color: category.color }}>{count}</span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }
 
-function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem, 'id' | 'addedAt'>) => void; mode?: 'stash' | 'wtb' }) {
+// ─── Add Item Dialog ──────────────────────────────────────────────────────────
+function AddItemDialog({ onAdd, mode = 'stash', trigger }: { onAdd: (item: Omit<StashItem, 'id' | 'addedAt'>) => void; mode?: 'stash' | 'wtb'; trigger?: React.ReactNode }) {
   const [open, setOpen] = useState(false);
   const isWTB = mode === 'wtb';
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
-  
+
   const [formData, setFormData] = useState<Partial<StashItem>>({
     category: 'deck',
     condition: 'good',
@@ -425,29 +418,16 @@ function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem
   const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
-
     try {
       const newImages: string[] = [...(formData.images || [])];
-      
       for (const file of Array.from(files)) {
-        // Upload to Blossom
         const tags = await uploadFile(file);
-        // First tag contains the URL
         const urlTag = tags.find(t => t[0] === 'url');
-        if (urlTag) {
-          newImages.push(urlTag[1]);
-        }
+        if (urlTag) newImages.push(urlTag[1]);
       }
-      
       setFormData({ ...formData, images: newImages });
-    } catch (error) {
-      console.error('Failed to upload image:', error);
-    }
-    
-    // Reset input
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
+    } catch { /* ignore */ }
+    if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
   const removeImage = (index: number) => {
@@ -459,7 +439,6 @@ function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem
   const handleSubmit = () => {
     if (!formData.title || !formData.category) return;
     if (!isWTB && !formData.condition) return;
-
     onAdd({
       title: formData.title,
       category: formData.category as StashItem['category'],
@@ -476,308 +455,143 @@ function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem
       itemType: isWTB ? 'wtb' : 'stash',
       storageLocation: isWTB ? undefined : formData.storageLocation,
     });
-
-    setFormData({
-      category: 'deck',
-      condition: 'good',
-      visibility: 'private',
-      willingToSell: !isWTB,
-      willingToTrade: false,
-      itemType: isWTB ? 'wtb' : 'stash',
-      images: [],
-    });
+    setFormData({ category: 'deck', condition: 'good', visibility: 'private', willingToSell: !isWTB, willingToTrade: false, itemType: isWTB ? 'wtb' : 'stash', images: [] });
     setOpen(false);
   };
 
+  const defaultTrigger = isWTB ? (
+    <Button variant="outline" className="gap-2 border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10">
+      <Heart className="h-4 w-4" />Add to Wishlist
+    </Button>
+  ) : (
+    <Button className="gap-2 bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 border-0 shadow-lg shadow-[#ff0040]/20">
+      <Plus className="h-4 w-4" />Add to Stash
+    </Button>
+  );
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {isWTB ? (
-          <Button variant="outline" className="gap-2 border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10">
-            <Heart className="h-4 w-4" />
-            Add to Wishlist
-          </Button>
-        ) : (
-          <Button className="gap-2 bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 border-0 shadow-lg shadow-[#ff0040]/20">
-            <Plus className="h-4 w-4" />
-            Add to Stash
-          </Button>
-        )}
-      </DialogTrigger>
+      <DialogTrigger asChild>{trigger ?? defaultTrigger}</DialogTrigger>
       <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto bg-black/95 border-2 border-[#ff6600]/40">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-white">
-            {isWTB ? (
-              <>
-                <Heart className="h-5 w-5 text-cyan-400" />
-                Add to Wishlist
-              </>
-            ) : (
-              <>
-                <Package className="h-5 w-5 text-[#ff6600]" />
-                Add Item to Stash
-              </>
-            )}
+            {isWTB ? <><Heart className="h-5 w-5 text-cyan-400" />Add to Wishlist</> : <><Package className="h-5 w-5 text-[#ff6600]" />Add Item to Stash</>}
           </DialogTitle>
           <DialogDescription className="text-muted-foreground">
-            {isWTB 
-              ? "Add items you're looking for. We'll notify you when someone's stash matches!"
-              : "Add gear to your private inventory. Share selectively with traders."
-            }
+            {isWTB ? "Add items you're looking for." : "Add gear to your encrypted private inventory."}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          {/* Title */}
           <div className="space-y-2">
             <Label>{isWTB ? 'Looking for...' : 'Item Name'} *</Label>
-            <Input
-              placeholder={isWTB ? "e.g. Any 8.0-8.25 deck, good condition" : "e.g. Powell Peralta Flight Deck 8.25"}
-              value={formData.title || ''}
-              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-              className="bg-black/50 border-white/20"
-            />
+            <Input placeholder={isWTB ? "e.g. Any 8.0-8.25 deck" : "e.g. Powell Peralta Flight Deck 8.25"}
+              value={formData.title || ''} onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              className="bg-black/50 border-white/20" />
           </div>
-
-          {/* Category and Condition */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label>Category *</Label>
-              <Select 
-                value={formData.category} 
-                onValueChange={(v) => setFormData({ ...formData, category: v as StashItem['category'] })}
-              >
-                <SelectTrigger className="bg-black/50 border-white/20">
-                  <SelectValue />
-                </SelectTrigger>
+              <Select value={formData.category} onValueChange={(v) => setFormData({ ...formData, category: v as StashItem['category'] })}>
+                <SelectTrigger className="bg-black/50 border-white/20"><SelectValue /></SelectTrigger>
                 <SelectContent>
                   {Object.entries(STASH_CATEGORIES).map(([key, cat]) => (
-                    <SelectItem key={key} value={key}>
-                      {cat.emoji} {cat.label}
-                    </SelectItem>
+                    <SelectItem key={key} value={key}>{cat.emoji} {cat.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>{isWTB ? 'Min. Condition' : 'Condition'} *</Label>
+              <Select value={formData.condition} onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}>
+                <SelectTrigger className="bg-black/50 border-white/20"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
+                    <SelectItem key={key} value={key}>{isWTB ? cond.label + ' or better' : cond.label}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-
-            {!isWTB && (
-              <div className="space-y-2">
-                <Label>Condition *</Label>
-                <Select 
-                  value={formData.condition} 
-                  onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}
-                >
-                  <SelectTrigger className="bg-black/50 border-white/20">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
-                      <SelectItem key={key} value={key}>
-                        {cond.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-            
-            {isWTB && (
-              <div className="space-y-2">
-                <Label>Min. Condition</Label>
-                <Select 
-                  value={formData.condition} 
-                  onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}
-                >
-                  <SelectTrigger className="bg-black/50 border-white/20">
-                    <SelectValue placeholder="Any condition" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
-                      <SelectItem key={key} value={key}>
-                        {cond.label} or better
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
           </div>
-
-          {/* Brand and Size */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label>{isWTB ? 'Preferred Brand' : 'Brand'}</Label>
-              <Input
-                placeholder={isWTB ? "Any brand or specific" : "e.g. Powell, Spitfire"}
-                value={formData.brand || ''}
-                onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
-                className="bg-black/50 border-white/20"
-              />
+              <Input placeholder={isWTB ? "Any or specific" : "e.g. Powell, Spitfire"} value={formData.brand || ''}
+                onChange={(e) => setFormData({ ...formData, brand: e.target.value })} className="bg-black/50 border-white/20" />
             </div>
             <div className="space-y-2">
               <Label>{isWTB ? 'Size Range' : 'Size'}</Label>
-              <Input
-                placeholder={isWTB ? "e.g. 8.0-8.25" : "e.g. 8.25, 52mm"}
-                value={formData.size || ''}
-                onChange={(e) => setFormData({ ...formData, size: e.target.value })}
-                className="bg-black/50 border-white/20"
-              />
+              <Input placeholder={isWTB ? "e.g. 8.0-8.25" : "e.g. 8.25, 52mm"} value={formData.size || ''}
+                onChange={(e) => setFormData({ ...formData, size: e.target.value })} className="bg-black/50 border-white/20" />
             </div>
           </div>
-
-          {/* Description */}
           <div className="space-y-2">
             <Label>{isWTB ? 'Additional Notes' : 'Description'}</Label>
-            <Textarea
-              placeholder={isWTB 
-                ? "Any specific requirements, colors, features you want..."
-                : "Describe the item, any damage, special features..."
-              }
-              value={formData.description || ''}
-              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-              rows={3}
-              className="bg-black/50 border-white/20"
-            />
+            <Textarea placeholder={isWTB ? "Any specific requirements..." : "Describe the item, any damage..."}
+              value={formData.description || ''} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3} className="bg-black/50 border-white/20" />
           </div>
 
-          {/* Image Upload - only for stash items */}
           {!isWTB && (
             <div className="space-y-2">
               <Label>Photos</Label>
               <div className="space-y-3">
-                {/* Image preview grid */}
                 {formData.images && formData.images.length > 0 && (
                   <div className="grid grid-cols-3 gap-2">
                     {formData.images.map((url, index) => (
                       <div key={index} className="relative aspect-square rounded-lg overflow-hidden border border-white/20 group">
-                        <img src={url} alt={`Item photo ${index + 1}`} className="w-full h-full object-cover" />
-                        <button
-                          type="button"
-                          onClick={() => removeImage(index)}
-                          className="absolute top-1 right-1 p-1 rounded-full bg-black/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
-                        >
+                        <img src={url} alt={`Photo ${index + 1}`} className="w-full h-full object-cover" />
+                        <button type="button" onClick={() => removeImage(index)}
+                          className="absolute top-1 right-1 p-1 rounded-full bg-black/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500">
                           <X className="h-3 w-3" />
                         </button>
                       </div>
                     ))}
                   </div>
                 )}
-                
-                {/* Upload button */}
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/*"
-                  multiple
-                  onChange={handleImageUpload}
-                  className="hidden"
-                />
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full border-dashed border-white/30 hover:border-[#ff6600]/50 hover:bg-[#ff6600]/5"
-                  onClick={() => fileInputRef.current?.click()}
-                  disabled={isUploading}
-                >
-                  {isUploading ? (
-                    <>
-                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                      Uploading...
-                    </>
-                  ) : (
-                    <>
-                      <ImagePlus className="h-4 w-4 mr-2" />
-                      Add Photos
-                    </>
-                  )}
+                <input ref={fileInputRef} type="file" accept="image/*" multiple onChange={handleImageUpload} className="hidden" />
+                <Button type="button" variant="outline" className="w-full border-dashed border-white/30 hover:border-[#ff6600]/50 hover:bg-[#ff6600]/5"
+                  onClick={() => fileInputRef.current?.click()} disabled={isUploading}>
+                  {isUploading ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Uploading...</> : <><ImagePlus className="h-4 w-4 mr-2" />Add Photos</>}
                 </Button>
-                <p className="text-xs text-muted-foreground">
-                  Add photos to help others see what you have. Max 5 photos recommended.
-                </p>
               </div>
             </div>
           )}
 
-          {/* Price */}
           <div className="space-y-2">
             <Label>{isWTB ? 'Max Budget (sats)' : 'Minimum Price (sats)'}</Label>
-            <Input
-              type="number"
-              placeholder={isWTB ? "e.g. 100000" : "e.g. 50000"}
+            <Input type="number" placeholder={isWTB ? "e.g. 100000" : "e.g. 50000"}
               value={isWTB ? (formData.maxPrice || '') : (formData.minPrice || '')}
-              onChange={(e) => setFormData({ 
-                ...formData, 
-                [isWTB ? 'maxPrice' : 'minPrice']: parseInt(e.target.value) || undefined 
-              })}
-              className="bg-black/50 border-white/20"
-            />
-            <p className="text-xs text-muted-foreground">
-              {isWTB 
-                ? "Maximum sats you're willing to pay"
-                : "The minimum sats you'd accept for this item"
-              }
-            </p>
+              onChange={(e) => setFormData({ ...formData, [isWTB ? 'maxPrice' : 'minPrice']: parseInt(e.target.value) || undefined })}
+              className="bg-black/50 border-white/20" />
           </div>
 
-          {/* Willing to... */}
           <div className="space-y-3">
             {!isWTB && (
               <div className="flex items-center justify-between p-3 rounded-lg bg-green-500/10 border border-green-500/30">
-                <div className="flex items-center gap-2">
-                  <Zap className="h-4 w-4 text-green-400" />
-                  <Label>Willing to Sell</Label>
-                </div>
-                <Switch
-                  checked={formData.willingToSell}
-                  onCheckedChange={(v) => setFormData({ ...formData, willingToSell: v })}
-                />
+                <div className="flex items-center gap-2"><Zap className="h-4 w-4 text-green-400" /><Label>Willing to Sell</Label></div>
+                <Switch checked={formData.willingToSell} onCheckedChange={(v) => setFormData({ ...formData, willingToSell: v })} />
               </div>
             )}
             <div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
-              <div className="flex items-center gap-2">
-                <ArrowRightLeft className="h-4 w-4 text-cyan-400" />
-                <Label>{isWTB ? 'Open to Trade' : 'Willing to Trade'}</Label>
-              </div>
-              <Switch
-                checked={formData.willingToTrade}
-                onCheckedChange={(v) => setFormData({ ...formData, willingToTrade: v })}
-              />
+              <div className="flex items-center gap-2"><ArrowRightLeft className="h-4 w-4 text-cyan-400" /><Label>{isWTB ? 'Open to Trade' : 'Willing to Trade'}</Label></div>
+              <Switch checked={formData.willingToTrade} onCheckedChange={(v) => setFormData({ ...formData, willingToTrade: v })} />
             </div>
           </div>
 
-          {/* Storage Location */}
           {!isWTB && (
             <div className="space-y-2">
-              <Label className="flex items-center gap-2">
-                <MapPin className="h-4 w-4 text-[#ff6600]" />
-                Where is this item?
-              </Label>
+              <Label className="flex items-center gap-2"><MapPin className="h-4 w-4 text-[#ff6600]" />Where is this item?</Label>
               <div className="grid grid-cols-3 gap-2">
                 {([
-                  { value: 'home', label: '🏠 Home' },
-                  { value: 'car', label: '🚗 Car' },
-                  { value: 'backpack', label: '🎒 Backpack' },
-                  { value: 'wardrobe', label: '🚪 Wardrobe' },
-                  { value: 'van', label: '🚐 Van' },
-                  { value: 'skatepark', label: '🛹 Skatepark' },
-                  { value: 'friends', label: "👫 Friend's" },
-                  { value: 'parents', label: "👨‍👩‍👦 Parents'" },
-                  { value: 'warehouse', label: '🏭 Warehouse' },
-                  { value: 'storage_unit', label: '🔒 Storage Unit' },
-                  { value: 'sponsor', label: '🤝 Sponsor' },
-                  { value: 'other', label: '📦 Other' },
+                  { value: 'home', label: '🏠 Home' }, { value: 'car', label: '🚗 Car' }, { value: 'backpack', label: '🎒 Backpack' },
+                  { value: 'wardrobe', label: '🚪 Wardrobe' }, { value: 'van', label: '🚐 Van' }, { value: 'skatepark', label: '🛹 Skatepark' },
+                  { value: 'friends', label: "👫 Friend's" }, { value: 'parents', label: "👨‍👩‍👦 Parents'" }, { value: 'warehouse', label: '🏭 Warehouse' },
+                  { value: 'storage_unit', label: '🔒 Storage Unit' }, { value: 'sponsor', label: '🤝 Sponsor' }, { value: 'other', label: '📦 Other' },
                 ] as const).map(({ value, label }) => (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => setFormData({ ...formData, storageLocation: value })}
-                    className={cn(
-                      'p-2 rounded-lg text-xs font-bold text-center transition-all border',
-                      formData.storageLocation === value
-                        ? 'bg-[#ff6600] border-[#ff6600] text-black'
-                        : 'bg-black/40 border-white/10 text-gray-400 hover:border-[#ff6600]/50 hover:text-white'
-                    )}
-                  >
+                  <button key={value} type="button" onClick={() => setFormData({ ...formData, storageLocation: value })}
+                    className={cn('p-2 rounded-lg text-xs font-bold text-center transition-all border',
+                      formData.storageLocation === value ? 'bg-[#ff6600] border-[#ff6600] text-black' : 'bg-black/40 border-white/10 text-gray-400 hover:border-[#ff6600]/50 hover:text-white')}>
                     {label}
                   </button>
                 ))}
@@ -785,39 +599,18 @@ function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem
             </div>
           )}
 
-          {/* Visibility */}
           <div className="space-y-2">
             <Label>Visibility</Label>
-            <Select 
-              value={formData.visibility} 
-              onValueChange={(v) => setFormData({ ...formData, visibility: v as StashItem['visibility'] })}
-            >
-              <SelectTrigger className="bg-black/50 border-white/20">
-                <SelectValue />
-              </SelectTrigger>
+            <Select value={formData.visibility} onValueChange={(v) => setFormData({ ...formData, visibility: v as StashItem['visibility'] })}>
+              <SelectTrigger className="bg-black/50 border-white/20"><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="private">
-                  <div className="flex items-center gap-2">
-                    <Lock className="h-3.5 w-3.5 text-red-400" />
-                    <span>Private - Only you</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="friends">
-                  <div className="flex items-center gap-2">
-                    <Users className="h-3.5 w-3.5 text-blue-400" />
-                    <span>Friends - Mutual follows</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="public">
-                  <div className="flex items-center gap-2">
-                    <Globe className="h-3.5 w-3.5 text-green-400" />
-                    <span>Public - Anyone</span>
-                  </div>
-                </SelectItem>
+                <SelectItem value="private"><div className="flex items-center gap-2"><Lock className="h-3.5 w-3.5 text-red-400" /><span>Private - Only you</span></div></SelectItem>
+                <SelectItem value="friends"><div className="flex items-center gap-2"><Users className="h-3.5 w-3.5 text-blue-400" /><span>Friends - Mutual follows</span></div></SelectItem>
+                <SelectItem value="public"><div className="flex items-center gap-2"><Globe className="h-3.5 w-3.5 text-green-400" /><span>Public - Anyone</span></div></SelectItem>
               </SelectContent>
             </Select>
             <p className="text-xs text-muted-foreground">
-              {formData.visibility === 'private' && 'Only visible to you. Share manually via DM.'}
+              {formData.visibility === 'private' && 'Encrypted — only visible to you.'}
               {formData.visibility === 'friends' && 'Visible to people you mutually follow.'}
               {formData.visibility === 'public' && 'Anyone can see this in your stash.'}
             </p>
@@ -825,29 +618,10 @@ function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem
         </div>
 
         <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline" className="border-white/20">Cancel</Button>
-          </DialogClose>
-          <Button 
-            onClick={handleSubmit}
-            disabled={!formData.title || isUploading}
-            className={cn(
-              isWTB 
-                ? "bg-cyan-500 hover:bg-cyan-600 text-black" 
-                : "bg-[#ff6600] hover:bg-[#ff6600]/90"
-            )}
-          >
-            {isWTB ? (
-              <>
-                <Heart className="h-4 w-4 mr-2" />
-                Add to Wishlist
-              </>
-            ) : (
-              <>
-                <Plus className="h-4 w-4 mr-2" />
-                Add Item
-              </>
-            )}
+          <DialogClose asChild><Button variant="outline" className="border-white/20">Cancel</Button></DialogClose>
+          <Button onClick={handleSubmit} disabled={!formData.title || isUploading}
+            className={cn(isWTB ? "bg-cyan-500 hover:bg-cyan-600 text-black" : "bg-[#ff6600] hover:bg-[#ff6600]/90")}>
+            {isWTB ? <><Heart className="h-4 w-4 mr-2" />Add to Wishlist</> : <><Plus className="h-4 w-4 mr-2" />Add Item</>}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -855,52 +629,28 @@ function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem
   );
 }
 
-// Edit Item Dialog
-function EditItemDialog({ 
-  item, 
-  open, 
-  onOpenChange, 
-  onSave 
-}: { 
-  item: StashItem; 
-  open: boolean; 
-  onOpenChange: (open: boolean) => void;
-  onSave: (item: StashItem) => void;
-}) {
+// ─── Edit Item Dialog ─────────────────────────────────────────────────────────
+function EditItemDialog({ item, open, onOpenChange, onSave }: { item: StashItem; open: boolean; onOpenChange: (open: boolean) => void; onSave: (item: StashItem) => void }) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
   const isWTB = item.itemType === 'wtb';
-  
   const [formData, setFormData] = useState<StashItem>({ ...item });
 
-  // Reset form when item changes
-  useState(() => {
-    setFormData({ ...item });
-  });
+  useState(() => { setFormData({ ...item }); });
 
   const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
-
     try {
       const newImages: string[] = [...(formData.images || [])];
-      
       for (const file of Array.from(files)) {
         const tags = await uploadFile(file);
         const urlTag = tags.find(t => t[0] === 'url');
-        if (urlTag) {
-          newImages.push(urlTag[1]);
-        }
+        if (urlTag) newImages.push(urlTag[1]);
       }
-      
       setFormData({ ...formData, images: newImages });
-    } catch (error) {
-      console.error('Failed to upload image:', error);
-    }
-    
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
+    } catch { /* ignore */ }
+    if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
   const removeImage = (index: number) => {
@@ -920,95 +670,44 @@ function EditItemDialog({
       <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto bg-black/95 border-2 border-[#ff6600]/40">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-white">
-            <Edit3 className="h-5 w-5 text-[#ff6600]" />
-            Edit Item
+            <Edit3 className="h-5 w-5 text-[#ff6600]" />Edit Item
           </DialogTitle>
         </DialogHeader>
-
         <div className="space-y-4 py-4">
-          {/* Title */}
           <div className="space-y-2">
             <Label>Item Name *</Label>
-            <Input
-              value={formData.title || ''}
-              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-              className="bg-black/50 border-white/20"
-            />
+            <Input value={formData.title || ''} onChange={(e) => setFormData({ ...formData, title: e.target.value })} className="bg-black/50 border-white/20" />
           </div>
-
-          {/* Category and Condition */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label>Category *</Label>
-              <Select 
-                value={formData.category} 
-                onValueChange={(v) => setFormData({ ...formData, category: v as StashItem['category'] })}
-              >
-                <SelectTrigger className="bg-black/50 border-white/20">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.entries(STASH_CATEGORIES).map(([key, cat]) => (
-                    <SelectItem key={key} value={key}>
-                      {cat.emoji} {cat.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
+              <Select value={formData.category} onValueChange={(v) => setFormData({ ...formData, category: v as StashItem['category'] })}>
+                <SelectTrigger className="bg-black/50 border-white/20"><SelectValue /></SelectTrigger>
+                <SelectContent>{Object.entries(STASH_CATEGORIES).map(([key, cat]) => (<SelectItem key={key} value={key}>{cat.emoji} {cat.label}</SelectItem>))}</SelectContent>
               </Select>
             </div>
-
             <div className="space-y-2">
               <Label>Condition</Label>
-              <Select 
-                value={formData.condition} 
-                onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}
-              >
-                <SelectTrigger className="bg-black/50 border-white/20">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
-                    <SelectItem key={key} value={key}>
-                      {cond.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
+              <Select value={formData.condition} onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}>
+                <SelectTrigger className="bg-black/50 border-white/20"><SelectValue /></SelectTrigger>
+                <SelectContent>{Object.entries(CONDITION_LABELS).map(([key, cond]) => (<SelectItem key={key} value={key}>{cond.label}</SelectItem>))}</SelectContent>
               </Select>
             </div>
           </div>
-
-          {/* Brand and Size */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label>Brand</Label>
-              <Input
-                value={formData.brand || ''}
-                onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
-                className="bg-black/50 border-white/20"
-              />
+              <Input value={formData.brand || ''} onChange={(e) => setFormData({ ...formData, brand: e.target.value })} className="bg-black/50 border-white/20" />
             </div>
             <div className="space-y-2">
               <Label>Size</Label>
-              <Input
-                value={formData.size || ''}
-                onChange={(e) => setFormData({ ...formData, size: e.target.value })}
-                className="bg-black/50 border-white/20"
-              />
+              <Input value={formData.size || ''} onChange={(e) => setFormData({ ...formData, size: e.target.value })} className="bg-black/50 border-white/20" />
             </div>
           </div>
-
-          {/* Description */}
           <div className="space-y-2">
             <Label>Description</Label>
-            <Textarea
-              value={formData.description || ''}
-              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-              rows={3}
-              className="bg-black/50 border-white/20"
-            />
+            <Textarea value={formData.description || ''} onChange={(e) => setFormData({ ...formData, description: e.target.value })} rows={3} className="bg-black/50 border-white/20" />
           </div>
-
-          {/* Image Upload */}
           {!isWTB && (
             <div className="space-y-2">
               <Label>Photos</Label>
@@ -1017,135 +716,57 @@ function EditItemDialog({
                   <div className="grid grid-cols-3 gap-2">
                     {formData.images.map((url, index) => (
                       <div key={index} className="relative aspect-square rounded-lg overflow-hidden border border-white/20 group">
-                        <img src={url} alt={`Item photo ${index + 1}`} className="w-full h-full object-cover" />
-                        <button
-                          type="button"
-                          onClick={() => removeImage(index)}
-                          className="absolute top-1 right-1 p-1 rounded-full bg-black/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
-                        >
+                        <img src={url} alt={`Photo ${index + 1}`} className="w-full h-full object-cover" />
+                        <button type="button" onClick={() => removeImage(index)}
+                          className="absolute top-1 right-1 p-1 rounded-full bg-black/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500">
                           <X className="h-3 w-3" />
                         </button>
                       </div>
                     ))}
                   </div>
                 )}
-                
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/*"
-                  multiple
-                  onChange={handleImageUpload}
-                  className="hidden"
-                />
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full border-dashed border-white/30"
-                  onClick={() => fileInputRef.current?.click()}
-                  disabled={isUploading}
-                >
-                  {isUploading ? (
-                    <>
-                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                      Uploading...
-                    </>
-                  ) : (
-                    <>
-                      <ImagePlus className="h-4 w-4 mr-2" />
-                      Add Photos
-                    </>
-                  )}
+                <input ref={fileInputRef} type="file" accept="image/*" multiple onChange={handleImageUpload} className="hidden" />
+                <Button type="button" variant="outline" className="w-full border-dashed border-white/30"
+                  onClick={() => fileInputRef.current?.click()} disabled={isUploading}>
+                  {isUploading ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Uploading...</> : <><ImagePlus className="h-4 w-4 mr-2" />Add Photos</>}
                 </Button>
               </div>
             </div>
           )}
-
-          {/* Price */}
           <div className="space-y-2">
             <Label>{isWTB ? 'Max Budget (sats)' : 'Minimum Price (sats)'}</Label>
-            <Input
-              type="number"
-              value={isWTB ? (formData.maxPrice || '') : (formData.minPrice || '')}
-              onChange={(e) => setFormData({ 
-                ...formData, 
-                [isWTB ? 'maxPrice' : 'minPrice']: parseInt(e.target.value) || undefined 
-              })}
-              className="bg-black/50 border-white/20"
-            />
+            <Input type="number" value={isWTB ? (formData.maxPrice || '') : (formData.minPrice || '')}
+              onChange={(e) => setFormData({ ...formData, [isWTB ? 'maxPrice' : 'minPrice']: parseInt(e.target.value) || undefined })}
+              className="bg-black/50 border-white/20" />
           </div>
-
-          {/* Willing to... */}
           <div className="space-y-3">
             {!isWTB && (
               <div className="flex items-center justify-between p-3 rounded-lg bg-green-500/10 border border-green-500/30">
-                <div className="flex items-center gap-2">
-                  <Zap className="h-4 w-4 text-green-400" />
-                  <Label>Willing to Sell</Label>
-                </div>
-                <Switch
-                  checked={formData.willingToSell}
-                  onCheckedChange={(v) => setFormData({ ...formData, willingToSell: v })}
-                />
+                <div className="flex items-center gap-2"><Zap className="h-4 w-4 text-green-400" /><Label>Willing to Sell</Label></div>
+                <Switch checked={formData.willingToSell} onCheckedChange={(v) => setFormData({ ...formData, willingToSell: v })} />
               </div>
             )}
             <div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
-              <div className="flex items-center gap-2">
-                <ArrowRightLeft className="h-4 w-4 text-cyan-400" />
-                <Label>Willing to Trade</Label>
-              </div>
-              <Switch
-                checked={formData.willingToTrade}
-                onCheckedChange={(v) => setFormData({ ...formData, willingToTrade: v })}
-              />
+              <div className="flex items-center gap-2"><ArrowRightLeft className="h-4 w-4 text-cyan-400" /><Label>Willing to Trade</Label></div>
+              <Switch checked={formData.willingToTrade} onCheckedChange={(v) => setFormData({ ...formData, willingToTrade: v })} />
             </div>
           </div>
-
-          {/* Visibility */}
           <div className="space-y-2">
             <Label>Visibility</Label>
-            <Select 
-              value={formData.visibility} 
-              onValueChange={(v) => setFormData({ ...formData, visibility: v as StashItem['visibility'] })}
-            >
-              <SelectTrigger className="bg-black/50 border-white/20">
-                <SelectValue />
-              </SelectTrigger>
+            <Select value={formData.visibility} onValueChange={(v) => setFormData({ ...formData, visibility: v as StashItem['visibility'] })}>
+              <SelectTrigger className="bg-black/50 border-white/20"><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="private">
-                  <div className="flex items-center gap-2">
-                    <Lock className="h-3.5 w-3.5 text-red-400" />
-                    <span>Private</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="friends">
-                  <div className="flex items-center gap-2">
-                    <Users className="h-3.5 w-3.5 text-blue-400" />
-                    <span>Friends</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="public">
-                  <div className="flex items-center gap-2">
-                    <Globe className="h-3.5 w-3.5 text-green-400" />
-                    <span>Public</span>
-                  </div>
-                </SelectItem>
+                <SelectItem value="private"><div className="flex items-center gap-2"><Lock className="h-3.5 w-3.5 text-red-400" /><span>Private</span></div></SelectItem>
+                <SelectItem value="friends"><div className="flex items-center gap-2"><Users className="h-3.5 w-3.5 text-blue-400" /><span>Friends</span></div></SelectItem>
+                <SelectItem value="public"><div className="flex items-center gap-2"><Globe className="h-3.5 w-3.5 text-green-400" /><span>Public</span></div></SelectItem>
               </SelectContent>
             </Select>
           </div>
         </div>
-
         <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline" className="border-white/20">Cancel</Button>
-          </DialogClose>
-          <Button 
-            onClick={handleSubmit}
-            disabled={!formData.title || isUploading}
-            className="bg-[#ff6600] hover:bg-[#ff6600]/90"
-          >
-            <Edit3 className="h-4 w-4 mr-2" />
-            Save Changes
+          <DialogClose asChild><Button variant="outline" className="border-white/20">Cancel</Button></DialogClose>
+          <Button onClick={handleSubmit} disabled={!formData.title || isUploading} className="bg-[#ff6600] hover:bg-[#ff6600]/90">
+            <Edit3 className="h-4 w-4 mr-2" />Save Changes
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -1153,74 +774,41 @@ function EditItemDialog({
   );
 }
 
-// List at Spot Dialog - lets user pick a spot before creating listing
-function ListAtSpotDialog({
-  item,
-  open,
-  onOpenChange,
-  onSelectSpot,
-}: {
-  item: StashItem;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSelectSpot: (spotId: string | null) => void;
+// ─── List at Spot Dialog ──────────────────────────────────────────────────────
+function ListAtSpotDialog({ item, open, onOpenChange, onSelectSpot }: {
+  item: StashItem; open: boolean; onOpenChange: (open: boolean) => void; onSelectSpot: (spotId: string | null) => void;
 }) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md bg-black/95 border-2 border-[#ff6600]/40">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-white">
-            <Store className="h-5 w-5 text-[#ff6600]" />
-            List "{item.title}"
+            <Store className="h-5 w-5 text-[#ff6600]" />List "{item.title}"
           </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            Where can buyers pick up this item?
-          </DialogDescription>
+          <DialogDescription className="text-muted-foreground">Where can buyers pick up this item?</DialogDescription>
         </DialogHeader>
-
         <div className="py-4 space-y-4">
-          {/* Options */}
           <div className="space-y-3">
-            {/* Option 1: Link to a spot */}
-            <Button 
-              variant="outline" 
-              className="w-full justify-start h-auto py-4 border-[#ff6600]/50 hover:bg-[#ff6600]/10 hover:border-[#ff6600]"
-              onClick={() => onSelectSpot('pick')}
-            >
+            <Button variant="outline" className="w-full justify-start h-auto py-4 border-[#ff6600]/50 hover:bg-[#ff6600]/10 hover:border-[#ff6600]"
+              onClick={() => onSelectSpot('pick')}>
               <MapPin className="h-6 w-6 mr-3 text-[#ff6600]" />
               <div className="text-left flex-1">
                 <div className="font-bold text-white">Link to a Skate Spot</div>
-                <div className="text-xs text-muted-foreground">
-                  Best for local sales • Shows on spot page & map
-                </div>
+                <div className="text-xs text-muted-foreground">Best for local sales • Shows on spot page & map</div>
               </div>
-              <Badge className="bg-[#ff6600]/20 text-[#ff6600] border-[#ff6600]/50">
-                Recommended
-              </Badge>
+              <Badge className="bg-[#ff6600]/20 text-[#ff6600] border-[#ff6600]/50">Recommended</Badge>
             </Button>
-            
-            {/* Option 2: No spot */}
-            <Button 
-              variant="outline" 
-              className="w-full justify-start h-auto py-4 border-gray-600 hover:bg-gray-800"
-              onClick={() => onSelectSpot(null)}
-            >
+            <Button variant="outline" className="w-full justify-start h-auto py-4 border-gray-600 hover:bg-gray-800"
+              onClick={() => onSelectSpot(null)}>
               <Globe className="h-6 w-6 mr-3 text-gray-400" />
               <div className="text-left">
                 <div className="font-bold text-white">No Specific Spot</div>
-                <div className="text-xs text-muted-foreground">
-                  Visible on Marketplace page only
-                </div>
+                <div className="text-xs text-muted-foreground">Visible on Marketplace page only</div>
               </div>
             </Button>
           </div>
-
-          {/* Info box */}
           <div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/30 text-xs">
-            <p className="text-blue-300">
-              <strong>💡 Tip:</strong> Listings linked to spots are easier to find for local skaters 
-              and appear on the map. You'll set availability times on the next screen.
-            </p>
+            <p className="text-blue-300"><strong>💡 Tip:</strong> Listings linked to spots are easier to find for local skaters.</p>
           </div>
         </div>
       </DialogContent>
@@ -1228,94 +816,7 @@ function ListAtSpotDialog({
   );
 }
 
-// Wishlist Matching tips panel
-function WishlistMatchingPanel({ wishlistItems, stashItems }: { wishlistItems: StashItem[]; stashItems: StashItem[] }) {
-  // Find potential matches between wishlist and stash
-  const potentialMatches = useMemo(() => {
-    const matches: Array<{ wishlist: StashItem; match: StashItem; score: number }> = [];
-    
-    for (const wishlist of wishlistItems) {
-      for (const item of stashItems) {
-        if (item.category !== wishlist.category) continue;
-        if (!item.willingToSell && !item.willingToTrade) continue;
-        
-        // Calculate match score
-        let score = 50; // Base score for category match
-        
-        // Brand match
-        if (wishlist.brand && item.brand?.toLowerCase().includes(wishlist.brand.toLowerCase())) {
-          score += 20;
-        }
-        
-        // Size match (fuzzy)
-        if (wishlist.size && item.size) {
-          const wishlistSize = parseFloat(wishlist.size.replace(/[^0-9.]/g, ''));
-          const itemSize = parseFloat(item.size.replace(/[^0-9.]/g, ''));
-          if (!isNaN(wishlistSize) && !isNaN(itemSize) && Math.abs(wishlistSize - itemSize) < 0.5) {
-            score += 15;
-          }
-        }
-        
-        // Price compatibility
-        if (wishlist.maxPrice && item.minPrice && wishlist.maxPrice >= item.minPrice) {
-          score += 15;
-        }
-        
-        if (score >= 50) {
-          matches.push({ wishlist, match: item, score });
-        }
-      }
-    }
-    
-    return matches.sort((a, b) => b.score - a.score).slice(0, 3);
-  }, [wishlistItems, stashItems]);
-
-  if (wishlistItems.length === 0) return null;
-
-  return (
-    <Card className="bg-gradient-to-br from-cyan-500/10 to-blue-500/10 border-2 border-cyan-500/30">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-sm flex items-center gap-2 text-cyan-400">
-          <Heart className="h-4 w-4" />
-          Wishlist Matching
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <p className="text-xs text-muted-foreground">
-          {potentialMatches.length > 0 
-            ? `Found ${potentialMatches.length} potential matches in your stash!`
-            : "We'll notify you when friends' stashes match your wishlist"
-          }
-        </p>
-        
-        {potentialMatches.length > 0 && (
-          <div className="space-y-2">
-            {potentialMatches.map((m, i) => (
-              <div key={i} className="p-2 rounded bg-black/30 border border-white/10 text-xs">
-                <div className="flex items-center justify-between">
-                  <span className="text-cyan-400 truncate">{m.wishlist.title}</span>
-                  <Badge variant="outline" className="text-[10px] border-green-500/50 text-green-400">
-                    {m.score}% match
-                  </Badge>
-                </div>
-                <div className="text-muted-foreground mt-1">
-                  matches: <span className="text-white">{m.match.title}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-        
-        <div className="text-[10px] text-muted-foreground space-y-1">
-          <p>• Wishlist items are matched against friends' public stashes</p>
-          <p>• Get DM notifications when matches are found</p>
-          <p>• Set visibility to "Friends" for P2P matching</p>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
+// ─── Main Page ────────────────────────────────────────────────────────────────
 export default function StashPage() {
   useSeoMeta({
     title: 'My Stash - SkateSpots',
@@ -1329,16 +830,11 @@ export default function StashPage() {
   const [filterCategory, setFilterCategory] = useState<string>('all');
   const [filterLocation, setFilterLocation] = useState<string>('all');
   const [activeTab, setActiveTab] = useState<'stash' | 'wishlist'>('stash');
-  
-  // Edit dialog state
+  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list');
   const [editingItem, setEditingItem] = useState<StashItem | null>(null);
-  
-  // List at spot dialog state
   const [listingItem, setListingItem] = useState<StashItem | null>(null);
 
-  // Navigate to create listing page with pre-filled data from stash item
   const handleListOnMarketplace = (item: StashItem, spotChoice: string | null) => {
-    // Encode item data in URL params for pre-filling the form
     const params = new URLSearchParams();
     params.set('fromStash', 'true');
     params.set('stashId', item.id);
@@ -1349,25 +845,13 @@ export default function StashPage() {
     if (item.brand) params.set('brand', item.brand);
     if (item.description) params.set('description', item.description);
     if (item.minPrice) params.set('price', item.minPrice.toString());
-    if (item.images && item.images.length > 0) {
-      params.set('images', item.images.join(','));
-    }
-    // Determine listing type based on preferences
-    if (item.willingToTrade && !item.willingToSell) {
-      params.set('priceType', 'trade');
-    } else if (item.willingToSell) {
-      params.set('priceType', 'fixed');
-    }
-    
-    // If user chose to pick a spot, mark it so the form focuses on spot selection
-    if (spotChoice === 'pick') {
-      params.set('pickSpot', 'true');
-    }
-    
+    if (item.images && item.images.length > 0) params.set('images', item.images.join(','));
+    if (item.willingToTrade && !item.willingToSell) params.set('priceType', 'trade');
+    else if (item.willingToSell) params.set('priceType', 'fixed');
+    if (spotChoice === 'pick') params.set('pickSpot', 'true');
     navigate(`/create-listing?${params.toString()}`);
   };
-  
-  // Handle spot selection from dialog
+
   const handleSpotSelection = (spotChoice: string | null) => {
     if (listingItem) {
       handleListOnMarketplace(listingItem, spotChoice);
@@ -1375,69 +859,52 @@ export default function StashPage() {
     }
   };
 
-  // Separate stash items and wishlist items
   const stashItems = useMemo(() => items.filter(i => i.itemType !== 'wtb'), [items]);
   const wishlistItems = useMemo(() => items.filter(i => i.itemType === 'wtb'), [items]);
-  
   const displayItems = activeTab === 'stash' ? stashItems : wishlistItems;
 
   const filteredItems = displayItems.filter(item => {
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
-      if (!item.title.toLowerCase().includes(query) && 
+      if (!item.title.toLowerCase().includes(query) &&
           !item.brand?.toLowerCase().includes(query) &&
-          !item.description?.toLowerCase().includes(query)) {
-        return false;
-      }
-    }
-    if (filterCategory !== 'all' && item.category !== filterCategory) {
-      return false;
-    }
-    if (filterLocation !== 'all' && item.storageLocation !== filterLocation) {
-      return false;
+          !item.description?.toLowerCase().includes(query)) return false;
     }
+    if (filterCategory !== 'all' && item.category !== filterCategory) return false;
+    if (filterLocation !== 'all' && item.storageLocation !== filterLocation) return false;
     return true;
   });
 
-  // Not logged in
+  // ── Not logged in ──
   if (!user) {
     return (
       <Layout>
         <div className="container px-4 py-12 max-w-4xl">
           <div className="relative overflow-hidden rounded-2xl border-2 border-[#ff6600]/50 bg-black/50 backdrop-blur">
-            {/* Background effects */}
             <div className="absolute top-0 right-0 w-64 h-64 bg-[#ff6600] opacity-10 rounded-full blur-[80px]" />
             <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#ff0040] opacity-10 rounded-full blur-[60px]" />
-            
             <div className="relative py-16 px-6 text-center">
               <div className="inline-flex items-center justify-center w-24 h-24 rounded-2xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] mb-6 shadow-[0_0_40px_rgba(255,102,0,0.4)]">
                 <Backpack className="h-12 w-12 text-white" />
               </div>
               <h1 className="text-4xl md:text-5xl font-black uppercase mb-4" style={{
                 background: 'linear-gradient(135deg, #ff6600, #ff0040)',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
-                textShadow: '0 0 40px rgba(255,102,0,0.3)'
+                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
               }}>My Stash</h1>
               <p className="text-gray-300 mb-8 max-w-lg mx-auto text-lg">
                 Your private gear inventory. Track what you own, set prices, and selectively share with traders.
               </p>
-              
               <div className="grid grid-cols-3 gap-4 max-w-md mx-auto mb-8 text-center">
                 <div className="p-4 rounded-lg bg-black/40 border border-white/10">
-                  <Shield className="h-6 w-6 mx-auto mb-2 text-[#ff6600]" />
-                  <p className="text-xs text-gray-400">End-to-End Encrypted</p>
+                  <Shield className="h-6 w-6 mx-auto mb-2 text-[#ff6600]" /><p className="text-xs text-gray-400">End-to-End Encrypted</p>
                 </div>
                 <div className="p-4 rounded-lg bg-black/40 border border-white/10">
-                  <ArrowRightLeft className="h-6 w-6 mx-auto mb-2 text-cyan-400" />
-                  <p className="text-xs text-gray-400">P2P Trading</p>
+                  <RefreshCw className="h-6 w-6 mx-auto mb-2 text-[#ccff00]" /><p className="text-xs text-gray-400">Syncs Everywhere</p>
                 </div>
                 <div className="p-4 rounded-lg bg-black/40 border border-white/10">
-                  <Target className="h-6 w-6 mx-auto mb-2 text-purple-400" />
-                  <p className="text-xs text-gray-400">WTB Matching</p>
+                  <ArrowRightLeft className="h-6 w-6 mx-auto mb-2 text-cyan-400" /><p className="text-xs text-gray-400">P2P Trading</p>
                 </div>
               </div>
-              
               <LoginArea className="justify-center" />
             </div>
           </div>
@@ -1446,7 +913,7 @@ export default function StashPage() {
     );
   }
 
-  // No encryption available
+  // ── No encryption ──
   if (!isEncryptionAvailable) {
     return (
       <Layout>
@@ -1456,12 +923,9 @@ export default function StashPage() {
               <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
               <h2 className="text-2xl font-black uppercase text-white mb-3">Encryption Required</h2>
               <p className="text-gray-300 mb-6 max-w-md mx-auto">
-                Your Stash is encrypted for privacy. Please use a signer that supports NIP-44 encryption
-                (like Alby, nos2x, or Amber).
+                Your Stash is encrypted for privacy. Please use a signer that supports NIP-44 encryption (like Alby, nos2x, or Amber).
               </p>
-              <Button variant="outline" onClick={() => window.location.href = '/signers'}>
-                Learn About Signers
-              </Button>
+              <Button variant="outline" onClick={() => window.location.href = '/signers'}>Learn About Signers</Button>
             </CardContent>
           </Card>
         </div>
@@ -1469,167 +933,176 @@ export default function StashPage() {
     );
   }
 
+  const hasForSale = stashItems.filter(i => i.willingToSell || i.willingToTrade).length;
+
   return (
     <Layout>
-      {/* Add shimmer animation */}
       <style>{`
-        @keyframes shimmer {
-          0% { transform: translateX(-100%); }
-          100% { transform: translateX(100%); }
-        }
-        .animate-shimmer {
-          animation: shimmer 2s infinite;
-        }
+        @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
+        .animate-shimmer { animation: shimmer 2s infinite; }
       `}</style>
-      
-      <div className="container px-4 py-6 max-w-7xl">
-        {/* Header */}
-        <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
-          <div className="flex items-center gap-4">
-            <div className="relative">
-              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center shadow-[0_0_25px_rgba(255,102,0,0.4)]">
-                <Backpack className="h-7 w-7 text-white" />
+
+      {/* ── Sticky page header ── */}
+      <div className="sticky top-0 z-30 bg-black/95 backdrop-blur border-b border-white/8">
+        <div className="container px-4 py-3 max-w-7xl">
+          <div className="flex items-center justify-between gap-3">
+            {/* Title + counts */}
+            <div className="flex items-center gap-3 min-w-0">
+              <div className="relative flex-shrink-0">
+                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center shadow-[0_0_20px_rgba(255,102,0,0.3)]">
+                  <Backpack className="h-5 w-5 text-white" />
+                </div>
+                <div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-[#ccff00] border-2 border-black flex items-center justify-center">
+                  <span className="text-black text-[9px] font-black">{stats.total}</span>
+                </div>
               </div>
-              <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-[#ccff00] border-2 border-black flex items-center justify-center">
-                <span className="text-black text-[10px] font-black">{stats.total}</span>
+              <div className="min-w-0">
+                <h1 className="text-xl font-black uppercase text-white leading-none">My Stash</h1>
+                <p className="text-[11px] text-muted-foreground flex items-center gap-1.5 mt-0.5">
+                  <Shield className="h-3 w-3 text-green-400 flex-shrink-0" />
+                  <span className="truncate">Encrypted · Synced across devices</span>
+                </p>
               </div>
             </div>
-            <div>
-              <h1 className="text-3xl font-black uppercase text-white">My Stash</h1>
-              <p className="text-sm text-muted-foreground flex items-center gap-2">
-                <Shield className="h-3.5 w-3.5 text-green-400" />
-                <span>Encrypted & Private</span>
-                <span className="text-white/20">|</span>
-                <span className="text-[#ccff00]">{stats.total} items</span>
-              </p>
+
+            {/* Actions */}
+            <div className="flex items-center gap-2 flex-shrink-0">
+              {/* View toggle — desktop only */}
+              <div className="hidden sm:flex items-center rounded-lg border border-white/10 overflow-hidden">
+                <button onClick={() => setViewMode('list')}
+                  className={cn('px-2.5 py-1.5 transition-colors', viewMode === 'list' ? 'bg-white/10 text-white' : 'text-gray-500 hover:text-gray-300')}>
+                  <List className="h-4 w-4" />
+                </button>
+                <button onClick={() => setViewMode('grid')}
+                  className={cn('px-2.5 py-1.5 transition-colors', viewMode === 'grid' ? 'bg-white/10 text-white' : 'text-gray-500 hover:text-gray-300')}>
+                  <LayoutGrid className="h-4 w-4" />
+                </button>
+              </div>
+              <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="wtb" />
+              <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="stash" />
             </div>
           </div>
+        </div>
+      </div>
 
-          <div className="flex items-center gap-2">
-            <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="wtb" />
-            <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="stash" />
+      <div className="container px-4 py-4 max-w-7xl">
+        {/* ── Cross-device sync banner (shown first time) ── */}
+        <div className="mb-4 p-3 rounded-xl bg-gradient-to-r from-[#ccff00]/10 to-green-500/10 border border-[#ccff00]/20 flex items-center gap-3">
+          <div className="flex-shrink-0 flex items-center gap-1">
+            <Smartphone className="h-4 w-4 text-[#ccff00]" />
+            <RefreshCw className="h-3 w-3 text-[#ccff00]/60" />
+            <Monitor className="h-4 w-4 text-[#ccff00]" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-[#ccff00]/90 font-bold leading-tight">Synced across all devices</p>
+            <p className="text-[11px] text-muted-foreground leading-tight">Add items on desktop, see them instantly on your phone — and vice versa. Your Nostr key = your account everywhere.</p>
           </div>
         </div>
 
-        <div className="grid lg:grid-cols-4 gap-6">
-          {/* Main content */}
+        <div className="grid lg:grid-cols-4 gap-4">
+          {/* ── Main content ── */}
           <div className="lg:col-span-3 space-y-4">
-            {/* Tabs for Stash vs Wishlist */}
-            <div className="flex items-center gap-2 p-1 rounded-lg bg-black/40 border border-white/10 w-fit">
-              <button
-                onClick={() => setActiveTab('stash')}
-                className={cn(
-                  "flex items-center gap-2 px-4 py-2 rounded-md font-bold text-sm transition-all",
-                  activeTab === 'stash' 
-                    ? "bg-gradient-to-r from-[#ff6600] to-[#ff0040] text-white shadow-lg" 
-                    : "text-gray-400 hover:text-white"
-                )}
-              >
+
+            {/* Profile stats bar */}
+            <ProfileStatsBar stats={stats} pubkey={user.pubkey} />
+
+            {/* Tab switcher */}
+            <div className="flex items-center gap-2 p-1 rounded-xl bg-black/40 border border-white/10 w-fit">
+              <button onClick={() => setActiveTab('stash')}
+                className={cn('flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-sm transition-all',
+                  activeTab === 'stash' ? 'bg-gradient-to-r from-[#ff6600] to-[#ff0040] text-white shadow-lg' : 'text-gray-400 hover:text-white')}>
                 <Package className="h-4 w-4" />
-                Stash ({stashItems.length})
+                Stash <span className="opacity-60">({stashItems.length})</span>
               </button>
-              <button
-                onClick={() => setActiveTab('wishlist')}
-                className={cn(
-                  "flex items-center gap-2 px-4 py-2 rounded-md font-bold text-sm transition-all",
-                  activeTab === 'wishlist' 
-                    ? "bg-cyan-500 text-black shadow-lg" 
-                    : "text-gray-400 hover:text-white"
-                )}
-              >
+              <button onClick={() => setActiveTab('wishlist')}
+                className={cn('flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-sm transition-all',
+                  activeTab === 'wishlist' ? 'bg-cyan-500 text-black shadow-lg' : 'text-gray-400 hover:text-white')}>
                 <Heart className="h-4 w-4" />
-                Wishlist ({wishlistItems.length})
+                Wishlist <span className="opacity-60">({wishlistItems.length})</span>
               </button>
             </div>
 
-            {/* Search and filters */}
-            <div className="flex flex-col sm:flex-row gap-3">
+            {/* Search bar */}
+            <div className="flex flex-col sm:flex-row gap-2">
               <div className="relative flex-1">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder={activeTab === 'stash' ? "Search your stash..." : "Search your wishlist..."}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9 bg-black/40 border-white/20"
-                />
+                <Input placeholder={activeTab === 'stash' ? "Search your stash..." : "Search wishlist..."}
+                  value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 bg-black/40 border-white/20" />
               </div>
               <Select value={filterCategory} onValueChange={setFilterCategory}>
-                <SelectTrigger className="w-full sm:w-[180px] bg-black/40 border-white/20">
-                  <Filter className="h-4 w-4 mr-2" />
-                  <SelectValue placeholder="All Categories" />
+                <SelectTrigger className="w-full sm:w-[160px] bg-black/40 border-white/20">
+                  <Filter className="h-4 w-4 mr-2" /><SelectValue placeholder="All" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">All Categories</SelectItem>
                   {Object.entries(STASH_CATEGORIES).map(([key, cat]) => (
-                    <SelectItem key={key} value={key}>
-                      {cat.emoji} {cat.label}
-                    </SelectItem>
+                    <SelectItem key={key} value={key}>{cat.emoji} {cat.label}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
 
-            {/* Location filter chips — only show for stash tab */}
-            {activeTab === 'stash' && (
-              <div className="flex flex-wrap gap-2 items-center">
-                <span className="text-xs text-gray-500 font-bold uppercase tracking-wide flex items-center gap-1">
-                  <MapPin className="h-3 w-3" /> Location:
-                </span>
+            {/* Category quick-chips */}
+            <div className="flex flex-wrap gap-1.5">
+              {Object.entries(STASH_CATEGORIES).map(([key, cat]) => {
+                const count = displayItems.filter(i => i.category === key).length;
+                if (count === 0) return null;
+                return (
+                  <button key={key} onClick={() => setFilterCategory(filterCategory === key ? 'all' : key)}
+                    className={cn('flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold transition-all border',
+                      filterCategory === key ? 'bg-white text-black border-white' : 'bg-black/40 border-white/10 text-gray-400 hover:border-white/30 hover:text-white')}>
+                    <span>{cat.emoji}</span>
+                    <span>{count}</span>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Location filter — stash only */}
+            {activeTab === 'stash' && stashItems.some(i => i.storageLocation) && (
+              <div className="flex flex-wrap gap-1.5 items-center">
+                <span className="text-[10px] text-gray-500 font-bold uppercase tracking-wide">📍</span>
                 {([
                   { value: 'all', label: 'All' },
-                  { value: 'home', label: '🏠 Home' },
-                  { value: 'car', label: '🚗 Car' },
-                  { value: 'backpack', label: '🎒 Backpack' },
-                  { value: 'wardrobe', label: '🚪 Wardrobe' },
-                  { value: 'van', label: '🚐 Van' },
-                  { value: 'skatepark', label: '🛹 Skatepark' },
-                  { value: 'friends', label: "👫 Friend's" },
-                  { value: 'parents', label: "👨‍👩‍👦 Parents'" },
-                  { value: 'warehouse', label: '🏭 Warehouse' },
-                  { value: 'storage_unit', label: '🔒 Storage Unit' },
-                  { value: 'sponsor', label: '🤝 Sponsor' },
-                  { value: 'other', label: '📦 Other' },
-                ] as const).map(({ value, label }) => (
-                  <button
-                    key={value}
-                    onClick={() => setFilterLocation(value)}
-                    className={cn(
-                      'px-2.5 py-1 rounded-full text-xs font-bold transition-all border',
-                      filterLocation === value
-                        ? 'bg-[#ff6600] border-[#ff6600] text-black'
-                        : 'bg-black/40 border-white/10 text-gray-400 hover:border-[#ff6600]/50 hover:text-white'
-                    )}
-                  >
-                    {label}
-                  </button>
-                ))}
+                  { value: 'home', label: '🏠' }, { value: 'car', label: '🚗' },
+                  { value: 'backpack', label: '🎒' }, { value: 'skatepark', label: '🛹' },
+                  { value: 'van', label: '🚐' }, { value: 'friends', label: '👫' },
+                ] as const).map(({ value, label }) => {
+                  const count = value === 'all' ? stashItems.length : stashItems.filter(i => i.storageLocation === value).length;
+                  if (value !== 'all' && count === 0) return null;
+                  return (
+                    <button key={value} onClick={() => setFilterLocation(value)}
+                      className={cn('px-2 py-1 rounded-full text-xs font-bold transition-all border',
+                        filterLocation === value ? 'bg-[#ff6600] border-[#ff6600] text-black' : 'bg-black/40 border-white/10 text-gray-400 hover:border-[#ff6600]/50')}>
+                      {label}
+                    </button>
+                  );
+                })}
               </div>
             )}
 
-            {/* Items grid */}
+            {/* Items */}
             {isLoading ? (
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <Card key={i} className="overflow-hidden bg-black/40 border-white/10">
-                    <Skeleton className="h-36 w-full bg-white/5" />
-                    <div className="p-3 space-y-2">
+              <div className="space-y-2">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <div key={i} className="flex items-center gap-3 p-3 rounded-xl border border-white/10 bg-black/40">
+                    <Skeleton className="w-14 h-14 rounded-lg bg-white/5 flex-shrink-0" />
+                    <div className="flex-1 space-y-2">
                       <Skeleton className="h-4 w-3/4 bg-white/5" />
                       <Skeleton className="h-3 w-1/2 bg-white/5" />
-                      <Skeleton className="h-3 w-full bg-white/5" />
                     </div>
-                  </Card>
+                  </div>
                 ))}
               </div>
             ) : filteredItems.length === 0 ? (
               <Card className="bg-black/60 border-dashed border-2 border-gray-700">
-                <CardContent className="py-16 text-center">
+                <CardContent className="py-14 text-center">
                   {activeTab === 'wishlist' ? (
                     <>
                       <Heart className="h-12 w-12 mx-auto mb-4 text-cyan-500/50" />
-                      <h3 className="text-xl font-bold text-white mb-2">Your Wishlist is Empty</h3>
-                      <p className="text-muted-foreground mb-6 max-w-sm mx-auto">
-                        Add items you're looking for to get notified when friends have matching gear.
-                      </p>
+                      <h3 className="text-xl font-bold text-white mb-2">Wishlist is Empty</h3>
+                      <p className="text-muted-foreground mb-6 max-w-sm mx-auto">Add items you're hunting for to get notified when friends have matching gear.</p>
                       <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="wtb" />
                     </>
                   ) : (
@@ -1640,120 +1113,158 @@ export default function StashPage() {
                       </h3>
                       <p className="text-muted-foreground mb-6 max-w-sm mx-auto">
                         {stashItems.length === 0
-                          ? 'Add your gear to track what you own and what you might want to sell or trade.'
+                          ? 'Add your gear to track what you own. Add on any device — it syncs everywhere via Nostr.'
                           : 'Try adjusting your search or filters.'}
                       </p>
-                      {stashItems.length === 0 && (
-                        <AddItemDialog onAdd={(item) => addItem.mutate(item)} />
-                      )}
+                      {stashItems.length === 0 && <AddItemDialog onAdd={(item) => addItem.mutate(item)} />}
                     </>
                   )}
                 </CardContent>
               </Card>
-            ) : (
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            ) : viewMode === 'list' ? (
+              /* List view — default on mobile, toggleable on desktop */
+              <div className="space-y-2">
                 {filteredItems.map((item) => (
-                  <StashItemCard
-                    key={item.id}
-                    item={item}
-                    isWTB={item.itemType === 'wtb'}
+                  <StashListRow key={item.id} item={item} isWTB={item.itemType === 'wtb'}
                     onEdit={() => setEditingItem(item)}
                     onDelete={() => removeItem.mutate(item.id)}
-                    onListOnMarketplace={() => setListingItem(item)}
-                  />
+                    onListOnMarketplace={() => setListingItem(item)} />
+                ))}
+              </div>
+            ) : (
+              /* Grid view */
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                {filteredItems.map((item) => (
+                  <StashItemCard key={item.id} item={item} isWTB={item.itemType === 'wtb'}
+                    onEdit={() => setEditingItem(item)}
+                    onDelete={() => removeItem.mutate(item.id)}
+                    onListOnMarketplace={() => setListingItem(item)} />
                 ))}
               </div>
             )}
           </div>
 
-          {/* Sidebar */}
+          {/* ── Sidebar ── */}
           <div className="space-y-4">
-            {/* Profile Stats Panel */}
-            <CharacterPanel stats={stats} pubkey={user.pubkey} />
+            {/* For-sale quick action */}
+            {hasForSale > 0 && (
+              <Card className="bg-gradient-to-br from-[#ff6600]/15 to-[#ff0040]/10 border-[#ff6600]/40">
+                <CardContent className="p-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Store className="h-4 w-4 text-[#ff6600]" />
+                    <span className="font-black text-sm text-[#ff6600] uppercase tracking-wide">Ready to Sell</span>
+                  </div>
+                  <p className="text-xs text-muted-foreground mb-3">
+                    You have <strong className="text-white">{hasForSale} items</strong> marked for sale or trade. List them on the marketplace in one tap.
+                  </p>
+                  <Link to="/marketplace">
+                    <Button size="sm" className="w-full bg-[#ff6600] hover:bg-[#ff6600]/90 text-black font-bold gap-2">
+                      <ShoppingCart className="h-3.5 w-3.5" />Browse Marketplace
+                      <ChevronRight className="h-3.5 w-3.5 ml-auto" />
+                    </Button>
+                  </Link>
+                </CardContent>
+              </Card>
+            )}
 
-            {/* Wishlist Matching Panel */}
-            <WishlistMatchingPanel wishlistItems={wishlistItems} stashItems={stashItems} />
-
-            {/* Marketplace connection card */}
-            <Card className="bg-gradient-to-br from-[#ff6600]/10 to-[#ff0040]/10 border-[#ff6600]/30">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm flex items-center gap-2 text-[#ff6600]">
-                  <Store className="h-4 w-4" />
-                  Stash → Marketplace
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
+            {/* Marketplace card (always) */}
+            <Card className="bg-gradient-to-br from-black/80 to-black/60 border-white/10">
+              <CardContent className="p-4 space-y-3">
+                <div className="flex items-center gap-2">
+                  <Store className="h-4 w-4 text-[#ff6600]" />
+                  <span className="font-black text-sm text-white">Stash → Marketplace</span>
+                </div>
                 <p className="text-xs text-muted-foreground">
-                  Items marked for sale or trade can be listed on the public marketplace with one click.
+                  Items marked for sale or trade can be listed publicly with one tap.
                 </p>
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 text-xs">
-                    <Badge variant="outline" className="border-green-500/50 text-green-400 gap-1">
-                      <Zap className="h-2.5 w-2.5" />
-                      Sell
-                    </Badge>
+                <div className="space-y-1.5 text-xs">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="border-green-500/50 text-green-400 gap-1 h-5"><Zap className="h-2.5 w-2.5" />Sell</Badge>
                     <span className="text-muted-foreground">→ Fixed price listing</span>
                   </div>
-                  <div className="flex items-center gap-2 text-xs">
-                    <Badge variant="outline" className="border-cyan-500/50 text-cyan-400 gap-1">
-                      <ArrowRightLeft className="h-2.5 w-2.5" />
-                      Trade
-                    </Badge>
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="border-cyan-500/50 text-cyan-400 gap-1 h-5"><ArrowRightLeft className="h-2.5 w-2.5" />Trade</Badge>
                     <span className="text-muted-foreground">→ Trade listing</span>
                   </div>
                 </div>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10"
-                  onClick={() => navigate('/map?view=gear')}
-                >
-                  <ExternalLink className="h-3.5 w-3.5 mr-2" />
-                  Browse Marketplace
-                </Button>
+                <Link to="/marketplace">
+                  <Button variant="outline" size="sm" className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10 gap-2">
+                    <ExternalLink className="h-3.5 w-3.5" />Browse Marketplace
+                  </Button>
+                </Link>
               </CardContent>
             </Card>
 
-            {/* Tips card */}
-            <Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 border-purple-500/30">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm flex items-center gap-2 text-purple-400">
-                  <Gem className="h-4 w-4" />
-                  Pro Tips
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-2 text-xs text-muted-foreground">
-                <p>• Hover on items to see "List on Marketplace"</p>
-                <p>• Wishlist items auto-match with friends' stashes</p>
-                <p>• Share specific items via encrypted DMs</p>
-                <p>• Add photos to help others see what you have</p>
+            {/* Wishlist match teaser */}
+            {wishlistItems.length > 0 && (
+              <Card className="bg-gradient-to-br from-cyan-500/10 to-blue-500/10 border-cyan-500/30">
+                <CardContent className="p-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Heart className="h-4 w-4 text-cyan-400" />
+                    <span className="font-black text-sm text-cyan-400">Wishlist</span>
+                    <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/40 text-[10px]">{wishlistItems.length}</Badge>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    We'll match your wishlist with friends' stashes and alert you when something fits.
+                  </p>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Pro tips — compact */}
+            <Card className="bg-black/40 border-white/8">
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <Gem className="h-4 w-4 text-purple-400" />
+                  <span className="font-bold text-sm text-purple-300">Tips</span>
+                </div>
+                <ul className="space-y-1.5 text-xs text-muted-foreground">
+                  <li className="flex items-start gap-1.5"><span className="text-[#ccff00] mt-0.5">→</span>Tap the ✏️ icon to edit any item</li>
+                  <li className="flex items-start gap-1.5"><span className="text-[#ccff00] mt-0.5">→</span>Tap 🏪 to list an item on the marketplace</li>
+                  <li className="flex items-start gap-1.5"><span className="text-[#ccff00] mt-0.5">→</span>Add photos to attract better trade offers</li>
+                  <li className="flex items-start gap-1.5"><span className="text-[#ccff00] mt-0.5">→</span>Items added on desktop sync to your phone automatically</li>
+                </ul>
               </CardContent>
             </Card>
           </div>
         </div>
       </div>
-      
-      {/* Edit Item Dialog */}
+
+      {/* ── Floating Add FAB (mobile only) ── */}
+      <div className="fixed md:hidden z-40 flex flex-col items-end gap-2"
+        style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 0.75rem)', right: '0.75rem' }}>
+        <AddItemDialog
+          onAdd={(item) => addItem.mutate(item)}
+          mode="wtb"
+          trigger={
+            <button className="h-11 w-11 rounded-full bg-cyan-500 shadow-xl shadow-cyan-500/30 border-2 border-white/20 flex items-center justify-center active:scale-90 transition-transform touch-manipulation">
+              <Heart className="h-5 w-5 text-black" strokeWidth={2.5} />
+            </button>
+          }
+        />
+        <AddItemDialog
+          onAdd={(item) => addItem.mutate(item)}
+          mode="stash"
+          trigger={
+            <button className="h-14 w-14 rounded-full bg-gradient-to-br from-[#ff6600] to-[#ff0040] shadow-xl shadow-[#ff0040]/30 border-2 border-white/20 flex items-center justify-center active:scale-90 transition-transform touch-manipulation">
+              <Plus className="h-7 w-7 text-white" strokeWidth={3} />
+            </button>
+          }
+        />
+      </div>
+
+      {/* ── Edit dialog ── */}
       {editingItem && (
-        <EditItemDialog
-          item={editingItem}
-          open={!!editingItem}
+        <EditItemDialog item={editingItem} open={!!editingItem}
           onOpenChange={(open) => !open && setEditingItem(null)}
-          onSave={(updatedItem) => {
-            updateItem.mutate(updatedItem);
-            setEditingItem(null);
-          }}
-        />
+          onSave={(updatedItem) => { updateItem.mutate(updatedItem); setEditingItem(null); }} />
       )}
-      
-      {/* List at Spot Dialog */}
+
+      {/* ── List at Spot dialog ── */}
       {listingItem && (
-        <ListAtSpotDialog
-          item={listingItem}
-          open={!!listingItem}
+        <ListAtSpotDialog item={listingItem} open={!!listingItem}
           onOpenChange={(open) => !open && setListingItem(null)}
-          onSelectSpot={handleSpotSelection}
-        />
+          onSelectSpot={handleSpotSelection} />
       )}
     </Layout>
   );