diff --git a/app/templates/index.html b/app/templates/index.html
index 3b83ce0..d118675 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -5,35 +5,101 @@
     <title>Gitea Sync AI 🧠</title>
     <style>
         body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
-        h1 { color: #333; }
+        h1, h3 { color: #333; }
         .repo-card { background: white; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
-        button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; }
+        .project-card { background: #e3f2fd; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
+        button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; margin-right: 5px; }
         .btn-subscribe { background: #007bff; color: white; }
-        .btn-push     { background: #28a745; color: white; }
+        .btn-unsubscribe { background: #dc3545; color: white; }
+        .btn-check { background: #28a745; color: white; }
         input, button { margin-top: 10px; }
+        .changes-warn { color: #dc3545; font-weight: bold; }
     </style>
 </head>
 <body>
 
 <h1>🧠 Gitea Sync AI – Dashboard</h1>
 
+<h3>Deine abonnierten Projekte:</h3>
+<div id="projects-list"></div>
+
+<hr style="margin: 20px 0; border: none; border-top: 1px solid #ccc;">
+
 <h3>Verfügbare Repositories:</h3>
 <div id="repos"></div>
 
 <script>
+async function loadProjects() {
+    const res = await fetch("/api/projects");
+    const data = await res.json();
+    const container = document.getElementById("projects-list");
+    container.innerHTML = "";
+
+    if (!data.projects || data.projects.length === 0) {
+        container.innerHTML = "<p>Keine abonnierten Projekte.</p>";
+        return;
+    }
+
+    data.projects.forEach(proj => {
+        const card = document.createElement("div");
+        card.className = "project-card";
+
+        const statusClass = proj.has_undiscovered_changes ? "changes-warn" : "";
+        const statusText = proj.has_undiscovered_changes ? "⚠️ Neue Changes erkannt!" : "✅ Up to date";
+
+        card.innerHTML = `
+            <strong>${proj.name}</strong>
+            <div style="font-size:12px; color:#666; margin:5px 0">
+                ${statusText} | ${proj.has_git ? '📦 Git' : '❓ Kein Git'}
+            </div>
+            <button class="btn-unsubscribe" onclick="unsubscribe('${proj.name}')">🗑️ Deabonieren</button>
+        `;
+
+        container.appendChild(card);
+    });
+}
+
+async function unsubscribe(name) {
+    if (!confirm(`Möchtest du '${name}' wirklich deabonnieren?\nDer komplette Ordner wird gelöscht!`)) {
+        return;
+    }
+
+    const res = await fetch("/api/unsubscribe", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({project_name: name})
+    });
+
+    const data = await res.json();
+    if (data.success) {
+        alert(`✅ ${name} wurde gelöscht!`);
+        loadProjects();
+        location.reload();
+    } else {
+        alert(`❌ Fehler: ${data.error || "Unbekannt"}`);
+    }
+}
+
 async function loadRepos() {
     const res = await fetch("/api/repos");
     const repos = await res.json();
     const container = document.getElementById("repos");
     container.innerHTML = "";
+
+    if (!Array.isArray(repos)) {
+        container.innerHTML = "<p>Fehler beim Laden der Repositories: " + (repos.error || "?") + "</p>";
+        return;
+    }
+
     repos.forEach(repo => {
         const card = document.createElement("div");
         card.className = "repo-card";
         card.innerHTML = `
             <strong>${repo.name}</strong>
-            <p>${repo.full_name || repo.id} - ${repo.owner?.login || "unbekannt"}</p>
+            <p style="margin: 5px 0">${repo.full_name || repo.id} - ${repo.owner?.login || "unbekannt"}</p>
             <button class="btn-subscribe" onclick="subscribe(${JSON.stringify(repo).replace(/"/g, '&quot;')})">➕ Abonnieren & Klonen</button>
         `;
+
         container.appendChild(card);
     });
 }
@@ -45,12 +111,15 @@ async function subscribe(repo) {
     await fetch("/api/subscribe", {
         method: "POST",
         headers: {"Content-Type": "application/json"},
-        body: JSON.stringify({repo_url: repo.clone_url, target_name: target, token})
+        body: JSON.stringify({repo_url: repo.clone_url, target_name: target, token_provided: token || ""})
     });
 
-    alert(`📦 "${target}" wurde geklont!`);
+    alert(`📦 "${target}" wird geklont...`);
+    loadProjects();
 }
 
+// Initiales Laden
+loadProjects();
 loadRepos();
 </script>
 
