diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index eefb51a..ead6cb7 100755
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -18,6 +18,7 @@ $color-blue:                        #00c6ff;
 $color-black:                       #000;
 $color-white:                       #fff;
 $color-grey:                        #666;
+$color-grey-input:                  #949494;
 $color-grey-dark:                   #333;
 $color-grey-medium:                 #aaa;
 $color-grey-light:                  #ccc;
diff --git a/src/sass/all.scss b/src/sass/all.scss
index 1b2eb0a..94a26ef 100755
--- a/src/sass/all.scss
+++ b/src/sass/all.scss
@@ -18,6 +18,7 @@
 @import "components/mail-list";
 @import "components/layout";
 @import "components/popover";
+@import "components/input";
 
 // Views
 @import "views/shared";
diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss
index 59087c1..3f7b1bc 100755
--- a/src/sass/components/_buttons.scss
+++ b/src/sass/components/_buttons.scss
@@ -17,11 +17,9 @@
     background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     background-color: $btn-back-color;
     color: $btn-color;
-    box-shadow: 1px 1px 0px $btn-shadow-color;
     transition: background-color 0.3s;
     text-decoration: none;
     font-weight: normal;
-    -webkit-font-smoothing: auto;
 
     &:hover,
     &:focus {
@@ -59,6 +57,15 @@
     }
 }
 
+.btn-alt {
+    background-color: $color-grey-input;
+
+    &:hover,
+    &:focus {
+        background-color: lighten($color-grey-input, 10%);
+    }
+}
+
 // Icon Buttons
 // -------------------------------------------
 
diff --git a/src/sass/components/_input.scss b/src/sass/components/_input.scss
new file mode 100644
index 0000000..68cdbff
--- /dev/null
+++ b/src/sass/components/_input.scss
@@ -0,0 +1,10 @@
+.input-text {
+    background-color: white;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $color-grey-lighter;
+    color: $color-grey;
+    font-size: $font-size-base;
+    padding: 8px 10px;
+    outline: none;
+}
\ No newline at end of file
diff --git a/src/sass/components/_popover.scss b/src/sass/components/_popover.scss
index 2f7638a..997c4b5 100644
--- a/src/sass/components/_popover.scss
+++ b/src/sass/components/_popover.scss
@@ -125,7 +125,6 @@
 
 .popover-info {
     color: $color-blue;
-    margin-left: 5px;
 
     &:hover {
         cursor: pointer;
diff --git a/src/sass/views/_login.scss b/src/sass/views/_login.scss
index 0b084b8..ee7ece5 100644
--- a/src/sass/views/_login.scss
+++ b/src/sass/views/_login.scss
@@ -6,40 +6,64 @@
     color: $color-grey-dark;
 
     .logo-wrapper {
-        width: 320px;
+        max-width: 700px;
         height: 58px;
-        margin: 125px auto 80px;
-    }
+        margin: 145px auto 75px auto;
 
-    .logo {
-        background-image:url('../img/whiteout_logo.svg');
-        background-repeat: no-repeat;
-        background-size: 320px 58px;
-        width: 320px;
-        height: 58px;
+        .logo {
+            background-image:url('../img/whiteout_logo.svg');
+            background-repeat: no-repeat;
+            background-size: 320px 58px;
+            width: 320px;
+            height: 58px;
+        }
     }
 
     .content {
-        max-width: 500px;
+        max-width: 400px;
         margin-left: auto;
         margin-right: auto;
 
         p {
-            line-height: 150%
+            line-height: 150%;
+
+            b {
+                color: $color-blue;
+            }
         }
 
         div {
-            margin: 25px 0;
+            margin: 20px 0;
         }
 
         input {
-            margin-right: 5px;
-            border-radius: 5px;
+            margin-right: 10px;
+        }
+
+        input[type=file] {
+            background-color: white;
             border-width: 1px;
             border-style: solid;
-            border-color: $color-grey-light;
-            padding: 5px;
+            border-color: $color-grey-lighter;
+            color: $color-grey-input;
+            font-size: 1em;
+            padding: 4px 4px;
             outline: none;
+
+            &::-webkit-file-upload-button {
+                background-color: $color-grey-input;
+                border-width: 0px;
+                border-style: solid;
+                color: white;
+                padding: 4px 10px;
+                font-family: inherit;
+                font-size: inherit;
+                line-height: inherit;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                outline: none;
+                cursor: pointer;
+            }
         }
 
         .error {
@@ -49,7 +73,10 @@
 }
 
 .view-login-existing {
-    .content {
-        max-width: 400px;
+}
+
+.view-login-initial {
+    button {
+        margin-right: 10px;
     }
 }
\ No newline at end of file
diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss
index 3ad10d7..bbdbdb4 100755
--- a/src/sass/views/_mail-list.scss
+++ b/src/sass/views/_mail-list.scss
@@ -29,10 +29,13 @@
     }
 
     .search {
-        width: 100%;
         padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
+        margin: 0 auto;
+        width: 100%;
+
         input {
-            width: 100%;
+            width: 93%;
+            -webkit-appearance: searchfield;
         }
     }
 
diff --git a/src/tpl/login-existing.html b/src/tpl/login-existing.html
index bba0a46..38b3926 100644
--- a/src/tpl/login-existing.html
+++ b/src/tpl/login-existing.html
@@ -4,13 +4,11 @@
   </div><!--/logo-->
 
   <div class="content">
-    <h1>Unlock mailbox</h1>
-
-    <p>Please enter your passphrase to unlock the mailbox.</p>
+    <p><b>Unlock mailbox.</b> Please enter your passphrase to unlock the mailbox.</p>
 
     <form>
       <div>
-       <input type="password" ng-model="passphrase" ng-change="change()" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="1" focus-me="true">
+       <input class="input-text" type="password" ng-model="passphrase" ng-change="change()" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="1" focus-me="true">
        <span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
       </div>
       <div>
diff --git a/src/tpl/login-initial.html b/src/tpl/login-initial.html
index 48f5edd..2e20719 100644
--- a/src/tpl/login-initial.html
+++ b/src/tpl/login-initial.html
@@ -1,4 +1,4 @@
-<div class="view-login" ng-class="{'waiting-cursor': state.ui === 2}">
+<div class="view-login view-login-initial" ng-class="{'waiting-cursor': state.ui === 2}">
   <div class="logo-wrapper">
     <div class="logo"></div>
   </div><!--/logo-->
@@ -6,12 +6,11 @@
   <div class="content" ng-switch on="state.ui">
 
     <div ng-switch-when="1">
-      <h1>Set passphrase</h1>
-      <p>The passphrase protects your keypair. If you forget your passphrase you will not be able to recover your messages.</p>
+      <p><b>Set passphrase.</b> The passphrase protects your keypair. If you forget your passphrase you will not be able to recover your messages.</p>
       <form>
         <div>
-          <input type="password" ng-model="state.passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
-          <input type="password" ng-model="state.confirmation" ng-class="{error: state.confirmation !== state.passphrase}" placeholder="Confirm passphrase" tabindex="2">
+          <input class="input-text" type="password" ng-model="state.passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
+          <input class="input-text" type="password" ng-model="state.confirmation" ng-class="{error: state.confirmation !== state.passphrase}" placeholder="Confirm passphrase" tabindex="2">
           <span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
         </div>
         <div>
@@ -21,15 +20,13 @@
     </div>
 
     <div ng-switch-when="2">
-      <h1>Generating keypair</h1>
-      <p>Please stand by. This can take a while...</p>
+      <p><b>Generating keypair.</b> Please stand by. This can take a while...</p>
     </div>
 
     <div ng-switch-when="4">
-      <h1>Keypair generated</h1>
-      <p>Your personal keypair has been generated. You can export it (e.g. to a USB flash drive) to setup Whiteout Mail on another computer or as a backup.</p>
+      <p><b>Keypair generated.</b> Your personal keypair has been generated. You can export it (e.g. to a USB flash drive) to setup Whiteout Mail on another computer or as a backup.</p>
       <button ng-click="exportKeypair()" class="btn" tabindex="4">Export now</button>
-      <button ng-click="proceed()" class="btn" tabindex="5">Do it later</button>
+      <button ng-click="proceed()" class="btn btn-alt" tabindex="5">Do it later</button>
     </div>
 
   </div><!--/content-->
diff --git a/src/tpl/login-new-device.html b/src/tpl/login-new-device.html
index ae8b01c..82c6b43 100644
--- a/src/tpl/login-new-device.html
+++ b/src/tpl/login-new-device.html
@@ -4,9 +4,7 @@
   </div><!--/logo-->
 
   <div class="content">
-    <h1>Import keyfile</h1>
-
-    <p>You are already registered on another device. To access your emails on this device, please import your key file.</p>
+    <p><b>Import keyfile.</b> You are already registered on another device. To access your emails on this device, please import your key file.</p>
     
     <form>
       <div>
@@ -14,7 +12,7 @@
         <span class="popover-info" data-icon-append="&#xe010;" popover="#keyfile-info"></span>
       </div>
       <div>
-        <input type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="2" focus-me="true">        
+        <input class="input-text" type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="2" focus-me="true">        
         <span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
       </div>
       <div><button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!key" tabindex="3">Import</button>
diff --git a/src/tpl/login.html b/src/tpl/login.html
index b892c2d..b200da9 100644
--- a/src/tpl/login.html
+++ b/src/tpl/login.html
@@ -5,8 +5,7 @@
   </div><!--/logo-->
 
   <div class="content">
-    <h1>Login</h1>
-    <p>Authenticating with the mail server...</p>
+    <p><b>Login.</b> Authenticating with the mail server...</p>
   </div><!--/content-->
 
 </div>
diff --git a/src/tpl/mail-list.html b/src/tpl/mail-list.html
index b841711..8183e28 100644
--- a/src/tpl/mail-list.html
+++ b/src/tpl/mail-list.html
@@ -5,7 +5,7 @@
   </header>
 
   <div class="search">
-    <input ng-model="searchText" placeholder="Find">
+    <input class="input-text" type="search" results="5" ng-model="searchText" placeholder=" Filter...">
   </div>
 
   <div class="list-wrapper" ng-iscroll="state.nav.currentFolder.messages.length">