diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 79b3096..adfbf1f 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -25,7 +25,7 @@
 	<body>
 		<div id="noJSPage">This application requires JavaScript.</div>
 		<div id="preGamePage" hidden>
-			<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></p>
+			<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></div>
 			<h1>Tableturf Battle</h1>
 			<form id="preGameForm">
 				<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>
diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index 65b278b..0ae7271 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -12,11 +12,6 @@ html, body {
 	overflow-x: hidden;  /* TODO: This stops the page from scrolling into whitespace on mobile Chrome. A better solution is probably possible. */
 }
 
-body, dialog {
-	color: white;
-	background: black;
-	color-scheme: dark;
-}
 body {
 	margin: 0;
 	font-family: 'Splatoon 2', sans-serif;
@@ -37,9 +32,17 @@ body {
 	--player-special-colour: var(--special-colour-1);
 	--player-special-accent-colour: var(--special-accent-colour-1);
 	--theme-colour: #0c92f2;
+	color: white;
+	background: url('assets/external/BannerBackground.png') black;
+	background-position: 50% -72px;
+	color-scheme: dark;
+}
+dialog {
+	background: black;
 }
 
 #gamePage {
+	background: black;
 	--player-primary-colour: var(--primary-colour-1);
 	--player-special-colour: var(--special-colour-1);
 	--player-special-accent-colour: var(--special-accent-colour-1);
@@ -87,6 +90,11 @@ h1, h2, h3, h4, h5, h6 {
 
 #preGamePage {
 	text-align: center;
+	padding-top: 40px;
+}
+
+#logoBanner {
+	background: grey;
 }
 
 #logo {
