diff --git a/package-lock.json b/package-lock.json
index 4880e1c5..2ab69240 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3828,9 +3828,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "13.16.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.16.1.tgz",
-      "integrity": "sha512-8GxeS0OQLKJKrkqUa6HRk+wi/96IvhuY6JjjQYIf4+SA6TXLu57SwvtsQN6sLuB3PTxnW64WQF3MepvpNo9VpQ==",
+      "version": "13.17.3",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.17.3.tgz",
+      "integrity": "sha512-fUjrfNmeWIpEsroK0JuajIBHHh0BIvZTnBusTRqzvl5fFivNuhEdcG33oEZSVvfyRYtCgtnWmSRbvN5vGhjK6g==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.30",
         "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -21284,9 +21284,9 @@
       }
     },
     "react-popper": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.4.tgz",
-      "integrity": "sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
       "requires": {
         "react-fast-compare": "^3.0.1",
         "warning": "^4.0.2"
diff --git a/package.json b/package.json
index 7ff43b28..f5ca99d7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@edx/frontend-component-cookie-policy-banner": "2.1.11",
     "@edx/frontend-component-header": "2.2.4",
     "@edx/frontend-platform": "1.8.4",
-    "@edx/paragon": "13.16.1",
+    "@edx/paragon": "13.17.3",
     "@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/common-components/AuthnValidationFormGroup.jsx b/src/common-components/AuthnValidationFormGroup.jsx
index 97f9c4ae..2cd1ebf7 100644
--- a/src/common-components/AuthnValidationFormGroup.jsx
+++ b/src/common-components/AuthnValidationFormGroup.jsx
@@ -61,7 +61,6 @@ const AuthnCustomValidationFormGroup = (props) => {
     id: props.for,
     type: props.type,
     value: props.value,
-    className: props.inputFieldStyle,
     'aria-invalid': props.ariaInvalid,
   };
   inputProps.onChange = (e) => onChangeHandler(e, onChange);
@@ -71,7 +70,7 @@ const AuthnCustomValidationFormGroup = (props) => {
 
   if (props.type === 'select') {
     inputProps.options = props.selectOptions;
-    inputProps.className = props.value === '' ? 'text-muted border-gray-600' : null;
+    inputProps.className = props.value === '' ? 'text-muted' : null;
   }
   if (props.type === 'checkbox') {
     inputProps.checked = props.isChecked;
@@ -115,7 +114,6 @@ AuthnCustomValidationFormGroup.defaultProps = {
   invalid: false,
   ariaInvalid: false,
   invalidMessage: '',
-  inputFieldStyle: '',
   helpText: '',
   className: '',
   onClick: null,
@@ -140,7 +138,6 @@ AuthnCustomValidationFormGroup.propTypes = {
   invalidMessage: PropTypes.string,
   helpText: PropTypes.string,
   className: PropTypes.string,
-  inputFieldStyle: PropTypes.string,
   isChecked: PropTypes.bool,
   optionalFieldCheckbox: PropTypes.bool,
   onClick: PropTypes.func,
diff --git a/src/common-components/tests/AuthnValidationFormGroup.test.jsx b/src/common-components/tests/AuthnValidationFormGroup.test.jsx
index 88f3dfbf..0c765e54 100644
--- a/src/common-components/tests/AuthnValidationFormGroup.test.jsx
+++ b/src/common-components/tests/AuthnValidationFormGroup.test.jsx
@@ -15,14 +15,14 @@ describe('AuthnCustomValidationFormGroup', () => {
 
   it('should show label in place of placeholder when field is empty', () => {
     const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
-    expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 focus-out form-label');
+    expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label pt-10 focus-out');
   });
 
   it('should show label on top of field when field is focused in', () => {
     const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
 
     validationFormGroup.find('input').simulate('focus');
-    expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 h6 form-label');
+    expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label pt-10 h6');
   });
 
   it('should keep label hidden for checkbox field', () => {
@@ -32,7 +32,7 @@ describe('AuthnCustomValidationFormGroup', () => {
       optionalFieldCheckbox: true,
     };
     const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
-    expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
+    expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label sr-only');
   });
 
   it('should keep label hidden when input field is not empty', () => {
@@ -41,6 +41,6 @@ describe('AuthnCustomValidationFormGroup', () => {
       value: 'test',
     };
     const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
-    expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
+    expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label sr-only');
   });
 });
diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index 6e13b100..ae31596a 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -117,7 +117,6 @@ const ForgotPasswordPage = (props) => {
                   onChange={e => setFieldValue('email', e.target.value)}
                   helpText={intl.formatMessage(messages['forgot.password.email.help.text'], { platformName })}
                   className="mb-0 w-100"
-                  inputFieldStyle="border-gray-600"
                 />
                 <LoginHelpLinks page="forgot-password" />
                 <StatefulButton
diff --git a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
index 05844318..dd726dab 100644
--- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
+++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
@@ -24,15 +24,14 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
         className="form-group mb-0 w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="forgot-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Email
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="forgot-password-input"
           name="email"
           onBlur={[Function]}
@@ -146,15 +145,14 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
         className="form-group mb-0 w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="forgot-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Email
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="forgot-password-input"
           name="email"
           onBlur={[Function]}
@@ -253,15 +251,14 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
         className="form-group mb-0 w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="forgot-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Email
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="forgot-password-input"
           name="email"
           onBlur={[Function]}
diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx
index 0b4da3f9..d3fd96b5 100644
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -221,7 +221,6 @@ class LoginPage extends React.Component {
                   value={email}
                   helpText={intl.formatMessage(messages['email.help.message'])}
                   onChange={(e) => this.setState({ email: e.target.value, isSubmitted: false })}
-                  inputFieldStyle="border-gray-600"
                 />
                 <AuthnValidationFormGroup
                   label={intl.formatMessage(messages['password.label'])}
@@ -233,7 +232,6 @@ class LoginPage extends React.Component {
                   invalidMessage={errors.password}
                   value={password}
                   onChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })}
-                  inputFieldStyle="border-gray-600"
                 />
                 <LoginHelpLinks page={LOGIN_PAGE} />
                 <Hyperlink className="field-link mt-0 mb-3 small" destination={this.getEnterPriseLoginURL()}>
diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
index cd86e364..f19ef4b2 100644
--- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -37,15 +37,14 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -62,15 +61,14 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -233,15 +231,14 @@ exports[`LoginPage should match default section snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -258,15 +255,14 @@ exports[`LoginPage should match default section snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -427,15 +423,14 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -452,15 +447,14 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -581,15 +575,14 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -606,15 +599,14 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -772,15 +764,14 @@ exports[`LoginPage should show error message 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -797,15 +788,14 @@ exports[`LoginPage should show error message 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
diff --git a/src/register/OptionalFields.jsx b/src/register/OptionalFields.jsx
index 642db0f8..b570a24c 100644
--- a/src/register/OptionalFields.jsx
+++ b/src/register/OptionalFields.jsx
@@ -70,7 +70,6 @@ const OptionalFields = (props) => {
         value={values.goals}
         className="mb-20"
         onChange={(e) => onChangeHandler('goals', e.target.value)}
-        inputFieldStyle="border-gray-600"
       />
     </>
   );
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 212deed2..ff08e1cf 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -480,7 +480,6 @@ class RegistrationPage extends React.Component {
                   onBlur={(e) => this.handleOnBlur(e)}
                   onChange={(e) => this.handleOnChange(e)}
                   helpText={intl.formatMessage(messages['helptext.name'])}
-                  inputFieldStyle="border-gray-600"
                 />
                 <AuthnValidationFormGroup
                   label={intl.formatMessage(messages['username.label'])}
@@ -495,7 +494,6 @@ class RegistrationPage extends React.Component {
                   onBlur={(e) => this.handleOnBlur(e)}
                   onChange={(e) => this.handleOnChange(e)}
                   helpText={intl.formatMessage(messages['helptext.username'])}
-                  inputFieldStyle="border-gray-600"
                 />
                 <AuthnValidationFormGroup
                   label={intl.formatMessage(messages['register.page.email.label'])}
@@ -510,7 +508,6 @@ class RegistrationPage extends React.Component {
                   onBlur={(e) => this.handleOnBlur(e)}
                   onChange={(e) => this.handleOnChange(e)}
                   helpText={intl.formatMessage(messages['helptext.email'])}
-                  inputFieldStyle="border-gray-600"
                 />
                 {!currentProvider && (
                   <AuthnValidationFormGroup
@@ -525,7 +522,6 @@ class RegistrationPage extends React.Component {
                     onBlur={(e) => this.handleOnBlur(e)}
                     onChange={(e) => this.handleOnChange(e)}
                     helpText={intl.formatMessage(messages['helptext.password'])}
-                    inputFieldStyle="border-gray-600"
                   />
                 )}
                 <AuthnValidationFormGroup
@@ -542,7 +538,6 @@ class RegistrationPage extends React.Component {
                   onBlur={(e) => this.handleOnBlur(e)}
                   onChange={(e) => this.handleOnChange(e)}
                   selectOptions={this.getCountryOptions()}
-                  inputFieldStyle="border-gray-600"
                 />
                 <div id="honor-code" className="pt-10 small">
                   <FormattedMessage
diff --git a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
index e76dcf04..71941be2 100644
--- a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -36,15 +36,14 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="name"
+            className="pgn__form-label pt-10 focus-out"
           >
             Full name (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="name"
             name="name"
             onBlur={[Function]}
@@ -61,15 +60,14 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           className="form-group data-hj-suppress"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="username"
+            className="pgn__form-label pt-10 focus-out"
           >
             Public username (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="username"
             name="username"
             onBlur={[Function]}
@@ -86,15 +84,14 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           className="form-group data-hj-suppress"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -111,15 +108,14 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -136,15 +132,14 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           className="form-group mb-0 data-hj-suppress"
         >
           <label
-            className="sr-only form-label"
-            htmlFor="country"
+            className="pgn__form-label sr-only"
           >
             Country or region of residence (required)
           </label>
           <select
             aria-describedby=""
             aria-invalid={false}
-            className="form-control text-muted border-gray-600"
+            className="form-control text-muted"
             id="country"
             name="country"
             onBlur={[Function]}
@@ -1466,8 +1461,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           className="form-group custom-control pt-10 mb-0"
         >
           <label
-            className="sr-only form-label"
-            htmlFor="optional"
+            className="pgn__form-label sr-only"
           >
             Support education research by providing additional information. (Optional)
           </label>
@@ -1599,15 +1593,14 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="name"
+            className="pgn__form-label pt-10 focus-out"
           >
             Full name (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="name"
             name="name"
             onBlur={[Function]}
@@ -1624,15 +1617,14 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           className="form-group data-hj-suppress"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="username"
+            className="pgn__form-label pt-10 focus-out"
           >
             Public username (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="username"
             name="username"
             onBlur={[Function]}
@@ -1649,15 +1641,14 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           className="form-group data-hj-suppress"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -1674,15 +1665,14 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -1699,15 +1689,14 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           className="form-group mb-0 data-hj-suppress"
         >
           <label
-            className="sr-only form-label"
-            htmlFor="country"
+            className="pgn__form-label sr-only"
           >
             Country or region of residence (required)
           </label>
           <select
             aria-describedby=""
             aria-invalid={false}
-            className="form-control text-muted border-gray-600"
+            className="form-control text-muted"
             id="country"
             name="country"
             onBlur={[Function]}
@@ -3029,8 +3018,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           className="form-group custom-control pt-10 mb-0"
         >
           <label
-            className="sr-only form-label"
-            htmlFor="optional"
+            className="pgn__form-label sr-only"
           >
             Support education research by providing additional information. (Optional)
           </label>
@@ -3117,15 +3105,14 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="name"
+            className="pgn__form-label pt-10 focus-out"
           >
             Full name (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="name"
             name="name"
             onBlur={[Function]}
@@ -3142,15 +3129,14 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           className="form-group data-hj-suppress"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="username"
+            className="pgn__form-label pt-10 focus-out"
           >
             Public username (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="username"
             name="username"
             onBlur={[Function]}
@@ -3167,15 +3153,14 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           className="form-group data-hj-suppress"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="email"
+            className="pgn__form-label pt-10 focus-out"
           >
             Email (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -3192,15 +3177,14 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           className="form-group"
         >
           <label
-            className="pt-10 focus-out form-label"
-            htmlFor="password"
+            className="pgn__form-label pt-10 focus-out"
           >
             Password (required)
           </label>
           <input
             aria-describedby=""
             aria-invalid={false}
-            className="form-control border-gray-600"
+            className="form-control"
             id="password"
             name="password"
             onBlur={[Function]}
@@ -3217,15 +3201,14 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           className="form-group mb-0 data-hj-suppress"
         >
           <label
-            className="sr-only form-label"
-            htmlFor="country"
+            className="pgn__form-label sr-only"
           >
             Country or region of residence (required)
           </label>
           <select
             aria-describedby=""
             aria-invalid={false}
-            className="form-control text-muted border-gray-600"
+            className="form-control text-muted"
             id="country"
             name="country"
             onBlur={[Function]}
@@ -4547,8 +4530,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           className="form-group custom-control pt-10 mb-0"
         >
           <label
-            className="sr-only form-label"
-            htmlFor="optional"
+            className="pgn__form-label sr-only"
           >
             Support education research by providing additional information. (Optional)
           </label>
diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx
index 774eb27a..82083a1f 100644
--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -159,7 +159,6 @@ const ResetPasswordPage = (props) => {
                 onChange={e => handleNewPasswordChange(e)}
                 onBlur={e => handleNewPasswordOnBlur(e)}
                 className="w-100"
-                inputFieldStyle="border-gray-600"
               />
               <AuthnValidationFormGroup
                 label={intl.formatMessage(messages['reset.password.page.confirm.field.label'])}
@@ -172,7 +171,6 @@ const ResetPasswordPage = (props) => {
                 value={confirmPasswordInput}
                 onChange={e => handleConfirmPasswordChange(e)}
                 className="w-100"
-                inputFieldStyle="border-gray-600"
               />
               <StatefulButton
                 type="submit"
diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
index 7f675b3a..09ab3719 100644
--- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
+++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
@@ -25,15 +25,14 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="reset-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           New password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="reset-password-input"
           name="new-password1"
           onBlur={[Function]}
@@ -50,15 +49,14 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="confirm-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Confirm password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="confirm-password-input"
           name="new-password2"
           onBlur={[Function]}
@@ -124,15 +122,14 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="reset-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           New password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="reset-password-input"
           name="new-password1"
           onBlur={[Function]}
@@ -149,15 +146,14 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="confirm-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Confirm password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="confirm-password-input"
           name="new-password2"
           onBlur={[Function]}
@@ -244,15 +240,14 @@ exports[`ResetPasswordPage should match reset password default section snapshot
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="reset-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           New password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="reset-password-input"
           name="new-password1"
           onBlur={[Function]}
@@ -269,15 +264,14 @@ exports[`ResetPasswordPage should match reset password default section snapshot
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="confirm-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Confirm password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="confirm-password-input"
           name="new-password2"
           onBlur={[Function]}
@@ -381,15 +375,14 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="reset-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           New password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="reset-password-input"
           name="new-password1"
           onBlur={[Function]}
@@ -406,15 +399,14 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
         className="form-group w-100"
       >
         <label
-          className="pt-10 focus-out form-label"
-          htmlFor="confirm-password-input"
+          className="pgn__form-label pt-10 focus-out"
         >
           Confirm password
         </label>
         <input
           aria-describedby=""
           aria-invalid={false}
-          className="form-control border-gray-600"
+          className="form-control"
           id="confirm-password-input"
           name="new-password2"
           onBlur={[Function]}