diff --git a/js/main.js b/js/main.js
index 3f1e3db..288bebb 100644
--- a/js/main.js
+++ b/js/main.js
@@ -633,7 +633,7 @@
                         </div>`
                         : '<div style="width:50px;height:50px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>';
                     return `
-                        <div class="suggestion-item" onclick="addToTeamFromSuggestion('${id}')" style="cursor:pointer;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--cyan)'" onmouseout="this.style.borderColor='var(--cyan)'">
+                        <div class="suggestion-item" data-operator-id="${id}" style="cursor:pointer;transition:all 0.2s;">
                             ${imgHtml}
                             <div class="suggestion-info">
                                 <h5>${op ? op.name.toUpperCase() : id} ${op && op.free ? '<span style="font-size:9px;color:#39ff14;background:#000;padding:2px 6px;border-radius:3px;">FREE</span>' : ''}</h5>
@@ -643,6 +643,17 @@
                         </div>
                     `;
                 }).join('');
+
+                // Add click listeners to suggestion items
+                list.querySelectorAll('.suggestion-item').forEach(item => {
+                    item.addEventListener('click', () => {
+                        const operatorId = item.dataset.operatorId;
+                        if (!selectedTeam.includes(operatorId) && selectedTeam.length < 4) {
+                            selectedTeam.push(operatorId);
+                            updateTeamUI();
+                        }
+                    });
+                });
             }
         }