Open app/templates/dashboard.html and replace just the <section x-show="tab === 'overview'"> block with this:

  <!-- Overview Tab -->
  <section x-show="tab === 'overview'" class="space-y-4">
    <h1 class="text-xl font-semibold mb-2">Retention Overview</h1>

    {% if latest %}
      <div class="grid md:grid-cols-3 gap-4">
        <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
          <p class="text-xs uppercase tracking-wide text-zinc-400">Contact Rate</p>
          <p class="mt-2 text-2xl font-semibold">
            {{ "%.1f" | format(latest.contact_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-zinc-500">
            From {{ latest.total_contacts }} contacts
          </p>
        </div>

        <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
          <p class="text-xs uppercase tracking-wide text-zinc-400">Reply Rate</p>
          <p class="mt-2 text-2xl font-semibold">
            {{ "%.1f" | format(latest.reply_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-zinc-500">
            Replies: {{ latest.total_replies }}
          </p>
        </div>

        <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
          <p class="text-xs uppercase tracking-wide text-zinc-400">Retention Pen</p>
          <p class="mt-2 text-2xl font-semibold">
            {{ "%.1f" | format(latest.retention_pen_pct or 0) }}%
          </p>
          <p class="mt-1 text-xs text-zinc-500">
            Drop-off total: {{ latest.drop_off_total }}
          </p>
        </div>
      </div>

      <p class="mt-4 text-xs text-zinc-500">
        Latest month: {{ latest.month_key }}
      </p>

      <!-- 6-month trend chart -->
      <div class="mt-6 bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-sm font-semibold text-zinc-100">6-Month KPI Trend</h2>
          <p class="text-[11px] text-zinc-500">Contact, reply, and retention pen %</p>
        </div>
        <canvas id="trend-chart" class="w-full h-48"></canvas>
      </div>

      <!-- Retention Pen detail -->
      <div class="mt-6">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-sm font-semibold text-zinc-100">Retention Pen – Next 60 Days</h2>
          <p class="text-[11px] text-zinc-500">Sample of customers in final payments window</p>
        </div>
        <div
          id="retention-pen-container"
          class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4 text-sm text-zinc-200"
        >
          Loading…
        </div>
      </div>
    {% else %}
      <p class="text-sm text-zinc-400">
        No data yet – upload your first VWFS snapshot to vwfs_snapshot.
      </p>
    {% endif %}
  </section>