diff --git a/src/App.jsx b/src/App.jsx
index 2bafff2..53d2df4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -65,6 +65,10 @@ import SmartAlertsDashboard from "./components/SmartAlertsDashboard";
 import OceanAcidificationMonitor from "./components/OceanAcidificationMonitor";
 
 import HealthImpactDashboard from "./components/HealthImpactDashboard";
+import DataExportDashboard from "./components/DataExportDashboard";
+import CityComparisonReport from "./components/CityComparisonReport";
+import ExposureTimelineTracker from "./components/ExposureTimelineTracker";
+import AlertRulesEngine from "./components/AlertRulesEngine";
 
 const AqiMissionGame = lazy(() => import("./components/AqiMissionGame"));
 const HotspotScoutGame = lazy(() => import("./components/HotspotScoutGame"));
@@ -360,6 +364,10 @@ export function SectionNav({ activeSection, onSectionChange }) {
     { id: "smart-alerts", label: "Smart Alerts" },
     { id: "ocean-acid", label: "Ocean Acidification" },
     { id: "health-impact", label: "Health Impact" },
+    { id: "data-export", label: "Data Export" },
+    { id: "city-comparison-report", label: "City Compare Report" },
+    { id: "exposure-timeline", label: "Exposure Timeline" },
+    { id: "alert-rules", label: "Alert Rules" },
   ];
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef(null);
@@ -1280,6 +1288,69 @@ function AppContent() {
             {activeSection === "ocean-acid" && <OceanAcidificationMonitor />}
 
             {activeSection === "health-impact" && <HealthImpactDashboard />}
+            {activeSection === "data-export" && (
+              <div
+                className="content-grid data-export-layout"
+                style={{
+                  maxWidth: "1200px",
+                  margin: "2rem auto",
+                  width: "100%",
+                  display: "block",
+                }}
+              >
+                <DataExportDashboard
+                  trend={trend}
+                  current={current}
+                  cityName={position.cityName}
+                  position={position}
+                />
+              </div>
+            )}
+            {activeSection === "city-comparison-report" && (
+              <div
+                className="content-grid city-comparison-report-layout"
+                style={{
+                  maxWidth: "1200px",
+                  margin: "2rem auto",
+                  width: "100%",
+                  display: "block",
+                }}
+              >
+                <CityComparisonReport
+                  savedLocations={savedLocations}
+                  cityName={position.cityName}
+                />
+              </div>
+            )}
+            {activeSection === "exposure-timeline" && (
+              <div
+                className="content-grid exposure-timeline-layout"
+                style={{
+                  maxWidth: "1200px",
+                  margin: "2rem auto",
+                  width: "100%",
+                  display: "block",
+                }}
+              >
+                <ExposureTimelineTracker
+                  current={current}
+                  cityName={position.cityName}
+                />
+              </div>
+            )}
+            {activeSection === "alert-rules" && (
+              <div
+                className="content-grid alert-rules-layout"
+                style={{
+                  maxWidth: "1200px",
+                  margin: "2rem auto",
+                  width: "100%",
+                  display: "block",
+                }}
+              >
+                <AlertRulesEngine current={current} />
+              </div>
+            )}
             {activeSection === "CarbonCalculator" && (
               <div
                 className="content-grid carbon-calculator-layout"
diff --git a/src/components/AlertRulesEngine.jsx b/src/components/AlertRulesEngine.jsx
new file mode 100644
index 0000000..b728caf
--- /dev/null
+++ b/src/components/AlertRulesEngine.jsx
@@ -0,0 +1,381 @@
+import { useState, useMemo, useCallback, memo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  readRules,
+  createRule,
+  updateRule,
+  deleteRule,
+  toggleRule,
+  evaluateRules,
+  sendNotification,
+  requestNotificationPermission,
+  POLLUTANT_OPTIONS,
+  OPERATORS,
+  TIME_WINDOWS,
+  THROTTLE_OPTIONS,
+  PRESET_RULES,
+} from "../services/alertRulesService";
+import styles from "./AlertRulesEngine.module.css";
+
+// ---------------------------------------------------------------------------
+// Memoized sub-components
+// ---------------------------------------------------------------------------
+
+const StatCard = memo(function StatCard({ icon, value, label }) {
+  return (
+    <div className={styles.statCard}>
+      <span className={styles.statIcon} aria-hidden="true">{icon}</span>
+      <span className={styles.statValue}>{value}</span>
+      <span className={styles.statLabel}>{label}</span>
+    </div>
+  );
+});
+
+const RuleCard = memo(function RuleCard({ rule, onToggle, onDelete, onEdit }) {
+  const pollutant = POLLUTANT_OPTIONS.find((p) => p.key === rule.pollutant);
+  const operator = OPERATORS.find((o) => o.key === rule.operator);
+  const timeWindow = TIME_WINDOWS.find((tw) => tw.key === rule.timeWindow);
+  const severityCls = rule.severity === "critical" ? styles.severityCritical
+    : rule.severity === "warning" ? styles.severityWarning
+    : styles.severityInfo;
+  const cardCls = rule.enabled ? styles.ruleEnabled : styles.ruleDisabled;
+  const sevBorder = rule.severity === "critical" ? styles.ruleSeverityCritical
+    : rule.severity === "warning" ? styles.ruleSeverityWarning
+    : styles.ruleSeverityInfo;
+
+  return (
+    <div className={`${styles.ruleCard} ${cardCls} ${sevBorder}`} data-testid="rule-card">
+      <button
+        type="button"
+        className={`${styles.ruleToggle} ${rule.enabled ? styles.ruleToggleOn : ""}`}
+        onClick={() => onToggle(rule.id)}
+        aria-label={rule.enabled ? "Disable rule" : "Enable rule"}
+        data-testid="rule-toggle"
+      />
+      <div className={styles.ruleContent}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", flexWrap: "wrap" }}>
+          <p className={styles.ruleName}>{rule.name}</p>
+          <span className={`${styles.severityBadge} ${severityCls}`}>{rule.severity}</span>
+        </div>
+        <p className={styles.ruleCondition}>
+          {pollutant?.label} {operator?.symbol} {rule.threshold} {pollutant?.unit}
+          {rule.timeWindow !== "any" && ` · ${timeWindow?.label}`}
+        </p>
+        <p className={styles.ruleMeta}>
+          Throttle: every {rule.throttleHours}h
+          {rule.lastFired ? ` · Last fired: ${new Date(rule.lastFired).toLocaleTimeString()}` : ""}
+        </p>
+      </div>
+      <div className={styles.ruleActions}>
+        <button type="button" className={`${styles.btn} ${styles.btnSmall}`} onClick={() => onEdit(rule)} aria-label="Edit rule" data-testid="edit-btn">✏️</button>
+        <button type="button" className={`${styles.btn} ${styles.btnSmall} ${styles.btnDanger}`} onClick={() => onDelete(rule.id)} aria-label="Delete rule" data-testid="delete-btn">🗑️</button>
+      </div>
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export default function AlertRulesEngine({ current }) {
+  const { t } = useTranslation();
+  const [rules, setRules] = useState(() => readRules());
+  const [showForm, setShowForm] = useState(false);
+  const [editingRule, setEditingRule] = useState(null);
+  const [toastMessage, setToastMessage] = useState("");
+  const [notifPermission, setNotifPermission] = useState("unknown");
+
+  // Form state
+  const [formName, setFormName] = useState("");
+  const [formPollutant, setFormPollutant] = useState("us_aqi");
+  const [formOperator, setFormOperator] = useState("above");
+  const [formThreshold, setFormThreshold] = useState("100");
+  const [formTimeWindow, setFormTimeWindow] = useState("any");
+  const [formThrottle, setFormThrottle] = useState(6);
+  const [formSeverity, setFormSeverity] = useState("warning");
+
+  // Evaluate rules on current data
+  const triggeredCount = useMemo(() => {
+    if (!current) return 0;
+    const { triggered } = evaluateRules(current);
+    // Send notifications for triggered rules
+    for (const rule of triggered) {
+      sendNotification(rule, current);
+    }
+    return triggered.length;
+  }, [current]);
+
+  // Check notification permission on mount
+  useEffect(() => {
+    setNotifPermission(requestNotificationPermission());
+  }, []);
+
+  const showToast = useCallback((msg) => {
+    setToastMessage(msg);
+    setTimeout(() => setToastMessage(""), 2500);
+  }, []);
+
+  const refreshRules = useCallback(() => {
+    setRules(readRules());
+  }, []);
+
+  // Stats
+  const activeRules = useMemo(() => rules.filter((r) => r.enabled), [rules]);
+  const totalRules = rules.length;
+
+  // Form handlers
+  const resetForm = useCallback(() => {
+    setFormName("");
+    setFormPollutant("us_aqi");
+    setFormOperator("above");
+    setFormThreshold("100");
+    setFormTimeWindow("any");
+    setFormThrottle(6);
+    setFormSeverity("warning");
+    setEditingRule(null);
+    setShowForm(false);
+  }, []);
+
+  const handleEdit = useCallback((rule) => {
+    setEditingRule(rule);
+    setFormName(rule.name);
+    setFormPollutant(rule.pollutant);
+    setFormOperator(rule.operator);
+    setFormThreshold(String(rule.threshold));
+    setFormTimeWindow(rule.timeWindow);
+    setFormThrottle(rule.throttleHours);
+    setFormSeverity(rule.severity);
+    setShowForm(true);
+  }, []);
+
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault();
+    const threshold = parseFloat(formThreshold);
+    if (!Number.isFinite(threshold)) {
+      showToast(t("alerts.invalidThreshold", "Please enter a valid threshold"));
+      return;
+    }
+
+    const data = {
+      name: formName || "Alert Rule",
+      pollutant: formPollutant,
+      operator: formOperator,
+      threshold,
+      timeWindow: formTimeWindow,
+      throttleHours: formThrottle,
+      severity: formSeverity,
+    };
+
+    if (editingRule) {
+      updateRule(editingRule.id, data);
+      showToast(t("alerts.updated", "Rule updated!"));
+    } else {
+      createRule(data);
+      showToast(t("alerts.created", "Rule created!"));
+    }
+
+    refreshRules();
+    resetForm();
+  }, [formName, formPollutant, formOperator, formThreshold, formTimeWindow, formThrottle, formSeverity, editingRule, t, showToast, refreshRules, resetForm]);
+
+  const handleDelete = useCallback((id) => {
+    if (typeof window !== "undefined" && window.confirm("Delete this alert rule?")) {
+      deleteRule(id);
+      refreshRules();
+      showToast(t("alerts.deleted", "Rule deleted"));
+    }
+  }, [refreshRules, t, showToast]);
+
+  const handleToggle = useCallback((id) => {
+    toggleRule(id);
+    refreshRules();
+  }, [refreshRules]);
+
+  const handleAddPreset = useCallback((preset) => {
+    createRule(preset);
+    refreshRules();
+    showToast(t("alerts.presetAdded", "Preset rule added!"));
+  }, [refreshRules, t, showToast]);
+
+  const handleEnableNotifications = useCallback(async () => {
+    const result = await requestNotificationPermission();
+    setNotifPermission(result);
+    if (result === "granted") {
+      showToast(t("alerts.notifsEnabled", "Notifications enabled!"));
+    } else {
+      showToast(t("alerts.notifsDenied", "Notifications blocked by browser"));
+    }
+  }, [t, showToast]);
+
+  return (
+    <section data-testid="alert-rules-engine" className="panel">
+      <div className={styles.root}>
+        {/* Header */}
+        <div className={styles.header}>
+          <h2 className={styles.headerTitle}>🔔 {t("alerts.title", "Alert Rules Engine")}</h2>
+          <p className={styles.headerSubtitle}>{t("alerts.subtitle", "Create custom alert rules based on AQI thresholds and conditions")}</p>
+        </div>
+
+        {/* Stats */}
+        <div className={styles.statsRow} data-testid="stats-row">
+          <StatCard icon="📋" value={totalRules} label={t("alerts.totalRules", "Total Rules")} />
+          <StatCard icon="✅" value={activeRules.length} label={t("alerts.activeRules", "Active")} />
+          <StatCard icon="🔔" value={triggeredCount} label={t("alerts.triggered", "Triggered Now")} />
+          <StatCard
+            icon="📢"
+            value={notifPermission === "granted" ? "On" : "Off"}
+            label={t("alerts.notifications", "Notifications")}
+          />
+        </div>
+
+        {/* Notification permission */}
+        {notifPermission !== "granted" && (
+          <div style={{ textAlign: "center" }}>
+            <button type="button" className={`${styles.btn} ${styles.btnPrimary}`} onClick={handleEnableNotifications}>
+              🔔 {t("alerts.enableNotifs", "Enable Browser Notifications")}
+            </button>
+          </div>
+        )}
+
+        {/* Create / Edit form */}
+        <div className={styles.section}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.75rem" }}>
+            <h3 className={styles.sectionTitle} style={{ margin: 0 }}>📝 {editingRule ? t("alerts.editRule", "Edit Rule") : t("alerts.createRule", "Create Rule")}</h3>
+            <button
+              type="button"
+              className={`${styles.btn} ${showForm ? "" : styles.btnPrimary}`}
+              onClick={() => { if (showForm) resetForm(); else setShowForm(true); }}
+            >
+              {showForm ? "✕ Cancel" : "+ " + t("alerts.newRule", "New Rule")}
+            </button>
+          </div>
+
+          {showForm && (
+            <form className={styles.form} onSubmit={handleSubmit} data-testid="rule-form">
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-name">{t("alerts.name", "Name")}</label>
+                <input
+                  id="rule-name"
+                  type="text"
+                  className={styles.formInput}
+                  value={formName}
+                  onChange={(e) => setFormName(e.target.value)}
+                  placeholder={t("alerts.namePlaceholder", "e.g. High PM2.5 Alert")}
+                />
+              </div>
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-pollutant">{t("alerts.pollutant", "Pollutant")}</label>
+                <select id="rule-pollutant" className={styles.formSelect} value={formPollutant} onChange={(e) => setFormPollutant(e.target.value)}>
+                  {POLLUTANT_OPTIONS.map((p) => (
+                    <option key={p.key} value={p.key}>{p.label} {p.unit ? `(${p.unit})` : ""}</option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-operator">{t("alerts.condition", "Condition")}</label>
+                <select id="rule-operator" className={styles.formSelect} value={formOperator} onChange={(e) => setFormOperator(e.target.value)}>
+                  {OPERATORS.map((o) => (
+                    <option key={o.key} value={o.key}>{o.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-threshold">{t("alerts.threshold", "Threshold")}</label>
+                <input
+                  id="rule-threshold"
+                  type="number"
+                  className={styles.formInput}
+                  value={formThreshold}
+                  onChange={(e) => setFormThreshold(e.target.value)}
+                  min="0"
+                  step="1"
+                />
+              </div>
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-timewindow">{t("alerts.timeWindow", "Time Window")}</label>
+                <select id="rule-timewindow" className={styles.formSelect} value={formTimeWindow} onChange={(e) => setFormTimeWindow(e.target.value)}>
+                  {TIME_WINDOWS.map((tw) => (
+                    <option key={tw.key} value={tw.key}>{tw.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-throttle">{t("alerts.frequency", "Frequency")}</label>
+                <select id="rule-throttle" className={styles.formSelect} value={formThrottle} onChange={(e) => setFormThrottle(Number(e.target.value))}>
+                  {THROTTLE_OPTIONS.map((t) => (
+                    <option key={t.key} value={t.key}>{t.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formGroup}>
+                <label className={styles.formLabel} htmlFor="rule-severity">{t("alerts.severity", "Severity")}</label>
+                <select id="rule-severity" className={styles.formSelect} value={formSeverity} onChange={(e) => setFormSeverity(e.target.value)}>
+                  <option value="info">🔵 Info</option>
+                  <option value="warning">🟠 Warning</option>
+                  <option value="critical">🔴 Critical</option>
+                </select>
+              </div>
+              <div className={styles.formActions}>
+                <button type="button" className={styles.btn} onClick={resetForm}>{t("alerts.cancel", "Cancel")}</button>
+                <button type="submit" className={`${styles.btn} ${styles.btnPrimary}`}>
+                  {editingRule ? t("alerts.update", "Update") : t("alerts.create", "Create")} {t("alerts.rule", "Rule")}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+
+        {/* Active Rules */}
+        <div className={styles.section} data-testid="rules-list">
+          <h3 className={styles.sectionTitle}>📋 {t("alerts.yourRules", "Your Rules")} ({rules.length})</h3>
+          {rules.length === 0 ? (
+            <div className={styles.emptyState}>
+              <p className={styles.emptyText}>{t("alerts.noRules", "No rules yet. Create one above or add a preset below.")}</p>
+            </div>
+          ) : (
+            <div className={styles.rulesList}>
+              {rules.map((rule) => (
+                <RuleCard
+                  key={rule.id}
+                  rule={rule}
+                  onToggle={handleToggle}
+                  onDelete={handleDelete}
+                  onEdit={handleEdit}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Preset Rules */}
+        <div className={styles.section} data-testid="presets-section">
+          <h3 className={styles.sectionTitle}>⚡ {t("alerts.presetRules", "Quick Preset Rules")}</h3>
+          <div className={styles.presetGrid}>
+            {PRESET_RULES.map((preset, idx) => (
+              <button
+                key={idx}
+                type="button"
+                className={styles.presetCard}
+                onClick={() => handleAddPreset(preset)}
+                data-testid="preset-card"
+              >
+                <p className={styles.presetName}>{preset.name}</p>
+                <p className={styles.presetDesc}>
+                  {POLLUTANT_OPTIONS.find((p) => p.key === preset.pollutant)?.label}{" "}
+                  {OPERATORS.find((o) => o.key === preset.operator)?.symbol} {preset.threshold}
+                  {preset.timeWindow !== "any" && ` · ${TIME_WINDOWS.find((tw) => tw.key === preset.timeWindow)?.label}`}
+                </p>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Toast */}
+        <div className={`${styles.toast} ${toastMessage ? styles.toastVisible : ""}`} role="status" aria-live="polite">
+          {toastMessage}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/AlertRulesEngine.module.css b/src/components/AlertRulesEngine.module.css
new file mode 100644
index 0000000..0bd5839
--- /dev/null
+++ b/src/components/AlertRulesEngine.module.css
@@ -0,0 +1,221 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.header { text-align: center; }
+.headerTitle { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--text-primary, #0f172a); }
+.headerSubtitle { font-size: 0.95rem; color: var(--text-secondary, #64748b); margin: 0; }
+
+/* Stats row */
+.statsRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 0.75rem;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.85rem 0.5rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.65rem;
+  text-align: center;
+}
+
+.statIcon { font-size: 1.3rem; margin-bottom: 0.2rem; }
+.statValue { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #0f172a); }
+.statLabel { font-size: 0.7rem; color: var(--text-secondary, #64748b); margin-top: 0.15rem; }
+
+/* Section card */
+.section {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.sectionTitle {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+  color: var(--text-primary, #0f172a);
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+/* Create form */
+.form {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--bg-secondary, #f8fafc);
+  border-radius: 0.5rem;
+  border: 1px dashed var(--border-color, #cbd5e1);
+}
+
+@media (max-width: 700px) {
+  .form { grid-template-columns: 1fr; }
+}
+
+.formGroup { display: flex; flex-direction: column; gap: 0.25rem; }
+.formLabel { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #475569); }
+
+.formInput, .formSelect {
+  padding: 0.45rem 0.65rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  border-radius: 0.4rem;
+  font-size: 0.82rem;
+  background: var(--bg-card, #fff);
+  color: var(--text-primary, #0f172a);
+}
+
+.formInput:focus, .formSelect:focus { outline: 2px solid var(--brand, #0d9488); outline-offset: 1px; }
+
+.formFullWidth { grid-column: 1 / -1; }
+
+.formActions {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  border-radius: 0.4rem;
+  background: var(--bg-card, #fff);
+  color: var(--text-primary, #0f172a);
+  font-weight: 600;
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.btn:hover { background: var(--bg-secondary, #f8fafc); }
+.btnPrimary { background: var(--brand, #0d9488); color: #fff; border-color: var(--brand, #0d9488); }
+.btnPrimary:hover { background: #0b8577; }
+.btnDanger { color: #ef4444; border-color: #ef4444; }
+.btnDanger:hover { background: #fef2f2; }
+.btnSmall { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
+
+/* Rules list */
+.rulesList { display: flex; flex-direction: column; gap: 0.5rem; }
+
+.ruleCard {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  background: var(--bg-secondary, #f8fafc);
+  border-radius: 0.5rem;
+  border-left: 4px solid transparent;
+  transition: transform 0.1s;
+}
+
+.ruleCard:hover { transform: translateX(2px); }
+.ruleEnabled { opacity: 1; }
+.ruleDisabled { opacity: 0.5; }
+
+.ruleSeverityCritical { border-left-color: #ef4444; }
+.ruleSeverityWarning { border-left-color: #f59e0b; }
+.ruleSeverityInfo { border-left-color: #3b82f6; }
+
+.ruleToggle {
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.2s;
+  background: #cbd5e1;
+  flex-shrink: 0;
+}
+
+.ruleToggleOn { background: var(--brand, #0d9488); }
+
+.ruleToggle::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.ruleToggleOn::after { transform: translateX(18px); }
+
+.ruleContent { min-width: 0; }
+.ruleName { font-size: 0.9rem; font-weight: 600; color: var(--text-primary, #0f172a); margin: 0; }
+.ruleCondition { font-size: 0.75rem; color: var(--text-secondary, #64748b); margin: 0.2rem 0 0; }
+.ruleMeta { font-size: 0.68rem; color: var(--text-secondary, #94a3b8); margin: 0.15rem 0 0; }
+
+.ruleActions { display: flex; gap: 0.35rem; flex-shrink: 0; }
+
+/* Severity badge */
+.severityBadge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 0.1rem 0.4rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.severityCritical { background: #fef2f2; color: #ef4444; }
+.severityWarning { background: #fffbeb; color: #f59e0b; }
+.severityInfo { background: #eff6ff; color: #3b82f6; }
+
+/* Preset grid */
+.presetGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.75rem;
+}
+
+.presetCard {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.85rem;
+  background: var(--bg-secondary, #f8fafc);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+
+.presetCard:hover { border-color: var(--brand, #0d9488); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
+
+.presetName { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #0f172a); margin: 0; }
+.presetDesc { font-size: 0.75rem; color: var(--text-secondary, #64748b); margin: 0; }
+
+/* Toast */
+.toast {
+  position: fixed; bottom: 1.5rem; left: 50%;
+  transform: translateX(-50%) translateY(120%);
+  background: #1e293b; color: #fff;
+  padding: 0.65rem 1.25rem; border-radius: 0.5rem;
+  font-size: 0.85rem; font-weight: 500; z-index: 9999;
+  opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease;
+  pointer-events: none;
+}
+.toastVisible { transform: translateX(-50%) translateY(0); opacity: 1; }
+
+/* Empty state */
+.emptyState { text-align: center; padding: 2rem 1rem; color: var(--text-secondary, #94a3b8); }
+.emptyText { font-size: 0.9rem; margin: 0; }
diff --git a/src/components/AlertRulesEngine.test.jsx b/src/components/AlertRulesEngine.test.jsx
new file mode 100644
index 0000000..9467d58
--- /dev/null
+++ b/src/components/AlertRulesEngine.test.jsx
@@ -0,0 +1,168 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import AlertRulesEngine from "./AlertRulesEngine";
+import {
+  readRules,
+  writeRules,
+  createRule,
+  updateRule,
+  deleteRule,
+  toggleRule,
+  evaluateRules,
+  POLLUTANT_OPTIONS,
+  OPERATORS,
+  TIME_WINDOWS,
+  THROTTLE_OPTIONS,
+  PRESET_RULES,
+} from "../services/alertRulesService";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key, opts) => (typeof opts === "string" ? opts : opts?.defaultValue || key),
+  }),
+}));
+
+// ---------------------------------------------------------------------------
+// Service tests
+// ---------------------------------------------------------------------------
+describe("alertRulesService", () => {
+  beforeEach(() => {
+    // Clear localStorage
+    try { localStorage.clear(); } catch { /* ignore */ }
+  });
+
+  describe("CRUD operations", () => {
+    it("creates a rule with generated ID", () => {
+      const rule = createRule({ name: "Test Rule", threshold: 120 });
+      expect(rule.id).toMatch(/^rule_/);
+      expect(rule.name).toBe("Test Rule");
+      expect(rule.threshold).toBe(120);
+      expect(rule.enabled).toBe(true);
+    });
+
+    it("persists and reads rules", () => {
+      createRule({ name: "Rule 1" });
+      createRule({ name: "Rule 2" });
+      const rules = readRules();
+      expect(rules.length).toBe(2);
+      expect(rules[0].name).toBe("Rule 1");
+      expect(rules[1].name).toBe("Rule 2");
+    });
+
+    it("updates a rule by ID", () => {
+      const rule = createRule({ name: "Original" });
+      const updated = updateRule(rule.id, { name: "Updated", threshold: 200 });
+      expect(updated.name).toBe("Updated");
+      expect(updated.threshold).toBe(200);
+      expect(readRules().find((r) => r.id === rule.id).name).toBe("Updated");
+    });
+
+    it("returns null when updating non-existent rule", () => {
+      expect(updateRule("nonexistent", { name: "X" })).toBeNull();
+    });
+
+    it("deletes a rule by ID", () => {
+      const rule = createRule({ name: "Delete Me" });
+      expect(deleteRule(rule.id)).toBe(true);
+      expect(readRules().find((r) => r.id === rule.id)).toBeUndefined();
+    });
+
+    it("returns false when deleting non-existent rule", () => {
+      expect(deleteRule("nonexistent")).toBe(false);
+    });
+
+    it("toggles rule enabled state", () => {
+      const rule = createRule({ name: "Toggle Me", enabled: true });
+      const toggled = toggleRule(rule.id);
+      expect(toggled.enabled).toBe(false);
+      const toggledAgain = toggleRule(rule.id);
+      expect(toggledAgain.enabled).toBe(true);
+    });
+  });
+
+  describe("evaluateRules", () => {
+    it("triggers rule when threshold is met", () => {
+      createRule({ name: "High AQI", pollutant: "us_aqi", operator: "above", threshold: 100, timeWindow: "any", throttleHours: 0, enabled: true });
+      const current = { us_aqi: 150, pm2_5: 40, pm10: 60, nitrogen_dioxide: 25, ozone: 35, carbon_monoxide: 0.8 };
+      const { triggered } = evaluateRules(current);
+      expect(triggered.length).toBe(1);
+      expect(triggered[0].name).toBe("High AQI");
+    });
+
+    it("does not trigger when threshold not met", () => {
+      createRule({ name: "High AQI", pollutant: "us_aqi", operator: "above", threshold: 200, timeWindow: "any", throttleHours: 0, enabled: true });
+      const current = { us_aqi: 150 };
+      const { triggered } = evaluateRules(current);
+      expect(triggered.length).toBe(0);
+    });
+
+    it("does not trigger disabled rules", () => {
+      createRule({ name: "Disabled", pollutant: "us_aqi", operator: "above", threshold: 50, timeWindow: "any", throttleHours: 0, enabled: false });
+      const current = { us_aqi: 150 };
+      const { triggered } = evaluateRules(current);
+      expect(triggered.length).toBe(0);
+    });
+
+    it("handles below operator", () => {
+      createRule({ name: "Low AQI", pollutant: "us_aqi", operator: "below", threshold: 50, timeWindow: "any", throttleHours: 0, enabled: true });
+      const current = { us_aqi: 30 };
+      const { triggered } = evaluateRules(current);
+      expect(triggered.length).toBe(1);
+    });
+
+    it("returns empty for null current", () => {
+      const { triggered } = evaluateRules(null);
+      expect(triggered).toEqual([]);
+    });
+  });
+
+  describe("constants", () => {
+    it("exports all expected arrays", () => {
+      expect(POLLUTANT_OPTIONS.length).toBeGreaterThan(0);
+      expect(OPERATORS.length).toBe(3);
+      expect(TIME_WINDOWS.length).toBeGreaterThan(0);
+      expect(THROTTLE_OPTIONS.length).toBeGreaterThan(0);
+      expect(PRESET_RULES.length).toBeGreaterThan(0);
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Component tests
+// ---------------------------------------------------------------------------
+describe("AlertRulesEngine", () => {
+  it("renders the panel with title", () => {
+    render(<AlertRulesEngine current={{ us_aqi: 80 }} />);
+    expect(screen.getByTestId("alert-rules-engine")).toBeTruthy();
+    expect(screen.getByText(/Alert Rules Engine/)).toBeTruthy();
+  });
+
+  it("displays stats row", () => {
+    render(<AlertRulesEngine current={{ us_aqi: 80 }} />);
+    expect(screen.getByTestId("stats-row")).toBeTruthy();
+  });
+
+  it("displays rules list section", () => {
+    render(<AlertRulesEngine current={{ us_aqi: 80 }} />);
+    expect(screen.getByTestId("rules-list")).toBeTruthy();
+  });
+
+  it("displays presets section", () => {
+    render(<AlertRulesEngine current={{ us_aqi: 80 }} />);
+    expect(screen.getByTestId("presets-section")).toBeTruthy();
+  });
+
+  it("shows empty state when no rules", () => {
+    render(<AlertRulesEngine current={{ us_aqi: 80 }} />);
+    expect(screen.getByText(/No rules yet/)).toBeTruthy();
+  });
+
+  it("shows form when New Rule is clicked", () => {
+    render(<AlertRulesEngine current={{ us_aqi: 80 }} />);
+    fireEvent.click(screen.getByText(/New Rule/));
+    expect(screen.getByTestId("rule-form")).toBeTruthy();
+  });
+});
diff --git a/src/components/CityComparisonReport.jsx b/src/components/CityComparisonReport.jsx
new file mode 100644
index 0000000..3b74ba6
--- /dev/null
+++ b/src/components/CityComparisonReport.jsx
@@ -0,0 +1,343 @@
+import { useState, useMemo, useCallback, memo } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Cell,
+} from "recharts";
+import { useSWR } from "../hooks/useSWR";
+import { fetchCityComparisons } from "../services/airQualityService";
+import {
+  rankCities,
+  getAQIBand,
+  categoriseByRisk,
+  comparePollutants,
+  comparisonToCSV,
+  generateComparisonSummary,
+} from "../services/cityComparisonReportService";
+import { triggerDownload, copyToClipboard } from "../services/dataExportService";
+import styles from "./CityComparisonReport.module.css";
+
+// ---------------------------------------------------------------------------
+// Memoized sub-components
+// ---------------------------------------------------------------------------
+
+const StatCard = memo(function StatCard({ icon, value, label, color }) {
+  return (
+    <div className={styles.statCard}>
+      <span className={styles.statIcon} aria-hidden="true">{icon}</span>
+      <span className={styles.statValue} style={color ? { color } : undefined}>{value}</span>
+      <span className={styles.statLabel}>{label}</span>
+    </div>
+  );
+});
+
+const RankingItem = memo(function RankingItem({ city }) {
+  const rankEmoji = city.rank === 1 ? "🥇" : city.rank === 2 ? "🥈" : city.rank === 3 ? "🥉" : `#${city.rank}`;
+  return (
+    <div className={styles.rankingItem} data-rank={city.rank} data-testid="ranking-item">
+      <span className={styles.rankBadge}>{rankEmoji}</span>
+      <span className={styles.cityName}>{city.name}</span>
+      <span className={styles.aqiValue} style={{ color: city.band?.color }}>
+        {city.aqi}
+      </span>
+      <span
+        className={styles.bandBadge}
+        style={{ background: `${city.band?.color}20`, color: city.band?.color }}
+      >
+        {city.band?.label}
+      </span>
+    </div>
+  );
+});
+
+function ChartTooltip({ active, payload, label }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div style={{
+      background: "var(--bg-card, #fff)",
+      border: "1px solid var(--border-color, #e2e8f0)",
+      borderRadius: "0.5rem",
+      padding: "0.5rem 0.75rem",
+      fontSize: "0.78rem",
+      boxShadow: "0 3px 10px rgba(0,0,0,0.12)",
+    }}>
+      <div style={{ fontWeight: 600, marginBottom: "0.2rem" }}>{label}</div>
+      {payload.map((entry) => (
+        <div key={entry.dataKey} style={{ color: entry.color }}>
+          {entry.name}: {entry.value ?? "—"}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export default function CityComparisonReport({ savedLocations, cityName }) {
+  const { t } = useTranslation();
+  const [toastMessage, setToastMessage] = useState("");
+
+  // Fetch AQI data for all saved cities + current city
+  const allCities = useMemo(() => {
+    const cities = [{ name: cityName, isCurrent: true }];
+    for (const loc of savedLocations || []) {
+      if (loc.name !== cityName) {
+        cities.push({ name: loc.name, lat: loc.lat, lon: loc.lon });
+      }
+    }
+    return cities;
+  }, [savedLocations, cityName]);
+
+  // Fetch AQI for each saved city using SWR
+  const cityDataResults = useMemo(() => {
+    return allCities.map((city) => {
+      const key = city.lat && city.lon ? `aqi_${city.lat}_${city.lon}` : null;
+      return { ...city, swrKey: key };
+    });
+  }, [allCities]);
+
+  // We use a single SWR call for comparisons
+  const { data: cityComparisons } = useSWR("city_comparisons", () => fetchCityComparisons());
+
+  // Merge fetched comparison data with saved locations
+  const mergedCities = useMemo(() => {
+    const result = [];
+
+    for (const city of allCities) {
+      // Try to find in cityComparisons
+      const match = (cityComparisons || []).find(
+        (c) => c.name?.toLowerCase() === city.name.toLowerCase(),
+      );
+
+      if (match && !match.unavailable && match.aqi != null) {
+        result.push({
+          name: city.name,
+          aqi: match.aqi,
+          pm2_5: match.pm2_5 ?? null,
+          pm10: match.pm10 ?? null,
+          no2: match.nitrogen_dioxide ?? null,
+          o3: match.ozone ?? null,
+          co: match.carbon_monoxide ?? null,
+        });
+      } else {
+        result.push({
+          name: city.name,
+          aqi: null,
+          pm2_5: null,
+          pm10: null,
+          no2: null,
+          o3: null,
+          co: null,
+        });
+      }
+    }
+
+    return result;
+  }, [allCities, cityComparisons]);
+
+  // Ranked cities
+  const rankedCities = useMemo(() => rankCities(mergedCities), [mergedCities]);
+
+  // Risk groups
+  const riskGroups = useMemo(() => categoriseByRisk(mergedCities), [mergedCities]);
+
+  // Pollutant comparison
+  const pollutantData = useMemo(() => comparePollutants(mergedCities), [mergedCities]);
+
+  // Chart data for AQI comparison
+  const chartData = useMemo(() =>
+    mergedCities
+      .filter((c) => typeof c.aqi === "number")
+      .map((c) => ({
+        name: c.name.length > 12 ? c.name.slice(0, 12) + "…" : c.name,
+        aqi: c.aqi,
+        fill: getAQIBand(c.aqi).color,
+      })),
+    [mergedCities],
+  );
+
+  // Stats
+  const validAqis = mergedCities.filter((c) => typeof c.aqi === "number").map((c) => c.aqi);
+  const bestCity = rankedCities[0];
+  const worstCity = rankedCities.length > 0 ? rankedCities[rankedCities.length - 1] : null;
+
+  const showToast = useCallback((msg) => {
+    setToastMessage(msg);
+    setTimeout(() => setToastMessage(""), 2500);
+  }, []);
+
+  const handleExportCSV = useCallback(() => {
+    const csv = comparisonToCSV(rankedCities);
+    triggerDownload(csv, `city-comparison-${new Date().toISOString().slice(0, 10)}.csv`, "text/csv");
+    showToast(t("comparison.downloaded", "CSV downloaded!"));
+  }, [rankedCities, t, showToast]);
+
+  const handleCopyReport = useCallback(async () => {
+    const report = generateComparisonSummary(rankedCities);
+    const ok = await copyToClipboard(report);
+    showToast(ok ? t("comparison.copied", "Report copied!") : t("comparison.copyFailed", "Copy failed"));
+  }, [rankedCities, t, showToast]);
+
+  // --- Empty state ---
+  if (!savedLocations || savedLocations.length === 0) {
+    return (
+      <section data-testid="city-comparison-report" className="panel">
+        <div className={styles.root}>
+          <div className={styles.header}>
+            <h2 className={styles.headerTitle}>🏙️ {t("comparison.title", "City Comparison Report")}</h2>
+            <p className={styles.headerSubtitle}>{t("comparison.subtitle", "Compare air quality across your saved cities")}</p>
+          </div>
+          <div className={styles.emptyState}>
+            <div className={styles.emptyIcon}>📍</div>
+            <p className={styles.emptyTitle}>{t("comparison.noCities", "No saved cities yet")}</p>
+            <p className={styles.emptyDesc}>{t("comparison.noCitiesDesc", "Save locations from the dashboard controls to compare their air quality side by side.")}</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section data-testid="city-comparison-report" className="panel">
+      <div className={styles.root}>
+        {/* Header */}
+        <div className={styles.header}>
+          <h2 className={styles.headerTitle}>🏙️ {t("comparison.title", "City Comparison Report")}</h2>
+          <p className={styles.headerSubtitle}>
+            {t("comparison.subtitleCount", "Comparing air quality across {{count}} cities", { count: mergedCities.length })}
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className={styles.statsRow} data-testid="stats-row">
+          <StatCard icon="🏙️" value={mergedCities.length} label={t("comparison.cities", "Cities")} />
+          <StatCard icon="🏆" value={bestCity?.name || "—"} label={t("comparison.cleanest", "Cleanest")} color="#22c55e" />
+          <StatCard icon="⚠️" value={worstCity?.name || "—"} label={t("comparison.mostPolluted", "Most Polluted")} color="#ef4444" />
+          {bestCity && worstCity && bestCity.aqi != null && worstCity.aqi != null && (
+            <StatCard
+              icon="📊"
+              value={worstCity.aqi - bestCity.aqi}
+              label={t("comparison.aqiGap", "AQI Gap")}
+              color="#f59e0b"
+            />
+          )}
+        </div>
+
+        {/* AQI Chart */}
+        {chartData.length > 1 && (
+          <div className={styles.rankingSection}>
+            <h3 className={styles.sectionTitle}>📊 {t("comparison.aqiChart", "AQI Comparison")}</h3>
+            <div style={{ width: "100%", height: 250 }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={chartData} margin={{ top: 10, right: 20, bottom: 30, left: 10 }}>
+                  <CartesianGrid strokeDasharray="3 3" opacity={0.12} />
+                  <XAxis dataKey="name" fontSize={10} tick={{ fill: "var(--text-secondary, #64748b)" }} angle={-20} textAnchor="end" interval={0} />
+                  <YAxis fontSize={10} tick={{ fill: "var(--text-secondary, #64748b)" }} />
+                  <Tooltip content={<ChartTooltip />} />
+                  <Legend wrapperStyle={{ fontSize: "0.75rem" }} />
+                  <Bar dataKey="aqi" name="US AQI" radius={[6, 6, 0, 0]}>
+                    {chartData.map((entry, idx) => (
+                      <Cell key={idx} fill={entry.fill} fillOpacity={0.85} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        )}
+
+        {/* Ranking */}
+        <div className={styles.rankingSection} data-testid="ranking-section">
+          <h3 className={styles.sectionTitle}>🏅 {t("comparison.rankings", "City Rankings")}</h3>
+          <div className={styles.rankingList}>
+            {rankedCities.map((city) => (
+              <RankingItem key={city.name} city={city} />
+            ))}
+          </div>
+        </div>
+
+        {/* Pollutant Comparison */}
+        {pollutantData.some((p) => p.readings.some((r) => typeof r.value === "number")) && (
+          <div className={styles.pollutantSection} data-testid="pollutant-section">
+            <h3 className={styles.sectionTitle}>🔬 {t("comparison.pollutantBreakdown", "Pollutant Breakdown")}</h3>
+            <div style={{ overflowX: "auto" }}>
+              <table className={styles.pollutantTable}>
+                <thead>
+                  <tr>
+                    <th>{t("comparison.pollutant", "Pollutant")}</th>
+                    <th>WHO Limit</th>
+                    {mergedCities.map((c) => (
+                      <th key={c.name}>{c.name.length > 10 ? c.name.slice(0, 10) + "…" : c.name}</th>
+                    ))}
+                    <th>Average</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pollutantData.map((p) => (
+                    <tr key={p.key}>
+                      <td style={{ fontWeight: 600 }}>{p.pollutant} ({p.unit})</td>
+                      <td>{p.whoLimit}</td>
+                      {p.readings.map((r) => (
+                        <td key={r.city} className={r.exceeds ? styles.exceeds : typeof r.value === "number" ? styles.within : ""}>
+                          {r.value ?? "—"}
+                        </td>
+                      ))}
+                      <td>{p.average.toFixed(1)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* Risk Groups */}
+        <div className={styles.riskSection} data-testid="risk-section">
+          <h3 className={styles.sectionTitle}>🛡️ {t("comparison.riskGroups", "Health Risk Groups")}</h3>
+          <div className={styles.riskGrid}>
+            <div className={`${styles.riskGroup} ${styles.riskSafe}`}>
+              <p className={styles.riskGroupTitle}>✅ {t("comparison.safe", "Safe")} (AQI ≤ 100)</p>
+              <p className={styles.riskGroupCities}>{riskGroups.safe.length > 0 ? riskGroups.safe.join(", ") : "—"}</p>
+            </div>
+            <div className={`${styles.riskGroup} ${styles.riskModerate}`}>
+              <p className={styles.riskGroupTitle}>🟡 {t("comparison.moderateRisk", "Moderate")} (101–150)</p>
+              <p className={styles.riskGroupCities}>{riskGroups.moderate.length > 0 ? riskGroups.moderate.join(", ") : "—"}</p>
+            </div>
+            <div className={`${styles.riskGroup} ${styles.riskUnhealthy}`}>
+              <p className={styles.riskGroupTitle}>🟠 {t("comparison.unhealthyRisk", "Unhealthy")} (151–200)</p>
+              <p className={styles.riskGroupCities}>{riskGroups.unhealthy.length > 0 ? riskGroups.unhealthy.join(", ") : "—"}</p>
+            </div>
+            <div className={`${styles.riskGroup} ${styles.riskCritical}`}>
+              <p className={styles.riskGroupTitle}>🔴 {t("comparison.criticalRisk", "Critical")} (201+)</p>
+              <p className={styles.riskGroupCities}>{riskGroups.critical.length > 0 ? riskGroups.critical.join(", ") : "—"}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className={styles.actionsBar} data-testid="actions-bar">
+          <button type="button" className={`${styles.actionBtn} ${styles.actionBtnPrimary}`} onClick={handleExportCSV} data-testid="export-csv-btn">
+            📄 {t("comparison.exportCSV", "Export CSV")}
+          </button>
+          <button type="button" className={styles.actionBtn} onClick={handleCopyReport} data-testid="copy-report-btn">
+            📋 {t("comparison.copyReport", "Copy Report")}
+          </button>
+        </div>
+
+        {/* Toast */}
+        <div className={`${styles.toast} ${toastMessage ? styles.toastVisible : ""}`} role="status" aria-live="polite">
+          {toastMessage}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/CityComparisonReport.module.css b/src/components/CityComparisonReport.module.css
new file mode 100644
index 0000000..69ba2c2
--- /dev/null
+++ b/src/components/CityComparisonReport.module.css
@@ -0,0 +1,261 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.header { text-align: center; }
+
+.headerTitle {
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+  color: var(--text-primary, #0f172a);
+}
+
+.headerSubtitle {
+  font-size: 0.95rem;
+  color: var(--text-secondary, #64748b);
+  margin: 0;
+}
+
+/* Stats row */
+.statsRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 0.75rem;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 0.5rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.65rem;
+  text-align: center;
+  transition: transform 0.12s, box-shadow 0.12s;
+}
+
+.statCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
+}
+
+.statIcon { font-size: 1.4rem; margin-bottom: 0.2rem; }
+.statValue { font-size: 1.3rem; font-weight: 700; color: var(--text-primary, #0f172a); }
+.statLabel { font-size: 0.7rem; color: var(--text-secondary, #64748b); margin-top: 0.15rem; }
+
+/* Ranking list */
+.rankingSection {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.sectionTitle {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+  color: var(--text-primary, #0f172a);
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.rankingList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.rankingItem {
+  display: grid;
+  grid-template-columns: 3rem 1fr auto auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary, #f8fafc);
+  border-radius: 0.5rem;
+  border-left: 4px solid transparent;
+  transition: transform 0.1s;
+}
+
+.rankingItem:hover { transform: translateX(3px); }
+.rankingItem[data-rank="1"] { border-left-color: #fbbf24; background: #fffbeb; }
+.rankingItem[data-rank="2"] { border-left-color: #94a3b8; background: #f8fafc; }
+.rankingItem[data-rank="3"] { border-left-color: #cd7f32; background: #fdf2e9; }
+
+.rankBadge {
+  font-size: 1.1rem;
+  font-weight: 700;
+  text-align: center;
+  color: var(--text-primary, #0f172a);
+}
+
+.cityName {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary, #0f172a);
+}
+
+.aqiValue {
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-align: right;
+}
+
+.bandBadge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+/* Pollutant comparison */
+.pollutantSection {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.pollutantTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.pollutantTable th,
+.pollutantTable td {
+  padding: 0.5rem 0.65rem;
+  border-bottom: 1px solid var(--border-color, #f1f5f9);
+  text-align: left;
+}
+
+.pollutantTable th {
+  background: var(--bg-secondary, #f8fafc);
+  font-weight: 600;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary, #475569);
+}
+
+.pollutantTable .exceeds { color: #ef4444; font-weight: 600; }
+.pollutantTable .within { color: #22c55e; }
+
+/* Risk groups */
+.riskSection {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.riskGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.riskGroup {
+  padding: 0.85rem 1rem;
+  border-radius: 0.5rem;
+  border-left: 4px solid transparent;
+}
+
+.riskGroupTitle {
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+}
+
+.riskGroupCities {
+  font-size: 0.82rem;
+  color: var(--text-secondary, #475569);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.riskSafe { border-left-color: #22c55e; background: #f0fdf4; }
+.riskSafe .riskGroupTitle { color: #16a34a; }
+.riskModerate { border-left-color: #eab308; background: #fefce8; }
+.riskModerate .riskGroupTitle { color: #ca8a04; }
+.riskUnhealthy { border-left-color: #f97316; background: #fff7ed; }
+.riskUnhealthy .riskGroupTitle { color: #ea580c; }
+.riskCritical { border-left-color: #ef4444; background: #fef2f2; }
+.riskCritical .riskGroupTitle { color: #dc2626; }
+
+/* Actions bar */
+.actionsBar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.actionBtn {
+  padding: 0.55rem 1.25rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  border-radius: 0.5rem;
+  background: var(--bg-card, #fff);
+  color: var(--text-primary, #0f172a);
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.actionBtn:hover {
+  background: var(--bg-secondary, #f8fafc);
+  border-color: var(--brand, #0d9488);
+}
+
+.actionBtnPrimary {
+  background: var(--brand, #0d9488);
+  color: #fff;
+  border-color: var(--brand, #0d9488);
+}
+
+.actionBtnPrimary:hover { background: #0b8577; }
+
+/* Empty state */
+.emptyState {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--text-secondary, #94a3b8);
+}
+
+.emptyIcon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+.emptyTitle { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--text-primary, #475569); }
+.emptyDesc { font-size: 0.85rem; margin: 0; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; }
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(120%);
+  background: #1e293b;
+  color: #fff;
+  padding: 0.65rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  z-index: 9999;
+  opacity: 0;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+  pointer-events: none;
+}
+
+.toastVisible {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}
diff --git a/src/components/CityComparisonReport.test.jsx b/src/components/CityComparisonReport.test.jsx
new file mode 100644
index 0000000..5c7191d
--- /dev/null
+++ b/src/components/CityComparisonReport.test.jsx
@@ -0,0 +1,242 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import CityComparisonReport from "./CityComparisonReport";
+import {
+  getAQIBand,
+  rankCities,
+  computeDifferential,
+  categoriseByRisk,
+  comparePollutants,
+  comparisonToCSV,
+  generateComparisonSummary,
+} from "../services/cityComparisonReportService";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key, opts) => (typeof opts === "string" ? opts : opts?.defaultValue || key),
+  }),
+}));
+
+vi.mock("../hooks/useSWR", () => ({
+  useSWR: () => ({ data: null, error: null, isValidating: false, mutate: vi.fn() }),
+}));
+
+vi.mock("../services/airQualityService", () => ({
+  fetchCityComparisons: vi.fn(async () => []),
+}));
+
+vi.mock("../services/dataExportService", () => ({
+  triggerDownload: vi.fn(),
+  copyToClipboard: vi.fn(async () => true),
+}));
+
+// ---------------------------------------------------------------------------
+// Service tests
+// ---------------------------------------------------------------------------
+describe("cityComparisonReportService", () => {
+  describe("getAQIBand", () => {
+    it("returns Good for AQI ≤ 50", () => {
+      expect(getAQIBand(25).label).toBe("Good");
+      expect(getAQIBand(25).color).toBe("#22c55e");
+    });
+
+    it("returns Moderate for 51–100", () => {
+      expect(getAQIBand(75).label).toBe("Moderate");
+    });
+
+    it("returns USG for 101–150", () => {
+      expect(getAQIBand(125).label).toBe("Unhealthy for Sensitive Groups");
+    });
+
+    it("returns Unhealthy for 151–200", () => {
+      expect(getAQIBand(175).label).toBe("Unhealthy");
+    });
+
+    it("returns Very Unhealthy for 201–300", () => {
+      expect(getAQIBand(250).label).toBe("Very Unhealthy");
+    });
+
+    it("returns Hazardous for 301+", () => {
+      expect(getAQIBand(400).label).toBe("Hazardous");
+    });
+
+    it("returns Unknown for null", () => {
+      expect(getAQIBand(null).label).toBe("Unknown");
+    });
+  });
+
+  describe("rankCities", () => {
+    it("ranks cities by AQI ascending", () => {
+      const cities = [
+        { name: "Delhi", aqi: 150 },
+        { name: "Mumbai", aqi: 80 },
+        { name: "Chennai", aqi: 120 },
+      ];
+      const ranked = rankCities(cities);
+      expect(ranked.length).toBe(3);
+      expect(ranked[0].name).toBe("Mumbai");
+      expect(ranked[0].rank).toBe(1);
+      expect(ranked[1].name).toBe("Chennai");
+      expect(ranked[2].name).toBe("Delhi");
+    });
+
+    it("filters out cities with null AQI", () => {
+      const cities = [
+        { name: "A", aqi: 100 },
+        { name: "B", aqi: null },
+        { name: "C", aqi: 50 },
+      ];
+      const ranked = rankCities(cities);
+      expect(ranked.length).toBe(2);
+      expect(ranked[0].name).toBe("C");
+    });
+
+    it("returns empty for empty input", () => {
+      expect(rankCities([])).toEqual([]);
+      expect(rankCities(null)).toEqual([]);
+    });
+  });
+
+  describe("computeDifferential", () => {
+    it("computes positive differential", () => {
+      const result = computeDifferential(
+        { name: "Delhi", aqi: 150 },
+        { name: "Mumbai", aqi: 80 },
+      );
+      expect(result.diff).toBe(70);
+      expect(result.worseCity).toBe("Delhi");
+      expect(result.summary).toContain("higher");
+    });
+
+    it("computes negative differential", () => {
+      const result = computeDifferential(
+        { name: "Mumbai", aqi: 80 },
+        { name: "Delhi", aqi: 150 },
+      );
+      expect(result.diff).toBe(-70);
+      expect(result.worseCity).toBe("Delhi");
+    });
+
+    it("handles identical AQI", () => {
+      const result = computeDifferential(
+        { name: "A", aqi: 100 },
+        { name: "B", aqi: 100 },
+      );
+      expect(result.diff).toBe(0);
+      expect(result.worseCity).toBeNull();
+    });
+
+    it("handles null AQI", () => {
+      const result = computeDifferential(
+        { name: "A", aqi: null },
+        { name: "B", aqi: 100 },
+      );
+      expect(result.worseCity).toBe("B");
+    });
+  });
+
+  describe("categoriseByRisk", () => {
+    it("categorises cities correctly", () => {
+      const cities = [
+        { name: "A", aqi: 50 },
+        { name: "B", aqi: 120 },
+        { name: "C", aqi: 175 },
+        { name: "D", aqi: 250 },
+      ];
+      const groups = categoriseByRisk(cities);
+      expect(groups.safe).toEqual(["A"]);
+      expect(groups.moderate).toEqual(["B"]);
+      expect(groups.unhealthy).toEqual(["C"]);
+      expect(groups.critical).toEqual(["D"]);
+    });
+  });
+
+  describe("comparePollutants", () => {
+    it("returns pollutant breakdown with readings", () => {
+      const cities = [
+        { name: "A", pm2_5: 20, pm10: 40, no2: 30, o3: 80, co: 1.5 },
+        { name: "B", pm2_5: 50, pm10: 60, no2: 15, o3: 90, co: 0.8 },
+      ];
+      const result = comparePollutants(cities);
+      expect(result.length).toBe(5);
+      const pm25 = result.find((p) => p.key === "pm2_5");
+      expect(pm25.readings.length).toBe(2);
+      expect(pm25.average).toBe(35);
+      expect(pm25.citiesExceedingLimit).toContain("B"); // 50 > 15
+    });
+  });
+
+  describe("comparisonToCSV", () => {
+    it("generates valid CSV", () => {
+      const ranked = [
+        { rank: 1, name: "A", aqi: 50, band: { label: "Good" }, risk: "low", pm2_5: 10, pm10: 20, no2: 15, o3: 30, co: 0.5, relativeDiff: "0.0" },
+        { rank: 2, name: "B", aqi: 100, band: { label: "Moderate" }, risk: "low", pm2_5: 30, pm10: 50, no2: 25, o3: 40, co: 0.8, relativeDiff: "100.0" },
+      ];
+      const csv = comparisonToCSV(ranked);
+      expect(csv).toContain("Rank,City,US AQI");
+      expect(csv).toContain('"A"');
+      expect(csv).toContain('"B"');
+    });
+  });
+
+  describe("generateComparisonSummary", () => {
+    it("generates readable summary", () => {
+      const ranked = [
+        { rank: 1, name: "Mumbai", aqi: 60, band: { label: "Moderate" }, relativeDiff: "0.0" },
+        { rank: 2, name: "Delhi", aqi: 150, band: { label: "Unhealthy for Sensitive Groups" }, relativeDiff: "150.0" },
+      ];
+      const summary = generateComparisonSummary(ranked);
+      expect(summary).toContain("MULTI-CITY AIR QUALITY COMPARISON");
+      expect(summary).toContain("Mumbai");
+      expect(summary).toContain("Delhi");
+      expect(summary).toContain("🥇");
+    });
+
+    it("returns message for empty input", () => {
+      expect(generateComparisonSummary([])).toBe("No cities to compare.");
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Component tests
+// ---------------------------------------------------------------------------
+describe("CityComparisonReport", () => {
+  it("renders empty state when no saved locations", () => {
+    render(<CityComparisonReport savedLocations={[]} cityName="Delhi" />);
+    expect(screen.getByTestId("city-comparison-report")).toBeTruthy();
+    expect(screen.getByText(/No saved cities yet/)).toBeTruthy();
+  });
+
+  it("renders panel with title when cities are saved", () => {
+    const locations = [
+      { name: "Mumbai", lat: 19.07, lon: 72.87 },
+      { name: "Chennai", lat: 13.08, lon: 80.27 },
+    ];
+    render(<CityComparisonReport savedLocations={locations} cityName="Delhi" />);
+    expect(screen.getByTestId("city-comparison-report")).toBeTruthy();
+    expect(screen.getByText(/City Comparison Report/)).toBeTruthy();
+  });
+
+  it("displays ranking section", () => {
+    const locations = [{ name: "Mumbai", lat: 19.07, lon: 72.87 }];
+    render(<CityComparisonReport savedLocations={locations} cityName="Delhi" />);
+    expect(screen.getByTestId("ranking-section")).toBeTruthy();
+  });
+
+  it("displays risk section", () => {
+    const locations = [{ name: "Mumbai", lat: 19.07, lon: 72.87 }];
+    render(<CityComparisonReport savedLocations={locations} cityName="Delhi" />);
+    expect(screen.getByTestId("risk-section")).toBeTruthy();
+  });
+
+  it("displays action buttons", () => {
+    const locations = [{ name: "Mumbai", lat: 19.07, lon: 72.87 }];
+    render(<CityComparisonReport savedLocations={locations} cityName="Delhi" />);
+    expect(screen.getByTestId("export-csv-btn")).toBeTruthy();
+    expect(screen.getByTestId("copy-report-btn")).toBeTruthy();
+  });
+});
diff --git a/src/components/DataExportDashboard.jsx b/src/components/DataExportDashboard.jsx
new file mode 100644
index 0000000..46fc4d5
--- /dev/null
+++ b/src/components/DataExportDashboard.jsx
@@ -0,0 +1,428 @@
+import { useState, useMemo, useCallback, memo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import {
+  trendToCSV,
+  trendToJSON,
+  generateTextReport,
+  generateShareableLink,
+  triggerDownload,
+  copyToClipboard,
+  computeSummaryStats,
+} from "../services/dataExportService";
+import styles from "./DataExportDashboard.module.css";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const EXPORT_FORMATS = [
+  {
+    id: "csv",
+    icon: "📄",
+    title: "CSV Spreadsheet",
+    desc: "Download trend data as a CSV file compatible with Excel, Google Sheets, or any data tool.",
+    ext: ".csv",
+    mime: "text/csv",
+  },
+  {
+    id: "json",
+    icon: "🔧",
+    title: "JSON Data",
+    desc: "Structured JSON export with metadata — ideal for APIs, dashboards, or further processing.",
+    ext: ".json",
+    mime: "application/json",
+  },
+  {
+    id: "text",
+    icon: "📋",
+    title: "Text Report",
+    desc: "Human-readable report with health guidance. Copy to clipboard or download as .txt.",
+    ext: ".txt",
+    mime: "text/plain",
+  },
+];
+
+const TIME_RANGES = [
+  { label: "Last 6h", hours: 6 },
+  { label: "Last 12h", hours: 12 },
+  { label: "Last 24h", hours: 24 },
+  { label: "All Data", hours: Infinity },
+];
+
+// ---------------------------------------------------------------------------
+// AQI band helpers
+// ---------------------------------------------------------------------------
+
+function aqiClassName(aqi) {
+  if (aqi == null) return "";
+  if (aqi <= 50) return styles.aqiGood;
+  if (aqi <= 100) return styles.aqiModerate;
+  if (aqi <= 150) return styles.aqiUSG;
+  if (aqi <= 200) return styles.aqiUnhealthy;
+  if (aqi <= 300) return styles.aqiVeryUnhealthy;
+  return styles.aqiHazardous;
+}
+
+// ---------------------------------------------------------------------------
+// Memoized sub-components
+// ---------------------------------------------------------------------------
+
+const StatCard = memo(function StatCard({ icon, value, label, color }) {
+  return (
+    <div className={styles.statCard}>
+      <span className={styles.statIcon} aria-hidden="true">{icon}</span>
+      <span className={styles.statValue} style={color ? { color } : undefined}>{value}</span>
+      <span className={styles.statLabel}>{label}</span>
+    </div>
+  );
+});
+
+const ExportCard = memo(function ExportCard({ format, onExport }) {
+  const handleClick = useCallback(() => onExport(format.id), [format.id, onExport]);
+  return (
+    <button
+      type="button"
+      className={styles.exportCard}
+      onClick={handleClick}
+      data-testid={`export-${format.id}`}
+      aria-label={`Export as ${format.title}`}
+    >
+      <span className={styles.exportIcon} aria-hidden="true">{format.icon}</span>
+      <p className={styles.exportTitle}>{format.title}</p>
+      <p className={styles.exportDesc}>{format.desc}</p>
+    </button>
+  );
+});
+
+function MiniTooltip({ active, payload }) {
+  if (!active || !payload || payload.length === 0) return null;
+  const d = payload[0]?.payload;
+  if (!d) return null;
+  return (
+    <div style={{
+      background: "var(--bg-card, #fff)",
+      border: "1px solid var(--border-color, #e2e8f0)",
+      borderRadius: "0.5rem",
+      padding: "0.5rem 0.75rem",
+      fontSize: "0.78rem",
+      boxShadow: "0 3px 10px rgba(0,0,0,0.12)",
+      maxWidth: 200,
+    }}>
+      <div style={{ fontWeight: 600, color: "var(--text-primary, #0f172a)" }}>AQI: {d.us_aqi ?? "—"}</div>
+      <div style={{ color: "var(--text-secondary, #64748b)", fontSize: "0.7rem" }}>
+        {d.time ? new Date(d.time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export default function DataExportDashboard({ trend, current, cityName, position }) {
+  const { t } = useTranslation();
+  const [timeRange, setTimeRange] = useState(24);
+  const [showReportModal, setShowReportModal] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+  const [copiedLink, setCopiedLink] = useState(false);
+
+  // Filter trend by time range
+  const filteredTrend = useMemo(() => {
+    if (!Array.isArray(trend) || trend.length === 0) return [];
+    if (timeRange === Infinity) return trend;
+    const cutoff = Date.now() - timeRange * 60 * 60 * 1000;
+    return trend.filter((p) => {
+      if (!p?.time) return false;
+      try { return new Date(p.time).getTime() >= cutoff; } catch { return false; }
+    });
+  }, [trend, timeRange]);
+
+  // Summary stats
+  const stats = useMemo(() => computeSummaryStats(filteredTrend), [filteredTrend]);
+
+  // Mini chart data
+  const chartData = useMemo(() =>
+    filteredTrend
+      .filter((d) => d?.time && typeof d.us_aqi === "number")
+      .map((d) => ({
+        time: d.time,
+        us_aqi: d.us_aqi,
+        pm2_5: d.pm2_5,
+      })),
+    [filteredTrend],
+  );
+
+  // Shareable link
+  const shareableLink = useMemo(() =>
+    generateShareableLink(cityName, position?.lat, position?.lon),
+    [cityName, position],
+  );
+
+  // Toast helper
+  const showToast = useCallback((msg) => {
+    setToastMessage(msg);
+    setTimeout(() => setToastMessage(""), 2500);
+  }, []);
+
+  // Export handlers
+  const handleExport = useCallback((formatId) => {
+    const safeCityName = (cityName || "unknown").replace(/[^a-z0-9]/gi, "-").toLowerCase();
+    const ts = new Date().toISOString().slice(0, 10);
+    const fmt = EXPORT_FORMATS.find((f) => f.id === formatId);
+
+    switch (formatId) {
+      case "csv": {
+        const csv = trendToCSV(filteredTrend, cityName);
+        triggerDownload(csv, `${safeCityName}-aqi-${ts}${fmt.ext}`, fmt.mime);
+        showToast(t("export.downloadedCSV", "CSV downloaded!"));
+        break;
+      }
+      case "json": {
+        const json = trendToJSON(filteredTrend, cityName, position);
+        triggerDownload(json, `${safeCityName}-aqi-${ts}${fmt.ext}`, fmt.mime);
+        showToast(t("export.downloadedJSON", "JSON downloaded!"));
+        break;
+      }
+      case "text": {
+        setShowReportModal(true);
+        break;
+      }
+      default:
+        break;
+    }
+  }, [filteredTrend, cityName, position, t, showToast]);
+
+  const handleCopyTextReport = useCallback(async () => {
+    const report = generateTextReport(current, cityName, position);
+    const ok = await copyToClipboard(report);
+    showToast(ok ? t("export.copiedReport", "Report copied to clipboard!") : t("export.copyFailed", "Copy failed"));
+    setShowReportModal(false);
+  }, [current, cityName, position, t, showToast]);
+
+  const handleDownloadTextReport = useCallback(() => {
+    const report = generateTextReport(current, cityName, position);
+    const safeCityName = (cityName || "unknown").replace(/[^a-z0-9]/gi, "-").toLowerCase();
+    triggerDownload(report, `${safeCityName}-report-${new Date().toISOString().slice(0, 10)}.txt`, "text/plain");
+    showToast(t("export.downloadedReport", "Report downloaded!"));
+    setShowReportModal(false);
+  }, [current, cityName, position, t, showToast]);
+
+  const handleCopyLink = useCallback(async () => {
+    const ok = await copyToClipboard(shareableLink);
+    setCopiedLink(true);
+    showToast(ok ? t("export.linkCopied", "Link copied!") : t("export.copyFailed", "Copy failed"));
+    setTimeout(() => setCopiedLink(false), 2000);
+  }, [shareableLink, t, showToast]);
+
+  // Escape key closes modal
+  useEffect(() => {
+    if (!showReportModal) return;
+    const handler = (e) => { if (e.key === "Escape") setShowReportModal(false); };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [showReportModal]);
+
+  const textReport = useMemo(
+    () => generateTextReport(current, cityName, position),
+    [current, cityName, position],
+  );
+
+  // --- Empty state ---
+  if (!current || !Array.isArray(trend) || trend.length === 0) {
+    return (
+      <section data-testid="data-export-dashboard" className="panel">
+        <div className={styles.root}>
+          <div className={styles.header}>
+            <h2 className={styles.headerTitle}>📥 {t("export.title", "Data Export & Reports")}</h2>
+            <p className={styles.headerSubtitle}>{t("export.subtitle", "Download, share, and export your air quality data")}</p>
+          </div>
+          <div className={styles.emptyState}>
+            <div className={styles.emptyIcon}>📊</div>
+            <p className={styles.emptyTitle}>{t("export.noData", "No data to export")}</p>
+            <p className={styles.emptyDesc}>{t("export.noDataDesc", "Once AQI data is available for your selected city, you can export it here.")}</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  const reportText = generateTextReport(current, cityName, position);
+
+  return (
+    <section data-testid="data-export-dashboard" className="panel">
+      <div className={styles.root}>
+        {/* Header */}
+        <div className={styles.header}>
+          <h2 className={styles.headerTitle}>📥 {t("export.title", "Data Export & Reports")}</h2>
+          <p className={styles.headerSubtitle}>
+            {t("export.subtitleCity", "Download, share, and export air quality data for {{city}}", { city: cityName })}
+          </p>
+        </div>
+
+        {/* Summary Stats */}
+        <div className={styles.statsRow} data-testid="stats-row">
+          <StatCard icon="📊" value={stats.count} label={t("export.dataPoints", "Data Points")} />
+          <StatCard icon="🌡️" value={Math.round(stats.avgAqi)} label={t("export.avgAqi", "Avg AQI")} color="#0d9488" />
+          <StatCard icon="⬆️" value={Math.round(stats.maxAqi)} label={t("export.peakAqi", "Peak AQI")} color="#ef4444" />
+          <StatCard icon="⬇️" value={Math.round(stats.minAqi)} label={t("export.lowAqi", "Lowest AQI")} color="#22c55e" />
+          <StatCard icon="🔬" value={stats.avgPm25.toFixed(1)} label="Avg PM2.5" />
+          <StatCard icon="🌫️" value={stats.avgPm10.toFixed(1)} label="Avg PM10" />
+        </div>
+
+        {/* Mini Chart */}
+        {chartData.length > 2 && (
+          <div className={styles.previewSection}>
+            <h3 className={styles.sectionTitle}>📈 {t("export.trendPreview", "Trend Preview")}</h3>
+            <div style={{ width: "100%", height: 180 }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={chartData} margin={{ top: 5, right: 15, bottom: 5, left: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" opacity={0.12} />
+                  <XAxis
+                    dataKey="time"
+                    fontSize={9}
+                    tick={{ fill: "var(--text-secondary, #94a3b8)" }}
+                    tickFormatter={(v) => { try { return new Date(v).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); } catch { return ""; } }}
+                    interval="preserveStartEnd"
+                  />
+                  <YAxis fontSize={9} tick={{ fill: "var(--text-secondary, #94a3b8)" }} />
+                  <Tooltip content={<MiniTooltip />} />
+                  <Line type="monotone" dataKey="us_aqi" stroke="#0d9488" strokeWidth={2} dot={false} name="AQI" />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        )}
+
+        {/* Filter + Data Preview */}
+        <div className={styles.previewSection} data-testid="data-preview">
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "0.5rem" }}>
+            <h3 className={styles.sectionTitle} style={{ margin: 0 }}>📋 {t("export.dataPreview", "Data Preview")}</h3>
+            <div className={styles.filterBar}>
+              <span className={styles.filterLabel}>{t("export.timeRange", "Range:")}</span>
+              <select
+                className={styles.filterSelect}
+                value={timeRange === Infinity ? "all" : timeRange}
+                onChange={(e) => setTimeRange(e.target.value === "all" ? Infinity : Number(e.target.value))}
+                data-testid="time-range-select"
+              >
+                {TIME_RANGES.map((r) => (
+                  <option key={r.label} value={r.hours === Infinity ? "all" : r.hours}>{r.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <div className={styles.tableScroll} style={{ marginTop: "0.75rem", maxHeight: 320, overflowY: "auto" }}>
+            <table className={styles.dataTable}>
+              <thead>
+                <tr>
+                  <th>{t("export.colTime", "Time")}</th>
+                  <th>US AQI</th>
+                  <th>PM2.5</th>
+                  <th>PM10</th>
+                  <th>NO₂</th>
+                  <th>O₃</th>
+                  <th>CO</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredTrend.map((point, idx) => (
+                  <tr key={idx}>
+                    <td>{point.time ? new Date(point.time).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "—"}</td>
+                    <td className={aqiClassName(point.us_aqi)}>{point.us_aqi ?? "—"}</td>
+                    <td>{point.pm2_5 ?? "—"}</td>
+                    <td>{point.pm10 ?? "—"}</td>
+                    <td>{point.nitrogen_dioxide ?? "—"}</td>
+                    <td>{point.ozone ?? "—"}</td>
+                    <td>{point.carbon_monoxide ?? "—"}</td>
+                  </tr>
+                ))}
+                {filteredTrend.length === 0 && (
+                  <tr><td colSpan={7} style={{ textAlign: "center", padding: "1.5rem", color: "var(--text-secondary, #94a3b8)" }}>
+                    {t("export.noRowsInRange", "No data in selected time range")}
+                  </td></tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+          <p style={{ fontSize: "0.72rem", color: "var(--text-secondary, #94a3b8)", marginTop: "0.5rem", textAlign: "right" }}>
+            {filteredTrend.length} {t("export.of", "of")} {trend.length} {t("export.rowsShown", "rows shown")}
+          </p>
+        </div>
+
+        {/* Export Actions */}
+        <div>
+          <h3 className={styles.sectionTitle}>🚀 {t("export.exportActions", "Export Options")}</h3>
+          <div className={styles.exportGrid}>
+            {EXPORT_FORMATS.map((fmt) => (
+              <ExportCard key={fmt.id} format={fmt} onExport={handleExport} />
+            ))}
+          </div>
+        </div>
+
+        {/* Shareable Link */}
+        <div className={styles.linkSection} data-testid="shareable-link-section">
+          <h3 className={styles.sectionTitle}>🔗 {t("export.shareLink", "Shareable Link")}</h3>
+          <p style={{ fontSize: "0.82rem", color: "var(--text-secondary, #64748b)", margin: "0 0 0.5rem" }}>
+            {t("export.shareLinkDesc", "Share this link so others can view the same city's air quality data.")}
+          </p>
+          <div className={styles.linkRow}>
+            <input
+              type="text"
+              className={styles.linkInput}
+              value={shareableLink}
+              readOnly
+              aria-label="Shareable link"
+              data-testid="shareable-link-input"
+            />
+            <button
+              type="button"
+              className={`${styles.copyBtn} ${copiedLink ? styles.copyBtnSuccess : ""}`}
+              onClick={handleCopyLink}
+              data-testid="copy-link-btn"
+            >
+              {copiedLink ? "✅ Copied!" : "📋 Copy"}
+            </button>
+          </div>
+        </div>
+
+        {/* Text Report Preview Modal */}
+        {showReportModal && (
+          <div className={styles.modalOverlay} onClick={(e) => { if (e.target === e.currentTarget) setShowReportModal(false); }} role="dialog" aria-modal="true" aria-label="Text Report">
+            <div className={styles.modal}>
+              <div className={styles.modalHeader}>
+                <h3 className={styles.modalTitle}>📋 {t("export.reportPreview", "Report Preview")}</h3>
+                <button type="button" className={styles.modalClose} onClick={() => setShowReportModal(false)} aria-label="Close">✕</button>
+              </div>
+              <div className={styles.modalBody}>
+                <pre className={styles.reportPreview} data-testid="report-preview">{reportText}</pre>
+              </div>
+              <div className={styles.modalFooter}>
+                <button type="button" className={styles.copyBtn} onClick={handleCopyTextReport} data-testid="copy-report-btn">
+                  📋 {t("export.copyToClipboard", "Copy to Clipboard")}
+                </button>
+                <button type="button" className={styles.copyBtn} onClick={handleDownloadTextReport} data-testid="download-report-btn">
+                  📥 {t("export.downloadTxt", "Download .txt")}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Toast */}
+        <div className={`${styles.toast} ${toastMessage ? styles.toastVisible : ""}`} role="status" aria-live="polite">
+          {toastMessage}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/DataExportDashboard.module.css b/src/components/DataExportDashboard.module.css
new file mode 100644
index 0000000..6114ce6
--- /dev/null
+++ b/src/components/DataExportDashboard.module.css
@@ -0,0 +1,367 @@
+/* DataExportDashboard.module.css */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.header { text-align: center; }
+
+.headerTitle {
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+  color: var(--text-primary, #0f172a);
+}
+
+.headerSubtitle {
+  font-size: 0.95rem;
+  color: var(--text-secondary, #64748b);
+  margin: 0;
+}
+
+.statsRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 0.75rem;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.85rem 0.5rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.65rem;
+  text-align: center;
+  transition: transform 0.12s, box-shadow 0.12s;
+}
+
+.statCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
+}
+
+.statIcon { font-size: 1.3rem; margin-bottom: 0.2rem; }
+
+.statValue {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary, #0f172a);
+  line-height: 1.2;
+}
+
+.statLabel {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #64748b);
+  margin-top: 0.15rem;
+}
+
+.previewSection {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  overflow: hidden;
+}
+
+.sectionTitle {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+  color: var(--text-primary, #0f172a);
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.tableScroll {
+  overflow-x: auto;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color, #e2e8f0);
+}
+
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+  white-space: nowrap;
+}
+
+.dataTable th,
+.dataTable td {
+  padding: 0.45rem 0.65rem;
+  border-bottom: 1px solid var(--border-color, #f1f5f9);
+  text-align: left;
+}
+
+.dataTable th {
+  background: var(--bg-secondary, #f8fafc);
+  font-weight: 600;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary, #475569);
+  position: sticky;
+  top: 0;
+}
+
+.dataTable tbody tr:hover { background: var(--bg-secondary, #f8fafc); }
+
+.dataTable .aqiGood { color: #22c55e; font-weight: 600; }
+.dataTable .aqiModerate { color: #eab308; font-weight: 600; }
+.dataTable .aqiUSG { color: #f97316; font-weight: 600; }
+.dataTable .aqiUnhealthy { color: #ef4444; font-weight: 600; }
+.dataTable .aqiVeryUnhealthy { color: #9333ea; font-weight: 600; }
+.dataTable .aqiHazardous { color: #7f1d1d; font-weight: 600; }
+
+.exportGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.exportCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 1.25rem 1rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  text-align: center;
+  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
+  cursor: pointer;
+}
+
+.exportCard:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+  border-color: var(--brand, #0d9488);
+}
+
+.exportCard:active { transform: translateY(-1px); }
+
+.exportIcon { font-size: 2rem; }
+
+.exportTitle {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary, #0f172a);
+  margin: 0;
+}
+
+.exportDesc {
+  font-size: 0.78rem;
+  color: var(--text-secondary, #64748b);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.linkSection {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.linkRow {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+  margin-top: 0.75rem;
+}
+
+.linkInput {
+  flex: 1;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--text-primary, #0f172a);
+  background: var(--bg-secondary, #f8fafc);
+  font-family: monospace;
+}
+
+.linkInput:focus {
+  outline: 2px solid var(--brand, #0d9488);
+  outline-offset: 2px;
+}
+
+.copyBtn {
+  padding: 0.55rem 1rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: var(--brand, #0d9488);
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+
+.copyBtn:hover { background: #0b8577; }
+.copyBtn:active { background: #097366; }
+.copyBtnSuccess { background: #22c55e; }
+
+.toast {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(120%);
+  background: #1e293b;
+  color: #fff;
+  padding: 0.65rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  z-index: 9999;
+  opacity: 0;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+  pointer-events: none;
+}
+
+.toastVisible {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--text-secondary, #94a3b8);
+}
+
+.emptyIcon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+
+.emptyTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: var(--text-primary, #475569);
+}
+
+.emptyDesc {
+  font-size: 0.85rem;
+  margin: 0;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.5;
+}
+
+.filterBar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary, #f8fafc);
+  border-radius: 0.5rem;
+}
+
+.filterLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #64748b);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.filterSelect {
+  padding: 0.35rem 0.6rem;
+  border-radius: 0.4rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  background: var(--bg-card, #fff);
+  font-size: 0.82rem;
+  color: var(--text-primary, #0f172a);
+}
+
+.filterSelect:focus {
+  outline: 2px solid var(--brand, #0d9488);
+  outline-offset: 1px;
+}
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9000;
+  padding: 1rem;
+}
+
+.modal {
+  background: var(--bg-card, #fff);
+  border-radius: 0.75rem;
+  max-width: 600px;
+  width: 100%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-color, #e2e8f0);
+}
+
+.modalTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+}
+
+.modalClose {
+  background: none;
+  border: none;
+  font-size: 1.3rem;
+  cursor: pointer;
+  color: var(--text-secondary, #64748b);
+  padding: 0.2rem;
+  line-height: 1;
+}
+
+.modalClose:hover { color: var(--text-primary, #0f172a); }
+
+.modalBody {
+  padding: 1.25rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modalFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--border-color, #e2e8f0);
+}
+
+.reportPreview {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  background: var(--bg-secondary, #f8fafc);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color, #e2e8f0);
+  color: var(--text-primary, #0f172a);
+  max-height: 400px;
+  overflow-y: auto;
+}
diff --git a/src/components/DataExportDashboard.test.jsx b/src/components/DataExportDashboard.test.jsx
new file mode 100644
index 0000000..6191866
--- /dev/null
+++ b/src/components/DataExportDashboard.test.jsx
@@ -0,0 +1,177 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import DataExportDashboard from "./DataExportDashboard";
+import {
+  trendToCSV,
+  trendToJSON,
+  generateTextReport,
+  generateShareableLink,
+  computeSummaryStats,
+} from "../services/dataExportService";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key, opts) => (typeof opts === "string" ? opts : opts?.defaultValue || key),
+  }),
+}));
+
+// ---------------------------------------------------------------------------
+// Service tests
+// ---------------------------------------------------------------------------
+describe("dataExportService", () => {
+  const sampleTrend = [
+    { time: "2026-08-28T08:00:00Z", us_aqi: 85, pm2_5: 30, pm10: 50, nitrogen_dioxide: 20, ozone: 35, carbon_monoxide: 0.6 },
+    { time: "2026-08-28T09:00:00Z", us_aqi: 92, pm2_5: 35, pm10: 55, nitrogen_dioxide: 22, ozone: 38, carbon_monoxide: 0.7 },
+    { time: "2026-08-28T10:00:00Z", us_aqi: 110, pm2_5: 45, pm10: 70, nitrogen_dioxide: 28, ozone: 42, carbon_monoxide: 0.9 },
+  ];
+
+  describe("trendToCSV", () => {
+    it("produces a CSV with header and data rows", () => {
+      const csv = trendToCSV(sampleTrend, "Delhi");
+      expect(csv).toContain("# Air Quality Data Export");
+      expect(csv).toContain("Timestamp,US AQI");
+      expect(csv).toContain("85,30,50,20,35,0.6");
+      expect(csv).toContain("Delhi");
+    });
+
+    it("handles empty input gracefully", () => {
+      const csv = trendToCSV([], "Test");
+      expect(csv).toContain("Timestamp,US AQI");
+      expect(csv.split("\n").length).toBe(2); // header comment + header row only
+    });
+
+    it("handles null input", () => {
+      const csv = trendToCSV(null);
+      expect(csv).toContain("Timestamp,US AQI");
+    });
+  });
+
+  describe("trendToJSON", () => {
+    it("produces valid JSON with expected structure", () => {
+      const json = trendToJSON(sampleTrend, "Mumbai", { lat: 19.07, lon: 72.87 });
+      const parsed = JSON.parse(json);
+      expect(parsed.exportVersion).toBe("1.0");
+      expect(parsed.city).toBe("Mumbai");
+      expect(parsed.coordinates.latitude).toBe(19.07);
+      expect(parsed.dataPoints.length).toBe(3);
+      expect(parsed.dataPoints[0].aqi.us_aqi).toBe(85);
+      expect(parsed.metadata.totalDataPoints).toBe(3);
+    });
+
+    it("handles missing position", () => {
+      const json = trendToJSON(sampleTrend, "Test", null);
+      const parsed = JSON.parse(json);
+      expect(parsed.coordinates.latitude).toBeNull();
+    });
+  });
+
+  describe("generateTextReport", () => {
+    it("generates a readable report with AQI band", () => {
+      const current = { us_aqi: 120, pm2_5: 45, pm10: 70, nitrogen_dioxide: 28, ozone: 42, carbon_monoxide: 0.9 };
+      const report = generateTextReport(current, "Delhi", { lat: 28.61, lon: 77.21 });
+      expect(report).toContain("AIR QUALITY REPORT");
+      expect(report).toContain("DELHI");
+      expect(report).toContain("120");
+      expect(report).toContain("Unhealthy for Sensitive Groups");
+      expect(report).toContain("PM2.5");
+      expect(report).toContain("28.61");
+    });
+
+    it("returns no-data message for null current", () => {
+      expect(generateTextReport(null, "Test")).toBe("No data available.");
+    });
+  });
+
+  describe("generateShareableLink", () => {
+    it("produces a URL with city params", () => {
+      const link = generateShareableLink("Chennai", 13.08, 80.27);
+      expect(link).toContain("city=Chennai");
+      expect(link).toContain("lat=13.08");
+      expect(link).toContain("lon=80.27");
+    });
+  });
+
+  describe("computeSummaryStats", () => {
+    it("computes correct stats", () => {
+      const stats = computeSummaryStats(sampleTrend);
+      expect(stats.count).toBe(3);
+      expect(stats.avgAqi).toBeCloseTo(95.67, 0);
+      expect(stats.maxAqi).toBe(110);
+      expect(stats.minAqi).toBe(85);
+      expect(stats.avgPm25).toBeCloseTo(36.67, 0);
+    });
+
+    it("returns zeros for empty input", () => {
+      const stats = computeSummaryStats([]);
+      expect(stats.count).toBe(0);
+      expect(stats.avgAqi).toBe(0);
+    });
+
+    it("handles null input", () => {
+      const stats = computeSummaryStats(null);
+      expect(stats.count).toBe(0);
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Component tests
+// ---------------------------------------------------------------------------
+describe("DataExportDashboard", () => {
+  const sampleTrend = [
+    { time: "2026-08-28T08:00:00Z", us_aqi: 85, pm2_5: 30, pm10: 50, nitrogen_dioxide: 20, ozone: 35, carbon_monoxide: 0.6 },
+    { time: "2026-08-28T09:00:00Z", us_aqi: 92, pm2_5: 35, pm10: 55, nitrogen_dioxide: 22, ozone: 38, carbon_monoxide: 0.7 },
+    { time: "2026-08-28T10:00:00Z", us_aqi: 110, pm2_5: 45, pm10: 70, nitrogen_dioxide: 28, ozone: 42, carbon_monoxide: 0.9 },
+  ];
+
+  const current = { us_aqi: 110, pm2_5: 45, pm10: 70, nitrogen_dioxide: 28, ozone: 42, carbon_monoxide: 0.9 };
+
+  const defaultProps = {
+    trend: sampleTrend,
+    current,
+    cityName: "Delhi",
+    position: { lat: 28.61, lon: 77.21 },
+  };
+
+  it("renders the panel with title", () => {
+    render(<DataExportDashboard {...defaultProps} />);
+    expect(screen.getByTestId("data-export-dashboard")).toBeTruthy();
+    expect(screen.getByText(/Data Export/)).toBeTruthy();
+  });
+
+  it("displays stats row", () => {
+    render(<DataExportDashboard {...defaultProps} />);
+    expect(screen.getByTestId("stats-row")).toBeTruthy();
+  });
+
+  it("displays data preview table", () => {
+    render(<DataExportDashboard {...defaultProps} />);
+    expect(screen.getByTestId("data-preview")).toBeTruthy();
+  });
+
+  it("displays shareable link section", () => {
+    render(<DataExportDashboard {...defaultProps} />);
+    expect(screen.getByTestId("shareable-link-section")).toBeTruthy();
+    expect(screen.getByTestId("shareable-link-input")).toBeTruthy();
+  });
+
+  it("renders all three export cards", () => {
+    render(<DataExportDashboard {...defaultProps} />);
+    expect(screen.getByTestId("export-csv")).toBeTruthy();
+    expect(screen.getByTestId("export-json")).toBeTruthy();
+    expect(screen.getByTestId("export-text")).toBeTruthy();
+  });
+
+  it("shows empty state when no data", () => {
+    render(<DataExportDashboard trend={[]} current={null} cityName="Test" position={{ lat: 0, lon: 0 }} />);
+    expect(screen.getByText(/No data to export/)).toBeTruthy();
+  });
+
+  it("shows time range filter", () => {
+    render(<DataExportDashboard {...defaultProps} />);
+    expect(screen.getByTestId("time-range-select")).toBeTruthy();
+  });
+});
diff --git a/src/components/ExposureTimelineTracker.jsx b/src/components/ExposureTimelineTracker.jsx
new file mode 100644
index 0000000..4e06baa
--- /dev/null
+++ b/src/components/ExposureTimelineTracker.jsx
@@ -0,0 +1,401 @@
+import { useState, useMemo, useCallback, memo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+  ReferenceLine,
+} from "recharts";
+import {
+  recordExposure,
+  readExposureHistory,
+  computeDailySummaries,
+  computeWeeklySummaries,
+  computeHealthScore,
+  generateRecommendations,
+  getRiskMeta,
+  clearExposureHistory,
+  exposureToCSV,
+} from "../services/exposureTimelineService";
+import { triggerDownload, copyToClipboard } from "../services/dataExportService";
+import styles from "./ExposureTimelineTracker.module.css";
+
+// ---------------------------------------------------------------------------
+// Memoized sub-components
+// ---------------------------------------------------------------------------
+
+const StatCard = memo(function StatCard({ icon, value, label, color }) {
+  return (
+    <div className={styles.statCard}>
+      <span className={styles.statIcon} aria-hidden="true">{icon}</span>
+      <span className={styles.statValue} style={color ? { color } : undefined}>{value}</span>
+      <span className={styles.statLabel}>{label}</span>
+    </div>
+  );
+});
+
+const RecItem = memo(function RecItem({ rec }) {
+  const cls = rec.priority === "high" ? styles.recHigh
+    : rec.priority === "medium" ? styles.recMedium
+    : rec.priority === "low" ? styles.recLow
+    : styles.recInfo;
+  return (
+    <li className={`${styles.recItem} ${cls}`}>
+      <span className={styles.recIcon} aria-hidden="true">{rec.icon}</span>
+      <div className={styles.recContent}>
+        <p className={styles.recTitle}>{rec.title}</p>
+        <p className={styles.recDesc}>{rec.description}</p>
+      </div>
+    </li>
+  );
+});
+
+function ScoreRing({ score, color }) {
+  const radius = 65;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (score / 100) * circumference;
+
+  return (
+    <div className={styles.scoreRing}>
+      <svg className={styles.scoreRingSvg} viewBox="0 0 160 160">
+        <circle className={styles.scoreRingBg} cx="80" cy="80" r={radius} />
+        <circle
+          className={styles.scoreRingFill}
+          cx="80" cy="80" r={radius}
+          stroke={color}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+        />
+      </svg>
+      <div className={styles.scoreCenter}>
+        <div className={styles.scoreValue} style={{ color }}>{score}</div>
+        <div className={styles.scoreLabel}>/ 100</div>
+      </div>
+    </div>
+  );
+}
+
+function ChartTooltip({ active, payload, label }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div style={{
+      background: "var(--bg-card, #fff)",
+      border: "1px solid var(--border-color, #e2e8f0)",
+      borderRadius: "0.5rem",
+      padding: "0.5rem 0.75rem",
+      fontSize: "0.78rem",
+      boxShadow: "0 3px 10px rgba(0,0,0,0.12)",
+    }}>
+      <div style={{ fontWeight: 600, marginBottom: "0.15rem" }}>{label}</div>
+      {payload.map((e) => (
+        <div key={e.dataKey} style={{ color: e.color || "var(--text-primary, #0f172a)" }}>
+          {e.name}: {e.value}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export default function ExposureTimelineTracker({ current, cityName }) {
+  const { t } = useTranslation();
+  const [history, setHistory] = useState(() => readExposureHistory());
+  const [activeTab, setActiveTab] = useState("daily");
+  const [toastMessage, setToastMessage] = useState("");
+
+  // Record current AQI on mount / when current changes
+  useEffect(() => {
+    if (current?.us_aqi != null) {
+      const updated = recordExposure(current.us_aqi, cityName);
+      setHistory(updated);
+    }
+  }, [current?.us_aqi, cityName]);
+
+  // Aggregations
+  const dailySummaries = useMemo(() => computeDailySummaries(history), [history]);
+  const weeklySummaries = useMemo(() => computeWeeklySummaries(history), [history]);
+  const healthScore = useMemo(() => computeHealthScore(history), [history]);
+  const recommendations = useMemo(() => generateRecommendations(history), [history]);
+
+  // Chart data (daily)
+  const dailyChartData = useMemo(() =>
+    dailySummaries.slice(-14).map((d) => ({
+      date: d.date.slice(5), // MM-DD
+      avgAqi: d.avgAqi,
+      maxAqi: d.maxAqi,
+      riskLevel: d.riskLevel,
+    })),
+    [dailySummaries],
+  );
+
+  // Stats
+  const totalDays = dailySummaries.length;
+  const totalHours = history.length;
+  const overallAvg = dailySummaries.length > 0
+    ? Math.round(dailySummaries.reduce((s, d) => s + d.avgAqi, 0) / dailySummaries.length)
+    : 0;
+  const peakDay = dailySummaries.reduce((max, d) => d.maxAqi > (max?.maxAqi ?? 0) ? d : max, null);
+
+  const showToast = useCallback((msg) => {
+    setToastMessage(msg);
+    setTimeout(() => setToastMessage(""), 2500);
+  }, []);
+
+  const handleExportCSV = useCallback(() => {
+    const csv = exposureToCSV(history);
+    triggerDownload(csv, `exposure-history-${new Date().toISOString().slice(0, 10)}.csv`, "text/csv");
+    showToast(t("exposure.downloaded", "Export downloaded!"));
+  }, [history, t, showToast]);
+
+  const handleCopySummary = useCallback(async () => {
+    const score = healthScore;
+    const lines = [
+      '═══════════════════════════════════════════',
+      '  EXPOSURE TIMELINE SUMMARY',
+      `  Generated: ${new Date().toLocaleString()}`,
+      '═══════════════════════════════════════════',
+      '',
+      `  Health Score: ${score.score}/100 (${score.label})`,
+      `  Total days tracked: ${totalDays}`,
+      `  Total data points: ${totalHours}`,
+      `  Overall average AQI: ${overallAvg}`,
+      peakDay ? `  Peak day: ${peakDay.date} (AQI ${peakDay.maxAqi})` : '',
+      '',
+      '  ─── Recommendations ───',
+      ...recommendations.map((r) => `  ${r.icon} ${r.title}: ${r.description}`),
+      '',
+      '═══════════════════════════════════════════',
+      '  Source: Pollution Control Hub',
+      '═══════════════════════════════════════════',
+    ];
+    const ok = await copyToClipboard(lines.filter(Boolean).join("\n"));
+    showToast(ok ? t("exposure.copied", "Summary copied!") : t("exposure.copyFailed", "Copy failed"));
+  }, [healthScore, totalDays, totalHours, overallAvg, peakDay, recommendations, t, showToast]);
+
+  const handleClearHistory = useCallback(() => {
+    if (typeof window !== "undefined" && window.confirm("Clear all exposure history? This cannot be undone.")) {
+      clearExposureHistory();
+      setHistory([]);
+      showToast(t("exposure.cleared", "History cleared"));
+    }
+  }, [t, showToast]);
+
+  // --- Empty state ---
+  if (history.length === 0 && (!current || current.us_aqi == null)) {
+    return (
+      <section data-testid="exposure-timeline-tracker" className="panel">
+        <div className={styles.root}>
+          <div className={styles.header}>
+            <h2 className={styles.headerTitle}>⏱️ {t("exposure.title", "Exposure Timeline")}</h2>
+            <p className={styles.headerSubtitle}>{t("exposure.subtitle", "Track your cumulative pollution exposure over time")}</p>
+          </div>
+          <div className={styles.emptyState}>
+            <div className={styles.emptyIcon}>⏱️</div>
+            <p className={styles.emptyTitle}>{t("exposure.noData", "No exposure data yet")}</p>
+            <p className={styles.emptyDesc}>{t("exposure.noDataDesc", "Your exposure timeline builds automatically as you use the app. Check back after a few hours to see your exposure patterns.")}</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section data-testid="exposure-timeline-tracker" className="panel">
+      <div className={styles.root}>
+        {/* Header */}
+        <div className={styles.header}>
+          <h2 className={styles.headerTitle}>⏱️ {t("exposure.title", "Exposure Timeline")}</h2>
+          <p className={styles.headerSubtitle}>{t("exposure.subtitleTrack", "Track your cumulative pollution exposure over time — {{city}}", { city: cityName })}</p>
+        </div>
+
+        {/* Health Score Ring */}
+        <div className={styles.healthScoreSection} data-testid="health-score">
+          <div>
+            <ScoreRing score={healthScore.score} color={healthScore.color} />
+            <p style={{ textAlign: "center", marginTop: "0.75rem", fontSize: "0.9rem", fontWeight: 600, color: healthScore.color }}>
+              {t("exposure.healthScore", "7-Day Health Score")}: {healthScore.label}
+            </p>
+            <p style={{ textAlign: "center", fontSize: "0.75rem", color: "var(--text-secondary, #94a3b8)", margin: "0.2rem 0 0" }}>
+              {t("exposure.healthScoreDesc", "Based on your rolling 7-day average AQI exposure")}
+            </p>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className={styles.statsRow} data-testid="stats-row">
+          <StatCard icon="📅" value={totalDays} label={t("exposure.daysTracked", "Days Tracked")} />
+          <StatCard icon="📊" value={totalHours} label={t("exposure.dataPoints", "Data Points")} />
+          <StatCard icon="🌡️" value={overallAvg} label={t("exposure.overallAvg", "Overall Avg AQI")} color={healthScore.color} />
+          {peakDay && (
+            <StatCard icon="⬆️" value={peakDay.maxAqi} label={`${t("exposure.peak", "Peak")} (${peakDay.date.slice(5)})`} color="#ef4444" />
+          )}
+        </div>
+
+        {/* Daily chart */}
+        {dailyChartData.length > 1 && (
+          <div className={styles.section}>
+            <h3 className={styles.sectionTitle}>📈 {t("exposure.dailyChart", "Daily Average AQI")}</h3>
+            <div style={{ width: "100%", height: 220 }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={dailyChartData} margin={{ top: 10, right: 15, bottom: 5, left: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" opacity={0.12} />
+                  <XAxis dataKey="date" fontSize={9} tick={{ fill: "var(--text-secondary, #94a3b8)" }} />
+                  <YAxis fontSize={9} tick={{ fill: "var(--text-secondary, #94a3b8)" }} />
+                  <Tooltip content={<ChartTooltip />} />
+                  <ReferenceLine y={50} stroke="#22c55e" strokeDasharray="5 5" strokeOpacity={0.4} />
+                  <ReferenceLine y={100} stroke="#eab308" strokeDasharray="5 5" strokeOpacity={0.4} />
+                  <ReferenceLine y={150} stroke="#ef4444" strokeDasharray="5 5" strokeOpacity={0.4} />
+                  <Bar dataKey="avgAqi" name="Avg AQI" radius={[4, 4, 0, 0]}>
+                    {dailyChartData.map((entry, idx) => {
+                      const risk = getRiskMeta(entry.riskLevel);
+                      return <Cell key={idx} fill={risk.color} fillOpacity={0.8} />;
+                    })}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        )}
+
+        {/* Tabbed view: Daily / Weekly */}
+        <div className={styles.section} data-testid="summary-table">
+          <div className={styles.tabBar}>
+            <button
+              type="button"
+              className={`${styles.tabBtn} ${activeTab === "daily" ? styles.tabBtnActive : ""}`}
+              onClick={() => setActiveTab("daily")}
+            >
+              📅 {t("exposure.daily", "Daily")}
+            </button>
+            <button
+              type="button"
+              className={`${styles.tabBtn} ${activeTab === "weekly" ? styles.tabBtnActive : ""}`}
+              onClick={() => setActiveTab("weekly")}
+            >
+              📆 {t("exposure.weekly", "Weekly")}
+            </button>
+          </div>
+
+          <div className={styles.tableScroll}>
+            <table className={styles.dataTable}>
+              <thead>
+                <tr>
+                  {activeTab === "daily" ? (
+                    <>
+                      <th>{t("exposure.colDate", "Date")}</th>
+                      <th>{t("exposure.colAvg", "Avg AQI")}</th>
+                      <th>{t("exposure.colPeak", "Peak")}</th>
+                      <th>{t("exposure.colLow", "Low")}</th>
+                      <th>{t("exposure.colHours", "Hours")}</th>
+                      <th>{t("exposure.colScore", "Exposure")}</th>
+                      <th>{t("exposure.colRisk", "Risk")}</th>
+                    </>
+                  ) : (
+                    <>
+                      <th>{t("exposure.colWeek", "Week Starting")}</th>
+                      <th>{t("exposure.colAvg", "Avg AQI")}</th>
+                      <th>{t("exposure.colPeak", "Peak")}</th>
+                      <th>{t("exposure.colHours", "Hours")}</th>
+                      <th>{t("exposure.colScore", "Total Exposure")}</th>
+                      <th>{t("exposure.colRisk", "Risk")}</th>
+                    </>
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {activeTab === "daily" ? (
+                  dailySummaries.length > 0 ? (
+                    [...dailySummaries].reverse().map((d) => {
+                      const risk = getRiskMeta(d.riskLevel);
+                      const riskCls = d.riskLevel === "low" ? styles.riskLow
+                        : d.riskLevel === "moderate" ? styles.riskModerate
+                        : d.riskLevel === "high" ? styles.riskHigh
+                        : styles.riskCritical;
+                      return (
+                        <tr key={d.date}>
+                          <td>{d.date}</td>
+                          <td style={{ fontWeight: 600 }}>{d.avgAqi}</td>
+                          <td>{d.maxAqi}</td>
+                          <td>{d.minAqi}</td>
+                          <td>{d.hours}</td>
+                          <td>{d.exposureScore}</td>
+                          <td className={riskCls}>{risk.emoji} {risk.label}</td>
+                        </tr>
+                      );
+                    })
+                  ) : (
+                    <tr><td colSpan={7} style={{ textAlign: "center", padding: "1.5rem", color: "var(--text-secondary, #94a3b8)" }}>
+                      {t("exposure.noDailyData", "No daily data available yet")}
+                    </td></tr>
+                  )
+                ) : (
+                  weeklySummaries.length > 0 ? (
+                    [...weeklySummaries].reverse().map((w) => {
+                      const risk = getRiskMeta(w.riskLevel);
+                      const riskCls = w.riskLevel === "low" ? styles.riskLow
+                        : w.riskLevel === "moderate" ? styles.riskModerate
+                        : w.riskLevel === "high" ? styles.riskHigh
+                        : styles.riskCritical;
+                      return (
+                        <tr key={w.weekStart}>
+                          <td>{w.weekStart}</td>
+                          <td style={{ fontWeight: 600 }}>{w.avgAqi}</td>
+                          <td>{w.maxAqi}</td>
+                          <td>{w.totalHours}</td>
+                          <td>{w.exposureScore}</td>
+                          <td className={riskCls}>{risk.emoji} {risk.label}</td>
+                        </tr>
+                      );
+                    })
+                  ) : (
+                    <tr><td colSpan={6} style={{ textAlign: "center", padding: "1.5rem", color: "var(--text-secondary, #94a3b8)" }}>
+                      {t("exposure.noWeeklyData", "No weekly data available yet")}
+                    </td></tr>
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Recommendations */}
+        {recommendations.length > 0 && (
+          <div className={styles.section} data-testid="recommendations">
+            <h3 className={styles.sectionTitle}>💡 {t("exposure.recommendations", "Exposure Recommendations")}</h3>
+            <ul className={styles.recList}>
+              {recommendations.map((rec, idx) => (
+                <RecItem key={`${rec.title}-${idx}`} rec={rec} />
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className={styles.actionsBar} data-testid="actions-bar">
+          <button type="button" className={styles.actionBtn} onClick={handleExportCSV} data-testid="export-btn">
+            📄 {t("exposure.exportCSV", "Export CSV")}
+          </button>
+          <button type="button" className={styles.actionBtn} onClick={handleCopySummary} data-testid="copy-btn">
+            📋 {t("exposure.copySummary", "Copy Summary")}
+          </button>
+          <button type="button" className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={handleClearHistory} data-testid="clear-btn">
+            🗑️ {t("exposure.clearHistory", "Clear History")}
+          </button>
+        </div>
+
+        {/* Toast */}
+        <div className={`${styles.toast} ${toastMessage ? styles.toastVisible : ""}`} role="status" aria-live="polite">
+          {toastMessage}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/ExposureTimelineTracker.module.css b/src/components/ExposureTimelineTracker.module.css
new file mode 100644
index 0000000..794332f
--- /dev/null
+++ b/src/components/ExposureTimelineTracker.module.css
@@ -0,0 +1,174 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.header { text-align: center; }
+.headerTitle { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--text-primary, #0f172a); }
+.headerSubtitle { font-size: 0.95rem; color: var(--text-secondary, #64748b); margin: 0; }
+
+/* Health score ring */
+.healthScoreSection {
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+}
+
+.scoreRing {
+  position: relative;
+  width: 160px;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scoreRingSvg {
+  position: absolute;
+  inset: 0;
+  transform: rotate(-90deg);
+}
+
+.scoreRingBg { fill: none; stroke: var(--border-color, #e2e8f0); stroke-width: 10; }
+.scoreRingFill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
+
+.scoreCenter {
+  text-align: center;
+  z-index: 1;
+}
+
+.scoreValue { font-size: 2.2rem; font-weight: 700; line-height: 1; }
+.scoreLabel { font-size: 0.8rem; color: var(--text-secondary, #64748b); margin-top: 0.15rem; }
+
+/* Stats row */
+.statsRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 0.75rem;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.85rem 0.5rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.65rem;
+  text-align: center;
+  transition: transform 0.12s, box-shadow 0.12s;
+}
+
+.statCard:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); }
+.statIcon { font-size: 1.3rem; margin-bottom: 0.2rem; }
+.statValue { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #0f172a); }
+.statLabel { font-size: 0.7rem; color: var(--text-secondary, #64748b); margin-top: 0.15rem; }
+
+/* Section card */
+.section {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.sectionTitle {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+  color: var(--text-primary, #0f172a);
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+/* Daily table */
+.tableScroll { overflow-x: auto; border-radius: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); }
+.dataTable { width: 100%; border-collapse: collapse; font-size: 0.78rem; white-space: nowrap; }
+.dataTable th, .dataTable td { padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--border-color, #f1f5f9); text-align: left; }
+.dataTable th { background: var(--bg-secondary, #f8fafc); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #475569); position: sticky; top: 0; }
+.dataTable tbody tr:hover { background: var(--bg-secondary, #f8fafc); }
+
+.riskLow { color: #22c55e; font-weight: 600; }
+.riskModerate { color: #eab308; font-weight: 600; }
+.riskHigh { color: #f97316; font-weight: 600; }
+.riskCritical { color: #ef4444; font-weight: 600; }
+
+/* Recommendations */
+.recList { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
+.recItem {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  border-left: 4px solid var(--border-color, #cbd5e1);
+  background: var(--bg-secondary, #f8fafc);
+}
+.recHigh { border-left-color: #ef4444; background: #fef2f2; }
+.recMedium { border-left-color: #f59e0b; background: #fffbeb; }
+.recLow { border-left-color: #22c55e; background: #f0fdf4; }
+.recInfo { border-left-color: #3b82f6; background: #eff6ff; }
+
+.recIcon { font-size: 1.3rem; flex-shrink: 0; }
+.recContent { flex: 1; }
+.recTitle { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.2rem; color: var(--text-primary, #0f172a); }
+.recDesc { font-size: 0.8rem; margin: 0; color: var(--text-secondary, #475569); line-height: 1.5; }
+
+/* Actions */
+.actionsBar { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
+
+.actionBtn {
+  padding: 0.55rem 1.25rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  border-radius: 0.5rem;
+  background: var(--bg-card, #fff);
+  color: var(--text-primary, #0f172a);
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+.actionBtn:hover { background: var(--bg-secondary, #f8fafc); border-color: var(--brand, #0d9488); }
+.actionBtnDanger { border-color: #ef4444; color: #ef4444; }
+.actionBtnDanger:hover { background: #fef2f2; }
+
+/* Toast */
+.toast {
+  position: fixed; bottom: 1.5rem; left: 50%;
+  transform: translateX(-50%) translateY(120%);
+  background: #1e293b; color: #fff;
+  padding: 0.65rem 1.25rem; border-radius: 0.5rem;
+  font-size: 0.85rem; font-weight: 500; z-index: 9999;
+  opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease;
+  pointer-events: none;
+}
+.toastVisible { transform: translateX(-50%) translateY(0); opacity: 1; }
+
+/* Empty state */
+.emptyState { text-align: center; padding: 3rem 1.5rem; color: var(--text-secondary, #94a3b8); }
+.emptyIcon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+.emptyTitle { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--text-primary, #475569); }
+.emptyDesc { font-size: 0.85rem; margin: 0; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; }
+
+/* Tabs */
+.tabBar { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
+.tabBtn {
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--border-color, #cbd5e1);
+  border-radius: 999px;
+  background: var(--bg-card, #fff);
+  color: var(--text-secondary, #475569);
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.tabBtn:hover { border-color: var(--brand, #0d9488); color: var(--brand, #0d9488); }
+.tabBtnActive { background: var(--brand, #0d9488); color: #fff; border-color: var(--brand, #0d9488); }
diff --git a/src/components/ExposureTimelineTracker.test.jsx b/src/components/ExposureTimelineTracker.test.jsx
new file mode 100644
index 0000000..02ae50a
--- /dev/null
+++ b/src/components/ExposureTimelineTracker.test.jsx
@@ -0,0 +1,190 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ExposureTimelineTracker from "./ExposureTimelineTracker";
+import {
+  readExposureHistory,
+  writeExposureHistory,
+  recordExposure,
+  computeDailySummaries,
+  computeWeeklySummaries,
+  computeHealthScore,
+  generateRecommendations,
+  getRiskMeta,
+  exposureToCSV,
+  clearExposureHistory,
+} from "../services/exposureTimelineService";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key, opts) => (typeof opts === "string" ? opts : opts?.defaultValue || key),
+  }),
+}));
+
+vi.mock("../services/dataExportService", () => ({
+  triggerDownload: vi.fn(),
+  copyToClipboard: vi.fn(async () => true),
+}));
+
+// ---------------------------------------------------------------------------
+// Service tests
+// ---------------------------------------------------------------------------
+describe("exposureTimelineService", () => {
+  const mockHistory = [
+    { date: "2026-08-25", hour: 8, aqi: 80, city: "Delhi", timestamp: 1724568000000 },
+    { date: "2026-08-25", hour: 12, aqi: 120, city: "Delhi", timestamp: 1724582400000 },
+    { date: "2026-08-25", hour: 18, aqi: 95, city: "Delhi", timestamp: 1724600800000 },
+    { date: "2026-08-26", hour: 8, aqi: 110, city: "Delhi", timestamp: 1724654400000 },
+    { date: "2026-08-26", hour: 14, aqi: 140, city: "Delhi", timestamp: 1724676000000 },
+    { date: "2026-08-27", hour: 10, aqi: 60, city: "Delhi", timestamp: 1724748000000 },
+  ];
+
+  describe("computeDailySummaries", () => {
+    it("groups by date and computes averages", () => {
+      const summaries = computeDailySummaries(mockHistory);
+      expect(summaries.length).toBe(3);
+      const aug25 = summaries.find((s) => s.date === "2026-08-25");
+      expect(aug25.hours).toBe(3);
+      expect(aug25.avgAqi).toBeCloseTo(98.33, 0);
+      expect(aug25.maxAqi).toBe(120);
+      expect(aug25.minAqi).toBe(80);
+    });
+
+    it("returns empty for empty input", () => {
+      expect(computeDailySummaries([])).toEqual([]);
+    });
+
+    it("handles null input", () => {
+      expect(computeDailySummaries(null)).toEqual([]);
+    });
+  });
+
+  describe("computeWeeklySummaries", () => {
+    it("groups by week and computes totals", () => {
+      const summaries = computeWeeklySummaries(mockHistory);
+      expect(summaries.length).toBeGreaterThanOrEqual(1);
+      expect(summaries[0].totalHours).toBeGreaterThan(0);
+      expect(typeof summaries[0].riskLevel).toBe("string");
+    });
+  });
+
+  describe("computeHealthScore", () => {
+    it("returns 100 for empty history", () => {
+      const result = computeHealthScore([]);
+      expect(result.score).toBe(100);
+    });
+
+    it("returns lower score for high AQI history", () => {
+      const highAqiHistory = Array.from({ length: 14 }, (_, i) => ({
+        date: `2026-08-${String(i + 1).padStart(2, "0")}`,
+        hour: 10,
+        aqi: 180,
+        city: "Delhi",
+      }));
+      const result = computeHealthScore(highAqiHistory);
+      expect(result.score).toBeLessThan(50);
+    });
+
+    it("returns high score for low AQI history", () => {
+      const lowAqiHistory = Array.from({ length: 14 }, (_, i) => ({
+        date: `2026-08-${String(i + 1).padStart(2, "0")}`,
+        hour: 10,
+        aqi: 30,
+        city: "Delhi",
+      }));
+      const result = computeHealthScore(lowAqiHistory);
+      expect(result.score).toBeGreaterThanOrEqual(80);
+    });
+  });
+
+  describe("generateRecommendations", () => {
+    it("returns recommendations array", () => {
+      const recs = generateRecommendations(mockHistory);
+      expect(Array.isArray(recs)).toBe(true);
+      expect(recs.length).toBeGreaterThan(0);
+      expect(recs[0]).toHaveProperty("title");
+      expect(recs[0]).toHaveProperty("description");
+      expect(recs[0]).toHaveProperty("priority");
+      expect(recs[0]).toHaveProperty("icon");
+    });
+
+    it("suggests building profile for few data points", () => {
+      const recs = generateRecommendations([{ date: "2026-08-28", hour: 10, aqi: 50, city: "A" }]);
+      expect(recs.some((r) => r.title.includes("Build"))).toBe(true);
+    });
+
+    it("flags consecutive high exposure days", () => {
+      const highDays = [];
+      for (let d = 25; d <= 28; d++) {
+        for (let h = 8; h <= 20; h += 4) {
+          highDays.push({ date: `2026-08-${d}`, hour: h, aqi: 170, city: "Delhi" });
+        }
+      }
+      const recs = generateRecommendations(highDays);
+      expect(recs.some((r) => r.title.includes("Extended"))).toBe(true);
+    });
+  });
+
+  describe("getRiskMeta", () => {
+    it("returns metadata for all risk levels", () => {
+      expect(getRiskMeta("low").emoji).toBe("🟢");
+      expect(getRiskMeta("moderate").emoji).toBe("🟡");
+      expect(getRiskMeta("high").emoji).toBe("🟠");
+      expect(getRiskMeta("critical").emoji).toBe("🔴");
+      expect(getRiskMeta("unknown").emoji).toBe("⚪");
+    });
+  });
+
+  describe("exposureToCSV", () => {
+    it("produces valid CSV", () => {
+      const csv = exposureToCSV(mockHistory);
+      expect(csv).toContain("Date,Hour,AQI,City,Timestamp");
+      expect(csv).toContain("Delhi");
+      expect(csv.split("\n").length).toBe(mockHistory.length + 2); // header comment + header + rows
+    });
+
+    it("handles empty input", () => {
+      const csv = exposureToCSV([]);
+      expect(csv).toContain("Date,Hour,AQI,City,Timestamp");
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Component tests
+// ---------------------------------------------------------------------------
+describe("ExposureTimelineTracker", () => {
+  it("renders panel with title", () => {
+    render(<ExposureTimelineTracker current={{ us_aqi: 80 }} cityName="Delhi" />);
+    expect(screen.getByTestId("exposure-timeline-tracker")).toBeTruthy();
+    expect(screen.getByText(/Exposure Timeline/)).toBeTruthy();
+  });
+
+  it("displays health score section", () => {
+    render(<ExposureTimelineTracker current={{ us_aqi: 80 }} cityName="Delhi" />);
+    expect(screen.getByTestId("health-score")).toBeTruthy();
+  });
+
+  it("displays stats row", () => {
+    render(<ExposureTimelineTracker current={{ us_aqi: 80 }} cityName="Delhi" />);
+    expect(screen.getByTestId("stats-row")).toBeTruthy();
+  });
+
+  it("displays action buttons", () => {
+    render(<ExposureTimelineTracker current={{ us_aqi: 80 }} cityName="Delhi" />);
+    expect(screen.getByTestId("export-btn")).toBeTruthy();
+    expect(screen.getByTestId("copy-btn")).toBeTruthy();
+    expect(screen.getByTestId("clear-btn")).toBeTruthy();
+  });
+
+  it("shows empty state when no data", () => {
+    // Mock localStorage to return empty
+    const orig = window.localStorage.getItem;
+    window.localStorage.getItem = () => null;
+    render(<ExposureTimelineTracker current={null} cityName="Delhi" />);
+    expect(screen.getByText(/No exposure data yet/)).toBeTruthy();
+    window.localStorage.getItem = orig;
+  });
+});
diff --git a/src/services/alertRulesService.js b/src/services/alertRulesService.js
new file mode 100644
index 0000000..d1053e5
--- /dev/null
+++ b/src/services/alertRulesService.js
@@ -0,0 +1,358 @@
+/**
+ * Alert Rules Engine Service
+ *
+ * Manages user-defined alert rules that evaluate incoming AQI data against
+ * custom thresholds and conditions. Rules are persisted in localStorage.
+ *
+ * Supports:
+ * - AQI threshold alerts (above/below/between)
+ * - Pollutant-specific alerts (PM2.5, PM10, NO₂, O₃, CO)
+ * - Time-of-day conditions (morning/afternoon/evening/night or custom hours)
+ * - Frequency throttling (once per N hours)
+ * - Enable/disable individual rules
+ */
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const RULES_STORAGE_KEY = 'pch_alert_rules';
+const RULE_HISTORY_KEY = 'pch_alert_history';
+
+export const POLLUTANT_OPTIONS = [
+  { key: 'us_aqi', label: 'US AQI', unit: '' },
+  { key: 'pm2_5', label: 'PM2.5', unit: 'µg/m³' },
+  { key: 'pm10', label: 'PM10', unit: 'µg/m³' },
+  { key: 'nitrogen_dioxide', label: 'NO₂', unit: 'µg/m³' },
+  { key: 'ozone', label: 'O₃', unit: 'µg/m³' },
+  { key: 'carbon_monoxide', label: 'CO', unit: 'mg/m³' },
+];
+
+export const OPERATORS = [
+  { key: 'above', label: 'Above (≥)', symbol: '≥' },
+  { key: 'below', label: 'Below (≤)', symbol: '≤' },
+  { key: 'equals', label: 'Equals (=)', symbol: '=' },
+];
+
+export const TIME_WINDOWS = [
+  { key: 'any', label: 'Any Time', hours: null },
+  { key: 'morning', label: 'Morning (6–12)', hours: [6, 7, 8, 9, 10, 11] },
+  { key: 'afternoon', label: 'Afternoon (12–18)', hours: [12, 13, 14, 15, 16, 17] },
+  { key: 'evening', label: 'Evening (18–24)', hours: [18, 19, 20, 21, 22, 23] },
+  { key: 'night', label: 'Night (0–6)', hours: [0, 1, 2, 3, 4, 5] },
+];
+
+export const THROTTLE_OPTIONS = [
+  { key: 1, label: 'Every time' },
+  { key: 3, label: 'Every 3 hours' },
+  { key: 6, label: 'Every 6 hours' },
+  { key: 12, label: 'Every 12 hours' },
+  { key: 24, label: 'Once per day' },
+];
+
+// ---------------------------------------------------------------------------
+// Rule structure
+// ---------------------------------------------------------------------------
+
+/**
+ * @typedef {Object} AlertRule
+ * @property {string} id - UUID
+ * @property {string} name - User-friendly label
+ * @property {string} pollutant - Key from POLLUTANT_OPTIONS
+ * @property {string} operator - 'above' | 'below' | 'equals'
+ * @property {number} threshold - Numeric threshold value
+ * @property {string} timeWindow - Key from TIME_WINDOWS
+ * @property {number} throttleHours - Minimum hours between firings
+ * @property {boolean} enabled - Whether the rule is active
+ * @property {string} severity - 'info' | 'warning' | 'critical'
+ * @property {number} createdAt - Timestamp
+ */
+
+// ---------------------------------------------------------------------------
+// CRUD operations
+// ---------------------------------------------------------------------------
+
+/**
+ * @returns {AlertRule[]}
+ */
+export function readRules() {
+  try {
+    if (typeof window === 'undefined') return [];
+    const raw = window.localStorage.getItem(RULES_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * @param {AlertRule[]} rules
+ */
+export function writeRules(rules) {
+  try {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(RULES_STORAGE_KEY, JSON.stringify(rules));
+    }
+  } catch {
+    // Best effort
+  }
+}
+
+/**
+ * Creates a new rule with a generated ID.
+ *
+ * @param {Partial<AlertRule>} partial
+ * @returns {AlertRule}
+ */
+export function createRule(partial = {}) {
+  const rule = {
+    id: `rule_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+    name: partial.name || 'New Alert Rule',
+    pollutant: partial.pollutant || 'us_aqi',
+    operator: partial.operator || 'above',
+    threshold: partial.threshold ?? 100,
+    timeWindow: partial.timeWindow || 'any',
+    throttleHours: partial.throttleHours ?? 6,
+    enabled: partial.enabled !== false,
+    severity: partial.severity || 'warning',
+    createdAt: Date.now(),
+  };
+  const rules = readRules();
+  rules.push(rule);
+  writeRules(rules);
+  return rule;
+}
+
+/**
+ * Updates an existing rule by ID.
+ *
+ * @param {string} id
+ * @param {Partial<AlertRule>} updates
+ * @returns {AlertRule|null}
+ */
+export function updateRule(id, updates) {
+  const rules = readRules();
+  const idx = rules.findIndex((r) => r.id === id);
+  if (idx < 0) return null;
+  rules[idx] = { ...rules[idx], ...updates };
+  writeRules(rules);
+  return rules[idx];
+}
+
+/**
+ * Deletes a rule by ID.
+ *
+ * @param {string} id
+ * @returns {boolean}
+ */
+export function deleteRule(id) {
+  const rules = readRules();
+  const filtered = rules.filter((r) => r.id !== id);
+  if (filtered.length === rules.length) return false;
+  writeRules(filtered);
+  return true;
+}
+
+/**
+ * Toggles a rule's enabled state.
+ *
+ * @param {string} id
+ * @returns {AlertRule|null}
+ */
+export function toggleRule(id) {
+  const rules = readRules();
+  const rule = rules.find((r) => r.id === id);
+  if (!rule) return null;
+  rule.enabled = !rule.enabled;
+  writeRules(rules);
+  return rule;
+}
+
+// ---------------------------------------------------------------------------
+// Evaluation engine
+// ---------------------------------------------------------------------------
+
+/**
+ * Evaluates all active rules against a set of current readings.
+ *
+ * @param {Object} current - Current readings { us_aqi, pm2_5, pm10, nitrogen_dioxide, ozone, carbon_monoxide }
+ * @returns {{ triggered: AlertRule[], firedIds: string[] }}
+ */
+export function evaluateRules(current) {
+  if (!current) return { triggered: [], firedIds: [] };
+
+  const rules = readRules();
+  const history = readAlertHistory();
+  const now = Date.now();
+  const currentHour = new Date().getHours();
+
+  const triggered = [];
+  const firedIds = [];
+
+  for (const rule of rules) {
+    if (!rule.enabled) continue;
+
+    // Time window check
+    const window = TIME_WINDOWS.find((tw) => tw.key === rule.timeWindow);
+    if (window?.hours && !window.hours.includes(currentHour)) continue;
+
+    // Read value
+    const value = current[rule.pollutant];
+    if (value == null || !Number.isFinite(value)) continue;
+
+    // Operator check
+    let matched = false;
+    switch (rule.operator) {
+      case 'above':
+        matched = value >= rule.threshold;
+        break;
+      case 'below':
+        matched = value <= rule.threshold;
+        break;
+      case 'equals':
+        matched = Math.abs(value - rule.threshold) < 0.5;
+        break;
+      default:
+        matched = false;
+    }
+
+    if (!matched) continue;
+
+    // Throttle check
+    const lastFired = history[rule.id];
+    if (lastFired) {
+      const elapsedHours = (now - lastFired) / (1000 * 60 * 60);
+      if (elapsedHours < rule.throttleHours) continue;
+    }
+
+    triggered.push(rule);
+    firedIds.push(rule.id);
+  }
+
+  // Update history for fired rules
+  if (firedIds.length > 0) {
+    const updatedHistory = { ...history };
+    for (const id of firedIds) {
+      updatedHistory[id] = now;
+    }
+    writeAlertHistory(updatedHistory);
+  }
+
+  return { triggered, firedIds };
+}
+
+// ---------------------------------------------------------------------------
+// Alert history (for throttling)
+// ---------------------------------------------------------------------------
+
+function readAlertHistory() {
+  try {
+    if (typeof window === 'undefined') return {};
+    const raw = window.localStorage.getItem(RULE_HISTORY_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeAlertHistory(history) {
+  try {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(RULE_HISTORY_KEY, JSON.stringify(history));
+    }
+  } catch {
+    // Best effort
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Notification helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Sends a browser notification for a triggered rule.
+ *
+ * @param {AlertRule} rule
+ * @param {Object} current
+ * @returns {boolean} Whether notification was shown
+ */
+export function sendNotification(rule, current) {
+  if (typeof window === 'undefined' || !window.Notification) return false;
+  if (window.Notification.permission !== 'granted') return false;
+
+  const pollutant = POLLUTANT_OPTIONS.find((p) => p.key === rule.pollutant);
+  const value = current[rule.pollutant];
+  const symbol = OPERATORS.find((o) => o.key === rule.operator)?.symbol || '≥';
+
+  const body = `${pollutant?.label || rule.pollutant}: ${value} ${pollutant?.unit || ''} ${symbol} ${rule.threshold}`;
+  const icon = rule.severity === 'critical' ? '🔴' : rule.severity === 'warning' ? '🟠' : '🔵';
+
+  try {
+    new window.Notification(`${icon} ${rule.name}`, {
+      body,
+      icon: '/favicon.ico',
+      tag: rule.id,
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Requests browser notification permission.
+ *
+ * @returns {Promise<string>} Permission state
+ */
+export async function requestNotificationPermission() {
+  if (typeof window === 'undefined' || !window.Notification) return 'unavailable';
+  if (window.Notification.permission === 'granted') return 'granted';
+  if (window.Notification.permission === 'denied') return 'denied';
+  const result = await window.Notification.requestPermission();
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Preset rules
+// ---------------------------------------------------------------------------
+
+export const PRESET_RULES = [
+  {
+    name: 'High AQI Alert',
+    pollutant: 'us_aqi',
+    operator: 'above',
+    threshold: 150,
+    timeWindow: 'any',
+    throttleHours: 6,
+    severity: 'critical',
+  },
+  {
+    name: 'PM2.5 Warning',
+    pollutant: 'pm2_5',
+    operator: 'above',
+    threshold: 55,
+    timeWindow: 'any',
+    throttleHours: 12,
+    severity: 'warning',
+  },
+  {
+    name: 'Morning Air Check',
+    pollutant: 'us_aqi',
+    operator: 'above',
+    threshold: 100,
+    timeWindow: 'morning',
+    throttleHours: 24,
+    severity: 'warning',
+  },
+  {
+    name: 'Good Air Window',
+    pollutant: 'us_aqi',
+    operator: 'below',
+    threshold: 50,
+    timeWindow: 'morning',
+    throttleHours: 6,
+    severity: 'info',
+  },
+];
diff --git a/src/services/apiClient.js b/src/services/apiClient.js
new file mode 100644
index 0000000..e00f6c8
--- /dev/null
+++ b/src/services/apiClient.js
@@ -0,0 +1,64 @@
+const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+
+export async function apiClient(pathSegments, options = {}) {
+    const { params = {}, defaultError = 'Request failed', signal, method = 'GET', body } = options;
+    
+    const base = API_BASE.replace(/\/+$/, '');
+    const path = Array.isArray(pathSegments)
+        ? pathSegments.map(segment => encodeURIComponent(segment)).join('/')
+        : pathSegments;
+        
+    let urlString = `${base}/${path}`;
+    const url = (urlString.startsWith('http') || typeof window === 'undefined')
+        ? new URL(urlString, 'http://localhost')
+        : new URL(urlString, window.location.origin);
+    
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            url.searchParams.append(key, value);
+        }
+    });
+
+    let finalUrl = url.toString();
+    if (finalUrl.startsWith('http://localhost') && urlString.startsWith('/')) {
+        finalUrl = finalUrl.replace('http://localhost', '');
+    }
+
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+
+    const token = typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
+    if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+    }
+
+    const response = await fetch(finalUrl, {
+        method,
+        headers,
+        body: body ? JSON.stringify(body) : undefined,
+        signal
+    });
+
+    if (!response.ok) {
+        let errorMessage = defaultError;
+        const contentType = response.headers.get('content-type');
+        if (contentType && contentType.includes('application/json')) {
+            try {
+                const errorData = await response.json();
+                if (errorData && errorData.message) {
+                    errorMessage = errorData.message;
+                }
+            } catch (e) {
+                // ignore
+            }
+        }
+        throw new Error(errorMessage);
+    }
+
+    if (response.status === 204) {
+        return null;
+    }
+    
+    const text = await response.text();
+    return text ? JSON.parse(text) : null;
+}
diff --git a/src/services/challengeService.js b/src/services/challengeService.js
index 71b4ba0..354ccb2 100644
--- a/src/services/challengeService.js
+++ b/src/services/challengeService.js
@@ -2,68 +2,45 @@
  * @fileoverview Frontend service for fetching challenges, updating user progress, and claiming rewards.
  */
 
-const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+import { apiClient } from './apiClient';
 
 /**
  * Fetches all active challenges and the current user's progress.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<import('../types/challenge').ChallengeResponse>}
  */
-export const fetchActiveChallenges = async () => {
-    const response = await fetch(`${API_BASE}/challenges/active`, {
+export const fetchActiveChallenges = (signal) => {
+    return apiClient(['challenges', 'active'], {
         method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
+        signal,
+        defaultError: 'Failed to fetch active challenges.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to fetch active challenges.');
-    }
-
-    return response.json();
 };
 
 /**
  * Joins a specific challenge for the current user.
  * @param {string} challengeId - The ID of the challenge to join.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Object>}
  */
-export const joinChallenge = async (challengeId) => {
-    const response = await fetch(`${API_BASE}/challenges/${challengeId}/join`, {
+export const joinChallenge = (challengeId, signal) => {
+    return apiClient(['challenges', challengeId, 'join'], {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
+        signal,
+        defaultError: 'Failed to join challenge.'
     });
-
-    if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Failed to join challenge.');
-    }
-
-    return response.json();
 };
 
 /**
  * Claims the reward for a completed challenge.
  * @param {string} challengeId - The ID of the completed challenge.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Object>}
  */
-export const claimChallengeReward = async (challengeId) => {
-    const response = await fetch(`${API_BASE}/challenges/${challengeId}/claim`, {
+export const claimChallengeReward = (challengeId, signal) => {
+    return apiClient(['challenges', challengeId, 'claim'], {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
+        signal,
+        defaultError: 'Failed to claim reward.'
     });
-
-    if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Failed to claim reward.');
-    }
-
-    return response.json();
 };
diff --git a/src/services/cityComparisonReportService.js b/src/services/cityComparisonReportService.js
new file mode 100644
index 0000000..54d812e
--- /dev/null
+++ b/src/services/cityComparisonReportService.js
@@ -0,0 +1,253 @@
+/**
+ * City Comparison Report Service
+ *
+ * Provides utilities for comparing AQI data across multiple cities:
+ * ranking, differential analysis, health-risk categorisation, and
+ * structured report generation.
+ */
+
+// ---------------------------------------------------------------------------
+// AQI band classification
+// ---------------------------------------------------------------------------
+
+const AQI_BANDS = [
+  { min: 0, max: 50, label: 'Good', color: '#22c55e', risk: 'low' },
+  { min: 51, max: 100, label: 'Moderate', color: '#eab308', risk: 'low' },
+  { min: 101, max: 150, label: 'Unhealthy for Sensitive Groups', color: '#f97316', risk: 'moderate' },
+  { min: 151, max: 200, label: 'Unhealthy', color: '#ef4444', risk: 'high' },
+  { min: 201, max: 300, label: 'Very Unhealthy', color: '#9333ea', risk: 'very-high' },
+  { min: 301, max: 500, label: 'Hazardous', color: '#7f1d1d', risk: 'extreme' },
+];
+
+/**
+ * @param {number} aqi
+ * @returns {{ label: string, color: string, risk: string }}
+ */
+export function getAQIBand(aqi) {
+  if (aqi == null || !Number.isFinite(aqi)) return { label: 'Unknown', color: '#94a3b8', risk: 'unknown' };
+  return AQI_BANDS.find((b) => aqi >= b.min && aqi <= b.max) || { label: 'Hazardous', color: '#7f1d1d', risk: 'extreme' };
+}
+
+// ---------------------------------------------------------------------------
+// City ranking
+// ---------------------------------------------------------------------------
+
+/**
+ * Ranks cities by their current AQI (best = lowest AQI first).
+ *
+ * @param {Array<{ name: string, aqi: number|null, pm2_5?: number|null, pm10?: number|null, no2?: number|null }>} cities
+ * @returns {Array<Object>} Sorted copy with rank, band info, and relativeDiff
+ */
+export function rankCities(cities) {
+  if (!Array.isArray(cities) || cities.length === 0) return [];
+
+  const valid = cities.filter((c) => c && typeof c.aqi === 'number' && Number.isFinite(c.aqi));
+  const sorted = [...valid].sort((a, b) => a.aqi - b.aqi);
+
+  const bestAqi = sorted[0]?.aqi ?? 0;
+
+  return sorted.map((city, idx) => {
+    const band = getAQIBand(city.aqi);
+    return {
+      ...city,
+      rank: idx + 1,
+      band,
+      relativeDiff: bestAqi > 0 ? ((city.aqi - bestAqi) / bestAqi * 100).toFixed(1) : '0.0',
+    };
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Pairwise differential
+// ---------------------------------------------------------------------------
+
+/**
+ * Computes the differential between two cities' AQI readings.
+ *
+ * @param {{ name: string, aqi: number|null }} cityA
+ * @param {{ name: string, aqi: number|null }} cityB
+ * @returns {{ diff: number, percentDiff: string, worseCity: string|null, summary: string }}
+ */
+export function computeDifferential(cityA, cityB) {
+  const aqiA = cityA?.aqi ?? null;
+  const aqiB = cityB?.aqi ?? null;
+
+  if (aqiA == null && aqiB == null) {
+    return { diff: 0, percentDiff: '0.0', worseCity: null, summary: 'Both cities have no data.' };
+  }
+  if (aqiA == null) {
+    return { diff: 0, percentDiff: '0.0', worseCity: cityB.name, summary: `${cityA.name} has no data; ${cityB.name} AQI is ${aqiB}.` };
+  }
+  if (aqiB == null) {
+    return { diff: 0, percentDiff: '0.0', worseCity: cityA.name, summary: `${cityB.name} has no data; ${cityA.name} AQI is ${aqiA}.` };
+  }
+
+  const diff = aqiA - aqiB;
+  const pct = aqiB !== 0 ? Math.abs(diff / aqiB * 100).toFixed(1) : '0.0';
+  const worseCity = diff > 0 ? cityA.name : diff < 0 ? cityB.name : null;
+
+  let summary;
+  if (diff === 0) {
+    summary = `${cityA.name} and ${cityB.name} have identical AQI (${aqiA}).`;
+  } else {
+    const cleaner = diff < 0 ? cityA.name : cityB.name;
+    const dirtier = diff > 0 ? cityA.name : cityB.name;
+    summary = `${dirtier} has ${Math.abs(diff)} higher AQI (${pct}% worse) than ${cleaner}.`;
+  }
+
+  return { diff, percentDiff: pct, worseCity, summary };
+}
+
+// ---------------------------------------------------------------------------
+// Health risk categorisation
+// ---------------------------------------------------------------------------
+
+/**
+ * Categorises a list of cities into risk groups based on AQI.
+ *
+ * @param {Array<{ name: string, aqi: number|null }>} cities
+ * @returns {{ safe: string[], moderate: string[], unhealthy: string[], critical: string[] }}
+ */
+export function categoriseByRisk(cities) {
+  const result = { safe: [], moderate: [], unhealthy: [], critical: [] };
+
+  for (const city of cities || []) {
+    const aqi = city?.aqi;
+    if (aqi == null || !Number.isFinite(aqi)) continue;
+
+    if (aqi <= 100) result.safe.push(city.name);
+    else if (aqi <= 150) result.moderate.push(city.name);
+    else if (aqi <= 200) result.unhealthy.push(city.name);
+    else result.critical.push(city.name);
+  }
+
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Pollutant breakdown comparison
+// ---------------------------------------------------------------------------
+
+/**
+ * Compares pollutant levels across cities and returns a structured breakdown.
+ *
+ * @param {Array<{ name: string, pm2_5?: number|null, pm10?: number|null, no2?: number|null, o3?: number|null, co?: number|null }>} cities
+ * @returns {Array<Object>} Array of pollutant comparison objects
+ */
+export function comparePollutants(cities) {
+  const pollutants = [
+    { key: 'pm2_5', label: 'PM2.5', unit: 'µg/m³', whoLimit: 15 },
+    { key: 'pm10', label: 'PM10', unit: 'µg/m³', whoLimit: 45 },
+    { key: 'no2', label: 'NO₂', unit: 'µg/m³', whoLimit: 25 },
+    { key: 'o3', label: 'O₃', unit: 'µg/m³', whoLimit: 100 },
+    { key: 'co', label: 'CO', unit: 'mg/m³', whoLimit: 4 },
+  ];
+
+  return pollutants.map((p) => {
+    const readings = (cities || []).map((c) => ({
+      city: c.name,
+      value: c[p.key] ?? null,
+      exceedsLimit: typeof c[p.key] === 'number' && c[p.key] > p.whoLimit,
+    }));
+
+    const validValues = readings.filter((r) => typeof r.value === 'number').map((r) => r.value);
+    const avg = validValues.length > 0 ? validValues.reduce((s, v) => s + v, 0) / validValues.length : 0;
+
+    return {
+      pollutant: p.label,
+      key: p.key,
+      unit: p.unit,
+      whoLimit: p.whoLimit,
+      readings,
+      average: avg,
+      citiesExceedingLimit: readings.filter((r) => r.exceedsLimit).map((r) => r.city),
+    };
+  });
+}
+
+// ---------------------------------------------------------------------------
+// CSV export
+// ---------------------------------------------------------------------------
+
+/**
+ * Generates a CSV string comparing multiple cities.
+ *
+ * @param {Array<Object>} rankedCities - Output of rankCities()
+ * @returns {string}
+ */
+export function comparisonToCSV(rankedCities) {
+  const headers = ['Rank', 'City', 'US AQI', 'AQI Band', 'Risk Level', 'PM2.5', 'PM10', 'NO₂', 'O₃', 'CO', 'Diff from Best (%)'];
+  const rows = rankedCities.map((c) => [
+    c.rank,
+    `"${(c.name || '').replace(/"/g, '""')}"`,
+    c.aqi ?? '',
+    `"${c.band?.label ?? ''}"`,
+    c.band?.risk ?? '',
+    c.pm2_5 ?? '',
+    c.pm10 ?? '',
+    c.no2 ?? '',
+    c.o3 ?? '',
+    c.co ?? '',
+    c.relativeDiff,
+  ]);
+
+  const header = `# Multi-City AQI Comparison — Generated ${new Date().toISOString()}`;
+  return `${header}\n${headers.join(',')}\n${rows.map((r) => r.join(',')).join('\n')}`;
+}
+
+// ---------------------------------------------------------------------------
+// Summary generation
+// ---------------------------------------------------------------------------
+
+/**
+ * Generates a human-readable comparison summary.
+ *
+ * @param {Array<Object>} rankedCities
+ * @returns {string}
+ */
+export function generateComparisonSummary(rankedCities) {
+  if (!rankedCities || rankedCities.length === 0) return 'No cities to compare.';
+  if (rankedCities.length === 1) return `Only one city (${rankedCities[0].name}) available for comparison.`;
+
+  const best = rankedCities[0];
+  const worst = rankedCities[rankedCities.length - 1];
+  const riskGroups = categoriseByRisk(rankedCities);
+
+  const lines = [
+    '═══════════════════════════════════════════════════',
+    '  MULTI-CITY AIR QUALITY COMPARISON',
+    `  Generated: ${new Date().toLocaleString()}`,
+    '═══════════════════════════════════════════════════',
+    '',
+    `  Cities compared: ${rankedCities.length}`,
+    '',
+    '  ─── Rankings (Best to Worst) ───',
+    '',
+  ];
+
+  for (const city of rankedCities) {
+    const medal = city.rank === 1 ? '🥇' : city.rank === 2 ? '🥈' : city.rank === 3 ? '🥉' : `#${city.rank}`;
+    lines.push(`  ${medal}  ${city.name.padEnd(20)} AQI ${String(city.aqi).padStart(4)}  (${city.band.label})`);
+  }
+
+  lines.push('');
+  lines.push('  ─── Risk Summary ───');
+  if (riskGroups.safe.length) lines.push(`  ✅ Safe (AQI ≤ 100):       ${riskGroups.safe.join(', ')}`);
+  if (riskGroups.moderate.length) lines.push(`  🟡 Moderate (101–150):     ${riskGroups.moderate.join(', ')}`);
+  if (riskGroups.unhealthy.length) lines.push(`  🟠 Unhealthy (151–200):    ${riskGroups.unhealthy.join(', ')}`);
+  if (riskGroups.critical.length) lines.push(`  🔴 Critical (201+):        ${riskGroups.critical.join(', ')}`);
+
+  lines.push('');
+  lines.push(`  Cleanest city: ${best.name} (AQI ${best.aqi})`);
+  lines.push(`  Most polluted: ${worst.name} (AQI ${worst.aqi})`);
+
+  const diff = computeDifferential(best, worst);
+  lines.push(`  Gap: ${Math.abs(diff.diff)} AQI points (${diff.percentDiff}%)`);
+
+  lines.push('');
+  lines.push('═══════════════════════════════════════════════════');
+  lines.push('  Source: Pollution Control Hub');
+  lines.push('═══════════════════════════════════════════════════');
+
+  return lines.join('\n');
+}
diff --git a/src/services/dataExportService.js b/src/services/dataExportService.js
new file mode 100644
index 0000000..dfa813e
--- /dev/null
+++ b/src/services/dataExportService.js
@@ -0,0 +1,335 @@
+/**
+ * Data Export Service
+ *
+ * Provides utilities for exporting air-quality trend data in multiple formats
+ * (CSV, JSON, formatted text reports), generating shareable data URLs, and
+ * copying structured reports to the clipboard.
+ *
+ * All functions are pure / side-effect-only — no network requests.
+ */
+
+// ---------------------------------------------------------------------------
+// CSV export
+// ---------------------------------------------------------------------------
+
+/**
+ * Converts an array of AQI trend data points into a CSV string.
+ *
+ * Each row includes: timestamp, US AQI, PM2.5, PM10, NO₂, O₃, CO.
+ * Null/missing values are written as empty fields.
+ *
+ * @param {Array<Object>} trendData - Hourly AQI trend points
+ * @param {string} [cityName='Unknown'] - City label for the header comment
+ * @returns {string} Complete CSV content with header row
+ */
+export function trendToCSV(trendData, cityName = 'Unknown') {
+  const headers = [
+    'Timestamp',
+    'US AQI',
+    'PM2.5 (µg/m³)',
+    'PM10 (µg/m³)',
+    'NO₂ (µg/m³)',
+    'O₃ (µg/m³)',
+    'CO (mg/m³)',
+  ];
+
+  const rows = (Array.isArray(trendData) ? trendData : []).map((point) => [
+    point.time ?? '',
+    formatNumber(point.us_aqi),
+    formatNumber(point.pm2_5),
+    formatNumber(point.pm10),
+    formatNumber(point.nitrogen_dioxide),
+    formatNumber(point.ozone),
+    formatNumber(point.carbon_monoxide),
+  ]);
+
+  const headerComment = `# Air Quality Data Export — ${cityName} — Generated ${new Date().toISOString()}`;
+  const csvHeader = headers.join(',');
+  const csvRows = rows.map((r) => r.join(',')).join('\n');
+
+  return `${headerComment}\n${csvHeader}\n${csvRows}`;
+}
+
+// ---------------------------------------------------------------------------
+// JSON export
+// ---------------------------------------------------------------------------
+
+/**
+ * Serialises trend data into a structured JSON export object.
+ *
+ * @param {Array<Object>} trendData
+ * @param {string} cityName
+ * @param {{ lat: number, lon: number }} position
+ * @returns {string} Pretty-printed JSON string
+ */
+export function trendToJSON(trendData, cityName, position) {
+  const payload = {
+    exportVersion: '1.0',
+    generatedAt: new Date().toISOString(),
+    city: cityName,
+    coordinates: {
+      latitude: position?.lat ?? null,
+      longitude: position?.lon ?? null,
+    },
+    dataPoints: (Array.isArray(trendData) ? trendData : []).map((point) => ({
+      timestamp: point.time ?? null,
+      aqi: {
+        us_aqi: point.us_aqi ?? null,
+      },
+      pollutants: {
+        pm2_5: point.pm2_5 ?? null,
+        pm10: point.pm10 ?? null,
+        nitrogen_dioxide: point.nitrogen_dioxide ?? null,
+        ozone: point.ozone ?? null,
+        carbon_monoxide: point.carbon_monoxide ?? null,
+      },
+    })),
+    metadata: {
+      totalDataPoints: (trendData || []).length,
+      exportFormat: 'json',
+    },
+  };
+
+  return JSON.stringify(payload, null, 2);
+}
+
+// ---------------------------------------------------------------------------
+// Formatted text report
+// ---------------------------------------------------------------------------
+
+/**
+ * Generates a human-readable text report of current AQI conditions.
+ *
+ * @param {Object} current - Current AQI readings { us_aqi, pm2_5, pm10, nitrogen_dioxide, ozone, carbon_monoxide }
+ * @param {string} cityName
+ * @param {Object} [position]
+ * @returns {string}
+ */
+export function generateTextReport(current, cityName, position) {
+  if (!current) return 'No data available.';
+
+  const now = new Date().toLocaleString();
+  const aqiBand = getAQIBandLabel(current.us_aqi);
+
+  const lines = [
+    '═══════════════════════════════════════════════════',
+    `  AIR QUALITY REPORT — ${cityName.toUpperCase()}`,
+    `  Generated: ${now}`,
+    '═══════════════════════════════════════════════════',
+    '',
+    `  US AQI:  ${current.us_aqi ?? '—'}  (${aqiBand})`,
+    '',
+    '  Pollutant Readings:',
+    `    PM2.5:            ${current.pm2_5 ?? '—'} µg/m³`,
+    `    PM10:             ${current.pm10 ?? '—'} µg/m³`,
+    `    Nitrogen Dioxide: ${current.nitrogen_dioxide ?? '—'} µg/m³`,
+    `    Ozone:            ${current.ozone ?? '—'} µg/m³`,
+    `    Carbon Monoxide:  ${current.carbon_monoxide ?? '—'} mg/m³`,
+    '',
+  ];
+
+  if (position?.lat && position?.lon) {
+    lines.push(`  Location: ${position.lat.toFixed(4)}°N, ${position.lon.toFixed(4)}°E`);
+    if (cityName) lines.push(`  City:     ${cityName}`);
+    lines.push('');
+  }
+
+  // Health guidance
+  lines.push('  ─── Health Guidance ───');
+  if (current.us_aqi <= 50) {
+    lines.push('  ✅ Air quality is satisfactory. No health risk for the general public.');
+  } else if (current.us_aqi <= 100) {
+    lines.push('  🟡 Air quality is acceptable. Unusually sensitive individuals should');
+    lines.push('     consider reducing prolonged outdoor exertion.');
+  } else if (current.us_aqi <= 150) {
+    lines.push('  🟠 Members of sensitive groups may experience health effects.');
+    lines.push('     The general public is less likely to be affected.');
+  } else if (current.us_aqi <= 200) {
+    lines.push('  🔴 Everyone may begin to experience health effects;');
+    lines.push('     sensitive groups may experience more serious effects.');
+  } else if (current.us_aqi <= 300) {
+    lines.push('  🟣 Health alert: everyone may experience more serious health effects.');
+  } else {
+    lines.push('  🟤 Health warning of emergency conditions.');
+  }
+
+  lines.push('');
+  lines.push('═══════════════════════════════════════════════════');
+  lines.push('  Source: Pollution Control Hub — https://pollution-control-hub');
+  lines.push('═══════════════════════════════════════════════════');
+
+  return lines.join('\n');
+}
+
+// ---------------------------------------------------------------------------
+// Shareable link
+// ---------------------------------------------------------------------------
+
+/**
+ * Generates a shareable URL that encodes the current city & position in the
+ * URL hash so the recipient's browser loads the same city.
+ *
+ * @param {string} cityName
+ * @param {number} lat
+ * @param {number} lon
+ * @returns {string}
+ */
+export function generateShareableLink(cityName, lat, lon) {
+  const base = typeof window !== 'undefined' ? window.location.origin + window.location.pathname : 'https://pollution-control-hub.netlify.app/';
+  const params = new URLSearchParams();
+  params.set('city', cityName);
+  params.set('lat', String(lat));
+  params.set('lon', String(lon));
+  return `${base}#${params.toString()}`;
+}
+
+// ---------------------------------------------------------------------------
+// Download helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Triggers a browser file download with the given content.
+ *
+ * @param {string} content
+ * @param {string} filename
+ * @param {string} mimeType
+ */
+export function triggerDownload(content, filename, mimeType = 'text/plain') {
+  if (typeof document === 'undefined') return;
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Copies text to the clipboard and returns success status.
+ *
+ * @param {string} text
+ * @returns {Promise<boolean>}
+ */
+export async function copyToClipboard(text) {
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+    // Fallback for older browsers
+    if (typeof document !== 'undefined') {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Batch export (multiple trend datasets)
+// ---------------------------------------------------------------------------
+
+/**
+ * Merges multiple city trend datasets into a single CSV with a "City" column.
+ *
+ * @param {Array<{ cityName: string, trend: Array<Object> }>} datasets
+ * @returns {string}
+ */
+export function batchTrendToCSV(datasets) {
+  const headers = [
+    'City',
+    'Timestamp',
+    'US AQI',
+    'PM2.5 (µg/m³)',
+    'PM10 (µg/m³)',
+    'NO₂ (µg/m³)',
+    'O₃ (µg/m³)',
+    'CO (mg/m³)',
+  ];
+
+  const rows = [];
+  for (const { cityName, trend } of datasets) {
+    for (const point of trend || []) {
+      rows.push([
+        `"${(cityName || '').replace(/"/g, '""')}"`,
+        point.time ?? '',
+        formatNumber(point.us_aqi),
+        formatNumber(point.pm2_5),
+        formatNumber(point.pm10),
+        formatNumber(point.nitrogen_dioxide),
+        formatNumber(point.ozone),
+        formatNumber(point.carbon_monoxide),
+      ]);
+    }
+  }
+
+  const headerComment = `# Multi-City Air Quality Data Export — Generated ${new Date().toISOString()}`;
+  return `${headerComment}\n${headers.join(',')}\n${rows.map((r) => r.join(',')).join('\n')}`;
+}
+
+// ---------------------------------------------------------------------------
+// Summary statistics
+// ---------------------------------------------------------------------------
+
+/**
+ * Computes summary statistics for a trend dataset.
+ *
+ * @param {Array<Object>} trendData
+ * @returns {{ count: number, avgAqi: number, maxAqi: number, minAqi: number, avgPm25: number, avgPm10: number, avgNo2: number }}
+ */
+export function computeSummaryStats(trendData) {
+  const data = Array.isArray(trendData) ? trendData : [];
+  if (data.length === 0) {
+    return { count: 0, avgAqi: 0, maxAqi: 0, minAqi: 0, avgPm25: 0, avgPm10: 0, avgNo2: 0 };
+  }
+
+  const aqiValues = data.map((d) => d.us_aqi).filter((v) => typeof v === 'number' && Number.isFinite(v));
+  const pm25Values = data.map((d) => d.pm2_5).filter((v) => typeof v === 'number' && Number.isFinite(v));
+  const pm10Values = data.map((d) => d.pm10).filter((v) => typeof v === 'number' && Number.isFinite(v));
+  const no2Values = data.map((d) => d.nitrogen_dioxide).filter((v) => typeof v === 'number' && Number.isFinite(v));
+
+  return {
+    count: data.length,
+    avgAqi: avg(aqiValues),
+    maxAqi: aqiValues.length > 0 ? Math.max(...aqiValues) : 0,
+    minAqi: aqiValues.length > 0 ? Math.min(...aqiValues) : 0,
+    avgPm25: avg(pm25Values),
+    avgPm10: avg(pm10Values),
+    avgNo2: avg(no2Values),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+function formatNumber(value) {
+  return typeof value === 'number' && Number.isFinite(value) ? String(value) : '';
+}
+
+function avg(values) {
+  if (values.length === 0) return 0;
+  return values.reduce((s, v) => s + v, 0) / values.length;
+}
+
+function getAQIBandLabel(aqi) {
+  if (aqi == null) return 'Unknown';
+  if (aqi <= 50) return 'Good';
+  if (aqi <= 100) return 'Moderate';
+  if (aqi <= 150) return 'Unhealthy for Sensitive Groups';
+  if (aqi <= 200) return 'Unhealthy';
+  if (aqi <= 300) return 'Very Unhealthy';
+  return 'Hazardous';
+}
diff --git a/src/services/exposureTimelineService.js b/src/services/exposureTimelineService.js
new file mode 100644
index 0000000..f8cbc35
--- /dev/null
+++ b/src/services/exposureTimelineService.js
@@ -0,0 +1,400 @@
+/**
+ * Exposure Timeline Service
+ *
+ * Tracks cumulative pollution exposure, computes health-risk scores,
+ * and generates personalised exposure history and recommendations.
+ *
+ * All exposure data is persisted in localStorage under a single key.
+ */
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const EXPOSURE_STORAGE_KEY = 'pch_exposure_history';
+const MAX_HISTORY_DAYS = 90;
+
+/**
+ * Health risk thresholds for cumulative AQI exposure (hourly buckets).
+ * These are simplified guidance based on WHO/EPA general recommendations.
+ */
+const EXPOSURE_THRESHOLDS = {
+  /** Below this, exposure is considered "safe" for the current hour. */
+  safeHourly: 50,
+  /** Above this, a single hour is flagged as "moderate risk". */
+  moderateHourly: 100,
+  /** Above this, a single hour is "high risk". */
+  highHourly: 150,
+  /** Cumulative daily exposure score thresholds. */
+  dailyLow: 50,
+  dailyModerate: 100,
+  dailyHigh: 150,
+  dailyCritical: 200,
+};
+
+/**
+ * Weekly exposure score thresholds for cumulative risk.
+ */
+const WEEKLY_THRESHOLDS = {
+  low: 350,      // ~50 avg over 7 days
+  moderate: 700, // ~100 avg over 7 days
+  high: 1050,    // ~150 avg over 7 days
+  critical: 1400,// ~200 avg over 7 days
+};
+
+// ---------------------------------------------------------------------------
+// Storage helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Reads the full exposure history from localStorage.
+ *
+ * @returns {Array<{ date: string, hour: number, aqi: number, city: string }>}
+ */
+export function readExposureHistory() {
+  try {
+    if (typeof window === 'undefined') return [];
+    const raw = window.localStorage.getItem(EXPOSURE_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Persists the exposure history to localStorage.
+ *
+ * @param {Array} history
+ */
+export function writeExposureHistory(history) {
+  try {
+    if (typeof window === 'undefined') return;
+    // Trim to MAX_HISTORY_DAYS to prevent unbounded growth
+    const cutoff = new Date();
+    cutoff.setDate(cutoff.getDate() - MAX_HISTORY_DAYS);
+    const cutoffStr = cutoff.toISOString().slice(0, 10);
+    const trimmed = history.filter((entry) => entry.date >= cutoffStr);
+    window.localStorage.setItem(EXPOSURE_STORAGE_KEY, JSON.stringify(trimmed));
+  } catch {
+    // Storage quota — best effort
+  }
+}
+
+/**
+ * Records a single exposure data point (called on each auto-refresh cycle).
+ *
+ * @param {number} aqi - Current US AQI reading
+ * @param {string} cityName
+ * @returns {Array} Updated history
+ */
+export function recordExposure(aqi, cityName) {
+  if (aqi == null || !Number.isFinite(aqi)) return readExposureHistory();
+
+  const now = new Date();
+  const entry = {
+    date: now.toISOString().slice(0, 10),
+    hour: now.getHours(),
+    aqi: Math.round(aqi),
+    city: cityName || 'Unknown',
+    timestamp: now.getTime(),
+  };
+
+  const history = readExposureHistory();
+
+  // Deduplicate: replace if same date+hour+city already exists
+  const idx = history.findIndex(
+    (h) => h.date === entry.date && h.hour === entry.hour && h.city === entry.city,
+  );
+  if (idx >= 0) {
+    history[idx] = entry;
+  } else {
+    history.push(entry);
+  }
+
+  writeExposureHistory(history);
+  return history;
+}
+
+// ---------------------------------------------------------------------------
+// Aggregation
+// ---------------------------------------------------------------------------
+
+/**
+ * Groups exposure records by date and computes daily summaries.
+ *
+ * @param {Array} history
+ * @returns {Array<{ date: string, avgAqi: number, maxAqi: number, minAqi: number, hours: number, riskLevel: string, exposureScore: number }>}
+ */
+export function computeDailySummaries(history) {
+  const byDate = new Map();
+
+  for (const entry of history) {
+    if (!entry.date || typeof entry.aqi !== 'number') continue;
+    if (!byDate.has(entry.date)) byDate.set(entry.date, []);
+    byDate.get(entry.date).push(entry.aqi);
+  }
+
+  return Array.from(byDate.entries())
+    .map(([date, aqis]) => {
+      const avg = aqis.reduce((s, v) => s + v, 0) / aqis.length;
+      const max = Math.max(...aqis);
+      const min = Math.min(...aqis);
+      const exposureScore = Math.round(avg * aqis.length); // total exposure "dose"
+      return {
+        date,
+        avgAqi: Math.round(avg * 10) / 10,
+        maxAqi: max,
+        minAqi: min,
+        hours: aqis.length,
+        exposureScore,
+        riskLevel: classifyDailyRisk(avg),
+      };
+    })
+    .sort((a, b) => a.date.localeCompare(b.date));
+}
+
+/**
+ * Groups exposure records by week and computes weekly summaries.
+ *
+ * @param {Array} history
+ * @returns {Array<{ weekStart: string, avgAqi: number, maxAqi: number, totalHours: number, exposureScore: number, riskLevel: string }>}
+ */
+export function computeWeeklySummaries(history) {
+  const byWeek = new Map();
+
+  for (const entry of history) {
+    if (!entry.date || typeof entry.aqi !== 'number') continue;
+    const d = new Date(entry.date);
+    // Get Monday of the week
+    const day = d.getDay();
+    const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+    const monday = new Date(d);
+    monday.setDate(diff);
+    const weekKey = monday.toISOString().slice(0, 10);
+
+    if (!byWeek.has(weekKey)) byWeek.set(weekKey, []);
+    byWeek.get(weekKey).push(entry.aqi);
+  }
+
+  return Array.from(byWeek.entries())
+    .map(([weekStart, aqis]) => {
+      const avg = aqis.reduce((s, v) => s + v, 0) / aqis.length;
+      const max = Math.max(...aqis);
+      const totalScore = aqis.reduce((s, v) => s + v, 0);
+      return {
+        weekStart,
+        avgAqi: Math.round(avg * 10) / 10,
+        maxAqi: max,
+        totalHours: aqis.length,
+        exposureScore: totalScore,
+        riskLevel: classifyWeeklyRisk(totalScore),
+      };
+    })
+    .sort((a, b) => a.weekStart.localeCompare(b.weekStart));
+}
+
+// ---------------------------------------------------------------------------
+// Risk classification
+// ---------------------------------------------------------------------------
+
+/**
+ * @param {number} avgDailyAqi
+ * @returns {string}
+ */
+function classifyDailyRisk(avgDailyAqi) {
+  if (avgDailyAqi <= EXPOSURE_THRESHOLDS.dailyLow) return 'low';
+  if (avgDailyAqi <= EXPOSURE_THRESHOLDS.dailyModerate) return 'moderate';
+  if (avgDailyAqi <= EXPOSURE_THRESHOLDS.dailyHigh) return 'high';
+  return 'critical';
+}
+
+/**
+ * @param {number} weeklyExposureScore
+ * @returns {string}
+ */
+function classifyWeeklyRisk(weeklyExposureScore) {
+  if (weeklyExposureScore <= WEEKLY_THRESHOLDS.low) return 'low';
+  if (weeklyExposureScore <= WEEKLY_THRESHOLDS.moderate) return 'moderate';
+  if (weeklyExposureScore <= WEEKLY_THRESHOLDS.high) return 'high';
+  return 'critical';
+}
+
+/**
+ * Returns human-readable risk metadata for a risk level.
+ *
+ * @param {string} level
+ * @returns {{ label: string, color: string, emoji: string, description: string }}
+ */
+export function getRiskMeta(level) {
+  switch (level) {
+    case 'low':
+      return { label: 'Low Risk', color: '#22c55e', emoji: '🟢', description: 'Air quality exposure is within safe limits. No immediate health concerns.' };
+    case 'moderate':
+      return { label: 'Moderate Risk', color: '#eab308', emoji: '🟡', description: 'Some exposure above recommended levels. Sensitive individuals should take precautions.' };
+    case 'high':
+      return { label: 'High Risk', color: '#f97316', emoji: '🟠', description: 'Significant pollution exposure detected. Consider reducing outdoor activities.' };
+    case 'critical':
+      return { label: 'Critical Risk', color: '#ef4444', emoji: '🔴', description: 'Dangerous exposure levels. Avoid outdoor exertion and use air filtration indoors.' };
+    default:
+      return { label: 'Unknown', color: '#94a3b8', emoji: '⚪', description: 'Insufficient data to assess risk.' };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Health score
+// ---------------------------------------------------------------------------
+
+/**
+ * Computes a 0–100 "health score" where 100 = no exposure risk.
+ * Based on the rolling 7-day average AQI.
+ *
+ * @param {Array} history
+ * @returns {{ score: number, label: string, color: string }}
+ */
+export function computeHealthScore(history) {
+  const daily = computeDailySummaries(history);
+  const last7 = daily.slice(-7);
+
+  if (last7.length === 0) {
+    return { score: 100, label: 'No Data', color: '#94a3b8' };
+  }
+
+  const avgAqi = last7.reduce((s, d) => s + d.avgAqi, 0) / last7.length;
+
+  // Score: 100 at AQI 0, linearly decreasing to 0 at AQI 200+
+  const score = Math.max(0, Math.min(100, Math.round(100 - (avgAqi / 200) * 100)));
+
+  let label, color;
+  if (score >= 80) { label = 'Excellent'; color = '#22c55e'; }
+  else if (score >= 60) { label = 'Good'; color = '#84cc16'; }
+  else if (score >= 40) { label = 'Fair'; color = '#eab308'; }
+  else if (score >= 20) { label = 'Poor'; color = '#f97316'; }
+  else { label = 'Critical'; color = '#ef4444'; }
+
+  return { score, label, color };
+}
+
+// ---------------------------------------------------------------------------
+// Recommendations
+// ---------------------------------------------------------------------------
+
+/**
+ * Generates personalised recommendations based on exposure history.
+ *
+ * @param {Array} history
+ * @returns {Array<{ title: string, description: string, priority: string, icon: string }>}
+ */
+export function generateRecommendations(history) {
+  const daily = computeDailySummaries(history);
+  const weekly = computeWeeklySummaries(history);
+  const recommendations = [];
+
+  // Check for consecutive high-exposure days
+  const recentDays = daily.slice(-3);
+  const consecutiveHigh = recentDays.filter((d) => d.riskLevel === 'high' || d.riskLevel === 'critical').length;
+
+  if (consecutiveHigh >= 3) {
+    recommendations.push({
+      title: 'Extended High Exposure Detected',
+      description: 'You have experienced 3+ consecutive days of high pollution exposure. Consider wearing N95 masks outdoors and using air purifiers indoors.',
+      priority: 'high',
+      icon: '⚠️',
+    });
+  }
+
+  // Check for peak hours pattern
+  const hourlyAvg = new Map();
+  for (const entry of history) {
+    if (typeof entry.hour !== 'number' || typeof entry.aqi !== 'number') continue;
+    if (!hourlyAvg.has(entry.hour)) hourlyAvg.set(entry.hour, []);
+    hourlyAvg.get(entry.hour).push(entry.aqi);
+  }
+
+  let peakHour = null;
+  let peakAvg = 0;
+  for (const [hour, aqis] of hourlyAvg) {
+    const avg = aqis.reduce((s, v) => s + v, 0) / aqis.length;
+    if (avg > peakAvg) { peakAvg = avg; peakHour = hour; }
+  }
+
+  if (peakHour !== null && peakAvg > 100) {
+    recommendations.push({
+      title: `Peak Pollution at ${peakHour}:00`,
+      description: `AQI tends to be highest around ${peakHour}:00 (avg ${Math.round(peakAvg)}). Try to schedule outdoor activities before or after this window.`,
+      priority: 'medium',
+      icon: '🕐',
+    });
+  }
+
+  // Weekly trend
+  if (weekly.length >= 2) {
+    const thisWeek = weekly[weekly.length - 1];
+    const lastWeek = weekly[weekly.length - 2];
+
+    if (thisWeek.avgAqi > lastWeek.avgAqi * 1.2) {
+      recommendations.push({
+        title: 'Exposure Trending Upward',
+        description: `This week's average AQI (${thisWeek.avgAqi}) is higher than last week's (${lastWeek.avgAqi}). Monitor conditions closely.`,
+        priority: 'medium',
+        icon: '📈',
+      });
+    } else if (thisWeek.avgAqi < lastWeek.avgAqi * 0.8) {
+      recommendations.push({
+        title: 'Exposure Improving',
+        description: `Great news — this week's average AQI (${thisWeek.avgAqi}) is lower than last week's (${lastWeek.avgAqi}). Keep up healthy outdoor habits.`,
+        priority: 'low',
+        icon: '✅',
+      });
+    }
+  }
+
+  // General recommendation if few data points
+  if (history.length < 10) {
+    recommendations.push({
+      title: 'Build Your Exposure Profile',
+      description: 'Keep the app running to build a more accurate exposure profile. The more data points collected, the better your personalised recommendations.',
+      priority: 'info',
+      icon: '📊',
+    });
+  }
+
+  return recommendations;
+}
+
+// ---------------------------------------------------------------------------
+// Clear / reset
+// ---------------------------------------------------------------------------
+
+/**
+ * Clears all stored exposure history.
+ */
+export function clearExposureHistory() {
+  try {
+    if (typeof window !== 'undefined') {
+      window.localStorage.removeItem(EXPOSURE_STORAGE_KEY);
+    }
+  } catch {
+    // Best effort
+  }
+}
+
+/**
+ * Exports exposure history as CSV string.
+ *
+ * @param {Array} history
+ * @returns {string}
+ */
+export function exposureToCSV(history) {
+  const headers = ['Date', 'Hour', 'AQI', 'City', 'Timestamp'];
+  const rows = (history || []).map((e) => [
+    e.date ?? '',
+    e.hour ?? '',
+    e.aqi ?? '',
+    `"${(e.city || '').replace(/"/g, '""')}"`,
+    e.timestamp ?? '',
+  ]);
+  const header = `# Exposure History Export — Generated ${new Date().toISOString()}`;
+  return `${header}\n${headers.join(',')}\n${rows.map((r) => r.join(',')).join('\n')}`;
+}
diff --git a/src/services/footprintPlannerService.js b/src/services/footprintPlannerService.js
index 711c21d..22a96d0 100644
--- a/src/services/footprintPlannerService.js
+++ b/src/services/footprintPlannerService.js
@@ -2,70 +2,48 @@
  * @fileoverview Frontend service for saving activity logs, fetching historical trends, and retrieving personalized plans.
  */
 
-const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+import { apiClient } from './apiClient';
 
 /**
  * Logs a new carbon-emitting activity.
  * @param {Object} activityData - The activity details.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Object>}
  */
-export const logActivity = async (activityData) => {
-    const response = await fetch(`${API_BASE}/footprint/activities`, {
+export const logActivity = (activityData, signal) => {
+    return apiClient(['footprint', 'activities'], {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
-        body: JSON.stringify(activityData),
+        body: activityData,
+        signal,
+        defaultError: 'Failed to log activity.'
     });
-
-    if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Failed to log activity.');
-    }
-
-    return response.json();
 };
 
 /**
  * Fetches the user's comprehensive footprint summary and reduction plan.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<import('../types/footprint').FootprintSummary>}
  */
-export const fetchFootprintSummary = async () => {
-    const response = await fetch(`${API_BASE}/footprint/summary`, {
+export const fetchFootprintSummary = (signal) => {
+    return apiClient(['footprint', 'summary'], {
         method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
+        signal,
+        defaultError: 'Failed to fetch footprint summary.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to fetch footprint summary.');
-    }
-
-    return response.json();
 };
 
 /**
  * Toggles the completion status of a reduction step.
  * @param {string} stepId - The ID of the reduction step.
  * @param {boolean} isCompleted - The new completion status.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Object>}
  */
-export const updateReductionStep = async (stepId, isCompleted) => {
-    const response = await fetch(`${API_BASE}/footprint/steps/${stepId}`, {
+export const updateReductionStep = (stepId, isCompleted, signal) => {
+    return apiClient(['footprint', 'steps', stepId], {
         method: 'PATCH',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
-        body: JSON.stringify({ isCompleted }),
+        body: { isCompleted },
+        signal,
+        defaultError: 'Failed to update reduction step.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to update reduction step.');
-    }
-
-    return response.json();
 };
diff --git a/src/services/forecastAttributionService.js b/src/services/forecastAttributionService.js
index 6acc087..19bb3e9 100644
--- a/src/services/forecastAttributionService.js
+++ b/src/services/forecastAttributionService.js
@@ -2,51 +2,36 @@
  * @fileoverview Frontend service layer for fetching forecast data and attribution metrics.
  */
 
-const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+import { apiClient } from './apiClient';
 
 /**
  * Fetches the AI-powered AQI forecast and source attribution for a specific location.
  * @param {number} lat - Latitude of the location.
  * @param {number} lng - Longitude of the location.
  * @param {number} days - Number of days to forecast (default 3).
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<import('../types/forecast').ForecastResponse>}
  */
-export const fetchAqiForecast = async (lat, lng, days = 3) => {
-    const response = await fetch(
-        `${API_BASE}/forecast/aqi?lat=${lat}&lng=${lng}&days=${days}`,
-        {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${localStorage.getItem('token')}`,
-            },
-        }
-    );
-
-    if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Failed to fetch AQI forecast data.');
-    }
-
-    return response.json();
+export const fetchAqiForecast = (lat, lng, days = 3, signal) => {
+    return apiClient(['forecast', 'aqi'], {
+        method: 'GET',
+        params: { lat, lng, days },
+        signal,
+        defaultError: 'Failed to fetch AQI forecast data.'
+    });
 };
 
 /**
  * Fetches historical attribution data to compare with current forecasts.
  * @param {string} locationId - Identifier for the location.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Array>}
  */
-export const fetchHistoricalAttribution = async (locationId) => {
-    const response = await fetch(`${API_BASE}/forecast/attribution/history?locationId=${locationId}`, {
+export const fetchHistoricalAttribution = (locationId, signal) => {
+    return apiClient(['forecast', 'attribution', 'history'], {
         method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-        },
+        params: { locationId },
+        signal,
+        defaultError: 'Failed to fetch historical attribution data.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to fetch historical attribution data.');
-    }
-
-    return response.json();
 };
diff --git a/src/services/incidentRoutingService.js b/src/services/incidentRoutingService.js
index ee2e84b..d31bfc9 100644
--- a/src/services/incidentRoutingService.js
+++ b/src/services/incidentRoutingService.js
@@ -2,31 +2,21 @@
  * @fileoverview Frontend service for fetching routed incidents and updating their lifecycle status.
  */
 
-const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+import { apiClient } from './apiClient';
 
 /**
  * Fetches all routed incidents, optionally filtered by status or category.
  * @param {string} [status] - Optional status filter.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Array<import('../types/incidentRouting').RoutedIncident>>}
  */
-export const fetchRoutedIncidents = async (status) => {
-    const url = status
-        ? `${API_BASE}/incidents/routed?status=${status}`
-        : `${API_BASE}/incidents/routed`;
-
-    const response = await fetch(url, {
+export const fetchRoutedIncidents = (status, signal) => {
+    return apiClient(['incidents', 'routed'], {
         method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
+        params: status ? { status } : {},
+        signal,
+        defaultError: 'Failed to fetch routed incidents.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to fetch routed incidents.');
-    }
-
-    return response.json();
 };
 
 /**
@@ -34,22 +24,14 @@ export const fetchRoutedIncidents = async (status) => {
  * @param {string} incidentId - The ID of the incident.
  * @param {string} status - The new status.
  * @param {string} notes - Verification or resolution notes.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Object>}
  */
-export const updateIncidentStatus = async (incidentId, status, notes) => {
-    const response = await fetch(`${API_BASE}/incidents/${incidentId}/status`, {
+export const updateIncidentStatus = (incidentId, status, notes, signal) => {
+    return apiClient(['incidents', incidentId, 'status'], {
         method: 'PATCH',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
-        body: JSON.stringify({ status, notes }),
+        body: { status, notes },
+        signal,
+        defaultError: 'Failed to update incident status.'
     });
-
-    if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Failed to update incident status.');
-    }
-
-    return response.json();
 };
diff --git a/src/services/microclimateService.js b/src/services/microclimateService.js
index ba8c0df..80cb5a8 100644
--- a/src/services/microclimateService.js
+++ b/src/services/microclimateService.js
@@ -2,7 +2,7 @@
  * @fileoverview Service layer for fetching gridded temperature, humidity, and land-cover data.
  */
 
-const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+import { apiClient } from './apiClient';
 
 /**
  * Fetches hyperlocal microclimate and UHI data for a specific bounding box.
@@ -10,42 +10,29 @@ const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
  * @param {number} south - Southern latitude bound.
  * @param {number} east - Eastern longitude bound.
  * @param {number} west - Western longitude bound.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<import('../types/microclimate').MicroclimateResponse>}
  */
-export const fetchMicroclimateData = async (north, south, east, west) => {
-    const queryParams = new URLSearchParams({ north, south, east, west });
-    const response = await fetch(`${API_BASE}/microclimate/grid?${queryParams}`, {
+export const fetchMicroclimateData = (north, south, east, west, signal) => {
+    return apiClient(['microclimate', 'grid'], {
         method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-        },
+        params: { north, south, east, west },
+        signal,
+        defaultError: 'Failed to fetch microclimate grid data.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to fetch microclimate grid data.');
-    }
-
-    return response.json();
 };
 
 /**
  * Saves a microclimate zone for the current user.
  * @param {Object} zoneData - The zone data to save.
+ * @param {AbortSignal} [signal] - Optional abort signal
  * @returns {Promise<Object>}
  */
-export const saveMicroclimateZone = async (zoneData) => {
-    const response = await fetch(`${API_BASE}/microclimate/zones`, {
+export const saveMicroclimateZone = (zoneData, signal) => {
+    return apiClient(['microclimate', 'zones'], {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
-        body: JSON.stringify(zoneData),
+        body: zoneData,
+        signal,
+        defaultError: 'Failed to save microclimate zone.'
     });
-
-    if (!response.ok) {
-        throw new Error('Failed to save microclimate zone.');
-    }
-
-    return response.json();
 };