diff --git a/package-lock.json b/package-lock.json
index 79e93a77f..9023bd7db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "dependencies": {
         "@babel/eslint-parser": "^7.18.9",
+        "@lottiefiles/react-lottie-player": "^3.5.3",
+        "@reduxjs/toolkit": "^1.9.5",
         "eslint": "^8.21.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.26.0",
@@ -16,7 +18,10 @@
         "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",
+        "react-redux": "^8.0.5",
+        "style-components": "^0.1.0",
+        "styled-components": "^5.3.10"
       },
       "devDependencies": {
         "eslint-plugin-flowtype": "^8.0.3",
@@ -130,7 +135,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"
       },
@@ -2193,6 +2197,29 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "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.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
@@ -2240,6 +2267,51 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -3097,6 +3169,17 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "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/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3187,6 +3270,29 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
+      "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
+      "dependencies": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3684,6 +3790,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -3758,6 +3873,11 @@
       "integrity": "sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
     "node_modules/@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -3776,6 +3896,16 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
       "dev": true
     },
+    "node_modules/@types/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3791,6 +3921,11 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3831,6 +3966,11 @@
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -4693,6 +4833,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -4930,6 +5078,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",
@@ -5267,6 +5435,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",
@@ -5391,6 +5567,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -5744,6 +5925,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.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -5952,6 +6141,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",
@@ -6148,6 +6347,11 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "dev": true
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6413,6 +6617,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -7911,7 +8124,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -8506,6 +8718,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",
@@ -8791,10 +9011,9 @@
       }
     },
     "node_modules/immer": {
-      "version": "9.0.15",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
-      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==",
-      "dev": true,
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -11691,8 +11910,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",
@@ -11734,6 +11952,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.11.0.tgz",
+      "integrity": "sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -13938,8 +14161,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",
@@ -14379,6 +14601,49 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-redux": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
+      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14476,6 +14741,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14535,6 +14815,22 @@
         "node": "*"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14690,6 +14986,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -15210,6 +15511,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",
@@ -15603,6 +15909,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-components": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-components/-/style-components-0.1.0.tgz",
+      "integrity": "sha512-l1O+9/L/1ZZbjMtFdDqPZ5+9sLBmcqJrpNxWoLQRXdK3hh3iYsyahDmiqtPNPMX1JosSRxJVcTNo0ubiTBKrdA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
+        "axios": "^0.21.1",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
+        "react-transition-group": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -15619,6 +15943,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",
@@ -16355,6 +16708,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17470,7 +17831,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"
       }
@@ -18821,6 +19181,29 @@
       "dev": true,
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "requires": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "@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.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
@@ -18852,6 +19235,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "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",
@@ -19503,6 +19915,14 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "@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"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -19551,6 +19971,17 @@
         "source-map": "^0.7.3"
       }
     },
+    "@reduxjs/toolkit": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
+      "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
+      "requires": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19918,6 +20349,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -19992,6 +20432,11 @@
       "integrity": "sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -20010,6 +20455,16 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
       "dev": true
     },
+    "@types/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -20025,6 +20480,11 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
+    "@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -20065,6 +20525,11 @@
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
       "dev": true
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -20694,6 +21159,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20873,6 +21346,23 @@
         "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
+    "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",
@@ -21141,6 +21631,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",
@@ -21231,6 +21726,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -21504,6 +22004,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.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -21634,6 +22139,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",
@@ -21781,6 +22296,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -21984,6 +22504,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -23099,8 +23628,7 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -23505,6 +24033,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",
@@ -23723,10 +24259,9 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
     },
     "immer": {
-      "version": "9.0.15",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
-      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==",
-      "dev": true
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
     },
     "import-fresh": {
       "version": "3.3.0",
@@ -25863,8 +26398,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",
@@ -25903,6 +26437,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.11.0.tgz",
+      "integrity": "sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw=="
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -27340,8 +27879,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",
@@ -27675,6 +28213,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-redux": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
+      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -27748,6 +28306,17 @@
         }
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27797,6 +28366,20 @@
         }
       }
     },
+    "redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "requires": {}
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -27921,6 +28504,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -28303,6 +28891,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",
@@ -28610,6 +29203,20 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "style-components": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-components/-/style-components-0.1.0.tgz",
+      "integrity": "sha512-l1O+9/L/1ZZbjMtFdDqPZ5+9sLBmcqJrpNxWoLQRXdK3hh3iYsyahDmiqtPNPMX1JosSRxJVcTNo0ubiTBKrdA==",
+      "requires": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
+        "axios": "^0.21.1",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
+        "react-transition-group": "^4.4.1"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -28617,6 +29224,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",
@@ -29171,6 +29795,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "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 7214c8fde..b65aca324 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@reduxjs/toolkit": "^1.9.5",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
@@ -11,7 +13,10 @@
     "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",
+    "react-redux": "^8.0.5",
+    "style-components": "^0.1.0",
+    "styled-components": "^5.3.10"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/index.html b/public/index.html
index e6730aa66..4dd93b372 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,14 @@
       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>
+    <title>Andrea Hedström Portfolio</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Montserrat:ital,wght@1,300&display=swap" rel="stylesheet">
+
+    <script src="https://kit.fontawesome.com/dae95110f4.js" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="style.css"/>
+    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,300,400&display=swap">
   </head>
 
   <body>
diff --git a/src/App.js b/src/App.js
index 781afcf72..3fcea9bc2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,18 @@
 import React from 'react'
+import Header from 'components/Header';
+import Tech from 'components/Tech';
+import Skills from 'components/Skills';
+import Footer from 'components/Footer';
+import FeaturedProjects from 'components/FeaturedProjects';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      <Header />
+      <Tech />
+      <FeaturedProjects />
+      <Skills />
+      <Footer />
+    </>
   )
 }
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Black.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Black.otf
new file mode 100644
index 000000000..4f5f852c7
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Black.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-BlackItalic.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-BlackItalic.otf
new file mode 100644
index 000000000..b105ea486
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-BlackItalic.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Bold.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Bold.otf
new file mode 100644
index 000000000..677ab5fe1
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Bold.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-BoldItalic.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-BoldItalic.otf
new file mode 100644
index 000000000..cd5b85e38
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-BoldItalic.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Italic.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Italic.otf
new file mode 100644
index 000000000..d8652b3f3
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Italic.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Light.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Light.otf
new file mode 100644
index 000000000..22cb8bc3c
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Light.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-LightItalic.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-LightItalic.otf
new file mode 100644
index 000000000..1cf1a3200
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-LightItalic.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Medium.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Medium.otf
new file mode 100644
index 000000000..3513a83bb
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Medium.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-MediumItalic.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-MediumItalic.otf
new file mode 100644
index 000000000..105838c80
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-MediumItalic.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Regular.otf b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Regular.otf
new file mode 100644
index 000000000..ddaadc053
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/OTF/Satoshi-Regular.otf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/Variable/Satoshi-Variable.ttf b/src/assets/Satoshi_Complete 2/Fonts/Variable/Satoshi-Variable.ttf
new file mode 100644
index 000000000..976e85cb5
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/Variable/Satoshi-Variable.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/Variable/Satoshi-VariableItalic.ttf b/src/assets/Satoshi_Complete 2/Fonts/Variable/Satoshi-VariableItalic.ttf
new file mode 100644
index 000000000..4c2677c6f
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/Variable/Satoshi-VariableItalic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/README.md b/src/assets/Satoshi_Complete 2/Fonts/WEB/README.md
new file mode 100644
index 000000000..1d0c44105
--- /dev/null
+++ b/src/assets/Satoshi_Complete 2/Fonts/WEB/README.md	
@@ -0,0 +1,37 @@
+# Installing Webfonts
+Follow these simple Steps.
+
+## 1.
+Put `satoshi/` Folder into a Folder called `fonts/`.
+
+## 2.
+Put `satoshi.css` into your `css/` Folder.
+
+## 3. (Optional)
+You may adapt the `url('path')` in `satoshi.css` depends on your Website Filesystem.
+
+## 4.
+Import `satoshi.css` at the top of you main Stylesheet.
+
+```
+@import url('satoshi.css');
+```
+
+## 5.
+
+
+```
+font-family: 'Satoshi-Variable';
+font-family: 'Satoshi-VariableItalic';
+font-family: 'Satoshi-Light';
+font-family: 'Satoshi-LightItalic';
+font-family: 'Satoshi-Regular';
+font-family: 'Satoshi-Italic';
+font-family: 'Satoshi-Medium';
+font-family: 'Satoshi-MediumItalic';
+font-family: 'Satoshi-Bold';
+font-family: 'Satoshi-BoldItalic';
+font-family: 'Satoshi-Black';
+font-family: 'Satoshi-BlackItalic';
+```
+
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/css/satoshi.css b/src/assets/Satoshi_Complete 2/Fonts/WEB/css/satoshi.css
new file mode 100644
index 000000000..10247fd66
--- /dev/null
+++ b/src/assets/Satoshi_Complete 2/Fonts/WEB/css/satoshi.css	
@@ -0,0 +1,178 @@
+/**
+ * @license
+ *
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2022 Indian Type Foundry
+ *
+ * Font Styles:
+ * Satoshi Variable(Variable font)
+ * Satoshi Variable Italic(Variable font)
+ * Satoshi Light
+ * Satoshi Light Italic
+ * Satoshi Regular
+ * Satoshi Italic
+ * Satoshi Medium
+ * Satoshi Medium Italic
+ * Satoshi Bold
+ * Satoshi Bold Italic
+ * Satoshi Black
+ * Satoshi Black Italic
+ *
+*/
+
+
+/**
+* This is a variable font
+* You can controll variable axes as shown below:
+* font-variation-settings: 'wght' 900.0;
+*
+* available axes:
+
+* 'wght' (range from 300.0 to 900.0)
+
+*/
+
+@font-face {
+  font-family: 'Satoshi-Variable';
+  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
+       url('../fonts/Satoshi-Variable.woff') format('woff'),
+       url('../fonts/Satoshi-Variable.ttf') format('truetype');
+       font-weight: 300 900;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+/**
+* This is a variable font
+* You can controll variable axes as shown below:
+* font-variation-settings: 'wght' 900.0;
+*
+* available axes:
+
+* 'wght' (range from 300.0 to 900.0)
+
+*/
+
+@font-face {
+  font-family: 'Satoshi-VariableItalic';
+  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
+       url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
+       font-weight: 300 900;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-Light';
+  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
+       url('../fonts/Satoshi-Light.woff') format('woff'),
+       url('../fonts/Satoshi-Light.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-LightItalic';
+  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
+       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-Regular';
+  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
+       url('../fonts/Satoshi-Regular.woff') format('woff'),
+       url('../fonts/Satoshi-Regular.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-Italic';
+  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
+       url('../fonts/Satoshi-Italic.woff') format('woff'),
+       url('../fonts/Satoshi-Italic.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-Medium';
+  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
+       url('../fonts/Satoshi-Medium.woff') format('woff'),
+       url('../fonts/Satoshi-Medium.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-MediumItalic';
+  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
+       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-Bold';
+  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
+       url('../fonts/Satoshi-Bold.woff') format('woff'),
+       url('../fonts/Satoshi-Bold.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-BoldItalic';
+  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
+       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-Black';
+  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
+       url('../fonts/Satoshi-Black.woff') format('woff'),
+       url('../fonts/Satoshi-Black.ttf') format('truetype');
+       font-weight: 900;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi-BlackItalic';
+  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
+       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
+       font-weight: 900;
+       font-display: swap;
+       font-style: italic;
+}
+
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.eot
new file mode 100644
index 000000000..11747f362
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.ttf
new file mode 100644
index 000000000..62015aca0
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.woff
new file mode 100644
index 000000000..a6bee36dd
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.woff2
new file mode 100644
index 000000000..64492d523
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Black.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.eot
new file mode 100644
index 000000000..de2edbbc1
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.ttf
new file mode 100644
index 000000000..74410b974
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.woff
new file mode 100644
index 000000000..0e07e1c5e
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.woff2
new file mode 100644
index 000000000..9d5c911dc
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BlackItalic.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.eot
new file mode 100644
index 000000000..390ae252b
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.ttf
new file mode 100644
index 000000000..00bc985b2
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.woff
new file mode 100644
index 000000000..bba8257f6
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.woff2
new file mode 100644
index 000000000..0a8db7a46
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Bold.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.eot
new file mode 100644
index 000000000..426be2ac1
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.ttf
new file mode 100644
index 000000000..24f012cbf
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.woff
new file mode 100644
index 000000000..8bcb7a6e2
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.woff2
new file mode 100644
index 000000000..225527f78
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-BoldItalic.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.eot
new file mode 100644
index 000000000..64039a84e
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.ttf
new file mode 100644
index 000000000..c214f4fe5
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.woff
new file mode 100644
index 000000000..edd4d9322
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.woff2
new file mode 100644
index 000000000..8b98599d3
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Italic.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.eot
new file mode 100644
index 000000000..d8fcaccd9
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.ttf
new file mode 100644
index 000000000..b41a2d4a5
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.woff
new file mode 100644
index 000000000..8f05e4e9f
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.woff2
new file mode 100644
index 000000000..cf18cd4c0
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Light.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.eot
new file mode 100644
index 000000000..e34a0df4a
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.ttf
new file mode 100644
index 000000000..08f5db573
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.woff
new file mode 100644
index 000000000..a03a50d7b
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.woff2
new file mode 100644
index 000000000..6bd15ad54
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-LightItalic.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.eot
new file mode 100644
index 000000000..83caceca5
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.ttf
new file mode 100644
index 000000000..ab149b719
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.woff
new file mode 100644
index 000000000..cef3226e5
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.woff2
new file mode 100644
index 000000000..ffd0ac96c
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Medium.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.eot
new file mode 100644
index 000000000..25d229a5b
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.ttf
new file mode 100644
index 000000000..387f278e2
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.woff
new file mode 100644
index 000000000..46d8995af
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.woff2
new file mode 100644
index 000000000..212adc92a
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-MediumItalic.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.eot
new file mode 100644
index 000000000..452666f4a
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.ttf
new file mode 100644
index 000000000..fe85cd6c9
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.woff
new file mode 100644
index 000000000..03ac19525
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.woff2
new file mode 100644
index 000000000..81c40ab08
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Regular.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.eot
new file mode 100644
index 000000000..f42624e18
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.ttf
new file mode 100644
index 000000000..976e85cb5
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.woff
new file mode 100644
index 000000000..f8dcd1d60
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.woff2
new file mode 100644
index 000000000..b00e833ed
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-Variable.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.eot b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.eot
new file mode 100644
index 000000000..5f4554af9
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.eot differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.ttf b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.ttf
new file mode 100644
index 000000000..4c2677c6f
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.ttf differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.woff b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.woff
new file mode 100644
index 000000000..3fe029e25
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.woff differ
diff --git a/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.woff2 b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.woff2
new file mode 100644
index 000000000..e7ab3a09a
Binary files /dev/null and b/src/assets/Satoshi_Complete 2/Fonts/WEB/fonts/Satoshi-VariableItalic.woff2 differ
diff --git a/src/assets/Satoshi_Complete 2/License/FFL.txt b/src/assets/Satoshi_Complete 2/License/FFL.txt
new file mode 100644
index 000000000..4200744bb
--- /dev/null
+++ b/src/assets/Satoshi_Complete 2/License/FFL.txt	
@@ -0,0 +1,58 @@
+Fontshare EULA
+
+
+---—---------------------------------—------------------------------
+Free Font - End User License Agreement (FF EULA)
+---—---------------------------------—------------------------------
+Notice to User
+Indian Type Foundry designs, produces and distributes font software as digital fonts to end users worldwide. In addition to commercial fonts that are available for a fee, ITF also offers several fonts which can be used free of charge. The free fonts are distributed through a dedicated platform called www.fontshare.com (“Fontshare”) to end users worldwide. These free fonts are subject to this legally binding EULA between the Indian Type Foundry (“Indian Type Foundry” or “Licensor”) and you (“Licensee”). 
+You acknowledge that the Font Software and designs embodied therein are protected by the copyright, other intellectual property rights and industrial property rights and by international treaties. They are and remain at all times the intellectual property of the Indian Type Foundry.
+In addition to direct download, Fontshare also offers these free fonts via Fonthsare API using a code. In this case, the Font Software is delivered directly from the servers used by Indian Type Foundry to the Licensee's website, without the Licensee having to download the Font Software.
+By downloading, accessing the API, installing, storing, copying or using one of any Font Software, you agree to the following terms. 
+
+Definitions
+“Font Software” refers to the set of computer files or programs released under this license that instructs your computer to display and/or print each letters, characters, typographic designs, ornament and so forth. Font Software includes all bitmap and vector representations of fonts and typographic representations and embellishments created by or derived from the Font Software. 
+“Original Version” refers to the Font Software as distributed by the Indian Type Foundry as the copyright holder. 
+“Derivative Work” refers to the pictorial representation of the font created by the Font Software, including typographic characters such as letters, numerals, ornaments, symbols, or punctuation and special characters.
+
+01. Grant of License
+You are hereby granted a non-exclusive, non-assignable, non-transferrable, terminable license to access, download and use the Font Software for your personal or commercial use for an unlimited period of time for free of charge. 
+You may use the font Software in any media (including Print, Web, Mobile, Digital, Apps, ePub, Broadcasting and OEM) at any scale, at any location worldwide. 
+You may use the Font Software to create logos and other graphic elements, images on any surface, vector files or other scalable drawings and static images. 
+You may use the Font Software on any number of devices (computer, tablet, phone). The number of output devices (Printers) is not restricted. 
+You may make only such reasonable number of back-up copies suitable to your permitted use. 
+You may but are not required to identify Indian Type Foundry Fonts in your work credits. 
+
+02. Limitations of usage
+You may not modify, edit, adapt, translate, reverse engineer, decompile or disassemble, alter or otherwise copy the Font Software or the designs embodied therein in whole or in part, without the prior written consent of the Licensor. 
+The Fonts may not - beyond the permitted copies and the uses defined herein - be distributed, duplicated, loaned, resold or licensed in any way, whether by lending, donating or give otherwise to a person or entity. This includes the distribution of the Fonts by e-mail, on USB sticks, CD-ROMs, or other media, uploading them in a public server or making the fonts available on peer-to-peer networks. A passing on to external designers or service providers (design agencies, repro studios, printers, etc.) is also not permitted. 
+You are not allowed to transmit the Font Software over the Internet in font serving or for font replacement by means of technologies such as but not limited to EOT, Cufon, sIFR or similar technologies that may be developed in the future without the prior written consent of the Licensor. 
+
+03. Embedding
+You may embed the Font Software in PDF and other digital documents provided that is done in a secured, read-only mode. It must be ensured beyond doubt that the recipient cannot use the Font Software to edit or to create new documents. The design data (PDFs) created in this way and under these created design data (PDFs) may be distributed in any number. 
+The extraction of the Font Software in whole or in part is prohibited. 
+
+04. Third party use, Commercial print service provider
+You may include the Font Software in a non-editable electronic document solely for printing and display purposes and provide that electronic document to the commercial print service provider for the purpose of printing. If the print service needs to install the fonts, they too need to download the Font Software from the Licensor's website.
+
+05. Derivative Work
+You are allowed to make derivative works as far as you use them for your personal or commercial use. However, you cannot modify, make changes or reverse engineer the original font software provided to you. Any derivative works are the exclusive property of the Licensor and shall be subject to the terms and conditions of this EULA. Derivative works may not be sub-licensed, sold, leased, rented, loaned, or given away without the express written permission of the Licensor. 
+
+06. Warranty and Liability
+BECAUSE THIS SOFTWARE IS LICENSED FREE OF CHARGE, INDIAN TYPE FOUNDRY MAKES NO WARRANTIES, EXPRESS OR IMPLIED AS TO THE MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR OTHERWISE. THE FONT SOFTWARE WAS NOT MANUFACTURED FOR USE IN MANUFACTURING CONTROL DEVICES OR NAVIGATION DEVICES OR IN CIRCUMSTANCES THAT COULD RESULT IN ENVIRONMENTAL DAMAGE OR PERSONAL INJURY. WITHOUT LIMITING THE FOREGOING, INDIAN TYPE FOUNDRY SHALL IN NO EVENT BE LIABLE TO THE LICENSED USER OR ANY OTHER THIRD PARTY FOR ANY DIRECT, CONSEQUENTIAL OR INCIDENTAL DAMAGES, INCLUDING DAMAGES FROM LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION NOR FOR LOST PROFITS OR SAVINGS ARISING OUT OF THE USE OR INABILITY TO USE THE PRODUCT EVEN IF NOTIFIED IN ADVANCE, UNDER NO CIRCUMSTANCES SHALL INDIAN TYPE FOUNDRY’S LIABILITY EXCEED THE REPLACEMENT COST OF THE SOFTWARE. 
+IF LICENSEE CHOOSES TO ACCESS THE FONT SOFTWARE THROUGH A CODE (API), IT MAY HAVE A DIRECT IMPACT ON LICENSEE'S WEBSITE OR APPLICATIONS. INDIAN TYPE FOUNDRY IS NOT RESPONSIBLE OR LIABLE FOR ANY INTERRUPTION, MALFUNCTION, DOWNTIME OR OTHER FAILURE OF THE WEBSITE OR ITS API.
+
+07. Updates, Maintenance and Support Services
+Licensor will not provide you with any support services for the Software under this Agreement.
+
+08. Termination 
+Any breach of the terms of this agreement shall be a cause for termination, provided that such breach is notified in writing to the Licensee by the Licensor and the Licensee failed to rectify the breach within 30 days of the receipt of such notification. 
+In the event of termination and without limitation of any remedies under law or equity, you must delete the Font Software and all copies thereof. Proof of this must be provided upon request of the Licensor.  
+We reserve the right to claim damages for the violation of the conditions. 
+
+09. Final Provisions
+If individual provisions of this agreement are or become invalid, the validity of the remaining provisions shall remain unaffected. Invalid provisions shall be replaced by mutual agreement by such provisions that are suitable to achieve the desired economic purpose, taking into account the interests of both parties. The same shall apply mutatis mutandis to the filling of any gaps which may arise in this agreement.
+This contract is subject to laws of the Republic of India. Place of performance and exclusive place of jurisdiction for all disputes between the parties arising out of or in connection with this contract is, as far as legally permissible, Ahmedabad, India.
+- 
+Last Updated on 22 March 2021
+Copyright 2021 Indian Type Foundry. All rights reserved. 
\ No newline at end of file
diff --git a/src/components/FeaturedProjects.js b/src/components/FeaturedProjects.js
new file mode 100644
index 000000000..aa0bdddf4
--- /dev/null
+++ b/src/components/FeaturedProjects.js
@@ -0,0 +1,149 @@
+import React from 'react';
+import styled from 'styled-components';
+import ProjectList from 'components/ProjectList'
+
+const FeaturedProjects = () => {
+  return (
+    <>
+      <FeaturedHeader>
+        <h1>
+        Featured Projects
+        </h1>
+      </FeaturedHeader>
+      {ProjectList.map((project) => (
+        <ProjectSection>
+          <ProjectImg src={project.projectImg} alt="" />
+          <Title><h1>{project.title}</h1></Title>
+          <Text><p>{project.text}</p></Text>
+          <TechLanguage>
+            {project.techLanguage.map((language) => (
+              <h3>
+                <span>
+                  {language}
+                </span>
+              </h3>
+            ))}
+          </TechLanguage>
+          <Buttons>
+            <Button
+              type="button"
+              onClick={() => window.open(project.githubLink)}>
+              <i className="fa-brands fa-github" />
+        View code
+            </Button>
+            <Button
+              type="button"
+              onClick={() => window.open(project.liveLink)}>
+              <i className="fa-regular fa-globe" />
+        Live demo
+            </Button>
+          </Buttons>
+        </ProjectSection>
+      ))}
+    </>
+  )
+}
+
+export default FeaturedProjects;
+
+const FeaturedHeader = styled.h1`
+font-family: 'Satoshi';
+font-size: 30px;
+padding: 20px;
+@media (min-width: 768px) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+`
+
+const ProjectSection = styled.div`
+display: flex;
+flex-direction: column;
+justify-content: center;
+margin-bottom: 30px;
+
+
+@media (min-width: 768px) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+`
+const ProjectImg = styled.img`
+width: 327px;
+height: 280px;
+object-fit: cover;
+margin-bottom: -50px;
+padding: 20px;
+
+@media (min-width: 768px) {
+  width: 427px;
+  height: 380px;
+}
+`
+const Title = styled.h1`
+font-family: 'Satoshi';
+font-size: 19px;
+margin-bottom: -70px;
+padding-left: 20px;
+padding-rigth: 20px;
+`
+const Text = styled.p`
+font-family: 'EB Garamond';
+font-size: 22px;
+margin-bottom: -20px;
+justify-content: center;
+padding-left: 20px;
+padding-right: 20px;
+
+@media (min-width: 768px) {
+  width: 400px;
+}
+`
+const TechLanguage = styled.div`
+display: flex;
+flex-direction: row;
+font-family: 'Satoshi';
+font-size: 12px;
+color:white;
+padding-left: 20px;
+padding-right: 20px;
+gap: 5px;
+span {
+  background: black;
+  padding: 2px 6px;
+}
+`
+const Button = styled.button`
+font-family: 'Satoshi';
+display: flex;
+align-items: center;
+justify-content: flex-start;
+gap: 15px;
+border-radius: 40px;
+border-style: none;
+padding: 30px, 0px, 0px, 30px;
+background: #D6A9E2;
+color: white;
+font-size: 18px;
+margin: 20px;
+line-height: 27px;
+text-decoration: none;
+margin-bottom: 10px;
+width: 170px;
+height: 48px;
+margin-top: 10px;
+&:hover {
+background-color: rgb(214, 205, 140);
+color: white
+}
+`
+const Buttons = styled.div`
+@media (min-width: 768px) {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+`
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 000000000..19c36190a
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import styled from 'styled-components';
+import andrea2 from 'images/andrea2.jpeg'
+
+const Footer = () => {
+  return (
+    <FooterSection>
+      <Header>
+        <h1>
+        Let &apos;s have a coffee!
+        </h1>
+      </Header>
+      <ProfileImg src={andrea2} />
+      <Name><h1>Andrea Hedström</h1></Name>
+      <Title>
+        <h1>Front End Developer</h1>
+        <h3>+ Digital communicator with UX-knowledge</h3>
+      </Title>
+      <Contact>
+        <p>+46(0) 762 62 42 59</p>
+        <p>andrea.hedstrom@outlook.com</p>
+      </Contact>
+      <Icons>
+        <StyledA href="https://www.linkedin.com/in/andrea-hedstr%C3%B6m-3549a516b/" target="_blank" rel="noopener noreferrer">
+          <i className="fa-brands fa-linkedin-in" />
+        </StyledA>
+        <StyledA href="https://github.com/AndreaHedstrom" target="_blank" rel="noopener noreferrer">
+          <i className="fa-brands fa-github" />
+        </StyledA>
+        <StyledA href="mailto:andrea.hedstrom@outlook.com" target="_blank" rel="noopener noreferrer">
+          <i className="fa-regular fa-envelope" />
+        </StyledA>
+      </Icons>
+    </FooterSection>
+
+  )
+}
+export default Footer;
+
+const FooterSection = styled.div`
+font-family: 'Satoshi';
+display: flex;
+flex-direction: column;
+margin: 20px;
+@media (min-width: 1000px) {
+  align-items: center;
+}
+`
+const Header = styled.h1`
+font-family: 'Satoshi';
+font-size: 18px;
+margin-bottom: -12px;
+`
+const ProfileImg = styled.img`
+width: 164px;
+height: 164px;
+object-fit: cover;
+border-radius: 100px;
+`
+const Name = styled.div`
+h1 {
+font-size: 28px;
+color: black;
+}
+margin-bottom: -40px;
+`
+
+const Title = styled.div`
+h1 {
+font-size: 32px;
+color: #C875DF;
+margin-bottom: -20px;
+}
+h2 {
+font-size: 24px;
+color: #D0D0D0
+}
+margin-bottom: -10px;
+@media (min-width: 1000px) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+`
+
+const Contact = styled.div`
+p {
+    font-size: 19px;
+    margin-bottom: -20px;
+}
+@media (min-width: 1000px) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+`
+const Icons = styled.div`
+display: flex;
+flex-direction: row;
+gap: 30px;
+margin-top: 30px;
+`
+
+const StyledA = styled.a`
+color: #D0D0D0;
+&:hover {
+color: black;
+}
+font-size: 30px;
+`
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 000000000..7c70c1fc3
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,129 @@
+/* eslint-disable max-len */
+import React from 'react';
+import styled from 'styled-components';
+import andrea2 from 'images/andrea2.jpeg'
+import { Player, Controls } from '@lottiefiles/react-lottie-player';
+
+const Header = () => {
+  return (
+    <HeaderWrapper>
+      <HeaderSection>
+        <ProfileImg src={andrea2} />
+        <Name><h1>Andrea Hedström</h1></Name>
+        <Title>
+          <h1>Front End Developer</h1>
+          <h2>+ Digital communicator with UX-knowledge</h2>
+        </Title>
+        <Introduktion>
+          <p>With a background working within LSS mixed with studies both in Swedish Sign Language, design and digital communication I now want to bring evertyhing together in my new role as an Frontend Developer. My ultimate goal is to merge my diverse skill set to create innovative and inclusive solutions that benefit all users.</p>
+        </Introduktion>
+        <Icons>
+          <StyledA href="https://www.linkedin.com/in/andrea-hedstr%C3%B6m-3549a516b/" target="_blank" rel="noopener noreferrer">
+            <i className="fa-brands fa-linkedin-in" />
+          </StyledA>
+          <StyledA href="https://github.com/AndreaHedstrom" target="_blank" rel="noopener noreferrer">
+            <i className="fa-brands fa-github" />
+          </StyledA>
+          <StyledA href="mailto:andrea.hedstrom@outlook.com" target="_blank" rel="noopener noreferrer">
+            <i className="fa-regular fa-envelope" />
+          </StyledA>
+        </Icons>
+      </HeaderSection>
+      <ImageSection>
+        <Coder>
+          <Player
+            autoplay
+            loop
+            src="https://assets8.lottiefiles.com/packages/lf20_KTTSsGSbg1.json"
+            style={{ height: '600px', width: '800px' }}>
+            <Controls visible={false} buttons={['play', 'repeat', 'frame', 'debug']} />
+          </Player>
+        </Coder>
+      </ImageSection>
+    </HeaderWrapper>
+  )
+}
+
+const HeaderSection = styled.div`
+font-family: "Satoshi";
+display: flex;
+flex-direction: column;
+margin: 20px;
+`
+const ProfileImg = styled.img`
+align-self: center;
+margin: 55px;
+width: 164px;
+height: 164px;
+object-fit: cover;
+border-radius: 100px;
+
+@media (min-width: 768px) {
+  align-self: flex-start;
+}
+`
+const Name = styled.div`
+h1 {
+font-size: 28px;
+color: black;
+}
+margin-bottom: -40px;
+`
+
+const Title = styled.div`
+h1 {
+font-size: 32px;
+color: #C875DF;
+margin-bottom: -20px;
+}
+h2 {
+font-size: 24px;
+color: #D0D0D0
+}
+margin-bottom: -30px;
+`
+
+const Introduktion = styled.div`
+p {
+font-size: 22px;
+font-family: 'EB Garamond';
+}
+@media (min-width: 768px) {
+  width: 500px;
+}
+`
+
+const Icons = styled.div`
+display: flex;
+flex-direction: row;
+gap: 30px;
+`
+
+const StyledA = styled.a`
+color: #D0D0D0;
+&:hover {
+color: black;
+}
+font-size: 30px;
+`
+const ImageSection = styled.div`
+display: none;
+@media (min-width: 1000px){
+  display: block;
+}
+`
+
+const HeaderWrapper = styled.div`
+@media (min-width: 668px) {
+  display: flex;
+  flex-direction: row;
+}
+`
+const Coder = styled.div`
+display: flex;
+align-items: center;
+justify-content: center;
+margin-right: -40px;
+`
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/ProjectList.js b/src/components/ProjectList.js
new file mode 100644
index 000000000..9b4506530
--- /dev/null
+++ b/src/components/ProjectList.js
@@ -0,0 +1,87 @@
+// import Artsie from 'images/Artsie.png';
+import Quizzy from 'images/Quizzy.png'
+import Labyrinth from 'images/labyrinth-mockup.png'
+import WeatherLondon from 'images/WeatherLondon.png'
+import Checklist from 'images/Checklist.png'
+import MovieMovie from 'images/moviess.png'
+import PartyServey1 from 'images/PartyServey1.png'
+import GuessWindow from 'images/GuessWindow.png'
+import AuthImg from 'images/AuthImg.png'
+import Guardians from 'images/Guardinas.png'
+
+const ProjectList = [
+  {
+    projectImg: `${Guardians}`,
+    title: 'Final Project',
+    text: 'Me and my teams final project for Technigo bootcamp. A fullstack project where we created an app that encourages people to do good things for the environment in a fun and positive way using gamification.',
+    techLanguage: ['Redux', 'React', 'Javascript', 'Node', 'Express', 'MongoDB'],
+    githubLink: '',
+    liveLink: 'https://papaya-concha-9783c6.netlify.app/login'
+  },
+  {
+    projectImg: `${AuthImg}`,
+    title: 'Authorization',
+    text: 'API and frontend for user authentication. It uses bcrypt for secure password storage, validates user input, and enforces authentication for specific endpoints.',
+    techLanguage: ['Redux', 'React', 'Javascript', 'MongoDB'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-labyrinth',
+    liveLink: 'https://flourishing-creponne-3b5e77.netlify.app/login'
+  },
+  {
+    projectImg: `${Labyrinth}`,
+    title: '<The Labyrinth />',
+    text: 'A labyrinth game built with React and Redux with an old school design, inspired by some code elements.',
+    techLanguage: ['Redux', 'React', 'Javascript', 'HTML5', 'CSS3'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-labyrinth',
+    liveLink: 'https://reliable-sorbet-d720d3.netlify.app/'
+  },
+  {
+    projectImg: `${Checklist}`,
+    title: 'Back & forth list',
+    text: 'A checklist made with React and Redux designed to help keep track of wich clothes and items are at home and wich ones are at preschool. The everyday struggle as a parent.',
+    techLanguage: ['Redux', 'React', 'Javascript', 'HTML5', 'CSS3'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-todos',
+    liveLink: 'https://backandforthlist.netlify.app/'
+  },
+  {
+    projectImg: `${Quizzy}`,
+    title: 'Color Quiz',
+    text: 'A quiz, built with Redux, for kids where they in a fun way learn a little bit about colors.',
+    techLanguage: ['Redux', 'React', 'Javascript', 'HTML5', 'CSS3'],
+    githubLink: 'https://github.com/AndreaHedstrom/Redux-quiz',
+    liveLink: 'https://great-color-quiz.netlify.app/'
+  },
+  {
+    projectImg: `${MovieMovie}`,
+    title: 'Movie site',
+    text: 'A classic movie site where I followed a given design',
+    techLanguage: ['React', 'Javascript', 'HTML5', 'CSS3'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-movies',
+    liveLink: 'https://annandreas-popular-movies.netlify.app'
+  },
+  {
+    projectImg: `${PartyServey1}`,
+    title: 'Day dream survey',
+    text: 'A survey using React that leverages state management. Through the use of the useState hook, I have connected HTML form inputs to the applications state. This enables users to plan an imaginary party by interacting with form fields, and the application dynamically displays different components based on their progress within the survey.',
+    techLanguage: ['Javascript', 'HTML5', 'CSS3', 'React'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-survey',
+    liveLink: 'https://dream-party.netlify.app/'
+  },
+  {
+    projectImg: `${WeatherLondon}`,
+    title: 'Weather App',
+    text: 'A Weather app that fetches data via API to display the current weather in London. We were provided with a design template, which we used as a guide throughout the project.',
+    techLanguage: ['Javascript', 'HTML5', 'CSS3'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-weather-app',
+    liveLink: 'https://taupe-kitten-1e868d.netlify.app/'
+  },
+  {
+    projectImg: `${GuessWindow}`,
+    title: 'Guess home',
+    text: 'A new version of the classic game Guess Who using JavaScript. Wich home is the secret one? In the process, I have delved deep into JavaScript concepts like objects, arrays, and functions',
+    techLanguage: ['Javascript', 'HTML5', 'CSS3'],
+    githubLink: 'https://github.com/AndreaHedstrom/project-guess-who',
+    liveLink: 'https://guess-home.netlify.app/'
+  }
+]
+
+export default ProjectList;
\ No newline at end of file
diff --git a/src/components/Skills.js b/src/components/Skills.js
new file mode 100644
index 000000000..dff9e20a0
--- /dev/null
+++ b/src/components/Skills.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Player, Controls } from '@lottiefiles/react-lottie-player';
+
+const Skills = () => {
+  return (
+    <SkillSection>
+      <Header>
+        <h1>Skills</h1>
+      </Header>
+      <TechSkills>
+        <Code>
+          <li><span>Code</span></li>
+          <li>HTML5</li>
+          <li>CSS3</li>
+          <li>JavaScript</li>
+          <li>React</li>
+          <li>Styled Components</li>
+        </Code>
+        <ToolBox>
+          <li><span>Toolbox</span></li>
+          <li>Visual Studio Code</li>
+          <li>Figma</li>
+          <li>Slack</li>
+          <li>Canva</li>
+          <li>Github</li>
+        </ToolBox>
+        <More>
+          <li><span>More</span></li>
+          <li>UX-design</li>
+        </More>
+        <Upcoming>
+          <li><span>Upcoming</span></li>
+          <li>Node.js</li>
+        </Upcoming>
+      </TechSkills>
+      <Computer>
+        <Player
+          autoplay
+          loop
+          src="https://assets2.lottiefiles.com/packages/lf20_2BTmhJ.json"
+          style={{ height: '300px', width: '300px' }}>
+          <Controls visible={false} buttons={['play', 'repeat', 'frame', 'debug']} />
+        </Player>
+      </Computer>
+    </SkillSection>
+  )
+}
+
+export default Skills;
+
+const SkillSection = styled.div`
+background-color: #F0EAD4;
+height: 910px;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+list-style: none;
+text-align: center;
+position: relative;
+--mask:
+    radial-gradient(65.38px at 50% 91.20px,#000 99%,#0000 101%) calc(50% - 76px) 0/152px 51% repeat-x,
+    radial-gradient(65.38px at 50% -53.2px,#0000 99%,#000 101%) 50% 38px/152px calc(51% - 38px) repeat-x,
+    radial-gradient(65.38px at 50% calc(100% - 91.20px),#000 99%,#0000 101%) calc(50% - 76px) 100%/152px 51% repeat-x,
+    radial-gradient(65.38px at 50% calc(100% + 53.20px),#0000 99%,#000 101%) 50% calc(100% - 38px)/152px calc(51% - 38px) repeat-x;
+  -webkit-mask: var(--mask);
+          mask: var(--mask);
+@media (min-width: 1000px){
+  height: 600px;
+}
+`
+
+const Header = styled.h1`
+font-family: 'Satoshi';
+font-size: 43px;
+color: #7A896D;
+margin-top: -40px;
+margin-bottom: -20px;
+@media (min-width: 1000px) {
+  margin-top: -80px;
+  padding-left: 300px;
+}
+`
+const TechSkills = styled.div`
+display: flex;
+flex-direction: column;
+font-size: 22px;
+line-height: 32px;
+font-family: 'EB Garamond';
+@media (min-width: 1000px){
+  flex-direction: row;
+  gap: 30px;
+  padding-left: 300px;
+}
+`
+const Code = styled.div`
+margin-bottom: 20px;
+span {
+    background-color: #cdcf7f;
+    color: white;
+}
+`
+const ToolBox = styled.div`
+margin-bottom: 20px;
+span {
+    background-color: rgb(11, 11, 175);
+    color: white;
+}
+`
+
+const More = styled.div`
+margin-bottom: 20px;
+span {
+    background-color: rgb(124, 172, 193);
+    color: white
+}
+
+`
+
+const Upcoming = styled.div`
+span {
+    background-color: rgb(216, 148, 167);
+    color:white;
+}
+`
+const Computer = styled.div`
+display: none;
+@media (min-width: 1000px){ 
+display: block;
+position: absolute;
+margin-left: -800px;
+}
+`
diff --git a/src/components/Tech.js b/src/components/Tech.js
new file mode 100644
index 000000000..b0f06b119
--- /dev/null
+++ b/src/components/Tech.js
@@ -0,0 +1,57 @@
+/* eslint-disable max-len */
+import React from 'react';
+import styled from 'styled-components';
+
+const Tech = () => {
+  return (
+    <TechSection>
+      <Header>
+        <h1>Tech</h1>
+      </Header>
+      <TechText>
+        <p>
+          HTML, CSS, Flexbox, <span>JavaScript,</span> ES6, JSX, <span>React,</span> React Hooks, Redux, Node.js, Mongo DB, Web Accessibly, API:s, mob-programming, pair-programming, Github.
+        </p>
+      </TechText>
+    </TechSection>
+  )
+}
+
+const TechSection = styled.div`
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+background-color: #F0EAD4;
+height: 500px;
+width: 100%;
+margin-bottom: 20px;
+position: relative;
+--mask:
+    radial-gradient(65.38px at 50% 91.20px,#000 99%,#0000 101%) calc(50% - 76px) 0/152px 51% repeat-x,
+    radial-gradient(65.38px at 50% -53.2px,#0000 99%,#000 101%) 50% 38px/152px calc(51% - 38px) repeat-x,
+    radial-gradient(65.38px at 50% calc(100% - 91.20px),#000 99%,#0000 101%) calc(50% - 76px) 100%/152px 51% repeat-x,
+    radial-gradient(65.38px at 50% calc(100% + 53.20px),#0000 99%,#000 101%) 50% calc(100% - 38px)/152px calc(51% - 38px) repeat-x;
+  -webkit-mask: var(--mask);
+          mask: var(--mask);
+`
+
+const Header = styled.h1`
+font-family: 'Satoshi';
+font-size: 43px;
+margin-top: -70px;
+color: #7A896D;
+`
+const TechText = styled.p`
+font-family: 'EB Garamond';
+font-size: 22px;
+padding: 20px;
+margin-top: -120px;
+span {
+  background: #D6A9E2;
+}
+@media (min-width: 768px) {
+  width: 400px;
+}
+`
+export default Tech;
\ No newline at end of file
diff --git a/src/images/Artsie.png b/src/images/Artsie.png
new file mode 100644
index 000000000..8c8258c0b
Binary files /dev/null and b/src/images/Artsie.png differ
diff --git a/src/images/ArtsieWall.png b/src/images/ArtsieWall.png
new file mode 100644
index 000000000..832396e52
Binary files /dev/null and b/src/images/ArtsieWall.png differ
diff --git a/src/images/AuthImg.png b/src/images/AuthImg.png
new file mode 100644
index 000000000..5f2e30bc8
Binary files /dev/null and b/src/images/AuthImg.png differ
diff --git a/src/images/Backandforth.png b/src/images/Backandforth.png
new file mode 100644
index 000000000..124eb307e
Binary files /dev/null and b/src/images/Backandforth.png differ
diff --git a/src/images/BlueLine.png b/src/images/BlueLine.png
new file mode 100644
index 000000000..df2846b9a
Binary files /dev/null and b/src/images/BlueLine.png differ
diff --git a/src/images/BreakLine.png b/src/images/BreakLine.png
new file mode 100644
index 000000000..40561b150
Binary files /dev/null and b/src/images/BreakLine.png differ
diff --git a/src/images/Checklist.png b/src/images/Checklist.png
new file mode 100644
index 000000000..6e215374a
Binary files /dev/null and b/src/images/Checklist.png differ
diff --git a/src/images/ColorQuiz.png b/src/images/ColorQuiz.png
new file mode 100644
index 000000000..24ffb91aa
Binary files /dev/null and b/src/images/ColorQuiz.png differ
diff --git a/src/images/Guardinas.png b/src/images/Guardinas.png
new file mode 100644
index 000000000..df3ddadd3
Binary files /dev/null and b/src/images/Guardinas.png differ
diff --git a/src/images/GuessWho.png b/src/images/GuessWho.png
new file mode 100644
index 000000000..d2d00c33e
Binary files /dev/null and b/src/images/GuessWho.png differ
diff --git a/src/images/GuessWindow.png b/src/images/GuessWindow.png
new file mode 100644
index 000000000..2ed9ab860
Binary files /dev/null and b/src/images/GuessWindow.png differ
diff --git a/src/images/Home.png b/src/images/Home.png
new file mode 100644
index 000000000..7d1dffbc3
Binary files /dev/null and b/src/images/Home.png differ
diff --git a/src/images/Labyrinth.png b/src/images/Labyrinth.png
new file mode 100644
index 000000000..6c738534d
Binary files /dev/null and b/src/images/Labyrinth.png differ
diff --git a/src/images/Labyrinth2.png b/src/images/Labyrinth2.png
new file mode 100644
index 000000000..8740af88d
Binary files /dev/null and b/src/images/Labyrinth2.png differ
diff --git a/src/images/Line.png b/src/images/Line.png
new file mode 100644
index 000000000..345924a3f
Binary files /dev/null and b/src/images/Line.png differ
diff --git a/src/images/MovieMovie.png b/src/images/MovieMovie.png
new file mode 100644
index 000000000..63c401117
Binary files /dev/null and b/src/images/MovieMovie.png differ
diff --git a/src/images/Movies.png b/src/images/Movies.png
new file mode 100644
index 000000000..b3e85367b
Binary files /dev/null and b/src/images/Movies.png differ
diff --git a/src/images/PartyServey.png b/src/images/PartyServey.png
new file mode 100644
index 000000000..a3a92ded0
Binary files /dev/null and b/src/images/PartyServey.png differ
diff --git a/src/images/PartyServey1.png b/src/images/PartyServey1.png
new file mode 100644
index 000000000..dd0061a16
Binary files /dev/null and b/src/images/PartyServey1.png differ
diff --git a/src/images/QuizColor.png b/src/images/QuizColor.png
new file mode 100644
index 000000000..9037ae1f5
Binary files /dev/null and b/src/images/QuizColor.png differ
diff --git a/src/images/Quizzy.png b/src/images/Quizzy.png
new file mode 100644
index 000000000..dcb81e1d9
Binary files /dev/null and b/src/images/Quizzy.png differ
diff --git a/src/images/Weather.png b/src/images/Weather.png
new file mode 100644
index 000000000..0bf9c3374
Binary files /dev/null and b/src/images/Weather.png differ
diff --git a/src/images/WeatherLondon.png b/src/images/WeatherLondon.png
new file mode 100644
index 000000000..72ccb8e41
Binary files /dev/null and b/src/images/WeatherLondon.png differ
diff --git a/src/images/andrea.JPG b/src/images/andrea.JPG
new file mode 100644
index 000000000..9c047aedc
Binary files /dev/null and b/src/images/andrea.JPG differ
diff --git a/src/images/andrea2.jpeg b/src/images/andrea2.jpeg
new file mode 100644
index 000000000..5ce70a5c2
Binary files /dev/null and b/src/images/andrea2.jpeg differ
diff --git a/src/images/backforth.png b/src/images/backforth.png
new file mode 100644
index 000000000..616c50db0
Binary files /dev/null and b/src/images/backforth.png differ
diff --git a/src/images/labyrinth-mockup.png b/src/images/labyrinth-mockup.png
new file mode 100644
index 000000000..68990c2dc
Binary files /dev/null and b/src/images/labyrinth-mockup.png differ
diff --git a/src/images/moviess.png b/src/images/moviess.png
new file mode 100644
index 000000000..1fe669222
Binary files /dev/null and b/src/images/moviess.png differ
diff --git a/src/index.css b/src/index.css
index 4a1df4db7..8693e5bc0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -11,3 +12,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.fa-brands {
+  font-size: 33px;
+  }
+
+  .fa-regular {
+    font-size: 33px;
+    }
\ No newline at end of file