diff --git a/config/routes/test.js b/config/routes/test.js
index 6e75736..7e7bec1 100644
--- a/config/routes/test.js
+++ b/config/routes/test.js
@@ -38,6 +38,13 @@ router
 		else {
 			res.sendStatus(200);
 		}
+	})
+	
+	.get('/settings', (req,res)=>{
+		res.render('settings');
+	})
+	.post('/settings', (req,res)=>{
+		//TODO: Test validation here.  
 	});
 	
 module.exports = router;
\ No newline at end of file
diff --git a/static/css/base.css b/static/css/base.css
index 6a46dba..23a2fe9 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -84,6 +84,31 @@ pre {
 	word-wrap: break-word;
 }
 
+
+main {
+	top: 59px;
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	overflow-y: auto;
+}
+.container {
+	padding-right: 5%;
+	padding-left: 5%;
+	width: 100%;
+	margin: 0 auto;
+}
+.container:after {
+	content: "";
+	display: block;
+	clear: both;
+}
+section {
+	padding: 10vh 0 5vh;
+}
+
+/* Modifiers */
 .hide { display: none !important; }
 .red, .red:hover { color: #fb6e3d !important; }
 .yellow, .yellow:hover { color: #fbc93d !important; }
@@ -108,28 +133,6 @@ pre {
 .left { float: left; }
 .right { float: right; }
 
-main {
-	top: 59px;
-	position: absolute;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	overflow-y: auto;
-}
-.container {
-	padding-right: 5%;
-	padding-left: 5%;
-	width: 100%;
-	margin: 0 auto;
-}
-.container:after {
-	content: "";
-	display: block;
-	clear: both;
-}
-section {
-	padding: 10vh 0 5vh;
-}
 
 /* Buttons */
 .btn {
@@ -156,7 +159,8 @@ section {
 		inset -.11vw -.18vw .52vw rgba(0,0,0,.4),
 		.18vw .18vw .36vw #000;
 } .btn:disabled {
-	border: 1px solid #999;
+	color: #aaa;
+	border: 1px solid #444;
 } .btn:hover:not(:disabled) {
 	text-decoration: none;
 	background: rgba(255,255,255,0.2);
diff --git a/static/css/form.css b/static/css/form.css
index bfb318a..c442211 100644
--- a/static/css/form.css
+++ b/static/css/form.css
@@ -23,21 +23,25 @@ form input, form textarea, form select {
 	padding: 1% 1.5%;
 	border-radius: .3vw;
 }
-form input:not(:disabled), form textarea:not(:disabled), form select:not(:disabled) {
+form input:not(:disabled), form textarea:not(:disabled), 
+form select:not(:disabled), form .input-addon {
 	border: 1px solid #666;
 	-moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
 	-webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
 	box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
 }
-form input:disabled, form textarea:disabled form select:disabled {
-	border: 1px solid #999;	
+form input:disabled:not(.input-addon), form textarea:disabled, 
+form select:disabled {
+	border: 1px solid #444;	
 }
 form input:not(.input-addon):not(.input-with-addon):not([type="radio"]):not([type="checkbox"]),
 form .input-with-addon-group {
 	min-width: 50%;
 }
-form input:active:not(.input-addon), form textarea:active, form select:active,
-form input:focus:not(.input-addon), form textarea:focus, form select:focus {
+form input:active:not(.input-addon), form textarea:active, 
+form select:active,
+form input:focus:not(.input-addon), form textarea:focus, 
+form select:focus {
 	outline: none;
 	border: 1px solid #fbc93d;
 }
@@ -45,25 +49,45 @@ form input:focus:not(.input-addon), form textarea:focus, form select:focus {
 form .input-with-addon-group {
 	display: flex;
 }
+form .input-addon, form .input-with-addon {
+	-moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
+	-webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
+	box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
+}
 form .input-addon {
+	text-align: center;
+	width: auto;
+}
+form .input-with-addon {
+	flex-grow: 1;
+}
+form .input-addon.left {
 	padding: 1% 0 1% 1.5%;
 	border-right-color: #202020;
 	border-right-color: rgba(102,102,102,0);
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
-	-moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
-	-webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
-	box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
 }
-form .input-with-addon {
+form .input-with-addon.left {
 	padding: 1% 1.5% 1% 0;
 	border-left-color: #202020;
 	border-left-color: rgba(102,102,102,0);
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
-	-moz-box-shadow: inset 0 .18vw .25vw rgba(0,0,0,.5);
-	-webkit-box-shadow: inset 0 .18vw .25vw rgba(0,0,0,.5);
-	box-shadow: inset 0 .18vw .25vw rgba(0,0,0,.5);
+}
+form .input-addon.right {
+	padding: 1% 1.5% 1% 0;
+	border-left-color: #202020;
+	border-left-color: rgba(102,102,102,0);
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+form .input-with-addon.right {
+	padding: 1% 0 1% 1.5%;
+	border-right-color: #202020;
+	border-right-color: rgba(102,102,102,0);
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
 }
 
 ::-webkit-input-placeholder {
diff --git a/static/css/login.css b/static/css/login.css
index b8cc889..167dda1 100644
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -1,17 +1,45 @@
-section > .flex > div {
+/* More padding on the bottom */
+.container {
+	padding-bottom: 10vh;
+}
+
+/* Sections */
+#login, #signup {
 	width: 50%;
-	padding: 0 2%;
+	margin: 0 2%;
 }
 
-form input {
+/* Form overrides */
+form .form-group {
+	margin: 8% 0 0;
+}
+form input:not(.input-addon):not(.input-with-addon), 
+form .input-with-addon-group {
 	width: 96%;
+	margin: 0 auto 5vh;
 }
-
-form input.btn, 
-form #social-login {
+form .input-with-addon, form .input-addon {
+	margin: 0;
+}
+form .input-with-addon-group {
 	width: 100%;
 }
+p, input, #social-login {
+	margin-bottom: 5vh;
+}
+form input.btn[type="submit"] {
+	margin: 0 2% 5vh;
+}
+form #social-login {
+	justify-content: space-around;
+	width: 100%;
+}
+#show {
+	padding: 1%;
+	cursor: pointer;
+}
 
+/* Social buttons */
 #social-login .btn {
 	padding: 2%;
 	text-align: center;
@@ -22,7 +50,7 @@ form #social-login {
 	position: relative;
 }
 #social-login .btn .text {
-	font-size: .8em;
+	font-size: .6em;
 }
 #social-login .btn.gp {
 	background: rgb(206,77,57);
@@ -42,7 +70,8 @@ form #social-login {
 #social-login .btn.tw:hover {
 	background: rgb(89,213,255);
 }
-@media (max-width: 600px) {
+/* Small buttons */
+@media (max-width:600px), (min-width:800px) and (max-width:1200px) {
 	#social-login .btn {
 		padding: 0;
 		width: 60px;
@@ -56,14 +85,20 @@ form #social-login {
 	}
 }
 
-@media (max-width: 800px) {
+/* Single column */
+@media (max-width:800px) {
 	
+	#login, #signup {
+		width: 100%;
+	}
 	section > .flex {
 		flex-direction: column;
 	}
 	section > .flex > div {
 		width: 100%;
 	}
-	hr { display: block; }
+	hr { 
+		display: block !important;
+	}
 	
 }
diff --git a/views/login.html b/views/login.html
index df6202e..46f2ce8 100644
--- a/views/login.html
+++ b/views/login.html
@@ -4,11 +4,6 @@
 	{{super()}}
 	<link rel="stylesheet" type="text/css" href="/static/css/.form.min.css">
 	<link rel="stylesheet" type="text/css" href="/static/css/.login.min.css">
-	<style>
-		p, input, #social-login {
-			margin-bottom: 5vh;
-		}
-	</style>
 {% endblock %}
 
 {% block main %}
@@ -24,7 +19,7 @@
 				<h3>Login</h3>
 				<form method="post">
 					
-					<div id='social-login' class='flex form-group' style="justify-content:space-around">
+					<div id='social-login' class='flex form-group'>
 						
 						<a href="/login/google" class='gp btn'>
 							<i class="fa fa-google-plus"></i>
@@ -44,13 +39,16 @@
 					</div>
 					
 					<div class='form-group' style="flex-wrap:wrap">
-						<input type="email" placeholder="Email" name="email" required>
-						<input type="password" placeholder="Password" name="password" required>
+						<input type="email" name="email" placeholder="Email" required>
+						<div id='password-group' class='input-with-addon-group'>
+							<input id='password' type="password" class='input-with-addon right' placeholder="Password" name="password" minlength="8" maxlength="160" required>
+							<input id='show' type="text" class='right input-addon yellow' size="4" value="SHOW" readonly>
+						</div>
 					</div>
 					
 					<input type="submit" value="Sign in" class='btn main'>
 					
-					<p><a href="/login/forgot">Forgot your password?</a></p>
+					<p style="margin-bottom:0"><a href="/login/forgot">Forgot your password?</a></p>
 				</form>
 			</div>
 			
@@ -59,8 +57,8 @@
 			<div id='signup'>
 				<h3>Create account</h3>
 				<p>Welcome aboard!  </p>
-				<form action="/signup" method="POST">
-					<input type="email" name="email" placeholder="Your Email" required>
+				<form action="/signup" method="post">
+					<input type="email" name="email" placeholder="Your email" required>
 					<p>You will be sent an email confrimation with a link to create a password. </p>
 					<p>By signing up, you agree to our <a href="/terms">terms of service</a> and <a href="/privacy">privacy policy</a>. </p>
 					<input type="submit" value="Sign up" class='btn'>
@@ -71,4 +69,25 @@
 		
 	</section>
 	
+{% endblock %}
+
+{% block javascript %}
+<script type="text/javascript">
+/* global $ */
+
+	// On page load
+	$(function(){
+		
+		// On clocking 'show'
+		$('#show').click(function(){
+			if ($('#password').attr('type')==="password") {
+				$('#password').attr('type','text');
+			} else {
+				$('#password').attr('type','password');
+			}
+		});
+		
+	});
+	
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/settings.html b/views/settings.html
index d1875ff..b46539d 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -106,8 +106,8 @@
 				<div id='slug' class='form-group' title="This is the URL which shows your location. Be careful whom you share it with! ">
 					<label for="slug">URL</label>
 					<div class='input-with-addon-group'>
-						<input type="text" class='input-addon' size="13" value="tracman.org/map/" disabled readonly>
-						<input type="text" class='input-with-addon' name="slug" value="{{user.slug}}" maxlength="160" required>
+						<input type="text" class='left input-addon' size="13" value="tracman.org/map/" disabled readonly>
+						<input type="text" class='input-with-addon left' name="slug" value="{{user.slug}}" maxlength="160" required>
 					</div>
 				</div>