diff --git a/crates/server/src/routes/dashboard.rs b/crates/server/src/routes/dashboard.rs
index 7a4408a..bbbbf3b 100644
--- a/crates/server/src/routes/dashboard.rs
+++ b/crates/server/src/routes/dashboard.rs
@@ -423,6 +423,13 @@ struct StarredTemplate {
   auth_name:    String,
 }
 
+#[derive(Template)]
+#[template(path = "metrics.html")]
+struct MetricsTemplate {
+  is_admin:  bool,
+  auth_name: String,
+}
+
 // --- Handlers ---
 
 async fn home(
@@ -1565,6 +1572,18 @@ async fn starred_page(
   )
 }
 
+async fn metrics_page(extensions: Extensions) -> Html<String> {
+  let tmpl = MetricsTemplate {
+    is_admin:  is_admin(&extensions),
+    auth_name: auth_name(&extensions),
+  };
+  Html(
+    tmpl
+      .render()
+      .unwrap_or_else(|e| format!("Template error: {e}")),
+  )
+}
+
 pub fn router() -> Router<AppState> {
   Router::new()
     .route("/login", get(login_page).post(login_action))
@@ -1583,4 +1602,5 @@ pub fn router() -> Router<AppState> {
     .route("/admin", get(admin_page))
     .route("/users", get(users_page))
     .route("/starred", get(starred_page))
+    .route("/metrics", get(metrics_page))
 }
diff --git a/crates/server/templates/base.html b/crates/server/templates/base.html
index f120e85..59f8c22 100644
--- a/crates/server/templates/base.html
+++ b/crates/server/templates/base.html
@@ -16,6 +16,7 @@
       <a href="/queue">Queue</a>
       <a href="/channels">Channels</a>
       <a href="/starred">Starred</a>
+      <a href="/metrics">Metrics</a>
       <a href="/users">Users</a>
       <a href="/admin">Admin</a>
     </div>
diff --git a/crates/server/templates/metrics.html b/crates/server/templates/metrics.html
new file mode 100644
index 0000000..0caf835
--- /dev/null
+++ b/crates/server/templates/metrics.html
@@ -0,0 +1,407 @@
+{% extends "base.html" %}
+
+{% block title %}Metrics - FC CI{% endblock %}
+
+{% block auth %}
+{% if !auth_name.is_empty() %}
+<span class="auth-user">{{ auth_name }}</span>
+<form method="POST" action="/logout"><button type="submit">Logout</button></form>
+{% else %}
+<a href="/login">Login</a>
+{% endif %}
+{% endblock %}
+
+{% block content %}
+<h1>Build Metrics Dashboard</h1>
+
+{% if is_admin %}
+<p class="admin-notice">Showing system-wide metrics. Filter by project below to view specific metrics.</p>
+{% endif %}
+
+<div class="metrics-controls">
+  <label for="time-range">Time Range:</label>
+  <select id="time-range">
+    <option value="24">Last 24 hours</option>
+    <option value="48">Last 48 hours</option>
+    <option value="168">Last 7 days</option>
+  </select>
+
+  <label for="project-filter">Project:</label>
+  <select id="project-filter">
+    <option value="">All Projects</option>
+  </select>
+</div>
+
+<div class="metrics-grid">
+  <div class="metric-card">
+    <h3>Build Counts Over Time</h3>
+    <canvas id="builds-chart"></canvas>
+  </div>
+
+  <div class="metric-card">
+    <h3>Build Duration Percentiles</h3>
+    <canvas id="duration-chart"></canvas>
+  </div>
+
+  <div class="metric-card">
+    <h3>Builds by System</h3>
+    <canvas id="systems-chart"></canvas>
+  </div>
+
+  <div class="metric-card">
+    <h3>Success Rate Trend</h3>
+    <canvas id="success-rate-chart"></canvas>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script
+  src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"
+  integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ"
+  crossorigin="anonymous">
+</script>
+<script>
+// Configuration
+const API_BASE = '/api/v1/metrics';
+let currentHours = 24;
+let currentProjectId = null;
+
+// Chart instances
+let buildsChart, durationChart, systemsChart, successRateChart;
+
+// Initialize charts on page load
+document.addEventListener('DOMContentLoaded', function() {
+  initCharts();
+  loadData();
+  setupEventListeners();
+  loadProjects();
+});
+
+function setupEventListeners() {
+  document.getElementById('time-range').addEventListener('change', function(e) {
+    currentHours = parseInt(e.target.value);
+    loadData();
+  });
+
+  document.getElementById('project-filter').addEventListener('change', function(e) {
+    currentProjectId = e.target.value || null;
+    loadData();
+  });
+}
+
+async function loadProjects() {
+  try {
+    const response = await fetch('/api/v1/projects');
+    const data = await response.json();
+    const select = document.getElementById('project-filter');
+
+    data.data.forEach(project => {
+      const option = document.createElement('option');
+      option.value = project.id;
+      option.textContent = project.name;
+      select.appendChild(option);
+    });
+  } catch (error) {
+    console.error('Failed to load projects:', error);
+  }
+}
+
+async function loadData() {
+  const params = new URLSearchParams();
+  params.set('hours', currentHours);
+  params.set('bucket', 60);
+  if (currentProjectId) {
+    params.set('project_id', currentProjectId);
+  }
+
+  try {
+    // Load build stats
+    const buildsResponse = await fetch(`${API_BASE}/timeseries/builds?${params}`);
+    const buildsData = await buildsResponse.json();
+    updateBuildsChart(buildsData);
+    updateSuccessRateChart(buildsData);
+
+    // Load duration percentiles
+    const durationResponse = await fetch(`${API_BASE}/timeseries/duration?${params}`);
+    const durationData = await durationResponse.json();
+    updateDurationChart(durationData);
+
+    // Load system distribution
+    const systemsResponse = await fetch(`${API_BASE}/systems?${params}`);
+    const systemsData = await systemsResponse.json();
+    updateSystemsChart(systemsData);
+  } catch (error) {
+    console.error('Failed to load metrics data:', error);
+    showError(document.querySelector('.metrics-grid'), 'Failed to load metrics data. Please try again later.');
+  }
+}
+
+function initCharts() {
+  Chart.defaults.font.family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+  Chart.defaults.color = '#666';
+
+  // Build counts chart
+  const buildsCtx = document.getElementById('builds-chart').getContext('2d');
+  buildsChart = new Chart(buildsCtx, {
+    type: 'bar',
+    data: {
+      labels: [],
+      datasets: [
+        {
+          label: 'Successful',
+          data: [],
+          backgroundColor: '#28a745',
+          borderRadius: 4
+        },
+        {
+          label: 'Failed',
+          data: [],
+          backgroundColor: '#dc3545',
+          borderRadius: 4
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          stacked: true,
+          grid: { display: false }
+        },
+        y: {
+          stacked: true,
+          beginAtZero: true,
+          ticks: { stepSize: 1 }
+        }
+      },
+      plugins: {
+        legend: { position: 'top' }
+      }
+    }
+  });
+
+  // Duration percentiles chart
+  const durationCtx = document.getElementById('duration-chart').getContext('2d');
+  durationChart = new Chart(durationCtx, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [
+        {
+          label: 'P50 (Median)',
+          data: [],
+          borderColor: '#007bff',
+          backgroundColor: 'rgba(0, 123, 255, 0.1)',
+          fill: true,
+          tension: 0.3
+        },
+        {
+          label: 'P95',
+          data: [],
+          borderColor: '#ffc107',
+          backgroundColor: 'rgba(255, 193, 7, 0.1)',
+          fill: true,
+          tension: 0.3
+        },
+        {
+          label: 'P99',
+          data: [],
+          borderColor: '#dc3545',
+          backgroundColor: 'rgba(220, 53, 69, 0.1)',
+          fill: true,
+          tension: 0.3
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: 'Duration (seconds)'
+          }
+        }
+      },
+      plugins: {
+        legend: { position: 'top' }
+      }
+    }
+  });
+
+  // Systems chart
+  const systemsCtx = document.getElementById('systems-chart').getContext('2d');
+  systemsChart = new Chart(systemsCtx, {
+    type: 'doughnut',
+    data: {
+      labels: [],
+      datasets: [{
+        data: [],
+        backgroundColor: [
+          '#007bff',
+          '#28a745',
+          '#ffc107',
+          '#dc3545',
+          '#6f42c1',
+          '#20c997',
+          '#fd7e14',
+          '#e83e8c'
+        ]
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { position: 'right' }
+      }
+    }
+  });
+
+  // Success rate chart
+  const successCtx = document.getElementById('success-rate-chart').getContext('2d');
+  successRateChart = new Chart(successCtx, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [{
+        label: 'Success Rate (%)',
+        data: [],
+        borderColor: '#28a745',
+        backgroundColor: 'rgba(40, 167, 69, 0.1)',
+        fill: true,
+        tension: 0.3
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          beginAtZero: true,
+          max: 100,
+          ticks: {
+            callback: function(value) {
+              return value + '%';
+            }
+          }
+        }
+      },
+      plugins: {
+        legend: { position: 'top' }
+      }
+    }
+  });
+}
+
+function updateBuildsChart(data) {
+  const labels = data.timestamps.map(t => {
+    const date = new Date(t);
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  });
+
+  const successful = data.total.map((total, i) => total - data.failed[i]);
+
+  buildsChart.data.labels = labels;
+  buildsChart.data.datasets[0].data = successful;
+  buildsChart.data.datasets[1].data = data.failed;
+  buildsChart.update();
+}
+
+function updateDurationChart(data) {
+  const labels = data.timestamps.map(t => {
+    const date = new Date(t);
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  });
+
+  durationChart.data.labels = labels;
+  durationChart.data.datasets[0].data = data.p50;
+  durationChart.data.datasets[1].data = data.p95;
+  durationChart.data.datasets[2].data = data.p99;
+  durationChart.update();
+}
+
+function updateSystemsChart(data) {
+  systemsChart.data.labels = data.systems;
+  systemsChart.data.datasets[0].data = data.counts;
+  systemsChart.update();
+}
+
+function updateSuccessRateChart(data) {
+  const labels = data.timestamps.map(t => {
+    const date = new Date(t);
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  });
+
+  const successRates = data.total.map((total, i) => {
+    if (total === 0) return 0;
+    return ((total - data.failed[i]) / total * 100).toFixed(1);
+  });
+
+  successRateChart.data.labels = labels;
+  successRateChart.data.datasets[0].data = successRates;
+  successRateChart.update();
+}
+</script>
+
+<style>
+.metrics-controls {
+  background: #f8f9fa;
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.metrics-controls label {
+  font-weight: 600;
+  color: #495057;
+}
+
+.metrics-controls select {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  background-color: #fff;
+  font-size: 0.875rem;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1.5rem;
+}
+
+.metric-card {
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.metric-card h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
+  color: #212529;
+}
+
+.metric-card canvas {
+  max-height: 300px;
+}
+
+@media (max-width: 768px) {
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
+{% endblock %}