diff --git a/html/img/bronze.png b/html/img/bronze.png
new file mode 100644
index 0000000..c1286ff
Binary files /dev/null and b/html/img/bronze.png differ
diff --git a/html/img/champion.png b/html/img/champion.png
new file mode 100644
index 0000000..dfad8b1
Binary files /dev/null and b/html/img/champion.png differ
diff --git a/html/img/diamond.png b/html/img/diamond.png
new file mode 100644
index 0000000..14a6233
Binary files /dev/null and b/html/img/diamond.png differ
diff --git a/html/img/gold.png b/html/img/gold.png
new file mode 100644
index 0000000..ac667b9
Binary files /dev/null and b/html/img/gold.png differ
diff --git a/html/img/master.png b/html/img/master.png
new file mode 100644
index 0000000..305f0f9
Binary files /dev/null and b/html/img/master.png differ
diff --git a/html/img/platin.png b/html/img/platin.png
new file mode 100644
index 0000000..32295b4
Binary files /dev/null and b/html/img/platin.png differ
diff --git a/html/img/silver.png b/html/img/silver.png
new file mode 100644
index 0000000..b3106db
Binary files /dev/null and b/html/img/silver.png differ
diff --git a/html/ninjioverlay.html b/html/ninjioverlay.html
new file mode 100644
index 0000000..e335c32
--- /dev/null
+++ b/html/ninjioverlay.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ninji Leaderboard Ticker</title>
+  <style>
+    :root {
+      --bg-color: #00ff00;
+      --card-bg: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --accent: #38bdf8;
+      --gold: #f59e0b;
+      --highlight-bg: #1e1b4b; /* Dunkles Lila/Blau für kaizobrothers */
+      --highlight-border: #818cf8;
+      --border-color: #334155;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Container für den flachen Ticker */
+    .ticker-wrapper {
+      width: 100%;
+      background: rgba(15, 23, 42, 0);
+      border-top: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+      padding: 8px 0; /* Flachere Höhe */
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+    }
+
+    .ticker-wrapper::before,
+    .ticker-wrapper::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      width: 0px;
+      height: 100%;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .ticker-wrapper::before {
+      left: 0;
+      background: linear-gradient(to right, var(--bg-color), transparent);
+    }
+
+    .ticker-wrapper::after {
+      right: 0;
+      background: linear-gradient(to left, var(--bg-color), transparent);
+    }
+
+    .ticker-content {
+      display: inline-flex;
+      gap: 10px;
+      animation: marquee 20s linear infinite;
+    }
+
+    .ticker-wrapper:hover .ticker-content {
+      animation-play-state: paused;
+    }
+
+    /* Kompakte, flache Karte (Einzeiliges Flex-Layout) */
+    .player-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 6px 14px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 0.9rem;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Spezielles Highlight für kaizobrothers */
+    .player-card.highlight {
+      background: var(--highlight-bg);
+      border-color: var(--highlight-border);
+      box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
+    }
+
+    /* Styling für die Divisions-Karte am Anfang */
+    .player-card.division-card {
+      background: linear-gradient(135deg, #0284c7, #0369a1);
+      border-color: #38bdf8;
+      box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+      padding: 6px 16px;
+      gap: 8px;
+    }
+
+    .division-title {
+      font-size: 0.75rem;
+      font-weight: 800;
+      letter-spacing: 1px;
+      color: #bae6fd;
+      text-transform: uppercase;
+    }
+
+    .division-name {
+      font-size: 1rem;
+      font-weight: 800;
+      color: #ffffff;
+    }
+
+    .division-icon-large {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    }
+
+    .division-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .rank-badge {
+      background: var(--border-color);
+      color: var(--accent);
+      font-weight: bold;
+      font-size: 0.8rem;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    .rank-1 { 
+      background: var(--gold); 
+      color: #000; 
+    }
+
+    .player-name {
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .player-card.highlight .player-name {
+      color: #a5b4fc; /* Heller Violett-Ton für den Namen */
+    }
+
+    .card-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+    }
+
+    .divider {
+      color: var(--border-color);
+    }
+
+    .total-time {
+      color: var(--accent);
+      font-weight: 700;
+    }
+
+    .player-card.highlight .total-time {
+      color: #38bdf8;
+    }
+
+    @keyframes marquee {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="ticker-wrapper">
+    <div class="ticker-content" id="ticker"></div>
+  </div>
+
+  <script>
+    //
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentUser = (urlParams.get('user') || 'dennsen86').toLowerCase(); 
+    const SPEED_SECONDS = parseInt(urlParams.get('speed') || '20', 10);
+
+
+    const bgColor = urlParams.get('bg'); // Liest z. B. ?bg=ff0000 oder ?bg=000000
+
+    if (bgColor) {
+      // Fügt bei Bedarf ein '#' hinzu, falls der Hex-Code ohne übergeben wurde
+      const formattedColor = bgColor.startsWith('#') ? bgColor : `#${bgColor}`;
+    
+      // Überschreibt --bg-color direkt auf :root Level
+      document.documentElement.style.setProperty('--bg-color', formattedColor);
+    }
+
+    const API_URL = 'https://api.kaizobrothers.de/ninjiapi/division/user/' + currentUser;
+    
+    // Intervall für automatische Updates (30 Sekunden)
+    const REFRESH_INTERVAL = 30000; 
+
+    const ticker = document.getElementById('ticker');
+
+    function createCardHTML(item) {
+      const isTopRank = item.overallRank === 1 ? 'rank-1' : '';
+      
+      // Prüfen, ob der Spieler kaizobrothers ist (Case-Insensitive)
+
+      const isUser = item.player && item.player.toLowerCase() === currentUser;
+      const highlightClass = isUser ? 'highlight' : '';
+
+      return `
+        <div class="player-card ${highlightClass}">
+          <span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
+          <span class="player-name">${item.player}</span>
+          <div class="card-info">
+            <span class="divider">|</span>
+            <span>P1: ${item.part1} / P2: ${item.part2}</span>
+            <span class="divider">|</span>
+            <span class="total-time">${item.totalTime}s</span>
+          </div>
+        </div>
+      `;
+    }
+
+    function createDivisionCardHTML(divisionName) {
+      const divName = (divisionName || 'master').toLowerCase();
+      const imgPath = `img/${divName}.png`;
+
+      return `
+        <div class="player-card division-card">
+          <img src="${imgPath}" class="division-icon-large" alt="${divisionName}" onerror="this.style.display='none'">
+          <div class="division-text">
+            <span class="division-title">DIVISION</span>
+            <span class="division-name">${divisionName}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    function renderTicker(data) {
+      if (!data || data.length === 0) {
+        ticker.innerHTML = '<div class="player-card">Keine Daten verfügbar</div>';
+        return;
+      }
+      ticker.style.animationDuration = `${SPEED_SECONDS}s`;
+
+      // 1. Name der Division ermitteln (z. B. "Master")
+      const divisionName = data[0]?.division || 'Leaderboard';
+
+      // 2. Karten HTML-Strings generieren
+      const divisionCardHTML = createDivisionCardHTML(divisionName);
+      const playerCardsHTML = data.map(item => createCardHTML(item)).join('');
+
+      // 3. Zusammenbauen und verdoppeln für den nahtlosen Loop
+      const fullSetHTML = divisionCardHTML + playerCardsHTML;
+      ticker.innerHTML = fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML; 
+    }
+
+    // Die async-Funktion für den API-Aufruf
+    async function loadApiData() {
+      try {
+        const response = await fetch(API_URL);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP-Fehler! Status: ${response.status}`);
+        }
+
+        const json = await response.json();
+
+        // Da die API direkt das Array [ {...}, {...} ] liefert:
+        const playersList = Array.isArray(json) ? json : (json.data?.leaderboard || []);
+        
+        renderTicker(playersList);
+
+      } catch (err) {
+        console.error("Fehler beim Abrufen der API-Daten:", err);
+        ticker.innerHTML = `
+          <div class="player-card" style="border-color: #ef4444;">
+            <span style="color: #ef4444;">API nicht erreichbar (${err.message})</span>
+          </div>
+        `;
+      }
+    }
+
+    // 1. Erster Aufruf direkt beim Laden der Seite
+    loadApiData();
+
+    // 2. Automatischer Re-Fetch im Hintergrund
+    setInterval(loadApiData, REFRESH_INTERVAL);
+  </script>
+</body>
+</html>
