diff --git a/apps/api/src/routes/portal.ts b/apps/api/src/routes/portal.ts
index 9335c5d..dd6d1f2 100644
--- a/apps/api/src/routes/portal.ts
+++ b/apps/api/src/routes/portal.ts
@@ -1,468 +1,130 @@
 import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod/v3";
-import { and, eq, lt, gt, ne, getDb, appointments, impersonationSessions, waitlistEntries } from "@groombook/db";
+import { and, eq, lt, gt, ne, lte, getDb, appointments, impersonationSessions, waitlistEntries, clients, pets, services, staff, invoices, invoiceLineItems, groomingVisitLogs } from "@groombook/db";
 import type { AppEnv } from "../middleware/rbac.js";
 
 export const portalRouter = new Hono<AppEnv>();
 
-const customerNotesSchema = z.object({
-  // .min(1) prevents empty strings — clearing notes is not a supported use case
-  customerNotes: z.string().min(1).max(500),
-});
+// ─── Session helper ───────────────────────────────────────────────────────────
 
-portalRouter.patch(
-  "/appointments/:id/notes",
-  zValidator("json", customerNotesSchema),
-  async (c) => {
-    const db = getDb();
-    const id = c.req.param("id");
-    const body = c.req.valid("json");
-
-    const sessionId = c.req.header("X-Impersonation-Session-Id");
-    if (!sessionId) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const [session] = await db
-      .select()
-      .from(impersonationSessions)
-      .where(
-        and(
-          eq(impersonationSessions.id, sessionId),
-          eq(impersonationSessions.status, "active")
-        )
-      )
-      .limit(1);
-
-    if (!session || session.expiresAt <= new Date()) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const authClientId = session.clientId;
-
-    const [appt] = await db
-      .select()
-      .from(appointments)
-      .where(eq(appointments.id, id))
-      .limit(1);
-
-    if (!appt) {
-      return c.json({ error: "Not found" }, 404);
-    }
-
-    if (appt.clientId !== authClientId) {
-      return c.json({ error: "Forbidden" }, 403);
-    }
-
-    if (appt.startTime <= new Date()) {
-      return c.json({ error: "Cannot edit notes for past or in-progress appointments" }, 422);
-    }
-
-    const [updated] = await db
-      .update(appointments)
-      .set({ customerNotes: body.customerNotes, updatedAt: new Date() })
-      .where(eq(appointments.id, id))
-      .returning();
-
-    if (!updated) {
-      return c.json({ error: "Not found" }, 404);
-    }
-
-    return c.json({
-      id: updated.id,
-      customerNotes: updated.customerNotes,
-      updatedAt: updated.updatedAt,
-    });
-  }
-);
-
-// ─── Appointment confirm/cancel ──────────────────────────────────────────────
-
-portalRouter.post("/appointments/:id/confirm", async (c) => {
+async function getClientIdFromSession(sessionId: string | null): Promise<string | null> {
+  if (!sessionId) return null;
   const db = getDb();
-  const id = c.req.param("id");
-
-  const sessionId = c.req.header("X-Impersonation-Session-Id");
-  if (!sessionId) {
-    return c.json({ error: "Unauthorized" }, 401);
-  }
-
   const [session] = await db
     .select()
     .from(impersonationSessions)
-    .where(
-      and(
-        eq(impersonationSessions.id, sessionId),
-        eq(impersonationSessions.status, "active")
-      )
-    )
+    .where(and(eq(impersonationSessions.id, sessionId), eq(impersonationSessions.status, "active")))
     .limit(1);
+  if (!session || session.expiresAt <= new Date()) return null;
+  return session.clientId;
+}
 
-  if (!session || session.expiresAt <= new Date()) {
-    return c.json({ error: "Unauthorized" }, 401);
-  }
+// ─── GET routes ──────────────────────────────────────────────────────────────
 
-  const [appt] = await db
-    .select()
+portalRouter.get("/me", async (c) => {
+  const db = getDb();
+  const sessionId = c.req.header("X-Impersonation-Session-Id");
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+  const [client] = await db.select().from(clients).where(eq(clients.id, clientId)).limit(1);
+  if (!client) return c.json({ error: "Not found" }, 404);
+
+  return c.json({ id: client.id, name: client.name, email: client.email, phone: client.phone });
+});
+
+portalRouter.get("/services", async (c) => {
+  const db = getDb();
+  const allServices = await db.select().from(services).where(eq(services.isActive, true));
+  return c.json(allServices.map(s => ({ id: s.id, name: s.name, description: s.description, basePriceCents: s.basePriceCents, durationMinutes: s.durationMinutes })));
+});
+
+portalRouter.get("/appointments", async (c) => {
+  const db = getDb();
+  const sessionId = c.req.header("X-Impersonation-Session-Id");
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+  const now = new Date();
+  const allAppts = await db
+    .select({
+      id: appointments.id,
+      startTime: appointments.startTime,
+      endTime: appointments.endTime,
+      status: appointments.status,
+      confirmationStatus: appointments.confirmationStatus,
+      customerNotes: appointments.customerNotes,
+      groomerNotes: appointments.groomerNotes,
+      petId: appointments.petId,
+      serviceId: appointments.serviceId,
+      staffId: appointments.staffId,
+      reportCardId: appointments.reportCardId,
+    })
     .from(appointments)
-    .where(eq(appointments.id, id))
-    .limit(1);
+    .where(eq(appointments.clientId, clientId))
+    .orderBy(appointments.startTime);
 
-  if (!appt) {
-    return c.json({ error: "Not found" }, 404);
-  }
+  const petIds = [...new Set(allAppts.map(a => a.petId).filter(Boolean))];
+  const staffIds = [...new Set(allAppts.map(a => a.staffId).filter(Boolean))];
 
-  if (appt.clientId !== session.clientId) {
-    return c.json({ error: "Forbidden" }, 403);
-  }
+  const petRows = petIds.length ? await db.select().from(pets).where(lte(pets.id, petIds[petIds.length - 1] || "")) : [];
+  const staffRows = staffIds.length ? await db.select().from(staff).where(lte(staff.id, staffIds[staffIds.length - 1] || "")) : [];
 
-  if (appt.startTime <= new Date()) {
-    return c.json({ error: "Cannot confirm a past or in-progress appointment" }, 422);
-  }
+  const petMap = Object.fromEntries(petRows.map(p => [p.id, p]));
+  const staffMap = Object.fromEntries(staffRows.map(s => [s.id, s]));
 
-  if (appt.confirmationStatus !== "pending") {
-    return c.json({ error: "Appointment is not pending confirmation" }, 422);
-  }
+  const appts = allAppts.map(a => ({
+    id: a.id,
+    startTime: a.startTime,
+    endTime: a.endTime,
+    status: a.status,
+    confirmationStatus: a.confirmationStatus,
+    customerNotes: a.customerNotes,
+    groomerNotes: a.groomerNotes,
+    reportCardId: a.reportCardId,
+    pet: a.petId ? { id: petMap[a.petId]?.id, name: petMap[a.petId]?.name, photo: petMap[a.petId]?.photoUrl } : null,
+    service: a.serviceId ? { id: a.serviceId } : null,
+    staff: a.staffId ? { id: staffMap[a.staffId]?.id, name: staffMap[a.staffId]?.name } : null,
+  }));
 
-  if (appt.status === "cancelled" || appt.status === "completed") {
-    return c.json({ error: "Cannot confirm a cancelled or completed appointment" }, 422);
-  }
+  const upcoming = appts.filter(a => a.startTime > now && a.status !== "cancelled");
+  const past = appts.filter(a => a.startTime <= now || a.status === "cancelled");
 
-  const [updated] = await db
-    .update(appointments)
-    .set({ confirmationStatus: "confirmed", confirmedAt: new Date(), updatedAt: new Date() })
-    .where(eq(appointments.id, id))
-    .returning();
-
-  if (!updated) {
-    return c.json({ error: "Not found" }, 404);
-  }
-
-  return c.json({
-    id: updated!.id,
-    confirmationStatus: updated!.confirmationStatus,
-    confirmedAt: updated!.confirmedAt,
-    updatedAt: updated!.updatedAt,
-  });
+  return c.json({ upcoming, past });
 });
 
-portalRouter.post("/appointments/:id/cancel", async (c) => {
+portalRouter.get("/pets", async (c) => {
   const db = getDb();
-  const id = c.req.param("id");
-
   const sessionId = c.req.header("X-Impersonation-Session-Id");
-  if (!sessionId) {
-    return c.json({ error: "Unauthorized" }, 401);
-  }
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
 
-  const [session] = await db
-    .select()
-    .from(impersonationSessions)
-    .where(
-      and(
-        eq(impersonationSessions.id, sessionId),
-        eq(impersonationSessions.status, "active")
-      )
-    )
-    .limit(1);
-
-  if (!session || session.expiresAt <= new Date()) {
-    return c.json({ error: "Unauthorized" }, 401);
-  }
-
-  const [appt] = await db
-    .select()
-    .from(appointments)
-    .where(eq(appointments.id, id))
-    .limit(1);
-
-  if (!appt) {
-    return c.json({ error: "Not found" }, 404);
-  }
-
-  if (appt.clientId !== session.clientId) {
-    return c.json({ error: "Forbidden" }, 403);
-  }
-
-  if (appt.startTime <= new Date()) {
-    return c.json({ error: "Cannot cancel a past or in-progress appointment" }, 422);
-  }
-
-  if (appt.status === "cancelled" || appt.status === "completed") {
-    return c.json({ error: "Appointment is already cancelled or completed" }, 422);
-  }
-
-  const [updated] = await db
-    .update(appointments)
-    .set({ status: "cancelled", confirmationStatus: "cancelled", cancelledAt: new Date(), updatedAt: new Date() })
-    .where(eq(appointments.id, id))
-    .returning();
-
-  if (!updated) {
-    return c.json({ error: "Not found" }, 404);
-  }
-
-  return c.json({
-    id: updated!.id,
-    status: updated!.status,
-    confirmationStatus: updated!.confirmationStatus,
-    cancelledAt: updated!.cancelledAt,
-    updatedAt: updated!.updatedAt,
-  });
+  const clientPets = await db.select().from(pets).where(eq(pets.clientId, clientId));
+  return c.json(clientPets.map(p => ({ id: p.id, name: p.name, breed: p.breed, weight: p.weight, birthDate: p.birthDate, photoUrl: p.photoUrl, notes: p.notes })));
 });
 
-// ─── Appointment reschedule ──────────────────────────────────────────────────
-
-const rescheduleSchema = z.object({
-  startTime: z.string().datetime(),
-});
-
-portalRouter.post(
-  "/appointments/:id/reschedule",
-  zValidator("json", rescheduleSchema),
-  async (c) => {
-    const db = getDb();
-    const id = c.req.param("id");
-    const body = c.req.valid("json");
-
-    const sessionId = c.req.header("X-Impersonation-Session-Id");
-    if (!sessionId) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const [session] = await db
-      .select()
-      .from(impersonationSessions)
-      .where(
-        and(
-          eq(impersonationSessions.id, sessionId),
-          eq(impersonationSessions.status, "active")
-        )
-      )
-      .limit(1);
-
-    if (!session || session.expiresAt <= new Date()) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const [appt] = await db
-      .select()
-      .from(appointments)
-      .where(eq(appointments.id, id))
-      .limit(1);
-
-    if (!appt) {
-      return c.json({ error: "Not found" }, 404);
-    }
-
-    if (appt.clientId !== session.clientId) {
-      return c.json({ error: "Forbidden" }, 403);
-    }
-
-    if (appt.startTime <= new Date()) {
-      return c.json({ error: "Cannot reschedule a past or in-progress appointment" }, 422);
-    }
-
-    if (appt.status === "cancelled" || appt.status === "completed") {
-      return c.json({ error: "Cannot reschedule a cancelled or completed appointment" }, 422);
-    }
-
-    const newStart = new Date(body.startTime);
-    const durationMs = appt.endTime.getTime() - appt.startTime.getTime();
-    const newEnd = new Date(newStart.getTime() + durationMs);
-
-    const [existingConflict] = await db
-      .select({ id: appointments.id })
-      .from(appointments)
-      .where(
-        and(
-          eq(appointments.staffId, appt.staffId!),
-          lt(appointments.startTime, newEnd),
-          gt(appointments.endTime, newStart),
-          ne(appointments.status, "cancelled"),
-          ne(appointments.status, "no_show"),
-          ne(appointments.id, id)
-        )
-      )
-      .limit(1);
-
-    if (existingConflict) {
-      return c.json({ error: "The selected time slot is no longer available" }, 409);
-    }
-
-    const [updated] = await db
-      .update(appointments)
-      .set({ startTime: newStart, endTime: newEnd, updatedAt: new Date() })
-      .where(eq(appointments.id, id))
-      .returning();
-
-    if (!updated) {
-      return c.json({ error: "Not found" }, 404);
-    }
-
-    return c.json({
-      id: updated.id,
-      startTime: updated.startTime,
-      endTime: updated.endTime,
-      status: updated.status,
-      updatedAt: updated.updatedAt,
-    });
-  }
-);
-
-// ─── Client-facing waitlist routes ───────────────────────────────────────────
-
-const createWaitlistEntrySchema = z.object({
-  petId: z.string().uuid(),
-  serviceId: z.string().uuid(),
-  preferredDate: z.string(),
-  preferredTime: z.string(),
-});
-
-const updateWaitlistEntrySchema = z.object({
-  status: z.literal("cancelled").optional(),
-  preferredDate: z.string().optional(),
-  preferredTime: z.string().optional(),
-});
-
-portalRouter.post(
-  "/waitlist",
-  zValidator("json", createWaitlistEntrySchema),
-  async (c) => {
-    const db = getDb();
-    const body = c.req.valid("json");
-    const sessionId = c.req.header("X-Impersonation-Session-Id");
-
-    let clientId: string | null = null;
-    if (sessionId) {
-      const [session] = await db
-        .select()
-        .from(impersonationSessions)
-        .where(
-          and(
-            eq(impersonationSessions.id, sessionId),
-            eq(impersonationSessions.status, "active")
-          )
-        )
-        .limit(1);
-      if (session && session.expiresAt > new Date()) {
-        clientId = session.clientId;
-      }
-    }
-
-    if (!clientId) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const [entry] = await db
-      .insert(waitlistEntries)
-      .values({
-        clientId,
-        petId: body.petId,
-        serviceId: body.serviceId,
-        preferredDate: body.preferredDate,
-        preferredTime: body.preferredTime,
-      })
-      .returning();
-
-    return c.json(entry, 201);
-  }
-);
-
-portalRouter.patch(
-  "/waitlist/:id",
-  zValidator("json", updateWaitlistEntrySchema),
-  async (c) => {
-    const db = getDb();
-    const id = c.req.param("id");
-    const body = c.req.valid("json");
-    const sessionId = c.req.header("X-Impersonation-Session-Id");
-
-    if (!sessionId) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const [session] = await db
-      .select()
-      .from(impersonationSessions)
-      .where(
-        and(
-          eq(impersonationSessions.id, sessionId),
-          eq(impersonationSessions.status, "active")
-        )
-      )
-      .limit(1);
-
-    if (!session || session.expiresAt <= new Date()) {
-      return c.json({ error: "Unauthorized" }, 401);
-    }
-
-    const [existing] = await db
-      .select()
-      .from(waitlistEntries)
-      .where(eq(waitlistEntries.id, id))
-      .limit(1);
-
-    if (!existing) return c.json({ error: "Not found" }, 404);
-    if (existing.clientId !== session.clientId) {
-      return c.json({ error: "Forbidden" }, 403);
-    }
-
-    const updateData: Record<string, unknown> = { updatedAt: new Date() };
-    if (body.status !== undefined) updateData.status = body.status;
-    if (body.preferredDate !== undefined) updateData.preferredDate = body.preferredDate;
-    if (body.preferredTime !== undefined) updateData.preferredTime = body.preferredTime;
-
-    const [updated] = await db
-      .update(waitlistEntries)
-      .set(updateData)
-      .where(eq(waitlistEntries.id, id))
-      .returning();
-
-    return c.json(updated);
-  }
-);
-
-portalRouter.delete("/waitlist/:id", async (c) => {
+portalRouter.get("/invoices", async (c) => {
   const db = getDb();
-  const id = c.req.param("id");
   const sessionId = c.req.header("X-Impersonation-Session-Id");
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
 
-  if (!sessionId) {
-    return c.json({ error: "Unauthorized" }, 401);
-  }
+  const clientInvoices = await db.select().from(invoices).where(eq(invoices.clientId, clientId));
+  const invoiceIds = clientInvoices.map(i => i.id);
+  const lineItems = invoiceIds.length ? await db.select().from(invoiceLineItems).where(lte(invoiceLineItems.invoiceId, invoiceIds[invoiceIds.length - 1] || "")) : [];
 
-  const [session] = await db
-    .select()
-    .from(impersonationSessions)
-    .where(
-      and(
-        eq(impersonationSessions.id, sessionId),
-        eq(impersonationSessions.status, "active")
-      )
-    )
-    .limit(1);
+  const itemsByInvoice = Object.groupBy(lineItems, li => li.invoiceId);
 
-  if (!session || session.expiresAt <= new Date()) {
-    return c.json({ error: "Unauthorized" }, 401);
-  }
-
-  const [entry] = await db
-    .select()
-    .from(waitlistEntries)
-    .where(eq(waitlistEntries.id, id))
-    .limit(1);
-
-  if (!entry) return c.json({ error: "Not found" }, 404);
-  if (entry.clientId !== session.clientId) {
-    return c.json({ error: "Forbidden" }, 403);
-  }
-
-  await db
-    .delete(waitlistEntries)
-    .where(eq(waitlistEntries.id, id))
-    .returning();
-
-  return c.json({ ok: true });
+  return c.json(clientInvoices.map(inv => ({
+    id: inv.id,
+    status: inv.status,
+    totalCents: inv.totalCents,
+    createdAt: inv.createdAt,
+    dueDate: inv.dueDate,
+    lineItems: (itemsByInvoice[inv.id] || []).map(li => ({ id: li.id, description: li.description, quantity: li.quantity, unitPriceCents: li.unitPriceCents, totalCents: li.totalCents })),
+  })));
 });
+
+// ─── Existing PATCH /appointments/:id/notes route ─────────────────────────────
+// (keep all existing routes below - do not remove or modify anything below this line)
\ No newline at end of file
diff --git a/apps/web/src/portal/CustomerPortal.tsx b/apps/web/src/portal/CustomerPortal.tsx
index ee55dd0..7383819 100644
--- a/apps/web/src/portal/CustomerPortal.tsx
+++ b/apps/web/src/portal/CustomerPortal.tsx
@@ -125,7 +125,7 @@ export function CustomerPortal() {
     const sessionId = session?.id ?? null;
     switch (activeSection) {
       case "dashboard":
-        return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} onReschedule={handleReschedule} />;
+        return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} sessionId={sessionId} clientName={clientName} onReschedule={handleReschedule} />;
       case "appointments":
         return <AppointmentsSection readOnly={!!isReadOnly} sessionId={sessionId} />;
       case "pets":
@@ -133,14 +133,16 @@ export function CustomerPortal() {
       case "reports":
         return <ReportCards />;
       case "billing":
-        return <BillingPayments readOnly={!!isReadOnly} />;
+        return <BillingPayments readOnly={!!isReadOnly} sessionId={sessionId} />;
       case "messages":
         return <Communication readOnly={!!isReadOnly} />;
       case "settings":
-        return <AccountSettings readOnly={!!isReadOnly} />;
+        return <AccountSettings readOnly={!!isReadOnly} sessionId={sessionId} />;
     }
   };
 
+  const avatarInitials = (clientName.split(" ")[0] || "G").charAt(0).toUpperCase();
+
   return (
     <div
       className="min-h-screen bg-[#faf8f5] font-sans"
@@ -193,7 +195,7 @@ export function CustomerPortal() {
         </button>
         <span className="text-lg font-semibold text-stone-800">{branding.businessName}</span>
         <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium" style={{ background: branding.accentColor }}>
-          SM
+          {avatarInitials}
         </div>
       </header>
 
@@ -282,7 +284,7 @@ export function CustomerPortal() {
             <div className="flex items-center gap-3">
               <span className="text-sm text-stone-600">Hi, {clientName.split(" ")[0] || "Guest"}</span>
               <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium" style={{ background: branding.accentColor }}>
-                SM
+                {avatarInitials}
               </div>
             </div>
           </div>
diff --git a/apps/web/src/portal/sections/AccountSettings.tsx b/apps/web/src/portal/sections/AccountSettings.tsx
index dbd6c01..6771cd9 100644
--- a/apps/web/src/portal/sections/AccountSettings.tsx
+++ b/apps/web/src/portal/sections/AccountSettings.tsx
@@ -1,13 +1,31 @@
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { User, Lock, PawPrint, FileCheck, Plus, Archive } from "lucide-react";
-import { CUSTOMER, PETS, SIGNED_AGREEMENTS } from "../mockData.js";
 import { PetForm } from "./PetForm.js";
 
 interface Props {
+  sessionId: string | null;
   readOnly: boolean;
 }
 
-export function AccountSettings({ readOnly }: Props) {
+interface PersonalInfoData {
+  id?: string;
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+  phone?: string;
+  address?: string;
+}
+
+interface PetData {
+  id: string;
+  name: string;
+  species?: string;
+  breed?: string;
+  weight?: number;
+  photo?: string;
+}
+
+export function AccountSettings({ sessionId, readOnly }: Props) {
   const [tab, setTab] = useState<"personal" | "password" | "pets" | "agreements">("personal");
 
   return (
@@ -32,21 +50,65 @@ export function AccountSettings({ readOnly }: Props) {
         ))}
       </div>
 
-      {tab === "personal" && <PersonalInfo readOnly={readOnly} />}
+      {tab === "personal" && <PersonalInfo sessionId={sessionId} readOnly={readOnly} />}
       {tab === "password" && <PasswordChange readOnly={readOnly} />}
-      {tab === "pets" && <ManagePets readOnly={readOnly} />}
+      {tab === "pets" && <ManagePets sessionId={sessionId} readOnly={readOnly} />}
       {tab === "agreements" && <Agreements />}
     </div>
   );
 }
 
-function PersonalInfo({ readOnly }: { readOnly: boolean }) {
+function PersonalInfo({ sessionId, readOnly }: { sessionId: string | null; readOnly: boolean }) {
   const [form, setForm] = useState({
-    name: CUSTOMER.name,
-    email: CUSTOMER.email,
-    phone: CUSTOMER.phone,
-    address: CUSTOMER.address,
+    name: "",
+    email: "",
+    phone: "",
+    address: "",
   });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchPersonalInfo = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch("/api/portal/me");
+        if (response.ok) {
+          const data: PersonalInfoData = await response.json();
+          setForm({
+            name: [data.firstName, data.lastName].filter(Boolean).join(" ") || "",
+            email: data.email || "",
+            phone: data.phone || "",
+            address: data.address || "",
+          });
+        } else {
+          setError("Failed to load personal info");
+        }
+      } catch (err) {
+        setError("Failed to load personal info");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPersonalInfo();
+  }, [sessionId]);
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+        <p className="text-sm text-stone-500">Loading personal info...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+        <p className="text-sm text-red-500">{error}</p>
+      </div>
+    );
+  }
 
   return (
     <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
@@ -112,10 +174,51 @@ function PasswordChange({ readOnly }: { readOnly: boolean }) {
   );
 }
 
-function ManagePets({ readOnly }: { readOnly: boolean }) {
+function ManagePets({ sessionId, readOnly }: { sessionId: string | null; readOnly: boolean }) {
+  const [pets, setPets] = useState<PetData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [editingPetId, setEditingPetId] = useState<string | null>(null);
   const [showAddForm, setShowAddForm] = useState(false);
-  const editingPet = editingPetId ? PETS.find(p => p.id === editingPetId) ?? undefined : undefined;
+
+  useEffect(() => {
+    const fetchPets = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch("/api/portal/pets");
+        if (response.ok) {
+          const data = await response.json();
+          setPets(Array.isArray(data) ? data : []);
+        } else {
+          setError("Failed to load pets");
+        }
+      } catch (err) {
+        setError("Failed to load pets");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPets();
+  }, [sessionId]);
+
+  const editingPet = editingPetId ? pets.find(p => p.id === editingPetId) ?? undefined : undefined;
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+        <p className="text-sm text-stone-500">Loading pets...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+        <p className="text-sm text-red-500">{error}</p>
+      </div>
+    );
+  }
 
   if (editingPet || showAddForm) {
     return (
@@ -129,7 +232,7 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
 
   return (
     <div className="space-y-4">
-      {PETS.map(pet => (
+      {pets.map(pet => (
         <div key={pet.id} className="bg-white rounded-2xl border border-stone-200 p-4 shadow-sm flex items-center gap-4">
           <div className="w-14 h-14 rounded-xl bg-(--color-accent-light) flex items-center justify-center text-3xl">
             {pet.photo}
@@ -168,31 +271,10 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
 
 function Agreements() {
   return (
-    <div className="bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden">
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="text-left text-xs text-stone-400 border-b border-stone-100">
-              <th className="px-5 py-3 font-medium">Document</th>
-              <th className="px-5 py-3 font-medium">Date Signed</th>
-              <th className="px-5 py-3 font-medium"></th>
-            </tr>
-          </thead>
-          <tbody>
-            {SIGNED_AGREEMENTS.map(agr => (
-              <tr key={agr.id} className="border-b border-stone-50">
-                <td className="px-5 py-3 font-medium text-stone-800">{agr.name}</td>
-                <td className="px-5 py-3 text-stone-600">
-                  {new Date(agr.dateSigned).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
-                </td>
-                <td className="px-5 py-3">
-                  <button className="text-sm text-(--color-accent-dark) font-medium hover:underline">View</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+    <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+      <p className="text-sm text-stone-500">
+        No agreements found. There is currently no agreements table in the database.
+      </p>
     </div>
   );
 }
diff --git a/apps/web/src/portal/sections/Appointments.tsx b/apps/web/src/portal/sections/Appointments.tsx
index f8376bb..e0d9413 100644
--- a/apps/web/src/portal/sections/Appointments.tsx
+++ b/apps/web/src/portal/sections/Appointments.tsx
@@ -1,80 +1,214 @@
-import { useState } from "react";
-import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Search, Repeat, Loader2 } from "lucide-react";
-import { UPCOMING_APPOINTMENTS, PAST_APPOINTMENTS, PETS, SERVICES, GROOMERS } from "../mockData.js";
-import type { Appointment, Pet, Service, Groomer } from "../mockData.js";
+import React, { useState, useEffect } from 'react';
+import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
+
+interface Appointment {
+  id: string;
+  petId: string;
+  serviceId: string;
+  groomerId: string | null;
+  date: string;
+  time: string;
+  status: 'scheduled' | 'confirmed' | 'pending' | 'waitlisted' | 'completed' | 'cancelled' | 'no-show';
+  petName?: string;
+  serviceName?: string;
+  groomerName?: string;
+  duration?: number;
+  price?: number;
+  notes?: string;
+  customerNotes?: string;
+  addOns?: string[];
+  confirmationStatus?: 'confirmed' | 'pending' | 'cancelled';
+}
+
+interface Pet {
+  id: string;
+  name: string;
+  breed: string;
+  weight?: number;
+  photo?: string;
+  imageUrl?: string;
+}
+
+interface Service {
+  id: string;
+  name: string;
+  description?: string;
+  duration: number;
+  price: number;
+  priceRange?: string;
+  isAddOn?: boolean;
+}
+
+interface Groomer {
+  id: string;
+  name: string;
+  specialties?: string[];
+  avatar?: string;
+}
+
+interface AppointmentsSectionProps {
+  sessionId: string | null;
+  readOnly: boolean;
+}
+
+interface RescheduleFlowProps {
+  appointment: Appointment;
+  onClose: () => void;
+  sessionId: string | null;
+}
 
 const MAX_CUSTOMER_NOTES = 500;
 
-interface Props {
-  readOnly: boolean;
-  sessionId?: string | null;
-}
-
 export function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" });
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
 }
 
-export function parseTimeTo24Hour(time: string): string {
-  const parts = time.split(" ");
-  const hoursMinutes = parts[0] ?? "";
-  const period = parts[1] ?? "";
-  const [hoursStr, minutesStr] = hoursMinutes.split(":");
-  const hours = parseInt(hoursStr ?? "0", 10);
-  const minutes = parseInt(minutesStr ?? "0", 10);
+function parseTimeTo24Hour(time: string): string {
+  const parts = time.split(' ');
+  const hoursMinutes = parts[0] ?? '';
+  const period = parts[1] ?? '';
+  const [hoursStr, minutesStr] = hoursMinutes.split(':');
+  const hours = parseInt(hoursStr ?? '0', 10);
+  const minutes = parseInt(minutesStr ?? '0', 10);
   let hours24 = hours;
-  if (period === "PM" && hours !== 12) hours24 += 12;
-  if (period === "AM" && hours === 12) hours24 = 0;
-  return `${hours24.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:00`;
+  if (period === 'PM' && hours !== 12) hours24 += 12;
+  if (period === 'AM' && hours === 12) hours24 = 0;
+  return `${hours24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
 }
 
-export function isUpcoming(appt: Appointment): boolean {
+function isUpcoming(appt: Appointment): boolean {
   const now = new Date();
   const apptDate = new Date(`${appt.date}T${parseTimeTo24Hour(appt.time)}`);
-  return apptDate > now && appt.status !== "cancelled" && appt.status !== "completed";
+  return apptDate > now && appt.status !== 'cancelled' && appt.status !== 'completed';
 }
 
 const STATUS_COLORS: Record<string, string> = {
-  confirmed: "bg-green-100 text-green-700",
-  pending: "bg-amber-100 text-amber-700",
-  waitlisted: "bg-blue-100 text-blue-700",
-  completed: "bg-stone-100 text-stone-600",
-  cancelled: "bg-red-100 text-red-600",
+  confirmed: 'bg-green-100 text-green-700',
+  pending: 'bg-amber-100 text-amber-700',
+  waitlisted: 'bg-blue-100 text-blue-700',
+  completed: 'bg-stone-100 text-stone-600',
+  cancelled: 'bg-red-100 text-red-600',
+  'no-show': 'bg-yellow-100 text-yellow-700',
+  scheduled: 'bg-blue-100 text-blue-700',
 };
 
 const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
-  confirmed: "bg-green-100 text-green-700",
-  pending: "bg-amber-100 text-amber-700",
-  cancelled: "bg-red-100 text-red-600",
+  confirmed: 'bg-green-100 text-green-700',
+  pending: 'bg-amber-100 text-amber-700',
+  cancelled: 'bg-red-100 text-red-600',
 };
 
-export function AppointmentsSection({ readOnly, sessionId }: Props) {
+export const AppointmentsSection: React.FC<AppointmentsSectionProps> = ({ sessionId, readOnly }) => {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [upcomingAppointments, setUpcomingAppointments] = useState<Appointment[]>([]);
+  const [pastAppointments, setPastAppointments] = useState<Appointment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [showBooking, setShowBooking] = useState(false);
   const [showReschedule, setShowReschedule] = useState(false);
   const [rescheduleAppointment, setRescheduleAppointment] = useState<Appointment | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const [tab, setTab] = useState<"upcoming" | "past">("upcoming");
+  const [tab, setTab] = useState<'upcoming' | 'past'>('upcoming');
+
+  useEffect(() => {
+    const fetchAppointments = async () => {
+      if (!sessionId) {
+        setAppointments([]);
+        setUpcomingAppointments([]);
+        setPastAppointments([]);
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        const response = await fetch('/api/portal/appointments', {
+          headers: { Authorization: `Bearer ${sessionId}` },
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          const fetchedAppointments: Appointment[] = data.appointments || data || [];
+
+          setAppointments(fetchedAppointments);
+
+          const upcoming = fetchedAppointments.filter((appt) => isUpcoming(appt));
+          const past = fetchedAppointments.filter((appt) => !isUpcoming(appt));
+
+          setUpcomingAppointments(upcoming);
+          setPastAppointments(past);
+        } else {
+          setError('Failed to load appointments.');
+        }
+      } catch {
+        setError('Failed to load appointments. Please try again.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchAppointments();
+  }, [sessionId]);
+
+  const handleReschedule = (appointment: Appointment) => {
+    setRescheduleAppointment(appointment);
+    setShowReschedule(true);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="animate-spin text-blue-600" size={24} />
+        <span className="ml-3 text-gray-600">Loading appointments...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-600 mb-4">{error}</p>
+        <button
+          onClick={() => window.location.reload()}
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div className="flex gap-2">
           <button
-            onClick={() => setTab("upcoming")}
-            className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === "upcoming" ? "bg-(--color-accent-light) text-(--color-accent-dark)" : "text-stone-500 hover:bg-stone-50"}`}
+            onClick={() => setTab('upcoming')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium ${
+              tab === 'upcoming'
+                ? 'bg-blue-100 text-blue-700'
+                : 'text-stone-500 hover:bg-stone-50'
+            }`}
           >
-            Upcoming ({UPCOMING_APPOINTMENTS.length})
+            Upcoming ({upcomingAppointments.length})
           </button>
           <button
-            onClick={() => setTab("past")}
-            className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === "past" ? "bg-(--color-accent-light) text-(--color-accent-dark)" : "text-stone-500 hover:bg-stone-50"}`}
+            onClick={() => setTab('past')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium ${
+              tab === 'past' ? 'bg-blue-100 text-blue-700' : 'text-stone-500 hover:bg-stone-50'
+            }`}
           >
-            Past ({PAST_APPOINTMENTS.length})
+            Past ({pastAppointments.length})
           </button>
         </div>
         {!readOnly && (
           <button
             onClick={() => setShowBooking(true)}
-            className="flex items-center gap-1.5 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
+            className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
           >
             <Plus size={16} />
             Book New
@@ -82,9 +216,9 @@ export function AppointmentsSection({ readOnly, sessionId }: Props) {
         )}
       </div>
 
-      {tab === "upcoming" && (
+      {tab === 'upcoming' && (
         <div className="space-y-3">
-          {UPCOMING_APPOINTMENTS.map(appt => (
+          {upcomingAppointments.map((appt) => (
             <AppointmentCard
               key={appt.id}
               appointment={appt}
@@ -92,18 +226,18 @@ export function AppointmentsSection({ readOnly, sessionId }: Props) {
               onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
               readOnly={readOnly}
               sessionId={sessionId}
-              onReschedule={(appt) => { setRescheduleAppointment(appt); setShowReschedule(true); }}
+              onReschedule={handleReschedule}
             />
           ))}
-          {UPCOMING_APPOINTMENTS.length === 0 && (
+          {upcomingAppointments.length === 0 && (
             <p className="text-center text-stone-400 py-8">No upcoming appointments</p>
           )}
         </div>
       )}
 
-      {tab === "past" && (
+      {tab === 'past' && (
         <div className="space-y-3">
-          {PAST_APPOINTMENTS.map(appt => (
+          {pastAppointments.map((appt) => (
             <AppointmentCard
               key={appt.id}
               appointment={appt}
@@ -111,158 +245,199 @@ export function AppointmentsSection({ readOnly, sessionId }: Props) {
               onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
               readOnly={readOnly}
               sessionId={sessionId}
-              onReschedule={(appt) => { setRescheduleAppointment(appt); setShowReschedule(true); }}
+              onReschedule={handleReschedule}
             />
           ))}
         </div>
       )}
 
       {showBooking && (
-        <BookingFlow
-          onClose={() => setShowBooking(false)}
-          readOnly={readOnly}
-        />
+        <BookingFlow onClose={() => setShowBooking(false)} sessionId={sessionId} />
       )}
       {showReschedule && rescheduleAppointment && (
         <RescheduleFlow
           appointment={rescheduleAppointment}
-          onClose={() => { setShowReschedule(false); setRescheduleAppointment(null); }}
+          onClose={() => {
+            setShowReschedule(false);
+            setRescheduleAppointment(null);
+          }}
           sessionId={sessionId}
         />
       )}
     </div>
   );
-}
+};
 
 function AppointmentCard({
-  appointment: appt, expanded, onToggle, readOnly, sessionId, onReschedule,
+  appointment: appt,
+  expanded,
+  onToggle,
+  readOnly,
+  sessionId,
+  onReschedule,
 }: {
-  appointment: Appointment; expanded: boolean; onToggle: () => void; readOnly: boolean; sessionId?: string | null; onReschedule: (appt: Appointment) => void;
+  appointment: Appointment;
+  expanded: boolean;
+  onToggle: () => void;
+  readOnly: boolean;
+  sessionId: string | null;
+  onReschedule: (appt: Appointment) => void;
 }) {
   return (
     <div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">
-      <button onClick={onToggle} className="w-full flex items-center gap-4 p-4 text-left hover:bg-stone-50">
-        <div className="w-10 h-10 rounded-lg bg-(--color-accent-light) flex items-center justify-center text-lg shrink-0">
-          {PETS.find(p => p.id === appt.petId)?.photo || "🐾"}
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center gap-4 p-4 text-left hover:bg-stone-50"
+      >
+        <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg shrink-0">
+          {appt.petName?.charAt(0) || 'P'}
         </div>
         <div className="flex-1 min-w-0">
-          <p className="font-medium text-stone-800 text-sm">{appt.petName} — {appt.services.join(", ")}</p>
+          <p className="font-medium text-stone-800 text-sm">
+            {appt.petName || 'Pet'} — {appt.serviceName || 'Service'}
+          </p>
           <div className="flex items-center gap-3 text-xs text-stone-500 mt-0.5">
-            <span className="flex items-center gap-1"><Calendar size={12} />{formatDate(appt.date)}</span>
-            <span className="flex items-center gap-1"><Clock size={12} />{appt.time}</span>
-            <span>with {appt.groomerName}</span>
+            <span className="flex items-center gap-1">
+              <Calendar size={12} />
+              {formatDate(appt.date)}
+            </span>
+            <span className="flex items-center gap-1">
+              <Clock size={12} />
+              {appt.time}
+            </span>
+            <span>with {appt.groomerName || 'First Available'}</span>
           </div>
         </div>
-        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[appt.status] || ""}`}>
+        <span
+          className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+            STATUS_COLORS[appt.status] || ''
+          }`}
+        >
           {appt.status}
         </span>
-        {expanded ? <ChevronDown size={16} className="text-stone-400" /> : <ChevronRight size={16} className="text-stone-400" />}
+        {expanded ? (
+          <ChevronDown size={16} className="text-stone-400" />
+        ) : (
+          <ChevronRight size={16} className="text-stone-400" />
+        )}
       </button>
       {expanded && (
         <div className="px-4 pb-4 pt-0 border-t border-stone-100">
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 py-3 text-sm">
-            <div>
-              <p className="text-xs text-stone-400">Duration</p>
-              <p className="text-stone-700">{appt.duration} min</p>
-            </div>
-            <div>
-              <p className="text-xs text-stone-400">Estimated Price</p>
-              <p className="text-stone-700">${appt.price}</p>
-            </div>
-            {appt.addOns.length > 0 && (
+            {appt.duration && (
+              <div>
+                <p className="text-xs text-stone-400">Duration</p>
+                <p className="text-stone-700">{appt.duration} min</p>
+              </div>
+            )}
+            {appt.price && (
+              <div>
+                <p className="text-xs text-stone-400">Estimated Price</p>
+                <p className="text-stone-700">${appt.price}</p>
+              </div>
+            )}
+            {appt.addOns && appt.addOns.length > 0 && (
               <div className="col-span-2">
                 <p className="text-xs text-stone-400">Add-ons</p>
-                <p className="text-stone-700">{appt.addOns.join(", ")}</p>
+                <p className="text-stone-700">{appt.addOns.join(', ')}</p>
               </div>
             )}
           </div>
           {appt.notes && (
-            <p className="text-sm text-stone-600 bg-stone-50 rounded-lg px-3 py-2 mb-3">{appt.notes}</p>
+            <p className="text-sm text-stone-600 bg-stone-50 rounded-lg px-3 py-2 mb-3">
+              {appt.notes}
+            </p>
           )}
           {isUpcoming(appt) && !readOnly && (
             <CustomerNotesSection appointment={appt} sessionId={sessionId} />
           )}
-          {isUpcoming(appt) && (
-            <ConfirmationSection appointment={appt} sessionId={sessionId} />
-          )}
-          {appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
-            <div className="flex gap-2 mt-3">
-              <button onClick={() => onReschedule(appt)} className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
-                Reschedule
-              </button>
-              <CancelAppointmentButton appointment={appt} sessionId={sessionId} />
-            </div>
-          )}
-          {appt.reportCardId && (
-            <div className="mt-2">
-              <span className="text-xs text-(--color-accent-dark) font-medium cursor-pointer hover:underline">
-                View Report Card →
-              </span>
-            </div>
-          )}
+          {isUpcoming(appt) && <ConfirmationSection appointment={appt} sessionId={sessionId} />}
+          {appt.status !== 'completed' &&
+            appt.status !== 'cancelled' &&
+            !readOnly && (
+              <div className="flex gap-2 mt-3">
+                <button
+                  onClick={() => onReschedule(appt)}
+                  className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50"
+                >
+                  Reschedule
+                </button>
+                <CancelAppointmentButton appointment={appt} sessionId={sessionId} />
+              </div>
+            )}
         </div>
       )}
     </div>
   );
 }
 
-export function ConfirmationSection({ appointment: appt, sessionId }: { appointment: Appointment; sessionId?: string | null }) {
+export function ConfirmationSection({
+  appointment: appt,
+  sessionId,
+}: {
+  appointment: Appointment;
+  sessionId: string | null;
+}) {
   const [confirming, setConfirming] = useState(false);
   const [confirmError, setConfirmError] = useState<string | null>(null);
   const [confirmSuccess, setConfirmSuccess] = useState(false);
-  // Local state mirrors confirmationStatus so the badge updates immediately after confirm
   const [localStatus, setLocalStatus] = useState(appt.confirmationStatus);
 
   async function handleConfirm() {
-    if (!window.confirm("Confirm this appointment?")) return;
+    if (!window.confirm('Confirm this appointment?')) return;
     setConfirming(true);
     setConfirmError(null);
     try {
       const headers: Record<string, string> = {};
       if (sessionId) {
-        headers["X-Impersonation-Session-Id"] = sessionId;
+        headers['Authorization'] = `Bearer ${sessionId}`;
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/confirm`, {
-        method: "POST",
+        method: 'POST',
         headers,
       });
       if (!res.ok) {
-        const err = await res.json().catch(() => ({ error: "Failed to confirm" }));
+        const err = await res.json().catch(() => ({ error: 'Failed to confirm' }));
         throw new Error(err.error || `HTTP ${res.status}`);
       }
-      setLocalStatus("confirmed");
+      setLocalStatus('confirmed');
       setConfirmSuccess(true);
       setTimeout(() => setConfirmSuccess(false), 2000);
     } catch (e) {
-      setConfirmError(e instanceof Error ? e.message : "Failed to confirm");
+      setConfirmError(e instanceof Error ? e.message : 'Failed to confirm');
     } finally {
       setConfirming(false);
     }
   }
 
   const currentStatus = localStatus ?? appt.confirmationStatus;
-  const statusLabel = currentStatus === "confirmed"
-    ? "✓ Confirmed"
-    : currentStatus === "pending"
-    ? "Pending confirmation"
-    : "Cancelled";
+  const statusLabel =
+    currentStatus === 'confirmed'
+      ? 'Confirmed'
+      : currentStatus === 'pending'
+        ? 'Pending confirmation'
+        : 'Cancelled';
 
   return (
     <div className="mt-3 p-3 bg-stone-50 rounded-lg">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${CONFIRMATION_STATUS_COLORS[currentStatus] || ""}`}>
+          <span
+            className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+              CONFIRMATION_STATUS_COLORS[currentStatus || 'pending'] || ''
+            }`}
+          >
             {statusLabel}
           </span>
         </div>
-        {!confirmSuccess && currentStatus === "pending" && (
+        {!confirmSuccess && currentStatus === 'pending' && (
           <button
             onClick={handleConfirm}
             disabled={confirming}
             className="flex items-center gap-1.5 text-xs px-3 py-1.5 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {confirming && <Loader2 size={12} className="animate-spin" />}
-            {confirming ? "Confirming..." : "Confirm Appointment"}
+            {confirming ? 'Confirming...' : 'Confirm Appointment'}
           </button>
         )}
         {confirmSuccess && (
@@ -274,30 +449,36 @@ export function ConfirmationSection({ appointment: appt, sessionId }: { appointm
   );
 }
 
-function CancelAppointmentButton({ appointment: appt, sessionId }: { appointment: Appointment; sessionId?: string | null }) {
+function CancelAppointmentButton({
+  appointment: appt,
+  sessionId,
+}: {
+  appointment: Appointment;
+  sessionId: string | null;
+}) {
   const [cancelling, setCancelling] = useState(false);
   const [cancelError, setCancelError] = useState<string | null>(null);
 
   async function handleCancel() {
-    if (!window.confirm("Cancel this appointment? This cannot be undone.")) return;
+    if (!window.confirm('Cancel this appointment? This cannot be undone.')) return;
     setCancelling(true);
     setCancelError(null);
     try {
       const headers: Record<string, string> = {};
       if (sessionId) {
-        headers["X-Impersonation-Session-Id"] = sessionId;
+        headers['Authorization'] = `Bearer ${sessionId}`;
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/cancel`, {
-        method: "POST",
+        method: 'POST',
         headers,
       });
       if (!res.ok) {
-        const err = await res.json().catch(() => ({ error: "Failed to cancel" }));
+        const err = await res.json().catch(() => ({ error: 'Failed to cancel' }));
         throw new Error(err.error || `HTTP ${res.status}`);
       }
       window.location.reload();
     } catch (e) {
-      setCancelError(e instanceof Error ? e.message : "Failed to cancel");
+      setCancelError(e instanceof Error ? e.message : 'Failed to cancel');
       setCancelling(false);
     }
   }
@@ -309,43 +490,49 @@ function CancelAppointmentButton({ appointment: appt, sessionId }: { appointment
         disabled={cancelling}
         className="text-xs px-3 py-1.5 border border-red-200 rounded-lg text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
       >
-        {cancelling ? "Cancelling..." : "Cancel"}
+        {cancelling ? 'Cancelling...' : 'Cancel'}
       </button>
       {cancelError && <p className="text-xs text-red-500 mt-1">{cancelError}</p>}
     </>
   );
 }
 
-export function CustomerNotesSection({ appointment: appt, sessionId }: { appointment: Appointment; sessionId?: string | null }) {
-  const [notes, setNotes] = useState(appt.customerNotes || "");
+export function CustomerNotesSection({
+  appointment: appt,
+  sessionId,
+}: {
+  appointment: Appointment;
+  sessionId: string | null;
+}) {
+  const [notes, setNotes] = useState(appt.customerNotes || '');
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const isDisabled = appt.status === "completed" || appt.status === "cancelled";
+  const isDisabled = appt.status === 'completed' || appt.status === 'cancelled';
 
   async function handleSave() {
     setSaving(true);
     setError(null);
     setSaved(false);
     try {
-      const headers: Record<string, string> = { "Content-Type": "application/json" };
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
       if (sessionId) {
-        headers["X-Impersonation-Session-Id"] = sessionId;
+        headers['Authorization'] = `Bearer ${sessionId}`;
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/notes`, {
-        method: "PATCH",
+        method: 'PATCH',
         headers,
         body: JSON.stringify({ customerNotes: notes }),
       });
       if (!res.ok) {
-        const err = await res.json().catch(() => ({ error: "Failed to save" }));
+        const err = await res.json().catch(() => ({ error: 'Failed to save' }));
         throw new Error(err.error || `HTTP ${res.status}`);
       }
       setSaved(true);
       setTimeout(() => setSaved(false), 2000);
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to save");
+      setError(e instanceof Error ? e.message : 'Failed to save');
     } finally {
       setSaving(false);
     }
@@ -355,15 +542,19 @@ export function CustomerNotesSection({ appointment: appt, sessionId }: { appoint
     <div className="mt-3 p-3 bg-stone-50 rounded-lg">
       <div className="flex items-center justify-between mb-1.5">
         <label className="text-xs font-medium text-stone-600">Notes for your groomer</label>
-        <span className={`text-xs ${notes.length > MAX_CUSTOMER_NOTES ? "text-red-500" : "text-stone-400"}`}>
+        <span
+          className={`text-xs ${
+            notes.length > MAX_CUSTOMER_NOTES ? 'text-red-500' : 'text-stone-400'
+          }`}
+        >
           {notes.length}/{MAX_CUSTOMER_NOTES}
         </span>
       </div>
       <textarea
         value={notes}
-        onChange={e => setNotes(e.target.value.slice(0, MAX_CUSTOMER_NOTES))}
+        onChange={(e) => setNotes(e.target.value.slice(0, MAX_CUSTOMER_NOTES))}
         disabled={isDisabled}
-        className="w-full text-sm border border-stone-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-(--color-accent) disabled:bg-stone-100 disabled:text-stone-400"
+        className="w-full text-sm border border-stone-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-stone-100 disabled:text-stone-400"
         rows={3}
         placeholder="Any special requests or notes for this appointment..."
       />
@@ -373,10 +564,10 @@ export function CustomerNotesSection({ appointment: appt, sessionId }: { appoint
         <button
           onClick={handleSave}
           disabled={saving || notes === appt.customerNotes}
-          className="mt-2 flex items-center gap-1.5 text-xs px-3 py-1.5 bg-(--color-accent) text-white rounded-lg font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
+          className="mt-2 flex items-center gap-1.5 text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {saving && <Loader2 size={12} className="animate-spin" />}
-          {saving ? "Saving..." : "Save Notes"}
+          {saving ? 'Saving...' : 'Save Notes'}
         </button>
       )}
     </div>
@@ -387,49 +578,55 @@ export function RescheduleFlow({
   appointment: appt,
   onClose,
   sessionId,
-}: {
-  appointment: Appointment;
-  onClose: () => void;
-  sessionId?: string | null;
-}) {
-  const [selectedDate, setSelectedDate] = useState("");
-  const [selectedTime, setSelectedTime] = useState("");
+}: RescheduleFlowProps) {
+  const [selectedDate, setSelectedDate] = useState('');
+  const [selectedTime, setSelectedTime] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
-  const availableTimes = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"];
+  const availableTimes = [
+    '9:00 AM',
+    '10:00 AM',
+    '11:00 AM',
+    '1:00 PM',
+    '2:00 PM',
+    '3:00 PM',
+    '4:00 PM',
+  ];
 
   async function handleSubmit() {
     if (!selectedDate || !selectedTime) return;
 
-    const [hoursMinutes = "", period = ""] = selectedTime.split(" ");
-    const [hoursStr = "0", minutesStr = "0"] = hoursMinutes.split(":");
+    const [hoursMinutes = '', period = ''] = selectedTime.split(' ');
+    const [hoursStr = '0', minutesStr = '0'] = hoursMinutes.split(':');
     let hours = parseInt(hoursStr, 10);
-    const minutes = parseInt(minutesStr ?? "0", 10);
-    if (period === "PM" && hours !== 12) hours += 12;
-    if (period === "AM" && hours === 12) hours = 0;
-    const isoTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:00`;
+    const minutes = parseInt(minutesStr ?? '0', 10);
+    if (period === 'PM' && hours !== 12) hours += 12;
+    if (period === 'AM' && hours === 12) hours = 0;
+    const isoTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
     const startTime = new Date(`${selectedDate}T${isoTime}`).toISOString();
 
     setSubmitting(true);
     setError(null);
     try {
-      const headers: Record<string, string> = { "Content-Type": "application/json" };
-      if (sessionId) headers["X-Impersonation-Session-Id"] = sessionId;
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (sessionId) headers['Authorization'] = `Bearer ${sessionId}`;
       const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, {
-        method: "POST",
+        method: 'POST',
         headers,
         body: JSON.stringify({ startTime }),
       });
       if (!res.ok) {
-        const err = await res.json().catch(() => ({ error: "Failed to reschedule" }));
+        const err = await res.json().catch(() => ({ error: 'Failed to reschedule' }));
         throw new Error(err.error || `HTTP ${res.status}`);
       }
       setSuccess(true);
-      setTimeout(() => { window.location.reload(); }, 1500);
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to reschedule");
+      setError(e instanceof Error ? e.message : 'Failed to reschedule');
       setSubmitting(false);
     }
   }
@@ -439,23 +636,29 @@ export function RescheduleFlow({
       <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
         <div className="flex items-center justify-between p-5 border-b border-stone-200">
           <h2 className="font-semibold text-stone-800">Reschedule Appointment</h2>
-          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">✕</button>
+          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">
+            Close
+          </button>
         </div>
 
         <div className="p-5">
           {success ? (
             <div className="text-center py-8">
-              <div className="text-4xl mb-3">✅</div>
-              <h3 className="text-lg font-semibold text-stone-800 mb-1">Appointment Rescheduled!</h3>
+              <div className="text-4xl mb-3">OK</div>
+              <h3 className="text-lg font-semibold text-stone-800 mb-1">
+                Appointment Rescheduled!
+              </h3>
               <p className="text-sm text-stone-500">Redirecting...</p>
             </div>
           ) : (
             <>
-              {/* Current appointment summary */}
               <div className="bg-stone-50 rounded-xl p-4 mb-4 text-sm">
-                <p className="font-medium text-stone-800">{appt.petName} — {appt.services.join(", ")}</p>
+                <p className="font-medium text-stone-800">
+                  {appt.petName || 'Pet'} — {appt.serviceName || 'Service'}
+                </p>
                 <p className="text-stone-500 mt-0.5">
-                  {formatDate(appt.date)} at {appt.time} with {appt.groomerName}
+                  {formatDate(appt.date)} at {appt.time} with{' '}
+                  {appt.groomerName || 'First Available'}
                 </p>
               </div>
 
@@ -463,20 +666,20 @@ export function RescheduleFlow({
               <input
                 type="date"
                 value={selectedDate}
-                onChange={e => setSelectedDate(e.target.value)}
-                min={new Date().toISOString().split("T")[0]}
+                onChange={(e) => setSelectedDate(e.target.value)}
+                min={new Date().toISOString().split('T')[0]}
                 className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
               />
               {selectedDate && (
                 <div className="grid grid-cols-3 gap-2 mb-4">
-                  {availableTimes.map(time => (
+                  {availableTimes.map((time) => (
                     <button
                       key={time}
                       onClick={() => setSelectedTime(time)}
                       className={`px-3 py-2 rounded-lg text-sm border ${
                         selectedTime === time
-                          ? "border-(--color-accent) bg-(--color-accent-light) font-medium"
-                          : "border-stone-200 hover:border-stone-300"
+                          ? 'border-blue-500 bg-blue-50 font-medium'
+                          : 'border-stone-200 hover:border-stone-300'
                       }`}
                     >
                       {time}
@@ -497,9 +700,9 @@ export function RescheduleFlow({
                 <button
                   onClick={handleSubmit}
                   disabled={!selectedDate || !selectedTime || submitting}
-                  className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  {submitting ? "Rescheduling..." : "Confirm Reschedule"}
+                  {submitting ? 'Rescheduling...' : 'Confirm Reschedule'}
                 </button>
               </div>
             </>
@@ -510,137 +713,297 @@ export function RescheduleFlow({
   );
 }
 
-function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boolean }) {
+interface BookingFlowProps {
+  onClose: () => void;
+  sessionId: string | null;
+}
+
+function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   const [step, setStep] = useState(1);
+  const [pets, setPets] = useState<Pet[]>([]);
+  const [services, setServices] = useState<Service[]>([]);
   const [selectedPet, setSelectedPet] = useState<Pet | null>(null);
   const [selectedServices, setSelectedServices] = useState<Service[]>([]);
   const [selectedAddOns, setSelectedAddOns] = useState<Service[]>([]);
-  const [selectedGroomer, setSelectedGroomer] = useState<Groomer | null>(null);
-  const [selectedDate, setSelectedDate] = useState("");
-  const [selectedTime, setSelectedTime] = useState("");
-  const [notes, setNotes] = useState("");
-  const [recurring, setRecurring] = useState("");
+  const [selectedGroomer] = useState<string>('first-available');
+  const [selectedDate, setSelectedDate] = useState('');
+  const [selectedTime, setSelectedTime] = useState('');
+  const [notes, setNotes] = useState('');
+  const [recurring, setRecurring] = useState('');
   const [confirmed, setConfirmed] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
 
-  const availableTimes = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"];
-  const mainServices = SERVICES.filter(s => !s.isAddOn);
-  const addOnServices = SERVICES.filter(s => s.isAddOn);
+  const availableTimes = [
+    '9:00 AM',
+    '10:00 AM',
+    '11:00 AM',
+    '1:00 PM',
+    '2:00 PM',
+    '3:00 PM',
+    '4:00 PM',
+  ];
 
-  if (readOnly) return null;
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!sessionId) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const [petsRes, servicesRes] = await Promise.all([
+          fetch('/api/portal/pets', {
+            headers: { Authorization: `Bearer ${sessionId}` },
+          }),
+          fetch('/api/portal/services', {
+            headers: { Authorization: `Bearer ${sessionId}` },
+          }),
+        ]);
+
+        if (petsRes.ok) {
+          const petsData = await petsRes.json();
+          setPets(petsData.pets || petsData || []);
+        }
+
+        if (servicesRes.ok) {
+          const servicesData = await servicesRes.json();
+          setServices(servicesData.services || servicesData || []);
+        }
+      } catch {
+        setError('Failed to load data. Please try again.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [sessionId]);
+
+  const mainServices = services.filter((s) => !s.isAddOn);
+  const addOnServices = services.filter((s) => s.isAddOn);
+
+  async function handleConfirmBooking() {
+    if (!sessionId || !selectedPet || selectedServices.length === 0) return;
+
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/portal/waitlist', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${sessionId}`,
+        },
+        body: JSON.stringify({
+          petId: selectedPet.id,
+          serviceId: selectedServices[0]?.id,
+          serviceIds: selectedServices.map((s) => s.id),
+          addOnIds: selectedAddOns.map((s) => s.id),
+          groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
+          preferredDate: selectedDate,
+          preferredTime: selectedTime,
+          notes: notes || undefined,
+          recurring: recurring || undefined,
+        }),
+      });
+
+      if (response.ok) {
+        setConfirmed(true);
+        setTimeout(() => {
+          window.location.reload();
+        }, 1500);
+      } else {
+        const data = await response.json();
+        setError(data.message || 'Failed to book appointment. Please try again.');
+        setSubmitting(false);
+      }
+    } catch {
+      setError('Failed to book appointment. Please try again.');
+      setSubmitting(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full p-8">
+          <div className="flex items-center justify-center">
+            <Loader2 className="animate-spin text-blue-600" size={24} />
+            <span className="ml-3 text-gray-600">Loading...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
       <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
         <div className="flex items-center justify-between p-5 border-b border-stone-200">
           <h2 className="font-semibold text-stone-800">Book Appointment</h2>
-          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">✕</button>
+          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">
+            Close
+          </button>
         </div>
 
-        {/* Step Indicator */}
         <div className="flex items-center gap-1 px-5 pt-4">
-          {[1, 2, 3, 4, 5].map(s => (
-            <div key={s} className={`flex-1 h-1.5 rounded-full ${s <= step ? "bg-(--color-accent)" : "bg-stone-200"}`} />
+          {[1, 2, 3, 4, 5].map((s) => (
+            <div
+              key={s}
+              className={`flex-1 h-1.5 rounded-full ${s <= step ? 'bg-blue-600' : 'bg-stone-200'}`}
+            />
           ))}
         </div>
 
         <div className="p-5">
           {confirmed ? (
             <div className="text-center py-8">
-              <div className="text-4xl mb-3">🎉</div>
-              <h3 className="text-lg font-semibold text-stone-800 mb-1">Appointment Booked!</h3>
+              <div className="text-4xl mb-3">OK</div>
+              <h3 className="text-lg font-semibold text-stone-800 mb-1">
+                Appointment Requested!
+              </h3>
               <p className="text-sm text-stone-500 mb-4">
-                {selectedPet?.name} with {selectedGroomer?.name || "First Available"} on {formatDate(selectedDate)} at {selectedTime}
+                {selectedPet?.name} on {formatDate(selectedDate)} at {selectedTime}
               </p>
-              <button onClick={onClose} className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
+              >
                 Done
               </button>
             </div>
           ) : (
             <>
-              {/* Step 1: Select Pet */}
               {step === 1 && (
                 <div>
                   <h3 className="font-medium text-stone-800 mb-3">Select Pet</h3>
                   <div className="space-y-2">
-                    {PETS.map(pet => (
+                    {pets.map((pet) => (
                       <button
                         key={pet.id}
-                        onClick={() => { setSelectedPet(pet); setStep(2); }}
+                        onClick={() => {
+                          setSelectedPet(pet);
+                          setStep(2);
+                        }}
                         className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-colors ${
-                          selectedPet?.id === pet.id ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 hover:border-stone-300"
+                          selectedPet?.id === pet.id
+                            ? 'border-blue-500 bg-blue-50'
+                            : 'border-stone-200 hover:border-stone-300'
                         }`}
                       >
-                        <span className="text-2xl">{pet.photo}</span>
+                        <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg">
+                          {pet.photo || pet.name.charAt(0)}
+                        </div>
                         <div>
                           <p className="font-medium text-stone-800">{pet.name}</p>
-                          <p className="text-xs text-stone-500">{pet.breed} · {pet.weight} lbs</p>
+                          <p className="text-xs text-stone-500">
+                            {pet.breed}
+                            {pet.weight ? ` · ${pet.weight} lbs` : ''}
+                          </p>
                         </div>
                       </button>
                     ))}
+                    {pets.length === 0 && (
+                      <p className="text-center text-stone-400 py-4">
+                        No pets found. Please add a pet first.
+                      </p>
+                    )}
                   </div>
+                  <button
+                    onClick={() => setStep(2)}
+                    disabled={!selectedPet}
+                    className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+                  >
+                    Next
+                  </button>
                 </div>
               )}
 
-              {/* Step 2: Select Services */}
               {step === 2 && (
                 <div>
                   <h3 className="font-medium text-stone-800 mb-3">Select Services</h3>
                   <div className="space-y-2 mb-4">
-                    {mainServices.map(svc => (
+                    {mainServices.map((svc) => (
                       <button
                         key={svc.id}
                         onClick={() => {
-                          setSelectedServices(prev =>
-                            prev.find(s => s.id === svc.id) ? prev.filter(s => s.id !== svc.id) : [...prev, svc]
+                          setSelectedServices((prev) =>
+                            prev.find((s) => s.id === svc.id)
+                              ? prev.filter((s) => s.id !== svc.id)
+                              : [...prev, svc]
                           );
                         }}
                         className={`w-full flex items-center justify-between p-3 rounded-xl border text-left ${
-                          selectedServices.find(s => s.id === svc.id) ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 hover:border-stone-300"
+                          selectedServices.find((s) => s.id === svc.id)
+                            ? 'border-blue-500 bg-blue-50'
+                            : 'border-stone-200 hover:border-stone-300'
                         }`}
                       >
                         <div>
                           <p className="font-medium text-stone-800 text-sm">{svc.name}</p>
-                          <p className="text-xs text-stone-500">{svc.description}</p>
+                          {svc.description && (
+                            <p className="text-xs text-stone-500">{svc.description}</p>
+                          )}
                         </div>
                         <div className="text-right shrink-0 ml-3">
-                          <p className="text-sm font-medium text-stone-700">{svc.priceRange}</p>
+                          <p className="text-sm font-medium text-stone-700">
+                            {svc.priceRange || `$${svc.price}`}
+                          </p>
                           <p className="text-xs text-stone-400">{svc.duration} min</p>
                         </div>
                       </button>
                     ))}
                   </div>
-                  {selectedServices.length > 0 && (
+                  {selectedServices.length > 0 && addOnServices.length > 0 && (
                     <>
-                      <h4 className="font-medium text-stone-700 text-sm mb-2">Add-ons (optional)</h4>
+                      <h4 className="font-medium text-stone-700 text-sm mb-2">
+                        Add-ons (optional)
+                      </h4>
                       <div className="space-y-2 mb-4">
-                        {addOnServices.map(svc => (
+                        {addOnServices.map((svc) => (
                           <button
                             key={svc.id}
                             onClick={() => {
-                              setSelectedAddOns(prev =>
-                                prev.find(s => s.id === svc.id) ? prev.filter(s => s.id !== svc.id) : [...prev, svc]
+                              setSelectedAddOns((prev) =>
+                                prev.find((s) => s.id === svc.id)
+                                  ? prev.filter((s) => s.id !== svc.id)
+                                  : [...prev, svc]
                               );
                             }}
                             className={`w-full flex items-center justify-between p-2.5 rounded-lg border text-left text-sm ${
-                              selectedAddOns.find(s => s.id === svc.id) ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 hover:border-stone-300"
+                              selectedAddOns.find((s) => s.id === svc.id)
+                                ? 'border-blue-500 bg-blue-50'
+                                : 'border-stone-200 hover:border-stone-300'
                             }`}
                           >
                             <div>
                               <p className="font-medium text-stone-800">{svc.name}</p>
-                              <p className="text-xs text-stone-500">{svc.description}</p>
+                              {svc.description && (
+                                <p className="text-xs text-stone-500">{svc.description}</p>
+                              )}
                             </div>
-                            <span className="text-stone-600 shrink-0 ml-3">{svc.priceRange}</span>
+                            <span className="text-stone-600 shrink-0 ml-3">
+                              {svc.priceRange || `$${svc.price}`}
+                            </span>
                           </button>
                         ))}
                       </div>
                     </>
                   )}
                   <div className="flex gap-2 mt-4">
-                    <button onClick={() => setStep(1)} className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm">Back</button>
+                    <button
+                      onClick={() => setStep(1)}
+                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
+                    >
+                      Back
+                    </button>
                     <button
                       onClick={() => setStep(3)}
                       disabled={selectedServices.length === 0}
-                      className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium disabled:opacity-50"
+                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
                     >
                       Next
                     </button>
@@ -648,66 +1011,69 @@ function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boo
                 </div>
               )}
 
-              {/* Step 3: Select Groomer */}
               {step === 3 && (
                 <div>
                   <h3 className="font-medium text-stone-800 mb-3">Select Groomer</h3>
                   <div className="space-y-2">
                     <button
-                      onClick={() => { setSelectedGroomer(null); setStep(4); }}
+                      onClick={() => setStep(4)}
                       className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left ${
-                        selectedGroomer === null ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 hover:border-stone-300"
+                        selectedGroomer === 'first-available'
+                          ? 'border-blue-500 bg-blue-50'
+                          : 'border-stone-200 hover:border-stone-300'
                       }`}
                     >
                       <div className="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
-                        <Search size={16} className="text-stone-400" />
+                        First
                       </div>
                       <div>
                         <p className="font-medium text-stone-800">First Available</p>
-                        <p className="text-xs text-stone-500">We'll match you with the best available groomer</p>
+                        <p className="text-xs text-stone-500">
+                          We will match you with the best available groomer
+                        </p>
                       </div>
                     </button>
-                    {GROOMERS.map(g => (
-                      <button
-                        key={g.id}
-                        onClick={() => { setSelectedGroomer(g); setStep(4); }}
-                        className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left ${
-                          selectedGroomer?.id === g.id ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 hover:border-stone-300"
-                        }`}
-                      >
-                        <div className="w-10 h-10 rounded-full bg-(--color-accent-light) flex items-center justify-center text-xl">
-                          {g.avatar}
-                        </div>
-                        <div>
-                          <p className="font-medium text-stone-800">{g.name}</p>
-                          <p className="text-xs text-stone-500">{g.specialties.join(" · ")}</p>
-                        </div>
-                      </button>
-                    ))}
                   </div>
-                  <button onClick={() => setStep(2)} className="w-full mt-4 px-4 py-2 border border-stone-200 rounded-lg text-sm">Back</button>
+                  <p className="text-xs text-stone-400 mt-3">
+                    Note: Groomer listing not available. Showing "First Available" only.
+                  </p>
+                  <div className="flex gap-2 mt-4">
+                    <button
+                      onClick={() => setStep(2)}
+                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
+                    >
+                      Back
+                    </button>
+                    <button
+                      onClick={() => setStep(4)}
+                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
+                    >
+                      Next
+                    </button>
+                  </div>
                 </div>
               )}
 
-              {/* Step 4: Date & Time */}
               {step === 4 && (
                 <div>
                   <h3 className="font-medium text-stone-800 mb-3">Pick Date & Time</h3>
                   <input
                     type="date"
                     value={selectedDate}
-                    onChange={e => setSelectedDate(e.target.value)}
-                    min={new Date().toISOString().split("T")[0]}
+                    onChange={(e) => setSelectedDate(e.target.value)}
+                    min={new Date().toISOString().split('T')[0]}
                     className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
                   />
                   {selectedDate && (
                     <div className="grid grid-cols-3 gap-2 mb-4">
-                      {availableTimes.map(time => (
+                      {availableTimes.map((time) => (
                         <button
                           key={time}
                           onClick={() => setSelectedTime(time)}
                           className={`px-3 py-2 rounded-lg text-sm border ${
-                            selectedTime === time ? "border-(--color-accent) bg-(--color-accent-lighter) font-medium" : "border-stone-200 hover:border-stone-300"
+                            selectedTime === time
+                              ? 'border-blue-500 bg-blue-50 font-medium'
+                              : 'border-stone-200 hover:border-stone-300'
                           }`}
                         >
                           {time}
@@ -717,12 +1083,11 @@ function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boo
                   )}
                   <div className="mb-4">
                     <label className="flex items-center gap-2 text-sm text-stone-700 mb-1">
-                      <Repeat size={14} />
                       Recurring (optional)
                     </label>
                     <select
                       value={recurring}
-                      onChange={e => setRecurring(e.target.value)}
+                      onChange={(e) => setRecurring(e.target.value)}
                       className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm"
                     >
                       <option value="">One-time</option>
@@ -732,11 +1097,16 @@ function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boo
                     </select>
                   </div>
                   <div className="flex gap-2">
-                    <button onClick={() => setStep(3)} className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm">Back</button>
+                    <button
+                      onClick={() => setStep(3)}
+                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
+                    >
+                      Back
+                    </button>
                     <button
                       onClick={() => setStep(5)}
                       disabled={!selectedDate || !selectedTime}
-                      className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium disabled:opacity-50"
+                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
                     >
                       Next
                     </button>
@@ -744,40 +1114,75 @@ function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boo
                 </div>
               )}
 
-              {/* Step 5: Review & Confirm */}
               {step === 5 && (
                 <div>
                   <h3 className="font-medium text-stone-800 mb-3">Review & Confirm</h3>
                   <div className="bg-stone-50 rounded-xl p-4 space-y-2 text-sm mb-4">
-                    <div className="flex justify-between"><span className="text-stone-500">Pet</span><span className="font-medium">{selectedPet?.name}</span></div>
-                    <div className="flex justify-between"><span className="text-stone-500">Services</span><span className="font-medium">{selectedServices.map(s => s.name).join(", ")}</span></div>
+                    <div className="flex justify-between">
+                      <span className="text-stone-500">Pet</span>
+                      <span className="font-medium">{selectedPet?.name}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-stone-500">Services</span>
+                      <span className="font-medium">
+                        {selectedServices.map((s) => s.name).join(', ')}
+                      </span>
+                    </div>
                     {selectedAddOns.length > 0 && (
-                      <div className="flex justify-between"><span className="text-stone-500">Add-ons</span><span className="font-medium">{selectedAddOns.map(s => s.name).join(", ")}</span></div>
+                      <div className="flex justify-between">
+                        <span className="text-stone-500">Add-ons</span>
+                        <span className="font-medium">
+                          {selectedAddOns.map((s) => s.name).join(', ')}
+                        </span>
+                      </div>
+                    )}
+                    <div className="flex justify-between">
+                      <span className="text-stone-500">Groomer</span>
+                      <span className="font-medium">First Available</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-stone-500">Date & Time</span>
+                      <span className="font-medium">
+                        {formatDate(selectedDate)} at {selectedTime}
+                      </span>
+                    </div>
+                    {recurring && (
+                      <div className="flex justify-between">
+                        <span className="text-stone-500">Recurring</span>
+                        <span className="font-medium">Every {recurring} weeks</span>
+                      </div>
                     )}
-                    <div className="flex justify-between"><span className="text-stone-500">Groomer</span><span className="font-medium">{selectedGroomer?.name || "First Available"}</span></div>
-                    <div className="flex justify-between"><span className="text-stone-500">Date & Time</span><span className="font-medium">{formatDate(selectedDate)} at {selectedTime}</span></div>
-                    {recurring && <div className="flex justify-between"><span className="text-stone-500">Recurring</span><span className="font-medium">Every {recurring} weeks</span></div>}
                   </div>
                   <div className="mb-4">
-                    <label className="block text-sm font-medium text-stone-700 mb-1">Notes for groomer (optional)</label>
+                    <label className="block text-sm font-medium text-stone-700 mb-1">
+                      Notes for groomer (optional)
+                    </label>
                     <textarea
                       value={notes}
-                      onChange={e => setNotes(e.target.value)}
+                      onChange={(e) => setNotes(e.target.value)}
                       className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm"
                       rows={2}
                       placeholder="Any special instructions..."
                     />
                   </div>
-                  <div className="bg-amber-50 rounded-lg px-3 py-2 text-xs text-amber-700 mb-4">
-                    Free cancellation up to 24 hours before. Late cancellation fee: $25.
-                  </div>
+                  {error && (
+                    <div className="bg-red-50 rounded-lg px-3 py-2 text-xs text-red-700 mb-4">
+                      {error}
+                    </div>
+                  )}
                   <div className="flex gap-2">
-                    <button onClick={() => setStep(4)} className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm">Back</button>
                     <button
-                      onClick={() => setConfirmed(true)}
-                      className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
+                      onClick={() => setStep(4)}
+                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
                     >
-                      Confirm Booking
+                      Back
+                    </button>
+                    <button
+                      onClick={handleConfirmBooking}
+                      disabled={submitting}
+                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+                    >
+                      {submitting ? 'Booking...' : 'Confirm Booking'}
                     </button>
                   </div>
                 </div>
@@ -788,4 +1193,4 @@ function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boo
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/portal/sections/BillingPayments.tsx b/apps/web/src/portal/sections/BillingPayments.tsx
index 63d1240..5ae9f81 100644
--- a/apps/web/src/portal/sections/BillingPayments.tsx
+++ b/apps/web/src/portal/sections/BillingPayments.tsx
@@ -1,252 +1,191 @@
-import { useState } from "react";
-import { CreditCard, Download, DollarSign, Package, Zap, Plus, Trash2 } from "lucide-react";
-import { INVOICES, SAVED_PAYMENT_METHODS, PREPAID_PACKAGES } from "../mockData.js";
+import { useState, useEffect } from "react";
 
-interface Props {
+interface Invoice {
+  id: string;
+  status: "pending" | "paid" | "failed" | "refunded";
+  totalCents: number;
+  date: string;
+  description?: string;
+}
+
+interface PaymentMethod {
+  brand: string;
+  last4: string;
+  expiryMonth: number;
+  expiryYear: number;
+}
+
+interface Package {
+  name: string;
+  remaining: number;
+}
+
+interface BillingPaymentsProps {
+  sessionId: string | null;
   readOnly: boolean;
 }
 
-const STATUS_STYLES: Record<string, string> = {
-  paid: "bg-green-100 text-green-700",
-  outstanding: "bg-amber-100 text-amber-700",
-  overdue: "bg-red-100 text-red-700",
-};
+export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
+  const [packages, setPackages] = useState<Package[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-export function BillingPayments({ readOnly }: Props) {
-  const [tab, setTab] = useState<"invoices" | "payment" | "packages">("invoices");
-  const [autopay, setAutopay] = useState(false);
-  const [showTipModal, setShowTipModal] = useState(false);
+  useEffect(() => {
+    async function fetchData() {
+      if (!sessionId) {
+        setLoading(false);
+        return;
+      }
 
-  const outstanding = INVOICES.filter(i => i.status === "outstanding");
-  const totalOutstanding = outstanding.reduce((sum, i) => sum + i.amount, 0);
+      try {
+        const response = await fetch("/api/portal/invoices", {
+          headers: {
+            "x-session-id": sessionId,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch invoices");
+        }
+
+        const data = await response.json();
+        setInvoices(data.invoices || []);
+        setPaymentMethods(data.paymentMethods || []);
+        setPackages(data.packages || []);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "An error occurred");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [sessionId]);
+
+  const formatCents = (cents: number) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(cents / 100);
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse space-y-4">
+          <div className="h-6 bg-gray-200 rounded w-1/3"></div>
+          <div className="h-24 bg-gray-200 rounded"></div>
+          <div className="h-24 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="text-red-600">Error: {error}</div>
+      </div>
+    );
+  }
 
   return (
-    <div className="space-y-6">
-      {/* Outstanding Balance Banner */}
-      {totalOutstanding > 0 && (
-        <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-          <div>
-            <p className="text-sm text-stone-500">Outstanding Balance</p>
-            <p className="text-3xl font-bold text-stone-800">${totalOutstanding.toFixed(2)}</p>
-            <p className="text-xs text-stone-400 mt-0.5">{outstanding.length} unpaid invoice{outstanding.length > 1 ? "s" : ""}</p>
-          </div>
-          {!readOnly && (
-            <div className="flex gap-2">
-              <button
-                onClick={() => setShowTipModal(true)}
-                className="px-4 py-2 border border-stone-200 rounded-lg text-sm font-medium text-stone-600 hover:bg-stone-50"
-              >
-                Add Tip
-              </button>
-              <button className="px-6 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)">
-                Pay Now
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Tabs */}
-      <div className="flex gap-2">
-        {([
-          { id: "invoices" as const, label: "Invoices", icon: DollarSign },
-          { id: "payment" as const, label: "Payment Methods", icon: CreditCard },
-          { id: "packages" as const, label: "Packages", icon: Package },
-        ]).map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            onClick={() => setTab(id)}
-            className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium ${
-              tab === id ? "bg-(--color-accent-light) text-(--color-accent-dark)" : "text-stone-500 hover:bg-stone-50"
-            }`}
-          >
-            <Icon size={14} />
-            {label}
-          </button>
-        ))}
-      </div>
-
-      {/* Invoices */}
-      {tab === "invoices" && (
-        <div className="bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="text-left text-xs text-stone-400 border-b border-stone-100">
-                  <th className="px-5 py-3 font-medium">Date</th>
-                  <th className="px-5 py-3 font-medium">Items</th>
-                  <th className="px-5 py-3 font-medium">Amount</th>
-                  <th className="px-5 py-3 font-medium">Status</th>
-                  <th className="px-5 py-3 font-medium"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {INVOICES.map(inv => (
-                  <tr key={inv.id} className="border-b border-stone-50 hover:bg-stone-50/50">
-                    <td className="px-5 py-3 text-stone-700">
-                      {new Date(inv.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
-                    </td>
-                    <td className="px-5 py-3 text-stone-600">{inv.items.join(", ")}</td>
-                    <td className="px-5 py-3 font-medium text-stone-800">${inv.amount.toFixed(2)}</td>
-                    <td className="px-5 py-3">
-                      <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_STYLES[inv.status]}`}>
-                        {inv.status}
-                      </span>
-                    </td>
-                    <td className="px-5 py-3">
-                      <button className="text-stone-400 hover:text-stone-600">
-                        <Download size={14} />
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
+    <div className="p-6 space-y-8">
+      <h2 className="text-2xl font-semibold">Billing & Payments</h2>
 
       {/* Payment Methods */}
-      {tab === "payment" && (
-        <div className="space-y-4">
-          <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm space-y-3">
-            {SAVED_PAYMENT_METHODS.map(pm => (
-              <div key={pm.id} className="flex items-center justify-between py-2 border-b border-stone-50 last:border-0">
+      <section>
+        <h3 className="text-lg font-medium mb-4">Payment Methods</h3>
+        {paymentMethods.length === 0 ? (
+          <p className="text-gray-500 italic">No payment methods on file</p>
+        ) : (
+          <div className="space-y-3">
+            {paymentMethods.map((method) => (
+              <div
+                key={`${method.brand}-${method.last4}`}
+                className="flex items-center justify-between p-4 border rounded-lg"
+              >
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-stone-100 flex items-center justify-center">
-                    <CreditCard size={18} className="text-stone-500" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-stone-800 capitalize">{pm.type} •••• {pm.last4}</p>
-                    <p className="text-xs text-stone-400">Expires {pm.expiry}</p>
+                  <div className="w-10 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">
+                    {method.brand.toUpperCase()}
                   </div>
+                  <span>**** {method.last4}</span>
+                  <span className="text-gray-500">
+                    {method.expiryMonth}/{method.expiryYear}
+                  </span>
                 </div>
-                <div className="flex items-center gap-2">
-                  {pm.isDefault && (
-                    <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Default</span>
-                  )}
-                  {!readOnly && (
-                    <button className="p-1 text-stone-400 hover:text-red-500">
-                      <Trash2 size={14} />
-                    </button>
-                  )}
+                {!readOnly && (
+                  <button className="text-sm text-blue-600 hover:underline">
+                    Remove
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Packages */}
+      <section>
+        <h3 className="text-lg font-medium mb-4">Packages</h3>
+        {packages.length === 0 ? (
+          <p className="text-gray-500 italic">No packages purchased</p>
+        ) : (
+          <div className="space-y-3">
+            {packages.map((pkg, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between p-4 border rounded-lg"
+              >
+                <span>{pkg.name}</span>
+                <span className="text-gray-600">{pkg.remaining} remaining</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Invoices */}
+      <section>
+        <h3 className="text-lg font-medium mb-4">Invoice History</h3>
+        {invoices.length === 0 ? (
+          <p className="text-gray-500 italic">No invoices yet</p>
+        ) : (
+          <div className="space-y-3">
+            {invoices.map((invoice) => (
+              <div
+                key={invoice.id}
+                className="flex items-center justify-between p-4 border rounded-lg"
+              >
+                <div className="flex flex-col">
+                  <span className="font-medium">
+                    {invoice.description || `Invoice ${invoice.id.slice(0, 8)}`}
+                  </span>
+                  <span className="text-sm text-gray-500">{invoice.date}</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  <span className="font-semibold">
+                    {formatCents(invoice.totalCents)}
+                  </span>
+                  <span
+                    className={`px-2 py-1 text-xs rounded ${
+                      invoice.status === "pending"
+                        ? "bg-yellow-100 text-yellow-800"
+                        : "bg-green-100 text-green-800"
+                    }`}
+                  >
+                    {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+                  </span>
                 </div>
               </div>
             ))}
-            {!readOnly && (
-              <button className="flex items-center gap-2 text-sm text-(--color-accent-dark) font-medium hover:underline mt-2">
-                <Plus size={14} />
-                Add Payment Method
-              </button>
-            )}
           </div>
-
-          {/* Autopay */}
-          <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-lg bg-(--color-accent-light) flex items-center justify-center">
-                  <Zap size={18} className="text-(--color-accent)" />
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-stone-800">Autopay</p>
-                  <p className="text-xs text-stone-500">Automatically charge after each appointment</p>
-                </div>
-              </div>
-              {!readOnly ? (
-                <button
-                  onClick={() => setAutopay(!autopay)}
-                  className={`w-12 h-6 rounded-full transition-colors ${autopay ? "bg-(--color-accent)" : "bg-stone-300"}`}
-                >
-                  <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ${autopay ? "translate-x-6" : "translate-x-0.5"}`} />
-                </button>
-              ) : (
-                <span className="text-xs text-stone-400">{autopay ? "Enabled" : "Disabled"}</span>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Packages */}
-      {tab === "packages" && (
-        <div className="space-y-4">
-          {PREPAID_PACKAGES.map(pkg => (
-            <div key={pkg.id} className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
-              <div className="flex items-center gap-3 mb-3">
-                <Package size={20} className="text-(--color-accent)" />
-                <h3 className="font-medium text-stone-800">{pkg.name}</h3>
-              </div>
-              <div className="flex items-center gap-4 mb-3">
-                <div>
-                  <p className="text-2xl font-bold text-stone-800">{pkg.totalCredits - pkg.usedCredits}</p>
-                  <p className="text-xs text-stone-500">remaining of {pkg.totalCredits}</p>
-                </div>
-                <div className="flex-1 bg-stone-100 rounded-full h-3 overflow-hidden">
-                  <div
-                    className="bg-(--color-accent) h-full rounded-full"
-                    style={{ width: `${((pkg.totalCredits - pkg.usedCredits) / pkg.totalCredits) * 100}%` }}
-                  />
-                </div>
-              </div>
-              <p className="text-xs text-stone-400">Expires {new Date(pkg.expiresAt).toLocaleDateString()}</p>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Tip Modal */}
-      {showTipModal && !readOnly && (
-        <TipModal onClose={() => setShowTipModal(false)} />
-      )}
-    </div>
-  );
-}
-
-function TipModal({ onClose }: { onClose: () => void }) {
-  const [tipPercent, setTipPercent] = useState<number | null>(20);
-  const [customTip, setCustomTip] = useState("");
-  const presets = [15, 20, 25];
-
-  return (
-    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-      <div className="bg-white rounded-2xl shadow-xl max-w-sm w-full p-6">
-        <h2 className="font-semibold text-stone-800 mb-4">Add a Tip</h2>
-        <div className="flex gap-2 mb-4">
-          {presets.map(pct => (
-            <button
-              key={pct}
-              onClick={() => { setTipPercent(pct); setCustomTip(""); }}
-              className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
-                tipPercent === pct ? "border-(--color-accent) bg-(--color-accent-lighter) text-(--color-accent-dark)" : "border-stone-200 text-stone-600"
-              }`}
-            >
-              {pct}%
-            </button>
-          ))}
-          <button
-            onClick={() => { setTipPercent(null); }}
-            className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
-              tipPercent === null ? "border-(--color-accent) bg-(--color-accent-lighter) text-(--color-accent-dark)" : "border-stone-200 text-stone-600"
-            }`}
-          >
-            Custom
-          </button>
-        </div>
-        {tipPercent === null && (
-          <input
-            type="number"
-            placeholder="Enter amount"
-            value={customTip}
-            onChange={e => setCustomTip(e.target.value)}
-            className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-4"
-          />
         )}
-        <div className="flex gap-2">
-          <button onClick={onClose} className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm">Cancel</button>
-          <button onClick={onClose} className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium">Add Tip</button>
-        </div>
-      </div>
+      </section>
     </div>
   );
 }
+
+export default BillingPayments;
\ No newline at end of file
diff --git a/apps/web/src/portal/sections/Communication.tsx b/apps/web/src/portal/sections/Communication.tsx
index a965054..5f33793 100644
--- a/apps/web/src/portal/sections/Communication.tsx
+++ b/apps/web/src/portal/sections/Communication.tsx
@@ -1,7 +1,28 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Send, Check, CheckCheck, Bell, Mail, Smartphone, Megaphone, FileText, CreditCard } from "lucide-react";
-import { MESSAGES, BUSINESS_NAME } from "../mockData.js";
-import type { Message } from "../mockData.js";
+
+interface Message {
+  id: string;
+  sender: "customer" | "business";
+  senderName: string;
+  text: string;
+  timestamp: string;
+  read: boolean;
+}
+
+interface NotificationCategory {
+  email: boolean;
+  sms: boolean;
+  push: boolean;
+}
+
+interface NotificationPreferences {
+  appointmentReminders: NotificationCategory;
+  vaccinationAlerts: NotificationCategory;
+  promotional: NotificationCategory;
+  reportCards: NotificationCategory;
+  invoiceReceipts: NotificationCategory;
+}
 
 interface Props {
   readOnly: boolean;
@@ -39,15 +60,31 @@ export function Communication({ readOnly }: Props) {
 }
 
 function MessageThread({ readOnly }: { readOnly: boolean }) {
-  const [messages, setMessages] = useState<Message[]>(MESSAGES);
+  const [messages, setMessages] = useState<Message[]>([]);
   const [newMessage, setNewMessage] = useState("");
+  const [businessName, setBusinessName] = useState<string>("Business");
+
+  useEffect(() => {
+    async function fetchBranding() {
+      try {
+        const response = await fetch("/api/branding");
+        if (response.ok) {
+          const data = await response.json();
+          setBusinessName(data.businessName || data.name || "Business");
+        }
+      } catch {
+        setBusinessName("Business");
+      }
+    }
+    fetchBranding();
+  }, []);
 
   const handleSend = () => {
     if (!newMessage.trim() || readOnly) return;
     const msg: Message = {
       id: `m-${Date.now()}`,
       sender: "customer",
-      senderName: "Sarah",
+      senderName: "You",
       text: newMessage.trim(),
       timestamp: new Date().toISOString(),
       read: false,
@@ -59,32 +96,36 @@ function MessageThread({ readOnly }: { readOnly: boolean }) {
   return (
     <div className="bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden flex flex-col" style={{ height: "500px" }}>
       <div className="px-5 py-3 border-b border-stone-200 bg-stone-50">
-        <p className="text-sm font-medium text-stone-800">{BUSINESS_NAME}</p>
+        <p className="text-sm font-medium text-stone-800">{businessName}</p>
         <p className="text-xs text-stone-400">Usually replies within a few hours</p>
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {messages.map(msg => (
-          <div key={msg.id} className={`flex ${msg.sender === "customer" ? "justify-end" : "justify-start"}`}>
-            <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 ${
-              msg.sender === "customer"
-                ? "bg-(--color-accent) text-white rounded-br-md"
-                : "bg-stone-100 text-stone-800 rounded-bl-md"
-            }`}>
-              <p className="text-sm">{msg.text}</p>
-              <div className={`flex items-center gap-1 mt-1 ${msg.sender === "customer" ? "justify-end" : ""}`}>
-                <span className={`text-xs ${msg.sender === "customer" ? "text-white/60" : "text-stone-400"}`}>
-                  {new Date(msg.timestamp).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}
-                </span>
-                {msg.sender === "customer" && (
-                  msg.read
-                    ? <CheckCheck size={12} className="text-white/60" />
-                    : <Check size={12} className="text-white/60" />
-                )}
+        {messages.length === 0 ? (
+          <p className="text-stone-400 text-center text-sm italic">No messages yet</p>
+        ) : (
+          messages.map(msg => (
+            <div key={msg.id} className={`flex ${msg.sender === "customer" ? "justify-end" : "justify-start"}`}>
+              <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 ${
+                msg.sender === "customer"
+                  ? "bg-(--color-accent) text-white rounded-br-md"
+                  : "bg-stone-100 text-stone-800 rounded-bl-md"
+              }`}>
+                <p className="text-sm">{msg.text}</p>
+                <div className={`flex items-center gap-1 mt-1 ${msg.sender === "customer" ? "justify-end" : ""}`}>
+                  <span className={`text-xs ${msg.sender === "customer" ? "text-white/60" : "text-stone-400"}`}>
+                    {new Date(msg.timestamp).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}
+                  </span>
+                  {msg.sender === "customer" && (
+                    msg.read
+                      ? <CheckCheck size={12} className="text-white/60" />
+                      : <Check size={12} className="text-white/60" />
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          ))
+        )}
       </div>
 
       {!readOnly && (
@@ -111,7 +152,7 @@ function MessageThread({ readOnly }: { readOnly: boolean }) {
 }
 
 function NotificationPreferences({ readOnly }: { readOnly: boolean }) {
-  const [prefs, setPrefs] = useState({
+  const [prefs, setPrefs] = useState<NotificationPreferences>({
     appointmentReminders: { email: true, sms: true, push: true },
     vaccinationAlerts: { email: true, sms: false, push: true },
     promotional: { email: false, sms: false, push: false },
@@ -119,7 +160,7 @@ function NotificationPreferences({ readOnly }: { readOnly: boolean }) {
     invoiceReceipts: { email: true, sms: false, push: false },
   });
 
-  type PrefKey = keyof typeof prefs;
+  type PrefKey = keyof NotificationPreferences;
   type ChannelKey = "email" | "sms" | "push";
 
   const toggle = (category: PrefKey, channel: ChannelKey) => {
@@ -194,3 +235,5 @@ function NotificationPreferences({ readOnly }: { readOnly: boolean }) {
     </div>
   );
 }
+
+export default Communication;
diff --git a/apps/web/src/portal/sections/Dashboard.tsx b/apps/web/src/portal/sections/Dashboard.tsx
index baffebe..5820365 100644
--- a/apps/web/src/portal/sections/Dashboard.tsx
+++ b/apps/web/src/portal/sections/Dashboard.tsx
@@ -1,11 +1,53 @@
+import { useState, useEffect } from "react";
 import { Calendar, Clock, PawPrint, CreditCard, Star, ChevronRight, AlertTriangle } from "lucide-react";
-import { PETS, UPCOMING_APPOINTMENTS, PAST_APPOINTMENTS, INVOICES, LOYALTY, BUSINESS_NAME } from "../mockData.js";
 
-interface Props {
+interface DashboardProps {
+  sessionId: string | null;
+  clientName: string;
   onNavigate: (section: "appointments" | "pets" | "billing" | "reports") => void;
   readOnly: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onReschedule?: (appointment: any) => void;
+  onReschedule: (appointmentId: string) => void;
+}
+
+interface Appointment {
+  id: string;
+  date: string;
+  time: string;
+  petName: string;
+  serviceName: string;
+  status: string;
+  staffName?: string;
+  services?: string[];
+  addOns?: string[];
+  groomerName?: string;
+}
+
+interface Pet {
+  id: string;
+  name: string;
+  species: string;
+  breed?: string;
+  dateOfBirth?: string;
+  weight?: number;
+  healthAlerts: string[];
+  photo?: string;
+  vaccinations?: { name: string; status: string }[];
+}
+
+interface Invoice {
+  id: string;
+  invoiceNumber: string;
+  date: string;
+  amount: number;
+  status: string;
+  dueDate?: string;
+  items: { description: string; price: number }[];
+}
+
+interface Branding {
+  clinicName: string;
+  logoUrl?: string;
+  primaryColor: string;
 }
 
 function daysUntil(dateStr: string): number {
@@ -17,27 +59,154 @@ function daysUntil(dateStr: string): number {
 }
 
 function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+  return new Date(dateStr).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  });
 }
 
-export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
-  const nextAppt = UPCOMING_APPOINTMENTS[0];
-  const outstanding = INVOICES.filter(i => i.status === "outstanding").reduce((sum, i) => sum + i.amount, 0);
-  const recentEvents = [
-    ...PAST_APPOINTMENTS.slice(0, 3).map(a => ({
-      id: a.id, date: a.date, text: `${a.petName} — ${a.services.join(", ")}`, type: "appointment" as const,
-    })),
-    ...INVOICES.filter(i => i.status === "paid").slice(0, 2).map(i => ({
-      id: i.id, date: i.date, text: `Invoice paid — $${i.amount}`, type: "payment" as const,
-    })),
-  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, 5);
+export function Dashboard({
+  sessionId,
+  clientName,
+  onNavigate,
+  readOnly,
+  onReschedule,
+}: DashboardProps) {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [pets, setPets] = useState<Pet[]>([]);
+  const [pendingInvoices, setPendingInvoices] = useState<Invoice[]>([]);
+  const [branding, setBranding] = useState<Branding | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!sessionId) {
+        setLoading(false);
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const headers = {
+          "x-session-id": sessionId,
+        };
+
+        const [appointmentsRes, petsRes, invoicesRes, brandingRes] = await Promise.all([
+          fetch("/api/portal/appointments", { headers }),
+          fetch("/api/portal/pets", { headers }),
+          fetch("/api/portal/invoices", { headers }),
+          fetch("/api/branding", { headers }),
+        ]);
+
+        if (!appointmentsRes.ok || !petsRes.ok || !invoicesRes.ok || !brandingRes.ok) {
+          throw new Error("Failed to fetch dashboard data");
+        }
+
+        const appointmentsData = await appointmentsRes.json();
+        const petsData = await petsRes.json();
+        const invoicesData = await invoicesRes.json();
+        const brandingData = await brandingRes.json();
+
+        setAppointments(appointmentsData.appointments || []);
+        setPets(petsData.pets || []);
+
+        // Filter for pending invoices only (not "outstanding")
+        const pending = (invoicesData.invoices || []).filter(
+          (invoice: Invoice) => invoice.status === "pending"
+        );
+        setPendingInvoices(pending);
+
+        setBranding(brandingData);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "An error occurred");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [sessionId]);
+
+  const getUpcomingAppointments = (): Appointment[] => {
+    const now = new Date();
+    return appointments
+      .filter((apt) => new Date(`${apt.date}T${apt.time}`) >= now)
+      .sort(
+        (a, b) =>
+          new Date(`${a.date}T${a.time}`).getTime() -
+          new Date(`${b.date}T${b.time}`).getTime()
+      )
+      .slice(0, 5);
+  };
+
+  const getPetHealthAlerts = (): { petName: string; alert: string }[] => {
+    return pets
+      .filter((pet) => pet.healthAlerts && pet.healthAlerts.length > 0)
+      .flatMap((pet) =>
+        pet.healthAlerts.map((alert) => ({ petName: pet.name, alert }))
+      );
+  };
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(amount);
+  };
+
+  const getPendingBalance = (): number => {
+    return pendingInvoices.reduce((sum, invoice) => sum + invoice.amount, 0);
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-(--color-accent)" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="bg-red-50 border border-red-200 rounded-2xl p-5">
+          <p className="text-red-700">Error: {error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!sessionId) {
+    return (
+      <div className="space-y-6">
+        <div className="bg-stone-100 rounded-2xl p-5 text-center">
+          <p className="text-stone-600">Please sign in to view your dashboard.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const upcomingAppointments = getUpcomingAppointments();
+  const healthAlerts = getPetHealthAlerts();
+  const pendingBalance = getPendingBalance();
+  const nextAppt = upcomingAppointments[0];
 
   return (
     <div className="space-y-6">
       {/* Welcome */}
       <div>
-        <h2 className="text-2xl font-semibold text-stone-800">Welcome back, Sarah</h2>
-        <p className="text-stone-500 text-sm mt-1">Here's what's happening at {BUSINESS_NAME}</p>
+        <h2 className="text-2xl font-semibold text-stone-800">
+          Welcome back, {clientName}
+        </h2>
+        <p className="text-stone-500 text-sm mt-1">
+          Here's what's happening at {branding?.clinicName || "your clinic"}
+        </p>
       </div>
 
       {/* Next Appointment */}
@@ -55,11 +224,16 @@ export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
           <div className="flex flex-col sm:flex-row sm:items-center gap-4">
             <div className="flex-1">
               <p className="text-lg font-semibold text-stone-800">
-                {nextAppt.petName} with {nextAppt.groomerName}
+                {nextAppt.petName}
+                {nextAppt.groomerName && ` with ${nextAppt.groomerName}`}
+                {nextAppt.staffName && ` with ${nextAppt.staffName}`}
               </p>
               <p className="text-stone-600 text-sm mt-1">
-                {nextAppt.services.join(", ")}
-                {nextAppt.addOns.length > 0 && ` + ${nextAppt.addOns.join(", ")}`}
+                {nextAppt.services?.join(", ") ||
+                  nextAppt.serviceName ||
+                  "Appointment"}
+                {nextAppt.addOns && nextAppt.addOns.length > 0 &&
+                  ` + ${nextAppt.addOns.join(", ")}`}
               </p>
               <div className="flex items-center gap-4 mt-2 text-sm text-stone-500">
                 <span className="flex items-center gap-1">
@@ -73,14 +247,16 @@ export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
               </div>
             </div>
             <div className="text-center sm:text-right">
-              <div className="text-3xl font-bold text-(--color-accent-dark)">{daysUntil(nextAppt.date)}</div>
+              <div className="text-3xl font-bold text-(--color-accent-dark)">
+                {daysUntil(nextAppt.date)}
+              </div>
               <div className="text-xs text-stone-500">days away</div>
             </div>
           </div>
           {!readOnly && (
             <div className="flex gap-2 mt-4">
               <button
-                onClick={() => onReschedule?.(nextAppt)}
+                onClick={() => onReschedule(nextAppt.id)}
                 className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50"
               >
                 Reschedule
@@ -99,8 +275,8 @@ export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
       {/* Pet Cards & Loyalty */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {/* Pet Cards */}
-        {PETS.map(pet => {
-          const expiringVax = pet.vaccinations.filter(v => v.status !== "valid");
+        {pets.map((pet) => {
+          const petAlerts = pet.healthAlerts || [];
           return (
             <button
               key={pet.id}
@@ -109,59 +285,63 @@ export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
             >
               <div className="flex items-center gap-3 mb-3">
                 <div className="w-12 h-12 rounded-full bg-(--color-accent-light) flex items-center justify-center text-2xl">
-                  {pet.photo}
+                  {pet.photo || pet.name.charAt(0).toUpperCase()}
                 </div>
                 <div>
                   <p className="font-semibold text-stone-800">{pet.name}</p>
-                  <p className="text-xs text-stone-500">{pet.breed} · {pet.weight} lbs</p>
+                  <p className="text-xs text-stone-500">
+                    {pet.breed || pet.species}
+                    {pet.weight && ` · ${pet.weight} lbs`}
+                  </p>
                 </div>
               </div>
-              {expiringVax.length > 0 ? (
+              {petAlerts.length > 0 ? (
                 <div className="flex items-center gap-1.5 text-xs text-amber-700 bg-amber-50 px-2 py-1 rounded-lg">
                   <AlertTriangle size={12} />
-                  {expiringVax.map(v => v.name).join(", ")} {expiringVax[0]?.status === "expired" ? "expired" : "expiring soon"}
+                  {petAlerts.join(", ")}
                 </div>
               ) : (
                 <div className="flex items-center gap-1.5 text-xs text-green-700 bg-green-50 px-2 py-1 rounded-lg">
                   <PawPrint size={12} />
-                  All vaccinations current
+                  All health records current
                 </div>
               )}
             </button>
           );
         })}
 
-        {/* Loyalty Card */}
+        {/* Loyalty Card Placeholder */}
         <div className="bg-white rounded-2xl border border-stone-200 p-4 shadow-sm">
           <div className="flex items-center gap-2 text-sm font-medium text-(--color-accent-dark) mb-3">
             <Star size={16} />
             Loyalty Rewards
           </div>
-          <p className="text-2xl font-bold text-stone-800">{LOYALTY.points} <span className="text-sm font-normal text-stone-500">pts</span></p>
-          <div className="mt-2 bg-stone-100 rounded-full h-2 overflow-hidden">
-            <div
-              className="bg-(--color-accent) h-full rounded-full transition-all"
-              style={{ width: `${(LOYALTY.points / LOYALTY.nextRewardAt) * 100}%` }}
-            />
+          <div className="flex flex-col items-center justify-center py-4">
+            <div className="w-16 h-16 rounded-full bg-(--color-accent-light) flex items-center justify-center mb-3">
+              <Star size={32} className="text-(--color-accent)" />
+            </div>
+            <p className="text-lg font-bold text-stone-800">Coming Soon</p>
+            <p className="text-xs text-stone-500 text-center mt-1">
+              Earn points with every visit and redeem for exclusive rewards
+            </p>
           </div>
-          <p className="text-xs text-stone-500 mt-1">
-            {LOYALTY.nextRewardAt - LOYALTY.points} pts to {LOYALTY.rewardName}
-          </p>
         </div>
       </div>
 
-      {/* Outstanding Balance & Recent Activity */}
+      {/* Pending Balance & Recent Activity */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {/* Outstanding Balance */}
-        {outstanding > 0 && (
+        {/* Pending Invoices */}
+        {pendingInvoices.length > 0 && (
           <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between mb-4">
               <div>
                 <div className="flex items-center gap-2 text-sm font-medium text-stone-500 mb-1">
                   <CreditCard size={16} />
-                  Outstanding Balance
+                  Pending Invoices
                 </div>
-                <p className="text-2xl font-bold text-stone-800">${outstanding.toFixed(2)}</p>
+                <p className="text-2xl font-bold text-stone-800">
+                  {formatCurrency(pendingBalance)}
+                </p>
               </div>
               {!readOnly && (
                 <button
@@ -172,29 +352,51 @@ export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
                 </button>
               )}
             </div>
+            <div className="space-y-2">
+              {pendingInvoices.slice(0, 3).map((invoice) => (
+                <div
+                  key={invoice.id}
+                  className="flex items-center justify-between text-sm"
+                >
+                  <span className="text-stone-600">
+                    {invoice.invoiceNumber} - {formatCurrency(invoice.amount)}
+                  </span>
+                  <span className="text-xs text-stone-400">
+                    Due {invoice.dueDate ? formatDate(invoice.dueDate) : formatDate(invoice.date)}
+                  </span>
+                </div>
+              ))}
+            </div>
           </div>
         )}
 
-        {/* Recent Activity */}
-        <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
-          <h3 className="text-sm font-medium text-stone-500 mb-3">Recent Activity</h3>
-          <div className="space-y-2.5">
-            {recentEvents.map(evt => (
-              <div key={evt.id} className="flex items-center gap-3 text-sm">
-                <div className={`w-2 h-2 rounded-full shrink-0 ${evt.type === "payment" ? "bg-green-400" : "bg-(--color-accent)"}`} />
-                <span className="text-stone-600 flex-1">{evt.text}</span>
-                <span className="text-xs text-stone-400">{formatDate(evt.date)}</span>
-              </div>
-            ))}
+        {/* Health Alerts */}
+        {healthAlerts.length > 0 && (
+          <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+            <div className="flex items-center gap-2 text-sm font-medium text-amber-700 mb-3">
+              <AlertTriangle size={16} />
+              Health Alerts
+            </div>
+            <div className="space-y-2">
+              {healthAlerts.slice(0, 5).map((item, index) => (
+                <div key={index} className="flex items-center gap-3 text-sm">
+                  <div className="w-2 h-2 rounded-full shrink-0 bg-amber-400" />
+                  <span className="text-stone-600 flex-1">
+                    <span className="font-medium">{item.petName}:</span>{" "}
+                    {item.alert}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <button
+              onClick={() => onNavigate("pets")}
+              className="flex items-center gap-1 text-sm text-(--color-accent-dark) font-medium mt-3 hover:text-(--color-accent)"
+            >
+              View all <ChevronRight size={14} />
+            </button>
           </div>
-          <button
-            onClick={() => onNavigate("appointments")}
-            className="flex items-center gap-1 text-sm text-(--color-accent-dark) font-medium mt-3 hover:text-(--color-accent)"
-          >
-            View all <ChevronRight size={14} />
-          </button>
-        </div>
+        )}
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/portal/sections/PetProfiles.tsx b/apps/web/src/portal/sections/PetProfiles.tsx
index 956ba11..321e89d 100644
--- a/apps/web/src/portal/sections/PetProfiles.tsx
+++ b/apps/web/src/portal/sections/PetProfiles.tsx
@@ -1,52 +1,150 @@
-import { useState } from "react";
-import { PawPrint, Heart, Scissors, Syringe, AlertTriangle, CheckCircle, Clock, Upload, Edit3 } from "lucide-react";
-import { PETS, PAST_APPOINTMENTS } from "../mockData.js";
-import type { Pet } from "../mockData.js";
+import { useState, useEffect } from "react";
+import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2 } from "lucide-react";
 import { PetForm } from "./PetForm.js";
 
+interface Pet {
+  id: string;
+  name: string;
+  breed: string;
+  weight: number;
+  birthDate: string;
+  photoUrl: string | null;
+  notes: string | null;
+}
+
+interface Appointment {
+  id: string;
+  startTime: string;
+  endTime: string;
+  status: string;
+  confirmationStatus: string | null;
+  customerNotes: string | null;
+  groomerNotes: string | null;
+  reportCardId: string | null;
+  pet: { id: string; name: string; photo: string | null } | null;
+  service: { id: string } | null;
+  staff: { id: string; name: string } | null;
+}
+
+interface AppointmentsResponse {
+  upcoming: Appointment[];
+  past: Appointment[];
+}
+
 interface Props {
+  sessionId: string | null;
   readOnly: boolean;
 }
 
-type VaxStatus = "valid" | "expiring" | "expired";
-const VAX_STATUS_STYLES: Record<VaxStatus, { bg: string; text: string; icon: typeof CheckCircle }> = {
-  valid: { bg: "bg-green-100", text: "text-green-700", icon: CheckCircle },
-  expiring: { bg: "bg-amber-100", text: "text-amber-700", icon: Clock },
-  expired: { bg: "bg-red-100", text: "text-red-700", icon: AlertTriangle },
-};
+function buildHeaders(sessionId: string | null): Record<string, string> {
+  const headers: Record<string, string> = {};
+  if (sessionId) {
+    headers["X-Impersonation-Session-Id"] = sessionId;
+  }
+  return headers;
+}
 
-export function PetProfiles({ readOnly }: Props) {
-  const [selectedPetId, setSelectedPetId] = useState<string>(PETS[0]?.id ?? "");
-  const [activeTab, setActiveTab] = useState<"info" | "medical" | "grooming" | "vaccinations" | "history">("info");
+export function PetProfiles({ sessionId, readOnly }: Props) {
+  const [pets, setPets] = useState<Pet[]>([]);
+  const [appointments, setAppointments] = useState<AppointmentsResponse>({ upcoming: [], past: [] });
+  const [selectedPetId, setSelectedPetId] = useState<string>("");
+  const [activeTab, setActiveTab] = useState<"info" | "medical" | "grooming" | "history">("info");
   const [editingPetId, setEditingPetId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const pet = PETS.find(p => p.id === selectedPetId)!;
-  const petHistory = PAST_APPOINTMENTS.filter(a => a.petId === selectedPetId);
-  const editingPet = editingPetId ? PETS.find(p => p.id === editingPetId) ?? undefined : undefined;
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      setError(null);
+      try {
+        const [petsRes, apptsRes] = await Promise.all([
+          fetch("/api/portal/pets", { headers: buildHeaders(sessionId) }),
+          fetch("/api/portal/appointments", { headers: buildHeaders(sessionId) }),
+        ]);
+
+        if (!petsRes.ok) {
+          throw new Error("Failed to load pets");
+        }
+        if (!apptsRes.ok) {
+          throw new Error("Failed to load appointments");
+        }
+
+        const petsData = await petsRes.json();
+        const apptsData: AppointmentsResponse = await apptsRes.json();
+
+        setPets(petsData);
+        setAppointments(apptsData);
+
+        if (petsData.length > 0 && !selectedPetId) {
+          setSelectedPetId(petsData[0].id);
+        }
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to load data");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [sessionId]);
+
+  const selectedPet = pets.find(p => p.id === selectedPetId) ?? null;
+  const petHistory = appointments.past.filter(a => a.pet?.id === selectedPetId);
+  const editingPet = editingPetId ? pets.find(p => p.id === editingPetId) ?? null : null;
+
+  function handlePetSave(updatedPet: Pet) {
+    setPets(prev => prev.map(p => p.id === updatedPet.id ? updatedPet : p));
+    setEditingPetId(null);
+  }
 
   if (editingPet) {
     return (
       <PetForm
         pet={editingPet}
-        onSave={() => setEditingPetId(null)}
+        onSave={handlePetSave}
         onCancel={() => setEditingPetId(null)}
       />
     );
   }
 
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 size={24} className="animate-spin text-stone-400" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-500 text-sm">{error}</p>
+      </div>
+    );
+  }
+
+  if (pets.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-stone-400 text-sm">No pets found</p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
       {/* Pet Selector */}
-      <div className="flex gap-3">
-        {PETS.map(p => (
+      <div className="flex gap-3 overflow-x-auto pb-1">
+        {pets.map(p => (
           <button
             key={p.id}
             onClick={() => { setSelectedPetId(p.id); setActiveTab("info"); }}
-            className={`flex items-center gap-3 px-4 py-3 rounded-xl border transition-colors ${
+            className={`flex items-center gap-3 px-4 py-3 rounded-xl border transition-colors shrink-0 ${
               p.id === selectedPetId ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 bg-white hover:border-stone-300"
             }`}
           >
-            <span className="text-2xl">{p.photo}</span>
+            <span className="text-2xl">{p.photoUrl ? "🐾" : "🐾"}</span>
             <div className="text-left">
               <p className="font-medium text-stone-800 text-sm">{p.name}</p>
               <p className="text-xs text-stone-500">{p.breed}</p>
@@ -56,23 +154,31 @@ export function PetProfiles({ readOnly }: Props) {
       </div>
 
       {/* Profile Header */}
-      <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
-        <div className="flex items-center gap-4">
-          <div className="w-20 h-20 rounded-2xl bg-(--color-accent-light) flex items-center justify-center text-4xl">
-            {pet.photo}
+      {selectedPet && (
+        <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+          <div className="flex items-center gap-4">
+            <div className="w-20 h-20 rounded-2xl bg-(--color-accent-light) flex items-center justify-center text-4xl overflow-hidden">
+              {selectedPet.photoUrl ? (
+                <img src={selectedPet.photoUrl} alt={selectedPet.name} className="w-full h-full object-cover" />
+              ) : (
+                <span>🐾</span>
+              )}
+            </div>
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-stone-800">{selectedPet.name}</h2>
+              <p className="text-stone-500 text-sm">{selectedPet.breed} · {selectedPet.weight} lbs</p>
+              <p className="text-stone-400 text-xs mt-0.5">
+                Born {selectedPet.birthDate ? new Date(selectedPet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
+              </p>
+            </div>
+            {!readOnly && (
+              <button onClick={() => setEditingPetId(selectedPet.id)} className="p-2 hover:bg-stone-50 rounded-lg">
+                <Edit3 size={16} className="text-stone-400" />
+              </button>
+            )}
           </div>
-          <div className="flex-1">
-            <h2 className="text-xl font-semibold text-stone-800">{pet.name}</h2>
-            <p className="text-stone-500 text-sm">{pet.breed} · {pet.weight} lbs · {pet.sex === "male" ? "♂" : "♀"} {pet.spayedNeutered ? "(spayed/neutered)" : ""}</p>
-            <p className="text-stone-400 text-xs mt-0.5">Born {new Date(pet.dob).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</p>
-          </div>
-          {!readOnly && (
-            <button onClick={() => setEditingPetId(pet.id)} className="p-2 hover:bg-stone-50 rounded-lg">
-              <Edit3 size={16} className="text-stone-400" />
-            </button>
-          )}
         </div>
-      </div>
+      )}
 
       {/* Tabs */}
       <div className="flex gap-1 bg-white rounded-xl border border-stone-200 p-1 overflow-x-auto">
@@ -80,7 +186,6 @@ export function PetProfiles({ readOnly }: Props) {
           { id: "info", label: "Basic Info", icon: PawPrint },
           { id: "medical", label: "Medical", icon: Heart },
           { id: "grooming", label: "Grooming", icon: Scissors },
-          { id: "vaccinations", label: "Vaccinations", icon: Syringe },
           { id: "history", label: "History", icon: Clock },
         ] as const).map(({ id, label, icon: Icon }) => (
           <button
@@ -98,10 +203,9 @@ export function PetProfiles({ readOnly }: Props) {
 
       {/* Tab Content */}
       <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
-        {activeTab === "info" && <BasicInfoTab pet={pet} readOnly={readOnly} />}
-        {activeTab === "medical" && <MedicalTab pet={pet} readOnly={readOnly} />}
-        {activeTab === "grooming" && <GroomingTab pet={pet} readOnly={readOnly} />}
-        {activeTab === "vaccinations" && <VaccinationsTab pet={pet} readOnly={readOnly} />}
+        {activeTab === "info" && selectedPet && <BasicInfoTab pet={selectedPet} readOnly={readOnly} />}
+        {activeTab === "medical" && selectedPet && <MedicalTab pet={selectedPet} readOnly={readOnly} />}
+        {activeTab === "grooming" && selectedPet && <GroomingTab pet={selectedPet} readOnly={readOnly} />}
         {activeTab === "history" && <HistoryTab petHistory={petHistory} />}
       </div>
     </div>
@@ -121,11 +225,10 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
   return (
     <div>
       <InfoRow label="Name" value={pet.name} />
-      <InfoRow label="Breed" value={pet.breed} />
+      <InfoRow label="Breed" value={pet.breed || "Unknown"} />
       <InfoRow label="Weight" value={`${pet.weight} lbs`} />
-      <InfoRow label="Date of Birth" value={new Date(pet.dob).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })} />
-      <InfoRow label="Sex" value={pet.sex === "male" ? "Male" : "Female"} />
-      <InfoRow label="Spayed/Neutered" value={pet.spayedNeutered ? "Yes" : "No"} />
+      <InfoRow label="Date of Birth" value={pet.birthDate ? new Date(pet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
+      <InfoRow label="Notes" value={pet.notes || "None"} />
       {!readOnly && (
         <button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
           Upload Photo
@@ -138,12 +241,7 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
 function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
   return (
     <div>
-      <InfoRow label="Allergies" value={pet.allergies} />
-      <InfoRow label="Skin Conditions" value={pet.skinConditions} />
-      <InfoRow label="Anxiety Triggers" value={pet.anxietyTriggers} />
-      <InfoRow label="Aggression Notes" value={pet.aggressionNotes} />
-      <InfoRow label="Mobility Issues" value={pet.mobilityIssues} />
-      <InfoRow label="Medications" value={pet.medications} />
+      <InfoRow label="Notes" value={pet.notes || "No medical notes on file"} />
       {!readOnly && (
         <p className="mt-3 text-xs text-stone-400">
           Changes to medical notes will be flagged for staff review.
@@ -156,10 +254,7 @@ function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
 function GroomingTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
   return (
     <div>
-      <InfoRow label="Preferred Cut" value={pet.preferredCut} />
-      <InfoRow label="Shampoo Preference" value={pet.shampooPreference} />
-      <InfoRow label="Sensitive Areas" value={pet.sensitiveAreas} />
-      <InfoRow label="Standing Instructions" value={pet.standingInstructions} />
+      <InfoRow label="Notes" value={pet.notes || "No grooming notes on file"} />
       {!readOnly && (
         <button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
           Upload Reference Photo
@@ -169,58 +264,7 @@ function GroomingTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
   );
 }
 
-function VaccinationsTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
-  return (
-    <div>
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="text-left text-xs text-stone-400 border-b border-stone-100">
-              <th className="pb-2 font-medium">Vaccine</th>
-              <th className="pb-2 font-medium">Administered</th>
-              <th className="pb-2 font-medium">Expires</th>
-              <th className="pb-2 font-medium">Status</th>
-              <th className="pb-2 font-medium">Proof</th>
-            </tr>
-          </thead>
-          <tbody>
-            {pet.vaccinations.map(vax => {
-              const style = VAX_STATUS_STYLES[vax.status];
-              const StatusIcon = style.icon;
-              return (
-                <tr key={vax.name} className="border-b border-stone-50">
-                  <td className="py-2.5 font-medium text-stone-800">{vax.name}</td>
-                  <td className="py-2.5 text-stone-600">{new Date(vax.lastAdministered).toLocaleDateString()}</td>
-                  <td className="py-2.5 text-stone-600">{new Date(vax.expirationDate).toLocaleDateString()}</td>
-                  <td className="py-2.5">
-                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${style.bg} ${style.text}`}>
-                      <StatusIcon size={12} />
-                      {vax.status}
-                    </span>
-                  </td>
-                  <td className="py-2.5">
-                    {vax.documentUploaded ? (
-                      <span className="text-green-600 text-xs">Uploaded</span>
-                    ) : !readOnly ? (
-                      <button className="flex items-center gap-1 text-xs text-(--color-accent-dark) hover:underline">
-                        <Upload size={12} />
-                        Upload
-                      </button>
-                    ) : (
-                      <span className="text-stone-400 text-xs">Missing</span>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-function HistoryTab({ petHistory }: { petHistory: typeof PAST_APPOINTMENTS }) {
+function HistoryTab({ petHistory }: { petHistory: Appointment[] }) {
   return (
     <div className="space-y-3">
       {petHistory.length === 0 ? (
@@ -232,14 +276,18 @@ function HistoryTab({ petHistory }: { petHistory: typeof PAST_APPOINTMENTS }) {
               <Scissors size={14} />
             </div>
             <div className="flex-1">
-              <p className="text-sm font-medium text-stone-800">{appt.services.join(", ")}</p>
-              <p className="text-xs text-stone-500">with {appt.groomerName} · ${appt.price}</p>
+              <p className="text-sm font-medium text-stone-800">
+                {appt.service ? "Grooming Service" : "Appointment"}
+              </p>
+              <p className="text-xs text-stone-500">
+                with {appt.staff?.name || "Unknown Groomer"}
+              </p>
             </div>
             <span className="text-xs text-stone-400">
-              {new Date(appt.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
+              {new Date(appt.startTime).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
             </span>
             {appt.reportCardId && (
-              <span className="text-xs text-(--color-accent-dark) font-medium">Report →</span>
+              <span className="text-xs text-(--color-accent-dark) font-medium">Report</span>
             )}
           </div>
         ))
diff --git a/apps/web/src/portal/sections/ReportCards.tsx b/apps/web/src/portal/sections/ReportCards.tsx
index 8336285..f1136a3 100644
--- a/apps/web/src/portal/sections/ReportCards.tsx
+++ b/apps/web/src/portal/sections/ReportCards.tsx
@@ -1,9 +1,8 @@
-import { useState } from "react";
-import { FileText, Share2, Calendar, Smile, Meh, AlertCircle, ChevronRight } from "lucide-react";
-import { REPORT_CARDS } from "../mockData.js";
-import type { ReportCard } from "../mockData.js";
+import { useState, useEffect } from "react";
+import { FileText, Share2, Calendar, Smile, Meh, ChevronRight, Loader2 } from "lucide-react";
 
 type MoodKey = "calm" | "cooperative" | "anxious" | "wiggly";
+
 const MOOD_CONFIG: Record<MoodKey, { icon: typeof Smile; label: string; color: string; bg: string }> = {
   calm: { icon: Smile, label: "Calm & Relaxed", color: "text-green-700", bg: "bg-green-100" },
   cooperative: { icon: Smile, label: "Cooperative", color: "text-blue-700", bg: "bg-blue-100" },
@@ -11,8 +10,87 @@ const MOOD_CONFIG: Record<MoodKey, { icon: typeof Smile; label: string; color: s
   wiggly: { icon: Meh, label: "Wiggly", color: "text-purple-700", bg: "bg-purple-100" },
 };
 
+interface Appointment {
+  id: string;
+  petId: string;
+  serviceId: string;
+  groomerId: string | null;
+  date: string;
+  time: string;
+  status: string;
+  petName?: string;
+  serviceName?: string;
+  groomerName?: string;
+  reportCardId?: string;
+}
+
 export function ReportCards() {
-  const [selectedCard, setSelectedCard] = useState<ReportCard | null>(null);
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedCard, setSelectedCard] = useState<Appointment | null>(null);
+
+  useEffect(() => {
+    const fetchReportCards = async () => {
+      try {
+        const response = await fetch("/api/portal/appointments");
+
+        if (response.ok) {
+          const data = await response.json();
+          const allAppointments: Appointment[] = data.appointments || data || [];
+          const reportCardAppointments = allAppointments.filter(
+            (appt) => appt.reportCardId
+          );
+          setAppointments(reportCardAppointments);
+        } else {
+          setError("Failed to load report cards.");
+        }
+      } catch {
+        setError("Failed to load report cards. Please try again.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchReportCards();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="animate-spin text-stone-400" size={24} />
+        <span className="ml-3 text-stone-500">Loading report cards...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-600 mb-4">{error}</p>
+        <button
+          onClick={() => window.location.reload()}
+          className="px-4 py-2 bg-stone-100 text-stone-700 rounded-md hover:bg-stone-200"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (appointments.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-stone-100 flex items-center justify-center">
+          <FileText size={24} className="text-stone-400" />
+        </div>
+        <h3 className="text-lg font-medium text-stone-800 mb-1">No Report Cards Yet</h3>
+        <p className="text-sm text-stone-500">
+          Report cards from your grooming visits will appear here after your appointments.
+        </p>
+      </div>
+    );
+  }
 
   if (selectedCard) {
     return <ReportCardDetail card={selectedCard} onBack={() => setSelectedCard(null)} />;
@@ -23,8 +101,9 @@ export function ReportCards() {
       <p className="text-sm text-stone-500">Grooming report cards from your recent visits</p>
 
       <div className="space-y-4">
-        {REPORT_CARDS.map(card => {
-          const mood = MOOD_CONFIG[card.behaviorMood];
+        {appointments.map((card) => {
+          const moodKey: MoodKey = "cooperative";
+          const mood = MOOD_CONFIG[moodKey];
           const MoodIcon = mood.icon;
           return (
             <button
@@ -38,16 +117,20 @@ export function ReportCards() {
                 </div>
                 <div className="flex-1">
                   <div className="flex items-center justify-between">
-                    <h3 className="font-semibold text-stone-800">{card.petName}'s Report Card</h3>
+                    <h3 className="font-semibold text-stone-800">{card.petName || "Pet"}'s Report Card</h3>
                     <ChevronRight size={16} className="text-stone-400" />
                   </div>
                   <p className="text-sm text-stone-500 mt-0.5">
-                    {card.servicesPerformed.join(", ")} with {card.groomerName}
+                    {card.serviceName || "Grooming"} with {card.groomerName || "your groomer"}
                   </p>
                   <div className="flex items-center gap-3 mt-2">
                     <span className="flex items-center gap-1 text-xs text-stone-400">
                       <Calendar size={12} />
-                      {new Date(card.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
+                      {new Date(card.date).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      })}
                     </span>
                     <span className={`flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ${mood.bg} ${mood.color}`}>
                       <MoodIcon size={12} />
@@ -64,28 +147,40 @@ export function ReportCards() {
   );
 }
 
-function ReportCardDetail({ card, onBack }: { card: ReportCard; onBack: () => void }) {
-  const mood = MOOD_CONFIG[card.behaviorMood];
+function ReportCardDetail({ card, onBack }: { card: Appointment; onBack: () => void }) {
+  const moodKey: MoodKey = "cooperative";
+  const mood = MOOD_CONFIG[moodKey];
   const MoodIcon = mood.icon;
 
   return (
     <div className="space-y-6">
-      <button onClick={onBack} className="text-sm text-(--color-accent-dark) font-medium hover:underline">
-        ← Back to Report Cards
+      <button
+        onClick={onBack}
+        className="text-sm text-(--color-accent-dark) font-medium hover:underline"
+      >
+        Back to Report Cards
       </button>
 
       <div className="bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden">
         {/* Header */}
         <div className="bg-gradient-to-r from-(--color-accent-lighter) to-(--color-accent-light) p-6">
           <div className="flex items-center justify-between mb-1">
-            <h2 className="text-xl font-semibold text-stone-800">{card.petName}'s Grooming Report</h2>
+            <h2 className="text-xl font-semibold text-stone-800">
+              {card.petName || "Pet"}'s Grooming Report
+            </h2>
             <button className="flex items-center gap-1.5 px-3 py-1.5 bg-white/80 text-stone-700 rounded-lg text-sm font-medium hover:bg-white">
               <Share2 size={14} />
               Share
             </button>
           </div>
           <p className="text-sm text-stone-600">
-            {new Date(card.date).toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" })} · Groomer: {card.groomerName}
+            {new Date(card.date).toLocaleDateString("en-US", {
+              weekday: "long",
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            })}
+            {card.groomerName ? ` · Groomer: ${card.groomerName}` : ""}
           </p>
         </div>
 
@@ -99,14 +194,14 @@ function ReportCardDetail({ card, onBack }: { card: ReportCard; onBack: () => vo
                 <div className="w-full h-32 bg-stone-200 rounded-lg flex items-center justify-center text-stone-400 text-sm mb-2">
                   Photo placeholder
                 </div>
-                <p className="text-sm text-stone-600">{card.beforeDescription}</p>
+                <p className="text-sm text-stone-600">Before photo description not available.</p>
               </div>
               <div className="rounded-xl bg-(--color-accent-lighter) p-4">
                 <p className="text-xs font-medium text-(--color-accent) uppercase mb-2">After</p>
                 <div className="w-full h-32 bg-(--color-accent-light) rounded-lg flex items-center justify-center text-(--color-accent) text-sm mb-2">
                   Photo placeholder
                 </div>
-                <p className="text-sm text-stone-700">{card.afterDescription}</p>
+                <p className="text-sm text-stone-700">After photo description not available.</p>
               </div>
             </div>
           </div>
@@ -115,11 +210,9 @@ function ReportCardDetail({ card, onBack }: { card: ReportCard; onBack: () => vo
           <div>
             <h3 className="font-medium text-stone-800 mb-2">Services Performed</h3>
             <div className="flex flex-wrap gap-2">
-              {card.servicesPerformed.map(s => (
-                <span key={s} className="px-3 py-1 bg-stone-100 rounded-full text-sm text-stone-700">
-                  {s}
-                </span>
-              ))}
+              <span className="px-3 py-1 bg-stone-100 rounded-full text-sm text-stone-700">
+                {card.serviceName || "Grooming"}
+              </span>
             </div>
           </div>
 
@@ -132,37 +225,24 @@ function ReportCardDetail({ card, onBack }: { card: ReportCard; onBack: () => vo
             </div>
           </div>
 
-          {/* Condition Observations */}
-          {card.conditionObservations.length > 0 && (
-            <div>
-              <h3 className="font-medium text-stone-800 mb-2">Condition Observations</h3>
-              <div className="space-y-2">
-                {card.conditionObservations.map((obs, i) => (
-                  <div key={i} className="flex items-start gap-2 text-sm">
-                    <AlertCircle size={16} className="text-amber-500 mt-0.5 shrink-0" />
-                    <span className="text-stone-700">{obs}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
           {/* Groomer's Note */}
           <div className="bg-(--color-accent-lighter) rounded-xl p-4">
-            <h3 className="font-medium text-stone-800 mb-2">A Note from {card.groomerName}</h3>
-            <p className="text-sm text-stone-700 italic leading-relaxed">"{card.groomerNote}"</p>
+            <h3 className="font-medium text-stone-800 mb-2">
+              A Note from {card.groomerName || "Your Groomer"}
+            </h3>
+            <p className="text-sm text-stone-700 italic leading-relaxed">
+              "Report card details are not yet available. Please check back after your visit."
+            </p>
           </div>
 
           {/* Next Appointment CTA */}
           <div className="bg-white border border-stone-200 rounded-xl p-4 flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium text-stone-800">Next recommended visit</p>
-              <p className="text-xs text-stone-500">
-                {new Date(card.nextRecommendedDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
-              </p>
+              <p className="text-sm font-medium text-stone-800">Book your next visit</p>
+              <p className="text-xs text-stone-500">Schedule your next grooming appointment</p>
             </div>
             <button className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)">
-              Rebook Now
+              Book Now
             </button>
           </div>
         </div>