diff --git a/templates/quiz.html b/templates/quiz.html
index 90398de..6f66a60 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -356,79 +356,71 @@ function replayDuration() {
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<body>
-  <div style="text-align:center; margin-bottom: 10px;">
-  <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
-  <span id="scoreInfo" style="margin-left:20px;">
-    {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
-    ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
-  </span>
-</div>
-  <div style="text-align:center; margin-bottom: 20px;">
-  <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
-</div>
-  <h2 id="question-text">{{ translations['question_artist'] }}</h2>
-  
-  <!-- Verstecktes Feld für device_id -->
-  <input type="hidden" id="device_id" value="">
-  
-  <!-- Spielmodi -->
-  <div class="game-modes">
-    <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
-    <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
-    <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
-  </div>
-  
-  <!-- Optionen für das Spiel -->
-  <div class="game-options">
-    <label>{{ translations['play_duration'] }}:
-      <select id="playDuration" onchange="onPlayDurationChange()">
-        <option value="10">10s</option>
-        <option value="15">15s</option>
-        <option value="30">30s</option>
-        <option value="0" selected>{{ translations['unlimited'] }}</option>
-        <option value="custom">Custom</option>
-      </select>
-      <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
-      <span id="customDurationLabel" style="display:none;">s</span>
-    </label>
-    <label style="margin-left:20px;">{{ translations['start_position'] }}:
-      <select id="startPosition" onchange="setOption('startPosition', this.value)">
-        <option value="start" selected>{{ translations['start'] }}</option>
-        <option value="random">{{ translations['random'] }}</option>
-      </select>
-    </label>
-  </div>
-  
-  <!-- "Nochmal X Sekunden"-Button -->
-  <div class="controls" style="text-align: center;">
-    <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
-  </div>
-  
-  <!-- Antwort-Eingabe -->
-  <div style="text-align: center; margin-top: 30px;">
-    <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()">
-    <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
-    
-    <!-- Suchergebnisse -->
-    <div id="searchResults" class="search-results"></div>
-    
-    <!-- Ergebnis-Anzeige -->
-    <div id="resultContainer" class="result-container"></div>
-    
-    <!-- Nächste Frage Button, wird nach Antwort angezeigt -->
-    <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
-  </div>
-  
-  <!-- Hilfe-Text je nach Modus -->
-  <div class="hint-container">
-    {% if game_mode == 'artist' %}
-      <p>{{ translations['tip_artist'] }}</p>
-    {% elif game_mode == 'title' %}
-      <p>{{ translations['tip_title'] }}</p>
-    {% elif game_mode == 'year' %}
-      <p>{{ translations['tip_year'] }}</p>
-    {% endif %}
+<body style="background: linear-gradient(135deg, #191414 0%, #1DB954 100%); min-height:100vh; margin:0;">
+  <div class="quiz-container" style="
+    background: rgba(25, 20, 20, 0.92);
+    padding: 40px 30px 30px 30px;
+    border-radius: 22px;
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
+    max-width: 500px;
+    margin: 50px auto 30px auto;
+    color: #fff;
+    ">
+    <div style="text-align:center; margin-bottom: 10px;">
+      <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
+      <span id="scoreInfo" style="margin-left:20px;">
+        {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
+        ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
+      </span>
+    </div>
+    <div style="text-align:center; margin-bottom: 20px;">
+      <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
+    </div>
+    <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
+    <input type="hidden" id="device_id" value="">
+    <div class="game-modes" style="margin-bottom:20px;">
+      <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
+      <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
+      <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
+    </div>
+    <div class="game-options" style="margin-bottom:20px;">
+      <label>{{ translations['play_duration'] }}:
+        <select id="playDuration" onchange="onPlayDurationChange()">
+          <option value="10">10s</option>
+          <option value="15">15s</option>
+          <option value="30">30s</option>
+          <option value="0" selected>{{ translations['unlimited'] }}</option>
+          <option value="custom">Custom</option>
+        </select>
+        <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
+        <span id="customDurationLabel" style="display:none;">s</span>
+      </label>
+      <label style="margin-left:20px;">{{ translations['start_position'] }}:
+        <select id="startPosition" onchange="setOption('startPosition', this.value)">
+          <option value="start" selected>{{ translations['start'] }}</option>
+          <option value="random">{{ translations['random'] }}</option>
+        </select>
+      </label>
+    </div>
+    <div class="controls" style="text-align: center; margin-bottom:20px;">
+      <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
+    </div>
+    <div style="text-align: center; margin-top: 10px;">
+      <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
+      <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
+      <div id="searchResults" class="search-results"></div>
+      <div id="resultContainer" class="result-container"></div>
+      <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
+    </div>
+    <div class="hint-container" style="color:#bdbdbd;">
+      {% if game_mode == 'artist' %}
+        <p>{{ translations['tip_artist'] }}</p>
+      {% elif game_mode == 'title' %}
+        <p>{{ translations['tip_title'] }}</p>
+      {% elif game_mode == 'year' %}
+        <p>{{ translations['tip_year'] }}</p>
+      {% endif %}
+    </div>
   </div>
 </body>
 </html>
