diff --git a/templates/quiz.html b/templates/quiz.html
index 6f66a60..4df11c1 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -356,15 +356,16 @@ function replayDuration() {
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<body style="background: linear-gradient(135deg, #191414 0%, #1DB954 100%); min-height:100vh; margin:0;">
+<body style="background: linear-gradient(135deg, #191414 0%, #1DB954 100%); min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;">
   <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;
+    width: 100%;
     color: #fff;
+    margin: 40px 0;
     ">
     <div style="text-align:center; margin-bottom: 10px;">
       <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
@@ -409,7 +410,7 @@ function replayDuration() {
       <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>
+      <div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></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;">
