diff --git a/src/components/StepProgress.module.css b/src/components/StepProgress.module.css
new file mode 100644
index 0000000..519886c
--- /dev/null
+++ b/src/components/StepProgress.module.css
@@ -0,0 +1,35 @@
+.steps {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-lg);
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-lg);
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  opacity: 0.4;
+  transition: opacity 0.3s ease;
+}
+
+.step.active {
+  opacity: 1;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-gold);
+}
+
+.label {
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--color-charcoal);
+}
diff --git a/src/components/StepProgress.test.tsx b/src/components/StepProgress.test.tsx
new file mode 100644
index 0000000..ca1726a
--- /dev/null
+++ b/src/components/StepProgress.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import StepProgress from './StepProgress'
+
+describe('StepProgress', () => {
+  it('marks steps up to and including the current one as active', () => {
+    render(<StepProgress currentStep="slot" />)
+    const items = screen.getAllByRole('listitem')
+    expect(items[0].className).toMatch(/active/) // Service
+    expect(items[1].className).toMatch(/active/) // Date & Time (slot maps here)
+    expect(items[2].className).not.toMatch(/active/) // Contact
+    expect(items[3].className).not.toMatch(/active/) // Confirmed
+  })
+
+  it('marks all steps active when confirmed', () => {
+    render(<StepProgress currentStep="confirmed" />)
+    const items = screen.getAllByRole('listitem')
+    items.forEach((item) => expect(item.className).toMatch(/active/))
+  })
+
+  it('marks only the first step active when on the service step', () => {
+    render(<StepProgress currentStep="service" />)
+    const items = screen.getAllByRole('listitem')
+    expect(items[0].className).toMatch(/active/)
+    expect(items[1].className).not.toMatch(/active/)
+  })
+})
diff --git a/src/components/StepProgress.tsx b/src/components/StepProgress.tsx
new file mode 100644
index 0000000..ef9a145
--- /dev/null
+++ b/src/components/StepProgress.tsx
@@ -0,0 +1,35 @@
+import type { BookingStep } from '../hooks/useBooking'
+import styles from './StepProgress.module.css'
+
+const STEPS = [
+  { key: 'service', label: 'Service' },
+  { key: 'date', label: 'Date & Time' },
+  { key: 'contact', label: 'Contact' },
+  { key: 'confirmed', label: 'Confirmed' },
+] as const
+
+interface StepProgressProps {
+  currentStep: BookingStep
+}
+
+function stepIndex(step: BookingStep): number {
+  if (step === 'slot') return 1
+  return STEPS.findIndex((s) => s.key === step)
+}
+
+function StepProgress({ currentStep }: StepProgressProps) {
+  const activeIndex = stepIndex(currentStep)
+
+  return (
+    <ol className={styles.steps}>
+      {STEPS.map((step, index) => (
+        <li key={step.key} className={`${styles.step} ${index <= activeIndex ? styles.active : ''}`}>
+          <span className={styles.dot} />
+          <span className={styles.label}>{step.label}</span>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+export default StepProgress
diff --git a/src/pages/Book.test.tsx b/src/pages/Book.test.tsx
index 67bd182..412bb63 100644
--- a/src/pages/Book.test.tsx
+++ b/src/pages/Book.test.tsx
@@ -38,7 +38,7 @@ describe('Book page', () => {
     await userEvent.type(screen.getByLabelText(/^phone$/i), '5551234567')
     await userEvent.click(screen.getByRole('button', { name: /confirm/i }))
 
-    expect(screen.getByText(/you're booked/i)).toBeInTheDocument()
+    expect(screen.getByText(/mira will see you then/i)).toBeInTheDocument()
   })
 
   it('shows a friendly empty state with the next available date when a chosen date has none', async () => {
diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
index 8312d0a..ecf18d0 100644
--- a/src/pages/Book.tsx
+++ b/src/pages/Book.tsx
@@ -1,7 +1,9 @@
 import { useLocation } from 'react-router-dom'
 import { useMemo, useState } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
 import useBooking from '../hooks/useBooking'
 import ServiceCard from '../components/ServiceCard'
+import StepProgress from '../components/StepProgress'
 import { services } from '../data/services'
 import { getSlotsForDate, getNextAvailableDate } from '../data/availability'
 import styles from './Book.module.css'
@@ -11,6 +13,7 @@ function Book() {
   const preselectedServiceId = (location.state as { serviceId?: string } | null)?.serviceId
   const booking = useBooking(preselectedServiceId)
   const [dateInput, setDateInput] = useState('')
+  const prefersReducedMotion = useReducedMotion()
 
   const slots = useMemo(() => (dateInput ? getSlotsForDate(dateInput) : []), [dateInput])
   const availableSlots = slots.filter((s) => s.available)
@@ -21,120 +24,126 @@ function Book() {
 
   const selectedService = services.find((s) => s.id === booking.state.serviceId)
 
-  if (booking.state.step === 'confirmed') {
-    return (
-      <div className={styles.page}>
-        <h1>You're booked!</h1>
-        <p>
-          {selectedService?.name} on {booking.state.date} at {booking.state.slot?.time}.
-          Mira will see you then.
-        </p>
-      </div>
-    )
-  }
-
   return (
     <div className={styles.page}>
       <h1>Book an Appointment</h1>
+      <StepProgress currentStep={booking.state.step} />
 
-      {booking.state.step === 'service' && (
-        <div className={styles.services}>
-          {services.map((service) => (
-            <ServiceCard key={service.id} service={service} onSelect={booking.selectService} />
-          ))}
-        </div>
-      )}
-
-      {(booking.state.step === 'date' || booking.state.step === 'slot') && (
-        <>
-          <div className={styles.field}>
-            <label htmlFor="booking-date">Choose a date</label>
-            <input
-              id="booking-date"
-              type="date"
-              value={dateInput}
-              min={new Date().toISOString().slice(0, 10)}
-              onChange={(e) => {
-                setDateInput(e.target.value)
-                booking.selectDate(e.target.value)
-              }}
-            />
-          </div>
-
-          {dateInput && availableSlots.length === 0 && (
-            <div>
-              <p>No times available on this date.</p>
-              {nextAvailable && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    setDateInput(nextAvailable)
-                    booking.selectDate(nextAvailable)
-                  }}
-                >
-                  Try {nextAvailable} instead
-                </button>
-              )}
-            </div>
+      <AnimatePresence>
+        <motion.div
+          key={booking.state.step}
+          initial={{ opacity: 0, x: 12 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -12 }}
+          transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.25 }}
+        >
+          {booking.state.step === 'confirmed' && (
+            <p>
+              {selectedService?.name} on {booking.state.date} at {booking.state.slot?.time}.
+              Mira will see you then.
+            </p>
           )}
 
-          {availableSlots.length > 0 && (
-            <div className={styles.slots}>
-              {availableSlots.map((slot) => (
-                <button key={slot.time} type="button" onClick={() => booking.selectSlot(slot)}>
-                  {slot.time}
-                </button>
+          {booking.state.step === 'service' && (
+            <div className={styles.services}>
+              {services.map((service) => (
+                <ServiceCard key={service.id} service={service} onSelect={booking.selectService} />
               ))}
             </div>
           )}
-        </>
-      )}
 
-      {booking.state.step === 'contact' && (
-        <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            booking.submit()
-          }}
-        >
-          <div className={styles.field}>
-            <label htmlFor="contact-name">Name</label>
-            <input
-              id="contact-name"
-              value={booking.state.contact.name}
-              onChange={(e) => booking.updateContact({ name: e.target.value })}
-            />
-            {booking.errors.name && <span className={styles.error}>{booking.errors.name}</span>}
-          </div>
-          <div className={styles.field}>
-            <label htmlFor="contact-email">Email</label>
-            <input
-              id="contact-email"
-              value={booking.state.contact.email}
-              onChange={(e) => booking.updateContact({ email: e.target.value })}
-            />
-            {booking.errors.email && <span className={styles.error}>{booking.errors.email}</span>}
-          </div>
-          <div className={styles.field}>
-            <label htmlFor="contact-phone">Phone</label>
-            <input
-              id="contact-phone"
-              value={booking.state.contact.phone}
-              onChange={(e) => booking.updateContact({ phone: e.target.value })}
-            />
-            {booking.errors.phone && <span className={styles.error}>{booking.errors.phone}</span>}
-          </div>
-          <div className={styles.field}>
-            <label htmlFor="contact-notes">Notes</label>
-            <textarea
-              id="contact-notes"
-              value={booking.state.contact.notes}
-              onChange={(e) => booking.updateContact({ notes: e.target.value })}
-            />
-          </div>
-          <button type="submit">Confirm Booking</button>
-        </form>
-      )}
+          {(booking.state.step === 'date' || booking.state.step === 'slot') && (
+            <>
+              <div className={styles.field}>
+                <label htmlFor="booking-date">Choose a date</label>
+                <input
+                  id="booking-date"
+                  type="date"
+                  value={dateInput}
+                  min={new Date().toISOString().slice(0, 10)}
+                  onChange={(e) => {
+                    setDateInput(e.target.value)
+                    booking.selectDate(e.target.value)
+                  }}
+                />
+              </div>
+
+              {dateInput && availableSlots.length === 0 && (
+                <div>
+                  <p>No times available on this date.</p>
+                  {nextAvailable && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setDateInput(nextAvailable)
+                        booking.selectDate(nextAvailable)
+                      }}
+                    >
+                      Try {nextAvailable} instead
+                    </button>
+                  )}
+                </div>
+              )}
+
+              {availableSlots.length > 0 && (
+                <div className={styles.slots}>
+                  {availableSlots.map((slot) => (
+                    <button key={slot.time} type="button" onClick={() => booking.selectSlot(slot)}>
+                      {slot.time}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+
+          {booking.state.step === 'contact' && (
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                booking.submit()
+              }}
+            >
+              <div className={styles.field}>
+                <label htmlFor="contact-name">Name</label>
+                <input
+                  id="contact-name"
+                  value={booking.state.contact.name}
+                  onChange={(e) => booking.updateContact({ name: e.target.value })}
+                />
+                {booking.errors.name && <span className={styles.error}>{booking.errors.name}</span>}
+              </div>
+              <div className={styles.field}>
+                <label htmlFor="contact-email">Email</label>
+                <input
+                  id="contact-email"
+                  value={booking.state.contact.email}
+                  onChange={(e) => booking.updateContact({ email: e.target.value })}
+                />
+                {booking.errors.email && <span className={styles.error}>{booking.errors.email}</span>}
+              </div>
+              <div className={styles.field}>
+                <label htmlFor="contact-phone">Phone</label>
+                <input
+                  id="contact-phone"
+                  value={booking.state.contact.phone}
+                  onChange={(e) => booking.updateContact({ phone: e.target.value })}
+                />
+                {booking.errors.phone && <span className={styles.error}>{booking.errors.phone}</span>}
+              </div>
+              <div className={styles.field}>
+                <label htmlFor="contact-notes">Notes</label>
+                <textarea
+                  id="contact-notes"
+                  value={booking.state.contact.notes}
+                  onChange={(e) => booking.updateContact({ notes: e.target.value })}
+                />
+              </div>
+              <button type="submit">Confirm Booking</button>
+            </form>
+          )}
+        </motion.div>
+      </AnimatePresence>
     </div>
   )
 }