diff --git a/docs/homepage-redesign-roadmap.md b/docs/homepage-redesign-roadmap.md
index d245020..726238b 100644
--- a/docs/homepage-redesign-roadmap.md
+++ b/docs/homepage-redesign-roadmap.md
@@ -1,6 +1,6 @@
 # Homepage Redesign Roadmap
 
-Status: Active — PRs 1–4 and 4A merged; Community links and page order in progress
+Status: Active — PRs 1–5 and 4A merged; responsive events in progress
 Primary audience: People considering their first Kyoto Tech Meetup  
 Secondary audience: Existing community members looking for events, venue details, conversations, and member work
 
@@ -394,6 +394,12 @@ Preserve the detailed calendar for existing members while giving mobile visitors
 - Render the list at mobile widths and retain the existing server-rendered calendar grid at tablet and desktop widths.
 - Preserve a useful no-events state linking to the Meetup group.
 
+### Event details consistency
+
+- Add the cached RSVP count to the hero's next-event card.
+- Add the same validated “Open in Maps” action used by calendar events to the hero card when a physical address is available.
+- Keep RSVP counts and Maps behavior consistent across the hero, mobile list, and desktop calendar.
+
 ### Happening-now state
 
 - Preserve the existing `NextEventCard.astro` behavior, which already renders “Live Now” / “開催中” with an active green status dot when `getHeroEventState` identifies an ongoing event.
diff --git a/src/components/Calendar.astro b/src/components/Calendar.astro
index eda7753..5eda18e 100644
--- a/src/components/Calendar.astro
+++ b/src/components/Calendar.astro
@@ -4,15 +4,17 @@ import {
   type MeetupEvent,
 } from "../lib/meetup-events";
 import { buildFiveWeekCalendar } from "../lib/calendar-grid";
+import { isOngoingEvent } from "../lib/event-status";
 import { useTranslations } from "../i18n/utils";
 import { FaLocationDot, FaUserGroup } from "react-icons/fa6";
 
 type Props = {
   events: MeetupEvent[];
   lang?: "en" | "ja";
+  now?: Date;
 };
 
-const { events, lang = "en" } = Astro.props as Props;
+const { events, lang = "en", now = new Date() } = Astro.props as Props;
 const t = useTranslations(lang);
 const locale = lang === "ja" ? "ja-JP" : "en-US";
 const weeks = buildFiveWeekCalendar(events);
@@ -90,6 +92,7 @@ const eventColorClass = (event: MeetupEvent) => {
                         const mapsUrl = buildMeetupVenueMapsUrl(event.venue);
                         const venueLabel =
                           event.venue?.name ?? event.venue?.address ?? "";
+                        const ongoing = isOngoingEvent(event, now);
 
                         return (
                           <article
@@ -97,7 +100,23 @@ const eventColorClass = (event: MeetupEvent) => {
                               "rounded-lg px-2 py-2 text-xs text-white shadow-sm transition",
                               eventColorClass(event),
                             ]}
+                            data-event-live
+                            data-event-start={event.start}
+                            data-event-end={event.endTime ?? undefined}
+                            data-live-state={ongoing ? "ongoing" : "upcoming"}
+                            data-live-emphasis="calendar"
                           >
+                            <span
+                              class="mb-1.5 inline-flex items-center gap-1 rounded-full bg-white/95 px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wide text-emerald-700"
+                              data-live-only
+                              hidden={!ongoing}
+                            >
+                              <span
+                                class="h-1.5 w-1.5 rounded-full bg-emerald-500"
+                                aria-hidden="true"
+                              />
+                              {t("home.eventCard.liveNow")}
+                            </span>
                             <a
                               href={event.link}
                               class="block font-semibold leading-snug underline-offset-2 hover:underline focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
diff --git a/src/components/LiveEventUpdater.astro b/src/components/LiveEventUpdater.astro
new file mode 100644
index 0000000..5b7abfb
--- /dev/null
+++ b/src/components/LiveEventUpdater.astro
@@ -0,0 +1,29 @@
+<script>
+  import { isEventTimeOngoing } from "../lib/event-status";
+
+  const refreshLiveEventStates = () => {
+    document.querySelectorAll<HTMLElement>("[data-event-live]").forEach((root) => {
+      const start = root.dataset.eventStart;
+      if (!start) return;
+
+      const ongoing = isEventTimeOngoing(
+        start,
+        root.dataset.eventEnd || null,
+        new Date(),
+      );
+      root.dataset.liveState = ongoing ? "ongoing" : "upcoming";
+
+      root.querySelectorAll<HTMLElement>("[data-live-only]").forEach((element) => {
+        element.hidden = !ongoing;
+      });
+      root
+        .querySelectorAll<HTMLElement>("[data-upcoming-only]")
+        .forEach((element) => {
+          element.hidden = ongoing;
+        });
+    });
+  };
+
+  refreshLiveEventStates();
+  window.setInterval(refreshLiveEventStates, 30_000);
+</script>
diff --git a/src/components/NextEventCard.astro b/src/components/NextEventCard.astro
index 9e949f8..5354939 100644
--- a/src/components/NextEventCard.astro
+++ b/src/components/NextEventCard.astro
@@ -1,7 +1,11 @@
 ---
-import type { MeetupEvent } from "../lib/meetup-events";
+import {
+  buildMeetupVenueMapsUrl,
+  type MeetupEvent,
+} from "../lib/meetup-events";
 import { getHeroEventState } from "../lib/hero-event";
 import { useTranslations } from "../i18n/utils";
+import { FaLocationDot, FaUserGroup } from "react-icons/fa6";
 
 type Props = {
   event: MeetupEvent | null;
@@ -18,6 +22,8 @@ const {
 } = Astro.props as Props;
 const t = useTranslations(lang);
 const state = getHeroEventState(event, { fallbackUrl, lang, now });
+const mapsUrl = event ? buildMeetupVenueMapsUrl(event.venue) : null;
+const venueLabel = event?.venue?.name ?? event?.venue?.address ?? "";
 ---
 
 <section
@@ -27,17 +33,24 @@ const state = getHeroEventState(event, { fallbackUrl, lang, now });
   {
     state.kind === "event" ? (
       <>
-        <div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">
+        <div
+          class="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500"
+          data-event-live
+          data-event-start={event?.start}
+          data-event-end={event?.endTime ?? undefined}
+          data-live-state={state.isOngoing ? "ongoing" : "upcoming"}
+        >
           <span
-            class:list={[
-              "h-2 w-2 rounded-full",
-              state.isOngoing ? "bg-emerald-500" : "bg-(--accent)",
-            ]}
+            class="h-2 w-2 rounded-full"
+            data-live-dot
             aria-hidden="true"
           />
-          {state.isOngoing
-            ? t("home.eventCard.liveNow")
-            : t("home.eventCard.next")}
+          <span data-live-only hidden={!state.isOngoing}>
+            {t("home.eventCard.liveNow")}
+          </span>
+          <span data-upcoming-only hidden={state.isOngoing}>
+            {t("home.eventCard.next")}
+          </span>
         </div>
         <h2 class="mt-3 text-xl font-semibold leading-snug text-slate-950 md:text-2xl">
           {state.title}
@@ -62,6 +75,45 @@ const state = getHeroEventState(event, { fallbackUrl, lang, now });
             <dt class="sr-only">{t("home.eventCard.venue")}</dt>
             <dd>{state.venueName ?? t("home.eventCard.venueTba")}</dd>
           </div>
+          <div
+            class="flex items-start gap-2.5"
+            aria-label={t("home.calendar.rsvpCount").replace(
+              "{count}",
+              String(event?.goingCount ?? 0),
+            )}
+          >
+            <FaUserGroup
+              className="mt-0.5 h-4 w-4 shrink-0"
+              aria-hidden="true"
+            />
+            <dt class="sr-only">{t("home.eventCard.going")}</dt>
+            <dd aria-hidden="true">{event?.goingCount ?? 0}</dd>
+          </div>
+          {
+            mapsUrl ? (
+              <div class="flex items-start gap-2.5">
+                <FaLocationDot
+                  className="mt-0.5 h-4 w-4 shrink-0"
+                  aria-hidden="true"
+                />
+                <dt class="sr-only">{t("home.calendar.openInMaps")}</dt>
+                <dd>
+                  <a
+                    href={mapsUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label={t("home.calendar.openVenueInMaps").replace(
+                      "{venue}",
+                      venueLabel,
+                    )}
+                    class="font-medium text-slate-700 underline decoration-slate-300 underline-offset-2 transition hover:text-slate-950 hover:decoration-(--accent) focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-700"
+                  >
+                    {t("home.calendar.openInMaps")}
+                  </a>
+                </dd>
+              </div>
+            ) : null
+          }
         </dl>
         <a
           href={state.href}
diff --git a/src/components/UpcomingEventList.astro b/src/components/UpcomingEventList.astro
new file mode 100644
index 0000000..32b1c05
--- /dev/null
+++ b/src/components/UpcomingEventList.astro
@@ -0,0 +1,190 @@
+---
+import {
+  buildMeetupVenueMapsUrl,
+  type MeetupEvent,
+} from "../lib/meetup-events";
+import { isOngoingEvent } from "../lib/event-status";
+import { useTranslations } from "../i18n/utils";
+import {
+  FaArrowRight,
+  FaClock,
+  FaLocationDot,
+  FaUserGroup,
+} from "react-icons/fa6";
+
+type Props = {
+  events: MeetupEvent[];
+  lang?: "en" | "ja";
+  meetupUrl: string;
+  now?: Date;
+};
+
+const {
+  events,
+  lang = "en",
+  meetupUrl,
+  now = new Date(),
+} = Astro.props as Props;
+const t = useTranslations(lang);
+const locale = lang === "ja" ? "ja-JP" : "en-US";
+const visibleEvents = events.slice(0, 4);
+const headingId = `upcoming-events-heading-${lang}`;
+
+const eventTypeKeys = {
+  coffee: "home.calendar.legend.coffee.title",
+  "hack-day": "home.calendar.legend.hackDay.title",
+  special: "home.calendar.legend.special.title",
+} as const;
+
+const formatDate = (value: string) =>
+  new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    timeZone: "Asia/Tokyo",
+    weekday: "short",
+  }).format(new Date(value));
+
+const formatTime = (event: MeetupEvent) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: lang === "en",
+    minute: "2-digit",
+    timeZone: "Asia/Tokyo",
+  });
+  const start = formatter.format(new Date(event.start));
+  return event.endTime
+    ? `${start}–${formatter.format(new Date(event.endTime))}`
+    : start;
+};
+---
+
+<section class="pt-6 md:hidden" aria-labelledby={headingId}>
+  <h3 id={headingId} class="text-lg font-semibold text-slate-900">
+    {t("home.upcomingEvents.title")}
+  </h3>
+
+  {
+    visibleEvents.length > 0 ? (
+      <ol class="mt-4 grid gap-4">
+        {visibleEvents.map((event) => {
+          const ongoing = isOngoingEvent(event, now);
+          const mapsUrl = buildMeetupVenueMapsUrl(event.venue);
+          const venueLabel =
+            event.venue?.name?.trim() ||
+            event.venue?.address?.trim() ||
+            t("home.eventCard.venueTba");
+
+          return (
+            <li>
+              <article
+                class="rounded-2xl border border-l-4 border-slate-200 border-l-transparent bg-white p-5 shadow-sm"
+                data-event-live
+                data-event-start={event.start}
+                data-event-end={event.endTime ?? undefined}
+                data-live-state={ongoing ? "ongoing" : "upcoming"}
+                data-live-emphasis="card"
+              >
+                <div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em]">
+                  <span
+                    class="inline-flex items-center gap-1.5 text-emerald-700"
+                    data-live-only
+                    hidden={!ongoing}
+                  >
+                    <span
+                      class="h-2 w-2 rounded-full bg-emerald-500"
+                      aria-hidden="true"
+                    />
+                    {t("home.eventCard.liveNow")}
+                  </span>
+                  <span class="text-slate-500">
+                    {t(eventTypeKeys[event.eventType])}
+                  </span>
+                </div>
+
+                <p class="mt-3 text-sm font-semibold text-(--accent)">
+                  <time datetime={event.start}>{formatDate(event.start)}</time>
+                </p>
+                <h4 class="mt-1 text-xl font-semibold leading-snug text-slate-950">
+                  <a
+                    href={event.link}
+                    class="rounded-sm underline-offset-4 hover:text-(--accent) hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-slate-700"
+                  >
+                    {event.title}
+                  </a>
+                </h4>
+
+                <dl class="mt-4 grid gap-2 text-sm text-slate-600">
+                  <div class="flex items-start gap-2.5">
+                    <FaClock
+                      className="mt-0.5 h-4 w-4 shrink-0"
+                      aria-hidden="true"
+                    />
+                    <dt class="sr-only">{t("home.eventCard.dateTime")}</dt>
+                    <dd>{formatTime(event)}</dd>
+                  </div>
+                  <div class="flex items-start gap-2.5">
+                    <FaLocationDot
+                      className="mt-0.5 h-4 w-4 shrink-0"
+                      aria-hidden="true"
+                    />
+                    <dt class="sr-only">{t("home.eventCard.venue")}</dt>
+                    <dd>{venueLabel}</dd>
+                  </div>
+                </dl>
+
+                <div class="mt-5 flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-slate-100 pt-4 text-sm">
+                  <span
+                    class="inline-flex items-center gap-2 font-medium text-slate-600"
+                    aria-label={t("home.calendar.rsvpCount").replace(
+                      "{count}",
+                      String(event.goingCount),
+                    )}
+                  >
+                    <FaUserGroup className="h-4 w-4" aria-hidden="true" />
+                    <span aria-hidden="true">{event.goingCount}</span>
+                  </span>
+                  {mapsUrl ? (
+                    <a
+                      href={mapsUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={t("home.calendar.openVenueInMaps").replace(
+                        "{venue}",
+                        venueLabel,
+                      )}
+                      class="inline-flex items-center gap-2 font-semibold text-slate-700 underline decoration-slate-300 underline-offset-4 hover:text-slate-950 hover:decoration-(--accent) focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-700"
+                    >
+                      <FaLocationDot className="h-4 w-4" aria-hidden="true" />
+                      {t("home.calendar.openInMaps")}
+                    </a>
+                  ) : null}
+                  <a
+                    href={event.link}
+                    class="ml-auto inline-flex min-h-11 items-center gap-2 rounded-full bg-slate-950 px-5 py-2.5 font-semibold text-white transition hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-slate-700"
+                  >
+                    {t("home.upcomingEvents.rsvp")}
+                    <FaArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+                  </a>
+                </div>
+              </article>
+            </li>
+          );
+        })}
+      </ol>
+    ) : (
+      <div class="mt-4 rounded-2xl border border-slate-200 bg-slate-50 p-5">
+        <p class="font-semibold text-slate-900">{t("home.eventCard.empty")}</p>
+        <p class="mt-2 text-sm leading-relaxed text-slate-600">
+          {t("home.eventCard.emptyLink")}
+        </p>
+        <a
+          href={meetupUrl}
+          class="mt-4 inline-flex min-h-11 items-center gap-2 rounded-full bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white"
+        >
+          {t("home.eventCard.groupCta")}
+          <FaArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+        </a>
+      </div>
+    )
+  }
+</section>
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 8b05f5c..741bf6d 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -70,6 +70,8 @@ export const ui = {
     "home.calendar.rsvpCount": "RSVPs: {count}",
     "home.calendar.openInMaps": "Open in Maps",
     "home.calendar.openVenueInMaps": "Open {venue} in Maps",
+    "home.upcomingEvents.title": "Upcoming events",
+    "home.upcomingEvents.rsvp": "View and RSVP",
     "home.calendar.legend.coffee.title": "Tech & Coffee",
     "home.calendar.legend.coffee.description":
       "Weekly casual hangouts",
@@ -173,6 +175,8 @@ export const ui = {
     "home.calendar.rsvpCount": "参加予定: {count}人",
     "home.calendar.openInMaps": "地図で開く",
     "home.calendar.openVenueInMaps": "{venue}を地図で開く",
+    "home.upcomingEvents.title": "今後のイベント",
+    "home.upcomingEvents.rsvp": "詳細・参加登録",
     "home.calendar.legend.coffee.title": "Tech & Coffee",
     "home.calendar.legend.coffee.description":
       "毎週のカジュアルな交流会",
diff --git a/src/lib/event-status.ts b/src/lib/event-status.ts
new file mode 100644
index 0000000..8acd631
--- /dev/null
+++ b/src/lib/event-status.ts
@@ -0,0 +1,30 @@
+import type { MeetupEvent } from "./meetup-events";
+
+export const IN_PROGRESS_GRACE_MS = 4 * 60 * 60 * 1000;
+
+export function isEventTimeOngoing(
+  start: string,
+  endTime: string | null,
+  now = new Date(),
+  graceMs = IN_PROGRESS_GRACE_MS,
+): boolean {
+  const startMs = new Date(start).valueOf();
+  const nowMs = now.valueOf();
+  const explicitEndMs = endTime ? new Date(endTime).valueOf() : null;
+  const endMs = explicitEndMs ?? startMs + graceMs;
+
+  return (
+    Number.isFinite(startMs) &&
+    Number.isFinite(nowMs) &&
+    Number.isFinite(endMs) &&
+    startMs <= nowMs &&
+    endMs >= nowMs
+  );
+}
+
+export function isOngoingEvent(
+  event: Pick<MeetupEvent, "start" | "endTime">,
+  now = new Date(),
+): boolean {
+  return isEventTimeOngoing(event.start, event.endTime, now);
+}
diff --git a/src/lib/hero-event.ts b/src/lib/hero-event.ts
index 649ab01..a1d4546 100644
--- a/src/lib/hero-event.ts
+++ b/src/lib/hero-event.ts
@@ -1,7 +1,7 @@
 import type { MeetupEvent } from "./meetup-events";
+import { isOngoingEvent } from "./event-status";
 
 const TIME_ZONE = "Asia/Tokyo";
-const IN_PROGRESS_GRACE_MS = 4 * 60 * 60 * 1000;
 
 type HeroEventOptions = {
   fallbackUrl: string;
@@ -25,16 +25,6 @@ type HeroEventState =
       venueName: string | null;
     };
 
-function isOngoingEvent(event: MeetupEvent, now: Date): boolean {
-  const startMs = new Date(event.start).valueOf();
-  const nowMs = now.valueOf();
-  const endMs = event.endTime
-    ? new Date(event.endTime).valueOf()
-    : startMs + IN_PROGRESS_GRACE_MS;
-
-  return startMs <= nowMs && endMs >= nowMs;
-}
-
 export function getHeroEventState(
   event: MeetupEvent | null,
   { fallbackUrl, lang, now = new Date() }: HeroEventOptions,
diff --git a/src/lib/meetup-events.ts b/src/lib/meetup-events.ts
index 085cfa5..83b363e 100644
--- a/src/lib/meetup-events.ts
+++ b/src/lib/meetup-events.ts
@@ -1,12 +1,15 @@
 /* global fetch, URL, AbortController, setTimeout, clearTimeout */
 import { classifyEventType, type EventType } from "./event-types";
+import {
+  IN_PROGRESS_GRACE_MS,
+  isEventTimeOngoing,
+} from "./event-status";
 
 export const DEFAULT_MEETUP_EVENTS_URL =
   "https://www.meetup.com/kyoto-tech-meetup/events/";
 export const DEFAULT_MEETUP_TIMEOUT_MS = 12000;
 
 const DEFAULT_EVENT_WINDOW_DAYS = 60;
-const DEFAULT_IN_PROGRESS_GRACE_MS = 4 * 60 * 60 * 1000;
 const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000;
 const EVENT_TYPES = new Set<EventType>(["coffee", "hack-day", "special"]);
 const coffeeWeekdaySuffixPattern =
@@ -277,7 +280,7 @@ export function parseMeetupEventsHtml(html: string): MeetupEvent[] {
 export function selectUpcomingMeetupEvents(
   events: readonly MeetupEvent[],
   {
-    inProgressGraceMs = DEFAULT_IN_PROGRESS_GRACE_MS,
+    inProgressGraceMs = IN_PROGRESS_GRACE_MS,
     now = new Date(),
     windowDays = DEFAULT_EVENT_WINDOW_DAYS,
   }: SelectMeetupEventsOptions = {},
@@ -293,15 +296,13 @@ export function selectUpcomingMeetupEvents(
     .filter(isMeetupEvent)
     .filter((event) => {
       const startMs = new Date(event.start).valueOf();
-      const endMs = event.endTime
-        ? new Date(event.endTime).valueOf()
-        : null;
       const upcoming = startMs >= nowMs;
-      const inProgress =
-        startMs <= nowMs &&
-        (endMs !== null
-          ? endMs >= nowMs
-          : nowMs - startMs <= inProgressGraceMs);
+      const inProgress = isEventTimeOngoing(
+        event.start,
+        event.endTime,
+        now,
+        inProgressGraceMs,
+      );
 
       return (upcoming || inProgress) && startMs <= cutoffMs;
     })
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c429a21..b07d2fb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,8 @@ import Layout from "../layouts/Layout.astro";
 import Header from "../components/Header.astro";
 import Hero from "../components/Hero.astro";
 import Calendar from "../components/Calendar.astro";
+import UpcomingEventList from "../components/UpcomingEventList.astro";
+import LiveEventUpdater from "../components/LiveEventUpdater.astro";
 import Footer from "../components/Footer.astro";
 import { FaGithub, FaDiscord, FaMeetup, FaEnvelope } from "react-icons/fa";
 import { FaExternalLinkAlt } from "react-icons/fa";
@@ -297,15 +299,24 @@ const formatDate = (value: string) => {
 
         <FeedTimestamps
           client:load
-          generatedAt={compositeFeed?.generatedAt}
+          generatedAt={meetupEventData?.generatedAt}
           intervalHours={3}
           updatedLabel={t("home.communityFeed.updated")}
           nextLabel={t("home.communityFeed.nextUpdate")}
         />
 
-        <Calendar events={events} lang={lang} />
+        <UpcomingEventList
+          events={events}
+          lang={lang}
+          meetupUrl={meetupUrl}
+          now={buildNow}
+        />
+
+        <div class="hidden md:block">
+          <Calendar events={events} lang={lang} now={buildNow} />
+        </div>
 
-        <div class="mt-5 grid gap-4 text-sm text-slate-700 md:grid-cols-3">
+        <div class="mt-5 hidden gap-4 text-sm text-slate-700 md:grid md:grid-cols-3">
           {
             calendarLegendItems.map((item) => (
               <article class="overflow-hidden rounded-xl border border-slate-200 bg-white">
@@ -461,5 +472,6 @@ const formatDate = (value: string) => {
     </section>
   </main>
 
+  <LiveEventUpdater />
   <Footer lang={lang} />
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 1999351..b302da4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -53,3 +53,20 @@ body {
 	white-space: nowrap;
 	border: 0;
 }
+
+[data-event-live] [data-live-dot] {
+	background-color: var(--accent);
+}
+
+[data-event-live][data-live-state="ongoing"] [data-live-dot] {
+	background-color: #10b981;
+}
+
+[data-event-live][data-live-state="ongoing"][data-live-emphasis="card"] {
+	border-left-color: #10b981;
+}
+
+[data-event-live][data-live-state="ongoing"][data-live-emphasis="calendar"] {
+	outline: 2px solid #6ee7b7;
+	outline-offset: 2px;
+}
diff --git a/test/event-status.test.mjs b/test/event-status.test.mjs
new file mode 100644
index 0000000..f4c9c1e
--- /dev/null
+++ b/test/event-status.test.mjs
@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vitest";
+import {
+  IN_PROGRESS_GRACE_MS,
+  isEventTimeOngoing,
+  isOngoingEvent,
+} from "../src/lib/event-status.ts";
+
+describe("shared ongoing event state", () => {
+  test("uses explicit start and end boundaries inclusively", () => {
+    const start = "2026-07-10T10:00:00.000Z";
+    const end = "2026-07-10T12:00:00.000Z";
+
+    expect(isEventTimeOngoing(start, end, new Date(start))).toBe(true);
+    expect(isEventTimeOngoing(start, end, new Date(end))).toBe(true);
+    expect(
+      isEventTimeOngoing(start, end, new Date("2026-07-10T12:00:00.001Z")),
+    ).toBe(false);
+  });
+
+  test("uses the four-hour grace window when an end time is missing", () => {
+    const start = "2026-07-10T10:00:00.000Z";
+    const graceEnd = new Date(new Date(start).valueOf() + IN_PROGRESS_GRACE_MS);
+
+    expect(isEventTimeOngoing(start, null, graceEnd)).toBe(true);
+    expect(
+      isEventTimeOngoing(start, null, new Date(graceEnd.valueOf() + 1)),
+    ).toBe(false);
+  });
+
+  test("supports event-shaped values and rejects invalid timestamps", () => {
+    expect(
+      isOngoingEvent(
+        {
+          start: "2026-07-10T10:00:00.000Z",
+          endTime: "2026-07-10T12:00:00.000Z",
+        },
+        new Date("2026-07-10T11:00:00.000Z"),
+      ),
+    ).toBe(true);
+    expect(isEventTimeOngoing("invalid", null, new Date())).toBe(false);
+  });
+});