diff --git a/src/auth/ha-auth-flow.js b/src/auth/ha-auth-flow.js
index d398161635..a676aad401 100644
--- a/src/auth/ha-auth-flow.js
+++ b/src/auth/ha-auth-flow.js
@@ -10,6 +10,12 @@ import EventsMixin from '../mixins/events-mixin.js';
 class HaAuthFlow extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
+    <style>
+      .action {
+        margin: 32px 0;
+        text-align: center;
+      }
+    </style>
     <template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]">
       Please wait
     </template>
@@ -26,7 +32,9 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
       <template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]">
         <ha-form data="{{_stepData}}" schema="[[_step.data_schema]]" error="[[_step.errors]]"></ha-form>
       </template>
-      <paper-button on-click="_handleSubmit">[[_computeSubmitCaption(_step.type)]]</paper-button>
+      <div class='action'>
+        <paper-button raised on-click="_handleSubmit">[[_computeSubmitCaption(_step.type)]]</paper-button>
+      </div>
     </template>
 `;
   }
@@ -87,7 +95,7 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
   }
 
   _computeSubmitCaption(stepType) {
-    return stepType === 'form' ? 'Submit' : 'Start over';
+    return stepType === 'form' ? 'Next' : 'Start over';
   }
 
   _handleSubmit() {
diff --git a/src/auth/ha-pick-auth-provider.js b/src/auth/ha-pick-auth-provider.js
index 41001ac776..2041ee54cf 100644
--- a/src/auth/ha-pick-auth-provider.js
+++ b/src/auth/ha-pick-auth-provider.js
@@ -1,4 +1,5 @@
 import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-item/paper-item-body.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
@@ -11,13 +12,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
-      :host {
-        text-align: center;
-        font-family: Roboto;
-      }
       paper-item {
         cursor: pointer;
       }
+      p {
+        margin-top: 0;
+      }
     </style>
     <template is="dom-if" if="[[_equal(_state, &quot;loading&quot;)]]">
       Loading auth providers.
@@ -29,9 +29,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
       Error loading
     </template>
     <template is="dom-if" if="[[_equal(_state, &quot;pick&quot;)]]">
-      <p>Log in with</p>
+      <p>Pick an auth provider to log in with:</p>
       <template is="dom-repeat" items="[[authProviders]]">
-        <paper-item on-click="_handlePick">[[item.name]]</paper-item>
+        <paper-item on-click="_handlePick">
+          <paper-item-body>[[item.name]]</paper-item-body>
+          <iron-icon icon="hass:chevron-right"></iron-icon>
+        </paper-item>
       </template>
     </template>
 `;
diff --git a/src/authorize.html b/src/authorize.html
index 4873cb10e0..3e70e0c7ce 100644
--- a/src/authorize.html
+++ b/src/authorize.html
@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name='viewport' content='width=device-width, user-scalable=no'>
+    <link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
+    <link rel='preload' href='/static/fonts/roboto/Roboto-Medium.ttf' as='font' crossorigin />
     <title>Home Assistant</title>
     <!--EXTRA_SCRIPTS-->
     <style>
diff --git a/src/entrypoints/authorize.js b/src/entrypoints/authorize.js
index 4f2c00dec9..7185c19898 100644
--- a/src/entrypoints/authorize.js
+++ b/src/entrypoints/authorize.js
@@ -15,12 +15,31 @@ class HaAuthorize extends PolymerElement {
     return html`
     <style include="iron-flex iron-positioning"></style>
     <style>
-      .layout {
-        padding-top: 20px;
+      .content {
+        padding: 20px 16px;
+        max-width: 360px;
+        margin: 0 auto;
       }
+
+      .header {
+        text-align: center;
+        font-size: 1.96em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 300;
+      }
+
+      .header img {
+        margin-right: 16px;
+      }
+
     </style>
-    <div class="layout vertical center fit">
-      <img src="/static/icons/favicon-192x192.png" height="192">
+    <div class="content layout vertical fit">
+      <div class='header'>
+        <img src="/static/icons/favicon-192x192.png" height="52">
+        Home Assistant
+      </div>
 
       <p>Logging in to <b>[[clientId]]</b>.</p>
 
diff --git a/src/onboarding.html b/src/onboarding.html
index 3ffa72caf6..26834af002 100644
--- a/src/onboarding.html
+++ b/src/onboarding.html
@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name='viewport' content='width=device-width, user-scalable=no'>
+    <link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
+    <link rel='preload' href='/static/fonts/roboto/Roboto-Medium.ttf' as='font' crossorigin />
     <title>Home Assistant</title>
     <!--EXTRA_SCRIPTS-->
     <style>
diff --git a/src/onboarding/ha-onboarding.js b/src/onboarding/ha-onboarding.js
index 58fe8c11af..a29bc79272 100644
--- a/src/onboarding/ha-onboarding.js
+++ b/src/onboarding/ha-onboarding.js
@@ -14,20 +14,49 @@ class HaOnboarding extends PolymerElement {
     return html`
     <style include="iron-flex iron-positioning"></style>
     <style>
-      .layout {
-        padding-top: 20px;
+      .content {
+        padding: 20px 16px;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+
+      .header {
+        text-align: center;
+        font-size: 1.96em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 300;
+      }
+
+      .header img {
+        margin-right: 16px;
+      }
+
+      h1 {
+        font-size: 1.2em;
       }
 
       .error {
         color: red;
         font-weight: bold;
       }
-    </style>
-    <div class="layout vertical center fit">
-      <img src="/static/icons/favicon-192x192.png" height="192">
 
-      <p>Create your owner user account.</p>
-      <p><i>It is not possible yet to change your password. Coming soon!</i></p>
+      .action {
+        margin: 32px 0;
+        text-align: center;
+      }
+    </style>
+    <div class="content layout vertical fit">
+      <div class='header'>
+        <img src="/static/icons/favicon-192x192.png" height="52">
+        Home Assistant
+      </div>
+
+      <div>
+        <p>Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?</p>
+        <p>Let's get started by creating a user account.</p>
+      </div>
 
       <template is='dom-if' if='[[_error]]'>
         <p class='error'>[[_error]]</p>
@@ -61,8 +90,8 @@ class HaOnboarding extends PolymerElement {
       ></paper-input>
 
       <template is='dom-if' if='[[!_loading]]'>
-        <p>
-          <paper-button on-click='_submitForm'>Submit</paper-button>
+        <p class='action'>
+          <paper-button raised on-click='_submitForm'>Create Account</paper-button>
         </p>
       </template>
     </div>
@@ -96,8 +125,12 @@ class HaOnboarding extends PolymerElement {
   }
 
   _maybePopulateUsername() {
-    if (!this._username) {
-      this._username = this._name.toLowerCase().replace(/ /g, '');
+    if (this._username) return;
+
+    const parts = this._name.split(' ');
+
+    if (parts.length) {
+      this._username = parts[0].toLowerCase();
     }
   }
 
diff --git a/src/panels/config/dashboard/ha-config-users-menu.js b/src/panels/config/dashboard/ha-config-users-menu.js
index 759bdf2470..7708a3b441 100644
--- a/src/panels/config/dashboard/ha-config-users-menu.js
+++ b/src/panels/config/dashboard/ha-config-users-menu.js
@@ -18,6 +18,7 @@ class HaConfigUsersMenu extends LocalizeMixin(PolymerElement) {
         display: block;
       }
       a {
+        text-decoration: none;
         color: var(--primary-text-color);
       }
     </style>
diff --git a/src/panels/config/users/ha-dialog-add-user.js b/src/panels/config/users/ha-dialog-add-user.js
index b460ffacd3..b2259ed332 100644
--- a/src/panels/config/users/ha-dialog-add-user.js
+++ b/src/panels/config/users/ha-dialog-add-user.js
@@ -32,7 +32,15 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
           <div class='error'>[[_errorMsg]]</div>
         </template>
         <paper-input
-          autofocus
+          class='name'
+          label='Name'
+          value='{{_name}}'
+          required
+          auto-validate
+          error-message='Required'
+          on-blur='_maybePopulateUsername'
+        ></paper-input>
+        <paper-input
           class='username'
           label='Username'
           value='{{_username}}'
@@ -79,6 +87,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
         value: false,
       },
 
+      _name: String,
       _username: String,
       _password: String,
     };
@@ -98,10 +107,21 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
     this._dialogClosedCallback = dialogClosedCallback;
     this._loading = false;
     this._opened = true;
+    setTimeout(() => this.shadowRoot.querySelector('paper-input').focus(), 0);
+  }
+
+  _maybePopulateUsername() {
+    if (this._username) return;
+
+    const parts = this._name.split(' ');
+
+    if (parts.length) {
+      this._username = parts[0].toLowerCase();
+    }
   }
 
   async _createUser() {
-    if (!this._username || !this._password) return;
+    if (!this._name || !this._username || !this._password) return;
 
     this._loading = true;
     this._errorMsg = null;
@@ -111,7 +131,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
     try {
       const userResponse = await this.hass.callWS({
         type: 'config/auth/create',
-        name: this._username,
+        name: this._name,
       });
       userId = userResponse.user.id;
     } catch (err) {
diff --git a/src/panels/config/users/ha-user-picker.js b/src/panels/config/users/ha-user-picker.js
index 88233b85c1..42ac578886 100644
--- a/src/panels/config/users/ha-user-picker.js
+++ b/src/panels/config/users/ha-user-picker.js
@@ -38,6 +38,7 @@ class HaUserPicker extends EventsMixin(NavigateMixin(LocalizeMixin(PolymerElemen
       margin: 16px auto;
     }
     a {
+      text-decoration: none;
       color: var(--primary-text-color);
     }
   </style>
