diff --git a/assets/images/roles-small/Hunter.png b/assets/images/roles-small/Hunter.png
index 6e046fe..c7076e2 100644
Binary files a/assets/images/roles-small/Hunter.png and b/assets/images/roles-small/Hunter.png differ
diff --git a/assets/images/roles-small/Mason.png b/assets/images/roles-small/Mason.png
index 69e4e87..7182d35 100644
Binary files a/assets/images/roles-small/Mason.png and b/assets/images/roles-small/Mason.png differ
diff --git a/assets/images/roles-small/Minion.png b/assets/images/roles-small/Minion.png
index 8201cf0..ead2d61 100644
Binary files a/assets/images/roles-small/Minion.png and b/assets/images/roles-small/Minion.png differ
diff --git a/assets/images/roles-small/Seer.png b/assets/images/roles-small/Seer.png
index e2316f8..3e3373b 100644
Binary files a/assets/images/roles-small/Seer.png and b/assets/images/roles-small/Seer.png differ
diff --git a/assets/images/roles-small/Shadow.png b/assets/images/roles-small/Shadow.png
index c985993..a591ff0 100644
Binary files a/assets/images/roles-small/Shadow.png and b/assets/images/roles-small/Shadow.png differ
diff --git a/assets/images/roles-small/Sorcerer.png b/assets/images/roles-small/Sorcerer.png
index 3d06ebd..2c9f2e7 100644
Binary files a/assets/images/roles-small/Sorcerer.png and b/assets/images/roles-small/Sorcerer.png differ
diff --git a/assets/images/roles-small/Villager.png b/assets/images/roles-small/Villager.png
index 1eb7e90..2816360 100644
Binary files a/assets/images/roles-small/Villager.png and b/assets/images/roles-small/Villager.png differ
diff --git a/assets/images/roles-small/Werewolf.png b/assets/images/roles-small/Werewolf.png
index 4bad3e5..d81ac12 100644
Binary files a/assets/images/roles-small/Werewolf.png and b/assets/images/roles-small/Werewolf.png differ
diff --git a/static/setup.js b/static/setup.js
index a128ead..4db9ac3 100644
--- a/static/setup.js
+++ b/static/setup.js
@@ -51,9 +51,13 @@ window.onload = function() {
             "<img alt='No art' src='/assets/images/roles-small/" + cards[i].role + ".png' />"
             : "<span>Art soon.</span>";
         modalRole.innerHTML =
-            "<h2 class='" + roleClass + "'>" + cards[i].role + "</h2>" +
-            roleImage +
-            "<p>" + cards[i].team + "</p>" +
+            "<div>" +
+                roleImage +
+                "<div>" +
+                    "<h2 class='" + roleClass + "'>" + cards[i].role + "</h2>" +
+                    "<p>" + cards[i].team + "</p>" +
+                "</div>" +
+            "</div>" +
             "<p>" + cards[i].description + "</p>";
 
         document.getElementById("roles").appendChild(modalRole);
@@ -126,10 +130,12 @@ function resetCardQuantities() {
 
 function displayRoleModal() {
     document.getElementById("role-modal").classList.remove("hidden");
+    document.getElementById("app-content").classList.add("hidden");
 }
 
 function closeModal() {
     document.getElementById("role-modal").classList.add("hidden");
+    document.getElementById("app-content").classList.remove("hidden");
 }
 
 function buildDeckFromQuantities() {
diff --git a/static/styles.css b/static/styles.css
index fa0d893..6de2bd0 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -13,7 +13,7 @@
         font-size: 20px;
     }
 
-    .app-content {
+    #app-content {
         width: 92%;
     }
 
@@ -76,7 +76,7 @@
         font-size: 30px;
     }
 
-    .app-content {
+    #app-content {
         width: 80%;
     }
 
@@ -161,7 +161,7 @@ html, body {
     }
 }
 
-.app-content {
+#app-content {
     text-align: center;
     margin: 0 auto;
 }
@@ -853,21 +853,29 @@ label {
 .modal-role {
     width: 22em;
     position: relative;
+    border-bottom: 1px solid lightgray;
+    padding-bottom: 0.5em;
+}
+
+.modal-role div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-role div div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .modal-role p:first-of-type {
-    margin-top: 0;
+    margin: 0;
     color: gray;
 }
 
 .modal-role h2 {
-    margin-bottom: 0;
-}
-
-.modal-role img {
-    position: absolute;
-    top: -10px;
-    left: 110px;
+    margin: 0;
 }
 
 .modal {
diff --git a/views/create_game.html b/views/create_game.html
index aed5ad8..9e8d22b 100644
--- a/views/create_game.html
+++ b/views/create_game.html
@@ -19,7 +19,7 @@
             </div>
         </div>
     </div>
-        <div class="app-content">
+        <div id="app-content">
             <div id="create-game-container">
                 <h2 class="app-header-secondary">Create A Game</h2>
                 <label>
diff --git a/views/game.html b/views/game.html
index 2fa1dbe..0fe352f 100644
--- a/views/game.html
+++ b/views/game.html
@@ -8,7 +8,7 @@
     <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
 </head>
 <body>
-<div class="app-content">
+<div id="app-content">
     <div id="message-box"></div>
     <div id="lobby-container"></div>
     <div id="game-container"></div>
diff --git a/views/index.html b/views/index.html
index 561e6a5..0addceb 100644
--- a/views/index.html
+++ b/views/index.html
@@ -7,7 +7,7 @@
         <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
     </head>
     <body>
-        <div class="app-content">
+        <div id="app-content">
             <a href="/">
                 <div class="app-title">
                     <img src="../assets/images/Wolf_Logo.gif" alt="Where Are the Wolves?" />
diff --git a/views/join_game.html b/views/join_game.html
index 4a4ffe2..d8ee8ad 100644
--- a/views/join_game.html
+++ b/views/join_game.html
@@ -8,7 +8,7 @@
     <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
 </head>
 <body>
-    <div class="app-content">
+    <div id="app-content">
         <div id="join-game-container">
             <h2 class="app-header-secondary">Join a Game</h2>
             <form>