diff --git a/.interface-design/system.md b/.interface-design/system.md
index df4ab95..68ab906 100644
--- a/.interface-design/system.md
+++ b/.interface-design/system.md
@@ -117,50 +117,73 @@
 
 ---
 
-## Home Page Patterns
+## Home Page Patterns (v2)
 
 ### Structure
-- Header: Title + DatePicker chip + Action button (3-column)
-- Metrics Grid: 4-column stats with semantic colors
-- Next Booking: Prominent card with emerald accent
-- Timeline: Grouped by date with "now" indicator
+- Header + URL Card: 2-column grid (lg:)
+- Main: Timeline de reservas
+- Sidebar: Stats grid consolidado (sticky)
 
-### DatePicker Chip
+### URL Card (destacada)
 ```tsx
-<div className="flex items-center gap-1 rounded-md border bg-card px-2 py-1">
-  <Field>
-    <DatePicker value={...} onChange={...} placeholder="" />
-  </Field>
-  {isToday && (
-    <span className="text-xs font-medium text-emerald-600">Hoy</span>
-  )}
-</div>
-```
-
-### Metrics Grid
-```tsx
-<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-  <div className="rounded-lg border bg-card p-3">
-    <p className="text-xs font-medium text-muted-foreground">Total</p>
-    <p className="mt-1 text-2xl font-semibold tracking-tight">{value}</p>
+<div className="group relative overflow-hidden rounded-2xl border border-blue-200/60 bg-blue-50/50 p-5">
+  <div className="absolute inset-0 bg-gradient-to-br from-blue-50/80 to-blue-100/30" />
+  <div className="relative flex items-center justify-between gap-4">
+    <div className="min-w-0 flex-1">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-blue-600/70">
+        Reserva online
+      </p>
+      <a href={url} className="mt-1 block truncate text-sm font-medium text-blue-700 underline-offset-2 hover:underline">
+        {url}
+      </a>
+    </div>
+    <button className="relative flex shrink-0 items-center gap-2 rounded-lg bg-blue-500/10 px-3 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-500/20">
+      <Copy className="size-4" />
+      <span>Copiar</span>
+    </button>
   </div>
-  // ... confirmed (emerald), completed (sky), no-show (orange)
 </div>
 ```
 
-### Timeline Item
+### Stats Pills (header)
+```tsx
+<span className="rounded-full border border-emerald-200/60 bg-emerald-50/60 px-3 py-1 text-xs font-medium text-emerald-700">
+  {count} hoy
+</span>
+```
+
+### Stats Sidebar (grid 2x2)
+```tsx
+<section className="space-y-3 rounded-2xl border border-border/70 bg-card p-4">
+  <h2 className="text-xs font-semibold uppercase tracking-[0.28em] text-muted-foreground">
+    Resumen
+  </h2>
+  <div className="grid grid-cols-2 gap-3">
+    <div className="rounded-xl border border-border/50 bg-background/80 p-3">
+      <p className="text-xs text-muted-foreground">Total</p>
+      <p className="mt-1 text-xl font-semibold tracking-tight">{value}</p>
+    </div>
+    <div className="rounded-xl border border-emerald-200/40 bg-emerald-50/40 p-3">
+      <p className="text-xs text-emerald-700/80">Hoy</p>
+      <p className="mt-1 text-xl font-semibold tracking-tight text-emerald-700">{value}</p>
+    </div>
+    {/* ... confirmed (blue), completed (sky) */}
+  </div>
+</section>
+```
+
+### Timeline Item (v2 - mejorado)
 ```tsx
 <div className={[
-  'group flex items-center justify-between gap-3 rounded-md border p-2.5 transition-colors hover:bg-muted/50',
-  isPast && 'opacity-60',
+  'group flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-card/60 p-3.5 transition-all hover:bg-muted/50',
+  isPast && 'opacity-50',
   isNow && 'border-l-2 border-l-emerald-500 bg-emerald-50/30',
 ].join(' ')}>
   <div className="flex min-w-0 flex-1 items-center gap-3">
-    <div className="flex w-16 shrink-0 flex-col items-center">
+    <div className="flex w-14 flex-col items-center">
       <span className="text-sm font-medium tabular-nums">{startTime}</span>
-      <span className="text-xs text-muted-foreground">{endTime}</span>
+      <span className="text-[11px] text-muted-foreground">{endTime}</span>
     </div>
-    <ChevronRight className="size-4 shrink-0 text-muted-foreground/30" />
     <div className="min-w-0 flex-1">
       <p className="truncate text-sm font-medium">{courtName}</p>
       <p className="truncate text-xs text-muted-foreground">{customer}</p>
@@ -169,18 +192,20 @@
   <div className="flex shrink-0 items-center gap-2">
     <StatusBadge status={...} />
     <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-      <Button size="icon-xs" variant="ghost">...</Button>
+      <Button size="icon-xs" variant="ghost" title="Marcar cumplida"><Check className="size-3.5" /></Button>
+      <Button size="icon-xs" variant="ghost" title="Cancelar">×</Button>
     </div>
   </div>
 </div>
 ```
 
-### Actions Hover Pattern
+### Date Group Header
 ```tsx
-<div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-  <Button size="icon-xs" variant="ghost" title="Marcar cumplida">
-    <Check className="size-3.5" />
-  </Button>
-  <Button size="icon-xs" variant="ghost" title="Cancelar">×</Button>
+<div className="flex items-center gap-3">
+  <h2 className="text-sm font-semibold capitalize">{dateLabel}</h2>
+  <div className="h-px flex-1 border-t border-dashed border-border/40" />
+  <span className="shrink-0 rounded-full border border-border/70 bg-background px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
+    {count}
+  </span>
 </div>
 ```
\ No newline at end of file
diff --git a/apps/frontend/src/components/ui/availability-heatmap.tsx b/apps/frontend/src/components/ui/availability-heatmap.tsx
new file mode 100644
index 0000000..f03e7a4
--- /dev/null
+++ b/apps/frontend/src/components/ui/availability-heatmap.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+// Types for the component
+type Slot = {
+  startTime: string;
+  endTime: string;
+};
+
+type Court = {
+  courtId: string;
+  courtName: string;
+  sport: { id: string; name: string; slug: string };
+  slotDurationMinutes: number;
+  availableSlots: Slot[];
+};
+
+type SelectedSlot = {
+  courtId: string;
+  startTime: string;
+} | null;
+
+type AvailabilityHeatMapProps = {
+  courts: Court[];
+  selectedSlot: SelectedSlot;
+  onSelectSlot: (payload: {
+    courtId: string;
+    courtName: string;
+    sportId: string;
+    sportName: string;
+    startTime: string;
+    endTime: string;
+    price?: { min: number; max: number };
+  }) => void;
+};
+
+/**
+ * AvailabilityHeatMap
+ *
+ * A visual heat‑map style component that displays each court as a card and colours the
+ * slot buttons according to how many slots are available for that court. The colour scale
+ * goes from green (few slots) to red (many slots), providing an immediate visual cue of
+ * density – the signature element requested for the bookings panel.
+ */
+export default function AvailabilityHeatMap({
+  courts,
+  selectedSlot,
+  onSelectSlot,
+}: AvailabilityHeatMapProps) {
+  // Determine the maximum number of slots among all courts to normalise the heat scale.
+  const maxSlots = Math.max(1, ...courts.map((c) => c.availableSlots.length));
+
+  // Convert a slot count into an HSL colour ranging from green (low) to red (high).
+  const slotCountToHue = (count: number) => {
+    const ratio = count / maxSlots; // 0 => green, 1 => red
+    const hue = Math.round(120 - 120 * ratio); // 120° (green) to 0° (red)
+    return `hsl(${hue}, 70%, 55%)`;
+  };
+
+  return (
+    <div className="grid gap-4">
+      {courts.map((court) => {
+        const bg = slotCountToHue(court.availableSlots.length);
+        return (
+          <div
+            key={court.courtId}
+            className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <p className="font-semibold text-foreground">{court.courtName}</p>
+              <span className="text-xs text-muted-foreground">
+                {court.availableSlots.length} horarios
+              </span>
+            </div>
+            <div className="grid grid-cols-4 gap-2">
+              {court.availableSlots.map((slot) => {
+                const isSelected =
+                  selectedSlot?.courtId === court.courtId &&
+                  selectedSlot?.startTime === slot.startTime;
+                return (
+                  <button
+                    key={slot.startTime}
+                    type="button"
+                    onClick={() =>
+                      onSelectSlot({
+                        courtId: court.courtId,
+                        courtName: court.courtName,
+                        sportId: court.sport.id,
+                        sportName: court.sport.name,
+                        startTime: slot.startTime,
+                        endTime: slot.endTime,
+                      })
+                    }
+                    className={`h-10 rounded-xl border text-sm font-medium transition-all ${
+                      isSelected
+                        ? 'border-primary bg-primary text-primary-foreground shadow-sm'
+                        : 'border-border/70 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
+                    }`}
+                    style={{
+                      backgroundColor: isSelected ? undefined : bg,
+                      opacity: isSelected ? 1 : 0.8,
+                    }}
+                  >
+                    {slot.startTime}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/frontend/src/features/home/home-page.tsx b/apps/frontend/src/features/home/home-page.tsx
index 7e3cb16..7cc7281 100644
--- a/apps/frontend/src/features/home/home-page.tsx
+++ b/apps/frontend/src/features/home/home-page.tsx
@@ -1,3 +1,4 @@
+import AvailabilityHeatMap from '@/components/ui/availability-heatmap';
 import { Button } from '@/components/ui/button';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
@@ -127,6 +128,9 @@ export function HomePage() {
   const [selectedSportId, setSelectedSportId] = useState<string | undefined>();
   const [selectedCourtId, setSelectedCourtId] = useState<string>('');
   const [selectedStartTime, setSelectedStartTime] = useState<string>('');
+  const [selectedSlot, setSelectedSlot] = useState<{ courtId: string; startTime: string } | null>(
+    null
+  );
   const [isManualBookingOpen, setIsManualBookingOpen] = useState(false);
   const [urlCopied, setUrlCopied] = useState(false);
   const [bookingToCancel, setBookingToCancel] = useState<AdminBooking | null>(null);
@@ -310,6 +314,7 @@ export function HomePage() {
     ) {
       setSelectedCourtId('');
       setSelectedStartTime('');
+      setSelectedSlot(null);
     }
   }, [manualAvailabilityQuery.data, selectedCourtId]);
 
@@ -320,11 +325,13 @@ export function HomePage() {
   useEffect(() => {
     if (!selectedCourt) {
       setSelectedStartTime('');
+      setSelectedSlot(null);
       return;
     }
 
     if (!selectedCourt.availableSlots.some((slot) => slot.startTime === selectedStartTime)) {
       setSelectedStartTime('');
+      setSelectedSlot(null);
     }
   }, [selectedCourt, selectedStartTime]);
 
@@ -418,6 +425,7 @@ export function HomePage() {
       reset();
       setSelectedCourtId('');
       setSelectedStartTime('');
+      setSelectedSlot(null);
       setIsManualBookingOpen(false);
 
       await queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] });
@@ -469,421 +477,401 @@ export function HomePage() {
     );
   }
 
-  return (
-    <main className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
-      <div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
-        <section className="space-y-6">
-          <section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-6 shadow-sm sm:p-8">
-            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-              <div className="space-y-4">
-                <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                  <span className="size-2 rounded-full bg-primary" />
-                  Panel operativo
-                </div>
-                <div className="space-y-2">
-                  <p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
-                    {selectedComplex.complexSlug}
-                  </p>
-                  <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
-                    Panel de reservas
-                  </h1>
-                  <p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
-                    Gestioná turnos del día y futuros para {selectedComplex.complexName}.
-                  </p>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                    {dashboardStats.today} hoy
-                  </span>
-                  <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                    {dashboardStats.confirmed} confirmadas
-                  </span>
-                  <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                    {dashboardStats.completed} cumplidas
-                  </span>
-                </div>
-              </div>
+  const manualBookingDialog = (
+    <ResponsiveDialog
+      open={isManualBookingOpen}
+      onOpenChange={(open) => {
+        setIsManualBookingOpen(open);
+        if (!open) {
+          reset();
+          setManualDate(todayIso);
+          setSelectedSportId(undefined);
+          setSelectedCourtId('');
+          setSelectedStartTime('');
+          setSelectedSlot(null);
+        }
+      }}
+    >
+      <ResponsiveDialogTrigger asChild>
+        <Button className="w-full">Nueva reserva</Button>
+      </ResponsiveDialogTrigger>
+      <ResponsiveDialogContent
+        className="data-[variant=dialog]:max-w-lg"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Reserva manual</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Crea un turno para atención telefónica o mostrador.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
 
-              <div className="w-full max-w-md space-y-3">
-                <div className="rounded-2xl border border-border/70 bg-background p-4">
-                  <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
-                    URL pública
-                  </p>
-                  <div className="mt-2 flex items-center gap-2">
-                    <a
-                      href={publicBookingUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="min-w-0 truncate text-sm text-foreground underline-offset-4 hover:underline"
-                    >
-                      {publicBookingUrl}
-                    </a>
-                    <button
-                      type="button"
-                      onClick={copyToClipboard}
-                      className="text-muted-foreground transition-colors hover:text-foreground"
-                      title="Copiar URL"
-                    >
-                      {urlCopied ? (
-                        <Check className="h-4 w-4 text-emerald-500" />
-                      ) : (
-                        <Copy className="h-4 w-4" />
-                      )}
-                    </button>
-                  </div>
-                </div>
+        <form
+          id="manual-booking-form"
+          className="grid gap-4"
+          onSubmit={handleSubmit(onSubmitManualBooking)}
+        >
+          <div className="grid gap-3">
+            <Field>
+              <FieldLabel htmlFor="manualDate">Fecha</FieldLabel>
+              <DatePicker
+                value={fromIsoDateLocal(manualDate)}
+                onChange={(date) => {
+                  const isoDate = date ? toIsoDateLocal(date) : todayIso;
+                  setManualDate(isoDate);
+                  setSelectedCourtId('');
+                  setSelectedStartTime('');
+                  setSelectedSlot(null);
+                }}
+                minDate={new Date()}
+                placeholder="Selecciona una fecha"
+              />
+            </Field>
 
-                <ResponsiveDialog
-                  open={isManualBookingOpen}
-                  onOpenChange={(open) => {
-                    setIsManualBookingOpen(open);
-                    if (!open) {
-                      reset();
-                      setManualDate(todayIso);
-                      setSelectedSportId(undefined);
-                      setSelectedCourtId('');
-                      setSelectedStartTime('');
-                    }
+            {manualAvailabilityQuery.data?.sportSelectionRequired && (
+              <Field>
+                <FieldLabel>Deporte</FieldLabel>
+                <Select
+                  value={selectedSportId ?? ''}
+                  onValueChange={(value) => {
+                    setSelectedSportId(value);
+                    setSelectedCourtId('');
+                    setSelectedStartTime('');
+                    setSelectedSlot(null);
                   }}
                 >
-                  <ResponsiveDialogTrigger asChild>
-                    <Button className="w-full">Nueva reserva manual</Button>
-                  </ResponsiveDialogTrigger>
-                  <ResponsiveDialogContent
-                    className="data-[variant=dialog]:max-w-lg"
-                    onOpenAutoFocus={(e) => e.preventDefault()}
-                  >
-                    <ResponsiveDialogHeader>
-                      <ResponsiveDialogTitle>Reserva manual</ResponsiveDialogTitle>
-                      <ResponsiveDialogDescription>
-                        Crea un turno para atención telefónica o mostrador.
-                      </ResponsiveDialogDescription>
-                    </ResponsiveDialogHeader>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Selecciona un deporte" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {manualAvailabilityQuery.data?.sports.map((sport) => (
+                      <SelectItem key={sport.id} value={sport.id}>
+                        {sport.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            )}
 
-                    <form
-                      id="manual-booking-form"
-                      className="grid gap-4"
-                      onSubmit={handleSubmit(onSubmitManualBooking)}
-                    >
-                      <div className="grid gap-3 md:grid-cols-2">
-                        <Field>
-                          <FieldLabel htmlFor="manualDate">Fecha</FieldLabel>
-                          <DatePicker
-                            value={fromIsoDateLocal(manualDate)}
-                            onChange={(date) => {
-                              const isoDate = date ? toIsoDateLocal(date) : todayIso;
-                              setManualDate(isoDate);
-                              setSelectedCourtId('');
-                              setSelectedStartTime('');
-                            }}
-                            minDate={new Date()}
-                            placeholder="Selecciona una fecha"
-                          />
-                        </Field>
+            {manualAvailabilityQuery.data?.courts && (
+              <Field>
+                <FieldLabel>Disponibilidad</FieldLabel>
+                <AvailabilityHeatMap
+                  courts={manualAvailabilityQuery.data.courts}
+                  selectedSlot={selectedSlot}
+                  onSelectSlot={({ courtId, startTime }) => {
+                    setSelectedCourtId(courtId);
+                    setSelectedStartTime(startTime);
+                    setSelectedSlot({ courtId, startTime });
+                  }}
+                />
+              </Field>
+            )}
+          </div>
 
-                        {manualAvailabilityQuery.data?.sportSelectionRequired && (
-                          <Field>
-                            <FieldLabel>Deporte</FieldLabel>
-                            <Select
-                              value={selectedSportId ?? ''}
-                              onValueChange={(value) => {
-                                setSelectedSportId(value);
-                                setSelectedCourtId('');
-                                setSelectedStartTime('');
-                              }}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="Selecciona un deporte" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {manualAvailabilityQuery.data?.sports.map((sport) => (
-                                  <SelectItem key={sport.id} value={sport.id}>
-                                    {sport.name}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </Field>
-                        )}
+          {manualAvailabilityQuery.isLoading && (
+            <p className="text-sm text-muted-foreground">Cargando horarios disponibles...</p>
+          )}
 
-                        <Field>
-                          <FieldLabel>Cancha</FieldLabel>
-                          <Select
-                            value={selectedCourtId}
-                            onValueChange={(value) => {
-                              setSelectedCourtId(value);
-                              setSelectedStartTime('');
-                            }}
-                          >
-                            <SelectTrigger>
-                              <SelectValue placeholder="Selecciona una cancha" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {(manualAvailabilityQuery.data?.courts ?? []).map((court) => (
-                                <SelectItem key={court.courtId} value={court.courtId}>
-                                  {court.courtName} · {court.sport.name}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </Field>
+          {manualAvailabilityQuery.isError && (
+            <p className="text-sm text-destructive">
+              {extractMessage(
+                manualAvailabilityQuery.error,
+                'No pudimos cargar disponibilidad para la reserva manual.'
+              )}
+            </p>
+          )}
 
-                        <Field>
-                          <FieldLabel>Horario</FieldLabel>
-                          <Select value={selectedStartTime} onValueChange={setSelectedStartTime}>
-                            <SelectTrigger>
-                              <SelectValue placeholder="Selecciona un horario" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {(selectedCourt?.availableSlots ?? []).map((slot) => {
-                                const isToday = manualDate === todayIso;
-                                const currentTime = new Date();
-                                const currentHours = currentTime
-                                  .getHours()
-                                  .toString()
-                                  .padStart(2, '0');
-                                const currentMinutes = currentTime
-                                  .getMinutes()
-                                  .toString()
-                                  .padStart(2, '0');
-                                const currentTimeStr = `${currentHours}:${currentMinutes}`;
-                                const isPastSlot = isToday && slot.startTime <= currentTimeStr;
-                                if (isPastSlot) return null;
-                                return (
-                                  <SelectItem key={slot.startTime} value={slot.startTime}>
-                                    {slot.startTime}
-                                  </SelectItem>
-                                );
-                              })}
-                            </SelectContent>
-                          </Select>
-                        </Field>
-                      </div>
+          <Field data-invalid={Boolean(errors.customerName)}>
+            <FieldLabel htmlFor="customerName">Nombre</FieldLabel>
+            <Input
+              id="customerName"
+              placeholder="Ej: Juan Perez"
+              aria-invalid={Boolean(errors.customerName)}
+              {...register('customerName')}
+            />
+            <FieldError errors={[errors.customerName]} />
+          </Field>
 
-                      {manualAvailabilityQuery.isLoading && (
-                        <p className="text-sm text-muted-foreground">
-                          Cargando horarios disponibles...
-                        </p>
-                      )}
+          <Field data-invalid={Boolean(errors.customerPhone)}>
+            <FieldLabel htmlFor="customerPhone">Teléfono</FieldLabel>
+            <Input
+              id="customerPhone"
+              type="tel"
+              placeholder="Ej: 3875551234"
+              aria-invalid={Boolean(errors.customerPhone)}
+              {...register('customerPhone')}
+            />
+            <FieldError errors={[errors.customerPhone]} />
+          </Field>
 
-                      {manualAvailabilityQuery.isError && (
-                        <p className="text-sm text-destructive">
-                          {extractMessage(
-                            manualAvailabilityQuery.error,
-                            'No pudimos cargar disponibilidad para la reserva manual.'
-                          )}
-                        </p>
-                      )}
+          {createManualBookingMutation.isError && (
+            <p className="text-sm text-destructive">
+              {extractMessage(
+                createManualBookingMutation.error,
+                'No pudimos crear la reserva manual.'
+              )}
+            </p>
+          )}
+        </form>
 
-                      <Field data-invalid={Boolean(errors.customerName)}>
-                        <FieldLabel htmlFor="customerName">Nombre</FieldLabel>
-                        <Input
-                          id="customerName"
-                          placeholder="Ej: Juan Perez"
-                          aria-invalid={Boolean(errors.customerName)}
-                          {...register('customerName')}
-                        />
-                        <FieldError errors={[errors.customerName]} />
-                      </Field>
+        <ResponsiveDialogFooter>
+          <ResponsiveDialogClose asChild>
+            <Button variant="outline">Cancelar</Button>
+          </ResponsiveDialogClose>
+          <Button
+            type="submit"
+            form="manual-booking-form"
+            disabled={
+              !isValid ||
+              createManualBookingMutation.isPending ||
+              !selectedCourtId ||
+              !selectedStartTime
+            }
+          >
+            {createManualBookingMutation.isPending ? 'Guardando...' : 'Crear reserva'}
+          </Button>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
 
-                      <Field data-invalid={Boolean(errors.customerPhone)}>
-                        <FieldLabel htmlFor="customerPhone">Teléfono</FieldLabel>
-                        <Input
-                          id="customerPhone"
-                          type="tel"
-                          placeholder="Ej: 3875551234"
-                          aria-invalid={Boolean(errors.customerPhone)}
-                          {...register('customerPhone')}
-                        />
-                        <FieldError errors={[errors.customerPhone]} />
-                      </Field>
+  const urlCard = (
+    <div className="group relative overflow-hidden rounded-2xl border border-blue-200/60 bg-blue-50/50 p-5">
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/80 to-blue-100/30" />
+      <div className="relative flex items-center justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-blue-600/70">
+            Reserva online
+          </p>
+          <a
+            href={publicBookingUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-1 block truncate text-sm font-medium text-blue-700 underline-offset-2 hover:underline"
+          >
+            {publicBookingUrl}
+          </a>
+        </div>
+        <button
+          type="button"
+          onClick={copyToClipboard}
+          className="relative flex shrink-0 items-center gap-2 rounded-lg bg-blue-500/10 px-3 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-500/20"
+          title="Copiar URL"
+        >
+          {urlCopied ? (
+            <>
+              <Check className="size-4" />
+              <span>Copiado</span>
+            </>
+          ) : (
+            <>
+              <Copy className="size-4" />
+              <span>Copiar</span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
 
-                      {createManualBookingMutation.isError && (
-                        <p className="text-sm text-destructive">
-                          {extractMessage(
-                            createManualBookingMutation.error,
-                            'No pudimos crear la reserva manual.'
-                          )}
-                        </p>
-                      )}
-                    </form>
+  const headerPills = (
+    <div className="flex flex-wrap gap-2">
+      <span className="rounded-full border border-emerald-200/60 bg-emerald-50/60 px-3 py-1 text-xs font-medium text-emerald-700">
+        {dashboardStats.today} hoy
+      </span>
+      <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
+        {dashboardStats.confirmed} confirmadas
+      </span>
+      <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
+        {dashboardStats.completed} cumplidas
+      </span>
+    </div>
+  );
 
-                    <ResponsiveDialogFooter>
-                      <ResponsiveDialogClose asChild>
-                        <Button variant="outline">Cancelar</Button>
-                      </ResponsiveDialogClose>
-                      <Button
-                        type="submit"
-                        form="manual-booking-form"
-                        disabled={
-                          !isValid ||
-                          createManualBookingMutation.isPending ||
-                          !selectedCourtId ||
-                          !selectedStartTime
-                        }
-                      >
-                        {createManualBookingMutation.isPending ? 'Guardando...' : 'Crear reserva'}
-                      </Button>
-                    </ResponsiveDialogFooter>
-                  </ResponsiveDialogContent>
-                </ResponsiveDialog>
+  const dateSelector = (
+    <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
+      <Field>
+        <FieldLabel htmlFor="fromDate">Desde</FieldLabel>
+        <DatePicker
+          value={fromIsoDateLocal(fromDate)}
+          onChange={(date) => {
+            const isoDate = date ? toIsoDateLocal(date) : todayIso;
+            setFromDate(isoDate);
+          }}
+          disabled={(date) => {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const checkDate = new Date(date);
+            checkDate.setHours(0, 0, 0, 0);
+            return checkDate < today;
+          }}
+          placeholder="Selecciona"
+        />
+      </Field>
+    </div>
+  );
+
+  return (
+    <main className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
+      <div className="space-y-5">
+        <div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
+          <section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-5 sm:p-6">
+            <div className="space-y-4">
+              <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
+                <span className="size-2 rounded-full bg-emerald-500" />
+                {selectedComplex.complexSlug}
               </div>
+              <div className="space-y-2">
+                <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+                  Panel de reservas
+                </h1>
+                <p className="text-sm text-muted-foreground">
+                  Gestioná turnos de {selectedComplex.complexName}
+                </p>
+              </div>
+              {headerPills}
             </div>
           </section>
 
-          <section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
-              <Field>
-                <FieldLabel htmlFor="fromDate">Mostrar desde</FieldLabel>
-                <DatePicker
-                  value={fromIsoDateLocal(fromDate)}
-                  onChange={(date) => {
-                    const isoDate = date ? toIsoDateLocal(date) : todayIso;
-                    setFromDate(isoDate);
-                  }}
-                  disabled={(date) => {
-                    const today = new Date();
-                    today.setHours(0, 0, 0, 0);
-                    const checkDate = new Date(date);
-                    checkDate.setHours(0, 0, 0, 0);
-                    return checkDate < today;
-                  }}
-                  placeholder="Selecciona una fecha"
-                />
-              </Field>
-            </div>
+          <div className="space-y-4">
+            {urlCard}
+            {manualBookingDialog}
+          </div>
+        </div>
 
-            {bookingsQuery.isLoading && (
-              <p className="mt-4 text-sm text-muted-foreground">Cargando reservas...</p>
-            )}
+        <section className="rounded-2xl border border-border/70 bg-card p-4 sm:p-5">
+          {dateSelector}
 
-            {bookingsQuery.isError && (
-              <p className="mt-4 text-sm text-destructive">
-                {extractMessage(bookingsQuery.error, 'No pudimos cargar las reservas.')}
-              </p>
-            )}
+          {bookingsQuery.isLoading && (
+            <p className="mt-4 text-sm text-muted-foreground">Cargando reservas...</p>
+          )}
 
-            {!bookingsQuery.isLoading && !bookingsQuery.isError && groupedBookings.length === 0 && (
-              <p className="mt-4 text-sm text-muted-foreground">
-                No hay reservas para la fecha seleccionada en adelante.
-              </p>
-            )}
+          {bookingsQuery.isError && (
+            <p className="mt-4 text-sm text-destructive">
+              {extractMessage(bookingsQuery.error, 'No pudimos cargar las reservas.')}
+            </p>
+          )}
 
-            <div className="mt-4 space-y-4">
-              {groupedBookings.map(([date, bookings]) => (
-                <article key={date} className="rounded-2xl border border-border/70 bg-card p-4">
-                  <div className="flex items-center justify-between gap-3">
-                    <h2 className="text-sm font-semibold capitalize">
-                      {formatDateLabel(date, todayIso)}
-                    </h2>
-                    <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-[11px] font-medium text-muted-foreground">
-                      {bookings.length} reservas
-                    </span>
-                  </div>
-                  <div className="mt-3 space-y-3">
-                    {bookings.map((booking) => {
+          {!bookingsQuery.isLoading && !bookingsQuery.isError && groupedBookings.length === 0 && (
+            <p className="mt-4 text-sm text-muted-foreground">
+              No hay reservas para la fecha seleccionada.
+            </p>
+          )}
+
+          <div className="mt-4 space-y-6">
+            {groupedBookings.map(([date, bookings]) => (
+              <article key={date}>
+                <div className="flex items-center gap-3">
+                  <h2 className="text-sm font-semibold capitalize">
+                    {formatDateLabel(date, todayIso)}
+                  </h2>
+                  <div className="h-px flex-1 border-t border-dashed border-border/40" />
+                  <span className="shrink-0 rounded-full border border-border/70 bg-background px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
+                    {bookings.length}
+                  </span>
+                </div>
+
+                <div className="mt-3 space-y-2">
+                  {bookings
+                    .slice()
+                    .sort((a, b) => a.startTime.localeCompare(b.startTime))
+                    .map((booking) => {
                       const effectiveStatus = getEffectiveStatus(booking);
                       const canManage =
                         booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED';
                       const isMutating = updateStatusMutation.isPending;
 
+                      const now = new Date();
+                      const bookingStart = new Date(`${date}T${booking.startTime}:00`);
+                      const bookingEnd = new Date(`${date}T${booking.endTime}:00`);
+                      const isPast = bookingEnd < now;
+                      const isNow = date === todayIso && bookingStart <= now && bookingEnd > now;
+
                       return (
                         <div
                           key={booking.id}
-                          className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-card p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between"
+                          className={[
+                            'group flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-card/60 p-3.5 transition-all hover:bg-muted/50',
+                            isPast && 'opacity-50',
+                            isNow && 'border-l-2 border-l-emerald-500 bg-emerald-50/30',
+                          ].join(' ')}
                         >
-                          <div className="space-y-1">
-                            <div className="flex flex-wrap items-center gap-2">
-                              <p className="text-sm font-medium text-foreground">
-                                {booking.startTime} - {booking.endTime} · {booking.courtName}
-                              </p>
-                              <StatusBadge
-                                status={effectiveStatus}
-                                label={effectiveStatusLabel(effectiveStatus)}
-                              />
+                          <div className="flex min-w-0 flex-1 items-center gap-3">
+                            <div className="flex w-14 flex-col items-center">
+                              <span className="text-sm font-medium tabular-nums">
+                                {booking.startTime}
+                              </span>
+                              <span className="text-[11px] text-muted-foreground">
+                                {booking.endTime}
+                              </span>
+                            </div>
+
+                            <div className="flex flex-1 min-w-0">
+                              <div className="min-w-0 flex-1">
+                                <p className="truncate text-sm font-medium">{booking.courtName}</p>
+                                <p className="truncate text-xs text-muted-foreground">
+                                  {booking.customerName}{' '}
+                                  <span className="text-muted-foreground/60">
+                                    · {booking.customerPhone}
+                                  </span>
+                                </p>
+                              </div>
                             </div>
-                            <p className="text-xs text-muted-foreground">
-                              {booking.customerName} ({booking.customerPhone}) · Código{' '}
-                              {booking.bookingCode}
-                            </p>
                           </div>
 
-                          <div className="flex flex-wrap items-center gap-2">
-                            {canManage && (
-                              <>
-                                <Button
-                                  type="button"
-                                  size="sm"
-                                  variant="outline"
-                                  disabled={isMutating}
-                                  onClick={() => {
-                                    updateStatusMutation.mutate({
-                                      bookingId: booking.id,
-                                      status: 'COMPLETED',
-                                    });
-                                  }}
-                                >
-                                  Marcar cumplida
-                                </Button>
-                                <Button
-                                  type="button"
-                                  size="sm"
-                                  variant="destructive"
-                                  disabled={isMutating}
-                                  onClick={() => {
-                                    handleCancelBooking(booking);
-                                  }}
-                                >
-                                  Cancelar
-                                </Button>
-                              </>
-                            )}
+                          <div className="flex shrink-0 items-center gap-2">
+                            <StatusBadge
+                              status={effectiveStatus}
+                              label={effectiveStatusLabel(effectiveStatus)}
+                            />
+                            <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                              {canManage && !isMutating && (
+                                <>
+                                  <Button
+                                    type="button"
+                                    size="icon-xs"
+                                    variant="ghost"
+                                    title="Marcar cumplida"
+                                    onClick={() => {
+                                      updateStatusMutation.mutate({
+                                        bookingId: booking.id,
+                                        status: 'COMPLETED',
+                                      });
+                                    }}
+                                  >
+                                    <Check className="size-3.5" />
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    size="icon-xs"
+                                    variant="ghost"
+                                    title="Cancelar"
+                                    onClick={() => {
+                                      handleCancelBooking(booking);
+                                    }}
+                                  >
+                                    ×
+                                  </Button>
+                                </>
+                              )}
+                            </div>
                           </div>
                         </div>
                       );
                     })}
-                  </div>
-                </article>
-              ))}
-            </div>
+                </div>
+              </article>
+            ))}
+          </div>
 
-            {updateStatusMutation.isError && (
-              <p className="mt-4 text-sm text-destructive">
-                {extractMessage(updateStatusMutation.error, 'No pudimos actualizar la reserva.')}
-              </p>
-            )}
-          </section>
+          {updateStatusMutation.isError && (
+            <p className="mt-4 text-sm text-destructive">
+              {extractMessage(updateStatusMutation.error, 'No pudimos actualizar la reserva.')}
+            </p>
+          )}
         </section>
-
-        <aside className="space-y-6 xl:sticky xl:top-24 h-fit self-start">
-          <section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
-            <h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
-              Lectura rápida
-            </h2>
-            <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
-              <div className="rounded-2xl border border-border/70 bg-background p-4">
-                <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Total</p>
-                <p className="mt-2 text-2xl font-semibold">{dashboardStats.total}</p>
-              </div>
-              <div className="rounded-2xl border border-border/70 bg-background p-4">
-                <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Hoy</p>
-                <p className="mt-2 text-2xl font-semibold">{dashboardStats.today}</p>
-              </div>
-              <div className="rounded-2xl border border-border/70 bg-background p-4">
-                <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
-                  Confirmadas
-                </p>
-                <p className="mt-2 text-2xl font-semibold">{dashboardStats.confirmed}</p>
-              </div>
-              <div className="rounded-2xl border border-border/70 bg-background p-4">
-                <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
-                  Cumplidas
-                </p>
-                <p className="mt-2 text-2xl font-semibold">{dashboardStats.completed}</p>
-              </div>
-            </div>
-          </section>
-        </aside>
       </div>
 
       {bookingToCancel && (
diff --git a/apps/frontend/src/features/public-booking/public-booking-page.tsx b/apps/frontend/src/features/public-booking/public-booking-page.tsx
index 53830cb..9f35935 100644
--- a/apps/frontend/src/features/public-booking/public-booking-page.tsx
+++ b/apps/frontend/src/features/public-booking/public-booking-page.tsx
@@ -1,3 +1,4 @@
+import AvailabilityHeatMap from '@/components/ui/availability-heatmap';
 import { Button } from '@/components/ui/button';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
@@ -645,60 +646,11 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
                   </p>
                 )}
 
-              <div className="space-y-4">
-                {visibleCourts.map((court) => (
-                  <article
-                    key={court.courtId}
-                    className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm"
-                  >
-                    <div className="mb-4 flex items-start justify-between gap-3">
-                      <div>
-                        <p className="text-sm font-semibold text-foreground sm:text-base">
-                          {court.courtName}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {court.sport.name} · Turnos de {court.slotDurationMinutes} min
-                        </p>
-                      </div>
-                      <span className="rounded-full border border-border/70 bg-card px-3 py-1 text-[11px] font-medium text-muted-foreground">
-                        {court.availableSlots.length} horarios
-                      </span>
-                    </div>
-
-                    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
-                      {court.availableSlots.map((slot) => {
-                        const isSelected =
-                          selectedSlot?.courtId === court.courtId &&
-                          selectedSlot.startTime === slot.startTime;
-
-                        return (
-                          <button
-                            key={`${court.courtId}-${slot.startTime}`}
-                            type="button"
-                            onClick={() => {
-                              setSelectedSlot({
-                                courtId: court.courtId,
-                                courtName: court.courtName,
-                                sportId: court.sport.id,
-                                sportName: court.sport.name,
-                                startTime: slot.startTime,
-                                endTime: slot.endTime,
-                              });
-                            }}
-                            className={`h-11 rounded-xl border text-sm font-medium transition-all ${
-                              isSelected
-                                ? 'border-primary bg-primary text-primary-foreground shadow-sm'
-                                : 'border-border/70 bg-card hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
-                            }`}
-                          >
-                            {slot.startTime}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </article>
-                ))}
-              </div>
+              <AvailabilityHeatMap
+                courts={visibleCourts}
+                selectedSlot={selectedSlot}
+                onSelectSlot={setSelectedSlot}
+              />
             </section>
           </section>