diff --git a/package-lock.json b/package-lock.json
index cfb0ff55..6ed75fa2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3937,9 +3937,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "14.14.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-14.14.1.tgz",
-      "integrity": "sha512-QO0OqH7zu/EVcv+E93eSW32IsXnF62y3+UmQ8aqAAAcn8PAXeUauckrxv0h4frdnzzoL+sfe/MsybacJdq7U7Q==",
+      "version": "14.15.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-14.15.0.tgz",
+      "integrity": "sha512-g8Otnqj/bg+z6z/wcD04XPguASy3OwTi+947Qq/zrSMMaRG4xKraWCZVP0HZ5NTKTKh/GkQGsm7G6PPiUu5Ulg==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.30",
         "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -3950,7 +3950,7 @@
         "classnames": "^2.2.6",
         "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
-        "mailto-link": "^1.0.0",
+        "mailto-link": "^2.0.0",
         "prop-types": "^15.7.2",
         "react-bootstrap": "^1.3.0",
         "react-focus-on": "^3.5.0",
@@ -3964,6 +3964,28 @@
         "uncontrollable": "7.2.1"
       },
       "dependencies": {
+        "mailto-link": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz",
+          "integrity": "sha512-b5FErkZ4t6mpH1IFZSw7Mm2IQHXQ2R0/5Q4xd7Rv8dVkWvE54mFG/UW7HjfFazXFjXTNsM+dSX2tTeIDrV9K9A==",
+          "requires": {
+            "assert-ok": "~1.0.0",
+            "cast-array": "~1.0.1",
+            "object-filter": "~1.0.2",
+            "query-string": "~7.0.0"
+          }
+        },
+        "query-string": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.0.tgz",
+          "integrity": "sha512-Iy7moLybliR5ZgrK/1R3vjrXq03S13Vz4Rbm5Jg3EFq1LUmQppto0qtXz4vqZ386MSRjZgnTSZ9QC+NZOSd/XA==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "filter-obj": "^1.1.0",
+            "split-on-first": "^1.0.0",
+            "strict-uri-encode": "^2.0.0"
+          }
+        },
         "react-responsive": {
           "version": "6.1.2",
           "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-6.1.2.tgz",
@@ -3974,6 +3996,11 @@
             "prop-types": "^15.6.1"
           }
         },
+        "strict-uri-encode": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+          "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+        },
         "uncontrollable": {
           "version": "7.2.1",
           "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
@@ -12859,6 +12886,11 @@
         }
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -23042,6 +23074,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
diff --git a/package.json b/package.json
index ac50454f..35b87e72 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@edx/frontend-component-cookie-policy-banner": "2.1.12",
     "@edx/frontend-component-header": "2.2.5",
     "@edx/frontend-platform": "1.8.4",
-    "@edx/paragon": "14.14.1",
+    "@edx/paragon": "14.15.0",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index 2b4b3e20..8ba02ebc 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -11,7 +11,7 @@ import { sendPageEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Form, StatefulButton, Hyperlink } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinner, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 
 import { forgotPassword } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
@@ -103,7 +103,6 @@ const ForgotPasswordPage = (props) => {
                     default: intl.formatMessage(messages['forgot.password.page.submit.button']),
                     pending: '',
                   }}
-                  icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
                   onClick={handleSubmit}
                   onMouseDown={(e) => e.preventDefault()}
                 />
@@ -111,7 +110,7 @@ const ForgotPasswordPage = (props) => {
                   {intl.formatMessage(messages['need.help.sign.in.text'])}
                 </Hyperlink>
                 <p className="mt-5 one-rem-font">{intl.formatMessage(messages['additional.help.text'])}
-                  <span><Hyperlink destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink></span>
+                  <span><Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink></span>
                 </p>
               </Form>
             </>
diff --git a/src/login/AccountActivationMessage.jsx b/src/login/AccountActivationMessage.jsx
index c86cd5db..250f3afc 100644
--- a/src/login/AccountActivationMessage.jsx
+++ b/src/login/AccountActivationMessage.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
+import { CheckCircle, Error } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import { ACCOUNT_ACTIVATION_MESSAGE } from './data/constants';
@@ -15,6 +16,11 @@ const AccountActivationMessage = (props) => {
   let activationMessage;
   let heading;
 
+  const iconMapping = {
+    [ACCOUNT_ACTIVATION_MESSAGE.SUCCESS]: CheckCircle,
+    [ACCOUNT_ACTIVATION_MESSAGE.ERROR]: Error,
+  };
+
   switch (messageType) {
     case ACCOUNT_ACTIVATION_MESSAGE.SUCCESS: {
       heading = intl.formatMessage(messages['account.activation.success.message.title']);
@@ -48,7 +54,12 @@ const AccountActivationMessage = (props) => {
   }
 
   return activationMessage ? (
-    <Alert id="account-activation-message" variant={variant}>
+    <Alert
+      id="account-activation-message"
+      className="mb-4"
+      variant={variant}
+      icon={iconMapping[messageType]}
+    >
       {heading && <Alert.Heading>{heading}</Alert.Heading>}
       {activationMessage}
     </Alert>
diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx
index 59aaee2c..83ef2f2d 100644
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -13,8 +13,6 @@ import {
   Form, Hyperlink, Icon, StatefulButton,
 } from '@edx/paragon';
 import { Institution } from '@edx/paragon/icons';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import AccountActivationMessage from './AccountActivationMessage';
 import { loginRequest, loginRequestFailure, loginRequestReset } from './data/actions';
@@ -241,9 +239,6 @@ class LoginPage extends React.Component {
                 default: intl.formatMessage(messages['sign.in.button']),
                 pending: '',
               }}
-              icons={{
-                pending: <FontAwesomeIcon title={intl.formatMessage(messages['sign.in.btn.pending.state'])} icon={faSpinner} spin />,
-              }}
               onClick={this.handleSubmit}
               onMouseDown={(e) => e.preventDefault()}
             />
diff --git a/src/login/tests/LoginPage.test.jsx b/src/login/tests/LoginPage.test.jsx
index 53d5a2f5..39e7348e 100644
--- a/src/login/tests/LoginPage.test.jsx
+++ b/src/login/tests/LoginPage.test.jsx
@@ -160,9 +160,8 @@ describe('LoginPage', () => {
     const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
     const button = loginPage.find('button[type="submit"] span').first();
 
-    // test pending state icon and that pending state icon has title associated with it
-    expect(button.find('svg').prop('className')).toEqual(expect.stringContaining('fa-spinner'));
-    expect(button.find('svg').find('title').text()).toEqual('Loading');
+    // test pending state has icon
+    expect(button.find('.pgn__stateful-btn-icon').length).toEqual(1);
   });
 
   it('should show forgot password link', () => {
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 43eff28f..0df1fd69 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -11,11 +11,9 @@ import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'
 import {
   injectIntl, intlShape, getCountryList, getLocale, FormattedMessage,
 } from '@edx/frontend-platform/i18n';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import {
   Form, Hyperlink, StatefulButton,
 } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { closest } from 'fastest-levenshtein';
 
 import {
@@ -549,9 +547,6 @@ class RegistrationPage extends React.Component {
                 default: intl.formatMessage(messages['create.account.button']),
                 pending: '',
               }}
-              icons={{
-                pending: <FontAwesomeIcon title={intl.formatMessage(messages['create.an.account.btn.pending.state'])} icon={faSpinner} spin />,
-              }}
               onClick={this.handleSubmit}
               onMouseDown={(e) => e.preventDefault()}
             />
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index 15db6a2c..e03b08b5 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -344,6 +344,7 @@ describe('RegistrationPage', () => {
       const expectedMessage = 'We couldn\'t create your account.An error has occurred. Try refreshing the page, or check your internet connection.';
       props = {
         errorCode: INTERNAL_SERVER_ERROR,
+        failureCount: 0,
       };
 
       const registrationPage = mount(reduxWrapper(<IntlRegistrationFailure {...props} />));
@@ -355,6 +356,7 @@ describe('RegistrationPage', () => {
       const expectedMessage = 'We couldn\'t create your account.Too many failed registration attempts. Try again later.';
       props = {
         errorCode: FORBIDDEN_REQUEST,
+        failureCount: 0,
       };
 
       const registrationPage = mount(reduxWrapper(<IntlRegistrationFailure {...props} />));
@@ -365,10 +367,11 @@ describe('RegistrationPage', () => {
     it('should match tpa session expired error message', () => {
       const expectedMessage = 'We couldn\'t create your account.Registration using Google has timed out.';
       props = {
-        errorCode: TPA_SESSION_EXPIRED,
         context: {
           provider: 'Google',
         },
+        errorCode: TPA_SESSION_EXPIRED,
+        failureCount: 0,
       };
 
       const registrationPage = mount(reduxWrapper(<IntlRegistrationFailure {...props} />));
@@ -395,9 +398,8 @@ describe('RegistrationPage', () => {
       const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
       const button = registrationPage.find('button[type="submit"] span').first();
 
-      // test pending state icon and that pending state icon has title associated with it
-      expect(button.find('svg').prop('className')).toEqual(expect.stringContaining('fa-spinner'));
-      expect(button.find('svg').find('title').text()).toEqual('Loading');
+      // test pending state has icon
+      expect(button.find('.pgn__stateful-btn-icon').length).toEqual(1);
     });
 
     it('should show single sign on provider button', () => {
@@ -469,7 +471,7 @@ describe('RegistrationPage', () => {
         },
       });
 
-      renderer.create(reduxWrapper(<IntlRegistrationPage />));
+      renderer.create(reduxWrapper(<IntlRegistrationPage {...props} />));
       expect(document.cookie).toMatch(`${getConfig().USER_SURVEY_COOKIE_NAME}=register`);
     });
 
diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx
index e4abaa37..8aa300c1 100644
--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -8,7 +8,7 @@ import { Form, Spinner, StatefulButton } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getQueryParameters, getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 
 import messages from './messages';
 import { resetPassword, validateToken } from './data/actions';
@@ -163,7 +163,6 @@ const ResetPasswordPage = (props) => {
                   default: intl.formatMessage(messages['reset.password']),
                   pending: '',
                 }}
-                icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
                 onClick={e => handleSubmit(e)}
                 onMouseDown={(e) => e.preventDefault()}
               />