diff --git a/src/_style.scss b/src/_style.scss
index ef37356a..5db65fe9 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -91,12 +91,6 @@ $apple-focus-black: $apple-black;
   border-color: $facebook-blue;
   background-color: $facebook-blue;
 
-  .icon-image {
-    margin-left: 2px;
-    width: 20px;
-    height: 20px;
-  }
-
   &:hover,
   &:focus {
     background-color: $facebook-focus-blue;
@@ -255,6 +249,10 @@ $apple-focus-black: $apple-black;
   margin-top: 20px;
 }
 
+.mb-20 {
+  margin-bottom: 20px;
+}
+
 .pt-10 {
   padding-top: 10px;
 }
diff --git a/src/common-components/InstitutionLogistration.jsx b/src/common-components/InstitutionLogistration.jsx
index 64fe87ed..042b4b7f 100644
--- a/src/common-components/InstitutionLogistration.jsx
+++ b/src/common-components/InstitutionLogistration.jsx
@@ -10,7 +10,7 @@ export const RenderInstitutionButton = props => {
   if (secondaryProviders !== undefined && secondaryProviders.length > 0) {
     return (
       <Button
-        className="mt-2"
+        className="w-auto mb-20"
         block
         variant="outline-primary"
         onClick={onSubmitHandler}
diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index 72bcdfec..53f4a3a7 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -27,12 +27,10 @@ function SocialAuthProviders(props) {
       onClick={handleSubmit}
     >
       {provider.iconImage ? (
-        <>
-          <div aria-hidden="true">
-            <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
-          </div>
+        <div className="mx-auto" aria-hidden="true">
+          <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
           <span className="pl-2" aria-hidden="true">{provider.name}</span>
-        </>
+        </div>
       )
         : (
           <>
diff --git a/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap b/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
index 53ebe2a2..6d536496 100644
--- a/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
+++ b/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
@@ -88,18 +88,19 @@ exports[`SocialAuthProviders should match social auth provider with iconImage sn
 >
   <div
     aria-hidden="true"
+    className="mx-auto"
   >
     <img
       alt="icon Apple"
       className="icon-image"
       src="https://edx.devstack.lms/logo.png"
     />
+    <span
+      aria-hidden="true"
+      className="pl-2"
+    >
+      Apple
+    </span>
   </div>
-  <span
-    aria-hidden="true"
-    className="pl-2"
-  >
-    Apple
-  </span>
 </button>
 `;
diff --git a/src/login/LoginHelpLinks.jsx b/src/login/LoginHelpLinks.jsx
index 98c6bc2f..df5fa2d9 100644
--- a/src/login/LoginHelpLinks.jsx
+++ b/src/login/LoginHelpLinks.jsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
+import { Hyperlink } from '@edx/paragon';
 
 import SwitchContent from '../common-components/SwitchContent';
 import {
@@ -28,23 +29,26 @@ const LoginHelpLinks = (props) => {
   };
 
   const forgotPasswordLink = () => (
-
-    <a className="field-link" href={RESET_PAGE} onClick={handleForgotPasswordLinkClickEvent}>
+    <Hyperlink
+      className="field-link"
+      destination={RESET_PAGE}
+      onClick={handleForgotPasswordLinkClickEvent}
+    >
       {intl.formatMessage(messages['forgot.password.link'])}
-    </a>
+    </Hyperlink>
   );
 
   const signUpLink = () => (
-    <a className="field-link" href={REGISTER_PAGE}>
+    <Hyperlink className="field-link" destination={REGISTER_PAGE}>
       {intl.formatMessage(messages['register.link'])}
-    </a>
+    </Hyperlink>
   );
 
   const loginIssueSupportURL = (config) => (config.LOGIN_ISSUE_SUPPORT_LINK
     ? (
-      <a className="field-link" href={config.LOGIN_ISSUE_SUPPORT_LINK}>
+      <Hyperlink className="field-link" destination={config.LOGIN_ISSUE_SUPPORT_LINK}>
         {intl.formatMessage(messages['other.sign.in.issues'])}
-      </a>
+      </Hyperlink>
     )
     : null);
 
diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx
index 06f6a6db..b403af3c 100644
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -199,15 +199,17 @@ class LoginPage extends React.Component {
                   </Hyperlink>
                 </p>
               </div>
-              <h2 className="text-left mt-2 mb-3">
+              <hr className="mt-0 border-gray-200" />
+              <h3 className="text-left mt-2 mb-3">
                 {intl.formatMessage(messages['sign.in.heading'])}
-              </h2>
+              </h3>
               <Form className="m-0">
                 <ValidationFormGroup
                   for="email"
                   invalid={this.state.errors.email !== ''}
                   invalidMessage={intl.formatMessage(messages['email.format.validation.message'])}
                   className="mb-0 w-100"
+                  helpText={intl.formatMessage(messages['email.help.message'])}
                 >
                   <Form.Label htmlFor="loginEmail" className="h6 mr-1">
                     {intl.formatMessage(messages['email.label'])}
@@ -220,7 +222,6 @@ class LoginPage extends React.Component {
                     value={this.state.email}
                     onChange={e => this.handleOnChange(e)}
                   />
-                  <p className="mb-4">{intl.formatMessage(messages['email.help.message'])}</p>
                 </ValidationFormGroup>
                 <ValidationFormGroup
                   for="password"
@@ -240,12 +241,12 @@ class LoginPage extends React.Component {
                   />
                 </ValidationFormGroup>
                 <LoginHelpLinks page={LOGIN_PAGE} />
-                <Hyperlink className="field-link mt-0 mb-3" destination={this.getEnterPriseLoginURL()}>
+                <Hyperlink className="field-link mt-0 mb-3 small" destination={this.getEnterPriseLoginURL()}>
                   {intl.formatMessage(messages['enterprise.login.link.text'])}
                 </Hyperlink>
                 <StatefulButton
                   type="submit"
-                  className="btn-primary"
+                  variant="brand"
                   state={submitState}
                   labels={{
                     default: intl.formatMessage(messages['sign.in.button']),
@@ -255,8 +256,9 @@ class LoginPage extends React.Component {
               </Form>
               {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
                 && !currentProvider ? (
-                  <div className="mb-4 pt-10">
-                    <h4>{intl.formatMessage(messages['or.sign.in.with'])}</h4>
+                  <div className="mb-20">
+                    <hr className="mt-20 mb-20 border-gray-200" />
+                    {intl.formatMessage(messages['or.sign.in.with'])}
                   </div>
                 ) : null}
               {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
diff --git a/src/login/tests/LoginPage.test.jsx b/src/login/tests/LoginPage.test.jsx
index c1771f8e..71753459 100644
--- a/src/login/tests/LoginPage.test.jsx
+++ b/src/login/tests/LoginPage.test.jsx
@@ -146,7 +146,7 @@ describe('LoginPage', () => {
     const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
 
     loginPage.find('input#loginPassword').simulate('change', { target: { value: 'test', name: 'password' } });
-    loginPage.find('button.btn-primary').simulate('click');
+    loginPage.find('button.btn-brand').simulate('click');
 
     expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState);
   });
@@ -156,7 +156,7 @@ describe('LoginPage', () => {
     const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
 
     loginPage.find('input#loginEmail').simulate('change', { target: { value: 'test@example.com', name: 'email' } });
-    loginPage.find('button.btn-primary').simulate('click');
+    loginPage.find('button.btn-brand').simulate('click');
     expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState);
   });
 
diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
index 0fac4b49..f9ce811d 100644
--- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -26,11 +26,14 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           </a>
         </p>
       </div>
-      <h2
+      <hr
+        className="mt-0 border-gray-200"
+      />
+      <h3
         className="text-left mt-2 mb-3"
       >
         Sign In
-      </h2>
+      </h3>
       <form
         className="m-0"
       >
@@ -44,7 +47,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
             Email
           </label>
           <input
-            aria-describedby=""
+            aria-describedby="email-help-text"
             className="form-control"
             id="loginEmail"
             name="email"
@@ -53,11 +56,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
             type="email"
             value=""
           />
-          <p
-            className="mb-4"
+          <small
+            className="form-text text-muted"
+            id="email-help-text"
           >
             The email address you used to register with edX.
-          </p>
+          </small>
           <strong
             className="invalid-feedback"
             id="email-invalid-feedback"
@@ -131,7 +135,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           />
         </div>
         <a
-          className="field-link mt-0 mb-3"
+          className="field-link mt-0 mb-3 small"
           href="http://localhost:18000/enterprise/login"
           onClick={[Function]}
           target="_self"
@@ -141,7 +145,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="submit"
@@ -154,11 +158,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         </button>
       </form>
       <div
-        className="mb-4 pt-10"
+        className="mb-20"
       >
-        <h4>
-          or sign in with
-        </h4>
+        <hr
+          className="mt-20 mb-20 border-gray-200"
+        />
+        or sign in with
       </div>
       <div
         className="row tpa-container"
@@ -172,19 +177,20 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         >
           <div
             aria-hidden="true"
+            className="mx-auto"
           >
             <img
               alt="icon Apple"
               className="icon-image"
               src="https://edx.devstack.lms/logo.png"
             />
+            <span
+              aria-hidden="true"
+              className="pl-2"
+            >
+              Apple
+            </span>
           </div>
-          <span
-            aria-hidden="true"
-            className="pl-2"
-          >
-            Apple
-          </span>
         </button>
       </div>
     </div>
@@ -218,11 +224,14 @@ exports[`LoginPage should match default section snapshot 1`] = `
           </a>
         </p>
       </div>
-      <h2
+      <hr
+        className="mt-0 border-gray-200"
+      />
+      <h3
         className="text-left mt-2 mb-3"
       >
         Sign In
-      </h2>
+      </h3>
       <form
         className="m-0"
       >
@@ -236,7 +245,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
             Email
           </label>
           <input
-            aria-describedby=""
+            aria-describedby="email-help-text"
             className="form-control"
             id="loginEmail"
             name="email"
@@ -245,11 +254,12 @@ exports[`LoginPage should match default section snapshot 1`] = `
             type="email"
             value=""
           />
-          <p
-            className="mb-4"
+          <small
+            className="form-text text-muted"
+            id="email-help-text"
           >
             The email address you used to register with edX.
-          </p>
+          </small>
           <strong
             className="invalid-feedback"
             id="email-invalid-feedback"
@@ -323,7 +333,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
           />
         </div>
         <a
-          className="field-link mt-0 mb-3"
+          className="field-link mt-0 mb-3 small"
           href="http://localhost:18000/enterprise/login"
           onClick={[Function]}
           target="_self"
@@ -333,7 +343,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="submit"
@@ -414,11 +424,14 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           </a>
         </p>
       </div>
-      <h2
+      <hr
+        className="mt-0 border-gray-200"
+      />
+      <h3
         className="text-left mt-2 mb-3"
       >
         Sign In
-      </h2>
+      </h3>
       <form
         className="m-0"
       >
@@ -432,7 +445,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
             Email
           </label>
           <input
-            aria-describedby=""
+            aria-describedby="email-help-text"
             className="form-control"
             id="loginEmail"
             name="email"
@@ -441,11 +454,12 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
             type="email"
             value=""
           />
-          <p
-            className="mb-4"
+          <small
+            className="form-text text-muted"
+            id="email-help-text"
           >
             The email address you used to register with edX.
-          </p>
+          </small>
           <strong
             className="invalid-feedback"
             id="email-invalid-feedback"
@@ -519,7 +533,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           />
         </div>
         <a
-          className="field-link mt-0 mb-3"
+          className="field-link mt-0 mb-3 small"
           href="http://localhost:18000/enterprise/login"
           onClick={[Function]}
           target="_self"
@@ -529,7 +543,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="submit"
@@ -572,11 +586,14 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           </a>
         </p>
       </div>
-      <h2
+      <hr
+        className="mt-0 border-gray-200"
+      />
+      <h3
         className="text-left mt-2 mb-3"
       >
         Sign In
-      </h2>
+      </h3>
       <form
         className="m-0"
       >
@@ -590,7 +607,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
             Email
           </label>
           <input
-            aria-describedby=""
+            aria-describedby="email-help-text"
             className="form-control"
             id="loginEmail"
             name="email"
@@ -599,11 +616,12 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
             type="email"
             value=""
           />
-          <p
-            className="mb-4"
+          <small
+            className="form-text text-muted"
+            id="email-help-text"
           >
             The email address you used to register with edX.
-          </p>
+          </small>
           <strong
             className="invalid-feedback"
             id="email-invalid-feedback"
@@ -677,7 +695,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           />
         </div>
         <a
-          className="field-link mt-0 mb-3"
+          className="field-link mt-0 mb-3 small"
           href="http://localhost:18000/enterprise/login"
           onClick={[Function]}
           target="_self"
@@ -687,7 +705,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
         <button
           aria-disabled={true}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-pending disabled btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="submit"
@@ -755,11 +773,14 @@ exports[`LoginPage should show error message 1`] = `
           </a>
         </p>
       </div>
-      <h2
+      <hr
+        className="mt-0 border-gray-200"
+      />
+      <h3
         className="text-left mt-2 mb-3"
       >
         Sign In
-      </h2>
+      </h3>
       <form
         className="m-0"
       >
@@ -773,7 +794,7 @@ exports[`LoginPage should show error message 1`] = `
             Email
           </label>
           <input
-            aria-describedby=""
+            aria-describedby="email-help-text"
             className="form-control"
             id="loginEmail"
             name="email"
@@ -782,11 +803,12 @@ exports[`LoginPage should show error message 1`] = `
             type="email"
             value=""
           />
-          <p
-            className="mb-4"
+          <small
+            className="form-text text-muted"
+            id="email-help-text"
           >
             The email address you used to register with edX.
-          </p>
+          </small>
           <strong
             className="invalid-feedback"
             id="email-invalid-feedback"
@@ -860,7 +882,7 @@ exports[`LoginPage should show error message 1`] = `
           />
         </div>
         <a
-          className="field-link mt-0 mb-3"
+          className="field-link mt-0 mb-3 small"
           href="http://localhost:18000/enterprise/login"
           onClick={[Function]}
           target="_self"
@@ -870,7 +892,7 @@ exports[`LoginPage should show error message 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="submit"
diff --git a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
index b0506a90..05431c1a 100644
--- a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -244,19 +244,20 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
         >
           <div
             aria-hidden="true"
+            className="mx-auto"
           >
             <img
               alt="icon Apple"
               className="icon-image"
               src="https://edx.devstack.lms/logo.png"
             />
+            <span
+              aria-hidden="true"
+              className="pl-2"
+            >
+              Apple
+            </span>
           </div>
-          <span
-            aria-hidden="true"
-            className="pl-2"
-          >
-            Apple
-          </span>
         </button>
       </div>
       <h4