diff --git a/metric_visualization/js/ui.js b/metric_visualization/js/ui.js
new file mode 100644
index 0000000..96299b7
--- /dev/null
+++ b/metric_visualization/js/ui.js
@@ -0,0 +1,63 @@
+/**
+ * UI Renderer Module for Metric Visualization
+ * Verantwortlich für DOM-Updates und Darstellung von Summary und Tabelle
+ * © 2026 Donau2Space.de
+ */
+
+/**
+ * Rendert die Zusammenfassungspanel-Informationen.
+ * @param {Array} data - Analyse-Daten [{run_id, t_index_visible, t_gate_read, delta_t, warn_rate, unknown_rate}]
+ */
+export function renderSummarySection(data = []) {
+  const container = document.getElementById('summary-section');
+  if (!container) return;
+
+  const totalRuns = data.length;
+  const deltaNegCount = data.filter(d => d.delta_t < 0).length;
+
+  const avgWarnRate = totalRuns === 0 ? 0 : data.reduce((acc, d) => acc + (d.warn_rate ?? 0), 0) / totalRuns;
+  const avgUnknownRate = totalRuns === 0 ? 0 : data.reduce((acc, d) => acc + (d.unknown_rate ?? 0), 0) / totalRuns;
+
+  container.innerHTML = '';
+
+  const summaryHtml = `
+    <div class="summary__item"><strong>Runs:</strong> ${totalRuns}</div>
+    <div class="summary__item"><strong>Δt < 0 Count:</strong> ${deltaNegCount}</div>
+    <div class="summary__item"><strong>Ø Warn Rate:</strong> ${(avgWarnRate * 100).toFixed(2)}%</div>
+    <div class="summary__item"><strong>Ø Unknown Rate:</strong> ${(avgUnknownRate * 100).toFixed(2)}%</div>
+  `;
+
+  container.insertAdjacentHTML('beforeend', summaryHtml);
+}
+
+/**
+ * Befüllt Tabelle mit individuellen Run-Metriken.
+ * @param {Array} data - Analyse-Daten [{run_id, t_index_visible, t_gate_read, delta_t, warn_rate, unknown_rate}]
+ */
+export function renderDataTable(data = []) {
+  const table = document.getElementById('data-table');
+  if (!table) return;
+
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+
+  tbody.innerHTML = '';
+
+  const rows = data.map(d => {
+    const isDeltaNeg = d.delta_t < 0;
+    const rowClass = isDeltaNeg ? 'data-table__row--negative' : '';
+
+    return `
+      <tr class="data-table__row ${rowClass}" aria-label="Run ${d.run_id}">
+        <td>${d.run_id}</td>
+        <td>${d.t_index_visible}</td>
+        <td>${d.t_gate_read}</td>
+        <td>${d.delta_t}</td>
+        <td>${(d.warn_rate * 100).toFixed(2)}%</td>
+        <td>${(d.unknown_rate * 100).toFixed(2)}%</td>
+      </tr>
+    `;
+  }).join('');
+
+  tbody.insertAdjacentHTML('beforeend', rows);
+}