diff --git a/index.html b/index.html
index 04d117e..0d06fe3 100755
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
 </head>
 
 <body>
+
 <header>
     <ul id="nav-bar">
         <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
@@ -36,9 +37,9 @@
 
     </div>
     <div id="right" class="column">
-        <button class="action-button">Join Public Game</button>
-        <button class="action-button">New Public Game</button>
-        <button class="action-button">New Private Game</button>
+        <button class="action-button">Create solo game</button>
+        <button class="action-button">Join game</button>
+        <button class="action-button">New Game</button>
     </div>
 </div>
 
diff --git a/resources/logo.png b/resources/logo.png
new file mode 100644
index 0000000..46c6bfc
Binary files /dev/null and b/resources/logo.png differ
diff --git a/src/Console/Console.html b/src/Console/Console.html
index 991d7c0..c289909 100755
--- a/src/Console/Console.html
+++ b/src/Console/Console.html
@@ -19,7 +19,8 @@
     <script src="../Model/Factory.js"></script>
     <script src="../Model/Deck.js"></script>
     <script src="../../test/testsIsHyperset.js"></script>
-    <script src="main.js"></script>
+    <script src="../../test/testsNumberHyperset.js"></script>
+    <!--<script src="main.js"></script>-->
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/algo.js b/src/algo.js
index e4c38c8..bcc7e7b 100755
--- a/src/algo.js
+++ b/src/algo.js
@@ -152,33 +152,33 @@ function trouveElements(attributsCartes) {
 
     let x;
 
-    tabColor.forEach(element => {
+    TAB_COLOR.forEach(element => {
         if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabColor);
+            x = createElements(attributsCartes, TAB_COLOR);
         }
     });
 
-    tabNumber.forEach(element => {
+    TAB_NUMBER.forEach(element => {
         if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabNumber);
+            x = createElements(attributsCartes, TAB_NUMBER);
         }
     });
 
-    tabShape.forEach(element => {
+    TAB_SHAPE.forEach(element => {
         if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabShape);
+            x = createElements(attributsCartes, TAB_SHAPE);
         }
     });
 
-    tabFilling.forEach(element => {
+    TAB_FILLING.forEach(element => {
         if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabFilling);
+            x = createElements(attributsCartes, TAB_FILLING);
         }
     });
 
-    tabOutline.forEach(element => {
+    TAB_OUTLINE.forEach(element => {
         if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabOutline);
+            x = createElements(attributsCartes, TAB_OUTLINE);
         }
     });
 
@@ -191,6 +191,7 @@ function createCard(cards) {
     let carteFinale = [];
     let listeInter = [];
 
+
     cards.forEach(element => {
         attributesMatrix.push(element.getAttributes());
     });
@@ -201,6 +202,7 @@ function createCard(cards) {
             listeInter.push(element[i]);
         });
 
+
         //S'ils sont tous Ã©gaux
         if (listeInter.every(element => element === listeInter[0])) {
             l = []
@@ -218,8 +220,6 @@ function createCard(cards) {
             }
         }
     }
-
-    console.log(carteFinale);
     return carteFinale;
 }
 
@@ -244,3 +244,46 @@ function isHyperset(cardsLeft, cardsRight) {
     }
     return true;
 }
+
+function numberOfHyperset2(deck) {
+
+    let res = 0
+
+    for (i = 0; i < deck.length - 3; i++) {
+        for (j = i + 1; j < deck.length - 2; j++) {
+            for (k = j + 1; k < deck.length - 1; k++) {
+                for (lapin = k + 1; lapin < deck.length; lapin++) {
+                    console.log(" i,j,k,l :", i, j, k, lapin)
+                    if (isHyperset([deck[i], deck[j]], [deck[k], deck[lapin]])) {
+                        console.log(deck[i],deck[j],deck[k],deck[lapin])
+                        res += 1
+                    }
+                }
+            }
+        }
+    }
+    return res
+}
+
+function numberOfHyperset3(deck) {
+    let res = 0
+    for (i = 0; i < deck.length - 5; i = i + 1) {
+        for (j = i + 1; j < deck.length - 4; j = j + 1) {
+            for (k = j + 1; k < deck.length - 3; k = k + 1) {
+                for (lolita = k + 1; lolita < deck.length - 2; lolita = lolita + 1) {
+                    for (m = lolita + 1; m < deck.length - 1; m = m + 1) {
+                        for (n = m + 1; n < deck.length; n = n + 1) {
+                            //console.log(i, j, k, lolita, m, n)
+                            if (isHyperset([deck[i], deck[j], deck[k]], [deck[lolita], deck[m], deck[n]])) {
+                                res += 1
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return res
+
+}
+
diff --git a/styles/index.css b/styles/index.css
index 6e5be25..e728d40 100755
--- a/styles/index.css
+++ b/styles/index.css
@@ -107,4 +107,34 @@ h1 {
     display: flex;
     flex-direction: column;
     margin-top: auto;
-}
\ No newline at end of file
+}
+
+#tuto-block {
+    height: 86.7vh;
+    background-color: white;
+    border: 0.5rem solid black;
+}
+
+#p-block {
+    height: 75%;
+    width: 75%; 
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+#picture-logo {
+    display: block;
+    margin: 0 auto;
+}
+
+#phrase-finale{
+    font-size:18pt;
+    color:red;
+    font-family:'Comic Sans MS';
+}
diff --git a/test/testsIsHyperset.js b/test/testsIsHyperset.js
index 664ddcc..60f0202 100755
--- a/test/testsIsHyperset.js
+++ b/test/testsIsHyperset.js
@@ -1,8 +1,8 @@
-let card1 = new Card({'color':'red', 'number':3, 'shape':'wave','filling':'full'});
+let card1 = new Card({ 'color': 'red', 'number': 3, 'shape':'squiggle','filling':'full'});
 let card2 = new Card({'color':'red', 'number':3, 'shape':'oval','filling':'empty'});
 let card3 = new Card({'color':'blue', 'number':2, 'shape':'oval', 'fillin':'full'});
-let card4 = new Card({'color':'green', 'number':1, 'shape':'wave', 'fillin':'pointed'});
-let card5 = new Card({'color':'green', 'number':1, 'shape':'wave', 'fillin':'full'});
+let card4 = new Card({ 'color': 'green', 'number': 1, 'shape':'squiggle', 'fillin':'pointed'});
+let card5 = new Card({ 'color': 'green', 'number': 1, 'shape':'squiggle', 'fillin':'full'});
 deckA = [];
 deckB = [];
 deckC = [];
@@ -14,16 +14,16 @@ deckC.push(card3, card5);
 console.assert(isHyperset(deckA, deckB) == true);
 console.assert(isHyperset(deckA, deckC) == false);
 
-let BcardG1 = new Card({'color':'red', 'number':4, 'shape':'wave','filling':'empty','outline':'continuous'});
-let BcardG2 = new Card({'color':'red', 'number':3, 'shape':'wave','filling':'full','outline':'continuous'});
-let BcardG3 = new Card({'color':'red', 'number':2, 'shape':'wave','filling':'squared','outline':'continuous'});
-let BcardG4 = new Card({'color':'red', 'number':1, 'shape':'wave','filling':'pointed','outline':'continuous'});
+let BcardG1 = new Card({ 'color': 'red', 'number': 4, 'shape':'diamond','filling':'empty','outline':'continuous'});
+let BcardG2 = new Card({ 'color': 'red', 'number': 3, 'shape':'squiggle','filling':'full','outline':'continuous'});
+let BcardG3 = new Card({ 'color': 'red', 'number': 2, 'shape':'star','filling':'squared','outline':'continuous'});
+let BcardG4 = new Card({ 'color': 'red', 'number': 1, 'shape':'triangle','filling':'pointed','outline':'continuous'});
 
-let BcardD1 = new Card({'color':'green', 'number':3, 'shape':'oval','filling':'pointed','outline':'cloudy'});
-let BcardD2 = new Card({'color':'blue', 'number':2, 'shape':'oval','filling':'squared','outline':'sharpy'});
-let BcardD3 = new Card({'color':'purple', 'number':4, 'shape':'oval','filling':'full','outline':'hyphen'});
-let BcardD4 = new Card({'color':'orange', 'number':1, 'shape':'oval','filling':'empty','outline':'dotted'});
-let BcardD5 = new Card({'color':'purple', 'number':4, 'shape':'oval','filling':'stripped','outline':'hyphen'});
+let BcardD1 = new Card({'color':'green', 'number':3, 'shape':'oval','filling':'pointed','outline':'dot'});
+let BcardD2 = new Card({'color':'blue', 'number':2, 'shape':'oval','filling':'squared','outline':'rect'});
+let BcardD3 = new Card({'color':'purple', 'number':4, 'shape':'oval','filling':'full','outline':'spade'});
+let BcardD4 = new Card({'color':'orange', 'number':1, 'shape':'oval','filling':'empty','outline':'sharp'});
+let BcardD5 = new Card({'color':'purple', 'number':4, 'shape':'oval','filling':'stripped','outline':'spade'});
 
 
 BdeckA = [];
diff --git a/test/testsNumberHyperset.js b/test/testsNumberHyperset.js
new file mode 100644
index 0000000..4483516
--- /dev/null
+++ b/test/testsNumberHyperset.js
@@ -0,0 +1,9 @@
+// CREATE DECK
+
+let deck = new Deck([0, 1, 2, 3], 4);
+
+// CHECK HYPERSET
+
+console.log(deck.outputCards)
+
+console.log(numberOfHyperset3(deck.outputCards))
diff --git a/views/navBar.html b/views/navBar.html
new file mode 100644
index 0000000..6d2f9de
--- /dev/null
+++ b/views/navBar.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+<!--
+    Si vous rrouvez une unitilité à ce truc, n'hésitez pas.'    
+-->
+
+<html lang="en">
+
+<head>
+    <link rel="stylesheet" type="text/css" href="../styles/style.css">
+    <link rel="stylesheet" type="text/css" href="../styles/index.css">
+</head>
+
+<header>
+    <ul id="nav-bar">
+        <li><a href="./index.html">Home</a></li>
+        <li><a href="./views/cards-test.html">Card Test</a></li>
+        <li><a href="./tutorial.html">Tutorial</a></li>
+        <li><a href="./views/leaderboard.html">Leaderboard</a></li>
+        <li><a href="./views/about.html">About</a></li>
+    </ul>
+</header>
+
+</html>
\ No newline at end of file
diff --git a/views/tutorial.html b/views/tutorial.html
new file mode 100644
index 0000000..27b3708
--- /dev/null
+++ b/views/tutorial.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Tutorial</title>
+    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
+    <link rel="stylesheet" type="text/css" href="../styles/style.css">
+    <link rel="stylesheet" type="text/css" href="../styles/index.css">
+</head>
+
+
+<header>
+    <ul id="nav-bar">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="./cards-test.html">Card Test</a></li>
+        <li><a href="./tutorial.html">Tutorial</a></li>
+        <li><a href="./leaderboard.html">Leaderboard</a></li>
+        <li><a href="./about.html">About</a></li>
+    </ul>
+</header>
+
+<body>
+    <div id="tuto-block">
+        <div id="p-block">
+            <img src="../resources/logo.png"
+                 id="picture-logo"
+                 width="200"
+                 height=auto
+                 alt="Picture not found" /><br /><br />
+            <p>
+                Cette application web vous permet de joueur au cÃ©lÃ¨bre jeu Set.<br />
+                Votre but est d'engendrer un maximum de points avant la fin du temps imparti,
+                pour cela, vous devez rÃ©unir des ensembles de 3 cartes.<br />
+                Un ensemble est constituÃ© de trois cartes oÃ¹ chaque caractÃ©ristique est soit identique, soit diffÃ©rente pour chacune des cartes.<br />
+                Par exemple, un ensemble pourrait Ãªtre composÃ© d'une carte rouge pleine en forme de losange avec un remplissage rayÃ©,<br />
+                une carte verte vide en forme d'ovale avec un remplissage plein et une carte violette pleine en forme de vague avec un remplissage vide.<br />
+                Vous pourrez jouer en solo ou en multijoueur ou vous devez Ãªtre plus rapide que vos adversaire<br />
+                De nombreuses variantes sont disponibles et vous pourrez modifier vos attributs, le nombre de cartes...<br />
+                Pour une premiÃ¨re partie nous vous conseillons la version du jeu Set en 3*4<br /><br />
+            </p>
+            <p id="phrase-finale">
+                A vous de jouer !!!
+            </p>
+        </div>
+    </div>
+
+
+
+</body>
+
+</html>
\ No newline at end of file
