diff --git a/app/ui/public/b2-logo.png b/app/ui/public/b2-logo.png
new file mode 100644
index 00000000..7227f21a
Binary files /dev/null and b/app/ui/public/b2-logo.png differ
diff --git a/app/ui/src/app/edit/components/address/AddressCard.tsx b/app/ui/src/app/edit/components/address/AddressCard.tsx
index fa43eca7..3933fbe5 100644
--- a/app/ui/src/app/edit/components/address/AddressCard.tsx
+++ b/app/ui/src/app/edit/components/address/AddressCard.tsx
@@ -6,6 +6,10 @@ import AddressOverlay, {
 } from "@/app/edit/components/address/AddressOverlay";
 import { TIME_OPTIONS } from "@/app/edit/constants/timeOptions";
 import type { AddressCard as AddressCardType } from "@/app/edit/types/delivery";
+import {
+  hasRecipientContact,
+  recipientSummary,
+} from "@/app/edit/utils/recipientSummary";
 import {
   ADDRESS_ROW_EDIT_ROOT,
   ADDRESS_ROW_DESKTOP_WRAPPER,
@@ -257,15 +261,13 @@ export default function AddressCard({
                 <>
                   {/* Recipient column — locked */}
                   <div className={ADDRESS_ROW_LOCKED_RECIPIENT_COL}>
-                    {(a.recipientName || a.phoneNumber) && (
+                    {hasRecipientContact(a) && (
                       <button
                         type="button"
                         onClick={() => unlockAddress(a.id)}
                         className={`${ADDRESS_ROW_LOCKED_PLAIN_TEXT} ${ADDRESS_ROW_LOCKED_FIELD_BTN}`}
                       >
-                        {[a.recipientName, a.phoneNumber]
-                          .filter(Boolean)
-                          .join(", ")}
+                        {recipientSummary(a)}
                       </button>
                     )}
                     <button
@@ -553,11 +555,9 @@ export default function AddressCard({
             <div className={MOBILE_ADDR_SUMMARY_SECTION}>
               <span className={MOBILE_ADDR_EDIT_SECTION_LABEL}>Recipient</span>
               <div className={MOBILE_ADDR_LOCKED_RECIPIENT_LINES}>
-                {(a.recipientName || a.phoneNumber) && (
+                {hasRecipientContact(a) && (
                   <span className={MOBILE_ADDR_LOCKED_VALUE}>
-                    {[a.recipientName, a.phoneNumber]
-                      .filter(Boolean)
-                      .join(", ")}
+                    {recipientSummary(a)}
                   </span>
                 )}
                 <span
@@ -616,11 +616,9 @@ export default function AddressCard({
                     className={MOBILE_ADDR_LOCKED_FIELD_BTN}
                   >
                     <div className={MOBILE_ADDR_LOCKED_RECIPIENT_LINES}>
-                      {(a.recipientName || a.phoneNumber) && (
+                      {hasRecipientContact(a) && (
                         <span className={MOBILE_ADDR_LOCKED_VALUE}>
-                          {[a.recipientName, a.phoneNumber]
-                            .filter(Boolean)
-                            .join(", ")}
+                          {recipientSummary(a)}
                         </span>
                       )}
                       <span
diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index b3fb88cf..b8e02895 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -1,7 +1,15 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useHasOptimizeResults } from "../../../hooks/useHasOptimizeResults";
 import {
+  SIDEBAR_NAV_ITEM_ACTIVE,
   SIDEBAR_NAV_ITEM_DISABLED,
+  SIDEBAR_NAV_ITEM_INACTIVE,
+  SIDEBAR_NAV_LABEL_ACTIVE,
   SIDEBAR_NAV_LABEL_INACTIVE,
+  SIDEBAR_NAV_PILL_ACTIVE,
   SIDEBAR_NAV_PILL_INACTIVE,
 } from "@/app/edit/formStyles.v2";
 
@@ -12,26 +20,49 @@ const SIDEBAR_RESULTS_ICON = (
     height="24"
     viewBox="0 0 24 24"
     fill="none"
+    aria-hidden
   >
     <path
       d="M4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3792 3 20.1 3 19.75V5.75C3 5.53333 3.0625 5.34167 3.1875 5.175C3.3125 5.00833 3.48333 4.88333 3.7 4.8L9 3L15 5.1L19.65 3.3C19.9833 3.16667 20.2917 3.20417 20.575 3.4125C20.8583 3.62083 21 3.9 21 4.25V12.675C20.75 12.2917 20.4542 11.9417 20.1125 11.625C19.7708 11.3083 19.4 11.0333 19 10.8V5.7L16 6.85V10C15.65 10 15.3083 10.0292 14.975 10.0875C14.6417 10.1458 14.3167 10.2333 14 10.35V6.85L10 5.45V18.525L4.35 20.7ZM5 18.3L8 17.15V5.45L5 6.45V18.3ZM17.4125 17.5C17.7875 17.1667 17.9833 16.6667 18 16C18.0167 15.4333 17.8292 14.9583 17.4375 14.575C17.0458 14.1917 16.5667 14 16 14C15.4333 14 14.9583 14.1917 14.575 14.575C14.1917 14.9583 14 15.4333 14 16C14 16.5667 14.1917 17.0417 14.575 17.425C14.9583 17.8083 15.4333 18 16 18C16.5667 18 17.0375 17.8333 17.4125 17.5ZM16 20C14.9 20 13.9583 19.6083 13.175 18.825C12.3917 18.0417 12 17.1 12 16C12 14.9 12.3917 13.9583 13.175 13.175C13.9583 12.3917 14.9 12 16 12C17.1 12 18.0417 12.3917 18.825 13.175C19.6083 13.9583 20 14.9 20 16C20 16.3833 19.9542 16.7458 19.8625 17.0875C19.7708 17.4292 19.6333 17.75 19.45 18.05L22 20.6L20.6 22L18.05 19.45C17.75 19.6333 17.4292 19.7708 17.0875 19.8625C16.7458 19.9542 16.3833 20 16 20Z"
-      fill="var(--edit-text-primary)"
+      fill="currentColor"
     />
   </svg>
 );
 
 export default function SidebarResultsButton() {
+  const pathname = usePathname();
+  const isResultsPage = pathname === "/results";
+  const hasOptimizeResults = useHasOptimizeResults();
+  const hasStoredRoutes = !isResultsPage && hasOptimizeResults;
+
+  if (isResultsPage) {
+    return (
+      <span className={SIDEBAR_NAV_ITEM_ACTIVE} aria-current="page">
+        <span
+          className={`${SIDEBAR_NAV_PILL_ACTIVE} text-[var(--edit-foreground)]`}
+        >
+          {SIDEBAR_RESULTS_ICON}
+        </span>
+        <span className={SIDEBAR_NAV_LABEL_ACTIVE}>Results</span>
+      </span>
+    );
+  }
+
+  if (hasStoredRoutes) {
+    return (
+      <Link href="/results" className={SIDEBAR_NAV_ITEM_INACTIVE}>
+        <span className={SIDEBAR_NAV_PILL_INACTIVE}>
+          {SIDEBAR_RESULTS_ICON}
+        </span>
+        <span className={SIDEBAR_NAV_LABEL_INACTIVE}>Results</span>
+      </Link>
+    );
+  }
+
   return (
-    <Link
-      href="#"
-      className={SIDEBAR_NAV_ITEM_DISABLED}
-      aria-disabled="true"
-      tabIndex={-1}
-    >
-      {" "}
-      {/* TODO: add results page link when at least one route exists */}
+    <span className={SIDEBAR_NAV_ITEM_DISABLED} aria-disabled="true">
       <span className={SIDEBAR_NAV_PILL_INACTIVE}>{SIDEBAR_RESULTS_ICON}</span>
       <span className={SIDEBAR_NAV_LABEL_INACTIVE}>Results</span>
-    </Link>
+    </span>
   );
 }
diff --git a/app/ui/src/app/edit/edit.module.css b/app/ui/src/app/edit/edit.module.css
index 01f07bed..d2b771e0 100644
--- a/app/ui/src/app/edit/edit.module.css
+++ b/app/ui/src/app/edit/edit.module.css
@@ -16,7 +16,9 @@
 .root {
   /* ── Teal brand ──────────────────────────────────────────────── */
   --edit-teal-300: #57ac91;
+  --edit-teal-400: #6ab39d;
   --edit-teal-500: #397461;
+  --edit-foreground: #272725;
   --edit-teal-600: #267b67;
   --edit-teal-700: #265749;
   --edit-teal-alpha: #39746126;
diff --git a/app/ui/src/app/edit/hooks/useHasOptimizeResults.ts b/app/ui/src/app/edit/hooks/useHasOptimizeResults.ts
new file mode 100644
index 00000000..fbc3f8a4
--- /dev/null
+++ b/app/ui/src/app/edit/hooks/useHasOptimizeResults.ts
@@ -0,0 +1,13 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { readHasOptimizeResults } from "../utils/hasOptimizeResults";
+
+/** True when sessionStorage has optimized routes (client only). */
+export function useHasOptimizeResults(): boolean {
+  return useSyncExternalStore(
+    () => () => {},
+    readHasOptimizeResults,
+    () => false,
+  );
+}
diff --git a/app/ui/src/app/edit/utils/csvParserUtils.ts b/app/ui/src/app/edit/utils/csvParserUtils.ts
index edde8c05..9466def5 100644
--- a/app/ui/src/app/edit/utils/csvParserUtils.ts
+++ b/app/ui/src/app/edit/utils/csvParserUtils.ts
@@ -61,6 +61,7 @@ const COLUMN_ALIASES: Record<string, string[]> = {
   ],
   phone_number: [
     "phone_number",
+    "recipient_phone",
     "phone",
     "tel",
     "telephone",
diff --git a/app/ui/src/app/edit/utils/hasOptimizeResults.ts b/app/ui/src/app/edit/utils/hasOptimizeResults.ts
new file mode 100644
index 00000000..583f388c
--- /dev/null
+++ b/app/ui/src/app/edit/utils/hasOptimizeResults.ts
@@ -0,0 +1,16 @@
+import type { Route } from "@/app/results/types";
+
+/** True when sessionStorage has at least one route ready for /results. */
+export function readHasOptimizeResults(): boolean {
+  if (typeof window === "undefined") return false;
+
+  const stored = sessionStorage.getItem("optimizeResults");
+  if (!stored) return false;
+
+  try {
+    const parsed = JSON.parse(stored) as Route[];
+    return Array.isArray(parsed) && parsed.length > 0;
+  } catch {
+    return false;
+  }
+}
diff --git a/app/ui/src/app/edit/utils/recipientSummary.ts b/app/ui/src/app/edit/utils/recipientSummary.ts
new file mode 100644
index 00000000..3730f191
--- /dev/null
+++ b/app/ui/src/app/edit/utils/recipientSummary.ts
@@ -0,0 +1,19 @@
+import type { AddressCard } from "../types/delivery";
+
+/** Display string for locked recipient name + phone (middle dot when both set). */
+export function recipientSummary(
+  a: Pick<AddressCard, "recipientName" | "phoneNumber">,
+): string {
+  const n = a.recipientName.trim();
+  const p = a.phoneNumber.trim();
+  if (n && p) return `${n} · ${p}`;
+  if (n) return n;
+  if (p) return p;
+  return "—";
+}
+
+export function hasRecipientContact(
+  a: Pick<AddressCard, "recipientName" | "phoneNumber">,
+): boolean {
+  return Boolean(a.recipientName.trim() || a.phoneNumber.trim());
+}
diff --git a/app/ui/src/app/edit/utils/vroomToRoutes.ts b/app/ui/src/app/edit/utils/vroomToRoutes.ts
index 8eee8170..7e4f5e39 100644
--- a/app/ui/src/app/edit/utils/vroomToRoutes.ts
+++ b/app/ui/src/app/edit/utils/vroomToRoutes.ts
@@ -56,6 +56,7 @@ export function vroomToRoutes(
 
       // arrival is in seconds; % 86400 extracts the within-day portion for display
       const arrivalTimeStr = secondsToTimeString(step.arrival % 86400);
+      const deliveryQuantity = address?.deliveryQuantity ?? 0;
 
       return {
         id: step.job_external_id!,
@@ -64,7 +65,8 @@ export function vroomToRoutes(
         lat,
         lng,
         sequence: idx + 1,
-        capacityUsed: step.load?.[0] ?? 0,
+        capacityUsed:
+          deliveryQuantity > 0 ? deliveryQuantity : (step.load?.[0] ?? 0),
         timeWindow: {
           kind: inferTimeWindowKind(
             address?.deliveryTimeStart,
@@ -75,6 +77,8 @@ export function vroomToRoutes(
         note: address?.notes ?? "",
         addresseeName: address?.recipientName || undefined,
         phoneNumber: address?.phoneNumber || undefined,
+        deliveryWindowStart: address?.deliveryTimeStart?.trim() || undefined,
+        deliveryWindowEnd: address?.deliveryTimeEnd?.trim() || undefined,
       };
     });
 
diff --git a/app/ui/src/app/results/components/EditableStopItem.tsx b/app/ui/src/app/results/components/EditableStopItem.tsx
index a1a6ce6d..9ffdc702 100644
--- a/app/ui/src/app/results/components/EditableStopItem.tsx
+++ b/app/ui/src/app/results/components/EditableStopItem.tsx
@@ -3,7 +3,8 @@
 "use client";
 
 import { useState } from "react";
-import type { Stop } from "../types";
+import type { Stop, TimeWindow } from "../types";
+import { routeColorTint } from "../utils/routeColors";
 
 type EditableStopItemProps = {
   stop: Stop;
@@ -12,6 +13,115 @@ type EditableStopItemProps = {
   onSaveNote: (note: string) => void;
 };
 
+function formatTime12h(raw: string): string {
+  const t = raw.trim();
+  if (/am|pm/i.test(t)) return t;
+  const m = t.match(/^(\d{1,2}):(\d{2})$/);
+  if (!m) return t;
+  let h = parseInt(m[1]!, 10);
+  const min = m[2];
+  const ap = h >= 12 ? "PM" : "AM";
+  h = h % 12;
+  if (h === 0) h = 12;
+  return `${h}:${min} ${ap}`;
+}
+
+function formatTimeWindowLine(tw: TimeWindow | undefined): string {
+  if (!tw?.time) return "—";
+  const label = formatTime12h(tw.time);
+  if (tw.kind === "by") return `By ${label}`;
+  if (tw.kind === "at") return label;
+  return `From ${label}`;
+}
+
+function formatDeliveryWindow(stop: Stop): string {
+  const raw = stop.timeWindow?.time?.trim();
+  if (raw && /-|–/.test(raw)) return raw;
+  return formatTimeWindowLine(stop.timeWindow);
+}
+
+function formatContactLine(stop: Stop): string {
+  const name = stop.addresseeName?.trim();
+  const phone = stop.phoneNumber?.trim();
+  if (name && phone) return `${name} · ${phone}`;
+  if (name) return name;
+  if (phone) return phone;
+  return "—";
+}
+
+function PersonIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d="M10 10a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM4.5 16.5v-.75A4.25 4.25 0 0 1 8.75 11.5h2.5A4.25 4.25 0 0 1 15.5 15.75v.75"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ClockIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <circle
+        cx="10"
+        cy="10"
+        r="7.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M10 6.25V10l2.5 1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function PackageIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d="M3.5 7.5 10 4l6.5 3.5v6L10 17l-6.5-3.5v-6Z"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 7.5 10 11l6.5-3.5M10 11v5.5"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function NoteDocIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d="M6.5 3.5h5.5L15.5 7v8.25A1.25 1.25 0 0 1 14.25 16.5h-7.5A1.25 1.25 0 0 1 5.5 15.25v-10.5A1.25 1.25 0 0 1 6.75 3.5h-.25Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5 3.5V7h4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 export default function EditableStopItem({
   stop,
   accentColor,
@@ -19,81 +129,79 @@ export default function EditableStopItem({
   onSaveNote,
 }: EditableStopItemProps) {
   const [draft, setDraft] = useState(stop.note ?? "");
+  const contactText = formatContactLine(stop);
+  const timeText = formatDeliveryWindow(stop);
 
   return (
-    <div
-      className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm"
-      style={{
-        borderLeftWidth: "4px",
-        borderLeftColor: accentColor,
-        boxShadow: `inset 0 0 0 1px ${accentColor}22`,
-        background: `linear-gradient(to right, ${accentColor}22 0%, #ffffff 34px)`,
-      }}
-    >
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <span
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold text-white"
-            style={{ backgroundColor: accentColor }}
-          >
-            {stop.sequence}
-          </span>
-          <span className="text-xs font-semibold text-zinc-800 truncate">
-            {stop.address}
-          </span>
-        </div>
+    <div className="min-w-0 flex-1 rounded-2xl border border-zinc-200 bg-white p-3.5 shadow-sm">
+      <div className="flex items-start justify-between gap-3">
+        <p className="min-w-0 flex-1 text-[14px] font-semibold leading-snug text-zinc-900">
+          {stop.address}
+        </p>
         <span
-          className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white"
-          style={{ backgroundColor: accentColor }}
+          className="flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-1 text-[12px] font-semibold tabular-nums"
+          style={{
+            color: accentColor,
+            borderColor: accentColor,
+            backgroundColor: routeColorTint(accentColor, "1A"),
+          }}
         >
-          <span className="sr-only">Packages:</span>
-          <span aria-hidden>📦</span> {stop.capacityUsed ?? "—"}
+          <span className="sr-only">Boxes:</span>
+          <PackageIcon className="h-4 w-4 shrink-0" />
+          {typeof stop.capacityUsed === "number" ? stop.capacityUsed : "—"}
         </span>
       </div>
-      <div className="mt-1.5 space-y-0.5 text-xs text-zinc-600">
-        <div>
-          <span className="font-medium text-zinc-700">
-            Name of addressed to:
-          </span>{" "}
-          {stop.addresseeName ?? "—"}
+
+      <div className="mt-3 space-y-2 text-[13px] leading-snug">
+        <div className="flex items-start gap-2">
+          <PersonIcon className="mt-2 h-4 w-4 shrink-0 text-zinc-400" />
+          <div className="min-w-0 flex-1 rounded-lg border border-zinc-200 bg-white px-2.5 py-2 text-zinc-800">
+            {contactText}
+          </div>
         </div>
-        <div>
-          <span className="font-medium text-zinc-700">
-            Est time of arrival:
-          </span>{" "}
-          {stop.timeWindow?.time ?? "—"}
+        <div className="flex items-start gap-2">
+          <ClockIcon className="mt-2 h-4 w-4 shrink-0 text-zinc-400" />
+          <div className="min-w-0 flex-1 rounded-lg border border-zinc-200 bg-white px-2.5 py-2 text-zinc-700">
+            {timeText}
+          </div>
         </div>
       </div>
 
       {!isEditMode ? (
-        <div className="mt-2 rounded-md border border-zinc-200 bg-white px-2 py-1.5 text-xs text-zinc-600 shadow-sm">
-          <span className="font-medium text-zinc-700">Notes:</span>{" "}
-          {stop.note?.trim() ? (
-            stop.note
-          ) : (
-            <span className="text-zinc-400">No notes</span>
-          )}
+        <div className="mt-3 flex gap-2 rounded-xl border border-zinc-200 bg-zinc-50/80 px-3 py-2.5 text-[13px] text-zinc-700">
+          <NoteDocIcon className="mt-0.5 h-4 w-4 shrink-0 text-zinc-400" />
+          <div>
+            <span className="font-semibold text-zinc-800">Note:</span>{" "}
+            {stop.note?.trim() ? (
+              <span className="text-zinc-700">{stop.note}</span>
+            ) : (
+              <span className="text-zinc-400">No notes</span>
+            )}
+          </div>
         </div>
       ) : (
-        <div className="mt-2">
-          <label className="block text-xs font-medium text-zinc-700">
-            Notes
-          </label>
-          <textarea
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            rows={3}
-            className="mt-1 w-full resize-none rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-800 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500"
-            placeholder="Driver notes (e.g., Gate code is 1234)"
-          />
-          <div className="mt-2 flex justify-end">
-            <button
-              type="button"
-              onClick={() => onSaveNote(draft)}
-              className="inline-flex items-center rounded-md bg-amber-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500"
-            >
-              Save
-            </button>
+        <div className="mt-3 flex gap-2 rounded-xl border border-zinc-200 bg-white px-3 py-2.5">
+          <NoteDocIcon className="mt-1 h-4 w-4 shrink-0 text-zinc-400" />
+          <div className="min-w-0 flex-1">
+            <label className="text-[12px] font-semibold text-zinc-800">
+              Note
+            </label>
+            <textarea
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              rows={3}
+              className="mt-1.5 w-full resize-none rounded-lg border border-zinc-200 bg-zinc-50/50 px-2.5 py-2 text-[13px] text-zinc-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#7BCFC2]"
+              placeholder="Driver notes (e.g., Gate code is 1234)"
+            />
+            <div className="mt-2 flex justify-end">
+              <button
+                type="button"
+                onClick={() => onSaveNote(draft)}
+                className="inline-flex items-center rounded-full bg-[#7BCFC2] px-3 py-1.5 text-[12px] font-semibold text-[#1C1B1F] hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-[#7BCFC2]"
+              >
+                Save
+              </button>
+            </div>
           </div>
         </div>
       )}
diff --git a/app/ui/src/app/results/components/ExportEditWarningModal.tsx b/app/ui/src/app/results/components/ExportEditWarningModal.tsx
new file mode 100644
index 00000000..8e2156f1
--- /dev/null
+++ b/app/ui/src/app/results/components/ExportEditWarningModal.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { MODAL_OVERLAY } from "@/app/edit/formStyles";
+import editStyles from "@/app/edit/edit.module.css";
+import { useFocusTrap } from "@/app/edit/hooks/useFocusTrap";
+import { useIsClient } from "../hooks/useIsClient";
+
+type ExportEditWarningModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onDoneEditing: () => void;
+};
+
+export default function ExportEditWarningModal({
+  isOpen,
+  onClose,
+  onDoneEditing,
+}: ExportEditWarningModalProps) {
+  const isClient = useIsClient();
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+
+  if (!isOpen || !isClient) return null;
+
+  return createPortal(
+    <ExportEditWarningModalPanel
+      onClose={onClose}
+      onDoneEditing={onDoneEditing}
+    />,
+    document.body,
+  );
+}
+
+type ExportEditWarningModalPanelProps = {
+  onClose: () => void;
+  onDoneEditing: () => void;
+};
+
+function ExportEditWarningModalPanel({
+  onClose,
+  onDoneEditing,
+}: ExportEditWarningModalPanelProps) {
+  const panelRef = useFocusTrap<HTMLDivElement>(true);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose],
+  );
+
+  return (
+    <div
+      className={`${MODAL_OVERLAY} ${editStyles.root} font-sans-manrope`}
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="export-edit-warning-title"
+        className="relative mx-4 w-full max-w-md rounded-xl border border-zinc-200 bg-white p-6 text-zinc-900 shadow-lg"
+        onKeyDown={handleKeyDown}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
+          aria-label="Close"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            aria-hidden
+          >
+            <path
+              d="M1 1L13 13M13 1L1 13"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        <h2
+          id="export-edit-warning-title"
+          className="pr-10 text-lg font-semibold text-zinc-900"
+        >
+          Edit Mode Active
+        </h2>
+
+        <div
+          className="mt-4 flex items-start gap-2 rounded-md bg-amber-50 px-3 py-2.5"
+          role="alert"
+        >
+          <svg
+            className="mt-0.5 h-5 w-5 shrink-0 text-amber-600"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0010 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <p className="text-sm font-medium text-amber-800">
+            Unable to export while currently editing
+          </p>
+        </div>
+
+        <p className="mt-4 text-sm leading-relaxed text-zinc-800">
+          Please save your changes before exporting routes. This ensures the
+          exported data matches your current view.
+        </p>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3 py-2 text-sm font-semibold text-zinc-800 hover:text-zinc-900"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onDoneEditing}
+            className="h-9 rounded-md bg-[var(--edit-teal-400)] px-4 text-sm font-semibold text-[var(--edit-foreground)] hover:brightness-[0.97]"
+          >
+            Done editing
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/ui/src/app/results/components/ExportRoutesModal.tsx b/app/ui/src/app/results/components/ExportRoutesModal.tsx
new file mode 100644
index 00000000..b299e406
--- /dev/null
+++ b/app/ui/src/app/results/components/ExportRoutesModal.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { MODAL_OVERLAY } from "@/app/edit/formStyles";
+import editStyles from "@/app/edit/edit.module.css";
+import { useFocusTrap } from "@/app/edit/hooks/useFocusTrap";
+import { useIsClient } from "../hooks/useIsClient";
+import type { Route } from "../types";
+import { downloadRoutesAsJsonFiles } from "../utils/downloadRouteJson";
+import { routeColorHex } from "../utils/routeColors";
+
+type ExportRoutesModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  routes: Route[];
+};
+
+export default function ExportRoutesModal({
+  isOpen,
+  onClose,
+  routes,
+}: ExportRoutesModalProps) {
+  const isClient = useIsClient();
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+
+  if (!isOpen || !isClient) return null;
+
+  return createPortal(
+    <ExportRoutesModalPanel routes={routes} onClose={onClose} />,
+    document.body,
+  );
+}
+
+type ExportRoutesModalPanelProps = {
+  routes: Route[];
+  onClose: () => void;
+};
+
+function ExportRoutesModalPanel({
+  routes,
+  onClose,
+}: ExportRoutesModalPanelProps) {
+  const panelRef = useFocusTrap<HTMLDivElement>(true);
+  const [selectedIds, setSelectedIds] = useState(
+    () => new Set(routes.map((r) => r.vehicleId)),
+  );
+
+  const toggle = useCallback((vehicleId: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(vehicleId)) next.delete(vehicleId);
+      else next.add(vehicleId);
+      return next;
+    });
+  }, []);
+
+  const selectedCount = routes.filter((r) =>
+    selectedIds.has(r.vehicleId),
+  ).length;
+
+  const handleExportSelected = useCallback(() => {
+    downloadRoutesAsJsonFiles(routes, (route) =>
+      selectedIds.has(route.vehicleId),
+    );
+    onClose();
+  }, [routes, selectedIds, onClose]);
+
+  const handleExportAll = useCallback(() => {
+    downloadRoutesAsJsonFiles(routes, () => true);
+    onClose();
+  }, [routes, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose],
+  );
+
+  return (
+    <div
+      className={`${MODAL_OVERLAY} ${editStyles.root} font-sans-manrope`}
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="export-routes-title"
+        className="relative mx-4 flex max-h-[min(560px,85vh)] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white text-zinc-900 shadow-lg"
+        onKeyDown={handleKeyDown}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute right-3 top-3 z-10 flex h-9 w-9 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
+          aria-label="Close"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            aria-hidden
+          >
+            <path
+              d="M1 1L13 13M13 1L1 13"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        <div className="shrink-0 border-b border-zinc-100 px-5 pb-4 pt-5 pr-12">
+          <h2
+            id="export-routes-title"
+            className="whitespace-nowrap text-lg font-semibold text-zinc-800"
+          >
+            Export Routes
+          </h2>
+          <p className="mt-1 text-sm font-normal leading-snug text-black">
+            Select which routes to export as JSON files
+          </p>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-3">
+          {routes.length === 0 ? (
+            <p className="text-xs text-zinc-500">No routes to export.</p>
+          ) : (
+            <ul className="space-y-2">
+              {routes.map((route, idx) => {
+                const checked = selectedIds.has(route.vehicleId);
+                const stopCount = route.stops.length;
+                const vehicleLabel = route.vehicleType ?? "Vehicle";
+                const accent = routeColorHex(idx);
+                return (
+                  <li key={route.vehicleId}>
+                    <label className="flex cursor-pointer items-stretch gap-0 overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm transition-colors hover:bg-zinc-50">
+                      <span className="flex shrink-0 items-center border-r border-zinc-100 bg-zinc-50 px-2">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          onChange={() => toggle(route.vehicleId)}
+                          className="h-4 w-4 rounded border-zinc-300 text-[var(--edit-teal-400)] focus:ring-[var(--edit-teal-400)]"
+                          aria-label={`Include route ${idx + 1} for ${route.driverName}`}
+                        />
+                      </span>
+                      <span
+                        className="w-1 shrink-0"
+                        style={{ backgroundColor: accent }}
+                        aria-hidden
+                      />
+                      <span className="min-w-0 flex-1 py-3 pl-3 pr-3">
+                        <span className="block text-[15px] font-semibold leading-none text-zinc-900">
+                          Route {idx + 1} · {route.driverName}
+                        </span>
+                        <span className="mt-1 block text-[13px] font-medium leading-none text-zinc-500">
+                          {vehicleLabel} · {stopCount} stop
+                          {stopCount === 1 ? "" : "s"}
+                        </span>
+                      </span>
+                    </label>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-zinc-100 bg-zinc-50/80 px-5 py-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3 py-2 text-sm font-semibold text-zinc-600 hover:text-zinc-900"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={selectedCount === 0}
+            onClick={handleExportSelected}
+            className="h-9 shrink-0 rounded-md border border-[var(--edit-stone-700)] bg-white px-4 text-[14px] font-semibold leading-5 text-[var(--edit-foreground)] whitespace-nowrap hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Export ({selectedCount})
+          </button>
+          <button
+            type="button"
+            onClick={handleExportAll}
+            disabled={routes.length === 0}
+            className="h-9 shrink-0 rounded-md bg-[var(--edit-teal-400)] px-4 text-[14px] font-semibold leading-5 text-[var(--edit-foreground)] whitespace-nowrap hover:brightness-[0.97] disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Export All
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/ui/src/app/results/components/Map.tsx b/app/ui/src/app/results/components/Map.tsx
index 6d03ad37..5053ecb1 100644
--- a/app/ui/src/app/results/components/Map.tsx
+++ b/app/ui/src/app/results/components/Map.tsx
@@ -16,10 +16,49 @@ import {
   Marker,
   useGoogleMap,
 } from "@react-google-maps/api";
-import type { PendingPinMove, Route } from "../types";
+import type { HoveredStopInfo, PendingPinMove, Route, Stop } from "../types";
 import { routeColorHex } from "../utils/routeColors";
+import MapStopHoverOverlay from "./MapStopHoverOverlay";
 
 const DAVIS_CENTER = { lat: 38.5449, lng: -121.7405 };
+const MARKER_ICON_WIDTH = 28;
+const MARKER_ICON_HEIGHT = 40;
+
+let markerScaledSize: google.maps.Size | undefined;
+
+function getMarkerScaledSize(): google.maps.Size | undefined {
+  if (typeof google === "undefined") return undefined;
+  markerScaledSize ??= new google.maps.Size(
+    MARKER_ICON_WIDTH,
+    MARKER_ICON_HEIGHT,
+  );
+  return markerScaledSize;
+}
+
+// fillColor is always a route palette hex from routeColorHex, never user input.
+function markerSvgDataUrl(fillColor: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${MARKER_ICON_WIDTH}" height="${MARKER_ICON_HEIGHT}" viewBox="0 0 28 40"><path d="M14 1C7.373 1 2 6.373 2 13c0 9.246 12 24 12 24s12-14.754 12-24C26 6.373 20.627 1 14 1z" fill="${fillColor}" stroke="#ffffff" stroke-width="2"/><circle cx="14" cy="13" r="4.25" fill="#ffffff"/></svg>`;
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+}
+
+function createRoutePinElement(fillColor: string): HTMLElement {
+  const wrapper = document.createElement("div");
+  wrapper.style.width = `${MARKER_ICON_WIDTH}px`;
+  wrapper.style.height = `${MARKER_ICON_HEIGHT}px`;
+  // Advanced marker anchor is the content center; shift so the SVG tip sits on the stop.
+  wrapper.style.transform = "translate(-50%, -50%)";
+  wrapper.style.filter = "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))";
+
+  const img = document.createElement("img");
+  img.src = markerSvgDataUrl(fillColor);
+  img.width = MARKER_ICON_WIDTH;
+  img.height = MARKER_ICON_HEIGHT;
+  img.style.display = "block";
+  img.draggable = false;
+  img.alt = "";
+  wrapper.appendChild(img);
+  return wrapper;
+}
 
 function routePolylineOptions(
   strokeColor: string,
@@ -268,24 +307,75 @@ type AdvancedMarkersProps = {
     lat: number,
     lng: number,
   ) => void;
+  onStopHover: (info: HoveredStopInfo) => void;
+  onStopHoverEnd: () => void;
 };
 
 function stopKey(vehicleId: string, stopId: string): string {
   return `${vehicleId}:${stopId}`;
 }
 
+function hoverInfoForStop(
+  routeIndex: number,
+  route: Route,
+  stop: Stop,
+  pendingPinMove: PendingPinMove | null,
+): HoveredStopInfo {
+  const atPending =
+    pendingPinMove != null &&
+    pendingPinMove.vehicleId === route.vehicleId &&
+    pendingPinMove.stopId === stop.id;
+  return {
+    routeIndex,
+    stop,
+    lat: atPending ? pendingPinMove.lat : stop.lat,
+    lng: atPending ? pendingPinMove.lng : stop.lng,
+  };
+}
+
+function bindAdvancedMarkerHover(
+  marker: google.maps.marker.AdvancedMarkerElement,
+  info: HoveredStopInfo,
+  onStopHover: (info: HoveredStopInfo) => void,
+  onStopHoverEnd: () => void,
+): () => void {
+  const show = () => onStopHover(info);
+  const hide = () => onStopHoverEnd();
+  const overListener = marker.addListener("mouseover", show);
+  const outListener = marker.addListener("mouseout", hide);
+  const el = marker.element;
+  el?.addEventListener("mouseenter", show);
+  el?.addEventListener("mouseleave", hide);
+  return () => {
+    google.maps.event.removeListener(overListener);
+    google.maps.event.removeListener(outListener);
+    el?.removeEventListener("mouseenter", show);
+    el?.removeEventListener("mouseleave", hide);
+  };
+}
+
 function AdvancedMarkers({
   map,
   routes,
   isEditMode,
   pendingPinMove,
   onPendingPinMove,
+  onStopHover,
+  onStopHoverEnd,
 }: AdvancedMarkersProps) {
   const markersRef = useRef<google.maps.marker.AdvancedMarkerElement[]>([]);
   const markerByStopKeyRef = useRef<
     Record<string, google.maps.marker.AdvancedMarkerElement>
   >({});
+  const hoverCleanupRef = useRef<(() => void)[]>([]);
   const pendingPinMoveRef = useRef(pendingPinMove);
+  const onStopHoverRef = useRef(onStopHover);
+  const onStopHoverEndRef = useRef(onStopHoverEnd);
+
+  useEffect(() => {
+    onStopHoverRef.current = onStopHover;
+    onStopHoverEndRef.current = onStopHoverEnd;
+  }, [onStopHover, onStopHoverEnd]);
 
   useEffect(() => {
     pendingPinMoveRef.current = pendingPinMove;
@@ -307,7 +397,8 @@ function AdvancedMarkers({
 
         if (cancelled) return;
 
-        routes.forEach((route) => {
+        routes.forEach((route, routeIndex) => {
+          const accentColor = routeColorHex(routeIndex);
           const sorted = [...route.stops].sort(
             (a, b) => a.sequence - b.sequence,
           );
@@ -319,6 +410,7 @@ function AdvancedMarkers({
               position,
               title: stop.address,
               gmpDraggable: isEditMode,
+              content: createRoutePinElement(accentColor),
             });
 
             m.addListener("dragend", () => {
@@ -326,6 +418,22 @@ function AdvancedMarkers({
               if (!ll) return;
               onPendingPinMove(route.vehicleId, stop.id, ll.lat, ll.lng);
             });
+            m.addListener("dragstart", () => {
+              onStopHoverEndRef.current();
+            });
+
+            const hoverCleanup = bindAdvancedMarkerHover(
+              m,
+              hoverInfoForStop(
+                routeIndex,
+                route,
+                stop,
+                pendingPinMoveRef.current,
+              ),
+              (info) => onStopHoverRef.current(info),
+              () => onStopHoverEndRef.current(),
+            );
+            hoverCleanupRef.current.push(hoverCleanup);
 
             markers.push(m);
             markerByStopKeyRef.current[stopKey(route.vehicleId, stop.id)] = m;
@@ -333,6 +441,8 @@ function AdvancedMarkers({
         });
 
         if (cancelled) {
+          hoverCleanupRef.current.forEach((cleanup) => cleanup());
+          hoverCleanupRef.current = [];
           markers.forEach((m) => {
             google.maps.event.clearInstanceListeners(m);
             m.map = null;
@@ -354,6 +464,8 @@ function AdvancedMarkers({
 
     return () => {
       cancelled = true;
+      hoverCleanupRef.current.forEach((cleanup) => cleanup());
+      hoverCleanupRef.current = [];
       markersRef.current.forEach((m) => {
         google.maps.event.clearInstanceListeners(m);
         m.map = null;
@@ -395,6 +507,33 @@ export default function MapComponent({
   const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY ?? "";
   const mapId = process.env.NEXT_PUBLIC_GOOGLE_MAPS_MAP_ID || undefined;
   const [map, setMap] = useState<google.maps.Map | null>(null);
+  const [hoveredStop, setHoveredStop] = useState<HoveredStopInfo | null>(null);
+
+  const handleStopHover = useCallback((info: HoveredStopInfo) => {
+    setHoveredStop(info);
+  }, []);
+
+  const handleStopHoverEnd = useCallback(() => {
+    setHoveredStop(null);
+  }, []);
+
+  const displayedHoveredStop = useMemo((): HoveredStopInfo | null => {
+    if (!hoveredStop) return null;
+    if (!pendingPinMove) return hoveredStop;
+    const route = routes[hoveredStop.routeIndex];
+    if (
+      !route ||
+      pendingPinMove.vehicleId !== route.vehicleId ||
+      pendingPinMove.stopId !== hoveredStop.stop.id
+    ) {
+      return hoveredStop;
+    }
+    return {
+      ...hoveredStop,
+      lat: pendingPinMove.lat,
+      lng: pendingPinMove.lng,
+    };
+  }, [hoveredStop, pendingPinMove, routes]);
 
   const onMapLoad = useCallback(
     (mapInstance: google.maps.Map) => {
@@ -437,7 +576,7 @@ export default function MapComponent({
   }
 
   return (
-    <div className="w-full h-full rounded-lg">
+    <div className="relative h-full w-full rounded-lg">
       <LoadScriptNext
         googleMapsApiKey={apiKey}
         mapIds={mapId ? [mapId] : undefined}
@@ -456,6 +595,7 @@ export default function MapComponent({
             pendingPinMove={pendingPinMove}
             onRouteDistanceUpdate={onRouteDistanceUpdate}
           />
+          <MapStopHoverOverlay hovered={displayedHoveredStop} />
           {mapId && (
             <AdvancedMarkers
               map={map}
@@ -463,10 +603,15 @@ export default function MapComponent({
               isEditMode={isEditMode}
               pendingPinMove={pendingPinMove}
               onPendingPinMove={onPendingPinMove}
+              onStopHover={handleStopHover}
+              onStopHoverEnd={handleStopHoverEnd}
             />
           )}
           {!mapId &&
-            routes.map((route) => {
+            routes.map((route, routeIndex) => {
+              const accentColor = routeColorHex(routeIndex);
+              const iconUrl = markerSvgDataUrl(accentColor);
+              const scaledSize = getMarkerScaledSize();
               const sorted = [...route.stops].sort(
                 (a, b) => a.sequence - b.sequence,
               );
@@ -485,6 +630,18 @@ export default function MapComponent({
                         key={stop.id}
                         position={position}
                         title={stop.address}
+                        icon={
+                          scaledSize
+                            ? {
+                                url: iconUrl,
+                                scaledSize,
+                                anchor: new google.maps.Point(
+                                  MARKER_ICON_WIDTH / 2,
+                                  MARKER_ICON_HEIGHT,
+                                ),
+                              }
+                            : { url: iconUrl }
+                        }
                         draggable={isEditMode}
                         onDragEnd={(e) => {
                           const latLng = e.latLng;
diff --git a/app/ui/src/app/results/components/MapStopHoverOverlay.tsx b/app/ui/src/app/results/components/MapStopHoverOverlay.tsx
new file mode 100644
index 00000000..209dc6d6
--- /dev/null
+++ b/app/ui/src/app/results/components/MapStopHoverOverlay.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useGoogleMap } from "@react-google-maps/api";
+import type { HoveredStopInfo } from "../types";
+import StopHoverCard from "./StopHoverCard";
+
+type MapStopHoverOverlayProps = {
+  hovered: HoveredStopInfo | null;
+};
+
+function useContainerPixelPosition(
+  map: google.maps.Map | null,
+  lat: number,
+  lng: number,
+): { x: number; y: number } | null {
+  const [pixel, setPixel] = useState<{ x: number; y: number } | null>(null);
+
+  useEffect(() => {
+    if (!map) return;
+
+    const overlay = new google.maps.OverlayView();
+    overlay.onAdd = () => {};
+    overlay.draw = () => {};
+    overlay.setMap(map);
+
+    const update = () => {
+      const projection = overlay.getProjection();
+      if (!projection) return;
+      const point = projection.fromLatLngToContainerPixel(
+        new google.maps.LatLng(lat, lng),
+      );
+      if (point) setPixel({ x: point.x, y: point.y });
+    };
+
+    const idleListener = map.addListener("idle", update);
+    const boundsListener = map.addListener("bounds_changed", update);
+    update();
+
+    return () => {
+      google.maps.event.removeListener(idleListener);
+      google.maps.event.removeListener(boundsListener);
+      overlay.setMap(null);
+    };
+  }, [map, lat, lng]);
+
+  return pixel;
+}
+
+function PositionedStopHoverCard({ hovered }: { hovered: HoveredStopInfo }) {
+  const map = useGoogleMap();
+  const pixel = useContainerPixelPosition(
+    map ?? null,
+    hovered.lat,
+    hovered.lng,
+  );
+
+  if (!map || !pixel) return null;
+
+  const mapDiv = map.getDiv();
+  if (!mapDiv) return null;
+
+  return createPortal(
+    <div
+      className="pointer-events-none absolute z-20 transition-[transform,opacity] duration-200 ease-out"
+      style={{
+        left: pixel.x,
+        top: pixel.y,
+        transform: "translate(-50%, calc(-100% - 40px))",
+      }}
+    >
+      <StopHoverCard
+        routeLabel={`Route ${hovered.routeIndex + 1}, Stop ${hovered.stop.sequence}`}
+        stop={hovered.stop}
+      />
+    </div>,
+    mapDiv,
+  );
+}
+
+export default function MapStopHoverOverlay({
+  hovered,
+}: MapStopHoverOverlayProps) {
+  if (!hovered) return null;
+  return <PositionedStopHoverCard hovered={hovered} />;
+}
diff --git a/app/ui/src/app/results/components/MobileResultsNavbar.tsx b/app/ui/src/app/results/components/MobileResultsNavbar.tsx
new file mode 100644
index 00000000..095f68c5
--- /dev/null
+++ b/app/ui/src/app/results/components/MobileResultsNavbar.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  MOBILE_NAVBAR_LEFT_GROUP,
+  MOBILE_NAVBAR_MENU_BTN,
+  MOBILE_NAVBAR_ROOT,
+} from "../../edit/formStyles.v2";
+import {
+  RESULTS_MOBILE_NAV_CANCEL_BTN,
+  RESULTS_MOBILE_NAV_SAVE_BTN,
+  RESULTS_MOBILE_NAV_TITLE,
+} from "../formStyles.mobile";
+
+type MobileResultsNavbarProps = {
+  onMenuClick: () => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  showCancel?: boolean;
+  saveDisabled?: boolean;
+};
+
+export default function MobileResultsNavbar({
+  onMenuClick,
+  onSave,
+  onCancel,
+  showCancel = false,
+  saveDisabled = false,
+}: MobileResultsNavbarProps) {
+  return (
+    <header className={MOBILE_NAVBAR_ROOT}>
+      <div className={`${MOBILE_NAVBAR_LEFT_GROUP} min-w-0 flex-1`}>
+        <button
+          type="button"
+          className={MOBILE_NAVBAR_MENU_BTN}
+          onClick={onMenuClick}
+          aria-label="Open navigation menu"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M3 7V5H21V7H3ZM3 19V17H21V19H3ZM3 13V11H21V13H3Z"
+              fill="var(--edit-text-primary)"
+            />
+          </svg>
+        </button>
+        <span className={RESULTS_MOBILE_NAV_TITLE}>Delivery Optimizer</span>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {showCancel && onCancel && (
+          <button
+            type="button"
+            className={RESULTS_MOBILE_NAV_CANCEL_BTN}
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+        )}
+        {onSave && (
+          <button
+            type="button"
+            className={RESULTS_MOBILE_NAV_SAVE_BTN}
+            onClick={onSave}
+            disabled={saveDisabled}
+          >
+            Save
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/app/ui/src/app/results/components/ResultsBottomSheet.tsx b/app/ui/src/app/results/components/ResultsBottomSheet.tsx
new file mode 100644
index 00000000..34a048d2
--- /dev/null
+++ b/app/ui/src/app/results/components/ResultsBottomSheet.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import MobileEditPageFooter from "../../edit/components/layout/footer/MobileEditPageFooter";
+import type { Route } from "../types";
+import {
+  RESULTS_BOTTOM_SHEET_BODY,
+  RESULTS_BOTTOM_SHEET_BTN_PILL,
+  RESULTS_BOTTOM_SHEET_BTN_RECT_FILLED,
+  RESULTS_BOTTOM_SHEET_BTN_RECT_OUTLINE,
+  RESULTS_BOTTOM_SHEET_COLLAPSED,
+  RESULTS_BOTTOM_SHEET_EXPANDED,
+  RESULTS_BOTTOM_SHEET_HANDLE,
+  RESULTS_BOTTOM_SHEET_HEADER,
+  RESULTS_BOTTOM_SHEET_HEADER_ROW,
+  RESULTS_BOTTOM_SHEET_HEADER_TEXT,
+  RESULTS_BOTTOM_SHEET_ROOT,
+  RESULTS_BOTTOM_SHEET_SUBTITLE,
+  RESULTS_BOTTOM_SHEET_TITLE,
+  RESULTS_SHEET_FOOTER_WRAP,
+} from "../formStyles.mobile";
+import Sidebar from "./Sidebar";
+
+type ResultsBottomSheetProps = {
+  routes: Route[];
+  isExpanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  isEditMode: boolean;
+  onEditModeChange: (value: boolean) => void;
+  onExportClick: () => void;
+  onUpdateStopNote: (routeId: string, stopId: string, note: string) => void;
+  onExportRoute: (vehicleId: string) => void;
+  onDuplicateRoute: (vehicleId: string) => void;
+  onDeleteRoute: (vehicleId: string) => void;
+};
+
+export default function ResultsBottomSheet({
+  routes,
+  isExpanded,
+  onExpandedChange,
+  isEditMode,
+  onEditModeChange,
+  onExportClick,
+  onUpdateStopNote,
+  onExportRoute,
+  onDuplicateRoute,
+  onDeleteRoute,
+}: ResultsBottomSheetProps) {
+  const totalStops = useMemo(
+    () => routes.reduce((sum, r) => sum + r.stops.length, 0),
+    [routes],
+  );
+
+  const handleEditToggle = useCallback(() => {
+    if (isEditMode) {
+      onEditModeChange(false);
+    } else {
+      onEditModeChange(true);
+      onExpandedChange(true);
+    }
+  }, [isEditMode, onEditModeChange, onExpandedChange]);
+
+  return (
+    <section
+      className={`${RESULTS_BOTTOM_SHEET_ROOT} ${
+        isExpanded
+          ? RESULTS_BOTTOM_SHEET_EXPANDED
+          : RESULTS_BOTTOM_SHEET_COLLAPSED
+      }`}
+      aria-label="Optimized routes"
+    >
+      <button
+        type="button"
+        className="flex w-full flex-col items-center pt-1 pb-0"
+        onClick={() => onExpandedChange(!isExpanded)}
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? "Collapse route list" : "Expand route list"}
+      >
+        <span className={RESULTS_BOTTOM_SHEET_HANDLE} />
+      </button>
+
+      <div className={RESULTS_BOTTOM_SHEET_HEADER}>
+        <div className={RESULTS_BOTTOM_SHEET_HEADER_ROW}>
+          <div className={RESULTS_BOTTOM_SHEET_HEADER_TEXT}>
+            <h2 className={RESULTS_BOTTOM_SHEET_TITLE}>Optimized Routes</h2>
+            <p className={RESULTS_BOTTOM_SHEET_SUBTITLE}>
+              {routes.length} route{routes.length === 1 ? "" : "s"} with{" "}
+              {totalStops} total stop
+              {totalStops === 1 ? "" : "s"}
+            </p>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            {isExpanded ? (
+              <>
+                <button
+                  type="button"
+                  className={RESULTS_BOTTOM_SHEET_BTN_RECT_OUTLINE}
+                  onClick={handleEditToggle}
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  className={RESULTS_BOTTOM_SHEET_BTN_RECT_FILLED}
+                  onClick={onExportClick}
+                  disabled={routes.length === 0}
+                >
+                  Export
+                </button>
+              </>
+            ) : (
+              <button
+                type="button"
+                className={RESULTS_BOTTOM_SHEET_BTN_PILL}
+                onClick={handleEditToggle}
+              >
+                Edit
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className={RESULTS_BOTTOM_SHEET_BODY}>
+          <Sidebar
+            variant="sheet"
+            routes={routes}
+            isEditMode={isEditMode}
+            onEditModeChange={onEditModeChange}
+            onUpdateStopNote={onUpdateStopNote}
+            onExportRoute={onExportRoute}
+            onDuplicateRoute={onDuplicateRoute}
+            onDeleteRoute={onDeleteRoute}
+          />
+          <div className={RESULTS_SHEET_FOOTER_WRAP}>
+            <MobileEditPageFooter />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/app/ui/src/app/results/components/ResultsNavRail.tsx b/app/ui/src/app/results/components/ResultsNavRail.tsx
new file mode 100644
index 00000000..829eeba3
--- /dev/null
+++ b/app/ui/src/app/results/components/ResultsNavRail.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import Link from "next/link";
+import {
+  SIDEBAR_NAV,
+  SIDEBAR_NAV_ITEM_ACTIVE,
+  SIDEBAR_NAV_ITEM_INACTIVE,
+  SIDEBAR_NAV_LABEL_ACTIVE,
+  SIDEBAR_NAV_LABEL_INACTIVE,
+  SIDEBAR_NAV_PILL_ACTIVE,
+  SIDEBAR_NAV_PILL_INACTIVE,
+  SIDEBAR_ROOT,
+} from "../../edit/formStyles.v2";
+
+const MANAGE_ICON = (
+  <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" aria-hidden>
+    <path
+      d="M4.5 4.5H19.5V19.5H4.5V4.5Z"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path d="M4.5 10H19.5" stroke="currentColor" strokeWidth="2" />
+    <path d="M10 10V19.5" stroke="currentColor" strokeWidth="2" />
+    <path d="M15 10V19.5" stroke="currentColor" strokeWidth="2" />
+  </svg>
+);
+
+const RESULTS_ICON = (
+  <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" aria-hidden>
+    <path
+      d="M4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3792 3 20.1 3 19.75V5.75C3 5.53333 3.0625 5.34167 3.1875 5.175C3.3125 5.00833 3.48333 4.88333 3.7 4.8L9 3L15 5.1L19.65 3.3C19.9833 3.16667 20.2917 3.20417 20.575 3.4125C20.8583 3.62083 21 3.9 21 4.25V12.675C20.75 12.2917 20.4542 11.9417 20.1125 11.625C19.7708 11.3083 19.4 11.0333 19 10.8V5.7L16 6.85V10C15.65 10 15.3083 10.0292 14.975 10.0875C14.6417 10.1458 14.3167 10.2333 14 10.35V6.85L10 5.45V18.525L4.35 20.7ZM5 18.3L8 17.15V5.45L5 6.45V18.3ZM17.4125 17.5C17.7875 17.1667 17.9833 16.6667 18 16C18.0167 15.4333 17.8292 14.9583 17.4375 14.575C17.0458 14.1917 16.5667 14 16 14C15.4333 14 14.9583 14.1917 14.575 14.575C14.1917 14.9583 14 15.4333 14 16C14 16.5667 14.1917 17.0417 14.575 17.425C14.9583 17.8083 15.4333 18 16 18C16.5667 18 17.0375 17.8333 17.4125 17.5ZM16 20C14.9 20 13.9583 19.6083 13.175 18.825C12.3917 18.0417 12 17.1 12 16C12 14.9 12.3917 13.9583 13.175 13.175C13.9583 12.3917 14.9 12 16 12C17.1 12 18.0417 12.3917 18.825 13.175C19.6083 13.9583 20 14.9 20 16C20 16.3833 19.9542 16.7458 19.8625 17.0875C19.7708 17.4292 19.6333 17.75 19.45 18.05L22 20.6L20.6 22L18.05 19.45C17.75 19.6333 17.4292 19.7708 17.0875 19.8625C16.7458 19.9542 16.3833 20 16 20Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default function ResultsNavRail() {
+  return (
+    <aside
+      className={`${SIDEBAR_ROOT} border-r border-[var(--edit-stone-200)]`}
+    >
+      <nav className={SIDEBAR_NAV} aria-label="Results navigation">
+        <Link href="/edit" className={SIDEBAR_NAV_ITEM_INACTIVE}>
+          <span className={SIDEBAR_NAV_PILL_INACTIVE}>{MANAGE_ICON}</span>
+          <span className={SIDEBAR_NAV_LABEL_INACTIVE}>Manage</span>
+        </Link>
+        <div className={SIDEBAR_NAV_ITEM_ACTIVE} aria-current="page">
+          <span className={SIDEBAR_NAV_PILL_ACTIVE}>{RESULTS_ICON}</span>
+          <span className={SIDEBAR_NAV_LABEL_ACTIVE}>Results</span>
+        </div>
+      </nav>
+    </aside>
+  );
+}
diff --git a/app/ui/src/app/results/components/RouteCard.tsx b/app/ui/src/app/results/components/RouteCard.tsx
new file mode 100644
index 00000000..92961fa4
--- /dev/null
+++ b/app/ui/src/app/results/components/RouteCard.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import type { Route } from "../types";
+import { routeColorHex } from "../utils/routeColors";
+import EditableStopItem from "./EditableStopItem";
+import RouteCardMenu from "./RouteCardMenu";
+
+type RouteCardProps = {
+  route: Route;
+  routeIndex: number;
+  isExpanded: boolean;
+  isEditMode: boolean;
+  isMenuOpen: boolean;
+  menuOpensUp?: boolean;
+  onToggleExpanded: () => void;
+  onMenuOpenChange: (open: boolean) => void;
+  onExportRoute: () => void;
+  onDuplicateRoute: () => void;
+  onDeleteRoute: () => void;
+  onUpdateStopNote: (stopId: string, note: string) => void;
+};
+
+function formatEstTime(minutes: number | undefined): string {
+  if (minutes == null) return "—";
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  if (h === 0) return `${m}m`;
+  return m === 0 ? `${h}h` : `${h}h${m}m`;
+}
+
+export default function RouteCard({
+  route,
+  routeIndex,
+  isExpanded,
+  isEditMode,
+  isMenuOpen,
+  menuOpensUp = false,
+  onToggleExpanded,
+  onMenuOpenChange,
+  onExportRoute,
+  onDuplicateRoute,
+  onDeleteRoute,
+  onUpdateStopNote,
+}: RouteCardProps) {
+  const sortedStops = [...route.stops].sort((a, b) => a.sequence - b.sequence);
+  const accent = routeColorHex(routeIndex);
+
+  return (
+    <li
+      className={`rounded-[24px] border overflow-hidden ${
+        isEditMode
+          ? "border-[var(--edit-teal-300)] bg-white"
+          : "border-[var(--edit-stone-200)] bg-white"
+      }`}
+    >
+      <div className="px-3 py-3">
+        <div className="flex items-start gap-2.5">
+          <span
+            className="mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-[15px]"
+            style={{ backgroundColor: accent }}
+            aria-hidden
+          >
+            <svg
+              className="h-6 w-6"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden
+            >
+              <path
+                d="M5.6 7V15.1C5.6 17 7.15 18.55 9.05 18.55C10.95 18.55 12.5 17 12.5 15.1V9.6C12.5 7.95 13.85 6.6 15.5 6.6C17.15 6.6 18.5 7.95 18.5 9.6V16.8"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <circle cx="5.6" cy="7" r="2.35" fill="white" />
+              <circle cx="18.5" cy="16.8" r="2.35" fill="white" />
+              <circle cx="5.6" cy="7" r="1.05" fill={accent} />
+              <circle cx="18.5" cy="16.8" r="1.05" fill={accent} />
+            </svg>
+          </span>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-start justify-between gap-2">
+              <button
+                type="button"
+                onClick={onToggleExpanded}
+                className="min-w-0 flex-1 text-left"
+                aria-expanded={isExpanded}
+                aria-label={
+                  isExpanded
+                    ? `Collapse route ${routeIndex + 1}, ${route.driverName}`
+                    : `Expand route ${routeIndex + 1}, ${route.driverName}`
+                }
+              >
+                <div
+                  className="text-[15px] font-semibold leading-none"
+                  style={{ color: accent }}
+                >
+                  Route {routeIndex + 1}
+                </div>
+                <div className="mt-1 text-[13px] font-medium leading-none text-[var(--edit-text-primary)]">
+                  {route.driverName}
+                </div>
+              </button>
+
+              <div className="flex shrink-0 items-center gap-0.5">
+                <RouteCardMenu
+                  routeLabel={`Route ${routeIndex + 1}, ${route.driverName}`}
+                  isOpen={isMenuOpen}
+                  onOpenChange={onMenuOpenChange}
+                  onExport={onExportRoute}
+                  onDuplicate={onDuplicateRoute}
+                  onDelete={onDeleteRoute}
+                  placement={menuOpensUp ? "up" : "down"}
+                />
+                <button
+                  type="button"
+                  onClick={onToggleExpanded}
+                  className="flex shrink-0 items-center justify-center rounded-md p-1 text-zinc-500 hover:bg-[var(--edit-stone-100)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edit-teal-300)]"
+                  aria-label={
+                    isExpanded
+                      ? `Collapse route ${routeIndex + 1}`
+                      : `Expand route ${routeIndex + 1}`
+                  }
+                >
+                  <svg
+                    className={`h-4 w-4 shrink-0 transition-transform ${
+                      isExpanded ? "rotate-90" : "rotate-0"
+                    }`}
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 1 1 1.06-1.06l4.24 4.24c.3.3.3.77 0 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0Z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <button
+              type="button"
+              onClick={onToggleExpanded}
+              className="mt-3 w-full text-left"
+              aria-expanded={isExpanded}
+            >
+              <div className="grid grid-cols-3 gap-4">
+                <div>
+                  <div className="text-[10px] uppercase tracking-wide text-[var(--edit-text-secondary)]">
+                    Stops
+                  </div>
+                  <div className="mt-1 text-[15px] font-semibold leading-none text-[var(--edit-text-primary)]">
+                    {sortedStops.length}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-[10px] uppercase tracking-wide text-[var(--edit-text-secondary)]">
+                    Distance
+                  </div>
+                  <div className="mt-1 text-[15px] font-semibold leading-none text-[var(--edit-text-primary)] tabular-nums">
+                    {route.distanceMi != null ? `${route.distanceMi}mi` : "—"}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-[10px] uppercase tracking-wide text-[var(--edit-text-secondary)]">
+                    Time
+                  </div>
+                  <div className="mt-1 text-[15px] font-semibold leading-none text-[var(--edit-text-primary)] tabular-nums">
+                    {formatEstTime(route.estimatedTimeMinutes)}
+                  </div>
+                </div>
+              </div>
+              <p className="mt-3 flex items-center gap-2 text-[12px] text-[var(--edit-text-primary)]">
+                <svg
+                  className="h-4 w-4 text-[var(--edit-text-secondary)]"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  aria-hidden
+                >
+                  <path
+                    d="M2.5 5.5A1.5 1.5 0 0 1 4 4h7.5A1.5 1.5 0 0 1 13 5.5V7h1.75c.4 0 .77.16 1.06.44l1.75 1.75c.28.28.44.66.44 1.06v2A1.75 1.75 0 0 1 16.25 14h-.6a2.15 2.15 0 0 1-4.2 0h-3.9a2.15 2.15 0 0 1-4.2 0H2.75A1.75 1.75 0 0 1 1 12.25V7.25A1.75 1.75 0 0 1 2.75 5.5h-.25Z"
+                    stroke="currentColor"
+                    strokeWidth="1.4"
+                    strokeLinejoin="round"
+                  />
+                  <circle
+                    cx="5.4"
+                    cy="14"
+                    r="1.15"
+                    stroke="currentColor"
+                    strokeWidth="1.4"
+                  />
+                  <circle
+                    cx="13.6"
+                    cy="14"
+                    r="1.15"
+                    stroke="currentColor"
+                    strokeWidth="1.4"
+                  />
+                </svg>
+                <span>{route.vehicleType ?? "Vehicle"}</span>
+              </p>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="border-t border-zinc-200 bg-white px-4 pb-4 pt-1">
+          <ul className="flex flex-col">
+            {sortedStops.map((stop, stopIdx) => {
+              const isLastStop = stopIdx === sortedStops.length - 1;
+              return (
+                <li key={stop.id} className="flex gap-3">
+                  <div className="flex w-9 shrink-0 flex-col items-center pt-1">
+                    <span
+                      className="relative z-[1] flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[13px] font-semibold text-white shadow-sm"
+                      style={{ backgroundColor: accent }}
+                    >
+                      {stop.sequence}
+                    </span>
+                    {!isLastStop && (
+                      <div
+                        className="mt-2 w-0 flex-1 min-h-[20px] border-l-2 border-dotted"
+                        style={{ borderColor: accent }}
+                        aria-hidden
+                      />
+                    )}
+                  </div>
+                  <div
+                    className={
+                      isLastStop ? "min-w-0 flex-1" : "min-w-0 flex-1 pb-5"
+                    }
+                  >
+                    <EditableStopItem
+                      stop={stop}
+                      accentColor={accent}
+                      isEditMode={isEditMode}
+                      onSaveNote={(note) => onUpdateStopNote(stop.id, note)}
+                    />
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </li>
+  );
+}
diff --git a/app/ui/src/app/results/components/RouteCardMenu.tsx b/app/ui/src/app/results/components/RouteCardMenu.tsx
new file mode 100644
index 00000000..fed3d948
--- /dev/null
+++ b/app/ui/src/app/results/components/RouteCardMenu.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+type RouteCardMenuProps = {
+  routeLabel: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onExport: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  /** Open upward inside bottom sheet so Delete stays visible */
+  placement?: "up" | "down";
+};
+
+function DownloadIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d="M10 3.5v8.25M6.75 8.5 10 11.75l3.25-3.25M4.5 14.75h11"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DuplicateIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <rect
+        x="6.5"
+        y="6.5"
+        width="9"
+        height="9"
+        rx="1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M4.5 13.5V5.75A1.25 1.25 0 0 1 5.75 4.5H13.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function TrashIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d="M5.5 6.5h9M8 6.5V5.25A.75.75 0 0 1 8.75 4.5h2.5a.75.75 0 0 1 .75.75V6.5M7.25 6.5v8.25A1.25 1.25 0 0 0 8.5 16h3a1.25 1.25 0 0 0 1.25-1.25V6.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.25 9v4.25M11.75 9v4.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default function RouteCardMenu({
+  routeLabel,
+  isOpen,
+  onOpenChange,
+  onExport,
+  onDuplicate,
+  onDelete,
+  placement = "down",
+}: RouteCardMenuProps) {
+  const menuId = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [menuPosition, setMenuPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+
+    function updatePosition() {
+      const trigger = triggerRef.current;
+      const menu = menuRef.current;
+      if (!trigger || !menu) return;
+      const rect = trigger.getBoundingClientRect();
+      const menuWidth = menu.offsetWidth;
+      const menuHeight = menu.offsetHeight;
+      const gap = 4;
+      const left = Math.min(
+        Math.max(8, rect.right - menuWidth),
+        window.innerWidth - menuWidth - 8,
+      );
+      const top =
+        placement === "up" ? rect.top - menuHeight - gap : rect.bottom + gap;
+      setMenuPosition({ top, left });
+    }
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, placement]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    itemRefs.current[0]?.focus();
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (rootRef.current?.contains(target)) return;
+      const menu = document.getElementById(menuId);
+      if (menu?.contains(target)) return;
+      onOpenChange(false);
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onOpenChange(false);
+        return;
+      }
+      const menu = document.getElementById(menuId);
+      if (!menu?.contains(e.target as Node)) return;
+
+      const items = itemRefs.current.filter(Boolean) as HTMLButtonElement[];
+      if (items.length === 0) return;
+
+      const currentIndex = items.findIndex(
+        (el) => el === document.activeElement,
+      );
+      let nextIndex = currentIndex;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        nextIndex =
+          currentIndex < 0 || currentIndex >= items.length - 1
+            ? 0
+            : currentIndex + 1;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextIndex = 0;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextIndex = items.length - 1;
+      } else {
+        return;
+      }
+
+      items[nextIndex]?.focus();
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, menuId, onOpenChange]);
+
+  const setItemRef = (index: number) => (el: HTMLButtonElement | null) => {
+    itemRefs.current[index] = el;
+  };
+
+  const menuPanel = isOpen ? (
+    <div
+      ref={menuRef}
+      id={menuId}
+      role="menu"
+      aria-label={`${routeLabel} actions`}
+      className={`fixed z-[200] min-w-[11.5rem] overflow-hidden rounded-[8px] border border-[var(--edit-stone-200)] bg-white py-1 shadow-lg ${
+        menuPosition ? "" : "invisible pointer-events-none"
+      }`}
+      style={
+        menuPosition
+          ? { top: menuPosition.top, left: menuPosition.left }
+          : { top: 0, left: 0 }
+      }
+      onClick={(e) => e.stopPropagation()}
+    >
+      <button
+        ref={setItemRef(0)}
+        type="button"
+        role="menuitem"
+        tabIndex={-1}
+        className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm font-medium text-zinc-900 hover:bg-zinc-50 focus:outline-none focus-visible:bg-zinc-50"
+        onClick={() => {
+          onExport();
+          onOpenChange(false);
+        }}
+      >
+        <DownloadIcon className="h-4 w-4 shrink-0" />
+        Export Route
+      </button>
+      <button
+        ref={setItemRef(1)}
+        type="button"
+        role="menuitem"
+        tabIndex={-1}
+        className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm font-medium text-zinc-900 hover:bg-zinc-50 focus:outline-none focus-visible:bg-zinc-50"
+        onClick={() => {
+          onDuplicate();
+          onOpenChange(false);
+        }}
+      >
+        <DuplicateIcon className="h-4 w-4 shrink-0" />
+        Duplicate Route
+      </button>
+      <div className="my-1 border-t border-zinc-100" role="separator" />
+      <button
+        ref={setItemRef(2)}
+        type="button"
+        role="menuitem"
+        tabIndex={-1}
+        className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm font-medium text-red-700 hover:bg-red-50 focus:outline-none focus-visible:bg-red-50"
+        onClick={() => {
+          onDelete();
+          onOpenChange(false);
+        }}
+      >
+        <TrashIcon className="h-4 w-4 shrink-0 text-red-700" />
+        Delete Route
+      </button>
+    </div>
+  ) : null;
+
+  return (
+    <div ref={rootRef} className="relative shrink-0">
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpenChange(!isOpen);
+        }}
+        className={`flex h-9 w-9 items-center justify-center rounded-lg text-[var(--edit-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edit-teal-300)] ${
+          isOpen
+            ? "border border-[var(--edit-teal-300)] bg-white"
+            : "hover:bg-[var(--edit-stone-100)]"
+        }`}
+        aria-label={`Options for ${routeLabel}`}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
+        aria-controls={isOpen ? menuId : undefined}
+      >
+        <svg
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden
+        >
+          <circle cx="4" cy="10" r="1.35" />
+          <circle cx="10" cy="10" r="1.35" />
+          <circle cx="16" cy="10" r="1.35" />
+        </svg>
+      </button>
+
+      {typeof document !== "undefined" && menuPanel
+        ? createPortal(menuPanel, document.body)
+        : null}
+    </div>
+  );
+}
diff --git a/app/ui/src/app/results/components/Sidebar.tsx b/app/ui/src/app/results/components/Sidebar.tsx
index 76a6bed9..4cb3b245 100644
--- a/app/ui/src/app/results/components/Sidebar.tsx
+++ b/app/ui/src/app/results/components/Sidebar.tsx
@@ -2,14 +2,18 @@
 
 import { useMemo, useState } from "react";
 import type { Route } from "../types";
-import { routeColorHex } from "../utils/routeColors";
-import EditableStopItem from "./EditableStopItem";
+import RouteCard from "./RouteCard";
 
 type SidebarProps = {
   routes: Route[];
   isEditMode: boolean;
   onEditModeChange: (value: boolean) => void;
   onUpdateStopNote: (routeId: string, stopId: string, note: string) => void;
+  onExportRoute: (vehicleId: string) => void;
+  onDuplicateRoute: (vehicleId: string) => void;
+  onDeleteRoute: (vehicleId: string) => void;
+  /** Desktop sidebar vs mobile bottom-sheet list body */
+  variant?: "sidebar" | "sheet";
 };
 
 export default function Sidebar({
@@ -17,10 +21,16 @@ export default function Sidebar({
   isEditMode,
   onEditModeChange,
   onUpdateStopNote,
+  onExportRoute,
+  onDuplicateRoute,
+  onDeleteRoute,
+  variant = "sidebar",
 }: SidebarProps) {
+  const isSheet = variant === "sheet";
   const [expandedRouteIds, setExpandedRouteIds] = useState<Set<string>>(
     () => new Set(),
   );
+  const [openMenuRouteId, setOpenMenuRouteId] = useState<string | null>(null);
 
   const totalStops = useMemo(
     () => routes.reduce((sum, r) => sum + r.stops.length, 0),
@@ -36,161 +46,75 @@ export default function Sidebar({
     });
   }
 
-  function formatEstTime(minutes: number | undefined): string {
-    if (minutes == null) return "—";
-    const h = Math.floor(minutes / 60);
-    const m = minutes % 60;
-    if (h === 0) return `${m}m`;
-    return m === 0 ? `${h}h` : `${h}h${m}m`;
-  }
-
   return (
     <aside
-      className={`w-full h-full flex flex-col overflow-hidden border-r-2 bg-white p-4 ${isEditMode ? "border-amber-500" : "border-zinc-200"}`}
+      className={
+        isSheet
+          ? "w-full flex flex-col"
+          : "w-full h-full flex flex-col overflow-hidden border-r-2 border-[var(--edit-stone-200)] bg-white p-4"
+      }
     >
-      {isEditMode && (
-        <p className="mb-2 text-xs font-medium text-amber-700 bg-amber-50 rounded px-2 py-1">
-          Edit Mode Active
-        </p>
+      {!isSheet && (
+        <div className="flex shrink-0 items-start justify-between gap-3 mb-4">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold text-[var(--edit-text-primary)] whitespace-nowrap">
+              Optimized Routes
+            </h2>
+            <p className="mt-1 text-xs text-[var(--edit-text-secondary)]">
+              {routes.length} route{routes.length === 1 ? "" : "s"} with{" "}
+              {totalStops} total stop
+              {totalStops === 1 ? "" : "s"}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => onEditModeChange(!isEditMode)}
+            className={`h-9 shrink-0 rounded-[80px] px-5 text-sm font-semibold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edit-teal-300)] ${
+              isEditMode
+                ? "border border-[#7BCFC2] bg-[#7BCFC2] text-[#1C1B1F] hover:bg-[#6dc5b7]"
+                : "border border-[var(--edit-stone-700)] bg-white text-[var(--edit-text-primary)] hover:bg-[var(--edit-stone-50)]"
+            }`}
+          >
+            {isEditMode ? "Save edits" : "Edit"}
+          </button>
+        </div>
       )}
-      <div className="flex shrink-0 items-center justify-between gap-2 mb-4">
-        <span className="text-sm font-medium text-zinc-700">Edit mode</span>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={isEditMode}
-          onClick={() => onEditModeChange(!isEditMode)}
-          className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 ${isEditMode ? "border-amber-500 bg-amber-500" : "border-zinc-200 bg-zinc-100"}`}
-        >
-          <span
-            className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform ${isEditMode ? "translate-x-5" : "translate-x-0.5"}`}
-          />
-        </button>
-      </div>
-      <h2 className="shrink-0 text-lg font-semibold text-zinc-800">
-        Optimized Routes
-      </h2>
-      <p className="mt-1 shrink-0 text-xs text-zinc-500">
-        {routes.length} route{routes.length === 1 ? "" : "s"} with {totalStops}{" "}
-        total stop
-        {totalStops === 1 ? "" : "s"}
-      </p>
-      <div className="flex-1 min-h-0 overflow-y-auto mt-3">
+      <div className={isSheet ? "w-full" : "flex-1 min-h-0 overflow-y-auto"}>
         {routes.length === 0 ? (
           <p className="text-sm text-zinc-500">No routes yet</p>
         ) : (
           <ul className="space-y-3 pb-2">
-            {routes.map((route, idx) => {
-              const isExpanded = expandedRouteIds.has(route.vehicleId);
-              const sortedStops = [...route.stops].sort(
-                (a, b) => a.sequence - b.sequence,
-              );
-              const accent = routeColorHex(idx);
-
-              return (
-                <li
-                  key={route.vehicleId}
-                  className="rounded-xl border border-zinc-200 bg-zinc-50 shadow-sm overflow-hidden"
-                  style={{ boxShadow: `inset 4px 0 0 ${accent}` }}
-                >
-                  <button
-                    type="button"
-                    onClick={() => toggleExpanded(route.vehicleId)}
-                    className="w-full p-3 flex items-center justify-between gap-3 text-left hover:bg-zinc-100/80 transition-colors"
-                    aria-expanded={isExpanded}
-                  >
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-start gap-2 min-w-0">
-                        <span
-                          className="mt-0.5 h-5 w-5 shrink-0 rounded-md"
-                          style={{ backgroundColor: accent }}
-                          aria-hidden
-                        />
-                        <div className="min-w-0">
-                          <div
-                            className="text-sm font-semibold"
-                            style={{ color: accent }}
-                          >
-                            Route {idx + 1}
-                          </div>
-                          <div className="text-xs text-zinc-500">
-                            {route.vehicleType ?? "Vehicle"} {route.vehicleId}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="mt-2 grid grid-cols-3 gap-2">
-                        <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
-                          <div className="text-[9px] uppercase tracking-wide text-zinc-500">
-                            STOPS
-                          </div>
-                          <div className="text-sm font-semibold text-zinc-800">
-                            {sortedStops.length}
-                          </div>
-                        </div>
-                        <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
-                          <div className="text-[9px] uppercase tracking-wide text-zinc-500">
-                            DISTANCE
-                          </div>
-                          <div className="text-sm font-semibold text-zinc-800 tabular-nums">
-                            {route.distanceMi != null
-                              ? `${route.distanceMi}mi`
-                              : "—"}
-                          </div>
-                        </div>
-                        <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
-                          <div className="text-[9px] uppercase tracking-wide text-zinc-500">
-                            EST. TIME
-                          </div>
-                          <div className="text-sm font-semibold text-zinc-800 tabular-nums">
-                            {formatEstTime(route.estimatedTimeMinutes)}
-                          </div>
-                        </div>
-                      </div>
-                      <p className="mt-2 text-xs text-zinc-600">
-                        <span className="font-medium text-zinc-700">
-                          Driver:
-                        </span>{" "}
-                        {route.driverName}
-                      </p>
-                    </div>
-
-                    <svg
-                      className={`h-4 w-4 shrink-0 text-zinc-500 transition-transform ${
-                        isExpanded ? "rotate-90" : "rotate-0"
-                      }`}
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      aria-hidden
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 1 1 1.06-1.06l4.24 4.24c.3.3.3.77 0 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0Z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </button>
-
-                  {isExpanded && (
-                    <div className="border-t border-zinc-200 bg-zinc-100/50 p-3">
-                      <ul className="space-y-2">
-                        {sortedStops.map((stop) => (
-                          <li key={stop.id}>
-                            <EditableStopItem
-                              stop={stop}
-                              accentColor={accent}
-                              isEditMode={isEditMode}
-                              onSaveNote={(note) =>
-                                onUpdateStopNote(route.vehicleId, stop.id, note)
-                              }
-                            />
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  )}
-                </li>
-              );
-            })}
+            {routes.map((route, idx) => (
+              <RouteCard
+                key={route.vehicleId}
+                route={route}
+                routeIndex={idx}
+                isExpanded={expandedRouteIds.has(route.vehicleId)}
+                isEditMode={isEditMode}
+                isMenuOpen={openMenuRouteId === route.vehicleId}
+                menuOpensUp={isSheet}
+                onToggleExpanded={() => toggleExpanded(route.vehicleId)}
+                onMenuOpenChange={(open) =>
+                  setOpenMenuRouteId(open ? route.vehicleId : null)
+                }
+                onExportRoute={() => onExportRoute(route.vehicleId)}
+                onDuplicateRoute={() => onDuplicateRoute(route.vehicleId)}
+                onDeleteRoute={() => {
+                  onDeleteRoute(route.vehicleId);
+                  setExpandedRouteIds((prev) => {
+                    const next = new Set(prev);
+                    next.delete(route.vehicleId);
+                    return next;
+                  });
+                  if (openMenuRouteId === route.vehicleId) {
+                    setOpenMenuRouteId(null);
+                  }
+                }}
+                onUpdateStopNote={(stopId, note) =>
+                  onUpdateStopNote(route.vehicleId, stopId, note)
+                }
+              />
+            ))}
           </ul>
         )}
       </div>
diff --git a/app/ui/src/app/results/components/StopHoverCard.tsx b/app/ui/src/app/results/components/StopHoverCard.tsx
new file mode 100644
index 00000000..4cd850f2
--- /dev/null
+++ b/app/ui/src/app/results/components/StopHoverCard.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import type { Stop } from "../types";
+
+type StopHoverCardProps = {
+  routeLabel: string;
+  stop: Stop;
+};
+
+function formatContact(stop: Stop): string | null {
+  const name = stop.addresseeName?.trim();
+  const phone = stop.phoneNumber?.trim();
+  if (name && phone) return `${name} · ${phone}`;
+  if (name) return name;
+  if (phone) return phone;
+  return null;
+}
+
+function formatTimeWindow(stop: Stop): string {
+  const time = stop.timeWindow?.time?.trim();
+  if (!time) return "—";
+  const kind = stop.timeWindow?.kind;
+  if (kind === "by") return `By ${time}`;
+  if (kind === "from") return `From ${time}`;
+  return time;
+}
+
+export default function StopHoverCard({
+  routeLabel,
+  stop,
+}: StopHoverCardProps) {
+  const contact = formatContact(stop);
+  const timeLabel = formatTimeWindow(stop);
+  const note = stop.note?.trim();
+
+  return (
+    <div
+      className="pointer-events-none w-[min(14rem,calc(100vw-2rem))] rounded-lg border border-[#7BCFC2]/80 bg-white p-3 font-sans-manrope shadow-md"
+      role="tooltip"
+    >
+      <span className="inline-block rounded-full bg-[#E8F6F3] px-2 py-0.5 text-[10px] font-medium leading-tight text-[#2B6B5E]">
+        {routeLabel}
+      </span>
+
+      <p className="mt-1.5 text-sm font-semibold leading-snug text-zinc-900">
+        {stop.address}
+      </p>
+
+      <div className="mt-2 space-y-1 text-xs leading-relaxed text-zinc-700">
+        {contact && (
+          <p className="flex items-start gap-2">
+            <svg
+              className="mt-px h-3.5 w-3.5 shrink-0 text-zinc-500"
+              viewBox="0 0 20 20"
+              fill="none"
+              aria-hidden
+            >
+              <path
+                d="M10 10.25a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5ZM4.75 16.5v-.75a5.25 5.25 0 0 1 10.5 0v.75"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+            <span>{contact}</span>
+          </p>
+        )}
+        <p className="flex items-start gap-2">
+          <svg
+            className="mt-px h-3.5 w-3.5 shrink-0 text-zinc-500"
+            viewBox="0 0 20 20"
+            fill="none"
+            aria-hidden
+          >
+            <path
+              d="M10 5.5v4.25l2.5 1.5M17.5 10a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span>{timeLabel}</span>
+        </p>
+      </div>
+
+      {note && (
+        <div className="mt-2 flex gap-1.5 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-1.5 text-xs text-zinc-700">
+          <svg
+            className="mt-px h-3.5 w-3.5 shrink-0 text-zinc-500"
+            viewBox="0 0 20 20"
+            fill="none"
+            aria-hidden
+          >
+            <path
+              d="M6 3.5h8l1.5 1.5V16.5H6V3.5Z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M8 7.5h4M8 10h4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+          <p>
+            <span className="font-medium text-zinc-800">Note:</span> {note}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/ui/src/app/results/formStyles.mobile.ts b/app/ui/src/app/results/formStyles.mobile.ts
new file mode 100644
index 00000000..42fab662
--- /dev/null
+++ b/app/ui/src/app/results/formStyles.mobile.ts
@@ -0,0 +1,56 @@
+/** Mobile layout tokens for /results (responsive web, lg breakpoint). */
+
+export const RESULTS_MOBILE_EDIT_PILL =
+  "pointer-events-none absolute left-1/2 top-3 z-10 max-w-[min(100%,20rem)] -translate-x-1/2 rounded-[80px] bg-[var(--edit-btn-primary)] px-4 py-2 text-center text-xs font-medium leading-snug text-[var(--edit-text-primary)] shadow-sm sm:text-sm";
+
+export const RESULTS_MOBILE_EDIT_BANNER_MESSAGE =
+  "Drag stop markers to adjust delivery locations";
+
+export const RESULTS_BOTTOM_SHEET_ROOT =
+  "lg:hidden fixed bottom-0 left-0 right-0 z-40 flex flex-col bg-[var(--edit-bg-primary,#fff)] border-t border-[var(--edit-stone-200)] rounded-tl-[12px] rounded-tr-[12px] shadow-[0_-4px_24px_rgba(0,0,0,0.08)] transition-[max-height] duration-300 ease-in-out";
+
+export const RESULTS_BOTTOM_SHEET_COLLAPSED = "max-h-[132px]";
+export const RESULTS_BOTTOM_SHEET_EXPANDED = "max-h-[min(78vh,680px)]";
+
+export const RESULTS_BOTTOM_SHEET_HANDLE =
+  "mx-auto mt-2 mb-1 h-1 w-10 shrink-0 rounded-full bg-[var(--edit-stone-300)]";
+
+export const RESULTS_BOTTOM_SHEET_HEADER = "shrink-0 px-4 pb-3";
+
+export const RESULTS_BOTTOM_SHEET_HEADER_ROW =
+  "flex items-start justify-between gap-3";
+
+export const RESULTS_BOTTOM_SHEET_HEADER_TEXT = "min-w-0 flex-1";
+
+export const RESULTS_BOTTOM_SHEET_TITLE =
+  "font-semibold text-[16px] leading-[22px] text-[var(--edit-text-primary)]";
+
+export const RESULTS_BOTTOM_SHEET_SUBTITLE =
+  "mt-0.5 text-[12px] leading-4 text-[var(--edit-text-secondary,#6b6b6b)]";
+
+export const RESULTS_BOTTOM_SHEET_ACTIONS = "flex shrink-0 items-center gap-2";
+
+/** Pill — collapsed sheet Edit only */
+export const RESULTS_BOTTOM_SHEET_BTN_PILL =
+  "inline-flex h-9 shrink-0 items-center justify-center rounded-[80px] border border-[var(--edit-stone-700)] px-5 font-semibold text-[14px] leading-5 text-[var(--edit-text-primary)] hover:bg-[var(--edit-secondary-btn-hover)] active:bg-[var(--edit-secondary-btn-pressed)] transition-colors";
+
+/** Rectangular — expanded sheet Edit / Export */
+export const RESULTS_BOTTOM_SHEET_BTN_RECT_OUTLINE =
+  "inline-flex h-9 shrink-0 items-center justify-center rounded-[6px] border border-[var(--edit-stone-700)] px-4 font-semibold text-[14px] leading-5 text-[var(--edit-text-primary)] hover:bg-[var(--edit-secondary-btn-hover)] active:bg-[var(--edit-secondary-btn-pressed)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+
+export const RESULTS_BOTTOM_SHEET_BTN_RECT_FILLED =
+  "inline-flex h-9 shrink-0 items-center justify-center rounded-[6px] bg-[var(--edit-btn-primary)] px-4 font-semibold text-[14px] leading-5 text-[var(--edit-text-primary)] hover:brightness-[0.97] disabled:opacity-50 disabled:cursor-not-allowed";
+
+export const RESULTS_BOTTOM_SHEET_BODY =
+  "flex-1 min-h-0 overflow-y-auto px-4 pb-2";
+
+export const RESULTS_MOBILE_NAV_TITLE =
+  "min-w-0 truncate font-bold text-[14px] leading-5 uppercase tracking-[0.02em] text-[var(--edit-text-primary)] sm:text-[16px] sm:leading-[22px]";
+
+export const RESULTS_MOBILE_NAV_SAVE_BTN =
+  "h-9 px-4 rounded-[6px] border border-[var(--edit-stone-700)] font-semibold text-[14px] leading-5 text-[var(--edit-text-primary)] whitespace-nowrap hover:bg-[var(--edit-secondary-btn-hover)] active:bg-[var(--edit-secondary-btn-pressed)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+
+export const RESULTS_MOBILE_NAV_CANCEL_BTN =
+  "h-9 shrink-0 px-3 rounded-[80px] border border-[var(--edit-stone-700)] font-semibold text-[14px] leading-5 text-[var(--edit-text-primary)]";
+
+export const RESULTS_SHEET_FOOTER_WRAP = "pt-4 pb-2";
diff --git a/app/ui/src/app/results/hooks/useIsClient.ts b/app/ui/src/app/results/hooks/useIsClient.ts
new file mode 100644
index 00000000..32d2040e
--- /dev/null
+++ b/app/ui/src/app/results/hooks/useIsClient.ts
@@ -0,0 +1,12 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/** True after hydration; use before rendering portals that touch document.body. */
+export function useIsClient(): boolean {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+}
diff --git a/app/ui/src/app/results/page.tsx b/app/ui/src/app/results/page.tsx
index 8ec3ad7d..3991d0bb 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -2,10 +2,23 @@
 
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
+import { NAVBAR_V2_LOGO, NAVBAR_V2_ROOT } from "../edit/formStyles.v2";
+import styles from "../edit/edit.module.css";
+import MobileSidebar from "../edit/components/layout/sidebar/MobileSidebar";
+import ExportEditWarningModal from "./components/ExportEditWarningModal";
+import ExportRoutesModal from "./components/ExportRoutesModal";
 import MapComponent from "./components/Map";
+import MobileResultsNavbar from "./components/MobileResultsNavbar";
+import ResultsBottomSheet from "./components/ResultsBottomSheet";
+import ResultsNavRail from "./components/ResultsNavRail";
 import Sidebar from "./components/Sidebar";
+import {
+  RESULTS_MOBILE_EDIT_BANNER_MESSAGE,
+  RESULTS_MOBILE_EDIT_PILL,
+} from "./formStyles.mobile";
 import type { PendingPinMove, Route } from "./types";
+import { downloadRoutesAsJsonFiles } from "./utils/downloadRouteJson";
 
 function readInitialRoutes(): { routes: Route[]; error: string | null } {
   if (typeof window === "undefined") return { routes: [], error: null };
@@ -15,6 +28,7 @@ function readInitialRoutes(): { routes: Route[]; error: string | null } {
 
   try {
     const parsed = JSON.parse(stored) as Route[];
+    sessionStorage.removeItem("optimizeResults");
     return { routes: parsed, error: null };
   } catch {
     return {
@@ -29,18 +43,14 @@ export default function ResultsPage() {
     useState(readInitialRoutes);
   const [routes, setRoutes] = useState<Route[]>(initialRoutes);
   const [error] = useState<string | null>(initialError);
-
-  useEffect(() => {
-    if (initialRoutes.length > 0) {
-      sessionStorage.removeItem("optimizeResults"); // consume once after successful parse + state update
-    }
-  }, [initialRoutes.length]);
-
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSheetExpanded, setIsSheetExpanded] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [pendingPinMove, setPendingPinMove] = useState<PendingPinMove | null>(
     null,
   );
+  const [exportOpen, setExportOpen] = useState(false);
+  const [exportWarningOpen, setExportWarningOpen] = useState(false);
 
   const updateStopNote = useCallback(
     (routeId: string, stopId: string, note: string) => {
@@ -76,6 +86,7 @@ export default function ResultsPage() {
   const handleEditModeChange = useCallback((value: boolean) => {
     setIsEditMode(value);
     if (!value) setPendingPinMove(null);
+    if (value) setIsSheetExpanded(true);
   }, []);
 
   const savePendingPinMove = useCallback(() => {
@@ -106,8 +117,92 @@ export default function ResultsPage() {
 
   const cancelPendingPinMove = useCallback(() => setPendingPinMove(null), []);
 
+  const exitEditMode = useCallback(() => {
+    handleEditModeChange(false);
+  }, [handleEditModeChange]);
+
+  const handleMobileCancel = useCallback(() => {
+    if (pendingPinMove != null) {
+      cancelPendingPinMove();
+    } else {
+      exitEditMode();
+    }
+  }, [pendingPinMove, cancelPendingPinMove, exitEditMode]);
+
+  const handleExportClick = useCallback(() => {
+    if (isEditMode || pendingPinMove != null) {
+      setExportWarningOpen(true);
+      return;
+    }
+    setExportOpen(true);
+  }, [isEditMode, pendingPinMove]);
+
+  const handleDoneEditingForExport = useCallback(() => {
+    handleEditModeChange(false);
+    setExportWarningOpen(false);
+    setExportOpen(true);
+  }, [handleEditModeChange]);
+
+  const handleExportSingleRoute = useCallback(
+    (vehicleId: string) => {
+      if (isEditMode || pendingPinMove != null) {
+        setExportWarningOpen(true);
+        return;
+      }
+      const routeIndex = routes.findIndex((r) => r.vehicleId === vehicleId);
+      if (routeIndex === -1) return;
+      downloadRoutesAsJsonFiles(routes, (_, i) => i === routeIndex);
+    },
+    [routes, isEditMode, pendingPinMove],
+  );
+
+  const handleDuplicateRoute = useCallback((vehicleId: string) => {
+    setRoutes((prev) => {
+      const routeIndex = prev.findIndex((r) => r.vehicleId === vehicleId);
+      if (routeIndex === -1) return prev;
+      const source = prev[routeIndex]!;
+      const suffix = Date.now().toString(36);
+      const copy: Route = {
+        ...source,
+        vehicleId: `${source.vehicleId}-copy-${suffix}`,
+        driverName: `${source.driverName} (copy)`,
+        stops: source.stops.map((stop, stopIndex) => ({
+          ...stop,
+          id: `${stop.id}-copy-${suffix}-${stopIndex}`,
+        })),
+      };
+      return [
+        ...prev.slice(0, routeIndex + 1),
+        copy,
+        ...prev.slice(routeIndex + 1),
+      ];
+    });
+  }, []);
+
+  const handleDeleteRoute = useCallback(
+    (vehicleId: string) => {
+      setRoutes((prev) => prev.filter((r) => r.vehicleId !== vehicleId));
+      if (pendingPinMove?.vehicleId === vehicleId) {
+        setPendingPinMove(null);
+      }
+    },
+    [pendingPinMove],
+  );
+
   return (
-    <main className="h-screen flex flex-col overflow-hidden">
+    <main
+      className={`h-screen flex flex-col overflow-hidden font-sans-manrope ${styles.root}`}
+    >
+      <ExportRoutesModal
+        isOpen={exportOpen}
+        onClose={() => setExportOpen(false)}
+        routes={routes}
+      />
+      <ExportEditWarningModal
+        isOpen={exportWarningOpen}
+        onClose={() => setExportWarningOpen(false)}
+        onDoneEditing={handleDoneEditingForExport}
+      />
       {error && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
           <div className="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm w-80 space-y-4">
@@ -122,51 +217,28 @@ export default function ResultsPage() {
         </div>
       )}{" "}
       {/* Map container switched to h-screen and added overflow hidden so the page is forced to be exactly one screen tall, whereas before the page was allowed to get taller than browser window leading to a long scroll */}
-      <header className="flex items-center justify-between gap-3 p-4 shrink-0 border-b border-zinc-200 bg-white">
-        <div className="flex items-center gap-3 min-w-0">
-          <button
-            type="button"
-            onClick={() => setIsSidebarOpen((prev) => !prev)}
-            className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50"
-            aria-label={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
-          >
-            <svg
-              className="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
-          </button>
-          <div className="min-w-0">
-            <span className="block truncate text-sm font-semibold tracking-wide text-zinc-800 uppercase">
-              Delivery Optimizer
-            </span>
-            <h1 className="sr-only">Results</h1>
-          </div>
-        </div>
-
+      <MobileSidebar
+        isOpen={isMobileMenuOpen}
+        onClose={() => setIsMobileMenuOpen(false)}
+      />
+      <header
+        className={`${NAVBAR_V2_ROOT} hidden lg:flex shrink-0 border-b border-[var(--edit-stone-200)]`}
+      >
+        <p className={NAVBAR_V2_LOGO}>DELIVERY OPTIMIZER</p>
         <div className="ml-auto flex items-center gap-2">
           {pendingPinMove != null && (
             <>
               <button
                 type="button"
                 onClick={cancelPendingPinMove}
-                className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
+                className="h-9 px-4 rounded-[6px] border border-[var(--edit-stone-700)] font-semibold text-sm text-[var(--edit-text-primary)] hover:bg-[var(--edit-secondary-btn-hover)]"
               >
                 Cancel
               </button>
               <button
                 type="button"
                 onClick={savePendingPinMove}
-                className="rounded-full bg-amber-500 px-3 py-1 text-xs font-medium text-white hover:bg-amber-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500"
+                className="h-9 px-4 rounded-[6px] border border-[var(--edit-stone-700)] font-semibold text-sm text-[var(--edit-text-primary)] hover:bg-[var(--edit-secondary-btn-hover)]"
               >
                 Save
               </button>
@@ -174,27 +246,59 @@ export default function ResultsPage() {
           )}
           <button
             type="button"
-            disabled
-            aria-disabled="true"
-            title="Export coming soon"
-            className="rounded-full bg-emerald-500 px-3 py-1 text-xs font-medium text-white opacity-50 cursor-not-allowed"
+            onClick={handleExportClick}
+            disabled={routes.length === 0}
+            className="h-9 px-4 rounded-[6px] bg-[var(--edit-btn-primary)] font-semibold text-sm text-[var(--edit-text-primary)] hover:brightness-[0.97] disabled:cursor-not-allowed disabled:opacity-50"
           >
             Export
           </button>
         </div>
       </header>
-      <div className="flex flex-1 min-h-0">
-        <div
-          className={`shrink-0 h-full overflow-hidden transition-[width] duration-300 ease-in-out ${isSidebarOpen ? "w-72" : "w-0"}`}
-        >
+      <div className="hidden lg:flex flex-1 min-h-0">
+        <ResultsNavRail />
+        {/* Hi-fi routes panel width (28rem); always visible on desktop */}
+        <div className="shrink-0 h-full w-[28rem] overflow-hidden">
           <Sidebar
             routes={routes}
             isEditMode={isEditMode}
             onEditModeChange={handleEditModeChange}
             onUpdateStopNote={updateStopNote}
+            onExportRoute={handleExportSingleRoute}
+            onDuplicateRoute={handleDuplicateRoute}
+            onDeleteRoute={handleDeleteRoute}
           />
         </div>
         <div className="flex-1 min-w-0 min-h-0 flex flex-col">
+          <div className="relative flex-1 min-h-0 w-full overflow-hidden">
+            {isEditMode && (
+              <p className={RESULTS_MOBILE_EDIT_PILL} role="status">
+                {RESULTS_MOBILE_EDIT_BANNER_MESSAGE}
+              </p>
+            )}
+            <MapComponent
+              routes={routes}
+              isEditMode={isEditMode}
+              pendingPinMove={pendingPinMove}
+              onPendingPinMove={handlePendingPinMove}
+              onRouteDistanceUpdate={handleRouteDistanceUpdate}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="lg:hidden relative flex flex-1 min-h-0 flex-col">
+        <MobileResultsNavbar
+          onMenuClick={() => setIsMobileMenuOpen(true)}
+          showCancel={pendingPinMove != null}
+          onSave={savePendingPinMove}
+          onCancel={handleMobileCancel}
+          saveDisabled={isEditMode && pendingPinMove == null}
+        />
+        <div className="relative flex flex-1 min-h-0 flex-col">
+          {isEditMode && (
+            <p className={RESULTS_MOBILE_EDIT_PILL} role="status">
+              {RESULTS_MOBILE_EDIT_BANNER_MESSAGE}
+            </p>
+          )}
           <div className="flex-1 min-h-0 w-full overflow-hidden">
             <MapComponent
               routes={routes}
@@ -205,6 +309,18 @@ export default function ResultsPage() {
             />
           </div>
         </div>
+        <ResultsBottomSheet
+          routes={routes}
+          isExpanded={isSheetExpanded}
+          onExpandedChange={setIsSheetExpanded}
+          isEditMode={isEditMode}
+          onEditModeChange={handleEditModeChange}
+          onExportClick={handleExportClick}
+          onUpdateStopNote={updateStopNote}
+          onExportRoute={handleExportSingleRoute}
+          onDuplicateRoute={handleDuplicateRoute}
+          onDeleteRoute={handleDeleteRoute}
+        />
       </div>
     </main>
   );
diff --git a/app/ui/src/app/results/types.ts b/app/ui/src/app/results/types.ts
index aee38956..fcdbbba7 100644
--- a/app/ui/src/app/results/types.ts
+++ b/app/ui/src/app/results/types.ts
@@ -23,6 +23,9 @@ export interface Stop {
   note: string; // driver notes for the stop
   addresseeName?: string; // name of person at address
   phoneNumber?: string; // phone number of person at address
+  /** When both set (from delivery window picks), displayed as “start – end” on results */
+  deliveryWindowStart?: string;
+  deliveryWindowEnd?: string;
 }
 
 // Data that a single route contains (one driver, their stops in order, and the path to draw for the route)
@@ -42,3 +45,10 @@ export interface PendingPinMove {
   lat: number;
   lng: number;
 }
+
+export interface HoveredStopInfo {
+  routeIndex: number;
+  stop: Stop;
+  lat: number;
+  lng: number;
+}
diff --git a/app/ui/src/app/results/utils/downloadRouteJson.ts b/app/ui/src/app/results/utils/downloadRouteJson.ts
new file mode 100644
index 00000000..e1010fb9
--- /dev/null
+++ b/app/ui/src/app/results/utils/downloadRouteJson.ts
@@ -0,0 +1,59 @@
+import type { Route } from "../types";
+
+function slugForFilename(name: string): string {
+  const s = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return s.length > 0 ? s.slice(0, 48) : "route";
+}
+
+export function routeJsonFilename(
+  displayRouteNumber: number,
+  driverName: string,
+): string {
+  return `route_${displayRouteNumber}_${slugForFilename(driverName)}.json`;
+}
+
+function triggerDownload(filename: string, json: string) {
+  try {
+    const blob = new Blob([json], { type: "application/json" });
+    const objectUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = objectUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+  } catch (err) {
+    console.error(`Failed to download ${filename}:`, err);
+  }
+}
+
+/**
+ * One JSON file per route; stagger slightly so browsers allow multiple saves from one gesture.
+ * Timeouts are intentionally not tracked — exports are fire-and-forget from a user gesture.
+ */
+export function downloadRoutesAsJsonFiles(
+  orderedRoutes: Route[],
+  predicate: (route: Route, zeroBasedIndex: number) => boolean,
+  staggerMs = 180,
+) {
+  let slot = 0;
+  for (let i = 0; i < orderedRoutes.length; i++) {
+    const route = orderedRoutes[i];
+    if (!predicate(route, i)) continue;
+    const displayNumber = i + 1;
+    const filename = routeJsonFilename(displayNumber, route.driverName);
+    const json = JSON.stringify(route, null, 2);
+    const delay = slot * staggerMs;
+    slot += 1;
+    if (delay === 0) {
+      triggerDownload(filename, json);
+    } else {
+      window.setTimeout(() => triggerDownload(filename, json), delay);
+    }
+  }
+}
diff --git a/app/ui/src/app/results/utils/routeColors.ts b/app/ui/src/app/results/utils/routeColors.ts
index 52bdbea5..8b196a72 100644
--- a/app/ui/src/app/results/utils/routeColors.ts
+++ b/app/ui/src/app/results/utils/routeColors.ts
@@ -11,3 +11,8 @@ const PALETTE = [
 export function routeColorHex(routeIndex: number): string {
   return PALETTE[routeIndex % PALETTE.length]!;
 }
+
+/** 6-digit hex + 2-digit alpha suffix for inline tints (e.g. `#1E90B5` + `22`). */
+export function routeColorTint(hex: string, alphaHex: string): string {
+  return `${hex}${alphaHex}`;
+}
diff --git a/app/ui/src/tests/addressCardToDeliveryInput.test.ts b/app/ui/src/tests/addressCardToDeliveryInput.test.ts
index 8a5715d7..d277b067 100644
--- a/app/ui/src/tests/addressCardToDeliveryInput.test.ts
+++ b/app/ui/src/tests/addressCardToDeliveryInput.test.ts
@@ -104,6 +104,22 @@ describe("addressCardToDeliveryInput", () => {
         .notes,
     ).toBeUndefined();
   });
+
+  it("recipient name and phone forwarded when present", () => {
+    expect(
+      addressCardToDeliveryInput(
+        makeAddress({
+          recipientName: "Kayla Wong",
+          phoneNumber: "(530) 555-0199",
+        }),
+        LOC,
+        "units",
+      ),
+    ).toMatchObject({
+      recipientName: "Kayla Wong",
+      phoneNumber: "(530) 555-0199",
+    });
+  });
 });
 
 describe("vehicleRowToVehicleInput", () => {
diff --git a/app/ui/src/tests/recipientSummary.test.ts b/app/ui/src/tests/recipientSummary.test.ts
new file mode 100644
index 00000000..a265001d
--- /dev/null
+++ b/app/ui/src/tests/recipientSummary.test.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import {
+  hasRecipientContact,
+  recipientSummary,
+} from "@/app/edit/utils/recipientSummary";
+
+describe("recipientSummary", () => {
+  it("returns name and phone joined with middle dot when both set", () => {
+    expect(
+      recipientSummary({
+        recipientName: "Jane Doe",
+        phoneNumber: "555-123-4567",
+      }),
+    ).toBe("Jane Doe · 555-123-4567");
+  });
+
+  it("returns name only when phone is blank", () => {
+    expect(
+      recipientSummary({ recipientName: "Jane Doe", phoneNumber: "" }),
+    ).toBe("Jane Doe");
+  });
+
+  it("returns phone only when name is blank", () => {
+    expect(
+      recipientSummary({ recipientName: "", phoneNumber: "555-123-4567" }),
+    ).toBe("555-123-4567");
+  });
+
+  it("returns em dash when both are blank", () => {
+    expect(recipientSummary({ recipientName: "", phoneNumber: "" })).toBe("—");
+  });
+});
+
+describe("hasRecipientContact", () => {
+  it("is false when both fields are whitespace only", () => {
+    expect(hasRecipientContact({ recipientName: "  ", phoneNumber: " " })).toBe(
+      false,
+    );
+  });
+
+  it("is true when either field has content", () => {
+    expect(
+      hasRecipientContact({ recipientName: "Jane", phoneNumber: "" }),
+    ).toBe(true);
+    expect(hasRecipientContact({ recipientName: "", phoneNumber: "555" })).toBe(
+      true,
+    );
+  });
+});
diff --git a/app/ui/src/tests/vroomToRoutes.test.ts b/app/ui/src/tests/vroomToRoutes.test.ts
index 7c5b01e5..dc05813e 100644
--- a/app/ui/src/tests/vroomToRoutes.test.ts
+++ b/app/ui/src/tests/vroomToRoutes.test.ts
@@ -42,12 +42,17 @@ function makeAddress(
   };
 }
 
-function jobStep(jobId: string, arrivalSecs: number): VroomStep {
+function jobStep(
+  jobId: string,
+  arrivalSecs: number,
+  overrides: Partial<VroomStep> = {},
+): VroomStep {
   return {
     type: "job",
     job_external_id: jobId,
     location: [-74.006, 40.7128],
     arrival: arrivalSecs,
+    ...overrides,
   };
 }
 
@@ -196,4 +201,50 @@ describe("vroomToRoutes", () => {
     const [route] = vroomToRoutes(response, [makeVehicle(1)], [makeAddress(1)]);
     expect(route.stops[0].timeWindow.time).toBe("9:00 AM");
   });
+
+  it("maps recipient name and phone from the address form", () => {
+    const [route] = vroomToRoutes(
+      SINGLE_STOP,
+      [makeVehicle(1)],
+      [
+        makeAddress(1, {
+          recipientName: "Kayla Wong",
+          phoneNumber: "(530) 555-0199",
+        }),
+      ],
+    );
+    expect(route.stops[0]).toMatchObject({
+      addresseeName: "Kayla Wong",
+      phoneNumber: "(530) 555-0199",
+    });
+  });
+
+  it("capacityUsed prefers form deliveryQuantity when greater than zero", () => {
+    const [route] = vroomToRoutes(
+      SINGLE_STOP,
+      [makeVehicle(1)],
+      [makeAddress(1, { deliveryQuantity: 4 })],
+    );
+    expect(route.stops[0].capacityUsed).toBe(4);
+  });
+
+  it("capacityUsed falls back to VROOM step load when form quantity is zero", () => {
+    const response: VroomResponse = {
+      routes: [
+        {
+          vehicle: 1,
+          vehicle_external_id: "1",
+          steps: [jobStep("1", 32400, { load: [7] })],
+          distance: 0,
+          duration: 0,
+        },
+      ],
+    };
+    const [route] = vroomToRoutes(
+      response,
+      [makeVehicle(1)],
+      [makeAddress(1, { deliveryQuantity: 0 })],
+    );
+    expect(route.stops[0].capacityUsed).toBe(7);
+  });
 });