diff --git a/package-lock.json b/package-lock.json
index eb0c89dd..45175064 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,9 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.1",
         "web-vitals": "^0.2.4"
+      },
+      "devDependencies": {
+        "styled-components": "^5.3.3"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -109,11 +112,11 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
-      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.16.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -274,11 +277,11 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.16.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -382,9 +385,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "version": "7.15.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
+      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1836,11 +1839,11 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1894,6 +1897,33 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "dev": true
+    },
+    "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==",
+      "dev": true
+    },
+    "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==",
+      "dev": true
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
@@ -4624,6 +4654,27 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
+      "integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.15.4",
+        "@babel/helper-module-imports": "^7.15.4",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      },
+      "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": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
+    },
     "node_modules/babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -5444,6 +5495,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6228,6 +6285,15 @@
         "node": ">=6.0.0"
       }
     },
+    "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": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -6350,6 +6416,17 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dev": true,
+      "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",
@@ -17631,6 +17708,12 @@
         "node": ">=8"
       }
     },
+    "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==",
+      "dev": true
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -18493,6 +18576,57 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@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/styled-components/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/styled-components/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -21584,11 +21718,11 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
-      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.16.0"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -21705,11 +21839,11 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.16.0"
       }
     },
     "@babel/helper-module-transforms": {
@@ -21786,9 +21920,9 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+      "version": "7.15.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
+      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w=="
     },
     "@babel/helper-validator-option": {
       "version": "7.14.5",
@@ -22748,11 +22882,11 @@
       }
     },
     "@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -22794,6 +22928,33 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dev": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "dev": true
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+      "dev": true
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "dev": true
+    },
     "@eslint/eslintrc": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
@@ -24889,6 +25050,24 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
+      "integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.15.4",
+        "@babel/helper-module-imports": "^7.15.4",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "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": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -25570,6 +25749,12 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -26207,6 +26392,12 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "dev": true
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -26291,6 +26482,17 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dev": true,
+      "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",
@@ -35191,6 +35393,12 @@
         "kind-of": "^6.0.2"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -35890,6 +36098,41 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@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"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
diff --git a/package.json b/package.json
index 2e9e757e..52b2cb6b 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "styled-components": "^5.3.3"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index 0ac0adc1..f3df0e07 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -38,8 +38,10 @@ const App = () => {
     setBasketData(response);
   };
 
-  const addProduct = async (productId, quantity) => {
-    const response = await commerce.cart.add(productId, quantity);
+  const addProduct = async (productId, quantity, option = {}) => {
+    const response = await commerce.cart.add(productId, quantity, {
+      ...option,
+    });
     setBasketData(response.cart);
   };
 
diff --git a/src/components/CustomCard/index.jsx b/src/components/CustomCard/index.jsx
index 605424c7..ddd11f93 100644
--- a/src/components/CustomCard/index.jsx
+++ b/src/components/CustomCard/index.jsx
@@ -28,7 +28,7 @@ const CustomCard = ({
             alt="Contemplative Reptile"
             height="260"
             className="card-image"
-            image={product.media.source}
+            image={product.image.url}
             title="Contemplative Reptile"
             style={{
               height: categoryName === "Smartphones" ? "440px" : "",
diff --git a/src/components/ProductView/index.js b/src/components/ProductView/index.js
index a820d20e..bc3a8c1e 100644
--- a/src/components/ProductView/index.js
+++ b/src/components/ProductView/index.js
@@ -1,30 +1,98 @@
-import { Grid, Button, Container, Typography } from "@material-ui/core";
+import { Button, Container, Typography } from "@material-ui/core";
 import { ShoppingCart } from "@material-ui/icons";
 import { commerce } from "../../lib/commerce";
 import { useState, useEffect } from "react";
 import Spinner from "../Spinner";
-
-import "./style.css";
+import styled from "styled-components";
 
 const createMarkup = (text) => {
   return { __html: text };
 };
 
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  min-height: 75vh;
+  margin-top: 12vh;
+  grid-gap: 15px;
+  padding-bottom: 20px;
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`;
+
+const ImgWrapper = styled.div`
+  width: 50%;
+  margin-bottom: 20px;
+  text-align: center;
+  > img {
+    max-width: 320px;
+  }
+
+  @media (min-width: 768px) {
+    margin-bottom: 0;
+  }
+`;
+
+const VariantsWrapper = styled.div`
+  display: flex;
+  height: 140px;
+
+  img {
+    max-width: 140px;
+    cursor: pointer;
+    margin-right: 10px;
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+  margin: 15px 0;
+  > button,
+  h5 {
+    margin-right: 10px;
+  }
+`;
+
+const VariantsTitle = styled(Typography)`
+  margin: 10px 0;
+  text-align: left;
+`;
+
+const AddToBasketButton = styled(Button)`
+  color: #000;
+  background-color: #bb86fc;
+  &:hover {
+    color: #c9d1d9;
+    background-color: #bb86fc;
+  }
+  svg {
+    margin-right: 10px;
+  }
+`;
+
 const ProductView = ({ addProduct }) => {
   const [product, setProduct] = useState({});
+  const [originalPrice, setOriginalPrice] = useState(0);
   const [quantity, setQuantity] = useState(1);
   const [loading, setLoading] = useState(true);
 
   const fetchProduct = async (id) => {
     const response = await commerce.products.retrieve(id);
-    const { name, price, media, quantity, description } = response;
+    const { name, price, assets, image, variants, quantity, description } =
+      response;
+    setOriginalPrice(price.raw);
     setProduct({
       id,
       name,
+      assets,
+      variants,
       quantity,
       description,
-      src: media.source,
-      price: price.formatted_with_symbol,
+      src: image.url,
+      price: price.formatted_with_code,
     });
   };
 
@@ -42,10 +110,34 @@ const ProductView = ({ addProduct }) => {
     }
   };
 
+  const priceCalculator = (optionPrice) => {
+    if (optionPrice === originalPrice) {
+      return product.price;
+    }
+
+    const priceArray = product.price.split(" ");
+    const total = originalPrice + optionPrice;
+    return `${total} ${priceArray[1]}`;
+  };
+
+  const updateProduct = (optionPrice, src, { id, variantId }) => {
+    setProduct({
+      ...product,
+      price: priceCalculator(optionPrice),
+      src,
+      option: { [variantId]: id },
+    });
+  };
+
+  const getImageUrl = (assetId) => {
+    const relatedAsset = product.assets.find((pro) => pro.id === assetId);
+    return relatedAsset?.url || "";
+  };
+
   return (
-    <Container className="product-view">
-      <Grid container spacing={4}>
-        <Grid item xs={12} md={8} className="image-wrapper">
+    <Container>
+      <Wrapper>
+        <ImgWrapper>
           <img
             onLoad={() => {
               setLoading(false);
@@ -53,33 +145,51 @@ const ProductView = ({ addProduct }) => {
             src={product.src}
             alt={product.name}
           />
-        </Grid>
-        <Grid item xs={12} md={4} className="text">
-          <Typography variant="h2">{product.name}</Typography>
+
+          {product.variants?.length ? (
+            <VariantsTitle variant="h4">
+              Select different colours.
+            </VariantsTitle>
+          ) : null}
+          <VariantsWrapper>
+            {product.variants?.length
+              ? product.variants[0].options?.map((pro) => (
+                  <img
+                    src={getImageUrl(pro.assets[0])}
+                    alt={pro.name}
+                    onClick={() =>
+                      updateProduct(pro.price.raw, getImageUrl(pro.assets[0]), {
+                        id: pro.id,
+                        variantId: product.variants[0].id,
+                      })
+                    }
+                  />
+                ))
+              : null}
+          </VariantsWrapper>
+        </ImgWrapper>
+
+        <div>
+          <Typography variant="h4">{product.name}</Typography>
           <Typography
-            variant="p"
+            variant="h6"
             dangerouslySetInnerHTML={createMarkup(product.description)}
           />
-          <Typography variant="h3">Price: {product.price}</Typography>
-          <Grid container spacing={4}>
-            <Grid item xs={12}>
+          <Typography variant="h5">Price: {product.price}</Typography>
+          <div>
+            <Actions>
               <Button
                 size="small"
                 variant="contained"
-                className="increase-product-quantity"
                 onClick={() => {
                   handleQuantity("increase");
                 }}
               >
                 +
               </Button>
-            </Grid>
-            <Grid item xs={12}>
-              <Typography className="quantity" variant="h3">
-                Quantity: {quantity}
-              </Typography>
-            </Grid>
-            <Grid item xs={12}>
+
+              <Typography variant="h5">Quantity: {quantity}</Typography>
+
               <Button
                 size="small"
                 color="secondary"
@@ -90,22 +200,19 @@ const ProductView = ({ addProduct }) => {
               >
                 -
               </Button>
-            </Grid>
-            <Grid item xs={12}>
-              <Button
-                size="large"
-                className="custom-button"
-                onClick={() => {
-                  addProduct(product.id, quantity);
-                }}
-              >
-                <ShoppingCart /> Add to basket
-              </Button>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-      {loading && <Spinner />}
+            </Actions>
+            <AddToBasketButton
+              size="large"
+              onClick={() => {
+                addProduct(product.id, quantity, product.option);
+              }}
+            >
+              <ShoppingCart /> Add to basket
+            </AddToBasketButton>
+          </div>
+        </div>
+        {loading && <Spinner />}
+      </Wrapper>
     </Container>
   );
 };
diff --git a/src/components/ProductView/style.css b/src/components/ProductView/style.css
deleted file mode 100644
index 455b2a7b..00000000
--- a/src/components/ProductView/style.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.MuiContainer-root.product-view {
-  height: 80vh;
-  display: flex;
-  align-items: center;
-  margin: 150px 0 100px 0;
-}
-
-.product-view .image-wrapper img {
-  width: 100%;
-}
-
-.product-view .text {
-  color: #ffffff;
-}
-
-.product-view .text h2 {
-  font-size: 30px;
-}
-
-.product-view .text span h1 {
-  font-size: 20px;
-  font-weight: 300;
-}
-
-.product-view .text h3 {
-  margin-bottom: 20px;
-  font-size: 20px;
-  font-weight: 300;
-}
-
-.product-view .text .quantity {
-  margin-bottom: 5px;
-}
-
-.MuiContainer-root.product-view .custom-button {
-  color: #000;
-  background-color: #bb86fc;
-}
-
-.MuiContainer-root.product-view .custom-button:hover {
-  color: #c9d1d9;
-}
-
-.MuiContainer-root.product-view .custom-button svg {
-  margin-right: 10px;
-}
-
-.MuiContainer-root.product-view .increase-product-quantity {
-  background-color: #03dac5;
-  border-color: #03dac5;
-}
-
-.product-view .MuiGrid-root .MuiGrid-item {
-  padding: 5px 15px;
-}
-
-@media (min-width: 960px) {
-  .MuiContainer-root.product-view {
-    height: 88vh;
-    margin: 40px 0 0;
-  }
-}