diff --git a/package-lock.json b/package-lock.json
index 981a9180..be03705f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "packages/*"
       ],
       "dependencies": {
+        "@emotion/cache": "^11.14.0",
         "@patternfly/react-tokens": "^6.0.0",
         "sharp": "^0.33.5"
       },
@@ -22,6 +23,7 @@
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.24.7",
         "@babel/preset-typescript": "^7.26.0",
+        "@emotion/babel-plugin": "^11.13.5",
         "@octokit/rest": "^21.1.0",
         "@swc/core": "1.7.42",
         "@testing-library/dom": "^10.3.2",
@@ -86,7 +88,6 @@
     },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -143,7 +144,6 @@
       "version": "7.26.5",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
       "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.26.5",
@@ -261,7 +261,6 @@
     },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.25.9",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
@@ -365,7 +364,6 @@
     },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.25.9",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -373,7 +371,6 @@
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.25.9",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -416,7 +413,6 @@
       "version": "7.26.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
       "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.7"
@@ -1774,7 +1770,6 @@
     },
     "node_modules/@babel/template": {
       "version": "7.25.9",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
@@ -1789,7 +1784,6 @@
       "version": "7.26.7",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz",
       "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
@@ -1808,7 +1802,6 @@
       "version": "7.26.7",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
       "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -1933,6 +1926,77 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.7.3",
       "license": "MIT",
@@ -1944,6 +2008,82 @@
       "version": "0.7.1",
       "license": "MIT"
     },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "dev": true,
@@ -3208,7 +3348,6 @@
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -3221,7 +3360,6 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -3229,7 +3367,6 @@
     },
     "node_modules/@jridgewell/set-array": {
       "version": "1.2.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -3246,12 +3383,10 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -4767,6 +4902,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -6374,6 +6515,37 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.11",
       "dev": true,
@@ -7050,7 +7222,6 @@
     },
     "node_modules/callsites": {
       "version": "3.1.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -8216,7 +8387,6 @@
     },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
@@ -9345,7 +9515,6 @@
     },
     "node_modules/debug": {
       "version": "4.3.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -9361,7 +9530,6 @@
     },
     "node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/decimal.js": {
@@ -9879,7 +10047,6 @@
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -11487,6 +11654,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "dev": true,
@@ -11785,7 +11958,6 @@
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12136,7 +12308,6 @@
     },
     "node_modules/globals": {
       "version": "11.12.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -12375,7 +12546,6 @@
     },
     "node_modules/hasown": {
       "version": "2.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -12771,7 +12941,6 @@
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -12786,7 +12955,6 @@
     },
     "node_modules/import-fresh/node_modules/resolve-from": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -13033,7 +13201,6 @@
     },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-async-function": {
@@ -13151,7 +13318,6 @@
     },
     "node_modules/is-core-module": {
       "version": "2.14.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -15767,7 +15933,6 @@
     },
     "node_modules/jsesc": {
       "version": "3.0.2",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -15788,7 +15953,6 @@
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-schema": {
@@ -16102,7 +16266,6 @@
     },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/listr2": {
@@ -17948,7 +18111,6 @@
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -17990,7 +18152,6 @@
     },
     "node_modules/parse-json": {
       "version": "5.2.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -18077,7 +18238,6 @@
     },
     "node_modules/path-parse": {
       "version": "1.0.7",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -18118,7 +18278,6 @@
     },
     "node_modules/path-type": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -18147,7 +18306,6 @@
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -19661,7 +19819,6 @@
     },
     "node_modules/resolve": {
       "version": "1.22.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.11.0",
@@ -21388,6 +21545,12 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "dev": true,
@@ -21401,7 +21564,6 @@
     },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -24490,6 +24652,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "dev": true,
@@ -24577,6 +24748,7 @@
       "version": "5.0.0-prerelease.0",
       "license": "MIT",
       "dependencies": {
+        "@emotion/react": "^11.14.0",
         "@patternfly/react-core": "^6.0.0",
         "@patternfly/react-icons": "^6.0.0",
         "@patternfly/react-table": "^6.0.0",
diff --git a/package.json b/package.json
index 8c591060..1296fd6c 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@babel/preset-flow": "^7.25.9",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.26.0",
+    "@emotion/babel-plugin": "^11.13.5",
     "@octokit/rest": "^21.1.0",
     "@swc/core": "1.7.42",
     "@testing-library/dom": "^10.3.2",
@@ -83,6 +84,7 @@
     "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
     "@patternfly/react-tokens": "^6.0.0",
     "sharp": "^0.33.5"
   }
diff --git a/packages/module/package.json b/packages/module/package.json
index ae1d08dc..398329cc 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -34,6 +34,7 @@
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
+    "@emotion/react": "^11.14.0",
     "react-jss": "^10.10.0",
     "clsx": "^2.1.1"
   },
diff --git a/packages/module/src/MultiContentCard/MultiContentCard.tsx b/packages/module/src/MultiContentCard/MultiContentCard.tsx
index 8f77c7b1..a22ea4cc 100644
--- a/packages/module/src/MultiContentCard/MultiContentCard.tsx
+++ b/packages/module/src/MultiContentCard/MultiContentCard.tsx
@@ -1,15 +1,15 @@
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Card,
   CardExpandableContent,
-  CardHeader,
+  CardHeader, 
   CardProps,
   CardTitle,
   Divider,
   Flex,
   FlexItem,
 } from '@patternfly/react-core';
-import { createUseStyles } from 'react-jss';
 
 export const MultiContentCardDividerVariant = {
   left: 'left',
@@ -51,11 +51,11 @@ export const isCardWithProps = (
   card: React.ReactElement | MutliContentCardProps
 ): card is MutliContentCardProps => !!card && !React.isValidElement(card);
 
-const useStyles = createUseStyles({
-  cardTitle: {
-    fontSize: 'var(--pf-t--global--font--size--heading--h3)',
-  }
-});
+const styles = {
+  cardTitle: css`
+    font-size: var(--pf-t--global--font--size--heading--h3);
+  `
+};
 
 const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
   cards = [],
@@ -70,7 +70,7 @@ const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
   ...props
 }: MultiContentCardProps) => {
   const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded);
-  const classes = useStyles();
+  
   const onExpand = () => {
     setIsExpanded(!isExpanded);
   };
@@ -88,7 +88,7 @@ const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
           <FlexItem key={`card-${index}`} flex={{ default: 'flex_1' }} data-ouia-component-id={`${ouiaId}-content-${index}`}>
             {isCardWithProps(card) ? card.content : card}
           </FlexItem>
-          {(index + 1 < cards.length && (withDividers || isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.right)) && (
+          {(index + 1 < cards.length && (withDividers || (isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.right))) && (
             <Divider 
               orientation={{ md: 'vertical' }} 
               inset={{ default: 'inset3xl' }}
@@ -112,12 +112,12 @@ const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
           }}
           actions={{ actions }}
         >
-          {toggleText ? <CardTitle component="h3" className={classes.cardTitle} data-ouia-component-id={`${ouiaId}-title`}>{toggleText}</CardTitle> : toggleContent}
+          {toggleText ? <CardTitle component="h3" css={styles.cardTitle} data-ouia-component-id={`${ouiaId}-title`}>{toggleText}</CardTitle> : toggleContent}
         </CardHeader>
       )}
       {isExpandable ? <CardExpandableContent data-ouia-component-id={`${ouiaId}-expandable-content`}>{renderCards(cards, withDividers)}</CardExpandableContent> : renderCards(cards, withDividers)}
     </Card>
-  );}
-
+  );
+};
 
 export default MultiContentCard;
diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
index 8b507fa4..fa941fff 100644
--- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
+++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
@@ -445,7 +445,7 @@ exports[`MultiContentCard component should render expandable multi-content card
         class="pf-v6-c-card__title"
       >
         <h3
-          class="pf-v6-c-card__title-text cardTitle-0-2-1"
+          class="pf-v6-c-card__title-text css-18li09f"
           data-ouia-component-id="MultiContentCard-title"
         >
           Expandable card toggle text
@@ -514,7 +514,7 @@ exports[`MultiContentCard component should render expandable multi-content card
         class="pf-v6-c-card__title"
       >
         <h3
-          class="pf-v6-c-card__title-text cardTitle-0-2-1"
+          class="pf-v6-c-card__title-text css-18li09f"
           data-ouia-component-id="MultiContentCard-title"
         >
           Expandable card toggle text
@@ -992,7 +992,7 @@ exports[`MultiContentCard component should render expandable multi-content card
         class="pf-v6-c-card__title"
       >
         <h3
-          class="pf-v6-c-card__title-text cardTitle-0-2-1"
+          class="pf-v6-c-card__title-text css-18li09f"
           data-ouia-component-id="MultiContentCard-title"
         >
           Expandable card toggle text
diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx
index 04fe21e9..f25c3058 100644
--- a/packages/module/src/ServiceCard/ServiceCard.tsx
+++ b/packages/module/src/ServiceCard/ServiceCard.tsx
@@ -1,8 +1,7 @@
+import { css } from '@emotion/react';
 import React from 'react';
 import { Card, CardBody, CardFooter, CardHeader, CardProps, Content, ContentVariants, Flex, FlexItem } from '@patternfly/react-core';
-import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
-import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
-import { createUseStyles } from 'react-jss';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 import clsx from 'clsx';
 
 /** extends CardProps */
@@ -27,15 +26,15 @@ export interface ServiceCardProps extends CardProps {
   isFullHeight?: boolean;
 }
 
-const useStyles = createUseStyles({
-  fullHeightCard: {
-    height: '100%'
-  },
-  image: {
-    marginRight: 'var(--pf-t--global--spacer--md)',
-    width: 48
-  }
-});
+const styles = {
+  fullHeightCard: css`
+    height: 100%;
+  `,
+  image: css`
+    margin-right: var(--pf-t--global--spacer--md);
+    width: 48px;
+  `
+};
 
 const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
   title,
@@ -48,38 +47,34 @@ const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
   isStacked = false,
   isFullHeight = false,
   ...props
-}: ServiceCardProps) => {
-  const classes = useStyles();
-
-  return (
-    <Card className={clsx({ [classes.fullHeightCard]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
-      <CardHeader>
-        <Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
-          <FlexItem className={classes.image}>
-            {icon}
-          </FlexItem>
-          <FlexItem>
-            <Content>
-              <Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
-              {subtitle ?? null}
-            </Content>
-          </FlexItem>
-        </Flex>
-      </CardHeader>
-      <CardBody data-ouia-component-id={`${ouiaId}-description`}>{description}</CardBody>
-      { footer || helperText ? (
-        <CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
-          { helperText ?
-            ( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
-              <HelperTextItem className="pf-v6-u-mb-lg">
-                {helperText}
-              </HelperTextItem>
-            </HelperText>) : null
-          }
-          { footer }
-        </CardFooter>) : null}
-    </Card>
-  )
-}
+}: ServiceCardProps) => (
+  <Card className={clsx({ [styles.fullHeightCard.toString()]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
+    <CardHeader>
+      <Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
+        <FlexItem css={styles.image}>
+          {icon}
+        </FlexItem>
+        <FlexItem>
+          <Content>
+            <Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
+            {subtitle ?? null}
+          </Content>
+        </FlexItem>
+      </Flex>
+    </CardHeader>
+    <CardBody data-ouia-component-id={`${ouiaId}-description`}>{description}</CardBody>
+    { footer || helperText ? (
+      <CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
+        { helperText ?
+          ( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
+            <HelperTextItem className="pf-v6-u-mb-lg">
+              {helperText}
+            </HelperTextItem>
+          </HelperText>) : null
+        }
+        { footer }
+      </CardFooter>) : null}
+  </Card>
+);
 
 export default ServiceCard;
\ No newline at end of file
diff --git a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
index 17f54bd7..72b1c2bb 100644
--- a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
+++ b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = `
               class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
             >
               <div
-                class="image-0-2-2"
+                class="css-1g8hpot"
               >
                 /
               </div>
@@ -78,7 +78,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = `
             class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
           >
             <div
-              class="image-0-2-2"
+              class="css-1g8hpot"
             >
               /
             </div>
diff --git a/packages/module/tsconfig.json b/packages/module/tsconfig.json
index 078e840c..f2f346f9 100644
--- a/packages/module/tsconfig.json
+++ b/packages/module/tsconfig.json
@@ -9,7 +9,8 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsxImportSource": "@emotion/react",
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */