diff --git a/blocks/eda-frontend/package-lock.json b/blocks/eda-frontend/package-lock.json
index 10d18589..6c58643a 100644
--- a/blocks/eda-frontend/package-lock.json
+++ b/blocks/eda-frontend/package-lock.json
@@ -8,9 +8,18 @@
       "name": "eda-frontend",
       "version": "1.0.0",
       "dependencies": {
-        "@material-ui/core": "^4.9.11",
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.52",
+        "@material-ui/styles": "^4.11.5",
+        "@mui/core": "^5.0.0-alpha.54",
+        "@mui/icons-material": "^5.15.15",
+        "@mui/lab": "^5.0.0-alpha.170",
+        "@mui/material": "^5.15.15",
+        "@mui/styles": "^5.15.15",
+        "@reduxjs/toolkit": "^2.2.3",
         "axios": "^1.6.7",
         "canvg": "^4.0.1",
         "file-saver": "^2.0.2",
@@ -19,10 +28,10 @@
         "mxgraph": "^4.2.2",
         "prop-types": "^15.8.1",
         "query-string": "^9.0.0",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-loader-spinner": "^6.1.6",
-        "react-redux": "^7.2.0",
+        "react-redux": "^7.2.9",
         "react-router-dom": "^5.1.2",
         "redux": "^4.0.5",
         "redux-thunk": "^2.3.0",
@@ -67,7 +76,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
       "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
@@ -323,7 +331,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
       "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -446,7 +453,6 @@
       "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==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -455,7 +461,6 @@
       "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==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -502,7 +507,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
       "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -1883,16 +1887,21 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.13",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
@@ -1932,7 +1941,6 @@
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
       "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -2235,6 +2243,70 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -2253,11 +2325,114 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/serialize/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
       "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2353,6 +2528,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
+      "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz",
+      "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
+      "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3246,6 +3455,51 @@
         }
       }
     },
+    "node_modules/@material-ui/core/node_modules/@material-ui/system": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
+      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.3",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/material-ui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@material-ui/core/node_modules/@material-ui/utils": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@material-ui/icons": {
       "version": "4.11.3",
       "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
@@ -3295,6 +3549,23 @@
         }
       }
     },
+    "node_modules/@material-ui/lab/node_modules/@material-ui/utils": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -3336,40 +3607,425 @@
         }
       }
     },
-    "node_modules/@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+    "node_modules/@material-ui/styles/node_modules/@material-ui/utils": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
       "dependencies": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
+    "node_modules/@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.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/base/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/core": {
+      "version": "5.0.0-alpha.54",
+      "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz",
+      "integrity": "sha512-8TxdHqDdSb6wjhsnpE5n7qtkFKDG3PUSlVY0gR3VcdsHXscUY13l3VbMQW1brI4D/R9zx5VYmxIHWaHFgw4RtA==",
+      "deprecated": "You can now upgrade to @mui/base. See https://github.com/mui/material-ui/releases/tag/v5.1.1",
+      "dependencies": {
+        "@babel/runtime": "^7.16.0",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@mui/utils": "^5.1.0",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
+      "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.15.tgz",
+      "integrity": "sha512-kkeU/pe+hABcYDH6Uqy8RmIsr2S/y5bP2rp+Gat4CcRjCcVne6KudS1NrZQhUCRysrTDCAhcbcf9gt+/+pGO2g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.170",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.170.tgz",
+      "integrity": "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.15.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
+      "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.15",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.14",
+        "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"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/@mui/styles": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.15.15.tgz",
+      "integrity": "sha512-KBklDHNEddodEjcnZ+/3ieVcp+Mb/pzdQzAagUpt4RDd9m/mn+2JkqJh2rnrWUwS//YLsbL3IbUrONYn5yPxfQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/hash": "^0.9.1",
+        "@mui/private-theming": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.10.0",
+        "jss-plugin-camel-case": "^10.10.0",
+        "jss-plugin-default-unit": "^10.10.0",
+        "jss-plugin-global": "^10.10.0",
+        "jss-plugin-nested": "^10.10.0",
+        "jss-plugin-props-sort": "^10.10.0",
+        "jss-plugin-rule-value-function": "^10.10.0",
+        "jss-plugin-vendor-prefixer": "^10.10.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"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styles/node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@mui/styles/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/styles/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.14",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
         "@types/react": {
           "optional": true
         }
       }
     },
-    "node_modules/@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+    "node_modules/@mui/system/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/system/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
       "peerDependencies": {
-        "@types/react": "*"
+        "@types/react": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -3377,23 +4033,38 @@
         }
       }
     },
-    "node_modules/@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+    "node_modules/@mui/utils": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
       "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "@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": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3520,6 +4191,60 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz",
+      "integrity": "sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.4.tgz",
+      "integrity": "sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4143,8 +4868,7 @@
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "node_modules/@types/prettier": {
       "version": "2.7.2",
@@ -4153,9 +4877,9 @@
       "dev": true
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
@@ -4202,9 +4926,9 @@
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -5043,7 +5767,6 @@
       "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==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -5543,7 +6266,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
       "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "cosmiconfig": "^7.0.0",
@@ -5558,7 +6280,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
       "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "dev": true,
       "dependencies": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -5912,9 +6633,9 @@
       }
     },
     "node_modules/builtins": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+      "integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -5935,9 +6656,9 @@
       }
     },
     "node_modules/builtins/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -5989,7 +6710,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -6094,7 +6814,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -6262,7 +6981,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -6270,8 +6988,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -6422,8 +7139,7 @@
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
       "version": "0.6.0",
@@ -7375,9 +8091,9 @@
       }
     },
     "node_modules/dom-helpers/node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
@@ -7584,7 +8300,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -7813,7 +8528,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -7956,6 +8670,58 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-compat-utils": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.0.tgz",
+      "integrity": "sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/eslint-compat-utils/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-compat-utils/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-compat-utils/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/eslint-config-react-app": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
@@ -8059,50 +8825,25 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/eslint-plugin-es": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz",
-      "integrity": "sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==",
+    "node_modules/eslint-plugin-es-x": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.6.0.tgz",
+      "integrity": "sha512-I0AmeNgevgaTR7y2lrVCJmGYF0rjoznpDvqV/kIkZSZbZ8Rw3eu4cGlvBBULScfkSOCzqKbff5LR4CNrV7mZHA==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "eslint-utils": "^2.0.0",
-        "regexpp": "^3.0.0"
+        "@eslint-community/eslint-utils": "^4.1.2",
+        "@eslint-community/regexpp": "^4.6.0",
+        "eslint-compat-utils": "^0.5.0"
       },
       "engines": {
-        "node": ">=8.10.0"
+        "node": "^14.18.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
+        "url": "https://github.com/sponsors/ota-meshi"
       },
       "peerDependencies": {
-        "eslint": ">=4.19.1"
-      }
-    },
-    "node_modules/eslint-plugin-es/node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
-    "node_modules/eslint-plugin-es/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4"
+        "eslint": ">=8"
       }
     },
     "node_modules/eslint-plugin-flowtype": {
@@ -8230,23 +8971,26 @@
       }
     },
     "node_modules/eslint-plugin-n": {
-      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.6.1.tgz",
-      "integrity": "sha512-R9xw9OtCRxxaxaszTQmQAlPgM+RdGjaL1akWuY/Fv9fRAi8Wj4CUKc6iYVG8QNRjRuo8/BqVYIpfqberJUEacA==",
+      "version": "16.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.6.2.tgz",
+      "integrity": "sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==",
       "dev": true,
       "peer": true,
       "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
         "builtins": "^5.0.1",
-        "eslint-plugin-es": "^4.1.0",
-        "eslint-utils": "^3.0.0",
-        "ignore": "^5.1.1",
-        "is-core-module": "^2.11.0",
+        "eslint-plugin-es-x": "^7.5.0",
+        "get-tsconfig": "^4.7.0",
+        "globals": "^13.24.0",
+        "ignore": "^5.2.4",
+        "is-builtin-module": "^3.2.1",
+        "is-core-module": "^2.12.1",
         "minimatch": "^3.1.2",
-        "resolve": "^1.22.1",
-        "semver": "^7.3.8"
+        "resolve": "^1.22.2",
+        "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=12.22.0"
+        "node": ">=16.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/mysticatea"
@@ -8255,6 +8999,22 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-plugin-n/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-plugin-n/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -8269,9 +9029,9 @@
       }
     },
     "node_modules/eslint-plugin-n/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -8284,6 +9044,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/eslint-plugin-n/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-plugin-n/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -9243,6 +10016,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -9537,7 +10315,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -9650,6 +10427,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
+      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -9852,7 +10642,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -9912,7 +10701,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -10294,7 +11082,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -10414,8 +11201,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-async-function": {
       "version": "2.0.0",
@@ -10472,6 +11258,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-builtin-module": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "builtin-modules": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -10488,7 +11290,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -13225,8 +14026,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
@@ -13280,9 +14080,9 @@
       }
     },
     "node_modules/jss": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.2.tgz",
-      "integrity": "sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
+      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "csstype": "^3.0.2",
@@ -13295,76 +14095,76 @@
       }
     },
     "node_modules/jss-plugin-camel-case": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz",
-      "integrity": "sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
+      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "hyphenate-style-name": "^1.0.3",
-        "jss": "10.9.2"
+        "jss": "10.10.0"
       }
     },
     "node_modules/jss-plugin-default-unit": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz",
-      "integrity": "sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
+      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
+        "jss": "10.10.0"
       }
     },
     "node_modules/jss-plugin-global": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz",
-      "integrity": "sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
+      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
+        "jss": "10.10.0"
       }
     },
     "node_modules/jss-plugin-nested": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz",
-      "integrity": "sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
+      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2",
+        "jss": "10.10.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "node_modules/jss-plugin-props-sort": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz",
-      "integrity": "sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
+      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
+        "jss": "10.10.0"
       }
     },
     "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz",
-      "integrity": "sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
+      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2",
+        "jss": "10.10.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz",
-      "integrity": "sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA==",
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
+      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "css-vendor": "^2.0.8",
-        "jss": "10.9.2"
+        "jss": "10.10.0"
       }
     },
     "node_modules/jss/node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
@@ -13455,8 +14255,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/loader-runner": {
       "version": "4.3.0",
@@ -14281,7 +15080,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -14293,7 +15091,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -14362,8 +15159,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
       "version": "1.8.0",
@@ -14377,7 +15173,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -16152,13 +16947,11 @@
       }
     },
     "node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -16310,17 +17103,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^16.14.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-error-overlay": {
@@ -16669,7 +17460,8 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -16814,11 +17606,15 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/reselect": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
+      "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -16856,7 +17652,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -16866,6 +17661,16 @@
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
       "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -17219,12 +18024,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -18108,7 +18912,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -18154,7 +18957,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -18555,7 +19357,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -20065,7 +20866,6 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
diff --git a/blocks/eda-frontend/package.json b/blocks/eda-frontend/package.json
index 7895581e..8eb26b29 100644
--- a/blocks/eda-frontend/package.json
+++ b/blocks/eda-frontend/package.json
@@ -4,9 +4,18 @@
   "description": "Xcos Blocks Frontend",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.9.11",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.52",
+    "@material-ui/styles": "^4.11.5",
+    "@mui/core": "^5.0.0-alpha.54",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.15",
+    "@mui/styles": "^5.15.15",
+    "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.7",
     "canvg": "^4.0.1",
     "file-saver": "^2.0.2",
@@ -15,10 +24,10 @@
     "mxgraph": "^4.2.2",
     "prop-types": "^15.8.1",
     "query-string": "^9.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-loader-spinner": "^6.1.6",
-    "react-redux": "^7.2.0",
+    "react-redux": "^7.2.9",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js
index ba6668e4..8fc56ee7 100644
--- a/blocks/eda-frontend/src/App.js
+++ b/blocks/eda-frontend/src/App.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
-import CircularProgress from '@material-ui/core/CircularProgress'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import Navbar from './components/Shared/Navbar'
 import Home from './pages/Home'
@@ -14,7 +14,7 @@ import Dashboard from './pages/Dashboard'
 import SignUp from './pages/signUp'
 
 import { useSelector, useDispatch } from 'react-redux'
-import { loadUser } from './redux/actions/index'
+import { loadUser } from './redux/slices/authSlice'
 
 // Controls Private routes, this are accessible for authenticated users.  [ e.g : dashboard ]
 // and restricted routes disabled for authenticated users. [ e.g : login , signup ]
@@ -27,7 +27,7 @@ function PrivateRoute ({ component: Component, ...rest }) {
   return (
     <Route
       {...rest} render={props => {
-        if (auth.isLoading) {
+        if (auth?.isLoading) {
           return <CircularProgress style={{ margin: '50vh 50vw' }} />
         } else if (!auth.isAuthenticated) {
           return <Redirect to='/login' />
@@ -53,9 +53,9 @@ function PublicRoute ({ component: Component, restricted, nav, ...rest }) {
   return (
     <Route
       {...rest} render={props => {
-        if (auth.isLoading) {
+        if (auth?.isLoading) {
           return <CircularProgress style={{ margin: '50vh 50vw' }} />
-        } else if (auth.isAuthenticated && restricted) {
+        } else if (auth?.isAuthenticated && restricted) {
           return <Redirect to='/dashboard' />
         } else if (nav) {
           return (<><Navbar /><Component {...props} /></>)
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
index 32931a90..3b3e3786 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index 6059c523..11ad69e5 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { Avatar, Divider, Hidden, InputBase, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@material-ui/core'
+import { Avatar, Divider, Hidden, InputBase, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
-import { makeStyles } from '@material-ui/core/styles'
-import { deepPurple } from '@material-ui/core/colors'
+import { makeStyles } from '@mui/styles'
+import { deepPurple } from '@mui/material/colors'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index d48ab7c9..c63b75ec 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { Tab, Box, Tabs, AppBar, Typography, Grid } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Tab, Box, Tabs, AppBar, Typography, Grid } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import PropTypes from 'prop-types'
 
 import SchematicCard from './SchematicCard'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
index 8431639f..9860bc2d 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
@@ -1,13 +1,13 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Button, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Snackbar, Tooltip, Typography } from '@material-ui/core'
-import ShareIcon from '@material-ui/icons/Share'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Snackbar, Tooltip, Typography } from '@mui/material'
+import ShareIcon from '@mui/icons-material/Share'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
-import DeleteIcon from '@material-ui/icons/Delete'
+import DeleteIcon from '@mui/icons-material/Delete'
 import { useDispatch } from 'react-redux'
-import { deleteSchematic } from '../../redux/actions/index'
-import MuiAlert from '@material-ui/lab/Alert'
+import { deleteSchematic } from '../../redux/slices/dashboardSlice'
+import MuiAlert from '@mui/lab/Alert'
 
 const useStyles = makeStyles((theme) => ({
   media: {
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
index 9b9bef6b..d2d1f9a4 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react'
-import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
 
 import SchematicCard from './SchematicCard'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 
 const useStyles = makeStyles({
   mainHead: {
@@ -57,7 +57,6 @@ export default function SchematicsList () {
   const classes = useStyles()
   const auth = useSelector(state => state.authReducer)
   const schematics = useSelector(state => state.dashboardReducer.schematics)
-
   const dispatch = useDispatch()
 
   // For Fetching Saved Schematics
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
index 196d75e4..0770a629 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
@@ -2,10 +2,10 @@
 import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import mxGraphFactory from 'mxgraph'
-import { ListItem, ListItemText, Button, TextField } from '@material-ui/core'
+import { ListItem, ListItemText, Button, TextField } from '@mui/material'
 import { TailSpin } from 'react-loader-spinner'
 
-import { setCompProperties } from '../../redux/actions/index'
+import { setCompPropertiesAsync } from '../../redux/slices/componentPropertiesSlice'
 import { graph } from './Helper/ComponentDrag'
 import { portSize } from './Helper/SvgParser'
 
@@ -146,16 +146,16 @@ const getErrorText = (compType) => {
 export default function ComponentProperties () {
   // compProperties that are displayed on the right side bar when user clicks on a component on the grid.
 
-  const compProperties = useSelector(state => state.componentPropertiesReducer.compProperties)
-  const isOpen = useSelector(state => state.componentPropertiesReducer.isPropertiesWindowOpen)
-  const block = useSelector(state => state.componentPropertiesReducer.block)
-  const name = useSelector(state => state.componentPropertiesReducer.name)
-  const parameterValues = useSelector(state => state.componentPropertiesReducer.parameter_values)
+  const compProperties = useSelector(state => state.componentProperties?.compProperties)
+  const isOpen = useSelector(state => state.componentProperties?.isPropertiesWindowOpen)
+  const block = useSelector(state => state.componentProperties?.block)
+  const name = useSelector(state => state.componentProperties?.name)
+  const parameterValues = useSelector(state => state.componentProperties?.parameter_values) || {}
   const [val, setVal] = useState(parameterValues)
-  const displayProperties = useSelector(state => state.componentPropertiesReducer.displayProperties)
-  const isLoading = useSelector(state => state.componentPropertiesReducer.isLoading)
+  const displayProperties = useSelector(state => state.componentProperties?.displayProperties)
+  const isLoading = useSelector(state => state.componentProperties?.isLoading)
   const dispatch = useDispatch()
-  const errorFields1 = useSelector(state => state.componentPropertiesReducer.errorFields)
+  const errorFields1 = useSelector(state => state.componentProperties?.errorFields)
   const [errorFields, setErrorFields] = useState(errorFields1)
 
   useEffect(() => {
@@ -260,7 +260,7 @@ export default function ComponentProperties () {
   }
 
   const setProps = () => {
-    dispatch(setCompProperties(block, val, errorFields))
+    dispatch(setCompPropertiesAsync(block, val, errorFields))
   }
 
   const link1 = name + ' Parameters'
@@ -278,11 +278,11 @@ export default function ComponentProperties () {
       />
 
       <ListItem>
-        {compProperties !== undefined ? <ListItemText primary={link1} /> : isLoading ? <ListItemText primary={link4} /> : <ListItemText primary={link3} />}
+        {compProperties ? (<ListItemText primary={link1} />) : (isLoading ? (<ListItemText primary={link4} />) : (<ListItemText primary={link3} />))}
       </ListItem>
 
       {
-        Object.keys(val).map((keyName, i) => {
+        Object.keys(val || {}).map((keyName, i) => {
           if (keyName.match(/^p[0-9]*_value$/)) {
             const rootKeyName = keyName.substr(0, 4)
             const typeId = rootKeyName + '_type'
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
index d6e52b85..835e290c 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
@@ -1,18 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import api from '../../utils/Api'
-import { Collapse, Hidden, IconButton, InputAdornment, List, ListItem, ListItemIcon, TextField, Tooltip } from '@material-ui/core'
+import { Collapse, Hidden, IconButton, InputAdornment, List, ListItem, ListItemIcon, TextField, Tooltip } from '@mui/material'
 import { TailSpin } from 'react-loader-spinner'
-import SearchIcon from '@material-ui/icons/Search'
+import SearchIcon from '@mui/icons-material/Search'
 
-import { makeStyles } from '@material-ui/core/styles'
-import ExpandLess from '@material-ui/icons/ExpandLess'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import CloseIcon from '@material-ui/icons/Close'
+import { makeStyles } from '@mui/styles'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import CloseIcon from '@mui/icons-material/Close'
 
 import './Helper/SchematicEditor.css'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/actions/index'
+import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/slices/schematicEditorSlice'
 import SideComp from './SideComp'
 import SimulationProperties from './SimulationProperties'
 const COMPONENTS_PER_ROW = 3
@@ -36,10 +36,10 @@ const searchOptions = {
 
 export default function ComponentSidebar ({ compRef }) {
   const classes = useStyles()
-  const libraries = useSelector(state => state.schematicEditorReducer.libraries)
-  const collapse = useSelector(state => state.schematicEditorReducer.collapse)
-  const components = useSelector(state => state.schematicEditorReducer.components)
-  const isSimulate = useSelector(state => state.schematicEditorReducer.isSimulate)
+  const libraries = useSelector(state => state.schematicEditor.libraries)
+  const collapse = useSelector(state => state.schematicEditor.collapse)
+  const components = useSelector(state => state.schematicEditor.components)
+  const isSimulate = useSelector(state => state.schematicEditor.isSimulate)
 
   const dispatch = useDispatch()
   const [isSearchedResultsEmpty, setIssearchedResultsEmpty] = useState(false)
@@ -180,7 +180,7 @@ export default function ComponentSidebar ({ compRef }) {
 
             {/* Collapsing List Mapped by Libraries fetched by the API */}
             {searchText.length === 0 &&
-              libraries.map(
+              libraries?.map(
                 (library) => {
                   return (
                     <div key={library.id}>
@@ -239,7 +239,7 @@ export default function ComponentSidebar ({ compRef }) {
 }
 
 export function ComponentImages () {
-  const componentImages = useSelector(state => state.schematicEditorReducer.component_images)
+  const componentImages = useSelector(state => state.schematicEditor.component_images)
 
   const dispatch = useDispatch()
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
index 2d2ab081..5b347e65 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
@@ -22,15 +22,17 @@ import {
   Switch,
   Toolbar,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
 import { useSelector, useDispatch } from 'react-redux'
-import ShareIcon from '@material-ui/icons/Share'
-import CloseIcon from '@material-ui/icons/Close'
-import { makeStyles } from '@material-ui/core/styles'
-import { deepPurple } from '@material-ui/core/colors'
+import ShareIcon from '@mui/icons-material/Share'
+import CloseIcon from '@mui/icons-material/Close'
+import { makeStyles } from '@mui/styles'
+import { deepPurple } from '@mui/material/colors'
 
 import logo from '../../static/favicon.ico'
-import { setTitle, logout, setSchTitle, setSchShared } from '../../redux/actions/index'
+import { logout } from '../../redux/slices/authSlice'
+import { setSchTitle, setSchShared } from '../../redux/slices/saveSchematicSlice'
+import { setTitle } from '../../redux/slices/netlistSlice'
 import store from '../../redux/store'
 
 const useStyles = makeStyles((theme) => ({
@@ -147,11 +149,11 @@ function Header () {
   }
 
   // change saved schematic share status
-  const [shared, setShared] = useState(schSave.isShared)
+  const [shared, setShared] = useState(schSave?.isShared)
 
   useEffect(() => {
-    setShared(schSave.isShared)
-  }, [schSave.isShared])
+    setShared(schSave?.isShared)
+  }, [schSave?.isShared])
 
   const handleShareChange = (event) => {
     setShared(event.target.checked)
@@ -218,14 +220,14 @@ function Header () {
         <Input
           className={classes.input}
           color='secondary'
-          value={schSave.title === 'Untitled' ? 'Untitled' : schSave.title}
+          value={schSave?.title === 'Untitled' ? 'Untitled' : schSave?.title}
           onChange={titleHandler}
           inputProps={{ 'aria-label': 'SchematicTitle' }}
         />
       </Hidden>
 
       {/* Display last saved and shared option for saved schematics */}
-      {auth.isAuthenticated === true
+      {auth?.isAuthenticated === true
         ? <>
           {(schSave.isSaved === true && schSave.details.save_time !== undefined)
             ? <Typography
@@ -288,7 +290,7 @@ function Header () {
 
       {/* Display login option or user menu as per authenticated status */}
       {
-        (!auth.isAuthenticated
+        (!auth?.isAuthenticated
           ? <Button
             size='small'
             component={RouterLink}
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index f5b9cc81..ffd38c8d 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -5,7 +5,7 @@ import mxGraphFactory from 'mxgraph'
 import store from '../../../redux/store'
 import dot from '../../../static/dot.gif'
 import blockstyle from '../../../static/style.json'
-import { getCompProperties, closeCompProperties } from '../../../redux/actions/index'
+import { getCompPropertiesAsync, closeCompProperties } from '../../../redux/slices/componentPropertiesSlice'
 
 import toolbarTools from './ToolbarTools'
 import keyboardShortcuts from './KeyboardShortcuts'
@@ -123,7 +123,7 @@ export default function LoadGrid (container, sidebar, outline) {
     graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) {
       const cell = evt.getProperty('cell')
       if (cell !== undefined && cell.CellType === 'Component') {
-        store.dispatch(getCompProperties(cell))
+        store.dispatch(getCompPropertiesAsync(cell))
       } else {
         store.dispatch(closeCompProperties())
       }
@@ -236,7 +236,7 @@ export default function LoadGrid (container, sidebar, outline) {
 
       const stylesheet = graph.getStylesheet()
       const style = stylesheet.styles[attribute]
-      let displayedLabel = style.displayedLabel
+      let displayedLabel = style?.displayedLabel
       if (displayedLabel == null) {
         return cell.getAttribute('label', '')
       }
@@ -310,9 +310,9 @@ export default function LoadGrid (container, sidebar, outline) {
     toolbarTools(graph)
 
     store.subscribe(() => {
-      const id = store.getState().componentPropertiesReducer.id
-      const parameterValues = store.getState().componentPropertiesReducer.parameter_values
-      const displayProperties = store.getState().componentPropertiesReducer.displayProperties
+      const id = store.getState().componentProperties.id
+      const parameterValues = store.getState().componentProperties.parameter_values
+      const displayProperties = store.getState().componentProperties.displayProperties
       const cellList = graph.getModel().cells
       const c = cellList[id]
       if (c !== undefined) {
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
index 0ae4606d..7407e35a 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -4,7 +4,7 @@ import 'mxgraph/javascript/src/css/common.css'
 import mxGraphFactory from 'mxgraph'
 import { portSize, getParameter } from './SvgParser'
 import store from '../../../redux/store'
-import { setModel, setNetlist } from '../../../redux/actions/index'
+import { setModel, setNetlist } from '../../../redux/slices/netlistSlice'
 
 let graph
 let undoManager
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
index 646de25e..a6e9298b 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Hidden, List, ListItem, ListItemText, TextField, MenuItem, TextareaAutosize } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Hidden, List, ListItem, ListItemText, TextField, MenuItem, TextareaAutosize } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import ComponentProperties from './ComponentProperties'
 import { useSelector, useDispatch } from 'react-redux'
-import { setSchDescription } from '../../redux/actions/index'
+import { setSchDescription } from '../../redux/slices/saveSchematicSlice'
 
 import './Helper/SchematicEditor.css'
 
@@ -118,10 +118,10 @@ GridProperties.propTypes = {
 export default function PropertiesSidebar ({ gridRef, outlineRef }) {
   const classes = useStyles()
 
-  const isOpen = useSelector(state => state.componentPropertiesReducer.isPropertiesWindowOpen)
+  const isOpen = useSelector(state => state.componentProperties?.isPropertiesWindowOpen)
   const schSave = useSelector(state => state.saveSchematicReducer)
 
-  const [description, setDescription] = useState(schSave.description)
+  const [description, setDescription] = useState(schSave?.description)
 
   const dispatch = useDispatch()
 
@@ -159,7 +159,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) {
             <ListItemText primary={typography1} />
           </ListItem>
           <ListItem style={{ padding: '0px 7px 7px 7px' }} divider>
-            <TextareaAutosize id='Description' label='Description' value={schSave.description === '' ? description || '' : schSave.description} onChange={getInputValues} minRows={6} aria-label='Description' placeholder={typography2} style={{ width: '100%', minWidth: '234px', maxHeight: '250px' }} />
+            <TextareaAutosize id='Description' label='Description' value={schSave?.description === '' ? description || '' : schSave?.description} onChange={getInputValues} minRows={6} aria-label='Description' placeholder={typography2} style={{ width: '100%', minWidth: '234px', maxHeight: '250px' }} />
           </ListItem>
         </div>
       </List>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
index 4dfa0f69..b6a13d35 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Drawer, Hidden, IconButton } from '@material-ui/core'
-import HighlightOffIcon from '@material-ui/icons/HighlightOff'
-import { makeStyles } from '@material-ui/core/styles'
+import { Drawer, Hidden, IconButton } from '@mui/material'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import { makeStyles } from '@mui/styles'
 
 const drawerWidth = 250
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index f27eee1b..def1a6dc 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -2,27 +2,27 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Canvg } from 'canvg'
-import { IconButton, Tooltip, Snackbar } from '@material-ui/core'
-import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined'
-import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'
-import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
-import UndoIcon from '@material-ui/icons/Undo'
-import RedoIcon from '@material-ui/icons/Redo'
-import ZoomInIcon from '@material-ui/icons/ZoomIn'
-import ZoomOutIcon from '@material-ui/icons/ZoomOut'
-import DeleteIcon from '@material-ui/icons/Delete'
-import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan'
-import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined'
-import RotateRightIcon from '@material-ui/icons/RotateRight'
-import BorderClearIcon from '@material-ui/icons/BorderClear'
-import { makeStyles } from '@material-ui/core/styles'
-import CloseIcon from '@material-ui/icons/Close'
-import SaveOutlinedIcon from '@material-ui/icons/SaveOutlined'
-import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'
-import ClearAllIcon from '@material-ui/icons/ClearAll'
-import CreateNewFolderOutlinedIcon from '@material-ui/icons/CreateNewFolderOutlined'
-import ImageOutlinedIcon from '@material-ui/icons/ImageOutlined'
-import SystemUpdateAltOutlinedIcon from '@material-ui/icons/SystemUpdateAltOutlined'
+import { IconButton, Tooltip, Snackbar } from '@mui/material'
+import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined'
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import UndoIcon from '@mui/icons-material/Undo'
+import RedoIcon from '@mui/icons-material/Redo'
+import ZoomInIcon from '@mui/icons-material/ZoomIn'
+import ZoomOutIcon from '@mui/icons-material/ZoomOut'
+import DeleteIcon from '@mui/icons-material/Delete'
+import SettingsOverscanIcon from '@mui/icons-material/SettingsOverscan'
+import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined'
+import RotateRightIcon from '@mui/icons-material/RotateRight'
+import BorderClearIcon from '@mui/icons-material/BorderClear'
+import { makeStyles } from '@mui/styles'
+import CloseIcon from '@mui/icons-material/Close'
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined'
+import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
+import ClearAllIcon from '@mui/icons-material/ClearAll'
+import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'
+import SystemUpdateAltOutlinedIcon from '@mui/icons-material/SystemUpdateAltOutlined'
 import { Link as RouterLink } from 'react-router-dom'
 import beautify from 'xml-beautifier'
 import mxGraphFactory from 'mxgraph'
@@ -30,7 +30,9 @@ import mxGraphFactory from 'mxgraph'
 import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog } from './ToolbarExtension'
 import { editorZoomIn, editorZoomOut, editorZoomAct, deleteComp, PrintPreview, Rotate, generateNetList, editorUndo, editorRedo, saveXml, ClearGrid } from './Helper/ToolbarTools'
 import { useSelector, useDispatch } from 'react-redux'
-import { toggleSimulate, closeCompProperties, setSchXmlData, saveSchematic, openLocalSch } from '../../redux/actions/index'
+import { setSchXmlData, saveSchematic, openLocalSch } from '../../redux/slices/saveSchematicSlice'
+import { toggleSimulate } from '../../redux/slices/schematicEditorSlice'
+import { closeCompProperties } from '../../redux/slices/componentPropertiesSlice'
 
 const {
   mxUtils
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
index c69788af..f9ef2381 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
@@ -1,7 +1,7 @@
 import React, { createRef, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import { List, ListItemText, Tooltip, Popover } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { List, ListItemText, Tooltip, Popover } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 import './Helper/SchematicEditor.css'
 import { AddComponent } from './Helper/SideBar'
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
index 855dd9b9..4caa5ac4 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
@@ -10,12 +10,12 @@ import {
   MenuItem,
   TextField,
   Typography
-} from '@material-ui/core'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import { makeStyles } from '@material-ui/core/styles'
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { makeStyles } from '@mui/styles'
 import { useSelector, useDispatch } from 'react-redux'
 
-import { setResultTitle, setResultTaskId } from '../../redux/actions/index'
+import { setResultTitle, setResultTaskId } from '../../redux/slices/simulationSlice'
 import { saveXml } from './Helper/ToolbarTools'
 import SimulationScreen, { setGraphStatusClosed } from './SimulationScreen'
 import api from '../../utils/Api'
@@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function SimulationProperties () {
   const netfile = useSelector(state => state.netlistReducer)
-  const isSimRes = useSelector(state => state.simulationReducer.isSimRes)
+  const isSimRes = useSelector(state => state.simulationReducer?.isSimRes)
   const dispatch = useDispatch()
   const classes = useStyles()
   const [transientAnalysisControlLine, setTransientAnalysisControlLine] = useState({
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
index 5b9566f5..7d8b490e 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
@@ -1,13 +1,13 @@
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import Highcharts from 'highcharts'
-import { AppBar, Button, Container, Dialog, Grid, IconButton, Paper, Slide, Toolbar, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import CloseIcon from '@material-ui/icons/Close'
+import { AppBar, Button, Container, Dialog, Grid, IconButton, Paper, Slide, Toolbar, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import CloseIcon from '@mui/icons-material/Close'
 import { useSelector, useDispatch } from 'react-redux'
 
 import Graph, { setStatusDone, setStatusClosed } from '../Shared/Graph'
-import { setResultGraph } from '../../redux/actions/index'
+import { setResultGraph } from '../../redux/slices/simulationSlice'
 import api from '../../utils/Api'
 
 let sse = null
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
index 79b9ca51..796bf181 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
@@ -29,14 +29,15 @@ import {
   Toolbar,
   Tooltip,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
 
-import { makeStyles } from '@material-ui/core/styles'
-import CloseIcon from '@material-ui/icons/Close'
+import { makeStyles } from '@mui/styles'
+import CloseIcon from '@mui/icons-material/Close'
 import { useSelector, useDispatch } from 'react-redux'
-import { fetchSchematics, fetchSchematic, loadGallery } from '../../redux/actions/index'
+import { fetchSchematic, loadGallery } from '../../redux/slices/saveSchematicSlice'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 import GallerySchSample from '../../utils/GallerySchSample'
-import { blue } from '@material-ui/core/colors'
+import { blue } from '@mui/material/colors'
 
 const Transition = forwardRef(function Transition (props, ref) {
   return <Slide direction='up' ref={ref} {...props} />
@@ -524,7 +525,7 @@ export function OpenSchDialog (props) {
         <Button variant={isGallery ? 'outlined' : 'text'} onClick={() => { setisLocal(false); setisGallery(true) }} color='secondary'>
           Gallery
         </Button>
-        {auth.isAuthenticated !== true
+        {auth?.isAuthenticated !== true
           ? <></>
           : <Button variant={!isGallery & !isLocal ? 'outlined' : 'text'} onClick={() => { dispatch(fetchSchematics()); setisLocal(false); setisGallery(false) }} color='secondary'>
             on Cloud
diff --git a/blocks/eda-frontend/src/components/Shared/Layout.js b/blocks/eda-frontend/src/components/Shared/Layout.js
index c51e9fa1..4ef36c5f 100644
--- a/blocks/eda-frontend/src/components/Shared/Layout.js
+++ b/blocks/eda-frontend/src/components/Shared/Layout.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { AppBar, IconButton, Toolbar } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import MenuIcon from '@material-ui/icons/Menu'
+import { AppBar, IconButton, Toolbar } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import MenuIcon from '@mui/icons-material/Menu'
 
 import LayoutSidebar from './LayoutSidebar'
 
@@ -37,6 +37,7 @@ function Layout ({ header, resToolbar, sidebar }) {
         color='default'
         elevation={0}
         className={classes.appBar}
+        style={{ zIndex: 2000 }}
       >
         {header}
 
diff --git a/blocks/eda-frontend/src/components/Shared/LayoutMain.js b/blocks/eda-frontend/src/components/Shared/LayoutMain.js
index 59aee670..838fd72f 100644
--- a/blocks/eda-frontend/src/components/Shared/LayoutMain.js
+++ b/blocks/eda-frontend/src/components/Shared/LayoutMain.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles((theme) => ({
   content: {
diff --git a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
index 0f2c3f9e..6fdc59bd 100644
--- a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
+++ b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Drawer, Hidden, IconButton } from '@material-ui/core'
-import HighlightOffIcon from '@material-ui/icons/HighlightOff'
-import { makeStyles } from '@material-ui/core/styles'
+import { Drawer, Hidden, IconButton } from '@mui/material'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import { makeStyles } from '@mui/styles'
 
 const drawerWidth = 250
 
diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js
index de4b8db1..7d9d45a0 100644
--- a/blocks/eda-frontend/src/components/Shared/Navbar.js
+++ b/blocks/eda-frontend/src/components/Shared/Navbar.js
@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 
-import { AppBar, Avatar, Button, Fade, IconButton, Link, ListItemText, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import { deepPurple } from '@material-ui/core/colors'
+import { AppBar, Avatar, Button, Fade, IconButton, Link, ListItemText, Menu, MenuItem, Toolbar, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { deepPurple } from '@mui/material/colors'
 import { Link as RouterLink, useHistory } from 'react-router-dom'
 import logo from '../../static/favicon.ico'
 import store from '../../redux/store'
-import { logout } from '../../redux/actions/index'
+import { logout } from '../../redux/slices/authSlice'
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
@@ -75,7 +75,7 @@ export function Header () {
       {/* Display relative link to other pages */}
       <nav>
         {
-          (auth.isAuthenticated
+          (auth?.isAuthenticated
             ? (<>
               <Link
                 variant='button'
@@ -145,7 +145,7 @@ export function Header () {
 
       {/* Display login option or user menu as per authenticated status */}
       {
-        (!auth.isAuthenticated
+        (!auth?.isAuthenticated
           ? <Button
             size='small'
             component={RouterLink}
diff --git a/blocks/eda-frontend/src/index.js b/blocks/eda-frontend/src/index.js
index fa81cbe9..261ca5da 100644
--- a/blocks/eda-frontend/src/index.js
+++ b/blocks/eda-frontend/src/index.js
@@ -1,23 +1,27 @@
 // This is the JavaScript entry point of react application.
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import * as serviceWorker from './serviceWorker'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import { ThemeProvider } from '@material-ui/core/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ThemeProvider } from '@mui/styles'
 import theme from './theme'
 import './index.css'
 import App from './App'
 import { Provider } from 'react-redux'
 import store from './redux/store'
-ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
-    <Provider store={store}>
-      <App />
-    </Provider>
-  </ThemeProvider>,
-  document.getElementById('root')
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+
+root.render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+      <CssBaseline />
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </ThemeProvider>
+  </React.StrictMode>
 )
 
 // If you want your app to work offline and load faster, you can change
diff --git a/blocks/eda-frontend/src/pages/Dashboard.js b/blocks/eda-frontend/src/pages/Dashboard.js
index 2ba84b43..49599aa8 100644
--- a/blocks/eda-frontend/src/pages/Dashboard.js
+++ b/blocks/eda-frontend/src/pages/Dashboard.js
@@ -1,8 +1,8 @@
 // Main Layout for user dashboard.
 import React, { useEffect } from 'react'
 import { Switch, Route } from 'react-router-dom'
-import { CssBaseline } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { CssBaseline } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 import { Header } from '../components/Shared/Navbar'
 import Layout from '../components/Shared/Layout'
diff --git a/blocks/eda-frontend/src/pages/Gallery.js b/blocks/eda-frontend/src/pages/Gallery.js
index a08ed8e9..6484ba4c 100644
--- a/blocks/eda-frontend/src/pages/Gallery.js
+++ b/blocks/eda-frontend/src/pages/Gallery.js
@@ -1,8 +1,8 @@
 // Main layout for gallery page.
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Container, CssBaseline, Grid, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Container, CssBaseline, Grid, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import GallerySchSample from '../utils/GallerySchSample'
 
diff --git a/blocks/eda-frontend/src/pages/Home.js b/blocks/eda-frontend/src/pages/Home.js
index 7d4bcf6b..1efdb924 100644
--- a/blocks/eda-frontend/src/pages/Home.js
+++ b/blocks/eda-frontend/src/pages/Home.js
@@ -1,10 +1,10 @@
 // Main layout for home page.
 import React, { useEffect } from 'react'
 
-import Button from '@material-ui/core/Button'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
-import Container from '@material-ui/core/Container'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import { makeStyles } from '@mui/styles'
+import Container from '@mui/material/Container'
 import { Link as RouterLink } from 'react-router-dom'
 import logo from '../static/favicon.ico'
 
diff --git a/blocks/eda-frontend/src/pages/Login.js b/blocks/eda-frontend/src/pages/Login.js
index 0f929444..d0430c3f 100644
--- a/blocks/eda-frontend/src/pages/Login.js
+++ b/blocks/eda-frontend/src/pages/Login.js
@@ -15,14 +15,14 @@ import {
   Link,
   TextField,
   Typography
-} from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import { Link as RouterLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
-import { login, authDefault, googleLogin } from '../redux/actions/index'
+import { login, authDefault, googleLogin } from '../redux/slices/authSlice'
 import google from '../static/google.png'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/pages/NotFound.js b/blocks/eda-frontend/src/pages/NotFound.js
index 0dcff9c4..d734edc4 100644
--- a/blocks/eda-frontend/src/pages/NotFound.js
+++ b/blocks/eda-frontend/src/pages/NotFound.js
@@ -1,8 +1,8 @@
 // Page to display Page Not Found (i.e. 404) error.
 import React, { useEffect } from 'react'
 
-import { Container, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Container, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles((theme) => ({
   header: {
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index 2c2af460..9a7d8229 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -1,8 +1,8 @@
 // Main Layout for Schemaic Editor page.
-import React, { createRef, useEffect, useState } from 'react'
+import React, { createRef, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { CssBaseline } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { CssBaseline } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 import Layout from '../components/Shared/Layout'
 import Header from '../components/SchematicEditor/Header'
@@ -13,7 +13,7 @@ import RightSidebar from '../components/SchematicEditor/RightSidebar'
 import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
 import LoadGrid from '../components/SchematicEditor/Helper/ComponentDrag'
 import '../components/SchematicEditor/Helper/SchematicEditor.css'
-import { fetchSchematic, loadGallery } from '../redux/actions/index'
+import { fetchSchematic, loadGallery } from '../redux/slices/saveSchematicSlice'
 import { useDispatch } from 'react-redux'
 
 const useStyles = makeStyles((theme) => ({
@@ -33,12 +33,17 @@ export default function SchematicEditor (props) {
   const outlineRef = createRef()
   const dispatch = useDispatch()
   const [mobileOpen, setMobileOpen] = useState(false)
+  const isLoaded = useRef(false)
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen)
   }
 
   useEffect(() => {
+    if (isLoaded.current) {
+      return
+    }
+    isLoaded.current = true
     document.title = process.env.REACT_APP_DIAGRAM_NAME + ' Editor - ' + process.env.REACT_APP_NAME
     const container = gridRef.current
     const sidebar = compRef.current
@@ -60,27 +65,27 @@ export default function SchematicEditor (props) {
   }, [compRef, gridRef, outlineRef, props.location, dispatch])
 
   return (
-    <div className={classes.root}>
+      <div className={classes.root}>
 
-      <CssBaseline />
+        <CssBaseline />
 
-      {/* Schematic editor header, toolbar and left side pane */}
-      <ComponentImages />
-      <Layout header={<Header />} resToolbar={<SchematicToolbar gridRef={gridRef} mobileClose={handleDrawerToggle} />} sidebar={<ComponentSidebar compRef={compRef} />} />
+        {/* Schematic editor header, toolbar and left side pane */}
+        <ComponentImages />
+        <Layout header={<Header />} resToolbar={<SchematicToolbar gridRef={gridRef} mobileClose={handleDrawerToggle} />} sidebar={<ComponentSidebar compRef={compRef} />} />
 
-      {/* Grid for drawing and designing circuits */}
-      <LayoutMain>
-        <div className={classes.toolbar} />
-        <center>
-          <div className='grid-container A4-L' ref={gridRef} id='divGrid' />
-        </center>
-      </LayoutMain>
+        {/* Grid for drawing and designing circuits */}
+        <LayoutMain>
+          <div className={classes.toolbar} />
+          <center>
+            <div className='grid-container A4-L' ref={gridRef} id='divGrid' />
+          </center>
+        </LayoutMain>
 
-      {/* Schematic editor Right side pane */}
-      <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle}>
-        <PropertiesSidebar gridRef={gridRef} outlineRef={outlineRef} />
-      </RightSidebar>
-    </div>
+        {/* Schematic editor Right side pane */}
+        <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle}>
+          <PropertiesSidebar gridRef={gridRef} outlineRef={outlineRef} />
+        </RightSidebar>
+      </div>
   )
 }
 
diff --git a/blocks/eda-frontend/src/pages/signUp.js b/blocks/eda-frontend/src/pages/signUp.js
index 0457b664..2bd743df 100644
--- a/blocks/eda-frontend/src/pages/signUp.js
+++ b/blocks/eda-frontend/src/pages/signUp.js
@@ -13,14 +13,14 @@ import {
   Link,
   TextField,
   Typography
-} from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import { Link as RouterLink, useHistory } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
-import { signUp, authDefault, googleLogin } from '../redux/actions/index'
+import { signUp, authDefault, googleLogin } from '../redux/slices/authSlice'
 import google from '../static/google.png'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/redux/actions/actions.js b/blocks/eda-frontend/src/redux/actions/actions.js
deleted file mode 100644
index 5913d9e7..00000000
--- a/blocks/eda-frontend/src/redux/actions/actions.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// Actions for schematic editor
-export const COMPONENT_IMAGES = 'COMPONENT_IMAGES'
-export const FETCH_LIBRARIES = 'FETCH_LIBRARIES'
-export const TOGGLE_COLLAPSE = 'TOGGLE_COLLAPSE'
-export const FETCH_COMPONENTS = 'FETCH_COMPONENTS'
-export const TOGGLE_SIMULATE = 'TOGGLE_SIMULATE'
-
-// Actions for handling compProperties
-export const LOADING_GET_COMP_PROPERTIES = 'LOADING_GET_COMP_PROPERTIES'
-export const GET_COMP_PROPERTIES = 'GET_COMP_PROPERTIES'
-export const LOADING_SET_COMP_PROPERTIES = 'LOADING_SET_COMP_PROPERTIES'
-export const SET_COMP_PROPERTIES = 'SET_COMP_PROPERTIES'
-export const CLOSE_COMP_PROPERTIES = 'CLOSE_COMP_PROPERTIES'
-
-// Actions for handling and generating netlist
-export const SET_NETLIST = 'SET_NETLIST'
-export const SET_TITLE = 'SET_TITLE'
-export const SET_MODEL = 'SET_MODEL'
-
-// Actions for handling simulation result display
-export const SET_RESULT_TITLE = 'SET_RESULT_TITLE'
-export const SET_RESULT_GRAPH = 'SET_RESULT_GRAPH'
-export const SET_RESULT_TEXT = 'SET_RESULT_TEXT'
-export const SET_RESULT_TASK_ID = 'SET_RESULT_TASK_ID'
-
-// Actions for handling user authentication and registeration
-export const USER_LOADING = 'USER_LOADING'
-export const USER_LOADED = 'USER_LOADED'
-export const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL'
-export const AUTHENTICATION_ERROR = 'AUTHENTICATION_ERROR'
-export const LOGIN_FAILED = 'LOGIN_FAILED'
-export const LOGOUT_SUCCESSFUL = 'LOGOUT_SUCCESSFUL'
-export const LOADING_FAILED = 'LOADING_FAILED'
-export const SIGNUP_SUCCESSFUL = 'SIGNUP_SUCCESSFUL'
-export const SIGNUP_FAILED = 'SIGNUP_FAILED'
-export const DEFAULT_STORE = 'DEFAULT_STORE'
-
-// Actions for saving scheamtics and loading saved, gallery and local schematics.
-export const SAVE_SCHEMATICS = 'SAVE_SCHEMATICS'
-export const SET_SCH_SAVED = 'SET_SCH_SAVED'
-export const SET_SCH_TITLE = 'SET_SCH_TITLE'
-export const SET_SCH_DESCRIPTION = 'SET_SCH_DESCRIPTION'
-export const SET_SCH_XML_DATA = 'SET_SCH_XML_DATA'
-export const SET_SCH_SHARED = 'SET_SCH_SHARED'
-export const CLEAR_DETAILS = 'CLEAR_DETAILS'
-export const LOAD_GALLERY = 'LOAD_GALLERY'
-
-// Action for fetching on-cloud saved schematics for authenticated user to display in dashboard
-export const FETCH_SCHEMATICS = 'FETCH_SCHEMATICS'
diff --git a/blocks/eda-frontend/src/redux/actions/authActions.js b/blocks/eda-frontend/src/redux/actions/authActions.js
deleted file mode 100644
index 43f82715..00000000
--- a/blocks/eda-frontend/src/redux/actions/authActions.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import * as actions from './actions'
-import api from '../../utils/Api'
-
-// Api call for maintaining user login state throughout the application
-export const loadUser = () => (dispatch, getState) => {
-  // User Loading
-  dispatch({ type: actions.USER_LOADING })
-
-  // Get token from localstorage
-  const token = getState().authReducer.token
-
-  // add headers
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  // If token available add to headers
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  } else {
-    dispatch({ type: actions.LOADING_FAILED })
-    return
-  }
-
-  api.get('auth/users/me/', config)
-    .then(
-      (res) => {
-        if (res.status === 200) {
-          dispatch({
-            type: actions.USER_LOADED,
-            payload: {
-              user: res.data
-            }
-          })
-        } else if (res.status >= 400 && res.status < 500) {
-          dispatch({
-            type: actions.LOGIN_FAILED,
-            payload: {
-              data: res.data
-            }
-          })
-        }
-      }
-    )
-    .catch((err) => {
-      console.error(err)
-      dispatch({
-        type: actions.LOGIN_FAILED,
-        payload: {
-          data: {}
-        }
-      })
-    })
-}
-
-// Handle api call for user login
-export const login = (username, password, toUrl) => {
-  const body = {
-    password,
-    username
-  }
-
-  return function (dispatch) {
-    const allowedUrls = [
-      '/editor'
-    ]
-    api.post('auth/token/login/', body)
-      .then((res) => {
-        if (res.status === 200) {
-          dispatch({
-            type: actions.LOGIN_SUCCESSFUL,
-            payload: {
-              data: res.data
-            }
-          })
-          if (toUrl === '') {
-            dispatch(loadUser())
-          } else if (!allowedUrls.includes(toUrl)) {
-            console.log('Not redirecting to', toUrl)
-            dispatch(loadUser())
-          } else {
-            window.open(toUrl, '_self')
-          }
-        } else if (res.status === 400 || res.status === 403 || res.status === 401) {
-          dispatch({
-            type: actions.AUTHENTICATION_ERROR,
-            payload: {
-              data: 'Incorrect Username or Password.'
-            }
-          })
-        } else {
-          dispatch({
-            type: actions.LOGIN_FAILED,
-            payload: {
-              data: 'Something went wrong! Login Failed'
-            }
-          })
-        }
-      })
-      .catch((err) => {
-        const res = err.response
-        if (res.status === 400 || res.status === 403 || res.status === 401) {
-          dispatch(loginError('Incorrect Username or Password.'))
-        } else {
-          dispatch(loginError('Something went wrong! Login Failed'))
-        }
-      })
-  }
-}
-
-// Handle api call for user sign up
-export const signUp = (email, username, password, history) => (dispatch) => {
-  const body = {
-    email,
-    username,
-    password
-  }
-
-  // add headers
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  api.post('auth/users/', body, config)
-    .then((res) => {
-      if (res.status === 200 || res.status === 201) {
-        dispatch({
-          type: actions.SIGNUP_SUCCESSFUL,
-          payload: {
-            data: 'Successfully Signed Up! A verification link has been sent to your email account.'
-          }
-        })
-        // history.push('/login')
-      }
-    })
-    .catch((err) => {
-      const res = err.response
-      if (res.status === 400 || res.status === 403 || res.status === 401) {
-        if (res.data.username !== undefined) {
-          if (res.data.username[0].search('already') !== -1 && res.data.username[0].search('exists') !== -1) { dispatch(signUpError('Username Already Taken.')) }
-        } else {
-          dispatch(signUpError('Enter Valid Credentials.'))
-        }
-      } else {
-        dispatch(signUpError('Something went wrong! Registeration Failed'))
-      }
-    })
-}
-
-// Handle api call for user logout
-export const logout = (history) => (dispatch, getState) => {
-  // Get token from localstorage
-  const token = getState().authReducer.token
-
-  // add headers
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  // If token available add to headers
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  api.post('auth/token/logout/', {}, config)
-    .then(
-      (res) => {
-        if (res.status === 200 || res.status === 204) {
-          dispatch({
-            type: actions.LOGOUT_SUCCESSFUL,
-            payload: {
-              user: res.data
-            }
-          })
-          history.push('/login')
-        }
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Redux action for default auth store
-export const authDefault = () => (dispatch) => {
-  dispatch({ type: actions.DEFAULT_STORE })
-}
-
-// Redux action for display login error
-const loginError = (message) => (dispatch) => {
-  dispatch({
-    type: actions.AUTHENTICATION_ERROR,
-    payload: {
-      data: message
-    }
-  })
-}
-
-// Redux action for display sign up error
-const signUpError = (message) => (dispatch) => {
-  dispatch({
-    type: actions.SIGNUP_FAILED,
-    payload: {
-      data: message
-    }
-  })
-}
-
-// Api call for Google oAuth login or sign up
-export const googleLogin = (host, toUrl) => {
-  return function (dispatch) {
-    api.get('auth/o/google-oauth2/?redirect_uri=' + host + '/api/auth/google-callback')
-      .then((res) => {
-        if (res.status === 200) {
-          // Open google login page
-          window.open(res.data.authorization_url, '_self')
-        } else {
-          dispatch({
-            type: actions.LOGIN_FAILED,
-            payload: {
-              data: 'Something went wrong! Login Failed'
-            }
-          })
-        }
-      })
-      .then((res) => { console.log(res) })
-      .catch((err) => {
-        const res = err.response
-        if (res.status === 400 || res.status === 403 || res.status === 401) {
-          dispatch(loginError('Incorrect Username or Password.'))
-        } else {
-          dispatch(loginError('Something went wrong! Login Failed'))
-        }
-      })
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js b/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js
deleted file mode 100644
index b1d40154..00000000
--- a/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import api from '../../utils/Api'
-import * as actions from './actions'
-
-// Actions for setting isLoading
-const loadingGetCompProperties = (block, isLoading) => (dispatch) => {
-  dispatch({
-    type: actions.LOADING_GET_COMP_PROPERTIES,
-    payload: {
-      name: block.style,
-      isLoading
-    }
-  })
-}
-
-const loadingSetCompProperties = (isLoading) => (dispatch) => {
-  dispatch({
-    type: actions.LOADING_SET_COMP_PROPERTIES,
-    payload: {
-      isLoading
-    }
-  })
-}
-
-// Actions for listing stored component properites on double click on component
-export const getCompProperties = (block) => (dispatch) => {
-  dispatch(loadingGetCompProperties(block, true))
-  const url = 'block_parameters/?block__name=' + block.style
-  api.get(url)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.GET_COMP_PROPERTIES,
-          payload: {
-            block,
-            name: block.style,
-            parameter_values: block.parameter_values,
-            errorFields: block.errorFields,
-            displayProperties: block.displayProperties,
-            compProperties: res.data[0]
-          }
-        })
-      }
-    )
-    .catch((err) => {
-      console.error(err)
-      dispatch(loadingGetCompProperties(block, false))
-    })
-}
-
-// Actions for updating entered component properites on clicking set parameters
-export const setCompProperties = (block, parameterValues, errorFields) => (dispatch) => {
-  dispatch(loadingSetCompProperties(true))
-  const url = 'setblockparameter'
-  const filteredParameterValues = Object.fromEntries(Object.entries(parameterValues).filter(([k, v]) => v != null))
-  const data = { block: block.style, ...filteredParameterValues }
-  api.post(url, data)
-    .then(
-      (res) => {
-        block.parameter_values = filteredParameterValues
-        block.errorFields = errorFields
-        dispatch({
-          type: actions.SET_COMP_PROPERTIES,
-          payload: {
-            block,
-            parameter_values: parameterValues,
-            errorFields,
-            displayProperties: res.data
-          }
-        })
-      }
-    )
-    .catch((err) => {
-      console.error(err)
-      dispatch(loadingSetCompProperties(false))
-    })
-}
-
-// Handling hiding of compProperties sidebar
-export const closeCompProperties = () => (dispatch) => {
-  dispatch({
-    type: actions.CLOSE_COMP_PROPERTIES
-  })
-}
diff --git a/blocks/eda-frontend/src/redux/actions/dashboardActions.js b/blocks/eda-frontend/src/redux/actions/dashboardActions.js
deleted file mode 100644
index 02a45126..00000000
--- a/blocks/eda-frontend/src/redux/actions/dashboardActions.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import api from '../../utils/Api'
-import * as actions from './actions'
-
-// Api call for listing saved schematic to display on dashboard
-export const fetchSchematics = () => (dispatch, getState) => {
-  const token = getState().authReducer.token
-
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  api.get('save/list', config)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_SCHEMATICS,
-          payload: res.data
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Api call for deleting saved schematic
-export const deleteSchematic = (saveId) => (dispatch, getState) => {
-  const token = getState().authReducer.token
-
-  const config = {
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  }
-
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  api.delete('save/' + saveId, config)
-    .then(
-      (res) => {
-        if (res.status === 200) {
-          dispatch(fetchSchematics())
-        }
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
diff --git a/blocks/eda-frontend/src/redux/actions/index.js b/blocks/eda-frontend/src/redux/actions/index.js
deleted file mode 100644
index b13059d3..00000000
--- a/blocks/eda-frontend/src/redux/actions/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// Actions dispatch to change state variables inside store
-export * from './schematicEditorActions'
-export * from './componentPropertiesActions'
-export * from './netlistActions'
-export * from './simulationActions'
-export * from './authActions'
-export * from './saveSchematicActions'
-export * from './dashboardActions'
diff --git a/blocks/eda-frontend/src/redux/actions/netlistActions.js b/blocks/eda-frontend/src/redux/actions/netlistActions.js
deleted file mode 100644
index bc703f7b..00000000
--- a/blocks/eda-frontend/src/redux/actions/netlistActions.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as actions from './actions'
-
-// Action to update netlist with component nodes and parameters
-export const setNetlist = (netlist) => (dispatch) => {
-  dispatch({
-    type: actions.SET_NETLIST,
-    payload: {
-      netlist
-    }
-  })
-}
-
-// Action to update netlist title
-export const setTitle = (title) => (dispatch) => {
-  dispatch({
-    type: actions.SET_TITLE,
-    payload: {
-      title
-    }
-  })
-}
-
-// Action to update netlist model section
-export const setModel = (model) => (dispatch) => {
-  dispatch({
-    type: actions.SET_MODEL,
-    payload: {
-      model
-    }
-  })
-}
diff --git a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
deleted file mode 100644
index c9236805..00000000
--- a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as actions from './actions'
-import queryString from 'query-string'
-import api from '../../utils/Api'
-import GallerySchSample from '../../utils/GallerySchSample'
-import { renderGalleryXML } from '../../components/SchematicEditor/Helper/ToolbarTools'
-import { setTitle } from './index'
-
-export const setSchTitle = (title) => (dispatch) => {
-  dispatch({
-    type: actions.SET_SCH_TITLE,
-    payload: {
-      title
-    }
-  })
-}
-
-export const setSchDescription = (description) => (dispatch) => {
-  dispatch({
-    type: actions.SET_SCH_DESCRIPTION,
-    payload: {
-      description
-    }
-  })
-}
-
-export const setSchXmlData = (xmlData) => (dispatch) => {
-  dispatch({
-    type: actions.SET_SCH_XML_DATA,
-    payload: {
-      xmlData
-    }
-  })
-}
-
-// Api call to save new schematic or updating saved schematic.
-export const saveSchematic = (title, description, xml, base64) => (dispatch, getState) => {
-  const body = {
-    data_dump: xml,
-    base64_image: base64,
-    name: title,
-    description
-  }
-
-  // Get token from localstorage
-  const token = getState().authReducer.token
-  const schSave = getState().saveSchematicReducer
-
-  // add headers
-  const config = {
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  }
-
-  // If token available add to headers
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  if (schSave.isSaved) {
-    //  Updating saved schemaic
-    api.post('save/' + schSave.details.save_id, queryString.stringify(body), config)
-      .then(
-        (res) => {
-          dispatch({
-            type: actions.SET_SCH_SAVED,
-            payload: res.data
-          })
-        }
-      )
-      .catch((err) => { console.error(err) })
-  } else {
-    // saving new schematic
-    api.post('save', queryString.stringify(body), config)
-      .then(
-        (res) => {
-          dispatch({
-            type: actions.SET_SCH_SAVED,
-            payload: res.data
-          })
-        }
-      )
-      .catch((err) => { console.error(err) })
-  }
-}
-
-// Action for Loading on-cloud saved schematics
-export const fetchSchematic = (saveId) => (dispatch, getState) => {
-  // Get token from localstorage
-  const token = getState().authReducer.token
-
-  // add headers
-  const config = {
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  }
-
-  // If token available add to headers
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  // console.log('Already Saved')
-  api.get('save/' + saveId, config)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.SET_SCH_SAVED,
-          payload: res.data
-        })
-        dispatch(setSchTitle(res.data.name))
-        dispatch(setSchDescription(res.data.description))
-        dispatch(setSchXmlData(res.data.data_dump))
-        renderGalleryXML(res.data.data_dump)
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-export const setSchShared = (share) => (dispatch, getState) => {
-  // Get token from localstorage
-  const token = getState().authReducer.token
-  const schSave = getState().saveSchematicReducer
-
-  // add headers
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  // If token available add to headers
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  let isShared
-  if (share === true) {
-    isShared = 'on'
-  } else {
-    isShared = 'off'
-  }
-
-  api.post('save/' + schSave.details.save_id + '/sharing/' + isShared, {}, config)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.SET_SCH_SHARED,
-          payload: res.data
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Action for Loading Gallery schematics
-export const loadGallery = (Id) => (dispatch, getState) => {
-  const data = GallerySchSample[Id]
-
-  dispatch({
-    type: actions.LOAD_GALLERY,
-    payload: data
-  })
-  dispatch(setTitle('* ' + data.name))
-  dispatch(setSchTitle(data.name))
-  dispatch(setSchDescription(data.description))
-  dispatch(setSchXmlData(data.data_dump))
-  renderGalleryXML(data.data_dump)
-}
-
-// Action for Loading local exported schematics
-export const openLocalSch = (obj) => (dispatch, getState) => {
-  const data = obj
-
-  dispatch({ type: actions.CLEAR_DETAILS })
-  dispatch(setTitle('* ' + data.title))
-  dispatch(setSchTitle(data.title))
-  dispatch(setSchDescription(data.description))
-  dispatch(setSchXmlData(data.data_dump))
-  renderGalleryXML(data.data_dump)
-}
diff --git a/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js b/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js
deleted file mode 100644
index 00fc1e1e..00000000
--- a/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import api from '../../utils/Api'
-import * as actions from './actions'
-
-// Api call for fetching component library list
-export const fetchLibraries = () => (dispatch) => {
-// SAMPLE Response from API
-// [
-  //  {
-  //   "id": 1
-  //   "name": "Commonly Used Blocks",
-  //   "sort_order": 1
-  // },
-// ] -- Multiple dicts in array
-  api.get('categories/')
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_LIBRARIES,
-          payload: res.data
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Api call for fetching components under specified library id
-export const fetchComponents = (libraryId) => (dispatch) => {
-// SAMPLE Response from API
-//   [
-  // {
-  //   "id": 1,
-  //   "blocktype": 1,
-  //   "name": "LOGICAL_OP",
-  //   "categories": [ 1 ],
-  //   "initial_explicit_input_ports": 2,
-  //   "initial_implicit_input_ports": 0,
-  //   "initial_explicit_output_ports": 1,
-  //   "initial_implicit_output_ports": 0,
-  //   "initial_display_parameter": "AND",
-  //   "p000_value_initial": "AND",
-  //   "p001_value_initial": "AND",
-  //   "p002_value_initial": "AND",
-  //   "p003_value_initial": "AND",
-  //   "p004_value_initial": null,
-  //   ...
-  //   "p039_value_initial": null,
-  // },
-// ] -- Multiple dicts in array
-  const url = 'newblocks/?categories=' + parseInt(libraryId)
-  api.get(url)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_COMPONENTS,
-          payload: { components: res.data, id: libraryId }
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Api call for fetching component image names
-export const fetchComponentImages = () => (dispatch) => {
-// SAMPLE Response from API
-//   [
-  //   "palettes/LOGICAL_OP.png",
-  //   ...
-  //   "palettes/SUPER_f.png"
-// ] -- Multiple strings in array
-  const url = 'block_images'
-  api.get(url)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.COMPONENT_IMAGES,
-          payload: { component_images: res.data }
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Action to keep only one component list dropdown open at a time
-export const toggleCollapse = (id) => (dispatch) => {
-  dispatch({
-    type: actions.TOGGLE_COLLAPSE,
-    payload: { id }
-  })
-}
-
-// Action to hide components list to display simulation parameters
-export const toggleSimulate = () => (dispatch) => {
-  dispatch({
-    type: actions.TOGGLE_SIMULATE
-  })
-}
diff --git a/blocks/eda-frontend/src/redux/actions/simulationActions.js b/blocks/eda-frontend/src/redux/actions/simulationActions.js
deleted file mode 100644
index f2d249a5..00000000
--- a/blocks/eda-frontend/src/redux/actions/simulationActions.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as actions from './actions'
-
-// Actions to update title for simulation result screen
-export const setResultTitle = (title) => (dispatch) => {
-  dispatch({
-    type: actions.SET_RESULT_TITLE,
-    payload: {
-      title
-    }
-  })
-}
-
-// Action to update store with graphical result points
-export const setResultGraph = (graph) => (dispatch) => {
-  dispatch({
-    type: actions.SET_RESULT_GRAPH,
-    payload: {
-      graph
-    }
-  })
-}
-
-// Action to update store with simulation result text
-export const setResultText = (text) => (dispatch) => {
-  dispatch({
-    type: actions.SET_RESULT_TEXT,
-    payload: {
-      text
-    }
-  })
-}
-
-// Actions to update task id for simulation result screen
-export const setResultTaskId = (taskId) => (dispatch) => {
-  dispatch({
-    type: actions.SET_RESULT_TASK_ID,
-    payload: {
-      taskId
-    }
-  })
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/authReducer.js b/blocks/eda-frontend/src/redux/reducers/authReducer.js
deleted file mode 100644
index 7c470617..00000000
--- a/blocks/eda-frontend/src/redux/reducers/authReducer.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as actions from '../actions/actions'
-
-const token = process.env.REACT_APP_NAME + '_token'
-const initialState = {
-  token: localStorage.getItem(token),
-  isAuthenticated: null,
-  isRegistered: null,
-  isLoading: false,
-  user: null,
-  errors: '',
-  regErrors: ''
-}
-
-export default function authReducer (state = initialState, action) {
-  switch (action.type) {
-    case actions.USER_LOADING: {
-      return {
-        ...state,
-        isLoading: true
-      }
-    }
-
-    case actions.DEFAULT_STORE: {
-      return {
-        ...state,
-        errors: '',
-        regErrors: ''
-      }
-    }
-
-    case actions.SIGNUP_SUCCESSFUL: {
-      return {
-        ...state,
-        isRegistered: true,
-        regErrors: action.payload.data
-      }
-    }
-
-    case actions.SIGNUP_FAILED: {
-      return {
-        ...state,
-        isRegistered: false,
-        regErrors: action.payload.data
-      }
-    }
-
-    case actions.USER_LOADED: {
-      return {
-        ...state,
-        isAuthenticated: true,
-        isLoading: false,
-        user: action.payload.user
-      }
-    }
-
-    case actions.LOGIN_SUCCESSFUL: {
-      localStorage.setItem(token, action.payload.data.auth_token)
-      return {
-        ...state,
-        token: action.payload.data.auth_token,
-        // ...action.payload.data,
-        // isAuthenticated: true,
-        // isLoading: false,
-        errors: ''
-      }
-    }
-
-    case actions.LOADING_FAILED: {
-      return {
-        ...state,
-        isLoading: false
-      }
-    }
-
-    case actions.AUTHENTICATION_ERROR:
-    case actions.LOGIN_FAILED:
-    case actions.LOGOUT_SUCCESSFUL: {
-      localStorage.removeItem(token)
-      return {
-        ...state,
-        errors: action.payload.data,
-        token: null,
-        user: null,
-        isAuthenticated: false,
-        isLoading: false
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js b/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js
deleted file mode 100644
index 0ea9c082..00000000
--- a/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as actions from '../actions/actions'
-import { editorZoomAct } from '../../components/SchematicEditor/Helper/ToolbarTools'
-
-const InitialState = {
-  block: null,
-  name: '',
-  parameter_values: {},
-  errorFields: {},
-  isPropertiesWindowOpen: false,
-  compProperties: {},
-  displayProperties: {},
-  isLoading: false
-}
-
-export default function componentPropertiesReducer (state = InitialState, action) {
-  switch (action.type) {
-    case actions.LOADING_GET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        name: action.payload.name,
-        isPropertiesWindowOpen: true,
-        compProperties: undefined,
-        isLoading: action.payload.isLoading
-      }
-    }
-
-    case actions.GET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        block: action.payload.block,
-        name: action.payload.name,
-        parameter_values: action.payload.parameter_values,
-        errorFields: action.payload.errorFields,
-        isPropertiesWindowOpen: true,
-        displayProperties: action.payload.displayProperties,
-        compProperties: action.payload.compProperties,
-        isLoading: false
-      }
-    }
-
-    case actions.LOADING_SET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        isPropertiesWindowOpen: true,
-        isLoading: action.payload.isLoading
-      }
-    }
-
-    case actions.SET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        block: action.payload.block,
-        parameter_values: action.payload.parameter_values,
-        errorFields: action.payload.errorFields,
-        isPropertiesWindowOpen: false,
-        displayProperties: action.payload.displayProperties,
-        isLoading: false
-      }
-    }
-
-    case actions.CLOSE_COMP_PROPERTIES: {
-      editorZoomAct()
-      return {
-        ...state,
-        isPropertiesWindowOpen: false
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/dashboardReducer.js b/blocks/eda-frontend/src/redux/reducers/dashboardReducer.js
deleted file mode 100644
index ce52b52e..00000000
--- a/blocks/eda-frontend/src/redux/reducers/dashboardReducer.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as actions from '../actions/actions'
-
-const InitialState = {
-  schematics: []
-}
-
-export default function dashboardReducer (state = InitialState, action) {
-  switch (action.type) {
-    case actions.FETCH_SCHEMATICS: {
-      return {
-        ...state,
-        schematics: action.payload
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/index.js b/blocks/eda-frontend/src/redux/reducers/index.js
deleted file mode 100644
index a694d2b2..00000000
--- a/blocks/eda-frontend/src/redux/reducers/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { combineReducers } from 'redux'
-import schematicEditorReducer from './schematicEditorReducer'
-import componentPropertiesReducer from './componentPropertiesReducer'
-import netlistReducer from './netlistReducer'
-import simulationReducer from './simulationReducer'
-import authReducer from './authReducer'
-import saveSchematicReducer from './saveSchematicReducer'
-import dashboardReducer from './dashboardReducer'
-export default combineReducers({
-  schematicEditorReducer,
-  componentPropertiesReducer,
-  netlistReducer,
-  simulationReducer,
-  authReducer,
-  saveSchematicReducer,
-  dashboardReducer
-})
diff --git a/blocks/eda-frontend/src/redux/reducers/netlistReducer.js b/blocks/eda-frontend/src/redux/reducers/netlistReducer.js
deleted file mode 100644
index 81ab7344..00000000
--- a/blocks/eda-frontend/src/redux/reducers/netlistReducer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as actions from '../actions/actions'
-
-const initialState = {
-  title: '* Untitled',
-  model: '',
-  netlist: '',
-  controlLine: '',
-  controlBlock: ''
-}
-
-export default function netlistReducer (state = initialState, action) {
-  switch (action.type) {
-    case actions.SET_NETLIST: {
-      return {
-        ...state,
-        netlist: action.payload.netlist
-      }
-    }
-    case actions.SET_TITLE: {
-      return {
-        ...state,
-        title: action.payload.title
-      }
-    }
-
-    case actions.SET_MODEL: {
-      return {
-        ...state,
-        model: action.payload.model
-      }
-    }
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/saveSchematicReducer.js b/blocks/eda-frontend/src/redux/reducers/saveSchematicReducer.js
deleted file mode 100644
index 363661f0..00000000
--- a/blocks/eda-frontend/src/redux/reducers/saveSchematicReducer.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as actions from '../actions/actions'
-
-const initialState = {
-  title: 'Untitled',
-  description: '',
-  xmlData: null,
-  details: {},
-  isSaved: null,
-  isShared: null
-}
-
-export default function saveSchematicReducer (state = initialState, action) {
-  switch (action.type) {
-    case actions.SET_SCH_SAVED: {
-      return {
-        ...state,
-        isSaved: true,
-        isShared: action.payload.shared,
-        details: action.payload
-      }
-    }
-
-    case actions.SET_SCH_SHARED: {
-      return {
-        ...state,
-        isShared: true,
-        details: action.payload
-      }
-    }
-
-    case actions.CLEAR_DETAILS: {
-      return {
-        ...state,
-        isSaved: null,
-        isShared: null,
-        details: {}
-      }
-    }
-
-    case actions.LOAD_GALLERY: {
-      return {
-        ...state,
-        isSaved: null,
-        isShared: null,
-        details: action.payload
-      }
-    }
-
-    case actions.SET_SCH_TITLE: {
-      return {
-        ...state,
-        title: action.payload.title
-      }
-    }
-
-    case actions.SET_SCH_DESCRIPTION: {
-      return {
-        ...state,
-        description: action.payload.description
-      }
-    }
-
-    case actions.SET_SCH_XML_DATA: {
-      return {
-        ...state,
-        xmlData: action.payload.xmlData
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js b/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js
deleted file mode 100644
index 540974df..00000000
--- a/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as actions from '../actions/actions'
-
-const InitialState = {
-  isSimulate: false,
-  libraries: [],
-  collapse: {},
-  components: {}
-}
-
-export default function schematicEditorReducer (state = InitialState, action) {
-  switch (action.type) {
-    case actions.FETCH_LIBRARIES: {
-    // Add 'open' parameter to track open/close state of collapse
-      const collapse = {}
-      const components = {}
-      action.payload.forEach(element => {
-        collapse[element.id] = false
-        components[element.id] = []
-      })
-      return { ...state, libraries: action.payload, collapse, components }
-    }
-
-    case actions.TOGGLE_COLLAPSE: {
-      const existingState = state.collapse[action.payload.id]
-      const newCollapse = Object.keys(state.collapse).reduce(function (accObj, parseObj) {
-        accObj[parseObj] = false
-        return accObj
-      }, {})
-      newCollapse[action.payload.id] = !existingState
-      // console.log('Updating collapse', action.payload.id)
-      Object.assign(state.collapse, newCollapse)
-      return { ...state, collapse: { ...state.collapse, newCollapse } }
-    }
-
-    case actions.FETCH_COMPONENTS: {
-      const newComponents = state.components
-      newComponents[action.payload.id] = action.payload.components
-      // console.log('Fetched and added ', newComponents[action.payload.id].length, 'Components')
-      Object.assign(state.components, newComponents)
-      return { ...state, components: { ...state.components, newComponents } }
-    }
-
-    case actions.COMPONENT_IMAGES: {
-      const componentImages = action.payload.component_images
-      // console.log('Fetched and added ', componentImages.length, ' images')
-      return { ...state, component_images: componentImages }
-    }
-
-    case actions.TOGGLE_SIMULATE: {
-      return { ...state, isSimulate: !state.isSimulate }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/simulationReducer.js b/blocks/eda-frontend/src/redux/reducers/simulationReducer.js
deleted file mode 100644
index aee38f33..00000000
--- a/blocks/eda-frontend/src/redux/reducers/simulationReducer.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as actions from '../actions/actions'
-
-const initialState = {
-  title: '',
-  isGraph: 'false',
-  text: [],
-  graph: {},
-  isSimRes: false,
-  taskId: ''
-}
-
-export default function (state = initialState, action) {
-  switch (action.type) {
-    case actions.SET_RESULT_TITLE: {
-      return {
-        ...state,
-        title: action.payload.title
-      }
-    }
-    case actions.SET_RESULT_GRAPH: {
-      return {
-        ...state,
-        isSimRes: true,
-        isGraph: 'true',
-        graph: action.payload.graph
-      }
-    }
-
-    case actions.SET_RESULT_TEXT: {
-      return {
-        ...state,
-        isSimRes: true,
-        isGraph: 'false',
-        text: action.payload.text
-      }
-    }
-
-    case actions.SET_RESULT_TASK_ID: {
-      return {
-        ...state,
-        taskId: action.payload.taskId
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/slices/authSlice.js b/blocks/eda-frontend/src/redux/slices/authSlice.js
new file mode 100644
index 00000000..c0c6a629
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/authSlice.js
@@ -0,0 +1,254 @@
+import { createSlice } from '@reduxjs/toolkit'
+import api from '../../utils/Api'
+// import * as actions from '../actions/actions'
+
+const token = process.env.REACT_APP_NAME + '_token'
+const initialState = {
+  token: localStorage.getItem(token),
+  isAuthenticated: null,
+  isRegistered: null,
+  isLoading: false,
+  user: null,
+  errors: '',
+  regErrors: ''
+}
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    userLoading (state) {
+      state.isLoading = true
+    },
+    defaultStore (state) {
+      state.errors = ''
+      state.regErrors = ''
+    },
+    signUpSuccessful (state, action) {
+      state.isRegistered = true
+      state.regErrors = action.payload.data
+    },
+    signUpFailed (state, action) {
+      state.isRegistered = false
+      state.regErrors = action.payload.data
+    },
+    userLoaded (state, action) {
+      state.isAuthenticated = true
+      state.isLoading = false
+      state.user = action.payload.user
+    },
+    loginSuccessful (state, action) {
+      localStorage.setItem(token, action.payload.data.auth_token)
+      state.token = action.payload.data.auth_token
+      state.errors = ''
+    },
+    loadingFailed (state) {
+      state.isLoading = false
+    },
+    authenticationError (state, action) {
+      localStorage.removeItem(token)
+      state.errors = action.payload.data
+      state.token = null
+      state.user = null
+      state.isAuthenticated = false
+      state.isLoading = false
+    },
+    logoutSuccessful (state) {
+      localStorage.removeItem(token)
+      state.token = null
+      state.user = null
+      state.isAuthenticated = false
+      state.isLoading = false
+    }
+  }
+})
+
+export const {
+  userLoading,
+  defaultStore,
+  signUpSuccessful,
+  signUpFailed,
+  userLoaded,
+  loginSuccessful,
+  loadingFailed,
+  authenticationError,
+  logoutSuccessful
+} = authSlice.actions
+
+export default authSlice.reducer
+
+export const loadUser = () => (dispatch, getState) => {
+  dispatch(userLoading())
+
+  const token = getState().auth?.token
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+
+  if (token) {
+    config.headers.Authorization = `Token ${token}`
+  } else {
+    dispatch(loadingFailed())
+    return
+  }
+
+  api.get('auth/users/me/', config)
+    .then((res) => {
+      if (res.status === 200) {
+        dispatch(userLoaded(res.data))
+      } else if (res.status >= 400 && res.status < 500) {
+        dispatch(authenticationError({ data: res.data }))
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      dispatch(authenticationError({ data: {} }))
+    })
+}
+
+export const login = (username, password, toUrl) => {
+  const body = {
+    password,
+    username
+  }
+
+  return function (dispatch) {
+    const allowedUrls = [
+      '/editor'
+    ]
+
+    api.post('auth/token/login/', body)
+      .then((res) => {
+        if (res.status === 200) {
+          dispatch(loginSuccessful({ data: res.data }))
+          if (toUrl === '') {
+            dispatch(loadUser())
+          } else if (!allowedUrls.includes(toUrl)) {
+            console.log('Not redirecting to', toUrl)
+            dispatch(loadUser())
+          } else {
+            window.open(toUrl, '_self')
+          }
+        } else if (res.status === 400 || res.status === 403 || res.status === 401) {
+          dispatch(authenticationError({ data: 'Incorrect Username or Password.' }))
+        } else {
+          dispatch(authenticationError({ data: 'Something went wrong! Login Failed' }))
+        }
+      })
+      .catch((err) => {
+        const res = err.response
+        if (res.status === 400 || res.status === 403 || res.status === 401) {
+          dispatch(authenticationError({ data: 'Incorrect Username or Password.' }))
+        } else {
+          dispatch(authenticationError({ data: 'Something went wrong! Login Failed' }))
+        }
+      })
+  }
+}
+
+export const signUp = (email, username, password, history) => (dispatch) => {
+  const body = {
+    email,
+    username,
+    password
+  }
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+
+  api.post('auth/users/', body, config)
+    .then((res) => {
+      if (res.status === 200 || res.status === 201) {
+        dispatch(signUpSuccessful({ data: 'Successfully Signed Up! A verification link has been sent to your email account.' }))
+      }
+    })
+    .catch((err) => {
+      const res = err.response
+      if (res.status === 400 || res.status === 403 || res.status === 401) {
+        if (res.data.username !== undefined) {
+          if (res.data.username[0].search('already') !== -1 && res.data.username[0].search('exists') !== -1) {
+            dispatch(signUpFailed({ data: 'Username Already Taken.' }))
+          }
+        } else {
+          dispatch(signUpFailed({ data: 'Enter Valid Credentials.' }))
+        }
+      } else {
+        dispatch(signUpFailed({ data: 'Something went wrong! Registeration Failed' }))
+      }
+    })
+}
+
+export const logout = (history) => (dispatch, getState) => {
+  const token = getState().auth.token
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+
+  if (token) {
+    config.headers.Authorization = `Token ${token}`
+  }
+
+  api.post('auth/token/logout/', {}, config)
+    .then((res) => {
+      if (res.status === 200 || res.status === 204) {
+        dispatch(logoutSuccessful())
+        history.push('/login')
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+}
+
+export const authDefault = () => (dispatch) => {
+  dispatch(defaultStore())
+}
+
+// export const loginError = (message) => (dispatch) => {
+//   dispatch({
+//     type: actions.AUTHENTICATION_ERROR,
+//     payload: {
+//       data: message
+//     }
+//   })
+// }
+
+// export const signupError = (message) => (dispatch) => {
+//   dispatch({
+//     type: actions.SIGNUP_FAILED,
+//     payload: {
+//       data: message
+//     }
+//   })
+// }
+
+export const googleLogin = (host, toUrl) => {
+  return function (dispatch) {
+    api.get('auth/o/google-oauth2/?redirect_uri=' + host + '/api/auth/google-callback')
+      .then((res) => {
+        if (res.status === 200) {
+          window.open(res.data.authorization_url, '_self')
+        } else {
+          dispatch(authenticationError({ data: 'Something went wrong! Login Failed' }))
+        }
+      })
+      .then((res) => { console.log(res) })
+      .catch((err) => {
+        const res = err.response
+        if (res.status === 400 || res.status === 403 || res.status === 401) {
+          dispatch(authenticationError({ data: 'Incorrect Username or Password.' }))
+        } else {
+          dispatch(authenticationError({ data: 'Something went wrong! Login Failed' }))
+        }
+      })
+  }
+}
diff --git a/blocks/eda-frontend/src/redux/slices/componentPropertiesSlice.js b/blocks/eda-frontend/src/redux/slices/componentPropertiesSlice.js
new file mode 100644
index 00000000..37a2b461
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/componentPropertiesSlice.js
@@ -0,0 +1,120 @@
+import { createSlice } from '@reduxjs/toolkit'
+import api from '../../utils/Api'
+import { editorZoomAct } from '../../components/SchematicEditor/Helper/ToolbarTools'
+
+const initialState = {
+  block: null,
+  name: '',
+  parameter_values: {},
+  errorFields: {},
+  isPropertiesWindowOpen: false,
+  compProperties: {},
+  displayProperties: {},
+  isLoading: false
+}
+
+export const componentPropertiesSlice = createSlice({
+  name: 'componentProperties',
+  initialState,
+  reducers: {
+    loadingGetCompProperties: (state, action) => {
+      state.name = action.payload.name
+      state.isPropertiesWindowOpen = true
+      state.compProperties = undefined
+      state.isLoading = action.payload.isLoading
+    },
+    getCompProperties: (state, action) => {
+      const {
+        block,
+        name,
+        parameter_values,
+        errorFields,
+        displayProperties,
+        compProperties
+      } = action.payload
+      state.block = block
+      state.name = name
+      state.parameter_values = parameter_values
+      state.errorFields = errorFields
+      state.isPropertiesWindowOpen = true
+      state.displayProperties = displayProperties
+      state.compProperties = compProperties
+      state.isLoading = false
+    },
+    loadingSetCompProperties: (state, action) => {
+      state.isPropertiesWindowOpen = true
+      state.isLoading = action.payload.isLoading
+    },
+    setCompProperties: (state, action) => {
+      const {
+        block,
+        parameter_values,
+        errorFields,
+        displayProperties
+      } = action.payload
+      state.block = block
+      state.parameter_values = parameter_values
+      state.errorFields = errorFields
+      state.isPropertiesWindowOpen = false
+      state.displayProperties = displayProperties
+      state.isLoading = false
+    },
+    closeCompProperties: (state) => {
+      editorZoomAct()
+      state.isPropertiesWindowOpen = false
+    }
+  }
+})
+
+export const {
+  loadingGetCompProperties,
+  getCompProperties,
+  loadingSetCompProperties,
+  setCompProperties,
+  closeCompProperties
+} = componentPropertiesSlice.actions
+
+// Async action creators remain the same
+export const getCompPropertiesAsync = (block) => (dispatch) => {
+  dispatch(loadingGetCompProperties(block, true))
+  const url = 'block_parameters/?block__name=' + block.style
+  api.get(url)
+    .then((res) => {
+      dispatch(getCompProperties({
+        block,
+        name: block.style,
+        parameter_values: block.parameter_values,
+        errorFields: block.errorFields,
+        displayProperties: block.displayProperties,
+        compProperties: res.data[0]
+      }))
+    })
+    .catch((err) => {
+      console.error(err)
+      dispatch(loadingGetCompProperties(block, false))
+    })
+}
+
+export const setCompPropertiesAsync = (block, parameterValues, errorFields) => (dispatch) => {
+  dispatch(loadingSetCompProperties(true))
+  const url = 'setblockparameter'
+  const filteredParameterValues = Object.fromEntries(Object.entries(parameterValues).filter(([k, v]) => v != null))
+  const data = { block: block.style, ...filteredParameterValues }
+  api.post(url, data)
+    .then((res) => {
+      block.parameter_values = filteredParameterValues
+      block.errorFields = errorFields
+      dispatch(setCompProperties({
+        block,
+        parameter_values: parameterValues,
+        errorFields,
+        displayProperties: res.data
+      }))
+    })
+    .catch((err) => {
+      console.error(err)
+      dispatch(loadingSetCompProperties(false))
+    })
+}
+
+export default componentPropertiesSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/slices/dashboardSlice.js b/blocks/eda-frontend/src/redux/slices/dashboardSlice.js
new file mode 100644
index 00000000..8e13ae18
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/dashboardSlice.js
@@ -0,0 +1,75 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import api from '../../utils/Api'
+
+// Thunk action creator for fetching schematics
+export const fetchSchematics = createAsyncThunk(
+  'dashboard/fetchSchematics',
+  async (_, { getState }) => {
+    const token = getState().authReducer.token
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+
+    if (token) {
+      config.headers.Authorization = `Token ${token}`
+    }
+
+    const response = await api.get('save/list', config)
+    return response.data
+  }
+)
+
+// Thunk action creator for deleting schematic
+export const deleteSchematic = createAsyncThunk(
+  'dashboard/deleteSchematic',
+  async (saveId, { dispatch, getState }) => {
+    const token = getState().authReducer.token
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    }
+
+    if (token) {
+      config.headers.Authorization = `Token ${token}`
+    }
+
+    const response = await api.delete(`save/${saveId}`, config)
+    if (response.status === 200) {
+      // Dispatch fetchSchematics to update schematics after deletion
+      dispatch(fetchSchematics())
+    }
+  }
+)
+
+const dashboardSlice = createSlice({
+  name: 'dashboard',
+  initialState: {
+    schematics: [],
+    status: 'idle',
+    error: null
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchSchematics.pending, (state) => {
+        state.status = 'loading'
+      })
+      .addCase(fetchSchematics.fulfilled, (state, action) => {
+        state.status = 'succeeded'
+        state.schematics = action.payload
+      })
+      .addCase(fetchSchematics.rejected, (state, action) => {
+        state.status = 'failed'
+        state.error = action.error.message
+      })
+  }
+})
+
+export const selectSchematics = (state) => state.dashboard.schematics
+
+export default dashboardSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/slices/netlistSlice.js b/blocks/eda-frontend/src/redux/slices/netlistSlice.js
new file mode 100644
index 00000000..16bd4691
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/netlistSlice.js
@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const netlistSlice = createSlice({
+  name: 'netlist',
+  initialState: {
+    title: '* Untitled',
+    model: '',
+    netlist: '',
+    controlLine: '',
+    controlBlock: ''
+  },
+  reducers: {
+    setNetlist: (state, action) => {
+      state.netlist = action.payload.netlist
+    },
+    setTitle: (state, action) => {
+      state.title = action.payload.title
+    },
+    setModel: (state, action) => {
+      state.model = action.payload.model
+    }
+  }
+})
+
+export const { setNetlist, setTitle, setModel } = netlistSlice.actions
+
+export const selectTitle = (state) => state.netlist.title
+export const selectModel = (state) => state.netlist.model
+export const selectNetlist = (state) => state.netlist.netlist
+
+export default netlistSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/slices/saveSchematicSlice.js b/blocks/eda-frontend/src/redux/slices/saveSchematicSlice.js
new file mode 100644
index 00000000..c5d8a828
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/saveSchematicSlice.js
@@ -0,0 +1,176 @@
+import { createSlice } from '@reduxjs/toolkit'
+import api from '../../utils/Api'
+import queryString from 'query-string'
+import GallerySchSample from '../../utils/GallerySchSample'
+import { renderGalleryXML } from '../../components/SchematicEditor/Helper/ToolbarTools'
+import { setTitle } from './netlistSlice'
+// import * as actions from '../actions/actions'
+
+const initialState = {
+  title: 'Untitled',
+  description: '',
+  xmlData: null,
+  details: {},
+  isSaved: null,
+  isShared: null
+}
+
+const saveSchematicSlice = createSlice({
+  name: 'saveSchematic',
+  initialState,
+  reducers: {
+    setSchTitle (state, action) {
+      state.title = action.payload
+    },
+    setSchDescription (state, action) {
+      state.description = action.payload
+    },
+    setSchXmlData (state, action) {
+      state.xmlData = action.payload
+    },
+    setSchSaved (state, action) {
+      const payload = action.payload
+      state.isSaved = true
+      state.isShared = payload.shared
+      state.details = payload
+    },
+    setSchShared (state, action) {
+      const payload = action.payload
+      state.isShared = true
+      state.details = payload
+    },
+    clearSchematicDetails (state) {
+      return initialState
+    }
+  }
+  // extraReducers: (builder) => {
+  //   builder
+  //     .addCase(actions.LOAD_GALLERY, (state, action) => {
+  //       const data = action.payload
+  //       state = { ...initialState, details: data }
+  //     })
+  // }
+})
+
+export const {
+  setSchTitle,
+  setSchDescription,
+  setSchXmlData,
+  setSchSaved,
+  setSchShared,
+  clearSchematicDetails
+} = saveSchematicSlice.actions
+
+export default saveSchematicSlice.reducer
+
+export const saveSchematic = (title, description, xml, base64) => (dispatch, getState) => {
+  const body = {
+    data_dump: xml,
+    base64_image: base64,
+    name: title,
+    description
+  }
+
+  const token = getState().authReducer.token
+  const schSave = getState().schematic
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  }
+
+  if (token) {
+    config.headers.Authorization = `Token ${token}`
+  }
+
+  const endpoint = schSave.isSaved ? `save/${schSave.details.save_id}` : 'save'
+
+  api.post(endpoint, queryString.stringify(body), config)
+    .then((res) => {
+      dispatch(setSchSaved(res.data))
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+}
+
+export const fetchSchematic = (saveId) => (dispatch, getState) => {
+  const token = getState().authReducer.token
+  const config = {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  }
+
+  if (token) {
+    config.headers.Authorization = `Token ${token}`
+  }
+
+  api.get(`save/${saveId}`, config)
+    .then((res) => {
+      dispatch(setSchSaved(res.data))
+      dispatch(setSchTitle(res.data.name))
+      dispatch(setSchDescription(res.data.description))
+      dispatch(setSchXmlData(res.data.data_dump))
+      renderGalleryXML(res.data.data_dump)
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+}
+
+export const setShared = (share) => (dispatch, getState) => {
+  const token = getState().authReducer.token
+  const schSave = getState().schematic
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+
+  if (token) {
+    config.headers.Authorization = `Token ${token}`
+  }
+
+  let isShared
+  if (share === true) {
+    isShared = 'on'
+  } else {
+    isShared = 'off'
+  }
+
+  api.post(`save/${schSave.details.save_id}/sharing/${isShared}`, {}, config)
+    .then((res) => {
+      dispatch(setSchShared(res.data))
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+}
+
+export const loadGallery = (Id) => (dispatch) => {
+  const data = GallerySchSample[Id]
+
+  dispatch({
+    type: 'schematic/loadGallery',
+    payload: data
+  })
+  dispatch(setTitle('* ' + data.name))
+  dispatch(setSchTitle(data.name))
+  dispatch(setSchDescription(data.description))
+  dispatch(setSchXmlData(data.data_dump))
+  renderGalleryXML(data.data_dump)
+}
+
+export const openLocalSch = (obj) => (dispatch) => {
+  const data = obj
+
+  dispatch(clearSchematicDetails())
+  dispatch(setTitle('* ' + data.title))
+  dispatch(setSchTitle(data.title))
+  dispatch(setSchDescription(data.description))
+  dispatch(setSchXmlData(data.data_dump))
+  renderGalleryXML(data.data_dump)
+}
diff --git a/blocks/eda-frontend/src/redux/slices/schematicEditorSlice.js b/blocks/eda-frontend/src/redux/slices/schematicEditorSlice.js
new file mode 100644
index 00000000..670d9839
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/schematicEditorSlice.js
@@ -0,0 +1,110 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import api from '../../utils/Api'
+
+// Async Thunks
+export const fetchLibraries = createAsyncThunk(
+  'schematicEditor/fetchLibraries',
+  async (_, { dispatch }) => {
+    try {
+      const res = await api.get('categories/')
+      dispatch(schematicEditorSlice.actions.setLibraries(res.data))
+    } catch (err) {
+      console.error(err)
+    }
+  }
+)
+
+export const fetchComponents = createAsyncThunk(
+  'schematicEditor/fetchComponents',
+  async (libraryId, { dispatch }) => {
+    try {
+      const url = `newblocks/?categories=${parseInt(libraryId)}`
+      const res = await api.get(url)
+      dispatch(schematicEditorSlice.actions.setComponents({ components: res.data, id: libraryId }))
+    } catch (err) {
+      console.error(err)
+    }
+  }
+)
+
+export const fetchComponentImages = createAsyncThunk(
+  'schematicEditor/fetchComponentImages',
+  async (_, { dispatch }) => {
+    try {
+      const res = await api.get('block_images')
+      dispatch(schematicEditorSlice.actions.setComponentImages(res.data))
+    } catch (err) {
+      console.error(err)
+    }
+  }
+)
+
+export const toggleCollapse = createAsyncThunk(
+  'schematicEditor/toggleCollapse',
+  (id, { dispatch }) => {
+    dispatch(schematicEditorSlice.actions.toggleCollapse(id))
+  }
+)
+
+export const toggleSimulate = createAsyncThunk(
+  'schematicEditor/toggleSimulate',
+  (_, { dispatch }) => {
+    dispatch(schematicEditorSlice.actions.toggleSimulate())
+  }
+)
+
+// Slice
+const initialState = {
+  isSimulate: false,
+  libraries: [],
+  collapse: {},
+  components: {},
+  component_images: []
+}
+
+const schematicEditorSlice = createSlice({
+  name: 'schematicEditor',
+  initialState,
+  reducers: {
+    setLibraries (state, action) {
+      const collapse = {}
+      const components = {}
+      action.payload.forEach(element => {
+        collapse[element.id] = false
+        components[element.id] = []
+      })
+      state.libraries = action.payload
+      state.collapse = collapse
+      state.components = components
+    },
+    toggleCollapse (state, action) {
+      // Extract the id of the dropdown to toggle from the action payload
+      const id = action.payload
+      // Check the current state of the dropdown with the extracted id
+      const existingState = state.collapse[id]
+      // Create a new object to hold the updated collapse state
+      const newCollapse = {}
+      // Loop through all dropdowns in the state and set them to false
+      // This ensures that only the clicked dropdown will change state
+      Object.keys(state.collapse).forEach(key => {
+        newCollapse[key] = false
+      })
+      // Toggle the state of the clicked dropdown
+      newCollapse[id] = !existingState
+      // Update the state with the new collapse state
+      state.collapse = { ...state.collapse, ...newCollapse }
+    },
+    setComponents (state, action) {
+      state.components[action.payload.id] = action.payload.components
+    },
+    setComponentImages (state, action) {
+      state.component_images = action.payload
+    },
+    toggleSimulate (state) {
+      state.isSimulate = !state.isSimulate
+    }
+  }
+})
+
+export const schematicEditorActions = schematicEditorSlice.actions
+export default schematicEditorSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/slices/simulationSlice.js b/blocks/eda-frontend/src/redux/slices/simulationSlice.js
new file mode 100644
index 00000000..98c6aa24
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/slices/simulationSlice.js
@@ -0,0 +1,42 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const simulationSlice = createSlice({
+  name: 'simulation',
+  initialState: {
+    title: '',
+    isGraph: false,
+    text: [],
+    graph: {},
+    isSimRes: false,
+    taskId: ''
+  },
+  reducers: {
+    setResultTitle: (state, action) => {
+      state.title = action.payload.title
+    },
+    setResultGraph: (state, action) => {
+      state.isSimRes = true
+      state.isGraph = true
+      state.graph = action.payload.graph
+    },
+    setResultText: (state, action) => {
+      state.isSimRes = true
+      state.isGraph = false
+      state.text = action.payload.text
+    },
+    setResultTaskId: (state, action) => {
+      state.taskId = action.payload.taskId
+    }
+  }
+})
+
+export const { setResultTitle, setResultGraph, setResultText, setResultTaskId } = simulationSlice.actions
+
+export const selectTitle = (state) => state.simulation.title
+export const selectIsGraph = (state) => state.simulation.isGraph
+export const selectText = (state) => state.simulation.text
+export const selectGraph = (state) => state.simulation.graph
+export const selectIsSimRes = (state) => state.simulation.isSimRes
+export const selectTaskId = (state) => state.simulation.taskId
+
+export default simulationSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js
index 1ca6ceda..e4f29515 100644
--- a/blocks/eda-frontend/src/redux/store.js
+++ b/blocks/eda-frontend/src/redux/store.js
@@ -1,8 +1,22 @@
-// Initialize Redux store which holds the whole state tree of application.
-import reducer from './reducers/index'
-import { createStore, applyMiddleware } from 'redux'
-import reduxThunk from 'redux-thunk'
-const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore)
-const store = createStoreWithMiddleware(reducer)
+import { configureStore } from '@reduxjs/toolkit'
+import componentPropertiesReducer from './slices/componentPropertiesSlice'
+import schematicEditorReducer from './slices/schematicEditorSlice'
+import dashboardReducer from './slices/dashboardSlice'
+import netlistReducer from './slices/netlistSlice'
+import simulationReducer from './slices/simulationSlice'
+import saveSchematicReducer from './slices/saveSchematicSlice'
+import authReducer from './slices/authSlice'
+
+const store = configureStore({
+  reducer: {
+    componentProperties: componentPropertiesReducer,
+    schematicEditor: schematicEditorReducer,
+    dashboardReducer: dashboardReducer,
+    netlistReducer: netlistReducer,
+    simulationReducer: simulationReducer,
+    saveSchematicReducer: saveSchematicReducer,
+    authReducer: authReducer
+  }
+})
 
 export default store
diff --git a/blocks/eda-frontend/src/theme.js b/blocks/eda-frontend/src/theme.js
index ebfedff5..a4af2192 100644
--- a/blocks/eda-frontend/src/theme.js
+++ b/blocks/eda-frontend/src/theme.js
@@ -1,5 +1,5 @@
-import { red } from '@material-ui/core/colors'
-import { createTheme } from '@material-ui/core/styles'
+import { red } from '@mui/material/colors'
+import { createTheme } from '@mui/material/styles'
 
 // A custom Material UI theme for this application
 const theme = createTheme({