diff --git a/workspaces/frontend/package-lock.json b/workspaces/frontend/package-lock.json
index abc689bbb..c50277ce3 100644
--- a/workspaces/frontend/package-lock.json
+++ b/workspaces/frontend/package-lock.json
@@ -21,6 +21,9 @@
       },
       "devDependencies": {
         "@cypress/code-coverage": "^3.13.5",
+        "@mui/icons-material": "^6.3.1",
+        "@mui/material": "^6.3.1",
+        "@mui/types": "^7.2.21",
         "@testing-library/cypress": "^10.0.1",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^5.16.5",
@@ -57,6 +60,8 @@
         "react-router-dom": "^6.26.1",
         "regenerator-runtime": "^0.13.11",
         "rimraf": "^6.0.1",
+        "sass": "^1.83.1",
+        "sass-loader": "^16.0.4",
         "serve": "^14.2.1",
         "style-loader": "^3.3.4",
         "svg-url-loader": "^8.0.0",
@@ -77,6 +82,8 @@
         "node": ">=20.0.0"
       },
       "optionalDependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
         "@typescript-eslint/eslint-plugin": "^8.8.1",
         "@typescript-eslint/parser": "^8.12.2",
         "eslint": "^8.57.0",
@@ -125,7 +132,7 @@
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
       "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -186,7 +193,7 @@
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
       "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.26.2",
@@ -203,7 +210,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -357,7 +364,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
       "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
@@ -466,7 +473,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
       "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -476,7 +483,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -525,7 +532,7 @@
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
       "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -1858,22 +1865,28 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dev": true,
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "devOptional": true,
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "devOptional": true
+    },
     "node_modules/@babel/template": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
       "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
@@ -1888,7 +1901,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
       "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
@@ -1907,7 +1920,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
       "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -2176,6 +2189,173 @@
         "node": ">=10.0.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==",
+      "optional": true,
+      "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/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==",
+      "optional": true,
+      "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==",
+      "optional": true,
+      "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==",
+      "devOptional": true,
+      "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/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "devOptional": true
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "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==",
+      "devOptional": true
+    },
+    "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==",
+      "optional": true,
+      "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==",
+      "devOptional": true,
+      "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/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "devOptional": true
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
+      "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "devOptional": true
+    },
+    "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==",
+      "optional": true,
+      "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==",
+      "devOptional": true
+    },
+    "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==",
+      "devOptional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3133,7 +3313,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -3142,7 +3322,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -3175,13 +3355,13 @@
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -3193,6 +3373,248 @@
       "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==",
       "dev": true
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.1.tgz",
+      "integrity": "sha512-2OmnEyoHpj5//dJJpMuxOeLItCCHdf99pjMFfUFdBteCunAK9jW+PwEo4mtdGcLs7P+IgZ+85ypd52eY4AigoQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.3.1.tgz",
+      "integrity": "sha512-nJmWj1PBlwS3t1PnoqcixIsftE+7xrW3Su7f0yrjPw4tVjYrgkhU0hrRp+OlURfZ3ptdSkoBkalee9Bhf1Erfw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.3.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.1.tgz",
+      "integrity": "sha512-ynG9ayhxgCsHJ/dtDcT1v78/r2GwQyP3E0hPz3GdPRl0uFJz/uUTtI5KFYwadXmbC+Uv3bfB8laZ6+Cpzh03gA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.3.1",
+        "@mui/system": "^6.3.1",
+        "@mui/types": "^7.2.21",
+        "@mui/utils": "^6.3.1",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^6.3.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+      "dev": true
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.1.tgz",
+      "integrity": "sha512-g0u7hIUkmXmmrmmf5gdDYv9zdAig0KoxhIQn1JN8IVqApzf/AyRhH3uDGx5mSvs8+a1zb4+0W6LC260SyTTtdQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/utils": "^6.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.1.tgz",
+      "integrity": "sha512-/7CC0d2fIeiUxN5kCCwYu4AWUDd9cCTxWCyo0v/Rnv6s8uk6hWgJC3VLZBoDENBHf/KjqDZuYJ2CR+7hD6QYww==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.1.tgz",
+      "integrity": "sha512-AwqQ3EAIT2np85ki+N15fF0lFXX1iFPqenCzVOSl3QXKy2eifZeGd9dGtt7pGMoFw5dzW4dRGGzRpLAq9rkl7A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.3.1",
+        "@mui/styled-engine": "^6.3.1",
+        "@mui/types": "^7.2.21",
+        "@mui/utils": "^6.3.1",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.21",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz",
+      "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.1.tgz",
+      "integrity": "sha512-sjGjXAngoio6lniQZKJ5zGfjm+LD2wvLwco7FbKe1fu8A7VIFmz2SwkLb+MDPLNX1lE7IscvNNyh1pobtZg2tw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/types": "^7.2.21",
+        "@types/prop-types": "^15.7.14",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+      "dev": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3235,59 +3657,355 @@
       "license": "MIT",
       "optional": true,
       "engines": {
-        "node": ">=12.4.0"
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@oozcitak/dom": {
+      "version": "1.15.10",
+      "resolved": "https://registry.npmjs.org/@oozcitak/dom/-/dom-1.15.10.tgz",
+      "integrity": "sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oozcitak/infra": "1.0.8",
+        "@oozcitak/url": "1.0.4",
+        "@oozcitak/util": "8.3.8"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/@oozcitak/infra": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@oozcitak/infra/-/infra-1.0.8.tgz",
+      "integrity": "sha512-JRAUc9VR6IGHOL7OGF+yrvs0LO8SlqGnPAMqyzOuFZPSZSXI7Xf2O9+awQPSMXgIWGtgUf/dA6Hs6X6ySEaWTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oozcitak/util": "8.3.8"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/@oozcitak/url": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@oozcitak/url/-/url-1.0.4.tgz",
+      "integrity": "sha512-kDcD8y+y3FCSOvnBI6HJgl00viO/nGbQoCINmQ0h98OhnGITrWR3bOGfwYCthgcrV8AnTJz8MzslTQbC3SOAmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oozcitak/infra": "1.0.8",
+        "@oozcitak/util": "8.3.8"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/@oozcitak/util": {
+      "version": "8.3.8",
+      "resolved": "https://registry.npmjs.org/@oozcitak/util/-/util-8.3.8.tgz",
+      "integrity": "sha512-T8TbSnGsxo6TDBJx/Sgv/BlVJL3tshxZP7Aq5R1mSnM5OcHY2dQaxLMu2+E8u3gN0MLOzdjurqN4ZRVuzQycOQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
+      "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.0",
+        "@parcel/watcher-darwin-arm64": "2.5.0",
+        "@parcel/watcher-darwin-x64": "2.5.0",
+        "@parcel/watcher-freebsd-x64": "2.5.0",
+        "@parcel/watcher-linux-arm-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm-musl": "2.5.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm64-musl": "2.5.0",
+        "@parcel/watcher-linux-x64-glibc": "2.5.0",
+        "@parcel/watcher-linux-x64-musl": "2.5.0",
+        "@parcel/watcher-win32-arm64": "2.5.0",
+        "@parcel/watcher-win32-ia32": "2.5.0",
+        "@parcel/watcher-win32-x64": "2.5.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
+      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
+      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
+      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
+      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
+      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
+      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
+      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
+      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
+      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@oozcitak/dom": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@oozcitak/dom/-/dom-1.15.10.tgz",
-      "integrity": "sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==",
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
+      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@oozcitak/infra": "1.0.8",
-        "@oozcitak/url": "1.0.4",
-        "@oozcitak/util": "8.3.8"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=8.0"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@oozcitak/infra": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@oozcitak/infra/-/infra-1.0.8.tgz",
-      "integrity": "sha512-JRAUc9VR6IGHOL7OGF+yrvs0LO8SlqGnPAMqyzOuFZPSZSXI7Xf2O9+awQPSMXgIWGtgUf/dA6Hs6X6ySEaWTg==",
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
+      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@oozcitak/util": "8.3.8"
-      },
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=6.0"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@oozcitak/url": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@oozcitak/url/-/url-1.0.4.tgz",
-      "integrity": "sha512-kDcD8y+y3FCSOvnBI6HJgl00viO/nGbQoCINmQ0h98OhnGITrWR3bOGfwYCthgcrV8AnTJz8MzslTQbC3SOAmw==",
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
+      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@oozcitak/infra": "1.0.8",
-        "@oozcitak/util": "8.3.8"
-      },
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=8.0"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@oozcitak/util": {
-      "version": "8.3.8",
-      "resolved": "https://registry.npmjs.org/@oozcitak/util/-/util-8.3.8.tgz",
-      "integrity": "sha512-T8TbSnGsxo6TDBJx/Sgv/BlVJL3tshxZP7Aq5R1mSnM5OcHY2dQaxLMu2+E8u3gN0MLOzdjurqN4ZRVuzQycOQ==",
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
+      "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=8.0"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/@patternfly/react-core": {
@@ -3377,6 +4095,16 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
@@ -4084,10 +4812,16 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "optional": true
+    },
     "node_modules/@types/prop-types": {
-      "version": "15.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
       "dev": true
     },
     "node_modules/@types/qs": {
@@ -4103,13 +4837,12 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "16.9.23",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.23.tgz",
-      "integrity": "sha512-SsGVT4E7L2wLN3tPYLiF20hmZTPGuzaayVunfgXzUn1x4uHVsKH6QDJQ/TdpHqwsTLd4CwrmQ2vOgxN7gE24gw==",
+      "version": "19.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.6.tgz",
+      "integrity": "sha512-gIlMztcTeDgXCUj0vCBOqEuSEhX//63fW9SZtCJ+agxoQTOklwDfiEMlTWn4mR/C/UK5VHlpwsCsOyf7/hc4lw==",
       "dev": true,
       "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^2.2.0"
+        "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
@@ -4142,6 +4875,15 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -5324,6 +6066,38 @@
         "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==",
+      "optional": true,
+      "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/resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "optional": true,
+      "dependencies": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.12",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
@@ -6353,6 +7127,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6677,7 +7460,7 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
@@ -6796,6 +7579,22 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "optional": true,
+      "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/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -7255,10 +8054,10 @@
       "dev": true
     },
     "node_modules/csstype": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz",
-      "integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==",
-      "dev": true
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true
     },
     "node_modules/cypress": {
       "version": "13.16.1",
@@ -7951,6 +8750,19 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -8042,6 +8854,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -10018,6 +10840,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "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==",
+      "optional": true
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -10439,7 +11267,7 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -10609,6 +11437,21 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "optional": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "optional": true
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -11088,6 +11931,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -13782,7 +14631,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
       "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -13801,7 +14650,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
@@ -14017,7 +14866,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/listr2": {
       "version": "3.14.0",
@@ -15449,6 +16298,13 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -16217,7 +17073,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -16327,7 +17183,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -16363,7 +17219,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -17388,6 +18244,22 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -17991,6 +18863,94 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.83.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.1.tgz",
+      "integrity": "sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.4.tgz",
+      "integrity": "sha512-LavLbgbBGUt3wCiYzhuLLu65+fWXaXLmq7YxivLhEqmiupCFZ5sKUAipK3do6V80YSU0jvSxNhEdT13IXNr3rg==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",
+      "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -19199,6 +20159,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "devOptional": true
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -21365,6 +22331,15 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "optional": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/workspaces/frontend/package.json b/workspaces/frontend/package.json
index f0b15d268..292cf51a0 100644
--- a/workspaces/frontend/package.json
+++ b/workspaces/frontend/package.json
@@ -36,6 +36,9 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.13.5",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
+    "@mui/types": "^7.2.21",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -72,6 +75,8 @@
     "react-router-dom": "^6.26.1",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^6.0.1",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
     "serve": "^14.2.1",
     "style-loader": "^3.3.4",
     "svg-url-loader": "^8.0.0",
@@ -100,6 +105,8 @@
     "sirv-cli": "^2.0.2"
   },
   "optionalDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.12.2",
     "eslint": "^8.57.0",
diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
index 283a3ee6a..54ccb3a62 100644
--- a/workspaces/frontend/src/app/App.tsx
+++ b/workspaces/frontend/src/app/App.tsx
@@ -5,6 +5,7 @@ import {
   Flex,
   Masthead,
   MastheadContent,
+  MastheadMain,
   MastheadToggle,
   Page,
   PageToggleButton,
@@ -16,16 +17,27 @@ import { NamespaceContextProvider } from './context/NamespaceContextProvider';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import { NotebookContextProvider } from './context/NotebookContext';
+import { isMUITheme, Theme } from './const';
 
 const App: React.FC = () => {
+  React.useEffect(() => {
+    // Apply the theme based on the value of STYLE_THEME
+    if (isMUITheme()) {
+      document.documentElement.classList.add(Theme.MUI);
+    } else {
+      document.documentElement.classList.remove(Theme.MUI);
+    }
+  }, []);
+
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
-
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+      </MastheadMain>
       <MastheadContent>
         <Flex>
           <Title headingLevel="h2" size="3xl">
diff --git a/workspaces/frontend/src/app/AppRoutes.tsx b/workspaces/frontend/src/app/AppRoutes.tsx
index a84c00642..d2516daa6 100644
--- a/workspaces/frontend/src/app/AppRoutes.tsx
+++ b/workspaces/frontend/src/app/AppRoutes.tsx
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { NotFound } from './pages/notFound/NotFound';
 import { Debug } from './pages/Debug/Debug';
 import { Workspaces } from './pages/Workspaces/Workspaces';
+import '~/shared/style/MUI-theme.scss';
 
 export const isNavDataGroup = (navItem: NavDataItem): navItem is NavDataGroup =>
   'children' in navItem;
diff --git a/workspaces/frontend/src/app/NavSidebar.tsx b/workspaces/frontend/src/app/NavSidebar.tsx
index 651c5d400..c1abaa338 100644
--- a/workspaces/frontend/src/app/NavSidebar.tsx
+++ b/workspaces/frontend/src/app/NavSidebar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import {
+  Brand,
   Nav,
   NavExpandable,
   NavItem,
@@ -42,11 +43,19 @@ const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
 
 const NavSidebar: React.FC = () => {
   const navData = useNavData();
+
   return (
     <PageSidebar>
       <PageSidebarBody>
         <Nav id="nav-primary-simple">
           <NavList id="nav-list-simple">
+            <NavItem>
+              <Brand
+                className="kubeflow_brand"
+                src={`${window.location.origin}/images/logo.svg`}
+                alt="Kubeflow Logo"
+              />
+            </NavItem>
             {navData.map((item) =>
               isNavDataGroup(item) ? (
                 <NavGroup key={item.label} item={item} />
diff --git a/workspaces/frontend/src/app/const.ts b/workspaces/frontend/src/app/const.ts
index 35826e7d7..c0deb91b2 100644
--- a/workspaces/frontend/src/app/const.ts
+++ b/workspaces/frontend/src/app/const.ts
@@ -1 +1,10 @@
 export const BFF_API_VERSION = 'v1';
+
+export enum Theme {
+  Default = 'default-theme',
+  MUI = 'mui-theme',
+  // Future themes can be added here
+}
+
+export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
+const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
index 7f1f73765..d8b1e15a6 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -7,7 +7,6 @@ import {
   TimestampTooltipVariant,
   Timestamp,
   Label,
-  Title,
   PaginationVariant,
   Pagination,
   Button,
@@ -372,8 +371,11 @@ export const Workspaces: React.FunctionComponent = () => {
       <DrawerContent panelContent={workspaceDetailsContent}>
         <DrawerContentBody>
           <PageSection isFilled>
-            <Title headingLevel="h1">Kubeflow Workspaces</Title>
-            <p>View your existing workspaces or create new workspaces.</p>
+            <Content>
+              <h1>Kubeflow Workspaces</h1>
+              <p>View your existing workspaces or create new workspaces.</p>
+            </Content>
+            <br />
             <Content style={{ display: 'flex', alignItems: 'flex-start', columnGap: '20px' }}>
               <Filter id="filter-workspaces" onFilter={onFilter} columnNames={filterableColumns} />
               <Button variant="primary" ouiaId="Primary">
@@ -443,6 +445,7 @@ export const Workspaces: React.FunctionComponent = () => {
               perPage={perPage}
               page={page}
               variant={PaginationVariant.bottom}
+              isCompact
               onSetPage={onSetPage}
               onPerPageSelect={onPerPageSelect}
             />
diff --git a/workspaces/frontend/src/images/logo.svg b/workspaces/frontend/src/images/logo.svg
index fb06122ef..c3c0f4aba 100644
--- a/workspaces/frontend/src/images/logo.svg
+++ b/workspaces/frontend/src/images/logo.svg
@@ -11,7 +11,7 @@
         <g id="collapsed-nav/expanded" transform="translate(-24.000000, -20.000000)">
             <g id="Group-14" transform="translate(16.000000, 20.000000)">
                 <g id="Group-3" transform="translate(8.000000, 0.000000)">
-                    <g id="Group-31" fill="#000000">
+                    <g id="Group-31" fill="#FFFFFF">
                         <path d="M11.9903293,24.9097562 L22.8099048,11.1031534 C22.9995344,10.8613757 23.2778836,10.7054392 23.5831534,10.6702222 C23.8894392,10.634836 24.1952169,10.7232169 24.434963,10.9155556 L29.8558207,15.2647539 C30.2865972,15.6103693 30.9159872,15.5413327 31.2616027,15.1105562 C31.4602174,14.8630021 31.529525,14.5358631 31.4483615,14.2290353 L29.9266279,8.47632368 C29.7929674,7.97103771 29.2927373,7.65391298 28.7787201,7.74859865 L10.4890817,11.1176816 C9.99838761,11.208071 9.64940365,11.6463364 9.67119515,12.1448101 L10.2041773,24.3366134 C10.2282982,24.8883711 10.6951401,25.3161053 11.2468978,25.2919844 C11.5386295,25.279231 11.8102122,25.1395993 11.9903293,24.9097562 Z" id="Fill-1"></path>
                         <path d="M20.9180516,28.9748596 L17.8602219,26.43217 C17.0109171,25.725944 15.7499103,25.8419324 15.0436843,26.6912372 C15.0249589,26.7137564 15.0067304,26.7366841 14.9890119,26.7600039 L12.4245942,30.1351087 C12.0904706,30.5748584 12.1760976,31.2022068 12.6158473,31.5363304 C12.8282888,31.6977442 13.0964249,31.7675698 13.3606122,31.7302754 L20.4184645,30.7339434 C20.9653272,30.6567447 21.3460652,30.150843 21.2688665,29.6039803 C21.2341389,29.3579755 21.1090804,29.1337066 20.9180516,28.9748596 Z" id="Fill-2"></path>
                         <path d="M19.1700062,23.1674552 L24.1051205,26.9679857 C24.5286802,27.2941689 25.133879,27.2295254 25.4789872,26.8212381 L30.5440949,20.828859 C30.9006188,20.4070661 30.8477078,19.7761158 30.425915,19.419592 C30.4143273,19.4097974 30.4025182,19.4002678 30.3904969,19.3910106 L25.40438,15.5513812 C24.9783089,15.2232791 24.3690491,15.290886 24.0252734,15.7044145 L19.0111683,21.7358925 C18.6581084,22.1605891 18.7161813,22.7910853 19.1408779,23.1441452 C19.1504415,23.1520956 19.1601526,23.159867 19.1700062,23.1674552 Z" id="Fill-3"></path>
@@ -22,22 +22,22 @@
                     <g id="Group-20" transform="translate(46.000000, 8.000000)">
                         <g id="Group-12">
                             <g id="Clip-8"></g>
-                            <polyline id="Fill-7" fill="#000000" points="11.4001509 1.22837736 8.17962264 1.22837736 2.69886792 7.49464151 2.69886792 1.22837736 0 1.22837736 0 15.7077736 2.69886792 15.7077736 2.69886792 11.1375094 3.95320755 9.70898113 8.54701887 15.7077736 11.802566 15.7077736 5.70475472 7.68060377 11.4001509 1.22837736"></polyline>
-                            <path d="M18.4618868,12.3356981 C18.4618868,12.7175849 18.3133585,12.9820377 17.9806792,13.1927547 C17.5855094,13.4430189 17.125434,13.5643774 16.5741887,13.5643774 C16.0283774,13.5643774 15.5695094,13.442717 15.170717,13.1918491 C14.8359245,12.9811321 14.6864906,12.7169811 14.6864906,12.3356981 L14.6864906,5.09222642 L12.0818113,5.09222642 L12.0818113,12.2756226 C12.0818113,13.456 12.5663396,14.3915472 13.5224151,15.056 C14.4238491,15.6821132 15.4490566,16 16.5693585,16 C17.690566,16 18.7175849,15.6787925 19.6223396,15.0457358 C20.5805283,14.3749434 21.066566,13.442717 21.066566,12.2756226 L21.066566,5.09222642 L18.4618868,5.09222642 L18.4618868,12.3356981" id="Fill-9" fill="#000000" mask="url(#mask-2)"></path>
-                            <path d="M26.3963774,13.2724528 L25.5052075,13.2724528 L25.5052075,7.55532075 C26.1575849,7.34279245 26.933434,7.23562264 27.8167547,7.23562264 C28.4718491,7.23562264 28.9189434,7.47018868 29.2241509,7.97433962 C29.568,8.54218868 29.7424906,9.22173585 29.7424906,9.99335849 C29.7424906,11.1746415 29.4895094,12.0256604 28.9904906,12.522566 C28.4911698,13.0203774 27.6184151,13.2724528 26.3963774,13.2724528 Z M31.3772075,6.57750943 C31.0315472,6.03713208 30.5461132,5.60060377 29.933283,5.27939623 C29.3264906,4.96120755 28.6209811,4.8 27.8333585,4.8 C27.0943396,4.80543396 26.3136604,4.92196226 25.5052075,5.14807547 L25.5052075,0.24845283 L22.9005283,0.24845283 L22.9005283,15.7077736 L26.3710189,15.7077736 C28.3915472,15.7077736 29.9091321,15.2181132 30.8809057,14.2526792 C31.8538868,13.2860377 32.3471698,11.8723019 32.3471698,10.0504151 C32.3471698,9.43335849 32.2671698,8.82324528 32.109283,8.23818868 C31.9495849,7.64679245 31.7035472,7.088 31.3772075,6.57750943 Z" id="Fill-10" fill="#000000" mask="url(#mask-2)"></path>
-                            <path d="M38.4144906,7.23562264 C39.0007547,7.23562264 39.4140377,7.43667925 39.714717,7.86837736 C39.9749434,8.24241509 40.1603019,8.70822642 40.2689811,9.25796226 L36.1871698,9.25796226 C36.3178868,8.71215094 36.5500377,8.26626415 36.890566,7.90460377 C37.3144151,7.45418868 37.8128302,7.23562264 38.4144906,7.23562264 Z M42.930717,10.9747925 C42.930717,8.15788679 42.1470189,4.8 38.4144906,4.8 C36.9261887,4.8 35.7080755,5.32075472 34.7933585,6.3474717 C33.8931321,7.35788679 33.4366792,8.71486792 33.4366792,10.3806792 C33.4366792,11.1353962 33.5435472,11.8463396 33.754566,12.4929811 C33.9689057,13.1495849 34.2997736,13.7497358 34.7375094,14.2762264 C35.1870189,14.8169057 35.7862642,15.2455849 36.5189434,15.5495849 C37.2380377,15.8484528 38.0818113,16 39.0300377,16 C40.101434,15.9927547 41.1604528,15.792 42.1775094,15.4022642 L42.4875472,15.2839245 L42.4875472,12.6807547 L41.8031698,12.9965283 C40.9853585,13.3735849 39.9815849,13.5643774 38.8196226,13.5643774 C37.893434,13.5643774 37.234717,13.314717 36.8060377,12.8006038 C36.4630943,12.3897358 36.2366792,11.9468679 36.1207547,11.4575094 L42.930717,11.4575094 L42.930717,10.9747925 Z" id="Fill-11" fill="#000000" mask="url(#mask-2)"></path>
+                            <polyline id="Fill-7" fill="#FFFFFF" points="11.4001509 1.22837736 8.17962264 1.22837736 2.69886792 7.49464151 2.69886792 1.22837736 0 1.22837736 0 15.7077736 2.69886792 15.7077736 2.69886792 11.1375094 3.95320755 9.70898113 8.54701887 15.7077736 11.802566 15.7077736 5.70475472 7.68060377 11.4001509 1.22837736"></polyline>
+                            <path d="M18.4618868,12.3356981 C18.4618868,12.7175849 18.3133585,12.9820377 17.9806792,13.1927547 C17.5855094,13.4430189 17.125434,13.5643774 16.5741887,13.5643774 C16.0283774,13.5643774 15.5695094,13.442717 15.170717,13.1918491 C14.8359245,12.9811321 14.6864906,12.7169811 14.6864906,12.3356981 L14.6864906,5.09222642 L12.0818113,5.09222642 L12.0818113,12.2756226 C12.0818113,13.456 12.5663396,14.3915472 13.5224151,15.056 C14.4238491,15.6821132 15.4490566,16 16.5693585,16 C17.690566,16 18.7175849,15.6787925 19.6223396,15.0457358 C20.5805283,14.3749434 21.066566,13.442717 21.066566,12.2756226 L21.066566,5.09222642 L18.4618868,5.09222642 L18.4618868,12.3356981" id="Fill-9" fill="#FFFFFF" mask="url(#mask-2)"></path>
+                            <path d="M26.3963774,13.2724528 L25.5052075,13.2724528 L25.5052075,7.55532075 C26.1575849,7.34279245 26.933434,7.23562264 27.8167547,7.23562264 C28.4718491,7.23562264 28.9189434,7.47018868 29.2241509,7.97433962 C29.568,8.54218868 29.7424906,9.22173585 29.7424906,9.99335849 C29.7424906,11.1746415 29.4895094,12.0256604 28.9904906,12.522566 C28.4911698,13.0203774 27.6184151,13.2724528 26.3963774,13.2724528 Z M31.3772075,6.57750943 C31.0315472,6.03713208 30.5461132,5.60060377 29.933283,5.27939623 C29.3264906,4.96120755 28.6209811,4.8 27.8333585,4.8 C27.0943396,4.80543396 26.3136604,4.92196226 25.5052075,5.14807547 L25.5052075,0.24845283 L22.9005283,0.24845283 L22.9005283,15.7077736 L26.3710189,15.7077736 C28.3915472,15.7077736 29.9091321,15.2181132 30.8809057,14.2526792 C31.8538868,13.2860377 32.3471698,11.8723019 32.3471698,10.0504151 C32.3471698,9.43335849 32.2671698,8.82324528 32.109283,8.23818868 C31.9495849,7.64679245 31.7035472,7.088 31.3772075,6.57750943 Z" id="Fill-10" fill="#FFFFFF" mask="url(#mask-2)"></path>
+                            <path d="M38.4144906,7.23562264 C39.0007547,7.23562264 39.4140377,7.43667925 39.714717,7.86837736 C39.9749434,8.24241509 40.1603019,8.70822642 40.2689811,9.25796226 L36.1871698,9.25796226 C36.3178868,8.71215094 36.5500377,8.26626415 36.890566,7.90460377 C37.3144151,7.45418868 37.8128302,7.23562264 38.4144906,7.23562264 Z M42.930717,10.9747925 C42.930717,8.15788679 42.1470189,4.8 38.4144906,4.8 C36.9261887,4.8 35.7080755,5.32075472 34.7933585,6.3474717 C33.8931321,7.35788679 33.4366792,8.71486792 33.4366792,10.3806792 C33.4366792,11.1353962 33.5435472,11.8463396 33.754566,12.4929811 C33.9689057,13.1495849 34.2997736,13.7497358 34.7375094,14.2762264 C35.1870189,14.8169057 35.7862642,15.2455849 36.5189434,15.5495849 C37.2380377,15.8484528 38.0818113,16 39.0300377,16 C40.101434,15.9927547 41.1604528,15.792 42.1775094,15.4022642 L42.4875472,15.2839245 L42.4875472,12.6807547 L41.8031698,12.9965283 C40.9853585,13.3735849 39.9815849,13.5643774 38.8196226,13.5643774 C37.893434,13.5643774 37.234717,13.314717 36.8060377,12.8006038 C36.4630943,12.3897358 36.2366792,11.9468679 36.1207547,11.4575094 L42.930717,11.4575094 L42.930717,10.9747925 Z" id="Fill-11" fill="#FFFFFF" mask="url(#mask-2)"></path>
                         </g>
-                        <path d="M46.3308679,1.1154717 C45.7729811,1.66701887 45.4901132,2.39667925 45.4901132,3.2845283 L45.4901132,5.09222642 L43.9918491,5.09222642 L43.9918491,7.52754717 L45.4901132,7.52754717 L45.4901132,15.7077736 L48.0947925,15.7077736 L48.0947925,7.52754717 L50.6487547,7.52754717 L50.6487547,5.09222642 L48.0947925,5.09222642 L48.0947925,4.14249057 C48.0947925,3.30716981 48.2460377,3.02550943 48.3112453,2.94339623 C48.3526038,2.89116981 48.5421887,2.72120755 49.2519245,2.72120755 L51.242566,2.72120755 L51.242566,0.286188679 L48.3852075,0.286188679 C47.578566,0.286188679 46.8869434,0.565433962 46.3308679,1.1154717" id="Fill-13" fill="#000000"></path>
+                        <path d="M46.3308679,1.1154717 C45.7729811,1.66701887 45.4901132,2.39667925 45.4901132,3.2845283 L45.4901132,5.09222642 L43.9918491,5.09222642 L43.9918491,7.52754717 L45.4901132,7.52754717 L45.4901132,15.7077736 L48.0947925,15.7077736 L48.0947925,7.52754717 L50.6487547,7.52754717 L50.6487547,5.09222642 L48.0947925,5.09222642 L48.0947925,4.14249057 C48.0947925,3.30716981 48.2460377,3.02550943 48.3112453,2.94339623 C48.3526038,2.89116981 48.5421887,2.72120755 49.2519245,2.72120755 L51.242566,2.72120755 L51.242566,0.286188679 L48.3852075,0.286188679 C47.578566,0.286188679 46.8869434,0.565433962 46.3308679,1.1154717" id="Fill-13" fill="#FFFFFF"></path>
                         <g id="Group-17" transform="translate(52.226415, 0.000000)">
 
                             <g id="Clip-15"></g>
-                            <polygon id="Fill-14" fill="#000000" points="0.19954717 15.7077736 2.8045283 15.7077736 2.8045283 0.267471698 0.19954717 0.267471698"></polygon>
-                            <path d="M10.1862642,13.5643774 C9.25222642,13.5643774 8.52981132,13.2721509 7.9770566,12.6698868 C7.41373585,12.0561509 7.13962264,11.3138113 7.13962264,10.4 C7.13962264,9.48649057 7.41373585,8.74384906 7.97735849,8.12981132 C8.52981132,7.52784906 9.25222642,7.23562264 10.1862642,7.23562264 C11.1088302,7.23562264 11.8288302,7.52845283 12.3876226,8.13162264 C12.9566792,8.74535849 13.2332075,9.48739623 13.2332075,10.4 C13.2332075,11.3126038 12.9566792,12.0543396 12.3876226,12.6683774 C11.8288302,13.2715472 11.1088302,13.5643774 10.1862642,13.5643774 Z M10.1862642,4.8 C8.54701887,4.8 7.1794717,5.34671698 6.12256604,6.42445283 C5.06898113,7.49977358 4.53464151,8.83713208 4.53464151,10.4 C4.53464151,11.9628679 5.06716981,13.2999245 6.11743396,14.3749434 C7.17101887,15.4529811 8.53977358,16 10.1862642,16 C11.8113208,16 13.1749434,15.4499623 14.2384906,14.3661887 C15.2999245,13.2848302 15.8381887,11.9501887 15.8381887,10.4 C15.8381887,8.85011321 15.2999245,7.51577358 14.2384906,6.43350943 C13.1746415,5.34973585 11.8110189,4.8 10.1862642,4.8 Z" id="Fill-16" fill="#000000" mask="url(#mask-4)"></path>
+                            <polygon id="Fill-14" fill="#FFFFFF" points="0.19954717 15.7077736 2.8045283 15.7077736 2.8045283 0.267471698 0.19954717 0.267471698"></polygon>
+                            <path d="M10.1862642,13.5643774 C9.25222642,13.5643774 8.52981132,13.2721509 7.9770566,12.6698868 C7.41373585,12.0561509 7.13962264,11.3138113 7.13962264,10.4 C7.13962264,9.48649057 7.41373585,8.74384906 7.97735849,8.12981132 C8.52981132,7.52784906 9.25222642,7.23562264 10.1862642,7.23562264 C11.1088302,7.23562264 11.8288302,7.52845283 12.3876226,8.13162264 C12.9566792,8.74535849 13.2332075,9.48739623 13.2332075,10.4 C13.2332075,11.3126038 12.9566792,12.0543396 12.3876226,12.6683774 C11.8288302,13.2715472 11.1088302,13.5643774 10.1862642,13.5643774 Z M10.1862642,4.8 C8.54701887,4.8 7.1794717,5.34671698 6.12256604,6.42445283 C5.06898113,7.49977358 4.53464151,8.83713208 4.53464151,10.4 C4.53464151,11.9628679 5.06716981,13.2999245 6.11743396,14.3749434 C7.17101887,15.4529811 8.53977358,16 10.1862642,16 C11.8113208,16 13.1749434,15.4499623 14.2384906,14.3661887 C15.2999245,13.2848302 15.8381887,11.9501887 15.8381887,10.4 C15.8381887,8.85011321 15.2999245,7.51577358 14.2384906,6.43350943 C13.1746415,5.34973585 11.8110189,4.8 10.1862642,4.8 Z" id="Fill-16" fill="#FFFFFF" mask="url(#mask-4)"></path>
                         </g>
-                        <polyline id="Fill-18" fill="#000000" points="80.8470943 5.09222642 78.9838491 11.4943396 77.1287547 5.09222642 74.7882264 5.09222642 72.9101887 11.4910189 71.0638491 5.09222642 68.3100377 5.09222642 71.6392453 15.7077736 74.3142642 15.7077736 76.0009057 9.61237736 77.6944906 15.7077736 80.2629434 15.7077736 83.6006038 5.09222642 80.8470943 5.09222642"></polyline>
+                        <polyline id="Fill-18" fill="#FFFFFF" points="80.8470943 5.09222642 78.9838491 11.4943396 77.1287547 5.09222642 74.7882264 5.09222642 72.9101887 11.4910189 71.0638491 5.09222642 68.3100377 5.09222642 71.6392453 15.7077736 74.3142642 15.7077736 76.0009057 9.61237736 77.6944906 15.7077736 80.2629434 15.7077736 83.6006038 5.09222642 80.8470943 5.09222642"></polyline>
                     </g>
                 </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/workspaces/frontend/src/index.html b/workspaces/frontend/src/index.html
index 964ea9332..d6b28baab 100644
--- a/workspaces/frontend/src/index.html
+++ b/workspaces/frontend/src/index.html
@@ -2,6 +2,9 @@
 <html lang="en-US">
 
 <head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   <meta charset="utf-8">
   <title>Kubeflow Workspaces</title>
   <meta content="Kubeflow Workspaces" id="appName" name="application-name">
diff --git a/workspaces/frontend/src/index.tsx b/workspaces/frontend/src/index.tsx
index 0d1cb394e..7bb65e462 100644
--- a/workspaces/frontend/src/index.tsx
+++ b/workspaces/frontend/src/index.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import App from './app/App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const theme = createTheme({ cssVariables: true });
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 
 root.render(
   <React.StrictMode>
     <Router>
-      <App />
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
     </Router>
   </React.StrictMode>,
 );
diff --git a/workspaces/frontend/src/shared/style/MUI-theme.scss b/workspaces/frontend/src/shared/style/MUI-theme.scss
new file mode 100644
index 000000000..96f24c230
--- /dev/null
+++ b/workspaces/frontend/src/shared/style/MUI-theme.scss
@@ -0,0 +1,821 @@
+.mui-theme:root {
+  // Alert
+  --mui-alert--BoxShadow: none;
+  --mui-alert-warning-text: #663c00;
+  --mui-alert-warning-font-weight: 400;
+  --mui-alert--PaddingBlockStart: 6px;
+  --mui-alert--PaddingBlockEnd: 6px;
+  --mui-alert--PaddingInlineStart: 16px;
+  --mui-alert--PaddingInlineEnd: 16px;
+  --mui-alert__icon--MarginInlineEnd: 12px;
+  --mui-alert__icon--MarginBlockStart: 7px;
+  --mui-alert__icon--MarginBlockStart: 7px;
+  --mui-alert__icon--MarginBlockEnd: 7px;
+  --mui-alert__icon--FontSize: 22px;
+
+  // Button
+  --mui-button-font-weight: 500;
+  --mui-button--hover--BorderWidth: 1px;
+  --mui-button--PaddingBlockStart: 6px;
+  --mui-button--PaddingBlockEnd: 6px;
+  --mui-button--PaddingInlineStart: 16px;
+  --mui-button--PaddingInlineEnd: 16px;
+  --mui-button--LineHeight: 1.75;
+  --mui-link-underlineColor: rgba(33, 150, 243, 0.4);
+
+  // Menu item
+  --mui-menu__item--PaddingBlockStart: 6px;
+  --mui-menu__item--PaddingBlockEnd: 6px;
+  --mui-menu__item--PaddingInlineStart: 16px;
+  --mui-menu__item--PaddingInlineEnd: 16px;
+  --mui-menu__item--FontSize: 1rem;
+
+  // Menu toggle
+  --mui-menu-toggle__toggle-icon--MinHeight: auto;
+  --mui-menu-toggle__controls--MinWidth: 0;
+  --mui-menu-toggle--expanded--BackgroundColor: none;
+  --mui-menu-toggle--expanded--BorderColor: none;
+  --mui-menu-toggle--LineHeight: 1.75;
+  --mui-menu-toggle--PaddingBlockStart: 6px;
+  --mui-menu-toggle--PaddingBlockEnd: 6px;
+  --mui-menu-toggle--PaddingInlineStart: 16px;
+  --mui-menu-toggle--PaddingInlineEnd: 16px;
+  --mui-menu-toggle--ColumnGap: 0;
+  --mui-menu-toggle--expanded--Color: black;
+  --mui-menu-toggle--hover--BorderColor: none;
+  --mui-menu-toggle--BorderColor: none;
+  --mui-menu-toggle--PaddingInlineStart: 10px;
+  --mui-menu-toggle--PaddingInlineEnd: 10px;
+
+  // Radio
+  --mui-radio--margin: 10px 0;
+  --mui-radio-PaddingLeft: 30px;
+  --mui-radio__label--Width: 20px;
+  --mui-radio__label--Height: 20px;
+  --mui-radio__input--Width: 10px;
+  --mui-radio__input--Height: 10px;
+
+  // Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51 
+  --kf-central-primary-background-color: #0a3b71;
+  --kf-central-sidebar-default-color: #ffffff90;
+  --kf-central-app-drawer-width: 240px;
+  --kf-central-app-bar-height: 24px;
+
+  // Table
+  --mui-table__button--BackgroundColor: none;
+  --mui-table__button--hover--BackgroundColor: none;
+  --mui-table__button--Color: var(--pf-v6-c-table--cell--Color);
+  --mui-table__button--PaddingBlockStart: 0;
+  --mui-table__button--PaddingBlockEnd: 0;
+  --mui-table__button--PaddingInlineStart: 0;
+  --mui-table__button--PaddingInlineEnd: 0;
+  --mui-table--cell--PaddingInlineStart: 16px;
+  --mui-table--cell--PaddingInlineEnd: 16px;
+  --mui-table--cell--PaddingBlockStart: 16px;
+  --mui-table--cell--PaddingBlockEnd: 16px;
+  --mui-table--cell--first-last-child--PaddingInline: 0px;
+  --mui-table__thead--cell--FontSize: 14px;
+  --mui-table__sort-indicator--MarginInlineStart: 4px;
+
+  letter-spacing: 0.01071em;
+
+  // Tabs
+  --mui-tabs__link--hover--BackgroundColor: transparent;
+  --mui-tabs__item--PaddingBlockStart: 0;
+  --mui-tabs__item--PaddingBlockEnd: 0;
+  --mui-tabs__item--PaddingInlineStart: 0;
+  --mui-tabs__item--PaddingInlineEnd: 0;
+  --mui-tabs__link--PaddingBlockStart: 12px;
+  --mui-tabs__link--PaddingBlockEnd: 12px;
+  --mui-tabs__link--PaddingInlineStart: 16px;
+  --mui-tabs__link--PaddingInlineEnd: 16px;
+  --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
+  --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
+  --mui-tabs__link--FontSize: 0.875rem;
+
+  --mui-text-transform: uppercase;
+
+  --mui-spacing-4px: calc(0.5 * var(--mui-spacing));
+  --mui-spacing-8px: var(--mui-spacing);
+  --mui-spacing-16px: calc(2 * var(--mui-spacing));
+
+  --pf-t--global--border--width--box--status--default: 1px;
+  --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
+  --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius);
+  --pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
+
+  --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
+  --pf-t--global--text--color--inverse: var(--mui-palette-common-white);
+
+  --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--300: Roboto, Courier, monospace;
+}
+
+.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
+  --pf-v6-c-button--BorderRadius: 50%;
+  --pf-v6-c-button--PaddingInlineStart: none;
+  --pf-v6-c-button--PaddingInlineEnd: none;
+}
+
+.mui-theme .pf-v6-c-alert {
+  --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
+  --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
+  --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight);
+  --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
+  --pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
+  --pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow);
+  --pf-v6-c-alert--PaddingBlockStart: var(--mui-alert--PaddingBlockStart);
+  --pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd);
+  --pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart);
+  --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
+}
+
+.mui-theme .pf-v6-c-alert__title {
+  padding-block: var(--mui-spacing);
+}
+
+.mui-theme .pf-v6-c-alert__icon {
+  --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
+}
+
+.mui-theme .pf-v6-c-brand.kubeflow_brand {
+  padding: var(--pf-t--global--spacer--md);
+}
+
+.mui-theme .pf-v6-c-button {
+  --pf-v6-c-button--FontWeight: var(--mui-button-font-weight);
+  --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
+  --pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
+  --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
+  --pf-v6-c-button--m-plain--BorderRadius: 50%;
+
+  text-transform: var(--mui-text-transform);
+  letter-spacing: 0.02857em;
+}
+
+.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
+  text-decoration-color: var(--mui-link-underlineColor);
+
+  &:hover {
+    text-decoration-color: initial;
+  }
+}
+
+.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
+  // Keep icon color the same on hover
+  color: inherit;
+}
+
+.mui-theme .pf-v6-c-button.pf-m-secondary:hover {
+  --pf-v6-c-button--BorderWidth: var(--mui-button--hover--BorderWidth);
+  --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
+}
+
+.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
+  align-content: center;
+}
+
+.mui-theme .pf-v6-c-form__group {
+  position: relative;
+}
+
+.mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
+.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
+  padding-block-start: 10px;
+}
+
+.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
+  color: var(--mui-palette-text-disabled);
+}
+
+.mui-theme .pf-v6-c-form__helper-text.path-helper-text {
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+}
+
+.mui-theme .pf-v6-c-form__section-title {
+  --pf-v6-c-form__section-title--MarginBlockStart: 0px;
+  --pf-v6-c-form__section-title--MarginInlineStart: 0px;
+  --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
+  --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
+}
+
+.mui-theme .pf-v6-c-form__label {
+  position: absolute;
+  top: 35%;
+  left: 12px;
+  font-size: 14px;
+  color: var(--mui-palette-grey-600);
+  pointer-events: none;
+  transition: all 0.2s ease;
+  transform-origin: left center;
+  transform: translateY(-50%) scale(0.75);
+  background-color: var(--mui-palette-common-white);
+  padding: 0 4px;
+  z-index: 1;
+  --pf-v6-c-form__label-required--Color: currentColor;
+}
+
+.mui-theme .pf-v6-c-form-control input::placeholder {
+  --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
+}
+
+.mui-theme .pf-v6-c-form-control {
+  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
+  --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
+}
+
+.mui-theme .pf-v6-c-form-control {
+  // Resize is disabled in MUI.
+  resize: none;
+  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
+  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
+}
+
+
+.mui-theme .pf-v6-c-form__section {
+  --pf-v6-c-form__section--Gap: 0px;
+}
+
+.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
+  padding: 8px 14px;
+}
+
+.mui-theme .tr-fieldset-wrapper .form-fieldset {
+  inset: 0px;
+}
+
+.mui-theme .pf-v6-c-form-control {
+  // Using CSS property here since PF vars for input padding do not exist.
+  // PF can add custom vars for padding on text input, text area, and form select
+
+  --pf-v6-c-form-control--PaddingBlockStart: 16.5px;
+  --pf-v6-c-form-control--PaddingBlockEnd: 16.5px;
+  --pf-v6-c-form-control--PaddingInlineStart: 14px;
+  --pf-v6-c-form-control--PaddingInlineEnd: 14px;
+}
+
+.mui-theme .pf-v6-c-text-input-group {
+  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
+  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
+}
+
+.mui-theme .pf-v6-c-text-input-group {
+  --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
+}
+
+.mui-theme .pf-v6-c-form__group-control textarea {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.mui-theme .pf-v6-c-form-control> :is(input, select, textarea):focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.mui-theme .pf-v6-c-text-input-group__text-input:focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.form-fieldset-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.pf-v6-c-form__group .form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.form-fieldset-wrapper:hover .form-fieldset {
+  border-color: black;
+}
+
+.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled~.form-fieldset {
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.form-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: 2px;
+  padding: 7px 7px;
+}
+
+.form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0 5px 0 5px;
+  font-size: 0.75em;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.form-fieldset-wrapper:focus-within {
+  color: var(--mui-palette-primary-main);
+}
+
+.form-fieldset-wrapper,
+.toolbar-fieldset-wrapper,
+.tr-fieldset-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.form-fieldset-wrapper .form-fieldset:hover {
+  border-color: var(--mui-palette-common-black);
+}
+
+.toolbar-fieldset-wrapper:focus-within .form-fieldset,
+.tr-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: 2px;
+  padding: 7px 7px;
+}
+
+.toolbar-fieldset-wrapper .form-fieldset,
+.form-fieldset {
+  text-align: left;
+  position: absolute;
+  inset: -5px 0px 0px;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+  border-radius: var(--mui-shape-borderRadius);
+}
+
+.toolbar-fieldset-wrapper .form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0 5px 0 5px;
+  font-size: 0.75em;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.toolbar-fieldset-wrapper .form-fieldset-legend span {
+  font-weight: var(--pf-t--global--font--weight--200);
+}
+
+.toolbar-fieldset-wrapper:focus-within {
+  color: var(--mui-palette-primary-main);
+}
+
+.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
+  color: var(--mui-palette-primary-main);
+}
+
+.tr-fieldset-wrapper .pf-v6-c-form-control,
+.toolbar-fieldset-wrapper .pf-v6-c-form-control,
+.form-fieldset-wrapper .pf-v6-c-form-control {
+
+  --pf-v6-c-form-control--before--BorderColor: transparent !important;
+  --pf-v6-c-form-control--after--BorderColor: transparent !important;
+}
+
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within+.pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown)+.pf-v6-c-form__label {
+  color: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
+  --pf-v6-c-form-control--after--BorderWidth: 2px;
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
+  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.
+
+  /* Change color of the label when the input is focused */
+  color: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-menu {
+  --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
+  --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
+  --pf-v6-c-menu--PaddingBlockStart: var(--mui-spacing);
+  --pf-v6-c-menu--PaddingBlockEnd: var(--mui-spacing);
+  --pf-v6-c-menu--PaddingInlineStart: var(--mui-spacing);
+  --pf-v6-c-menu--PaddingInlineEnd: var(--mui-spacing);
+  --pf-v6-c-menu__item--PaddingBlockStart: var(--mui-menu__item--PaddingBlockStart);
+  --pf-v6-c-menu__item--PaddingBlockEnd: var(--mui-menu__item--PaddingBlockEnd);
+  --pf-v6-c-menu__item--PaddingInlineStart: var(--mui-menu__item--PaddingInlineStart);
+  --pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd);
+  --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
+}
+
+.mui-theme .pf-v6-c-menu-toggle {
+  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
+  --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
+  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
+  --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
+  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
+  --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
+  --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark);
+
+  text-transform: var(--mui-text-transform);
+  font-weight: var(--mui-button-font-weight);
+  letter-spacing: 0.02857em;
+}
+
+.mui-theme .pf-v6-c-menu-toggle__button {
+  text-transform: var(--mui-text-transform);
+  font-weight: var(--mui-button-font-weight);
+  letter-spacing: 0.02857em;
+  align-self: stretch;
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
+  --pf-v6-c-menu-toggle--BorderRadius: 50%;
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
+  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-primary-dark);
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
+  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
+}
+
+.mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
+  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4);
+  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
+}
+
+.mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
+  vertical-align: revert;
+}
+
+.mui-theme .pf-v6-c-menu-toggle__toggle-icon {
+  font-size: 20px;
+}
+
+.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
+  margin-right: calc(var(--mui-spacing) * -1 + 4px);
+  margin-left: var(--mui-spacing);
+}
+
+.mui-theme .pf-v6-c-menu-toggle__icon {
+  display: block;
+}
+
+.mui-theme .pf-v6-c-nav {
+  padding-block-start: 0;
+}
+
+.mui-theme .pf-v6-c-nav__link {
+  --pf-v6-c-nav__link--BorderRadius: 0px;
+  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
+  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
+
+  &.active {
+    border-left: 3px solid var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
+  }
+
+  &.pf-v6-c-brand {
+    --pf-v6-c-nav__link--hover--BackgroundColor: none;
+  }
+}
+
+.mui-theme .pf-v6-c-nav__link:focus {
+  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+}
+
+.mui-theme .pf-v6-c-nav__list {
+  row-gap: none;
+}
+
+.mui-theme .pf-v6-radio {
+  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-radio {
+  display: flex;
+  align-items: center;
+  margin: var(--mui-radio--margin);
+}
+
+.mui-theme .pf-v6-c-radio__input {
+  /* Hide default radio button */
+  display: none;
+}
+
+.mui-theme .pf-v6-c-radio__label {
+  --pf-v6-c-radio__label--FontSize: 16px;
+  padding-left: var(--mui-radio-PaddingLeft);
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Custom radio circle */
+.mui-theme .pf-v6-c-radio__label::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--mui-radio__label--Width);
+  height: var(--mui-radio__label--Height);
+  border: 2px solid var(--mui-palette-primary-main);
+  border-radius: 50%;
+  background: var(--mui-palette-common-white);
+}
+
+/* When radio is checked */
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::before {
+  background: var(--mui-palette-common-white);
+  border-color: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-page__sidebar {
+  --pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
+}
+
+.mui-theme .pf-v6-c-page__sidebar-body {
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
+
+}
+
+/* Inner dot for checked state */
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  /* Center the dot */
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--mui-radio__input--Width);
+  /* Size of inner dot */
+  height: var(--mui-radio__input--Height);
+  border-radius: 50%;
+  background: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-table {
+  --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
+  --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary);
+  --pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
+  --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
+  --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
+  --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
+  --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
+  --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd);
+  --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart);
+  --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
+  --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
+  --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
+  --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
+  --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
+  --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
+
+  letter-spacing: 0.01071em;
+}
+
+.mui-theme .pf-v6-c-table .pf-m-align-right {
+  text-align: right;
+}
+
+.mui-theme .pf-v6-c-table__sort-indicator {
+  font-size: 18px;
+  opacity: 0;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform-origin: center center;
+  align-self: start;
+}
+
+/* CSS workaround to use MUI icon for sort icon */
+.mui-theme .pf-v6-c-table__sort-indicator::before {
+  display: block;
+  width: 1em;
+  height: 1em;
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+/* Hide PF's default icon for the CSS workaround to use MUI's icon */
+.mui-theme .pf-v6-c-table__sort-indicator svg {
+  display: none;
+}
+
+.mui-theme .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
+.mui-theme .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
+  opacity: 0.6;
+}
+
+.mui-theme .pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
+  transform: rotate(180deg);
+  align-self: end;
+}
+
+.mui-theme .pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
+  align-self: start;
+}
+
+.mui-theme .pf-v6-c-tab-content {
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+}
+
+.mui-theme .pf-v6-c-tabs {
+  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
+  --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
+  --pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd);
+  --pf-v6-c-tabs__item--PaddingInlineStart: none;
+  --pf-v6-c-tabs__item--PaddingInlineEnd: var(--mui-tabs__item--PaddingInlineEnd);
+  --pf-v6-c-tabs__link--PaddingBlockStart: var(--mui-tabs__link--PaddingBlockStart);
+  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
+  --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
+  --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
+  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs__link--FontSize: 0.875rem;
+}
+
+.mui-theme .pf-v6-c-tabs__link {
+  text-transform: var(--mui-text-transform);
+  font-weight: var(--mui-button-font-weight);
+  line-height: var(--mui-button-line-height);
+  letter-spacing: 0.02857em;
+}
+
+.mui-theme .pf-v6-c-tab-content {
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+}
+
+.mui-theme .pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
+  align-content: center;
+}
+
+.mui-theme .pf-v6-c-label {
+  --pf-v6-c-label--BorderRadius: 16px;
+  --pf-v6-c-label--FontSize: 0.8125rem;
+  --pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px);
+  --pf-v6-c-label--PaddingInlineStart: var(--mui-spacing-8px);
+  --pf-v6-c-label--PaddingBlockStart: 0;
+  --pf-v6-c-label--PaddingBlockEnd: 0;
+  height: 24px;
+}
+
+.mui-theme .pf-v6-c-label.pf-m-overflow {
+  border: 1px solid var(--mui-palette-grey-400);
+
+  .pf-v6-c-label__text {
+    color: var(--mui-palette-common-black);
+  }
+}
+
+.mui-theme .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
+  --pf-v6-c-button__icon--Color: var(--mui-palette-common-white);
+  --pf-v6-c-button--PaddingInlineStart: var(--mui-spacing-4px);
+  --pf-v6-c-button--PaddingInlineEnd: var(--mui-spacing-4px);
+}
+
+.mui-theme .pf-v6-c-label {
+  --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse);
+}
+
+.mui-theme .pf-v6-c-label-group.pf-m-category {
+  --pf-v6-c-label-group--m-category--BorderWidth: 0px;
+  --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
+  box-shadow: var(--mui-shadows-1);
+}
+
+.mui-theme .pf-v6-c-label.pf-m-outline {
+  --pf-v6-c-label--BorderColor: none;
+  --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
+  padding: 4px;
+}
+
+.mui-theme .pf-v6-c-masthead {
+  --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
+  box-shadow: var(--mui-shadows-1);
+  min-height: var(--kf-central-app-bar-height);
+}
+
+.mui-theme .pf-v6-c-modal-box {
+  --pf-v6-c-modal-box--BorderRadius: 0;
+  border: 2px solid var(--mui-palette-common-black);
+}
+
+.mui-theme .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--BorderRadius: 50%;
+  --pf-v6-c-button--PaddingInlineStart: none;
+  --pf-v6-c-button--PaddingInlineEnd: none;
+}
+
+.mui-theme .pf-v6-c-page__main-container {
+  --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
+  box-shadow: var(--mui-shadows-1);
+}
+
+.mui-theme .pf-v6-c-pagination {
+  --pf-v6-c-pagination__total-items--Display: block;
+}
+
+.mui-theme .pf-v6-c-pagination__total-items b {
+  font-weight: normal;
+}
+
+.mui-theme .pf-v6-c-pagination__page-menu {
+  order: -1;
+}
+
+.mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: none;
+  text-transform: none;
+}
+
+.mui-theme .pf-v6-c-pagination__page-menu::before {
+  content: 'Rows per page:';
+}
+
+.mui-theme .pf-v6-c-page__sidebar {
+  position: absolute;
+  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
+  /* Sidebar width */
+  height: 100vh;
+  /* Take full height of viewport */
+  z-index: 300;
+  /* Position sidebar above the masthead */
+}
+
+.mui-theme .pf-v6-c-page__main-container {
+  margin-top: var(--kf-central-app-bar-height);
+  /* Move content area below the app bar */
+}
+
+/* Hide Masthead Toggle by default */
+.mui-theme .pf-v6-c-masthead__toggle {
+  display: none;
+}
+
+/* Show Masthead Toggle on viewports below 1270px */
+@media (max-width: 1270px) {
+  .mui-theme .pf-v6-c-masthead__toggle {
+    display: block;
+    padding-block-start: var(--mui-spacing-4px);
+  }
+}
+
+@media (min-width: 1270px) {
+  .mui-theme .pf-v6-c-masthead {
+    padding-left: var(--kf-central-app-drawer-width);
+  }
+}
\ No newline at end of file