diff --git a/frontend/src/components/SwipeCard.tsx b/frontend/src/components/SwipeCard.tsx
new file mode 100644
index 0000000..5fe7248
--- /dev/null
+++ b/frontend/src/components/SwipeCard.tsx
@@ -0,0 +1,145 @@
+import { useRef } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { Bed, Maximize2, ExternalLink } from 'lucide-react';
+import type { PropertyFeature } from '@/types';
+
+interface SwipeCardProps {
+  feature: PropertyFeature;
+  onSwipe: (direction: 'left' | 'right' | 'up') => void;
+  isTop: boolean;
+  stackIndex: number;
+}
+
+const SWIPE_THRESHOLD = 100;
+
+export function SwipeCard({ feature, onSwipe, isTop, stackIndex }: SwipeCardProps) {
+  const hasSwiped = useRef(false);
+  const p = feature.properties;
+
+  const [style, api] = useSpring(() => ({
+    x: 0,
+    y: 0,
+    rotate: 0,
+    scale: 1 - stackIndex * 0.05,
+    opacity: stackIndex <= 2 ? 1 : 0,
+    config: { tension: 300, friction: 25 },
+  }));
+
+  const bind = useDrag(
+    ({ active, movement: [mx, my], velocity: [vx, vy], direction: [dx, dy] }) => {
+      if (!isTop || hasSwiped.current) return;
+
+      if (!active) {
+        const isSwipeRight = mx > SWIPE_THRESHOLD || (vx > 0.5 && dx > 0);
+        const isSwipeLeft = mx < -SWIPE_THRESHOLD || (vx > 0.5 && dx < 0);
+        const isSwipeUp = my < -SWIPE_THRESHOLD || (vy > 0.5 && dy < 0);
+
+        if (isSwipeRight || isSwipeLeft || isSwipeUp) {
+          hasSwiped.current = true;
+          const direction = isSwipeRight ? 'right' : isSwipeLeft ? 'left' : 'up';
+          const flyOutX = isSwipeRight ? 500 : isSwipeLeft ? -500 : 0;
+          const flyOutY = isSwipeUp ? -500 : 0;
+          api.start({
+            x: flyOutX,
+            y: flyOutY,
+            rotate: isSwipeRight ? 15 : isSwipeLeft ? -15 : 0,
+            opacity: 0,
+            onRest: () => onSwipe(direction),
+          });
+        } else {
+          api.start({ x: 0, y: 0, rotate: 0 });
+        }
+        return;
+      }
+
+      api.start({
+        x: mx,
+        y: my,
+        rotate: mx / 20,
+        immediate: true,
+      });
+    },
+    { filterTaps: true, enabled: isTop },
+  );
+
+  const overlayOpacity = style.x.to((x: number) => Math.min(Math.abs(x) / 150, 0.4));
+  const overlayColor = style.x.to((x: number) =>
+    x > 0 ? 'rgba(34,197,94,1)' : 'rgba(239,68,68,1)',
+  );
+
+  return (
+    <animated.div
+      {...(isTop ? bind() : {})}
+      style={{
+        ...style,
+        touchAction: 'none',
+        position: 'absolute' as const,
+        width: '100%',
+        zIndex: 10 - stackIndex,
+        top: stackIndex * 8,
+      }}
+      className="cursor-grab active:cursor-grabbing"
+    >
+      <div className="bg-background rounded-2xl border shadow-lg overflow-hidden mx-4">
+        {/* Color overlay */}
+        {isTop && (
+          <animated.div
+            className="absolute inset-0 z-10 rounded-2xl pointer-events-none"
+            style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
+          />
+        )}
+
+        {/* Photo */}
+        <div className="h-48 bg-muted relative">
+          {p.photo_thumbnail && (
+            <img src={p.photo_thumbnail} alt="Property" className="w-full h-full object-cover" />
+          )}
+          <button
+            className="absolute top-3 right-3 bg-background/80 backdrop-blur-sm rounded-full p-2 z-20"
+            onClick={(e) => {
+              e.stopPropagation();
+              window.open(p.url, '_blank', 'noopener,noreferrer');
+            }}
+          >
+            <ExternalLink className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Details */}
+        <div className="p-4">
+          <div className="text-xl font-semibold">
+            £{p.total_price.toLocaleString()}
+            {p.listing_type !== 'BUY' && (
+              <span className="text-muted-foreground font-normal text-sm">/mo</span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Bed className="h-4 w-4" /> {p.rooms} bed
+            </span>
+            <span className="flex items-center gap-1">
+              <Maximize2 className="h-4 w-4" /> {p.qm} m²
+            </span>
+            <span>£{p.qmprice}/m²</span>
+          </div>
+
+          {/* POI distances */}
+          {p.poi_distances && p.poi_distances.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-3">
+              {p.poi_distances.slice(0, 4).map((d) => (
+                <span
+                  key={`${d.poi_id}_${d.travel_mode}`}
+                  className="text-xs bg-muted px-2 py-0.5 rounded"
+                >
+                  {d.poi_name}: {Math.round(d.duration_seconds / 60)}m
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </animated.div>
+  );
+}
diff --git a/frontend/src/components/SwipeReviewMode.tsx b/frontend/src/components/SwipeReviewMode.tsx
new file mode 100644
index 0000000..d739f08
--- /dev/null
+++ b/frontend/src/components/SwipeReviewMode.tsx
@@ -0,0 +1,182 @@
+import { useState, useCallback, useEffect } from 'react';
+import { X, Heart, ArrowUp, Undo2, ArrowLeft } from 'lucide-react';
+import { Button } from './ui/button';
+import { SwipeCard } from './SwipeCard';
+import type { PropertyFeature, DecisionType } from '@/types';
+
+interface SwipeReviewModeProps {
+  features: PropertyFeature[];
+  onDecide: (listingId: number, decision: DecisionType, listingType?: 'RENT' | 'BUY') => void;
+  onClear: (listingId: number, listingType?: 'RENT' | 'BUY') => void;
+  onClose: () => void;
+  getDecision: (listingId: number, listingType?: string) => DecisionType | undefined;
+}
+
+interface HistoryEntry {
+  index: number;
+  listingId: number;
+  listingType: string;
+  action: 'liked' | 'disliked' | 'skipped';
+}
+
+function getListingId(feature: PropertyFeature): number {
+  const parts = feature.properties.url.split('/');
+  return parseInt(parts[parts.length - 1], 10);
+}
+
+function getListingType(feature: PropertyFeature): 'RENT' | 'BUY' {
+  return feature.properties.listing_type === 'BUY' ? 'BUY' : 'RENT';
+}
+
+export function SwipeReviewMode({
+  features,
+  onDecide,
+  onClear,
+  onClose,
+  getDecision,
+}: SwipeReviewModeProps) {
+  // Filter to only undecided features
+  const undecided = features.filter((f) => {
+    const id = getListingId(f);
+    const type = getListingType(f);
+    return getDecision(id, type) === undefined;
+  });
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+
+  const handleSwipe = useCallback(
+    (direction: 'left' | 'right' | 'up') => {
+      const feature = undecided[currentIndex];
+      if (!feature) return;
+
+      const listingId = getListingId(feature);
+      const listingType = getListingType(feature);
+
+      let action: HistoryEntry['action'];
+      if (direction === 'right') {
+        action = 'liked';
+        onDecide(listingId, 'liked', listingType);
+      } else if (direction === 'left') {
+        action = 'disliked';
+        onDecide(listingId, 'disliked', listingType);
+      } else {
+        action = 'skipped';
+      }
+
+      setHistory((prev) => [...prev, { index: currentIndex, listingId, listingType, action }]);
+      setCurrentIndex((prev) => prev + 1);
+    },
+    [currentIndex, undecided, onDecide],
+  );
+
+  const handleUndo = useCallback(() => {
+    const lastEntry = history[history.length - 1];
+    if (!lastEntry) return;
+
+    if (lastEntry.action !== 'skipped') {
+      onClear(lastEntry.listingId, lastEntry.listingType as 'RENT' | 'BUY');
+    }
+    setHistory((prev) => prev.slice(0, -1));
+    setCurrentIndex((prev) => prev - 1);
+  }, [history, onClear]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowRight') handleSwipe('right');
+      else if (e.key === 'ArrowLeft') handleSwipe('left');
+      else if (e.key === 'ArrowUp') handleSwipe('up');
+      else if ((e.ctrlKey || e.metaKey) && e.key === 'z') handleUndo();
+      else if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [handleSwipe, handleUndo, onClose]);
+
+  const isFinished = currentIndex >= undecided.length;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-background flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b">
+        <Button variant="ghost" size="sm" onClick={onClose}>
+          <ArrowLeft className="h-4 w-4 mr-1" /> Back
+        </Button>
+        <span className="text-sm text-muted-foreground">
+          {Math.min(currentIndex + 1, undecided.length)} / {undecided.length}
+        </span>
+        <div className="w-16" />
+      </div>
+
+      {/* Card stack */}
+      <div className="flex-1 relative overflow-hidden flex items-start justify-center pt-4">
+        {isFinished ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center p-8">
+              <p className="text-xl font-semibold mb-2">All done!</p>
+              <p className="text-muted-foreground mb-4">
+                You've reviewed all {undecided.length} properties.
+              </p>
+              <Button onClick={onClose}>Back to listings</Button>
+            </div>
+          </div>
+        ) : (
+          <div className="relative w-full max-w-md h-full">
+            {undecided.slice(currentIndex, currentIndex + 3).map((feature, i) => (
+              <SwipeCard
+                key={feature.properties.url}
+                feature={feature}
+                onSwipe={handleSwipe}
+                isTop={i === 0}
+                stackIndex={i}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      {!isFinished && (
+        <div className="flex items-center justify-center gap-6 py-6 px-4">
+          <Button
+            variant="outline"
+            size="lg"
+            className="rounded-full h-14 w-14 border-red-300 text-red-500 hover:bg-red-50"
+            onClick={() => handleSwipe('left')}
+          >
+            <X className="h-6 w-6" />
+          </Button>
+
+          <Button
+            variant="outline"
+            size="sm"
+            className="rounded-full h-10 w-10"
+            onClick={handleUndo}
+            disabled={history.length === 0}
+          >
+            <Undo2 className="h-4 w-4" />
+          </Button>
+
+          <Button
+            variant="outline"
+            size="sm"
+            className="rounded-full h-10 w-10"
+            onClick={() => handleSwipe('up')}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </Button>
+
+          <Button
+            variant="outline"
+            size="lg"
+            className="rounded-full h-14 w-14 border-green-300 text-green-500 hover:bg-green-50"
+            onClick={() => handleSwipe('right')}
+          >
+            <Heart className="h-6 w-6" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}