diff --git a/app.js b/app.js
index b9ffdec..41a721b 100755
--- a/app.js
+++ b/app.js
@@ -2,35 +2,59 @@
 GAME RULES:
 
 - The game has 2 players, playing in rounds
-- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score
+- In each turn, a player rolls a dice as many times as he wishes. Each result get added to his ROUND score
 - BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
 - The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn
 - The first player to reach 100 points on GLOBAL score wins the game
 
 */
+
+function generatePlayerList() {
+    let playersWindow = document.getElementById('players-window');
+    playersWindow.innerHTML = '';
+    for(let i = 0; i < scores.length; i++) {
+        let playerItem = document.createElement('div');
+        if(i == 0) {
+            playerItem.setAttribute('class', 'player-item active');
+        }else{
+            playerItem.setAttribute('class', 'player-item');
+        }
+        playerItem.setAttribute('id', 'player-' + i);
+        let playerName = document.createElement('div');
+        playerName.setAttribute('class', 'player-name');
+        playerName.innerHTML = 'Player ' + (i+1);
+        playerItem.appendChild(playerName);
+        let playerScore = document.createElement('div');
+        playerScore.setAttribute('class', 'player-score');
+        playerScore.setAttribute('id', 'score-' + i);
+        playerScore.innerHTML = '0';
+        playerItem.appendChild(playerScore);
+        playersWindow.appendChild(playerItem);
+    }
+}
+
 console.log("start");
 let scores = [0, 0];
 let activeScores = 0;
-let activePlayer = 0;
+let activePlayer = 0; //index for scores
 let doubleSix = false;
 let highestScore = 0;
+generatePlayerList();
 
 // console.log(dice)
 // document.querySelector("#current-" + activePlayer).textContent = dice
 // document.querySelector('#current-'+ activePlayer).innerHTML = '<em>' + dice + '</em>';
-let score0 = document.getElementById('score-0');
-let score1 = document.getElementById('score-1');
-let current0 = document.getElementById('current-0');
-let current1 = document.getElementById('current-1');
+let activeScoreDom = document.getElementById('current-player-score');
+let currentScoreDom = document.getElementById('current-player-temp-score');
+// let score0 = document.getElementById('score-0');
+// let score1 = document.getElementById('score-1');
+// let current0 = document.getElementById('current-0');
+// let current1 = document.getElementById('current-1');
 let newGame = document.querySelector('.btn-new');
 
 let highestScoreEl = document.querySelector('.highest-score span');
-let x = document.querySelector('#current-' + activePlayer).textContent;
-console.log('x is ' + x);
 document.querySelector('.dice').style.display = 'none';
 let bottomRoll = document.querySelector('.btn-roll');
-console.log(bottomRoll);
-
 
 
 bottomRoll.addEventListener('click', function () {
@@ -47,19 +71,13 @@ bottomRoll.addEventListener('click', function () {
     } else {
         if (dice == 6){
             if (doubleSix){
-                looseScore()
+                looseScore();
             }
             doubleSix = true
         }
         doubleSix = false;
         activeScores += dice;
-
-        if (activePlayer == 0) {
-            current0.textContent = activeScores;
-        } else {
-            current1.textContent = activeScores;
-        }
-
+        currentScoreDom.textContent = activeScores;
     }
 
 });
@@ -69,82 +87,84 @@ buttonHold.addEventListener('click', function () {
     updateHighestScore(scores[activePlayer]);
     checkWinner();
     activeScores = 0;
-    if (activePlayer == 0) {
-        score0.textContent = scores[0].toString();
-        current0.textContent = '0'
-    } else {
-        score1.textContent = scores[1].toString();
-        current1.textContent = '0'
-    }
-    nextPlayer()
+    // if (activePlayer == 0) {
+    //     score0.textContent = scores[0].toString();
+    //     current0.textContent = '0'
+    // } else {
+    //     score1.textContent = scores[1].toString();
+    //     current1.textContent = '0'
+    // }
+    //maybe have nextplayer updating UI
+    nextPlayer();
 });
 
 newGame.addEventListener('click', function () {
-    scores = [0, 0];
+    let playerCount = Number(document.getElementById('player-count').value);
+    if (isNaN(playerCount) || playerCount < 2 ) {
+        playerCount = 2;
+    }
+    scores = new Array(playerCount).fill(0);
     activeScores = 0;
     activePlayer = 0;
-    score0.textContent = '0';
-    score1.textContent = '0';
-    current0.textContent = '0';
-    current1.textContent = '0';
-    document.querySelector('.player-0-panel').classList.add('active');
-    document.querySelector('.player-1-panel').classList.remove('active');
-    document.querySelector('.dice').style.display = 'none'
+    highestScore = 0;
+    highestScoreEl.textContent = '0';
+    activeScoreDom.textContent = '0';
+    currentScoreDom.textContent = '0';
+    generatePlayerList();
+    document.querySelector('.dice').style.display = 'none';
 });
 
 
 function nextPlayer() {
-    if (activePlayer == 0) {
-
-        score0.textContent = scores[0].toString();
-        activeScores = 0;
-        current0.textContent = '0';
+    document.getElementById('score-' + activePlayer).textContent = scores[activePlayer].toString();
+    if(activePlayer >= scores.length - 1){
         //switch player
-        activePlayer = 1;
-        //switch active state
-        changeActiveState();
-    } else {
-
-        score1.textContent = scores[1].toString();
-        activeScores = 0;
-        current1.textContent = '0';
+        activePlayer = 0; 
+    }else{
         //switch player
-        activePlayer = 0;
-        //switch active state
-        changeActiveState()
+        activePlayer++;
     }
+    activeScoreDom.textContent = scores[activePlayer].toString();
+    activeScores = 0;
+    currentScoreDom.textContent = '0';
+    document.getElementById('current-player-name').textContent = 'Player ' + (activePlayer + 1);
+    //switch active state
+    changeActiveState(activePlayer);
 }
 
 function checkWinner() {
-    if (scores[0] >= 100) {
+    // if (scores[0] >= 100) {
 
-        document.querySelector('.player-0-panel').classList.add('winner');
-        document.querySelector('.player-0-panel').classList.add('active')
-    } else if (scores[1] >= 100) {
+    //     // document.querySelector('.player-0-panel').classList.add('winner');
+    //     // document.querySelector('.player-0-panel').classList.add('active')
+    // } else if (scores[1] >= 100) {
 
-        document.querySelector('.player-1-panel').classList.add('winner');
-        document.querySelector('.player-1-panel').classList.add('active')
+    //     // document.querySelector('.player-1-panel').classList.add('winner');
+    //     // document.querySelector('.player-1-panel').classList.add('active')
+    // }
+    if(scores[activePlayer] >= 100) {
+        document.getElementById('player-' + activePlayer).classList.add('winner');
     }
 }
 
-function changeActiveState() {
-    document.querySelector('.player-0-panel').classList.toggle('active');
-    document.querySelector('.player-1-panel').classList.toggle('active');
-    document.querySelector('.dice').style.display = 'none'
+function changeActiveState(playerIndex) {
+    // document.querySelector('.player-0-panel').classList.toggle('active');
+    // document.querySelector('.player-1-panel').classList.toggle('active');
+    if(playerIndex == 0){
+        document.getElementById('player-' + (scores.length - 1)).classList.remove('active');
+    }else{
+        document.getElementById('player-' + (playerIndex - 1)).classList.remove('active');
+    }
+    document.getElementById('player-' + playerIndex).classList.add('active');
+    document.querySelector('.dice').style.display = 'none';
 }
 
 function looseScore() {
     console.log('loosing score');
     activeScores = 0;
-    if (activePlayer == 0) {
-        scores[0] = 0;
-        score0.textContent = scores[0].toString();
-        current0.textContent = '0';
-    } else {
-        scores[1] = 0;
-        score1.textContent = scores[1].toString();
-        current1.textContent = '0';
-    }
+    scores[activePlayer] = 0;
+    activeScoreDom.textContent = scores[activePlayer].toString();
+    currentScoreDom.textContent = '0';
 }
 
 
@@ -154,4 +174,4 @@ function changeTheme(checked) {
 function updateHighestScore(score) {
     if (score > highestScore) highestScore = score;
     highestScoreEl.textContent = highestScore;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 19cd939..328c76f 100755
--- a/index.html
+++ b/index.html
@@ -23,25 +23,39 @@
 
         <div class="wrapper clearfix">
             <span class="highest-score"><i class="ion-ios-flag"></i>Highest score : <span>0</span></span>
-            <div class="player-0-panel active">
-                <div class="player-name" id="name-0">Player 1</div>
-                <div class="player-score" id="score-0">0</div>
-                <div class="player-current-box">
-                    <div class="player-current-label">Current</div>
-                    <div class="player-current-score" id="current-0">0</div>
+            <div class="player-list-panel">
+                <div class="player-list" id="players-window">
+                    <div class="player-item" id="player-0">
+                        <div class="player-name" >Player 1</div>
+                        <div class="player-score" id="score-0">0</div>
+                    </div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                    <div class="player-item"></div>
+                </div>
+                <div class="new-game-config">
+                    <button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
+                    <div>
+                        <label >players:</label>
+                        <input id="player-count" type="text">
+                    </div>
                 </div>
             </div>
-            
-            <div class="player-1-panel">
-                <div class="player-name" id="name-1">Player 2</div>
-                <div class="player-score" id="score-1">0</div>
+            <div class="player-panel">
+                <div class="player-name" id="current-player-name">Player 1</div>
+                <div class="player-score" id="current-player-score">0</div>
                 <div class="player-current-box">
                     <div class="player-current-label">Current</div>
-                    <div class="player-current-score" id="current-1">0</div>
+                    <div class="player-current-score" id="current-player-temp-score">0</div>
                 </div>
             </div>
             
-            <button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
             <button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
             <button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
             
diff --git a/style.css b/style.css
index cf8da53..d348983 100755
--- a/style.css
+++ b/style.css
@@ -44,16 +44,86 @@ body.dark-theme .wrapper {
     background-color: #222;
 }
 
-.player-0-panel,
-.player-1-panel {
+.player-list-panel,
+.player-panel {
     width: 50%;
     float: left;
     height: 600px;
     padding: 100px;
 }
 
+.player-list-panel{
+    box-sizing: border-box;
+    /* border-right: 2px solid black; */
+    padding: 0px;
+}
 
+.player-list {
+    width: 100%;
+    height: 500px;
+    box-sizing: border-box;
+    overflow: auto;
+    padding: 10px 10px 0px 10px;
+}
 
+.player-list::-webkit-scrollbar {
+    display:none;
+}
+
+.player-item {
+    width: 100%;
+    height: 100px;
+    background-color: antiquewhite;
+    box-sizing: border-box;
+    margin-bottom: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: black;
+}
+
+.player-item.active {
+    background-color: #b4e8b4;
+    color: white;
+}
+
+.player-item.winner {
+    background-color: gold;
+}
+
+.player-item>.player-score {
+    font-size: 60px;
+    text-align: initial;
+    margin: 0px;
+}
+
+.player-item>.player-name {
+    font-size: 30px;
+    position: static;
+    text-align: initial;
+    margin: 0px;
+}
+
+.new-game-config {
+    width: 100%;
+    height: 100px;
+    box-sizing: border-box;
+    /* border-top: 2px solid black; */
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.new-game-config>.btn-new {
+    position: static;
+    transform: initial;
+}
+
+.new-game-config input {
+    font: inherit;
+    width: 100px;
+    height: 25px;
+}
 /**********************************************
 *** PLAYERS
 **********************************************/
@@ -114,7 +184,7 @@ body.dark-theme .active { background-color: #333; }
 button {
     position: absolute;
     width: 200px;
-    left: 50%;
+    top: 87%;
     transform: translateX(-50%);
     color: #555;
     background: none;
@@ -148,14 +218,13 @@ i {
     transition: margin 0.3s;
 }
 
-.btn-new { top: 75px;}
-.btn-roll { top: 403px;}
-.btn-hold { top: 467px;}
+.btn-roll { left: 600px;}
+.btn-hold { left: 900px;}
 
 .dice {
     position: absolute;
-    left: 50%;
-    top: 178px;
+    left: 75%;
+    top: 280px;
     transform: translateX(-50%);
     height: 100px;
     box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
@@ -193,7 +262,7 @@ body.dark-theme .winner { background-color: #333; }
     width: auto;
     top: 25px;
     position: absolute;
-    left: 50%;
+    left: 75%;
     transform: translateX(-50%);
     font-family: Lato;
     font-size: 20px;