diff --git a/code/button_displayer.js b/code/button_displayer.js
index 2b66fae..57e5540 100644
--- a/code/button_displayer.js
+++ b/code/button_displayer.js
@@ -1,21 +1,44 @@
 var modes=["points","temps","survie"];
+var diffs=["easy","med","hard"];
 var div=document.getElementById('buttons');
+size=screen.height/6;
+hideAll();
+var modeSelected;
+var diffSelected;
+
 modes.forEach(element => {
-    var name=element+"Button";
+    eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
+    eval("btn_"+element+".width=size");
+    eval("btn_"+element).addEventListener("mousedown",function(e){disp(e);});
+    var tab=document.getElementById(element).children;
+    for(var i=0;i<tab.length;i++){
+        tab.item(i).width=size;
+        tab.item(i).addEventListener("mousedown",function(e){modeSelected= e.currentTarget.id;});
+    }
+});
 
-    eval("var "+name+"= new Image()");
-/*
-    console.log(name+".src='./ress/button_mode_"+element+".png'");
-    eval(name+".src='./ress/button_mode_"+element+".png'");
-*/
-    console.log("<img src='"+"./ress/button_mode_"+element+".png'"+"/>");
-    
-    div.innerHTML+="<img id="+name+" src='./ress/button_mode_"+element+".png'/>";
-    /*
-    eval(name).onload = function(){
-        div.innerHTML+="<img src='./ress/button_mode_"+element+".png'/>";
-    }*/
+diffs.forEach(element => {
+    eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
+    console.log("btn_"+element+".width=size");
+    eval("btn_"+element+".width=size");
+    eval("btn_"+element).addEventListener("mousedown",function(e){diffSelected=e.currentTarget.id;});
+})
 
-    //eval(name).src="./ress/button_mode_"+element+".png";
-    eval(name).addEventListener("mousedown",function(e){console.log("yo");});
-});
+function disp(what)
+{
+    what=what.currentTarget.id.substring(4);
+    modes.forEach(element => {
+        document.getElementById(element).style.display=what==element ? "flex":"none";
+    })
+}
+
+function hideAll()
+{
+    document.getElementById("temps").style.display="none";
+    document.getElementById("points").style.display="none";
+}
+
+function play()
+{
+    window.location.replace("./game.html?mode="+modeSelected+"&diff=easy");
+}
\ No newline at end of file
diff --git a/code/index.css b/code/index.css
new file mode 100644
index 0000000..5290bbe
--- /dev/null
+++ b/code/index.css
@@ -0,0 +1,10 @@
+.all-container {
+    display : flex;
+    
+    align-items: baseline;
+    width : min-content;
+    /*
+    margin: 20px;
+    */
+
+}
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index d9e6153..a132441 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,36 +1,40 @@
 <html>
     <head>
-        On the Dot
+        <title>On The Dot</title>
+        <link rel="stylesheet" type="text/css" href="index.css"/>
     </head>
     <body>
-        <form action="./game.html" method="GET">
+        
             Jouer la partie en : </br>
-            <div id="buttons"></div>
+            <ul id="modes" class="all-container">
+                <img id="btn_points" src="./ress/button_mode_points.png"/>
+                <img id="btn_temps" src="./ress/button_mode_temps.png"/>
+                <img id="btn_survie" src="./ress/button_mode_survie.png"/>
+            </ul>
+            <ul id="points" class="all-container">
+                <img id="5p" src="./ress/button_points_5.png"/>
+                <img id="10p" src="./ress/button_points_10.png"/>
+                <img id="15p" src="./ress/button_points_15.png"/>
+                <img id="20p" src="./ress/button_points_20.png"/>
+            </ul>
+            <ul id="temps" class="all-container">
+                <img id="5m" src="./ress/button_temps_5.png"/>
+                <img id="10m" src="./ress/button_temps_10.png"/>
+            </ul>
+            <ul id="diff" class="all-container">
+                <img id="btn_easy" src="./ress/button_diff_easy.png"/>
+                <img id="btn_med" src="./ress/button_diff_normal.png"/>
+                <img id="btn_hard" src="./ress/button_diff_hard.png"/>
+            </ul>
+
+            <button onClick="play()">Jouer ?</button>
+            
             <script src="button_displayer.js"></script>
             <!--
-            <input type="radio" id="5pts" name="mode" value="5p" checked="checked">
-            <label for="5pts">5 points</label><br>
-            <input type="radio" id="10pts" name="mode" value="10p">
-            <label for="5pts">10 points</label><br>
-            <input type="radio" id="15pts" name="mode" value="15p">
-            <label for="5pts">15 points</label><br>
-            <input type="radio" id="20pts" name="mode" value="20p">
-            <label for="5pts">20 points</label><br>
-            <input type="radio" id="5min" name="mode" value="5m">
-            <label for="5pts">5 minutes</label><br>
-            <input type="radio" id="10min" name="mode" value="10m">
-            <label for="5pts">10 minutes</label><br>
-            <input type="radio" id="survie" name="mode" value="surv">
-            <label for="5pts">survie</label><br> -->
-
-            Choisissez la difficult&eacute; </br>
-
-            <input type="radio" id="easy" name="diff" value="easy" checked="checked">
-            <label for="5pts">facile</label><br>
-            <input type="radio" id="med" name="diff" value="med">
-            <label for="5pts">moyen</label><br>
-            <input type="radio" id="hard" name="diff" value="hard">
-            <label for="5pts">difficile</label><br>
+            <ul id="survie" class="all-container">
+                <img id="survie" src="./ress/button_sur.png"/>
+            </ul> -->
+            <form action="./game.html" method="GET">
 
             Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
             <input type="text" name="pseudo" />
diff --git a/code/ress/button_diff_easy.png b/code/ress/button_diff_easy.png
new file mode 100644
index 0000000..b97739a
Binary files /dev/null and b/code/ress/button_diff_easy.png differ
diff --git a/code/ress/button_diff_hard.png b/code/ress/button_diff_hard.png
new file mode 100644
index 0000000..f0329e1
Binary files /dev/null and b/code/ress/button_diff_hard.png differ
diff --git a/code/ress/button_diff_normal.png b/code/ress/button_diff_normal.png
new file mode 100644
index 0000000..94459f3
Binary files /dev/null and b/code/ress/button_diff_normal.png differ
diff --git a/code/vitraux.js b/code/vitraux.js
index 381758a..af5dcac 100644
--- a/code/vitraux.js
+++ b/code/vitraux.js
@@ -458,7 +458,7 @@ var canvasT = document.getElementById('canvasTotal');
             {
                 chronoStop();
                 var pts = diff.getSeconds()+ (diff.getMinutes()*60) + ((diff.getHours()-1)*3600);
-                console.log("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
+                //console.log("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
                 window.location.replace("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
             }
             else if(get['mode']=="surv")
