diff --git a/client/src/pages/TeslaTripPlanner.tsx b/client/src/pages/TeslaTripPlanner.tsx
index e920b90..64cb7ad 100644
--- a/client/src/pages/TeslaTripPlanner.tsx
+++ b/client/src/pages/TeslaTripPlanner.tsx
@@ -520,19 +520,24 @@ const VARIANT_ICON: Record<RouteVariant['id'], React.ComponentType<{ className?:
 };
 
 function VariantStrip({
-  variants, selected, onSelect, switching,
+  variants, selected, onSelect, switching, cachedIds, showCompare, onToggleCompare,
 }: {
   variants: RouteVariant[];
   selected: string;
   onSelect: (id: RouteVariant['id']) => void;
   switching: boolean;
+  cachedIds: string[];
+  showCompare: boolean;
+  onToggleCompare: () => void;
 }) {
   if (variants.length === 0) return null;
+  const compareEligible = cachedIds.length >= 2;
   return (
     <div
-      className="px-6 py-3.5 grid grid-cols-3 gap-3 flex-shrink-0"
+      className="px-6 py-3.5 flex items-center gap-3 flex-shrink-0"
       style={{ borderBottom: '1px solid var(--gd-border)', background: 'var(--gd-bg)' }}
     >
+      <div className="grid grid-cols-3 gap-3 flex-1">
       {variants.map(v => {
         const isSel = v.id === selected;
         const tone = VARIANT_TONE[v.tone];
@@ -585,6 +590,23 @@ function VariantStrip({
           </button>
         );
       })}
+      </div>
+      <button
+        onClick={onToggleCompare}
+        disabled={!compareEligible}
+        title={compareEligible ? 'Show every cached variant on the map' : 'Visit at least two variants to compare them on the map'}
+        className="h-[60px] px-3.5 rounded-[14px] flex flex-col justify-center items-center gap-1 transition flex-shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"
+        style={{
+          background: showCompare ? 'var(--gd-red-soft)' : 'var(--gd-panel)',
+          border: `1px solid ${showCompare ? 'var(--gd-red-line)' : 'var(--gd-border)'}`,
+          color: showCompare ? 'var(--gd-red)' : 'var(--gd-text-2)',
+        }}
+      >
+        <ArrowLeftRight className="w-3.5 h-3.5" />
+        <span className="text-[10.5px] font-medium whitespace-nowrap">
+          Compare {cachedIds.length > 0 ? `(${cachedIds.length})` : ''}
+        </span>
+      </button>
     </div>
   );
 }
@@ -1273,6 +1295,8 @@ export default function TeslaTripPlanner() {
   const [variants, setVariants] = useState<RouteVariant[]>([]);
   const [selectedVariant, setSelectedVariant] = useState<RouteVariant['id']>('fast');
   const [variantSwitching, setVariantSwitching] = useState(false);
+  const [variantCache, setVariantCache] = useState<Record<string, { itinerary: Itinerary; legs: Leg[] }>>({});
+  const [showCompare, setShowCompare] = useState(false);
   const [draggingId, setDraggingId] = useState<string | null>(null);
   const [modal, setModal] = useState<
     | { kind: 'customise'; stopId: string }
@@ -1313,10 +1337,12 @@ export default function TeslaTripPlanner() {
       }
       if (cancelled) return;
       setLegs(fetched);
+      // Refresh cache with the up-to-date legs for the current variant
+      setVariantCache(prev => ({ ...prev, [selectedVariant]: { itinerary, legs: fetched } }));
     };
     fetchRoutes();
     return () => { cancelled = true; };
-  }, [itinerary]);
+  }, [itinerary]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const computedTotals = React.useMemo(() => {
     if (legs.length === 0) return null;
@@ -1356,6 +1382,11 @@ export default function TeslaTripPlanner() {
       if (data.itinerary) {
         const clean = await normalizeAndSanitizeItinerary(data.itinerary);
         setItinerary(clean);
+        // Pre-cache for the variant we just rendered (legs will be filled by useEffect)
+        const variantJustRendered = typeof data.selectedVariant === 'string'
+          ? data.selectedVariant as RouteVariant['id']
+          : opts.variant ?? selectedVariant;
+        setVariantCache(prev => ({ ...prev, [variantJustRendered]: { itinerary: clean, legs: [] } }));
       }
       if (Array.isArray(data.variants)) {
         setVariants(normalizeVariants(data.variants));
@@ -1476,6 +1507,19 @@ export default function TeslaTripPlanner() {
 
   const switchVariant = (variantId: RouteVariant['id']) => {
     if (variantId === selectedVariant || variantSwitching || thinking) return;
+    // Cache the current variant before switching
+    if (itinerary.days.length > 0) {
+      setVariantCache(prev => ({ ...prev, [selectedVariant]: { itinerary, legs } }));
+    }
+    // If target is already cached, swap instantly with no Grok call
+    const cached = variantCache[variantId];
+    if (cached) {
+      setItinerary(cached.itinerary);
+      setLegs(cached.legs);
+      setSelectedVariant(variantId);
+      toast.success(`Switched to ${variantId} (cached)`);
+      return;
+    }
     const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
     if (!lastUserMsg) {
       toast.info('Send a trip prompt first');
@@ -1551,6 +1595,9 @@ export default function TeslaTripPlanner() {
             selected={selectedVariant}
             onSelect={switchVariant}
             switching={variantSwitching}
+            cachedIds={Object.keys(variantCache)}
+            showCompare={showCompare}
+            onToggleCompare={() => setShowCompare(s => !s)}
           />
         )}
 
@@ -1598,6 +1645,19 @@ export default function TeslaTripPlanner() {
                   </Marker>
                 );
               })}
+              {showCompare && Object.entries(variantCache)
+                .filter(([id]) => id !== selectedVariant)
+                .map(([id, cached]) => {
+                  const variant = variants.find(v => v.id === id);
+                  const color = variant?.tone === 'green' ? '#4ade80' : variant?.tone === 'blue' ? '#60a5fa' : '#e31937';
+                  return cached.legs.map((leg, i) => (
+                    <Polyline
+                      key={`${id}-${i}`}
+                      positions={leg.geometry}
+                      pathOptions={{ color, weight: 2.4, opacity: 0.7, dashArray: '6 5' }}
+                    />
+                  ));
+                })}
               {legs.map((leg, i) => (
                 <React.Fragment key={i}>
                   <Polyline positions={leg.geometry} pathOptions={{ color: 'var(--gd-red)', weight: 6, opacity: 0.18 }} />
@@ -1606,7 +1666,31 @@ export default function TeslaTripPlanner() {
               ))}
             </MapContainer>
 
-            {/* Map legend */}
+            {/* Map legend (variants when comparing, else stop types) */}
+            {showCompare ? (
+              <div
+                className="absolute top-4 left-4 px-3 py-2 rounded-[10px] flex flex-col gap-1.5 text-[11px]"
+                style={{ background: 'rgba(20,20,24,0.85)', backdropFilter: 'blur(12px)', border: '1px solid var(--gd-border-2)', color: 'var(--gd-text-2)' }}
+              >
+                {variants.filter(v => v.id === selectedVariant || variantCache[v.id]).map(v => {
+                  const isSel = v.id === selectedVariant;
+                  const c = v.tone === 'green' ? '#4ade80' : v.tone === 'blue' ? '#60a5fa' : '#e31937';
+                  return (
+                    <div key={v.id} className="flex items-center gap-2">
+                      <div
+                        className="w-[18px] h-[3px] rounded"
+                        style={{
+                          background: isSel ? c : `repeating-linear-gradient(to right, ${c} 0 6px, transparent 6px 11px)`,
+                        }}
+                      />
+                      <div className="text-[12px]" style={{ color: isSel ? 'var(--gd-text)' : 'var(--gd-text-2)', fontWeight: isSel ? 500 : 400 }}>
+                        {v.label}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
             <div
               className="absolute top-4 left-4 px-3 py-2 rounded-[10px] flex items-center gap-3.5 text-[11px]"
               style={{ background: 'rgba(20,20,24,0.75)', backdropFilter: 'blur(12px)', border: '1px solid var(--gd-border)', color: 'var(--gd-text-2)' }}
@@ -1615,6 +1699,7 @@ export default function TeslaTripPlanner() {
               <div className="flex items-center gap-1.5"><Bed className="w-3 h-3" style={{ color: 'var(--gd-blue)' }} />Sleep</div>
               <div className="flex items-center gap-1.5"><Camera className="w-3 h-3" style={{ color: 'var(--gd-purple)' }} />See</div>
             </div>
+            )}
 
             {/* Refinements overlay */}
             {chips.length > 0 && (