diff --git a/app/templates/games/new_game.html b/app/templates/games/new_game.html
index 9085862..9414e51 100644
--- a/app/templates/games/new_game.html
+++ b/app/templates/games/new_game.html
@@ -173,8 +173,9 @@
             {% for u in all_users %}
             <label class="player-option"
                    data-name="{{ u.name | lower }}"
-                   x-show="{% if u.id == user.id %}true{% else %}!playerSearch || $el.dataset.name.includes(playerSearch.toLowerCase()){% endif %}">
-              <input type="checkbox" name="players" value="{{ u.id }}"
+                   x-show="{% if u.id == user.id %}true{% else %}!playerSearch || $el.dataset.name.includes(playerSearch.toLowerCase()){% endif %}"
+                   :class="selectedPlayers.includes('{{ u.id }}') ? 'selected' : ''">
+              <input type="checkbox" value="{{ u.id }}"
                      {% if u.id == user.id %}checked disabled{% endif %}
                      @change="togglePlayer('{{ u.id }}')"
                      :checked="selectedPlayers.includes('{{ u.id }}')">
@@ -190,7 +191,6 @@
             </label>
             {% endfor %}
           </div>
-          <input type="hidden" name="players" value="{{ user.id }}">
         </div>
 
       </div>
@@ -293,6 +293,11 @@
 
     </div>
 
+    {# Hidden inputs driven by Alpine — always submitted regardless of step #}
+    <template x-for="pid in selectedPlayers" :key="pid">
+      <input type="hidden" name="players" :value="pid">
+    </template>
+
   </form>
 </div>
 {% endblock %}