diff --git a/webapp/app.jsx b/webapp/app.jsx
index 757a5b8..5debf6e 100644
--- a/webapp/app.jsx
+++ b/webapp/app.jsx
@@ -7,7 +7,7 @@ require('raleway.css')
 // Start
 
 document.getElementById('root').innerHTML = `
-  <div style="text-align:center">
+  <div style="text-align:center;margin-top:2rem">
     <h1>Loading</h1>
     <p>Gathering components</p>
   </div>
@@ -130,7 +130,7 @@ require.ensure('react', _ => {
           </Route>
         </Router>
       } else {
-        return <div className="loading" >
+        return <div className="loading" style={{ marginTop: '2rem' }} >
           <div className="text-center">
             <Icon className="center-block fa-spin fa-3x light" name="refresh" />
             <h4 className="top-half-em">Downloading Components</h4>
diff --git a/webapp/index.html b/webapp/index.html
index 8a4fb6e..227a0b9 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -20,7 +20,7 @@
       </div>
     </noscript>
     <div id="root">
-      <div style="text-align:center">
+      <div style="text-align:center;margin-top:2rem">
         <h1>Loading</h1>
         <p>Downloading Scripts</p>
       </div>
diff --git a/webapp/style.css b/webapp/style.css
index 78d3538..2add8a6 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -141,7 +141,7 @@ a:hover {
 .navbar {
   border-bottom: 1px solid #eee;
   display: block;
-  height: 4.5em
+  height: 4em
 }
 
 .navbar .container {
@@ -195,6 +195,13 @@ a:hover {
   margin-top: 1rem;
 }
 
+@media (min-width: 550px) {
+  /* larger than mobile */
+  .navbar {
+    height: 4.5em
+  }
+}
+
 @media (min-width: 500px) {
   /* larger than mobile */
   .buttons {