diff --git a/package-lock.json b/package-lock.json
index 1b03d7ba..579bea6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
         "@mui/icons-material": "^5.0.1",
-        "@mui/material": "^5.0.1",
+        "@mui/lab": "^5.0.0-alpha.137",
+        "@mui/material": "^5.14.2",
         "@mui/system": "^5.12.3",
         "ace-builds": "^1.4.12",
         "autosuggest-highlight": "^3.1.1",
@@ -2064,9 +2065,9 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -3442,15 +3443,15 @@
       "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.128",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz",
-      "integrity": "sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ==",
+      "version": "5.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz",
+      "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@emotion/is-prop-valid": "^1.2.0",
+        "@babel/runtime": "^7.22.6",
+        "@emotion/is-prop-valid": "^1.2.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
-        "@popperjs/core": "^2.11.7",
+        "@mui/utils": "^5.14.1",
+        "@popperjs/core": "^2.11.8",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -3489,9 +3490,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz",
-      "integrity": "sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.2.tgz",
+      "integrity": "sha512-x+c/MgDL1t/IIy5lDbMlrDouFG5DYZbl3DP4dbbuhlpPFBnE9glYwmJEee/orVHQpOPwLxCAIWQs+2DKSaBVWQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
@@ -3522,18 +3523,74 @@
         }
       }
     },
-    "node_modules/@mui/material": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz",
-      "integrity": "sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg==",
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.137",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz",
+      "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.128",
-        "@mui/core-downloads-tracker": "^5.12.3",
-        "@mui/system": "^5.12.3",
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.8",
+        "@mui/system": "^5.14.1",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.1",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "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/lab/node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/@mui/lab/node_modules/prop-types/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=="
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.2.tgz",
+      "integrity": "sha512-TgNR4/YRL11RifsnMWNhITNCkGJYVz20SCvVJBBoU5Y/KhUNSSJxjDpEB8VrnY+sUsV0NigLCkHZJglfsiS3Pw==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.8",
+        "@mui/core-downloads-tracker": "^5.14.2",
+        "@mui/system": "^5.14.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
-        "@types/react-transition-group": "^4.4.5",
+        "@mui/utils": "^5.14.1",
+        "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -3582,12 +3639,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.3.tgz",
-      "integrity": "sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA==",
+      "version": "5.13.7",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz",
+      "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.12.3",
+        "@babel/runtime": "^7.22.5",
+        "@mui/utils": "^5.13.7",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3623,12 +3680,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.3.tgz",
-      "integrity": "sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+      "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/cache": "^11.10.8",
+        "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
       },
@@ -3669,15 +3726,15 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/@mui/system": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.3.tgz",
-      "integrity": "sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz",
+      "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.12.3",
-        "@mui/styled-engine": "^5.12.3",
+        "@babel/runtime": "^7.22.6",
+        "@mui/private-theming": "^5.13.7",
+        "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
+        "@mui/utils": "^5.14.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -3736,13 +3793,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.3.tgz",
-      "integrity": "sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz",
+      "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.6",
         "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "@types/react-is": "^18.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -3838,9 +3895,9 @@
       "dev": true
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -5131,11 +5188,11 @@
       }
     },
     "node_modules/@types/react-is": {
-      "version": "17.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.4.tgz",
-      "integrity": "sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==",
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
       "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/react-redux": {
@@ -19370,9 +19427,9 @@
       "dev": true
     },
     "@babel/runtime": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -20468,15 +20525,15 @@
       }
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.128",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz",
-      "integrity": "sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ==",
+      "version": "5.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz",
+      "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@emotion/is-prop-valid": "^1.2.0",
+        "@babel/runtime": "^7.22.6",
+        "@emotion/is-prop-valid": "^1.2.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
-        "@popperjs/core": "^2.11.7",
+        "@mui/utils": "^5.14.1",
+        "@popperjs/core": "^2.11.8",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -20502,9 +20559,9 @@
       }
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz",
-      "integrity": "sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA=="
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.2.tgz",
+      "integrity": "sha512-x+c/MgDL1t/IIy5lDbMlrDouFG5DYZbl3DP4dbbuhlpPFBnE9glYwmJEee/orVHQpOPwLxCAIWQs+2DKSaBVWQ=="
     },
     "@mui/icons-material": {
       "version": "5.11.16",
@@ -20514,18 +20571,52 @@
         "@babel/runtime": "^7.21.0"
       }
     },
-    "@mui/material": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz",
-      "integrity": "sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg==",
+    "@mui/lab": {
+      "version": "5.0.0-alpha.137",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz",
+      "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.128",
-        "@mui/core-downloads-tracker": "^5.12.3",
-        "@mui/system": "^5.12.3",
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.8",
+        "@mui/system": "^5.14.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
-        "@types/react-transition-group": "^4.4.5",
+        "@mui/utils": "^5.14.1",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          },
+          "dependencies": {
+            "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=="
+            }
+          }
+        }
+      }
+    },
+    "@mui/material": {
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.2.tgz",
+      "integrity": "sha512-TgNR4/YRL11RifsnMWNhITNCkGJYVz20SCvVJBBoU5Y/KhUNSSJxjDpEB8VrnY+sUsV0NigLCkHZJglfsiS3Pw==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.8",
+        "@mui/core-downloads-tracker": "^5.14.2",
+        "@mui/system": "^5.14.1",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.1",
+        "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -20553,12 +20644,12 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.3.tgz",
-      "integrity": "sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA==",
+      "version": "5.13.7",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz",
+      "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.12.3",
+        "@babel/runtime": "^7.22.5",
+        "@mui/utils": "^5.13.7",
         "prop-types": "^15.8.1"
       },
       "dependencies": {
@@ -20580,12 +20671,12 @@
       }
     },
     "@mui/styled-engine": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.3.tgz",
-      "integrity": "sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+      "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/cache": "^11.10.8",
+        "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
       },
@@ -20608,15 +20699,15 @@
       }
     },
     "@mui/system": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.3.tgz",
-      "integrity": "sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz",
+      "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.12.3",
-        "@mui/styled-engine": "^5.12.3",
+        "@babel/runtime": "^7.22.6",
+        "@mui/private-theming": "^5.13.7",
+        "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
+        "@mui/utils": "^5.14.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -20646,13 +20737,13 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.3.tgz",
-      "integrity": "sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz",
+      "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.6",
         "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "@types/react-is": "^18.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -20730,9 +20821,9 @@
       "dev": true
     },
     "@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
     "@radix-ui/primitive": {
       "version": "1.0.1",
@@ -21651,11 +21742,11 @@
       }
     },
     "@types/react-is": {
-      "version": "17.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.4.tgz",
-      "integrity": "sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==",
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
       "requires": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "@types/react-redux": {
diff --git a/package.json b/package.json
index 25dc56c9..08a1d777 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.1",
-    "@mui/material": "^5.0.1",
+    "@mui/lab": "^5.0.0-alpha.137",
+    "@mui/material": "^5.14.2",
     "@mui/system": "^5.12.3",
     "ace-builds": "^1.4.12",
     "autosuggest-highlight": "^3.1.1",
diff --git a/src/components/chronicle/DomainInput.tsx b/src/components/chronicle/DomainInput.tsx
new file mode 100644
index 00000000..4533aefd
--- /dev/null
+++ b/src/components/chronicle/DomainInput.tsx
@@ -0,0 +1,101 @@
+import * as React from "react"
+import { useState } from "react"
+import { styled } from "@mui/system"
+
+import {
+    Autocomplete,
+    Button,
+    MenuItem,
+    IconButton,
+    InputAdornment,
+    TextField,
+    FormGroup,
+} from "@mui/material"
+
+import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete'
+
+import DeleteIcon from '@mui/icons-material/Delete'
+import PublicIcon from '@mui/icons-material/Public'
+
+interface DomainInputProps {
+    options: string[]
+    onOptionAdd: (newOption: string) => void
+    onOptionRemove: (optionToRemove: string) => void
+}
+
+const StyledTextField = styled(TextField)({
+    "& fieldset": {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+    }
+})
+
+const StyledButton = styled(Button)({
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+})
+
+const DomainInput: React.FC<DomainInputProps> = ({ options, onOptionAdd, onOptionRemove }) => {
+  const [inputValue, setInputValue] = useState<string | null>("")
+
+  const handleInputChange = (event: React.ChangeEvent<{}>, newInputValue: string | null) => {
+    setInputValue(newInputValue)
+  }
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
+    if (inputValue && urlRegex.test(inputValue)) {
+      onOptionAdd(inputValue)
+      setInputValue('')
+    }
+  }
+
+  const handleOptionRemove = (option: string) => {
+    onOptionRemove(option)
+  }
+
+  return (
+    <FormGroup row sx={{}}>
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'row', flex: 1 }}>
+            <Autocomplete
+                freeSolo
+                options={options}
+                sx={{ flex: 1 }}
+                value={inputValue}
+                onInputChange={handleInputChange}
+                renderOption={(props, option, state: AutocompleteRenderOptionState) => (
+                    <MenuItem {...props} sx={{ flex: 1, display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                        {option}
+                        <IconButton size="small" onClick={() => handleOptionRemove(option)}>
+                            <DeleteIcon fontSize="small" />
+                        </IconButton>
+                    </MenuItem>
+                )}
+                renderInput={(params) => { return (
+                    <StyledTextField
+                        {...params}
+                        label="URL"
+                        InputProps={{
+                            ...params.InputProps,
+                            startAdornment: (
+                                <>
+                                    <InputAdornment position="start">
+                                        <PublicIcon />
+                                    </InputAdornment>
+                                    {params.InputProps.startAdornment}
+                                </>
+                            )
+                        }}
+                    />
+                )}}
+            />
+            <StyledButton type="submit" variant="contained">
+                Add
+            </StyledButton>
+        </form>
+    </FormGroup>
+  )
+}
+
+export default DomainInput
diff --git a/src/containers/deployment/chronicle/Chronicle.js b/src/containers/deployment/chronicle/Chronicle.js
index b557094d..91b629e9 100644
--- a/src/containers/deployment/chronicle/Chronicle.js
+++ b/src/containers/deployment/chronicle/Chronicle.js
@@ -5,8 +5,7 @@ import routerActions from 'store/modules/router'
 import selectors from 'store/selectors'
 
 import Loading from 'components/system/Loading'
-// import ChronicleExplorer from 'pages/deployment/chronicle/Explorer'
-import Playground from 'pages/deployment/chronicle/Playground'
+import Chronicle from 'pages/deployment/chronicle'
 
 const onCancel = (cluster) => routerActions.navigateTo('deployments', { cluster })
 @connect(
@@ -43,7 +42,7 @@ class DeploymentChronicleContainer extends React.Component {
     }
 
     return (
-      <Playground
+      <Chronicle
         {...this.props}
       />
     )
diff --git a/src/pages/deployment/chronicle/Explorer.tsx b/src/pages/deployment/chronicle/Explorer.tsx
new file mode 100644
index 00000000..fa753f78
--- /dev/null
+++ b/src/pages/deployment/chronicle/Explorer.tsx
@@ -0,0 +1,292 @@
+import React, { useState } from 'react'
+
+import {
+    Container,
+    Divider,
+    Grid,
+} from "@mui/material"
+
+import {
+    TreeItem,
+    TreeView,
+} from '@mui/lab'
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+
+import DomainInput from '../../../components/chronicle/DomainInput'
+
+interface RenderTree {
+    id: string
+    name: string
+    meta?: { [key: string]: any };
+    children?: RenderTree[]
+}
+
+const data: RenderTree[] = [
+    {
+      id: 'agents',
+      name: 'Agents',
+      children: [
+        {
+          id: 'person',
+          name: 'Person',
+          children: [
+                {
+                    id: 'attributes9',
+                    name: 'Attributes',
+                    children: [
+                        {
+                            id: 'CMSId',
+                            name: 'CMSId',
+                            meta: [
+                                {
+                                    id: 'CMSId_s9d68gf7',
+                                    name: 'CMSId_s9d68gf7',
+                                    description: 'Lorem Ipsum dolor sit amet',
+                                },
+                            ],
+                        },
+                    ],
+                }
+            ],
+        },
+        {
+          id: 'organization',
+          name: 'Organization',
+          children: [
+            {
+              id: 'attributes10',
+              name: 'Attributes',
+              children: [
+                    {
+                        id: 'title',
+                        name: 'Title',
+                        meta: [
+                            {
+                                id: 'title_s9d68gf7',
+                                name: 'title_s9d68gf7',
+                                description: 'Lorem Ipsum dolor sit amet',
+                            },
+                        ],
+                    },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+        id: "entities",
+        name: "Entities",
+        children: [
+          {
+            id: "Question",
+            name: "Question",
+            children: [
+              {
+                id: "attribute5",
+                name: "Attributes",
+                children: [
+                  {
+                    id: "CMSId",
+                    name: "CMSId",
+                    meta: [
+                      {
+                        id: "CMSId_s9d68gf7",
+                        name: "CMSId_s9d68gf7",
+                        description: "Lorem Ipsum dolor sit amet"
+                      }
+                    ]
+                  },
+                  {
+                    id: "Content",
+                    name: "Content",
+                    meta: []
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "PublishedGuidance",
+            name: "PublishedGuidance",
+            children: [
+              {
+                id: "attribute8",
+                name: "Attributes",
+                children: []
+              }
+            ]
+          }
+        ]
+    },
+    {
+        id: "activities",
+        name: "Activities",
+        children: [
+          {
+            id: "QuestionAsked",
+            name: "QuestionAsked",
+            children: [
+              {
+                id: "attributes4",
+                name: "Attributes",
+                children: [
+                  {
+                    id: "Content",
+                    name: "Content",
+                    meta: []
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "Researched",
+            name: "Researched",
+            children: [
+              {
+                id: "attributes1",
+                name: "Attributes",
+                children: []
+              }
+            ]
+          },
+          {
+            id: "Published",
+            name: "Published",
+            children: [
+              {
+                id: "attributes2",
+                name: "Attributes",
+                children: [
+                  {
+                    id: "Version",
+                    name: "Version",
+                    meta: []
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "Revised",
+            name: "Revised",
+            children: [
+              {
+                id: "attributes3",
+                name: "Attributes",
+                children: [
+                  {
+                    id: "CMSId",
+                    name: "CMSId",
+                    meta: []
+                  },
+                  {
+                    id: "Version",
+                    name: "Version",
+                    meta: []
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+]
+
+const Explorer: React.FC = () => {
+    const [selectedMeta, setSelectedMeta] = useState(null)
+    const [options, setOptions] = useState<string[]>([
+        'https://chronicle.domain.example',
+    ])
+
+    const handleNodeSelect = (event: React.SyntheticEvent, nodeId: string) => {
+        const selectedNode = findNodeById(data, nodeId);
+        setSelectedMeta(selectedNode?.meta || null);
+    };
+
+    const findNodeById = (nodes: RenderTree[], id: string): RenderTree | null => {
+        for (let node of nodes) {
+            if (node.id === id) {
+                return node;
+            }
+            if (node.children) {
+                const foundNode = findNodeById(node.children, id);
+                if (foundNode) {
+                    return foundNode;
+                }
+            }
+        }
+        return null;
+    };
+
+    const renderTree = (nodes: RenderTree) => (
+        <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+          {Array.isArray(nodes.children)
+            ? nodes.children.map((node) => renderTree(node))
+            : null}
+        </TreeItem>
+    )
+
+    const renderObject = (obj: { [key: string]: any }) => {
+        return Object.entries(obj).map(([key, value]) => {
+          if (typeof value === 'object' && value !== null) {
+            return (
+              <div key={key}>
+                <strong>{key}:</strong>
+                {renderObject(value)}
+              </div>
+            );
+          } else {
+            return (
+              <div key={key}>
+                <strong>{key}:</strong> {value}
+              </div>
+            );
+          }
+        });
+      }
+
+    const handleOptionAdd = (newOption: string) => {
+    setOptions(prevOptions => [...prevOptions, newOption])
+    }
+
+    const handleOptionRemove = (optionToRemove: string) => {
+    setOptions(prevOptions => prevOptions.filter(option => option !== optionToRemove));
+    }
+
+    return (
+        <Container maxWidth={false} sx={{ padding: 2, flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <DomainInput options={options} onOptionAdd={handleOptionAdd} onOptionRemove={handleOptionRemove} />
+            <Divider sx={{ my: 2 }} />
+            <Grid container sx={{ my: 2, flex: 1 }}>
+                <Grid item xs={6} sx={{ p: 2 }}>
+                    <TreeView
+                        aria-label="rich object"
+                        defaultCollapseIcon={<ExpandMoreIcon />}
+                        defaultExpanded={['root']}
+                        defaultExpandIcon={<ChevronRightIcon />}
+                        onNodeSelect={handleNodeSelect}
+                        >
+                            {data.map((node) => renderTree(node))}
+                    </TreeView>
+                </Grid>
+                <Grid container xs={6} sx={{
+                        p: 2,
+                        borderRadius: (theme) => theme.shape.borderRadius,
+                        backgroundColor: (theme) => theme.palette.grey[100]
+                    }}>
+                {selectedMeta &&
+                        <div>
+                            {renderObject(selectedMeta)}
+                        </div>
+                    }
+                </Grid>
+            </Grid>
+        </Container>
+    )
+}
+
+export default Explorer
diff --git a/src/pages/deployment/chronicle/index.tsx b/src/pages/deployment/chronicle/index.tsx
new file mode 100644
index 00000000..cbb7bf2e
--- /dev/null
+++ b/src/pages/deployment/chronicle/index.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+
+import Explorer from './Explorer';
+import Playground from './Playground';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const VerticalFillContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    width: '100%',
+})
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <VerticalFillContainer
+      role="tabpanel"
+      style={{ display: value === index ? 'flex' : 'none' }}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && children}
+    </VerticalFillContainer>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export default function BasicTabs() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <VerticalFillContainer>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                <Tab label="Explorer" {...a11yProps(0)} />
+                <Tab label="Playground" {...a11yProps(1)} />
+            </Tabs>
+        </Box>
+        <Box sx={{ width: '100%', flex: 1, display: 'flex' }}>
+            <CustomTabPanel value={value} index={0}>
+                <Explorer />
+            </CustomTabPanel>
+            <CustomTabPanel value={value} index={1}>
+                <Playground />
+            </CustomTabPanel>
+        </Box>
+    </VerticalFillContainer>
+  )
+}
diff --git a/test/components/chronicle/DomainInput.test.tsx b/test/components/chronicle/DomainInput.test.tsx
new file mode 100644
index 00000000..dd6d3aa2
--- /dev/null
+++ b/test/components/chronicle/DomainInput.test.tsx
@@ -0,0 +1,64 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from "react"
+import { render, fireEvent, screen } from "@testing-library/react"
+import DomainInput from "../../../src/components/chronicle/DomainInput"
+import '@testing-library/jest-dom'
+
+describe("DomainInput", () => {
+  let options: string[]
+  let onOptionAdd: (newOption: string) => void
+  let onOptionRemove: (optionToRemove: string) => void
+
+  beforeEach(() => {
+    options = ["http://example.com", "http://google.com"]
+    onOptionAdd = jest.fn()
+    onOptionRemove = jest.fn()
+  })
+
+  test("renders without crashing", () => {
+    render(
+      <DomainInput
+        options={options}
+        onOptionAdd={onOptionAdd}
+        onOptionRemove={onOptionRemove}
+      />
+    )
+  })
+
+  test("adds an option when a valid URL is entered and the Add button is clicked", () => {
+    render(
+      <DomainInput
+        options={options}
+        onOptionAdd={onOptionAdd}
+        onOptionRemove={onOptionRemove}
+      />
+    )
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "http://newurl.com" },
+    })
+    fireEvent.click(screen.getByRole("button", { name: "Add" }))
+
+    expect(onOptionAdd).toHaveBeenCalledWith("http://newurl.com")
+  })
+
+  test("does not add an option when an invalid URL is entered and the Add button is clicked", () => {
+    render(
+      <DomainInput
+        options={options}
+        onOptionAdd={onOptionAdd}
+        onOptionRemove={onOptionRemove}
+      />
+    )
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "invalidurl" },
+    })
+    fireEvent.click(screen.getByRole("button", { name: "Add" }))
+
+    expect(onOptionAdd).not.toHaveBeenCalled()
+  })
+})