diff --git a/app/assets/images/facebook.svg b/app/assets/images/facebook.svg
new file mode 100644
index 000000000..8169576b4
--- /dev/null
+++ b/app/assets/images/facebook.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 29 22" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y1="0%" x2="0" y2="100%" id="0"><stop stop-color="#fff" offset="0%"/><stop stop-color="#e6eaf1" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="m0 17h29v5h-29v-5" fill="#778eba"/><path d="m17.919 22v-10.06h-2.919v-3.97h2.977v-4.04c0-2.084 1.598-3.935 4.052-3.935h4.971v3.808h-3.863c-1.071 0-1.193.038-1.193 1.033l-.008 3.132h3.552l-.386 3.97h-3.225l.101 10.06h-4.058" fill="url(#0)"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/images/google.svg b/app/assets/images/google.svg
new file mode 100644
index 000000000..fd0188ca2
--- /dev/null
+++ b/app/assets/images/google.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 29 22" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y1="0%" x2="0" y2="100%" id="0"><stop stop-color="#fff" offset="0%"/><stop stop-color="#fae7e3" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd" transform="translate(2)"><path d="m21.06 8.04v-3.044h-2.01v3.044h-3.044v1.911h3.044v3.044h2.01v-3.044h2.944v-1.911h-2.944" fill="#fdf4f2"/><path d="m11.12 12.664c-.606-.436-1.766-1.496-1.766-2.119 0-.73.205-1.09 1.288-1.949 1.11-.88 1.895-2.118 1.895-3.558 0-1.714-.752-3.384-2.163-3.935h2.127l1.502-1.102h-6.71c-3.01 0-5.839 2.314-5.839 4.995 0 2.739 2.051 4.95 5.111 4.95.213 0 .42-.004.622-.019-.199.386-.341.821-.341 1.273 0 .761.403 1.379.913 1.882-.385 0-.757.011-1.163.011-3.726 0-6.594 2.41-6.594 4.908 0 2.461 3.144 4 6.869 4 4.248 0 6.594-2.447 6.594-4.908 0-1.973-.573-3.155-2.346-4.428m-3.607-3.665c-1.633-.051-3.185-1.896-3.466-4.12-.282-2.225.813-3.928 2.445-3.878 1.632.051 3.185 1.836 3.466 4.061.281 2.225-.813 3.988-2.445 3.937m-1.226 12c-2.488 0-4.284-1.612-4.284-3.549 0-1.898 2.228-3.478 4.716-3.451.58.006 1.121.102 1.612.265 1.35.962 2.319 1.505 2.592 2.6.051.222.079.451.079.684 0 1.937-1.219 3.45-4.716 3.45" fill="url(#0)"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/images/twitter.svg b/app/assets/images/twitter.svg
new file mode 100644
index 000000000..3c466d6cb
--- /dev/null
+++ b/app/assets/images/twitter.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 29 22" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y1="0%" x2="0" y2="100%" id="0"><stop stop-color="#fff" offset="0%"/><stop stop-color="#e9f7fc" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="m24.17 4.163c1.017-.625 1.797-1.614 2.165-2.793-.951.579-2.01.999-3.127 1.225-.898-.981-2.178-1.594-3.594-1.594-2.719 0-4.924 2.261-4.924 5.05 0 .396.044.781.128 1.151-4.092-.211-7.72-2.221-10.149-5.275-.424.746-.667 1.613-.667 2.538 0 1.752.869 3.297 2.19 4.203-.807-.026-1.566-.253-2.23-.631-.001.021-.001.042-.001.063 0 2.446 1.697 4.487 3.95 4.951-.413.115-.848.177-1.297.177-.317 0-.626-.032-.926-.091.627 2.01 2.445 3.466 4.6 3.506-1.685 1.354-3.808 2.162-6.115 2.162-.397 0-.789-.024-1.175-.071 2.179 1.433 4.767 2.269 7.548 2.269 9.06 0 14.01-7.693 14.01-14.366 0-.219-.005-.437-.014-.653.962-.712 1.797-1.601 2.457-2.613-.883.402-1.832.673-2.828.795" fill="url(#0)"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco
index bc1f00e5c..0f7de87ef 100644
--- a/app/assets/javascripts/app/views/login.jst.eco
+++ b/app/assets/javascripts/app/views/login.jst.eco
@@ -21,6 +21,30 @@
         <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
         <% end %>
       </div>
+
+      <% if true or !_.isEmpty( @auth_providers ): %>
+      <div class="separator">
+        <span class="separator-text"><%- @T( 'or sign in using' ) %></span>
+      </div>
+
+      <div class="auth_providers horizontal stretch">
+        <!--<% for auth_provider in @auth_providers: %>
+          <li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
+        <% end %>-->
+        <a class="auth_provider facebook horizontal">
+          <span class="provider_icon"></span>
+          <span class="provider_name flex">Facebook</span>
+        </a>
+        <a class="auth_provider google horizontal">
+          <span class="provider_icon"></span>
+          <span class="provider_name flex">Google+</span>
+        </a>
+        <a class="auth_provider twitter horizontal">
+          <span class="provider_icon"></span>
+          <span class="provider_name flex">Twitter</span>
+        </a>
+      </div>
+      <% end %>
     </form>
   </div>
 
@@ -36,21 +60,4 @@
     <a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
   </p>
   <% end %>
-
-  <% if !_.isEmpty( @auth_providers ): %>
-  <hr>
-
-    <div class="col-12">
-      <p>--- <%- @T( 'or' ) %> ---</p>
-    </div>
-
-    <div class="col-12">
-      <p><%- @T( 'Sign in using' ) %></p>
-      <ul>
-      <% for auth_provider in @auth_providers: %>
-        <li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
-      <% end %>
-      </ul>
-    </div>
-  <% end %>
 </div>
diff --git a/app/assets/stylesheets/zzz.css b/app/assets/stylesheets/zzz.css.erb
similarity index 92%
rename from app/assets/stylesheets/zzz.css
rename to app/assets/stylesheets/zzz.css.erb
index 202212f01..5f906938a 100644
--- a/app/assets/stylesheets/zzz.css
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -579,7 +579,7 @@ label {
 
 .hero-unit {
   width: 500px;
-  margin: 10px 0 25px;
+  margin: 10px 0;
   padding: 23px 25px;
   border: 1px solid #e5f0f5;
   color: inherit;
@@ -605,13 +605,14 @@ label {
   }
 
   .login p {
+    margin: 10px 0;
     max-width: 400px;
     color: hsl(210,8%,42%);
     text-align: center;
   }
 
   .login hr {
-    margin: 12px 0 23px;
+    margin: 10px 0;
     border-top-color: rgba(255,255,255,.15);
     width: 100%;
     max-width: 400px;
@@ -687,6 +688,81 @@ ol.tabs li {
   text-overflow: ellipsis
 }
 
+.separator {
+  margin: 20px 0;
+  position: relative;
+  text-align: center;
+}
+
+  .separator:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    top: 50%;
+    left: 0;
+    margin-top: -1px;
+    background: #e6e6e6;
+  }
+
+  .separator-text {
+    padding: 0 10px;
+    color: #999;
+    font-size: 12px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    background: white;
+    display: inline-block;
+    position: relative;
+  }
+
+.auth_provider {
+  padding: 9px 7px 8px;
+  color: white;
+  line-height: 22px;
+  text-align: center;
+  border-radius: 2px;
+}
+
+  .auth_provider:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .auth_provider:hover {
+    color: white;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .auth_provider.facebook {
+    background-color: #4f699c;
+  }
+
+  .auth_provider.google {
+    background-color: #d8543c;
+  }
+
+  .auth_provider.twitter {
+    background-color: #2eaee1;
+  }
+
+.provider_icon {
+  width: 29px;
+  height: 22px;
+}
+
+  .facebook .provider_icon {
+    background-image: url(<%= asset_path "facebook.svg" %>);
+  }
+
+  .google .provider_icon {
+    background-image: url(<%= asset_path "google.svg" %>);
+  }
+
+  .twitter .provider_icon {
+    background-image: url(<%= asset_path "twitter.svg" %>);
+  }
+
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
  */