diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js
index 251f67d..ec21ed4 100644
--- a/client/src/modules/game_creation/DeckStateManager.js
+++ b/client/src/modules/game_creation/DeckStateManager.js
@@ -254,6 +254,9 @@ export class DeckStateManager {
 }
 
 function populateRoleElementInfo (roleEl, sortedDeck, i) {
+    roleEl.classList.remove(ALIGNMENT.GOOD);
+    roleEl.classList.remove(ALIGNMENT.EVIL);
+    roleEl.classList.add(sortedDeck[i].team);
     roleEl.querySelector('.role-name').innerHTML =
         `<span class="role-quantity"></span>
          <span class="name"></span>`;
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index 7466ee8..1fdac25 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -359,7 +359,7 @@ input {
     align-items: center;
     padding: 8px 0;
     width: 100%;
-    background-color: #16141e;
+    background-color: #0f0f10;
     height: 45px;
     z-index: 53000;
 }
@@ -511,7 +511,7 @@ input {
         padding-bottom: 2em;
         width: 100%;
         z-index: 51000;
-        background-color: #16141e;
+        background-color: #1e1e1e;
     }
 }
 
@@ -557,7 +557,7 @@ input {
     overflow: hidden;
     height: 20px;
     border-radius: 5px;
-    opacity: 0.15;
+    opacity: 0.20;
     margin: 0.5em 0;
 }
 
@@ -815,7 +815,7 @@ input {
     display:inline-flex !important;
     align-items: center !important;
     color:#ffffff !important;
-    background-color:#3b3a4a !important;
+    background-color:#4b4b4b !important;
     border-radius: 5px !important;
     border: 1px solid transparent !important;
     padding: 7px 15px 7px 10px !important;
diff --git a/client/src/styles/confirmation.css b/client/src/styles/confirmation.css
index c75bde2..32df219 100644
--- a/client/src/styles/confirmation.css
+++ b/client/src/styles/confirmation.css
@@ -7,7 +7,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #16141e;
+    background-color: #1e1e1e;
     align-items: center;
     justify-content: center;
     max-width: 25em;
@@ -23,7 +23,7 @@
     width: 100%;
     height: calc(100% + 100px);
     background-color: rgba(0, 0, 0, 0.80);
-    z-index: 100000;
+    z-index: 100001;
     cursor: pointer;
 }
 
diff --git a/client/src/styles/create.css b/client/src/styles/create.css
index 53dc8ae..7e91d1b 100644
--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -156,10 +156,10 @@
 #custom-roles-container, #deck-status-container {
     color: #d7d7d7;
     margin: 1em 0.5em;
-    background-color: #16141e;
+    background-color: #1e1e1e;
     padding: 10px;
     border-radius: 5px;
-    border: 2px solid #3b3a4a;
+    border: 1px solid #4b4b4b;
     position: relative;
 }
 
@@ -173,7 +173,7 @@
 
 #deck-count {
     font-size: 30px;
-    background-color: #3b3a4a;
+    background-color: #4b4b4b;
     width: fit-content;
     padding: 0 5px;
     border-radius: 5px;
@@ -230,9 +230,9 @@
 }
 
 #custom-role-actions {
-    background-color: #16141e;
+    background-color: #1e1e1e;
     border-radius: 5px;
-    border: 2px solid #3b3a4a;
+    border: 2px solid #4b4b4b;
     display: none;
     color: #e7e7e7;
     position: absolute;
@@ -244,7 +244,7 @@
 }
 
 #custom-role-actions div:nth-child(1) {
-    border-bottom: 2px solid #3b3a4a;
+    border-bottom: 2px solid #4b4b4b;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 }
@@ -258,7 +258,7 @@
     display: flex;
     width: 100%;
     padding: 10px 0;
-    background-color: #16141e;
+    background-color: #1e1e1e;
     border-radius: 5px;
     text-align: center;
     justify-content: center;
@@ -389,8 +389,8 @@ select {
     display: flex;
     flex-wrap: wrap;
     border-radius: 5px;
-    background-color: #16141e;
-    border: 2px solid #3b3a4a;
+    background-color: #1e1e1e;
+    border: 1px solid #4b4b4b;
 }
 
 .step {
@@ -602,8 +602,8 @@ input[type="number"] {
     -ms-user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
-    background-color: #16141e;
-    border: 2px solid #3b3a4a;
+    background-color: #1e1e1e;
+    border: 1px solid #4b4b4b;
 }
 
 #step-forward-button:hover, #step-back-button:hover {
@@ -627,19 +627,19 @@ input[type="number"] {
 }
 
 #step-1 div {
-    background-color: #16141e;
+    background-color: #1e1e1e;
     color: #e7e7e7;
     padding: 1em;
     max-width: 20em;
     margin: 0.5em;
     cursor: pointer;
-    border: 2px solid #3b3a4a;
+    border: 1px solid #4b4b4b;
     border-radius: 5px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
 }
 
 #step-1 div.option-selected {
-    border: 2px solid #e7e7e7;
+    border: 1px solid #e7e7e7;
     background-color: #3a3c46;
 }
 
@@ -648,12 +648,12 @@ input[type="number"] {
 }
 
 #step-1 div:hover {
-    border: 2px solid #e7e7e7;
+    border: 1px solid #e7e7e7;
 }
 
 .review-option {
     background-color: #191920;
-    border: 2px solid #3b3a4a;
+    border: 1px solid #4b4b4b;
     color: #e7e7e7;
     padding: 10px;
     font-size: 18px;
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index fcfe87f..92ebfe3 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -44,7 +44,7 @@
 #current-moderator {
     border-radius: 5px;
     color: #d7d7d7;
-    background-color: #16141e;
+    background-color: #1e1e1e;
     padding: 0 10px;
     width: 90%;
     margin-bottom: 0.5em;
@@ -120,7 +120,7 @@
     max-width: 16em;
     border-radius: 5px;
     justify-content: center;
-    background-color: #16141e;
+    background-color: #1e1e1e;
 }
 
 #timer-edit-prompt {
@@ -177,8 +177,8 @@
     flex-wrap: wrap;
     border-radius: 5px;
     margin: 1em;
-    background-color: #16141e;
-    border: 2px solid #3b3a4a;
+    background-color: #1e1e1e;
+    border: 2px solid #4b4b4b;
 }
 
 #timer-parameters {
@@ -265,7 +265,7 @@ h1 {
 }
 
 #end-of-game-header h2 {
-    border: 1px solid #3b3a4a;
+    border: 1px solid #4b4b4b;
     border-radius: 5px;
     background-color: #1a1726;
     padding: 7px;
@@ -300,7 +300,7 @@ h1 {
     padding: 7px;
     border-radius: 5px;
     background-color: #121314;
-    border: 2px solid #3b3a4a;
+    border: 2px solid #4b4b4b;
     color: #e7e7e7;
     align-items: center;
     display: flex;
@@ -467,7 +467,7 @@ h1 {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #16141e;
+    background-color: #1e1e1e;
     border: 4px solid #61606a;
     position: relative;
     flex-direction: column;
@@ -674,7 +674,7 @@ label[for='moderator'] {
     height: 100px;
     margin: 0 auto;
     max-width: 100%;
-    background-color: #1b1a24;
+    background-color: #1e1e1e;
 }
 
 #game-control-prompt button, #start-game-prompt button, #leave-game-prompt button {
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index c06a4d5..7d7a6f7 100644
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -11,13 +11,18 @@ button#home-create-button {
     padding: 20px;
 }
 
-#framed-phone-screenshot, #framed-phone-screenshot-2 {
+#framed-phone-screenshot, #framed-phone-screenshot-2, .framed-phone-screenshot-container {
     max-width: 250px;
     width: 40vw;
     min-width: 175px;
-    margin: 0;
-    border: 1px solid #464552;
     border-radius: 21px;
+    aspect-ratio: 1522 / 3290;
+
+}
+
+.framed-phone-screenshot-container {
+    margin: 0 0 20px 0;
+    border: 1px solid #464552;
 }
 
 #about-container {
@@ -49,10 +54,6 @@ button#home-create-button {
     margin: 0 15px;
 }
 
-#about-container img {
-    margin-bottom: 20px;
-}
-
 #homepage-logos {
     display: flex;
     align-items: center;
@@ -64,7 +65,7 @@ button#home-create-button {
     justify-content: center;
     align-items: center;
     width: 100%;
-    background-color: #16141e;
+    background-color: #0f0f10;
 }
 
 form {
@@ -105,11 +106,12 @@ h3 {
     font-family: 'signika-negative', sans-serif;
 }
 
-img[src='../images/new-logo.png'] {
+img[src='../images/new-logo.png'], #new-logo-container {
     max-width: 250px;
     width: 25vw;
     min-width: 180px;
     margin: 1em 0 1em 0;
+    aspect-ratio: 500 / 641;
 }
 
 form > div {
@@ -143,7 +145,7 @@ form > div {
 }
 
 #room-code {
-    background-color: #16141e;
+    background-color: #1e1e1e;
 }
 
 label[for="room-code"], label[for="player-name"] {
diff --git a/client/src/styles/join.css b/client/src/styles/join.css
index 87c3783..a46d848 100644
--- a/client/src/styles/join.css
+++ b/client/src/styles/join.css
@@ -3,7 +3,7 @@
     transform-origin: center;
     display: block;
     z-index: 1 !important;
-    background-color: #16141e;
+    background-color: #1e1e1e;
 }
 
 #join-game-form .modal-button-container {
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index 33cd6ed..e97f2da 100644
--- a/client/src/styles/modal.css
+++ b/client/src/styles/modal.css
@@ -7,7 +7,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #16141e;
+    background-color: #1e1e1e;
     align-items: center;
     justify-content: center;
     max-width: 25em;
diff --git a/client/src/views/home.html b/client/src/views/home.html
index 7f8d5ab..d19469a 100644
--- a/client/src/views/home.html
+++ b/client/src/views/home.html
@@ -25,7 +25,9 @@
     <div id="mobile-menu-background-overlay"></div>
     <div id="navbar"></div>
     <div id="home-page-top-section">
-        <img alt="Werewolf App Logo" src="../images/new-logo.png"/>
+        <div id="new-logo-container">
+            <img alt="Werewolf App Logo" src="../images/new-logo.png"/>
+        </div>
         <h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
         <div id="create-join">
             <a href="/create">
@@ -45,11 +47,15 @@
     </div>
     <div id="about-container">
         <div>
-            <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.webp"/>
+            <div class="framed-phone-screenshot-container">
+                <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.webp"/>
+            </div>
             <h2>Join a game and have a role dealt to your device.</h2>
         </div>
         <div>
-            <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.webp"/>
+            <div class="framed-phone-screenshot-container">
+                <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.webp"/>
+            </div>
             <h2>Create your own game with default or custom roles.</h2>
         </div>
     </div>