diff --git a/client/src/components/helpers/spacer.tsx b/client/src/components/helpers/spacer.tsx
index a89cc91688a..2dfaa28acee 100644
--- a/client/src/components/helpers/spacer.tsx
+++ b/client/src/components/helpers/spacer.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 const Padding = Object.freeze({
+  xxSmall: 2.5,
   small: 5,
   xSmall: 10,
   medium: 15,
diff --git a/client/src/components/landing/landing.css b/client/src/components/landing/landing.css
index 40861f9001f..187659acbde 100644
--- a/client/src/components/landing/landing.css
+++ b/client/src/components/landing/landing.css
@@ -9,10 +9,6 @@
   white-space: pre-line;
 }
 
-.cert-btn {
-  margin-top: 40px;
-}
-
 .landing-page ul {
   list-style: none;
   padding-inline-start: 0;
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index cf4113f1954..b67e09f5663 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -269,6 +269,8 @@ input[type='submit']:hover,
   color: var(--secondary-background);
 }
 
+button[aria-disabled='true'],
+button[aria-disabled='true']:hover,
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn,
diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx
index 0b4a51dbd97..dac2bc2d1f0 100644
--- a/client/src/templates/Challenges/classic/lower-jaw.tsx
+++ b/client/src/templates/Challenges/classic/lower-jaw.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/react-bootstrap';
 
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
@@ -22,8 +21,6 @@ import {
   completedPercentageSelector
 } from '../redux/selectors';
 
-const lowerJawButtonStyle = 'btn-block btn';
-
 interface LowerJawPanelProps extends ShareProps {
   resetButtonText: string;
   helpButtonText: string;
@@ -297,18 +294,17 @@ const LowerJaw = ({
   return (
     <div className='action-row-container'>
       {showSignInButton && (
-        <Button
+        <a
           data-cy='sign-in-button'
-          block={true}
           href={`${apiLocation}/signin`}
-          className='btn-cta'
+          className='btn-cta btn btn-block'
         >
           {t('learn.sign-in-save')}
-        </Button>
+        </a>
       )}
       <button
         data-playwright-test-label='lowerJaw-submit-button'
-        className={lowerJawButtonStyle}
+        className='btn-block btn'
         data-cy='submit-lowerJaw-button'
         onClick={tryToSubmitChallenge}
         {...(!challengeIsCompleted && { 'aria-hidden': true })}
@@ -318,7 +314,7 @@ const LowerJaw = ({
       </button>
       <button
         data-playwright-test-label='lowerJaw-check-button'
-        className={lowerJawButtonStyle}
+        className='btn-block btn'
         data-cy='check-lowerJaw-button'
         onClick={tryToExecuteChallenge}
         {...(challengeIsCompleted &&
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 99bdf47bff4..28dcbb1784f 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +8,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Alert } from '@freecodecamp/ui';
+import { Container, Col, Row, Alert, Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -311,7 +310,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                 <Button
                   aria-describedby='codeally-cookie-warning'
                   block={true}
-                  bsStyle='primary'
+                  variant='primary'
                   data-cy='start-codeally'
                   onClick={tryToShowCodeAlly}
                 >
@@ -343,6 +342,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                       />
                     </>
                   )}
+                <Spacer size='xxSmall' />
                 <ProjectToolPanel />
                 <br />
                 <Spacer size='medium' />
diff --git a/client/src/templates/Challenges/components/completion-modal.tsx b/client/src/templates/Challenges/components/completion-modal.tsx
index f23df9fe421..0caff41e5f4 100644
--- a/client/src/templates/Challenges/components/completion-modal.tsx
+++ b/client/src/templates/Challenges/components/completion-modal.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { noop } from 'lodash-es';
 import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
 
 import Login from '../../../components/Header/components/login';
 import { executeGA } from '../../../redux/actions';
@@ -26,6 +27,7 @@ import {
 } from '../redux/selectors';
 import Progress from '../../../components/Progress';
 import GreenPass from '../../../assets/icons/green-pass';
+import { Spacer } from '../../../components/helpers';
 
 import './completion-modal.css';
 
@@ -194,12 +196,15 @@ class CompletionModal extends Component<
         </Modal.Body>
         <Modal.Footer>
           {isSignedIn ? null : (
-            <Login block={true}>{t('learn.sign-in-save')}</Login>
+            <>
+              <Login block={true}>{t('learn.sign-in-save')}</Login>
+              <Spacer size='xxSmall' />
+            </>
           )}
           <Button
             block={true}
-            bsSize='large'
-            bsStyle='primary'
+            size='large'
+            variant='primary'
             disabled={isSubmitting}
             data-cy='submit-challenge'
             onClick={() => submitChallenge()}
@@ -207,12 +212,12 @@ class CompletionModal extends Component<
             {isSignedIn ? t('buttons.submit-and-go') : t('buttons.go-to-next')}
             <span className='hidden-xs'> (Ctrl + Enter)</span>
           </Button>
+          <Spacer size='xxSmall' />
           {this.state.downloadURL ? (
             <Button
               block={true}
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-invert'
+              size='large'
+              variant='primary'
               download={`${dashedName}.txt`}
               href={this.state.downloadURL}
             >
diff --git a/client/src/templates/Challenges/components/help-modal.tsx b/client/src/templates/Challenges/components/help-modal.tsx
index 257d75b81de..c79ed8360d4 100644
--- a/client/src/templates/Challenges/components/help-modal.tsx
+++ b/client/src/templates/Challenges/components/help-modal.tsx
@@ -1,15 +1,17 @@
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { Trans, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
+import { Button } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { executeGA } from '../../../redux/actions';
 import { createQuestion, closeModal } from '../redux/actions';
 import { isHelpModalOpenSelector } from '../redux/selectors';
+import { Spacer } from '../../../components/helpers';
 
 import './help-modal.css';
 
@@ -93,16 +95,17 @@ function HelpModal({
         </div>
         <Button
           block={true}
-          bsSize='lg'
-          bsStyle='primary'
+          size='large'
+          variant='primary'
           onClick={createQuestion}
         >
           {t('buttons.create-post')}
         </Button>
+        <Spacer size='xxSmall' />
         <Button
           block={true}
-          bsSize='lg'
-          bsStyle='primary'
+          size='large'
+          variant='primary'
           onClick={closeHelpModal}
         >
           {t('buttons.cancel')}
diff --git a/client/src/templates/Challenges/components/project-preview-modal.tsx b/client/src/templates/Challenges/components/project-preview-modal.tsx
index af73dca0797..9a547c618d5 100644
--- a/client/src/templates/Challenges/components/project-preview-modal.tsx
+++ b/client/src/templates/Challenges/components/project-preview-modal.tsx
@@ -1,6 +1,7 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
+import { Button } from '@freecodecamp/ui';
 
 import type { CompletedChallenge } from '../../../redux/prop-types';
 import {
@@ -87,8 +88,8 @@ function ProjectPreviewModal({
       <Modal.Footer>
         <Button
           block={true}
-          bsSize='lg'
-          bsStyle='primary'
+          size='large'
+          variant='primary'
           data-playwright-test-label='project-preview-modal-closeButton'
           onClick={() => {
             closeModal('projectPreview');
diff --git a/client/src/templates/Challenges/components/reset-modal.tsx b/client/src/templates/Challenges/components/reset-modal.tsx
index 8c31c76cf34..6bc3929230c 100644
--- a/client/src/templates/Challenges/components/reset-modal.tsx
+++ b/client/src/templates/Challenges/components/reset-modal.tsx
@@ -1,10 +1,11 @@
 // Package Utilities
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import { executeGA } from '../../../redux/actions';
@@ -74,8 +75,8 @@ function ResetModal({ reset, close, isOpen }: ResetModalProps): JSX.Element {
         <Button
           data-cy='reset-modal-confirm'
           block={true}
-          bsSize='large'
-          bsStyle='danger'
+          size='large'
+          variant='danger'
           onClick={withActions(reset, close)}
         >
           {t('buttons.reset-lesson')}
diff --git a/client/src/templates/Challenges/components/shortcuts-modal.tsx b/client/src/templates/Challenges/components/shortcuts-modal.tsx
index 6d882f02644..1f04ba53670 100644
--- a/client/src/templates/Challenges/components/shortcuts-modal.tsx
+++ b/client/src/templates/Challenges/components/shortcuts-modal.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
 
 import { closeModal } from '../redux/actions';
 import { isShortcutsModalOpenSelector } from '../redux/selectors';
@@ -103,8 +104,8 @@ function ShortcutsModal({
         />
         <Button
           block={true}
-          bsSize='sm'
-          bsStyle='primary'
+          size='small'
+          variant='primary'
           onClick={closeShortcutsModal}
         >
           {t('buttons.close')}
diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx
index bb10da71ca9..9dbba47780f 100644
--- a/client/src/templates/Challenges/components/tool-panel.tsx
+++ b/client/src/templates/Challenges/components/tool-panel.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@freecodecamp/react-bootstrap';
-import { Dropdown, MenuItem } from '@freecodecamp/ui';
+import { Dropdown, MenuItem, Button } from '@freecodecamp/ui';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -15,6 +14,7 @@ import { challengeMetaSelector } from '../redux/selectors';
 
 import { saveChallenge } from '../../../redux/actions';
 import { isSignedInSelector } from '../../../redux/selectors';
+import { Spacer } from '../../../components/helpers';
 
 const mapStateToProps = createSelector(
   challengeMetaSelector,
@@ -74,35 +74,31 @@ function ToolPanel({
         isMobile ? 'tool-panel-group-mobile' : ''
       }`}
     >
-      <Button
-        aria-label='Run the tests use shortcut Ctrl+enter'
-        block={true}
-        bsStyle='primary'
-        onClick={handleRunTests}
-      >
+      <Button block={true} variant='primary' onClick={handleRunTests}>
         {isMobile ? t('buttons.run') : t('buttons.run-test')}
       </Button>
       {isSignedIn && challengeType === challengeTypes.multifileCertProject && (
-        <Button
-          block={true}
-          bsStyle='primary'
-          data-cy='save-code-to-database-btn'
-          className='btn-invert'
-          onClick={saveChallenge}
-        >
-          {isMobile ? t('buttons.save') : t('buttons.save-code')}
-        </Button>
+        <>
+          <Spacer size='xxSmall' />
+          <Button
+            block={true}
+            variant='primary'
+            data-cy='save-code-to-database-btn'
+            onClick={saveChallenge}
+          >
+            {isMobile ? t('buttons.save') : t('buttons.save-code')}
+          </Button>
+        </>
       )}
       {challengeType !== challengeTypes.multifileCertProject && (
-        <Button
-          block={true}
-          bsStyle='primary'
-          className='btn-invert'
-          onClick={openResetModal}
-        >
-          {isMobile ? t('buttons.reset') : t('buttons.reset-lesson')}
-        </Button>
+        <>
+          <Spacer size='xxSmall' />
+          <Button block={true} variant='primary' onClick={openResetModal}>
+            {isMobile ? t('buttons.reset') : t('buttons.reset-lesson')}
+          </Button>
+        </>
       )}
+      <Spacer size='xxSmall' />
       <Dropdown dropup>
         <Dropdown.Toggle
           id={'get-help-dropdown'}
diff --git a/client/src/templates/Challenges/dialogue/show.tsx b/client/src/templates/Challenges/dialogue/show.tsx
index 2f89e91dda7..700643ff137 100644
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -273,20 +272,14 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
                 <Spacer size='medium' />
                 <Button
                   block={true}
-                  bsSize='large'
-                  bsStyle='primary'
+                  variant='primary'
                   disabled={!this.state.allAssignmentsCompleted}
                   onClick={() => this.handleSubmit()}
                 >
                   {t('buttons.submit')}
                 </Button>
-                <Button
-                  block={true}
-                  bsSize='large'
-                  bsStyle='primary'
-                  className='btn-invert'
-                  onClick={openHelpModal}
-                >
+                <Spacer size='xxSmall' />
+                <Button block={true} variant='primary' onClick={openHelpModal}>
                   {t('buttons.ask-for-help')}
                 </Button>
                 <Spacer size='large' />
diff --git a/client/src/templates/Challenges/exam/components/exam-results.tsx b/client/src/templates/Challenges/exam/components/exam-results.tsx
index 031b04a9d66..6eef8e81251 100644
--- a/client/src/templates/Challenges/exam/components/exam-results.tsx
+++ b/client/src/templates/Challenges/exam/components/exam-results.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
+
 import Spacer from '../../../../components/helpers/spacer';
 import { formatSecondsToTime } from '../../../../utils/format-seconds';
 import { GeneratedExamResults } from '../../../../redux/prop-types';
@@ -97,17 +98,17 @@ ${t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
       <div className='exam-results-buttons'>
         <Button
           block={true}
-          bsStyle='primary'
-          className='btn-invert'
+          variant='primary'
           data-playwright-test-label='download-exam-results'
           download={`${dashedName}.txt`}
           href={downloadURL}
         >
           {t('learn.download-results')}
         </Button>
+        <Spacer size='xxSmall' />
         <Button
           block={true}
-          bsStyle='primary'
+          variant='primary'
           data-cy='exit-exam'
           data-playwright-test-label='exit-exam'
           onClick={exitExam}
diff --git a/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx b/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
index 9e598ead08e..2fceeb5a28a 100644
--- a/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
@@ -1,14 +1,16 @@
 // Package Utilities
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import { closeModal } from '../../redux/actions';
 import { isExitExamModalOpenSelector } from '../../redux/selectors';
+import { Spacer } from '../../../../components/helpers';
 
 // Types
 interface ExitExamModalProps {
@@ -61,15 +63,16 @@ function ExitExamModal({
         <Button
           data-cy='exit-exam-modal-deny'
           block={true}
-          bsStyle='primary'
+          variant='primary'
           onClick={closeExitExamModal}
         >
           {t('learn.exam.exit-no')}
         </Button>
+        <Spacer size='xxSmall' />
         <Button
           data-cy='exit-exam-modal-confirm'
           block={true}
-          bsStyle='danger'
+          variant='danger'
           onClick={exitExam}
         >
           {t('learn.exam.exit-yes')}
diff --git a/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx b/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
index 294d698c2fd..3b488d366a0 100644
--- a/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
@@ -1,14 +1,16 @@
 // Package Utilities
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import { closeModal } from '../../redux/actions';
 import { isFinishExamModalOpenSelector } from '../../redux/selectors';
+import { Spacer } from '../../../../components/helpers';
 
 // Types
 interface FinishExamModalProps {
@@ -61,17 +63,18 @@ function FinishExamModal({
         <Button
           data-cy='finish-exam-modal-confirm'
           block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
           onClick={finishExam}
         >
           {t('learn.exam.finish-yes')}
         </Button>
+        <Spacer size='xxSmall' />
         <Button
           data-cy='finish-exam-modal-deny'
           block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
           onClick={closeFinishExamModal}
         >
           {t('learn.exam.finish-no')}
diff --git a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
index ec938551a97..63461a3e448 100644
--- a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
+++ b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
@@ -1,10 +1,12 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
+
 import { SurveyResults, SurveyResponse } from '../../../../redux/prop-types';
 import { Spacer } from '../../../../components/helpers';
 import { setIsProcessing, submitSurvey } from '../../../../redux/actions';
@@ -168,18 +170,19 @@ function FoundationalCSharpSurvey({
       <Modal.Footer className='reset-modal-footer'>
         <Button
           block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
           data-cy='submit-csharp-survey-btn'
           disabled={cantSubmitSurvey || isProcessing}
           onClick={createSurveyResults}
         >
           {t('survey.misc.submit')}
         </Button>
+        <Spacer size='xxSmall' />
         <Button
           block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
           disabled={isProcessing}
           onClick={closeSurveyModal}
         >
diff --git a/client/src/templates/Challenges/exam/show.tsx b/client/src/templates/Challenges/exam/show.tsx
index 1c09a3ad3b4..59aedeee16e 100644
--- a/client/src/templates/Challenges/exam/show.tsx
+++ b/client/src/templates/Challenges/exam/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql, navigate } from 'gatsby';
 
 import React, { Component, RefObject } from 'react';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert, Row } from '@freecodecamp/ui';
+import { Container, Col, Alert, Row, Button } from '@freecodecamp/ui';
 import { micromark } from 'micromark';
 
 // Local Utilities
@@ -468,7 +467,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                     block={true}
                     className='exam-button'
                     disabled={currentQuestionIndex <= 0}
-                    bsStyle='primary'
+                    variant='primary'
                     data-cy='previous-exam-question-btn'
                     onClick={this.goToPreviousQuestion}
                   >
@@ -483,7 +482,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                         !userExamQuestions[currentQuestionIndex].answer.id
                       }
                       className='exam-button'
-                      bsStyle='primary'
+                      variant='primary'
                       data-cy='finish-exam-btn'
                       onClick={openFinishExamModal}
                     >
@@ -496,7 +495,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                         !userExamQuestions[currentQuestionIndex].answer.id
                       }
                       className='exam-button'
-                      bsStyle='primary'
+                      variant='primary'
                       data-cy='next-exam-question-btn'
                       onClick={this.goToNextQuestion}
                     >
@@ -511,7 +510,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                   <Button
                     block={true}
                     className='exam-button'
-                    bsStyle='primary'
+                    variant='primary'
                     data-cy='exit-exam-btn'
                     onClick={openExitExamModal}
                   >
@@ -559,16 +558,17 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                     )}
                   </>
                 )}
-
                 <PrismFormatted text={description} />
                 <Spacer size='medium' />
                 <PrismFormatted text={instructions} />
 
                 <Button
                   block={true}
-                  bsStyle='primary'
+                  variant='primary'
                   data-cy='start-exam-btn'
                   disabled={!qualifiedForExam}
+                  // `this.runExam` being an async callback is acceptable
+                  //eslint-disable-next-line @typescript-eslint/no-misused-promises
                   onClick={this.runExam}
                 >
                   {t('buttons.click-start-exam')}
diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.tsx b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
index 8a92083d25f..a9b821f473f 100644
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component, Fragment } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -393,18 +392,14 @@ class ShowFillInTheBlank extends Component<
                 <Spacer size='medium' />
                 <Button
                   block={true}
-                  bsStyle='primary'
+                  variant='primary'
                   disabled={!allBlanksFilled}
                   onClick={() => this.handleSubmit()}
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Button
-                  block={true}
-                  bsStyle='primary'
-                  className='btn-invert'
-                  onClick={openHelpModal}
-                >
+                <Spacer size='xxSmall' />
+                <Button block={true} variant='primary' onClick={openHelpModal}>
                   {t('buttons.ask-for-help')}
                 </Button>
                 <Spacer size='large' />
diff --git a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
index 0a29ef95e19..3dd906d5ed8 100644
--- a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
+++ b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { Button } from '@freecodecamp/react-bootstrap';
 import { ConnectedProps, connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
@@ -9,7 +8,8 @@ import {
   ControlLabel,
   FormControl,
   FormGroup,
-  HelpBlock
+  HelpBlock,
+  Button
 } from '@freecodecamp/ui';
 
 import { Spacer } from '../../../components/helpers';
@@ -102,8 +102,7 @@ function LinkMsUser({
           <p>{t('learn.ms.linked', { msUsername })}</p>
           <Button
             block={true}
-            bsStyle='primary'
-            className='btn-invert'
+            variant='primary'
             disabled={isProcessing}
             onClick={unlinkMsUsername}
           >
@@ -165,8 +164,7 @@ function LinkMsUser({
             <Button
               disabled={isDisabled}
               block={true}
-              bsStyle='primary'
-              className='btn-invert'
+              variant='primary'
               onClick={handleLinkUsername}
             >
               {t('buttons.link-account')}
diff --git a/client/src/templates/Challenges/ms-trophy/show.tsx b/client/src/templates/Challenges/ms-trophy/show.tsx
index 2987d71fa61..18606b9a502 100644
--- a/client/src/templates/Challenges/ms-trophy/show.tsx
+++ b/client/src/templates/Challenges/ms-trophy/show.tsx
@@ -1,4 +1,3 @@
-import { Col, Row, Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +8,7 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 
-import { Container } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';
 import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types';
@@ -204,19 +203,18 @@ class MsTrophy extends Component<MsTrophyProps> {
                 <hr />
                 <Button
                   block={true}
-                  bsStyle='primary'
+                  variant='primary'
                   data-playwright-test-label='verify-trophy-button'
-                  className='btn-invert'
                   disabled={!msUsername || isProcessing}
                   onClick={this.handleSubmit}
                 >
                   {t('buttons.verify-trophy')}
                 </Button>
+                <Spacer size='xxSmall' />
                 <Button
                   block={true}
-                  bsStyle='primary'
+                  variant='primary'
                   data-playwright-test-label='ask-for-help-button'
-                  className='btn-invert'
                   onClick={openHelpModal}
                 >
                   {t('buttons.ask-for-help')}
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 47c11f1381a..17227b13084 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';
@@ -400,8 +399,8 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 <Spacer size='medium' />
                 <Button
                   block={true}
-                  bsSize='medium'
-                  bsStyle='primary'
+                  size='medium'
+                  variant='primary'
                   onClick={() =>
                     this.handleSubmit(
                       solution,
@@ -412,11 +411,11 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
+                <Spacer size='xxSmall' />
                 <Button
                   block={true}
-                  bsSize='medium'
-                  bsStyle='primary'
-                  className='btn-invert'
+                  size='medium'
+                  variant='primary'
                   onClick={openHelpModal}
                 >
                   {t('buttons.ask-for-help')}
diff --git a/client/src/templates/Challenges/projects/tool-panel.tsx b/client/src/templates/Challenges/projects/tool-panel.tsx
index 2036bc917cd..4f100b4acb0 100644
--- a/client/src/templates/Challenges/projects/tool-panel.tsx
+++ b/client/src/templates/Challenges/projects/tool-panel.tsx
@@ -1,11 +1,12 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
+import { Button } from '@freecodecamp/ui';
 
 import { openModal } from '../redux/actions';
+import { Spacer } from '../../../components/helpers';
 
 const mapStateToProps = () => ({});
 
@@ -29,27 +30,24 @@ function ToolPanel({
   t
 }: ToolPanelProps): JSX.Element {
   return (
-    <>
+    <div>
       {guideUrl && (
-        <Button
-          block={true}
-          bsStyle='primary'
-          className='btn-invert'
-          href={guideUrl}
-          target='_blank'
-        >
-          {t('buttons.get-hint')}
-        </Button>
+        <>
+          <Button
+            block={true}
+            variant='primary'
+            href={guideUrl}
+            target='_blank'
+          >
+            {t('buttons.get-hint')}
+          </Button>
+          <Spacer size='xxSmall' />
+        </>
       )}
-      <Button
-        block={true}
-        bsStyle='primary'
-        className='btn-invert'
-        onClick={openHelpModal}
-      >
+      <Button block={true} variant='primary' onClick={openHelpModal}>
         {t('buttons.ask-for-help')}
       </Button>
-    </>
+    </div>
   );
 }
 
diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
index 1a26ed9d4cb..8da0cf59686 100644
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';
@@ -319,19 +318,15 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                 <Spacer size='medium' />
                 <Button
                   block={true}
-                  bsStyle='primary'
+                  variant='primary'
                   onClick={() =>
                     this.handleSubmit(solution, openCompletionModal)
                   }
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Button
-                  block={true}
-                  bsStyle='primary'
-                  className='btn-invert'
-                  onClick={openHelpModal}
-                >
+                <Spacer size='xxSmall' />
+                <Button block={true} variant='primary' onClick={openHelpModal}>
                   {t('buttons.ask-for-help')}
                 </Button>
                 <Spacer size='large' />
diff --git a/client/src/templates/Introduction/components/cert-challenge.tsx b/client/src/templates/Introduction/components/cert-challenge.tsx
index 4ade1f78ab0..7f92b7e8a95 100644
--- a/client/src/templates/Introduction/components/cert-challenge.tsx
+++ b/client/src/templates/Introduction/components/cert-challenge.tsx
@@ -1,9 +1,10 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import { navigate } from 'gatsby-link';
 import React, { useState, useEffect, MouseEvent } from 'react';
 import { useTranslation, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
+
 import {
   certSlugTypeMap,
   superBlockCertTypeMap
@@ -123,12 +124,11 @@ const CertChallenge = ({
         : createFlashMessage(honestyInfoMessage);
     };
   return (
-    <div className='block'>
+    <div>
       {isSignedIn && (
         <Button
           block={true}
-          bsStyle='primary'
-          className='cert-btn'
+          variant='primary'
           href={isCertified ? certLocation : `/settings#certification-settings`}
           onClick={() => (isCertified ? createClickHandler(certSlug) : false)}
         >
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 519943c8e00..3dad25775ce 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -161,7 +161,7 @@ button.map-title {
   background-color: var(--tertiary-background);
 }
 
-.block-ui .block {
+.block-ui div.block {
   background: var(--primary-background);
 }
 
diff --git a/cypress/e2e/default/learn/challenges/c-sharp-exam.ts b/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
index d1f1729b0c3..f68d8be6713 100644
--- a/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
+++ b/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
@@ -32,7 +32,7 @@ describe('C# Exam Challenge', () => {
         'be.visible'
       );
       cy.get(el.surveyAlert).should('not.exist');
-      cy.get(el.startExamBtn).should('be.disabled');
+      cy.get(el.startExamBtn).should('have.attr', 'aria-disabled');
     });
   });
 
@@ -51,10 +51,10 @@ describe('C# Exam Challenge', () => {
       cy.get(el.qualifiedAlert).should('not.exist');
       cy.get(el.prerequisitesAlert).should('not.exist');
       cy.get(el.surveyAlert).should('be.visible');
-      cy.get(el.startExamBtn).should('be.disabled');
+      cy.get(el.startExamBtn).should('have.attr', 'aria-disabled');
       cy.get(el.startSurveyBtn).click();
       cy.get(el.surveyModal).should('be.visible');
-      cy.get(el.submitSurveyBtn).should('be.disabled');
+      cy.get(el.submitSurveyBtn).should('have.attr', 'aria-disabled');
       cy.contains('Student developer').click();
       cy.contains('Novice (no prior experience').click();
       cy.get(el.submitSurveyBtn).should('be.enabled');
@@ -81,8 +81,8 @@ describe('C# Exam Challenge', () => {
       );
       cy.get(el.examTime).should('be.visible');
       cy.contains('Question 1 of 5').should('be.visible');
-      cy.get(el.prevQuestionBtn).should('be.disabled');
-      cy.get(el.nextQuestionBtn).should('be.disabled');
+      cy.get(el.prevQuestionBtn).should('have.attr', 'aria-disabled');
+      cy.get(el.nextQuestionBtn).should('have.attr', 'aria-disabled');
       cy.get(el.finishExamBtn).should('not.exist');
       cy.get(el.exitExamBtn).should('be.visible');
 
@@ -90,7 +90,7 @@ describe('C# Exam Challenge', () => {
       cy.get(el.examInput).eq(0).click();
       cy.get(el.nextQuestionBtn).click();
       cy.get(el.prevQuestionBtn).should('be.enabled');
-      cy.get(el.nextQuestionBtn).should('be.disabled');
+      cy.get(el.nextQuestionBtn).should('have.attr', 'aria-disabled');
       cy.contains('Question 2 of 5').should('be.visible');
 
       // answer the rest of the questions
diff --git a/cypress/e2e/default/learn/challenges/c-sharp.ts b/cypress/e2e/default/learn/challenges/c-sharp.ts
index 9d9bda5eac3..ea5c2e62dac 100644
--- a/cypress/e2e/default/learn/challenges/c-sharp.ts
+++ b/cypress/e2e/default/learn/challenges/c-sharp.ts
@@ -15,9 +15,8 @@ describe('C Sharp', () => {
     });
 
     it('renders the correct buttons', () => {
-      cy.get('.btn-primary').should('have.length', 2);
-      cy.contains('.btn-primary', 'Check your answer').should('be.visible');
-      cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
+      cy.contains('Check your answer').should('be.visible');
+      cy.contains('Ask for Help').should('be.visible');
     });
   });
 
@@ -28,10 +27,9 @@ describe('C Sharp', () => {
     });
 
     it('renders the correct buttons', () => {
-      cy.get('.btn-primary').should('have.length', 3);
-      cy.contains('.btn-primary', 'Link Account').should('be.visible');
-      cy.contains('.btn-primary', 'Verify Trophy').should('be.visible');
-      cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
+      cy.contains('Link Account').should('be.visible');
+      cy.contains('Verify Trophy').should('be.visible');
+      cy.contains('Ask for Help').should('be.visible');
     });
   });
 });
diff --git a/cypress/e2e/default/learn/challenges/projects.ts b/cypress/e2e/default/learn/challenges/projects.ts
index 9b6c6efb217..6448f3b4a9d 100644
--- a/cypress/e2e/default/learn/challenges/projects.ts
+++ b/cypress/e2e/default/learn/challenges/projects.ts
@@ -245,9 +245,10 @@ describe('project submission', () => {
       .type('https://replit.com/@camperbot/python-project#main.py');
 
     cy.contains("I've completed this challenge").click();
+    cy.get('[data-cy=completion-modal]').should('exist');
     cy.get('[data-cy=submit-challenge]').as('submitChallenge');
     cy.get('@submitChallenge').click();
-    cy.get('@submitChallenge').should('be.disabled');
+    cy.get('@submitChallenge').should('have.attr', 'aria-disabled');
     // After the api responds, the button is enabled, but since the modal leaves
     // the DOM we just check for that.
     cy.get('[data-cy=completion-modal]').should('not.exist');
diff --git a/e2e/reset-modal.spec.ts b/e2e/reset-modal.spec.ts
index f6ff73952a1..4e0072f4d68 100644
--- a/e2e/reset-modal.spec.ts
+++ b/e2e/reset-modal.spec.ts
@@ -86,7 +86,7 @@ test('User can reset challenge', async ({ page }) => {
   ).not.toBeVisible();
 });
 
-test('User can reset classic challenge', async ({ page }) => {
+test('User can reset classic challenge', async ({ page, isMobile }) => {
   await page.goto(
     '/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code'
   );
@@ -97,7 +97,9 @@ test('User can reset classic challenge', async ({ page }) => {
 
   await page.getByLabel(editorPaneLabel).fill(challengeSolution);
 
-  const submitButton = page.getByLabel('Run the tests use shortcut Ctrl+enter');
+  const submitButton = page.getByRole('button', {
+    name: isMobile ? translations.buttons.run : translations.buttons['run-test']
+  });
   await submitButton.click();
 
   await expect(