diff --git a/src/templates/admin.tera b/src/templates/admin.tera
index 0b53cbd..c6a3535 100644
--- a/src/templates/admin.tera
+++ b/src/templates/admin.tera
@@ -27,6 +27,10 @@
         border: 1px solid rgb(160 160 160);
         padding: 8px 10px;
       }
+      a.standalone-link {
+        display: block;
+        margin: 8px 0;
+      }
     </style>
 </head>
 <body>
@@ -36,14 +40,24 @@
     <caption> Games table </caption>
     <thead><tr>
       <th scope="col">code</th>
-      <th scope="col">team</th>
+      <th scope="col">teams</th>
       <th scope="col">start_time</th>
       <th scope="col">end_time</th>
     </tr></thead>
     <tbody id="games_table"></tbody>
   </table>
+  <dialog id="team_dialog">
+    <p><bold>Name: <span id="td_name"></span></bold></p>
+    <p>Color: <span id="td_color"></span></p>
+    <p>Players: <span id="td_players"></span></p>
+  </dialog>
   <script>
     const games_form = document.getElementById("games_form");
+    const table_body = document.getElementById("games_table");
+    const team_dialog = document.getElementById("team_dialog");
+    const td_name = document.getElementById("td_name");
+    const td_color = document.getElementById("td_color");
+    const td_players = document.getElementById("td_players");
     function refresh_games(event) {
       event.preventDefault();
       fetch("/admin/games")
@@ -54,22 +68,50 @@
 	  return response.json();
 	})
 	.then(data => {
-	    const table_body = document.getElementById("games_table");
-	    let table_content = "";
+	    table_body.innerHTML = "";
 	    data.forEach((item,index) => {
-		table_content += '<tr>';
-		table_content += '<th scope="row">' + item['code'] + '</th>';
-		table_content += '<td>teams should go here</td>';
-		table_content += '<td>' + item['start_time'] + '</td>';
-		table_content += '<td>' + item['end_time'] + '</td>';
+		const row = document.createElement("tr");
+		const row_head = document.createElement("th");
+		row_head.scope = 'row';
+		row_head.textContent = item['code'];
+		const row_teams = document.createElement("td");
+		item['teams'].forEach((team, i) => {
+		    const name = team['name'];
+		    const color = team['color'];
+		    const players = team['players'];
+		    const link = document.createElement("a");
+		    link.href = "#";
+		    link.textContent = name;
+		    link.classList.add("standalone-link");
+		    link.onclick = function(e) {
+			e.preventDefault();
+			showModal(name, color, players);
+		    };
+		    row_teams.append(link);
+		    console.log(team);
+		});
+		const row_start = document.createElement("td");
+                row_start.textContent = item['start_time'];
+		const row_end = document.createElement("td");
+                row_end.textContent = item['end_time'];
+		row.appendChild(row_head);
+		row.appendChild(row_teams);
+		row.appendChild(row_start);
+		row.appendChild(row_end);
+		table_body.appendChild(row);
 	    });
-	    table_body.innerHTML = table_content;
 	})
 	.catch(error => {
           console.error("Fetching legend data failed:", error);
         });
     }
     games_form.addEventListener("submit", refresh_games);
+    function showModal(name, color, players) {
+	td_name.textContent = name;
+	td_color.textContent = color;
+	td_players.textContent = players.map((e)=>e['username']);
+	team_dialog.showModal();
+    }
   </script>
 </body>
 </html>
