diff --git a/js/main.js b/js/main.js
index 62795aa..777a909 100644
--- a/js/main.js
+++ b/js/main.js
@@ -556,6 +556,13 @@
             updateTeamUI();
         }
 
+        function addToTeamFromSuggestion(id) {
+            if (!selectedTeam.includes(id) && selectedTeam.length < 4) {
+                selectedTeam.push(id);
+                updateTeamUI();
+            }
+        }
+
         function updateTeamUI() {
             // Update operator selection
             document.querySelectorAll('.select-option').forEach(el => {
@@ -624,12 +631,13 @@
                         </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">
+                        <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)'">
                             ${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>
                                 <p>${reason}</p>
                             </div>
+                            <div style="margin-left:auto;color:var(--cyan);font-size:20px;">+</div>
                         </div>
                     `;
                 }).join('');