diff --git a/README.md b/README.md
index 50e5933d0..b1a059708 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,23 @@
 # Survey form with React
 
-Replace this readme with your own information about your project.
+This week we worked individually to create a survey using React. I chose to make mine a Madlibs game.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## The Brief
 
-## The problem
+This week we will be practicing React state and controlled forms by making a Typeform-like product. Your completed project should consist of at least 3 questions that need to be answered by users. When the user presses submit, they should see a summary of their answers.
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+**What you need to do**
+
+✓ Your survey should consist of at least 3 questions.
+
+✓ At least one question should use radio buttons.
+
+✓ At least one question should use a select dropdown.
+
+✓ There should be a submit button. When pressed your app should hide the input form and show a summary of the user's submissions.
+
+✓ Your site should follow accessibility guidelines
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://fanciful-capybara-de9924.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
index e34d9bb1c..f7ba98ef5 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -9,7 +9,13 @@
       "version": "1.0.0",
       "dependencies": {
         "@babel/eslint-parser": "^7.18.9",
-        "babel-eslint": "^10.1.0",
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "@lottiefiles/lottie-player": "^1.7.1",
+        "@lottiefiles/react-lottie-player": "^3.5.3",
         "eslint": "^8.21.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.26.0",
@@ -17,7 +23,9 @@
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "styled-components": "^5.3.10",
+        "swatchy.js": "^1.3.0"
       },
       "devDependencies": {
         "eslint-plugin-flowtype": "^8.0.3",
@@ -131,7 +139,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
       "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -2155,6 +2162,29 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -2199,6 +2229,75 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -3044,6 +3143,42 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz",
+      "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw=="
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz",
+      "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/@lottiefiles/lottie-player": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-1.7.1.tgz",
+      "integrity": "sha512-U2gokX7ZXHCD+DgRXfaFyxuVsc0SYfC2mXndnCVwGvpdApUGqvpZovihdB8p9fDKU2SBWLWBq38CuJTVz6k3Hg==",
+      "dependencies": {
+        "@types/pako": "^1.0.1",
+        "lit": "^2.1.2",
+        "lottie-web": "^5.10.0",
+        "pako": "^2.0.4",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "node_modules/@lottiefiles/react-lottie-player": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.3.tgz",
+      "integrity": "sha512-6pGbiTMjGnPddR1ur8M/TIDCiogZMc1aKIUbMEKXKAuNeYwZ2hvqwBJ+w5KRm88ccdcU88C2cGyLVsboFlSdVQ==",
+      "dependencies": {
+        "lottie-web": "^5.10.2"
+      },
+      "peerDependencies": {
+        "react": "16 - 18"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3685,6 +3820,11 @@
       "integrity": "sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==",
       "dev": true
     },
+    "node_modules/@types/pako": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.4.tgz",
+      "integrity": "sha512-Z+5bJSm28EXBSUJEgx29ioWeEEHUh6TiMkZHDhLwjc9wVFH+ressbkmX6waUZc5R3Gobn4Qu5llGxaoflZ+yhA=="
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -3767,8 +3907,7 @@
     "node_modules/@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
-      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
-      "dev": true
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
     "node_modules/@types/ws": {
       "version": "8.5.3",
@@ -4637,34 +4776,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "eslint": ">= 4.12.1"
-      }
-    },
-    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -4897,6 +5008,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz",
+      "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.0"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -5234,6 +5365,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5721,6 +5860,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
@@ -5929,6 +6076,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "dev": true
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -8545,6 +8702,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11685,6 +11850,33 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lit": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz",
+      "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.6.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
+      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz",
+      "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -11725,8 +11917,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -11768,6 +11959,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz",
+      "integrity": "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -12436,6 +12632,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -13970,8 +14171,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -14716,6 +14916,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -15236,6 +15441,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15645,6 +15855,35 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.10.tgz",
+      "integrity": "sha512-3kSzSBN0TiCnGJM04UwO1HklIQQSXW7rCARUk+VyMR7clz8XVlA3jijtf5ypqoDIdNMKx3la4VvaPFR855SFcg==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -15832,6 +16071,11 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swatchy.js": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swatchy.js/-/swatchy.js-1.3.0.tgz",
+      "integrity": "sha512-d6z/kudxZ7hzuql6ZGqFXnuwUV1Z+Tk4aoXtexdmSlVMK6RWe//rbviHciKYTdhv0kAH1wiUGAk+DOepPs1zFw=="
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -17490,7 +17734,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
       "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.18.6"
       }
@@ -18822,6 +19065,29 @@
       "dev": true,
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -18853,6 +19119,51 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -19499,6 +19810,39 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "@lit-labs/ssr-dom-shim": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz",
+      "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw=="
+    },
+    "@lit/reactive-element": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz",
+      "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "@lottiefiles/lottie-player": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-1.7.1.tgz",
+      "integrity": "sha512-U2gokX7ZXHCD+DgRXfaFyxuVsc0SYfC2mXndnCVwGvpdApUGqvpZovihdB8p9fDKU2SBWLWBq38CuJTVz6k3Hg==",
+      "requires": {
+        "@types/pako": "^1.0.1",
+        "lit": "^2.1.2",
+        "lottie-web": "^5.10.0",
+        "pako": "^2.0.4",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "@lottiefiles/react-lottie-player": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.3.tgz",
+      "integrity": "sha512-6pGbiTMjGnPddR1ur8M/TIDCiogZMc1aKIUbMEKXKAuNeYwZ2hvqwBJ+w5KRm88ccdcU88C2cGyLVsboFlSdVQ==",
+      "requires": {
+        "lottie-web": "^5.10.2"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -19968,6 +20312,11 @@
       "integrity": "sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==",
       "dev": true
     },
+    "@types/pako": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.4.tgz",
+      "integrity": "sha512-Z+5bJSm28EXBSUJEgx29ioWeEEHUh6TiMkZHDhLwjc9wVFH+ressbkmX6waUZc5R3Gobn4Qu5llGxaoflZ+yhA=="
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -20050,8 +20399,7 @@
     "@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
-      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
-      "dev": true
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
     "@types/ws": {
       "version": "8.5.3",
@@ -20687,26 +21035,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
-        }
-      }
-    },
     "babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -20881,6 +21209,23 @@
         "@babel/helper-define-polyfill-provider": "^0.3.2"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz",
+      "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.0"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -21149,6 +21494,11 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -21521,6 +21871,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
@@ -21651,6 +22006,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "dev": true
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -23571,6 +23936,14 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -25896,6 +26269,33 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "lit": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz",
+      "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==",
+      "requires": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.6.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
+      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz",
+      "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -25924,8 +26324,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -25964,6 +26363,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz",
+      "integrity": "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A=="
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -26451,6 +26855,11 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -27399,8 +27808,7 @@
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "prelude-ls": {
       "version": "1.2.1",
@@ -27974,6 +28382,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -28356,6 +28769,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -28670,6 +29088,23 @@
       "dev": true,
       "requires": {}
     },
+    "styled-components": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.10.tgz",
+      "integrity": "sha512-3kSzSBN0TiCnGJM04UwO1HklIQQSXW7rCARUk+VyMR7clz8XVlA3jijtf5ypqoDIdNMKx3la4VvaPFR855SFcg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -28823,6 +29258,11 @@
         }
       }
     },
+    "swatchy.js": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swatchy.js/-/swatchy.js-1.3.0.tgz",
+      "integrity": "sha512-d6z/kudxZ7hzuql6ZGqFXnuwUV1Z+Tk4aoXtexdmSlVMK6RWe//rbviHciKYTdhv0kAH1wiUGAk+DOepPs1zFw=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/code/package.json b/code/package.json
index 7214c8fde..89f68fcc1 100644
--- a/code/package.json
+++ b/code/package.json
@@ -4,6 +4,13 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lottiefiles/lottie-player": "^1.7.1",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
@@ -11,7 +18,9 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.10",
+    "swatchy.js": "^1.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..5a82fa29f 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -4,16 +4,16 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Technigo React App</title>
+    <meta name="title" content="Nino's Music Survey">
+    <meta name="description" content="Made with love in React.">
+    <meta property="og:url" content="" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet"> 
+    <link href="https://api.fontshare.com/v2/css?f[]=nippo@200,300&display=swap" rel="stylesheet">
+    <title>Music Survey</title>
   </head>
 
   <body>
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..085f19797 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,18 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable max-len */
 import React from 'react';
+import { SurveyForm } from 'components/SurveyForm';
+import { Header } from 'components/Header';
+import { Footer } from 'components/Footer';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <section className="outer-wrapper">
+      <section className="inner-wrapper">
+        <Header />
+        <SurveyForm />
+        <Footer />
+      </section>
+    </section>
   );
 }
diff --git a/code/src/assets/images/music file2-03 copy.png b/code/src/assets/images/music file2-03 copy.png
new file mode 100644
index 000000000..db7942995
Binary files /dev/null and b/code/src/assets/images/music file2-03 copy.png differ
diff --git a/code/src/assets/images/music file2-07.png b/code/src/assets/images/music file2-07.png
new file mode 100644
index 000000000..f240e2148
Binary files /dev/null and b/code/src/assets/images/music file2-07.png differ
diff --git a/code/src/assets/music/Jazz Night - Golden Age Radio.mp3 b/code/src/assets/music/Jazz Night - Golden Age Radio.mp3
new file mode 100644
index 000000000..1e3d8cca7
Binary files /dev/null and b/code/src/assets/music/Jazz Night - Golden Age Radio.mp3 differ
diff --git a/code/src/components/Alert.js b/code/src/components/Alert.js
new file mode 100644
index 000000000..b641d8d09
--- /dev/null
+++ b/code/src/components/Alert.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+// icon
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+
+const Alert = ({ message }) => {
+  return (
+    <div role="alert" id="form__alert" className="alert enabled">
+      <FontAwesomeIcon icon={faTriangleExclamation} id="alert-icon" />
+      <div id="form-error">
+        {message}
+      </div>
+    </div>
+  )
+}
+
+export default Alert;
\ No newline at end of file
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
new file mode 100644
index 000000000..674458807
--- /dev/null
+++ b/code/src/components/Footer.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+// styling
+import 'styles/footer.css'
+
+// icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+
+export const Footer = () => {
+  return (
+    <footer role="contentinfo">
+      <hr className="divider" />
+      <p>A website created by Nino Aquilon @Technigo &apos;23.</p>
+      <section className="contact">
+        <a href="https://www.github.com" className="button icon-button" aria-label="Go to my Github">
+          <FontAwesomeIcon icon={faGithub} />
+        </a>
+        <a href="https://www.github.com" className="button icon-button" aria-label="Go to my LinkedIn">
+          <FontAwesomeIcon icon={faLinkedin} />
+        </a>
+      </section>
+    </footer>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
new file mode 100644
index 000000000..d3e4518e1
--- /dev/null
+++ b/code/src/components/Header.js
@@ -0,0 +1,41 @@
+import React, { useState, useRef } from 'react';
+import backgroundMusic from 'assets/music/Jazz Night - Golden Age Radio.mp3';
+
+// icon
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMusic } from '@fortawesome/free-solid-svg-icons';
+
+// styling
+import 'styles/header.css'
+
+export const Header = () => {
+  // A variable importing the music file outside of the App function
+  // because the toggling didn't work inside it for some reason:
+  const bgMusic = new Audio(backgroundMusic);
+  bgMusic.loop = true;
+
+  const audioRef = useRef(bgMusic);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  // This little function plays the music when pressing the music button,
+  // and turns it off when pressing again.
+  const togglePlay = () => {
+    if (isPlaying) {
+      audioRef.current.pause();
+      setIsPlaying(false);
+    } else {
+      audioRef.current.play();
+      setIsPlaying(true);
+    }
+  }
+  return (
+    <header role="banner">
+      <section className="header__top">
+        <h1>Music Survey</h1>
+        <button type="submit" className="button" onClick={togglePlay}><FontAwesomeIcon icon={faMusic} className="button__icon" />Play some Jazz
+        </button>
+      </section>
+      <hr className="divider" />
+    </header>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/LandingPage.js b/code/src/components/LandingPage.js
new file mode 100644
index 000000000..b3ef27023
--- /dev/null
+++ b/code/src/components/LandingPage.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+// image
+import musicIllustration1 from 'assets/images/music file2-07.png';
+
+// components
+import ProgressBar from './ProgressBar';
+import NextButton from './NextButton';
+
+const LandingPage = ({ step, setStep, section, setSection }) => {
+  return (
+    <>
+      <h2>Welcome to this survey!</h2>
+      <ul>
+        <li>You will get to answer five questions related to music.</li>
+        <li>It will take you a maximum of five minutes to fill out.</li>
+        <li>All questions that are required are marked as required.</li>
+      </ul>
+      <NextButton
+        whatQuestionNext="firstQuestion"
+        section={section}
+        setSection={setSection}
+        currentState="Whatever"
+        defaultState=""
+        message=""
+        step={step}
+        setStep={setStep}
+        whatStepNext="1" />
+      <img src={musicIllustration1} alt="illustration" className="illustration" aria-hidden="true" />
+      <ProgressBar step={step} />
+    </>
+  )
+}
+
+export default LandingPage;
\ No newline at end of file
diff --git a/code/src/components/NextButton.js b/code/src/components/NextButton.js
new file mode 100644
index 000000000..0a3a2d0b6
--- /dev/null
+++ b/code/src/components/NextButton.js
@@ -0,0 +1,31 @@
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import Alert from './Alert';
+
+const NextButton = ({ setStep, whatStepNext, setSection, currentState, defaultState, whatQuestionNext, message }) => {
+  const handleNextStep = () => {
+    setStep(whatStepNext)
+  };
+  const [alert, setAlert] = useState(false);
+  const handleNextButton = () => {
+    if (currentState !== defaultState) {
+      setSection(whatQuestionNext);
+      handleNextStep();
+    } else {
+      setAlert(true)
+    }
+  };
+  return (
+    <div className="form__alertAndButton">
+      {alert && <Alert message={message} />}
+      <button
+        type="button"
+        className="button"
+        onClick={handleNextButton}>Next question
+      </button>
+    </div>
+
+  )
+}
+
+export default NextButton;
\ No newline at end of file
diff --git a/code/src/components/PreviousButton.js b/code/src/components/PreviousButton.js
new file mode 100644
index 000000000..4ca35f3a7
--- /dev/null
+++ b/code/src/components/PreviousButton.js
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+const PreviousButton = ({ setStep, whatStepBefore, setSection, whatQuestionPrevious }) => {
+  const handlePreviousButton = () => {
+    setSection(whatQuestionPrevious);
+    setStep(whatStepBefore)
+  };
+  return (
+    <button
+      type="button"
+      className="button"
+      onClick={handlePreviousButton}>Go back
+    </button>
+  )
+}
+
+export default PreviousButton;
\ No newline at end of file
diff --git a/code/src/components/ProgressBar.js b/code/src/components/ProgressBar.js
new file mode 100644
index 000000000..d5e965925
--- /dev/null
+++ b/code/src/components/ProgressBar.js
@@ -0,0 +1,12 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
+import React from 'react';
+
+const ProgressBar = ({ step }) => {
+  return (
+    <section className="form__progressBar">
+      <progress id="progress" className="progress" aria-hidden="true" value={step} aria-valuemin="0" aria-valuenow={step} aria-valuemax="5" max="5" />
+    </section>
+  )
+}
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/code/src/components/QuestionCheckboxes.js b/code/src/components/QuestionCheckboxes.js
new file mode 100644
index 000000000..385e77114
--- /dev/null
+++ b/code/src/components/QuestionCheckboxes.js
@@ -0,0 +1,60 @@
+import React from 'react';
+
+// components
+import NextButton from './NextButton';
+import PreviousButton from './PreviousButton';
+import ProgressBar from './ProgressBar';
+
+import 'styles/form.css'
+
+const QuestionCheckboxes = ({ step, setStep, section, setSection, devices, setDevices }) => {
+  const devicesGroup = ['Mobile phone', 'Computer', 'Record player', 'CD player', 'MP3-Player', 'Casette player', 'Other'];
+  const handleDevicesChange = (deviceValue) => {
+    if (devices.includes(deviceValue)) {
+      setDevices(devices.filter((item) => item !== deviceValue))
+    } else {
+      setDevices([...devices, deviceValue])
+    }
+  }
+  return (
+    <>
+      <h2>Music devices (Step 3 of 5)</h2>
+      <fieldset>
+        <legend>What device(s) do you use to listen to music?<span>Required</span></legend>
+        {devicesGroup.map((device) => (
+          <label key={device} htmlFor={device} className="form-control">
+            <input
+              type="checkbox"
+              autoComplete="off"
+              checked={devices.includes(device)}
+              onChange={() => handleDevicesChange(device)}
+              name="platform"
+              id={device} />{device}
+          </label>
+        ))}
+      </fieldset>
+      <section className="form__navigation">
+        <PreviousButton
+          whatQuestionPrevious="secondQuestion"
+          section={section}
+          setSection={setSection}
+          setStep={setStep}
+          whatStepBefore="2" />
+        <NextButton
+          whatQuestionNext="fourthQuestion"
+          section={section}
+          setSection={setSection}
+          currentState={devices.length}
+          defaultState={0}
+          message="Please select a device"
+          step={step}
+          setStep={setStep}
+          whatStepNext="4" />
+      </section>
+      <ProgressBar
+        step={step} />
+    </>
+  )
+}
+
+export default QuestionCheckboxes;
\ No newline at end of file
diff --git a/code/src/components/QuestionDropdownGenre.js b/code/src/components/QuestionDropdownGenre.js
new file mode 100644
index 000000000..31b80d0d9
--- /dev/null
+++ b/code/src/components/QuestionDropdownGenre.js
@@ -0,0 +1,78 @@
+/* eslint-disable max-len */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+
+// components
+import NextButton from './NextButton';
+import PreviousButton from './PreviousButton';
+import ProgressBar from './ProgressBar';
+
+import 'styles/form.css';
+
+const QuestionDropdownGenre = ({ step, setStep, section, setSection, genre, setGenre }) => {
+  return (
+    <>
+      <h2>Genres (Step 4 out of 5)</h2>
+      <section className="form__field genres">
+        <label htmlFor="selectGenre" className="form__question">
+        If you had to choose, what genre would you rather listen to for the rest of your life?<span>Required</span>
+        </label>
+        <div className="select">
+          <select
+            value={genre}
+            onChange={(e) => setGenre(e.target.value)}
+            name="selectedGenre"
+            id="selectGenre">
+            <option value="">Choose one...</option>
+            <option value="Pop">Pop</option>
+            <option value="Hiphop">Hiphop</option>
+            <option value="Rock">Rock</option>
+            <option value="Rhythm and blues">Rhythm and blues</option>
+            <option value="Soul">Soul</option>
+            <option value="Funk">Funk</option>
+            <option value="Reggae">Reggae</option>
+            <option value="Ska">Ska</option>
+            <option value="Country">Country</option>
+            <option value="Folk">Folk</option>
+            <option value="Middle eastern">Middle Eastern</option>
+            <option value="Jazz">Jazz</option>
+            <option value="Disco">Disco</option>
+            <option value="Classical">Classical</option>
+            <option value="Electronic">Electronic</option>
+            <option value="Latin American">Latin American</option>
+            <option value="Blues">Blues</option>
+            <option value="African">African</option>
+            <option value="Asian">Asian</option>
+            <option value="Traditional">Traditional</option>
+            <option value="Christian">Christian</option>
+            <option value="Indie">Indie</option>
+            <option value="New-age">New-age</option>
+          </select>
+          <span className="focus" />
+        </div>
+      </section>
+      <section className="form__navigation">
+        <PreviousButton
+          section={section}
+          setSection={setSection}
+          whatQuestionPrevious="thirdQuestion"
+          setStep={setStep}
+          whatStepBefore="3" />
+        <NextButton
+          whatQuestionNext="fifthQuestion"
+          defaultState=""
+          currentState={genre}
+          message="Please select a genre"
+          section={section}
+          setSection={setSection}
+          step={step}
+          setStep={setStep}
+          whatStepNext="5" />
+      </section>
+      <ProgressBar
+        step={step} />
+    </>
+  )
+}
+
+export default QuestionDropdownGenre;
\ No newline at end of file
diff --git a/code/src/components/QuestionRadioButtonsAge.js b/code/src/components/QuestionRadioButtonsAge.js
new file mode 100644
index 000000000..22698033f
--- /dev/null
+++ b/code/src/components/QuestionRadioButtonsAge.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import NextButton from './NextButton';
+import PreviousButton from './PreviousButton';
+import ProgressBar from './ProgressBar';
+
+import 'styles/form.css'
+
+const QuestionRadioButtonsAge = ({ step, setStep, ageGroup, setAgeGroup, section, setSection }) => {
+  const ageGroups = ['15-25', '26-35', '36-45', '46-55', '56-65', 'Secret!'];
+  const handleAgeChange = (e) => {
+    setAgeGroup(e.target.value)
+  };
+  return (
+    <>
+      <h2>Age (Step 2 of 5)</h2>
+      <section className="form__field age">
+        <fieldset>
+          <legend>
+        How old are you?<span>Required</span>
+          </legend>
+          {ageGroups.map((group) => (
+            <label htmlFor={`radioButtonGroup-${group}`} key={group} className="form-control">
+              <input
+                id={`radioButtonGroup-${group}`}
+                type="radio"
+                name="ageGroup"
+                value={group}
+                onChange={handleAgeChange}
+                checked={ageGroup === group} />
+              {group}
+            </label>
+          ))}
+        </fieldset>
+      </section>
+      <section className="form__navigation">
+        <PreviousButton
+          whatQuestionPrevious="firstQuestion"
+          section={section}
+          setSection={setSection}
+          setStep={setStep}
+          whatStepBefore="1" />
+        <NextButton
+          whatQuestionNext="thirdQuestion"
+          section={section}
+          setSection={setSection}
+          currentState={ageGroup}
+          defaultState=""
+          message="Please enter an age"
+          step={step}
+          setStep={setStep}
+          whatStepNext="3" />
+      </section>
+      <ProgressBar
+        step={step} />
+    </>
+  )
+}
+export default QuestionRadioButtonsAge;
\ No newline at end of file
diff --git a/code/src/components/QuestionTextInputName.js b/code/src/components/QuestionTextInputName.js
new file mode 100644
index 000000000..f6605e328
--- /dev/null
+++ b/code/src/components/QuestionTextInputName.js
@@ -0,0 +1,51 @@
+/* eslint-disable max-len */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+import NextButton from './NextButton';
+import ProgressBar from './ProgressBar';
+import PreviousButton from './PreviousButton';
+
+export const QuestionTextInputName = ({ step, setStep, firstName, setFirstName, section, setSection }) => {
+  return (
+    <>
+      <h2>Name (Step 1 of 5)</h2>
+      <div className="form__field name">
+        <label id="inputLabel" htmlFor="nameInput">What&apos;s your preferred name?<span>Required</span></label>
+        <input
+          aria-labelledby="inputLabel"
+          aria-describedby="form-error"
+          aria-required="true"
+          placeholder="Type your name here please..."
+          name="firstName"
+          className="input"
+          inputMode="text"
+          type="text"
+          id="nameInput"
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+          autoComplete="given-name"
+          required />
+      </div>
+      <section className="form__navigation">
+        <PreviousButton
+          whatQuestionPrevious="startingPage"
+          section={section}
+          setSection={setSection}
+          setStep={setStep}
+          whatStepBefore="0" />
+        <NextButton
+          whatQuestionNext="secondQuestion"
+          section={section}
+          setSection={setSection}
+          currentState={firstName}
+          defaultState=""
+          message="Please enter a name"
+          step={step}
+          setStep={setStep}
+          whatStepNext="2" />
+      </section>
+      <ProgressBar
+        step={step} />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/QuestionTextInputSong.js b/code/src/components/QuestionTextInputSong.js
new file mode 100644
index 000000000..7011948f9
--- /dev/null
+++ b/code/src/components/QuestionTextInputSong.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+// components
+import SubmitButton from './SubmitButton';
+import PreviousButton from './PreviousButton';
+import ProgressBar from './ProgressBar';
+
+const QuestionTextInputSong = ({ step, setStep, song, setSong, section, setSection }) => {
+  return (
+    <>
+      <h2>Song (Step 5 of 5)</h2>
+      <section className="form__field song">
+        <label id="textInputLabel" htmlFor="songTitle" className="form__question">What&apos;s a song that you can&apos;t get enough of right now?
+          <input
+            placeholder="Type the title here please..."
+            name="goodSong"
+            className="input"
+            type="text"
+            id="songTitleInput"
+            value={song}
+            onChange={(e) => setSong(e.target.value)}
+            autoComplete="off" />
+        </label>
+        <div className="helper" id="songTitleInput-helper">
+  This question is optional
+        </div>
+      </section>
+      <section className="form__navigation">
+        <PreviousButton
+          whatQuestionPrevious="fourthQuestion"
+          section={section}
+          setSection={setSection}
+          setStep={setStep}
+          whatStepBefore="4" />
+        <SubmitButton
+          whatQuestionNext="summary"
+          defaultState=""
+          currentState="Something"
+          message=""
+          section={section}
+          setSection={setSection} />
+      </section>
+      <ProgressBar
+        step={step} />
+    </>
+  )
+}
+export default QuestionTextInputSong;
\ No newline at end of file
diff --git a/code/src/components/SubmitButton.js b/code/src/components/SubmitButton.js
new file mode 100644
index 000000000..3c511aba3
--- /dev/null
+++ b/code/src/components/SubmitButton.js
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Alert from './Alert';
+
+const SubmitButton = ({ currentState, defaultState, setSection, message }) => {
+  const [alert, setAlert] = useState(false);
+  const handleSubmitButton = () => {
+    if (currentState !== defaultState) {
+      setSection('summary');
+    } else {
+      setAlert(true);
+    }
+  };
+
+  return (
+    <section className="form__alertAndButton">
+      {alert && <Alert message={message} />}
+      <button
+        type="submit"
+        className="button"
+        onClick={handleSubmitButton}>Submit form
+      </button>
+    </section>
+  )
+}
+
+export default SubmitButton;
\ No newline at end of file
diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
new file mode 100644
index 000000000..134440b76
--- /dev/null
+++ b/code/src/components/Summary.js
@@ -0,0 +1,33 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+// image
+import musicIllustration2 from 'assets/images/music file2-03 copy.png';
+
+const Summary = ({ firstName, ageGroup, devices, genre, song }) => {
+  return (
+    <section className="summary-wrapper">
+      <h4>Thank you so much for taking the time to answer my survey, {firstName}!</h4>
+      <div>
+        <ul>
+          <li>Name: {firstName}</li>
+          <li>Age: {ageGroup}</li>
+          <li>Device(s) used: {devices.join(', ')}</li>
+          <li>Genre: {genre} music</li>
+          {song.length >= 1 && (
+            <li>Song(optional): &quot;{song}&quot;</li>
+          )}
+        </ul>
+        <img src={musicIllustration2} alt="illustration" aria-hidden="true" className="illustration" />
+      </div>
+      <button
+        type="button"
+        className="button"
+        onClick={() => window.location.reload()}>
+        Retake survey
+      </button>
+    </section>
+  )
+}
+
+export default Summary;
\ No newline at end of file
diff --git a/code/src/components/SurveyForm.js b/code/src/components/SurveyForm.js
new file mode 100644
index 000000000..d5c53da74
--- /dev/null
+++ b/code/src/components/SurveyForm.js
@@ -0,0 +1,105 @@
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+
+// components
+import LandingPage from './LandingPage';
+import { QuestionTextInputName } from './QuestionTextInputName';
+import QuestionRadioButtonsAge from './QuestionRadioButtonsAge';
+import QuestionCheckboxes from './QuestionCheckboxes';
+import QuestionTextInputSong from './QuestionTextInputSong';
+import QuestionDropdownGenre from './QuestionDropdownGenre';
+import Summary from './Summary';
+
+// Styling
+import 'styles/form.css';
+
+export const SurveyForm = () => {
+  const [step, setStep] = useState('0');
+  const [section, setSection] = useState('startingPage');
+  const [firstName, setFirstName] = useState(''); // Declare a state variable...
+  const [ageGroup, setAgeGroup] = useState('');
+  const [devices, setDevices] = useState('');
+  const [song, setSong] = useState('');
+  const [genre, setGenre] = useState('');
+  const handleSubmit = (e) => {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+    // Or you can work with it as a plain object:
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson);
+  }
+  return (
+    <main role="main">
+      <section className="form__container">
+        <form id="surveyForm" className="form" method="post" onSubmit={handleSubmit}>
+          {section === 'startingPage' && (
+            <LandingPage
+              step={step}
+              setStep={setStep}
+              section={section}
+              setSection={setSection} />
+          )}
+          {section === 'firstQuestion' && (
+            <QuestionTextInputName
+              step={step}
+              setStep={setStep}
+              firstName={firstName}
+              setFirstName={setFirstName}
+              section={section}
+              setSection={setSection} />
+          )}
+          {section === 'secondQuestion' && (
+            <QuestionRadioButtonsAge
+              step={step}
+              setStep={setStep}
+              section={section}
+              setSection={setSection}
+              ageGroup={ageGroup}
+              setAgeGroup={setAgeGroup} />
+          )}
+          {section === 'thirdQuestion' && (
+            <QuestionCheckboxes
+              step={step}
+              setStep={setStep}
+              devices={devices}
+              setDevices={setDevices}
+              section={section}
+              setSection={setSection} />
+          )}
+          {section === 'fourthQuestion' && (
+            <QuestionDropdownGenre
+              step={step}
+              setStep={setStep}
+              genre={genre}
+              setGenre={setGenre}
+              section={section}
+              setSection={setSection} />
+          )}
+          {section === 'fifthQuestion' && (
+            <QuestionTextInputSong
+              step={step}
+              setStep={setStep}
+              song={song}
+              setSong={setSong}
+              section={section}
+              setSection={setSection} />
+          )}
+          {section === 'summary' && (
+            <Summary
+              firstName={firstName}
+              ageGroup={ageGroup}
+              devices={devices}
+              song={song}
+              genre={genre}
+              section={section}
+              setSection={setSection} />
+          )}
+        </form>
+      </section>
+    </main>
+  )
+}
+
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..e8fad542e 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,72 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+:root {
+  --input-border: #8b8a8b;
+  --input-focus-h: 245;
+  --input-focus-s: 100%;
+  --input-focus-l: 42%;
+  --form-control-color: var(--orange);
+  --select-border: #777;
+  --select-focus: blue;
+  --select-arrow: var(--select-border);
+  --btn-color: 	#1A1A1A;
+  --btn-color--hover: #DB3A00;
+  --btn-color--border: #DB3A00;
+  --orange: #DB3A00;
+  --black: #1A1A1A;
+}
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 body {
+  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--color-black);
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+.inner-wrapper {
+    height: 100%;
+    width: 80%;
+    margin: auto;
+    max-width: 600px;
+    display: flex;
+    flex-direction: column;
 }
+
+.outer-wrapper {
+  width: 100%;
+  margin: 0;
+
+}
+
+h1 {
+  &:hover {
+    color: var(--orange);
+  }
+}
+
+@media (min-width: 481px) {
+  body {
+    font-size: 1.2rem;
+  }
+}
+
+@media (min-width: 769px) {
+  body {
+    font-size: 1.1rem;
+  }
+}
\ No newline at end of file
diff --git a/code/src/index.js b/code/src/index.js
index 99f6d0de7..7aea964e8 100644
--- a/code/src/index.js
+++ b/code/src/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable linebreak-style */
+
 import React from 'react';
 import { createRoot } from 'react-dom/client'
 import './index.css'
@@ -5,4 +7,4 @@ import { App } from './App'
 
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(<App />);
+root.render(<App />);
\ No newline at end of file
diff --git a/code/src/styles/footer.css b/code/src/styles/footer.css
new file mode 100644
index 000000000..17b094ca2
--- /dev/null
+++ b/code/src/styles/footer.css
@@ -0,0 +1,22 @@
+footer {
+    display: flex;
+    text-align: center;
+    font-size: inherit;
+    margin-bottom: 1rem;
+    flex-direction: column;
+    align-items: center;
+    min-height: 20vh;
+    justify-content: flex-end;
+  }
+
+.contact {
+    display: flex;
+    gap: 1em;
+}
+
+.divider {
+  color: inherit;
+  height: 2px;
+  background-color: var(--color-black);
+  width: 100%;
+}
\ No newline at end of file
diff --git a/code/src/styles/form.css b/code/src/styles/form.css
new file mode 100644
index 000000000..82163fb7e
--- /dev/null
+++ b/code/src/styles/form.css
@@ -0,0 +1,408 @@
+form {
+    min-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.form__field {
+    display: flex;
+    flex-direction: column;
+}
+
+.form__alertAndButton {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.form__navigation {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
+    margin: 1rem 0;
+}
+
+form__question {
+    margin: 1rem 0;
+}
+
+
+/* Illustrations */
+
+.illustration {
+    width: 100%;
+    height: auto;
+}
+
+/* Labels */
+
+label {
+    display: block;
+    margin: 1rem 0;
+}
+
+/* Required label */
+
+label span, legend span {
+    font-size: .75rem;
+    display: inline-block;
+    height: 1rem;
+    line-height: 1rem;
+    font-family: inherit;
+    background: #222;
+    padding: 0 0.325rem;
+    position: relative;
+    top: -1px;
+    color: #eee;
+    border-radius: 0.125rem;
+    margin-left: 5px;
+}
+
+/* Helper text */
+
+.helper {
+    margin: 0 0 1rem 0;
+    padding: 0rem;
+    color: #676767;
+    display: block;
+    border-radius: 2px;
+}
+
+/* Summary */
+
+.summary-wrapper ul {
+    margin: 0;
+    border: 2px solid var(--black);
+    padding: 20px;
+}
+
+.summary-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 70vh;
+    justify-content: space-evenly;
+}
+
+/* Dividers */
+
+.divider {
+    width: 100%;
+    display: block;
+  } 
+
+
+/* Radio buttons */
+
+.form-control {
+    font-size: 16px;
+    font-size: max(16px, 1em);
+    font-family: inherit;
+    line-height: 1.1;
+    display: grid;
+    grid-template-columns: 2em auto;
+}
+
+input[type="radio"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff; /* For iOS < 15 to remove gradient background */
+  margin: 0; /* Not removed via appearance */
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 50%;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em var(--form-control-color);
+    background-color: CanvasText; /* WHCM */
+  }
+
+input[type="radio"]:checked::before {
+    transform: scale(1);
+  }
+
+input[type="radio"]:focus {
+    outline: max(2px, 0.15em) solid currentColor;
+    outline-offset: max(2px, 0.15em);
+  }
+
+.form-control + .form-control {
+    margin-top: 1em; /* adjacent sibling combinator */
+  }
+
+
+/* Checkboxes */
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  margin: 0;
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+}
+
+input[type="checkbox"]::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em var(--form-control-color);
+    background-color: CanvasText; /* WHCM */
+    transform-origin: bottom left;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+input[type="checkbox"]:checked::before {
+    transform: scale(1);
+  }
+
+input[type="checkbox"]:focus {
+    outline: max(2px, 0.15em) solid currentColor;
+    outline-offset: max(2px, 0.15em);
+  }
+
+/* Text input */
+
+  .input {
+    font-size: 16px;
+    font-size: max(16px, 1em);
+    font-family: inherit;
+    padding: 0.25em 0.5em;
+    background-color: #fff;
+    border: 2px solid var(--input-border);
+    border-radius: 4px;
+    transition: 180ms box-shadow ease-in-out;
+    line-height: 1;
+    height: 2.25rem;
+    display: block;
+    margin: 2rem 0;
+    width: 70%;
+  }
+
+  .input:focus {
+    border-color: #000;
+    box-shadow: 0 0 0 2px #000;
+    outline: 2px solid transparent; /* for Windows High Contrast mode */
+  }
+
+  ::placeholder {
+    color: #767676;
+    opacity: 1;
+}
+
+/* Select / Dropdown */
+
+select {
+    appearance: none; /* removes default dropdown arrow */
+    background-color: transparent;
+    border: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    width: 100%;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: inherit;
+    line-height: inherit;
+    outline: none;
+}
+
+select::-ms-expand {
+    display: none; /* removal of arrow for lower IE versions */
+}
+
+.select {
+    width: 100%;
+    min-width: 15ch;
+    max-width: 30ch;
+    border: 1px solid var(--select-border);
+    border-radius: 0.25em;
+    padding: 0.25em 0.5em;
+    font-size: 16px;
+    font-size: max(16px, 1em);
+    cursor: pointer;
+    line-height: 1.1;
+    background-color: #fff;
+    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
+    display: grid;
+    grid-template-areas: "select";
+    align-items: center;
+    position: relative;
+    margin: 2rem 0;
+}
+
+.select::after{
+    content: "";
+    width: 0.8em;
+    height: 0.5em;
+    background-color: var(--select-arrow);
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    justify-self: end;
+}
+
+select, .select:after {
+    grid-area: select;
+}
+
+select:focus + .focus {
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border: 2px solid var(--black);
+    border-radius: inherit;
+    box-shadow: 0 0 0 2px #000;
+}
+
+/* Buttons */
+
+a.button {
+    text-decoration: none;
+  }
+
+button.button {
+    font-family: inherit;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-size: max(16px, 1em);
+    @media screen and (-ms-high-contrast: active) {
+        border: 1px solid currentColor
+    };
+}
+a.button, button.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--btn-color);
+    color: #fff;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
+    text-align: center;
+    line-height: 1.1;
+    transition: 220ms all ease-in-out;
+    &:hover, &:active {
+        background-color: var(--btn-color--hover);
+    };
+    &:focus {
+        outline-style: solid;
+        outline-color: transparent;
+        box-shadow: 0 0 0 4px var(--btn-color--border);
+    };
+    &:not(.icon-button) {
+        padding: 0.25em 0.75em;
+        min-width: 10ch;
+        min-height: 44px;
+        border-radius: 8px;
+    };
+    &:disabled {
+        background-color: var(--input-border);
+    }
+}
+
+.icon-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0.35em;
+    border-radius: 50%;
+}
+
+  .button__icon {
+    width: 0.9em;
+    height: 0.9em;
+    margin-right: 0.5em;
+    fill: currentColor;
+  }
+
+/* Progress bar */
+
+progress {
+    display: block;
+    appearance: none;
+    width: calc(90%);
+    height: 1rem;
+    border: none;
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow: 0 0 0 1rem #fff, 0 1rem 0.75rem -0.25rem rgba(0,0,0,0.3);
+    margin: 2rem 0;
+    &:focus {
+        outline-style: solid;
+        outline-color: transparent;
+        box-shadow: 0 0 0 4px #000;
+    }
+}
+
+progress::-webkit-progress-bar {
+    background: linear-gradient(90deg, #cfcfcf 49%, #cfcfcf 85%, #959595 100%);
+    background-color: transparent;
+}
+
+progress::-webkit-progress-value {
+    background-color: var(--btn-color--hover);
+}
+
+progress::-moz-progress-bar {
+    background-color: var(--btn-color--hover);
+}
+
+.form__progressBar {
+    display: flex;
+    justify-content: center;
+}
+
+/* Alert */
+
+.alert {
+    border: 2px solid #000;
+    border-radius: 2px;
+    transition: .2s;
+    height: 0px;
+    padding: 1rem 0.5rem 1rem 0rem;
+    display: grid;
+    grid-template-columns: 3rem 1fr;
+}
+
+.alert.enabled {
+    line-height: 1rem;
+    margin: 1rem 0;
+    height: auto;
+    max-height: 8rem;
+}
+
+#alert-icon {
+    margin: auto 1em auto 0.5em;
+}
+
+
+@media (min-width: 769px) {
+    .input {
+      width: 50%;
+    }
+    .illustration {
+        max-width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/code/src/styles/header.css b/code/src/styles/header.css
new file mode 100644
index 000000000..315692b76
--- /dev/null
+++ b/code/src/styles/header.css
@@ -0,0 +1,6 @@
+.header__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 1rem;
+  }
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..b6aafe2e6
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,136 @@
+{
+  "name": "project-survey",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/react-fontawesome": "^0.2.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..ed4048e03
--- /dev/null
+++ b/package.json
@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0"
+  }
+}