diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml
index a8112a4..92e430a 100644
--- a/HyperSet/.idea/workspace.xml
+++ b/HyperSet/.idea/workspace.xml
@@ -146,6 +146,8 @@
       <workItem from="1595932149409" duration="12275000" />
       <workItem from="1596024979816" duration="5516000" />
       <workItem from="1596107383639" duration="8696000" />
+      <workItem from="1596194794026" duration="1862000" />
+      <workItem from="1596457928722" duration="7449000" />
     </task>
     <servers />
   </component>
@@ -189,10 +191,10 @@
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
     <state width="623" height="498" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1595243925469" />
-    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596107413413">
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596457952056">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
-    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596107413413" />
+    <state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596457952056" />
     <state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
diff --git a/HyperSet/set.php b/HyperSet/set.php
index 897ff20..bcd535f 100644
--- a/HyperSet/set.php
+++ b/HyperSet/set.php
@@ -74,7 +74,7 @@ if (isset($_GET['action']) && $_GET['action'] == 'deal') {
     $_SESSION['deckHS4'] = new Deck($_GET['action']);
     $_SESSION['gameHS4'] = new Game($_SESSION['deckHS4']);
     $game = $_SESSION['gameHS4'];
-    echo json_encode($game->start(40));
+    echo json_encode($game->start(54));
 }
 
 
diff --git a/HyperSet/vues/css/style-page.css b/HyperSet/vues/css/style-page.css
index 361892b..5b74a26 100644
--- a/HyperSet/vues/css/style-page.css
+++ b/HyperSet/vues/css/style-page.css
@@ -423,4 +423,50 @@ input:checked + .slider .on {
 .back-btn img:hover{
     -webkit-transform: rotate(0) scale(1.2);
     transform: rotate(0) scale(1.2);
-}
\ No newline at end of file
+}
+
+
+#progressBar {
+    width: 90%;
+    margin: 10px auto;
+    height: 22px;
+    background-color: Blue;
+}
+
+#progressBar div {
+    height: 100%;
+    text-align: right;
+    padding: 0 10px;
+    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
+    width: 0;
+    background-color: LightBlue;
+    box-sizing: border-box;
+}
+#progressBar div {
+    box-sizing: border-box;
+}
+
+.count{
+    font : oblique 20px Arial, Helvetica, sans-serif;
+    color: #6495ED;
+}
+
+
+#progressBar0 {
+    width: 90%;
+    margin: 10px auto;
+    height: 22px;
+    background-color: Blue;
+}
+#progressBar0 div {
+    height: 100%;
+    text-align: right;
+    padding: 0 10px;
+    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
+    width: 0;
+    background-color: LightBlue;
+    box-sizing: border-box;
+}
+#progressBar0 div {
+    box-sizing: border-box;
+}
diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html
index 2e1cd07..ee1d8bb 100644
--- a/HyperSet/vues/homePage.html
+++ b/HyperSet/vues/homePage.html
@@ -85,6 +85,10 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn0" onclick="goSelectMode0()" src="vues/images/previous.png">
     </div>
+    <p id="countdown0" class = 'count' >5 : 00</p>
+    <div id="progressBar0">
+        <div></div>
+    </div>
     <p>Nombre de carte = 3;       Nombre de critères = 3</p>
     <p>Sets found:  <span data-display="score0" class="score">0</span></p>
     <p>Number of Sets:  <span data-display="nbSets0" class="nbSets"></span></p>
@@ -99,6 +103,10 @@
     <div class=" back-btn small-btn">
         <img class="small-btn" id="previousBtn1" onclick="goSelectMode()" src="vues/images/previous.png">
     </div>
+    <p id="countdown" class = 'count' >10 : 00</p>
+    <div id="progressBar">
+        <div></div>
+    </div>
     <p>Nombre de carte = 3;       Nombre de critères = 4</p>
     <p>Sets found:  <span data-display="score" class="score">0</span></p>
     <p>Number of Sets:  <span data-display="nbSets" class="nbSets"></span></p>
@@ -165,6 +173,7 @@
 
 <div id='gameHS' class="wrapper" style="display: none;">
     <h1>HyperSet 3x4 OK</h1>
+
     <div class=" back-btn small-btn">
         <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
     </div>
diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js
index 7356fb5..ae71471 100644
--- a/HyperSet/vues/js/Settings.js
+++ b/HyperSet/vues/js/Settings.js
@@ -124,6 +124,9 @@ function showGame(){
     document.getElementById('selectModeSet').style.display='none';
     Game.deal();
 
+
+
+
 }
 
 function showGame1(){
@@ -224,15 +227,15 @@ function goSelect(){
 function goSelect1(){
     document.getElementById('selectMode').style.display='block';
     document.getElementById('selectModeHyperSet').style.display='none';
+    document.getElementById('selectMode').style.display='home';
+
 }
 
 
 
 
 function goSelectMode(){
-    document.getElementById('selectModeSet').style.display='block';
-    document.getElementById('game').style.display='none';
-    document.getElementById('carte').innerHTML = "";
+    window.location.reload();
 }
 function goSelectMode1(){
     document.getElementById('selectModeSet').style.display='block';
@@ -259,9 +262,7 @@ function goSelectMode4(){
 
 }
 function goSelectMode0(){
-    document.getElementById('selectModeSet').style.display='block';
-    document.getElementById('game0').style.display='none';
-    document.getElementById('carte0').innerHTML = "";
+    window.location.reload();
 
 }
 
@@ -297,4 +298,4 @@ function goSelectModeHyperSet4(){
     document.getElementById('gameHS4').style.display='none';
     document.getElementById('selectModeHyperSet').style.display='block';
     document.getElementById('carteHS4').innerHTML = "";
-}
\ No newline at end of file
+}
diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js
index f9da672..eb67b69 100644
--- a/HyperSet/vues/js/set.js
+++ b/HyperSet/vues/js/set.js
@@ -129,6 +129,44 @@ var Game = {
                 self.existingSet();
                 self.displayCards.call(self);
                 self.setCardListeners();
+
+				function progress(timeleft, timetotal, $element) {
+					var progressBarWidth = timeleft * $element.width() / timetotal;
+					$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
+					if(timeleft > 0) {
+						setTimeout(function() {
+							progress(timeleft - 1, timetotal, $element);
+						}, 1000);
+					}
+				}
+
+				progress(601, 601, $('#progressBar'));
+
+			    const startingMinutes = 10;
+				let time = startingMinutes *60;
+
+				const countdownEl = document.getElementById('countdown');
+				setInterval(updateCountDown,1000);
+
+
+
+				function updateCountDown() {
+					const minutes = Math.floor(time / 60);
+					let seconds = time % 60;
+					seconds = seconds < 10 ? '0' + seconds : seconds;
+					if(time > 0 ) {
+						countdownEl.innerHTML = minutes + ' : ' + seconds;
+					}
+					if(time === -1  ){
+						countdownEl.innerHTML = ' TIME OVER !';
+
+					}
+					if( time === -2){
+						window.location.reload();
+					}
+					time--;
+
+				}
             }
         });
     },
@@ -254,6 +292,43 @@ var Game = {
                 self.displayCards0.call(self);
                 self.existingSet0();
                 self.setCardListeners0();
+				function progress(timeleft, timetotal, $element) {
+					var progressBarWidth = timeleft * $element.width() / timetotal;
+					$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
+					if(timeleft > 0) {
+						setTimeout(function() {
+							progress(timeleft - 1, timetotal, $element);
+						}, 1000);
+					}
+				}
+
+				progress(301, 301, $('#progressBar0'));
+
+				const startingMinutes = 5;
+				let time = startingMinutes *60;
+
+				const countdownEl = document.getElementById('countdown0');
+				setInterval(updateCountDown,1000);
+
+
+
+				function updateCountDown() {
+					const minutes = Math.floor(time / 60);
+					let seconds = time % 60;
+					seconds = seconds < 10 ? '0' + seconds : seconds;
+					if(time > 0 ) {
+						countdownEl.innerHTML = minutes + ' : ' + seconds;
+					}
+					if(time === -1  ){
+						countdownEl.innerHTML = ' TIME OVER !';
+
+					}
+					if( time === -2){
+						window.location.reload();
+					}
+					time--;
+
+				}
             }
         });
 
@@ -415,7 +490,7 @@ var Game = {
 			return false;
 		}
 
-
+        this.$score.html(this.score);
 		$.each(self.cards, function(index, card){
 			var cardNode = $('<div>', {
 				class: "card"
@@ -445,6 +520,7 @@ var Game = {
 
 		});
 
+
 	},
 
 	displayCards1: function() {
@@ -453,7 +529,7 @@ var Game = {
 			return false;
 		}
 
-
+        this.$score1.html(this.score1);
 		$.each(self.cards1, function(index, card){
 			var cardNode = $('<div>', {
 				class: "card"
@@ -491,6 +567,7 @@ var Game = {
 		if (self.cards2.length == 0) {
 			return false;
 		}
+        this.$score2.html(this.score2);
 
 		$.each(self.cards2, function(index, card){
 			var cardNode = $('<div>', {
@@ -527,7 +604,7 @@ var Game = {
 		if (self.cards3.length == 0) {
 			return false;
 		}
-
+        this.$score3.html(this.score3);
 		$.each(self.cards3, function(index, card){
 			var cardNode = $('<div>', {
 				class: "card"
@@ -566,7 +643,7 @@ var Game = {
 			return false;
 		}
 
-
+        this.$score4.html(this.score4);
 		$.each(self.cards4, function(index, card){
 			var cardNode = $('<div>', {
 				class: "card"
@@ -607,7 +684,7 @@ var Game = {
 		if (self.cards0.length == 0) {
 			return false;
 		}
-
+        this.$score0.html(this.score0);
 
 		$.each(self.cards0, function(index, card){
 			var cardNode = $('<div>', {
@@ -644,7 +721,7 @@ var Game = {
 		if (self.cardsHS.length == 0) {
 			return false;
 		}
-
+        this.$scoreHS.html(this.scoreHS);
 
 		$.each(self.cardsHS, function(index, card){
 			var cardNode = $('<div>', {
@@ -675,6 +752,8 @@ var Game = {
 
 		});
 
+
+
 	},
 
 
@@ -683,7 +762,7 @@ var Game = {
 		if (self.cardsHS0.length == 0) {
 			return false;
 		}
-
+        this.$scoreHS0.html(this.scoreHS0);
 
 		$.each(self.cardsHS0, function(index, card){
 			var cardNode = $('<div>', {
@@ -722,7 +801,7 @@ var Game = {
 			return false;
 		}
 
-
+        this.$scoreHS1.html(this.scoreHS1);
 		$.each(self.cardsHS1, function(index, card){
 			var cardNode = $('<div>', {
 				class: "card"
@@ -759,7 +838,7 @@ var Game = {
 		if (self.cardsHS2.length == 0) {
 			return false;
 		}
-
+        this.$scoreHS2.html(this.scoreHS2);
 
 		$.each(self.cardsHS2, function(index, card){
 			var cardNode = $('<div>', {
@@ -798,6 +877,8 @@ var Game = {
             return false;
         }
 
+        this.$scoreHS3.html(this.scoreHS3);
+
         $.each(self.cardsHS3, function(index, card){
             var cardNode = $('<div>', {
                 class: "card"
@@ -836,6 +917,7 @@ var Game = {
         if (self.cardsHS4.length == 0) {
             return false;
         }
+        this.$scoreHS4.html(this.scoreHS4);
 
         $.each(self.cardsHS4, function(index, card){
             var cardNode = $('<div>', {