diff --git a/frontend/public/trasa.png b/frontend/public/trasa.png
new file mode 100644
index 0000000..28038cf
Binary files /dev/null and b/frontend/public/trasa.png differ
diff --git a/frontend/src/scripts/index.js b/frontend/src/scripts/index.js
index bd5bc73..2297ce7 100644
--- a/frontend/src/scripts/index.js
+++ b/frontend/src/scripts/index.js
@@ -14,6 +14,7 @@ class Main extends Component {
         this.state = {
             text: "",
             status: "",
+            faq: false,
         };
     }
     onSubmit(event){
@@ -37,6 +38,9 @@ class Main extends Component {
             }
         });
     }
+    togglefaq(){
+        this.setState({faq: !this.state.faq});
+    }
     render(){
         return (
 <div>
@@ -48,6 +52,40 @@ class Main extends Component {
     <div class="absolute container-fluid alert alert-danger">
         {this.state.text}
     </div>}
+    {this.state.faq &&
+        <div class="shadow"></div>}
+    {this.state.faq &&
+        <div class="faq" onClick={(e) => this.togglefaq()}>
+            <div class="container" onClick={(e) => e.stopPropagation()}>
+                <button type="button" class="btn-close" aria-label="Close" onClick={(e) => this.togglefaq()}></button>
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Kolik spoluúčastníků mám očekávat?</h5>
+                        <p class="card-text">Zatím je kapacita závodu 50 účastníků.</p>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Kolik lahváčů do sebe po cestě kopnu?</h5>
+                        <p class="card-text">Celkem jsou 4 čekárny a v každé padne jeden lahváč.</p>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">A co panákové?</h5>
+                        <p class="card-text">To já upřímě nevím. Záleží na tvém skóre v soutěžích.</p>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Jaká je trasa závodu?</h5>
+                        <p class="card-text"></p>
+                        <img src="/public/trasa.png" class="card-img-bottom"></img>
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
     <div class="container">
         <img class="logo" src="/public/logo.svg"></img>
     </div>
@@ -75,6 +113,9 @@ class Main extends Component {
     <div class="container text">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Aliquam erat volutpat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
     </div>
+    <div class="container text text-center">
+         <h2>Stále nevíš jestli se zůčastníš? přečti si náš <button type="button" class="btn btn-warning" onClick={(e) => this.togglefaq()}>FAQ</button></h2>
+    </div>
     {/*<form class="container" onSubmit={(e) => this.onSubmit(e)}>
         <h1>Registrace</h1>
         <div class="mb-3">
@@ -98,8 +139,19 @@ class Main extends Component {
             <label class="form-check-label" for="agreement">Souhlas se zpracováním osobních údajů</label>
         </div>
         <button type="submit" class="btn btn-primary">Odeslat</button>
+<<<<<<< HEAD
         </form>*/}
     <div class="container kontakt text-center social">
+=======
+        </form>
+    <div class="container video">
+        <iframe width="100%" height="800px" src="https://www.youtube.com/embed/H1UeXTBpsXw?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
+    </div>
+    <div class="container video">
+        <iframe width="100%" height="800px" src="https://www.youtube.com/embed/7WB4J_j-VhM?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
+    </div>
+    <div class="container kontakt  text-center">
+>>>>>>> aa695fd (add FAQ)
         <div class="row">
             <a class="col-lg-3" href="mailto:info@alkator.cz"><b>info@alkator.cz</b></a>
             <a class="col-lg-3" href="https://www.facebook.com/AlkatorRace"><img height="40px" src="/public/fb_logo.svg" /></a>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 0af53c7..826298e 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -50,4 +50,25 @@ form.container{
 .kontakt > div > a {
   margin:auto;
   padding: 10px;
+}
+
+.shadow {
+  background: rgba(0,0,0,0.4);
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+}
+
+.faq {
+  z-index: 2;
+  top: 0;
+  bottom:0;
+  left:0;
+  right: 0;
+  position:fixed;
+  overflow-y:scroll;
+  overflow-x:hidden;
 }
\ No newline at end of file