diff --git a/index.html b/index.html
index 5c584e2..305f64a 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
   <meta charset="utf-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
   <meta name="description" content="Pulpito" />
   <link rel="apple-touch-icon" href="/favicon.ico" />
   <link rel="manifest" href="/manifest.json" />
@@ -27,10 +26,12 @@
   <div id="root"></div>
   <script>
     try {
-      let colorScheme = "light";
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        colorScheme = "dark";
-      };
+      let colorScheme = localStorage.getItem("theme");
+      const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (!colorScheme) {
+        colorScheme = systemDarkMode ? "dark" : "light";
+      }
+      if (!!colorScheme) localStorage.setItem("theme", colorScheme);
       document.getElementsByTagName("body")[0].setAttribute("color-scheme", colorScheme);
     } catch (e) {
       console.error(e);
diff --git a/package-lock.json b/package-lock.json
index 9e30be7..27c9b35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.13.7",
         "@mui/material": "^5.13.7",
-        "@mui/x-data-grid": "^6.9.1",
         "@sentry/react": "^7.73.0",
         "@sentry/tracing": "^7.73.0",
         "@sentry/vite-plugin": "^2.8.0",
@@ -31,6 +30,7 @@
         "date-fns": "^2.30.0",
         "dotenv": "^16.3.1",
         "json-to-pretty-yaml": "^1.2.2",
+        "material-react-table": "^2.0.0",
         "mdi-material-ui": "^7.7.0",
         "react": "^18.2.0",
         "react-cookie": "^5.0.0",
@@ -48,12 +48,12 @@
         "@typescript-eslint/eslint-plugin": "^5.61.0",
         "@typescript-eslint/parser": "^5.61.0",
         "@typescript-eslint/typescript-estree": "^5.61.0",
-        "@vitejs/plugin-react": "^4.0.2",
+        "@vitejs/plugin-react": "^4.2.1",
         "eslint": "^8.44.0",
         "eslint-config-react-app": "^7.0.1",
         "prismjs": "^1.29.0",
         "typescript": "^5.1.6",
-        "vite": "^4.4.1"
+        "vite": "^5.0.12"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -66,8 +66,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.2.0",
-      "license": "MIT"
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.2.tgz",
+      "integrity": "sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw=="
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
@@ -82,43 +83,111 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
-      "license": "MIT",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.23.4",
+        "chalk": "^2.4.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/compat-data": {
-      "version": "7.22.6",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.22.8",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
+      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.7",
-        "@babel/helper-compilation-targets": "^7.22.6",
-        "@babel/helper-module-transforms": "^7.22.5",
-        "@babel/helpers": "^7.22.6",
-        "@babel/parser": "^7.22.7",
-        "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.8",
-        "@babel/types": "^7.22.5",
-        "@nicolo-ribaudo/semver-v6": "^6.3.3",
-        "convert-source-map": "^1.7.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.2"
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -128,6 +197,12 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
     "node_modules/@babel/eslint-parser": {
       "version": "7.21.3",
       "dev": true,
@@ -154,11 +229,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.22.7",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.22.5",
+        "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -191,21 +267,19 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.22.6",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.22.6",
-        "@babel/helper-validator-option": "^7.22.5",
-        "@nicolo-ribaudo/semver-v6": "^6.3.3",
-        "browserslist": "^4.21.9",
-        "lru-cache": "^5.1.1"
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-validator-option": "^7.23.5",
+        "browserslist": "^4.22.2",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
@@ -261,9 +335,10 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -280,12 +355,13 @@
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -314,31 +390,33 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.5",
-      "license": "MIT",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.22.15"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.22.5",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-module-imports": "^7.22.15",
         "@babel/helper-simple-access": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.20"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
@@ -427,23 +505,26 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "license": "MIT",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "license": "MIT",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.22.5",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -463,24 +544,26 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.22.6",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
+      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.6",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.5",
-      "license": "MIT",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       },
       "engines": {
@@ -489,7 +572,8 @@
     },
     "node_modules/@babel/highlight/node_modules/ansi-styles": {
       "version": "3.2.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -499,7 +583,8 @@
     },
     "node_modules/@babel/highlight/node_modules/chalk": {
       "version": "2.4.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -524,21 +609,24 @@
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "engines": {
         "node": ">=0.8.0"
       }
     },
     "node_modules/@babel/highlight/node_modules/has-flag": {
       "version": "3.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -547,9 +635,10 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.7",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1488,9 +1577,10 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.22.5",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+      "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
       },
@@ -1502,9 +1592,10 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.22.5",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+      "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
       },
@@ -1841,43 +1932,45 @@
       "license": "MIT"
     },
     "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==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.22.5",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
+      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.22.8",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.7",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.22.7",
-        "@babel/types": "^7.22.5",
-        "debug": "^4.1.0",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -1893,11 +1986,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.22.5",
-      "license": "MIT",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -2037,13 +2131,78 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
       "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.11",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -2052,6 +2211,294 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "dev": true,
@@ -2106,6 +2553,44 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==",
+      "peer": true
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -2205,17 +2690,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.3",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "license": "MIT"
@@ -2450,11 +2924,11 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.4",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
-      "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
+      "version": "7.2.10",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz",
+      "integrity": "sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==",
       "peerDependencies": {
-        "@types/react": "*"
+        "@types/react": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2463,13 +2937,12 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.13.7",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.7.tgz",
-      "integrity": "sha512-/3BLptG/q0u36eYED7Nhf4fKXmcKb6LjjT7ZMwhZIZSdSxVqDqSTmATW3a56n3KEPQUXCU9TpxAfCBQhs6brVA==",
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.19.tgz",
+      "integrity": "sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ==",
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^18.2.1",
+        "@babel/runtime": "^7.23.4",
+        "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -2478,10 +2951,16 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
         "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@mui/utils/node_modules/react-is": {
@@ -2489,16 +2968,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "node_modules/@mui/x-data-grid": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.9.1.tgz",
-      "integrity": "sha512-nJjvyGHRh8fWSF+VZYtN/gwDRRv/0V3AvbwlIMKRtEiXNUxPxGZ8G0J8dpq9zu6VSDU2AbQ/Prl1yfrnHiPQog==",
+    "node_modules/@mui/x-date-pickers": {
+      "version": "6.18.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.18.2.tgz",
+      "integrity": "sha512-HJq4uoFQSu5isa/mesWw2BKh8KBRYUQb+KaSlVlWfJNgP3YhPvWZ6yqCNYyxOAiPMxb0n3nBjS9ErO27OHjFMA==",
+      "peer": true,
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@mui/utils": "^5.13.6",
-        "clsx": "^1.2.1",
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "^5.0.0-beta.22",
+        "@mui/utils": "^5.14.16",
+        "@types/react-transition-group": "^4.4.8",
+        "clsx": "^2.0.0",
         "prop-types": "^15.8.1",
-        "reselect": "^4.1.8"
+        "react-transition-group": "^4.4.5"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2508,10 +2990,89 @@
         "url": "https://opencollective.com/mui"
       },
       "peerDependencies": {
-        "@mui/material": "^5.4.1",
-        "@mui/system": "^5.4.1",
+        "@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-date-pickers/node_modules/@mui/base": {
+      "version": "5.0.0-beta.25",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.25.tgz",
+      "integrity": "sha512-Iiv+IcappRRv6IBlknIVmLkXxfp51NEX1+l9f+dIbBuPU4PaRULegr1lCeHKsC45KU5ruxM5xMg4R/de03aJQg==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.23.4",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.10",
+        "@mui/utils": "^5.14.19",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@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/x-date-pickers/node_modules/clsx": {
+      "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"
       }
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
@@ -2536,18 +3097,10 @@
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/estraverse": {
       "version": "4.3.0",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/@nicolo-ribaudo/semver-v6": {
-      "version": "6.3.3",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
       }
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -2599,6 +3152,175 @@
         "node": ">=14"
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
+      "integrity": "sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.6.tgz",
+      "integrity": "sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.6.tgz",
+      "integrity": "sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.6.tgz",
+      "integrity": "sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.6.tgz",
+      "integrity": "sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.6.tgz",
+      "integrity": "sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.6.tgz",
+      "integrity": "sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.6.tgz",
+      "integrity": "sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.6.tgz",
+      "integrity": "sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.6.tgz",
+      "integrity": "sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.6.tgz",
+      "integrity": "sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.6.tgz",
+      "integrity": "sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.6.tgz",
+      "integrity": "sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.2.0",
       "dev": true,
@@ -2897,6 +3619,62 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.10.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.10.7.tgz",
+      "integrity": "sha512-bXhjA7xsTcsW8JPTTYlUg/FuBpn8MNjiEPhkNhIGCUR6iRQM2+WEco4OBpvDeVcR9SE+bmWLzdfiY7bCbCSVuA==",
+      "dependencies": {
+        "@tanstack/table-core": "8.10.7"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.0.0-beta.68",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.68.tgz",
+      "integrity": "sha512-YEFNCf+N3ZlNou2r4qnh+GscMe24foYEjTL05RS0ZHvah2RoUDPGuhnuedTv0z66dO2vIq6+Bl4TXatht5T7GQ==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.0.0-beta.68"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.10.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.10.7.tgz",
+      "integrity": "sha512-KQk5OMg5OH6rmbHZxuNROvdI+hKDIUxANaHlV+dPlNN7ED3qYQ/WkpY2qlXww1SIdeMlkIhpN/2L00rof0fXFw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.0.0-beta.68",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.68.tgz",
+      "integrity": "sha512-CnvsEJWK7cugigckt13AeY80FMzH+OMdEP0j0bS3/zjs44NiRe49x8FZC6R9suRXGMVMXtUHet0zbTp/Ec9Wfg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.2.0",
       "license": "MIT",
@@ -2978,11 +3756,58 @@
       "version": "5.0.1",
       "license": "MIT"
     },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+      "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
       "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
     "node_modules/@types/history": {
       "version": "4.7.11",
       "dev": true,
@@ -3076,8 +3901,9 @@
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "license": "MIT"
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
       "version": "18.2.14",
@@ -3104,14 +3930,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==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-router": {
       "version": "5.1.20",
       "dev": true,
@@ -3132,9 +3950,9 @@
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
-      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz",
+      "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -3816,20 +4634,22 @@
       }
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.0.2",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.22.5",
-        "@babel/plugin-transform-react-jsx-self": "^7.22.5",
-        "@babel/plugin-transform-react-jsx-source": "^7.22.5",
+        "@babel/core": "^7.23.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+        "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.14.0"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0"
+        "vite": "^4.2.0 || ^5.0.0"
       }
     },
     "node_modules/@vitejs/plugin-react/node_modules/react-refresh": {
@@ -4089,9 +4909,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -4327,7 +5147,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.9",
+      "version": "4.22.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
+      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
       "dev": true,
       "funding": [
         {
@@ -4343,12 +5165,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001503",
-        "electron-to-chromium": "^1.4.431",
-        "node-releases": "^2.0.12",
-        "update-browserslist-db": "^1.0.11"
+        "caniuse-lite": "^1.0.30001580",
+        "electron-to-chromium": "^1.4.648",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4357,13 +5178,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "license": "MIT",
@@ -4390,7 +5204,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001512",
+      "version": "1.0.30001583",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz",
+      "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==",
       "dev": true,
       "funding": [
         {
@@ -4405,8 +5221,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -4822,9 +5637,10 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.451",
-      "dev": true,
-      "license": "ISC"
+      "version": "1.4.656",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.656.tgz",
+      "integrity": "sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==",
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -4940,10 +5756,11 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.18.11",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -4951,34 +5768,36 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.11",
-        "@esbuild/android-arm64": "0.18.11",
-        "@esbuild/android-x64": "0.18.11",
-        "@esbuild/darwin-arm64": "0.18.11",
-        "@esbuild/darwin-x64": "0.18.11",
-        "@esbuild/freebsd-arm64": "0.18.11",
-        "@esbuild/freebsd-x64": "0.18.11",
-        "@esbuild/linux-arm": "0.18.11",
-        "@esbuild/linux-arm64": "0.18.11",
-        "@esbuild/linux-ia32": "0.18.11",
-        "@esbuild/linux-loong64": "0.18.11",
-        "@esbuild/linux-mips64el": "0.18.11",
-        "@esbuild/linux-ppc64": "0.18.11",
-        "@esbuild/linux-riscv64": "0.18.11",
-        "@esbuild/linux-s390x": "0.18.11",
-        "@esbuild/linux-x64": "0.18.11",
-        "@esbuild/netbsd-x64": "0.18.11",
-        "@esbuild/openbsd-x64": "0.18.11",
-        "@esbuild/sunos-x64": "0.18.11",
-        "@esbuild/win32-arm64": "0.18.11",
-        "@esbuild/win32-ia32": "0.18.11",
-        "@esbuild/win32-x64": "0.18.11"
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
       }
     },
     "node_modules/escalade": {
       "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -5597,8 +6416,10 @@
       "license": "ISC"
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "license": "MIT",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -5847,6 +6668,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/highlight-words": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/highlight-words/-/highlight-words-1.2.2.tgz",
+      "integrity": "sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==",
+      "engines": {
+        "node": ">= 16",
+        "npm": ">= 8"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "license": "BSD-3-Clause",
@@ -6609,6 +7439,33 @@
         "node": ">=12"
       }
     },
+    "node_modules/material-react-table": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/material-react-table/-/material-react-table-2.0.4.tgz",
+      "integrity": "sha512-Jl3j1VyStr4JO2TG0J3PeFHu/d7+23bQ7b5LhUogWiTM0n2j9Uio4gyQ5C2QOzgMhvELt3RgemNPYGqt0bGBHA==",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "8.8.4",
+        "@tanstack/react-table": "8.10.7",
+        "@tanstack/react-virtual": "3.0.0-beta.68",
+        "highlight-words": "1.2.2"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kevinvandy"
+      },
+      "peerDependencies": {
+        "@emotion/react": ">=11.11",
+        "@emotion/styled": ">=11.11",
+        "@mui/icons-material": ">=5.11",
+        "@mui/material": ">=5.13",
+        "@mui/x-date-pickers": ">=6.15.0",
+        "react": ">=18.0",
+        "react-dom": ">=18.0"
+      }
+    },
     "node_modules/mdi-material-ui": {
       "version": "7.7.0",
       "license": "MIT",
@@ -6701,7 +7558,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
       "funding": [
         {
@@ -6709,7 +7568,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -6754,9 +7612,10 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.12",
-      "dev": true,
-      "license": "MIT"
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -7065,7 +7924,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.25",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "dev": true,
       "funding": [
         {
@@ -7081,9 +7942,8 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -7358,8 +8218,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "license": "MIT"
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -7458,11 +8319,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/reselect": {
-      "version": "4.1.8",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
-      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
-    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "license": "MIT",
@@ -7508,6 +8364,38 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rollup": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
+      "integrity": "sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.9.6",
+        "@rollup/rollup-android-arm64": "4.9.6",
+        "@rollup/rollup-darwin-arm64": "4.9.6",
+        "@rollup/rollup-darwin-x64": "4.9.6",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.9.6",
+        "@rollup/rollup-linux-arm64-gnu": "4.9.6",
+        "@rollup/rollup-linux-arm64-musl": "4.9.6",
+        "@rollup/rollup-linux-riscv64-gnu": "4.9.6",
+        "@rollup/rollup-linux-x64-gnu": "4.9.6",
+        "@rollup/rollup-linux-x64-musl": "4.9.6",
+        "@rollup/rollup-win32-arm64-msvc": "4.9.6",
+        "@rollup/rollup-win32-ia32-msvc": "4.9.6",
+        "@rollup/rollup-win32-x64-msvc": "4.9.6",
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "dev": true,
@@ -7733,29 +8621,9 @@
     },
     "node_modules/source-map-js": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.6.1",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7945,32 +8813,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/terser": {
-      "version": "5.16.8",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/source-map": "^0.3.2",
-        "acorn": "^8.5.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "dev": true,
@@ -8173,7 +9015,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.11",
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
       "dev": true,
       "funding": [
         {
@@ -8189,7 +9033,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -8267,28 +9110,29 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.1",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
+      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.18.10",
-        "postcss": "^8.4.24",
-        "rollup": "^3.25.2"
+        "esbuild": "^0.19.3",
+        "postcss": "^8.4.32",
+        "rollup": "^4.2.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": ">= 14",
+        "@types/node": "^18.0.0 || >=20.0.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
@@ -8320,21 +9164,6 @@
         }
       }
     },
-    "node_modules/vite/node_modules/rollup": {
-      "version": "3.26.2",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=14.18.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
     "node_modules/web-vitals": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.3.2.tgz",
diff --git a/package.json b/package.json
index 348ab02..823f447 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.13.7",
     "@mui/material": "^5.13.7",
-    "@mui/x-data-grid": "^6.9.1",
     "@sentry/react": "^7.73.0",
     "@sentry/tracing": "^7.73.0",
     "@sentry/vite-plugin": "^2.8.0",
@@ -27,6 +26,7 @@
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",
     "json-to-pretty-yaml": "^1.2.2",
+    "material-react-table": "^2.0.0",
     "mdi-material-ui": "^7.7.0",
     "react": "^18.2.0",
     "react-cookie": "^5.0.0",
@@ -68,11 +68,11 @@
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@typescript-eslint/typescript-estree": "^5.61.0",
-    "@vitejs/plugin-react": "^4.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.44.0",
     "eslint-config-react-app": "^7.0.1",
     "prismjs": "^1.29.0",
     "typescript": "^5.1.6",
-    "vite": "^4.4.1"
+    "vite": "^5.0.12"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index af528a1..b22383a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { useState, MouseEventHandler } from "react";
 
-import { Routes, Route, Navigate } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
 import AppBar from "./components/AppBar";
@@ -18,7 +18,7 @@ import "./App.css";
 
 type AppProps = {
   darkMode: boolean;
-  toggleDarkMode: Function;
+  toggleDarkMode: MouseEventHandler<HTMLElement>;
 };
 
 function App(props: AppProps) {
diff --git a/src/components/AppBar/index.tsx b/src/components/AppBar/index.tsx
index 3f3ceff..e48a3b3 100644
--- a/src/components/AppBar/index.tsx
+++ b/src/components/AppBar/index.tsx
@@ -1,6 +1,5 @@
 import { Link as RouterLink } from "react-router-dom";
 import { styled } from '@mui/material/styles';
-import { useTheme } from "@mui/material/styles";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
@@ -54,8 +53,6 @@ type AppBarProps = {
 };
 
 export default function AppBar(props: AppBarProps) {
-  const theme = useTheme();
-
   return (
     <StyledMuiAppBar position="static" className={classes.appBar}>
       <Toolbar>
@@ -80,7 +77,7 @@ export default function AppBar(props: AppBarProps) {
           <RouterLink
             to="/"
             style={{
-              color: theme.palette.text.primary,
+              color: "inherit",
               textDecoration: "none",
               marginLeft: "12px",
             }}
diff --git a/src/components/DataGrid/index.jsx b/src/components/DataGrid/index.jsx
deleted file mode 100644
index 5de3d38..0000000
--- a/src/components/DataGrid/index.jsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { DataGrid as MuiDataGrid } from "@mui/x-data-grid";
-import { styled } from "@mui/material/styles";
-import { darken, lighten } from "@mui/material/styles";
-
-import { colorTint } from "../../lib/utils";
-
-const PREFIX = "index";
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const Root = styled("div")(({ theme }) => {
-  const nodeStatusColors = {
-    available: colorTint(theme.palette.success.main, 20),
-    down: colorTint(theme.palette.error.main, 15),
-    locked: colorTint(theme.palette.warning.main, 20),
-  };
-  const statusColors = {
-    pass: colorTint(theme.palette.success.main, 20),
-    fail: colorTint(theme.palette.error.main, 15),
-    running: colorTint(theme.palette.warning.main, 20),
-    waiting: colorTint(theme.palette.info.main, 20),
-    dead: colorTint(theme.palette.error.main, 10),
-    // queued is neutral color
-  };
-  const getSelectedColor = (color) => {
-    const newColor =
-      getThemePaletteMode(theme.palette) === "dark"
-        ? darken(color, 0.3)
-        : lighten(color, 0.3);
-    return newColor + " !important";
-  };
-  const getHoverColor = (color) => {
-    const newColor =
-      getThemePaletteMode(theme.palette) === "dark"
-        ? lighten(color, 0.3)
-        : darken(color, 0.3);
-    return newColor + " !important";
-  };
-  return {
-    [`& .${classes.root}`]: {
-      fontSize: 12,
-      "& .MuiDataGrid-columnHeaderTitle": {
-        overflow: "visible",
-      },
-      "& .MuiSvgIcon-root": {
-        width: "0.75em",
-        height: "0.75em",
-      },
-      "& .MuiDataGrid-row": {
-        "&.Mui-selected": {
-          borderColor: theme.palette.secondary.main,
-          borderStyle: "solid",
-          borderWidth: "1px",
-        },
-        "&.status-pass": {
-          backgroundColor: statusColors.pass,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(statusColors.pass),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(statusColors.pass),
-          },
-        },
-        "&.status-fail": {
-          backgroundColor: statusColors.fail,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(statusColors.fail),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(statusColors.fail),
-          },
-        },
-        "&.status-dead": {
-          backgroundColor: statusColors.dead,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(statusColors.dead),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(statusColors.dead),
-          },
-        },
-        "&.status-running": {
-          backgroundColor: statusColors.running,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(statusColors.running),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(statusColors.running),
-          },
-        },
-        "&.status-waiting": {
-          backgroundColor: statusColors.waiting,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(statusColors.waiting),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(statusColors.waiting),
-          },
-        },
-        "&.node-down": {
-          backgroundColor: nodeStatusColors.down,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(nodeStatusColors.down),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(nodeStatusColors.down),
-          },
-        },
-        "&.node-locked": {
-          backgroundColor: nodeStatusColors.locked,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(nodeStatusColors.locked),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(nodeStatusColors.locked),
-          },
-        },
-        "&.node-available": {
-          backgroundColor: nodeStatusColors.available,
-          color: "black",
-          "&.Mui-selected": {
-            backgroundColor: getSelectedColor(nodeStatusColors.available),
-          },
-          "&:hover": {
-            backgroundColor: getHoverColor(nodeStatusColors.available),
-          },
-        },
-        '.MuiDataGrid-booleanCell[data-value="true"]': {
-          color: "black"
-        },
-        '.MuiDataGrid-booleanCell[data-value="false"]': {
-          color: "black"
-        },
-      },
-    },
-  };
-});
-
-function getThemePaletteMode(palette) {
-  return palette.mode;
-}
-
-export default function DataGrid(props) {
-  return (
-    <Root style={{ width: "100%" }}>
-      <div style={{ display: "flex", height: "100%" }}>
-        <div style={{ flexGrow: 1 }}>
-          <MuiDataGrid
-            autoHeight
-            className={classes.root}
-            density="compact"
-            initialState={props.initialState}
-            pageSizeOptions={[25, 50, 100]}
-            paginationMode={props.paginationMode}
-            paginationModel={{
-              page: Number(props.page) || 0,
-              pageSize: Number(props.pageSize) || 25,
-            }}
-            onPaginationModelChange={props.onPaginationModelChange}
-            loading={props.loading}
-            rows={props.rows}
-            rowCount={props.rowCount || 9999}
-            getRowId={props.getRowId}
-            getRowClassName={props.getRowClassName}
-            filterMode={props.filterMode}
-            filterModel={props.filterModel}
-            onFilterModelChange={props.onFilterModelChange}
-            columns={props.columns}
-            hideFooter={props.hideFooter}
-          />
-        </div>
-      </div>
-    </Root>
-  );
-}
diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx
index e4230c7..8fba7d1 100644
--- a/src/components/JobList/index.tsx
+++ b/src/components/JobList/index.tsx
@@ -1,71 +1,54 @@
+import { ReactNode } from "react";
 import DescriptionIcon from "@mui/icons-material/Description";
-import Tooltip from '@mui/material/Tooltip';
-import type {
-  GridCellParams,
-  GridFilterModel,
-  GridRowClassNameParams,
-  GridValueFormatterParams,
-  GridValueGetterParams,
-  GridRenderCellParams,
-  GridColDef,
-} from "@mui/x-data-grid";
-import type {
-  DecodedValueMap,
-  QueryParamConfigMap,
-  SetQuery,
-} from "use-query-params";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_Row,
+} from 'material-react-table';
 import type { UseQueryResult } from "@tanstack/react-query";
+import { type Theme } from "@mui/material/styles";
 
 import { formatDate, formatDuration } from "../../lib/utils";
-import DataGrid from "../../components/DataGrid";
 import IconLink from "../../components/IconLink";
-import type { Run, NodeJobs } from "../../lib/paddles.d";
+import Link from "../../components/Link";
+import type { Job, NodeJobs, Run } from "../../lib/paddles.d";
 import { dirName } from "../../lib/utils";
+import useDefaultTableOptions from "../../lib/table";
 
 import sentryIcon from "./assets/sentry.svg";
 
 
-const columns: GridColDef[] = [
+const columns: MRT_ColumnDef<Job>[] = [
   {
-    field: "status",
-    width: 85,
-    cellClassName: (params: GridCellParams) => `status-${params.value}`,
-    renderCell: (params: GridRenderCellParams) => {
-      let failure_reason = params.row.failure_reason || "";
-      const max_length = 800;
-      const ellipsis = "...";
-      if ( failure_reason.length > max_length ) {
-        failure_reason = failure_reason.substring(0, max_length - ellipsis.length) + ellipsis;
-      }
-      return (
-        <div>
-        <Tooltip title={failure_reason}>
-          <p>{params.value}</p>
-        </Tooltip>
-        </div>
-      );
-    }
+    header: "status",
+    accessorKey: "status",
+    size: 120,
+    filterVariant: "select",
   },
   {
-    field: "links",
-    width: 75,
-    valueGetter: (params: GridValueGetterParams) => {
-      return {
-        log: dirName(params.row.log_href),
-        sentry: params.row.sentry_event,
-      };
-    },
-    renderCell: (params: GridRenderCellParams) => {
+    header: "links",
+    id: "links",
+    size: 75,
+    Cell: ({ row }) => {
+      const log_url = row.original.log_href;
+      const sentry_url = row.original.sentry_event;
       return (
         <div>
-          {params.value.log ? (
-            <IconLink to={params.value.log}>
-              <DescriptionIcon />
+          {log_url? (
+            <IconLink to={dirName(log_url)}>
+              <DescriptionIcon fontSize="small" />
             </IconLink>
           ) : null}
-          {params.value.sentry ? (
-            <IconLink to={params.value.sentry}>
-              <img src={`${sentryIcon}`} alt="Sentry icon" />
+          {sentry_url ? (
+            <IconLink to={sentry_url}>
+              <img
+                src={`${sentryIcon}`}
+                alt="Sentry icon"
+                style={{height: '20px', width: '20px'}}
+              />
             </IconLink>
           ) : null}
         </div>
@@ -73,141 +56,191 @@ const columns: GridColDef[] = [
     },
   },
   {
-    field: "job_id",
-    headerName: "job ID",
-    renderCell: (params: GridRenderCellParams) => {
+    header: "job ID",
+    accessorKey: "job_id",
+    size: 110,
+    Cell: ({ row }) => {
       return (
-        <IconLink to={`/runs/${params.row.name}/jobs/${params.value}`}>
-          {params.value}
-        </IconLink>
+        <Link
+          to={`/runs/${row.original.name}/jobs/${row.original.job_id}`}
+          color="inherit"
+        >
+            {row.original.job_id}
+        </Link>
       );
     },
   },
-  // links
   {
-    field: "posted",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 125,
+    header: "posted",
+    id: "posted",
+    accessorFn: (row: Job) => formatDate(row.posted),
+    filterVariant: 'date',
+    sortingFn: "datetime",
+    size: 150,
   },
   {
-    field: "started",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 125,
+    header: "updated",
+    id: "updated",
+    accessorFn: (row: Job) => formatDate(row.updated),
+    filterVariant: 'date',
+    sortingFn: "datetime",
+    size: 150,
   },
   {
-    field: "updated",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 125,
+    header: "started",
+    id: "started",
+    accessorFn: (row: Job) => formatDate(row.started),
+    filterVariant: 'date',
+    sortingFn: "datetime",
+    size: 150,
   },
   {
-    field: "runtime",
-    valueGetter: (params: GridValueGetterParams) => {
-      const start = Date.parse(params.row.started);
-      const end = Date.parse(params.row.updated);
+    header: "runtime",
+    id: "runtime",
+    size: 110,
+    accessorFn: (row: Job) => {
+      const start = Date.parse(row.started);
+      const end = Date.parse(row.updated);
       if (!end || !start) return null;
-      return Math.round((end - start) / 1000);
+      return formatDuration(Math.round((end - start) / 1000));
     },
-    valueFormatter: (row: GridValueFormatterParams) =>
-      formatDuration(row.value),
+    enableColumnFilter: false,
   },
   {
-    field: "duration",
-    valueFormatter: (row: GridValueFormatterParams) =>
-      formatDuration(row.value),
+    header: "duration",
+    id: "duration",
+    size: 120,
+    accessorFn: (row: Job) =>
+      formatDuration(row.duration),
+    enableColumnFilter: false,
   },
   {
-    field: "waiting",
-    headerName: "in waiting",
-    valueGetter: (params: GridValueGetterParams) => {
-      const start = Date.parse(params.row.started);
-      const end = Date.parse(params.row.updated);
-      if (!end || !start || !params.row.duration) return null;
-      return Math.round((end - start) / 1000 - params.row.duration);
+    header: "in waiting",
+    id: "waiting",
+    size: 100,
+    accessorFn: (row: Job) => {
+      const start = Date.parse(row.started);
+      const end = Date.parse(row.updated);
+      if (!end || !start || !row.duration) return null;
+      return formatDuration(Math.round((end - start) / 1000 - row.duration));
     },
-    valueFormatter: (row: GridValueFormatterParams) =>
-      formatDuration(row.value),
+    enableColumnFilter: false,
   },
   {
-    field: "machine_type",
-    headerName: "machine type",
+    header: "machine type",
+    accessorKey: "machine_type",
+    filterVariant: "select",
   },
   {
-    field: "os_type",
-    headerName: "OS type",
-    width: 85,
+    header: "OS type",
+    size: 85,
+    accessorFn: (row: Job) => row.os_type + "",
+    filterVariant: "select",
   },
   {
-    field: "os_version",
-    headerName: "OS version",
-    width: 85,
+    header: "OS version",
+    accessorFn: (row: Job) => row.os_version + "",
+    size: 85,
+    filterVariant: "select",
   },
   {
-    field: "nodes",
-    headerName: "nodes",
-    valueGetter: (params: GridValueGetterParams) => {
-      return Object.keys(params.row.targets || {}).length || null;
+    header: "nodes",
+    accessorKey: "nodes",
+    accessorFn: (row: Job) => {
+      return Object.keys(row.targets || row.roles || {}).length || 0;
     },
-    width: 85,
+    size: 85,
   },
 ];
 
-interface JobListProps {
+function jobStatusToThemeCategory(status: string): keyof Theme["palette"] {
+  switch (status) {
+    case "dead": return "error";
+    case "fail": return "error";
+    case "finished fail": return "error";
+    case "pass": return "success";
+    case "finished pass": return "success";
+    case "running": return "warning";
+    default: return "info";
+  }
+};
+
+type JobDetailPanelProps = {
+  row: MRT_Row<Job>;
+}
+
+function JobDetailPanel(props: JobDetailPanelProps): ReactNode {
+  const failure_reason = props.row.original.failure_reason;
+  if ( ! failure_reason ) return null;
+  return (
+    <Box
+      sx={{
+        borderLeft: 1,
+        borderColor: (theme) => theme.palette.grey[800],
+        padding: 1,
+        color: (theme) => theme.palette.text.primary,
+      }}
+    >
+      <Typography
+        variant="subtitle2"
+      >
+        Failure Reason:
+      </Typography>
+      <Typography
+        variant="caption"
+      >
+        <code>{failure_reason}</code>
+      </Typography>
+    </Box>
+  )
+};
+
+type JobListProps = {
   query: UseQueryResult<Run> | UseQueryResult<NodeJobs>;
-  params: DecodedValueMap<QueryParamConfigMap>;
-  setter: SetQuery<QueryParamConfigMap>;
-  pagingMode: "client" | "server";
+  sortMode?: "time" | "id";
 }
 
-export default function JobList({ query, params, setter, pagingMode }: JobListProps) {
-  if (query.isError) return null;
-  let extraProps: Record<string, any> = {"paginationMode": pagingMode}
-  if (pagingMode === "client") {
-    extraProps["rowCount"] = query.data?.jobs?.length || 999;
-  } 
-  let filterModel: GridFilterModel = { items: [] };
-  if (params.status) {
-    filterModel = {
-      items: [
+export default function JobList({ query, sortMode }: JobListProps) {
+  const options = useDefaultTableOptions<Job>();
+  const data = query.data?.jobs || [];
+  const table = useMaterialReactTable({
+    ...options,
+    columns,
+    data: data,
+    rowCount: data.length,
+    enableFacetedValues: true,
+    initialState: {
+      ...options.initialState,
+      columnVisibility: {
+        posted: false,
+        updated: false,
+        duration: false,
+        waiting: false,
+      },
+      pagination: {
+        pageIndex: 0,
+        pageSize: 25,
+      },
+      sorting: [
         {
-          field: "status",
-          value: params.status,
-          operator: "contains",
+          id: sortMode === "time"? "started" : "job_id",
+          desc: true,
         },
       ],
-    };
-  }
-  const onFilterModelChange = (model: GridFilterModel) => {
-    setter({ status: model.items[0].value || null });
-  };
-  return (
-    <DataGrid
-      columns={columns}
-      rows={query.data?.jobs || []}
-      loading={query.isLoading || query.isFetching}
-      initialState={{
-        sorting: {
-          sortModel: [
-            {
-              field: "job_id",
-              sort: "asc",
-            },
-          ],
-        },
-      }}
-      filterMode="client"
-      filterModel={filterModel}
-      onFilterModelChange={onFilterModelChange}
-      onPaginationModelChange={setter}
-      pageSize={params.pageSize}
-      page={params.page}
-      setter={setter}
-      getRowClassName={(params: GridRowClassNameParams) => {
-        return `status-${params.row.status}`;
-      }}
-      {...extraProps}
-    />
-  );
+    },
+    state: {
+      isLoading: query.isLoading || query.isFetching,
+    },
+    renderDetailPanel: JobDetailPanel,
+    muiTableBodyRowProps: ({row, isDetailPanel}) => {
+      if ( isDetailPanel ) {
+        return row.original.failure_reason? {} : {className: "empty"};
+      }
+      const category = jobStatusToThemeCategory(row.original.status);
+      if ( category ) return { className: category };
+      return {};
+    },
+  });
+  if (query.isError) return null;
+  return <MaterialReactTable table={table} />
 }
diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
index ea15242..cdd1cb4 100644
--- a/src/components/Link/index.jsx
+++ b/src/components/Link/index.jsx
@@ -5,6 +5,7 @@ export default function Link(props) {
     <MuiLink
       href={props.to}
       target="_blank"
+      color={props.color}
       sx={props.sx}
     >
       {props.children}
diff --git a/src/components/NodeList/index.tsx b/src/components/NodeList/index.tsx
index 386a69a..7636189 100644
--- a/src/components/NodeList/index.tsx
+++ b/src/components/NodeList/index.tsx
@@ -1,128 +1,142 @@
 import type { UseQueryResult } from "@tanstack/react-query";
-import type {
-  DecodedValueMap,
-  QueryParamConfigMap,
-  SetQuery,
-} from "use-query-params";
-import type {
-  GridFilterModel,
-  GridRowClassNameParams,
-  GridValueFormatterParams,
-  GridColDef,
-  GridRenderCellParams,
-} from "@mui/x-data-grid";
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 import Link from '@mui/material/Link';
 
 import type { Node } from "../../lib/paddles.d";
 import { formatDate } from "../../lib/utils";
-import DataGrid from "../DataGrid";
+import useDefaultTableOptions from "../../lib/table";
 
 
-export const columns: GridColDef[] = [
+export const columns: MRT_ColumnDef<Node>[] = [
   {
-    field: "name",
-    width: 100,
-    renderCell: (params: GridRenderCellParams) => {
-      return <Link href={`/nodes/${params.value}/`} color="inherit">{params.value?.split(".")[0]}</Link>;
+    header: "name",
+    accessorKey: "name",
+    size: 40,
+    Cell: ( { row } ) => {
+      const name = row.original.name;
+      return <Link href={`/nodes/${name}/`} color="inherit">{name?.split(".")[0]}</Link>;
     },
   },
   {
-    field: "machine_type",
-    width: 90,
+    header: "machine_type",
+    accessorKey: "machine_type",
+    size: 90,
+    maxSize: 90,
   },
   {
-    field: "up",
-    type: "boolean",
-    width: 70,
+    header: "🔌",
+    accessorFn: (row: Node) => row.up?.toLocaleString(),
+    size: 30,
+    filterVariant: "select",
   },
   {
-    field: "locked",
-    type: "boolean",
-    width: 70,
+    header: "🔒",
+    accessorFn: (row: Node) => row.locked?.toLocaleString(),
+    size: 30,
+    filterVariant: "select",
   },
   {
-    headerName: "locked since",
-    field: "locked_since",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 150,
+    header: "locked since",
+    filterVariant: 'date',
+    sortingFn: "datetime",
+    accessorFn: (row: Node) => formatDate(row.locked_since),
+    size: 55,
+    enableColumnFilter: false,
   },
   {
-    headerName: "locked by",
-    field: "locked_by",
-    width: 175,
+    header: "locked by",
+    accessorKey: "locked_by",
+    size: 60,
+    filterVariant: "select",
   },
   {
-    headerName: "OS type",
-    field: "os_type",
-    width: 90,
+    header: "OS type",
+    accessorFn: (row) => row.os_type || "none",
+    size: 40,
+    filterVariant: "select",
   },
   {
-    headerName: "OS version",
-    field: "os_version",
-    width: 90,
+    header: "OS ver.",
+    accessorFn: (row) => row.os_version || "none",
+    size: 40,
+    filterVariant: "select",
   },
   {
-    field: "arch",
-    width: 60,
+    header: "arch",
+    accessorKey: "arch",
+    size: 50,
+    filterVariant: "select",
   },
   {
-    field: "description",
-    width: 500,
+    header: "description",
+    accessorKey: "description",
+    size: 200,
   },
 ];
 
 interface NodeListProps {
   query: UseQueryResult<Node[]>;
-  params: DecodedValueMap<QueryParamConfigMap>;
-  setter: SetQuery<QueryParamConfigMap>;
 }
 
-export function nodeRowClass(params: GridRowClassNameParams) {
-  const isUp = params.row.up;
-  const isLocked = params.row.locked;
-  if (!isUp) {
-      return 'node-down';
+export default function NodeList({ query }: NodeListProps) {
+  const options = useDefaultTableOptions<Node>();
+  options.state = {};
+  options.state.columnVisibility = {};
+  const data = query.data || [];
+  if ( data.length <= 1 ) {
+    options.enableFilters = false;
+    options.enablePagination = false;
+    options.enableTableFooter = false;
+    options.enableTopToolbar = false;
+    options.enableBottomToolbar = false;
+    options.state.columnVisibility = {
+      name: false,
+    };
   }
-  return isLocked ? 'node-locked' : 'node-available';
-}
-
-export default function NodeList({ query, params, setter }:NodeListProps) {
-  let filterModel: GridFilterModel = { items: [] };
-  if (params.machine_type) {
-    filterModel = {
-      items: [
+  if ( new Set(data.map(node => node.machine_type)).size === 1 ) {
+    options.state.columnVisibility.machine_type = false;
+  }
+  if ( new Set(data.map(node => node.arch)).size === 1 ) {
+    options.state.columnVisibility.arch = false;
+  }
+  const table = useMaterialReactTable({
+    ...options,
+    columns,
+    data: data,
+    rowCount: data.length,
+    enableFacetedValues: true,
+    initialState: {
+      ...options.initialState,
+      pagination: {
+        pageIndex: 0,
+        pageSize: 25,
+      },
+      sorting: [
         {
-          field: "machine_type",
-          value: params.machine_type,
-          operator: "contains",
+          id: "machine_type",
+          desc: false,
         },
-      ],
-    };
-  }
-  const onFilterModelChange = (model: GridFilterModel) => {
-    setter({ machine_type: model.items[0].value || null });
-  };
-  return (
-    <DataGrid
-      columns={columns}
-      rows={query.data || []}
-      loading={query.isLoading || query.isFetching}
-      initialState={{
-        sorting: {
-          sortModel: [
-            {
-              field: "name",
-              sort: "asc",
-            },
-          ],
+        {
+          id: "name",
+          desc: false,
         },
-      }}
-      hideFooter={true}
-      filterMode="client"
-      filterModel={filterModel}
-      onFilterModelChange={onFilterModelChange}
-      getRowClassName={nodeRowClass}
-    />
-  );
+      ],
+    },
+    state: {
+      ...options.state,
+      isLoading: query.isLoading || query.isFetching,
+    },
+    muiTableBodyRowProps: ({row}) => {
+      let className = "info";
+      if ( row.original.up === false ) className = "error";
+      else if ( row.original.locked === true ) className = "warning";
+      else if ( row.original.locked === false ) className = "success";
+      return {className};
+    },
+  });
+  return <MaterialReactTable table={table} />
 }
diff --git a/src/components/RunList/index.tsx b/src/components/RunList/index.tsx
index ac1d9a9..1d09428 100644
--- a/src/components/RunList/index.tsx
+++ b/src/components/RunList/index.tsx
@@ -5,187 +5,261 @@ import type {
   SetQuery,
 } from "use-query-params";
 import { useDebounce } from "usehooks-ts";
-import type {
-  GridFilterModel,
-  GridRowClassNameParams,
-  GridValueFormatterParams,
-  GridValueGetterParams,
-  GridRenderCellParams,
-  GridColDef,
-} from "@mui/x-data-grid";
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_PaginationState,
+  type MRT_Updater,
+  type MRT_ColumnFiltersState,
+  type MRT_TableOptions,
+} from 'material-react-table';
+import { type Theme } from "@mui/material/styles";
+import { parse } from "date-fns";
 
 import { useRuns } from "../../lib/paddles";
-import { formatDate, formatDuration } from "../../lib/utils";
-import DataGrid from "../DataGrid";
+import { formatDate, formatDay, formatDuration } from "../../lib/utils";
 import IconLink from "../../components/IconLink";
+import type { Run } from "../../lib/paddles.d";
+import { RunStatuses } from "../../lib/paddles.d";
+import useDefaultTableOptions from "../../lib/table";
 
-function resultsGetter(params: GridValueGetterParams) {
-  return params.row.results[params.field];
-}
 
-const columns: GridColDef[] = [
+const DEFAULT_PAGE_SIZE = 25;
+const NON_FILTER_PARAMS = [
+  "page",
+  "pageSize",
+];
+
+const columns: MRT_ColumnDef<Run>[] = [
   {
-    field: "user",
+    header: "status",
+    accessorKey: "status",
+    filterVariant: "select",
+    Cell: ({ row }) => {
+      return row.original.status.replace("finished ", "");
+    },
+    filterSelectOptions: Object.values(RunStatuses),
+  },
+  {
+    accessorKey: "user",
+    header: "user",
+    size: 60,
+    enableColumnFilter: false,
   },
   {
-    field: "name",
-    headerName: "link",
-    width: 60,
-    renderCell: (params: GridRenderCellParams) => {
+    accessorKey: "name",
+    header: "link",
+    size: 30,
+    enableColumnFilter: false,
+    Cell: ({ row }) => {
       return (
-        <IconLink to={`/runs/${params.value}`}>
-          <OpenInNewIcon />
+        <IconLink to={`/runs/${row.original.name}`}>
+          <OpenInNewIcon fontSize="small" />
         </IconLink>
       );
     },
   },
   {
-    field: "scheduled",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 125,
+    id: "scheduled",
+    header: "scheduled",
+    accessorFn: (row: Run) => formatDate(row.scheduled),
+    filterVariant: 'date',
+    sortingFn: "datetime",
+    size: 125,
   },
   {
-    field: "started",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 125,
+    id: "started",
+    header: "started",
+    accessorFn: (row: Run) => formatDate(row.started),
+    enableColumnFilter: false,
+    sortingFn: "datetime",
+    size: 125,
   },
   {
-    headerName: "updated",
-    field: "posted",
-    type: "date",
-    valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value),
-    width: 125,
+    id: "posted",
+    header: "updated",
+    accessorFn: (row: Run) => formatDate(row.posted),
+    enableColumnFilter: false,
+    sortingFn: "datetime",
+    size: 125,
   },
   {
-    headerName: "runtime",
-    field: "",
-    valueGetter: (params: GridValueGetterParams) => {
-      const start = Date.parse(params.row.started);
-      const end = Date.parse(params.row.updated);
+    id: "runtime",
+    header: "runtime",
+    accessorFn: (row: Run) => {
+      const start = Date.parse(row.started);
+      const end = Date.parse(row.updated);
       if (!end || !start) return null;
-      return Math.round((end - start) / 1000);
+      return formatDuration(Math.round((end - start) / 1000));
     },
-    valueFormatter: (row: GridValueFormatterParams) => formatDuration(row.value),
-    width: 70,
+    enableColumnFilter: false,
+    sortingFn: "datetime",
+    size: 70,
   },
   {
-    field: "suite",
+    accessorKey: "suite",
+    header: "suite",
+    size: 70,
   },
   {
-    field: "branch",
+    accessorKey: "branch",
+    header: "branch",
+    maxSize: 75,
   },
   {
-    field: "machine_type",
-    width: 90,
+    accessorKey: "machine_type",
+    header: "machine_type",
+    size: 30,
   },
   {
-    field: "sha1",
-    headerName: "hash",
-    width: 75,
+    accessorKey: "sha1",
+    header: "hash",
+    size: 30,
+    maxSize: 50,
   },
   {
-    field: "queued",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.queued",
+    header: "queued",
+    size: 30,
+    enableColumnFilter: false,
   },
   {
-    field: "pass",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.pass",
+    header: "pass",
+    size: 30,
+    enableColumnFilter: false,
   },
   {
-    field: "fail",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.fail",
+    header: "fail",
+    size: 40,
+    enableColumnFilter: false,
   },
   {
-    field: "dead",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.dead",
+    header: "dead",
+    size: 40,
+    enableColumnFilter: false,
   },
   {
-    field: "running",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.running",
+    header: "running",
+    size: 40,
+    enableColumnFilter: false,
   },
   {
-    field: "waiting",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.waiting",
+    header: "waiting",
+    size: 40,
+    enableColumnFilter: false,
   },
 ];
 
-interface RunListProps {
+function runStatusToThemeCategory(status: string): keyof Theme["palette"] {
+  switch (status) {
+    case "finished dead": return "error";
+    case "finished fail": return "error";
+    case "finished pass": return "success";
+    case "running": return "warning";
+    default: return "info";
+  }
+};
+
+type RunListParams = {
+  [key: string]: number|string;
+}
+
+type RunListProps = {
   params: DecodedValueMap<QueryParamConfigMap>;
   setter: SetQuery<QueryParamConfigMap>;
+  tableOptions?: Partial<MRT_TableOptions<Run>>;
 }
 
-export default function RunList({ params, setter }:RunListProps) {
-  const paddlesParams = {...params};
-  delete paddlesParams.user;
+export default function RunList(props: RunListProps) {
+  const { params, setter, tableOptions } = props;
+  const options = useDefaultTableOptions<Run>();
   const debouncedParams = useDebounce(params, 500);
-  const query = useRuns(debouncedParams);
-  if (query.isError) return null;
-  /*  If we want to automatically size the branch column:
-  const columns = [..._columns];
-  if (query.isSuccess) {
-    const branchLength = Math.max(
-      ...query.data.map((item) => item.branch.length)
-    );
-    columns.forEach((item) => {
-      if (item.field === "branch") {
-        item.width = Math.max(100, branchLength * 7);
+  const columnFilters: MRT_ColumnFiltersState = [];
+  Object.entries(debouncedParams).forEach(param => {
+    const [id, value] = param;
+    if ( NON_FILTER_PARAMS.includes(id) ) return;
+    if ( id === "date" && !!value ) {
+      columnFilters.push({
+        id: "scheduled",
+        value: parse(value, "yyyy-MM-dd", new Date())
+      }) 
+    } else {
+      columnFilters.push({id, value}) 
+    }
+  });
+  let pagination = {
+    pageIndex: params.page || 0,
+    pageSize: params.pageSize || DEFAULT_PAGE_SIZE,
+  };
+  const onColumnFiltersChange = (updater: MRT_Updater<MRT_ColumnFiltersState>) => {
+    if ( ! ( updater instanceof Function ) ) return;
+    const result: RunListParams = {pageSize: pagination.pageSize};
+    const updated = updater(columnFilters);
+    updated.forEach(item => {
+      if ( ! item.id ) return;
+      if ( item.value instanceof Date ) {
+        result.date = formatDay(item.value);
+      } else if ( typeof item.value === "string" || typeof item.value === "number" ) {
+        result[item.id] = item.value
       }
     });
-  }
-  */
-  let filterModel: GridFilterModel = { items: [] };
-  if (params.user) {
-    filterModel = {
-      items: [
-        {
-          field: "user",
-          value: params.user,
-          operator: "contains",
-        },
-      ],
+    setter(result);
+  };
+  const onPaginationChange = (updater: MRT_Updater<MRT_PaginationState>) => {
+    if ( ! ( updater instanceof Function ) ) return;
+    pagination = updater(pagination);
+    const result: Partial<RunListParams> = {
+      ...params,
+      page: pagination.pageIndex,
     };
-  }
-  const onFilterModelChange = (model: GridFilterModel) => {
-    const params: QueryParamConfigMap = {};
-    model.items.forEach((item) => {
-      params[item.field] = item.value || null;
-    });
-    setter(params);
+    if ( pagination.pageSize != DEFAULT_PAGE_SIZE ) result.pageSize = pagination.pageSize;
+    setter(result);
   };
-  return (
-    <DataGrid
-      columns={columns}
-      rows={query.data || []}
-      loading={query.isLoading || query.isFetching}
-      initialState={{
-        sorting: {
-          sortModel: [
-            {
-              field: "scheduled",
-              sort: "desc",
-            },
-          ],
+  const query = useRuns(debouncedParams);
+  let data = query.data || [];
+  const table = useMaterialReactTable({
+    ...options,
+    columns,
+    data: data,
+    manualPagination: true,
+    manualFiltering: true,
+    onPaginationChange,
+    rowCount: Infinity,
+    muiPaginationProps: {
+      showLastButton: false,
+    },
+    onColumnFiltersChange,
+    initialState: {
+      ...options.initialState,
+      columnVisibility: {
+        started: false,
+        posted: false,
+      },
+      sorting: [
+        {
+          id: "scheduled",
+          desc: true,
         },
-      }}
-      filterMode="client"
-      filterModel={filterModel}
-      onFilterModelChange={onFilterModelChange}
-      paginationMode="server"
-      pageSize={params.pageSize}
-      page={params.page}
-      onPaginationModelChange={setter}
-      getRowClassName={(params: GridRowClassNameParams) => {
-        const status = params.row.status.split(" ").pop();
-        return `status-${status}`;
-      }}
-    />
-  );
+      ],
+    },
+    state: {
+      columnFilters,
+      pagination,
+      isLoading: query.isLoading || query.isFetching,
+    },
+    muiTableBodyRowProps: ({row}) => {
+      const category = runStatusToThemeCategory(row.original.status);
+      if ( category ) return { className: category };
+      return {};
+    },
+    ...tableOptions,
+  });
+  if (query.isError) return null;
+  return <MaterialReactTable table={table} />
 }
diff --git a/src/index.tsx b/src/index.tsx
index 25246cf..eac60e8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,6 +14,8 @@ import {
   ThemeProvider,
   StyledEngineProvider,
 } from "@mui/material/styles";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 
@@ -22,6 +24,7 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 import type { QueryKey } from "./lib/paddles.d";
+import getThemeOptions from "./lib/theme";
 
 Sentry.init({
   dsn: import.meta.env.VITE_SENTRY_DSN,
@@ -53,14 +56,12 @@ function useDarkMode(): [boolean, Function] {
   const systemDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const [state, setState] = React.useState({
     system: systemDarkMode,
+    user: localStorage.getItem("theme") === "dark",
   } as DarkModeState);
 
   function setDarkMode(value: boolean) {
-    const newState = { ...state, user: value };
-    if (value !== state.user) {
-      setState(newState);
-    }
-    setState(newState);
+    localStorage.setItem("theme", value? "dark" : "light");
+    setState({ ...state, user: value });
   }
   const darkMode = state.user === undefined ? systemDarkMode : state.user;
   return [darkMode, setDarkMode];
@@ -73,31 +74,28 @@ export default function Root() {
   };
   const theme = React.useMemo(() => {
     const paletteType = darkMode ? "dark" : "light";
-    const theme = createTheme({ palette: { mode: paletteType } });
-    if (darkMode) {
-      theme.palette.background.default = "#181818";
-      theme.palette.background.paper = "#303030";
-    }
+    const theme = createTheme({
+      ...getThemeOptions(paletteType),
+    });
     return theme;
   }, [darkMode]);
-  if (darkMode === undefined) {
-    return null;
-  }
   return (
     <React.StrictMode>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <CookiesProvider>
-            <Router>
-              <QueryParamProvider adapter={ReactRouter6Adapter}>
-                <CssBaseline />
-                <QueryClientProvider client={queryClient}>
-                  <ReactQueryDevtools initialIsOpen={false} />
-                  <App darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
-                </QueryClientProvider>
-              </QueryParamProvider>
-            </Router>
-          </CookiesProvider>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <CookiesProvider>
+              <Router>
+                <QueryParamProvider adapter={ReactRouter6Adapter}>
+                  <CssBaseline />
+                  <QueryClientProvider client={queryClient}>
+                    <ReactQueryDevtools initialIsOpen={false} />
+                    <App darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+                  </QueryClientProvider>
+                </QueryParamProvider>
+              </Router>
+            </CookiesProvider>
+          </LocalizationProvider>
         </ThemeProvider>
       </StyledEngineProvider>
     </React.StrictMode>
diff --git a/src/lib/paddles.d.ts b/src/lib/paddles.d.ts
index afad206..381de57 100644
--- a/src/lib/paddles.d.ts
+++ b/src/lib/paddles.d.ts
@@ -17,6 +17,12 @@ type NodeParams = {
   name: string;
 };
 
+export const JobStatuses = [
+  "queued", "waiting", "running", "dead", "fail", "pass", "unknown",
+] as const;
+
+export type JobStatus = (typeof JobStatuses)[number];
+
 export type Job = {
   id?: string;
   job_id: number;
@@ -24,19 +30,52 @@ export type Job = {
   suite: string;
   branch: string;
   scheduled: string;
+  posted: string;
+  updated: string;
+  started: string;
+  log_href: string;
+  sentry_event: string;
+  duration: number;
+  status: JobStatus;
+  failure_reason: string;
+  targets: Node[];
+  roles: NodeRoles[];
+  os_type: string;
+  os_version: string;
 };
 
+export type NodeRoles = string[];
+
 export type RunResults = {
-  [key: string]: number | string;
+  queued: number;
+  pass: number;
+  fail: number;
+  dead: number;
+  running: number;
 }
 
+export const RunStatuses = [
+  "queued", "waiting", "running", "finished dead", "finished fail", "finished pass"
+] as const;
+
+export type RunStatus = (typeof RunStatuses)[number];
+
 export type Run = {
   name: string;
   branch: string;
   suite: string;
   jobs: Job[];
   scheduled: string;
+  user: string;
+  started: string;
+  posted: string;
+  updated: string;
+  started: string;
+  runtime: string;
+  sha1: string;
   results: RunResults;
+  machine_type: string;
+  status: RunStatus;
 };
 
 export type Node = {
diff --git a/src/lib/paddles.ts b/src/lib/paddles.ts
index 2b22b1b..905b79d 100644
--- a/src/lib/paddles.ts
+++ b/src/lib/paddles.ts
@@ -9,6 +9,7 @@ import type {
   StatsJobsResponse,
 } from "./paddles.d";
 
+
 const PADDLES_SERVER =
   import.meta.env.VITE_PADDLES_SERVER || "https://paddles.front.sepia.ceph.com";
 
@@ -39,6 +40,8 @@ function getURL(endpoint: string, params?: GetURLParams) {
         uri += "queued/";
         delete params_[key];
         break;
+      case "machine_type":
+        break;
       default:
         uri += `${key}/${value}/`;
         delete params_[key];
@@ -71,7 +74,7 @@ function useRun(name: string): UseQueryResult<Run> {
   const query = useQuery<Run, Error>(["run", { url }], {
     select: (data: Run) => {
       data.jobs.forEach((item) => {
-        item.id = item.job_id;
+        item.id = item.job_id + "";
       });
       return data;
     },
@@ -97,7 +100,10 @@ function useSuites() {
 
 function useMachineTypes() {
   const url = getURL("/nodes/machine_types/");
-  return useQuery(["machine_types", { url }]);
+  return useQuery(["machine_types", { url }], {
+    cacheTime: 60 * 60 * 24 * 30,
+    staleTime: 60 * 60 * 24 * 30,
+  });
 }
 
 function useNodeJobs(name: string, params: GetURLParams): UseQueryResult<NodeJobs> {
@@ -107,7 +113,7 @@ function useNodeJobs(name: string, params: GetURLParams): UseQueryResult<NodeJob
   const query = useQuery(["nodeJobs", { url }], {
     select: (data: Job[]) => {
       data.forEach((item) => {
-        item.id = item.job_id;
+        item.id = item.job_id + "";
       });
       const resp: NodeJobs = { 'jobs': data }
       return resp;
@@ -127,8 +133,8 @@ function useNode(name: string): UseQueryResult<Node[]> {
   return query;
 }
 
-function useNodes(): UseQueryResult<Node[]> {
-  const url = new URL("nodes/", PADDLES_SERVER).href
+function useNodes(machine_type: string): UseQueryResult<Node[]> {
+  const url = getURL(`/nodes/`, {machine_type});
   const query = useQuery(["nodes", { url }], {
     select: (data: Node[]) =>
       data.map((item) => {
@@ -150,7 +156,7 @@ function useStatsNodeLocks(params: GetURLParams): UseQueryResult<StatsLocksRespo
   const query = useQuery(["statsLocks", { url }], {
     select: (data: Node[]) => {
       let users = new Map();
-      data.map((node) => {
+      data.forEach((node) => {
         let owner: string = node["locked"] ? (node["locked_by"] || "-") : "(free)";
         let mtype: string = node["machine_type"] || "None";
         let mtype_dict = users.get(owner) || new Map();
diff --git a/src/lib/table.ts b/src/lib/table.ts
new file mode 100644
index 0000000..1feb95d
--- /dev/null
+++ b/src/lib/table.ts
@@ -0,0 +1,83 @@
+import { MRT_RowData, type MRT_TableOptions } from 'material-react-table';
+import { useTheme } from "@mui/material/styles";
+
+
+export default function useDefaultTableOptions<TData extends MRT_RowData>(): Partial<MRT_TableOptions<TData>> {
+  const theme = useTheme();
+  const palette = theme.palette;
+  return {
+    layoutMode: "grid",
+    defaultColumn: {
+      minSize: 20,
+      maxSize: 200,
+      size: 75,
+    },
+    // enableColumnResizing: true,
+    enableDensityToggle: false,
+    enableFullScreenToggle: false,
+    enableGlobalFilter: false,
+    // enableRowSelection: true,
+    initialState: {
+        density: "compact",
+        showColumnFilters: true,
+    },
+    mrtTheme: {
+      baseBackgroundColor: theme.palette.background.default,
+    },
+    muiTableBodyCellProps: {
+      sx: {
+        color: "black",
+        fontSize: "0.75rem",
+        whiteSpace: "normal",
+      }
+    },
+    muiTableBodyProps: {
+      sx: {
+        'tr td': {
+          paddingBottom: '5px',
+          paddingRight: 0,
+          paddingTop: '5px',
+          color: "black",
+        },
+        'tr td:has(svg)': {
+          padding: 0,
+        },
+        'tr td .MuiButtonBase-root': {color: "inherit"},
+        'tr.error td': {
+          backgroundColor: palette.error.main,
+          color: palette.error.contrastText,
+        },
+        'tr.warning td': {
+          backgroundColor: palette.warning.main,
+          color: palette.error.contrastText,
+        },
+        'tr.info td': {backgroundColor: palette.info.main},
+        'tr.success td': {backgroundColor: palette.success.main},
+        'tr.empty': {display: 'none'},
+        'td.Mui-TableBodyCell-DetailPanel': {width: "100%", paddingLeft: 5},
+        // The following two items hide button and corresponding empty "row"
+        // for items whose detail panel is empty. If the library adds a way to
+        // avoid populating detail panels on a per-row basis.
+        // :has is *almost* supported everywhere: https://caniuse.com/css-has
+        'tr:has(td):has(.Mui-TableBodyCell-DetailPanel:empty)': {height: "0px"},
+        'tr:has(+ tr.empty) button': {display: "none"},
+        '@media (prefers-color-scheme: dark)': {
+          'tr:hover td': {filter: "brightness(85%)"},
+        },
+        '@media (prefers-color-scheme: light)': {
+          'tr:hover td': {filter: "brightness(115%)"},
+        },
+      },
+    },
+    muiTableBodyRowProps: {
+      sx: {
+        td: {color: theme.palette.primary.contrastText},
+      },
+    },
+    muiTablePaperProps: {
+      sx: {
+        border: "1px solid " + theme.palette.grey[800],
+      },
+    },
+  }
+}
diff --git a/src/lib/teuthologyAPI.ts b/src/lib/teuthologyAPI.ts
index 19b09ba..41f6651 100644
--- a/src/lib/teuthologyAPI.ts
+++ b/src/lib/teuthologyAPI.ts
@@ -47,7 +47,7 @@ function useUserData(): Map<string, string> {
         const cookie_ = cookie.replace(/\\073/g, ';');
         let cookieMap: Map<string, string> = new Map();
         let cookieSegments = cookie_.split(";");
-        cookieSegments.map((cookie: string) => {
+        cookieSegments.forEach((cookie: string) => {
             let [key, value] = cookie.split("=");
             cookieMap.set(key.trim(), value.trim());
         })
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..f54171d
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,52 @@
+import { green, lightBlue, orange, red } from "@mui/material/colors";
+import {
+  type ThemeOptions,
+} from "@mui/material/styles";
+
+export default function getThemeOptions(mode: "dark" | "light"): ThemeOptions {
+  const darkShade = 200;
+  const lightShade = 100;
+  return mode === "dark"? {
+    palette: {
+      mode: "dark",
+      background: {
+        default: "#181818",
+        paper: "#303030",
+      },
+      primary: {
+        main: lightBlue[700],
+      },
+      error: {
+        main: red[darkShade],
+      },
+      info: {
+        main: lightBlue[darkShade],
+      },
+      success: {
+        main: green[darkShade],
+      },
+      warning: {
+        main: orange[darkShade],
+      },
+    },
+  } : {
+    palette: {
+      mode: "light",
+      primary: {
+        main: lightBlue[600],
+      },
+      error: {
+        main: red[lightShade],
+      },
+      info: {
+        main: lightBlue[lightShade],
+      },
+      success: {
+        main: green[lightShade],
+      },
+      warning: {
+        main: orange[lightShade],
+      },
+    },
+  };
+}
diff --git a/src/lib/utils.js b/src/lib/utils.js
index fd0cb6f..2b7cab8 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -2,10 +2,15 @@ import { format } from "date-fns";
 import convert from "color-convert";
 
 function formatDate(orig) {
-  if (!orig) return;
+  if (!orig) return "";
   return format(new Date(orig), "yyyy-MM-dd HH:mm:ss");
 }
 
+function formatDay(orig) {
+  if (!orig) return "";
+  return format(new Date(orig), "yyyy-MM-dd");
+}
+
 function pad(num) {
   return `${num}`.padStart(2, "0");
 }
@@ -44,4 +49,4 @@ function dirName(path) {
   return array.join("/");
 }
 
-export { formatDate, getDuration, formatDuration, colorTint, dirName };
+export { formatDate, formatDay, getDuration, formatDuration, colorTint, dirName };
diff --git a/src/pages/Node/index.tsx b/src/pages/Node/index.tsx
index 6b37cdb..89fcee9 100644
--- a/src/pages/Node/index.tsx
+++ b/src/pages/Node/index.tsx
@@ -10,7 +10,7 @@ import type { NodeParams } from "../../lib/paddles.d";
 import { useNode, useNodeJobs } from "../../lib/paddles";
 
 export default function Node() {
-  const [params, setParams] = useQueryParams({
+  const [params, _] = useQueryParams({
     page: NumberParam,
     pageSize: NumberParam,
   });
@@ -33,10 +33,10 @@ export default function Node() {
         Node: {name}
       </Typography>
 
-      <div style={{ height: "auto", display: "flex" }}>
-        <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "auto", gap: 30 }}>
-          <NodeList query={detailsQuery} params={params} setter={setParams} />
-          <JobList query={jobsQuery} params={params} setter={setParams} pagingMode={"server"}  />
+      <div>
+        <div>
+          <NodeList query={detailsQuery} />
+          <JobList query={jobsQuery} sortMode={"time"} />
         </div>
       </div>
     </div>
diff --git a/src/pages/Nodes/index.tsx b/src/pages/Nodes/index.tsx
index a8ddb9f..f528878 100644
--- a/src/pages/Nodes/index.tsx
+++ b/src/pages/Nodes/index.tsx
@@ -8,15 +8,16 @@ import NodeList from "../../components/NodeList";
 import { useMachineTypes } from "../../lib/paddles";
 import { useNodes } from "../../lib/paddles";
 
+
 export default function Nodes() {
   const [params, setParams] = useQueryParams({
     machine_type: StringParam,
   });
   const { machine_type } = params;
-  const query = useNodes();
+  const query = useNodes(machine_type || "");
   if (query.isError) return null;
 
-  
+ 
   return (
     <div>
       <Helmet>
@@ -41,7 +42,7 @@ export default function Nodes() {
           />
         </div>
       </div>
-      <NodeList query={query} params={params} setter={setParams} />
+      <NodeList query={query} />
     </div>
   );
 }
diff --git a/src/pages/Queue/index.jsx b/src/pages/Queue/index.jsx
deleted file mode 100644
index 50c9dbc..0000000
--- a/src/pages/Queue/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { Helmet } from "react-helmet";
-
-import RunList from "../../components/RunList";
-
-export default function Queue() {
-  const params = { queued: true };
-  return (
-    <div>
-      <Helmet>
-        <title>Queue - Pulpito</title>
-      </Helmet>
-      <Typography variant="h5" style={{ margin: "20px" }}>
-        Queue
-      </Typography>
-      <RunList params={params} />
-    </div>
-  );
-}
diff --git a/src/pages/Queue/index.tsx b/src/pages/Queue/index.tsx
new file mode 100644
index 0000000..4117c84
--- /dev/null
+++ b/src/pages/Queue/index.tsx
@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { useQueryParams, BooleanParam, withDefault } from "use-query-params";
+import Typography from "@mui/material/Typography";
+
+import RunList from "../../components/RunList";
+
+export default function Queue() {
+  const [params, setParams] = useQueryParams({
+    queued: withDefault(BooleanParam, true),
+  }, {
+    removeDefaultsFromUrl: true,
+    updateType: "push",
+  });
+  const tableOptions = {
+    enableFilters: false,
+    enablePagination: false,
+  }
+  return (
+    <div>
+      <Helmet>
+        <title>Queue - Pulpito</title>
+      </Helmet>
+      <Typography variant="h5" style={{ margin: "20px" }}>
+        Queue
+      </Typography>
+      <RunList params={params} setter={setParams} tableOptions={tableOptions} />
+    </div>
+  );
+}
diff --git a/src/pages/Run/index.tsx b/src/pages/Run/index.tsx
index eec797c..a71382c 100644
--- a/src/pages/Run/index.tsx
+++ b/src/pages/Run/index.tsx
@@ -3,12 +3,10 @@ import { useQueryParams, StringParam, NumberParam } from "use-query-params";
 import { styled } from "@mui/material/styles";
 import { useParams } from "react-router-dom";
 import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
 import { format } from "date-fns";
 import { Helmet } from "react-helmet";
 
-import type { Run, RunParams } from "../../lib/paddles.d";
+import type { Run as Run_, RunParams } from "../../lib/paddles.d";
 
 import { useRun } from "../../lib/paddles";
 import JobList from "../../components/JobList";
@@ -38,10 +36,6 @@ const FilterLink = (props: PropsWithChildren<FilterLinkProps>) => (
   </Link>
 );
 
-type StatusLabels = {
-  [key: string]: string;
-}
-
 export default function Run() {
   const [params, setParams] = useQueryParams({
     status: StringParam,
@@ -52,15 +46,9 @@ export default function Run() {
   const query = useRun(name === undefined ? "" : name);
   if (query === null) return <Typography>404</Typography>;
   if (query.isError) return null;
-  const data: Run | undefined = query.data;
+  const data: Run_ | undefined = query.data;
   const suite = data?.suite;
   const branch = query.data?.branch;
-  const statuses = ["pass", "fail", "dead", "running", "waiting", "queued"];
-  const statusLabels: StatusLabels = {};
-  statuses.forEach(item => {
-    statusLabels[item] = item.charAt(0).toUpperCase() + item.slice(1);
-    if ( data?.results[item] ) statusLabels[item] += ` (${data.results[item]})`;
-  });
   const date = query.data?.scheduled
     ? format(new Date(query.data.scheduled), "yyyy-MM-dd")
     : null;
@@ -84,28 +72,7 @@ export default function Run() {
           date
         </FilterLink>
       </div>
-      <ButtonGroup style={{ display: "flex", justifyContent: "center" }}>
-        <Button
-          onClick={() => {
-            setParams({ status: null });
-          }}
-          variant={params.status ? "outlined" : "contained"}
-        >
-          All
-        </Button>
-        {statuses.filter(item => data?.results[item]).map((item) => (
-          <Button
-            key={item}
-            onClick={() => {
-              setParams({ status: item });
-            }}
-            variant={params.status === item ? "contained" : "outlined"}
-          >
-            {statusLabels[item]}
-          </Button>
-        ))}
-      </ButtonGroup>
-      <JobList query={query} params={params} setter={setParams} pagingMode={"client"} />
+      <JobList query={query} params={params} setter={setParams} />
     </Root>
   );
 }
diff --git a/src/pages/Runs/index.tsx b/src/pages/Runs/index.tsx
index 8f0d00f..ffe298b 100644
--- a/src/pages/Runs/index.tsx
+++ b/src/pages/Runs/index.tsx
@@ -1,40 +1,24 @@
-import { useCallback, ChangeEvent } from "react";
-import { useQueryParams, StringParam, NumberParam } from "use-query-params";
+import { useQueryParams, StringParam, NumberParam, withDefault } from "use-query-params";
 import Typography from "@mui/material/Typography";
-import TextField from "@mui/material/TextField";
 import { Helmet } from "react-helmet";
 
-import FilterMenu from "../../components/FilterMenu";
 import RunList from "../../components/RunList";
 
-import {
-  useBranches,
-  useMachineTypes,
-  useSuites,
-  useStatuses,
-} from "../../lib/paddles";
-
 export default function Runs() {
   const [params, setParams] = useQueryParams({
     branch: StringParam,
     date: StringParam,
     machine_type: StringParam,
-    page: NumberParam,
+    page: withDefault(NumberParam, 0),
     pageSize: NumberParam,
     sha1: StringParam,
     status: StringParam,
     suite: StringParam,
     user: StringParam,
+  }, {
+    removeDefaultsFromUrl: true,
+    updateType: "push",
   });
-  const { branch, date, machine_type, sha1, status, suite } = params;
-  const onSha1Change = (evt: ChangeEvent) => {
-    const newValue = (evt.target as HTMLTextAreaElement).value;
-    setParams({sha1: newValue || null});
-  };
-  const onDateChange = useCallback((evt: ChangeEvent) => {
-    const newValue = (evt.target as HTMLTextAreaElement).value;
-    setParams({ date: newValue || null });
-  }, []);
   return (
     <div>
       <Helmet>
@@ -43,59 +27,6 @@ export default function Runs() {
       <Typography variant="h5" style={{ margin: "20px" }}>
         Runs
       </Typography>
-      <div style={{ height: "auto", display: "flex" }}>
-        <div style={{ display: "flex", flexWrap: "wrap" }}>
-          <div>
-            <Typography style={{ padding: "10px" }}>
-              Filter&nbsp;by:
-            </Typography>
-          </div>
-          <TextField
-            label="SHA1"
-            size="small"
-            margin="dense"
-            style={{ margin: "0px" }}
-            onChange={onSha1Change}
-            value={sha1 || ""}
-          />
-          <TextField
-            type="date"
-            size="small"
-            margin="dense"
-            style={{ margin: "0px" }}
-            onChange={onDateChange}
-            value={date || ""}
-          />
-          <FilterMenu
-            type="status"
-            value={status}
-            setter={setParams}
-            optionsHook={useStatuses}
-            width={200}
-          />
-          <FilterMenu
-            type="branch"
-            value={branch}
-            setter={setParams}
-            optionsHook={useBranches}
-            width={250}
-          />
-          <FilterMenu
-            type="suite"
-            value={suite}
-            setter={setParams}
-            optionsHook={useSuites}
-            width={250}
-          />
-          <FilterMenu
-            type="machine_type"
-            value={machine_type}
-            setter={setParams}
-            optionsHook={useMachineTypes}
-            width={150}
-          />
-        </div>
-      </div>
       <RunList params={params} setter={setParams} />
     </div>
   );
diff --git a/src/pages/StatsNodesJobs/index.tsx b/src/pages/StatsNodesJobs/index.tsx
index d9c04c0..98b31e0 100644
--- a/src/pages/StatsNodesJobs/index.tsx
+++ b/src/pages/StatsNodesJobs/index.tsx
@@ -1,104 +1,128 @@
 import { useQueryParams, StringParam, NumberParam } from "use-query-params";
 import Typography from "@mui/material/Typography";
 import { Helmet } from "react-helmet";
-import type { GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import Link from '@mui/material/Link';
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 
-import DataGrid from "../../components/DataGrid";
 import FilterMenu from "../../components/FilterMenu";
+import useDefaultTableOptions from "../../lib/table";
 
-import { useStatsNodeJobs } from "../../lib/paddles";
-import { useMachineTypes } from "../../lib/paddles";
+import { useMachineTypes, useStatsNodeJobs } from "../../lib/paddles";
+import { type StatsJobsResponse } from "../../lib/paddles.d";
 
 
-export const columns: GridColDef[] = [
-    {
-        field: "name",
-        width: 200,
-        renderCell: (params: GridRenderCellParams) => {
-          return <Link href={`/nodes/${params.value}/`} color="inherit">{params.value?.split(".")[0]}</Link>;
-        },
-    },
-    {
-        field: "pass",
-        width: 125,
-    },
-    {
-        field: "fail",
-        width: 125,
-    },
-    {
-        field: "dead",
-        width: 125,
-    },
-    {
-        field: "unknown",
-        width: 125,
-    },
-    {
-        field: "running",
-        width: 125,
-    },
-    {
-        field: "total",
-        width: 125,
+export const columns: MRT_ColumnDef<StatsJobsResponse>[] = [
+  {
+    header: "name",
+    accessorKey: "name",
+    size: 200,
+    Cell: ({ row }) => {
+      const name = row.original.name;
+      return <Link href={`/nodes/${name}/`} color="inherit">{name.split(".")[0]}</Link>;
     },
+  },
+  {
+    header: "pass",
+    accessorKey: "pass",
+    size: 125,
+  },
+  {
+    header: "fail",
+    accessorKey: "fail",
+    size: 125,
+  },
+  {
+    header: "dead",
+    accessorKey: "dead",
+    size: 125,
+  },
+  {
+    header: "unknown",
+    accessorKey: "unknown",
+    size: 125,
+  },
+  {
+    header: "running",
+    accessorKey: "running",
+    size: 125,
+  },
+  {
+    header: "total",
+    accessorKey: "total",
+    size: 125,
+  },
 
 ]
 
 export default function StatsNodesJobs() {
-    const [params, setParams] = useQueryParams({
-        machine_type: StringParam,
-        since_days: NumberParam,
-    });
-    const machine_type = params["machine_type"];
-    const since_days = params["since_days"];
-    const query = useStatsNodeJobs(params);
+  const [params, setParams] = useQueryParams({
+    machine_type: StringParam,
+    since_days: NumberParam,
+  });
+  const machine_type = params["machine_type"];
+  const since_days = params["since_days"];
+  const query = useStatsNodeJobs(params);
+  const options = useDefaultTableOptions<StatsJobsResponse>();
 
-    if (query === null) return <Typography>404</Typography>;
-    if (query.isError) return null;
+  const data = query.data || [];
+  const table = useMaterialReactTable({
+    ...options,
+    columns,
+    data: data,
+    rowCount: data.length,
+    initialState: {
+      ...options.initialState,
+      columnVisibility: {
+        posted: false,
+        updated: false,
+      },
+      pagination: {
+        pageIndex: 0,
+        pageSize: 25,
+      },
+      sorting: [
+        {
+          id: "name",
+          desc: false,
+        },
+      ],
+    },
+    state: {
+      isLoading: query.isLoading || query.isFetching,
+    },
+  });
+  if (query === null) return <Typography>404</Typography>;
+  if (query.isError) return null;
+  return (
+    <div>
+      <Helmet>
+        <title>Stats Nodes Jobs - Pulpito</title>
+      </Helmet>
+      <Typography variant="h6" style={{ marginBottom: "20px" }}>
+        {since_days || 14}-day stats for {machine_type || "all"} nodes
+      </Typography>
 
-    return (
-        <div>
-            <Helmet>
-                <title>Stats Nodes Jobs - Pulpito</title>
-            </Helmet>
-            <Typography variant="h6" style={{ marginBottom: "20px" }}>
-                {since_days || 14}-day stats for {machine_type || "all"} nodes
+      <div style={{ height: "auto", display: "flex" }}>
+        <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "auto" }}>
+          <div>
+            <Typography style={{ padding: "10px" }}>
+              Filter&nbsp;by:
             </Typography>
-
-            <div style={{ height: "auto", display: "flex" }}>
-                <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "auto" }}>
-                    <div>
-                        <Typography style={{ padding: "10px" }}>
-                            Filter&nbsp;by:
-                        </Typography>
-                    </div>
-                    <FilterMenu
-                        type="machine_type"
-                        value={machine_type}
-                        setter={setParams}
-                        optionsHook={useMachineTypes}
-                        width={150}
-                    />
-                </div>
-            </div>
-            <DataGrid
-                columns={columns}
-                rows={query.data || []}
-                loading={query.isLoading || query.isFetching}
-                hideFooter={true}
-                initialState={{
-                    sorting: {
-                      sortModel: [
-                        {
-                          field: "name",
-                          sort: "asc",
-                        },
-                      ],
-                    },
-                }}
-            />
+          </div>
+          <FilterMenu
+            type="machine_type"
+            value={machine_type}
+            setter={setParams}
+            optionsHook={useMachineTypes}
+            width={150}
+          />
         </div>
-    );
+      </div>
+      <MaterialReactTable table={table} />
+    </div>
+  );
 }
diff --git a/src/pages/StatsNodesLock/index.tsx b/src/pages/StatsNodesLock/index.tsx
index 8a2ab37..2a8713a 100644
--- a/src/pages/StatsNodesLock/index.tsx
+++ b/src/pages/StatsNodesLock/index.tsx
@@ -1,83 +1,83 @@
 import { useQueryParams, StringParam } from "use-query-params";
 import Typography from "@mui/material/Typography";
 import { Helmet } from "react-helmet";
-import type { GridColDef } from "@mui/x-data-grid";
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 
-import DataGrid from "../../components/DataGrid";
-import FilterMenu from "../../components/FilterMenu";
+import useDefaultTableOptions from "../../lib/table";
 
 import { useStatsNodeLocks } from "../../lib/paddles";
-import { useMachineTypes } from "../../lib/paddles";
+import { type StatsLocksResponse } from "../../lib/paddles.d";
 
 
-export const columns: GridColDef[] = [
-    {
-        field: "owner",
-        width: 200,
-    },
-    {
-        headerName: "machine type",
-        field: "machine_type",
-        width: 200,
-    },
-    {
-        field: "count",
-        width: 125,
-    },
+export const columns: MRT_ColumnDef<StatsLocksResponse>[] = [
+  {
+    header: "owner",
+    accessorKey: "owner",
+    size: 200,
+  },
+  {
+    header: "machine type",
+    accessorKey: "machine_type",
+    size: 200,
+  },
+  {
+    header: "count",
+    accessorKey: "count",
+    size: 125,
+  },
 
 ]
 
 export default function StatsNodesLock() {
-    const [params, setParams] = useQueryParams({
-        machine_type: StringParam,
-    });
-    const machine_type = params["machine_type"];
-    const query = useStatsNodeLocks(params);
-
-    if (query === null) return <Typography>404</Typography>;
-    if (query.isError) return null;
-
-    return (
-        <div>
-            <Helmet>
-                <title>Stats Nodes Lock - Pulpito</title>
-            </Helmet>
-            <Typography variant="h6" style={{ marginBottom: "20px" }}>
-                Machine usage for up {machine_type || ""} nodes
-            </Typography>
-
-            <div style={{ height: "auto", display: "flex" }}>
-                <div style={{ display: "flex", flexWrap: "wrap", marginLeft: "auto" }}>
-                    <div>
-                        <Typography style={{ padding: "10px" }}>
-                            Filter&nbsp;by:
-                        </Typography>
-                    </div>
-                    <FilterMenu
-                        type="machine_type"
-                        value={machine_type}
-                        setter={setParams}
-                        optionsHook={useMachineTypes}
-                        width={150}
-                    />
-                </div>
-            </div>
-            <DataGrid
-                columns={columns}
-                rows={query.data || []}
-                loading={query.isLoading || query.isFetching}
-                hideFooter={true}
-                initialState={{
-                    sorting: {
-                      sortModel: [
-                        {
-                          field: "owner",
-                          sort: "asc",
-                        },
-                      ],
-                    },
-                }}
-            />
-        </div>
-    );
+  // Avoid "warning  '_' is assigned a value but never used" by ignoring the setter
+  const params = useQueryParams({
+    machine_type: StringParam,
+  })[0];
+  const machine_type = params.machine_type;
+  const query = useStatsNodeLocks(params);
+  const options = useDefaultTableOptions<StatsLocksResponse>();
+  const data = query.data || [];
+  const table = useMaterialReactTable({
+    ...options,
+    columns,
+    data: data,
+    rowCount: data.length,
+    initialState: {
+      ...options.initialState,
+      columnVisibility: {
+        posted: false,
+        updated: false,
+      },
+      pagination: {
+        pageIndex: 0,
+        pageSize: 25,
+      },
+      sorting: [
+        {
+          id: "owner",
+          desc: false,
+        },
+      ],
+    },
+    state: {
+      isLoading: query.isLoading || query.isFetching,
+    },
+  });
+  if (query === null) return <Typography>404</Typography>;
+  if (query.isError) return null;
+  return (
+    <div>
+      <Helmet>
+        <title>Stats Nodes Lock - Pulpito</title>
+      </Helmet>
+      <Typography variant="h6" style={{ marginBottom: "20px" }}>
+        Machine usage for up {machine_type || ""} nodes
+      </Typography>
+      <MaterialReactTable table={table} />
+    </div>
+  );
 }