diff --git a/files/templates/sign_up.html b/files/templates/sign_up.html
index 6d59eaa0d..52ac366e5 100644
--- a/files/templates/sign_up.html
+++ b/files/templates/sign_up.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -33,81 +33,85 @@
 	<style>:root{--primary:#{{'DEFAULT_COLOR' | app_config}}</style>
 </head>
 
-<body class="h-full bg-gradient-to-t from-gray-700 to-gray-600" id="login">
+<body class="h-full bg-gradient-to-t from-gray-200 to-gray-100" id="login">
 
 	<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
 
-		<div class="mb-3">
-			<a href="/" class="text-decoration-none">
-				<span class="h3 text-primary">{{'SITE_NAME' | app_config}}</span>
-			</a>
-		</div>
-
-		{% if ref_user %}
-		<h1 class="h2">@{{ref_user.username}} has invited you!</h1>
-		<p class="text-muted mb-md-2">Looks like someone wants you to join {{'SITE_NAME' | app_config}}.</p>
-		{% else %}
-		<h1 class="h2">Create your account.</h1>
-		<p class="text-muted mb-md-2">No email address required.</p>
-		{% endif %}
-
 		<div class="max-w-md w-full space-y-8">
 
-			<form action="/signup" method="post" class="mt-md-3" id="signup">
+			<div class="mb-3">
+				<a href="/" class="text-decoration-none">
+					<span class="h3 text-primary">{{'SITE_NAME' | app_config}}</span>
+				</a>
+			</div>
 
-				{% if error %}<span class="text-danger">{{error}}</span><br>{% endif %}
+			{% if ref_user %}
+			<h1 class="h2">@{{ref_user.username}} has invited you!</h1>
+			<p class="text-muted mb-md-2">Looks like someone wants you to join {{'SITE_NAME' | app_config}}.</p>
+			{% else %}
+			<h1 class="h2">Create your account.</h1>
+			<p class="text-muted mb-md-2">No email address required.</p>
+			{% endif %}
 
-				<input type="hidden" name="formkey" value="{{formkey}}">
-				<input type="hidden" name="now" value="{{now}}">
+			<div class="max-w-md w-full space-y-8">
 
-				{% if redirect %}<input type="hidden" name="redirect" value="{{redirect}}">{% endif %}
-				{% if ref_user %}
-				<input type="hidden" name="referred_by" value="{{ref_user.id}}">{% endif %}
+				<form action="/signup" method="post" class="mt-md-3" id="signup">
 
-				<label for="username-register" class="mt-3">Username</label>
+					{% if error %}<span class="text-danger">{{error}}</span><br>{% endif %}
 
-				<input class="form-control" id="username-register"
-				aria-describedby="usernameHelpRegister" type="text" name="username" pattern="[a-zA-Z0-9_\-]{3,25}" min="3" max="25" required="">
-				<small id="usernameHelpRegister"></small>
+					<input type="hidden" name="formkey" value="{{formkey}}">
+					<input type="hidden" name="now" value="{{now}}">
 
-				<label for="email-register" class="mt-3">Email Address</label>
+					{% if redirect %}<input type="hidden" name="redirect" value="{{redirect}}">{% endif %}
+					{% if ref_user %}
+					<input type="hidden" name="referred_by" value="{{ref_user.id}}">{% endif %}
 
-				<small class="d-inline-block text-muted ml-1">(optional)</small>
+					<label for="username-register" class="mt-3">Username</label>
 
-				<input class="form-control" id="email-register"
-				aria-describedby="emailHelpRegister" type="text" name="email">
+					<input class="form-control" id="username-register"
+					aria-describedby="usernameHelpRegister" type="text" name="username" pattern="[a-zA-Z0-9_\-]{3,25}" min="3" max="25" required="">
+					<small id="usernameHelpRegister"></small>
 
-				<label for="password-register" class="mt-3">Password</label>
+					<label for="email-register" class="mt-3">Email Address</label>
 
-				<input class="form-control" id="password-register"
-				aria-describedby="passwordHelpReigster" type="password" name="password" required="">
-				<small id="passwordHelpRegister" class="form-text font-weight-bold text-muted d-none mt-1">Minimum of 8
-					characters
-				required.</small>
-				<small id="passwordHelpSuccess" class="form-text font-weight-bold text-success d-none mt-1">Your password meets the requirements.
-				</small>
+					<small class="d-inline-block text-muted ml-1">(optional)</small>
 
-				<label for="password_confirm" class="mt-3">Confirm Password</label>
+					<input class="form-control" id="email-register"
+					aria-describedby="emailHelpRegister" type="text" name="email">
 
-				<input class="form-control" id="password_confirm" aria-describedby="passwordConfirmHelp" type="password" name="password_confirm" required="">
-				<div class="custom-control custom-checkbox mt-4">
-					<input type="checkbox" class="custom-control-input" id="termsCheck" required>
-					<label class="custom-control-label terms" for="termsCheck">I accept the
-						<a href="/rules" target="_blank">terms and conditions</a>
-					</label>
-				</div>
+					<label for="password-register" class="mt-3">Password</label>
 
-				{% if hcaptcha %}
-				<div class="h-captcha" data-sitekey="{{ hcaptcha }}"></div>
-				{% endif %}
+					<input class="form-control" id="password-register"
+					aria-describedby="passwordHelpReigster" type="password" name="password" required="">
+					<small id="passwordHelpRegister" class="form-text font-weight-bold text-muted d-none mt-1">Minimum of 8
+						characters
+					required.</small>
+					<small id="passwordHelpSuccess" class="form-text font-weight-bold text-success d-none mt-1">Your password meets the requirements.
+					</small>
 
-				<button class="btn btn-primary login w-100 mt-3" id="register_button">Register</button>
+					<label for="password_confirm" class="mt-3">Confirm Password</label>
 
-				<div class="text-center text-muted text-small mt-2 mb-0">
-					Already have an account? <a href="/login{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Log in</a>
-				</div>
+					<input class="form-control" id="password_confirm" aria-describedby="passwordConfirmHelp" type="password" name="password_confirm" required="">
+					<div class="custom-control custom-checkbox mt-4">
+						<input type="checkbox" class="custom-control-input" id="termsCheck" required>
+						<label class="custom-control-label terms" for="termsCheck">I accept the
+							<a href="/rules" target="_blank">terms and conditions</a>
+						</label>
+					</div>
 
-			</form>
+					{% if hcaptcha %}
+					<div class="h-captcha" data-sitekey="{{ hcaptcha }}"></div>
+					{% endif %}
+
+					<button class="btn btn-primary login w-100 mt-3" id="register_button">Register</button>
+
+					<div class="text-center text-muted text-small mt-2 mb-0">
+						Already have an account? <a href="/login{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Log in</a>
+					</div>
+
+				</form>
+
+			</div>
 
 		</div>
 
