Merge pull request 'staging' (#43) from staging into development

Reviewed-on: #43

Tests/populate_testdata.py

@@ -0,0 +1,412 @@
+#!/usr/bin/env python3
+"""
+Watcher Database Test Data Population Script
+Füllt die SQLite-Datenbank mit realistischen Testdaten für lokale Entwicklung
+"""
+
+import sqlite3
+import random
+from datetime import datetime, timedelta
+import os
+
+# Datenbankpfad
+DB_PATH = "Watcher\persistence\watcher.db"
+
+# Prüfe ob Datenbank existiert
+if not os.path.exists(DB_PATH):
+    print(f"❌ Datenbank nicht gefunden: {DB_PATH}")
+    print("Bitte stelle sicher, dass die Anwendung einmal gestartet wurde, um die Datenbank zu erstellen.")
+    exit(1)
+
+print(f"📊 Verbinde mit Datenbank: {DB_PATH}")
+conn = sqlite3.connect(DB_PATH)
+cursor = conn.cursor()
+
+# Lösche vorhandene Daten (optional - auskommentieren wenn bestehende Daten behalten werden sollen)
+print("\n🗑️  Lösche vorhandene Testdaten...")
+cursor.execute("DELETE FROM ContainerMetrics")
+cursor.execute("DELETE FROM Metrics")
+cursor.execute("DELETE FROM LogEvents")
+cursor.execute("DELETE FROM Containers")
+cursor.execute("DELETE FROM Images")
+cursor.execute("DELETE FROM Tags")
+cursor.execute("DELETE FROM Servers")
+# Users werden NICHT gelöscht
+conn.commit()
+
+print("✅ Alte Daten gelöscht (Users bleiben erhalten)\n")
+
+# ============================================================================
+# 2. SERVERS - Test-Server erstellen
+# ============================================================================
+print("\n🖥️  Erstelle Server...")
+
+servers_data = [
+    {
+        "name": "Production-Web-01",
+        "ip": "192.168.1.10",
+        "type": "Ubuntu 22.04",
+        "description": "Haupt-Webserver für Production",
+        "cpu_type": "Intel Core i7-12700K",
+        "cpu_cores": 12,
+        "gpu_type": None,
+        "ram_size": 34359738368,  # 32 GB in Bytes
+        "disk_space": "512 GB NVMe SSD",
+        "is_online": True
+    },
+    {
+        "name": "Dev-Server",
+        "ip": "192.168.1.20",
+        "type": "Debian 12",
+        "description": "Entwicklungs- und Testserver",
+        "cpu_type": "AMD Ryzen 9 5900X",
+        "cpu_cores": 12,
+        "gpu_type": None,
+        "ram_size": 68719476736,  # 64 GB in Bytes
+        "disk_space": "1 TB NVMe SSD",
+        "is_online": True
+    },
+    {
+        "name": "GPU-Server-ML",
+        "ip": "192.168.1.30",
+        "type": "Ubuntu 22.04 LTS",
+        "description": "Machine Learning Training Server",
+        "cpu_type": "AMD Ryzen Threadripper 3970X",
+        "cpu_cores": 32,
+        "gpu_type": "NVIDIA RTX 4090",
+        "ram_size": 137438953472,  # 128 GB in Bytes
+        "disk_space": "2 TB NVMe SSD",
+        "is_online": True
+    },
+    {
+        "name": "Backup-Server",
+        "ip": "192.168.1.40",
+        "type": "Ubuntu 20.04",
+        "description": "Backup und Storage Server",
+        "cpu_type": "Intel Xeon E5-2680 v4",
+        "cpu_cores": 14,
+        "gpu_type": None,
+        "ram_size": 17179869184,  # 16 GB in Bytes
+        "disk_space": "10 TB HDD RAID5",
+        "is_online": False
+    },
+    {
+        "name": "Docker-Host-01",
+        "ip": "192.168.1.50",
+        "type": "Ubuntu 22.04",
+        "description": "Docker Container Host",
+        "cpu_type": "Intel Xeon Gold 6248R",
+        "cpu_cores": 24,
+        "gpu_type": None,
+        "ram_size": 68719476736,  # 64 GB in Bytes
+        "disk_space": "2 TB NVMe SSD",
+        "is_online": True
+    }
+]
+
+server_ids = []
+for server in servers_data:
+    last_seen = datetime.utcnow() - timedelta(minutes=random.randint(0, 30)) if server["is_online"] else datetime.utcnow() - timedelta(hours=random.randint(2, 48))
+
+    cursor.execute("""
+        INSERT INTO Servers (
+            Name, IPAddress, Type, Description,
+            CpuType, CpuCores, GpuType, RamSize, DiskSpace,
+            CPU_Load_Warning, CPU_Load_Critical,
+            CPU_Temp_Warning, CPU_Temp_Critical,
+            RAM_Load_Warning, RAM_Load_Critical,
+            GPU_Load_Warning, GPU_Load_Critical,
+            GPU_Temp_Warning, GPU_Temp_Critical,
+            Disk_Usage_Warning, Disk_Usage_Critical,
+            DISK_Temp_Warning, DISK_Temp_Critical,
+            CreatedAt, IsOnline, LastSeen, IsVerified
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    """, (
+        server["name"], server["ip"], server["type"], server["description"],
+        server["cpu_type"], server["cpu_cores"], server["gpu_type"], server["ram_size"], server["disk_space"],
+        75.0, 90.0,  # CPU Load
+        80.0, 90.0,  # CPU Temp
+        85.0, 95.0,  # RAM Load
+        75.0, 90.0,  # GPU Load
+        70.0, 80.0,  # GPU Temp
+        75.0, 90.0,  # Disk Usage
+        34.0, 36.0,  # Disk Temp
+        datetime.utcnow() - timedelta(days=random.randint(30, 365)),
+        server["is_online"], last_seen, True
+    ))
+    server_ids.append(cursor.lastrowid)
+    print(f"  ✓ Server '{server['name']}' erstellt (ID: {cursor.lastrowid})")
+
+conn.commit()
+
+# ============================================================================
+# 3. METRICS - Server-Metriken erstellen (letzte 48 Stunden)
+# ============================================================================
+print("\n📈 Erstelle Server-Metriken (letzte 48 Stunden)...")
+
+metrics_count = 0
+for server_id in server_ids:
+    # Finde den Server
+    cursor.execute("SELECT IsOnline FROM Servers WHERE Id = ?", (server_id,))
+    is_online = cursor.fetchone()[0]
+
+    if not is_online:
+        continue  # Keine Metriken für offline Server
+
+    # Erstelle Metriken für die letzten 48 Stunden (alle 5 Minuten)
+    start_time = datetime.utcnow() - timedelta(hours=48)
+    current_time = start_time
+
+    # Basis-Werte für realistische Schwankungen
+    base_cpu = random.uniform(20, 40)
+    base_ram = random.uniform(40, 60)
+    base_gpu = random.uniform(10, 30) if server_id == server_ids[2] else 0  # Nur GPU-Server
+
+    while current_time <= datetime.utcnow():
+        # Realistische Schwankungen
+        cpu_load = max(0, min(100, base_cpu + random.gauss(0, 15)))
+        cpu_temp = 30 + (cpu_load * 0.5) + random.gauss(0, 3)
+
+        ram_load = max(0, min(100, base_ram + random.gauss(0, 10)))
+
+        gpu_load = max(0, min(100, base_gpu + random.gauss(0, 20))) if base_gpu > 0 else 0
+        gpu_temp = 25 + (gpu_load * 0.6) + random.gauss(0, 3) if gpu_load > 0 else 0
+        gpu_vram_usage = gpu_load * 0.8 if gpu_load > 0 else 0
+
+        disk_usage = random.uniform(40, 75)
+        disk_temp = random.uniform(28, 35)
+
+        net_in = random.uniform(1000000, 10000000)  # 1-10 Mbps in Bits
+        net_out = random.uniform(500000, 5000000)   # 0.5-5 Mbps in Bits
+
+        cursor.execute("""
+            INSERT INTO Metrics (
+                ServerId, Timestamp,
+                CPU_Load, CPU_Temp,
+                GPU_Load, GPU_Temp, GPU_Vram_Size, GPU_Vram_Usage,
+                RAM_Size, RAM_Load,
+                DISK_Size, DISK_Usage, DISK_Temp,
+                NET_In, NET_Out
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        """, (
+            server_id, current_time,
+            cpu_load, cpu_temp,
+            gpu_load, gpu_temp, 24.0, gpu_vram_usage,  # 24 GB VRAM
+            64.0, ram_load,
+            512.0, disk_usage, disk_temp,
+            net_in, net_out
+        ))
+
+        metrics_count += 1
+        current_time += timedelta(minutes=5)
+
+    print(f"  ✓ Server {server_id}: {metrics_count} Metriken erstellt")
+
+conn.commit()
+print(f"✅ Insgesamt {metrics_count} Metriken erstellt")
+
+# ============================================================================
+# 4. IMAGES - Docker Images
+# ============================================================================
+print("\n🐳 Erstelle Docker Images...")
+
+images_data = [
+    ("nginx", "latest"),
+    ("nginx", "alpine"),
+    ("postgres", "15"),
+    ("postgres", "14-alpine"),
+    ("redis", "7-alpine"),
+    ("node", "18-alpine"),
+    ("python", "3.11-slim"),
+    ("mysql", "8.0"),
+    ("traefik", "v2.10"),
+    ("portainer", "latest")
+]
+
+image_ids = {}
+for name, tag in images_data:
+    cursor.execute("""
+        INSERT INTO Images (Name, Tag)
+        VALUES (?, ?)
+    """, (name, tag))
+    image_ids[f"{name}:{tag}"] = cursor.lastrowid
+    print(f"  ✓ Image '{name}:{tag}' erstellt")
+
+conn.commit()
+
+# ============================================================================
+# 5. CONTAINERS - Docker Container
+# ============================================================================
+print("\n📦 Erstelle Docker Container...")
+
+# Nur für Server, die online sind
+online_server_ids = [sid for sid in server_ids[:2]]  # Erste 2 Server haben Container
+
+containers_data = [
+    # Production-Web-01
+    ("nginx-web", "abc123def456", "nginx:latest", online_server_ids[0], True),
+    ("postgres-db", "def456ghi789", "postgres:15", online_server_ids[0], True),
+    ("redis-cache", "ghi789jkl012", "redis:7-alpine", online_server_ids[0], True),
+    ("traefik-proxy", "jkl012mno345", "traefik:v2.10", online_server_ids[0], True),
+
+    # Dev-Server
+    ("dev-nginx", "mno345pqr678", "nginx:alpine", online_server_ids[1], True),
+    ("dev-postgres", "pqr678stu901", "postgres:14-alpine", online_server_ids[1], False),
+    ("dev-redis", "stu901vwx234", "redis:7-alpine", online_server_ids[1], True),
+    ("test-app", "vwx234yz567", "node:18-alpine", online_server_ids[1], True),
+    ("portainer", "yz567abc890", "portainer:latest", online_server_ids[1], True),
+]
+
+container_ids = []
+for name, container_id, image, server_id, is_running in containers_data:
+    cursor.execute("""
+        INSERT INTO Containers (Name, ContainerId, Image, ServerId, IsRunning)
+        VALUES (?, ?, ?, ?, ?)
+    """, (name, container_id, image, server_id, is_running))
+    container_ids.append(cursor.lastrowid)
+    status = "🟢 Running" if is_running else "🔴 Stopped"
+    print(f"  ✓ Container '{name}' erstellt - {status}")
+
+conn.commit()
+
+# ============================================================================
+# 6. CONTAINER METRICS - Container-Metriken (letzte 24 Stunden)
+# ============================================================================
+print("\n📊 Erstelle Container-Metriken (letzte 24 Stunden)...")
+
+container_metrics_count = 0
+for container_id in container_ids:
+    # Prüfe ob Container läuft
+    cursor.execute("SELECT IsRunning FROM Containers WHERE Id = ?", (container_id,))
+    is_running = cursor.fetchone()[0]
+
+    if not is_running:
+        continue  # Keine Metriken für gestoppte Container
+
+    # Erstelle Metriken für die letzten 24 Stunden (alle 5 Minuten)
+    start_time = datetime.utcnow() - timedelta(hours=24)
+    current_time = start_time
+
+    # Basis-Werte für Container (meist niedriger als Host)
+    base_cpu = random.uniform(5, 15)
+    base_ram = random.uniform(10, 30)
+
+    while current_time <= datetime.utcnow():
+        cpu_load = max(0, min(100, base_cpu + random.gauss(0, 8)))
+        cpu_temp = 30 + (cpu_load * 0.5) + random.gauss(0, 2)
+
+        ram_load = max(0, min(100, base_ram + random.gauss(0, 5)))
+        ram_size = random.uniform(0.5, 4.0)  # Container nutzen weniger RAM
+
+        cursor.execute("""
+            INSERT INTO ContainerMetrics (
+                ContainerId, Timestamp,
+                CPU_Load, CPU_Temp,
+                RAM_Size, RAM_Load
+            ) VALUES (?, ?, ?, ?, ?, ?)
+        """, (
+            container_id, current_time,
+            cpu_load, cpu_temp,
+            ram_size, ram_load
+        ))
+
+        container_metrics_count += 1
+        current_time += timedelta(minutes=5)
+
+conn.commit()
+print(f"✅ Insgesamt {container_metrics_count} Container-Metriken erstellt")
+
+# ============================================================================
+# 7. LOG EVENTS - Log-Einträge erstellen
+# ============================================================================
+print("\n📝 Erstelle Log Events...")
+
+log_messages = [
+    ("Info", "Server erfolgreich gestartet", None, None),
+    ("Info", "Backup abgeschlossen", server_ids[3], None),
+    ("Warning", "CPU-Auslastung über 80%", server_ids[0], None),
+    ("Info", "Container gestartet", server_ids[0], container_ids[0]),
+    ("Error", "Datenbank-Verbindung fehlgeschlagen", server_ids[1], container_ids[5]),
+    ("Warning", "Speicherplatz unter 25%", server_ids[1], None),
+    ("Info", "Update installiert", server_ids[2], None),
+    ("Info", "Container neu gestartet", server_ids[0], container_ids[2]),
+    ("Warning", "GPU-Temperatur über 75°C", server_ids[2], None),
+    ("Info", "Netzwerk-Check erfolgreich", server_ids[0], None),
+]
+
+for level, message, server_id, container_id in log_messages:
+    timestamp = datetime.utcnow() - timedelta(hours=random.randint(0, 48))
+    cursor.execute("""
+        INSERT INTO LogEvents (Timestamp, Message, Level, ServerId, ContainerId)
+        VALUES (?, ?, ?, ?, ?)
+    """, (timestamp, message, level, server_id, container_id))
+    print(f"  ✓ Log: [{level}] {message}")
+
+conn.commit()
+
+# ============================================================================
+# 8. TAGS - Tags für Server/Container
+# ============================================================================
+print("\n🏷️  Erstelle Tags...")
+
+tags_data = ["production", "development", "backup", "docker", "monitoring", "critical"]
+
+for tag_name in tags_data:
+    cursor.execute("""
+        INSERT INTO Tags (Name)
+        VALUES (?)
+    """, (tag_name,))
+    print(f"  ✓ Tag '{tag_name}' erstellt")
+
+conn.commit()
+
+# ============================================================================
+# Abschluss
+# ============================================================================
+print("\n" + "="*60)
+print("✅ Testdaten erfolgreich erstellt!")
+print("="*60)
+
+# Statistiken ausgeben
+cursor.execute("SELECT COUNT(*) FROM Servers")
+server_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Containers")
+container_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Metrics")
+metrics_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM ContainerMetrics")
+container_metrics_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM LogEvents")
+log_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Images")
+image_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Tags")
+tag_count = cursor.fetchone()[0]
+
+print(f"""
+📊 STATISTIK:
+   🖥️  Server:             {server_count}
+   📦 Container:          {container_count}
+   📈 Server-Metriken:    {metrics_count}
+   📊 Container-Metriken: {container_metrics_count}
+   📝 Log Events:         {log_count}
+   🐳 Images:             {image_count}
+   🏷️  Tags:              {tag_count}
+
+💡 HINWEIS:
+   - User-Tabelle wurde nicht verändert
+   - Metriken wurden für die letzten 48 Stunden generiert
+   - Server 'Backup-Server' ist offline (für Tests)
+   - Container 'dev-postgres' ist gestoppt (für Tests)
+   - Die Datenbank befindet sich unter: {DB_PATH}
+""")
+
+# Verbindung schließen
+conn.close()
+print("🔒 Datenbankverbindung geschlossen\n")

Watcher/Controllers/MonitoringController.cs

@@ -244,6 +244,14 @@ public class MonitoringController : Controller
             return BadRequest(new { error = "Invalid Payload", details = errors });
         }
 
+        // Prüfen, ob der Server existiert
+        var serverExists = await _context.Servers.AnyAsync(s => s.Id == dto.Server_id);
+        if (!serverExists)
+        {
+            _logger.LogError($"Server with ID {dto.Server_id} does not exist.");
+            return BadRequest(new { error = "Server not found", details = $"Server with ID {dto.Server_id} does not exist. Please register the server first." });
+        }
+
         List<Container> newContainers =
             JsonSerializer.Deserialize<List<Container>>(dto.Containers.GetRawText())
             ?? new List<Container>();
@@ -370,53 +378,62 @@ public class MonitoringController : Controller
     }
 
     [HttpGet("cpu-usage")]
-    public async Task<IActionResult> GetCpuUsageData(int serverId)
+    public async Task<IActionResult> GetCpuUsageData(int serverId, int hours = 1)
     {
-        var oneDayAgo = DateTime.UtcNow.AddDays(-1);
-        var data = await _context.Metrics
-                                .Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
+        var startTime = DateTime.UtcNow.AddHours(-hours);
+        var metrics = await _context.Metrics
+                                .Where(m => m.Timestamp >= startTime && m.ServerId == serverId)
                                 .OrderBy(m => m.Timestamp)
-                                .Select(m => new
-                                {
-                                    label = m.Timestamp.ToUniversalTime().ToString("o"),
-                                    data = m.CPU_Load
-                                })
                                 .ToListAsync();
 
+        // Timestamp-Format basierend auf Zeitbereich anpassen
+        string format = hours > 1 ? "dd.MM HH:mm" : "HH:mm";
+        var data = metrics.Select(m => new
+        {
+            label = m.Timestamp.ToLocalTime().ToString(format),
+            data = m.CPU_Load
+        }).ToList();
+
         return Ok(data);
     }
 
     [HttpGet("ram-usage")]
-    public async Task<IActionResult> GetRamUsageData(int serverId)
+    public async Task<IActionResult> GetRamUsageData(int serverId, int hours = 1)
     {
-        var oneDayAgo = DateTime.UtcNow.AddDays(-1);
-        var data = await _context.Metrics
-                                .Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
+        var startTime = DateTime.UtcNow.AddHours(-hours);
+        var metrics = await _context.Metrics
+                                .Where(m => m.Timestamp >= startTime && m.ServerId == serverId)
                                 .OrderBy(m => m.Timestamp)
-                                .Select(m => new
-                                {
-                                    label = m.Timestamp.ToUniversalTime().ToString("o"),
-                                    data = m.RAM_Load
-                                })
                                 .ToListAsync();
 
+        // Timestamp-Format basierend auf Zeitbereich anpassen
+        string format = hours > 1 ? "dd.MM HH:mm" : "HH:mm";
+        var data = metrics.Select(m => new
+        {
+            label = m.Timestamp.ToLocalTime().ToString(format),
+            data = m.RAM_Load
+        }).ToList();
+
         return Ok(data);
     }
 
     [HttpGet("gpu-usage")]
-    public async Task<IActionResult> GetGpuUsageData(int serverId)
+    public async Task<IActionResult> GetGpuUsageData(int serverId, int hours = 1)
     {
-        var oneDayAgo = DateTime.UtcNow.AddDays(-1);
-        var data = await _context.Metrics
-                                .Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
+        var startTime = DateTime.UtcNow.AddHours(-hours);
+        var metrics = await _context.Metrics
+                                .Where(m => m.Timestamp >= startTime && m.ServerId == serverId)
                                 .OrderBy(m => m.Timestamp)
-                                .Select(m => new
-                                {
-                                    label = m.Timestamp.ToUniversalTime().ToString("o"),
-                                    data = m.GPU_Load
-                                })
                                 .ToListAsync();
 
+        // Timestamp-Format basierend auf Zeitbereich anpassen
+        string format = hours > 1 ? "dd.MM HH:mm" : "HH:mm";
+        var data = metrics.Select(m => new
+        {
+            label = m.Timestamp.ToLocalTime().ToString(format),
+            data = m.GPU_Load
+        }).ToList();
+
         return Ok(data);
     }
 

Watcher/Views/Container/Overview.cshtml

@@ -8,28 +8,180 @@
     <link rel="stylesheet" href="~/css/services-overview.css" />
 </head>
 
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-    <div >
-            <table class="ServiceList">
-                <tr>
-                    <th>Container-ID</th>
-                    <th>Name</th>
-                    <th>Image</th>
-                    <th>Host</th>
-                    <th>Aktionen</th>
-
-                </tr>
-                @foreach (Container container in Model.Containers)
-                {
-                    <tr class="ServiceRow">
-                        <td>@container.ContainerId</td>
-                        <td>@container.Name</td>
-                        <td>@container.Image</td>
-                        <td><a class="ServiceEntry" href="/Server/Details/@container.ServerId">@container.Server?.Name</a></td>
-                        <td>nicht verfügbar</td>
-                    </tr>
-                }
-            </table>
+<div class="container-fluid mt-4">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h4><i class="bi bi-box-seam me-2"></i>Container & Services</h4>
+        <span class="badge bg-primary">@Model.Containers.Count Container</span>
     </div>
 
+    @if (!Model.Containers.Any())
+    {
+        <div class="alert alert-info">
+            <i class="bi bi-info-circle me-2"></i>Keine Container gefunden. Container werden automatisch von den Agents erkannt.
+        </div>
+    }
+    else
+    {
+        var groupedContainers = Model.Containers.GroupBy(c => c.Server?.Name ?? "Unbekannt");
+
+        foreach (var serverGroup in groupedContainers.OrderBy(g => g.Key))
+        {
+            <div class="mb-4">
+                <h5 class="text-muted mb-3">
+                    <i class="bi bi-hdd-network me-2"></i>@serverGroup.Key
+                    <span class="badge bg-secondary ms-2">@serverGroup.Count()</span>
+                </h5>
+
+                <div class="row g-3">
+                    @foreach (var container in serverGroup)
+                    {
+                        <div class="col-12 col-lg-6 col-xl-4">
+                            <div class="card container-card shadow-sm">
+                                <div class="card-header d-flex justify-content-between align-items-center">
+                                    <div class="d-flex align-items-center">
+                                        <i class="bi bi-box me-2 text-primary"></i>
+                                        <strong>@container.Name</strong>
+                                    </div>
+                                    <span class="badge @(container.IsRunning ? "bg-success" : "bg-danger")">
+                                        <i class="bi @(container.IsRunning ? "bi-play-fill" : "bi-stop-fill")"></i>
+                                        @(container.IsRunning ? "Running" : "Stopped")
+                                    </span>
+                                </div>
+                                <div class="card-body">
+                                    <div class="container-info">
+                                        <div class="info-row">
+                                            <span class="info-label"><i class="bi bi-tag me-1"></i>ID:</span>
+                                            <span class="info-value">@(container.ContainerId != null && container.ContainerId.Length > 12 ? container.ContainerId.Substring(0, 12) : container.ContainerId)</span>
+                                        </div>
+                                        <div class="info-row">
+                                            <span class="info-label"><i class="bi bi-image me-1"></i>Image:</span>
+                                            <span class="info-value">@container.Image</span>
+                                        </div>
+                                        <div class="info-row">
+                                            <span class="info-label"><i class="bi bi-server me-1"></i>Host:</span>
+                                            <span class="info-value">
+                                                <a href="/Server/Details/@container.ServerId" class="text-decoration-none">
+                                                    @container.Server?.Name
+                                                </a>
+                                            </span>
+                                        </div>
+                                    </div>
+
+                                    <!-- Action Buttons -->
+                                    <div class="action-buttons mt-3 d-flex gap-2">
+                                        <button class="btn btn-sm btn-outline-warning flex-fill" onclick="restartContainer('@container.ContainerId')">
+                                            <i class="bi bi-arrow-clockwise"></i> Restart
+                                        </button>
+                                        <button class="btn btn-sm btn-outline-danger flex-fill" onclick="stopContainer('@container.ContainerId')">
+                                            <i class="bi bi-stop-circle"></i> Stop
+                                        </button>
+                                        <button class="btn btn-sm btn-outline-info flex-fill" onclick="updateContainer('@container.ContainerId')">
+                                            <i class="bi bi-arrow-up-circle"></i> Update
+                                        </button>
+                                    </div>
+
+                                    <!-- Expandable Metrics Section -->
+                                    <div class="mt-3">
+                                        <button class="btn btn-sm btn-outline-secondary w-100 toggle-metrics"
+                                                data-container-id="@container.Id"
+                                                onclick="toggleMetrics(this, @container.Id)">
+                                            <i class="bi bi-graph-up me-1"></i>
+                                            Metriken anzeigen
+                                            <i class="bi bi-chevron-down float-end"></i>
+                                        </button>
+                                        <div class="metrics-panel collapse" id="metrics-@container.Id">
+                                            <div class="metrics-content mt-3 p-3 rounded">
+                                                <div class="metric-item">
+                                                    <div class="d-flex justify-content-between mb-1">
+                                                        <small><i class="bi bi-cpu me-1"></i>CPU</small>
+                                                        <small class="text-muted"><span class="metric-value">--</span>%</small>
+                                                    </div>
+                                                    <div class="progress" style="height: 8px;">
+                                                        <div class="progress-bar bg-info" role="progressbar" style="width: 0%"></div>
+                                                    </div>
+                                                </div>
+                                                <div class="metric-item mt-3">
+                                                    <div class="d-flex justify-content-between mb-1">
+                                                        <small><i class="bi bi-memory me-1"></i>RAM</small>
+                                                        <small class="text-muted"><span class="metric-value">--</span> MB</small>
+                                                    </div>
+                                                    <div class="progress" style="height: 8px;">
+                                                        <div class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
+                                                    </div>
+                                                </div>
+                                                <div class="metric-item mt-3">
+                                                    <div class="d-flex justify-content-between mb-1">
+                                                        <small><i class="bi bi-ethernet me-1"></i>Network</small>
+                                                        <small class="text-muted">
+                                                            <i class="bi bi-arrow-down text-success"></i> <span class="metric-value">--</span> MB/s
+                                                            <i class="bi bi-arrow-up text-primary ms-2"></i> <span class="metric-value">--</span> MB/s
+                                                        </small>
+                                                    </div>
+                                                </div>
+                                                <div class="text-center mt-3">
+                                                    <small class="text-muted">
+                                                        <i class="bi bi-info-circle me-1"></i>
+                                                        Metriken werden in Echtzeit aktualisiert
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+    }
 </div>
+
+@section Scripts {
+    <script>
+        function toggleMetrics(button, containerId) {
+            const panel = document.getElementById('metrics-' + containerId);
+            const icon = button.querySelector('.float-end');
+
+            if (panel.classList.contains('show')) {
+                panel.classList.remove('show');
+                button.innerHTML = '<i class="bi bi-graph-up me-1"></i>Metriken anzeigen<i class="bi bi-chevron-down float-end"></i>';
+            } else {
+                panel.classList.add('show');
+                button.innerHTML = '<i class="bi bi-graph-up me-1"></i>Metriken verbergen<i class="bi bi-chevron-up float-end"></i>';
+                // Hier könnten echte Metriken geladen werden
+                loadContainerMetrics(containerId);
+            }
+        }
+
+        function loadContainerMetrics(containerId) {
+            // Placeholder für zukünftige API-Calls
+            console.log('Loading metrics for container:', containerId);
+            // TODO: Echte Metriken vom Backend laden
+        }
+
+        function restartContainer(containerId) {
+            if (confirm('Container wirklich neu starten?')) {
+                console.log('Restarting container:', containerId);
+                // TODO: API Call zum Neustarten
+                alert('Restart-Funktion wird implementiert');
+            }
+        }
+
+        function stopContainer(containerId) {
+            if (confirm('Container wirklich stoppen?')) {
+                console.log('Stopping container:', containerId);
+                // TODO: API Call zum Stoppen
+                alert('Stop-Funktion wird implementiert');
+            }
+        }
+
+        function updateContainer(containerId) {
+            if (confirm('Container-Image aktualisieren?')) {
+                console.log('Updating container:', containerId);
+                // TODO: API Call zum Updaten
+                alert('Update-Funktion wird implementiert');
+            }
+        }
+    </script>
+}

Watcher/Views/Server/Details.cshtml

@@ -11,50 +11,187 @@
 <div id="server-cards-container">
 
     <div class="container mt-4">
-        <div class="card shadow-sm">
-            <div class="card-header d-flex justify-content-between align-items-center">
+        <!-- Server Overview Card -->
+        <div class="card shadow-sm mb-4">
+            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                 <h5 class="mb-0">
                     <i class="bi bi-hdd-network me-2 text-primary"></i>@Model.Name
                 </h5>
-                <span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger")">
-                    <i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
-                    @(Model.IsOnline ? "Online" : "Offline")
-                </span>
+                <div class="d-flex gap-2 align-items-center">
+                    <span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger") px-3 py-2">
+                        <i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
+                        @(Model.IsOnline ? "Online" : "Offline")
+                    </span>
+                    <a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-sm btn-outline-primary">
+                        <i class="bi bi-pencil"></i> Bearbeiten
+                    </a>
+                    <form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline m-0"
+                        onsubmit="return confirm('Diesen Server wirklich löschen?');">
+                        <button type="submit" class="btn btn-sm btn-outline-danger">
+                            <i class="bi bi-trash"></i> Löschen
+                        </button>
+                    </form>
+                </div>
             </div>
 
-            <div class="infocard row g-4 mb-4">
-                <div class="info col-6 text-text col-lg-3">
-                    <div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
-                    <div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
-                    <div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
-                        @Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
-                    <div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
-                        @Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
-                </div>
-                <div class="hardware col-6 text-text col-lg-3">
-                    <div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
-                    <div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
-                    <div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
+            <div class="card-body">
+                <div class="row g-4">
+                    <!-- System Information -->
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <h6 class="text-muted mb-3 pb-2 border-bottom">
+                            <i class="bi bi-info-circle me-2"></i>System
+                        </h6>
+                        <div class="info-list">
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-globe text-primary me-1"></i>IP-Adresse
+                                </span>
+                                <span class="info-value">@Model.IPAddress</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-pc-display text-primary me-1"></i>Typ
+                                </span>
+                                <span class="info-value">@Model.Type</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-calendar-check text-primary me-1"></i>Erstellt
+                                </span>
+                                <span class="info-value">@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy")</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-clock text-primary me-1"></i>Last Seen
+                                </span>
+                                <span class="info-value">
+                                    @{
+                                        var timeSinceLastSeen = DateTime.UtcNow - Model.LastSeen;
+                                        if (timeSinceLastSeen.TotalMinutes < 1)
+                                        {
+                                            <span class="text-success">Gerade eben</span>
+                                        }
+                                        else if (timeSinceLastSeen.TotalMinutes < 60)
+                                        {
+                                            <span>vor @((int)timeSinceLastSeen.TotalMinutes) Min</span>
+                                        }
+                                        else if (timeSinceLastSeen.TotalHours < 24)
+                                        {
+                                            <span>vor @((int)timeSinceLastSeen.TotalHours) Std</span>
+                                        }
+                                        else
+                                        {
+                                            <span>@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</span>
+                                        }
+                                    }
+                                </span>
+                            </div>
+                        </div>
                     </div>
-                    <div><i class="bi bi-memory me-1"></i><strong>RAM:</strong> @(Model.RamSize) </div>
-                    <div><i class="bi bi-hdd me-1"></i><strong>Disk Space:</strong> ... </div>
-                </div>
-                <div class="hardware col-6 text-text col-lg-3">
-                    <div class="card-footer text-end">
-                        <a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-outline-primary me-2">
-                            <i class="bi bi-pencil"></i> Bearbeiten
-                        </a>
-                        <form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline"
-                            onsubmit="return confirm('Diesen Server wirklich löschen?');">
-                            <button type="submit" class="btn btn-outline-danger">
-                                <i class="bi bi-trash"></i> Löschen
-                            </button>
-                        </form>
-                    </div>
-                </div>
 
+                    <!-- Hardware - CPU & GPU -->
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <h6 class="text-muted mb-3 pb-2 border-bottom">
+                            <i class="bi bi-cpu me-2"></i>Prozessor & Grafik
+                        </h6>
+                        <div class="info-list">
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-cpu text-info me-1"></i>CPU
+                                </span>
+                                <span class="info-value">
+                                    @if (!string.IsNullOrWhiteSpace(Model.CpuType))
+                                    {
+                                        @Model.CpuType
+                                    }
+                                    else
+                                    {
+                                        <span class="text-muted">Unbekannt</span>
+                                    }
+                                </span>
+                            </div>
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-grid text-info me-1"></i>CPU-Kerne
+                                </span>
+                                <span class="info-value">
+                                    @if (Model.CpuCores > 0)
+                                    {
+                                        @Model.CpuCores
+                                        <span class="text-muted">Cores</span>
+                                    }
+                                    else
+                                    {
+                                        <span class="text-muted">Unbekannt</span>
+                                    }
+                                </span>
+                            </div>
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-gpu-card text-info me-1"></i>GPU
+                                </span>
+                                <span class="info-value">
+                                    @if (!string.IsNullOrWhiteSpace(Model.GpuType))
+                                    {
+                                        @Model.GpuType
+                                    }
+                                    else
+                                    {
+                                        <span class="text-muted">Keine / Unbekannt</span>
+                                    }
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Hardware - Memory -->
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <h6 class="text-muted mb-3 pb-2 border-bottom">
+                            <i class="bi bi-memory me-2"></i>Speicher
+                        </h6>
+                        <div class="info-list">
+                            <div class="info-item">
+                                <span class="info-label">
+                                    <i class="bi bi-memory text-success me-1"></i>RAM
+                                </span>
+                                <span class="info-value">
+                                    @if (Model.RamSize > 0)
+                                    {
+                                        var ramGB = Model.RamSize / (1024.0 * 1024.0 * 1024.0);
+                                        @($"{ramGB:F1} GB")
+                                    }
+                                    else
+                                    {
+                                        <span class="text-muted">Unbekannt</span>
+                                    }
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Description -->
+                    @if (!string.IsNullOrWhiteSpace(Model.Description))
+                    {
+                        <div class="col-12 col-lg-3">
+                            <h6 class="text-muted mb-3 pb-2 border-bottom">
+                                <i class="bi bi-card-text me-2"></i>Beschreibung
+                            </h6>
+                            <p class="text-muted small mb-0">@Model.Description</p>
+                        </div>
+                    }
+                </div>
             </div>
+        </div>
+    </div>
 
+    <div class="mt-4">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <h6 class="mb-0"><i class="bi bi-graph-up me-1"></i>Metriken</h6>
+            <div class="btn-group btn-group-sm" role="group">
+                <button type="button" class="btn btn-outline-primary active" data-range="1">1 Stunde</button>
+                <button type="button" class="btn btn-outline-primary" data-range="24">24 Stunden</button>
+                <button type="button" class="btn btn-outline-primary" data-range="48">48 Stunden</button>
+            </div>
         </div>
     </div>
 
@@ -94,10 +231,13 @@
                     datasets: [{
                         label: 'CPU Last (%)',
                         data: [],
-                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                        borderColor: 'rgba(13, 202, 240, 1)',
+                        backgroundColor: 'rgba(13, 202, 240, 0.2)',
+                        borderWidth: 2,
                         fill: true,
-                        tension: 0.3,
-                        pointRadius: 3
+                        tension: 0.4,
+                        pointRadius: 0,
+                        pointHoverRadius: 4
                     }]
                 },
                 options: {
@@ -110,14 +250,29 @@
                             title: {
                                 display: true,
                                 text: 'Auslastung in %'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
                             }
                         },
                         x: {
                             title: {
                                 display: false,
                                 text: 'Zeit'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                maxTicksLimit: 12,
+                                autoSkip: true
                             }
                         }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
                     }
                 }
             });
@@ -129,10 +284,13 @@
                     datasets: [{
                         label: 'RAM Last (%)',
                         data: [],
-                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                        borderColor: 'rgba(25, 135, 84, 1)',
+                        backgroundColor: 'rgba(25, 135, 84, 0.2)',
+                        borderWidth: 2,
                         fill: true,
-                        tension: 0.3,
-                        pointRadius: 3
+                        tension: 0.4,
+                        pointRadius: 0,
+                        pointHoverRadius: 4
                     }]
                 },
                 options: {
@@ -145,14 +303,29 @@
                             title: {
                                 display: true,
                                 text: 'Auslastung in %'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
                             }
                         },
                         x: {
                             title: {
                                 display: false,
                                 text: 'Zeit'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                maxTicksLimit: 12,
+                                autoSkip: true
                             }
                         }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
                     }
                 }
             });
@@ -164,10 +337,13 @@
                     datasets: [{
                         label: 'GPU Last (%)',
                         data: [],
-                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                        borderColor: 'rgba(220, 53, 69, 1)',
+                        backgroundColor: 'rgba(220, 53, 69, 0.2)',
+                        borderWidth: 2,
                         fill: true,
-                        tension: 0.3,
-                        pointRadius: 3
+                        tension: 0.4,
+                        pointRadius: 0,
+                        pointHoverRadius: 4
                     }]
                 },
                 options: {
@@ -180,21 +356,38 @@
                             title: {
                                 display: true,
                                 text: 'Auslastung in %'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
                             }
                         },
                         x: {
                             title: {
                                 display: false,
                                 text: 'Zeit'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                maxTicksLimit: 12,
+                                autoSkip: true
                             }
                         }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
                     }
                 }
             });
 
+            let currentHours = 1; // Standard: 1 Stunde
+
             async function loadCpuData() {
                 try {
-                    const response = await fetch('/monitoring/cpu-usage?serverId=@Model.Id');
+                    const response = await fetch(`/monitoring/cpu-usage?serverId=@Model.Id&hours=${currentHours}`);
                     if (!response.ok) {
                         throw new Error(`HTTP-Fehler: ${response.status}`);
                     }
@@ -217,7 +410,7 @@
 
             async function loadRamData() {
                 try {
-                    const response = await fetch('/monitoring/ram-usage?serverId=@Model.Id');
+                    const response = await fetch(`/monitoring/ram-usage?serverId=@Model.Id&hours=${currentHours}`);
                     if (!response.ok) {
                         throw new Error(`HTTP-Fehler: ${response.status}`);
                     }
@@ -240,7 +433,7 @@
 
             async function loadGpuData() {
                 try {
-                    const response = await fetch('/monitoring/gpu-usage?serverId=@Model.Id');
+                    const response = await fetch(`/monitoring/gpu-usage?serverId=@Model.Id&hours=${currentHours}`);
                     if (!response.ok) {
                         throw new Error(`HTTP-Fehler: ${response.status}`);
                     }
@@ -261,6 +454,27 @@
                 }
             }
 
+            // Button-Handler für Zeitbereich-Wechsel
+            document.querySelectorAll('[data-range]').forEach(button => {
+                button.addEventListener('click', function() {
+                    // Alle Buttons deaktivieren
+                    document.querySelectorAll('[data-range]').forEach(btn => {
+                        btn.classList.remove('active');
+                    });
+
+                    // Aktuellen Button aktivieren
+                    this.classList.add('active');
+
+                    // Zeitbereich aktualisieren
+                    currentHours = parseInt(this.getAttribute('data-range'));
+
+                    // Daten neu laden
+                    loadCpuData();
+                    loadRamData();
+                    loadGpuData();
+                });
+            });
+
             // Initiales Laden
             loadCpuData();
             loadRamData();

Watcher/Views/Server/_ServerCard.cshtml

@@ -1,51 +1,169 @@
 @model IEnumerable<Watcher.Models.Server>
 
-<div class="container py-4">
-    <div class="row g-4">
-        @foreach (var s in Model)
-        {
-            <div class="col-12">
-                <div class="card h-100 border-secondary shadow-sm">
-                    <div class="card-body d-flex flex-column gap-3">
-                        <div class="d-flex justify-content-between align-items-center mb-3">
-                            <h5 class="card-title text-text mb-0">
-                                <i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name
-                            </h5>
-
-                            <div class="col-md-4 text-text small">
-                                <div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div>
-                                <div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
-                            </div>
-
-                            <span class="badge @(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
-                                <i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
-                                @(s.IsOnline ? "Online" : "Offline")
+<div class="row g-3">
+    @foreach (var server in Model)
+    {
+        <div class="col-12 col-lg-6 col-xl-4">
+            <div class="card server-card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <div class="d-flex align-items-center">
+                        <i class="bi bi-hdd-network me-2 text-primary"></i>
+                        <strong>@server.Name</strong>
+                    </div>
+                    <span class="badge @(server.IsOnline ? "bg-success" : "bg-danger")">
+                        <i class="bi @(server.IsOnline ? "bi-check-circle" : "bi-x-circle")"></i>
+                        @(server.IsOnline ? "Online" : "Offline")
+                    </span>
+                </div>
+                <div class="card-body">
+                    <!-- Server Info -->
+                    <div class="server-info">
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-globe me-1"></i>IP:</span>
+                            <span class="info-value">@server.IPAddress</span>
+                        </div>
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-pc-display me-1"></i>Typ:</span>
+                            <span class="info-value">@server.Type</span>
+                        </div>
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-cpu me-1"></i>CPU:</span>
+                            <span class="info-value">@(server.CpuCores > 0 ? $"{server.CpuCores} Cores" : "N/A")</span>
+                        </div>
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-memory me-1"></i>RAM:</span>
+                            <span class="info-value">
+                                @if (server.RamSize > 0)
+                                {
+                                    var ramGB = server.RamSize / (1024.0 * 1024.0 * 1024.0);
+                                    @($"{ramGB:F1} GB")
+                                }
+                                else
+                                {
+                                    <text>N/A</text>
+                                }
                             </span>
-                            <div class="d-flex flex-wrap gap-4">
-
-                                <a asp-action="EditServer" asp-route-id="@s.Id" class="btn btn-outline-primary">
-                                    <i class="bi bi-pencil-square me-1"></i> Bearbeiten
-                                </a>
-
-                                <a asp-asp-controller="Server" asp-action="Details" asp-route-id="@s.Id"
-                                    class="btn btn-outline-primary">
-                                    <i class="bi bi-bar-chart-fill me-1"></i> Metrics
-                                </a>
-
-                                <form asp-action="Delete" asp-controller="Server" asp-route-id="@s.Id" method="post"
-                                    onsubmit="return confirm('Diesen Server wirklich löschen?');" class="m-0">
-                                    <button type="submit" class="btn btn-outline-danger">
-                                        <i class="bi bi-trash me-1"></i> Löschen
-                                    </button>
-                                </form>
+                        </div>
+                    </div>
 
+                    <!-- Current Metrics (wenn online) -->
+                    @if (server.IsOnline)
+                    {
+                        <div class="mt-3 current-metrics">
+                            <h6 class="mb-2"><i class="bi bi-activity me-1"></i>Aktuelle Last</h6>
+                            <div class="metric-bars">
+                                <div class="metric-bar-item">
+                                    <div class="d-flex justify-content-between mb-1">
+                                        <small>CPU</small>
+                                        <small class="metric-value" data-server-id="@server.Id" data-metric="cpu">--</small>
+                                    </div>
+                                    <div class="progress" style="height: 6px;">
+                                        <div class="progress-bar bg-info server-cpu-bar" role="progressbar" style="width: 0%"></div>
+                                    </div>
+                                </div>
+                                <div class="metric-bar-item mt-2">
+                                    <div class="d-flex justify-content-between mb-1">
+                                        <small>RAM</small>
+                                        <small class="metric-value" data-server-id="@server.Id" data-metric="ram">--</small>
+                                    </div>
+                                    <div class="progress" style="height: 6px;">
+                                        <div class="progress-bar bg-success server-ram-bar" role="progressbar" style="width: 0%"></div>
+                                    </div>
+                                </div>
+                                @if (!string.IsNullOrEmpty(server.GpuType))
+                                {
+                                    <div class="metric-bar-item mt-2">
+                                        <div class="d-flex justify-content-between mb-1">
+                                            <small>GPU</small>
+                                            <small class="metric-value" data-server-id="@server.Id" data-metric="gpu">--</small>
+                                        </div>
+                                        <div class="progress" style="height: 6px;">
+                                            <div class="progress-bar bg-danger server-gpu-bar" role="progressbar" style="width: 0%"></div>
+                                        </div>
+                                    </div>
+                                }
                             </div>
                         </div>
+                    }
 
+                    <!-- Action Buttons -->
+                    <div class="action-buttons mt-3 d-flex gap-2">
+                        <a asp-action="Details" asp-route-id="@server.Id" class="btn btn-sm btn-outline-primary flex-fill">
+                            <i class="bi bi-bar-chart-fill"></i> Details
+                        </a>
+                        <button class="btn btn-sm btn-outline-warning flex-fill" onclick="rebootServer(@server.Id)">
+                            <i class="bi bi-arrow-clockwise"></i> Reboot
+                        </button>
+                        <a asp-action="EditServer" asp-route-id="@server.Id" class="btn btn-sm btn-outline-secondary flex-fill">
+                            <i class="bi bi-pencil"></i> Edit
+                        </a>
+                    </div>
 
+                    <!-- Delete Button (separate row) -->
+                    <div class="mt-2">
+                        <form asp-action="Delete" asp-route-id="@server.Id" method="post" class="m-0"
+                              onsubmit="return confirm('Server @server.Name wirklich löschen?');">
+                            <button type="submit" class="btn btn-sm btn-outline-danger w-100">
+                                <i class="bi bi-trash"></i> Server löschen
+                            </button>
+                        </form>
                     </div>
                 </div>
             </div>
-        }
-    </div>
+        </div>
+    }
 </div>
+
+<script>
+    function rebootServer(serverId) {
+        if (confirm('Server wirklich neu starten?')) {
+            console.log('Rebooting server:', serverId);
+            // TODO: API Call zum Neustarten des Servers
+            alert('Reboot-Funktion wird implementiert');
+        }
+    }
+
+    // Lade aktuelle Metriken für alle Server
+    async function loadCurrentMetrics() {
+        const metricElements = document.querySelectorAll('.metric-value');
+
+        for (const element of metricElements) {
+            const serverId = element.getAttribute('data-server-id');
+            const metricType = element.getAttribute('data-metric');
+
+            try {
+                let endpoint = '';
+                if (metricType === 'cpu') endpoint = `/monitoring/cpu-usage?serverId=${serverId}&hours=0.1`;
+                else if (metricType === 'ram') endpoint = `/monitoring/ram-usage?serverId=${serverId}&hours=0.1`;
+                else if (metricType === 'gpu') endpoint = `/monitoring/gpu-usage?serverId=${serverId}&hours=0.1`;
+
+                const response = await fetch(endpoint);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data && data.length > 0) {
+                        const latestValue = data[data.length - 1].data;
+                        element.textContent = `${latestValue.toFixed(1)}%`;
+
+                        // Update progress bar
+                        const card = element.closest('.card');
+                        let barClass = '';
+                        if (metricType === 'cpu') barClass = '.server-cpu-bar';
+                        else if (metricType === 'ram') barClass = '.server-ram-bar';
+                        else if (metricType === 'gpu') barClass = '.server-gpu-bar';
+
+                        const bar = card.querySelector(barClass);
+                        if (bar) {
+                            bar.style.width = `${latestValue}%`;
+                        }
+                    }
+                }
+            } catch (err) {
+                console.error(`Fehler beim Laden der ${metricType}-Metriken für Server ${serverId}:`, err);
+            }
+        }
+    }
+
+    // Initial laden und alle 30 Sekunden aktualisieren
+    loadCurrentMetrics();
+    setInterval(loadCurrentMetrics, 30000);
+</script>

Watcher/Views/Shared/_Layout.cshtml

@@ -104,7 +104,7 @@
 
                         <div>
                             <strong>@User.Identity?.Name</strong><br />
-                            <small class="text-muted">Profil ansehen</small>
+                            <small style="color: var(--color-text);">Profil ansehen</small>
                         </div>
                     </div>
                 </a>
@@ -115,7 +115,7 @@
             }
 
             <div class="mt-3 pt-3 border-top border-secondary text-center">
-                <small style="color: #adb5bd;">
+                <small style="color: var(--color-muted);">
                     @{
                         var statusColor = UpdateCheckStore.IsUpdateAvailable ? "#ffc107" : "#28a745";
                         var statusTitle = UpdateCheckStore.IsUpdateAvailable
@@ -123,7 +123,7 @@
                             : "System ist aktuell";
                     }
                     <span style="display: inline-block; width: 8px; height: 8px; background-color: @statusColor; border-radius: 50%; margin-right: 8px;" title="@statusTitle"></span>
-                    <i class="bi bi-box me-1"></i>Version: <strong style="color: #fff;">@VersionService.GetVersion()</strong>
+                    <i class="bi bi-box me-1"></i>Version: <strong style="color: var(--color-primary);">@VersionService.GetVersion()</strong>
                 </small>
             </div>
         </div>

Watcher/Views/System/Settings.cshtml

@@ -12,107 +12,96 @@
     <link rel="stylesheet" href="~/css/settings.css" />
 </head>
 
-<div class="Settingscontainer">
+<div class="container mt-4">
+    <h1 class="mb-4">
+        <i class="bi bi-gear-fill me-2"></i>Einstellungen
+    </h1>
 
-    <div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
-        <h4><i class="bi bi-pencil-square me-2"></i>Systemeinformationen</h4>
+    <!-- Systemeinformationen Card -->
+    <div class="card settings-card shadow-sm mb-4">
+        <div class="card-header">
+            <h5 class="mb-0">
+                <i class="bi bi-info-circle me-2"></i>Systemeinformationen
+            </h5>
+        </div>
+        <div class="card-body">
+            <!-- System Info Table -->
+            <div class="info-table">
+                <div class="info-row">
+                    <div class="info-label">
+                        <i class="bi bi-tag me-2"></i>Version
+                    </div>
+                    <div class="info-value">@ServerVersion</div>
+                </div>
 
-        <br>
+                <div class="info-row">
+                    <div class="info-label">
+                        <i class="bi bi-shield-lock me-2"></i>Authentifizierung
+                    </div>
+                    <div class="info-value">@(ViewBag.IdentityProvider ?? "nicht gefunden")</div>
+                </div>
 
-        <h5>Watcher Version: @ServerVersion</h5>
+                <div class="info-row">
+                    <div class="info-label">
+                        <i class="bi bi-database me-2"></i>Datenbank-Engine
+                    </div>
+                    <div class="info-value">@(DbEngine ?? "nicht gefunden")</div>
+                </div>
 
-        <hr class="my-4" />
-
-        <h5>Authentifizierungsmethode: <strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></h5>
-        
-
-        <hr class="my-4" />
-
-        <h5>Datenbank-Engine: <strong>@(DbEngine ?? "nicht gefunden")</strong></h5>
-
-        @if (ViewBag.DatabaseSize != null)
-        {
-            <h5>Datenbankgröße: <strong>@ViewBag.DatabaseSize</strong></h5>
-        }
-
-        <!-- Falls Sqlite verwendet wird können Backups erstellt werden -->
-        @if (DbEngine == "SQLite" || DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
-        {
-            <div class="d-flex gap-2">
-                <form asp-action="CreateSqlDump" method="post" asp-controller="Database">
-                    <button type="submit" class="btn btn-db">
-                        <i class="bi bi-save me-1"></i> Backup erstellen
-                    </button>
-                </form>
-
-                <form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
-                    <button type="submit" class="btn btn-db">
-                        <i class="bi bi-save me-1"></i> Backups verwalten
-                    </button>
-                </form>
+                @if (ViewBag.DatabaseSize != null)
+                {
+                    <div class="info-row">
+                        <div class="info-label">
+                            <i class="bi bi-hdd me-2"></i>Datenbankgröße
+                        </div>
+                        <div class="info-value">@ViewBag.DatabaseSize</div>
+                    </div>
+                }
             </div>
 
-        }
-        else if (DbEngine == "Microsoft.EntityFrameworkCore.MySQL")
-        {
-            <p> MySQL Dump aktuell nicht möglich </p>
-        }
-
-        <!-- Status für Erstellung eines Backups -->
-        @if (TempData["DumpMessage"] != null)
-        {
-            <div class="alert alert-success">
-                <i class="bi bi-check-circle me-1"></i>@TempData["DumpMessage"]
-            </div>
-        }
-        @if (TempData["DumpError"] != null)
-        {
-            <div class="alert alert-danger">
-                <i class="bi bi-exclamation-circle me-1"></i>@TempData["DumpError"]
-            </div>
-        }
+            <!-- Datenbank-Backups Section -->
+            @if (DbEngine == "SQLite" || DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
+            {
+                <hr class="my-4" />
+                <h6 class="mb-3">
+                    <i class="bi bi-archive me-2"></i>Datenbank-Backups
+                </h6>
+                <div class="backup-buttons">
+                    <form asp-action="CreateSqlDump" method="post" asp-controller="Database">
+                        <button type="submit" class="btn btn-outline-primary">
+                            <i class="bi bi-plus-circle me-2"></i>Backup erstellen
+                        </button>
+                    </form>
+                    <form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
+                        <button type="submit" class="btn btn-outline-primary">
+                            <i class="bi bi-folder2-open me-2"></i>Backups verwalten
+                        </button>
+                    </form>
+                </div>
+            }
+            else if (DbEngine == "Microsoft.EntityFrameworkCore.MySQL")
+            {
+                <hr class="my-4" />
+                <div class="alert alert-info">
+                    <i class="bi bi-info-circle me-2"></i>MySQL Dump aktuell nicht möglich
+                </div>
+            }
 
+            <!-- Status Messages -->
+            @if (TempData["DumpMessage"] != null)
+            {
+                <div class="alert alert-success mt-3">
+                    <i class="bi bi-check-circle me-2"></i>@TempData["DumpMessage"]
+                </div>
+            }
+            @if (TempData["DumpError"] != null)
+            {
+                <div class="alert alert-danger mt-3">
+                    <i class="bi bi-exclamation-circle me-2"></i>@TempData["DumpError"]
+                </div>
+            }
+        </div>
     </div>
 
-    <div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
-        <h4><i class="bi bi-pencil-square me-2"></i>Benachrichtungen</h4>
     
-        <p>Registrierte E-Mail Adresse: <strong>@(ViewBag.mail ?? "nicht gefunden")</strong></p>
-
-        <!-- action="/Notification/UpdateSettings" existiert noch nicht-->
-        <form method="post" action="#">
-            <div class="card p-4 shadow-sm" style="max-width: 500px;">
-                <h5 class="card-title mb-3">
-                    <i class="bi bi-bell me-2"></i>Benachrichtigungseinstellungen
-                </h5>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyOffline" name="NotifyOffline" checked>
-                    <label class="form-check-label" for="notifyOffline">Benachrichtigung bei Server-Offline</label>
-                </div>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyUpdates" name="NotifyUpdates">
-                    <label class="form-check-label" for="notifyUpdates">Benachrichtigung bei neuen Updates</label>
-                </div>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyUser" name="NotifyUser">
-                    <label class="form-check-label" for="notifyUser">Benachrichtigung bei neuen Benutzern</label>
-                </div>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyMaintenance" name="NotifyMaintenance">
-                    <label class="form-check-label" for="notifyMaintenance">Wartungsinformationen erhalten</label>
-                </div>
-
-                <button type="submit" class="btn btn-db mt-3">
-                    <i class="bi bi-save me-1"></i>Speichern
-                </button>
-            </div>
-        </form>
-
-        <hr class="my-4" />
-
-    </div>
 </div>

Watcher/wwwroot/css/Login.css

@@ -19,6 +19,6 @@
 }
 
 .form-error {
-    color: #ff6b6b;
+    color: var(--color-danger);
     font-size: 0.875rem;
 }

Watcher/wwwroot/css/server-detail.css

@@ -1,20 +1,90 @@
-.info {
-    margin: 2rem;
-    margin-top: 3rem;
+/* Server Details - Info Card */
+.info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
 }
 
-.hardware {
-    margin: 2rem;
-    margin-top: 3rem;
+.info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
 }
 
+.info-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--color-muted) !important;
+    display: flex;
+    align-items: center;
+}
+
+.info-value {
+    font-size: 0.95rem;
+    font-weight: 400;
+    padding-left: 1.25rem;
+    color: var(--color-text, #f9feff) !important;
+}
+
+/* All text within info-value should be visible */
+.info-value,
+.info-value *,
+.info-value span,
+.info-value .text-muted,
+.info-value .text-success {
+    color: var(--color-text, #f9feff) !important;
+}
+
+.info-value .text-muted {
+    font-style: italic;
+    font-size: 0.9rem;
+}
+
+/* Section Headers in Info Card */
+.card-body h6.text-muted {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    color: var(--color-text) !important;
+}
+
+.card-body h6.text-muted i {
+    font-size: 1rem;
+}
+
+/* Description and other text-muted paragraphs */
+.card-body p.text-muted {
+    color: var(--color-text) !important;
+}
+
+/* Graph Container */
 .graphcontainer {
     height: 25rem;
     width: 100%;
-    background-color: var(--color-surface);
+    background-color: var(--color-surface, #212121);
+    border-radius: 0.375rem;
 }
 
 .graph {
     width: 100%;
     height: 22rem;
 }
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .info-item {
+        margin-bottom: 0.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .card-header .d-flex.gap-2 {
+        flex-wrap: wrap;
+    }
+
+    .card-header .btn-sm {
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+    }
+}

Watcher/wwwroot/css/server-overview.css

@@ -0,0 +1,106 @@
+/* Server Card Styling */
+.server-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    background: var(--color-surface);
+    color: var(--color-text);
+}
+
+.server-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.server-card .card-header {
+    background-color: var(--color-bg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0.75rem 1rem;
+}
+
+.server-card .card-body {
+    padding: 1rem;
+}
+
+/* Ensure all text in server-card uses light color */
+.server-card,
+.server-card * {
+    color: var(--color-text);
+}
+
+/* Allow Bootstrap badge colors to work */
+.server-card .badge {
+    color: white;
+}
+
+/* Allow button colors to work */
+.server-card .btn {
+    color: inherit;
+}
+
+/* Server Info Rows */
+.server-info {
+    font-size: 0.9rem;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    color: var(--color-muted);
+    font-weight: 500;
+}
+
+.info-value {
+    word-break: break-all;
+}
+
+/* Current Metrics Section */
+.current-metrics h6 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.metric-bar-item {
+    margin-bottom: 0.5rem;
+}
+
+.metric-bar-item:last-child {
+    margin-bottom: 0;
+}
+
+.progress {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Action Buttons */
+.action-buttons .btn {
+    font-size: 0.85rem;
+    padding: 0.4rem 0.6rem;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .action-buttons {
+        flex-direction: column;
+    }
+
+    .action-buttons .btn {
+        width: 100%;
+    }
+}
+
+/* Badge Styling */
+.badge {
+    font-size: 0.75rem;
+    padding: 0.35em 0.65em;
+}

Watcher/wwwroot/css/services-overview.css

@@ -1,12 +1,124 @@
-.ServiceList {
-    width: 80%;
+/* Container Card Styling */
+.container-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    background: var(--color-surface);
 }
 
-.ServiceRow {
-    border-style: solid;
-    border-color: var(--color-text);
+.container-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
 }
 
-.ServiceEntry {
-    text-decoration: none;
+.container-card .card-header {
+    background-color: var(--color-bg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0.75rem 1rem;
+}
+
+.container-card .card-body {
+    padding: 1rem;
+}
+
+/* Container Info Rows */
+.container-info {
+    font-size: 0.9rem;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    color: var(--color-muted);
+    font-weight: 500;
+}
+
+.info-value {
+    color: var(--color-text, #f9feff);
+    word-break: break-all;
+}
+
+.info-value a {
+    color: var(--color-text);
+    transition: color 0.2s ease;
+}
+
+.info-value a:hover {
+    color: var(--color-primary);
+}
+
+/* Action Buttons */
+.action-buttons .btn {
+    font-size: 0.85rem;
+    padding: 0.4rem 0.6rem;
+}
+
+/* Metrics Panel */
+.metrics-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.metrics-panel.show {
+    max-height: 500px;
+    transition: max-height 0.4s ease-in;
+}
+
+.metrics-content {
+    background-color: var(--color-bg) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metric-item {
+    margin-bottom: 0.5rem;
+}
+
+.metric-item:last-child {
+    margin-bottom: 0;
+}
+
+.progress {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Toggle Button */
+.toggle-metrics {
+    transition: all 0.2s ease;
+}
+
+.toggle-metrics:hover {
+    transform: scale(1.02);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .action-buttons {
+        flex-direction: column;
+    }
+
+    .action-buttons .btn {
+        width: 100%;
+    }
+}
+
+/* Badge Styling */
+.badge {
+    font-size: 0.75rem;
+    padding: 0.35em 0.65em;
+}
+
+/* Server Group Header */
+h5.text-muted {
+    font-weight: 600;
+    border-bottom: 2px solid var(--color-accent);
+    padding-bottom: 0.5rem;
 }

Watcher/wwwroot/css/settings.css

@@ -1,24 +1,158 @@
-.Settingscontainer {
+/* Settings Card Styling - gleicher Stil wie Server Cards */
+.settings-card {
+    background: var(--color-surface);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.settings-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.settings-card .card-header {
+    background-color: var(--color-bg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0.75rem 1rem;
+}
+
+.settings-card .card-header h5 {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.settings-card .card-body {
+    padding: 1rem;
+}
+
+/* Info Table Layout - ähnlich wie Server Info Rows */
+.info-table {
     display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    transition: background-color 0.2s ease;
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-row:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.info-label {
+    color: var(--color-muted);
+    font-weight: 500;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+}
+
+.info-label i {
+    color: var(--color-accent);
+}
+
+.info-value {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-align: right;
+}
+
+/* Subsection Headers */
+.settings-card h6 {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Backup Buttons */
+.backup-buttons {
+    display: flex;
+    gap: 0.75rem;
     flex-wrap: wrap;
-    /* Wichtig: erlaubt Umbruch */
-    gap: 1rem;
-    /* optionaler Abstand */
 }
 
-.Settingscontainer>* {
-    flex: 1 1 calc(50% - 0.5rem);
-    /* 2 Elemente pro Zeile, inkl. Gap */
-    box-sizing: border-box;
+.backup-buttons form {
+    flex: 1;
+    min-width: 200px;
 }
 
-.btn-db {
-    background-color: var(--color-primary);
-    border: none;
+.backup-buttons .btn {
+    width: 100%;
 }
 
-.btn-db:hover {
-    background-color: var(--color-accent);
-    border: none;
+/* Button Styling */
+.settings-card .btn {
+    font-weight: 500;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.75rem;
+    transition: all 0.2s ease;
 }
 
+.settings-card .btn-outline-primary {
+    border-color: var(--color-accent) !important;
+    color: var(--color-accent) !important;
+    background-color: transparent !important;
+}
+
+.settings-card .btn-outline-primary:hover {
+    background-color: var(--color-accent) !important;
+    border-color: var(--color-accent) !important;
+    color: white !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.settings-card .btn-outline-primary:active,
+.settings-card .btn-outline-primary:focus,
+.settings-card .btn-outline-primary:focus-visible {
+    background-color: var(--color-accent) !important;
+    border-color: var(--color-accent) !important;
+    color: white !important;
+}
+
+/* HR Styling */
+.settings-card hr {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 1.5rem 0;
+}
+
+/* Alert Styling */
+.alert {
+    border-radius: 0.375rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .info-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+        padding: 0.75rem;
+    }
+
+    .info-value {
+        text-align: left;
+    }
+
+    .backup-buttons {
+        flex-direction: column;
+    }
+
+    .backup-buttons form {
+        width: 100%;
+    }
+}

Watcher/wwwroot/css/site.css

@@ -6,6 +6,7 @@
     --color-text: #f9feff;
     --color-muted: #c0c0c0;
     --color-success: #14a44d;
+    --color-success-hover: #0f8c3c;
     --color-danger: #ff6b6b;
 }
 
@@ -54,9 +55,30 @@ a {
 }
 
 .btn-pocketid:hover {
-    background-color: #0f8c3c;
+    background-color: var(--color-success-hover);
 }
 
 hr {
     border-top: 1px solid var(--color-accent);
 }
+
+/* Bootstrap Overrides für Dark Theme */
+.text-muted {
+    color: var(--color-muted) !important;
+}
+
+.bg-light {
+    background-color: var(--color-surface) !important;
+}
+
+.text-text {
+    color: var(--color-text) !important;
+}
+
+.text-primary-emphasis {
+    color: var(--color-primary) !important;
+}
+
+.border-secondary {
+    border-color: rgba(255, 255, 255, 0.2) !important;
+}

Watcher/wwwroot/css/user-info.css

@@ -1,6 +1,5 @@
 .table {
-    color: red;
-
+    color: var(--color-text);
 }
 
 .picture {