diff --git a/metric_visualization/js/app.js b/metric_visualization/js/app.js
new file mode 100644
index 0000000..1f17e0e
--- /dev/null
+++ b/metric_visualization/js/app.js
@@ -0,0 +1,106 @@
+'use strict';
+
+/**
+ * Initialisiert die Anwendung, lädt Daten über API und ruft UI-Rendering-Module auf.
+ * Modul: initApp
+ */
+async function initApp() {
+  try {
+    const response = await fetch('/api/analysis');
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status}`);
+    }
+
+    const analysisData = await response.json();
+    if (!Array.isArray(analysisData)) {
+      throw new Error('Ungültiges Datenschema der Antwort');
+    }
+
+    renderAnalysisDashboard(analysisData);
+    bindEvents();
+  } catch (error) {
+    console.error('Fehler bei der Initialisierung:', error);
+    const errorContainer = document.getElementById('error-container');
+    if (errorContainer) {
+      errorContainer.textContent = 'Fehler beim Laden der Analysedaten.';
+      errorContainer.setAttribute('role', 'alert');
+    }
+  }
+}
+
+/**
+ * Bindet Event-Listener an Filter und UI-Elemente.
+ * Modul: bindEvents
+ */
+function bindEvents() {
+  const filterDeltaNeg = document.getElementById('filter-delta-neg');
+  const resetButton = document.getElementById('reset-filters');
+
+  if (filterDeltaNeg) {
+    filterDeltaNeg.addEventListener('change', event => {
+      const isActive = event.target.checked;
+      const allRows = document.querySelectorAll('.metric__row');
+      allRows.forEach(row => {
+        const delta = parseFloat(row.dataset.deltaT);
+        if (isActive && delta >= 0) {
+          row.classList.add('hidden');
+        } else {
+          row.classList.remove('hidden');
+        }
+      });
+    });
+  }
+
+  if (resetButton) {
+    resetButton.addEventListener('click', () => {
+      document.querySelectorAll('.hidden').forEach(row => row.classList.remove('hidden'));
+      if (filterDeltaNeg) filterDeltaNeg.checked = false;
+    });
+  }
+}
+
+/**
+ * Rendert das Dashboard basierend auf den Analysedaten.
+ * @param {Array<Object>} data - Array mit Analyse-Ergebnissen
+ */
+function renderAnalysisDashboard(data) {
+  const container = document.getElementById('analysis-dashboard');
+  if (!container) return;
+  container.innerHTML = '';
+
+  data.forEach(item => {
+    const row = document.createElement('div');
+    row.className = 'metric__row';
+    row.dataset.deltaT = item.delta_t;
+
+    const runIdEl = document.createElement('span');
+    runIdEl.className = 'metric__run-id';
+    runIdEl.textContent = `Run: ${item.run_id}`;
+
+    const deltaEl = document.createElement('span');
+    deltaEl.className = 'metric__delta';
+    deltaEl.textContent = `${item.delta_t.toFixed(3)} s`;
+
+    const warnEl = document.createElement('span');
+    warnEl.className = 'metric__warn-rate';
+    warnEl.textContent = `Warn: ${(item.warn_rate * 100).toFixed(2)}%`;
+
+    const unknownEl = document.createElement('span');
+    unknownEl.className = 'metric__unknown-rate';
+    unknownEl.textContent = `Unknown: ${(item.unknown_rate * 100).toFixed(2)}%`;
+
+    if (item.delta_t < 0) {
+      row.classList.add('metric__row--negative');
+      row.title = 'Δt < 0 - Auffälliger Wert';
+    }
+
+    row.appendChild(runIdEl);
+    row.appendChild(deltaEl);
+    row.appendChild(warnEl);
+    row.appendChild(unknownEl);
+
+    container.appendChild(row);
+  });
+}
+
+window.addEventListener('load', initApp);
\ No newline at end of file