diff --git a/assets/images/pause-button.svg b/assets/images/pause-button.svg
index 5e740bf..8ac6ece 100644
--- a/assets/images/pause-button.svg
+++ b/assets/images/pause-button.svg
@@ -1,8 +1,8 @@
 <svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
  <g>
   <title>Layer 1</title>
-  <ellipse stroke="#7d0b0b" ry="131" rx="126" id="svg_5" fill="none" cy="135.237498" cx="131.999999" stroke-opacity="null" stroke-width="8"/>
-  <rect stroke="#7d0b0b" id="svg_1" height="123.000006" width="41" y="73.737494" x="77.5" stroke-width="0" fill="#7d0b0b"/>
-  <rect stroke="#7d0b0b" id="svg_3" height="123.000006" width="41" y="73.737494" x="144.5" stroke-width="0" fill="#7d0b0b"/>
+  <ellipse stroke="gray" ry="131" rx="126" id="svg_5" fill="none" cy="135.237498" cx="131.999999" stroke-opacity="null" stroke-width="8"/>
+  <rect stroke="#7d0b0b" id="svg_1" height="123.000006" width="41" y="73.737494" x="77.5" stroke-width="0" fill="gray"/>
+  <rect stroke="#7d0b0b" id="svg_3" height="123.000006" width="41" y="73.737494" x="144.5" stroke-width="0" fill="gray"/>
  </g>
 </svg>
diff --git a/assets/images/play-button.svg b/assets/images/play-button.svg
index e0fd135..96e17dc 100644
--- a/assets/images/play-button.svg
+++ b/assets/images/play-button.svg
@@ -1,7 +1,7 @@
 <svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
  <g>
   <title>Layer 1</title>
-  <ellipse stroke="#7d0b0b" ry="131" rx="126" id="svg_5" cy="135.237498" cx="129.999999" fill-opacity="null" stroke-opacity="null" stroke-width="8" fill="none"/>
-  <path transform="rotate(90.18392181396484 140.08586120605474,135.38354492187497) " stroke="#7d0b0b" id="svg_7" d="m86.585877,180.883554l53.499995,-91.000007l53.499995,91.000007l-106.99999,0z" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#7d0b0b"/>
+  <ellipse stroke="gray" ry="131" rx="126" id="svg_5" cy="135.237498" cx="129.999999" fill-opacity="null" stroke-opacity="null" stroke-width="8" fill="none"/>
+  <path transform="rotate(90.18392181396484 140.08586120605474,135.38354492187497) " stroke="#7d0b0b" id="svg_7" d="m86.585877,180.883554l53.499995,-91.000007l53.499995,91.000007l-106.99999,0z" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="gray"/>
  </g>
 </svg>
diff --git a/create_game.html b/create_game.html
index 33b98d7..6c25c97 100644
--- a/create_game.html
+++ b/create_game.html
@@ -21,16 +21,15 @@
                         <input id="time" type="number"/>
                     </label>
                 </form>
-                <h3>Add cards to the deck.</h3>
                 <div id="card-select-header">
-                    <button id="reset-btn">Reset Deck</button>
+                    <button id="reset-btn" class="app-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>
+                    <button class="app-btn">Back</button>
                 </a>
                 <button id="create-btn" class="app-btn">Create</button>
             </div>
diff --git a/index.html b/index.html
index 2755edb..4887894 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
         </div>
         <footer id="footer">
             <img src="assets/images/vanilla_js.png">
+            <a href="https://github.com/AlecM33/Werewolf">Github</a>
         </footer>
     </body>
 </html>
diff --git a/join_game.html b/join_game.html
index bbd6483..2552305 100644
--- a/join_game.html
+++ b/join_game.html
@@ -22,7 +22,7 @@
                 </label>
             </form>
             <a href="/">
-                <button class="app-btn-secondary">Cancel</button>
+                <button class="app-btn">Back</button>
             </a>
             <button id="join-btn" class="app-btn">Join</button>
         </div>
diff --git a/static/game.js b/static/game.js
index 8d9b748..822dbd0 100644
--- a/static/game.js
+++ b/static/game.js
@@ -4,7 +4,7 @@ const socket = io();
 let clock;
 let currentGame = null;
 let cardFlippedOver = false;
-let cardDealt = false;
+let cardRendered = false;
 
 // respond to the game state received from the server
 socket.on('state', function(game) {
@@ -56,29 +56,29 @@ function getLiveCount() {
 
 function renderGame() {
     const player = currentGame.players.find((player) => player.id === sessionStorage.getItem("id"));
-    const card = player.card;
 
-    // render the players card
+    // render the header
     document.getElementById("lobby-container").setAttribute("class", "hidden");
     document.getElementById("launch").setAttribute("class", "hidden");
     document.getElementById("game-container").setAttribute("class", "game-container");
-    document.getElementById("game-container").innerHTML =
-        "<div id='game-header'>" +
+    const gameHeader = document.createElement("div");
+    gameHeader.setAttribute("id", "game-header");
+    gameHeader.innerHTML =
             "<div id='players-remaining'>" + getLiveCount() + "/" + currentGame.size + " alive</div>" +
             "<div id='clock'></div>" +
-            "<div id='pause-container'></div>" +
-        "</div>" +
-        "<div id='game-card'>" +
-            "<div class='game-card-inner'>" +
-                "<div class='game-card-front'>" +
-                    "<h2>" + card.role + "</h2>" +
-                    "<p>" + card.description + "</p>" +
-                    "<p id='flip-instruction'>Click to flip</p>" +
-                "</div>" +
-                "<div class='game-card-back'></div>" +
-            "</div>" +
-        "</div>";
+            "<div id='pause-container'></div>";
+    if (document.getElementById("game-header")) {
+        document.getElementById("game-container").removeChild(document.getElementById("game-header"));
+    }
+    document.getElementById("game-container").prepend(gameHeader);
 
+    // render the card if it hasn't been yet
+    if (!cardRendered) {
+        renderPlayerCard(player);
+        cardRendered = true;
+    }
+
+    // build the clock
     if (currentGame.time) {
         renderClock();
         document.getElementById("pause-container").innerHTML = currentGame.paused ?
@@ -87,28 +87,43 @@ function renderGame() {
         document.getElementById("play-pause").addEventListener("click", pauseOrResumeGame)
     }
 
-    // initially flip the card over for a reveal, allow it to be flipped on click/tap
-    if (!cardDealt) {
-        flipCard();
-        cardDealt = true;
-    }
-    document.getElementById("game-card").addEventListener("click", flipCard);
-
+    // add the "I'm dead" button
     let killedBtn = document.createElement("button");
     killedBtn.setAttribute("id", "dead-btn");
 
-    // render the "I'm dead" button based on the player's state
     if (player.dead) {
-        killedBtn.setAttribute("class", "app-btn-secondary killed-btn disabled");
+        killedBtn.setAttribute("class", "app-btn killed-btn disabled");
         killedBtn.innerText = "Killed"
     } else {
-        killedBtn.setAttribute("class", "app-btn-secondary killed-btn");
+        killedBtn.setAttribute("class", "app-btn killed-btn");
         killedBtn.innerText = "I'm dead";
     }
+    if (document.getElementById("dead-btn")) {
+        document.getElementById("game-container").removeChild(document.getElementById("dead-btn"));
+    }
     document.getElementById("game-container").appendChild(killedBtn);
     document.getElementById("dead-btn").addEventListener("click", killPlayer);
 }
 
+function renderPlayerCard(player) {
+    const card = player.card;
+    const cardClass = player.card.team === "village" ? "game-card-inner village" : "game-card-inner wolf";
+    const playerCard = document.createElement("div");
+    playerCard.setAttribute("id", "game-card");
+    playerCard.setAttribute("class", getFlipState());
+    playerCard.innerHTML =
+        "<div class='" + cardClass + "'>" +
+            "<div class='game-card-front'>" +
+                "<h2>" + card.role + "</h2>" +
+                "<p>" + card.description + "</p>" +
+                "<p id='flip-instruction'>Click to flip</p>" +
+            "</div>" +
+            "<div class='game-card-back'></div>" +
+        "</div>";
+    document.getElementById("game-container").appendChild(playerCard);
+    document.getElementById("game-card").addEventListener("click", flipCard);
+}
+
 function pauseOrResumeGame() {
     if (currentGame.paused) {
         socket.emit('resumeGame', currentGame.accessCode);
@@ -117,6 +132,11 @@ function pauseOrResumeGame() {
     }
 }
 
+function getFlipState() {
+    console.log(cardFlippedOver);
+    return cardFlippedOver ? "flip-down" : "flip-up";
+}
+
 function flipCard() {
     cardFlippedOver ?
         document.getElementById("game-card").setAttribute("class", "flip-down")
diff --git a/static/styles.css b/static/styles.css
index 063817d..e6fa96b 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -9,11 +9,6 @@
         margin: 0.3em 0;
     }
 
-    .card {
-        height: 7.5em;
-        width: 4em;
-    }
-
     h3 {
         font-size: 20px;
     }
@@ -21,6 +16,14 @@
     .app-content {
         width: 92%;
     }
+
+    .card {
+        padding: 0.5em;
+        width: 5em;
+        height: 7.5em;
+        font-size: 0.9em;
+        margin: 0 0.7em 0.7em 0;
+    }
 }
 
 @media(min-width: 750.01px) {
@@ -37,6 +40,9 @@
     .card {
         height: 8.5em;
         width: 5em;
+        padding: 1em;
+        font-size: 1.1em;
+        margin: 0.5em;
     }
 
     h3 {
@@ -65,8 +71,15 @@ html, body {
 }
 
 @keyframes fadein {
-    from { opacity: 0 }
-    to { opacity: 1 }
+    from {
+        opacity: 0;
+        left: -200px;
+
+    }
+    to {
+        opacity: 1;
+        left: 0;
+    }
 }
 .app-content {
     text-align: center;
@@ -79,6 +92,21 @@ html, body {
     width: 100%;
     height: 5rem;
     text-align: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+#footer a {
+    font-size: 0.9em;
+    color: #bd2a2a;
+    text-decoration: #bd2a2a;
+    cursor: pointer;
+    margin-left: 1em;
+}
+
+#footer a:hover {
+    color: rgba(23, 20, 105, 0.4);
 }
 
 .app-header, .app-header-secondary {
@@ -95,9 +123,9 @@ button {
 }
 
 .app-btn {
-    background-color: white;
+    background-color: #f8f8f8;
     color: #bd2a2a;
-    border: 1px solid #7d0b0b;
+    border: 1px solid #d3d3d3;
     width: 10em;
     padding: 1em;
     border-radius: 3px;
@@ -111,8 +139,6 @@ button {
     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;
 }
 
@@ -150,7 +176,7 @@ button {
 
 .app-btn:hover, .app-btn:focus {
     cursor: pointer;
-    background-color: rgba(24, 9, 82, 0.15);
+    background-color: rgba(23, 20, 105, 0.15);
 }
 
 .app-btn-secondary:hover, .app-btn-secondary:focus {
@@ -178,14 +204,19 @@ button {
     color: #7d0b0b;
 }
 
+#card-select-header button {
+    margin-right: 1em;
+}
+
 #reset-btn {
-    background-color: transparent;
-    color: #7d0b0b;
-    border: 1px solid #7d0b0b;
-    width: 8em;
-    padding: 0.5em;
-    margin: 0 1em 0 0;
-    cursor: pointer;
+    /*background-color: transparent;*/
+    /*color: #7d0b0b;*/
+    /*border-radius: 5px;*/
+    /*border: 1px solid #7d0b0b;*/
+    /*width: 8em;*/
+    /*padding: 0.5em;*/
+    /*margin: 0 1em 0 0;*/
+    /*cursor: pointer;*/
 }
 
 #reset-btn:hover {
@@ -199,7 +230,7 @@ button {
 }
 
 #create-game-container, #lobby-container, #join-game-container, #game-container, #launch, #message-box {
-    animation: fadein 0.8s;
+    animation: fadein 0.8s ease-in;
 }
 
 a {
@@ -209,28 +240,30 @@ a {
 
 input[type=text] {
     background-color: transparent;
-    border: 2px solid #7d0b0b;
+    border: 1px solid #171469;
     caret-color: gray;
     margin: 0.5em 0 1em 0;
     color: gray;
-    padding: 0.5rem;
-    width: 8em;
+    padding: 0.7em;
+    width: 9em;
+    border-radius: 5px;
     font-size: 1.1em;
 }
 
 input[type=number] {
     background-color: transparent;
-    border: 2px solid #7d0b0b;
+    border: 1px solid #171469;
+    border-radius: 5px;
     caret-color: gray;
     margin: 0.5em 0 1em 0;
     color: gray;
-    padding: 0.5rem;
-    width: 3em;
+    padding: 0.7em;
+    width: 4em;
     font-size: 1.1em;
 }
 
 input[type=text]:hover {
-    background-color: rgba(24, 9, 82, 0.15);;
+    background-color: rgba(23, 20, 105, 0.15);
 }
 
 label {
@@ -261,7 +294,7 @@ label {
     color: #7d0b0b;
     border-radius: 3px;
     font-size: 1.2em;
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(23, 20, 105, 0.1);
     padding: 0.5em;
     margin: 0.5em 0;
     text-align: left;
@@ -324,21 +357,37 @@ label {
 
 
 #game-card {
-    border: 1px solid #7d0b0b;
     background-color: #f0f0f0;
     display: flex;
     flex-direction: column;
+    cursor: pointer;
     justify-content: space-between;
     max-width: 17em;
     border-radius: 3px;
     height: 23em;
     margin: 0 auto 2em auto;
     width: 72%;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 13px 17px rgba(0,0,0,0.6);
     perspective: 1000px;
     transform-style: preserve-3d;
 }
 
+.village {
+    border: 2px solid rgba(23, 20, 105, 0.5);
+}
+
+.village h2 {
+    color: #171469;
+}
+
+.wolf {
+    border: 2px solid rgba(125, 11, 11, 0.5);
+}
+
+.wolf h2 {
+    color: #7d0b0b;
+}
+
 .flip-up {
     animation: flip-up 0.7s;
     animation-fill-mode: forwards;
@@ -352,7 +401,6 @@ label {
 
 #game-card h2 {
     font-size: 2em;
-    color: #7d0b0b;
     font-family: 'diavlo', sans-serif;
 }
 
@@ -372,7 +420,6 @@ label {
     margin: auto auto;
     border-radius: 3px;
     text-align: center;
-    border: 1px solid gray;
 }
 
 .game-card:hover {
@@ -425,6 +472,11 @@ label {
 #play-pause {
     width: 2.5em;
     height: 2.5em;
+    cursor: pointer;
+}
+
+#play-pause:hover {
+    opacity: 0.5;
 }
 
 #play-pause:hover {