diff --git a/website/assets/styles/pages/customers/dashboard.less b/website/assets/styles/pages/customers/dashboard.less
index 55ebb13a61..cd46a5b186 100644
--- a/website/assets/styles/pages/customers/dashboard.less
+++ b/website/assets/styles/pages/customers/dashboard.less
@@ -155,7 +155,7 @@
 
   [purpose='billing-card'] {
     padding: 40px;
-    min-height: 312px;
+    min-height: 332px;
     p {
       margin-block-end: 4px;
     }
@@ -180,7 +180,7 @@
 
   [purpose='details-card'] {
     padding: 40px;
-    min-height: 312px;
+    min-height: 332px;
     hr {
       color: #E2E4EA;
     }
diff --git a/website/assets/styles/pages/customers/new-license.less b/website/assets/styles/pages/customers/new-license.less
index 35c9f419fd..00f9e151be 100644
--- a/website/assets/styles/pages/customers/new-license.less
+++ b/website/assets/styles/pages/customers/new-license.less
@@ -32,19 +32,23 @@
   [purpose='cloud-error'] {
     max-width: fit-content;
   }
-
+  [purpose='page-heading'] {
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+  }
   [purpose='customer-portal-form'] {
+    max-width: 560px;
+    border-radius: 16px;
+    padding: 30px;
     label {
-      font-weight: 400;
+      font-weight: 700;
       margin-bottom: 4px;
     }
     .form-control {
       height: 40px;
       border-radius: 6px;
     }
-    .card {
-      border-radius: 6px;
-    }
     .card-body {
       padding: 2em;
     }
@@ -54,10 +58,12 @@
 
     margin-left: auto;
     margin-right: auto;
-    border-radius: 4px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    border-radius: 8px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    height: 48px;
     display: flex;
+    align-items: center;
     span {
       display: inline;
       margin-left: auto;
@@ -65,9 +71,11 @@
       font-size: 16px;
       line-height: 20px;
       text-align: center;
-      font-weight: 400;
+      font-weight: 700;
     }
-
+  }
+  [purpose='order-form-line-break'] {
+    display: none;
   }
 
   [purpose='features-list'] {
@@ -92,16 +100,31 @@
 
   @media (max-width: 768px) {
     padding-top: 60px;
+    [purpose='customer-portal-form'] {
+      max-width: unset;
+    }
   }
 
   @media (max-width: 576px) {
     padding-top: 40px;
+    [purpose='quote-input'] {
+      max-width: unset;
+    }
+    [purpose='page-heading'] {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
     [purpose='customer-portal-form'] {
       .card-body {
         padding: 1.5em 1em;
       }
     }
   }
+  @media (max-width: 400px) {
+    [purpose='order-form-line-break'] {
+      display: block;
+    }
+  }
 
 
 
diff --git a/website/assets/styles/pages/entrance/login.less b/website/assets/styles/pages/entrance/login.less
index 44993e47e4..27e96798cf 100644
--- a/website/assets/styles/pages/entrance/login.less
+++ b/website/assets/styles/pages/entrance/login.less
@@ -10,15 +10,23 @@
     color: @core-vibrant-blue;
   }
   [purpose='customer-login-container'] {
-    max-width: 800px;
+    max-width: 560px;
   }
   [purpose='login-container'] {
-    max-width: 600px;
+    max-width: 560px;
     [purpose='customer-portal-form'] {
-      max-width: 480px;
+      max-width: 560px;
     }
   }
+  [purpose='page-heading'] {
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+  }
   [purpose='customer-portal-form'] {
+    max-width: 560px;
+    border-radius: 16px;
+    padding: 30px;
     label {
       font-weight: 700;
       margin-bottom: 4px;
@@ -27,21 +35,21 @@
       height: 40px;
       border-radius: 6px;
     }
-    .card {
-      border-radius: 6px;
-    }
     .card-body {
       padding: 2em;
     }
   }
 
   [purpose='submit-button'] {
+
     margin-left: auto;
     margin-right: auto;
-    border-radius: 4px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    border-radius: 8px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    height: 48px;
     display: flex;
+    align-items: center;
     span {
       display: inline;
       margin-left: auto;
@@ -49,9 +57,8 @@
       font-size: 16px;
       line-height: 20px;
       text-align: center;
-      font-weight: 400;
+      font-weight: 700;
     }
-
   }
 
   [purpose='features-list'] {
@@ -77,10 +84,17 @@
 
   @media (max-width: 768px) {
     padding-top: 60px;
+    [purpose='customer-portal-form'] {
+      max-width: unset;
+    }
   }
 
   @media (max-width: 576px) {
     padding-top: 40px;
+    [purpose='page-heading'] {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
     [purpose='customer-portal-form'] {
       .card-body {
         padding: 1em;
diff --git a/website/assets/styles/pages/entrance/signup.less b/website/assets/styles/pages/entrance/signup.less
index 826cd63f75..738e612884 100644
--- a/website/assets/styles/pages/entrance/signup.less
+++ b/website/assets/styles/pages/entrance/signup.less
@@ -7,8 +7,15 @@
   a {
     color: @core-vibrant-blue;
   }
+  [purpose='page-heading'] {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
 
   [purpose='customer-portal-form'] {
+    max-width: 560px;
+    border-radius: 16px;
+    padding: 30px;
     label {
       font-weight: 700;
       margin-bottom: 4px;
@@ -17,9 +24,6 @@
       height: 40px;
       border-radius: 6px;
     }
-    .card {
-      border-radius: 6px;
-    }
     .card-body {
       padding: 2em;
     }
@@ -29,10 +33,12 @@
 
     margin-left: auto;
     margin-right: auto;
-    border-radius: 4px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    border-radius: 8px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    height: 48px;
     display: flex;
+    align-items: center;
     span {
       display: inline;
       margin-left: auto;
@@ -40,9 +46,8 @@
       font-size: 16px;
       line-height: 20px;
       text-align: center;
-      font-weight: 400;
+      font-weight: 700;
     }
-
   }
 
   [purpose='features-list'] {
@@ -68,10 +73,17 @@
 
   @media (max-width: 768px) {
     padding-top: 60px;
+    [purpose='customer-portal-form'] {
+      max-width: unset;
+    }
   }
 
   @media (max-width: 576px) {
     padding-top: 40px;
+    [purpose='page-heading'] {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
     [purpose='customer-portal-form'] {
       .card-body {
         padding: 1.5em 1em;
diff --git a/website/views/pages/customers/dashboard.ejs b/website/views/pages/customers/dashboard.ejs
index a173bceac8..26631ccbec 100644
--- a/website/views/pages/customers/dashboard.ejs
+++ b/website/views/pages/customers/dashboard.ejs
@@ -27,7 +27,7 @@
         <div class="row">
           <div class="col-12 col-md-6 col-lg-2">
             <strong>Item</strong>
-            <p>Fleet Premium</p>
+            <p>Fleet Premium (self-hosted)</p>
           </div>
           <div class="col-12 col-md-6 col-lg-2 pt-3 pt-md-0">
             <strong>Cost</strong>
diff --git a/website/views/pages/customers/new-license.ejs b/website/views/pages/customers/new-license.ejs
index c80abb217d..2349f02ec4 100644
--- a/website/views/pages/customers/new-license.ejs
+++ b/website/views/pages/customers/new-license.ejs
@@ -1,100 +1,90 @@
 
 <div id="new-license" v-cloak>
-  <div style="max-width: 800px;" class="container-fluid pb-5 px-lg-0 px-3" v-if="!showSuccessMessage">
-    <h1>Welcome to Fleet Premium</h1>
-    <p class="pb-2">We just need a few details in order to get you a Fleet Premium license key.</p>
-    <div class="d-flex flex-row justify-content-between mx-auto">
+  <div style="max-width: 560px;" class="container-fluid pb-5 px-lg-0 px-3" v-if="!showSuccessMessage">
+    <div purpose="page-heading">
+      <h1>Welcome to Fleet Premium</h1>
+      <p class="pb-2">We just need a few details in order to get you a self-hosted Fleet Premium license key.</p>
+    </div>
+    <div purpose="customer-portal-form" class="card card-body">
+      <ajax-form action="createQuote" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="quoteFormRules" @submitted="submittedQuoteForm($event)">
+        <div class="d-flex flex-column flex-sm-row">
+          <div class="form-group flex-grow-1 col-12 col-sm-6 order-first px-0 mb-3 mb-sm-5">
+            <label for="numberOfHosts">Total number of devices</label>
+            <input class="form-control" min="1" purpose="quote-input" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : formErrors.numberOfHosts < 1 ]" focus-first v-model.trim="formData.numberOfHosts" v-if="!numberOfHostsQuoted">
+            <div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
+            <span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 10px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
+          </div>
 
-      <div purpose="customer-portal-form" class="order-first flex-grow-1">
-        <div class="card card-body">
-          <ajax-form action="createQuote" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="quoteFormRules" @submitted="submittedQuoteForm($event)">
-            <div class="d-flex flex-column flex-sm-row">
-              <div class="form-group flex-grow-1 col-12 col-sm-6 order-first px-0 mb-3 mb-sm-5">
-                <label for="numberOfHosts">Total number of devices</label>
-                <input class="form-control" min="1" purpose="quote-input" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : formErrors.numberOfHosts < 1 ]" focus-first v-model.trim="formData.numberOfHosts" v-if="!numberOfHostsQuoted">
-                <div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
-                <span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 10px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
-              </div>
+          <div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4">
+            <p class="small">
+              <strong class="pr-1" style="font-size: 18px; color: #192147">$7.00</strong>/month/device<br>(Billed annually at $84/device)
+            </p>
+          </div>
 
-              <div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4">
-                <p class="small">
-                  <strong class="pr-1" style="font-size: 18px; color: #192147">$7.00</strong>/month/device<br>(Billed annually at $84/device)
-                </p>
-              </div>
-
-            </div>
-            <cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
-            <div class="mt-2 pt-3 pb-3 border-top d-flex flex-row" v-if="showQuotedPrice">
-              <div class="order-first">
-                <strong>Order total</strong>
-              </div>
-              <div class="ml-auto">
-                <strong>${{(!showQuotedPrice || _.isNaN(formData.numberOfHosts * 7.00 * 12)) ? quotedPrice : formData.numberOfHosts * 7.00 * 12}}.00 /year</strong>
-              </div>
-            </div>
-            <div  :class="[showBillingForm ? 'pt-2' : '' ]" v-if="!showBillingForm">
-              <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-info" v-if="!numberOfHostsQuoted">Continue</ajax-button>
-              <ajax-button style="height: 40px;" spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-info" @click="clickScheduleDemo" v-if=" showQuotedPrice && numberOfHostsQuoted > 1000">Talk to an expert</ajax-button>
-              <ajax-button style="height: 40px;" spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-info" v-if="showQuotedPrice && numberOfHostsQuoted <= 1000">Continue</ajax-button>
-            </div>
-          </ajax-form>
         </div>
-        <div class="card card-body mt-3" v-if="showBillingForm">
-          <h3 class="pb-3">Billing information</h3>
-          <ajax-form action="saveBillingInfoAndSubscribe" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="billingFormRules" @submitted="submittedPaymentForm()" v-if="!cloudError || cloudError === 'couldNotSaveBillingInfo' || cloudError === 'cardVerificationRequired'">
-            <div class="form-group">
-              <label for="card">Billing Card</label>
-              <stripe-card-element class="mb-3" id="card" busy.sync="syncing" :is-errored.sync="formErrors.paymentSource" :stripe-publishable-key="stripePublishableKey"
-              v-model="formData.paymentSource" key="billing-card" ref="paymentcardref"></stripe-card-element>
-            </div>
-            <div v-if="showAdditionalBillingFormInputs">
+        <cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
+        <div class="mt-2 pt-3 pb-3 border-top d-flex flex-column" v-if="showQuotedPrice && formData.numberOfHosts">
+          <div class="pb-2">
+            <strong>Order total</strong>
+          </div>
+          <div class="d-flex flex-row justify-content-between">
+            <p class="mb-0">Fleet Premium <br purpose="order-form-line-break">(self-hosted)</p>
+          <div class="ml-auto text-right">
+            <strong>${{(!showQuotedPrice || _.isNaN(formData.numberOfHosts * 7.00 * 12)) ? quotedPrice : formData.numberOfHosts * 7.00 * 12}}.00 <br purpose="order-form-line-break">/year</strong>
+          </div>
+          </div>
+        </div>
+        <div  :class="[showBillingForm ? 'pt-2' : '' ]" v-if="!showBillingForm">
+          <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-primary" v-if="!numberOfHostsQuoted">Continue</ajax-button>
+          <ajax-button spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-primary" @click="clickScheduleDemo" v-if=" showQuotedPrice && numberOfHostsQuoted > 1000">Talk to an expert</ajax-button>
+          <ajax-button spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-primary" v-if="showQuotedPrice && numberOfHostsQuoted <= 1000">Continue</ajax-button>
+        </div>
+      </ajax-form>
+    </div>
+    <div class="card card-body mt-3" v-if="showBillingForm">
+      <h3 class="pb-3">Billing information</h3>
+      <ajax-form action="saveBillingInfoAndSubscribe" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="billingFormRules" @submitted="submittedPaymentForm()" v-if="!cloudError || cloudError === 'couldNotSaveBillingInfo' || cloudError === 'cardVerificationRequired'">
+        <div class="form-group">
+          <label for="card">Billing Card</label>
+          <stripe-card-element class="mb-3" id="card" busy.sync="syncing" :is-errored.sync="formErrors.paymentSource" :stripe-publishable-key="stripePublishableKey"
+          v-model="formData.paymentSource" key="billing-card" ref="paymentcardref"></stripe-card-element>
+        </div>
+        <div v-if="showAdditionalBillingFormInputs">
+          <div class="form-group">
+            <label for="organization">Organization</label>
+            <input class="form-control" id="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : formErrors.organization === '' ]" v-model.trim="formData.organization">
+            <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
+          </div>
+          <div class="row">
+            <div class="col-12 col-sm-6 pr-sm-2">
               <div class="form-group">
-                <label for="organization">Organization</label>
-                <input class="form-control" id="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : formErrors.organization === '' ]" v-model.trim="formData.organization">
-                <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
-              </div>
-              <div class="row">
-                <div class="col-12 col-sm-6 pr-sm-2">
-                  <div class="form-group">
-                    <label for="first-name">First name</label>
-                    <input class="form-control" id="first-name" type="text"  :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name">
-                    <div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
-                  </div>
-                </div>
-                <div class="col-12 col-sm-6 pl-sm-2">
-                  <div class="form-group">
-                    <label for="last-name">Last name</label>
-                    <input class="form-control" id="last-name" type="text"  :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name">
-                    <div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
-                  </div>
-                </div>
+                <label for="first-name">First name</label>
+                <input class="form-control" id="first-name" type="text"  :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name">
+                <div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
               </div>
             </div>
-            <cloud-error purpose="cloud-error" v-if="cloudError === 'couldNotSaveBillingInfo'">
-              <p>The billing card provided could not be used. Please use another card or <a href="/contact" target="_blank">contact support</a>.</p>
-            </cloud-error>
-            <cloud-error purpose="cloud-error" v-else-if="cloudError === 'cardVerificationRequired'">
-              <p>The billing card provided could not be used without additional verification. Please use another card or <a href="/contact" target="_blank">contact support</a> to complete your order.</p>
-            </cloud-error>
-            <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4">Get license key</ajax-button>
-          </ajax-form>
-          <cloud-error purpose="cloud-error" v-else-if="cloudError">
-            <p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>
-            <p class="mb-2">We're sorry that this happened. A human has been informed of this error and is looking into it.</p>
-            <p>Feel free to <a href="/customers/new-license">reload the page</a> and try again. A team member at Fleet will investigate and correct duplicate charges, if any occurred.</p>
-          </cloud-error>
+            <div class="col-12 col-sm-6 pl-sm-2">
+              <div class="form-group">
+                <label for="last-name">Last name</label>
+                <input class="form-control" id="last-name" type="text"  :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name">
+                <div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-
-      <div purpose="features-list" class="order-last d-none d-md-block">
-        <p><strong>Fleet Premium includes:</strong></p>
-        <ul>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
-        </ul>
-      </div>
+        <cloud-error purpose="cloud-error" v-if="cloudError === 'couldNotSaveBillingInfo'">
+          <p>The billing card provided could not be used. Please use another card or <a href="/contact" target="_blank">contact support</a>.</p>
+        </cloud-error>
+        <cloud-error purpose="cloud-error" v-else-if="cloudError === 'cardVerificationRequired'">
+          <p>The billing card provided could not be used without additional verification. Please use another card or <a href="/contact" target="_blank">contact support</a> to complete your order.</p>
+        </cloud-error>
+        <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4">Get license key</ajax-button>
+      </ajax-form>
+      <cloud-error purpose="cloud-error" v-else-if="cloudError">
+        <p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>
+        <p class="mb-2">We're sorry that this happened. A human has been informed of this error and is looking into it.</p>
+        <p>Feel free to <a href="/customers/new-license">reload the page</a> and try again. A team member at Fleet will investigate and correct duplicate charges, if any occurred.</p>
+      </cloud-error>
     </div>
   </div>
 
@@ -102,7 +92,7 @@
     <h1>Thank you, your order is complete.</h1>
     <p class="mb-4 font-weight-bold">Welcome to your admin dashboard.</p>
     <p>From here you can access your license key, change your details and update your payment method.</p>
-    <ajax-button style="height: 40px; font-size: 14px; line-height: 24px; width: 200px" type="submit" purpose="submit-button" :syncing="syncing" spinner="true" class="btn btn-block btn-lg btn-info mx-auto" @click="clickGoToDashboard()">Contine to dashboard</ajax-button>
+    <ajax-button style="height: 40px; font-size: 14px; line-height: 24px; width: 200px" type="submit" purpose="submit-button" :syncing="syncing" spinner="true" class="btn btn-block btn-lg btn-primary mx-auto" @click="clickGoToDashboard()">Contine to dashboard</ajax-button>
   </div>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
diff --git a/website/views/pages/entrance/login.ejs b/website/views/pages/entrance/login.ejs
index 741417b732..44896cf719 100644
--- a/website/views/pages/entrance/login.ejs
+++ b/website/views/pages/entrance/login.ejs
@@ -1,49 +1,34 @@
 <div id="login" v-cloak>
   <div :purpose="[showCustomerLogin ? 'customer-login-container' : 'login-container']" class="container-fluid pb-5 px-lg-0 px-3">
-    <div v-if="showCustomerLogin">
-      <h1>Welcome to Fleet Premium</h1>
+    <div purpose="page-heading" v-if="showCustomerLogin">
+      <h1>Welcome to Premium</h1>
       <p class="pb-2">Sign in to manage your Fleet Premium subscription.</p>
     </div>
-    <div v-else>
+    <div purpose="page-heading" v-else>
       <h1>Welcome to Fleet</h1>
       <p class="pb-2">Sign in to your Fleet account.</p>
     </div>
-    <div purpose="customer-portal-form" class="d-flex flex-row justify-content-between">
-      <div class="order-first flex-grow-1">
-        <div class="card card-body">
-          <ajax-form class="customers-login" action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
-            <div class="form-group">
-              <label for="email">Email</label>
-              <span style="float: right" class="text-right small" v-if="showCustomerLogin"><a href="/customers/register">Create an account</a></span>
-              <input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
-              <div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
-            </div>
-            <div class="form-group">
-              <label for="password">Password</label>
-              <input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
-              <div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
-            </div>
-            <cloud-error v-if="cloudError === 'noUser'">The email address provided doesn't match an existing account. Create an account <a href="/customers/register">here</a>.</cloud-error>
-            <cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
-            <cloud-error v-else-if="cloudError"></cloud-error>
-            <div class="pb-3">
-              <ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-info mt-4 btn-lg btn-block">Sign in</ajax-button>
-            </div>
-          </ajax-form>
-          <span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
+    <div purpose="customer-portal-form"  class="card card-body">
+      <ajax-form class="customers-login" action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
+        <div class="form-group">
+          <label for="email">Email</label>
+          <span style="float: right" class="text-right small" v-if="showCustomerLogin"><a href="/customers/register">Create an account</a></span>
+          <input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
+          <div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
         </div>
-      </div>
-
-      <div class="order-last d-none d-md-block" purpose="features-list" v-if="showCustomerLogin">
-        <p><strong>Fleet Premium includes:</strong></p>
-        <ul>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
-          <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
-        </ul>
-      </div>
-
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
+          <div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
+        </div>
+        <cloud-error v-if="cloudError === 'noUser'">The email address provided doesn't match an existing account. Create an account <a href="/customers/register">here</a>.</cloud-error>
+        <cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
+        <cloud-error v-else-if="cloudError"></cloud-error>
+        <div class="pb-3">
+          <ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-primary mt-4 btn-lg btn-block">Sign in</ajax-button>
+        </div>
+      </ajax-form>
+      <span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
     </div>
   </div>
 </div>
diff --git a/website/views/pages/entrance/signup.ejs b/website/views/pages/entrance/signup.ejs
index e2e7e262a4..7a6841f989 100644
--- a/website/views/pages/entrance/signup.ejs
+++ b/website/views/pages/entrance/signup.ejs
@@ -1,72 +1,57 @@
 <div id="signup" v-cloak>
-  <div style="max-width: 800px;" class="container-fluid pb-5 px-lg-0 px-3">
-    <h1>Welcome to Fleet Premium</h1>
-    <p class="pb-2">We just need a few details in order to get you a Fleet Premium license key.</p>
-    <div class="mx-auto">
-      <div purpose="customer-portal-form" class="d-flex flex-row justify-content-between">
-        <div class="order-first flex-grow-1">
-          <div class="card card-body">
-            <ajax-form action="signup" class="self-service-register" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedSignUpForm()">
+  <div style="max-width: 560px;" class="container-fluid pb-5 px-lg-0 px-3">
+    <div purpose="page-heading">
+      <h1 class="text-center">Welcome to Premium</h1>
+      <p class="text-center pb-2">We just need a few details in order to get you a self-hosted Fleet Premium license key.</p>
+    </div>
+    <div purpose="customer-portal-form" class="card card-body">
+      <ajax-form action="signup" class="self-service-register" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedSignUpForm()">
+        <div class="form-group">
+          <label for="email-address">Email</label>
+          <span style="float: right" class="text-right small"><a href="/customers/login">I have an account</a></span>
+          <input class="form-control" id="email-address"  :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
+          <div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
+        </div>
+        <div v-show="formData.emailAddress || showFullForm">
+          <div class="form-group">
+            <label for="password">Choose a password</label>
+            <input class="form-control" id="password" type="password"  :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="new-password" @input="typeClearOneFormError('password')">
+            <div class="invalid-feedback" v-if="formErrors.password === 'minLength'">Password too short.</div>
+            <div class="invalid-feedback" v-if="formErrors.password === 'required'">Please enter a password.</div>
+            <p class="mt-2"> Minimum length is 8 characters</p>
+          </div>
+          <div class="form-group">
+            <label for="organization">Organization</label>
+            <input class="form-control" id="organization" type="text"  :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" @input="typeClearOneFormError('organization')">
+            <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
+          </div>
+          <div class="row">
+            <div class="col-12 col-sm-6 pr-sm-2">
               <div class="form-group">
-                <label for="email-address">Email</label>
-                <span style="float: right" class="text-right small"><a href="/customers/login">I have an account</a></span>
-                <input class="form-control" id="email-address"  :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
-                <div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
+                <label for="first-name">First name</label>
+                <input class="form-control" id="first-name" type="text"  :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name" @input="typeClearOneFormError('firstName')">
+                <div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
               </div>
-              <div v-show="formData.emailAddress || showFullForm">
-                <div class="form-group">
-                  <label for="password">Choose a password</label>
-                  <input class="form-control" id="password" type="password"  :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="new-password" @input="typeClearOneFormError('password')">
-                  <div class="invalid-feedback" v-if="formErrors.password === 'minLength'">Password too short.</div>
-                  <div class="invalid-feedback" v-if="formErrors.password === 'required'">Please enter a password.</div>
-                  <p class="mt-2"> Minimum length is 8 characters</p>
-                </div>
-                <div class="form-group">
-                  <label for="organization">Organization</label>
-                  <input class="form-control" id="organization" type="text"  :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" @input="typeClearOneFormError('organization')">
-                  <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
-                </div>
-                <div class="row">
-                  <div class="col-12 col-sm-6 pr-sm-2">
-                    <div class="form-group">
-                      <label for="first-name">First name</label>
-                      <input class="form-control" id="first-name" type="text"  :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name" @input="typeClearOneFormError('firstName')">
-                      <div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
-                    </div>
-                  </div>
-                  <div class="col-12 col-sm-6 pl-sm-2">
-                    <div class="form-group">
-                      <label for="last-name">Last name</label>
-                      <input class="form-control" id="last-name" type="text"  :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name" @input="typeClearOneFormError('lastName')">
-                      <div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
-                    </div>
-                  </div>
-                </div>
+            </div>
+            <div class="col-12 col-sm-6 pl-sm-2">
+              <div class="form-group">
+                <label for="last-name">Last name</label>
+                <input class="form-control" id="last-name" type="text"  :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name" @input="typeClearOneFormError('lastName')">
+                <div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
               </div>
-              <cloud-error v-if="cloudError==='emailAlreadyInUse'">
-                <p>This email is already linked to a Fleet account.<br> Please <a href="/customers/login">sign in</a> with your email and password.</p>
-              </cloud-error>
-              <cloud-error purpose="cloud-error" v-else-if="cloudError"></cloud-error>
-              <p class="small">By signing up you agree to our <a href="/legal/privacy">Privacy Policy</a> and <a href="/terms">Terms of Service</a>.</p>
-              <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4" v-if="!cloudError">Agree and continue</ajax-button>
-              <ajax-button style="height: 40px;" purpose="submit-button" type="button" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4" v-if="cloudError" @click="clickClearFormFields()">Reset form and try again</ajax-button>
-            </ajax-form>
+            </div>
           </div>
         </div>
-
-        <div class="order-last d-none d-md-block" purpose="features-list">
-          <p><strong>Fleet Premium includes:</strong></p>
-          <ul>
-            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
-            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
-            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
-            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
-          </ul>
-        </div>
-
-      </div>
-
+        <cloud-error v-if="cloudError==='emailAlreadyInUse'">
+          <p>This email is already linked to a Fleet account.<br> Please <a href="/customers/login">sign in</a> with your email and password.</p>
+        </cloud-error>
+        <cloud-error purpose="cloud-error" v-else-if="cloudError"></cloud-error>
+        <p class="small">By signing up you agree to our <a href="/legal/privacy">privacy policy</a> and <a href="/terms">terms of service</a>.</p>
+        <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4" v-if="!cloudError">Agree and continue</ajax-button>
+        <ajax-button purpose="submit-button" type="button" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4" v-if="cloudError" @click="clickClearFormFields()">Reset form and try again</ajax-button>
+      </ajax-form>
     </div>
+
   </div>
 </div>
 <%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>