diff --git a/create_game.html b/create_game.html
index e0aa669..805af0e 100644
--- a/create_game.html
+++ b/create_game.html
@@ -17,13 +17,17 @@
                     </label>
                 </form>
                 <h3>Add cards to the deck.</h3>
+                <div id="card-select-header">
+                    <button id="reset-btn">Reset Deck</button>
+                    <h3 id="game-size">0 Players</h3>
+                </div>
                 <div id="card-select">
 
                 </div>
                 <a href="/">
                     <button class="app-btn-secondary">Cancel</button>
                 </a>
-                <button class="app-btn" onclick="generateAccessCode()">Create</button>
+                <button id="create-btn" class="app-btn">Create</button>
             </div>
         </div>
         <script type="module" src="/static/setup.js"></script>
diff --git a/static/cards.js b/static/cards.js
index a19f03b..3d59298 100644
--- a/static/cards.js
+++ b/static/cards.js
@@ -1,29 +1,32 @@
-export const cards = {
-  "cards": {
-    "1": {
-      "role": "Villager",
-      "team": "village",
-      "description": "During the day, find the wolves and kill them."
+export const cards = [
+    {
+      role: "Villager",
+      team: "village",
+      description: "During the day, find the wolves and kill them.",
+      powerRole: false
     },
-    "2": {
-      "role": "Seer",
-      "team": "village",
-      "description": "During the night, choose one person. The moderator will tell you whether that player is evil."
+   {
+      role: "Seer",
+      team: "village",
+      description: "During the night, choose one person. The moderator will tell you whether that player is evil.",
+      powerRole: true
     },
-    "3": {
-      "role": "Hunter",
-      "team": "village",
-      "description": "If you are alive with a wolf at the end of the game, the village wins."
+    {
+      role: "Hunter",
+      team: "village",
+      description: "If you are alive with a wolf at the end of the game, the village wins.",
+      powerRole: true
     },
-    "4": {
-      "role": "Werewolf",
-      "team": "wolf",
-      "description": "During the night, choose a villager to kill. Don't get killed."
+    {
+      role: "Werewolf",
+      team: "wolf",
+      description: "During the night, choose a villager to kill. Don't get killed.",
+      powerRole: false
     },
-    "5": {
-      "role": "Minion",
-      "team": "wolf",
-      "description": "You are villager, but you know who the wolves are - and want them to win."
+    {
+      role: "Minion",
+      team: "wolf",
+      description: "You are villager, but you know who the wolves are - and want them to win.",
+      powerRole: true
     }
-  }
-};
+];
diff --git a/static/setup.js b/static/setup.js
index 0123ade..767e9cc 100644
--- a/static/setup.js
+++ b/static/setup.js
@@ -1,17 +1,63 @@
 import {cards} from './cards.js'
 
+// important declarations
 class Card {
-    constructor(name, team, description) {
-        this.name = name;
+    constructor(role, team, description, powerRole) {
+        this.role = role;
         this.team = team;
         this.description = description;
+        this.quantity = 0;
+        this.powerRole = powerRole;
     }
 }
 
-console.log(cards);
+var deck = [];
 
-document.getElementById("card-select").onload = function() {
-    let jsonCards = JSON.parse('')
+
+// register event listeners on buttons
+document.getElementById("reset-btn").addEventListener("click", resetCardQuantities);
+document.getElementById("create-btn").addEventListener("click", generateAccessCode);
+
+// render all of the available cards to the user
+window.onload = function() {
+    for (const card of cards) {
+        const newCard = new Card(card.role, card.team, card.description, card.powerRole);
+        const cardContainer = document.createElement("div");
+
+        deck.push(newCard);
+
+        cardContainer.setAttribute("class", "card");
+        cardContainer.innerHTML = "<p class='card-role'>" + newCard.role + "</p><br><p class='card-quantity'>" + newCard.quantity + "</p>";
+
+        cardContainer.addEventListener("click", function() {
+            if(!newCard.powerRole || (newCard.powerRole && newCard.quantity === 0)) {
+                newCard.quantity += 1;
+            }
+            console.log(newCard);
+            cardContainer.getElementsByClassName("card-quantity")[0].innerHTML = newCard.quantity;
+            updateGameSize();
+        });
+
+        document.getElementById("card-select").appendChild(cardContainer)
+    }
+};
+
+function updateGameSize() {
+    let totalQuantity = 0;
+    for (let card of deck) {
+        totalQuantity += card.quantity;
+    }
+    document.getElementById("game-size").innerText = totalQuantity + " Players";
+}
+
+function resetCardQuantities() {
+    for (let card of deck) {
+        card.quantity = 0;
+    }
+    updateGameSize();
+    Array.prototype.filter.call(document.getElementsByClassName("card-quantity"), function(quantities){
+        return quantities.innerHTML = 0;
+    });
 }
 
 function generateAccessCode() {
diff --git a/static/styles.css b/static/styles.css
index 6171b76..f866b31 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -47,6 +47,43 @@ h3 {
     margin-bottom: 1em;
 }
 
+.card {
+    text-align: center;
+    height: 8em;
+    cursor: pointer;
+    width: 4.5em;
+    color: gray;
+    border: 1px solid #7d0b0b;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+    padding: 1em;
+    margin: 0.5em;
+    user-select: none;
+}
+
+.card:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.card-quantity {
+    font-weight: bold;
+    color: #7d0b0b;
+    font-size: 2.5em;
+    margin: 0;
+}
+
+.card-role {
+    color: gray;
+    font-size: 1.1em;
+    margin: 0;
+}
+
+#card-select {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 3em;
+}
+
 .app-btn-secondary {
     background-color: transparent;
     color: #7d0b0b;
@@ -73,6 +110,27 @@ h3 {
     justify-content: center;
 }
 
+#card-select-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+#card-select-header h3 {
+    margin: 0;
+    font-size: 1.2em;
+    color: #7d0b0b;
+}
+
+#reset-btn {
+    background-color: transparent;
+    color: #7d0b0b;
+    border: 1px solid #7d0b0b;
+    width: 8em;
+    padding: 0.5em;
+    margin: 0 1em 0 0;
+}
+
 #create-game-container {
     display: inline-block;
     text-align: left;