diff --git a/README.md b/README.md
index e0d36b3..365b647 100644
--- a/README.md
+++ b/README.md
@@ -39,8 +39,9 @@ the new values. If the RRD has already been created, do not change the order of
 mountpoints unless you intentionally want the historical graph labels to refer
 to different disks.
 
-The generated PNG files and a responsive, auto-refreshing `index.html` are
-placed in `/var/www/html/system-monitor` by default.
+The generated PNG files and four responsive, auto-refreshing dashboard pages
+are placed in `/var/www/html/system-monitor` by default. `index.html` shows
+the last 3 hours and links to the 1-day, 2-week, and 1-year pages.
 With a web server installed, such as nginx or Apache, they can be served
 directly; otherwise they can simply be opened or copied as PNG files.
 
diff --git a/generate_graphs.py b/generate_graphs.py
index 08c7d1e..f5555ae 100755
--- a/generate_graphs.py
+++ b/generate_graphs.py
@@ -80,22 +80,40 @@ def main() -> None:
             graph(output_dir / f"{filename}-{period_name}.png", rrd, start,
                   f"{title} — {period_name}", unit, series, logarithmic,
                   stacked, disk_memory, network_mixed)
-    cards = "\n".join(
-        f'<section><h2>{html.escape(title)}</h2>' + "".join(
-            f'<figure><figcaption>{period}</figcaption>'
-            f'<img src="{filename}-{period}.png" alt="{html.escape(title)}, {period}"></figure>'
-            for period in PERIODS
-        ) + "</section>"
-        for filename, title, _unit, _series, _logarithmic, _stacked, _disk_memory, _network_mixed in definitions
-    )
-    page = f"""<!doctype html>
+    page_files = {
+        "3hours": "index.html",
+        "1day": "1day.html",
+        "2weeks": "2weeks.html",
+        "1year": "1year.html",
+    }
+    period_labels = {
+        "3hours": "3 hours",
+        "1day": "1 day",
+        "2weeks": "2 weeks",
+        "1year": "1 year",
+    }
+    for period in PERIODS:
+        cards = "\n".join(
+            f'<section><h2>{html.escape(title)}</h2>'
+            f'<img src="{filename}-{period}.png" '
+            f'alt="{html.escape(title)}, {period_labels[period]}"></section>'
+            for filename, title, *_rest in definitions
+        )
+        navigation = " ".join(
+            f'<a href="{page_files[item]}"'
+            f'{" class=active" if item == period else ""}>'
+            f'{period_labels[item]}</a>'
+            for item in PERIODS
+        )
+        page = f"""<!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
-<meta http-equiv="refresh" content="300"><title>System monitor</title>
+<meta http-equiv="refresh" content="300"><title>System monitor — {period_labels[period]}</title>
 <style>body{{font:16px system-ui;margin:auto;max-width:1100px;padding:1rem;background:#f8fafc;color:#172033}}
-section{{background:white;padding:1rem;margin:1rem 0;border-radius:.5rem;box-shadow:0 1px 4px #0002}}
-figure{{margin:1rem 0}} img{{width:100%;height:auto}} figcaption{{font-weight:600}}</style>
-</head><body><h1>System monitor</h1>{cards}</body></html>"""
-    (output_dir / "index.html").write_text(page)
+nav{{display:flex;gap:.5rem;flex-wrap:wrap}} nav a{{padding:.5rem .75rem;background:#e2e8f0;color:#172033;text-decoration:none;border-radius:.35rem}}
+nav a.active{{background:#2563eb;color:white}} section{{background:white;padding:1rem;margin:1rem 0;border-radius:.5rem;box-shadow:0 1px 4px #0002}}
+img{{width:100%;height:auto}}</style>
+</head><body><h1>System monitor — {period_labels[period]}</h1><nav>{navigation}</nav>{cards}</body></html>"""
+        (output_dir / page_files[period]).write_text(page)
 
 
 if __name__ == "__main__":
