diff --git a/package-lock.json b/package-lock.json
index 605c13a07..add4fa7e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3798,44 +3798,44 @@
       }
     },
     "@edx/paragon": {
-      "version": "16.17.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.17.0.tgz",
-      "integrity": "sha512-Y0gdOtOLupq+9fiXAVhgz7KoyxRCnApxffaYC9g+JcQGzA4bHRQx37betY9iKgGk+Nh9NYL8B4qizsIuj6zoEA==",
+      "version": "19.9.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.9.0.tgz",
+      "integrity": "sha512-yPtSdm1I5as857dYDpeuOIushHx50/S6QjWkVkrbQXNNMt36OKr8YV/vIYOwfedZAzaST3QIz615zzfXcQ7mSA==",
       "requires": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.30",
-        "@fortawesome/free-solid-svg-icons": "^5.14.0",
-        "@fortawesome/react-fontawesome": "^0.1.11",
-        "@popperjs/core": "^2.6.0",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@fortawesome/react-fontawesome": "^0.1.16",
+        "@popperjs/core": "^2.11.2",
         "airbnb-prop-types": "^2.12.0",
         "bootstrap": "4.6.0",
-        "classnames": "^2.2.6",
+        "classnames": "^2.3.1",
         "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
         "lodash.uniqby": "^4.7.0",
         "mailto-link": "^1.0.0",
-        "prop-types": "^15.7.2",
-        "react-bootstrap": "^1.3.0",
-        "react-focus-on": "^3.5.0",
-        "react-popper": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "react-bootstrap": "^1.6.4",
+        "react-focus-on": "^3.5.4",
+        "react-popper": "^2.2.5",
         "react-proptype-conditional-require": "^1.0.4",
         "react-responsive": "^8.2.0",
-        "react-table": "^7.6.1",
-        "react-transition-group": "^4.0.0",
+        "react-table": "^7.7.0",
+        "react-transition-group": "^4.4.2",
         "tabbable": "^4.0.0",
         "uncontrollable": "7.2.1"
       },
       "dependencies": {
         "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.36",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-          "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz",
+          "integrity": "sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w=="
         },
         "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.36",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
-          "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz",
+          "integrity": "sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==",
           "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.36"
+            "@fortawesome/fontawesome-common-types": "^0.3.0"
           }
         },
         "@fortawesome/free-solid-svg-icons": {
@@ -3844,14 +3844,36 @@
           "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
           "requires": {
             "@fortawesome/fontawesome-common-types": "^0.2.36"
+          },
+          "dependencies": {
+            "@fortawesome/fontawesome-common-types": {
+              "version": "0.2.36",
+              "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+              "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+            }
           }
         },
         "@fortawesome/react-fontawesome": {
-          "version": "0.1.16",
-          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
-          "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
+          "version": "0.1.17",
+          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.17.tgz",
+          "integrity": "sha512-dX43Z5IvMaW7fwzU8farosYjKNGfRb2HB/DgjVBHeJZ/NSnuuaujPPx0YOdcAq+n3mqn70tyCde2HM1mqbhiuw==",
           "requires": {
-            "prop-types": "^15.7.2"
+            "prop-types": "^15.8.1"
+          }
+        },
+        "classnames": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+          "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+        },
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
           }
         },
         "react-responsive": {
@@ -3864,6 +3886,17 @@
             "prop-types": "^15.6.1",
             "shallow-equal": "^1.1.0"
           }
+        },
+        "react-transition-group": {
+          "version": "4.4.2",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+          "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
         }
       }
     },
@@ -5057,9 +5090,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
-      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
     },
     "@reduxjs/toolkit": {
       "version": "1.5.0",
@@ -6379,9 +6412,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.34",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
-      "integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
+      "version": "17.0.40",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz",
+      "integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -6389,9 +6422,9 @@
       },
       "dependencies": {
         "csstype": {
-          "version": "3.0.9",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
-          "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
         }
       }
     },
@@ -7185,9 +7218,9 @@
           }
         },
         "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+          "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
         },
         "is-callable": {
           "version": "1.2.4",
@@ -7204,9 +7237,9 @@
           }
         },
         "object-inspect": {
-          "version": "1.11.0",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-          "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
+          "version": "1.12.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+          "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
         },
         "object.assign": {
           "version": "4.1.2",
@@ -11776,9 +11809,9 @@
       "dev": true
     },
     "focus-lock": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.2.tgz",
-      "integrity": "sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.10.2.tgz",
+      "integrity": "sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==",
       "requires": {
         "tslib": "^2.0.3"
       },
@@ -12007,9 +12040,9 @@
           }
         },
         "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+          "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
         },
         "is-callable": {
           "version": "1.2.4",
@@ -12026,9 +12059,9 @@
           }
         },
         "object-inspect": {
-          "version": "1.11.0",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-          "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
+          "version": "1.12.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+          "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
         },
         "object.assign": {
           "version": "4.1.2",
@@ -21063,9 +21096,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.16.0",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
-          "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
+          "version": "7.17.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+          "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -21076,9 +21109,9 @@
           "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
         },
         "csstype": {
-          "version": "3.0.9",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
-          "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
         },
         "dom-helpers": {
           "version": "5.2.1",
@@ -21100,9 +21133,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.16.0",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
-          "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
+          "version": "7.17.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+          "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -21276,12 +21309,12 @@
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
     "react-focus-lock": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.6.0.tgz",
-      "integrity": "sha512-2yB5KWyaefbvFDgqvsg/KpIjbqVlhIY2c/dyDcokDLhB3Ib7I4bjsrta5OkI5euUoIu5xBTyBwIQZPykUJAr1g==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.8.1.tgz",
+      "integrity": "sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.9.2",
+        "focus-lock": "^0.10.2",
         "prop-types": "^15.6.2",
         "react-clientside-effect": "^1.2.5",
         "use-callback-ref": "^1.2.5",
@@ -21347,17 +21380,17 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.16.0",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
-          "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
+          "version": "7.17.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+          "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
         },
         "csstype": {
-          "version": "3.0.9",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
-          "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
         },
         "dom-helpers": {
           "version": "5.2.1",
@@ -21411,9 +21444,9 @@
       "dev": true
     },
     "react-remove-scroll": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
-      "integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.4.tgz",
+      "integrity": "sha512-EyC5ohYhaeKbThMSQxuN2i+QC5HqV3AJvNZKEdiATITexu0gHm00+5ko0ltNS1ajYJVeDgVG2baRSCei0AUWlQ==",
       "requires": {
         "react-remove-scroll-bar": "^2.1.0",
         "react-style-singleton": "^2.1.0",
diff --git a/package.json b/package.json
index 09367f968..a73f73331 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@edx/frontend-component-footer": "10.1.6",
     "@edx/frontend-lib-content-components": "1.2.0",
     "@edx/frontend-platform": "1.14.0",
-    "@edx/paragon": "16.17.0",
+    "@edx/paragon": "19.9.0",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
diff --git a/src/generic/DeletePopup.jsx b/src/generic/DeletePopup.jsx
index 60d1db62b..7e37f40f4 100644
--- a/src/generic/DeletePopup.jsx
+++ b/src/generic/DeletePopup.jsx
@@ -10,18 +10,22 @@ const DeletePopup = ({
   onCancel,
   cancelLabel,
 }) => (
-  <Card className="rounded mb-3 p-1">
+  <Card className="rounded mb-3 px-1">
+    <Card.Header
+      className="text-primary-500"
+      title={label}
+      size="sm"
+    />
     <Card.Body>
-      <div className="text-primary-500 mb-2 h4">{label}</div>
-      <Card.Text className="text-justify text-muted">{bodyText}</Card.Text>
-      <div className="d-flex justify-content-end">
+      <Card.Section className="text-justify text-muted pt-2 pb-3">{bodyText}</Card.Section>
+      <Card.Footer>
         <Button variant="tertiary" onClick={onCancel}>
           {cancelLabel}
         </Button>
         <Button variant="outline-brand" className="ml-2" onClick={onDelete}>
           {deleteLabel}
         </Button>
-      </div>
+      </Card.Footer>
     </Card.Body>
   </Card>
 );
diff --git a/src/generic/Loading.jsx b/src/generic/Loading.jsx
index 9450a0038..c2add6a84 100644
--- a/src/generic/Loading.jsx
+++ b/src/generic/Loading.jsx
@@ -10,15 +10,20 @@ export default function Loading() {
         height: '50vh',
       }}
     >
-      <Spinner className animation="border" role="status" variant="primary">
-        <span className="sr-only">
-          <FormattedMessage
-            id="authoring.loading"
-            defaultMessage="Loading..."
-            description="Screen-reader message for when a page is loading."
-          />
-        </span>
-      </Spinner>
+      <Spinner
+        animation="border"
+        role="status"
+        variant="primary"
+        screenReaderText={(
+          <span className="sr-only">
+            <FormattedMessage
+              id="authoring.loading"
+              defaultMessage="Loading..."
+              description="Screen-reader message for when a page is loading."
+            />
+          </span>
+        )}
+      />
     </div>
   );
 }
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
index 941b1d64d..cabc6e84a 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
@@ -70,15 +70,17 @@ const TopicItem = ({
   };
 
   const deleteTopicPopup = (
-    <Card className="rounded mb-3 p-1">
+    <Card className="rounded mb-3 px-1">
+      <Card.Header
+        className="text-primary-500"
+        title={intl.formatMessage(messages.discussionTopicDeletionLabel)}
+        size="sm"
+      />
       <Card.Body>
-        <div className="text-primary-500 mb-2 h4">
-          {intl.formatMessage(messages.discussionTopicDeletionLabel)}
-        </div>
-        <Card.Text className="text-justify text-muted">
+        <Card.Section className="text-justify text-muted pt-2 pb-3">
           {intl.formatMessage(messages.discussionTopicDeletionHelp)}
-        </Card.Text>
-        <div className="d-flex justify-content-end">
+        </Card.Section>
+        <Card.Footer>
           <Button variant="tertiary" onClick={() => setShowDeletePopup(false)}>
             {intl.formatMessage(messages.cancelButton)}
           </Button>
@@ -89,7 +91,7 @@ const TopicItem = ({
           >
             {intl.formatMessage(messages.deleteButton)}
           </Button>
-        </div>
+        </Card.Footer>
       </Card.Body>
     </Card>
   );
diff --git a/src/pages-and-resources/discussions/app-list/AppCard.jsx b/src/pages-and-resources/discussions/app-list/AppCard.jsx
index 33ff59cc9..8134767f5 100644
--- a/src/pages-and-resources/discussions/app-list/AppCard.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppCard.jsx
@@ -21,46 +21,44 @@ function AppCard({
 
   return (
     <Card
-      tabIndex="-1"
+      isClickable
       onClick={() => canChangeProviders && onClick(app.id)}
       onKeyPress={() => canChangeProviders && onClick(app.id)}
       role="radio"
       aria-checked={selected}
-      style={{
-        cursor: 'pointer',
-      }}
       className={classNames({
         'border-primary': selected,
       }, 'w-100')}
     >
-      <div
-        className="position-absolute mt-3 mr-3"
-        style={{
-          top: '0.75rem',
-          right: '0.75rem',
-        }}
-      >
-        <CheckboxControl
-          checked={selected}
-          disabled={!canChangeProviders}
-          readOnly
-          aria-label={intl.formatMessage(messages.selectApp, {
-            appName: intl.formatMessage(appMessages[`appName-${app.id}`]),
-          })}
-        />
-      </div>
+      <Card.Header
+        title={<div data-testid="card-title">{intl.formatMessage(appMessages[`appName-${app.id}`])}</div>}
+        subtitle={<div className="h6 text-muted" data-testid="card-subtitle">{supportText}</div>}
+        actions={(
+          <div className="mt-2.5">
+            <CheckboxControl
+              checked={selected}
+              disabled={!canChangeProviders}
+              readOnly
+              aria-label={intl.formatMessage(messages.selectApp, {
+                appName: intl.formatMessage(appMessages[`appName-${app.id}`]),
+              })}
+            />
+          </div>
+        )}
+        size="sm"
+      />
       <Card.Body>
-        <div className="h4 card-title">
-          {intl.formatMessage(appMessages[`appName-${app.id}`])}
+        <div data-testid="card-text">
+          <Card.Section className="pt-2">
+            {intl.formatMessage(messages[`appDescription-${app.id}`])}
+            <Responsive maxWidth={breakpoints.extraSmall.maxWidth}>
+              <FeaturesList
+                features={features}
+                app={app}
+              />
+            </Responsive>
+          </Card.Section>
         </div>
-        <Card.Subtitle className="mb-3 text-muted">{supportText}</Card.Subtitle>
-        <Card.Text>{intl.formatMessage(messages[`appDescription-${app.id}`])}</Card.Text>
-        <Responsive maxWidth={breakpoints.extraSmall.maxWidth}>
-          <FeaturesList
-            features={features}
-            app={app}
-          />
-        </Responsive>
       </Card.Body>
     </Card>
   );
diff --git a/src/pages-and-resources/discussions/app-list/AppCard.test.jsx b/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
index 5280f8420..7eca374da 100644
--- a/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
@@ -4,7 +4,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
-import { render, queryByLabelText } from '@testing-library/react';
+import { render, queryByLabelText, queryByTestId } from '@testing-library/react';
 
 import AppCard from './AppCard';
 import messages from './messages';
@@ -85,8 +85,8 @@ describe('AppCard', () => {
     await mockStore(legacyApiResponse);
     createComponent(appWithCustomSupport);
 
-    expect(container.querySelector('.card-title')).toHaveTextContent(title);
-    expect(container.querySelector('.card-text')).toHaveTextContent(text);
+    expect(queryByTestId(container, 'card-title')).toHaveTextContent(title);
+    expect(queryByTestId(container, 'card-text')).toHaveTextContent(text);
   });
 
   test('full support subtitle shown when hasFullSupport is true', async () => {
@@ -95,7 +95,7 @@ describe('AppCard', () => {
     await mockStore(legacyApiResponse);
     createComponent(app);
 
-    expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
+    expect(queryByTestId(container, 'card-subtitle')).toHaveTextContent(subtitle);
   });
 
   test('partial support subtitle shown when hasFullSupport is false', async () => {
@@ -105,6 +105,6 @@ describe('AppCard', () => {
     await mockStore(legacyApiResponse);
     createComponent(appWithBasicSupport);
 
-    expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
+    expect(queryByTestId(container, 'card-subtitle')).toHaveTextContent(subtitle);
   });
 });
diff --git a/src/pages-and-resources/discussions/app-list/AppList.jsx b/src/pages-and-resources/discussions/app-list/AppList.jsx
index 39e20914e..2244b878e 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppList.jsx
@@ -55,7 +55,7 @@ function AppList({ intl }) {
   }
 
   return (
-    <div className="m-1  my-sm-5" data-testid="appList">
+    <div className="my-sm-5 m-1" data-testid="appList">
       <h3 className="my-sm-5 my-4">
         {intl.formatMessage(messages.heading)}
       </h3>
@@ -64,6 +64,7 @@ function AppList({ intl }) {
           xs: 12,
           sm: 6,
           lg: 4,
+          xl: 4,
         }}
       >
         {apps.map(app => (
diff --git a/src/pages-and-resources/pages/PageCard.jsx b/src/pages-and-resources/pages/PageCard.jsx
index b90e88aad..b7762ddf6 100644
--- a/src/pages-and-resources/pages/PageCard.jsx
+++ b/src/pages-and-resources/pages/PageCard.jsx
@@ -37,7 +37,6 @@ function PageCard({
       return (
         <Hyperlink destination={page.legacyLink}>
           <IconButton
-            className="mb-0 mr-1"
             src={ArrowForward}
             iconAs={Icon}
             size="inline"
@@ -48,7 +47,6 @@ function PageCard({
     }
     return (page.allowedOperations.configure || page.allowedOperations.enable) && (
       <IconButton
-        className="mb-0 mr-1"
         src={Settings}
         iconAs={Icon}
         size="inline"
@@ -60,32 +58,25 @@ function PageCard({
 
   return (
     <Card
-      className={classNames(
-        'shadow card',
-        {
-          'desktop-card': isDesktop,
-          'mobile-card': !isDesktop,
-        },
-      )}
+      className={classNames('shadow justify-content-between', {
+        'desktop-card': isDesktop,
+        'mobile-card': !isDesktop,
+      })}
     >
-      <Card.Body className="d-flex flex-column justify-content-between">
-        <div>
-          <Card.Title className="d-flex mb-1 align-items-center justify-content-between">
-            <h4 className="m-0 p-0">{page.name}</h4>
-            <SettingsButton />
-          </Card.Title>
-          {
-            page.enabled && (
-              <Badge variant="success">
-                {intl.formatMessage(messages.enabled)}
-              </Badge>
-            )
-          }
-        </div>
-        <Card.Text className="m-0">
+      <Card.Header
+        title={page.name}
+        subtitle={page.enabled && (
+          <Badge variant="success" className="mt-1">
+            {intl.formatMessage(messages.enabled)}
+          </Badge>
+        )}
+        actions={<div className="mt-1"><SettingsButton /></div>}
+        size="sm"
+      />
+      <Card.Body>
+        <Card.Section>
           {page.description}
-        </Card.Text>
-
+        </Card.Section>
       </Card.Body>
     </Card>
   );
diff --git a/src/pages-and-resources/pages/PageCard.scss b/src/pages-and-resources/pages/PageCard.scss
index 457fbc7c7..1c46d665c 100644
--- a/src/pages-and-resources/pages/PageCard.scss
+++ b/src/pages-and-resources/pages/PageCard.scss
@@ -7,3 +7,8 @@
   width: 100%;
   height: 14rem;
 }
+
+.shadow {
+  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
+}
diff --git a/src/pages-and-resources/pages/PageGrid.jsx b/src/pages-and-resources/pages/PageGrid.jsx
index 99531b3ba..3ca829839 100644
--- a/src/pages-and-resources/pages/PageGrid.jsx
+++ b/src/pages-and-resources/pages/PageGrid.jsx
@@ -14,9 +14,7 @@ function PageGrid({ pages }) {
     }}
     >
       {pages.map((page) => (
-        <div key={page.id} className="justify-content-center w-100 d-flex">
-          <PageCard page={page} />
-        </div>
+        <PageCard page={page} key={page.id} />
       ))}
     </CardGrid>
   );