diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index 9efef471..60036977 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -332,15 +332,15 @@ a.button {
 }
 
 /* gray */
-.blue {
+.gray {
 	color: #e9e9e9;
 	border: solid 1px #555;
 	background: #6e6e6e;
 }
-.blue:hover {
+.gray:hover {
 	background: #616161;
 }
-.blue:active {
+.gray:active {
 	color: #afafaf;
 }
 
@@ -384,20 +384,20 @@ a.button {
 }
 
 /* blue */
-.graytext {
+.bluetext {
     color: #27aae2;
 }
 
-.gray {
+.blue {
 	color: #fae7e9;
 	border: solid 1px #27aae2;
 	background: #27aae2;
 }
-.gray:hover {
+.blue:hover {
     background: #1c74bb;
     border: solid 1px #27aae2;
 }
-.gray:active {
+.blue:active {
 	color: #ffffff;
 }
 
@@ -844,3 +844,7 @@ a.wh:hover {
     hyphens: auto;
 
 }
+
+.icon-link a:hover, a:visited, a:link, a:active {
+    text-decoration: none;
+}
diff --git a/static/css/styles2.css b/static/css/styles2.css
index a9ea15c7..b40f6c95 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -28,10 +28,20 @@
         margin: 0;
         padding: 0;
     }
+
+    user ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
     
 .main-head {
   grid-area: header;
 }
+.main-user {
+    grid-area: user;
+}
+
 .content {
   grid-area: content;
 }
@@ -49,20 +59,24 @@
 }
 .wrapper {
   display: grid;
-  grid-gap: 20px;
+  grid-gap: 2px;
   grid-template-areas: 
-    "header"
-    "nav"
-    "content"
-    "sidebar"
-    "ad"
-    "footer";
+  "header"
+   "user"
+   "nav"
+   "content"
+   "sidebar"
+   "ad"
+   "footer";
 }
-@media (min-width: 500px) {
+
+
+@media (min-width: 750px) {
   .wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas: 
-      "header  header"
+    "header  header"
+        "user user"
       "nav     nav"
       "sidebar content"
       "ad      footer";
@@ -75,12 +89,14 @@
     display: flex;
     justify-content: space-between;
   }
+
+  
 }
-@media (min-width: 700px) {
+@media (min-width: 800px) {
   .wrapper {
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
-      "header header  header"
+      "header header  user"
       "nav    content sidebar"
       "nav    content ad"
       "footer footer  footer"
diff --git a/static/css/text2.css b/static/css/text2.css
index 2ed88a3c..f0cda6b7 100644
--- a/static/css/text2.css
+++ b/static/css/text2.css
@@ -147,3 +147,7 @@ p {
 /*  padding: 10px 0; */
   text-align: left;
 }
+
+i {
+    font-size: 2em;
+}
diff --git a/templates/newbase.html b/templates/newbase.html
index 69cb4820..83533660 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -56,6 +56,7 @@
     <link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
 
     <link rel="stylesheet" href="/static/css/resetnew.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <link rel="stylesheet" href="/static/css/styles2.css">
     <link rel="stylesheet" href="/static/css/text2.css" />
     <link rel="stylesheet" href="/static/css/rowsandall2.css" />
@@ -98,35 +99,35 @@
       <header class="main-head">
         <ul>
           <li>
-            <a href="/"><img src="/static/img/logo7.png"
-                           alt="Rowsandall logo" width="300px"></a>
+            <a href="/" title="Home">
+              <img src="/static/img/logo7.png"
+                   alt="Rowsandall logo" width="300px">
+            </a>
           </li>
           <li>
             <p>Free Data and Analysis. For Rowers. By Rowers.</p>
           </li>
+        </ul>
+      </header>
+      <user class="main-user">
+        <ul>
           <li>
-            <a  href="">Help</a>
-          </li>
+            <a  href="/rowers/help" title="Help">
+              <i class="bluetext fas fa-question">&nbsp;</i>
+            </a>
 	    {% if user.is_authenticated %}
-          <li>
-	    <p>
-              {% if user.first_name %}
-	      <a  href="/rowers/me/edit">{{ user.first_name }}</a>
-              {% else %}
-              <a  href="/rowers/me/edit">{{ user }}</a>
-              {% endif %}
-	    </p>
-          </li>
-          <li>
-            <a  href="">Logout</a>
-	  {% else %}
-          <li>
-	    <p><a href="{% url 'login' %}">login</a> </p>
-          </li>
+            <a class="icon-link" href="/rowers/me/edit" title="Account">
+              <i class="bluetext fas fa-user">&nbsp;</i>
+            </a>
+            <a class="icon-link" href="{% url 'logout' %}?next=/login" title="Log Out">
+              <i class="bluetext fas fa-sign-out-alt">&nbsp;</i></a>
+	    {% else %}
+	    <a class="icon-link" href="{% url 'login' %}" title="Log In">
+              <i class="bluetext fas fa-sign-in-alt"></i></a>
 	    {% endif %}
           </li>
         </ul>
-      </header>
+      </user>
       <nav class="main-nav">
         <ul>
           <li><a href="">Nav 1</a></li>