diff --git a/console/client/package-lock.json b/console/client/package-lock.json
index dd3e7c311c..c649727526 100644
--- a/console/client/package-lock.json
+++ b/console/client/package-lock.json
@@ -11,13 +11,17 @@
         "@bufbuild/connect": "0.12.0",
         "@bufbuild/connect-web": "0.12.0",
         "@bufbuild/protobuf": "1.3.0",
+        "@emotion/cache": "^11.11.0",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@headlessui/react": "1.7.16",
         "@heroicons/react": "2.0.18",
         "@monaco-editor/react": "4.5.2",
         "@mui/icons-material": "^5.14.8",
-        "@tailwindcss/forms": "^0.5.5",
+        "@mui/lab": "^5.0.0-alpha.144",
+        "@mui/material": "^5.14.9",
+        "@mui/x-date-pickers": "^6.13.0",
+        "@tailwindcss/forms": "^0.5.6",
         "@types/react-syntax-highlighter": "^15.5.7",
         "json-schema": "0.4.0",
         "json-schema-faker": "0.5.0-rcv.46",
@@ -25,7 +29,8 @@
         "react-dom": "18.2.0",
         "react-router-dom": "6.15.0",
         "react-syntax-highlighter": "^15.5.0",
-        "reactflow": "11.8.2"
+        "reactflow": "11.8.2",
+        "tailwindcss": "^3.3.3"
       },
       "devDependencies": {
         "@bufbuild/buf": "1.26.1",
@@ -59,7 +64,6 @@
         "prettier": "3.0.2",
         "process": "^0.11.10",
         "start-server-and-test": "2.0.0",
-        "tailwindcss": "3.3.3",
         "typed-css-modules": "0.7.2",
         "typescript": "5.1.6"
       }
@@ -676,9 +680,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz",
-      "integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1173,16 +1177,14 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
       "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
-      "peer": true,
       "dependencies": {
         "@floating-ui/utils": "^0.1.1"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
-      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
-      "peer": true,
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.2.tgz",
+      "integrity": "sha512-6ArmenS6qJEWmwzczWyhvrXRdI/rI78poBcW0h/456+onlabit+2G+QxHx5xTOX60NBJQXjsCLFbW2CmsXpUog==",
       "dependencies": {
         "@floating-ui/core": "^1.4.1",
         "@floating-ui/utils": "^0.1.1"
@@ -1192,7 +1194,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
       "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
-      "peer": true,
       "dependencies": {
         "@floating-ui/dom": "^1.5.1"
       },
@@ -1202,10 +1203,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
-      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
-      "peer": true
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.2.tgz",
+      "integrity": "sha512-ou3elfqG/hZsbmF4bxeJhPHIf3G2pm0ujc39hYEZrfVqt7Vk/Zji6CXc3W0pmYM8BW1g40U+akTl9DKZhFhInQ=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -1992,20 +1992,17 @@
       ]
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.14",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.14.tgz",
-      "integrity": "sha512-Je/9JzzYObsuLCIClgE8XvXNFb55IEz8n2NtStUfASfNiVrwiR8t6VVFFuhofehkyTIN34tq1qbBaOjCnOovBw==",
-      "peer": true,
+      "version": "5.0.0-beta.15",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.15.tgz",
+      "integrity": "sha512-Xtom3YSdi0iwYPtyVRFUEGoRwi6IHWixPwifDKaK+4PkEPtUWMU5YOIJfTsmC59ri+dFvA3oBNSiTPUGGrklZw==",
       "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@emotion/is-prop-valid": "^1.2.1",
-        "@floating-ui/react-dom": "^2.0.1",
+        "@babel/runtime": "^7.22.15",
+        "@floating-ui/react-dom": "^2.0.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.14.8",
+        "@mui/utils": "^5.14.9",
         "@popperjs/core": "^2.11.8",
         "clsx": "^2.0.0",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.2.0"
+        "prop-types": "^15.8.1"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -2025,17 +2022,10 @@
         }
       }
     },
-    "node_modules/@mui/base/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "peer": true
-    },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.14.8",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.8.tgz",
-      "integrity": "sha512-8V7ZOC/lKkM03TRHqaThQFIq6bWPnj7L/ZWPh0ymldYFFyh8XdF0ywTgafsofDNYT4StlNknbaTjVHBma3SNjQ==",
-      "peer": true,
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz",
+      "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
@@ -2066,18 +2056,58 @@
         }
       }
     },
-    "node_modules/@mui/material": {
-      "version": "5.14.8",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.8.tgz",
-      "integrity": "sha512-fqvDGGF1pXwOOL/f0Gw+KHo/67hasRpf2ApTIJkbuONOk9AUb2jnYMEqCWmL2sUcbbE3ShMbHl8N7HPSsRv1/A==",
-      "peer": true,
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.144",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.144.tgz",
+      "integrity": "sha512-CS/mBxfX9eSsrvatYBNphYCSCM4tIAIb4jZ3LiX1vSZ32DjRlNi+2U56+ObnBaVTjMMYdegMsT38uxYHSVXszA==",
       "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@mui/base": "5.0.0-beta.14",
-        "@mui/core-downloads-tracker": "^5.14.8",
-        "@mui/system": "^5.14.8",
+        "@babel/runtime": "^7.22.15",
+        "@mui/base": "5.0.0-beta.15",
+        "@mui/system": "^5.14.9",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.14.8",
+        "@mui/utils": "^5.14.9",
+        "@mui/x-tree-view": "6.0.0-alpha.1",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz",
+      "integrity": "sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@mui/base": "5.0.0-beta.15",
+        "@mui/core-downloads-tracker": "^5.14.9",
+        "@mui/system": "^5.14.9",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.9",
         "@types/react-transition-group": "^4.4.6",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
@@ -2114,17 +2144,15 @@
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "peer": true
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.14.8",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.8.tgz",
-      "integrity": "sha512-iBzpcl3Mh92XaYpYPdgzzRxNGkjpoDz8rf8/q5m+EBPowFEHV+CCS9hC0Q2pOKLW3VFFikA7w/GHt7n++40JGQ==",
-      "peer": true,
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.9.tgz",
+      "integrity": "sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==",
       "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@mui/utils": "^5.14.8",
+        "@babel/runtime": "^7.22.15",
+        "@mui/utils": "^5.14.9",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2145,15 +2173,15 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.14.8",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.8.tgz",
-      "integrity": "sha512-LGwOav/Y40PZWZ2yDk4beUoRlc57Vg+Vpxi9V9BBtT2ESAucCgFobkt+T8eVLMWF9huUou5pwKgLSU5pF90hBg==",
-      "peer": true,
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.9.tgz",
+      "integrity": "sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==",
       "dependencies": {
-        "@babel/runtime": "^7.22.10",
+        "@babel/runtime": "^7.22.15",
         "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
-        "prop-types": "^15.8.1"
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -2177,16 +2205,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.14.8",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.8.tgz",
-      "integrity": "sha512-Dxnasv7Pj5hYe4ZZFKJZu4ufKm6cxpitWt3A+qMPps22YhqyeEqgDBq/HsAB3GOjqDP40fTAvQvS/Hguf4SJuw==",
-      "peer": true,
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.9.tgz",
+      "integrity": "sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==",
       "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@mui/private-theming": "^5.14.8",
-        "@mui/styled-engine": "^5.14.8",
+        "@babel/runtime": "^7.22.15",
+        "@mui/private-theming": "^5.14.9",
+        "@mui/styled-engine": "^5.14.9",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.14.8",
+        "@mui/utils": "^5.14.9",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -2220,7 +2247,6 @@
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
       "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "*"
       },
@@ -2231,14 +2257,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.14.8",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.8.tgz",
-      "integrity": "sha512-1Ls2FfyY2yVSz9NEqedh3J8JAbbZAnUWkOWLE2f4/Hc4T5UWHMfzBLLrCqExfqyfyU+uXYJPGeNIsky6f8Gh5Q==",
-      "peer": true,
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.9.tgz",
+      "integrity": "sha512-9ysB5e+RwS7ofn0n3nwAg1/3c81vBTmSvauD3EuK9LmqMzhmF//BFDaC44U4yITvB/0m1kWyDqg924Ll3VHCcg==",
       "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^18.2.1",
+        "@babel/runtime": "^7.22.15",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -2250,14 +2273,114 @@
         "url": "https://opencollective.com/mui"
       },
       "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@mui/utils/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "peer": true
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.13.0.tgz",
+      "integrity": "sha512-mNfWXrS9PMLI+lgeEw6R08g5j1Yewat+A7MiI2QuwZteX3b83JQnm73RCGrSFTpvOP1/v6yIBPbxPZin5eu6GA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@mui/base": "^5.0.0-alpha.87",
+        "@mui/utils": "^5.14.7",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.0",
+        "date-fns": "^2.25.0",
+        "date-fns-jalali": "^2.13.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-tree-view": {
+      "version": "6.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz",
+      "integrity": "sha512-JUG3HmBrmGEALbCFg1b+i7h726e1dWYZs4db3syO1j+Q++E3nbvE4Lehp5yGTFm+8esH0Tny50tuJaa4WX6VSA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/utils": "^5.14.3",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/base": "^5.0.0-alpha.87",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -3806,7 +3929,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -4181,9 +4303,9 @@
       }
     },
     "node_modules/@tailwindcss/forms": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.5.tgz",
-      "integrity": "sha512-03sXK1DcPt44GZ0Yg6AcAfQln89IKdbE79g2OwoKqBm1ukaadLO2AH3EiB3mXHeQnxa3tzm7eE0x7INXSjbuug==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
+      "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
       "dependencies": {
         "mini-svg-data-uri": "^1.2.3"
       },
@@ -4714,15 +4836,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-is": {
-      "version": "18.2.1",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
-      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
-      "peer": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-syntax-highlighter": {
       "version": "15.5.7",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz",
@@ -4735,7 +4848,6 @@
       "version": "4.4.6",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
       "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -6061,7 +6173,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
       "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -6798,7 +6909,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
       "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.8.7",
         "csstype": "^3.0.2"
@@ -9778,9 +9888,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.19.3",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz",
-      "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
+      "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12515,7 +12625,6 @@
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
       "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
diff --git a/console/client/package.json b/console/client/package.json
index 2dcd3d5feb..96bb4128eb 100644
--- a/console/client/package.json
+++ b/console/client/package.json
@@ -30,13 +30,17 @@
     "@bufbuild/connect": "0.12.0",
     "@bufbuild/connect-web": "0.12.0",
     "@bufbuild/protobuf": "1.3.0",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "1.7.16",
     "@heroicons/react": "2.0.18",
     "@monaco-editor/react": "4.5.2",
     "@mui/icons-material": "^5.14.8",
-    "@tailwindcss/forms": "^0.5.5",
+    "@mui/lab": "^5.0.0-alpha.144",
+    "@mui/material": "^5.14.9",
+    "@mui/x-date-pickers": "^6.13.0",
+    "@tailwindcss/forms": "^0.5.6",
     "@types/react-syntax-highlighter": "^15.5.7",
     "json-schema": "0.4.0",
     "json-schema-faker": "0.5.0-rcv.46",
@@ -44,7 +48,8 @@
     "react-dom": "18.2.0",
     "react-router-dom": "6.15.0",
     "react-syntax-highlighter": "^15.5.0",
-    "reactflow": "11.8.2"
+    "reactflow": "11.8.2",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
     "@bufbuild/buf": "1.26.1",
@@ -78,7 +83,6 @@
     "prettier": "3.0.2",
     "process": "^0.11.10",
     "start-server-and-test": "2.0.0",
-    "tailwindcss": "3.3.3",
     "typed-css-modules": "0.7.2",
     "typescript": "5.1.6"
   }
diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx
index e6353c6543..4c4e07d005 100644
--- a/console/client/src/features/modules/ModulesPage.tsx
+++ b/console/client/src/features/modules/ModulesPage.tsx
@@ -1,14 +1,14 @@
-import { ViewModuleRounded } from '@mui/icons-material'
-import { PageHeader } from '../../components/PageHeader'
-import { ModulesList } from './ModulesList'
+import { Button, Container, Stack } from '@mui/material'
 
 export const ModulesPage = () => {
   return (
     <>
-      <div className='w-full m-0'>
-        <PageHeader icon={<ViewModuleRounded />} title='Modules' />
-        <ModulesList />
-      </div>
+      <Container maxWidth='sm' sx={{ m: 4 }}>
+        <Stack spacing={2}>
+          <Button variant='contained'>Sample MUI Button</Button>
+          <Button variant='contained'>Sample MUI Button</Button>
+        </Stack>
+      </Container>
     </>
   )
 }
diff --git a/console/client/src/providers/AppProviders.tsx b/console/client/src/providers/AppProviders.tsx
index e2ffcbe00c..87909a6db0 100644
--- a/console/client/src/providers/AppProviders.tsx
+++ b/console/client/src/providers/AppProviders.tsx
@@ -1,4 +1,6 @@
+import { ThemeProvider } from '@mui/material'
 import { App } from '../App'
+import { createTheme } from '../theme'
 import { DarkModeProvider } from './dark-mode-provider'
 import { ModulesProvider } from './modules-provider'
 import { NotificationsProvider } from './notifications-provider'
@@ -8,21 +10,24 @@ import { SelectedTimelineEntryProvider } from './selected-timeline-entry-provide
 import { SidePanelProvider } from './side-panel-provider'
 
 export const AppProviders = () => {
+  const theme = createTheme()
   return (
-    <DarkModeProvider>
-      <SchemaProvider>
-        <ModulesProvider>
-          <SelectedModuleProvider>
-            <SelectedTimelineEntryProvider>
-              <SidePanelProvider>
-                <NotificationsProvider>
-                  <App />
-                </NotificationsProvider>
-              </SidePanelProvider>
-            </SelectedTimelineEntryProvider>
-          </SelectedModuleProvider>
-        </ModulesProvider>
-      </SchemaProvider>
-    </DarkModeProvider>
+    <ThemeProvider theme={theme}>
+      <DarkModeProvider>
+        <SchemaProvider>
+          <ModulesProvider>
+            <SelectedModuleProvider>
+              <SelectedTimelineEntryProvider>
+                <SidePanelProvider>
+                  <NotificationsProvider>
+                    <App />
+                  </NotificationsProvider>
+                </SidePanelProvider>
+              </SelectedTimelineEntryProvider>
+            </SelectedModuleProvider>
+          </ModulesProvider>
+        </SchemaProvider>
+      </DarkModeProvider>
+    </ThemeProvider>
   )
 }
diff --git a/console/client/src/theme/colors.js b/console/client/src/theme/colors.js
new file mode 100644
index 0000000000..d3923bbf02
--- /dev/null
+++ b/console/client/src/theme/colors.js
@@ -0,0 +1,70 @@
+import { alpha } from '@mui/material/styles'
+
+const withAlphas = (color) => {
+  return {
+    ...color,
+    alpha4: alpha(color.main, 0.04),
+    alpha8: alpha(color.main, 0.08),
+    alpha12: alpha(color.main, 0.12),
+    alpha30: alpha(color.main, 0.3),
+    alpha50: alpha(color.main, 0.5),
+  }
+}
+
+export const neutral = {
+  50: '#F8F9FA',
+  100: '#F3F4F6',
+  200: '#E5E7EB',
+  300: '#D2D6DB',
+  400: '#9DA4AE',
+  500: '#6C737F',
+  600: '#4D5761',
+  700: '#2F3746',
+  800: '#1C2536',
+  900: '#111927',
+}
+
+export const indigo = withAlphas({
+  lightest: '#F5F7FF',
+  light: '#EBEEFE',
+  main: '#6366F1',
+  dark: '#4338CA',
+  darkest: '#312E81',
+  contrastText: '#FFFFFF',
+})
+
+export const success = withAlphas({
+  lightest: '#F0FDF9',
+  light: '#3FC79A',
+  main: '#10B981',
+  dark: '#0B815A',
+  darkest: '#134E48',
+  contrastText: '#FFFFFF',
+})
+
+export const info = withAlphas({
+  lightest: '#ECFDFF',
+  light: '#CFF9FE',
+  main: '#06AED4',
+  dark: '#0E7090',
+  darkest: '#164C63',
+  contrastText: '#FFFFFF',
+})
+
+export const warning = withAlphas({
+  lightest: '#FFFAEB',
+  light: '#FEF0C7',
+  main: '#F79009',
+  dark: '#B54708',
+  darkest: '#7A2E0E',
+  contrastText: '#FFFFFF',
+})
+
+export const error = withAlphas({
+  lightest: '#FEF3F2',
+  light: '#FEE4E2',
+  main: '#F04438',
+  dark: '#B42318',
+  darkest: '#7A271A',
+  contrastText: '#FFFFFF',
+})
diff --git a/console/client/src/theme/create-components.js b/console/client/src/theme/create-components.js
new file mode 100644
index 0000000000..bd0a6def15
--- /dev/null
+++ b/console/client/src/theme/create-components.js
@@ -0,0 +1,295 @@
+import {
+  createTheme,
+  filledInputClasses,
+  inputLabelClasses,
+  outlinedInputClasses,
+  paperClasses,
+  tableCellClasses,
+} from '@mui/material'
+
+// Used only to create transitions
+const muiTheme = createTheme()
+
+export const createComponents = (config) => {
+  const { palette } = config
+
+  return {
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 600,
+          letterSpacing: 0,
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '12px',
+          textTransform: 'none',
+        },
+        sizeSmall: {
+          padding: '6px 16px',
+        },
+        sizeMedium: {
+          padding: '8px 20px',
+        },
+        sizeLarge: {
+          padding: '11px 24px',
+        },
+        textSizeSmall: {
+          padding: '7px 12px',
+        },
+        textSizeMedium: {
+          padding: '9px 16px',
+        },
+        textSizeLarge: {
+          padding: '12px 16px',
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 20,
+          [`&.${paperClasses.elevation1}`]: {
+            boxShadow: '0px 5px 22px rgba(0, 0, 0, 0.04), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.03)',
+          },
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: '32px 24px',
+          '&:last-child': {
+            paddingBottom: '32px',
+          },
+        },
+      },
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: {
+          variant: 'h6',
+        },
+        subheaderTypographyProps: {
+          variant: 'body2',
+        },
+      },
+      styleOverrides: {
+        root: {
+          padding: '32px 24px 16px',
+        },
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        '*': {
+          boxSizing: 'border-box',
+        },
+        html: {
+          MozOsxFontSmoothing: 'grayscale',
+          WebkitFontSmoothing: 'antialiased',
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100%',
+          width: '100%',
+        },
+        body: {
+          display: 'flex',
+          flex: '1 1 auto',
+          flexDirection: 'column',
+          minHeight: '100%',
+          width: '100%',
+        },
+        '#__next': {
+          display: 'flex',
+          flex: '1 1 auto',
+          flexDirection: 'column',
+          height: '100%',
+          width: '100%',
+        },
+        '#nprogress': {
+          pointerEvents: 'none',
+        },
+        '#nprogress .bar': {
+          backgroundColor: palette.primary.main,
+          height: 3,
+          left: 0,
+          position: 'fixed',
+          top: 0,
+          width: '100%',
+          zIndex: 2000,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          '&::placeholder': {
+            opacity: 1,
+          },
+        },
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        input: {
+          fontSize: 14,
+          fontWeight: 500,
+          lineHeight: '24px',
+          '&::placeholder': {
+            color: palette.text.secondary,
+          },
+        },
+      },
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'transparent',
+          borderRadius: 8,
+          borderStyle: 'solid',
+          borderWidth: 1,
+          overflow: 'hidden',
+          borderColor: palette.neutral[200],
+          transition: muiTheme.transitions.create(['border-color', 'box-shadow']),
+          '&:hover': {
+            backgroundColor: palette.action.hover,
+          },
+          '&:before': {
+            display: 'none',
+          },
+          '&:after': {
+            display: 'none',
+          },
+          [`&.${filledInputClasses.disabled}`]: {
+            backgroundColor: 'transparent',
+          },
+          [`&.${filledInputClasses.focused}`]: {
+            backgroundColor: 'transparent',
+            borderColor: palette.primary.main,
+            boxShadow: `${palette.primary.main} 0 0 0 2px`,
+          },
+          [`&.${filledInputClasses.error}`]: {
+            borderColor: palette.error.main,
+            boxShadow: `${palette.error.main} 0 0 0 2px`,
+          },
+        },
+        input: {
+          fontSize: 14,
+          fontWeight: 500,
+          lineHeight: '24px',
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: palette.action.hover,
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: palette.neutral[200],
+            },
+          },
+          [`&.${outlinedInputClasses.focused}`]: {
+            backgroundColor: 'transparent',
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: palette.primary.main,
+              boxShadow: `${palette.primary.main} 0 0 0 2px`,
+            },
+          },
+          [`&.${filledInputClasses.error}`]: {
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: palette.error.main,
+              boxShadow: `${palette.error.main} 0 0 0 2px`,
+            },
+          },
+        },
+        input: {
+          fontSize: 14,
+          fontWeight: 500,
+          lineHeight: '24px',
+        },
+        notchedOutline: {
+          borderColor: palette.neutral[200],
+          transition: muiTheme.transitions.create(['border-color', 'box-shadow']),
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 500,
+          [`&.${inputLabelClasses.filled}`]: {
+            transform: 'translate(12px, 18px) scale(1)',
+          },
+          [`&.${inputLabelClasses.shrink}`]: {
+            [`&.${inputLabelClasses.standard}`]: {
+              transform: 'translate(0, -1.5px) scale(0.85)',
+            },
+            [`&.${inputLabelClasses.filled}`]: {
+              transform: 'translate(12px, 6px) scale(0.85)',
+            },
+            [`&.${inputLabelClasses.outlined}`]: {
+              transform: 'translate(14px, -9px) scale(0.85)',
+            },
+          },
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 500,
+          lineHeight: 1.71,
+          minWidth: 'auto',
+          paddingLeft: 0,
+          paddingRight: 0,
+          textTransform: 'none',
+          '& + &': {
+            marginLeft: 24,
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottomColor: palette.divider,
+          padding: '15px 16px',
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          borderBottom: 'none',
+          [`& .${tableCellClasses.root}`]: {
+            borderBottom: 'none',
+            backgroundColor: palette.neutral[50],
+            color: palette.neutral[700],
+            fontSize: 12,
+            fontWeight: 600,
+            lineHeight: 1,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase',
+          },
+          [`& .${tableCellClasses.paddingCheckbox}`]: {
+            paddingTop: 4,
+            paddingBottom: 4,
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'filled',
+      },
+    },
+  }
+}
diff --git a/console/client/src/theme/create-palette.js b/console/client/src/theme/create-palette.js
new file mode 100644
index 0000000000..09ad1f54a8
--- /dev/null
+++ b/console/client/src/theme/create-palette.js
@@ -0,0 +1,33 @@
+import { common } from '@mui/material/colors'
+import { alpha } from '@mui/material/styles'
+import { error, indigo, info, neutral, success, warning } from './colors'
+
+export const createPalette = () => {
+  return {
+    action: {
+      active: neutral[500],
+      disabled: alpha(neutral[900], 0.38),
+      disabledBackground: alpha(neutral[900], 0.12),
+      focus: alpha(neutral[900], 0.16),
+      hover: alpha(neutral[900], 0.04),
+      selected: alpha(neutral[900], 0.12),
+    },
+    background: {
+      default: common.white,
+      paper: common.white,
+    },
+    divider: '#F2F4F7',
+    error,
+    info,
+    mode: 'light',
+    neutral,
+    primary: indigo,
+    success,
+    text: {
+      primary: neutral[900],
+      secondary: neutral[500],
+      disabled: alpha(neutral[900], 0.38),
+    },
+    warning,
+  }
+}
diff --git a/console/client/src/theme/create-shadows.js b/console/client/src/theme/create-shadows.js
new file mode 100644
index 0000000000..345f151eb7
--- /dev/null
+++ b/console/client/src/theme/create-shadows.js
@@ -0,0 +1,29 @@
+export const createShadows = () => {
+  return [
+    'none',
+    '0px 1px 2px rgba(0, 0, 0, 0.08)',
+    '0px 1px 5px rgba(0, 0, 0, 0.08)',
+    '0px 1px 8px rgba(0, 0, 0, 0.08)',
+    '0px 1px 10px rgba(0, 0, 0, 0.08)',
+    '0px 1px 14px rgba(0, 0, 0, 0.08)',
+    '0px 1px 18px rgba(0, 0, 0, 0.08)',
+    '0px 2px 16px rgba(0, 0, 0, 0.08)',
+    '0px 3px 14px rgba(0, 0, 0, 0.08)',
+    '0px 3px 16px rgba(0, 0, 0, 0.08)',
+    '0px 4px 18px rgba(0, 0, 0, 0.08)',
+    '0px 4px 20px rgba(0, 0, 0, 0.08)',
+    '0px 5px 22px rgba(0, 0, 0, 0.08)',
+    '0px 5px 24px rgba(0, 0, 0, 0.08)',
+    '0px 5px 26px rgba(0, 0, 0, 0.08)',
+    '0px 6px 28px rgba(0, 0, 0, 0.08)',
+    '0px 6px 30px rgba(0, 0, 0, 0.08)',
+    '0px 6px 32px rgba(0, 0, 0, 0.08)',
+    '0px 7px 34px rgba(0, 0, 0, 0.08)',
+    '0px 7px 36px rgba(0, 0, 0, 0.08)',
+    '0px 8px 38px rgba(0, 0, 0, 0.08)',
+    '0px 8px 40px rgba(0, 0, 0, 0.08)',
+    '0px 8px 42px rgba(0, 0, 0, 0.08)',
+    '0px 9px 44px rgba(0, 0, 0, 0.08)',
+    '0px 9px 46px rgba(0, 0, 0, 0.08)',
+  ]
+}
diff --git a/console/client/src/theme/create-typography.js b/console/client/src/theme/create-typography.js
new file mode 100644
index 0000000000..c2eaae9147
--- /dev/null
+++ b/console/client/src/theme/create-typography.js
@@ -0,0 +1,77 @@
+export const createTypography = () => {
+  return {
+    fontFamily:
+      '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+    body1: {
+      fontSize: '1rem',
+      fontWeight: 400,
+      lineHeight: 1.5,
+    },
+    body2: {
+      fontSize: '0.875rem',
+      fontWeight: 400,
+      lineHeight: 1.57,
+    },
+    button: {
+      fontWeight: 600,
+    },
+    caption: {
+      fontSize: '0.75rem',
+      fontWeight: 500,
+      lineHeight: 1.66,
+    },
+    subtitle1: {
+      fontSize: '1rem',
+      fontWeight: 500,
+      lineHeight: 1.57,
+    },
+    subtitle2: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.57,
+    },
+    overline: {
+      fontSize: '0.75rem',
+      fontWeight: 600,
+      letterSpacing: '0.5px',
+      lineHeight: 2.5,
+      textTransform: 'uppercase',
+    },
+    h1: {
+      fontFamily: "'Plus Jakarta Sans', sans-serif",
+      fontWeight: 700,
+      fontSize: '3.5rem',
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontFamily: "'Plus Jakarta Sans', sans-serif",
+      fontWeight: 700,
+      fontSize: '3rem',
+      lineHeight: 1.2,
+    },
+    h3: {
+      fontFamily: "'Plus Jakarta Sans', sans-serif",
+      fontWeight: 700,
+      fontSize: '2.25rem',
+      lineHeight: 1.2,
+    },
+    h4: {
+      fontFamily: "'Plus Jakarta Sans', sans-serif",
+      fontWeight: 700,
+      fontSize: '2rem',
+      lineHeight: 1.2,
+    },
+    h5: {
+      fontFamily: "'Plus Jakarta Sans', sans-serif",
+      fontWeight: 700,
+      fontSize: '1.5rem',
+      lineHeight: 1.2,
+    },
+    h6: {
+      fontFamily: "'Plus Jakarta Sans', sans-serif",
+      fontWeight: 700,
+      fontSize: '1.125rem',
+      lineHeight: 1.2,
+    },
+  }
+}
diff --git a/console/client/src/theme/index.js b/console/client/src/theme/index.js
new file mode 100644
index 0000000000..3856460dc2
--- /dev/null
+++ b/console/client/src/theme/index.js
@@ -0,0 +1,31 @@
+import { createTheme as createMuiTheme } from '@mui/material'
+import { createComponents } from './create-components'
+import { createPalette } from './create-palette'
+import { createShadows } from './create-shadows'
+import { createTypography } from './create-typography'
+
+export const createTheme = () => {
+  const palette = createPalette()
+  const components = createComponents({ palette })
+  const shadows = createShadows()
+  const typography = createTypography()
+
+  return createMuiTheme({
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1200,
+        xl: 1440,
+      },
+    },
+    components,
+    palette,
+    shadows,
+    shape: {
+      borderRadius: 8,
+    },
+    typography,
+  })
+}