diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml
index a1276c9..f8cf175 100644
--- a/HyperSet/.idea/workspace.xml
+++ b/HyperSet/.idea/workspace.xml
@@ -107,7 +107,7 @@
       <workItem from="1593512353865" duration="16143000" />
       <workItem from="1593594963138" duration="15031000" />
       <workItem from="1593683259701" duration="5974000" />
-      <workItem from="1593698220416" duration="2057000" />
+      <workItem from="1593698220416" duration="6683000" />
     </task>
     <servers />
   </component>
diff --git a/HyperSet/metiers/deck.php b/HyperSet/metiers/deck.php
index 6e6d709..f543bd8 100644
--- a/HyperSet/metiers/deck.php
+++ b/HyperSet/metiers/deck.php
@@ -152,6 +152,29 @@ class Deck {
 
             }
         }
+        elseif ($changes === 'dealHS') {
+            $colors = array('green', 'red', 'purple');
+            $shapes = array('oval', 'diamond', 'wave');
+            $fills = array('solid', 'stripped', 'open');
+            $border = 'simple';
+            $numbers = array(1, 2, 3);
+
+            $index = 1;
+
+            foreach ($colors as $color) {
+                foreach ($shapes as $shape) {
+                    foreach ($fills as $fill) {
+                        foreach ($numbers as $number) {
+                            $cardAttributes = new CardAttributes($color, $shape, $fill, $border, $number, $index);
+                            $card = new Card($cardAttributes, $this);
+                            $index++;
+                        }
+                    }
+                }
+
+            }
+
+        }
     }
 	public function removeSet($cards) {
 
@@ -176,4 +199,11 @@ class Deck {
 		return array_chop($this->cards, 3);
 	}
 
+    public function fourMore() {
+        return array_chop($this->cards, 4);
+    }
+
+    public function fiveMore() {
+        return array_chop($this->cards, 5);
+    }
 }
\ No newline at end of file
diff --git a/HyperSet/set.php b/HyperSet/set.php
index 2490f26..9e19ce6 100644
--- a/HyperSet/set.php
+++ b/HyperSet/set.php
@@ -44,6 +44,12 @@ if (isset($_GET['action']) && $_GET['action'] == 'deal') {
     $_SESSION['game0'] = new Game($_SESSION['deck0']);
     $game = $_SESSION['game0'];
     echo json_encode($game->start(12));
+} else if (isset($_GET['action']) && $_GET['action'] == 'dealHS') {
+    $_SESSION['deckHS'] = new Deck($_GET['action']);
+    $_SESSION['gameHS'] = new Game($_SESSION['deckHS']);
+    $game = $_SESSION['gameHS'];
+    echo json_encode($game->start(20));
+
 }
 
 else if (isset($_GET['action']) && $_GET['action'] == 'submit'){
@@ -56,15 +62,15 @@ else if (isset($_GET['action']) && $_GET['action'] == 'submit1'){
 }
 else if (isset($_GET['action']) && $_GET['action'] == 'submit2'){
     $deck = $_SESSION['deck2'];
-    echo json_encode($deck->threeMore());
+    echo json_encode($deck->fourMore());
 }
 else if (isset($_GET['action']) && $_GET['action'] == 'submit3'){
     $deck = $_SESSION['deck3'];
-    echo json_encode($deck->threeMore());
+    echo json_encode($deck->fourMore());
 }
 else if (isset($_GET['action']) && $_GET['action'] == 'submit4'){
     $deck = $_SESSION['deck4'];
-    echo json_encode($deck->threeMore());
+    echo json_encode($deck->fiveMore());
 }else if (isset($_GET['action']) && $_GET['action'] == 'submit0'){
     $deck = $_SESSION['deck0'];
     echo json_encode($deck->threeMore());
diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css
index b1500b4..deb09bb 100644
--- a/HyperSet/vues/css/style.css
+++ b/HyperSet/vues/css/style.css
@@ -137,7 +137,7 @@ h1 {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
 	background: repeating-linear-gradient(25deg, red, red 7px, white 8px, white 15px);
-	border: 7px dotted black;
+	border: 10px dotted black;
 
 
 }
@@ -146,7 +146,7 @@ h1 {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
 	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 6px, white 7px, white 14px);
-	border: 7px dotted black;
+	border: 10px dotted black;
 
 }
 
@@ -154,7 +154,7 @@ h1 {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
 	background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 6px, white 7px, white 14px);
-	border: 7px dotted black;
+	border: 10px dotted black;
 
 }
 
@@ -162,7 +162,7 @@ h1 {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
 	background: repeating-linear-gradient(25deg, green, green 6px, white 8px, white 14px);
-	border: 7px dotted black;
+	border: 10px dotted black;
 
 }
 
@@ -170,7 +170,7 @@ h1 {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
 	background: repeating-linear-gradient(25deg, purple, purple 6px, white 8px, white 14px);
-	border: 7px dotted black;
+	border: 10px dotted black;
 }
 
 
@@ -223,32 +223,24 @@ h1 {
 
 
 .diamond.solid.purple.point{
-	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
-	width: 38px;
-	border-style: dashed;
-	border-color: purple;
-	border-width: 4px;
+
+	border: 4px dashed black;
 }
 
 .diamond.solid.green.point{
-	border-style: dashed;
-	border-color: green;
+	border: 4px dashed black;
 }
 .diamond.solid.red.point{
-	border-style: dashed;
-	border-color: red;
+	border: 4px dashed black;
 }
 .diamond.solid.lightblue.point{
-	border-style: dashed;
-	border-color: #6495ED;
+	border: 4px dashed black;
 }
 .diamond.solid.purple.point{
-	border-style: dashed;
-	border-color: purple;
+	border: 4px dashed black;
 }
 .diamond.solid.yellow.point{
-	border-style: dashed;
-	border-color: saddlebrown;
+	border: 4px dashed black;
 }
 
 
diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js
index fb5d070..d2c3fa3 100644
--- a/HyperSet/vues/js/set.js
+++ b/HyperSet/vues/js/set.js
@@ -51,13 +51,13 @@ var Game = {
 	$nbSets0: $('[data-display="nbSets0"]'),
 	$board0: $('[data-display="game-board0"]'),
 
-	cardsH: [],
-	selectedH : [],
-	scoreH: 0,
-	setH: 0,
-	$scoreH: $('[data-display="scoreH"]'),
-	$nbSetsH: $('[data-display="nbSetsH"]'),
-	$boardH: $('[data-display="game-boardH"]'),
+	cardsHS: [],
+	selectedHS : [],
+	scoreHS: 0,
+	setHS: 0,
+	$scoreHS: $('[data-display="scoreH"]'),
+	$nbSetsHS: $('[data-display="nbSetsH"]'),
+	$boardHS: $('[data-display="game-boardH"]'),
 
 	deal: function() {
 		var self = this;
@@ -68,6 +68,8 @@ var Game = {
 		var dealRequest4;
 		var dealRequest0;
 
+		var dealRequestHS;
+
 			// ajax request to get initial set of cards
 			dealRequest = $.ajax({
 				url: 'set.php?action=deal',
@@ -149,6 +151,19 @@ var Game = {
 		});
 
 
+		dealRequest0 = $.ajax({
+			url: 'set.php?action=dealHS',
+			type: 'GET',
+			dataType: 'json',
+			success: function (data) {
+				self.cardsHS = data;
+				self.displayCardsHS.call(self);
+				self.setCardListenersHS();
+				self.setPageListenersHS();
+			}
+		});
+
+
 	},
 
 
@@ -386,6 +401,49 @@ var Game = {
 		});
 
 	},
+	displayCardsHS: function() {
+		var self = this;
+		if (self.cardsHS.length == 0) {
+			return false;
+		}
+
+
+		$.each(self.cards, function(index, card){
+			var cardNode = $('<div>', {
+				class: "card"
+			}).appendTo(self.$boardHS);
+
+
+			cardNode.data({
+				'id': card.id,
+				'shape': card.shape,
+				'fill': card.fill,
+				'color': card.color,
+				'number': card.number
+			});
+
+			var shapeNode = $("<canvas></canvas>");
+			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);
+
+			for (var i = 0; i < card.number; i++) {
+				cardNode.append(shapeNode.clone());
+			}
+			self.$boardHS.append(cardNode);
+
+			// display 4 cards per row
+			if ((index+1) % 4 === 0) {
+				self.$boardHS.append($('<div>'));
+			}
+
+		});
+
+	},
+
+
+
+
+
+