diff --git a/.gitignore b/.gitignore
index e30232e3..7e293758 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,4 @@ public
 # Cookie cutter
 dist/
 .idea
+.vscode
diff --git a/src/components/course-enrollments/CourseEnrollments.jsx b/src/components/course-enrollments/CourseEnrollments.jsx
index 42095745..548b75f5 100644
--- a/src/components/course-enrollments/CourseEnrollments.jsx
+++ b/src/components/course-enrollments/CourseEnrollments.jsx
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { breakpoints, StatusAlert } from '@edx/paragon';
+import { breakpoints, Alert } from '@edx/paragon';
+import { Warning, CheckCircle } from '@edx/paragon/icons';
 import { AppContext } from '@edx/frontend-platform/react';
-import { faExclamationTriangle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MediaQuery from 'react-responsive';
 import { LoadingSpinner } from '../loading-spinner';
 
@@ -50,43 +49,34 @@ export class CourseEnrollments extends Component {
   );
 
   renderError = () => (
-    <StatusAlert
-      alertType="danger"
-      dialog={(
-        <div className="d-flex">
-          <div>
-            <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
-          </div>
-          <div>
-            An error occurred while retrieving your course enrollments. Please try again.
-          </div>
-        </div>
-      )}
+    <Alert
+      variant="danger"
       dismissible={false}
-      open
-    />
+      icon={Warning}
+      show
+    >
+      <div className="d-flex">
+        An error occurred while retrieving your course enrollments. Please try again.
+      </div>
+    </Alert>
   );
 
   renderMarkCourseCompleteSuccessAlert = () => {
     const { modifyIsMarkCourseCompleteSuccess } = this.props;
     return (
-      <StatusAlert
-        alertType="success"
-        dialog={(
-          <div className="d-flex">
-            <div>
-              <FontAwesomeIcon className="mr-2" icon={faCheckCircle} />
-            </div>
-            <div>
-              Your course was marked as complete.
-            </div>
-          </div>
-        )}
+      <Alert
+        variant="success"
+        icon={CheckCircle}
         onClose={() => {
           modifyIsMarkCourseCompleteSuccess({ isSuccess: false });
         }}
-        open
-      />
+        show
+        dismissible
+      >
+        <div className="d-flex">
+          Your course was marked as complete.
+        </div>
+      </Alert>
     );
   };
 
diff --git a/src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx b/src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx
index 4c333305..84c2e375 100644
--- a/src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx
+++ b/src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx
@@ -2,10 +2,9 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-  Input, Modal, StatusAlert, StatefulButton,
+  Input, Modal, Alert, StatefulButton,
 } from '@edx/paragon';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Warning } from '@edx/paragon/icons';
 
 import { updateEmailSettings } from './data';
 
@@ -120,25 +119,14 @@ class EmailSettingsModal extends Component {
         body={(
           <>
             {error && (
-              <StatusAlert
-                alertType="danger"
-                dialog={(
-                  <div className="d-flex">
-                    <div>
-                      <FontAwesomeIcon
-                        className="mr-3"
-                        icon={faExclamationTriangle}
-                      />
-                    </div>
-                    <div>
-                      An error occurred while saving your email settings. Please
-                      try again.
-                    </div>
-                  </div>
-                )}
+              <Alert
+                variant="danger"
                 dismissible={false}
-                open
-              />
+                icon={Warning}
+                show
+              >
+                An error occurred while saving your email settings. Please try again.
+              </Alert>
             )}
             <div className="form-check">
               <Input
diff --git a/src/components/course-enrollments/tests/CourseEnrollments.test.jsx b/src/components/course-enrollments/tests/CourseEnrollments.test.jsx
index 02d8776c..733e9ed2 100644
--- a/src/components/course-enrollments/tests/CourseEnrollments.test.jsx
+++ b/src/components/course-enrollments/tests/CourseEnrollments.test.jsx
@@ -210,7 +210,7 @@ describe('<CourseEnrollments />', () => {
         />
       </AppContext.Provider>
     ));
-    wrapper.find('.alert .btn.close').simulate('click');
+    wrapper.find('.alert-success .btn').simulate('click');
     expect(mockModifyIsMarkCourseCompleteSuccess).toBeCalledTimes(1);
   });
 });
diff --git a/src/components/course-enrollments/tests/__snapshots__/CourseEnrollments.test.jsx.snap b/src/components/course-enrollments/tests/__snapshots__/CourseEnrollments.test.jsx.snap
index 6322c67a..65528ae3 100644
--- a/src/components/course-enrollments/tests/__snapshots__/CourseEnrollments.test.jsx.snap
+++ b/src/components/course-enrollments/tests/__snapshots__/CourseEnrollments.test.jsx.snap
@@ -2,36 +2,37 @@
 
 exports[`<CourseEnrollments /> renders course enrollments correctly with error 1`] = `
 <div
-  className="alert fade alert-danger show"
-  hidden={false}
+  className="fade alert-content alert alert-danger show"
   role="alert"
 >
+  <span
+    className="pgn__icon alert-icon"
+  >
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
   <div
-    className="alert-dialog"
+    className="pgn__alert-message-wrapper"
   >
     <div
-      className="d-flex"
+      className="alert-message-content"
     >
-      <div>
-        <svg
-          aria-hidden="true"
-          className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
-          data-icon="exclamation-triangle"
-          data-prefix="fas"
-          focusable="false"
-          role="img"
-          style={Object {}}
-          viewBox="0 0 576 512"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-            fill="currentColor"
-            style={Object {}}
-          />
-        </svg>
-      </div>
-      <div>
+      <div
+        className="d-flex"
+      >
         An error occurred while retrieving your course enrollments. Please try again.
       </div>
     </div>
@@ -58,53 +59,55 @@ exports[`<CourseEnrollments /> renders course enrollments correctly with loading
 
 exports[`<CourseEnrollments /> renders course enrollments correctly with mark course as complete success status alert 1`] = `
 <div
-  className="alert fade alert-dismissible alert-success show"
-  hidden={false}
+  className="fade alert-content alert alert-success show"
   role="alert"
 >
-  <button
-    aria-label="Close"
-    className="btn close"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
+  <span
+    className="pgn__icon alert-icon"
   >
-    <span
-      aria-hidden="true"
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      ×
-    </span>
-  </button>
+      <path
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
   <div
-    className="alert-dialog"
+    className="pgn__alert-message-wrapper"
   >
     <div
-      className="d-flex"
+      className="alert-message-content"
     >
-      <div>
-        <svg
-          aria-hidden="true"
-          className="svg-inline--fa fa-check-circle fa-w-16 mr-2"
-          data-icon="check-circle"
-          data-prefix="fas"
-          focusable="false"
-          role="img"
-          style={Object {}}
-          viewBox="0 0 512 512"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-            fill="currentColor"
-            style={Object {}}
-          />
-        </svg>
-      </div>
-      <div>
+      <div
+        className="d-flex"
+      >
         Your course was marked as complete.
       </div>
     </div>
+    <div
+      className="pgn__alert-actions pgn__action-row"
+    >
+      <span
+        className="pgn__action-row-spacer"
+      />
+      <button
+        className="btn btn-tertiary btn-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Dismiss
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/program/ProgramPage.jsx b/src/components/program/ProgramPage.jsx
index fc1c32e8..784cbdb3 100644
--- a/src/components/program/ProgramPage.jsx
+++ b/src/components/program/ProgramPage.jsx
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import MediaQuery from 'react-responsive';
-import { breakpoints, StatusAlert } from '@edx/paragon';
+import { breakpoints, Alert } from '@edx/paragon';
+import { Warning } from '@edx/paragon/icons';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Layout, MainContent, Sidebar } from '../layout';
 import { LoadingSpinner } from '../loading-spinner';
@@ -78,27 +77,22 @@ class ProgramPage extends Component {
 
   renderError = () => (
     <div className="container my-4">
-      <StatusAlert
-        alertType="danger"
-        dialog={(
-          <div className="d-flex">
-            <div>
-              <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
-            </div>
-            <div>
-              You are not authorized to view this page.
-              This page is reserved for Masters students only.
-              You may access public edX courses on
-              {' '}
-              <a className="alert-link" href="https://edx.org">edX.org</a>.
-              If you are a Masters student and believe you should have access,
-              please contact your advisor at the university for further assistance.
-            </div>
-          </div>
-        )}
+      <Alert
+        variant="danger"
+        icon={Warning}
         dismissible={false}
-        open
-      />
+        show
+      >
+        <div className="d-flex">
+          You are not authorized to view this page.
+          This page is reserved for Masters students only.
+          You may access public edX courses on
+          {' '}
+          <Alert.Link href="https://edx.org">edX.org</Alert.Link>.
+          If you are a Masters student and believe you should have access,
+          please contact your advisor at the university for further assistance.
+        </div>
+      </Alert>
     </div>
   );
 
diff --git a/src/components/programs-list/ProgramListPage.jsx b/src/components/programs-list/ProgramListPage.jsx
index 15bbb123..657eaae9 100644
--- a/src/components/programs-list/ProgramListPage.jsx
+++ b/src/components/programs-list/ProgramListPage.jsx
@@ -3,9 +3,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
-import { StatusAlert } from '@edx/paragon';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Alert } from '@edx/paragon';
+import { Warning } from '@edx/paragon/icons';
 import { Layout } from '../layout';
 import { LoadingSpinner } from '../loading-spinner';
 
@@ -79,19 +78,14 @@ export class ProgramListPage extends Component {
   };
 
   renderError = ({ message }) => (
-    <StatusAlert
-      alertType="danger"
-      dialog={(
-        <div className="d-flex">
-          <div>
-            <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
-          </div>
-          <div>{message}</div>
-        </div>
-      )}
+    <Alert
+      variant="danger"
+      icon={Warning}
       dismissible={false}
-      open
-    />
+      show
+    >
+      {message}
+    </Alert>
   );
 
   render() {
diff --git a/src/components/programs-list/tests/ProgramListPage.test.jsx b/src/components/programs-list/tests/ProgramListPage.test.jsx
index dcf3cd1a..2587ed5f 100644
--- a/src/components/programs-list/tests/ProgramListPage.test.jsx
+++ b/src/components/programs-list/tests/ProgramListPage.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { IntlProvider } from 'react-intl';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { ProgramListPage } from '../ProgramListPage';
@@ -114,6 +114,6 @@ describe('ProgramListPage', () => {
     wrapper.setProps({ enrolledPrograms: data });
 
     expect(wrapper.find('.table-responsive').exists()).toBeFalsy();
-    expect(wrapper.find(StatusAlert).exists()).toBeTruthy();
+    expect(wrapper.find(Alert).exists()).toBeTruthy();
   });
 });
diff --git a/src/components/programs-list/tests/__snapshots__/ProgramListPage.test.jsx.snap b/src/components/programs-list/tests/__snapshots__/ProgramListPage.test.jsx.snap
index 00db3967..3a7b3908 100644
--- a/src/components/programs-list/tests/__snapshots__/ProgramListPage.test.jsx.snap
+++ b/src/components/programs-list/tests/__snapshots__/ProgramListPage.test.jsx.snap
@@ -420,38 +420,35 @@ exports[`ProgramListPage renders fetching program error page when there are issu
       className="container my-4"
     >
       <div
-        className="alert fade alert-danger show"
-        hidden={false}
+        className="fade alert-content alert alert-danger show"
         role="alert"
       >
+        <span
+          className="pgn__icon alert-icon"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         <div
-          className="alert-dialog"
+          className="pgn__alert-message-wrapper"
         >
           <div
-            className="d-flex"
+            className="alert-message-content"
           >
-            <div>
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
-                data-icon="exclamation-triangle"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
-            </div>
-            <div>
-              An error occurred while fetching your program enrollments. Please try again later.
-            </div>
+            An error occurred while fetching your program enrollments. Please try again later.
           </div>
         </div>
       </div>