diff --git a/docs/decisions/0005-moment-to-dayjs.rst b/docs/decisions/0005-moment-to-dayjs.rst
new file mode 100644
index 0000000000..edc8a2cdf3
--- /dev/null
+++ b/docs/decisions/0005-moment-to-dayjs.rst
@@ -0,0 +1,46 @@
+5. Replacing Moment.js library with Day.js
+============================================================
+
+Status
+******
+
+In progress
+
+Context
+*******
+
+Moment.js is a widely used time and date library, but the creators have decided to make it a legacy project that no 
+longer fixes bugs or adds new features. Because of this, and because of the large size that the Moment.js package takes up 
+(4.23 MB according to npm and the minified size is 6.3KB), we are choosing to replace all instances of Moment.js 
+in our enterprise repositories. 
+
+Decisions
+*********
+
+In its stead, we are choosing to replace this library with the Day.js project. This is one of the projects that were
+explicitly recommended from the Moment.js team as a recommended alternative. Out of the box, it supports basic usage,
+and additional plugins have been identified based on a look through our current usages of Moment.js in our codebase. 
+The plugins that we will need to add are Duration, UTC, and Timezone, with more possibilities available for future use. 
+
+Day.js also has almost identical functions to Moment, and was definitely created with this in mind. So most files will
+just need to replace the package name and nothing else 
+
+``moment(date).format('MMMM D, YYYY') -> dayjs(date).format('MMMM D, YYYY')``
+
+Consequences
+************
+
+By choosing Day.js over another, larger library like date-fns, we sacrifice more of the out of the box functionality
+that comes from having a bigger library. Also, day.js does not support tree-shaking like the date-fns library does.
+However, by only installing needed plugins and starting from a much smaller package size, Day.js will considerably 
+decrease the JS bundle size while still maintaining the core functionality.
+
+Alternatives Considered
+***********************
+
+date-fns
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Date-fns has a 162.1 kB bundle size compared to 6.4 kB of day.js bundle. Since the majority of the functionality
+we are using with these libraries is basic, and the intended goal is to ultimately decrease the bundle size, 
+opting for the more lightweight library was the preferred path forward. 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7cb996d04f..ea06117091 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,11 +17,6 @@
         "@edx/frontend-enterprise-utils": "3.2.0",
         "@edx/frontend-platform": "4.0.1",
         "@edx/paragon": "20.39.2",
-        "@fortawesome/fontawesome-svg-core": "1.2.35",
-        "@fortawesome/free-brands-svg-icons": "5.15.3",
-        "@fortawesome/free-regular-svg-icons": "5.15.3",
-        "@fortawesome/free-solid-svg-icons": "5.15.3",
-        "@fortawesome/react-fontawesome": "0.1.14",
         "algoliasearch": "4.8.3",
         "axios-mock-adapter": "1.19.0",
         "classnames": "2.2.6",
@@ -29,6 +24,7 @@
         "color-contrast-checker": "^2.1.0",
         "core-js": "3.7.0",
         "dash-embedded-component": "file:packages/dash-embedded-component-2.0.2.tgz",
+        "dayjs": "^1.11.9",
         "file-saver": "1.3.8",
         "font-awesome": "4.7.0",
         "frontend-platform-shim": "file:packages/frontend-platform-shim",
@@ -37,7 +33,6 @@
         "jest-environment-jsdom": "26.6.1",
         "lodash": "4.17.21",
         "lodash.debounce": "4.0.8",
-        "moment": "2.27.0",
         "prop-types": "15.7.2",
         "react": "16.14.0",
         "react-dom": "16.13.1",
@@ -3994,6 +3989,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
       "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
       "hasInstallScript": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -4003,30 +3999,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
       "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
       "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
-      "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz",
-      "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==",
-      "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.35"
       },
@@ -4039,6 +4012,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
       "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
       "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.35"
       },
@@ -4050,6 +4024,7 @@
       "version": "0.1.14",
       "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
       "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "peer": true,
       "dependencies": {
         "prop-types": "^15.7.2"
       },
@@ -9285,6 +9260,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.9",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -16838,14 +16818,6 @@
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
     },
-    "node_modules/moment": {
-      "version": "2.27.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
-      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
diff --git a/package.json b/package.json
index b38707ffd8..c358cbf26d 100644
--- a/package.json
+++ b/package.json
@@ -33,11 +33,6 @@
     "@edx/frontend-enterprise-utils": "3.2.0",
     "@edx/frontend-platform": "4.0.1",
     "@edx/paragon": "20.39.2",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-regular-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14",
     "algoliasearch": "4.8.3",
     "axios-mock-adapter": "1.19.0",
     "classnames": "2.2.6",
@@ -45,6 +40,7 @@
     "color-contrast-checker": "^2.1.0",
     "core-js": "3.7.0",
     "dash-embedded-component": "file:packages/dash-embedded-component-2.0.2.tgz",
+    "dayjs": "^1.11.9",
     "file-saver": "1.3.8",
     "font-awesome": "4.7.0",
     "frontend-platform-shim": "file:packages/frontend-platform-shim",
@@ -53,7 +49,6 @@
     "jest-environment-jsdom": "26.6.1",
     "lodash": "4.17.21",
     "lodash.debounce": "4.0.8",
-    "moment": "2.27.0",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.13.1",
diff --git a/src/components/Admin/AdminCards.jsx b/src/components/Admin/AdminCards.jsx
index d1afe4ac95..b367dff596 100644
--- a/src/components/Admin/AdminCards.jsx
+++ b/src/components/Admin/AdminCards.jsx
@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Award, Check, Groups, RemoveRedEye,
+} from '@edx/paragon/icons';
 
 import NumberCard from '../NumberCard';
 
@@ -17,7 +20,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.registeredLearners',
           defaultMessage: 'total number of learners registered',
         }),
-        iconClassName: 'fa fa-users',
+        icon: Groups,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.registeredUnenrolledLearners',
@@ -32,7 +35,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.enrolledOneCourse',
           defaultMessage: 'learners enrolled in at least one course',
         }),
-        iconClassName: 'fa fa-check',
+        icon: Check,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.enrolledLearners',
@@ -53,7 +56,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.activeLearnersPastWeek',
           defaultMessage: 'active learners in the past week',
         }),
-        iconClassName: 'fa fa-eye',
+        icon: RemoveRedEye,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.learnersActiveWeek',
@@ -77,7 +80,7 @@ class AdminCards extends React.Component {
       courseCompletions: {
         ref: React.createRef(),
         description: 'course completions',
-        iconClassName: 'fa fa-trophy',
+        icon: Award,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.completedLearners',
@@ -107,7 +110,7 @@ class AdminCards extends React.Component {
           id={cardKey}
           title={title}
           description={card.description}
-          iconClassName={card.iconClassName}
+          icon={card.icon}
           detailActions={card.actions}
         />
       </div>
diff --git a/src/components/Admin/AdminSearchForm.jsx b/src/components/Admin/AdminSearchForm.jsx
index 92d14f7ed8..3fcec0a454 100644
--- a/src/components/Admin/AdminSearchForm.jsx
+++ b/src/components/Admin/AdminSearchForm.jsx
@@ -1,10 +1,10 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { Form } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';
@@ -80,7 +80,7 @@ class AdminSearchForm extends React.Component {
                 <Form.Label className="search-label mb-2">
                   Filter by start date
                   <IconWithTooltip
-                    icon={faInfoCircle}
+                    icon={Info}
                     altText="More information"
                     tooltipText="A start date can be selected after the course name is selected."
                   />
@@ -101,7 +101,7 @@ class AdminSearchForm extends React.Component {
                       value={date}
                       key={date}
                     >
-                      {moment(date).format('MMMM D, YYYY')}
+                      {dayjs(date).format('MMMM D, YYYY')}
                     </option>
                   ))}
                 </Form.Control>
diff --git a/src/components/Admin/EmbeddedSubscription.jsx b/src/components/Admin/EmbeddedSubscription.jsx
index 22d73e3a28..24bf7575bc 100644
--- a/src/components/Admin/EmbeddedSubscription.jsx
+++ b/src/components/Admin/EmbeddedSubscription.jsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
+import dayjs from 'dayjs';
 import { useParams, Link } from 'react-router-dom';
 import { Form, Icon } from '@edx/paragon';
-import moment from 'moment';
 import { Lightbulb, ArrowOutward } from '@edx/paragon/icons';
 import ConnectedSubscriptionDetailPage from './SubscriptionDetailPage';
 import { SubscriptionContext } from '../subscriptions/SubscriptionData';
@@ -15,7 +15,7 @@ const EmbeddedSubscription = () => {
   const [subscriptionUUID, setSubscriptionUUID] = useState(null);
   const [firstLoad, setFirstLoad] = useState(true);
   const sortedSubscriptions = sortSubscriptionsByStatus(subscriptions);
-  const activeSubscriptions = sortedSubscriptions.filter(c => !moment().isAfter(c.expirationDate));
+  const activeSubscriptions = sortedSubscriptions.filter(c => !dayjs().isAfter(c.expirationDate));
   const match = { params: { subscriptionUUID } };
   if (!loading && activeSubscriptions.length > 0 && firstLoad) {
     match.params.subscriptionUUID = activeSubscriptions[0].uuid;
diff --git a/src/components/Admin/SubscriptionDetails.jsx b/src/components/Admin/SubscriptionDetails.jsx
index 71d556ac3e..2c94bedf5b 100644
--- a/src/components/Admin/SubscriptionDetails.jsx
+++ b/src/components/Admin/SubscriptionDetails.jsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   Row, Col, Toast, Button,
 } from '@edx/paragon';
@@ -37,7 +37,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
           <div className="mt-3 d-flex align-items-center">
             <div className="mr-5">
               <span>
-                {moment(subscription.startDate).format('MMMM D, YYYY')} - {moment(subscription.expirationDate).format('MMMM D, YYYY')}
+                {dayjs(subscription.startDate).format('MMMM D, YYYY')} - {dayjs(subscription.expirationDate).format('MMMM D, YYYY')}
               </span>
             </div>
           </div>
diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
index 13fb8a3fa2..fd763719cf 100644
--- a/src/components/Admin/__snapshots__/Admin.test.jsx.snap
+++ b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
@@ -219,10 +219,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon25"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -256,14 +270,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon26"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -312,10 +340,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon27"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -349,14 +391,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon28"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -421,10 +477,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon29"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -458,14 +528,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon30"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -546,10 +630,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon31"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -583,14 +681,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon32"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -682,10 +794,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon33"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -724,11 +850,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon34"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -798,10 +932,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon75"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -835,14 +983,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon76"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -891,10 +1053,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon77"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -928,14 +1104,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon78"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1000,10 +1190,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon79"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1037,14 +1241,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon80"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1125,10 +1343,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon81"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1162,14 +1394,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon82"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1261,10 +1507,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon83"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -1303,11 +1563,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon84"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -1377,10 +1645,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon85"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1414,14 +1696,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon86"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1470,10 +1766,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon87"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1507,14 +1817,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon88"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1579,10 +1903,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon89"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1616,14 +1954,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon90"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1704,10 +2056,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon91"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1741,14 +2107,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon92"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1840,10 +2220,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon93"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -1886,11 +2280,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon94"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -1960,10 +2362,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon95"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1997,14 +2413,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon96"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2053,10 +2483,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon97"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2090,14 +2534,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon98"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2162,10 +2620,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon99"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2199,14 +2671,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon100"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2287,10 +2773,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon101"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2324,14 +2824,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon102"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2451,11 +2965,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon103"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download full report (CSV)
             </button>
           </div>
@@ -2477,7 +2999,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field104"
+                    htmlFor="form-field6"
                   >
                     Filter by course
                   </label>
@@ -2486,7 +3008,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   >
                     <select
                       className="form-control"
-                      id="form-field104"
+                      id="form-field6"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -2508,31 +3030,33 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field105"
+                    htmlFor="form-field7"
                   >
                     Filter by start date
-                    <svg
+                    <span
                       alt="More information"
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-info-circle fa-w-16 ml-1"
-                      data-icon="info-circle"
-                      data-prefix="fas"
-                      focusable="false"
+                      className="pgn__icon ml-1"
                       onBlur={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 512 512"
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
-                        d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
+                      <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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
                   </label>
                   <div
                     className="pgn__form-control-decorator-group w-100"
@@ -2540,7 +3064,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                     <select
                       className="form-control"
                       disabled={true}
-                      id="form-field105"
+                      id="form-field7"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -2575,7 +3099,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   >
                     <label
                       className="m-0"
-                      htmlFor="pgn-searchfield-input-106"
+                      htmlFor="pgn-searchfield-input-8"
                     >
                       <span
                         className="sr-only"
@@ -2587,7 +3111,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                       className="form-control"
                       data-hj-suppress={true}
                       disabled={false}
-                      id="pgn-searchfield-input-106"
+                      id="pgn-searchfield-input-8"
                       name="searchfield-input"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -2698,10 +3222,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon1"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2735,14 +3273,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon2"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2791,10 +3343,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon3"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2828,14 +3394,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon4"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2900,10 +3480,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon5"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2937,14 +3531,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon6"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3025,10 +3633,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon7"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3062,14 +3684,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon8"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3189,11 +3825,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon9"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download full report (CSV)
             </button>
           </div>
@@ -3215,7 +3859,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field10"
+                    htmlFor="form-field1"
                   >
                     Filter by course
                   </label>
@@ -3224,7 +3868,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   >
                     <select
                       className="form-control"
-                      id="form-field10"
+                      id="form-field1"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -3246,31 +3890,33 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field11"
+                    htmlFor="form-field2"
                   >
                     Filter by start date
-                    <svg
+                    <span
                       alt="More information"
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-info-circle fa-w-16 ml-1"
-                      data-icon="info-circle"
-                      data-prefix="fas"
-                      focusable="false"
+                      className="pgn__icon ml-1"
                       onBlur={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 512 512"
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
-                        d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
+                      <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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
                   </label>
                   <div
                     className="pgn__form-control-decorator-group w-100"
@@ -3278,7 +3924,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                     <select
                       className="form-control"
                       disabled={true}
-                      id="form-field11"
+                      id="form-field2"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -3313,7 +3959,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   >
                     <label
                       className="m-0"
-                      htmlFor="pgn-searchfield-input-12"
+                      htmlFor="pgn-searchfield-input-3"
                     >
                       <span
                         className="sr-only"
@@ -3325,7 +3971,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                       className="form-control"
                       data-hj-suppress={true}
                       disabled={false}
-                      id="pgn-searchfield-input-12"
+                      id="pgn-searchfield-input-3"
                       name="searchfield-input"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -3436,10 +4082,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon65"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3473,14 +4133,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon66"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3529,10 +4203,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon67"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3566,14 +4254,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon68"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3638,10 +4340,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon69"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3675,14 +4391,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon70"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3763,10 +4493,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon71"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3800,14 +4544,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon72"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3899,10 +4657,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon73"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -3945,11 +4717,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon74"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -4019,10 +4799,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon55"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4056,14 +4850,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon56"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4112,10 +4920,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon57"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4149,14 +4971,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon58"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4221,10 +5057,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon59"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4258,14 +5108,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon60"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4346,10 +5210,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon61"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4383,14 +5261,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon62"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4482,10 +5374,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon63"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -4528,11 +5434,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon64"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -4602,10 +5516,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon35"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4639,14 +5567,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon36"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4695,10 +5637,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon37"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4732,14 +5688,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon38"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4804,10 +5774,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon39"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4841,14 +5825,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon40"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4929,10 +5927,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon41"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4966,14 +5978,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon42"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5065,10 +6091,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon43"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -5111,11 +6151,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon44"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -5185,10 +6233,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon15"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5222,14 +6284,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon16"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5278,10 +6354,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon17"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5315,14 +6405,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon18"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5387,10 +6491,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon19"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5424,14 +6542,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon20"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5512,10 +6644,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon21"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5549,14 +6695,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon22"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5648,10 +6808,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon23"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -5690,11 +6864,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon24"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -5764,10 +6946,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon45"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5801,14 +6997,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon46"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5857,10 +7067,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon47"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5894,14 +7118,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon48"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5966,10 +7204,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon49"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -6003,14 +7255,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon50"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -6091,10 +7357,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon51"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <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="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -6128,14 +7408,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon52"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <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="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -6227,10 +7521,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon53"
-              />
+                className="pgn__icon mr-2"
+              >
+                <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="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -6273,11 +7581,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon54"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
diff --git a/src/components/Admin/index.jsx b/src/components/Admin/index.jsx
index 4f95e3e94a..45db4b5059 100644
--- a/src/components/Admin/index.jsx
+++ b/src/components/Admin/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Alert, Icon } from '@edx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Error, Undo } from '@edx/paragon/icons';
 import { Link } from 'react-router-dom';
 
 import Hero from '../Hero';
@@ -225,7 +225,7 @@ class Admin extends React.Component {
 
     return (
       <Link to={path} className="btn btn-sm btn-outline-primary ml-0 ml-md-3 mr-3">
-        <Icon className="fa fa-undo mr-2" />
+        <Icon src={Undo} className="mr-2" />
         Reset to {this.getMetadataForAction().title}
       </Link>
     );
@@ -242,7 +242,7 @@ class Admin extends React.Component {
     const resetLink = resetQuery ? `${pathname}?${resetQuery}` : pathname;
     return (
       <Link id="reset-filters" to={resetLink} className="btn btn-sm btn-outline-primary">
-        <Icon className="fa fa-undo mr-2" />
+        <Icon src={Undo} className="mr-2" />
         Reset Filters
       </Link>
     );
diff --git a/src/components/Admin/licenses/LicenseManagementTable/index.jsx b/src/components/Admin/licenses/LicenseManagementTable/index.jsx
index e39c4fa291..e15ed547ea 100644
--- a/src/components/Admin/licenses/LicenseManagementTable/index.jsx
+++ b/src/components/Admin/licenses/LicenseManagementTable/index.jsx
@@ -2,17 +2,18 @@ import _ from 'lodash';
 import React, {
   useCallback, useMemo, useContext, useState,
 } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import dayjs from 'dayjs';
+
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import {
   DataTable,
   TextFilter,
   CheckboxFilter,
   Toast,
 } from '@edx/paragon';
-import debounce from 'lodash.debounce';
-import moment from 'moment';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
-import PropTypes from 'prop-types';
 import { SubscriptionContext } from '../../../subscriptions/SubscriptionData';
 import { SubscriptionDetailContext } from '../../../subscriptions/SubscriptionDetailContextProvider';
 import {
@@ -77,7 +78,7 @@ const LicenseManagementTable = ({ subscriptionUUID }) => {
     setUserStatusFilter,
   } = useContext(SubscriptionDetailContext);
 
-  const isExpired = moment().isAfter(subscription.expirationDate);
+  const isExpired = dayjs().isAfter(subscription.expirationDate);
 
   const sendStatusFilterEvent = useCallback((statusFilter) => {
     sendEnterpriseTrackEvent(
diff --git a/src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.jsx b/src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.jsx
index a0a28d69a3..62a4035ff4 100644
--- a/src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.jsx
+++ b/src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Popover, Button, OverlayTrigger } from '@edx/paragon';
+import dayjs from 'dayjs';
 
-import moment from 'moment';
+import { Popover, Button, OverlayTrigger } from '@edx/paragon';
 
 import { configuration } from '../../../config';
 
@@ -51,7 +51,7 @@ CourseNameCell.propTypes = {
 
 export const FormattedDateCell = ({ startValue, endValue }) => (
   <span>
-    {moment(startValue).format('MMM D, YYYY')} - {moment(endValue).format('MMM D, YYYY')}
+    {dayjs(startValue).format('MMM D, YYYY')} - {dayjs(endValue).format('MMM D, YYYY')}
   </span>
 );
 
diff --git a/src/components/CodeAssignmentModal/constants.jsx b/src/components/CodeAssignmentModal/constants.jsx
index 995adefa65..a1f427ebd1 100644
--- a/src/components/CodeAssignmentModal/constants.jsx
+++ b/src/components/CodeAssignmentModal/constants.jsx
@@ -1,4 +1,4 @@
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Info } from '@edx/paragon/icons';
 import { MODAL_TYPES } from '../EmailTemplateForm/constants';
 import { getTemplateEmailFields } from '../EmailTemplateForm';
 import CheckboxWithTooltip from '../ReduxFormCheckbox/CheckboxWithTooltip';
@@ -20,7 +20,7 @@ export const getAssignmentModalFields = formatMessage => {
       id: EMAIL_TEMPLATE_NUDGE_EMAIL_ID,
       component: CheckboxWithTooltip,
       className: 'auto-reminder-wrapper',
-      icon: faInfoCircle,
+      icon: Info,
       altText: formatMessage(messages.modalAltText),
       tooltipText: formatMessage(messages.modalTooltipText),
       label: formatMessage(messages.modalFieldLabel),
diff --git a/src/components/CodeAssignmentModal/index.jsx b/src/components/CodeAssignmentModal/index.jsx
index e492fef0b2..270411d242 100644
--- a/src/components/CodeAssignmentModal/index.jsx
+++ b/src/components/CodeAssignmentModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Icon, Modal, Form,
+  Button, Modal, Form, Spinner,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -418,7 +418,7 @@ export class BaseCodeAssignmentModal extends React.Component {
             data-testid={SUBMIT_BUTTON_TEST_ID}
           >
             <>
-              {mode === MODAL_TYPES.assign && submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+              {mode === MODAL_TYPES.assign && submitting && <Spinner animation="border" className="mr-2" variant="light" size="sm" />}
               {`Assign ${isBulkAssign ? 'Codes' : 'Code'}`}
             </>
           </Button>,
diff --git a/src/components/CodeManagement/ManageCodesTab.jsx b/src/components/CodeManagement/ManageCodesTab.jsx
index 23f4dd7195..1e7e3cb61e 100644
--- a/src/components/CodeManagement/ManageCodesTab.jsx
+++ b/src/components/CodeManagement/ManageCodesTab.jsx
@@ -9,7 +9,9 @@ import {
   Icon,
   Pagination,
 } from '@edx/paragon';
-import { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';
+import {
+  CheckCircle, Info, Plus, SpinnerIcon, WarningFilled,
+} from '@edx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import CodeSearchResults from '../CodeSearchResults';
@@ -277,7 +279,7 @@ class ManageCodesTab extends React.Component {
               disabled={loading}
             >
               <>
-                <Icon className="fa fa-refresh mr-2" />
+                <Icon data-testid="refresh-data" className="mr-2" src={SpinnerIcon} />
                 Refresh data
               </>
             </Button>
@@ -286,7 +288,7 @@ class ManageCodesTab extends React.Component {
               to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.codeManagement}/request-codes`}
             >
               <>
-                <Icon className="fa fa-plus mr-2" />
+                <Icon src={Plus} />
                 Request more codes
               </>
             </Link>
diff --git a/src/components/CodeManagement/ManageRequestsTab.jsx b/src/components/CodeManagement/ManageRequestsTab.jsx
index 4525567dad..2d51a43111 100644
--- a/src/components/CodeManagement/ManageRequestsTab.jsx
+++ b/src/components/CodeManagement/ManageRequestsTab.jsx
@@ -1,8 +1,9 @@
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import dayjs from 'dayjs';
+
 import { Stack } from '@edx/paragon';
-import moment from 'moment';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import SubsidyRequestManagementTable, {
@@ -41,9 +42,9 @@ const ManageRequestsTab = ({
     return <LoadingMessage className="coupons mt-3" />;
   }
 
-  const now = moment();
+  const now = dayjs();
   const coupons = couponsData.results;
-  const hasAvailableCodes = coupons.some(coupon => moment(coupon.endDate) > now && coupon.numUnassigned > 0);
+  const hasAvailableCodes = coupons.some(coupon => dayjs(coupon.endDate) > now && coupon.numUnassigned > 0);
 
   return (
     <Stack gap={2}>
diff --git a/src/components/CodeManagement/tests/ManageCodesTab.test.jsx b/src/components/CodeManagement/tests/ManageCodesTab.test.jsx
index ea08c4cf96..2e8451de7a 100644
--- a/src/components/CodeManagement/tests/ManageCodesTab.test.jsx
+++ b/src/components/CodeManagement/tests/ManageCodesTab.test.jsx
@@ -268,7 +268,7 @@ describe('ManageCodesTabWrapper', () => {
     const store = mockStore({ ...initialState });
     const wrapper = mount(<ManageCodesTabWrapper store={store} />);
     store.clearActions();
-    wrapper.find('.fa-refresh').hostNodes().simulate('click');
+    wrapper.find('[data-testid="refresh-data"]').hostNodes().simulate('click');
     expect(store.getActions().filter(action => action.type === COUPONS_REQUEST)).toHaveLength(1);
   });
 
diff --git a/src/components/CodeManagement/tests/ManageRequestsTab.test.jsx b/src/components/CodeManagement/tests/ManageRequestsTab.test.jsx
index a4a1be4e60..d658fb68a6 100644
--- a/src/components/CodeManagement/tests/ManageRequestsTab.test.jsx
+++ b/src/components/CodeManagement/tests/ManageRequestsTab.test.jsx
@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import userEvent from '@testing-library/user-event';
-import {
-  screen,
-  render,
-  cleanup,
-} from '@testing-library/react';
+import { screen, render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import ManageRequestsTab from '../ManageRequestsTab';
@@ -254,7 +250,7 @@ describe('<ManageRequestsTab />', () => {
         loading: false,
         data: {
           results: [{
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
             numUnassigned: 3,
           }],
         },
@@ -274,7 +270,7 @@ describe('<ManageRequestsTab />', () => {
         loading: false,
         data: {
           results: [{
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
             numUnassigned: 3,
           }],
         },
@@ -312,7 +308,7 @@ describe('<ManageRequestsTab />', () => {
         loading: false,
         data: {
           results: [{
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
             numUnassigned: 3,
           }],
         },
@@ -374,7 +370,7 @@ describe('<ManageRequestsTab />', () => {
         loading: false,
         data: {
           results: [{
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
             numUnassigned: 3,
           }],
         },
diff --git a/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap b/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap
index 7e568a0fdc..13de3d3b8a 100644
--- a/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap
+++ b/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap
@@ -91,10 +91,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon2"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <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="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -103,10 +118,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon3"
-        />
+          className="pgn__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="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -201,7 +230,7 @@ Array [
         >
           <label
             className="m-0"
-            htmlFor="pgn-searchfield-input-12"
+            htmlFor="pgn-searchfield-input-4"
           >
             <span
               className="sr-only"
@@ -213,7 +242,7 @@ Array [
             className="form-control"
             data-hj-suppress={true}
             disabled={false}
-            id="pgn-searchfield-input-12"
+            id="pgn-searchfield-input-4"
             name="searchfield-input"
             onBlur={[Function]}
             onChange={[Function]}
@@ -266,10 +295,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon13"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <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="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -278,10 +322,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon14"
-        />
+          className="pgn__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="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -381,7 +439,7 @@ Array [
         >
           <label
             className="m-0"
-            htmlFor="pgn-searchfield-input-9"
+            htmlFor="pgn-searchfield-input-3"
           >
             <span
               className="sr-only"
@@ -393,7 +451,7 @@ Array [
             className="form-control"
             data-hj-suppress={true}
             disabled={false}
-            id="pgn-searchfield-input-9"
+            id="pgn-searchfield-input-3"
             name="searchfield-input"
             onBlur={[Function]}
             onChange={[Function]}
@@ -446,10 +504,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon10"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <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="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -458,10 +531,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon11"
-        />
+          className="pgn__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="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -529,7 +616,7 @@ Array [
         >
           <label
             className="m-0"
-            htmlFor="pgn-searchfield-input-4"
+            htmlFor="pgn-searchfield-input-2"
           >
             <span
               className="sr-only"
@@ -541,7 +628,7 @@ Array [
             className="form-control"
             data-hj-suppress={true}
             disabled={false}
-            id="pgn-searchfield-input-4"
+            id="pgn-searchfield-input-2"
             name="searchfield-input"
             onBlur={[Function]}
             onChange={[Function]}
@@ -594,10 +681,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon5"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <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="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -606,10 +708,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon6"
-        />
+          className="pgn__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="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -733,14 +849,28 @@ Array [
             className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-chevron-down text-primary"
-              id="Icon7"
-            />
-            <span
-              className="sr-only"
+              className="pgn__icon d-inline-block text-primary"
             >
-              Open coupon details
+              <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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="sr-only"
+              >
+                Open coupon details
+              </span>
             </span>
           </div>
         </div>
@@ -850,14 +980,28 @@ Array [
             className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-chevron-down text-primary"
-              id="Icon8"
-            />
-            <span
-              className="sr-only"
+              className="pgn__icon d-inline-block text-primary"
             >
-              Open coupon details
+              <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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="sr-only"
+              >
+                Open coupon details
+              </span>
             </span>
           </div>
         </div>
diff --git a/src/components/CodeReminderModal/index.jsx b/src/components/CodeReminderModal/index.jsx
index fdd22cb562..4e4a1d41bd 100644
--- a/src/components/CodeReminderModal/index.jsx
+++ b/src/components/CodeReminderModal/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
-import { Button, Icon, Modal } from '@edx/paragon';
+import { Button, Modal, Spinner } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';
@@ -229,7 +229,7 @@ export class BaseCodeReminderModal extends React.Component {
             className="code-remind-save-btn"
             onClick={handleSubmit(this.handleModalSubmit)}
           >
-            {mode === REMIND_MODE && submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+            {mode === REMIND_MODE && submitting && <Spinner animation="border" variant="primary" size="sm" />}
             Remind
           </Button>,
           <SaveTemplateButton
diff --git a/src/components/CodeRevokeModal/index.jsx b/src/components/CodeRevokeModal/index.jsx
index 569cdea6f6..ee8806ebdf 100644
--- a/src/components/CodeRevokeModal/index.jsx
+++ b/src/components/CodeRevokeModal/index.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Icon, Modal,
+  Button, Modal, Spinner,
 } from '@edx/paragon';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Info } from '@edx/paragon/icons';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';
 
@@ -200,7 +200,7 @@ class CodeRevokeModal extends React.Component {
             label="Do not email"
             checked={doNotEmail}
             id="doNotEmailCheckbox"
-            icon={faInfoCircle}
+            icon={Info}
             altText="More information"
             tooltipText="By clicking this box, you can revoke this coupon code without emailing the learner."
             onChange={(event, newValue) => {
@@ -240,7 +240,7 @@ class CodeRevokeModal extends React.Component {
             className="code-revoke-save-btn"
             onClick={handleSubmit(this.handleModalSubmit)}
           >
-            {mode === MODAL_TYPES.revoke && submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+            {mode === MODAL_TYPES.revoke && submitting && <Spinner animation="border" className="mr-2" variant="primary" size="sm" />}
             Revoke
           </Button>,
           <SaveTemplateButton
diff --git a/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx b/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx
index ca9924dfc3..8c3aaec2c3 100644
--- a/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx
+++ b/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 
 const CodeSearchResultsHeading = ({ searchQuery, onClose }) => (
   <div className="d-flex align-items-center justify-content-between mb-3">
@@ -15,7 +16,7 @@ const CodeSearchResultsHeading = ({ searchQuery, onClose }) => (
         className="close-search-results-btn"
         onClick={onClose}
       >
-        <Icon className="fa fa-times mr-2" />
+        <Icon className="mr-2" src={Close} />
         Close search results
       </Button>
     </div>
diff --git a/src/components/CodeSearchResults/CodeSearchResultsTable.jsx b/src/components/CodeSearchResults/CodeSearchResultsTable.jsx
index 49db162711..0ec6e533fc 100644
--- a/src/components/CodeSearchResults/CodeSearchResultsTable.jsx
+++ b/src/components/CodeSearchResults/CodeSearchResultsTable.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { withRouter } from 'react-router-dom';
 import { Icon } from '@edx/paragon';
+import { Check } from '@edx/paragon/icons';
 
 import { isValidEmail } from '../../utils';
 import TableContainer from '../../containers/TableContainer';
@@ -42,7 +43,7 @@ const getFormattedDate = (date) => {
   if (!date) {
     return null;
   }
-  return moment(date).format('MMMM D, YYYY');
+  return dayjs(date).format('MMMM D, YYYY');
 };
 
 const transformSearchResults = results => results.map(({
@@ -112,7 +113,7 @@ const CodeSearchResultsTable = ({
       couponName,
       code,
       isRedeemed: isRedeemed ? (
-        <Icon className="fa fa-check text-primary" screenReaderText="has been redeemed" />
+        <Icon className="text-primary" src={Check} screenReaderText="has been redeemed" />
       ) : defaultEmptyValue,
       courseTitle: courseTitle || defaultEmptyValue,
       assignedTo: assignedTo || defaultEmptyValue,
diff --git a/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap b/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap
index 8395dc41f8..eb08be87a9 100644
--- a/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap
+++ b/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap
@@ -46,10 +46,24 @@ exports[`<CodeSearchResults /> basic rendering should render empty table data 1`
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon6"
-            />
+              className="pgn__icon mr-2"
+            >
+              <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -138,10 +152,24 @@ exports[`<CodeSearchResults /> basic rendering should render error 1`] = `
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon7"
-            />
+              className="pgn__icon mr-2"
+            >
+              <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -238,10 +266,24 @@ exports[`<CodeSearchResults /> basic rendering should render loading 1`] = `
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon1"
-            />
+              className="pgn__icon mr-2"
+            >
+              <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -595,10 +637,24 @@ exports[`<CodeSearchResults /> basic rendering should render table data 1`] = `
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon2"
-            />
+              className="pgn__icon mr-2"
+            >
+              <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -685,14 +741,28 @@ exports[`<CodeSearchResults /> basic rendering should render table data 1`] = `
                       scope={null}
                     >
                       <span
-                        aria-hidden={true}
-                        className="fa fa-check text-primary"
-                        id="Icon3"
-                      />
-                      <span
-                        className="sr-only"
+                        className="pgn__icon text-primary"
                       >
-                        has been redeemed
+                        <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        <span
+                          className="sr-only"
+                        >
+                          has been redeemed
+                        </span>
                       </span>
                     </td>
                     <td
@@ -774,14 +844,28 @@ exports[`<CodeSearchResults /> basic rendering should render table data 1`] = `
                       scope={null}
                     >
                       <span
-                        aria-hidden={true}
-                        className="fa fa-check text-primary"
-                        id="Icon4"
-                      />
-                      <span
-                        className="sr-only"
+                        className="pgn__icon text-primary"
                       >
-                        has been redeemed
+                        <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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        <span
+                          className="sr-only"
+                        >
+                          has been redeemed
+                        </span>
                       </span>
                     </td>
                     <td
@@ -995,10 +1079,24 @@ exports[`<CodeSearchResults /> basic rendering should render table data when sea
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon5"
-            />
+              className="pgn__icon mr-2"
+            >
+              <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
diff --git a/src/components/Coupon/_Coupon.scss b/src/components/Coupon/_Coupon.scss
index aba1b3bac7..8ddb98f2bb 100644
--- a/src/components/Coupon/_Coupon.scss
+++ b/src/components/Coupon/_Coupon.scss
@@ -63,3 +63,4 @@
     }
   }
 }
+
diff --git a/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap b/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap
index 5d160b5109..434813392e 100644
--- a/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap
+++ b/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap
@@ -98,24 +98,52 @@ exports[`<Coupon /> renders correctly with error state 1`] = `
       className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
     >
       <span
-        aria-hidden={true}
-        className="fa fa-exclamation-circle text-danger mr-2"
-        id="Icon3"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon text-danger mr-2 d-inline-block"
       >
-        Coupon has an error.
+        <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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Coupon has an error.
+        </span>
       </span>
       <span
-        aria-hidden={true}
-        className="fa fa-chevron-down text-primary"
-        id="Icon4"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon d-inline-block text-primary"
       >
-        Open coupon details
+        <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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Open coupon details
+        </span>
       </span>
     </div>
   </div>
@@ -228,14 +256,28 @@ exports[`<Coupon /> renders correctly with max uses 1`] = `
       className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
     >
       <span
-        aria-hidden={true}
-        className="fa fa-chevron-down text-primary"
-        id="Icon1"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon d-inline-block text-primary"
       >
-        Open coupon details
+        <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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Open coupon details
+        </span>
       </span>
     </div>
   </div>
@@ -343,14 +385,28 @@ exports[`<Coupon /> renders correctly without max uses 1`] = `
       className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
     >
       <span
-        aria-hidden={true}
-        className="fa fa-chevron-down text-primary"
-        id="Icon2"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon d-inline-block text-primary"
       >
-        Open coupon details
+        <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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Open coupon details
+        </span>
       </span>
     </div>
   </div>
diff --git a/src/components/Coupon/index.jsx b/src/components/Coupon/index.jsx
index 45777efbf2..eee7eb0048 100644
--- a/src/components/Coupon/index.jsx
+++ b/src/components/Coupon/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Icon } from '@edx/paragon';
+import { Error, ExpandLess, ExpandMore } from '@edx/paragon/icons';
 
 import CouponDetails from '../../containers/CouponDetails';
 
@@ -83,12 +84,13 @@ class Coupon extends React.Component {
 
   renderExpandCollapseIcon() {
     const { isExpanded } = this.state;
-    const iconClass = isExpanded ? 'fa-chevron-up' : 'fa-chevron-down';
+    const icon = isExpanded ? ExpandLess : ExpandMore;
     const iconColor = isExpanded ? 'text-white' : 'text-primary';
     const screenReaderText = isExpanded ? 'Close' : 'Open';
     return (
       <Icon
-        className={classNames('fa', iconClass, iconColor)}
+        className={classNames('d-inline-block', iconColor)}
+        src={icon}
         screenReaderText={`${screenReaderText} coupon details`}
       />
     );
@@ -97,7 +99,8 @@ class Coupon extends React.Component {
   renderErrorIcon() {
     return (
       <Icon
-        className="fa fa-exclamation-circle text-danger mr-2"
+        className="text-danger mr-2 d-inline-block"
+        src={Error}
         screenReaderText="Coupon has an error."
       />
     );
diff --git a/src/components/CouponDetails/_CouponDetails.scss b/src/components/CouponDetails/_CouponDetails.scss
index e0d34ef342..78dd08ffba 100644
--- a/src/components/CouponDetails/_CouponDetails.scss
+++ b/src/components/CouponDetails/_CouponDetails.scss
@@ -58,27 +58,10 @@
         & + label {
           width: 15px;
 
-          &:before {
-            font-family: FontAwesome;
-            content: '\f096'; /* fa-square-o */
-            font-weight: normal;
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
 
-        &:checked + label:before {
-          content: '\f046'; /* fa-check-square-o */
         }
 
-        &.mixed + label:before {
-          content: '\f146'; /* fa-minus-square */
-        }
 
-        &:focus + label:before {
-          border-radius: 2px;
-          box-shadow: $input-btn-focus-box-shadow;
-        }
       }
     }
   }
diff --git a/src/components/CouponDetails/index.jsx b/src/components/CouponDetails/index.jsx
index fff0b0c661..5be165eea1 100644
--- a/src/components/CouponDetails/index.jsx
+++ b/src/components/CouponDetails/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
-  Alert, Button, CheckBox, Icon,
+  Alert, Button, Icon, Form,
 } from '@edx/paragon';
 import { CheckCircle, Error } from '@edx/paragon/icons';
 
@@ -242,16 +242,14 @@ class CouponDetails extends React.Component {
   getNewColumns(selectedToggle) {
     const selectColumn = {
       label: (
-        <CheckBox
+        <Form.Checkbox
           id="select-all-codes"
           name="select all codes"
-          label={
-            <div className="sr-only">{this.getSelectAllCheckBoxLabel()}</div>
-            }
-          onChange={(checked) => {
-            this.hasAllTableRowsSelected = checked;
-            this.handleSelectAllCodes(checked);
+          onChange={(event) => {
+            this.hasAllTableRowsSelected = event.target.checked;
+            this.handleSelectAllCodes(event.target.checked);
           }}
+          checked={this.hasAllTableRowsSelected}
           ref={this.selectAllCheckBoxRef}
         />
       ),
@@ -298,20 +296,6 @@ class CouponDetails extends React.Component {
     }));
   }
 
-  getSelectAllCheckBoxLabel = () => {
-    if (this.hasAllTableRowsSelected) {
-      return 'unselect all codes';
-    }
-    return 'select all codes';
-  };
-
-  getLabelForCodeCheckBox = (code) => {
-    if (this.selectedTableRows[code]) {
-      return `unselect code ${code}`;
-    }
-    return `select code ${code}`;
-  };
-
   reset() {
     this.resetModals();
     this.resetCodeActionStatus();
@@ -386,7 +370,7 @@ class CouponDetails extends React.Component {
     // TODO: Paragon now has an IndeterminateCheckbox that can be used here.
     const selectAllCheckBoxRef = selectColumn.label.ref && selectColumn.label.ref.current;
     const selectAllCheckBoxDOM = (
-      selectAllCheckBoxRef && document.getElementById(selectAllCheckBoxRef.props.id)
+      selectAllCheckBoxRef && document.getElementById(selectAllCheckBoxRef.props?.id)
     );
 
     if (selectAllCheckBoxDOM && hasPartialSelection) {
@@ -414,7 +398,7 @@ class CouponDetails extends React.Component {
       code: <span data-hj-suppress>{code.code}</span>,
       assigned_to: code.error ? (
         <span className="text-danger">
-          <Icon className="fa fa-exclamation-circle mr-2" screenReaderText="Error" />
+          <Icon className="mr-2" screenReaderText="Error" src={Error} />
           {code.error}
         </span>
       ) : code.assigned_to,
@@ -430,16 +414,13 @@ class CouponDetails extends React.Component {
         setModalState={this.setModalState}
       />,
       select: (
-        <CheckBox
+        <Form.Checkbox
           name={`select code ${code.code}`}
-          label={
-            <div className="sr-only">{this.getLabelForCodeCheckBox(code.code)}</div>
-          }
-          onChange={(checked) => {
-            this.handleCodeSelection({ checked, code });
-            if (checked && !this.selectedTableRows[code.code]) {
+          onChange={(event) => {
+            this.handleCodeSelection({ checked: event.target.checked, code });
+            if (event.target.checked && !this.selectedTableRows[code.code]) {
               this.selectedTableRows[code.code] = true;
-            } else if (!checked && this.selectedTableRows[code.code]) {
+            } else if (!event.target.checked && this.selectedTableRows[code.code]) {
               delete this.selectedTableRows[code.code];
             }
           }}
diff --git a/src/components/DownloadCsvButton/index.jsx b/src/components/DownloadCsvButton/index.jsx
index 702c37e7e8..caf3a856fd 100644
--- a/src/components/DownloadCsvButton/index.jsx
+++ b/src/components/DownloadCsvButton/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '@edx/paragon';
+import { Button, Spinner } from '@edx/paragon';
+import { FileDownload } from '@edx/paragon/icons';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -22,7 +23,6 @@ class DownloadCsvButton extends React.Component {
       id,
     } = this.props;
 
-    const downloadButtonIconClasses = csvLoading ? ['fa-spinner', 'fa-spin'] : ['fa-download'];
     return (
       <Button
         variant="outline-primary"
@@ -36,7 +36,7 @@ class DownloadCsvButton extends React.Component {
         }}
       >
         <>
-          <Icon className={`fa mr-2 ${downloadButtonIconClasses.join(' ')}`} />
+          {csvLoading ? <Spinner animation="border" variant="primary" className="mr-2" size="sm" /> : <FileDownload className="mr-2" />}
           {buttonLabel || <FormattedMessage id="adminPortal.csv.download" defaultMessage="Download full report (CSV)" />}
         </>
       </Button>
diff --git a/src/components/EnterpriseSubsidiesContext/data/hooks.js b/src/components/EnterpriseSubsidiesContext/data/hooks.js
index ff4ad6ff3d..d699098cd0 100644
--- a/src/components/EnterpriseSubsidiesContext/data/hooks.js
+++ b/src/components/EnterpriseSubsidiesContext/data/hooks.js
@@ -1,8 +1,11 @@
 import { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+
 import { logError } from '@edx/frontend-platform/logging';
 import { getConfig } from '@edx/frontend-platform/config';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
-import moment from 'moment';
 
 import EcommerceApiService from '../../../data/services/EcommerceApiService';
 import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
@@ -13,6 +16,9 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
   const [isLoading, setIsLoading] = useState(true);
   const [canManageLearnerCredit, setCanManageLearnerCredit] = useState(false);
 
+  dayjs.extend(isSameOrBefore);
+  dayjs.extend(isSameOrAfter);
+
   useEffect(() => {
     setIsLoading(true);
     const fetchOffers = async () => {
@@ -32,25 +38,29 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
           results = camelCaseObject(ecommerceApiResponse.data.results);
           source = 'ecommerceApi';
         }
-
+        let activeSubsidyFound = false;
         if (results.length !== 0) {
-          const subsidy = results[0];
-          const isCurrent = source === 'ecommerceApi'
-            ? subsidy.isCurrent
-            : moment().isSameOrBefore(subsidy.expirationDatetime)
-            && moment().isSameOrAfter(subsidy.activeDatetime);
-          const offerData = {
-            id: subsidy.uuid || subsidy.id,
-            name: subsidy.title || subsidy.displayName,
-            start: subsidy.activeDatetime || subsidy.startDatetime,
-            end: subsidy.expirationDatetime || subsidy.endDatetime,
-            isCurrent,
-          };
-          setOffers([offerData]);
-        }
-        // We only released learner credit management to customers with 1 offer for the MVP.
-        if (results.length === 1) {
-          setCanManageLearnerCredit(true);
+          let subsidy = results[0];
+          const offerData = [];
+          let activeSubsidyData = {};
+          for (let i = 0; i < results.length; i++) {
+            subsidy = results[i];
+            activeSubsidyFound = source === 'ecommerceApi'
+              ? subsidy.isCurrent
+              : subsidy.isActive;
+            if (activeSubsidyFound === true) {
+              activeSubsidyData = {
+                id: subsidy.uuid || subsidy.id,
+                name: subsidy.title || subsidy.displayName,
+                start: subsidy.activeDatetime || subsidy.startDatetime,
+                end: subsidy.expirationDatetime || subsidy.endDatetime,
+                isCurrent: activeSubsidyFound,
+              };
+              offerData.push(activeSubsidyData);
+              setCanManageLearnerCredit(true);
+            }
+          }
+          setOffers(offerData);
         }
       } catch (error) {
         logError(error);
diff --git a/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js b/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
index 668fa9d386..adf8580b52 100644
--- a/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
+++ b/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
@@ -94,6 +94,7 @@ describe('useEnterpriseOffers', () => {
       title: 'offer-name',
       active_datetime: '2021-05-15T19:56:09Z',
       expiration_datetime: '2100-05-15T19:56:09Z',
+      is_active: true,
     }];
     SubsidyApiService.getSubsidyByCustomerUUID.mockResolvedValueOnce({
       data: {
@@ -119,25 +120,79 @@ describe('useEnterpriseOffers', () => {
     });
   });
 
-  it('should set canManageLearnerCredit to false if enterprise offer or subsidy does not have exactly 1 offer', async () => {
+  it('should set canManageLearnerCredit to false if active enterprise offer or subsidy not found', async () => {
     const mockOffers = [{ subsidyUuid: 'offer-1' }, { subsidyUuid: 'offer-2' }];
     const mockSubsidyServiceResponse = [
       {
         uuid: 'offer-1',
         title: 'offer-name',
-        active_datetime: '2021-05-15T19:56:09Z',
-        expiration_datetime: '2100-05-15T19:56:09Z',
+        active_datetime: '2005-05-15T19:56:09Z',
+        expiration_datetime: '2006-05-15T19:56:09Z',
+        is_active: false,
       },
       {
         uuid: 'offer-2',
+        title: 'offer-name-2',
+        active_datetime: '2006-05-15T19:56:09Z',
+        expiration_datetime: '2007-05-15T19:56:09Z',
+        is_active: false,
+      },
+    ];
+    const mockOfferData = [];
+
+    EcommerceApiService.fetchEnterpriseOffers.mockResolvedValueOnce({
+      data: {
+        results: mockOffers,
+      },
+    });
+    SubsidyApiService.getSubsidyByCustomerUUID.mockResolvedValueOnce({
+      data: {
+        results: mockSubsidyServiceResponse,
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => useEnterpriseOffers({
+      enablePortalLearnerCreditManagementScreen: true,
+      enterpriseId: TEST_ENTERPRISE_UUID,
+    }));
+
+    await waitForNextUpdate();
+
+    expect(SubsidyApiService.getSubsidyByCustomerUUID).toHaveBeenCalledWith(
+      TEST_ENTERPRISE_UUID,
+      { subsidyType: 'learner_credit' },
+    );
+    expect(result.current).toEqual({
+      offers: mockOfferData,
+      isLoading: false,
+      canManageLearnerCredit: false,
+    });
+  });
+
+  it('should return the active enterprise offer or subsidy when multiple available', async () => {
+    const mockOffers = [{ subsidyUuid: 'offer-1' }, { subsidyUuid: 'offer-2' }];
+    const mockSubsidyServiceResponse = [
+      {
+        uuid: 'offer-1',
+        title: 'offer-name',
+        active_datetime: '2005-05-15T19:56:09Z',
+        expiration_datetime: '2006-05-15T19:56:09Z',
+        is_active: false,
+      },
+      {
+        uuid: 'offer-2',
+        title: 'offer-name-2',
+        active_datetime: '2006-05-15T19:56:09Z',
+        expiration_datetime: '2099-05-15T19:56:09Z',
+        is_active: true,
       },
     ];
     const mockOfferData = [
       {
-        id: 'offer-1',
-        name: 'offer-name',
-        start: '2021-05-15T19:56:09Z',
-        end: '2100-05-15T19:56:09Z',
+        id: 'offer-2',
+        name: 'offer-name-2',
+        start: '2006-05-15T19:56:09Z',
+        end: '2099-05-15T19:56:09Z',
         isCurrent: true,
       },
     ];
@@ -167,7 +222,7 @@ describe('useEnterpriseOffers', () => {
     expect(result.current).toEqual({
       offers: mockOfferData,
       isLoading: false,
-      canManageLearnerCredit: false,
+      canManageLearnerCredit: true,
     });
   });
 });
diff --git a/src/components/FileInput/index.jsx b/src/components/FileInput/index.jsx
index 641fa16c9c..cc6b78dfe7 100644
--- a/src/components/FileInput/index.jsx
+++ b/src/components/FileInput/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { clearFields } from 'redux-form';
 import { Button, Icon, ValidationFormGroup } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 
 class FileInput extends React.Component {
   constructor(props) {
@@ -136,7 +137,7 @@ class FileInput extends React.Component {
                 this.setState({ fileName: null });
               }}
             >
-              <Icon className="fa fa-times mr-1" />
+              <Icon src={Close} className="mr-1" />
               Remove
             </Button>
           )}
diff --git a/src/components/IconWithTooltip/IconWithTooltip.test.jsx b/src/components/IconWithTooltip/IconWithTooltip.test.jsx
index c682c796fd..d262934538 100644
--- a/src/components/IconWithTooltip/IconWithTooltip.test.jsx
+++ b/src/components/IconWithTooltip/IconWithTooltip.test.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Info } from '@edx/paragon/icons';
 import IconWithTooltip from './index';
 
 const defaultAltText = 'infoooo';
 const defaultTooltipText = 'Tooool';
 const DEFAULT_PROPS = {
-  icon: faInfoCircle,
+  icon: Info,
   altText: defaultAltText,
   tooltipText: defaultTooltipText,
 };
@@ -17,7 +17,7 @@ describe('<IconWithTooltip />', () => {
     global.innerWidth = 800;
     global.dispatchEvent(new Event('resize'));
     const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
-    expect(container.querySelector(`[data-icon=${faInfoCircle.iconName}]`)).toBeTruthy();
+    expect(container.querySelector('svg')).toBeTruthy();
   });
   [
     { windowSize: 800, expectedLocation: 'right' },
@@ -27,7 +27,7 @@ describe('<IconWithTooltip />', () => {
       global.innerWidth = data.windowSize;
       global.dispatchEvent(new Event('resize'));
       const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
-      const icon = container.querySelector(`[data-icon=${faInfoCircle.iconName}]`);
+      const icon = container.querySelector('svg');
       expect(icon).toBeTruthy();
 
       act(async () => {
diff --git a/src/components/IconWithTooltip/index.jsx b/src/components/IconWithTooltip/index.jsx
index 67c99fe4fb..4aa85455a8 100644
--- a/src/components/IconWithTooltip/index.jsx
+++ b/src/components/IconWithTooltip/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OverlayTrigger, Tooltip, useWindowSize } from '@edx/paragon';
+import {
+  Icon, OverlayTrigger, Tooltip, useWindowSize,
+} from '@edx/paragon';
 
 const IconWithTooltip = ({
   icon, altText, tooltipText, placementSm = 'right', placementLg = 'top', trigger = ['hover', 'focus'], breakpoint = 768, iconClassNames = 'ml-1',
@@ -19,13 +20,13 @@ const IconWithTooltip = ({
         </Tooltip>
       )}
     >
-      <FontAwesomeIcon className={iconClassNames} icon={icon} alt={altText} />
+      <Icon className={iconClassNames} src={icon} alt={altText} />
     </OverlayTrigger>
   );
 };
 
 IconWithTooltip.propTypes = {
-  icon: PropTypes.shape({}).isRequired,
+  icon: PropTypes.func.isRequired,
   altText: PropTypes.string.isRequired,
   tooltipText: PropTypes.string.isRequired,
   // These props have defaults above
diff --git a/src/components/InviteLearnersModal/index.jsx b/src/components/InviteLearnersModal/index.jsx
index 1def540adb..89ee1e62d6 100644
--- a/src/components/InviteLearnersModal/index.jsx
+++ b/src/components/InviteLearnersModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Icon, Modal, Alert,
+  Button, Modal, Alert, Spinner,
 } from '@edx/paragon';
 import { Cancel as ErrorIcon } from '@edx/paragon/icons';
 
@@ -192,7 +192,7 @@ class InviteLearnersModal extends React.Component {
             onClick={handleSubmit(this.handleModalSubmit)}
           >
             <>
-              {submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+              {submitting && <Spinner animation="border" className="mr-2" variant="primary" size="sm" />}
               Invite learners
             </>
           </Button>,
diff --git a/src/components/MultipleFileInputField/MultipleFileInputField.jsx b/src/components/MultipleFileInputField/MultipleFileInputField.jsx
index 86363bbaca..5e3419bfce 100644
--- a/src/components/MultipleFileInputField/MultipleFileInputField.jsx
+++ b/src/components/MultipleFileInputField/MultipleFileInputField.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import {
   Form, FormControl, IconButton,
 } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 import classNames from 'classnames';
-import * as FontAwesome from '@fortawesome/free-solid-svg-icons/faTimes';
 import { getSizeInBytes, formatBytes } from './utils';
 import { MAX_FILES_SIZE, FILE_SIZE_EXCEEDS_ERROR } from './constants';
 
@@ -91,7 +91,7 @@ const MultipleFileInputField = ({
         inputValues?.map((e, i) => (
           <div className="border rounded p-1 m-1">
             <small>{`${e.name} - ${formatBytes(e.size)}`}</small>
-            <IconButton className="mr-2" icon={FontAwesome.faTimes} onClick={() => handleFileRemoveClick(i)} variant="danger" />
+            <IconButton className="mr-2" icon={Close} onClick={() => handleFileRemoveClick(i)} variant="danger" />
           </div>
         ))
       }
diff --git a/src/components/NumberCard/NumberCard.test.jsx b/src/components/NumberCard/NumberCard.test.jsx
index 042694244d..fff59a6746 100644
--- a/src/components/NumberCard/NumberCard.test.jsx
+++ b/src/components/NumberCard/NumberCard.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
+import { Groups } from '@edx/paragon/icons';
 
 import NumberCard from './index';
 
@@ -14,7 +15,7 @@ const NumberCardWrapper = props => (
       className="test-class"
       title={10}
       description="This describes the data!"
-      iconClassName="fa fa-users"
+      icon={Groups}
       {...props}
     />
   </MemoryRouter>
@@ -134,10 +135,9 @@ describe('<NumberCard />', () => {
           }]}
         />
       ));
-
       wrapper.setProps({ detailsExpanded: true });
       const action = getNumberCard(wrapper).find('.footer-body .btn-link').hostNodes().first();
-      expect(action.find('.fa-spinner').exists()).toBeTruthy();
+      expect(action.find('.ml-2').exists()).toBeTruthy();
     });
   });
 });
diff --git a/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap b/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap
index 59b61ff6c0..415a2c1b3e 100644
--- a/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap
+++ b/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap
@@ -17,10 +17,24 @@ exports[`<NumberCard /> renders correctly with detail actions 1`] = `
           10
         </span>
         <span
-          aria-hidden={true}
-          className="d-flex align-items-center justify-content-center fa fa-users"
-          id="Icon2"
-        />
+          className="pgn__icon d-flex align-items-center justify-content-center"
+        >
+          <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </h3>
       <p
         className="card-text"
@@ -54,14 +68,28 @@ exports[`<NumberCard /> renders correctly with detail actions 1`] = `
           </div>
           <div>
             <span
-              aria-hidden={true}
-              className="fa fa-caret-down"
-              id="Icon3"
-            />
-            <span
-              className="sr-only"
+              className="pgn__icon"
             >
-              Show details
+              <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="M7 10l5 5 5-5H7z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="sr-only"
+              >
+                Show details
+              </span>
             </span>
           </div>
         </div>
@@ -125,10 +153,24 @@ exports[`<NumberCard /> renders correctly without detail actions 1`] = `
           10
         </span>
         <span
-          aria-hidden={true}
-          className="d-flex align-items-center justify-content-center fa fa-users"
-          id="Icon1"
-        />
+          className="pgn__icon d-flex align-items-center justify-content-center"
+        >
+          <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="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </h3>
       <p
         className="card-text"
diff --git a/src/components/NumberCard/index.jsx b/src/components/NumberCard/index.jsx
index a177467bd5..2a4cfc2018 100644
--- a/src/components/NumberCard/index.jsx
+++ b/src/components/NumberCard/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '@edx/paragon';
+import { Button, Icon, Spinner } from '@edx/paragon';
+import { ArrowDropDown, Close } from '@edx/paragon/icons';
 import { Link, withRouter } from 'react-router-dom';
 
 import { removeTrailingSlash, isTriggerKey } from '../../utils';
@@ -150,7 +151,7 @@ class NumberCard extends React.Component {
             {action.label}
           </span>
           {action.loading
-            && <Icon className="fa fa-spinner fa-spin ml-2" />}
+            && <Spinner animation="border" className="ml-2" variant="primary" size="sm" />}
         </div>
       </Link>
     ));
@@ -161,7 +162,7 @@ class NumberCard extends React.Component {
     const {
       className,
       title,
-      iconClassName,
+      icon,
       description,
       detailActions,
       id,
@@ -180,14 +181,14 @@ class NumberCard extends React.Component {
               <span>
                 {this.formatTitle(title)}
               </span>
-              {iconClassName && (
+              {icon && (
                 <Icon
                   className={
                     classNames(
                       'd-flex align-items-center justify-content-center',
-                      iconClassName,
                     )
                   }
+                  src={icon}
                 />
               )}
             </h3>
@@ -212,13 +213,7 @@ class NumberCard extends React.Component {
                   </div>
                   <div>
                     <Icon
-                      className={classNames(
-                        'fa',
-                        {
-                          'fa-caret-down': !detailsExpanded,
-                          'fa-close': detailsExpanded,
-                        },
-                      )}
+                      src={!detailsExpanded ? ArrowDropDown : Close}
                       screenReaderText={detailsExpanded
                         ? DETAILS_TEXT.expandedScreenReader : DETAILS_TEXT.unexpandedScreenReader}
                     />
@@ -246,7 +241,7 @@ class NumberCard extends React.Component {
 
 NumberCard.defaultProps = {
   className: null,
-  iconClassName: null,
+  icon: null,
   detailActions: null,
   detailsExpanded: false,
 };
@@ -256,7 +251,7 @@ NumberCard.propTypes = {
   description: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
-  iconClassName: PropTypes.string,
+  icon: PropTypes.func,
   detailActions: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     loading: PropTypes.bool,
diff --git a/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx b/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx
index be577a2cfa..1473d8a47c 100644
--- a/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx
+++ b/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx
@@ -26,7 +26,7 @@ CheckboxWithTooltip.defaultProps = {
 CheckboxWithTooltip.propTypes = {
   className: PropTypes.string,
   // Icon should be a paragon icon
-  icon: PropTypes.shape().isRequired,
+  icon: PropTypes.func.isRequired,
   altText: PropTypes.string.isRequired,
   tooltipText: PropTypes.string.isRequired,
 };
diff --git a/src/components/ReportingConfig/ReportingConfigForm.jsx b/src/components/ReportingConfig/ReportingConfigForm.jsx
index 4e662c6a11..09dadbe4e5 100644
--- a/src/components/ReportingConfig/ReportingConfigForm.jsx
+++ b/src/components/ReportingConfig/ReportingConfigForm.jsx
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
 import {
-  ValidationFormGroup, Input, StatefulButton, Icon, Button,
+  ValidationFormGroup, Input, StatefulButton, Icon, Button, Spinner,
 } from '@edx/paragon';
+import { Check, Close, Download } from '@edx/paragon/icons';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import SFTPDeliveryMethodForm from './SFTPDeliveryMethodForm';
 import EmailDeliveryMethodForm from './EmailDeliveryMethodForm';
@@ -419,10 +420,10 @@ class ReportingConfigForm extends React.Component {
                 error: 'Error',
               }}
               icons={{
-                default: <Icon className="fa fa-download" />,
-                pending: <Icon className="fa fa-spinner fa-spin" />,
-                complete: <Icon className="fa fa-check" />,
-                error: <Icon className="fa fa-times" />,
+                default: <Icon src={Download} />,
+                pending: <Spinner animation="border" variant="light" size="sm" />,
+                complete: <Icon src={Check} />,
+                error: <Icon src={Close} />,
               }}
               disabledStates={[SUBMIT_STATES.PENDING]}
               className="ml-3 col"
@@ -434,7 +435,7 @@ class ReportingConfigForm extends React.Component {
               className="btn-outline-danger  mr-3"
               onClick={() => this.props.deleteConfig(config.uuid)}
             >
-              <Icon className="fa fa-times danger" /> Delete
+              <Icon src={Close} className="danger" /> Delete
             </Button>
           )}
         </div>
diff --git a/src/components/ReportingConfig/index.jsx b/src/components/ReportingConfig/index.jsx
index e34c1f17e3..f77748e903 100644
--- a/src/components/ReportingConfig/index.jsx
+++ b/src/components/ReportingConfig/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible, Icon } from '@edx/paragon';
+import { Check, Close } from '@edx/paragon/icons';
 import { camelCaseObject } from '@edx/frontend-platform';
 import EnterpriseCatalogApiService from '../../data/services/EnterpriseCatalogApiService';
 import LMSApiService from '../../data/services/LmsApiService';
@@ -142,9 +143,17 @@ class ReportingConfig extends React.Component {
                 className="shadow"
                 title={(
                   <div className="row justify-content-around flex-fill">
-                    <Icon
-                      className={`col-1 ${config.active ? ' fa fa-check text-success-300' : ' fa fa-times text-danger-300'}`}
-                    />
+                    {config.active ? (
+                      <Icon
+                        className="col-1 text-success-300"
+                        src={Check}
+                      />
+                    ) : (
+                      <Icon
+                        className="col-1 text-danger-300"
+                        src={Close}
+                      />
+                    )}
                     <div className="col">
                       <h3 className="h6">Report Type:</h3>
                       <p>{config.data_type}</p>
diff --git a/src/components/RequestCodesPage/RequestCodesForm.jsx b/src/components/RequestCodesPage/RequestCodesForm.jsx
index 50fdb226ce..fd46d99187 100644
--- a/src/components/RequestCodesPage/RequestCodesForm.jsx
+++ b/src/components/RequestCodesPage/RequestCodesForm.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Link, Redirect } from 'react-router-dom';
-import { Alert, Button, Icon } from '@edx/paragon';
+import { Alert, Button, Spinner } from '@edx/paragon';
 
 import RenderField from '../RenderField';
 
@@ -120,7 +120,7 @@ class RequestCodesForm extends React.Component {
                 className="btn-primary"
               >
                 <>
-                  {submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+                  {submitting && <Spinner animation="border" className="mr-2" variant="light" size="sm" />}
                   Request Codes
                 </>
               </Button>
diff --git a/src/components/SaveTemplateButton/index.jsx b/src/components/SaveTemplateButton/index.jsx
index afe95f763c..efcf854b81 100644
--- a/src/components/SaveTemplateButton/index.jsx
+++ b/src/components/SaveTemplateButton/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StatefulButton, Icon } from '@edx/paragon';
+import { StatefulButton, Icon, Spinner } from '@edx/paragon';
+import { CheckCircle } from '@edx/paragon/icons';
 import { SubmissionError } from 'redux-form';
 
 import { validateEmailTemplateFields } from '../../data/validation/email';
@@ -149,8 +150,8 @@ class SaveTemplateButton extends React.Component {
           complete: 'Template Saved',
         }}
         icons={{
-          pending: <Icon className="fa fa-spinner fa-spin" />,
-          complete: <Icon className="fa fa-check-circle" />,
+          pending: <Spinner animation="border" variant="primary" size="sm" />,
+          complete: <Icon src={CheckCircle} />,
         }}
         disabledStates={[SUBMIT_STATES.PENDING]}
         disabled={disabled}
diff --git a/src/components/Sidebar/IconLink.test.jsx b/src/components/Sidebar/IconLink.test.jsx
index 5108123617..e34f9aaf2a 100644
--- a/src/components/Sidebar/IconLink.test.jsx
+++ b/src/components/Sidebar/IconLink.test.jsx
@@ -3,8 +3,8 @@ import {
 } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUniversity } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from '@edx/paragon';
+import { School } from '@edx/paragon/icons';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
@@ -28,7 +28,7 @@ describe('<IconLink />', () => {
     const defaultProps = {
       title: 'Internal Route',
       to: 'admin/test',
-      icon: <FontAwesomeIcon icon={faUniversity} />,
+      icon: <Icon src={School} />,
     };
     render(<IconLinkWrapper {...defaultProps} />);
     expect(screen.getByText('Internal Route').closest('a')).toHaveAttribute('href', '/admin/test');
@@ -38,7 +38,7 @@ describe('<IconLink />', () => {
     const defaultProps = {
       title: 'External Route',
       to: 'http://helpcenter.edx.org/us',
-      icon: <FontAwesomeIcon icon={faUniversity} />,
+      icon: <Icon src={School} />,
       external: true,
     };
 
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index f0515898c5..5a78bf11e8 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -3,13 +3,10 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { faFile, faLifeRing } from '@fortawesome/free-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faCreditCard, faTags, faChartLine, faChartBar, faCog,
-} from '@fortawesome/free-solid-svg-icons';
 import { Icon } from '@edx/paragon';
-import { MoneyOutline, BookOpen } from '@edx/paragon/icons';
+import {
+  BookOpen, CreditCard, Description, InsertChartOutlined, MoneyOutline, Settings, Support, Tag, TrendingUp,
+} from '@edx/paragon/icons';
 
 import { getConfig } from '@edx/frontend-platform/config';
 import IconLink from './IconLink';
@@ -73,25 +70,25 @@ const Sidebar = ({
     {
       title: 'Learner Progress Report',
       to: `${baseUrl}/admin/${ROUTE_NAMES.learners}`,
-      icon: <FontAwesomeIcon icon={faChartLine} fixedWidth />,
+      icon: <Icon src={TrendingUp} fixedWidth />,
     },
     {
       title: 'Analytics',
       to: `${baseUrl}/admin/${ROUTE_NAMES.analytics}`,
-      icon: <FontAwesomeIcon icon={faChartBar} fixedWidth />,
+      icon: <Icon src={InsertChartOutlined} fixedWidth />,
       hidden: !features.ANALYTICS || !enableAnalyticsScreen,
     },
     {
       title: 'Code Management',
       to: `${baseUrl}/admin/${ROUTE_NAMES.codeManagement}`,
-      icon: <FontAwesomeIcon icon={faTags} fixedWidth />,
+      icon: <Icon src={Tag} fixedWidth />,
       hidden: !features.CODE_MANAGEMENT || !enableCodeManagementScreen,
       notification: !!subsidyRequestsCounts.couponCodes,
     },
     {
       title: 'Subscription Management',
       to: `${baseUrl}/admin/${ROUTE_NAMES.subscriptionManagement}`,
-      icon: <FontAwesomeIcon icon={faCreditCard} fixedWidth />,
+      icon: <Icon src={CreditCard} fixedWidth />,
       hidden: !enableSubscriptionManagementScreen,
       notification: !!subsidyRequestsCounts.subscriptionLicenses,
     },
@@ -112,20 +109,20 @@ const Sidebar = ({
     {
       title: 'Reporting Configurations',
       to: `${baseUrl}/admin/${ROUTE_NAMES.reporting}`,
-      icon: <FontAwesomeIcon icon={faFile} fixedWidth />,
+      icon: <Icon src={Description} fixedWidth />,
       hidden: !features.REPORTING_CONFIGURATIONS || !enableReportingConfigScreen,
     },
     {
       title: 'Settings',
       id: TOUR_TARGETS.SETTINGS_SIDEBAR,
       to: `${baseUrl}/admin/${ROUTE_NAMES.settings}`,
-      icon: <FontAwesomeIcon icon={faCog} fixedWidth />,
+      icon: <Icon src={Settings} fixedWidth />,
     },
     // NOTE: keep "Support" link the last nav item
     {
       title: 'Support',
       to: configuration.ENTERPRISE_SUPPORT_URL,
-      icon: <FontAwesomeIcon icon={faLifeRing} fixedWidth />,
+      icon: <Icon src={Support} fixedWidth />,
       hidden: !features.SUPPORT,
       external: true,
     },
diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
new file mode 100644
index 0000000000..16132bf012
--- /dev/null
+++ b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import {
+  Card,
+  Button,
+  Stack,
+  Row,
+  Col,
+  Breadcrumb,
+} from '@edx/paragon';
+
+import { useOfferRedemptions, useOfferSummary } from './data/hooks';
+import LearnerCreditAggregateCards from './LearnerCreditAggregateCards';
+import LearnerCreditAllocationTable from './LearnerCreditAllocationTable';
+import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+
+const BudgetCard = ({
+  offer,
+  enterpriseUUID,
+  enterpriseSlug,
+}) => {
+  const {
+    start,
+    end,
+  } = offer;
+
+  const {
+    isLoading: isLoadingOfferSummary,
+    offerSummary,
+  } = useOfferSummary(enterpriseUUID, offer);
+
+  const {
+    isLoading: isLoadingOfferRedemptions,
+    offerRedemptions,
+    fetchOfferRedemptions,
+  } = useOfferRedemptions(enterpriseUUID, offer?.id);
+  const [detailPage, setDetailPage] = useState(false);
+  const [activeLabel, setActiveLabel] = useState('');
+  const links = [
+    { label: 'Budgets', url: `/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}` },
+  ];
+  const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
+  const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+  const navigateToBudgetRedemptions = (budgetType) => {
+    setDetailPage(true);
+    links.push({ label: budgetType, url: `/${enterpriseSlug}/admin/learner-credit` });
+    setActiveLabel(budgetType);
+  };
+
+  const renderActions = (budgetType) => (
+    <Button
+      data-testid="view-budget"
+      onClick={() => navigateToBudgetRedemptions(budgetType)}
+    >
+      View Budget
+    </Button>
+  );
+
+  const renderCardHeader = (budgetType) => {
+    const subtitle = (
+      <div className="d-flex flex-wrap align-items-center">
+        <span data-testid="offer-date">
+          {formattedStartDate} - {formattedExpirationDate}
+        </span>
+      </div>
+    );
+
+    return (
+      <Card.Header
+        title={budgetType}
+        subtitle={subtitle}
+        actions={(
+          <div>
+            {renderActions(budgetType)}
+          </div>
+                )}
+      />
+    );
+  };
+
+  const renderCardSection = (available, spent) => (
+    <Card.Section
+      title="Balance"
+      muted
+    >
+      <Row className="d-flex flex-row justify-content-start w-md-75">
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Available</span>
+          <span>{available}</span>
+        </Col>
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Spent</span>
+          <span>{spent}</span>
+        </Col>
+      </Row>
+    </Card.Section>
+  );
+
+  const renderCardAggregate = () => (
+    <div className="mb-4.5 d-flex flex-wrap mx-n3">
+      <LearnerCreditAggregateCards
+        isLoading={isLoadingOfferSummary}
+        totalFunds={offerSummary?.totalFunds}
+        redeemedFunds={offerSummary?.redeemedFunds}
+        remainingFunds={offerSummary?.remainingFunds}
+        percentUtilized={offerSummary?.percentUtilized}
+      />
+    </div>
+  );
+
+  return (
+    <Stack>
+      <Row className="m-3">
+        <Col xs="12">
+          <Breadcrumb
+            ariaLabel="Breadcrumb"
+            links={links}
+            activeLabel={activeLabel}
+          />
+        </Col>
+      </Row>
+      {!detailPage
+        ? (
+          <>
+            {renderCardAggregate()}
+            <h2>Budgets</h2>
+            <Card
+              orientation="horizontal"
+            >
+              <Card.Body>
+                <Stack gap={4}>
+                  {renderCardHeader('Overview')}
+                  {renderCardSection(offerSummary?.remainingFunds, offerSummary?.redeemedFunds)}
+                </Stack>
+              </Card.Body>
+            </Card>
+          </>
+        )
+        : (
+          <LearnerCreditAllocationTable
+            isLoading={isLoadingOfferRedemptions}
+            tableData={offerRedemptions}
+            fetchTableData={fetchOfferRedemptions}
+            enterpriseUUID={enterpriseUUID}
+          />
+        )}
+    </Stack>
+  );
+};
+
+BudgetCard.propTypes = {
+  offer: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    start: PropTypes.string.isRequired,
+    end: PropTypes.string.isRequired,
+  }).isRequired,
+  enterpriseUUID: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
+};
+
+export default BudgetCard;
diff --git a/src/components/learner-credit-management/BudgetCard.jsx b/src/components/learner-credit-management/BudgetCard.jsx
new file mode 100644
index 0000000000..247769c715
--- /dev/null
+++ b/src/components/learner-credit-management/BudgetCard.jsx
@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import {
+  Card,
+  Button,
+  Stack,
+  Row,
+  Col,
+  Breadcrumb,
+} from '@edx/paragon';
+
+import { getCourseProductLineAbbreviation } from '../../utils';
+import { useOfferRedemptions, useOfferSummary } from './data/hooks';
+import LearnerCreditAggregateCards from './LearnerCreditAggregateCards';
+import LearnerCreditAllocationTable from './LearnerCreditAllocationTable';
+import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import { EXEC_ED_OFFER_TYPE } from './data/constants';
+
+const BudgetCard = ({
+  offer,
+  enterpriseUUID,
+  enterpriseSlug,
+}) => {
+  const {
+    start,
+    end,
+  } = offer;
+
+  const {
+    isLoading: isLoadingOfferSummary,
+    offerSummary,
+  } = useOfferSummary(enterpriseUUID, offer);
+
+  const {
+    isLoading: isLoadingOfferRedemptions,
+    offerRedemptions,
+    fetchOfferRedemptions,
+  } = useOfferRedemptions(enterpriseUUID, offer?.id);
+  const [detailPage, setDetailPage] = useState(false);
+  const [activeLabel, setActiveLabel] = useState('');
+  const links = [
+    { label: 'Budgets', url: `/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}` },
+  ];
+  const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
+  const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+  const navigateToBudgetRedemptions = (budgetType) => {
+    setDetailPage(true);
+    links.push({ label: budgetType, url: `/${enterpriseSlug}/admin/learner-credit` });
+    setActiveLabel(budgetType);
+  };
+
+  const renderActions = (budgetType) => (
+    <Button
+      data-testid="view-budget"
+      onClick={() => navigateToBudgetRedemptions(budgetType)}
+    >
+      View Budget
+    </Button>
+  );
+
+  const renderCardHeader = (budgetType) => {
+    const subtitle = (
+      <div className="d-flex flex-wrap align-items-center">
+        <span data-testid="offer-date">
+          {formattedStartDate} - {formattedExpirationDate}
+        </span>
+      </div>
+    );
+
+    return (
+      <Card.Header
+        title={budgetType}
+        subtitle={subtitle}
+        actions={(
+          <div>
+            {renderActions(budgetType)}
+          </div>
+        )}
+      />
+    );
+  };
+
+  const renderCardSection = (available, spent) => (
+    <Card.Section
+      title="Balance"
+      muted
+    >
+      <Row className="d-flex flex-row justify-content-start w-md-75">
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Available</span>
+          <span>{available}</span>
+        </Col>
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Spent</span>
+          <span>{spent}</span>
+        </Col>
+      </Row>
+    </Card.Section>
+  );
+
+  const renderCardAggregate = () => (
+    <div className="mb-4.5 d-flex flex-wrap mx-n3">
+      <LearnerCreditAggregateCards
+        isLoading={isLoadingOfferSummary}
+        totalFunds={offerSummary?.totalFunds}
+        redeemedFunds={offerSummary?.redeemedFunds}
+        remainingFunds={offerSummary?.remainingFunds}
+        percentUtilized={offerSummary?.percentUtilized}
+      />
+    </div>
+  );
+
+  return (
+    <Stack>
+      <Row className="m-3">
+        <Col xs="12">
+          <Breadcrumb
+            ariaLabel="Breadcrumb is active"
+            links={links}
+            activeLabel={activeLabel}
+          />
+        </Col>
+      </Row>
+      {!detailPage
+        ? (
+          <>
+            {renderCardAggregate()}
+            <h2>Budgets</h2>
+            <Card
+              orientation="horizontal"
+            >
+              <Card.Body>
+                <Stack gap={4}>
+                  {renderCardHeader('Open Courses Marketplace')}
+                  {renderCardSection(offerSummary?.remainingFunds, offerSummary?.redeemedFundsOcm)}
+                </Stack>
+              </Card.Body>
+            </Card>
+            {offerSummary?.offerType === EXEC_ED_OFFER_TYPE
+              && (
+              <Card
+                orientation="horizontal"
+              >
+                <Card.Body>
+                  <Stack gap={4}>
+                    {renderCardHeader('Executive Education')}
+                    {renderCardSection(offerSummary?.remainingFunds, offerSummary?.redeemedFundsExecEd)}
+                  </Stack>
+                </Card.Body>
+              </Card>
+              )}
+          </>
+        )
+        : (
+          <LearnerCreditAllocationTable
+            isLoading={isLoadingOfferRedemptions}
+            tableData={offerRedemptions}
+            fetchTableData={fetchOfferRedemptions}
+            enterpriseUUID={enterpriseUUID}
+            budgetType={getCourseProductLineAbbreviation(activeLabel)}
+          />
+        )}
+    </Stack>
+  );
+};
+
+BudgetCard.propTypes = {
+  offer: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    start: PropTypes.string.isRequired,
+    end: PropTypes.string.isRequired,
+  }).isRequired,
+  enterpriseUUID: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
+};
+
+export default BudgetCard;
diff --git a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
index 12eada0677..e5eceb7766 100644
--- a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
+++ b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
 import {
   DataTable, useMediaQuery, breakpoints,
 } from '@edx/paragon';
-import moment from 'moment';
 
 import TableTextFilter from './TableTextFilter';
 import EmailAddressTableCell from './EmailAddressTableCell';
@@ -19,6 +19,8 @@ const LearnerCreditAllocationTable = ({
   enterpriseUUID,
 }) => {
   const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth });
+  const defaultFilter = [];
+
   return (
     <DataTable
       isSortable
@@ -50,13 +52,14 @@ const LearnerCreditAllocationTable = ({
         {
           Header: 'Date Spent',
           accessor: 'enrollmentDate',
-          Cell: ({ row }) => moment(row.values.enrollmentDate).format('MMMM DD, YYYY'),
+          Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM DD, YYYY'),
           disableFilters: true,
         },
         {
           Header: 'Product',
           accessor: 'courseProductLine',
           Cell: ({ row }) => getCourseProductLineText(row.values.courseProductLine),
+          disableFilters: true,
         },
       ]}
       initialTableOptions={{
@@ -68,6 +71,7 @@ const LearnerCreditAllocationTable = ({
         sortBy: [
           { id: 'enrollmentDate', desc: true },
         ],
+        filters: defaultFilter,
       }}
       fetchData={fetchTableData}
       data={tableData.results}
diff --git a/src/components/learner-credit-management/LearnerCreditManagement.jsx b/src/components/learner-credit-management/LearnerCreditManagement.jsx
index 788ce48e23..5f3ce77d4c 100644
--- a/src/components/learner-credit-management/LearnerCreditManagement.jsx
+++ b/src/components/learner-credit-management/LearnerCreditManagement.jsx
@@ -4,7 +4,7 @@ import React, {
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   Badge,
   Container,
@@ -86,7 +86,7 @@ const LearnerCreditManagement = ({ enterpriseUUID }) => {
         {isLoadingOfferSummary || isLoadingOfferRedemptions ? (
           <Skeleton width={320} />
         ) : (
-          <LearnerCreditDisclaimer offerLastUpdated={moment(offerDataLastUpdatedTimestamp).format(DATE_FORMAT)} />
+          <LearnerCreditDisclaimer offerLastUpdated={dayjs(offerDataLastUpdatedTimestamp).format(DATE_FORMAT)} />
         )}
         <div className="mb-4.5 d-flex flex-wrap mx-n3">
           <LearnerCreditAggregateCards
diff --git a/src/components/learner-credit-management/MultipleBudgetsPage.jsx b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
new file mode 100644
index 0000000000..cec507a231
--- /dev/null
+++ b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
@@ -0,0 +1,84 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Stack,
+  Row,
+  Col,
+  Card,
+  Hyperlink,
+} from '@edx/paragon';
+import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet';
+import Hero from '../Hero';
+
+import LoadingMessage from '../LoadingMessage';
+import MultipleBudgetsPicker from './MultipleBudgetsPicker';
+import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
+
+import { configuration } from '../../config';
+
+const PAGE_TITLE = 'Learner Credit';
+
+const MultipleBudgetsPage = ({
+  enterpriseUUID,
+  enterpriseSlug,
+}) => {
+  const { offers, isLoading } = useContext(EnterpriseSubsidiesContext);
+
+  if (isLoading) {
+    return <LoadingMessage className="offers" />;
+  }
+
+  if (offers.length === 0) {
+    return (
+      <Stack>
+        <Helmet title={PAGE_TITLE} />
+        <Hero title={PAGE_TITLE} />
+        <Card>
+          <Card.Section className="text-center">
+            <Row>
+              <Col xs={12} lg={{ span: 8, offset: 2 }}>
+                <h3 className="mb-3">No budgets for your organization</h3>
+                <p>
+                  We were unable to find any budgets for your organization. Please contact
+                  Customer Support if you have questions.
+                </p>
+                <Hyperlink
+                  className="btn btn-brand"
+                  target="_blank"
+                  destination={configuration.ENTERPRISE_SUPPORT_URL}
+                >
+                  Contact support
+                </Hyperlink>
+              </Col>
+            </Row>
+          </Card.Section>
+        </Card>
+      </Stack>
+    );
+  }
+
+  return (
+    <>
+      <Helmet title={PAGE_TITLE} />
+      <Hero title={PAGE_TITLE} />
+      <MultipleBudgetsPicker
+        offers={offers}
+        enterpriseUUID={enterpriseUUID}
+        enterpriseSlug={enterpriseSlug}
+      />
+    </>
+  );
+};
+
+const mapStateToProps = state => ({
+  enterpriseUUID: state.portalConfiguration.enterpriseId,
+  enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+});
+
+MultipleBudgetsPage.propTypes = {
+  enterpriseUUID: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
+};
+
+export default connect(mapStateToProps)(MultipleBudgetsPage);
diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
new file mode 100644
index 0000000000..8535bd1d21
--- /dev/null
+++ b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Stack,
+  Row,
+  Col,
+} from '@edx/paragon';
+
+import BudgetCard from './BudgetCard-V2';
+
+const MultipleBudgetsPicker = ({
+  offers,
+  enterpriseUUID,
+  enterpriseSlug,
+}) => (
+  <Stack>
+    <Row>
+      <Col lg="10">
+        {offers.map(offer => (
+          <BudgetCard
+            key={offer.id}
+            offer={offer}
+            enterpriseUUID={enterpriseUUID}
+            enterpriseSlug={enterpriseSlug}
+          />
+        ))}
+      </Col>
+    </Row>
+  </Stack>
+);
+
+MultipleBudgetsPicker.propTypes = {
+  offers: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  enterpriseUUID: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
+};
+
+export default MultipleBudgetsPicker;
diff --git a/src/components/learner-credit-management/OfferDates.jsx b/src/components/learner-credit-management/OfferDates.jsx
index b42ab49946..b9fe53e6fc 100644
--- a/src/components/learner-credit-management/OfferDates.jsx
+++ b/src/components/learner-credit-management/OfferDates.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
-
+import dayjs from 'dayjs';
 import { DATE_FORMAT } from './data/constants';
 
 /**
@@ -9,7 +8,7 @@ import { DATE_FORMAT } from './data/constants';
  * @param {string} date Timestamp string.
  * @returns True if timestamp is in the past, False if not.
  */
-const isDatePast = timestamp => moment(timestamp).isBefore(moment());
+const isDatePast = timestamp => dayjs(timestamp).isBefore(dayjs());
 
 /**
  * Formats provided dates for display, handling when `start` and/or
@@ -22,13 +21,13 @@ const isDatePast = timestamp => moment(timestamp).isBefore(moment());
 const formatDates = (start, end) => {
   let formattedDates = null;
   if (start && end) {
-    formattedDates = `${moment(start).format(DATE_FORMAT)} - ${moment(end).format(DATE_FORMAT)}`;
+    formattedDates = `${dayjs(start).format(DATE_FORMAT)} - ${dayjs(end).format(DATE_FORMAT)}`;
   } else if (start && !end) {
     const startLabel = isDatePast(start) ? 'Started' : 'Starts';
-    formattedDates = `${startLabel} ${moment(start).format(DATE_FORMAT)}`;
+    formattedDates = `${startLabel} ${dayjs(start).format(DATE_FORMAT)}`;
   } else if (!start && end) {
     const endLabel = isDatePast(end) ? 'Ended' : 'Ends';
-    formattedDates = `${endLabel} ${moment(end).format(DATE_FORMAT)}`;
+    formattedDates = `${endLabel} ${dayjs(end).format(DATE_FORMAT)}`;
   }
   return formattedDates;
 };
diff --git a/src/components/learner-credit-management/data/constants.js b/src/components/learner-credit-management/data/constants.js
index 6c11820c1c..2e27404dee 100644
--- a/src/components/learner-credit-management/data/constants.js
+++ b/src/components/learner-credit-management/data/constants.js
@@ -14,3 +14,5 @@ export const LOW_REMAINING_BALANCE_PERCENT_THRESHOLD = 0.75;
 export const NO_BALANCE_REMAINING_DOLLAR_THRESHOLD = 100;
 
 export const DATE_FORMAT = 'MMMM DD, YYYY';
+
+export const EXEC_ED_OFFER_TYPE = 'learner_credit';
diff --git a/src/components/learner-credit-management/data/hooks.js b/src/components/learner-credit-management/data/hooks.js
index 45b3d73934..7ff74aaa69 100644
--- a/src/components/learner-credit-management/data/hooks.js
+++ b/src/components/learner-credit-management/data/hooks.js
@@ -65,12 +65,16 @@ const applySortByToOptions = (sortBy, options) => {
 const applyFiltersToOptions = (filters, options) => {
   const userSearchQuery = filters?.find(filter => filter.id === 'userEmail')?.value;
   const courseTitleSearchQuery = filters?.find(filter => filter.id === 'courseTitle')?.value;
+  const courseProductLineSearchQuery = filters?.find(filter => filter.id === 'courseProductLine')?.value;
   if (userSearchQuery) {
     Object.assign(options, { search: userSearchQuery });
   }
   if (courseTitleSearchQuery) {
     Object.assign(options, { searchCourse: courseTitleSearchQuery });
   }
+  if (courseProductLineSearchQuery) {
+    Object.assign(options, { courseProductLine: courseProductLineSearchQuery });
+  }
 };
 
 export const useOfferRedemptions = (enterpriseUUID, offerId) => {
diff --git a/src/components/learner-credit-management/data/tests/hooks.test.js b/src/components/learner-credit-management/data/tests/hooks.test.js
index b6bf511d57..fa03c60f9e 100644
--- a/src/components/learner-credit-management/data/tests/hooks.test.js
+++ b/src/components/learner-credit-management/data/tests/hooks.test.js
@@ -68,6 +68,8 @@ describe('useOfferSummary', () => {
     const expectedResult = {
       totalFunds: 5000,
       redeemedFunds: 200,
+      redeemedFundsExecEd: NaN,
+      redeemedFundsOcm: NaN,
       remainingFunds: 4800,
       percentUtilized: 0.04,
     };
diff --git a/src/components/learner-credit-management/data/tests/utils.test.js b/src/components/learner-credit-management/data/tests/utils.test.js
index 2b82930015..33902d40fe 100644
--- a/src/components/learner-credit-management/data/tests/utils.test.js
+++ b/src/components/learner-credit-management/data/tests/utils.test.js
@@ -1,4 +1,5 @@
 import { transformOfferSummary } from '../utils';
+import { EXEC_ED_OFFER_TYPE } from '../constants';
 
 describe('transformOfferSummary', () => {
   it('should return null if there is no offerSummary', () => {
@@ -11,13 +12,17 @@ describe('transformOfferSummary', () => {
       amountOfOfferSpent: 1.34,
       remainingBalance: -0.34,
       percentOfOfferSpent: 1.34,
+      offerType: EXEC_ED_OFFER_TYPE,
     };
 
     expect(transformOfferSummary(offerSummary)).toEqual({
       totalFunds: 1,
       redeemedFunds: 1,
+      redeemedFundsExecEd: NaN,
+      redeemedFundsOcm: NaN,
       remainingFunds: 0.0,
       percentUtilized: 1.0,
+      offerType: EXEC_ED_OFFER_TYPE,
     });
   });
 
@@ -27,6 +32,7 @@ describe('transformOfferSummary', () => {
       amountOfOfferSpent: 100,
       remainingBalance: null,
       percentOfOfferSpent: null,
+      offerType: 'Site',
     };
 
     expect(transformOfferSummary(offerSummary)).toEqual({
@@ -34,6 +40,7 @@ describe('transformOfferSummary', () => {
       redeemedFunds: 100,
       remainingFunds: null,
       percentUtilized: null,
+      offerType: 'Site',
     });
   });
 });
diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js
index 7a9101ba16..30b0efba01 100644
--- a/src/components/learner-credit-management/data/utils.js
+++ b/src/components/learner-credit-management/data/utils.js
@@ -15,11 +15,15 @@ export const transformOfferSummary = (offerSummary) => {
 
   const totalFunds = offerSummary.maxDiscount && parseFloat(offerSummary.maxDiscount);
   let redeemedFunds = offerSummary.amountOfOfferSpent && parseFloat(offerSummary.amountOfOfferSpent);
+  let redeemedFundsOcm = offerSummary.amountOfferSpentOcm && parseFloat(offerSummary.amountOfferSpentOcm);
+  let redeemedFundsExecEd = offerSummary.amountOfferSpentExecEd && parseFloat(offerSummary.amountOfferSpentExecEd);
 
   // cap redeemed funds at the maximum funds available (`maxDiscount`), if applicable, so we
   // don't display redeemed funds > funds available.
   if (totalFunds) {
     redeemedFunds = Math.min(redeemedFunds, totalFunds);
+    redeemedFundsOcm = Math.min(redeemedFundsOcm, totalFunds);
+    redeemedFundsExecEd = Math.min(redeemedFundsExecEd, totalFunds);
   }
 
   let remainingFunds = offerSummary.remainingBalance && parseFloat(offerSummary.remainingBalance);
@@ -33,12 +37,16 @@ export const transformOfferSummary = (offerSummary) => {
   if (percentUtilized) {
     percentUtilized = Math.min(percentUtilized, 1.0);
   }
+  const { offerType } = offerSummary;
 
   return {
     totalFunds,
     redeemedFunds,
+    redeemedFundsOcm,
+    redeemedFundsExecEd,
     remainingFunds,
     percentUtilized,
+    offerType,
   };
 };
 
diff --git a/src/components/learner-credit-management/index.js b/src/components/learner-credit-management/index.js
index e691d21a11..271f4453ed 100644
--- a/src/components/learner-credit-management/index.js
+++ b/src/components/learner-credit-management/index.js
@@ -1,3 +1,3 @@
-import LearnerCreditManagement from './LearnerCreditManagement';
+import MultipleBudgetsPage from './MultipleBudgetsPage';
 
-export default LearnerCreditManagement;
+export default MultipleBudgetsPage;
diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
new file mode 100644
index 0000000000..cfc91ded7c
--- /dev/null
+++ b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
@@ -0,0 +1,148 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import userEvent from '@testing-library/user-event';
+import configureMockStore from 'redux-mock-store';
+import dayjs from 'dayjs';
+import {
+  screen,
+  render,
+  waitFor,
+} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import BudgetCard from '../BudgetCard-V2';
+import { useOfferSummary, useOfferRedemptions } from '../data/hooks';
+import { EXEC_ED_OFFER_TYPE } from '../data/constants';
+
+jest.mock('../data/hooks');
+useOfferSummary.mockReturnValue({
+  isLoading: false,
+  offerSummary: null,
+});
+useOfferRedemptions.mockReturnValue({
+  isLoading: false,
+  offerRedemptions: {
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  },
+  fetchOfferRedemptions: jest.fn(),
+});
+
+const mockStore = configureMockStore([thunk]);
+const getMockStore = store => mockStore(store);
+const enterpriseId = 'test-enterprise';
+const enterpriseUUID = '1234';
+const initialStore = {
+  portalConfiguration: {
+    enterpriseId,
+  },
+};
+const store = getMockStore({ ...initialStore });
+
+const mockEnterpriseOfferId = '123';
+const mockEnterpriseOfferEnrollmentId = 456;
+
+const mockOfferDisplayName = 'Test Enterprise Offer';
+const mockOfferSummary = {
+  totalFunds: 5000,
+  redeemedFunds: 200,
+  remainingFunds: 4800,
+  percentUtilized: 0.04,
+  offerType: EXEC_ED_OFFER_TYPE,
+};
+
+const BudgetCardWrapper = ({ ...rest }) => (
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <BudgetCard {...rest} />
+    </IntlProvider>
+  </Provider>
+);
+
+describe('<BudgetCard />', () => {
+  describe('with enterprise offer', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('displays correctly for Offers', () => {
+      const mockOffer = {
+        id: mockEnterpriseOfferId,
+        name: mockOfferDisplayName,
+        start: '2022-01-01',
+        end: '2023-01-01',
+      };
+      const mockOfferRedemption = {
+        created: '2022-02-01',
+        enterpriseEnrollmentId: mockEnterpriseOfferEnrollmentId,
+      };
+      useOfferSummary.mockReturnValue({
+        isLoading: false,
+        offerSummary: {
+          totalFunds: 5000,
+          redeemedFunds: 200,
+          remainingFunds: 4800,
+          percentUtilized: 0.04,
+          offerType: 'Site',
+        },
+      });
+      useOfferRedemptions.mockReturnValue({
+        isLoading: false,
+        offerRedemptions: {
+          results: [mockOfferRedemption],
+          itemCount: 1,
+          pageCount: 1,
+        },
+        fetchOfferRedemptions: jest.fn(),
+      });
+      render(<BudgetCardWrapper
+        offer={mockOffer}
+        enterpriseUUID={enterpriseUUID}
+        enterpriseSlug={enterpriseId}
+      />);
+      expect(screen.getByText('Overview'));
+      expect(screen.queryByText('Executive Education')).not.toBeInTheDocument();
+      expect(screen.getByText(`$${mockOfferSummary.redeemedFunds.toLocaleString()}`));
+      const formattedString = `${dayjs(mockOffer.start).format('MMMM D, YYYY')} - ${dayjs(mockOffer.end).format('MMMM D, YYYY')}`;
+      const elementsWithTestId = screen.getAllByTestId('offer-date');
+      const firstElementWithTestId = elementsWithTestId[0];
+      expect(firstElementWithTestId).toHaveTextContent(formattedString);
+    });
+
+    it('displays table on clicking view budget', async () => {
+      const mockOffer = {
+        id: mockEnterpriseOfferId,
+        name: mockOfferDisplayName,
+        start: '2022-01-01',
+        end: '2023-01-01',
+      };
+      useOfferSummary.mockReturnValue({
+        isLoading: false,
+        offerSummary: mockOfferSummary,
+      });
+      useOfferRedemptions.mockReturnValue({
+        isLoading: false,
+        offerRedemptions: {
+          itemCount: 0,
+          pageCount: 0,
+          results: [],
+        },
+        fetchOfferRedemptions: jest.fn(),
+      });
+      render(<BudgetCardWrapper
+        offer={mockOffer}
+        enterpriseUUID={enterpriseUUID}
+        enterpriseSlug={enterpriseId}
+      />);
+      const elementsWithTestId = screen.getAllByTestId('view-budget');
+      const firstElementWithTestId = elementsWithTestId[0];
+      await waitFor(() => userEvent.click(firstElementWithTestId));
+      expect(screen.getByText('Filters'));
+      expect(screen.getByText('No results found'));
+    });
+  });
+});
diff --git a/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
index 00ebf8f3fc..fb79748c70 100644
--- a/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
+++ b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
@@ -18,6 +18,7 @@ describe('<LearnerCreditAllocationTable />', () => {
     const props = {
       enterpriseUUID: 'test-enterprise-id',
       isLoading: false,
+      budgetType: 'OCM',
       tableData: {
         results: [{
           userEmail: 'test@example.com',
@@ -47,4 +48,22 @@ describe('<LearnerCreditAllocationTable />', () => {
     }));
     expect(screen.getByText('February', { exact: false }));
   });
+  it('renders with empty table data', () => {
+    const props = {
+      enterpriseUUID: 'test-enterprise-id',
+      isLoading: false,
+      budgetType: 'OCM',
+      tableData: {
+        results: [],
+        itemCount: 0,
+        pageCount: 0,
+      },
+      fetchTableData: jest.fn(),
+    };
+    props.fetchTableData.mockReturnValue(props.tableData);
+
+    render(<LearnerCreditAllocationTableWrapper {...props} />);
+
+    expect(screen.getByText('No results found', { exact: false }));
+  });
 });
diff --git a/src/components/learner-credit-management/tests/LearnerCreditManagement.test.jsx b/src/components/learner-credit-management/tests/LearnerCreditManagement.test.jsx
index be0430a93e..f268b2faf7 100644
--- a/src/components/learner-credit-management/tests/LearnerCreditManagement.test.jsx
+++ b/src/components/learner-credit-management/tests/LearnerCreditManagement.test.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   screen,
   render,
@@ -165,7 +165,7 @@ describe('<LearnerCreditManagement />', () => {
       expect(screen.getByText(mockOffer.start));
       expect(screen.getByText(mockOffer.end));
 
-      expect(screen.getByText(`Data last updated on ${moment(mockOfferRedemption.created).format(DATE_FORMAT)}`, { exact: false }));
+      expect(screen.getByText(`Data last updated on ${dayjs(mockOfferRedemption.created).format(DATE_FORMAT)}`, { exact: false }));
 
       expect(screen.getByTestId('learner-credit-allocation--is-loading')).toHaveTextContent('is NOT loading');
       expect(screen.getByTestId('learner-credit-allocation--table-data')).toHaveTextContent(mockOfferRedemption.enterpriseEnrollmentId);
diff --git a/src/components/learner-credit-management/tests/MultipleBudgetsPage.test.jsx b/src/components/learner-credit-management/tests/MultipleBudgetsPage.test.jsx
new file mode 100644
index 0000000000..8b22a9d4ec
--- /dev/null
+++ b/src/components/learner-credit-management/tests/MultipleBudgetsPage.test.jsx
@@ -0,0 +1,47 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import configureMockStore from 'redux-mock-store';
+import {
+  screen,
+  render,
+} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { EnterpriseSubsidiesContext } from '../../EnterpriseSubsidiesContext';
+import MultipleBudgetsPage from '../MultipleBudgetsPage';
+
+const mockStore = configureMockStore([thunk]);
+const getMockStore = store => mockStore(store);
+const enterpriseId = 'test-enterprise';
+const initialStore = {
+  portalConfiguration: {
+    enterpriseId,
+  },
+};
+const store = getMockStore({ ...initialStore });
+const enterpriseUUID = '1234';
+
+const defaultEnterpriseSubsidiesContextValue = {
+  offers: [],
+};
+
+const MultipleBudgetsPageWrapper = ({
+  enterpriseSubsidiesContextValue = defaultEnterpriseSubsidiesContextValue,
+  ...rest
+}) => (
+  <Provider store={store}>
+    <EnterpriseSubsidiesContext.Provider value={enterpriseSubsidiesContextValue}>
+      <MultipleBudgetsPage {...rest} />
+    </EnterpriseSubsidiesContext.Provider>
+  </Provider>
+);
+
+describe('<MultipleBudgetsPage />', () => {
+  it('No budgets for your organization', () => {
+    render(<MultipleBudgetsPageWrapper enterpriseUUID={enterpriseUUID} enterpriseSlug={enterpriseId} />);
+    expect(screen.getByText('No budgets for your organization'));
+    expect(screen.getByText('Contact support'));
+  });
+});
diff --git a/src/components/learner-credit-management/tests/OfferDates.test.jsx b/src/components/learner-credit-management/tests/OfferDates.test.jsx
index 15b0aa6d1a..be917d8cca 100644
--- a/src/components/learner-credit-management/tests/OfferDates.test.jsx
+++ b/src/components/learner-credit-management/tests/OfferDates.test.jsx
@@ -3,7 +3,7 @@ import {
   screen,
   render,
 } from '@testing-library/react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import OfferDates from '../OfferDates';
 import { DATE_FORMAT } from '../data/constants';
@@ -16,7 +16,7 @@ describe('<OfferDates />', () => {
 
   describe('with start date only', () => {
     it('date is past', () => {
-      const startDate = moment('2022-01-31');
+      const startDate = dayjs('2022-01-31');
       const props = {
         start: startDate.toISOString(),
       };
@@ -25,7 +25,7 @@ describe('<OfferDates />', () => {
       expect(screen.getByText(`Started ${startDate.format(DATE_FORMAT)}`, { exact: false }));
     });
     it('date is current/future', () => {
-      const startDate = moment().add(5, 'd');
+      const startDate = dayjs().add(5, 'd');
       const props = {
         start: startDate.toISOString(),
       };
@@ -37,7 +37,7 @@ describe('<OfferDates />', () => {
 
   describe('with end date only', () => {
     it('date is past', () => {
-      const endDate = moment('2022-01-31');
+      const endDate = dayjs('2022-01-31');
       const props = {
         end: endDate.toISOString(),
       };
@@ -46,7 +46,7 @@ describe('<OfferDates />', () => {
       expect(screen.getByText(`Ended ${endDate.format(DATE_FORMAT)}`, { exact: false }));
     });
     it('date is current/future', () => {
-      const endDate = moment().add(5, 'd');
+      const endDate = dayjs().add(5, 'd');
       const props = {
         end: endDate.toISOString(),
       };
@@ -58,7 +58,7 @@ describe('<OfferDates />', () => {
 
   describe('with both start and end dates', () => {
     it('displays both dates', () => {
-      const startDate = moment('2022-01-31');
+      const startDate = dayjs('2022-01-31');
       const endDate = startDate.add(1, 'y');
       const props = {
         start: startDate.toISOString(),
diff --git a/src/components/settings/SettingsAccessTab/tests/SettingsAccessLinkManagement.test.jsx b/src/components/settings/SettingsAccessTab/tests/SettingsAccessLinkManagement.test.jsx
index 4d42fb0ef9..0c8b43d695 100644
--- a/src/components/settings/SettingsAccessTab/tests/SettingsAccessLinkManagement.test.jsx
+++ b/src/components/settings/SettingsAccessTab/tests/SettingsAccessLinkManagement.test.jsx
@@ -1,14 +1,12 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import {
-  screen,
-  render,
-  act,
-} from '@testing-library/react';
+import dayjs from 'dayjs';
+import { screen, render, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
-import moment from 'moment';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+
 import LmsApiService from '../../../../data/services/LmsApiService';
 import MockSettingsContext, { MOCK_CONSTANTS, generateStore } from './TestUtils';
 import SettingsAccessLinkManagement from '../SettingsAccessLinkManagement';
@@ -110,8 +108,8 @@ describe('<SettingsAccessLinkManagement/>', () => {
 
   test('Toggle Universal Link On', async () => {
     LmsApiService.toggleEnterpriseCustomerUniversalLink.mockReturnValue({ data: {} });
-    const subExpirationDate = moment().add(1, 'days').format();
-    const couponExpirationDate = moment().add(3, 'days').format();
+    const subExpirationDate = dayjs().add(1, 'days').format();
+    const couponExpirationDate = dayjs().add(3, 'days').format();
     render(
       <SettingsAccessLinkManagementWrapper
         store={generateStore({
diff --git a/src/components/settings/SettingsAppearanceTab/CustomThemeModal.jsx b/src/components/settings/SettingsAppearanceTab/CustomThemeModal.jsx
index b81ba9011a..5420a05561 100644
--- a/src/components/settings/SettingsAppearanceTab/CustomThemeModal.jsx
+++ b/src/components/settings/SettingsAppearanceTab/CustomThemeModal.jsx
@@ -24,7 +24,7 @@ const CustomThemeModal = ({
 
   const headerText = 'Customize the admin and learner edX experience using your own brand colors. Enter color values in hexadecimal code.';
   const infoText = 'More details about color appearance in the admin and learner experiences and best practices for selecting accessible colors are available in the ';
-  const invalidMessage = 'Must be hexidecimal starting with # (Ex: #1e0b57)';
+  const invalidMessage = 'Must be hexadecimal starting with # (Ex: #1e0b57)';
   const warningMessage = 'Color doesn\'t meet the WCAG AA standard of accessibility. Learn more at the help center link below. ';
 
   const hexRegExpPattern = '^#([A-Fa-f0-9]{6})$';
diff --git a/src/components/settings/SettingsAppearanceTab/tests/SettingsAppearanceTab.test.jsx b/src/components/settings/SettingsAppearanceTab/tests/SettingsAppearanceTab.test.jsx
index 7905fc0bf3..ea8a4a61c6 100644
--- a/src/components/settings/SettingsAppearanceTab/tests/SettingsAppearanceTab.test.jsx
+++ b/src/components/settings/SettingsAppearanceTab/tests/SettingsAppearanceTab.test.jsx
@@ -14,7 +14,7 @@ import LmsApiService from '../../../../data/services/LmsApiService';
 
 const enterpriseId = 'an-id-1';
 
-let entepriseBranding = {
+let enterpriseBranding = {
   primary_color: SCHOLAR_THEME.button,
   secondary_color: SCHOLAR_THEME.banner,
   tertiary_color: SCHOLAR_THEME.accent,
@@ -49,7 +49,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
@@ -66,7 +66,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
@@ -85,7 +85,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
@@ -110,7 +110,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
@@ -130,7 +130,7 @@ describe('Portal Appearance Tab', () => {
     });
   });
   test('autoselects correct brand card', async () => {
-    entepriseBranding = {
+    enterpriseBranding = {
       primary_color: SAGE_THEME.button,
       secondary_color: SAGE_THEME.banner,
       tertiary_color: SAGE_THEME.accent,
@@ -141,7 +141,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
@@ -152,7 +152,7 @@ describe('Portal Appearance Tab', () => {
   });
   test('creating custom theme card', async () => {
     const spy = jest.spyOn(LmsApiService, 'updateEnterpriseCustomerBranding');
-    entepriseBranding = {
+    enterpriseBranding = {
       primary_color: SAGE_THEME.button,
       secondary_color: SAGE_THEME.banner,
       tertiary_color: SAGE_THEME.accent,
@@ -163,7 +163,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
@@ -175,7 +175,7 @@ describe('Portal Appearance Tab', () => {
     });
     expect(screen.getByText('Customize the admin and learner edX experience using your own brand colors. Enter color values in hexadecimal code.')).toBeInTheDocument();
     userEvent.type(screen.getByLabelText('Banner color'), 'bad number');
-    expect(screen.getByText('Must be hexidecimal starting with # (Ex: #1e0b57)')).toBeInTheDocument();
+    expect(screen.getByText('Must be hexadecimal starting with # (Ex: #1e0b57)')).toBeInTheDocument();
     userEvent.type(screen.getByLabelText('Button color'), '#023E8A');
     userEvent.type(screen.getByLabelText('Accent color'), '#0077b6');
     expect(screen.getByText('Add theme')).toBeDisabled();
@@ -199,7 +199,7 @@ describe('Portal Appearance Tab', () => {
     });
   });
   test('editing and deleting custom card', async () => {
-    entepriseBranding = {
+    enterpriseBranding = {
       primary_color: '#03045e',
       secondary_color: '#023E8A',
       tertiary_color: '#0077b6',
@@ -210,7 +210,7 @@ describe('Portal Appearance Tab', () => {
         <Provider store={store}>
           <SettingsAppearanceTab
             enterpriseId={enterpriseId}
-            enterpriseBranding={entepriseBranding}
+            enterpriseBranding={enterpriseBranding}
             updatePortalConfiguration={mockPortalUpdate}
           />
         </Provider>
diff --git a/src/components/subscriptions/SubscriptionCard.jsx b/src/components/subscriptions/SubscriptionCard.jsx
index 99a02117e2..af8345ed6a 100644
--- a/src/components/subscriptions/SubscriptionCard.jsx
+++ b/src/components/subscriptions/SubscriptionCard.jsx
@@ -1,14 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { Link } from 'react-router-dom';
 import {
-  Card,
-  Badge,
-  Button,
-  Stack,
-  Row,
-  Col,
+  Card, Badge, Button, Stack, Row, Col,
 } from '@edx/paragon';
 
 import classNames from 'classnames';
@@ -26,8 +21,8 @@ const SubscriptionCard = ({
     licenses = {},
   } = subscription;
 
-  const formattedStartDate = moment(startDate).format('MMMM D, YYYY');
-  const formattedExpirationDate = moment(expirationDate).format('MMMM D, YYYY');
+  const formattedStartDate = dayjs(startDate).format('MMMM D, YYYY');
+  const formattedExpirationDate = dayjs(expirationDate).format('MMMM D, YYYY');
   const subscriptionStatus = getSubscriptionStatus(subscription);
 
   const renderDaysUntilPlanStartText = (className) => {
@@ -35,8 +30,8 @@ const SubscriptionCard = ({
       return null;
     }
 
-    const now = moment();
-    const planStart = moment(startDate);
+    const now = dayjs();
+    const planStart = dayjs(startDate);
     const daysUntilPlanStart = planStart.diff(now, 'days');
     const hoursUntilPlanStart = planStart.diff(now, 'hours');
 
diff --git a/src/components/subscriptions/SubscriptionDetails.jsx b/src/components/subscriptions/SubscriptionDetails.jsx
index 54763c704d..a41fd63e2d 100644
--- a/src/components/subscriptions/SubscriptionDetails.jsx
+++ b/src/components/subscriptions/SubscriptionDetails.jsx
@@ -2,12 +2,11 @@ import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import moment from 'moment';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
+import dayjs from 'dayjs';
 import {
-  Button, Row, Col, Toast,
+  Button, Row, Col, Toast, Icon,
 } from '@edx/paragon';
+import { ArrowBackIos } from '@edx/paragon/icons';
 
 import { SubscriptionDetailContext } from './SubscriptionDetailContextProvider';
 import InviteLearnersButton from './buttons/InviteLearnersButton';
@@ -38,7 +37,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
         <Row className="ml-0 mb-3">
           <Link to={backToSubscriptionsPath}>
             <Button variant="outline-primary">
-              <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
+              <Icon src={ArrowBackIos} className="mr-2" />
               Back to subscriptions
             </Button>
           </Link>
@@ -74,7 +73,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
                   <small>Purchase Date</small>
                 </div>
                 <div className="lead">
-                  {moment(subscription.priorRenewals[0].priorSubscriptionPlanStartDate).format('MMMM D, YYYY')}
+                  {dayjs(subscription.priorRenewals[0].priorSubscriptionPlanStartDate).format('MMMM D, YYYY')}
                 </div>
               </div>
             )}
@@ -83,7 +82,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
                 <small>Start Date</small>
               </div>
               <div className="lead">
-                {moment(subscription.startDate).format('MMMM D, YYYY')}
+                {dayjs(subscription.startDate).format('MMMM D, YYYY')}
               </div>
             </div>
             <div>
@@ -91,7 +90,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
                 <small>End Date</small>
               </div>
               <div className="lead">
-                {moment(subscription.expirationDate).format('MMMM D, YYYY')}
+                {dayjs(subscription.expirationDate).format('MMMM D, YYYY')}
               </div>
             </div>
           </div>
diff --git a/src/components/subscriptions/SubscriptionPlanRoutes.jsx b/src/components/subscriptions/SubscriptionPlanRoutes.jsx
index 5613a3bb6f..3cc3f85ad6 100644
--- a/src/components/subscriptions/SubscriptionPlanRoutes.jsx
+++ b/src/components/subscriptions/SubscriptionPlanRoutes.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { Route } from 'react-router-dom';
 import { connect } from 'react-redux';
 
@@ -11,7 +11,7 @@ import { MANAGE_LEARNERS_TAB } from './data/constants';
 
 const SubscriptionPlanRoutes = ({ enterpriseSlug }) => {
   const multipleSubsCreateActions = (subscription) => {
-    const now = moment();
+    const now = dayjs();
     const isScheduled = now.isBefore(subscription.startDate);
     const isExpired = now.isAfter(subscription.expirationDate);
     const buttonText = `${isExpired ? 'View' : 'Manage'} learners`;
diff --git a/src/components/subscriptions/data/utils.js b/src/components/subscriptions/data/utils.js
index 88abf1fc6e..2829929b24 100644
--- a/src/components/subscriptions/data/utils.js
+++ b/src/components/subscriptions/data/utils.js
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   SEEN_SUBSCRIPTION_EXPIRATION_MODAL_COOKIE_PREFIX,
   ASSIGNED,
@@ -23,7 +23,7 @@ export const canRemindLicense = (licenseStatus) => licenseStatus === ASSIGNED;
 export const canEnrollLicense = (licenseStatus) => ENROLLABLE_STATUSES.includes(licenseStatus);
 
 export const getSubscriptionStatus = (subscription) => {
-  const now = moment();
+  const now = dayjs();
 
   if (now.isBefore(subscription.startDate)) {
     return SCHEDULED;
@@ -46,7 +46,7 @@ export const sortSubscriptionsByStatus = (subscriptions) => subscriptions.slice(
     const sub2Status = getSubscriptionStatus(sub2);
 
     if (sub1Status === sub2Status) {
-      return moment(sub1.startDate) - moment(sub2.startDate);
+      return dayjs(sub1.startDate) - dayjs(sub2.startDate);
     }
 
     return orderByStatus[sub1Status] - orderByStatus[sub2Status];
diff --git a/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRemindModal.jsx b/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRemindModal.jsx
index 208a849da3..6186701924 100644
--- a/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRemindModal.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRemindModal.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import dayjs from 'dayjs';
 import {
   Alert,
   StatefulButton,
@@ -10,8 +12,6 @@ import {
   Hyperlink,
 } from '@edx/paragon';
 import { logError } from '@edx/frontend-platform/logging';
-import { connect } from 'react-redux';
-import moment from 'moment';
 
 import { useRequestState } from './LicenseManagementModalHook';
 import { validateEmailTemplateForm } from '../../../../data/validation/email';
@@ -63,7 +63,7 @@ const LicenseManagementRemindModal = ({
   const [requestState, setRequestState, initialRequestState] = useRequestState(isOpen);
 
   const [emailTemplate, setEmailTemplate] = useState(generateEmailTemplate(contactEmail));
-  const isExpired = moment().isAfter(subscription.expirationDate);
+  const isExpired = dayjs().isAfter(subscription.expirationDate);
 
   const buttonLabels = generateRemindModalSubmitLabel(totalToRemind);
 
diff --git a/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRevokeModal.jsx b/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRevokeModal.jsx
index 953e56eb66..0feb9ebb23 100644
--- a/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRevokeModal.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementRevokeModal.jsx
@@ -1,5 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+
 import {
   Alert,
   StatefulButton,
@@ -13,7 +15,6 @@ import {
   RemoveCircle,
 } from '@edx/paragon/icons';
 import { logError } from '@edx/frontend-platform/logging';
-import moment from 'moment';
 
 import { useRequestState } from './LicenseManagementModalHook';
 import { configuration } from '../../../../config';
@@ -74,7 +75,7 @@ const LicenseManagementRevokeModal = ({
 
   const title = `Revoke License${revokeAllUsers || totalToRevoke > 1 ? 's' : ''}`;
 
-  const isExpired = moment().isAfter(subscription.expirationDate);
+  const isExpired = dayjs().isAfter(subscription.expirationDate);
 
   const handleSubmit = useCallback(async () => {
     if (onSubmit) {
diff --git a/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRemindModal.test.jsx b/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRemindModal.test.jsx
index 00a80e0987..73fb27b88e 100644
--- a/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRemindModal.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRemindModal.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import dayjs from 'dayjs';
 import {
   screen,
   render,
@@ -7,10 +8,9 @@ import {
   waitFor,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logError } from '@edx/frontend-platform/logging';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import moment from 'moment';
+import { logError } from '@edx/frontend-platform/logging';
 
 import LicenseManagerApiService from '../../../../../data/services/LicenseManagerAPIService';
 import LicenseManagementRemindModal from '../LicenseManagementRemindModal';
@@ -38,7 +38,7 @@ const basicProps = {
   onSubmit: onSubmitMock,
   subscription: {
     uuid: 'lorem',
-    expirationDate: moment().add(1, 'days').format(), // tomorrow
+    expirationDate: dayjs().add(1, 'days').format(), // tomorrow
   },
   usersToRemind: [],
   activeFilters: [],
diff --git a/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRevokeModal.test.jsx b/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRevokeModal.test.jsx
index 09fc0b9da7..d9bb7b769c 100644
--- a/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRevokeModal.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementModals/tests/LicenseManagementRevokeModal.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import dayjs from 'dayjs';
 import {
   screen,
   render,
@@ -8,7 +9,6 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { logError } from '@edx/frontend-platform/logging';
-import moment from 'moment';
 
 import LicenseManagerApiService from '../../../../../data/services/LicenseManagerAPIService';
 import LicenseManagementRevokeModal from '../LicenseManagementRevokeModal';
@@ -30,7 +30,7 @@ const basicProps = {
   onSubmit: onSubmitMock,
   subscription: {
     uuid: 'lorem',
-    expirationDate: moment().add(1, 'days').format(), // tomorrow
+    expirationDate: dayjs().add(1, 'days').format(), // tomorrow
     isRevocationCapEnabled: false,
     revocations: {
       applied: 1,
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RemindBulkAction.test.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RemindBulkAction.test.jsx
index 1468b242a4..e01e23160d 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RemindBulkAction.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RemindBulkAction.test.jsx
@@ -6,7 +6,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import '@testing-library/jest-dom/extend-expect';
 
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -55,7 +55,7 @@ const basicProps = {
     uuid: TEST_SUBSCRIPTION_PLAN_UUID,
     enterpriseCustomerUuid: TEST_ENTERPRISE_CUSTOMER_UUID,
     enterpriseCatalogUuid: TEST_ENTERPRISE_CUSTOMER_CATALOG_UUID,
-    expirationDate: moment().add(1, 'year').toISOString(),
+    expirationDate: dayjs().add(1, 'year').toISOString(),
   },
   onRemindSuccess: mockOnRemindSuccess,
   activatedUsersCount: 0,
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RevokeBulkAction.test.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RevokeBulkAction.test.jsx
index bb333be882..2e2bbcf624 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RevokeBulkAction.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/bulk-actions/RevokeBulkAction.test.jsx
@@ -1,12 +1,9 @@
 import React from 'react';
-import {
-  screen,
-  render,
-} from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import '@testing-library/jest-dom/extend-expect';
 
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -55,7 +52,7 @@ const basicProps = {
     uuid: TEST_SUBSCRIPTION_PLAN_UUID,
     enterpriseCustomerUuid: TEST_ENTERPRISE_CUSTOMER_UUID,
     enterpriseCatalogUuid: TEST_ENTERPRISE_CUSTOMER_CATALOG_UUID,
-    expirationDate: moment().add(1, 'year').toISOString(),
+    expirationDate: dayjs().add(1, 'year').toISOString(),
     isRevocationCapEnabled: false,
   },
   onRevokeSuccess: mockOnRevokeSuccess,
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
index 71e2dd74bc..a3e8376bbe 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
@@ -1,6 +1,8 @@
 import React, {
   useCallback, useMemo, useContext, useState,
 } from 'react';
+import dayjs from 'dayjs';
+import debounce from 'lodash.debounce';
 import {
   DataTable,
   TextFilter,
@@ -9,8 +11,6 @@ import {
   breakpoints,
   Toast,
 } from '@edx/paragon';
-import debounce from 'lodash.debounce';
-import moment from 'moment';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import { SubscriptionContext } from '../../SubscriptionData';
@@ -76,7 +76,7 @@ const LicenseManagementTable = () => {
     setUserStatusFilter,
   } = useContext(SubscriptionDetailContext);
 
-  const isExpired = moment().isAfter(subscription.expirationDate);
+  const isExpired = dayjs().isAfter(subscription.expirationDate);
 
   const sendStatusFilterEvent = useCallback((statusFilter) => {
     sendEnterpriseTrackEvent(
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableActionColumn.test.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableActionColumn.test.jsx
index babf83da16..17ceea5511 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableActionColumn.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableActionColumn.test.jsx
@@ -6,7 +6,7 @@ import {
   cleanup,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -51,7 +51,7 @@ const basicProps = {
   subscription: {
     uuid: TEST_SUBSCRIPTION_PLAN_UUID,
     enterpriseCustomerUuid: TEST_ENTERPRISE_CUSTOMER_UUID,
-    expirationDate: moment().add(1, 'days').format(),
+    expirationDate: dayjs().add(1, 'days').format(),
     isRevocationCapEnabled: false,
     revocations: {
       applied: 0,
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/tests/index.test.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/tests/index.test.jsx
index 23bf65d3b1..6ac5cc5086 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/tests/index.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/tests/index.test.jsx
@@ -7,7 +7,7 @@ import {
   fireEvent,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
@@ -121,9 +121,9 @@ describe('<LicenseManagementTable />', () => {
         mockSubscriptionHooks(
           subscriptionPlan,
           [{
-            activationDate: moment(),
+            activationDate: dayjs(),
             activationKey: 'test-activation-key',
-            lastRemindDate: moment(),
+            lastRemindDate: dayjs(),
             revokedDate: null,
             status: 'activated',
             subscriptionPlan: {},
diff --git a/src/components/subscriptions/tests/SubscriptionCard.test.jsx b/src/components/subscriptions/tests/SubscriptionCard.test.jsx
index 89afa0e46f..3c70a73240 100644
--- a/src/components/subscriptions/tests/SubscriptionCard.test.jsx
+++ b/src/components/subscriptions/tests/SubscriptionCard.test.jsx
@@ -1,10 +1,8 @@
-import {
-  screen,
-} from '@testing-library/react';
+import React from 'react';
+import dayjs from 'dayjs';
+import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import React from 'react';
-import moment from 'moment';
 import {
   breakpoints,
   ResponsiveContext,
@@ -30,11 +28,11 @@ const defaultProps = {
 };
 const responsiveContextValue = { width: breakpoints.extraSmall.maxWidth };
 
-jest.mock('moment', () => (date) => {
+jest.mock('dayjs', () => (date) => {
   if (date) {
-    return jest.requireActual('moment')(date);
+    return jest.requireActual('dayjs')(date);
   }
-  return jest.requireActual('moment')('2020-01-01T00:00:00.000Z');
+  return jest.requireActual('dayjs')('2020-01-01T00:00:00.000Z');
 });
 
 describe('SubscriptionCard', () => {
@@ -45,10 +43,10 @@ describe('SubscriptionCard', () => {
   });
 
   it.each([
-    [moment().add(1, 'days').toISOString(), '1 day'],
-    [moment().add(3, 'days').toISOString(), '3 days'],
-    [moment().add(1, 'hours').toISOString(), '1 hour'],
-    [moment().add(3, 'hours').toISOString(), '3 hours'],
+    [dayjs().add(1, 'days').toISOString(), '1 day'],
+    [dayjs().add(3, 'days').toISOString(), '3 days'],
+    [dayjs().add(1, 'hours').toISOString(), '1 hour'],
+    [dayjs().add(3, 'hours').toISOString(), '3 hours'],
   ])('displays days until plan starts text if there are no actions and the plan is scheduled', (startDate, expectedText) => {
     renderWithRouter(
       <ResponsiveContext.Provider value={responsiveContextValue}>
diff --git a/src/components/subscriptions/tests/SubscriptionManagementPage.test.jsx b/src/components/subscriptions/tests/SubscriptionManagementPage.test.jsx
index 74331eaaa6..b23d9f5d9a 100644
--- a/src/components/subscriptions/tests/SubscriptionManagementPage.test.jsx
+++ b/src/components/subscriptions/tests/SubscriptionManagementPage.test.jsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { Provider } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import {
   TEST_ENTERPRISE_CUSTOMER_SLUG, createMockStore,
@@ -23,8 +23,8 @@ describe('SubscriptionManagementPage', () => {
       {
         uuid: 'active',
         title: 'Enterprise A',
-        startDate: moment().toISOString(),
-        expirationDate: moment().add(3, 'days').toISOString(),
+        startDate: dayjs().toISOString(),
+        expirationDate: dayjs().add(3, 'days').toISOString(),
         licenses: {
           activated: 5,
           assigned: 5,
@@ -37,8 +37,8 @@ describe('SubscriptionManagementPage', () => {
       {
         uuid: 'expired',
         title: 'Enterprise B',
-        startDate: moment().toISOString(),
-        expirationDate: moment().subtract(3, 'days').toISOString(),
+        startDate: dayjs().toISOString(),
+        expirationDate: dayjs().subtract(3, 'days').toISOString(),
         licenses: {
           activated: 6,
           assigned: 5,
diff --git a/src/components/subscriptions/tests/TestUtilities.jsx b/src/components/subscriptions/tests/TestUtilities.jsx
index c1b37cf0c8..774467c4f0 100644
--- a/src/components/subscriptions/tests/TestUtilities.jsx
+++ b/src/components/subscriptions/tests/TestUtilities.jsx
@@ -4,9 +4,9 @@ import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { createMemoryHistory } from 'history';
-import moment from 'moment';
-
+import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
+
 import SubscriptionData from '../SubscriptionData';
 import { ASSIGNED } from '../data/constants';
 import SubscriptionDetailContextProvider from '../SubscriptionDetailContextProvider';
@@ -221,7 +221,7 @@ export const generateSubscriptionPlan = (
   daysUntilExpiration = 2,
   agreementNetDaysUntilExpiration = daysUntilExpiration,
 ) => {
-  const startDate = moment().subtract(1, 'days');
+  const startDate = dayjs().subtract(1, 'days');
   return {
     title: TEST_SUBSCRIPTION_PLAN_TITLE,
     uuid: TEST_SUBSCRIPTION_PLAN_UUID,
@@ -259,9 +259,9 @@ export const generateSubscriptionUser = ({
   userEmail = 'edx@example.com',
   status = 'activated',
 }) => ({
-  activationDate: moment(),
+  activationDate: dayjs(),
   activationKey: 'test-activation-key',
-  lastRemindDate: moment(),
+  lastRemindDate: dayjs(),
   revokedDate: null,
   status,
   userEmail,
diff --git a/src/components/subscriptions/tests/data/utils.test.js b/src/components/subscriptions/tests/data/utils.test.js
index f7a1db5a3b..27a23a9061 100644
--- a/src/components/subscriptions/tests/data/utils.test.js
+++ b/src/components/subscriptions/tests/data/utils.test.js
@@ -1,19 +1,19 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { ACTIVE, SCHEDULED, ENDED } from '../../data/constants';
 import { sortSubscriptionsByStatus, getSubscriptionStatus } from '../../data/utils';
 
 describe('utils', () => {
   const scheduledSub = {
-    startDate: moment().add(1, 'days'),
-    expirationDate: moment().add(10, 'days'),
+    startDate: dayjs().add(1, 'days'),
+    expirationDate: dayjs().add(10, 'days'),
   };
   const activeSub = {
-    startDate: moment().subtract(1, 'days'),
-    expirationDate: moment().add(10, 'days'),
+    startDate: dayjs().subtract(1, 'days'),
+    expirationDate: dayjs().add(10, 'days'),
   };
   const expiredSub = {
-    startDate: moment().subtract(10, 'days'),
-    expirationDate: moment().subtract(1, 'days'),
+    startDate: dayjs().subtract(10, 'days'),
+    expirationDate: dayjs().subtract(1, 'days'),
   };
 
   describe('getSubscriptionStatus', () => {
@@ -34,8 +34,8 @@ describe('utils', () => {
 
     it('should sort subscriptions by start date after status', () => {
       const activeSub2 = {
-        startDate: moment().subtract(2, 'days'),
-        expirationDate: moment().add(10, 'days'),
+        startDate: dayjs().subtract(2, 'days'),
+        expirationDate: dayjs().add(10, 'days'),
       };
       const initialOrder = [expiredSub, activeSub, scheduledSub, activeSub2];
       const expectedOrder = [activeSub2, activeSub, scheduledSub, expiredSub];
diff --git a/src/components/subsidy-request-management-alerts/NoAvailableCodesBanner.jsx b/src/components/subsidy-request-management-alerts/NoAvailableCodesBanner.jsx
index f003229737..001de41d99 100644
--- a/src/components/subsidy-request-management-alerts/NoAvailableCodesBanner.jsx
+++ b/src/components/subsidy-request-management-alerts/NoAvailableCodesBanner.jsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
 import { Alert } from '@edx/paragon';
 
-import PropTypes from 'prop-types';
-import moment from 'moment';
 import ContactCustomerSupportButton from '../ContactCustomerSupportButton';
 
 export const NoAvailableCodesBanner = ({ coupons }) => {
@@ -16,8 +16,8 @@ export const NoAvailableCodesBanner = ({ coupons }) => {
     return null;
   }
 
-  const now = moment();
-  const nonExpiredCoupons = coupons.filter(coupon => moment(coupon.endDate) > now);
+  const now = dayjs();
+  const nonExpiredCoupons = coupons.filter(coupon => dayjs(coupon.endDate) > now);
 
   const renderAlert = (heading, body) => (
     <Alert
diff --git a/src/components/subsidy-request-management-alerts/tests/NoAvailableCodesBanner.test.jsx b/src/components/subsidy-request-management-alerts/tests/NoAvailableCodesBanner.test.jsx
index d71811a07f..cef2a55850 100644
--- a/src/components/subsidy-request-management-alerts/tests/NoAvailableCodesBanner.test.jsx
+++ b/src/components/subsidy-request-management-alerts/tests/NoAvailableCodesBanner.test.jsx
@@ -3,9 +3,9 @@ import {
   render,
   waitFor,
 } from '@testing-library/react';
-import moment from 'moment';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import userEvent from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { NoAvailableCodesBanner } from '../NoAvailableCodesBanner';
 
 const NoAvailableCodesBannerWrapper = (props) => (
@@ -26,7 +26,7 @@ describe('<NoAvailableCodesBanner />', () => {
         coupons={[
           {
             numUnassigned: 1,
-            endDate: moment().subtract(1, 'days').toISOString(),
+            endDate: dayjs().subtract(1, 'days').toISOString(),
           },
         ]}
       />,
@@ -41,11 +41,11 @@ describe('<NoAvailableCodesBanner />', () => {
         coupons={[
           {
             numUnassigned: 0,
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
           },
           {
             numUnassigned: 1,
-            endDate: moment().subtract(1, 'days').toISOString(),
+            endDate: dayjs().subtract(1, 'days').toISOString(),
           },
         ]}
       />
@@ -59,11 +59,11 @@ describe('<NoAvailableCodesBanner />', () => {
         coupons={[
           {
             numUnassigned: 0,
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
           },
           {
             numUnassigned: 1,
-            endDate: moment().add(1, 'days').toISOString(),
+            endDate: dayjs().add(1, 'days').toISOString(),
           },
         ]}
       />,
@@ -71,12 +71,12 @@ describe('<NoAvailableCodesBanner />', () => {
     expect(container.childElementCount).toEqual(0);
   });
 
-  it('should dimiss banner', async () => {
+  it('should dismiss banner', async () => {
     const { getByText, container } = render((
       <NoAvailableCodesBannerWrapper
         coupons={[{
           numUnassigned: 1,
-          endDate: moment().subtract(1, 'days').toISOString(),
+          endDate: dayjs().subtract(1, 'days').toISOString(),
         }]}
       />
     ));
diff --git a/src/components/subsidy-request-modals/data/hooks.js b/src/components/subsidy-request-modals/data/hooks.js
index 490b026eba..5d17548f76 100644
--- a/src/components/subsidy-request-modals/data/hooks.js
+++ b/src/components/subsidy-request-modals/data/hooks.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import { logError } from '@edx/frontend-platform/logging';
-import moment from 'moment';
 import EnterpriseCatalogApiService from '../../../data/services/EnterpriseCatalogApiService';
 
 /**
@@ -91,11 +91,11 @@ export const useApplicableCoupons = ({
 
   useEffect(() => {
     if (applicableCatalogs.length > 0 && coupons.results.length > 0) {
-      const now = moment();
+      const now = dayjs();
       const applicableCoups = coupons.results.filter(
         coupon => applicableCatalogs.includes(
           coupon.enterpriseCatalogUuid,
-        ) && moment(coupon.endDate) > now && coupon.numUnassigned > 0,
+        ) && dayjs(coupon.endDate) > now && coupon.numUnassigned > 0,
       );
 
       setApplicableCoupons(applicableCoups);
diff --git a/src/components/subsidy-request-modals/tests/hooks.test.jsx b/src/components/subsidy-request-modals/tests/hooks.test.jsx
index 369e49df68..84d8691a4e 100644
--- a/src/components/subsidy-request-modals/tests/hooks.test.jsx
+++ b/src/components/subsidy-request-modals/tests/hooks.test.jsx
@@ -1,5 +1,5 @@
+import dayjs from 'dayjs';
 import { renderHook } from '@testing-library/react-hooks/dom';
-import moment from 'moment';
 import { useApplicableCatalogs, useApplicableSubscriptions, useApplicableCoupons } from '../data/hooks';
 import EnterpriseCatalogApiService from '../../../data/services/EnterpriseCatalogApiService';
 
@@ -116,21 +116,21 @@ describe('useApplicableCoupons', () => {
       id: 1,
       numUnassigned: 1,
       enterpriseCatalogUuid: TEST_CATALOG_UUID,
-      endDate: moment().add(1, 'days').toISOString(),
+      endDate: dayjs().add(1, 'days').toISOString(),
       maxUses: 3,
     },
     {
       id: 2,
       numUnassigned: 1,
       enterpriseCatalogUuid: 'abc',
-      endDate: moment().add(1, 'days').toISOString(),
+      endDate: dayjs().add(1, 'days').toISOString(),
       maxUses: 3,
     },
     {
       id: 3,
       numUnassigned: 3,
       enterpriseCatalogUuid: TEST_CATALOG_UUID,
-      endDate: moment().subtract(1, 'days').toISOString(),
+      endDate: dayjs().subtract(1, 'days').toISOString(),
       maxUses: 3,
     }],
   };
diff --git a/src/containers/CouponDetails/CouponDetails.test.jsx b/src/containers/CouponDetails/CouponDetails.test.jsx
index 0499565dbb..0c6038c94a 100644
--- a/src/containers/CouponDetails/CouponDetails.test.jsx
+++ b/src/containers/CouponDetails/CouponDetails.test.jsx
@@ -163,7 +163,7 @@ describe('CouponDetails container', () => {
 
   const selectAllCodesOnPage = ({ isSelected, expectedSelectionLength }) => {
     const selectAllCheckbox = wrapper.find('table th').find('input[type=\'checkbox\']');
-    selectAllCheckbox.simulate('change', { target: { value: isSelected } });
+    selectAllCheckbox.simulate('change', { target: { checked: isSelected } });
     expect(wrapper.find('CouponDetails').instance().state.selectedCodes).toHaveLength(expectedSelectionLength);
   };
 
@@ -594,8 +594,8 @@ describe('CouponDetails container', () => {
     it('handles individual code selection within table', () => {
       const checkboxes = wrapper.find('table').find('input[type=\'checkbox\']').slice(1);
 
-      checkboxes.first().simulate('change', { target: { value: true } });
-      checkboxes.last().simulate('change', { target: { value: true } });
+      checkboxes.first().simulate('change', { target: { checked: true } });
+      checkboxes.last().simulate('change', { target: { checked: true } });
 
       expect(wrapper.find('CouponDetails').instance().state.selectedCodes).toHaveLength(2);
 
diff --git a/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap b/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap
index 33e4cd3f06..49c9024f3b 100644
--- a/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap
+++ b/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap
@@ -31,23 +31,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw "
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -72,23 +75,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-tags fa-w-20 fa-fw "
-                data-icon="tags"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 640 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M22.83 12.99L11.83 2H2v9.83l10.99 10.99 9.84-9.83zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -113,23 +119,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-credit-card fa-w-18 fa-fw "
-                data-icon="credit-card"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V256H0v176zm192-68c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-40zm-128 0c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM576 80v48H0V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M22 4H2.01L2 20h20V4zm-2 14H4v-6h16v6zm0-10H4V6h16v2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -199,23 +208,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw "
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -261,23 +273,26 @@ exports[`<Sidebar /> renders correctly when code management is hidden 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw "
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -347,23 +362,26 @@ exports[`<Sidebar /> renders correctly when code management is hidden 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw "
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -409,23 +427,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw mr-2"
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Learner Progress Report
@@ -448,23 +469,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-tags fa-w-20 fa-fw mr-2"
-                data-icon="tags"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 640 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M22.83 12.99L11.83 2H2v9.83l10.99 10.99 9.84-9.83zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Code Management
@@ -487,23 +511,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-credit-card fa-w-18 fa-fw mr-2"
-                data-icon="credit-card"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V256H0v176zm192-68c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-40zm-128 0c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM576 80v48H0V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M22 4H2.01L2 20h20V4zm-2 14H4v-6h16v6zm0-10H4V6h16v2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Subscription Management
@@ -569,23 +596,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw mr-2"
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Settings
@@ -629,23 +659,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw mr-2"
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Learner Progress Report
@@ -668,23 +701,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-tags fa-w-20 fa-fw mr-2"
-                data-icon="tags"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 640 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M22.83 12.99L11.83 2H2v9.83l10.99 10.99 9.84-9.83zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Code Management
@@ -707,23 +743,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-credit-card fa-w-18 fa-fw mr-2"
-                data-icon="credit-card"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V256H0v176zm192-68c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-40zm-128 0c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM576 80v48H0V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M22 4H2.01L2 20h20V4zm-2 14H4v-6h16v6zm0-10H4V6h16v2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Subscription Management
@@ -789,23 +828,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw mr-2"
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <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="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Settings
diff --git a/src/index.scss b/src/index.scss
index e7f2a1fa57..34c7e99ba0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -7,8 +7,6 @@ $modal-max-width: 650px;
 @import "~@edx/frontend-enterprise-catalog-search";
 @import "~@edx/brand/paragon/overrides";
 
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
 
 @import "./components/EnterpriseApp/EnterpriseApp";
 @import "./components/CodeSearchResults/CodeSearchResults";
@@ -27,7 +25,6 @@ $fa-font-path: "~font-awesome/fonts";
 @import "./components/Admin/Admin";
 @import "./components/settings/settings";
 
-
 body {
   overflow-x: hidden;
 }
diff --git a/src/utils.js b/src/utils.js
index f92dff63b7..9582955d3c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import camelCase from 'lodash/camelCase';
 import snakeCase from 'lodash/snakeCase';
 import isArray from 'lodash/isArray';
@@ -28,7 +28,7 @@ import LmsApiService from './data/services/LmsApiService';
 
 const formatTimestamp = ({ timestamp, format = 'MMMM D, YYYY' }) => {
   if (timestamp) {
-    return moment(timestamp).format(format);
+    return dayjs(timestamp).format(format);
   }
   return null;
 };
@@ -406,6 +406,12 @@ const getCourseProductLineText = (courseProductLine) => {
   return courseProductLineText;
 };
 
+const getCourseProductLineAbbreviation = (courseProductLine) => {
+  let courseProductLineText = '';
+  courseProductLineText = courseProductLine === 'Open Courses Marketplace' ? 'OCM' : 'Executive Education';
+  return courseProductLineText;
+};
+
 export {
   camelCaseDict,
   camelCaseDictArray,
@@ -440,4 +446,5 @@ export {
   pollAsync,
   isNotValidNumberString,
   getCourseProductLineText,
+  getCourseProductLineAbbreviation,
 };