diff --git a/index.php b/index.php
index da2627e..2d999df 100644
--- a/index.php
+++ b/index.php
@@ -90,8 +90,17 @@
 
          </ul>
          <div class="fixed-action-btn">
-         <a href="#" data-target="slide-out" class="sidenav-trigger btn-floating btn-large waves-effect waves-dark brown"><i class="material-icons">menu</i></a>
-       </div>
+         <a id="menu" href="#" data-target="slide-out" class="sidenav-trigger btn-floating btn-large waves-effect waves-dark brown"><i class="material-icons">menu</i></a>
+          </div>
+
+          <!-- Tap Target Structure -->
+  <div class="tap-target indigo white-text" data-target="menu">
+    <div class="tap-target-content">
+      <h5 class="center">Menu</h5>
+      <p>You can find an overview to all the Roles over here!</p>
+      <p>Also is it just me or might this be a bit overkill? You know, this huge bubble which informs you about a Menu you probably have found yourself</p>
+    </div>
+  </div>
       <div class="container">
 
       <?php
@@ -135,6 +144,39 @@
                         <span class="card-title" id="'.$shortname.'">'.$name.'</span>
                         <p>'.$description.'</p>
                     </div>
+
+
+
+                      <ul class="collapsible black-text white">
+                        <li class="active">
+                          <div class="collapsible-header"><i class="material-icons">help_outline</i>How to Play</div>
+                          <div class="collapsible-body"><span>'.$howtoplay.'</span></div>
+                        </li>
+                        <li>
+                          <div class="collapsible-header"><i class="material-icons">check</i>Plays best with</div>
+                          <div class="collapsible-body"><span>'.$playsbestwith.'</span></div>
+                        </li>
+                        <li>
+                          <div class="collapsible-header"><i class="material-icons">code</i>Convars</div>
+                          <div class="collapsible-body"><span><pre>'.$convars.'</pre></span></div>
+                        </li>
+                        <li>
+                          <div class="collapsible-header"><i class="material-icons">whatshot</i>Credits</div>
+                          <div class="collapsible-body"><span>Main Creator: <a href="'.$authorurl.'">'.$author.'</a><br><pre>'.$ctext.'</pre></span></div>
+                        </li>
+                        <li>
+                          <div class="collapsible-header"><i class="material-icons">link</i>Links</div>
+                          <div class="center collapsible-body">
+                            <span>
+                              <a href="'.$steam.' ">Steam Workshop</a>
+                              <br>
+                              <a href="'.$source.'">Github Source</a></div>
+                            </span>
+                        </li>
+                      </ul>
+
+
+<!-- OLD VERSION
                     <div class="card-tabs">
                         <ul class="tabs tabs-fixed-width">
                             <li class="tab col s3">
@@ -158,11 +200,9 @@
                             <pre>'.$convars.'</pre>
                         </div>
                         <div id="'.$shortname.'credits"><h5>Credits:</h5>Main Creator: <a href="'.$authorurl.'">'.$author.'</a><br><pre>'.$ctext.'</pre></div>
+-->
+
 
-                        <div class="card-action '.$color.' ">
-                          <a class="'.$tcolor.'-text" href="'.$steam.' ">Steam</a>
-                          <a class="'.$tcolor.'-text" href="'.$source.'">Source</a>
-                        </div>
                         </div
                 </div>
             </div>
@@ -200,8 +240,11 @@
 <!-- Start Tab init -->
     <script>
     $(document).ready(function(){
-        $('.tabs').tabs();
+        $('.collapsible').collapsible();
+//        $('.tabs').tabs();
         $('.sidenav').sidenav();
+        $('.tap-target').tapTarget();
+        $('.tap-target').tapTarget('open');
   });
     </script>
     <!-- End Tab init -->
diff --git a/roles/en/beggar.php b/roles/en/beggar.php
index b67d47a..e701c69 100644
--- a/roles/en/beggar.php
+++ b/roles/en/beggar.php
@@ -4,7 +4,7 @@
 #
 
 # Text Color
-$tcolor = "black";
+$tcolor = "white";
 # This is the color defined by https://materializecss.com/color.html
 $color = "pink lighten-2";
 
diff --git a/roles/en/clown.php b/roles/en/clown.php
index 78d63e9..cd148d4 100644
--- a/roles/en/clown.php
+++ b/roles/en/clown.php
@@ -4,7 +4,7 @@
 #
 
 # Text Color
-$tcolor = 'black';
+$tcolor = 'white';
 # This is the color defined by https://materializecss.com/color.html
 $color = 'pink';
 
diff --git a/roles/en/cupid.php b/roles/en/cupid.php
index 4c5bc7e..b8e0e2d 100644
--- a/roles/en/cupid.php
+++ b/roles/en/cupid.php
@@ -4,7 +4,7 @@
 #
 
 # Text Color
-$tcolor = 'black';
+$tcolor = 'white';
 # This is the color defined by https://materializecss.com/color.html
 $color = 'pink darken-1';
 
diff --git a/roles/en/jester.php b/roles/en/jester.php
new file mode 100644
index 0000000..6bd06f3
--- /dev/null
+++ b/roles/en/jester.php
@@ -0,0 +1,82 @@
+<?php
+#
+# COLORS
+#
+
+# Text Color
+$tcolor = 'white';
+# This is the color defined by https://materializecss.com/color.html
+$color = 'pink';
+
+
+
+
+#
+# BASEINFO
+#
+
+#The Name of the Role
+$name = "Jester";
+#The Description of the Role, HTML conform :)
+$description = "A bad joke might be the last thing you hear from him. He always tries to fool you. And in the moment your bullet hits his head and his dead body sinks motionless to the ground the truth is right in front of you: he did it again.";
+
+
+
+
+#
+# TABS
+#
+
+#How To play
+$howtoplay = "The jester plays in his own team and it's his goal to get killed by someone. To help him triggering other players, he doesn't deal any damage. But he has to be careful. Shooting at people without dealing damage might reveal his role to them. Killing him results for a win of their team, so be careful.";
+#With what roles does this role play best?
+$playsbestwith = "
+<ul>
+<li>Swapper</li>
+<li>Serialkiller</li>
+<li>Infected</li>
+<ul>
+";
+#Convars
+$convars = "Normal Role Convars (also found in ULX):
+<code># enable or disable this role
+  ttt_jester_enabled [0/1] (default: 1)
+# the percentage of players that are spawned as this role
+  ttt_jester_pct [0.0..1.0] (default: 1.0)
+# the limit of players that spawn as this role each round, this overwrites the percentage
+  ttt_jester_max [0..n] (default: 1)
+# the probability each round of this role being spawned at all
+  ttt_jester_random [0..100] (default: 50)
+# the amount of players needed for this role to spawn
+  ttt_jester_min_players: [0..n] (default: 8)</code>
+
+Rolespecific Convars:
+<code># should it be publicily anounced if there is a jester in a round
+  ttt2_jes_announce [0/1] (default: 1)
+# should the jester be able to push other players with his convar
+  ttt2_jes_improvised [0/1] (default: 1)
+# should the jester be able to carry entities with his magneto stick
+  ttt2_jes_carry [0/1] (default: 1)</code>";
+
+
+
+#
+# Credits
+#
+
+#The Steam URL to your addon
+$steam = "https://steamcommunity.com/sharedfiles/filedetails/?id=1363049665";
+#The Source URL to your addon
+$source = "https://steamcommunity.com/linkfilter/?url=https://github.com/TTT-2/ttt2-role_jes";
+
+#Creator of the Addon
+$author = "Alf21";
+#Creatorlink
+$authorurl = "https://steamcommunity.com/id/alf21";
+
+# Credittext (can use the above variables)
+$ctext = "Alf21: creator of this role addon
+Mineotopia: designer of the role icon
+KingsNJenssons: creator of the clientside particles and sound effects";
+
+?>