diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index f5207c4..b48855c 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -91,6 +91,31 @@ body {
 .fa-trophy:hover {
     font-size: 6vh;
 }
+.fa-users {
+    font-size: 5vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 4vh;
+    transition: .5s;
+}
+
+.fa-users:hover {
+    font-size: 6vh;
+}
+
+.fa-info {
+    font-size: 5vh;
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 4vh;
+    transition: .5s;
+}
+
+.fa-info:hover {
+    font-size: 6vh;
+}
 
 i:hover {
     cursor: pointer;
@@ -124,10 +149,31 @@ i:hover {
     animation-duration: 0.4s
 }   
 .modal-body{
+    height: 100%;
+    border:5px solid #D3D3CE;
+    border-radius: 15px;
+}
+.score-content{
+    height: 90%;
+}
+.scoreOne{
+    position: absolute;
+    width: 40%;
+    bottom: 1.5%;
+    top:15%;
+    left:5%;
+    border:5px solid #D3D3CE;
+    border-radius: 15px;
+}
+.scoreTwo{
+    position: absolute;
+    width: 40%;
+    bottom: 1.5%;
+    top:15%;
+    right:5%;
     border:5px solid #D3D3CE;
     border-radius: 15px;
 }
-
 @-webkit-keyframes animatetop {
     from {
         top: -200px;
@@ -172,4 +218,15 @@ hr{
 .setting_play{
     height: 30vh;
     width: 90%;
+}
+
+.close{
+    position: absolute;
+    right:33px;
+    top:10px;
+    font-size: 50px;
+}
+.close:hover{
+    color:red;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/site/vue/index.html b/site/vue/index.html
index ed4a138..38719eb 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -8,18 +8,18 @@
     <link href="css/style.css" rel="stylesheet">
     <title>Make It True | Menu</title>
 </head>
-<body id="body">
+<body id="body" class="background">
     <div id="menu">
-        <p id="titleGame" class="title txt">Make It True</p>
+        <p id="titleGame" class="title txt dys">Make It True</p>
     </div>
     <div class="btn_play" id="menu-selection">
         <ul>
             <li>
                 <div class="message">
-                    <a class="txt" id="playSelection">Je veux jouer a </a>
-                    <select id="jeu-select">
-                        <option value="aleatoire" class="txt" id="mode1">Aleatoire</option>
-                        <option value="perso" class="txt" id="mode2">Niveau Perso</option>
+                    <a class="txt dys" id="playSelection">Je veux jouer a </a>
+                    <select id="jeu-select" class="background">
+                        <option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option>
+                        <option value="perso" class="txt background dys" id="mode2">Niveau Perso</option>
                     </select>
                 </div>
             </li>
@@ -28,32 +28,36 @@
             </li>
         </ul>
     </div>
-    <a onclick="setting();"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
-    <a onclick=""><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
+    <a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
+    <a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
+    <a onclick="document.location.href='https://gitlab.iut-clermont.uca.fr/'; "><i class="fa fa-users" id="setting" aria-hidden="true"></i></a>
+    <a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a>
     <div id="myModal" class="modal">
         <div class="modal-content">
-            <div id="setting_int" class="modal-body" align=center>
-                <h1 class="txt" id="settingTitle">Parametres</h1>
+            
+            <div id="setting_int" class="modal-body border background" align=center>
+                <span class="close" onclick="closeModal('myModal')">&times;</span>
+                <h1 class="txt dys" id="settingTitle">Parametres</h1>
                 <hr id="hr">
                 <br>
                 <p>
-                    <a class="txt" id="themeDark">Theme dark</a> 
+                    <a class="txt dys" id="themeDark">Theme dark</a> 
                     <input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p>
                 <p>
-                    <a class="txt" id="dysfont">DYSLEXIE</a> 
+                    <a class="txt dys" id="dysfont">DYSLEXIE</a> 
                     <input id="dyscheckbox" type="checkbox" onclick="dysFont()"></p>
                 <br>
                 <br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
                 <img onclick="setLang('en')" src="img/usa.png" /><br><br>
                 <hr id="hr">
-                <p id="setting_title_perso" class="txt">Personnalisation du jeu</p>
-                <p><a class="txt" id="active_switch_setting">Couleur ligne active : </a><input type="color" id="active_switch_picker" name="head"
+                <p id="setting_title_perso" class="txt dys">Personnalisation du jeu</p>
+                <p><a class="txt dys" id="active_switch_setting">Couleur ligne active : </a><input type="color" id="active_switch_picker" name="head"
             value="#008000"></p>
-            <p><a class="txt" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" id="inactive_switch_picker" name="head"
+            <p><a class="txt dys" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" id="inactive_switch_picker" name="head"
                 value="#FF0000"></p>
-                <p><a class="txt" id="active_line_setting">Couleur ligne innactive : </a><input type="color" id="active_line_picker" name="head"
+                <p><a class="txt dys" id="active_line_setting">Couleur ligne innactive : </a><input type="color" id="active_line_picker" name="head"
                     value="#4CFEFE"></p>
-                    <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="inactive_line_picker" name="head"
+                    <p><a class="txt dys" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="inactive_line_picker" name="head"
                         value="#000000"></p>
                 <hr id="hr">
                 <div class="setting_play" id="setting_container">
@@ -62,6 +66,51 @@
             </div>
         </div>
     </div>
+
+    <div id="scoreModal" class="modal">
+        <div class="modal-content score-content">
+            <div class="modal-body border background">
+                <span class="close" onclick="closeModal('scoreModal')">&times;</span>
+                <h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1>
+                <hr id="hr">
+                <div class="scoreOne border" align=center>
+                    <p class="dys">Mode de jeu 1</p>
+                    <hr id="hr">
+                    <p class="dys">Pseudo | Score</p>
+                    <p class="dys">Pseudo | Score</p>
+                    <p class="dys">Pseudo | Score</p>
+                    <p class="dys">Pseudo | Score</p>
+                </div>
+                <div class="scoreTwo border" align=center>
+                    <p class="dys">Mode de jeu 2</p>
+                    <hr id="hr">
+                    <p class="dys">Pseudo | Score</p>
+                    <p class="dys">Pseudo | Score</p>
+                    <p class="dys">Pseudo | Score</p>
+                    <p class="dys">Pseudo | Score</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="infoModal" class="modal">
+        <div class="modal-content info-content">
+            <div class="modal-body border background" align=center>
+                <span class="close" onclick="closeModal('infoModal')">&times;</span>
+                <h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
+                <hr id="hr">
+                <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus. Morbi imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend porta. Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum sapien.
+
+                    Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper urna sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor. Aenean imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
+                    
+                    Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia. Sed sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a augue aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit at risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor.
+                    
+                    Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et leo ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada tincidunt, sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo. Aenean quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies lobortis, odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie sollicitudin.
+                    
+                    Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis tortor, vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et est. Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis malesuada eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel finibus mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam aliquam. Vivamus maximus justo eu fermentum hendrerit.</p>
+                
+            </div>
+        </div>
+    </div>
 </body>
 <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
 <script src="js/const.js"></script>
@@ -73,7 +122,6 @@
 <script src="js/main.js"></script>
 
 <script>
-
     function play(){
         //document.location.href="jeu2.html"; 
     }
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index 4da739f..631e8b2 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -1,18 +1,12 @@
 
-var modal = document.getElementById("myModal");
-function setting() {
-    var modal = document.getElementById("myModal");
+function openModal(modal) {
+    var modal = document.getElementById(modal);
     modal.style.display = "block";
 
 }
-function closeSetting() {
-    var modal = document.getElementById("myModal");
-    if (event.target == modal) {
-        modal.style.display = "none";
-    }
-}
-window.onclick = function (event) {
-    closeSetting();
+function closeModal(modal) {
+    var modal = document.getElementById(modal);
+    modal.style.display = "none";
 }
 
 function darkMode() {
@@ -26,7 +20,7 @@ function darkMode() {
 }
 function dysFont() {
     var checkbox = document.getElementById("dyscheckbox");
-    var textToChange = document.querySelectorAll(".txt");
+    var textToChange = document.querySelectorAll(".dys");
     var font;
     if (checkbox.checked == true) {
         font = "dys";
@@ -35,34 +29,42 @@ function dysFont() {
         font = "main";
     }
     textToChange.forEach(function (item) {
-        let currText = item.id;
-        document.getElementById(currText).style.fontFamily = font;
+        item.style.fontFamily = font;
     })
     document.getElementById("jeu-select").style.fontFamily = font;
 }
 
 function setColor(color) {
     if (color == "black") {
+        var backgroundToChange = document.querySelectorAll(".background");
+        backgroundToChange.forEach(function(element){
+            element.style.backgroundColor = blackColor;
+        });
         document.body.style.color = whiteColor;
-        document.getElementById("body").style.backgroundColor = blackColor;
+        
         document.getElementById("setting_int").style.color = whiteColor;
-        document.getElementById("setting_int").style.backgroundColor = blackColor;
         var hr = document.querySelectorAll("#hr");
         hr.forEach(function (item) {
             item.setAttribute("style", "border : 3px solid " + whiteColor);
         });
-        document.querySelector(".modal-body").style.border = "5px solid" + whiteColor;
+        document.querySelectorAll(".border").forEach(function(element){
+            element.style.border = "5px solid" + whiteColor;
+        });
 
     } else {
         document.body.style.color = blackColor;
-        document.getElementById("body").style.backgroundColor = whiteColor;
+        var backgroundToChange = document.querySelectorAll(".background");
+        backgroundToChange.forEach(function(element){
+            element.style.backgroundColor = whiteColor;
+        });
         document.getElementById("setting_int").style.color = blackColor;
-        document.getElementById("setting_int").style.backgroundColor = whiteColor;
         var hr = document.querySelectorAll("#hr");
         hr.forEach(function (item) {
             item.setAttribute("style", "border : 3px solid " + blackColor);
         });
-        document.querySelector(".modal-body").style.border = "5px solid" + blackColor;
+        document.querySelectorAll(".border").forEach(function(element){
+            element.style.border = "5px solid" + blackColor;
+        });
     }
 }
 
diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js
index 8898a5e..1b664b2 100644
--- a/site/vue/js/lang.js
+++ b/site/vue/js/lang.js
@@ -13,6 +13,8 @@ const lang = {
         inactive_line_setting : "Couleur lines innactive : ",
         active_switch_setting : "Couleur switchs active : ",
         inactive_switch_setting : "Couleur switchs innactive : ",
+        scoreTitle: "Tableau des scores",
+        infoTitle: "Comment jouer ?",
     },
     en: {
         titleGame: "Make It True",
@@ -28,5 +30,7 @@ const lang = {
         inactive_line_setting : "Color inactive lines : ",
         active_switch_setting : "Color inactive switch : ",
         inactive_switch_setting : "Color inactive switchs : ",
+        scoreTitle: "Scoreboard",
+        infoTitle: "How to play ?",
     }
 }
\ No newline at end of file
