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..406de4f0 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 { readHasOptimizeResults } from "../../../utils/hasOptimizeResults";
 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,48 @@ 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 hasStoredRoutes = !isResultsPage && readHasOptimizeResults();
+
+  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/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..e9ff32aa 100644
--- a/app/ui/src/app/results/components/EditableStopItem.tsx
+++ b/app/ui/src/app/results/components/EditableStopItem.tsx
@@ -3,7 +3,7 @@
 "use client";
 
 import { useState } from "react";
-import type { Stop } from "../types";
+import type { Stop, TimeWindow } from "../types";
 
 type EditableStopItemProps = {
   stop: Stop;
@@ -12,6 +12,116 @@ 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 a = stop.deliveryWindowStart?.trim();
+  const b = stop.deliveryWindowEnd?.trim();
+  if (a && b) return `${formatTime12h(a)} – ${formatTime12h(b)}`;
+  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 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>
+  );
+}
+
+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>
+  );
+}
+
 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 py-1 text-[12px] font-semibold tabular-nums"
+          style={{
+            borderColor: `${accentColor}55`,
+            backgroundColor: `${accentColor}18`,
+            color: accentColor,
+          }}
         >
-          <span className="sr-only">Packages:</span>
-          <span aria-hidden>📦</span> {stop.capacityUsed ?? "—"}
+          <span className="sr-only">Boxes:</span>
+          <PackageIcon className="h-3.5 w-3.5 opacity-90" />
+          {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..4b45abb6
--- /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 type { Route } from "../types";
+import { useIsClient } from "../hooks/useIsClient";
+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..0bb99cea 100644
--- a/app/ui/src/app/results/components/Map.tsx
+++ b/app/ui/src/app/results/components/Map.tsx
@@ -20,6 +20,37 @@ import type { PendingPinMove, Route } from "../types";
 import { routeColorHex } from "../utils/routeColors";
 
 const DAVIS_CENTER = { lat: 38.5449, lng: -121.7405 };
+const MARKER_ICON_WIDTH = 28;
+const MARKER_ICON_HEIGHT = 40;
+
+function getMarkerScaledSize(): google.maps.Size | undefined {
+  if (typeof google === "undefined") return undefined;
+  return new google.maps.Size(MARKER_ICON_WIDTH, MARKER_ICON_HEIGHT);
+}
+
+// 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`;
+  // Anchor bottom-center of the pin on the stop (tip is at y=40 in the SVG).
+  wrapper.style.transform = "translate(-50%, -100%)";
+
+  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,
@@ -307,7 +338,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 +351,7 @@ function AdvancedMarkers({
               position,
               title: stop.address,
               gmpDraggable: isEditMode,
+              content: createRoutePinElement(accentColor),
             });
 
             m.addListener("dragend", () => {
@@ -466,7 +499,10 @@ export default function MapComponent({
             />
           )}
           {!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 +521,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/Sidebar.tsx b/app/ui/src/app/results/components/Sidebar.tsx
index 76a6bed9..008256f5 100644
--- a/app/ui/src/app/results/components/Sidebar.tsx
+++ b/app/ui/src/app/results/components/Sidebar.tsx
@@ -1,5 +1,6 @@
 // Sidebar: route cards, expand/collapse stops, edit-mode toggle.
 
+import Image from "next/image";
 import { useMemo, useState } from "react";
 import type { Route } from "../types";
 import { routeColorHex } from "../utils/routeColors";
@@ -45,154 +46,263 @@ export default function Sidebar({
   }
 
   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"}`}
-    >
-      {isEditMode && (
-        <p className="mb-2 text-xs font-medium text-amber-700 bg-amber-50 rounded px-2 py-1">
-          Edit Mode Active
-        </p>
-      )}
-      <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>
+    <aside className="w-full h-full flex flex-col overflow-hidden border-r-2 border-zinc-200 bg-white p-4">
+      <div className="flex shrink-0 items-start justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold text-zinc-800 whitespace-nowrap">
+            Optimized Routes
+          </h2>
+          <p className="mt-1 text-xs text-zinc-500">
+            {routes.length} route{routes.length === 1 ? "" : "s"} with{" "}
+            {totalStops} total stop
+            {totalStops === 1 ? "" : "s"}
+          </p>
+        </div>
         <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"}`}
+          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-zinc-300 ${
+            isEditMode
+              ? "border border-[var(--edit-teal-300)] bg-[var(--edit-teal-300)] text-[var(--edit-text-primary)] hover:opacity-90"
+              : "border border-zinc-900 bg-white text-zinc-900 hover:bg-zinc-50"
+          }`}
         >
-          <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"}`}
-          />
+          {isEditMode ? "Save edits" : "Edit"}
         </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">
-        {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);
+      <div className="mt-3 flex-1 min-h-0 flex flex-col">
+        <div className="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}
+                return (
+                  <li
+                    key={route.vehicleId}
+                    className={`rounded-[24px] border overflow-hidden ${
+                      isEditMode
+                        ? "border-[var(--edit-teal-300)] bg-white"
+                        : "border-zinc-300 bg-white"
+                    }`}
                   >
-                    <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
+                    <button
+                      type="button"
+                      onClick={() => toggleExpanded(route.vehicleId)}
+                      className="w-full px-4 py-3 text-left hover:bg-zinc-50 transition-colors"
+                      aria-expanded={isExpanded}
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-start gap-2.5 min-w-0">
+                            <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.0"
+                                  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 pt-2.5">
+                              <div
+                                className="text-[15px] font-semibold leading-none"
+                                style={{ color: accent }}
+                              >
+                                Route {idx + 1}
+                              </div>
+                              <div className="mt-1 text-[13px] font-medium leading-none text-zinc-900">
+                                {route.driverName}
+                              </div>
+                            </div>
                           </div>
-                          <div className="text-sm font-semibold text-zinc-800 tabular-nums">
-                            {route.distanceMi != null
-                              ? `${route.distanceMi}mi`
-                              : "—"}
+                          <div className="mt-3 grid grid-cols-3 gap-4">
+                            <div>
+                              <div className="text-[10px] uppercase tracking-wide text-zinc-500">
+                                STOPS
+                              </div>
+                              <div className="mt-1 text-[15px] font-semibold leading-none text-zinc-900">
+                                {sortedStops.length}
+                              </div>
+                            </div>
+                            <div>
+                              <div className="text-[10px] uppercase tracking-wide text-zinc-500">
+                                DISTANCE
+                              </div>
+                              <div className="mt-1 text-[15px] font-semibold leading-none text-zinc-900 tabular-nums">
+                                {route.distanceMi != null
+                                  ? `${route.distanceMi}mi`
+                                  : "—"}
+                              </div>
+                            </div>
+                            <div>
+                              <div className="text-[10px] uppercase tracking-wide text-zinc-500">
+                                TIME
+                              </div>
+                              <div className="mt-1 text-[15px] font-semibold leading-none text-zinc-900 tabular-nums">
+                                {formatEstTime(route.estimatedTimeMinutes)}
+                              </div>
+                            </div>
                           </div>
+                          <p className="mt-3 flex items-center gap-2 text-[12px] text-zinc-700">
+                            <svg
+                              className="h-4 w-4 text-zinc-400"
+                              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>
                         </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 className="mt-0.5 flex items-center text-zinc-400">
+                          <svg
+                            className={`h-[22px] w-[22px] 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>
                         </div>
                       </div>
-                      <p className="mt-2 text-xs text-zinc-600">
-                        <span className="font-medium text-zinc-700">
-                          Driver:
-                        </span>{" "}
-                        {route.driverName}
-                      </p>
-                    </div>
+                    </button>
 
-                    <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>
-              );
-            })}
-          </ul>
-        )}
+                    {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 items-stretch"
+                              >
+                                <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(
+                                        route.vehicleId,
+                                        stop.id,
+                                        note,
+                                      )
+                                    }
+                                  />
+                                </div>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+        <div className="shrink-0 pt-4 text-zinc-700">
+          <Image
+            src="/b2-logo.png"
+            alt="B2 logo"
+            width={72}
+            height={24}
+            className="h-6 w-auto object-contain"
+          />
+          <p className="mt-1 text-[12px] leading-5 font-medium text-zinc-800">
+            Built with ❤️ for Humanity.
+          </p>
+          <p className="text-[12px] leading-5 font-medium text-zinc-800">
+            The Benevolent Bandwidth Foundation
+          </p>
+        </div>
       </div>
     </aside>
   );
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..acafeac8
--- /dev/null
+++ b/app/ui/src/app/results/hooks/useIsClient.ts
@@ -0,0 +1,12 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/** True after mount; false during SSR (for createPortal targets). */
+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..8bbd3c57 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -3,6 +3,13 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { NAVBAR_V2_LOGO, NAVBAR_V2_ROOT } from "../edit/formStyles.v2";
+import styles from "../edit/edit.module.css";
+import EditSidebar from "../edit/components/layout/sidebar/Sidebar";
+import SidebarEditButton from "../edit/components/layout/sidebar/SidebarEditButton";
+import SidebarResultsButton from "../edit/components/layout/sidebar/SidebarResultsButton";
+import ExportEditWarningModal from "./components/ExportEditWarningModal";
+import ExportRoutesModal from "./components/ExportRoutesModal";
 import MapComponent from "./components/Map";
 import Sidebar from "./components/Sidebar";
 import type { PendingPinMove, Route } from "./types";
@@ -36,11 +43,12 @@ export default function ResultsPage() {
     }
   }, [initialRoutes.length]);
 
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   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) => {
@@ -106,8 +114,33 @@ export default function ResultsPage() {
 
   const cancelPendingPinMove = useCallback(() => setPendingPinMove(null), []);
 
+  const handleExportClick = useCallback(() => {
+    if (isEditMode || pendingPinMove != null) {
+      setExportWarningOpen(true);
+      return;
+    }
+    setExportOpen(true);
+  }, [isEditMode, pendingPinMove]);
+
+  const handleDoneEditingForExport = useCallback(() => {
+    handleEditModeChange(false);
+    setExportWarningOpen(false);
+  }, [handleEditModeChange]);
+
   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,35 +155,9 @@ 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">
+      <header className={`${NAVBAR_V2_ROOT} shrink-0 border-b border-zinc-200`}>
         <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>
+          <p className={NAVBAR_V2_LOGO}>DELIVERY OPTIMIZER</p>
         </div>
 
         <div className="ml-auto flex items-center gap-2">
@@ -159,14 +166,14 @@ export default function ResultsPage() {
               <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-6 rounded-[80px] border border-[var(--edit-foreground)] font-medium text-[14px] leading-5 text-[var(--edit-foreground)] whitespace-nowrap hover:bg-black/5 transition-colors"
               >
                 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-6 rounded-[80px] border border-[var(--edit-foreground)] font-medium text-[14px] leading-5 text-[var(--edit-foreground)] whitespace-nowrap hover:bg-black/5 transition-colors"
               >
                 Save
               </button>
@@ -174,19 +181,22 @@ 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-6 rounded-[80px] bg-[var(--edit-teal-500)] font-medium text-[14px] leading-5 text-[var(--edit-foreground)] whitespace-nowrap hover:opacity-90 transition-opacity 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"}`}
-        >
+        <EditSidebar>
+          <SidebarEditButton />
+          <SidebarResultsButton />
+        </EditSidebar>
+
+        {/* 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}
@@ -195,7 +205,12 @@ export default function ResultsPage() {
           />
         </div>
         <div className="flex-1 min-w-0 min-h-0 flex flex-col">
-          <div className="flex-1 min-h-0 w-full overflow-hidden">
+          <div className="relative flex-1 min-h-0 w-full overflow-hidden">
+            {isEditMode && (
+              <div className="pointer-events-none absolute left-1/2 top-4 z-10 -translate-x-1/2 rounded-[80px] bg-[var(--edit-teal-300)] px-4 py-2 text-sm font-medium text-[var(--edit-text-primary)] shadow-sm">
+                You are now in editing mode
+              </div>
+            )}
             <MapComponent
               routes={routes}
               isEditMode={isEditMode}
diff --git a/app/ui/src/app/results/types.ts b/app/ui/src/app/results/types.ts
index aee38956..68777602 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)
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..8ada7ec9
--- /dev/null
+++ b/app/ui/src/app/results/utils/downloadRouteJson.ts
@@ -0,0 +1,56 @@
+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. */
+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/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);
+  });
 });