diff --git a/app.js b/app.js
new file mode 100755
index 0000000..bbed96e
--- /dev/null
+++ b/app.js
@@ -0,0 +1,106 @@
+/*
+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
+- 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
+
+*/
+var scores, roundScore, activePlayer;
+var gamePlaying = true;
+
+// We initiate the game with the basic variables
+init();
+
+// Clicking the button to roll the dice
+document.querySelector(".btn-roll").addEventListener("click", function(){
+    if(gamePlaying) {
+        // 1. Get the random number
+        var dice = Math.floor((Math.random() * 6)) + 1;
+
+
+        // 2. Display the result
+        var diceDOM = document.querySelector(".dice");
+        diceDOM.style.display = "block";
+        diceDOM.src = "dice-" + dice + ".png";
+
+
+        // 3. Update the roundScore, but only if that's not 1
+        if(dice !== 1) {
+            //Add score
+            roundScore += dice;
+            document.querySelector("#current-" + activePlayer).textContent = roundScore;
+
+        } else {
+            // Next player
+            nextPlayer()
+        }
+    }
+});
+
+document.querySelector(".btn-hold").addEventListener("click", function(){
+    if(gamePlaying){
+        // Add currentScore to globalScore
+        scores[activePlayer] += roundScore;
+
+        // Update the UI to show the globalScore
+        document.querySelector("#score-" + activePlayer).textContent = scores[activePlayer];
+
+        // Check if player won the game
+        if(scores[activePlayer] >= 100){
+            document.querySelector("#name-" + activePlayer).textContent = "Winner!";
+            document.querySelector(".dice").style.display = "none";
+            document.querySelector(".player-" + activePlayer + "-panel").classList.add("winner");
+            document.querySelector(".player-" + activePlayer + "-panel").classList.remove("active");
+            gamePlaying = false;
+        } else {
+            nextPlayer()
+        }
+    }
+})
+
+function nextPlayer() {
+    //Next player with ternary operator
+    activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
+    roundScore = 0;
+
+    document.getElementById("current-0").textContent = "0";
+    document.getElementById("current-1").textContent = "0";
+
+    document.querySelector(".player-0-panel").classList.toggle("active");
+    document.querySelector(".player-1-panel").classList.toggle("active");
+    document.querySelector(".dice").style.display = "none";
+}
+
+document.querySelector(".btn-new").addEventListener("click", init);
+
+function init(){
+    scores = [0,0];
+    activePlayer = 0;
+    roundScore = 0;
+
+    // document.querySelector("#current-" + activePlayer).textContent = dice;
+    document.querySelector(".dice").style.display = "none";
+    document.getElementById("score-0").textContent = "0";
+    document.getElementById("score-1").textContent = "0";
+    document.getElementById("current-0").textContent = "0";
+    document.getElementById("current-1").textContent = "0";
+    document.getElementById("name-0").textContent = "Player 1";
+    document.getElementById("name-1").textContent = "Player 2";
+    document.querySelector(".player-0-panel").classList.remove("active");
+    document.querySelector(".player-1-panel").classList.remove("active");
+    document.querySelector(".player-0-panel").classList.remove("winner");
+    document.querySelector(".player-1-panel").classList.remove("winner");
+
+    document.querySelector(".player-0-panel").classList.add("active");;
+}
+
+// Clicking for instructions
+document.querySelector(".instructions").addEventListener("click", function(){
+        document.querySelector(".modal").classList.add("show");
+        document.querySelector(".close").addEventListener("click", function(){
+            document.querySelector(".modal").classList.remove("show");
+    });
+});
diff --git a/back.jpg b/back.jpg
new file mode 100755
index 0000000..dcd9a7d
Binary files /dev/null and b/back.jpg differ
diff --git a/dice-1.png b/dice-1.png
new file mode 100755
index 0000000..0d911ca
Binary files /dev/null and b/dice-1.png differ
diff --git a/dice-2.png b/dice-2.png
new file mode 100755
index 0000000..f3c32af
Binary files /dev/null and b/dice-2.png differ
diff --git a/dice-3.png b/dice-3.png
new file mode 100755
index 0000000..e3ef2b5
Binary files /dev/null and b/dice-3.png differ
diff --git a/dice-4.png b/dice-4.png
new file mode 100755
index 0000000..0c785f7
Binary files /dev/null and b/dice-4.png differ
diff --git a/dice-5.png b/dice-5.png
new file mode 100755
index 0000000..b4b41e3
Binary files /dev/null and b/dice-5.png differ
diff --git a/dice-6.png b/dice-6.png
new file mode 100755
index 0000000..6f4d9b3
Binary files /dev/null and b/dice-6.png differ
diff --git a/farm.jpg b/farm.jpg
new file mode 100644
index 0000000..eca1e48
Binary files /dev/null and b/farm.jpg differ
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..5c28d61
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
+        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
+        <link type="text/css" rel="stylesheet" href="style.css">
+
+        <title>Pig Game</title>
+    </head>
+
+    <body>
+        <h1>The Pig Game 🐷</h1>
+        <p class="instructions">Instructions</p>
+        <div class="modal">
+            <h2>The rules of the game</h2>
+            <p>- The game has 2 players, playing in rounds</p>
+            <p>- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score</p>
+            <p>- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn</p>
+            <p>- 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</p>
+            <p>- The first player to reach 100 points on GLOBAL score wins the game</p>
+            <button class="close"><i class="ion-ios-close"></i>Close</button>
+        </div>
+        <div class="wrapper clearfix">
+            <div class="player-0-panel active">
+                <div class="player-name" id="name-0">Player 1</div>
+                <div class="player-score" id="score-0">43</div>
+                <div class="player-current-box">
+                    <div class="player-current-label">Current</div>
+                    <div class="player-current-score" id="current-0">11</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">72</div>
+                <div class="player-current-box">
+                    <div class="player-current-label">Current</div>
+                    <div class="player-current-score" id="current-1">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>
+
+            <img src="dice-5.png" alt="Dice" class="dice">
+        </div>
+
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100755
index 0000000..4dd4bc7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,223 @@
+/**********************************************
+*** GENERAL
+**********************************************/
+
+html {
+    margin: 0;
+    padding: 0;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+.clearfix::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+body {
+    background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(farm.jpg);
+    background-size: cover;
+    background-position: center;
+    font-family: Lato;
+    font-weight: 300;
+    position: relative;
+    height: 100vh;
+    color: #555;
+    padding-top: 10px;
+}
+
+h1 {
+    text-align: center;
+    color: white;
+}
+
+h2 {
+    text-align: center;
+    color: white;
+    margin-bottom: 40px;
+}
+
+p {
+    text-align: center;
+    color: white;
+    margin-bottom: 20px;
+}
+
+p:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.modal {
+    top: 0;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1;
+    display: none;
+    padding: 20px;
+    transition: all 800ms ease-in;
+}
+
+.modal p {
+    text-decoration: none;
+    font-size: 21px;
+    cursor: default;
+    width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+
+}
+
+.modal button {
+    color: white;
+    margin-top: 50px;
+}
+
+.show {
+    display: block;
+    padding-top: 20px;
+    opacity: 1;
+}
+
+.hide {
+    display: none;
+    opacity: 0;
+}
+
+.wrapper {
+    width: 1000px;
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -65%);
+    background-color: #fff;
+    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+.player-0-panel,
+.player-1-panel {
+    width: 50%;
+    float: left;
+    height: 600px;
+    padding: 100px;
+}
+
+
+
+/**********************************************
+*** PLAYERS
+**********************************************/
+
+.player-name {
+    font-size: 40px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-weight: 100;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    position: relative;
+}
+
+.player-score {
+    text-align: center;
+    font-size: 80px;
+    font-weight: 100;
+    color: pink;
+    margin-bottom: 130px;
+}
+
+.active { background-color: #f7f7f7; }
+.active .player-name { font-weight: 300; }
+
+.active .player-name::after {
+    content: "\2022";
+    font-size: 47px;
+    position: absolute;
+    color: pink;
+    top: -7px;
+    right: 10px;
+
+}
+
+.player-current-box {
+    background-color: pink;
+    color: #fff;
+    width: 40%;
+    margin: 0 auto;
+    padding: 12px;
+    text-align: center;
+}
+
+.player-current-label {
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #222;
+}
+
+.player-current-score {
+    font-size: 30px;
+}
+
+button {
+    position: absolute;
+    width: 200px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #555;
+    background: none;
+    border: none;
+    font-family: Lato;
+    font-size: 20px;
+    text-transform: uppercase;
+    cursor: pointer;
+    font-weight: 300;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+button:hover { font-weight: 600; }
+button:hover i { margin-right: 20px; }
+
+button:focus {
+    outline: none;
+}
+
+i {
+    color: pink;
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 32px;
+    line-height: 1;
+    vertical-align: text-top;
+    margin-top: -4px;
+    transition: margin 0.3s;
+}
+
+.btn-new { top: 45px;}
+.btn-roll { top: 403px;}
+.btn-hold { top: 467px;}
+
+.dice {
+    position: absolute;
+    left: 50%;
+    top: 178px;
+    transform: translateX(-50%);
+    height: 100px;
+    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
+}
+
+.winner { background-color: #f7f7f7; }
+.winner .player-name { font-weight: 300; color: #EB4D4D; }