diff --git a/package-lock.json b/package-lock.json
index c205fc57..23ec36f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,14 @@
       "name": "project1-bootcamp",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "@mui/material": "^5.14.18",
         "react": "^18.1.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.1.0",
         "react-scripts": "5.0.1"
       }
@@ -1764,11 +1771,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1786,6 +1793,11 @@
         "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.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -1997,6 +2009,158 @@
         "postcss": "^8.3"
       }
     },
+    "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/eslintrc": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
@@ -2057,6 +2221,86 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "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.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "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/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -2785,6 +3029,236 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
       "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.24",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.24.tgz",
+      "integrity": "sha512-bKt2pUADHGQtqWDZ8nvL2Lvg2GNJyd/ZUgZAJoYzRgmnxBL9j36MSlS3+exEdYkikcnvVafcBtD904RypFKb0w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.9",
+        "@mui/utils": "^5.14.18",
+        "@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/core-downloads-tracker": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.18.tgz",
+      "integrity": "sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.18.tgz",
+      "integrity": "sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "5.0.0-beta.24",
+        "@mui/core-downloads-tracker": "^5.14.18",
+        "@mui/system": "^5.14.18",
+        "@mui/types": "^7.2.9",
+        "@mui/utils": "^5.14.18",
+        "@types/react-transition-group": "^4.4.8",
+        "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/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.18",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.18.tgz",
+      "integrity": "sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.18",
+        "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.18",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.18.tgz",
+      "integrity": "sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@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.18",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.18.tgz",
+      "integrity": "sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/private-theming": "^5.14.18",
+        "@mui/styled-engine": "^5.14.18",
+        "@mui/types": "^7.2.9",
+        "@mui/utils": "^5.14.18",
+        "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/types": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.9.tgz",
+      "integrity": "sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
+      "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@types/prop-types": "^15.7.10",
+        "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/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2866,6 +3340,32 @@
         }
       }
     },
+<<<<<<< HEAD
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+=======
+    "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"
+      }
+>>>>>>> test-branch
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3387,6 +3887,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.10",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
+      "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A=="
+    },
     "node_modules/@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -3402,6 +3907,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "node_modules/@types/react": {
+      "version": "18.2.37",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
+      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz",
+      "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3415,6 +3938,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
+      "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA=="
+    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -4920,6 +5448,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "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/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5586,6 +6122,11 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5794,6 +6335,16 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -5829,6 +6380,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -7138,6 +7698,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",
@@ -7705,6 +8270,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13082,6 +13660,43 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
@@ -13184,6 +13799,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13230,6 +13860,14 @@
         "node": "*"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14246,6 +14884,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/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17044,11 +17687,18 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "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/runtime-corejs3": {
@@ -17187,6 +17837,132 @@
       "integrity": "sha512-T5ZyNSw9G0x0UDFiXV40a7VjKw2b+l4G+S0sctKqxhx8cg9QtMUAGwJBVU9mHPDPoZEmwm0tEoukjl4zb9MU7Q==",
       "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/eslintrc": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
@@ -17231,6 +18007,66 @@
         }
       }
     },
+    "@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.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "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=="
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "peer": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -17771,6 +18607,111 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
       "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg=="
     },
+    "@mui/base": {
+      "version": "5.0.0-beta.24",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.24.tgz",
+      "integrity": "sha512-bKt2pUADHGQtqWDZ8nvL2Lvg2GNJyd/ZUgZAJoYzRgmnxBL9j36MSlS3+exEdYkikcnvVafcBtD904RypFKb0w==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.9",
+        "@mui/utils": "^5.14.18",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/core-downloads-tracker": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.18.tgz",
+      "integrity": "sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ=="
+    },
+    "@mui/material": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.18.tgz",
+      "integrity": "sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "5.0.0-beta.24",
+        "@mui/core-downloads-tracker": "^5.14.18",
+        "@mui/system": "^5.14.18",
+        "@mui/types": "^7.2.9",
+        "@mui/utils": "^5.14.18",
+        "@types/react-transition-group": "^4.4.8",
+        "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": {
+        "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.18",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.18.tgz",
+      "integrity": "sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.18",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.18.tgz",
+      "integrity": "sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.18.tgz",
+      "integrity": "sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/private-theming": "^5.14.18",
+        "@mui/styled-engine": "^5.14.18",
+        "@mui/types": "^7.2.9",
+        "@mui/utils": "^5.14.18",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.9.tgz",
+      "integrity": "sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
+      "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@types/prop-types": "^15.7.10",
+        "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=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -17810,6 +18751,28 @@
         "source-map": "^0.7.3"
       }
     },
+<<<<<<< HEAD
+    "@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+=======
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+>>>>>>> test-branch
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18201,6 +19164,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.10",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
+      "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -18216,6 +19184,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "@types/react": {
+      "version": "18.2.37",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
+      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz",
+      "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -18229,6 +19215,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "@types/scheduler": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
+      "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -19343,6 +20334,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -19809,6 +20805,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -19961,6 +20962,16 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "requires": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -19990,6 +21001,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -20961,6 +21981,11 @@
         "pkg-dir": "^4.1.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": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -21341,6 +22366,21 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -25095,6 +26135,26 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "requires": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "requires": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "react-dom": {
       "version": "18.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
@@ -25174,6 +26234,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -25210,6 +26281,14 @@
         }
       }
     },
+    "redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -25955,6 +27034,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=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index a100866d..b0d3a174 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/material": "^5.14.18",
     "react": "^18.1.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },
diff --git a/project-planning/Low Fidelity Wireframes Template.jpg b/project-planning/Low Fidelity Wireframes Template.jpg
new file mode 100644
index 00000000..86a662b7
Binary files /dev/null and b/project-planning/Low Fidelity Wireframes Template.jpg differ
diff --git a/project-walkthrough b/project-walkthrough
new file mode 100644
index 00000000..95c675a9
--- /dev/null
+++ b/project-walkthrough
@@ -0,0 +1,74 @@
+// Updating the first task in the this.state.tasks array
+
+/** TaskUpdate Component Modifications
+ * In TaskUpdate.js, our constructor is modified as follows */
+class TaskUpdate {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      title: this.props.title,
+      task: this.props.task,
+    };
+    // we initialize local state of 'TaskUpdate' with the 'title' and 'task' from the props
+    // this ensures that the input fields in the update form display the current values of the task being updated
+  }
+}
+
+// handleSubmit function
+handleSubmit = (e) => {
+  e.preventDefault();
+
+  const updatedTask = {
+    title: this.state.title,
+    task: this.state.task,
+  };
+
+  this.props.updateTask(this.props.id, updatedTask);
+
+  this.props.updateTask(this.props.id, updatedTask);
+
+  // Close the update form by calling the callback function
+  this.props.onUpdateComplete();
+};
+/** Everytime the update button is clicked and the update form is submitted, we create an 'updatedTask' object with the new 'title' and 'task' values from the local state
+ *
+ */
+
+// Delete Logic
+
+/** Defining handleDeleteClick Method in Task.js
+ * handleDeleteClick = () =>{
+ *  this.props.deleteTask(this.props.id)
+ * }
+ * Inside the handleDeleteClick function, you can call a deleteTask function that is passed as a prop from  TaskList.js
+ */
+
+/** Passing the deleteTask function as a prop in the render method
+ * <Task
+      key={task.id}
+      {...task}
+      updateTask={this.updateTask}
+      deleteTask={this.deleteTask}
+    />
+ */
+
+/** Handling deletion in deleteTask function
+ * deleteTask = (id) => {
+      this.setState((prevState)=>{
+        const updatedTasks = prevState.tasks.filter((task)=>{
+          task.id !== id
+          return { tasks: updatedTasks }
+        })
+      })
+  }
+
+  deleteTask takes in the id argument which is the id of the task to be deleted
+
+  this.setState() method is called to update the state in the TaskList Component and it takes the previous state (prevState) as an argument to update the current state based on its previous value
+
+  we declare an updatedTasks variable which is assigned the result of the filter method applied to the prevState.tasks array 
+    filter() creates a new array by iterating over the original array's elements and including only those that meet a certain condition (excludes task with specific id -> task.id !== id)
+
+  Finally, this.setState returns an object with property tasks set to updatedTasks, which does not have the deleted task
+ */
diff --git a/public/index.html b/public/index.html
index bd669818..076947ff 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,17 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+      integrity="sha384-GLhlTQ8iWSevFYlK89irb/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jpZZ"
+      crossorigin="anonymous"
+    />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -15,6 +26,11 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -28,8 +44,9 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+    <div class="background-container">
+      <div id="root"></div>
+      <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +55,6 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    --></div>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
index 97b7c578..76a30099 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,19 +1,105 @@
-.App {
-  text-align: center;
+/* App.css */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* height of 100vh ensures that the layout spans the full height */
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.task-list,
+.task-in-progress,
+.task-in-review,
+.task-completed {
+  flex: 1; /* Equal distribution of space */
+  box-sizing: border-box; /* Include padding and border in the width calculation */
+  width: calc(33.33% - 40px); /* 33.33% width with 20px margin on each side */
+  margin: 20px 20px;
+  border: 1px solid #ccc;
+  padding: 16px;
+  border-radius: 12px;
+  opacity: 80%;
+  font-size: 27px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.task-container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex: 1; /* This allows the task components to take up the available space */
+}
+
+.header-2 {
+  margin: 20px;
+}
+
+.task-list {
+  background: #e97e7e;
+}
+
+.task-in-progress {
+  background: cyan;
+}
+
+.task-in-review {
+  background: rgb(244, 244, 162);
+}
+
+.task-completed {
+  background: rgb(146, 246, 153);
+}
+
+.task-composer {
+  margin: 20px 0px 50px;
+}
+
+/* Style the Header as you need it. For example: */
+.header {
+  /* background: #333; */
+  color: #fff;
+  font-size: 35px;
+  display: flex; /* flex container to enable */
+  padding: 10px;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  align-items: center;
+  opacity: 30%;
+}
+
+.header-link {
   color: white;
 }
+
+.content {
+  color: black;
+}
+
+.main {
+  opacity: 80%;
+}
+
+.buttons {
+  margin: 10px;
+  margin-bottom: 20px;
+  border-radius: 25%;
+}
+
+button {
+  margin-top: 15px;
+  border-radius: 25%;
+}
+
+.adjustments {
+  margin-bottom: 50px;
+}
+
+form input[type="text"],
+form input[type="email"],
+/* Add more selectors for other input types if needed */
+form input[type="submit"] {
+  border-radius: 8px; /* Adjust the value as needed */
+  /* Other styling properties */
+  /* For example: */
+  border: 1px solid #ccc;
+  padding: 8px;
+  margin-bottom: 10px;
+}
+
+form textarea[type="text"] {
+  border-radius: 8px;
+}
diff --git a/src/App.js b/src/App.js
index 4a6f800f..737843ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,441 @@
 import React from "react";
-import logo from "./logo.png";
+
 import "./App.css";
+import Header from "./components/Header";
+
+import TaskList from "./components/TaskList";
+import TaskListInProgress from "./components/TaskListInProgress";
+import TaskListInReview from "./components/TaskListInReview";
+import TaskListCompleted from "./components/TaskListCompleted";
 
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tasks: [
+        {
+          id: 0,
+          title: "Reverse Engineer the Type-33 Needler",
+          task: "Coding a software to reverse engineer the Needler for Sacred Promissory",
+        },
+        // {
+        //   id: 1,
+        //   title: "Fixing bugs",
+        //   task: "Fixing coding bugs on the software for Machine Learning AI",
+        // },
+      ],
+      tasksInProgress: [
+        {
+          // id: 0,
+          // title: "React Website - ORION Project",
+          // task: "Coding a frontend website for Doctor Halsey",
+        },
+      ],
+      tasksInReview: [
+        // {
+        //   id: 0,
+        //   title: "Project Fireteam Osiris",
+        //   task: "Implementing a MongoDB Database for Spartan Locke",
+        // },
+      ],
+      tasksCompleted: [
+        {
+          // id: 0,
+          // title: "Improved M-41 SPNKER with upgrades to tracking",
+          // task: "Added tracking to lock on to targets with greater distance and speed of the payload",
+          // timeTaken: "",
+          // keyTakeaways: "",
+        },
+        // {
+        //   id: 1,
+        //   title: "Fixed software",
+        //   task: "Fixing coding bugs on the software for Machine Learning AI",
+        // },
+      ],
+    };
+  }
+
+  // Transfer tasks from Open Tasks to Tasks In Progress
+  moveTaskOpen = (id) => {
+    // Find the task in state.tasks using the find method
+    const taskToMove = this.state.tasks.find((task) => task.id === id);
+    /** find()
+     * find() method loops through the array elements and returns the first element that is true for task.id === id
+     */
+
+    // if there is a taskToMove
+    if (taskToMove) {
+      const newId = this.state.tasksInProgress.length + 1;
+      const updatedTask = { ...taskToMove, id: newId };
+      /**
+       * const updatedTask = { ...taskToMove, id: newId };
+       * { ...taskToMove }: ... spread operator creates a shallow copy of the taskToMove object and spreads them into a new object
+       * id: newId modifies the id property of the shallow copy and assignes the value of `newId` to the `id` property of the copied object
+       */
+
+      this.setState(
+        (prevState) => ({
+          // Wrap the arrow function in () to represent object literal and not function block!
+          tasks: prevState.tasks.filter((task) => task.id !== id),
+          tasksInProgress: [...prevState.tasksInProgress, updatedTask],
+        }),
+        this.updateLocalStorage
+      );
+    }
+  };
+
+  // Transfer tasks from Tasks In Progress to Open Tasks
+  moveTaskInProgressBacktoOpen = (id) => {
+    const taskToMove = this.state.tasksInProgress.find(
+      (task) => task.id === id
+    ); // finds task matching the id passed into the argument using find() method
+
+    if (taskToMove) {
+      const newId = this.state.tasks.length + 1;
+      const updatedTask = { ...taskToMove, id: newId };
+
+      this.setState(
+        (prevState) => ({
+          tasksInProgress: prevState.tasksInProgress.filter(
+            (task) => task.id !== id
+          ),
+          tasks: [...prevState.tasks, updatedTask],
+        }),
+        this.updateLocalStorage
+      );
+    }
+  };
+
+  // Transfer tasks from In Review back to In Progress
+  moveTaskInReviewBackToInProgress = (id) => {
+    const taskToMove = this.state.tasksInReview.find((task) => task.id === id);
+
+    if (taskToMove) {
+      const newId = this.state.tasksInProgress.length + 1;
+      const updatedTask = { ...taskToMove, id: newId };
+
+      this.setState(
+        (prevState) => ({
+          tasksInReview: prevState.tasksInReview.filter(
+            (task) => task.id !== id
+          ),
+          tasksInProgress: [...prevState.tasksInProgress, updatedTask],
+        }),
+        this.updateLocalStorage
+      );
+    }
+  };
+
+  // Transfer tasks from In Progress to In Review
+  moveTaskInProgress = (id) => {
+    const taskToMove = this.state.tasksInProgress.find(
+      (task) => task.id === id
+    );
+    if (taskToMove) {
+      const newId = this.state.tasksInReview.length + 1;
+      const updatedTask = { ...taskToMove, id: newId };
+      this.setState(
+        (prevState) => ({
+          tasksInProgress: prevState.tasksInProgress.filter(
+            (task) => task.id !== id
+          ),
+          tasksInReview: [...prevState.tasksInReview, updatedTask],
+        }),
+        this.updateLocalStorage
+      );
+    }
+  };
+
+  // OPEN TASKS SECTION
+  updateTask = (id, updatedTask) => {
+    this.setState((prevState) => {
+      const updatedTasks = prevState.tasks.map((task) => {
+        if (task.id === id) {
+          return { ...task, ...updatedTask };
+        }
+        return task;
+      });
+      return { tasks: updatedTasks };
+    }, this.updateLocalStorage);
+  };
+
+  addTaskToDo = (task) => {
+    const newId = this.state.tasks.length;
+    const newTask = { ...task, id: newId };
+    this.setState(
+      (prevState) => ({ tasks: [...prevState.tasks, newTask] }),
+      this.updateLocalStorage
+    );
+  };
+
+  deleteTask = (id) => {
+    this.setState(
+      (prevState) => ({
+        tasks: prevState.tasks.filter((task) => task.id !== id),
+      }),
+      this.updateLocalStorage
+    );
+  };
+
+  updateLocalStorage = () => {
+    localStorage.setItem("tasks", JSON.stringify(this.state.tasks));
+    localStorage.setItem(
+      "tasksInProgress",
+      JSON.stringify(this.state.tasksInProgress)
+    );
+    localStorage.setItem(
+      "tasksInReview",
+      JSON.stringify(this.state.tasksInReview)
+    );
+    localStorage.setItem(
+      "tasksCompleted",
+      JSON.stringify(this.state.tasksCompleted)
+    );
+  };
+
+  resetLocalStorage = () => {
+    localStorage.clear();
+    this.setState(
+      {
+        tasks: [
+          {
+            id: 0,
+            title: "Reverse Engineer the Type-33 Needler",
+            task: "Coding a software to reverse engineer the Needler for Sacred Promissory",
+          },
+        ],
+      },
+      this.updateLocalStorage
+    );
+  };
+
+  componentDidMount() {
+    /** USED WHEN BROWSER IS REFRESHED OR REVISITED -> PERSISTENCE OF TASKS ACROSS SESSIONS
+     * componentDidMount() is used to retrieve data from 'localStorage' when the component, App.js, is mounted for the first time or refreshed in the browser
+     */
+    const savedTasks = localStorage.getItem("tasks");
+    const savedTasksInProgress = localStorage.getItem("tasksInProgress");
+    const savedTasksInReview = localStorage.getItem("tasksInReview");
+    const savedTasksCompleted = localStorage.getItem("tasksCompleted");
+
+    if (savedTasks) {
+      this.setState({
+        tasks: JSON.parse(savedTasks),
+        tasksInProgress: JSON.parse(savedTasksInProgress) || [],
+        tasksInReview: JSON.parse(savedTasksInReview),
+        tasksCompleted: JSON.parse(savedTasksCompleted),
+      });
+    }
+  }
+
+  // TASKS IN PROGRESS SECTION
+  updateTaskInProgress = (id, updatedTask) => {
+    this.setState((prevState) => {
+      const updatedTasks = prevState.tasksInProgress.map((task) => {
+        if (task.id === id) {
+          return { ...task, ...updatedTask };
+        }
+        return task;
+      });
+      return { tasksInProgress: updatedTasks };
+    }, this.updateLocalStorage);
+  };
+
+  addTaskToDoInProgress = (task) => {
+    const newId = this.state.tasksInProgress.length;
+    const newTask = { ...task, id: newId };
+    this.setState(
+      (prevState) => ({
+        tasksInProgress: [...prevState.tasksInProgress, newTask],
+      }),
+      this.updateLocalStorage
+    );
+  };
+
+  deleteTaskInProgress = (id) => {
+    this.setState(
+      (prevState) => ({
+        tasksInProgress: prevState.tasksInProgress.filter(
+          (task) => task.id !== id
+        ),
+      }),
+      this.updateLocalStorage
+    );
+  };
+
+  resetLocalStorageInProgress = () => {
+    localStorage.clear();
+    this.setState(
+      {
+        tasksInProgress: [
+          // {
+          //   id: 0,
+          //   title: "React Website - ORION Project",
+          //   task: "Coding a frontend website for Doctor Halsey",
+          // },
+        ],
+      },
+      this.updateLocalStorage
+    );
+  };
+
+  // TASKS IN REVIEW
+  updateTaskInReview = (id, updatedTask) => {
+    this.setState((prevState) => {
+      const updatedTasks = prevState.tasksInReview.map((task) => {
+        if (task.id === id) {
+          return { ...task, ...updatedTask };
+        }
+        return task;
+      });
+      return { tasksInReview: updatedTasks };
+    }, this.updateLocalStorage);
+  };
+
+  addTaskToDoInReview = (task) => {
+    const newId = this.state.tasksInReview.length;
+    const newTask = { ...task, id: newId };
+    this.setState(
+      (prevState) => ({ tasksInReview: [...prevState.tasksInReview, newTask] }),
+      this.updateLocalStorage
+    );
+  };
+
+  deleteTaskInReview = (id) => {
+    this.setState(
+      (prevState) => ({
+        tasksInReview: prevState.tasksInReview.filter((task) => task.id !== id),
+      }),
+      this.updateLocalStorage
+    );
+  };
+
+  resetLocalStorageInReview = () => {
+    localStorage.clear();
+    this.setState(
+      {
+        tasksInReview: [
+          // {
+          //   id: 0,
+          //   title: "Project Fireteam Osiris",
+          //   task: "Implementing a MongoDB Database for Spartan Locke",
+          // },
+        ],
+      },
+      this.updateLocalStorage
+    );
+  };
+
+  // Tasks Completed
+  resetLocalStorageCompleted = () => {
+    localStorage.clear();
+    this.setState(
+      {
+        tasksCompleted: [
+          // {
+          //   id: 0,
+          //   title: "Improved M-41 SPNKER with upgrades to tracking",
+          //   tasksCompleted:
+          //     "Added tracking to lock on to targets with greater distance and speed of the payload",
+          // },
+        ],
+      },
+      this.updateLocalStorage
+    );
+  };
+
+  reflectionToDo = (id, timeTaken, keyTakeaways) => {
+    this.setState((prevState) => {
+      const reflectedTasks = prevState.tasksCompleted.map((task) => {
+        if (task.id === id) {
+          return {
+            ...task,
+            timeTaken: timeTaken !== undefined ? timeTaken : task.timeTaken,
+            keyTakeaways:
+              keyTakeaways !== undefined ? keyTakeaways : task.keyTakeaways,
+          };
+        }
+        return task;
+      });
+      return { tasksCompleted: reflectedTasks };
+    }, this.updateLocalStorage);
+  };
+
+  deleteTaskCompleted = (id) => {
+    this.setState(
+      (prevState) => ({
+        tasksCompleted: prevState.tasksCompleted.filter(
+          (task) => task.id !== id
+        ),
+      }),
+      this.updateLocalStorage
+    );
+  };
+
+  // Move task from In Review to Completed
+  moveTaskInReview = (id) => {
+    const taskToMove = this.state.tasksInReview.find((task) => task.id === id);
+    if (taskToMove) {
+      const newId = this.state.tasksCompleted.length + 1;
+      const updatedTask = { ...taskToMove, id: newId };
+      this.setState(
+        (prevState) => ({
+          tasksInReview: prevState.tasksInReview.filter(
+            (task) => task.id !== id
+          ),
+          tasksCompleted: [...prevState.tasksCompleted, updatedTask],
+        }),
+        this.updateLocalStorage
+      );
+    }
+  };
+
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
+      <div className="app-container">
+        <Header className="header" />
+        <div className="task-container">
+          <TaskList
+            tasks={this.state.tasks}
+            updateTask={this.updateTask}
+            addTaskToDo={this.addTaskToDo}
+            deleteTask={this.deleteTask}
+            resetLocalStorage={this.resetLocalStorage}
+            moveTaskOpen={this.moveTaskOpen}
+          />
+          <TaskListInProgress
+            tasksInProgress={this.state.tasksInProgress}
+            updateTask={this.updateTaskInProgress}
+            addTaskToDo={this.addTaskToDoInProgress}
+            deleteTask={this.deleteTaskInProgress}
+            resetLocalStorage={this.resetLocalStorageInProgress}
+            moveTaskInProgress={this.moveTaskInProgress}
+            moveTaskInProgressBacktoOpen={this.moveTaskInProgressBacktoOpen}
+          />
+          <TaskListInReview
+            tasksInReview={this.state.tasksInReview}
+            updateTask={this.updateTaskInReview}
+            addTaskToDo={this.addTaskToDoInReview}
+            deleteTask={this.deleteTaskInReview}
+            moveTaskInReview={this.moveTaskInReview}
+            resetLocalStorage={this.resetLocalStorageInReview}
+            moveTaskInReviewBackToInProgress={
+              this.moveTaskInReviewBackToInProgress
+            }
+          />
+          <TaskListCompleted
+            tasksCompleted={this.state.tasksCompleted}
+            deleteTask={this.deleteTaskCompleted}
+            reflectionToDo={this.reflectionToDo}
+            resetLocalStorage={this.resetLocalStorageCompleted}
+          />
+        </div>
       </div>
     );
   }
 }
 
+// MAKE TASK INPUT FIELD BIGGER!
+// MAKE THE BUTTON TO
 export default App;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 00000000..87ead82c
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function Header() {
+  return (
+    <div className="header">
+      <nav>
+        <a
+          className="header-link"
+          href="https://github.com/ianthehamster/project1-bootcamp"
+        >
+          UNSC Task Management Platform
+        </a>
+      </nav>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/components/Task.js b/src/components/Task.js
new file mode 100644
index 00000000..af76d95f
--- /dev/null
+++ b/src/components/Task.js
@@ -0,0 +1,140 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faTrash,
+  faEdit,
+  faArrowRight,
+  faArrowLeft,
+} from "@fortawesome/free-solid-svg-icons";
+
+import TaskUpdate from "./TaskUpdate";
+
+class Task extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isEditing: false,
+      title: this.props.title, // Initialize title in the local state
+      task: this.props.task, // Initialize task in the local state
+      timeTaken: this.props.timeTaken,
+      keyTakeaways: this.props.keyTakeaways,
+    };
+  }
+
+  handleUpdateClick = () => {
+    this.setState({ isEditing: true });
+  };
+
+  handleUpdateComplete = () => {
+    this.setState({ isEditing: false });
+  };
+
+  // ... (delete logic, if needed)
+  handleDeleteClick = () => {
+    this.props.deleteTask(this.props.id); // Calls the deleteTask function defined in TaskList.js
+  };
+
+  handleMoveTaskOpenClick = () => {
+    this.props.moveTaskOpen(this.props.id);
+  };
+
+  handleMoveTaskInProgressClick = () => {
+    this.props.moveTaskInProgress(this.props.id);
+  };
+
+  handleMoveTaskInProgressBackToOpen = () => {
+    this.props.moveTaskInProgressBacktoOpen(this.props.id);
+  };
+
+  handleMoveTaskInReviewBackToInProgress = () => {
+    this.props.moveTaskInReviewBackToInProgress(this.props.id);
+  };
+
+  handleMoveTaskInReviewClick = () => {
+    this.props.moveTaskInReview(this.props.id);
+  };
+
+  handleReflectedTaskClick = () => {
+    this.props.reflectionToDo(this.props.id);
+  };
+
+  render() {
+    // showButton prop is received as a parameter in the 'render' method and is then destructured from this.props
+
+    const { showButton } = this.props;
+    const { showButtonInProgress } = this.props;
+    const { showButtonCompleted } = this.props;
+    const { showButtonInReview } = this.props;
+
+    if (this.state.isEditing && !showButtonCompleted) {
+      return (
+        <TaskUpdate
+          id={this.props.id}
+          title={this.state.title} // Pass the local state title
+          task={this.state.task} // Pass the local state task
+          updateTask={this.props.updateTask}
+          onUpdateComplete={this.handleUpdateComplete} // Pass the callback function
+        />
+      );
+    }
+
+    return (
+      <div className="content">
+        <h1>
+          <strong>Title: {this.props.title}</strong>
+        </h1>
+        <h2>Task: {this.props.task}</h2>
+        {showButtonCompleted && <h3>Time Taken: {this.props.timeTaken}</h3>}
+        {showButtonCompleted && (
+          <h3>Key Takeaways: {this.props.keyTakeaways}</h3>
+        )}
+        {!showButtonCompleted && (
+          <button onClick={this.handleUpdateClick} className="buttons">
+            <FontAwesomeIcon icon={faEdit} />
+          </button>
+        )}
+        <button onClick={this.handleDeleteClick} className="buttons">
+          <FontAwesomeIcon icon={faTrash} />
+        </button>
+        {showButton && (
+          <button onClick={this.handleMoveTaskOpenClick} className="buttons">
+            Move tasks to In Progress
+            <FontAwesomeIcon icon={faArrowRight} />
+          </button>
+        )}
+        {showButtonInProgress && (
+          <button onClick={this.handleMoveTaskInProgressClick}>
+            Move tasks to In Review
+            <FontAwesomeIcon icon={faArrowRight} />
+          </button>
+        )}
+        {showButtonInProgress && (
+          <button onClick={this.handleMoveTaskInProgressBackToOpen}>
+            Move tasks to Open
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </button>
+        )}
+        {showButtonInReview && (
+          <button onClick={this.handleMoveTaskInReviewClick}>
+            Move tasks to Completed
+            <FontAwesomeIcon icon={faArrowRight} />
+          </button>
+        )}
+        {showButtonInReview && (
+          <button onClick={this.handleMoveTaskInReviewBackToInProgress}>
+            Move tasks to In Progress
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </button>
+        )}
+        {/* {showButtonCompleted && (
+          <button onClick={this.handleReflectedTaskClick}>
+            <FontAwesomeIcon icon={faCheck} />
+          </button>
+        )} */}
+      </div>
+    );
+  }
+}
+
+export default Task;
diff --git a/src/components/TaskCompleter.js b/src/components/TaskCompleter.js
new file mode 100644
index 00000000..0c01d75c
--- /dev/null
+++ b/src/components/TaskCompleter.js
@@ -0,0 +1,72 @@
+import React from "react";
+
+class TaskCompleter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      timeTaken: "",
+      keyTakeaways: "",
+    };
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { tasksCompleted, id, reflectionToDo } = this.props;
+    const { timeTaken, keyTakeaways } = this.state;
+
+    const index = tasksCompleted.findIndex((task) => task.id === id); // loops through the array of objects and returns the index of the matching task
+
+    if (index !== -1) {
+      reflectionToDo(index, timeTaken, keyTakeaways);
+      tasksCompleted[index].timeTaken = timeTaken;
+      tasksCompleted[index].keyTakeaways = keyTakeaways;
+
+      // Log the updated task
+    }
+
+    // Resets the state of TaskComposer after
+    this.setState({
+      timeTaken: "",
+      keyTakeaways: "",
+    });
+  };
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  render() {
+    return (
+      <div className="task-composer content">
+        <form onSubmit={this.handleSubmit}>
+          <br />
+          <h4>Time taken to complete:</h4>
+          <input
+            name="timeTaken"
+            type="text"
+            value={this.state.timeTaken}
+            onChange={this.handleChange}
+          />
+          <br />
+          <h5>Key Takeaways:</h5>
+          <input
+            name="keyTakeaways"
+            type="text"
+            value={this.state.keyTakeaways}
+            onChange={this.handleChange}
+          />
+          <br />
+          <input name="submit" type="submit" value="submit" />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default TaskCompleter;
diff --git a/src/components/TaskComposer.js b/src/components/TaskComposer.js
new file mode 100644
index 00000000..708051fd
--- /dev/null
+++ b/src/components/TaskComposer.js
@@ -0,0 +1,112 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+
+class TaskComposer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      title: "",
+      task: "",
+      isFormVisible: false,
+    };
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Adds the entire state as a new task using addTask() method
+    const task = this.state;
+    this.props.addTask(task);
+
+    // Resets the state of TaskComposer after
+    this.setState({
+      title: "",
+      task: "",
+    });
+  };
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  // handleChange = (e) => {
+  //   const { name, value } = e.target;
+
+  //   if (name === "task") {
+  //     const textarea = document.getElementById("userInput");
+
+  //     textarea.addEventListener("keydown", function (event) {
+  //       if (event.key === "Enter") {
+  //         const userInput = textarea.value.trim()
+  //         const sentences = userInput.split('\n')
+  //       }
+  //     });
+  //     this.setState({
+  //       [name]: value,
+  //     });
+  //   }
+  // };
+
+  toggleFormVisibility = () => {
+    this.setState((prevState) => ({
+      isFormVisible: !prevState.isFormVisible,
+    }));
+  };
+
+  render() {
+    const { isFormVisible } = this.state;
+    return (
+      <div className="task-composer content">
+        <button id="showFormBtn" onClick={this.toggleFormVisibility}>
+          CLICK HERE TO ADD A TASK
+        </button>
+        <form
+          id="form"
+          onSubmit={this.handleSubmit}
+          style={{ display: isFormVisible ? "block" : "none" }}
+        >
+          <br />
+          <h4>Title</h4>
+          <input
+            name="title"
+            type="text"
+            value={this.state.title}
+            onChange={this.handleChange}
+          />
+          <br />
+          <h5>Task</h5>
+          {/* <input
+            name="task"
+            type="text"
+            value={this.state.task}
+            onChange={this.handleChange}
+            style={{ height: "500px" }}
+          /> */}
+          <textarea
+            name="task"
+            type="text"
+            rows="4"
+            cols="20"
+            value={this.state.task}
+            onChange={this.handleChange}
+            style={{ height: "400px" }}
+            id="userInput"
+          />
+          <br />
+          <button type="submit" className="button">
+            Add Task!
+          </button>
+          <FontAwesomeIcon icon={faCheck} className="icon" />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default TaskComposer;
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
new file mode 100644
index 00000000..ecf50d5c
--- /dev/null
+++ b/src/components/TaskList.js
@@ -0,0 +1,45 @@
+import React from "react";
+import Task from "./Task";
+import TaskComposer from "./TaskComposer";
+
+export default class TaskList extends React.Component {
+  render() {
+    const {
+      tasks,
+      updateTask,
+      addTaskToDo,
+      deleteTask,
+      resetLocalStorage,
+      moveTaskOpen,
+    } = this.props;
+
+    return (
+      <div className="task-list content">
+        <h1>
+          <strong>Open Tasks</strong>
+        </h1>
+        <h2 className="header-2">Number of tasks: {tasks.length}</h2>
+        <div>
+          <button onClick={resetLocalStorage}>Reset to Default</button>
+        </div>
+        <TaskComposer addTask={addTaskToDo} taskLength={tasks.length} />
+        {tasks && tasks.length > 0 ? (
+          <ul>
+            {tasks.map((task) => (
+              <Task
+                key={task.id}
+                {...task}
+                showButton={true}
+                updateTask={updateTask} // Pass the updateTask function
+                deleteTask={deleteTask} // Pass the deleteTask function
+                moveTaskOpen={moveTaskOpen}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p>No Tasks</p>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/TaskListCompleted.js b/src/components/TaskListCompleted.js
new file mode 100644
index 00000000..4eec248a
--- /dev/null
+++ b/src/components/TaskListCompleted.js
@@ -0,0 +1,46 @@
+import React from "react";
+import Task from "./Task";
+import TaskCompleter from "./TaskCompleter";
+
+export default class TaskListCompleted extends React.Component {
+  render() {
+    const { tasksCompleted, resetLocalStorage, reflectionToDo, deleteTask } =
+      this.props;
+
+    return (
+      <div className="task-completed content">
+        <h1>
+          <strong>Completed Tasks</strong>
+        </h1>
+        <h2 className="header-2">Number of tasks: {tasksCompleted.length}</h2>
+        <div>
+          <button onClick={resetLocalStorage} className="adjustments">
+            Clear Tasks
+          </button>
+        </div>
+        {tasksCompleted && tasksCompleted.length > 0 ? (
+          <ul>
+            {tasksCompleted.map((task) => (
+              <li key={task.id}>
+                <Task
+                  key={task.id}
+                  {...task}
+                  showButtonCompleted={true}
+                  deleteTask={deleteTask}
+                  reflectionToDo={reflectionToDo}
+                />
+                <TaskCompleter
+                  tasksCompleted={tasksCompleted}
+                  reflectionToDo={reflectionToDo}
+                  id={task.id}
+                />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>No Tasks</p>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/TaskListInProgress.js b/src/components/TaskListInProgress.js
new file mode 100644
index 00000000..e0cf9dae
--- /dev/null
+++ b/src/components/TaskListInProgress.js
@@ -0,0 +1,50 @@
+import React from "react";
+import Task from "./Task";
+import TaskComposer from "./TaskComposer";
+
+export default class TaskListInProgress extends React.Component {
+  render() {
+    const {
+      tasksInProgress,
+      updateTask,
+      addTaskToDo,
+      deleteTask,
+      resetLocalStorage,
+      moveTaskInProgress,
+      moveTaskInProgressBacktoOpen,
+    } = this.props;
+    return (
+      <div className="task-in-progress content">
+        <h1>
+          <strong>Tasks In Progress</strong>
+        </h1>
+        <h2 className="header-2">Number of tasks: {tasksInProgress.length}</h2>
+        <div>
+          <button onClick={resetLocalStorage}>Clear Tasks</button>
+        </div>
+        <TaskComposer
+          addTask={addTaskToDo}
+          taskLength={tasksInProgress.length}
+        />
+        {tasksInProgress && tasksInProgress.length > 0 ? (
+          <ul>
+            {tasksInProgress.map((task) => (
+              <Task
+                key={task.id}
+                {...task}
+                showButton={false}
+                showButtonInProgress={true}
+                updateTask={updateTask} // Pass the updateTask function
+                deleteTask={deleteTask} // Pass the deleteTask function
+                moveTaskInProgress={moveTaskInProgress}
+                moveTaskInProgressBacktoOpen={moveTaskInProgressBacktoOpen}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p>No Tasks</p>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/TaskListInReview.js b/src/components/TaskListInReview.js
new file mode 100644
index 00000000..20a45638
--- /dev/null
+++ b/src/components/TaskListInReview.js
@@ -0,0 +1,48 @@
+import React from "react";
+import Task from "./Task";
+import TaskComposer from "./TaskComposer";
+
+export default class TaskListInReview extends React.Component {
+  render() {
+    const {
+      tasksInReview,
+      updateTask,
+      addTaskToDo,
+      deleteTask,
+      resetLocalStorage,
+      moveTaskInReview,
+      moveTaskInReviewBackToInProgress,
+    } = this.props;
+    return (
+      <div className="task-in-review content">
+        <h1>
+          <strong>Tasks In Review</strong>
+        </h1>
+        <h2 className="header-2">Number of tasks: {tasksInReview.length}</h2>
+        <div>
+          <button onClick={resetLocalStorage}>Clear Tasks</button>
+        </div>
+        <TaskComposer addTask={addTaskToDo} taskLength={tasksInReview.length} />
+        {tasksInReview && tasksInReview.length > 0 ? (
+          <ul>
+            {tasksInReview.map((task) => (
+              <Task
+                key={task.id}
+                {...task}
+                showButtonInReview={true}
+                updateTask={updateTask} // Pass the updateTask function
+                deleteTask={deleteTask} // Pass the deleteTask function
+                moveTaskInReview={moveTaskInReview} // Pass the moveTaskInReview function
+                moveTaskInReviewBackToInProgress={
+                  moveTaskInReviewBackToInProgress
+                }
+              />
+            ))}
+          </ul>
+        ) : (
+          <p>No Tasks</p>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/TaskUpdate.js b/src/components/TaskUpdate.js
new file mode 100644
index 00000000..5d99e156
--- /dev/null
+++ b/src/components/TaskUpdate.js
@@ -0,0 +1,66 @@
+import React from "react";
+
+class TaskUpdate extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      title: this.props.title,
+      task: this.props.task,
+    };
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const updatedTask = {
+      title: this.state.title,
+      task: this.state.task,
+    };
+
+    this.props.updateTask(this.props.id, updatedTask);
+
+    // Close the update form by calling the callback function by setting isEditing in Task.js to false
+    this.props.onUpdateComplete();
+
+    // Optionally, you can also reset the local state or perform any other necessary actions here
+  };
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <h3>Update Task</h3>
+          <h4>Title</h4>
+          <input
+            name="title"
+            type="text"
+            value={this.state.title}
+            onChange={this.handleChange}
+          />
+          <br />
+          <h5>Task</h5>
+          <textarea
+            name="task"
+            type="text"
+            value={this.state.task}
+            onChange={this.handleChange}
+            style={{ height: "400px" }}
+          />
+          <br />
+          <input name="submit" type="submit" value="Update" />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default TaskUpdate;
diff --git a/src/index.css b/src/index.css
index 4a1df4db..6b274882 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,18 @@
+html,
+body {
+  height: 100%;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: "Comic Sans MS", cursive;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: rgb(18, 2, 2);
+  height: 100vh;
+  background: url(https://i.pinimg.com/736x/8e/d5/e3/8ed5e319555b7762ce632e3fe70115da.jpg)
+    center/cover no-repeat;
+  background-attachment: fixed;
 }
 
 code {
diff --git a/src/index.js b/src/index.js
index 31508db1..9ec8664b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+
 import "./index.css";
 import App from "./App";