diff --git a/app/ui/account.js b/app/ui/account.js
index d9f92ff6..3e25a0dc 100644
--- a/app/ui/account.js
+++ b/app/ui/account.js
@@ -1,26 +1,16 @@
 const html = require('choo/html');
-const itemClass =
-  'block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
 
 module.exports = function(state, emit) {
   if (!state.capabilities.account) {
     return null;
   }
   const user = state.user;
-  const menuItems = [];
-  if (user.loggedIn) {
-    menuItems.push(html`<li class="p-2 text-grey-dark">${user.email}</li>`);
-    menuItems.push(
-      html`<li><a class="${itemClass}" onclick=${logout}>${state.translate(
-        'logOut'
-      )}</a></li>`
-    );
-  } else {
-    menuItems.push(
-      html`<li class=""><a class="${itemClass}" onclick=${login}>${state.translate(
-        'signInMenuOption'
-      )}</a></li>`
-    );
+  if (!user.loggedIn) {
+    return html`<button
+      class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
+      onclick=${login}>
+        ${state.translate('signInMenuOption')}
+      </button>`;
   }
   return html`<div class="relative h-8">
     <input
@@ -34,7 +24,12 @@ module.exports = function(state, emit) {
       class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
       onblur="${hideMenu}"
       tabindex="-1">
-      ${menuItems}
+      <li class="p-2 text-grey-dark">${user.email}</li>
+      <li>
+        <a class="block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer" onclick=${logout}>
+          ${state.translate('logOut')}
+        </a>
+      </li>
     </ul>
   </div>`;