some wip. still broken

app/templates/header/header.css

@@ -1,16 +1,27 @@
 .header {
-  align-items: flex-end;
+  flex: none;
   display: flex;
   flex-direction: row;
-  height: calc(var(--grid-basis) * 4);
+  align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 64px;
+  background-color: white;
+  box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
 }
 
 .header h1 {
   margin: 0;
 }
 
+.header__controls {
+  justify-self: end;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+  align-items: center;
+}
+
 .feedback {
   background-color: #979797;
   background-image: url('../assets/feedback.svg');
@@ -26,6 +37,4 @@
   text-indent: 2px;
   transition: all 250ms ease-in-out;
   white-space: nowrap;
-  margin-left: calc(var(--grid-basis) * 2);
-  margin-bottom: 8px;
 }

app/templates/header/index.js

@@ -9,14 +9,16 @@ module.exports = function(state, emit) {
 
   const header = html`
   <header class="header">
-    <h1>Firefox Send</h1>
-    ${userAccount(state, emit)}
-    <a href="${feedbackUrl}"
-      rel="noreferrer noopener"
-      class="feedback"
-      alt="Feedback"
-      target="_blank">${state.translate('siteFeedback')}
-    </a>
+    <h1><a href="/">Firefox Send</a></h1>
+    <div class="header__controls">
+      ${userAccount(state, emit)}
+      <a href="${feedbackUrl}"
+        rel="noreferrer noopener"
+        class="feedback"
+        alt="Feedback"
+        target="_blank">${state.translate('siteFeedback')}
+      </a>
+    </div>
   </header>`;
   // HACK
   // We only want to render this once because we