diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a9b90ba824..7935b8dc65 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1216,9 +1216,9 @@
       }
     },
     "@patternfly/patternfly": {
-      "version": "4.219.2",
-      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.219.2.tgz",
-      "integrity": "sha512-SZ+9ig6DVygwM6fpldYhRjoyr9KMJTit/ZMyWCUE7DfpTqEr69wQnOaGxfvNlH1UV6G7Z+ALZXeck3Dy1nb9Vw=="
+      "version": "4.221.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.221.2.tgz",
+      "integrity": "sha512-4R35CKnZJY6/sN6vzYaAwkEaYWIo2IZv4y2s39ZNh4QkK1pBTWmH6URUYOxNhc5qrU9MjFNdMCNepBciM3SugQ=="
     },
     "@patternfly/quickstarts": {
       "version": "2.3.1",
@@ -1258,23 +1258,23 @@
       }
     },
     "@patternfly/react-catalog-view-extension": {
-      "version": "4.92.55",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.92.55.tgz",
-      "integrity": "sha512-MWxOo7rFrY5DbOglBGhK5VEbhVAl37k2rW1elm0WdU6Jveb3DPAqbgLEGemtgdQTIEfCQPZ5daSK5AqDMyitew==",
+      "version": "4.93.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.93.0.tgz",
+      "integrity": "sha512-pV7jC06RB+nSqp6VGzdPr0SvCAJcTo97HgQCnXTLnh+gzUMLupmZOQ3g2XoAAAqCivdVfRqZ+Gm4yXqis/rmFA==",
       "requires": {
-        "@patternfly/patternfly": "4.219.2",
-        "@patternfly/react-core": "^4.258.3",
-        "@patternfly/react-styles": "^4.91.10"
+        "@patternfly/patternfly": "4.221.2",
+        "@patternfly/react-core": "^4.264.0",
+        "@patternfly/react-styles": "^4.92.0"
       }
     },
     "@patternfly/react-core": {
-      "version": "4.258.3",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.258.3.tgz",
-      "integrity": "sha512-2l+GWxuIwJinhYoNv4mQdVQOmbDXRdyPIMjBFm/HTKLXxhGLSoIYlgVGy/On/ViaBSZGh5e/I5H74aC8naMGPA==",
+      "version": "4.264.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.264.0.tgz",
+      "integrity": "sha512-tK0BMWxw8nhukev40HZ6q6d02pDnjX7oyA91vHa18aakJUKBWMaerqpG4NZVMoh0tPKX3aLNj+zyCwDALFAZZw==",
       "requires": {
-        "@patternfly/react-icons": "^4.92.10",
-        "@patternfly/react-styles": "^4.91.10",
-        "@patternfly/react-tokens": "^4.93.10",
+        "@patternfly/react-icons": "^4.93.0",
+        "@patternfly/react-styles": "^4.92.0",
+        "@patternfly/react-tokens": "^4.94.0",
         "focus-trap": "6.9.2",
         "react-dropzone": "9.0.0",
         "tippy.js": "5.1.2",
@@ -1282,41 +1282,41 @@
       }
     },
     "@patternfly/react-icons": {
-      "version": "4.92.10",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.92.10.tgz",
-      "integrity": "sha512-vwCy7b+OyyuvLDSLqLUG2DkJZgMDogjld8tJTdAaG8HiEhC1sJPZac+5wD7AuS3ym/sQolS4vYtNiVDnMEORxA=="
+      "version": "4.93.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.0.tgz",
+      "integrity": "sha512-OH0vORVioL+HLWMEog8/3u8jsiMCeJ0pFpvRKRhy5Uk4CdAe40k1SOBvXJP6opr+O8TLbz0q3bm8Jsh/bPaCuQ=="
     },
     "@patternfly/react-styles": {
-      "version": "4.91.10",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.91.10.tgz",
-      "integrity": "sha512-fAG4Vjp63ohiR92F4e/Gkw5q1DSSckHKqdnEF75KUpSSBORzYP0EKMpupSd6ItpQFJw3iWs3MJi3/KIAAfU1Jw=="
+      "version": "4.92.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.0.tgz",
+      "integrity": "sha512-B/f6iyu8UEN1+wRxdC4sLIhvJeyL8SqInDXZmwOIqK8uPJ8Lze7qrbVhkkVzbMF37/oDPVa6dZH8qZFq062LEA=="
     },
     "@patternfly/react-table": {
-      "version": "4.111.33",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.111.33.tgz",
-      "integrity": "sha512-h5feSvjaoPwirRkLQePYm4NWXoYRfH0F9/WCdgStp1JAiCRVUqH8jDEZORv3xuFfMeFh4Vuq+WPEJu0B4VM5BQ==",
-      "requires": {
-        "@patternfly/react-core": "^4.258.3",
-        "@patternfly/react-icons": "^4.92.10",
-        "@patternfly/react-styles": "^4.91.10",
-        "@patternfly/react-tokens": "^4.93.10",
+      "version": "4.111.45",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.111.45.tgz",
+      "integrity": "sha512-HiMwonrJS8CDbltHRt87oM2+M6YUbGiuiKkFgc8pkglKSfkZ25juUZq5QMFCPynIK7cqbtM8zaqCOVf1T2aUPg==",
+      "requires": {
+        "@patternfly/react-core": "^4.264.0",
+        "@patternfly/react-icons": "^4.93.0",
+        "@patternfly/react-styles": "^4.92.0",
+        "@patternfly/react-tokens": "^4.94.0",
         "lodash": "^4.17.19",
         "tslib": "^2.0.0"
       }
     },
     "@patternfly/react-tokens": {
-      "version": "4.93.10",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.93.10.tgz",
-      "integrity": "sha512-F+j1irDc9M6zvY6qNtDryhbpnHz3R8ymHRdGelNHQzPTIK88YSWEnT1c9iUI+uM/iuZol7sJmO5STtg2aPIDRQ=="
+      "version": "4.94.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.0.tgz",
+      "integrity": "sha512-fYXxUJZnzpn89K2zzHF0cSncZZVGKrohdb5f5T1wzxwU2NZPVGpvr88xhm+V2Y/fSrrTPwXcP3IIdtNOOtJdZw=="
     },
     "@patternfly/react-virtualized-extension": {
-      "version": "4.88.55",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-virtualized-extension/-/react-virtualized-extension-4.88.55.tgz",
-      "integrity": "sha512-cYwxFZKQksmi78ArQ1Dtsf5nGPff5oIC/uFkT9qFk7Bi2TEUMDArq8eeXs5nL+5jJZo3xl+L2MMGQJ7tyd/4Ug==",
+      "version": "4.88.67",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-virtualized-extension/-/react-virtualized-extension-4.88.67.tgz",
+      "integrity": "sha512-yxdel4SiPGherk7As/gicV+YxwnVCTgFrlZ7kZb1HMHfS0AaeYX9zaAiZPZipRUUbKK3u/zSZdhtKyhBsnL2Eg==",
       "requires": {
-        "@patternfly/react-core": "^4.258.3",
-        "@patternfly/react-icons": "^4.92.10",
-        "@patternfly/react-styles": "^4.91.10",
+        "@patternfly/react-core": "^4.264.0",
+        "@patternfly/react-icons": "^4.93.0",
+        "@patternfly/react-styles": "^4.92.0",
         "linear-layout-vector": "0.0.1",
         "react-virtualized": "^9.21.1",
         "tslib": "^2.0.0"
@@ -2074,13 +2074,13 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
           "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
           "dev": true
         },
         "supports-color": {
@@ -2218,7 +2218,7 @@
     "alphanum-sort": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
     "amdefine": {
@@ -2909,7 +2909,7 @@
     "camelcase": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-      "integrity": "sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw=="
+      "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
     },
     "camelcase-keys": {
       "version": "2.1.0",
@@ -3179,7 +3179,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
           "dev": true
         }
       }
@@ -3493,7 +3493,7 @@
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
+      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
       "requires": {
         "lru-cache": "^4.0.1",
         "shebang-command": "^1.2.0",
@@ -3503,7 +3503,7 @@
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
     "css-declaration-sorter": {
@@ -3738,13 +3738,13 @@
     "cssnano-util-get-arguments": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
-      "integrity": "sha512-6RIcwmV3/cBMG8Aj5gucQRsJb4vv4I4rn6YjPbVWd5+Pn/fuG+YseGvXGk00XLkoZkaj31QOD7vMUpNPC4FIuw==",
+      "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=",
       "dev": true
     },
     "cssnano-util-get-match": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
-      "integrity": "sha512-JPMZ1TSMRUPVIqEalIBNoBtAYbi8okvcFns4O0YIhcdGebeYZK7dMyHJiQ6GqNBA9kE0Hym4Aqym5rPdsV/4Cw==",
+      "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=",
       "dev": true
     },
     "cssnano-util-raw-cache": {
@@ -4966,7 +4966,7 @@
     "execa": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-      "integrity": "sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==",
+      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
       "requires": {
         "cross-spawn": "^5.0.1",
         "get-stream": "^3.0.0",
@@ -5695,7 +5695,7 @@
     "get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ=="
+      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
     },
     "get-symbol-description": {
       "version": "1.0.0",
@@ -5810,7 +5810,7 @@
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==",
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true,
       "optional": true
     },
@@ -6013,13 +6013,13 @@
     "hsl-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==",
+      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
       "dev": true
     },
     "hsla-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==",
+      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
       "dev": true
     },
     "html-encoding-sniffer": {
@@ -6554,7 +6554,7 @@
     "invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha512-xgs2NH9AE66ucSq4cNG1nhSFghr5l6tdL15Pk+jl46bmmBapgoaY/AacXyaDznAqmGL99TiLSQgO/XazFSKYeQ=="
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
     },
     "ip": {
       "version": "1.1.5",
@@ -6658,7 +6658,7 @@
     "is-color-stop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==",
+      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
       "dev": true,
       "requires": {
         "css-color-names": "^0.0.4",
@@ -8863,7 +8863,7 @@
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha512-YiGkH6EnGrDGqLMITnGjXtGmNtjoXw9SVUzcaos8RBi7Ps0VBylkq+vOcY9QE5poLasPCR849ucFUkl0UzUyOw==",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
       "requires": {
         "invert-kv": "^1.0.0"
       }
@@ -8952,7 +8952,7 @@
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
     "lodash.merge": {
@@ -8970,7 +8970,7 @@
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
     "log-symbols": {
@@ -9014,13 +9014,13 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
           "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
           "dev": true
         },
         "supports-color": {
@@ -9088,7 +9088,7 @@
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
       "dev": true
     },
     "make-error": {
@@ -9141,7 +9141,7 @@
     "mem": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
-      "integrity": "sha512-nOBDrc/wgpkd3X/JOhMqYR+/eLqlfLP4oQfoBA6QExIxEl+GU01oyEkwWyueyO8110pUKijtiHGhEmYoOn88oQ==",
+      "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
       "requires": {
         "mimic-fn": "^1.0.0"
       }
@@ -11674,7 +11674,7 @@
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug=="
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
     },
     "requires-port": {
       "version": "1.0.0",
@@ -11742,13 +11742,13 @@
     "rgb-regex": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==",
+      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
       "dev": true
     },
     "rgba-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==",
+      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
     "rimraf": {
@@ -12646,7 +12646,7 @@
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
       "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
@@ -13647,7 +13647,7 @@
     "timsort": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
+      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
     "tippy.js": {
@@ -14009,7 +14009,7 @@
     "uniqs": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-      "integrity": "sha512-mZdDpf3vBV5Efh29kMw5tXoup/buMgxLzOt/XKFKcVmi+15ManNQWr6HfZ2aiZTYlYixbdNJ0KFmIZIv52tHSQ==",
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
       "dev": true
     },
     "unique-filename": {
@@ -15452,7 +15452,7 @@
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "requires": {
         "string-width": "^1.0.1",
         "strip-ansi": "^3.0.1"
@@ -15461,12 +15461,12 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -15474,7 +15474,7 @@
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -15484,7 +15484,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
           }
diff --git a/frontend/package.json b/frontend/package.json
index 818bc4427d..9e5007dfd8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,14 +38,14 @@
   "dependencies": {
     "@openshift/dynamic-plugin-sdk": "^1.0.0-alpha12",
     "@openshift/dynamic-plugin-sdk-utils": "^1.0.0-alpha17",
-    "@patternfly/patternfly": "4.219.2",
+    "@patternfly/patternfly": "4.221.2",
     "@patternfly/quickstarts": "^2.3.1",
-    "@patternfly/react-catalog-view-extension": "4.92.55",
-    "@patternfly/react-core": "4.258.3",
-    "@patternfly/react-icons": "4.92.10",
-    "@patternfly/react-styles": "4.91.10",
-    "@patternfly/react-table": "4.111.33",
-    "@patternfly/react-virtualized-extension": "4.88.55",
+    "@patternfly/react-catalog-view-extension": "4.93.0",
+    "@patternfly/react-core": "4.264.0",
+    "@patternfly/react-icons": "4.93.0",
+    "@patternfly/react-styles": "4.92.0",
+    "@patternfly/react-table": "4.111.45",
+    "@patternfly/react-virtualized-extension": "4.88.67",
     "@types/classnames": "^2.3.1",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
index e2d73d4d92..560cba789a 100644
--- a/frontend/src/app/App.scss
+++ b/frontend/src/app/App.scss
@@ -3,129 +3,15 @@ html, body, #root {
 }
 
 .odh-dashboard {
-  &__error-body {
-    text-align: left;
-    white-space: pre;
-  }
-
-  &__display-error {
-    white-space: pre-wrap;
-  }
-
-  &__external-link {
-    > svg {
-      margin-left: var(--pf-global--spacer--xs);
-    }
-  }
-
-  &__notification-drawer {
-    .pf-c-notification-drawer__list-item-header-title {
-      font-size: 1em;
-    }
-    &__item-remove {
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-    .pf-c-notification-drawer__list-item-description.m-is-hidden {
-      display: none;
-    }
-  }
-
-  &__notifications {
-    position: fixed;
-    right: var(--pf-global--spacer--sm);
-    z-index: 2000;
-    .pf-c-alert {
-      margin-top: var(--pf-global--spacer--sm);
-      .pf-c-alert__action .pf-c-button {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-    &__message {
-      .pf-c-notification-drawer__list & {
-        margin-left: var(--pf-global--spacer--lg);
-      }
-    }
-    &__list {
-      list-style: disc;
-      margin-left: 20px;
-      margin-bottom: var(--pf-global--spacer--sm);
-    }
-  }
-  &__favorite {
-    cursor: pointer;
-    position: relative;
-    &__outer {
-      fill: var(--pf-global--disabled-color--100);
-      .m-is-favorite & {
-        fill: var(--pf-global--palette--gold-200);
-      }
-    }
-    &__inner {
-      fill: var(--pf-global--BackgroundColor--100);
-      position: absolute;
-      top: 5px;
-      left: 2px;
-      width: calc(1em - 4px);
-      height: calc(1em - 4px);
-      .m-is-favorite & {
-        fill: var(--pf-global--palette--gold-200);
-      }
-    }
-  }
-  .pf-c-page__main {
-    height: 100%;
-  }
-  .pf-c-drawer__content {
-    overflow-y: auto;
-  }
-  .pf-c-page__main-section {
-    .pf-l-gallery {
-      --pf-l-gallery--GridTemplateColumns--max-on-xl: 330px;
-      --pf-l-gallery--GridTemplateColumns--max-on-lg: 330px;
-      --pf-l-gallery--GridTemplateColumns--max-on-md: 330px;
-      --pf-l-gallery--GridTemplateColumns--max-on-sm: 330px;
-      --pf-l-gallery--GridTemplateColumns--max: 330px;
-    }
-  }
-  // PF Overrides
-  .pf-c-page__header {
-    .pf-c-brand {
-      height: 36px;
-    }
-    .pf-c-dropdown__toggle {
-      .pf-c-dropdown__toggle-icon {
-        margin-left: var(--pf-global--spacer--xs);
-      }
-      &:before {
-        visibility: hidden;
-      }
-    }
-  }
-  .pf-c-drawer.pf-m-inline {
+  &__page-content {
+    border: 1px solid var(--pf-global--BorderColor--100);
+    display: flex;
     flex: 1;
+    margin: var(--pf-global--spacer--md);
   }
-  // Bootstrap Overrides (Bootstrap pulled in by @cloudmosaic/quickstarts)
-  code {
-    color: initial;
-    background-color: initial;
-  }
-
-  // PF Overrides
-  &.pf-c-page {
-    // TODO: Using the PF var doesn't work for some reason.
-    // @media (min-width: var(--pf-global--breakpoint--md)) {
-    @media (min-width: 768px) {
-      grid-template-columns: max-content 1fr;
-      grid-template-areas: "header header" "nav main";
-    }
-  }
-
   .pf-c-app-launcher__group-title {
     font-size: 13px;
   }
-
   .pf-c-app-launcher__menu-item-external-icon {
     opacity: 1;
     color: var(--pf-global--icon--Color--light);
@@ -138,10 +24,12 @@ html, body, #root {
   .pf-c-dropdown,
   .pf-c-dropdown__menu-item,
   .pf-c-dropdown__toggle,
+  .pf-c-select,
+  .pf-c-select__menu-item,
+  .pf-c-select__toggle,
+  .pf-c-text-input-group,
   .pf-c-form-control {
-    font-size: 14px;
+    font-size: var(--pf-global--FontSize--sm);
     height: auto;
   }
 }
-
-
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index 543cc9a6fe..06d30b265c 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -12,7 +12,6 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { detectUser } from '../redux/actions/actions';
-import { useDesktopWidth } from '../utilities/useDesktopWidth';
 import Header from './Header';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
@@ -29,8 +28,6 @@ import { useAppDispatch } from '../redux/hooks';
 import './App.scss';
 
 const App: React.FC = () => {
-  const isDeskTop = useDesktopWidth();
-  const [isNavOpen, setIsNavOpen] = React.useState(isDeskTop);
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
   const { username, userError, isAllowed } = useUser();
   const dispatch = useAppDispatch();
@@ -46,14 +43,6 @@ const App: React.FC = () => {
     dispatch(detectUser());
   }, [dispatch]);
 
-  React.useEffect(() => {
-    setIsNavOpen(isDeskTop);
-  }, [isDeskTop]);
-
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
-  };
-
   if (!username || !configLoaded || !dashboardConfig) {
     // We lack the critical data to startup the app
     if (userError || fetchConfigError) {
@@ -96,15 +85,13 @@ const App: React.FC = () => {
   return (
     <AppContext.Provider
       value={{
-        isNavOpen,
-        setIsNavOpen,
-        onNavToggle,
         buildStatuses,
         dashboardConfig,
       }}
     >
       <Page
         className="odh-dashboard"
+        isManagedSidebar
         header={<Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />}
         sidebar={isAllowed ? <NavSidebar /> : undefined}
         notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}
diff --git a/frontend/src/app/AppContext.ts b/frontend/src/app/AppContext.ts
index 3e9c204a85..99dedc7f38 100644
--- a/frontend/src/app/AppContext.ts
+++ b/frontend/src/app/AppContext.ts
@@ -2,17 +2,11 @@ import * as React from 'react';
 import { BuildStatus, DashboardConfig } from '../types';
 
 type AppContextProps = {
-  isNavOpen: boolean;
-  setIsNavOpen: (isNavOpen: boolean) => void;
-  onNavToggle: () => void;
   buildStatuses: BuildStatus[];
   dashboardConfig: DashboardConfig;
 };
 
 const defaultAppContext: AppContextProps = {
-  isNavOpen: true,
-  setIsNavOpen: () => undefined,
-  onNavToggle: () => undefined,
   buildStatuses: [],
   // At runtime dashboardConfig is never null -- DO NOT DO THIS usually
   dashboardConfig: null as unknown as DashboardConfig,
diff --git a/frontend/src/app/AppNotificationDrawer.tsx b/frontend/src/app/AppNotificationDrawer.tsx
index aef517bb2e..9b69435b3f 100644
--- a/frontend/src/app/AppNotificationDrawer.tsx
+++ b/frontend/src/app/AppNotificationDrawer.tsx
@@ -49,12 +49,9 @@ const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }
     dispatch(removeNotification(notification));
   };
 
-  // FIXME: Remove blank item from NotificationDrawerHeader when https://github.com/patternfly/patternfly-react/issues/5924 is resolved
   return (
-    <NotificationDrawer className="odh-dashboard__notification-drawer">
-      <NotificationDrawerHeader count={newNotifications} onClose={onClose}>
-        {` `}
-      </NotificationDrawerHeader>
+    <NotificationDrawer>
+      <NotificationDrawerHeader count={newNotifications} onClose={onClose} />
       <NotificationDrawerBody>
         {notifications.length ? (
           <NotificationDrawerList>
@@ -69,20 +66,16 @@ const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }
                   variant={notification.status}
                   title={notification.title}
                 >
-                  <div>
-                    <Button
-                      className="odh-dashboard__notification-drawer__item-remove"
-                      variant={ButtonVariant.plain}
-                      aria-label="remove notification"
-                      onClick={() => onRemoveNotification(notification)}
-                    >
-                      <TimesIcon aria-hidden="true" />
-                    </Button>
-                  </div>
+                  <Button
+                    variant={ButtonVariant.plain}
+                    aria-label="remove notification"
+                    onClick={() => onRemoveNotification(notification)}
+                  >
+                    <TimesIcon aria-hidden="true" />
+                  </Button>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody
                   timestamp={calculateRelativeTime(notification.timestamp, currentTime)}
-                  className={notification.message ? '' : 'm-is-hidden'}
                 >
                   {notification.message}
                 </NotificationDrawerListItemBody>
diff --git a/frontend/src/app/Header.tsx b/frontend/src/app/Header.tsx
index c3c5f6a50b..29d6806562 100644
--- a/frontend/src/app/Header.tsx
+++ b/frontend/src/app/Header.tsx
@@ -1,39 +1,45 @@
 import React from 'react';
-import { Brand, PageHeader } from '@patternfly/react-core';
+import {
+  Brand,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  PageToggleButton,
+} from '@patternfly/react-core';
 import HeaderTools from './HeaderTools';
 import { ODH_LOGO, ODH_PRODUCT_NAME } from '../utilities/const';
-import { useAppContext } from './AppContext';
 import { useUser } from '../redux/selectors';
-import { useNavigate } from 'react-router-dom';
+import { BarsIcon } from '@patternfly/react-icons';
+import { Link } from 'react-router-dom';
 
 type HeaderProps = {
   onNotificationsClick: () => void;
 };
 
 const Header: React.FC<HeaderProps> = ({ onNotificationsClick }) => {
-  const { isNavOpen, onNavToggle } = useAppContext();
   const { isAllowed } = useUser();
-  const navigate = useNavigate();
   return (
-    <PageHeader
-      logo={
-        <Brand
-          src={`${window.location.origin}/images/${ODH_LOGO}`}
-          alt={`${ODH_PRODUCT_NAME} Logo`}
-        />
-      }
-      logoProps={{
-        onClick: (e: MouseEvent) => {
-          e.preventDefault();
-          navigate('/');
-        },
-        href: '/',
-      }}
-      headerTools={<HeaderTools onNotificationsClick={onNotificationsClick} />}
-      showNavToggle={isAllowed}
-      isNavOpen={isNavOpen}
-      onNavToggle={onNavToggle}
-    />
+    <Masthead>
+      {isAllowed && (
+        <MastheadToggle>
+          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+      )}
+      <MastheadMain>
+        <MastheadBrand component={(props) => <Link {...props} to="/" />}>
+          <Brand heights={{ default: '36px' }} alt={`${ODH_PRODUCT_NAME} Logo`}>
+            <source srcSet={`${window.location.origin}/images/${ODH_LOGO}`} />
+          </Brand>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <HeaderTools onNotificationsClick={onNotificationsClick} />
+      </MastheadContent>
+    </Masthead>
   );
 };
 
diff --git a/frontend/src/app/HeaderTools.tsx b/frontend/src/app/HeaderTools.tsx
index 03df36c461..b25d8f325d 100644
--- a/frontend/src/app/HeaderTools.tsx
+++ b/frontend/src/app/HeaderTools.tsx
@@ -4,12 +4,13 @@ import {
   DropdownPosition,
   DropdownToggle,
   NotificationBadge,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem,
   DropdownItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
 } from '@patternfly/react-core';
-import { CaretDownIcon, ExternalLinkAltIcon, QuestionCircleIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import { COMMUNITY_LINK, DOC_LINK, SUPPORT_LINK } from '../utilities/const';
 import { AppNotification } from '../redux/types';
 import AppLauncher from './AppLauncher';
@@ -56,13 +57,11 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <DropdownItem
         key="documentation"
         onClick={handleHelpClick}
-        className="odh-dashboard__external-link"
         href={DOC_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
-        Documentation
-        <ExternalLinkAltIcon />
+        Documentation <ExternalLinkAltIcon />
       </DropdownItem>,
     );
   }
@@ -71,13 +70,11 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <DropdownItem
         key="support"
         onClick={handleHelpClick}
-        className="odh-dashboard__external-link"
         href={SUPPORT_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
-        Support
-        <ExternalLinkAltIcon />
+        Support <ExternalLinkAltIcon />
       </DropdownItem>,
     );
   }
@@ -86,62 +83,64 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <DropdownItem
         key="community"
         onClick={handleHelpClick}
-        className="odh-dashboard__external-link"
         href={COMMUNITY_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
-        Community
-        <ExternalLinkAltIcon />
+        Community <ExternalLinkAltIcon />
       </DropdownItem>,
     );
   }
 
   return (
-    <PageHeaderTools>
-      <PageHeaderToolsGroup className="hidden-xs">
-        {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? <AppLauncher /> : null}
-        <PageHeaderToolsItem>
-          <NotificationBadge isRead count={newNotifications} onClick={onNotificationsClick} />
-        </PageHeaderToolsItem>
-        {helpMenuItems.length > 0 ? (
-          <PageHeaderToolsItem>
-            <Dropdown
-              removeFindDomNode
-              position={DropdownPosition.right}
-              toggle={
-                <DropdownToggle
-                  id="toggle-id"
-                  onToggle={() => setHelpMenuOpen(!helpMenuOpen)}
-                  toggleIndicator={CaretDownIcon}
-                >
-                  <QuestionCircleIcon />
-                </DropdownToggle>
-              }
-              isOpen={helpMenuOpen}
-              dropdownItems={helpMenuItems}
-            />
-          </PageHeaderToolsItem>
-        ) : null}
-        <PageHeaderToolsItem>
+    <Toolbar isFullHeight>
+      <ToolbarContent>
+        <ToolbarGroup variant="icon-button-group" alignment={{ default: 'alignRight' }}>
+          {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? (
+            <ToolbarItem>
+              <AppLauncher />
+            </ToolbarItem>
+          ) : null}
+          <ToolbarItem>
+            <NotificationBadge isRead count={newNotifications} onClick={onNotificationsClick} />
+          </ToolbarItem>
+          {helpMenuItems.length > 0 ? (
+            <ToolbarItem>
+              <Dropdown
+                removeFindDomNode
+                isPlain
+                position={DropdownPosition.right}
+                toggle={
+                  <DropdownToggle
+                    toggleIndicator={null}
+                    id="help-icon-toggle"
+                    onToggle={() => setHelpMenuOpen(!helpMenuOpen)}
+                  >
+                    <QuestionCircleIcon />
+                  </DropdownToggle>
+                }
+                isOpen={helpMenuOpen}
+                dropdownItems={helpMenuItems}
+              />
+            </ToolbarItem>
+          ) : null}
+        </ToolbarGroup>
+        <ToolbarItem>
           <Dropdown
             removeFindDomNode
+            isPlain
             position={DropdownPosition.right}
             toggle={
-              <DropdownToggle
-                id="toggle-id"
-                onToggle={() => setUserMenuOpen(!userMenuOpen)}
-                toggleIndicator={CaretDownIcon}
-              >
+              <DropdownToggle id="user-menu-toggle" onToggle={() => setUserMenuOpen(!userMenuOpen)}>
                 {userName}
               </DropdownToggle>
             }
             isOpen={userMenuOpen}
             dropdownItems={userMenuItems}
           />
-        </PageHeaderToolsItem>
-      </PageHeaderToolsGroup>
-    </PageHeaderTools>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
   );
 };
 
diff --git a/frontend/src/app/NavSidebar.tsx b/frontend/src/app/NavSidebar.tsx
index a5f2809b19..82884d046a 100644
--- a/frontend/src/app/NavSidebar.tsx
+++ b/frontend/src/app/NavSidebar.tsx
@@ -44,12 +44,12 @@ const NavGroup: React.FC<{ item: NavDataGroup; pathname: string }> = ({ item, pa
 };
 
 const NavSidebar: React.FC = () => {
-  const { isNavOpen, dashboardConfig } = useAppContext();
+  const { dashboardConfig } = useAppContext();
   const routerLocation = useLocation();
   const { isAdmin } = useUser();
   const userNavData = getNavBarData(isAdmin, dashboardConfig);
   const nav = (
-    <Nav className="nav" theme="dark" aria-label="Nav">
+    <Nav theme="dark" aria-label="Nav">
       <NavList>
         {userNavData.map((item) =>
           isNavDataGroup(item) ? (
@@ -61,7 +61,7 @@ const NavSidebar: React.FC = () => {
       </NavList>
     </Nav>
   );
-  return <PageSidebar isNavOpen={isNavOpen} nav={nav} theme="dark" />;
+  return <PageSidebar nav={nav} theme="dark" />;
 };
 
 export default NavSidebar;
diff --git a/frontend/src/components/BrandImage.tsx b/frontend/src/components/BrandImage.tsx
index 7f3a6f628d..62391bf68b 100644
--- a/frontend/src/components/BrandImage.tsx
+++ b/frontend/src/components/BrandImage.tsx
@@ -1,15 +1,13 @@
 import * as React from 'react';
-import classNames from 'classnames';
 import { Brand, Skeleton } from '@patternfly/react-core';
 import { RocketIcon } from '@patternfly/react-icons';
 
 type BrandImageProps = {
   src: string;
-  className?: string;
   alt: string;
 };
 
-const BrandImage: React.FC<BrandImageProps> = ({ src, className, ...props }) => {
+const BrandImage: React.FC<BrandImageProps> = ({ src, ...props }) => {
   const [image, setImage] = React.useState<{ imgSrc: string; isValid: boolean }>({
     imgSrc: '',
     isValid: false,
@@ -29,22 +27,18 @@ const BrandImage: React.FC<BrandImageProps> = ({ src, className, ...props }) =>
     return <Skeleton shape="square" width="40px" screenreaderText="Brand image loading" />;
   }
 
-  const brandClasses = classNames('odh-card__header-brand', className, {
-    'pf-c-brand': !image.isValid,
-    'odh-card__header-fallback-img': !image.isValid,
-  });
-
   if (!image.isValid) {
-    return <RocketIcon className={brandClasses} {...props} />;
+    return <RocketIcon height={40} width={40} {...props} />;
   }
 
   return (
     <Brand
       {...props}
-      className={brandClasses}
-      src={image.imgSrc}
+      heights={{ default: '40px' }}
       onError={() => setImage((prevImage) => ({ imgSrc: prevImage.imgSrc, isValid: false }))}
-    />
+    >
+      <source srcSet={image.imgSrc} />
+    </Brand>
   );
 };
 
diff --git a/frontend/src/components/DocCardBadges.tsx b/frontend/src/components/DocCardBadges.tsx
index a7d6046f8b..c1ac4f1143 100644
--- a/frontend/src/components/DocCardBadges.tsx
+++ b/frontend/src/components/DocCardBadges.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Label, Tooltip } from '@patternfly/react-core';
+import { Label, LabelGroup, Tooltip } from '@patternfly/react-core';
 import { SyncAltIcon, CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { QuickStartContext, QuickStartContextValues } from '@patternfly/quickstarts';
 import { OdhDocument, OdhDocumentType } from '../types';
@@ -35,7 +35,7 @@ const DocCardBadges: React.FC<DocCardBadgesProps> = ({ odhDoc }) => {
   const label = DOC_TYPE_LABEL[docType] || 'Documentation';
 
   return (
-    <div className="odh-card__doc-badges">
+    <LabelGroup defaultIsOpen numLabels={3}>
       <Tooltip removeFindDomNode content={DOC_TYPE_TOOLTIPS[docType]}>
         <Label color={getLabelColorForDocType(docType)}>{label}</Label>
       </Tooltip>
@@ -59,7 +59,7 @@ const DocCardBadges: React.FC<DocCardBadgesProps> = ({ odhDoc }) => {
           Failed
         </Label>
       ) : null}
-    </div>
+    </LabelGroup>
   );
 };
 
diff --git a/frontend/src/components/FavoriteButton.scss b/frontend/src/components/FavoriteButton.scss
new file mode 100644
index 0000000000..3b5c910fda
--- /dev/null
+++ b/frontend/src/components/FavoriteButton.scss
@@ -0,0 +1,17 @@
+// This is an override provided by UX to set the star icon styles
+// Because this is not implemented in PF Card component
+.odh-favorite-button {
+  padding: 0;
+  &__star-icon {
+    fill: var(--pf-global--palette--black-400);
+    &:hover {
+      fill: var(--pf-global--palette--black-500);
+    }
+    &--is-selected {
+      fill: var(--pf-global--palette--gold-300);
+      &:hover {
+        fill: var(--pf-global--palette--gold-400);
+      }
+    }
+  }
+}
diff --git a/frontend/src/components/FavoriteButton.tsx b/frontend/src/components/FavoriteButton.tsx
new file mode 100644
index 0000000000..d126429d1c
--- /dev/null
+++ b/frontend/src/components/FavoriteButton.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { StarIcon } from '@patternfly/react-icons';
+import classNames from 'classnames';
+
+import './FavoriteButton.scss';
+
+type FavoriteButtonProps = {
+  isFavorite: boolean;
+  onClick: () => void;
+};
+
+const FavoriteButton: React.FC<FavoriteButtonProps> = ({ isFavorite, onClick }) => {
+  return (
+    <Button variant="plain" className="odh-favorite-button" onClick={onClick}>
+      <StarIcon
+        className={classNames('odh-favorite-button__star-icon', {
+          'odh-favorite-button__star-icon--is-selected': isFavorite,
+        })}
+      />
+    </Button>
+  );
+};
+
+export default FavoriteButton;
diff --git a/frontend/src/components/OdhAppCard.tsx b/frontend/src/components/OdhAppCard.tsx
index 0fd9761283..e6e3bcdd9f 100644
--- a/frontend/src/components/OdhAppCard.tsx
+++ b/frontend/src/components/OdhAppCard.tsx
@@ -4,9 +4,11 @@ import { Link } from 'react-router-dom';
 import {
   Button,
   Card,
+  CardActions,
   CardBody,
   CardFooter,
   CardHeader,
+  CardHeaderMain,
   Dropdown,
   DropdownItem,
   KebabToggle,
@@ -14,7 +16,7 @@ import {
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { OdhApplication } from '../types';
-import { getLaunchStatus, launchQuickStart, LaunchStatusEnum } from '../utilities/quickStartUtils';
+import { getLaunchStatus, launchQuickStart } from '../utilities/quickStartUtils';
 import BrandImage from './BrandImage';
 import SupportedAppTitle from './SupportedAppTitle';
 import { useQuickStartCardSelected } from './useQuickStartCardSelected';
@@ -84,15 +86,8 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   };
 
   const dropdownItems = [
-    <DropdownItem
-      key="docs"
-      className="odh-dashboard__external-link"
-      href={odhApp.spec.docsLink}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      View documentation
-      <ExternalLinkAltIcon />
+    <DropdownItem key="docs" href={odhApp.spec.docsLink} target="_blank" rel="noopener noreferrer">
+      View documentation <ExternalLinkAltIcon />
     </DropdownItem>,
   ];
 
@@ -100,15 +95,9 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
     'm-warning': odhApp.spec.category === 'Third party support',
   });
 
-  const quickStartClasses = classNames('odh-dashboard__external-link', {
-    'm-hidden': !odhApp.spec.quickStart,
-    'm-disabled':
-      getLaunchStatus(odhApp.spec.quickStart || '', qsContext) === LaunchStatusEnum.Close,
-  });
-
   if (odhApp.spec.quickStart) {
     dropdownItems.push(
-      <DropdownItem key="quick-start" className={quickStartClasses} href="#" onClick={onQuickStart}>
+      <DropdownItem key="quick-start" onClick={onQuickStart}>
         {`${getLaunchStatus(odhApp.spec.quickStart || '', qsContext)} quick start`}
       </DropdownItem>,
     );
@@ -141,7 +130,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
     </CardFooter>
   );
 
-  const cardClasses = classNames('odh-card odh-tourable-card', {
+  const cardClasses = classNames('odh-card', {
     'm-disabled': disabled,
   });
 
@@ -195,8 +184,10 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
       isSelectable={!disabled}
     >
       <CardHeader>
-        <BrandImage src={odhApp.spec.img} alt={odhApp.spec.displayName} />
-        <div className="odh-card__enabled-controls">
+        <CardHeaderMain style={{ maxWidth: '33%' }}>
+          <BrandImage src={odhApp.spec.img} alt={odhApp.spec.displayName} />
+        </CardHeaderMain>
+        <CardActions hasNoOffset>
           {disabled ? disabledPopover : null}
           <Dropdown
             removeFindDomNode
@@ -207,7 +198,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
             dropdownItems={dropdownItems}
             position={'right'}
           />
-        </div>
+        </CardActions>
       </CardHeader>
       <SupportedAppTitle odhApp={odhApp} />
       <CardBody>
diff --git a/frontend/src/components/OdhCard.scss b/frontend/src/components/OdhCard.scss
index cf52d9af28..75bfd31ae4 100644
--- a/frontend/src/components/OdhCard.scss
+++ b/frontend/src/components/OdhCard.scss
@@ -13,34 +13,6 @@
     }
   }
 
-  &.odh-tourable-card {
-    cursor: default !important;
-  }
-
-  &__doc-title {
-    &.pf-c-card__title {
-      padding-bottom: 0;
-    }
-  }
-
-  &__header-brand {
-    display: flex;
-    height: 40px;
-    max-width: 33%;
-  }
-
-  &__header-fallback-img {
-    height: 40px;
-    width: 40px;
-  }
-
-  &__supported-image {
-    color: var(--pf-global--primary-color--100);
-    &.m-hidden {
-      visibility: hidden;
-    }
-  }
-
   &__partner-badge-container {
     margin-top: calc(var(--pf-global--spacer--sm) * -1);
     margin-bottom: var(--pf-global--spacer--sm);
@@ -83,12 +55,6 @@
     }
   }
 
-  &__enabled-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
   &__disabled-text {
     color: var(--pf-global--disabled-color--100);
     font-size: var(--pf-global--FontSize--sm);
@@ -105,19 +71,6 @@
     align-items: center;
   }
 
-  &__doc-badges {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: var(--pf-global--spacer--sm);
-    .pf-c-label {
-      font-size: var(--pf-c-label--FontSize);
-      margin-bottom: var(--pf-global--spacer--sm);
-    }
-    & > :not(:last-child) {
-      margin-right: var(--pf-global--spacer--xs);
-    }
-  }
-
   .pf-c-card__body {
     .odh-card__body-text {
       display: -webkit-box;
@@ -132,11 +85,6 @@
     font-size: var(--pf-global--FontSize--md);
   }
 
-  .pf-c-card__header {
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
   &__provider {
     color: var(--pf-global--Color--200);
     font-size: var(--pf-global--FontSize--sm);
diff --git a/frontend/src/components/OdhDocCard.tsx b/frontend/src/components/OdhDocCard.tsx
index 148315815f..1e30cffe9b 100644
--- a/frontend/src/components/OdhDocCard.tsx
+++ b/frontend/src/components/OdhDocCard.tsx
@@ -1,7 +1,20 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Card, CardBody, CardFooter, CardHeader, CardTitle, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, StarIcon } from '@patternfly/react-icons';
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardHeaderMain,
+  CardTitle,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  Tooltip,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { OdhDocument, OdhDocumentType } from '../types';
 import {
   getLaunchStatus,
@@ -13,9 +26,10 @@ import BrandImage from './BrandImage';
 import DocCardBadges from './DocCardBadges';
 import { fireTrackingEvent } from '../utilities/segmentIOUtils';
 import { useQuickStartCardSelected } from './useQuickStartCardSelected';
+import { QuickStartContextValues } from '@patternfly/quickstarts';
+import FavoriteButton from './FavoriteButton';
 
 import './OdhCard.scss';
-import { QuickStartContextValues } from '@patternfly/quickstarts';
 
 type OdhDocCardProps = {
   odhDoc: OdhDocument;
@@ -116,7 +130,6 @@ const OdhDocCard: React.FC<OdhDocCardProps> = ({ odhDoc, favorite, updateFavorit
     return null;
   };
 
-  const favoriteClasses = classNames('odh-dashboard__favorite', { 'm-is-favorite': favorite });
   return (
     <Card
       data-id={odhDoc.metadata.name}
@@ -128,21 +141,36 @@ const OdhDocCard: React.FC<OdhDocCardProps> = ({ odhDoc, favorite, updateFavorit
       isSelectable
     >
       <CardHeader>
-        <BrandImage src={odhDoc.spec.img || odhDoc.spec.icon || ''} alt={odhDoc.spec.displayName} />
-        <span className={favoriteClasses} onClick={() => updateFavorite(!favorite)}>
-          <StarIcon className="odh-dashboard__favorite__outer" />
-          <StarIcon className="odh-dashboard__favorite__inner" />
-        </span>
+        <CardHeaderMain style={{ maxWidth: '33%' }}>
+          <BrandImage
+            src={odhDoc.spec.img || odhDoc.spec.icon || ''}
+            alt={odhDoc.spec.displayName}
+          />
+        </CardHeaderMain>
+        <CardActions hasNoOffset>
+          <FavoriteButton isFavorite={favorite} onClick={() => updateFavorite(!favorite)} />
+        </CardActions>
       </CardHeader>
-      <CardTitle className="odh-card__doc-title">
-        {odhDoc.spec.displayName}
-        <div className="odh-card__provider">by {odhDoc.spec.appDisplayName}</div>
-        <DocCardBadges odhDoc={odhDoc} />
+      <CardTitle>
+        <TextContent>
+          {odhDoc.spec.displayName}
+          {/* Override the bold font in the title, make the subtitle lighter */}
+          <Text component="small" style={{ fontWeight: 'var(--pf-global--FontWeight--normal)' }}>
+            by {odhDoc.spec.appDisplayName}
+          </Text>
+        </TextContent>
       </CardTitle>
       <CardBody>
-        <Tooltip removeFindDomNode content={odhDoc.spec.description}>
-          <span className="odh-card__body-text">{odhDoc.spec.description}</span>
-        </Tooltip>
+        <Stack hasGutter>
+          <StackItem>
+            <DocCardBadges odhDoc={odhDoc} />
+          </StackItem>
+          <StackItem>
+            <Tooltip removeFindDomNode content={odhDoc.spec.description}>
+              <span className="odh-card__body-text">{odhDoc.spec.description}</span>
+            </Tooltip>
+          </StackItem>
+        </Stack>
       </CardBody>
       <CardFooter className={footerClassName}>{renderDocLink()}</CardFooter>
     </Card>
diff --git a/frontend/src/components/OdhDocListItem.tsx b/frontend/src/components/OdhDocListItem.tsx
index 5161c4e3c3..67e271b407 100644
--- a/frontend/src/components/OdhDocListItem.tsx
+++ b/frontend/src/components/OdhDocListItem.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, StarIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { OdhDocument, OdhDocumentType } from '../types';
 import { getQuickStartLabel, launchQuickStart } from '../utilities/quickStartUtils';
 import { DOC_TYPE_TOOLTIPS } from '../utilities/const';
 import { getDuration } from '../utilities/utils';
 import { useQuickStartCardSelected } from './useQuickStartCardSelected';
+import FavoriteButton from './FavoriteButton';
 
 import './OdhListItem.scss';
 
@@ -75,16 +76,9 @@ const OdhDocListItem: React.FC<OdhDocCardProps> = ({ odhDoc, favorite, updateFav
     );
   };
 
-  const favoriteClasses = classNames('odh-dashboard__favorite', {
-    'm-is-favorite': favorite,
-  });
-
   return (
     <>
-      <div className={favoriteClasses} onClick={() => updateFavorite(!favorite)}>
-        <StarIcon className="odh-dashboard__favorite__outer" />
-        <StarIcon className="odh-dashboard__favorite__inner" />
-      </div>
+      <FavoriteButton isFavorite={favorite} onClick={() => updateFavorite(!favorite)} />
       <div className="odh-list-item__doc-text">
         <div id={odhDoc.metadata.name} className="odh-list-item__doc-title">
           <Tooltip removeFindDomNode content={odhDoc.spec.displayName}>
diff --git a/frontend/src/components/OdhExploreCard.tsx b/frontend/src/components/OdhExploreCard.tsx
index 2cb3113179..8cb8c18e66 100644
--- a/frontend/src/components/OdhExploreCard.tsx
+++ b/frontend/src/components/OdhExploreCard.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Card, CardHeader, CardBody } from '@patternfly/react-core';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardHeaderMain,
+  CardActions,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import { OdhApplication } from '../types';
 import { makeCardVisible } from '../utilities/utils';
 import EnableModal from '../pages/exploreApplication/EnableModal';
@@ -53,24 +61,28 @@ const OdhExploreCard: React.FC<OdhExploreCardProps> = ({
       onClick={() => !disabled && onSelect()}
     >
       <CardHeader>
-        <BrandImage
-          className="odh-card__header-brand"
-          src={odhApp.spec.img}
-          alt={odhApp.spec.displayName}
-        />
-        {!dashboardConfig.spec.dashboardConfig.disableISVBadges ? (
-          <div className="odh-card__explore-badges">
-            {odhApp.spec.comingSoon ? (
-              <span className="odh-card__coming-soon">Coming soon</span>
-            ) : null}
-            {!odhApp.spec.comingSoon && odhApp.spec.category ? (
-              <span className={badgeClasses}>{odhApp.spec.category}</span>
-            ) : null}
-            {odhApp.spec.beta ? (
-              <span className="odh-card__partner-badge odh-m-beta">Beta</span>
-            ) : null}
-          </div>
-        ) : null}
+        <CardHeaderMain style={{ maxWidth: '33%' }}>
+          <BrandImage src={odhApp.spec.img} alt={odhApp.spec.displayName} />
+        </CardHeaderMain>
+        {!dashboardConfig.spec.dashboardConfig.disableISVBadges && (
+          <CardActions hasNoOffset>
+            <Flex
+              spaceItems={{ default: 'spaceItemsSm' }}
+              alignItems={{ default: 'alignItemsCenter' }}
+              direction={{ default: 'column' }}
+            >
+              {odhApp.spec.comingSoon && (
+                <FlexItem className="odh-card__coming-soon">Coming soon</FlexItem>
+              )}
+              {!odhApp.spec.comingSoon && odhApp.spec.category && (
+                <FlexItem className={badgeClasses}>{odhApp.spec.category}</FlexItem>
+              )}
+              {odhApp.spec.beta && (
+                <FlexItem className="odh-card__partner-badge odh-m-beta">Beta</FlexItem>
+              )}
+            </Flex>
+          </CardActions>
+        )}
       </CardHeader>
       <SupportedAppTitle odhApp={odhApp} showProvider />
       <CardBody>{odhApp.spec.description}</CardBody>
diff --git a/frontend/src/components/OdhListItem.scss b/frontend/src/components/OdhListItem.scss
index 90524c69f4..fdbcd03593 100644
--- a/frontend/src/components/OdhListItem.scss
+++ b/frontend/src/components/OdhListItem.scss
@@ -38,25 +38,12 @@
       margin-left: var(--pf-global--spacer--xs);
     }
   }
-  &__header-brand {
-    display: flex;
-    height: 50px;
-    max-width: 33%;
-  }
 
   &__header-fallback-img {
     height: 40px;
     width: 40px;
   }
 
-  &__supported-image {
-    margin-left: var(--pf-global--spacer--sm);
-    color: var(--pf-global--primary-color--100);
-    &.m-hidden {
-      visibility: hidden;
-    }
-  }
-
   &__partner-badge-container {
     margin-top: calc(var(--pf-global--spacer--sm) * -1);
     margin-bottom: var(--pf-global--spacer--sm);
@@ -141,46 +128,8 @@
     }
   }
 
-  &__doc-badges {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: var(--pf-global--spacer--sm);
-    .odh-card__partner-badge:not(:last-of-type) {
-      margin-right: var(--pf-global--spacer--xs);
-    }
-  }
-
-  &__coming-soon {
-    color: var(--pf-global--disabled-color--100);
-    font-size: var(--pf-global--FontSize--md);
-  }
-
   .pf-c-card__header {
     align-items: flex-start;
     justify-content: space-between;
   }
-
-  &__provider {
-    color: var(--pf-global--Color--200);
-    font-size: var(--pf-global--FontSize--sm);
-    font-weight: var(--pf-global--FontWeight--normal);
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: space-between;
-    &.m-right-justified {
-      justify-content: flex-end;
-    }
-
-    &__link {
-      padding: 0;
-      > svg {
-        margin-left: var(--pf-global--spacer--xs);
-      }
-      &.m-hidden {
-        visibility: hidden;
-      }
-    }
-  }
 }
diff --git a/frontend/src/components/SupportedAppTitle.tsx b/frontend/src/components/SupportedAppTitle.tsx
index aa4cd17cb2..522d750d6c 100644
--- a/frontend/src/components/SupportedAppTitle.tsx
+++ b/frontend/src/components/SupportedAppTitle.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
-import { Bullseye, CardTitle, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
+import { CardTitle, Tooltip } from '@patternfly/react-core';
 import { OdhApplication } from '../types';
 import { isRedHatSupported } from '../utilities/utils';
 import { ODH_PRODUCT_NAME } from 'utilities/const';
@@ -11,33 +10,23 @@ type SupportedAppTitleProps = {
 };
 
 const SupportedAppTitle: React.FC<SupportedAppTitleProps> = ({ odhApp, showProvider = false }) => {
-  const supportedImageClasses = classNames('odh-card__supported-image', {
-    'm-hidden': !isRedHatSupported(odhApp),
-  });
   return (
     <CardTitle>
-      <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
-        <FlexItem>{odhApp.spec.displayName}</FlexItem>
-        <FlexItem>
-          {/* We still have some layout issue after applying removeFindDomNode
-          Use Bullseye layout to temp fix it, here is the PF issue to track 
-          https://github.com/patternfly/patternfly-react/issues/8277 */}
-          <Tooltip removeFindDomNode content={`${ODH_PRODUCT_NAME} certified and supported`}>
-            <Bullseye>
-              <img
-                className={supportedImageClasses}
-                src="../images/CheckStar.svg"
-                alt={`${ODH_PRODUCT_NAME} certified and supported`}
-              />
-            </Bullseye>
-          </Tooltip>
-        </FlexItem>
-      </Flex>
-      {showProvider && odhApp.spec.provider ? (
+      <span style={{ verticalAlign: 'text-bottom' }}>{odhApp.spec.displayName}</span>
+      {isRedHatSupported(odhApp) && (
+        <Tooltip content={`${ODH_PRODUCT_NAME} certified and supported`}>
+          <img
+            style={{ marginLeft: 'var(--pf-global--spacer--xs)' }}
+            src="../images/CheckStar.svg"
+            alt={`${ODH_PRODUCT_NAME} certified and supported`}
+          />
+        </Tooltip>
+      )}
+      {showProvider && odhApp.spec.provider && (
         <div>
           <span className="odh-card__provider">by {odhApp.spec.provider}</span>
         </div>
-      ) : null}
+      )}
     </CardTitle>
   );
 };
diff --git a/frontend/src/components/ToastNotifications.tsx b/frontend/src/components/ToastNotifications.tsx
index 06d8f0d18e..302709409a 100644
--- a/frontend/src/components/ToastNotifications.tsx
+++ b/frontend/src/components/ToastNotifications.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { AlertGroup } from '@patternfly/react-core';
 import { useAppSelector } from '../redux/hooks';
 import { AppNotification } from '../redux/types';
 import ToastNotification from './ToastNotification';
@@ -10,11 +11,11 @@ const ToastNotifications: React.FC = () => {
     return null;
   }
   return (
-    <div className="odh-dashboard__notifications">
+    <AlertGroup isToast isLiveRegion>
       {notifications.map((notification) => (
         <ToastNotification notification={notification} key={notification.id} />
       ))}
-    </div>
+    </AlertGroup>
   );
 };
 
diff --git a/frontend/src/images/odh-logo.svg b/frontend/src/images/odh-logo.svg
index 61631b5d65..656e590ebe 100644
--- a/frontend/src/images/odh-logo.svg
+++ b/frontend/src/images/odh-logo.svg
@@ -9,8 +9,6 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="64.377396mm"
-   height="13.229167mm"
    viewBox="0 0 64.377394 13.229167"
    version="1.1"
    id="svg5793"
diff --git a/frontend/src/pages/ApplicationsPage.scss b/frontend/src/pages/ApplicationsPage.scss
index 66efb5f3d4..417f0d4ae5 100644
--- a/frontend/src/pages/ApplicationsPage.scss
+++ b/frontend/src/pages/ApplicationsPage.scss
@@ -22,10 +22,3 @@
     }
   }
 }
-
-.odh-dashboard__page-content {
-  border: 1px solid var(--pf-global--BorderColor--100);
-  display: flex;
-  flex: 1;
-  margin: var(--pf-global--spacer--md);
-}
diff --git a/frontend/src/pages/ApplicationsPage.tsx b/frontend/src/pages/ApplicationsPage.tsx
index 37492f237e..4a38763820 100644
--- a/frontend/src/pages/ApplicationsPage.tsx
+++ b/frontend/src/pages/ApplicationsPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { QuestionCircleIcon, WarningTriangleIcon } from '@patternfly/react-icons';
+import { ExclamationCircleIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import {
   PageSection,
   PageSectionVariants,
@@ -66,17 +66,13 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
   const renderContents = () => {
     if (loadError) {
       return (
-        <PageSection>
-          <EmptyState variant={EmptyStateVariant.full} data-id="error-empty-state">
-            <EmptyStateIcon icon={WarningTriangleIcon} />
-            <Title headingLevel="h5" size="lg">
+        <PageSection isFilled>
+          <EmptyState variant={EmptyStateVariant.large} data-id="error-empty-state">
+            <EmptyStateIcon icon={ExclamationCircleIcon} />
+            <Title headingLevel="h4" size="lg">
               {errorMessage !== undefined ? errorMessage : 'Error loading components'}
             </Title>
-            <EmptyStateBody className="odh-dashboard__error-body">
-              <div>
-                <code className="odh-dashboard__display-error">{loadError.message}</code>
-              </div>
-            </EmptyStateBody>
+            <EmptyStateBody>{loadError.message}</EmptyStateBody>
           </EmptyState>
         </PageSection>
       );
@@ -85,9 +81,9 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
     if (!loaded) {
       return (
         <PageSection isFilled>
-          <EmptyState variant={EmptyStateVariant.full} data-id="loading-empty-state">
+          <EmptyState variant={EmptyStateVariant.large} data-id="loading-empty-state">
             <Spinner size="xl" />
-            <Title headingLevel="h5" size="lg">
+            <Title headingLevel="h4" size="lg">
               Loading
             </Title>
           </EmptyState>
@@ -98,9 +94,9 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
     if (empty) {
       return !emptyStatePage ? (
         <PageSection isFilled>
-          <EmptyState variant={EmptyStateVariant.full} data-id="empty-empty-state">
+          <EmptyState variant={EmptyStateVariant.large} data-id="empty-empty-state">
             <EmptyStateIcon icon={QuestionCircleIcon} />
-            <Title headingLevel="h5" size="lg">
+            <Title headingLevel="h4" size="lg">
               {emptyMessage !== undefined ? emptyMessage : 'No Components Found'}
             </Title>
           </EmptyState>
diff --git a/frontend/src/pages/enabledApplications/EnabledApplications.tsx b/frontend/src/pages/enabledApplications/EnabledApplications.tsx
index 171181c2cd..c52a7da3c9 100644
--- a/frontend/src/pages/enabledApplications/EnabledApplications.tsx
+++ b/frontend/src/pages/enabledApplications/EnabledApplications.tsx
@@ -33,17 +33,18 @@ export const EnabledApplicationsInner: React.FC<EnabledApplicationsInnerProps> =
         empty={isEmpty}
         loadError={loadError}
       >
-        {!isEmpty ? (
-          <div className="odh-dashboard__page-content" data-id="page-content">
-            <PageSection>
-              <Gallery role="list" className="odh-installed-apps__gallery" hasGutter>
-                {components.map((c) => (
-                  <OdhAppCard key={c.metadata.name} odhApp={c} />
-                ))}
-              </Gallery>
-            </PageSection>
-          </div>
-        ) : null}
+        <PageSection isFilled data-id="page-content">
+          <Gallery
+            maxWidths={{ default: '330px' }}
+            role="list"
+            className="odh-installed-apps__gallery"
+            hasGutter
+          >
+            {components.map((c) => (
+              <OdhAppCard key={c.metadata.name} odhApp={c} />
+            ))}
+          </Gallery>
+        </PageSection>
       </ApplicationsPage>
     );
   },
diff --git a/frontend/src/pages/exploreApplication/EnableModal.tsx b/frontend/src/pages/exploreApplication/EnableModal.tsx
index 8b60983227..0c6e2779fa 100644
--- a/frontend/src/pages/exploreApplication/EnableModal.tsx
+++ b/frontend/src/pages/exploreApplication/EnableModal.tsx
@@ -116,14 +116,8 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, shown, onClose }
       {enable.link ? (
         <div className="odh-enable-modal__enable-link">
           {enable.linkPreface ? <div>{enable.linkPreface}</div> : null}
-          <a
-            className="odh-dashboard__external-link"
-            href={enable.link}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {enable.link}
-            <ExternalLinkAltIcon />
+          <a href={enable.link} target="_blank" rel="noopener noreferrer">
+            {enable.link} <ExternalLinkAltIcon />
           </a>
         </div>
       ) : null}
diff --git a/frontend/src/pages/exploreApplication/ExploreApplications.tsx b/frontend/src/pages/exploreApplication/ExploreApplications.tsx
index 4aa218ba3d..0feb7182e1 100644
--- a/frontend/src/pages/exploreApplication/ExploreApplications.tsx
+++ b/frontend/src/pages/exploreApplication/ExploreApplications.tsx
@@ -66,30 +66,26 @@ const ExploreApplicationsInner: React.FC<ExploreApplicationsInnerProps> = React.
               empty={isEmpty}
               loadError={loadError}
             >
-              {!isEmpty ? (
-                <div className="odh-dashboard__page-content" data-id="page-content">
-                  <PageSection>
-                    <Gallery role="list" className="odh-explore-apps__gallery" hasGutter>
-                      {exploreComponents.map((c) => (
-                        <OdhExploreCard
-                          key={c.metadata.name}
-                          odhApp={c}
-                          isSelected={selectedComponent?.metadata.name === c.metadata.name}
-                          onSelect={() => {
-                            updateSelection(c.metadata.name);
-                            fireTrackingEvent('Explore card clicked', {
-                              name: c.metadata.name,
-                            });
-                          }}
-                          disableInfo={disableInfo}
-                          enableOpen={c.metadata.name === enableApp?.metadata.name}
-                          onEnableClose={() => setEnableApp(undefined)}
-                        />
-                      ))}
-                    </Gallery>
-                  </PageSection>
-                </div>
-              ) : null}
+              <PageSection isFilled data-id="page-content">
+                <Gallery maxWidths={{ default: '330px' }} role="list" hasGutter>
+                  {exploreComponents.map((c) => (
+                    <OdhExploreCard
+                      key={c.metadata.name}
+                      odhApp={c}
+                      isSelected={selectedComponent?.metadata.name === c.metadata.name}
+                      onSelect={() => {
+                        updateSelection(c.metadata.name);
+                        fireTrackingEvent('Explore card clicked', {
+                          name: c.metadata.name,
+                        });
+                      }}
+                      disableInfo={disableInfo}
+                      enableOpen={c.metadata.name === enableApp?.metadata.name}
+                      onEnableClose={() => setEnableApp(undefined)}
+                    />
+                  ))}
+                </Gallery>
+              </PageSection>
             </ApplicationsPage>
           </DrawerContentBody>
         </DrawerContent>
diff --git a/frontend/src/pages/learningCenter/LearningCenter.tsx b/frontend/src/pages/learningCenter/LearningCenter.tsx
index 9dc633e783..d3a5a46d35 100644
--- a/frontend/src/pages/learningCenter/LearningCenter.tsx
+++ b/frontend/src/pages/learningCenter/LearningCenter.tsx
@@ -45,8 +45,8 @@ export const LearningCenter: React.FC = () => {
   const queryParams = useQueryParams();
   const sortType = queryParams.get(DOC_SORT_KEY) || SORT_TYPE_NAME;
   const sortOrder = queryParams.get(DOC_SORT_ORDER_KEY) || SORT_ASC;
-  const [favourites, setFavorites] = useBrowserStorage<string[]>(FAVORITE_RESOURCES, []);
-  const favoriteResources = useDeepCompareMemoize(favourites);
+  const [favorites, setFavorites] = useBrowserStorage<string[]>(FAVORITE_RESOURCES, []);
+  const favoriteResources = useDeepCompareMemoize(favorites);
   const docFilterer = useDocFilterer(favoriteResources);
   const [viewType, setViewType] = useBrowserStorage<string>(VIEW_TYPE, '', false);
   const [filtersCollapsed, setFiltersCollapsed] = React.useState(false);
@@ -182,14 +182,8 @@ export const LearningCenter: React.FC = () => {
   const docLink = DOC_LINK ? (
     <>
       {docText}
-      <a
-        className="odh-dashboard__external-link"
-        href={DOC_LINK}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        view the documentation.
-        <ExternalLinkAltIcon />
+      <a href={DOC_LINK} target="_blank" rel="noopener noreferrer">
+        view the documentation. <ExternalLinkAltIcon />
       </a>
     </>
   ) : null;
diff --git a/frontend/src/pages/learningCenter/LearningCenterDataView.tsx b/frontend/src/pages/learningCenter/LearningCenterDataView.tsx
index f45f1aae2f..a0571a50ae 100644
--- a/frontend/src/pages/learningCenter/LearningCenterDataView.tsx
+++ b/frontend/src/pages/learningCenter/LearningCenterDataView.tsx
@@ -77,7 +77,7 @@ const LearningCenterDataView: React.FC<LearningCenterDataViewProps> = React.memo
 
       if (viewType !== LIST_VIEW) {
         return (
-          <Gallery role="list" className="odh-learning-paths__gallery" hasGutter>
+          <Gallery maxWidths={{ default: '330px' }} role="list" hasGutter>
             {filteredDocApps.map((doc) => (
               <OdhDocCard
                 key={`${doc.metadata.name}`}
diff --git a/frontend/src/pages/notebookController/NotebookController.scss b/frontend/src/pages/notebookController/NotebookController.scss
index 0ac2a4de6f..c1bce637bb 100644
--- a/frontend/src/pages/notebookController/NotebookController.scss
+++ b/frontend/src/pages/notebookController/NotebookController.scss
@@ -1,6 +1,5 @@
 .odh-notebook-controller {
   &__page {
-    padding: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
     &-content {
       max-width: 1000px;
     }
diff --git a/frontend/src/pages/notebookController/screens/admin/ImpersonateAlert.tsx b/frontend/src/pages/notebookController/screens/admin/ImpersonateAlert.tsx
index 30327ba54e..0dbe2bd90d 100644
--- a/frontend/src/pages/notebookController/screens/admin/ImpersonateAlert.tsx
+++ b/frontend/src/pages/notebookController/screens/admin/ImpersonateAlert.tsx
@@ -9,7 +9,6 @@ const ImpersonateAlert: React.FC = () => {
 
   return (
     <Alert
-      className="odh-notebook-controller__page-content"
       variant="info"
       title={`This notebook server is being created for "${impersonatedUsername}"`}
       isInline
diff --git a/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx b/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx
index 6e6e6e7838..ad5faf5ebe 100644
--- a/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx
+++ b/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx
@@ -55,66 +55,65 @@ const NotebookAdminControl: React.FC = () => {
       <ApplicationsPage
         title="Administration"
         description="Manage notebook servers."
+        provideChildrenPadding
         loaded={loaded}
         loadError={loadError}
         empty={false}
         headerAction={<StopAllServersButton users={users} />}
       >
-        <div className="odh-notebook-controller__page">
-          <Stack hasGutter>
-            <StackItem>
-              <Alert title="Manage users in OpenShift" isInline>
-                Create, delete, and manage permissions for Red Hat OpenShift Data Science users in
-                OpenShift.{' '}
-                <ExternalLink
-                  text="Learn more about OpenShift user management"
-                  to="https://access.redhat.com/documentation/en-us/red_hat_openshift_data_science/1/html/managing_users_and_user_resources/index"
-                />
-              </Alert>
-            </StackItem>
-            <StackItem>
-              <Title headingLevel="h2">Users</Title>
-            </StackItem>
-            <StackItem>
-              <TableComposable aria-label="Users table" variant="compact">
-                <Thead>
-                  <Tr>
-                    {columns.map((column, i) => (
-                      <Th key={column.field} sort={getColumnSort(i)}>
-                        {column.label}
-                      </Th>
+        <Stack hasGutter>
+          <StackItem>
+            <Alert title="Manage users in OpenShift" isInline>
+              Create, delete, and manage permissions for Red Hat OpenShift Data Science users in
+              OpenShift.{' '}
+              <ExternalLink
+                text="Learn more about OpenShift user management"
+                to="https://access.redhat.com/documentation/en-us/red_hat_openshift_data_science/1/html/managing_users_and_user_resources/index"
+              />
+            </Alert>
+          </StackItem>
+          <StackItem>
+            <Title headingLevel="h2">Users</Title>
+          </StackItem>
+          <StackItem>
+            <TableComposable aria-label="Users table" variant="compact">
+              <Thead>
+                <Tr>
+                  {columns.map((column, i) => (
+                    <Th key={column.field} sort={getColumnSort(i)}>
+                      {column.label}
+                    </Th>
+                  ))}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {users.slice(perPage * pageIndex, perPage * pageIndex + perPage).map((user) => (
+                  <Tr key={user.name}>
+                    {columns.map((column) => (
+                      <Td
+                        key={column.field}
+                        dataLabel={column.field}
+                        isActionCell={column.field === 'actions'}
+                      >
+                        <UserTableCellTransform user={user} userProperty={column.field} />
+                      </Td>
                     ))}
                   </Tr>
-                </Thead>
-                <Tbody>
-                  {users.slice(perPage * pageIndex, perPage * pageIndex + perPage).map((user) => (
-                    <Tr key={user.name}>
-                      {columns.map((column) => (
-                        <Td
-                          key={column.field}
-                          dataLabel={column.field}
-                          isActionCell={column.field === 'actions'}
-                        >
-                          <UserTableCellTransform user={user} userProperty={column.field} />
-                        </Td>
-                      ))}
-                    </Tr>
-                  ))}
-                </Tbody>
-              </TableComposable>
-              {users.length > INITIAL_PAGE_LIMIT && (
-                <Pagination
-                  itemCount={users.length}
-                  perPage={perPage}
-                  page={pageIndex + 1}
-                  variant={PaginationVariant.bottom}
-                  onSetPage={(e, pageNumber) => setPageIndex(pageNumber - 1)}
-                  onPerPageSelect={(e, newPerPage) => setPerPage(newPerPage)}
-                />
-              )}
-            </StackItem>
-          </Stack>
-        </div>
+                ))}
+              </Tbody>
+            </TableComposable>
+            {users.length > INITIAL_PAGE_LIMIT && (
+              <Pagination
+                itemCount={users.length}
+                perPage={perPage}
+                page={pageIndex + 1}
+                variant={PaginationVariant.bottom}
+                onSetPage={(e, pageNumber) => setPageIndex(pageNumber - 1)}
+                onPerPageSelect={(e, newPerPage) => setPerPage(newPerPage)}
+              />
+            )}
+          </StackItem>
+        </Stack>
         <StopServerModal notebooksToStop={notebooksToStop} onNotebooksStop={onNotebooksStop} />
       </ApplicationsPage>
     </div>
diff --git a/frontend/src/pages/notebookController/screens/server/NotebookServer.tsx b/frontend/src/pages/notebookController/screens/server/NotebookServer.tsx
index 1aa2d40b86..071d2ee759 100644
--- a/frontend/src/pages/notebookController/screens/server/NotebookServer.tsx
+++ b/frontend/src/pages/notebookController/screens/server/NotebookServer.tsx
@@ -42,11 +42,12 @@ export const NotebookServer: React.FC = () => {
         title="Notebook server control panel"
         description={null}
         loaded
+        provideChildrenPadding
         empty={!currentUserNotebookIsRunning}
-        emptyStatePage={<Navigate to={`/notebookController/spawner`} />}
+        emptyStatePage={<Navigate to="/notebookController/spawner" />}
       >
         {notebook && (
-          <Stack hasGutter className="odh-notebook-controller__page">
+          <Stack hasGutter>
             <StackItem>
               <StopServerModal
                 impersonatedUsername={impersonatedUsername ? impersonatedUsername : undefined}
diff --git a/frontend/src/pages/notebookController/screens/server/SizeSelectField.tsx b/frontend/src/pages/notebookController/screens/server/SizeSelectField.tsx
index c1e396afc5..f0c4c8274c 100644
--- a/frontend/src/pages/notebookController/screens/server/SizeSelectField.tsx
+++ b/frontend/src/pages/notebookController/screens/server/SizeSelectField.tsx
@@ -45,6 +45,7 @@ const SizeSelectField: React.FC<SizeSelectFieldProps> = ({ value, setValue, size
     >
       <Select
         removeFindDomNode
+        width="70%"
         isOpen={sizeDropdownOpen}
         onToggle={() => setSizeDropdownOpen(!sizeDropdownOpen)}
         aria-labelledby="container-size"
diff --git a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
index 5de89024ed..a70514a199 100644
--- a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
+++ b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
@@ -273,11 +273,12 @@ const SpawnerPage: React.FC = () => {
       <ApplicationsPage
         title="Start a notebook server"
         description="Select options for your notebook server."
+        provideChildrenPadding
         loaded={loaded}
         loadError={loadError}
         empty={!images || images.length === 0}
       >
-        <Form maxWidth="1000px" className="odh-notebook-controller__page">
+        <Form maxWidth="1000px">
           <FormSection title="Notebook image">
             <FormGroup fieldId="modal-notebook-image">
               <Grid sm={12} md={12} lg={12} xl={6} xl2={6} hasGutter>
diff --git a/frontend/src/utilities/useDesktopWidth.tsx b/frontend/src/utilities/useDesktopWidth.tsx
deleted file mode 100644
index 0697d6bc37..0000000000
--- a/frontend/src/utilities/useDesktopWidth.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-const breakpointMD = 768;
-
-export const useDesktopWidth = (): boolean => {
-  const [width, setWidth] = React.useState(window.innerWidth);
-
-  React.useEffect(() => {
-    const handleResize = () => setWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return React.useMemo(() => width >= breakpointMD, [width]);
-};
diff --git a/frontend/src/utilities/useWatchBuildStatus.tsx b/frontend/src/utilities/useWatchBuildStatus.tsx
index 8dad1dbfe8..ef1c4aec68 100644
--- a/frontend/src/utilities/useWatchBuildStatus.tsx
+++ b/frontend/src/utilities/useWatchBuildStatus.tsx
@@ -6,6 +6,7 @@ import { fetchBuildStatuses } from '../services/buildsService';
 import { addNotification } from '../redux/actions/actions';
 import { AppNotificationStatus } from '../redux/types';
 import { useAppDispatch } from '../redux/hooks';
+import { List, ListItem, Stack, StackItem } from '@patternfly/react-core';
 
 const runningStatuses = [
   BUILD_PHASE.new,
@@ -84,14 +85,16 @@ export const useWatchBuildStatus = (): BuildStatus[] => {
           status: 'danger',
           title: 'These notebook image builds have not started:',
           message: (
-            <div className="odh-dashboard__notifications__message">
-              <ul className="odh-dashboard__notifications__list">
-                {notStarted.map((build) => (
-                  <li key={build.name}>{build.name}</li>
-                ))}
-              </ul>
-              Contact your administrator to start the builds.
-            </div>
+            <Stack hasGutter>
+              <StackItem>
+                <List>
+                  {notStarted.map((build) => (
+                    <ListItem key={build.name}>{build.name}</ListItem>
+                  ))}
+                </List>
+              </StackItem>
+              <StackItem>Contact your administrator to start the builds.</StackItem>
+            </Stack>
           ),
           timestamp: new Date(),
         }),
@@ -121,15 +124,19 @@ export const useWatchBuildStatus = (): BuildStatus[] => {
       if (failed.length) {
         status = complete.length ? 'warning' : 'danger';
         message = (
-          <div className="odh-dashboard__notifications__message">
-            {complete.length} of {failed.length + complete.length} builds completed successfully.
-            <ul className="odh-dashboard__notifications__list">
-              {failed.map((build) => (
-                <li key={build.name}>{build.name} build image failed.</li>
-              ))}
-            </ul>
-            Contact your administrator to retry failed images.
-          </div>
+          <Stack hasGutter>
+            <StackItem>
+              {complete.length} of {failed.length + complete.length} builds completed successfully.
+            </StackItem>
+            <StackItem>
+              <List>
+                {failed.map((build) => (
+                  <ListItem key={build.name}>{build.name} build image failed.</ListItem>
+                ))}
+              </List>
+            </StackItem>
+            <StackItem>Contact your administrator to retry failed images.</StackItem>
+          </Stack>
         );
       }
       dispatch(
diff --git a/frontend/src/utilities/utils.ts b/frontend/src/utilities/utils.ts
index 450c865e4d..7fd34046ba 100644
--- a/frontend/src/utilities/utils.ts
+++ b/frontend/src/utilities/utils.ts
@@ -126,7 +126,7 @@ export const matchesSearch = (odhDoc: OdhDocument, filterText: string): boolean
 
 export const isRedHatSupported = (app: OdhApplication): boolean => {
   const support = (app.spec.support || '').toLowerCase();
-  return support === ODH_PRODUCT_NAME || support === 'redhat';
+  return support === ODH_PRODUCT_NAME || support === 'redhat' || support === 'red hat';
 };
 
 export const getHourAndMinuteByTimeout = (timeout: number): { hour: number; minute: number } => {