diff --git a/public/hitstar.png b/public/hitstar.png
index d9c4633..00d952c 100644
Binary files a/public/hitstar.png and b/public/hitstar.png differ
diff --git a/public/index.html b/public/index.html
index ba246d1..ab696e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,342 +1,262 @@
 <!doctype html>
 <html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hitstar Web</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="/socket.io/socket.io.js"></script>
-    <style>
-      @keyframes record-spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
-        }
-      }
-      .spin-record {
-        animation: record-spin 3.2s linear infinite;
-      }
-    </style>
-  </head>
-  <body class="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
-    <div id="app" class="max-w-5xl mx-auto p-4 md:p-6">
-      <header class="mb-6 md:mb-8">
-        <h1 class="text-3xl md:text-4xl font-bold tracking-tight">Hitstar</h1>
-        <p class="text-slate-500 dark:text-slate-400 mt-1">
-          Lokales Multiplayer-Spiel mit deiner eigenen Musik
-        </p>
-      </header>
-      <!-- Toast Notification -->
-      <div
-        id="toast"
-        class="fixed top-6 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium shadow-lg opacity-0 pointer-events-none transition-opacity duration-500"
-      >
-        Code kopiert!
-      </div>
 
-      <!-- Lobby Card -->
-      <div
-        id="lobby"
-        class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 md:p-6 space-y-4"
-      >
-        <div class="flex flex-col sm:flex-row gap-3 sm:items-end">
-          <label class="flex-1 text-sm font-medium text-slate-600 dark:text-slate-300">
-            Dein Name
-            <input
-              id="name"
-              placeholder="Name"
-              class="mt-1 w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 py-2 h-11 outline-none focus:ring-2 focus:ring-indigo-500"
-            />
-          </label>
-          <button
-            id="setName"
-            class="h-11 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium"
-          >
-            Setzen
-          </button>
-        </div>
-        <div class="flex flex-col sm:flex-row gap-3">
-          <button
-            id="createRoom"
-            class="h-11 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium"
-          >
-            Raum erstellen
-          </button>
-          <input
-            id="roomCode"
-            placeholder="Code"
-            class="flex-1 h-11 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 outline-none focus:ring-2 focus:ring-indigo-500"
-          />
-          <button
-            id="joinRoom"
-            class="h-11 px-4 rounded-lg bg-slate-900 hover:bg-slate-700 text-white font-medium dark:bg-slate-700 dark:hover:bg-slate-600"
-          >
-            Beitreten
-          </button>
-        </div>
-      </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hitstar Web</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="/socket.io/socket.io.js"></script>
+  <style>
+    @keyframes record-spin {
+      from {
+        transform: rotate(0deg);
+      }
 
-      <!-- Room Card -->
-      <div
-        id="room"
-        class="hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 md:p-6 space-y-4"
-      >
-        <div class="flex items-center justify-between gap-3">
-          <h2 class="text-xl md:text-2xl font-semibold flex items-center gap-2">
-            Raum
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .spin-record {
+      animation: record-spin 3.2s linear infinite;
+    }
+
+    /* Dashboard chevron rotation when section is open */
+    #dashboard .dashboard-chevron {
+      transition: transform 200ms ease;
+      transform-origin: 50% 50%;
+    }
+
+    #dashboard[open] .dashboard-chevron {
+      transform: rotate(90deg);
+    }
+  </style>
+</head>
+
+<body class="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
+  <div id="app" class="max-w-5xl mx-auto p-4 md:p-6">
+    <header class="mb-6 md:mb-8">
+      <h1 class="text-3xl md:text-4xl font-bold tracking-tight">Hitstar</h1>
+      <p class="text-slate-500 dark:text-slate-400 mt-1">
+        Lokales Multiplayer-Spiel mit deiner eigenen Musik
+      </p>
+    </header>
+    <!-- Toast Notification -->
+    <div id="toast"
+      class="fixed top-6 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium shadow-lg opacity-0 pointer-events-none transition-opacity duration-500">
+      Code kopiert!
+    </div>
+
+    <!-- Lobby Card -->
+    <div id="lobby"
+      class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 md:p-6 space-y-4">
+      <div class="flex flex-col sm:flex-row gap-3 sm:items-end">
+        <label class="flex-1 text-sm font-medium text-slate-600 dark:text-slate-300">
+          Dein Name
+          <input id="name" placeholder="Name"
+            class="mt-1 w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 py-2 h-11 outline-none focus:ring-2 focus:ring-indigo-500" />
+        </label>
+        <button id="setName" class="h-11 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium">
+          Setzen
+        </button>
+      </div>
+      <div class="flex flex-col sm:flex-row gap-3">
+        <button id="createRoom" class="h-11 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium">
+          Raum erstellen
+        </button>
+        <input id="roomCode" placeholder="Code"
+          class="flex-1 h-11 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 outline-none focus:ring-2 focus:ring-indigo-500" />
+        <button id="joinRoom"
+          class="h-11 px-4 rounded-lg bg-slate-900 hover:bg-slate-700 text-white font-medium dark:bg-slate-700 dark:hover:bg-slate-600">
+          Beitreten
+        </button>
+      </div>
+    </div>
+
+    <!-- Room Card -->
+    <div id="room"
+      class="hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 md:p-6 space-y-4">
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="text-xl md:text-2xl font-semibold flex items-center gap-2">
+          Raum
+          <span id="roomId" class="font-mono tracking-wider cursor-pointer" title="Klicken zum Kopieren"></span>
+        </h2>
+        <button id="leaveRoom"
+          class="h-10 px-4 rounded-lg border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800">
+          Verlassen
+        </button>
+      </div>
+      <!-- Expandable Dashboard: player statuses and scores -->
+      <div>
+        <details id="dashboard"
+          class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white/60 dark:bg-slate-900/40 p-3">
+          <summary
+            class="cursor-pointer select-none text-sm font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-2">
+            <svg class="dashboard-chevron h-4 w-4 text-slate-500" viewBox="0 0 20 20" fill="currentColor"
+              aria-hidden="true">
+              <path fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd" />
+            </svg>
             <span
-              id="roomId"
-              class="font-mono tracking-wider cursor-pointer"
-              title="Klicken zum Kopieren"
-            ></span>
-          </h2>
-          <button
-            id="leaveRoom"
-            class="h-10 px-4 rounded-lg border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800"
-          >
-            Verlassen
+              class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-white text-[11px] font-bold">i</span>
+            Dashboard: Spielerstatus & Punkte
+            <span id="dashboardHint"
+              class="ml-auto text-xs font-normal text-slate-500 dark:text-slate-400 italic hidden">
+              Tipp: Klick zum Ein-/Ausklappen
+            </span>
+          </summary>
+          <div class="mt-3 overflow-x-auto">
+            <table class="min-w-full text-sm">
+              <thead class="text-left text-slate-500 dark:text-slate-400">
+                <tr>
+                  <th class="py-2 pr-3">Spieler</th>
+                  <th class="py-2 pr-3">Verbindung</th>
+                  <th class="py-2 pr-3">Ready</th>
+                  <th class="py-2 pr-3">Score</th>
+                </tr>
+              </thead>
+              <tbody id="dashboardList" class="divide-y divide-slate-200 dark:divide-slate-800"></tbody>
+            </table>
+          </div>
+        </details>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
+        <div class="space-y-1">
+          <div class="text-slate-700 dark:text-slate-300">
+            Status: <span id="status" class="font-medium"></span>
+          </div>
+          <div class="text-slate-700 dark:text-slate-300">
+            Am Zug: <span id="guesser" class="font-medium"></span>
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center gap-3 justify-start md:justify-end">
+          <label class="inline-flex items-center gap-3 text-slate-700 dark:text-slate-300 select-none">
+            <input type="checkbox" id="readyChk" class="peer sr-only" aria-label="Bereit um zu starten" />
+            <span
+              class="relative inline-flex h-6 w-10 shrink-0 cursor-pointer rounded-full bg-slate-300 transition-colors duration-200 dark:bg-slate-700 peer-checked:bg-emerald-500 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500 before:absolute before:top-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:shadow before:transition-transform before:duration-200 peer-checked:before:translate-x-4"></span>
+            <span>Bereit</span>
+          </label>
+          <button id="startGame"
+            class="hidden h-10 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium">
+            Spiel starten (Host)
           </button>
         </div>
+      </div>
 
-        <div class="text-slate-700 dark:text-slate-300">
-          Dein Name: <strong id="nameDisplay" class="font-semibold"></strong>
-        </div>
-
-        <!-- Expandable Dashboard: player statuses and scores -->
-        <div>
-          <details
-            id="dashboard"
-            class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white/60 dark:bg-slate-900/40 p-3"
-          >
-            <summary
-              class="cursor-pointer select-none text-sm font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-2"
-            >
-              <span
-                class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-white text-[11px] font-bold"
-                >i</span
-              >
-              Dashboard: Spielerstatus & Punkte
-            </summary>
-            <div class="mt-3 overflow-x-auto">
-              <table class="min-w-full text-sm">
-                <thead class="text-left text-slate-500 dark:text-slate-400">
-                  <tr>
-                    <th class="py-2 pr-3">Spieler</th>
-                    <th class="py-2 pr-3">Verbindung</th>
-                    <th class="py-2 pr-3">Ready</th>
-                    <th class="py-2 pr-3">Score</th>
-                  </tr>
-                </thead>
-                <tbody
-                  id="dashboardList"
-                  class="divide-y divide-slate-200 dark:divide-slate-800"
-                ></tbody>
-              </table>
-            </div>
-          </details>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
-          <div class="space-y-1">
-            <div class="text-slate-700 dark:text-slate-300">
-              Status: <span id="status" class="font-medium"></span>
-            </div>
-            <div class="text-slate-700 dark:text-slate-300">
-              Am Zug: <span id="guesser" class="font-medium"></span>
-            </div>
-          </div>
-          <div class="flex flex-wrap items-center gap-3 justify-start md:justify-end">
-            <label
-              class="inline-flex items-center gap-3 text-slate-700 dark:text-slate-300 select-none"
-            >
-              <input
-                type="checkbox"
-                id="readyChk"
-                class="peer sr-only"
-                aria-label="Bereit um zu starten"
-              />
-              <span
-                class="relative inline-flex h-6 w-10 shrink-0 cursor-pointer rounded-full bg-slate-300 transition-colors duration-200 dark:bg-slate-700 peer-checked:bg-emerald-500 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500 before:absolute before:top-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:shadow before:transition-transform before:duration-200 peer-checked:before:translate-x-4"
-              ></span>
-              <span>Bereit</span>
-            </label>
-            <button
-              id="startGame"
-              class="hidden h-10 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium"
-            >
-              Spiel starten (Host)
-            </button>
+      <div id="nowPlaying"
+        class="hidden rounded-lg border border-slate-200 dark:border-slate-800 p-4 bg-slate-50/60 dark:bg-slate-800/60">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+          <div class="text-lg font-semibold">
+            <strong id="npTitle">&nbsp;</strong><span id="npArtist"></span><span id="npYear"
+              class="text-slate-500"></span>
           </div>
+          <div id="revealBanner" class="hidden"></div>
         </div>
-
-        <div
-          id="nowPlaying"
-          class="hidden rounded-lg border border-slate-200 dark:border-slate-800 p-4 bg-slate-50/60 dark:bg-slate-800/60"
-        >
-          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
-            <div class="text-lg font-semibold">
-              <strong id="npTitle">&nbsp;</strong><span id="npArtist"></span
-              ><span id="npYear" class="text-slate-500"></span>
-            </div>
-            <div id="revealBanner" class="hidden"></div>
-          </div>
-          <div class="mt-3">
-            <audio id="audio" preload="none" class="hidden"></audio>
-            <div class="flex flex-col items-center">
-              <!-- Record Disc -->
-              <div class="relative" style="width: 200px; height: 200px">
-                <img
-                  id="recordDisc"
-                  src="/hitstar.png"
-                  alt="Record"
-                  class="w-full h-full rounded-full object-cover shadow-lg ring-2 ring-slate-300 dark:ring-slate-700"
-                />
-                <!-- center hole overlay -->
-                <div
-                  class="pointer-events-none absolute inset-0 rounded-full"
-                  style="
+        <div class="mt-3">
+          <audio id="audio" preload="none" class="hidden"></audio>
+          <div class="flex flex-col items-center">
+            <!-- Record Disc -->
+            <div class="relative" style="width: 200px; height: 200px">
+              <img id="recordDisc" src="/hitstar.png" alt="Record"
+                class="w-full h-full rounded-full object-cover shadow-lg ring-2 ring-slate-300 dark:ring-slate-700" />
+              <!-- center hole overlay -->
+              <div class="pointer-events-none absolute inset-0 rounded-full" style="
                     background: radial-gradient(
                       circle at center,
                       transparent 0 14px,
                       rgba(0, 0, 0, 0.22) 14px,
                       transparent 16px
                     );
-                  "
-                ></div>
-                <!-- buffering badge -->
-                <div
-                  id="bufferBadge"
-                  class="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-slate-900/80 text-white text-xs px-2 py-1 hidden"
-                >
-                  Buffering…
-                </div>
+                  "></div>
+              <!-- buffering badge -->
+              <div id="bufferBadge"
+                class="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-slate-900/80 text-white text-xs px-2 py-1 hidden">
+                Buffering…
               </div>
-
-              <!-- Progress bar -->
-              <div class="mt-4 w-full">
-                <div
-                  class="relative h-2 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden"
-                >
-                  <div
-                    id="progressFill"
-                    class="absolute left-0 top-0 h-full bg-indigo-600"
-                    style="width: 0%"
-                  ></div>
-                </div>
-              </div>
-
-              <!-- Controls (Play/Pause restricted to guesser) -->
-              <div id="mediaControls" class="hidden mt-4 flex items-center gap-3">
-                <button
-                  id="playBtn"
-                  class="h-10 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium"
-                >
-                  Play
-                </button>
-                <button
-                  id="pauseBtn"
-                  class="h-10 px-4 rounded-lg bg-rose-600 hover:bg-rose-700 text-white font-medium"
-                >
-                  Pause
-                </button>
-              </div>
-
-              <!-- Volume (available to all players) -->
-              <div class="mt-3">
-                <label
-                  class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300"
-                >
-                  Lautstärke
-                  <input
-                    id="volumeSlider"
-                    type="range"
-                    min="0"
-                    max="1"
-                    step="0.01"
-                    class="w-40 accent-indigo-600"
-                  />
-                </label>
-              </div>
-
-              <!-- Answer form: everyone can try to guess title & artist for a coin -->
-              <form
-                id="answerForm"
-                class="mt-4 w-full flex flex-col md:flex-row gap-2 md:items-end"
-              >
-                <label class="flex-1 text-sm">
-                  <span class="text-slate-700 dark:text-slate-300">Titel</span>
-                  <input
-                    id="guessTitle"
-                    name="title"
-                    placeholder="Songtitel"
-                    autocomplete="off"
-                    class="mt-1 w-full h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3"
-                  />
-                </label>
-                <label class="flex-1 text-sm">
-                  <span class="text-slate-700 dark:text-slate-300">Künstler</span>
-                  <input
-                    id="guessArtist"
-                    name="artist"
-                    placeholder="Künstler"
-                    autocomplete="off"
-                    class="mt-1 w-full h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3"
-                  />
-                </label>
-                <button
-                  id="submitAnswer"
-                  type="submit"
-                  class="h-10 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium"
-                >
-                  Abschicken
-                </button>
-              </form>
-              <div id="answerResult" class="mt-1 text-sm"></div>
             </div>
-          </div>
-          <div class="mt-3 flex flex-wrap items-center gap-3">
-            <div id="placeArea" class="hidden flex items-center gap-2">
-              <label class="text-sm text-slate-600 dark:text-slate-300"
-                >Position:
-                <select
-                  id="slotSelect"
-                  class="ml-2 h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3"
-                ></select>
+
+            <!-- Progress bar -->
+            <div class="mt-4 w-full">
+              <div class="relative h-2 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden">
+                <div id="progressFill" class="absolute left-0 top-0 h-full bg-indigo-600" style="width: 0%"></div>
+              </div>
+            </div>
+
+            <!-- Controls (Play/Pause restricted to guesser) -->
+            <div id="mediaControls" class="hidden mt-4 flex items-center gap-3">
+              <button id="playBtn"
+                class="h-10 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium">
+                Play
+              </button>
+              <button id="pauseBtn" class="h-10 px-4 rounded-lg bg-rose-600 hover:bg-rose-700 text-white font-medium">
+                Pause
+              </button>
+            </div>
+
+            <!-- Volume (available to all players) -->
+            <div class="mt-3">
+              <label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                Lautstärke
+                <input id="volumeSlider" type="range" min="0" max="1" step="0.01" class="w-40 accent-indigo-600" />
               </label>
-              <button
-                id="placeBtn"
-                class="h-10 px-4 rounded-lg bg-slate-900 hover:bg-slate-700 text-white font-medium dark:bg-slate-700 dark:hover:bg-slate-600"
-              >
-                Platzieren
-              </button>
             </div>
-            <div id="nextArea" class="hidden">
-              <button
-                id="nextBtn"
-                class="h-10 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium"
-              >
-                Next
+
+            <!-- Answer form: everyone can try to guess title & artist for a coin -->
+            <form id="answerForm" class="mt-4 w-full flex flex-col md:flex-row gap-2 md:items-end">
+              <label class="flex-1 text-sm">
+                <span class="text-slate-700 dark:text-slate-300">Titel</span>
+                <input id="guessTitle" name="title" placeholder="Songtitel" autocomplete="off"
+                  class="mt-1 w-full h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3" />
+              </label>
+              <label class="flex-1 text-sm">
+                <span class="text-slate-700 dark:text-slate-300">Künstler</span>
+                <input id="guessArtist" name="artist" placeholder="Künstler" autocomplete="off"
+                  class="mt-1 w-full h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3" />
+              </label>
+              <button id="submitAnswer" type="submit"
+                class="h-10 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium">
+                Abschicken
               </button>
-            </div>
+            </form>
+            <div id="answerResult" class="mt-1 text-sm"></div>
           </div>
         </div>
-
-        <div>
-          <h3 class="text-lg font-semibold mt-2">Deine Zeitleiste</h3>
-          <div
-            id="timeline"
-            class="mt-2 flex flex-wrap gap-3 p-3 rounded-lg border border-slate-200 dark:border-slate-800 bg-white/60 dark:bg-slate-900/40 min-h-[64px]"
-          ></div>
-        </div>
-
-        <div class="flex items-center gap-3 text-slate-700 dark:text-slate-300">
-          Tokens: <span id="tokens" class="font-semibold">0</span>
+        <div class="mt-3 flex flex-wrap items-center gap-3">
+          <div id="placeArea" class="hidden flex items-center gap-2">
+            <label class="text-sm text-slate-600 dark:text-slate-300">Position:
+              <select id="slotSelect"
+                class="ml-2 h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3"></select>
+            </label>
+            <button id="placeBtn"
+              class="h-10 px-4 rounded-lg bg-slate-900 hover:bg-slate-700 text-white font-medium dark:bg-slate-700 dark:hover:bg-slate-600">
+              Platzieren
+            </button>
+          </div>
+          <div id="nextArea" class="hidden">
+            <button id="nextBtn" class="h-10 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium">
+              Next
+            </button>
+          </div>
         </div>
       </div>
-    </div>
 
-    <script src="/js/main.js" type="module"></script>
-  </body>
-</html>
+      <div>
+        <h3 class="text-lg font-semibold mt-2">Deine Zeitleiste</h3>
+        <div id="timeline"
+          class="mt-2 flex flex-wrap gap-3 p-3 rounded-lg border border-slate-200 dark:border-slate-800 bg-white/60 dark:bg-slate-900/40 min-h-[64px]">
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3 text-slate-700 dark:text-slate-300">
+        Tokens: <span id="tokens" class="font-semibold">0</span>
+      </div>
+    </div>
+  </div>
+
+  <script src="/js/main.js" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/js/dom.js b/public/js/dom.js
index a2ee7c0..1b5100d 100644
--- a/public/js/dom.js
+++ b/public/js/dom.js
@@ -3,6 +3,7 @@ const el = (id) => document.getElementById(id);
 export const $lobby = el('lobby');
 export const $room = el('room');
 export const $roomId = el('roomId');
+export const $nameDisplay = el('nameDisplay');
 export const $status = el('status');
 export const $guesser = el('guesser');
 export const $timeline = el('timeline');
@@ -30,7 +31,6 @@ export const $bufferBadge = el('bufferBadge');
 export const $copyRoomCode = el('copyRoomCode');
 export const $nameLobby = el('name');
 export const $setNameLobby = el('setName');
-export const $nameDisplay = el('nameDisplay');
 export const $createRoom = el('createRoom');
 export const $joinRoom = el('joinRoom');
 export const $roomCode = el('roomCode');
diff --git a/public/js/main.js b/public/js/main.js
index df1c65c..3ebfb51 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -44,7 +44,11 @@ function showToast(msg) {
 }
 
 function handleConnected(msg) {
+  console.debug('handleConnected', msg);
   state.playerId = msg.playerId;
+  try {
+    if (msg.playerId) localStorage.setItem('playerId', msg.playerId);
+  } catch {}
   if (msg.sessionId) {
     // Don't clobber an existing session on reconnect; only set if none exists yet.
     const existing = localStorage.getItem('sessionId');
@@ -66,11 +70,42 @@ function handleConnected(msg) {
   if (last && !localStorage.getItem('sessionId')) {
     sendMsg({ type: 'join_room', code: last });
   }
+  // If we already have a room snapshot, re-render now that we know our playerId
+  // to correctly compute host/permissions (e.g., Start button visibility).
+  if (state.room) {
+    try {
+      // If we somehow have a room snapshot already but our playerId doesn't match any player,
+      // and there's only one player, assume it's us (helps when resuming locally without resume).
+      const r = state.room;
+      if (r?.players?.length === 1) {
+        const only = r.players[0];
+        if (only && only.id && only.id !== state.playerId) {
+          state.playerId = only.id;
+          try {
+            localStorage.setItem('playerId', only.id);
+          } catch {}
+        }
+      }
+      renderRoom(state.room);
+    } catch {}
+  }
 }
 
 function handleRoomUpdate(msg) {
   if (msg?.room?.id) cacheLastRoomId(msg.room.id);
-  renderRoom(msg.room);
+  const r = msg.room;
+  try {
+    if (r?.players?.length === 1) {
+      const only = r.players[0];
+      if (only && only.id && only.id !== state.playerId) {
+        state.playerId = only.id;
+        try {
+          localStorage.setItem('playerId', only.id);
+        } catch {}
+      }
+    }
+  } catch {}
+  renderRoom(r);
 }
 
 function handlePlayTrack(msg) {
@@ -192,9 +227,21 @@ function onMessage(ev) {
   switch (msg.type) {
     case 'resume_result':
       if (msg.ok) {
-        if (msg.playerId) state.playerId = msg.playerId;
+        console.debug('handleResumeResult', msg);
+        if (msg.playerId) {
+          state.playerId = msg.playerId;
+          try {
+            localStorage.setItem('playerId', msg.playerId);
+          } catch {}
+        }
         const code = msg.roomId || state.room?.id || localStorage.getItem('lastRoomId');
         if (code) sendMsg({ type: 'join_room', code });
+        // Re-render with the now-known playerId so host UI updates immediately.
+        if (state.room) {
+          try {
+            renderRoom(state.room);
+          } catch {}
+        }
       } else {
         const code = state.room?.id || localStorage.getItem('lastRoomId');
         if (code) sendMsg({ type: 'join_room', code });
@@ -368,6 +415,34 @@ function wireUi() {
       sendMsg({ type: 'submit_answer', guess: { title, artist } });
     });
   }
+  // Dashboard one-time hint
+  const dashboard = document.getElementById('dashboard');
+  const dashboardHint = document.getElementById('dashboardHint');
+  if (dashboard && dashboardHint) {
+    try {
+      const seen = localStorage.getItem('dashboardHintSeen');
+      if (!seen) {
+        dashboardHint.classList.remove('hidden');
+        const hide = () => {
+          dashboardHint.classList.add('hidden');
+          try {
+            localStorage.setItem('dashboardHintSeen', '1');
+          } catch {}
+          dashboard.removeEventListener('toggle', hide);
+          dashboard.removeEventListener('click', hide);
+        };
+        dashboard.addEventListener('toggle', hide);
+        // Also hide on explicit click to cover browsers not firing 'toggle' on details
+        dashboard.addEventListener('click', hide, { once: true });
+        // Auto-hide after 6 seconds if no interaction
+        setTimeout(() => {
+          if (!localStorage.getItem('dashboardHintSeen')) {
+            hide();
+          }
+        }, 6000);
+      }
+    } catch {}
+  }
 }
 
 // boot
@@ -376,13 +451,17 @@ connectWS(onMessage);
 
 // restore name immediately if present
 (() => {
+  // Bootstrap playerId early if we have it from a prior session to avoid null during first render
+  try {
+    const savedPid = localStorage.getItem('playerId');
+    if (savedPid && !state.playerId) {
+      state.playerId = savedPid;
+    }
+  } catch {}
   const saved = localStorage.getItem('playerName');
   if (saved) {
     if ($nameLobby && $nameLobby.value !== saved) {
       $nameLobby.value = saved;
     }
-    if ($nameDisplay) {
-      $nameDisplay.textContent = saved;
-    }
   }
 })();
diff --git a/public/js/render.js b/public/js/render.js
index 77917a7..06a6597 100644
--- a/public/js/render.js
+++ b/public/js/render.js
@@ -7,7 +7,6 @@ import {
   $guesser,
   $lobby,
   $mediaControls,
-  $nameDisplay,
   $nextArea,
   $np,
   $placeArea,
@@ -37,9 +36,18 @@ export function renderRoom(room) {
   $roomId.textContent = room.id;
   $status.textContent = room.state.status;
   $guesser.textContent = shortName(room.state.currentGuesser);
+  // If our local playerId doesn't match any player in the snapshot, but there's
+  // exactly one player, we must be that player (since only room members get updates).
+  if (state.playerId && !room.players.some((p) => p.id === state.playerId)) {
+    if (room.players.length === 1) {
+      const sole = room.players[0];
+      state.playerId = sole.id;
+      try {
+        localStorage.setItem('playerId', sole.id);
+      } catch {}
+    }
+  }
   const me = room.players.find((p) => p.id === state.playerId);
-  if ($nameDisplay)
-    $nameDisplay.textContent = me?.name || localStorage.getItem('playerName') || '-';
   if ($dashboardList) {
     $dashboardList.innerHTML = room.players
       .map((p) => {
@@ -96,16 +104,32 @@ export function renderRoom(room) {
     }
     $readyChk.parentElement.classList.toggle('hidden', room.state.status !== 'lobby');
   }
+
+  console.log('room host id:', room.hostId, 'my id:', state.playerId);
   const isHost = state.playerId === room.hostId;
   const activePlayers = room.players.filter((p) => !p.spectator && p.connected);
   const allReady = activePlayers.length > 0 && activePlayers.every((p) => p.ready);
+
+  console.log('room state status:', room.state.status, 'host:', isHost, 'allReady:', allReady);
   const canStart = room.state.status === 'lobby' && isHost && allReady;
+
+  console.log(
+    `Rendering room ${room.id}, players: ${room.players.length}, active: ${activePlayers.length}, ready: ${allReady}, isHost: ${isHost}`
+  );
+  console.log('Me:', me);
+  console.log('Pending ready:', state.pendingReady);
+  console.log('Room state:', room.state);
+  console.log('My timeline:', myTl);
+  console.log('CanStart:', canStart);
+
   if ($startGame) $startGame.classList.toggle('hidden', !canStart);
+
   const isMyTurn =
     room.state.status === 'playing' &&
     room.state.phase === 'guess' &&
     room.state.currentGuesser === state.playerId &&
     room.state.currentTrack;
+
   const canGuess = isMyTurn;
   // Media controls (play/pause) only for current guesser while guessing and a track is active
   if ($mediaControls) $mediaControls.classList.toggle('hidden', !isMyTurn);
diff --git a/public/js/state.js b/public/js/state.js
index 66cc6a7..d286cf3 100644
--- a/public/js/state.js
+++ b/public/js/state.js
@@ -1,5 +1,11 @@
 export const state = {
-  playerId: null,
+  playerId: (() => {
+    try {
+      return localStorage.getItem('playerId') || null;
+    } catch {
+      return null;
+    }
+  })(),
   room: null,
   lastTrack: null,
   revealed: false,
diff --git a/src/server/game.js b/src/server/game.js
index 7924a3e..82d097d 100644
--- a/src/server/game.js
+++ b/src/server/game.js
@@ -127,13 +127,17 @@ export function setupWebSocket(server) {
             if (foundRoom.state.spectators) delete foundRoom.state.spectators[found.id];
             found.spectator = false;
           }
-          // Notify room
-          broadcast(foundRoom, 'room_update', { room: roomSummary(foundRoom) });
         }
-        // Send resume result and an explicit connected that preserves their original session.
+        // Send resume result and an explicit connected that preserves their original session
+        // BEFORE broadcasting room_update. This ensures the client sets playerId before
+        // rendering the first room snapshot.
         send('resume_result', { ok: true, playerId: found.id, roomId: foundRoom?.id });
         helloSent = true;
         send('connected', { playerId: found.id, sessionId: found.sessionId });
+        if (foundRoom) {
+          // Now notify the room (and the resumed client) of the updated presence
+          broadcast(foundRoom, 'room_update', { room: roomSummary(foundRoom) });
+        }
         return;
       }
 
