diff --git a/apps/database/src/db.ts b/apps/database/src/db.ts
index 7f7ab06..820c35a 100644
--- a/apps/database/src/db.ts
+++ b/apps/database/src/db.ts
@@ -7,8 +7,30 @@ if (!process.env.DATABASE_URL) {
   throw new Error("DATABASE_URL environment variable is not set");
 }
 
+/*
+ * Cached on globalThis so hot reloads reuse one pool.
+ *
+ * Next dev re-evaluates this module on every HMR pass. Without the cache each
+ * reload opened a brand-new pool and leaked the previous one, so a long editing
+ * session walked straight into Postgres's 100-connection ceiling and every
+ * query — including the auth session lookup — started failing with
+ * `53300: too many clients already`.
+ */
+const globalForDb = globalThis as unknown as { __forumDbClient?: ReturnType<typeof postgres> };
+
 // Disable prefetch as it is not supported for "Transaction" pool mode
-const client = postgres(process.env.DATABASE_URL, { prepare: false });
+const client =
+  globalForDb.__forumDbClient ??
+  postgres(process.env.DATABASE_URL, {
+    prepare: false,
+    // Bounded so one process can't monopolise the server's connection slots.
+    max: 10,
+    idle_timeout: 20,
+  });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForDb.__forumDbClient = client;
+}
 
 export const db = drizzle(client, { schema });
 
diff --git a/apps/web/src/actions/events.ts b/apps/web/src/actions/events.ts
index 241c098..bdb3e1a 100644
--- a/apps/web/src/actions/events.ts
+++ b/apps/web/src/actions/events.ts
@@ -36,15 +36,128 @@ export interface FeedEvent {
   orgId: string | null;
   orgName: string | null;
   datetime: string;
+  /** ISO timestamp, for building calendar links client-side. */
+  rawDatetime?: string;
   location: string;
   tags: string[];
   flyerUrl: string | null;
   rsvpCount: number;
   friendsAttending: { id: string; displayName: string; avatarUrl: string | null }[];
+  /**
+   * Everyone who has RSVP'd — powers the "N attending" list on each card.
+   *
+   * Optional because only the Explore feed loads it; the saved/created/friends
+   * queries build the same shape without paying for the extra join.
+   */
+  attendees?: { id: string; displayName: string; avatarUrl: string | null }[];
   isRsvped: boolean;
   isSaved: boolean;
 }
 
+/** Accepted friendships are stored one-directional, so both columns are read. */
+async function loadFriendIds(userId: string): Promise<string[]> {
+  const [outgoing, incoming] = await Promise.all([
+    db
+      .select({ friendId: friendships.friendId })
+      .from(friendships)
+      .where(and(eq(friendships.userId, userId), eq(friendships.status, "accepted"))),
+    db
+      .select({ friendId: friendships.userId })
+      .from(friendships)
+      .where(and(eq(friendships.friendId, userId), eq(friendships.status, "accepted"))),
+  ]);
+  return [...outgoing, ...incoming].map((r) => r.friendId);
+}
+
+interface EventEnrichment {
+  tags: Map<string, string[]>;
+  attendees: Map<string, NonNullable<FeedEvent["attendees"]>>;
+  friends: Map<string, FeedEvent["friendsAttending"]>;
+  rsvpedByMe: Set<string>;
+  savedByMe: Set<string>;
+}
+
+/**
+ * Tags, attendees, friend attendance and the viewer's own RSVP/save state for
+ * a page of events.
+ *
+ * Four call sites were each hard-coding `tags: []`, `rsvpCount: 0`,
+ * `friendsAttending: []` and `isRsvped/isSaved: false`, so those screens could
+ * never show a tag or the right button state no matter how they were styled.
+ *
+ * Everything is fetched as one query per field and grouped in memory. The
+ * per-event version issued several queries per row, all concurrent, each
+ * holding a connection — which is how the pool got exhausted.
+ */
+async function loadEventEnrichment(
+  eventIds: string[],
+  userId: string,
+  friendIds: string[],
+): Promise<EventEnrichment> {
+  const empty: EventEnrichment = {
+    tags: new Map(),
+    attendees: new Map(),
+    friends: new Map(),
+    rsvpedByMe: new Set(),
+    savedByMe: new Set(),
+  };
+  if (eventIds.length === 0) return empty;
+
+  const [tagRows, attendeeRows, myRsvps, mySaves] = await Promise.all([
+    db
+      .select({ eventId: eventTags.eventId, tag: eventTags.tag })
+      .from(eventTags)
+      .where(inArray(eventTags.eventId, eventIds)),
+    db
+      .select({
+        eventId: rsvps.eventId,
+        id: users.id,
+        displayName: users.displayName,
+        avatarUrl: users.avatarUrl,
+      })
+      .from(rsvps)
+      .innerJoin(users, eq(rsvps.userId, users.id))
+      .where(inArray(rsvps.eventId, eventIds)),
+    db
+      .select({ eventId: rsvps.eventId })
+      .from(rsvps)
+      .where(and(inArray(rsvps.eventId, eventIds), eq(rsvps.userId, userId))),
+    db
+      .select({ eventId: savedEvents.eventId })
+      .from(savedEvents)
+      .where(and(inArray(savedEvents.eventId, eventIds), eq(savedEvents.userId, userId))),
+  ]);
+
+  const friendIdSet = new Set(friendIds);
+  const result: EventEnrichment = {
+    tags: new Map(),
+    attendees: new Map(),
+    friends: new Map(),
+    rsvpedByMe: new Set(myRsvps.map((r) => r.eventId)),
+    savedByMe: new Set(mySaves.map((r) => r.eventId)),
+  };
+
+  for (const row of tagRows) {
+    const list = result.tags.get(row.eventId);
+    if (list) list.push(row.tag);
+    else result.tags.set(row.eventId, [row.tag]);
+  }
+
+  for (const { eventId, ...person } of attendeeRows) {
+    const all = result.attendees.get(eventId);
+    if (all) all.push(person);
+    else result.attendees.set(eventId, [person]);
+
+    if (friendIdSet.has(person.id)) {
+      const mine = result.friends.get(eventId);
+      if (mine) mine.push(person);
+      else result.friends.set(eventId, [person]);
+    }
+  }
+
+  return result;
+}
+
 export async function getFeedEvents(params?: {
   search?: string;
   tags?: string[];
@@ -288,6 +401,35 @@ export async function getFeedEvents(params?: {
     }),
   );
 
+  /*
+   * Attendees for the "N attending" control on each card.
+   *
+   * One query for the whole page rather than one per event — the enrichment
+   * above already issues several queries per event, and adding another to that
+   * loop is what pushes the connection pool over on a full feed.
+   */
+  const feedIds = enriched.map((e) => e.id);
+  const attendeeRows =
+    feedIds.length === 0
+      ? []
+      : await db
+          .select({
+            eventId: rsvps.eventId,
+            id: users.id,
+            displayName: users.displayName,
+            avatarUrl: users.avatarUrl,
+          })
+          .from(rsvps)
+          .innerJoin(users, eq(rsvps.userId, users.id))
+          .where(inArray(rsvps.eventId, feedIds));
+
+  const attendeesByEvent = new Map<string, FeedEvent["attendees"]>();
+  for (const { eventId, ...person } of attendeeRows) {
+    const list = attendeesByEvent.get(eventId);
+    if (list) list.push(person);
+    else attendeesByEvent.set(eventId, [person]);
+  }
+
   // Sort by score descending; ties break by soonest event first, so
   // refreshing Explore with no new data never reorders the feed.
   enriched.sort((a, b) => {
@@ -296,12 +438,30 @@ export async function getFeedEvents(params?: {
   });
 
   return {
-    events: enriched.map(({ score: _score, _rawDatetime, ...event }) => event),
+    events: enriched.map(({ score: _score, _rawDatetime, ...event }) => ({
+      ...event,
+      // Carried through so the feed card can build its "+ Calendar" link; the
+      // sort key was being dropped here and the button never rendered.
+      rawDatetime: _rawDatetime.toISOString(),
+      attendees: attendeesByEvent.get(event.id) ?? [],
+    })),
     total,
   };
 }
 
-export async function toggleRsvp(eventId: string): Promise<{ rsvped: boolean; count: number }> {
+/** The attendee shape shared by the feed, the detail page and `toggleRsvp`. */
+type Attendee = { id: string; displayName: string; avatarUrl: string | null };
+
+export async function toggleRsvp(eventId: string): Promise<{
+  rsvped: boolean;
+  count: number;
+  /*
+   * The full attendee list after the toggle. Callers render an avatar stack
+   * from this alongside the count, so returning only the count left the
+   * viewer's own face in the stack after they un-RSVP'd.
+   */
+  attendees: Attendee[];
+}> {
   const session = await auth();
   if (!session?.user?.id) throw new Error("Unauthorized");
 
@@ -311,7 +471,7 @@ export async function toggleRsvp(eventId: string): Promise<{ rsvped: boolean; co
   const [eventRow] = await db.select().from(events).where(eq(events.id, eventId)).limit(1);
   if (!eventRow) {
     // Return zero count and no-op rsvp change to avoid FK constraint errors
-    return { rsvped: false, count: 0 };
+    return { rsvped: false, count: 0, attendees: [] };
   }
 
   const [existing] = await db
@@ -326,16 +486,24 @@ export async function toggleRsvp(eventId: string): Promise<{ rsvped: boolean; co
     await db.insert(rsvps).values({ userId, eventId });
   }
 
-  const [countResult] = await db
-    .select({ count: sql<number>`count(*)::int` })
+  // Re-read the roster rather than counting: the count and the avatar stack are
+  // rendered from the same data, so they cannot drift out of step this way.
+  const attendees = await db
+    .select({
+      id: users.id,
+      displayName: users.displayName,
+      avatarUrl: users.avatarUrl,
+    })
     .from(rsvps)
+    .innerJoin(users, eq(rsvps.userId, users.id))
     .where(eq(rsvps.eventId, eventId));
 
   revalidatePath("/explore");
 
   return {
     rsvped: !existing,
-    count: countResult?.count ?? 0,
+    count: attendees.length,
+    attendees,
   };
 }
 
@@ -508,6 +676,8 @@ export async function getSimilarEvents(
   const session = await auth();
   if (!session?.user?.id) throw new Error("Unauthorized");
 
+  const userId = session.user.id;
+
   const conditions = [gt(events.datetime, new Date())];
 
   // Events with matching tags or same org, excluding current event
@@ -548,21 +718,33 @@ export async function getSimilarEvents(
     .orderBy(events.datetime)
     .limit(4);
 
-  return rawEvents.map((event) => ({
-    id: event.id,
-    title: event.title,
-    description: event.description,
-    orgId: event.orgId,
-    orgName: event.orgName,
-    datetime: formatEventDateTime(event.datetime),
-    location: event.locationName ?? "TBD",
-    tags: [],
-    flyerUrl: event.flyerUrl,
-    rsvpCount: 0,
-    friendsAttending: [],
-    isRsvped: false,
-    isSaved: false,
-  }));
+  const friendIds = await loadFriendIds(userId);
+  const extra = await loadEventEnrichment(
+    rawEvents.map((e) => e.id),
+    userId,
+    friendIds,
+  );
+
+  return rawEvents.map((event) => {
+    const attendees = extra.attendees.get(event.id) ?? [];
+    return {
+      id: event.id,
+      title: event.title,
+      description: event.description,
+      orgId: event.orgId,
+      orgName: event.orgName,
+      datetime: formatEventDateTime(event.datetime),
+      rawDatetime: event.datetime.toISOString(),
+      location: event.locationName ?? "TBD",
+      tags: extra.tags.get(event.id) ?? [],
+      flyerUrl: event.flyerUrl,
+      rsvpCount: attendees.length,
+      attendees,
+      friendsAttending: extra.friends.get(event.id) ?? [],
+      isRsvped: extra.rsvpedByMe.has(event.id),
+      isSaved: extra.savedByMe.has(event.id),
+    };
+  });
 }
 
 type EventTagValue = typeof eventTags.$inferSelect.tag;
@@ -803,21 +985,37 @@ export async function getMyEvents(): Promise<{
     .where(eq(savedEvents.userId, userId))
     .orderBy(events.datetime);
 
-  const mapEvent = (e: (typeof createdEvents)[0]): FeedEvent => ({
-    id: e.id,
-    title: e.title,
-    description: e.description,
-    orgId: e.orgId,
-    orgName: e.orgName,
-    datetime: formatEventDateTime(e.datetime),
-    location: e.locationName ?? "TBD",
-    tags: [],
-    flyerUrl: e.flyerUrl,
-    rsvpCount: 0,
-    friendsAttending: [],
-    isRsvped: false,
-    isSaved: false,
-  });
+  /*
+   * Enrich all three tabs at once. These fields used to be hard-coded, so My
+   * Events could never show a tag, a friend, or the correct RSVP state
+   * regardless of how the card was styled.
+   */
+  const allIds = [
+    ...new Set([...createdEvents, ...rsvpedEvents, ...savedEventsResult].map((e) => e.id)),
+  ];
+  const friendIds = await loadFriendIds(userId);
+  const extra = await loadEventEnrichment(allIds, userId, friendIds);
+
+  const mapEvent = (e: (typeof createdEvents)[0]): FeedEvent => {
+    const attendees = extra.attendees.get(e.id) ?? [];
+    return {
+      id: e.id,
+      title: e.title,
+      description: e.description,
+      orgId: e.orgId,
+      orgName: e.orgName,
+      datetime: formatEventDateTime(e.datetime),
+      rawDatetime: e.datetime.toISOString(),
+      location: e.locationName ?? "TBD",
+      tags: extra.tags.get(e.id) ?? [],
+      flyerUrl: e.flyerUrl,
+      rsvpCount: attendees.length,
+      attendees,
+      friendsAttending: extra.friends.get(e.id) ?? [],
+      isRsvped: extra.rsvpedByMe.has(e.id),
+      isSaved: extra.savedByMe.has(e.id),
+    };
+  };
 
   return {
     created: createdEvents.map(mapEvent),
@@ -860,25 +1058,43 @@ export async function getSavedEvents(): Promise<FeedEvent[]> {
     .innerJoin(events, eq(savedEvents.eventId, events.id))
     .leftJoin(campusLocations, eq(events.locationId, campusLocations.id))
     .leftJoin(organizations, eq(events.orgId, organizations.id))
-    .where(eq(savedEvents.userId, userId))
+    /*
+     * Future events only. "Upcoming Events" reads from this list, and without
+     * the datetime bound a saved event from last week surfaced there — with
+     * `formatRelativeDay` cheerfully announcing it was happening "yesterday".
+     */
+    .where(and(eq(savedEvents.userId, userId), gt(events.datetime, new Date())))
     .orderBy(events.datetime)
     .limit(5);
 
-  return saved.map((event) => ({
-    id: event.id,
-    title: event.title,
-    description: event.description,
-    orgId: event.orgId,
-    orgName: event.orgName,
-    datetime: formatEventDateTime(event.datetime),
-    location: event.locationName ?? "TBD",
-    tags: [],
-    flyerUrl: event.flyerUrl,
-    rsvpCount: 0,
-    friendsAttending: [],
-    isRsvped: false,
-    isSaved: true,
-  }));
+  const friendIds = await loadFriendIds(userId);
+  const extra = await loadEventEnrichment(
+    saved.map((e) => e.id),
+    userId,
+    friendIds,
+  );
+
+  return saved.map((event) => {
+    const attendees = extra.attendees.get(event.id) ?? [];
+    return {
+      id: event.id,
+      title: event.title,
+      description: event.description,
+      orgId: event.orgId,
+      orgName: event.orgName,
+      datetime: formatEventDateTime(event.datetime),
+      rawDatetime: event.datetime.toISOString(),
+      location: event.locationName ?? "TBD",
+      tags: extra.tags.get(event.id) ?? [],
+      flyerUrl: event.flyerUrl,
+      rsvpCount: attendees.length,
+      attendees,
+      friendsAttending: extra.friends.get(event.id) ?? [],
+      isRsvped: extra.rsvpedByMe.has(event.id),
+      // Everything in this list is saved by definition.
+      isSaved: true,
+    };
+  });
 }
 
 export interface FriendsEvent extends FeedEvent {
@@ -937,20 +1153,31 @@ export async function getFriendsEvents(): Promise<FriendsEvent[]> {
     .orderBy(desc(sql`friend_count`), events.datetime)
     .limit(20);
 
-  return friendsEvents.map((event) => ({
-    id: event.id,
-    title: event.title,
-    description: event.description,
-    orgId: event.orgId,
-    orgName: event.orgName,
-    datetime: formatEventDateTime(event.datetime),
-    location: event.locationName ?? "TBD",
-    tags: [],
-    flyerUrl: event.flyerUrl,
-    rsvpCount: 0,
-    friendsAttending: [],
-    isRsvped: false,
-    isSaved: false,
-    friendCount: event.friendCount,
-  }));
+  const extra = await loadEventEnrichment(
+    friendsEvents.map((e) => e.id),
+    userId,
+    friendIds,
+  );
+
+  return friendsEvents.map((event) => {
+    const attendees = extra.attendees.get(event.id) ?? [];
+    return {
+      id: event.id,
+      title: event.title,
+      description: event.description,
+      orgId: event.orgId,
+      orgName: event.orgName,
+      datetime: formatEventDateTime(event.datetime),
+      rawDatetime: event.datetime.toISOString(),
+      location: event.locationName ?? "TBD",
+      tags: extra.tags.get(event.id) ?? [],
+      flyerUrl: event.flyerUrl,
+      rsvpCount: attendees.length,
+      attendees,
+      friendsAttending: extra.friends.get(event.id) ?? [],
+      isRsvped: extra.rsvpedByMe.has(event.id),
+      isSaved: extra.savedByMe.has(event.id),
+      friendCount: event.friendCount,
+    };
+  });
 }
diff --git a/apps/web/src/actions/map.ts b/apps/web/src/actions/map.ts
index deb4563..04044a2 100644
--- a/apps/web/src/actions/map.ts
+++ b/apps/web/src/actions/map.ts
@@ -7,9 +7,13 @@ import {
   db,
   eq,
   eventTags,
+  friendships,
   gte,
+  inArray,
   lt,
   organizations,
+  rsvps,
+  users,
 } from "@the-forum/database";
 import { auth } from "~/auth";
 
@@ -25,6 +29,8 @@ export interface MapEvent {
   latitude: number;
   longitude: number;
   tags: string[];
+  /** Friends of the viewer who have RSVP'd — the avatar stack on each card. */
+  friendsAttending: { id: string; displayName: string; avatarUrl: string | null }[];
 }
 
 /** Fetch events for a date range (defaults to next 7 days). */
@@ -35,6 +41,21 @@ export async function getMapEvents(opts?: {
   const session = await auth();
   if (!session?.user?.id) throw new Error("Unauthorized");
 
+  const userId = session.user.id;
+
+  // Accepted friendships are stored one-directional, so both columns are read.
+  const [outgoing, incoming] = await Promise.all([
+    db
+      .select({ friendId: friendships.friendId })
+      .from(friendships)
+      .where(and(eq(friendships.userId, userId), eq(friendships.status, "accepted"))),
+    db
+      .select({ friendId: friendships.userId })
+      .from(friendships)
+      .where(and(eq(friendships.friendId, userId), eq(friendships.status, "accepted"))),
+  ]);
+  const friendIds = [...outgoing, ...incoming].map((r) => r.friendId);
+
   const startDate = opts?.from ? new Date(opts.from) : new Date();
   startDate.setHours(0, 0, 0, 0);
 
@@ -60,24 +81,58 @@ export async function getMapEvents(opts?: {
     .where(and(gte(events.datetime, startDate), lt(events.datetime, endDate)))
     .orderBy(events.datetime);
 
-  return Promise.all(
-    results.map(async (r) => {
-      const tags = await db
-        .select({ tag: eventTags.tag })
-        .from(eventTags)
-        .where(eq(eventTags.eventId, r.id));
+  /*
+   * Tags and friend RSVPs are fetched in one query each and grouped in memory,
+   * rather than two queries per event. The per-event version issued 2N+1
+   * queries — all fired concurrently via Promise.all — which held a connection
+   * each and helped exhaust the pool.
+   */
+  const eventIds = results.map((r) => r.id);
+  if (eventIds.length === 0) return [];
+
+  const [tagRows, friendRsvpRows] = await Promise.all([
+    db
+      .select({ eventId: eventTags.eventId, tag: eventTags.tag })
+      .from(eventTags)
+      .where(inArray(eventTags.eventId, eventIds)),
+    friendIds.length === 0
+      ? Promise.resolve([])
+      : db
+          .select({
+            eventId: rsvps.eventId,
+            id: users.id,
+            displayName: users.displayName,
+            avatarUrl: users.avatarUrl,
+          })
+          .from(rsvps)
+          .innerJoin(users, eq(rsvps.userId, users.id))
+          .where(and(inArray(rsvps.eventId, eventIds), inArray(rsvps.userId, friendIds))),
+  ]);
+
+  const tagsByEvent = new Map<string, string[]>();
+  for (const row of tagRows) {
+    const list = tagsByEvent.get(row.eventId);
+    if (list) list.push(row.tag);
+    else tagsByEvent.set(row.eventId, [row.tag]);
+  }
+
+  const friendsByEvent = new Map<string, MapEvent["friendsAttending"]>();
+  for (const { eventId, ...friend } of friendRsvpRows) {
+    const list = friendsByEvent.get(eventId);
+    if (list) list.push(friend);
+    else friendsByEvent.set(eventId, [friend]);
+  }
 
-      return {
-        ...r,
-        locationId: r.locationId ?? "",
-        locationName: r.locationName ?? "TBD",
-        rawDatetime: r.datetime.toISOString(),
-        datetime: r.datetime.toLocaleTimeString("en-US", {
-          hour: "numeric",
-          minute: "2-digit",
-        }),
-        tags: tags.map((t) => t.tag),
-      };
+  return results.map((r) => ({
+    ...r,
+    friendsAttending: friendsByEvent.get(r.id) ?? [],
+    locationId: r.locationId ?? "",
+    locationName: r.locationName ?? "TBD",
+    rawDatetime: r.datetime.toISOString(),
+    datetime: r.datetime.toLocaleTimeString("en-US", {
+      hour: "numeric",
+      minute: "2-digit",
     }),
-  );
+    tags: tagsByEvent.get(r.id) ?? [],
+  }));
 }
diff --git a/apps/web/src/app/(app)/events/[id]/edit/edit-event-form.tsx b/apps/web/src/app/(app)/events/[id]/edit/edit-event-form.tsx
index ab61ea1..73f88b4 100644
--- a/apps/web/src/app/(app)/events/[id]/edit/edit-event-form.tsx
+++ b/apps/web/src/app/(app)/events/[id]/edit/edit-event-form.tsx
@@ -182,10 +182,10 @@ export function EditEventForm({ event, locations }: EditEventFormProps) {
         </Button>
       </div>
 
-      <div className="flex gap-[40px]">
+      <div className="flex flex-col gap-6 md:flex-row md:gap-[40px]">
         {/* Timeline sidebar */}
-        <div className="w-[160px] flex-shrink-0">
-          <div className="sticky top-[20px] flex flex-col gap-[12px]">
+        <div className="w-full shrink-0 md:w-[160px]">
+          <div className="flex gap-3 overflow-x-auto pb-1 md:sticky md:top-5 md:flex-col md:gap-3 md:overflow-visible">
             {TIMELINE_SECTIONS.map(({ id, label, color }) => (
               <button
                 key={id}
diff --git a/apps/web/src/app/(app)/events/[id]/event-detail-client.tsx b/apps/web/src/app/(app)/events/[id]/event-detail-client.tsx
index 9bdad2e..d03f725 100644
--- a/apps/web/src/app/(app)/events/[id]/event-detail-client.tsx
+++ b/apps/web/src/app/(app)/events/[id]/event-detail-client.tsx
@@ -4,6 +4,7 @@ import {
   Bookmark,
   BookmarkCheck,
   Calendar,
+  Check,
   ChevronLeft,
   Clock,
   Edit3,
@@ -25,6 +26,7 @@ import {
   toggleSave,
 } from "~/actions/events";
 import { Panel } from "~/components/common/panel";
+import { AttendeesDialog } from "~/components/events/attendees-dialog";
 import { getCategoryColor } from "~/components/events/event-card";
 import { EventCoverArt } from "~/components/events/event-cover-art";
 import { PageHeading, PageShell, SectionHeading } from "~/components/layout/page-shell";
@@ -39,32 +41,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "~/components/ui/dialog";
+import { buildGCalUrl } from "~/lib/calendar";
 import { cn } from "~/lib/utils";
 
-function buildGCalUrl(event: {
-  title: string;
-  description: string;
-  datetime: Date;
-  endDatetime: Date | null;
-  locationName: string;
-}) {
-  const fmt = (d: Date) =>
-    d
-      .toISOString()
-      .replace(/[-:]/g, "")
-      .replace(/\.\d{3}/, "");
-  const start = fmt(event.datetime);
-  const end = fmt(event.endDatetime ?? new Date(event.datetime.getTime() + 60 * 60 * 1000));
-  const params = new URLSearchParams({
-    action: "TEMPLATE",
-    text: event.title,
-    dates: `${start}/${end}`,
-    details: event.description,
-    location: event.locationName,
-  });
-  return `https://calendar.google.com/calendar/render?${params.toString()}`;
-}
-
 interface EventDetailClientProps {
   event: EventDetail;
   similarEvents: FeedEvent[];
@@ -76,6 +55,8 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
   const [isRsvped, setIsRsvped] = useState(event.isRsvped);
   const [isSaved, setIsSaved] = useState(event.isSaved);
   const [rsvpCount, setRsvpCount] = useState(event.rsvpCount);
+  /* Local, because the avatar stack below has to move with the RSVP button. */
+  const [attendees, setAttendees] = useState(event.attendees);
   const [deleteOpen, setDeleteOpen] = useState(false);
 
   const color = getCategoryColor(event.tags);
@@ -95,10 +76,16 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
     const prev = isRsvped;
     setIsRsvped(!prev);
     setRsvpCount((c) => (prev ? c - 1 : c + 1));
+    if (prev) {
+      toast(`Removed your RSVP to ${event.title}`);
+    } else {
+      toast.success(`You're going to ${event.title}`);
+    }
     startTransition(async () => {
       const result = await toggleRsvp(event.id);
       setIsRsvped(result.rsvped);
       setRsvpCount(result.count);
+      setAttendees(result.attendees);
     });
   };
 
@@ -138,8 +125,9 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
       {/* Main content */}
       <div className="flex flex-wrap gap-10">
         {/* Left: Flyer */}
-        <div className="w-[340px] shrink-0">
-          <div className="h-[440px] overflow-hidden rounded-xl shadow-lg">
+        {/* Full width on phones; a fixed column only once there's room beside it. */}
+        <div className="w-full sm:w-[340px] sm:shrink-0">
+          <div className="h-[280px] overflow-hidden rounded-xl shadow-lg sm:h-[440px]">
             {event.flyerUrl ? (
               <img src={event.flyerUrl} alt="" className="size-full object-cover" />
             ) : (
@@ -285,27 +273,34 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
 
           {/* RSVP button */}
           <Button
-            variant={isRsvped ? "solid" : "coral"}
+            variant={isRsvped ? "cerulean" : "coral"}
             size="cta"
             aria-pressed={isRsvped}
             disabled={isPending}
             onClick={handleRsvp}
             className="w-full max-w-[300px]"
           >
-            {isRsvped ? "Cancel RSVP" : "RSVP now"}
+            {isRsvped ? (
+              <>
+                <Check />
+                You're going
+              </>
+            ) : (
+              "RSVP now"
+            )}
           </Button>
 
           {/* Attendees */}
           <div className="flex items-center gap-[12px] mt-[16px]">
-            {event.attendees.length > 0 && (
-              <AvatarStack users={event.attendees} size={30} max={6} />
-            )}
+            {attendees.length > 0 && <AvatarStack users={attendees} size={30} max={6} />}
             <div>
               <div className="flex items-center gap-[6px]">
-                <Users size={14} className="text-forum-light-gray" />
-                <span className="text-[14px] font-bold font-dm-sans text-black">
-                  {rsvpCount} attending
-                </span>
+                <Users size={14} aria-hidden className="text-forum-light-gray" />
+                <AttendeesDialog
+                  attendees={attendees}
+                  count={rsvpCount}
+                  friendIds={new Set(event.friendsAttending.map((f) => f.id))}
+                />
               </div>
               {event.friendsAttending.length > 0 && (
                 <p className="text-[12px] font-dm-sans text-forum-light-gray mt-[2px]">
diff --git a/apps/web/src/app/(app)/events/create/create-event-form.tsx b/apps/web/src/app/(app)/events/create/create-event-form.tsx
index 4f1ac3c..43e3321 100644
--- a/apps/web/src/app/(app)/events/create/create-event-form.tsx
+++ b/apps/web/src/app/(app)/events/create/create-event-form.tsx
@@ -239,10 +239,10 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
         </Button>
       </div>
 
-      <div className="flex gap-[40px]">
+      <div className="flex flex-col gap-6 md:flex-row md:gap-[40px]">
         {/* Timeline sidebar */}
-        <div className="w-[160px] flex-shrink-0">
-          <div className="sticky top-[20px] flex flex-col gap-[12px]">
+        <div className="w-full shrink-0 md:w-[160px]">
+          <div className="flex gap-3 overflow-x-auto pb-1 md:sticky md:top-5 md:flex-col md:gap-3 md:overflow-visible">
             {TIMELINE_SECTIONS.map(({ id, label, color }) => (
               <button
                 key={id}
diff --git a/apps/web/src/app/(app)/events/my-events-client.tsx b/apps/web/src/app/(app)/events/my-events-client.tsx
index ac48303..6a0b80c 100644
--- a/apps/web/src/app/(app)/events/my-events-client.tsx
+++ b/apps/web/src/app/(app)/events/my-events-client.tsx
@@ -1,13 +1,21 @@
 "use client";
 
-import { Clock, MapPin } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import type { FeedEvent } from "~/actions/events";
-import { Panel } from "~/components/common/panel";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import { type FeedEvent, deleteEvent, toggleRsvp, toggleSave } from "~/actions/events";
 import { EmptyState } from "~/components/common/states";
-import { EventCoverArt } from "~/components/events/event-cover-art";
+import { EventCard } from "~/components/events/event-card";
+import { Button } from "~/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { buildGCalUrl } from "~/lib/calendar";
 
 const TABS = [
   {
@@ -38,66 +46,68 @@ interface MyEventsClientProps {
   saved: FeedEvent[];
 }
 
-function EventListCard({ event }: { event: FeedEvent }) {
-  return (
-    <Panel
-      asChild
-      size="sm"
-      className="transition-colors hover:border-forum-cerulean focus-within:border-forum-cerulean"
-    >
-      <Link href={`/events/${event.id}`} className="flex gap-4">
-        {/* Flyer thumbnail */}
-        <div className="h-[140px] w-[200px] shrink-0 overflow-hidden rounded-lg">
-          {event.flyerUrl ? (
-            <img src={event.flyerUrl} alt="" className="size-full object-cover" />
-          ) : (
-            <EventCoverArt title={event.title} tags={event.tags} className="size-full rounded-lg" />
-          )}
-        </div>
+export function MyEventsClient({ created, rsvped, saved }: MyEventsClientProps) {
+  const [activeTab, setActiveTab] = useState<TabId>("created");
+  const [lists, setLists] = useState<Record<TabId, FeedEvent[]>>({ created, rsvped, saved });
 
-        {/* Content */}
-        <div className="flex min-w-0 flex-1 flex-col">
-          <h3 className="mb-2 font-serif text-[20px] leading-tight text-black line-clamp-2">
-            {event.title}
-          </h3>
+  /**
+   * Update one event wherever it appears across the three tabs, and — when
+   * `dropFrom` is given — take it out of the tab it no longer belongs to.
+   *
+   * The tabs *are* the membership: unsaving from Saved or cancelling an RSVP
+   * used to flip the button and leave the card sitting in a list it had just
+   * been removed from, until a reload.
+   */
+  const patchEvent = (eventId: string, patch: Partial<FeedEvent>, dropFrom?: TabId) => {
+    setLists((prev) => {
+      const next = {} as Record<TabId, FeedEvent[]>;
+      for (const key of Object.keys(prev) as TabId[]) {
+        const list = key === dropFrom ? prev[key].filter((e) => e.id !== eventId) : prev[key];
+        next[key] = list.map((e) => (e.id === eventId ? { ...e, ...patch } : e));
+      }
+      return next;
+    });
+  };
 
-          <div className="mb-1 flex items-center gap-1.5">
-            <Clock size={13} aria-hidden className="shrink-0 text-forum-dark-gray" />
-            <span className="font-dm-sans text-[14px] text-forum-dark-gray">{event.datetime}</span>
-          </div>
+  const handleSaveToggle = async (eventId: string) => {
+    const result = await toggleSave(eventId);
+    patchEvent(eventId, { isSaved: result.saved }, result.saved ? undefined : "saved");
+  };
 
-          <div className="mb-2 flex items-center gap-1.5">
-            <MapPin size={13} aria-hidden className="shrink-0 text-forum-dark-gray" />
-            <span className="font-dm-sans text-[14px] text-forum-dark-gray">{event.location}</span>
-          </div>
+  const handleRsvpToggle = async (eventId: string) => {
+    const result = await toggleRsvp(eventId);
+    patchEvent(
+      eventId,
+      // Attendees ride along with the count so the avatar stack doesn't keep
+      // showing the viewer after they've cancelled.
+      { isRsvped: result.rsvped, rsvpCount: result.count, attendees: result.attendees },
+      result.rsvped ? undefined : "rsvped",
+    );
+  };
 
-          {event.tags.length > 0 && (
-            <div className="mt-auto flex flex-wrap gap-2">
-              {event.tags.slice(0, 3).map((tag) => (
-                <span
-                  key={tag}
-                  className="rounded-full bg-forum-yellow-50 px-2.5 py-0.5 font-dm-sans text-[13px] text-black"
-                >
-                  {tag}
-                </span>
-              ))}
-              {event.orgName && (
-                <span className="rounded-full bg-forum-turquoise-50 px-2.5 py-0.5 font-dm-sans text-[13px] text-black">
-                  {event.orgName}
-                </span>
-              )}
-            </div>
-          )}
-        </div>
-      </Link>
-    </Panel>
-  );
-}
+  /*
+   * Deleting is irreversible, so it goes through a confirmation rather than
+   * firing straight off the card.
+   */
+  const [pendingDelete, setPendingDelete] = useState<FeedEvent | null>(null);
+  const [isDeleting, startDeleting] = useTransition();
 
-export function MyEventsClient({ created, rsvped, saved }: MyEventsClientProps) {
-  const [activeTab, setActiveTab] = useState<TabId>("created");
+  const confirmDelete = () => {
+    if (!pendingDelete) return;
+    const { id, title } = pendingDelete;
+    startDeleting(async () => {
+      await deleteEvent(id);
+      setLists((prev) => ({
+        created: prev.created.filter((e) => e.id !== id),
+        rsvped: prev.rsvped.filter((e) => e.id !== id),
+        saved: prev.saved.filter((e) => e.id !== id),
+      }));
+      setPendingDelete(null);
+      toast.success(`Deleted ${title}`);
+    });
+  };
 
-  const eventMap: Record<TabId, FeedEvent[]> = { created, rsvped, saved };
+  const eventMap = lists;
 
   return (
     <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as TabId)}>
@@ -106,7 +116,8 @@ export function MyEventsClient({ created, rsvped, saved }: MyEventsClientProps)
           <TabsTrigger
             key={id}
             value={id}
-            className="flex-1 py-4 font-dm-sans text-[18px] font-semibold after:bottom-[-1px] after:h-0.5 after:bg-forum-cerulean data-[state=active]:text-black"
+            // Type scales down on phones so three tabs fit without clipping.
+            className="min-w-0 flex-1 px-1 py-3 font-dm-sans text-[13px] font-semibold after:bottom-[-1px] after:h-0.5 after:bg-forum-cerulean data-[state=active]:text-black sm:px-2 sm:py-4 sm:text-[18px]"
           >
             {label}
           </TabsTrigger>
@@ -117,8 +128,37 @@ export function MyEventsClient({ created, rsvped, saved }: MyEventsClientProps)
         <TabsContent key={id} value={id} className="mt-6">
           {eventMap[id].length > 0 ? (
             <div className="flex flex-col gap-4">
-              {eventMap[id].map((event) => (
-                <EventListCard key={event.id} event={event} />
+              {eventMap[id].map((event, index) => (
+                <EventCard
+                  key={event.id}
+                  {...event}
+                  density="wide"
+                  calendarUrl={
+                    event.rawDatetime
+                      ? buildGCalUrl({
+                          title: event.title,
+                          description: event.description,
+                          datetime: new Date(event.rawDatetime),
+                          endDatetime: null,
+                          locationName: event.location,
+                        })
+                      : undefined
+                  }
+                  {...(id === "created"
+                    ? {
+                        editHref: `/events/${event.id}/edit`,
+                        onDelete: () => setPendingDelete(event),
+                      }
+                    : {})}
+                  onSaveToggle={() => handleSaveToggle(event.id)}
+                  onRsvpToggle={() => handleRsvpToggle(event.id)}
+                  onShare={() => {
+                    navigator.clipboard.writeText(`${window.location.origin}/events/${event.id}`);
+                    toast.success("Link copied to clipboard");
+                  }}
+                  source="feed"
+                  position={index}
+                />
               ))}
             </div>
           ) : (
@@ -126,6 +166,26 @@ export function MyEventsClient({ created, rsvped, saved }: MyEventsClientProps)
           )}
         </TabsContent>
       ))}
+
+      <Dialog open={!!pendingDelete} onOpenChange={(open) => !open && setPendingDelete(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete event</DialogTitle>
+            <DialogDescription>
+              This will permanently delete &ldquo;{pendingDelete?.title}&rdquo;. This cannot be
+              undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPendingDelete(null)}>
+              Cancel
+            </Button>
+            <Button variant="coral" onClick={confirmDelete} disabled={isDeleting}>
+              {isDeleting ? "Deleting…" : "Delete event"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Tabs>
   );
 }
diff --git a/apps/web/src/app/(app)/events/page.tsx b/apps/web/src/app/(app)/events/page.tsx
index b393bd2..23c1a5f 100644
--- a/apps/web/src/app/(app)/events/page.tsx
+++ b/apps/web/src/app/(app)/events/page.tsx
@@ -11,8 +11,9 @@ export default async function MyEventsPage() {
   return (
     <PageShell>
       <PageHeading
+        clearTopBar
         action={
-          <Button asChild variant="solid" size="cta">
+          <Button asChild variant="cerulean" size="cta">
             <Link href="/events/create">
               <Plus />
               Create an event
diff --git a/apps/web/src/app/(app)/explore/explore-client.tsx b/apps/web/src/app/(app)/explore/explore-client.tsx
index 81916ad..5beb846 100644
--- a/apps/web/src/app/(app)/explore/explore-client.tsx
+++ b/apps/web/src/app/(app)/explore/explore-client.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Expand } from "lucide-react";
+import { ExternalLink } from "lucide-react";
 import Link from "next/link";
-import { useCallback, useMemo, useState, useTransition } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { toast } from "sonner";
 import {
   type FeedEvent,
   type FriendsEvent,
@@ -10,13 +11,14 @@ import {
   toggleRsvp,
   toggleSave,
 } from "~/actions/events";
-import { Panel } from "~/components/common/panel";
 import { SearchInput } from "~/components/common/search-input";
-import { EmptyState, EventCardSkeletonList } from "~/components/common/states";
+import { EmptyState, ErrorState, EventCardSkeletonList } from "~/components/common/states";
 import { EventCard } from "~/components/events/event-card";
 import { EventFilters } from "~/components/events/event-filters";
 import { PageHeading, PageShell, SectionHeading } from "~/components/layout/page-shell";
-import { formatEventDateTime } from "~/lib/date-format";
+import { Button } from "~/components/ui/button";
+import { buildGCalUrl } from "~/lib/calendar";
+import { formatRelativeDay } from "~/lib/date-format";
 
 interface ExploreClientProps {
   initialEvents: FeedEvent[];
@@ -28,28 +30,6 @@ interface ExploreClientProps {
   userAvatarUrl?: string | null;
 }
 
-// fake temporary event for UI testing
-const demoEvent: FeedEvent = {
-  // Use a valid UUID so server-side DB operations don't error on demo data
-  id: "00000000-0000-0000-0000-000000000000",
-  title: "Fake Event",
-  description: "Practice event data for UI testing.",
-  orgId: "tigerapps",
-  orgName: "TigerApps",
-  // Use a fixed demo timestamp so server and client HTML match during hydration
-  datetime: formatEventDateTime(new Date("2026-06-17T22:25:00Z")),
-  location: "Lewis 122",
-  tags: ["music", "free food", "performing arts"],
-  flyerUrl: null,
-  rsvpCount: 42,
-  friendsAttending: [
-    { id: "user-1", displayName: "Donald Grump", avatarUrl: null },
-    { id: "user-2", displayName: "Elvis Parsley", avatarUrl: null },
-  ],
-  isRsvped: false,
-  isSaved: false,
-};
-
 function getTodayString() {
   return new Date().toLocaleDateString("en-US", {
     weekday: "long",
@@ -68,52 +48,159 @@ export function ExploreClient({
   userName = "there",
   userAvatarUrl,
 }: ExploreClientProps) {
-  const fallbackEvents = initialEvents.length > 0 ? initialEvents : [demoEvent];
-  const [events, setEvents] = useState(fallbackEvents);
-  const [_total, setTotal] = useState(initialEvents.length > 0 ? initialTotal : 1);
+  /*
+   * Straight from the server, with no demo-event fallback. Substituting a fake
+   * event when the feed came back empty meant the empty state could never
+   * render on first load, which is precisely the case this screen has to handle.
+   */
+  const [events, setEvents] = useState(initialEvents);
+  /*
+   * The full match count, not the page size. `getFeedEvents` pages at 20 while
+   * returning a separate count over every match, so reporting `events.length`
+   * capped the message at "20 events match" no matter how many there were.
+   */
+  const [total, setTotal] = useState(initialTotal);
   const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  /*
+   * Hidden events stay in the list as collapsed stubs rather than being
+   * filtered out, so hiding stays reversible without a reload.
+   */
+  const [hiddenIds, setHiddenIds] = useState<Set<string>>(new Set());
   const [searchQuery, setSearchQuery] = useState(initialSearch);
   const [isPending, startTransition] = useTransition();
+  /** Set when a feed fetch fails, so the list can offer a retry. */
+  const [loadError, setLoadError] = useState(false);
+  const searchTimeout = useRef<ReturnType<typeof setTimeout>>(null);
+  /*
+   * Monotonic id for feed requests. Only the most recently issued one may write
+   * to state: two fetches can be in flight at once (type, then toggle a filter),
+   * and without this the slower-but-older response lands last and wins.
+   */
+  const latestRequest = useRef(0);
   const firstName = useMemo(() => userName.split(" ")[0] || "there", [userName]);
 
+  /** Drop a queued debounced search — it carries whatever filters were active when it was armed. */
+  const cancelPendingSearch = useCallback(() => {
+    if (searchTimeout.current) {
+      clearTimeout(searchTimeout.current);
+      searchTimeout.current = null;
+    }
+  }, []);
+
   const refreshEvents = useCallback((filters: string[], search: string) => {
+    const requestId = ++latestRequest.current;
     startTransition(async () => {
-      const result = await getFeedEvents({
-        tags: filters.length > 0 ? filters : undefined,
-        search: search || undefined,
-      });
-      setEvents(result.events);
-      setTotal(result.total);
+      try {
+        const result = await getFeedEvents({
+          tags: filters.length > 0 ? filters : undefined,
+          search: search || undefined,
+        });
+        if (requestId !== latestRequest.current) return;
+        setEvents(result.events);
+        setTotal(result.total);
+        setLoadError(false);
+      } catch {
+        if (requestId !== latestRequest.current) return;
+        // Surfaced as an ErrorState with a retry rather than an empty feed,
+        // which reads as "no events" and is a very different thing.
+        setLoadError(true);
+      }
     });
   }, []);
 
+  // A queued search outliving the component would fetch for a dead screen.
+  useEffect(() => cancelPendingSearch, [cancelPendingSearch]);
+
   const handleFilterToggle = useCallback(
     (filterId: string) => {
       const next = activeFilters.includes(filterId)
         ? activeFilters.filter((f) => f !== filterId)
         : [...activeFilters, filterId];
       setActiveFilters(next);
-      refreshEvents(next, searchQuery);
+      /*
+       * Cancel first. A search queued moments ago captured the *previous*
+       * filters, so letting it fire would re-fetch without the chip the user
+       * just clicked and overwrite this result — the feed and the active
+       * filters would disagree until the next interaction. The fetch below
+       * already carries the current query, so nothing is lost by dropping it.
+       */
+      cancelPendingSearch();
+      refreshEvents(next, searchQuery.trim());
     },
-    [activeFilters, searchQuery, refreshEvents],
+    [activeFilters, searchQuery, refreshEvents, cancelPendingSearch],
   );
 
-  const handleSearch = useCallback(() => {
-    if (searchQuery.trim()) refreshEvents(activeFilters, searchQuery.trim());
-  }, [searchQuery, activeFilters, refreshEvents]);
+  /*
+   * Debounced as you type, matching Orgs. Explore used to require Enter, so
+   * the two search fields behaved differently for no reason.
+   */
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchQuery(value);
+      if (searchTimeout.current) clearTimeout(searchTimeout.current);
+      searchTimeout.current = setTimeout(() => {
+        refreshEvents(activeFilters, value.trim());
+      }, 300);
+    },
+    [activeFilters, refreshEvents],
+  );
 
+  /*
+   * Flip the card first so the bookmark reacts on click, then reconcile with
+   * whatever the server actually stored. Without the leading flip there was
+   * nothing to roll back, and the `catch` inverted a value that was still
+   * correct — leaving the UI disagreeing with the database.
+   *
+   * Rethrown so the card knows not to announce success; the error toast here
+   * is the only feedback the failure gets.
+   */
   const handleSaveToggle = useCallback(async (eventId: string) => {
-    const result = await toggleSave(eventId);
-    setEvents((prev) => prev.map((e) => (e.id === eventId ? { ...e, isSaved: result.saved } : e)));
+    setEvents((prev) => prev.map((e) => (e.id === eventId ? { ...e, isSaved: !e.isSaved } : e)));
+    try {
+      const result = await toggleSave(eventId);
+      setEvents((prev) =>
+        prev.map((e) => (e.id === eventId ? { ...e, isSaved: result.saved } : e)),
+      );
+    } catch (error) {
+      toast.error("Couldn't update saved events. Please try again.");
+      setEvents((prev) => prev.map((e) => (e.id === eventId ? { ...e, isSaved: !e.isSaved } : e)));
+      throw error;
+    }
   }, []);
 
+  /*
+   * Same optimistic-then-reconcile shape as `handleSaveToggle`, plus the count
+   * and the roster. The card renders an avatar stack from `attendees` next to
+   * that count, so reconciling the number alone left the viewer's own face in
+   * the stack (and in the attendees dialog) after they un-RSVP'd.
+   */
   const handleRsvpToggle = useCallback(async (eventId: string) => {
-    const result = await toggleRsvp(eventId);
-    setEvents((prev) =>
-      prev.map((e) =>
-        e.id === eventId ? { ...e, isRsvped: result.rsvped, rsvpCount: result.count } : e,
-      ),
-    );
+    const flip = (e: FeedEvent) => ({
+      ...e,
+      isRsvped: !e.isRsvped,
+      rsvpCount: Math.max(0, e.rsvpCount + (e.isRsvped ? -1 : 1)),
+    });
+
+    setEvents((prev) => prev.map((e) => (e.id === eventId ? flip(e) : e)));
+    try {
+      const result = await toggleRsvp(eventId);
+      setEvents((prev) =>
+        prev.map((e) =>
+          e.id === eventId
+            ? {
+                ...e,
+                isRsvped: result.rsvped,
+                rsvpCount: result.count,
+                attendees: result.attendees,
+              }
+            : e,
+        ),
+      );
+    } catch (error) {
+      toast.error("Couldn't update your RSVP. Please try again.");
+      setEvents((prev) => prev.map((e) => (e.id === eventId ? flip(e) : e)));
+      throw error;
+    }
   }, []);
 
   const upcomingList = useMemo(
@@ -121,10 +208,23 @@ export function ExploreClient({
     [savedEvents, events],
   );
 
+  /*
+   * Single column that scrolls with the page on phones; the two-column layout
+   * with its own internal scroll only kicks in at xl, where the right rail
+   * appears. Nesting a scroll container inside the page scroller on a phone
+   * made the feed feel stuck.
+   *
+   * The shell runs full width rather than `wide` (max-w-7xl) so the row's right
+   * edge is the content area's right edge. That is what keeps the highlights
+   * rail still while the nav rail expands: only the shell's *left* edge moves,
+   * so the greeting, search field and cards slide right and the feed narrows,
+   * while the rail — pinned to the right by `ml-auto` — does not budge. With a
+   * capped shell the whole row re-centred and the rail travelled with it.
+   */
   return (
-    <PageShell width="wide" className="flex h-full gap-8">
-      {/* CENTER — Feed */}
-      <div className="flex min-w-0 flex-1 flex-col gap-5 overflow-y-auto">
+    <PageShell width="full" className="flex flex-col gap-8 xl:h-full xl:flex-row">
+      {/* CENTER — Feed. Capped so cards stay card-sized on very wide displays. */}
+      <div className="flex min-w-0 max-w-[1000px] flex-1 flex-col gap-5 xl:overflow-y-auto">
         <PageHeading
           description={
             <>
@@ -138,25 +238,40 @@ export function ExploreClient({
             </>
           }
         >
-          <span className="font-normal">Hi </span>
+          <span className="font-normal">Hello </span>
           <span className="font-bold italic">{firstName},</span>
         </PageHeading>
 
         <SearchInput
           label="Search events"
-          placeholder="Search for free boba, music concerts, tabling events"
+          placeholder="Search for events"
           value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") handleSearch();
-          }}
+          onChange={(e) => handleSearchChange(e.target.value)}
         />
 
         <EventFilters activeFilters={activeFilters} onFilterToggle={handleFilterToggle} />
 
+        {/* Result count, so a filtered feed says how filtered it is */}
+        {(searchQuery.trim() || activeFilters.length > 0) && !loadError && (
+          <p className="font-dm-sans text-[12px] text-forum-light-gray">
+            {isPending
+              ? "Searching…"
+              : `${total} ${total === 1 ? "event matches" : "events match"}`}
+          </p>
+        )}
+
         {/* Feed */}
         <div className="flex flex-col gap-5">
-          {isPending && events.length === 0 ? (
+          {loadError ? (
+            <ErrorState
+              title="Couldn't load events"
+              description="Something went wrong fetching the feed."
+              onRetry={() => {
+                cancelPendingSearch();
+                refreshEvents(activeFilters, searchQuery.trim());
+              }}
+            />
+          ) : isPending && events.length === 0 ? (
             <EventCardSkeletonList />
           ) : events.length === 0 ? (
             <EmptyState
@@ -168,130 +283,167 @@ export function ExploreClient({
               }
             />
           ) : (
-            events.map((event, index) => (
-              <EventCard
-                key={event.id}
-                {...event}
-                source="feed"
-                position={index}
-                onSaveToggle={() => handleSaveToggle(event.id)}
-                onRsvpToggle={() => handleRsvpToggle(event.id)}
-                onShare={() => {
-                  navigator.clipboard.writeText(`${window.location.origin}/events/${event.id}`);
-                }}
-                onHide={() => {
-                  setEvents((prev) => prev.filter((e) => e.id !== event.id));
-                }}
-              />
-            ))
+            /*
+             * Two columns from `sm` up. Cards stretch to the row height so a
+             * short description doesn't leave its neighbour's RSVP row floating
+             * at a different height.
+             */
+            <div className="grid gap-5 sm:grid-cols-2">
+              {events.map((event, index) => (
+                <EventCard
+                  key={event.id}
+                  {...event}
+                  className="h-full"
+                  calendarUrl={
+                    event.rawDatetime
+                      ? buildGCalUrl({
+                          title: event.title,
+                          description: event.description,
+                          datetime: new Date(event.rawDatetime),
+                          endDatetime: null,
+                          locationName: event.location,
+                        })
+                      : undefined
+                  }
+                  source="feed"
+                  position={index}
+                  onSaveToggle={() => handleSaveToggle(event.id)}
+                  onRsvpToggle={() => handleRsvpToggle(event.id)}
+                  onShare={() => {
+                    navigator.clipboard.writeText(`${window.location.origin}/events/${event.id}`);
+                    toast.success("Link copied to clipboard");
+                  }}
+                  isHidden={hiddenIds.has(event.id)}
+                  onHide={() => {
+                    setHiddenIds((prev) => new Set(prev).add(event.id));
+                  }}
+                  onUnhide={() => {
+                    setHiddenIds((prev) => {
+                      const next = new Set(prev);
+                      next.delete(event.id);
+                      return next;
+                    });
+                  }}
+                />
+              ))}
+            </div>
           )}
         </div>
       </div>
 
       {/* RIGHT PANEL */}
+      {/*
+        Nudged down so "Find My Friends" starts level with the "Today is…" line
+        rather than the greeting above it: the h1 is 52px at this breakpoint
+        plus the 8px gap to its description.
+      */}
       <aside
         aria-label="Highlights"
-        className="hidden w-[320px] shrink-0 flex-col gap-6 overflow-y-auto xl:flex"
+        className="hidden w-[320px] shrink-0 flex-col gap-8 overflow-y-auto xl:ml-auto xl:flex xl:pt-[60px]"
       >
         {/* Find My Friends */}
         <section>
           <SectionHeading>Find My Friends</SectionHeading>
-          <Link
-            href="/map"
-            className="group relative block rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean"
+          {friendsEvents.length === 0 ? (
+            <p className="font-dm-sans text-[13px] text-forum-light-gray">
+              None of your friends have added an event yet.
+            </p>
+          ) : (
+            /* Hairline dividers instead of gaps — keeps a longer list calm. */
+            <ul className="divide-y divide-forum-medium-gray">
+              {friendsEvents.slice(0, 4).map((event) => {
+                const friend = event.friendsAttending[0];
+                return (
+                  <li key={event.id} className="flex items-center gap-3 py-3 first:pt-1">
+                    {friend?.avatarUrl ? (
+                      <img
+                        src={friend.avatarUrl}
+                        alt=""
+                        className="size-10 shrink-0 rounded-full object-cover ring-2 ring-forum-medium-gray"
+                      />
+                    ) : (
+                      <span
+                        aria-hidden
+                        className="flex size-10 shrink-0 items-center justify-center rounded-full bg-forum-cerulean font-dm-sans text-[14px] font-bold text-white ring-2 ring-forum-medium-gray"
+                      >
+                        {friend?.displayName[0]?.toUpperCase() ?? "?"}
+                      </span>
+                    )}
+
+                    <div className="min-w-0 flex-1">
+                      <p className="font-dm-sans text-[13px] leading-snug text-black line-clamp-2">
+                        <span className="font-bold text-forum-cerulean">
+                          {friend?.displayName.split(" ")[0] ?? "A friend"}
+                        </span>{" "}
+                        added <span className="font-bold text-forum-cerulean">{event.title}</span>{" "}
+                        to their calendar.
+                      </p>
+                      <p className="mt-1 truncate font-dm-sans text-[11px] text-forum-light-gray">
+                        {event.location} @ {event.datetime}
+                      </p>
+                    </div>
+
+                    <Button
+                      asChild
+                      variant="coral"
+                      size="xs"
+                      className="shrink-0 rounded-full px-3 text-[10px] font-bold tracking-wide"
+                    >
+                      <Link href={`/events/${event.id}`}>VIEW EVENT</Link>
+                    </Button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+
+          <Button
+            asChild
+            variant="outline"
+            size="sm"
+            className="mt-4 w-full rounded-full text-[10px] font-bold tracking-wide text-forum-dark-gray"
           >
-            <div className="h-[240px] overflow-hidden rounded-lg border border-forum-border">
-              <div className="w-full h-full bg-[#f0f4ee] relative">
-                <div className="absolute inset-0 opacity-12">
-                  <div className="absolute top-0 left-[25%] w-[1px] h-full bg-gray-400" />
-                  <div className="absolute top-0 left-[55%] w-[1px] h-full bg-gray-400" />
-                  <div className="absolute top-0 left-[80%] w-[1px] h-full bg-gray-400" />
-                  <div className="absolute top-[30%] left-0 w-full h-[1px] bg-gray-400" />
-                  <div className="absolute top-[60%] left-0 w-full h-[1px] bg-gray-400" />
-                </div>
-                <span className="absolute top-[6%] right-[5%] text-[7px] font-bold text-gray-400 tracking-widest uppercase">
-                  Morrison
-                </span>
-                <span className="absolute top-[42%] left-[10%] text-[8px] font-bold text-gray-500 tracking-wider uppercase">
-                  Versity Place
-                </span>
-                <span className="absolute bottom-[6%] right-[6%] text-[7px] font-bold text-gray-400 tracking-widest uppercase">
-                  Museum
-                </span>
-                <span className="absolute bottom-[18%] left-[3%] text-[7px] font-bold text-gray-400">
-                  Dillon Gym
-                </span>
-                <div className="absolute top-[16%] right-[8%]">
-                  <div className="bg-white/95 rounded-full px-[8px] py-[2px] shadow text-[9px] font-bold text-black">
-                    Select Location
-                  </div>
-                </div>
-                <div className="absolute top-[22%] right-[20%] flex flex-col items-center">
-                  <div className="w-[36px] h-[36px] rounded-full border-[2px] border-white shadow bg-forum-turquoise/40 flex items-center justify-center text-[12px] font-bold">
-                    AJ
-                  </div>
-                  <span className="mt-[1px] bg-white/90 rounded-full px-[5px] text-[8px] font-bold text-black">
-                    AJ
-                  </span>
-                </div>
-                <div className="absolute bottom-[24%] left-[20%] flex flex-col items-center">
-                  <div className="w-[36px] h-[36px] rounded-full border-[2px] border-white shadow bg-forum-pink/60 flex items-center justify-center text-[12px] font-bold">
-                    PK
-                  </div>
-                  <span className="mt-[1px] bg-white/90 rounded-full px-[5px] text-[8px] font-bold text-black">
-                    PK
-                  </span>
-                </div>
-                <div className="absolute bottom-[24%] left-[40%] flex flex-col items-center">
-                  <div className="w-[36px] h-[36px] rounded-full border-[2px] border-white shadow bg-forum-yellow/60 flex items-center justify-center text-[12px] font-bold">
-                    AR
-                  </div>
-                  <span className="mt-[1px] bg-white/90 rounded-full px-[5px] text-[8px] font-bold text-black">
-                    AR
-                  </span>
-                </div>
-              </div>
-              <div className="absolute top-[8px] right-[8px]">
-                <Expand
-                  size={14}
-                  className="text-forum-dark-gray group-hover:text-black transition-colors"
-                />
-              </div>
-            </div>
-          </Link>
+            <Link href="/friends">
+              VIEW ALL FRIENDS
+              <ExternalLink />
+            </Link>
+          </Button>
         </section>
 
         {/* Upcoming Events */}
         <section>
           <SectionHeading>Upcoming Events</SectionHeading>
-          <Panel size="sm" className="flex flex-col">
-            {upcomingList.map((event) => (
-              <Link
-                key={event.id}
-                href={`/events/${event.id}`}
-                className="flex items-center gap-2.5 rounded-lg px-0.5 py-2 transition-colors hover:bg-forum-turquoise/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean"
-              >
-                <div className="size-[40px] shrink-0 overflow-hidden rounded border-2 border-forum-medium-gray">
-                  {event.flyerUrl ? (
-                    <img src={event.flyerUrl} alt="" className="size-full object-cover" />
-                  ) : (
-                    <div className="size-full bg-forum-pink/40" />
-                  )}
-                </div>
-                <p className="min-w-0 flex-1 font-dm-sans text-[13px] leading-snug text-black line-clamp-2">
-                  {event.title}
-                </p>
-                <span className="shrink-0 rounded border border-forum-border px-1.5 py-[3px] font-dm-sans text-[9px] font-bold tracking-wide text-forum-light-gray">
-                  DETAILS
-                </span>
-              </Link>
-            ))}
-            {upcomingList.length === 0 && (
-              <p className="py-1.5 font-dm-sans text-[12px] text-forum-light-gray">
-                No upcoming events yet.
-              </p>
-            )}
-          </Panel>
+          {upcomingList.length === 0 ? (
+            <p className="font-dm-sans text-[13px] text-forum-light-gray">
+              No upcoming events yet.
+            </p>
+          ) : (
+            <ul className="divide-y divide-forum-medium-gray">
+              {upcomingList.map((event) => (
+                <li key={event.id} className="flex items-center gap-3 py-3 first:pt-1">
+                  <div className="size-12 shrink-0 overflow-hidden rounded-lg bg-forum-turquoise/40">
+                    {event.flyerUrl && (
+                      <img src={event.flyerUrl} alt="" className="size-full object-cover" />
+                    )}
+                  </div>
+
+                  <p className="min-w-0 flex-1 font-dm-sans text-[13px] leading-snug text-black line-clamp-2">
+                    <span className="font-bold">{event.title}</span> is happening{" "}
+                    {event.rawDatetime ? formatRelativeDay(new Date(event.rawDatetime)) : "soon"}!
+                  </p>
+
+                  <Button
+                    asChild
+                    variant="outline"
+                    size="xs"
+                    className="shrink-0 rounded-full px-3 text-[10px] font-bold tracking-wide text-forum-dark-gray"
+                  >
+                    <Link href={`/events/${event.id}`}>DETAILS</Link>
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
         </section>
       </aside>
     </PageShell>
diff --git a/apps/web/src/app/(app)/friends/friends-client.tsx b/apps/web/src/app/(app)/friends/friends-client.tsx
index d01b8da..b441bc2 100644
--- a/apps/web/src/app/(app)/friends/friends-client.tsx
+++ b/apps/web/src/app/(app)/friends/friends-client.tsx
@@ -20,7 +20,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 function Avatar({
   name,
   avatarUrl,
-  size = 56,
+  // 44px reads fine on a phone row and still leaves room for the name and
+  // its actions; 56 crowded them.
+  size = 44,
 }: {
   name: string;
   avatarUrl?: string | null;
@@ -150,7 +152,8 @@ export function FriendsClient({ initialFriends, initialPending }: FriendsClientP
           <TabsTrigger
             key={id}
             value={id}
-            className="flex-1 py-4 font-dm-sans text-[16px] font-semibold after:bottom-[-1px] after:h-0.5 after:bg-forum-cerulean data-[state=active]:text-black"
+            // Type scales down on phones so three tabs fit without clipping.
+            className="min-w-0 flex-1 px-1 py-3 font-dm-sans text-[13px] font-semibold after:bottom-[-1px] after:h-0.5 after:bg-forum-cerulean data-[state=active]:text-black sm:px-2 sm:py-4 sm:text-[16px]"
           >
             {label}
             {count > 0 && (
@@ -237,7 +240,7 @@ export function FriendsClient({ initialFriends, initialPending }: FriendsClientP
                   <Panel
                     key={friend.id}
                     size="sm"
-                    className="group flex items-center gap-4 transition-colors hover:border-forum-cerulean"
+                    className="flex items-center gap-4 transition-colors hover:border-forum-cerulean"
                   >
                     <Avatar name={friend.displayName} avatarUrl={friend.avatarUrl} />
                     <div className="min-w-0 flex-1">
@@ -250,15 +253,17 @@ export function FriendsClient({ initialFriends, initialPending }: FriendsClientP
                       </p>
                     </div>
                     {/*
-                      Kept reachable by keyboard: the control is always in the
-                      tab order and reveals itself on focus, not just on hover.
+                      Always visible rather than hover-revealed: a control you
+                      cannot see is a control you cannot find, and hover doesn't
+                      exist on touch at all. It stays low-contrast until hover,
+                      where it turns coral to signal the destructive action.
                     */}
                     <Button
                       variant="ghost"
                       size="icon-sm"
                       aria-label={`Remove ${friend.displayName} from friends`}
                       onClick={() => handleRemove(friend.id)}
-                      className="text-forum-medium-gray opacity-0 transition-opacity hover:text-forum-coral focus-visible:opacity-100 group-hover:opacity-100"
+                      className="text-forum-light-gray transition-colors hover:bg-forum-coral/10 hover:text-forum-coral"
                     >
                       <UserMinus />
                     </Button>
@@ -285,8 +290,13 @@ export function FriendsClient({ initialFriends, initialPending }: FriendsClientP
           <TabsContent value="requests">
             {pending.incoming.length > 0 ? (
               <div className="flex flex-col gap-3">
+                {/* Rows wrap on phones so Accept/Decline don't squeeze the name */}
                 {pending.incoming.map((req) => (
-                  <Panel key={req.id} size="sm" className="flex items-center gap-4">
+                  <Panel
+                    key={req.id}
+                    size="sm"
+                    className="flex flex-wrap items-center gap-x-4 gap-y-3"
+                  >
                     <Avatar name={req.displayName} avatarUrl={req.avatarUrl} />
                     <div className="min-w-0 flex-1">
                       <p className="font-dm-sans text-[15px] text-black">
diff --git a/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx b/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx
index 5ce4563..ffb20dc 100644
--- a/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx
+++ b/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx
@@ -1,137 +1,145 @@
 "use client";
 
-import { Bookmark, MapPin, Share2, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useEffect, useState, useTransition } from "react";
-import { getEvent } from "~/actions/events";
+import { toast } from "sonner";
+import { type EventDetail, getEvent, toggleRsvp, toggleSave } from "~/actions/events";
+import { EventCard } from "~/components/events/event-card";
 import { Button } from "~/components/ui/button";
-import { Dialog, DialogContent, DialogTitle } from "~/components/ui/dialog";
-import { getEventColor } from "../_lib/map-helpers";
+import { Dialog, DialogClose, DialogContent, DialogTitle } from "~/components/ui/dialog";
+import { buildGCalUrl } from "~/lib/calendar";
+import { formatEventDateTime } from "~/lib/date-format";
 
 interface EventDetailModalProps {
   eventId: string | null;
   onClose: () => void;
 }
 
-interface EventDetail {
-  id: string;
-  title: string;
-  description: string | null;
-  datetime: Date;
-  endDatetime: Date | null;
-  locationName: string | null;
-  orgName: string | null;
-  flyerUrl: string | null;
-  tags: string[];
-  rsvpCount: number;
-  isRsvped: boolean;
-  isSaved: boolean;
-}
-
+/**
+ * The map's expanded event view.
+ *
+ * Renders the same `EventCard` the Explore feed uses, so an event looks
+ * identical whether you found it in the feed or on the map. This previously
+ * had a bespoke two-column layout, which meant the same event had two
+ * different visual treatments depending on where you opened it.
+ */
 export function EventDetailModal({ eventId, onClose }: EventDetailModalProps) {
   const [event, setEvent] = useState<EventDetail | null>(null);
-  const [isPending, startTransition] = useTransition();
+  const [isLoading, startLoading] = useTransition();
+  const [, startMutating] = useTransition();
 
   useEffect(() => {
     if (!eventId) {
       setEvent(null);
       return;
     }
-    startTransition(async () => {
-      const result = await getEvent(eventId);
-      if (result) {
-        setEvent(result as unknown as EventDetail);
-      }
+    startLoading(async () => {
+      setEvent(await getEvent(eventId));
     });
   }, [eventId]);
 
-  return (
-    <Dialog open={!!eventId} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-[600px] max-h-[85vh] overflow-y-auto p-0 gap-0">
-        <DialogTitle className="sr-only">{event?.title ?? "Event Details"}</DialogTitle>
-
-        {isPending || !event ? (
-          <div className="flex items-center justify-center py-20">
-            <div className="flex flex-col items-center gap-2">
-              <div className="w-6 h-6 rounded-full border-2 border-forum-border border-t-sky-500 animate-spin" />
-              <span className="text-xs text-forum-light-gray">Loading event</span>
-            </div>
-          </div>
-        ) : (
-          <div className="p-6">
-            {/* Header with actions */}
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1 min-w-0">
-                {event.orgName && (
-                  <p className="text-xs font-medium text-forum-dark-gray mb-1">{event.orgName}</p>
-                )}
-                <h2 className="text-2xl font-bold text-black leading-tight">{event.title}</h2>
-              </div>
-              <div className="flex items-center gap-1 shrink-0">
-                <Button variant="ghost" size="icon-sm" aria-label="Save event">
-                  <Bookmark />
-                </Button>
-                <Button variant="ghost" size="icon-sm" aria-label="Share event">
-                  <Share2 />
-                </Button>
-                <Button variant="ghost" size="icon-sm" aria-label="Close" onClick={onClose}>
-                  <X />
-                </Button>
-              </div>
-            </div>
+  const handleRsvp = () => {
+    if (!event) return;
+    setEvent({ ...event, isRsvped: !event.isRsvped });
+    startMutating(async () => {
+      const result = await toggleRsvp(event.id);
+      setEvent((prev) =>
+        prev
+          ? {
+              ...prev,
+              isRsvped: result.rsvped,
+              rsvpCount: result.count,
+              attendees: result.attendees,
+            }
+          : prev,
+      );
+    });
+  };
 
-            {/* Location + time */}
-            <div className="flex items-center gap-4 mt-3 text-sm text-forum-dark-gray">
-              {event.locationName && (
-                <span className="flex items-center gap-1">
-                  <MapPin size={14} className="text-forum-light-gray" />
-                  {event.locationName}
-                </span>
-              )}
-              <span className="flex items-center gap-1">
-                <span className="w-1.5 h-1.5 rounded-full bg-forum-light-gray" />
-                {new Date(event.datetime).toLocaleDateString("en-US", {
-                  weekday: "short",
-                  month: "short",
-                  day: "numeric",
-                })}{" "}
-                at{" "}
-                {new Date(event.datetime).toLocaleTimeString("en-US", {
-                  hour: "numeric",
-                  minute: "2-digit",
-                })}
-              </span>
-            </div>
+  const handleSave = () => {
+    if (!event) return;
+    setEvent({ ...event, isSaved: !event.isSaved });
+    startMutating(async () => {
+      const result = await toggleSave(event.id);
+      setEvent((prev) => (prev ? { ...prev, isSaved: result.saved } : prev));
+    });
+  };
 
-            {/* Tags */}
-            {event.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1.5 mt-4">
-                {event.tags.map((tag) => {
-                  const tagColor = getEventColor([tag]);
-                  return (
-                    <span
-                      key={tag}
-                      className="text-xs font-medium px-2.5 py-1 rounded-full"
-                      style={{ backgroundColor: tagColor.bg, color: tagColor.text }}
-                    >
-                      {tag.replace(/-/g, " ")}
-                    </span>
-                  );
-                })}
-              </div>
-            )}
+  const handleShare = async () => {
+    if (!event) return;
+    await navigator.clipboard.writeText(`${window.location.origin}/events/${event.id}`);
+    toast.success("Link copied to clipboard");
+  };
 
-            {/* Description */}
-            {event.description && (
-              <p className="mt-4 text-sm text-forum-dark-gray leading-relaxed">
-                {event.description}
-              </p>
-            )}
+  return (
+    <Dialog open={!!eventId} onOpenChange={(open) => !open && onClose()}>
+      {/*
+        Transparent overlay and chrome: the card is the surface, floating over a
+        still-visible map so you keep track of which pin you opened.
+      */}
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="bg-transparent"
+        className="max-h-[85vh] gap-0 overflow-y-auto border-0 bg-transparent p-0 shadow-none sm:max-w-[560px]"
+      >
+        <DialogTitle className="sr-only">{event?.title ?? "Event details"}</DialogTitle>
 
-            {/* RSVP button */}
-            <Button variant="cerulean" size="cta" className="mt-6 w-full">
-              RSVP now
+        <div className="mb-1 flex justify-end">
+          <DialogClose asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close"
+              className="bg-white/90 shadow-sm backdrop-blur-sm hover:bg-white"
+            >
+              <X className="text-forum-dark-gray" />
             </Button>
-          </div>
+          </DialogClose>
+        </div>
+
+        {isLoading || !event ? (
+          <output className="flex items-center justify-center rounded-xl bg-white py-20 shadow-2xl">
+            <span className="flex flex-col items-center gap-2">
+              <span className="size-6 animate-spin rounded-full border-2 border-forum-border border-t-forum-cerulean" />
+              <span className="font-dm-sans text-xs text-forum-light-gray">Loading event</span>
+            </span>
+          </output>
+        ) : (
+          <EventCard
+            id={event.id}
+            title={event.title}
+            orgId={event.orgId}
+            orgName={event.orgName}
+            /*
+             * The shared formatter, not a hand-rolled one. This built
+             * "Wed, Aug 26 · 7:54 AM" while the feed built "Wed, Aug 26 at
+             * 7:54 AM", so the same event read differently depending on where
+             * you opened it — the exact thing this modal exists to avoid.
+             */
+            datetime={formatEventDateTime(event.datetime)}
+            location={event.locationName}
+            description={event.description}
+            tags={event.tags}
+            rsvpCount={event.rsvpCount}
+            attendees={event.attendees}
+            friendsAttending={event.friendsAttending}
+            isSaved={event.isSaved}
+            isRsvped={event.isRsvped}
+            /* The "+ Calendar" action the feed card has — `buildGCalUrl` was
+               extracted here for this call site and then never wired up. */
+            calendarUrl={buildGCalUrl({
+              title: event.title,
+              description: event.description,
+              datetime: event.datetime,
+              endDatetime: event.endDatetime,
+              locationName: event.locationName,
+            })}
+            onSaveToggle={handleSave}
+            onRsvpToggle={handleRsvp}
+            onShare={handleShare}
+            source="map"
+            className="shadow-2xl"
+          />
         )}
       </DialogContent>
     </Dialog>
diff --git a/apps/web/src/app/(app)/map/_components/event-list-panel.tsx b/apps/web/src/app/(app)/map/_components/event-list-panel.tsx
index 459dc15..04f0dd8 100644
--- a/apps/web/src/app/(app)/map/_components/event-list-panel.tsx
+++ b/apps/web/src/app/(app)/map/_components/event-list-panel.tsx
@@ -1,151 +1,98 @@
 "use client";
 
-import { MapPin, Maximize2, X } from "lucide-react";
+import { MapPin, X } from "lucide-react";
 import type { MapEvent } from "~/actions/map";
 import { EmptyState } from "~/components/common/states";
+import { EventCard } from "~/components/events/event-card";
 import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
-import { getEventColor } from "../_lib/map-helpers";
 
 interface EventListPanelProps {
+  /** Only the events at the clicked pin, not the whole filtered set. */
   events: MapEvent[];
-  selectedLocation: string | null;
+  /** Name of the clicked location, shown in the header. */
+  locationName: string;
+  /**
+   * The event whose detail card is currently open — the only card that gets
+   * the highlighted fill.
+   *
+   * This used to be the selected *location*, which meant clicking a pin holding
+   * four events highlighted all four cards at once.
+   */
+  expandedEventId: string | null;
   onLocateEvent: (event: MapEvent) => void;
   onExpandEvent: (eventId: string) => void;
   onClose: () => void;
 }
 
+/**
+ * The map's right-hand event list.
+ *
+ * Rendered as separate floating cards over the map rather than one opaque
+ * full-height panel, matching the design — the map stays visible in the gaps
+ * between cards.
+ */
 export function EventListPanel({
   events,
-  selectedLocation,
+  locationName,
+  expandedEventId,
   onLocateEvent,
   onExpandEvent,
   onClose,
 }: EventListPanelProps) {
   return (
-    <div className="flex flex-col h-full w-[380px]">
-      {/* Header */}
-      <div className="flex shrink-0 items-center justify-between border-b border-forum-medium-gray px-4 py-3">
-        <span className="font-dm-sans text-sm font-semibold text-black">
-          {events.length} event{events.length !== 1 ? "s" : ""}
-        </span>
-        <Button variant="ghost" size="icon-sm" aria-label="Close event list" onClick={onClose}>
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto overscroll-contain py-3 pl-3 pr-2 scrollbar-cerulean">
+      <div className="flex shrink-0 items-center justify-between gap-2 rounded-xl bg-white px-3 py-1.5 shadow-md">
+        <div className="min-w-0">
+          <p className="truncate font-dm-sans text-[13px] font-semibold text-black">
+            {locationName || "Events"}
+          </p>
+          <p className="font-dm-sans text-[11px] text-forum-light-gray">
+            {events.length} event{events.length !== 1 ? "s" : ""} here
+          </p>
+        </div>
+        <Button variant="ghost" size="icon-xs" aria-label="Close event list" onClick={onClose}>
           <X />
         </Button>
       </div>
 
-      {/* Event cards */}
-      <div className="flex-1 overflow-y-auto overscroll-contain">
-        {events.length === 0 && (
+      {events.length === 0 ? (
+        <div className="rounded-xl bg-white shadow-md">
           <EmptyState
             icon={MapPin}
             title="No events found"
             description="Try adjusting your filters."
           />
-        )}
-
-        {events.map((event) => (
-          <PanelEventCard
+        </div>
+      ) : (
+        events.map((event, index) => (
+          <EventCard
             key={event.id}
-            event={event}
-            isActive={selectedLocation === event.locationId}
-            onLocate={() => onLocateEvent(event)}
-            onExpand={() => onExpandEvent(event.id)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function PanelEventCard({
-  event,
-  isActive,
-  onLocate,
-  onExpand,
-}: {
-  event: MapEvent;
-  isActive: boolean;
-  onLocate: () => void;
-  onExpand: () => void;
-}) {
-  const eventDate = new Date(event.rawDatetime);
-
-  return (
-    /*
-     * The card was a <button> with a second <button> nested inside it for
-     * Expand — invalid HTML, and the inner control was unreachable in some
-     * browsers. The two actions are now siblings inside a plain container.
-     */
-    <div
-      className={cn(
-        "border-b border-forum-medium-gray px-4 py-3 transition-colors hover:bg-forum-turquoise/10",
-        isActive && "border-l-2 border-l-forum-cerulean bg-forum-turquoise/15",
-      )}
-    >
-      <div className="flex items-start justify-between gap-2">
-        <button
-          type="button"
-          onClick={onLocate}
-          className="min-w-0 flex-1 cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean"
-        >
-          <h4 className="truncate font-dm-sans text-sm font-bold leading-tight text-black">
-            {event.title}
-          </h4>
-          <p className="mt-0.5 font-dm-sans text-xs text-forum-dark-gray">
-            {eventDate.toLocaleDateString("en-US", {
-              weekday: "long",
+            id={event.id}
+            title={event.title}
+            orgName={event.orgName}
+            datetime={new Date(event.rawDatetime).toLocaleString("en-US", {
+              weekday: "short",
               month: "short",
               day: "numeric",
-            })}
-          </p>
-          <p className="font-dm-sans text-xs text-forum-dark-gray">
-            {eventDate.toLocaleTimeString("en-US", {
-              hour: "numeric",
-              minute: "2-digit",
-            })}
-            {" - "}
-            {new Date(eventDate.getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString("en-US", {
               hour: "numeric",
               minute: "2-digit",
             })}
-          </p>
-        </button>
-
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          aria-label={`Open ${event.title}`}
-          onClick={onExpand}
-          className="shrink-0"
-        >
-          <Maximize2 />
-        </Button>
-      </div>
-
-      {/* Tags */}
-      {event.tags.length > 0 && (
-        <div className="mt-1.5 flex flex-wrap gap-1">
-          {event.tags.slice(0, 3).map((tag) => {
-            const tagColor = getEventColor([tag]);
-            return (
-              <span
-                key={tag}
-                className="rounded-full px-2 py-0.5 font-dm-sans text-[10px] font-semibold"
-                style={{ backgroundColor: tagColor.bg, color: tagColor.text }}
-              >
-                {tag.replace(/-/g, " ")}
-              </span>
-            );
-          })}
-        </div>
-      )}
-
-      {/* Org */}
-      {event.orgName && (
-        <p className="mt-1 truncate font-dm-sans text-[11px] text-forum-light-gray">
-          {event.orgName}
-        </p>
+            location={event.locationName}
+            tags={event.tags}
+            friendsAttending={event.friendsAttending}
+            density="compact"
+            source="map"
+            position={index}
+            onLocate={() => onLocateEvent(event)}
+            onOpen={() => onExpandEvent(event.id)}
+            className={cn(
+              "shrink-0 border-0 shadow-md transition-colors",
+              // Tinted only while this card's own detail view is open.
+              expandedEventId === event.id ? "bg-[#ECFCFC]" : "bg-white",
+            )}
+          />
+        ))
       )}
     </div>
   );
diff --git a/apps/web/src/app/(app)/map/_components/map-filter-pills.tsx b/apps/web/src/app/(app)/map/_components/map-filter-pills.tsx
index d052df1..b30f1af 100644
--- a/apps/web/src/app/(app)/map/_components/map-filter-pills.tsx
+++ b/apps/web/src/app/(app)/map/_components/map-filter-pills.tsx
@@ -16,8 +16,10 @@ const PILLS: { key: FilterKey; label: string; icon: typeof Users }[] = [
 ];
 
 export function MapFilterPills({ activeFilters, onToggle }: MapFilterPillsProps) {
+  // Scrolls sideways on phones rather than wrapping into stacked rows that
+  // eat the map.
   return (
-    <fieldset className="flex flex-wrap items-center justify-center gap-2">
+    <fieldset className="scrollbar-cerulean flex items-center gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:justify-center sm:overflow-visible sm:pb-0">
       <legend className="sr-only">Filter map events</legend>
       {PILLS.map(({ key, label, icon: Icon }) => (
         <FilterChip
diff --git a/apps/web/src/app/(app)/map/_components/map-popup-carousel.tsx b/apps/web/src/app/(app)/map/_components/map-popup-carousel.tsx
deleted file mode 100644
index 8a9cea8..0000000
--- a/apps/web/src/app/(app)/map/_components/map-popup-carousel.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client";
-
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useState } from "react";
-import type { MapEvent } from "~/actions/map";
-import { MapPopup } from "./map-popup";
-
-interface MapPopupCarouselProps {
-  events: MapEvent[];
-  onExpand: (eventId: string) => void;
-}
-
-export function MapPopupCarousel({ events, onExpand }: MapPopupCarouselProps) {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const current = events[activeIndex];
-  if (!current) return null;
-
-  return (
-    <div className="relative">
-      <MapPopup event={current} onExpand={() => onExpand(current.id)} />
-
-      {events.length > 1 && (
-        <>
-          {/* Left arrow */}
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              setActiveIndex((i) => (i - 1 + events.length) % events.length);
-            }}
-            className="absolute left-1 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-white/90 shadow-sm border border-forum-border flex items-center justify-center text-forum-dark-gray hover:text-black hover:bg-white transition-colors"
-          >
-            <ChevronLeft size={14} />
-          </button>
-
-          {/* Right arrow */}
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              setActiveIndex((i) => (i + 1) % events.length);
-            }}
-            className="absolute right-1 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-white/90 shadow-sm border border-forum-border flex items-center justify-center text-forum-dark-gray hover:text-black hover:bg-white transition-colors"
-          >
-            <ChevronRight size={14} />
-          </button>
-
-          {/* Pagination dots */}
-          <div className="flex items-center justify-center gap-1 pb-2">
-            {events.map((evt, i) => (
-              <button
-                key={evt.id}
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setActiveIndex(i);
-                }}
-                className={`w-1.5 h-1.5 rounded-full transition-colors ${
-                  i === activeIndex ? "bg-gray-800" : "bg-forum-medium-gray"
-                }`}
-              />
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(app)/map/_components/map-popup.tsx b/apps/web/src/app/(app)/map/_components/map-popup.tsx
deleted file mode 100644
index 56e3a65..0000000
--- a/apps/web/src/app/(app)/map/_components/map-popup.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Maximize2 } from "lucide-react";
-import type { MapEvent } from "~/actions/map";
-import { Button } from "~/components/ui/button";
-import { cn } from "~/lib/utils";
-import { URGENCY_STYLES, getEventColor, getRelativeLabel } from "../_lib/map-helpers";
-
-interface MapPopupProps {
-  event: MapEvent;
-  onExpand: () => void;
-}
-
-export function MapPopup({ event, onExpand }: MapPopupProps) {
-  const color = getEventColor(event.tags);
-  const rel = getRelativeLabel(event.rawDatetime);
-  const urgency = URGENCY_STYLES[rel.urgency];
-  const eventDate = new Date(event.rawDatetime);
-
-  return (
-    <div className="p-3 min-w-[240px]">
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-bold text-black leading-tight">{event.title}</h3>
-          <p className="text-xs text-forum-dark-gray mt-1">
-            {eventDate.toLocaleDateString("en-US", {
-              weekday: "long",
-              month: "short",
-              day: "numeric",
-            })}
-          </p>
-          <p className="text-xs text-forum-dark-gray">
-            {eventDate.toLocaleTimeString("en-US", {
-              hour: "numeric",
-              minute: "2-digit",
-            })}
-            {" - "}
-            {new Date(eventDate.getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString("en-US", {
-              hour: "numeric",
-              minute: "2-digit",
-            })}
-          </p>
-        </div>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          aria-label="Open event details"
-          onClick={onExpand}
-          className="shrink-0"
-        >
-          <Maximize2 />
-        </Button>
-      </div>
-
-      {event.tags.length > 0 && (
-        <div className="flex flex-wrap gap-1 mt-2">
-          {event.tags.slice(0, 3).map((tag) => {
-            const tagColor = getEventColor([tag]);
-            return (
-              <span
-                key={tag}
-                className="text-[10px] font-semibold px-2 py-0.5 rounded-full"
-                style={{ backgroundColor: tagColor.bg, color: tagColor.text }}
-              >
-                {tag.replace(/-/g, " ")}
-              </span>
-            );
-          })}
-        </div>
-      )}
-
-      {event.orgName && (
-        <div className="flex items-center gap-1.5 mt-2 pt-2 border-t border-forum-medium-gray">
-          <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: color.dot }} />
-          <span className="text-[11px] text-forum-dark-gray truncate">{event.orgName}</span>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(app)/map/_components/map-view.tsx b/apps/web/src/app/(app)/map/_components/map-view.tsx
index 461a028..e3231e6 100644
--- a/apps/web/src/app/(app)/map/_components/map-view.tsx
+++ b/apps/web/src/app/(app)/map/_components/map-view.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { forwardRef, useCallback, useState } from "react";
-import { Map as MapGL, type MapRef, Marker, NavigationControl, Popup } from "react-map-gl/mapbox";
+import type { Map as MapboxMap } from "mapbox-gl";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { Map as MapGL, type MapRef, Marker, NavigationControl } from "react-map-gl/mapbox";
 import type { MapEvent } from "~/actions/map";
 import { env } from "~/env";
 import {
@@ -13,115 +14,118 @@ import {
 } from "../_lib/map-constants";
 import { getTimeGroup } from "../_lib/map-helpers";
 import { MapPin } from "./map-pin";
-import { MapPopup } from "./map-popup";
-import { MapPopupCarousel } from "./map-popup-carousel";
+import { YouAreHere } from "./you-are-here";
 
 interface MapViewProps {
   locationGroups: Map<string, MapEvent[]>;
   selectedLocation: string | null;
   onSelectLocation: (locId: string | null) => void;
   onExpandEvent: (eventId: string) => void;
+  /** Open the sidebar listing every event at this location. */
+  onShowLocationList: (locId: string) => void;
 }
 
 export const MapView = forwardRef<MapRef, MapViewProps>(function MapView(
-  { locationGroups, selectedLocation, onSelectLocation, onExpandEvent },
+  { locationGroups, selectedLocation, onSelectLocation, onExpandEvent, onShowLocationList },
   ref,
 ) {
-  const [popupLoc, setPopupLoc] = useState<{
-    lng: number;
-    lat: number;
-    events: MapEvent[];
-  } | null>(null);
-
+  /*
+   * Clicking a pin goes straight to the designed surface — no intermediate
+   * popup. One event opens the full detail card; several open the right-hand
+   * sidebar listing them.
+   *
+   * The previous mini-popup stacked a carousel's prev/next arrows on top of the
+   * popup body (`absolute top-1/2` over the content), so the arrows covered the
+   * event's own start time.
+   */
   const handleMarkerClick = useCallback(
     (locId: string, locEvents: MapEvent[]) => {
       const first = locEvents[0];
       if (!first) return;
       onSelectLocation(locId);
-      setPopupLoc({ lng: first.longitude, lat: first.latitude, events: locEvents });
+      if (locEvents.length === 1) {
+        onExpandEvent(first.id);
+      } else {
+        onShowLocationList(locId);
+      }
     },
-    [onSelectLocation],
+    [onSelectLocation, onExpandEvent, onShowLocationList],
   );
 
   const handleMapClick = useCallback(() => {
     onSelectLocation(null);
-    setPopupLoc(null);
   }, [onSelectLocation]);
 
-  return (
-    <MapGL
-      ref={ref}
-      mapboxAccessToken={env.NEXT_PUBLIC_CAMPUS_MAP_TOKEN}
-      initialViewState={{
-        longitude: PRINCETON_CENTER.lng,
-        latitude: PRINCETON_CENTER.lat,
-        zoom: DEFAULT_ZOOM,
-        pitch: 0,
-        bearing: 0,
-      }}
-      minZoom={MIN_ZOOM}
-      maxZoom={MAX_ZOOM}
-      maxBounds={CAMPUS_BOUNDS}
-      mapStyle={env.NEXT_PUBLIC_CAMPUS_MAP_STYLE}
-      style={{ width: "100%", height: "100%" }}
-      reuseMaps
-      onClick={handleMapClick}
-    >
-      <NavigationControl position="bottom-right" showCompass={false} />
+  /*
+   * Mapbox sizes its canvas once and does not track its container, so any
+   * layout change after mount — the shell switching to a flex column, the nav
+   * rail animating, a window resize — leaves the canvas at its old size with
+   * blank space where the map should be. Re-measure whenever the box changes.
+   */
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mapInstance = useRef<MapboxMap | null>(null);
 
-      {Array.from(locationGroups.entries()).map(([locId, locEvents]) => {
-        const first = locEvents[0];
-        if (!first) return null;
-        const isNow = getTimeGroup(first.rawDatetime) === "now";
-        const isSelected = selectedLocation === locId;
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => mapInstance.current?.resize());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className="size-full">
+      <MapGL
+        ref={ref}
+        onLoad={(e) => {
+          mapInstance.current = e.target;
+          e.target.resize();
+        }}
+        mapboxAccessToken={env.NEXT_PUBLIC_CAMPUS_MAP_TOKEN}
+        initialViewState={{
+          longitude: PRINCETON_CENTER.lng,
+          latitude: PRINCETON_CENTER.lat,
+          zoom: DEFAULT_ZOOM,
+          pitch: 0,
+          bearing: 0,
+        }}
+        minZoom={MIN_ZOOM}
+        maxZoom={MAX_ZOOM}
+        maxBounds={CAMPUS_BOUNDS}
+        mapStyle={env.NEXT_PUBLIC_CAMPUS_MAP_STYLE}
+        style={{ width: "100%", height: "100%" }}
+        reuseMaps
+        onClick={handleMapClick}
+      >
+        <NavigationControl position="bottom-right" showCompass={false} />
+        <YouAreHere />
 
-        return (
-          <Marker
-            key={locId}
-            longitude={first.longitude}
-            latitude={first.latitude}
-            anchor="bottom"
-            onClick={(e) => {
-              e.originalEvent.stopPropagation();
-              handleMarkerClick(locId, locEvents);
-            }}
-          >
-            <MapPin
-              isNow={isNow}
-              count={locEvents.length > 1 ? locEvents.length : undefined}
-              isSelected={isSelected}
-            />
-          </Marker>
-        );
-      })}
+        {Array.from(locationGroups.entries()).map(([locId, locEvents]) => {
+          const first = locEvents[0];
+          if (!first) return null;
+          const isNow = getTimeGroup(first.rawDatetime) === "now";
+          const isSelected = selectedLocation === locId;
 
-      {popupLoc && (
-        <Popup
-          longitude={popupLoc.lng}
-          latitude={popupLoc.lat}
-          anchor="bottom"
-          offset={[0, -40] as [number, number]}
-          closeOnClick={false}
-          onClose={() => {
-            setPopupLoc(null);
-            onSelectLocation(null);
-          }}
-          maxWidth="340px"
-          className="map-event-popup"
-        >
-          {popupLoc.events.length === 1 && popupLoc.events[0] ? (
-            <MapPopup
-              event={popupLoc.events[0]}
-              onExpand={() => onExpandEvent(popupLoc.events[0]?.id ?? "")}
-            />
-          ) : (
-            <MapPopupCarousel
-              events={popupLoc.events}
-              onExpand={(eventId) => onExpandEvent(eventId)}
-            />
-          )}
-        </Popup>
-      )}
-    </MapGL>
+          return (
+            <Marker
+              key={locId}
+              longitude={first.longitude}
+              latitude={first.latitude}
+              anchor="bottom"
+              onClick={(e) => {
+                e.originalEvent.stopPropagation();
+                handleMarkerClick(locId, locEvents);
+              }}
+            >
+              <MapPin
+                isNow={isNow}
+                count={locEvents.length > 1 ? locEvents.length : undefined}
+                isSelected={isSelected}
+              />
+            </Marker>
+          );
+        })}
+      </MapGL>
+    </div>
   );
 });
diff --git a/apps/web/src/app/(app)/map/_components/timeline-scrubber.tsx b/apps/web/src/app/(app)/map/_components/timeline-scrubber.tsx
index 7146caa..c01cfce 100644
--- a/apps/web/src/app/(app)/map/_components/timeline-scrubber.tsx
+++ b/apps/web/src/app/(app)/map/_components/timeline-scrubber.tsx
@@ -21,9 +21,9 @@ export function TimelineScrubber({
   const timelineDays = useMemo(() => getTimelineDays(days), [days]);
 
   return (
-    <div className="bg-white border-t border-forum-border px-4 py-3 flex items-center gap-6">
-      {/* Legend */}
-      <div className="shrink-0 flex flex-col gap-1">
+    <div className="flex items-center gap-4 border-t border-forum-border bg-white px-3 py-2.5 sm:gap-6 sm:px-4 sm:py-3">
+      {/* Legend — hidden on phones, where the horizontal room matters more */}
+      <div className="hidden shrink-0 flex-col gap-1 sm:flex">
         <div className="flex items-center gap-1.5">
           <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: NOW_COLOR }} />
           <span className="text-[10px] font-bold text-forum-dark-gray tracking-wide">NOW</span>
diff --git a/apps/web/src/app/(app)/map/_components/you-are-here.tsx b/apps/web/src/app/(app)/map/_components/you-are-here.tsx
new file mode 100644
index 0000000..494f4e2
--- /dev/null
+++ b/apps/web/src/app/(app)/map/_components/you-are-here.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Marker } from "react-map-gl/mapbox";
+import { CAMPUS_BOUNDS } from "../_lib/map-constants";
+
+/**
+ * The viewer's own position, labelled "You Are Here".
+ *
+ * Geolocation is requested once and failures are swallowed — the browser
+ * prompt can be denied, dismissed, or unavailable over plain HTTP, and none of
+ * those should surface an error on a map that works fine without it. The
+ * marker is simply omitted when there is no fix, or when the fix falls outside
+ * the campus bounds (so a user across the country doesn't yank the layout).
+ */
+export function YouAreHere() {
+  const [position, setPosition] = useState<{ lng: number; lat: number } | null>(null);
+
+  useEffect(() => {
+    if (!navigator.geolocation) return;
+
+    let cancelled = false;
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        if (cancelled) return;
+        const { longitude: lng, latitude: lat } = pos.coords;
+        const [[west, south], [east, north]] = CAMPUS_BOUNDS;
+        if (lng < west || lng > east || lat < south || lat > north) return;
+        setPosition({ lng, lat });
+      },
+      () => {
+        /* denied or unavailable — the map is still fully usable */
+      },
+      { enableHighAccuracy: true, timeout: 10_000, maximumAge: 60_000 },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!position) return null;
+
+  return (
+    <Marker longitude={position.lng} latitude={position.lat} anchor="bottom">
+      <div className="flex flex-col items-center">
+        <span
+          aria-hidden
+          className="size-3.5 rounded-full border-2 border-white bg-forum-cerulean shadow-md"
+        />
+        <span className="mt-1 whitespace-nowrap rounded-full bg-white/95 px-2 py-0.5 font-dm-sans text-[10px] font-bold text-black shadow-sm backdrop-blur-sm">
+          You Are Here
+        </span>
+      </div>
+    </Marker>
+  );
+}
diff --git a/apps/web/src/app/(app)/map/map-client.tsx b/apps/web/src/app/(app)/map/map-client.tsx
index 10cbd4f..86b4922 100644
--- a/apps/web/src/app/(app)/map/map-client.tsx
+++ b/apps/web/src/app/(app)/map/map-client.tsx
@@ -106,6 +106,15 @@ export function MapClient({ initialEvents }: MapClientProps) {
     return groups;
   }, [filteredEvents]);
 
+  /*
+   * The sidebar shows the events at the pin you clicked — not the whole
+   * filtered set. Clicking a pin with four events shows those four.
+   */
+  const panelEvents = useMemo(
+    () => (selectedLocation ? (locationGroups.get(selectedLocation) ?? []) : []),
+    [selectedLocation, locationGroups],
+  );
+
   const eventCountByDate = useMemo(() => {
     const counts = new Map<string, number>();
     for (const event of events) {
@@ -130,8 +139,14 @@ export function MapClient({ initialEvents }: MapClientProps) {
     setSelectedLocation(null);
   }, []);
 
+  /** A single event at a pin → open the full detail card. */
   const handleExpandEvent = useCallback((eventId: string) => {
     setDetailEventId(eventId);
+  }, []);
+
+  /** Several events at a pin → open the sidebar listing them. */
+  const handleShowLocationList = useCallback((locId: string) => {
+    setSelectedLocation(locId);
     setPanelOpen(true);
   }, []);
 
@@ -152,47 +167,71 @@ export function MapClient({ initialEvents }: MapClientProps) {
         map painted over the docked Sidebar and the route had to opt out of the
         standard chrome. It now shares the same nav as every other page.
       */}
-      <div className="absolute inset-0 overflow-hidden rounded-[16px]">
-        {/* Map fills everything */}
-        <div className="absolute inset-0">
+      <div className="absolute inset-0 flex flex-col overflow-hidden">
+        {/* Map area — everything that floats is scoped to this box, so no overlay
+            can land on the timeline below it */}
+        <div className="relative min-h-0 flex-1">
           <MapView
             ref={mapRef}
             locationGroups={locationGroups}
             selectedLocation={selectedLocation}
             onSelectLocation={setSelectedLocation}
             onExpandEvent={handleExpandEvent}
+            onShowLocationList={handleShowLocationList}
           />
-        </div>
 
-        {/* ═══ Search bar + filter pills (top center) ═══ */}
-        {/* The wider right inset on ≥sm clears the TopBar's bell + avatar. */}
-        <div className="pointer-events-none absolute top-4 right-4 left-4 z-10 sm:right-32">
-          <div className="pointer-events-auto mx-auto flex max-w-2xl flex-col gap-2">
-            <MapSearchBar value={searchQuery} onChange={setSearchQuery} />
-            <MapFilterPills activeFilters={activeFilters} onToggle={toggleFilter} />
+          {/* ═══ Search bar + filter pills (top center) ═══ */}
+          {/*
+            The rail floats over the map on this route, so the left inset clears
+            its *expanded* 212px width — the controls are never swallowed when it
+            opens. The wider right inset on ≥sm clears the TopBar's bell + avatar.
+          */}
+          <div className="pointer-events-none absolute top-4 right-4 left-4 z-10 sm:left-[224px] sm:right-32">
+            <div className="pointer-events-auto mx-auto flex max-w-2xl flex-col gap-2">
+              <MapSearchBar value={searchQuery} onChange={setSearchQuery} />
+              <MapFilterPills activeFilters={activeFilters} onToggle={toggleFilter} />
+            </div>
           </div>
-        </div>
 
-        {/* ═══ Right-side event list panel (floating overlay) ═══ */}
-        <div
-          className={cn(
-            "absolute top-0 right-0 bottom-0 z-10 transition-transform duration-300 ease-out",
-            panelOpen ? "translate-x-0" : "translate-x-full",
-          )}
-        >
-          <div className="h-full w-[360px] bg-white/95 backdrop-blur-xl shadow-[-4px_0_20px_rgba(0,0,0,0.08)]">
+          {/* ═══ Right-side floating event cards ═══ */}
+          {/* No panel chrome — the cards themselves are the surface, so the map
+              shows through the gaps between them. */}
+          <div
+            className={cn(
+              // Full width on phones — a 320px rail leaves too little map beside
+              // it to be worth keeping.
+              "absolute top-16 right-0 bottom-0 z-10 w-full transition-transform duration-300 ease-out sm:w-[320px]",
+              panelOpen ? "translate-x-0" : "translate-x-full",
+            )}
+          >
             <EventListPanel
-              events={filteredEvents}
-              selectedLocation={selectedLocation}
+              events={panelEvents}
+              locationName={panelEvents[0]?.locationName ?? ""}
+              expandedEventId={detailEventId}
               onLocateEvent={handleLocateEvent}
               onExpandEvent={handleExpandEvent}
-              onClose={() => setPanelOpen(false)}
+              onClose={() => {
+                setPanelOpen(false);
+                setSelectedLocation(null);
+              }}
             />
           </div>
+
+          {/* ═══ Loading overlay ═══ */}
+          {isPending && (
+            <output className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-white/30 backdrop-blur-[2px]">
+              <span className="flex items-center gap-2 rounded-xl border border-forum-border bg-white/95 px-4 py-2 shadow-lg">
+                <span className="size-2 animate-pulse rounded-full bg-forum-cerulean" />
+                <span className="font-dm-sans text-xs font-medium text-forum-dark-gray">
+                  Loading events
+                </span>
+              </span>
+            </output>
+          )}
         </div>
 
-        {/* ═══ Timeline scrubber (bottom, full width) ═══ */}
-        <div className="absolute bottom-0 left-0 right-0 z-10">
+        {/* ═══ Timeline scrubber — a bar beneath the map, not an overlay on it ═══ */}
+        <div className="shrink-0">
           <TimelineScrubber
             days={14}
             eventCountByDate={eventCountByDate}
@@ -200,16 +239,6 @@ export function MapClient({ initialEvents }: MapClientProps) {
             onSelectDate={handleSelectDate}
           />
         </div>
-
-        {/* ═══ Loading overlay ═══ */}
-        {isPending && (
-          <div className="absolute inset-0 bg-white/30 backdrop-blur-[2px] flex items-center justify-center z-20 pointer-events-none">
-            <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/92 backdrop-blur-md shadow-lg border border-forum-border">
-              <div className="w-2 h-2 rounded-full bg-forum-cerulean animate-pulse" />
-              <span className="text-xs font-medium text-forum-dark-gray">Loading events</span>
-            </div>
-          </div>
-        )}
       </div>
 
       {/* ═══ Event detail modal ═══ */}
diff --git a/apps/web/src/app/(app)/orgs/[id]/org-profile-client.tsx b/apps/web/src/app/(app)/orgs/[id]/org-profile-client.tsx
index cc8ccdc..efb66e6 100644
--- a/apps/web/src/app/(app)/orgs/[id]/org-profile-client.tsx
+++ b/apps/web/src/app/(app)/orgs/[id]/org-profile-client.tsx
@@ -10,7 +10,7 @@ import { type OrgDetail, addOfficer, removeOfficer, toggleFollowOrg } from "~/ac
 import { Panel } from "~/components/common/panel";
 import { SearchInput } from "~/components/common/search-input";
 import { EmptyState } from "~/components/common/states";
-import { getCategoryColor } from "~/components/events/event-card";
+import { EventCard } from "~/components/events/event-card";
 import { PageHeading, PageShell, SectionHeading } from "~/components/layout/page-shell";
 import { Button } from "~/components/ui/button";
 
@@ -157,39 +157,22 @@ export function OrgProfileClient({ org }: OrgProfileClientProps) {
         <section className="md:col-span-2">
           <SectionHeading>Upcoming Events</SectionHeading>
           {org.upcomingEvents.length > 0 ? (
-            <div className="flex flex-col gap-3">
-              {org.upcomingEvents.map((event) => {
-                const color = getCategoryColor(event.tags);
-                return (
-                  <Panel
-                    asChild
-                    key={event.id}
-                    size="sm"
-                    className="transition-colors hover:border-forum-cerulean"
-                  >
-                    <Link href={`/events/${event.id}`} className="flex items-center gap-4">
-                      <div
-                        aria-hidden
-                        className="flex size-12 shrink-0 items-center justify-center rounded-lg"
-                        style={{ background: color.bg }}
-                      >
-                        <CalendarDays size={16} style={{ color: color.text }} />
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate font-dm-sans text-sm font-semibold text-black">
-                          {event.title}
-                        </p>
-                        <p className="mt-0.5 font-dm-sans text-xs text-forum-light-gray">
-                          {event.datetime}
-                          <span className="mx-1.5">·</span>
-                          <MapPin size={10} aria-hidden className="-mt-0.5 inline" />{" "}
-                          {event.locationName}
-                        </p>
-                      </div>
-                    </Link>
-                  </Panel>
-                );
-              })}
+            <div className="grid gap-3 sm:grid-cols-2">
+              {org.upcomingEvents.map((event, index) => (
+                <EventCard
+                  key={event.id}
+                  id={event.id}
+                  title={event.title}
+                  datetime={event.datetime}
+                  location={event.locationName}
+                  tags={event.tags}
+                  orgName={org.name}
+                  orgId={org.id}
+                  density="compact"
+                  source="similar"
+                  position={index}
+                />
+              ))}
             </div>
           ) : (
             <EmptyState icon={CalendarDays} title="No upcoming events" />
diff --git a/apps/web/src/app/(app)/settings/settings-client.tsx b/apps/web/src/app/(app)/settings/settings-client.tsx
index 2f02c1d..e3bbff2 100644
--- a/apps/web/src/app/(app)/settings/settings-client.tsx
+++ b/apps/web/src/app/(app)/settings/settings-client.tsx
@@ -11,8 +11,14 @@ import { Field } from "~/components/common/field";
 import { FilterChip } from "~/components/common/filter-chip";
 import { Panel } from "~/components/common/panel";
 import { SearchInput } from "~/components/common/search-input";
-import { PageHeading, PageShell, SectionHeading } from "~/components/layout/page-shell";
+import {
+  PageHeading,
+  PageShell,
+  SectionHeading,
+  TOP_BAR_CLEARANCE,
+} from "~/components/layout/page-shell";
 import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
 
 const INTEREST_TAGS = [
   { id: "free food", label: "free food" },
@@ -150,8 +156,8 @@ export function SettingsClient({ profile, friends }: SettingsClientProps) {
 
   return (
     <PageShell width="wide">
-      {/* Top bar — pr reserves space so buttons don't overlap the TopBar notification/avatar */}
-      <div className="mb-5 flex items-center justify-between pr-[100px]">
+      {/* Reserves space so these buttons don't collide with the floating TopBar. */}
+      <div className={cn("mb-5 flex items-center justify-between", TOP_BAR_CLEARANCE)}>
         <Button variant="quiet" size="sm" onClick={() => router.back()}>
           <ArrowLeft />
           Back
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index a2be016..bc9a232 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -42,7 +42,7 @@ export default function LandingPage() {
       {/* ═══ HERO SECTION ═══ */}
       <section
         id="hero"
-        className="relative px-15 pt-2.5 pb-25 min-h-screen bg-forum-yellow-10 overflow-hidden flex flex-col justify-end"
+        className="relative px-6 sm:px-15 pt-2.5 pb-25 min-h-screen bg-forum-yellow-10 overflow-hidden flex flex-col justify-end"
       >
         {/* Geometric background shapes — large, soft, overlapping */}
         <div className=" inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
@@ -70,7 +70,7 @@ export default function LandingPage() {
             Campus Events Platform — Princeton
           </p>
 
-          <h1 className="font-serif text-[72px] font-semibold leading-tight text-black mb-7">
+          <h1 className="font-serif text-[40px] sm:text-[56px] md:text-[72px] font-semibold leading-tight text-black mb-7">
             Campus events,
             <br />
             <span className="text-forum-coral italic font-bold">curated.</span>
@@ -101,7 +101,7 @@ export default function LandingPage() {
       {/* ═══ FOR EVENT ATTENDEES ═══ */}
       <section
         id="attendees"
-        className="flex flex-col md:flex-row bg-forum-turquoise px-8 md:px-30 md:py-20 gap-10 md:gap-20 min-h-[200vh] md:min-h-screen"
+        className="flex flex-col md:flex-row bg-forum-turquoise px-6 md:px-30 md:py-20 gap-10 md:gap-20 min-h-screen"
       >
         {" "}
         {/* Left column */}
@@ -117,7 +117,7 @@ export default function LandingPage() {
           {/* Quote */}
           <div className="flex flex-col gap-4">
             <blockquote className="flex flex-row font-dm-sans text-[20px] md:text-[24px] text-forum-black leading-tight">
-              <p className="font-serif italic text-[80px] md:text-[100px] leading-6 mr-2">
+              <p className="font-serif italic text-[56px] sm:text-[80px] md:text-[100px] leading-none mr-2">
                 &ldquo;
               </p>
               <p>
@@ -146,7 +146,7 @@ export default function LandingPage() {
                 For Event Attendees
               </p>
             </div>
-            <h2 className="font-serif text-[36px] md:text-[48px] font-medium leading-tight text-black text-right">
+            <h2 className="font-serif text-[28px] sm:text-[36px] md:text-[48px] font-medium leading-tight text-black text-right">
               Everything you need to never miss{" "}
               <span className="text-forum-cerulean italic font-bold">a thing.</span>
             </h2>
@@ -207,13 +207,13 @@ export default function LandingPage() {
         </div>
 
         {/* Right — deep coral, join CTA + FORUM wordmark */}
-        <div className="flex-1 bg-forum-pink px-14 py-16 flex flex-col justify-between overflow-hidden relative min-h-screen">
+        <div className="flex-1 bg-forum-pink px-6 py-12 sm:px-14 sm:py-16 flex flex-col justify-between overflow-hidden relative min-h-screen">
           {/* Warm yellow glow blob */}
           <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/4 w-72 h-72 rounded-full bg-forum-yellow opacity-50 blur-xl pointer-events-none" />
 
           {/* Centered text + button */}
           <div className="relative z-10 flex flex-col items-center text-center gap-6 mt-16 self-center">
-            <h2 className="font-serif text-[36px] md:text-[42px] leading-tight text-black">
+            <h2 className="font-serif text-[26px] sm:text-[36px] md:text-[42px] leading-tight text-black">
               Whether you&apos;re an attendee or an organizer,{" "}
               <span className="italic font-bold text-forum-coral">The Forum</span> is the best place
               for <span className="italic font-bold">you.</span>
@@ -231,9 +231,14 @@ export default function LandingPage() {
             </form>
           </div>
 
-          {/* FORUM wordmark at bottom */}
-          <div className="absolute bottom-0 z-10 mt-auto overflow-hidden">
-            <h2 className="font-kalnia text-[130px] md:text-[160px] font-bold tracking-[0.06em] text-forum-coral leading-none select-none -mb-6">
+          {/*
+            FORUM wordmark. Scales with the viewport — at a fixed 130px it was
+            wider than a phone screen — and the negative bottom margin is gone:
+            combined with the parent's `overflow-hidden` it was clipping the
+            bottom of the letterforms.
+          */}
+          <div className="absolute inset-x-0 bottom-0 z-10 flex justify-center pb-2">
+            <h2 className="select-none whitespace-nowrap font-kalnia text-[28vw] font-bold leading-none tracking-[0.06em] text-forum-coral sm:text-[24vw] md:text-[130px] lg:text-[160px]">
               FORUM
             </h2>
           </div>
@@ -241,7 +246,7 @@ export default function LandingPage() {
       </section>
 
       {/* ═══ FOOTER ═══ */}
-      <footer className="bg-white px-15 py-5 border-t border-gray-100">
+      <footer className="bg-white px-6 sm:px-15 py-5 border-t border-forum-medium-gray">
         <p className="text-[11px] text-forum-light-gray">
           Built for Princeton students — The Forum by TigerApps
         </p>
diff --git a/apps/web/src/components/common/search-input.tsx b/apps/web/src/components/common/search-input.tsx
index 0649daa..16ede23 100644
--- a/apps/web/src/components/common/search-input.tsx
+++ b/apps/web/src/components/common/search-input.tsx
@@ -24,7 +24,10 @@ export function SearchInput({
   return (
     <div
       className={cn(
-        "flex h-[40px] items-center gap-2 rounded-lg border border-forum-border bg-white px-3.5",
+        // 48px tall: more breathing room above and below the text, and it clears
+        // the 44px minimum touch target for phones. `px-5` keeps the icon off
+        // the border and `gap-3` keeps the placeholder off the icon.
+        "flex h-12 items-center gap-3 rounded-lg border border-forum-border bg-white px-5",
         "transition-colors focus-within:border-forum-cerulean",
         className,
       )}
diff --git a/apps/web/src/components/common/states.tsx b/apps/web/src/components/common/states.tsx
index 83179b4..483526b 100644
--- a/apps/web/src/components/common/states.tsx
+++ b/apps/web/src/components/common/states.tsx
@@ -123,9 +123,10 @@ export function EventCardSkeleton({ className, ...props }: React.ComponentProps<
   );
 }
 
-export function EventCardSkeletonList({ count = 3 }: { count?: number }) {
+/** Mirrors the Explore feed's two-column grid so loading doesn't reflow the page. */
+export function EventCardSkeletonList({ count = 4 }: { count?: number }) {
   return (
-    <output className="flex flex-col gap-5">
+    <output className="grid gap-5 sm:grid-cols-2">
       <span className="sr-only">Loading events…</span>
       {Array.from({ length: count }, (_, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length placeholder list
diff --git a/apps/web/src/components/events/attendees-dialog.tsx b/apps/web/src/components/events/attendees-dialog.tsx
new file mode 100644
index 0000000..26717e8
--- /dev/null
+++ b/apps/web/src/components/events/attendees-dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { Users } from "lucide-react";
+import { useState } from "react";
+import { EmptyState } from "~/components/common/states";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { cn } from "~/lib/utils";
+
+export interface Attendee {
+  id: string;
+  displayName: string;
+  avatarUrl?: string | null;
+}
+
+/**
+ * "N attending" — click to see who.
+ *
+ * The count was previously plain text, so the attendee data already being
+ * fetched had nowhere to surface beyond a truncated avatar stack.
+ */
+export function AttendeesDialog({
+  attendees,
+  count,
+  friendIds,
+  className,
+}: {
+  attendees: Attendee[];
+  /** Total RSVP count, which can exceed the attendees actually loaded. */
+  count: number;
+  /** Ids to badge as friends, so you can spot people you know. */
+  friendIds?: Set<string>;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const label = `${count} attending`;
+
+  // Nothing to reveal — render plain text rather than a button that opens an
+  // empty dialog.
+  if (attendees.length === 0) {
+    return (
+      <span className={cn("font-dm-sans text-[14px] font-bold text-black", className)}>
+        {label}
+      </span>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "font-dm-sans text-[14px] font-bold text-black underline-offset-2 hover:underline",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean",
+            className,
+          )}
+        >
+          {label}
+        </button>
+      </DialogTrigger>
+      <DialogContent className="max-h-[70vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Who&apos;s attending</DialogTitle>
+          <DialogDescription>
+            {count} {count === 1 ? "person has" : "people have"} RSVP&apos;d to this event.
+          </DialogDescription>
+        </DialogHeader>
+
+        {attendees.length === 0 ? (
+          <EmptyState icon={Users} title="No one yet" />
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {attendees.map((person) => (
+              <li key={person.id} className="flex items-center gap-3 rounded-lg px-1 py-1.5">
+                {person.avatarUrl ? (
+                  <img
+                    src={person.avatarUrl}
+                    alt=""
+                    className="size-8 shrink-0 rounded-full object-cover"
+                  />
+                ) : (
+                  <span
+                    aria-hidden
+                    className="flex size-8 shrink-0 items-center justify-center rounded-full bg-forum-turquoise/40 font-dm-sans text-[12px] font-bold text-black"
+                  >
+                    {person.displayName[0]?.toUpperCase()}
+                  </span>
+                )}
+                <span className="min-w-0 flex-1 truncate font-dm-sans text-[14px] text-black">
+                  {person.displayName}
+                </span>
+                {friendIds?.has(person.id) && (
+                  <span className="shrink-0 rounded-full bg-forum-turquoise-20 px-2 py-0.5 font-dm-sans text-[11px] font-bold text-forum-cerulean">
+                    Friend
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/*
+          The attendee list can be shorter than the RSVP count — the server
+          returns a capped sample — so say so instead of silently under-reporting.
+        */}
+        {count > attendees.length && (
+          <p className="font-dm-sans text-[12px] text-forum-light-gray">
+            and {count - attendees.length} more
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/events/event-card.tsx b/apps/web/src/components/events/event-card.tsx
index dde33eb..46de7cf 100644
--- a/apps/web/src/components/events/event-card.tsx
+++ b/apps/web/src/components/events/event-card.tsx
@@ -1,11 +1,27 @@
 "use client";
 
-import { Bookmark, BookmarkCheck, Clock, MapPin, Maximize2, Share2 } from "lucide-react";
+import {
+  Bookmark,
+  BookmarkCheck,
+  Check,
+  Clock,
+  Edit3,
+  Eye,
+  EyeOff,
+  MapPin,
+  Maximize2,
+  Plus,
+  Share2,
+  Trash2,
+} from "lucide-react";
 import Link from "next/link";
 import { useEffect, useRef } from "react";
+import { toast } from "sonner";
 import { logInteraction } from "~/actions/interactions";
+import { AttendeesDialog } from "~/components/events/attendees-dialog";
 import { AvatarStack } from "~/components/social/avatar-stack";
 import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
 
 export const CATEGORY_COLORS: Record<string, { bg: string; accent: string; text: string }> = {
   "visual arts": { bg: "rgba(255,156,133,0.1)", accent: "#fb923c", text: "#9a3412" },
@@ -22,6 +38,15 @@ export const CATEGORY_COLORS: Record<string, { bg: string; accent: string; text:
 
 const DEFAULT_COLOR = { bg: "rgba(255,156,133,0.1)", accent: "#D9D9D9", text: "#585858" };
 
+/**
+ * Hover wash for the card's utility icons (save, share, hide, open).
+ *
+ * Those glyphs are coral, and the Button `ghost` variant hovers to `--accent`
+ * — full-strength turquoise (#a2eff0) — which clashed behind them. A 25% coral
+ * tint keeps the hover in the same family as the icon it sits under.
+ */
+const UTILITY_HOVER = "hover:bg-forum-coral-light";
+
 export function getCategoryColor(tags: string[]) {
   for (const tag of tags) {
     const key = tag.toLowerCase();
@@ -41,20 +66,61 @@ export interface EventCardProps {
   description?: string | null;
   tags: string[];
   flyerUrl?: string | null;
-  rsvpCount: number;
-  friendsAttending: { id: string; displayName: string; avatarUrl?: string | null }[];
-  isSaved: boolean;
+  rsvpCount?: number;
+  friendsAttending?: { id: string; displayName: string; avatarUrl?: string | null }[];
+  /** Everyone attending — shown as an avatar stack + "N attending". */
+  attendees?: { id: string; displayName: string; avatarUrl?: string | null }[];
+  isSaved?: boolean;
   isRsvped?: boolean;
-  onSaveToggle?: () => void;
-  onRsvpToggle?: () => void;
+  /*
+   * Actions render only when a handler is supplied.
+   *
+   * These may be async. The card awaits the returned promise and only
+   * announces success once it resolves, so a rejected save/RSVP shows the
+   * owner's error toast alone instead of a success toast beside it.
+   */
+  onSaveToggle?: () => void | Promise<void>;
+  onRsvpToggle?: () => void | Promise<void>;
   onShare?: () => void;
   onHide?: () => void;
+  /** When true the card collapses to a stub that can be restored. */
+  isHidden?: boolean;
+  onUnhide?: () => void;
+  /** Extra action, e.g. the map's "Show on map". */
+  onLocate?: () => void;
+  /**
+   * Open the event in place instead of navigating to its page. The map uses
+   * this so opening a card doesn't throw you off the map.
+   */
+  onOpen?: () => void;
+  /**
+   * `default` is the full feed card. `compact` drops the description and the
+   * friends sentence for narrow columns — the map's 320px rail and an org
+   * profile's event list. `wide` is the full-width row used by My Events.
+   */
+  density?: "default" | "compact" | "wide";
+  /** Google Calendar link; renders the Calendar action when supplied. */
+  calendarUrl?: string;
+  /**
+   * Owner controls. Supplied only for events the viewer created, so the
+   * card itself does no permission checking.
+   */
+  editHref?: string;
+  onDelete?: () => void;
   /** Where this card is displayed — logged with interactions */
   source?: "feed" | "search" | "map" | "similar" | "notification";
   /** Position in the list — for position bias correction */
   position?: number;
+  className?: string;
 }
 
+/**
+ * The event card, used on Explore, My Events, the map rail and org profiles.
+ *
+ * Each of those surfaces previously had its own card component, so the same
+ * event rendered with a different title size, tag colour and metadata order
+ * depending on where you saw it. Density is the only thing that varies now.
+ */
 export function EventCard({
   id,
   title,
@@ -65,30 +131,40 @@ export function EventCard({
   location,
   description,
   tags,
-  flyerUrl,
   rsvpCount,
-  friendsAttending,
+  friendsAttending = [],
+  attendees = [],
   isSaved,
   isRsvped,
   onSaveToggle,
   onRsvpToggle,
   onShare,
   onHide,
+  isHidden = false,
+  onUnhide,
+  onLocate,
+  onOpen,
+  density = "default",
+  calendarUrl,
+  editHref,
+  onDelete,
   source = "feed",
   position,
+  className,
 }: EventCardProps) {
   const cardRef = useRef<HTMLDivElement>(null);
+  const compact = density === "compact";
+  const wide = density === "wide";
+
+  /*
+   * Ingested events often have no location, and the server substitutes the
+   * string "TBD" for a missing one — rendering that verbatim next to a map pin
+   * reads as a bug. Treat it as absent and drop the row instead.
+   */
+  const hasLocation = Boolean(location) && location !== "TBD";
 
   const displayedFriendNames = friendsAttending.slice(0, 2).map((friend) => friend.displayName);
   const remainingFriends = friendsAttending.length - displayedFriendNames.length;
-  const friendsText =
-    displayedFriendNames.length === 0
-      ? ""
-      : displayedFriendNames.length === 1
-        ? `${displayedFriendNames[0]} is also going to this event.`
-        : displayedFriendNames.length === 2 && remainingFriends === 0
-          ? `${displayedFriendNames[0]} and ${displayedFriendNames[1]} are also going to this event.`
-          : `${displayedFriendNames.join(", ")} + ${remainingFriends} more are also going to this event.`;
 
   // Track view — IntersectionObserver fires after 1s of visibility
   useEffect(() => {
@@ -115,185 +191,584 @@ export function EventCard({
     logInteraction({ itemId: id, interactionType: "click", metadata: { source, position } });
   };
 
-  return (
-    <div
-      ref={cardRef}
-      /* Width is owned by the parent list/grid — the card fills its slot so it
-         renders identically on Explore, My Events, Map and org pages. */
-      className="card group relative flex w-full flex-col gap-0.5 overflow-hidden rounded-xl px-5 py-5"
-    >
-      {/* Expand, Save & Share */}
-      <div className="flex flex-row justify-between">
-        <div className="flex items-center gap-0.5">
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label={isSaved ? `Unsave ${title}` : `Save ${title}`}
-            aria-pressed={isSaved}
-            onClick={(e) => {
-              e.preventDefault();
-              logInteraction({
-                itemId: id,
-                interactionType: "save",
-                metadata: { source, position },
-              });
-              onSaveToggle?.();
-            }}
-          >
-            {isSaved ? (
-              <BookmarkCheck className="text-forum-cerulean" />
-            ) : (
-              <Bookmark className="text-forum-dark-gray" />
-            )}
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label={`Share ${title}`}
-            onClick={(e) => {
-              e.preventDefault();
-              logInteraction({
-                itemId: id,
-                interactionType: "share",
-                metadata: { source, position },
-              });
-              onShare?.();
-            }}
-          >
-            <Share2 className="text-forum-dark-gray" />
+  const hasUtilityRow = Boolean(onSaveToggle || onShare || onHide);
+
+  /*
+   * Hidden events collapse to a stub rather than disappearing. Removing the
+   * card outright left no way back short of a page reload, so a mis-click was
+   * unrecoverable.
+   */
+  if (isHidden) {
+    return (
+      <div
+        ref={cardRef}
+        className={cn(
+          "card flex w-full items-center justify-between gap-3 rounded-xl px-5 py-3",
+          className,
+        )}
+      >
+        <p className="min-w-0 font-dm-sans text-[13px] text-forum-light-gray">
+          Hidden — <span className="truncate font-medium text-forum-dark-gray">{title}</span>
+        </p>
+        {onUnhide && (
+          <Button variant="quiet" size="sm" className="shrink-0" onClick={onUnhide}>
+            <Eye />
+            Unhide
           </Button>
-        </div>
-        {/* Expand button */}
-        <Button asChild variant="ghost" size="icon-sm" aria-label={`Open ${title}`}>
-          <Link href={`/events/${id}`} onClick={trackClick}>
-            <Maximize2 className="text-forum-dark-gray" />
-          </Link>
-        </Button>
+        )}
       </div>
-      <div className="flex py-5 gap-3">
-        {/* Content */}
-        <div className="flex flex-col gap-1.5 flex-1 min-w-0">
-          {/* Org */}
+    );
+  }
+
+  /*
+   * Wide layout: a full-width row for My Events, where each list is a single
+   * column and there's horizontal room to put the details and the blurb side
+   * by side, with the actions gathered in the header.
+   */
+  if (wide) {
+    return (
+      <div ref={cardRef} className={cn("card relative w-full rounded-xl px-5 py-4", className)}>
+        {/* Header: org · calendar/RSVP · utilities */}
+        <div className="mb-3 flex flex-wrap items-center gap-3">
           {orgName && (
-            <div className="flex items-center gap-3">
-              <div className="w-[24px] h-[24px] rounded-[4px] border-[2px] border-forum-medium-gray overflow-hidden shrink-0 bg-gray-100">
-                {orgLogoUrl ? (
-                  <img src={orgLogoUrl} alt={orgName} className="w-full h-full object-cover" />
-                ) : (
-                  <div className="w-full h-full bg-forum-turquoise/30" />
-                )}
+            <div className="flex min-w-0 items-center gap-2">
+              <div className="size-7 shrink-0 overflow-hidden rounded border-2 border-forum-medium-gray bg-forum-turquoise/30">
+                {orgLogoUrl && <img src={orgLogoUrl} alt="" className="size-full object-cover" />}
               </div>
-              <p className="text-[12px] text-forum-dark-gray">
-                <span className="font-medium">from </span>
-                {orgId ? (
-                  <Link
-                    href={`/orgs/${orgId}`}
-                    onClick={(e) => e.stopPropagation()}
-                    className="font-bold hover:text-forum-cerulean transition-colors duration-300ms"
-                  >
-                    {orgName}
-                  </Link>
-                ) : (
-                  <span className="font-bold">{orgName}</span>
-                )}
-              </p>
+              <span className="truncate font-dm-sans text-[14px] font-bold text-black">
+                {orgName}
+              </span>
             </div>
           )}
 
-          {/* Title */}
-          <Link href={`/events/${id}`} onClick={trackClick}>
-            <h3 className="font-serif text-[18px] leading-[1.2] text-black line-clamp-2 hover:underline">
-              {title}
-            </h3>
-          </Link>
+          {/* Full-width action row on phones; pushed right once there's room */}
+          <div className="flex w-full flex-wrap items-center gap-2 sm:ml-auto sm:w-auto">
+            {calendarUrl && (
+              <Button asChild variant="outline" size="sm" className="rounded-full">
+                <a href={calendarUrl} target="_blank" rel="noopener noreferrer">
+                  <Plus />
+                  Calendar
+                </a>
+              </Button>
+            )}
+            {onRsvpToggle && (
+              <Button
+                variant={isRsvped ? "cerulean" : "coral"}
+                size="sm"
+                aria-pressed={isRsvped}
+                className="rounded-full px-6"
+                onClick={async () => {
+                  logInteraction({
+                    itemId: id,
+                    interactionType: "rsvp",
+                    metadata: { source, position },
+                  });
+                  const wasRsvped = isRsvped;
+                  try {
+                    await onRsvpToggle();
+                  } catch {
+                    return; // the owner already surfaced the failure
+                  }
+                  if (wasRsvped) toast(`Removed your RSVP to ${title}`);
+                  else toast.success(`You're going to ${title}`);
+                }}
+              >
+                {isRsvped ? (
+                  <>
+                    <Check />
+                    RSVP'd
+                  </>
+                ) : (
+                  "RSVP"
+                )}
+              </Button>
+            )}
 
-          {/* Location & Time */}
-          <div className="flex flex-col gap-1">
-            <div className="flex items-center gap-1">
-              <MapPin size={11} className="text-forum-dark-gray shrink-0" />
-              <span className="text-[12px] text-forum-dark-gray">{location}</span>
-            </div>
-            <div className="flex items-center gap-1">
-              <Clock size={11} className="text-forum-dark-gray shrink-0" />
-              <span className="text-[12px] text-forum-dark-gray">{datetime}</span>
+            <div className="flex items-center gap-0.5">
+              {onSaveToggle && (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className={UTILITY_HOVER}
+                  aria-label={isSaved ? `Unsave ${title}` : `Save ${title}`}
+                  aria-pressed={isSaved}
+                  onClick={async () => {
+                    const wasSaved = isSaved;
+                    try {
+                      await onSaveToggle();
+                    } catch {
+                      return;
+                    }
+                    toast(wasSaved ? `Removed ${title} from saved` : `Saved ${title}`);
+                  }}
+                >
+                  {isSaved ? (
+                    <BookmarkCheck className="text-forum-coral" />
+                  ) : (
+                    <Bookmark className="text-forum-coral" />
+                  )}
+                </Button>
+              )}
+              {onShare && (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className={UTILITY_HOVER}
+                  aria-label={`Share ${title}`}
+                  onClick={onShare}
+                >
+                  <Share2 className="text-forum-coral" />
+                </Button>
+              )}
+              <Button
+                asChild
+                variant="ghost"
+                size="icon-sm"
+                className={UTILITY_HOVER}
+                aria-label={`Open ${title}`}
+              >
+                <Link href={`/events/${id}`} onClick={trackClick}>
+                  <Maximize2 className="text-forum-coral" />
+                </Link>
+              </Button>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Bottom: Tags + RSVP */}
-      <div className="flex flex-col gap-3">
-        {/* Tags */}
-        <div className="flex flex-wrap">
-          <div className="flex items-start gap-1.5">
-            {tags.slice(0, 3).map((tag) => (
-              <span
-                key={tag}
-                className="rounded-[10px] bg-forum-yellow-50 px-[8px] py-[1px] font-dm-sans text-[12px] text-black"
-              >
-                {tag}
+        {/* Body: details left, social + blurb right */}
+        <div className="grid gap-x-8 gap-y-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
+          <div className="min-w-0">
+            <Link href={`/events/${id}`} onClick={trackClick}>
+              <h3 className="font-serif text-[22px] leading-tight text-black line-clamp-2 hover:underline">
+                {title}
+              </h3>
+            </Link>
+            <div className="mt-1.5 flex flex-col gap-1">
+              {hasLocation && (
+                <span className="flex items-center gap-1.5 font-dm-sans text-[13px] text-forum-dark-gray">
+                  <MapPin size={12} aria-hidden className="shrink-0 text-forum-light-gray" />
+                  {location}
+                </span>
+              )}
+              <span className="flex items-center gap-1.5 font-dm-sans text-[13px] text-forum-dark-gray">
+                <Clock size={12} aria-hidden className="shrink-0 text-forum-light-gray" />
+                {datetime}
               </span>
-            ))}
+            </div>
+            {tags.length > 0 && (
+              <div className="mt-2.5 flex flex-wrap gap-2">
+                {tags.slice(0, 3).map((tag, i) => (
+                  <span
+                    key={tag}
+                    className={cn(
+                      "rounded-full px-2.5 py-0.5 font-dm-sans text-[13px] text-black",
+                      i === 0 ? "bg-forum-yellow-50" : "bg-forum-turquoise-50",
+                    )}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
           </div>
-        </div>
 
-        {/* Friends Attending */}
-        <div className="flex flex-row items-center gap-2">
-          {friendsAttending.length > 0 && (
-            <div className="ml-1">
-              <AvatarStack users={friendsAttending} size={30} />
-            </div>
-          )}
-          {friendsText ? (
-            <p className="text-[12px] text-forum-dark-gray mt-2 leading-tight">
-              {displayedFriendNames.length > 0 && (
-                <>
+          <div className="min-w-0">
+            {friendsAttending.length > 0 && (
+              <div className="mb-1.5 flex items-start gap-2">
+                <AvatarStack users={friendsAttending} size={28} max={3} />
+                <p className="font-dm-sans text-[13px] leading-tight text-forum-dark-gray">
                   <span className="font-bold text-forum-coral">
-                    {displayedFriendNames.join(
-                      displayedFriendNames.length === 2 && remainingFriends === 0 ? " and " : ", ",
-                    )}
+                    {displayedFriendNames.join(", ")}
                   </span>
                   {remainingFriends > 0 && (
-                    <span className="text-forum-dark-gray"> + {remainingFriends} more</span>
-                  )}
-                  <span className="text-forum-dark-gray"> are also going to this event.</span>
-                </>
-              )}
-            </p>
-          ) : null}
-        </div>
-
-        {/* Description */}
-        <div>
-          {description && (
-            <div className="overflow-hidden">
-              <p className="text-[12px] text-black font-dm-sans leading-relaxed line-clamp-3">
+                    <span className="font-bold text-forum-coral"> + {remainingFriends} other</span>
+                  )}{" "}
+                  added this event to their calendar!
+                </p>
+              </div>
+            )}
+            {description && (
+              <p className="font-dm-sans text-[13px] leading-relaxed text-forum-dark-gray line-clamp-3">
                 {description}
               </p>
-            </div>
-          )}
+            )}
+            <Link
+              href={`/events/${id}`}
+              onClick={trackClick}
+              className="mt-1 inline-block font-dm-sans text-[13px] font-medium text-forum-coral hover:underline"
+            >
+              See Details
+            </Link>
+          </div>
         </div>
 
-        {/* RSVP */}
-        <div className="flex justify-end">
+        {/*
+          Owner controls, pinned to the card's bottom-right. Only rendered for
+          events you created — the card does no permission checking of its own.
+        */}
+        {(editHref || onDelete) && (
+          <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
+            {editHref && (
+              <Button asChild variant="outline" size="sm" className="rounded-full">
+                <Link href={editHref}>
+                  <Edit3 />
+                  Edit
+                </Link>
+              </Button>
+            )}
+            {onDelete && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="rounded-full border-forum-coral/40 text-forum-coral hover:bg-forum-coral/5"
+                onClick={onDelete}
+              >
+                <Trash2 />
+                Delete
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={cardRef}
+      /* Width is owned by the parent list/grid — the card fills its slot so it
+         renders identically on Explore, My Events, Map and org pages. */
+      className={cn(
+        "card group relative flex w-full flex-col overflow-hidden rounded-xl",
+        compact ? "gap-2 p-3" : "gap-0.5 px-5 py-5",
+        className,
+      )}
+    >
+      {/*
+        Save, Share, Hide & Expand.
+
+        The icon buttons are 32px boxes around a 16px glyph, so they carry 8px
+        of internal padding. The negative margins cancel that, putting the
+        glyphs on the same left/right edges as the text below.
+      */}
+      {hasUtilityRow && (
+        <div className="-mx-2 flex flex-row justify-between">
+          <div className="flex items-center gap-0.5">
+            {onSaveToggle && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className={UTILITY_HOVER}
+                aria-label={isSaved ? `Unsave ${title}` : `Save ${title}`}
+                aria-pressed={isSaved}
+                onClick={async (e) => {
+                  e.preventDefault();
+                  logInteraction({
+                    itemId: id,
+                    interactionType: "save",
+                    metadata: { source, position },
+                  });
+                  const wasSaved = isSaved;
+                  try {
+                    await onSaveToggle();
+                  } catch {
+                    return;
+                  }
+                  toast(wasSaved ? `Removed ${title} from saved` : `Saved ${title}`);
+                }}
+              >
+                {isSaved ? (
+                  <BookmarkCheck className="text-forum-coral" />
+                ) : (
+                  <Bookmark className="text-forum-coral" />
+                )}
+              </Button>
+            )}
+            {onShare && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className={UTILITY_HOVER}
+                aria-label={`Share ${title}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  logInteraction({
+                    itemId: id,
+                    interactionType: "share",
+                    metadata: { source, position },
+                  });
+                  onShare();
+                }}
+              >
+                <Share2 className="text-forum-coral" />
+              </Button>
+            )}
+            {/* Hide was previously an unreachable prop — no control ever called it. */}
+            {onHide && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className={UTILITY_HOVER}
+                aria-label={`Hide ${title}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  logInteraction({
+                    itemId: id,
+                    interactionType: "hide",
+                    metadata: { source, position },
+                  });
+                  onHide();
+                  toast(`Hid ${title}`, { description: "Use Unhide to bring it back." });
+                }}
+              >
+                <EyeOff className="text-forum-coral" />
+              </Button>
+            )}
+          </div>
           <Button
-            variant={isRsvped ? "solid" : "coral"}
-            size="sm"
-            aria-pressed={isRsvped}
-            onClick={(e) => {
-              e.preventDefault();
-              logInteraction({
-                itemId: id,
-                interactionType: "rsvp",
-                metadata: { source, position },
-              });
-              onRsvpToggle?.();
-            }}
+            asChild
+            variant="ghost"
+            size="icon-sm"
+            className={UTILITY_HOVER}
+            aria-label={`Open ${title}`}
           >
-            {isRsvped ? "RSVP'd" : "RSVP"}
+            <Link href={`/events/${id}`} onClick={trackClick}>
+              <Maximize2 className="text-forum-coral" />
+            </Link>
           </Button>
         </div>
+      )}
+
+      {/* Org */}
+      {orgName && (
+        <div className={cn("flex items-center gap-2", !compact && "mt-4")}>
+          <div className="size-6 shrink-0 overflow-hidden rounded border-2 border-forum-medium-gray bg-forum-turquoise/30">
+            {orgLogoUrl && <img src={orgLogoUrl} alt="" className="size-full object-cover" />}
+          </div>
+          <p className="min-w-0 truncate font-dm-sans text-[12px] text-forum-dark-gray">
+            {orgId ? (
+              <Link
+                href={`/orgs/${orgId}`}
+                onClick={(e) => e.stopPropagation()}
+                className="font-bold transition-colors hover:text-forum-cerulean"
+              >
+                {orgName}
+              </Link>
+            ) : (
+              <span className="font-bold">{orgName}</span>
+            )}
+          </p>
+        </div>
+      )}
+
+      {/* Title — opens in place when `onOpen` is given, otherwise navigates */}
+      {onOpen ? (
+        <button
+          type="button"
+          onClick={() => {
+            trackClick();
+            onOpen();
+          }}
+          className="mt-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean"
+        >
+          <h3
+            className={cn(
+              "font-serif leading-[1.2] text-black line-clamp-2 hover:underline",
+              compact ? "text-[17px] font-bold" : "text-[18px]",
+            )}
+          >
+            {title}
+          </h3>
+        </button>
+      ) : (
+        <Link href={`/events/${id}`} onClick={trackClick} className="mt-1">
+          <h3
+            className={cn(
+              "font-serif leading-[1.2] text-black line-clamp-2 hover:underline",
+              compact ? "text-[17px] font-bold" : "text-[18px]",
+            )}
+          >
+            {title}
+          </h3>
+        </Link>
+      )}
+
+      {/* Location & Time */}
+      <div className="mt-1 flex flex-col gap-1">
+        {hasLocation && (
+          <div className="flex items-center gap-1.5">
+            <MapPin size={11} aria-hidden className="shrink-0 text-forum-light-gray" />
+            <span className="truncate font-dm-sans text-[12px] text-forum-dark-gray">
+              {location}
+            </span>
+          </div>
+        )}
+        <div className="flex items-center gap-1.5">
+          <Clock size={11} aria-hidden className="shrink-0 text-forum-light-gray" />
+          <span className="font-dm-sans text-[12px] text-forum-dark-gray">{datetime}</span>
+        </div>
       </div>
+
+      {/*
+        Tags. Compact cards stack them vertically and leave a right-hand gutter
+        so the corner avatars never sit on top of a label.
+      */}
+      {tags.length > 0 && (
+        <div
+          className={cn(
+            "mt-2.5 flex gap-1.5",
+            compact
+              ? cn("flex-col items-start", friendsAttending.length > 0 && "pr-20")
+              : "flex-wrap",
+          )}
+        >
+          {tags.slice(0, compact ? 2 : 3).map((tag, i) => (
+            <span
+              key={tag}
+              className={cn(
+                "rounded-[10px] px-2 py-px font-dm-sans text-[12px] text-black",
+                (compact ? i === 1 : i > 0) ? "bg-forum-turquoise-50" : "bg-forum-yellow-50",
+              )}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Friends attending — a corner cluster on compact cards, an inline row elsewhere */}
+      {friendsAttending.length > 0 &&
+        (compact ? (
+          <div className="pointer-events-none absolute right-3 bottom-3">
+            <AvatarStack users={friendsAttending} size={34} max={3} />
+          </div>
+        ) : (
+          <div className="mt-2.5 flex flex-row items-center gap-2">
+            <AvatarStack users={friendsAttending} size={30} max={3} />
+            <p className="font-dm-sans text-[12px] leading-tight text-forum-dark-gray">
+              <span className="font-bold text-forum-coral">
+                {displayedFriendNames.join(", ")}
+                {remainingFriends > 0 && ` + ${remainingFriends} other`}
+              </span>{" "}
+              added this event to their calendar!
+            </p>
+          </div>
+        ))}
+
+      {/* Description — full card only. Clamped to the mock's three lines, with
+          "See Details" carrying the rest. */}
+      {!compact && description && (
+        <>
+          <p className="mt-2.5 font-dm-sans text-[12px] leading-relaxed text-forum-dark-gray line-clamp-3">
+            {description}
+          </p>
+          <Link
+            href={`/events/${id}`}
+            onClick={trackClick}
+            className="mt-1 self-start font-dm-sans text-[12px] font-medium text-forum-coral hover:underline"
+          >
+            See Details
+          </Link>
+        </>
+      )}
+
+      {/* Footer actions — right gutter keeps clear of the corner avatar cluster */}
+      {(onRsvpToggle || onLocate || calendarUrl) && (
+        <div
+          /* `mt-auto` pins the actions to the card's bottom edge, so RSVP
+             buttons line up across a grid row even when one card's blurb is
+             shorter than its neighbour's. No effect where cards size to their
+             content, as in the map rail. */
+          className={cn(
+            "mt-auto flex flex-wrap items-center gap-x-3 gap-y-2 pt-3",
+            compact && friendsAttending.length > 0 && "pr-20",
+          )}
+        >
+          {onLocate ? (
+            <button
+              type="button"
+              onClick={onLocate}
+              className="flex items-center gap-1 font-dm-sans text-[11px] font-medium text-forum-cerulean hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean"
+            >
+              <MapPin size={10} aria-hidden />
+              Show on map
+            </button>
+          ) : (
+            /* Avatar stack + "N attending", clickable to see the full list. */
+            (attendees.length > 0 || Boolean(rsvpCount)) && (
+              <div className="flex min-w-0 items-center gap-2">
+                {attendees.length > 0 && <AvatarStack users={attendees} size={24} max={3} />}
+                {rsvpCount ? (
+                  <AttendeesDialog
+                    attendees={attendees}
+                    count={rsvpCount}
+                    friendIds={new Set(friendsAttending.map((f) => f.id))}
+                    /* Sized to the card's own metadata scale — 14px bold black
+                       shouted over the title's own details — and kept on one
+                       line, which is what wrapped to "4 / attending". */
+                    className="whitespace-nowrap text-[12px] font-medium text-forum-dark-gray"
+                  />
+                ) : null}
+              </div>
+            )
+          )}
+
+          {/* Calendar + RSVP, gathered at the card's bottom-right as in the mock. */}
+          <div className="ml-auto flex items-center gap-2">
+            {calendarUrl && (
+              <Button
+                asChild
+                variant="outline"
+                size="sm"
+                className="text-[11px] font-bold uppercase tracking-wide"
+              >
+                <a href={calendarUrl} target="_blank" rel="noopener noreferrer">
+                  <Plus />
+                  Calendar
+                </a>
+              </Button>
+            )}
+            {onRsvpToggle && (
+              <Button
+                variant={isRsvped ? "cerulean" : "coral"}
+                size="sm"
+                className="text-[11px] font-bold uppercase tracking-wide"
+                aria-pressed={isRsvped}
+                onClick={async (e) => {
+                  e.preventDefault();
+                  logInteraction({
+                    itemId: id,
+                    interactionType: "rsvp",
+                    metadata: { source, position },
+                  });
+                  const wasRsvped = isRsvped;
+                  try {
+                    await onRsvpToggle();
+                  } catch {
+                    return;
+                  }
+                  // Confirm the action explicitly — the label flip alone was easy
+                  // to miss, especially far down the feed.
+                  if (wasRsvped) {
+                    toast(`Removed your RSVP to ${title}`);
+                  } else {
+                    toast.success(`You're going to ${title}`);
+                  }
+                }}
+              >
+                {isRsvped ? (
+                  <>
+                    <Check />
+                    RSVP'd
+                  </>
+                ) : (
+                  "RSVP"
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/layout/app-chrome.tsx b/apps/web/src/components/layout/app-chrome.tsx
index 11f77a3..ea98118 100644
--- a/apps/web/src/components/layout/app-chrome.tsx
+++ b/apps/web/src/components/layout/app-chrome.tsx
@@ -2,14 +2,18 @@
 
 import { usePathname } from "next/navigation";
 import { GeometricBackground } from "~/components/layout/geometric-background";
+import { MobileNav } from "~/components/layout/mobile-nav";
 import { Sidebar } from "~/components/layout/sidebar";
 import { TopBar } from "~/components/layout/top-bar";
+import { cn } from "~/lib/utils";
 
 /**
  * Routes whose content fills the shell edge-to-edge and manages its own
  * scrolling — the map canvas, which must not sit in a scroll container.
  *
- * These still get the Sidebar and TopBar; only the `<main>` box changes.
+ * These still get the same Sidebar and TopBar as every other route; the rail
+ * just floats over the content rather than reserving a column beside it, so
+ * full-width furniture like the map's timeline can span the whole screen.
  */
 const EDGE_TO_EDGE_ROUTES = new Set(["/map"]);
 
@@ -29,7 +33,7 @@ export function AppChrome({ children }: { children: React.ReactNode }) {
     <div className="relative flex h-screen w-screen overflow-hidden bg-white">
       <GeometricBackground />
       <div className="relative z-10 flex h-full w-full">
-        <Sidebar />
+        <Sidebar floating={isEdgeToEdge} />
         <div className="relative flex-1 overflow-hidden">
           <div className="absolute top-0 right-0 z-20">
             <TopBar />
@@ -38,15 +42,19 @@ export function AppChrome({ children }: { children: React.ReactNode }) {
             Edge-to-edge pages get a positioning context with no scroll of their
             own; ordinary pages scroll vertically inside the shell.
           */}
+          {/* `pb-16` on phones reserves room for the fixed bottom tab bar. */}
           <main
-            className={
-              isEdgeToEdge ? "relative h-full overflow-hidden p-3 pl-0" : "h-full overflow-y-auto"
-            }
+            className={cn(
+              "pb-16 md:pb-0",
+              isEdgeToEdge ? "relative h-full overflow-hidden" : "h-full overflow-y-auto",
+            )}
           >
             {children}
           </main>
         </div>
       </div>
+
+      <MobileNav />
     </div>
   );
 }
diff --git a/apps/web/src/components/layout/mobile-nav.tsx b/apps/web/src/components/layout/mobile-nav.tsx
new file mode 100644
index 0000000..f39535a
--- /dev/null
+++ b/apps/web/src/components/layout/mobile-nav.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { NAV_ITEMS, isNavItemActive } from "~/components/layout/nav-items";
+import { cn } from "~/lib/utils";
+
+/**
+ * Bottom tab bar for phones.
+ *
+ * The docked rail expands on hover, which does not exist on touch — a
+ * touch-only user could never see the labels. Below `md` the rail is hidden
+ * entirely and this takes over: every destination visible at once, thumb-height,
+ * with labels always shown.
+ *
+ * `pb-[env(safe-area-inset-bottom)]` keeps the tabs clear of the iOS home
+ * indicator.
+ */
+export function MobileNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      aria-label="Primary"
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 md:hidden",
+        "border-t border-forum-border bg-white pb-[env(safe-area-inset-bottom)]",
+        "shadow-[0_-2px_12px_rgba(0,0,0,0.06)]",
+      )}
+    >
+      <ul className="flex items-stretch">
+        {NAV_ITEMS.map(({ href, icon: Icon, label }) => {
+          const isActive = isNavItemActive(pathname, href);
+          return (
+            <li key={href} className="flex-1">
+              <Link
+                href={href}
+                aria-current={isActive ? "page" : undefined}
+                className={cn(
+                  "flex h-full min-h-[56px] flex-col items-center justify-center gap-0.5 px-1 py-1.5",
+                  "font-dm-sans text-[10px] font-semibold transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-forum-cerulean",
+                  isActive ? "text-forum-cerulean" : "text-forum-light-gray",
+                )}
+              >
+                <Icon size={20} strokeWidth={1.8} aria-hidden />
+                <span className="w-full truncate text-center leading-tight">{label}</span>
+              </Link>
+            </li>
+          );
+        })}
+        <li className="flex-1">
+          <button
+            type="button"
+            onClick={() => signOut({ callbackUrl: "/" })}
+            className={cn(
+              "flex h-full min-h-[56px] w-full flex-col items-center justify-center gap-0.5 px-1 py-1.5",
+              "font-dm-sans text-[10px] font-semibold text-forum-light-gray transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-forum-cerulean",
+            )}
+          >
+            <LogOut size={20} strokeWidth={1.8} aria-hidden />
+            <span className="leading-tight">Log Out</span>
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+}
diff --git a/apps/web/src/components/layout/notification-dropdown.tsx b/apps/web/src/components/layout/notification-dropdown.tsx
index 9400962..83d860d 100644
--- a/apps/web/src/components/layout/notification-dropdown.tsx
+++ b/apps/web/src/components/layout/notification-dropdown.tsx
@@ -10,6 +10,7 @@ import {
   markAllNotificationsRead,
   markNotificationRead,
 } from "~/actions/notifications";
+import { ErrorState } from "~/components/common/states";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
 import { cn } from "~/lib/utils";
 
@@ -31,13 +32,21 @@ export function NotificationDropdown() {
   const [open, setOpen] = useState(false);
   const [limit, setLimit] = useState(20);
 
+  const [loadFailed, setLoadFailed] = useState(false);
+
   const fetchNotifications = useCallback(async () => {
     try {
       const data = await getNotifications();
       setItems(data.items);
       setUnreadCount(data.unreadCount);
+      setLoadFailed(false);
     } catch {
-      // silently fail
+      /*
+       * Recorded rather than swallowed. This polls on a 60s interval, so a
+       * toast per failure would be spam — the dropdown says so instead, and
+       * only when you open it.
+       */
+      setLoadFailed(true);
     }
   }, []);
 
@@ -90,7 +99,8 @@ export function NotificationDropdown() {
       </PopoverTrigger>
       <PopoverContent
         align="end"
-        className="w-[460px] p-0 rounded-[16px] shadow-[0px_8px_30px_rgba(0,0,0,0.12)] border border-gray-100"
+        // Caps to the viewport on phones — a fixed 460px overflowed a 375px screen.
+        className="w-[calc(100vw-2rem)] max-w-[460px] rounded-[16px] border border-forum-border p-0 shadow-[0px_8px_30px_rgba(0,0,0,0.12)] sm:w-[460px]"
       >
         {/* Header — italic serif title */}
         <div className="px-[24px] pt-[24px] pb-[16px]">
@@ -113,6 +123,13 @@ export function NotificationDropdown() {
                 }}
               />
             ))
+          ) : loadFailed ? (
+            /* An empty list and a failed fetch mean very different things. */
+            <ErrorState
+              title="Couldn't load notifications"
+              description="Check your connection and try again."
+              onRetry={fetchNotifications}
+            />
           ) : (
             <div className="py-[50px] text-center">
               <Bell size={28} className="text-forum-medium-gray mx-auto mb-3" />
diff --git a/apps/web/src/components/layout/page-shell.tsx b/apps/web/src/components/layout/page-shell.tsx
index 771f81b..a118013 100644
--- a/apps/web/src/components/layout/page-shell.tsx
+++ b/apps/web/src/components/layout/page-shell.tsx
@@ -9,22 +9,36 @@ import { cn } from "~/lib/utils";
  *
  * Gutters step up with the viewport (20 → 32 → 40px) so the sidebar-adjacent
  * content never crowds the edge on tablet.
+ *
+ * Deliberately **left-aligned, not centred**. `max-w-*` differs per page, so
+ * centring with `mx-auto` produced a different left edge on every route: the
+ * wide Explore feed sat flush against the gutter while the narrower Events page
+ * was pushed inward by half the leftover width, and the two page titles did not
+ * line up. Left-aligning means the distance from the rail to the heading is the
+ * same on every page at every viewport, and `max-w-*` now only caps line length
+ * on the right.
  */
-const pageShellVariants = cva("mx-auto w-full px-5 py-6 sm:px-8 lg:px-10 lg:py-8", {
+const pageShellVariants = cva("w-full px-5 py-6 sm:px-8 lg:px-10 lg:py-8", {
   variants: {
     width: {
-      /** Forms, settings, single-column reading. */
+      /** Forms only — keeps inputs and prose at a readable measure. */
       narrow: "max-w-3xl",
-      /** Default: list + detail pages. */
+      /** Slightly tighter than the default; single-column reading. */
       content: "max-w-5xl",
-      /** Multi-column dashboards (Explore). */
+      /** Default: matches Explore, so list pages agree with the home screen. */
       wide: "max-w-7xl",
       /** Opt out — the page manages its own width (e.g. full-bleed map). */
       full: "max-w-none",
     },
   },
+  /*
+   * `wide` is the default so every list page spans the same width as the home
+   * screen. Previously the default was `content` (max-w-5xl), which left the
+   * Events and Friends tab bars 256px shorter than the Explore column and made
+   * them read as mis-centred against it.
+   */
   defaultVariants: {
-    width: "content",
+    width: "wide",
   },
 });
 
@@ -42,6 +56,20 @@ export function PageShell({
   );
 }
 
+/**
+ * Keeps a page's top-right control clear of the floating TopBar.
+ *
+ * The TopBar (notification bell + avatar) is absolutely positioned over the
+ * content area on every route, so anything sharing that band — a page heading's
+ * trailing action — collides with it once the viewport is narrower than the
+ * shell's max width.
+ *
+ * From `sm` up it reserves ~140px on the right: 24px page padding + 36px bell +
+ * 12px gap + 40px avatar + 24px padding, rounded up. On phones that would eat
+ * over a third of the screen, so the content drops *below* the bar instead.
+ */
+export const TOP_BAR_CLEARANCE = "pt-14 sm:pt-0 sm:pr-[140px]";
+
 /**
  * Page-level `<h1>`. One ramp for every page — previously these ranged from
  * 48px to 60px with no rhyme, and none of them scaled down on mobile.
@@ -51,15 +79,28 @@ export function PageHeading({
   children,
   description,
   action,
+  clearTopBar = false,
   ...props
 }: React.ComponentProps<"h1"> & {
   /** Optional supporting line rendered under the title. */
   description?: React.ReactNode;
   /** Optional trailing control (button, link) aligned to the title baseline. */
   action?: React.ReactNode;
+  /**
+   * Reserve room for the floating TopBar. Set this when the heading is the
+   * first thing on the page *and* carries an `action`, so the two don't
+   * overlap. Off by default — headings rendered further down the page (an org
+   * profile's title inside its panel) sit below the TopBar already.
+   */
+  clearTopBar?: boolean;
 }) {
   return (
-    <div className="mb-6 flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
+    <div
+      className={cn(
+        "mb-6 flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
+        clearTopBar && TOP_BAR_CLEARANCE,
+      )}
+    >
       <div className="min-w-0">
         <h1
           data-slot="page-heading"
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 5009060..8bf9aad 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -1,28 +1,13 @@
 "use client";
 
 import type { LucideIcon } from "lucide-react";
-import { LogOut, Plus } from "lucide-react";
+import { LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { NAV_ITEMS, isNavItemActive } from "~/components/layout/nav-items";
 import { cn } from "~/lib/utils";
 
-/**
- * Space reserved in the page flow: the 12px inset plus the *expanded* 200px
- * width, not the collapsed 64px.
- *
- * The panel overlays rather than pushes, so if we only reserved the collapsed
- * width the expanded panel would land on top of the page heading and the first
- * card. Reserving the open width means content always begins to the right of
- * where the panel can ever reach — nothing is covered, and nothing reflows on
- * hover. The cost is a fixed gutter beside the collapsed rail.
- *
- * The widths themselves are literal Tailwind classes below, because the JIT
- * scans source text and cannot read them out of a template string.
- */
-const FOOTPRINT = 212;
-
 /**
  * Row inside the nav.
  *
@@ -61,38 +46,60 @@ function NavRow({
   );
 }
 
-export function Sidebar() {
+export function Sidebar({ floating = false }: { floating?: boolean }) {
   const pathname = usePathname();
 
   return (
     /*
-     * The outer element reserves a fixed slice of page flow and never resizes;
-     * the panel inside is absolutely positioned and grows on hover. Animating
-     * the flow width instead would re-wrap the feed on every pointer pass.
+     * The outer element holds the rail's slice of page flow and animates with
+     * it, so page content is pushed rather than covered — matching the design,
+     * where the greeting and search field shift right as the rail opens while
+     * their right edge stays put.
+     *
+     * `floating` reserves nothing, letting the page beneath run the full width
+     * of the shell — used by the map so its timeline can stretch edge to edge
+     * while the rail simply sits on top.
      */
-    <div className="relative z-40 shrink-0" style={{ width: FOOTPRINT }}>
+    <div
+      className={cn(
+        // Hidden on phones — `MobileNav` takes over there, because the
+        // hover-to-expand interaction has no touch equivalent.
+        "group/rail relative z-40 hidden shrink-0 md:block",
+        "transition-[width] duration-200 ease-out motion-reduce:transition-none",
+        floating ? "md:w-0" : "md:w-[76px] md:hover:w-[212px] md:focus-within:w-[212px]",
+      )}
+    >
       <aside
         aria-label="Primary"
         className={cn(
-          "group/rail absolute inset-y-3 left-3 flex flex-col overflow-hidden rounded-[16px]",
+          "absolute left-3 flex flex-col overflow-hidden rounded-[16px]",
+          // Sits 48px from the top and 112px from the bottom — same panel
+          // height as an even 80/80 split, shifted up. The deeper bottom gap
+          // also keeps the map's full-width timeline clear of the rail.
+          "top-12 bottom-28",
           "shadow-[0px_3px_3px_0px_rgba(32,162,255,0.08)]",
           "transition-[width,box-shadow] duration-200 ease-out motion-reduce:transition-none",
-          "hover:shadow-[0px_8px_24px_0px_rgba(32,162,255,0.18)]",
-          "focus-within:shadow-[0px_8px_24px_0px_rgba(32,162,255,0.18)]",
-          "w-[64px] hover:w-[200px] focus-within:w-[200px]",
+          "group-hover/rail:shadow-[0px_8px_24px_0px_rgba(32,162,255,0.18)]",
+          "group-focus-within/rail:shadow-[0px_8px_24px_0px_rgba(32,162,255,0.18)]",
+          "w-[64px] group-hover/rail:w-[200px] group-focus-within/rail:w-[200px]",
         )}
       >
         {/*
-          Two backdrop layers. Collapsed, the white one is transparent so the
-          geometric background still reads through the turquoise tint exactly as
-          before. Expanded, it turns opaque so the panel can sit over page
-          content without the feed showing through.
+          Rail backdrop — #ECFCFC.
+          
+          Half opacity reads fine over the app's near-white pages, but the map
+          is a dense, high-contrast canvas: at 50% the streets and building
+          labels ran straight through the nav labels. Over the map the panel
+          goes nearly solid and blurs what's behind it, so "Home" is read
+          against a flat tint rather than Nassau Street.
         */}
         <span
           aria-hidden
-          className="absolute inset-0 bg-white opacity-0 transition-opacity duration-200 group-hover/rail:opacity-100 group-focus-within/rail:opacity-100 motion-reduce:transition-none"
+          className={cn(
+            "absolute inset-0",
+            floating ? "bg-[#ECFCFC]/95 backdrop-blur-md" : "bg-[#ECFCFC]/50",
+          )}
         />
-        <span aria-hidden className="absolute inset-0 bg-forum-turquoise-20" />
 
         <nav className="relative flex flex-1 flex-col gap-[6px] px-[12px] pt-[14px]">
           {NAV_ITEMS.map(({ href, icon, label }) => {
@@ -114,21 +121,6 @@ export function Sidebar() {
               </Link>
             );
           })}
-
-          {/*
-            Event creation is a secondary action, not the product's headline
-            flow — a quiet ghost item in the nav rather than a filled CTA.
-          */}
-          <Link
-            href="/events/create"
-            className={cn(
-              "mt-2 flex items-center gap-[10px] rounded-[8px] px-[10px] py-[8px] font-dm-sans text-[13px] font-medium transition-colors",
-              "text-forum-light-gray hover:bg-forum-turquoise/20 hover:text-forum-dark-gray",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forum-cerulean",
-            )}
-          >
-            <NavRow icon={Plus} label="Create an event" iconSize={16} />
-          </Link>
         </nav>
 
         <div className="relative mb-3 px-[12px]">
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 6b9db4a..4f4572e 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -24,7 +24,7 @@ const buttonVariants = cva(
          * elements across the (app) routes. Radius is `rounded-lg` (10px, the
          * --radius token) so every button agrees with the card corner.
          */
-        /** Primary action: RSVP, Save, Create. */
+        /** Primary action: RSVP, Save, Create. Forum cerulean, #0A9CD5. */
         cerulean: "rounded-lg bg-forum-cerulean text-white shadow-sm hover:bg-forum-cerulean/90",
         /** High-contrast action on tinted surfaces. */
         solid: "rounded-lg bg-black text-white hover:bg-forum-dark-gray",
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 1654200..3de5e8f 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -41,15 +41,18 @@ function DialogOverlay({
 
 function DialogContent({
   className,
+  overlayClassName,
   children,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  /** Override the backdrop — e.g. `bg-transparent` to float over live content. */
+  overlayClassName?: string;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
diff --git a/apps/web/src/lib/calendar.ts b/apps/web/src/lib/calendar.ts
new file mode 100644
index 0000000..a4372bc
--- /dev/null
+++ b/apps/web/src/lib/calendar.ts
@@ -0,0 +1,33 @@
+/**
+ * Google Calendar "add event" link.
+ *
+ * Lived inside the event detail page; the map's event modal needs the same
+ * "+ Calendar" action, so it moved here rather than being written twice.
+ */
+export function buildGCalUrl(event: {
+  title: string;
+  description: string | null;
+  datetime: Date;
+  endDatetime: Date | null;
+  locationName: string | null;
+}) {
+  const fmt = (d: Date) =>
+    d
+      .toISOString()
+      .replace(/[-:]/g, "")
+      .replace(/\.\d{3}/, "");
+
+  const start = fmt(event.datetime);
+  // Default to a one-hour block when the event has no explicit end.
+  const end = fmt(event.endDatetime ?? new Date(event.datetime.getTime() + 60 * 60 * 1000));
+
+  const params = new URLSearchParams({
+    action: "TEMPLATE",
+    text: event.title,
+    dates: `${start}/${end}`,
+    details: event.description ?? "",
+    location: event.locationName ?? "",
+  });
+
+  return `https://calendar.google.com/calendar/render?${params.toString()}`;
+}
diff --git a/apps/web/src/lib/date-format.ts b/apps/web/src/lib/date-format.ts
index 899fffa..3f16f28 100644
--- a/apps/web/src/lib/date-format.ts
+++ b/apps/web/src/lib/date-format.ts
@@ -21,3 +21,23 @@ export function formatEventDateTime(date: Date) {
 
   return `${weekday}, ${month} ${day} at ${hour}:${minute} ${dayPeriod}`;
 }
+
+/**
+ * "today" / "tomorrow" / "on Fri, Mar 3" — for sentences like
+ * "TigerApps Social is happening tomorrow!".
+ *
+ * Compares calendar days rather than elapsed hours, so an event at 9am
+ * tomorrow reads as "tomorrow" even though it's under 24 hours away.
+ */
+export function formatRelativeDay(date: Date, now = new Date()) {
+  const startOf = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((startOf(date) - startOf(now)) / 86_400_000);
+
+  if (days === 0) return "today";
+  if (days === 1) return "tomorrow";
+  if (days === -1) return "yesterday";
+  if (days > 1 && days < 7) {
+    return `on ${date.toLocaleDateString("en-US", { weekday: "long" })}`;
+  }
+  return `on ${date.toLocaleDateString("en-US", { month: "short", day: "numeric" })}`;
+}