diff --git a/addons/auth_oauth/data/auth_oauth_data.xml b/addons/auth_oauth/data/auth_oauth_data.xml
index 8ee65946d84..67c1c98e7cc 100644
--- a/addons/auth_oauth/data/auth_oauth_data.xml
+++ b/addons/auth_oauth/data/auth_oauth_data.xml
@@ -7,7 +7,7 @@
             <field name="scope">userinfo</field>
             <field name="validation_endpoint">https://accounts.odoo.com/oauth2/tokeninfo</field>
             <field name="data_endpoint"></field>
-            <field name="css_class">zocial openerp</field>
+            <field name="css_class">fa fa-fw o_custom_icon</field>
             <field name="body">Log in with Odoo.com</field>
             <field name="enabled" eval="True"/>
         </record>
@@ -17,8 +17,8 @@
             <field name="scope">public_profile,email</field>
             <field name="validation_endpoint">https://graph.facebook.com/me</field>
             <field name="data_endpoint">https://graph.facebook.com/me?fields=id,name,email</field>
-            <field name="css_class">fa fa-facebook-square</field>
-            <field name="body">Log in with facebook</field>
+            <field name="css_class">fa fa-fw fa-facebook-square</field>
+            <field name="body">Log in with Facebook</field>
         </record>
         <record id="provider_google" model="auth.oauth.provider">
             <field name="name">Google OAuth2</field>
@@ -26,7 +26,7 @@
             <field name="scope">https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile</field>
             <field name="validation_endpoint">https://www.googleapis.com/oauth2/v1/tokeninfo</field>
             <field name="data_endpoint">https://www.googleapis.com/oauth2/v1/userinfo</field>
-            <field name="css_class">fa fa-google-plus-square</field>
+            <field name="css_class">fa fa-fw fa-google-plus-square</field>
             <field name="body">Log in with Google</field>
         </record>
 
diff --git a/addons/auth_oauth/models/auth_oauth.py b/addons/auth_oauth/models/auth_oauth.py
index de27556140c..2dbea1f85ec 100644
--- a/addons/auth_oauth/models/auth_oauth.py
+++ b/addons/auth_oauth/models/auth_oauth.py
@@ -18,6 +18,6 @@ class AuthOAuthProvider(models.Model):
     validation_endpoint = fields.Char(string='Validation URL', required=True)  # OAuth provider URL to validate tokens
     data_endpoint = fields.Char(string='Data URL')
     enabled = fields.Boolean(string='Allowed')
-    css_class = fields.Char(string='CSS class', default='zocial')
+    css_class = fields.Char(string='CSS class', default='fa fa-fw fa-sign-in text-primary')
     body = fields.Char(required=True)
     sequence = fields.Integer()
diff --git a/addons/auth_oauth/static/src/scss/auth_oauth.scss b/addons/auth_oauth/static/src/scss/auth_oauth.scss
new file mode 100644
index 00000000000..3225d521ace
--- /dev/null
+++ b/addons/auth_oauth/static/src/scss/auth_oauth.scss
@@ -0,0 +1,17 @@
+.o_auth_oauth_providers {
+    .fa-facebook-square {
+        color: #3b5998;
+    }
+
+    .fa-google-plus-square {
+        color: #de564a;
+    }
+
+    .o_custom_icon {
+        margin: 0 0.15em;
+        @include size(1em);
+        border: 3px solid #875A7B;
+        border-radius: 100%;
+        transform: translateY(2px);
+    }
+}
diff --git a/addons/auth_oauth/views/auth_oauth_templates.xml b/addons/auth_oauth/views/auth_oauth_templates.xml
index bdc5cf4f244..37fb23ecdd3 100644
--- a/addons/auth_oauth/views/auth_oauth_templates.xml
+++ b/addons/auth_oauth/views/auth_oauth_templates.xml
@@ -1,35 +1,47 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-        <template id="auth_oauth.providers" name="OAuth Providers">
-            <div t-foreach="providers" t-as="p">
-                <a t-att-href="p['auth_link']" class="btn btn-link" role="button">
-                    <i t-att-class="p['css_class']"/>
-                    <t t-esc="p['body']"/>
-                </a>
-            </div>
-        </template>
-
-        <template id="auth_oauth.login" inherit_id="web.login" name="OAuth Login buttons">
-            <xpath expr="//button[@type='submit']" position="before">
-                <div class="float-right">
-                    <t t-call="auth_oauth.providers"/>
-                </div>
+        <template id="assets_frontend" inherit_id="web.assets_frontend" name="OAuth Providers Assets">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" type="text/scss" href="/auth_oauth/static/src/scss/auth_oauth.scss"/>
             </xpath>
         </template>
 
-        <template id="auth_oauth.signup" inherit_id="auth_signup.signup" name="OAuth Signup buttons">
-            <xpath expr="//button[@type='submit']" position="before">
-                <div class="float-right">
-                    <t t-call="auth_oauth.providers"/>
+        <template id="providers" name="OAuth Providers">
+            <t t-if="len(providers) &gt; 0">
+                <em class="d-block text-center text-muted small my-3">- or -</em>
+                <div class="o_auth_oauth_providers list-group mt-1 mb-1 text-left">
+                    <a t-foreach="providers" t-as="p" class="list-group-item list-group-item-action py-2" t-att-href="p['auth_link']">
+                        <i t-att-class="p['css_class']"/>
+                        <t t-esc="p['body']"/>
+                    </a>
                 </div>
+            </t>
+        </template>
+
+        <template id="login" inherit_id="web.login" name="OAuth Login buttons">
+            <xpath expr="//form" position="before">
+                <t t-set="form_small" t-value="True"/>
+            </xpath>
+            <xpath expr="//div[hasclass('o_login_auth')]" position="inside">
+                <t t-call="auth_oauth.providers"/>
             </xpath>
         </template>
 
-        <template id="auth_oauth.reset_password" inherit_id="auth_signup.reset_password" name="OAuth Reset Password buttons">
-            <xpath expr="//button[@type='submit']" position="before">
-                <div class="float-right">
-                    <t t-call="auth_oauth.providers"/>
-                </div>
+        <template id="signup" inherit_id="auth_signup.signup" name="OAuth Signup buttons">
+            <xpath expr="//form" position="before">
+                <t t-set="form_small" t-value="True"/>
+            </xpath>
+            <xpath expr="//div[hasclass('o_login_auth')]" position="inside">
+                <t t-call="auth_oauth.providers"/>
+            </xpath>
+        </template>
+
+        <template id="reset_password" inherit_id="auth_signup.reset_password" name="OAuth Reset Password buttons">
+            <xpath expr="//form" position="before">
+                <t t-set="form_small" t-value="True"/>
+            </xpath>
+            <xpath expr="//div[hasclass('o_login_auth')]" position="inside">
+                <t t-call="auth_oauth.providers"/>
             </xpath>
         </template>
 </odoo>
diff --git a/addons/auth_signup/views/auth_signup_login_templates.xml b/addons/auth_signup/views/auth_signup_login_templates.xml
index 4a9abbd01e0..5b0621b8857 100644
--- a/addons/auth_signup/views/auth_signup_login_templates.xml
+++ b/addons/auth_signup/views/auth_signup_login_templates.xml
@@ -1,36 +1,38 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
         <template id="auth_signup.login" inherit_id="web.login" name="Sign up - Reset Password">
-            <xpath expr="//button[@type='submit']" position="before">
-                <a t-if="signup_enabled" t-attf-href="/web/signup?{{ keep_query() }}" class="btn btn-link float-right" role="button">Don't have an account?</a>
-                <a t-if="reset_password_enabled" t-attf-href="/web/reset_password?{{ keep_query() }}" class="btn btn-link float-right" role="button">Reset Password</a>
+            <xpath expr="//button[@type='submit']" position="after">
+                <div class="justify-content-between mt-2 d-flex small">
+                    <a t-if="signup_enabled" t-attf-href="/web/signup?{{ keep_query() }}">Don't have an account?</a>
+                    <a t-if="reset_password_enabled" t-attf-href="/web/reset_password?{{ keep_query() }}">Reset Password</a>
+                </div>
             </xpath>
         </template>
 
         <template id="auth_signup.fields" name="Auth Signup/ResetPassword form fields">
 
             <div class="form-group field-login">
-                <label for="login" class="col-form-label">Your Email</label>
-                <input type="text" name="login" t-att-value="login" id="login" class="form-control" autofocus="autofocus"
+                <label for="login">Your Email</label>
+                <input type="text" name="login" t-att-value="login" id="login" class="form-control form-control-sm" autofocus="autofocus"
                     autocapitalize="off" required="required" t-att-readonly="'readonly' if only_passwords else None"/>
             </div>
 
             <div class="form-group field-name">
-                <label for="name" class="col-form-label">Your Name</label>
-                <input type="text" name="name" t-att-value="name" id="name" class="form-control" placeholder="e.g. John Doe"
+                <label for="name">Your Name</label>
+                <input type="text" name="name" t-att-value="name" id="name" class="form-control form-control-sm" placeholder="e.g. John Doe"
                     required="required" t-att-readonly="'readonly' if only_passwords else None"
                     t-att-autofocus="'autofocus' if login and not only_passwords else None" />
             </div>
 
-            <div class="form-group field-password">
-                <label for="password" class="col-form-label">Password</label>
-                <input type="password" name="password" id="password" class="form-control"
+            <div class="form-group field-password pt-2">
+                <label for="password">Password</label>
+                <input type="password" name="password" id="password" class="form-control form-control-sm"
                     required="required" t-att-autofocus="'autofocus' if only_passwords else None"/>
             </div>
 
             <div class="form-group field-confirm_password">
-                <label for="confirm_password" class="col-form-label">Confirm Password</label>
-                <input type="password" name="confirm_password" id="confirm_password" class="form-control" required="required"/>
+                <label for="confirm_password">Confirm Password</label>
+                <input type="password" name="confirm_password" id="confirm_password" class="form-control form-control-sm" required="required"/>
             </div>
         </template>
 
@@ -48,11 +50,11 @@
                     </p>
                     <input type="hidden" name="redirect" t-att-value="redirect"/>
                     <input type="hidden" name="token" t-att-value="token"/>
-                    <div class="clearfix oe_login_buttons">
-                        <a t-attf-href="/web/login?{{ keep_query() }}" class="btn btn-link float-right" role="button">Already have an account?</a>
-                        <button type="submit" class="btn btn-primary float-left o_signup_btn"> Sign up</button>
+                    <div class="text-center oe_login_buttons pt-3">
+                        <button type="submit" class="btn btn-primary btn-block"> Sign up</button>
+                        <a t-attf-href="/web/login?{{ keep_query() }}" class="btn btn-link btn-sm" role="button">Already have an account?</a>
+                        <div class="o_login_auth"/>
                     </div>
-
                 </form>
             </t>
         </template>
@@ -89,9 +91,12 @@
                     <input type="hidden" name="redirect" t-att-value="redirect"/>
                     <input type="hidden" name="token" t-att-value="token"/>
                     <div class="clearfix oe_login_buttons">
-                        <a t-if="not token" t-attf-href="/web/login?{{ keep_query() }}" class="btn btn-link float-right" role="button">Back to Login</a>
-                        <a t-if="invalid_token" href="/web/login" class="btn btn-link float-right" role="button">Back to Login</a>
-                        <button type="submit" class="btn btn-primary float-left">Confirm</button>
+                        <div class="d-flex justify-content-between align-items-center small">
+                            <button type="submit" class="btn btn-primary btn-sm">Confirm</button>
+                            <a t-if="not token" t-attf-href="/web/login?{{ keep_query() }}">Back to Login</a>
+                            <a t-if="invalid_token" href="/web/login">Back to Login</a>
+                        </div>
+                        <div class="o_login_auth"/>
                     </div>
 
                 </form>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 76ea7c7c153..8b210c29c52 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -352,19 +352,21 @@
                 <t t-call-assets="web.assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_frontend" t-css="false"/>
             </t>
-            <t t-set="body_classname" t-value="'container'"/>
+            <t t-set="body_classname" t-value="'bg-100'"/>
 
-            <div class="row">
-                <div class="col-lg-6 offset-lg-3 o_database_list">
-                    <div class="text-center">
-                        <img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}" alt="Logo"/>
-                    </div>
-                    <t t-raw="0"/>
-                    <div class="text-center" t-if="not disable_footer">
-                        <t t-if="not disable_database_manager">
-                            <a class="" href="/web/database/manager">Manage Databases</a> |
-                        </t>
-                        <a href="https://www.odoo.com?utm_source=db&amp;utm_medium=auth" target="_blank">Powered by <span>Odoo</span></a>
+            <div class="container mb-5 pb-5">
+                <div t-attf-class="card border-0 mx-auto mt-5 bg-100 {{login_card_classes}} o_database_list" style="max-width: 300px;">
+                    <div class="card-body">
+                        <div t-attf-class="text-center pb-3 border-bottom {{'mb-3' if form_small else 'mb-4'}}">
+                            <img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}" alt="Logo" style="max-height:120px; max-width: 100%; width:auto"/>
+                        </div>
+                        <t t-raw="0"/>
+                        <div class="text-center small mt-4 pt-3 border-top" t-if="not disable_footer">
+                            <t t-if="not disable_database_manager">
+                                <a class="border-right pr-2 mr-1" href="/web/database/manager">Manage Databases</a>
+                            </t>
+                            <a href="https://www.odoo.com?utm_source=db&amp;utm_medium=auth" target="_blank">Powered by <span>Odoo</span></a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -378,8 +380,8 @@
 
                 <div class="form-group field-db" t-if="databases and len(databases) &gt; 1">
                     <label for="db" class="col-form-label">Database</label>
-                    <div class="input-group">
-                        <input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/>
+                    <div t-attf-class="input-group {{'input-group-sm' if form_small else ''}}">
+                        <input type="text" name="db" t-att-value="request.db" id="db" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" readonly="readonly"/>
                         <span class="input-group-append">
                             <a role="button" href="/web/database/selector" class="btn btn-secondary">Select <i class="fa fa-database" role="img" aria-label="Database" title="Database"></i></a>
                         </span>
@@ -387,13 +389,13 @@
                 </div>
 
                 <div class="form-group field-login">
-                    <label for="login" class="col-form-label">Email</label>
-                    <input type="text" name="login" t-att-value="login" id="login" class="form-control" required="required" autofocus="autofocus" autocapitalize="off"/>
+                    <label for="login">Email</label>
+                    <input type="text" placeholder="Email" name="login" t-att-value="login" id="login" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autofocus="autofocus" autocapitalize="off"/>
                 </div>
 
                 <div class="form-group field-password">
-                    <label for="password" class="col-form-label">Password</label>
-                    <input type="password" name="password" id="password" class="form-control" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
+                    <label for="password">Password</label>
+                    <input type="password" placeholder="Password" name="password" id="password" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                 </div>
 
                 <p class="alert alert-danger" t-if="error" role="alert">
@@ -404,8 +406,9 @@
                 </p>
 
                 <input type="hidden" name="redirect" t-att-value="redirect"/>
-                <div class="clearfix oe_login_buttons">
-                    <button type="submit" class="btn btn-primary">Log in</button>
+                <div t-attf-class="clearfix oe_login_buttons text-center mb-1 {{'pt-2' if form_small else 'pt-3'}}">
+                    <button type="submit" class="btn btn-primary btn-block">Log in</button>
+                    <div class="o_login_auth"/>
                 </div>
             </form>
         </t>