From ccb33cdaf544fcefc21c843b21ed6f080c50acf9 Mon Sep 17 00:00:00 2001
From: Adam Jackson <akjackson1@gmail.com>
Date: Thu, 25 Jun 2026 14:25:04 -0700
Subject: [PATCH 1/4] Record start and end date

---
 backend/models/Trip.ts                 |  1 +
 backend/routes/trips/[tripId]/index.ts | 26 +-------
 frontend/pages/[tripId]/itinerary.tsx  | 52 +++------------
 frontend/pages/[tripId]/settings.tsx   | 57 ++++++++++++++---
 frontend/pages/create.tsx              | 88 +++++++++++++++++++++-----
 shared/types.ts                        |  5 ++
 6 files changed, 137 insertions(+), 92 deletions(-)

diff --git a/backend/models/Trip.ts b/backend/models/Trip.ts
index b6a474b7..a4f92ab8 100644
--- a/backend/models/Trip.ts
+++ b/backend/models/Trip.ts
@@ -87,6 +87,7 @@ const fields: Record<
     },
   ],
   startDate: { type: String, default: null },
+  endDate: { type: String, default: null },
   startMonth: { type: Number, required: true },
   endMonth: { type: Number, required: true },
   imgUrl: { type: String, default: null },
diff --git a/backend/routes/trips/[tripId]/index.ts b/backend/routes/trips/[tripId]/index.ts
index 864c2ecc..09c44a3a 100644
--- a/backend/routes/trips/[tripId]/index.ts
+++ b/backend/routes/trips/[tripId]/index.ts
@@ -97,6 +97,8 @@ trip.patch("/", async (c) => {
   const newData: Record<string, any> = {
     name: data.name,
     region: data.region,
+    startDate: data.startDate ?? null,
+    endDate: data.endDate ?? null,
     startMonth: data.startMonth,
     endMonth: data.endMonth,
   };
@@ -264,28 +266,4 @@ trip.post("/share-code", async (c) => {
   throw new HTTPException(500, { message: "Failed to generate share code" });
 });
 
-trip.patch("/set-start-date", async (c) => {
-  const session = await authenticate(c);
-  const tripId: string | undefined = c.req.param("tripId");
-
-  if (!tripId) {
-    throw new HTTPException(400, { message: "Trip ID is required" });
-  }
-
-  const { startDate } = await c.req.json<{ startDate: string }>();
-
-  await connect();
-  const trip = await Trip.findById(tripId).lean();
-  if (!trip) {
-    throw new HTTPException(404, { message: "Trip not found" });
-  }
-  if (!(await isTripEditor(tripId, session.userId))) {
-    throw new HTTPException(403, { message: "Forbidden" });
-  }
-
-  await Trip.updateOne({ _id: tripId }, { startDate });
-
-  return c.json({});
-});
-
 export default trip;
diff --git a/frontend/pages/[tripId]/itinerary.tsx b/frontend/pages/[tripId]/itinerary.tsx
index 3edde419..b4db082b 100644
--- a/frontend/pages/[tripId]/itinerary.tsx
+++ b/frontend/pages/[tripId]/itinerary.tsx
@@ -3,10 +3,8 @@ import Header from "components/Header";
 import TripNav from "components/TripNav";
 import { useUser } from "hooks/useUser";
 import ErrorBoundary from "components/ErrorBoundary";
-import Input from "components/Input";
 import Button from "components/Button";
 import { useTrip } from "hooks/useTrip";
-import toast from "react-hot-toast";
 import { useModal } from "stores/modals";
 import Icon from "components/Icon";
 import NotFound from "components/NotFound";
@@ -19,7 +17,6 @@ export default function Itinerary() {
   const { is404, trip, canEdit } = useTrip();
   const { close, modalId } = useModal();
   const hasStartDate = !!trip?.startDate;
-  const [editingStartDate, setEditingStartDate] = React.useState(false);
   const shouldDefaultEdit = !!(trip && !trip?.startDate) || !!(trip && !trip?.itinerary?.length);
   const [editing, setEditing] = React.useState(shouldDefaultEdit);
   const [prevShouldDefaultEdit, setPrevShouldDefaultEdit] = React.useState(shouldDefaultEdit);
@@ -30,15 +27,6 @@ export default function Itinerary() {
     if (shouldDefaultEdit) setEditing(true);
   }
 
-  const setStartDateMutation = useTripMutation<{ startDate: string }>({
-    url: `/trips/${trip?._id}/set-start-date`,
-    method: "PATCH",
-    updateCache: (old, input) => ({
-      ...old,
-      startDate: input.startDate,
-    }),
-  });
-
   const addDayMutation = useTripMutation<{ id: string; locations: any[] }>({
     url: `/trips/${trip?._id}/itinerary`,
     method: "POST",
@@ -48,16 +36,6 @@ export default function Itinerary() {
     }),
   });
 
-  const submitStartDate = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const form = e.currentTarget;
-    const date = form.date.value;
-    if (!date) return toast.error("Please choose a date");
-    setStartDateMutation.mutate({ startDate: date });
-    setEditingStartDate(false);
-    setEditing(true);
-  };
-
   const handleAddDay = () => {
     addDayMutation.mutate({ id: nanoId(6), locations: [] });
   };
@@ -103,31 +81,17 @@ export default function Itinerary() {
                       </Button>
                     )}
                   </div>
-                  {canEdit && !!trip?.startDate && !editingStartDate && (
-                    <button
-                      type="button"
-                      onClick={() => setEditingStartDate(true)}
-                      className="text-[14px] text-gray-600 hover:text-gray-700 block mt-2 hover:underline"
-                    >
-                      Edit start date
-                    </button>
-                  )}
                 </div>
 
-                {canEdit && (!trip?.startDate || editingStartDate) && (
+                {canEdit && !trip?.startDate && (
                   <div className="pt-4 p-5 bg-white rounded-lg shadow-sm mb-8">
-                    <h2 className="text-xl font-bold text-gray-700 mb-4">Choose start date</h2>
-                    <form className="flex gap-2" onSubmit={submitStartDate}>
-                      <Input
-                        name="date"
-                        type="date"
-                        defaultValue={trip?.startDate}
-                        className="grow flex xs:block"
-                      />
-                      <Button type="submit" color="primary">
-                        Set
-                      </Button>
-                    </form>
+                    <h2 className="text-xl font-bold text-gray-700 mb-2">Set your trip dates</h2>
+                    <p className="text-gray-600 mb-4">
+                      Add a start date in trip settings to build your day-by-day itinerary.
+                    </p>
+                    <Button href={`/${trip?._id}/settings`} color="primary">
+                      Go to Trip Settings
+                    </Button>
                   </div>
                 )}
                 {!canEdit && !trip?.startDate && (
diff --git a/frontend/pages/[tripId]/settings.tsx b/frontend/pages/[tripId]/settings.tsx
index d0e292e3..4463f334 100644
--- a/frontend/pages/[tripId]/settings.tsx
+++ b/frontend/pages/[tripId]/settings.tsx
@@ -18,6 +18,12 @@ import Icon from "components/Icon";
 import { useQueryClient } from "@tanstack/react-query";
 import { getRegionCode, validateRegionFields, RegionFieldsValue } from "lib/region";
 import { Trip } from "@birdplan/shared";
+import dayjs from "dayjs";
+
+const monthOption = (month: number): Option => ({
+  value: month.toString(),
+  label: months[month - 1],
+});
 
 export default function TripSettings() {
   const { trip, is404, isOwner } = useTrip();
@@ -48,16 +54,24 @@ type SettingsFormProps = {
 function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const [startMonth, setStartMonth] = React.useState<Option>({
-    value: trip.startMonth.toString(),
-    label: months[trip.startMonth - 1],
-  });
-  const [endMonth, setEndMonth] = React.useState<Option>({
-    value: trip.endMonth.toString(),
-    label: months[trip.endMonth - 1],
-  });
+  const [startDate, setStartDate] = React.useState(trip.startDate ?? "");
+  const [endDate, setEndDate] = React.useState(trip.endDate ?? "");
+  const [startMonth, setStartMonth] = React.useState<Option>(monthOption(trip.startMonth));
+  const [endMonth, setEndMonth] = React.useState<Option>(monthOption(trip.endMonth));
   const [region, setRegion] = React.useState<RegionFieldsValue>(initialRegion);
 
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setStartDate(value);
+    if (value) setStartMonth(monthOption(dayjs(value).month() + 1));
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEndDate(value);
+    if (value) setEndMonth(monthOption(dayjs(value).month() + 1));
+  };
+
   const deleteTripMutation = useMutation({
     url: `/trips/${trip._id}`,
     method: "DELETE",
@@ -88,6 +102,8 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
     updateTripMutation.mutate({
       name,
       region: getRegionCode(region)!,
+      startDate: startDate || undefined,
+      endDate: endDate || undefined,
       startMonth: Number(startMonth.value),
       endMonth: Number(endMonth.value),
     });
@@ -124,7 +140,30 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
                 />
               </Field>
               <div>
-                <label className="mb-1 block font-medium text-sm text-gray-700">Trip Timeframe</label>
+                <label className="mb-1 block font-medium text-sm text-gray-700">Trip Dates</label>
+                <div className="flex gap-2 items-center">
+                  <Input
+                    type="date"
+                    name="startDate"
+                    value={startDate}
+                    onChange={handleStartDateChange}
+                    className="grow"
+                  />
+                  <span className="text-gray-500 px-2">to</span>
+                  <Input
+                    type="date"
+                    name="endDate"
+                    value={endDate}
+                    onChange={handleEndDateChange}
+                    className="grow"
+                  />
+                </div>
+                <p className="mt-1 text-sm text-gray-500">
+                  Approximate dates are fine — you can refine them later.
+                </p>
+              </div>
+              <div>
+                <label className="mb-1 block font-medium text-sm text-gray-700">Trip Timeframe (months)</label>
                 <div className="flex gap-2 items-center">
                   <MonthSelect
                     onChange={setStartMonth}
diff --git a/frontend/pages/create.tsx b/frontend/pages/create.tsx
index 8b4d4766..ff0e4b06 100644
--- a/frontend/pages/create.tsx
+++ b/frontend/pages/create.tsx
@@ -12,6 +12,7 @@ import { Option } from "lib/types";
 import { TripInput } from "@birdplan/shared";
 import { useModal } from "stores/modals";
 import dayjs from "dayjs";
+import { months } from "lib/helpers";
 import useMutation from "hooks/useMutation";
 import RegionFields from "components/RegionFields";
 import { Link } from "react-router-dom";
@@ -22,18 +23,35 @@ import {
   validateRegionFields,
 } from "lib/region";
 
-const defaultMonth = {
-  value: (dayjs().month() + 1).toString(),
-  label: dayjs().format("MMM"),
-};
+const monthOption = (month: number): Option => ({
+  value: month.toString(),
+  label: months[month - 1],
+});
+
+const defaultMonth = monthOption(dayjs().month() + 1);
 
 export default function CreateTrip() {
   const [region, setRegion] = React.useState<RegionFieldsValue>(emptyRegionFieldsValue);
+  const [startDate, setStartDate] = React.useState("");
+  const [endDate, setEndDate] = React.useState("");
   const [startMonth, setStartMonth] = React.useState<Option>(defaultMonth);
   const [endMonth, setEndMonth] = React.useState<Option>(defaultMonth);
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
   const navigate = useNavigate();
   const { close } = useModal();
 
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setStartDate(value);
+    if (value) setStartMonth(monthOption(dayjs(value).month() + 1));
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEndDate(value);
+    if (value) setEndMonth(monthOption(dayjs(value).month() + 1));
+  };
+
   const mutation = useMutation<{ id: string }, TripInput>({
     url: "/trips",
     method: "POST",
@@ -54,6 +72,8 @@ export default function CreateTrip() {
     mutation.mutate({
       name,
       region: getRegionCode(region)!,
+      startDate: startDate || undefined,
+      endDate: endDate || undefined,
       startMonth: Number(startMonth.value),
       endMonth: Number(endMonth.value),
     });
@@ -78,24 +98,62 @@ export default function CreateTrip() {
                 <Input type="text" name="name" placeholder='E.g. "Galapagos Islands 2020"' autoFocus />
               </Field>
               <div>
-                <label className="mb-1 block font-medium text-sm text-gray-700">Trip Timeframe</label>
+                <label className="mb-1 block font-medium text-sm text-gray-700">Trip Dates</label>
                 <div className="flex gap-2 items-center">
-                  <MonthSelect
-                    onChange={setStartMonth}
-                    value={startMonth}
-                    instanceId="startMonth"
+                  <Input
+                    type="date"
+                    name="startDate"
+                    value={startDate}
+                    onChange={handleStartDateChange}
                     className="grow"
-                    menuPortalTarget={typeof document !== "undefined" ? document.body : null}
                   />
                   <span className="text-gray-500 px-2">to</span>
-                  <MonthSelect
-                    onChange={setEndMonth}
-                    value={endMonth}
-                    instanceId="endMonth"
+                  <Input
+                    type="date"
+                    name="endDate"
+                    value={endDate}
+                    onChange={handleEndDateChange}
                     className="grow"
-                    menuPortalTarget={typeof document !== "undefined" ? document.body : null}
                   />
                 </div>
+                <p className="mt-1 text-sm text-gray-500">
+                  Approximate dates are fine — you can refine them later.
+                </p>
+              </div>
+              <div>
+                <button
+                  type="button"
+                  onClick={() => setShowAdvanced((prev) => !prev)}
+                  className="inline-flex items-center gap-1 text-sm font-medium text-gray-500 hover:text-gray-600"
+                >
+                  <Icon
+                    name="angleDown"
+                    className={`text-xs transition-transform ${showAdvanced ? "" : "-rotate-90"}`}
+                  />
+                  Advanced
+                </button>
+                {showAdvanced && (
+                  <div className="mt-3">
+                    <label className="mb-1 block font-medium text-sm text-gray-700">Trip Timeframe (months)</label>
+                    <div className="flex gap-2 items-center">
+                      <MonthSelect
+                        onChange={setStartMonth}
+                        value={startMonth}
+                        instanceId="startMonth"
+                        className="grow"
+                        menuPortalTarget={typeof document !== "undefined" ? document.body : null}
+                      />
+                      <span className="text-gray-500 px-2">to</span>
+                      <MonthSelect
+                        onChange={setEndMonth}
+                        value={endMonth}
+                        instanceId="endMonth"
+                        className="grow"
+                        menuPortalTarget={typeof document !== "undefined" ? document.body : null}
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
               <RegionFields value={region} onChange={setRegion} />
               <div className="flex justify-between">
diff --git a/shared/types.ts b/shared/types.ts
index 80e735e2..73293830 100644
--- a/shared/types.ts
+++ b/shared/types.ts
@@ -15,6 +15,7 @@ export type Trip = {
   markers: CustomMarker[];
   itinerary?: Day[];
   startDate?: string;
+  endDate?: string;
   startMonth: number;
   endMonth: number;
   imgUrl: string | null;
@@ -316,6 +317,8 @@ export type IntegrationToken = {
 export type TripInput = {
   name: string;
   region: string;
+  startDate?: string;
+  endDate?: string;
   startMonth: number;
   endMonth: number;
 };
@@ -323,6 +326,8 @@ export type TripInput = {
 export type TripUpdateInput = {
   name: string;
   region: string;
+  startDate?: string;
+  endDate?: string;
   startMonth: number;
   endMonth: number;
 };

From 66fd113a4df145661d6ea23491c3a2d5e27025f5 Mon Sep 17 00:00:00 2001
From: Adam Jackson <akjackson1@gmail.com>
Date: Thu, 25 Jun 2026 16:14:45 -0700
Subject: [PATCH 2/4] Redesign /trips page

---
 backend/routes/trips/index.ts        | 113 +++++++++++++++++-
 frontend/components/TripCard.tsx     |  85 ++++++++++----
 frontend/components/WidgetHeader.tsx |  19 +++
 frontend/data/news.json              |  12 ++
 frontend/hooks/useTrip.ts            |   9 +-
 frontend/lib/helpers.ts              |  30 +++++
 frontend/pages/trips.tsx             | 170 +++++++++++++++++++++------
 shared/types.ts                      |  19 +++
 8 files changed, 388 insertions(+), 69 deletions(-)
 create mode 100644 frontend/components/WidgetHeader.tsx
 create mode 100644 frontend/data/news.json

diff --git a/backend/routes/trips/index.ts b/backend/routes/trips/index.ts
index 12f048e0..6c6b8558 100644
--- a/backend/routes/trips/index.ts
+++ b/backend/routes/trips/index.ts
@@ -6,7 +6,9 @@ import { authenticate, getBounds } from "lib/utils.js";
 import { connect, Trip, Participant, IntegrationToken, User } from "lib/db.js";
 import { uploadMapboxImageToStorage, imageUrl } from "lib/storage.js";
 import { SHARE_CODE_TTL_MINUTES } from "lib/config.js";
-import type { TripInput } from "@birdplan/shared";
+import type { TripInput, ParticipantView, TripStats } from "@birdplan/shared";
+
+type ParticipantAvatar = Pick<ParticipantView, "_id" | "userId" | "name" | "photoUrl">;
 
 const shareCodeLimiter = rateLimiter({
   windowMs: 15 * 60 * 1000, // 15 minutes
@@ -91,17 +93,120 @@ trips.get("/openbirding/:codeOrToken", shareCodeLimiter, async (c) => {
   return c.json(serializeTripForImport(trip));
 });
 
+trips.get("/stats", async (c) => {
+  const session = await authenticate(c);
+
+  await connect();
+  const tripIds = await Participant.find({ userId: session.userId, status: "active" }).distinct("tripId");
+
+  const [stats] = await Trip.aggregate<TripStats>([
+    { $match: { _id: { $in: tripIds } } },
+    {
+      $project: {
+        hotspotCount: { $size: { $ifNull: ["$hotspots", []] } },
+        countries: {
+          $map: {
+            input: { $split: [{ $ifNull: ["$region", ""] }, ","] },
+            as: "code",
+            in: { $arrayElemAt: [{ $split: ["$$code", "-"] }, 0] },
+          },
+        },
+      },
+    },
+    {
+      $group: {
+        _id: null,
+        tripCount: { $sum: 1 },
+        hotspotTotal: { $sum: "$hotspotCount" },
+        countrySets: { $push: "$countries" },
+      },
+    },
+    {
+      $project: {
+        _id: 0,
+        tripCount: 1,
+        hotspotTotal: 1,
+        countryCount: {
+          $size: {
+            $reduce: {
+              input: "$countrySets",
+              initialValue: [],
+              in: { $setUnion: ["$$value", "$$this"] },
+            },
+          },
+        },
+      },
+    },
+  ]);
+
+  return c.json(stats ?? { tripCount: 0, hotspotTotal: 0, countryCount: 0 });
+});
+
 trips.route("/:tripId", trip);
 
 trips.get("/", async (c) => {
   const session = await authenticate(c);
 
   await connect();
+  const limit = Math.min(Math.max(Number(c.req.query("limit")) || 12, 1), 50);
+  const cursor = c.req.query("cursor");
+
   const tripIds = await Participant.find({ userId: session.userId, status: "active" }).distinct("tripId");
-  const trips = await Trip.find({ _id: { $in: tripIds } })
-    .sort({ createdAt: -1 })
+
+  const match: Record<string, unknown> = { _id: { $in: tripIds } };
+  if (cursor) match.createdAt = { $lt: new Date(cursor) };
+
+  const docs = await Trip.aggregate([
+    { $match: match },
+    { $sort: { createdAt: -1 } },
+    { $limit: limit + 1 },
+    {
+      $project: {
+        name: 1,
+        region: 1,
+        imgUrl: 1,
+        startDate: 1,
+        endDate: 1,
+        startMonth: 1,
+        endMonth: 1,
+        createdAt: 1,
+        hotspotCount: { $size: { $ifNull: ["$hotspots", []] } },
+      },
+    },
+  ]);
+
+  const hasMore = docs.length > limit;
+  const page = hasMore ? docs.slice(0, limit) : docs;
+  const nextCursor = hasMore ? new Date(page[page.length - 1].createdAt).toISOString() : null;
+
+  const pageTripIds = page.map((t) => t._id);
+  const roster = await Participant.find({ tripId: { $in: pageTripIds }, status: "active" })
+    .sort({ createdAt: 1 })
     .lean();
-  return c.json(trips.map((trip) => ({ ...trip, imgUrl: imageUrl(trip.imgUrl) })));
+  const userIds = roster.map((p) => p.userId).filter((u): u is string => !!u);
+  const users = userIds.length ? await User.find({ _id: { $in: userIds } }).select("photoUrl").lean() : [];
+  const photoByUser = new Map(users.map((u) => [u._id, u.photoUrl]));
+  const participantsByTrip = new Map<string, ParticipantAvatar[]>();
+  for (const p of roster) {
+    const list = participantsByTrip.get(p.tripId) ?? [];
+    list.push({ _id: p._id, userId: p.userId, name: p.name, photoUrl: p.userId ? photoByUser.get(p.userId) : undefined });
+    participantsByTrip.set(p.tripId, list);
+  }
+
+  const items = page.map((trip) => ({
+    _id: trip._id,
+    name: trip.name,
+    region: trip.region,
+    imgUrl: imageUrl(trip.imgUrl),
+    startDate: trip.startDate,
+    endDate: trip.endDate,
+    startMonth: trip.startMonth,
+    endMonth: trip.endMonth,
+    hotspotCount: trip.hotspotCount,
+    participants: participantsByTrip.get(trip._id) ?? [],
+  }));
+
+  return c.json({ trips: items, nextCursor });
 });
 
 trips.post("/", async (c) => {
diff --git a/frontend/components/TripCard.tsx b/frontend/components/TripCard.tsx
index 24f9fcbe..35dd87c5 100644
--- a/frontend/components/TripCard.tsx
+++ b/frontend/components/TripCard.tsx
@@ -1,40 +1,75 @@
 import { Link } from "react-router-dom";
-import { Trip } from "@birdplan/shared";
+import { TripListItem } from "@birdplan/shared";
 import ReactCountryFlag from "react-country-flag";
+import Avatar from "components/Avatar";
+import { formatTripDateRange, tripDurationDays, tripDaysUntilStart } from "lib/helpers";
 
 type Props = {
-  trip: Trip;
+  trip: TripListItem;
 };
 
+const MAX_AVATARS = 5;
+
 export default function TripCard({ trip }: Props) {
-  const { _id, name, hotspots } = trip;
+  const { _id, name, region, imgUrl, hotspotCount, participants = [] } = trip;
+  const durationDays = tripDurationDays(trip);
+  const daysUntilStart = tripDaysUntilStart(trip);
+  const participantCount = participants.length || 1;
+  const shownAvatars = participants.slice(0, MAX_AVATARS);
+  const extraAvatars = participants.length - shownAvatars.length;
 
   return (
-    <Link to={`/${_id}`}>
-      <div className="bg-white rounded-lg shadow-sm relative p-4">
-        {trip?.imgUrl && (
-          <img
-            src={trip?.imgUrl}
-            className="w-full h-36 object-cover rounded-lg mb-3"
-            alt=""
-            width={600}
-            height={370}
-          />
-        )}
-        <div>
-          <div className="flex justify-between items-center">
-            <h2 className="text-lg font-bold text-gray-800 mb-2">{name}</h2>
-            <ReactCountryFlag
-              countryCode={trip.region.slice(0, 2)}
-              style={{ fontSize: "1.6rem" }}
-              aria-label="country flag"
-            />
+    <div className="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white sm:flex-row">
+      <Link to={`/${_id}`} className="relative block aspect-[300/185] w-full shrink-0 bg-gray-100 sm:w-56">
+        {imgUrl && <img src={imgUrl} alt="" className="absolute inset-0 h-full w-full object-cover" />}
+        {daysUntilStart !== null && (
+          <div className="absolute top-2.5 left-2.5 rounded-full bg-white/95 px-3 py-1.5 text-xs font-bold text-gray-800 shadow-md">
+            {daysUntilStart === 0 ? "Today" : `In ${daysUntilStart} ${daysUntilStart === 1 ? "day" : "days"}`}
           </div>
-          <p className="text-sm text-gray-500">
-            {hotspots.length} {hotspots.length === 1 ? "saved hotspot" : "saved hotspots"}
+        )}
+      </Link>
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-2 p-4">
+        <Link to={`/${_id}`} className="mb-1 truncate">
+          <h2 className="truncate text-2xl font-bold text-gray-800">{name}</h2>
+        </Link>
+        <div className="flex items-center gap-2">
+          <ReactCountryFlag
+            countryCode={region.slice(0, 2)}
+            style={{ fontSize: "1.1rem" }}
+            className="shrink-0"
+            aria-label="country flag"
+          />
+          <p className="text-gray-600 text-sm">
+            {formatTripDateRange(trip)}
+            {durationDays && ` · ${durationDays} ${durationDays === 1 ? "day" : "days"}`}
+          </p>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm text-gray-600">
+            <b className="font-bold text-gray-800">{hotspotCount}</b> hotspots &nbsp;·&nbsp;
+            <b className="font-bold text-gray-800">{participantCount}</b>{" "}
+            {participantCount === 1 ? "participant" : "participants"}
           </p>
+          {participants.length > 0 && (
+            <div className="flex shrink-0 items-center -space-x-2">
+              {shownAvatars.map((p) => (
+                <Avatar
+                  key={p._id}
+                  user={{ seed: p.userId || p._id, name: p.name, photoUrl: p.photoUrl }}
+                  gravatar={false}
+                  size={28}
+                  className="ring-2 ring-white"
+                />
+              ))}
+              {extraAvatars > 0 && (
+                <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-[11px] font-bold text-primary ring-2 ring-white">
+                  +{extraAvatars}
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
-    </Link>
+    </div>
   );
 }
diff --git a/frontend/components/WidgetHeader.tsx b/frontend/components/WidgetHeader.tsx
new file mode 100644
index 00000000..101b5ac4
--- /dev/null
+++ b/frontend/components/WidgetHeader.tsx
@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+
+type Props = {
+  title: string;
+  action?: { label: string; to: string };
+};
+
+export default function WidgetHeader({ title, action }: Props) {
+  return (
+    <div className="flex items-center justify-between border-b border-gray-100 pb-3">
+      <h2 className="text-xs font-bold tracking-widest text-gray-800 uppercase">{title}</h2>
+      {action && (
+        <Link to={action.to} className="text-xs font-bold text-link">
+          {action.label}
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/data/news.json b/frontend/data/news.json
new file mode 100644
index 00000000..895ece11
--- /dev/null
+++ b/frontend/data/news.json
@@ -0,0 +1,12 @@
+[
+  {
+    "date": "2026-06-24",
+    "title": "Simpler email sign-in",
+    "description": "We've switched to a simpler email sign-in that sends a one-time code instead of using a password, streamlining authentication and reducing our reliance on external services."
+  },
+  {
+    "date": "2026-06-19",
+    "title": "Group trips overhaul",
+    "description": "Everyone on a trip now keeps their own life list, and BirdPlan tracks targets for the whole group, including the mutual targets everyone still needs."
+  }
+]
diff --git a/frontend/hooks/useTrip.ts b/frontend/hooks/useTrip.ts
index 10ff4f5c..e934e963 100644
--- a/frontend/hooks/useTrip.ts
+++ b/frontend/hooks/useTrip.ts
@@ -4,7 +4,7 @@ import { Trip, ParticipantView } from "@birdplan/shared";
 import { useLocation } from "react-router-dom";
 import { useUser } from "hooks/useUser";
 import { useSessionToken } from "lib/sessionToken";
-import { fullMonths, months, getTripIdFromPath } from "lib/helpers";
+import { formatMonthRange, getTripIdFromPath } from "lib/helpers";
 import { useQuery } from "@tanstack/react-query";
 
 type SelectedSpecies = {
@@ -82,12 +82,7 @@ export const useTrip = () => {
   const ui = useTripUiStore();
   const is404 = !!token && !!id && !trip && !isLoading;
 
-  const dateRangeLabel =
-    trip?.startMonth && trip?.endMonth
-      ? trip.startMonth === trip.endMonth
-        ? fullMonths[trip.startMonth - 1]
-        : `${months[trip.startMonth - 1]} - ${months[trip.endMonth - 1]}`
-      : "";
+  const dateRangeLabel = trip?.startMonth && trip?.endMonth ? formatMonthRange(trip.startMonth, trip.endMonth) : "";
 
   return {
     trip: trip || null,
diff --git a/frontend/lib/helpers.ts b/frontend/lib/helpers.ts
index 70ececb1..624cd0ee 100644
--- a/frontend/lib/helpers.ts
+++ b/frontend/lib/helpers.ts
@@ -25,6 +25,36 @@ export const fullMonths = [
   "December",
 ];
 
+export const formatMonthRange = (startMonth: number, endMonth: number): string =>
+  startMonth === endMonth ? fullMonths[startMonth - 1] : `${months[startMonth - 1]} – ${months[endMonth - 1]}`;
+
+export const formatTripDateRange = (
+  trip: Pick<Trip, "startDate" | "endDate" | "startMonth" | "endMonth">
+): string => {
+  if (!trip.startDate) return formatMonthRange(trip.startMonth, trip.endMonth);
+  const start = dayjs(trip.startDate);
+  const end = trip.endDate ? dayjs(trip.endDate) : start;
+  if (start.isSame(end, "day")) return start.format("MMM D, YYYY");
+  if (!start.isSame(end, "year")) return `${start.format("MMM D, YYYY")} – ${end.format("MMM D, YYYY")}`;
+  if (!start.isSame(end, "month")) return `${start.format("MMM D")} – ${end.format("MMM D, YYYY")}`;
+  return `${start.format("MMM D")} – ${end.format("D, YYYY")}`;
+};
+
+export const tripDurationDays = (trip: Pick<Trip, "startDate" | "endDate">): number | null => {
+  if (!trip.startDate) return null;
+  const start = dayjs(trip.startDate).startOf("day");
+  const end = (trip.endDate ? dayjs(trip.endDate) : start).startOf("day");
+  return end.diff(start, "day") + 1;
+};
+
+export const tripDaysUntilStart = (trip: Pick<Trip, "startDate" | "endDate">): number | null => {
+  if (!trip.startDate) return null;
+  const today = dayjs().startOf("day");
+  const end = (trip.endDate ? dayjs(trip.endDate) : dayjs(trip.startDate)).startOf("day");
+  if (end.isBefore(today)) return null;
+  return Math.max(0, dayjs(trip.startDate).startOf("day").diff(today, "day"));
+};
+
 export const englishCountries = [
   "US",
   "CA",
diff --git a/frontend/pages/trips.tsx b/frontend/pages/trips.tsx
index bcae43f9..bd63e85f 100644
--- a/frontend/pages/trips.tsx
+++ b/frontend/pages/trips.tsx
@@ -1,51 +1,155 @@
-import React from "react";
-import Header from "components/Header";
-import Button from "components/Button";
-import TripCard from "components/TripCard";
 import { Link } from "react-router-dom";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import { TripListPage, TripStats } from "@birdplan/shared";
+import Header from "components/Header";
 import Footer from "components/Footer";
+import Button from "components/Button";
 import Notice from "components/Notice";
-import { useQuery } from "@tanstack/react-query";
-import { Trip } from "@birdplan/shared";
-import { useUser } from "hooks/useUser";
 import Error from "components/Error";
+import Card from "components/Card";
+import TripCard from "components/TripCard";
+import WidgetHeader from "components/WidgetHeader";
+import { useUser } from "hooks/useUser";
+import { get } from "lib/http";
+import news from "data/news.json";
+
+const greeting = () => {
+  const hour = dayjs().hour();
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
+};
+
+const recentNews = news.filter((item) => dayjs().diff(dayjs(item.date), "day") < 60);
 
 export default function Trips() {
-  const { user } = useUser();
+  const { user, lifelist } = useUser();
 
-  const { data, isLoading, error, refetch } = useQuery<Trip[]>({
-    queryKey: ["/trips"],
+  const { data, isLoading, error, refetch, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useInfiniteQuery<TripListPage>({
+      queryKey: ["/trips", "list"],
+      enabled: !!user?._id,
+      initialPageParam: null as string | null,
+      queryFn: ({ pageParam }) =>
+        get(`${import.meta.env.VITE_API_URL}/trips`, pageParam ? { cursor: pageParam as string } : {}),
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
+  const { data: stats } = useQuery<TripStats>({
+    queryKey: ["/trips", "stats"],
     enabled: !!user?._id,
+    queryFn: () => get(`${import.meta.env.VITE_API_URL}/trips/stats`, {}),
   });
 
+  const trips = data?.pages.flatMap((page) => page.trips) ?? [];
+  const firstName = user?.name?.trim().split(/\s+/)[0];
+
+  const statRows = [
+    { label: "Trips", value: stats?.tripCount ?? 0 },
+    { label: "Hotspots saved", value: stats?.hotspotTotal ?? 0 },
+    { label: "Countries", value: stats?.countryCount ?? 0 },
+  ];
+
   return (
-    <div className="flex flex-col h-full">
-        <title>My Trips | BirdPlan.app</title>
+    <div className="flex h-full flex-col">
+      <title>My Trips | BirdPlan.app</title>
 
       <Header border />
-      <main className="max-w-2xl w-full mx-auto pb-12">
-        <div className="p-4 md:p-0">
-          <div className="flex gap-8 items-center mb-8 mt-4 md:mt-8">
-            <h1 className="text-3xl font-bold text-gray-700">My Trips</h1>
-            <Button color="pillPrimary" size="md" href="/create" className="pr-6">
-              <span className="text-xl font-bold leading-4">+</span>&nbsp;&nbsp;Create Trip
-            </Button>
-          </div>
-          <Notice />
-          <div className="grid md:grid-cols-2 gap-4 mb-4">
-            {data?.map((trip) => <TripCard key={trip._id} trip={trip} />)}
-          </div>
-          {isLoading && <p className="text-gray-500 text-lg">Loading...</p>}
-          {!isLoading && data?.length === 0 && (
-            <p className="text-gray-500 text-lg">
-              You don&apos;t have any trips yet.{" "}
-              <Link className="text-link font-bold" to="/create">
-                Create one!
-              </Link>
+      <main className="mx-auto w-full max-w-7xl flex-1 px-4 pb-12 md:px-7">
+        <div className="mt-6 mb-12 flex items-end justify-between gap-4">
+          <div>
+            <p className="mb-2 text-sm font-medium text-gray-500">
+              {greeting()}
+              {firstName && `, ${firstName}`}
             </p>
-          )}
-          {error && <Error onReload={refetch} message="Error loading trips" />}
+            <h1 className="text-3xl font-bold text-gray-800">Your birding trips</h1>
+          </div>
+          <Button color="pillPrimary" size="md" href="/create" className="shrink-0 pr-6">
+            <span className="text-xl font-bold leading-4">+</span>&nbsp;&nbsp;Create Trip
+          </Button>
         </div>
+
+        <Notice />
+
+        {error && <Error onReload={refetch} message="Error loading trips" />}
+        {isLoading && <p className="text-lg text-gray-500">Loading...</p>}
+
+        {!isLoading && !error && trips.length === 0 && (
+          <p className="text-lg text-gray-500">
+            You don&apos;t have any trips yet.{" "}
+            <Link className="font-bold text-link" to="/create">
+              Create one!
+            </Link>
+          </p>
+        )}
+
+        {trips.length > 0 && (
+          <div className="flex flex-col items-start gap-5 lg:flex-row">
+            <div className="flex w-full min-w-0 flex-1 flex-col gap-4">
+              {trips.map((trip) => (
+                <TripCard key={trip._id} trip={trip} />
+              ))}
+
+              {hasNextPage && (
+                <Button
+                  color="grayOutline"
+                  size="md"
+                  className="mt-2 self-center rounded-full"
+                  disabled={isFetchingNextPage}
+                  onClick={() => fetchNextPage()}
+                >
+                  {isFetchingNextPage ? "Loading..." : "Load more"}
+                </Button>
+              )}
+            </div>
+
+            <aside className="flex w-full shrink-0 flex-col gap-4 lg:w-[340px]">
+              <Card className="px-5 py-4">
+                <WidgetHeader title="By the numbers" />
+                {statRows.map(({ label, value }) => (
+                  <div
+                    key={label}
+                    className="flex items-baseline justify-between border-b border-gray-50 py-3 last:border-0"
+                  >
+                    <span className="text-sm text-gray-500">{label}</span>
+                    <span className="text-xl font-bold text-gray-800">{value.toLocaleString()}</span>
+                  </div>
+                ))}
+              </Card>
+
+              <Card className="px-5 py-4">
+                <WidgetHeader title="World life list" action={{ label: "Manage", to: "/import-lifelist" }} />
+                <div className="mt-4 flex items-baseline gap-2">
+                  <span className="text-5xl font-bold text-primary tabular-nums">
+                    {lifelist.length.toLocaleString()}
+                  </span>
+                  <span className="text-sm font-semibold text-gray-500">species</span>
+                </div>
+                {user?.lifelistUpdatedAt && (
+                  <p className="mt-2 text-xs text-gray-500">Updated {dayjs(user.lifelistUpdatedAt).fromNow()}</p>
+                )}
+              </Card>
+
+              {recentNews.length > 0 && (
+                <Card className="px-5 py-4">
+                  <WidgetHeader title="What's new" action={{ label: "All updates", to: "/whats-new" }} />
+                  <div className="flex flex-col divide-y divide-gray-100">
+                    {recentNews.map(({ date, title, description }) => (
+                      <div key={title} className="py-4 last:pb-1">
+                        <p className="text-[11px] font-bold tracking-wide text-success uppercase">
+                          {dayjs(date).format("MMM D, YYYY")}
+                        </p>
+                        <h3 className="mt-1.5 text-sm font-bold text-gray-800">{title}</h3>
+                        <p className="mt-1 text-sm leading-relaxed text-gray-500">{description}</p>
+                      </div>
+                    ))}
+                  </div>
+                </Card>
+              )}
+            </aside>
+          </div>
+        )}
       </main>
       <Footer />
     </div>
diff --git a/shared/types.ts b/shared/types.ts
index 73293830..c278c872 100644
--- a/shared/types.ts
+++ b/shared/types.ts
@@ -36,6 +36,25 @@ export type Trip = {
   createdAt: string;
 };
 
+export type TripListItem = Pick<
+  Trip,
+  "_id" | "name" | "region" | "imgUrl" | "startDate" | "endDate" | "startMonth" | "endMonth"
+> & {
+  hotspotCount: number;
+  participants: Pick<ParticipantView, "_id" | "userId" | "name" | "photoUrl">[];
+};
+
+export type TripListPage = {
+  trips: TripListItem[];
+  nextCursor: string | null;
+};
+
+export type TripStats = {
+  tripCount: number;
+  hotspotTotal: number;
+  countryCount: number;
+};
+
 export type CustomMarker = {
   name: string;
   lat: number;

From 415ddd952dfe42c43d70b16c0e66ece881cac691 Mon Sep 17 00:00:00 2001
From: Adam Jackson <akjackson1@gmail.com>
Date: Thu, 25 Jun 2026 16:29:38 -0700
Subject: [PATCH 3/4] Update TripCard.tsx

---
 frontend/components/TripCard.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/components/TripCard.tsx b/frontend/components/TripCard.tsx
index 35dd87c5..4e613763 100644
--- a/frontend/components/TripCard.tsx
+++ b/frontend/components/TripCard.tsx
@@ -21,7 +21,13 @@ export default function TripCard({ trip }: Props) {
   return (
     <div className="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white sm:flex-row">
       <Link to={`/${_id}`} className="relative block aspect-[300/185] w-full shrink-0 bg-gray-100 sm:w-56">
-        {imgUrl && <img src={imgUrl} alt="" className="absolute inset-0 h-full w-full object-cover" />}
+        {imgUrl && (
+          <img
+            src={imgUrl}
+            alt=""
+            className="absolute inset-0 h-full w-full object-cover [filter:saturate(0.92)_brightness(0.93)]"
+          />
+        )}
         {daysUntilStart !== null && (
           <div className="absolute top-2.5 left-2.5 rounded-full bg-white/95 px-3 py-1.5 text-xs font-bold text-gray-800 shadow-md">
             {daysUntilStart === 0 ? "Today" : `In ${daysUntilStart} ${daysUntilStart === 1 ? "day" : "days"}`}

From f82bd90d9dfa027403abe6dab090af4801cff6d3 Mon Sep 17 00:00:00 2001
From: Adam Jackson <akjackson1@gmail.com>
Date: Thu, 25 Jun 2026 17:27:24 -0700
Subject: [PATCH 4/4] Code review fixes

---
 backend/lib/utils.ts                   |  8 ++++
 backend/routes/trips/[tripId]/index.ts |  2 +
 backend/routes/trips/index.ts          | 62 +++++++++++++++++++++-----
 frontend/main.tsx                      |  2 +-
 frontend/pages/[tripId]/settings.tsx   | 20 ++++++---
 frontend/pages/create.tsx              | 25 ++++++-----
 frontend/pages/trips.tsx               | 16 ++++---
 7 files changed, 97 insertions(+), 38 deletions(-)

diff --git a/backend/lib/utils.ts b/backend/lib/utils.ts
index c56a351c..1e5b1f7f 100644
--- a/backend/lib/utils.ts
+++ b/backend/lib/utils.ts
@@ -16,6 +16,14 @@ export const newInviteToken = () => ({
 
 export const isDuplicateKeyError = (err: unknown): boolean => (err as { code?: number })?.code === 11000;
 
+export const validateTripDates = (data: { startDate?: string; endDate?: string }): void => {
+  if (!data.startDate) throw new HTTPException(400, { message: "A start date is required" });
+  if (!data.endDate) throw new HTTPException(400, { message: "An end date is required" });
+  if (data.endDate < data.startDate) {
+    throw new HTTPException(400, { message: "End date must be on or after the start date" });
+  }
+};
+
 function getBearerToken(c: Context): string {
   const authHeader = c.req.header("authorization");
   if (!authHeader?.startsWith("Bearer ")) return "";
diff --git a/backend/routes/trips/[tripId]/index.ts b/backend/routes/trips/[tripId]/index.ts
index 09c44a3a..c7bdd7ed 100644
--- a/backend/routes/trips/[tripId]/index.ts
+++ b/backend/routes/trips/[tripId]/index.ts
@@ -10,6 +10,7 @@ import {
   generateOpenBirdingCode,
   getBounds,
   isDuplicateKeyError,
+  validateTripDates,
 } from "lib/utils.js";
 import { connect, Trip, Participant, User, IntegrationToken } from "lib/db.js";
 import {
@@ -93,6 +94,7 @@ trip.patch("/", async (c) => {
   }
 
   const data = await c.req.json<TripUpdateInput>();
+  validateTripDates(data);
 
   const newData: Record<string, any> = {
     name: data.name,
diff --git a/backend/routes/trips/index.ts b/backend/routes/trips/index.ts
index 6c6b8558..9490c562 100644
--- a/backend/routes/trips/index.ts
+++ b/backend/routes/trips/index.ts
@@ -2,14 +2,40 @@ import { Hono } from "hono";
 import { HTTPException } from "hono/http-exception";
 import { rateLimiter } from "hono-rate-limiter";
 import trip from "./[tripId]/index.js";
-import { authenticate, getBounds } from "lib/utils.js";
+import { authenticate, getBounds, validateTripDates } from "lib/utils.js";
 import { connect, Trip, Participant, IntegrationToken, User } from "lib/db.js";
 import { uploadMapboxImageToStorage, imageUrl } from "lib/storage.js";
 import { SHARE_CODE_TTL_MINUTES } from "lib/config.js";
-import type { TripInput, ParticipantView, TripStats } from "@birdplan/shared";
+import type { TripInput, ParticipantView, TripStats, TripListItem, TripListPage } from "@birdplan/shared";
 
 type ParticipantAvatar = Pick<ParticipantView, "_id" | "userId" | "name" | "photoUrl">;
 
+type TripListRow = {
+  _id: string;
+  name: string;
+  region: string;
+  imgUrl: string | null;
+  startDate?: string;
+  endDate?: string;
+  startMonth: number;
+  endMonth: number;
+  createdAt: Date;
+  hotspotCount: number;
+};
+
+const encodeCursor = (createdAt: Date, id: string): string =>
+  Buffer.from(JSON.stringify({ c: new Date(createdAt).toISOString(), i: id })).toString("base64url");
+
+const decodeCursor = (cursor: string): { c: string; i: string } | null => {
+  try {
+    const parsed = JSON.parse(Buffer.from(cursor, "base64url").toString());
+    if (typeof parsed?.c === "string" && typeof parsed?.i === "string") return parsed;
+    return null;
+  } catch {
+    return null;
+  }
+};
+
 const shareCodeLimiter = rateLimiter({
   windowMs: 15 * 60 * 1000, // 15 minutes
   limit: 10,
@@ -105,10 +131,16 @@ trips.get("/stats", async (c) => {
       $project: {
         hotspotCount: { $size: { $ifNull: ["$hotspots", []] } },
         countries: {
-          $map: {
-            input: { $split: [{ $ifNull: ["$region", ""] }, ","] },
+          $filter: {
+            input: {
+              $map: {
+                input: { $split: [{ $ifNull: ["$region", ""] }, ","] },
+                as: "code",
+                in: { $arrayElemAt: [{ $split: ["$$code", "-"] }, 0] },
+              },
+            },
             as: "code",
-            in: { $arrayElemAt: [{ $split: ["$$code", "-"] }, 0] },
+            cond: { $ne: ["$$code", ""] },
           },
         },
       },
@@ -149,16 +181,20 @@ trips.get("/", async (c) => {
 
   await connect();
   const limit = Math.min(Math.max(Number(c.req.query("limit")) || 12, 1), 50);
-  const cursor = c.req.query("cursor");
+  const cursorParam = c.req.query("cursor");
+  const cursor = cursorParam ? decodeCursor(cursorParam) : null;
 
   const tripIds = await Participant.find({ userId: session.userId, status: "active" }).distinct("tripId");
 
   const match: Record<string, unknown> = { _id: { $in: tripIds } };
-  if (cursor) match.createdAt = { $lt: new Date(cursor) };
+  if (cursor) {
+    const cursorDate = new Date(cursor.c);
+    match.$or = [{ createdAt: { $lt: cursorDate } }, { createdAt: cursorDate, _id: { $lt: cursor.i } }];
+  }
 
-  const docs = await Trip.aggregate([
+  const docs = await Trip.aggregate<TripListRow>([
     { $match: match },
-    { $sort: { createdAt: -1 } },
+    { $sort: { createdAt: -1, _id: -1 } },
     { $limit: limit + 1 },
     {
       $project: {
@@ -177,7 +213,8 @@ trips.get("/", async (c) => {
 
   const hasMore = docs.length > limit;
   const page = hasMore ? docs.slice(0, limit) : docs;
-  const nextCursor = hasMore ? new Date(page[page.length - 1].createdAt).toISOString() : null;
+  const last = page[page.length - 1];
+  const nextCursor = hasMore && last ? encodeCursor(last.createdAt, last._id) : null;
 
   const pageTripIds = page.map((t) => t._id);
   const roster = await Participant.find({ tripId: { $in: pageTripIds }, status: "active" })
@@ -193,7 +230,7 @@ trips.get("/", async (c) => {
     participantsByTrip.set(p.tripId, list);
   }
 
-  const items = page.map((trip) => ({
+  const items: TripListItem[] = page.map((trip) => ({
     _id: trip._id,
     name: trip.name,
     region: trip.region,
@@ -206,13 +243,14 @@ trips.get("/", async (c) => {
     participants: participantsByTrip.get(trip._id) ?? [],
   }));
 
-  return c.json({ trips: items, nextCursor });
+  return c.json({ trips: items, nextCursor } satisfies TripListPage);
 });
 
 trips.post("/", async (c) => {
   const session = await authenticate(c);
 
   const data = await c.req.json<TripInput>();
+  validateTripDates(data);
 
   const bounds = await getBounds(data.region);
   if (!bounds) {
diff --git a/frontend/main.tsx b/frontend/main.tsx
index 3bb32952..1c18d201 100644
--- a/frontend/main.tsx
+++ b/frontend/main.tsx
@@ -11,7 +11,7 @@ import { teardownSession, IDB_CACHE_KEY } from "lib/logout";
 import ErrorBoundary from "components/ErrorBoundary";
 import { router } from "router";
 
-const QUERY_CACHE_BUSTER = "birdplan-cache-v2";
+const QUERY_CACHE_BUSTER = "birdplan-cache-v3";
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/frontend/pages/[tripId]/settings.tsx b/frontend/pages/[tripId]/settings.tsx
index 4463f334..a55a8be8 100644
--- a/frontend/pages/[tripId]/settings.tsx
+++ b/frontend/pages/[tripId]/settings.tsx
@@ -77,6 +77,7 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
     method: "DELETE",
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["/trips"] });
+      queryClient.invalidateQueries({ queryKey: ["/trips/stats"] });
       navigate("/trips");
     },
   });
@@ -87,6 +88,7 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
     onSuccess: async () => {
       toast.success("Trip updated");
       queryClient.invalidateQueries({ queryKey: ["/trips"] });
+      queryClient.invalidateQueries({ queryKey: ["/trips/stats"] });
       await queryClient.invalidateQueries({ queryKey: [`/trips/${trip._id}`] });
       navigate(`/${trip._id}`);
     },
@@ -99,11 +101,14 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
     if (!name) return toast.error("Please enter a name");
     const regionError = validateRegionFields(region);
     if (regionError) return toast.error(regionError);
+    if (!startDate) return toast.error("Please choose a start date");
+    if (!endDate) return toast.error("Please choose an end date");
+    if (endDate < startDate) return toast.error("End date must be on or after the start date");
     updateTripMutation.mutate({
       name,
       region: getRegionCode(region)!,
-      startDate: startDate || undefined,
-      endDate: endDate || undefined,
+      startDate,
+      endDate,
       startMonth: Number(startMonth.value),
       endMonth: Number(endMonth.value),
     });
@@ -116,7 +121,7 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
 
   return (
     <div className="flex flex-col h-full">
-        <title>Trip Settings | BirdPlan.app</title>
+      <title>Trip Settings | BirdPlan.app</title>
 
       <Header />
       <main className="max-w-2xl w-full mx-auto pb-12">
@@ -147,6 +152,7 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
                     name="startDate"
                     value={startDate}
                     onChange={handleStartDateChange}
+                    required
                     className="grow"
                   />
                   <span className="text-gray-500 px-2">to</span>
@@ -155,12 +161,11 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
                     name="endDate"
                     value={endDate}
                     onChange={handleEndDateChange}
+                    min={startDate || undefined}
+                    required
                     className="grow"
                   />
                 </div>
-                <p className="mt-1 text-sm text-gray-500">
-                  Approximate dates are fine — you can refine them later.
-                </p>
               </div>
               <div>
                 <label className="mb-1 block font-medium text-sm text-gray-700">Trip Timeframe (months)</label>
@@ -181,6 +186,9 @@ function SettingsForm({ trip, initialRegion, isOwner }: SettingsFormProps) {
                     menuPortalTarget={typeof document !== "undefined" ? document.body : null}
                   />
                 </div>
+                <p className="mt-1 text-xs text-gray-600">
+                  Used to determine your target species — a wider range may yield more accurate results.
+                </p>
               </div>
               <RegionFields value={region} onChange={setRegion} />
               <div className="flex justify-between">
diff --git a/frontend/pages/create.tsx b/frontend/pages/create.tsx
index ff0e4b06..c4ad64a6 100644
--- a/frontend/pages/create.tsx
+++ b/frontend/pages/create.tsx
@@ -16,12 +16,7 @@ import { months } from "lib/helpers";
 import useMutation from "hooks/useMutation";
 import RegionFields from "components/RegionFields";
 import { Link } from "react-router-dom";
-import {
-  RegionFieldsValue,
-  emptyRegionFieldsValue,
-  getRegionCode,
-  validateRegionFields,
-} from "lib/region";
+import { RegionFieldsValue, emptyRegionFieldsValue, getRegionCode, validateRegionFields } from "lib/region";
 
 const monthOption = (month: number): Option => ({
   value: month.toString(),
@@ -68,12 +63,15 @@ export default function CreateTrip() {
     if (!name) return toast.error("Please enter a name");
     const regionError = validateRegionFields(region);
     if (regionError) return toast.error(regionError);
+    if (!startDate) return toast.error("Please choose a start date");
+    if (!endDate) return toast.error("Please choose an end date");
+    if (endDate < startDate) return toast.error("End date must be on or after the start date");
 
     mutation.mutate({
       name,
       region: getRegionCode(region)!,
-      startDate: startDate || undefined,
-      endDate: endDate || undefined,
+      startDate,
+      endDate,
       startMonth: Number(startMonth.value),
       endMonth: Number(endMonth.value),
     });
@@ -81,7 +79,7 @@ export default function CreateTrip() {
 
   return (
     <div className="flex flex-col h-full">
-        <title>Create Trip | BirdPlan.app</title>
+      <title>Create Trip | BirdPlan.app</title>
 
       <Header />
       <main className="max-w-lg w-full mx-auto pb-12">
@@ -105,6 +103,7 @@ export default function CreateTrip() {
                     name="startDate"
                     value={startDate}
                     onChange={handleStartDateChange}
+                    required
                     className="grow"
                   />
                   <span className="text-gray-500 px-2">to</span>
@@ -113,12 +112,11 @@ export default function CreateTrip() {
                     name="endDate"
                     value={endDate}
                     onChange={handleEndDateChange}
+                    min={startDate || undefined}
+                    required
                     className="grow"
                   />
                 </div>
-                <p className="mt-1 text-sm text-gray-500">
-                  Approximate dates are fine — you can refine them later.
-                </p>
               </div>
               <div>
                 <button
@@ -152,6 +150,9 @@ export default function CreateTrip() {
                         menuPortalTarget={typeof document !== "undefined" ? document.body : null}
                       />
                     </div>
+                    <p className="mt-1 text-xs text-gray-600">
+                      Used to determine your target species — a wider range may yield more accurate results.
+                    </p>
                   </div>
                 )}
               </div>
diff --git a/frontend/pages/trips.tsx b/frontend/pages/trips.tsx
index bd63e85f..d0aba3ad 100644
--- a/frontend/pages/trips.tsx
+++ b/frontend/pages/trips.tsx
@@ -28,7 +28,7 @@ export default function Trips() {
 
   const { data, isLoading, error, refetch, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery<TripListPage>({
-      queryKey: ["/trips", "list"],
+      queryKey: ["/trips"],
       enabled: !!user?._id,
       initialPageParam: null as string | null,
       queryFn: ({ pageParam }) =>
@@ -37,9 +37,8 @@ export default function Trips() {
     });
 
   const { data: stats } = useQuery<TripStats>({
-    queryKey: ["/trips", "stats"],
+    queryKey: ["/trips/stats"],
     enabled: !!user?._id,
-    queryFn: () => get(`${import.meta.env.VITE_API_URL}/trips/stats`, {}),
   });
 
   const trips = data?.pages.flatMap((page) => page.trips) ?? [];
@@ -63,7 +62,10 @@ export default function Trips() {
               {greeting()}
               {firstName && `, ${firstName}`}
             </p>
-            <h1 className="text-3xl font-bold text-gray-800">Your birding trips</h1>
+            <h1 className="text-3xl font-bold text-gray-800">
+              <span className="sm:hidden">Trips</span>
+              <span className="hidden sm:inline">Your birding trips</span>
+            </h1>
           </div>
           <Button color="pillPrimary" size="md" href="/create" className="shrink-0 pr-6">
             <span className="text-xl font-bold leading-4">+</span>&nbsp;&nbsp;Create Trip
@@ -85,8 +87,8 @@ export default function Trips() {
         )}
 
         {trips.length > 0 && (
-          <div className="flex flex-col items-start gap-5 lg:flex-row">
-            <div className="flex w-full min-w-0 flex-1 flex-col gap-4">
+          <div className="flex flex-col items-start gap-8 lg:flex-row">
+            <div className="flex w-full min-w-0 flex-1 flex-col gap-8">
               {trips.map((trip) => (
                 <TripCard key={trip._id} trip={trip} />
               ))}
@@ -104,7 +106,7 @@ export default function Trips() {
               )}
             </div>
 
-            <aside className="flex w-full shrink-0 flex-col gap-4 lg:w-[340px]">
+            <aside className="flex w-full shrink-0 flex-col gap-8 lg:w-[340px]">
               <Card className="px-5 py-4">
                 <WidgetHeader title="By the numbers" />
                 {statRows.map(({ label, value }) => (