diff --git a/src/components/SasquatchGuide.tsx b/src/components/SasquatchGuide.tsx
index 7725b41..45ba9f8 100644
--- a/src/components/SasquatchGuide.tsx
+++ b/src/components/SasquatchGuide.tsx
@@ -621,7 +621,7 @@ Instructions:
           ref={dragRef}
           className={cn(
             'z-50 touch-none select-none',
-            dragPos ? '' : 'fixed bottom-[9.5rem] right-4 md:bottom-6 md:right-auto md:left-4',
+            dragPos ? '' : 'fixed bottom-[9.5rem] left-4 md:bottom-6 md:left-4',
           )}
           style={bubbleStyle}
           onPointerDown={onPointerDown}
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 358ebf7..f9c6b43 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -18,6 +18,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Progress } from '@/components/ui/progress';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { LoginArea } from '@/components/auth/LoginArea';
 
 import { useSkateSpots } from '@/hooks/useSkateSpots';
@@ -70,6 +71,7 @@ import {
   LocateOff,
   Store,
   Info,
+  Layers,
 } from 'lucide-react';
 import { CameraCapture } from '@/components/CameraCapture';
 import { useUploadFile } from '@/hooks/useUploadFile';
@@ -585,6 +587,11 @@ export default function MapPage() {
     return () => window.removeEventListener('sasquatch:panelchange', handler);
   }, []);
   
+  // Mobile "Add" speed-dial (fans out Add Spot / Shop / Tour / Quick Snap)
+  const [addDialOpen, setAddDialOpen] = useState(false);
+  // Mobile layers popover
+  const [layersOpen, setLayersOpen] = useState(false);
+
   // Quick camera capture
   const [showQuickCamera, setShowQuickCamera] = useState(false);
   const { mutateAsync: uploadFile, isPending: isUploadingQuickPhoto } = useUploadFile();
@@ -890,6 +897,8 @@ export default function MapPage() {
 
   // Count active layer filters for mobile badge
   const activeLayerCount = [showSpots, showShops, showGear, showTours, showBtcMap].filter(Boolean).length;
+  // Count of the 4 primary layers active — shown as a badge on the mobile Layers button
+  const mobileLayerCount = [showSpots, showShops, showGear, showTours].filter(Boolean).length;
   const activeCategoryCount = selectedCategories.length;
   const totalActiveFilters = activeCategoryCount + (trustFilter !== 'all' ? 1 : 0) + (sortBy !== 'recent' ? 1 : 0);
 
@@ -1486,20 +1495,23 @@ export default function MapPage() {
                 </div>
               )}
 
-              {/* Right-side control strip — layer toggles + Near Me + Snap (mobile only) */}
+              {/* ── Mobile map controls (redesigned) ──────────────────────────
+                  Right edge holds just TWO small controls: Near Me + Layers.
+                  Primary "Add" action is a speed-dial FAB (bottom-right). This
+                  replaces the old 12-item vertical strip. */}
               <div
                 className={cn(
-                  "fixed right-3 z-[1000] md:hidden flex flex-col items-center gap-1.5 transition-all duration-200",
-                  mobileFiltersOpen || selectedSpot ? "opacity-0 pointer-events-none translate-x-2" : "opacity-100 translate-x-0"
+                  "fixed right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-all duration-200",
+                  mobileFiltersOpen || selectedSpot || addDialOpen ? "opacity-0 pointer-events-none translate-x-2" : "opacity-100 translate-x-0"
                 )}
-                style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 0.75rem)' }}
+                style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 6.5rem)' }}
               >
                 {/* Near Me */}
                 <button
                   onClick={nearMeError === 'denied' ? () => setShowLocationHelp(true) : handleNearMe}
                   disabled={nearMeLoading}
                   className={cn(
-                    'h-9 w-9 rounded-full flex items-center justify-center shadow-lg border transition-all touch-manipulation active:scale-90',
+                    'h-11 w-11 rounded-full flex items-center justify-center shadow-lg border backdrop-blur transition-all touch-manipulation active:scale-90',
                     nearMeError === 'denied'
                       ? 'bg-red-900/80 border-red-500/30'
                       : 'bg-black/70 border-white/15 hover:border-white/30'
@@ -1507,73 +1519,146 @@ export default function MapPage() {
                   aria-label="Find spots near me"
                 >
                   {nearMeLoading ? (
-                    <span className="h-3.5 w-3.5 rounded-full border-2 border-white/20 border-t-white animate-spin" />
+                    <span className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white animate-spin" />
                   ) : nearMeError === 'denied' ? (
-                    <LocateOff className="h-3.5 w-3.5 text-red-400" />
+                    <LocateOff className="h-4 w-4 text-red-400" />
                   ) : (
-                    <LocateFixed className="h-3.5 w-3.5 text-[#ccff00]" />
+                    <LocateFixed className="h-4 w-4 text-[#ccff00]" />
                   )}
                 </button>
 
-                {/* Divider */}
-                <div className="w-4 h-px bg-white/10" />
-
-                {/* Layer toggles — slim pill style */}
-                {[
-                  { key: 'spots', emoji: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v) },
-                  { key: 'shops', emoji: '🏪', active: showShops, toggle: () => setShowShops(v => !v) },
-                  { key: 'gear',  emoji: '🛒', active: showGear,  toggle: () => setShowGear(v => !v) },
-                  { key: 'tours', emoji: '🗺️', active: showTours, toggle: () => setShowTours(v => !v) },
-                ].map(({ key, emoji, active, toggle }) => (
-                  <button
-                    key={key}
-                    onClick={toggle}
-                    className={cn(
-                      'h-9 w-9 rounded-full text-sm flex items-center justify-center border transition-all touch-manipulation active:scale-90',
-                      active
-                        ? 'bg-black/80 border-white/25 shadow-md'
-                        : 'bg-black/40 border-white/6 opacity-35'
-                    )}
-                    aria-label={`Toggle ${key}`}
-                  >
-                    {emoji}
-                  </button>
-                ))}
-
-                {/* Divider + Add actions + Quick Snap */}
-                {user && (
-                  <>
-                    <div className="w-4 h-px bg-white/10" />
-                    {/* Add Spot */}
-                    <Link to="/create-spot" aria-label="Add a skate spot">
-                      <button
-                        className="h-9 w-9 rounded-full bg-[#ff0040]/90 border border-[#ff0040]/50 flex items-center justify-center shadow-lg shadow-[#ff0040]/20 touch-manipulation active:scale-90 transition-all"
-                        aria-label="Add spot"
-                      >
-                        <Plus className="h-4 w-4 text-white" strokeWidth={2.5} />
-                      </button>
-                    </Link>
-                    {/* Add Shop */}
-                    <Link to="/create-shop" aria-label="Add a skate shop">
-                      <button
-                        className="h-9 w-9 rounded-full bg-[#00cc66]/90 border border-[#00cc66]/50 flex items-center justify-center shadow-lg shadow-[#00cc66]/20 touch-manipulation active:scale-90 transition-all"
-                        aria-label="Add shop"
-                      >
-                        <Plus className="h-4 w-4 text-black" strokeWidth={2.5} />
-                      </button>
-                    </Link>
-                    <div className="w-4 h-px bg-white/10" />
-                    {/* Quick Snap */}
+                {/* Layers popover — labelled toggles with color dots */}
+                <Popover open={layersOpen} onOpenChange={setLayersOpen}>
+                  <PopoverTrigger asChild>
                     <button
-                      onClick={() => setShowQuickCamera(true)}
-                      className="h-9 w-9 rounded-full bg-black/70 border border-white/15 flex items-center justify-center shadow-lg touch-manipulation active:scale-90 hover:border-[#ff0040]/50 hover:bg-[#ff0040]/10 transition-all"
-                      aria-label="Quick snap"
+                      className={cn(
+                        'relative h-11 w-11 rounded-full flex items-center justify-center shadow-lg border backdrop-blur transition-all touch-manipulation active:scale-90',
+                        layersOpen
+                          ? 'bg-[#ff0040]/20 border-[#ff0040]/60'
+                          : 'bg-black/70 border-white/15 hover:border-white/30'
+                      )}
+                      aria-label="Map layers"
                     >
-                      <Camera className="h-3.5 w-3.5 text-gray-300" />
+                      <Layers className={cn('h-4 w-4', layersOpen ? 'text-[#ff0040]' : 'text-gray-200')} />
+                      {mobileLayerCount < 4 && (
+                        <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[9px] font-black bg-[#ccff00] text-black rounded-full flex items-center justify-center leading-none border-2 border-black">
+                          {mobileLayerCount}
+                        </span>
+                      )}
                     </button>
-                  </>
-                )}
+                  </PopoverTrigger>
+                  <PopoverContent
+                    side="left"
+                    align="end"
+                    className="w-52 p-2 bg-black/95 border-white/15 backdrop-blur-xl"
+                  >
+                    <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">Show on Map</p>
+                    <div className="space-y-0.5">
+                      {[
+                        { key: 'spots', label: 'Spots', dot: '#ff0040', active: showSpots, toggle: () => setShowSpots(v => !v) },
+                        { key: 'shops', label: 'Shops', dot: '#a855f7', active: showShops, toggle: () => setShowShops(v => !v) },
+                        { key: 'gear',  label: 'Gear',  dot: '#f97316', active: showGear,  toggle: () => setShowGear(v => !v) },
+                        { key: 'tours', label: 'Tours', dot: '#06b6d4', active: showTours, toggle: () => setShowTours(v => !v) },
+                      ].map(({ key, label, dot, active, toggle }) => (
+                        <button
+                          key={key}
+                          onClick={toggle}
+                          className={cn(
+                            'w-full flex items-center gap-2.5 px-1.5 py-2 rounded-lg text-sm font-semibold transition-colors touch-manipulation',
+                            active ? 'text-white hover:bg-white/5' : 'text-gray-500 hover:bg-white/5'
+                          )}
+                        >
+                          <span
+                            className={cn('w-2.5 h-2.5 rounded-full flex-shrink-0 transition-opacity', active ? 'opacity-100' : 'opacity-30')}
+                            style={{ backgroundColor: dot }}
+                          />
+                          <span className="flex-1 text-left">{label}</span>
+                          <span
+                            className={cn(
+                              'w-4 h-4 rounded flex items-center justify-center flex-shrink-0 border transition-colors',
+                              active ? 'bg-[#ccff00] border-[#ccff00]' : 'border-white/20'
+                            )}
+                          >
+                            {active && <Check className="h-3 w-3 text-black" strokeWidth={3} />}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </PopoverContent>
+                </Popover>
               </div>
+
+              {/* ── Add speed-dial FAB (mobile, logged in) ──────────────────── */}
+              {user && (
+                <div
+                  className={cn(
+                    'fixed right-4 z-[1001] md:hidden flex flex-col items-end gap-2.5 transition-all duration-200',
+                    mobileFiltersOpen || selectedSpot ? 'opacity-0 pointer-events-none' : 'opacity-100'
+                  )}
+                  style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1rem)' }}
+                >
+                  {/* Fan-out actions */}
+                  {addDialOpen && (
+                    <>
+                      {[
+                        { label: 'Add Spot',  to: '/create-spot',  bg: 'bg-[#ff0040]', icon: <MapPin className="h-4 w-4 text-white" /> },
+                        { label: 'Add Shop',  to: '/create-shop',  bg: 'bg-[#a855f7]', icon: <Store className="h-4 w-4 text-white" /> },
+                        { label: 'Offer Tour', to: '/create-tour', bg: 'bg-[#06b6d4]', icon: <Route className="h-4 w-4 text-white" /> },
+                      ].map((a, i) => (
+                        <Link
+                          key={a.to}
+                          to={a.to}
+                          onClick={() => setAddDialOpen(false)}
+                          className="flex items-center gap-2.5 animate-in fade-in slide-in-from-bottom-2 duration-200"
+                          style={{ animationDelay: `${i * 40}ms` }}
+                        >
+                          <span className="px-2.5 py-1 rounded-lg bg-black/85 backdrop-blur text-white text-xs font-bold shadow-lg border border-white/10">
+                            {a.label}
+                          </span>
+                          <span className={cn('h-11 w-11 rounded-full flex items-center justify-center shadow-lg', a.bg)}>
+                            {a.icon}
+                          </span>
+                        </Link>
+                      ))}
+                      {/* Quick Snap */}
+                      <button
+                        onClick={() => { setAddDialOpen(false); setShowQuickCamera(true); }}
+                        className="flex items-center gap-2.5 animate-in fade-in slide-in-from-bottom-2 duration-200"
+                        style={{ animationDelay: '120ms' }}
+                      >
+                        <span className="px-2.5 py-1 rounded-lg bg-black/85 backdrop-blur text-white text-xs font-bold shadow-lg border border-white/10">
+                          Quick Snap
+                        </span>
+                        <span className="h-11 w-11 rounded-full flex items-center justify-center shadow-lg bg-black/80 border border-white/20">
+                          <Camera className="h-4 w-4 text-[#ccff00]" />
+                        </span>
+                      </button>
+                    </>
+                  )}
+
+                  {/* Main FAB */}
+                  <button
+                    onClick={() => setAddDialOpen(v => !v)}
+                    className={cn(
+                      'h-14 w-14 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 touch-manipulation active:scale-90',
+                      addDialOpen
+                        ? 'bg-white rotate-45'
+                        : 'bg-[#ff0040] shadow-[#ff0040]/40 hover:bg-[#ff0040]/90'
+                    )}
+                    aria-label={addDialOpen ? 'Close add menu' : 'Add spot, shop, tour, or snap'}
+                  >
+                    <Plus className={cn('h-7 w-7 transition-colors', addDialOpen ? 'text-black' : 'text-white')} strokeWidth={2.5} />
+                  </button>
+                </div>
+              )}
+
+              {/* Tap-catcher to close the speed-dial */}
+              {addDialOpen && (
+                <div
+                  className="fixed inset-0 z-[1000] md:hidden"
+                  onClick={() => setAddDialOpen(false)}
+                />
+              )}
             </>
           ) : (
             <div className="h-full overflow-auto">