diff --git a/static/js/app.js b/static/js/app.js
new file mode 100644
index 0000000..e29d5b2
--- /dev/null
+++ b/static/js/app.js
@@ -0,0 +1,79 @@
+document.addEventListener("DOMContentLoaded", () => {
+    fetch("/api/data")
+        .then(res => res.json())
+        .then(data => {
+            const playerList = document.getElementById("player-list");
+            const playerDetails = document.getElementById("player-details");
+            const attacksList = document.getElementById("attacks-list");
+
+            // Fill player list
+            Object.keys(data.players).forEach(name => {
+                const div = document.createElement("div");
+                div.className = "player-item";
+                div.textContent = name;
+                div.addEventListener("click", () => {
+                    showTownSelection(data.players[name]);
+                });
+                playerList.appendChild(div);
+            });
+
+            // Fill incoming attacks panel
+            if (data.attacks.length === 0) {
+                attacksList.innerHTML = "<p class='p-2'>No incoming attacks</p>";
+            } else {
+                data.attacks.forEach(atk => {
+                    const div = document.createElement("div");
+                    div.className = "p-2 border-bottom";
+                    div.innerHTML = `<strong>${atk.player}</strong>: ${atk.target_town} (${atk.units || 'Unknown units'}) ETA: ${atk.eta}`;
+                    attacksList.appendChild(div);
+                });
+            }
+
+            // Step 1: Show list of towns for selected player
+            function showTownSelection(player) {
+                if (player.error) {
+                    playerDetails.innerHTML = `<p style='color:red'>${player.error}</p>`;
+                    return;
+                }
+                let html = `<h3>${player.player} (${player.player_id})</h3>`;
+                html += `<p><strong>Last Update:</strong> ${player.timestamp}</p>`;
+                html += `<h5>Select a town:</h5><ul>`;
+                player.towns.forEach(town => {
+                    html += `<li class="town-item" style="cursor:pointer;color:blue" data-townid="${town.town_id}">
+                                ${town.town_name}
+                             </li>`;
+                });
+                html += `</ul>`;
+                playerDetails.innerHTML = html;
+
+                // Attach click events for towns
+                document.querySelectorAll(".town-item").forEach(item => {
+                    item.addEventListener("click", () => {
+                        const townId = parseInt(item.dataset.townid);
+                        const selectedTown = player.towns.find(t => t.town_id === townId);
+                        showTownDetails(selectedTown);
+                    });
+                });
+            }
+
+            // Step 2: Show town data
+            function showTownDetails(town) {
+                let html = `<h4>${town.town_name}</h4>`;
+                html += `<p><strong>Points:</strong> ${town.points} | <strong>Population:</strong> ${town.population}</p>`;
+                html += `<h5>Resources</h5>
+                         <ul>
+                            <li>Wood: ${town.wood}</li>
+                            <li>Stone: ${town.stone}</li>
+                            <li>Iron: ${town.iron}</li>
+                         </ul>`;
+                html += `<h5>Buildings</h5><ul>`;
+                Object.entries(town.buildings).forEach(([b, lvl]) => {
+                    if (b !== "id") {
+                        html += `<li>${b}: ${lvl}</li>`;
+                    }
+                });
+                html += `</ul>`;
+                playerDetails.innerHTML = html;
+            }
+        });
+});