diff --git a/WebHostLib/static/styles/generate.css b/WebHostLib/static/styles/generate.css
index bb22cc64..d7406682 100644
--- a/WebHostLib/static/styles/generate.css
+++ b/WebHostLib/static/styles/generate.css
@@ -15,6 +15,10 @@
     text-align: left;
 }
 
+#generate-game button{
+    margin-top: 5px;
+}
+
 #generate-game-form-wrapper{
     width: 100%;
     text-align: center;
diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css
index d7e8d4c0..b7536b14 100644
--- a/WebHostLib/static/styles/globalStyles.css
+++ b/WebHostLib/static/styles/globalStyles.css
@@ -21,8 +21,25 @@ a{
 }
 
 button{
-    padding: 8px 12px;
+    font-family: Jost, sans-serif;
+    font-weight: 500;
+    font-size: 0.9rem;
+    padding: 10px 17px 11px 16px;
     border-radius: 4px;
+    border-top: 1px solid rgba(0, 0, 0, 0.5);
+    border-left: 1px solid rgba(0, 0, 0, 0.5);
+    border-right: 2px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
+    font-kerning: auto;
+    cursor: pointer;
+}
+
+button:active{
+    border-right: 1px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+    padding-right: 16px;
+    padding-bottom: 10px;
+    margin-bottom: 2px;
 }
 
 button.button-grass{
diff --git a/WebHostLib/static/styles/hostGame.css b/WebHostLib/static/styles/hostGame.css
index 5fd401c4..751dc7c8 100644
--- a/WebHostLib/static/styles/hostGame.css
+++ b/WebHostLib/static/styles/hostGame.css
@@ -7,7 +7,7 @@
 
 #host-game{
     width: 700px;
-    min-height: 360px;
+    min-height: 240px;
     text-align: center;
 }
 
@@ -24,3 +24,7 @@
 #host-game-form{
     display: none;
 }
+
+#host-game button{
+    margin-top: 5px;
+}
diff --git a/WebHostLib/static/styles/player-settings.css b/WebHostLib/static/styles/player-settings.css
index 18ed6e37..350a3865 100644
--- a/WebHostLib/static/styles/player-settings.css
+++ b/WebHostLib/static/styles/player-settings.css
@@ -1,7 +1,7 @@
 html{
-    background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
+    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
     background-repeat: repeat;
-    background-size: 900px 900px;
+    background-size: 650px 650px;
 }
 
 #player-settings{
@@ -11,7 +11,7 @@ html{
     background-color: rgba(0, 0, 0, 0.15);
     border-radius: 8px;
     padding: 1rem;
-    color: #ffe993;
+    color: #eeffeb;
 }
 
 #player-settings code{
@@ -22,6 +22,32 @@ html{
     color: #000000;
 }
 
+#player-settings h1{
+    font-size: 2.5rem;
+    font-weight: normal;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    color: #ffffff;
+    text-shadow: 1px 1px 4px #000000;
+}
+
+#player-settings h2{
+    font-size: 2rem;
+    font-weight: normal;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    color: #ffe993;
+    text-transform: lowercase;
+    text-shadow: 1px 1px 2px #000000;
+}
+
+#player-settings h3, #player-settings h4, #player-settings h5, #player-settings h6{
+    color: #ffffff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
 #player-settings .instructions{
     text-align: left;
 }
@@ -34,7 +60,8 @@ html{
 }
 
 #player-settings #settings-wrapper .setting-wrapper .title-span{
-    font-weight: bold;
+    font-weight: 600;
+    font-size: 1.25rem;
 }
 
 #player-settings #settings-wrapper{
@@ -75,7 +102,7 @@ html{
 
 #player-settings table.option-set td.option-name{
     width: 150px;
-    font-weight: bold;
+    font-weight: 400;
     font-size: 1rem;
     line-height: 2rem;
 }
@@ -102,5 +129,19 @@ html{
 }
 
 #player-settings a{
-    color: #ffffff;
+    color: #ffef00;
+}
+
+#player-settings input:not([type]){
+    border: 1px solid #000000;
+    padding: 3px;
+    border-radius: 3px;
+    min-width: 150px;
+}
+
+#player-settings select{
+    border: 1px solid #000000;
+    padding: 3px;
+    border-radius: 3px;
+    min-width: 150px;
 }
diff --git a/WebHostLib/static/styles/tutorial.css b/WebHostLib/static/styles/tutorial.css
index 40146303..5499f92e 100644
--- a/WebHostLib/static/styles/tutorial.css
+++ b/WebHostLib/static/styles/tutorial.css
@@ -1,7 +1,7 @@
 html{
-    background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
+    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
     background-repeat: repeat;
-    background-size: 900px 900px;
+    background-size: 650px 650px;
 }
 
 #tutorial-wrapper{
@@ -11,33 +11,38 @@ html{
     background-color: rgba(0, 0, 0, 0.15);
     border-radius: 8px;
     padding: 1rem;
-    color: #ffe993;
+    color: #eeffeb;
 }
 
 #tutorial-wrapper a{
-    color: #ffffff;
+    color: #ffef00;
 }
 
 #tutorial-wrapper h1{
     font-size: 2.5rem;
     font-weight: normal;
-    border-bottom: 1px solid #9f916a;
+    border-bottom: 1px solid #ffffff;
     cursor: pointer;
     width: 100%;
     margin-bottom: 0.5rem;
+    color: #ffffff;
+    text-shadow: 1px 1px 4px #000000;
 }
 
 #tutorial-wrapper h2{
     font-size: 2rem;
     font-weight: normal;
-    border-bottom: 1px solid #9f916a;
+    border-bottom: 1px solid #ffffff;
     cursor: pointer;
     width: 100%;
     margin-bottom: 0.5rem;
+    color: #ffe993;
+    text-transform: lowercase;
+    text-shadow: 1px 1px 2px #000000;
 }
 
 #tutorial-wrapper h3{
-    font-size: 1.75rem;
+    font-size: 1.70rem;
     font-weight: normal;
     text-align: left;
     cursor: pointer;
@@ -65,6 +70,11 @@ html{
     color: #434343;
 }
 
+#tutorial-wrapper h3, #tutorial-wrapper h4, #tutorial-wrapper h5,#tutorial-wrapper h6{
+    color: #ffffff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
 #tutorial-wrapper ul{
 
 }
@@ -77,20 +87,16 @@ html{
 
 }
 
-#tutorial-wrapper a{
-
-}
-
 #tutorial-wrapper pre{
     padding: 0.5rem 0.25rem;
-    background-color: #d9cd8e;
+    background-color: #ffeeab;
     border: 1px solid #9f916a;
     border-radius: 6px;
     color: #000000;
 }
 
 #tutorial-wrapper code{
-    background-color: #d9cd8e;
+    background-color: #ffeeab;
     border-radius: 4px;
     padding-left: 0.25rem;
     padding-right: 0.25rem;
diff --git a/WebHostLib/templates/hostGame.html b/WebHostLib/templates/hostGame.html
index 5566e125..d05d0cb4 100644
--- a/WebHostLib/templates/hostGame.html
+++ b/WebHostLib/templates/hostGame.html
@@ -13,8 +13,10 @@
     <div id="host-game-wrapper">
         <div id="host-game" class="grass-island {% if rooms %}wider{% endif %}">
             <h1>Host Game</h1>
-            <p>To host a game, you need to upload a .multidata file or a .zip file created by the
-                multiworld generator.</p>
+            <p>
+                To host a game, you need to upload a .multidata file or a .zip file<br />
+                created by the multiworld generator.
+            </p>
             <div id="host-game-form-wrapper">
                 <form id="host-game-form" method="post" enctype="multipart/form-data">
                     <input id="file-input" type="file" name="file">
diff --git a/WebHostLib/templates/pageWrapper.html b/WebHostLib/templates/pageWrapper.html
index 103ef069..67f9f98c 100644
--- a/WebHostLib/templates/pageWrapper.html
+++ b/WebHostLib/templates/pageWrapper.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/tooltip.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cookieNotice.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/globalStyles.css") }}" />