diff --git a/server/static/css/main.css b/server/static/css/main.css
index 3dfcf24..0e925c3 100644
--- a/server/static/css/main.css
+++ b/server/static/css/main.css
@@ -4,6 +4,21 @@ body *
     font-family: "Trebuchet MS", Helvetica, sans-serif;
 }
 
+.banner {
+    display:flex;
+    justify-content: center;
+    align-items:center;
+    background-color: orange;
+    height: 20rem;
+    flex-direction: column;
+    margin-bottom: 10rem;
+}
+
+.title {
+    margin: none;
+    color: blue;
+}
+
 .logins {
     height: 100px;
     width: 500px;
diff --git a/server/template/devices.html b/server/template/devices.html
index ec8f310..c43d8eb 100644
--- a/server/template/devices.html
+++ b/server/template/devices.html
@@ -2,9 +2,9 @@
 {% block body%}
 
 <div class="container">
-    <div style="width: 15rem; margin: 1rem">Device ID</div>
-    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
-    <div style="width: 2rem; margin: 1rem">Action</div>
+    <div style="font-weight: bold;width: 15rem; margin: 1rem">Device ID</div>
+    <div style="font-weight: bold;width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
+    <div style="font-weight: bold;width: 2rem; margin: 1rem">Action</div>
 </div>
 
     {% for item in devices %}
@@ -26,10 +26,10 @@
     {% endfor %}
     <form action="" method="post">
     <div class="container">
-        {{ form.hidden_tag() }}
-        {{ form.deviceId.label }}
-        {{ form.deviceId(size=32) }}
-        {{ form.submit() }}
+        <div style="margin: 2rem">{{ form.hidden_tag() }}</div>
+        <div style="margin: 2rem">{{ form.deviceId.label }}</div>
+        <div style="margin: 2rem">{{ form.deviceId(size=32) }}</div>
+        <div style="margin: 2rem">{{ form.submit() }}</div>
     </div> 
     </form>
 
diff --git a/server/template/login.html b/server/template/login.html
index 720fa2f..301c963 100644
--- a/server/template/login.html
+++ b/server/template/login.html
@@ -2,7 +2,10 @@
 
 {% block content %}
 
-<h1 style="color: blue">Login Page</h1>
+<div class="banner">
+    <h1 class="title">Longitude</h1>
+    <h5> A calendar watchface</h5>
+</div>
 
 <!--Google Login-->
 <div class="center-align">
@@ -17,7 +20,7 @@
 </div>
 
 <!--Email Login-->
-<div class="col s12 m6 offset-m3 center-align"  style=" margin: 5px;">
+<div class="col s12 m6 offset-m3 center-align"  style=" margin: 2rem;">
     <a class="oauth-container btn darken-4 white black-text" href="/login/email" style="text-transform:none">
         <div class="left">
             <img width="20px" style="margin-top:7px; margin-right:8px" alt="E-mail sign-in" 
@@ -34,4 +37,4 @@
 <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}