diff --git a/WebHostLib/static/assets/player-settings.js b/WebHostLib/static/assets/player-settings.js
index 4886b550..c8292390 100644
--- a/WebHostLib/static/assets/player-settings.js
+++ b/WebHostLib/static/assets/player-settings.js
@@ -27,6 +27,7 @@ window.addEventListener('load', () => {
 
     document.getElementById('export-button').addEventListener('click', exportSettings);
     document.getElementById('reset-to-default').addEventListener('click', resetToDefaults);
+    adjustHeaderWidth();
   }).catch((error) => {
     gameSettings.innerHTML = `
             <h2>Something went wrong while loading your game settings page.</h2>
diff --git a/WebHostLib/static/assets/styleController.js b/WebHostLib/static/assets/styleController.js
index ef00bda0..3460ccfb 100644
--- a/WebHostLib/static/assets/styleController.js
+++ b/WebHostLib/static/assets/styleController.js
@@ -19,7 +19,29 @@ const adjustFooterHeight = () => {
   footer.style.marginTop = `${margin}px`;
 };
 
+const adjustHeaderWidth = () => {
+  // If there is no header, do nothing
+  const header = document.getElementById('base-header');
+  if (!header) { return; }
+
+  const tempDiv = document.createElement('div');
+  tempDiv.style.width = '100px';
+  tempDiv.style.height = '100px';
+  tempDiv.style.overflow = 'scroll';
+  tempDiv.style.position = 'absolute';
+  tempDiv.style.top = '-500px';
+  document.body.appendChild(tempDiv);
+  const scrollbarWidth = tempDiv.offsetWidth - tempDiv.clientWidth;
+  document.body.removeChild(tempDiv);
+
+  const documentRoot = document.compatMode === 'BackCompat' ? document.body : document.documentElement;
+  const margin = (documentRoot.scrollHeight > documentRoot.clientHeight) ? 0-scrollbarWidth : 0;
+  document.getElementById('base-header-right').style.marginRight = `${margin}px`;
+};
+
 window.addEventListener('load', () => {
   adjustFooterHeight();
+  adjustHeaderWidth();
   window.addEventListener('resize', adjustFooterHeight);
+  window.addEventListener('resize', adjustHeaderWidth);
 });
diff --git a/WebHostLib/static/assets/tutorial.js b/WebHostLib/static/assets/tutorial.js
index b05f16e3..8989f3ad 100644
--- a/WebHostLib/static/assets/tutorial.js
+++ b/WebHostLib/static/assets/tutorial.js
@@ -44,6 +44,7 @@ window.addEventListener('load', () => {
 
         // Populate page with HTML generated from markdown
         tutorialWrapper.innerHTML += (new showdown.Converter()).makeHtml(results);
+        adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
         const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
diff --git a/WebHostLib/static/static/backgrounds/header/dirt-header.png b/WebHostLib/static/static/backgrounds/header/dirt-header.png
new file mode 100644
index 00000000..7c9e298e
Binary files /dev/null and b/WebHostLib/static/static/backgrounds/header/dirt-header.png differ
diff --git a/WebHostLib/static/static/backgrounds/header/grass-header.png b/WebHostLib/static/static/backgrounds/header/grass-header.png
new file mode 100644
index 00000000..c2acc588
Binary files /dev/null and b/WebHostLib/static/static/backgrounds/header/grass-header.png differ
diff --git a/WebHostLib/static/static/backgrounds/header/cloud-header.png b/WebHostLib/static/static/backgrounds/header/ocean-header.png
similarity index 100%
rename from WebHostLib/static/static/backgrounds/header/cloud-header.png
rename to WebHostLib/static/static/backgrounds/header/ocean-header.png
diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css
index b7536b14..e077cc52 100644
--- a/WebHostLib/static/styles/globalStyles.css
+++ b/WebHostLib/static/styles/globalStyles.css
@@ -101,3 +101,16 @@ h5, h6{
     padding-bottom: 120px;
 }
 
+.user-message{
+    width: 50%;
+    min-width: 500px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    color: #000000;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    background-color: #ffff00;
+}
diff --git a/WebHostLib/static/styles/cloudHeader.css b/WebHostLib/static/styles/header/baseHeader.css
similarity index 63%
rename from WebHostLib/static/styles/cloudHeader.css
rename to WebHostLib/static/styles/header/baseHeader.css
index 8cc03a83..1d501917 100644
--- a/WebHostLib/static/styles/cloudHeader.css
+++ b/WebHostLib/static/styles/header/baseHeader.css
@@ -2,11 +2,10 @@ html{
     padding-top: 110px;
 }
 
-#cloud-header{
+#base-header{
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
-    background: url('../static/backgrounds/header/cloud-header.png') repeat-x;
+    justify-content: space-between;
     background-size: auto 90px;
     width: calc(100% - 20px);
     height: 90px;
@@ -19,20 +18,26 @@ html{
     z-index: 9999;
 }
 
-#cloud-header #site-title{
+#base-header #base-header-left{
+    display: flex;
+    flex-direction: row;
+}
+
+#base-header #base-header-left a{
+    margin-right: 0;
+    padding-right: 7px;
+}
+
+#base-header #site-title{
     margin-right: 7px;
 }
 
-#cloud-header #cloud-header-spacer{
-    flex-grow: 1
-}
-
-#cloud-header #site-title img{
+#base-header #site-title img{
     width: 40px;
     height: 40px;
 }
 
-#cloud-header a{
+#base-header a{
     color: #2f6b83;
     text-decoration: none;
     cursor: pointer;
diff --git a/WebHostLib/static/styles/header/dirtHeader.css b/WebHostLib/static/styles/header/dirtHeader.css
new file mode 100644
index 00000000..b2df59a0
--- /dev/null
+++ b/WebHostLib/static/styles/header/dirtHeader.css
@@ -0,0 +1,3 @@
+#base-header{
+    background: url('../../static/backgrounds/header/dirt-header.png') repeat-x;
+}
diff --git a/WebHostLib/static/styles/header/grassHeader.css b/WebHostLib/static/styles/header/grassHeader.css
new file mode 100644
index 00000000..e5943404
--- /dev/null
+++ b/WebHostLib/static/styles/header/grassHeader.css
@@ -0,0 +1,3 @@
+#base-header{
+    background: url('../../static/backgrounds/header/grass-header.png') repeat-x;
+}
diff --git a/WebHostLib/static/styles/header/oceanHeader.css b/WebHostLib/static/styles/header/oceanHeader.css
new file mode 100644
index 00000000..05d80293
--- /dev/null
+++ b/WebHostLib/static/styles/header/oceanHeader.css
@@ -0,0 +1,3 @@
+#base-header{
+    background: url('../../static/backgrounds/header/ocean-header.png') repeat-x;
+}
diff --git a/WebHostLib/static/styles/tracker.css b/WebHostLib/static/styles/tracker.css
index 44448006..60dc9fbe 100644
--- a/WebHostLib/static/styles/tracker.css
+++ b/WebHostLib/static/styles/tracker.css
@@ -26,9 +26,15 @@ html{
     line-height: 20px;
 }
 
+#tracker-header-bar .info{
+    color: #ffffff;
+}
+
 #search{
+    border: 1px solid #000000;
+    border-radius: 3px;
+    padding: 3px;
     width: 200px;
-    height: 20px;
     margin-bottom: 0.5rem;
     margin-right: 1rem;
 }
diff --git a/WebHostLib/templates/check.html b/WebHostLib/templates/check.html
index 13dc13ba..78b014eb 100644
--- a/WebHostLib/templates/check.html
+++ b/WebHostLib/templates/check.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="check-wrapper">
         <div id="check" class="grass-island">
             <h3>Upload Yaml</h3>
diff --git a/WebHostLib/templates/checkResult.html b/WebHostLib/templates/checkResult.html
index b1b3582a..13465258 100644
--- a/WebHostLib/templates/checkResult.html
+++ b/WebHostLib/templates/checkResult.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="check-result-wrapper">
         <div id="check-result" class="grass-island">
             {% for filename, resulttext in results.items() %}
diff --git a/WebHostLib/templates/cloudHeader.html b/WebHostLib/templates/cloudHeader.html
deleted file mode 100644
index 90e28144..00000000
--- a/WebHostLib/templates/cloudHeader.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% block head %}
-    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cloudHeader.css") }}" />
-{% endblock %}
-
-{% block header %}
-    <header id="cloud-header">
-        <a href="/" id="site-title">
-            <img src="/favicon.ico" alt="Favicon" />
-        </a>
-        <a href="/">multiworld randomizer</a>
-        <div id="cloud-header-spacer"></div>
-        <a href="/generate">start game</a>
-        <a href="/uploads">host game</a>
-        <a href="/tutorial">setup guide</a>
-        <a href="/player-settings">player settings</a>
-        <a href="https://discord.gg/8Z65BR2">discord</a>
-    </header>
-{% endblock %}
diff --git a/WebHostLib/templates/generate.html b/WebHostLib/templates/generate.html
index f7b0ee8b..15f32955 100644
--- a/WebHostLib/templates/generate.html
+++ b/WebHostLib/templates/generate.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="generate-game-wrapper">
         <div id="generate-game" class="grass-island">
             <h1>Start Game{% if race %} (Race Mode){% endif %}</h1>
diff --git a/WebHostLib/templates/header/baseHeader.html b/WebHostLib/templates/header/baseHeader.html
new file mode 100644
index 00000000..edea7edb
--- /dev/null
+++ b/WebHostLib/templates/header/baseHeader.html
@@ -0,0 +1,21 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/baseHeader.css") }}" />
+{% endblock %}
+
+{% block header %}
+    <header id="base-header">
+        <div id="base-header-left">
+            <a href="/" id="site-title">
+                <img src="/favicon.ico" alt="Favicon" />
+            </a>
+            <a href="/">multiworld randomizer</a>
+        </div>
+        <div id="base-header-right">
+            <a href="/generate">start game</a>
+            <a href="/uploads">host game</a>
+            <a href="/tutorial">setup guide</a>
+            <a href="/player-settings">player settings</a>
+            <a href="https://discord.gg/8Z65BR2">discord</a>
+        </div>
+    </header>
+{% endblock %}
diff --git a/WebHostLib/templates/header/dirtHeader.html b/WebHostLib/templates/header/dirtHeader.html
new file mode 100644
index 00000000..4b237333
--- /dev/null
+++ b/WebHostLib/templates/header/dirtHeader.html
@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/dirtHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}
diff --git a/WebHostLib/templates/header/grassHeader.html b/WebHostLib/templates/header/grassHeader.html
new file mode 100644
index 00000000..20ad404e
--- /dev/null
+++ b/WebHostLib/templates/header/grassHeader.html
@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/grassHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}
diff --git a/WebHostLib/templates/header/oceanHeader.html b/WebHostLib/templates/header/oceanHeader.html
new file mode 100644
index 00000000..1bcfae5b
--- /dev/null
+++ b/WebHostLib/templates/header/oceanHeader.html
@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/oceanHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}
diff --git a/WebHostLib/templates/hostGame.html b/WebHostLib/templates/hostGame.html
index d05d0cb4..f3de06e9 100644
--- a/WebHostLib/templates/hostGame.html
+++ b/WebHostLib/templates/hostGame.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
 
     <div id="host-game-wrapper">
         <div id="host-game" class="grass-island {% if rooms %}wider{% endif %}">
diff --git a/WebHostLib/templates/hostRoom.html b/WebHostLib/templates/hostRoom.html
index 9e11ab32..e0108559 100644
--- a/WebHostLib/templates/hostRoom.html
+++ b/WebHostLib/templates/hostRoom.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <div id="host-room">
         {% if room.owner == session["_id"] %}
             Room created from <a href="{{ url_for("viewSeed", seed=room.seed.id) }}">Seed #{{ room.seed.id|suuid }}</a>
diff --git a/WebHostLib/templates/pageWrapper.html b/WebHostLib/templates/pageWrapper.html
index 24ab7272..1872382a 100644
--- a/WebHostLib/templates/pageWrapper.html
+++ b/WebHostLib/templates/pageWrapper.html
@@ -19,7 +19,7 @@
     {% if messages %}
         <div>
             {% for message in messages %}
-                <div class="alert alert-danger" role="alert">{{ message }}</div>
+                <div class="user-message">{{ message }}</div>
             {% endfor %}
         </div>
     {% endif %}
diff --git a/WebHostLib/templates/playerSettings.html b/WebHostLib/templates/playerSettings.html
index b9eee580..a3d97428 100644
--- a/WebHostLib/templates/playerSettings.html
+++ b/WebHostLib/templates/playerSettings.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <div id="player-settings">
         <h1>Player Settings</h1>
         <div id="instructions">
diff --git a/WebHostLib/templates/tracker.html b/WebHostLib/templates/tracker.html
index bce25242..3a528c16 100644
--- a/WebHostLib/templates/tracker.html
+++ b/WebHostLib/templates/tracker.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/dirtHeader.html' %}
     <div id="tracker-wrapper" data-tracker="{{ room.tracker|suuid }}">
         <div id="tracker-header-bar">
             <input placeholder="Search" id="search"/>
@@ -20,7 +20,7 @@
                     Multistream
                 </a>
             </span>
-            <span>This tracker will automatically update itself periodically.</span>
+            <span class="info">This tracker will automatically update itself periodically.</span>
         </div>
         <div id="tables-container">
             {% for team, players in inventory.items() %}
diff --git a/WebHostLib/templates/tutorial.html b/WebHostLib/templates/tutorial.html
index 2ba788dd..eb6a39d9 100644
--- a/WebHostLib/templates/tutorial.html
+++ b/WebHostLib/templates/tutorial.html
@@ -1,7 +1,7 @@
 {% extends 'pageWrapper.html' %}
 
 {% block head %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <title>Setup Tutorial</title>
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/tutorial.css") }}" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
diff --git a/WebHostLib/templates/viewSeed.html b/WebHostLib/templates/viewSeed.html
index de7f3549..aa78bdce 100644
--- a/WebHostLib/templates/viewSeed.html
+++ b/WebHostLib/templates/viewSeed.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="view-seed-wrapper">
         <div id="view-seed" class="grass-island">
             <h3>Seed Info</h3>
diff --git a/WebHostLib/templates/waitSeed.html b/WebHostLib/templates/waitSeed.html
index e9b5e961..5d522651 100644
--- a/WebHostLib/templates/waitSeed.html
+++ b/WebHostLib/templates/waitSeed.html
@@ -8,9 +8,11 @@
 {% endblock %}
 
 {% block body %}
-    <div id="wait-seed-wrapper">
+    {% include 'header/oceanHeader.html' %}
+    <div id="wait-seed-wrapper" class="grass-island">
         <div class="main-content">
             Waiting for game to generate, this page auto-refreshes to check.
         </div>
     </div>
+    {% include 'islandFooter.html' %}
 {% endblock %}