diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b92f6be7..097b0650 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
         "@2toad/profanity": "^2.2.0",
@@ -27,6 +28,7 @@
         "axios": "^1.4.0",
         "bootstrap": "^5.3.0",
         "dayjs": "^1.11.9",
+        "framer-motion": "^6.5.1",
         "install": "^0.13.0",
         "npm": "^9.8.1",
         "react": "^18.2.0",
@@ -349,9 +351,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
+      "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -438,9 +440,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -791,11 +793,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-flow": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz",
-      "integrity": "sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.24.1.tgz",
+      "integrity": "sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1223,12 +1225,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-flow-strip-types": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz",
-      "integrity": "sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.24.1.tgz",
+      "integrity": "sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/plugin-syntax-flow": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/plugin-syntax-flow": "^7.24.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2457,9 +2459,9 @@
       "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==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -3090,6 +3092,64 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "dependencies": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "dependencies": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.5",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.5.tgz",
@@ -4238,6 +4298,14 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
       "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ=="
     },
+    "node_modules/@types/node-forge": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
+      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -6771,9 +6839,9 @@
       "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=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -8123,9 +8191,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -8527,6 +8595,49 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -8908,6 +9019,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "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",
@@ -11404,9 +11520,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -14931,10 +15047,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -14950,9 +15077,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -17235,9 +17362,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -17265,10 +17392,11 @@
       "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
     },
     "node_modules/selfsigned": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
-      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
+      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
       "dependencies": {
+        "@types/node-forge": "^1.3.0",
         "node-forge": "^1"
       },
       "engines": {
@@ -17503,9 +17631,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17916,6 +18044,15 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -18475,9 +18612,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
-      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -20018,9 +20155,9 @@
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
+      "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.22.17",
@@ -20077,9 +20214,9 @@
       "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ=="
     },
     "@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA=="
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw=="
     },
     "@babel/helper-wrap-function": {
       "version": "7.22.17",
@@ -20312,11 +20449,11 @@
       }
     },
     "@babel/plugin-syntax-flow": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz",
-      "integrity": "sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.24.1.tgz",
+      "integrity": "sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0"
       }
     },
     "@babel/plugin-syntax-import-assertions": {
@@ -20582,12 +20719,12 @@
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz",
-      "integrity": "sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.24.1.tgz",
+      "integrity": "sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/plugin-syntax-flow": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/plugin-syntax-flow": "^7.24.1"
       }
     },
     "@babel/plugin-transform-for-of": {
@@ -21373,9 +21510,9 @@
       "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==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "requires": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -21859,6 +21996,64 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "requires": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "requires": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "requires": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "requires": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "requires": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "@mui/base": {
       "version": "5.0.0-beta.5",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.5.tgz",
@@ -22593,6 +22788,14 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
       "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ=="
     },
+    "@types/node-forge": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
+      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -24456,9 +24659,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -25478,9 +25681,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -25771,6 +25974,45 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
       "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg=="
     },
+    "framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "0.8.8",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+          "optional": true,
+          "requires": {
+            "@emotion/memoize": "0.7.4"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+          "optional": true
+        }
+      }
+    },
+    "framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -26033,6 +26275,11 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "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",
@@ -27871,9 +28118,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -30164,14 +30411,25 @@
         }
       }
     },
+    "popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "requires": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       }
     },
     "postcss-attribute-case-insensitive": {
@@ -31631,9 +31889,9 @@
       }
     },
     "scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -31654,10 +31912,11 @@
       "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
     },
     "selfsigned": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
-      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
+      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
       "requires": {
+        "@types/node-forge": "^1.3.0",
         "node-forge": "^1"
       }
     },
@@ -31856,9 +32115,9 @@
       "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
     "source-map-loader": {
       "version": "3.0.2",
@@ -32163,6 +32422,15 @@
       "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
       "requires": {}
     },
+    "style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -32586,9 +32854,9 @@
       }
     },
     "tslib": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
-      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tsutils": {
       "version": "3.21.0",
diff --git a/frontend/package.json b/frontend/package.json
index 209c4198..86d8ab12 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
     "dayjs": "^1.11.9",
+    "framer-motion": "^6.5.1",
     "install": "^0.13.0",
     "npm": "^9.8.1",
     "react": "^18.2.0",
diff --git a/frontend/src/components/About/About.tsx b/frontend/src/components/About/About.tsx
index 4df78b1c..b03d6db6 100644
--- a/frontend/src/components/About/About.tsx
+++ b/frontend/src/components/About/About.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import Button from '../Button/Button';
+import React, { useEffect, useRef, useState } from 'react';
 import { Container, Box, Grid, createTheme, useMediaQuery } from '@mui/material';
 import bgTop from '../../images/shape2.svg';
 import bgBtm from '../../images/shape2.svg';
@@ -9,16 +7,46 @@ import books from '../../images/aboutbooks.png';
 import lightBulb from '../../images/aboutlightbulb.png';
 import MeetTheTeam from './MeetTheTeam';
 import Communities from './OurCommunities';
+import HowtoJoin from './HowToJoin';
 import about1 from '../../images/aboutpage/about_1.jpg';
-import about3 from '../../images/aboutpage/about_3.jpg';
 import { ImageWithBoxShadow } from '../Opportunities/Opportunities';
+import Typewriter from './TypeWriter';
+import { motion } from "framer-motion"
 
 const About = () => {
-  const navigate = useNavigate();
   const styles = aboutStyles();
   const theme = createTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
 
+  const [isInView, setIsInView] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const currentRef = ref.current; // Copy ref to a local variable
+  
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect(); // Disconnect after first trigger
+        }
+      },
+      {
+        threshold: 0.1, // Adjust this value as needed
+      }
+    );
+  
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+  
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef); // Use the local variable for cleanup
+      }
+    };
+  }, [ref]);
+
   return (
     <Box sx={{ position: 'relative', overflow: 'hidden' }}>
       <Box sx={styles.root}>
@@ -47,13 +75,13 @@ const About = () => {
                       fontWeight: '700',
                     }}
                   >
-                    WHAT IS CSE Society?
+                    <Typewriter text="WHHAT IS CSES?" speed={200} />
                   </h1>
 
                   <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
                     CSE Society was the first CSE organization at UCSD starting over twenty years
                     ago, and we have innovated over the years to stay relevant in serving the CSE
-                    community. We are open to all majors and indivduals who are interested in
+                    community. We are open to all majors and individuals who are interested in
                     computing!
                   </p>
                 </Box>
@@ -79,9 +107,22 @@ const About = () => {
               lg={3}
               sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
             >
+              <motion.div
+      ref={ref}
+      initial={{ x: -100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.2 }}
+    >
               <img src={books} alt="img" style={{ width: '80%' }} />
+              </motion.div>
             </Grid>
             <Grid item sm={5} lg={5}>
+            <motion.div
+      ref={ref}
+      initial={{ x: 100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.2 }}
+    >
               <Box
                 sx={{
                   color: 'white',
@@ -89,10 +130,13 @@ const About = () => {
                 }}
               >
                 <h1>Our History</h1>
+            
                 <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
                   CSES was the first CSE organization at UCSD starting over twenty years ago, and we have innovated over the years to stay relevant in serving the CSE community. We are open to all majors and indivduals who are interested in computing!
                 </p>
+                
               </Box>
+            </motion.div>
             </Grid>
           </Grid>
           <Grid
@@ -104,6 +148,12 @@ const About = () => {
             direction={isSmallScreen ? 'column-reverse' : 'row'}
           >
             <Grid item sm={5}>
+            <motion.div
+      ref={ref}
+      initial={{ x: -100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
+    >
               <Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
                 <h1>Our Future</h1>
               </Box>
@@ -116,55 +166,21 @@ const About = () => {
               >
                 Our mission statement is to help our members get professional opportunities while fostering a network of individuals. We do this through quarterly career fairs, mentorship programs for career development, and project opportunities to gain experience.
               </p>
+            </motion.div>
             </Grid>
+
             <Grid item sm={4} md={3} lg={3} maxHeight={'100%'}>
+            <motion.div
+      ref={ref}
+      initial={{ x: 100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
+    >
               <img src={lightBulb} alt="img" />
+              </motion.div>
             </Grid>
           </Grid>
-
-          <Container maxWidth="xl" sx={styles.body}>
-            <Box sx={{ maxWidth: '90%', margin: '0 auto' }}>
-              <Grid
-                container
-                justifyContent="center"
-                mt={12}
-                mb={12}
-                direction={isSmallScreen ? 'column-reverse' : 'row'}
-              >
-                <Grid item sm={7} pl={{ lg: '8%' }}>
-                  <Box sx={{ color: 'white', textAlign: { md: 'left', sm: 'left', xs: 'center' } }}>
-                    <h1>How do I join?</h1>
-                  </Box>
-                  <Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
-                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
-                      To become a general member, simply sign up with your UCSD email!
-                    </p>
-                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
-                      Do you want to be a part of the internal team? Become a member and follow us
-                      on our socials to be notified of when board applications open on a rolling
-                      basis.
-                    </p>
-                    <Box
-                      sx={{
-                        marginLeft: '-2%',
-                        display: 'flex',
-                        justifyContent: { xs: 'center', sm: 'left' },
-                      }}
-                    >
-                      <Button
-                        size="large"
-                        text="Become a Member ->"
-                        onClick={() => navigate('/membership')}
-                      />
-                    </Box>
-                  </Box>
-                </Grid>
-                <Grid item sm={5} pl={{ lg: '2%' }} pr={{ lg: '8%' }}>
-                  <ImageWithBoxShadow src={about3} alt="img" />
-                </Grid>
-              </Grid>
-            </Box>
-          </Container>
+          <HowtoJoin />
           <Communities />
           <MeetTheTeam />
         </Container>
diff --git a/frontend/src/components/About/HowToJoin.tsx b/frontend/src/components/About/HowToJoin.tsx
new file mode 100644
index 00000000..d59d1766
--- /dev/null
+++ b/frontend/src/components/About/HowToJoin.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from '../Button/Button';
+import { Container, Box, Grid, createTheme, useMediaQuery } from '@mui/material';
+import { aboutStyles } from './styles';
+import about3 from '../../images/aboutpage/about_3.jpg';
+import { ImageWithBoxShadow } from '../Opportunities/Opportunities';
+import { motion } from "framer-motion"
+
+const HowtoJoin = () => {
+    const navigate = useNavigate();
+    const styles = aboutStyles();
+    const theme = createTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
+    const [isInView1, setIsInView1] = useState(false);
+    const ref1 = useRef(null);
+
+    useEffect(() => {
+      const currentRef = ref1.current; // Copy ref1 to a local variable
+    
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView1(true);
+            observer.disconnect(); // Disconnect after first trigger
+          }
+        },
+        {
+          threshold: 0.1, // Adjust this value as needed
+        }
+      );
+    
+      if (currentRef) {
+        observer.observe(currentRef);
+      }
+    
+      return () => {
+        if (currentRef) {
+          observer.unobserve(currentRef); // Use the local variable for cleanup
+        }
+      };
+    }, [ref1]);
+
+    return (
+        <motion.div
+      ref={ref1}
+      initial={{ x: 100, opacity: 0 }}
+      animate={isInView1 ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
+    >
+        <Container maxWidth="xl" sx={styles.body}>
+            <Box sx={{ maxWidth: '90%', margin: '0 auto' }}>
+              <Grid
+                container
+                justifyContent="center"
+                mt={12}
+                mb={12}
+                direction={isSmallScreen ? 'column-reverse' : 'row'}
+              >
+                <Grid item sm={7} pl={{ lg: '8%' }}>
+                  <Box sx={{ color: 'white', textAlign: { md: 'left', sm: 'left', xs: 'center' } }}>
+                    <h1>How do I join?</h1>
+                  </Box>
+                  <Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
+                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
+                      To become a general member, simply sign up with your UCSD email!
+                    </p>
+                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
+                      Do you want to be a part of the internal team? Become a member and follow us
+                      on our socials to be notified of when board applications open on a rolling
+                      basis.
+                    </p>
+                    <Box
+                      sx={{
+                        marginLeft: '-2%',
+                        display: 'flex',
+                        justifyContent: { xs: 'center', sm: 'left' },
+                      }}
+                    >
+                      <Button
+                        size="large"
+                        text="Become a Member ->"
+                        onClick={() => navigate('/membership')}
+                      />
+                    </Box>
+                  </Box>
+                </Grid>
+                <Grid item sm={5} pl={{ lg: '2%' }} pr={{ lg: '8%' }}>
+                  <ImageWithBoxShadow src={about3} alt="img" />
+                </Grid>
+              </Grid>
+            </Box>
+          </Container>
+          </motion.div>
+    );
+};
+
+export default HowtoJoin;
\ No newline at end of file
diff --git a/frontend/src/components/About/MeetTheTeam.tsx b/frontend/src/components/About/MeetTheTeam.tsx
index 5e321f1b..e0dd5f5c 100644
--- a/frontend/src/components/About/MeetTheTeam.tsx
+++ b/frontend/src/components/About/MeetTheTeam.tsx
@@ -5,82 +5,67 @@ import next from '../../images/next.png';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { buttonStyles } from '../Button/styles';
 import { aboutStyles } from './styles';
-import Nabil from '../../images/meettheteamImages/nabil.jpg';
-import Samvrit from '../../images/meettheteamImages/samvrit.jpeg';
-import Anuj from '../../images/meettheteamImages/anuj.jpg';
 import Sithu from '../../images/meettheteamImages/sithu.jpg';
 import Rahul from '../../images/meettheteamImages/rahul.png';
-import Ishika from '../../images/meettheteamImages/ishika.jpg';
 import Yashil from '../../images/meettheteamImages/yashil vora.jpg';
-import Cassandra from '../../images/meettheteamImages/cassandra.png';
-import Rachel from '../../images/meettheteamImages/rachel paner.jpeg';
-import Christopher from '../../images/meettheteamImages/christopher.png';
-import Ketan from '../../images/meettheteamImages/ketan.jpg';
-import Gloria from '../../images/meettheteamImages/gloria.jpg';
 import Mishka from '../../images/meettheteamImages/mishka.jpeg';
-import Delvin from '../../images/meettheteamImages/delvin.jpg';
-import Joyce from '../../images/meettheteamImages/joyce.jpg';
-import Will from '../../images/meettheteamImages/will.jpg';
 import Brian from '../../images/meettheteamImages/brian.jpg';
-import Shruti from '../../images/meettheteamImages/shruti.jpg';
-import Manan from '../../images/meettheteamImages/manan.jpg';
-import Jheel from '../../images/meettheteamImages/jheel.jpg';
-import Sonia from '../../images/meettheteamImages/sonia.jpg';
 import Jake from '../../images/meettheteamImages/jake villaseno.jpeg';
 import Jose from '../../images/meettheteamImages/josue martinez.jpeg';
 import Angelina from '../../images/meettheteamImages/angelina yee.jpg';
-import Shambhavi from '../../images/meettheteamImages/shambhavi mittal.jpg';
 import Ganesh from '../../images/meettheteamImages/ganesh kumarappan.jpg';
 import Sardor from '../../images/meettheteamImages/sardor sobirov.jpg';
 import Shreya from '../../images/meettheteamImages/shreya gupta.jpg';
 import ShreyaN from '../../images/meettheteamImages/Shreya Nagunuri.png';
-import Ryan from '../../images/meettheteamImages/ryan rickey.jpg';
-import Viren from '../../images/meettheteamImages/viren nathan.jpg';
 import Kevin from '../../images/meettheteamImages/kevin kim.jpeg';
 import KevinW from '../../images/meettheteamImages/KevinWu.png';
 import Sofia from '../../images/meettheteamImages/sofia nguyen.png';
 import Maanasa from '../../images/meettheteamImages/maanasa prasad.png';
-import Ali from '../../images/meettheteamImages/ali alani.png';
 import Michael from '../../images/meettheteamImages/michael he.png';
-import Cole from '../../images/meettheteamImages/cole.png';
-import Victor from '../../images/meettheteamImages/VictorKim.jpeg';
+import Pranav_Soma from '../../images/meettheteamImages/Pranav_Soma.jpeg';
+import Nikitha_Maderamitla from '../../images/meettheteamImages/Nikitha_Maderamitla.jpg';
+import Aryen_Singhal from '../../images/meettheteamImages/Aryen_Singhal.jpg';
+import Hillary_Chang from '../../images/meettheteamImages/Hillary_Chang.webp';
+import Aditya_Kakarla from '../../images/meettheteamImages/Aditya_Kakarla.jpg';
+import Chase_Peterson from '../../images/meettheteamImages/Chase_Peterson.jpg';
+import Tia_Irani from '../../images/meettheteamImages/Tia_Irani.jpeg';
+import Steven_Shi from '../../images/meettheteamImages/Steven_Shi.jpg';
+import Vinod_Vairavaraj from '../../images/meettheteamImages/Vinod_Vairavaraj.png';
+import Shree_Venkatesh from '../../images/meettheteamImages/Shree_Venkatesh.jpg';
+import Bhavik_Chandna from '../../images/meettheteamImages/Bhavik_Chandna.jpg';
+import Kevin_Sun from '../../images/meettheteamImages/Kevin_Sun.jpg';
+import Aryamun_Das from '../../images/meettheteamImages/Ryan_Das.jpeg';
+import Aditi_Bansal from '../../images/meettheteamImages/Aditi_Bansal.jpg';
+import Lucas_Hlaing from '../../images/meettheteamImages/Lucas_Hiaing.jpeg';
+import Varun_Parekh from '../../images/meettheteamImages/Varun_Parekh.jpg';
 
 const categories = [
   {
     id: 1,
     name: 'CSES Board',
     members: [
-      { name: 'Nabil Khoury', title: 'Co-President', photo: Nabil },
-      { name: 'Samvrit Srinath', title: 'Co-President', photo: Samvrit },
       { name: 'Rahul Mistry', title: 'VP Internal', photo: Rahul },
       { name: 'Michael He', title: 'VP External', photo: Michael },
       { name: 'Sithu Soe', title: 'VP Operations', photo: Sithu },
-      { name: 'Anuj Jain', title: 'VP Finance', photo: Anuj },
-      { name: 'Maanasa Prasad', title: 'Event Director', photo: Maanasa },
-      { name: 'Ishika Agrawal', title: 'Events Director', photo: Ishika },
-      { name: 'Christopher Tams', title: 'Marketing Director', photo: Christopher },
-      { name: 'Shambhavi Mittal', title: 'PR Director', photo: Shambhavi },
-      { name: 'Cassandra Ponce Maldonado', title: 'Events Chair', photo: Cassandra },
+      { name: 'Maanasa Prasad', title: 'VP Events', photo: Maanasa },
+      { name: 'Lucas Hlaing', title: 'Finance Director', photo: Lucas_Hlaing },
+      { name: 'Varun Parekh', title: 'Technical Workshop Director', photo: Varun_Parekh },
       { name: 'Angelina Yee', title: 'Marketing Chair', photo: Angelina },
-      { name: 'Rachel Paner', title: 'Design Chair', photo: Rachel },
-      { name: 'Jose Martinez', title: 'Outreach Chair - Alumni', photo: Jose },
-      { name: 'Ketan Jain', title: 'Outreach Chair - Student Organizations', photo: Ketan },
-      { name: 'Cole Carter', title: 'Outreach Chair - Sponsors/Corporates', photo: Cole },
+      { name: 'Jose Martinez', title: 'External Director - Alumni and Professor', photo: Jose },
+      { name: 'Hillary Chang', title: 'Corporate Connections Director', photo: Hillary_Chang },
     ],
   },
   {
     id: 2,
     name: 'CSES Dev',
     members: [
-      { name: 'Will Hsu', title: 'Engineering Manager', photo: Will },
-      { name: 'Delvin Bajoua', title: 'Product Manager', photo: Delvin },
-      { name: 'Shreya Gupta', title: 'Development Team Chair', photo: Shreya },
+      { name: 'Shreya Gupta', title: 'President', photo: Shreya },
+      { name: 'Steven Shi', title: 'VP Products', photo: Steven_Shi },
+      { name: 'Jake Villasenor', title: 'VP Design', photo: Jake },
       { name: 'Sardor Sobirov', title: 'Frontend Developer', photo: Sardor },
       { name: 'Sithu Soe', title: 'Frontend Developer', photo: Sithu },
-      { name: 'Joyce Lu', title: 'Frontend Developer', photo: Joyce },
       { name: 'Kevin Wu', title: 'Frontend Developer', photo: KevinW },
       { name: 'Shreya Nagunuri', title: 'Backend Developer', photo: ShreyaN },
-      { name: 'Victor Kim', title: 'Backend Developer', photo: Victor },
       { name: 'Brian Liu', title: 'Backend Developer', photo: Brian },
       { name: 'Ganesh Kumarappan', title: 'Backend Developer', photo: Ganesh },
     ],
@@ -91,17 +76,26 @@ const categories = [
     members: [
       { name: 'Yashil Vora', title: 'President', photo: Yashil },
       { name: 'Mishka Jethwani', title: 'VP Operations', photo: Mishka },
+      { name: 'Aryen Singhal', title: 'Engineering Manager', photo: Aryen_Singhal },
+      { name: 'Chase Peterson', title: 'Engineering Manager', photo: Chase_Peterson },
+      { name: 'Shree Venkatesh', title: 'Engineering Manager', photo: Shree_Venkatesh },
+      { name: 'Kevin Sun', title: 'Engineering Manager', photo: Kevin_Sun },
       { name: 'Kevin Kim', title: 'Lead Software Engineer', photo: Kevin },
       { name: 'Sofia Nguyen', title: 'UI/UX Designer', photo: Sofia },
-      { name: 'Song Hee Seo (Gloria)', title: 'Marketing Chair', photo: Gloria },
+      { name: 'Tia Irani', title: 'UI/UX Designer', photo: Tia_Irani },
+      { name: 'Aditi Bansal', title: 'UI/UX Designer', photo: Aditi_Bansal },
+      { name: 'Vinod Vairavaraj', title: 'UI/UX Designer', photo: Vinod_Vairavaraj },
     ],
   },
   {
-    id: 5,
-    name: 'CSES Innovate',
+    id: 6,
+    name: 'CSES E/Acc',
     members: [
-      { name: 'Viren Nathan', title: 'President', photo: Viren },
-      { name: 'Ali Alani', title: 'CTO', photo: Ali },
+      { name: 'Pranav Soma', title: 'President', photo: Pranav_Soma },
+      { name: 'Aryamun Das', title: 'Founder', photo: Aryamun_Das },
+      { name: 'Nikitha Maderamitla', title: 'Internal Director', photo: Nikitha_Maderamitla },
+      { name: 'Aditya Kakarla', title: 'External Director', photo: Aditya_Kakarla },
+      { name: 'Bhavik Chandna', title: 'Project Lead', photo: Bhavik_Chandna },
     ],
   },
 ];
diff --git a/frontend/src/components/About/OurCommunities.tsx b/frontend/src/components/About/OurCommunities.tsx
index 3686c56b..cacf0635 100644
--- a/frontend/src/components/About/OurCommunities.tsx
+++ b/frontend/src/components/About/OurCommunities.tsx
@@ -1,18 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
 import { Container, Box, Link, Grid, useMediaQuery } from '@mui/material';
 import { aboutStyles } from './styles';
 import innovate from '../../images/ourCommunitiesImages/cses_innovate.png';
 import opensource from '../../images/ourCommunitiesImages/cses_opensource.png';
-import webdev from '../../images/ourCommunitiesImages/cses_webdev.png';
 import dev from '../../images/ourCommunitiesImages/cses_dev.png';
+import { motion } from "framer-motion";
+import { styled } from '@mui/system';
 
 
+const MotionGrid = styled(motion.div)`
+  display: flex;
+  width: 100%; // Inherit full width of the parent
+  height: auto; // Inherit height of the content
+`;
+
 const Communities = () => {
   const styles = aboutStyles();
   const verySmallScreen = useMediaQuery('(max-width:350px')
 
+  const [isInView, setIsInView] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const currentRef = ref.current; // Copy ref to a local variable
+  
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect(); // Disconnect after first trigger
+        }
+      },
+      {
+        threshold: 0.1, // Adjust this value as needed
+      }
+    );
+  
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+  
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef); // Use the local variable for cleanup
+      }
+    };
+  }, [ref]);
+
   return (
     <Container disableGutters sx={{ width: '100%', backgroundColor: 'rgba(0,0,0,0.8)', marginTop: { xs: '15%', sm: '10%', md: '5%' }}}>
       <Grid item xs={12} sm={7} md={6} lg={5} sx={{padding: { xs: '6% 4%', sm: '4% 6%', md: '5% 5%' }}}>
+          <motion.div
+          ref={ref}
+          initial={{ opacity: 0 }} // Set initial opacity to 0 (invisible)
+          animate={isInView ? { opacity: 1 } : {}}
+          transition={{ duration: 1 }} // Define transition duration
+        >
         <Box
           sx={{
           ...styles.mainTitleTop,
@@ -29,8 +72,11 @@ const Communities = () => {
         <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)', marginBottom: '6%' }}>
           Websites are coming soon, but for now, check out our <Link href="https://linktr.ee/csesucsd" rel="noopener noreferrer" color="inherit" target="_blank">Linktree</Link> and come to our quarterly kick-off events for the latest updates on each community's recruitment and projects!
         </p>
-
+        </motion.div>
         <Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center'}}>
+        <Grid item xs={12} sm={6}>
+        <MotionGrid whileHover={{ scale: 1.1 }}
+      transition={{ type: 'spring', stiffness: 300 }}>
           <Grid item 
             sx={{
               ...styles.communityCard,
@@ -52,6 +98,13 @@ const Communities = () => {
               </p>
             </Box>
           </Grid>
+          </MotionGrid>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+          <MotionGrid
+      whileHover={{ scale: 1.1 }}
+      transition={{ type: 'spring', stiffness: 300 }}
+    >
           <Grid item 
             sx={{
               ...styles.communityCard,
@@ -73,27 +126,15 @@ const Communities = () => {
               </p>
             </Box>
           </Grid>
-          <Grid item 
-            sx={{
-              ...styles.communityCard,
-              width: verySmallScreen ? '250px' : { xs: '350px', sm: '500px', md: '500px' },
-              height: verySmallScreen ? '84px' : { xs: '100px', sm: '160px', md: '160px' },
-              margin: verySmallScreen ? '10% 0% 0% 0%' : { xs: '10% 2% 2% 2%', sm: '5% 3%', md: '3% 2%' }
-            }}>
-            <img
-              src={innovate}
-              alt="Innovate"
-              style={{ ...styles.communityCardImg, backgroundColor: 'black'}}
-            />
-            <Box sx={{ height: 'auto', padding: verySmallScreen ? '2%' : '4%', alignSelf: 'center' }}>
-              <Box sx={{ ...styles.subheadingTop }} >
-                CSES Innovate
-              </Box>
-              <p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' :'6px'}}>
-                Learn about tech entrepreneurship! Form teams and build your own start-ups from ideation to pitch.
-              </p>
-            </Box>
+          </MotionGrid>
           </Grid>
+          <Grid item xs={12} sm={6}>
+          <MotionGrid
+      whileHover={{ scale: 1.1 }}
+      transition={{ type: 'spring', stiffness: 300 }}
+    >
+         </MotionGrid>
+         </Grid>
         </Grid>
       </Grid>
     </Container>
diff --git a/frontend/src/components/About/TypeWriter.tsx b/frontend/src/components/About/TypeWriter.tsx
new file mode 100644
index 00000000..192fd3ae
--- /dev/null
+++ b/frontend/src/components/About/TypeWriter.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+interface TypewriterProps {
+  text: string;
+  speed?: number;
+}
+
+const Typewriter: React.FC<TypewriterProps> = ({ text, speed = 100 }) => {
+  const [displayedText, setDisplayedText] = useState('');
+
+  useEffect(() => {
+    let currentIndex = 0;
+    const interval = setInterval(() => {
+      setDisplayedText((prev) => prev + (text[currentIndex] || ''));
+      currentIndex++;
+      if (currentIndex >= text.length) {
+        clearInterval(interval);
+      }
+    }, speed);
+    return () => clearInterval(interval);
+  }, [text, speed]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      {displayedText}
+    </motion.div>
+  );
+};
+
+export default Typewriter;
+
diff --git a/frontend/src/components/Home/Home.tsx b/frontend/src/components/Home/Home.tsx
index 43302337..b040e3fb 100644
--- a/frontend/src/components/Home/Home.tsx
+++ b/frontend/src/components/Home/Home.tsx
@@ -11,6 +11,7 @@ import axios from 'axios';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import MobileEventBox from '../Event/MobileEvent';
 import CountUp from 'react-countup';
+import { motion } from "framer-motion"
 
 interface EventData {
   calendar_link: string;
@@ -88,13 +89,32 @@ const Home = () => {
                     marginLeft: { xs: '0%', sm: '3%', md: '12%' },
                   }}
                 >
-                  Innovate.
+                  <motion.div
+      initial={{ x: -100, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      transition={{ type: 'spring', stiffness: 50, delay: 0.2 }}
+    >
+      Innovate.
+    </motion.div>
+                  
                 </Box>
                 <Box sx={{ ...styles.title, marginLeft: { xs: '0%', sm: '3%', md: '12%' } }}>
-                  Build.
+                <motion.div
+      initial={{ x: -100, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      transition={{ type: 'spring', stiffness: 50, delay: 0.8 }}
+    >
+      Build.
+    </motion.div>
                 </Box>
                 <Box sx={{ ...styles.title, marginLeft: { xs: '0%', sm: '3%', md: '12%' } }}>
-                  Connect.
+                <motion.div
+      initial={{ x: -100, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      transition={{ type: 'spring', stiffness: 50, delay: 1.4 }}
+    >
+      Connect.
+    </motion.div>
                 </Box>
                 <Box sx={{ ...styles.button, marginLeft: { xs: '0%', sm: '2%', md: '12%' } }}>
                   <Button size="large" text="Learn About Us!" onClick={() => navigate('/about')} />
@@ -137,7 +157,9 @@ const Home = () => {
             <Grid item xs={11} sm={2.5} md={1.8} lg={1.8}>
               <Box sx={{ ...styles.statisticContainer }}>
                 <Box sx={styles.statisticWrapper}>
-                  <Box sx={styles.statisticTitle}><CountUp delay={0} end={totalUsers} duration={10} enableScrollSpy/>+</Box>
+                  <Box sx={styles.statisticTitle}>
+                    <CountUp end={totalUsers} duration={6} scrollSpyOnce={true} scrollSpyDelay={10000000} suffix="+"/>
+                    </Box>
                   <Box sx={styles.statisticSubtitle}>Members & counting.</Box>
                 </Box>
               </Box>
@@ -145,7 +167,9 @@ const Home = () => {
             <Grid item xs={11} sm={2.5} md={1.8} lg={1.8}>
               <Box sx={styles.statisticContainer}>
                 <Box sx={styles.statisticWrapper}>
-                  <Box sx={styles.statisticTitle}><CountUp delay={0} end={totalEvents} duration={6} enableScrollSpy/>+</Box>
+                  <Box sx={styles.statisticTitle}>
+                    <CountUp end={totalEvents} duration={6} scrollSpyDelay={10000000} scrollSpyOnce={true}  suffix="+"/>
+                    </Box>
                   <Box sx={styles.statisticSubtitle}>Events & counting.</Box>
                 </Box>
               </Box>
diff --git a/frontend/src/components/MemberProfile/MemberProfile.tsx b/frontend/src/components/MemberProfile/MemberProfile.tsx
index c3b002e3..534bc693 100644
--- a/frontend/src/components/MemberProfile/MemberProfile.tsx
+++ b/frontend/src/components/MemberProfile/MemberProfile.tsx
@@ -183,7 +183,7 @@ const MemberProfile = (userData: MemberProfileProps) => {
             Major:
             <span style={{ fontWeight: 'bold', marginLeft: '8px' }}>{userData.memberMajor}</span>
           </p>
-          {((typeof userData.memberMinor !== 'undefined')) &&
+          {((typeof userData.memberMinor !== 'undefined' && userData.memberMinor !== '')) &&
           <p
             style={{
               display: 'flex', // added
diff --git a/frontend/src/images/meettheteamImages/Aditi_Bansal.jpg b/frontend/src/images/meettheteamImages/Aditi_Bansal.jpg
new file mode 100644
index 00000000..b73bae83
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Aditi_Bansal.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Aditya_Kakarla.jpg b/frontend/src/images/meettheteamImages/Aditya_Kakarla.jpg
new file mode 100644
index 00000000..250bf487
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Aditya_Kakarla.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Aryen_Singhal.jpg b/frontend/src/images/meettheteamImages/Aryen_Singhal.jpg
new file mode 100644
index 00000000..6b7d447d
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Aryen_Singhal.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Bhavik_Chandna.jpg b/frontend/src/images/meettheteamImages/Bhavik_Chandna.jpg
new file mode 100644
index 00000000..25fb85d6
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Bhavik_Chandna.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Chase_Peterson.jpg b/frontend/src/images/meettheteamImages/Chase_Peterson.jpg
new file mode 100644
index 00000000..ef1946a0
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Chase_Peterson.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Hillary_Chang.webp b/frontend/src/images/meettheteamImages/Hillary_Chang.webp
new file mode 100644
index 00000000..ef5ea7fd
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Hillary_Chang.webp differ
diff --git a/frontend/src/images/meettheteamImages/Kevin_Sun.jpg b/frontend/src/images/meettheteamImages/Kevin_Sun.jpg
new file mode 100644
index 00000000..a621e116
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Kevin_Sun.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Lucas_Hiaing.jpeg b/frontend/src/images/meettheteamImages/Lucas_Hiaing.jpeg
new file mode 100644
index 00000000..2533330b
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Lucas_Hiaing.jpeg differ
diff --git a/frontend/src/images/meettheteamImages/Nikitha_Maderamitla.jpg b/frontend/src/images/meettheteamImages/Nikitha_Maderamitla.jpg
new file mode 100644
index 00000000..e2fe0a07
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Nikitha_Maderamitla.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Pranav_Soma.jpeg b/frontend/src/images/meettheteamImages/Pranav_Soma.jpeg
new file mode 100644
index 00000000..db9eacc3
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Pranav_Soma.jpeg differ
diff --git a/frontend/src/images/meettheteamImages/Ryan_Das.jpeg b/frontend/src/images/meettheteamImages/Ryan_Das.jpeg
new file mode 100644
index 00000000..f050e6d6
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Ryan_Das.jpeg differ
diff --git a/frontend/src/images/meettheteamImages/Shree_Venkatesh.jpg b/frontend/src/images/meettheteamImages/Shree_Venkatesh.jpg
new file mode 100644
index 00000000..5f6d2fe7
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Shree_Venkatesh.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Steven_Shi.jpg b/frontend/src/images/meettheteamImages/Steven_Shi.jpg
new file mode 100644
index 00000000..486eef0d
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Steven_Shi.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Tia_Irani.jpeg b/frontend/src/images/meettheteamImages/Tia_Irani.jpeg
new file mode 100644
index 00000000..d5f28e59
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Tia_Irani.jpeg differ
diff --git a/frontend/src/images/meettheteamImages/Varun_Parekh.jpg b/frontend/src/images/meettheteamImages/Varun_Parekh.jpg
new file mode 100644
index 00000000..001a1749
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Varun_Parekh.jpg differ
diff --git a/frontend/src/images/meettheteamImages/Vinod_Vairavaraj.png b/frontend/src/images/meettheteamImages/Vinod_Vairavaraj.png
new file mode 100644
index 00000000..24a6fb89
Binary files /dev/null and b/frontend/src/images/meettheteamImages/Vinod_Vairavaraj.png differ
diff --git a/package-lock.json b/package-lock.json
index b7ef7377..05244484 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@mui/x-date-pickers": "^6.12.0",
         "@react-spring/web": "^9.7.3",
         "dayjs": "^1.11.9",
+        "framer-motion": "^6.5.1",
         "material-ui-popup-state": "^5.0.9",
         "qrcode": "^1.5.3",
         "react-countup": "^6.5.0",
@@ -19,35 +20,36 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
-      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "optional": true,
       "peer": true,
       "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "optional": true,
       "peer": true,
       "dependencies": {
-        "@babel/types": "^7.22.15"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
       "optional": true,
       "peer": true,
       "engines": {
@@ -55,9 +57,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz",
-      "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
+      "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
       "optional": true,
       "peer": true,
       "engines": {
@@ -65,15 +67,16 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz",
-      "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
+      "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
       "optional": true,
       "peer": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -174,14 +177,14 @@
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/@babel/types": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.17.tgz",
-      "integrity": "sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
+      "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
       "optional": true,
       "peer": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.15",
+        "@babel/helper-string-parser": "^7.24.1",
+        "@babel/helper-validator-identifier": "^7.24.5",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -228,9 +231,9 @@
       "peer": true
     },
     "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==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -550,6 +553,64 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "dependencies": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "dependencies": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.5",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.5.tgz",
@@ -1146,9 +1207,9 @@
       }
     },
     "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=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/dayjs": {
       "version": "1.11.9",
@@ -1225,6 +1286,18 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/formidable": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz",
@@ -1234,6 +1307,49 @@
         "url": "https://ko-fi.com/tunnckoCore/commissions"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -1294,6 +1410,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "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",
@@ -1367,6 +1488,11 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1468,6 +1594,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -1557,6 +1694,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@@ -1622,6 +1784,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
@@ -1630,6 +1799,17 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/popper.js": {
       "version": "1.16.1-lts",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
@@ -1690,54 +1870,6 @@
         "wrap-ansi": "^6.2.0"
       }
     },
-    "node_modules/qrcode/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/qrcode/node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -1954,6 +2086,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -2021,6 +2158,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -2068,11 +2214,6 @@
         "node": ">= 0.12"
       }
     },
-    "node_modules/superagent/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
     "node_modules/superagent/node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -2087,11 +2228,6 @@
         "util-deprecate": "~1.0.1"
       }
     },
-    "node_modules/superagent/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
     "node_modules/superagent/node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -2128,6 +2264,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2151,49 +2292,51 @@
   },
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
-      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "optional": true,
       "peer": true,
       "requires": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "optional": true,
       "peer": true,
       "requires": {
-        "@babel/types": "^7.22.15"
+        "@babel/types": "^7.24.0"
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
       "optional": true,
       "peer": true
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz",
-      "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
+      "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
       "optional": true,
       "peer": true
     },
     "@babel/highlight": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz",
-      "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
+      "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
       "optional": true,
       "peer": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -2277,14 +2420,14 @@
       }
     },
     "@babel/types": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.17.tgz",
-      "integrity": "sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
+      "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
       "optional": true,
       "peer": true,
       "requires": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.15",
+        "@babel/helper-string-parser": "^7.24.1",
+        "@babel/helper-validator-identifier": "^7.24.5",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -2328,9 +2471,9 @@
       "peer": true
     },
     "@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==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "requires": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -2564,6 +2707,64 @@
         }
       }
     },
+    "@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "requires": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "requires": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "requires": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "requires": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "requires": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "@mui/base": {
       "version": "5.0.0-beta.5",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.5.tgz",
@@ -2907,9 +3108,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "dayjs": {
       "version": "1.11.9",
@@ -2974,11 +3175,59 @@
       "optional": true,
       "peer": true
     },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
     "formidable": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz",
       "integrity": "sha512-KcpbcpuLNOwrEjnbpMC0gS+X8ciDoZE1kkqzat4a8vrprf+s9pKNQ/QIwWfbfs4ltgmFl3MD177SNTkve3BwGQ=="
     },
+    "framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "0.8.8",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+          "optional": true,
+          "requires": {
+            "@emotion/memoize": "0.7.4"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+          "optional": true
+        }
+      }
+    },
+    "framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -3018,6 +3267,11 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "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",
@@ -3081,6 +3335,11 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
     },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3178,6 +3437,14 @@
       "optional": true,
       "peer": true
     },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -3240,6 +3507,22 @@
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
       "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@@ -3287,11 +3570,29 @@
       "optional": true,
       "peer": true
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "optional": true,
+      "peer": true
+    },
     "pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
       "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
     },
+    "popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "requires": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "popper.js": {
       "version": "1.16.1-lts",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
@@ -3345,39 +3646,6 @@
             "wrap-ansi": "^6.2.0"
           }
         },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -3542,6 +3810,11 @@
       "optional": true,
       "peer": true
     },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -3599,6 +3872,15 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -3639,11 +3921,6 @@
             "mime-types": "^2.1.12"
           }
         },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-        },
         "readable-stream": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -3658,11 +3935,6 @@
             "util-deprecate": "~1.0.1"
           }
         },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -3692,6 +3964,11 @@
       "optional": true,
       "peer": true
     },
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 94d0995a..4bb7b5df 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "@mui/x-date-pickers": "^6.12.0",
     "@react-spring/web": "^9.7.3",
     "dayjs": "^1.11.9",
+    "framer-motion": "^6.5.1",
     "material-ui-popup-state": "^5.0.9",
     "qrcode": "^1.5.3",
     "react-countup": "^6.5.0",