diff --git a/drift_matrix_visualization/js/app.js b/drift_matrix_visualization/js/app.js
new file mode 100644
index 0000000..44e4ec2
--- /dev/null
+++ b/drift_matrix_visualization/js/app.js
@@ -0,0 +1,52 @@
+import { fetchDriftMatrix } from './api.js';
+import { renderMatrix } from './matrixRenderer.js';
+
+/**
+ * Initialisiert die Anwendung, lädt initiale Matrix-Daten, bindet Events.
+ * Wird aufgerufen, wenn das Fenster geladen ist.
+ */
+export async function initApp() {
+  const runSelector = document.getElementById('run-selector');
+  const matrixContainer = document.getElementById('matrix-container');
+
+  if (!runSelector || !matrixContainer) {
+    console.error('App initialisierung fehlgeschlagen: DOM-Elemente fehlen.');
+    return;
+  }
+
+  runSelector.addEventListener('change', handleRunChange);
+
+  const initialRunId = runSelector.value ?? '';
+  await loadAndRenderMatrix(initialRunId);
+}
+
+/**
+ * Lädt neue Matrix-Daten und rendert sie.
+ * @param {string} runId
+ */
+async function loadAndRenderMatrix(runId) {
+  const matrixContainer = document.getElementById('matrix-container');
+  matrixContainer.setAttribute('aria-busy', 'true');
+
+  try {
+    const matrixData = await fetchDriftMatrix(runId);
+    renderMatrix(matrixData);
+  } catch (error) {
+    console.error('Fehler beim Laden der Drift-Matrix:', error);
+    matrixContainer.innerHTML = '<p role="alert">Fehler beim Laden der Matrix-Daten.</p>';
+  } finally {
+    matrixContainer.setAttribute('aria-busy', 'false');
+  }
+}
+
+/**
+ * Reagiert auf Änderung der Run-Auswahl und lädt neue Matrix-Daten.
+ * @param {Event} event
+ */
+export async function handleRunChange(event) {
+  const runId = event.target.value;
+  await loadAndRenderMatrix(runId);
+}
+
+// Initialisierung beim Laden
+window.addEventListener('load', initApp);
\ No newline at end of file