diff --git a/src/templates/frontend.jinja b/src/templates/frontend.jinja
index 10f8d93655ffd764ed8d857447b264515eba75bc..f036bc6158310a0665936b3c205beeb6c8570817 100644
--- a/src/templates/frontend.jinja
+++ b/src/templates/frontend.jinja
@@ -21,6 +21,14 @@
             document.getElementById("logo_left").src="../"+ data["current_team_logos"][0];
             document.getElementById("logo_right").src="../"+ data["current_team_logos"][1];
 
+            document.getElementById("oponent-img-left").src="../"+ data["current_team_logos"][0];
+            document.getElementById("oponent-img-right").src="../"+ data["current_team_logos"][1];
+
+            document.getElementById("oponent-name-left").innerHTML=data["current_teams"][0];
+            document.getElementById("oponent-name-right").innerHTML=data["current_teams"][1];
+
+            
+
             answers_inner_html = ""
             for(answer in data["answers"]){
                 answer = data["answers"][answer];
@@ -50,16 +58,25 @@
                 document.getElementById("intro").style.display = "block";
                 document.getElementById("player_select").style.display = "none";
                 document.getElementById("final_screen").style.display = "none";
+                document.getElementById("oponents").style.display = "none"
             }
             if(state == "player_select"){
                 document.getElementById("intro").style.display = "none";
                 document.getElementById("final_screen").style.display = "none";
                 document.getElementById("player_select").style.display = "block";
+                document.getElementById("oponents").style.display = "none"
             }
             if(state == "final_screen"){
                 document.getElementById("intro").style.display = "none";
                 document.getElementById("player_select").style.display = "none";
                 document.getElementById("final_screen").style.display = "block"
+                document.getElementById("oponents").style.display = "none"
+            }
+            if(state == "oponents"){
+                document.getElementById("intro").style.display = "none";
+                document.getElementById("player_select").style.display = "none";
+                document.getElementById("final_screen").style.display = "none";
+                document.getElementById("oponents").style.display = "block"
             }
 
 
@@ -80,7 +97,11 @@
     }
 
     #final_screen{
-        display:none;
+        display: none;
+    }
+
+    #oponents{
+        display: none;
     }
 
     h1, h2, h3, h4, h5 .h1, .h2, .h3, .h4, .h5{
@@ -112,6 +133,10 @@
         margin-bottom: 7px;
     }
 
+    .largest{
+        font-size: 150px;
+    }
+
     .xxl{
         font-size: 50px;
     }
@@ -258,6 +283,23 @@
         </div>
     </div>
 
+    <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>
+                </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>
+                </div> 
+            </div>
+        </div>
+    
+
 
 </body>
 
diff --git a/src/templates/layout.jinja b/src/templates/layout.jinja
index 5602aa1e994c3372cbb08203b0e2a14bfa21cd9a..a7e0ccf91288953a769c781df6608ce04a3e13a1 100644
--- a/src/templates/layout.jinja
+++ b/src/templates/layout.jinja
@@ -27,6 +27,7 @@
                         <form method="POST" class="my-0">
                             <div class="btn-group">
                                 <button class="btn btn-light" type="submit" formaction="/fe_intro">Intro</button>
+                                <button class="btn btn-light" type="submit" formaction="/fe_oponents">Gegner</button>
                                 <button class="btn btn-light" type="submit" formaction="/fe_running">Aktuelle Runde</button>
                                 <button class="btn btn-light" type="submit" formaction="/fe_final">Ende</button>
                             </div>