diff --git a/src/templates/frontend/frontend.jinja b/src/templates/frontend/frontend.jinja
index a4b732f3e3319ca5e5b2c60d045ba45089bed8b0..5af4a8070c068225a04d34b653c3da3f4d476a4d 100644
--- a/src/templates/frontend/frontend.jinja
+++ b/src/templates/frontend/frontend.jinja
@@ -13,25 +13,29 @@
         socket.on("round", function(data){
             data = JSON.parse(data)
             
-            document.getElementById("round_points").innerHTML=data["points"]; 
-            document.getElementById("question").innerHTML=data["question"]; 
+            var round_points = document.getElementsByClass("round_points");
+            for(var el in round_points){ el.innerHTML = data["points"]; }
 
-            document.getElementById("points_left").innerHTML=data["current_team_points"][0];
-            document.getElementById("points_right").innerHTML=data["current_team_points"][1];
+            var round_points = document.getElementsByClass("question");
+            for(var el in round_points){ el.innerHTML = data["question"]; }
 
-            document.getElementById("team_right").innerHTML=data["current_teams"][1];
-            document.getElementById("team_left").innerHTML=data["current_teams"][0];
-            
-            document.getElementById("logo_left").src="../"+ data["current_team_logos"][0];
-            document.getElementById("logo_right").src="../"+ data["current_team_logos"][1];
+            var round_points = document.getElementsByClass("points_left");
+            for(var el in round_points){ el.innerHTML = data["current_team_points"][0]; }
 
-            document.getElementById("oponent-img-left").src="../"+ data["current_team_logos"][0];
-            document.getElementById("oponent-img-right").src="../"+ data["current_team_logos"][1];
+            var round_points = document.getElementsByClass("points_right");
+            for(var el in round_points){ el.innerHTML = data["current_team_points"][1]; }
 
-            document.getElementById("oponent-name-left").innerHTML=data["current_teams"][0];
-            document.getElementById("oponent-name-right").innerHTML=data["current_teams"][1];
+            var round_points = document.getElementsByClass("team_right");
+            for(var el in round_points){ el.innerHTML = data["current_teams"][1]; }
 
-            
+            var round_points = document.getElementsByClass("team_left");
+            for(var el in round_points){ el.innerHTML = data["current_teams"][0]; }
+
+            var round_points = document.getElementsByClass("logo_left");
+            for(var el in round_points){ el.src="../"+ data["current_team_logos"][0]; }
+
+            var round_points = document.getElementsByClass("logo_right");
+            for(var el in round_points){ el.src="../"+ data["current_team_logos"][1]; }
 
             answers_inner_html = ""
             for(answer in data["answers"]){
@@ -206,11 +210,11 @@
             </div>
 
             <div class="col-8 ccc-blue">  
-                <h3 id="question"></h3>
+                <h3 class="question"></h3>
             </div>
 
             <div class="col-2 ccc-green text-right">
-                <h3 id="round_points"></h3>
+                <h3 class="round_points"></h3>
             </div>
 
         </div>
@@ -220,7 +224,7 @@
             </div>
 
             <div class="col-10">
-                <table class="table" id="answers">
+                <table class="table" class="answers">
                 
                 </table>
             </div>
@@ -235,12 +239,12 @@
             </div>
 
             <div class="col-4 text-left">
-                <h3 id="team_left"></h3>
+                <h3 class="team_left"></h3>
             </div>
 
 
             <div class="col-4 text-right">
-                <h3 id="team_right"></h3>
+                <h3 class="team_right"></h3>
             </div>
 
             <div class="col-2">
@@ -252,21 +256,21 @@
             </div>
 
             <div class="col-2 text-left">
-                <img id="logo_left" height="200">
+                <img class="logo_left" height="200">
             </div>
 
             <div class="col-2 ccc-green text-left">
-                <div class="fails" id="fails_left"></div>
-                <h1 class="xxl" id="points_left">-</h1>
+                <div class="fails" class="fails_left"></div>
+                <h1 class="xxl" class="points_left">-</h1>
             </div>
 
             <div class="col-2 ccc-green text-right">
-                <div class="fails" id="fails_right"></div>
-                <h1 class="xxl" id="points_right">-</h1>
+                <div class="fails" class="fails_right"></div>
+                <h1 class="xxl" class="points_right">-</h1>
             </div>
 
             <div class="col-2 text-right">
-                <img id="logo_right" height="200">
+                <img class="logo_right" height="200">
             </div>
 
             <div class="col-2">
@@ -288,15 +292,15 @@
     <div class="container-fluid" id="oponents">
             <div class="row">
                 <div class="col-5 text-center">
-                    <img id="oponent-img-left" width="500">
-                    <h2 id="oponent-name-left"></h2>
+                    <img class="logo_eft" width="500">
+                    <h2 class="team_left"></h2>
                 </div>
                 <div class="col-2 text-center">
                     <h1 class="ccc-green largest">vs</h1>
                 </div>
                 <div class="col-5 text-center">
-                    <img id="oponent-img-right" width="500">
-                    <h2 id="oponent-name-right"></h2>
+                    <img class="logo_right" width="500">
+                    <h2 class="team_right"></h2>
                 </div> 
             </div>
         </div>