diff --git a/README.md b/README.md
index e224a2e..5f1ad4f 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ 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.
 - **Monte Carlo Simulation (in progress)**: Services and routes are scaffolded for future stochastic analysis.
 
 ## Architecture
@@ -78,6 +79,11 @@ 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
+  - `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
 
diff --git a/docs/architecture.md b/docs/architecture.md
index cd1cfe8..18027d4 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 support data entry (scenario and parameter forms) and the dashboard visualization powered by Chart.js.
+- **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.
 - **Middleware** (`middleware/validation.py`): applies JSON validation before requests reach routers.
 - **Testing** (`tests/unit/`): pytest suite covering route and service behavior.
 
@@ -90,3 +90,50 @@ For extended diagrams and setup instructions reference:
 - [docs/mvp.md](mvp.md) — roadmap and milestone scope.
 - [docs/implementation_plan.md](implementation_plan.md) — feature breakdown aligned with the TODO tracker.
 - [docs/architecture_overview.md](architecture_overview.md) — supplementary module map and request flow diagram.
+
+### UI Frontend-Backend Integration Requirements — 2025-10-20
+
+#### Scenarios (`templates/ScenarioForm.html`)
+
+- **Data**: `GET /api/scenarios/` to list existing scenarios for navigation and to hydrate dropdowns in downstream forms; optional aggregation of scenario counts for dashboard badges.
+- **Actions**: `POST /api/scenarios/` to create new scenarios; future delete/update flows would reuse the same router once endpoints exist.
+
+#### Parameters (`templates/ParameterInput.html`)
+
+- **Data**: Scenario catalogue from `GET /api/scenarios/`; parameter inventory via `GET /api/parameters/` with client-side filtering by `scenario_id`; optional distribution catalogue from `models/distribution` when exposed.
+- **Actions**: `POST /api/parameters/` to add parameters; extend UI to support editing or deleting parameters as routes arrive.
+
+#### Costs (`templates/costs.html`)
+
+- **Data**: CAPEX list `GET /api/costs/capex`; OPEX list `GET /api/costs/opex`; computed totals grouped by scenario for summary panels.
+- **Actions**: `POST /api/costs/capex` and `POST /api/costs/opex` for new entries; planned future edits/deletes once routers expand.
+
+#### Consumption (`templates/consumption.html`)
+
+- **Data**: Consumption entries by scenario via `GET /api/consumption/`; scenario metadata for filtering and empty-state messaging.
+- **Actions**: `POST /api/consumption/` to log consumption items; include optimistic UI refresh after persistence.
+
+#### Production (`templates/production.html`)
+
+- **Data**: Production records from `GET /api/production/`; scenario list for filter chips; optional aggregates (totals, averages) derived client-side.
+- **Actions**: `POST /api/production/` to capture production outputs; notify users when data drives downstream reporting.
+
+#### Equipment (`templates/equipment.html`)
+
+- **Data**: Equipment roster from `GET /api/equipment/`; scenario context to scope inventory; maintenance counts per asset once joins are introduced.
+- **Actions**: `POST /api/equipment/` to add equipment; integrate delete/edit when endpoints arrive.
+
+#### Maintenance (`templates/maintenance.html`)
+
+- **Data**: Maintenance schedule `GET /api/maintenance/` with pagination support (`skip`, `limit`); equipment list (`GET /api/equipment/`) to map IDs to names; scenario catalogue for filtering.
+- **Actions**: CRUD operations through `POST /api/maintenance/`, `PUT /api/maintenance/{id}`, `DELETE /api/maintenance/{id}`; view detail via `GET /api/maintenance/{id}` for modal display.
+
+#### Simulations (`templates/simulations.html`)
+
+- **Data**: Scenario list `GET /api/scenarios/`; parameter sets `GET /api/parameters/` filtered client-side; persisted simulation results (future) via dedicated endpoint or by caching `/api/simulations/run` responses.
+- **Actions**: `POST /api/simulations/run` to execute simulations; surface run configuration (iterations, seed) and feed response summary into reporting page.
+
+#### Reporting (`templates/reporting.html` and `templates/Dashboard.html`)
+
+- **Data**: Simulation outputs either from recent `/api/simulations/run` calls or a planned `GET` endpoint against `simulation_result`; summary metrics via `POST /api/reporting/summary`; scenario metadata for header context.
+- **Actions**: Trigger summary refreshes by posting batched results; allow export/download actions once implemented; integrate future comparison requests across scenarios.
diff --git a/main.py b/main.py
index adde7fe..ad006b4 100644
--- a/main.py
+++ b/main.py
@@ -1,8 +1,10 @@
 from routes.distributions import router as distributions_router
 from routes.ui import router as ui_router
 from routes.parameters import router as parameters_router
-from fastapi import FastAPI
-from fastapi.middleware import Middleware
+from typing import Awaitable, Callable
+
+from fastapi import FastAPI, Request, Response
+from fastapi.staticfiles import StaticFiles
 from middleware.validation import validate_json
 from config.database import Base, engine
 from routes.scenarios import router as scenarios_router
@@ -18,8 +20,15 @@ from routes.maintenance import router as maintenance_router
 Base.metadata.create_all(bind=engine)
 
 app = FastAPI()
-# Register validation middleware
-app.middleware("http")(validate_json)
+
+
+@app.middleware("http")
+async def json_validation(
+    request: Request, call_next: Callable[[Request], Awaitable[Response]]
+) -> Response:
+    return await validate_json(request, call_next)
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
 
 # Include API routers
 app.include_router(scenarios_router)
diff --git a/middleware/validation.py b/middleware/validation.py
index 0819eaa..b779366 100644
--- a/middleware/validation.py
+++ b/middleware/validation.py
@@ -1,7 +1,10 @@
-from fastapi import Request, HTTPException
+from typing import Awaitable, Callable
 
+from fastapi import HTTPException, Request, Response
 
-async def validate_json(request: Request, call_next):
+MiddlewareCallNext = Callable[[Request], Awaitable[Response]]
+
+async def validate_json(request: Request, call_next: MiddlewareCallNext) -> Response:
     # Only validate JSON for requests with a body
     if request.method in ("POST", "PUT", "PATCH"):
         try:
diff --git a/routes/ui.py b/routes/ui.py
index b67b4af..a904786 100644
--- a/routes/ui.py
+++ b/routes/ui.py
@@ -1,6 +1,15 @@
-from fastapi import APIRouter, Request
+from collections import defaultdict
+from datetime import datetime, timezone
+from typing import Any, Dict, Optional
+
+from fastapi import APIRouter, Depends, Request
 from fastapi.responses import HTMLResponse
 from fastapi.templating import Jinja2Templates
+from sqlalchemy.orm import Session
+
+from models.parameters import Parameter
+from models.scenario import Scenario
+from routes.dependencies import get_db
 
 router = APIRouter()
 
@@ -8,13 +17,138 @@ router = APIRouter()
 templates = Jinja2Templates(directory="templates")
 
 
+def _context(request: Request, extra: Optional[Dict[str, Any]] = None) -> Dict[str, Any]:
+    payload: Dict[str, Any] = {
+        "request": request,
+        "current_year": datetime.now(timezone.utc).year,
+    }
+    if extra:
+        payload.update(extra)
+    return payload
+
+
+def _render(
+    request: Request,
+    template_name: str,
+    extra: Optional[Dict[str, Any]] = None,
+):
+    return templates.TemplateResponse(template_name, _context(request, extra))
+
+
+def _load_scenarios(db: Session) -> Dict[str, Any]:
+    scenarios: list[Dict[str, Any]] = [
+        {
+            "id": item.id,
+            "name": item.name,
+            "description": item.description,
+        }
+        for item in db.query(Scenario).order_by(Scenario.name).all()
+    ]
+    return {"scenarios": scenarios}
+
+
+def _load_parameters(db: Session) -> Dict[str, Any]:
+    grouped: defaultdict[int, list[Dict[str, Any]]] = defaultdict(list)
+    for param in db.query(Parameter).order_by(Parameter.scenario_id, Parameter.id):
+        grouped[param.scenario_id].append(
+            {
+                "id": param.id,
+                "name": param.name,
+                "value": param.value,
+                "distribution_type": param.distribution_type,
+                "distribution_parameters": param.distribution_parameters,
+            }
+        )
+    return {"parameters_by_scenario": dict(grouped)}
+
+
+def _load_costs(_: Session) -> Dict[str, Any]:
+    return {"capex_entries": [], "opex_entries": []}
+
+
+def _load_consumption(_: Session) -> Dict[str, Any]:
+    return {"consumption_records": []}
+
+
+def _load_production(_: Session) -> Dict[str, Any]:
+    return {"production_records": []}
+
+
+def _load_equipment(_: Session) -> Dict[str, Any]:
+    return {"equipment_items": []}
+
+
+def _load_maintenance(_: Session) -> Dict[str, Any]:
+    return {"maintenance_records": []}
+
+
+def _load_simulations(_: Session) -> Dict[str, Any]:
+    return {"simulation_runs": []}
+
+
+def _load_reporting(_: Session) -> Dict[str, Any]:
+    return {"report_summaries": []}
+
+
 @router.get("/ui/scenarios", response_class=HTMLResponse)
-async def scenario_form(request: Request):
+async def scenario_form(request: Request, db: Session = Depends(get_db)):
     """Render the scenario creation form."""
-    return templates.TemplateResponse("ScenarioForm.html", {"request": request})
+    context = _load_scenarios(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):
+async def parameter_form(request: Request, db: Session = Depends(get_db)):
     """Render the parameter input form."""
-    return templates.TemplateResponse("ParameterInput.html", {"request": request})
+    context: Dict[str, Any] = {}
+    context.update(_load_scenarios(db))
+    context.update(_load_parameters(db))
+    return _render(request, "ParameterInput.html", context)
+
+
+@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))
+
+
+@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))
+
+
+@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))
+
+
+@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))
+
+
+@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))
+
+
+@router.get("/ui/simulations", response_class=HTMLResponse)
+async def simulations_view(request: Request, db: Session = Depends(get_db)):
+    """Render the simulations placeholder view."""
+    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."""
+    return _render(request, "reporting.html", _load_reporting(db))
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..26cbc2f
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,209 @@
+body {
+  margin: 0;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f4f5f7;
+  color: #1f2933;
+}
+
+.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);
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.site-title {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.site-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.site-nav a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.site-nav a:hover,
+.site-nav a:focus {
+  text-decoration: underline;
+}
+
+main.container {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.panel {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+  margin-bottom: 2rem;
+}
+
+.form-grid {
+  display: grid;
+  gap: 1rem;
+  max-width: 480px;
+}
+
+.form-grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.form-grid input,
+.form-grid textarea,
+.form-grid select {
+  padding: 0.6rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  font-size: 1rem;
+}
+
+.form-grid input:focus,
+.form-grid textarea:focus,
+.form-grid select:focus {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.25rem;
+  border-radius: 999px;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  background-color: #e2e8f0;
+  color: #0f172a;
+  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);
+}
+
+.btn.primary {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+.btn.primary:hover,
+.btn.primary:focus {
+  background-color: #1d4ed8;
+}
+
+.result-output {
+  background-color: #0f172a;
+  color: #f8fafc;
+  padding: 1rem;
+  border-radius: 8px;
+  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  overflow-x: auto;
+  margin-top: 1.5rem;
+}
+
+.monospace-input {
+  width: 100%;
+  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  min-height: 120px;
+}
+
+.button-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+.table-container {
+  margin-top: 1.5rem;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: #f8fafc;
+}
+
+thead {
+  background-color: #0b3d91;
+  color: #ffffff;
+}
+
+th,
+td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #eef2ff;
+}
+
+.empty-state {
+  margin-top: 1.5rem;
+  color: #64748b;
+  font-style: italic;
+}
+
+.hidden {
+  display: none;
+}
+
+.feedback {
+  margin-top: 1rem;
+  font-weight: 600;
+}
+
+.feedback.success {
+  color: #047857;
+}
+
+.feedback.error {
+  color: #b91c1c;
+}
+
+.site-footer {
+  background-color: #0b3d91;
+  color: #ffffff;
+  margin-top: 3rem;
+}
+
+.footer-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
+  font-size: 0.9rem;
+}
diff --git a/templates/Dashboard.html b/templates/Dashboard.html
index 30f4eab..fecdcf5 100644
--- a/templates/Dashboard.html
+++ b/templates/Dashboard.html
@@ -1,277 +1,261 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>CalMiner Dashboard</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 2rem;
-        background-color: #f4f5f7;
-        color: #1f2933;
+{% 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>
+    <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>
+</div>
+{% endblock %} {% block scripts %} {{ super() }}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></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");
+    }
+
+    return response.json();
+  }
+
+  function getResultsFromInput() {
+    const textarea = document.getElementById("results-input");
+    try {
+      const parsed = JSON.parse(textarea.value || "[]");
+      if (!Array.isArray(parsed)) {
+        throw new Error("Input must be a JSON array");
       }
-      h1 {
-        font-size: 2rem;
-        margin-bottom: 1rem;
-      }
-      .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>
-  </head>
-  <body>
-    <h1>Simulation Results Dashboard</h1>
-    <div class="summary-card">
-      <h2>Summary Statistics</h2>
-      <div id="summary-grid" class="summary-grid"></div>
-      <p id="error-message" hidden></p>
-    </div>
-    <div class="summary-card">
-      <h2>Sample Results Input</h2>
-      <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"
-        style="width: 100%; font-family: monospace"
-      ></textarea>
-      <div style="margin-top: 1rem; display: flex; gap: 0.5rem">
-        <button id="load-sample" type="button">Load Sample Data</button>
-        <button id="refresh-dashboard" type="button">Refresh Dashboard</button>
-      </div>
-    </div>
-    <div id="chart-container">
-      <h2>Result Distribution</h2>
-      <canvas id="summary-chart" height="120"></canvas>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></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%)",
+      return parsed;
+    } catch (error) {
+      throw new Error(`Invalid JSON input: ${error.message}`);
+    }
+  }
+
+  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 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);
+
+    if (chartInstance) {
+      chartInstance.destroy();
+    }
+
+    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,
+          },
+        ],
+      },
+      options: {
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            callbacks: {
+              afterBody: () => tailRiskLines,
+            },
+          },
         },
-      ];
-
-      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");
-        }
-
-        return response.json();
-      }
-
-      function getResultsFromInput() {
-        const textarea = document.getElementById("results-input");
-        try {
-          const parsed = JSON.parse(textarea.value || "[]");
-          if (!Array.isArray(parsed)) {
-            throw new Error("Input must be a JSON array");
-          }
-          return parsed;
-        } catch (error) {
-          throw new Error(`Invalid JSON input: ${error.message}`);
-        }
-      }
-
-      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 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);
-
-        if (chartInstance) {
-          chartInstance.destroy();
-        }
-
-        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,
-              },
-            ],
+        scales: {
+          y: {
+            beginAtZero: true,
           },
-          options: {
-            plugins: {
-              legend: { display: false },
-              tooltip: {
-                callbacks: {
-                  afterBody: () => tailRiskLines,
-                },
-              },
-            },
-            scales: {
-              y: {
-                beginAtZero: true,
-              },
-            },
-          },
-        });
+        },
+      },
+    });
+  }
+
+  function showError(message) {
+    const errorElement = document.getElementById("error-message");
+    errorElement.textContent = message;
+    errorElement.hidden = false;
+  }
+
+  function attachHandlers() {
+    const loadSampleButton = document.getElementById("load-sample");
+    const refreshButton = document.getElementById("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 () => {
+      try {
+        const results = getResultsFromInput();
+        const summary = await fetchSummary(results);
+        renderSummary(summary);
+        renderChart(summary);
+        document.getElementById("error-message").hidden = true;
+      } catch (error) {
+        console.error(error);
+        showError(error.message);
       }
+    });
 
-      function showError(message) {
-        const errorElement = document.getElementById("error-message");
-        errorElement.textContent = message;
-        errorElement.hidden = false;
-      }
+    document.getElementById("results-input").value = sampleData;
+  }
 
-      function attachHandlers() {
-        const loadSampleButton = document.getElementById("load-sample");
-        const refreshButton = document.getElementById("refresh-dashboard");
+  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);
+    }
+  }
 
-        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 () => {
-          try {
-            const results = getResultsFromInput();
-            const summary = await fetchSummary(results);
-            renderSummary(summary);
-            renderChart(summary);
-            document.getElementById("error-message").hidden = true;
-          } catch (error) {
-            console.error(error);
-            showError(error.message);
-          }
-        });
-
-        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();
-    </script>
-  </body>
-</html>
+  initializeDashboard();
+</script>
+{% endblock %}
diff --git a/templates/ParameterInput.html b/templates/ParameterInput.html
index 348fc12..245c726 100644
--- a/templates/ParameterInput.html
+++ b/templates/ParameterInput.html
@@ -1,50 +1,168 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Process Parameters Input</title>
-  </head>
-  <body>
-    <h1>Enter Parameters for a Scenario</h1>
-    <form id="parameter-form">
-      <label
-        >Scenario ID:
-        <input
-          type="number"
-          name="scenario_id"
-          id="scenario_id"
-          required /></label
-      ><br />
-      <label>Name: <input type="text" name="name" id="name" required /></label
-      ><br />
-      <label
-        >Value:
-        <input
-          type="number"
-          name="value"
-          id="value"
-          step="any"
-          required /></label
-      ><br />
-      <button type="submit">Add Parameter</button>
-    </form>
-    <div id="result"></div>
-    <script>
-      document
-        .getElementById("parameter-form")
-        .addEventListener("submit", async (e) => {
-          e.preventDefault();
-          const scenario_id = document.getElementById("scenario_id").value;
-          const name = document.getElementById("name").value;
-          const value = parseFloat(document.getElementById("value").value);
-          const resp = await fetch("/api/parameters/", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ scenario_id, name, value }),
-          });
-          const data = await resp.json();
-          document.getElementById("result").innerText = JSON.stringify(data);
-        });
-    </script>
-  </body>
-</html>
+{% extends "base.html" %} {% block title %}Process Parameters · CalMiner{%
+endblock %} {% block content %}
+<section class="panel">
+  <h2>Scenario Parameters</h2>
+  {% if scenarios %}
+  <form id="parameter-form" class="form-grid">
+    <label>
+      <span>Scenario</span>
+      <select name="scenario_id" id="scenario_id">
+        {% for scenario in scenarios %}
+        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label>
+      <span>Name</span>
+      <input type="text" name="name" id="name" required />
+    </label>
+    <label>
+      <span>Value</span>
+      <input type="number" name="value" id="value" step="any" required />
+    </label>
+    <button type="submit" class="btn primary">Add Parameter</button>
+  </form>
+  <p id="parameter-feedback" class="feedback" role="status"></p>
+  <div class="table-container">
+    <table id="parameter-table">
+      <thead>
+        <tr>
+          <th scope="col">Parameter</th>
+          <th scope="col">Value</th>
+          <th scope="col">Distribution</th>
+          <th scope="col">Details</th>
+        </tr>
+      </thead>
+      <tbody id="parameter-table-body"></tbody>
+    </table>
+  </div>
+  {% else %}
+  <p class="empty-state">
+    No scenarios available. Create a scenario before adding parameters.
+  </p>
+  {% endif %}
+</section>
+{% endblock %} {% block scripts %} {{ super() }}
+<script id="parameters-data" type="application/json">
+  {{ parameters_by_scenario | tojson | safe }}
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dataElement = document.getElementById("parameters-data");
+    const parsedData = dataElement
+      ? JSON.parse(dataElement.textContent || "{}")
+      : {};
+    const parametersByScenario =
+      parsedData && typeof parsedData === "object" ? parsedData : {};
+    const form = document.getElementById("parameter-form");
+    const scenarioSelect = /** @type {HTMLSelectElement | null} */ (
+      document.getElementById("scenario_id")
+    );
+    const nameInput = /** @type {HTMLInputElement | null} */ (
+      document.getElementById("name")
+    );
+    const valueInput = /** @type {HTMLInputElement | null} */ (
+      document.getElementById("value")
+    );
+    const feedback = document.getElementById("parameter-feedback");
+    const tableBody = document.getElementById("parameter-table-body");
+
+    const setFeedback = (message, variant) => {
+      if (!feedback) {
+        return;
+      }
+      feedback.textContent = message;
+      feedback.classList.remove("success", "error");
+      if (variant) {
+        feedback.classList.add(variant);
+      }
+    };
+
+    const renderTable = (scenarioId) => {
+      if (!tableBody) {
+        return;
+      }
+      tableBody.innerHTML = "";
+      const rows = parametersByScenario[String(scenarioId)] || [];
+      if (!rows.length) {
+        const emptyRow = document.createElement("tr");
+        emptyRow.id = "parameter-empty-state";
+        emptyRow.innerHTML =
+          '<td colspan="4">No parameters recorded for this scenario yet.</td>';
+        tableBody.appendChild(emptyRow);
+        return;
+      }
+      rows.forEach((row) => {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `
+          <td>${row.name}</td>
+          <td>${row.value}</td>
+          <td>${row.distribution_type ?? "—"}</td>
+          <td>${
+            row.distribution_parameters
+              ? JSON.stringify(row.distribution_parameters)
+              : "—"
+          }</td>
+        `;
+        tableBody.appendChild(tr);
+      });
+    };
+
+    if (scenarioSelect) {
+      renderTable(scenarioSelect.value);
+      scenarioSelect.addEventListener("change", () =>
+        renderTable(scenarioSelect.value)
+      );
+    }
+
+    if (!form || !scenarioSelect || !nameInput || !valueInput) {
+      return;
+    }
+
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+
+      const scenarioId = scenarioSelect.value;
+      const payload = {
+        scenario_id: Number(scenarioId),
+        name: nameInput.value.trim(),
+        value: Number(valueInput.value),
+      };
+
+      if (!payload.name) {
+        setFeedback("Parameter name is required.", "error");
+        return;
+      }
+
+      if (!Number.isFinite(payload.value)) {
+        setFeedback("Enter a numeric value.", "error");
+        return;
+      }
+
+      const response = await fetch("/api/parameters/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        setFeedback(`Error saving parameter: ${errorText}`, "error");
+        return;
+      }
+
+      const data = await response.json();
+      const scenarioKey = String(scenarioId);
+      parametersByScenario[scenarioKey] =
+        parametersByScenario[scenarioKey] || [];
+      parametersByScenario[scenarioKey].push(data);
+
+      form.reset();
+      scenarioSelect.value = scenarioKey;
+      renderTable(scenarioKey);
+      nameInput.focus();
+      setFeedback("Parameter saved.", "success");
+    });
+  });
+</script>
+{% endblock %}
diff --git a/templates/ScenarioForm.html b/templates/ScenarioForm.html
index c0412de..e659749 100644
--- a/templates/ScenarioForm.html
+++ b/templates/ScenarioForm.html
@@ -1,36 +1,114 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Scenario Management</title>
-  </head>
-  <body>
-    <h1>Create a New Scenario</h1>
-    <form id="scenario-form">
-      <label>Name: <input type="text" name="name" id="name" required /></label
-      ><br />
-      <label
-        >Description:
-        <input type="text" name="description" id="description" /></label
-      ><br />
-      <button type="submit">Create Scenario</button>
-    </form>
-    <div id="result"></div>
-    <script>
-      document
-        .getElementById("scenario-form")
-        .addEventListener("submit", async (e) => {
-          e.preventDefault();
-          const name = document.getElementById("name").value;
-          const description = document.getElementById("description").value;
-          const resp = await fetch("/api/scenarios/", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ name, description }),
-          });
-          const data = await resp.json();
-          document.getElementById("result").innerText = JSON.stringify(data);
-        });
-    </script>
-  </body>
-</html>
+{% extends "base.html" %} {% block title %}Scenario Management · CalMiner{%
+endblock %} {% block content %}
+<section class="panel">
+  <h2>Create a New Scenario</h2>
+  <form id="scenario-form" class="form-grid">
+    <label>
+      <span>Name</span>
+      <input type="text" name="name" id="name" required />
+    </label>
+    <label>
+      <span>Description</span>
+      <input type="text" name="description" id="description" />
+    </label>
+    <button type="submit" class="btn primary">Create Scenario</button>
+  </form>
+  <div class="table-container">
+    {% if scenarios %}
+    <table id="scenario-table">
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="scenario-table-body">
+        {% for scenario in scenarios %}
+        <tr data-scenario-id="{{ scenario.id }}">
+          <td>{{ scenario.name }}</td>
+          <td>{{ scenario.description or "—" }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% else %}
+    <p id="empty-state" class="empty-state">
+      No scenarios yet. Create one to get started.
+    </p>
+    <table id="scenario-table" class="hidden" aria-hidden="true">
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="scenario-table-body"></tbody>
+    </table>
+    {% endif %}
+  </div>
+</section>
+{% endblock %} {% block scripts %} {{ super() }}
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("scenario-form");
+    const nameInput = /** @type {HTMLInputElement} */ (
+      document.getElementById("name")
+    );
+    const descriptionInput = /** @type {HTMLInputElement} */ (
+      document.getElementById("description")
+    );
+    const table = document.getElementById("scenario-table");
+    const tableBody = document.getElementById("scenario-table-body");
+    const emptyState = document.getElementById("empty-state");
+
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+
+      const payload = {
+        name: nameInput.value.trim(),
+        description: descriptionInput.value.trim() || null,
+      };
+
+      if (!payload.name) {
+        return;
+      }
+
+      const response = await fetch("/api/scenarios/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error("Scenario creation failed", errorText);
+        return;
+      }
+
+      const data = await response.json();
+      const row = document.createElement("tr");
+      row.dataset.scenarioId = String(data.id);
+      row.innerHTML = `
+        <td>${data.name}</td>
+        <td>${data.description ?? "—"}</td>
+      `;
+
+      if (emptyState) {
+        emptyState.remove();
+      }
+
+      if (table) {
+        table.classList.remove("hidden");
+        table.removeAttribute("aria-hidden");
+      }
+
+      if (tableBody) {
+        tableBody.appendChild(row);
+      }
+
+      form.reset();
+      nameInput.focus();
+    });
+  });
+</script>
+{% endblock %}
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..ec15084
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}CalMiner{% endblock %}</title>
+    <link rel="stylesheet" href="/static/css/main.css" />
+    {% 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 %}
+  </body>
+</html>
diff --git a/templates/consumption.html b/templates/consumption.html
new file mode 100644
index 0000000..a19fc0e
--- /dev/null
+++ b/templates/consumption.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}
diff --git a/templates/costs.html b/templates/costs.html
new file mode 100644
index 0000000..e90b315
--- /dev/null
+++ b/templates/costs.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}
diff --git a/templates/equipment.html b/templates/equipment.html
new file mode 100644
index 0000000..2212c2e
--- /dev/null
+++ b/templates/equipment.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}
diff --git a/templates/maintenance.html b/templates/maintenance.html
new file mode 100644
index 0000000..2eb1c34
--- /dev/null
+++ b/templates/maintenance.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}
diff --git a/templates/partials/base_footer.html b/templates/partials/base_footer.html
new file mode 100644
index 0000000..1d204e0
--- /dev/null
+++ b/templates/partials/base_footer.html
@@ -0,0 +1,5 @@
+<footer class="site-footer">
+  <div class="container footer-inner">
+    <p>&copy; {{ current_year }} CalMiner. All rights reserved.</p>
+  </div>
+</footer>
diff --git a/templates/partials/base_header.html b/templates/partials/base_header.html
new file mode 100644
index 0000000..aff5df1
--- /dev/null
+++ b/templates/partials/base_header.html
@@ -0,0 +1,17 @@
+<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>
+  </div>
+</header>
diff --git a/templates/production.html b/templates/production.html
new file mode 100644
index 0000000..959033e
--- /dev/null
+++ b/templates/production.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}
diff --git a/templates/reporting.html b/templates/reporting.html
new file mode 100644
index 0000000..4a703c2
--- /dev/null
+++ b/templates/reporting.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}
diff --git a/templates/simulations.html b/templates/simulations.html
new file mode 100644
index 0000000..e9e66d1
--- /dev/null
+++ b/templates/simulations.html
@@ -0,0 +1,8 @@
+{% 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>
+{% endblock %}