diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index aa890a30..26cdbab7 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -387,7 +387,7 @@ class RegistrationPage extends React.Component {
                 <ValidationFormGroup
                   for={field.name}
                   key={field.name}
-                  className="pt-10 mb-0"
+                  className="pt-10 mb-20 small"
                 >
                   { nodes }
                 </ValidationFormGroup>
@@ -404,7 +404,7 @@ class RegistrationPage extends React.Component {
                 key={field.name}
                 invalid={this.state.errors[stateVar] !== ''}
                 invalidMessage={field.errorMessages.required}
-                className="custom-control mb-0"
+                className="custom-control mb-20 small"
               >
                 <Input {...props} />
                 {beforeLink}
@@ -428,7 +428,7 @@ class RegistrationPage extends React.Component {
               key={field.name}
               invalid={this.state.errors[stateVar] !== ''}
               invalidMessage={field.errorMessages.required}
-              className="mb-0"
+              className="mb-20"
             >
               <label htmlFor={field.name} className="h6 pt-10">{field.label} (required)</label>
               <Input {...props} />
@@ -444,7 +444,7 @@ class RegistrationPage extends React.Component {
   addExtraOptionalFields() {
     const fields = this.props.formData.fields.map((field) => {
       let options = null;
-      let cssClass = 'mb-0';
+      let cssClass = 'mb-20';
       if (REGISTRATION_EXTRA_FIELDS.includes(field.name)) {
         if (!field.required && field.name !== 'honor_code' && field.name !== 'country') {
           REGISTRATION_OPTIONAL_MAP[field.name] = true;
@@ -506,9 +506,6 @@ class RegistrationPage extends React.Component {
           <div className="row tpa-container">
             <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
           </div>
-          <h4 className="d-block mx-auto mt-4">
-            {intl.formatMessage(messages['create.a.new.one.here'])}
-          </h4>
         </>
       );
     } else if (thirdPartyAuthApiStatus === PENDING_STATE) {
@@ -572,21 +569,14 @@ class RegistrationPage extends React.Component {
                 <span>{intl.formatMessage(messages['already.have.an.edx.account'])}</span>
                 <a href={LOGIN_PAGE} onClick={this.handleLoginLinkClickEvent}>{intl.formatMessage(messages['sign.in.hyperlink'])}</a>
               </div>
-              {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
-                && !currentProvider ? (
-                  <div className="d-block mb-4 mt-4">
-                    <h4 className="d-block mx-auto mb-4">
-                      {intl.formatMessage(messages['create.an.account.using'])}
-                    </h4>
-                  </div>
-                ) : <h2 className="mt-4">{intl.formatMessage(messages['create.an.account'])}</h2>}
-              {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
+              <hr className="mb-20 border-gray-200" />
+              <h3 className="mb-20">{intl.formatMessage(messages['create.a.new.account'])}</h3>
               <Form className="mb-4 form-group">
                 <ValidationFormGroup
                   for="name"
                   invalid={this.state.errors.name !== ''}
                   invalidMessage={this.state.errors.name}
-                  className="mb-0"
+                  className="mb-20"
                   helpText="This name will be used by any certificates that you earn."
                 >
                   <label htmlFor="name" className="h6 pt-10">
@@ -608,7 +598,7 @@ class RegistrationPage extends React.Component {
                   for="username"
                   invalid={this.state.errors.username !== ''}
                   invalidMessage={this.state.errors.username}
-                  className="mb-0"
+                  className="mb-20"
                   helpText="The name that will identify you in your courses. It cannot be changed later."
                 >
                   <label htmlFor="username" className="h6 pt-10">
@@ -631,7 +621,7 @@ class RegistrationPage extends React.Component {
                   for="email"
                   invalid={this.state.errors.email !== ''}
                   invalidMessage={this.state.errors.email}
-                  className="mb-0"
+                  className="mb-20"
                   helpText="This is what you will use to login."
                 >
                   <label htmlFor="email" className="h6 pt-10">
@@ -654,7 +644,7 @@ class RegistrationPage extends React.Component {
                     for="password"
                     invalid={this.state.errors.password !== ''}
                     invalidMessage={this.state.errors.password}
-                    className="mb-0"
+                    className="mb-20"
                     helpText="Your password must contain at least 8 characters, including 1 letter & 1 number."
                   >
                     <label htmlFor="password" className="h6 pt-10">
@@ -687,20 +677,34 @@ class RegistrationPage extends React.Component {
                     onChange={e => this.handleOnOptional(e)}
                     required
                   />
-                  <p role="presentation" id="additionalFields" className="mb-0" onClick={e => this.handleOnOptional(e)}>
+                  <p role="presentation" id="additionalFields" className="mb-20 small" onClick={e => this.handleOnOptional(e)}>
                     {intl.formatMessage(messages['support.education.research'])}
                   </p>
                 </ValidationFormGroup>
                 { this.state.enableOptionalField ? this.addExtraOptionalFields() : null}
                 <StatefulButton
                   type="button"
-                  className="btn-primary mt-10"
+                  variant="brand"
                   state={submitState}
                   labels={{
                     default: intl.formatMessage(messages['create.account.button']),
                   }}
                   onClick={this.handleSubmit}
                 />
+                {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
+                  && !currentProvider ? (
+                    <div className="d-block mb-4 mt-4">
+                      <hr className="mt-0 border-gray-200" />
+                      <span className="d-blockmb-4 text-left">
+                        {intl.formatMessage(messages['create.an.account.using'])}
+                      </span>
+                    </div>
+                  ) : <span className="mt-4 text-left">{intl.formatMessage(messages['create.an.account.using'])}</span>}
+                {this.renderThirdPartyAuth(providers,
+                  secondaryProviders,
+                  currentProvider,
+                  thirdPartyAuthApiStatus,
+                  intl)}
               </Form>
             </div>
           </div>
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index 33a80f86..c7634a67 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -18,13 +18,13 @@ const messages = defineMessages({
   },
   'create.an.account.using': {
     id: 'create.an.account.using',
-    defaultMessage: 'Create an account using',
-    description: 'A message that appears before social auth buttons',
+    defaultMessage: 'or create an account using',
+    description: 'A message that after optional form fields checkbox',
   },
-  'create.a.new.one.here': {
-    id: 'create.a.new.one.here',
-    defaultMessage: 'or create a new one here',
-    description: 'Text that appears after social auth buttons and before the registration form',
+  'create.a.new.account': {
+    id: 'create.a.new.account',
+    defaultMessage: 'Create a new account',
+    description: 'Text that appears before social auth buttons and before the registration form',
   },
   'register.institution.login.button': {
     id: 'register.institution.login.button',
@@ -108,7 +108,7 @@ const messages = defineMessages({
   },
   'support.education.research': {
     id: 'support.education.research',
-    defaultMessage: 'Support education research by providing additional information',
+    defaultMessage: 'Support education research by providing additional information. (Optional)',
     description: 'Text for a checkbox to ask user for if they are willing to provide extra information for education research',
   },
   'register.optional.label': {
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index f16a71fc..706324c1 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -317,7 +317,7 @@ describe('./RegistrationPage.js', () => {
     store.dispatch = jest.fn(store.dispatch);
 
     const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
-    registrationPage.find('button.btn-primary').simulate('click');
+    registrationPage.find('button.btn-brand').simulate('click');
     expect(store.dispatch).not.toHaveBeenCalledWith(registerNewUser(formPayload));
   });
 
diff --git a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 05431c1a..9aaceae6 100644
--- a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -32,16 +32,19 @@ exports[`./RegistrationPage.js should display no password field when current pro
            Sign in.
         </a>
       </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
       >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
       <form
         className="mb-4 form-group"
       >
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -70,7 +73,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -100,7 +103,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -129,7 +132,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </small>
         </div>
         <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
         >
           <input
             aria-describedby=""
@@ -173,18 +176,18 @@ exports[`./RegistrationPage.js should display no password field when current pro
             value={false}
           />
           <p
-            className="mb-0"
+            className="mb-20 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
           >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
           </p>
         </div>
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -195,6 +198,11 @@ exports[`./RegistrationPage.js should display no password field when current pro
             Create Account
           </span>
         </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
       </form>
     </div>
   </div>
@@ -224,52 +232,19 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
            Sign in.
         </a>
       </div>
-      <div
-        className="d-block mb-4 mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
       >
-        <h4
-          className="d-block mx-auto mb-4"
-        >
-          Create an account using
-        </h4>
-      </div>
-      <div
-        className="row tpa-container"
-      >
-        <button
-          className="btn-social btn-oa2-apple-id"
-          id="oa2-apple-id"
-          onClick={[Function]}
-          type="button"
-        >
-          <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>
-        </button>
-      </div>
-      <h4
-        className="d-block mx-auto mt-4"
-      >
-        or create a new one here
-      </h4>
+        Create a new account
+      </h3>
       <form
         className="mb-4 form-group"
       >
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -298,7 +273,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -328,7 +303,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -357,7 +332,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -386,7 +361,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
         >
           <input
             aria-describedby=""
@@ -430,18 +405,18 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
             value={false}
           />
           <p
-            className="mb-0"
+            className="mb-20 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
           >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
           </p>
         </div>
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -452,6 +427,45 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
             Create Account
           </span>
         </button>
+        <div
+          className="d-block mb-4 mt-4"
+        >
+          <hr
+            className="mt-0 border-gray-200"
+          />
+          <span
+            className="d-blockmb-4 text-left"
+          >
+            or create an account using
+          </span>
+        </div>
+        <div
+          className="row tpa-container"
+        >
+          <button
+            className="btn-social btn-oa2-apple-id"
+            id="oa2-apple-id"
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+          </button>
+        </div>
       </form>
     </div>
   </div>
@@ -481,16 +495,19 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
            Sign in.
         </a>
       </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
       >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
       <form
         className="mb-4 form-group"
       >
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -519,7 +536,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -549,7 +566,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -578,7 +595,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -607,7 +624,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
         >
           <input
             aria-describedby=""
@@ -651,18 +668,18 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
             value={false}
           />
           <p
-            className="mb-0"
+            className="mb-20 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
           >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
           </p>
         </div>
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -673,6 +690,11 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
             Create Account
           </span>
         </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
       </form>
     </div>
   </div>
@@ -702,16 +724,19 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
            Sign in.
         </a>
       </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
       >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
       <form
         className="mb-4 form-group"
       >
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -740,7 +765,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -770,7 +795,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -799,7 +824,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -828,7 +853,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
         >
           <input
             aria-describedby=""
@@ -872,18 +897,18 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
             value={false}
           />
           <p
-            className="mb-0"
+            className="mb-20 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
           >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
           </p>
         </div>
         <button
           aria-disabled={true}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary mt-10 disabled btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-pending disabled btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -903,6 +928,11 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
             Create Account
           </span>
         </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
       </form>
     </div>
   </div>
@@ -958,16 +988,19 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
            Sign in.
         </a>
       </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
       >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
       <form
         className="mb-4 form-group"
       >
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -996,7 +1029,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -1026,7 +1059,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -1055,7 +1088,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-0"
+          className="form-group mb-20"
         >
           <label
             className="h6 pt-10"
@@ -1084,7 +1117,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
         >
           <input
             aria-describedby=""
@@ -1128,18 +1161,18 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
             value={false}
           />
           <p
-            className="mb-0"
+            className="mb-20 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
           >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
           </p>
         </div>
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -1150,6 +1183,11 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
             Create Account
           </span>
         </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
       </form>
     </div>
   </div>