diff --git a/css/grid-template.css b/css/grid-template.css
new file mode 100644
index 0000000..cc5138b
--- /dev/null
+++ b/css/grid-template.css
@@ -0,0 +1,21 @@
+.container {
+    display: grid;
+    grid-template-areas:
+    "player1container acceptcontainer player2container"
+    "leather leather leather"
+    "fabric fabric fabric"
+    "spice spice spice"
+    "silver silver silver"
+    "gold gold gold"
+    "diamond diamond diamond";
+
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(8, 1fr);
+}
+
+.group.leather { grid-area: leather; }
+.group.fabric { grid-area: fabric; }
+.group.spice { grid-area: spice; }
+.group.silver { grid-area: silver; }
+.group.gold { grid-area: gold; }
+.group.diamond { grid-area: diamond; }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 0182d86..cf07428 100644
--- a/css/style.css
+++ b/css/style.css
@@ -79,56 +79,64 @@
     background-size: 44%;
 }
 
-.players {
-    display: flex;
-    justify-content: space-around;
-}
+/* PLAYERS START */
 
-.players .player {
+.player {
     border: 2px solid dodgerblue;
     padding: 0.5vh 4vh;
-    margin: 1.5vh 0;
+    margin: 1.5vh auto;
+    width: 10vw;
     color: #444;
     cursor: pointer;
     border-radius: 2px;
     font-weight: bold;
     font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
-    display: flex;
-    align-items: center;
-    height: 50px;
+    height: 5vh;
+    width: 10vw;
+    line-height: 5vh;
+    text-align: center;
 }
 
-.players .player.selected {
+.player.selected {
     background: #6f9cc9;
     color: #f2eeee;
-
 }
 
-.players .accept {
+.accept {
+    grid-area: acceptcontainer;
     visibility: hidden;
     border: 2px solid dodgerblue;
-    margin: 1.5vh 0;
-    height: 50px;
-    align-items: center;
-    display: flex;
+    margin: 1.5vh auto;
+    width: 10vw;
+    height: 5vh;
     padding: 0.5vh 4vh;
     font-weight: bold;
     font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
     background-color: #bedfff;
     cursor: pointer;
+    line-height: 5vh;
+    text-align: center;
 }
 
-.players .accept.on {
+.accept.on {
     visibility: visible;
 }
 
-.players .player.player1 {
+.player1container {
+    grid-area: player1container;
 }
 
-.players .player.player2 {
+.player2container {
+    grid-area: player2container;
 }
 
-.players .player .score {
+.player.player1 {
+}
+
+.player.player2 {
+}
+
+.player .score {
     height: 50px;
     width: 23px;
     display: inline-block;
@@ -141,7 +149,7 @@
 
 }
 
-.players .player .score:first-child {
+.player .score:first-child {
     margin-left: 15px;
 }
 
@@ -158,12 +166,17 @@
     display: none;
 }
 
+/* PLAYERS END */
+
+/* SCORE TABLE START */
+
 .scoreTable.visible {
     display: block;
 }
 
 .scoreTable h1 {
     text-align: center;
+    font-size: 10vh;
 
 }
 
@@ -184,12 +197,12 @@
     cursor: pointer;
     opacity: 0.1;
 }
+
 .camel_section .nobody {
     opacity: 0.1;
 }
 
-.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected
-{
+.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected {
     opacity: 1;
 }
 
@@ -202,3 +215,5 @@
 .score_section.show {
     display: flex;
 }
+
+/* SCORE TABLE END */
\ No newline at end of file
diff --git a/index.html b/index.html
index 1b7826d..e74ce23 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,9 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
-    <link rel="stylesheet" href="css/style.css"/>
     <link rel="stylesheet" href="css/reset.css"/>
+    <link rel="stylesheet" href="css/grid-template.css"/>
+    <link rel="stylesheet" href="css/style.css"/>
     <script src="js/script.js"></script>
     <script>
         window.onload = function () {
@@ -30,16 +31,19 @@
 
             jaipur.init();
 
-            console.info(jaipur.isRoundOver());
         };
     </script>
 </head>
 <body>
 
 <div class="container">
-    <div class="players">
+    <div class="player1container">
         <div class="player player1" data-player="1">Kicia</div>
+    </div>
+    <div class="acceptcontainer">
         <div class="accept">Przydziel</div>
+    </div>
+    <div class="player2container">
         <div class="player player2" data-player="2">Cysio</div>
     </div>
 
diff --git a/js/script.js b/js/script.js
index 3d36327..3777555 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,4 +1,3 @@
-
 function coin(value, group) {
     this.value = value;
     this.group = group;
@@ -13,7 +12,7 @@ function player(name, id) {
     this.id = id;
     this.selector = '.player.player' + id;
 
-    this.hasCamelCoin = true;
+    this.hasCamelCoin = false;
 
     this.calculateScore = function () {
         var score = 0;
@@ -195,17 +194,41 @@ function game(player1, player2, board) {
                     }
                     jaipur.hideAcceptButton();
                 }
+                jaipur.removeBlankCoin(jaipur.selectedCointType);
+
             } else {
                 //ustawienie selected na elemencie z kliniętej grupy
                 var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)');
                 [].slice.call(coinsFromRow).pop().classList.add('selected');
                 jaipur.showAcceptButton();
+
+
+                //dodanie monety o wartości zero jeśli wybrano wszystkie monety z danej grupy
+                if (!!document.querySelectorAll('.coin.' + this.selectedCointType + ':not(.selected)').length == 0) {
+                    jaipur.addBlankCoin(this.selectedCointType);
+                }
             }
         }
 
 
     };
 
+    this.addBlankCoin = function (groupName) {
+        var blankCoin = document.createElement('span');
+        blankCoin.classList.add('coin');
+        blankCoin.classList.add(groupName);
+        blankCoin.classList.add('blank');
+        blankCoin.innerText = '0';
+        blankCoin.dataset.group=groupName;
+        blankCoin.addEventListener('click', jaipur.coinClick);
+        var firstElementInGroup = document.querySelector('.coin.' + groupName);
+        document.querySelector('.group.' + groupName).insertBefore(blankCoin, firstElementInGroup);
+    };
+
+    this.removeBlankCoin = function (groupName) {
+        document.querySelector('.coin.blank.' + groupName).remove();
+    };
+
     this.showScoreBoard = function () {
 
         document.querySelector('.scoreTable').classList.add('visible');
@@ -232,7 +255,6 @@ function game(player1, player2, board) {
             var group = coins[i].dataset.group;
             jaipur.board.goods[group].pop();
 
-//                    jaipur.activePlayer.coins.push({ value:  parseInt(coins[i].innerText), type: 'goods', group: group});
             jaipur.activePlayer.coins.push(parseInt(coins[i].innerText));
             coins[i].remove();
         }
@@ -249,11 +271,9 @@ function game(player1, player2, board) {
         }
 
         if (!!bonus) {
-//                    { value:  parseInt(coins[i].innerText), type: 'goods', group: group}
-//                    jaipur.activePlayer.bonus.push({ value:  parseInt(coins[i].innerText), type: 'goods', group: group});
             jaipur.activePlayer.bonus.push(bonus);
         }
-//
+
 
         var groups = document.querySelectorAll('.group');
         jaipur.selectedCointType = false;