diff --git a/README.md b/README.md
index 5f1ad4f..872172f 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,9 @@ A range of features are implemented to support these functionalities.
 - **Equipment Management**: Register scenario-specific equipment inventories.
 - **Maintenance Logging**: Log maintenance events against equipment with dates and costs.
 - **Reporting Dashboard**: Surface aggregated statistics for simulation outputs with an interactive Chart.js dashboard.
-- **Unified UI Shell**: Server-rendered templates extend a shared base layout with navigation across scenarios, parameters, costs, consumption, production, equipment, maintenance, simulations, and reporting views.
+- **Unified UI Shell**: Server-rendered templates extend a shared base layout with a persistent left sidebar linking scenarios, parameters, costs, consumption, production, equipment, maintenance, simulations, and reporting views.
+- **Operations Overview Dashboard**: The root route (`/`) surfaces cross-scenario KPIs, charts, and maintenance reminders with a one-click refresh backed by aggregated loaders.
+- **Theming Tokens**: Shared CSS variables in `static/css/main.css` centralize the UI color palette for consistent styling and rapid theme tweaks.
 - **Monte Carlo Simulation (in progress)**: Services and routes are scaffolded for future stochastic analysis.
 
 ## Architecture
@@ -79,19 +81,20 @@ uvicorn main:app --reload
   - `POST /api/equipment/` create equipment records
   - `POST /api/maintenance/` log maintenance events
   - `POST /api/reporting/summary` aggregate simulation results, returning count, mean/median, min/max, standard deviation, variance, percentile bands (5/10/90/95), value-at-risk (95%) and expected shortfall (95%)
-- **UI entries** (rendered via FastAPI templates):
-  - `GET /ui/dashboard` reporting dashboard
+- **UI entries** (rendered via FastAPI templates, also reachable from the sidebar):
+- `GET /` operations overview dashboard
+  - `GET /ui/dashboard` legacy dashboard alias
   - `GET /ui/scenarios` scenario creation form
   - `GET /ui/parameters` parameter input form
   - `GET /ui/costs`, `/ui/consumption`, `/ui/production`, `/ui/equipment`, `/ui/maintenance`, `/ui/simulations`, `/ui/reporting` placeholder views aligned with future integrations
 
 ### Dashboard Preview
 
-1. Start the FastAPI server and navigate to `/ui/dashboard` (ensure `routes/ui.py` exposes this template or add a router that serves `templates/Dashboard.html`).
-2. Use the "Load Sample Data" button to populate the JSON textarea with demo results.
-3. Select "Refresh Dashboard" to post the dataset to `/api/reporting/summary` and render the returned statistics and distribution chart.
-4. Paste your own simulation outputs (array of objects containing a numeric `result` property) to visualize custom runs; the endpoint expects the same schema used by the reporting service.
-5. If the summary endpoint is unavailable, the dashboard displays an inline error—refresh once the API is reachable.
+1. Start the FastAPI server and navigate to `/`.
+2. Review the headline metrics, scenario snapshot table, and cost/activity charts sourced from the current database state.
+3. Use the "Refresh Dashboard" button to pull freshly aggregated data via `/ui/dashboard/data` without reloading the page.
+4. Populate scenarios, costs, production, consumption, simulations, and maintenance records to see charts and lists update.
+5. The legacy `/ui/dashboard` route remains available but now serves the same consolidated overview.
 
 ## Testing
 
diff --git a/docs/architecture.md b/docs/architecture.md
index 18027d4..6fe411c 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -13,7 +13,7 @@ The backend leverages SQLAlchemy for ORM mapping to a PostgreSQL database.
 - **FastAPI backend** (`main.py`, `routes/`): hosts REST endpoints for scenarios, parameters, costs, consumption, production, equipment, maintenance, simulations, and reporting. Each router encapsulates request/response schemas and DB access patterns, leveraging a shared dependency module (`routes/dependencies.get_db`) for SQLAlchemy session management.
 - **Service layer** (`services/`): houses business logic. `services/reporting.py` produces statistical summaries, while `services/simulation.py` provides the Monte Carlo integration point.
 - **Persistence** (`models/`, `config/database.py`): SQLAlchemy models map to PostgreSQL tables in schema `bricsium_platform`. Relationships connect scenarios to derived domain entities.
-- **Presentation** (`templates/`, `components/`): server-rendered views extend a shared `base.html` layout, pull global styles from `static/css/main.css`, and surface data entry (scenario and parameter forms) alongside the Chart.js-powered dashboard.
+- **Presentation** (`templates/`, `components/`): server-rendered views extend a shared `base.html` layout with a persistent left sidebar, pull global styles from `static/css/main.css`, and surface data entry (scenario and parameter forms) alongside the Chart.js-powered dashboard.
 - **Middleware** (`middleware/validation.py`): applies JSON validation before requests reach routers.
 - **Testing** (`tests/unit/`): pytest suite covering route and service behavior.
 
@@ -27,10 +27,11 @@ The backend leverages SQLAlchemy for ORM mapping to a PostgreSQL database.
 
 ### Dashboard Flow Review — 2025-10-20
 
-- The dashboard template depends on a future-facing HTML endpoint (e.g., `/dashboard`) that the current `routes/ui.py` router does not expose; wiring an explicit route is required before the page is reachable from the FastAPI app.
-- Client-side logic calls `/api/reporting/summary` with raw simulation outputs and expects `result` fields, so any upstream changes to the reporting contract must maintain this schema.
-- Initialization always loads the bundled sample data first, which is useful for demos but masks server errors—consider adding a failure banner when `/api/reporting/summary` is unavailable.
-- No persistent storage backs the dashboard yet; users must paste or load JSON manually, aligning with the current MVP scope but highlighting an integration gap with the simulation results table.
+- The dashboard now renders at the root route (`/`) and leverages `_load_dashboard` within `routes/ui.py` to aggregate scenarios, parameters, costs, production, consumption, simulations, and maintenance data before templating.
+- Client-side logic consumes a server-rendered JSON payload and can request live refreshes via `GET /ui/dashboard/data`, ensuring charts and summary cards stay synchronized with the database without a full page reload.
+- Chart.js visualises cost mix (CAPEX vs OPEX) and activity throughput (production vs consumption) per scenario. When datasets are empty the UI swaps the chart canvas for contextual guidance.
+- Simulation metrics draw on the aggregated reporting service; once `simulation_result` persists records, the dashboard lists recent runs with iteration counts, mean values, and percentile highlights.
+- Maintenance reminders pull the next five scheduled events, providing equipment and scenario context alongside formatted costs.
 
 ### Reporting Pipeline and UI Integration
 
diff --git a/routes/ui.py b/routes/ui.py
index a904786..71a2ac0 100644
--- a/routes/ui.py
+++ b/routes/ui.py
@@ -3,13 +3,21 @@ from datetime import datetime, timezone
 from typing import Any, Dict, Optional
 
 from fastapi import APIRouter, Depends, Request
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.templating import Jinja2Templates
 from sqlalchemy.orm import Session
 
+from models.capex import Capex
+from models.consumption import Consumption
+from models.equipment import Equipment
+from models.maintenance import Maintenance
+from models.opex import Opex
 from models.parameters import Parameter
+from models.production_output import ProductionOutput
 from models.scenario import Scenario
+from models.simulation_result import SimulationResult
 from routes.dependencies import get_db
+from services.reporting import generate_report
 
 router = APIRouter()
 
@@ -35,6 +43,18 @@ def _render(
     return templates.TemplateResponse(template_name, _context(request, extra))
 
 
+def _format_currency(value: float) -> str:
+    return f"${value:,.2f}"
+
+
+def _format_decimal(value: float) -> str:
+    return f"{value:,.2f}"
+
+
+def _format_int(value: int) -> str:
+    return f"{value:,}"
+
+
 def _load_scenarios(db: Session) -> Dict[str, Any]:
     scenarios: list[Dict[str, Any]] = [
         {
@@ -62,32 +82,442 @@ def _load_parameters(db: Session) -> Dict[str, Any]:
     return {"parameters_by_scenario": dict(grouped)}
 
 
-def _load_costs(_: Session) -> Dict[str, Any]:
-    return {"capex_entries": [], "opex_entries": []}
+def _load_costs(db: Session) -> Dict[str, Any]:
+    capex_grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for capex in (
+        db.query(Capex)
+        .order_by(Capex.scenario_id, Capex.id)
+        .all()
+    ):
+        capex_grouped[int(getattr(capex, "scenario_id"))].append(
+            {
+                "id": int(getattr(capex, "id")),
+                "scenario_id": int(getattr(capex, "scenario_id")),
+                "amount": float(getattr(capex, "amount", 0.0)),
+                "description": getattr(capex, "description", "") or "",
+            }
+        )
+
+    opex_grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for opex in (
+        db.query(Opex)
+        .order_by(Opex.scenario_id, Opex.id)
+        .all()
+    ):
+        opex_grouped[int(getattr(opex, "scenario_id"))].append(
+            {
+                "id": int(getattr(opex, "id")),
+                "scenario_id": int(getattr(opex, "scenario_id")),
+                "amount": float(getattr(opex, "amount", 0.0)),
+                "description": getattr(opex, "description", "") or "",
+            }
+        )
+
+    return {
+        "capex_by_scenario": dict(capex_grouped),
+        "opex_by_scenario": dict(opex_grouped),
+    }
 
 
-def _load_consumption(_: Session) -> Dict[str, Any]:
-    return {"consumption_records": []}
+def _load_consumption(db: Session) -> Dict[str, Any]:
+    grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for record in (
+        db.query(Consumption)
+        .order_by(Consumption.scenario_id, Consumption.id)
+        .all()
+    ):
+        record_id = int(getattr(record, "id"))
+        scenario_id = int(getattr(record, "scenario_id"))
+        amount_value = float(getattr(record, "amount", 0.0))
+        description = getattr(record, "description", "") or ""
+        grouped[scenario_id].append(
+            {
+                "id": record_id,
+                "scenario_id": scenario_id,
+                "amount": amount_value,
+                "description": description,
+            }
+        )
+    return {"consumption_by_scenario": dict(grouped)}
 
 
-def _load_production(_: Session) -> Dict[str, Any]:
-    return {"production_records": []}
+def _load_production(db: Session) -> Dict[str, Any]:
+    grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for record in (
+        db.query(ProductionOutput)
+        .order_by(ProductionOutput.scenario_id, ProductionOutput.id)
+        .all()
+    ):
+        record_id = int(getattr(record, "id"))
+        scenario_id = int(getattr(record, "scenario_id"))
+        amount_value = float(getattr(record, "amount", 0.0))
+        description = getattr(record, "description", "") or ""
+        grouped[scenario_id].append(
+            {
+                "id": record_id,
+                "scenario_id": scenario_id,
+                "amount": amount_value,
+                "description": description,
+            }
+        )
+    return {"production_by_scenario": dict(grouped)}
 
 
-def _load_equipment(_: Session) -> Dict[str, Any]:
-    return {"equipment_items": []}
+def _load_equipment(db: Session) -> Dict[str, Any]:
+    grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for record in (
+        db.query(Equipment)
+        .order_by(Equipment.scenario_id, Equipment.id)
+        .all()
+    ):
+        record_id = int(getattr(record, "id"))
+        scenario_id = int(getattr(record, "scenario_id"))
+        name_value = getattr(record, "name", "") or ""
+        description = getattr(record, "description", "") or ""
+        grouped[scenario_id].append(
+            {
+                "id": record_id,
+                "scenario_id": scenario_id,
+                "name": name_value,
+                "description": description,
+            }
+        )
+    return {"equipment_by_scenario": dict(grouped)}
 
 
-def _load_maintenance(_: Session) -> Dict[str, Any]:
-    return {"maintenance_records": []}
+def _load_maintenance(db: Session) -> Dict[str, Any]:
+    grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for record in (
+        db.query(Maintenance)
+        .order_by(Maintenance.scenario_id, Maintenance.maintenance_date)
+        .all()
+    ):
+        record_id = int(getattr(record, "id"))
+        scenario_id = int(getattr(record, "scenario_id"))
+        equipment_id = int(getattr(record, "equipment_id"))
+        equipment_obj = getattr(record, "equipment", None)
+        equipment_name = getattr(
+            equipment_obj, "name", "") if equipment_obj else ""
+        maintenance_date = getattr(record, "maintenance_date", None)
+        cost_value = float(getattr(record, "cost", 0.0))
+        description = getattr(record, "description", "") or ""
+
+        grouped[scenario_id].append(
+            {
+                "id": record_id,
+                "scenario_id": scenario_id,
+                "equipment_id": equipment_id,
+                "equipment_name": equipment_name,
+                "maintenance_date": maintenance_date.isoformat() if maintenance_date else "",
+                "cost": cost_value,
+                "description": description,
+            }
+        )
+    return {"maintenance_by_scenario": dict(grouped)}
 
 
-def _load_simulations(_: Session) -> Dict[str, Any]:
-    return {"simulation_runs": []}
+def _load_simulations(db: Session) -> Dict[str, Any]:
+    scenarios: list[Dict[str, Any]] = [
+        {
+            "id": item.id,
+            "name": item.name,
+        }
+        for item in db.query(Scenario).order_by(Scenario.name).all()
+    ]
+
+    results_grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for record in (
+        db.query(SimulationResult)
+        .order_by(SimulationResult.scenario_id, SimulationResult.iteration)
+        .all()
+    ):
+        scenario_id = int(getattr(record, "scenario_id"))
+        results_grouped[scenario_id].append(
+            {
+                "iteration": int(getattr(record, "iteration")),
+                "result": float(getattr(record, "result", 0.0)),
+            }
+        )
+
+    runs: list[Dict[str, Any]] = []
+    sample_limit = 20
+    for item in scenarios:
+        scenario_id = int(item["id"])
+        scenario_results = results_grouped.get(scenario_id, [])
+        summary = generate_report(
+            scenario_results) if scenario_results else generate_report([])
+        runs.append(
+            {
+                "scenario_id": scenario_id,
+                "scenario_name": item["name"],
+                "iterations": int(summary.get("count", 0)),
+                "summary": summary,
+                "sample_results": scenario_results[:sample_limit],
+            }
+        )
+
+    return {
+        "simulation_scenarios": scenarios,
+        "simulation_runs": runs,
+    }
 
 
-def _load_reporting(_: Session) -> Dict[str, Any]:
-    return {"report_summaries": []}
+def _load_reporting(db: Session) -> Dict[str, Any]:
+    scenarios = _load_scenarios(db)["scenarios"]
+    runs = _load_simulations(db)["simulation_runs"]
+
+    summaries: list[Dict[str, Any]] = []
+    runs_by_scenario = {run["scenario_id"]: run for run in runs}
+
+    for scenario in scenarios:
+        scenario_id = scenario["id"]
+        run = runs_by_scenario.get(scenario_id)
+        summary = run["summary"] if run else generate_report([])
+        summaries.append(
+            {
+                "scenario_id": scenario_id,
+                "scenario_name": scenario["name"],
+                "summary": summary,
+                "iterations": run["iterations"] if run else 0,
+            }
+        )
+
+    return {
+        "report_summaries": summaries,
+    }
+
+
+def _load_dashboard(db: Session) -> Dict[str, Any]:
+    scenarios = _load_scenarios(db)["scenarios"]
+    parameters_by_scenario = _load_parameters(db)["parameters_by_scenario"]
+    costs_context = _load_costs(db)
+    capex_by_scenario = costs_context["capex_by_scenario"]
+    opex_by_scenario = costs_context["opex_by_scenario"]
+    consumption_by_scenario = _load_consumption(db)["consumption_by_scenario"]
+    production_by_scenario = _load_production(db)["production_by_scenario"]
+    equipment_by_scenario = _load_equipment(db)["equipment_by_scenario"]
+    maintenance_by_scenario = _load_maintenance(db)["maintenance_by_scenario"]
+    simulation_context = _load_simulations(db)
+    simulation_runs = simulation_context["simulation_runs"]
+
+    runs_by_scenario = {
+        run["scenario_id"]: run for run in simulation_runs
+    }
+
+    def sum_amounts(grouped: Dict[int, list[Dict[str, Any]]], field: str = "amount") -> float:
+        total = 0.0
+        for items in grouped.values():
+            for item in items:
+                value = item.get(field, 0.0)
+                if isinstance(value, (int, float)):
+                    total += float(value)
+        return total
+
+    total_capex = sum_amounts(capex_by_scenario)
+    total_opex = sum_amounts(opex_by_scenario)
+    total_consumption = sum_amounts(consumption_by_scenario)
+    total_production = sum_amounts(production_by_scenario)
+    total_maintenance_cost = sum_amounts(maintenance_by_scenario, field="cost")
+
+    total_parameters = sum(len(items)
+                           for items in parameters_by_scenario.values())
+    total_equipment = sum(len(items)
+                          for items in equipment_by_scenario.values())
+    total_maintenance_events = sum(len(items)
+                                   for items in maintenance_by_scenario.values())
+    total_simulation_iterations = sum(
+        run["iterations"] for run in simulation_runs)
+
+    scenario_rows: list[Dict[str, Any]] = []
+    scenario_labels: list[str] = []
+    scenario_capex: list[float] = []
+    scenario_opex: list[float] = []
+    activity_labels: list[str] = []
+    activity_production: list[float] = []
+    activity_consumption: list[float] = []
+
+    for scenario in scenarios:
+        scenario_id = scenario["id"]
+        scenario_name = scenario["name"]
+        param_count = len(parameters_by_scenario.get(scenario_id, []))
+        equipment_count = len(equipment_by_scenario.get(scenario_id, []))
+        maintenance_count = len(maintenance_by_scenario.get(scenario_id, []))
+
+        capex_total = sum(
+            float(item.get("amount", 0.0))
+            for item in capex_by_scenario.get(scenario_id, [])
+        )
+        opex_total = sum(
+            float(item.get("amount", 0.0))
+            for item in opex_by_scenario.get(scenario_id, [])
+        )
+        consumption_total = sum(
+            float(item.get("amount", 0.0))
+            for item in consumption_by_scenario.get(scenario_id, [])
+        )
+        production_total = sum(
+            float(item.get("amount", 0.0))
+            for item in production_by_scenario.get(scenario_id, [])
+        )
+
+        run = runs_by_scenario.get(scenario_id)
+        summary = run["summary"] if run else generate_report([])
+        iterations = run["iterations"] if run else 0
+        mean_value = float(summary.get("mean", 0.0))
+
+        scenario_rows.append(
+            {
+                "scenario_name": scenario_name,
+                "parameter_count": param_count,
+                "parameter_display": _format_int(param_count),
+                "equipment_count": equipment_count,
+                "equipment_display": _format_int(equipment_count),
+                "capex_total": capex_total,
+                "capex_display": _format_currency(capex_total),
+                "opex_total": opex_total,
+                "opex_display": _format_currency(opex_total),
+                "production_total": production_total,
+                "production_display": _format_decimal(production_total),
+                "consumption_total": consumption_total,
+                "consumption_display": _format_decimal(consumption_total),
+                "maintenance_count": maintenance_count,
+                "maintenance_display": _format_int(maintenance_count),
+                "iterations": iterations,
+                "iterations_display": _format_int(iterations),
+                "simulation_mean": mean_value,
+                "simulation_mean_display": _format_decimal(mean_value),
+            }
+        )
+
+        scenario_labels.append(scenario_name)
+        scenario_capex.append(capex_total)
+        scenario_opex.append(opex_total)
+
+        activity_labels.append(scenario_name)
+        activity_production.append(production_total)
+        activity_consumption.append(consumption_total)
+
+    scenario_rows.sort(key=lambda row: row["scenario_name"].lower())
+
+    all_simulation_results = [
+        {"result": float(getattr(item, "result", 0.0))}
+        for item in db.query(SimulationResult).all()
+    ]
+    overall_report = generate_report(all_simulation_results)
+
+    overall_report_metrics = [
+        {"label": "Runs", "value": _format_int(
+            int(overall_report.get("count", 0)))},
+        {"label": "Mean", "value": _format_decimal(
+            float(overall_report.get("mean", 0.0)))},
+        {"label": "Median", "value": _format_decimal(
+            float(overall_report.get("median", 0.0)))},
+        {"label": "Std Dev", "value": _format_decimal(
+            float(overall_report.get("std_dev", 0.0)))},
+        {"label": "95th Percentile", "value": _format_decimal(
+            float(overall_report.get("percentile_95", 0.0)))},
+        {"label": "VaR (95%)", "value": _format_decimal(
+            float(overall_report.get("value_at_risk_95", 0.0)))},
+        {"label": "Expected Shortfall (95%)", "value": _format_decimal(
+            float(overall_report.get("expected_shortfall_95", 0.0)))},
+    ]
+
+    recent_simulations: list[Dict[str, Any]] = [
+        {
+            "scenario_name": run["scenario_name"],
+            "iterations": run["iterations"],
+            "iterations_display": _format_int(run["iterations"]),
+            "mean_display": _format_decimal(float(run["summary"].get("mean", 0.0))),
+            "p95_display": _format_decimal(float(run["summary"].get("percentile_95", 0.0))),
+        }
+        for run in simulation_runs
+        if run["iterations"] > 0
+    ]
+    recent_simulations.sort(key=lambda item: item["iterations"], reverse=True)
+    recent_simulations = recent_simulations[:5]
+
+    upcoming_maintenance = []
+    for record in (
+        db.query(Maintenance)
+        .order_by(Maintenance.maintenance_date.asc())
+        .limit(5)
+        .all()
+    ):
+        maintenance_date = getattr(record, "maintenance_date", None)
+        upcoming_maintenance.append(
+            {
+                "scenario_name": getattr(getattr(record, "scenario", None), "name", "Unknown"),
+                "equipment_name": getattr(getattr(record, "equipment", None), "name", "Unknown"),
+                "date_display": maintenance_date.strftime("%Y-%m-%d") if maintenance_date else "—",
+                "cost_display": _format_currency(float(getattr(record, "cost", 0.0))),
+                "description": getattr(record, "description", "") or "—",
+            }
+        )
+
+    cost_chart_has_data = any(value > 0 for value in scenario_capex) or any(
+        value > 0 for value in scenario_opex
+    )
+    activity_chart_has_data = any(value > 0 for value in activity_production) or any(
+        value > 0 for value in activity_consumption
+    )
+
+    scenario_cost_chart: Dict[str, list[Any]] = {
+        "labels": scenario_labels,
+        "capex": scenario_capex,
+        "opex": scenario_opex,
+    }
+    scenario_activity_chart: Dict[str, list[Any]] = {
+        "labels": activity_labels,
+        "production": activity_production,
+        "consumption": activity_consumption,
+    }
+
+    summary_metrics = [
+        {"label": "Active Scenarios", "value": _format_int(len(scenarios))},
+        {"label": "Parameters", "value": _format_int(total_parameters)},
+        {"label": "CAPEX Total", "value": _format_currency(total_capex)},
+        {"label": "OPEX Total", "value": _format_currency(total_opex)},
+        {"label": "Equipment Assets", "value": _format_int(total_equipment)},
+        {"label": "Maintenance Events",
+            "value": _format_int(total_maintenance_events)},
+        {"label": "Consumption", "value": _format_decimal(total_consumption)},
+        {"label": "Production", "value": _format_decimal(total_production)},
+        {"label": "Simulation Iterations",
+            "value": _format_int(total_simulation_iterations)},
+        {"label": "Maintenance Cost",
+            "value": _format_currency(total_maintenance_cost)},
+    ]
+
+    return {
+        "summary_metrics": summary_metrics,
+        "scenario_rows": scenario_rows,
+        "overall_report_metrics": overall_report_metrics,
+        "recent_simulations": recent_simulations,
+        "upcoming_maintenance": upcoming_maintenance,
+        "scenario_cost_chart": scenario_cost_chart,
+        "scenario_activity_chart": scenario_activity_chart,
+        "cost_chart_has_data": cost_chart_has_data,
+        "activity_chart_has_data": activity_chart_has_data,
+        "report_available": overall_report.get("count", 0) > 0,
+    }
+
+
+@router.get("/", response_class=HTMLResponse)
+async def dashboard_root(request: Request, db: Session = Depends(get_db)):
+    """Render the primary dashboard landing page."""
+    return _render(request, "Dashboard.html", _load_dashboard(db))
+
+
+@router.get("/ui/dashboard", response_class=HTMLResponse)
+async def dashboard(request: Request, db: Session = Depends(get_db)):
+    """Render the legacy dashboard route for backward compatibility."""
+    return _render(request, "Dashboard.html", _load_dashboard(db))
+
+
+@router.get("/ui/dashboard/data", response_class=JSONResponse)
+async def dashboard_data(db: Session = Depends(get_db)) -> JSONResponse:
+    """Expose dashboard aggregates as JSON for client-side refreshes."""
+    return JSONResponse(_load_dashboard(db))
 
 
 @router.get("/ui/scenarios", response_class=HTMLResponse)
@@ -97,12 +527,6 @@ async def scenario_form(request: Request, db: Session = Depends(get_db)):
     return _render(request, "ScenarioForm.html", context)
 
 
-@router.get("/ui/dashboard", response_class=HTMLResponse)
-async def dashboard(request: Request):
-    """Render the reporting dashboard."""
-    return _render(request, "Dashboard.html")
-
-
 @router.get("/ui/parameters", response_class=HTMLResponse)
 async def parameter_form(request: Request, db: Session = Depends(get_db)):
     """Render the parameter input form."""
@@ -114,41 +538,57 @@ async def parameter_form(request: Request, db: Session = Depends(get_db)):
 
 @router.get("/ui/costs", response_class=HTMLResponse)
 async def costs_view(request: Request, db: Session = Depends(get_db)):
-    """Render the costs placeholder view."""
-    return _render(request, "costs.html", _load_costs(db))
+    """Render the costs view with CAPEX and OPEX data."""
+    context: Dict[str, Any] = {}
+    context.update(_load_scenarios(db))
+    context.update(_load_costs(db))
+    return _render(request, "costs.html", context)
 
 
 @router.get("/ui/consumption", response_class=HTMLResponse)
 async def consumption_view(request: Request, db: Session = Depends(get_db)):
-    """Render the consumption placeholder view."""
-    return _render(request, "consumption.html", _load_consumption(db))
+    """Render the consumption view with scenario consumption data."""
+    context: Dict[str, Any] = {}
+    context.update(_load_scenarios(db))
+    context.update(_load_consumption(db))
+    return _render(request, "consumption.html", context)
 
 
 @router.get("/ui/production", response_class=HTMLResponse)
 async def production_view(request: Request, db: Session = Depends(get_db)):
-    """Render the production placeholder view."""
-    return _render(request, "production.html", _load_production(db))
+    """Render the production view with scenario production data."""
+    context: Dict[str, Any] = {}
+    context.update(_load_scenarios(db))
+    context.update(_load_production(db))
+    return _render(request, "production.html", context)
 
 
 @router.get("/ui/equipment", response_class=HTMLResponse)
 async def equipment_view(request: Request, db: Session = Depends(get_db)):
-    """Render the equipment placeholder view."""
-    return _render(request, "equipment.html", _load_equipment(db))
+    """Render the equipment view with scenario equipment data."""
+    context: Dict[str, Any] = {}
+    context.update(_load_scenarios(db))
+    context.update(_load_equipment(db))
+    return _render(request, "equipment.html", context)
 
 
 @router.get("/ui/maintenance", response_class=HTMLResponse)
 async def maintenance_view(request: Request, db: Session = Depends(get_db)):
-    """Render the maintenance placeholder view."""
-    return _render(request, "maintenance.html", _load_maintenance(db))
+    """Render the maintenance view with scenario maintenance data."""
+    context: Dict[str, Any] = {}
+    context.update(_load_scenarios(db))
+    context.update(_load_equipment(db))
+    context.update(_load_maintenance(db))
+    return _render(request, "maintenance.html", context)
 
 
 @router.get("/ui/simulations", response_class=HTMLResponse)
 async def simulations_view(request: Request, db: Session = Depends(get_db)):
-    """Render the simulations placeholder view."""
+    """Render the simulations view with scenario information and recent runs."""
     return _render(request, "simulations.html", _load_simulations(db))
 
 
 @router.get("/ui/reporting", response_class=HTMLResponse)
 async def reporting_view(request: Request, db: Session = Depends(get_db)):
-    """Render the reporting placeholder view."""
+    """Render the reporting view with scenario KPI summaries."""
     return _render(request, "reporting.html", _load_reporting(db))
diff --git a/static/css/main.css b/static/css/main.css
index 26cbc2f..c822ba7 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,60 +1,326 @@
+:root {
+  --color-background: #f4f5f7;
+  --color-surface: #ffffff;
+  --color-text-primary: #1f2933;
+  --color-text-secondary: #475569;
+  --color-text-muted: #64748b;
+  --color-text-subtle: #94a3b8;
+  --color-text-invert: #ffffff;
+  --color-text-dark: #0f172a;
+  --color-text-strong: #111827;
+  --color-primary: #0b3d91;
+  --color-primary-strong: #2563eb;
+  --color-primary-stronger: #1d4ed8;
+  --color-accent: #38bdf8;
+  --color-border: #e2e8f0;
+  --color-border-strong: #cbd5e1;
+  --color-highlight: #eef2ff;
+  --color-panel-shadow: rgba(15, 23, 42, 0.08);
+  --color-panel-shadow-deep: rgba(15, 23, 42, 0.12);
+  --color-surface-alt: #f8fafc;
+  --color-success: #047857;
+  --color-error: #b91c1c;
+}
+
 body {
   margin: 0;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f4f5f7;
-  color: #1f2933;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+}
+
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.app-sidebar {
+  width: 264px;
+  background-color: var(--color-primary);
+  color: var(--color-text-invert);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 4px 0 16px var(--color-panel-shadow-deep);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 2.5rem 1.75rem 1.75rem;
+  gap: 2rem;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.brand-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: linear-gradient(
+    135deg,
+    var(--color-primary-stronger),
+    var(--color-accent)
+  );
+  color: var(--color-text-invert);
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+}
+
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.brand-title {
+  font-size: 1.35rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.brand-subtitle {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  color: rgba(255, 255, 255, 0.88);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-link:hover,
+.sidebar-link:focus {
+  background: rgba(148, 197, 255, 0.28);
+  color: var(--color-text-invert);
+  transform: translateX(4px);
+}
+
+.sidebar-link.is-active {
+  background: rgba(148, 197, 255, 0.4);
+  color: var(--color-text-invert);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.app-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 100vh;
+}
+
+.app-content {
+  flex: 1;
+  width: min(1120px, 92%);
+  margin: 0 auto;
+  padding: 2.5rem 0 2rem;
 }
 
 .container {
   width: min(960px, 92%);
   margin: 0 auto;
-  padding: 2rem 0;
 }
 
-.site-header {
-  background-color: #0b3d91;
-  color: #ffffff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.app-content.container {
+  width: min(1120px, 92%);
 }
 
-.header-inner {
+.dashboard-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
-.site-title {
-  font-size: 1.5rem;
+.dashboard-subtitle {
+  margin: 0.35rem 0 0;
+  color: var(--color-text-muted);
+}
+
+.dashboard-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.dashboard-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.metric-card {
+  background: var(--color-surface);
+  border-radius: 12px;
+  padding: 1.2rem 1.4rem;
+  box-shadow: 0 4px 14px var(--color-panel-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.metric-label {
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+}
+
+.metric-value {
+  font-size: 1.45rem;
+  font-weight: 700;
+  color: var(--color-text-dark);
+}
+
+.dashboard-charts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.75rem;
+  margin-bottom: 2rem;
+}
+
+.chart-card {
+  min-height: 320px;
+  position: relative;
+}
+
+.chart-card canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.panel-header h3 {
   margin: 0;
 }
 
-.site-nav {
+.chart-subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--color-text-subtle);
+  font-size: 0.9rem;
+}
+
+.dashboard-panel {
+  margin-bottom: 2rem;
+}
+
+.dashboard-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.75rem;
+  margin-bottom: 2rem;
+}
+
+.metric-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 0.75rem;
 }
 
-.site-nav a {
-  color: #ffffff;
-  text-decoration: none;
-  font-weight: 500;
+.metric-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
-.site-nav a:hover,
-.site-nav a:focus {
-  text-decoration: underline;
+.striped-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-main.container {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+.striped-list li {
+  padding: 0.85rem 1rem;
+  border-radius: 10px;
+  background: var(--color-surface-alt);
+  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.6);
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.striped-list li + li {
+  margin-top: 0.75rem;
+}
+
+.list-title {
+  font-weight: 600;
+  color: var(--color-text-dark);
+}
+
+.list-detail {
+  color: var(--color-text-secondary);
+  font-size: 0.95rem;
+}
+
+.btn.is-loading {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.btn.is-loading::after {
+  content: "";
+  width: 0.85rem;
+  height: 0.85rem;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  border-top-color: rgba(255, 255, 255, 1);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+  margin-left: 0.6rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .panel {
-  background-color: #ffffff;
+  background-color: var(--color-surface);
   border-radius: 12px;
   padding: 1.5rem;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+  box-shadow: 0 2px 8px var(--color-panel-shadow);
   margin-bottom: 2rem;
 }
 
@@ -69,14 +335,14 @@ main.container {
   flex-direction: column;
   gap: 0.5rem;
   font-weight: 600;
-  color: #111827;
+  color: var(--color-text-strong);
 }
 
 .form-grid input,
 .form-grid textarea,
 .form-grid select {
   padding: 0.6rem 0.75rem;
-  border: 1px solid #cbd5e1;
+  border: 1px solid var(--color-border-strong);
   border-radius: 8px;
   font-size: 1rem;
 }
@@ -84,7 +350,7 @@ main.container {
 .form-grid input:focus,
 .form-grid textarea:focus,
 .form-grid select:focus {
-  outline: 2px solid #2563eb;
+  outline: 2px solid var(--color-primary-strong);
   outline-offset: 1px;
 }
 
@@ -98,30 +364,30 @@ main.container {
   border: none;
   cursor: pointer;
   font-weight: 600;
-  background-color: #e2e8f0;
-  color: #0f172a;
+  background-color: var(--color-border);
+  color: var(--color-text-dark);
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .btn:hover,
 .btn:focus {
   transform: translateY(-1px);
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
+  box-shadow: 0 4px 10px var(--color-panel-shadow);
 }
 
 .btn.primary {
-  background-color: #2563eb;
-  color: #ffffff;
+  background-color: var(--color-primary-strong);
+  color: var(--color-text-invert);
 }
 
 .btn.primary:hover,
 .btn.primary:focus {
-  background-color: #1d4ed8;
+  background-color: var(--color-primary-stronger);
 }
 
 .result-output {
-  background-color: #0f172a;
-  color: #f8fafc;
+  background-color: var(--color-text-dark);
+  color: var(--color-surface-alt);
   padding: 1rem;
   border-radius: 8px;
   font-family: "Fira Code", "Consolas", "Courier New", monospace;
@@ -152,28 +418,28 @@ table {
   border-collapse: collapse;
   border-radius: 12px;
   overflow: hidden;
-  background-color: #f8fafc;
+  background-color: var(--color-surface-alt);
 }
 
 thead {
-  background-color: #0b3d91;
-  color: #ffffff;
+  background-color: var(--color-primary);
+  color: var(--color-text-invert);
 }
 
 th,
 td {
   padding: 0.75rem 1rem;
   text-align: left;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--color-border);
 }
 
 tbody tr:nth-child(even) {
-  background-color: #eef2ff;
+  background-color: var(--color-highlight);
 }
 
 .empty-state {
   margin-top: 1.5rem;
-  color: #64748b;
+  color: var(--color-text-muted);
   font-style: italic;
 }
 
@@ -187,16 +453,16 @@ tbody tr:nth-child(even) {
 }
 
 .feedback.success {
-  color: #047857;
+  color: var(--color-success);
 }
 
 .feedback.error {
-  color: #b91c1c;
+  color: var(--color-error);
 }
 
 .site-footer {
-  background-color: #0b3d91;
-  color: #ffffff;
+  background-color: var(--color-primary);
+  color: var(--color-text-invert);
   margin-top: 3rem;
 }
 
@@ -207,3 +473,55 @@ tbody tr:nth-child(even) {
   padding: 1rem 0;
   font-size: 0.9rem;
 }
+
+@media (max-width: 1024px) {
+  .app-sidebar {
+    width: 240px;
+  }
+}
+
+@media (max-width: 900px) {
+  .app-layout {
+    flex-direction: column;
+  }
+
+  .app-sidebar {
+    position: relative;
+    width: 100%;
+    height: auto;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
+  }
+
+  .sidebar-inner {
+    padding: 1.5rem 1.25rem;
+  }
+
+  .sidebar-brand {
+    justify-content: center;
+  }
+
+  .sidebar-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    justify-content: center;
+  }
+
+  .sidebar-link {
+    flex: 1 1 140px;
+    justify-content: center;
+  }
+
+  .app-content {
+    width: min(100%, 94%);
+    padding-top: 2rem;
+  }
+
+  .dashboard-charts {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-columns {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/templates/Dashboard.html b/templates/Dashboard.html
index fecdcf5..dcd518a 100644
--- a/templates/Dashboard.html
+++ b/templates/Dashboard.html
@@ -1,261 +1,576 @@
 {% extends "base.html" %} {% block title %}Dashboard · CalMiner{% endblock %} {%
-block head_extra %} {{ super() }}
-<style>
-  .summary-card {
-    background: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-  }
-  .summary-grid {
-    display: grid;
-    gap: 1.5rem;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  }
-  .metric {
-    text-align: center;
-  }
-  .metric-label {
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #52606d;
-  }
-  .metric-value {
-    font-size: 1.4rem;
-    font-weight: bold;
-    margin-top: 0.4rem;
-  }
-  #chart-container {
-    background: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-    padding: 1.5rem;
-  }
-  #error-message {
-    color: #b91d47;
-    margin-top: 1rem;
-  }
-</style>
-{% endblock %} {% block content %}
-<h2>Simulation Results Dashboard</h2>
-<div class="summary-card">
-  <h3>Summary Statistics</h3>
-  <div id="summary-grid" class="summary-grid"></div>
-  <p id="error-message" hidden></p>
-</div>
-<div class="summary-card">
-  <h3>Sample Results Input</h3>
-  <p>
-    Provide simulation outputs as JSON (array of objects containing the
-    <code>result</code> field) and refresh the dashboard to preview metrics.
-  </p>
-  <textarea id="results-input" rows="6" class="monospace-input"></textarea>
-  <div class="button-row">
-    <button id="load-sample" type="button" class="btn">Load Sample Data</button>
+block content %}
+<div class="dashboard-header">
+  <div>
+    <h2>Operations Overview</h2>
+    <p class="dashboard-subtitle">
+      Unified insight across scenarios, costs, production, maintenance, and
+      simulations.
+    </p>
+  </div>
+  <div class="dashboard-actions">
     <button id="refresh-dashboard" type="button" class="btn primary">
       Refresh Dashboard
     </button>
   </div>
 </div>
-<div id="chart-container">
-  <h3>Result Distribution</h3>
-  <canvas id="summary-chart" height="120"></canvas>
+
+<p id="dashboard-status" class="feedback" hidden></p>
+
+<section>
+  <div id="summary-metrics" class="dashboard-metrics-grid">
+    {% for metric in summary_metrics %}
+    <article class="metric-card">
+      <span class="metric-label">{{ metric.label }}</span>
+      <span class="metric-value">{{ metric.value }}</span>
+    </article>
+    {% endfor %}
+  </div>
+  <p id="summary-empty" class="empty-state" {% if summary_metrics|length>
+    0 %} hidden{% endif %}> Add project inputs to populate summary metrics.
+  </p>
+</section>
+
+<section class="dashboard-charts">
+  <article class="panel chart-card">
+    <header class="panel-header">
+      <div>
+        <h3>Scenario Cost Mix</h3>
+        <p class="chart-subtitle">CAPEX vs OPEX totals per scenario</p>
+      </div>
+    </header>
+    <canvas
+      id="cost-chart"
+      height="220"
+      {%
+      if
+      not
+      cost_chart_has_data
+      %}
+      hidden{%
+      endif
+      %}
+    ></canvas>
+    <p
+      id="cost-chart-empty"
+      class="empty-state"
+      {%
+      if
+      cost_chart_has_data
+      %}
+      hidden{%
+      endif
+      %}
+    >
+      Add CAPEX or OPEX entries to display this chart.
+    </p>
+  </article>
+  <article class="panel chart-card">
+    <header class="panel-header">
+      <div>
+        <h3>Production vs Consumption</h3>
+        <p class="chart-subtitle">Throughput comparison by scenario</p>
+      </div>
+    </header>
+    <canvas
+      id="activity-chart"
+      height="220"
+      {%
+      if
+      not
+      activity_chart_has_data
+      %}
+      hidden{%
+      endif
+      %}
+    ></canvas>
+    <p
+      id="activity-chart-empty"
+      class="empty-state"
+      {%
+      if
+      activity_chart_has_data
+      %}
+      hidden{%
+      endif
+      %}
+    >
+      Add production or consumption records to display this chart.
+    </p>
+  </article>
+</section>
+
+<section class="panel dashboard-panel">
+  <header class="panel-header">
+    <div>
+      <h3>Scenario Snapshot</h3>
+      <p class="chart-subtitle">
+        Operational and financial highlights per scenario
+      </p>
+    </div>
+  </header>
+  <div class="table-container">
+    <table id="scenario-table">
+      <thead>
+        <tr>
+          <th>Scenario</th>
+          <th>Parameters</th>
+          <th>Equipment</th>
+          <th>CAPEX</th>
+          <th>OPEX</th>
+          <th>Production</th>
+          <th>Consumption</th>
+          <th>Maintenance</th>
+          <th>Iterations</th>
+          <th>Simulation Mean</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in scenario_rows %}
+        <tr>
+          <td>{{ row.scenario_name }}</td>
+          <td>{{ row.parameter_display }}</td>
+          <td>{{ row.equipment_display }}</td>
+          <td>{{ row.capex_display }}</td>
+          <td>{{ row.opex_display }}</td>
+          <td>{{ row.production_display }}</td>
+          <td>{{ row.consumption_display }}</td>
+          <td>{{ row.maintenance_display }}</td>
+          <td>{{ row.iterations_display }}</td>
+          <td>{{ row.simulation_mean_display }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  <p id="scenario-table-empty" class="empty-state" {% if scenario_rows|length>
+    0 %} hidden{% endif %}> Create scenarios and populate domain data to see the
+    snapshot overview.
+  </p>
+</section>
+
+<div class="dashboard-columns">
+  <section class="panel dashboard-panel">
+    <header class="panel-header">
+      <h3>Overall Simulation Metrics</h3>
+    </header>
+    <ul id="overall-metrics" class="metric-list">
+      {% for metric in overall_report_metrics %}
+      <li>
+        <span class="metric-label">{{ metric.label }}</span>
+        <span class="metric-value">{{ metric.value }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+    <p
+      id="overall-metrics-empty"
+      class="empty-state"
+      {%
+      if
+      report_available
+      %}
+      hidden{%
+      endif
+      %}
+    >
+      Run a simulation to surface aggregate reporting metrics.
+    </p>
+  </section>
+
+  <section class="panel dashboard-panel">
+    <header class="panel-header">
+      <h3>Recent Simulation Runs</h3>
+    </header>
+    <ul id="recent-simulations" class="striped-list">
+      {% for run in recent_simulations %}
+      <li>
+        <span class="list-title">{{ run.scenario_name }}</span>
+        <span class="list-detail"
+          >Iterations: {{ run.iterations_display }} · Mean: {{ run.mean_display
+          }} · P95: {{ run.p95_display }}</span
+        >
+      </li>
+      {% endfor %}
+    </ul>
+    <p
+      id="recent-simulations-empty"
+      class="empty-state"
+      {%
+      if
+      recent_simulations|length
+    >
+      0 %} hidden{% endif %}> Trigger simulations to populate recent run
+      statistics.
+    </p>
+  </section>
 </div>
+
+<section class="panel dashboard-panel">
+  <header class="panel-header">
+    <h3>Upcoming Maintenance</h3>
+  </header>
+  <ul id="upcoming-maintenance" class="striped-list">
+    {% for item in upcoming_maintenance %}
+    <li>
+      <span class="list-title"
+        >{{ item.equipment_name }} · {{ item.scenario_name }}</span
+      >
+      <span class="list-detail"
+        >{{ item.date_display }} · {{ item.cost_display }} · {{ item.description
+        }}</span
+      >
+    </li>
+    {% endfor %}
+  </ul>
+  <p
+    id="upcoming-maintenance-empty"
+    class="empty-state"
+    {%
+    if
+    upcoming_maintenance|length
+  >
+    0 %} hidden{% endif %}> Schedule maintenance activities to track upcoming
+    events.
+  </p>
+</section>
 {% endblock %} {% block scripts %} {{ super() }}
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script id="dashboard-data" type="application/json">
+  {{ {
+    "summary_metrics": summary_metrics,
+    "scenario_rows": scenario_rows,
+    "overall_report_metrics": overall_report_metrics,
+    "recent_simulations": recent_simulations,
+    "upcoming_maintenance": upcoming_maintenance,
+    "scenario_cost_chart": scenario_cost_chart,
+    "scenario_activity_chart": scenario_activity_chart,
+    "cost_chart_has_data": cost_chart_has_data,
+    "activity_chart_has_data": activity_chart_has_data,
+    "report_available": report_available
+  } | tojson }}
+</script>
 <script>
-  const SUMMARY_FIELDS = [
-    { key: "mean", label: "Mean" },
-    { key: "median", label: "Median" },
-    { key: "min", label: "Min" },
-    { key: "max", label: "Max" },
-    { key: "std_dev", label: "Std Dev" },
-    { key: "variance", label: "Variance" },
-    { key: "percentile_5", label: "5th Percentile" },
-    { key: "percentile_10", label: "10th Percentile" },
-    { key: "percentile_90", label: "90th Percentile" },
-    { key: "percentile_95", label: "95th Percentile" },
-    { key: "value_at_risk_95", label: "VaR (95%)" },
-    {
-      key: "expected_shortfall_95",
-      label: "Expected Shortfall (95%)",
-    },
-  ];
-
-  async function fetchSummary(results) {
-    const response = await fetch("/api/reporting/summary", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(results),
-    });
-
-    if (!response.ok) {
-      const message = await response.json();
-      throw new Error(message.detail || "Failed to retrieve summary");
+  (() => {
+    const dataElement = document.getElementById("dashboard-data");
+    if (!dataElement) {
+      return;
     }
 
-    return response.json();
-  }
-
-  function getResultsFromInput() {
-    const textarea = document.getElementById("results-input");
+    let state = {};
     try {
-      const parsed = JSON.parse(textarea.value || "[]");
-      if (!Array.isArray(parsed)) {
-        throw new Error("Input must be a JSON array");
-      }
-      return parsed;
+      state = JSON.parse(dataElement.textContent || "{}");
     } catch (error) {
-      throw new Error(`Invalid JSON input: ${error.message}`);
+      console.error("Failed to parse dashboard data", error);
+      return;
     }
-  }
 
-  function renderSummary(summary) {
-    const grid = document.getElementById("summary-grid");
-    grid.innerHTML = "";
-    SUMMARY_FIELDS.forEach(({ key, label }) => {
-      const rawValue = summary[key];
-      const numericValue = Number(rawValue);
-      const display = Number.isFinite(numericValue)
-        ? numericValue.toFixed(2)
-        : "—";
-      const metric = document.createElement("div");
-      metric.className = "metric";
-      metric.innerHTML = `
-                  <div class="metric-label">${label}</div>
-                  <div class="metric-value">${display}</div>
-              `;
-      grid.appendChild(metric);
-    });
-  }
-
-  let chartInstance = null;
-
-  function renderChart(summary) {
-    const ctx = document.getElementById("summary-chart").getContext("2d");
-    const percentilePoints = [
-      { label: "Min", value: summary.min },
-      { label: "P5", value: summary.percentile_5 },
-      { label: "P10", value: summary.percentile_10 },
-      { label: "Median", value: summary.median },
-      { label: "Mean", value: summary.mean },
-      { label: "P90", value: summary.percentile_90 },
-      { label: "P95", value: summary.percentile_95 },
-      { label: "Max", value: summary.max },
-    ];
-
-    const labels = percentilePoints.map((point) => point.label);
-    const dataPoints = percentilePoints.map((point) =>
-      Number(point.value ?? 0)
+    const statusElement = document.getElementById("dashboard-status");
+    const summaryContainer = document.getElementById("summary-metrics");
+    const summaryEmpty = document.getElementById("summary-empty");
+    const scenarioTableBody = document.querySelector("#scenario-table tbody");
+    const scenarioEmpty = document.getElementById("scenario-table-empty");
+    const overallMetricsList = document.getElementById("overall-metrics");
+    const overallMetricsEmpty = document.getElementById(
+      "overall-metrics-empty"
     );
+    const recentList = document.getElementById("recent-simulations");
+    const recentEmpty = document.getElementById("recent-simulations-empty");
+    const maintenanceList = document.getElementById("upcoming-maintenance");
+    const maintenanceEmpty = document.getElementById(
+      "upcoming-maintenance-empty"
+    );
+    const refreshButton = document.getElementById("refresh-dashboard");
+    const costChartCanvas = document.getElementById("cost-chart");
+    const costChartEmpty = document.getElementById("cost-chart-empty");
+    const activityChartCanvas = document.getElementById("activity-chart");
+    const activityChartEmpty = document.getElementById("activity-chart-empty");
 
-    const tailRiskLines = [
-      { label: "VaR (95%)", value: summary.value_at_risk_95 },
-      { label: "ES (95%)", value: summary.expected_shortfall_95 },
-    ]
-      .map(({ label, value }) => {
-        const numeric = Number(value);
-        if (!Number.isFinite(numeric)) {
-          return null;
-        }
-        return `${label}: ${numeric.toFixed(2)}`;
-      })
-      .filter((line) => line !== null);
+    let costChartInstance = null;
+    let activityChartInstance = null;
 
-    if (chartInstance) {
-      chartInstance.destroy();
+    function setStatus(message, variant = "success") {
+      if (!statusElement) {
+        return;
+      }
+      if (!message) {
+        statusElement.hidden = true;
+        statusElement.textContent = "";
+        statusElement.classList.remove("success", "error");
+        return;
+      }
+      statusElement.textContent = message;
+      statusElement.hidden = false;
+      statusElement.classList.toggle("success", variant === "success");
+      statusElement.classList.toggle("error", variant !== "success");
     }
 
-    chartInstance = new Chart(ctx, {
-      type: "line",
-      data: {
-        labels,
-        datasets: [
-          {
-            label: "Result Summary",
-            data: dataPoints,
-            borderColor: "#2563eb",
-            backgroundColor: "rgba(37, 99, 235, 0.2)",
-            tension: 0.3,
-            fill: true,
+    function renderSummaryMetrics() {
+      if (!summaryContainer || !summaryEmpty) {
+        return;
+      }
+      summaryContainer.innerHTML = "";
+      const metrics = Array.isArray(state.summary_metrics)
+        ? state.summary_metrics
+        : [];
+      metrics.forEach((metric) => {
+        const card = document.createElement("article");
+        card.className = "metric-card";
+        card.innerHTML = `
+          <span class="metric-label">${metric.label}</span>
+          <span class="metric-value">${metric.value}</span>
+        `;
+        summaryContainer.appendChild(card);
+      });
+      summaryEmpty.hidden = metrics.length > 0;
+    }
+
+    function renderScenarioTable() {
+      if (!scenarioTableBody || !scenarioEmpty) {
+        return;
+      }
+      scenarioTableBody.innerHTML = "";
+      const rows = Array.isArray(state.scenario_rows)
+        ? state.scenario_rows
+        : [];
+      rows.forEach((row) => {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `
+          <td>${row.scenario_name}</td>
+          <td>${row.parameter_display}</td>
+          <td>${row.equipment_display}</td>
+          <td>${row.capex_display}</td>
+          <td>${row.opex_display}</td>
+          <td>${row.production_display}</td>
+          <td>${row.consumption_display}</td>
+          <td>${row.maintenance_display}</td>
+          <td>${row.iterations_display}</td>
+          <td>${row.simulation_mean_display}</td>
+        `;
+        scenarioTableBody.appendChild(tr);
+      });
+      scenarioEmpty.hidden = rows.length > 0;
+    }
+
+    function renderOverallMetrics() {
+      if (!overallMetricsList || !overallMetricsEmpty) {
+        return;
+      }
+      overallMetricsList.innerHTML = "";
+      const items = Array.isArray(state.overall_report_metrics)
+        ? state.overall_report_metrics
+        : [];
+      items.forEach((metric) => {
+        const li = document.createElement("li");
+        li.innerHTML = `
+          <span class="metric-label">${metric.label}</span>
+          <span class="metric-value">${metric.value}</span>
+        `;
+        overallMetricsList.appendChild(li);
+      });
+      overallMetricsEmpty.hidden =
+        Boolean(state.report_available) && items.length > 0;
+      if (!Boolean(state.report_available)) {
+        overallMetricsEmpty.hidden = false;
+      }
+    }
+
+    function renderRecentSimulations() {
+      if (!recentList || !recentEmpty) {
+        return;
+      }
+      recentList.innerHTML = "";
+      const runs = Array.isArray(state.recent_simulations)
+        ? state.recent_simulations
+        : [];
+      runs.forEach((run) => {
+        const li = document.createElement("li");
+        li.innerHTML = `
+          <span class="list-title">${run.scenario_name}</span>
+          <span class="list-detail">Iterations: ${run.iterations_display} · Mean: ${run.mean_display} · P95: ${run.p95_display}</span>
+        `;
+        recentList.appendChild(li);
+      });
+      recentEmpty.hidden = runs.length > 0;
+    }
+
+    function renderMaintenance() {
+      if (!maintenanceList || !maintenanceEmpty) {
+        return;
+      }
+      maintenanceList.innerHTML = "";
+      const items = Array.isArray(state.upcoming_maintenance)
+        ? state.upcoming_maintenance
+        : [];
+      items.forEach((item) => {
+        const li = document.createElement("li");
+        li.innerHTML = `
+          <span class="list-title">${item.equipment_name} · ${item.scenario_name}</span>
+          <span class="list-detail">${item.date_display} · ${item.cost_display} · ${item.description}</span>
+        `;
+        maintenanceList.appendChild(li);
+      });
+      maintenanceEmpty.hidden = items.length > 0;
+    }
+
+    function renderCostChart() {
+      if (!costChartCanvas || !costChartEmpty) {
+        return;
+      }
+      if (costChartInstance) {
+        costChartInstance.destroy();
+        costChartInstance = null;
+      }
+      const hasData =
+        Boolean(state.cost_chart_has_data) &&
+        Array.isArray(state.scenario_cost_chart?.labels) &&
+        state.scenario_cost_chart.labels.length > 0;
+      costChartCanvas.hidden = !hasData;
+      costChartEmpty.hidden = hasData;
+      if (!hasData) {
+        return;
+      }
+      costChartInstance = new Chart(costChartCanvas.getContext("2d"), {
+        type: "bar",
+        data: {
+          labels: state.scenario_cost_chart.labels,
+          datasets: [
+            {
+              label: "CAPEX",
+              data: state.scenario_cost_chart.capex,
+              backgroundColor: "#1d4ed8",
+            },
+            {
+              label: "OPEX",
+              data: state.scenario_cost_chart.opex,
+              backgroundColor: "#38bdf8",
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            x: {
+              stacked: false,
+            },
+            y: {
+              beginAtZero: true,
+            },
           },
-        ],
-      },
-      options: {
-        plugins: {
-          legend: { display: false },
-          tooltip: {
-            callbacks: {
-              afterBody: () => tailRiskLines,
+          plugins: {
+            legend: {
+              position: "bottom",
             },
           },
         },
-        scales: {
-          y: {
-            beginAtZero: true,
+      });
+    }
+
+    function renderActivityChart() {
+      if (!activityChartCanvas || !activityChartEmpty) {
+        return;
+      }
+      if (activityChartInstance) {
+        activityChartInstance.destroy();
+        activityChartInstance = null;
+      }
+      const hasData =
+        Boolean(state.activity_chart_has_data) &&
+        Array.isArray(state.scenario_activity_chart?.labels) &&
+        state.scenario_activity_chart.labels.length > 0;
+      activityChartCanvas.hidden = !hasData;
+      activityChartEmpty.hidden = hasData;
+      if (!hasData) {
+        return;
+      }
+      activityChartInstance = new Chart(activityChartCanvas.getContext("2d"), {
+        type: "line",
+        data: {
+          labels: state.scenario_activity_chart.labels,
+          datasets: [
+            {
+              label: "Production",
+              data: state.scenario_activity_chart.production,
+              borderColor: "#22c55e",
+              backgroundColor: "rgba(34, 197, 94, 0.18)",
+              tension: 0.35,
+              fill: true,
+            },
+            {
+              label: "Consumption",
+              data: state.scenario_activity_chart.consumption,
+              borderColor: "#ef4444",
+              backgroundColor: "rgba(239, 68, 68, 0.18)",
+              tension: 0.35,
+              fill: true,
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              position: "bottom",
+            },
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+            },
           },
         },
-      },
-    });
-  }
+      });
+    }
 
-  function showError(message) {
-    const errorElement = document.getElementById("error-message");
-    errorElement.textContent = message;
-    errorElement.hidden = false;
-  }
+    function renderDashboard() {
+      renderSummaryMetrics();
+      renderScenarioTable();
+      renderOverallMetrics();
+      renderRecentSimulations();
+      renderMaintenance();
+      renderCostChart();
+      renderActivityChart();
+    }
 
-  function attachHandlers() {
-    const loadSampleButton = document.getElementById("load-sample");
-    const refreshButton = document.getElementById("refresh-dashboard");
+    function setLoading(isLoading) {
+      if (!refreshButton) {
+        return;
+      }
+      refreshButton.disabled = isLoading;
+      refreshButton.classList.toggle("is-loading", isLoading);
+      refreshButton.textContent = isLoading
+        ? "Refreshing…"
+        : "Refresh Dashboard";
+    }
 
-    const sampleData = JSON.stringify(
-      [
-        { result: 18.2 },
-        { result: 22.1 },
-        { result: 30.4 },
-        { result: 25.7 },
-        { result: 28.3 },
-      ],
-      null,
-      2
-    );
-
-    loadSampleButton.addEventListener("click", () => {
-      document.getElementById("results-input").value = sampleData;
-    });
-
-    refreshButton.addEventListener("click", async () => {
+    async function refreshDashboard() {
       try {
-        const results = getResultsFromInput();
-        const summary = await fetchSummary(results);
-        renderSummary(summary);
-        renderChart(summary);
-        document.getElementById("error-message").hidden = true;
+        setLoading(true);
+        setStatus("");
+        const response = await fetch("/ui/dashboard/data", {
+          headers: { Accept: "application/json" },
+        });
+        if (!response.ok) {
+          throw new Error("Failed to refresh dashboard data.");
+        }
+        const payload = await response.json();
+        state = payload;
+        renderDashboard();
+        setStatus("Dashboard updated.", "success");
       } catch (error) {
         console.error(error);
-        showError(error.message);
+        setStatus(error.message || "Unable to refresh dashboard.", "error");
+      } finally {
+        setLoading(false);
       }
-    });
-
-    document.getElementById("results-input").value = sampleData;
-  }
-
-  async function initializeDashboard() {
-    try {
-      attachHandlers();
-      const initialResults = getResultsFromInput();
-      const summary = await fetchSummary(initialResults);
-      renderSummary(summary);
-      renderChart(summary);
-    } catch (error) {
-      console.error(error);
-      showError(error.message);
     }
-  }
 
-  initializeDashboard();
+    if (refreshButton) {
+      refreshButton.addEventListener("click", refreshDashboard);
+    }
+
+    renderDashboard();
+  })();
 </script>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index ec15084..d0f5ac8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,10 +8,17 @@
     {% block head_extra %}{% endblock %}
   </head>
   <body>
-    {% include "partials/base_header.html" %}
-    <main id="content" class="container">
-      {% block content %}{% endblock %}
-    </main>
-    {% include "partials/base_footer.html" %} {% block scripts %}{% endblock %}
+    <div class="app-layout">
+      <aside class="app-sidebar" aria-label="Primary navigation">
+        {% include "partials/base_header.html" %}
+      </aside>
+      <div class="app-main">
+        <main id="content" class="app-content container">
+          {% block content %}{% endblock %}
+        </main>
+        {% include "partials/base_footer.html" %}
+      </div>
+    </div>
+    {% block scripts %}{% endblock %}
   </body>
 </html>
diff --git a/templates/consumption.html b/templates/consumption.html
index a19fc0e..e1bd037 100644
--- a/templates/consumption.html
+++ b/templates/consumption.html
@@ -1,8 +1,202 @@
-{% extends "base.html" %}
-{% block title %}Consumption · CalMiner{% endblock %}
+{% extends "base.html" %} {% block title %}Consumption · CalMiner{% endblock %}
 {% block content %}
-  <section class="panel">
-    <h2>Consumption Tracking</h2>
-    <p>Placeholder for tracking scenario consumption metrics. Integration with APIs coming soon.</p>
-  </section>
+<section class="panel">
+  <h2>Consumption Tracking</h2>
+  <div class="form-grid">
+    <label for="consumption-scenario-filter">
+      Scenario filter
+      <select id="consumption-scenario-filter">
+        <option value="">Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+  </div>
+  <div id="consumption-empty" class="empty-state">
+    Choose a scenario to review its consumption records.
+  </div>
+  <div id="consumption-table-wrapper" class="table-container hidden">
+    <table aria-label="Scenario consumption records">
+      <thead>
+        <tr>
+          <th scope="col">Amount</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="consumption-table-body"></tbody>
+    </table>
+  </div>
+</section>
+
+<section class="panel">
+  <h2>Add Consumption Record</h2>
+  {% if scenarios %}
+  <form id="consumption-form" class="form-grid">
+    <label for="consumption-form-scenario">
+      Scenario
+      <select id="consumption-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="consumption-form-amount">
+      Amount
+      <input
+        id="consumption-form-amount"
+        type="number"
+        name="amount"
+        min="0"
+        step="0.01"
+        required
+      />
+    </label>
+    <label for="consumption-form-description">
+      Description (optional)
+      <textarea
+        id="consumption-form-description"
+        name="description"
+        rows="3"
+      ></textarea>
+    </label>
+    <button type="submit" class="btn primary">Add Record</button>
+  </form>
+  <p id="consumption-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">
+    Create a scenario before adding consumption records.
+  </p>
+  {% endif %}
+</section>
+
+<script>
+  const scenarios = {{ scenarios | tojson | safe }};
+  const consumptionByScenario = {{ consumption_by_scenario | tojson | safe }};
+
+  const filterSelect = document.getElementById("consumption-scenario-filter");
+  const tableWrapper = document.getElementById("consumption-table-wrapper");
+  const tableBody = document.getElementById("consumption-table-body");
+  const emptyState = document.getElementById("consumption-empty");
+  const form = document.getElementById("consumption-form");
+  const feedbackEl = document.getElementById("consumption-feedback");
+
+  function showFeedback(message, type = "success") {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    feedbackEl.classList.add(type);
+  }
+
+  function hideFeedback() {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.classList.add("hidden");
+    feedbackEl.textContent = "";
+  }
+
+  function formatAmount(value) {
+    return Number(value).toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  }
+
+  function renderConsumptionRows(scenarioId) {
+    const key = String(scenarioId);
+    const records = consumptionByScenario[key] || [];
+
+    tableBody.innerHTML = "";
+
+    if (!records.length) {
+      emptyState.textContent = "No consumption records for this scenario yet.";
+      emptyState.classList.remove("hidden");
+      tableWrapper.classList.add("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    tableWrapper.classList.remove("hidden");
+
+    records.forEach((record) => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${formatAmount(record.amount)}</td>
+        <td>${record.description || "—"}</td>
+      `;
+      tableBody.appendChild(row);
+    });
+  }
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      if (!value) {
+        emptyState.textContent = "Choose a scenario to review its consumption records.";
+        emptyState.classList.remove("hidden");
+        tableWrapper.classList.add("hidden");
+        tableBody.innerHTML = "";
+        return;
+      }
+      renderConsumptionRows(value);
+    });
+  }
+
+  async function submitConsumption(event) {
+    event.preventDefault();
+    hideFeedback();
+
+    const formData = new FormData(form);
+    const scenarioId = formData.get("scenario_id");
+    const payload = {
+      scenario_id: scenarioId ? Number(scenarioId) : null,
+      amount: Number(formData.get("amount")),
+      description: formData.get("description") || null,
+    };
+
+    try {
+      const response = await fetch("/api/consumption/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.json().catch(() => ({}));
+        throw new Error(errorDetail.detail || "Unable to add consumption record.");
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+
+      if (!Array.isArray(consumptionByScenario[mapKey])) {
+        consumptionByScenario[mapKey] = [];
+      }
+      consumptionByScenario[mapKey].push(result);
+
+      form.reset();
+      showFeedback("Consumption record saved.", "success");
+
+      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
+        renderConsumptionRows(filterSelect.value);
+      }
+    } catch (error) {
+      showFeedback(error.message || "An unexpected error occurred.", "error");
+    }
+  }
+
+  if (form) {
+    form.addEventListener("submit", submitConsumption);
+  }
+
+  if (filterSelect && filterSelect.value) {
+    renderConsumptionRows(filterSelect.value);
+  }
+</script>
 {% endblock %}
diff --git a/templates/costs.html b/templates/costs.html
index e90b315..eb47b9f 100644
--- a/templates/costs.html
+++ b/templates/costs.html
@@ -1,8 +1,348 @@
-{% extends "base.html" %}
-{% block title %}Costs · CalMiner{% endblock %}
-{% block content %}
-  <section class="panel">
-    <h2>Costs</h2>
-    <p>This view will surface CAPEX and OPEX entries tied to scenarios. API wiring pending.</p>
-  </section>
+{% extends "base.html" %} {% block title %}Costs · CalMiner{% endblock %} {%
+block content %}
+<section class="panel">
+  <h2>Cost Overview</h2>
+  {% if scenarios %}
+  <div class="form-grid">
+    <label for="costs-scenario-filter">
+      Scenario filter
+      <select id="costs-scenario-filter">
+        <option value="">Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+  </div>
+  {% else %}
+  <p class="empty-state">Create a scenario to review cost information.</p>
+  {% endif %}
+
+  <div id="costs-empty" class="empty-state">
+    Choose a scenario to review CAPEX and OPEX details.
+  </div>
+
+  <div id="costs-data" class="hidden">
+    <div class="table-container">
+      <h3>Capital Expenditures (CAPEX)</h3>
+      <table aria-label="Scenario CAPEX records">
+        <thead>
+          <tr>
+            <th scope="col">Amount</th>
+            <th scope="col">Description</th>
+          </tr>
+        </thead>
+        <tbody id="capex-table-body"></tbody>
+        <tfoot>
+          <tr>
+            <th scope="row">Total</th>
+            <th id="capex-total">—</th>
+          </tr>
+        </tfoot>
+      </table>
+      <p id="capex-empty" class="empty-state hidden">
+        No CAPEX records for this scenario yet.
+      </p>
+    </div>
+
+    <div class="table-container">
+      <h3>Operational Expenditures (OPEX)</h3>
+      <table aria-label="Scenario OPEX records">
+        <thead>
+          <tr>
+            <th scope="col">Amount</th>
+            <th scope="col">Description</th>
+          </tr>
+        </thead>
+        <tbody id="opex-table-body"></tbody>
+        <tfoot>
+          <tr>
+            <th scope="row">Total</th>
+            <th id="opex-total">—</th>
+          </tr>
+        </tfoot>
+      </table>
+      <p id="opex-empty" class="empty-state hidden">
+        No OPEX records for this scenario yet.
+      </p>
+    </div>
+  </div>
+</section>
+
+<section class="panel">
+  <h2>Add CAPEX Entry</h2>
+  {% if scenarios %}
+  <form id="capex-form" class="form-grid">
+    <label for="capex-form-scenario">
+      Scenario
+      <select id="capex-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="capex-form-amount">
+      Amount
+      <input
+        id="capex-form-amount"
+        type="number"
+        name="amount"
+        min="0"
+        step="0.01"
+        required
+      />
+    </label>
+    <label for="capex-form-description">
+      Description (optional)
+      <textarea
+        id="capex-form-description"
+        name="description"
+        rows="3"
+      ></textarea>
+    </label>
+    <button type="submit" class="btn primary">Add CAPEX</button>
+  </form>
+  <p id="capex-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">Create a scenario before adding CAPEX entries.</p>
+  {% endif %}
+</section>
+
+<section class="panel">
+  <h2>Add OPEX Entry</h2>
+  {% if scenarios %}
+  <form id="opex-form" class="form-grid">
+    <label for="opex-form-scenario">
+      Scenario
+      <select id="opex-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="opex-form-amount">
+      Amount
+      <input
+        id="opex-form-amount"
+        type="number"
+        name="amount"
+        min="0"
+        step="0.01"
+        required
+      />
+    </label>
+    <label for="opex-form-description">
+      Description (optional)
+      <textarea
+        id="opex-form-description"
+        name="description"
+        rows="3"
+      ></textarea>
+    </label>
+    <button type="submit" class="btn primary">Add OPEX</button>
+  </form>
+  <p id="opex-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">Create a scenario before adding OPEX entries.</p>
+  {% endif %}
+</section>
+
+<script>
+  const scenarios = {{ scenarios | tojson | safe }};
+  const capexByScenario = {{ capex_by_scenario | tojson | safe }};
+  const opexByScenario = {{ opex_by_scenario | tojson | safe }};
+
+  const filterSelect = document.getElementById("costs-scenario-filter");
+  const costsEmptyState = document.getElementById("costs-empty");
+  const costsDataWrapper = document.getElementById("costs-data");
+  const capexTableBody = document.getElementById("capex-table-body");
+  const opexTableBody = document.getElementById("opex-table-body");
+  const capexEmpty = document.getElementById("capex-empty");
+  const opexEmpty = document.getElementById("opex-empty");
+  const capexTotal = document.getElementById("capex-total");
+  const opexTotal = document.getElementById("opex-total");
+  const capexForm = document.getElementById("capex-form");
+  const opexForm = document.getElementById("opex-form");
+  const capexFeedback = document.getElementById("capex-feedback");
+  const opexFeedback = document.getElementById("opex-feedback");
+  const capexFormScenario = document.getElementById("capex-form-scenario");
+  const opexFormScenario = document.getElementById("opex-form-scenario");
+
+  function showFeedback(element, message, type = "success") {
+    if (!element) {
+      return;
+    }
+    element.textContent = message;
+    element.classList.remove("hidden", "success", "error");
+    element.classList.add(type);
+  }
+
+  function hideFeedback(element) {
+    if (!element) {
+      return;
+    }
+    element.classList.add("hidden");
+    element.textContent = "";
+  }
+
+  function formatAmount(value) {
+    return Number(value).toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  }
+
+  function sumAmount(records) {
+    return records.reduce((total, record) => total + Number(record.amount || 0), 0);
+  }
+
+  function renderCostTables(scenarioId) {
+    const capexRecords = capexByScenario[String(scenarioId)] || [];
+    const opexRecords = opexByScenario[String(scenarioId)] || [];
+
+    capexTableBody.innerHTML = "";
+    opexTableBody.innerHTML = "";
+
+    if (!capexRecords.length) {
+      capexEmpty.classList.remove("hidden");
+    } else {
+      capexEmpty.classList.add("hidden");
+      capexRecords.forEach((record) => {
+        const row = document.createElement("tr");
+        row.innerHTML = `
+          <td>${formatAmount(record.amount)}</td>
+          <td>${record.description || "—"}</td>
+        `;
+        capexTableBody.appendChild(row);
+      });
+    }
+
+    if (!opexRecords.length) {
+      opexEmpty.classList.remove("hidden");
+    } else {
+      opexEmpty.classList.add("hidden");
+      opexRecords.forEach((record) => {
+        const row = document.createElement("tr");
+        row.innerHTML = `
+          <td>${formatAmount(record.amount)}</td>
+          <td>${record.description || "—"}</td>
+        `;
+        opexTableBody.appendChild(row);
+      });
+    }
+
+    capexTotal.textContent = formatAmount(sumAmount(capexRecords));
+    opexTotal.textContent = formatAmount(sumAmount(opexRecords));
+  }
+
+  function toggleCostView(show) {
+    if (show) {
+      costsEmptyState.classList.add("hidden");
+      costsDataWrapper.classList.remove("hidden");
+    } else {
+      costsEmptyState.classList.remove("hidden");
+      costsDataWrapper.classList.add("hidden");
+      capexTableBody.innerHTML = "";
+      opexTableBody.innerHTML = "";
+      capexTotal.textContent = "—";
+      opexTotal.textContent = "—";
+      capexEmpty.classList.add("hidden");
+      opexEmpty.classList.add("hidden");
+    }
+  }
+
+  function syncFormSelections(value) {
+    if (capexFormScenario) {
+      capexFormScenario.value = value || "";
+    }
+    if (opexFormScenario) {
+      opexFormScenario.value = value || "";
+    }
+  }
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      if (!value) {
+        toggleCostView(false);
+        syncFormSelections("");
+        return;
+      }
+      toggleCostView(true);
+      renderCostTables(value);
+      syncFormSelections(value);
+    });
+  }
+
+  async function submitCostEntry(event, targetUrl, storageMap, feedbackEl) {
+    event.preventDefault();
+    hideFeedback(feedbackEl);
+
+    const formData = new FormData(event.target);
+    const scenarioId = formData.get("scenario_id");
+    const payload = {
+      scenario_id: scenarioId ? Number(scenarioId) : null,
+      amount: Number(formData.get("amount")),
+      description: formData.get("description") || null,
+    };
+
+    if (!payload.scenario_id) {
+      showFeedback(feedbackEl, "Select a scenario before submitting.", "error");
+      return;
+    }
+
+    try {
+      const response = await fetch(targetUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.json().catch(() => ({}));
+        throw new Error(errorDetail.detail || "Unable to save cost entry.");
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+
+      if (!Array.isArray(storageMap[mapKey])) {
+        storageMap[mapKey] = [];
+      }
+
+      storageMap[mapKey].push(result);
+
+      event.target.reset();
+      showFeedback(feedbackEl, "Entry saved successfully.", "success");
+
+      if (filterSelect && filterSelect.value === mapKey) {
+        renderCostTables(mapKey);
+      }
+    } catch (error) {
+      showFeedback(feedbackEl, error.message || "An unexpected error occurred.", "error");
+    }
+  }
+
+  if (capexForm) {
+    capexForm.addEventListener("submit", (event) =>
+      submitCostEntry(event, "/api/costs/capex", capexByScenario, capexFeedback)
+    );
+  }
+
+  if (opexForm) {
+    opexForm.addEventListener("submit", (event) =>
+      submitCostEntry(event, "/api/costs/opex", opexByScenario, opexFeedback)
+    );
+  }
+
+  if (filterSelect && filterSelect.value) {
+    toggleCostView(true);
+    renderCostTables(filterSelect.value);
+    syncFormSelections(filterSelect.value);
+  }
+</script>
 {% endblock %}
diff --git a/templates/equipment.html b/templates/equipment.html
index 2212c2e..4a05c79 100644
--- a/templates/equipment.html
+++ b/templates/equipment.html
@@ -1,8 +1,190 @@
-{% extends "base.html" %}
-{% block title %}Equipment · CalMiner{% endblock %}
-{% block content %}
-  <section class="panel">
-    <h2>Equipment Inventory</h2>
-    <p>Placeholder for equipment CRUD interface. To be wired to `/api/equipment/` routes.</p>
-  </section>
+{% extends "base.html" %} {% block title %}Equipment · CalMiner{% endblock %} {%
+block content %}
+<section class="panel">
+  <h2>Equipment Inventory</h2>
+  {% if scenarios %}
+  <div class="form-grid">
+    <label for="equipment-scenario-filter">
+      Scenario filter
+      <select id="equipment-scenario-filter">
+        <option value="">Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+  </div>
+  {% else %}
+  <p class="empty-state">Create a scenario to view equipment inventory.</p>
+  {% endif %}
+  <div id="equipment-empty" class="empty-state">
+    Choose a scenario to review the equipment list.
+  </div>
+  <div id="equipment-table-wrapper" class="table-container hidden">
+    <table aria-label="Scenario equipment inventory">
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="equipment-table-body"></tbody>
+    </table>
+  </div>
+</section>
+
+<section class="panel">
+  <h2>Add Equipment</h2>
+  {% if scenarios %}
+  <form id="equipment-form" class="form-grid">
+    <label for="equipment-form-scenario">
+      Scenario
+      <select id="equipment-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="equipment-form-name">
+      Equipment name
+      <input id="equipment-form-name" type="text" name="name" required />
+    </label>
+    <label for="equipment-form-description">
+      Description (optional)
+      <textarea
+        id="equipment-form-description"
+        name="description"
+        rows="3"
+      ></textarea>
+    </label>
+    <button type="submit" class="btn primary">Add Equipment</button>
+  </form>
+  <p id="equipment-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">Create a scenario before managing equipment.</p>
+  {% endif %}
+</section>
+
+<script>
+  const scenarios = {{ scenarios | tojson | safe }};
+  const equipmentByScenario = {{ equipment_by_scenario | tojson | safe }};
+
+  const filterSelect = document.getElementById("equipment-scenario-filter");
+  const tableWrapper = document.getElementById("equipment-table-wrapper");
+  const tableBody = document.getElementById("equipment-table-body");
+  const emptyState = document.getElementById("equipment-empty");
+  const form = document.getElementById("equipment-form");
+  const feedbackEl = document.getElementById("equipment-feedback");
+
+  function showFeedback(message, type = "success") {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    feedbackEl.classList.add(type);
+  }
+
+  function hideFeedback() {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.classList.add("hidden");
+    feedbackEl.textContent = "";
+  }
+
+  function renderEquipmentRows(scenarioId) {
+    const key = String(scenarioId);
+    const records = equipmentByScenario[key] || [];
+
+    tableBody.innerHTML = "";
+
+    if (!records.length) {
+      emptyState.textContent = "No equipment recorded for this scenario yet.";
+      emptyState.classList.remove("hidden");
+      tableWrapper.classList.add("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    tableWrapper.classList.remove("hidden");
+
+    records.forEach((record) => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${record.name || "—"}</td>
+        <td>${record.description || "—"}</td>
+      `;
+      tableBody.appendChild(row);
+    });
+  }
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      if (!value) {
+        emptyState.textContent = "Choose a scenario to review the equipment list.";
+        emptyState.classList.remove("hidden");
+        tableWrapper.classList.add("hidden");
+        tableBody.innerHTML = "";
+        return;
+      }
+      renderEquipmentRows(value);
+    });
+  }
+
+  async function submitEquipment(event) {
+    event.preventDefault();
+    hideFeedback();
+
+    const formData = new FormData(form);
+    const scenarioId = formData.get("scenario_id");
+    const payload = {
+      scenario_id: scenarioId ? Number(scenarioId) : null,
+      name: formData.get("name"),
+      description: formData.get("description") || null,
+    };
+
+    try {
+      const response = await fetch("/api/equipment/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.json().catch(() => ({}));
+        throw new Error(errorDetail.detail || "Unable to add equipment record.");
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+
+      if (!Array.isArray(equipmentByScenario[mapKey])) {
+        equipmentByScenario[mapKey] = [];
+      }
+      equipmentByScenario[mapKey].push(result);
+
+      form.reset();
+      showFeedback("Equipment saved.", "success");
+
+      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
+        renderEquipmentRows(filterSelect.value);
+      }
+    } catch (error) {
+      showFeedback(error.message || "An unexpected error occurred.", "error");
+    }
+  }
+
+  if (form) {
+    form.addEventListener("submit", submitEquipment);
+  }
+
+  if (filterSelect && filterSelect.value) {
+    renderEquipmentRows(filterSelect.value);
+  }
+</script>
 {% endblock %}
diff --git a/templates/maintenance.html b/templates/maintenance.html
index 2eb1c34..9e73a73 100644
--- a/templates/maintenance.html
+++ b/templates/maintenance.html
@@ -1,8 +1,308 @@
-{% extends "base.html" %}
-{% block title %}Maintenance · CalMiner{% endblock %}
+{% extends "base.html" %} {% block title %}Maintenance · CalMiner{% endblock %}
 {% block content %}
-  <section class="panel">
-    <h2>Maintenance Log</h2>
-    <p>Placeholder for maintenance records management. Future work will surface CRUD flows tied to `/api/maintenance/`.</p>
-  </section>
+<section class="panel">
+  <h2>Maintenance Schedule</h2>
+  {% if scenarios %}
+  <div class="form-grid">
+    <label for="maintenance-scenario-filter">
+      Scenario filter
+      <select id="maintenance-scenario-filter">
+        <option value="">Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+  </div>
+  {% else %}
+  <p class="empty-state">Create a scenario to view maintenance entries.</p>
+  {% endif %}
+  <div id="maintenance-empty" class="empty-state">
+    Choose a scenario to review upcoming or completed maintenance.
+  </div>
+  <div id="maintenance-table-wrapper" class="table-container hidden">
+    <table aria-label="Scenario maintenance records">
+      <thead>
+        <tr>
+          <th scope="col">Date</th>
+          <th scope="col">Equipment</th>
+          <th scope="col">Cost</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="maintenance-table-body"></tbody>
+    </table>
+  </div>
+</section>
+
+<section class="panel">
+  <h2>Add Maintenance Entry</h2>
+  {% if scenarios %}
+  <form id="maintenance-form" class="form-grid">
+    <label for="maintenance-form-scenario">
+      Scenario
+      <select id="maintenance-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="maintenance-form-equipment">
+      Equipment
+      <select
+        id="maintenance-form-equipment"
+        name="equipment_id"
+        required
+        disabled
+      >
+        <option value="" disabled selected>Select equipment</option>
+      </select>
+    </label>
+    <p id="maintenance-equipment-empty" class="empty-state hidden">
+      Add equipment for this scenario before scheduling maintenance.
+    </p>
+    <label for="maintenance-form-date">
+      Date
+      <input
+        id="maintenance-form-date"
+        type="date"
+        name="maintenance_date"
+        required
+      />
+    </label>
+    <label for="maintenance-form-cost">
+      Cost
+      <input
+        id="maintenance-form-cost"
+        type="number"
+        name="cost"
+        min="0"
+        step="0.01"
+        required
+      />
+    </label>
+    <label for="maintenance-form-description">
+      Description (optional)
+      <textarea
+        id="maintenance-form-description"
+        name="description"
+        rows="3"
+      ></textarea>
+    </label>
+    <button type="submit" class="btn primary">Add Maintenance</button>
+  </form>
+  <p id="maintenance-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">
+    Create a scenario before managing maintenance entries.
+  </p>
+  {% endif %}
+</section>
+
+<script>
+  const scenarios = {{ scenarios | tojson | safe }};
+  const equipmentByScenario = {{ equipment_by_scenario | tojson | safe }};
+  const maintenanceByScenario = {{ maintenance_by_scenario | tojson | safe }};
+
+  const filterSelect = document.getElementById("maintenance-scenario-filter");
+  const tableWrapper = document.getElementById("maintenance-table-wrapper");
+  const tableBody = document.getElementById("maintenance-table-body");
+  const emptyState = document.getElementById("maintenance-empty");
+  const form = document.getElementById("maintenance-form");
+  const feedbackEl = document.getElementById("maintenance-feedback");
+  const formScenarioSelect = document.getElementById("maintenance-form-scenario");
+  const equipmentSelect = document.getElementById("maintenance-form-equipment");
+  const equipmentEmptyState = document.getElementById("maintenance-equipment-empty");
+
+  function showFeedback(message, type = "success") {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    feedbackEl.classList.add(type);
+  }
+
+  function hideFeedback() {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.classList.add("hidden");
+    feedbackEl.textContent = "";
+  }
+
+  function formatCost(value) {
+    return Number(value).toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  }
+
+  function formatDate(value) {
+    if (!value) {
+      return "—";
+    }
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) {
+      return value;
+    }
+    return parsed.toLocaleDateString();
+  }
+
+  function renderMaintenanceRows(scenarioId) {
+    const key = String(scenarioId);
+    const records = maintenanceByScenario[key] || [];
+
+    tableBody.innerHTML = "";
+
+    if (!records.length) {
+      emptyState.textContent = "No maintenance entries recorded for this scenario yet.";
+      emptyState.classList.remove("hidden");
+      tableWrapper.classList.add("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    tableWrapper.classList.remove("hidden");
+
+    records.forEach((record) => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${formatDate(record.maintenance_date)}</td>
+        <td>${record.equipment_name || "—"}</td>
+        <td>${formatCost(record.cost)}</td>
+        <td>${record.description || "—"}</td>
+      `;
+      tableBody.appendChild(row);
+    });
+  }
+
+  function populateEquipmentOptions(scenarioId) {
+    if (!equipmentSelect) {
+      return;
+    }
+
+    equipmentSelect.innerHTML = '<option value="" disabled selected>Select equipment</option>';
+    equipmentSelect.disabled = true;
+
+    if (equipmentEmptyState) {
+      equipmentEmptyState.classList.add("hidden");
+    }
+
+    if (!scenarioId) {
+      return;
+    }
+
+    const list = equipmentByScenario[String(scenarioId)] || [];
+    if (!list.length) {
+      if (equipmentEmptyState) {
+        equipmentEmptyState.textContent = "Add equipment for this scenario before scheduling maintenance.";
+        equipmentEmptyState.classList.remove("hidden");
+      }
+      return;
+    }
+
+    list.forEach((item) => {
+      const option = document.createElement("option");
+      option.value = item.id;
+      option.textContent = item.name || `Equipment ${item.id}`;
+      equipmentSelect.appendChild(option);
+    });
+
+    equipmentSelect.disabled = false;
+  }
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      if (!value) {
+        emptyState.textContent = "Choose a scenario to review upcoming or completed maintenance.";
+        emptyState.classList.remove("hidden");
+        tableWrapper.classList.add("hidden");
+        tableBody.innerHTML = "";
+        return;
+      }
+      renderMaintenanceRows(value);
+    });
+  }
+
+  if (formScenarioSelect) {
+    formScenarioSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      populateEquipmentOptions(value);
+    });
+  }
+
+  async function submitMaintenance(event) {
+    event.preventDefault();
+    hideFeedback();
+
+    const formData = new FormData(form);
+    const scenarioId = formData.get("scenario_id");
+    const equipmentId = formData.get("equipment_id");
+    const payload = {
+      scenario_id: scenarioId ? Number(scenarioId) : null,
+      equipment_id: equipmentId ? Number(equipmentId) : null,
+      maintenance_date: formData.get("maintenance_date"),
+      cost: Number(formData.get("cost")),
+      description: formData.get("description") || null,
+    };
+
+    if (!payload.scenario_id || !payload.equipment_id) {
+      showFeedback("Select a scenario and equipment before submitting.", "error");
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/maintenance/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.json().catch(() => ({}));
+        throw new Error(errorDetail.detail || "Unable to add maintenance entry.");
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+
+      if (!Array.isArray(maintenanceByScenario[mapKey])) {
+        maintenanceByScenario[mapKey] = [];
+      }
+        const equipmentList = equipmentByScenario[mapKey] || [];
+        const matchedEquipment = equipmentList.find(
+          (item) => Number(item.id) === Number(result.equipment_id)
+        );
+        result.equipment_name = matchedEquipment ? matchedEquipment.name : "";
+      maintenanceByScenario[mapKey].push(result);
+
+      form.reset();
+      populateEquipmentOptions(null);
+      showFeedback("Maintenance entry saved.", "success");
+
+      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
+        renderMaintenanceRows(filterSelect.value);
+      }
+    } catch (error) {
+      showFeedback(error.message || "An unexpected error occurred.", "error");
+    }
+  }
+
+  if (form) {
+    form.addEventListener("submit", submitMaintenance);
+  }
+
+  if (filterSelect && filterSelect.value) {
+    renderMaintenanceRows(filterSelect.value);
+  }
+
+  if (formScenarioSelect && formScenarioSelect.value) {
+    populateEquipmentOptions(formScenarioSelect.value);
+  }
+</script>
 {% endblock %}
diff --git a/templates/partials/base_header.html b/templates/partials/base_header.html
index aff5df1..1140a18 100644
--- a/templates/partials/base_header.html
+++ b/templates/partials/base_header.html
@@ -1,17 +1,38 @@
-<header class="site-header">
-  <div class="container header-inner">
-    <h1 class="site-title">CalMiner</h1>
-    <nav class="site-nav" aria-label="Primary navigation">
-      <a href="/ui/dashboard">Dashboard</a>
-      <a href="/ui/scenarios">Scenarios</a>
-      <a href="/ui/parameters">Parameters</a>
-      <a href="/ui/costs">Costs</a>
-      <a href="/ui/consumption">Consumption</a>
-      <a href="/ui/production">Production</a>
-      <a href="/ui/equipment">Equipment</a>
-      <a href="/ui/maintenance">Maintenance</a>
-      <a href="/ui/simulations">Simulations</a>
-      <a href="/ui/reporting">Reporting</a>
-    </nav>
+{% set nav_links = [
+  ("/", "Dashboard"),
+  ("/ui/scenarios", "Scenarios"),
+  ("/ui/parameters", "Parameters"),
+  ("/ui/costs", "Costs"),
+  ("/ui/consumption", "Consumption"),
+  ("/ui/production", "Production"),
+  ("/ui/equipment", "Equipment"),
+  ("/ui/maintenance", "Maintenance"),
+  ("/ui/simulations", "Simulations"),
+  ("/ui/reporting", "Reporting"),
+] %}
+
+<div class="sidebar-inner">
+  <div class="sidebar-brand">
+    <span class="brand-logo" aria-hidden="true">CM</span>
+    <div class="brand-text">
+      <span class="brand-title">CalMiner</span>
+      <span class="brand-subtitle">Mining Planner</span>
+    </div>
   </div>
-</header>
+  <nav class="sidebar-nav" aria-label="Primary navigation">
+    {% set current_path = request.url.path if request else "" %}
+    {% for href, label in nav_links %}
+      {% if href == "/" %}
+        {% set is_active = current_path == "/" %}
+      {% else %}
+        {% set is_active = current_path.startswith(href) %}
+      {% endif %}
+      <a
+        href="{{ href }}"
+        class="sidebar-link{% if is_active %} is-active{% endif %}"
+      >
+        {{ label }}
+      </a>
+    {% endfor %}
+  </nav>
+</div>
diff --git a/templates/production.html b/templates/production.html
index 959033e..5d12569 100644
--- a/templates/production.html
+++ b/templates/production.html
@@ -1,8 +1,204 @@
-{% extends "base.html" %}
-{% block title %}Production · CalMiner{% endblock %}
+{% extends "base.html" %} {% block title %}Production · CalMiner{% endblock %}
 {% block content %}
-  <section class="panel">
-    <h2>Production Output</h2>
-    <p>Placeholder for production metrics per scenario. Hook up to `/api/production/` endpoints.</p>
-  </section>
+<section class="panel">
+  <h2>Production Output</h2>
+  {% if scenarios %}
+  <div class="form-grid">
+    <label for="production-scenario-filter">
+      Scenario filter
+      <select id="production-scenario-filter">
+        <option value="">Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+  </div>
+  {% else %}
+  <p class="empty-state">Create a scenario to view production output data.</p>
+  {% endif %}
+  <div id="production-empty" class="empty-state">
+    Choose a scenario to review its production output.
+  </div>
+  <div id="production-table-wrapper" class="table-container hidden">
+    <table aria-label="Scenario production records">
+      <thead>
+        <tr>
+          <th scope="col">Amount</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="production-table-body"></tbody>
+    </table>
+  </div>
+</section>
+
+<section class="panel">
+  <h2>Add Production Output</h2>
+  {% if scenarios %}
+  <form id="production-form" class="form-grid">
+    <label for="production-form-scenario">
+      Scenario
+      <select id="production-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="production-form-amount">
+      Amount
+      <input
+        id="production-form-amount"
+        type="number"
+        name="amount"
+        min="0"
+        step="0.01"
+        required
+      />
+    </label>
+    <label for="production-form-description">
+      Description (optional)
+      <textarea
+        id="production-form-description"
+        name="description"
+        rows="3"
+      ></textarea>
+    </label>
+    <button type="submit" class="btn primary">Add Record</button>
+  </form>
+  <p id="production-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">Create a scenario before adding production output.</p>
+  {% endif %}
+</section>
+
+<script>
+  const scenarios = {{ scenarios | tojson | safe }};
+  const productionByScenario = {{ production_by_scenario | tojson | safe }};
+
+  const filterSelect = document.getElementById("production-scenario-filter");
+  const tableWrapper = document.getElementById("production-table-wrapper");
+  const tableBody = document.getElementById("production-table-body");
+  const emptyState = document.getElementById("production-empty");
+  const form = document.getElementById("production-form");
+  const feedbackEl = document.getElementById("production-feedback");
+
+  function showFeedback(message, type = "success") {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    feedbackEl.classList.add(type);
+  }
+
+  function hideFeedback() {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.classList.add("hidden");
+    feedbackEl.textContent = "";
+  }
+
+  function formatAmount(value) {
+    return Number(value).toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  }
+
+  function renderProductionRows(scenarioId) {
+    const key = String(scenarioId);
+    const records = productionByScenario[key] || [];
+
+    tableBody.innerHTML = "";
+
+    if (!records.length) {
+      emptyState.textContent = "No production output recorded for this scenario yet.";
+      emptyState.classList.remove("hidden");
+      tableWrapper.classList.add("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    tableWrapper.classList.remove("hidden");
+
+    records.forEach((record) => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${formatAmount(record.amount)}</td>
+        <td>${record.description || "—"}</td>
+      `;
+      tableBody.appendChild(row);
+    });
+  }
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      if (!value) {
+        emptyState.textContent = "Choose a scenario to review its production output.";
+        emptyState.classList.remove("hidden");
+        tableWrapper.classList.add("hidden");
+        tableBody.innerHTML = "";
+        return;
+      }
+      renderProductionRows(value);
+    });
+  }
+
+  async function submitProduction(event) {
+    event.preventDefault();
+    hideFeedback();
+
+    const formData = new FormData(form);
+    const scenarioId = formData.get("scenario_id");
+    const payload = {
+      scenario_id: scenarioId ? Number(scenarioId) : null,
+      amount: Number(formData.get("amount")),
+      description: formData.get("description") || null,
+    };
+
+    try {
+      const response = await fetch("/api/production/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.json().catch(() => ({}));
+        throw new Error(errorDetail.detail || "Unable to add production output record.");
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+
+      if (!Array.isArray(productionByScenario[mapKey])) {
+        productionByScenario[mapKey] = [];
+      }
+      productionByScenario[mapKey].push(result);
+
+      form.reset();
+      showFeedback("Production output saved.", "success");
+
+      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
+        renderProductionRows(filterSelect.value);
+      }
+    } catch (error) {
+      showFeedback(error.message || "An unexpected error occurred.", "error");
+    }
+  }
+
+  if (form) {
+    form.addEventListener("submit", submitProduction);
+  }
+
+  if (filterSelect && filterSelect.value) {
+    renderProductionRows(filterSelect.value);
+  }
+</script>
 {% endblock %}
diff --git a/templates/reporting.html b/templates/reporting.html
index 4a703c2..6916d56 100644
--- a/templates/reporting.html
+++ b/templates/reporting.html
@@ -1,8 +1,170 @@
-{% extends "base.html" %}
-{% block title %}Reporting · CalMiner{% endblock %}
-{% block content %}
-  <section class="panel">
-    <h2>Reporting</h2>
-    <p>Placeholder for aggregated KPI views connected to `/api/reporting/` endpoints.</p>
-  </section>
+{% extends "base.html" %} {% block title %}Reporting · CalMiner{% endblock %} {%
+block content %}
+<section class="panel">
+  <h2>Scenario KPI Summary</h2>
+  <div class="button-row">
+    <button id="report-refresh" class="btn" type="button">
+      Refresh Metrics
+    </button>
+  </div>
+  <p id="report-feedback" class="feedback hidden" role="status"></p>
+
+  <div id="reporting-empty" class="empty-state hidden">
+    No reporting data available. Run a simulation to generate metrics.
+  </div>
+
+  <div id="reporting-table-wrapper" class="table-container hidden">
+    <table aria-label="Scenario reporting summary">
+      <thead>
+        <tr>
+          <th scope="col">Scenario</th>
+          <th scope="col">Iterations</th>
+          <th scope="col">Mean Result</th>
+          <th scope="col">Variance</th>
+          <th scope="col">Std. Dev</th>
+          <th scope="col">Percentile 5</th>
+          <th scope="col">Percentile 95</th>
+          <th scope="col">Value at Risk (95%)</th>
+          <th scope="col">Expected Shortfall (95%)</th>
+        </tr>
+      </thead>
+      <tbody id="reporting-table-body"></tbody>
+    </table>
+  </div>
+</section>
+
+<script>
+  const reportingSummaries = {{ report_summaries | tojson | safe }};
+  const REPORT_FIELDS = [
+    { key: "iterations", label: "Iterations", decimals: 0 },
+    { key: "mean", label: "Mean Result", decimals: 2 },
+    { key: "variance", label: "Variance", decimals: 2 },
+    { key: "std_dev", label: "Std. Dev", decimals: 2 },
+    { key: "percentile_5", label: "Percentile 5", decimals: 2 },
+    { key: "percentile_95", label: "Percentile 95", decimals: 2 },
+    { key: "value_at_risk_95", label: "Value at Risk (95%)", decimals: 2 },
+    { key: "expected_shortfall_95", label: "Expected Shortfall (95%)", decimals: 2 },
+  ];
+
+  const tableWrapper = document.getElementById("reporting-table-wrapper");
+  const tableBody = document.getElementById("reporting-table-body");
+  const emptyState = document.getElementById("reporting-empty");
+  const refreshButton = document.getElementById("report-refresh");
+  const feedbackEl = document.getElementById("report-feedback");
+
+  function formatNumber(value, decimals = 2) {
+    if (value === null || value === undefined || Number.isNaN(Number(value))) {
+      return "—";
+    }
+    return Number(value).toLocaleString(undefined, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    });
+  }
+
+  function showFeedback(message, type = "success") {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    feedbackEl.classList.add(type);
+  }
+
+  function hideFeedback() {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.classList.add("hidden");
+    feedbackEl.textContent = "";
+  }
+
+  function renderReportingTable(summaryData) {
+    if (!tableBody || !tableWrapper || !emptyState) {
+      return;
+    }
+
+    tableBody.innerHTML = "";
+
+    if (!summaryData.length) {
+      emptyState.classList.remove("hidden");
+      tableWrapper.classList.add("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    tableWrapper.classList.remove("hidden");
+
+    summaryData.forEach((entry) => {
+      const row = document.createElement("tr");
+      const scenarioCell = document.createElement("td");
+      scenarioCell.textContent = entry.scenario_name;
+      row.appendChild(scenarioCell);
+
+      REPORT_FIELDS.forEach((field) => {
+        const cell = document.createElement("td");
+        const source = field.key === "iterations" ? entry : entry.summary || {};
+        cell.textContent = formatNumber(source[field.key], field.decimals);
+        row.appendChild(cell);
+      });
+
+      tableBody.appendChild(row);
+    });
+  }
+
+  async function refreshMetrics() {
+    hideFeedback();
+    showFeedback("Refreshing metrics…", "success");
+
+    try {
+      const response = await fetch("/ui/reporting", {
+        method: "GET",
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Unable to refresh reporting data.");
+      }
+
+      const text = await response.text();
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(text, "text/html");
+      const newTable = doc.querySelector("#reporting-table-wrapper");
+      const newFeedback = doc.querySelector("#report-feedback");
+
+      if (!newTable) {
+        throw new Error("Unexpected response while refreshing.");
+      }
+
+      const newEmptyState = doc.querySelector("#reporting-empty");
+
+      if (emptyState && newEmptyState) {
+        emptyState.className = newEmptyState.className;
+        emptyState.textContent = newEmptyState.textContent;
+      }
+
+      if (tableWrapper) {
+        tableWrapper.className = newTable.className;
+        tableWrapper.innerHTML = newTable.innerHTML;
+      }
+
+      if (newFeedback && feedbackEl) {
+        feedbackEl.className = newFeedback.className;
+        feedbackEl.textContent = newFeedback.textContent;
+      }
+
+      showFeedback("Metrics refreshed.", "success");
+    } catch (error) {
+      showFeedback(error.message || "An unexpected error occurred.", "error");
+    }
+  }
+
+  renderReportingTable(reportingSummaries);
+
+  if (refreshButton) {
+    refreshButton.addEventListener("click", refreshMetrics);
+  }
+</script>
 {% endblock %}
diff --git a/templates/simulations.html b/templates/simulations.html
index e9e66d1..529467a 100644
--- a/templates/simulations.html
+++ b/templates/simulations.html
@@ -1,8 +1,447 @@
-{% extends "base.html" %}
-{% block title %}Simulations · CalMiner{% endblock %}
+{% extends "base.html" %} {% block title %}Simulations · CalMiner{% endblock %}
 {% block content %}
-  <section class="panel">
-    <h2>Monte Carlo Simulations</h2>
-    <p>Placeholder for running simulations and reviewing outputs. Target integration: `/api/simulations/run`.</p>
-  </section>
+<section class="panel">
+  <h2>Monte Carlo Simulations</h2>
+  {% if simulation_scenarios %}
+  <div class="form-grid">
+    <label for="simulations-scenario-filter">
+      Scenario filter
+      <select id="simulations-scenario-filter">
+        <option value="">Select a scenario</option>
+        {% for scenario in simulation_scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+  </div>
+  {% else %}
+  <p class="empty-state">Create a scenario before running simulations.</p>
+  {% endif %}
+
+  <div
+    id="simulations-overview-wrapper"
+    class="table-container{% if not simulation_scenarios %} hidden{% endif %}"
+  >
+    <h3>Scenario Run History</h3>
+    <table aria-label="Simulation run history">
+      <thead>
+        <tr>
+          <th scope="col">Scenario</th>
+          <th scope="col">Iterations</th>
+          <th scope="col">Mean Result</th>
+        </tr>
+      </thead>
+      <tbody id="simulations-overview-body"></tbody>
+    </table>
+  </div>
+  <p id="simulations-overview-empty" class="empty-state hidden">
+    Create a scenario to review simulation history.
+  </p>
+
+  <div id="simulations-empty" class="empty-state">
+    Select a scenario to review simulation outputs.
+  </div>
+
+  <div id="simulations-summary-wrapper" class="table-container hidden">
+    <h3>Summary Metrics</h3>
+    <table aria-label="Simulation summary metrics">
+      <thead>
+        <tr>
+          <th scope="col">Metric</th>
+          <th scope="col">Value</th>
+        </tr>
+      </thead>
+      <tbody id="simulations-summary-body"></tbody>
+    </table>
+  </div>
+  <p id="simulations-summary-empty" class="empty-state hidden">
+    No simulations have been run for this scenario yet.
+  </p>
+
+  <div id="simulations-results-wrapper" class="table-container hidden">
+    <h3>Sample Results</h3>
+    <table aria-label="Simulation sample results">
+      <thead>
+        <tr>
+          <th scope="col">Iteration</th>
+          <th scope="col">Result</th>
+        </tr>
+      </thead>
+      <tbody id="simulations-results-body"></tbody>
+    </table>
+  </div>
+  <p id="simulations-results-empty" class="empty-state hidden">
+    No sample results available for this scenario.
+  </p>
+</section>
+
+<section class="panel">
+  <h2>Run Simulation</h2>
+  {% if simulation_scenarios %}
+  <form id="simulation-run-form" class="form-grid">
+    <label for="simulation-form-scenario">
+      Scenario
+      <select id="simulation-form-scenario" name="scenario_id" required>
+        <option value="" disabled selected>Select a scenario</option>
+        {% for scenario in simulation_scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label for="simulation-form-iterations">
+      Iterations
+      <input
+        id="simulation-form-iterations"
+        type="number"
+        name="iterations"
+        min="100"
+        step="100"
+        value="1000"
+        required
+      />
+    </label>
+    <label for="simulation-form-seed">
+      Seed (optional)
+      <input id="simulation-form-seed" type="number" name="seed" />
+    </label>
+    <button type="submit" class="btn primary">Run Simulation</button>
+  </form>
+  <p id="simulation-feedback" class="feedback hidden" role="status"></p>
+  {% else %}
+  <p class="empty-state">Create at least one scenario to run simulations.</p>
+  {% endif %}
+</section>
+
+<script>
+  const simulationScenarios = {{ simulation_scenarios | tojson | safe }};
+  const initialRuns = {{ simulation_runs | tojson | safe }};
+  const SUMMARY_FIELDS = [
+    { key: "count", label: "Iterations", decimals: 0 },
+    { key: "mean", label: "Mean Result", decimals: 2 },
+    { key: "median", label: "Median Result", decimals: 2 },
+    { key: "min", label: "Minimum", decimals: 2 },
+    { key: "max", label: "Maximum", decimals: 2 },
+    { key: "variance", label: "Variance", decimals: 2 },
+    { key: "std_dev", label: "Standard Deviation", decimals: 2 },
+    { key: "percentile_5", label: "Percentile 5", decimals: 2 },
+    { key: "percentile_95", label: "Percentile 95", decimals: 2 },
+    { key: "value_at_risk_95", label: "Value at Risk (95%)", decimals: 2 },
+    { key: "expected_shortfall_95", label: "Expected Shortfall (95%)", decimals: 2 },
+  ];
+  const SAMPLE_RESULT_LIMIT = 20;
+
+  const filterSelect = document.getElementById("simulations-scenario-filter");
+  const overviewWrapper = document.getElementById("simulations-overview-wrapper");
+  const overviewBody = document.getElementById("simulations-overview-body");
+  const overviewEmpty = document.getElementById("simulations-overview-empty");
+  const emptyState = document.getElementById("simulations-empty");
+  const summaryWrapper = document.getElementById("simulations-summary-wrapper");
+  const summaryBody = document.getElementById("simulations-summary-body");
+  const summaryEmpty = document.getElementById("simulations-summary-empty");
+  const resultsWrapper = document.getElementById("simulations-results-wrapper");
+  const resultsBody = document.getElementById("simulations-results-body");
+  const resultsEmpty = document.getElementById("simulations-results-empty");
+  const simulationForm = document.getElementById("simulation-run-form");
+  const simulationFeedback = document.getElementById("simulation-feedback");
+  const formScenarioSelect = document.getElementById("simulation-form-scenario");
+
+  const simulationRunsMap = Object.create(null);
+
+  function getScenarioName(id) {
+    const match = simulationScenarios.find(
+      (scenario) => String(scenario.id) === String(id)
+    );
+    return match ? match.name : `Scenario ${id}`;
+  }
+
+  function formatNumber(value, decimals = 2) {
+    if (value === null || value === undefined || Number.isNaN(Number(value))) {
+      return "—";
+    }
+    return Number(value).toLocaleString(undefined, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    });
+  }
+
+  function showFeedback(element, message, type = "success") {
+    if (!element) {
+      return;
+    }
+    element.textContent = message;
+    element.classList.remove("hidden", "success", "error");
+    element.classList.add(type);
+  }
+
+  function hideFeedback(element) {
+    if (!element) {
+      return;
+    }
+    element.classList.add("hidden");
+    element.textContent = "";
+  }
+
+  function initializeRunsMap() {
+    simulationScenarios.forEach((scenario) => {
+      const key = String(scenario.id);
+      simulationRunsMap[key] = {
+        scenario_id: scenario.id,
+        scenario_name: scenario.name,
+        iterations: 0,
+        summary: null,
+        sample_results: [],
+      };
+    });
+
+    initialRuns.forEach((run) => {
+      const key = String(run.scenario_id);
+      simulationRunsMap[key] = {
+        scenario_id: run.scenario_id,
+        scenario_name: run.scenario_name || getScenarioName(key),
+        iterations: run.iterations || 0,
+        summary: run.summary || null,
+        sample_results: Array.isArray(run.sample_results)
+          ? run.sample_results
+          : [],
+      };
+    });
+  }
+
+  function renderOverviewTable() {
+    if (!overviewBody) {
+      return;
+    }
+
+    overviewBody.innerHTML = "";
+
+    if (!simulationScenarios.length) {
+      if (overviewWrapper) {
+        overviewWrapper.classList.add("hidden");
+      }
+      if (overviewEmpty) {
+        overviewEmpty.classList.remove("hidden");
+      }
+      return;
+    }
+
+    if (overviewWrapper) {
+      overviewWrapper.classList.remove("hidden");
+    }
+    if (overviewEmpty) {
+      overviewEmpty.classList.add("hidden");
+    }
+
+    simulationScenarios.forEach((scenario) => {
+      const key = String(scenario.id);
+      const run = simulationRunsMap[key];
+      const iterations = run && run.iterations ? run.iterations : 0;
+      const meanValue = iterations && run && run.summary ? run.summary.mean : null;
+
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${scenario.name}</td>
+        <td>${iterations || 0}</td>
+        <td>${iterations ? formatNumber(meanValue) : "—"}</td>
+      `;
+      overviewBody.appendChild(row);
+    });
+  }
+
+  function renderScenarioDetails(scenarioId) {
+    if (!scenarioId) {
+      if (emptyState) {
+        emptyState.classList.remove("hidden");
+      }
+      if (summaryWrapper) {
+        summaryWrapper.classList.add("hidden");
+      }
+      if (summaryEmpty) {
+        summaryEmpty.classList.add("hidden");
+      }
+      if (resultsWrapper) {
+        resultsWrapper.classList.add("hidden");
+      }
+      if (resultsEmpty) {
+        resultsEmpty.classList.add("hidden");
+      }
+      return;
+    }
+
+    if (emptyState) {
+      emptyState.classList.add("hidden");
+    }
+
+    const run = simulationRunsMap[scenarioId];
+    const iterations = run && run.iterations ? run.iterations : 0;
+    const summary = run ? run.summary : null;
+
+    if (!iterations || !summary) {
+      if (summaryWrapper) {
+        summaryWrapper.classList.add("hidden");
+      }
+      if (summaryEmpty) {
+        summaryEmpty.classList.remove("hidden");
+      }
+    } else {
+      if (summaryEmpty) {
+        summaryEmpty.classList.add("hidden");
+      }
+      if (summaryWrapper) {
+        summaryWrapper.classList.remove("hidden");
+      }
+      if (summaryBody) {
+        summaryBody.innerHTML = "";
+        SUMMARY_FIELDS.forEach((field) => {
+          const value = summary[field.key];
+          const row = document.createElement("tr");
+          row.innerHTML = `
+            <td>${field.label}</td>
+            <td>${formatNumber(value, field.decimals)}</td>
+          `;
+          summaryBody.appendChild(row);
+        });
+      }
+    }
+
+    const sample = run && Array.isArray(run.sample_results) ? run.sample_results : [];
+
+    if (!sample.length) {
+      if (resultsWrapper) {
+        resultsWrapper.classList.add("hidden");
+      }
+      if (resultsEmpty) {
+        resultsEmpty.classList.remove("hidden");
+      }
+    } else {
+      if (resultsEmpty) {
+        resultsEmpty.classList.add("hidden");
+      }
+      if (resultsWrapper) {
+        resultsWrapper.classList.remove("hidden");
+      }
+      if (resultsBody) {
+        resultsBody.innerHTML = "";
+        sample.forEach((entry) => {
+          const row = document.createElement("tr");
+          row.innerHTML = `
+            <td>${entry.iteration}</td>
+            <td>${formatNumber(entry.result)}</td>
+          `;
+          resultsBody.appendChild(row);
+        });
+      }
+    }
+  }
+
+  function syncFormScenario(value) {
+    if (formScenarioSelect) {
+      formScenarioSelect.value = value || "";
+    }
+  }
+
+  function handleScenarioChange(event) {
+    const value = event.target.value;
+    renderScenarioDetails(value);
+    syncFormScenario(value);
+    renderOverviewTable();
+  }
+
+  async function submitSimulation(event) {
+    event.preventDefault();
+    hideFeedback(simulationFeedback);
+
+    const formData = new FormData(simulationForm);
+    const scenarioId = formData.get("scenario_id");
+    const iterationsValue = Number(formData.get("iterations"));
+    const seedValue = formData.get("seed");
+
+    if (!scenarioId) {
+      showFeedback(simulationFeedback, "Select a scenario before running a simulation.", "error");
+      return;
+    }
+
+    if (!iterationsValue || iterationsValue <= 0) {
+      showFeedback(simulationFeedback, "Provide a positive number of iterations.", "error");
+      return;
+    }
+
+    const payload = {
+      scenario_id: Number(scenarioId),
+      iterations: iterationsValue,
+    };
+
+    if (seedValue) {
+      payload.seed = Number(seedValue);
+    }
+
+    try {
+      const response = await fetch("/api/simulations/run", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.json().catch(() => ({}));
+        throw new Error(errorDetail.detail || "Unable to start simulation.");
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+      const scenarioName = getScenarioName(mapKey);
+      const sampleResults = Array.isArray(result.results)
+        ? result.results.slice(0, SAMPLE_RESULT_LIMIT).map((entry) => ({
+            iteration: entry.iteration,
+            result: entry.result,
+          }))
+        : [];
+
+      simulationRunsMap[mapKey] = {
+        scenario_id: result.scenario_id,
+        scenario_name: scenarioName,
+        iterations:
+          (result.summary && Number(result.summary.count)) || result.iterations || sampleResults.length,
+        summary: result.summary || null,
+        sample_results: sampleResults,
+      };
+
+      simulationForm.reset();
+      showFeedback(simulationFeedback, "Simulation completed successfully.", "success");
+
+      if (formScenarioSelect) {
+        formScenarioSelect.value = mapKey;
+      }
+      if (filterSelect) {
+        filterSelect.value = mapKey;
+      }
+
+      renderOverviewTable();
+      renderScenarioDetails(mapKey);
+    } catch (error) {
+      showFeedback(
+        simulationFeedback,
+        error.message || "An unexpected error occurred.",
+        "error"
+      );
+    }
+  }
+
+  initializeRunsMap();
+  renderOverviewTable();
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", handleScenarioChange);
+  }
+
+  if (simulationForm) {
+    simulationForm.addEventListener("submit", submitSimulation);
+  }
+
+  if (filterSelect && filterSelect.value) {
+    renderScenarioDetails(filterSelect.value);
+    syncFormScenario(filterSelect.value);
+  }
+</script>
 {% endblock %}