diff --git a/site/package-lock.json b/site/package-lock.json
index 5dfeb90e..9b60f5ec 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -9,6 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@apollo/client": "^3.3.15",
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@mui/material": "^5.11.12",
         "@nivo/bar": "^0.69.1",
         "@nivo/pie": "^0.69.0",
         "@reduxjs/toolkit": "^1.6.1",
@@ -1917,16 +1920,21 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
       "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.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/@babel/template": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
@@ -2248,6 +2256,158 @@
         "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/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/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/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/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "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.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@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.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "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/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.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@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/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "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",
@@ -2341,6 +2501,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@fluentui/react-component-event-listener": {
       "version": "0.63.1",
       "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz",
@@ -3989,6 +4183,260 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.20",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.20.tgz",
+      "integrity": "sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@floating-ui/react-dom": "^2.0.2",
+        "@mui/types": "^7.2.6",
+        "@mui/utils": "^5.14.13",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "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.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz",
+      "integrity": "sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.14.tgz",
+      "integrity": "sha512-cAmCwAHFQXxb44kWbVFkhKATN8tACgMsFwrXo8ro6WzYW73U/qsR5AcCiJIhCyYYg+gcftfkmNcpRaV3JjhHCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/base": "5.0.0-beta.20",
+        "@mui/core-downloads-tracker": "^5.14.14",
+        "@mui/system": "^5.14.14",
+        "@mui/types": "^7.2.6",
+        "@mui/utils": "^5.14.13",
+        "@types/react-transition-group": "^4.4.7",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "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"
+      },
+      "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.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.14.tgz",
+      "integrity": "sha512-n77au3CQj9uu16hak2Y+rvbGSBaJKxziG/gEbOLVGrAuqZ+ycVSkorCfN6Y/4XgYOpG/xvmuiY3JwhAEOzY3iA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/utils": "^5.14.13",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "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.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.14.tgz",
+      "integrity": "sha512-sF3DS2PVG+cFWvkVHQQaGFpL1h6gSwOW3L91pdxPLQDHDZ5mZ/X0SlXU5XA+WjypoysG4urdAQC7CH/BRvUiqg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "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/system": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.14.tgz",
+      "integrity": "sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/private-theming": "^5.14.14",
+        "@mui/styled-engine": "^5.14.13",
+        "@mui/types": "^7.2.6",
+        "@mui/utils": "^5.14.13",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@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/@mui/system/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.6.tgz",
+      "integrity": "sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.14.tgz",
+      "integrity": "sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@types/prop-types": "^15.7.7",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "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",
@@ -4226,9 +4674,9 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -6345,9 +6793,9 @@
       "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
     },
     "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.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
+      "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
@@ -6443,9 +6891,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.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -12050,6 +12498,11 @@
         "node": ">=6"
       }
     },
+    "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": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -26136,6 +26589,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
@@ -29697,11 +30155,18 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+        }
       }
     },
     "@babel/template": {
@@ -29872,6 +30337,132 @@
       "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
       "requires": {}
     },
+    "@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==",
+      "requires": {
+        "@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"
+      },
+      "dependencies": {
+        "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=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "requires": {
+        "@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"
+      }
+    },
+    "@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=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@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"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@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=="
+    },
+    "@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "@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==",
+      "requires": {}
+    },
+    "@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=="
+    },
+    "@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=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -29934,6 +30525,36 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
       "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng=="
     },
+    "@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "requires": {
+        "@floating-ui/dom": "^1.5.1"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "@fluentui/react-component-event-listener": {
       "version": "0.63.1",
       "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz",
@@ -31226,6 +31847,130 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@mui/base": {
+      "version": "5.0.0-beta.20",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.20.tgz",
+      "integrity": "sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w==",
+      "requires": {
+        "@babel/runtime": "^7.23.1",
+        "@floating-ui/react-dom": "^2.0.2",
+        "@mui/types": "^7.2.6",
+        "@mui/utils": "^5.14.13",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "clsx": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+          "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+        }
+      }
+    },
+    "@mui/core-downloads-tracker": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz",
+      "integrity": "sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw=="
+    },
+    "@mui/material": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.14.tgz",
+      "integrity": "sha512-cAmCwAHFQXxb44kWbVFkhKATN8tACgMsFwrXo8ro6WzYW73U/qsR5AcCiJIhCyYYg+gcftfkmNcpRaV3JjhHCg==",
+      "requires": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/base": "5.0.0-beta.20",
+        "@mui/core-downloads-tracker": "^5.14.14",
+        "@mui/system": "^5.14.14",
+        "@mui/types": "^7.2.6",
+        "@mui/utils": "^5.14.13",
+        "@types/react-transition-group": "^4.4.7",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "clsx": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+          "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.14.tgz",
+      "integrity": "sha512-n77au3CQj9uu16hak2Y+rvbGSBaJKxziG/gEbOLVGrAuqZ+ycVSkorCfN6Y/4XgYOpG/xvmuiY3JwhAEOzY3iA==",
+      "requires": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/utils": "^5.14.13",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.14.tgz",
+      "integrity": "sha512-sF3DS2PVG+cFWvkVHQQaGFpL1h6gSwOW3L91pdxPLQDHDZ5mZ/X0SlXU5XA+WjypoysG4urdAQC7CH/BRvUiqg==",
+      "requires": {
+        "@babel/runtime": "^7.23.1",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.14.tgz",
+      "integrity": "sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA==",
+      "requires": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/private-theming": "^5.14.14",
+        "@mui/styled-engine": "^5.14.13",
+        "@mui/types": "^7.2.6",
+        "@mui/utils": "^5.14.13",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "clsx": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+          "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+        }
+      }
+    },
+    "@mui/types": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.6.tgz",
+      "integrity": "sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.14.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.14.tgz",
+      "integrity": "sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw==",
+      "requires": {
+        "@babel/runtime": "^7.23.1",
+        "@types/prop-types": "^15.7.7",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "@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",
@@ -31403,9 +32148,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
     "@react-native-community/cli": {
       "version": "10.2.2",
@@ -33007,9 +33752,9 @@
       "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
     },
     "@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.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
+      "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
     },
     "@types/q": {
       "version": "1.5.5",
@@ -33105,9 +33850,9 @@
       }
     },
     "@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.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
       "requires": {
         "@types/react": "*"
       }
@@ -37294,6 +38039,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -47671,6 +48421,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
diff --git a/site/package.json b/site/package.json
index f6d86737..8db476da 100644
--- a/site/package.json
+++ b/site/package.json
@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.15",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^5.11.12",
     "@nivo/bar": "^0.69.1",
     "@nivo/pie": "^0.69.0",
     "@reduxjs/toolkit": "^1.6.1",
diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx
index 7d12dabf..dada0ffa 100644
--- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx
+++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx
@@ -1,21 +1,19 @@
-import React, { FC, ChangeEvent, useState, useEffect } from 'react';
-import Form from 'react-bootstrap/Form';
+import React, { FC, useState } from 'react';
 import Button from 'react-bootstrap/Button';
-import './AddCoursePopup.scss';
-import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import { moveCourse, setShowAddCourse, setShowSearch } from '../../store/slices/roadmapSlice';
-import { ReportData } from '../../types/types';
-import { useCookies } from 'react-cookie';
+import Form from 'react-bootstrap/Form';
 import Modal from 'react-bootstrap/Modal';
 import { isMobile } from 'react-device-detect';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { moveCourse, setShowAddCourse } from '../../store/slices/roadmapSlice';
+import './AddCoursePopup.scss';
 
 interface AddCoursePopupProps {
 }
 
 const AddCoursePopup: FC<AddCoursePopupProps> = (props) => {
     const dispatch = useAppDispatch();
-    const planner = useAppSelector(state => state.roadmap.yearPlans);
-    const showForm = useAppSelector(state => state.roadmap.showAddCourse);
+    const planner = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.yearPlans);
+    const showForm = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.showAddCourse);
     const [year, setYear] = useState(-1);
     const [quarter, setQuarter] = useState(-1);
     const [validated, setValidated] = useState(false);
diff --git a/site/src/pages/RoadmapPage/Planner.tsx b/site/src/pages/RoadmapPage/Planner.tsx
index ce15540e..b5558c46 100644
--- a/site/src/pages/RoadmapPage/Planner.tsx
+++ b/site/src/pages/RoadmapPage/Planner.tsx
@@ -16,7 +16,7 @@ const Planner: FC = () => {
   const [cookies, setCookie] = useCookies(['user']);
   const isFirstRenderer = useFirstRender();
   const data = useAppSelector(selectYearPlans);
-  const transfers = useAppSelector(state => state.roadmap.transfers);
+  const transfers = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.transfers);
   
   const [missingPrerequisites, setMissingPrerequisites] = useState(new Set<string>);
 
diff --git a/site/src/pages/RoadmapPage/Quarter.tsx b/site/src/pages/RoadmapPage/Quarter.tsx
index db91a668..2a0707cf 100644
--- a/site/src/pages/RoadmapPage/Quarter.tsx
+++ b/site/src/pages/RoadmapPage/Quarter.tsx
@@ -21,7 +21,7 @@ interface QuarterProps {
 const Quarter: FC<QuarterProps> = ({ year, yearIndex, quarterIndex, data }) => {
   const dispatch = useAppDispatch();
   let quarterTitle = data.name.charAt(0).toUpperCase() + data.name.slice(1);
-  const invalidCourses = useAppSelector(state => state.roadmap.invalidCourses);
+  const invalidCourses = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.invalidCourses);
 
   const [showQuarterMenu, setShowQuarterMenu] = useState(false);
   const [target, setTarget] = useState<any>(null!);
diff --git a/site/src/pages/RoadmapPage/RoadmapMultiplan.scss b/site/src/pages/RoadmapPage/RoadmapMultiplan.scss
new file mode 100644
index 00000000..c4461b69
--- /dev/null
+++ b/site/src/pages/RoadmapPage/RoadmapMultiplan.scss
@@ -0,0 +1,6 @@
+.multi-plan-selector {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 60px;
+}
\ No newline at end of file
diff --git a/site/src/pages/RoadmapPage/RoadmapMultiplan.tsx b/site/src/pages/RoadmapPage/RoadmapMultiplan.tsx
new file mode 100644
index 00000000..0bf52812
--- /dev/null
+++ b/site/src/pages/RoadmapPage/RoadmapMultiplan.tsx
@@ -0,0 +1,163 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import { FC, useState } from "react";
+import { TextArea } from 'semantic-ui-react';
+import { useAppDispatch, useAppSelector } from "src/store/hooks";
+import { addRoadmapPlan, deleteRoadmapPlan, initialState, setPlanIndex, setPlanName } from "../../store/slices/roadmapSlice";
+import { Box } from '@mui/material';
+import Dropdown from 'react-bootstrap/esm/Dropdown';
+import "./RoadmapMultiplan.scss";
+import * as Icon from "react-bootstrap-icons";
+
+
+const RoadmapMultiplan: FC = () => {
+    const dispatch = useAppDispatch();
+    const allPlans = useAppSelector(state => state.roadmap);
+    const [currentPlanIndex, setCurrentPlanIndex] = useState(allPlans.currentPlanIndex);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isEdit, setIsEdit] = useState(false);
+    const [isDelete, setIsDelete] = useState(false);
+    const [newPlanName, setNewPlanName] = useState(allPlans.plans[allPlans.currentPlanIndex].name);
+
+    // name: name of the plan, content: stores the content of plan
+    const { name, content } = allPlans.plans[currentPlanIndex];
+
+    const addNewPlan = (name: string) => {
+        dispatch(addRoadmapPlan({ name: name, content: initialState }));
+    };
+
+    const deleteCurrentPlan = () => {
+        setCurrentPlanIndex(0);
+        dispatch(setPlanIndex(0));
+        dispatch(deleteRoadmapPlan({ planIndex: currentPlanIndex }));
+        setIsDelete(false);
+    };
+
+    const handleSubmitNewPlan = () => {
+        setIsOpen(false);
+        addNewPlan(newPlanName);
+        const newIndex = allPlans.plans.length;
+        setCurrentPlanIndex(newIndex);
+        dispatch(setPlanIndex(newIndex));
+    };
+
+
+    const modifyPlanName = () => {
+        setIsEdit(false);
+        dispatch(setPlanName({ index: allPlans.currentPlanIndex, name: newPlanName }));
+    };
+
+
+    return (
+        <div className="multi-plan-selector">
+            <Box sx={{ display: "flex", gap: 2, flexDirection: "row", alignItems: "center" }}>
+                <Dropdown>
+                    <Dropdown.Toggle id="dropdown-basic">
+                        <Icon.PenFill style={{ width: "50%", height: "50%", marginRight: 5 }} />
+                    </Dropdown.Toggle>
+                    <Dropdown.Menu>
+                        <Dropdown.Item onClick={() => setIsEdit(true)}>Edit Plan Name</Dropdown.Item>
+                        <Dropdown.Item onClick={() => setIsOpen(true)}>Add Plan</Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
+                <FormControl variant="standard" sx={{ m: 1, minWidth: 120, marginBottom: 3 }}>
+                    <InputLabel style={{ width: "min-content" }} id="demo-simple-select-standard-label">{name}</InputLabel>
+                    <Select
+                        labelId="demo-simple-select-standard-label"
+                        id="demo-simple-select-standard"
+                        sx={{ width: "auto" }}
+                        value={""}
+                        label={name}
+                        onChange={(e) => {
+                            let newIndex = +(e.target.value);
+                            // console.log("selected index", newIndex);
+                            dispatch(setPlanIndex(newIndex));
+                            setCurrentPlanIndex(newIndex);
+                        }}
+                    >
+                        {
+                            allPlans.plans.map((plan, index) => {
+                                return <MenuItem value={index}>
+                                    {plan.name}
+                                </MenuItem>
+                            })
+                        }
+                    </Select>
+                    <Dialog
+                        open={isOpen}
+                        onClose={() => setIsOpen(false)}
+                        PaperProps={{ sx: { width: "30%", height: "20%" } }}
+                        style={{ marginTop: 20 }}
+                    >
+                        <DialogTitle>New Plan</DialogTitle>
+                        <DialogContent>
+                            <TextField
+                                autoFocus
+                                margin="dense"
+                                id="name"
+                                label="Plan Name"
+                                type="email"
+                                fullWidth
+                                variant="standard"
+                                placeholder="plan name"
+                                onChange={(e) => { setNewPlanName(e.target.value) }}
+                                style={{ width: "100%" }}
+                            />
+                            <Button style={{ float: "right" }} onClick={() => handleSubmitNewPlan()}>Submit</Button>
+                        </DialogContent>
+                    </Dialog>
+                    <Dialog
+                        open={isEdit}
+                        onClose={() => setIsEdit(false)}
+                        PaperProps={{ sx: { width: "30%", height: "20%" } }}
+                        style={{ marginTop: 20 }}
+                    >
+                        <DialogTitle>Edit Plan Name</DialogTitle>
+                        <DialogContent>
+                            <TextField
+                                autoFocus
+                                margin="dense"
+                                id="name"
+                                label=""
+                                type="email"
+                                fullWidth
+                                variant="standard"
+                                placeholder=""
+                                defaultValue={allPlans.plans[allPlans.currentPlanIndex].name}
+                                onChange={(e) => { setNewPlanName(e.target.value) }}
+                                style={{ width: "100%" }}
+                            />
+                            <Button style={{ float: "right" }} onClick={() => modifyPlanName()}>Submit</Button>
+                        </DialogContent>
+                    </Dialog>
+                    <Dialog
+                        open={isDelete}
+                        onClose={() => setIsDelete(false)}
+                        PaperProps={{ sx: { width: "30%", height: "20%" } }}
+                        style={{ marginTop: 20 }}
+                    >
+                        <DialogTitle>Delete Plan</DialogTitle>
+                        <DialogContent>
+                            <p>Are you sure about deleting current plan?</p>
+                            <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
+                                <Button onClick={() => setIsDelete(false)}>Cancel</Button>
+                                <Button sx={{ color: "red" }} onClick={() => deleteCurrentPlan()}>Delete</Button>
+                            </Box>
+                        </DialogContent>
+                    </Dialog>
+                </FormControl>
+            </Box>
+            <Button style={{ alignItems: "center", color: "red", marginTop: 10, height: 30 }} onClick={() => setIsDelete(true)}>Delete Plan</Button>
+        </div>
+    );
+};
+
+
+export default RoadmapMultiplan;
\ No newline at end of file
diff --git a/site/src/pages/RoadmapPage/Transfer.tsx b/site/src/pages/RoadmapPage/Transfer.tsx
index 17e91576..3bd72074 100644
--- a/site/src/pages/RoadmapPage/Transfer.tsx
+++ b/site/src/pages/RoadmapPage/Transfer.tsx
@@ -64,8 +64,8 @@ const TransferEntry: FC<TransferEntryProps> = (props) => {
 
 const Transfer: FC<MissingCoursesProps> = ({ missingPrereqNames }) => {
     const dispatch = useAppDispatch();
-    const transfers = useAppSelector(state => state.roadmap.transfers);
-    const show = useAppSelector(state => state.roadmap.showTransfer);
+    const transfers = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.transfers);
+    const show = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.showTransfer);
     const handleClose = () => dispatch(setShowTransfer(false));
 
     // console.log("missing courses: ", missingPrereqNames);
diff --git a/site/src/pages/RoadmapPage/index.tsx b/site/src/pages/RoadmapPage/index.tsx
index 7a205951..3aef7ae6 100644
--- a/site/src/pages/RoadmapPage/index.tsx
+++ b/site/src/pages/RoadmapPage/index.tsx
@@ -7,10 +7,11 @@ import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { moveCourse, deleteCourse } from '../../store/slices/roadmapSlice';
 import AddCoursePopup from './AddCoursePopup';
 import { isMobile, isBrowser } from 'react-device-detect';
+import RoadmapMultiplan from './RoadmapMultiplan';
 
 const RoadmapPage: FC = () => {
   const dispatch = useAppDispatch();
-  const showSearch = useAppSelector(state => state.roadmap.showSearch);
+  const showSearch = useAppSelector(state => state.roadmap.plans[state.roadmap.currentPlanIndex].content.showSearch);
 
   const onDragEnd = useCallback((result: DropResult) => {
     if (result.reason === 'DROP') {
@@ -91,6 +92,7 @@ const RoadmapPage: FC = () => {
 
   return (
     <>
+      <RoadmapMultiplan />
       <div className='roadmap-page'>
         <AddCoursePopup />
         <DragDropContext onDragEnd={onDragEnd} onDragUpdate={onDragUpdate}>
diff --git a/site/src/store/slices/roadmapSlice.ts b/site/src/store/slices/roadmapSlice.ts
index d6014fbc..491be494 100644
--- a/site/src/store/slices/roadmapSlice.ts
+++ b/site/src/store/slices/roadmapSlice.ts
@@ -1,6 +1,6 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import type { RootState } from '../store'
-import { PlannerData, PlannerYearData, CourseGQLData, YearIdentifier, QuarterIdentifier, CourseIdentifier, InvalidCourseData, TransferData, PlannerQuarterData } from '../../types/types';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { CourseGQLData, CourseIdentifier, InvalidCourseData, PlannerData, PlannerQuarterData, PlannerYearData, QuarterIdentifier, TransferData, YearIdentifier } from '../../types/types';
+import type { RootState } from '../store';
 
 // Define a type for the slice state
 interface RoadmapState {
@@ -20,8 +20,9 @@ interface RoadmapState {
     showAddCourse: boolean;
 }
 
+
 // Define the initial state using that type
-const initialState: RoadmapState = {
+export const initialState: RoadmapState = {
     yearPlans: [],
     activeCourse: null!,
     invalidCourses: [],
@@ -31,6 +32,42 @@ const initialState: RoadmapState = {
     showAddCourse: false
 }
 
+/** added for multiple planner */
+// create roadmap plan object 
+interface RoadmapPlan {
+    name: string;
+    content: RoadmapState;
+}
+
+interface RoadmapPlanIdentifier {
+    planIndex: number;
+}
+
+interface SetPlanNamePayload {
+    index: number;
+    name: string;
+}
+
+// default plan to display for uesr
+const defaultPlan: RoadmapPlan = {
+    name: "Schedule 1",
+    content: initialState
+};
+
+// have an array of RoadmapPlan; use index to access them later
+interface RoadmapPlans {
+    plans: RoadmapPlan[];
+    currentPlanIndex: number;
+};
+
+// define initial empty plans
+const initialPlans: RoadmapPlans = {
+    plans: [defaultPlan],
+    currentPlanIndex: 0
+};
+/** added for multiple planner */
+
+
 // Payload to pass in to move a course
 interface MoveCoursePayload {
     from: CourseIdentifier;
@@ -60,10 +97,11 @@ interface SetTransferPayload {
     transfer: TransferData;
 }
 
+
 export const roadmapSlice = createSlice({
     name: 'roadmap',
     // `createSlice` will infer the state type from the `initialState` argument
-    initialState,
+    initialState: initialPlans,
     reducers: {
         // Use the PayloadAction type to declare the contents of `action.payload`
         moveCourse: (state, action: PayloadAction<MoveCoursePayload>) => {
@@ -78,25 +116,25 @@ export const roadmapSlice = createSlice({
             // not from the searchbar
             if (fromYear != -1) {
                 // remove course from list
-                let courseList = state.yearPlans[fromYear].quarters[fromQuarter].courses;
+                let courseList = state.plans[state.currentPlanIndex].content.yearPlans[fromYear].quarters[fromQuarter].courses;
                 [removed] = courseList.splice(fromCourse, 1);
             }
             // from the searchbar
             else {
                 // active course has the current dragging course
-                removed = state.activeCourse;
+                removed = state.plans[state.currentPlanIndex].content.activeCourse;
             }
 
             // add course to list
-            let courseList = state.yearPlans[toYear].quarters[toQuarter].courses;
+            let courseList = state.plans[state.currentPlanIndex].content.yearPlans[toYear].quarters[toQuarter].courses;
             courseList.splice(toCourse, 0, removed!);
         },
         deleteCourse: (state, action: PayloadAction<CourseIdentifier>) => {
-            state.yearPlans[action.payload.yearIndex].quarters[action.payload.quarterIndex].courses.splice(action.payload.courseIndex, 1);
+            state.plans[state.currentPlanIndex].content.yearPlans[action.payload.yearIndex].quarters[action.payload.quarterIndex].courses.splice(action.payload.courseIndex, 1);
         },
         addQuarter: (state, action: PayloadAction<AddQuarterPayload>) => {
             let startYear = action.payload.startYear;
-            let currentYears = state.yearPlans.map(e => e.startYear);
+            let currentYears = state.plans[state.currentPlanIndex].content.yearPlans.map(e => e.startYear);
             let newQuarter = action.payload.quarterData;
 
             // if year doesn't exist
@@ -106,7 +144,7 @@ export const roadmapSlice = createSlice({
             }
 
             let yearIndex: number = currentYears.indexOf(startYear);
-            let currentQuarters = state.yearPlans[yearIndex].quarters.map(e => e.name);
+            let currentQuarters = state.plans[state.currentPlanIndex].content.yearPlans[yearIndex].quarters.map(e => e.name);
 
             // if duplicate quarter
             if (currentQuarters.includes(newQuarter.name)) {
@@ -127,16 +165,16 @@ export const roadmapSlice = createSlice({
                 }
             }
 
-            state.yearPlans[yearIndex].quarters.splice(index, 0, newQuarter);
+            state.plans[state.currentPlanIndex].content.yearPlans[yearIndex].quarters.splice(index, 0, newQuarter);
         },
         deleteQuarter: (state, action: PayloadAction<QuarterIdentifier>) => {
-            state.yearPlans[action.payload.yearIndex].quarters.splice(action.payload.quarterIndex, 1);
+            state.plans[state.currentPlanIndex].content.yearPlans[action.payload.yearIndex].quarters.splice(action.payload.quarterIndex, 1);
         },
         clearQuarter: (state, action: PayloadAction<QuarterIdentifier>) => {
-            state.yearPlans[action.payload.yearIndex].quarters[action.payload.quarterIndex].courses = [];
+            state.plans[state.currentPlanIndex].content.yearPlans[action.payload.yearIndex].quarters[action.payload.quarterIndex].courses = [];
         },
         addYear: (state, action: PayloadAction<AddYearPayload>) => {
-            let currentYears = state.yearPlans.map(e => e.startYear);
+            let currentYears = state.plans[state.currentPlanIndex].content.yearPlans.map(e => e.startYear);
             let newYear = action.payload.yearData.startYear;
 
             // if duplicate year
@@ -153,10 +191,10 @@ export const roadmapSlice = createSlice({
                 }
             }
 
-            state.yearPlans.splice(index, 0, action.payload.yearData);
+            state.plans[state.currentPlanIndex].content.yearPlans.splice(index, 0, action.payload.yearData);
         },
         editYear: (state, action: PayloadAction<EditYearPayload>) => {
-            let currentYears = state.yearPlans.map(e => e.startYear);
+            let currentYears = state.plans[state.currentPlanIndex].content.yearPlans.map(e => e.startYear);
             let newYear = action.payload.startYear;
             let yearIndex = action.payload.index;
 
@@ -167,61 +205,88 @@ export const roadmapSlice = createSlice({
             }
 
             // edit year & sort years
-            state.yearPlans[yearIndex].startYear = newYear;
-            state.yearPlans.sort((a, b) => a.startYear - b.startYear);
+            state.plans[state.currentPlanIndex].content.yearPlans[yearIndex].startYear = newYear;
+            state.plans[state.currentPlanIndex].content.yearPlans.sort((a, b) => a.startYear - b.startYear);
 
         },
         deleteYear: (state, action: PayloadAction<YearIdentifier>) => {
-            state.yearPlans.splice(action.payload.yearIndex, 1);
+            state.plans[state.currentPlanIndex].content.yearPlans.splice(action.payload.yearIndex, 1);
         },
         clearYear: (state, action: PayloadAction<YearIdentifier>) => {
-            for (let i = 0; i < state.yearPlans[action.payload.yearIndex].quarters.length; i++) {
-                state.yearPlans[action.payload.yearIndex].quarters[i].courses = [];
+            for (let i = 0; i < state.plans[state.currentPlanIndex].content.yearPlans[action.payload.yearIndex].quarters.length; i++) {
+                state.plans[state.currentPlanIndex].content.yearPlans[action.payload.yearIndex].quarters[i].courses = [];
             }
         },
         clearPlanner: (state) => {
             if(window.confirm("Are you sure you want to clear your Roadmap?")) {
-                state.yearPlans = [];
+                state.plans[state.currentPlanIndex].content.yearPlans = [];
             }
         },
         setActiveCourse: (state, action: PayloadAction<CourseGQLData>) => {
-            state.activeCourse = action.payload;
+            state.plans[state.currentPlanIndex].content.activeCourse = action.payload;
         },
         setYearPlans: (state, action: PayloadAction<PlannerData>) => {
-            state.yearPlans = action.payload;
+            state.plans[state.currentPlanIndex].content.yearPlans = action.payload;
         },
         setInvalidCourses: (state, action: PayloadAction<InvalidCourseData[]>) => {
-            state.invalidCourses = action.payload;
+            state.plans[state.currentPlanIndex].content.invalidCourses = action.payload;
         },
         setShowTransfer: (state, action: PayloadAction<boolean>) => {
-            state.showTransfer = action.payload;
+            state.plans[state.currentPlanIndex].content.showTransfer = action.payload;
         },
         addTransfer: (state, action: PayloadAction<TransferData>) => {
-            state.transfers.push(action.payload);
+            state.plans[state.currentPlanIndex].content.transfers.push(action.payload);
         },
         setTransfer: (state, action: PayloadAction<SetTransferPayload>) => {
-            state.transfers[action.payload.index] = action.payload.transfer;
+            state.plans[state.currentPlanIndex].content.transfers[action.payload.index] = action.payload.transfer;
         },
         setTransfers: (state, action: PayloadAction<TransferData[]>) => {
-            state.transfers = action.payload;
+            state.plans[state.currentPlanIndex].content.transfers = action.payload;
         },
         deleteTransfer: (state, action: PayloadAction<number>) => {
-            state.transfers.splice(action.payload, 1);
+            state.plans[state.currentPlanIndex].content.transfers.splice(action.payload, 1);
         },
         setShowSearch: (state, action: PayloadAction<boolean>) => {
-            state.showSearch = action.payload;
+            state.plans[state.currentPlanIndex].content.showSearch = action.payload;
         },
         setShowAddCourse: (state, action: PayloadAction<boolean>) => {
-            state.showAddCourse = action.payload;
+            state.plans[state.currentPlanIndex].content.showAddCourse = action.payload;
+        },
+        /** added for multiple plans */
+        setRoadmapPlan: (state, action: PayloadAction<RoadmapPlans>) => {
+            state.plans = action.payload.plans;
+        },
+        addRoadmapPlan: (state, action: PayloadAction<RoadmapPlan>) => {
+            state.plans.push(action.payload);
+        },
+        deleteRoadmapPlan: (state, action: PayloadAction<RoadmapPlanIdentifier>) => {
+            state.plans.splice(action.payload.planIndex, 1);
+            if (state.plans.length === 0) {
+                state.plans.push(defaultPlan);
+            }
         },
+        setPlanIndex: (state, action: PayloadAction<number>) => {
+            state.currentPlanIndex = action.payload;
+        },
+        setPlanName: (state, action: PayloadAction<SetPlanNamePayload>) => {
+            let index = action.payload.index;
+            state.plans[index].name = action.payload.name;
+        }
+        /** added for multiple plans */
     },
 })
 
+
 export const { moveCourse, deleteCourse, addQuarter, deleteQuarter, clearQuarter, clearYear, addYear, editYear, deleteYear, clearPlanner,
     setActiveCourse, setYearPlans, setInvalidCourses, setShowTransfer, addTransfer, setTransfer,
-    setTransfers, deleteTransfer, setShowSearch, setShowAddCourse } = roadmapSlice.actions
+    setTransfers, deleteTransfer, setShowSearch, setShowAddCourse,
+    setRoadmapPlan, addRoadmapPlan, deleteRoadmapPlan, setPlanIndex, setPlanName } = roadmapSlice.actions
+
+
+// export const { setRoadmapPlan, addRoadmapPlan, deleteRoadmapPlan } = roadmapMultiplePlanSlice.actions;
 
 // Other code such as selectors can use the imported `RootState` type
-export const selectYearPlans = (state: RootState) => state.roadmap.yearPlans;
+export const selectYearPlans = (state: RootState) => state.roadmap.plans[state.roadmap.currentPlanIndex].content.yearPlans;
+
 
-export default roadmapSlice.reducer
\ No newline at end of file
+export default roadmapSlice.reducer;