diff --git a/components/Activity/Hackathon/AgendaCountdown.module.less b/components/Activity/Hackathon/AgendaCountdown.module.less
new file mode 100644
index 0000000..8d12cf9
--- /dev/null
+++ b/components/Activity/Hackathon/AgendaCountdown.module.less
@@ -0,0 +1,63 @@
+@import './theme.less';
+
+.wrap {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 520px;
+}
+
+.label {
+  margin: 0;
+  color: @muted;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.8rem;
+
+  li {
+    gap: 0.7rem;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+      0 0 26px rgba(44, 232, 255, 0.08);
+    border: 1px solid rgba(44, 232, 255, 0.26);
+    border-radius: 18px;
+    background: linear-gradient(180deg, rgba(44, 232, 255, 0.08), rgba(44, 232, 255, 0.03));
+    min-height: 120px;
+
+    strong {
+      color: #fff;
+      font-size: clamp(2.3rem, 4vw, 3.8rem);
+      line-height: 1;
+      font-family: @heading;
+      letter-spacing: 0.08em;
+    }
+
+    span {
+      color: rgba(255, 255, 255, 0.72);
+      font-size: 0.82rem;
+      font-family: @heading;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    li {
+      min-height: 96px;
+
+      strong {
+        font-size: 2rem;
+      }
+    }
+  }
+}
diff --git a/components/Activity/Hackathon/AgendaCountdown.tsx b/components/Activity/Hackathon/AgendaCountdown.tsx
new file mode 100644
index 0000000..7b69487
--- /dev/null
+++ b/components/Activity/Hackathon/AgendaCountdown.tsx
@@ -0,0 +1,48 @@
+import { TableCellValue } from 'mobx-lark';
+import { observer } from 'mobx-react';
+import { FC, useContext, useState } from 'react';
+
+import { Agenda } from '../../../models/Hackathon';
+import { I18nContext } from '../../../models/Translation';
+import { Countdown, TimeUnit } from '../../Base/Countdown';
+import styles from './AgendaCountdown.module.less';
+import { agendaTypeLabelOf, resolveCountdownState } from './utility';
+
+export interface AgendaCountdownProps {
+  agendaItems: Agenda[];
+  endTime?: TableCellValue;
+  startTime?: TableCellValue;
+  units: TimeUnit[];
+}
+
+export const AgendaCountdown: FC<AgendaCountdownProps> = observer(
+  ({ agendaItems, endTime, startTime, units }) => {
+    const { t } = useContext(I18nContext);
+    const [referenceTime, setReferenceTime] = useState(Date.now());
+    const { nextItem: nextAgendaItem, countdownTo } = resolveCountdownState(
+      agendaItems,
+      referenceTime,
+      startTime,
+      endTime,
+    );
+
+    if (!countdownTo) return null;
+
+    const countdownLabel = nextAgendaItem
+      ? agendaTypeLabelOf(nextAgendaItem.type, t, t('agenda'))
+      : t('event_duration');
+
+    return (
+      <div className={styles.wrap}>
+        {countdownLabel && <p className={styles.label}>{countdownLabel}</p>}
+
+        <Countdown
+          className={styles.grid}
+          endTime={countdownTo}
+          onEnd={() => setReferenceTime(Date.now())}
+          units={units}
+        />
+      </div>
+    );
+  },
+);
diff --git a/components/Activity/Hackathon/Hero.module.less b/components/Activity/Hackathon/Hero.module.less
index c04735b..e32e4e4 100644
--- a/components/Activity/Hackathon/Hero.module.less
+++ b/components/Activity/Hackathon/Hero.module.less
@@ -179,54 +179,10 @@
   }
 }
 
-.countdownWrap {
-  display: grid;
-  gap: 0.75rem;
-  max-width: 520px;
-}
-
-.countdownLabel {
-  color: @muted;
-  font-size: 0.72rem;
-  font-family: @heading;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.countdownGrid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.8rem;
-}
-
-.countdownCell {
-  gap: 0.7rem;
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
-    0 0 26px rgba(44, 232, 255, 0.08);
-  border: 1px solid rgba(44, 232, 255, 0.26);
-  border-radius: 18px;
-  background: linear-gradient(180deg, rgba(44, 232, 255, 0.08), rgba(44, 232, 255, 0.03));
-  min-height: 120px;
-
-  strong {
-    color: #fff;
-    font-size: clamp(2.3rem, 4vw, 3.8rem);
-    line-height: 1;
-    font-family: @heading;
-    letter-spacing: 0.08em;
-  }
-
-  span {
-    color: rgba(255, 255, 255, 0.72);
-    font-size: 0.82rem;
-    font-family: @heading;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-  }
-}
-
 .actionButton {
+  // prettier-ignore
+  .button-primary();
+
   box-shadow: 0 0 28px rgba(44, 232, 255, 0.14);
   border-color: rgba(44, 232, 255, 0.48);
   background: rgba(44, 232, 255, 0.08);
@@ -240,6 +196,9 @@
 }
 
 .actionButtonGhost {
+  // prettier-ignore
+  .button-ghost();
+
   border-color: rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.82);
@@ -442,16 +401,4 @@
   .heroBadge {
     font-size: 0.72rem;
   }
-
-  .countdownGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .countdownCell {
-    min-height: 96px;
-
-    strong {
-      font-size: 2rem;
-    }
-  }
 }
diff --git a/components/Activity/Hackathon/Hero.tsx b/components/Activity/Hackathon/Hero.tsx
index 855aee7..60495fb 100644
--- a/components/Activity/Hackathon/Hero.tsx
+++ b/components/Activity/Hackathon/Hero.tsx
@@ -1,8 +1,11 @@
 import { TableCellValue } from 'mobx-lark';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
+import { Agenda } from '../../../models/Hackathon';
 import { LarkImage } from '../../LarkImage';
+import { AgendaCountdown } from './AgendaCountdown';
+import { TimeUnit } from '../../Base/Countdown';
 import styles from './Hero.module.less';
 
 export type HackathonHeroNavItem = Record<'label' | 'href', string>;
@@ -22,13 +25,14 @@ export interface HackathonHeroProps extends Record<
   | 'imageFallback',
   string
 > {
+  agendaItems: Agenda[];
   badges: string[];
   bottomCard?: HackathonHeroCard;
   chips?: string[];
-  countdownLabel?: string;
-  countdownUnitLabels: string[];
-  countdownTo?: string;
+  countdownUnits: TimeUnit[];
+  endTime?: TableCellValue;
   image?: TableCellValue;
+  startTime?: TableCellValue;
   navigation: HackathonHeroNavItem[];
   primaryAction: HackathonHeroAction;
   secondaryAction: HackathonHeroAction;
@@ -74,38 +78,6 @@ const FloatingCard: FC<{
   </div>
 );
 
-const useCountdown = (countdownTo?: string) => {
-  const target = useMemo(() => {
-    const value = countdownTo ? new Date(countdownTo).getTime() : NaN;
-
-    return Number.isFinite(value) ? value : NaN;
-  }, [countdownTo]);
-  const [now, setNow] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (!Number.isFinite(target)) return;
-
-    setNow(Date.now());
-
-    const timer = window.setInterval(() => setNow(Date.now()), 1000);
-
-    return () => window.clearInterval(timer);
-  }, [target]);
-
-  return useMemo(() => {
-    if (!Number.isFinite(target) || now === null) return ['--', '--', '--', '--'];
-
-    const rest = Math.max(0, target - now);
-    const totalSeconds = Math.floor(rest / 1000);
-    const days = Math.floor(totalSeconds / 86400);
-    const hours = Math.floor((totalSeconds % 86400) / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    return [days, hours, minutes, seconds].map(value => String(value).padStart(2, '0'));
-  }, [now, target]);
-};
-
 const splitHeroTitle = (name: string, subtitle: string) => {
   const segments = name.split(/\s+/).filter(Boolean);
 
@@ -122,13 +94,13 @@ const splitHeroTitle = (name: string, subtitle: string) => {
 };
 
 export const HackathonHero: FC<HackathonHeroProps> = ({
+  agendaItems,
   badges,
   bottomCard,
   chips,
-  countdownLabel,
-  countdownUnitLabels,
-  countdownTo,
+  countdownUnits,
   description,
+  endTime,
   image,
   imageFallback,
   locationText,
@@ -136,6 +108,7 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
   navigation,
   primaryAction,
   secondaryAction,
+  startTime,
   subtitle,
   topCard,
   visualChip,
@@ -143,7 +116,6 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
   visualKicker,
   visualTitle,
 }) => {
-  const countdown = useCountdown(countdownTo);
   const title = splitHeroTitle(name, subtitle);
 
   return (
@@ -192,25 +164,12 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
 
             <p className={styles.description}>{description}</p>
 
-            {countdownTo && (
-              <div className={styles.countdownWrap}>
-                {countdownLabel && (
-                  <p className={`${styles.countdownLabel} m-0`}>{countdownLabel}</p>
-                )}
-
-                <ol className={`list-unstyled ${styles.countdownGrid} m-0`}>
-                  {countdown.map((value, index) => (
-                    <li
-                      key={`${index}-${countdownUnitLabels[index]}`}
-                      className={`${styles.countdownCell} d-flex flex-column justify-content-center align-items-center`}
-                    >
-                      <strong>{value}</strong>
-                      <span>{countdownUnitLabels[index]}</span>
-                    </li>
-                  ))}
-                </ol>
-              </div>
-            )}
+            <AgendaCountdown
+              agendaItems={agendaItems}
+              endTime={endTime}
+              startTime={startTime}
+              units={countdownUnits}
+            />
 
             <nav className="d-flex flex-wrap gap-2 gap-md-3" aria-label={subtitle}>
               <HeroLink action={primaryAction} variant="primary" />
diff --git a/components/Activity/Hackathon/constant.ts b/components/Activity/Hackathon/constant.ts
index 1207e45..04f2af6 100644
--- a/components/Activity/Hackathon/constant.ts
+++ b/components/Activity/Hackathon/constant.ts
@@ -91,13 +91,6 @@ export const heroNavigation = ({ t }: typeof i18n) => [
   { href: '#faq', label: t('common_questions') },
 ];
 
-export const buildCountdownUnitLabels = ({ t }: typeof i18n) => [
-  t('countdown_days'),
-  t('countdown_hours'),
-  t('countdown_minutes'),
-  t('countdown_seconds'),
-];
-
 export const buildHighlightCards = (
   { t }: typeof i18n,
   {
diff --git a/components/Activity/Hackathon/useLiveCountdownState.ts b/components/Activity/Hackathon/useLiveCountdownState.ts
deleted file mode 100644
index 09850c6..0000000
--- a/components/Activity/Hackathon/useLiveCountdownState.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { TableCellValue } from 'mobx-lark';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { CountdownWindow, firstTextOf, resolveCountdownState, timeOf } from './utility';
-
-export const useLiveCountdownState = <T extends CountdownWindow>(
-  items: T[],
-  startTime?: TableCellValue,
-  endTime?: TableCellValue,
-) => {
-  const [referenceTime, setReferenceTime] = useState<number | null>(null);
-  const refreshReferenceTime = useCallback(() => setReferenceTime(Date.now()), []);
-
-  useEffect(() => refreshReferenceTime(), [refreshReferenceTime]);
-
-  const countdownState = useMemo(
-    () =>
-      referenceTime === null
-        ? {
-            nextItem: undefined as T | undefined,
-            countdownTo: firstTextOf(startTime) || firstTextOf(endTime) || undefined,
-          }
-        : resolveCountdownState(items, referenceTime, startTime, endTime),
-    [endTime, items, referenceTime, startTime],
-  );
-
-  useEffect(() => {
-    if (referenceTime === null) return;
-
-    const targetTime = timeOf(countdownState.countdownTo);
-
-    if (!Number.isFinite(targetTime)) return;
-
-    const delay = Math.min(2_147_483_647, Math.max(1000, targetTime - Date.now() + 1000));
-    const timer = window.setTimeout(
-      refreshReferenceTime,
-      delay,
-    );
-
-    return () => window.clearTimeout(timer);
-  }, [countdownState.countdownTo, referenceTime, refreshReferenceTime]);
-
-  return countdownState;
-};
diff --git a/components/Base/Countdown.tsx b/components/Base/Countdown.tsx
new file mode 100644
index 0000000..9c45fdc
--- /dev/null
+++ b/components/Base/Countdown.tsx
@@ -0,0 +1,105 @@
+import { computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservedComponent, reaction } from 'mobx-react-helper';
+import { HTMLAttributes } from 'react';
+import { Second, TimeData } from 'web-utility';
+
+export interface TimeUnit {
+  scale: number;
+  label: string;
+}
+
+interface TimeSection {
+  value: number;
+  label: string;
+}
+
+export interface CountdownProps extends HTMLAttributes<HTMLOListElement> {
+  units: TimeUnit[];
+  endTime: TimeData;
+  onEnd?: (endTime: TimeData) => any;
+}
+
+@observer
+export class Countdown extends ObservedComponent<CountdownProps> {
+  @observable
+  accessor rest = 0;
+
+  private timer = 0;
+
+  get endTimestamp() {
+    return +new Date(this.props.endTime || Date.now());
+  }
+
+  @computed
+  get timeSections(): TimeSection[] {
+    const { units } = this.observedProps;
+    let { rest } = this;
+
+    return units.reduce((list, { label }, index) => {
+      const scale = units
+        .slice(index)
+        .map(({ scale }) => scale)
+        .reduce((sum, scale) => sum * scale, 1);
+
+      const value = ~~(rest / scale);
+      rest -= value * scale;
+
+      list.push({ value, label });
+      return list;
+    }, [] as TimeSection[]);
+  }
+
+  tick = () => {
+    const { onEnd, endTime } = this.props,
+      rest = this.endTimestamp - Date.now();
+
+    if (rest > 0) {
+      this.rest = rest;
+    } else {
+      this.rest = 0;
+      this.stop();
+      onEnd?.(endTime);
+    }
+  };
+
+  stop() {
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = 0;
+    }
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+    this.initTimer();
+  }
+
+  @reaction(_this => _this.observedProps.endTime)
+  initTimer() {
+    this.stop();
+    this.tick();
+    this.timer = window.setInterval(this.tick, Second);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.stop();
+  }
+
+  render() {
+    const { className = '', ...props } = this.props;
+    const { timeSections } = this;
+
+    return (
+      <ol className={`list-unstyled m-0 ${className}`} {...props}>
+        {timeSections.map(({ value, label }) => (
+          <li key={label} className="d-flex flex-column justify-content-center align-items-center">
+            <strong>{(value + '').padStart(2, '0')}</strong>
+            <span>{label}</span>
+          </li>
+        ))}
+      </ol>
+    );
+  }
+}
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index df679ed..8243d8a 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -8,33 +8,9 @@ import {
   HackathonActionHubLink,
 } from '../../components/Activity/Hackathon/ActionHub';
 import { HackathonAwards } from '../../components/Activity/Hackathon/Awards';
-import { HackathonFAQ } from '../../components/Activity/Hackathon/FAQ';
-import { HackathonHero } from '../../components/Activity/Hackathon/Hero';
-import { HackathonOverview } from '../../components/Activity/Hackathon/Overview';
-import { HackathonParticipants } from '../../components/Activity/Hackathon/Participants';
-import { HackathonResources } from '../../components/Activity/Hackathon/Resources';
-import { HackathonSchedule } from '../../components/Activity/Hackathon/Schedule';
-import { useLiveCountdownState } from '../../components/Activity/Hackathon/useLiveCountdownState';
-import { PageHead } from '../../components/Layout/PageHead';
-import { Activity, ActivityModel } from '../../models/Activity';
 import {
-  Agenda,
-  AgendaModel,
-  Organization,
-  OrganizationModel,
-  Person,
-  PersonModel,
-  Prize,
-  PrizeModel,
-  Project,
-  ProjectModel,
-  Template,
-  TemplateModel,
-} from '../../models/Hackathon';
-import { I18nContext } from '../../models/Translation';
-import {
-  buildCountdownUnitLabels,
   buildFAQItems,
+  buildFormSectionMeta,
   buildHighlightCards,
   buildJudgingCriteria,
   buildOrganizationItems,
@@ -46,10 +22,16 @@ import {
   FormButtonBar,
   FormGroupKey,
   FormGroupView,
-  buildFormSectionMeta,
   heroNavigation,
   RequiredTableKeys,
 } from '../../components/Activity/Hackathon/constant';
+import { TimeUnit } from '../../components/Base/Countdown';
+import { HackathonFAQ } from '../../components/Activity/Hackathon/FAQ';
+import { HackathonHero } from '../../components/Activity/Hackathon/Hero';
+import { HackathonOverview } from '../../components/Activity/Hackathon/Overview';
+import { HackathonParticipants } from '../../components/Activity/Hackathon/Participants';
+import { HackathonResources } from '../../components/Activity/Hackathon/Resources';
+import { HackathonSchedule } from '../../components/Activity/Hackathon/Schedule';
 import {
   agendaTypeLabelOf,
   compactDateKeyOf,
@@ -63,6 +45,23 @@ import {
   previewText,
   timeOf,
 } from '../../components/Activity/Hackathon/utility';
+import { PageHead } from '../../components/Layout/PageHead';
+import { Activity, ActivityModel } from '../../models/Activity';
+import {
+  Agenda,
+  AgendaModel,
+  Organization,
+  OrganizationModel,
+  Person,
+  PersonModel,
+  Prize,
+  PrizeModel,
+  Project,
+  ProjectModel,
+  Template,
+  TemplateModel,
+} from '../../models/Hackathon';
+import { I18nContext } from '../../models/Translation';
 
 interface HackathonDetailProps {
   activity: Activity;
@@ -170,7 +169,12 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
     activityType ? `🎯 ${activityType as string}` : `🎯 ${t('hackathon')}`,
     ...scheduleOverviewPills.slice(0, 4),
   ].filter(Boolean) as string[];
-  const countdownUnitLabels = buildCountdownUnitLabels(i18n);
+  const countdownUnits: TimeUnit[] = [
+    { scale: 24, label: t('countdown_days') },
+    { scale: 60, label: t('countdown_hours') },
+    { scale: 60, label: t('countdown_minutes') },
+    { scale: 1000, label: t('countdown_seconds') },
+  ];
   const heroPrimaryActionLabel = t('hackathon_register_now');
   const scheduleKeyDates = agendaItems
     .slice(0, 6)
@@ -189,14 +193,6 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       };
     })
     .filter(({ date, label }) => Boolean(date && label));
-  const { nextItem: nextAgendaItem, countdownTo } = useLiveCountdownState(
-    agendaItems,
-    startTime,
-    endTime,
-  );
-  const countdownLabel = nextAgendaItem
-    ? agendaTypeLabelOf(nextAgendaItem.type, t, t('agenda'))
-    : t('event_duration');
   const enrollmentPhase = agendaItems.find(
     ({ type }) => normalizeAgendaType(type) === 'enrollment',
   );
@@ -330,6 +326,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       <PageHead title={name as string} />
 
       <HackathonHero
+        agendaItems={agendaItems}
         badges={heroBadges}
         bottomCard={
           agendaItems[0] || agendaItems[agendaItems.length - 1]
@@ -349,10 +346,9 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
               }
             : undefined
         }
-        countdownLabel={countdownLabel}
-        countdownUnitLabels={countdownUnitLabels}
-        countdownTo={countdownTo}
+        countdownUnits={countdownUnits}
         description={summaryText}
+        endTime={endTime}
         image={image}
         imageFallback={(activityType as string) || t('hackathon')}
         locationText={locationText}
@@ -360,6 +356,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
         navigation={heroNavigation(i18n)}
         primaryAction={heroPrimaryAction}
         secondaryAction={{ label: t('agenda'), href: '#schedule' }}
+        startTime={startTime}
         chips={heroStatChips}
         subtitle={(activityType as string) || t('hackathon_detail')}
         topCard={